iguazio.dashboard-react-controls 1.3.6 → 1.3.7

package/dist/components/FormChipCell/NewChipForm/newChipForm.scss

@@ -22,13 +22,10 @@
         &_invalid {
           color: $amaranth;
         }
-
-        &::placeholder {
-          color: $spunPearl;
-        }
       }
 
-      &.input-label-key, &.input-label-value {
+      &.input-label-key,
+      &.input-label-value {
         &::placeholder {
           color: $topaz;
         }

package/dist/components/FormRadio/FormRadio.js

@@ -51,7 +51,12 @@ var FormRadio = function FormRadio(_ref) {
       var input = _ref2.input;
       return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
         className: formFieldClassNames,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", _objectSpread(_objectSpread({}, _objectSpread(_objectSpread({}, input), inputProps)), {}, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", _objectSpread(_objectSpread({
+          className: (0, _classnames.default)(input.checked ? 'checked' : 'unchecked'),
+          type: "radio",
+          "data-testid": "radio-".concat(inputProps.value)
+        }, _objectSpread(_objectSpread({}, input), inputProps)), {}, {
+          checked: input.checked,
           id: name + inputProps.value
         })), /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
           htmlFor: name + inputProps.value,

package/dist/components/FormSelect/FormSelect.js

@@ -179,6 +179,7 @@ var FormSelect = function FormSelect(_ref) {
   }, [clickHandler, handleScroll, isOpen]);
   var scrollOptionToView = (0, _react.useCallback)(function () {
     var selectedOptionEl = optionsListRef.current.querySelector("#".concat(_constants.SELECT_OPTION_ID_PREFIX).concat(input.value));
+    if (!selectedOptionEl) return;
     searchValue ? optionsListRef.current.scrollTo({
       top: 0,
       left: 0,

package/dist/components/FormToggle/FormToggle.js

@@ -11,7 +11,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _reactFinalForm = require("react-final-form");
 require("./formToggle.scss");
 var _jsxRuntime = require("react/jsx-runtime");
-var _excluded = ["className", "label", "name", "onChange", "readOnly"];
+var _excluded = ["className", "density", "label", "name", "onChange", "readOnly"];
 /*
 Copyright 2022 Iguazio Systems Ltd.
 Licensed under the Apache License, Version 2.0 (the "License") with
@@ -38,18 +38,20 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 var FormToggle = function FormToggle(_ref) {
   var className = _ref.className,
+    density = _ref.density,
     label = _ref.label,
     name = _ref.name,
     _onChange = _ref.onChange,
     readOnly = _ref.readOnly,
     inputProps = _objectWithoutProperties(_ref, _excluded);
+  var toggleWrapperClassNames = (0, _classnames.default)('form-field__wrapper', "form-field__wrapper-".concat(density));
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFinalForm.Field, {
     name: name,
     value: inputProps.value,
     type: "checkbox",
     children: function children(_ref2) {
       var input = _ref2.input;
-      var toggleClassName = (0, _classnames.default)('form-field-toggle', className, readOnly && 'form-field-toggle_readonly', input.checked && 'form-field-toggle_checked');
+      var toggleClassName = (0, _classnames.default)('form-field-toggle', className, readOnly && 'form-field_readonly', input.checked && 'form-field_checked');
       return /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
         className: toggleClassName,
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", _objectSpread(_objectSpread({
@@ -61,14 +63,17 @@ var FormToggle = function FormToggle(_ref) {
             input.onChange(event);
           },
           type: "checkbox"
-        })), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          className: "form-field-toggle__switch",
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-            className: "form-field-toggle__switch-button"
-          })
-        }), label && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          className: "form-field-toggle__label",
+        })), label && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "form-field__label",
           children: label
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: toggleWrapperClassNames,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: "form-field-toggle__switch",
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+              className: "form-field-toggle__switch-button"
+            })
+          })
         })]
       });
     }
@@ -82,6 +87,7 @@ FormToggle.defaultProps = {
 };
 FormToggle.propTypes = {
   className: _propTypes.default.string,
+  density: _propTypes.default.string,
   label: _propTypes.default.string,
   name: _propTypes.default.string.isRequired,
   onChange: _propTypes.default.func,

package/dist/components/FormToggle/formToggle.scss

@@ -1,10 +1,14 @@
 @import '../../scss/colors';
+@import '../../scss/mixins';
 
 .form-field-toggle {
   position: relative;
-  display: flex;
-  font-size: 16px;
-  line-height: 24px;
+
+  input[type='checkbox'] {
+    display: none;
+    width: 0;
+    height: 0;
+  }
 
   &__switch {
     height: 24px;
@@ -26,28 +30,32 @@
     }
   }
 
-  &__label {
-    margin-left: 10px;
-  }
-
-  &_readonly {
-    opacity: 0.5;
-    pointer-events: none;
+  .form-field {
+    @include inputSelectField;
 
-    .form-field-toggle__switch {
-      cursor: default;
+    &__wrapper {
+      border: none;
     }
 
-    &.form-field-toggle_checked {
+    &_readonly {
+      opacity: 0.5;
+      pointer-events: none;
+
       .form-field-toggle__switch {
-        &-button {
-          opacity: 0.5;
+        cursor: default;
+      }
+
+      &.form-field-toggle_checked {
+        .form-field-toggle__switch {
+          &-button {
+            opacity: 0.5;
+          }
         }
       }
     }
   }
 
-  &_checked {
+  &.form-field_checked {
     .form-field-toggle__switch {
       background-color: $malibu;
 
@@ -56,10 +64,4 @@
       }
     }
   }
-
-  input[type='checkbox'] {
-    display: none;
-    width: 0;
-    height: 0;
-  }
 }

package/dist/images/custom.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9 2V6.91H7V2C4.16 2.48 2 4.94 2 7.91C2 10.13 3.21 12.06 5 13.1V21.91C5 22.46 5.45 22.91 6 22.91H10C10.55 22.91 11 22.46 11 21.91V13.1C12.79 12.06 14 10.13 14 7.91C14 4.94 11.84 2.48 9 2ZM10 11.37L9 11.95V20.91H7V11.95L6 11.37C4.77 10.65 4 9.33 4 7.91C4 6.91 4.37 5.97 5 5.26V8.91H11V5.26C11.63 5.97 12 6.91 12 7.91C12 9.33 11.23 10.65 10 11.37ZM20.94 18.85C20.96 18.7 20.97 18.56 20.97 18.41C20.97 18.26 20.96 18.11 20.94 17.96L21.91 17.23C22 17.16 22.03 17.04 21.97 16.94L21.05 15.38C21 15.28 20.87 15.24 20.76 15.28L19.61 15.73C19.37 15.56 19.12 15.41 18.83 15.29L18.66 14.1C18.64 13.99 18.54 13.91 18.43 13.91H16.58C16.46 13.91 16.36 13.99 16.34 14.1L16.17 15.29C15.88 15.41 15.63 15.56 15.39 15.73L14.24 15.28C14.14 15.24 14 15.28 13.96 15.38L13.03 16.94C12.97 17.04 13 17.16 13.09 17.23L14.06 17.96C14.05 18.11 14.03 18.26 14.03 18.41C14.03 18.56 14.05 18.7 14.06 18.85L13.09 19.59C13 19.66 12.97 19.78 13.03 19.88L13.96 21.44C14 21.54 14.14 21.57 14.24 21.54L15.39 21.08C15.63 21.26 15.88 21.41 16.17 21.53L16.34 22.72C16.36 22.83 16.46 22.91 16.58 22.91H18.43C18.54 22.91 18.64 22.83 18.66 22.72L18.83 21.53C19.12 21.41 19.37 21.26 19.61 21.08L20.76 21.54C20.87 21.57 21 21.54 21.05 21.44L21.97 19.88C22.03 19.78 22 19.66 21.91 19.59L20.94 18.85ZM17.5 19.91C16.67 19.91 16 19.24 16 18.41C16 17.58 16.67 16.91 17.5 16.91C18.33 16.91 19 17.58 19 18.41C19 19.24 18.33 19.91 17.5 19.91Z" fill="#7F7989"/>
+</svg>

package/dist/scss/mixins.scss

@@ -1022,6 +1022,7 @@
     @include fieldWrapper;
 
     &-disabled {
+      border: $disabledBorder;
       color: $spunPearl;
       cursor: not-allowed;
     }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "iguazio.dashboard-react-controls",
-    "version": "1.3.6",
+    "version": "1.3.7",
     "description": "Collection of resources (such as CSS styles, fonts and images) and ReactJS 17.x components to share among different Iguazio React repos.",
     "main": "dist/index.js",
     "module": "dist/index.js",