@vertigis/react-ui 21.5.7 → 21.7.0

package/AdapterDateFns/index.d.ts

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

package/AdapterDateFns/index.js

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

package/DatePicker/DatePicker.d.ts

@@ -2,7 +2,7 @@ import type { DatePickerProps as MuiDatePickerProps } from "@mui/x-date-pickers/
 import type { PickerValidDate } from "@mui/x-date-pickers/models";
 export type { PickerValidDate };
 export * from "@mui/x-date-pickers/DatePicker";
-export interface DatePickerProps<TDate extends PickerValidDate> extends MuiDatePickerProps<TDate> {
+export interface DatePickerProps extends MuiDatePickerProps<false> {
 }
-declare const _default: <TDate extends PickerValidDate>(props: DatePickerProps<TDate>) => JSX.Element;
+declare const _default: (props: DatePickerProps) => JSX.Element;
 export default _default;

package/DatePicker/DatePicker.js

@@ -3,5 +3,5 @@ import { DatePicker as MuiDatePicker } from "@mui/x-date-pickers/DatePicker";
 import { forwardRef } from "react";
 import FormLabelTextField from "../FormLabelTextField/index.js";
 export * from "@mui/x-date-pickers/DatePicker";
-const DatePicker = ({ slots, ...props }, ref) => (_jsx(MuiDatePicker, { ref: ref, slots: { textField: FormLabelTextField, ...slots }, ...props }));
+const DatePicker = ({ slots, ...props }, ref) => (_jsx(MuiDatePicker, { enableAccessibleFieldDOMStructure: false, ref: ref, slots: { textField: FormLabelTextField, ...slots }, ...props }));
 export default forwardRef(DatePicker);

package/DateRangePicker/DateRangePicker.d.ts

@@ -4,8 +4,8 @@ export type { PickerValidDate };
 export * from "@mui/x-date-pickers-pro/DateRangePicker";
 export * from "@mui/x-date-pickers-pro/DesktopDateRangePicker";
 export * from "@mui/x-date-pickers-pro/MobileDateRangePicker";
-export interface DateRangePickerProps<TDate extends PickerValidDate> extends MuiDateRangePickerProps<TDate> {
+export interface DateRangePickerProps extends MuiDateRangePickerProps<false> {
     dateSeparator?: string;
 }
-declare const _default: <TDate extends PickerValidDate>(props: DateRangePickerProps<TDate>) => JSX.Element;
+declare const _default: (props: DateRangePickerProps) => JSX.Element;
 export default _default;

package/DateRangePicker/DateRangePicker.js

@@ -1,9 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { DateRangePicker as MuiDateRangePicker } from "@mui/x-date-pickers-pro/DateRangePicker";
+import { MultiInputDateRangeField } from "@mui/x-date-pickers-pro/MultiInputDateRangeField";
 import { forwardRef } from "react";
 import FormLabelTextField from "../FormLabelTextField/index.js";
 export * from "@mui/x-date-pickers-pro/DateRangePicker";
 export * from "@mui/x-date-pickers-pro/DesktopDateRangePicker";
 export * from "@mui/x-date-pickers-pro/MobileDateRangePicker";
-const DateRangePicker = ({ dateSeparator, slots, slotProps, ...props }, ref) => (_jsx(MuiDateRangePicker, { ref: ref, slotProps: { field: { dateSeparator }, ...slotProps }, slots: { textField: FormLabelTextField, ...slots }, ...props }));
+const DateRangePicker = ({ dateSeparator, slots, slotProps, ...props }, ref) => (_jsx(MuiDateRangePicker, { enableAccessibleFieldDOMStructure: false, ref: ref, slotProps: { field: { dateSeparator }, ...slotProps }, slots: { field: MultiInputDateRangeField, textField: FormLabelTextField, ...slots }, ...props }));
 export default forwardRef(DateRangePicker);

package/DateTimePicker/DateTimePicker.d.ts

@@ -2,7 +2,7 @@ import type { DateTimePickerProps as MuiDateTimePickerProps } from "@mui/x-date-
 import type { PickerValidDate } from "@mui/x-date-pickers/models";
 export type { PickerValidDate };
 export * from "@mui/x-date-pickers/DateTimePicker";
-export interface DateTimePickerProps<TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean = false> extends MuiDateTimePickerProps<TDate, TEnableAccessibleFieldDOMStructure> {
+export interface DateTimePickerProps extends MuiDateTimePickerProps<false> {
 }
-declare const _default: <TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean = false>(props: MuiDateTimePickerProps<TDate, TEnableAccessibleFieldDOMStructure>) => JSX.Element;
+declare const _default: (props: MuiDateTimePickerProps<false>) => JSX.Element;
 export default _default;

package/DateTimePicker/DateTimePicker.js

@@ -4,7 +4,7 @@ import { renderTimeViewClock } from "@mui/x-date-pickers/timeViewRenderers";
 import { forwardRef } from "react";
 import FormLabelTextField from "../FormLabelTextField/index.js";
 export * from "@mui/x-date-pickers/DateTimePicker";
-const DateTimePicker = ({ slots, viewRenderers, ...props }, ref) => (_jsx(MuiDateTimePicker, { ref: ref, slots: { textField: FormLabelTextField, ...slots }, viewRenderers: {
+const DateTimePicker = ({ slots, viewRenderers, ...props }, ref) => (_jsx(MuiDateTimePicker, { enableAccessibleFieldDOMStructure: false, ref: ref, slots: { textField: FormLabelTextField, ...slots }, viewRenderers: {
         hours: viewRenderers?.hours ?? renderTimeViewClock,
         minutes: viewRenderers?.minutes ?? renderTimeViewClock,
         seconds: viewRenderers?.seconds ?? renderTimeViewClock,

package/DateTimeRangePicker/DateTimeRangePicker.d.ts

@@ -1,7 +1,7 @@
 import type { DateTimeRangePickerProps as MuiDateTimeRangePickerProps, PickerValidDate } from "@mui/x-date-pickers-pro";
 export type { PickerValidDate };
 export * from "@mui/x-date-pickers-pro/DateTimeRangePicker";
-export interface DateTimeRangePickerProps extends MuiDateTimeRangePickerProps<PickerValidDate> {
+export interface DateTimeRangePickerProps extends MuiDateTimeRangePickerProps<false> {
     dateSeparator?: string;
 }
 declare const DateTimeRangePicker: import("react").ForwardRefExoticComponent<DateTimeRangePickerProps & import("react").RefAttributes<HTMLInputElement>>;

package/DateTimeRangePicker/DateTimeRangePicker.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { DateTimeRangePicker as MuiDateTimeRangePicker, renderTimeViewClock, } from "@mui/x-date-pickers-pro";
+import { DateTimeRangePicker as MuiDateTimeRangePicker, MultiInputDateRangeField, renderTimeViewClock, } from "@mui/x-date-pickers-pro";
 import { forwardRef } from "react";
 import FormLabelTextField from "../FormLabelTextField/index.js";
 export * from "@mui/x-date-pickers-pro/DateTimeRangePicker";
-const DateTimeRangePicker = forwardRef(({ dateSeparator, slots, slotProps, viewRenderers, ...props }, ref) => (_jsx(MuiDateTimeRangePicker, { inputRef: ref, slotProps: { field: { dateSeparator }, ...slotProps }, slots: { textField: FormLabelTextField, ...slots }, viewRenderers: {
+const DateTimeRangePicker = forwardRef(({ dateSeparator, slots, slotProps, viewRenderers, ...props }, ref) => (_jsx(MuiDateTimeRangePicker, { enableAccessibleFieldDOMStructure: false, inputRef: ref, slotProps: { field: { dateSeparator }, ...slotProps }, slots: { field: MultiInputDateRangeField, textField: FormLabelTextField, ...slots }, viewRenderers: {
         hours: viewRenderers?.hours ?? renderTimeViewClock,
         minutes: viewRenderers?.minutes ?? renderTimeViewClock,
         seconds: viewRenderers?.seconds ?? renderTimeViewClock,

package/Markdown/Markdown.d.ts

@@ -1,17 +1,21 @@
-import type { FC } from "react";
+import { type FC } from "react";
 import type { BoxProps } from "../Box/index.js";
 /**
  * Properties for the `Markdown` component.
  */
 export interface MarkdownProps extends BoxProps {
     /**
-     * The markdown text to render.
+     * The markdown text to render. Optional, you can also supply the text as a
+     * child of this component.
      */
-    markdown: string;
+    markdown?: string;
     /**
      * Override the default sanitization behaviour with a caller-supplied
      * sanitization function that ensures that the resulting HTML is safe to
      * insert into the DOM.
+     *
+     * @deprecated The Markdown component no longer operates by attaching raw
+     *   HTML strings to the DOM, so this property is ignored.
      */
     sanitize?: (unsafeHtml: string) => string;
     /**
@@ -28,21 +32,30 @@ export interface MarkdownProps extends BoxProps {
      * Markdown syntax without also supporting HTML syntax. The default is
      * `false`.
      *
-     * IMPORTANT: The resulting HTML still needs to be sanitized whether or not
-     * this option is set.
+     * IMPORTANT: A sanitizer is run on any inline HTML before it is passed to
+     * React, but you should still probably set this to `true` when dealing with
+     * untrusted sources.
      */
     escapeHtml?: boolean;
     /**
      * An optional value to apply to external hyperlinks via the `target`
-     * attribute.
-     *
-     * If this is omitted, links may still open in a separate target if the host
-     * page specifies a `target` via the `<base>` element in its `<head>`.
+     * attribute. Defaults to "_blank".
      */
     linkTarget?: string;
+    /**
+     * Whether to use standard HTML elements instead of their `react-ui`
+     * equivalents. If this is `true` the VertiGIS 'Meridian' style will not be
+     * applied to the output. Defaults to `false`.
+     */
+    useBasicHtml?: boolean;
 }
 /**
- * A component that renders markdown as HTML.
+ * A component that renders markdown as React nodes.
+ *
+ * GitHub style sanitation is applied to any inline HTML encountered, see:
+ * https://github.com/gjtorikian/html-pipeline/blob/a2e02ac/lib/html_pipeline/sanitization_filter.rb
+ * However, it is still recommended to set `escapeHtml` to true with untrusted
+ * content.
  */
 declare const Markdown: FC<MarkdownProps>;
 export default Markdown;

package/Markdown/Markdown.js

@@ -1,12 +1,137 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+/* eslint-disable @typescript-eslint/prefer-nullish-coalescing */
 import clsx from "clsx";
+import { useMemo } from "react";
+import ReactMarkdown, {} from "react-markdown";
+import rehypeRaw from "rehype-raw";
+import rehypeSanitize from "rehype-sanitize";
 import Box from "../Box/index.js";
-import { sanitizeHtml } from "../utils/html.js";
-import { markdownToHtml } from "../utils/markdown.js";
+import Link, {} from "../Link/index.js";
+import Typography, {} from "../Typography/index.js";
+import { useTheme } from "../styles/index.js";
+const disallowedInlineElements = [
+    "a",
+    "abbr",
+    "area",
+    "audio",
+    "b",
+    "bdi",
+    "bdo",
+    "br",
+    "button",
+    "canvas",
+    "cite",
+    "code",
+    "data",
+    "datalist",
+    "del",
+    "dfn",
+    "em",
+    "embed",
+    "i",
+    "iframe",
+    "img",
+    "input",
+    "ins",
+    "kbd",
+    "label",
+    "link",
+    "map",
+    "mark",
+    "math",
+    "meta",
+    "meter",
+    "noscript",
+    "object",
+    "output",
+    "picture",
+    "progress",
+    "q",
+    "ruby",
+    "s",
+    "samp",
+    "script",
+    "select",
+    "slot",
+    "small",
+    "span",
+    "strong",
+    "sub",
+    "sup",
+    "svg",
+    "template",
+    "textarea",
+    "time",
+    "u",
+    "var",
+    "video",
+    "wbr",
+];
 /**
- * A component that renders markdown as HTML.
+ * A component that renders markdown as React nodes.
+ *
+ * GitHub style sanitation is applied to any inline HTML encountered, see:
+ * https://github.com/gjtorikian/html-pipeline/blob/a2e02ac/lib/html_pipeline/sanitization_filter.rb
+ * However, it is still recommended to set `escapeHtml` to true with untrusted
+ * content.
  */
-const Markdown = ({ markdown, inline, escapeHtml, sanitize = sanitizeHtml, linkTarget, className, ...otherProps }) => (_jsx(Box, { component: inline ? "span" : "div", className: clsx("GcxMarkdown", className), dangerouslySetInnerHTML: {
-        __html: sanitize(markdownToHtml(markdown, { inline, escapeHtml, linkTarget })),
-    }, ...otherProps }));
+const Markdown = ({ markdown, inline, escapeHtml, sanitize, linkTarget = "_blank", children, className, useBasicHtml, ...otherProps }) => {
+    const theme = useTheme();
+    const disallowedElements = useMemo(() => (inline ? disallowedInlineElements : []), [inline]);
+    const components = useMemo(() => useBasicHtml
+        ? {}
+        : {
+            a({ node, href, ...props }) {
+                const localLink = href?.startsWith(`${location.protocol}//${location.hostname}`) ||
+                    href?.startsWith(location.hostname) ||
+                    href?.startsWith("#") ||
+                    href?.startsWith("/");
+                return (_jsx(Link, { target: href?.startsWith("#") ? undefined : linkTarget, showExternalLinkIcon: !localLink, href: href, ...props }));
+            },
+            // Default margin values based on https://www.w3.org/TR/CSS2/sample.html
+            h1({ node, ...props }) {
+                return (_jsx(Typography, { ...props, sx: {
+                        marginBlockStart: theme.spacing(0.67),
+                        marginBlockEnd: theme.spacing(0.67),
+                    }, variant: "h1" }));
+            },
+            h2({ node, ...props }) {
+                return (_jsx(Typography, { ...props, sx: {
+                        marginBlockStart: theme.spacing(0.75),
+                        marginBlockEnd: theme.spacing(0.75),
+                    }, variant: "h2" }));
+            },
+            h3({ node, ...props }) {
+                return (_jsx(Typography, { ...props, sx: {
+                        marginBlockStart: theme.spacing(0.83),
+                        marginBlockEnd: theme.spacing(0.83),
+                    }, variant: "h3" }));
+            },
+            h4({ node, ...props }) {
+                return (_jsx(Typography, { ...props, sx: {
+                        marginBlockStart: theme.spacing(1),
+                        marginBlockEnd: theme.spacing(1),
+                    }, variant: "h4" }));
+            },
+            h5({ node, ...props }) {
+                return (_jsx(Typography, { ...props, sx: {
+                        marginBlockStart: theme.spacing(1.5),
+                        marginBlockEnd: theme.spacing(1.5),
+                    }, variant: "h5" }));
+            },
+            h6({ node, ...props }) {
+                return (_jsx(Typography, { ...props, sx: {
+                        marginBlockStart: theme.spacing(1.67),
+                        marginBlockEnd: theme.spacing(1.67),
+                    }, variant: "h6" }));
+            },
+            p({ node, ...props }) {
+                return (_jsx(Typography, { component: "p", ...props, sx: {
+                        marginBlockStart: theme.spacing(1),
+                        marginBlockEnd: theme.spacing(1),
+                    }, variant: "body1" }));
+            },
+        }, [linkTarget, theme, useBasicHtml]);
+    return (_jsx(Box, { component: inline ? "span" : "div", className: clsx("GcxMarkdown", className), ...otherProps, children: _jsx(ReactMarkdown, { components: components, disallowedElements: disallowedElements, rehypePlugins: escapeHtml ? [] : [rehypeRaw, rehypeSanitize], children: children && typeof children === "string" ? children : markdown }) }));
+};
 export default Markdown;

package/TimePicker/TimePicker.d.ts

@@ -2,7 +2,7 @@ import type { TimePickerProps as MuiTimePickerProps } from "@mui/x-date-pickers/
 import type { PickerValidDate } from "@mui/x-date-pickers/models";
 export type { PickerValidDate };
 export * from "@mui/x-date-pickers/TimePicker";
-export interface TimePickerProps<TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean = false> extends MuiTimePickerProps<TDate, TEnableAccessibleFieldDOMStructure> {
+export interface TimePickerProps extends MuiTimePickerProps<false> {
 }
-declare const _default: <TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean = false>(props: TimePickerProps<TDate, TEnableAccessibleFieldDOMStructure>) => JSX.Element;
+declare const _default: (props: TimePickerProps) => JSX.Element;
 export default _default;

package/TimePicker/TimePicker.js

@@ -4,7 +4,7 @@ import { renderTimeViewClock } from "@mui/x-date-pickers/timeViewRenderers";
 import { forwardRef } from "react";
 import FormLabelTextField from "../FormLabelTextField/index.js";
 export * from "@mui/x-date-pickers/TimePicker";
-const TimePicker = ({ slots, viewRenderers, ...props }, ref) => (_jsx(MuiTimePicker, { ref: ref, slots: { textField: FormLabelTextField, ...slots }, viewRenderers: {
+const TimePicker = ({ slots, viewRenderers, ...props }, ref) => (_jsx(MuiTimePicker, { enableAccessibleFieldDOMStructure: false, ref: ref, slots: { textField: FormLabelTextField, ...slots }, viewRenderers: {
         hours: viewRenderers?.hours ?? renderTimeViewClock,
         minutes: viewRenderers?.minutes ?? renderTimeViewClock,
         seconds: viewRenderers?.seconds ?? renderTimeViewClock,

package/TreeItem2/index.d.ts

@@ -1,2 +1,2 @@
-export * from "@mui/x-tree-view/TreeItem2";
-export { TreeItem2 as default } from "@mui/x-tree-view/TreeItem2";
+export * from "@mui/x-tree-view/TreeItem";
+export { TreeItem as default } from "@mui/x-tree-view/TreeItem";

package/TreeItem2/index.js

@@ -1,2 +1,2 @@
-export * from "@mui/x-tree-view/TreeItem2";
-export { TreeItem2 as default } from "@mui/x-tree-view/TreeItem2";
+export * from "@mui/x-tree-view/TreeItem";
+export { TreeItem as default } from "@mui/x-tree-view/TreeItem";

package/TreeView/index.d.ts

@@ -1,2 +1,2 @@
-export * from "@mui/x-tree-view/TreeView";
-export { TreeView as default } from "@mui/x-tree-view/TreeView";
+export * from "@mui/x-tree-view/SimpleTreeView";
+export { SimpleTreeView as default } from "@mui/x-tree-view/SimpleTreeView";

package/TreeView/index.js

@@ -1,2 +1,2 @@
-export * from "@mui/x-tree-view/TreeView";
-export { TreeView as default } from "@mui/x-tree-view/TreeView";
+export * from "@mui/x-tree-view/SimpleTreeView";
+export { SimpleTreeView as default } from "@mui/x-tree-view/SimpleTreeView";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vertigis/react-ui",
-  "version": "21.5.7",
+  "version": "21.7.0",
   "description": "Utilities and React components used in VertiGIS applications.",
   "keywords": [
     "vertigis",
@@ -17,16 +17,19 @@
   "dependencies": {
     "@mui/icons-material": "^7.2.0",
     "@mui/material": "^7.2.0",
-    "@mui/x-data-grid-pro": "^7.28.0",
-    "@mui/x-date-pickers-pro": "^7.28.0",
-    "@mui/x-license": "^7.24.1",
-    "@mui/x-tree-view": "^7.24.0",
+    "@mui/x-data-grid-pro": "^8.28.0",
+    "@mui/x-date-pickers-pro": "^8.27.2",
+    "@mui/x-license": "^8.26.0",
+    "@mui/x-tree-view": "^8.27.2",
     "autosuggest-highlight": "^3.3.4",
     "clsx": "^2.1.0",
     "color": "^4.2.3",
     "lodash.escape": "^4.0.1",
     "marked": "^12.0.1",
     "react-color": "^2.19.3",
+    "react-markdown": "^10.1.0",
+    "rehype-raw": "^7.0.0",
+    "rehype-sanitize": "^6.0.0",
     "tslib": "^2.6.2",
     "xss": "^1.0.15"
   },

package/styles/createTheme.js

@@ -696,6 +696,13 @@ function getComponentOverrides(theme, isDense) {
                     dir: theme.direction,
                 },
             },
+            MuiMultiInputDateRangeField: {
+                styleOverrides: {
+                    root: {
+                        marginBottom: spacing(1),
+                    },
+                },
+            },
             MuiNativeSelect: {
                 defaultProps: {
                     variant: "standard",

package/utils/markdown.d.ts

@@ -33,6 +33,8 @@ export interface MarkdownToHtmlOptions {
  * Converts markdown text into HTML. The resulting HTML is sanitized and safe to
  * insert into the DOM.
  *
+ * @deprecated Use the `Markdown` component to add markdown safely without
+ *   parsing raw HTML strings.
  * @param markdown The markdown text to convert.
  * @param options Options that affect how the text is converted.
  */
@@ -44,6 +46,8 @@ export declare function markdownToSafeHtml(markdown: string, options?: MarkdownT
  * caller's responsibility to sanitize the resulting HTML prior to inserting it
  * into the DOM. You must do this even if `escapeHtml` is set to true.
  *
+ * @deprecated Use the `Markdown` component to add markdown safely without
+ *   parsing raw HTML strings.
  * @param markdown The markdown text to convert.
  * @param options Options that affect how the text is converted.
  */

package/utils/markdown.js

@@ -33,6 +33,8 @@ class CustomRenderer extends marked.Renderer {
  * Converts markdown text into HTML. The resulting HTML is sanitized and safe to
  * insert into the DOM.
  *
+ * @deprecated Use the `Markdown` component to add markdown safely without
+ *   parsing raw HTML strings.
  * @param markdown The markdown text to convert.
  * @param options Options that affect how the text is converted.
  */
@@ -46,6 +48,8 @@ export function markdownToSafeHtml(markdown, options) {
  * caller's responsibility to sanitize the resulting HTML prior to inserting it
  * into the DOM. You must do this even if `escapeHtml` is set to true.
  *
+ * @deprecated Use the `Markdown` component to add markdown safely without
+ *   parsing raw HTML strings.
  * @param markdown The markdown text to convert.
  * @param options Options that affect how the text is converted.
  */