@ballistix.digital/react-components 7.2.0 → 7.3.0

package/dist/index.js

@@ -5992,7 +5992,7 @@ var $7343b5b4243d5cba$export$2e2bcd8739ae039 = $7343b5b4243d5cba$var$styles;
 
 
 var $341e1fbf5ffaef7b$var$Switch = function(props) {
-    var name = props.name, label = props.label, description = props.description, isDisabled = props.isDisabled, _a = props.isRequired, isRequired = _a === void 0 ? false : _a, required = props.required, _b = props.isTouched, isTouched = _b === void 0 ? false : _b, error = props.error, value = props.value, stylesOverrides = props.styles, _c = props.size, size = _c === void 0 ? 'md' : _c, onChange = props.onChange, iconAccessorChecked = props.iconAccessorChecked, iconAccessorUnchecked = props.iconAccessorUnchecked;
+    var name = props.name, label = props.label, description = props.description, isDisabled = props.isDisabled, _a = props.isRequired, isRequired = _a === void 0 ? false : _a, required = props.required, _b = props.isTouched, isTouched = _b === void 0 ? false : _b, error = props.error, value = props.value, stylesOverrides = props.styles, _c = props.size, size = _c === void 0 ? 'md' : _c, _d = props.isOptionalLabelHidden, isOptionalLabelHidden = _d === void 0 ? false : _d, onChange = props.onChange, iconAccessorChecked = props.iconAccessorChecked, iconAccessorUnchecked = props.iconAccessorUnchecked;
     var inputDataCy = "form-input-".concat(name);
     var errorDataCy = "form-input-error-".concat(name);
     var handleGenerateStyle = function() {
@@ -6004,21 +6004,64 @@ var $341e1fbf5ffaef7b$var$Switch = function(props) {
         return result;
     };
     var styles = handleGenerateStyle();
+    var labelComponent = (0, $iA2ta$react.useMemo)(function() {
+        if (!label) return null;
+        return (0, $iA2ta$reactjsxruntime.jsx)("label", {
+            htmlFor: name,
+            className: styles.label,
+            children: label
+        });
+    }, [
+        label,
+        name,
+        styles.label
+    ]);
+    var optionalLabelComponent = (0, $iA2ta$react.useMemo)(function() {
+        if (required || isRequired || typeof label !== 'string' || isOptionalLabelHidden) return null;
+        return (0, $iA2ta$reactjsxruntime.jsx)("span", {
+            className: styles.hint,
+            children: "Optional"
+        });
+    }, [
+        isOptionalLabelHidden,
+        isRequired,
+        label,
+        required,
+        styles.hint
+    ]);
+    var footComponent = (0, $iA2ta$react.useMemo)(function() {
+        if (!description && !error) return null;
+        return (0, $iA2ta$reactjsxruntime.jsxs)("div", {
+            className: styles.foot,
+            children: [
+                description && !(error && isTouched) && (0, $iA2ta$reactjsxruntime.jsx)("p", {
+                    className: styles.description,
+                    children: description
+                }),
+                error && isTouched && (0, $iA2ta$reactjsxruntime.jsx)("p", {
+                    className: styles.error,
+                    "data-cy": errorDataCy,
+                    children: error
+                })
+            ]
+        });
+    }, [
+        description,
+        error,
+        errorDataCy,
+        isTouched,
+        styles.description,
+        styles.error,
+        styles.foot
+    ]);
     return (0, $iA2ta$reactjsxruntime.jsxs)("div", {
         className: styles.container,
         children: [
             (0, $iA2ta$reactjsxruntime.jsxs)("div", {
                 className: styles.head,
                 children: [
-                    label && (0, $iA2ta$reactjsxruntime.jsx)("label", {
-                        htmlFor: name,
-                        className: styles.label,
-                        children: label
-                    }),
-                    !required && !isRequired && typeof label === 'string' && (0, $iA2ta$reactjsxruntime.jsx)("span", {
-                        className: styles.hint,
-                        children: "Optional"
-                    }),
+                    labelComponent,
+                    optionalLabelComponent,
                     required && required({
                         isRequired: isRequired
                     })
@@ -6066,20 +6109,7 @@ var $341e1fbf5ffaef7b$var$Switch = function(props) {
                     ]
                 })
             }),
-            (0, $iA2ta$reactjsxruntime.jsxs)("div", {
-                className: styles.foot,
-                children: [
-                    description && !(error && isTouched) && (0, $iA2ta$reactjsxruntime.jsx)("p", {
-                        className: styles.description,
-                        children: description
-                    }),
-                    error && isTouched && (0, $iA2ta$reactjsxruntime.jsx)("p", {
-                        className: styles.error,
-                        "data-cy": errorDataCy,
-                        children: error
-                    })
-                ]
-            })
+            footComponent
         ]
     });
 };