iguazio.dashboard-react-controls 2.2.25 → 3.0.1

package/dist/components/FormSelect/FormSelect.d.ts

@@ -0,0 +1,43 @@
+export default FormSelect;
+declare function FormSelect({ className, density, disabled, hideSelectedOption, label, multiple, name, onChange, options, preventWidthOverflow, required, scrollToView, search, selectedItemAction, tooltip, withSelectedIcon, withoutBorder }: {
+    className?: string;
+    density?: string;
+    disabled?: boolean;
+    hideSelectedOption?: boolean;
+    label?: string;
+    multiple?: boolean;
+    name: any;
+    onChange?: any;
+    options: any;
+    preventWidthOverflow?: boolean;
+    required?: boolean;
+    scrollToView?: boolean;
+    search?: boolean;
+    selectedItemAction?: any;
+    tooltip?: string;
+    withSelectedIcon?: boolean;
+    withoutBorder?: boolean;
+}): JSX.Element;
+declare namespace FormSelect {
+    namespace propTypes {
+        export let className: any;
+        export { DENSITY as density };
+        export let disabled: any;
+        export let hideSelectedOption: any;
+        export let label: any;
+        export let multiple: any;
+        export let name: any;
+        export let onChange: any;
+        export let options: any;
+        export let preventWidthOverflow: any;
+        export let required: any;
+        export let scrollToView: any;
+        export let search: any;
+        export let selectedItemAction: any;
+        export let tooltip: any;
+        export let withSelectedIcon: any;
+        export let withoutBorder: any;
+    }
+}
+import { DENSITY } from '../../types';
+//# sourceMappingURL=FormSelect.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FormSelect.d.ts","sourceRoot":"","sources":["../../../src/lib/components/FormSelect/FormSelect.jsx"],"names":[],"mappings":";AAkCA;;;;;;;;;;;;;;;;;;gBA6WC;;;;;;;;;;;;;;;;;;;;;;wBApXuC,aAAa"}

package/dist/components/FormSelect/FormSelect.mjs

@@ -0,0 +1,257 @@
+import { jsx as l, jsxs as _, Fragment as ce } from "react/jsx-runtime";
+import fe, { useState as C, useRef as N, useCallback as u, useMemo as ue, useEffect as S } from "react";
+import r from "prop-types";
+import $ from "classnames";
+import { useField as me, Field as pe } from "react-final-form";
+import he from "../ConfirmDialog/ConfirmDialog.mjs";
+import ve from "../PopUpDialog/PopUpDialog.mjs";
+import _e from "../../elements/SelectOption/SelectOption.mjs";
+import H from "../TooltipTemplate/TextTooltipTemplate.mjs";
+import M from "../Tooltip/Tooltip.mjs";
+import { SELECT_OPTIONS as be, DENSITY as ge } from "../../types.mjs";
+import { TERTIARY_BUTTON as we } from "../../constants.mjs";
+import Ce from "../../images/dropdown.svg.mjs";
+/* empty css                 */
+let O = ({
+  className: Y = "",
+  density: z = "normal",
+  disabled: T = !1,
+  hideSelectedOption: I = !1,
+  label: P = "",
+  multiple: d = !1,
+  name: c,
+  onChange: B = null,
+  options: m,
+  preventWidthOverflow: G = !1,
+  required: J = !1,
+  scrollToView: b = !0,
+  search: h = !1,
+  selectedItemAction: a = null,
+  tooltip: D = "",
+  withSelectedIcon: K = !0,
+  withoutBorder: Q = !1
+}) => {
+  var U;
+  const { input: t, meta: s } = me(c), [X, Z] = C(!1), [j, g] = C(!1), [i, q] = C(!1), [v, V] = C(""), w = N(), A = N(), p = N(), y = N(), { width: L } = ((U = p == null ? void 0 : p.current) == null ? void 0 : U.getBoundingClientRect()) || {}, ee = $(
+    "form-field__wrapper",
+    `form-field__wrapper-${z}`,
+    T && "form-field__wrapper-disabled",
+    i && "form-field__wrapper-active",
+    X && "form-field__wrapper-invalid",
+    Q && "without-border"
+  ), le = $(
+    "form-field__label",
+    T && "form-field__label-disabled"
+  ), te = $(
+    "form-field__select-value",
+    !t.value && "form-field__select-placeholder"
+  ), E = m.find((e) => e.id === t.value), F = u(
+    (e) => e.filter((o) => !h || o.label.toLowerCase().includes(v.toLowerCase())),
+    [h, v]
+  ), oe = ue(() => {
+    if (b)
+      return F(m);
+    const e = [...m], o = e.filter((n, R, de) => n.id === t.value ? (de.splice(R, 1), !0) : !1);
+    return F([...o, ...e]);
+  }, [t.value, F, m, b]), re = () => {
+    if (!t.value || !t.value.length)
+      return `Select Option${d ? "s" : ""}`;
+    const e = d && t.value.includes("all") && t.value.length > 1 ? m.filter((o) => o.id !== "all").filter((o) => t.value.includes(o.id)).map((o) => o.label).join(", ") : m.filter((o) => t.value.includes(o.id)).map((o) => o.label).join(", ");
+    return d ? t.value.length <= 2 ? e : `${t.value.length} items selected` : E == null ? void 0 : E.label;
+  };
+  S(() => {
+    Z(
+      s.invalid && (s.validating || s.modified || s.submitFailed && s.touched)
+    );
+  }, [s.invalid, s.modified, s.submitFailed, s.touched, s.validating]);
+  const ie = u(() => {
+    i || (q(!0), t.onFocus(new Event("focus")));
+  }, [t, i]), f = u(() => {
+    i && (q(!1), t.onBlur(new Event("blur")));
+  }, [t, i]), k = u(
+    (e) => {
+      p.current !== e.target.closest(".form-field-select") && f();
+    },
+    [f]
+  ), x = u(
+    (e) => {
+      e.target.closest(".options-list__body") || f();
+    },
+    [f]
+  );
+  S(() => (i && window.addEventListener("scroll", x, !0), window.addEventListener("click", k), () => {
+    window.removeEventListener("click", k), window.removeEventListener("scroll", x, !0);
+  }), [k, x, i]);
+  const W = u(() => {
+    const e = w.current.querySelector(
+      `[data-custom-id="${t.value}"]`
+    );
+    e && (v ? w.current.scrollTo({ top: 0, left: 0, behavior: "smooth" }) : setTimeout(() => {
+      e.scrollIntoView({
+        behavior: "smooth",
+        block: "center"
+      });
+    }, 0));
+  }, [t.value, v]);
+  S(() => {
+    i && w.current && b && W();
+  }, [i, W, b]), S(() => {
+    i && h && y.current && y.current.focus();
+  }, [i, h]);
+  const ae = () => {
+    i ? f() : !T && ie();
+  }, se = u(
+    (e) => {
+      e.stopPropagation(), !d && !e.target.classList.contains("disabled") && !e.target.closest(".options-list__search") && (f(), V(""));
+    },
+    [f, d]
+  ), ne = (e, o) => {
+    e !== t.value && (o.handler && o.handler(), B && B(e), setTimeout(() => {
+      t.onChange(e);
+    }));
+  };
+  return /* @__PURE__ */ l(pe, { name: c, validate: (e) => {
+    if (J)
+      return e ? void 0 : "Required";
+  }, children: ({ input: e, meta: o }) => /* @__PURE__ */ l(
+    M,
+    {
+      className: "select-tooltip",
+      template: /* @__PURE__ */ l(H, { text: D }),
+      hidden: !D,
+      children: /* @__PURE__ */ _(
+        "div",
+        {
+          "data-testid": c ? `${c}-form-field-select` : "form-field-select",
+          ref: p,
+          className: `form-field-select ${Y}`,
+          onClick: ae,
+          children: [
+            P && /* @__PURE__ */ l("div", { className: le, children: /* @__PURE__ */ _("label", { "data-testid": c ? `${c}-form-select-label` : "form-select-label", children: [
+              P,
+              o.error && /* @__PURE__ */ l("span", { className: "form-field__label-mandatory", children: " *" })
+            ] }) }),
+            /* @__PURE__ */ _("div", { "data-testid": "select-header", className: ee, children: [
+              /* @__PURE__ */ l("div", { className: "form-field__control", children: !I && /* @__PURE__ */ l("div", { "data-testid": "selected-option", className: "form-field__select", children: /* @__PURE__ */ l("span", { className: te, children: re() }) }) }),
+              /* @__PURE__ */ _("div", { className: "form-field__icons", children: [
+                e.value && a && /* @__PURE__ */ l(ce, { children: a.handler ? /* @__PURE__ */ l(M, { template: /* @__PURE__ */ l(H, { text: a.tooltip }), children: /* @__PURE__ */ l(
+                  "button",
+                  {
+                    onClick: (n) => {
+                      a.confirm ? g(!0) : a.handler(e.value), n.stopPropagation();
+                    },
+                    children: a.icon
+                  }
+                ) }) : /* @__PURE__ */ l("span", { children: a.icon }) }),
+                /* @__PURE__ */ l("span", { children: /* @__PURE__ */ l(Ce, { className: "form-field__caret" }) })
+              ] })
+            ] }),
+            j && /* @__PURE__ */ l(
+              he,
+              {
+                cancelButton: {
+                  handler: () => {
+                    g(!1);
+                  },
+                  label: "Cancel",
+                  variant: we
+                },
+                closePopUp: () => {
+                  g(!1);
+                },
+                confirmButton: {
+                  handler: () => {
+                    a.handler(e.value), g(!1);
+                  },
+                  label: a.confirm.btnConfirmLabel,
+                  variant: a.confirm.btnConfirmType
+                },
+                header: a.confirm.title,
+                isOpen: j,
+                message: a.confirm.message
+              }
+            ),
+            i && /* @__PURE__ */ l(
+              ve,
+              {
+                className: "form-field form-field-select__options-list",
+                headerIsHidden: !0,
+                ref: A,
+                customPosition: {
+                  element: p,
+                  position: "bottom-right",
+                  autoHorizontalPosition: !0
+                },
+                style: {
+                  maxWidth: `${L < 500 && !G ? 500 : L}px`,
+                  minWidth: `${L}px`
+                },
+                children: /* @__PURE__ */ _(
+                  "div",
+                  {
+                    "data-testid": "select-body",
+                    className: "options-list__body",
+                    onClick: se,
+                    children: [
+                      h && /* @__PURE__ */ l("div", { className: "options-list__search", children: /* @__PURE__ */ l(
+                        "input",
+                        {
+                          type: "text",
+                          placeholder: "Search...",
+                          value: v,
+                          onChange: (n) => V(n.target.value),
+                          ref: y,
+                          autoFocus: !0
+                        }
+                      ) }),
+                      /* @__PURE__ */ l("ul", { className: "options-list", ref: w, children: oe.map((n) => /* @__PURE__ */ l(
+                        _e,
+                        {
+                          item: n,
+                          name: c,
+                          onClick: (R) => {
+                            ne(R, n);
+                          },
+                          multiple: d,
+                          selectedId: d ? "" : e.value,
+                          withSelectedIcon: K
+                        },
+                        n.id
+                      )) })
+                    ]
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ l("input", { ...e, type: "hidden" })
+          ]
+        }
+      )
+    }
+  ) });
+};
+O.propTypes = {
+  className: r.string,
+  density: ge,
+  disabled: r.bool,
+  hideSelectedOption: r.bool,
+  label: r.string,
+  multiple: r.bool,
+  name: r.string.isRequired,
+  onChange: r.func,
+  options: be.isRequired,
+  preventWidthOverflow: r.bool,
+  required: r.bool,
+  scrollToView: r.bool,
+  search: r.bool,
+  selectedItemAction: r.object,
+  tooltip: r.string,
+  withSelectedIcon: r.bool,
+  withoutBorder: r.bool
+};
+O = fe.memo(O);
+const je = O;
+export {
+  je as default
+};
+//# sourceMappingURL=FormSelect.mjs.map

package/dist/components/FormSelect/FormSelect.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormSelect.mjs","sources":["../../../src/lib/components/FormSelect/FormSelect.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, useCallback, useMemo, useRef } from 'react'\nimport PropTypes from 'prop-types'\nimport classNames from 'classnames'\nimport { Field, useField } from 'react-final-form'\n\nimport ConfirmDialog from '../ConfirmDialog/ConfirmDialog'\nimport PopUpDialog from '../PopUpDialog/PopUpDialog'\nimport SelectOption from '../../elements/SelectOption/SelectOption'\nimport TextTooltipTemplate from '../TooltipTemplate/TextTooltipTemplate'\nimport Tooltip from '../Tooltip/Tooltip'\n\nimport { DENSITY, SELECT_OPTIONS } from '../../types'\nimport { TERTIARY_BUTTON } from '../../constants'\n\nimport Caret from '../../images/dropdown.svg?react'\n\nimport './formSelect.scss'\n\nlet FormSelect = ({\n  className = '',\n  density = 'normal',\n  disabled = false,\n  hideSelectedOption = false,\n  label = '',\n  multiple = false,\n  name,\n  onChange = null,\n  options,\n  preventWidthOverflow = false,\n  required = false,\n  scrollToView = true,\n  search = false,\n  selectedItemAction = null,\n  tooltip = '',\n  withSelectedIcon = true,\n  withoutBorder = false\n}) => {\n  const { input, meta } = useField(name)\n  const [isInvalid, setIsInvalid] = useState(false)\n  const [isConfirmDialogOpen, setConfirmDialogOpen] = useState(false)\n  const [isOpen, setIsOpen] = useState(false)\n  const [searchValue, setSearchValue] = useState('')\n  const optionsListRef = useRef()\n  const popUpRef = useRef()\n  const selectRef = useRef()\n  const searchRef = useRef()\n  const { width: selectWidth } = selectRef?.current?.getBoundingClientRect() || {}\n\n  const selectWrapperClassNames = classNames(\n    'form-field__wrapper',\n    `form-field__wrapper-${density}`,\n    disabled && 'form-field__wrapper-disabled',\n    isOpen && 'form-field__wrapper-active',\n    isInvalid && 'form-field__wrapper-invalid',\n    withoutBorder && 'without-border'\n  )\n\n  const selectLabelClassName = classNames(\n    'form-field__label',\n    disabled && 'form-field__label-disabled'\n  )\n\n  const selectValueClassName = classNames(\n    'form-field__select-value',\n    !input.value && 'form-field__select-placeholder'\n  )\n\n  const selectedOption = options.find(option => option.id === input.value)\n\n  const getFilteredOptions = useCallback(\n    options => {\n      return options.filter(option => {\n        return !search || option.label.toLowerCase().includes(searchValue.toLowerCase())\n      })\n    },\n    [search, searchValue]\n  )\n\n  const sortedOptionsList = useMemo(() => {\n    if (scrollToView) {\n      return getFilteredOptions(options)\n    }\n\n    const optionsList = [...options]\n\n    const selectedOption = optionsList.filter((option, idx, arr) => {\n      if (option.id === input.value) {\n        arr.splice(idx, 1)\n        return true\n      }\n      return false\n    })\n\n    return getFilteredOptions([...selectedOption, ...optionsList])\n  }, [input.value, getFilteredOptions, options, scrollToView])\n\n  const getSelectValue = () => {\n    if (!input.value || !input.value.length) {\n      return `Select Option${multiple ? 's' : ''}`\n    }\n\n    const multipleValue =\n      multiple && input.value.includes('all') && input.value.length > 1\n        ? options\n            .filter(option => option.id !== 'all')\n            .filter(option => input.value.includes(option.id))\n            .map(option => option.label)\n            .join(', ')\n        : options\n            .filter(option => input.value.includes(option.id))\n            .map(option => option.label)\n            .join(', ')\n\n    return !multiple\n      ? selectedOption?.label\n      : input.value.length <= 2\n        ? multipleValue\n        : `${input.value.length} items selected`\n  }\n\n  useEffect(() => {\n    setIsInvalid(\n      meta.invalid && (meta.validating || meta.modified || (meta.submitFailed && meta.touched))\n    )\n  }, [meta.invalid, meta.modified, meta.submitFailed, meta.touched, meta.validating])\n\n  const openMenu = useCallback(() => {\n    if (!isOpen) {\n      setIsOpen(true)\n      input.onFocus(new Event('focus'))\n    }\n  }, [input, isOpen])\n\n  const closeMenu = useCallback(() => {\n    if (isOpen) {\n      setIsOpen(false)\n      input.onBlur(new Event('blur'))\n    }\n  }, [input, isOpen])\n\n  const clickHandler = useCallback(\n    event => {\n      if (selectRef.current !== event.target.closest('.form-field-select')) {\n        closeMenu()\n      }\n    },\n    [closeMenu]\n  )\n\n  const handleScroll = useCallback(\n    event => {\n      if (!event.target.closest('.options-list__body')) {\n        closeMenu()\n      }\n    },\n    [closeMenu]\n  )\n\n  useEffect(() => {\n    if (isOpen) {\n      window.addEventListener('scroll', handleScroll, true)\n    }\n\n    window.addEventListener('click', clickHandler)\n\n    return () => {\n      window.removeEventListener('click', clickHandler)\n      window.removeEventListener('scroll', handleScroll, true)\n    }\n  }, [clickHandler, handleScroll, isOpen])\n\n  const scrollOptionToView = useCallback(() => {\n    const selectedOptionEl = optionsListRef.current.querySelector(\n      `[data-custom-id=\"${input.value}\"]`\n    )\n\n    if (!selectedOptionEl) return\n\n    searchValue\n      ? optionsListRef.current.scrollTo({ top: 0, left: 0, behavior: 'smooth' })\n      : setTimeout(() => {\n          selectedOptionEl.scrollIntoView({\n            behavior: 'smooth',\n            block: 'center'\n          })\n        }, 0)\n  }, [input.value, searchValue])\n\n  useEffect(() => {\n    if (isOpen && optionsListRef.current && scrollToView) {\n      scrollOptionToView()\n    }\n  }, [isOpen, scrollOptionToView, scrollToView])\n\n  useEffect(() => {\n    if (isOpen && search && searchRef.current) {\n      searchRef.current.focus()\n    }\n  }, [isOpen, search])\n\n  const toggleOpen = () => {\n    if (isOpen) {\n      closeMenu()\n    } else {\n      !disabled && openMenu()\n    }\n  }\n\n  const handleCloseSelectBody = useCallback(\n    event => {\n      event.stopPropagation()\n      if (multiple) return\n\n      if (\n        !event.target.classList.contains('disabled') &&\n        !event.target.closest('.options-list__search')\n      ) {\n        closeMenu()\n        setSearchValue('')\n      }\n    },\n    [closeMenu, multiple]\n  )\n\n  const handleSelectOptionClick = (selectedOption, option) => {\n    if (selectedOption !== input.value) {\n      option.handler && option.handler()\n      onChange && onChange(selectedOption)\n\n      setTimeout(() => {\n        input.onChange(selectedOption)\n      })\n    }\n  }\n\n  const validateField = value => {\n    if (required) {\n      return value ? undefined : 'Required'\n    }\n  }\n\n  return (\n    <Field name={name} validate={validateField}>\n      {({ input, meta }) => (\n        <Tooltip\n          className=\"select-tooltip\"\n          template={<TextTooltipTemplate text={tooltip} />}\n          hidden={!tooltip}\n        >\n          <div\n            data-testid={name ? `${name}-form-field-select` : 'form-field-select'}\n            ref={selectRef}\n            className={`form-field-select ${className}`}\n            onClick={toggleOpen}\n          >\n            {label && (\n              <div className={selectLabelClassName}>\n                <label data-testid={name ? `${name}-form-select-label` : 'form-select-label'}>\n                  {label}\n                  {meta.error && <span className=\"form-field__label-mandatory\"> *</span>}\n                </label>\n              </div>\n            )}\n            <div data-testid=\"select-header\" className={selectWrapperClassNames}>\n              <div className=\"form-field__control\">\n                {!hideSelectedOption && (\n                  <div data-testid=\"selected-option\" className=\"form-field__select\">\n                    <span className={selectValueClassName}>{getSelectValue()}</span>\n                  </div>\n                )}\n              </div>\n              <div className=\"form-field__icons\">\n                {input.value && selectedItemAction && (\n                  <>\n                    {selectedItemAction.handler ? (\n                      <Tooltip template={<TextTooltipTemplate text={selectedItemAction.tooltip} />}>\n                        <button\n                          onClick={event => {\n                            if (selectedItemAction.confirm) {\n                              setConfirmDialogOpen(true)\n                            } else {\n                              selectedItemAction.handler(input.value)\n                            }\n\n                            event.stopPropagation()\n                          }}\n                        >\n                          {selectedItemAction.icon}\n                        </button>\n                      </Tooltip>\n                    ) : (\n                      <span>{selectedItemAction.icon}</span>\n                    )}\n                  </>\n                )}\n                <span>\n                  <Caret className=\"form-field__caret\" />\n                </span>\n              </div>\n            </div>\n            {isConfirmDialogOpen && (\n              <ConfirmDialog\n                cancelButton={{\n                  handler: () => {\n                    setConfirmDialogOpen(false)\n                  },\n                  label: 'Cancel',\n                  variant: TERTIARY_BUTTON\n                }}\n                closePopUp={() => {\n                  setConfirmDialogOpen(false)\n                }}\n                confirmButton={{\n                  handler: () => {\n                    selectedItemAction.handler(input.value)\n                    setConfirmDialogOpen(false)\n                  },\n                  label: selectedItemAction.confirm.btnConfirmLabel,\n                  variant: selectedItemAction.confirm.btnConfirmType\n                }}\n                header={selectedItemAction.confirm.title}\n                isOpen={isConfirmDialogOpen}\n                message={selectedItemAction.confirm.message}\n              />\n            )}\n            {isOpen && (\n              <PopUpDialog\n                className=\"form-field form-field-select__options-list\"\n                headerIsHidden\n                ref={popUpRef}\n                customPosition={{\n                  element: selectRef,\n                  position: 'bottom-right',\n                  autoHorizontalPosition: true\n                }}\n                style={{\n                  maxWidth: `${selectWidth < 500 && !preventWidthOverflow ? 500 : selectWidth}px`,\n                  minWidth: `${selectWidth}px`\n                }}\n              >\n                <div\n                  data-testid=\"select-body\"\n                  className=\"options-list__body\"\n                  onClick={handleCloseSelectBody}\n                >\n                  {search && (\n                    <div className=\"options-list__search\">\n                      <input\n                        type=\"text\"\n                        placeholder=\"Search...\"\n                        value={searchValue}\n                        onChange={event => setSearchValue(event.target.value)}\n                        ref={searchRef}\n                        autoFocus\n                      />\n                    </div>\n                  )}\n                  <ul className=\"options-list\" ref={optionsListRef}>\n                    {sortedOptionsList.map(option => {\n                      return (\n                        <SelectOption\n                          item={option}\n                          key={option.id}\n                          name={name}\n                          onClick={selectedOption => {\n                            handleSelectOptionClick(selectedOption, option)\n                          }}\n                          multiple={multiple}\n                          selectedId={!multiple ? input.value : ''}\n                          withSelectedIcon={withSelectedIcon}\n                        />\n                      )\n                    })}\n                  </ul>\n                </div>\n              </PopUpDialog>\n            )}\n            <input {...input} type=\"hidden\" />\n          </div>\n        </Tooltip>\n      )}\n    </Field>\n  )\n}\n\nFormSelect.propTypes = {\n  className: PropTypes.string,\n  density: DENSITY,\n  disabled: PropTypes.bool,\n  hideSelectedOption: PropTypes.bool,\n  label: PropTypes.string,\n  multiple: PropTypes.bool,\n  name: PropTypes.string.isRequired,\n  onChange: PropTypes.func,\n  options: SELECT_OPTIONS.isRequired,\n  preventWidthOverflow: PropTypes.bool,\n  required: PropTypes.bool,\n  scrollToView: PropTypes.bool,\n  search: PropTypes.bool,\n  selectedItemAction: PropTypes.object,\n  tooltip: PropTypes.string,\n  withSelectedIcon: PropTypes.bool,\n  withoutBorder: PropTypes.bool\n}\n\nFormSelect = React.memo(FormSelect)\n\nexport default FormSelect\n"],"names":["FormSelect","className","density","disabled","hideSelectedOption","label","multiple","name","onChange","options","preventWidthOverflow","required","scrollToView","search","selectedItemAction","tooltip","withSelectedIcon","withoutBorder","input","meta","useField","isInvalid","setIsInvalid","useState","isConfirmDialogOpen","setConfirmDialogOpen","isOpen","setIsOpen","searchValue","setSearchValue","optionsListRef","useRef","popUpRef","selectRef","searchRef","selectWidth","_a","selectWrapperClassNames","classNames","selectLabelClassName","selectValueClassName","selectedOption","option","getFilteredOptions","useCallback","sortedOptionsList","useMemo","optionsList","idx","arr","getSelectValue","multipleValue","useEffect","openMenu","closeMenu","clickHandler","event","handleScroll","scrollOptionToView","selectedOptionEl","toggleOpen","handleCloseSelectBody","handleSelectOptionClick","jsx","Field","value","Tooltip","TextTooltipTemplate","jsxs","Fragment","Caret","ConfirmDialog","TERTIARY_BUTTON","PopUpDialog","SelectOption","PropTypes","DENSITY","SELECT_OPTIONS","React","FormSelect$1"],"mappings":"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"}

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

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

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

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

package/dist/components/FormTextarea/FormTextarea.d.ts

@@ -0,0 +1,40 @@
+export default FormTextarea;
+declare function FormTextarea({ className, disabled, focused, iconClass, invalidText, label, maxLength, name, onBlur, onChange, required, rows, textAreaIcon, tip, withoutBorder, ...textareaProps }: {
+    [x: string]: any;
+    className?: string;
+    disabled?: boolean;
+    focused?: boolean;
+    iconClass?: string;
+    invalidText?: string;
+    label?: string;
+    maxLength?: any;
+    name: any;
+    onBlur?: () => void;
+    onChange?: () => void;
+    required?: boolean;
+    rows?: number;
+    textAreaIcon?: any;
+    tip?: string;
+    withoutBorder?: boolean;
+}, ref: any): JSX.Element;
+declare namespace FormTextarea {
+    let displayName: string;
+    namespace propTypes {
+        let className: any;
+        let disabled: any;
+        let focused: any;
+        let iconClass: any;
+        let invalidText: any;
+        let label: any;
+        let maxLength: any;
+        let name: any;
+        let onBlur: any;
+        let onChange: any;
+        let required: any;
+        let rows: any;
+        let textAreaIcon: any;
+        let tip: any;
+        let withoutBorder: any;
+    }
+}
+//# sourceMappingURL=FormTextarea.d.ts.map

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

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

package/dist/components/FormTextarea/FormTextarea.mjs

@@ -0,0 +1,122 @@
+import { jsx as l, jsxs as m } from "react/jsx-runtime";
+import W, { useState as w, useRef as z, useLayoutEffect as D, useEffect as C, forwardRef as G } from "react";
+import p from "classnames";
+import e from "prop-types";
+import { useField as H, Field as J } from "react-final-form";
+import K from "../TooltipTemplate/TextTooltipTemplate.mjs";
+import O from "../Tip/Tip.mjs";
+import Q from "../Tooltip/Tooltip.mjs";
+import U from "../../images/exclamation-mark.svg.mjs";
+/* empty css                   */
+let o = ({
+  className: y = "",
+  disabled: f = !1,
+  focused: h = !1,
+  iconClass: I = "",
+  invalidText: _ = "This field is invalid",
+  label: v = "",
+  maxLength: s = null,
+  name: b,
+  onBlur: g = () => {
+  },
+  onChange: x = () => {
+  },
+  required: n = !1,
+  rows: R = 3,
+  textAreaIcon: N = null,
+  tip: F = "",
+  withoutBorder: A = !1,
+  ...B
+}, E) => {
+  const { input: r, meta: t } = H(b), [c, $] = w(!1), [T, j] = w(r.value.length), u = z(), q = p("form-field-textarea", y), S = p("form-field__label", f && "form-field__label-disabled"), k = p(
+    "form-field__wrapper",
+    f && "form-field__wrapper-disabled",
+    c && "form-field__wrapper-invalid",
+    A && "without-border"
+  );
+  D(() => {
+    j(r.value.length);
+  }, [r.value.length]), C(() => {
+    h && u.current.focus();
+  }, [h, u]), C(() => {
+    $(
+      t.invalid && (t.validating || t.modified || t.submitFailed && t.touched)
+    );
+  }, [t.invalid, t.modified, t.submitFailed, t.touched, t.validating]);
+  const M = (a) => {
+    r.onBlur(a), g && g(a);
+  }, P = (a) => {
+    r.onChange(a), x && x(a.target.value);
+  }, V = (a) => {
+    r.onFocus(a);
+  };
+  return /* @__PURE__ */ l(J, { validate: (a) => {
+    const d = a ?? "";
+    let i = null;
+    return d.startsWith(" ") ? i = { name: "empty", label: _ } : n && d.trim().length === 0 && (i = { name: "required", label: "This field is required" }), i;
+  }, name: b, children: ({ input: a, meta: d }) => {
+    var i;
+    return /* @__PURE__ */ m("div", { ref: E, className: q, children: [
+      /* @__PURE__ */ l("div", { className: S, children: v && /* @__PURE__ */ m("label", { "data-testid": "label", htmlFor: a.name, children: [
+        v,
+        n && /* @__PURE__ */ l("span", { className: "form-field__label-mandatory", children: " *" })
+      ] }) }),
+      /* @__PURE__ */ m("div", { className: k, children: [
+        /* @__PURE__ */ l("div", { className: "form-field__control", children: /* @__PURE__ */ l(
+          "textarea",
+          {
+            "data-testid": "textarea",
+            id: a.name,
+            maxLength: s,
+            ref: u,
+            required: c || n,
+            disabled: f,
+            rows: R,
+            ...B,
+            ...a,
+            onBlur: M,
+            onChange: P,
+            onFocus: V
+          }
+        ) }),
+        /* @__PURE__ */ m("div", { className: "form-field__icons", children: [
+          c && /* @__PURE__ */ l(
+            Q,
+            {
+              className: "form-field__warning",
+              template: /* @__PURE__ */ l(K, { text: ((i = d.error) == null ? void 0 : i.label) ?? _, warning: !0 }),
+              children: /* @__PURE__ */ l(U, {})
+            }
+          ),
+          F && !n && /* @__PURE__ */ l(O, { text: F, className: "form-field__tip" }),
+          N && /* @__PURE__ */ l("span", { "data-testid": "textarea__icon", className: I, children: N })
+        ] })
+      ] }),
+      s && /* @__PURE__ */ l("div", { className: "form-field__counter", children: `${s - T} ${s - T !== 1 ? "characters" : "character"} left` })
+    ] });
+  } });
+};
+o = W.memo(G(o));
+o.displayName = "FormTextarea";
+o.propTypes = {
+  className: e.string,
+  disabled: e.bool,
+  focused: e.bool,
+  iconClass: e.string,
+  invalidText: e.string,
+  label: e.string,
+  maxLength: e.number,
+  name: e.string.isRequired,
+  onBlur: e.func,
+  onChange: e.func,
+  required: e.bool,
+  rows: e.number,
+  textAreaIcon: e.element,
+  tip: e.string,
+  withoutBorder: e.bool
+};
+const se = o;
+export {
+  se as default
+};
+//# sourceMappingURL=FormTextarea.mjs.map

package/dist/components/FormTextarea/FormTextarea.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormTextarea.mjs","sources":["../../../src/lib/components/FormTextarea/FormTextarea.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, { forwardRef, useEffect, useLayoutEffect, useRef, useState } from 'react'\nimport classnames from 'classnames'\nimport PropTypes from 'prop-types'\nimport { Field, useField } from 'react-final-form'\n\nimport TextTooltipTemplate from '../TooltipTemplate/TextTooltipTemplate'\nimport Tip from '../Tip/Tip'\nimport Tooltip from '../Tooltip/Tooltip'\n\nimport ExclamationMarkIcon from '../../images/exclamation-mark.svg?react'\n\nimport './formTextarea.scss'\n\nlet FormTextarea = (\n  {\n    className = '',\n    disabled = false,\n    focused = false,\n    iconClass = '',\n    invalidText = 'This field is invalid',\n    label = '',\n    maxLength = null,\n    name,\n    onBlur = () => {},\n    onChange = () => {},\n    required = false,\n    rows = 3,\n    textAreaIcon = null,\n    tip = '',\n    withoutBorder = false,\n    ...textareaProps\n  },\n  ref\n) => {\n  const { input, meta } = useField(name)\n  const [isInvalid, setIsInvalid] = useState(false)\n  const [textAreaCount, setTextAreaCount] = useState(input.value.length)\n  const textAreaRef = useRef()\n\n  const formFieldClassNames = classnames('form-field-textarea', className)\n  const labelClassNames = classnames('form-field__label', disabled && 'form-field__label-disabled')\n  const textAreaClassNames = classnames(\n    'form-field__wrapper',\n    disabled && 'form-field__wrapper-disabled',\n    isInvalid && 'form-field__wrapper-invalid',\n    withoutBorder && 'without-border'\n  )\n\n  useLayoutEffect(() => {\n    setTextAreaCount(input.value.length)\n  }, [input.value.length])\n\n  useEffect(() => {\n    if (focused) {\n      textAreaRef.current.focus()\n    }\n  }, [focused, textAreaRef])\n\n  useEffect(() => {\n    setIsInvalid(\n      meta.invalid && (meta.validating || meta.modified || (meta.submitFailed && meta.touched))\n    )\n  }, [meta.invalid, meta.modified, meta.submitFailed, meta.touched, meta.validating])\n\n  const handleInputBlur = event => {\n    input.onBlur(event)\n    onBlur && onBlur(event)\n  }\n\n  const handleInputChange = event => {\n    input.onChange(event)\n    onChange && onChange(event.target.value)\n  }\n\n  const handleInputFocus = event => {\n    input.onFocus(event)\n  }\n\n  const validateField = value => {\n    const valueToValidate = value ?? ''\n    let validationError = null\n\n    if (valueToValidate.startsWith(' ')) {\n      validationError = { name: 'empty', label: invalidText }\n    } else if (required && valueToValidate.trim().length === 0) {\n      validationError = { name: 'required', label: 'This field is required' }\n    }\n\n    return validationError\n  }\n\n  return (\n    <Field validate={validateField} name={name}>\n      {({ input, meta }) => (\n        <div ref={ref} className={formFieldClassNames}>\n          <div className={labelClassNames}>\n            {label && (\n              <label data-testid=\"label\" htmlFor={input.name}>\n                {label}\n                {required && <span className=\"form-field__label-mandatory\"> *</span>}\n              </label>\n            )}\n          </div>\n          <div className={textAreaClassNames}>\n            <div className=\"form-field__control\">\n              <textarea\n                data-testid=\"textarea\"\n                id={input.name}\n                maxLength={maxLength}\n                ref={textAreaRef}\n                required={isInvalid || required}\n                {...{\n                  disabled,\n                  rows,\n                  ...textareaProps,\n                  ...input\n                }}\n                onBlur={handleInputBlur}\n                onChange={handleInputChange}\n                onFocus={handleInputFocus}\n              />\n            </div>\n            <div className=\"form-field__icons\">\n              {isInvalid && (\n                <Tooltip\n                  className=\"form-field__warning\"\n                  template={<TextTooltipTemplate text={meta.error?.label ?? invalidText} warning />}\n                >\n                  <ExclamationMarkIcon />\n                </Tooltip>\n              )}\n              {tip && !required && <Tip text={tip} className=\"form-field__tip\" />}\n              {textAreaIcon && (\n                <span data-testid=\"textarea__icon\" className={iconClass}>\n                  {textAreaIcon}\n                </span>\n              )}\n            </div>\n          </div>\n          {maxLength && (\n            <div className=\"form-field__counter\">{`${maxLength - textAreaCount} ${\n              maxLength - textAreaCount !== 1 ? 'characters' : 'character'\n            } left`}</div>\n          )}\n        </div>\n      )}\n    </Field>\n  )\n}\n\nFormTextarea = React.memo(forwardRef(FormTextarea))\n\nFormTextarea.displayName = 'FormTextarea'\n\nFormTextarea.propTypes = {\n  className: PropTypes.string,\n  disabled: PropTypes.bool,\n  focused: PropTypes.bool,\n  iconClass: PropTypes.string,\n  invalidText: PropTypes.string,\n  label: PropTypes.string,\n  maxLength: PropTypes.number,\n  name: PropTypes.string.isRequired,\n  onBlur: PropTypes.func,\n  onChange: PropTypes.func,\n  required: PropTypes.bool,\n  rows: PropTypes.number,\n  textAreaIcon: PropTypes.element,\n  tip: PropTypes.string,\n  withoutBorder: PropTypes.bool\n}\n\nexport default FormTextarea\n"],"names":["FormTextarea","className","disabled","focused","iconClass","invalidText","label","maxLength","name","onBlur","onChange","required","rows","textAreaIcon","tip","withoutBorder","textareaProps","ref","input","meta","useField","isInvalid","setIsInvalid","useState","textAreaCount","setTextAreaCount","textAreaRef","useRef","formFieldClassNames","classnames","labelClassNames","textAreaClassNames","useLayoutEffect","useEffect","handleInputBlur","event","handleInputChange","handleInputFocus","Field","value","valueToValidate","validationError","jsxs","jsx","Tooltip","TextTooltipTemplate","ExclamationMarkIcon","Tip","React","forwardRef","PropTypes","FormTextarea$1"],"mappings":";;;;;;;;;;AA6BA,IAAIA,IAAe,CACjB;AAAA,EACE,WAAAC,IAAY;AAAA,EACZ,UAAAC,IAAW;AAAA,EACX,SAAAC,IAAU;AAAA,EACV,WAAAC,IAAY;AAAA,EACZ,aAAAC,IAAc;AAAA,EACd,OAAAC,IAAQ;AAAA,EACR,WAAAC,IAAY;AAAA,EACZ,MAAAC;AAAA,EACA,QAAAC,IAAS,MAAM;AAAA,EAAC;AAAA,EAChB,UAAAC,IAAW,MAAM;AAAA,EAAC;AAAA,EAClB,UAAAC,IAAW;AAAA,EACX,MAAAC,IAAO;AAAA,EACP,cAAAC,IAAe;AAAA,EACf,KAAAC,IAAM;AAAA,EACN,eAAAC,IAAgB;AAAA,EAChB,GAAGC;AACL,GACAC,MACG;AACH,QAAM,EAAE,OAAAC,GAAO,MAAAC,MAASC,EAASZ,CAAI,GAC/B,CAACa,GAAWC,CAAY,IAAIC,EAAS,EAAK,GAC1C,CAACC,GAAeC,CAAgB,IAAIF,EAASL,EAAM,MAAM,MAAM,GAC/DQ,IAAcC,EAAO,GAErBC,IAAsBC,EAAW,uBAAuB5B,CAAS,GACjE6B,IAAkBD,EAAW,qBAAqB3B,KAAY,4BAA4B,GAC1F6B,IAAqBF;AAAA,IACzB;AAAA,IACA3B,KAAY;AAAA,IACZmB,KAAa;AAAA,IACbN,KAAiB;AAAA,EACnB;AAEA,EAAAiB,EAAgB,MAAM;AACH,IAAAP,EAAAP,EAAM,MAAM,MAAM;AAAA,EAClC,GAAA,CAACA,EAAM,MAAM,MAAM,CAAC,GAEvBe,EAAU,MAAM;AACd,IAAI9B,KACFuB,EAAY,QAAQ,MAAM;AAAA,EAC5B,GACC,CAACvB,GAASuB,CAAW,CAAC,GAEzBO,EAAU,MAAM;AACd,IAAAX;AAAA,MACEH,EAAK,YAAYA,EAAK,cAAcA,EAAK,YAAaA,EAAK,gBAAgBA,EAAK;AAAA,IAClF;AAAA,EACC,GAAA,CAACA,EAAK,SAASA,EAAK,UAAUA,EAAK,cAAcA,EAAK,SAASA,EAAK,UAAU,CAAC;AAElF,QAAMe,IAAkB,CAASC,MAAA;AAC/B,IAAAjB,EAAM,OAAOiB,CAAK,GAClB1B,KAAUA,EAAO0B,CAAK;AAAA,EACxB,GAEMC,IAAoB,CAASD,MAAA;AACjC,IAAAjB,EAAM,SAASiB,CAAK,GACRzB,KAAAA,EAASyB,EAAM,OAAO,KAAK;AAAA,EACzC,GAEME,IAAmB,CAASF,MAAA;AAChC,IAAAjB,EAAM,QAAQiB,CAAK;AAAA,EACrB;AAeA,2BACGG,GAAM,EAAA,UAda,CAASC,MAAA;AAC7B,UAAMC,IAAkBD,KAAS;AACjC,QAAIE,IAAkB;AAElB,WAAAD,EAAgB,WAAW,GAAG,IAChCC,IAAkB,EAAE,MAAM,SAAS,OAAOpC,EAAY,IAC7CM,KAAY6B,EAAgB,KAAK,EAAE,WAAW,MACvDC,IAAkB,EAAE,MAAM,YAAY,OAAO,yBAAyB,IAGjEA;AAAA,EACT,GAGkC,MAAAjC,GAC7B,WAAC,EAAE,OAAAU,GAAO,MAAAC,EACT,MAAA;;AAAA,2BAAAuB,EAAC,OAAI,EAAA,KAAAzB,GAAU,WAAWW,GACxB,UAAA;AAAA,MAAC,gBAAAe,EAAA,OAAA,EAAI,WAAWb,GACb,UACCxB,KAAA,gBAAAoC,EAAC,WAAM,eAAY,SAAQ,SAASxB,EAAM,MACvC,UAAA;AAAA,QAAAZ;AAAA,QACAK,KAAY,gBAAAgC,EAAC,QAAK,EAAA,WAAU,+BAA8B,UAAE,KAAA,CAAA;AAAA,MAAA,EAAA,CAC/D,EAEJ,CAAA;AAAA,MACA,gBAAAD,EAAC,OAAI,EAAA,WAAWX,GACd,UAAA;AAAA,QAAC,gBAAAY,EAAA,OAAA,EAAI,WAAU,uBACb,UAAA,gBAAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,eAAY;AAAA,YACZ,IAAIzB,EAAM;AAAA,YACV,WAAAX;AAAA,YACA,KAAKmB;AAAA,YACL,UAAUL,KAAaV;AAAA,YAErB,UAAAT;AAAA,YACA,MAAAU;AAAA,YACA,GAAGI;AAAA,YACH,GAAGE;AAAAA,YAEL,QAAQgB;AAAA,YACR,UAAUE;AAAA,YACV,SAASC;AAAA,UAAA;AAAA,QAAA,GAEb;AAAA,QACA,gBAAAK,EAAC,OAAI,EAAA,WAAU,qBACZ,UAAA;AAAA,UACCrB,KAAA,gBAAAsB;AAAA,YAACC;AAAA,YAAA;AAAA,cACC,WAAU;AAAA,cACV,4BAAWC,GAAoB,EAAA,QAAM1B,IAAAA,EAAK,UAALA,gBAAAA,EAAY,UAASd,GAAa,SAAO,GAAC,CAAA;AAAA,cAE/E,4BAACyC,GAAoB,CAAA,CAAA;AAAA,YAAA;AAAA,UACvB;AAAA,UAEDhC,KAAO,CAACH,KAAY,gBAAAgC,EAACI,KAAI,MAAMjC,GAAK,WAAU,mBAAkB;AAAA,UAChED,KACE,gBAAA8B,EAAA,QAAA,EAAK,eAAY,kBAAiB,WAAWvC,GAC3C,UACHS,EAAA,CAAA;AAAA,QAAA,EAEJ,CAAA;AAAA,MAAA,GACF;AAAA,MACCN,KACC,gBAAAoC,EAAC,OAAI,EAAA,WAAU,uBAAuB,UAAG,GAAApC,IAAYiB,CAAa,IAChEjB,IAAYiB,MAAkB,IAAI,eAAe,WACnD,QAAQ,CAAA;AAAA,IAAA,EAAA,CAEZ;AAAA,IAEJ,CAAA;AAEJ;AAEAxB,IAAegD,EAAM,KAAKC,EAAWjD,CAAY,CAAC;AAElDA,EAAa,cAAc;AAE3BA,EAAa,YAAY;AAAA,EACvB,WAAWkD,EAAU;AAAA,EACrB,UAAUA,EAAU;AAAA,EACpB,SAASA,EAAU;AAAA,EACnB,WAAWA,EAAU;AAAA,EACrB,aAAaA,EAAU;AAAA,EACvB,OAAOA,EAAU;AAAA,EACjB,WAAWA,EAAU;AAAA,EACrB,MAAMA,EAAU,OAAO;AAAA,EACvB,QAAQA,EAAU;AAAA,EAClB,UAAUA,EAAU;AAAA,EACpB,UAAUA,EAAU;AAAA,EACpB,MAAMA,EAAU;AAAA,EAChB,cAAcA,EAAU;AAAA,EACxB,KAAKA,EAAU;AAAA,EACf,eAAeA,EAAU;AAC3B;AAEA,MAAAC,KAAenD;"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"FormTextarea.stories.d.ts","sourceRoot":"","sources":["../../../src/lib/components/FormTextarea/FormTextarea.stories.js"],"names":[],"mappings":";;;;;AAiCA,yBAAuC;AAMvC,0BAAwC;AAOxC,gCAA8C"}

package/dist/components/FormToggle/FormToggle.d.ts

@@ -0,0 +1,18 @@
+export default FormToggle;
+declare function FormToggle({ density, label, name, onChange, ...inputProps }: {
+    [x: string]: any;
+    density?: string;
+    label?: string;
+    name: any;
+    onChange?: () => void;
+}): JSX.Element;
+declare namespace FormToggle {
+    namespace propTypes {
+        export { DENSITY as density };
+        export let label: any;
+        export let name: any;
+        export let onChange: any;
+    }
+}
+import { DENSITY } from '../../types.js';
+//# sourceMappingURL=FormToggle.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FormToggle.d.ts","sourceRoot":"","sources":["../../../src/lib/components/FormToggle/FormToggle.jsx"],"names":[],"mappings":";AAyBA;;;;;;gBAiCC;;;;;;;;;wBArCuB,gBAAgB"}

package/dist/components/FormToggle/FormToggle.mjs

@@ -0,0 +1,48 @@
+import { jsx as r, jsxs as d } from "react/jsx-runtime";
+import "react";
+import g from "classnames";
+import o from "prop-types";
+import { Field as p } from "react-final-form";
+import { DENSITY as c } from "../../types.mjs";
+/* empty css                 */
+const n = ({ density: l = "", label: t = "", name: e, onChange: i = () => {
+}, ...s }) => {
+  const f = g(
+    "form-field__wrapper",
+    l && `form-field__wrapper-${l}`
+  );
+  return /* @__PURE__ */ r(p, { name: e, value: s.value, type: "checkbox", children: ({ input: a }) => /* @__PURE__ */ d(
+    "label",
+    {
+      className: "form-field-toggle",
+      "data-testid": e ? `${e}-form-field-toggle` : "form-field-toggle",
+      children: [
+        t && /* @__PURE__ */ r("div", { className: "form-field__label", children: t }),
+        /* @__PURE__ */ r(
+          "input",
+          {
+            "data-testid": e ? `${e}-form-toggle` : "form-toggle",
+            id: e,
+            ...a,
+            ...s,
+            onChange: (m) => {
+              i && i(m), a.onChange(m);
+            },
+            type: "checkbox"
+          }
+        ),
+        /* @__PURE__ */ r("div", { className: f, children: /* @__PURE__ */ r("span", { className: "form-field-toggle__switch" }) })
+      ]
+    }
+  ) });
+};
+n.propTypes = {
+  density: c,
+  label: o.string,
+  name: o.string.isRequired,
+  onChange: o.func
+};
+export {
+  n as default
+};
+//# sourceMappingURL=FormToggle.mjs.map