@perses-dev/components 0.55.0-beta.1 → 0.55.0-beta.11

package/dist/ExemplarMetadata/ExemplarMetadataTooltip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExemplarMetadataTooltip.d.ts","sourceRoot":"","sources":["../../src/ExemplarMetadata/ExemplarMetadataTooltip.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAGzD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAK1C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAWpD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,oCAAoC,CAAC;AAE5E,MAAM,WAAW,4BAA4B;IAC3C,QAAQ,EAAE,QAAQ,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB;;OAEG;IACH,SAAS,EAAE,iBAAiB,GAAG,IAAI,CAAC;IACpC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;CAC3B;AAED;;;;GAIG;AACH,wBAAgB,uBAAuB,CAAC,EACtC,QAAQ,EACR,YAAY,EACZ,WAAW,EACX,MAAM,EACN,SAAS,EACT,aAAoB,EACpB,YAAY,GACb,EAAE,4BAA4B,GAAG,YAAY,GAAG,IAAI,CAwGpD"}

package/dist/ExemplarMetadata/ExemplarMetadataTooltip.js

@@ -0,0 +1,239 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Copyright The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+import { Box, Divider, IconButton, Portal, Stack, Typography } from "@mui/material";
+import Pin from "mdi-material-ui/Pin";
+import PinOutline from "mdi-material-ui/PinOutline";
+import { Fragment } from "react";
+import useResizeObserver from "use-resize-observer";
+import { useTimeZone } from "../context/TimeZoneProvider.js";
+import { formatValue } from "../model/units.js";
+import { assembleTransform, getTooltipStyles, PIN_TOOLTIP_HELP_TEXT, TOOLTIP_BG_COLOR_FALLBACK, TOOLTIP_MAX_WIDTH, UNPIN_TOOLTIP_HELP_TEXT, useMousePosition } from "../TimeSeriesTooltip/index.js";
+/**
+ * Tooltip showing an exemplar's metadata (series labels, exemplar labels, value and timestamp).
+ * Follows the mouse while hovering an exemplar marker and can be pinned in place, the same way
+ * the annotation tooltip works.
+ */ export function ExemplarMetadataTooltip({ exemplar, seriesLabels, containerId, format, pinnedPos, enablePinning = true, onUnpinClick }) {
+    const { formatWithUserTimeZone } = useTimeZone();
+    const mousePos = useMousePosition();
+    const { height, width, ref: tooltipRef } = useResizeObserver();
+    const isPinned = pinnedPos !== null;
+    if (!isPinned && mousePos === null) return null;
+    const containerElement = containerId ? document.querySelector(containerId) : undefined;
+    const maxHeight = containerElement ? containerElement.getBoundingClientRect().height : undefined;
+    // Fall back to the pinned position: a pinned tooltip can render before any mousemove happened.
+    const transform = assembleTransform(mousePos ?? pinnedPos, pinnedPos, height ?? 0, width ?? 0, containerElement);
+    const { labels, value, timestamp } = exemplar;
+    const formattedValue = formatValue(value, format);
+    const date = new Date(timestamp);
+    const formattedDate = formatWithUserTimeZone(date, 'MMM dd, yyyy - ');
+    const formattedTime = formatWithUserTimeZone(date, 'HH:mm:ss');
+    // Only sections with content take part in the layout, so no divider is left dangling
+    // when a label set is empty.
+    const sections = [];
+    if (seriesLabels && Object.keys(seriesLabels).length > 0) {
+        sections.push({
+            key: 'series-labels',
+            content: /*#__PURE__*/ _jsx(LabelGrid, {
+                title: "Series labels",
+                labels: seriesLabels
+            })
+        });
+    }
+    if (Object.keys(labels).length > 0) {
+        sections.push({
+            key: 'exemplar-labels',
+            content: /*#__PURE__*/ _jsx(LabelGrid, {
+                title: "Exemplar labels",
+                labels: labels
+            })
+        });
+    }
+    sections.push({
+        key: 'value',
+        content: /*#__PURE__*/ _jsxs(Box, {
+            children: [
+                /*#__PURE__*/ _jsx(Typography, {
+                    variant: "overline",
+                    component: "div",
+                    children: "Value"
+                }),
+                /*#__PURE__*/ _jsx(Typography, {
+                    fontWeight: 700,
+                    children: formattedValue
+                })
+            ]
+        })
+    });
+    return /*#__PURE__*/ _jsx(Portal, {
+        container: containerElement,
+        children: /*#__PURE__*/ _jsx(Box, {
+            ref: tooltipRef,
+            sx: (theme)=>getTooltipStyles(theme, pinnedPos, maxHeight),
+            style: {
+                transform
+            },
+            children: /*#__PURE__*/ _jsxs(Stack, {
+                spacing: 0.5,
+                children: [
+                    /*#__PURE__*/ _jsxs(Box, {
+                        sx: (theme)=>({
+                                width: '100%',
+                                maxWidth: TOOLTIP_MAX_WIDTH,
+                                padding: theme.spacing(1.5, 2, 0.5, 2),
+                                backgroundColor: theme.palette.designSystem?.grey[800] ?? TOOLTIP_BG_COLOR_FALLBACK,
+                                position: 'sticky',
+                                top: 0,
+                                left: 0
+                            }),
+                        children: [
+                            /*#__PURE__*/ _jsxs(Box, {
+                                sx: {
+                                    display: 'flex',
+                                    alignItems: 'center',
+                                    paddingBottom: 0.5,
+                                    width: '100%'
+                                },
+                                children: [
+                                    /*#__PURE__*/ _jsxs(Box, {
+                                        sx: {
+                                            flexGrow: 1,
+                                            minWidth: 0
+                                        },
+                                        children: [
+                                            /*#__PURE__*/ _jsx(Typography, {
+                                                variant: "caption",
+                                                sx: (theme)=>({
+                                                        color: theme.palette.common.white
+                                                    }),
+                                                children: formattedDate
+                                            }),
+                                            /*#__PURE__*/ _jsx(Typography, {
+                                                variant: "caption",
+                                                children: /*#__PURE__*/ _jsx("strong", {
+                                                    children: formattedTime
+                                                })
+                                            })
+                                        ]
+                                    }),
+                                    enablePinning && /*#__PURE__*/ _jsxs(Stack, {
+                                        direction: "row",
+                                        alignItems: "center",
+                                        sx: {
+                                            marginLeft: 1,
+                                            flexShrink: 0
+                                        },
+                                        children: [
+                                            /*#__PURE__*/ _jsx(Typography, {
+                                                sx: {
+                                                    marginRight: 0.5,
+                                                    fontSize: 11,
+                                                    verticalAlign: 'middle'
+                                                },
+                                                children: isPinned ? UNPIN_TOOLTIP_HELP_TEXT : PIN_TOOLTIP_HELP_TEXT
+                                            }),
+                                            isPinned ? /*#__PURE__*/ _jsx(IconButton, {
+                                                "aria-label": UNPIN_TOOLTIP_HELP_TEXT,
+                                                onClick: ()=>{
+                                                    if (onUnpinClick !== undefined) onUnpinClick();
+                                                },
+                                                sx: {
+                                                    padding: 0,
+                                                    color: 'inherit'
+                                                },
+                                                children: /*#__PURE__*/ _jsx(Pin, {
+                                                    sx: {
+                                                        fontSize: 16
+                                                    }
+                                                })
+                                            }) : /*#__PURE__*/ _jsx(PinOutline, {
+                                                sx: {
+                                                    fontSize: 16
+                                                }
+                                            })
+                                        ]
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ _jsx(Divider, {
+                                sx: (theme)=>({
+                                        width: '100%',
+                                        borderColor: theme.palette.grey['500']
+                                    })
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsx(Stack, {
+                        spacing: 1,
+                        sx: (theme)=>({
+                                padding: theme.spacing(0.5, 2, 1.5, 2)
+                            }),
+                        children: sections.map((section, index)=>/*#__PURE__*/ _jsxs(Fragment, {
+                                children: [
+                                    index > 0 && /*#__PURE__*/ _jsx(Divider, {
+                                        sx: (theme)=>({
+                                                borderColor: theme.palette.grey['500']
+                                            })
+                                    }),
+                                    section.content
+                                ]
+                            }, section.key))
+                    })
+                ]
+            })
+        })
+    });
+}
+function LabelGrid({ title, labels }) {
+    const entries = Object.entries(labels);
+    return /*#__PURE__*/ _jsxs(Box, {
+        children: [
+            /*#__PURE__*/ _jsx(Typography, {
+                variant: "overline",
+                component: "div",
+                children: title
+            }),
+            /*#__PURE__*/ _jsx(Box, {
+                sx: {
+                    display: 'grid',
+                    // The first column is sized by the longest label name, so all values line up
+                    // at the same horizontal position.
+                    gridTemplateColumns: 'minmax(0, max-content) minmax(0, 1fr)',
+                    columnGap: 0.5,
+                    rowGap: 0.25
+                },
+                children: entries.map(([labelName, labelValue])=>/*#__PURE__*/ _jsxs(Fragment, {
+                        children: [
+                            /*#__PURE__*/ _jsxs(Typography, {
+                                sx: {
+                                    wordBreak: 'break-all'
+                                },
+                                children: [
+                                    labelName,
+                                    ":"
+                                ]
+                            }),
+                            /*#__PURE__*/ _jsx(Typography, {
+                                fontWeight: 700,
+                                sx: {
+                                    wordBreak: 'break-all'
+                                },
+                                children: labelValue
+                            })
+                        ]
+                    }, labelName))
+            })
+        ]
+    });
+}
+
+//# sourceMappingURL=ExemplarMetadataTooltip.js.map

package/dist/ExemplarMetadata/ExemplarMetadataTooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/ExemplarMetadata/ExemplarMetadataTooltip.tsx"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Box, Divider, IconButton, Portal, Stack, Typography } from '@mui/material';\nimport type { Exemplar, Labels } from '@perses-dev/spec';\nimport Pin from 'mdi-material-ui/Pin';\nimport PinOutline from 'mdi-material-ui/PinOutline';\nimport type { ReactElement } from 'react';\nimport { Fragment } from 'react';\nimport useResizeObserver from 'use-resize-observer';\n\nimport { useTimeZone } from '../context/TimeZoneProvider';\nimport type { FormatOptions } from '../model/units';\nimport { formatValue } from '../model/units';\nimport {\n  assembleTransform,\n  getTooltipStyles,\n  PIN_TOOLTIP_HELP_TEXT,\n  TOOLTIP_BG_COLOR_FALLBACK,\n  TOOLTIP_MAX_WIDTH,\n  UNPIN_TOOLTIP_HELP_TEXT,\n  useMousePosition,\n} from '../TimeSeriesTooltip';\nimport type { CursorCoordinates } from '../TimeSeriesTooltip/tooltip-model';\n\nexport interface ExemplarMetadataTooltipProps {\n  exemplar: Exemplar;\n  seriesLabels?: Labels;\n  /**\n   * CSS selector of the element the tooltip should be portaled into (e.g. `#dashboard`).\n   * Passed as-is to `document.querySelector`, so it must be a selector and not a bare element id.\n   */\n  containerId?: string;\n  format?: FormatOptions;\n  /**\n   * Position where the tooltip has been pinned, or null when it follows the mouse.\n   */\n  pinnedPos: CursorCoordinates | null;\n  enablePinning?: boolean;\n  onUnpinClick?: () => void;\n}\n\n/**\n * Tooltip showing an exemplar's metadata (series labels, exemplar labels, value and timestamp).\n * Follows the mouse while hovering an exemplar marker and can be pinned in place, the same way\n * the annotation tooltip works.\n */\nexport function ExemplarMetadataTooltip({\n  exemplar,\n  seriesLabels,\n  containerId,\n  format,\n  pinnedPos,\n  enablePinning = true,\n  onUnpinClick,\n}: ExemplarMetadataTooltipProps): ReactElement | null {\n  const { formatWithUserTimeZone } = useTimeZone();\n  const mousePos = useMousePosition();\n  const { height, width, ref: tooltipRef } = useResizeObserver<HTMLDivElement>();\n\n  const isPinned = pinnedPos !== null;\n  if (!isPinned && mousePos === null) return null;\n\n  const containerElement = containerId ? document.querySelector(containerId) : undefined;\n  const maxHeight = containerElement ? containerElement.getBoundingClientRect().height : undefined;\n  // Fall back to the pinned position: a pinned tooltip can render before any mousemove happened.\n  const transform = assembleTransform(mousePos ?? pinnedPos, pinnedPos, height ?? 0, width ?? 0, containerElement);\n\n  const { labels, value, timestamp } = exemplar;\n  const formattedValue = formatValue(value, format);\n  const date = new Date(timestamp);\n  const formattedDate = formatWithUserTimeZone(date, 'MMM dd, yyyy - ');\n  const formattedTime = formatWithUserTimeZone(date, 'HH:mm:ss');\n\n  // Only sections with content take part in the layout, so no divider is left dangling\n  // when a label set is empty.\n  const sections: Array<{ key: string; content: ReactElement }> = [];\n  if (seriesLabels && Object.keys(seriesLabels).length > 0) {\n    sections.push({ key: 'series-labels', content: <LabelGrid title=\"Series labels\" labels={seriesLabels} /> });\n  }\n  if (Object.keys(labels).length > 0) {\n    sections.push({ key: 'exemplar-labels', content: <LabelGrid title=\"Exemplar labels\" labels={labels} /> });\n  }\n  sections.push({\n    key: 'value',\n    content: (\n      <Box>\n        <Typography variant=\"overline\" component=\"div\">\n          Value\n        </Typography>\n        <Typography fontWeight={700}>{formattedValue}</Typography>\n      </Box>\n    ),\n  });\n\n  return (\n    <Portal container={containerElement}>\n      <Box ref={tooltipRef} sx={(theme) => getTooltipStyles(theme, pinnedPos, maxHeight)} style={{ transform }}>\n        <Stack spacing={0.5}>\n          <Box\n            sx={(theme) => ({\n              width: '100%',\n              maxWidth: TOOLTIP_MAX_WIDTH,\n              padding: theme.spacing(1.5, 2, 0.5, 2),\n              backgroundColor: theme.palette.designSystem?.grey[800] ?? TOOLTIP_BG_COLOR_FALLBACK,\n              position: 'sticky',\n              top: 0,\n              left: 0,\n            })}\n          >\n            <Box sx={{ display: 'flex', alignItems: 'center', paddingBottom: 0.5, width: '100%' }}>\n              <Box sx={{ flexGrow: 1, minWidth: 0 }}>\n                <Typography\n                  variant=\"caption\"\n                  sx={(theme) => ({\n                    color: theme.palette.common.white,\n                  })}\n                >\n                  {formattedDate}\n                </Typography>\n                <Typography variant=\"caption\">\n                  <strong>{formattedTime}</strong>\n                </Typography>\n              </Box>\n              {enablePinning && (\n                <Stack direction=\"row\" alignItems=\"center\" sx={{ marginLeft: 1, flexShrink: 0 }}>\n                  <Typography sx={{ marginRight: 0.5, fontSize: 11, verticalAlign: 'middle' }}>\n                    {isPinned ? UNPIN_TOOLTIP_HELP_TEXT : PIN_TOOLTIP_HELP_TEXT}\n                  </Typography>\n                  {isPinned ? (\n                    <IconButton\n                      aria-label={UNPIN_TOOLTIP_HELP_TEXT}\n                      onClick={() => {\n                        if (onUnpinClick !== undefined) onUnpinClick();\n                      }}\n                      sx={{ padding: 0, color: 'inherit' }}\n                    >\n                      <Pin sx={{ fontSize: 16 }} />\n                    </IconButton>\n                  ) : (\n                    <PinOutline sx={{ fontSize: 16 }} />\n                  )}\n                </Stack>\n              )}\n            </Box>\n            <Divider sx={(theme) => ({ width: '100%', borderColor: theme.palette.grey['500'] })} />\n          </Box>\n          <Stack spacing={1} sx={(theme) => ({ padding: theme.spacing(0.5, 2, 1.5, 2) })}>\n            {sections.map((section, index) => (\n              <Fragment key={section.key}>\n                {index > 0 && <Divider sx={(theme) => ({ borderColor: theme.palette.grey['500'] })} />}\n                {section.content}\n              </Fragment>\n            ))}\n          </Stack>\n        </Stack>\n      </Box>\n    </Portal>\n  );\n}\n\nfunction LabelGrid({ title, labels }: { title: string; labels: Labels }): ReactElement {\n  const entries = Object.entries(labels);\n  return (\n    <Box>\n      <Typography variant=\"overline\" component=\"div\">\n        {title}\n      </Typography>\n      <Box\n        sx={{\n          display: 'grid',\n          // The first column is sized by the longest label name, so all values line up\n          // at the same horizontal position.\n          gridTemplateColumns: 'minmax(0, max-content) minmax(0, 1fr)',\n          columnGap: 0.5,\n          rowGap: 0.25,\n        }}\n      >\n        {entries.map(([labelName, labelValue]) => (\n          <Fragment key={labelName}>\n            <Typography sx={{ wordBreak: 'break-all' }}>{labelName}:</Typography>\n            <Typography fontWeight={700} sx={{ wordBreak: 'break-all' }}>\n              {labelValue}\n            </Typography>\n          </Fragment>\n        ))}\n      </Box>\n    </Box>\n  );\n}\n"],"names":["Box","Divider","IconButton","Portal","Stack","Typography","Pin","PinOutline","Fragment","useResizeObserver","useTimeZone","formatValue","assembleTransform","getTooltipStyles","PIN_TOOLTIP_HELP_TEXT","TOOLTIP_BG_COLOR_FALLBACK","TOOLTIP_MAX_WIDTH","UNPIN_TOOLTIP_HELP_TEXT","useMousePosition","ExemplarMetadataTooltip","exemplar","seriesLabels","containerId","format","pinnedPos","enablePinning","onUnpinClick","formatWithUserTimeZone","mousePos","height","width","ref","tooltipRef","isPinned","containerElement","document","querySelector","undefined","maxHeight","getBoundingClientRect","transform","labels","value","timestamp","formattedValue","date","Date","formattedDate","formattedTime","sections","Object","keys","length","push","key","content","LabelGrid","title","variant","component","fontWeight","container","sx","theme","style","spacing","maxWidth","padding","backgroundColor","palette","designSystem","grey","position","top","left","display","alignItems","paddingBottom","flexGrow","minWidth","color","common","white","strong","direction","marginLeft","flexShrink","marginRight","fontSize","verticalAlign","aria-label","onClick","borderColor","map","section","index","entries","gridTemplateColumns","columnGap","rowGap","labelName","labelValue","wordBreak"],"mappings":"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"}

package/dist/ExemplarMetadata/index.d.ts

@@ -0,0 +1,2 @@
+export * from './ExemplarMetadataTooltip';
+//# sourceMappingURL=index.d.ts.map

package/dist/ExemplarMetadata/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ExemplarMetadata/index.ts"],"names":[],"mappings":"AAYA,cAAc,2BAA2B,CAAC"}

package/dist/{cjs/model/thresholds.js → ExemplarMetadata/index.js}

@@ -4,13 +4,11 @@
 // You may obtain a copy of the License at
 //
 // http://www.apache.org/licenses/LICENSE-2.0
-//
 // Unless required by applicable law or agreed to in writing, software
 // distributed under the License is distributed on an "AS IS" BASIS,
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
+export * from "./ExemplarMetadataTooltip.js";
+
+//# sourceMappingURL=index.js.map

package/dist/ExemplarMetadata/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/ExemplarMetadata/index.ts"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nexport * from './ExemplarMetadataTooltip';\n"],"names":[],"mappings":"AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,cAAc,+BAA4B"}

package/dist/FontSizeSelector/FontSizeSelector.d.ts

@@ -1,4 +1,4 @@
-import { ReactElement } from 'react';
+import type { ReactElement } from 'react';
 export type FontSizeOption = number | undefined;
 export interface FontSizeSelectorProps {
     value: FontSizeOption;

package/dist/FontSizeSelector/FontSizeSelector.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FontSizeSelector.d.ts","sourceRoot":"","sources":["../../src/FontSizeSelector/FontSizeSelector.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAyBrC,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,SAAS,CAAC;AAEhD,MAAM,WAAW,qBAAqB;IACpC,KAAK,EAAE,cAAc,CAAC;IACtB,QAAQ,EAAE,CAAC,QAAQ,EAAE,cAAc,KAAK,IAAI,CAAC;CAC9C;AAED,wBAAgB,gBAAgB,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,qBAAqB,GAAG,YAAY,CAmBzF"}
+{"version":3,"file":"FontSizeSelector.d.ts","sourceRoot":"","sources":["../../src/FontSizeSelector/FontSizeSelector.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AA0B1C,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,SAAS,CAAC;AAEhD,MAAM,WAAW,qBAAqB;IACpC,KAAK,EAAE,cAAc,CAAC;IACtB,QAAQ,EAAE,CAAC,QAAQ,EAAE,cAAc,KAAK,IAAI,CAAC;CAC9C;AAED,wBAAgB,gBAAgB,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,qBAAqB,GAAG,YAAY,CAmBzF"}

package/dist/FontSizeSelector/FontSizeSelector.js

@@ -11,8 +11,8 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import { jsx as _jsx } from "react/jsx-runtime";
-import { OptionsEditorControl } from '../OptionsEditorLayout';
-import { SettingsAutocomplete } from '../SettingsAutocomplete';
+import { OptionsEditorControl } from "../OptionsEditorLayout/index.js";
+import { SettingsAutocomplete } from "../SettingsAutocomplete/index.js";
 const FONT_SIZE_OPTIONS = [
     {
         id: 'default',

package/dist/FontSizeSelector/FontSizeSelector.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/FontSizeSelector/FontSizeSelector.tsx"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License |  Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing |  software\n// distributed under the License is distributed on an \"AS IS\" BASIS |\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND |  either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { ReactElement } from 'react';\nimport { OptionsEditorControl } from '../OptionsEditorLayout';\nimport { SettingsAutocomplete } from '../SettingsAutocomplete';\n\nconst FONT_SIZE_OPTIONS = [\n  { id: 'default', label: 'Default', value: undefined },\n  { id: '12', label: '12', value: 12 },\n  { id: '14', label: '14', value: 14 },\n  { id: '16', label: '16', value: 16 },\n  { id: '20', label: '20', value: 20 },\n  { id: '24', label: '24', value: 24 },\n  { id: '28', label: '28', value: 28 },\n  { id: '32', label: '32', value: 32 },\n  { id: '36', label: '36', value: 36 },\n  { id: '40', label: '40', value: 40 },\n  { id: '48', label: '48', value: 48 },\n  { id: '56', label: '56', value: 56 },\n  { id: '64', label: '64', value: 64 },\n  { id: '72', label: '72', value: 72 },\n  { id: '96', label: '96', value: 96 },\n  { id: '128', label: '128', value: 128 },\n  { id: '160', label: '160', value: 160 },\n  { id: '192', label: '192', value: 192 },\n];\n\nexport type FontSizeOption = number | undefined;\n\nexport interface FontSizeSelectorProps {\n  value: FontSizeOption;\n  onChange: (fontSize: FontSizeOption) => void;\n}\n\nexport function FontSizeSelector({ value, onChange }: FontSizeSelectorProps): ReactElement {\n  const handleFontSizeChange = (_: unknown, { value }: { value: FontSizeOption }): void => {\n    onChange(value);\n  };\n\n  return (\n    <OptionsEditorControl\n      label=\"Font Size\"\n      control={\n        <SettingsAutocomplete\n          value={FONT_SIZE_OPTIONS.find((o) => o.value === value)}\n          options={FONT_SIZE_OPTIONS}\n          getOptionLabel={(o) => o.label}\n          onChange={handleFontSizeChange}\n          disableClearable\n        />\n      }\n    />\n  );\n}\n"],"names":["OptionsEditorControl","SettingsAutocomplete","FONT_SIZE_OPTIONS","id","label","value","undefined","FontSizeSelector","onChange","handleFontSizeChange","_","control","find","o","options","getOptionLabel","disableClearable"],"mappings":"AAAA,+BAA+B;AAC/B,oEAAoE;AACpE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,wEAAwE;AACxE,qEAAqE;AACrE,6EAA6E;AAC7E,sEAAsE;AACtE,iCAAiC;;AAGjC,SAASA,oBAAoB,QAAQ,yBAAyB;AAC9D,SAASC,oBAAoB,QAAQ,0BAA0B;AAE/D,MAAMC,oBAAoB;IACxB;QAAEC,IAAI;QAAWC,OAAO;QAAWC,OAAOC;IAAU;IACpD;QAAEH,IAAI;QAAMC,OAAO;QAAMC,OAAO;IAAG;IACnC;QAAEF,IAAI;QAAMC,OAAO;QAAMC,OAAO;IAAG;IACnC;QAAEF,IAAI;QAAMC,OAAO;QAAMC,OAAO;IAAG;IACnC;QAAEF,IAAI;QAAMC,OAAO;QAAMC,OAAO;IAAG;IACnC;QAAEF,IAAI;QAAMC,OAAO;QAAMC,OAAO;IAAG;IACnC;QAAEF,IAAI;QAAMC,OAAO;QAAMC,OAAO;IAAG;IACnC;QAAEF,IAAI;QAAMC,OAAO;QAAMC,OAAO;IAAG;IACnC;QAAEF,IAAI;QAAMC,OAAO;QAAMC,OAAO;IAAG;IACnC;QAAEF,IAAI;QAAMC,OAAO;QAAMC,OAAO;IAAG;IACnC;QAAEF,IAAI;QAAMC,OAAO;QAAMC,OAAO;IAAG;IACnC;QAAEF,IAAI;QAAMC,OAAO;QAAMC,OAAO;IAAG;IACnC;QAAEF,IAAI;QAAMC,OAAO;QAAMC,OAAO;IAAG;IACnC;QAAEF,IAAI;QAAMC,OAAO;QAAMC,OAAO;IAAG;IACnC;QAAEF,IAAI;QAAMC,OAAO;QAAMC,OAAO;IAAG;IACnC;QAAEF,IAAI;QAAOC,OAAO;QAAOC,OAAO;IAAI;IACtC;QAAEF,IAAI;QAAOC,OAAO;QAAOC,OAAO;IAAI;IACtC;QAAEF,IAAI;QAAOC,OAAO;QAAOC,OAAO;IAAI;CACvC;AASD,OAAO,SAASE,iBAAiB,EAAEF,KAAK,EAAEG,QAAQ,EAAyB;IACzE,MAAMC,uBAAuB,CAACC,GAAY,EAAEL,KAAK,EAA6B;QAC5EG,SAASH;IACX;IAEA,qBACE,KAACL;QACCI,OAAM;QACNO,uBACE,KAACV;YACCI,OAAOH,kBAAkBU,IAAI,CAAC,CAACC,IAAMA,EAAER,KAAK,KAAKA;YACjDS,SAASZ;YACTa,gBAAgB,CAACF,IAAMA,EAAET,KAAK;YAC9BI,UAAUC;YACVO,gBAAgB;;;AAK1B"}
+{"version":3,"sources":["../../src/FontSizeSelector/FontSizeSelector.tsx"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License |  Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing |  software\n// distributed under the License is distributed on an \"AS IS\" BASIS |\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND |  either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport type { ReactElement } from 'react';\n\nimport { OptionsEditorControl } from '../OptionsEditorLayout';\nimport { SettingsAutocomplete } from '../SettingsAutocomplete';\n\nconst FONT_SIZE_OPTIONS = [\n  { id: 'default', label: 'Default', value: undefined },\n  { id: '12', label: '12', value: 12 },\n  { id: '14', label: '14', value: 14 },\n  { id: '16', label: '16', value: 16 },\n  { id: '20', label: '20', value: 20 },\n  { id: '24', label: '24', value: 24 },\n  { id: '28', label: '28', value: 28 },\n  { id: '32', label: '32', value: 32 },\n  { id: '36', label: '36', value: 36 },\n  { id: '40', label: '40', value: 40 },\n  { id: '48', label: '48', value: 48 },\n  { id: '56', label: '56', value: 56 },\n  { id: '64', label: '64', value: 64 },\n  { id: '72', label: '72', value: 72 },\n  { id: '96', label: '96', value: 96 },\n  { id: '128', label: '128', value: 128 },\n  { id: '160', label: '160', value: 160 },\n  { id: '192', label: '192', value: 192 },\n];\n\nexport type FontSizeOption = number | undefined;\n\nexport interface FontSizeSelectorProps {\n  value: FontSizeOption;\n  onChange: (fontSize: FontSizeOption) => void;\n}\n\nexport function FontSizeSelector({ value, onChange }: FontSizeSelectorProps): ReactElement {\n  const handleFontSizeChange = (_: unknown, { value }: { value: FontSizeOption }): void => {\n    onChange(value);\n  };\n\n  return (\n    <OptionsEditorControl\n      label=\"Font Size\"\n      control={\n        <SettingsAutocomplete\n          value={FONT_SIZE_OPTIONS.find((o) => o.value === value)}\n          options={FONT_SIZE_OPTIONS}\n          getOptionLabel={(o) => o.label}\n          onChange={handleFontSizeChange}\n          disableClearable\n        />\n      }\n    />\n  );\n}\n"],"names":["OptionsEditorControl","SettingsAutocomplete","FONT_SIZE_OPTIONS","id","label","value","undefined","FontSizeSelector","onChange","handleFontSizeChange","_","control","find","o","options","getOptionLabel","disableClearable"],"mappings":"AAAA,+BAA+B;AAC/B,oEAAoE;AACpE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,wEAAwE;AACxE,qEAAqE;AACrE,6EAA6E;AAC7E,sEAAsE;AACtE,iCAAiC;;AAIjC,SAASA,oBAAoB,QAAQ,kCAAyB;AAC9D,SAASC,oBAAoB,QAAQ,mCAA0B;AAE/D,MAAMC,oBAAoB;IACxB;QAAEC,IAAI;QAAWC,OAAO;QAAWC,OAAOC;IAAU;IACpD;QAAEH,IAAI;QAAMC,OAAO;QAAMC,OAAO;IAAG;IACnC;QAAEF,IAAI;QAAMC,OAAO;QAAMC,OAAO;IAAG;IACnC;QAAEF,IAAI;QAAMC,OAAO;QAAMC,OAAO;IAAG;IACnC;QAAEF,IAAI;QAAMC,OAAO;QAAMC,OAAO;IAAG;IACnC;QAAEF,IAAI;QAAMC,OAAO;QAAMC,OAAO;IAAG;IACnC;QAAEF,IAAI;QAAMC,OAAO;QAAMC,OAAO;IAAG;IACnC;QAAEF,IAAI;QAAMC,OAAO;QAAMC,OAAO;IAAG;IACnC;QAAEF,IAAI;QAAMC,OAAO;QAAMC,OAAO;IAAG;IACnC;QAAEF,IAAI;QAAMC,OAAO;QAAMC,OAAO;IAAG;IACnC;QAAEF,IAAI;QAAMC,OAAO;QAAMC,OAAO;IAAG;IACnC;QAAEF,IAAI;QAAMC,OAAO;QAAMC,OAAO;IAAG;IACnC;QAAEF,IAAI;QAAMC,OAAO;QAAMC,OAAO;IAAG;IACnC;QAAEF,IAAI;QAAMC,OAAO;QAAMC,OAAO;IAAG;IACnC;QAAEF,IAAI;QAAMC,OAAO;QAAMC,OAAO;IAAG;IACnC;QAAEF,IAAI;QAAOC,OAAO;QAAOC,OAAO;IAAI;IACtC;QAAEF,IAAI;QAAOC,OAAO;QAAOC,OAAO;IAAI;IACtC;QAAEF,IAAI;QAAOC,OAAO;QAAOC,OAAO;IAAI;CACvC;AASD,OAAO,SAASE,iBAAiB,EAAEF,KAAK,EAAEG,QAAQ,EAAyB;IACzE,MAAMC,uBAAuB,CAACC,GAAY,EAAEL,KAAK,EAA6B;QAC5EG,SAASH;IACX;IAEA,qBACE,KAACL;QACCI,OAAM;QACNO,uBACE,KAACV;YACCI,OAAOH,kBAAkBU,IAAI,CAAC,CAACC,IAAMA,EAAER,KAAK,KAAKA;YACjDS,SAASZ;YACTa,gBAAgB,CAACF,IAAMA,EAAET,KAAK;YAC9BI,UAAUC;YACVO,gBAAgB;;;AAK1B"}

package/dist/FontSizeSelector/index.js

@@ -10,6 +10,6 @@
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-export * from './FontSizeSelector';
+export * from "./FontSizeSelector.js";
 
 //# sourceMappingURL=index.js.map

package/dist/FontSizeSelector/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/FontSizeSelector/index.ts"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nexport * from './FontSizeSelector';\n"],"names":[],"mappings":"AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,cAAc,qBAAqB"}
+{"version":3,"sources":["../../src/FontSizeSelector/index.ts"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nexport * from './FontSizeSelector';\n"],"names":[],"mappings":"AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,cAAc,wBAAqB"}

package/dist/FormEditor/FormActions.d.ts

@@ -1,6 +1,6 @@
-import { StackProps } from '@mui/material';
-import { Action } from '@perses-dev/client';
-import { ReactElement } from 'react';
+import type { StackProps } from '@mui/material';
+import type { Action } from '@perses-dev/client';
+import type { ReactElement } from 'react';
 export interface FormActionsProps extends StackProps {
     action: Action;
     submitText?: string;

package/dist/FormEditor/FormActions.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FormActions.d.ts","sourceRoot":"","sources":["../../src/FormEditor/FormActions.tsx"],"names":[],"mappings":"AAaA,OAAO,EAA0B,UAAU,EAAE,MAAM,eAAe,CAAC;AACnE,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AAC5C,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAErC,MAAM,WAAW,gBAAiB,SAAQ,UAAU;IAClD,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB;AAED,wBAAgB,WAAW,CAAC,EAC1B,MAAM,EACN,UAAmB,EACnB,UAAqB,EACrB,UAAU,EACV,OAAO,EACP,cAAc,EACd,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,gBAAgB,GAAG,YAAY,CAkDjC"}
+{"version":3,"file":"FormActions.d.ts","sourceRoot":"","sources":["../../src/FormEditor/FormActions.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAEhD,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AACjD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAE1C,MAAM,WAAW,gBAAiB,SAAQ,UAAU;IAClD,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB;AAED,wBAAgB,WAAW,CAAC,EAC1B,MAAM,EACN,UAAmB,EACnB,UAAqB,EACrB,UAAU,EACV,OAAO,EACP,cAAc,EACd,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,gBAAgB,GAAG,YAAY,CAkDjC"}

package/dist/FormEditor/FormActions.js

@@ -1,4 +1,3 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 // Copyright The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
@@ -11,7 +10,8 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-import { Button, Divider, Stack } from '@mui/material';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Button, Divider, Stack } from "@mui/material";
 export function FormActions({ action, submitText = 'Save', cancelText = 'Cancel', isReadonly, isValid, onActionChange, onSubmit, onDelete, onCancel, ...props }) {
     return /*#__PURE__*/ _jsx(Stack, {
         direction: "row",

package/dist/FormEditor/FormActions.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/FormEditor/FormActions.tsx"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Button, Divider, Stack, StackProps } from '@mui/material';\nimport { Action } from '@perses-dev/client';\nimport { ReactElement } from 'react';\n\nexport interface FormActionsProps extends StackProps {\n  action: Action;\n  submitText?: string;\n  cancelText?: string;\n  isReadonly?: boolean;\n  isValid?: boolean;\n  onActionChange?: (action: Action) => void;\n  onSubmit?: () => void;\n  onDelete?: () => void;\n  onCancel?: () => void;\n}\n\nexport function FormActions({\n  action,\n  submitText = 'Save',\n  cancelText = 'Cancel',\n  isReadonly,\n  isValid,\n  onActionChange,\n  onSubmit,\n  onDelete,\n  onCancel,\n  ...props\n}: FormActionsProps): ReactElement {\n  return (\n    <Stack direction=\"row\" gap={1} sx={{ marginLeft: 'auto' }} {...props}>\n      {action === 'read' ? (\n        <>\n          {onActionChange && (\n            <Button disabled={isReadonly} variant=\"contained\" onClick={() => onActionChange('update')}>\n              Edit\n            </Button>\n          )}\n          {onDelete && (\n            <Button color=\"error\" disabled={isReadonly} variant=\"outlined\" onClick={onDelete}>\n              Delete\n            </Button>\n          )}\n          {onCancel && (onSubmit || onDelete) && (\n            <Divider\n              orientation=\"vertical\"\n              flexItem\n              sx={{\n                borderColor: (theme) => theme.palette.grey['500'],\n                '&.MuiDivider-root': {\n                  marginLeft: 2,\n                  marginRight: 1,\n                },\n              }}\n            />\n          )}\n          {onCancel && (\n            <Button color=\"secondary\" variant=\"outlined\" onClick={onCancel}>\n              {cancelText}\n            </Button>\n          )}\n        </>\n      ) : (\n        <>\n          {onSubmit && (\n            <Button variant=\"contained\" disabled={!isValid} onClick={onSubmit}>\n              {submitText}\n            </Button>\n          )}\n          {onCancel && (\n            <Button color=\"secondary\" variant=\"outlined\" onClick={onCancel}>\n              {cancelText}\n            </Button>\n          )}\n        </>\n      )}\n    </Stack>\n  );\n}\n"],"names":["Button","Divider","Stack","FormActions","action","submitText","cancelText","isReadonly","isValid","onActionChange","onSubmit","onDelete","onCancel","props","direction","gap","sx","marginLeft","disabled","variant","onClick","color","orientation","flexItem","borderColor","theme","palette","grey","marginRight"],"mappings":";AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,SAASA,MAAM,EAAEC,OAAO,EAAEC,KAAK,QAAoB,gBAAgB;AAgBnE,OAAO,SAASC,YAAY,EAC1BC,MAAM,EACNC,aAAa,MAAM,EACnBC,aAAa,QAAQ,EACrBC,UAAU,EACVC,OAAO,EACPC,cAAc,EACdC,QAAQ,EACRC,QAAQ,EACRC,QAAQ,EACR,GAAGC,OACc;IACjB,qBACE,KAACX;QAAMY,WAAU;QAAMC,KAAK;QAAGC,IAAI;YAAEC,YAAY;QAAO;QAAI,GAAGJ,KAAK;kBACjET,WAAW,uBACV;;gBACGK,gCACC,KAACT;oBAAOkB,UAAUX;oBAAYY,SAAQ;oBAAYC,SAAS,IAAMX,eAAe;8BAAW;;gBAI5FE,0BACC,KAACX;oBAAOqB,OAAM;oBAAQH,UAAUX;oBAAYY,SAAQ;oBAAWC,SAAST;8BAAU;;gBAInFC,YAAaF,CAAAA,YAAYC,QAAO,mBAC/B,KAACV;oBACCqB,aAAY;oBACZC,QAAQ;oBACRP,IAAI;wBACFQ,aAAa,CAACC,QAAUA,MAAMC,OAAO,CAACC,IAAI,CAAC,MAAM;wBACjD,qBAAqB;4BACnBV,YAAY;4BACZW,aAAa;wBACf;oBACF;;gBAGHhB,0BACC,KAACZ;oBAAOqB,OAAM;oBAAYF,SAAQ;oBAAWC,SAASR;8BACnDN;;;2BAKP;;gBACGI,0BACC,KAACV;oBAAOmB,SAAQ;oBAAYD,UAAU,CAACV;oBAASY,SAASV;8BACtDL;;gBAGJO,0BACC,KAACZ;oBAAOqB,OAAM;oBAAYF,SAAQ;oBAAWC,SAASR;8BACnDN;;;;;AAOf"}
+{"version":3,"sources":["../../src/FormEditor/FormActions.tsx"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport type { StackProps } from '@mui/material';\nimport { Button, Divider, Stack } from '@mui/material';\nimport type { Action } from '@perses-dev/client';\nimport type { ReactElement } from 'react';\n\nexport interface FormActionsProps extends StackProps {\n  action: Action;\n  submitText?: string;\n  cancelText?: string;\n  isReadonly?: boolean;\n  isValid?: boolean;\n  onActionChange?: (action: Action) => void;\n  onSubmit?: () => void;\n  onDelete?: () => void;\n  onCancel?: () => void;\n}\n\nexport function FormActions({\n  action,\n  submitText = 'Save',\n  cancelText = 'Cancel',\n  isReadonly,\n  isValid,\n  onActionChange,\n  onSubmit,\n  onDelete,\n  onCancel,\n  ...props\n}: FormActionsProps): ReactElement {\n  return (\n    <Stack direction=\"row\" gap={1} sx={{ marginLeft: 'auto' }} {...props}>\n      {action === 'read' ? (\n        <>\n          {onActionChange && (\n            <Button disabled={isReadonly} variant=\"contained\" onClick={() => onActionChange('update')}>\n              Edit\n            </Button>\n          )}\n          {onDelete && (\n            <Button color=\"error\" disabled={isReadonly} variant=\"outlined\" onClick={onDelete}>\n              Delete\n            </Button>\n          )}\n          {onCancel && (onSubmit || onDelete) && (\n            <Divider\n              orientation=\"vertical\"\n              flexItem\n              sx={{\n                borderColor: (theme) => theme.palette.grey['500'],\n                '&.MuiDivider-root': {\n                  marginLeft: 2,\n                  marginRight: 1,\n                },\n              }}\n            />\n          )}\n          {onCancel && (\n            <Button color=\"secondary\" variant=\"outlined\" onClick={onCancel}>\n              {cancelText}\n            </Button>\n          )}\n        </>\n      ) : (\n        <>\n          {onSubmit && (\n            <Button variant=\"contained\" disabled={!isValid} onClick={onSubmit}>\n              {submitText}\n            </Button>\n          )}\n          {onCancel && (\n            <Button color=\"secondary\" variant=\"outlined\" onClick={onCancel}>\n              {cancelText}\n            </Button>\n          )}\n        </>\n      )}\n    </Stack>\n  );\n}\n"],"names":["Button","Divider","Stack","FormActions","action","submitText","cancelText","isReadonly","isValid","onActionChange","onSubmit","onDelete","onCancel","props","direction","gap","sx","marginLeft","disabled","variant","onClick","color","orientation","flexItem","borderColor","theme","palette","grey","marginRight"],"mappings":"AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAGjC,SAASA,MAAM,EAAEC,OAAO,EAAEC,KAAK,QAAQ,gBAAgB;AAgBvD,OAAO,SAASC,YAAY,EAC1BC,MAAM,EACNC,aAAa,MAAM,EACnBC,aAAa,QAAQ,EACrBC,UAAU,EACVC,OAAO,EACPC,cAAc,EACdC,QAAQ,EACRC,QAAQ,EACRC,QAAQ,EACR,GAAGC,OACc;IACjB,qBACE,KAACX;QAAMY,WAAU;QAAMC,KAAK;QAAGC,IAAI;YAAEC,YAAY;QAAO;QAAI,GAAGJ,KAAK;kBACjET,WAAW,uBACV;;gBACGK,gCACC,KAACT;oBAAOkB,UAAUX;oBAAYY,SAAQ;oBAAYC,SAAS,IAAMX,eAAe;8BAAW;;gBAI5FE,0BACC,KAACX;oBAAOqB,OAAM;oBAAQH,UAAUX;oBAAYY,SAAQ;oBAAWC,SAAST;8BAAU;;gBAInFC,YAAaF,CAAAA,YAAYC,QAAO,mBAC/B,KAACV;oBACCqB,aAAY;oBACZC,QAAQ;oBACRP,IAAI;wBACFQ,aAAa,CAACC,QAAUA,MAAMC,OAAO,CAACC,IAAI,CAAC,MAAM;wBACjD,qBAAqB;4BACnBV,YAAY;4BACZW,aAAa;wBACf;oBACF;;gBAGHhB,0BACC,KAACZ;oBAAOqB,OAAM;oBAAYF,SAAQ;oBAAWC,SAASR;8BACnDN;;;2BAKP;;gBACGI,0BACC,KAACV;oBAAOmB,SAAQ;oBAAYD,UAAU,CAACV;oBAASY,SAASV;8BACtDL;;gBAGJO,0BACC,KAACZ;oBAAOqB,OAAM;oBAAYF,SAAQ;oBAAWC,SAASR;8BACnDN;;;;;AAOf"}

package/dist/FormEditor/index.js

@@ -10,6 +10,6 @@
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-export * from './FormActions';
+export * from "./FormActions.js";
 
 //# sourceMappingURL=index.js.map

package/dist/FormEditor/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/FormEditor/index.ts"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nexport * from './FormActions';\n"],"names":[],"mappings":"AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,cAAc,gBAAgB"}
+{"version":3,"sources":["../../src/FormEditor/index.ts"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nexport * from './FormActions';\n"],"names":[],"mappings":"AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,cAAc,mBAAgB"}

package/dist/FormatControls/FormatControls.d.ts

@@ -1,5 +1,5 @@
-import { ReactElement } from 'react';
-import { FormatOptions } from '../model';
+import type { ReactElement } from 'react';
+import type { FormatOptions } from '../model';
 export interface FormatControlsProps {
     value: FormatOptions;
     onChange: (unit: FormatOptions) => void;

package/dist/FormatControls/FormatControls.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FormatControls.d.ts","sourceRoot":"","sources":["../../src/FormatControls/FormatControls.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAGrC,OAAO,EAAE,aAAa,EAAuE,MAAM,UAAU,CAAC;AAG9G,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,aAAa,CAAC;IACrB,QAAQ,EAAE,CAAC,IAAI,EAAE,aAAa,KAAK,IAAI,CAAC;IACxC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAiBD,wBAAgB,cAAc,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAgB,EAAE,EAAE,mBAAmB,GAAG,YAAY,CA+DvG"}
+{"version":3,"file":"FormatControls.d.ts","sourceRoot":"","sources":["../../src/FormatControls/FormatControls.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAE1C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAM9C,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,aAAa,CAAC;IACrB,QAAQ,EAAE,CAAC,IAAI,EAAE,aAAa,KAAK,IAAI,CAAC;IACxC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAiBD,wBAAgB,cAAc,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAgB,EAAE,EAAE,mBAAmB,GAAG,YAAY,CA+DvG"}

package/dist/FormatControls/FormatControls.js

@@ -1,4 +1,3 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 // Copyright The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
@@ -11,11 +10,12 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-import { Switch } from '@mui/material';
-import { OptionsEditorControl } from '../OptionsEditorLayout';
-import { SettingsAutocomplete } from '../SettingsAutocomplete';
-import { isUnitWithDecimalPlaces, isUnitWithShortValues, shouldShortenValues } from '../model';
-import { UnitSelector } from './UnitSelector';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Switch } from "@mui/material";
+import { isUnitWithDecimalPlaces, isUnitWithShortValues, shouldShortenValues } from "../model/index.js";
+import { OptionsEditorControl } from "../OptionsEditorLayout/index.js";
+import { SettingsAutocomplete } from "../SettingsAutocomplete/index.js";
+import { UnitSelector } from "./UnitSelector.js";
 const DECIMAL_PLACES_OPTIONS = [
     {
         id: 'default',

package/dist/FormatControls/FormatControls.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/FormatControls/FormatControls.tsx"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\nimport { Switch, SwitchProps } from '@mui/material';\n\nimport { ReactElement } from 'react';\nimport { OptionsEditorControl } from '../OptionsEditorLayout';\nimport { SettingsAutocomplete } from '../SettingsAutocomplete';\nimport { FormatOptions, isUnitWithDecimalPlaces, isUnitWithShortValues, shouldShortenValues } from '../model';\nimport { UnitSelector } from './UnitSelector';\n\nexport interface FormatControlsProps {\n  value: FormatOptions;\n  onChange: (unit: FormatOptions) => void;\n  disabled?: boolean;\n}\n\nconst DECIMAL_PLACES_OPTIONS: Array<{ id: string; label: string; decimalPlaces?: number }> = [\n  { id: 'default', label: 'Default', decimalPlaces: undefined },\n  { id: '0', label: '0', decimalPlaces: 0 },\n  { id: '1', label: '1', decimalPlaces: 1 },\n  { id: '2', label: '2', decimalPlaces: 2 },\n  { id: '3', label: '3', decimalPlaces: 3 },\n  { id: '4', label: '4', decimalPlaces: 4 },\n];\n\nfunction getOptionByDecimalPlaces(\n  decimalPlaces?: number\n): { id: string; label: string; decimalPlaces?: number } | undefined {\n  return DECIMAL_PLACES_OPTIONS.find((o) => o.decimalPlaces === decimalPlaces);\n}\n\nexport function FormatControls({ value, onChange, disabled = false }: FormatControlsProps): ReactElement {\n  const hasDecimalPlaces = isUnitWithDecimalPlaces(value);\n  const hasShortValues = isUnitWithShortValues(value);\n\n  const handleUnitChange = (newValue: FormatOptions | undefined): void => {\n    onChange(newValue || { unit: 'decimal' }); // Fallback to 'decimal' if undefined\n  };\n\n  const handleDecimalPlacesChange = ({\n    decimalPlaces,\n  }: {\n    id: string;\n    label: string;\n    decimalPlaces?: number;\n  }): void => {\n    if (hasDecimalPlaces) {\n      onChange({\n        ...value,\n        decimalPlaces: decimalPlaces,\n      });\n    }\n  };\n\n  const handleShortValuesChange: SwitchProps['onChange'] = (_: unknown, checked: boolean) => {\n    if (hasShortValues) {\n      onChange({\n        ...value,\n        shortValues: checked,\n      });\n    }\n  };\n\n  return (\n    <>\n      <OptionsEditorControl\n        label=\"Short values\"\n        control={\n          <Switch\n            checked={hasShortValues ? shouldShortenValues(value.shortValues) : false}\n            onChange={handleShortValuesChange}\n            disabled={!hasShortValues}\n          />\n        }\n      />\n      <OptionsEditorControl\n        label=\"Unit\"\n        control={<UnitSelector value={value} onChange={handleUnitChange} disabled={disabled} />}\n      />\n      <OptionsEditorControl\n        label=\"Decimals\"\n        control={\n          <SettingsAutocomplete\n            value={getOptionByDecimalPlaces(value.decimalPlaces)}\n            options={DECIMAL_PLACES_OPTIONS}\n            getOptionLabel={(o) => o.label}\n            onChange={(_, value) => handleDecimalPlacesChange(value)}\n            disabled={!hasDecimalPlaces}\n            disableClearable\n          />\n        }\n      />\n    </>\n  );\n}\n"],"names":["Switch","OptionsEditorControl","SettingsAutocomplete","isUnitWithDecimalPlaces","isUnitWithShortValues","shouldShortenValues","UnitSelector","DECIMAL_PLACES_OPTIONS","id","label","decimalPlaces","undefined","getOptionByDecimalPlaces","find","o","FormatControls","value","onChange","disabled","hasDecimalPlaces","hasShortValues","handleUnitChange","newValue","unit","handleDecimalPlacesChange","handleShortValuesChange","_","checked","shortValues","control","options","getOptionLabel","disableClearable"],"mappings":";AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AACjC,SAASA,MAAM,QAAqB,gBAAgB;AAGpD,SAASC,oBAAoB,QAAQ,yBAAyB;AAC9D,SAASC,oBAAoB,QAAQ,0BAA0B;AAC/D,SAAwBC,uBAAuB,EAAEC,qBAAqB,EAAEC,mBAAmB,QAAQ,WAAW;AAC9G,SAASC,YAAY,QAAQ,iBAAiB;AAQ9C,MAAMC,yBAAuF;IAC3F;QAAEC,IAAI;QAAWC,OAAO;QAAWC,eAAeC;IAAU;IAC5D;QAAEH,IAAI;QAAKC,OAAO;QAAKC,eAAe;IAAE;IACxC;QAAEF,IAAI;QAAKC,OAAO;QAAKC,eAAe;IAAE;IACxC;QAAEF,IAAI;QAAKC,OAAO;QAAKC,eAAe;IAAE;IACxC;QAAEF,IAAI;QAAKC,OAAO;QAAKC,eAAe;IAAE;IACxC;QAAEF,IAAI;QAAKC,OAAO;QAAKC,eAAe;IAAE;CACzC;AAED,SAASE,yBACPF,aAAsB;IAEtB,OAAOH,uBAAuBM,IAAI,CAAC,CAACC,IAAMA,EAAEJ,aAAa,KAAKA;AAChE;AAEA,OAAO,SAASK,eAAe,EAAEC,KAAK,EAAEC,QAAQ,EAAEC,WAAW,KAAK,EAAuB;IACvF,MAAMC,mBAAmBhB,wBAAwBa;IACjD,MAAMI,iBAAiBhB,sBAAsBY;IAE7C,MAAMK,mBAAmB,CAACC;QACxBL,SAASK,YAAY;YAAEC,MAAM;QAAU,IAAI,qCAAqC;IAClF;IAEA,MAAMC,4BAA4B,CAAC,EACjCd,aAAa,EAKd;QACC,IAAIS,kBAAkB;YACpBF,SAAS;gBACP,GAAGD,KAAK;gBACRN,eAAeA;YACjB;QACF;IACF;IAEA,MAAMe,0BAAmD,CAACC,GAAYC;QACpE,IAAIP,gBAAgB;YAClBH,SAAS;gBACP,GAAGD,KAAK;gBACRY,aAAaD;YACf;QACF;IACF;IAEA,qBACE;;0BACE,KAAC1B;gBACCQ,OAAM;gBACNoB,uBACE,KAAC7B;oBACC2B,SAASP,iBAAiBf,oBAAoBW,MAAMY,WAAW,IAAI;oBACnEX,UAAUQ;oBACVP,UAAU,CAACE;;;0BAIjB,KAACnB;gBACCQ,OAAM;gBACNoB,uBAAS,KAACvB;oBAAaU,OAAOA;oBAAOC,UAAUI;oBAAkBH,UAAUA;;;0BAE7E,KAACjB;gBACCQ,OAAM;gBACNoB,uBACE,KAAC3B;oBACCc,OAAOJ,yBAAyBI,MAAMN,aAAa;oBACnDoB,SAASvB;oBACTwB,gBAAgB,CAACjB,IAAMA,EAAEL,KAAK;oBAC9BQ,UAAU,CAACS,GAAGV,QAAUQ,0BAA0BR;oBAClDE,UAAU,CAACC;oBACXa,gBAAgB;;;;;AAM5B"}
+{"version":3,"sources":["../../src/FormatControls/FormatControls.tsx"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\nimport type { SwitchProps } from '@mui/material';\nimport { Switch } from '@mui/material';\nimport type { ReactElement } from 'react';\n\nimport type { FormatOptions } from '../model';\nimport { isUnitWithDecimalPlaces, isUnitWithShortValues, shouldShortenValues } from '../model';\nimport { OptionsEditorControl } from '../OptionsEditorLayout';\nimport { SettingsAutocomplete } from '../SettingsAutocomplete';\nimport { UnitSelector } from './UnitSelector';\n\nexport interface FormatControlsProps {\n  value: FormatOptions;\n  onChange: (unit: FormatOptions) => void;\n  disabled?: boolean;\n}\n\nconst DECIMAL_PLACES_OPTIONS: Array<{ id: string; label: string; decimalPlaces?: number }> = [\n  { id: 'default', label: 'Default', decimalPlaces: undefined },\n  { id: '0', label: '0', decimalPlaces: 0 },\n  { id: '1', label: '1', decimalPlaces: 1 },\n  { id: '2', label: '2', decimalPlaces: 2 },\n  { id: '3', label: '3', decimalPlaces: 3 },\n  { id: '4', label: '4', decimalPlaces: 4 },\n];\n\nfunction getOptionByDecimalPlaces(\n  decimalPlaces?: number,\n): { id: string; label: string; decimalPlaces?: number } | undefined {\n  return DECIMAL_PLACES_OPTIONS.find((o) => o.decimalPlaces === decimalPlaces);\n}\n\nexport function FormatControls({ value, onChange, disabled = false }: FormatControlsProps): ReactElement {\n  const hasDecimalPlaces = isUnitWithDecimalPlaces(value);\n  const hasShortValues = isUnitWithShortValues(value);\n\n  const handleUnitChange = (newValue: FormatOptions | undefined): void => {\n    onChange(newValue || { unit: 'decimal' }); // Fallback to 'decimal' if undefined\n  };\n\n  const handleDecimalPlacesChange = ({\n    decimalPlaces,\n  }: {\n    id: string;\n    label: string;\n    decimalPlaces?: number;\n  }): void => {\n    if (hasDecimalPlaces) {\n      onChange({\n        ...value,\n        decimalPlaces: decimalPlaces,\n      });\n    }\n  };\n\n  const handleShortValuesChange: SwitchProps['onChange'] = (_: unknown, checked: boolean) => {\n    if (hasShortValues) {\n      onChange({\n        ...value,\n        shortValues: checked,\n      });\n    }\n  };\n\n  return (\n    <>\n      <OptionsEditorControl\n        label=\"Short values\"\n        control={\n          <Switch\n            checked={hasShortValues ? shouldShortenValues(value.shortValues) : false}\n            onChange={handleShortValuesChange}\n            disabled={!hasShortValues}\n          />\n        }\n      />\n      <OptionsEditorControl\n        label=\"Unit\"\n        control={<UnitSelector value={value} onChange={handleUnitChange} disabled={disabled} />}\n      />\n      <OptionsEditorControl\n        label=\"Decimals\"\n        control={\n          <SettingsAutocomplete\n            value={getOptionByDecimalPlaces(value.decimalPlaces)}\n            options={DECIMAL_PLACES_OPTIONS}\n            getOptionLabel={(o) => o.label}\n            onChange={(_, value) => handleDecimalPlacesChange(value)}\n            disabled={!hasDecimalPlaces}\n            disableClearable\n          />\n        }\n      />\n    </>\n  );\n}\n"],"names":["Switch","isUnitWithDecimalPlaces","isUnitWithShortValues","shouldShortenValues","OptionsEditorControl","SettingsAutocomplete","UnitSelector","DECIMAL_PLACES_OPTIONS","id","label","decimalPlaces","undefined","getOptionByDecimalPlaces","find","o","FormatControls","value","onChange","disabled","hasDecimalPlaces","hasShortValues","handleUnitChange","newValue","unit","handleDecimalPlacesChange","handleShortValuesChange","_","checked","shortValues","control","options","getOptionLabel","disableClearable"],"mappings":"AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAASA,MAAM,QAAQ,gBAAgB;AAIvC,SAASC,uBAAuB,EAAEC,qBAAqB,EAAEC,mBAAmB,QAAQ,oBAAW;AAC/F,SAASC,oBAAoB,QAAQ,kCAAyB;AAC9D,SAASC,oBAAoB,QAAQ,mCAA0B;AAC/D,SAASC,YAAY,QAAQ,oBAAiB;AAQ9C,MAAMC,yBAAuF;IAC3F;QAAEC,IAAI;QAAWC,OAAO;QAAWC,eAAeC;IAAU;IAC5D;QAAEH,IAAI;QAAKC,OAAO;QAAKC,eAAe;IAAE;IACxC;QAAEF,IAAI;QAAKC,OAAO;QAAKC,eAAe;IAAE;IACxC;QAAEF,IAAI;QAAKC,OAAO;QAAKC,eAAe;IAAE;IACxC;QAAEF,IAAI;QAAKC,OAAO;QAAKC,eAAe;IAAE;IACxC;QAAEF,IAAI;QAAKC,OAAO;QAAKC,eAAe;IAAE;CACzC;AAED,SAASE,yBACPF,aAAsB;IAEtB,OAAOH,uBAAuBM,IAAI,CAAC,CAACC,IAAMA,EAAEJ,aAAa,KAAKA;AAChE;AAEA,OAAO,SAASK,eAAe,EAAEC,KAAK,EAAEC,QAAQ,EAAEC,WAAW,KAAK,EAAuB;IACvF,MAAMC,mBAAmBlB,wBAAwBe;IACjD,MAAMI,iBAAiBlB,sBAAsBc;IAE7C,MAAMK,mBAAmB,CAACC;QACxBL,SAASK,YAAY;YAAEC,MAAM;QAAU,IAAI,qCAAqC;IAClF;IAEA,MAAMC,4BAA4B,CAAC,EACjCd,aAAa,EAKd;QACC,IAAIS,kBAAkB;YACpBF,SAAS;gBACP,GAAGD,KAAK;gBACRN,eAAeA;YACjB;QACF;IACF;IAEA,MAAMe,0BAAmD,CAACC,GAAYC;QACpE,IAAIP,gBAAgB;YAClBH,SAAS;gBACP,GAAGD,KAAK;gBACRY,aAAaD;YACf;QACF;IACF;IAEA,qBACE;;0BACE,KAACvB;gBACCK,OAAM;gBACNoB,uBACE,KAAC7B;oBACC2B,SAASP,iBAAiBjB,oBAAoBa,MAAMY,WAAW,IAAI;oBACnEX,UAAUQ;oBACVP,UAAU,CAACE;;;0BAIjB,KAAChB;gBACCK,OAAM;gBACNoB,uBAAS,KAACvB;oBAAaU,OAAOA;oBAAOC,UAAUI;oBAAkBH,UAAUA;;;0BAE7E,KAACd;gBACCK,OAAM;gBACNoB,uBACE,KAACxB;oBACCW,OAAOJ,yBAAyBI,MAAMN,aAAa;oBACnDoB,SAASvB;oBACTwB,gBAAgB,CAACjB,IAAMA,EAAEL,KAAK;oBAC9BQ,UAAU,CAACS,GAAGV,QAAUQ,0BAA0BR;oBAClDE,UAAU,CAACC;oBACXa,gBAAgB;;;;;AAM5B"}

package/dist/FormatControls/UnitSelector.d.ts

@@ -1,5 +1,5 @@
-import { ReactElement } from 'react';
-import { FormatOptions } from '../model';
+import type { ReactElement } from 'react';
+import type { FormatOptions } from '../model';
 export interface UnitSelectorProps {
     value?: FormatOptions;
     onChange: (format: FormatOptions | undefined) => void;

package/dist/FormatControls/UnitSelector.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"UnitSelector.d.ts","sourceRoot":"","sources":["../../src/FormatControls/UnitSelector.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAErC,OAAO,EAAE,aAAa,EAA2B,MAAM,UAAU,CAAC;AAElE,MAAM,WAAW,iBAAiB;IAChC,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,QAAQ,EAAE,CAAC,MAAM,EAAE,aAAa,GAAG,SAAS,KAAK,IAAI,CAAC;IACtD,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAgBD,wBAAgB,YAAY,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAgB,EAAE,GAAG,UAAU,EAAE,EAAE,iBAAiB,GAAG,YAAY,CAqBlH"}
+{"version":3,"file":"UnitSelector.d.ts","sourceRoot":"","sources":["../../src/FormatControls/UnitSelector.tsx"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAE1C,OAAO,KAAK,EAAE,aAAa,EAAc,MAAM,UAAU,CAAC;AAI1D,MAAM,WAAW,iBAAiB;IAChC,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,QAAQ,EAAE,CAAC,MAAM,EAAE,aAAa,GAAG,SAAS,KAAK,IAAI,CAAC;IACtD,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAgBD,wBAAgB,YAAY,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAgB,EAAE,GAAG,UAAU,EAAE,EAAE,iBAAiB,GAAG,YAAY,CAgDlH"}

package/dist/FormatControls/UnitSelector.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 // Copyright The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
@@ -10,9 +11,10 @@
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-import { jsx as _jsx } from "react/jsx-runtime";
-import { SettingsAutocomplete } from '../SettingsAutocomplete';
-import { UNIT_CONFIG } from '../model';
+import { IconButton, InputAdornment, TextField } from "@mui/material";
+import ClearIcon from "mdi-material-ui/Close";
+import { UNIT_CONFIG } from "../model/index.js";
+import { SettingsAutocomplete } from "../SettingsAutocomplete/index.js";
 const KIND_OPTIONS = Object.entries(UNIT_CONFIG).map(([id, config])=>{
     return {
         ...config,
@@ -32,14 +34,41 @@ export function UnitSelector({ value, onChange, disabled = false, ...otherProps
         }
     };
     return /*#__PURE__*/ _jsx(SettingsAutocomplete, {
-        value: value ? {
-            id: value.unit || 'decimal',
+        value: {
+            id: value?.unit || 'decimal',
             ...unitConfig
-        } : null,
+        },
         options: KIND_OPTIONS,
         groupBy: (option)=>option.group ?? 'Decimal',
         onChange: handleChange,
         disabled: disabled,
+        disableClearable: true,
+        renderInput: ({ InputProps, ...params })=>/*#__PURE__*/ _jsx(TextField, {
+                ...params,
+                slotProps: {
+                    input: {
+                        ...InputProps,
+                        endAdornment: /*#__PURE__*/ _jsxs(_Fragment, {
+                            children: [
+                                InputProps.endAdornment,
+                                /*#__PURE__*/ _jsx(InputAdornment, {
+                                    position: "end",
+                                    children: /*#__PURE__*/ _jsx(IconButton, {
+                                        size: "small",
+                                        "aria-label": "clear unit",
+                                        onClick: ()=>onChange(undefined),
+                                        disabled: disabled,
+                                        tabIndex: -1,
+                                        children: /*#__PURE__*/ _jsx(ClearIcon, {
+                                            fontSize: "small"
+                                        })
+                                    })
+                                })
+                            ]
+                        })
+                    }
+                }
+            }),
         ...otherProps
     });
 }