@flightctl/ui-components 1.0.2 → 1.1.0-rc4

package/dist/ui-components/src/components/form/CheckboxField.js

@@ -0,0 +1,46 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CheckboxFieldGroupValidation = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const formik_1 = require("formik");
+const react_core_1 = require("@patternfly/react-core");
+const FieldHelperText_1 = tslib_1.__importStar(require("./FieldHelperText"));
+// Checkboxes that are validated as a group rather than individually
+const CheckboxFieldGroupValidation = ({ onChangeCustom, ...props }) => {
+    const [{ value, ...rest }, , { setValue, setTouched }] = (0, formik_1.useField)({
+        name: props.name,
+    });
+    const onChange = async (_, value) => {
+        await setValue(value);
+        if (onChangeCustom) {
+            onChangeCustom(value);
+        }
+        await setTouched(true);
+    };
+    const fieldId = `checkboxfield-${props.name}`;
+    return (React.createElement(react_core_1.FormGroup, { id: `form-control__${fieldId}`, fieldId: fieldId },
+        React.createElement(react_core_1.Checkbox, { ...rest, ...props, isChecked: value, id: fieldId, onChange: onChange, body: value && props.body })));
+};
+exports.CheckboxFieldGroupValidation = CheckboxFieldGroupValidation;
+const CheckboxField = ({ onChangeCustom, helperText, children, ...props }) => {
+    const [{ value, ...rest }, meta, { setValue, setTouched }] = (0, formik_1.useField)({
+        name: props.name,
+    });
+    const onChange = async (_, value) => {
+        await setValue(value);
+        if (onChangeCustom) {
+            onChangeCustom(value);
+        }
+        await setTouched(true);
+    };
+    const fieldId = `checkboxfield-${props.name}`;
+    return (React.createElement(React.Fragment, null,
+        React.createElement(react_core_1.FormGroup, { id: `form-control__${fieldId}`, fieldId: fieldId },
+            React.createElement(react_core_1.Checkbox, { ...rest, ...props, isChecked: value, id: fieldId, onChange: onChange, body: value && props.body }),
+            React.createElement(FieldHelperText_1.DefaultHelperText, { helperText: helperText }),
+            React.createElement(FieldHelperText_1.default, { meta: meta })),
+        value && children));
+};
+exports.default = CheckboxField;
+//# sourceMappingURL=CheckboxField.js.map

package/dist/ui-components/src/components/form/CheckboxField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckboxField.js","sourceRoot":"","sources":["../../../../../src/components/form/CheckboxField.tsx"],"names":[],"mappings":";;;;AAAA,qDAA+B;AAC/B,mCAAkC;AAClC,uDAA4E;AAC5E,6EAAuE;AAWvE,oEAAoE;AAC7D,MAAM,4BAA4B,GAAG,CAAC,EAAE,cAAc,EAAE,GAAG,KAAK,EAAqB,EAAE,EAAE;IAC9F,MAAM,CAAC,EAAE,KAAK,EAAE,GAAG,IAAI,EAAE,EAAE,AAAD,EAAG,EAAE,QAAQ,EAAE,UAAU,EAAE,CAAC,GAAG,IAAA,iBAAQ,EAAU;QACzE,IAAI,EAAE,KAAK,CAAC,IAAI;KACjB,CAAC,CAAC;IAEH,MAAM,QAAQ,GAA8B,KAAK,EAAE,CAAC,EAAE,KAAK,EAAE,EAAE;QAC7D,MAAM,QAAQ,CAAC,KAAK,CAAC,CAAC;QACtB,IAAI,cAAc,EAAE,CAAC;YACnB,cAAc,CAAC,KAAK,CAAC,CAAC;QACxB,CAAC;QACD,MAAM,UAAU,CAAC,IAAI,CAAC,CAAC;IACzB,CAAC,CAAC;IAEF,MAAM,OAAO,GAAG,iBAAiB,KAAK,CAAC,IAAI,EAAE,CAAC;IAC9C,OAAO,CACL,oBAAC,sBAAS,IAAC,EAAE,EAAE,iBAAiB,OAAO,EAAE,EAAE,OAAO,EAAE,OAAO;QACzD,oBAAC,qBAAQ,OAAK,IAAI,KAAM,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK,IAAI,KAAK,CAAC,IAAI,GAAI,CACrG,CACb,CAAC;AACJ,CAAC,CAAC;AAnBW,QAAA,4BAA4B,gCAmBvC;AAEF,MAAM,aAAa,GAAG,CAAC,EAAE,cAAc,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAsB,EAAE,EAAE;IAC/F,MAAM,CAAC,EAAE,KAAK,EAAE,GAAG,IAAI,EAAE,EAAE,IAAI,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,CAAC,GAAG,IAAA,iBAAQ,EAAU;QAC7E,IAAI,EAAE,KAAK,CAAC,IAAI;KACjB,CAAC,CAAC;IAEH,MAAM,QAAQ,GAA8B,KAAK,EAAE,CAAC,EAAE,KAAK,EAAE,EAAE;QAC7D,MAAM,QAAQ,CAAC,KAAK,CAAC,CAAC;QACtB,IAAI,cAAc,EAAE,CAAC;YACnB,cAAc,CAAC,KAAK,CAAC,CAAC;QACxB,CAAC;QACD,MAAM,UAAU,CAAC,IAAI,CAAC,CAAC;IACzB,CAAC,CAAC;IAEF,MAAM,OAAO,GAAG,iBAAiB,KAAK,CAAC,IAAI,EAAE,CAAC;IAC9C,OAAO,CACL;QACE,oBAAC,sBAAS,IAAC,EAAE,EAAE,iBAAiB,OAAO,EAAE,EAAE,OAAO,EAAE,OAAO;YACzD,oBAAC,qBAAQ,OAAK,IAAI,KAAM,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK,IAAI,KAAK,CAAC,IAAI,GAAI;YAE/G,oBAAC,mCAAiB,IAAC,UAAU,EAAE,UAAU,GAAI;YAC7C,oBAAC,yBAAe,IAAC,IAAI,EAAE,IAAI,GAAI,CACrB;QACX,KAAK,IAAI,QAAQ,CACjB,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,aAAa,CAAC"}

package/dist/ui-components/src/components/form/ExpandableFormSection.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import { ExpandableSectionProps } from '@patternfly/react-core';
+declare const ExpandableFormSection: ({ fieldName, title, description, children, }: {
+    fieldName: string;
+    title: string;
+    description?: string;
+    children: ExpandableSectionProps["children"];
+}) => React.JSX.Element;
+export default ExpandableFormSection;
+//# sourceMappingURL=ExpandableFormSection.d.ts.map

package/dist/ui-components/src/components/form/ExpandableFormSection.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExpandableFormSection.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/ExpandableFormSection.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAqB,sBAAsB,EAAoB,MAAM,wBAAwB,CAAC;AAOrG,QAAA,MAAM,qBAAqB,GAAI,8CAK5B;IACD,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,EAAE,sBAAsB,CAAC,UAAU,CAAC,CAAC;CAC9C,sBA0CA,CAAC;AAEF,eAAe,qBAAqB,CAAC"}

package/dist/ui-components/src/components/form/ExpandableFormSection.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const react_core_1 = require("@patternfly/react-core");
+const exclamation_circle_icon_1 = require("@patternfly/react-icons/dist/js/icons/exclamation-circle-icon");
+const formik_1 = require("formik");
+const useTranslation_1 = require("../../hooks/useTranslation");
+const WithTooltip_1 = tslib_1.__importDefault(require("../common/WithTooltip"));
+const ExpandableFormSection = ({ fieldName, title, description, children, }) => {
+    const { t } = (0, useTranslation_1.useTranslation)();
+    const [isExpanded, setIsExpanded] = React.useState(true);
+    const { setFieldTouched } = (0, formik_1.useFormikContext)();
+    const [, { error }, { setTouched }] = (0, formik_1.useField)(fieldName);
+    return (React.createElement(react_core_1.ExpandableSection, { toggleContent: React.createElement(react_core_1.Split, { hasGutter: true },
+            React.createElement(react_core_1.SplitItem, null, title),
+            !isExpanded && !!description && (React.createElement(react_core_1.SplitItem, { style: {
+                    color: 'var(--pf-t--global--text--color--regular)',
+                } }, description)),
+            !isExpanded && error && (React.createElement(react_core_1.SplitItem, null,
+                React.createElement(WithTooltip_1.default, { showTooltip: true, content: t('Invalid {{ itemType }}', { itemType: title }) },
+                    React.createElement(exclamation_circle_icon_1.ExclamationCircleIcon, { style: { color: 'var(--pf-t--global--icon--color--status--danger--default)' } }))))), isIndented: true, isExpanded: isExpanded, onToggle: (_, expanded) => {
+            setTouched(true);
+            Object.keys(error || {}).forEach((key) => {
+                setFieldTouched(`${fieldName}.${key}`, true);
+            });
+            setIsExpanded(expanded);
+        } }, children));
+};
+exports.default = ExpandableFormSection;
+//# sourceMappingURL=ExpandableFormSection.js.map

package/dist/ui-components/src/components/form/ExpandableFormSection.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExpandableFormSection.js","sourceRoot":"","sources":["../../../../../src/components/form/ExpandableFormSection.tsx"],"names":[],"mappings":";;;AAAA,qDAA+B;AAC/B,uDAAqG;AACrG,2GAAsG;AACtG,mCAAoD;AAEpD,+DAA4D;AAC5D,gFAAgD;AAEhD,MAAM,qBAAqB,GAAG,CAAC,EAC7B,SAAS,EACT,KAAK,EACL,WAAW,EACX,QAAQ,GAMT,EAAE,EAAE;IACH,MAAM,EAAE,CAAC,EAAE,GAAG,IAAA,+BAAc,GAAE,CAAC;IAC/B,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;IACzD,MAAM,EAAE,eAAe,EAAE,GAAG,IAAA,yBAAgB,GAAE,CAAC;IAC/C,MAAM,CAAC,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,UAAU,EAAE,CAAC,GAAG,IAAA,iBAAQ,EAAC,SAAS,CAAC,CAAC;IAE1D,OAAO,CACL,oBAAC,8BAAiB,IAChB,aAAa,EACX,oBAAC,kBAAK,IAAC,SAAS;YACd,oBAAC,sBAAS,QAAE,KAAK,CAAa;YAC7B,CAAC,UAAU,IAAI,CAAC,CAAC,WAAW,IAAI,CAC/B,oBAAC,sBAAS,IACR,KAAK,EAAE;oBACL,KAAK,EAAE,2CAA2C;iBACnD,IAEA,WAAW,CACF,CACb;YACA,CAAC,UAAU,IAAI,KAAK,IAAI,CACvB,oBAAC,sBAAS;gBACR,oBAAC,qBAAW,IAAC,WAAW,QAAC,OAAO,EAAE,CAAC,CAAC,wBAAwB,EAAE,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAC;oBAChF,oBAAC,+CAAqB,IAAC,KAAK,EAAE,EAAE,KAAK,EAAE,2DAA2D,EAAE,GAAI,CAC5F,CACJ,CACb,CACK,EAEV,UAAU,QACV,UAAU,EAAE,UAAU,EACtB,QAAQ,EAAE,CAAC,CAAC,EAAE,QAAQ,EAAE,EAAE;YACxB,UAAU,CAAC,IAAI,CAAC,CAAC;YACjB,MAAM,CAAC,IAAI,CAAE,KAA2B,IAAI,EAAE,CAAC,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,EAAE;gBAC9D,eAAe,CAAC,GAAG,SAAS,IAAI,GAAG,EAAE,EAAE,IAAI,CAAC,CAAC;YAC/C,CAAC,CAAC,CAAC;YACH,aAAa,CAAC,QAAQ,CAAC,CAAC;QAC1B,CAAC,IAEA,QAAQ,CACS,CACrB,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,qBAAqB,CAAC"}

package/dist/ui-components/src/components/form/FieldHelperText.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FieldHelperText.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/FieldHelperText.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,cAAc,EAAE,MAAM,QAAQ,CAAC;AAKxC,KAAK,oBAAoB,GAAG;IAC1B,IAAI,CAAC,EAAE,cAAc,CAAC,OAAO,CAAC,CAAC;IAC/B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACzB,CAAC;AAEF,KAAK,sBAAsB,GAAG;IAC5B,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC;CAC7B,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAAI,gBAAgB,sBAAsB,6BAQvE,CAAC;AAEF,QAAA,MAAM,eAAe,GAAI,gCAAuC,oBAAoB,6BAgBnF,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/dist/ui-components/src/components/form/FieldHelperText.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FieldHelperText.js","sourceRoot":"","sources":["../../../../../src/components/form/FieldHelperText.tsx"],"names":[],"mappings":";;;;AAAA,qDAA+B;AAG/B,uDAAoF;AACpF,2GAAsG;AAY/F,MAAM,iBAAiB,GAAG,CAAC,EAAE,UAAU,EAA0B,EAAE,EAAE;IAC1E,OAAO,UAAU,CAAC,CAAC,CAAC,CAClB,oBAAC,2BAAc;QACb,oBAAC,uBAAU;YACT,oBAAC,2BAAc,IAAC,OAAO,EAAC,SAAS,IAAE,UAAU,CAAkB,CACpD,CACE,CAClB,CAAC,CAAC,CAAC,IAAI,CAAC;AACX,CAAC,CAAC;AARW,QAAA,iBAAiB,qBAQ5B;AAEF,MAAM,eAAe,GAAG,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,aAAa,GAAG,IAAI,EAAwB,EAAE,EAAE;IACtF,IAAI,OAAwB,CAAC;IAC7B,IAAI,IAAI,EAAE,CAAC;QACT,OAAO,GAAG,CAAC,aAAa,IAAI,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC;IACpE,CAAC;SAAM,CAAC;QACN,OAAO,GAAG,KAAK,CAAC;IAClB,CAAC;IACD,OAAO,OAAO,CAAC,CAAC,CAAC,CACf,oBAAC,2BAAc;QACb,oBAAC,uBAAU;YACT,oBAAC,2BAAc,IAAC,IAAI,EAAE,oBAAC,+CAAqB,OAAG,EAAE,OAAO,EAAC,OAAO,IAC7D,OAAO,CACO,CACN,CACE,CAClB,CAAC,CAAC,CAAC,IAAI,CAAC;AACX,CAAC,CAAC;AAEF,kBAAe,eAAe,CAAC"}

package/dist/ui-components/src/components/form/FilterSelect.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterSelect.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/FilterSelect.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAc/B,OAAO,oBAAoB,CAAC;AAE5B,KAAK,sBAAsB,GAAG,KAAK,CAAC,iBAAiB,CAAC;IACpD,KAAK,EAAE,MAAM,CAAC;CACf,CAAC,CAAC;AAEH,eAAO,MAAM,iBAAiB,GAAI,qBAAqB,sBAAsB,sBAI5E,CAAC;AAEF,KAAK,iBAAiB,GAAG,KAAK,CAAC,iBAAiB,CAAC;IAC/C,WAAW,EAAE,MAAM,CAAC;IACpB,eAAe,EAAE,MAAM,CAAC;IACxB,gBAAgB,EAAE,OAAO,CAAC;CAC3B,CAAC,CAAC;AAEH,QAAA,MAAM,YAAY,GAAI,8DAA8D,iBAAiB,sBAyDpG,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/dist/ui-components/src/components/form/FilterSelect.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterSelect.js","sourceRoot":"","sources":["../../../../../src/components/form/FilterSelect.tsx"],"names":[],"mappings":";;;;AAAA,qDAA+B;AAC/B,uDAUgC;AAChC,mFAA+E;AAE/E,8BAA4B;AAMrB,MAAM,iBAAiB,GAAG,CAAC,EAAE,KAAK,EAAE,QAAQ,EAA0B,EAAE,EAAE,CAAC,CAChF,oBAAC,wBAAW,IAAC,KAAK,EAAE,KAAK;IACvB,6BAAK,SAAS,EAAC,2BAA2B,IAAE,QAAQ,CAAO,CAC/C,CACf,CAAC;AAJW,QAAA,iBAAiB,qBAI5B;AAQF,MAAM,YAAY,GAAG,CAAC,EAAE,WAAW,EAAE,eAAe,EAAE,gBAAgB,EAAE,QAAQ,EAAqB,EAAE,EAAE;IACvG,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC1D,MAAM,YAAY,GAAG,KAAK,CAAC,MAAM,EAAoB,CAAC;IACtD,MAAM,YAAY,GAAG,GAAG,EAAE;;QACxB,IAAI,CAAC,UAAU,EAAE,CAAC;YAChB,MAAA,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,OAAO,0CAAE,KAAK,EAAE,CAAC;QACjC,CAAC;QACD,aAAa,CAAC,CAAC,UAAU,CAAC,CAAC;IAC7B,CAAC,CAAC;IACF,OAAO,CACL,oBAAC,mBAAM,kBACO,WAAW,EACvB,IAAI,EAAC,MAAM,EACX,yBAAyB,QACzB,0BAA0B,QAC1B,MAAM,EAAE,CAAC,SAAS,EAAE,EAAE,CAAC,CACrB,oBAAC,uBAAU,IACT,GAAG,EAAE,SAAS,gBACF,WAAW,EACvB,OAAO,EAAE,YAAY,EACrB,UAAU,EAAE,UAAU,EACtB,WAAW,QACX,IAAI,EACF,oBAAC,iBAAI;gBACH,oBAAC,wBAAU,OAAG,CACT;YAGT,oBAAC,iBAAI,IAAC,cAAc,EAAE,EAAE,OAAO,EAAE,4BAA4B,EAAE;gBAC7D,oBAAC,qBAAQ;oBACP,kCAAO,WAAW,CAAQ,CACjB;gBACX,oBAAC,qBAAQ,IAAC,SAAS,EAAC,qBAAqB;oBACtC,CAAC,CAAC,eAAe,IAAI,CACpB,oBAAC,oCAAuB,IAAC,OAAO,EAAE,YAAY;wBAC5C,oBAAC,kBAAK,IAAC,MAAM,QAAC,SAAS,EAAC,4BAA4B,IACjD,eAAe,CACV,CACgB,CAC3B;oBACA,gBAAgB,IAAI,CACnB,8BAAM,SAAS,EAAC,6BAA6B;wBAC3C,oBAAC,oCAAuB,IAAC,OAAO,EAAE,YAAY;4BAC5C,oBAAC,oBAAO,IAAC,IAAI,EAAC,IAAI,GAAG,CACG,CACrB,CACR,CACQ,CACN,CACI,CACd,EACD,MAAM,EAAE,UAAU,EAClB,YAAY,EAAE,aAAa,IAE1B,QAAQ,CACF,CACV,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,YAAY,CAAC"}

package/dist/ui-components/src/components/form/FlightCtlForm.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+declare const FlightCtlForm: ({ className, children }: React.PropsWithChildren<{
+    className?: string;
+}>) => React.JSX.Element;
+export default FlightCtlForm;
+//# sourceMappingURL=FlightCtlForm.d.ts.map

package/dist/ui-components/src/components/form/FlightCtlForm.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FlightCtlForm.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/FlightCtlForm.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,QAAA,MAAM,aAAa,GAAI,yBAAyB,KAAK,CAAC,iBAAiB,CAAC;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC,sBAW9F,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/dist/ui-components/src/components/form/FlightCtlForm.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+// eslint-disable-next-line no-restricted-imports
+const react_core_1 = require("@patternfly/react-core");
+const FlightCtlForm = ({ className, children }) => {
+    return (React.createElement(react_core_1.Form, { className: className, onSubmit: (ev) => {
+            ev.preventDefault();
+        } }, children));
+};
+exports.default = FlightCtlForm;
+//# sourceMappingURL=FlightCtlForm.js.map

package/dist/ui-components/src/components/form/FlightCtlForm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FlightCtlForm.js","sourceRoot":"","sources":["../../../../../src/components/form/FlightCtlForm.tsx"],"names":[],"mappings":";;;AAAA,qDAA+B;AAC/B,iDAAiD;AACjD,uDAA8C;AAE9C,MAAM,aAAa,GAAG,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAmD,EAAE,EAAE;IACjG,OAAO,CACL,oBAAC,iBAAI,IACH,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,CAAC,EAAE,EAAE,EAAE;YACf,EAAE,CAAC,cAAc,EAAE,CAAC;QACtB,CAAC,IAEA,QAAQ,CACJ,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,aAAa,CAAC"}

package/dist/ui-components/src/components/form/FormSelect.d.ts

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import './FormSelect.css';
+export type SelectItem = {
+    label: string;
+    description?: React.ReactNode;
+    isDisabled?: boolean;
+};
+type FormSelectProps = {
+    name: string;
+    items: Record<string, string | SelectItem>;
+    helperText?: React.ReactNode;
+    children?: React.ReactNode;
+    placeholderText?: string;
+    withStatusIcon?: boolean;
+};
+declare const FormSelectWrapper: ({ name, items, isDisabled, ...rest }: FormSelectProps & {
+    isDisabled?: boolean;
+}) => string | React.JSX.Element;
+export default FormSelectWrapper;
+//# sourceMappingURL=FormSelect.d.ts.map

package/dist/ui-components/src/components/form/FormSelect.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormSelect.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/FormSelect.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,OAAO,kBAAkB,CAAC;AAE1B,MAAM,MAAM,UAAU,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAAC,UAAU,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC;AAEhG,KAAK,eAAe,GAAG;IACrB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,UAAU,CAAC,CAAC;IAC3C,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B,CAAC;AAyGF,QAAA,MAAM,iBAAiB,GAAI,sCAAsC,eAAe,GAAG;IAAE,UAAU,CAAC,EAAE,OAAO,CAAA;CAAE,+BAS1G,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/dist/ui-components/src/components/form/FormSelect.js

@@ -0,0 +1,77 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const react_core_1 = require("@patternfly/react-core");
+const formik_1 = require("formik");
+const FieldHelperText_1 = tslib_1.__importStar(require("./FieldHelperText"));
+require("./FormSelect.css");
+const isItemObject = (item) => typeof item === 'object';
+const getItemLabel = (item) => (isItemObject(item) ? item.label : item);
+const FormSelect = ({ name, items, withStatusIcon, helperText, placeholderText, children, }) => {
+    const [isOpen, setIsOpen] = React.useState(false);
+    const [field, meta, { setValue, setTouched }] = (0, formik_1.useField)({
+        name: name,
+    });
+    const fieldId = `selectfield-${name}`;
+    const itemKeys = Object.keys(items);
+    React.useEffect(() => {
+        const hasOneItem = itemKeys.length === 1;
+        if (hasOneItem && !field.value) {
+            setValue(itemKeys[0], true);
+        }
+    }, [itemKeys, field.value, setValue]);
+    const selectedText = field.value ? getItemLabel(items[field.value]) : placeholderText;
+    let statusToggle;
+    if (withStatusIcon) {
+        if (field.value) {
+            statusToggle = react_core_1.MenuToggleStatus.success;
+        }
+        else if (meta.touched) {
+            statusToggle = react_core_1.MenuToggleStatus.danger;
+        }
+        else {
+            statusToggle = react_core_1.MenuToggleStatus.warning;
+        }
+    }
+    return (React.createElement(react_core_1.FormGroup, { id: `form-control__${fieldId}`, fieldId: fieldId },
+        React.createElement(react_core_1.Select, { id: fieldId, selected: field.value, onSelect: (_, value) => {
+                setValue(value, true);
+                setIsOpen(false);
+            }, shouldFocusToggleOnSelect: true, shouldFocusFirstItemOnOpen: true, toggle: (toggleRef) => (React.createElement(react_core_1.MenuToggle, { status: statusToggle, ref: toggleRef, onClick: () => {
+                    if (isOpen && !meta.touched) {
+                        setTouched(true);
+                    }
+                    setIsOpen(!isOpen);
+                }, isExpanded: isOpen, className: "fctl-form-select__toggle", id: `${fieldId}-menu` }, selectedText)), isOpen: isOpen, onOpenChange: (open) => {
+                if (!open && !meta.touched) {
+                    setTouched(true);
+                }
+                setIsOpen(open);
+            } },
+            !!itemKeys.length && (React.createElement(react_core_1.SelectList, { className: "fctl-form-select__menu" }, itemKeys.map((key) => {
+                const item = items[key];
+                let desc;
+                let isDisabled = false;
+                if (isItemObject(item)) {
+                    desc = item.description || '';
+                    isDisabled = Boolean(item.isDisabled);
+                }
+                return (React.createElement(react_core_1.SelectOption, { key: key, value: key, description: desc, isDisabled: isDisabled }, getItemLabel(item)));
+            }))),
+            children),
+        React.createElement(FieldHelperText_1.DefaultHelperText, { helperText: helperText }),
+        React.createElement(FieldHelperText_1.default, { meta: meta })));
+};
+const FormSelectWrapper = ({ name, items, isDisabled, ...rest }) => {
+    const [{ value }] = (0, formik_1.useField)({
+        name: name,
+    });
+    if (isDisabled) {
+        const selectedText = value ? getItemLabel(items[value]) : rest.placeholderText;
+        return selectedText || value || '-';
+    }
+    return React.createElement(FormSelect, { name: name, items: items, ...rest });
+};
+exports.default = FormSelectWrapper;
+//# sourceMappingURL=FormSelect.js.map

package/dist/ui-components/src/components/form/FormSelect.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormSelect.js","sourceRoot":"","sources":["../../../../../src/components/form/FormSelect.tsx"],"names":[],"mappings":"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"}

package/dist/ui-components/src/components/form/FormSelectTypeahead.d.ts

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import './FormSelect.css';
+type SelectItem = {
+    label: string;
+    description?: string;
+};
+type FormSelectProps = {
+    name: string;
+    items: Record<string, string | SelectItem>;
+    defaultId?: string;
+    helperText?: React.ReactNode;
+    placeholderText?: string;
+    isValidTypedItem?: (value: string) => boolean;
+    transformTypedItem?: (value: string) => string;
+};
+declare const FormSelectTypeaheadWrapper: ({ name, items, isDisabled, ...rest }: FormSelectProps & {
+    isDisabled?: boolean;
+}) => string | React.JSX.Element;
+export default FormSelectTypeaheadWrapper;
+//# sourceMappingURL=FormSelectTypeahead.d.ts.map

package/dist/ui-components/src/components/form/FormSelectTypeahead.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormSelectTypeahead.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/FormSelectTypeahead.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAc/B,OAAO,kBAAkB,CAAC;AAE1B,KAAK,UAAU,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,WAAW,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAE1D,KAAK,eAAe,GAAG;IACrB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,UAAU,CAAC,CAAC;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC;IAC9C,kBAAkB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;CAChD,CAAC;AA2PF,QAAA,MAAM,0BAA0B,GAAI,sCAKjC,eAAe,GAAG;IAAE,UAAU,CAAC,EAAE,OAAO,CAAA;CAAE,+BAc5C,CAAC;AAEF,eAAe,0BAA0B,CAAC"}

package/dist/ui-components/src/components/form/FormSelectTypeahead.js

@@ -0,0 +1,202 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const react_core_1 = require("@patternfly/react-core");
+const formik_1 = require("formik");
+const FieldHelperText_1 = tslib_1.__importStar(require("./FieldHelperText"));
+require("./FormSelect.css");
+const isItemObject = (item) => typeof item === 'object';
+const getItemLabel = (item) => (isItemObject(item) ? item.label : item);
+const FormSelectTypeahead = ({ name, items, defaultId, helperText, placeholderText, isValidTypedItem, transformTypedItem, children, }) => {
+    const [field, meta, { setValue, setTouched }] = (0, formik_1.useField)({
+        name: name,
+    });
+    const [isOpen, setIsOpen] = React.useState(false);
+    const [inputValue, setInputValue] = React.useState(undefined);
+    const [focusedItemIndex, setFocusedItemIndex] = React.useState(null);
+    const [activeItemId, setActiveItemId] = React.useState(null);
+    const textInputRef = React.useRef();
+    const currentValue = field.value;
+    const fieldId = `selectfield-${name}`;
+    const itemKeys = Object.keys(items);
+    let defaultValue = '';
+    if (defaultId) {
+        const defaultItem = items[defaultId];
+        defaultValue = isItemObject(defaultItem) ? defaultItem.description || '' : defaultItem;
+    }
+    React.useEffect(() => {
+        const hasOneItem = itemKeys.length === 1;
+        if (hasOneItem && !currentValue) {
+            setValue(itemKeys[0], true);
+        }
+    }, [itemKeys, currentValue, setValue]);
+    let selectedText = defaultValue;
+    if (inputValue) {
+        selectedText = inputValue;
+    }
+    else if (currentValue) {
+        selectedText = getItemLabel(items[currentValue]) || currentValue;
+    }
+    const itemKeysFiltered = itemKeys.filter((key) => {
+        if (!inputValue) {
+            return true;
+        }
+        return getItemLabel(items[key]).toLowerCase().includes(inputValue.toLowerCase());
+    });
+    const setActiveAndFocusedItem = (itemIndex) => {
+        setFocusedItemIndex(itemIndex);
+        const focusedItem = itemKeysFiltered[itemIndex];
+        setActiveItemId(`${fieldId}-${focusedItem}`);
+    };
+    const resetActiveAndFocusedItem = () => {
+        setFocusedItemIndex(null);
+        setActiveItemId(null);
+    };
+    const handleMenuArrowKeys = (key) => {
+        let indexToFocus = 0;
+        if (!isOpen) {
+            setIsOpen(true);
+        }
+        if (itemKeysFiltered.length === 0) {
+            return;
+        }
+        if (key === 'ArrowUp') {
+            // When no index is set or at the first index, focus to the last, otherwise decrement focus index
+            if (focusedItemIndex === null || focusedItemIndex === 0) {
+                indexToFocus = itemKeysFiltered.length - 1;
+            }
+            else {
+                indexToFocus = focusedItemIndex - 1;
+            }
+        }
+        if (key === 'ArrowDown') {
+            // When no index is set or at the last index, focus to the first, otherwise increment focus index
+            if (focusedItemIndex === null || focusedItemIndex === itemKeysFiltered.length - 1) {
+                indexToFocus = 0;
+            }
+            else {
+                indexToFocus = focusedItemIndex + 1;
+            }
+        }
+        setActiveAndFocusedItem(indexToFocus);
+    };
+    const onInputKeyDown = (event) => {
+        const focusedItem = focusedItemIndex !== null ? itemKeysFiltered[focusedItemIndex] : null;
+        switch (event.key) {
+            case 'Enter':
+                if (isOpen && focusedItem) {
+                    event.preventDefault();
+                    setTouched(true);
+                    setValue(focusedItem, true);
+                    setInputValue(undefined);
+                    setIsOpen(false);
+                    resetActiveAndFocusedItem();
+                }
+                else if (!isOpen) {
+                    setIsOpen(true);
+                }
+                break;
+            case 'ArrowUp':
+            case 'ArrowDown':
+                event.preventDefault();
+                handleMenuArrowKeys(event.key);
+                break;
+            case 'Escape':
+                if (isOpen) {
+                    setIsOpen(false);
+                    resetActiveAndFocusedItem();
+                }
+                break;
+        }
+    };
+    return (React.createElement(react_core_1.FormGroup, { id: `form-control__${fieldId}`, fieldId: fieldId },
+        React.createElement(react_core_1.Select, { id: fieldId, className: "fctl-form-select", selected: currentValue || defaultId, onSelect: (_, value) => {
+                setTouched(true);
+                setValue(value, true);
+                setInputValue(undefined);
+                setIsOpen(false);
+                resetActiveAndFocusedItem();
+            }, toggle: (toggleRef) => (React.createElement(react_core_1.MenuToggle, { ref: toggleRef, onClick: () => {
+                    var _a;
+                    if (isOpen && !meta.touched) {
+                        setTouched(true);
+                    }
+                    setIsOpen(!isOpen);
+                    (_a = textInputRef === null || textInputRef === void 0 ? void 0 : textInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+                }, isExpanded: isOpen, className: "fctl-form-select__toggle", id: `${fieldId}-menu`, variant: "typeahead" },
+                React.createElement(react_core_1.TextInputGroup, { isPlain: true },
+                    React.createElement(react_core_1.TextInputGroupMain, { value: selectedText, onClick: () => {
+                            var _a;
+                            if (isOpen && !meta.touched) {
+                                setTouched(true);
+                            }
+                            setIsOpen(!isOpen);
+                            (_a = textInputRef === null || textInputRef === void 0 ? void 0 : textInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+                        }, onChange: (_, value) => {
+                            setInputValue(value || undefined);
+                            resetActiveAndFocusedItem();
+                            if (!isOpen) {
+                                setIsOpen(true);
+                            }
+                        }, onBlur: () => {
+                            if (!inputValue) {
+                                return;
+                            }
+                            // If there is no "isValidTypedItem", it means selection must always be done by selecting from the list
+                            const skipSetValue = isValidTypedItem ? !isValidTypedItem(inputValue) : true;
+                            if (skipSetValue) {
+                                if (itemKeysFiltered.length === 0) {
+                                    setInputValue(undefined);
+                                    setIsOpen(false);
+                                }
+                                else {
+                                    // The typed text has no matches from the list. We clear the value to use the default/empty
+                                    setValue('');
+                                }
+                                return;
+                            }
+                            const transformedValue = (transformTypedItem === null || transformTypedItem === void 0 ? void 0 : transformTypedItem(inputValue)) || inputValue;
+                            setInputValue(undefined);
+                            void setValue(transformedValue);
+                            setIsOpen(false);
+                        }, id: `create-typeahead-select-input-${name}`, autoComplete: "off", role: "combobox", isExpanded: isOpen, "aria-controls": `${fieldId}-listbox`, placeholder: placeholderText, onKeyDown: onInputKeyDown, innerRef: textInputRef, ...(activeItemId && { 'aria-activedescendant': activeItemId }) })))), isOpen: isOpen, onOpenChange: (open) => {
+                var _a;
+                if (!open) {
+                    if (!meta.touched) {
+                        setTouched(true);
+                    }
+                    resetActiveAndFocusedItem();
+                }
+                else {
+                    (_a = textInputRef === null || textInputRef === void 0 ? void 0 : textInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+                }
+                setIsOpen(open);
+            } },
+            React.createElement(react_core_1.SelectList, { className: "fctl-form-select__menu", id: `${fieldId}-listbox` }, itemKeysFiltered.map((key, index) => {
+                const item = items[key];
+                const desc = isItemObject(item) ? item.description : undefined;
+                return (React.createElement(react_core_1.SelectOption, { className: "fctl-form-select__item", key: key, value: key, description: desc, isFocused: focusedItemIndex === index, id: `${fieldId}-${key}` }, getItemLabel(item)));
+            })),
+            children),
+        React.createElement(FieldHelperText_1.DefaultHelperText, { helperText: helperText }),
+        React.createElement(FieldHelperText_1.default, { meta: meta })));
+};
+const FormSelectTypeaheadWrapper = ({ name, items, isDisabled, ...rest }) => {
+    const [{ value }] = (0, formik_1.useField)({
+        name: name,
+    });
+    if (isDisabled) {
+        let displayText = '';
+        if (value) {
+            displayText = getItemLabel(items[value]) || value;
+        }
+        else if (rest.defaultId) {
+            displayText = getItemLabel(items[rest.defaultId]) || rest.defaultId;
+        }
+        return displayText || rest.placeholderText || '-';
+    }
+    return React.createElement(FormSelectTypeahead, { name: name, items: items, ...rest });
+};
+exports.default = FormSelectTypeaheadWrapper;
+//# sourceMappingURL=FormSelectTypeahead.js.map

package/dist/ui-components/src/components/form/FormSelectTypeahead.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormSelectTypeahead.js","sourceRoot":"","sources":["../../../../../src/components/form/FormSelectTypeahead.tsx"],"names":[],"mappings":"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"}

package/dist/ui-components/src/components/form/LabelsField.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { FlightCtlLabel } from '../../types/extraTypes';
+type LabelsFieldProps = {
+    name: string;
+    isLoading?: boolean;
+    addButtonText?: string;
+    helperText?: React.ReactNode;
+    onChangeCallback?: (newLabels: FlightCtlLabel[], hasErrors: boolean) => void;
+};
+declare const LabelsFieldWrapper: ({ name, isDisabled, ...rest }: LabelsFieldProps & {
+    isDisabled?: boolean;
+}) => React.JSX.Element;
+export default LabelsFieldWrapper;
+//# sourceMappingURL=LabelsField.d.ts.map

package/dist/ui-components/src/components/form/LabelsField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LabelsField.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/LabelsField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAMxD,KAAK,gBAAgB,GAAG;IACtB,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,gBAAgB,CAAC,EAAE,CAAC,SAAS,EAAE,cAAc,EAAE,EAAE,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;CAC9E,CAAC;AAkGF,QAAA,MAAM,kBAAkB,GAAI,+BAA+B,gBAAgB,GAAG;IAAE,UAAU,CAAC,EAAE,OAAO,CAAA;CAAE,sBAMrG,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

package/dist/ui-components/src/components/form/LabelsField.js

@@ -0,0 +1,73 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const formik_1 = require("formik");
+const react_core_1 = require("@patternfly/react-core");
+const EditableLabelControl_1 = tslib_1.__importDefault(require("../common/EditableLabelControl"));
+const LabelsView_1 = tslib_1.__importDefault(require("../common/LabelsView"));
+const labels_1 = require("../../utils/labels");
+const FieldHelperText_1 = tslib_1.__importStar(require("./FieldHelperText"));
+const maxWidthDefaultLabel = '18ch'; // Can fit more chars as it doesn't have a "Close" button
+const maxWidthNonDefaultLabel = '16ch'; // Can fit less chars due to the "Close" button
+const LabelsField = ({ name, onChangeCallback, addButtonText, helperText, isLoading }) => {
+    const [{ value: labels }, meta, { setValue: setLabels }] = (0, formik_1.useField)(name);
+    const updateLabels = async (newLabels) => {
+        const errors = await setLabels(newLabels, true);
+        const hasErrors = Object.keys(errors || {}).length > 0;
+        onChangeCallback === null || onChangeCallback === void 0 ? void 0 : onChangeCallback(newLabels, hasErrors);
+    };
+    const onDelete = async (_ev, index) => {
+        if (isLoading) {
+            return;
+        }
+        const newLabels = [...labels];
+        newLabels.splice(index, 1);
+        await updateLabels(newLabels);
+    };
+    const onAdd = async (text) => {
+        if (!text) {
+            return;
+        }
+        const split = text.split('=');
+        let newLabel;
+        if (split.length === 2) {
+            newLabel = { key: split[0], value: split[1] };
+        }
+        else {
+            newLabel = { key: text || '', value: '' };
+        }
+        const newLabels = [...labels, newLabel];
+        await updateLabels(newLabels);
+    };
+    const onEdit = async (index, nextText) => {
+        const label = nextText.split('=');
+        const newLabels = [...labels];
+        newLabels.splice(index, 1, { key: label[0], value: label.length ? label[1] : undefined });
+        await updateLabels(newLabels);
+    };
+    return (React.createElement(React.Fragment, null,
+        React.createElement(react_core_1.LabelGroup, { numLabels: 5, isEditable: !isLoading, addLabelControl: React.createElement(EditableLabelControl_1.default, { defaultLabel: "key=value", addButtonText: addButtonText, onAddLabel: onAdd, isEditable: !isLoading }) }, labels.map(({ key, value, isDefault }, index) => {
+            const text = value ? `${key}=${value}` : key;
+            const elKey = `${key}__${index}`;
+            if (isDefault) {
+                return (React.createElement(react_core_1.Label, { key: elKey, textMaxWidth: maxWidthDefaultLabel }, text));
+            }
+            const closeButtonProps = isLoading && { isDisabled: true };
+            const isLabelEditable = !isLoading && !isDefault;
+            return (React.createElement(react_core_1.Label, { key: elKey, textMaxWidth: maxWidthNonDefaultLabel, closeBtnProps: closeButtonProps, onClose: (e) => onDelete(e, index), onEditCancel: (_, prevText) => onEdit(index, prevText), onEditComplete: (_, newText) => onEdit(index, newText), 
+                /* Add a basic tooltip as the PF tooltip doesn't work for editable labels */
+                title: isLabelEditable ? text : undefined, isEditable: isLabelEditable }, text));
+        })),
+        React.createElement(FieldHelperText_1.DefaultHelperText, { helperText: helperText }),
+        React.createElement(FieldHelperText_1.default, { meta: meta, touchRequired: false })));
+};
+const LabelsFieldWrapper = ({ name, isDisabled, ...rest }) => {
+    const [{ value }] = (0, formik_1.useField)(name);
+    if (isDisabled) {
+        return React.createElement(LabelsView_1.default, { prefix: name, labels: (0, labels_1.toAPILabel)(value) });
+    }
+    return React.createElement(LabelsField, { name: name, ...rest });
+};
+exports.default = LabelsFieldWrapper;
+//# sourceMappingURL=LabelsField.js.map

package/dist/ui-components/src/components/form/LabelsField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LabelsField.js","sourceRoot":"","sources":["../../../../../src/components/form/LabelsField.tsx"],"names":[],"mappings":"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"}

package/dist/ui-components/src/components/form/ListItemField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListItemField.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/ListItemField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,KAAK,kBAAkB,GAAG;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,aAAa,CAAC,EAAE,MAAM,GAAG,CAAC,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,MAAM,CAAC,CAAC;IACvD,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAIF,QAAA,MAAM,aAAa,GAAI,+EAOpB,kBAAkB,sBAoGpB,CAAC;AAEF,eAAe,aAAa,CAAC"}