@grafana/plugin-ui 0.16.0 → 0.17.0

package/dist/esm/test/mocks/utils.js

@@ -5,7 +5,7 @@ import userEvent from '@testing-library/user-event';
 import { kebabCase } from 'lodash';
 
 const generateBoolean = () => chanceExports.Chance().pickone([true, false]);
-const undefinedOr = (fn) => chanceExports.Chance().pickone([undefined, fn()]);
+const undefinedOr = (fn) => chanceExports.Chance().pickone([void 0, fn()]);
 const generateArrayOf = (fn, numberOf = 3) => Array.from(new Array(numberOf), () => fn());
 const openSelect = (container, optionLabel) => {
   const selectInput = within(container).getByRole("textbox");
@@ -13,7 +13,7 @@ const openSelect = (container, optionLabel) => {
   userEvent.type(selectInput, optionLabel != null ? optionLabel : "{arrowdown}");
 };
 const selectOption = async (container, optionLabel, typeOptionLabel) => {
-  openSelect(container, typeOptionLabel ? optionLabel : undefined);
+  openSelect(container, typeOptionLabel ? optionLabel : void 0);
   const option = await waitFor(() => within(container).getByText(optionLabel));
   userEvent.click(option);
 };

package/dist/esm/test/mocks/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sources":["../../../../src/test/mocks/utils.ts"],"sourcesContent":["import { type SelectableValue } from '@grafana/data';\nimport { Chance } from 'chance';\nimport { within, fireEvent, waitFor } from '@testing-library/react';\nimport userEvent from '@testing-library/user-event';\nimport { kebabCase } from 'lodash';\n\nexport const generateBoolean = () => Chance().pickone([true, false]);\n\nexport const undefinedOr = (fn: Function) => Chance().pickone([undefined, fn()]);\n\nexport const generateArrayOf = (fn: Function, numberOf = 3) => Array.from(new Array(numberOf), () => fn());\n\n// react-select (used by @grafana/ui) renders very differently from the native Select HTML element\n// and because they are not accessible and do not pass data-testid or aria-labels down,\n// it is difficult to grab the correct element and simulate selecting different options\n// the helper functions below can be used instead\n\n/**\n * Opens a Select or MultiSelect dropdown\n *\n * @param {HTMLElement} container The container wrapping the Select or MultiSelect component\n * @param {string} optionLabel The option text we want to type or search\n */\nexport const openSelect = (container: HTMLElement, optionLabel?: string) => {\n  const selectInput = within(container).getByRole('textbox');\n\n  // this needs to be here to support autoFocus=true prop\n  fireEvent.blur(selectInput);\n\n  // if we have an async Select, we want to type the option label to make the option available\n  // otherwise, just press down to open the dropdown\n  userEvent.type(selectInput, optionLabel ?? '{arrowdown}');\n};\n\n/**\n * Selects an option from the Select or MultiSelect component\n *\n * @param {HTMLElement} container The container wrapping the Select or MultiSelect component\n * @param {string} optionLabel The option we want to select\n * @param {boolean} [typeOptionLabel=false] If we should type the optional label after opening - this is useful for AsyncSelect\n */\nexport const selectOption = async (container: HTMLElement, optionLabel: string, typeOptionLabel?: boolean) => {\n  openSelect(container, typeOptionLabel ? optionLabel : undefined);\n\n  // wait for the list to show\n  const option = await waitFor(() => within(container).getByText(optionLabel));\n\n  // select the option\n  userEvent.click(option);\n};\n\nexport const generateOptions = (): Array<SelectableValue<string>> => {\n  const numberOfOptions = 5;\n\n  return Array.from(new Array(numberOfOptions), () => {\n    const name = Chance().name();\n\n    return {\n      label: name,\n      value: kebabCase(name),\n    };\n  });\n};\n"],"names":["Chance"],"mappings":";;;;;;AAMa,MAAA,eAAA,GAAkB,MAAMA,oBAAO,EAAA,CAAE,QAAQ,CAAC,IAAA,EAAM,KAAK,CAAC;AAEtD,MAAA,WAAA,GAAc,CAAC,EAAA,KAAiBA,oBAAO,EAAA,CAAE,QAAQ,CAAC,SAAA,EAAW,EAAG,EAAC,CAAC;AAExE,MAAM,eAAkB,GAAA,CAAC,EAAc,EAAA,QAAA,GAAW,CAAM,KAAA,KAAA,CAAM,IAAK,CAAA,IAAI,KAAM,CAAA,QAAQ,CAAG,EAAA,MAAM,IAAI;AAa5F,MAAA,UAAA,GAAa,CAAC,SAAA,EAAwB,WAAyB,KAAA;AAC1E,EAAA,MAAM,WAAc,GAAA,MAAA,CAAO,SAAS,CAAA,CAAE,UAAU,SAAS,CAAA;AAGzD,EAAA,SAAA,CAAU,KAAK,WAAW,CAAA;AAI1B,EAAU,SAAA,CAAA,IAAA,CAAK,WAAa,EAAA,WAAA,IAAA,IAAA,GAAA,WAAA,GAAe,aAAa,CAAA;AAC1D;AASO,MAAM,YAAe,GAAA,OAAO,SAAwB,EAAA,WAAA,EAAqB,eAA8B,KAAA;AAC5G,EAAW,UAAA,CAAA,SAAA,EAAW,eAAkB,GAAA,WAAA,GAAc,SAAS,CAAA;AAG/D,EAAM,MAAA,MAAA,GAAS,MAAM,OAAQ,CAAA,MAAM,OAAO,SAAS,CAAA,CAAE,SAAU,CAAA,WAAW,CAAC,CAAA;AAG3E,EAAA,SAAA,CAAU,MAAM,MAAM,CAAA;AACxB;AAEO,MAAM,kBAAkB,MAAsC;AACnE,EAAA,MAAM,eAAkB,GAAA,CAAA;AAExB,EAAA,OAAO,MAAM,IAAK,CAAA,IAAI,KAAM,CAAA,eAAe,GAAG,MAAM;AAClD,IAAM,MAAA,IAAA,GAAOA,oBAAO,EAAA,CAAE,IAAK,EAAA;AAE3B,IAAO,OAAA;AAAA,MACL,KAAO,EAAA,IAAA;AAAA,MACP,KAAA,EAAO,UAAU,IAAI;AAAA,KACvB;AAAA,GACD,CAAA;AACH;;;;"}
+{"version":3,"file":"utils.js","sources":["../../../../src/test/mocks/utils.ts"],"sourcesContent":["import { type SelectableValue } from '@grafana/data';\nimport { Chance } from 'chance';\nimport { within, fireEvent, waitFor } from '@testing-library/react';\nimport userEvent from '@testing-library/user-event';\nimport { kebabCase } from 'lodash';\n\nexport const generateBoolean = () => Chance().pickone([true, false]);\n\nexport const undefinedOr = (fn: Function) => Chance().pickone([undefined, fn()]);\n\nexport const generateArrayOf = (fn: Function, numberOf = 3) => Array.from(new Array(numberOf), () => fn());\n\n// react-select (used by @grafana/ui) renders very differently from the native Select HTML element\n// and because they are not accessible and do not pass data-testid or aria-labels down,\n// it is difficult to grab the correct element and simulate selecting different options\n// the helper functions below can be used instead\n\n/**\n * Opens a Select or MultiSelect dropdown\n *\n * @param {HTMLElement} container The container wrapping the Select or MultiSelect component\n * @param {string} optionLabel The option text we want to type or search\n */\nexport const openSelect = (container: HTMLElement, optionLabel?: string) => {\n  const selectInput = within(container).getByRole('textbox');\n\n  // this needs to be here to support autoFocus=true prop\n  fireEvent.blur(selectInput);\n\n  // if we have an async Select, we want to type the option label to make the option available\n  // otherwise, just press down to open the dropdown\n  userEvent.type(selectInput, optionLabel ?? '{arrowdown}');\n};\n\n/**\n * Selects an option from the Select or MultiSelect component\n *\n * @param {HTMLElement} container The container wrapping the Select or MultiSelect component\n * @param {string} optionLabel The option we want to select\n * @param {boolean} [typeOptionLabel=false] If we should type the optional label after opening - this is useful for AsyncSelect\n */\nexport const selectOption = async (container: HTMLElement, optionLabel: string, typeOptionLabel?: boolean) => {\n  openSelect(container, typeOptionLabel ? optionLabel : undefined);\n\n  // wait for the list to show\n  const option = await waitFor(() => within(container).getByText(optionLabel));\n\n  // select the option\n  userEvent.click(option);\n};\n\nexport const generateOptions = (): Array<SelectableValue<string>> => {\n  const numberOfOptions = 5;\n\n  return Array.from(new Array(numberOfOptions), () => {\n    const name = Chance().name();\n\n    return {\n      label: name,\n      value: kebabCase(name),\n    };\n  });\n};\n"],"names":["Chance"],"mappings":";;;;;;AAMO,MAAM,eAAA,GAAkB,MAAMA,oBAAA,EAAO,CAAE,QAAQ,CAAC,IAAA,EAAM,KAAK,CAAC;AAE5D,MAAM,WAAA,GAAc,CAAC,EAAA,KAAiBA,oBAAA,EAAO,CAAE,QAAQ,CAAC,MAAA,EAAW,EAAA,EAAI,CAAC;AAExE,MAAM,eAAA,GAAkB,CAAC,EAAA,EAAc,QAAA,GAAW,CAAA,KAAM,KAAA,CAAM,IAAA,CAAK,IAAI,KAAA,CAAM,QAAQ,CAAA,EAAG,MAAM,IAAI;AAalG,MAAM,UAAA,GAAa,CAAC,SAAA,EAAwB,WAAA,KAAyB;AAC1E,EAAA,MAAM,WAAA,GAAc,MAAA,CAAO,SAAS,CAAA,CAAE,UAAU,SAAS,CAAA;AAGzD,EAAA,SAAA,CAAU,KAAK,WAAW,CAAA;AAI1B,EAAA,SAAA,CAAU,IAAA,CAAK,WAAA,EAAa,WAAA,IAAA,IAAA,GAAA,WAAA,GAAe,aAAa,CAAA;AAC1D;AASO,MAAM,YAAA,GAAe,OAAO,SAAA,EAAwB,WAAA,EAAqB,eAAA,KAA8B;AAC5G,EAAA,UAAA,CAAW,SAAA,EAAW,eAAA,GAAkB,WAAA,GAAc,MAAS,CAAA;AAG/D,EAAA,MAAM,MAAA,GAAS,MAAM,OAAA,CAAQ,MAAM,OAAO,SAAS,CAAA,CAAE,SAAA,CAAU,WAAW,CAAC,CAAA;AAG3E,EAAA,SAAA,CAAU,MAAM,MAAM,CAAA;AACxB;AAEO,MAAM,kBAAkB,MAAsC;AACnE,EAAA,MAAM,eAAA,GAAkB,CAAA;AAExB,EAAA,OAAO,MAAM,IAAA,CAAK,IAAI,KAAA,CAAM,eAAe,GAAG,MAAM;AAClD,IAAA,MAAM,IAAA,GAAOA,oBAAA,EAAO,CAAE,IAAA,EAAK;AAE3B,IAAA,OAAO;AAAA,MACL,KAAA,EAAO,IAAA;AAAA,MACP,KAAA,EAAO,UAAU,IAAI;AAAA,KACvB;AAAA,EACF,CAAC,CAAA;AACH;;;;"}

package/dist/esm/test-utils.d.ts

@@ -1,5 +1,5 @@
 import * as _grafana_data from '@grafana/data';
-import { DataSourceInstanceSettings, DataQuery, DataSourcePluginMeta, PluginMetaInfo, PluginMeta, PluginInclude, PluginType, PluginIncludeType, PluginState, PluginDependencies, PluginSignatureStatus, QueryEditorProps, LoadingState, TimeRange, SelectableValue } from '@grafana/data';
+import { DataSourceInstanceSettings, DataQuery, DataSourcePluginMeta, PluginDependencies, PluginInclude, PluginIncludeType, PluginMeta, PluginMetaInfo, PluginSignatureStatus, PluginState, PluginType, LoadingState, QueryEditorProps, TimeRange, SelectableValue } from '@grafana/data';
 import { DataSourceWithBackend } from '@grafana/runtime';
 
 declare class DatasourceMock extends DataSourceWithBackend {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@grafana/plugin-ui",
-  "version": "0.16.0",
+  "version": "0.17.0",
   "repository": {
     "type": "git",
     "url": "git+ssh://git@github.com/grafana/plugin-ui.git"
@@ -61,88 +61,88 @@
   "dependencies": {
     "@emotion/css": "11.13.5",
     "@hello-pangea/dnd": "17.0.0",
-    "@react-awesome-query-builder/ui": "6.6.12",
+    "@react-awesome-query-builder/ui": "6.6.15",
     "lodash": "4.18.1",
     "prismjs": "1.30.0",
     "react-calendar": "4.8.0",
     "react-popper-tooltip": "4.4.2",
-    "react-use": "17.6.0",
-    "react-virtualized-auto-sizer": "1.0.6",
-    "sql-formatter": "15.7.3",
-    "uuid": "14.0.0"
+    "react-use": "17.6.1",
+    "react-virtualized-auto-sizer": "1.0.26",
+    "sql-formatter": "15.8.2",
+    "uuid": "14.0.1"
   },
   "devDependencies": {
-    "@arethetypeswrong/cli": "0.17.3",
-    "@grafana/data": "10.4.7",
-    "@grafana/e2e-selectors": "10.4.7",
-    "@grafana/eslint-config": "8.0.0",
-    "@grafana/runtime": "10.4.7",
-    "@grafana/tsconfig": "2.0.0",
-    "@grafana/ui": "10.4.7",
-    "@rollup/plugin-commonjs": "29.0.0",
+    "@arethetypeswrong/cli": "0.18.5",
+    "@grafana/data": "13.1.0",
+    "@grafana/e2e-selectors": "13.1.0",
+    "@grafana/eslint-config": "8.2.0",
+    "@grafana/runtime": "13.1.0",
+    "@grafana/tsconfig": "2.2.0",
+    "@grafana/ui": "13.1.0",
+    "@rollup/plugin-commonjs": "29.0.3",
     "@rollup/plugin-json": "6.1.0",
-    "@rollup/plugin-node-resolve": "16.0.0",
-    "@storybook/addon-docs": "10.2.5",
-    "@storybook/addon-links": "10.2.5",
-    "@storybook/addon-webpack5-compiler-swc": "4.0.2",
-    "@storybook/react-webpack5": "10.2.5",
-    "@stylistic/eslint-plugin-ts": "2.9.0",
-    "@swc/core": "1.15.11",
-    "@swc/jest": "0.2.37",
-    "@testing-library/jest-dom": "5.16.5",
-    "@testing-library/react": "15.0.2",
-    "@testing-library/user-event": "14.5.2",
-    "@types/chance": "1.1.0",
+    "@rollup/plugin-node-resolve": "16.0.3",
+    "@storybook/addon-docs": "10.5.0",
+    "@storybook/addon-links": "10.5.0",
+    "@storybook/addon-webpack5-compiler-swc": "4.0.3",
+    "@storybook/react-webpack5": "10.5.0",
+    "@stylistic/eslint-plugin-ts": "4.4.1",
+    "@swc/core": "1.15.43",
+    "@swc/jest": "0.2.39",
+    "@testing-library/jest-dom": "6.9.1",
+    "@testing-library/react": "16.3.2",
+    "@testing-library/user-event": "14.6.1",
+    "@types/chance": "1.1.8",
     "@types/jest": "30.0.0",
-    "@types/lodash": "4.14.194",
+    "@types/lodash": "4.17.24",
     "@types/memoize-one": "5.1.2",
-    "@types/node": "25.9.3",
-    "@types/prismjs": "1.26.4",
-    "@types/react": "18.3.28",
-    "@types/react-calendar": "3.1.2",
-    "@types/testing-library__jest-dom": "5.9.5",
-    "@typescript-eslint/eslint-plugin": "6.18.0",
-    "@typescript-eslint/parser": "6.18.0",
-    "chance": "1.1.7",
+    "@types/node": "25.9.5",
+    "@types/prismjs": "1.26.6",
+    "@types/react": "18.3.31",
+    "@types/react-calendar": "3.9.0",
+    "@types/testing-library__jest-dom": "6.0.0",
+    "@typescript-eslint/eslint-plugin": "8.63.0",
+    "@typescript-eslint/parser": "8.63.0",
+    "chance": "1.1.13",
     "copyfiles": "2.4.1",
     "cspell": "10.0.1",
-    "esbuild": "0.25.3",
-    "eslint": "8.52.0",
-    "eslint-config-prettier": "8.8.0",
-    "eslint-plugin-jsdoc": "46.8.2",
-    "eslint-plugin-prettier": "5.2.1",
-    "eslint-plugin-react": "7.37.4",
-    "eslint-plugin-react-hooks": "4.6.0",
-    "fast-glob": "3.3.1",
+    "esbuild": "0.28.1",
+    "eslint": "8.57.1",
+    "eslint-config-prettier": "8.10.2",
+    "eslint-plugin-jsdoc": "46.10.1",
+    "eslint-plugin-prettier": "5.5.6",
+    "eslint-plugin-react": "7.37.5",
+    "eslint-plugin-react-hooks": "4.6.2",
+    "fast-glob": "3.3.3",
     "jest": "29.7.0",
     "jest-environment-jsdom": "29.7.0",
-    "jest-fetch-mock": "3.0.3",
-    "lefthook": "1.7.18",
-    "mockdate": "3.0.2",
-    "prettier": "3.3.3",
-    "publint": "0.3.12",
+    "jest-fetch-mock": "3.2.0",
+    "lefthook": "2.1.10",
+    "mockdate": "3.0.5",
+    "prettier": "3.9.5",
+    "publint": "0.3.21",
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "react-select-event": "5.5.1",
-    "rollup": "4.32.1",
-    "rollup-plugin-dts": "6.1.1",
-    "rollup-plugin-esbuild": "6.1.1",
-    "rollup-plugin-node-externals": "8.0.0",
-    "rxjs": "7.8.1",
-    "storybook": "10.2.10",
-    "ts-node": "10.9.1",
-    "typescript": "5.7.3"
+    "rollup": "4.59.0",
+    "rollup-plugin-dts": "6.4.1",
+    "rollup-plugin-esbuild": "6.2.1",
+    "rollup-plugin-node-externals": "9.0.1",
+    "rxjs": "7.8.2",
+    "storybook": "10.5.0",
+    "ts-node": "10.9.2",
+    "typescript": "5.9.3"
   },
   "peerDependencies": {
-    "@grafana/data": ">=10.4.7",
-    "@grafana/e2e-selectors": ">=10.4.7",
-    "@grafana/runtime": ">=10.4.7",
-    "@grafana/ui": ">=10.4.7",
-    "@testing-library/jest-dom": ">=5.16.5",
-    "@testing-library/react": ">=15.0.2",
-    "@testing-library/user-event": ">=14.5.2",
-    "react": ">=18.2.0",
-    "react-dom": ">=18.2.0"
+    "@grafana/data": "^13.0.0",
+    "@grafana/e2e-selectors": "^13.0.0",
+    "@grafana/runtime": "^13.0.0",
+    "@grafana/ui": "^13.0.0",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
+    "@testing-library/user-event": "^14.6.1",
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
   },
   "files": [
     "dist"
@@ -151,5 +151,5 @@
     "node": ">=24",
     "yarn": ">=4.16.0"
   },
-  "packageManager": "yarn@4.16.0"
+  "packageManager": "yarn@4.17.1"
 }

package/dist/esm/components/QueryEditorRow/QueryEditorRow.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"QueryEditorRow.js","sources":["../../../../src/components/QueryEditorRow/QueryEditorRow.tsx"],"sourcesContent":["import React from 'react';\nexport interface QueryEditorRowProps {\n  label?: string;\n  className?: string;\n  noFillEnd?: boolean;\n  children?: React.ReactNode;\n}\n\nexport const QueryEditorRow = (props: QueryEditorRowProps) => {\n  const className: string = props.className ?? 'width-8';\n  const noFillEnd: boolean = props.noFillEnd ?? false;\n\n  return (\n    <div className=\"gf-form\">\n      {props.label && <label className={`gf-form-label query-keyword ${className}`}>{props.label}</label>}\n      {props.children}\n\n      <div className={'gf-form--grow'}>{noFillEnd || <div className={'gf-form-label gf-form-label--grow'}></div>}</div>\n    </div>\n  );\n};\n"],"names":[],"mappings":";;AAQa,MAAA,cAAA,GAAiB,CAAC,KAA+B,KAAA;AAR9D,EAAA,IAAA,EAAA,EAAA,EAAA;AASE,EAAM,MAAA,SAAA,GAAA,CAAoB,EAAM,GAAA,KAAA,CAAA,SAAA,KAAN,IAAmB,GAAA,EAAA,GAAA,SAAA;AAC7C,EAAM,MAAA,SAAA,GAAA,CAAqB,EAAM,GAAA,KAAA,CAAA,SAAA,KAAN,IAAmB,GAAA,EAAA,GAAA,KAAA;AAE9C,EACE,uBAAA,KAAA,CAAA,aAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAU,SACZ,EAAA,EAAA,KAAA,CAAM,KAAS,oBAAA,KAAA,CAAA,aAAA,CAAC,OAAM,EAAA,EAAA,SAAA,EAAW,CAA+B,4BAAA,EAAA,SAAS,CAAK,CAAA,EAAA,EAAA,KAAA,CAAM,KAAM,CAAA,EAC1F,KAAM,CAAA,QAAA,kBAEN,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,eAAA,EAAA,EAAkB,SAAa,oBAAA,KAAA,CAAA,aAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAW,mCAAqC,EAAA,CAAO,CAC7G,CAAA;AAEJ;;;;"}

package/dist/esm/schema/registry/alertmanager.schema.json.js

@@ -1,77 +0,0 @@
-var $schema = "../schema.json";
-var schemaVersion = "v1";
-var pluginType = "alertmanager";
-var pluginName = "Alertmanager";
-var docURL = "https://grafana.com/docs/grafana/latest/datasources/alertmanager/";
-var fields = [
-	{
-		id: "jsonData.implementation",
-		key: "implementation",
-		label: "Implementation",
-		description: "The Alertmanager implementation type.",
-		valueType: "string",
-		target: "jsonData",
-		defaultValue: "mimir",
-		validations: [
-			{
-				type: "allowedValues",
-				values: [
-					"cortex",
-					"mimir",
-					"prometheus"
-				]
-			}
-		],
-		ui: {
-			component: "select",
-			options: [
-				{
-					label: "Mimir",
-					value: "mimir"
-				},
-				{
-					label: "Cortex",
-					value: "cortex"
-				},
-				{
-					label: "Prometheus",
-					value: "prometheus"
-				}
-			]
-		}
-	},
-	{
-		id: "jsonData.handleGrafanaManagedAlerts",
-		key: "handleGrafanaManagedAlerts",
-		label: "Receive Grafana Alerts",
-		description: "When enabled, Grafana-managed alerts are sent to this Alertmanager.",
-		valueType: "boolean",
-		target: "jsonData",
-		defaultValue: false,
-		ui: {
-			component: "switch"
-		}
-	}
-];
-var groups = [
-	{
-		id: "settings",
-		title: "Alertmanager Settings",
-		fieldRefs: [
-			"jsonData.implementation",
-			"jsonData.handleGrafanaManagedAlerts"
-		]
-	}
-];
-var alertmanagerSchema = {
-	$schema: $schema,
-	schemaVersion: schemaVersion,
-	pluginType: pluginType,
-	pluginName: pluginName,
-	docURL: docURL,
-	fields: fields,
-	groups: groups
-};
-
-export { $schema, alertmanagerSchema as default, docURL, fields, groups, pluginName, pluginType, schemaVersion };
-//# sourceMappingURL=alertmanager.schema.json.js.map

package/dist/esm/schema/registry/alertmanager.schema.json.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"alertmanager.schema.json.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}