@vertigis/react-ui 9.2.1 → 9.3.1

package/Markdown/Markdown.d.ts

@@ -0,0 +1,39 @@
+import { FC } from "react";
+import { BoxProps } from "../Box";
+/**
+ * Properties for the `Markdown` component.
+ */
+export interface MarkdownProps extends BoxProps {
+    /**
+     * The markdown text to render.
+     */
+    markdown: string;
+    /**
+     * A caller-supplied sanitization function to ensure that the resulting HTML
+     * is safe to insert into the DOM. Required.
+     */
+    sanitize: (unsafeHtml: string) => string;
+    /**
+     * If specified, produces HTML that is valid for contexts where only inline
+     * content is allowed (e.g. inside `<h1>`>` or `<span>` tags). HTML tags for
+     * block-level elements will be removed, but any text content will be
+     * preserved.
+     */
+    inline?: boolean;
+    /**
+     * If true, any HTML in the markdown will be escaped rather than passed
+     * through directly to the output as normal (since Markdown is a superset of
+     * HTML). This is useful in situations where you wish to only support pure
+     * 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.
+     */
+    escapeHtml?: boolean;
+}
+/**
+ * A component that renders markdown as HTML.
+ */
+declare const Markdown: FC<MarkdownProps>;
+export default Markdown;

package/Markdown/Markdown.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+import Box from "../Box";
+import { markdownToHtml } from "../utils/markdown";
+/**
+ * A component that renders markdown as HTML.
+ */
+const Markdown = ({ markdown, inline, escapeHtml, sanitize, className, ...otherProps }) => {
+    return (_jsx(Box, Object.assign({ component: inline ? "span" : "div", className: clsx("GcxMarkdown", className), dangerouslySetInnerHTML: {
+            __html: sanitize(markdownToHtml(markdown, { inline, escapeHtml })),
+        } }, otherProps), void 0));
+};
+export default Markdown;

package/Markdown/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./Markdown";
+export { default } from "./Markdown";

package/Markdown/index.js

@@ -0,0 +1,2 @@
+export * from "./Markdown";
+export { default } from "./Markdown";

package/MenuItemSecondaryAction/MenuItemSecondaryAction.d.ts

@@ -0,0 +1,11 @@
+import { FC } from "react";
+import { ListItemSecondaryActionProps } from "../ListItemSecondaryAction";
+/**
+ * For use within a MenuList (or other list that implements arrow key
+ * navigation). The standard ListItemSecondaryAction will break keyboard
+ * navigation in this type of list.
+ *
+ * @param props The component properties.
+ */
+declare const MenuItemSecondaryAction: FC<ListItemSecondaryActionProps>;
+export default MenuItemSecondaryAction;

package/MenuItemSecondaryAction/MenuItemSecondaryAction.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useRef } from "react";
+import GcxListItemSecondaryAction from "../ListItemSecondaryAction";
+import { styled } from "../styles";
+const StyledListItemSecondaryAction = styled(GcxListItemSecondaryAction)({
+    display: "flex",
+    flexShrink: 0,
+});
+/**
+ * For use within a MenuList (or other list that implements arrow key
+ * navigation). The standard ListItemSecondaryAction will break keyboard
+ * navigation in this type of list.
+ *
+ * @param props The component properties.
+ */
+const MenuItemSecondaryAction = (props) => {
+    const ref = useRef(null);
+    const { className, ...otherProps } = props;
+    const onKeyDown = (event) => {
+        var _a, _b;
+        const { key } = event;
+        if (key === "ArrowUp" || key === "ArrowDown" || key === "Home" || key === "End") {
+            // Switch focus to the parent list item, then let the key event
+            // propagate to get the normal behavior of pressing these keys.
+            (_b = (_a = ref.current) === null || _a === void 0 ? void 0 : _a.parentElement) === null || _b === void 0 ? void 0 : _b.focus();
+        }
+        else if (key !== "Escape") {
+            // Prevent propagation to the primary action.
+            event.stopPropagation();
+        }
+    };
+    return (_jsx(StyledListItemSecondaryAction, Object.assign({ className: className, onClick: (event) => {
+            event.stopPropagation();
+        }, onKeyDown: onKeyDown, onMouseDown: (event) => {
+            // This will stop child ripples from propagating.
+            event.stopPropagation();
+        }, ref: ref }, otherProps), void 0));
+};
+export default MenuItemSecondaryAction;

package/MenuItemSecondaryAction/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./MenuItemSecondaryAction";
+export * from "./MenuItemSecondaryAction";

package/MenuItemSecondaryAction/index.js

@@ -0,0 +1,2 @@
+export { default } from "./MenuItemSecondaryAction";
+export * from "./MenuItemSecondaryAction";

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@vertigis/react-ui",
-    "version": "9.2.1",
+    "version": "9.3.1",
     "description": "Utilities and React components used in VertiGIS applications.",
     "keywords": [
         "vertigis",
@@ -22,6 +22,7 @@
         "@mui/material": "5.2.8",
         "clsx": "^1.1.1",
         "lodash": "^4.17.21",
+        "marked": "^4.0.12",
         "tslib": "^2.1.0"
     },
     "devDependencies": {
@@ -29,6 +30,7 @@
         "@testing-library/react": "^12.1.2",
         "@testing-library/user-event": "^13.5.0",
         "@types/lodash": "^4.14.168",
+        "@types/marked": "^4.0.2",
         "@types/react": "^17.0.34",
         "@types/react-dom": "^17.0.11",
         "react": "^17.0.2",

package/styles/createTheme.js

@@ -465,6 +465,31 @@ function getOverrides(theme) {
                 },
             },
             MuiListItem: {
+                styleOverrides: {
+                    root: {
+                        "&.MuiListItem-secondaryAction, &>.MuiListItemButton-root": {
+                            // Disable the right padding of 48px that MUI uses
+                            // to make room for secondary actions, since we use
+                            // flex for those rather than absolute positioning
+                            // (see MuiListItemSecondaryAction overrides). Note
+                            // that there are two distinct cases we need to
+                            // handle, depending on whether a
+                            // <ListItemSecondaryAction> element is used
+                            // explicitly, or whether the ListItem's
+                            // `secondaryAction` prop is used.
+                            paddingRight: spacing(1),
+                        },
+                    },
+                    container: {
+                        // A wrapper element with this class is added around a
+                        // list item when a <ListItemSecondaryAction> child is
+                        // present. Use flex to position the secondary actions
+                        // next to the list item content rather than absolute
+                        // positioning so that nothing overlaps.
+                        display: "flex",
+                        alignItems: "center",
+                    },
+                },
                 variants: [
                     {
                         // HACK: The button prop is deprecated in MUI 5 in favor
@@ -478,6 +503,18 @@ function getOverrides(theme) {
                     },
                 ],
             },
+            MuiListItemSecondaryAction: {
+                styleOverrides: {
+                    root: {
+                        // We use flex instead of absolute positioning so that
+                        // secondary buttons don't overlap the item text.
+                        position: "static",
+                        transform: "unset",
+                        flex: "0 0 auto",
+                        paddingRight: spacing(1),
+                    },
+                },
+            },
             MuiListItemText: {
                 styleOverrides: {
                     primary: {

package/utils/markdown.d.ts

@@ -0,0 +1,34 @@
+/**
+ * Options for the markdownToHtml() function.
+ */
+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`.
+     */
+    inline?: boolean;
+    /**
+     * If true, any HTML in the markdown will be escaped rather than passed
+     * through directly to the output (since Markdown is a superset of HTML).
+     * This is useful in situations where you wish to only support pure 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.
+     */
+    escapeHtml?: boolean;
+}
+/**
+ * Converts markdown text into HTML.
+ *
+ * NOTE: The resulting HTML is NOT sanitized by this function. It is the
+ * 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.
+ *
+ * @param markdown The markdown text to convert.
+ * @param options Options that affect how the text is converted.
+ */
+export declare function markdownToHtml(markdown: string | undefined, options?: MarkdownToHtmlOptions): string;

package/utils/markdown.js

@@ -0,0 +1,44 @@
+import escapeHtml from "lodash/escape";
+import { marked } from "marked";
+/**
+ * A custom marked renderer that escapes HTML in the original markdown.
+ */
+class EscapeHtmlRenderer extends marked.Renderer {
+    html(html) {
+        return escapeHtml(html);
+    }
+}
+EscapeHtmlRenderer.instance = new EscapeHtmlRenderer();
+/**
+ * Converts markdown text into HTML.
+ *
+ * NOTE: The resulting HTML is NOT sanitized by this function. It is the
+ * 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.
+ *
+ * @param markdown The markdown text to convert.
+ * @param options Options that affect how the text is converted.
+ */
+export function markdownToHtml(markdown, options) {
+    if (!markdown) {
+        return "";
+    }
+    const { inline, escapeHtml } = { inline: false, escapeHtml: false, ...options };
+    const markedOptions = {
+        ...(escapeHtml && {
+            renderer: EscapeHtmlRenderer.instance,
+        }),
+    };
+    const html = marked(markdown, markedOptions);
+    return inline ? stripBlockElements(html) : html;
+}
+/**
+ * Strips all HTML elements that are not suitable for placing within an inline
+ * HTML element.
+ *
+ * @param html The HTML to process.
+ */
+function stripBlockElements(html) {
+    // Derived from here: https://html.spec.whatwg.org/multipage/dom.html#phrasing-content
+    return html.replace(/(?:<(\/?))(?!(?:\/|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)\b)[^>]*>/gi, (match, s1) => (s1 === "/" ? " " : ""));
+}