@perses-dev/components 0.55.0-beta.2 → 0.55.0-beta.6

package/dist/AlignSelector/AlignSelector.d.ts

@@ -1,5 +1,5 @@
-import { ButtonGroupProps } from '@mui/material';
-import { ReactElement } from 'react';
+import type { ButtonGroupProps } from '@mui/material';
+import type { ReactElement } from 'react';
 export type AlignOption = 'left' | 'center' | 'right';
 export interface AlignSelectorProps extends Omit<ButtonGroupProps, 'onChange'> {
     onChange: (align: AlignOption) => void;

package/dist/AlignSelector/AlignSelector.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AlignSelector.d.ts","sourceRoot":"","sources":["../../src/AlignSelector/AlignSelector.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAuB,gBAAgB,EAAE,MAAM,eAAe,CAAC;AACtE,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAErC,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEtD,MAAM,WAAW,kBAAmB,SAAQ,IAAI,CAAC,gBAAgB,EAAE,UAAU,CAAC;IAC5E,QAAQ,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,IAAI,CAAC;IACvC,KAAK,CAAC,EAAE,WAAW,CAAC;CACrB;AAED,wBAAgB,aAAa,CAAC,EAAE,QAAQ,EAAE,KAAc,EAAE,GAAG,KAAK,EAAE,EAAE,kBAAkB,GAAG,YAAY,CA0BtG"}
+{"version":3,"file":"AlignSelector.d.ts","sourceRoot":"","sources":["../../src/AlignSelector/AlignSelector.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAEtD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAE1C,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEtD,MAAM,WAAW,kBAAmB,SAAQ,IAAI,CAAC,gBAAgB,EAAE,UAAU,CAAC;IAC5E,QAAQ,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,IAAI,CAAC;IACvC,KAAK,CAAC,EAAE,WAAW,CAAC;CACrB;AAED,wBAAgB,aAAa,CAAC,EAAE,QAAQ,EAAE,KAAc,EAAE,GAAG,KAAK,EAAE,EAAE,kBAAkB,GAAG,YAAY,CA0BtG"}

package/dist/AlignSelector/AlignSelector.js

@@ -1,4 +1,3 @@
-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.
@@ -11,7 +10,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // 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, ButtonGroup } from '@mui/material';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, ButtonGroup } from "@mui/material";
 export function AlignSelector({ onChange, value = 'left', ...props }) {
     const handleSortChange = (option)=>{
         onChange(option);

package/dist/AlignSelector/AlignSelector.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/AlignSelector/AlignSelector.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, ButtonGroup, ButtonGroupProps } from '@mui/material';\nimport { ReactElement } from 'react';\n\nexport type AlignOption = 'left' | 'center' | 'right';\n\nexport interface AlignSelectorProps extends Omit<ButtonGroupProps, 'onChange'> {\n  onChange: (align: AlignOption) => void;\n  value?: AlignOption;\n}\n\nexport function AlignSelector({ onChange, value = 'left', ...props }: AlignSelectorProps): ReactElement {\n  const handleSortChange = (option: AlignOption): void => {\n    onChange(option);\n  };\n\n  return (\n    <ButtonGroup aria-label=\"Alignement\" {...props}>\n      <Button key=\"left\" onClick={() => handleSortChange('left')} variant={value === 'left' ? 'contained' : 'outlined'}>\n        Left\n      </Button>\n      <Button\n        key=\"center\"\n        onClick={() => handleSortChange('center')}\n        variant={value === 'center' ? 'contained' : 'outlined'}\n      >\n        Center\n      </Button>\n      <Button\n        key=\"right\"\n        onClick={() => handleSortChange('right')}\n        variant={value === 'right' ? 'contained' : 'outlined'}\n      >\n        Right\n      </Button>\n    </ButtonGroup>\n  );\n}\n"],"names":["Button","ButtonGroup","AlignSelector","onChange","value","props","handleSortChange","option","aria-label","onClick","variant"],"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;AAEjC,SAASA,MAAM,EAAEC,WAAW,QAA0B,gBAAgB;AAUtE,OAAO,SAASC,cAAc,EAAEC,QAAQ,EAAEC,QAAQ,MAAM,EAAE,GAAGC,OAA2B;IACtF,MAAMC,mBAAmB,CAACC;QACxBJ,SAASI;IACX;IAEA,qBACE,MAACN;QAAYO,cAAW;QAAc,GAAGH,KAAK;;0BAC5C,KAACL;gBAAkBS,SAAS,IAAMH,iBAAiB;gBAASI,SAASN,UAAU,SAAS,cAAc;0BAAY;eAAtG;0BAGZ,KAACJ;gBAECS,SAAS,IAAMH,iBAAiB;gBAChCI,SAASN,UAAU,WAAW,cAAc;0BAC7C;eAHK;0BAMN,KAACJ;gBAECS,SAAS,IAAMH,iBAAiB;gBAChCI,SAASN,UAAU,UAAU,cAAc;0BAC5C;eAHK;;;AAQZ"}
+{"version":3,"sources":["../../src/AlignSelector/AlignSelector.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 { ButtonGroupProps } from '@mui/material';\nimport { Button, ButtonGroup } from '@mui/material';\nimport type { ReactElement } from 'react';\n\nexport type AlignOption = 'left' | 'center' | 'right';\n\nexport interface AlignSelectorProps extends Omit<ButtonGroupProps, 'onChange'> {\n  onChange: (align: AlignOption) => void;\n  value?: AlignOption;\n}\n\nexport function AlignSelector({ onChange, value = 'left', ...props }: AlignSelectorProps): ReactElement {\n  const handleSortChange = (option: AlignOption): void => {\n    onChange(option);\n  };\n\n  return (\n    <ButtonGroup aria-label=\"Alignement\" {...props}>\n      <Button key=\"left\" onClick={() => handleSortChange('left')} variant={value === 'left' ? 'contained' : 'outlined'}>\n        Left\n      </Button>\n      <Button\n        key=\"center\"\n        onClick={() => handleSortChange('center')}\n        variant={value === 'center' ? 'contained' : 'outlined'}\n      >\n        Center\n      </Button>\n      <Button\n        key=\"right\"\n        onClick={() => handleSortChange('right')}\n        variant={value === 'right' ? 'contained' : 'outlined'}\n      >\n        Right\n      </Button>\n    </ButtonGroup>\n  );\n}\n"],"names":["Button","ButtonGroup","AlignSelector","onChange","value","props","handleSortChange","option","aria-label","onClick","variant"],"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,MAAM,EAAEC,WAAW,QAAQ,gBAAgB;AAUpD,OAAO,SAASC,cAAc,EAAEC,QAAQ,EAAEC,QAAQ,MAAM,EAAE,GAAGC,OAA2B;IACtF,MAAMC,mBAAmB,CAACC;QACxBJ,SAASI;IACX;IAEA,qBACE,MAACN;QAAYO,cAAW;QAAc,GAAGH,KAAK;;0BAC5C,KAACL;gBAAkBS,SAAS,IAAMH,iBAAiB;gBAASI,SAASN,UAAU,SAAS,cAAc;0BAAY;eAAtG;0BAGZ,KAACJ;gBAECS,SAAS,IAAMH,iBAAiB;gBAChCI,SAASN,UAAU,WAAW,cAAc;0BAC7C;eAHK;0BAMN,KAACJ;gBAECS,SAAS,IAAMH,iBAAiB;gBAChCI,SAASN,UAAU,UAAU,cAAc;0BAC5C;eAHK;;;AAQZ"}

package/dist/AlignSelector/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 './AlignSelector';
+export * from "./AlignSelector.js";
 
 //# sourceMappingURL=index.js.map

package/dist/AlignSelector/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/AlignSelector/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 './AlignSelector';\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,kBAAkB"}
+{"version":3,"sources":["../../src/AlignSelector/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 './AlignSelector';\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,qBAAkB"}

package/dist/ColorPicker/ColorPicker.d.ts

@@ -1,4 +1,4 @@
-import { ReactElement } from 'react';
+import type { ReactElement } from 'react';
 interface ColorPickerProps {
     color: string;
     onChange?: (color: string) => void;

package/dist/ColorPicker/ColorPicker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ColorPicker.d.ts","sourceRoot":"","sources":["../../src/ColorPicker/ColorPicker.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAe,YAAY,EAAY,MAAM,OAAO,CAAC;AAK5D,UAAU,gBAAgB;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;CACpB;AAED,eAAO,MAAM,WAAW,0CAA2C,gBAAgB,KAAG,YAmDrF,CAAC"}
+{"version":3,"file":"ColorPicker.d.ts","sourceRoot":"","sources":["../../src/ColorPicker/ColorPicker.tsx"],"names":[],"mappings":"AAgBA,OAAO,KAAK,EAAe,YAAY,EAAE,MAAM,OAAO,CAAC;AAIvD,UAAU,gBAAgB;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;CACpB;AAED,eAAO,MAAM,WAAW,GAAI,uCAAuC,gBAAgB,KAAG,YAmDrF,CAAC"}

package/dist/ColorPicker/ColorPicker.js

@@ -11,11 +11,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // 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 { IconButton, Stack, TextField } from '@mui/material';
-import { useState } from 'react';
-import { HexColorPicker } from 'react-colorful';
-import CircleIcon from 'mdi-material-ui/Circle';
-import DeleteIcon from 'mdi-material-ui/Delete';
+import { IconButton, Stack, TextField } from "@mui/material";
+import CircleIcon from "mdi-material-ui/Circle";
+import DeleteIcon from "mdi-material-ui/Delete";
+import { useState } from "react";
+import { HexColorPicker } from "react-colorful";
 export const ColorPicker = ({ color, onChange, onClear, palette })=>{
     // value is the visible value for the controlled text input
     const [value, setValue] = useState(color);

package/dist/ColorPicker/ColorPicker.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/ColorPicker/ColorPicker.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 { IconButton, Stack, TextField } from '@mui/material';\nimport { ChangeEvent, ReactElement, useState } from 'react';\nimport { HexColorPicker } from 'react-colorful';\nimport CircleIcon from 'mdi-material-ui/Circle';\nimport DeleteIcon from 'mdi-material-ui/Delete';\n\ninterface ColorPickerProps {\n  color: string;\n  onChange?: (color: string) => void;\n  onClear?: () => void;\n  /**\n   * Preset color palette\n   */\n  palette?: string[];\n}\n\nexport const ColorPicker = ({ color, onChange, onClear, palette }: ColorPickerProps): ReactElement => {\n  // value is the visible value for the controlled text input\n  const [value, setValue] = useState(color);\n\n  const handleColorChange = (color: string): void => {\n    setValue(color);\n    onChange?.(color);\n  };\n\n  // we should update this if https://github.com/omgovich/react-colorful/issues/157 is resolved\n  const handleInputChange = (e: ChangeEvent<HTMLInputElement>): void => {\n    const inputValue = e.target.value.replace(/([^0-9A-F]+)/gi, '').substring(0, 8);\n    setValue(`#${inputValue}`); // always prefix input value with # to indicate hex format\n    // only set color if input value is a valid hex color\n    if (isValidHex(e.target.value)) {\n      onChange?.(e.target.value);\n    }\n  };\n\n  return (\n    <Stack spacing={1}>\n      <HexColorPicker color={color} onChange={handleColorChange} style={{ width: '100%' }} />\n      <Stack direction=\"row\" flexWrap=\"wrap\" justifyContent=\"space-evenly\" width=\"200px\">\n        {palette &&\n          palette.map((color, i) => (\n            <IconButton\n              key={i}\n              size=\"small\"\n              aria-label={`change color to ${color}`}\n              sx={{ color }}\n              onClick={() => handleColorChange(color)}\n            >\n              <CircleIcon />\n            </IconButton>\n          ))}\n      </Stack>\n      <Stack direction=\"row\" gap={1} alignItems=\"center\">\n        <TextField\n          inputProps={{ 'aria-label': 'enter hex color' }}\n          fullWidth\n          value={value}\n          onChange={handleInputChange}\n        />\n        {onClear && (\n          <IconButton onClick={onClear}>\n            <DeleteIcon />\n          </IconButton>\n        )}\n      </Stack>\n    </Stack>\n  );\n};\n\nconst isValidHex = (value: string, alpha?: boolean): boolean => {\n  const matcher = /^#?([0-9A-F]{3,8})$/i;\n  const match = matcher.exec(value);\n  const length = match && match[1] ? match[1].length : 0;\n  return (\n    length === 3 || // '#rgb' format\n    length === 6 || // '#rrggbb' format\n    (!!alpha && length === 4) || // '#rgba' format\n    (!!alpha && length === 8) // '#rrggbbaa' format\n  );\n};\n"],"names":["IconButton","Stack","TextField","useState","HexColorPicker","CircleIcon","DeleteIcon","ColorPicker","color","onChange","onClear","palette","value","setValue","handleColorChange","handleInputChange","e","inputValue","target","replace","substring","isValidHex","spacing","style","width","direction","flexWrap","justifyContent","map","i","size","aria-label","sx","onClick","gap","alignItems","inputProps","fullWidth","alpha","matcher","match","exec","length"],"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,UAAU,EAAEC,KAAK,EAAEC,SAAS,QAAQ,gBAAgB;AAC7D,SAAoCC,QAAQ,QAAQ,QAAQ;AAC5D,SAASC,cAAc,QAAQ,iBAAiB;AAChD,OAAOC,gBAAgB,yBAAyB;AAChD,OAAOC,gBAAgB,yBAAyB;AAYhD,OAAO,MAAMC,cAAc,CAAC,EAAEC,KAAK,EAAEC,QAAQ,EAAEC,OAAO,EAAEC,OAAO,EAAoB;IACjF,2DAA2D;IAC3D,MAAM,CAACC,OAAOC,SAAS,GAAGV,SAASK;IAEnC,MAAMM,oBAAoB,CAACN;QACzBK,SAASL;QACTC,WAAWD;IACb;IAEA,6FAA6F;IAC7F,MAAMO,oBAAoB,CAACC;QACzB,MAAMC,aAAaD,EAAEE,MAAM,CAACN,KAAK,CAACO,OAAO,CAAC,kBAAkB,IAAIC,SAAS,CAAC,GAAG;QAC7EP,SAAS,CAAC,CAAC,EAAEI,YAAY,GAAG,0DAA0D;QACtF,qDAAqD;QACrD,IAAII,WAAWL,EAAEE,MAAM,CAACN,KAAK,GAAG;YAC9BH,WAAWO,EAAEE,MAAM,CAACN,KAAK;QAC3B;IACF;IAEA,qBACE,MAACX;QAAMqB,SAAS;;0BACd,KAAClB;gBAAeI,OAAOA;gBAAOC,UAAUK;gBAAmBS,OAAO;oBAAEC,OAAO;gBAAO;;0BAClF,KAACvB;gBAAMwB,WAAU;gBAAMC,UAAS;gBAAOC,gBAAe;gBAAeH,OAAM;0BACxEb,WACCA,QAAQiB,GAAG,CAAC,CAACpB,OAAOqB,kBAClB,KAAC7B;wBAEC8B,MAAK;wBACLC,cAAY,CAAC,gBAAgB,EAAEvB,OAAO;wBACtCwB,IAAI;4BAAExB;wBAAM;wBACZyB,SAAS,IAAMnB,kBAAkBN;kCAEjC,cAAA,KAACH;uBANIwB;;0BAUb,MAAC5B;gBAAMwB,WAAU;gBAAMS,KAAK;gBAAGC,YAAW;;kCACxC,KAACjC;wBACCkC,YAAY;4BAAE,cAAc;wBAAkB;wBAC9CC,SAAS;wBACTzB,OAAOA;wBACPH,UAAUM;;oBAEXL,yBACC,KAACV;wBAAWiC,SAASvB;kCACnB,cAAA,KAACJ;;;;;;AAMb,EAAE;AAEF,MAAMe,aAAa,CAACT,OAAe0B;IACjC,MAAMC,UAAU;IAChB,MAAMC,QAAQD,QAAQE,IAAI,CAAC7B;IAC3B,MAAM8B,SAASF,SAASA,KAAK,CAAC,EAAE,GAAGA,KAAK,CAAC,EAAE,CAACE,MAAM,GAAG;IACrD,OACEA,WAAW,KAAK,gBAAgB;IAChCA,WAAW,KAAK,mBAAmB;IAClC,CAAC,CAACJ,SAASI,WAAW,KAAM,iBAAiB;IAC7C,CAAC,CAACJ,SAASI,WAAW,EAAG,qBAAqB;;AAEnD"}
+{"version":3,"sources":["../../src/ColorPicker/ColorPicker.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 { IconButton, Stack, TextField } from '@mui/material';\nimport CircleIcon from 'mdi-material-ui/Circle';\nimport DeleteIcon from 'mdi-material-ui/Delete';\nimport type { ChangeEvent, ReactElement } from 'react';\nimport { useState } from 'react';\nimport { HexColorPicker } from 'react-colorful';\n\ninterface ColorPickerProps {\n  color: string;\n  onChange?: (color: string) => void;\n  onClear?: () => void;\n  /**\n   * Preset color palette\n   */\n  palette?: string[];\n}\n\nexport const ColorPicker = ({ color, onChange, onClear, palette }: ColorPickerProps): ReactElement => {\n  // value is the visible value for the controlled text input\n  const [value, setValue] = useState(color);\n\n  const handleColorChange = (color: string): void => {\n    setValue(color);\n    onChange?.(color);\n  };\n\n  // we should update this if https://github.com/omgovich/react-colorful/issues/157 is resolved\n  const handleInputChange = (e: ChangeEvent<HTMLInputElement>): void => {\n    const inputValue = e.target.value.replace(/([^0-9A-F]+)/gi, '').substring(0, 8);\n    setValue(`#${inputValue}`); // always prefix input value with # to indicate hex format\n    // only set color if input value is a valid hex color\n    if (isValidHex(e.target.value)) {\n      onChange?.(e.target.value);\n    }\n  };\n\n  return (\n    <Stack spacing={1}>\n      <HexColorPicker color={color} onChange={handleColorChange} style={{ width: '100%' }} />\n      <Stack direction=\"row\" flexWrap=\"wrap\" justifyContent=\"space-evenly\" width=\"200px\">\n        {palette &&\n          palette.map((color, i) => (\n            <IconButton\n              key={i}\n              size=\"small\"\n              aria-label={`change color to ${color}`}\n              sx={{ color }}\n              onClick={() => handleColorChange(color)}\n            >\n              <CircleIcon />\n            </IconButton>\n          ))}\n      </Stack>\n      <Stack direction=\"row\" gap={1} alignItems=\"center\">\n        <TextField\n          inputProps={{ 'aria-label': 'enter hex color' }}\n          fullWidth\n          value={value}\n          onChange={handleInputChange}\n        />\n        {onClear && (\n          <IconButton onClick={onClear}>\n            <DeleteIcon />\n          </IconButton>\n        )}\n      </Stack>\n    </Stack>\n  );\n};\n\nconst isValidHex = (value: string, alpha?: boolean): boolean => {\n  const matcher = /^#?([0-9A-F]{3,8})$/i;\n  const match = matcher.exec(value);\n  const length = match && match[1] ? match[1].length : 0;\n  return (\n    length === 3 || // '#rgb' format\n    length === 6 || // '#rrggbb' format\n    (!!alpha && length === 4) || // '#rgba' format\n    (!!alpha && length === 8) // '#rrggbbaa' format\n  );\n};\n"],"names":["IconButton","Stack","TextField","CircleIcon","DeleteIcon","useState","HexColorPicker","ColorPicker","color","onChange","onClear","palette","value","setValue","handleColorChange","handleInputChange","e","inputValue","target","replace","substring","isValidHex","spacing","style","width","direction","flexWrap","justifyContent","map","i","size","aria-label","sx","onClick","gap","alignItems","inputProps","fullWidth","alpha","matcher","match","exec","length"],"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,UAAU,EAAEC,KAAK,EAAEC,SAAS,QAAQ,gBAAgB;AAC7D,OAAOC,gBAAgB,yBAAyB;AAChD,OAAOC,gBAAgB,yBAAyB;AAEhD,SAASC,QAAQ,QAAQ,QAAQ;AACjC,SAASC,cAAc,QAAQ,iBAAiB;AAYhD,OAAO,MAAMC,cAAc,CAAC,EAAEC,KAAK,EAAEC,QAAQ,EAAEC,OAAO,EAAEC,OAAO,EAAoB;IACjF,2DAA2D;IAC3D,MAAM,CAACC,OAAOC,SAAS,GAAGR,SAASG;IAEnC,MAAMM,oBAAoB,CAACN;QACzBK,SAASL;QACTC,WAAWD;IACb;IAEA,6FAA6F;IAC7F,MAAMO,oBAAoB,CAACC;QACzB,MAAMC,aAAaD,EAAEE,MAAM,CAACN,KAAK,CAACO,OAAO,CAAC,kBAAkB,IAAIC,SAAS,CAAC,GAAG;QAC7EP,SAAS,CAAC,CAAC,EAAEI,YAAY,GAAG,0DAA0D;QACtF,qDAAqD;QACrD,IAAII,WAAWL,EAAEE,MAAM,CAACN,KAAK,GAAG;YAC9BH,WAAWO,EAAEE,MAAM,CAACN,KAAK;QAC3B;IACF;IAEA,qBACE,MAACX;QAAMqB,SAAS;;0BACd,KAAChB;gBAAeE,OAAOA;gBAAOC,UAAUK;gBAAmBS,OAAO;oBAAEC,OAAO;gBAAO;;0BAClF,KAACvB;gBAAMwB,WAAU;gBAAMC,UAAS;gBAAOC,gBAAe;gBAAeH,OAAM;0BACxEb,WACCA,QAAQiB,GAAG,CAAC,CAACpB,OAAOqB,kBAClB,KAAC7B;wBAEC8B,MAAK;wBACLC,cAAY,CAAC,gBAAgB,EAAEvB,OAAO;wBACtCwB,IAAI;4BAAExB;wBAAM;wBACZyB,SAAS,IAAMnB,kBAAkBN;kCAEjC,cAAA,KAACL;uBANI0B;;0BAUb,MAAC5B;gBAAMwB,WAAU;gBAAMS,KAAK;gBAAGC,YAAW;;kCACxC,KAACjC;wBACCkC,YAAY;4BAAE,cAAc;wBAAkB;wBAC9CC,SAAS;wBACTzB,OAAOA;wBACPH,UAAUM;;oBAEXL,yBACC,KAACV;wBAAWiC,SAASvB;kCACnB,cAAA,KAACN;;;;;;AAMb,EAAE;AAEF,MAAMiB,aAAa,CAACT,OAAe0B;IACjC,MAAMC,UAAU;IAChB,MAAMC,QAAQD,QAAQE,IAAI,CAAC7B;IAC3B,MAAM8B,SAASF,SAASA,KAAK,CAAC,EAAE,GAAGA,KAAK,CAAC,EAAE,CAACE,MAAM,GAAG;IACrD,OACEA,WAAW,KAAK,gBAAgB;IAChCA,WAAW,KAAK,mBAAmB;IAClC,CAAC,CAACJ,SAASI,WAAW,KAAM,iBAAiB;IAC7C,CAAC,CAACJ,SAASI,WAAW,EAAG,qBAAqB;;AAEnD"}

package/dist/ColorPicker/OptionsColorPicker.d.ts

@@ -1,4 +1,4 @@
-import { ReactElement } from 'react';
+import type { ReactElement } from 'react';
 export interface OptionsColorPickerProps {
     label: string;
     color: string;

package/dist/ColorPicker/OptionsColorPicker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"OptionsColorPicker.d.ts","sourceRoot":"","sources":["../../src/ColorPicker/OptionsColorPicker.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,YAAY,EAAwB,MAAM,OAAO,CAAC;AAM3D,MAAM,WAAW,uBAAuB;IACtC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,wBAAgB,kBAAkB,CAAC,EACjC,KAAK,EACL,KAAK,EACL,IAAc,EACd,aAAa,EACb,OAAO,GACR,EAAE,uBAAuB,GAAG,YAAY,CA8CxC"}
+{"version":3,"file":"OptionsColorPicker.d.ts","sourceRoot":"","sources":["../../src/ColorPicker/OptionsColorPicker.tsx"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAE,YAAY,EAAc,MAAM,OAAO,CAAC;AAMtD,MAAM,WAAW,uBAAuB;IACtC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,wBAAgB,kBAAkB,CAAC,EACjC,KAAK,EACL,KAAK,EACL,IAAc,EACd,aAAa,EACb,OAAO,GACR,EAAE,uBAAuB,GAAG,YAAY,CA8CxC"}

package/dist/ColorPicker/OptionsColorPicker.js

@@ -11,11 +11,11 @@ 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 { useState } from 'react';
-import { styled, IconButton, Popover } from '@mui/material';
-import CircleIcon from 'mdi-material-ui/Circle';
-import { useChartsTheme } from '../context';
-import { ColorPicker } from './ColorPicker';
+import { styled, IconButton, Popover } from "@mui/material";
+import CircleIcon from "mdi-material-ui/Circle";
+import { useState } from "react";
+import { useChartsTheme } from "../context/index.js";
+import { ColorPicker } from "./ColorPicker.js";
 export function OptionsColorPicker({ label, color, size = 'small', onColorChange, onClear }) {
     const [anchorEl, setAnchorEl] = useState(null);
     const isOpen = Boolean(anchorEl);

package/dist/ColorPicker/OptionsColorPicker.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/ColorPicker/OptionsColorPicker.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, useState, MouseEvent } from 'react';\nimport { styled, IconButton, Popover } from '@mui/material';\nimport CircleIcon from 'mdi-material-ui/Circle';\nimport { useChartsTheme } from '../context';\nimport { ColorPicker } from './ColorPicker';\n\nexport interface OptionsColorPickerProps {\n  label: string;\n  color: string;\n  size?: 'small' | 'medium' | 'large';\n  onColorChange: (color: string) => void;\n  onClear?: () => void;\n}\n\nexport function OptionsColorPicker({\n  label,\n  color,\n  size = 'small',\n  onColorChange,\n  onClear,\n}: OptionsColorPickerProps): ReactElement {\n  const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);\n  const isOpen = Boolean(anchorEl);\n\n  const openColorPicker = (event: MouseEvent<HTMLButtonElement>): void => {\n    setAnchorEl(event.currentTarget);\n  };\n\n  const closeColorPicker = (): void => {\n    setAnchorEl(null);\n  };\n\n  const {\n    thresholds: { defaultColor, palette },\n  } = useChartsTheme();\n\n  return (\n    <>\n      <ColorIconButton\n        size={size}\n        aria-label={`change ${label} color`}\n        isSelected={isOpen}\n        iconColor={color}\n        onClick={openColorPicker}\n      >\n        <CircleIcon />\n      </ColorIconButton>\n      <Popover\n        data-testid=\"options color picker\"\n        open={isOpen}\n        anchorEl={anchorEl}\n        onClose={closeColorPicker}\n        slotProps={{ paper: { sx: { padding: (theme) => theme.spacing(2) } } }}\n        anchorOrigin={{\n          vertical: 'top',\n          horizontal: 'left',\n        }}\n        transformOrigin={{\n          vertical: 'top',\n          horizontal: 'right',\n        }}\n      >\n        <ColorPicker color={color} palette={[defaultColor, ...palette]} onChange={onColorChange} onClear={onClear} />\n      </Popover>\n    </>\n  );\n}\n\nconst ColorIconButton = styled(IconButton, {\n  shouldForwardProp: (props) => props !== 'isSelected' && props !== 'iconColor',\n})<{\n  iconColor?: string;\n  isSelected?: boolean;\n}>(({ iconColor, isSelected }) => ({\n  backgroundColor: isSelected && iconColor ? `${iconColor}3F` : 'undefined', // 3F represents 25% opacity\n  color: iconColor,\n}));\n"],"names":["useState","styled","IconButton","Popover","CircleIcon","useChartsTheme","ColorPicker","OptionsColorPicker","label","color","size","onColorChange","onClear","anchorEl","setAnchorEl","isOpen","Boolean","openColorPicker","event","currentTarget","closeColorPicker","thresholds","defaultColor","palette","ColorIconButton","aria-label","isSelected","iconColor","onClick","data-testid","open","onClose","slotProps","paper","sx","padding","theme","spacing","anchorOrigin","vertical","horizontal","transformOrigin","onChange","shouldForwardProp","props","backgroundColor"],"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,SAAuBA,QAAQ,QAAoB,QAAQ;AAC3D,SAASC,MAAM,EAAEC,UAAU,EAAEC,OAAO,QAAQ,gBAAgB;AAC5D,OAAOC,gBAAgB,yBAAyB;AAChD,SAASC,cAAc,QAAQ,aAAa;AAC5C,SAASC,WAAW,QAAQ,gBAAgB;AAU5C,OAAO,SAASC,mBAAmB,EACjCC,KAAK,EACLC,KAAK,EACLC,OAAO,OAAO,EACdC,aAAa,EACbC,OAAO,EACiB;IACxB,MAAM,CAACC,UAAUC,YAAY,GAAGd,SAAmC;IACnE,MAAMe,SAASC,QAAQH;IAEvB,MAAMI,kBAAkB,CAACC;QACvBJ,YAAYI,MAAMC,aAAa;IACjC;IAEA,MAAMC,mBAAmB;QACvBN,YAAY;IACd;IAEA,MAAM,EACJO,YAAY,EAAEC,YAAY,EAAEC,OAAO,EAAE,EACtC,GAAGlB;IAEJ,qBACE;;0BACE,KAACmB;gBACCd,MAAMA;gBACNe,cAAY,CAAC,OAAO,EAAEjB,MAAM,MAAM,CAAC;gBACnCkB,YAAYX;gBACZY,WAAWlB;gBACXmB,SAASX;0BAET,cAAA,KAACb;;0BAEH,KAACD;gBACC0B,eAAY;gBACZC,MAAMf;gBACNF,UAAUA;gBACVkB,SAASX;gBACTY,WAAW;oBAAEC,OAAO;wBAAEC,IAAI;4BAAEC,SAAS,CAACC,QAAUA,MAAMC,OAAO,CAAC;wBAAG;oBAAE;gBAAE;gBACrEC,cAAc;oBACZC,UAAU;oBACVC,YAAY;gBACd;gBACAC,iBAAiB;oBACfF,UAAU;oBACVC,YAAY;gBACd;0BAEA,cAAA,KAAClC;oBAAYG,OAAOA;oBAAOc,SAAS;wBAACD;2BAAiBC;qBAAQ;oBAAEmB,UAAU/B;oBAAeC,SAASA;;;;;AAI1G;AAEA,MAAMY,kBAAkBvB,OAAOC,YAAY;IACzCyC,mBAAmB,CAACC,QAAUA,UAAU,gBAAgBA,UAAU;AACpE,GAGG,CAAC,EAAEjB,SAAS,EAAED,UAAU,EAAE,GAAM,CAAA;QACjCmB,iBAAiBnB,cAAcC,YAAY,GAAGA,UAAU,EAAE,CAAC,GAAG;QAC9DlB,OAAOkB;IACT,CAAA"}
+{"version":3,"sources":["../../src/ColorPicker/OptionsColorPicker.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 { styled, IconButton, Popover } from '@mui/material';\nimport CircleIcon from 'mdi-material-ui/Circle';\nimport type { ReactElement, MouseEvent } from 'react';\nimport { useState } from 'react';\n\nimport { useChartsTheme } from '../context';\nimport { ColorPicker } from './ColorPicker';\n\nexport interface OptionsColorPickerProps {\n  label: string;\n  color: string;\n  size?: 'small' | 'medium' | 'large';\n  onColorChange: (color: string) => void;\n  onClear?: () => void;\n}\n\nexport function OptionsColorPicker({\n  label,\n  color,\n  size = 'small',\n  onColorChange,\n  onClear,\n}: OptionsColorPickerProps): ReactElement {\n  const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);\n  const isOpen = Boolean(anchorEl);\n\n  const openColorPicker = (event: MouseEvent<HTMLButtonElement>): void => {\n    setAnchorEl(event.currentTarget);\n  };\n\n  const closeColorPicker = (): void => {\n    setAnchorEl(null);\n  };\n\n  const {\n    thresholds: { defaultColor, palette },\n  } = useChartsTheme();\n\n  return (\n    <>\n      <ColorIconButton\n        size={size}\n        aria-label={`change ${label} color`}\n        isSelected={isOpen}\n        iconColor={color}\n        onClick={openColorPicker}\n      >\n        <CircleIcon />\n      </ColorIconButton>\n      <Popover\n        data-testid=\"options color picker\"\n        open={isOpen}\n        anchorEl={anchorEl}\n        onClose={closeColorPicker}\n        slotProps={{ paper: { sx: { padding: (theme) => theme.spacing(2) } } }}\n        anchorOrigin={{\n          vertical: 'top',\n          horizontal: 'left',\n        }}\n        transformOrigin={{\n          vertical: 'top',\n          horizontal: 'right',\n        }}\n      >\n        <ColorPicker color={color} palette={[defaultColor, ...palette]} onChange={onColorChange} onClear={onClear} />\n      </Popover>\n    </>\n  );\n}\n\nconst ColorIconButton = styled(IconButton, {\n  shouldForwardProp: (props) => props !== 'isSelected' && props !== 'iconColor',\n})<{\n  iconColor?: string;\n  isSelected?: boolean;\n}>(({ iconColor, isSelected }) => ({\n  backgroundColor: isSelected && iconColor ? `${iconColor}3F` : 'undefined', // 3F represents 25% opacity\n  color: iconColor,\n}));\n"],"names":["styled","IconButton","Popover","CircleIcon","useState","useChartsTheme","ColorPicker","OptionsColorPicker","label","color","size","onColorChange","onClear","anchorEl","setAnchorEl","isOpen","Boolean","openColorPicker","event","currentTarget","closeColorPicker","thresholds","defaultColor","palette","ColorIconButton","aria-label","isSelected","iconColor","onClick","data-testid","open","onClose","slotProps","paper","sx","padding","theme","spacing","anchorOrigin","vertical","horizontal","transformOrigin","onChange","shouldForwardProp","props","backgroundColor"],"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,UAAU,EAAEC,OAAO,QAAQ,gBAAgB;AAC5D,OAAOC,gBAAgB,yBAAyB;AAEhD,SAASC,QAAQ,QAAQ,QAAQ;AAEjC,SAASC,cAAc,QAAQ,sBAAa;AAC5C,SAASC,WAAW,QAAQ,mBAAgB;AAU5C,OAAO,SAASC,mBAAmB,EACjCC,KAAK,EACLC,KAAK,EACLC,OAAO,OAAO,EACdC,aAAa,EACbC,OAAO,EACiB;IACxB,MAAM,CAACC,UAAUC,YAAY,GAAGV,SAAmC;IACnE,MAAMW,SAASC,QAAQH;IAEvB,MAAMI,kBAAkB,CAACC;QACvBJ,YAAYI,MAAMC,aAAa;IACjC;IAEA,MAAMC,mBAAmB;QACvBN,YAAY;IACd;IAEA,MAAM,EACJO,YAAY,EAAEC,YAAY,EAAEC,OAAO,EAAE,EACtC,GAAGlB;IAEJ,qBACE;;0BACE,KAACmB;gBACCd,MAAMA;gBACNe,cAAY,CAAC,OAAO,EAAEjB,MAAM,MAAM,CAAC;gBACnCkB,YAAYX;gBACZY,WAAWlB;gBACXmB,SAASX;0BAET,cAAA,KAACd;;0BAEH,KAACD;gBACC2B,eAAY;gBACZC,MAAMf;gBACNF,UAAUA;gBACVkB,SAASX;gBACTY,WAAW;oBAAEC,OAAO;wBAAEC,IAAI;4BAAEC,SAAS,CAACC,QAAUA,MAAMC,OAAO,CAAC;wBAAG;oBAAE;gBAAE;gBACrEC,cAAc;oBACZC,UAAU;oBACVC,YAAY;gBACd;gBACAC,iBAAiB;oBACfF,UAAU;oBACVC,YAAY;gBACd;0BAEA,cAAA,KAAClC;oBAAYG,OAAOA;oBAAOc,SAAS;wBAACD;2BAAiBC;qBAAQ;oBAAEmB,UAAU/B;oBAAeC,SAASA;;;;;AAI1G;AAEA,MAAMY,kBAAkBxB,OAAOC,YAAY;IACzC0C,mBAAmB,CAACC,QAAUA,UAAU,gBAAgBA,UAAU;AACpE,GAGG,CAAC,EAAEjB,SAAS,EAAED,UAAU,EAAE,GAAM,CAAA;QACjCmB,iBAAiBnB,cAAcC,YAAY,GAAGA,UAAU,EAAE,CAAC,GAAG;QAC9DlB,OAAOkB;IACT,CAAA"}

package/dist/ColorPicker/index.js

@@ -10,7 +10,7 @@
 // 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 './ColorPicker';
-export * from './OptionsColorPicker';
+export * from "./ColorPicker.js";
+export * from "./OptionsColorPicker.js";
 
 //# sourceMappingURL=index.js.map

package/dist/ColorPicker/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/ColorPicker/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 './ColorPicker';\nexport * from './OptionsColorPicker';\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;AAC9B,cAAc,uBAAuB"}
+{"version":3,"sources":["../../src/ColorPicker/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 './ColorPicker';\nexport * from './OptionsColorPicker';\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;AAC9B,cAAc,0BAAuB"}

package/dist/ContentWithLegend/ContentWithLegend.d.ts

@@ -1,5 +1,5 @@
-import { ReactElement } from 'react';
-import { ContentWithLegendProps } from './model/content-with-legend-model';
+import type { ReactElement } from 'react';
+import type { ContentWithLegendProps } from './model/content-with-legend-model';
 /**
  * Component to help lay out content alongside a `Legend` component based on the
  * configuration of the legend.

package/dist/ContentWithLegend/ContentWithLegend.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ContentWithLegend.d.ts","sourceRoot":"","sources":["../../src/ContentWithLegend/ContentWithLegend.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAIrC,OAAO,EAAE,sBAAsB,EAA8B,MAAM,mCAAmC,CAAC;AAEvG;;;;;;GAMG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,QAAQ,EACR,WAAW,EACX,KAAK,EACL,MAAM,EACN,OAAW,EACX,UAAU,EACV,gBAAsB,EACtB,iBAAuB,GACxB,EAAE,sBAAsB,GAAG,YAAY,CAuCvC"}
+{"version":3,"file":"ContentWithLegend.d.ts","sourceRoot":"","sources":["../../src/ContentWithLegend/ContentWithLegend.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAI1C,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,mCAAmC,CAAC;AAGhF;;;;;;GAMG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,QAAQ,EACR,WAAW,EACX,KAAK,EACL,MAAM,EACN,OAAW,EACX,UAAU,EACV,gBAAsB,EACtB,iBAAuB,GACxB,EAAE,sBAAsB,GAAG,YAAY,CAuCvC"}

package/dist/ContentWithLegend/ContentWithLegend.js

@@ -1,3 +1,4 @@
+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.
@@ -10,11 +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, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box, useTheme } from '@mui/material';
-import { getLegendSize } from '../model';
-import { Legend } from '../Legend';
-import { getContentWithLegendLayout } from './model/content-with-legend-model';
+import { Box, useTheme } from "@mui/material";
+import { Legend } from "../Legend/index.js";
+import { getLegendSize } from "../model/index.js";
+import { getContentWithLegendLayout } from "./model/content-with-legend-model.js";
 /**
  * Component to help lay out content alongside a `Legend` component based on the
  * configuration of the legend.

package/dist/ContentWithLegend/ContentWithLegend.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/ContentWithLegend/ContentWithLegend.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 { Box, useTheme } from '@mui/material';\nimport { getLegendSize } from '../model';\nimport { Legend } from '../Legend';\nimport { ContentWithLegendProps, getContentWithLegendLayout } from './model/content-with-legend-model';\n\n/**\n * Component to help lay out content alongside a `Legend` component based on the\n * configuration of the legend.\n *\n * See the documentation for the `Legend` component for more details about the\n * features and configuration of the legend.\n */\nexport function ContentWithLegend({\n  children,\n  legendProps,\n  width,\n  height,\n  spacing = 0,\n  legendSize,\n  minChildrenWidth = 100,\n  minChildrenHeight = 100,\n}: ContentWithLegendProps): ReactElement {\n  const theme = useTheme();\n  const { content, legend, margin } = getContentWithLegendLayout({\n    width,\n    height,\n    legendProps,\n    minChildrenHeight,\n    minChildrenWidth,\n    spacing,\n    theme,\n    legendSize: getLegendSize(legendSize),\n  });\n\n  return (\n    <Box\n      style={{\n        width,\n        height,\n      }}\n      sx={{\n        position: 'relative',\n        overflow: 'hidden',\n      }}\n    >\n      <Box\n        style={{\n          width: content.width,\n          height: content.height,\n        }}\n        sx={{\n          marginRight: `${margin.right}px`,\n          marginBottom: `${margin.bottom}px`,\n        }}\n      >\n        {typeof children === 'function' ? children({ width: content.width, height: content.height }) : children}\n      </Box>\n      {legendProps && legend.show && <Legend {...legendProps} height={legend.height} width={legend.width} />}\n    </Box>\n  );\n}\n"],"names":["Box","useTheme","getLegendSize","Legend","getContentWithLegendLayout","ContentWithLegend","children","legendProps","width","height","spacing","legendSize","minChildrenWidth","minChildrenHeight","theme","content","legend","margin","style","sx","position","overflow","marginRight","right","marginBottom","bottom","show"],"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,GAAG,EAAEC,QAAQ,QAAQ,gBAAgB;AAC9C,SAASC,aAAa,QAAQ,WAAW;AACzC,SAASC,MAAM,QAAQ,YAAY;AACnC,SAAiCC,0BAA0B,QAAQ,oCAAoC;AAEvG;;;;;;CAMC,GACD,OAAO,SAASC,kBAAkB,EAChCC,QAAQ,EACRC,WAAW,EACXC,KAAK,EACLC,MAAM,EACNC,UAAU,CAAC,EACXC,UAAU,EACVC,mBAAmB,GAAG,EACtBC,oBAAoB,GAAG,EACA;IACvB,MAAMC,QAAQb;IACd,MAAM,EAAEc,OAAO,EAAEC,MAAM,EAAEC,MAAM,EAAE,GAAGb,2BAA2B;QAC7DI;QACAC;QACAF;QACAM;QACAD;QACAF;QACAI;QACAH,YAAYT,cAAcS;IAC5B;IAEA,qBACE,MAACX;QACCkB,OAAO;YACLV;YACAC;QACF;QACAU,IAAI;YACFC,UAAU;YACVC,UAAU;QACZ;;0BAEA,KAACrB;gBACCkB,OAAO;oBACLV,OAAOO,QAAQP,KAAK;oBACpBC,QAAQM,QAAQN,MAAM;gBACxB;gBACAU,IAAI;oBACFG,aAAa,GAAGL,OAAOM,KAAK,CAAC,EAAE,CAAC;oBAChCC,cAAc,GAAGP,OAAOQ,MAAM,CAAC,EAAE,CAAC;gBACpC;0BAEC,OAAOnB,aAAa,aAAaA,SAAS;oBAAEE,OAAOO,QAAQP,KAAK;oBAAEC,QAAQM,QAAQN,MAAM;gBAAC,KAAKH;;YAEhGC,eAAeS,OAAOU,IAAI,kBAAI,KAACvB;gBAAQ,GAAGI,WAAW;gBAAEE,QAAQO,OAAOP,MAAM;gBAAED,OAAOQ,OAAOR,KAAK;;;;AAGxG"}
+{"version":3,"sources":["../../src/ContentWithLegend/ContentWithLegend.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 { Box, useTheme } from '@mui/material';\nimport type { ReactElement } from 'react';\n\nimport { Legend } from '../Legend';\nimport { getLegendSize } from '../model';\nimport type { ContentWithLegendProps } from './model/content-with-legend-model';\nimport { getContentWithLegendLayout } from './model/content-with-legend-model';\n\n/**\n * Component to help lay out content alongside a `Legend` component based on the\n * configuration of the legend.\n *\n * See the documentation for the `Legend` component for more details about the\n * features and configuration of the legend.\n */\nexport function ContentWithLegend({\n  children,\n  legendProps,\n  width,\n  height,\n  spacing = 0,\n  legendSize,\n  minChildrenWidth = 100,\n  minChildrenHeight = 100,\n}: ContentWithLegendProps): ReactElement {\n  const theme = useTheme();\n  const { content, legend, margin } = getContentWithLegendLayout({\n    width,\n    height,\n    legendProps,\n    minChildrenHeight,\n    minChildrenWidth,\n    spacing,\n    theme,\n    legendSize: getLegendSize(legendSize),\n  });\n\n  return (\n    <Box\n      style={{\n        width,\n        height,\n      }}\n      sx={{\n        position: 'relative',\n        overflow: 'hidden',\n      }}\n    >\n      <Box\n        style={{\n          width: content.width,\n          height: content.height,\n        }}\n        sx={{\n          marginRight: `${margin.right}px`,\n          marginBottom: `${margin.bottom}px`,\n        }}\n      >\n        {typeof children === 'function' ? children({ width: content.width, height: content.height }) : children}\n      </Box>\n      {legendProps && legend.show && <Legend {...legendProps} height={legend.height} width={legend.width} />}\n    </Box>\n  );\n}\n"],"names":["Box","useTheme","Legend","getLegendSize","getContentWithLegendLayout","ContentWithLegend","children","legendProps","width","height","spacing","legendSize","minChildrenWidth","minChildrenHeight","theme","content","legend","margin","style","sx","position","overflow","marginRight","right","marginBottom","bottom","show"],"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,GAAG,EAAEC,QAAQ,QAAQ,gBAAgB;AAG9C,SAASC,MAAM,QAAQ,qBAAY;AACnC,SAASC,aAAa,QAAQ,oBAAW;AAEzC,SAASC,0BAA0B,QAAQ,uCAAoC;AAE/E;;;;;;CAMC,GACD,OAAO,SAASC,kBAAkB,EAChCC,QAAQ,EACRC,WAAW,EACXC,KAAK,EACLC,MAAM,EACNC,UAAU,CAAC,EACXC,UAAU,EACVC,mBAAmB,GAAG,EACtBC,oBAAoB,GAAG,EACA;IACvB,MAAMC,QAAQb;IACd,MAAM,EAAEc,OAAO,EAAEC,MAAM,EAAEC,MAAM,EAAE,GAAGb,2BAA2B;QAC7DI;QACAC;QACAF;QACAM;QACAD;QACAF;QACAI;QACAH,YAAYR,cAAcQ;IAC5B;IAEA,qBACE,MAACX;QACCkB,OAAO;YACLV;YACAC;QACF;QACAU,IAAI;YACFC,UAAU;YACVC,UAAU;QACZ;;0BAEA,KAACrB;gBACCkB,OAAO;oBACLV,OAAOO,QAAQP,KAAK;oBACpBC,QAAQM,QAAQN,MAAM;gBACxB;gBACAU,IAAI;oBACFG,aAAa,GAAGL,OAAOM,KAAK,CAAC,EAAE,CAAC;oBAChCC,cAAc,GAAGP,OAAOQ,MAAM,CAAC,EAAE,CAAC;gBACpC;0BAEC,OAAOnB,aAAa,aAAaA,SAAS;oBAAEE,OAAOO,QAAQP,KAAK;oBAAEC,QAAQM,QAAQN,MAAM;gBAAC,KAAKH;;YAEhGC,eAAeS,OAAOU,IAAI,kBAAI,KAACxB;gBAAQ,GAAGK,WAAW;gBAAEE,QAAQO,OAAOP,MAAM;gBAAED,OAAOQ,OAAOR,KAAK;;;;AAGxG"}

package/dist/ContentWithLegend/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 './ContentWithLegend';
+export * from "./ContentWithLegend.js";
 
 //# sourceMappingURL=index.js.map

package/dist/ContentWithLegend/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/ContentWithLegend/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 './ContentWithLegend';\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,sBAAsB"}
+{"version":3,"sources":["../../src/ContentWithLegend/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 './ContentWithLegend';\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,yBAAsB"}

package/dist/ContentWithLegend/model/content-with-legend-model.d.ts

@@ -1,7 +1,6 @@
-/// <reference types="react" />
-import { Theme } from '@mui/material';
-import { LegendPositions, LegendSize } from '../../model';
-import { LegendProps } from '../../Legend';
+import type { Theme } from '@mui/material';
+import type { LegendProps } from '../../Legend';
+import type { LegendPositions, LegendSize } from '../../model';
 type Dimensions = {
     width: number;
     height: number;

package/dist/ContentWithLegend/model/content-with-legend-model.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"content-with-legend-model.d.ts","sourceRoot":"","sources":["../../../src/ContentWithLegend/model/content-with-legend-model.ts"],"names":[],"mappings":";AAaA,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACtC,OAAO,EAAE,eAAe,EAAiB,UAAU,EAAE,MAAM,aAAa,CAAC;AACzE,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAG3C,KAAK,UAAU,GAAG;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,MAAM,WAAW,sBAAsB;IACrC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,MAAM,EAAE,MAAM,CAAC;IACf;;;;;OAKG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,UAAU,KAAK,KAAK,CAAC,SAAS,CAAC,CAAC;IAEjF;;;;OAIG;IACH,UAAU,CAAC,EAAE,UAAU,CAAC;IAExB;;;OAGG;IACH,WAAW,CAAC,EAAE,IAAI,CAAC,WAAW,EAAE,OAAO,GAAG,QAAQ,CAAC,CAAC;IAEpD;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B;AAED,MAAM,WAAW,2BAA4B,SAAQ,QAAQ,CAC3D,IAAI,CAAC,sBAAsB,EAAE,UAAU,GAAG,aAAa,CAAC,CACzD;IACC,WAAW,CAAC,EAAE,sBAAsB,CAAC,aAAa,CAAC,CAAC;IACpD,KAAK,EAAE,KAAK,CAAC;CACd;AAED,MAAM,WAAW,uBAAuB;IACtC,MAAM,EAAE,UAAU,GAAG;QACnB,IAAI,EAAE,OAAO,CAAC;KACf,CAAC;IACF,OAAO,EAAE,UAAU,CAAC;IACpB,MAAM,EAAE;QACN,KAAK,EAAE,MAAM,CAAC;QACd,MAAM,EAAE,MAAM,CAAC;KAChB,CAAC;CACH;AAED,KAAK,gBAAgB,GAAG,MAAM,CAAC,UAAU,EAAE,MAAM,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC,CAAC;AAE5E,eAAO,MAAM,iBAAiB,EAAE,gBAe/B,CAAC;AAMF;;GAEG;AACH,wBAAgB,0BAA0B,CAAC,EACzC,KAAK,EACL,MAAM,EACN,WAAW,EACX,UAAU,EACV,iBAAiB,EACjB,gBAAgB,EAChB,OAAO,EACP,KAAK,GACN,EAAE,2BAA2B,GAAG,uBAAuB,CAwFvD"}
+{"version":3,"file":"content-with-legend-model.d.ts","sourceRoot":"","sources":["../../../src/ContentWithLegend/model/content-with-legend-model.ts"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAE3C,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAChD,OAAO,KAAK,EAAE,eAAe,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAI/D,KAAK,UAAU,GAAG;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,MAAM,WAAW,sBAAsB;IACrC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,MAAM,EAAE,MAAM,CAAC;IACf;;;;;OAKG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,UAAU,KAAK,KAAK,CAAC,SAAS,CAAC,CAAC;IAEjF;;;;OAIG;IACH,UAAU,CAAC,EAAE,UAAU,CAAC;IAExB;;;OAGG;IACH,WAAW,CAAC,EAAE,IAAI,CAAC,WAAW,EAAE,OAAO,GAAG,QAAQ,CAAC,CAAC;IAEpD;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B;AAED,MAAM,WAAW,2BAA4B,SAAQ,QAAQ,CAC3D,IAAI,CAAC,sBAAsB,EAAE,UAAU,GAAG,aAAa,CAAC,CACzD;IACC,WAAW,CAAC,EAAE,sBAAsB,CAAC,aAAa,CAAC,CAAC;IACpD,KAAK,EAAE,KAAK,CAAC;CACd;AAED,MAAM,WAAW,uBAAuB;IACtC,MAAM,EAAE,UAAU,GAAG;QACnB,IAAI,EAAE,OAAO,CAAC;KACf,CAAC;IACF,OAAO,EAAE,UAAU,CAAC;IACpB,MAAM,EAAE;QACN,KAAK,EAAE,MAAM,CAAC;QACd,MAAM,EAAE,MAAM,CAAC;KAChB,CAAC;CACH;AAED,KAAK,gBAAgB,GAAG,MAAM,CAAC,UAAU,EAAE,MAAM,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC,CAAC;AAE5E,eAAO,MAAM,iBAAiB,EAAE,gBAe/B,CAAC;AAMF;;GAEG;AACH,wBAAgB,0BAA0B,CAAC,EACzC,KAAK,EACL,MAAM,EACN,WAAW,EACX,UAAU,EACV,iBAAiB,EACjB,gBAAgB,EAChB,OAAO,EACP,KAAK,GACN,EAAE,2BAA2B,GAAG,uBAAuB,CAwFvD"}

package/dist/ContentWithLegend/model/content-with-legend-model.js

@@ -10,8 +10,8 @@
 // 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 { getLegendMode } from '../../model';
-import { getTableCellLayout } from '../../Table';
+import { getLegendMode } from "../../model/index.js";
+import { getTableCellLayout } from "../../Table/index.js";
 export const TABLE_LEGEND_SIZE = {
     medium: {
         // 5 rows plus header. Value to be multiplied by row height in pixels.

package/dist/ContentWithLegend/model/content-with-legend-model.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/ContentWithLegend/model/content-with-legend-model.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\nimport { Theme } from '@mui/material';\nimport { LegendPositions, getLegendMode, LegendSize } from '../../model';\nimport { LegendProps } from '../../Legend';\nimport { getTableCellLayout } from '../../Table';\n\ntype Dimensions = {\n  width: number;\n  height: number;\n};\n\nexport interface ContentWithLegendProps {\n  /**\n   * Width of the overall component layout in pixels.\n   */\n  width: number;\n  /**\n   * Height of overall component layout in pixels.\n   */\n  height: number;\n  /**\n   * Child content to render next to the legend. May be a react node or a\n   * function that returns a react node. The function provides the expected\n   * height and width for the content, which can be useful for passing down\n   * to chart components.\n   */\n  children: React.ReactNode | (({ width, height }: Dimensions) => React.ReactNode);\n\n  /**\n   * Size used for the legend.\n   *\n   * @default 'medium'\n   */\n  legendSize?: LegendSize;\n\n  /**\n   * Props to configure the legend. If not set, the content is rendered without\n   * a legend.\n   */\n  legendProps?: Omit<LegendProps, 'width' | 'height'>;\n\n  /**\n   * Space to put between the children and the legend in pixels.\n   */\n  spacing?: number;\n\n  /**\n   * Minimum width required for the content specified by the `children` prop.\n   * If this width cannot be maintained with a right positioned legend, the\n   * legend will not be shown.\n   */\n  minChildrenWidth?: number;\n\n  /**\n   * Minimum height required for the content specified by the `children` prop.\n   * If this width cannot be maintained with a bottom positioned legend, the\n   * legend will not be shown.\n   */\n  minChildrenHeight?: number;\n}\n\nexport interface ContentWithLegendLayoutOpts extends Required<\n  Omit<ContentWithLegendProps, 'children' | 'legendProps'>\n> {\n  legendProps?: ContentWithLegendProps['legendProps'];\n  theme: Theme;\n}\n\nexport interface ContentWithLegendLayout {\n  legend: Dimensions & {\n    show: boolean;\n  };\n  content: Dimensions;\n  margin: {\n    right: number;\n    bottom: number;\n  };\n}\n\ntype LegendSizeConfig = Record<LegendSize, Record<LegendPositions, number>>;\n\nexport const TABLE_LEGEND_SIZE: LegendSizeConfig = {\n  medium: {\n    // 5 rows plus header. Value to be multiplied by row height in pixels.\n    bottom: 6,\n\n    // Pixel value\n    right: 250,\n  },\n  small: {\n    // 3 rows plus header. Value to be multiplied by row height in pixels.\n    bottom: 4,\n\n    // Pixel value\n    right: 150,\n  },\n};\n\nconst PANEL_HEIGHT_LG_BREAKPOINT = 300;\nconst LEGEND_HEIGHT_SM = 40;\nconst LEGEND_HEIGHT_LG = 100;\n\n/**\n * Returns information for laying out content alongside a legend.\n */\nexport function getContentWithLegendLayout({\n  width,\n  height,\n  legendProps,\n  legendSize,\n  minChildrenHeight,\n  minChildrenWidth,\n  spacing,\n  theme,\n}: ContentWithLegendLayoutOpts): ContentWithLegendLayout {\n  const legendOptions = legendProps?.options;\n  const hasLegend = !!legendOptions;\n\n  const noLegendLayout: ContentWithLegendLayout = {\n    legend: {\n      show: false,\n      width: 0,\n      height: 0,\n    },\n    content: {\n      width,\n      height,\n    },\n    margin: {\n      right: 0,\n      bottom: 0,\n    },\n  };\n\n  if (!hasLegend) {\n    return noLegendLayout;\n  }\n\n  const { position } = legendOptions;\n  const mode = getLegendMode(legendOptions.mode);\n\n  let legendWidth;\n  let legendHeight;\n\n  if (mode === 'list') {\n    // TODO: normalize list to share similar height options as the table\n    // when we add more size options.\n    legendWidth = position === 'right' ? 200 : width;\n\n    // TODO: account for number of legend items returned when adjusting legend spacing\n    legendHeight = LEGEND_HEIGHT_SM;\n    if (position === 'right') {\n      legendHeight = height;\n    } else if (height >= PANEL_HEIGHT_LG_BREAKPOINT) {\n      legendHeight = LEGEND_HEIGHT_LG;\n    }\n  } else {\n    // Table mode\n\n    const tableLayout = getTableCellLayout(theme, 'compact');\n\n    const tableColumns = legendProps?.tableProps?.columns || [];\n    const columnsWidth = tableColumns.reduce((total, col) => {\n      if (typeof col.width === 'number') {\n        total += col.width;\n      }\n      return total;\n    }, 0);\n\n    legendWidth = position === 'right' ? TABLE_LEGEND_SIZE[legendSize]['right'] + columnsWidth : width;\n\n    // Use the smaller of the size-based row count or the number of legend items + 1 for the header.\n    const rowsToShow = Math.min(TABLE_LEGEND_SIZE[legendSize]['bottom'], legendProps.data.length + 1);\n    legendHeight = position === 'bottom' ? rowsToShow * tableLayout.height : height;\n  }\n\n  const contentWidth = position === 'right' ? width - legendWidth - spacing : width;\n  const contentHeight = position === 'bottom' ? height - legendHeight - spacing : height;\n\n  if (\n    (position === 'right' && contentWidth < minChildrenWidth) ||\n    (position === 'bottom' && contentHeight < minChildrenHeight)\n  ) {\n    // Legend does not fit. Just show the content.\n    return noLegendLayout;\n  }\n\n  return {\n    legend: {\n      width: legendWidth,\n      height: legendHeight,\n      show: true,\n    },\n    content: {\n      width: contentWidth,\n      height: contentHeight,\n    },\n    margin: {\n      right: position === 'right' ? spacing : 0,\n      bottom: position === 'bottom' ? spacing : 0,\n    },\n  };\n}\n"],"names":["getLegendMode","getTableCellLayout","TABLE_LEGEND_SIZE","medium","bottom","right","small","PANEL_HEIGHT_LG_BREAKPOINT","LEGEND_HEIGHT_SM","LEGEND_HEIGHT_LG","getContentWithLegendLayout","width","height","legendProps","legendSize","minChildrenHeight","minChildrenWidth","spacing","theme","legendOptions","options","hasLegend","noLegendLayout","legend","show","content","margin","position","mode","legendWidth","legendHeight","tableLayout","tableColumns","tableProps","columns","columnsWidth","reduce","total","col","rowsToShow","Math","min","data","length","contentWidth","contentHeight"],"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,SAA0BA,aAAa,QAAoB,cAAc;AAEzE,SAASC,kBAAkB,QAAQ,cAAc;AA6EjD,OAAO,MAAMC,oBAAsC;IACjDC,QAAQ;QACN,sEAAsE;QACtEC,QAAQ;QAER,cAAc;QACdC,OAAO;IACT;IACAC,OAAO;QACL,sEAAsE;QACtEF,QAAQ;QAER,cAAc;QACdC,OAAO;IACT;AACF,EAAE;AAEF,MAAME,6BAA6B;AACnC,MAAMC,mBAAmB;AACzB,MAAMC,mBAAmB;AAEzB;;CAEC,GACD,OAAO,SAASC,2BAA2B,EACzCC,KAAK,EACLC,MAAM,EACNC,WAAW,EACXC,UAAU,EACVC,iBAAiB,EACjBC,gBAAgB,EAChBC,OAAO,EACPC,KAAK,EACuB;IAC5B,MAAMC,gBAAgBN,aAAaO;IACnC,MAAMC,YAAY,CAAC,CAACF;IAEpB,MAAMG,iBAA0C;QAC9CC,QAAQ;YACNC,MAAM;YACNb,OAAO;YACPC,QAAQ;QACV;QACAa,SAAS;YACPd;YACAC;QACF;QACAc,QAAQ;YACNrB,OAAO;YACPD,QAAQ;QACV;IACF;IAEA,IAAI,CAACiB,WAAW;QACd,OAAOC;IACT;IAEA,MAAM,EAAEK,QAAQ,EAAE,GAAGR;IACrB,MAAMS,OAAO5B,cAAcmB,cAAcS,IAAI;IAE7C,IAAIC;IACJ,IAAIC;IAEJ,IAAIF,SAAS,QAAQ;QACnB,oEAAoE;QACpE,iCAAiC;QACjCC,cAAcF,aAAa,UAAU,MAAMhB;QAE3C,kFAAkF;QAClFmB,eAAetB;QACf,IAAImB,aAAa,SAAS;YACxBG,eAAelB;QACjB,OAAO,IAAIA,UAAUL,4BAA4B;YAC/CuB,eAAerB;QACjB;IACF,OAAO;QACL,aAAa;QAEb,MAAMsB,cAAc9B,mBAAmBiB,OAAO;QAE9C,MAAMc,eAAenB,aAAaoB,YAAYC,WAAW,EAAE;QAC3D,MAAMC,eAAeH,aAAaI,MAAM,CAAC,CAACC,OAAOC;YAC/C,IAAI,OAAOA,IAAI3B,KAAK,KAAK,UAAU;gBACjC0B,SAASC,IAAI3B,KAAK;YACpB;YACA,OAAO0B;QACT,GAAG;QAEHR,cAAcF,aAAa,UAAUzB,iBAAiB,CAACY,WAAW,CAAC,QAAQ,GAAGqB,eAAexB;QAE7F,gGAAgG;QAChG,MAAM4B,aAAaC,KAAKC,GAAG,CAACvC,iBAAiB,CAACY,WAAW,CAAC,SAAS,EAAED,YAAY6B,IAAI,CAACC,MAAM,GAAG;QAC/Fb,eAAeH,aAAa,WAAWY,aAAaR,YAAYnB,MAAM,GAAGA;IAC3E;IAEA,MAAMgC,eAAejB,aAAa,UAAUhB,QAAQkB,cAAcZ,UAAUN;IAC5E,MAAMkC,gBAAgBlB,aAAa,WAAWf,SAASkB,eAAeb,UAAUL;IAEhF,IACE,AAACe,aAAa,WAAWiB,eAAe5B,oBACvCW,aAAa,YAAYkB,gBAAgB9B,mBAC1C;QACA,8CAA8C;QAC9C,OAAOO;IACT;IAEA,OAAO;QACLC,QAAQ;YACNZ,OAAOkB;YACPjB,QAAQkB;YACRN,MAAM;QACR;QACAC,SAAS;YACPd,OAAOiC;YACPhC,QAAQiC;QACV;QACAnB,QAAQ;YACNrB,OAAOsB,aAAa,UAAUV,UAAU;YACxCb,QAAQuB,aAAa,WAAWV,UAAU;QAC5C;IACF;AACF"}
+{"version":3,"sources":["../../../src/ContentWithLegend/model/content-with-legend-model.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\nimport type { Theme } from '@mui/material';\n\nimport type { LegendProps } from '../../Legend';\nimport type { LegendPositions, LegendSize } from '../../model';\nimport { getLegendMode } from '../../model';\nimport { getTableCellLayout } from '../../Table';\n\ntype Dimensions = {\n  width: number;\n  height: number;\n};\n\nexport interface ContentWithLegendProps {\n  /**\n   * Width of the overall component layout in pixels.\n   */\n  width: number;\n  /**\n   * Height of overall component layout in pixels.\n   */\n  height: number;\n  /**\n   * Child content to render next to the legend. May be a react node or a\n   * function that returns a react node. The function provides the expected\n   * height and width for the content, which can be useful for passing down\n   * to chart components.\n   */\n  children: React.ReactNode | (({ width, height }: Dimensions) => React.ReactNode);\n\n  /**\n   * Size used for the legend.\n   *\n   * @default 'medium'\n   */\n  legendSize?: LegendSize;\n\n  /**\n   * Props to configure the legend. If not set, the content is rendered without\n   * a legend.\n   */\n  legendProps?: Omit<LegendProps, 'width' | 'height'>;\n\n  /**\n   * Space to put between the children and the legend in pixels.\n   */\n  spacing?: number;\n\n  /**\n   * Minimum width required for the content specified by the `children` prop.\n   * If this width cannot be maintained with a right positioned legend, the\n   * legend will not be shown.\n   */\n  minChildrenWidth?: number;\n\n  /**\n   * Minimum height required for the content specified by the `children` prop.\n   * If this width cannot be maintained with a bottom positioned legend, the\n   * legend will not be shown.\n   */\n  minChildrenHeight?: number;\n}\n\nexport interface ContentWithLegendLayoutOpts extends Required<\n  Omit<ContentWithLegendProps, 'children' | 'legendProps'>\n> {\n  legendProps?: ContentWithLegendProps['legendProps'];\n  theme: Theme;\n}\n\nexport interface ContentWithLegendLayout {\n  legend: Dimensions & {\n    show: boolean;\n  };\n  content: Dimensions;\n  margin: {\n    right: number;\n    bottom: number;\n  };\n}\n\ntype LegendSizeConfig = Record<LegendSize, Record<LegendPositions, number>>;\n\nexport const TABLE_LEGEND_SIZE: LegendSizeConfig = {\n  medium: {\n    // 5 rows plus header. Value to be multiplied by row height in pixels.\n    bottom: 6,\n\n    // Pixel value\n    right: 250,\n  },\n  small: {\n    // 3 rows plus header. Value to be multiplied by row height in pixels.\n    bottom: 4,\n\n    // Pixel value\n    right: 150,\n  },\n};\n\nconst PANEL_HEIGHT_LG_BREAKPOINT = 300;\nconst LEGEND_HEIGHT_SM = 40;\nconst LEGEND_HEIGHT_LG = 100;\n\n/**\n * Returns information for laying out content alongside a legend.\n */\nexport function getContentWithLegendLayout({\n  width,\n  height,\n  legendProps,\n  legendSize,\n  minChildrenHeight,\n  minChildrenWidth,\n  spacing,\n  theme,\n}: ContentWithLegendLayoutOpts): ContentWithLegendLayout {\n  const legendOptions = legendProps?.options;\n  const hasLegend = !!legendOptions;\n\n  const noLegendLayout: ContentWithLegendLayout = {\n    legend: {\n      show: false,\n      width: 0,\n      height: 0,\n    },\n    content: {\n      width,\n      height,\n    },\n    margin: {\n      right: 0,\n      bottom: 0,\n    },\n  };\n\n  if (!hasLegend) {\n    return noLegendLayout;\n  }\n\n  const { position } = legendOptions;\n  const mode = getLegendMode(legendOptions.mode);\n\n  let legendWidth;\n  let legendHeight;\n\n  if (mode === 'list') {\n    // TODO: normalize list to share similar height options as the table\n    // when we add more size options.\n    legendWidth = position === 'right' ? 200 : width;\n\n    // TODO: account for number of legend items returned when adjusting legend spacing\n    legendHeight = LEGEND_HEIGHT_SM;\n    if (position === 'right') {\n      legendHeight = height;\n    } else if (height >= PANEL_HEIGHT_LG_BREAKPOINT) {\n      legendHeight = LEGEND_HEIGHT_LG;\n    }\n  } else {\n    // Table mode\n\n    const tableLayout = getTableCellLayout(theme, 'compact');\n\n    const tableColumns = legendProps?.tableProps?.columns || [];\n    const columnsWidth = tableColumns.reduce((total, col) => {\n      if (typeof col.width === 'number') {\n        total += col.width;\n      }\n      return total;\n    }, 0);\n\n    legendWidth = position === 'right' ? TABLE_LEGEND_SIZE[legendSize]['right'] + columnsWidth : width;\n\n    // Use the smaller of the size-based row count or the number of legend items + 1 for the header.\n    const rowsToShow = Math.min(TABLE_LEGEND_SIZE[legendSize]['bottom'], legendProps.data.length + 1);\n    legendHeight = position === 'bottom' ? rowsToShow * tableLayout.height : height;\n  }\n\n  const contentWidth = position === 'right' ? width - legendWidth - spacing : width;\n  const contentHeight = position === 'bottom' ? height - legendHeight - spacing : height;\n\n  if (\n    (position === 'right' && contentWidth < minChildrenWidth) ||\n    (position === 'bottom' && contentHeight < minChildrenHeight)\n  ) {\n    // Legend does not fit. Just show the content.\n    return noLegendLayout;\n  }\n\n  return {\n    legend: {\n      width: legendWidth,\n      height: legendHeight,\n      show: true,\n    },\n    content: {\n      width: contentWidth,\n      height: contentHeight,\n    },\n    margin: {\n      right: position === 'right' ? spacing : 0,\n      bottom: position === 'bottom' ? spacing : 0,\n    },\n  };\n}\n"],"names":["getLegendMode","getTableCellLayout","TABLE_LEGEND_SIZE","medium","bottom","right","small","PANEL_HEIGHT_LG_BREAKPOINT","LEGEND_HEIGHT_SM","LEGEND_HEIGHT_LG","getContentWithLegendLayout","width","height","legendProps","legendSize","minChildrenHeight","minChildrenWidth","spacing","theme","legendOptions","options","hasLegend","noLegendLayout","legend","show","content","margin","position","mode","legendWidth","legendHeight","tableLayout","tableColumns","tableProps","columns","columnsWidth","reduce","total","col","rowsToShow","Math","min","data","length","contentWidth","contentHeight"],"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;AAMjC,SAASA,aAAa,QAAQ,uBAAc;AAC5C,SAASC,kBAAkB,QAAQ,uBAAc;AA6EjD,OAAO,MAAMC,oBAAsC;IACjDC,QAAQ;QACN,sEAAsE;QACtEC,QAAQ;QAER,cAAc;QACdC,OAAO;IACT;IACAC,OAAO;QACL,sEAAsE;QACtEF,QAAQ;QAER,cAAc;QACdC,OAAO;IACT;AACF,EAAE;AAEF,MAAME,6BAA6B;AACnC,MAAMC,mBAAmB;AACzB,MAAMC,mBAAmB;AAEzB;;CAEC,GACD,OAAO,SAASC,2BAA2B,EACzCC,KAAK,EACLC,MAAM,EACNC,WAAW,EACXC,UAAU,EACVC,iBAAiB,EACjBC,gBAAgB,EAChBC,OAAO,EACPC,KAAK,EACuB;IAC5B,MAAMC,gBAAgBN,aAAaO;IACnC,MAAMC,YAAY,CAAC,CAACF;IAEpB,MAAMG,iBAA0C;QAC9CC,QAAQ;YACNC,MAAM;YACNb,OAAO;YACPC,QAAQ;QACV;QACAa,SAAS;YACPd;YACAC;QACF;QACAc,QAAQ;YACNrB,OAAO;YACPD,QAAQ;QACV;IACF;IAEA,IAAI,CAACiB,WAAW;QACd,OAAOC;IACT;IAEA,MAAM,EAAEK,QAAQ,EAAE,GAAGR;IACrB,MAAMS,OAAO5B,cAAcmB,cAAcS,IAAI;IAE7C,IAAIC;IACJ,IAAIC;IAEJ,IAAIF,SAAS,QAAQ;QACnB,oEAAoE;QACpE,iCAAiC;QACjCC,cAAcF,aAAa,UAAU,MAAMhB;QAE3C,kFAAkF;QAClFmB,eAAetB;QACf,IAAImB,aAAa,SAAS;YACxBG,eAAelB;QACjB,OAAO,IAAIA,UAAUL,4BAA4B;YAC/CuB,eAAerB;QACjB;IACF,OAAO;QACL,aAAa;QAEb,MAAMsB,cAAc9B,mBAAmBiB,OAAO;QAE9C,MAAMc,eAAenB,aAAaoB,YAAYC,WAAW,EAAE;QAC3D,MAAMC,eAAeH,aAAaI,MAAM,CAAC,CAACC,OAAOC;YAC/C,IAAI,OAAOA,IAAI3B,KAAK,KAAK,UAAU;gBACjC0B,SAASC,IAAI3B,KAAK;YACpB;YACA,OAAO0B;QACT,GAAG;QAEHR,cAAcF,aAAa,UAAUzB,iBAAiB,CAACY,WAAW,CAAC,QAAQ,GAAGqB,eAAexB;QAE7F,gGAAgG;QAChG,MAAM4B,aAAaC,KAAKC,GAAG,CAACvC,iBAAiB,CAACY,WAAW,CAAC,SAAS,EAAED,YAAY6B,IAAI,CAACC,MAAM,GAAG;QAC/Fb,eAAeH,aAAa,WAAWY,aAAaR,YAAYnB,MAAM,GAAGA;IAC3E;IAEA,MAAMgC,eAAejB,aAAa,UAAUhB,QAAQkB,cAAcZ,UAAUN;IAC5E,MAAMkC,gBAAgBlB,aAAa,WAAWf,SAASkB,eAAeb,UAAUL;IAEhF,IACE,AAACe,aAAa,WAAWiB,eAAe5B,oBACvCW,aAAa,YAAYkB,gBAAgB9B,mBAC1C;QACA,8CAA8C;QAC9C,OAAOO;IACT;IAEA,OAAO;QACLC,QAAQ;YACNZ,OAAOkB;YACPjB,QAAQkB;YACRN,MAAM;QACR;QACAC,SAAS;YACPd,OAAOiC;YACPhC,QAAQiC;QACV;QACAnB,QAAQ;YACNrB,OAAOsB,aAAa,UAAUV,UAAU;YACxCb,QAAQuB,aAAa,WAAWV,UAAU;QAC5C;IACF;AACF"}

package/dist/DensitySelector/DensitySelector.d.ts

@@ -1,4 +1,4 @@
-import { ReactElement } from 'react';
+import type { ReactElement } from 'react';
 export type DensityOption = 'compact' | 'standard' | 'comfortable';
 export interface DensitySelectorProps {
     onChange: (density: DensityOption) => void;

package/dist/DensitySelector/DensitySelector.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DensitySelector.d.ts","sourceRoot":"","sources":["../../src/DensitySelector/DensitySelector.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAUrC,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,UAAU,GAAG,aAAa,CAAC;AAEnE,MAAM,WAAW,oBAAoB;IACnC,QAAQ,EAAE,CAAC,OAAO,EAAE,aAAa,KAAK,IAAI,CAAC;IAC3C,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB;AAED,wBAAgB,eAAe,CAAC,EAAE,QAAQ,EAAE,KAAkB,EAAE,EAAE,oBAAoB,GAAG,YAAY,CAmBpG"}
+{"version":3,"file":"DensitySelector.d.ts","sourceRoot":"","sources":["../../src/DensitySelector/DensitySelector.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAW1C,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,UAAU,GAAG,aAAa,CAAC;AAEnE,MAAM,WAAW,oBAAoB;IACnC,QAAQ,EAAE,CAAC,OAAO,EAAE,aAAa,KAAK,IAAI,CAAC;IAC3C,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB;AAED,wBAAgB,eAAe,CAAC,EAAE,QAAQ,EAAE,KAAkB,EAAE,EAAE,oBAAoB,GAAG,YAAY,CAmBpG"}

package/dist/DensitySelector/DensitySelector.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 DENSITY_OPTIONS = [
     {
         id: 'compact',

package/dist/DensitySelector/DensitySelector.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/DensitySelector/DensitySelector.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 DENSITY_OPTIONS: Array<{ id: DensityOption; label: string }> = [\n  { id: 'compact', label: 'Compact' },\n  { id: 'standard', label: 'Standard' },\n  { id: 'comfortable', label: 'Comfortable' },\n];\n\nexport type DensityOption = 'compact' | 'standard' | 'comfortable';\n\nexport interface DensitySelectorProps {\n  onChange: (density: DensityOption) => void;\n  value?: DensityOption;\n}\n\nexport function DensitySelector({ onChange, value = 'standard' }: DensitySelectorProps): ReactElement {\n  const handleSortChange = (_: unknown, { id }: { id: DensityOption }): void => {\n    onChange(id);\n  };\n\n  return (\n    <OptionsEditorControl\n      label=\"Density\"\n      control={\n        <SettingsAutocomplete\n          value={DENSITY_OPTIONS.find((o) => o.id === value)}\n          options={DENSITY_OPTIONS}\n          getOptionLabel={(o) => o.label}\n          onChange={handleSortChange}\n          disableClearable\n        />\n      }\n    />\n  );\n}\n"],"names":["OptionsEditorControl","SettingsAutocomplete","DENSITY_OPTIONS","id","label","DensitySelector","onChange","value","handleSortChange","_","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,kBAA+D;IACnE;QAAEC,IAAI;QAAWC,OAAO;IAAU;IAClC;QAAED,IAAI;QAAYC,OAAO;IAAW;IACpC;QAAED,IAAI;QAAeC,OAAO;IAAc;CAC3C;AASD,OAAO,SAASC,gBAAgB,EAAEC,QAAQ,EAAEC,QAAQ,UAAU,EAAwB;IACpF,MAAMC,mBAAmB,CAACC,GAAY,EAAEN,EAAE,EAAyB;QACjEG,SAASH;IACX;IAEA,qBACE,KAACH;QACCI,OAAM;QACNM,uBACE,KAACT;YACCM,OAAOL,gBAAgBS,IAAI,CAAC,CAACC,IAAMA,EAAET,EAAE,KAAKI;YAC5CM,SAASX;YACTY,gBAAgB,CAACF,IAAMA,EAAER,KAAK;YAC9BE,UAAUE;YACVO,gBAAgB;;;AAK1B"}
+{"version":3,"sources":["../../src/DensitySelector/DensitySelector.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 DENSITY_OPTIONS: Array<{ id: DensityOption; label: string }> = [\n  { id: 'compact', label: 'Compact' },\n  { id: 'standard', label: 'Standard' },\n  { id: 'comfortable', label: 'Comfortable' },\n];\n\nexport type DensityOption = 'compact' | 'standard' | 'comfortable';\n\nexport interface DensitySelectorProps {\n  onChange: (density: DensityOption) => void;\n  value?: DensityOption;\n}\n\nexport function DensitySelector({ onChange, value = 'standard' }: DensitySelectorProps): ReactElement {\n  const handleSortChange = (_: unknown, { id }: { id: DensityOption }): void => {\n    onChange(id);\n  };\n\n  return (\n    <OptionsEditorControl\n      label=\"Density\"\n      control={\n        <SettingsAutocomplete\n          value={DENSITY_OPTIONS.find((o) => o.id === value)}\n          options={DENSITY_OPTIONS}\n          getOptionLabel={(o) => o.label}\n          onChange={handleSortChange}\n          disableClearable\n        />\n      }\n    />\n  );\n}\n"],"names":["OptionsEditorControl","SettingsAutocomplete","DENSITY_OPTIONS","id","label","DensitySelector","onChange","value","handleSortChange","_","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,kBAA+D;IACnE;QAAEC,IAAI;QAAWC,OAAO;IAAU;IAClC;QAAED,IAAI;QAAYC,OAAO;IAAW;IACpC;QAAED,IAAI;QAAeC,OAAO;IAAc;CAC3C;AASD,OAAO,SAASC,gBAAgB,EAAEC,QAAQ,EAAEC,QAAQ,UAAU,EAAwB;IACpF,MAAMC,mBAAmB,CAACC,GAAY,EAAEN,EAAE,EAAyB;QACjEG,SAASH;IACX;IAEA,qBACE,KAACH;QACCI,OAAM;QACNM,uBACE,KAACT;YACCM,OAAOL,gBAAgBS,IAAI,CAAC,CAACC,IAAMA,EAAET,EAAE,KAAKI;YAC5CM,SAASX;YACTY,gBAAgB,CAACF,IAAMA,EAAER,KAAK;YAC9BE,UAAUE;YACVO,gBAAgB;;;AAK1B"}

package/dist/DensitySelector/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 './DensitySelector';
+export * from "./DensitySelector.js";
 
 //# sourceMappingURL=index.js.map

package/dist/DensitySelector/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/DensitySelector/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 './DensitySelector';\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,oBAAoB"}
+{"version":3,"sources":["../../src/DensitySelector/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 './DensitySelector';\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,uBAAoB"}

package/dist/Dialog/Dialog.d.ts

@@ -1,6 +1,7 @@
-import { StyledComponent } from '@emotion/styled';
-import { ButtonProps, DialogActions, DialogProps, DialogTitleProps, DialogContentProps as MuiDialogContentProps } from '@mui/material';
-import { MouseEvent, ReactElement } from 'react';
+import type { StyledComponent } from '@emotion/styled';
+import type { ButtonProps, DialogProps, DialogTitleProps, DialogContentProps as MuiDialogContentProps } from '@mui/material';
+import { DialogActions } from '@mui/material';
+import type { MouseEvent, ReactElement } from 'react';
 export interface DialogHeaderProps extends DialogTitleProps {
     /**
      * Callback fired when close button is clicked. If undefined, close button will not appear in header.

package/dist/Dialog/Dialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../src/Dialog/Dialog.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,EAEL,WAAW,EACX,aAAa,EAEb,WAAW,EAEX,gBAAgB,EAGhB,kBAAkB,IAAI,qBAAqB,EAG5C,MAAM,eAAe,CAAC;AAEvB,OAAO,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAGjD,MAAM,WAAW,iBAAkB,SAAQ,gBAAgB;IACzD;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;CAChD;AAED,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAAC,WAAW,EAAE,SAAS,GAAG,OAAO,GAAG,MAAM,CAAC,CAAC;AAEhF,MAAM,MAAM,kBAAkB,GAAG,qBAAqB,CAAC;AAEvD,QAAA,MAAM,MAAM,oCAAqC,iBAAiB,KAAG,YAapE,CAAC;AAEF,QAAA,MAAM,OAAO,+BAAgC,kBAAkB,KAAG,YAIjE,CAAC;AAEF,QAAA,MAAM,aAAa,2BAA4B,iBAAiB,KAAG,YAIlE,CAAC;AAEF,QAAA,MAAM,eAAe,2BAA4B,iBAAiB,KAAG,YAIpE,CAAC;AAQF,QAAA,MAAM,IAAI,EAAE,eAAe,CAAC,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,CAItD,CAAC;AAUH,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAAC,GAAG;IAC3C,MAAM,EAAE,OAAO,MAAM,CAAC;IACtB,IAAI,EAAE,OAAO,IAAI,CAAC;IAClB,OAAO,EAAE,OAAO,OAAO,CAAC;IACxB,aAAa,EAAE,OAAO,aAAa,CAAC;IACpC,eAAe,EAAE,OAAO,eAAe,CAAC;IACxC,OAAO,EAAE,OAAO,aAAa,CAAC;CAC4C,CAAC"}
+{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../src/Dialog/Dialog.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AACvD,OAAO,KAAK,EACV,WAAW,EACX,WAAW,EACX,gBAAgB,EAChB,kBAAkB,IAAI,qBAAqB,EAE5C,MAAM,eAAe,CAAC;AACvB,OAAO,EAEL,aAAa,EAMd,MAAM,eAAe,CAAC;AAEvB,OAAO,KAAK,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAItD,MAAM,WAAW,iBAAkB,SAAQ,gBAAgB;IACzD;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;CAChD;AAED,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAAC,WAAW,EAAE,SAAS,GAAG,OAAO,GAAG,MAAM,CAAC,CAAC;AAEhF,MAAM,MAAM,kBAAkB,GAAG,qBAAqB,CAAC;AAEvD,QAAA,MAAM,MAAM,GAAI,iCAAiC,iBAAiB,KAAG,YAapE,CAAC;AAEF,QAAA,MAAM,OAAO,GAAI,4BAA4B,kBAAkB,KAAG,YAIjE,CAAC;AAEF,QAAA,MAAM,aAAa,GAAI,wBAAwB,iBAAiB,KAAG,YAIlE,CAAC;AAEF,QAAA,MAAM,eAAe,GAAI,wBAAwB,iBAAiB,KAAG,YAIpE,CAAC;AAQF,QAAA,MAAM,IAAI,EAAE,eAAe,CAAC,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,CAItD,CAAC;AAUH,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAAC,GAAG;IAC3C,MAAM,EAAE,OAAO,MAAM,CAAC;IACtB,IAAI,EAAE,OAAO,IAAI,CAAC;IAClB,OAAO,EAAE,OAAO,OAAO,CAAC;IACxB,aAAa,EAAE,OAAO,aAAa,CAAC;IACpC,eAAe,EAAE,OAAO,eAAe,CAAC;IACxC,OAAO,EAAE,OAAO,aAAa,CAAC;CAC4C,CAAC"}

package/dist/Dialog/Dialog.js

@@ -11,9 +11,9 @@
 // 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, DialogActions, DialogContent, DialogTitle, IconButton, Dialog as MuiDialog, styled } from '@mui/material';
-import CloseIcon from 'mdi-material-ui/Close';
-import { combineSx } from '../utils';
+import { Button, DialogActions, DialogContent, DialogTitle, IconButton, Dialog as MuiDialog, styled } from "@mui/material";
+import CloseIcon from "mdi-material-ui/Close";
+import { combineSx } from "../utils/index.js";
 const Header = ({ children, onClose, ...props })=>{
     return /*#__PURE__*/ _jsxs(_Fragment, {
         children: [

package/dist/Dialog/Dialog.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Dialog/Dialog.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 { StyledComponent } from '@emotion/styled';\nimport {\n  Button,\n  ButtonProps,\n  DialogActions,\n  DialogContent,\n  DialogProps,\n  DialogTitle,\n  DialogTitleProps,\n  IconButton,\n  Dialog as MuiDialog,\n  DialogContentProps as MuiDialogContentProps,\n  styled,\n  Theme,\n} from '@mui/material';\nimport CloseIcon from 'mdi-material-ui/Close';\nimport { MouseEvent, ReactElement } from 'react';\nimport { combineSx } from '../utils';\n\nexport interface DialogHeaderProps extends DialogTitleProps {\n  /**\n   * Callback fired when close button is clicked. If undefined, close button will not appear in header.\n   */\n  onClose?: (e: MouseEvent<HTMLElement>) => void;\n}\n\nexport type DialogButtonProps = Omit<ButtonProps, 'variant' | 'color' | 'type'>;\n\nexport type DialogContentProps = MuiDialogContentProps;\n\nconst Header = ({ children, onClose, ...props }: DialogHeaderProps): ReactElement => {\n  return (\n    <>\n      <DialogTitle style={{ textOverflow: 'ellipsis', overflow: 'hidden' }} {...props}>\n        {children}\n      </DialogTitle>\n      {onClose && (\n        <IconButton aria-label=\"Close\" onClick={onClose} sx={dialogCloseIconButtonStyle}>\n          <CloseIcon />\n        </IconButton>\n      )}\n    </>\n  );\n};\n\nconst Content = ({ children, sx, ...props }: DialogContentProps): ReactElement => (\n  <DialogContent dividers {...props} sx={combineSx({ minWidth: `500px`, textWrap: 'balance' }, sx)}>\n    {children}\n  </DialogContent>\n);\n\nconst PrimaryButton = ({ children, ...props }: DialogButtonProps): ReactElement => (\n  <Button variant=\"contained\" type=\"submit\" {...props}>\n    {children}\n  </Button>\n);\n\nconst SecondaryButton = ({ children, ...props }: DialogButtonProps): ReactElement => (\n  <Button variant=\"outlined\" color=\"secondary\" {...props}>\n    {children}\n  </Button>\n);\n\n/*\n * Material-ui has a prop \"scroll=paper\" that is specifically for dialog header and actions to be sticky and body to scroll,\n * but that doesn't work when dialog content is wrapped in form.\n * https://github.com/mui-org/material-ui/issues/13253\n * This component adds style to get expected behavior & should be used whenever we have a Form inside a Dialog\n */\nconst Form: StyledComponent<React.ComponentProps<'form'>> = styled('form')({\n  overflowY: 'auto',\n  display: 'flex',\n  flexDirection: 'column',\n});\n\n/**\n * Render the CSS of the dialog's close button, according to the given material theme.\n * @param theme material theme\n */\nconst dialogCloseIconButtonStyle = (theme: Theme): Record<string, unknown> => {\n  return { position: 'absolute', top: theme.spacing(0.5), right: theme.spacing(0.5) };\n};\n\nexport const Dialog: React.FC<DialogProps> & {\n  Header: typeof Header;\n  Form: typeof Form;\n  Content: typeof Content;\n  PrimaryButton: typeof PrimaryButton;\n  SecondaryButton: typeof SecondaryButton;\n  Actions: typeof DialogActions;\n} = ({ children, ...props }) => <MuiDialog {...props}>{children}</MuiDialog>;\n\nDialog.Header = Header;\nDialog.Form = Form;\nDialog.Content = Content;\nDialog.PrimaryButton = PrimaryButton;\nDialog.SecondaryButton = SecondaryButton;\nDialog.Actions = DialogActions;\n"],"names":["Button","DialogActions","DialogContent","DialogTitle","IconButton","Dialog","MuiDialog","styled","CloseIcon","combineSx","Header","children","onClose","props","style","textOverflow","overflow","aria-label","onClick","sx","dialogCloseIconButtonStyle","Content","dividers","minWidth","textWrap","PrimaryButton","variant","type","SecondaryButton","color","Form","overflowY","display","flexDirection","theme","position","top","spacing","right","Actions"],"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,SACEA,MAAM,EAENC,aAAa,EACbC,aAAa,EAEbC,WAAW,EAEXC,UAAU,EACVC,UAAUC,SAAS,EAEnBC,MAAM,QAED,gBAAgB;AACvB,OAAOC,eAAe,wBAAwB;AAE9C,SAASC,SAAS,QAAQ,WAAW;AAarC,MAAMC,SAAS,CAAC,EAAEC,QAAQ,EAAEC,OAAO,EAAE,GAAGC,OAA0B;IAChE,qBACE;;0BACE,KAACV;gBAAYW,OAAO;oBAAEC,cAAc;oBAAYC,UAAU;gBAAS;gBAAI,GAAGH,KAAK;0BAC5EF;;YAEFC,yBACC,KAACR;gBAAWa,cAAW;gBAAQC,SAASN;gBAASO,IAAIC;0BACnD,cAAA,KAACZ;;;;AAKX;AAEA,MAAMa,UAAU,CAAC,EAAEV,QAAQ,EAAEQ,EAAE,EAAE,GAAGN,OAA2B,iBAC7D,KAACX;QAAcoB,QAAQ;QAAE,GAAGT,KAAK;QAAEM,IAAIV,UAAU;YAAEc,UAAU,CAAC,KAAK,CAAC;YAAEC,UAAU;QAAU,GAAGL;kBAC1FR;;AAIL,MAAMc,gBAAgB,CAAC,EAAEd,QAAQ,EAAE,GAAGE,OAA0B,iBAC9D,KAACb;QAAO0B,SAAQ;QAAYC,MAAK;QAAU,GAAGd,KAAK;kBAChDF;;AAIL,MAAMiB,kBAAkB,CAAC,EAAEjB,QAAQ,EAAE,GAAGE,OAA0B,iBAChE,KAACb;QAAO0B,SAAQ;QAAWG,OAAM;QAAa,GAAGhB,KAAK;kBACnDF;;AAIL;;;;;CAKC,GACD,MAAMmB,OAAsDvB,OAAO,QAAQ;IACzEwB,WAAW;IACXC,SAAS;IACTC,eAAe;AACjB;AAEA;;;CAGC,GACD,MAAMb,6BAA6B,CAACc;IAClC,OAAO;QAAEC,UAAU;QAAYC,KAAKF,MAAMG,OAAO,CAAC;QAAMC,OAAOJ,MAAMG,OAAO,CAAC;IAAK;AACpF;AAEA,OAAO,MAAMhC,SAOT,CAAC,EAAEM,QAAQ,EAAE,GAAGE,OAAO,iBAAK,KAACP;QAAW,GAAGO,KAAK;kBAAGF;OAAsB;AAE7EN,OAAOK,MAAM,GAAGA;AAChBL,OAAOyB,IAAI,GAAGA;AACdzB,OAAOgB,OAAO,GAAGA;AACjBhB,OAAOoB,aAAa,GAAGA;AACvBpB,OAAOuB,eAAe,GAAGA;AACzBvB,OAAOkC,OAAO,GAAGtC"}
+{"version":3,"sources":["../../src/Dialog/Dialog.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 { StyledComponent } from '@emotion/styled';\nimport type {\n  ButtonProps,\n  DialogProps,\n  DialogTitleProps,\n  DialogContentProps as MuiDialogContentProps,\n  Theme,\n} from '@mui/material';\nimport {\n  Button,\n  DialogActions,\n  DialogContent,\n  DialogTitle,\n  IconButton,\n  Dialog as MuiDialog,\n  styled,\n} from '@mui/material';\nimport CloseIcon from 'mdi-material-ui/Close';\nimport type { MouseEvent, ReactElement } from 'react';\n\nimport { combineSx } from '../utils';\n\nexport interface DialogHeaderProps extends DialogTitleProps {\n  /**\n   * Callback fired when close button is clicked. If undefined, close button will not appear in header.\n   */\n  onClose?: (e: MouseEvent<HTMLElement>) => void;\n}\n\nexport type DialogButtonProps = Omit<ButtonProps, 'variant' | 'color' | 'type'>;\n\nexport type DialogContentProps = MuiDialogContentProps;\n\nconst Header = ({ children, onClose, ...props }: DialogHeaderProps): ReactElement => {\n  return (\n    <>\n      <DialogTitle style={{ textOverflow: 'ellipsis', overflow: 'hidden' }} {...props}>\n        {children}\n      </DialogTitle>\n      {onClose && (\n        <IconButton aria-label=\"Close\" onClick={onClose} sx={dialogCloseIconButtonStyle}>\n          <CloseIcon />\n        </IconButton>\n      )}\n    </>\n  );\n};\n\nconst Content = ({ children, sx, ...props }: DialogContentProps): ReactElement => (\n  <DialogContent dividers {...props} sx={combineSx({ minWidth: `500px`, textWrap: 'balance' }, sx)}>\n    {children}\n  </DialogContent>\n);\n\nconst PrimaryButton = ({ children, ...props }: DialogButtonProps): ReactElement => (\n  <Button variant=\"contained\" type=\"submit\" {...props}>\n    {children}\n  </Button>\n);\n\nconst SecondaryButton = ({ children, ...props }: DialogButtonProps): ReactElement => (\n  <Button variant=\"outlined\" color=\"secondary\" {...props}>\n    {children}\n  </Button>\n);\n\n/*\n * Material-ui has a prop \"scroll=paper\" that is specifically for dialog header and actions to be sticky and body to scroll,\n * but that doesn't work when dialog content is wrapped in form.\n * https://github.com/mui-org/material-ui/issues/13253\n * This component adds style to get expected behavior & should be used whenever we have a Form inside a Dialog\n */\nconst Form: StyledComponent<React.ComponentProps<'form'>> = styled('form')({\n  overflowY: 'auto',\n  display: 'flex',\n  flexDirection: 'column',\n});\n\n/**\n * Render the CSS of the dialog's close button, according to the given material theme.\n * @param theme material theme\n */\nconst dialogCloseIconButtonStyle = (theme: Theme): Record<string, unknown> => {\n  return { position: 'absolute', top: theme.spacing(0.5), right: theme.spacing(0.5) };\n};\n\nexport const Dialog: React.FC<DialogProps> & {\n  Header: typeof Header;\n  Form: typeof Form;\n  Content: typeof Content;\n  PrimaryButton: typeof PrimaryButton;\n  SecondaryButton: typeof SecondaryButton;\n  Actions: typeof DialogActions;\n} = ({ children, ...props }) => <MuiDialog {...props}>{children}</MuiDialog>;\n\nDialog.Header = Header;\nDialog.Form = Form;\nDialog.Content = Content;\nDialog.PrimaryButton = PrimaryButton;\nDialog.SecondaryButton = SecondaryButton;\nDialog.Actions = DialogActions;\n"],"names":["Button","DialogActions","DialogContent","DialogTitle","IconButton","Dialog","MuiDialog","styled","CloseIcon","combineSx","Header","children","onClose","props","style","textOverflow","overflow","aria-label","onClick","sx","dialogCloseIconButtonStyle","Content","dividers","minWidth","textWrap","PrimaryButton","variant","type","SecondaryButton","color","Form","overflowY","display","flexDirection","theme","position","top","spacing","right","Actions"],"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;;AAUjC,SACEA,MAAM,EACNC,aAAa,EACbC,aAAa,EACbC,WAAW,EACXC,UAAU,EACVC,UAAUC,SAAS,EACnBC,MAAM,QACD,gBAAgB;AACvB,OAAOC,eAAe,wBAAwB;AAG9C,SAASC,SAAS,QAAQ,oBAAW;AAarC,MAAMC,SAAS,CAAC,EAAEC,QAAQ,EAAEC,OAAO,EAAE,GAAGC,OAA0B;IAChE,qBACE;;0BACE,KAACV;gBAAYW,OAAO;oBAAEC,cAAc;oBAAYC,UAAU;gBAAS;gBAAI,GAAGH,KAAK;0BAC5EF;;YAEFC,yBACC,KAACR;gBAAWa,cAAW;gBAAQC,SAASN;gBAASO,IAAIC;0BACnD,cAAA,KAACZ;;;;AAKX;AAEA,MAAMa,UAAU,CAAC,EAAEV,QAAQ,EAAEQ,EAAE,EAAE,GAAGN,OAA2B,iBAC7D,KAACX;QAAcoB,QAAQ;QAAE,GAAGT,KAAK;QAAEM,IAAIV,UAAU;YAAEc,UAAU,CAAC,KAAK,CAAC;YAAEC,UAAU;QAAU,GAAGL;kBAC1FR;;AAIL,MAAMc,gBAAgB,CAAC,EAAEd,QAAQ,EAAE,GAAGE,OAA0B,iBAC9D,KAACb;QAAO0B,SAAQ;QAAYC,MAAK;QAAU,GAAGd,KAAK;kBAChDF;;AAIL,MAAMiB,kBAAkB,CAAC,EAAEjB,QAAQ,EAAE,GAAGE,OAA0B,iBAChE,KAACb;QAAO0B,SAAQ;QAAWG,OAAM;QAAa,GAAGhB,KAAK;kBACnDF;;AAIL;;;;;CAKC,GACD,MAAMmB,OAAsDvB,OAAO,QAAQ;IACzEwB,WAAW;IACXC,SAAS;IACTC,eAAe;AACjB;AAEA;;;CAGC,GACD,MAAMb,6BAA6B,CAACc;IAClC,OAAO;QAAEC,UAAU;QAAYC,KAAKF,MAAMG,OAAO,CAAC;QAAMC,OAAOJ,MAAMG,OAAO,CAAC;IAAK;AACpF;AAEA,OAAO,MAAMhC,SAOT,CAAC,EAAEM,QAAQ,EAAE,GAAGE,OAAO,iBAAK,KAACP;QAAW,GAAGO,KAAK;kBAAGF;OAAsB;AAE7EN,OAAOK,MAAM,GAAGA;AAChBL,OAAOyB,IAAI,GAAGA;AACdzB,OAAOgB,OAAO,GAAGA;AACjBhB,OAAOoB,aAAa,GAAGA;AACvBpB,OAAOuB,eAAe,GAAGA;AACzBvB,OAAOkC,OAAO,GAAGtC"}

package/dist/Dialog/DiscardChangesConfirmationDialog.d.ts

@@ -1,4 +1,4 @@
-import { ReactElement } from 'react';
+import type { ReactElement } from 'react';
 interface DiscardChangesConfirmationDialogProps {
     description: string;
     isOpen: boolean;

package/dist/Dialog/DiscardChangesConfirmationDialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DiscardChangesConfirmationDialog.d.ts","sourceRoot":"","sources":["../../src/Dialog/DiscardChangesConfirmationDialog.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAGrC,UAAU,qCAAqC;IAC7C,WAAW,EAAE,MAAM,CAAC;IACpB,MAAM,EAAE,OAAO,CAAC;IAChB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,gBAAgB,EAAE,MAAM,IAAI,CAAC;CAC9B;AAED,eAAO,MAAM,gCAAgC,UAAW,qCAAqC,KAAG,YAiB/F,CAAC"}
+{"version":3,"file":"DiscardChangesConfirmationDialog.d.ts","sourceRoot":"","sources":["../../src/Dialog/DiscardChangesConfirmationDialog.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAI1C,UAAU,qCAAqC;IAC7C,WAAW,EAAE,MAAM,CAAC;IACpB,MAAM,EAAE,OAAO,CAAC;IAChB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,gBAAgB,EAAE,MAAM,IAAI,CAAC;CAC9B;AAED,eAAO,MAAM,gCAAgC,GAAI,OAAO,qCAAqC,KAAG,YAiB/F,CAAC"}

package/dist/Dialog/DiscardChangesConfirmationDialog.js

@@ -11,8 +11,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // 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 } from '@mui/material';
-import { Dialog } from './Dialog';
+import { Button } from "@mui/material";
+import { Dialog } from "./Dialog.js";
 export const DiscardChangesConfirmationDialog = (props)=>{
     const { description, isOpen, onCancel, onDiscardChanges } = props;
     return /*#__PURE__*/ _jsxs(Dialog, {

package/dist/Dialog/DiscardChangesConfirmationDialog.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Dialog/DiscardChangesConfirmationDialog.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 } from '@mui/material';\nimport { ReactElement } from 'react';\nimport { Dialog } from './Dialog';\n\ninterface DiscardChangesConfirmationDialogProps {\n  description: string;\n  isOpen: boolean;\n  onCancel: () => void;\n  onDiscardChanges: () => void;\n}\n\nexport const DiscardChangesConfirmationDialog = (props: DiscardChangesConfirmationDialogProps): ReactElement => {\n  const { description, isOpen, onCancel, onDiscardChanges } = props;\n\n  return (\n    <Dialog open={isOpen} aria-labelledby=\"discard-dialog\">\n      <Dialog.Header>Discard Changes</Dialog.Header>\n      <Dialog.Content>{description}</Dialog.Content>\n      <Dialog.Actions>\n        <Button variant=\"contained\" onClick={onDiscardChanges}>\n          Discard Changes\n        </Button>\n        <Button variant=\"outlined\" color=\"secondary\" onClick={onCancel}>\n          Cancel\n        </Button>\n      </Dialog.Actions>\n    </Dialog>\n  );\n};\n"],"names":["Button","Dialog","DiscardChangesConfirmationDialog","props","description","isOpen","onCancel","onDiscardChanges","open","aria-labelledby","Header","Content","Actions","variant","onClick","color"],"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;AAEvC,SAASC,MAAM,QAAQ,WAAW;AASlC,OAAO,MAAMC,mCAAmC,CAACC;IAC/C,MAAM,EAAEC,WAAW,EAAEC,MAAM,EAAEC,QAAQ,EAAEC,gBAAgB,EAAE,GAAGJ;IAE5D,qBACE,MAACF;QAAOO,MAAMH;QAAQI,mBAAgB;;0BACpC,KAACR,OAAOS,MAAM;0BAAC;;0BACf,KAACT,OAAOU,OAAO;0BAAEP;;0BACjB,MAACH,OAAOW,OAAO;;kCACb,KAACZ;wBAAOa,SAAQ;wBAAYC,SAASP;kCAAkB;;kCAGvD,KAACP;wBAAOa,SAAQ;wBAAWE,OAAM;wBAAYD,SAASR;kCAAU;;;;;;AAMxE,EAAE"}
+{"version":3,"sources":["../../src/Dialog/DiscardChangesConfirmationDialog.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 } from '@mui/material';\nimport type { ReactElement } from 'react';\n\nimport { Dialog } from './Dialog';\n\ninterface DiscardChangesConfirmationDialogProps {\n  description: string;\n  isOpen: boolean;\n  onCancel: () => void;\n  onDiscardChanges: () => void;\n}\n\nexport const DiscardChangesConfirmationDialog = (props: DiscardChangesConfirmationDialogProps): ReactElement => {\n  const { description, isOpen, onCancel, onDiscardChanges } = props;\n\n  return (\n    <Dialog open={isOpen} aria-labelledby=\"discard-dialog\">\n      <Dialog.Header>Discard Changes</Dialog.Header>\n      <Dialog.Content>{description}</Dialog.Content>\n      <Dialog.Actions>\n        <Button variant=\"contained\" onClick={onDiscardChanges}>\n          Discard Changes\n        </Button>\n        <Button variant=\"outlined\" color=\"secondary\" onClick={onCancel}>\n          Cancel\n        </Button>\n      </Dialog.Actions>\n    </Dialog>\n  );\n};\n"],"names":["Button","Dialog","DiscardChangesConfirmationDialog","props","description","isOpen","onCancel","onDiscardChanges","open","aria-labelledby","Header","Content","Actions","variant","onClick","color"],"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;AAGvC,SAASC,MAAM,QAAQ,cAAW;AASlC,OAAO,MAAMC,mCAAmC,CAACC;IAC/C,MAAM,EAAEC,WAAW,EAAEC,MAAM,EAAEC,QAAQ,EAAEC,gBAAgB,EAAE,GAAGJ;IAE5D,qBACE,MAACF;QAAOO,MAAMH;QAAQI,mBAAgB;;0BACpC,KAACR,OAAOS,MAAM;0BAAC;;0BACf,KAACT,OAAOU,OAAO;0BAAEP;;0BACjB,MAACH,OAAOW,OAAO;;kCACb,KAACZ;wBAAOa,SAAQ;wBAAYC,SAASP;kCAAkB;;kCAGvD,KAACP;wBAAOa,SAAQ;wBAAWE,OAAM;wBAAYD,SAASR;kCAAU;;;;;;AAMxE,EAAE"}

package/dist/Dialog/index.js

@@ -10,7 +10,7 @@
 // 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 './Dialog';
-export * from './DiscardChangesConfirmationDialog';
+export * from "./Dialog.js";
+export * from "./DiscardChangesConfirmationDialog.js";
 
 //# sourceMappingURL=index.js.map