New MeterGroup Component

.gitignore

@@ -25,6 +25,7 @@ tsconfig.tsbuildinfo
 # misc
 .DS_Store
 *.pem
+*.code-workspace
 
 # debug
 npm-debug.log*

components/doc/common/apidoc/index.json

@@ -34566,6 +34566,270 @@
             }
         }
     },
+    "metergroup": {
+        "description": "MeterGroup displays scalar measurements within a known range.\n\n[Live Demo](https://www.primereact.org/metergroup/)",
+        "components": {
+            "MeterGroup": {
+                "description": "MeterGroup is an extension to standard input element with theming and keyfiltering.",
+                "methods": {
+                    "description": "Defines methods that can be accessed by the component's reference.",
+                    "values": []
+                },
+                "props": {
+                    "description": "Defines valid properties in MeterGroup component. In addition to these, all properties of HTMLDivElement can be used in this component.",
+                    "values": [
+                        {
+                            "name": "className",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Additional CSS classes to apply to the MeterGroup."
+                        },
+                        {
+                            "name": "end",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "Function",
+                            "default": ""
+                        },
+                        {
+                            "name": "labelListRenderer",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "Function",
+                            "default": ""
+                        },
+                        {
+                            "name": "labelOrientation",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "\"horizontal\" | \"vertical\"",
+                            "default": "'horizontal'",
+                            "description": "The orientation of the label. Can be either 'horizontal' or 'vertical'."
+                        },
+                        {
+                            "name": "labelPosition",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "\"end\" | \"start\"",
+                            "default": "'end'",
+                            "description": "The position of the label. Can be either 'start' or 'end'."
+                        },
+                        {
+                            "name": "max",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "100",
+                            "description": "The maximum value for the MeterGroup."
+                        },
+                        {
+                            "name": "meterRenderer",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "Function",
+                            "default": ""
+                        },
+                        {
+                            "name": "min",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "0",
+                            "description": "The minimum value for the MeterGroup."
+                        },
+                        {
+                            "name": "orientation",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "\"horizontal\" | \"vertical\"",
+                            "default": "'horizontal'",
+                            "description": "The orientation of the MeterGroup. Can be either 'horizontal' or 'vertical'."
+                        },
+                        {
+                            "name": "start",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "Function",
+                            "default": ""
+                        },
+                        {
+                            "name": "values",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MeterGroupValue[]",
+                            "default": "",
+                            "description": "An array of values to be represented by the MeterGroup."
+                        }
+                    ]
+                },
+                "callbacks": {
+                    "description": "Defines callbacks that determine the behavior of the component based on a given condition or report the actions that the component takes.",
+                    "values": []
+                }
+            }
+        },
+        "interfaces": {
+            "description": "Defines the custom interfaces used by the module.",
+            "values": {
+                "MeterGroupContext": {
+                    "description": "Defines current options in MeterGroup component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "disabled",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Current disabled state of the component as a boolean."
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "MeterGroupPassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "MeterGroupProps"
+                        },
+                        {
+                            "name": "context",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "MeterGroupContext"
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "MeterGroupPassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "MeterGroupProps.pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MeterGroupPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Used to pass attributes to the root's DOM element."
+                        },
+                        {
+                            "name": "labellist",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MeterGroupPassThroughType<HTMLAttributes<HTMLOListElement>>",
+                            "description": "Used to pass attributes to the label list's DOM element."
+                        },
+                        {
+                            "name": "labellistitem",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MeterGroupPassThroughType<HTMLAttributes<HTMLLIElement>>",
+                            "description": "Used to pass attributes to the label list item's DOM element."
+                        },
+                        {
+                            "name": "labellisttype",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MeterGroupPassThroughType<HTMLAttributes<any>>",
+                            "description": "Used to pass attributes to the label list type's DOM element."
+                        },
+                        {
+                            "name": "label",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MeterGroupPassThroughType<HTMLAttributes<HTMLSpanElement>>",
+                            "description": "Used to pass attributes to the label's DOM element."
+                        },
+                        {
+                            "name": "metercontainer",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MeterGroupPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Used to pass attributes to the meter container's DOM element."
+                        },
+                        {
+                            "name": "meter",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MeterGroupPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Used to pass attributes to the meter's DOM element."
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "MeterGroupValue": {
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "value",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number"
+                        },
+                        {
+                            "name": "label",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string | HTMLElement"
+                        },
+                        {
+                            "name": "color",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string"
+                        },
+                        {
+                            "name": "[key: string]",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any"
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "CustomRenderProps": {
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "totaLPercent",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number"
+                        },
+                        {
+                            "name": "percentages",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number[]"
+                        },
+                        {
+                            "name": "values",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "MeterGroupValue[]"
+                        }
+                    ],
+                    "callbacks": []
+                }
+            }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "MeterGroupPassThroughType": {
+                    "values": "PassThroughType<T, MeterGroupPassThroughMethodOptions>"
+                },
+                "MeterGroupPassThroughTransitionType": {
+                    "values": "ReactCSSTransitionProps | Function | undefined"
+                }
+            }
+        }
+    },
     "multiselect": {
         "description": "MultiSelect is used to select multiple items from a collection.\n\n[Live Demo](https://www.primereact.org/multiselect/)",
         "components": {

components/doc/metergroup/accessibilitydoc.js

@@ -0,0 +1,26 @@
+import { DevelopmentSection } from '@/components/doc/common/developmentsection';
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import Link from 'next/link';
+
+export function AccessibilityDoc() {
+    const code = {
+        basic: `
+<span id="dd1">Options</span>
+<MultiSelect aria-labelledby="dd1" />
+
+<MultiSelect aria-label="Options" />
+    `
+    };
+
+    return (
+        <DocSectionText id="accessibility" label="Accessibility">
+            <h3>Screen Reader</h3>
+            <p>
+                MeterGroup component uses <i>meter</i> role in addition to the <i>aria-valuemin</i>, <i>aria-valuemax</i> and <i>aria-valuenow</i> attributes. Value to describe the component can be defined using <i>aria-labelledby</i> prop.
+            </p>
+            <h3>Keyboard Support</h3>
+            <p>Component does not include any interactive elements.</p>
+        </DocSectionText>
+    );
+}

components/doc/metergroup/basicdoc.js

@@ -0,0 +1,55 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { MeterGroup } from '@/components/lib/metergroup/MeterGroup';
+
+export function BasicDoc(props) {
+    const code = {
+        basic: `
+<MeterGroup values={values} />
+        `,
+        javascript: `
+import React, { useEffect, useRef } from 'react';
+import { MeterGroup } from 'primereact/metergroup';
+
+export default function BasicDemo() {
+    const values = [{ label: 'Space used', value: 15 }];
+
+    return (
+        <div className="card flex justify-content-center">
+            <MeterGroup values={values} />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useEffect, useRef } from 'react';
+import { MeterGroup } from 'primereact/metergroup';
+
+export default function BasicDemo() {
+    const values = [{ label: 'Space used', value: 15 }];
+
+    return (
+        <div className="card flex justify-content-center">
+            <MeterGroup values={values} />
+        </div>
+    )
+}
+        `
+    };
+
+    const values = [{ label: 'Space used', value: 15 }];
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    MeterGroup requires a <i>value</i> as the data to display where each item in the collection should be a type of <i>MeterItem</i>.
+                </p>
+            </DocSectionText>
+            <div className="card">
+                <MeterGroup values={values} />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}