@buildcanada/charts 0.3.7 → 0.3.8

package/dist/grapher/comparisonLine/VerticalComparisonLine.d.ts

@@ -0,0 +1,35 @@
+import * as React from "react";
+import { ComparisonLineProps } from "./ComparisonLine.js";
+import { VerticalComparisonLineConfig } from "../../types/index.js";
+export declare class VerticalComparisonLine extends React.Component<ComparisonLineProps<VerticalComparisonLineConfig>> {
+    constructor(props: ComparisonLineProps<VerticalComparisonLineConfig>);
+    private get fontSize();
+    private get labelHeight();
+    private get lineConfig();
+    private get otherVerticalComparisonLines();
+    /** Nearest comparison line to the left of this line */
+    private get closestLeftLine();
+    /** Nearest comparison line to the right of this line */
+    private get closestRightLine();
+    /**
+     * X-coordinate of the leftmost boundary for label placement.
+     *
+     * Either the position of the nearest comparison line on the left
+     * or the chart's bound.
+     */
+    private get leftBoundX();
+    /**
+     * X-coordinate of the rightmost boundary for label placement.
+     *
+     * Either the position of the nearest comparison line on the right
+     * or the chart's bound.
+     */
+    private get rightBoundX();
+    /** Screen coordinates for rendering the vertical line */
+    private get lineCoordinates();
+    /** Calculated position and alignment for the label text */
+    private get labelPosition();
+    private renderLabel;
+    render(): React.ReactElement | null;
+}
+//# sourceMappingURL=VerticalComparisonLine.d.ts.map

package/dist/grapher/comparisonLine/VerticalComparisonLine.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VerticalComparisonLine.d.ts","sourceRoot":"","sources":["../../../src/grapher/comparisonLine/VerticalComparisonLine.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAc9B,OAAO,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAA;AACzD,OAAO,EAAE,4BAA4B,EAAE,MAAM,sBAAsB,CAAA;AAGnE,qBACa,sBAAuB,SAAQ,KAAK,CAAC,SAAS,CACvD,mBAAmB,CAAC,4BAA4B,CAAC,CACpD;gBACe,KAAK,EAAE,mBAAmB,CAAC,4BAA4B,CAAC;IAK1D,OAAO,KAAK,QAAQ,GAE7B;IAES,OAAO,KAAK,WAAW,GAGhC;IAES,OAAO,KAAK,UAAU,GAE/B;IAGD,OAAO,KAAK,4BAA4B,GAMvC;IAED,uDAAuD;IAC7C,OAAO,KAAK,eAAe,GAOpC;IAED,wDAAwD;IAC9C,OAAO,KAAK,gBAAgB,GAOrC;IAED;;;;;OAKG;IACO,OAAO,KAAK,UAAU,GAU/B;IAED;;;;;OAKG;IACO,OAAO,KAAK,WAAW,GAUhC;IAED,yDAAyD;IAC/C,OAAO,KAAK,eAAe,GAmBpC;IAED,2DAA2D;IACjD,OAAO,KAAK,aAAa,GAmClC;IAED,OAAO,CAAC,WAAW;IAmBV,MAAM,IAAI,KAAK,CAAC,YAAY,GAAG,IAAI;CAuB/C"}

package/dist/grapher/comparisonLine/VerticalComparisonLine.js

@@ -0,0 +1,181 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+import * as React from "react";
+import { computed, makeObservable } from "mobx";
+import { observer } from "mobx-react";
+import * as _ from "lodash-es";
+import {
+  Bounds,
+  dyFromAlign,
+  makeIdForHumanConsumption,
+  VerticalAlign
+} from "../../utils/index.js";
+import {
+  COMPARISON_LINE_STYLE,
+  COMPARISON_LINE_LABEL_STYLE
+} from "./ComparisonLineConstants.js";
+import { isValidVerticalComparisonLineConfig } from "./ComparisonLineHelpers.js";
+let VerticalComparisonLine = class extends React.Component {
+  constructor(props) {
+    super(props);
+    makeObservable(this);
+  }
+  get fontSize() {
+    return this.props.dualAxis.comparisonLineLabelFontSize;
+  }
+  get labelHeight() {
+    return this.fontSize;
+  }
+  get lineConfig() {
+    return this.props.comparisonLine;
+  }
+  get otherVerticalComparisonLines() {
+    return this.props.dualAxis.comparisonLines.filter(
+      (lineConfig) => isValidVerticalComparisonLineConfig(lineConfig) && lineConfig.xEquals !== this.props.comparisonLine.xEquals
+    );
+  }
+  get closestLeftLine() {
+    const linesOnTheLeft = this.otherVerticalComparisonLines.filter(
+      (otherLine) => otherLine.xEquals < this.lineConfig.xEquals
+    );
+    return _.maxBy(linesOnTheLeft, (line) => line.xEquals);
+  }
+  get closestRightLine() {
+    const linesOnTheRight = this.otherVerticalComparisonLines.filter(
+      (otherLine) => otherLine.xEquals > this.lineConfig.xEquals
+    );
+    return _.minBy(linesOnTheRight, (line) => line.xEquals);
+  }
+  get leftBoundX() {
+    const { closestLeftLine } = this;
+    const { innerBounds, horizontalAxis } = this.props.dualAxis;
+    if (!closestLeftLine) return innerBounds.left;
+    return Math.max(
+      horizontalAxis.place(closestLeftLine.xEquals),
+      innerBounds.left
+    );
+  }
+  get rightBoundX() {
+    const { closestRightLine } = this;
+    const { innerBounds, horizontalAxis } = this.props.dualAxis;
+    if (!closestRightLine) return innerBounds.right;
+    return Math.min(
+      horizontalAxis.place(closestRightLine.xEquals),
+      innerBounds.right
+    );
+  }
+  get lineCoordinates() {
+    const { dualAxis } = this.props;
+    const { horizontalAxis, innerBounds } = dualAxis;
+    const xValue = this.lineConfig.xEquals;
+    const [minX, maxX] = horizontalAxis.domain;
+    const isWithinBounds = xValue >= minX && xValue <= maxX;
+    if (!isWithinBounds) return void 0;
+    return {
+      x: horizontalAxis.place(xValue),
+      // The line extends outside of the chart area, so that the label
+      // isn't covered by any chart elements
+      y1: innerBounds.top - this.labelHeight,
+      y2: innerBounds.bottom
+    };
+  }
+  get labelPosition() {
+    const { fontSize, lineCoordinates, rightBoundX, leftBoundX } = this;
+    const { label } = this.lineConfig;
+    if (!label || !lineCoordinates) return void 0;
+    const { x, y1: y } = lineCoordinates;
+    const padding = 4;
+    const availableSpaceRight = rightBoundX - x - 2 * padding;
+    const availableSpaceLeft = x - leftBoundX - 2 * padding;
+    const labelWidth = Bounds.forText(label, { fontSize }).width;
+    const side = labelWidth <= availableSpaceRight ? "right" : labelWidth <= availableSpaceLeft ? "left" : null;
+    if (side === null) return void 0;
+    const labelX = side === "right" ? x + padding : x - padding;
+    const anchor = side === "right" ? "start" : "end";
+    return { x: labelX, y, anchor };
+  }
+  renderLabel() {
+    if (!this.labelPosition) return null;
+    const { x, y, anchor } = this.labelPosition;
+    return /* @__PURE__ */ React.createElement(
+      "text",
+      {
+        ...COMPARISON_LINE_LABEL_STYLE,
+        x,
+        y,
+        fontSize: this.fontSize,
+        dy: dyFromAlign(VerticalAlign.bottom),
+        textAnchor: anchor
+      },
+      this.lineConfig.label
+    );
+  }
+  render() {
+    if (!this.lineCoordinates || !this.labelPosition) return null;
+    const { x, y1, y2 } = this.lineCoordinates;
+    return /* @__PURE__ */ React.createElement(
+      "g",
+      {
+        id: makeIdForHumanConsumption(
+          "comparison-line",
+          this.lineConfig.label
+        )
+      },
+      /* @__PURE__ */ React.createElement(
+        "line",
+        {
+          x1: x,
+          y1,
+          x2: x,
+          y2,
+          style: COMPARISON_LINE_STYLE
+        }
+      ),
+      this.renderLabel()
+    );
+  }
+};
+__decorateClass([
+  computed
+], VerticalComparisonLine.prototype, "fontSize", 1);
+__decorateClass([
+  computed
+], VerticalComparisonLine.prototype, "labelHeight", 1);
+__decorateClass([
+  computed
+], VerticalComparisonLine.prototype, "lineConfig", 1);
+__decorateClass([
+  computed
+], VerticalComparisonLine.prototype, "otherVerticalComparisonLines", 1);
+__decorateClass([
+  computed
+], VerticalComparisonLine.prototype, "closestLeftLine", 1);
+__decorateClass([
+  computed
+], VerticalComparisonLine.prototype, "closestRightLine", 1);
+__decorateClass([
+  computed
+], VerticalComparisonLine.prototype, "leftBoundX", 1);
+__decorateClass([
+  computed
+], VerticalComparisonLine.prototype, "rightBoundX", 1);
+__decorateClass([
+  computed
+], VerticalComparisonLine.prototype, "lineCoordinates", 1);
+__decorateClass([
+  computed
+], VerticalComparisonLine.prototype, "labelPosition", 1);
+VerticalComparisonLine = __decorateClass([
+  observer
+], VerticalComparisonLine);
+export {
+  VerticalComparisonLine
+};

package/dist/grapher/comparisonLine/VerticalComparisonLine.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["src/grapher/comparisonLine/VerticalComparisonLine.tsx"],
+  "sourcesContent": ["import * as React from \"react\"\nimport { computed, makeObservable } from \"mobx\"\nimport { observer } from \"mobx-react\"\nimport * as _ from \"lodash-es\"\nimport {\n    Bounds,\n    dyFromAlign,\n    makeIdForHumanConsumption,\n    VerticalAlign,\n} from \"../../utils/index.js\"\nimport {\n    COMPARISON_LINE_STYLE,\n    COMPARISON_LINE_LABEL_STYLE,\n} from \"./ComparisonLineConstants.js\"\nimport { ComparisonLineProps } from \"./ComparisonLine.js\"\nimport { VerticalComparisonLineConfig } from \"../../types/index.js\"\nimport { isValidVerticalComparisonLineConfig } from \"./ComparisonLineHelpers.js\"\n\n@observer\nexport class VerticalComparisonLine extends React.Component<\n    ComparisonLineProps<VerticalComparisonLineConfig>\n> {\n    constructor(props: ComparisonLineProps<VerticalComparisonLineConfig>) {\n        super(props)\n        makeObservable(this)\n    }\n\n    @computed private get fontSize(): number {\n        return this.props.dualAxis.comparisonLineLabelFontSize\n    }\n\n    @computed private get labelHeight(): number {\n        // Since the label isn't wrapped, its height equals the font size\n        return this.fontSize\n    }\n\n    @computed private get lineConfig(): VerticalComparisonLineConfig {\n        return this.props.comparisonLine\n    }\n\n    @computed\n    private get otherVerticalComparisonLines(): VerticalComparisonLineConfig[] {\n        return this.props.dualAxis.comparisonLines.filter(\n            (lineConfig): lineConfig is VerticalComparisonLineConfig =>\n                isValidVerticalComparisonLineConfig(lineConfig) &&\n                lineConfig.xEquals !== this.props.comparisonLine.xEquals\n        )\n    }\n\n    /** Nearest comparison line to the left of this line */\n    @computed private get closestLeftLine():\n        | VerticalComparisonLineConfig\n        | undefined {\n        const linesOnTheLeft = this.otherVerticalComparisonLines.filter(\n            (otherLine) => otherLine.xEquals < this.lineConfig.xEquals\n        )\n        return _.maxBy(linesOnTheLeft, (line) => line.xEquals)\n    }\n\n    /** Nearest comparison line to the right of this line */\n    @computed private get closestRightLine():\n        | VerticalComparisonLineConfig\n        | undefined {\n        const linesOnTheRight = this.otherVerticalComparisonLines.filter(\n            (otherLine) => otherLine.xEquals > this.lineConfig.xEquals\n        )\n        return _.minBy(linesOnTheRight, (line) => line.xEquals)\n    }\n\n    /**\n     * X-coordinate of the leftmost boundary for label placement.\n     *\n     * Either the position of the nearest comparison line on the left\n     * or the chart's bound.\n     */\n    @computed private get leftBoundX(): number {\n        const { closestLeftLine } = this\n        const { innerBounds, horizontalAxis } = this.props.dualAxis\n\n        if (!closestLeftLine) return innerBounds.left\n\n        return Math.max(\n            horizontalAxis.place(closestLeftLine.xEquals),\n            innerBounds.left\n        )\n    }\n\n    /**\n     * X-coordinate of the rightmost boundary for label placement.\n     *\n     * Either the position of the nearest comparison line on the right\n     * or the chart's bound.\n     */\n    @computed private get rightBoundX(): number {\n        const { closestRightLine } = this\n        const { innerBounds, horizontalAxis } = this.props.dualAxis\n\n        if (!closestRightLine) return innerBounds.right\n\n        return Math.min(\n            horizontalAxis.place(closestRightLine.xEquals),\n            innerBounds.right\n        )\n    }\n\n    /** Screen coordinates for rendering the vertical line */\n    @computed private get lineCoordinates():\n        | { x: number; y1: number; y2: number }\n        | undefined {\n        const { dualAxis } = this.props\n        const { horizontalAxis, innerBounds } = dualAxis\n        const xValue = this.lineConfig.xEquals\n        const [minX, maxX] = horizontalAxis.domain\n\n        // Only render if the line is within the chart bounds\n        const isWithinBounds = xValue >= minX && xValue <= maxX\n        if (!isWithinBounds) return undefined\n\n        return {\n            x: horizontalAxis.place(xValue),\n            // The line extends outside of the chart area, so that the label\n            // isn't covered by any chart elements\n            y1: innerBounds.top - this.labelHeight,\n            y2: innerBounds.bottom,\n        }\n    }\n\n    /** Calculated position and alignment for the label text */\n    @computed private get labelPosition():\n        | { x: number; y: number; anchor: \"start\" | \"end\" }\n        | undefined {\n        const { fontSize, lineCoordinates, rightBoundX, leftBoundX } = this\n        const { label } = this.lineConfig\n\n        if (!label || !lineCoordinates) return undefined\n\n        const { x, y1: y } = lineCoordinates\n\n        // Calculate available space on both sides\n        const padding = 4 // padding between label and line\n        const availableSpaceRight = rightBoundX - x - 2 * padding\n        const availableSpaceLeft = x - leftBoundX - 2 * padding\n\n        // Determine label placement:\n        // - Prefer the right side if there's enough space\n        // - Otherwise, try placing the label on the left side\n        // - If neither side has enough space, hide the label\n        const labelWidth = Bounds.forText(label, { fontSize }).width\n        const side =\n            labelWidth <= availableSpaceRight\n                ? \"right\"\n                : labelWidth <= availableSpaceLeft\n                  ? \"left\"\n                  : null\n\n        // Can't fit the label\n        if (side === null) return undefined\n\n        // Add a bit of padding between label and line and determine text anchor\n        const labelX = side === \"right\" ? x + padding : x - padding\n        const anchor = side === \"right\" ? \"start\" : \"end\"\n\n        return { x: labelX, y, anchor }\n    }\n\n    private renderLabel(): React.ReactElement | null {\n        if (!this.labelPosition) return null\n\n        const { x, y, anchor } = this.labelPosition\n\n        return (\n            <text\n                {...COMPARISON_LINE_LABEL_STYLE}\n                x={x}\n                y={y}\n                fontSize={this.fontSize}\n                dy={dyFromAlign(VerticalAlign.bottom)}\n                textAnchor={anchor}\n            >\n                {this.lineConfig.label}\n            </text>\n        )\n    }\n\n    override render(): React.ReactElement | null {\n        if (!this.lineCoordinates || !this.labelPosition) return null\n\n        const { x, y1, y2 } = this.lineCoordinates\n\n        return (\n            <g\n                id={makeIdForHumanConsumption(\n                    \"comparison-line\",\n                    this.lineConfig.label\n                )}\n            >\n                <line\n                    x1={x}\n                    y1={y1}\n                    x2={x}\n                    y2={y2}\n                    style={COMPARISON_LINE_STYLE}\n                />\n                {this.renderLabel()}\n            </g>\n        )\n    }\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/grapher/controls/ActionButtons.d.ts

@@ -0,0 +1,53 @@
+import * as React from "react";
+import { IconDefinition } from "@fortawesome/free-solid-svg-icons";
+import { ShareMenuManager } from "./ShareMenu.js";
+import { GrapherModal } from "../core/GrapherConstants.js";
+import { DownloadModalTabName } from "../modal/DownloadModal.js";
+export interface ActionButtonsManager extends ShareMenuManager {
+    isAdmin?: boolean;
+    isShareMenuActive?: boolean;
+    hideShareButton?: boolean;
+    hideExploreTheDataButton?: boolean;
+    isInIFrame?: boolean;
+    canonicalUrl?: string;
+    isInFullScreenMode?: boolean;
+    activeModal?: GrapherModal;
+    activeDownloadModalTab?: DownloadModalTabName;
+    isOnTableTab?: boolean;
+    hideFullScreenButton?: boolean;
+}
+interface ActionButtonsProps {
+    manager: ActionButtonsManager;
+}
+export declare class ActionButtons extends React.Component<ActionButtonsProps> {
+    constructor(props: ActionButtonsProps);
+    private get manager();
+    get height(): number;
+    private get fullScreenButtonLabel();
+    toggleShareMenu(): void;
+    toggleFullScreenMode(): void;
+    openDownloadModal(): void;
+    private get hasDownloadButton();
+    private get hasDonateButton();
+    private get hasShareButton();
+    private get hasFullScreenButton();
+    private get hasExploreTheDataButton();
+    private renderShareMenu;
+    render(): React.ReactElement;
+}
+export declare function ActionButton(props: {
+    label: string;
+    icon: IconDefinition;
+    iconPlacement?: "left" | "right";
+    href?: string;
+    width?: number;
+    dataTrackNote?: string;
+    onClick?: React.MouseEventHandler<HTMLDivElement>;
+    onMouseDown?: React.MouseEventHandler<HTMLDivElement>;
+    showLabel?: boolean;
+    isActive?: boolean;
+    style?: React.CSSProperties;
+    className?: string;
+}): React.ReactElement;
+export {};
+//# sourceMappingURL=ActionButtons.d.ts.map

package/dist/grapher/controls/ActionButtons.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ActionButtons.d.ts","sourceRoot":"","sources":["../../../src/grapher/controls/ActionButtons.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,OAAO,EAMH,cAAc,EAEjB,MAAM,mCAAmC,CAAA;AAC1C,OAAO,EAEH,gBAAgB,EAGnB,MAAM,gBAAgB,CAAA;AAGvB,OAAO,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAA;AAC1D,OAAO,EAAE,oBAAoB,EAAE,MAAM,2BAA2B,CAAA;AAEhE,MAAM,WAAW,oBAAqB,SAAQ,gBAAgB;IAC1D,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,wBAAwB,CAAC,EAAE,OAAO,CAAA;IAClC,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,kBAAkB,CAAC,EAAE,OAAO,CAAA;IAC5B,WAAW,CAAC,EAAE,YAAY,CAAA;IAC1B,sBAAsB,CAAC,EAAE,oBAAoB,CAAA;IAC7C,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,oBAAoB,CAAC,EAAE,OAAO,CAAA;CACjC;AAKD,UAAU,kBAAkB;IACxB,OAAO,EAAE,oBAAoB,CAAA;CAChC;AAED,qBACa,aAAc,SAAQ,KAAK,CAAC,SAAS,CAAC,kBAAkB,CAAC;gBACtD,KAAK,EAAE,kBAAkB;IAK3B,OAAO,KAAK,OAAO,GAE5B;IAED,IAAc,MAAM,IAAI,MAAM,CAE7B;IAES,OAAO,KAAK,qBAAqB,GAG1C;IAEa,eAAe,IAAI,IAAI;IAQvB,oBAAoB,IAAI,IAAI;IAI5B,iBAAiB,IAAI,IAAI;IAW7B,OAAO,KAAK,iBAAiB,GAEtC;IAES,OAAO,KAAK,eAAe,GAEpC;IAES,OAAO,KAAK,cAAc,GAInC;IAES,OAAO,KAAK,mBAAmB,GAExC;IAES,OAAO,KAAK,uBAAuB,GAG5C;IAED,OAAO,CAAC,eAAe;IAUd,MAAM,IAAI,KAAK,CAAC,YAAY;CAiFxC;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE;IAChC,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,cAAc,CAAA;IACpB,aAAa,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;IAChC,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,cAAc,CAAC,CAAA;IACjD,WAAW,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,cAAc,CAAC,CAAA;IACrD,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAA;CACrB,GAAG,KAAK,CAAC,YAAY,CAwDrB"}

package/dist/grapher/controls/ActionButtons.js

@@ -0,0 +1,242 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+import * as React from "react";
+import { computed, action, makeObservable } from "mobx";
+import { observer } from "mobx-react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import {
+  faShareNodes,
+  faExpand,
+  faCompress,
+  faDownload,
+  faArrowRight,
+  faHeart
+} from "@fortawesome/free-solid-svg-icons";
+import {
+  ShareMenu,
+  shareUsingShareApi,
+  shouldShareUsingShareApi
+} from "./ShareMenu.js";
+import { Tippy } from "../../utils/index.js";
+import classNames from "classnames";
+import { GrapherModal } from "../core/GrapherConstants.js";
+import { DownloadModalTabName } from "../modal/DownloadModal.js";
+const BUTTON_HEIGHT = 32;
+let ActionButtons = class extends React.Component {
+  constructor(props) {
+    super(props);
+    makeObservable(this);
+  }
+  get manager() {
+    return this.props.manager;
+  }
+  get height() {
+    return BUTTON_HEIGHT;
+  }
+  get fullScreenButtonLabel() {
+    const { isInFullScreenMode } = this.manager;
+    return isInFullScreenMode ? "Exit full-screen" : "Enter full-screen";
+  }
+  toggleShareMenu() {
+    if (shouldShareUsingShareApi(this.manager)) {
+      void shareUsingShareApi(this.manager);
+      return;
+    }
+    this.manager.isShareMenuActive = !this.manager.isShareMenuActive;
+  }
+  toggleFullScreenMode() {
+    this.manager.isInFullScreenMode = !this.manager.isInFullScreenMode;
+  }
+  openDownloadModal() {
+    this.manager.activeModal = GrapherModal.Download;
+    if (this.manager.isOnTableTab) {
+      this.manager.activeDownloadModalTab = DownloadModalTabName.Data;
+    } else {
+      this.manager.activeDownloadModalTab = DownloadModalTabName.Vis;
+    }
+  }
+  get hasDownloadButton() {
+    return true;
+  }
+  get hasDonateButton() {
+    return !!this.manager.isInIFrame && !this.manager.isAdmin;
+  }
+  get hasShareButton() {
+    return !this.manager.hideShareButton && ShareMenu.shouldShow(this.manager);
+  }
+  get hasFullScreenButton() {
+    return !this.manager.hideFullScreenButton && !this.manager.isInIFrame;
+  }
+  get hasExploreTheDataButton() {
+    const { manager } = this;
+    return !manager.hideExploreTheDataButton || !!manager.isInIFrame;
+  }
+  renderShareMenu() {
+    return /* @__PURE__ */ React.createElement(
+      ShareMenu,
+      {
+        manager: this.manager,
+        onDismiss: this.toggleShareMenu,
+        right: 0
+      }
+    );
+  }
+  render() {
+    const { manager } = this;
+    const { isShareMenuActive } = manager;
+    return /* @__PURE__ */ React.createElement("div", { className: "ActionButtons" }, /* @__PURE__ */ React.createElement("ul", null, this.hasDownloadButton && /* @__PURE__ */ React.createElement("li", null, /* @__PURE__ */ React.createElement(
+      ActionButton,
+      {
+        label: "Download",
+        dataTrackNote: "chart_click_download",
+        showLabel: true,
+        icon: faDownload,
+        onClick: action((e) => {
+          this.openDownloadModal();
+          e.stopPropagation();
+        })
+      }
+    )), this.hasShareButton && /* @__PURE__ */ React.createElement("li", null, /* @__PURE__ */ React.createElement(
+      ActionButton,
+      {
+        label: "Share",
+        dataTrackNote: "chart_click_share",
+        showLabel: true,
+        icon: faShareNodes,
+        onClick: action((e) => {
+          this.toggleShareMenu();
+          e.stopPropagation();
+        }),
+        isActive: this.manager.isShareMenuActive
+      }
+    ), isShareMenuActive && this.renderShareMenu()), this.hasFullScreenButton && /* @__PURE__ */ React.createElement("li", null, /* @__PURE__ */ React.createElement(
+      ActionButton,
+      {
+        label: this.fullScreenButtonLabel,
+        dataTrackNote: "chart_click_fullscreen",
+        showLabel: true,
+        icon: manager.isInFullScreenMode ? faCompress : faExpand,
+        onClick: this.toggleFullScreenMode
+      }
+    )), this.hasDonateButton && /* @__PURE__ */ React.createElement("li", null, /* @__PURE__ */ React.createElement(
+      ActionButton,
+      {
+        className: "ActionButton--donate",
+        label: "Donate",
+        dataTrackNote: "chart_click_donate",
+        showLabel: true,
+        icon: faHeart,
+        href: "https://ourworldindata.org/donate"
+      }
+    )), this.hasExploreTheDataButton && /* @__PURE__ */ React.createElement("li", null, /* @__PURE__ */ React.createElement(
+      ActionButton,
+      {
+        label: "Explore the data",
+        dataTrackNote: "chart_click_exploredata",
+        icon: faArrowRight,
+        iconPlacement: "right",
+        href: manager.canonicalUrl,
+        className: "ActionButton--exploreData",
+        showLabel: true
+      }
+    ))));
+  }
+};
+__decorateClass([
+  computed
+], ActionButtons.prototype, "manager", 1);
+__decorateClass([
+  computed
+], ActionButtons.prototype, "height", 1);
+__decorateClass([
+  computed
+], ActionButtons.prototype, "fullScreenButtonLabel", 1);
+__decorateClass([
+  action.bound
+], ActionButtons.prototype, "toggleShareMenu", 1);
+__decorateClass([
+  action.bound
+], ActionButtons.prototype, "toggleFullScreenMode", 1);
+__decorateClass([
+  action.bound
+], ActionButtons.prototype, "openDownloadModal", 1);
+__decorateClass([
+  computed
+], ActionButtons.prototype, "hasDownloadButton", 1);
+__decorateClass([
+  computed
+], ActionButtons.prototype, "hasDonateButton", 1);
+__decorateClass([
+  computed
+], ActionButtons.prototype, "hasShareButton", 1);
+__decorateClass([
+  computed
+], ActionButtons.prototype, "hasFullScreenButton", 1);
+__decorateClass([
+  computed
+], ActionButtons.prototype, "hasExploreTheDataButton", 1);
+ActionButtons = __decorateClass([
+  observer
+], ActionButtons);
+function ActionButton(props) {
+  const buttonClassnames = classNames({
+    active: props.isActive,
+    "icon-only": !props.showLabel
+  });
+  const iconPlacement = props.iconPlacement ?? "left";
+  const buttonContents = /* @__PURE__ */ React.createElement(React.Fragment, null, iconPlacement === "left" && /* @__PURE__ */ React.createElement(FontAwesomeIcon, { icon: props.icon }), props.showLabel && /* @__PURE__ */ React.createElement("span", { className: "label" }, props.label), iconPlacement === "right" && /* @__PURE__ */ React.createElement(FontAwesomeIcon, { icon: props.icon }));
+  return /* @__PURE__ */ React.createElement(
+    Tippy,
+    {
+      content: props.label,
+      theme: "grapher-dark",
+      placement: "top",
+      arrow: false,
+      offset: [0, 4],
+      trigger: "mouseenter",
+      touch: false,
+      disabled: props.showLabel
+    },
+    /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        className: classNames("ActionButton", props.className),
+        style: props.style,
+        "data-track-note": props.dataTrackNote,
+        onClick: props.onClick,
+        onMouseDown: props.onMouseDown
+      },
+      props.href ? /* @__PURE__ */ React.createElement(
+        "a",
+        {
+          href: props.href,
+          className: buttonClassnames,
+          "aria-label": props.label,
+          target: "_blank",
+          rel: "noopener"
+        },
+        buttonContents
+      ) : /* @__PURE__ */ React.createElement(
+        "button",
+        {
+          className: buttonClassnames,
+          "aria-label": props.label,
+          type: "button"
+        },
+        buttonContents
+      )
+    )
+  );
+}
+export {
+  ActionButton,
+  ActionButtons
+};

package/dist/grapher/controls/ActionButtons.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["src/grapher/controls/ActionButtons.tsx"],
+  "sourcesContent": ["import * as React from \"react\"\nimport { computed, action, makeObservable } from \"mobx\"\nimport { observer } from \"mobx-react\"\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\"\nimport {\n    faShareNodes,\n    faExpand,\n    faCompress,\n    faDownload,\n    faArrowRight,\n    IconDefinition,\n    faHeart,\n} from \"@fortawesome/free-solid-svg-icons\"\nimport {\n    ShareMenu,\n    ShareMenuManager,\n    shareUsingShareApi,\n    shouldShareUsingShareApi,\n} from \"./ShareMenu.js\"\nimport { Tippy } from \"../../utils/index.js\"\nimport classNames from \"classnames\"\nimport { GrapherModal } from \"../core/GrapherConstants.js\"\nimport { DownloadModalTabName } from \"../modal/DownloadModal.js\"\n\nexport interface ActionButtonsManager extends ShareMenuManager {\n    isAdmin?: boolean\n    isShareMenuActive?: boolean\n    hideShareButton?: boolean\n    hideExploreTheDataButton?: boolean\n    isInIFrame?: boolean\n    canonicalUrl?: string\n    isInFullScreenMode?: boolean\n    activeModal?: GrapherModal\n    activeDownloadModalTab?: DownloadModalTabName\n    isOnTableTab?: boolean\n    hideFullScreenButton?: boolean\n}\n\n// keep in sync with sass variables in ActionButtons.scss\nconst BUTTON_HEIGHT = 32\n\ninterface ActionButtonsProps {\n    manager: ActionButtonsManager\n}\n\n@observer\nexport class ActionButtons extends React.Component<ActionButtonsProps> {\n    constructor(props: ActionButtonsProps) {\n        super(props)\n        makeObservable(this)\n    }\n\n    @computed private get manager(): ActionButtonsManager {\n        return this.props.manager\n    }\n\n    @computed get height(): number {\n        return BUTTON_HEIGHT\n    }\n\n    @computed private get fullScreenButtonLabel(): string {\n        const { isInFullScreenMode } = this.manager\n        return isInFullScreenMode ? \"Exit full-screen\" : \"Enter full-screen\"\n    }\n\n    @action.bound toggleShareMenu(): void {\n        if (shouldShareUsingShareApi(this.manager)) {\n            void shareUsingShareApi(this.manager)\n            return\n        }\n        this.manager.isShareMenuActive = !this.manager.isShareMenuActive\n    }\n\n    @action.bound toggleFullScreenMode(): void {\n        this.manager.isInFullScreenMode = !this.manager.isInFullScreenMode\n    }\n\n    @action.bound openDownloadModal(): void {\n        this.manager.activeModal = GrapherModal.Download\n\n        // Open the Data tab when opening from the table view, otherwise open the Vis tab\n        if (this.manager.isOnTableTab) {\n            this.manager.activeDownloadModalTab = DownloadModalTabName.Data\n        } else {\n            this.manager.activeDownloadModalTab = DownloadModalTabName.Vis\n        }\n    }\n\n    @computed private get hasDownloadButton(): boolean {\n        return true\n    }\n\n    @computed private get hasDonateButton(): boolean {\n        return !!this.manager.isInIFrame && !this.manager.isAdmin\n    }\n\n    @computed private get hasShareButton(): boolean {\n        return (\n            !this.manager.hideShareButton && ShareMenu.shouldShow(this.manager)\n        )\n    }\n\n    @computed private get hasFullScreenButton(): boolean {\n        return !this.manager.hideFullScreenButton && !this.manager.isInIFrame\n    }\n\n    @computed private get hasExploreTheDataButton(): boolean {\n        const { manager } = this\n        return !manager.hideExploreTheDataButton || !!manager.isInIFrame\n    }\n\n    private renderShareMenu(): React.ReactElement {\n        return (\n            <ShareMenu\n                manager={this.manager}\n                onDismiss={this.toggleShareMenu}\n                right={0}\n            />\n        )\n    }\n\n    override render(): React.ReactElement {\n        const { manager } = this\n        const { isShareMenuActive } = manager\n\n        return (\n            <div className=\"ActionButtons\">\n                <ul>\n                    {this.hasDownloadButton && (\n                        <li>\n                            <ActionButton\n                                label=\"Download\"\n                                dataTrackNote=\"chart_click_download\"\n                                showLabel={true}\n                                icon={faDownload}\n                                onClick={action((e): void => {\n                                    this.openDownloadModal()\n                                    e.stopPropagation()\n                                })}\n                            />\n                        </li>\n                    )}\n                    {this.hasShareButton && (\n                        <li>\n                            <ActionButton\n                                label=\"Share\"\n                                dataTrackNote=\"chart_click_share\"\n                                showLabel={true}\n                                icon={faShareNodes}\n                                onClick={action((e): void => {\n                                    this.toggleShareMenu()\n                                    e.stopPropagation()\n                                })}\n                                isActive={this.manager.isShareMenuActive}\n                            />\n                            {isShareMenuActive && this.renderShareMenu()}\n                        </li>\n                    )}\n                    {this.hasFullScreenButton && (\n                        <li>\n                            <ActionButton\n                                label={this.fullScreenButtonLabel}\n                                dataTrackNote=\"chart_click_fullscreen\"\n                                showLabel={true}\n                                icon={\n                                    manager.isInFullScreenMode\n                                        ? faCompress\n                                        : faExpand\n                                }\n                                onClick={this.toggleFullScreenMode}\n                            />\n                        </li>\n                    )}\n                    {this.hasDonateButton && (\n                        <li>\n                            <ActionButton\n                                className=\"ActionButton--donate\"\n                                label=\"Donate\"\n                                dataTrackNote=\"chart_click_donate\"\n                                showLabel={true}\n                                icon={faHeart}\n                                href=\"https://ourworldindata.org/donate\"\n                            />\n                        </li>\n                    )}\n                    {this.hasExploreTheDataButton && (\n                        <li>\n                            <ActionButton\n                                label=\"Explore the data\"\n                                dataTrackNote=\"chart_click_exploredata\"\n                                icon={faArrowRight}\n                                iconPlacement=\"right\"\n                                href={manager.canonicalUrl}\n                                className=\"ActionButton--exploreData\"\n                                showLabel={true}\n                            />\n                        </li>\n                    )}\n                </ul>\n            </div>\n        )\n    }\n}\n\nexport function ActionButton(props: {\n    label: string\n    icon: IconDefinition\n    iconPlacement?: \"left\" | \"right\"\n    href?: string\n    width?: number\n    dataTrackNote?: string\n    onClick?: React.MouseEventHandler<HTMLDivElement>\n    onMouseDown?: React.MouseEventHandler<HTMLDivElement>\n    showLabel?: boolean\n    isActive?: boolean\n    style?: React.CSSProperties\n    className?: string\n}): React.ReactElement {\n    const buttonClassnames = classNames({\n        active: props.isActive,\n        \"icon-only\": !props.showLabel,\n    })\n\n    const iconPlacement = props.iconPlacement ?? \"left\"\n\n    const buttonContents = (\n        <>\n            {iconPlacement === \"left\" && <FontAwesomeIcon icon={props.icon} />}\n            {props.showLabel && <span className=\"label\">{props.label}</span>}\n            {iconPlacement === \"right\" && <FontAwesomeIcon icon={props.icon} />}\n        </>\n    )\n\n    return (\n        <Tippy\n            content={props.label}\n            theme=\"grapher-dark\"\n            placement=\"top\"\n            arrow={false}\n            offset={[0, 4]}\n            trigger=\"mouseenter\"\n            touch={false}\n            disabled={props.showLabel}\n        >\n            <div\n                className={classNames(\"ActionButton\", props.className)}\n                style={props.style}\n                data-track-note={props.dataTrackNote}\n                onClick={props.onClick}\n                onMouseDown={props.onMouseDown}\n            >\n                {props.href ? (\n                    <a\n                        href={props.href}\n                        className={buttonClassnames}\n                        aria-label={props.label}\n                        target=\"_blank\"\n                        rel=\"noopener\"\n                    >\n                        {buttonContents}\n                    </a>\n                ) : (\n                    <button\n                        className={buttonClassnames}\n                        aria-label={props.label}\n                        type=\"button\"\n                    >\n                        {buttonContents}\n                    </button>\n                )}\n            </div>\n        </Tippy>\n    )\n}\n"],
+  "mappings": ";;;;;;;;;;AAAA,YAAY,WAAW;AACvB,SAAS,UAAU,QAAQ,sBAAsB;AACjD,SAAS,gBAAgB;AACzB,SAAS,uBAAuB;AAChC;AAAA,EACI;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EAEA;AAAA,OACG;AACP;AAAA,EACI;AAAA,EAEA;AAAA,EACA;AAAA,OACG;AACP,SAAS,aAAa;AACtB,OAAO,gBAAgB;AACvB,SAAS,oBAAoB;AAC7B,SAAS,4BAA4B;AAiBrC,MAAM,gBAAgB;AAOf,IAAM,gBAAN,cAA4B,MAAM,UAA8B;AAAA,EACnE,YAAY,OAA2B;AACnC,UAAM,KAAK;AACX,mBAAe,IAAI;AAAA,EACvB;AAAA,EAEU,IAAY,UAAgC;AAClD,WAAO,KAAK,MAAM;AAAA,EACtB;AAAA,EAEU,IAAI,SAAiB;AAC3B,WAAO;AAAA,EACX;AAAA,EAEU,IAAY,wBAAgC;AAClD,UAAM,EAAE,mBAAmB,IAAI,KAAK;AACpC,WAAO,qBAAqB,qBAAqB;AAAA,EACrD;AAAA,EAEc,kBAAwB;AAClC,QAAI,yBAAyB,KAAK,OAAO,GAAG;AACxC,WAAK,mBAAmB,KAAK,OAAO;AACpC;AAAA,IACJ;AACA,SAAK,QAAQ,oBAAoB,CAAC,KAAK,QAAQ;AAAA,EACnD;AAAA,EAEc,uBAA6B;AACvC,SAAK,QAAQ,qBAAqB,CAAC,KAAK,QAAQ;AAAA,EACpD;AAAA,EAEc,oBAA0B;AACpC,SAAK,QAAQ,cAAc,aAAa;AAGxC,QAAI,KAAK,QAAQ,cAAc;AAC3B,WAAK,QAAQ,yBAAyB,qBAAqB;AAAA,IAC/D,OAAO;AACH,WAAK,QAAQ,yBAAyB,qBAAqB;AAAA,IAC/D;AAAA,EACJ;AAAA,EAEU,IAAY,oBAA6B;AAC/C,WAAO;AAAA,EACX;AAAA,EAEU,IAAY,kBAA2B;AAC7C,WAAO,CAAC,CAAC,KAAK,QAAQ,cAAc,CAAC,KAAK,QAAQ;AAAA,EACtD;AAAA,EAEU,IAAY,iBAA0B;AAC5C,WACI,CAAC,KAAK,QAAQ,mBAAmB,UAAU,WAAW,KAAK,OAAO;AAAA,EAE1E;AAAA,EAEU,IAAY,sBAA+B;AACjD,WAAO,CAAC,KAAK,QAAQ,wBAAwB,CAAC,KAAK,QAAQ;AAAA,EAC/D;AAAA,EAEU,IAAY,0BAAmC;AACrD,UAAM,EAAE,QAAQ,IAAI;AACpB,WAAO,CAAC,QAAQ,4BAA4B,CAAC,CAAC,QAAQ;AAAA,EAC1D;AAAA,EAEQ,kBAAsC;AAC1C,WACI;AAAA,MAAC;AAAA;AAAA,QACG,SAAS,KAAK;AAAA,QACd,WAAW,KAAK;AAAA,QAChB,OAAO;AAAA;AAAA,IACX;AAAA,EAER;AAAA,EAES,SAA6B;AAClC,UAAM,EAAE,QAAQ,IAAI;AACpB,UAAM,EAAE,kBAAkB,IAAI;AAE9B,WACI,oCAAC,SAAI,WAAU,mBACX,oCAAC,YACI,KAAK,qBACF,oCAAC,YACG;AAAA,MAAC;AAAA;AAAA,QACG,OAAM;AAAA,QACN,eAAc;AAAA,QACd,WAAW;AAAA,QACX,MAAM;AAAA,QACN,SAAS,OAAO,CAAC,MAAY;AACzB,eAAK,kBAAkB;AACvB,YAAE,gBAAgB;AAAA,QACtB,CAAC;AAAA;AAAA,IACL,CACJ,GAEH,KAAK,kBACF,oCAAC,YACG;AAAA,MAAC;AAAA;AAAA,QACG,OAAM;AAAA,QACN,eAAc;AAAA,QACd,WAAW;AAAA,QACX,MAAM;AAAA,QACN,SAAS,OAAO,CAAC,MAAY;AACzB,eAAK,gBAAgB;AACrB,YAAE,gBAAgB;AAAA,QACtB,CAAC;AAAA,QACD,UAAU,KAAK,QAAQ;AAAA;AAAA,IAC3B,GACC,qBAAqB,KAAK,gBAAgB,CAC/C,GAEH,KAAK,uBACF,oCAAC,YACG;AAAA,MAAC;AAAA;AAAA,QACG,OAAO,KAAK;AAAA,QACZ,eAAc;AAAA,QACd,WAAW;AAAA,QACX,MACI,QAAQ,qBACF,aACA;AAAA,QAEV,SAAS,KAAK;AAAA;AAAA,IAClB,CACJ,GAEH,KAAK,mBACF,oCAAC,YACG;AAAA,MAAC;AAAA;AAAA,QACG,WAAU;AAAA,QACV,OAAM;AAAA,QACN,eAAc;AAAA,QACd,WAAW;AAAA,QACX,MAAM;AAAA,QACN,MAAK;AAAA;AAAA,IACT,CACJ,GAEH,KAAK,2BACF,oCAAC,YACG;AAAA,MAAC;AAAA;AAAA,QACG,OAAM;AAAA,QACN,eAAc;AAAA,QACd,MAAM;AAAA,QACN,eAAc;AAAA,QACd,MAAM,QAAQ;AAAA,QACd,WAAU;AAAA,QACV,WAAW;AAAA;AAAA,IACf,CACJ,CAER,CACJ;AAAA,EAER;AACJ;AAtJ0B;AAAA,EAArB;AAAA,GANQ,cAMa;AAIR;AAAA,EAAb;AAAA,GAVQ,cAUK;AAIQ;AAAA,EAArB;AAAA,GAdQ,cAca;AAKR;AAAA,EAAb,OAAO;AAAA,GAnBC,cAmBK;AAQA;AAAA,EAAb,OAAO;AAAA,GA3BC,cA2BK;AAIA;AAAA,EAAb,OAAO;AAAA,GA/BC,cA+BK;AAWQ;AAAA,EAArB;AAAA,GA1CQ,cA0Ca;AAIA;AAAA,EAArB;AAAA,GA9CQ,cA8Ca;AAIA;AAAA,EAArB;AAAA,GAlDQ,cAkDa;AAMA;AAAA,EAArB;AAAA,GAxDQ,cAwDa;AAIA;AAAA,EAArB;AAAA,GA5DQ,cA4Da;AA5Db,gBAAN;AAAA,EADN;AAAA,GACY;AA8JN,SAAS,aAAa,OAaN;AACnB,QAAM,mBAAmB,WAAW;AAAA,IAChC,QAAQ,MAAM;AAAA,IACd,aAAa,CAAC,MAAM;AAAA,EACxB,CAAC;AAED,QAAM,gBAAgB,MAAM,iBAAiB;AAE7C,QAAM,iBACF,0DACK,kBAAkB,UAAU,oCAAC,mBAAgB,MAAM,MAAM,MAAM,GAC/D,MAAM,aAAa,oCAAC,UAAK,WAAU,WAAS,MAAM,KAAM,GACxD,kBAAkB,WAAW,oCAAC,mBAAgB,MAAM,MAAM,MAAM,CACrE;AAGJ,SACI;AAAA,IAAC;AAAA;AAAA,MACG,SAAS,MAAM;AAAA,MACf,OAAM;AAAA,MACN,WAAU;AAAA,MACV,OAAO;AAAA,MACP,QAAQ,CAAC,GAAG,CAAC;AAAA,MACb,SAAQ;AAAA,MACR,OAAO;AAAA,MACP,UAAU,MAAM;AAAA;AAAA,IAEhB;AAAA,MAAC;AAAA;AAAA,QACG,WAAW,WAAW,gBAAgB,MAAM,SAAS;AAAA,QACrD,OAAO,MAAM;AAAA,QACb,mBAAiB,MAAM;AAAA,QACvB,SAAS,MAAM;AAAA,QACf,aAAa,MAAM;AAAA;AAAA,MAElB,MAAM,OACH;AAAA,QAAC;AAAA;AAAA,UACG,MAAM,MAAM;AAAA,UACZ,WAAW;AAAA,UACX,cAAY,MAAM;AAAA,UAClB,QAAO;AAAA,UACP,KAAI;AAAA;AAAA,QAEH;AAAA,MACL,IAEA;AAAA,QAAC;AAAA;AAAA,UACG,WAAW;AAAA,UACX,cAAY,MAAM;AAAA,UAClB,MAAK;AAAA;AAAA,QAEJ;AAAA,MACL;AAAA,IAER;AAAA,EACJ;AAER;",
+  "names": []
+}

package/dist/grapher/controls/CommandPalette.d.ts

@@ -0,0 +1,18 @@
+import * as React from "react";
+declare type keyboardCombo = string;
+export interface Command {
+    combo: keyboardCombo;
+    fn: () => void;
+    title?: string;
+    category?: string;
+}
+interface CommandPaletteProps {
+    commands: Command[];
+    display: "none" | "block";
+}
+export declare class CommandPalette extends React.Component<CommandPaletteProps> {
+    static togglePalette(): void;
+    render(): React.ReactElement;
+}
+export {};
+//# sourceMappingURL=CommandPalette.d.ts.map

package/dist/grapher/controls/CommandPalette.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CommandPalette.d.ts","sourceRoot":"","sources":["../../../src/grapher/controls/CommandPalette.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,MAAM,aAAa,GAAG,MAAM,CAAA;AAEnC,MAAM,WAAW,OAAO;IACpB,KAAK,EAAE,aAAa,CAAA;IACpB,EAAE,EAAE,MAAM,IAAI,CAAA;IACd,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,MAAM,CAAA;CACpB;AAID,UAAU,mBAAmB;IACzB,QAAQ,EAAE,OAAO,EAAE,CAAA;IACnB,OAAO,EAAE,MAAM,GAAG,OAAO,CAAA;CAC5B;AAED,qBACa,cAAe,SAAQ,KAAK,CAAC,SAAS,CAAC,mBAAmB,CAAC;IACpE,MAAM,CAAC,aAAa,IAAI,IAAI;IASnB,MAAM,IAAI,KAAK,CAAC,YAAY;CAwCxC"}

package/dist/grapher/controls/CommandPalette.js

@@ -0,0 +1,50 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+import * as _ from "lodash-es";
+import { BodyPortal } from "../../components/index.js";
+import { observer } from "mobx-react";
+import * as React from "react";
+const CommandPaletteClassName = "CommandPalette";
+let CommandPalette = class extends React.Component {
+  static togglePalette() {
+    const element = document.getElementsByClassName(
+      CommandPaletteClassName
+    )[0];
+    if (element)
+      element.style.display = element.style.display === "none" ? "block" : "none";
+  }
+  render() {
+    const style = {
+      display: this.props.display
+    };
+    let lastCat = "";
+    const commands = this.props.commands.filter(
+      (command) => command.title && command.category
+    );
+    const sortedCommands = _.sortBy(commands, "category").map(
+      (command, index) => {
+        let cat = void 0;
+        if (command.category !== lastCat) {
+          lastCat = command.category;
+          cat = /* @__PURE__ */ React.createElement("div", { className: "commandCategory" }, lastCat);
+        }
+        return /* @__PURE__ */ React.createElement("div", { key: `command${index}` }, cat, /* @__PURE__ */ React.createElement("div", { className: "commandOption" }, /* @__PURE__ */ React.createElement("span", { className: "commandCombo" }, command.combo), /* @__PURE__ */ React.createElement("a", { onClick: () => command.fn() }, command.title)));
+      }
+    );
+    return /* @__PURE__ */ React.createElement(BodyPortal, null, /* @__PURE__ */ React.createElement("div", { className: CommandPaletteClassName, style }, /* @__PURE__ */ React.createElement("div", { className: "paletteTitle" }, "Keyboard Shortcuts"), sortedCommands));
+  }
+};
+CommandPalette = __decorateClass([
+  observer
+], CommandPalette);
+export {
+  CommandPalette
+};