@perses-dev/components 0.46.0 → 0.47.0-rc0

package/dist/Overlay/index.js

@@ -0,0 +1,15 @@
+// Copyright 2024 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+export * from './Overlay';
+
+//# sourceMappingURL=index.js.map

package/dist/Overlay/index.js.map

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

package/dist/SortSelector/SortSelectorButtons.d.ts

@@ -0,0 +1,8 @@
+import { ButtonGroupProps } from '@mui/material';
+import { SortOption } from './SortSelector';
+export interface SortSelectorButtonsProps extends Omit<ButtonGroupProps, 'onChange'> {
+    value?: SortOption;
+    onChange: (sort?: SortOption) => void;
+}
+export declare function SortSelectorButtons({ onChange, value, ...props }: SortSelectorButtonsProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=SortSelectorButtons.d.ts.map

package/dist/SortSelector/SortSelectorButtons.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SortSelectorButtons.d.ts","sourceRoot":"","sources":["../../src/SortSelector/SortSelectorButtons.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAuB,gBAAgB,EAAE,MAAM,eAAe,CAAC;AACtE,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAE5C,MAAM,WAAW,wBAAyB,SAAQ,IAAI,CAAC,gBAAgB,EAAE,UAAU,CAAC;IAClF,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,QAAQ,EAAE,CAAC,IAAI,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;CACvC;AAED,wBAAgB,mBAAmB,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,wBAAwB,2CAkB1F"}

package/dist/SortSelector/SortSelectorButtons.js

@@ -0,0 +1,45 @@
+// Copyright 2024 The Perses Authors
+// Licensed under the Apache License |  Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing |  software
+// distributed under the License is distributed on an "AS IS" BASIS |
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND |  either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, ButtonGroup } from '@mui/material';
+export function SortSelectorButtons({ onChange, value, ...props }) {
+    const handleSortChange = (sort)=>{
+        onChange(sort);
+    };
+    return /*#__PURE__*/ _jsxs(ButtonGroup, {
+        "aria-label": "Sort",
+        sx: {
+            margin: 1
+        },
+        ...props,
+        children: [
+            /*#__PURE__*/ _jsx(Button, {
+                onClick: ()=>handleSortChange(undefined),
+                variant: value === undefined ? 'contained' : 'outlined',
+                children: "None"
+            }),
+            /*#__PURE__*/ _jsx(Button, {
+                onClick: ()=>handleSortChange('asc'),
+                variant: value === 'asc' ? 'contained' : 'outlined',
+                children: "Ascending"
+            }),
+            /*#__PURE__*/ _jsx(Button, {
+                onClick: ()=>handleSortChange('desc'),
+                variant: value === 'desc' ? 'contained' : 'outlined',
+                children: "Descending"
+            })
+        ]
+    });
+}
+
+//# sourceMappingURL=SortSelectorButtons.js.map

package/dist/SortSelector/SortSelectorButtons.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/SortSelector/SortSelectorButtons.tsx"],"sourcesContent":["// Copyright 2024 The Perses Authors\n// Licensed under the Apache License |  Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing |  software\n// distributed under the License is distributed on an \"AS IS\" BASIS |\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND |  either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Button, ButtonGroup, ButtonGroupProps } from '@mui/material';\nimport { SortOption } from './SortSelector';\n\nexport interface SortSelectorButtonsProps extends Omit<ButtonGroupProps, 'onChange'> {\n  value?: SortOption;\n  onChange: (sort?: SortOption) => void;\n}\n\nexport function SortSelectorButtons({ onChange, value, ...props }: SortSelectorButtonsProps) {\n  const handleSortChange = (sort?: SortOption) => {\n    onChange(sort);\n  };\n\n  return (\n    <ButtonGroup aria-label=\"Sort\" sx={{ margin: 1 }} {...props}>\n      <Button onClick={() => handleSortChange(undefined)} variant={value === undefined ? 'contained' : 'outlined'}>\n        None\n      </Button>\n      <Button onClick={() => handleSortChange('asc')} variant={value === 'asc' ? 'contained' : 'outlined'}>\n        Ascending\n      </Button>\n      <Button onClick={() => handleSortChange('desc')} variant={value === 'desc' ? 'contained' : 'outlined'}>\n        Descending\n      </Button>\n    </ButtonGroup>\n  );\n}\n"],"names":["Button","ButtonGroup","SortSelectorButtons","onChange","value","props","handleSortChange","sort","aria-label","sx","margin","onClick","undefined","variant"],"mappings":"AAAA,oCAAoC;AACpC,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;AAQtE,OAAO,SAASC,oBAAoB,EAAEC,QAAQ,EAAEC,KAAK,EAAE,GAAGC,OAAiC;IACzF,MAAMC,mBAAmB,CAACC;QACxBJ,SAASI;IACX;IAEA,qBACE,MAACN;QAAYO,cAAW;QAAOC,IAAI;YAAEC,QAAQ;QAAE;QAAI,GAAGL,KAAK;;0BACzD,KAACL;gBAAOW,SAAS,IAAML,iBAAiBM;gBAAYC,SAAST,UAAUQ,YAAY,cAAc;0BAAY;;0BAG7G,KAACZ;gBAAOW,SAAS,IAAML,iBAAiB;gBAAQO,SAAST,UAAU,QAAQ,cAAc;0BAAY;;0BAGrG,KAACJ;gBAAOW,SAAS,IAAML,iBAAiB;gBAASO,SAAST,UAAU,SAAS,cAAc;0BAAY;;;;AAK7G"}

package/dist/SortSelector/index.d.ts

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

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/SortSelector/index.ts"],"names":[],"mappings":"AAaA,cAAc,gBAAgB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/SortSelector/index.ts"],"names":[],"mappings":"AAaA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,uBAAuB,CAAC"}

package/dist/SortSelector/index.js

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// Copyright 2024 The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
 // You may obtain a copy of the License at
@@ -11,5 +11,6 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 export * from './SortSelector';
+export * from './SortSelectorButtons';
 
 //# sourceMappingURL=index.js.map

package/dist/SortSelector/index.js.map

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

package/dist/Table/InnerTable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"InnerTable.d.ts","sourceRoot":"","sources":["../../src/Table/InnerTable.tsx"],"names":[],"mappings":";AAaA,OAAO,EAA6B,UAAU,IAAI,aAAa,EAAE,MAAM,eAAe,CAAC;AAEvF,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AASnD,KAAK,eAAe,GAAG,IAAI,CAAC,aAAa,EAAE,MAAM,CAAC,GAAG;IACnD,OAAO,EAAE,YAAY,CAAC;CACvB,CAAC;AAOF,eAAO,MAAM,UAAU,2HAerB,CAAC"}
+{"version":3,"file":"InnerTable.d.ts","sourceRoot":"","sources":["../../src/Table/InnerTable.tsx"],"names":[],"mappings":";AAaA,OAAO,EAA6B,UAAU,IAAI,aAAa,EAAE,MAAM,eAAe,CAAC;AAEvF,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AASnD,KAAK,eAAe,GAAG,IAAI,CAAC,aAAa,EAAE,MAAM,CAAC,GAAG;IACnD,OAAO,EAAE,YAAY,CAAC;CACvB,CAAC;AAQF,eAAO,MAAM,UAAU,2HAerB,CAAC"}

package/dist/Table/InnerTable.js

@@ -21,7 +21,8 @@ const StyledMuiTable = styled(MuiTable)(({ theme })=>({
     }));
 const TABLE_DENSITY_CONFIG = {
     compact: 'small',
-    standard: 'medium'
+    standard: 'medium',
+    comfortable: 'medium'
 };
 export const InnerTable = /*#__PURE__*/ forwardRef(function InnerTable({ density, ...otherProps }, ref) {
     return /*#__PURE__*/ _jsx(StyledMuiTable, {

package/dist/Table/InnerTable.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Table/InnerTable.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Table as MuiTable, styled, TableProps as MuiTableProps } from '@mui/material';\nimport { forwardRef } from 'react';\nimport { TableDensity } from './model/table-model';\n\nconst StyledMuiTable = styled(MuiTable)(({ theme }) => ({\n  // This value is needed to have a consistent table layout when scrolling.\n  tableLayout: 'fixed',\n  borderCollapse: 'separate',\n  backgroundColor: theme.palette.background.default,\n}));\n\ntype InnerTableProps = Omit<MuiTableProps, 'size'> & {\n  density: TableDensity;\n};\n\nconst TABLE_DENSITY_CONFIG: Record<TableDensity, MuiTableProps['size']> = {\n  compact: 'small',\n  standard: 'medium',\n};\n\nexport const InnerTable = forwardRef<HTMLTableElement, InnerTableProps>(function InnerTable(\n  { density, ...otherProps },\n  ref\n) {\n  return (\n    <StyledMuiTable\n      {...otherProps}\n      tabIndex={-1}\n      size={TABLE_DENSITY_CONFIG[density]}\n      ref={ref}\n      sx={{\n        width: '100%',\n      }}\n    />\n  );\n});\n"],"names":["Table","MuiTable","styled","forwardRef","StyledMuiTable","theme","tableLayout","borderCollapse","backgroundColor","palette","background","default","TABLE_DENSITY_CONFIG","compact","standard","InnerTable","density","otherProps","ref","tabIndex","size","sx","width"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAASA,SAASC,QAAQ,EAAEC,MAAM,QAAqC,gBAAgB;AACvF,SAASC,UAAU,QAAQ,QAAQ;AAGnC,MAAMC,iBAAiBF,OAAOD,UAAU,CAAC,EAAEI,KAAK,EAAE,GAAM,CAAA;QACtD,yEAAyE;QACzEC,aAAa;QACbC,gBAAgB;QAChBC,iBAAiBH,MAAMI,OAAO,CAACC,UAAU,CAACC,OAAO;IACnD,CAAA;AAMA,MAAMC,uBAAoE;IACxEC,SAAS;IACTC,UAAU;AACZ;AAEA,OAAO,MAAMC,2BAAaZ,WAA8C,SAASY,WAC/E,EAAEC,OAAO,EAAE,GAAGC,YAAY,EAC1BC,GAAG;IAEH,qBACE,KAACd;QACE,GAAGa,UAAU;QACdE,UAAU,CAAC;QACXC,MAAMR,oBAAoB,CAACI,QAAQ;QACnCE,KAAKA;QACLG,IAAI;YACFC,OAAO;QACT;;AAGN,GAAG"}
+{"version":3,"sources":["../../src/Table/InnerTable.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Table as MuiTable, styled, TableProps as MuiTableProps } from '@mui/material';\nimport { forwardRef } from 'react';\nimport { TableDensity } from './model/table-model';\n\nconst StyledMuiTable = styled(MuiTable)(({ theme }) => ({\n  // This value is needed to have a consistent table layout when scrolling.\n  tableLayout: 'fixed',\n  borderCollapse: 'separate',\n  backgroundColor: theme.palette.background.default,\n}));\n\ntype InnerTableProps = Omit<MuiTableProps, 'size'> & {\n  density: TableDensity;\n};\n\nconst TABLE_DENSITY_CONFIG: Record<TableDensity, MuiTableProps['size']> = {\n  compact: 'small',\n  standard: 'medium',\n  comfortable: 'medium',\n};\n\nexport const InnerTable = forwardRef<HTMLTableElement, InnerTableProps>(function InnerTable(\n  { density, ...otherProps },\n  ref\n) {\n  return (\n    <StyledMuiTable\n      {...otherProps}\n      tabIndex={-1}\n      size={TABLE_DENSITY_CONFIG[density]}\n      ref={ref}\n      sx={{\n        width: '100%',\n      }}\n    />\n  );\n});\n"],"names":["Table","MuiTable","styled","forwardRef","StyledMuiTable","theme","tableLayout","borderCollapse","backgroundColor","palette","background","default","TABLE_DENSITY_CONFIG","compact","standard","comfortable","InnerTable","density","otherProps","ref","tabIndex","size","sx","width"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAASA,SAASC,QAAQ,EAAEC,MAAM,QAAqC,gBAAgB;AACvF,SAASC,UAAU,QAAQ,QAAQ;AAGnC,MAAMC,iBAAiBF,OAAOD,UAAU,CAAC,EAAEI,KAAK,EAAE,GAAM,CAAA;QACtD,yEAAyE;QACzEC,aAAa;QACbC,gBAAgB;QAChBC,iBAAiBH,MAAMI,OAAO,CAACC,UAAU,CAACC,OAAO;IACnD,CAAA;AAMA,MAAMC,uBAAoE;IACxEC,SAAS;IACTC,UAAU;IACVC,aAAa;AACf;AAEA,OAAO,MAAMC,2BAAab,WAA8C,SAASa,WAC/E,EAAEC,OAAO,EAAE,GAAGC,YAAY,EAC1BC,GAAG;IAEH,qBACE,KAACf;QACE,GAAGc,UAAU;QACdE,UAAU,CAAC;QACXC,MAAMT,oBAAoB,CAACK,QAAQ;QACnCE,KAAKA;QACLG,IAAI;YACFC,OAAO;QACT;;AAGN,GAAG"}

package/dist/Table/TableCell.d.ts

@@ -27,5 +27,5 @@ export interface TableCellProps extends Omit<MuiTableCellProps, 'tabIndex' | 'al
     focusState?: 'trigger-focus' | 'focus-next' | 'none';
     onFocusTrigger?: (e: React.MouseEvent<HTMLTableCellElement> | React.KeyboardEvent<HTMLTableCellElement>) => void;
 }
-export declare function TableCell({ children, density, variant, width, focusState, onFocusTrigger, isFirstColumn, isLastColumn, description, ...otherProps }: TableCellProps): import("react/jsx-runtime").JSX.Element;
+export declare function TableCell({ children, density, variant, width, focusState, onFocusTrigger, isFirstColumn, isLastColumn, description, align, ...otherProps }: TableCellProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=TableCell.d.ts.map

package/dist/Table/TableCell.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TableCell.d.ts","sourceRoot":"","sources":["../../src/Table/TableCell.tsx"],"names":[],"mappings":";AAaA,OAAO,EAAqC,cAAc,IAAI,iBAAiB,EAAiB,MAAM,eAAe,CAAC;AAEtH,OAAO,EAAE,kBAAkB,EAAE,YAAY,EAAsB,MAAM,qBAAqB,CAAC;AAmB3F,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,iBAAiB,EAAE,UAAU,GAAG,OAAO,CAAC;IACnF,OAAO,EAAE,YAAY,CAAC;IAGtB,YAAY,EAAE,OAAO,CAAC;IACtB,aAAa,EAAE,OAAO,CAAC;IAEvB,KAAK,CAAC,EAAE,kBAAkB,CAAC;IAE3B;;;;;;;;OAQG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;;;;;OAOG;IACH,UAAU,CAAC,EAAE,eAAe,GAAG,YAAY,GAAG,MAAM,CAAC;IACrD,cAAc,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,oBAAoB,CAAC,GAAG,KAAK,CAAC,aAAa,CAAC,oBAAoB,CAAC,KAAK,IAAI,CAAC;CAClH;AAED,wBAAgB,SAAS,CAAC,EACxB,QAAQ,EACR,OAAO,EACP,OAAO,EACP,KAAK,EACL,UAAmB,EACnB,cAAc,EACd,aAAa,EACb,YAAY,EACZ,WAAW,EACX,GAAG,UAAU,EACd,EAAE,cAAc,2CA2EhB"}
+{"version":3,"file":"TableCell.d.ts","sourceRoot":"","sources":["../../src/Table/TableCell.tsx"],"names":[],"mappings":";AAaA,OAAO,EAAqC,cAAc,IAAI,iBAAiB,EAAiB,MAAM,eAAe,CAAC;AAEtH,OAAO,EAAE,kBAAkB,EAAE,YAAY,EAAsB,MAAM,qBAAqB,CAAC;AAmB3F,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,iBAAiB,EAAE,UAAU,GAAG,OAAO,CAAC;IACnF,OAAO,EAAE,YAAY,CAAC;IAGtB,YAAY,EAAE,OAAO,CAAC;IACtB,aAAa,EAAE,OAAO,CAAC;IAEvB,KAAK,CAAC,EAAE,kBAAkB,CAAC;IAE3B;;;;;;;;OAQG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;;;;;OAOG;IACH,UAAU,CAAC,EAAE,eAAe,GAAG,YAAY,GAAG,MAAM,CAAC;IACrD,cAAc,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,oBAAoB,CAAC,GAAG,KAAK,CAAC,aAAa,CAAC,oBAAoB,CAAC,KAAK,IAAI,CAAC;CAClH;AAED,wBAAgB,SAAS,CAAC,EACxB,QAAQ,EACR,OAAO,EACP,OAAO,EACP,KAAK,EACL,UAAmB,EACnB,cAAc,EACd,aAAa,EACb,YAAY,EACZ,WAAW,EACX,KAAK,EACL,GAAG,UAAU,EACd,EAAE,cAAc,2CA6EhB"}

package/dist/Table/TableCell.js

@@ -29,7 +29,7 @@ const StyledMuiTableCell = styled(MuiTableCell)(({ theme })=>({
             borderRadius: 0
         }
     }));
-export function TableCell({ children, density, variant, width, focusState = 'none', onFocusTrigger, isFirstColumn, isLastColumn, description, ...otherProps }) {
+export function TableCell({ children, density, variant, width, focusState = 'none', onFocusTrigger, isFirstColumn, isLastColumn, description, align, ...otherProps }) {
     const theme = useTheme();
     const elRef = useRef();
     const isHeader = variant === 'head';
@@ -91,6 +91,8 @@ export function TableCell({ children, density, variant, width, focusState = 'non
                 flexDirection: 'inherit'
             },
             title: description,
+            "aria-label": description,
+            textAlign: align,
             children: children
         })
     });

package/dist/Table/TableCell.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Table/TableCell.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { TableCell as MuiTableCell, styled, TableCellProps as MuiTableCellProps, Box, useTheme } from '@mui/material';\nimport { useEffect, useRef } from 'react';\nimport { TableCellAlignment, TableDensity, getTableCellLayout } from './model/table-model';\n\nconst StyledMuiTableCell = styled(MuiTableCell)(({ theme }) => ({\n  padding: 0,\n  backgroundColor: 'inherit',\n\n  '&.MuiTableCell-head': {\n    // Important to avoid scrolling behind the header showing through.\n    backgroundColor: theme.palette.background.default,\n  },\n  '&:focus-visible': {\n    outline: `solid 1px ${theme.palette.primary.main}`,\n    // Move inward a little to avoid getting cut off when focusing on items\n    // at the edge of the table.\n    outlineOffset: '-1px',\n    borderRadius: 0,\n  },\n}));\n\nexport interface TableCellProps extends Omit<MuiTableCellProps, 'tabIndex' | 'align'> {\n  density: TableDensity;\n\n  // These values are used to adjust the spacing for the first/last columns.\n  isLastColumn: boolean;\n  isFirstColumn: boolean;\n\n  align?: TableCellAlignment;\n\n  /**\n   * Additional information to be displayed when hovering over the cell. This\n   * may be the full cell value (e.g. to enable the user to see the full value\n   * if it is ellipsized to fit into the space) or some other descriptive text\n   * that is useful for the user.\n   *\n   * The hover behavior is currently managed with the `title` attribute, but this\n   * may be changed to a tooltip in the future.\n   */\n  description?: string;\n\n  /**\n   * How the cell should behave related to focus.\n   * - `trigger-focus`: the cell should be auto-focused when it renders.\n   * - `focus-next`: the cell should have tabindex=\"0\", so that it will be\n   *   focused the next time someone tabs with a keyboard.\n   * - `none`: the cell should have tabindex=\"-1\", so it is not focused by\n   *   keyboard interactions at this time.\n   */\n  focusState?: 'trigger-focus' | 'focus-next' | 'none';\n  onFocusTrigger?: (e: React.MouseEvent<HTMLTableCellElement> | React.KeyboardEvent<HTMLTableCellElement>) => void;\n}\n\nexport function TableCell({\n  children,\n  density,\n  variant,\n  width,\n  focusState = 'none',\n  onFocusTrigger,\n  isFirstColumn,\n  isLastColumn,\n  description,\n  ...otherProps\n}: TableCellProps) {\n  const theme = useTheme();\n\n  const elRef = useRef<HTMLTableCellElement>();\n\n  const isHeader = variant === 'head';\n\n  useEffect(() => {\n    if (focusState === 'trigger-focus' && elRef.current) {\n      elRef.current.focus();\n    }\n  }, [focusState]);\n\n  const handleFocus: React.FocusEventHandler<HTMLTableCellElement> = (e) => {\n    // From https://zellwk.com/blog/keyboard-focusable-elements/\n    const nestedFocusTarget = e.currentTarget?.querySelector<HTMLElement>(\n      'a[href], button, input, textarea, select, details,[role=\"button\"]'\n    );\n    if (nestedFocusTarget) {\n      // If the cell has a focusable child, focus it instead. Mostly used for\n      // checkbox cells, but could have other uses.\n      nestedFocusTarget.focus();\n    }\n  };\n\n  const handleInteractionFocusTrigger: TableCellProps['onFocusTrigger'] = (e) => {\n    // We use `onClick` and `onKeyUp` events instead of `onFocus` because of\n    // some ordering issues with when the browser calls events and how this\n    // plays with the triggering of focus with keyboard interactions.\n    // These report that a focus event happened, so we can adjust the current\n    // tabindex and focuses to the right cell.\n    onFocusTrigger?.(e);\n  };\n\n  return (\n    <StyledMuiTableCell\n      {...otherProps}\n      // Modify the tab index based on the currently focused cell. It's important\n      // to avoid having tabindex 0 on everything because it essentially traps\n      // a keyboard user in the table until they hit \"tab\" for every single\n      // cell.\n      tabIndex={focusState !== 'none' ? 0 : -1}\n      onFocus={handleFocus}\n      onClick={handleInteractionFocusTrigger}\n      onKeyUp={handleInteractionFocusTrigger}\n      sx={{\n        width: width,\n        borderBottom: isHeader\n          ? (theme) => `solid 1px ${theme.palette.grey[100]}`\n          : `solid 1px ${theme.palette.grey[50]}`,\n      }}\n      ref={elRef}\n    >\n      <Box\n        sx={{\n          ...getTableCellLayout(theme, density, { isLastColumn, isFirstColumn }),\n          position: 'relative',\n\n          // Text truncation. Currently enforced on all cells. We may control\n          // this with a prop on column config in the future.\n          whiteSpace: 'nowrap',\n          overflow: 'hidden',\n          textOverflow: 'ellipsis',\n\n          // Need to inherit from the MUI cell because this manages some ordering\n          // that the `TableSortLabel` uses to determine the location of the icon\n          // in headers.\n          flexDirection: 'inherit',\n        }}\n        title={description}\n      >\n        {children}\n      </Box>\n    </StyledMuiTableCell>\n  );\n}\n"],"names":["TableCell","MuiTableCell","styled","Box","useTheme","useEffect","useRef","getTableCellLayout","StyledMuiTableCell","theme","padding","backgroundColor","palette","background","default","outline","primary","main","outlineOffset","borderRadius","children","density","variant","width","focusState","onFocusTrigger","isFirstColumn","isLastColumn","description","otherProps","elRef","isHeader","current","focus","handleFocus","e","nestedFocusTarget","currentTarget","querySelector","handleInteractionFocusTrigger","tabIndex","onFocus","onClick","onKeyUp","sx","borderBottom","grey","ref","position","whiteSpace","overflow","textOverflow","flexDirection","title"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAASA,aAAaC,YAAY,EAAEC,MAAM,EAAuCC,GAAG,EAAEC,QAAQ,QAAQ,gBAAgB;AACtH,SAASC,SAAS,EAAEC,MAAM,QAAQ,QAAQ;AAC1C,SAA2CC,kBAAkB,QAAQ,sBAAsB;AAE3F,MAAMC,qBAAqBN,OAAOD,cAAc,CAAC,EAAEQ,KAAK,EAAE,GAAM,CAAA;QAC9DC,SAAS;QACTC,iBAAiB;QAEjB,uBAAuB;YACrB,kEAAkE;YAClEA,iBAAiBF,MAAMG,OAAO,CAACC,UAAU,CAACC,OAAO;QACnD;QACA,mBAAmB;YACjBC,SAAS,CAAC,UAAU,EAAEN,MAAMG,OAAO,CAACI,OAAO,CAACC,IAAI,CAAC,CAAC;YAClD,uEAAuE;YACvE,4BAA4B;YAC5BC,eAAe;YACfC,cAAc;QAChB;IACF,CAAA;AAkCA,OAAO,SAASnB,UAAU,EACxBoB,QAAQ,EACRC,OAAO,EACPC,OAAO,EACPC,KAAK,EACLC,aAAa,MAAM,EACnBC,cAAc,EACdC,aAAa,EACbC,YAAY,EACZC,WAAW,EACX,GAAGC,YACY;IACf,MAAMpB,QAAQL;IAEd,MAAM0B,QAAQxB;IAEd,MAAMyB,WAAWT,YAAY;IAE7BjB,UAAU;QACR,IAAImB,eAAe,mBAAmBM,MAAME,OAAO,EAAE;YACnDF,MAAME,OAAO,CAACC,KAAK;QACrB;IACF,GAAG;QAACT;KAAW;IAEf,MAAMU,cAA6D,CAACC;YAExCA;QAD1B,4DAA4D;QAC5D,MAAMC,qBAAoBD,mBAAAA,EAAEE,aAAa,cAAfF,uCAAAA,iBAAiBG,aAAa,CACtD;QAEF,IAAIF,mBAAmB;YACrB,uEAAuE;YACvE,6CAA6C;YAC7CA,kBAAkBH,KAAK;QACzB;IACF;IAEA,MAAMM,gCAAkE,CAACJ;QACvE,wEAAwE;QACxE,uEAAuE;QACvE,iEAAiE;QACjE,yEAAyE;QACzE,0CAA0C;QAC1CV,2BAAAA,qCAAAA,eAAiBU;IACnB;IAEA,qBACE,KAAC3B;QACE,GAAGqB,UAAU;QACd,2EAA2E;QAC3E,wEAAwE;QACxE,qEAAqE;QACrE,QAAQ;QACRW,UAAUhB,eAAe,SAAS,IAAI,CAAC;QACvCiB,SAASP;QACTQ,SAASH;QACTI,SAASJ;QACTK,IAAI;YACFrB,OAAOA;YACPsB,cAAcd,WACV,CAACtB,QAAU,CAAC,UAAU,EAAEA,MAAMG,OAAO,CAACkC,IAAI,CAAC,IAAI,CAAC,CAAC,GACjD,CAAC,UAAU,EAAErC,MAAMG,OAAO,CAACkC,IAAI,CAAC,GAAG,CAAC,CAAC;QAC3C;QACAC,KAAKjB;kBAEL,cAAA,KAAC3B;YACCyC,IAAI;gBACF,GAAGrC,mBAAmBE,OAAOY,SAAS;oBAAEM;oBAAcD;gBAAc,EAAE;gBACtEsB,UAAU;gBAEV,mEAAmE;gBACnE,mDAAmD;gBACnDC,YAAY;gBACZC,UAAU;gBACVC,cAAc;gBAEd,uEAAuE;gBACvE,uEAAuE;gBACvE,cAAc;gBACdC,eAAe;YACjB;YACAC,OAAOzB;sBAENR;;;AAIT"}
+{"version":3,"sources":["../../src/Table/TableCell.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { TableCell as MuiTableCell, styled, TableCellProps as MuiTableCellProps, Box, useTheme } from '@mui/material';\nimport { useEffect, useRef } from 'react';\nimport { TableCellAlignment, TableDensity, getTableCellLayout } from './model/table-model';\n\nconst StyledMuiTableCell = styled(MuiTableCell)(({ theme }) => ({\n  padding: 0,\n  backgroundColor: 'inherit',\n\n  '&.MuiTableCell-head': {\n    // Important to avoid scrolling behind the header showing through.\n    backgroundColor: theme.palette.background.default,\n  },\n  '&:focus-visible': {\n    outline: `solid 1px ${theme.palette.primary.main}`,\n    // Move inward a little to avoid getting cut off when focusing on items\n    // at the edge of the table.\n    outlineOffset: '-1px',\n    borderRadius: 0,\n  },\n}));\n\nexport interface TableCellProps extends Omit<MuiTableCellProps, 'tabIndex' | 'align'> {\n  density: TableDensity;\n\n  // These values are used to adjust the spacing for the first/last columns.\n  isLastColumn: boolean;\n  isFirstColumn: boolean;\n\n  align?: TableCellAlignment;\n\n  /**\n   * Additional information to be displayed when hovering over the cell. This\n   * may be the full cell value (e.g. to enable the user to see the full value\n   * if it is ellipsized to fit into the space) or some other descriptive text\n   * that is useful for the user.\n   *\n   * The hover behavior is currently managed with the `title` attribute, but this\n   * may be changed to a tooltip in the future.\n   */\n  description?: string;\n\n  /**\n   * How the cell should behave related to focus.\n   * - `trigger-focus`: the cell should be auto-focused when it renders.\n   * - `focus-next`: the cell should have tabindex=\"0\", so that it will be\n   *   focused the next time someone tabs with a keyboard.\n   * - `none`: the cell should have tabindex=\"-1\", so it is not focused by\n   *   keyboard interactions at this time.\n   */\n  focusState?: 'trigger-focus' | 'focus-next' | 'none';\n  onFocusTrigger?: (e: React.MouseEvent<HTMLTableCellElement> | React.KeyboardEvent<HTMLTableCellElement>) => void;\n}\n\nexport function TableCell({\n  children,\n  density,\n  variant,\n  width,\n  focusState = 'none',\n  onFocusTrigger,\n  isFirstColumn,\n  isLastColumn,\n  description,\n  align,\n  ...otherProps\n}: TableCellProps) {\n  const theme = useTheme();\n\n  const elRef = useRef<HTMLTableCellElement>();\n\n  const isHeader = variant === 'head';\n\n  useEffect(() => {\n    if (focusState === 'trigger-focus' && elRef.current) {\n      elRef.current.focus();\n    }\n  }, [focusState]);\n\n  const handleFocus: React.FocusEventHandler<HTMLTableCellElement> = (e) => {\n    // From https://zellwk.com/blog/keyboard-focusable-elements/\n    const nestedFocusTarget = e.currentTarget?.querySelector<HTMLElement>(\n      'a[href], button, input, textarea, select, details,[role=\"button\"]'\n    );\n    if (nestedFocusTarget) {\n      // If the cell has a focusable child, focus it instead. Mostly used for\n      // checkbox cells, but could have other uses.\n      nestedFocusTarget.focus();\n    }\n  };\n\n  const handleInteractionFocusTrigger: TableCellProps['onFocusTrigger'] = (e) => {\n    // We use `onClick` and `onKeyUp` events instead of `onFocus` because of\n    // some ordering issues with when the browser calls events and how this\n    // plays with the triggering of focus with keyboard interactions.\n    // These report that a focus event happened, so we can adjust the current\n    // tabindex and focuses to the right cell.\n    onFocusTrigger?.(e);\n  };\n\n  return (\n    <StyledMuiTableCell\n      {...otherProps}\n      // Modify the tab index based on the currently focused cell. It's important\n      // to avoid having tabindex 0 on everything because it essentially traps\n      // a keyboard user in the table until they hit \"tab\" for every single\n      // cell.\n      tabIndex={focusState !== 'none' ? 0 : -1}\n      onFocus={handleFocus}\n      onClick={handleInteractionFocusTrigger}\n      onKeyUp={handleInteractionFocusTrigger}\n      sx={{\n        width: width,\n        borderBottom: isHeader\n          ? (theme) => `solid 1px ${theme.palette.grey[100]}`\n          : `solid 1px ${theme.palette.grey[50]}`,\n      }}\n      ref={elRef}\n    >\n      <Box\n        sx={{\n          ...getTableCellLayout(theme, density, { isLastColumn, isFirstColumn }),\n          position: 'relative',\n\n          // Text truncation. Currently enforced on all cells. We may control\n          // this with a prop on column config in the future.\n          whiteSpace: 'nowrap',\n          overflow: 'hidden',\n          textOverflow: 'ellipsis',\n\n          // Need to inherit from the MUI cell because this manages some ordering\n          // that the `TableSortLabel` uses to determine the location of the icon\n          // in headers.\n          flexDirection: 'inherit',\n        }}\n        title={description}\n        aria-label={description}\n        textAlign={align}\n      >\n        {children}\n      </Box>\n    </StyledMuiTableCell>\n  );\n}\n"],"names":["TableCell","MuiTableCell","styled","Box","useTheme","useEffect","useRef","getTableCellLayout","StyledMuiTableCell","theme","padding","backgroundColor","palette","background","default","outline","primary","main","outlineOffset","borderRadius","children","density","variant","width","focusState","onFocusTrigger","isFirstColumn","isLastColumn","description","align","otherProps","elRef","isHeader","current","focus","handleFocus","e","nestedFocusTarget","currentTarget","querySelector","handleInteractionFocusTrigger","tabIndex","onFocus","onClick","onKeyUp","sx","borderBottom","grey","ref","position","whiteSpace","overflow","textOverflow","flexDirection","title","aria-label","textAlign"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAASA,aAAaC,YAAY,EAAEC,MAAM,EAAuCC,GAAG,EAAEC,QAAQ,QAAQ,gBAAgB;AACtH,SAASC,SAAS,EAAEC,MAAM,QAAQ,QAAQ;AAC1C,SAA2CC,kBAAkB,QAAQ,sBAAsB;AAE3F,MAAMC,qBAAqBN,OAAOD,cAAc,CAAC,EAAEQ,KAAK,EAAE,GAAM,CAAA;QAC9DC,SAAS;QACTC,iBAAiB;QAEjB,uBAAuB;YACrB,kEAAkE;YAClEA,iBAAiBF,MAAMG,OAAO,CAACC,UAAU,CAACC,OAAO;QACnD;QACA,mBAAmB;YACjBC,SAAS,CAAC,UAAU,EAAEN,MAAMG,OAAO,CAACI,OAAO,CAACC,IAAI,CAAC,CAAC;YAClD,uEAAuE;YACvE,4BAA4B;YAC5BC,eAAe;YACfC,cAAc;QAChB;IACF,CAAA;AAkCA,OAAO,SAASnB,UAAU,EACxBoB,QAAQ,EACRC,OAAO,EACPC,OAAO,EACPC,KAAK,EACLC,aAAa,MAAM,EACnBC,cAAc,EACdC,aAAa,EACbC,YAAY,EACZC,WAAW,EACXC,KAAK,EACL,GAAGC,YACY;IACf,MAAMrB,QAAQL;IAEd,MAAM2B,QAAQzB;IAEd,MAAM0B,WAAWV,YAAY;IAE7BjB,UAAU;QACR,IAAImB,eAAe,mBAAmBO,MAAME,OAAO,EAAE;YACnDF,MAAME,OAAO,CAACC,KAAK;QACrB;IACF,GAAG;QAACV;KAAW;IAEf,MAAMW,cAA6D,CAACC;YAExCA;QAD1B,4DAA4D;QAC5D,MAAMC,qBAAoBD,mBAAAA,EAAEE,aAAa,cAAfF,uCAAAA,iBAAiBG,aAAa,CACtD;QAEF,IAAIF,mBAAmB;YACrB,uEAAuE;YACvE,6CAA6C;YAC7CA,kBAAkBH,KAAK;QACzB;IACF;IAEA,MAAMM,gCAAkE,CAACJ;QACvE,wEAAwE;QACxE,uEAAuE;QACvE,iEAAiE;QACjE,yEAAyE;QACzE,0CAA0C;QAC1CX,2BAAAA,qCAAAA,eAAiBW;IACnB;IAEA,qBACE,KAAC5B;QACE,GAAGsB,UAAU;QACd,2EAA2E;QAC3E,wEAAwE;QACxE,qEAAqE;QACrE,QAAQ;QACRW,UAAUjB,eAAe,SAAS,IAAI,CAAC;QACvCkB,SAASP;QACTQ,SAASH;QACTI,SAASJ;QACTK,IAAI;YACFtB,OAAOA;YACPuB,cAAcd,WACV,CAACvB,QAAU,CAAC,UAAU,EAAEA,MAAMG,OAAO,CAACmC,IAAI,CAAC,IAAI,CAAC,CAAC,GACjD,CAAC,UAAU,EAAEtC,MAAMG,OAAO,CAACmC,IAAI,CAAC,GAAG,CAAC,CAAC;QAC3C;QACAC,KAAKjB;kBAEL,cAAA,KAAC5B;YACC0C,IAAI;gBACF,GAAGtC,mBAAmBE,OAAOY,SAAS;oBAAEM;oBAAcD;gBAAc,EAAE;gBACtEuB,UAAU;gBAEV,mEAAmE;gBACnE,mDAAmD;gBACnDC,YAAY;gBACZC,UAAU;gBACVC,cAAc;gBAEd,uEAAuE;gBACvE,uEAAuE;gBACvE,cAAc;gBACdC,eAAe;YACjB;YACAC,OAAO1B;YACP2B,cAAY3B;YACZ4B,WAAW3B;sBAEVT;;;AAIT"}

package/dist/Table/TableHeaderCell.d.ts

@@ -1,5 +1,5 @@
-import { SortDirection } from './model/table-model';
 import { TableCellProps } from './TableCell';
+import { SortDirection } from './model/table-model';
 export interface TableHeaderCellProps extends TableCellProps {
     /**
      * Handler called when a sort event is triggered.

package/dist/Table/TableHeaderCell.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TableHeaderCell.d.ts","sourceRoot":"","sources":["../../src/Table/TableHeaderCell.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AACpD,OAAO,EAAa,cAAc,EAAE,MAAM,aAAa,CAAC;AAExD,MAAM,WAAW,oBAAqB,SAAQ,cAAc;IAC1D;;;OAGG;IACH,MAAM,CAAC,EAAE,CAAC,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IAEhD;;OAEG;IACH,aAAa,CAAC,EAAE,aAAa,CAAC;IAE9B;;;;;OAKG;IACH,iBAAiB,CAAC,EAAE,aAAa,CAAC;CACnC;AAED,wBAAgB,eAAe,CAAC,EAC9B,MAAM,EACN,aAAa,EACb,iBAAiB,EACjB,QAAQ,EACR,GAAG,SAAS,EACb,EAAE,oBAAoB,2CA4CtB"}
+{"version":3,"file":"TableHeaderCell.d.ts","sourceRoot":"","sources":["../../src/Table/TableHeaderCell.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAa,cAAc,EAAE,MAAM,aAAa,CAAC;AACxD,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAEpD,MAAM,WAAW,oBAAqB,SAAQ,cAAc;IAC1D;;;OAGG;IACH,MAAM,CAAC,EAAE,CAAC,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IAEhD;;OAEG;IACH,aAAa,CAAC,EAAE,aAAa,CAAC;IAE9B;;;;;OAKG;IACH,iBAAiB,CAAC,EAAE,aAAa,CAAC;CACnC;AAED,wBAAgB,eAAe,CAAC,EAC9B,MAAM,EACN,aAAa,EACb,iBAAiB,EACjB,QAAQ,EACR,GAAG,SAAS,EACb,EAAE,oBAAoB,2CA4CtB"}

package/dist/Table/TableHeaderCell.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Table/TableHeaderCell.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { TableSortLabel, Typography, tableSortLabelClasses } from '@mui/material';\nimport { SortDirection } from './model/table-model';\nimport { TableCell, TableCellProps } from './TableCell';\n\nexport interface TableHeaderCellProps extends TableCellProps {\n  /**\n   * Handler called when a sort event is triggered.\n   * When specified, the header will include sorting interactions and indicators.\n   */\n  onSort?: ((event: unknown) => void) | undefined;\n\n  /**\n   * The current direction the header is sorted.\n   */\n  sortDirection?: SortDirection;\n\n  /**\n   * The next direction the header will be sorted when another sort action\n   * is triggered via click/keyboard. This impacts some UI interactions (e.g.\n   * the direction of the sort arrow on hover f the column is currently\n   * unsorted.)\n   */\n  nextSortDirection?: SortDirection;\n}\n\nexport function TableHeaderCell({\n  onSort,\n  sortDirection,\n  nextSortDirection,\n  children,\n  ...cellProps\n}: TableHeaderCellProps) {\n  const showSortLabel = !!onSort;\n\n  const headerText = (\n    <Typography noWrap variant=\"inherit\" component=\"div\" color=\"inherit\">\n      {children}\n    </Typography>\n  );\n\n  const isActive = !!sortDirection;\n  const direction = isActive ? sortDirection : nextSortDirection;\n\n  return (\n    <TableCell {...cellProps}>\n      {showSortLabel ? (\n        <TableSortLabel\n          onClick={onSort}\n          direction={direction}\n          active={isActive}\n          sx={{\n            // Overrides a default vertical alignment in the CSS that changes\n            // the header vertical rhythm in a way that's inconsistent with\n            // non-sorting headers.\n            verticalAlign: 'unset',\n\n            // Makes it possible to ellipsize the text if it's too long.\n            maxWidth: '100%',\n\n            // Make the arrow visible when focused using the keyboard to assist\n            // with a11y.\n            '&:focus-visible': {\n              [`& .${tableSortLabelClasses.icon}`]: {\n                opacity: isActive ? 1 : 0.5,\n              },\n            },\n          }}\n        >\n          {headerText}\n        </TableSortLabel>\n      ) : (\n        headerText\n      )}\n    </TableCell>\n  );\n}\n"],"names":["TableSortLabel","Typography","tableSortLabelClasses","TableCell","TableHeaderCell","onSort","sortDirection","nextSortDirection","children","cellProps","showSortLabel","headerText","noWrap","variant","component","color","isActive","direction","onClick","active","sx","verticalAlign","maxWidth","icon","opacity"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAASA,cAAc,EAAEC,UAAU,EAAEC,qBAAqB,QAAQ,gBAAgB;AAElF,SAASC,SAAS,QAAwB,cAAc;AAuBxD,OAAO,SAASC,gBAAgB,EAC9BC,MAAM,EACNC,aAAa,EACbC,iBAAiB,EACjBC,QAAQ,EACR,GAAGC,WACkB;IACrB,MAAMC,gBAAgB,CAAC,CAACL;IAExB,MAAMM,2BACJ,KAACV;QAAWW,MAAM;QAACC,SAAQ;QAAUC,WAAU;QAAMC,OAAM;kBACxDP;;IAIL,MAAMQ,WAAW,CAAC,CAACV;IACnB,MAAMW,YAAYD,WAAWV,gBAAgBC;IAE7C,qBACE,KAACJ;QAAW,GAAGM,SAAS;kBACrBC,8BACC,KAACV;YACCkB,SAASb;YACTY,WAAWA;YACXE,QAAQH;YACRI,IAAI;gBACF,iEAAiE;gBACjE,+DAA+D;gBAC/D,uBAAuB;gBACvBC,eAAe;gBAEf,4DAA4D;gBAC5DC,UAAU;gBAEV,mEAAmE;gBACnE,aAAa;gBACb,mBAAmB;oBACjB,CAAC,CAAC,GAAG,EAAEpB,sBAAsBqB,IAAI,CAAC,CAAC,CAAC,EAAE;wBACpCC,SAASR,WAAW,IAAI;oBAC1B;gBACF;YACF;sBAECL;aAGHA;;AAIR"}
+{"version":3,"sources":["../../src/Table/TableHeaderCell.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { TableSortLabel, Typography, tableSortLabelClasses } from '@mui/material';\nimport { TableCell, TableCellProps } from './TableCell';\nimport { SortDirection } from './model/table-model';\n\nexport interface TableHeaderCellProps extends TableCellProps {\n  /**\n   * Handler called when a sort event is triggered.\n   * When specified, the header will include sorting interactions and indicators.\n   */\n  onSort?: ((event: unknown) => void) | undefined;\n\n  /**\n   * The current direction the header is sorted.\n   */\n  sortDirection?: SortDirection;\n\n  /**\n   * The next direction the header will be sorted when another sort action\n   * is triggered via click/keyboard. This impacts some UI interactions (e.g.\n   * the direction of the sort arrow on hover f the column is currently\n   * unsorted.)\n   */\n  nextSortDirection?: SortDirection;\n}\n\nexport function TableHeaderCell({\n  onSort,\n  sortDirection,\n  nextSortDirection,\n  children,\n  ...cellProps\n}: TableHeaderCellProps) {\n  const showSortLabel = !!onSort;\n\n  const headerText = (\n    <Typography noWrap variant=\"inherit\" component=\"div\" color=\"inherit\">\n      {children}\n    </Typography>\n  );\n\n  const isActive = !!sortDirection;\n  const direction = isActive ? sortDirection : nextSortDirection;\n\n  return (\n    <TableCell {...cellProps}>\n      {showSortLabel ? (\n        <TableSortLabel\n          onClick={onSort}\n          direction={direction}\n          active={isActive}\n          sx={{\n            // Overrides a default vertical alignment in the CSS that changes\n            // the header vertical rhythm in a way that's inconsistent with\n            // non-sorting headers.\n            verticalAlign: 'unset',\n\n            // Makes it possible to ellipsize the text if it's too long.\n            maxWidth: '100%',\n\n            // Make the arrow visible when focused using the keyboard to assist\n            // with a11y.\n            '&:focus-visible': {\n              [`& .${tableSortLabelClasses.icon}`]: {\n                opacity: isActive ? 1 : 0.5,\n              },\n            },\n          }}\n        >\n          {headerText}\n        </TableSortLabel>\n      ) : (\n        headerText\n      )}\n    </TableCell>\n  );\n}\n"],"names":["TableSortLabel","Typography","tableSortLabelClasses","TableCell","TableHeaderCell","onSort","sortDirection","nextSortDirection","children","cellProps","showSortLabel","headerText","noWrap","variant","component","color","isActive","direction","onClick","active","sx","verticalAlign","maxWidth","icon","opacity"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAASA,cAAc,EAAEC,UAAU,EAAEC,qBAAqB,QAAQ,gBAAgB;AAClF,SAASC,SAAS,QAAwB,cAAc;AAwBxD,OAAO,SAASC,gBAAgB,EAC9BC,MAAM,EACNC,aAAa,EACbC,iBAAiB,EACjBC,QAAQ,EACR,GAAGC,WACkB;IACrB,MAAMC,gBAAgB,CAAC,CAACL;IAExB,MAAMM,2BACJ,KAACV;QAAWW,MAAM;QAACC,SAAQ;QAAUC,WAAU;QAAMC,OAAM;kBACxDP;;IAIL,MAAMQ,WAAW,CAAC,CAACV;IACnB,MAAMW,YAAYD,WAAWV,gBAAgBC;IAE7C,qBACE,KAACJ;QAAW,GAAGM,SAAS;kBACrBC,8BACC,KAACV;YACCkB,SAASb;YACTY,WAAWA;YACXE,QAAQH;YACRI,IAAI;gBACF,iEAAiE;gBACjE,+DAA+D;gBAC/D,uBAAuB;gBACvBC,eAAe;gBAEf,4DAA4D;gBAC5DC,UAAU;gBAEV,mEAAmE;gBACnE,aAAa;gBACb,mBAAmB;oBACjB,CAAC,CAAC,GAAG,EAAEpB,sBAAsBqB,IAAI,CAAC,CAAC,CAAC,EAAE;wBACpCC,SAASR,WAAW,IAAI;oBAC1B;gBACF;YACF;sBAECL;aAGHA;;AAIR"}

package/dist/Table/model/table-model.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { Theme } from '@mui/material';
 import { AccessorKeyColumnDef, CellContext, ColumnDef, CoreOptions, RowData, RowSelectionState, SortingState } from '@tanstack/react-table';
-export type TableDensity = 'compact' | 'standard';
+export type TableDensity = 'compact' | 'standard' | 'comfortable';
 export type SortDirection = 'asc' | 'desc' | undefined;
 export type TableRowEventOpts = {
     /**

package/dist/Table/model/table-model.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"table-model.d.ts","sourceRoot":"","sources":["../../../src/Table/model/table-model.ts"],"names":[],"mappings":";AAaA,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACtC,OAAO,EACL,oBAAoB,EACpB,WAAW,EACX,SAAS,EACT,WAAW,EACX,OAAO,EACP,iBAAiB,EACjB,YAAY,EACb,MAAM,uBAAuB,CAAC;AAG/B,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,UAAU,CAAC;AAClD,MAAM,MAAM,aAAa,GAAG,KAAK,GAAG,MAAM,GAAG,SAAS,CAAC;AAEvD,MAAM,MAAM,iBAAiB,GAAG;IAC9B;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;IAEX;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,WAAW,UAAU,CAAC,SAAS;IACnC;;OAEG;IACH,MAAM,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;;OAGG;IACH,IAAI,EAAE,SAAS,EAAE,CAAC;IAElB;;;;OAIG;IACH,OAAO,EAAE,KAAK,CAAC,iBAAiB,CAAC,SAAS,CAAC,CAAC,CAAC;IAE7C;;;OAGG;IACH,OAAO,CAAC,EAAE,YAAY,CAAC;IAEvB;;OAEG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAE5B;;;;;;;;;;OAUG;IACH,mBAAmB,CAAC,EAAE,UAAU,GAAG,QAAQ,CAAC;IAE5C;;;;;OAKG;IACH,YAAY,CAAC,EAAE,iBAAiB,CAAC;IAEjC;;OAEG;IACH,cAAc,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,EAAE,IAAI,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAExE;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,EAAE,IAAI,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAEvE;;;;;OAKG;IACH,OAAO,CAAC,EAAE,YAAY,CAAC;IAEvB;;OAEG;IACH,oBAAoB,CAAC,EAAE,CAAC,YAAY,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAEjE;;OAEG;IACH,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,YAAY,KAAK,IAAI,CAAC;IAElD;;;;OAIG;IACH,QAAQ,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC,UAAU,CAAC,CAAC;IAE9C;;;OAGG;IACH,gBAAgB,CAAC,EAAE,CAAC,OAAO,EAAE,SAAS,KAAK,MAAM,CAAC;CACnD;AAWD,KAAK,eAAe,GAAG,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,aAAa,EAAE,SAAS,GAAG,UAAU,GAAG,YAAY,CAAC,CAAC,GAAG;IACrG,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,KAAK,sBAAsB,GAAG;IAC5B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB,CAAC;AAEF;;;GAGG;AACH,wBAAgB,kBAAkB,CAChC,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,YAAY,EACrB,EAAE,YAAY,EAAE,aAAa,EAAE,GAAE,sBAA2B,GAC3D,eAAe,CAiCjB;AAED,MAAM,MAAM,kBAAkB,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC;AAM7D,OAAO,QAAQ,sBAAsB,CAAC;IAEpC,UAAU,UAAU,CAAC,KAAK,SAAS,OAAO,EAAE,MAAM;QAChD,KAAK,CAAC,EAAE,iBAAiB,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC,CAAC;QAC1C,iBAAiB,CAAC,EAAE,iBAAiB,CAAC,KAAK,CAAC,CAAC,mBAAmB,CAAC,CAAC;QAClE,eAAe,CAAC,EAAE,iBAAiB,CAAC,KAAK,CAAC,CAAC,iBAAiB,CAAC,CAAC;KAC/D;CACF;AAKD,MAAM,WAAW,iBAAiB,CAAC,SAAS,CAM1C,SAAQ,IAAI,CAAC,oBAAoB,CAAC,SAAS,EAAE,GAAG,CAAC,EAAE,aAAa,GAAG,MAAM,GAAG,WAAW,CAAC;IACxF;;OAEG;IACH,MAAM,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,KAAK,CAAC,EAAE,kBAAkB,CAAC;IAE3B;;;;;;;OAOG;IAGH,eAAe,CAAC,EAAE,CAAC,CAAC,KAAK,EAAE,WAAW,CAAC,SAAS,EAAE,GAAG,CAAC,KAAK,MAAM,CAAC,GAAG,OAAO,GAAG,SAAS,CAAC;IAEzF;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAI3B;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACzB;AAED;;GAEG;AACH,wBAAgB,8BAA8B,CAAC,SAAS,EAAE,OAAO,EAAE,KAAK,CAAC,iBAAiB,CAAC,SAAS,CAAC,CAAC,mCA0CrG"}
+{"version":3,"file":"table-model.d.ts","sourceRoot":"","sources":["../../../src/Table/model/table-model.ts"],"names":[],"mappings":"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"}

package/dist/Table/model/table-model.js

@@ -21,31 +21,36 @@ function calculateTableCellHeight(lineHeight, paddingY) {
  * Returns the properties to lay out the content of table cells based on the
  * theme and density.
  */ export function getTableCellLayout(theme, density, { isLastColumn, isFirstColumn } = {}) {
+    // Density Standard
+    let paddingY = theme.spacing(1);
+    let basePaddingX = theme.spacing(1.25);
+    let edgePaddingX = theme.spacing(2);
+    let paddingLeft = isFirstColumn ? edgePaddingX : basePaddingX;
+    let paddingRight = isLastColumn ? edgePaddingX : basePaddingX;
+    let lineHeight = theme.typography.body1.lineHeight;
+    let fontSize = theme.typography.body1.fontSize;
     if (density === 'compact') {
-        const paddingY = theme.spacing(0.5);
-        const basePaddingX = theme.spacing(0.5);
-        const edgePaddingX = theme.spacing(1);
-        const paddingLeft = isFirstColumn ? edgePaddingX : basePaddingX;
-        const paddingRight = isLastColumn ? edgePaddingX : basePaddingX;
-        const lineHeight = theme.typography.body2.lineHeight;
-        return {
-            padding: `${paddingY} ${paddingRight} ${paddingY} ${paddingLeft}`,
-            height: calculateTableCellHeight(lineHeight, paddingY),
-            fontSize: theme.typography.body2.fontSize,
-            lineHeight: lineHeight
-        };
+        paddingY = theme.spacing(0.5);
+        basePaddingX = theme.spacing(0.5);
+        edgePaddingX = theme.spacing(1);
+        paddingLeft = isFirstColumn ? edgePaddingX : basePaddingX;
+        paddingRight = isLastColumn ? edgePaddingX : basePaddingX;
+        lineHeight = theme.typography.body2.lineHeight;
+        fontSize = theme.typography.body2.fontSize;
+    }
+    if (density === 'comfortable') {
+        paddingY = theme.spacing(2);
+        basePaddingX = theme.spacing(1.5);
+        edgePaddingX = theme.spacing(2);
+        paddingLeft = isFirstColumn ? edgePaddingX : basePaddingX;
+        paddingRight = isLastColumn ? edgePaddingX : basePaddingX;
+        lineHeight = theme.typography.body1.lineHeight;
+        fontSize = theme.typography.body1.fontSize;
     }
-    // standard density
-    const paddingY = theme.spacing(1);
-    const basePaddingX = theme.spacing(1.25);
-    const edgePaddingX = theme.spacing(2);
-    const paddingLeft = isFirstColumn ? edgePaddingX : basePaddingX;
-    const paddingRight = isLastColumn ? edgePaddingX : basePaddingX;
-    const lineHeight = theme.typography.body1.lineHeight;
     return {
         padding: `${paddingY} ${paddingRight} ${paddingY} ${paddingLeft}`,
         height: calculateTableCellHeight(lineHeight, paddingY),
-        fontSize: theme.typography.body1.fontSize,
+        fontSize: fontSize,
         lineHeight: lineHeight
     };
 }

package/dist/Table/model/table-model.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Table/model/table-model.ts"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Theme } from '@mui/material';\nimport {\n  AccessorKeyColumnDef,\n  CellContext,\n  ColumnDef,\n  CoreOptions,\n  RowData,\n  RowSelectionState,\n  SortingState,\n} from '@tanstack/react-table';\nimport { CSSProperties } from 'react';\n\nexport type TableDensity = 'compact' | 'standard';\nexport type SortDirection = 'asc' | 'desc' | undefined;\n\nexport type TableRowEventOpts = {\n  /**\n   * Unique identifier for the row.\n   */\n  id: string;\n\n  /**\n   * Index of the row in the original data.\n   */\n  index: number;\n};\n\nexport interface TableProps<TableData> {\n  /**\n   * Height of the table.\n   */\n  height: number;\n\n  /**\n   * Width of the table.\n   */\n  width: number;\n\n  /**\n   * Array of data to render in the table. Each entry in the array will be\n   * rendered as a row in the table.\n   */\n  data: TableData[];\n\n  /**\n   * Array of column configuration for the table. Each entry in the array will\n   * be rendered as a column header and impact the rendering of cells within\n   * table rows.\n   */\n  columns: Array<TableColumnConfig<TableData>>;\n\n  /**\n   * The density of the table layout. This impacts the size and space taken up\n   * by content in the table (e.g. font size, padding).\n   */\n  density?: TableDensity;\n\n  /**\n   * When `true`, the first column of the table will include checkboxes.\n   */\n  checkboxSelection?: boolean;\n\n  /**\n   * Determines the behavior of row selection.\n   *\n   * - `standard`: clicking a checkbox will toggle that rows's selected/unselected\n   *    state and will not impact other rows.\n   * - `legend`: clicking a checkbox will \"focus\" that row by selecting it and\n   *    unselecting other rows. Clicking a checkbox with a modifier key pressed,\n   *    will change this behavior to behave like `standard`.\n   *\n   * @default 'standard'\n   */\n  rowSelectionVariant?: 'standard' | 'legend';\n\n  /**\n   * State of selected rows in the table when `checkboxSelection` is enabled.\n   *\n   * Selected row state is a controlled value that should be managed using a\n   * combination of this prop and `onRowSelectionChange`.\n   */\n  rowSelection?: RowSelectionState;\n\n  /**\n   * Callback fired when the mouse is moved over a table row.\n   */\n  onRowMouseOver?: (e: React.MouseEvent, opts: TableRowEventOpts) => void;\n\n  /**\n   * Callback fired when the mouse is moved out of a table row.\n   */\n  onRowMouseOut?: (e: React.MouseEvent, opts: TableRowEventOpts) => void;\n\n  /**\n   * State of the column sorting in the table.\n   *\n   * The column sorting is a controlled value that should be managed using a\n   * combination fo this prop and `onSortingChange`.\n   */\n  sorting?: SortingState;\n\n  /**\n   * Callback fired when the selected rows in the table changes.\n   */\n  onRowSelectionChange?: (rowSelection: RowSelectionState) => void;\n\n  /**\n   * Callback fired when the table sorting changes.\n   */\n  onSortingChange?: (sorting: SortingState) => void;\n\n  /**\n   * Function used to determine the unique identifier used for each row. This\n   * value is used to key `rowSelection`. If this value is not set, the index\n   * is used as the unique identifier.\n   */\n  getRowId?: CoreOptions<TableData>['getRowId'];\n\n  /**\n   * Function used to determine the color of the checkbox when `checkboxSelection`\n   * is enabled. If not set, a default color is used.\n   */\n  getCheckboxColor?: (rowData: TableData) => string;\n}\n\nfunction calculateTableCellHeight(lineHeight: CSSProperties['lineHeight'], paddingY: string): number {\n  // Doing a bunch of math to enforce height to avoid weirdness with mismatched\n  // heights based on customization of cell contents.\n  const lineHeightNum = typeof lineHeight === 'string' ? parseInt(lineHeight, 10) : lineHeight ?? 0;\n  const verticalPaddingNum = typeof paddingY === 'string' ? parseInt(paddingY, 10) : paddingY;\n\n  return lineHeightNum + verticalPaddingNum * 2;\n}\n\ntype TableCellLayout = NonNullable<Pick<React.CSSProperties, 'padding' | 'fontSize' | 'lineHeight'>> & {\n  height: number;\n};\n\ntype GetTableCellLayoutOpts = {\n  isLastColumn?: boolean;\n  isFirstColumn?: boolean;\n};\n\n/**\n * Returns the properties to lay out the content of table cells based on the\n * theme and density.\n */\nexport function getTableCellLayout(\n  theme: Theme,\n  density: TableDensity,\n  { isLastColumn, isFirstColumn }: GetTableCellLayoutOpts = {}\n): TableCellLayout {\n  if (density === 'compact') {\n    const paddingY = theme.spacing(0.5);\n\n    const basePaddingX = theme.spacing(0.5);\n    const edgePaddingX = theme.spacing(1);\n    const paddingLeft = isFirstColumn ? edgePaddingX : basePaddingX;\n    const paddingRight = isLastColumn ? edgePaddingX : basePaddingX;\n\n    const lineHeight = theme.typography.body2.lineHeight;\n\n    return {\n      padding: `${paddingY} ${paddingRight} ${paddingY} ${paddingLeft}`,\n      height: calculateTableCellHeight(lineHeight, paddingY),\n      fontSize: theme.typography.body2.fontSize,\n      lineHeight: lineHeight,\n    };\n  }\n\n  // standard density\n  const paddingY = theme.spacing(1);\n  const basePaddingX = theme.spacing(1.25);\n  const edgePaddingX = theme.spacing(2);\n  const paddingLeft = isFirstColumn ? edgePaddingX : basePaddingX;\n  const paddingRight = isLastColumn ? edgePaddingX : basePaddingX;\n  const lineHeight = theme.typography.body1.lineHeight;\n\n  return {\n    padding: `${paddingY} ${paddingRight} ${paddingY} ${paddingLeft}`,\n    height: calculateTableCellHeight(lineHeight, paddingY),\n    fontSize: theme.typography.body1.fontSize,\n    lineHeight: lineHeight,\n  };\n}\n\nexport type TableCellAlignment = 'left' | 'right' | 'center';\n\n// Overrides of meta value, so it can have a meaningful type in our code instead\n// of `any`. Putting this in the model instead of a separate .d.ts file because\n// I couldn't get it to work properly that way and punted on figuring it out\n// after trying several things.\ndeclare module '@tanstack/table-core' {\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  interface ColumnMeta<TData extends RowData, TValue> {\n    align?: TableColumnConfig<TData>['align'];\n    headerDescription?: TableColumnConfig<TData>['headerDescription'];\n    cellDescription?: TableColumnConfig<TData>['cellDescription'];\n  }\n}\n\n// Only exposing a very simplified version of the very extensive column definitions\n// possible with tanstack table to make it easier for us to control rendering\n// and functionality.\nexport interface TableColumnConfig<TableData>\n  // Any needed to work around some typing issues with tanstack query.\n  // https://github.com/TanStack/table/issues/4241\n  // TODO: revisit issue thread and see if there are any workarounds we can\n  // use.\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  extends Pick<AccessorKeyColumnDef<TableData, any>, 'accessorKey' | 'cell' | 'sortingFn'> {\n  /**\n   * Text to display in the header for the column.\n   */\n  header: string;\n\n  /**\n   * Alignment of the content in the cell.\n   */\n  align?: TableCellAlignment;\n\n  /**\n   * Text to display when hovering over a cell. This can be useful for\n   * providing additional information about the column when the content is\n   * ellipsized to fit in the space.\n   *\n   * If set to `true`, it will use the value generated by the `cell` prop if it\n   * can be treated as a string.\n   */\n  // `any` needed for same reason as no-explicit-any higher up in this type.\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  cellDescription?: ((props: CellContext<TableData, any>) => string) | boolean | undefined;\n\n  /**\n   * When `true`, the column will be sortable.\n   * @default false\n   */\n  enableSorting?: boolean;\n\n  /**\n   * Text to display when hovering over the header text. This can be useful for\n   * providing additional information about the column when you want to keep the\n   * header text relatively short to manage the column width.\n   */\n  headerDescription?: string;\n\n  // Tanstack Table does not support an \"auto\" value to naturally size to fit\n  // the space in a table. Adding a custom setting to manage this ourselves.\n  /**\n   * Width of the column when rendered in a table. It should be a number in pixels\n   * or \"auto\" to allow the table to automatically adjust the width to fill\n   * space.\n   * @default 'auto'\n   */\n  width?: number | 'auto';\n}\n\n/**\n * Takes in a perses table column and transforms it into a tanstack column.\n */\nexport function persesColumnsToTanstackColumns<TableData>(columns: Array<TableColumnConfig<TableData>>) {\n  const tableCols: Array<ColumnDef<TableData>> = columns.map(\n    ({ width, align, headerDescription, cellDescription, enableSorting, ...otherProps }) => {\n      // Tanstack Table does not support an \"auto\" value to naturally size to fit\n      // the space in a table. We translate our custom \"auto\" setting to 0 size\n      // for these columns, so it is easy to fall back to auto when rendering.\n      // Taking from a recommendation in this github discussion:\n      // https://github.com/TanStack/table/discussions/4179#discussioncomment-3631326\n      const sizeProps =\n        width === 'auto' || width === undefined\n          ? {\n              // All zero values are used as shorthand for \"auto\" when rendering\n              // because it makes it easy to fall back. (e.g. `row.size || \"auto\"`)\n              size: 0,\n              minSize: 0,\n              maxSize: 0,\n            }\n          : {\n              size: width,\n            };\n\n      const result = {\n        ...otherProps,\n        ...sizeProps,\n\n        // Default sorting to false, so it is very explicitly set per column.\n        enableSorting: !!enableSorting,\n\n        // Open-ended store for extra metadata in TanStack Table, so you can bake\n        // in your own features.\n        meta: {\n          align,\n          headerDescription,\n          cellDescription,\n        },\n      };\n\n      return result;\n    }\n  );\n\n  return tableCols;\n}\n"],"names":["calculateTableCellHeight","lineHeight","paddingY","lineHeightNum","parseInt","verticalPaddingNum","getTableCellLayout","theme","density","isLastColumn","isFirstColumn","spacing","basePaddingX","edgePaddingX","paddingLeft","paddingRight","typography","body2","padding","height","fontSize","body1","persesColumnsToTanstackColumns","columns","tableCols","map","width","align","headerDescription","cellDescription","enableSorting","otherProps","sizeProps","undefined","size","minSize","maxSize","result","meta"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AA+HjC,SAASA,yBAAyBC,UAAuC,EAAEC,QAAgB;IACzF,6EAA6E;IAC7E,mDAAmD;IACnD,MAAMC,gBAAgB,OAAOF,eAAe,WAAWG,SAASH,YAAY,MAAMA,uBAAAA,wBAAAA,aAAc;IAChG,MAAMI,qBAAqB,OAAOH,aAAa,WAAWE,SAASF,UAAU,MAAMA;IAEnF,OAAOC,gBAAgBE,qBAAqB;AAC9C;AAWA;;;CAGC,GACD,OAAO,SAASC,mBACdC,KAAY,EACZC,OAAqB,EACrB,EAAEC,YAAY,EAAEC,aAAa,EAA0B,GAAG,CAAC,CAAC;IAE5D,IAAIF,YAAY,WAAW;QACzB,MAAMN,WAAWK,MAAMI,OAAO,CAAC;QAE/B,MAAMC,eAAeL,MAAMI,OAAO,CAAC;QACnC,MAAME,eAAeN,MAAMI,OAAO,CAAC;QACnC,MAAMG,cAAcJ,gBAAgBG,eAAeD;QACnD,MAAMG,eAAeN,eAAeI,eAAeD;QAEnD,MAAMX,aAAaM,MAAMS,UAAU,CAACC,KAAK,CAAChB,UAAU;QAEpD,OAAO;YACLiB,SAAS,CAAC,EAAEhB,SAAS,CAAC,EAAEa,aAAa,CAAC,EAAEb,SAAS,CAAC,EAAEY,YAAY,CAAC;YACjEK,QAAQnB,yBAAyBC,YAAYC;YAC7CkB,UAAUb,MAAMS,UAAU,CAACC,KAAK,CAACG,QAAQ;YACzCnB,YAAYA;QACd;IACF;IAEA,mBAAmB;IACnB,MAAMC,WAAWK,MAAMI,OAAO,CAAC;IAC/B,MAAMC,eAAeL,MAAMI,OAAO,CAAC;IACnC,MAAME,eAAeN,MAAMI,OAAO,CAAC;IACnC,MAAMG,cAAcJ,gBAAgBG,eAAeD;IACnD,MAAMG,eAAeN,eAAeI,eAAeD;IACnD,MAAMX,aAAaM,MAAMS,UAAU,CAACK,KAAK,CAACpB,UAAU;IAEpD,OAAO;QACLiB,SAAS,CAAC,EAAEhB,SAAS,CAAC,EAAEa,aAAa,CAAC,EAAEb,SAAS,CAAC,EAAEY,YAAY,CAAC;QACjEK,QAAQnB,yBAAyBC,YAAYC;QAC7CkB,UAAUb,MAAMS,UAAU,CAACK,KAAK,CAACD,QAAQ;QACzCnB,YAAYA;IACd;AACF;AAyEA;;CAEC,GACD,OAAO,SAASqB,+BAA0CC,OAA4C;IACpG,MAAMC,YAAyCD,QAAQE,GAAG,CACxD,CAAC,EAAEC,KAAK,EAAEC,KAAK,EAAEC,iBAAiB,EAAEC,eAAe,EAAEC,aAAa,EAAE,GAAGC,YAAY;QACjF,2EAA2E;QAC3E,yEAAyE;QACzE,wEAAwE;QACxE,0DAA0D;QAC1D,+EAA+E;QAC/E,MAAMC,YACJN,UAAU,UAAUA,UAAUO,YAC1B;YACE,kEAAkE;YAClE,qEAAqE;YACrEC,MAAM;YACNC,SAAS;YACTC,SAAS;QACX,IACA;YACEF,MAAMR;QACR;QAEN,MAAMW,SAAS;YACb,GAAGN,UAAU;YACb,GAAGC,SAAS;YAEZ,qEAAqE;YACrEF,eAAe,CAAC,CAACA;YAEjB,yEAAyE;YACzE,wBAAwB;YACxBQ,MAAM;gBACJX;gBACAC;gBACAC;YACF;QACF;QAEA,OAAOQ;IACT;IAGF,OAAOb;AACT"}
+{"version":3,"sources":["../../../src/Table/model/table-model.ts"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Theme } from '@mui/material';\nimport {\n  AccessorKeyColumnDef,\n  CellContext,\n  ColumnDef,\n  CoreOptions,\n  RowData,\n  RowSelectionState,\n  SortingState,\n} from '@tanstack/react-table';\nimport { CSSProperties } from 'react';\n\nexport type TableDensity = 'compact' | 'standard' | 'comfortable';\nexport type SortDirection = 'asc' | 'desc' | undefined;\n\nexport type TableRowEventOpts = {\n  /**\n   * Unique identifier for the row.\n   */\n  id: string;\n\n  /**\n   * Index of the row in the original data.\n   */\n  index: number;\n};\n\nexport interface TableProps<TableData> {\n  /**\n   * Height of the table.\n   */\n  height: number;\n\n  /**\n   * Width of the table.\n   */\n  width: number;\n\n  /**\n   * Array of data to render in the table. Each entry in the array will be\n   * rendered as a row in the table.\n   */\n  data: TableData[];\n\n  /**\n   * Array of column configuration for the table. Each entry in the array will\n   * be rendered as a column header and impact the rendering of cells within\n   * table rows.\n   */\n  columns: Array<TableColumnConfig<TableData>>;\n\n  /**\n   * The density of the table layout. This impacts the size and space taken up\n   * by content in the table (e.g. font size, padding).\n   */\n  density?: TableDensity;\n\n  /**\n   * When `true`, the first column of the table will include checkboxes.\n   */\n  checkboxSelection?: boolean;\n\n  /**\n   * Determines the behavior of row selection.\n   *\n   * - `standard`: clicking a checkbox will toggle that rows's selected/unselected\n   *    state and will not impact other rows.\n   * - `legend`: clicking a checkbox will \"focus\" that row by selecting it and\n   *    unselecting other rows. Clicking a checkbox with a modifier key pressed,\n   *    will change this behavior to behave like `standard`.\n   *\n   * @default 'standard'\n   */\n  rowSelectionVariant?: 'standard' | 'legend';\n\n  /**\n   * State of selected rows in the table when `checkboxSelection` is enabled.\n   *\n   * Selected row state is a controlled value that should be managed using a\n   * combination of this prop and `onRowSelectionChange`.\n   */\n  rowSelection?: RowSelectionState;\n\n  /**\n   * Callback fired when the mouse is moved over a table row.\n   */\n  onRowMouseOver?: (e: React.MouseEvent, opts: TableRowEventOpts) => void;\n\n  /**\n   * Callback fired when the mouse is moved out of a table row.\n   */\n  onRowMouseOut?: (e: React.MouseEvent, opts: TableRowEventOpts) => void;\n\n  /**\n   * State of the column sorting in the table.\n   *\n   * The column sorting is a controlled value that should be managed using a\n   * combination fo this prop and `onSortingChange`.\n   */\n  sorting?: SortingState;\n\n  /**\n   * Callback fired when the selected rows in the table changes.\n   */\n  onRowSelectionChange?: (rowSelection: RowSelectionState) => void;\n\n  /**\n   * Callback fired when the table sorting changes.\n   */\n  onSortingChange?: (sorting: SortingState) => void;\n\n  /**\n   * Function used to determine the unique identifier used for each row. This\n   * value is used to key `rowSelection`. If this value is not set, the index\n   * is used as the unique identifier.\n   */\n  getRowId?: CoreOptions<TableData>['getRowId'];\n\n  /**\n   * Function used to determine the color of the checkbox when `checkboxSelection`\n   * is enabled. If not set, a default color is used.\n   */\n  getCheckboxColor?: (rowData: TableData) => string;\n}\n\nfunction calculateTableCellHeight(lineHeight: CSSProperties['lineHeight'], paddingY: string): number {\n  // Doing a bunch of math to enforce height to avoid weirdness with mismatched\n  // heights based on customization of cell contents.\n  const lineHeightNum = typeof lineHeight === 'string' ? parseInt(lineHeight, 10) : lineHeight ?? 0;\n  const verticalPaddingNum = typeof paddingY === 'string' ? parseInt(paddingY, 10) : paddingY;\n\n  return lineHeightNum + verticalPaddingNum * 2;\n}\n\ntype TableCellLayout = NonNullable<Pick<React.CSSProperties, 'padding' | 'fontSize' | 'lineHeight'>> & {\n  height: number;\n};\n\ntype GetTableCellLayoutOpts = {\n  isLastColumn?: boolean;\n  isFirstColumn?: boolean;\n};\n\n/**\n * Returns the properties to lay out the content of table cells based on the\n * theme and density.\n */\nexport function getTableCellLayout(\n  theme: Theme,\n  density: TableDensity,\n  { isLastColumn, isFirstColumn }: GetTableCellLayoutOpts = {}\n): TableCellLayout {\n  // Density Standard\n  let paddingY = theme.spacing(1);\n  let basePaddingX = theme.spacing(1.25);\n  let edgePaddingX = theme.spacing(2);\n  let paddingLeft = isFirstColumn ? edgePaddingX : basePaddingX;\n  let paddingRight = isLastColumn ? edgePaddingX : basePaddingX;\n  let lineHeight = theme.typography.body1.lineHeight;\n  let fontSize = theme.typography.body1.fontSize;\n\n  if (density === 'compact') {\n    paddingY = theme.spacing(0.5);\n    basePaddingX = theme.spacing(0.5);\n    edgePaddingX = theme.spacing(1);\n    paddingLeft = isFirstColumn ? edgePaddingX : basePaddingX;\n    paddingRight = isLastColumn ? edgePaddingX : basePaddingX;\n    lineHeight = theme.typography.body2.lineHeight;\n    fontSize = theme.typography.body2.fontSize;\n  }\n\n  if (density === 'comfortable') {\n    paddingY = theme.spacing(2);\n    basePaddingX = theme.spacing(1.5);\n    edgePaddingX = theme.spacing(2);\n    paddingLeft = isFirstColumn ? edgePaddingX : basePaddingX;\n    paddingRight = isLastColumn ? edgePaddingX : basePaddingX;\n    lineHeight = theme.typography.body1.lineHeight;\n    fontSize = theme.typography.body1.fontSize;\n  }\n\n  return {\n    padding: `${paddingY} ${paddingRight} ${paddingY} ${paddingLeft}`,\n    height: calculateTableCellHeight(lineHeight, paddingY),\n    fontSize: fontSize,\n    lineHeight: lineHeight,\n  };\n}\n\nexport type TableCellAlignment = 'left' | 'right' | 'center';\n\n// Overrides of meta value, so it can have a meaningful type in our code instead\n// of `any`. Putting this in the model instead of a separate .d.ts file because\n// I couldn't get it to work properly that way and punted on figuring it out\n// after trying several things.\ndeclare module '@tanstack/table-core' {\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  interface ColumnMeta<TData extends RowData, TValue> {\n    align?: TableColumnConfig<TData>['align'];\n    headerDescription?: TableColumnConfig<TData>['headerDescription'];\n    cellDescription?: TableColumnConfig<TData>['cellDescription'];\n  }\n}\n\n// Only exposing a very simplified version of the very extensive column definitions\n// possible with tanstack table to make it easier for us to control rendering\n// and functionality.\nexport interface TableColumnConfig<TableData>\n  // Any needed to work around some typing issues with tanstack query.\n  // https://github.com/TanStack/table/issues/4241\n  // TODO: revisit issue thread and see if there are any workarounds we can\n  // use.\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  extends Pick<AccessorKeyColumnDef<TableData, any>, 'accessorKey' | 'cell' | 'sortingFn'> {\n  /**\n   * Text to display in the header for the column.\n   */\n  header: string;\n\n  /**\n   * Alignment of the content in the cell.\n   */\n  align?: TableCellAlignment;\n\n  /**\n   * Text to display when hovering over a cell. This can be useful for\n   * providing additional information about the column when the content is\n   * ellipsized to fit in the space.\n   *\n   * If set to `true`, it will use the value generated by the `cell` prop if it\n   * can be treated as a string.\n   */\n  // `any` needed for same reason as no-explicit-any higher up in this type.\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  cellDescription?: ((props: CellContext<TableData, any>) => string) | boolean | undefined;\n\n  /**\n   * When `true`, the column will be sortable.\n   * @default false\n   */\n  enableSorting?: boolean;\n\n  /**\n   * Text to display when hovering over the header text. This can be useful for\n   * providing additional information about the column when you want to keep the\n   * header text relatively short to manage the column width.\n   */\n  headerDescription?: string;\n\n  // Tanstack Table does not support an \"auto\" value to naturally size to fit\n  // the space in a table. Adding a custom setting to manage this ourselves.\n  /**\n   * Width of the column when rendered in a table. It should be a number in pixels\n   * or \"auto\" to allow the table to automatically adjust the width to fill\n   * space.\n   * @default 'auto'\n   */\n  width?: number | 'auto';\n}\n\n/**\n * Takes in a perses table column and transforms it into a tanstack column.\n */\nexport function persesColumnsToTanstackColumns<TableData>(columns: Array<TableColumnConfig<TableData>>) {\n  const tableCols: Array<ColumnDef<TableData>> = columns.map(\n    ({ width, align, headerDescription, cellDescription, enableSorting, ...otherProps }) => {\n      // Tanstack Table does not support an \"auto\" value to naturally size to fit\n      // the space in a table. We translate our custom \"auto\" setting to 0 size\n      // for these columns, so it is easy to fall back to auto when rendering.\n      // Taking from a recommendation in this github discussion:\n      // https://github.com/TanStack/table/discussions/4179#discussioncomment-3631326\n      const sizeProps =\n        width === 'auto' || width === undefined\n          ? {\n              // All zero values are used as shorthand for \"auto\" when rendering\n              // because it makes it easy to fall back. (e.g. `row.size || \"auto\"`)\n              size: 0,\n              minSize: 0,\n              maxSize: 0,\n            }\n          : {\n              size: width,\n            };\n\n      const result = {\n        ...otherProps,\n        ...sizeProps,\n\n        // Default sorting to false, so it is very explicitly set per column.\n        enableSorting: !!enableSorting,\n\n        // Open-ended store for extra metadata in TanStack Table, so you can bake\n        // in your own features.\n        meta: {\n          align,\n          headerDescription,\n          cellDescription,\n        },\n      };\n\n      return result;\n    }\n  );\n\n  return tableCols;\n}\n"],"names":["calculateTableCellHeight","lineHeight","paddingY","lineHeightNum","parseInt","verticalPaddingNum","getTableCellLayout","theme","density","isLastColumn","isFirstColumn","spacing","basePaddingX","edgePaddingX","paddingLeft","paddingRight","typography","body1","fontSize","body2","padding","height","persesColumnsToTanstackColumns","columns","tableCols","map","width","align","headerDescription","cellDescription","enableSorting","otherProps","sizeProps","undefined","size","minSize","maxSize","result","meta"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AA+HjC,SAASA,yBAAyBC,UAAuC,EAAEC,QAAgB;IACzF,6EAA6E;IAC7E,mDAAmD;IACnD,MAAMC,gBAAgB,OAAOF,eAAe,WAAWG,SAASH,YAAY,MAAMA,uBAAAA,wBAAAA,aAAc;IAChG,MAAMI,qBAAqB,OAAOH,aAAa,WAAWE,SAASF,UAAU,MAAMA;IAEnF,OAAOC,gBAAgBE,qBAAqB;AAC9C;AAWA;;;CAGC,GACD,OAAO,SAASC,mBACdC,KAAY,EACZC,OAAqB,EACrB,EAAEC,YAAY,EAAEC,aAAa,EAA0B,GAAG,CAAC,CAAC;IAE5D,mBAAmB;IACnB,IAAIR,WAAWK,MAAMI,OAAO,CAAC;IAC7B,IAAIC,eAAeL,MAAMI,OAAO,CAAC;IACjC,IAAIE,eAAeN,MAAMI,OAAO,CAAC;IACjC,IAAIG,cAAcJ,gBAAgBG,eAAeD;IACjD,IAAIG,eAAeN,eAAeI,eAAeD;IACjD,IAAIX,aAAaM,MAAMS,UAAU,CAACC,KAAK,CAAChB,UAAU;IAClD,IAAIiB,WAAWX,MAAMS,UAAU,CAACC,KAAK,CAACC,QAAQ;IAE9C,IAAIV,YAAY,WAAW;QACzBN,WAAWK,MAAMI,OAAO,CAAC;QACzBC,eAAeL,MAAMI,OAAO,CAAC;QAC7BE,eAAeN,MAAMI,OAAO,CAAC;QAC7BG,cAAcJ,gBAAgBG,eAAeD;QAC7CG,eAAeN,eAAeI,eAAeD;QAC7CX,aAAaM,MAAMS,UAAU,CAACG,KAAK,CAAClB,UAAU;QAC9CiB,WAAWX,MAAMS,UAAU,CAACG,KAAK,CAACD,QAAQ;IAC5C;IAEA,IAAIV,YAAY,eAAe;QAC7BN,WAAWK,MAAMI,OAAO,CAAC;QACzBC,eAAeL,MAAMI,OAAO,CAAC;QAC7BE,eAAeN,MAAMI,OAAO,CAAC;QAC7BG,cAAcJ,gBAAgBG,eAAeD;QAC7CG,eAAeN,eAAeI,eAAeD;QAC7CX,aAAaM,MAAMS,UAAU,CAACC,KAAK,CAAChB,UAAU;QAC9CiB,WAAWX,MAAMS,UAAU,CAACC,KAAK,CAACC,QAAQ;IAC5C;IAEA,OAAO;QACLE,SAAS,CAAC,EAAElB,SAAS,CAAC,EAAEa,aAAa,CAAC,EAAEb,SAAS,CAAC,EAAEY,YAAY,CAAC;QACjEO,QAAQrB,yBAAyBC,YAAYC;QAC7CgB,UAAUA;QACVjB,YAAYA;IACd;AACF;AAyEA;;CAEC,GACD,OAAO,SAASqB,+BAA0CC,OAA4C;IACpG,MAAMC,YAAyCD,QAAQE,GAAG,CACxD,CAAC,EAAEC,KAAK,EAAEC,KAAK,EAAEC,iBAAiB,EAAEC,eAAe,EAAEC,aAAa,EAAE,GAAGC,YAAY;QACjF,2EAA2E;QAC3E,yEAAyE;QACzE,wEAAwE;QACxE,0DAA0D;QAC1D,+EAA+E;QAC/E,MAAMC,YACJN,UAAU,UAAUA,UAAUO,YAC1B;YACE,kEAAkE;YAClE,qEAAqE;YACrEC,MAAM;YACNC,SAAS;YACTC,SAAS;QACX,IACA;YACEF,MAAMR;QACR;QAEN,MAAMW,SAAS;YACb,GAAGN,UAAU;YACb,GAAGC,SAAS;YAEZ,qEAAqE;YACrEF,eAAe,CAAC,CAACA;YAEjB,yEAAyE;YACzE,wBAAwB;YACxBQ,MAAM;gBACJX;gBACAC;gBACAC;YACF;QACF;QAEA,OAAOQ;IACT;IAGF,OAAOb;AACT"}

package/dist/ThresholdsEditor/ThresholdInput.js

@@ -14,7 +14,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
 import { Stack, FormLabel, TextField, IconButton, Box } from '@mui/material';
 import DeleteIcon from 'mdi-material-ui/DeleteOutline';
-import { ThresholdColorPicker } from './ThresholdColorPicker';
+import { OptionsColorPicker } from '../ColorPicker/OptionsColorPicker';
 export function ThresholdInput({ inputRef, label, color, value, mode, onChange, onColorChange, onBlur, onDelete }) {
     const [key, setKey] = useState(0); // use key to cause input to lose focus when pressing enter
     return /*#__PURE__*/ _jsxs(Stack, {
@@ -24,7 +24,7 @@ export function ThresholdInput({ inputRef, label, color, value, mode, onChange,
         justifyContent: "space-between",
         spacing: 1,
         children: [
-            /*#__PURE__*/ _jsx(ThresholdColorPicker, {
+            /*#__PURE__*/ _jsx(OptionsColorPicker, {
                 label: label,
                 color: color,
                 onColorChange: onColorChange

package/dist/ThresholdsEditor/ThresholdInput.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/ThresholdsEditor/ThresholdInput.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { RefObject, useState } from 'react';\nimport { Stack, FormLabel, TextField, IconButton, Box } from '@mui/material';\nimport DeleteIcon from 'mdi-material-ui/DeleteOutline';\nimport { ThresholdOptions } from '@perses-dev/core';\nimport { ThresholdColorPicker } from './ThresholdColorPicker';\n\nexport interface ThresholdInputProps {\n  label: string;\n  color: string;\n  value: number;\n  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;\n  onColorChange: (color: string) => void;\n  onBlur: () => void;\n  onDelete: () => void;\n  inputRef?: RefObject<HTMLInputElement | null>;\n  mode?: ThresholdOptions['mode'];\n}\n\nexport function ThresholdInput({\n  inputRef,\n  label,\n  color,\n  value,\n  mode,\n  onChange,\n  onColorChange,\n  onBlur,\n  onDelete,\n}: ThresholdInputProps) {\n  const [key, setKey] = useState(0); // use key to cause input to lose focus when pressing enter\n  return (\n    <Stack flex={1} direction=\"row\" alignItems=\"center\" justifyContent=\"space-between\" spacing={1}>\n      <ThresholdColorPicker label={label} color={color} onColorChange={onColorChange} />\n      <FormLabel htmlFor={label}>{label}</FormLabel>\n      <TextField\n        id={label}\n        key={key}\n        inputRef={inputRef}\n        type=\"number\"\n        value={value === 0 ? '' : value}\n        placeholder=\"0\"\n        onChange={onChange}\n        onBlur={onBlur}\n        onKeyDown={(e) => {\n          if (e.key === 'Enter') {\n            onBlur();\n            setKey(key + 1);\n          }\n        }}\n        InputProps={{\n          endAdornment: mode === 'percent' ? <Box paddingX={1}>%</Box> : undefined,\n        }}\n      />\n      <IconButton aria-label={`delete threshold ${label}`} size=\"small\" onClick={onDelete}>\n        <DeleteIcon />\n      </IconButton>\n    </Stack>\n  );\n}\n"],"names":["useState","Stack","FormLabel","TextField","IconButton","Box","DeleteIcon","ThresholdColorPicker","ThresholdInput","inputRef","label","color","value","mode","onChange","onColorChange","onBlur","onDelete","key","setKey","flex","direction","alignItems","justifyContent","spacing","htmlFor","id","type","placeholder","onKeyDown","e","InputProps","endAdornment","paddingX","undefined","aria-label","size","onClick"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAAoBA,QAAQ,QAAQ,QAAQ;AAC5C,SAASC,KAAK,EAAEC,SAAS,EAAEC,SAAS,EAAEC,UAAU,EAAEC,GAAG,QAAQ,gBAAgB;AAC7E,OAAOC,gBAAgB,gCAAgC;AAEvD,SAASC,oBAAoB,QAAQ,yBAAyB;AAc9D,OAAO,SAASC,eAAe,EAC7BC,QAAQ,EACRC,KAAK,EACLC,KAAK,EACLC,KAAK,EACLC,IAAI,EACJC,QAAQ,EACRC,aAAa,EACbC,MAAM,EACNC,QAAQ,EACY;IACpB,MAAM,CAACC,KAAKC,OAAO,GAAGnB,SAAS,IAAI,2DAA2D;IAC9F,qBACE,MAACC;QAAMmB,MAAM;QAAGC,WAAU;QAAMC,YAAW;QAASC,gBAAe;QAAgBC,SAAS;;0BAC1F,KAACjB;gBAAqBG,OAAOA;gBAAOC,OAAOA;gBAAOI,eAAeA;;0BACjE,KAACb;gBAAUuB,SAASf;0BAAQA;;0BAC5B,KAACP;gBACCuB,IAAIhB;gBAEJD,UAAUA;gBACVkB,MAAK;gBACLf,OAAOA,UAAU,IAAI,KAAKA;gBAC1BgB,aAAY;gBACZd,UAAUA;gBACVE,QAAQA;gBACRa,WAAW,CAACC;oBACV,IAAIA,EAAEZ,GAAG,KAAK,SAAS;wBACrBF;wBACAG,OAAOD,MAAM;oBACf;gBACF;gBACAa,YAAY;oBACVC,cAAcnB,SAAS,0BAAY,KAACR;wBAAI4B,UAAU;kCAAG;yBAAUC;gBACjE;eAfKhB;0BAiBP,KAACd;gBAAW+B,cAAY,CAAC,iBAAiB,EAAEzB,MAAM,CAAC;gBAAE0B,MAAK;gBAAQC,SAASpB;0BACzE,cAAA,KAACX;;;;AAIT"}
+{"version":3,"sources":["../../src/ThresholdsEditor/ThresholdInput.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { RefObject, useState } from 'react';\nimport { Stack, FormLabel, TextField, IconButton, Box } from '@mui/material';\nimport DeleteIcon from 'mdi-material-ui/DeleteOutline';\nimport { ThresholdOptions } from '@perses-dev/core';\nimport { OptionsColorPicker } from '../ColorPicker/OptionsColorPicker';\n\nexport interface ThresholdInputProps {\n  label: string;\n  color: string;\n  value: number;\n  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;\n  onColorChange: (color: string) => void;\n  onBlur: () => void;\n  onDelete: () => void;\n  inputRef?: RefObject<HTMLInputElement | null>;\n  mode?: ThresholdOptions['mode'];\n}\n\nexport function ThresholdInput({\n  inputRef,\n  label,\n  color,\n  value,\n  mode,\n  onChange,\n  onColorChange,\n  onBlur,\n  onDelete,\n}: ThresholdInputProps) {\n  const [key, setKey] = useState(0); // use key to cause input to lose focus when pressing enter\n  return (\n    <Stack flex={1} direction=\"row\" alignItems=\"center\" justifyContent=\"space-between\" spacing={1}>\n      <OptionsColorPicker label={label} color={color} onColorChange={onColorChange} />\n      <FormLabel htmlFor={label}>{label}</FormLabel>\n      <TextField\n        id={label}\n        key={key}\n        inputRef={inputRef}\n        type=\"number\"\n        value={value === 0 ? '' : value}\n        placeholder=\"0\"\n        onChange={onChange}\n        onBlur={onBlur}\n        onKeyDown={(e) => {\n          if (e.key === 'Enter') {\n            onBlur();\n            setKey(key + 1);\n          }\n        }}\n        InputProps={{\n          endAdornment: mode === 'percent' ? <Box paddingX={1}>%</Box> : undefined,\n        }}\n      />\n      <IconButton aria-label={`delete threshold ${label}`} size=\"small\" onClick={onDelete}>\n        <DeleteIcon />\n      </IconButton>\n    </Stack>\n  );\n}\n"],"names":["useState","Stack","FormLabel","TextField","IconButton","Box","DeleteIcon","OptionsColorPicker","ThresholdInput","inputRef","label","color","value","mode","onChange","onColorChange","onBlur","onDelete","key","setKey","flex","direction","alignItems","justifyContent","spacing","htmlFor","id","type","placeholder","onKeyDown","e","InputProps","endAdornment","paddingX","undefined","aria-label","size","onClick"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAAoBA,QAAQ,QAAQ,QAAQ;AAC5C,SAASC,KAAK,EAAEC,SAAS,EAAEC,SAAS,EAAEC,UAAU,EAAEC,GAAG,QAAQ,gBAAgB;AAC7E,OAAOC,gBAAgB,gCAAgC;AAEvD,SAASC,kBAAkB,QAAQ,oCAAoC;AAcvE,OAAO,SAASC,eAAe,EAC7BC,QAAQ,EACRC,KAAK,EACLC,KAAK,EACLC,KAAK,EACLC,IAAI,EACJC,QAAQ,EACRC,aAAa,EACbC,MAAM,EACNC,QAAQ,EACY;IACpB,MAAM,CAACC,KAAKC,OAAO,GAAGnB,SAAS,IAAI,2DAA2D;IAC9F,qBACE,MAACC;QAAMmB,MAAM;QAAGC,WAAU;QAAMC,YAAW;QAASC,gBAAe;QAAgBC,SAAS;;0BAC1F,KAACjB;gBAAmBG,OAAOA;gBAAOC,OAAOA;gBAAOI,eAAeA;;0BAC/D,KAACb;gBAAUuB,SAASf;0BAAQA;;0BAC5B,KAACP;gBACCuB,IAAIhB;gBAEJD,UAAUA;gBACVkB,MAAK;gBACLf,OAAOA,UAAU,IAAI,KAAKA;gBAC1BgB,aAAY;gBACZd,UAAUA;gBACVE,QAAQA;gBACRa,WAAW,CAACC;oBACV,IAAIA,EAAEZ,GAAG,KAAK,SAAS;wBACrBF;wBACAG,OAAOD,MAAM;oBACf;gBACF;gBACAa,YAAY;oBACVC,cAAcnB,SAAS,0BAAY,KAACR;wBAAI4B,UAAU;kCAAG;yBAAUC;gBACjE;eAfKhB;0BAiBP,KAACd;gBAAW+B,cAAY,CAAC,iBAAiB,EAAEzB,MAAM,CAAC;gBAAE0B,MAAK;gBAAQC,SAASpB;0BACzE,cAAA,KAACX;;;;AAIT"}

package/dist/ThresholdsEditor/ThresholdsEditor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ThresholdsEditor.d.ts","sourceRoot":"","sources":["../../src/ThresholdsEditor/ThresholdsEditor.tsx"],"names":[],"mappings":"AAkBA,OAAO,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAOpD,MAAM,WAAW,qBAAqB;IACpC,QAAQ,EAAE,CAAC,UAAU,EAAE,gBAAgB,KAAK,IAAI,CAAC;IACjD,UAAU,CAAC,EAAE,gBAAgB,CAAC;IAC9B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAID,wBAAgB,gBAAgB,CAAC,EAAE,UAAU,EAAE,QAAQ,EAAE,WAAW,EAAE,kBAAkB,EAAE,EAAE,qBAAqB,2CAgMhH"}
+{"version":3,"file":"ThresholdsEditor.d.ts","sourceRoot":"","sources":["../../src/ThresholdsEditor/ThresholdsEditor.tsx"],"names":[],"mappings":"AAkBA,OAAO,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAOpD,MAAM,WAAW,qBAAqB;IACpC,QAAQ,EAAE,CAAC,UAAU,EAAE,gBAAgB,KAAK,IAAI,CAAC;IACjD,UAAU,CAAC,EAAE,gBAAgB,CAAC;IAC9B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAID,wBAAgB,gBAAgB,CAAC,EAAE,UAAU,EAAE,QAAQ,EAAE,WAAW,EAAE,kBAAkB,EAAE,EAAE,qBAAqB,2CA4LhH"}

package/dist/ThresholdsEditor/ThresholdsEditor.js

@@ -19,7 +19,7 @@ import { Stack } from '@mui/system';
 import { useChartsTheme } from '../context/ChartsProvider';
 import { OptionsEditorControl, OptionsEditorGroup } from '../OptionsEditorLayout';
 import { InfoTooltip } from '../InfoTooltip';
-import { ThresholdColorPicker } from './ThresholdColorPicker';
+import { OptionsColorPicker } from '../ColorPicker/OptionsColorPicker';
 import { ThresholdInput } from './ThresholdInput';
 const DEFAULT_STEP = 10;
 export function ThresholdsEditor({ thresholds, onChange, hideDefault, disablePercentMode }) {
@@ -218,7 +218,7 @@ export function ThresholdsEditor({ thresholds, onChange, hideDefault, disablePer
                 alignItems: "center",
                 spacing: 1,
                 children: [
-                    /*#__PURE__*/ _jsx(ThresholdColorPicker, {
+                    /*#__PURE__*/ _jsx(OptionsColorPicker, {
                         label: "default",
                         color: defaultThresholdColor,
                         onColorChange: handleDefaultColorChange

package/dist/ThresholdsEditor/ThresholdsEditor.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/ThresholdsEditor/ThresholdsEditor.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport React, { useEffect, useRef, useState } from 'react';\nimport produce from 'immer';\nimport { IconButton, ToggleButton, ToggleButtonGroup, Typography } from '@mui/material';\nimport PlusIcon from 'mdi-material-ui/Plus';\nimport { Stack } from '@mui/system';\nimport { ThresholdOptions } from '@perses-dev/core';\nimport { useChartsTheme } from '../context/ChartsProvider';\nimport { OptionsEditorControl, OptionsEditorGroup } from '../OptionsEditorLayout';\nimport { InfoTooltip } from '../InfoTooltip';\nimport { ThresholdColorPicker } from './ThresholdColorPicker';\nimport { ThresholdInput } from './ThresholdInput';\n\nexport interface ThresholdsEditorProps {\n  onChange: (thresholds: ThresholdOptions) => void;\n  thresholds?: ThresholdOptions;\n  hideDefault?: boolean;\n  disablePercentMode?: boolean;\n}\n\nconst DEFAULT_STEP = 10;\n\nexport function ThresholdsEditor({ thresholds, onChange, hideDefault, disablePercentMode }: ThresholdsEditorProps) {\n  const chartsTheme = useChartsTheme();\n  const {\n    thresholds: { defaultColor, palette },\n  } = chartsTheme;\n  const defaultThresholdColor = thresholds?.defaultColor ?? defaultColor;\n\n  const [steps, setSteps] = useState(thresholds?.steps);\n  useEffect(() => {\n    setSteps(thresholds?.steps);\n  }, [thresholds?.steps]);\n\n  // every time a new threshold is added, we want to focus the recently added input\n  const recentlyAddedInputRef = useRef<HTMLInputElement | null>(null);\n  const focusRef = useRef(false);\n  useEffect(() => {\n    if (!recentlyAddedInputRef.current || !focusRef.current) return;\n    recentlyAddedInputRef.current?.focus();\n    focusRef.current = false;\n  }, [steps?.length]);\n\n  const handleThresholdValueChange = (e: React.ChangeEvent<HTMLInputElement>, i: number) => {\n    setSteps(\n      produce(steps, (draft) => {\n        const step = draft?.[i];\n        if (step) {\n          step.value = Number(e.target.value);\n        }\n      })\n    );\n  };\n\n  const handleThresholdColorChange = (color: string, i: number) => {\n    if (thresholds !== undefined) {\n      onChange(\n        produce(thresholds, (draft) => {\n          if (draft.steps !== undefined) {\n            const step = draft.steps[i];\n            if (step) {\n              step.color = color;\n            }\n          }\n        })\n      );\n    }\n  };\n\n  const handleDefaultColorChange = (color: string) => {\n    if (thresholds !== undefined) {\n      onChange(\n        produce(thresholds, (draft) => {\n          draft.defaultColor = color;\n        })\n      );\n    } else {\n      onChange({\n        defaultColor: color,\n      });\n    }\n  };\n\n  // sort thresholds in ascending order every time an input blurs\n  const handleThresholdBlur = () => {\n    if (steps !== undefined) {\n      const sortedSteps = [...steps];\n      sortedSteps.sort((a, b) => a.value - b.value);\n      if (thresholds !== undefined) {\n        onChange(\n          produce(thresholds, (draft) => {\n            draft.steps = sortedSteps;\n          })\n        );\n      }\n    }\n  };\n\n  const deleteThreshold = (i: number): void => {\n    if (thresholds !== undefined) {\n      const updatedThresholds = produce(thresholds, (draft) => {\n        if (draft.steps) {\n          draft.steps.splice(i, 1);\n        }\n      });\n      onChange(updatedThresholds);\n    }\n  };\n\n  const addThresholdInput = (): void => {\n    focusRef.current = true;\n    if (thresholds === undefined) {\n      onChange({\n        steps: [{ value: DEFAULT_STEP }],\n      });\n    } else if (thresholds && thresholds.steps === undefined) {\n      onChange(\n        produce(thresholds, (draft) => {\n          draft.steps = [{ value: DEFAULT_STEP }];\n        })\n      );\n    } else {\n      onChange(\n        produce(thresholds, (draft) => {\n          const steps = draft.steps;\n          if (steps?.length) {\n            const lastStep = steps[steps.length - 1];\n            const color = palette[steps.length] ?? getRandomColor(); // we will assign color from the palette first, then generate random color\n            steps.push({ color, value: (lastStep?.value ?? 0) + DEFAULT_STEP }); // set new threshold value to last step value + 10\n          } else if (steps) {\n            steps.push({ value: DEFAULT_STEP });\n          }\n        })\n      );\n    }\n  };\n\n  const handleModeChange = (event: React.MouseEvent, value: string): void => {\n    const mode = value === 'percent' ? 'percent' : undefined;\n    if (thresholds !== undefined) {\n      onChange(\n        produce(thresholds, (draft) => {\n          draft.mode = mode;\n        })\n      );\n    } else {\n      onChange({ mode });\n    }\n  };\n\n  return (\n    <OptionsEditorGroup\n      title=\"Thresholds\"\n      icon={\n        <InfoTooltip description=\"Add threshold\">\n          <IconButton size=\"small\" aria-label=\"add threshold\" onClick={addThresholdInput}>\n            <PlusIcon />\n          </IconButton>\n        </InfoTooltip>\n      }\n    >\n      <OptionsEditorControl\n        label=\"Mode\"\n        description=\"Percentage means thresholds relative to min & max\"\n        control={\n          <ToggleButtonGroup\n            exclusive\n            disabled={disablePercentMode}\n            value={thresholds?.mode ?? 'absolute'}\n            onChange={handleModeChange}\n            sx={{ height: '36px', marginLeft: 'auto' }}\n          >\n            <ToggleButton aria-label=\"absolute\" value=\"absolute\" sx={{ fontWeight: 500 }}>\n              Absolute\n            </ToggleButton>\n            <ToggleButton aria-label=\"percent\" value=\"percent\" sx={{ fontWeight: 500 }}>\n              Percent\n            </ToggleButton>\n          </ToggleButtonGroup>\n        }\n      />\n      {steps &&\n        steps\n          .map((step, i) => (\n            <ThresholdInput\n              inputRef={i === steps.length - 1 ? recentlyAddedInputRef : undefined}\n              key={i}\n              label={`T${i + 1}`}\n              color={step.color ?? palette[i] ?? defaultThresholdColor}\n              value={step.value}\n              mode={thresholds?.mode}\n              onColorChange={(color) => handleThresholdColorChange(color, i)}\n              onChange={(e) => {\n                handleThresholdValueChange(e, i);\n              }}\n              onDelete={() => {\n                deleteThreshold(i);\n              }}\n              onBlur={handleThresholdBlur}\n            />\n          ))\n          .reverse()}\n      {!hideDefault && (\n        <Stack flex={1} direction=\"row\" alignItems=\"center\" spacing={1}>\n          <ThresholdColorPicker\n            label=\"default\"\n            color={defaultThresholdColor}\n            onColorChange={handleDefaultColorChange}\n          />\n          <Typography>Default</Typography>\n        </Stack>\n      )}\n    </OptionsEditorGroup>\n  );\n}\n\n// https://www.paulirish.com/2009/random-hex-color-code-snippets/\nconst getRandomColor = () => {\n  return (\n    '#' +\n    Math.floor(Math.random() * 16777216)\n      .toString(16)\n      .padStart(6, '0')\n  );\n};\n"],"names":["React","useEffect","useRef","useState","produce","IconButton","ToggleButton","ToggleButtonGroup","Typography","PlusIcon","Stack","useChartsTheme","OptionsEditorControl","OptionsEditorGroup","InfoTooltip","ThresholdColorPicker","ThresholdInput","DEFAULT_STEP","ThresholdsEditor","thresholds","onChange","hideDefault","disablePercentMode","chartsTheme","defaultColor","palette","defaultThresholdColor","steps","setSteps","recentlyAddedInputRef","focusRef","current","focus","length","handleThresholdValueChange","e","i","draft","step","value","Number","target","handleThresholdColorChange","color","undefined","handleDefaultColorChange","handleThresholdBlur","sortedSteps","sort","a","b","deleteThreshold","updatedThresholds","splice","addThresholdInput","lastStep","getRandomColor","push","handleModeChange","event","mode","title","icon","description","size","aria-label","onClick","label","control","exclusive","disabled","sx","height","marginLeft","fontWeight","map","inputRef","onColorChange","onDelete","onBlur","reverse","flex","direction","alignItems","spacing","Math","floor","random","toString","padStart"],"mappings":"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"}
+{"version":3,"sources":["../../src/ThresholdsEditor/ThresholdsEditor.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport React, { useEffect, useRef, useState } from 'react';\nimport produce from 'immer';\nimport { IconButton, ToggleButton, ToggleButtonGroup, Typography } from '@mui/material';\nimport PlusIcon from 'mdi-material-ui/Plus';\nimport { Stack } from '@mui/system';\nimport { ThresholdOptions } from '@perses-dev/core';\nimport { useChartsTheme } from '../context/ChartsProvider';\nimport { OptionsEditorControl, OptionsEditorGroup } from '../OptionsEditorLayout';\nimport { InfoTooltip } from '../InfoTooltip';\nimport { OptionsColorPicker } from '../ColorPicker/OptionsColorPicker';\nimport { ThresholdInput } from './ThresholdInput';\n\nexport interface ThresholdsEditorProps {\n  onChange: (thresholds: ThresholdOptions) => void;\n  thresholds?: ThresholdOptions;\n  hideDefault?: boolean;\n  disablePercentMode?: boolean;\n}\n\nconst DEFAULT_STEP = 10;\n\nexport function ThresholdsEditor({ thresholds, onChange, hideDefault, disablePercentMode }: ThresholdsEditorProps) {\n  const chartsTheme = useChartsTheme();\n  const {\n    thresholds: { defaultColor, palette },\n  } = chartsTheme;\n  const defaultThresholdColor = thresholds?.defaultColor ?? defaultColor;\n\n  const [steps, setSteps] = useState(thresholds?.steps);\n  useEffect(() => {\n    setSteps(thresholds?.steps);\n  }, [thresholds?.steps]);\n\n  // every time a new threshold is added, we want to focus the recently added input\n  const recentlyAddedInputRef = useRef<HTMLInputElement | null>(null);\n  const focusRef = useRef(false);\n  useEffect(() => {\n    if (!recentlyAddedInputRef.current || !focusRef.current) return;\n    recentlyAddedInputRef.current?.focus();\n    focusRef.current = false;\n  }, [steps?.length]);\n\n  const handleThresholdValueChange = (e: React.ChangeEvent<HTMLInputElement>, i: number) => {\n    setSteps(\n      produce(steps, (draft) => {\n        const step = draft?.[i];\n        if (step) {\n          step.value = Number(e.target.value);\n        }\n      })\n    );\n  };\n\n  const handleThresholdColorChange = (color: string, i: number) => {\n    if (thresholds !== undefined) {\n      onChange(\n        produce(thresholds, (draft) => {\n          if (draft.steps !== undefined) {\n            const step = draft.steps[i];\n            if (step) {\n              step.color = color;\n            }\n          }\n        })\n      );\n    }\n  };\n\n  const handleDefaultColorChange = (color: string) => {\n    if (thresholds !== undefined) {\n      onChange(\n        produce(thresholds, (draft) => {\n          draft.defaultColor = color;\n        })\n      );\n    } else {\n      onChange({\n        defaultColor: color,\n      });\n    }\n  };\n\n  // sort thresholds in ascending order every time an input blurs\n  const handleThresholdBlur = () => {\n    if (steps !== undefined) {\n      const sortedSteps = [...steps];\n      sortedSteps.sort((a, b) => a.value - b.value);\n      if (thresholds !== undefined) {\n        onChange(\n          produce(thresholds, (draft) => {\n            draft.steps = sortedSteps;\n          })\n        );\n      }\n    }\n  };\n\n  const deleteThreshold = (i: number): void => {\n    if (thresholds !== undefined) {\n      const updatedThresholds = produce(thresholds, (draft) => {\n        if (draft.steps) {\n          draft.steps.splice(i, 1);\n        }\n      });\n      onChange(updatedThresholds);\n    }\n  };\n\n  const addThresholdInput = (): void => {\n    focusRef.current = true;\n    if (thresholds === undefined) {\n      onChange({\n        steps: [{ value: DEFAULT_STEP }],\n      });\n    } else if (thresholds && thresholds.steps === undefined) {\n      onChange(\n        produce(thresholds, (draft) => {\n          draft.steps = [{ value: DEFAULT_STEP }];\n        })\n      );\n    } else {\n      onChange(\n        produce(thresholds, (draft) => {\n          const steps = draft.steps;\n          if (steps?.length) {\n            const lastStep = steps[steps.length - 1];\n            const color = palette[steps.length] ?? getRandomColor(); // we will assign color from the palette first, then generate random color\n            steps.push({ color, value: (lastStep?.value ?? 0) + DEFAULT_STEP }); // set new threshold value to last step value + 10\n          } else if (steps) {\n            steps.push({ value: DEFAULT_STEP });\n          }\n        })\n      );\n    }\n  };\n\n  const handleModeChange = (event: React.MouseEvent, value: string): void => {\n    const mode = value === 'percent' ? 'percent' : undefined;\n    if (thresholds !== undefined) {\n      onChange(\n        produce(thresholds, (draft) => {\n          draft.mode = mode;\n        })\n      );\n    } else {\n      onChange({ mode });\n    }\n  };\n\n  return (\n    <OptionsEditorGroup\n      title=\"Thresholds\"\n      icon={\n        <InfoTooltip description=\"Add threshold\">\n          <IconButton size=\"small\" aria-label=\"add threshold\" onClick={addThresholdInput}>\n            <PlusIcon />\n          </IconButton>\n        </InfoTooltip>\n      }\n    >\n      <OptionsEditorControl\n        label=\"Mode\"\n        description=\"Percentage means thresholds relative to min & max\"\n        control={\n          <ToggleButtonGroup\n            exclusive\n            disabled={disablePercentMode}\n            value={thresholds?.mode ?? 'absolute'}\n            onChange={handleModeChange}\n            sx={{ height: '36px', marginLeft: 'auto' }}\n          >\n            <ToggleButton aria-label=\"absolute\" value=\"absolute\" sx={{ fontWeight: 500 }}>\n              Absolute\n            </ToggleButton>\n            <ToggleButton aria-label=\"percent\" value=\"percent\" sx={{ fontWeight: 500 }}>\n              Percent\n            </ToggleButton>\n          </ToggleButtonGroup>\n        }\n      />\n      {steps &&\n        steps\n          .map((step, i) => (\n            <ThresholdInput\n              inputRef={i === steps.length - 1 ? recentlyAddedInputRef : undefined}\n              key={i}\n              label={`T${i + 1}`}\n              color={step.color ?? palette[i] ?? defaultThresholdColor}\n              value={step.value}\n              mode={thresholds?.mode}\n              onColorChange={(color) => handleThresholdColorChange(color, i)}\n              onChange={(e) => {\n                handleThresholdValueChange(e, i);\n              }}\n              onDelete={() => {\n                deleteThreshold(i);\n              }}\n              onBlur={handleThresholdBlur}\n            />\n          ))\n          .reverse()}\n      {!hideDefault && (\n        <Stack flex={1} direction=\"row\" alignItems=\"center\" spacing={1}>\n          <OptionsColorPicker label=\"default\" color={defaultThresholdColor} onColorChange={handleDefaultColorChange} />\n          <Typography>Default</Typography>\n        </Stack>\n      )}\n    </OptionsEditorGroup>\n  );\n}\n\n// https://www.paulirish.com/2009/random-hex-color-code-snippets/\nconst getRandomColor = () => {\n  return (\n    '#' +\n    Math.floor(Math.random() * 16777216)\n      .toString(16)\n      .padStart(6, '0')\n  );\n};\n"],"names":["React","useEffect","useRef","useState","produce","IconButton","ToggleButton","ToggleButtonGroup","Typography","PlusIcon","Stack","useChartsTheme","OptionsEditorControl","OptionsEditorGroup","InfoTooltip","OptionsColorPicker","ThresholdInput","DEFAULT_STEP","ThresholdsEditor","thresholds","onChange","hideDefault","disablePercentMode","chartsTheme","defaultColor","palette","defaultThresholdColor","steps","setSteps","recentlyAddedInputRef","focusRef","current","focus","length","handleThresholdValueChange","e","i","draft","step","value","Number","target","handleThresholdColorChange","color","undefined","handleDefaultColorChange","handleThresholdBlur","sortedSteps","sort","a","b","deleteThreshold","updatedThresholds","splice","addThresholdInput","lastStep","getRandomColor","push","handleModeChange","event","mode","title","icon","description","size","aria-label","onClick","label","control","exclusive","disabled","sx","height","marginLeft","fontWeight","map","inputRef","onColorChange","onDelete","onBlur","reverse","flex","direction","alignItems","spacing","Math","floor","random","toString","padStart"],"mappings":"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"}