@perses-dev/components 0.0.0-snapshot-scatterplot-fix-imports-95e1b59 → 0.0.0-snapshot-histogram-types-78c5104

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

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

package/dist/DensitySelector/DensitySelector.d.ts

@@ -0,0 +1,8 @@
+import { ReactElement } from 'react';
+export type DensityOption = 'compact' | 'standard' | 'comfortable';
+export interface DensitySelectorProps {
+    onChange: (density: DensityOption) => void;
+    value?: DensityOption;
+}
+export declare function DensitySelector({ onChange, value }: DensitySelectorProps): ReactElement;
+//# sourceMappingURL=DensitySelector.d.ts.map

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

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

package/dist/DensitySelector/DensitySelector.js

@@ -0,0 +1,46 @@
+// 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 } from "react/jsx-runtime";
+import { OptionsEditorControl } from '../OptionsEditorLayout';
+import { SettingsAutocomplete } from '../SettingsAutocomplete';
+const DENSITY_OPTIONS = [
+    {
+        id: 'compact',
+        label: 'Compact'
+    },
+    {
+        id: 'standard',
+        label: 'Standard'
+    },
+    {
+        id: 'comfortable',
+        label: 'Comfortable'
+    }
+];
+export function DensitySelector({ onChange, value = 'standard' }) {
+    const handleSortChange = (_, { id })=>{
+        onChange(id);
+    };
+    return /*#__PURE__*/ _jsx(OptionsEditorControl, {
+        label: "Density",
+        control: /*#__PURE__*/ _jsx(SettingsAutocomplete, {
+            value: DENSITY_OPTIONS.find((o)=>o.id === value),
+            options: DENSITY_OPTIONS,
+            getOptionLabel: (o)=>o.label,
+            onChange: handleSortChange,
+            disableClearable: true
+        })
+    });
+}
+
+//# sourceMappingURL=DensitySelector.js.map

package/dist/DensitySelector/DensitySelector.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/DensitySelector/DensitySelector.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 { ReactElement } from 'react';\nimport { OptionsEditorControl } from '../OptionsEditorLayout';\nimport { SettingsAutocomplete } from '../SettingsAutocomplete';\n\nconst DENSITY_OPTIONS: Array<{ id: DensityOption; label: string }> = [\n  { id: 'compact', label: 'Compact' },\n  { id: 'standard', label: 'Standard' },\n  { id: 'comfortable', label: 'Comfortable' },\n];\n\nexport type DensityOption = 'compact' | 'standard' | 'comfortable';\n\nexport interface DensitySelectorProps {\n  onChange: (density: DensityOption) => void;\n  value?: DensityOption;\n}\n\nexport function DensitySelector({ onChange, value = 'standard' }: DensitySelectorProps): ReactElement {\n  const handleSortChange = (_: unknown, { id }: { id: DensityOption }): void => {\n    onChange(id);\n  };\n\n  return (\n    <OptionsEditorControl\n      label=\"Density\"\n      control={\n        <SettingsAutocomplete\n          value={DENSITY_OPTIONS.find((o) => o.id === value)}\n          options={DENSITY_OPTIONS}\n          getOptionLabel={(o) => o.label}\n          onChange={handleSortChange}\n          disableClearable\n        />\n      }\n    />\n  );\n}\n"],"names":["OptionsEditorControl","SettingsAutocomplete","DENSITY_OPTIONS","id","label","DensitySelector","onChange","value","handleSortChange","_","control","find","o","options","getOptionLabel","disableClearable"],"mappings":"AAAA,oCAAoC;AACpC,oEAAoE;AACpE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,wEAAwE;AACxE,qEAAqE;AACrE,6EAA6E;AAC7E,sEAAsE;AACtE,iCAAiC;;AAGjC,SAASA,oBAAoB,QAAQ,yBAAyB;AAC9D,SAASC,oBAAoB,QAAQ,0BAA0B;AAE/D,MAAMC,kBAA+D;IACnE;QAAEC,IAAI;QAAWC,OAAO;IAAU;IAClC;QAAED,IAAI;QAAYC,OAAO;IAAW;IACpC;QAAED,IAAI;QAAeC,OAAO;IAAc;CAC3C;AASD,OAAO,SAASC,gBAAgB,EAAEC,QAAQ,EAAEC,QAAQ,UAAU,EAAwB;IACpF,MAAMC,mBAAmB,CAACC,GAAY,EAAEN,EAAE,EAAyB;QACjEG,SAASH;IACX;IAEA,qBACE,KAACH;QACCI,OAAM;QACNM,uBACE,KAACT;YACCM,OAAOL,gBAAgBS,IAAI,CAAC,CAACC,IAAMA,EAAET,EAAE,KAAKI;YAC5CM,SAASX;YACTY,gBAAgB,CAACF,IAAMA,EAAER,KAAK;YAC9BE,UAAUE;YACVO,gBAAgB;;;AAK1B"}

package/dist/DensitySelector/index.d.ts

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

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

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

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

package/dist/DensitySelector/index.js.map

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

package/dist/Dialog/Dialog.d.ts

@@ -1,25 +1,20 @@
-import React from 'react';
+import { ReactElement, MouseEvent } from 'react';
 import { ButtonProps, DialogActions, DialogContentProps as MuiDialogContentProps, DialogProps, DialogTitleProps, Theme } from '@mui/material';
 export interface DialogHeaderProps extends DialogTitleProps {
     /**
      * Callback fired when close button is clicked. If undefined, close button will not appear in header.
      */
-    onClose?: (e: React.MouseEvent<HTMLElement>) => void;
+    onClose?: (e: MouseEvent<HTMLElement>) => void;
 }
 export type DialogButtonProps = Omit<ButtonProps, 'variant' | 'color' | 'type'>;
-export interface DialogContentProps extends MuiDialogContentProps {
-    /**
-     * @default 500
-     */
-    width?: number;
-}
+export type DialogContentProps = MuiDialogContentProps;
 export declare const Dialog: {
-    ({ children, ...props }: DialogProps): import("react/jsx-runtime").JSX.Element;
-    Header: ({ children, onClose, ...props }: DialogHeaderProps) => import("react/jsx-runtime").JSX.Element;
-    Form: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<Theme>, React.DetailedHTMLProps<React.FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>, {}>;
-    Content: ({ children, width, sx, ...props }: DialogContentProps) => import("react/jsx-runtime").JSX.Element;
-    PrimaryButton: ({ children, ...props }: DialogButtonProps) => import("react/jsx-runtime").JSX.Element;
-    SecondaryButton: ({ children, ...props }: DialogButtonProps) => import("react/jsx-runtime").JSX.Element;
+    ({ children, ...props }: DialogProps): ReactElement;
+    Header: ({ children, onClose, ...props }: DialogHeaderProps) => ReactElement;
+    Form: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<Theme>, import("react").DetailedHTMLProps<import("react").FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>, {}>;
+    Content: ({ children, sx, ...props }: DialogContentProps) => ReactElement;
+    PrimaryButton: ({ children, ...props }: DialogButtonProps) => ReactElement;
+    SecondaryButton: ({ children, ...props }: DialogButtonProps) => ReactElement;
     Actions: typeof DialogActions;
 };
 //# sourceMappingURL=Dialog.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../src/Dialog/Dialog.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAEL,WAAW,EAEX,aAAa,EAEb,kBAAkB,IAAI,qBAAqB,EAC3C,WAAW,EAEX,gBAAgB,EAGhB,KAAK,EACN,MAAM,eAAe,CAAC;AAIvB,MAAM,WAAW,iBAAkB,SAAQ,gBAAgB;IACzD;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;CACtD;AAED,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAAC,WAAW,EAAE,SAAS,GAAG,OAAO,GAAG,MAAM,CAAC,CAAC;AAEhF,MAAM,WAAW,kBAAmB,SAAQ,qBAAqB;IAC/D;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAqDD,eAAO,MAAM,MAAM;6BAA4B,WAAW;8CAnDT,iBAAiB;;iDAaR,kBAAkB;4CAM7B,iBAAiB;8CAMf,iBAAiB;;CA0ByC,CAAC"}
+{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../src/Dialog/Dialog.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AACjD,OAAO,EAEL,WAAW,EAEX,aAAa,EAEb,kBAAkB,IAAI,qBAAqB,EAC3C,WAAW,EAEX,gBAAgB,EAGhB,KAAK,EACN,MAAM,eAAe,CAAC;AAIvB,MAAM,WAAW,iBAAkB,SAAQ,gBAAgB;IACzD;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;CAChD;AAED,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAAC,WAAW,EAAE,SAAS,GAAG,OAAO,GAAG,MAAM,CAAC,CAAC;AAEhF,MAAM,MAAM,kBAAkB,GAAG,qBAAqB,CAAC;AAuDvD,eAAO,MAAM,MAAM;6BAA4B,WAAW,GAAG,YAAY;8CArDxB,iBAAiB,KAAG,YAAY;;0CAepC,kBAAkB,KAAG,YAAY;4CAM/B,iBAAiB,KAAG,YAAY;8CAM9B,iBAAiB,KAAG,YAAY;;CA4BhF,CAAC"}

package/dist/Dialog/Dialog.js

@@ -11,7 +11,6 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import React from 'react';
 import { Button, Dialog as MuiDialog, DialogActions, DialogContent, DialogTitle, IconButton, styled } from '@mui/material';
 import CloseIcon from 'mdi-material-ui/Close';
 import { combineSx } from '../utils';
@@ -19,6 +18,10 @@ const Header = ({ children, onClose, ...props })=>{
     return /*#__PURE__*/ _jsxs(_Fragment, {
         children: [
             /*#__PURE__*/ _jsx(DialogTitle, {
+                style: {
+                    textOverflow: 'ellipsis',
+                    overflow: 'hidden'
+                },
                 ...props,
                 children: children
             }),
@@ -31,11 +34,12 @@ const Header = ({ children, onClose, ...props })=>{
         ]
     });
 };
-const Content = ({ children, width = 500, sx, ...props })=>/*#__PURE__*/ _jsx(DialogContent, {
+const Content = ({ children, sx, ...props })=>/*#__PURE__*/ _jsx(DialogContent, {
         dividers: true,
         ...props,
         sx: combineSx({
-            width: `${width}px`
+            minWidth: `500px`,
+            textWrap: 'balance'
         }, sx),
         children: children
     });

package/dist/Dialog/Dialog.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Dialog/Dialog.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport React from 'react';\nimport {\n  Button,\n  ButtonProps,\n  Dialog as MuiDialog,\n  DialogActions,\n  DialogContent,\n  DialogContentProps as MuiDialogContentProps,\n  DialogProps,\n  DialogTitle,\n  DialogTitleProps,\n  IconButton,\n  styled,\n  Theme,\n} from '@mui/material';\nimport CloseIcon from 'mdi-material-ui/Close';\nimport { combineSx } from '../utils';\n\nexport interface DialogHeaderProps extends DialogTitleProps {\n  /**\n   * Callback fired when close button is clicked. If undefined, close button will not appear in header.\n   */\n  onClose?: (e: React.MouseEvent<HTMLElement>) => void;\n}\n\nexport type DialogButtonProps = Omit<ButtonProps, 'variant' | 'color' | 'type'>;\n\nexport interface DialogContentProps extends MuiDialogContentProps {\n  /**\n   * @default 500\n   */\n  width?: number;\n}\n\nconst Header = ({ children, onClose, ...props }: DialogHeaderProps) => {\n  return (\n    <>\n      <DialogTitle {...props}>{children}</DialogTitle>\n      {onClose && (\n        <IconButton aria-label=\"Close\" onClick={onClose} sx={dialogCloseIconButtonStyle}>\n          <CloseIcon />\n        </IconButton>\n      )}\n    </>\n  );\n};\n\nconst Content = ({ children, width = 500, sx, ...props }: DialogContentProps) => (\n  <DialogContent dividers {...props} sx={combineSx({ width: `${width}px` }, sx)}>\n    {children}\n  </DialogContent>\n);\n\nconst PrimaryButton = ({ children, ...props }: DialogButtonProps) => (\n  <Button variant=\"contained\" type=\"submit\" {...props}>\n    {children}\n  </Button>\n);\n\nconst SecondaryButton = ({ children, ...props }: DialogButtonProps) => (\n  <Button variant=\"outlined\" color=\"secondary\" {...props}>\n    {children}\n  </Button>\n);\n\n/*\n * Material-ui has a prop \"scroll=paper\" that is specifically for dialog header and actions to be sticky and body to scroll,\n * but that doesn't work when dialog content is wrapped in form.\n * https://github.com/mui-org/material-ui/issues/13253\n * This component adds style to get expected behavior & should be used whenever we have a Form inside a Dialog\n */\nconst Form = styled('form')({\n  overflowY: 'auto',\n  display: 'flex',\n  flexDirection: 'column',\n});\n\n/**\n * Render the CSS of the dialog's close button, according to the given material theme.\n * @param theme material theme\n */\nconst dialogCloseIconButtonStyle = (theme: Theme) => {\n  return { position: 'absolute', top: theme.spacing(0.5), right: theme.spacing(0.5) };\n};\n\nexport const Dialog = ({ children, ...props }: DialogProps) => <MuiDialog {...props}>{children}</MuiDialog>;\n\nDialog.Header = Header;\nDialog.Form = Form;\nDialog.Content = Content;\nDialog.PrimaryButton = PrimaryButton;\nDialog.SecondaryButton = SecondaryButton;\nDialog.Actions = DialogActions;\n"],"names":["React","Button","Dialog","MuiDialog","DialogActions","DialogContent","DialogTitle","IconButton","styled","CloseIcon","combineSx","Header","children","onClose","props","aria-label","onClick","sx","dialogCloseIconButtonStyle","Content","width","dividers","PrimaryButton","variant","type","SecondaryButton","color","Form","overflowY","display","flexDirection","theme","position","top","spacing","right","Actions"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,OAAOA,WAAW,QAAQ;AAC1B,SACEC,MAAM,EAENC,UAAUC,SAAS,EACnBC,aAAa,EACbC,aAAa,EAGbC,WAAW,EAEXC,UAAU,EACVC,MAAM,QAED,gBAAgB;AACvB,OAAOC,eAAe,wBAAwB;AAC9C,SAASC,SAAS,QAAQ,WAAW;AAkBrC,MAAMC,SAAS,CAAC,EAAEC,QAAQ,EAAEC,OAAO,EAAE,GAAGC,OAA0B;IAChE,qBACE;;0BACE,KAACR;gBAAa,GAAGQ,KAAK;0BAAGF;;YACxBC,yBACC,KAACN;gBAAWQ,cAAW;gBAAQC,SAASH;gBAASI,IAAIC;0BACnD,cAAA,KAACT;;;;AAKX;AAEA,MAAMU,UAAU,CAAC,EAAEP,QAAQ,EAAEQ,QAAQ,GAAG,EAAEH,EAAE,EAAE,GAAGH,OAA2B,iBAC1E,KAACT;QAAcgB,QAAQ;QAAE,GAAGP,KAAK;QAAEG,IAAIP,UAAU;YAAEU,OAAO,CAAC,EAAEA,MAAM,EAAE,CAAC;QAAC,GAAGH;kBACvEL;;AAIL,MAAMU,gBAAgB,CAAC,EAAEV,QAAQ,EAAE,GAAGE,OAA0B,iBAC9D,KAACb;QAAOsB,SAAQ;QAAYC,MAAK;QAAU,GAAGV,KAAK;kBAChDF;;AAIL,MAAMa,kBAAkB,CAAC,EAAEb,QAAQ,EAAE,GAAGE,OAA0B,iBAChE,KAACb;QAAOsB,SAAQ;QAAWG,OAAM;QAAa,GAAGZ,KAAK;kBACnDF;;AAIL;;;;;CAKC,GACD,MAAMe,OAAOnB,OAAO,QAAQ;IAC1BoB,WAAW;IACXC,SAAS;IACTC,eAAe;AACjB;AAEA;;;CAGC,GACD,MAAMZ,6BAA6B,CAACa;IAClC,OAAO;QAAEC,UAAU;QAAYC,KAAKF,MAAMG,OAAO,CAAC;QAAMC,OAAOJ,MAAMG,OAAO,CAAC;IAAK;AACpF;AAEA,OAAO,MAAMhC,SAAS,CAAC,EAAEU,QAAQ,EAAE,GAAGE,OAAoB,iBAAK,KAACX;QAAW,GAAGW,KAAK;kBAAGF;OAAsB;AAE5GV,OAAOS,MAAM,GAAGA;AAChBT,OAAOyB,IAAI,GAAGA;AACdzB,OAAOiB,OAAO,GAAGA;AACjBjB,OAAOoB,aAAa,GAAGA;AACvBpB,OAAOuB,eAAe,GAAGA;AACzBvB,OAAOkC,OAAO,GAAGhC"}
+{"version":3,"sources":["../../src/Dialog/Dialog.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { ReactElement, MouseEvent } from 'react';\nimport {\n  Button,\n  ButtonProps,\n  Dialog as MuiDialog,\n  DialogActions,\n  DialogContent,\n  DialogContentProps as MuiDialogContentProps,\n  DialogProps,\n  DialogTitle,\n  DialogTitleProps,\n  IconButton,\n  styled,\n  Theme,\n} from '@mui/material';\nimport CloseIcon from 'mdi-material-ui/Close';\nimport { combineSx } from '../utils';\n\nexport interface DialogHeaderProps extends DialogTitleProps {\n  /**\n   * Callback fired when close button is clicked. If undefined, close button will not appear in header.\n   */\n  onClose?: (e: MouseEvent<HTMLElement>) => void;\n}\n\nexport type DialogButtonProps = Omit<ButtonProps, 'variant' | 'color' | 'type'>;\n\nexport type DialogContentProps = MuiDialogContentProps;\n\nconst Header = ({ children, onClose, ...props }: DialogHeaderProps): ReactElement => {\n  return (\n    <>\n      <DialogTitle style={{ textOverflow: 'ellipsis', overflow: 'hidden' }} {...props}>\n        {children}\n      </DialogTitle>\n      {onClose && (\n        <IconButton aria-label=\"Close\" onClick={onClose} sx={dialogCloseIconButtonStyle}>\n          <CloseIcon />\n        </IconButton>\n      )}\n    </>\n  );\n};\n\nconst Content = ({ children, sx, ...props }: DialogContentProps): ReactElement => (\n  <DialogContent dividers {...props} sx={combineSx({ minWidth: `500px`, textWrap: 'balance' }, sx)}>\n    {children}\n  </DialogContent>\n);\n\nconst PrimaryButton = ({ children, ...props }: DialogButtonProps): ReactElement => (\n  <Button variant=\"contained\" type=\"submit\" {...props}>\n    {children}\n  </Button>\n);\n\nconst SecondaryButton = ({ children, ...props }: DialogButtonProps): ReactElement => (\n  <Button variant=\"outlined\" color=\"secondary\" {...props}>\n    {children}\n  </Button>\n);\n\n/*\n * Material-ui has a prop \"scroll=paper\" that is specifically for dialog header and actions to be sticky and body to scroll,\n * but that doesn't work when dialog content is wrapped in form.\n * https://github.com/mui-org/material-ui/issues/13253\n * This component adds style to get expected behavior & should be used whenever we have a Form inside a Dialog\n */\nconst Form = styled('form')({\n  overflowY: 'auto',\n  display: 'flex',\n  flexDirection: 'column',\n});\n\n/**\n * Render the CSS of the dialog's close button, according to the given material theme.\n * @param theme material theme\n */\nconst dialogCloseIconButtonStyle = (theme: Theme): Record<string, unknown> => {\n  return { position: 'absolute', top: theme.spacing(0.5), right: theme.spacing(0.5) };\n};\n\nexport const Dialog = ({ children, ...props }: DialogProps): ReactElement => (\n  <MuiDialog {...props}>{children}</MuiDialog>\n);\n\nDialog.Header = Header;\nDialog.Form = Form;\nDialog.Content = Content;\nDialog.PrimaryButton = PrimaryButton;\nDialog.SecondaryButton = SecondaryButton;\nDialog.Actions = DialogActions;\n"],"names":["Button","Dialog","MuiDialog","DialogActions","DialogContent","DialogTitle","IconButton","styled","CloseIcon","combineSx","Header","children","onClose","props","style","textOverflow","overflow","aria-label","onClick","sx","dialogCloseIconButtonStyle","Content","dividers","minWidth","textWrap","PrimaryButton","variant","type","SecondaryButton","color","Form","overflowY","display","flexDirection","theme","position","top","spacing","right","Actions"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAGjC,SACEA,MAAM,EAENC,UAAUC,SAAS,EACnBC,aAAa,EACbC,aAAa,EAGbC,WAAW,EAEXC,UAAU,EACVC,MAAM,QAED,gBAAgB;AACvB,OAAOC,eAAe,wBAAwB;AAC9C,SAASC,SAAS,QAAQ,WAAW;AAarC,MAAMC,SAAS,CAAC,EAAEC,QAAQ,EAAEC,OAAO,EAAE,GAAGC,OAA0B;IAChE,qBACE;;0BACE,KAACR;gBAAYS,OAAO;oBAAEC,cAAc;oBAAYC,UAAU;gBAAS;gBAAI,GAAGH,KAAK;0BAC5EF;;YAEFC,yBACC,KAACN;gBAAWW,cAAW;gBAAQC,SAASN;gBAASO,IAAIC;0BACnD,cAAA,KAACZ;;;;AAKX;AAEA,MAAMa,UAAU,CAAC,EAAEV,QAAQ,EAAEQ,EAAE,EAAE,GAAGN,OAA2B,iBAC7D,KAACT;QAAckB,QAAQ;QAAE,GAAGT,KAAK;QAAEM,IAAIV,UAAU;YAAEc,UAAU,CAAC,KAAK,CAAC;YAAEC,UAAU;QAAU,GAAGL;kBAC1FR;;AAIL,MAAMc,gBAAgB,CAAC,EAAEd,QAAQ,EAAE,GAAGE,OAA0B,iBAC9D,KAACb;QAAO0B,SAAQ;QAAYC,MAAK;QAAU,GAAGd,KAAK;kBAChDF;;AAIL,MAAMiB,kBAAkB,CAAC,EAAEjB,QAAQ,EAAE,GAAGE,OAA0B,iBAChE,KAACb;QAAO0B,SAAQ;QAAWG,OAAM;QAAa,GAAGhB,KAAK;kBACnDF;;AAIL;;;;;CAKC,GACD,MAAMmB,OAAOvB,OAAO,QAAQ;IAC1BwB,WAAW;IACXC,SAAS;IACTC,eAAe;AACjB;AAEA;;;CAGC,GACD,MAAMb,6BAA6B,CAACc;IAClC,OAAO;QAAEC,UAAU;QAAYC,KAAKF,MAAMG,OAAO,CAAC;QAAMC,OAAOJ,MAAMG,OAAO,CAAC;IAAK;AACpF;AAEA,OAAO,MAAMpC,SAAS,CAAC,EAAEU,QAAQ,EAAE,GAAGE,OAAoB,iBACxD,KAACX;QAAW,GAAGW,KAAK;kBAAGF;OACvB;AAEFV,OAAOS,MAAM,GAAGA;AAChBT,OAAO6B,IAAI,GAAGA;AACd7B,OAAOoB,OAAO,GAAGA;AACjBpB,OAAOwB,aAAa,GAAGA;AACvBxB,OAAO2B,eAAe,GAAGA;AACzB3B,OAAOsC,OAAO,GAAGpC"}

package/dist/Dialog/DiscardChangesConfirmationDialog.d.ts

@@ -1,9 +1,10 @@
+import { ReactElement } from 'react';
 interface DiscardChangesConfirmationDialogProps {
     description: string;
     isOpen: boolean;
     onCancel: () => void;
     onDiscardChanges: () => void;
 }
-export declare const DiscardChangesConfirmationDialog: (props: DiscardChangesConfirmationDialogProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DiscardChangesConfirmationDialog: (props: DiscardChangesConfirmationDialogProps) => ReactElement;
 export {};
 //# sourceMappingURL=DiscardChangesConfirmationDialog.d.ts.map

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

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

package/dist/Dialog/DiscardChangesConfirmationDialog.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Dialog/DiscardChangesConfirmationDialog.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 { Button } from '@mui/material';\nimport { Dialog } from './Dialog';\n\ninterface DiscardChangesConfirmationDialogProps {\n  description: string;\n  isOpen: boolean;\n  onCancel: () => void;\n  onDiscardChanges: () => void;\n}\n\nexport const DiscardChangesConfirmationDialog = (props: DiscardChangesConfirmationDialogProps) => {\n  const { description, isOpen, onCancel, onDiscardChanges } = props;\n\n  return (\n    <Dialog open={isOpen} aria-labelledby=\"discard-dialog\">\n      <Dialog.Header>Discard Changes</Dialog.Header>\n      <Dialog.Content>{description}</Dialog.Content>\n      <Dialog.Actions>\n        <Button variant=\"contained\" onClick={onDiscardChanges}>\n          Discard Changes\n        </Button>\n        <Button variant=\"outlined\" color=\"secondary\" onClick={onCancel}>\n          Cancel\n        </Button>\n      </Dialog.Actions>\n    </Dialog>\n  );\n};\n"],"names":["Button","Dialog","DiscardChangesConfirmationDialog","props","description","isOpen","onCancel","onDiscardChanges","open","aria-labelledby","Header","Content","Actions","variant","onClick","color"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAASA,MAAM,QAAQ,gBAAgB;AACvC,SAASC,MAAM,QAAQ,WAAW;AASlC,OAAO,MAAMC,mCAAmC,CAACC;IAC/C,MAAM,EAAEC,WAAW,EAAEC,MAAM,EAAEC,QAAQ,EAAEC,gBAAgB,EAAE,GAAGJ;IAE5D,qBACE,MAACF;QAAOO,MAAMH;QAAQI,mBAAgB;;0BACpC,KAACR,OAAOS,MAAM;0BAAC;;0BACf,KAACT,OAAOU,OAAO;0BAAEP;;0BACjB,MAACH,OAAOW,OAAO;;kCACb,KAACZ;wBAAOa,SAAQ;wBAAYC,SAASP;kCAAkB;;kCAGvD,KAACP;wBAAOa,SAAQ;wBAAWE,OAAM;wBAAYD,SAASR;kCAAU;;;;;;AAMxE,EAAE"}
+{"version":3,"sources":["../../src/Dialog/DiscardChangesConfirmationDialog.tsx"],"sourcesContent":["// Copyright 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 { Button } from '@mui/material';\nimport { ReactElement } from 'react';\nimport { Dialog } from './Dialog';\n\ninterface DiscardChangesConfirmationDialogProps {\n  description: string;\n  isOpen: boolean;\n  onCancel: () => void;\n  onDiscardChanges: () => void;\n}\n\nexport const DiscardChangesConfirmationDialog = (props: DiscardChangesConfirmationDialogProps): ReactElement => {\n  const { description, isOpen, onCancel, onDiscardChanges } = props;\n\n  return (\n    <Dialog open={isOpen} aria-labelledby=\"discard-dialog\">\n      <Dialog.Header>Discard Changes</Dialog.Header>\n      <Dialog.Content>{description}</Dialog.Content>\n      <Dialog.Actions>\n        <Button variant=\"contained\" onClick={onDiscardChanges}>\n          Discard Changes\n        </Button>\n        <Button variant=\"outlined\" color=\"secondary\" onClick={onCancel}>\n          Cancel\n        </Button>\n      </Dialog.Actions>\n    </Dialog>\n  );\n};\n"],"names":["Button","Dialog","DiscardChangesConfirmationDialog","props","description","isOpen","onCancel","onDiscardChanges","open","aria-labelledby","Header","Content","Actions","variant","onClick","color"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAASA,MAAM,QAAQ,gBAAgB;AAEvC,SAASC,MAAM,QAAQ,WAAW;AASlC,OAAO,MAAMC,mCAAmC,CAACC;IAC/C,MAAM,EAAEC,WAAW,EAAEC,MAAM,EAAEC,QAAQ,EAAEC,gBAAgB,EAAE,GAAGJ;IAE5D,qBACE,MAACF;QAAOO,MAAMH;QAAQI,mBAAgB;;0BACpC,KAACR,OAAOS,MAAM;0BAAC;;0BACf,KAACT,OAAOU,OAAO;0BAAEP;;0BACjB,MAACH,OAAOW,OAAO;;kCACb,KAACZ;wBAAOa,SAAQ;wBAAYC,SAASP;kCAAkB;;kCAGvD,KAACP;wBAAOa,SAAQ;wBAAWE,OAAM;wBAAYD,SAASR;kCAAU;;;;;;AAMxE,EAAE"}

package/dist/DragAndDrop/DragAndDropList.d.ts

@@ -0,0 +1,24 @@
+import { ReactElement, ReactNode } from 'react';
+interface MonitorElementsProps {
+    elements: Array<Record<string, unknown>>;
+    accessKey: string;
+    axis?: 'vertical' | 'horizontal';
+    onChange: (elements: Array<Record<string, unknown>>) => void;
+}
+/**
+ * This hook is responsible for monitoring the drag and drop of elements.
+ * It will call the onChange function with the new order of elements when a drop is detected.
+ *
+ * @param elements - The list of elements to monitor
+ * @param accessKey - The key to use to identify the elements (key of the object)
+ * @param axis - The axis to monitor the drag and drop on
+ * @param onChange - The function to call when a drop is detected
+ */
+export declare function useDragAndDropMonitor({ elements, accessKey, axis, onChange, }: MonitorElementsProps): void;
+export interface DragAndDropElementProps {
+    children: ReactNode;
+    data: Record<string, unknown>;
+}
+export declare function DragAndDropElement({ children, data }: DragAndDropElementProps): ReactElement;
+export {};
+//# sourceMappingURL=DragAndDropList.d.ts.map

package/dist/DragAndDrop/DragAndDropList.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DragAndDropList.d.ts","sourceRoot":"","sources":["../../src/DragAndDrop/DragAndDropList.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,YAAY,EAAE,SAAS,EAA+B,MAAM,OAAO,CAAC;AAa7E,UAAU,oBAAoB;IAC5B,QAAQ,EAAE,KAAK,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC;IACzC,SAAS,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;IACjC,QAAQ,EAAE,CAAC,QAAQ,EAAE,KAAK,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,KAAK,IAAI,CAAC;CAC9D;AAED;;;;;;;;GAQG;AACH,wBAAgB,qBAAqB,CAAC,EACpC,QAAQ,EACR,SAAS,EACT,IAAiB,EACjB,QAAQ,GACT,EAAE,oBAAoB,GAAG,IAAI,CAiC7B;AAED,MAAM,WAAW,uBAAuB;IACtC,QAAQ,EAAE,SAAS,CAAC;IACpB,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CAC/B;AAKD,wBAAgB,kBAAkB,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,EAAE,uBAAuB,GAAG,YAAY,CA4E5F"}

package/dist/DragAndDrop/DragAndDropList.js

@@ -0,0 +1,153 @@
+// 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 { useEffect, useRef, useState } from 'react';
+import { reorderWithEdge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/util/reorder-with-edge';
+import { monitorForElements, draggable, dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
+import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
+import { attachClosestEdge, extractClosestEdge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';
+import { Stack } from '@mui/material';
+import { idle } from './model';
+import { DropIndicator } from './DropIndicator';
+/**
+ * This hook is responsible for monitoring the drag and drop of elements.
+ * It will call the onChange function with the new order of elements when a drop is detected.
+ *
+ * @param elements - The list of elements to monitor
+ * @param accessKey - The key to use to identify the elements (key of the object)
+ * @param axis - The axis to monitor the drag and drop on
+ * @param onChange - The function to call when a drop is detected
+ */ export function useDragAndDropMonitor({ elements, accessKey, axis = 'vertical', onChange }) {
+    return useEffect(()=>{
+        return monitorForElements({
+            onDrop ({ location, source }) {
+                const target = location.current.dropTargets[0];
+                if (!target) {
+                    return;
+                }
+                const sourceData = source.data;
+                const targetData = target.data;
+                const indexOfSource = elements.findIndex((column)=>column[accessKey] === sourceData[accessKey]);
+                const indexOfTarget = elements.findIndex((column)=>column[accessKey] === targetData[accessKey]);
+                if (indexOfTarget < 0 || indexOfSource < 0) {
+                    return;
+                }
+                const closestEdgeOfTarget = extractClosestEdge(targetData);
+                onChange(reorderWithEdge({
+                    list: elements,
+                    startIndex: indexOfSource,
+                    indexOfTarget,
+                    closestEdgeOfTarget,
+                    axis: axis
+                }));
+            }
+        });
+    }, [
+        accessKey,
+        axis,
+        elements,
+        onChange
+    ]);
+}
+/*
+ * This component wraps the children that should be draggable
+ */ export function DragAndDropElement({ children, data }) {
+    const ref = useRef(null);
+    const [state, setState] = useState(idle);
+    useEffect(()=>{
+        const element = ref.current;
+        if (!element) {
+            return;
+        }
+        return combine(draggable({
+            element,
+            getInitialData () {
+                return data;
+            },
+            onDragStart () {
+                setState({
+                    type: 'is-dragging'
+                });
+            },
+            onDrop () {
+                setState(idle);
+            }
+        }), dropTargetForElements({
+            element,
+            canDrop ({ source }) {
+                // not allowing dropping on yourself
+                if (source.element === element) {
+                    return false;
+                }
+                // only allowing tasks to be dropped on me
+                return true;
+            },
+            getData ({ input }) {
+                return attachClosestEdge(data, {
+                    element,
+                    input,
+                    allowedEdges: [
+                        'top',
+                        'bottom'
+                    ]
+                });
+            },
+            getIsSticky () {
+                return true;
+            },
+            onDragEnter ({ self }) {
+                const closestEdge = extractClosestEdge(self.data);
+                setState({
+                    type: 'is-dragging-over',
+                    closestEdge
+                });
+            },
+            onDrag ({ self }) {
+                const closestEdge = extractClosestEdge(self.data);
+                // Only need to update react state if nothing has changed.
+                // Prevents re-rendering.
+                setState((current)=>{
+                    if (current.type === 'is-dragging-over' && current.closestEdge === closestEdge) {
+                        return current;
+                    }
+                    return {
+                        type: 'is-dragging-over',
+                        closestEdge
+                    };
+                });
+            },
+            onDragLeave () {
+                setState(idle);
+            },
+            onDrop () {
+                setState(idle);
+            }
+        }));
+    }, [
+        data
+    ]);
+    return /*#__PURE__*/ _jsxs(Stack, {
+        ref: ref,
+        spacing: 1,
+        style: {
+            opacity: state.type === 'is-dragging' ? 0.5 : 'unset'
+        },
+        children: [
+            state.type === 'is-dragging-over' && state.closestEdge === 'top' ? /*#__PURE__*/ _jsx(DropIndicator, {}) : null,
+            children,
+            state.type === 'is-dragging-over' && state.closestEdge === 'bottom' ? /*#__PURE__*/ _jsx(DropIndicator, {}) : null
+        ]
+    });
+}
+
+//# sourceMappingURL=DragAndDropList.js.map

package/dist/DragAndDrop/DragAndDropList.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/DragAndDrop/DragAndDropList.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 { ReactElement, ReactNode, useEffect, useRef, useState } from 'react';\nimport { reorderWithEdge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/util/reorder-with-edge';\nimport {\n  monitorForElements,\n  draggable,\n  dropTargetForElements,\n} from '@atlaskit/pragmatic-drag-and-drop/element/adapter';\nimport { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';\nimport { attachClosestEdge, extractClosestEdge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';\nimport { Stack } from '@mui/material';\nimport { idle, State } from './model';\nimport { DropIndicator } from './DropIndicator';\n\ninterface MonitorElementsProps {\n  elements: Array<Record<string, unknown>>;\n  accessKey: string;\n  axis?: 'vertical' | 'horizontal';\n  onChange: (elements: Array<Record<string, unknown>>) => void;\n}\n\n/**\n * This hook is responsible for monitoring the drag and drop of elements.\n * It will call the onChange function with the new order of elements when a drop is detected.\n *\n * @param elements - The list of elements to monitor\n * @param accessKey - The key to use to identify the elements (key of the object)\n * @param axis - The axis to monitor the drag and drop on\n * @param onChange - The function to call when a drop is detected\n */\nexport function useDragAndDropMonitor({\n  elements,\n  accessKey,\n  axis = 'vertical',\n  onChange,\n}: MonitorElementsProps): void {\n  return useEffect(() => {\n    return monitorForElements({\n      onDrop({ location, source }) {\n        const target = location.current.dropTargets[0];\n        if (!target) {\n          return;\n        }\n\n        const sourceData = source.data;\n        const targetData = target.data;\n\n        const indexOfSource = elements.findIndex((column) => column[accessKey] === sourceData[accessKey]);\n        const indexOfTarget = elements.findIndex((column) => column[accessKey] === targetData[accessKey]);\n\n        if (indexOfTarget < 0 || indexOfSource < 0) {\n          return;\n        }\n\n        const closestEdgeOfTarget = extractClosestEdge(targetData);\n\n        onChange(\n          reorderWithEdge({\n            list: elements,\n            startIndex: indexOfSource,\n            indexOfTarget,\n            closestEdgeOfTarget,\n            axis: axis,\n          })\n        );\n      },\n    });\n  }, [accessKey, axis, elements, onChange]);\n}\n\nexport interface DragAndDropElementProps {\n  children: ReactNode;\n  data: Record<string, unknown>;\n}\n\n/*\n * This component wraps the children that should be draggable\n */\nexport function DragAndDropElement({ children, data }: DragAndDropElementProps): ReactElement {\n  const ref = useRef<HTMLDivElement>(null);\n  const [state, setState] = useState<State>(idle);\n\n  useEffect(() => {\n    const element = ref.current;\n    if (!element) {\n      return;\n    }\n\n    return combine(\n      draggable({\n        element,\n        getInitialData() {\n          return data;\n        },\n        onDragStart() {\n          setState({ type: 'is-dragging' });\n        },\n        onDrop() {\n          setState(idle);\n        },\n      }),\n      dropTargetForElements({\n        element,\n        canDrop({ source }) {\n          // not allowing dropping on yourself\n          if (source.element === element) {\n            return false;\n          }\n          // only allowing tasks to be dropped on me\n          return true;\n        },\n        getData({ input }) {\n          return attachClosestEdge(data, {\n            element,\n            input,\n            allowedEdges: ['top', 'bottom'],\n          });\n        },\n        getIsSticky() {\n          return true;\n        },\n        onDragEnter({ self }) {\n          const closestEdge = extractClosestEdge(self.data);\n          setState({ type: 'is-dragging-over', closestEdge });\n        },\n        onDrag({ self }) {\n          const closestEdge = extractClosestEdge(self.data);\n\n          // Only need to update react state if nothing has changed.\n          // Prevents re-rendering.\n          setState((current) => {\n            if (current.type === 'is-dragging-over' && current.closestEdge === closestEdge) {\n              return current;\n            }\n            return { type: 'is-dragging-over', closestEdge };\n          });\n        },\n        onDragLeave() {\n          setState(idle);\n        },\n        onDrop() {\n          setState(idle);\n        },\n      })\n    );\n  }, [data]);\n\n  return (\n    <Stack ref={ref} spacing={1} style={{ opacity: state.type === 'is-dragging' ? 0.5 : 'unset' }}>\n      {state.type === 'is-dragging-over' && state.closestEdge === 'top' ? <DropIndicator /> : null}\n      {children}\n      {state.type === 'is-dragging-over' && state.closestEdge === 'bottom' ? <DropIndicator /> : null}\n    </Stack>\n  );\n}\n"],"names":["useEffect","useRef","useState","reorderWithEdge","monitorForElements","draggable","dropTargetForElements","combine","attachClosestEdge","extractClosestEdge","Stack","idle","DropIndicator","useDragAndDropMonitor","elements","accessKey","axis","onChange","onDrop","location","source","target","current","dropTargets","sourceData","data","targetData","indexOfSource","findIndex","column","indexOfTarget","closestEdgeOfTarget","list","startIndex","DragAndDropElement","children","ref","state","setState","element","getInitialData","onDragStart","type","canDrop","getData","input","allowedEdges","getIsSticky","onDragEnter","self","closestEdge","onDrag","onDragLeave","spacing","style","opacity"],"mappings":"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"}

package/dist/DragAndDrop/DragButton.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import { IconButtonProps, MenuProps } from '@mui/material';
+export declare function handleMoveUp<T>(element: T, elements: T[]): T[];
+export declare function handleMoveDown<T>(element: T, elements: T[]): T[];
+export interface DragButtonProps extends IconButtonProps {
+    onMoveUp?: () => void;
+    onMoveDown?: () => void;
+    onMoveLeft?: () => void;
+    onMoveRight?: () => void;
+    menuSx?: MenuProps['sx'];
+}
+export declare const DragButton: import("react").ForwardRefExoticComponent<Omit<DragButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+//# sourceMappingURL=DragButton.d.ts.map

package/dist/DragAndDrop/DragButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DragButton.d.ts","sourceRoot":"","sources":["../../src/DragAndDrop/DragButton.tsx"],"names":[],"mappings":";AAaA,OAAO,EAAc,eAAe,EAAkB,SAAS,EAAE,MAAM,eAAe,CAAC;AAIvF,wBAAgB,YAAY,CAAC,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,QAAQ,EAAE,CAAC,EAAE,GAAG,CAAC,EAAE,CAU9D;AAED,wBAAgB,cAAc,CAAC,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,QAAQ,EAAE,CAAC,EAAE,GAAG,CAAC,EAAE,CAUhE;AAED,MAAM,WAAW,eAAgB,SAAQ,eAAe;IACtD,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,MAAM,CAAC,EAAE,SAAS,CAAC,IAAI,CAAC,CAAC;CAC1B;AAED,eAAO,MAAM,UAAU,4HAiDrB,CAAC"}

package/dist/DragAndDrop/DragButton.js

@@ -0,0 +1,99 @@
+// Copyright 2024 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { IconButton, Menu, MenuItem } from '@mui/material';
+import DragIcon from 'mdi-material-ui/Drag';
+import { useState, forwardRef } from 'react';
+export function handleMoveUp(element, elements) {
+    const index = elements.indexOf(element);
+    if (index === 0) {
+        return elements;
+    }
+    const newElements = [
+        ...elements
+    ];
+    newElements.splice(index, 1);
+    newElements.splice(index - 1, 0, element);
+    return newElements;
+}
+export function handleMoveDown(element, elements) {
+    const index = elements.indexOf(element);
+    if (index === elements.length - 1) {
+        return elements;
+    }
+    const newElements = [
+        ...elements
+    ];
+    newElements.splice(index, 1);
+    newElements.splice(index + 1, 0, element);
+    return newElements;
+}
+export const DragButton = /*#__PURE__*/ forwardRef(function DragButton({ onMoveUp, onMoveDown, onMoveLeft, onMoveRight, menuSx, ...otherProps }, ref) {
+    const [anchorEl, setAnchorEl] = useState(null);
+    const open = Boolean(anchorEl);
+    function handleClick(event) {
+        setAnchorEl(event.currentTarget);
+    }
+    function handleMove(callback) {
+        setAnchorEl(null);
+        callback?.();
+    }
+    return /*#__PURE__*/ _jsxs(_Fragment, {
+        children: [
+            /*#__PURE__*/ _jsx(IconButton, {
+                ...otherProps,
+                ref: ref,
+                "aria-label": "move",
+                "aria-haspopup": true,
+                "aria-expanded": open,
+                size: "small",
+                onClick: handleClick,
+                children: /*#__PURE__*/ _jsx(DragIcon, {})
+            }),
+            (onMoveUp || onMoveDown || onMoveLeft || onMoveRight) && /*#__PURE__*/ _jsxs(Menu, {
+                id: "drag-button-menu",
+                MenuListProps: {
+                    'aria-labelledby': 'drag-button-menu'
+                },
+                anchorEl: anchorEl,
+                open: open,
+                onClose: ()=>handleMove(undefined),
+                sx: menuSx,
+                children: [
+                    onMoveUp && /*#__PURE__*/ _jsx(MenuItem, {
+                        onClick: ()=>handleMove(onMoveUp),
+                        children: "Move Up"
+                    }),
+                    onMoveDown && /*#__PURE__*/ _jsx(MenuItem, {
+                        onClick: ()=>handleMove(onMoveDown),
+                        children: "Move Down"
+                    }),
+                    onMoveLeft && /*#__PURE__*/ _jsx(MenuItem, {
+                        onClick: ()=>handleMove(onMoveLeft),
+                        children: "Move Left"
+                    }),
+                    onMoveRight && /*#__PURE__*/ _jsx(MenuItem, {
+                        onClick: ()=>handleMove(onMoveRight),
+                        children: "Move Right"
+                    }),
+                    onMoveRight && /*#__PURE__*/ _jsx(MenuItem, {
+                        onClick: ()=>handleMove(onMoveRight),
+                        children: "Move Right"
+                    })
+                ]
+            })
+        ]
+    });
+});
+
+//# sourceMappingURL=DragButton.js.map