iguazio.dashboard-react-controls 2.2.24 → 3.0.0

package/dist/components/FormInput/FormInput.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormInput.mjs","sources":["../../../src/lib/components/FormInput/FormInput.jsx"],"sourcesContent":["/*\nCopyright 2022 Iguazio Systems Ltd.\nLicensed under the Apache License, Version 2.0 (the \"License\") with\nan addition restriction as set forth herein. You may not use this\nfile except in compliance with the License. You may obtain a copy of\nthe License at http://www.apache.org/licenses/LICENSE-2.0.\nUnless required by applicable law or agreed to in writing, software\ndistributed under the License is distributed on an \"AS IS\" BASIS,\nWITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or\nimplied. See the License for the specific language governing\npermissions and limitations under the License.\nIn addition, you may not use the software for any purposes that are\nillegal under applicable law, and the grant of the foregoing license\nunder the Apache 2.0 license is conditioned upon your compliance with\nsuch restriction.\n*/\nimport React, { useState, useEffect, useRef, forwardRef } from 'react'\nimport PropTypes from 'prop-types'\nimport classNames from 'classnames'\nimport { isEmpty, isNil } from 'lodash'\nimport { Field, useField } from 'react-final-form'\n\nimport InputNumberButtons from './InputNumberButtons/InputNumberButtons'\nimport OptionsMenu from '../../elements/OptionsMenu/OptionsMenu'\nimport ValidationTemplate from '../../elements/ValidationTemplate/ValidationTemplate'\nimport { TextTooltipTemplate, Tip, Tooltip } from '../../components'\n\nimport { DENSITY, INPUT_LINK, INPUT_VALIDATION_RULES } from '../../types'\nimport { checkPatternsValidity, checkPatternsValidityAsync } from '../../utils/validation.util'\nimport { useDetectOutsideClick, useDebounce } from '../../hooks'\nimport { validation as ValidationConstants } from '../../constants'\n\nimport ExclamationMarkIcon from '../../images/exclamation-mark.svg?react'\nimport Popout from '../../images/popout.svg?react'\nimport WarningIcon from '../../images/warning.svg?react'\n\nimport './formInput.scss'\n\nconst defaultProps = {\n  iconClick: () => {},\n  link: { show: '', value: '' },\n  onBlur: () => {},\n  onKeyDown: () => {},\n  onValidationError: () => {},\n  validator: () => {},\n  rules: []\n}\n\nlet FormInput = (\n  {\n    async = false,\n    className = '',\n    customRequiredLabel = '',\n    density = 'normal',\n    disabled = false,\n    focused = false,\n    iconClass = '',\n    iconClick = defaultProps.iconClick,\n    inputIcon = null,\n    invalidText = 'This field is invalid',\n    label = '',\n    link = defaultProps.link,\n    name,\n    onBlur = defaultProps.onBlur,\n    onFocus,\n    onKeyDown = defaultProps.onKeyDown,\n    pattern = null,\n    required = false,\n    onValidationError = defaultProps.onValidationError,\n    suggestionList = [],\n    step = '1',\n    tip = '',\n    type = 'text',\n    validationRules: rules = defaultProps.rules,\n    validator = defaultProps.validator,\n    withoutBorder = false,\n    ...inputProps\n  },\n  ref\n) => {\n  const { input, meta } = useField(name)\n  const [isInvalid, setIsInvalid] = useState(false)\n  const [isFocused, setIsFocused] = useState(false)\n  const [typedValue, setTypedValue] = useState('')\n  const [validationPattern] = useState(RegExp(pattern))\n  const [validationRules, setValidationRules] = useState(rules)\n  const [showValidationRules, setShowValidationRules] = useState(false)\n  const wrapperRef = useRef()\n  ref ??= wrapperRef\n  const inputRef = useRef()\n  const errorsRef = useRef()\n  const isRequiredRulePresentRef = useRef(false)\n  useDetectOutsideClick(ref, () => setShowValidationRules(false))\n  const debounceAsync = useDebounce()\n\n  const formFieldClassNames = classNames('form-field-input', className)\n\n  const inputWrapperClassNames = classNames(\n    'form-field__wrapper',\n    `form-field__wrapper-${density}`,\n    disabled && 'form-field__wrapper-disabled',\n    isInvalid && 'form-field__wrapper-invalid',\n    withoutBorder && 'without-border'\n  )\n  const labelClassNames = classNames('form-field__label', disabled && 'form-field__label-disabled')\n\n  useEffect(() => {\n    setTypedValue(String(input.value)) // convert from number to string\n  }, [input.value])\n\n  useEffect(() => {\n    const isInputInvalid =\n      errorsRef.current &&\n      meta.invalid &&\n      (meta.validating || meta.modified || (meta.submitFailed && meta.touched))\n    setIsInvalid(isInputInvalid)\n    onValidationError(isInputInvalid)\n  }, [\n    meta.invalid,\n    meta.modified,\n    meta.submitFailed,\n    meta.touched,\n    meta.validating,\n    onValidationError\n  ])\n\n  useEffect(() => {\n    if (!errorsRef.current) {\n      if (meta.valid && showValidationRules) {\n        setShowValidationRules(false)\n      }\n    }\n  }, [meta.valid, showValidationRules])\n\n  useEffect(() => {\n    if (showValidationRules) {\n      window.addEventListener('scroll', handleScroll, true)\n    }\n    return () => {\n      window.removeEventListener('scroll', handleScroll, true)\n    }\n  }, [showValidationRules])\n\n  useEffect(() => {\n    if (focused) {\n      inputRef.current.focus()\n    }\n  }, [focused])\n\n  useEffect(() => {\n    setValidationRules(() => {\n      isRequiredRulePresentRef.current = false\n\n      return rules.map(rule => {\n        if (rule.name === ValidationConstants.REQUIRED.NAME) {\n          isRequiredRulePresentRef.current = true\n        }\n\n        return {\n          ...rule,\n          isValid:\n            !errorsRef.current || !Array.isArray(errorsRef.current)\n              ? true\n              : !errorsRef.current.some(err => err.name === rule.name)\n        }\n      })\n    })\n  }, [rules])\n\n  const getValidationRules = () => {\n    return validationRules.map(({ isValid = false, label, name }) => {\n      return <ValidationTemplate valid={isValid} validationMessage={label} key={name} />\n    })\n  }\n\n  const isValueEmptyAndValid = value => {\n    return (!value && !required) || disabled\n  }\n\n  const handleInputBlur = event => {\n    input.onBlur && input.onBlur(event)\n\n    if (!event.relatedTarget || !event.relatedTarget?.closest('.form-field__suggestion-list')) {\n      setIsFocused(false)\n      onBlur && onBlur(event)\n    }\n  }\n  const handleInputFocus = event => {\n    input.onFocus && input.onFocus(event)\n    onFocus && onFocus(event)\n    setIsFocused(true)\n  }\n\n  const handleInputKeyDown = event => {\n    input.onKeyDown && input.onKeyDown(event)\n    onKeyDown && onKeyDown(event)\n  }\n\n  const handleScroll = event => {\n    if (inputRef.current && inputRef.current.contains(event.target)) return\n\n    if (\n      !event.target.closest('.options-menu') &&\n      !event.target.classList.contains('form-field-input')\n    ) {\n      setShowValidationRules(false)\n    }\n  }\n\n  const handleSuggestionClick = item => {\n    input.onChange && input.onChange(item)\n    setIsFocused(false)\n    onBlur()\n  }\n\n  const toggleValidationRulesMenu = () => {\n    inputRef.current.focus()\n    setShowValidationRules(state => !state)\n  }\n\n  const validateField = (value, allValues) => {\n    let valueToValidate = isNil(value) ? '' : String(value)\n\n    if (isValueEmptyAndValid(valueToValidate)) return\n\n    let validationError = null\n\n    if (required && valueToValidate.trim().length === 0 && !isRequiredRulePresentRef.current) {\n      validationError = {\n        name: 'required',\n        label: customRequiredLabel || 'This field is required'\n      }\n    } else if (!isEmpty(rules) && !async) {\n      const [newRules, isValidField] = checkPatternsValidity(rules, valueToValidate)\n      const invalidRules = newRules.filter(rule => !rule.isValid)\n\n      if (!isValidField) {\n        validationError = invalidRules.map(rule => ({ name: rule.name, label: rule.label }))\n      }\n    }\n\n    if (isEmpty(validationError)) {\n      if (type === 'number') {\n        if (inputProps.max && +valueToValidate > +inputProps.max) {\n          validationError = {\n            name: 'maxValue',\n            label: `The maximum value must be ${inputProps.max}`\n          }\n        }\n\n        if (inputProps.min && +valueToValidate < +inputProps.min) {\n          validationError = {\n            name: 'minValue',\n            label: `The minimum value must be ${inputProps.min}`\n          }\n        }\n      }\n      if (pattern && !validationPattern.test(valueToValidate)) {\n        validationError = { name: 'pattern', label: invalidText }\n      } else if (valueToValidate.startsWith(' ')) {\n        validationError = { name: 'empty', label: invalidText }\n      }\n    }\n\n    if (!validationError && validator) {\n      validationError = validator(value, allValues)\n    }\n\n    errorsRef.current = validationError\n\n    return validationError\n  }\n\n  const validateFieldAsync = debounceAsync(async (value, allValues) => {\n    let valueToValidate = isNil(value) ? '' : String(value)\n\n    if (isValueEmptyAndValid(valueToValidate)) return\n\n    let validationError = validateField(valueToValidate, allValues)\n\n    if (!isEmpty(rules)) {\n      const [newRules, isValidField] = await checkPatternsValidityAsync(rules, valueToValidate)\n\n      const invalidRules = newRules.filter(rule => !rule.isValid)\n\n      if (!isValidField) {\n        validationError = invalidRules.map(rule => ({ name: rule.name, label: rule.label }))\n      }\n    }\n\n    errorsRef.current = validationError\n\n    return validationError\n  }, 400)\n\n  const parseField = val => {\n    return type === 'number' && val ? parseFloat(val) || val : val\n  }\n\n  return (\n    <Field validate={async ? validateFieldAsync : validateField} name={name} parse={parseField}>\n      {({ input }) => {\n        return (\n          <div\n            ref={ref}\n            className={formFieldClassNames}\n            data-testid={name ? `${name}-form-field-input` : 'form-field-input'}\n          >\n            {label && (\n              <div className={labelClassNames}>\n                <label\n                  data-testid={name ? `${name}-form-label` : 'form-label'}\n                  htmlFor={input.name}\n                >\n                  {label}\n                  {(required || validationRules.find(rule => rule.name === 'required')) && (\n                    <span className=\"form-field__label-mandatory\"> *</span>\n                  )}\n                </label>\n                {link && link.show && typedValue.trim() && (\n                  <div className=\"form-field__label-icon\">\n                    <Tooltip template={<TextTooltipTemplate text={link.url || typedValue} />}>\n                      <a\n                        href={link.url || typedValue}\n                        onClick={event => event.stopPropagation()}\n                        target=\"_blank\"\n                        rel=\"noreferrer\"\n                      >\n                        <Popout />\n                      </a>\n                    </Tooltip>\n                  </div>\n                )}\n              </div>\n            )}\n            <div className={inputWrapperClassNames}>\n              <div className=\"form-field__control\">\n                <input\n                  data-testid={name ? `${name}-form-input` : 'form-input'}\n                  id={input.name}\n                  ref={inputRef}\n                  required={isInvalid || required}\n                  {...{\n                    disabled,\n                    pattern,\n                    type,\n                    ...inputProps,\n                    ...input\n                  }}\n                  autoComplete={inputProps.autocomplete ?? 'off'}\n                  onBlur={handleInputBlur}\n                  onKeyDown={handleInputKeyDown}\n                  onFocus={handleInputFocus}\n                />\n              </div>\n              <div className=\"form-field__icons\">\n                {isInvalid && !Array.isArray(errorsRef.current) && (\n                  <Tooltip\n                    className=\"form-field__warning\"\n                    template={\n                      <TextTooltipTemplate text={errorsRef.current?.label ?? invalidText} warning />\n                    }\n                  >\n                    <ExclamationMarkIcon />\n                  </Tooltip>\n                )}\n                {isInvalid && Array.isArray(errorsRef.current) && (\n                  <button className=\"form-field__warning\" onClick={toggleValidationRulesMenu}>\n                    <WarningIcon />\n                  </button>\n                )}\n                {tip && <Tip text={tip} className=\"form-field__tip\" />}\n                {inputIcon && (\n                  <span data-testid=\"input-icon\" className={iconClass} onClick={iconClick}>\n                    {inputIcon}\n                  </span>\n                )}\n              </div>\n              {type === 'number' && (\n                <InputNumberButtons {...{ ...inputProps, step: +step, ...input, disabled }} />\n              )}\n            </div>\n            {suggestionList?.length > 0 && isFocused && (\n              <ul className=\"form-field__suggestion-list\">\n                {suggestionList.map((item, index) => {\n                  return (\n                    <li\n                      className=\"suggestion-item\"\n                      key={`${item}${index}`}\n                      onClick={() => {\n                        handleSuggestionClick(item)\n                      }}\n                      tabIndex={index}\n                      dangerouslySetInnerHTML={{\n                        __html: item.replace(new RegExp(typedValue, 'gi'), match =>\n                          match ? `<b>${match}</b>` : match\n                        )\n                      }}\n                    />\n                  )\n                })}\n              </ul>\n            )}\n            {!isEmpty(validationRules) && isInvalid && Array.isArray(errorsRef.current) && (\n              <OptionsMenu show={showValidationRules} ref={ref}>\n                {getValidationRules()}\n              </OptionsMenu>\n            )}\n          </div>\n        )\n      }}\n    </Field>\n  )\n}\n\nFormInput = React.memo(forwardRef(FormInput))\n\nFormInput.displayName = 'FormInput'\n\nFormInput.propTypes = {\n  async: PropTypes.bool,\n  className: PropTypes.string,\n  customRequiredLabel: PropTypes.string,\n  density: DENSITY,\n  disabled: PropTypes.bool,\n  focused: PropTypes.bool,\n  iconClass: PropTypes.string,\n  iconClick: PropTypes.func,\n  inputIcon: PropTypes.element,\n  invalidText: PropTypes.string,\n  label: PropTypes.string,\n  link: INPUT_LINK,\n  max: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n  min: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n  name: PropTypes.string.isRequired,\n  onBlur: PropTypes.func,\n  onFocus: PropTypes.func,\n  onKeyDown: PropTypes.func,\n  onValidationError: PropTypes.func,\n  pattern: PropTypes.string,\n  placeholder: PropTypes.string,\n  required: PropTypes.bool,\n  step: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n  suggestionList: PropTypes.arrayOf(PropTypes.string),\n  tip: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),\n  type: PropTypes.string,\n  validationRules: INPUT_VALIDATION_RULES,\n  validator: PropTypes.func,\n  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n  withoutBorder: PropTypes.bool\n}\n\nexport default React.memo(FormInput)\n"],"names":["defaultProps","FormInput","async","className","customRequiredLabel","density","disabled","focused","iconClass","iconClick","inputIcon","invalidText","label","link","name","onBlur","onFocus","onKeyDown","pattern","required","onValidationError","suggestionList","step","tip","type","rules","validator","withoutBorder","inputProps","ref","input","meta","useField","isInvalid","setIsInvalid","useState","isFocused","setIsFocused","typedValue","setTypedValue","validationPattern","validationRules","setValidationRules","showValidationRules","setShowValidationRules","wrapperRef","useRef","inputRef","errorsRef","isRequiredRulePresentRef","useDetectOutsideClick","debounceAsync","useDebounce","formFieldClassNames","classNames","inputWrapperClassNames","labelClassNames","useEffect","isInputInvalid","handleScroll","rule","ValidationConstants","err","getValidationRules","isValid","ValidationTemplate","isValueEmptyAndValid","value","handleInputBlur","event","_a","handleInputFocus","handleInputKeyDown","handleSuggestionClick","item","toggleValidationRulesMenu","state","validateField","allValues","valueToValidate","isNil","validationError","isEmpty","newRules","isValidField","checkPatternsValidity","invalidRules","validateFieldAsync","checkPatternsValidityAsync","jsx","Field","val","jsxs","Tooltip","TextTooltipTemplate","Popout","ExclamationMarkIcon","WarningIcon","Tip","InputNumberButtons","index","match","OptionsMenu","React","forwardRef","PropTypes","DENSITY","INPUT_LINK","INPUT_VALIDATION_RULES","FormInput$1"],"mappings":"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"}

package/dist/components/FormInput/FormInput.stories.d.ts

@@ -0,0 +1,14 @@
+declare namespace _default {
+    export let title: string;
+    export { FormInput as component };
+}
+export default _default;
+export const Dense: any;
+export const Normal: any;
+export const Medium: any;
+export const Chunky: any;
+export const withTip: any;
+export const withValidationRules: any;
+export const withLink: any;
+export const Range: any;
+//# sourceMappingURL=FormInput.stories.d.ts.map

package/dist/components/FormInput/FormInput.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormInput.stories.d.ts","sourceRoot":"","sources":["../../../src/lib/components/FormInput/FormInput.stories.js"],"names":[],"mappings":";;;;;AAiCA,wBAAsC;AAOtC,yBAAuC;AAOvC,yBAAuC;AAOvC,yBAAuC;AAOvC,0BAAwC;AAOxC,sCAAoD;AASpD,2BAAyC;AAWzC,wBAAsC"}

package/dist/components/FormInput/InputNumberButtons/InputNumberButtons.d.ts

@@ -0,0 +1,20 @@
+export default InputNumberButtons;
+declare function InputNumberButtons({ disabled, min, max, onChange, step, value }: {
+    disabled?: boolean;
+    min?: any;
+    max?: any;
+    onChange: any;
+    step?: number;
+    value: any;
+}): JSX.Element;
+declare namespace InputNumberButtons {
+    namespace propTypes {
+        let disabled: any;
+        let min: any;
+        let max: any;
+        let onChange: any;
+        let step: any;
+        let value: any;
+    }
+}
+//# sourceMappingURL=InputNumberButtons.d.ts.map

package/dist/components/FormInput/InputNumberButtons/InputNumberButtons.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InputNumberButtons.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/FormInput/InputNumberButtons/InputNumberButtons.jsx"],"names":[],"mappings":";AA0BA;;;;;;;gBAuDC"}

package/dist/components/FormInput/InputNumberButtons/InputNumberButtons.mjs

@@ -0,0 +1,61 @@
+import { jsx as o, jsxs as g } from "react/jsx-runtime";
+import _ from "react";
+import e from "prop-types";
+import { isNil as N } from "lodash";
+import { performFloatOperation as d } from "../../../utils/math.util.mjs";
+import p from "../../../images/range-arrow-small.svg.mjs";
+/* empty css                         */
+let i = ({
+  disabled: u = !1,
+  min: n = null,
+  max: a = null,
+  onChange: c,
+  step: s = 1,
+  value: t
+}) => {
+  const f = (l) => {
+    if (l.preventDefault(), a && t >= a) return;
+    let r = m() ? s : d(t, s, "+");
+    r = a && r > a ? a : r, c(r);
+  }, b = (l) => {
+    if (l.preventDefault(), n && t <= n) return;
+    let r = m() ? -s : d(t, s, "-");
+    r = n && r < n ? n : r, c(r);
+  }, m = () => N(t) || t === "";
+  return /* @__PURE__ */ o("div", { "data-testid": "range-input-container", className: "form-field-range", children: /* @__PURE__ */ g("div", { className: "range__buttons", children: [
+    /* @__PURE__ */ o(
+      "button",
+      {
+        "data-testid": "btn-increase",
+        className: "range__button range__button-increase",
+        disabled: u,
+        onClick: f,
+        children: /* @__PURE__ */ o(p, { className: "increase" })
+      }
+    ),
+    /* @__PURE__ */ o(
+      "button",
+      {
+        "data-testid": "btn-decrease",
+        className: "range__button range__button-decrease",
+        disabled: u,
+        onClick: b,
+        children: /* @__PURE__ */ o(p, { className: "decrease" })
+      }
+    )
+  ] }) });
+};
+i.propTypes = {
+  disabled: e.bool,
+  min: e.oneOfType([e.string, e.number]),
+  max: e.oneOfType([e.string, e.number]),
+  onChange: e.func.isRequired,
+  step: e.number,
+  value: e.oneOfType([e.string, e.number]).isRequired
+};
+i = _.memo(i);
+const D = i;
+export {
+  D as default
+};
+//# sourceMappingURL=InputNumberButtons.mjs.map

package/dist/components/FormInput/InputNumberButtons/InputNumberButtons.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"InputNumberButtons.mjs","sources":["../../../../src/lib/components/FormInput/InputNumberButtons/InputNumberButtons.jsx"],"sourcesContent":["/*\nCopyright 2022 Iguazio Systems Ltd.\nLicensed under the Apache License, Version 2.0 (the \"License\") with\nan addition restriction as set forth herein. You may not use this\nfile except in compliance with the License. You may obtain a copy of\nthe License at http://www.apache.org/licenses/LICENSE-2.0.\nUnless required by applicable law or agreed to in writing, software\ndistributed under the License is distributed on an \"AS IS\" BASIS,\nWITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or\nimplied. See the License for the specific language governing\npermissions and limitations under the License.\nIn addition, you may not use the software for any purposes that are\nillegal under applicable law, and the grant of the foregoing license\nunder the Apache 2.0 license is conditioned upon your compliance with\nsuch restriction.\n*/\nimport React from 'react'\nimport PropTypes from 'prop-types'\nimport { isNil } from 'lodash'\n\nimport { performFloatOperation } from '../../../utils/math.util'\n\nimport Arrow from '../../../images/range-arrow-small.svg?react'\n\nimport './InputNumberButtons.scss'\n\nlet InputNumberButtons = ({\n  disabled = false,\n  min = null,\n  max = null,\n  onChange,\n  step = 1,\n  value\n}) => {\n  const handleIncrease = event => {\n    event.preventDefault()\n    if (max && value >= max) return\n\n    let newValue = isCurrentValueEmpty() ? step : performFloatOperation(value, step, '+')\n    newValue = max && newValue > max ? max : newValue\n\n    onChange(newValue)\n  }\n\n  const handleDecrease = event => {\n    event.preventDefault()\n\n    if (min && value <= min) return\n\n    let newValue = isCurrentValueEmpty() ? -step : performFloatOperation(value, step, '-')\n    newValue = min && newValue < min ? min : newValue\n\n    onChange(newValue)\n  }\n\n  const isCurrentValueEmpty = () => {\n    return isNil(value) || value === ''\n  }\n\n  return (\n    <div data-testid=\"range-input-container\" className=\"form-field-range\">\n      <div className=\"range__buttons\">\n        <button\n          data-testid=\"btn-increase\"\n          className=\"range__button range__button-increase\"\n          disabled={disabled}\n          onClick={handleIncrease}\n        >\n          <Arrow className=\"increase\" />\n        </button>\n        <button\n          data-testid=\"btn-decrease\"\n          className=\"range__button range__button-decrease\"\n          disabled={disabled}\n          onClick={handleDecrease}\n        >\n          <Arrow className=\"decrease\" />\n        </button>\n      </div>\n    </div>\n  )\n}\n\nInputNumberButtons.propTypes = {\n  disabled: PropTypes.bool,\n  min: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n  max: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n  onChange: PropTypes.func.isRequired,\n  step: PropTypes.number,\n  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired\n}\n\nInputNumberButtons = React.memo(InputNumberButtons)\n\nexport default InputNumberButtons\n"],"names":["InputNumberButtons","disabled","min","max","onChange","step","value","handleIncrease","event","newValue","isCurrentValueEmpty","performFloatOperation","handleDecrease","isNil","jsx","jsxs","Arrow","PropTypes","React","InputNumberButtons$1"],"mappings":";;;;;;;AA0BA,IAAIA,IAAqB,CAAC;AAAA,EACxB,UAAAC,IAAW;AAAA,EACX,KAAAC,IAAM;AAAA,EACN,KAAAC,IAAM;AAAA,EACN,UAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,OAAAC;AACF,MAAM;AACJ,QAAMC,IAAiB,CAASC,MAAA;AAE1B,QADJA,EAAM,eAAe,GACjBL,KAAOG,KAASH,EAAK;AAEzB,QAAIM,IAAWC,MAAwBL,IAAOM,EAAsBL,GAAOD,GAAM,GAAG;AACzE,IAAAI,IAAAN,KAAOM,IAAWN,IAAMA,IAAMM,GAEzCL,EAASK,CAAQ;AAAA,EACnB,GAEMG,IAAiB,CAASJ,MAAA;AAG1B,QAFJA,EAAM,eAAe,GAEjBN,KAAOI,KAASJ,EAAK;AAErB,QAAAO,IAAWC,MAAwB,CAACL,IAAOM,EAAsBL,GAAOD,GAAM,GAAG;AAC1E,IAAAI,IAAAP,KAAOO,IAAWP,IAAMA,IAAMO,GAEzCL,EAASK,CAAQ;AAAA,EACnB,GAEMC,IAAsB,MACnBG,EAAMP,CAAK,KAAKA,MAAU;AAIjC,SAAA,gBAAAQ,EAAC,SAAI,eAAY,yBAAwB,WAAU,oBACjD,UAAA,gBAAAC,EAAC,OAAI,EAAA,WAAU,kBACb,UAAA;AAAA,IAAA,gBAAAD;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,eAAY;AAAA,QACZ,WAAU;AAAA,QACV,UAAAb;AAAA,QACA,SAASM;AAAA,QAET,UAAA,gBAAAO,EAACE,GAAM,EAAA,WAAU,WAAW,CAAA;AAAA,MAAA;AAAA,IAC9B;AAAA,IACA,gBAAAF;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,eAAY;AAAA,QACZ,WAAU;AAAA,QACV,UAAAb;AAAA,QACA,SAASW;AAAA,QAET,UAAA,gBAAAE,EAACE,GAAM,EAAA,WAAU,WAAW,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAC9B,EAAA,CACF,EACF,CAAA;AAEJ;AAEAhB,EAAmB,YAAY;AAAA,EAC7B,UAAUiB,EAAU;AAAA,EACpB,KAAKA,EAAU,UAAU,CAACA,EAAU,QAAQA,EAAU,MAAM,CAAC;AAAA,EAC7D,KAAKA,EAAU,UAAU,CAACA,EAAU,QAAQA,EAAU,MAAM,CAAC;AAAA,EAC7D,UAAUA,EAAU,KAAK;AAAA,EACzB,MAAMA,EAAU;AAAA,EAChB,OAAOA,EAAU,UAAU,CAACA,EAAU,QAAQA,EAAU,MAAM,CAAC,EAAE;AACnE;AAEAjB,IAAqBkB,EAAM,KAAKlB,CAAkB;AAElD,MAAAmB,IAAenB;"}

package/dist/components/FormKeyValueTable/FormKeyValueTable.d.ts

@@ -0,0 +1,49 @@
+export default FormKeyValueTable;
+declare function FormKeyValueTable({ actionButtonId, addNewItemLabel, className, defaultKey, disabled, exitEditModeTriggerItem, fieldsPath, formState, isKeyEditable, isKeyRequired, isValueRequired, keyHeader, keyLabel, keyOptions, keyValidationRules, onExitEditModeCallback, valueHeader, valueLabel, valueType, valueValidationRules }: {
+    actionButtonId?: string;
+    addNewItemLabel?: string;
+    className?: string;
+    defaultKey?: string;
+    disabled?: boolean;
+    exitEditModeTriggerItem?: any;
+    fieldsPath: any;
+    formState: any;
+    isKeyEditable?: boolean;
+    isKeyRequired?: boolean;
+    isValueRequired?: boolean;
+    keyHeader?: string;
+    keyLabel?: string;
+    keyOptions?: any;
+    keyValidationRules?: any[];
+    onExitEditModeCallback?: () => void;
+    valueHeader?: string;
+    valueLabel?: string;
+    valueType?: string;
+    valueValidationRules?: any[];
+}): JSX.Element;
+declare namespace FormKeyValueTable {
+    namespace propTypes {
+        export let actionButtonId: any;
+        export let addNewItemLabel: any;
+        export let className: any;
+        export let defaultKey: any;
+        export let disabled: any;
+        export let exitEditModeTriggerItem: any;
+        export let fieldsPath: any;
+        export let formState: any;
+        export let isKeyEditable: any;
+        export let isKeyRequired: any;
+        export let isValueRequired: any;
+        export let keyHeader: any;
+        export let keyLabel: any;
+        export let keyOptions: any;
+        export { INPUT_VALIDATION_RULES as keyValidationRules };
+        export let onExitEditModeCallback: any;
+        export let valueHeader: any;
+        export let valueLabel: any;
+        export let valueType: any;
+        export { INPUT_VALIDATION_RULES as valueValidationRules };
+    }
+}
+import { INPUT_VALIDATION_RULES } from '../../types';
+//# sourceMappingURL=FormKeyValueTable.d.ts.map

package/dist/components/FormKeyValueTable/FormKeyValueTable.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormKeyValueTable.d.ts","sourceRoot":"","sources":["../../../src/lib/components/FormKeyValueTable/FormKeyValueTable.jsx"],"names":[],"mappings":";AA+BA;;;;;;;;;;;;;;;;;;;;;gBAuKC;;;;;;;;;;;;;;;;;;;;;;;;;uCAzKsC,aAAa"}

package/dist/components/FormKeyValueTable/FormKeyValueTable.mjs

@@ -0,0 +1,202 @@
+import { jsx as a, jsxs as m, Fragment as G } from "react/jsx-runtime";
+import "react";
+import e from "prop-types";
+import y from "classnames";
+import { FieldArray as J } from "react-final-form-arrays";
+import Q from "../FormSelect/FormSelect.mjs";
+import N from "../FormInput/FormInput.mjs";
+import g from "../Tooltip/Tooltip.mjs";
+import R from "../TooltipTemplate/TextTooltipTemplate.mjs";
+import W from "../../elements/FormActionButton/FormActionButton.mjs";
+import h from "../../elements/FormRowActions/FormRowActions.mjs";
+import "../../hooks/index.mjs";
+import { INPUT_VALIDATION_RULES as w } from "../../types.mjs";
+import { useFormTable as X } from "../../hooks/useFormTable.hook.mjs";
+const Y = ({
+  actionButtonId: T = "",
+  addNewItemLabel: k = "Add new item",
+  className: q = "",
+  defaultKey: F = "",
+  disabled: s = !1,
+  exitEditModeTriggerItem: C = null,
+  fieldsPath: i,
+  formState: E,
+  isKeyEditable: K = !0,
+  isKeyRequired: V = !0,
+  isValueRequired: A = !0,
+  keyHeader: I = "Key",
+  keyLabel: L = "Key",
+  keyOptions: u = null,
+  keyValidationRules: S = [],
+  onExitEditModeCallback: x = () => {
+  },
+  valueHeader: M = "Value",
+  valueLabel: O = "Value",
+  valueType: d = "text",
+  valueValidationRules: $ = []
+}) => {
+  const j = y(
+    "form-table form-key-value-table",
+    s && "form-table_disabled",
+    q
+  ), {
+    addNewRow: B,
+    applyChanges: _,
+    bottomScrollRef: D,
+    deleteRow: p,
+    discardOrDelete: b,
+    editingItem: t,
+    enterEditMode: H,
+    isCurrentRowEditing: U
+  } = X(E, C, x), z = (l, n) => !l.value.some(({ data: { key: o } }, r) => n.trim() === o.trim() && r !== t.ui.index), f = (l) => /* @__PURE__ */ a(g, { template: /* @__PURE__ */ a(R, { text: l }), children: l });
+  return /* @__PURE__ */ m("div", { className: j, "data-testid": i, children: [
+    /* @__PURE__ */ m("div", { className: "form-table__row form-table__header-row no-hover", children: [
+      /* @__PURE__ */ a("div", { className: "form-table__cell form-table__cell_1", children: I }),
+      /* @__PURE__ */ a("div", { className: "form-table__cell form-table__cell_1", children: M }),
+      /* @__PURE__ */ a("div", { className: "form-table__cell form-table__actions-cell" })
+    ] }),
+    /* @__PURE__ */ a(J, { name: i, children: ({ fields: l }) => {
+      var n;
+      return /* @__PURE__ */ m(G, { children: [
+        l.map((o, r) => {
+          const v = y(
+            "form-table__row",
+            U(o) && "form-table__row_active"
+          );
+          return t && r === t.ui.index && !s ? /* @__PURE__ */ m("div", { className: v, children: [
+            /* @__PURE__ */ a("div", { className: "form-table__cell form-table__cell_1", children: u ? /* @__PURE__ */ a(
+              Q,
+              {
+                name: `${o}.data.key`,
+                density: "normal",
+                options: u
+              }
+            ) : K || t.ui.isNew ? /* @__PURE__ */ a(
+              N,
+              {
+                className: "input_edit",
+                placeholder: L,
+                density: "normal",
+                name: `${o}.data.key`,
+                required: V,
+                validationRules: [
+                  ...S,
+                  {
+                    name: "uniqueness",
+                    label: "Name must be unique",
+                    pattern: (c) => z(l, c)
+                  }
+                ]
+              }
+            ) : f(l.value[r].data.key) }),
+            /* @__PURE__ */ a("div", { className: "form-table__cell form-table__cell_1", children: /* @__PURE__ */ a(
+              N,
+              {
+                className: "input_edit",
+                placeholder: O,
+                density: "normal",
+                name: `${o}.data.value`,
+                type: d,
+                required: A,
+                validationRules: $
+              }
+            ) }),
+            /* @__PURE__ */ a(
+              h,
+              {
+                applyChanges: _,
+                deleteRow: p,
+                discardOrDelete: b,
+                editingItem: t,
+                fieldsPath: i,
+                index: r
+              }
+            )
+          ] }, r) : /* @__PURE__ */ m(
+            "div",
+            {
+              className: v,
+              onClick: (c) => !s && H(c, l, i, r),
+              children: [
+                /* @__PURE__ */ a("div", { className: "form-table__cell form-table__cell_1", children: f(l.value[r].data.key) }),
+                /* @__PURE__ */ a("div", { className: "form-table__cell form-table__cell_1", children: /* @__PURE__ */ a(
+                  g,
+                  {
+                    template: /* @__PURE__ */ a(
+                      R,
+                      {
+                        text: d === "password" ? null : l.value[r].data.value
+                      }
+                    ),
+                    children: d === "password" ? "*****" : l.value[r].data.value
+                  }
+                ) }),
+                /* @__PURE__ */ a(
+                  h,
+                  {
+                    applyChanges: _,
+                    deleteRow: p,
+                    discardOrDelete: b,
+                    editingItem: t,
+                    fieldsPath: i,
+                    index: r
+                  }
+                )
+              ]
+            },
+            r
+          );
+        }),
+        /* @__PURE__ */ a(
+          W,
+          {
+            ref: D,
+            disabled: s,
+            hidden: (n = t == null ? void 0 : t.ui) == null ? void 0 : n.isNew,
+            fields: l,
+            id: T,
+            label: k,
+            onClick: (...o) => B(...o, {
+              data: {
+                key: F || "",
+                value: ""
+              }
+            }),
+            fieldsPath: i
+          }
+        )
+      ] });
+    } })
+  ] });
+};
+Y.propTypes = {
+  actionButtonId: e.string,
+  addNewItemLabel: e.string,
+  className: e.string,
+  defaultKey: e.string,
+  disabled: e.bool,
+  exitEditModeTriggerItem: e.any,
+  fieldsPath: e.string.isRequired,
+  formState: e.shape({}).isRequired,
+  isKeyEditable: e.bool,
+  isKeyRequired: e.bool,
+  isValueRequired: e.bool,
+  keyHeader: e.string,
+  keyLabel: e.string,
+  keyOptions: e.arrayOf(
+    e.shape({
+      label: e.string.isRequired,
+      id: e.string.isRequired
+    })
+  ),
+  keyValidationRules: w,
+  onExitEditModeCallback: e.func,
+  valueHeader: e.string,
+  valueLabel: e.string,
+  valueType: e.string,
+  valueValidationRules: w
+};
+export {
+  Y as default
+};
+//# sourceMappingURL=FormKeyValueTable.mjs.map

package/dist/components/FormKeyValueTable/FormKeyValueTable.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormKeyValueTable.mjs","sources":["../../../src/lib/components/FormKeyValueTable/FormKeyValueTable.jsx"],"sourcesContent":["/*\nCopyright 2022 Iguazio Systems Ltd.\nLicensed under the Apache License, Version 2.0 (the \"License\") with\nan addition restriction as set forth herein. You may not use this\nfile except in compliance with the License. You may obtain a copy of\nthe License at http://www.apache.org/licenses/LICENSE-2.0.\nUnless required by applicable law or agreed to in writing, software\ndistributed under the License is distributed on an \"AS IS\" BASIS,\nWITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or\nimplied. See the License for the specific language governing\npermissions and limitations under the License.\nIn addition, you may not use the software for any purposes that are\nillegal under applicable law, and the grant of the foregoing license\nunder the Apache 2.0 license is conditioned upon your compliance with\nsuch restriction.\n*/\nimport React from 'react'\nimport PropTypes from 'prop-types'\nimport classnames from 'classnames'\nimport { FieldArray } from 'react-final-form-arrays'\n\nimport FormSelect from '../../components/FormSelect/FormSelect'\nimport FormInput from '../../components/FormInput/FormInput'\nimport Tooltip from '../../components/Tooltip/Tooltip'\nimport TextTooltipTemplate from '../../components/TooltipTemplate/TextTooltipTemplate'\nimport FormActionButton from '../../elements/FormActionButton/FormActionButton'\nimport FormRowActions from '../../elements/FormRowActions/FormRowActions'\n\nimport { useFormTable } from '../../hooks'\nimport { INPUT_VALIDATION_RULES } from '../../types'\n\nconst FormKeyValueTable = ({\n  actionButtonId = '',\n  addNewItemLabel = 'Add new item',\n  className = '',\n  defaultKey = '',\n  disabled = false,\n  exitEditModeTriggerItem = null,\n  fieldsPath,\n  formState,\n  isKeyEditable = true,\n  isKeyRequired = true,\n  isValueRequired = true,\n  keyHeader = 'Key',\n  keyLabel = 'Key',\n  keyOptions = null,\n  keyValidationRules = [],\n  onExitEditModeCallback = () => {},\n  valueHeader = 'Value',\n  valueLabel = 'Value',\n  valueType = 'text',\n  valueValidationRules = []\n}) => {\n  const tableClassNames = classnames(\n    'form-table form-key-value-table',\n    disabled && 'form-table_disabled',\n    className\n  )\n  const {\n    addNewRow,\n    applyChanges,\n    bottomScrollRef,\n    deleteRow,\n    discardOrDelete,\n    editingItem,\n    enterEditMode,\n    isCurrentRowEditing\n  } = useFormTable(formState, exitEditModeTriggerItem, onExitEditModeCallback)\n\n  const uniquenessValidator = (fields, newValue) => {\n    return !fields.value.some(({ data: { key } }, index) => {\n      return newValue.trim() === key.trim() && index !== editingItem.ui.index\n    })\n  }\n\n  const getKeyTextTemplate = keyValue => {\n    return <Tooltip template={<TextTooltipTemplate text={keyValue} />}>{keyValue}</Tooltip>\n  }\n\n  return (\n    <div className={tableClassNames} data-testid={fieldsPath}>\n      <div className=\"form-table__row form-table__header-row no-hover\">\n        <div className=\"form-table__cell form-table__cell_1\">{keyHeader}</div>\n        <div className=\"form-table__cell form-table__cell_1\">{valueHeader}</div>\n        <div className=\"form-table__cell form-table__actions-cell\" />\n      </div>\n      <FieldArray name={fieldsPath}>\n        {({ fields }) => (\n          <>\n            {fields.map((rowPath, index) => {\n              const tableRowClassNames = classnames(\n                'form-table__row',\n                isCurrentRowEditing(rowPath) && 'form-table__row_active'\n              )\n\n              return editingItem && index === editingItem.ui.index && !disabled ? (\n                <div className={tableRowClassNames} key={index}>\n                  <div className=\"form-table__cell form-table__cell_1\">\n                    {keyOptions ? (\n                      <FormSelect\n                        name={`${rowPath}.data.key`}\n                        density=\"normal\"\n                        options={keyOptions}\n                      />\n                    ) : isKeyEditable || editingItem.ui.isNew ? (\n                      <FormInput\n                        className=\"input_edit\"\n                        placeholder={keyLabel}\n                        density=\"normal\"\n                        name={`${rowPath}.data.key`}\n                        required={isKeyRequired}\n                        validationRules={[\n                          ...keyValidationRules,\n                          {\n                            name: 'uniqueness',\n                            label: 'Name must be unique',\n                            pattern: newValue => uniquenessValidator(fields, newValue)\n                          }\n                        ]}\n                      />\n                    ) : (\n                      getKeyTextTemplate(fields.value[index].data.key)\n                    )}\n                  </div>\n                  <div className=\"form-table__cell form-table__cell_1\">\n                    <FormInput\n                      className=\"input_edit\"\n                      placeholder={valueLabel}\n                      density=\"normal\"\n                      name={`${rowPath}.data.value`}\n                      type={valueType}\n                      required={isValueRequired}\n                      validationRules={valueValidationRules}\n                    />\n                  </div>\n                  <FormRowActions\n                    applyChanges={applyChanges}\n                    deleteRow={deleteRow}\n                    discardOrDelete={discardOrDelete}\n                    editingItem={editingItem}\n                    fieldsPath={fieldsPath}\n                    index={index}\n                  />\n                </div>\n              ) : (\n                <div\n                  className={tableRowClassNames}\n                  key={index}\n                  onClick={event => !disabled && enterEditMode(event, fields, fieldsPath, index)}\n                >\n                  <div className=\"form-table__cell form-table__cell_1\">\n                    {getKeyTextTemplate(fields.value[index].data.key)}\n                  </div>\n                  <div className=\"form-table__cell form-table__cell_1\">\n                    <Tooltip\n                      template={\n                        <TextTooltipTemplate\n                          text={valueType === 'password' ? null : fields.value[index].data.value}\n                        />\n                      }\n                    >\n                      {valueType === 'password' ? '*****' : fields.value[index].data.value}\n                    </Tooltip>\n                  </div>\n                  <FormRowActions\n                    applyChanges={applyChanges}\n                    deleteRow={deleteRow}\n                    discardOrDelete={discardOrDelete}\n                    editingItem={editingItem}\n                    fieldsPath={fieldsPath}\n                    index={index}\n                  />\n                </div>\n              )\n            })}\n\n            <FormActionButton\n              ref={bottomScrollRef}\n              disabled={disabled}\n              hidden={editingItem?.ui?.isNew}\n              fields={fields}\n              id={actionButtonId}\n              label={addNewItemLabel}\n              onClick={(...addRowArgs) =>\n                addNewRow(...addRowArgs, {\n                  data: {\n                    key: defaultKey || '',\n                    value: ''\n                  }\n                })\n              }\n              fieldsPath={fieldsPath}\n            />\n          </>\n        )}\n      </FieldArray>\n    </div>\n  )\n}\n\nFormKeyValueTable.propTypes = {\n  actionButtonId: PropTypes.string,\n  addNewItemLabel: PropTypes.string,\n  className: PropTypes.string,\n  defaultKey: PropTypes.string,\n  disabled: PropTypes.bool,\n  exitEditModeTriggerItem: PropTypes.any,\n  fieldsPath: PropTypes.string.isRequired,\n  formState: PropTypes.shape({}).isRequired,\n  isKeyEditable: PropTypes.bool,\n  isKeyRequired: PropTypes.bool,\n  isValueRequired: PropTypes.bool,\n  keyHeader: PropTypes.string,\n  keyLabel: PropTypes.string,\n  keyOptions: PropTypes.arrayOf(\n    PropTypes.shape({\n      label: PropTypes.string.isRequired,\n      id: PropTypes.string.isRequired\n    })\n  ),\n  keyValidationRules: INPUT_VALIDATION_RULES,\n  onExitEditModeCallback: PropTypes.func,\n  valueHeader: PropTypes.string,\n  valueLabel: PropTypes.string,\n  valueType: PropTypes.string,\n  valueValidationRules: INPUT_VALIDATION_RULES\n}\n\nexport default FormKeyValueTable\n"],"names":["FormKeyValueTable","actionButtonId","addNewItemLabel","className","defaultKey","disabled","exitEditModeTriggerItem","fieldsPath","formState","isKeyEditable","isKeyRequired","isValueRequired","keyHeader","keyLabel","keyOptions","keyValidationRules","onExitEditModeCallback","valueHeader","valueLabel","valueType","valueValidationRules","tableClassNames","classnames","addNewRow","applyChanges","bottomScrollRef","deleteRow","discardOrDelete","editingItem","enterEditMode","isCurrentRowEditing","useFormTable","uniquenessValidator","fields","newValue","key","index","getKeyTextTemplate","keyValue","jsx","Tooltip","TextTooltipTemplate","jsxs","FieldArray","Fragment","rowPath","tableRowClassNames","FormSelect","FormInput","FormRowActions","event","FormActionButton","_a","addRowArgs","PropTypes","INPUT_VALIDATION_RULES"],"mappings":"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"}

package/dist/components/FormOnChange/FormOnChange.d.ts

@@ -0,0 +1,12 @@
+export default FormOnChange;
+declare function FormOnChange({ handler, name }: {
+    handler: any;
+    name: any;
+}): JSX.Element;
+declare namespace FormOnChange {
+    namespace propTypes {
+        let handler: any;
+        let name: any;
+    }
+}
+//# sourceMappingURL=FormOnChange.d.ts.map

package/dist/components/FormOnChange/FormOnChange.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormOnChange.d.ts","sourceRoot":"","sources":["../../../src/lib/components/FormOnChange/FormOnChange.jsx"],"names":[],"mappings":";AAyCA;;;gBAWC"}

package/dist/components/FormOnChange/FormOnChange.mjs

@@ -0,0 +1,33 @@
+import { jsx as t } from "react/jsx-runtime";
+import { useState as n, useEffect as p } from "react";
+import { Field as a } from "react-final-form";
+import s from "prop-types";
+const u = ({ inputValue: e, handler: o }) => {
+  const [r, i] = n(e);
+  return p(() => {
+    e !== r && (i(e), o(e, r));
+  }, [o, e, r]), null;
+};
+u.propTypes = {
+  inputValue: s.any.isRequired,
+  handler: s.func.isRequired
+};
+const l = ({ handler: e, name: o }) => /* @__PURE__ */ t(
+  a,
+  {
+    name: o,
+    subscription: {
+      value: !0
+    },
+    allowNull: !0,
+    render: ({ input: r }) => /* @__PURE__ */ t(u, { inputValue: r.value, handler: e })
+  }
+);
+l.propTypes = {
+  handler: s.func.isRequired,
+  name: s.string.isRequired
+};
+export {
+  l as default
+};
+//# sourceMappingURL=FormOnChange.mjs.map

package/dist/components/FormOnChange/FormOnChange.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormOnChange.mjs","sources":["../../../src/lib/components/FormOnChange/FormOnChange.jsx"],"sourcesContent":["/*\nCopyright 2019 Iguazio Systems Ltd.\n\nLicensed under the Apache License, Version 2.0 (the \"License\") with\nan addition restriction as set forth herein. You may not use this\nfile except in compliance with the License. You may obtain a copy of\nthe License at http://www.apache.org/licenses/LICENSE-2.0.\n\nUnless required by applicable law or agreed to in writing, software\ndistributed under the License is distributed on an \"AS IS\" BASIS,\nWITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or\nimplied. See the License for the specific language governing\npermissions and limitations under the License.\n\nIn addition, you may not use the software for any purposes that are\nillegal under applicable law, and the grant of the foregoing license\nunder the Apache 2.0 license is conditioned upon your compliance with\nsuch restriction.\n*/\nimport React, { useEffect, useState } from 'react'\nimport { Field } from 'react-final-form'\nimport PropTypes from 'prop-types'\n\nconst OnChangeState = ({ inputValue, handler }) => {\n  const [previousValue, setPreviousValue] = useState(inputValue)\n\n  useEffect(() => {\n    if (inputValue !== previousValue) {\n      setPreviousValue(inputValue)\n      handler(inputValue, previousValue)\n    }\n  }, [handler, inputValue, previousValue])\n\n  return null\n}\n\nOnChangeState.propTypes = {\n  inputValue: PropTypes.any.isRequired,\n  handler: PropTypes.func.isRequired\n}\n\nconst FormOnChange = ({ handler, name }) => {\n  return (\n    <Field\n      name={name}\n      subscription={{\n        value: true\n      }}\n      allowNull\n      render={({ input }) => <OnChangeState inputValue={input.value} handler={handler} />}\n    />\n  )\n}\n\nFormOnChange.propTypes = {\n  handler: PropTypes.func.isRequired,\n  name: PropTypes.string.isRequired\n}\n\nexport default FormOnChange\n"],"names":["OnChangeState","inputValue","handler","previousValue","setPreviousValue","useState","useEffect","PropTypes","FormOnChange","name","jsx","Field","input"],"mappings":";;;;AAuBA,MAAMA,IAAgB,CAAC,EAAE,YAAAC,GAAY,SAAAC,QAAc;AACjD,QAAM,CAACC,GAAeC,CAAgB,IAAIC,EAASJ,CAAU;AAE7D,SAAAK,EAAU,MAAM;AACd,IAAIL,MAAeE,MACjBC,EAAiBH,CAAU,GAC3BC,EAAQD,GAAYE,CAAa;AAAA,EAElC,GAAA,CAACD,GAASD,GAAYE,CAAa,CAAC,GAEhC;AACT;AAEAH,EAAc,YAAY;AAAA,EACxB,YAAYO,EAAU,IAAI;AAAA,EAC1B,SAASA,EAAU,KAAK;AAC1B;AAEA,MAAMC,IAAe,CAAC,EAAE,SAAAN,GAAS,MAAAO,QAE7B,gBAAAC;AAAA,EAACC;AAAA,EAAA;AAAA,IACC,MAAAF;AAAA,IACA,cAAc;AAAA,MACZ,OAAO;AAAA,IACT;AAAA,IACA,WAAS;AAAA,IACT,QAAQ,CAAC,EAAE,OAAAG,EAAM,wBAAOZ,GAAc,EAAA,YAAYY,EAAM,OAAO,SAAAV,EAAkB,CAAA;AAAA,EAAA;AACnF;AAIJM,EAAa,YAAY;AAAA,EACvB,SAASD,EAAU,KAAK;AAAA,EACxB,MAAMA,EAAU,OAAO;AACzB;"}

package/dist/components/FormRadio/FormRadio.d.ts

@@ -0,0 +1,19 @@
+export default FormRadio;
+declare function FormRadio({ className, name, label, readOnly, tooltip, ...inputProps }: {
+    [x: string]: any;
+    className?: string;
+    name: any;
+    label: any;
+    readOnly?: boolean;
+    tooltip?: string;
+}): JSX.Element;
+declare namespace FormRadio {
+    namespace propTypes {
+        let className: any;
+        let label: any;
+        let name: any;
+        let readOnly: any;
+        let tooltip: any;
+    }
+}
+//# sourceMappingURL=FormRadio.d.ts.map

package/dist/components/FormRadio/FormRadio.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormRadio.d.ts","sourceRoot":"","sources":["../../../src/lib/components/FormRadio/FormRadio.jsx"],"names":[],"mappings":";AA0BA;;;;;;;gBA2CC"}

package/dist/components/FormRadio/FormRadio.mjs

@@ -0,0 +1,57 @@
+import { jsx as l, jsxs as h } from "react/jsx-runtime";
+import v from "react";
+import o from "prop-types";
+import { Field as p } from "react-final-form";
+import m from "classnames";
+import u from "../Tooltip/Tooltip.mjs";
+import y from "../TooltipTemplate/TextTooltipTemplate.mjs";
+/* empty css                */
+let a = ({
+  className: s = "",
+  name: e,
+  label: i,
+  readOnly: c = !1,
+  tooltip: t = "",
+  ...r
+}) => {
+  const f = m(
+    "form-field-radio",
+    c && "form-field-radio_readonly",
+    s
+  );
+  return /* @__PURE__ */ l(p, { name: e, value: r.value, type: "radio", children: ({ input: d }) => /* @__PURE__ */ h(
+    "div",
+    {
+      className: f,
+      "data-testid": e ? `${e}-${r.value}-form-radio` : "form-field-radio",
+      children: [
+        /* @__PURE__ */ l(
+          "input",
+          {
+            className: m(d.checked ? "checked" : "unchecked"),
+            type: "radio",
+            "data-testid": e ? `${e}-${r.value}-radio` : "form-radio",
+            ...d,
+            ...r,
+            checked: d.checked,
+            id: e + r.value
+          }
+        ),
+        t ? /* @__PURE__ */ l(u, { className: "label", template: /* @__PURE__ */ l(y, { text: t }), children: /* @__PURE__ */ l("label", { htmlFor: e + r.value, children: i }) }) : /* @__PURE__ */ l("label", { htmlFor: e + r.value, children: i })
+      ]
+    }
+  ) });
+};
+a.propTypes = {
+  className: o.string,
+  label: o.string.isRequired,
+  name: o.string.isRequired,
+  readOnly: o.bool,
+  tooltip: o.string
+};
+a = v.memo(a);
+const g = a;
+export {
+  g as default
+};
+//# sourceMappingURL=FormRadio.mjs.map

package/dist/components/FormRadio/FormRadio.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormRadio.mjs","sources":["../../../src/lib/components/FormRadio/FormRadio.jsx"],"sourcesContent":["/*\nCopyright 2022 Iguazio Systems Ltd.\nLicensed under the Apache License, Version 2.0 (the \"License\") with\nan addition restriction as set forth herein. You may not use this\nfile except in compliance with the License. You may obtain a copy of\nthe License at http://www.apache.org/licenses/LICENSE-2.0.\nUnless required by applicable law or agreed to in writing, software\ndistributed under the License is distributed on an \"AS IS\" BASIS,\nWITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or\nimplied. See the License for the specific language governing\npermissions and limitations under the License.\nIn addition, you may not use the software for any purposes that are\nillegal under applicable law, and the grant of the foregoing license\nunder the Apache 2.0 license is conditioned upon your compliance with\nsuch restriction.\n*/\nimport React from 'react'\nimport PropTypes from 'prop-types'\nimport { Field } from 'react-final-form'\nimport classNames from 'classnames'\n\nimport Tooltip from '../Tooltip/Tooltip'\nimport TextTooltipTemplate from '../TooltipTemplate/TextTooltipTemplate'\n\nimport './FormRadio.scss'\n\nlet FormRadio = ({\n  className = '',\n  name,\n  label,\n  readOnly = false,\n  tooltip = '',\n  ...inputProps\n}) => {\n  const formFieldClassNames = classNames(\n    'form-field-radio',\n    readOnly && 'form-field-radio_readonly',\n    className\n  )\n\n  return (\n    <Field name={name} value={inputProps.value} type=\"radio\">\n      {({ input }) => (\n        <div\n          className={formFieldClassNames}\n          data-testid={name ? `${name}-${inputProps.value}-form-radio` : 'form-field-radio'}\n        >\n          <input\n            className={classNames(input.checked ? 'checked' : 'unchecked')}\n            type=\"radio\"\n            data-testid={name ? `${name}-${inputProps.value}-radio` : 'form-radio'}\n            {...{\n              ...input,\n              ...inputProps\n            }}\n            checked={input.checked}\n            id={name + inputProps.value}\n          />\n          {tooltip ? (\n            <Tooltip className=\"label\" template={<TextTooltipTemplate text={tooltip} />}>\n              <label htmlFor={name + inputProps.value}>{label}</label>\n            </Tooltip>\n          ) : (\n            <label htmlFor={name + inputProps.value}>{label}</label>\n          )}\n        </div>\n      )}\n    </Field>\n  )\n}\n\nFormRadio.propTypes = {\n  className: PropTypes.string,\n  label: PropTypes.string.isRequired,\n  name: PropTypes.string.isRequired,\n  readOnly: PropTypes.bool,\n  tooltip: PropTypes.string\n}\n\nFormRadio = React.memo(FormRadio)\n\nexport default FormRadio\n"],"names":["FormRadio","className","name","label","readOnly","tooltip","inputProps","formFieldClassNames","classNames","jsx","Field","input","jsxs","Tooltip","TextTooltipTemplate","PropTypes","React","FormRadio$1"],"mappings":";;;;;;;;AA0BA,IAAIA,IAAY,CAAC;AAAA,EACf,WAAAC,IAAY;AAAA,EACZ,MAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,SAAAC,IAAU;AAAA,EACV,GAAGC;AACL,MAAM;AACJ,QAAMC,IAAsBC;AAAAA,IAC1B;AAAA,IACAJ,KAAY;AAAA,IACZH;AAAA,EACF;AAGE,SAAA,gBAAAQ,EAACC,GAAM,EAAA,MAAAR,GAAY,OAAOI,EAAW,OAAO,MAAK,SAC9C,UAAA,CAAC,EAAE,OAAAK,EACF,MAAA,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWL;AAAA,MACX,eAAaL,IAAO,GAAGA,CAAI,IAAII,EAAW,KAAK,gBAAgB;AAAA,MAE/D,UAAA;AAAA,QAAA,gBAAAG;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWD,EAAWG,EAAM,UAAU,YAAY,WAAW;AAAA,YAC7D,MAAK;AAAA,YACL,eAAaT,IAAO,GAAGA,CAAI,IAAII,EAAW,KAAK,WAAW;AAAA,YAExD,GAAGK;AAAA,YACH,GAAGL;AAAA,YAEL,SAASK,EAAM;AAAA,YACf,IAAIT,IAAOI,EAAW;AAAA,UAAA;AAAA,QACxB;AAAA,QACCD,IACE,gBAAAI,EAAAI,GAAA,EAAQ,WAAU,SAAQ,UAAU,gBAAAJ,EAACK,GAAoB,EAAA,MAAMT,EAAS,CAAA,GACvE,UAAC,gBAAAI,EAAA,SAAA,EAAM,SAASP,IAAOI,EAAW,OAAQ,UAAAH,EAAA,CAAM,EAClD,CAAA,IAEC,gBAAAM,EAAA,SAAA,EAAM,SAASP,IAAOI,EAAW,OAAQ,UAAMH,EAAA,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,GAIxD;AAEJ;AAEAH,EAAU,YAAY;AAAA,EACpB,WAAWe,EAAU;AAAA,EACrB,OAAOA,EAAU,OAAO;AAAA,EACxB,MAAMA,EAAU,OAAO;AAAA,EACvB,UAAUA,EAAU;AAAA,EACpB,SAASA,EAAU;AACrB;AAEAf,IAAYgB,EAAM,KAAKhB,CAAS;AAEhC,MAAAiB,IAAejB;"}

package/dist/components/FormRadio/FormRadio.stories.d.ts

@@ -0,0 +1,7 @@
+declare namespace _default {
+    export let title: string;
+    export { FormRadio as component };
+}
+export default _default;
+export const Normal: any;
+//# sourceMappingURL=FormRadio.stories.d.ts.map

package/dist/components/FormRadio/FormRadio.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormRadio.stories.d.ts","sourceRoot":"","sources":["../../../src/lib/components/FormRadio/FormRadio.stories.js"],"names":[],"mappings":";;;;;AAkCA,yBAAuC"}