@gpa-gemstone/react-forms 1.1.60 → 1.1.62

package/lib/ArrayCheckBoxes.d.ts

@@ -1,11 +1,33 @@
-/// <reference types="react" />
-export default function ArrayCheckBoxes<T>(props: {
-    Record: T;
-    Field: keyof T;
-    Setter: (record: T) => void;
-    Checkboxes: {
-        ID: string;
-        Label: string;
-    }[];
-    Label?: string;
-}): JSX.Element;
+interface IProps<T> {
+    /**
+      * Record to be used in form
+      * @type {T}
+    */
+    Record: T;
+    /**
+      * Field of the record to be edited
+      * @type {keyof T}
+    */
+    Field: keyof T;
+    /**
+      * Setter function to update the Record
+      * @param record - Updated Record
+    */
+    Setter: (record: T) => void;
+    /**
+      * Array of checkboxes with their IDs and labels
+      * @type {{ ID: string; Label: string }[]}
+    */
+    Checkboxes: {
+        ID: string;
+        Label: string;
+    }[];
+    /**
+    * Label to display for the form, defaults to the Field prop
+    * @type {string}
+    * @optional
+  */
+    Label?: string;
+}
+export default function ArrayCheckBoxes<T>(props: IProps<T>): JSX.Element;
+export {};

package/lib/ArrayCheckBoxes.js

@@ -1,79 +1,81 @@
-"use strict";
-// ******************************************************************************************************
-//  ArrayCheckBoxes.tsx - Gbtc
-//
-//  Copyright © 2020, Grid Protection Alliance.  All Rights Reserved.
-//
-//  Licensed to the Grid Protection Alliance (GPA) under one or more contributor license agreements. See
-//  the NOTICE file distributed with this work for additional information regarding copyright ownership.
-//  The GPA licenses this file to you under the MIT License (MIT), the "License"; you may not use this
-//  file except in compliance with the License. You may obtain a copy of the License at:
-//
-//      http://opensource.org/licenses/MIT
-//
-//  Unless agreed to in writing, the subject software distributed under the License is distributed on an
-//  "AS-IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. Refer to the
-//  License for the specific language governing permissions and limitations.
-//
-//  Code Modification History:
-//  ----------------------------------------------------------------------------------------------------
-//  01/22/2020 - Billy Ernest
-//       Generated original version of source code.
-//
-// ******************************************************************************************************
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var React = require("react");
-var helper_functions_1 = require("@gpa-gemstone/helper-functions");
-function ArrayCheckBoxes(props) {
-    var Remove = function (cb) {
-        var a = __spreadArray([], props.Record[props.Field], true);
-        var i = a.indexOf(cb.ID);
-        a.splice(i, 1);
-        return a;
-    };
-    var Add = function (cb) {
-        var a = __spreadArray([], props.Record[props.Field], true);
-        var i = a.indexOf(cb.ID);
-        if (i < 0)
-            a.push(cb.ID);
-        a.sort();
-        return a;
-    };
-    var id = React.useRef("array-checkbox-" + (0, helper_functions_1.CreateGuid)());
-    return (React.createElement("div", { className: "form-group" },
-        React.createElement("label", null, props.Label == null ? props.Field : props.Label),
-        React.createElement("br", null),
-        React.createElement("div", { className: "form-check form-check-inline" },
-            React.createElement("input", { id: id.current + "-all", className: "form-check-input", type: "checkbox", checked: JSON.stringify(props.Record[props.Field]) === JSON.stringify(props.Checkboxes.map(function (x) { return x.ID; })), onChange: function (evt) {
-                    var _a;
-                    return props.Setter(__assign(__assign({}, props.Record), (_a = {}, _a[props.Field] = evt.target.checked ? props.Checkboxes.map(function (x) { return x.ID; }) : [], _a)));
-                } }),
-            React.createElement("label", { htmlFor: id.current + "-all", className: "form-check-label" }, "All")),
-        props.Checkboxes.map(function (cb, i) { return (React.createElement("div", { key: i, className: "form-check form-check-inline" },
-            React.createElement("input", { id: id.current + "-" + i, className: "form-check-input", type: "checkbox", checked: props.Record[props.Field].find(function (x) { return cb.ID === x; }) !== undefined, onChange: function (evt) {
-                    var _a;
-                    return props.Setter(__assign(__assign({}, props.Record), (_a = {}, _a[props.Field] = evt.target.checked ? Add(cb) : Remove(cb), _a)));
-                } }),
-            React.createElement("label", { htmlFor: id.current + "-" + i, className: "form-check-label" }, cb.Label))); })));
-}
-exports.default = ArrayCheckBoxes;
+"use strict";
+// ******************************************************************************************************
+//  ArrayCheckBoxes.tsx - Gbtc
+//
+//  Copyright © 2020, Grid Protection Alliance.  All Rights Reserved.
+//
+//  Licensed to the Grid Protection Alliance (GPA) under one or more contributor license agreements. See
+//  the NOTICE file distributed with this work for additional information regarding copyright ownership.
+//  The GPA licenses this file to you under the MIT License (MIT), the "License"; you may not use this
+//  file except in compliance with the License. You may obtain a copy of the License at:
+//
+//      http://opensource.org/licenses/MIT
+//
+//  Unless agreed to in writing, the subject software distributed under the License is distributed on an
+//  "AS-IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. Refer to the
+//  License for the specific language governing permissions and limitations.
+//
+//  Code Modification History:
+//  ----------------------------------------------------------------------------------------------------
+//  01/22/2020 - Billy Ernest
+//       Generated original version of source code.
+//
+// ******************************************************************************************************
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = ArrayCheckBoxes;
+var React = require("react");
+var helper_functions_1 = require("@gpa-gemstone/helper-functions");
+function ArrayCheckBoxes(props) {
+    // Remove an ID from the array
+    var Remove = function (cb) {
+        var a = __spreadArray([], props.Record[props.Field], true);
+        var i = a.indexOf(cb.ID);
+        a.splice(i, 1);
+        return a;
+    };
+    // Add an ID to the array making sure there are no duplicates and array is sorted
+    var Add = function (cb) {
+        var a = __spreadArray([], props.Record[props.Field], true);
+        var i = a.indexOf(cb.ID);
+        if (i < 0)
+            a.push(cb.ID);
+        a.sort();
+        return a;
+    };
+    var id = React.useRef("array-checkbox-" + (0, helper_functions_1.CreateGuid)());
+    return (React.createElement("div", { className: "form-group" },
+        React.createElement("label", null, props.Label == null ? props.Field : props.Label),
+        React.createElement("br", null),
+        React.createElement("div", { className: "form-check form-check-inline" },
+            React.createElement("input", { id: "".concat(id.current, "-all"), className: "form-check-input", type: "checkbox", checked: JSON.stringify(props.Record[props.Field]) === JSON.stringify(props.Checkboxes.map(function (x) { return x.ID; })), onChange: function (evt) {
+                    var _a;
+                    return props.Setter(__assign(__assign({}, props.Record), (_a = {}, _a[props.Field] = evt.target.checked ? props.Checkboxes.map(function (x) { return x.ID; }) : [], _a)));
+                } }),
+            React.createElement("label", { htmlFor: "".concat(id.current, "-all"), className: "form-check-label" }, "All")),
+        props.Checkboxes.map(function (cb, i) { return (React.createElement("div", { key: i, className: "form-check form-check-inline" },
+            React.createElement("input", { id: "".concat(id.current, "-").concat(i), className: "form-check-input", type: "checkbox", checked: props.Record[props.Field].find(function (x) { return cb.ID === x; }) !== undefined, onChange: function (evt) {
+                    var _a;
+                    return props.Setter(__assign(__assign({}, props.Record), (_a = {}, _a[props.Field] = evt.target.checked ? Add(cb) : Remove(cb), _a)));
+                } }),
+            React.createElement("label", { htmlFor: "".concat(id.current, "-").concat(i), className: "form-check-label" }, cb.Label))); })));
+}

package/lib/ArrayMultiSelect.d.ts

@@ -1,13 +1,47 @@
-import * as React from 'react';
-export default function ArrayMultiSelect<T>(props: {
-    Record: T;
-    Field: keyof T;
-    Setter: (record: T) => void;
-    Options: {
-        Value: string;
-        Label: string;
-    }[];
-    Label?: string;
-    Disabled?: boolean;
-    Style?: React.CSSProperties;
-}): JSX.Element;
+import * as React from 'react';
+interface IProps<T> {
+    /**
+        * Record to be used in form
+        * @type {T}
+      */
+    Record: T;
+    /**
+      * Field of the record to be edited
+      * @type {keyof T}
+    */
+    Field: keyof T;
+    /**
+      * Options for the select dropdown
+      * @type {{ Value: string; Label: string }[]}
+    */
+    Options: {
+        Value: string;
+        Label: string;
+    }[];
+    /**
+      * Setter function to update the Record
+      * @param record - Updated Record
+    */
+    Setter: (record: T) => void;
+    /**
+      * Label to display for the form, defaults to the Field prop
+      * @type {string}
+      * @optional
+    */
+    Label?: string;
+    /**
+      * Flag to disable the input field
+      * @type {boolean}
+      * @optional
+    */
+    Disabled?: boolean;
+    /**
+      * CSS styles to apply to the select element
+      * @type {React.CSSProperties}
+      * @optional
+    */
+    Style?: React.CSSProperties;
+    GroupStyle?: React.CSSProperties;
+}
+export default function ArrayMultiSelect<T>(props: IProps<T>): JSX.Element;
+export {};

package/lib/ArrayMultiSelect.js

@@ -1,47 +1,49 @@
-"use strict";
-// ******************************************************************************************************
-//  ArrayMultiSelect.tsx - Gbtc
-//
-//  Copyright © 2020, Grid Protection Alliance.  All Rights Reserved.
-//
-//  Licensed to the Grid Protection Alliance (GPA) under one or more contributor license agreements. See
-//  the NOTICE file distributed with this work for additional information regarding copyright ownership.
-//  The GPA licenses this file to you under the MIT License (MIT), the "License"; you may not use this
-//  file except in compliance with the License. You may obtain a copy of the License at:
-//
-//      http://opensource.org/licenses/MIT
-//
-//  Unless agreed to in writing, the subject software distributed under the License is distributed on an
-//  "AS-IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. Refer to the
-//  License for the specific language governing permissions and limitations.
-//
-//  Code Modification History:
-//  ----------------------------------------------------------------------------------------------------
-//  01/22/2020 - Billy Ernest
-//       Generated original version of source code.
-//
-// ******************************************************************************************************
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var React = require("react");
-function ArrayMultiSelect(props) {
-    var _a;
-    return (React.createElement("div", { className: "form-group" },
-        React.createElement("label", null, props.Label == null ? props.Field : props.Label),
-        React.createElement("select", { multiple: true, className: "form-control", onChange: function (evt) {
-                var _a;
-                var record = __assign(__assign({}, props.Record), (_a = {}, _a[props.Field] = Array.from(evt.target.selectedOptions).map(function (a) { return a.value; }), _a));
-                props.Setter(record);
-            }, value: (_a = props.Record[props.Field]) !== null && _a !== void 0 ? _a : [], disabled: props.Disabled == null ? false : props.Disabled, style: props.Style }, props.Options.map(function (a, i) { return (React.createElement("option", { key: i, value: a.Value }, a.Label)); }))));
-}
-exports.default = ArrayMultiSelect;
+"use strict";
+// ******************************************************************************************************
+//  ArrayMultiSelect.tsx - Gbtc
+//
+//  Copyright © 2020, Grid Protection Alliance.  All Rights Reserved.
+//
+//  Licensed to the Grid Protection Alliance (GPA) under one or more contributor license agreements. See
+//  the NOTICE file distributed with this work for additional information regarding copyright ownership.
+//  The GPA licenses this file to you under the MIT License (MIT), the "License"; you may not use this
+//  file except in compliance with the License. You may obtain a copy of the License at:
+//
+//      http://opensource.org/licenses/MIT
+//
+//  Unless agreed to in writing, the subject software distributed under the License is distributed on an
+//  "AS-IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. Refer to the
+//  License for the specific language governing permissions and limitations.
+//
+//  Code Modification History:
+//  ----------------------------------------------------------------------------------------------------
+//  01/22/2020 - Billy Ernest
+//       Generated original version of source code.
+//
+// ******************************************************************************************************
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = ArrayMultiSelect;
+var React = require("react");
+// Generic component designed for selecting multiple options from a dropdown
+function ArrayMultiSelect(props) {
+    var _a;
+    return (React.createElement("div", { className: "form-group", style: props.GroupStyle },
+        React.createElement("label", null, props.Label == null ? props.Field : props.Label),
+        React.createElement("select", { multiple: true, className: "form-control", onChange: function (evt) {
+                var _a;
+                // On change, update the record's field with the changes.
+                var record = __assign(__assign({}, props.Record), (_a = {}, _a[props.Field] = Array.from(evt.target.selectedOptions).map(function (a) { return a.value; }), _a));
+                props.Setter(record);
+            }, value: (_a = props.Record[props.Field]) !== null && _a !== void 0 ? _a : [], disabled: props.Disabled == null ? false : props.Disabled, style: props.Style }, props.Options.map(function (a, i) { return (React.createElement("option", { key: i, value: a.Value }, a.Label)); }))));
+}

package/lib/CheckBox.d.ts

@@ -1,11 +1,37 @@
-/// <reference types="react" />
-interface IProps<T> {
-    Record: T;
-    Field: keyof T;
-    Setter: (record: T) => void;
-    Label?: string;
-    Disabled?: boolean;
-    Help?: string | JSX.Element;
-}
-export default function CheckBox<T>(props: IProps<T>): JSX.Element;
-export {};
+interface IProps<T> {
+    /**
+      * Record to be used in form
+      * @type {T}
+    */
+    Record: T;
+    /**
+      * Field of the record to be edited
+      * @type {keyof T}
+    */
+    Field: keyof T;
+    /**
+      * Setter function to update the Record
+      * @param record - Updated Record
+    */
+    Setter: (record: T) => void;
+    /**
+      * Label to display for the form, defaults to the Field prop
+      * @type {string}
+      * @optional
+    */
+    Label?: string;
+    /**
+      * Flag to disable the input field
+      * @type {boolean}
+      * @optional
+    */
+    Disabled?: boolean;
+    /**
+      * Help message or element to display
+      * @type {string | JSX.Element}
+      * @optional
+    */
+    Help?: string | JSX.Element;
+}
+export default function CheckBox<T>(props: IProps<T>): JSX.Element;
+export {};

package/lib/CheckBox.js

@@ -1,60 +1,62 @@
-"use strict";
-// ******************************************************************************************************
-//  CheckBox.tsx - Gbtc
-//
-//  Copyright © 2020, Grid Protection Alliance.  All Rights Reserved.
-//
-//  Licensed to the Grid Protection Alliance (GPA) under one or more contributor license agreements. See
-//  the NOTICE file distributed with this work for additional information regarding copyright ownership.
-//  The GPA licenses this file to you under the MIT License (MIT), the "License"; you may not use this
-//  file except in compliance with the License. You may obtain a copy of the License at:
-//
-//      http://opensource.org/licenses/MIT
-//
-//  Unless agreed to in writing, the subject software distributed under the License is distributed on an
-//  "AS-IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. Refer to the
-//  License for the specific language governing permissions and limitations.
-//
-//  Code Modification History:
-//  ----------------------------------------------------------------------------------------------------
-//  01/22/2020 - Billy Ernest
-//       Generated original version of source code.
-//
-// ******************************************************************************************************
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var React = require("react");
-var helper_functions_1 = require("@gpa-gemstone/helper-functions");
-var HelperMessage_1 = require("./HelperMessage");
-function CheckBox(props) {
-    var _a = React.useState(""), guid = _a[0], setGuid = _a[1];
-    var _b = React.useState(false), showHelp = _b[0], setShowHelp = _b[1];
-    var showHelpIcon = props.Help !== undefined;
-    React.useEffect(function () {
-        setGuid((0, helper_functions_1.CreateGuid)());
-    }, []);
-    return (React.createElement("div", { className: "form-check", "data-help": guid },
-        React.createElement("input", { type: "checkbox", className: "form-check-input", style: { zIndex: 1 }, onChange: function (evt) {
-                var record = __assign({}, props.Record);
-                record[props.Field] = evt.target.checked;
-                props.Setter(record);
-            }, value: props.Record[props.Field] ? 'on' : 'off', checked: props.Record[props.Field], disabled: props.Disabled == null ? false : props.Disabled }),
-        React.createElement("label", { className: "form-check-label" }, props.Label == null ? props.Field : props.Label),
-        showHelpIcon ?
-            React.createElement("div", { style: { width: 20, height: 20, borderRadius: '50%', display: 'inline-block', background: '#0D6EFD', marginLeft: 10, textAlign: 'center', fontWeight: 'bold' }, onMouseEnter: function () { return setShowHelp(true); }, onMouseLeave: function () { return setShowHelp(false); } }, "?")
-            : null,
-        showHelpIcon ?
-            React.createElement(HelperMessage_1.default, { Show: showHelp, Target: guid }, props.Help)
-            : null));
-}
-exports.default = CheckBox;
+"use strict";
+// ******************************************************************************************************
+//  CheckBox.tsx - Gbtc
+//
+//  Copyright © 2020, Grid Protection Alliance.  All Rights Reserved.
+//
+//  Licensed to the Grid Protection Alliance (GPA) under one or more contributor license agreements. See
+//  the NOTICE file distributed with this work for additional information regarding copyright ownership.
+//  The GPA licenses this file to you under the MIT License (MIT), the "License"; you may not use this
+//  file except in compliance with the License. You may obtain a copy of the License at:
+//
+//      http://opensource.org/licenses/MIT
+//
+//  Unless agreed to in writing, the subject software distributed under the License is distributed on an
+//  "AS-IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. Refer to the
+//  License for the specific language governing permissions and limitations.
+//
+//  Code Modification History:
+//  ----------------------------------------------------------------------------------------------------
+//  01/22/2020 - Billy Ernest
+//       Generated original version of source code.
+//
+// ******************************************************************************************************
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = CheckBox;
+var React = require("react");
+var helper_functions_1 = require("@gpa-gemstone/helper-functions");
+var HelperMessage_1 = require("./HelperMessage");
+function CheckBox(props) {
+    var _a = React.useState(""), guid = _a[0], setGuid = _a[1];
+    var _b = React.useState(false), showHelp = _b[0], setShowHelp = _b[1];
+    // Determines whether to show help icon and label.
+    var showHelpIcon = props.Help !== undefined;
+    // Runs once, setting a unique GUID for each checkbox instance.
+    React.useEffect(function () {
+        setGuid((0, helper_functions_1.CreateGuid)());
+    }, []);
+    return (React.createElement("div", { className: "form-check", "data-help": guid },
+        React.createElement("input", { type: "checkbox", className: "form-check-input", style: { zIndex: 1 }, onChange: function (evt) {
+                var record = __assign({}, props.Record);
+                record[props.Field] = evt.target.checked;
+                props.Setter(record);
+            }, value: props.Record[props.Field] ? 'on' : 'off', checked: props.Record[props.Field], disabled: props.Disabled == null ? false : props.Disabled }),
+        React.createElement("label", { className: "form-check-label" }, props.Label == null ? props.Field : props.Label),
+        showHelpIcon ?
+            React.createElement("div", { style: { width: 20, height: 20, borderRadius: '50%', display: 'inline-block', background: '#0D6EFD', marginLeft: 10, textAlign: 'center', fontWeight: 'bold' }, onMouseEnter: function () { return setShowHelp(true); }, onMouseLeave: function () { return setShowHelp(false); } }, "?")
+            : null,
+        showHelpIcon ?
+            React.createElement(HelperMessage_1.default, { Show: showHelp, Target: guid }, props.Help)
+            : null));
+}

package/lib/ColorPicker.d.ts

@@ -1,15 +1,59 @@
-import * as React from 'react';
-import { ColorResult } from 'react-color';
-interface IProps<T> {
-    Record: T;
-    Field: keyof T;
-    Setter: (record: T, color: ColorResult) => void;
-    Label: string;
-    Disabled?: boolean;
-    Feedback?: string;
-    Style?: React.CSSProperties;
-    Colors?: string[];
-    Triangle?: ('hide' | 'top');
-}
-export default function ColorPicker<T>(props: IProps<T>): JSX.Element;
-export {};
+import * as React from 'react';
+import { ColorResult } from 'react-color';
+interface IProps<T> {
+    /**
+      * Record to be used in the form
+      * @type {T}
+    */
+    Record: T;
+    /**
+      * Field of the record to be edited
+      * @type {keyof T}
+    */
+    Field: keyof T;
+    /**
+      * Setter function to update the Record
+      * @param record - Updated record of type T
+      * @param color - Color result from the picker
+      * @returns {void}
+    */
+    Setter: (record: T, color: ColorResult) => void;
+    /**
+      * Label to display for the form, defaults to the Field prop
+      * @type {string}
+      * @optional
+    */
+    Label: string;
+    /**
+      * Flag to disable the input field
+      * @type {boolean}
+      * @optional
+    */
+    Disabled?: boolean;
+    /**
+      * Feedback message to show when input is invalid
+      * @type {string}
+      * @optional
+    */
+    Feedback?: string;
+    /**
+      * CSS styles to apply to the button
+      * @type {React.CSSProperties}
+      * @optional
+    */
+    Style?: React.CSSProperties;
+    /**
+      * List of colors to be used in the color picker
+      * @type {string[]}
+      * @optional
+    */
+    Colors?: string[];
+    /**
+      * Position of the triangle pointer in the color picker
+      * @type {'hide' | 'top'}
+      * @optional
+    */
+    Triangle?: 'hide' | 'top';
+}
+export default function ColorPicker<T>(props: IProps<T>): JSX.Element;
+export {};