iguazio.dashboard-react-controls 2.2.25 → 3.0.1

package/dist/components/FormTextarea/FormTextarea.js

@@ -1,184 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _classnames = _interopRequireDefault(require("classnames"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _reactFinalForm = require("react-final-form");
-var _TextTooltipTemplate = _interopRequireDefault(require("../TooltipTemplate/TextTooltipTemplate"));
-var _Tip = _interopRequireDefault(require("../Tip/Tip"));
-var _Tooltip = _interopRequireDefault(require("../Tooltip/Tooltip"));
-var _exclamationMark = require("../../images/exclamation-mark.svg");
-require("./formTextarea.scss");
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-/*
-Copyright 2022 Iguazio Systems Ltd.
-Licensed under the Apache License, Version 2.0 (the "License") with
-an addition restriction as set forth herein. You may not use this
-file except in compliance with the License. You may obtain a copy of
-the License at http://www.apache.org/licenses/LICENSE-2.0.
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
-implied. See the License for the specific language governing
-permissions and limitations under the License.
-In addition, you may not use the software for any purposes that are
-illegal under applicable law, and the grant of the foregoing license
-under the Apache 2.0 license is conditioned upon your compliance with
-such restriction.
-*/
-
-const FormTextarea = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
-  let {
-    className = '',
-    disabled = false,
-    focused = false,
-    iconClass = '',
-    invalidText = 'This field is invalid',
-    label = '',
-    maxLength = null,
-    name,
-    onBlur = () => {},
-    onChange = () => {},
-    required = false,
-    rows = 3,
-    textAreaIcon,
-    tip = '',
-    withoutBorder,
-    ...textareaProps
-  } = _ref;
-  const {
-    input,
-    meta
-  } = (0, _reactFinalForm.useField)(name);
-  const [isInvalid, setIsInvalid] = (0, _react.useState)(false);
-  const [textAreaCount, setTextAreaCount] = (0, _react.useState)(input.value.length);
-  const textAreaRef = (0, _react.useRef)();
-  const formFieldClassNames = (0, _classnames.default)('form-field-textarea', className);
-  const labelClassNames = (0, _classnames.default)('form-field__label', disabled && 'form-field__label-disabled');
-  const textAreaClassNames = (0, _classnames.default)('form-field__wrapper', disabled && 'form-field__wrapper-disabled', isInvalid && 'form-field__wrapper-invalid', withoutBorder && 'without-border');
-  (0, _react.useLayoutEffect)(() => {
-    setTextAreaCount(input.value.length);
-  }, [input.value.length]);
-  (0, _react.useEffect)(() => {
-    if (focused) {
-      textAreaRef.current.focus();
-    }
-  }, [focused, textAreaRef]);
-  (0, _react.useEffect)(() => {
-    setIsInvalid(meta.invalid && (meta.validating || meta.modified || meta.submitFailed && meta.touched));
-  }, [meta.invalid, meta.modified, meta.submitFailed, meta.touched, meta.validating]);
-  const handleInputBlur = event => {
-    input.onBlur(event);
-    onBlur && onBlur(event);
-  };
-  const handleInputChange = event => {
-    input.onChange(event);
-    onChange && onChange(event.target.value);
-  };
-  const handleInputFocus = event => {
-    input.onFocus(event);
-  };
-  const validateField = value => {
-    const valueToValidate = value ?? '';
-    let validationError = null;
-    if (valueToValidate.startsWith(' ')) {
-      validationError = {
-        name: 'empty',
-        label: invalidText
-      };
-    } else if (required && valueToValidate.trim().length === 0) {
-      validationError = {
-        name: 'required',
-        label: 'This field is required'
-      };
-    }
-    return validationError;
-  };
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFinalForm.Field, {
-    validate: validateField,
-    name: name,
-    children: _ref2 => {
-      let {
-        input,
-        meta
-      } = _ref2;
-      return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        ref: ref,
-        className: formFieldClassNames,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          className: labelClassNames,
-          children: label && /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
-            "data-testid": "label",
-            htmlFor: input.name,
-            children: [label, required && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-              className: "form-field__label-mandatory",
-              children: " *"
-            })]
-          })
-        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-          className: textAreaClassNames,
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-            className: "form-field__control",
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)("textarea", {
-              "data-testid": "textarea",
-              id: input.name,
-              maxLength: maxLength,
-              ref: textAreaRef,
-              required: isInvalid || required,
-              disabled,
-              rows,
-              ...textareaProps,
-              ...input,
-              onBlur: handleInputBlur,
-              onChange: handleInputChange,
-              onFocus: handleInputFocus
-            })
-          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-            className: "form-field__icons",
-            children: [isInvalid && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, {
-              className: "form-field__warning",
-              template: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextTooltipTemplate.default, {
-                text: meta.error?.label ?? invalidText,
-                warning: true
-              }),
-              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_exclamationMark.ReactComponent, {})
-            }), tip && !required && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tip.default, {
-              text: tip,
-              className: "form-field__tip"
-            }), textAreaIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-              "data-testid": "textarea__icon",
-              className: iconClass,
-              children: textAreaIcon
-            })]
-          })]
-        }), maxLength && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          className: "form-field__counter",
-          children: `${maxLength - textAreaCount} ${maxLength - textAreaCount !== 1 ? 'characters' : 'character'} left`
-        })]
-      });
-    }
-  });
-});
-FormTextarea.propTypes = {
-  className: _propTypes.default.string,
-  disabled: _propTypes.default.bool,
-  focused: _propTypes.default.bool,
-  iconClass: _propTypes.default.string,
-  textAreaIcon: _propTypes.default.element,
-  invalidText: _propTypes.default.string,
-  label: _propTypes.default.string,
-  maxLength: _propTypes.default.number,
-  name: _propTypes.default.string.isRequired,
-  onBlur: _propTypes.default.func,
-  onChange: _propTypes.default.func,
-  required: _propTypes.default.bool,
-  tip: _propTypes.default.string
-};
-var _default = exports.default = /*#__PURE__*/_react.default.memo(FormTextarea);

package/dist/components/FormTextarea/formTextarea.scss

@@ -1,32 +0,0 @@
-@import '../../scss/colors';
-@import '../../scss/borders';
-@import '../../scss/shadows';
-@import '../../scss/mixins';
-
-.form-field-textarea {
-  width: 100%;
-
-  textarea {
-    height: inherit;
-    width: 100%;
-    padding: 12px 16px;
-    white-space: normal;
-  }
-
-  .form-field {
-    @include inputSelectField;
-
-    &__wrapper {
-      .form-field__control {
-        padding: 0;
-      }
-    }
-
-    &__counter {
-      color: $topaz;
-      font-size: 12px;
-      margin-top: 5px;
-      text-align: right;
-    }
-  }
-}

package/dist/components/FormToggle/FormToggle.js

@@ -1,82 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _classnames = _interopRequireDefault(require("classnames"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _reactFinalForm = require("react-final-form");
-require("./formToggle.scss");
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-/*
-Copyright 2022 Iguazio Systems Ltd.
-Licensed under the Apache License, Version 2.0 (the "License") with
-an addition restriction as set forth herein. You may not use this
-file except in compliance with the License. You may obtain a copy of
-the License at http://www.apache.org/licenses/LICENSE-2.0.
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
-implied. See the License for the specific language governing
-permissions and limitations under the License.
-In addition, you may not use the software for any purposes that are
-illegal under applicable law, and the grant of the foregoing license
-under the Apache 2.0 license is conditioned upon your compliance with
-such restriction.
-*/
-
-const FormToggle = _ref => {
-  let {
-    className = '',
-    density,
-    label = '',
-    name,
-    onChange = () => {},
-    ...inputProps
-  } = _ref;
-  const toggleWrapperClassNames = (0, _classnames.default)('form-field__wrapper', density && `form-field__wrapper-${density}`);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFinalForm.Field, {
-    name: name,
-    value: inputProps.value,
-    type: "checkbox",
-    children: _ref2 => {
-      let {
-        input
-      } = _ref2;
-      return /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
-        className: "form-field-toggle",
-        "data-testid": name ? `${name}-form-field-toggle` : 'form-field-toggle',
-        children: [label && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          className: "form-field__label",
-          children: label
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
-          "data-testid": name ? `${name}-form-toggle` : 'form-toggle',
-          id: name,
-          ...input,
-          ...inputProps,
-          onChange: event => {
-            onChange && onChange(event);
-            input.onChange(event);
-          },
-          type: "checkbox"
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          className: toggleWrapperClassNames,
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-            className: "form-field-toggle__switch"
-          })
-        })]
-      });
-    }
-  });
-};
-FormToggle.propTypes = {
-  className: _propTypes.default.string,
-  density: _propTypes.default.string,
-  label: _propTypes.default.string,
-  name: _propTypes.default.string.isRequired,
-  onChange: _propTypes.default.func
-};
-var _default = exports.default = FormToggle;

package/dist/components/FormToggle/formToggle.scss

@@ -1,58 +0,0 @@
-@import '../../scss/colors';
-@import '../../scss/mixins';
-
-.form-field-toggle {
-  position: relative;
-
-  &__switch {
-    height: 24px;
-    width: 48px;
-    display: flex;
-    cursor: pointer;
-    align-items: center;
-    background-color: $alto;
-    border-radius: 20px;
-    transition: all 0.2s ease;
-
-    &:before {
-      content: '';
-      width: 20px;
-      height: 20px;
-      background-color: $white;
-      border-radius: 50%;
-      transform: translateX(2px);
-      transition: all 0.2s ease;
-    }
-  }
-
-  .form-field {
-    @include inputSelectField;
-
-    &__wrapper {
-      border: none;
-    }
-  }
-
-  input[type='checkbox'] {
-    display: none;
-    width: 0;
-    height: 0;
-
-    &:disabled {
-      & + * .form-field-toggle__switch {
-        opacity: 0.5;
-        pointer-events: none;
-        cursor: default;
-      }
-    }
-
-    &:checked {
-      & + * .form-field-toggle__switch {
-        background-color: $malibu;
-        &:before {
-          transform: translateX(26px);
-        }
-      }
-    }
-  }
-}

package/dist/components/Modal/Modal.js

@@ -1,116 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _reactTransitionGroup = require("react-transition-group");
-var _classnames = _interopRequireDefault(require("classnames"));
-var _Backdrop = _interopRequireDefault(require("../Backdrop/Backdrop"));
-var _RoundedIcon = _interopRequireDefault(require("../RoundedIcon/RoundedIcon"));
-var _constants = require("../../constants");
-var _types = require("../../types");
-var _close = require("../../images/close.svg");
-require("./Modal.scss");
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-/*
-Copyright 2022 Iguazio Systems Ltd.
-Licensed under the Apache License, Version 2.0 (the "License") with
-an addition restriction as set forth herein. You may not use this
-file except in compliance with the License. You may obtain a copy of
-the License at http://www.apache.org/licenses/LICENSE-2.0.
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
-implied. See the License for the specific language governing
-permissions and limitations under the License.
-In addition, you may not use the software for any purposes that are
-illegal under applicable law, and the grant of the foregoing license
-under the Apache 2.0 license is conditioned upon your compliance with
-such restriction.
-*/
-
-const Modal = _ref => {
-  let {
-    actions = [],
-    children,
-    className,
-    noHeader = false,
-    onClose,
-    previewText = '',
-    size = _constants.MODAL_MD,
-    show = false,
-    subTitle = null,
-    title = ''
-  } = _ref;
-  const nodeRef = (0, _react.useRef)(null);
-  const modalClassNames = (0, _classnames.default)('modal', className, size && `modal-${size}`);
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Backdrop.default, {
-      onClose: onClose,
-      show: show
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactTransitionGroup.CSSTransition, {
-      nodeRef: nodeRef,
-      in: show,
-      timeout: 300,
-      classNames: "modal-transition",
-      unmountOnExit: true,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        className: modalClassNames,
-        "data-testid": "modal",
-        ref: nodeRef,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          className: "modal__header-button",
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_RoundedIcon.default, {
-            "data-testid": "pop-up-close-btn",
-            onClick: onClose,
-            tooltipText: "Close",
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_close.ReactComponent, {})
-          })
-        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-          className: "modal__content",
-          children: [!noHeader && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-            className: "modal__header",
-            children: [previewText && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-              className: "modal__header-preview-text",
-              children: previewText
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)("h5", {
-              className: "modal__header-title",
-              children: title
-            }), subTitle && /*#__PURE__*/(0, _jsxRuntime.jsx)("h6", {
-              className: "modal__header-sub-title",
-              children: subTitle
-            })]
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-            className: "modal__body",
-            children: children
-          }), actions && actions.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-            className: "modal__footer",
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-              className: "modal__footer-actions",
-              children: actions.map((action, idx) => /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-                children: action
-              }, idx))
-            })
-          })]
-        })]
-      })
-    })]
-  });
-};
-Modal.propTypes = {
-  actions: _propTypes.default.array,
-  children: _propTypes.default.oneOfType([_propTypes.default.element, _propTypes.default.object, _propTypes.default.node, _propTypes.default.string]).isRequired,
-  onClose: _propTypes.default.func.isRequired,
-  previewText: _propTypes.default.string,
-  show: _propTypes.default.bool.isRequired,
-  size: _types.MODAL_SIZES,
-  subTitle: _propTypes.default.string,
-  title: _propTypes.default.string
-};
-var _default = exports.default = Modal;

package/dist/components/Modal/Modal.scss

@@ -1,149 +0,0 @@
-@import '../../scss/variables';
-@import '../../scss/colors';
-@import '../../scss/borders';
-
-.modal {
-  position: fixed;
-  top: 50%;
-  left: 50%;
-  width: 100%;
-  height: 660px;
-  max-width: 96%;
-  min-width: 300px;
-  max-height: 96%;
-  outline: 0;
-  transform: translate(-50%, -50%);
-  z-index: 9;
-
-  @media screen and (min-width: 1200px) {
-    width: 1000px;
-
-    &.modal-sm {
-      width: 700px;
-    }
-
-    &.modal-lg {
-      width: 1400px;
-    }
-
-    &.modal-max {
-      width: 95vw;
-      height: 95vh;
-    }
-  }
-
-  &.modal-min {
-    width: 500px;
-    height: auto;
-  }
-
-  &.modal-max {
-    width: 96vw;
-    height: 94vw;
-  }
-
-  &__content {
-    display: flex;
-    flex-flow: column nowrap;
-    position: relative;
-    min-height: inherit;
-    height: 100%;
-    width: 100%;
-    max-height: 100%;
-    background-color: $white;
-    border-radius: $modalBorderRadius;
-    box-shadow: 0 6px 26px rgba($black, 0.2);
-    text-align: left;
-  }
-
-  &__header {
-    position: relative;
-    border-bottom: $primaryBorder;
-    min-height: 92px;
-    padding: 1rem 3rem;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-direction: column;
-
-    &-title {
-      color: $primary;
-      font-size: 2em;
-      text-transform: capitalize;
-      margin: 0;
-    }
-
-    &-sub-title {
-      color: $topaz;
-      font-size: 1.5em;
-      font-weight: 500;
-      margin: 10px 0 0;
-    }
-
-    &-preview-text {
-      position: absolute;
-      top: 1rem;
-      left: 1rem;
-      font-size: 1rem;
-    }
-
-    &-button {
-      position: absolute;
-      top: 10px;
-      right: 10px;
-    }
-  }
-
-  &__body {
-    overflow-y: auto;
-    overflow-x: hidden;
-    flex: 1 0;
-    padding: 1.5rem 2rem 0;
-    margin-bottom: 1rem;
-  }
-
-  &__footer {
-    display: flex;
-    flex-flow: row nowrap;
-    flex-shrink: 0;
-    justify-content: space-between;
-    padding: 1rem 2rem;
-    min-height: 50px;
-
-    &-actions {
-      display: flex;
-      flex: 1 0 auto;
-      justify-content: flex-end;
-      align-items: center;
-
-      & > *:not(:last-child) {
-        margin-right: 10px;
-      }
-    }
-  }
-
-  &-transition {
-    &-enter {
-      opacity: 0;
-      transform: translate(-50%, calc(100vh));
-    }
-
-    &-enter-active,
-    &-enter-done {
-      opacity: 1;
-      transform: translate(-50%, -50%);
-      transition: all 0.3s ease-in-out;
-    }
-
-    &-exit {
-      opacity: 1;
-      transform: translate(-50%, -50%);
-    }
-
-    &-exit-active {
-      opacity: 0;
-      transform: translate(-50%, -70%);
-      transition: all 0.3s ease-in-out;
-    }
-  }
-}