iguazio.dashboard-react-controls 1.3.5 → 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

@@ -178,7 +178,8 @@ var FormSelect = function FormSelect(_ref) {
     };
   }, [clickHandler, handleScroll, isOpen]);
   var scrollOptionToView = (0, _react.useCallback)(function () {
-    var selectedOptionEl = optionsListRef.current.querySelector("#".concat(input.value));
+    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,
@@ -215,7 +216,7 @@ var FormSelect = function FormSelect(_ref) {
       setSearchValue('');
     }
   }, [closeMenu, multiple]);
-  var handleSelectOptionClick = function handleSelectOptionClick(selectedOption, option, ref) {
+  var handleSelectOptionClick = function handleSelectOptionClick(selectedOption, option) {
     if (selectedOption !== input.value) {
       option.handler && option.handler();
       onChange && onChange(selectedOption);

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/constants.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.validation = exports.TERTIARY_BUTTON = exports.TAB_SHIFT = exports.TAB = exports.SECONDARY_BUTTON = exports.PRIMARY_BUTTON = exports.NOTFOUND_ERROR_STATUS_CODE = exports.MODAL_SM = exports.MODAL_MIN = exports.MODAL_MD = exports.MODAL_MAX = exports.MODAL_LG = exports.LABEL_BUTTON = exports.INTERNAL_SERVER_ERROR_STATUS_CODE = exports.GATEWAY_TIMEOUT_STATUS_CODE = exports.FORBIDDEN_ERROR_STATUS_CODE = exports.DELETE = exports.DANGER_BUTTON = exports.CONFLICT_ERROR_STATUS_CODE = exports.CLICK = exports.BADREQUEST_ERROR_STATUS_CODE = exports.BACKSPACE = void 0;
+exports.validation = exports.TERTIARY_BUTTON = exports.TAB_SHIFT = exports.TAB = exports.SELECT_OPTION_ID_PREFIX = exports.SECONDARY_BUTTON = exports.PRIMARY_BUTTON = exports.NOTFOUND_ERROR_STATUS_CODE = exports.MODAL_SM = exports.MODAL_MIN = exports.MODAL_MD = exports.MODAL_MAX = exports.MODAL_LG = exports.LABEL_BUTTON = exports.INTERNAL_SERVER_ERROR_STATUS_CODE = exports.GATEWAY_TIMEOUT_STATUS_CODE = exports.FORBIDDEN_ERROR_STATUS_CODE = exports.DELETE = exports.DANGER_BUTTON = exports.CONFLICT_ERROR_STATUS_CODE = exports.CLICK = exports.BADREQUEST_ERROR_STATUS_CODE = exports.BACKSPACE = void 0;
 /*
 Copyright 2022 Iguazio Systems Ltd.
 Licensed under the Apache License, Version 2.0 (the "License") with
@@ -86,4 +86,8 @@ exports.MODAL_LG = MODAL_LG;
 var MODAL_MIN = 'min';
 exports.MODAL_MIN = MODAL_MIN;
 var MODAL_MAX = 'max';
-exports.MODAL_MAX = MODAL_MAX;
+
+/*=========== SELECT =============*/
+exports.MODAL_MAX = MODAL_MAX;
+var SELECT_OPTION_ID_PREFIX = 'id-';
+exports.SELECT_OPTION_ID_PREFIX = SELECT_OPTION_ID_PREFIX;

package/dist/elements/SelectOption/SelectOption.js

@@ -9,6 +9,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _components = require("../../components");
 var _types = require("../../types");
+var _constants = require("../../constants");
 var _checkmark = require("../../images/checkmark.svg");
 require("./selectOption.scss");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -58,7 +59,7 @@ var SelectOption = function SelectOption(_ref) {
     onClick: function onClick() {
       !item.disabled && _onClick(item.id);
     },
-    id: item.id,
+    id: "".concat(_constants.SELECT_OPTION_ID_PREFIX).concat(item.id),
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: "label-row",
       children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {

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.5",
+    "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",