@perses-dev/components 0.0.0-snapshot-scatter-chart-embed-8efdfab → 0.0.0-snapshot-explorer-plugin-c4a7621

package/dist/FormEditor/FormActions.js

@@ -0,0 +1,75 @@
+// Copyright 2024 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 { 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",
+        gap: 1,
+        sx: {
+            marginLeft: 'auto'
+        },
+        ...props,
+        children: action === 'read' ? /*#__PURE__*/ _jsxs(_Fragment, {
+            children: [
+                onActionChange && /*#__PURE__*/ _jsx(Button, {
+                    disabled: isReadonly,
+                    variant: "contained",
+                    onClick: ()=>onActionChange('update'),
+                    children: "Edit"
+                }),
+                onDelete && /*#__PURE__*/ _jsx(Button, {
+                    color: "error",
+                    disabled: isReadonly,
+                    variant: "outlined",
+                    onClick: onDelete,
+                    children: "Delete"
+                }),
+                onCancel && (onSubmit || onDelete) && /*#__PURE__*/ _jsx(Divider, {
+                    orientation: "vertical",
+                    flexItem: true,
+                    sx: {
+                        borderColor: (theme)=>theme.palette.grey['500'],
+                        '&.MuiDivider-root': {
+                            marginLeft: 2,
+                            marginRight: 1
+                        }
+                    }
+                }),
+                onCancel && /*#__PURE__*/ _jsx(Button, {
+                    color: "secondary",
+                    variant: "outlined",
+                    onClick: onCancel,
+                    children: cancelText
+                })
+            ]
+        }) : /*#__PURE__*/ _jsxs(_Fragment, {
+            children: [
+                onSubmit && /*#__PURE__*/ _jsx(Button, {
+                    variant: "contained",
+                    disabled: !isValid,
+                    onClick: onSubmit,
+                    children: submitText
+                }),
+                onCancel && /*#__PURE__*/ _jsx(Button, {
+                    color: "secondary",
+                    variant: "outlined",
+                    onClick: onCancel,
+                    children: cancelText
+                })
+            ]
+        })
+    });
+}
+
+//# sourceMappingURL=FormActions.js.map

package/dist/FormEditor/FormActions.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/FormEditor/FormActions.tsx"],"sourcesContent":["// Copyright 2024 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 { ReactElement } from 'react';\nimport { Action } from '@perses-dev/core';\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,oCAAoC;AACpC,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"}

package/dist/FormEditor/index.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/FormEditor/index.ts"],"names":[],"mappings":"AAaA,cAAc,eAAe,CAAC"}

package/dist/FormEditor/index.js

@@ -0,0 +1,15 @@
+// Copyright 2024 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.
+export * from './FormActions';
+
+//# sourceMappingURL=index.js.map

package/dist/FormEditor/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/FormEditor/index.ts"],"sourcesContent":["// Copyright 2024 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,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,cAAc,gBAAgB"}

package/dist/FormatControls/FormatControls.d.ts

@@ -1,9 +1,9 @@
-/// <reference types="react" />
 import { FormatOptions } from '@perses-dev/core';
+import { ReactElement } from 'react';
 export interface FormatControlsProps {
     value: FormatOptions;
     onChange: (unit: FormatOptions) => void;
     disabled?: boolean;
 }
-export declare function FormatControls({ value, onChange, disabled }: FormatControlsProps): JSX.Element;
+export declare function FormatControls({ value, onChange, disabled }: FormatControlsProps): ReactElement;
 //# sourceMappingURL=FormatControls.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"FormatControls.d.ts","sourceRoot":"","sources":["../../src/FormatControls/FormatControls.tsx"],"names":[],"mappings":";AAaA,OAAO,EAEL,aAAa,EAKd,MAAM,kBAAkB,CAAC;AAI1B,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;AA0BD,wBAAgB,cAAc,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAgB,EAAE,EAAE,mBAAmB,eAsExF"}
+{"version":3,"file":"FormatControls.d.ts","sourceRoot":"","sources":["../../src/FormatControls/FormatControls.tsx"],"names":[],"mappings":"AAaA,OAAO,EAEL,aAAa,EAKd,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAIrC,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;AA4BD,wBAAgB,cAAc,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAgB,EAAE,EAAE,mBAAmB,GAAG,YAAY,CA4EvG"}

package/dist/FormatControls/FormatControls.js

@@ -56,7 +56,7 @@ const DECIMAL_PLACES_OPTIONS = [
 function getOptionByDecimalPlaces(decimalPlaces) {
     return DECIMAL_PLACES_OPTIONS.find((o)=>o.decimalPlaces === decimalPlaces);
 }
-export function FormatControls({ value , onChange , disabled =false  }) {
+export function FormatControls({ value, onChange, disabled = false }) {
     const hasDecimalPlaces = isUnitWithDecimalPlaces(value);
     const hasShortValues = isUnitWithShortValues(value);
     const handleKindChange = (_, newValue)=>{
@@ -64,7 +64,7 @@ export function FormatControls({ value , onChange , disabled =false  }) {
             unit: newValue.id
         });
     };
-    const handleDecimalPlacesChange = (_, { decimalPlaces  })=>{
+    const handleDecimalPlacesChange = ({ decimalPlaces })=>{
         if (hasDecimalPlaces) {
             onChange({
                 ...value,
@@ -111,7 +111,7 @@ export function FormatControls({ value , onChange , disabled =false  }) {
                     value: getOptionByDecimalPlaces(value.decimalPlaces),
                     options: DECIMAL_PLACES_OPTIONS,
                     getOptionLabel: (o)=>o.label,
-                    onChange: handleDecimalPlacesChange,
+                    onChange: (_, value)=>handleDecimalPlacesChange(value),
                     disabled: !hasDecimalPlaces,
                     disableClearable: true
                 })

package/dist/FormatControls/FormatControls.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/FormatControls/FormatControls.tsx"],"sourcesContent":["// Copyright 2023 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';\nimport {\n  shouldShortenValues,\n  FormatOptions,\n  UNIT_CONFIG,\n  UnitConfig,\n  isUnitWithDecimalPlaces,\n  isUnitWithShortValues,\n} from '@perses-dev/core';\nimport { OptionsEditorControl } from '../OptionsEditorLayout';\nimport { SettingsAutocomplete } from '../SettingsAutocomplete';\n\nexport interface FormatControlsProps {\n  value: FormatOptions;\n  onChange: (unit: FormatOptions) => void;\n  disabled?: boolean;\n}\n\ntype AutocompleteUnitOption = UnitConfig & { id: FormatOptions['unit'] };\n\nconst KIND_OPTIONS: AutocompleteUnitOption[] = Object.entries(UNIT_CONFIG)\n  .map(([id, config]) => {\n    return {\n      id: id as FormatOptions['unit'],\n      ...config,\n    };\n  })\n  .filter((config) => !config.disableSelectorOption);\n\nconst DECIMAL_PLACES_OPTIONS = [\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(decimalPlaces?: number) {\n  return DECIMAL_PLACES_OPTIONS.find((o) => o.decimalPlaces === decimalPlaces);\n}\n\nexport function FormatControls({ value, onChange, disabled = false }: FormatControlsProps) {\n  const hasDecimalPlaces = isUnitWithDecimalPlaces(value);\n  const hasShortValues = isUnitWithShortValues(value);\n\n  const handleKindChange = (_: unknown, newValue: AutocompleteUnitOption) => {\n    onChange({\n      unit: newValue.id,\n    });\n  };\n\n  const handleDecimalPlacesChange = (_: unknown, { decimalPlaces }: { decimalPlaces: number | undefined }) => {\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  const unitConfig = UNIT_CONFIG[value.unit];\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={\n          <SettingsAutocomplete\n            value={{ id: value.unit, ...unitConfig }}\n            options={KIND_OPTIONS}\n            groupBy={(option) => option.group}\n            onChange={handleKindChange}\n            disableClearable\n            disabled={disabled}\n          ></SettingsAutocomplete>\n        }\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={handleDecimalPlacesChange}\n            disabled={!hasDecimalPlaces}\n            disableClearable\n          />\n        }\n      />\n    </>\n  );\n}\n"],"names":["Switch","shouldShortenValues","UNIT_CONFIG","isUnitWithDecimalPlaces","isUnitWithShortValues","OptionsEditorControl","SettingsAutocomplete","KIND_OPTIONS","Object","entries","map","id","config","filter","disableSelectorOption","DECIMAL_PLACES_OPTIONS","label","decimalPlaces","undefined","getOptionByDecimalPlaces","find","o","FormatControls","value","onChange","disabled","hasDecimalPlaces","hasShortValues","handleKindChange","_","newValue","unit","handleDecimalPlacesChange","handleShortValuesChange","checked","shortValues","unitConfig","control","options","groupBy","option","group","disableClearable","getOptionLabel"],"mappings":"AAAA,oCAAoC;AACpC,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;AACpD,SACEC,mBAAmB,EAEnBC,WAAW,EAEXC,uBAAuB,EACvBC,qBAAqB,QAChB,mBAAmB;AAC1B,SAASC,oBAAoB,QAAQ,yBAAyB;AAC9D,SAASC,oBAAoB,QAAQ,0BAA0B;AAU/D,MAAMC,eAAyCC,OAAOC,QAAQP,aAC3DQ,IAAI,CAAC,CAACC,IAAIC,OAAO;IAChB,OAAO;QACLD,IAAIA;QACJ,GAAGC,MAAM;IACX;AACF,GACCC,OAAO,CAACD,SAAW,CAACA,OAAOE;AAE9B,MAAMC,yBAAyB;IAC7B;QAAEJ,IAAI;QAAWK,OAAO;QAAWC,eAAeC;IAAU;IAC5D;QAAEP,IAAI;QAAKK,OAAO;QAAKC,eAAe;IAAE;IACxC;QAAEN,IAAI;QAAKK,OAAO;QAAKC,eAAe;IAAE;IACxC;QAAEN,IAAI;QAAKK,OAAO;QAAKC,eAAe;IAAE;IACxC;QAAEN,IAAI;QAAKK,OAAO;QAAKC,eAAe;IAAE;IACxC;QAAEN,IAAI;QAAKK,OAAO;QAAKC,eAAe;IAAE;CACzC;AAED,SAASE,yBAAyBF,aAAsB;IACtD,OAAOF,uBAAuBK,KAAK,CAACC,IAAMA,EAAEJ,kBAAkBA;AAChE;AAEA,OAAO,SAASK,eAAe,EAAEC,MAAK,EAAEC,SAAQ,EAAEC,UAAW,MAAK,EAAuB;IACvF,MAAMC,mBAAmBvB,wBAAwBoB;IACjD,MAAMI,iBAAiBvB,sBAAsBmB;IAE7C,MAAMK,mBAAmB,CAACC,GAAYC;QACpCN,SAAS;YACPO,MAAMD,SAASnB;QACjB;IACF;IAEA,MAAMqB,4BAA4B,CAACH,GAAY,EAAEZ,cAAa,EAAyC;QACrG,IAAIS,kBAAkB;YACpBF,SAAS;gBACP,GAAGD,KAAK;gBACRN,eAAeA;YACjB;QACF;IACF;IAEA,MAAMgB,0BAAmD,CAACJ,GAAYK;QACpE,IAAIP,gBAAgB;YAClBH,SAAS;gBACP,GAAGD,KAAK;gBACRY,aAAaD;YACf;QACF;IACF;IAEA,MAAME,aAAalC,WAAW,CAACqB,MAAMQ,KAAK;IAE1C,qBACE;;0BACE,KAAC1B;gBACCW,OAAM;gBACNqB,uBACE,KAACrC;oBACCkC,SAASP,iBAAiB1B,oBAAoBsB,MAAMY,eAAe;oBACnEX,UAAUS;oBACVR,UAAU,CAACE;;;0BAIjB,KAACtB;gBACCW,OAAM;gBACNqB,uBACE,KAAC/B;oBACCiB,OAAO;wBAAEZ,IAAIY,MAAMQ;wBAAM,GAAGK,UAAU;oBAAC;oBACvCE,SAAS/B;oBACTgC,SAAS,CAACC,SAAWA,OAAOC;oBAC5BjB,UAAUI;oBACVc,gBAAgB;oBAChBjB,UAAUA;;;0BAIhB,KAACpB;gBACCW,OAAM;gBACNqB,uBACE,KAAC/B;oBACCiB,OAAOJ,yBAAyBI,MAAMN;oBACtCqB,SAASvB;oBACT4B,gBAAgB,CAACtB,IAAMA,EAAEL;oBACzBQ,UAAUQ;oBACVP,UAAU,CAACC;oBACXgB,gBAAgB;;;;;AAM5B"}
+{"version":3,"sources":["../../src/FormatControls/FormatControls.tsx"],"sourcesContent":["// Copyright 2023 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';\nimport {\n  shouldShortenValues,\n  FormatOptions,\n  UNIT_CONFIG,\n  UnitConfig,\n  isUnitWithDecimalPlaces,\n  isUnitWithShortValues,\n} from '@perses-dev/core';\nimport { ReactElement } from 'react';\nimport { OptionsEditorControl } from '../OptionsEditorLayout';\nimport { SettingsAutocomplete } from '../SettingsAutocomplete';\n\nexport interface FormatControlsProps {\n  value: FormatOptions;\n  onChange: (unit: FormatOptions) => void;\n  disabled?: boolean;\n}\n\ntype AutocompleteUnitOption = UnitConfig & { id: FormatOptions['unit'] };\n\nconst KIND_OPTIONS: AutocompleteUnitOption[] = Object.entries(UNIT_CONFIG)\n  .map(([id, config]) => {\n    return {\n      id: id as FormatOptions['unit'],\n      ...config,\n    };\n  })\n  .filter((config) => !config.disableSelectorOption);\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 handleKindChange = (_: unknown, newValue: AutocompleteUnitOption): void => {\n    onChange({\n      unit: newValue.id,\n    });\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  const unitConfig = UNIT_CONFIG[value.unit];\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={\n          <SettingsAutocomplete\n            value={{ id: value.unit, ...unitConfig }}\n            options={KIND_OPTIONS}\n            groupBy={(option) => option.group}\n            onChange={handleKindChange}\n            disableClearable\n            disabled={disabled}\n          />\n        }\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","shouldShortenValues","UNIT_CONFIG","isUnitWithDecimalPlaces","isUnitWithShortValues","OptionsEditorControl","SettingsAutocomplete","KIND_OPTIONS","Object","entries","map","id","config","filter","disableSelectorOption","DECIMAL_PLACES_OPTIONS","label","decimalPlaces","undefined","getOptionByDecimalPlaces","find","o","FormatControls","value","onChange","disabled","hasDecimalPlaces","hasShortValues","handleKindChange","_","newValue","unit","handleDecimalPlacesChange","handleShortValuesChange","checked","shortValues","unitConfig","control","options","groupBy","option","group","disableClearable","getOptionLabel"],"mappings":"AAAA,oCAAoC;AACpC,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;AACpD,SACEC,mBAAmB,EAEnBC,WAAW,EAEXC,uBAAuB,EACvBC,qBAAqB,QAChB,mBAAmB;AAE1B,SAASC,oBAAoB,QAAQ,yBAAyB;AAC9D,SAASC,oBAAoB,QAAQ,0BAA0B;AAU/D,MAAMC,eAAyCC,OAAOC,OAAO,CAACP,aAC3DQ,GAAG,CAAC,CAAC,CAACC,IAAIC,OAAO;IAChB,OAAO;QACLD,IAAIA;QACJ,GAAGC,MAAM;IACX;AACF,GACCC,MAAM,CAAC,CAACD,SAAW,CAACA,OAAOE,qBAAqB;AAEnD,MAAMC,yBAAuF;IAC3F;QAAEJ,IAAI;QAAWK,OAAO;QAAWC,eAAeC;IAAU;IAC5D;QAAEP,IAAI;QAAKK,OAAO;QAAKC,eAAe;IAAE;IACxC;QAAEN,IAAI;QAAKK,OAAO;QAAKC,eAAe;IAAE;IACxC;QAAEN,IAAI;QAAKK,OAAO;QAAKC,eAAe;IAAE;IACxC;QAAEN,IAAI;QAAKK,OAAO;QAAKC,eAAe;IAAE;IACxC;QAAEN,IAAI;QAAKK,OAAO;QAAKC,eAAe;IAAE;CACzC;AAED,SAASE,yBACPF,aAAsB;IAEtB,OAAOF,uBAAuBK,IAAI,CAAC,CAACC,IAAMA,EAAEJ,aAAa,KAAKA;AAChE;AAEA,OAAO,SAASK,eAAe,EAAEC,KAAK,EAAEC,QAAQ,EAAEC,WAAW,KAAK,EAAuB;IACvF,MAAMC,mBAAmBvB,wBAAwBoB;IACjD,MAAMI,iBAAiBvB,sBAAsBmB;IAE7C,MAAMK,mBAAmB,CAACC,GAAYC;QACpCN,SAAS;YACPO,MAAMD,SAASnB,EAAE;QACnB;IACF;IAEA,MAAMqB,4BAA4B,CAAC,EACjCf,aAAa,EAKd;QACC,IAAIS,kBAAkB;YACpBF,SAAS;gBACP,GAAGD,KAAK;gBACRN,eAAeA;YACjB;QACF;IACF;IAEA,MAAMgB,0BAAmD,CAACJ,GAAYK;QACpE,IAAIP,gBAAgB;YAClBH,SAAS;gBACP,GAAGD,KAAK;gBACRY,aAAaD;YACf;QACF;IACF;IAEA,MAAME,aAAalC,WAAW,CAACqB,MAAMQ,IAAI,CAAC;IAE1C,qBACE;;0BACE,KAAC1B;gBACCW,OAAM;gBACNqB,uBACE,KAACrC;oBACCkC,SAASP,iBAAiB1B,oBAAoBsB,MAAMY,WAAW,IAAI;oBACnEX,UAAUS;oBACVR,UAAU,CAACE;;;0BAIjB,KAACtB;gBACCW,OAAM;gBACNqB,uBACE,KAAC/B;oBACCiB,OAAO;wBAAEZ,IAAIY,MAAMQ,IAAI;wBAAE,GAAGK,UAAU;oBAAC;oBACvCE,SAAS/B;oBACTgC,SAAS,CAACC,SAAWA,OAAOC,KAAK;oBACjCjB,UAAUI;oBACVc,gBAAgB;oBAChBjB,UAAUA;;;0BAIhB,KAACpB;gBACCW,OAAM;gBACNqB,uBACE,KAAC/B;oBACCiB,OAAOJ,yBAAyBI,MAAMN,aAAa;oBACnDqB,SAASvB;oBACT4B,gBAAgB,CAACtB,IAAMA,EAAEL,KAAK;oBAC9BQ,UAAU,CAACK,GAAGN,QAAUS,0BAA0BT;oBAClDE,UAAU,CAACC;oBACXgB,gBAAgB;;;;;AAM5B"}

package/dist/GaugeChart/GaugeChart.d.ts

@@ -1,8 +1,8 @@
-/// <reference types="react" />
 import { FormatOptions } from '@perses-dev/core';
 import { GaugeSeriesOption } from 'echarts/charts';
-export declare type GaugeChartValue = number | null | undefined;
-export declare type GaugeSeries = {
+import { ReactElement } from 'react';
+export type GaugeChartValue = number | null | undefined;
+export type GaugeSeries = {
     value: GaugeChartValue;
     label: string;
 };
@@ -14,7 +14,7 @@ export interface GaugeChartProps {
     axisLine: GaugeSeriesOption['axisLine'];
     max?: number;
 }
-export declare function GaugeChart(props: GaugeChartProps): JSX.Element;
+export declare function GaugeChart(props: GaugeChartProps): ReactElement;
 /**
  * Responsive font size depending on number of characters, clamp used
  * to ensure size stays within given range

package/dist/GaugeChart/GaugeChart.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"GaugeChart.d.ts","sourceRoot":"","sources":["../../src/GaugeChart/GaugeChart.tsx"],"names":[],"mappings":";AAaA,OAAO,EAA4B,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAE3E,OAAO,EAAmC,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAapF,oBAAY,eAAe,GAAG,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;AAExD,oBAAY,WAAW,GAAG;IACxB,KAAK,EAAE,eAAe,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,WAAW,CAAC;IAClB,MAAM,EAAE,aAAa,CAAC;IACtB,QAAQ,EAAE,iBAAiB,CAAC,UAAU,CAAC,CAAC;IACxC,GAAG,CAAC,EAAE,MAAM,CAAC;CACd;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,eAuJhD;AAED;;;GAGG;AACH,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,EAAE,MAAM,EAAE,aAAa,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,UAQhH"}
+{"version":3,"file":"GaugeChart.d.ts","sourceRoot":"","sources":["../../src/GaugeChart/GaugeChart.tsx"],"names":[],"mappings":"AAaA,OAAO,EAA4B,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAE3E,OAAO,EAAmC,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAGpF,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAWrC,MAAM,MAAM,eAAe,GAAG,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;AAExD,MAAM,MAAM,WAAW,GAAG;IACxB,KAAK,EAAE,eAAe,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,WAAW,CAAC;IAClB,MAAM,EAAE,aAAa,CAAC;IACtB,QAAQ,EAAE,iBAAiB,CAAC,UAAU,CAAC,CAAC;IACxC,GAAG,CAAC,EAAE,MAAM,CAAC;CACd;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,GAAG,YAAY,CAuJ/D;AAED;;;GAGG;AACH,wBAAgB,sBAAsB,CACpC,KAAK,EAAE,MAAM,GAAG,IAAI,EACpB,MAAM,EAAE,aAAa,EACrB,KAAK,EAAE,MAAM,EACb,MAAM,EAAE,MAAM,GACb,MAAM,CAQR"}

package/dist/GaugeChart/GaugeChart.js

@@ -16,7 +16,7 @@ import { use } from 'echarts/core';
 import { GaugeChart as EChartsGaugeChart } from 'echarts/charts';
 import { GridComponent, TitleComponent, TooltipComponent } from 'echarts/components';
 import { CanvasRenderer } from 'echarts/renderers';
-import { useChartsTheme } from '../context/ChartsProvider';
+import { useChartsTheme } from '../context';
 import { EChart } from '../EChart';
 use([
     EChartsGaugeChart,
@@ -29,15 +29,13 @@ const PROGRESS_WIDTH = 16;
 // adjusts when to show pointer icon
 const GAUGE_SMALL_BREAKPOINT = 170;
 export function GaugeChart(props) {
-    const { width , height , data , format , axisLine , max  } = props;
+    const { width, height, data, format, axisLine, max } = props;
     const chartsTheme = useChartsTheme();
     // useDeepMemo ensures value size util does not rerun everytime you hover on the chart
     const option = useDeepMemo(()=>{
-        var _chartsTheme_echartsTheme_textStyle;
         if (data.value === undefined) return chartsTheme.noDataOption;
         // adjusts fontSize depending on number of characters
         const valueSizeClamp = getResponsiveValueSize(data.value, format, width, height);
-        var _chartsTheme_echartsTheme_textStyle_color;
         return {
             title: {
                 show: false
@@ -73,7 +71,7 @@ export function GaugeChart(props) {
                             color: [
                                 [
                                     1,
-                                    '#e1e5e9'
+                                    'rgba(127,127,127,0.35)'
                                 ]
                             ],
                             width: PROGRESS_WIDTH
@@ -167,7 +165,7 @@ export function GaugeChart(props) {
                             // https://echarts.apache.org/en/option.html#series-gauge.data.title
                             title: {
                                 show: true,
-                                color: (_chartsTheme_echartsTheme_textStyle_color = (_chartsTheme_echartsTheme_textStyle = chartsTheme.echartsTheme.textStyle) === null || _chartsTheme_echartsTheme_textStyle === void 0 ? void 0 : _chartsTheme_echartsTheme_textStyle.color) !== null && _chartsTheme_echartsTheme_textStyle_color !== void 0 ? _chartsTheme_echartsTheme_textStyle_color : 'inherit',
+                                color: chartsTheme.echartsTheme.textStyle?.color ?? 'inherit',
                                 offsetCenter: [
                                     0,
                                     '55%'
@@ -208,8 +206,7 @@ export function GaugeChart(props) {
     const MAX_SIZE = 24;
     const SIZE_MULTIPLIER = 0.7;
     const formattedValue = typeof value === 'number' ? formatValue(value, format) : `${value}`;
-    var _formattedValue_length;
-    const valueCharacters = (_formattedValue_length = formattedValue.length) !== null && _formattedValue_length !== void 0 ? _formattedValue_length : 2;
+    const valueCharacters = formattedValue.length ?? 2;
     const valueSize = Math.min(width, height) / valueCharacters * SIZE_MULTIPLIER;
     return `clamp(${MIN_SIZE}px, ${valueSize}px, ${MAX_SIZE}px)`;
 }

package/dist/GaugeChart/GaugeChart.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/GaugeChart/GaugeChart.tsx"],"sourcesContent":["// Copyright 2023 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 { formatValue, useDeepMemo, FormatOptions } from '@perses-dev/core';\nimport { use, EChartsCoreOption } from 'echarts/core';\nimport { GaugeChart as EChartsGaugeChart, GaugeSeriesOption } from 'echarts/charts';\nimport { GridComponent, TitleComponent, TooltipComponent } from 'echarts/components';\nimport { CanvasRenderer } from 'echarts/renderers';\nimport { useChartsTheme } from '../context/ChartsProvider';\nimport { EChart } from '../EChart';\n\nuse([EChartsGaugeChart, GridComponent, TitleComponent, TooltipComponent, CanvasRenderer]);\n\nconst PROGRESS_WIDTH = 16;\n\n// adjusts when to show pointer icon\nconst GAUGE_SMALL_BREAKPOINT = 170;\n\nexport type GaugeChartValue = number | null | undefined;\n\nexport type GaugeSeries = {\n  value: GaugeChartValue;\n  label: string;\n};\n\nexport interface GaugeChartProps {\n  width: number;\n  height: number;\n  data: GaugeSeries;\n  format: FormatOptions;\n  axisLine: GaugeSeriesOption['axisLine'];\n  max?: number;\n}\n\nexport function GaugeChart(props: GaugeChartProps) {\n  const { width, height, data, format, axisLine, max } = props;\n  const chartsTheme = useChartsTheme();\n\n  // useDeepMemo ensures value size util does not rerun everytime you hover on the chart\n  const option: EChartsCoreOption = useDeepMemo(() => {\n    if (data.value === undefined) return chartsTheme.noDataOption;\n\n    // adjusts fontSize depending on number of characters\n    const valueSizeClamp = getResponsiveValueSize(data.value, format, width, height);\n\n    return {\n      title: {\n        show: false,\n      },\n      tooltip: {\n        show: false,\n      },\n      series: [\n        {\n          type: 'gauge',\n          center: ['50%', '65%'],\n          radius: '86%',\n          startAngle: 200,\n          endAngle: -20,\n          min: 0,\n          max,\n          silent: true,\n          progress: {\n            show: true,\n            width: PROGRESS_WIDTH,\n            itemStyle: {\n              color: 'auto',\n            },\n          },\n          pointer: {\n            show: false,\n          },\n          axisLine: {\n            lineStyle: {\n              color: [[1, '#e1e5e9']], // TODO (sjcobb): use future chart theme colors\n              width: PROGRESS_WIDTH,\n            },\n          },\n          axisTick: {\n            show: false,\n            distance: 0,\n          },\n          splitLine: {\n            show: false,\n          },\n          axisLabel: {\n            show: false,\n            distance: -18,\n            color: '#999',\n            fontSize: 12,\n          },\n          anchor: {\n            show: false,\n          },\n          title: {\n            show: false,\n          },\n          detail: {\n            show: false,\n          },\n          data: [\n            {\n              value: data.value,\n            },\n          ],\n        },\n        {\n          type: 'gauge',\n          center: ['50%', '65%'],\n          radius: '100%',\n          startAngle: 200,\n          endAngle: -20,\n          min: 0,\n          max,\n          pointer: {\n            show: true,\n            // pointer hidden for small panels, path taken from ex: https://echarts.apache.org/examples/en/editor.html?c=gauge-grade\n            icon: width > GAUGE_SMALL_BREAKPOINT ? 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z' : 'none',\n            length: 10,\n            width: 5,\n            offsetCenter: [0, '-49%'],\n            itemStyle: {\n              color: 'auto',\n            },\n          },\n          axisLine,\n          axisTick: {\n            show: false,\n          },\n          splitLine: {\n            show: false,\n          },\n          axisLabel: {\n            show: false,\n          },\n          detail: {\n            show: true,\n            width: '60%',\n            borderRadius: 8,\n            offsetCenter: [0, '-9%'],\n            color: 'inherit', // allows value color to match active threshold color\n            fontSize: valueSizeClamp,\n            formatter:\n              data.value === null\n                ? // We use a different function when we *know* the value is null\n                  // at this level because the `formatter` function argument is `NaN`\n                  // when the value is `null`, making it difficult to differentiate\n                  // `null` from a true `NaN` case.\n                  () => 'null'\n                : (value: number) => {\n                    return formatValue(value, format);\n                  },\n          },\n          data: [\n            {\n              value: data.value,\n              name: data.label,\n              // TODO: new UX for series names, create separate React component or reuse ListLegendItem\n              // https://echarts.apache.org/en/option.html#series-gauge.data.title\n              title: {\n                show: true,\n                color: chartsTheme.echartsTheme.textStyle?.color ?? 'inherit', // series name font color\n                offsetCenter: [0, '55%'],\n                overflow: 'truncate',\n                fontSize: 12,\n                width: width * 0.8,\n              },\n            },\n          ],\n        },\n      ],\n    };\n  }, [data, width, height, chartsTheme, format, axisLine, max]);\n\n  return (\n    <EChart\n      sx={{\n        width: width,\n        height: height,\n        padding: `${chartsTheme.container.padding.default}px`,\n      }}\n      option={option}\n      theme={chartsTheme.echartsTheme}\n    />\n  );\n}\n\n/**\n * Responsive font size depending on number of characters, clamp used\n * to ensure size stays within given range\n */\nexport function getResponsiveValueSize(value: number | null, format: FormatOptions, width: number, height: number) {\n  const MIN_SIZE = 3;\n  const MAX_SIZE = 24;\n  const SIZE_MULTIPLIER = 0.7;\n  const formattedValue = typeof value === 'number' ? formatValue(value, format) : `${value}`;\n  const valueCharacters = formattedValue.length ?? 2;\n  const valueSize = (Math.min(width, height) / valueCharacters) * SIZE_MULTIPLIER;\n  return `clamp(${MIN_SIZE}px, ${valueSize}px, ${MAX_SIZE}px)`;\n}\n"],"names":["formatValue","useDeepMemo","use","GaugeChart","EChartsGaugeChart","GridComponent","TitleComponent","TooltipComponent","CanvasRenderer","useChartsTheme","EChart","PROGRESS_WIDTH","GAUGE_SMALL_BREAKPOINT","props","width","height","data","format","axisLine","max","chartsTheme","option","value","undefined","noDataOption","valueSizeClamp","getResponsiveValueSize","title","show","tooltip","series","type","center","radius","startAngle","endAngle","min","silent","progress","itemStyle","color","pointer","lineStyle","axisTick","distance","splitLine","axisLabel","fontSize","anchor","detail","icon","length","offsetCenter","borderRadius","formatter","name","label","echartsTheme","textStyle","overflow","sx","padding","container","default","theme","MIN_SIZE","MAX_SIZE","SIZE_MULTIPLIER","formattedValue","valueCharacters","valueSize","Math"],"mappings":"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"}
+{"version":3,"sources":["../../src/GaugeChart/GaugeChart.tsx"],"sourcesContent":["// Copyright 2023 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 { formatValue, useDeepMemo, FormatOptions } from '@perses-dev/core';\nimport { use, EChartsCoreOption } from 'echarts/core';\nimport { GaugeChart as EChartsGaugeChart, GaugeSeriesOption } from 'echarts/charts';\nimport { GridComponent, TitleComponent, TooltipComponent } from 'echarts/components';\nimport { CanvasRenderer } from 'echarts/renderers';\nimport { ReactElement } from 'react';\nimport { useChartsTheme } from '../context';\nimport { EChart } from '../EChart';\n\nuse([EChartsGaugeChart, GridComponent, TitleComponent, TooltipComponent, CanvasRenderer]);\n\nconst PROGRESS_WIDTH = 16;\n\n// adjusts when to show pointer icon\nconst GAUGE_SMALL_BREAKPOINT = 170;\n\nexport type GaugeChartValue = number | null | undefined;\n\nexport type GaugeSeries = {\n  value: GaugeChartValue;\n  label: string;\n};\n\nexport interface GaugeChartProps {\n  width: number;\n  height: number;\n  data: GaugeSeries;\n  format: FormatOptions;\n  axisLine: GaugeSeriesOption['axisLine'];\n  max?: number;\n}\n\nexport function GaugeChart(props: GaugeChartProps): ReactElement {\n  const { width, height, data, format, axisLine, max } = props;\n  const chartsTheme = useChartsTheme();\n\n  // useDeepMemo ensures value size util does not rerun everytime you hover on the chart\n  const option: EChartsCoreOption = useDeepMemo(() => {\n    if (data.value === undefined) return chartsTheme.noDataOption;\n\n    // adjusts fontSize depending on number of characters\n    const valueSizeClamp = getResponsiveValueSize(data.value, format, width, height);\n\n    return {\n      title: {\n        show: false,\n      },\n      tooltip: {\n        show: false,\n      },\n      series: [\n        {\n          type: 'gauge',\n          center: ['50%', '65%'],\n          radius: '86%',\n          startAngle: 200,\n          endAngle: -20,\n          min: 0,\n          max,\n          silent: true,\n          progress: {\n            show: true,\n            width: PROGRESS_WIDTH,\n            itemStyle: {\n              color: 'auto',\n            },\n          },\n          pointer: {\n            show: false,\n          },\n          axisLine: {\n            lineStyle: {\n              color: [[1, 'rgba(127,127,127,0.35)']], // TODO (sjcobb): use future chart theme colors\n              width: PROGRESS_WIDTH,\n            },\n          },\n          axisTick: {\n            show: false,\n            distance: 0,\n          },\n          splitLine: {\n            show: false,\n          },\n          axisLabel: {\n            show: false,\n            distance: -18,\n            color: '#999',\n            fontSize: 12,\n          },\n          anchor: {\n            show: false,\n          },\n          title: {\n            show: false,\n          },\n          detail: {\n            show: false,\n          },\n          data: [\n            {\n              value: data.value,\n            },\n          ],\n        },\n        {\n          type: 'gauge',\n          center: ['50%', '65%'],\n          radius: '100%',\n          startAngle: 200,\n          endAngle: -20,\n          min: 0,\n          max,\n          pointer: {\n            show: true,\n            // pointer hidden for small panels, path taken from ex: https://echarts.apache.org/examples/en/editor.html?c=gauge-grade\n            icon: width > GAUGE_SMALL_BREAKPOINT ? 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z' : 'none',\n            length: 10,\n            width: 5,\n            offsetCenter: [0, '-49%'],\n            itemStyle: {\n              color: 'auto',\n            },\n          },\n          axisLine,\n          axisTick: {\n            show: false,\n          },\n          splitLine: {\n            show: false,\n          },\n          axisLabel: {\n            show: false,\n          },\n          detail: {\n            show: true,\n            width: '60%',\n            borderRadius: 8,\n            offsetCenter: [0, '-9%'],\n            color: 'inherit', // allows value color to match active threshold color\n            fontSize: valueSizeClamp,\n            formatter:\n              data.value === null\n                ? // We use a different function when we *know* the value is null\n                  // at this level because the `formatter` function argument is `NaN`\n                  // when the value is `null`, making it difficult to differentiate\n                  // `null` from a true `NaN` case.\n                  (): string => 'null'\n                : (value: number): string | undefined => {\n                    return formatValue(value, format);\n                  },\n          },\n          data: [\n            {\n              value: data.value,\n              name: data.label,\n              // TODO: new UX for series names, create separate React component or reuse ListLegendItem\n              // https://echarts.apache.org/en/option.html#series-gauge.data.title\n              title: {\n                show: true,\n                color: chartsTheme.echartsTheme.textStyle?.color ?? 'inherit', // series name font color\n                offsetCenter: [0, '55%'],\n                overflow: 'truncate',\n                fontSize: 12,\n                width: width * 0.8,\n              },\n            },\n          ],\n        },\n      ],\n    };\n  }, [data, width, height, chartsTheme, format, axisLine, max]);\n\n  return (\n    <EChart\n      sx={{\n        width: width,\n        height: height,\n        padding: `${chartsTheme.container.padding.default}px`,\n      }}\n      option={option}\n      theme={chartsTheme.echartsTheme}\n    />\n  );\n}\n\n/**\n * Responsive font size depending on number of characters, clamp used\n * to ensure size stays within given range\n */\nexport function getResponsiveValueSize(\n  value: number | null,\n  format: FormatOptions,\n  width: number,\n  height: number\n): string {\n  const MIN_SIZE = 3;\n  const MAX_SIZE = 24;\n  const SIZE_MULTIPLIER = 0.7;\n  const formattedValue = typeof value === 'number' ? formatValue(value, format) : `${value}`;\n  const valueCharacters = formattedValue.length ?? 2;\n  const valueSize = (Math.min(width, height) / valueCharacters) * SIZE_MULTIPLIER;\n  return `clamp(${MIN_SIZE}px, ${valueSize}px, ${MAX_SIZE}px)`;\n}\n"],"names":["formatValue","useDeepMemo","use","GaugeChart","EChartsGaugeChart","GridComponent","TitleComponent","TooltipComponent","CanvasRenderer","useChartsTheme","EChart","PROGRESS_WIDTH","GAUGE_SMALL_BREAKPOINT","props","width","height","data","format","axisLine","max","chartsTheme","option","value","undefined","noDataOption","valueSizeClamp","getResponsiveValueSize","title","show","tooltip","series","type","center","radius","startAngle","endAngle","min","silent","progress","itemStyle","color","pointer","lineStyle","axisTick","distance","splitLine","axisLabel","fontSize","anchor","detail","icon","length","offsetCenter","borderRadius","formatter","name","label","echartsTheme","textStyle","overflow","sx","padding","container","default","theme","MIN_SIZE","MAX_SIZE","SIZE_MULTIPLIER","formattedValue","valueCharacters","valueSize","Math"],"mappings":"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"}

package/dist/InfoTooltip/InfoTooltip.d.ts

@@ -1,14 +1,14 @@
-import React from 'react';
-export declare type TooltipPlacement = 'top' | 'left' | 'right' | 'bottom';
+import { ReactElement, ReactNode } from 'react';
+export type TooltipPlacement = 'top' | 'left' | 'right' | 'bottom';
 interface InfoTooltipProps {
     description: string;
-    children: React.ReactNode;
+    children: ReactNode;
     id?: string;
     title?: string;
     placement?: TooltipPlacement;
     enterDelay?: number;
     enterNextDelay?: number;
 }
-export declare const InfoTooltip: ({ id, title, description, placement, children, enterDelay, enterNextDelay, }: InfoTooltipProps) => JSX.Element;
+export declare const InfoTooltip: ({ id, title, description, placement, children, enterDelay, enterNextDelay, }: InfoTooltipProps) => ReactElement;
 export {};
 //# sourceMappingURL=InfoTooltip.d.ts.map

package/dist/InfoTooltip/InfoTooltip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"InfoTooltip.d.ts","sourceRoot":"","sources":["../../src/InfoTooltip/InfoTooltip.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,MAAM,OAAO,CAAC;AAS1B,oBAAY,gBAAgB,GAAG,KAAK,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC;AAEnE,UAAU,gBAAgB;IACxB,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,gBAAgB,CAAC;IAC7B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED,eAAO,MAAM,WAAW,iFAQrB,gBAAgB,gBAqBlB,CAAC"}
+{"version":3,"file":"InfoTooltip.d.ts","sourceRoot":"","sources":["../../src/InfoTooltip/InfoTooltip.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAShD,MAAM,MAAM,gBAAgB,GAAG,KAAK,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC;AAEnE,UAAU,gBAAgB;IACxB,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,SAAS,CAAC;IACpB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,gBAAgB,CAAC;IAC7B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED,eAAO,MAAM,WAAW,iFAQrB,gBAAgB,KAAG,YAqBrB,CAAC"}

package/dist/InfoTooltip/InfoTooltip.js

@@ -11,9 +11,8 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import React from 'react';
 import { styled, Tooltip as MuiTooltip, tooltipClasses, Typography } from '@mui/material';
-export const InfoTooltip = ({ id , title , description , placement , children , enterDelay , enterNextDelay  })=>{
+export const InfoTooltip = ({ id, title, description, placement, children, enterDelay, enterNextDelay })=>{
     // Wrap children in a span to cover the following use cases:
     //  - Disabled buttons. MUI console.errors on putting these inside a tooltip.
     //  - Non-element tooltip children (e.g. text). The tooltip needs something that
@@ -26,17 +25,17 @@ export const InfoTooltip = ({ id , title , description , placement , children ,
     return /*#__PURE__*/ _jsx(StyledTooltip, {
         arrow: true,
         id: id,
-        placement: placement !== null && placement !== void 0 ? placement : 'top',
+        placement: placement ?? 'top',
         title: /*#__PURE__*/ _jsx(TooltipContent, {
             title: title,
             description: description
         }),
-        enterDelay: enterDelay !== null && enterDelay !== void 0 ? enterDelay : 500,
-        enterNextDelay: enterNextDelay !== null && enterNextDelay !== void 0 ? enterNextDelay : 500,
+        enterDelay: enterDelay ?? 500,
+        enterNextDelay: enterNextDelay ?? 500,
         children: wrappedChildren
     });
 };
-const TooltipContent = ({ title , description  })=>{
+const TooltipContent = ({ title, description })=>{
     return /*#__PURE__*/ _jsxs(_Fragment, {
         children: [
             title && /*#__PURE__*/ _jsx(Typography, {
@@ -57,12 +56,12 @@ const TooltipContent = ({ title , description  })=>{
         ]
     });
 };
-const StyledTooltip = styled(({ className , ...props })=>/*#__PURE__*/ _jsx(MuiTooltip, {
+const StyledTooltip = styled(({ className, ...props })=>/*#__PURE__*/ _jsx(MuiTooltip, {
         ...props,
         classes: {
             popper: className
         }
-    }))(({ theme  })=>({
+    }))(({ theme })=>({
         [`& .${tooltipClasses.tooltip}`]: {
             backgroundColor: theme.palette.background.tooltip,
             color: theme.palette.text.primary,

package/dist/InfoTooltip/InfoTooltip.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/InfoTooltip/InfoTooltip.tsx"],"sourcesContent":["// Copyright 2023 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 React from 'react';\nimport {\n  styled,\n  TooltipProps as MuiTooltipProps,\n  Tooltip as MuiTooltip,\n  tooltipClasses,\n  Typography,\n} from '@mui/material';\n\nexport type TooltipPlacement = 'top' | 'left' | 'right' | 'bottom';\n\ninterface InfoTooltipProps {\n  description: string;\n  children: React.ReactNode;\n  id?: string;\n  title?: string;\n  placement?: TooltipPlacement;\n  enterDelay?: number; // default is 500ms\n  enterNextDelay?: number; // default is 500ms\n}\n\nexport const InfoTooltip = ({\n  id,\n  title,\n  description,\n  placement,\n  children,\n  enterDelay,\n  enterNextDelay,\n}: InfoTooltipProps) => {\n  // Wrap children in a span to cover the following use cases:\n  //  - Disabled buttons. MUI console.errors on putting these inside a tooltip.\n  //  - Non-element tooltip children (e.g. text). The tooltip needs something that\n  //   can have a ref as a child.\n  // We wrap in a `span` and not a `div` to minimize the impact on page layout\n  // and styles.\n  const wrappedChildren = <span>{children}</span>;\n\n  return (\n    <StyledTooltip\n      arrow\n      id={id}\n      placement={placement ?? 'top'}\n      title={<TooltipContent title={title} description={description} />}\n      enterDelay={enterDelay ?? 500}\n      enterNextDelay={enterNextDelay ?? 500}\n    >\n      {wrappedChildren}\n    </StyledTooltip>\n  );\n};\n\nconst TooltipContent = ({ title, description }: Pick<InfoTooltipProps, 'title' | 'description'>) => {\n  return (\n    <>\n      {title && (\n        <Typography\n          variant=\"body2\"\n          sx={(theme) => ({\n            color: theme.palette.text.primary,\n            fontWeight: theme.typography.fontWeightMedium,\n          })}\n        >\n          {title}\n        </Typography>\n      )}\n      <Typography\n        variant=\"caption\"\n        sx={(theme) => ({\n          color: theme.palette.text.primary,\n        })}\n      >\n        {description}\n      </Typography>\n    </>\n  );\n};\n\nconst StyledTooltip = styled(({ className, ...props }: MuiTooltipProps) => (\n  <MuiTooltip {...props} classes={{ popper: className }} />\n))(({ theme }) => ({\n  [`& .${tooltipClasses.tooltip}`]: {\n    backgroundColor: theme.palette.background.tooltip,\n    color: theme.palette.text.primary,\n    maxWidth: '300px',\n    padding: theme.spacing(1),\n    boxShadow: theme.shadows[1],\n  },\n  [`& .${tooltipClasses.arrow}`]: {\n    color: theme.palette.background.tooltip,\n  },\n}));\n"],"names":["React","styled","Tooltip","MuiTooltip","tooltipClasses","Typography","InfoTooltip","id","title","description","placement","children","enterDelay","enterNextDelay","wrappedChildren","span","StyledTooltip","arrow","TooltipContent","variant","sx","theme","color","palette","text","primary","fontWeight","typography","fontWeightMedium","className","props","classes","popper","tooltip","backgroundColor","background","maxWidth","padding","spacing","boxShadow","shadows"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,OAAOA,WAAW,QAAQ;AAC1B,SACEC,MAAM,EAENC,WAAWC,UAAU,EACrBC,cAAc,EACdC,UAAU,QACL,gBAAgB;AAcvB,OAAO,MAAMC,cAAc,CAAC,EAC1BC,GAAE,EACFC,MAAK,EACLC,YAAW,EACXC,UAAS,EACTC,SAAQ,EACRC,WAAU,EACVC,eAAc,EACG;IACjB,4DAA4D;IAC5D,6EAA6E;IAC7E,gFAAgF;IAChF,+BAA+B;IAC/B,4EAA4E;IAC5E,cAAc;IACd,MAAMC,gCAAkB,KAACC;kBAAMJ;;IAE/B,qBACE,KAACK;QACCC,KAAK;QACLV,IAAIA;QACJG,WAAWA,sBAAAA,uBAAAA,YAAa;QACxBF,qBAAO,KAACU;YAAeV,OAAOA;YAAOC,aAAaA;;QAClDG,YAAYA,uBAAAA,wBAAAA,aAAc;QAC1BC,gBAAgBA,2BAAAA,4BAAAA,iBAAkB;kBAEjCC;;AAGP,EAAE;AAEF,MAAMI,iBAAiB,CAAC,EAAEV,MAAK,EAAEC,YAAW,EAAmD;IAC7F,qBACE;;YACGD,uBACC,KAACH;gBACCc,SAAQ;gBACRC,IAAI,CAACC,QAAW,CAAA;wBACdC,OAAOD,MAAME,QAAQC,KAAKC;wBAC1BC,YAAYL,MAAMM,WAAWC;oBAC/B,CAAA;0BAECpB;;0BAGL,KAACH;gBACCc,SAAQ;gBACRC,IAAI,CAACC,QAAW,CAAA;wBACdC,OAAOD,MAAME,QAAQC,KAAKC;oBAC5B,CAAA;0BAEChB;;;;AAIT;AAEA,MAAMO,gBAAgBf,OAAO,CAAC,EAAE4B,UAAS,EAAE,GAAGC,OAAwB,iBACpE,KAAC3B;QAAY,GAAG2B,KAAK;QAAEC,SAAS;YAAEC,QAAQH;QAAU;QACnD,CAAC,EAAER,MAAK,EAAE,GAAM,CAAA;QACjB,CAAC,CAAC,GAAG,EAAEjB,eAAe6B,QAAQ,CAAC,CAAC,EAAE;YAChCC,iBAAiBb,MAAME,QAAQY,WAAWF;YAC1CX,OAAOD,MAAME,QAAQC,KAAKC;YAC1BW,UAAU;YACVC,SAAShB,MAAMiB,QAAQ;YACvBC,WAAWlB,MAAMmB,OAAO,CAAC,EAAE;QAC7B;QACA,CAAC,CAAC,GAAG,EAAEpC,eAAea,MAAM,CAAC,CAAC,EAAE;YAC9BK,OAAOD,MAAME,QAAQY,WAAWF;QAClC;IACF,CAAA"}
+{"version":3,"sources":["../../src/InfoTooltip/InfoTooltip.tsx"],"sourcesContent":["// Copyright 2023 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, ReactNode } from 'react';\nimport {\n  styled,\n  TooltipProps as MuiTooltipProps,\n  Tooltip as MuiTooltip,\n  tooltipClasses,\n  Typography,\n} from '@mui/material';\n\nexport type TooltipPlacement = 'top' | 'left' | 'right' | 'bottom';\n\ninterface InfoTooltipProps {\n  description: string;\n  children: ReactNode;\n  id?: string;\n  title?: string;\n  placement?: TooltipPlacement;\n  enterDelay?: number; // default is 500ms\n  enterNextDelay?: number; // default is 500ms\n}\n\nexport const InfoTooltip = ({\n  id,\n  title,\n  description,\n  placement,\n  children,\n  enterDelay,\n  enterNextDelay,\n}: InfoTooltipProps): ReactElement => {\n  // Wrap children in a span to cover the following use cases:\n  //  - Disabled buttons. MUI console.errors on putting these inside a tooltip.\n  //  - Non-element tooltip children (e.g. text). The tooltip needs something that\n  //   can have a ref as a child.\n  // We wrap in a `span` and not a `div` to minimize the impact on page layout\n  // and styles.\n  const wrappedChildren = <span>{children}</span>;\n\n  return (\n    <StyledTooltip\n      arrow\n      id={id}\n      placement={placement ?? 'top'}\n      title={<TooltipContent title={title} description={description} />}\n      enterDelay={enterDelay ?? 500}\n      enterNextDelay={enterNextDelay ?? 500}\n    >\n      {wrappedChildren}\n    </StyledTooltip>\n  );\n};\n\nconst TooltipContent = ({ title, description }: Pick<InfoTooltipProps, 'title' | 'description'>): ReactElement => {\n  return (\n    <>\n      {title && (\n        <Typography\n          variant=\"body2\"\n          sx={(theme) => ({\n            color: theme.palette.text.primary,\n            fontWeight: theme.typography.fontWeightMedium,\n          })}\n        >\n          {title}\n        </Typography>\n      )}\n      <Typography\n        variant=\"caption\"\n        sx={(theme) => ({\n          color: theme.palette.text.primary,\n        })}\n      >\n        {description}\n      </Typography>\n    </>\n  );\n};\n\nconst StyledTooltip = styled(({ className, ...props }: MuiTooltipProps) => (\n  <MuiTooltip {...props} classes={{ popper: className }} />\n))(({ theme }) => ({\n  [`& .${tooltipClasses.tooltip}`]: {\n    backgroundColor: theme.palette.background.tooltip,\n    color: theme.palette.text.primary,\n    maxWidth: '300px',\n    padding: theme.spacing(1),\n    boxShadow: theme.shadows[1],\n  },\n  [`& .${tooltipClasses.arrow}`]: {\n    color: theme.palette.background.tooltip,\n  },\n}));\n"],"names":["styled","Tooltip","MuiTooltip","tooltipClasses","Typography","InfoTooltip","id","title","description","placement","children","enterDelay","enterNextDelay","wrappedChildren","span","StyledTooltip","arrow","TooltipContent","variant","sx","theme","color","palette","text","primary","fontWeight","typography","fontWeightMedium","className","props","classes","popper","tooltip","backgroundColor","background","maxWidth","padding","spacing","boxShadow","shadows"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAGjC,SACEA,MAAM,EAENC,WAAWC,UAAU,EACrBC,cAAc,EACdC,UAAU,QACL,gBAAgB;AAcvB,OAAO,MAAMC,cAAc,CAAC,EAC1BC,EAAE,EACFC,KAAK,EACLC,WAAW,EACXC,SAAS,EACTC,QAAQ,EACRC,UAAU,EACVC,cAAc,EACG;IACjB,4DAA4D;IAC5D,6EAA6E;IAC7E,gFAAgF;IAChF,+BAA+B;IAC/B,4EAA4E;IAC5E,cAAc;IACd,MAAMC,gCAAkB,KAACC;kBAAMJ;;IAE/B,qBACE,KAACK;QACCC,KAAK;QACLV,IAAIA;QACJG,WAAWA,aAAa;QACxBF,qBAAO,KAACU;YAAeV,OAAOA;YAAOC,aAAaA;;QAClDG,YAAYA,cAAc;QAC1BC,gBAAgBA,kBAAkB;kBAEjCC;;AAGP,EAAE;AAEF,MAAMI,iBAAiB,CAAC,EAAEV,KAAK,EAAEC,WAAW,EAAmD;IAC7F,qBACE;;YACGD,uBACC,KAACH;gBACCc,SAAQ;gBACRC,IAAI,CAACC,QAAW,CAAA;wBACdC,OAAOD,MAAME,OAAO,CAACC,IAAI,CAACC,OAAO;wBACjCC,YAAYL,MAAMM,UAAU,CAACC,gBAAgB;oBAC/C,CAAA;0BAECpB;;0BAGL,KAACH;gBACCc,SAAQ;gBACRC,IAAI,CAACC,QAAW,CAAA;wBACdC,OAAOD,MAAME,OAAO,CAACC,IAAI,CAACC,OAAO;oBACnC,CAAA;0BAEChB;;;;AAIT;AAEA,MAAMO,gBAAgBf,OAAO,CAAC,EAAE4B,SAAS,EAAE,GAAGC,OAAwB,iBACpE,KAAC3B;QAAY,GAAG2B,KAAK;QAAEC,SAAS;YAAEC,QAAQH;QAAU;QACnD,CAAC,EAAER,KAAK,EAAE,GAAM,CAAA;QACjB,CAAC,CAAC,GAAG,EAAEjB,eAAe6B,OAAO,CAAC,CAAC,CAAC,EAAE;YAChCC,iBAAiBb,MAAME,OAAO,CAACY,UAAU,CAACF,OAAO;YACjDX,OAAOD,MAAME,OAAO,CAACC,IAAI,CAACC,OAAO;YACjCW,UAAU;YACVC,SAAShB,MAAMiB,OAAO,CAAC;YACvBC,WAAWlB,MAAMmB,OAAO,CAAC,EAAE;QAC7B;QACA,CAAC,CAAC,GAAG,EAAEpC,eAAea,KAAK,CAAC,CAAC,CAAC,EAAE;YAC9BK,OAAOD,MAAME,OAAO,CAACY,UAAU,CAACF,OAAO;QACzC;IACF,CAAA"}

package/dist/JSONEditor.d.ts

@@ -1,10 +1,10 @@
-/// <reference types="react" />
+import { ReactElement } from 'react';
 import { ReactCodeMirrorProps } from '@uiw/react-codemirror/src';
-declare type JSONEditorProps<T> = Omit<ReactCodeMirrorProps, 'onBlur' | 'theme' | 'extensions' | 'onChange' | 'value'> & {
+type JSONEditorProps<T> = Omit<ReactCodeMirrorProps, 'onBlur' | 'theme' | 'extensions' | 'onChange' | 'value'> & {
     value: T;
     placeholder?: string;
     onChange?: (next: string) => void;
 };
-export declare function JSONEditor<T>(props: JSONEditorProps<T>): JSX.Element;
+export declare function JSONEditor<T>(props: JSONEditorProps<T>): ReactElement;
 export {};
 //# sourceMappingURL=JSONEditor.d.ts.map

package/dist/JSONEditor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"JSONEditor.d.ts","sourceRoot":"","sources":["../src/JSONEditor.tsx"],"names":[],"mappings":";AAkBA,OAAO,EAAE,oBAAoB,EAAE,MAAM,2BAA2B,CAAC;AAEjE,aAAK,eAAe,CAAC,CAAC,IAAI,IAAI,CAAC,oBAAoB,EAAE,QAAQ,GAAG,OAAO,GAAG,YAAY,GAAG,UAAU,GAAG,OAAO,CAAC,GAAG;IAC/G,KAAK,EAAE,CAAC,CAAC;IACT,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC,CAAC;AAEF,wBAAgB,UAAU,CAAC,CAAC,EAAE,KAAK,EAAE,eAAe,CAAC,CAAC,CAAC,eAiCtD"}
+{"version":3,"file":"JSONEditor.d.ts","sourceRoot":"","sources":["../src/JSONEditor.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,YAAY,EAAuB,MAAM,OAAO,CAAC;AAK1D,OAAO,EAAE,oBAAoB,EAAE,MAAM,2BAA2B,CAAC;AAEjE,KAAK,eAAe,CAAC,CAAC,IAAI,IAAI,CAAC,oBAAoB,EAAE,QAAQ,GAAG,OAAO,GAAG,YAAY,GAAG,UAAU,GAAG,OAAO,CAAC,GAAG;IAC/G,KAAK,EAAE,CAAC,CAAC;IACT,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC,CAAC;AAEF,wBAAgB,UAAU,CAAC,CAAC,EAAE,KAAK,EAAE,eAAe,CAAC,CAAC,CAAC,GAAG,YAAY,CAiCrE"}

package/dist/JSONEditor.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/JSONEditor.tsx"],"sourcesContent":["// Copyright 2023 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 { useEffect, useState } from 'react';\nimport CodeMirror from '@uiw/react-codemirror';\nimport { json, jsonParseLinter } from '@codemirror/lang-json';\nimport { linter, lintGutter } from '@codemirror/lint';\nimport { useTheme } from '@mui/material';\nimport { ReactCodeMirrorProps } from '@uiw/react-codemirror/src';\n\ntype JSONEditorProps<T> = Omit<ReactCodeMirrorProps, 'onBlur' | 'theme' | 'extensions' | 'onChange' | 'value'> & {\n  value: T;\n  placeholder?: string;\n  onChange?: (next: string) => void;\n};\n\nexport function JSONEditor<T>(props: JSONEditorProps<T>) {\n  const theme = useTheme();\n  const isDarkMode = theme.palette.mode === 'dark';\n\n  const [value, setValue] = useState(() => JSON.stringify(props.value, null, 2));\n  const [lastProcessedValue, setLastProcessedValue] = useState<string>(value);\n\n  useEffect(() => {\n    setValue(JSON.stringify(props.value, null, 2));\n  }, [props.value]);\n\n  return (\n    <CodeMirror\n      {...props}\n      style={{ border: `1px solid ${theme.palette.divider}` }}\n      theme={isDarkMode ? 'dark' : 'light'}\n      extensions={[json(), linter(jsonParseLinter()), lintGutter()]}\n      value={value}\n      onChange={(newValue) => {\n        setValue(newValue);\n      }}\n      onBlur={() => {\n        // Don't trigger the provided onChange if the last processed value is equal to the current value.\n        // This prevents e.g CTRL+F to trigger value refresh downstream, which would cause the embedded\n        // find & replace interface to close immediately.\n        if (lastProcessedValue !== value && props.onChange !== undefined) {\n          props.onChange(value);\n          setLastProcessedValue(value);\n        }\n      }}\n      placeholder={props.placeholder}\n    />\n  );\n}\n"],"names":["useEffect","useState","CodeMirror","json","jsonParseLinter","linter","lintGutter","useTheme","JSONEditor","props","theme","isDarkMode","palette","mode","value","setValue","JSON","stringify","lastProcessedValue","setLastProcessedValue","style","border","divider","extensions","onChange","newValue","onBlur","undefined","placeholder"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAASA,SAAS,EAAEC,QAAQ,QAAQ,QAAQ;AAC5C,OAAOC,gBAAgB,wBAAwB;AAC/C,SAASC,IAAI,EAAEC,eAAe,QAAQ,wBAAwB;AAC9D,SAASC,MAAM,EAAEC,UAAU,QAAQ,mBAAmB;AACtD,SAASC,QAAQ,QAAQ,gBAAgB;AASzC,OAAO,SAASC,WAAcC,KAAyB;IACrD,MAAMC,QAAQH;IACd,MAAMI,aAAaD,MAAME,QAAQC,SAAS;IAE1C,MAAM,CAACC,OAAOC,SAAS,GAAGd,SAAS,IAAMe,KAAKC,UAAUR,MAAMK,OAAO,MAAM;IAC3E,MAAM,CAACI,oBAAoBC,sBAAsB,GAAGlB,SAAiBa;IAErEd,UAAU;QACRe,SAASC,KAAKC,UAAUR,MAAMK,OAAO,MAAM;IAC7C,GAAG;QAACL,MAAMK;KAAM;IAEhB,qBACE,KAACZ;QACE,GAAGO,KAAK;QACTW,OAAO;YAAEC,QAAQ,CAAC,UAAU,EAAEX,MAAME,QAAQU,QAAQ,CAAC;QAAC;QACtDZ,OAAOC,aAAa,SAAS;QAC7BY,YAAY;YAACpB;YAAQE,OAAOD;YAAoBE;SAAa;QAC7DQ,OAAOA;QACPU,UAAU,CAACC;YACTV,SAASU;QACX;QACAC,QAAQ;YACN,iGAAiG;YACjG,+FAA+F;YAC/F,iDAAiD;YACjD,IAAIR,uBAAuBJ,SAASL,MAAMe,aAAaG,WAAW;gBAChElB,MAAMe,SAASV;gBACfK,sBAAsBL;YACxB;QACF;QACAc,aAAanB,MAAMmB;;AAGzB"}
+{"version":3,"sources":["../src/JSONEditor.tsx"],"sourcesContent":["// Copyright 2023 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, useEffect, useState } from 'react';\nimport CodeMirror from '@uiw/react-codemirror';\nimport { json, jsonParseLinter } from '@codemirror/lang-json';\nimport { linter, lintGutter } from '@codemirror/lint';\nimport { useTheme } from '@mui/material';\nimport { ReactCodeMirrorProps } from '@uiw/react-codemirror/src';\n\ntype JSONEditorProps<T> = Omit<ReactCodeMirrorProps, 'onBlur' | 'theme' | 'extensions' | 'onChange' | 'value'> & {\n  value: T;\n  placeholder?: string;\n  onChange?: (next: string) => void;\n};\n\nexport function JSONEditor<T>(props: JSONEditorProps<T>): ReactElement {\n  const theme = useTheme();\n  const isDarkMode = theme.palette.mode === 'dark';\n\n  const [value, setValue] = useState(() => JSON.stringify(props.value, null, 2));\n  const [lastProcessedValue, setLastProcessedValue] = useState<string>(value);\n\n  useEffect(() => {\n    setValue(JSON.stringify(props.value, null, 2));\n  }, [props.value]);\n\n  return (\n    <CodeMirror\n      {...props}\n      style={{ border: `1px solid ${theme.palette.divider}` }}\n      theme={isDarkMode ? 'dark' : 'light'}\n      extensions={[json(), linter(jsonParseLinter()), lintGutter()]}\n      value={value}\n      onChange={(newValue) => {\n        setValue(newValue);\n      }}\n      onBlur={() => {\n        // Don't trigger the provided onChange if the last processed value is equal to the current value.\n        // This prevents e.g CTRL+F to trigger value refresh downstream, which would cause the embedded\n        // find & replace interface to close immediately.\n        if (lastProcessedValue !== value && props.onChange !== undefined) {\n          props.onChange(value);\n          setLastProcessedValue(value);\n        }\n      }}\n      placeholder={props.placeholder}\n    />\n  );\n}\n"],"names":["useEffect","useState","CodeMirror","json","jsonParseLinter","linter","lintGutter","useTheme","JSONEditor","props","theme","isDarkMode","palette","mode","value","setValue","JSON","stringify","lastProcessedValue","setLastProcessedValue","style","border","divider","extensions","onChange","newValue","onBlur","undefined","placeholder"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAAuBA,SAAS,EAAEC,QAAQ,QAAQ,QAAQ;AAC1D,OAAOC,gBAAgB,wBAAwB;AAC/C,SAASC,IAAI,EAAEC,eAAe,QAAQ,wBAAwB;AAC9D,SAASC,MAAM,EAAEC,UAAU,QAAQ,mBAAmB;AACtD,SAASC,QAAQ,QAAQ,gBAAgB;AASzC,OAAO,SAASC,WAAcC,KAAyB;IACrD,MAAMC,QAAQH;IACd,MAAMI,aAAaD,MAAME,OAAO,CAACC,IAAI,KAAK;IAE1C,MAAM,CAACC,OAAOC,SAAS,GAAGd,SAAS,IAAMe,KAAKC,SAAS,CAACR,MAAMK,KAAK,EAAE,MAAM;IAC3E,MAAM,CAACI,oBAAoBC,sBAAsB,GAAGlB,SAAiBa;IAErEd,UAAU;QACRe,SAASC,KAAKC,SAAS,CAACR,MAAMK,KAAK,EAAE,MAAM;IAC7C,GAAG;QAACL,MAAMK,KAAK;KAAC;IAEhB,qBACE,KAACZ;QACE,GAAGO,KAAK;QACTW,OAAO;YAAEC,QAAQ,CAAC,UAAU,EAAEX,MAAME,OAAO,CAACU,OAAO,CAAC,CAAC;QAAC;QACtDZ,OAAOC,aAAa,SAAS;QAC7BY,YAAY;YAACpB;YAAQE,OAAOD;YAAoBE;SAAa;QAC7DQ,OAAOA;QACPU,UAAU,CAACC;YACTV,SAASU;QACX;QACAC,QAAQ;YACN,iGAAiG;YACjG,+FAA+F;YAC/F,iDAAiD;YACjD,IAAIR,uBAAuBJ,SAASL,MAAMe,QAAQ,KAAKG,WAAW;gBAChElB,MAAMe,QAAQ,CAACV;gBACfK,sBAAsBL;YACxB;QACF;QACAc,aAAanB,MAAMmB,WAAW;;AAGpC"}

package/dist/Legend/CompactLegend.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import { ReactElement } from 'react';
 import { ListLegendItemProps } from './ListLegendItem';
 import { LegendItem, SelectedLegendItemState } from './legend-model';
 export interface CompactLegendProps {
@@ -15,5 +15,5 @@ export interface CompactLegendProps {
  * number of items. The `ListLegend` is used for cases with large numbers of items
  * because it is virtualized.
  */
-export declare function CompactLegend({ height, items, selectedItems, onLegendItemClick, onItemMouseOver, onItemMouseOut, }: CompactLegendProps): JSX.Element;
+export declare function CompactLegend({ height, items, selectedItems, onLegendItemClick, onItemMouseOver, onItemMouseOut, }: CompactLegendProps): ReactElement;
 //# sourceMappingURL=CompactLegend.d.ts.map

package/dist/Legend/CompactLegend.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CompactLegend.d.ts","sourceRoot":"","sources":["../../src/Legend/CompactLegend.tsx"],"names":[],"mappings":";AAcA,OAAO,EAAkB,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AACvE,OAAO,EAAE,UAAU,EAAE,uBAAuB,EAAgC,MAAM,gBAAgB,CAAC;AAEnG,MAAM,WAAW,kBAAkB;IACjC,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,UAAU,EAAE,CAAC;IACpB,aAAa,EAAE,uBAAuB,CAAC;IACvC,iBAAiB,EAAE,mBAAmB,CAAC,SAAS,CAAC,CAAC;IAClD,eAAe,EAAE,mBAAmB,CAAC,aAAa,CAAC,CAAC;IACpD,cAAc,EAAE,mBAAmB,CAAC,YAAY,CAAC,CAAC;CACnD;AAED;;;;;GAKG;AACH,wBAAgB,aAAa,CAAC,EAC5B,MAAM,EACN,KAAK,EACL,aAAa,EACb,iBAAiB,EACjB,eAAe,EACf,cAAc,GACf,EAAE,kBAAkB,eAqBpB"}
+{"version":3,"file":"CompactLegend.d.ts","sourceRoot":"","sources":["../../src/Legend/CompactLegend.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AACrC,OAAO,EAAkB,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AACvE,OAAO,EAAE,UAAU,EAAE,uBAAuB,EAAgC,MAAM,gBAAgB,CAAC;AAEnG,MAAM,WAAW,kBAAkB;IACjC,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,UAAU,EAAE,CAAC;IACpB,aAAa,EAAE,uBAAuB,CAAC;IACvC,iBAAiB,EAAE,mBAAmB,CAAC,SAAS,CAAC,CAAC;IAClD,eAAe,EAAE,mBAAmB,CAAC,aAAa,CAAC,CAAC;IACpD,cAAc,EAAE,mBAAmB,CAAC,YAAY,CAAC,CAAC;CACnD;AAED;;;;;GAKG;AACH,wBAAgB,aAAa,CAAC,EAC5B,MAAM,EACN,KAAK,EACL,aAAa,EACb,iBAAiB,EACjB,eAAe,EACf,cAAc,GACf,EAAE,kBAAkB,GAAG,YAAY,CAqBnC"}

package/dist/Legend/CompactLegend.js

@@ -19,7 +19,7 @@ import { isLegendItemVisuallySelected } from './legend-model';
  * which corresponds to when legend.position is `bottom` with a relatively small
  * number of items. The `ListLegend` is used for cases with large numbers of items
  * because it is virtualized.
- */ export function CompactLegend({ height , items , selectedItems , onLegendItemClick , onItemMouseOver , onItemMouseOut  }) {
+ */ export function CompactLegend({ height, items, selectedItems, onLegendItemClick, onItemMouseOver, onItemMouseOut }) {
     return /*#__PURE__*/ _jsx(Box, {
         component: "ul",
         sx: {

package/dist/Legend/CompactLegend.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Legend/CompactLegend.tsx"],"sourcesContent":["// Copyright 2023 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 { Box } from '@mui/material';\nimport { ListLegendItem, ListLegendItemProps } from './ListLegendItem';\nimport { LegendItem, SelectedLegendItemState, isLegendItemVisuallySelected } from './legend-model';\n\nexport interface CompactLegendProps {\n  height: number;\n  items: LegendItem[];\n  selectedItems: SelectedLegendItemState;\n  onLegendItemClick: ListLegendItemProps['onClick'];\n  onItemMouseOver: ListLegendItemProps['onMouseOver'];\n  onItemMouseOut: ListLegendItemProps['onMouseOut'];\n}\n\n/**\n * CompactLegend is default and used when legend items need to show side by side\n * which corresponds to when legend.position is `bottom` with a relatively small\n * number of items. The `ListLegend` is used for cases with large numbers of items\n * because it is virtualized.\n */\nexport function CompactLegend({\n  height,\n  items,\n  selectedItems,\n  onLegendItemClick,\n  onItemMouseOver,\n  onItemMouseOut,\n}: CompactLegendProps) {\n  return (\n    <Box component=\"ul\" sx={{ width: '100%', height, padding: [0, 1, 0, 0], overflowY: 'scroll', margin: 0 }}>\n      {items.map((item, index) => (\n        <ListLegendItem\n          key={item.id}\n          item={item}\n          index={index}\n          isVisuallySelected={isLegendItemVisuallySelected(item, selectedItems)}\n          onMouseOver={onItemMouseOver}\n          onMouseOut={onItemMouseOut}\n          onClick={onLegendItemClick}\n          sx={{\n            width: 'auto',\n            float: 'left',\n            paddingRight: 1.5,\n          }}\n        />\n      ))}\n    </Box>\n  );\n}\n"],"names":["Box","ListLegendItem","isLegendItemVisuallySelected","CompactLegend","height","items","selectedItems","onLegendItemClick","onItemMouseOver","onItemMouseOut","component","sx","width","padding","overflowY","margin","map","item","index","isVisuallySelected","onMouseOver","onMouseOut","onClick","float","paddingRight","id"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAASA,GAAG,QAAQ,gBAAgB;AACpC,SAASC,cAAc,QAA6B,mBAAmB;AACvE,SAA8CC,4BAA4B,QAAQ,iBAAiB;AAWnG;;;;;CAKC,GACD,OAAO,SAASC,cAAc,EAC5BC,OAAM,EACNC,MAAK,EACLC,cAAa,EACbC,kBAAiB,EACjBC,gBAAe,EACfC,eAAc,EACK;IACnB,qBACE,KAACT;QAAIU,WAAU;QAAKC,IAAI;YAAEC,OAAO;YAAQR;YAAQS,SAAS;gBAAC;gBAAG;gBAAG;gBAAG;aAAE;YAAEC,WAAW;YAAUC,QAAQ;QAAE;kBACpGV,MAAMW,IAAI,CAACC,MAAMC,sBAChB,KAACjB;gBAECgB,MAAMA;gBACNC,OAAOA;gBACPC,oBAAoBjB,6BAA6Be,MAAMX;gBACvDc,aAAaZ;gBACba,YAAYZ;gBACZa,SAASf;gBACTI,IAAI;oBACFC,OAAO;oBACPW,OAAO;oBACPC,cAAc;gBAChB;eAXKP,KAAKQ;;AAgBpB"}
+{"version":3,"sources":["../../src/Legend/CompactLegend.tsx"],"sourcesContent":["// Copyright 2023 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 { Box } from '@mui/material';\nimport { ReactElement } from 'react';\nimport { ListLegendItem, ListLegendItemProps } from './ListLegendItem';\nimport { LegendItem, SelectedLegendItemState, isLegendItemVisuallySelected } from './legend-model';\n\nexport interface CompactLegendProps {\n  height: number;\n  items: LegendItem[];\n  selectedItems: SelectedLegendItemState;\n  onLegendItemClick: ListLegendItemProps['onClick'];\n  onItemMouseOver: ListLegendItemProps['onMouseOver'];\n  onItemMouseOut: ListLegendItemProps['onMouseOut'];\n}\n\n/**\n * CompactLegend is default and used when legend items need to show side by side\n * which corresponds to when legend.position is `bottom` with a relatively small\n * number of items. The `ListLegend` is used for cases with large numbers of items\n * because it is virtualized.\n */\nexport function CompactLegend({\n  height,\n  items,\n  selectedItems,\n  onLegendItemClick,\n  onItemMouseOver,\n  onItemMouseOut,\n}: CompactLegendProps): ReactElement {\n  return (\n    <Box component=\"ul\" sx={{ width: '100%', height, padding: [0, 1, 0, 0], overflowY: 'scroll', margin: 0 }}>\n      {items.map((item, index) => (\n        <ListLegendItem\n          key={item.id}\n          item={item}\n          index={index}\n          isVisuallySelected={isLegendItemVisuallySelected(item, selectedItems)}\n          onMouseOver={onItemMouseOver}\n          onMouseOut={onItemMouseOut}\n          onClick={onLegendItemClick}\n          sx={{\n            width: 'auto',\n            float: 'left',\n            paddingRight: 1.5,\n          }}\n        />\n      ))}\n    </Box>\n  );\n}\n"],"names":["Box","ListLegendItem","isLegendItemVisuallySelected","CompactLegend","height","items","selectedItems","onLegendItemClick","onItemMouseOver","onItemMouseOut","component","sx","width","padding","overflowY","margin","map","item","index","isVisuallySelected","onMouseOver","onMouseOut","onClick","float","paddingRight","id"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAASA,GAAG,QAAQ,gBAAgB;AAEpC,SAASC,cAAc,QAA6B,mBAAmB;AACvE,SAA8CC,4BAA4B,QAAQ,iBAAiB;AAWnG;;;;;CAKC,GACD,OAAO,SAASC,cAAc,EAC5BC,MAAM,EACNC,KAAK,EACLC,aAAa,EACbC,iBAAiB,EACjBC,eAAe,EACfC,cAAc,EACK;IACnB,qBACE,KAACT;QAAIU,WAAU;QAAKC,IAAI;YAAEC,OAAO;YAAQR;YAAQS,SAAS;gBAAC;gBAAG;gBAAG;gBAAG;aAAE;YAAEC,WAAW;YAAUC,QAAQ;QAAE;kBACpGV,MAAMW,GAAG,CAAC,CAACC,MAAMC,sBAChB,KAACjB;gBAECgB,MAAMA;gBACNC,OAAOA;gBACPC,oBAAoBjB,6BAA6Be,MAAMX;gBACvDc,aAAaZ;gBACba,YAAYZ;gBACZa,SAASf;gBACTI,IAAI;oBACFC,OAAO;oBACPW,OAAO;oBACPC,cAAc;gBAChB;eAXKP,KAAKQ,EAAE;;AAgBtB"}

package/dist/Legend/Legend.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import { ReactElement } from 'react';
 import { TableLegendProps } from './TableLegend';
 import { LegendItem, LegendComponentOptions, SelectedLegendItemState } from './legend-model';
 import { ListLegendItemProps } from './ListLegendItem';
@@ -31,5 +31,5 @@ export interface LegendProps {
      */
     tableProps?: Pick<TableLegendProps, 'columns' | 'onSortingChange' | 'sorting'>;
 }
-export declare function Legend({ width, height, options, data, selectedItems, onSelectedItemsChange, onItemMouseOver, onItemMouseOut, tableProps, }: LegendProps): JSX.Element;
+export declare function Legend({ width, height, options, data, selectedItems, onSelectedItemsChange, onItemMouseOver, onItemMouseOut, tableProps, }: LegendProps): ReactElement;
 //# sourceMappingURL=Legend.d.ts.map

package/dist/Legend/Legend.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Legend.d.ts","sourceRoot":"","sources":["../../src/Legend/Legend.tsx"],"names":[],"mappings":";AAmBA,OAAO,EAAe,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAC9D,OAAO,EAAE,UAAU,EAAE,sBAAsB,EAAE,uBAAuB,EAAE,MAAM,gBAAgB,CAAC;AAC7F,OAAO,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAEvD,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,UAAU,EAAE,CAAC;IACnB,OAAO,EAAE,sBAAsB,CAAC;IAEhC;;;;;OAKG;IACH,aAAa,EAAE,uBAAuB,CAAC;IAEvC;;OAEG;IACH,qBAAqB,EAAE,CAAC,WAAW,EAAE,uBAAuB,KAAK,IAAI,CAAC;IAEtE;;OAEG;IACH,eAAe,CAAC,EAAE,mBAAmB,CAAC,aAAa,CAAC,CAAC;IAErD;;OAEG;IACH,cAAc,CAAC,EAAE,mBAAmB,CAAC,YAAY,CAAC,CAAC;IAEnD;;OAEG;IACH,UAAU,CAAC,EAAE,IAAI,CAAC,gBAAgB,EAAE,SAAS,GAAG,iBAAiB,GAAG,SAAS,CAAC,CAAC;CAChF;AASD,wBAAgB,MAAM,CAAC,EACrB,KAAK,EACL,MAAM,EACN,OAAO,EACP,IAAI,EACJ,aAAa,EACb,qBAAqB,EACrB,eAAe,EACf,cAAc,EACd,UAAU,GACX,EAAE,WAAW,eA8Fb"}
+{"version":3,"file":"Legend.d.ts","sourceRoot":"","sources":["../../src/Legend/Legend.tsx"],"names":[],"mappings":"AAeA,OAAO,EAAE,YAAY,EAAa,MAAM,OAAO,CAAC;AAIhD,OAAO,EAAe,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAC9D,OAAO,EAAE,UAAU,EAAE,sBAAsB,EAAE,uBAAuB,EAAE,MAAM,gBAAgB,CAAC;AAC7F,OAAO,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAEvD,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,UAAU,EAAE,CAAC;IACnB,OAAO,EAAE,sBAAsB,CAAC;IAEhC;;;;;OAKG;IACH,aAAa,EAAE,uBAAuB,CAAC;IAEvC;;OAEG;IACH,qBAAqB,EAAE,CAAC,WAAW,EAAE,uBAAuB,KAAK,IAAI,CAAC;IAEtE;;OAEG;IACH,eAAe,CAAC,EAAE,mBAAmB,CAAC,aAAa,CAAC,CAAC;IAErD;;OAEG;IACH,cAAc,CAAC,EAAE,mBAAmB,CAAC,YAAY,CAAC,CAAC;IAEnD;;OAEG;IACH,UAAU,CAAC,EAAE,IAAI,CAAC,gBAAgB,EAAE,SAAS,GAAG,iBAAiB,GAAG,SAAS,CAAC,CAAC;CAChF;AASD,wBAAgB,MAAM,CAAC,EACrB,KAAK,EACL,MAAM,EACN,OAAO,EACP,IAAI,EACJ,aAAa,EACb,qBAAqB,EACrB,eAAe,EACf,cAAc,EACd,UAAU,GACX,EAAE,WAAW,GAAG,YAAY,CAkG5B"}