@uipath/apollo-react 6.9.0 → 6.10.0

package/dist/canvas/components/NodePropertyPanel/ExpressionField.cjs

@@ -32,13 +32,13 @@ function ExpressionField({ label, value, mode = 'expr', description, onModeChang
     const expression = value ?? '';
     const activeMode = mode;
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
-        className: "flex flex-col gap-2",
+        className: "flex flex-col gap-1.5",
         children: [
             label && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
                 className: "flex items-center justify-between",
                 children: [
                     /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
-                        className: "text-xs font-medium text-foreground-muted",
+                        className: "text-xs font-medium leading-4 text-foreground",
                         children: label
                     }),
                     /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {

package/dist/canvas/components/NodePropertyPanel/ExpressionField.js

@@ -4,13 +4,13 @@ function ExpressionField({ label, value, mode = 'expr', description, onModeChang
     const expression = value ?? '';
     const activeMode = mode;
     return /*#__PURE__*/ jsxs("div", {
-        className: "flex flex-col gap-2",
+        className: "flex flex-col gap-1.5",
         children: [
             label && /*#__PURE__*/ jsxs("div", {
                 className: "flex items-center justify-between",
                 children: [
                     /*#__PURE__*/ jsx("span", {
-                        className: "text-xs font-medium text-foreground-muted",
+                        className: "text-xs font-medium leading-4 text-foreground",
                         children: label
                     }),
                     /*#__PURE__*/ jsxs("div", {

package/dist/canvas/components/NodePropertyPanel/NodePropertyPanel.cjs

@@ -118,7 +118,7 @@ function NodePropertyPanel({ panelTitle, onClose, nodeIcon, nodeLabel, nodeCateg
             }) : formSchema ? formSchema.steps ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
                 className: "flex min-h-0 flex-1 flex-col",
                 children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
-                    className: (0, apollo_wind_namespaceObject.cn)('flex min-h-0 flex-1 flex-col [&_label]:text-foreground-muted', SURFACE_REMAP),
+                    className: (0, apollo_wind_namespaceObject.cn)("flex min-h-0 flex-1 flex-col [&_[data-slot=form-description]]:text-xs [&_[data-slot=form-description]]:leading-4 [&_[data-slot=form-description]]:text-foreground-muted [&_[data-slot=form-label]]:text-xs [&_[data-slot=form-label]]:font-medium [&_[data-slot=form-label]]:leading-4 [&_[data-slot=form-label]]:text-foreground", SURFACE_REMAP),
                     children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(apollo_wind_namespaceObject.MetadataForm, {
                         schema: formSchema,
                         plugins: plugins,
@@ -135,7 +135,7 @@ function NodePropertyPanel({ panelTitle, onClose, nodeIcon, nodeLabel, nodeCateg
             }) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
                 className: "min-h-0 flex-1 overflow-auto",
                 children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
-                    className: (0, apollo_wind_namespaceObject.cn)('[&_label]:text-foreground-muted', SURFACE_REMAP),
+                    className: (0, apollo_wind_namespaceObject.cn)("[&_[data-slot=form-description]]:text-xs [&_[data-slot=form-description]]:leading-4 [&_[data-slot=form-description]]:text-foreground-muted [&_[data-slot=form-label]]:text-xs [&_[data-slot=form-label]]:font-medium [&_[data-slot=form-label]]:leading-4 [&_[data-slot=form-label]]:text-foreground", SURFACE_REMAP),
                     children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(apollo_wind_namespaceObject.MetadataForm, {
                         schema: formSchema,
                         plugins: plugins,

package/dist/canvas/components/NodePropertyPanel/NodePropertyPanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NodePropertyPanel.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/NodePropertyPanel/NodePropertyPanel.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,2BAA2B,CAAC;AAmCxE,wBAAgB,iBAAiB,CAAC,EAChC,UAAU,EACV,OAAO,EACP,QAAQ,EACR,SAAS,EACT,YAAY,EACZ,MAAM,EACN,MAAM,EACN,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,YAAY,EACZ,QAAQ,EACR,SAAS,EACT,YAAuB,EACvB,QAAQ,EACR,WAAW,EACX,cAAc,EACd,YAAY,EACZ,kBAAkB,GACnB,EAAE,sBAAsB,2CA2HxB"}
+{"version":3,"file":"NodePropertyPanel.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/NodePropertyPanel/NodePropertyPanel.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,2BAA2B,CAAC;AAmCxE,wBAAgB,iBAAiB,CAAC,EAChC,UAAU,EACV,OAAO,EACP,QAAQ,EACR,SAAS,EACT,YAAY,EACZ,MAAM,EACN,MAAM,EACN,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,YAAY,EACZ,QAAQ,EACR,SAAS,EACT,YAAuB,EACvB,QAAQ,EACR,WAAW,EACX,cAAc,EACd,YAAY,EACZ,kBAAkB,GACnB,EAAE,sBAAsB,2CAgIxB"}

package/dist/canvas/components/NodePropertyPanel/NodePropertyPanel.js

@@ -90,7 +90,7 @@ function NodePropertyPanel({ panelTitle, onClose, nodeIcon, nodeLabel, nodeCateg
             }) : formSchema ? formSchema.steps ? /*#__PURE__*/ jsx("div", {
                 className: "flex min-h-0 flex-1 flex-col",
                 children: /*#__PURE__*/ jsx("div", {
-                    className: cn('flex min-h-0 flex-1 flex-col [&_label]:text-foreground-muted', SURFACE_REMAP),
+                    className: cn("flex min-h-0 flex-1 flex-col [&_[data-slot=form-description]]:text-xs [&_[data-slot=form-description]]:leading-4 [&_[data-slot=form-description]]:text-foreground-muted [&_[data-slot=form-label]]:text-xs [&_[data-slot=form-label]]:font-medium [&_[data-slot=form-label]]:leading-4 [&_[data-slot=form-label]]:text-foreground", SURFACE_REMAP),
                     children: /*#__PURE__*/ jsx(MetadataForm, {
                         schema: formSchema,
                         plugins: plugins,
@@ -107,7 +107,7 @@ function NodePropertyPanel({ panelTitle, onClose, nodeIcon, nodeLabel, nodeCateg
             }) : /*#__PURE__*/ jsx("div", {
                 className: "min-h-0 flex-1 overflow-auto",
                 children: /*#__PURE__*/ jsx("div", {
-                    className: cn('[&_label]:text-foreground-muted', SURFACE_REMAP),
+                    className: cn("[&_[data-slot=form-description]]:text-xs [&_[data-slot=form-description]]:leading-4 [&_[data-slot=form-description]]:text-foreground-muted [&_[data-slot=form-label]]:text-xs [&_[data-slot=form-label]]:font-medium [&_[data-slot=form-label]]:leading-4 [&_[data-slot=form-label]]:text-foreground", SURFACE_REMAP),
                     children: /*#__PURE__*/ jsx(MetadataForm, {
                         schema: formSchema,
                         plugins: plugins,

package/dist/canvas/components/NodePropertyPanel/PanelField.cjs

@@ -0,0 +1,95 @@
+"use strict";
+var __webpack_require__ = {};
+(()=>{
+    __webpack_require__.d = (exports1, definition)=>{
+        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
+            enumerable: true,
+            get: definition[key]
+        });
+    };
+})();
+(()=>{
+    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
+})();
+(()=>{
+    __webpack_require__.r = (exports1)=>{
+        if ("u" > typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports1, '__esModule', {
+            value: true
+        });
+    };
+})();
+var __webpack_exports__ = {};
+__webpack_require__.r(__webpack_exports__);
+__webpack_require__.d(__webpack_exports__, {
+    PanelFieldLabel: ()=>PanelFieldLabel,
+    PanelField: ()=>PanelField
+});
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const apollo_wind_namespaceObject = require("@uipath/apollo-wind");
+const external_react_namespaceObject = require("react");
+const PanelFieldLabel = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRef)(({ children, className, required = false, ...props }, ref)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(apollo_wind_namespaceObject.Label, {
+        ref: ref,
+        "data-slot": "panel-field-label",
+        className: (0, apollo_wind_namespaceObject.cn)('text-xs font-medium text-foreground', className),
+        ...props,
+        children: [
+            children,
+            required && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                className: "ml-0.5 text-destructive",
+                children: "*"
+            })
+        ]
+    }));
+PanelFieldLabel.displayName = 'PanelFieldLabel';
+function PanelField({ label, htmlFor, description, error, required = false, children, className }) {
+    const generatedId = (0, external_react_namespaceObject.useId)();
+    const controlId = htmlFor ?? children.props.id ?? generatedId;
+    const descriptionId = description ? `${controlId}-description` : void 0;
+    const errorId = error ? `${controlId}-error` : void 0;
+    const describedBy = [
+        children.props['aria-describedby'],
+        descriptionId,
+        errorId
+    ].filter(Boolean).join(' ');
+    const control = /*#__PURE__*/ (0, external_react_namespaceObject.isValidElement)(children) ? /*#__PURE__*/ (0, external_react_namespaceObject.cloneElement)(children, {
+        id: controlId,
+        'aria-describedby': describedBy || void 0,
+        'aria-invalid': error ? true : children.props['aria-invalid']
+    }) : children;
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+        className: (0, apollo_wind_namespaceObject.cn)('grid gap-1.5', className),
+        "data-slot": "panel-field",
+        children: [
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(PanelFieldLabel, {
+                htmlFor: controlId,
+                required: required,
+                children: label
+            }),
+            control,
+            description && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("p", {
+                id: descriptionId,
+                "data-slot": "panel-field-description",
+                className: "text-xs leading-4 text-foreground-muted",
+                children: description
+            }),
+            error && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("p", {
+                id: errorId,
+                "data-slot": "panel-field-error",
+                className: "text-xs leading-4 text-destructive",
+                children: error
+            })
+        ]
+    });
+}
+exports.PanelField = __webpack_exports__.PanelField;
+exports.PanelFieldLabel = __webpack_exports__.PanelFieldLabel;
+for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "PanelField",
+    "PanelFieldLabel"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/canvas/components/NodePropertyPanel/PanelField.d.ts

@@ -0,0 +1,23 @@
+import { type LabelProps } from '@uipath/apollo-wind';
+import { type ReactElement, type ReactNode } from 'react';
+type PanelControlProps = {
+    id?: string;
+    'aria-describedby'?: string;
+    'aria-invalid'?: boolean;
+};
+export interface PanelFieldProps {
+    label: ReactNode;
+    htmlFor?: string;
+    description?: ReactNode;
+    error?: ReactNode;
+    required?: boolean;
+    children: ReactElement<PanelControlProps>;
+    className?: string;
+}
+export interface PanelFieldLabelProps extends LabelProps {
+    required?: boolean;
+}
+export declare const PanelFieldLabel: import("react").ForwardRefExoticComponent<PanelFieldLabelProps & import("react").RefAttributes<HTMLLabelElement>>;
+export declare function PanelField({ label, htmlFor, description, error, required, children, className, }: PanelFieldProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=PanelField.d.ts.map

package/dist/canvas/components/NodePropertyPanel/PanelField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PanelField.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/NodePropertyPanel/PanelField.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAa,KAAK,UAAU,EAAE,MAAM,qBAAqB,CAAC;AACjE,OAAO,EAIL,KAAK,YAAY,EACjB,KAAK,SAAS,EAEf,MAAM,OAAO,CAAC;AAEf,KAAK,iBAAiB,GAAG;IACvB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B,CAAC;AAEF,MAAM,WAAW,eAAe;IAE9B,KAAK,EAAE,SAAS,CAAC;IAEjB,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB,WAAW,CAAC,EAAE,SAAS,CAAC;IAExB,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,QAAQ,EAAE,YAAY,CAAC,iBAAiB,CAAC,CAAC;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,oBAAqB,SAAQ,UAAU;IAEtD,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAGD,eAAO,MAAM,eAAe,mHAY3B,CAAC;AASF,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,OAAO,EACP,WAAW,EACX,KAAK,EACL,QAAgB,EAChB,QAAQ,EACR,SAAS,GACV,EAAE,eAAe,2CA0CjB"}

package/dist/canvas/components/NodePropertyPanel/PanelField.js

@@ -0,0 +1,58 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Label, cn } from "@uipath/apollo-wind";
+import { cloneElement, forwardRef, isValidElement, useId } from "react";
+const PanelFieldLabel = /*#__PURE__*/ forwardRef(({ children, className, required = false, ...props }, ref)=>/*#__PURE__*/ jsxs(Label, {
+        ref: ref,
+        "data-slot": "panel-field-label",
+        className: cn('text-xs font-medium text-foreground', className),
+        ...props,
+        children: [
+            children,
+            required && /*#__PURE__*/ jsx("span", {
+                className: "ml-0.5 text-destructive",
+                children: "*"
+            })
+        ]
+    }));
+PanelFieldLabel.displayName = 'PanelFieldLabel';
+function PanelField({ label, htmlFor, description, error, required = false, children, className }) {
+    const generatedId = useId();
+    const controlId = htmlFor ?? children.props.id ?? generatedId;
+    const descriptionId = description ? `${controlId}-description` : void 0;
+    const errorId = error ? `${controlId}-error` : void 0;
+    const describedBy = [
+        children.props['aria-describedby'],
+        descriptionId,
+        errorId
+    ].filter(Boolean).join(' ');
+    const control = /*#__PURE__*/ isValidElement(children) ? /*#__PURE__*/ cloneElement(children, {
+        id: controlId,
+        'aria-describedby': describedBy || void 0,
+        'aria-invalid': error ? true : children.props['aria-invalid']
+    }) : children;
+    return /*#__PURE__*/ jsxs("div", {
+        className: cn('grid gap-1.5', className),
+        "data-slot": "panel-field",
+        children: [
+            /*#__PURE__*/ jsx(PanelFieldLabel, {
+                htmlFor: controlId,
+                required: required,
+                children: label
+            }),
+            control,
+            description && /*#__PURE__*/ jsx("p", {
+                id: descriptionId,
+                "data-slot": "panel-field-description",
+                className: "text-xs leading-4 text-foreground-muted",
+                children: description
+            }),
+            error && /*#__PURE__*/ jsx("p", {
+                id: errorId,
+                "data-slot": "panel-field-error",
+                className: "text-xs leading-4 text-destructive",
+                children: error
+            })
+        ]
+    });
+}
+export { PanelField, PanelFieldLabel };

package/dist/canvas/components/NodePropertyPanel/index.cjs

@@ -24,16 +24,23 @@ var __webpack_require__ = {};
 var __webpack_exports__ = {};
 __webpack_require__.r(__webpack_exports__);
 __webpack_require__.d(__webpack_exports__, {
+    PanelFieldLabel: ()=>external_PanelField_cjs_namespaceObject.PanelFieldLabel,
     NodePropertyPanel: ()=>external_NodePropertyPanel_cjs_namespaceObject.NodePropertyPanel,
+    PanelField: ()=>external_PanelField_cjs_namespaceObject.PanelField,
     ExpressionField: ()=>external_ExpressionField_cjs_namespaceObject.ExpressionField
 });
 const external_ExpressionField_cjs_namespaceObject = require("./ExpressionField.cjs");
 const external_NodePropertyPanel_cjs_namespaceObject = require("./NodePropertyPanel.cjs");
+const external_PanelField_cjs_namespaceObject = require("./PanelField.cjs");
 exports.ExpressionField = __webpack_exports__.ExpressionField;
 exports.NodePropertyPanel = __webpack_exports__.NodePropertyPanel;
+exports.PanelField = __webpack_exports__.PanelField;
+exports.PanelFieldLabel = __webpack_exports__.PanelFieldLabel;
 for(var __rspack_i in __webpack_exports__)if (-1 === [
     "ExpressionField",
-    "NodePropertyPanel"
+    "NodePropertyPanel",
+    "PanelField",
+    "PanelFieldLabel"
 ].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
 Object.defineProperty(exports, '__esModule', {
     value: true

package/dist/canvas/components/NodePropertyPanel/index.d.ts

@@ -2,4 +2,6 @@ export type { ExpressionFieldProps, ExpressionMode } from './ExpressionField';
 export { ExpressionField } from './ExpressionField';
 export { NodePropertyPanel } from './NodePropertyPanel';
 export type { NodePropertyPanelProps } from './NodePropertyPanel.types';
+export type { PanelFieldLabelProps, PanelFieldProps } from './PanelField';
+export { PanelField, PanelFieldLabel } from './PanelField';
 //# sourceMappingURL=index.d.ts.map

package/dist/canvas/components/NodePropertyPanel/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/NodePropertyPanel/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,oBAAoB,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAC9E,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,YAAY,EAAE,sBAAsB,EAAE,MAAM,2BAA2B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/NodePropertyPanel/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,oBAAoB,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAC9E,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,YAAY,EAAE,sBAAsB,EAAE,MAAM,2BAA2B,CAAC;AACxE,YAAY,EAAE,oBAAoB,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAC1E,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC"}

package/dist/canvas/components/NodePropertyPanel/index.js

@@ -1,3 +1,4 @@
 import { ExpressionField } from "./ExpressionField.js";
 import { NodePropertyPanel } from "./NodePropertyPanel.js";
-export { ExpressionField, NodePropertyPanel };
+import { PanelField, PanelFieldLabel } from "./PanelField.js";
+export { ExpressionField, NodePropertyPanel, PanelField, PanelFieldLabel };