@scbt-ecom/ui 0.158.0 → 0.158.2

package/dist/lib/shared/ui/formElements/uncontrolled/combobox/combobox.js.map

@@ -1 +1 @@
-{"version":3,"file":"combobox.js","sources":["../../../../../../../lib/shared/ui/formElements/uncontrolled/combobox/combobox.tsx"],"sourcesContent":["import { type ForwardedRef, forwardRef } from 'react'\nimport { autoUpdate, flip, offset, useFloating } from '@floating-ui/react'\nimport { AnimatePresence, motion } from 'framer-motion'\nimport { useCombobox, useKeyboardNavigation } from './hooks'\nimport { type ChangeHandler, type ComboboxValue, stringifyComboboxValue } from './model'\nimport type { ComboboxItemOption } from './ui'\nimport { useClickOutsideMany } from '$/shared/hooks'\nimport { type DataLayers, type DeepPartial } from '$/shared/types'\nimport { DropdownList, Icon, InputBase, type InputBaseProps, Portal } from '$/shared/ui'\nimport { type DropdownListClasses, type DropdownListProps } from '$/shared/ui/dropdownList'\nimport { type IFieldAttachmentProps } from '$/shared/ui/formElements/ui'\nimport { cn, TypeGuards } from '$/shared/utils'\n\nexport type ComboboxClasses = {\n  root?: string\n  list?: { floating?: string } & DropdownListClasses\n  input?: InputBaseProps['classes']\n}\n\nexport type ExternalHandlers<Multi extends boolean = false> = {\n  changeHandler?: ChangeHandler<Multi>\n  clickHandler?: (event: React.MouseEvent<HTMLElement>) => void\n  blurHandler?: (event: React.FocusEvent<HTMLElement>) => void\n  focusHandler?: (event: React.FocusEvent<HTMLElement>) => void\n  inputChangeHandler?: (value: string) => void\n  onKeyDown?: (value: React.KeyboardEventHandler<HTMLInputElement>) => void\n}\n\nexport interface ComboboxProps<Multi extends boolean = false>\n  extends Omit<DropdownListProps<Multi>, 'options' | 'value' | 'onChange' | 'onBlur'>,\n    Record<`data-${string}`, unknown> {\n  /**\n   * Список опций\n   */\n  options: ComboboxItemOption[]\n  /**\n   * Выбранное значение\n   */\n  value?: ComboboxValue<Multi>\n  /**\n   * Функция для изменения значения\n   */\n  onChange?: ChangeHandler<Multi>\n  /**\n   * Свойство управляющее поиском\n   */\n  searchable?: boolean\n  /**\n   * Открыть список по умолчанию\n   */\n  defaultOpen?: boolean\n  /**\n   * Свойства дополнительной иконки\n   */\n  attachmentProps?: DeepPartial<IFieldAttachmentProps>\n  /**\n   * Пометить поле как не валидное\n   */\n  invalid?: boolean\n  /**\n   * Функция для управления отображаемым значением\n   */\n  displayValue?: ((value: ComboboxValue<boolean>) => string) | undefined\n  /**\n   * Отображаемый лейбл\n   */\n  label: string\n  /**\n   * Выключено поле\n   */\n  disabled?: boolean\n  /**\n   * Только для чтения\n   */\n  readOnly?: boolean\n  /**\n   * Дополнительные стили\n   */\n  classes?: ComboboxClasses\n  /**\n   * Дополнительные события\n   */\n  externalHandlers?: ExternalHandlers<Multi>\n  /**\n   * Функция для изменения значения поиска\n   */\n  onInputChange?: (value: string) => void\n  /**\n   * Значение инпута\n   */\n  inputValue?: string\n  /**\n   * Выключить фильтрацию списка\n   */\n  filterDisabled?: boolean\n  /**\n   * Включить рендеринг в портале\n   * @property {false | HTMLElement} portal document.body\n   */\n  portal?: false | HTMLElement\n  /**\n   * Обработка ошибок для даталееров\n   */\n  ['data-error-message']?: string\n  /**\n   * Даталееры\n   */\n  dataLayers?: DataLayers\n  /**\n   * Внешнее onBlur событие\n   */\n  onBlur?: React.FocusEventHandler<HTMLInputElement>\n}\n\nconst InnerComponent = <Multi extends boolean = false>(\n  {\n    options: initialOptions,\n    multiple,\n    value,\n    onChange,\n    defaultOpen,\n    attachmentProps,\n    searchable,\n    invalid,\n    displayValue,\n    label,\n    disabled,\n    readOnly,\n    className,\n    externalHandlers,\n    inputValue,\n    filterDisabled,\n    onInputChange: externalInputChangeHandler,\n    empty,\n    classes,\n    portal = globalThis ? globalThis?.document?.body : undefined,\n    ...props\n  }: ComboboxProps<Multi>,\n  ref: ForwardedRef<HTMLInputElement>\n) => {\n  const dataErrorMessage = props['data-error-message']\n\n  const { floating, ...dropdownClasses } = classes?.list ?? {}\n\n  const { refs, floatingStyles } = useFloating<HTMLDivElement>({\n    placement: 'bottom-start',\n    strategy: 'absolute',\n    middleware: [\n      flip({\n        boundary: 'clippingAncestors',\n        crossAxis: false\n      }),\n      offset(4)\n    ],\n    whileElementsMounted: autoUpdate\n  })\n\n  const { open, setOpen, state, changeHandler, options, search, onInputChange } = useCombobox({\n    multiple,\n    value,\n    onChange,\n    searchable,\n    defaultOpen,\n    displayValue,\n    initialOptions,\n    filterDisabled,\n    externalHandlers,\n    externalInputValue: inputValue,\n    externalOnInputChange: externalInputChangeHandler\n  })\n\n  useKeyboardNavigation({ ref: refs.domReference, openChangeHandler: setOpen })\n\n  const getLabel = () => {\n    if (!value) return ''\n\n    if (multiple && searchable) {\n      return stringifyComboboxValue(value)\n    } else if (searchable) {\n      return search\n    } else {\n      return stringifyComboboxValue(value)\n    }\n  }\n\n  const handleBlur = (event: React.FocusEvent<HTMLInputElement>) => {\n    if (event.target && event.relatedTarget) {\n      setOpen(false)\n    }\n  }\n\n  useClickOutsideMany([refs.floating, refs.reference as React.MutableRefObject<HTMLElement | null>], () => setOpen(false))\n\n  const portalContainer = portal ?? refs.domReference.current!\n\n  return (\n    <div ref={refs.setReference} className={cn('relative w-full', classes?.root, className)}>\n      <InputBase\n        ref={ref}\n        label={label}\n        invalid={invalid}\n        readOnly={readOnly || !searchable}\n        value={inputValue || getLabel()}\n        onChange={onInputChange}\n        disabled={disabled}\n        onClick={(event) => {\n          if (!open) setOpen(true)\n          externalHandlers?.clickHandler?.(event)\n        }}\n        onBlur={(event) => {\n          externalHandlers?.blurHandler?.(event)\n          handleBlur(event)\n          props?.onBlur?.(event)\n        }}\n        onFocus={externalHandlers?.focusHandler}\n        classes={{\n          input: cn({\n            'cursor-pointer': !searchable,\n            'cursor-default': disabled,\n            'pointer-events-none': disabled || readOnly\n          }),\n          ...classes?.input\n        }}\n        autoComplete='off'\n        attachmentProps={{\n          icon: (\n            <Icon\n              name='arrows/arrowRight'\n              className={cn('size-6 rotate-90 text-color-blue-grey-600 duration-100', {\n                '-rotate-90': open,\n                'text-color-negative': invalid\n              })}\n            />\n          ),\n          onClickIcon: () => setOpen((prev) => !prev),\n          ...attachmentProps\n        }}\n        data-id='combobox-input'\n        data-error-message={dataErrorMessage}\n        dataLayers={props?.dataLayers}\n      />\n\n      <Portal root={portalContainer}>\n        <AnimatePresence>\n          {open && (\n            <motion.div\n              ref={refs.setFloating}\n              initial={{ opacity: 0 }}\n              animate={{ opacity: 1 }}\n              transition={{ duration: 0.1 }}\n              className={cn('z-[1000]', floating)}\n              style={{\n                ...floatingStyles,\n                width: refs.reference.current?.getBoundingClientRect().width\n              }}\n            >\n              {TypeGuards.isArrayFilled(options) && (\n                <DropdownList\n                  empty={empty}\n                  options={options}\n                  multiple={multiple}\n                  onPick={changeHandler}\n                  value={state}\n                  displayValue={displayValue}\n                  classes={dropdownClasses}\n                  target={refs.domReference}\n                />\n              )}\n            </motion.div>\n          )}\n        </AnimatePresence>\n      </Portal>\n    </div>\n  )\n}\n\nexport const Combobox = forwardRef(InnerComponent) as <Multi extends boolean>(\n  props: ComboboxProps<Multi> & { ref?: ForwardedRef<HTMLInputElement> }\n) => React.JSX.Element\n"],"names":["InnerComponent","initialOptions","multiple","value","onChange","defaultOpen","attachmentProps","searchable","invalid","displayValue","label","disabled","readOnly","className","externalHandlers","inputValue","filterDisabled","externalInputChangeHandler","empty","classes","portal","props","ref","dataErrorMessage","floating","dropdownClasses","refs","floatingStyles","useFloating","flip","offset","autoUpdate","open","setOpen","state","changeHandler","options","search","onInputChange","useCombobox","useKeyboardNavigation","getLabel","stringifyComboboxValue","handleBlur","event","useClickOutsideMany","portalContainer","jsxs","cn","jsx","InputBase","Icon","prev","Portal","AnimatePresence","motion","TypeGuards","DropdownList","Combobox","forwardRef"],"mappings":"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"}
+{"version":3,"file":"combobox.js","sources":["../../../../../../../lib/shared/ui/formElements/uncontrolled/combobox/combobox.tsx"],"sourcesContent":["import { type ForwardedRef, forwardRef } from 'react'\nimport { autoUpdate, flip, offset, useFloating } from '@floating-ui/react'\nimport { AnimatePresence, motion } from 'framer-motion'\nimport { useCombobox, useKeyboardNavigation } from './hooks'\nimport { type ChangeHandler, type ComboboxValue, stringifyComboboxValue } from './model'\nimport type { ComboboxItemOption } from './ui'\nimport { useClickOutsideMany } from '$/shared/hooks'\nimport { type DataLayers, type DeepPartial } from '$/shared/types'\nimport { DropdownList, Icon, InputBase, type InputBaseProps, Portal } from '$/shared/ui'\nimport { type DropdownListClasses, type DropdownListProps } from '$/shared/ui/dropdownList'\nimport { type IFieldAttachmentProps } from '$/shared/ui/formElements/ui'\nimport { cn, TypeGuards } from '$/shared/utils'\n\nexport type ComboboxClasses = {\n  root?: string\n  list?: { floating?: string } & DropdownListClasses\n  input?: InputBaseProps['classes']\n}\n\nexport type ExternalHandlers<Multi extends boolean = false> = {\n  changeHandler?: ChangeHandler<Multi>\n  clickHandler?: (event: React.MouseEvent<HTMLElement>) => void\n  blurHandler?: (event: React.FocusEvent<HTMLElement>) => void\n  focusHandler?: (event: React.FocusEvent<HTMLElement>) => void\n  inputChangeHandler?: (value: string) => void\n  onKeyDown?: (value: React.KeyboardEventHandler<HTMLInputElement>) => void\n}\n\nexport interface ComboboxProps<Multi extends boolean = false>\n  extends Omit<DropdownListProps<Multi>, 'options' | 'value' | 'onChange' | 'onBlur'>,\n    Record<`data-${string}`, unknown> {\n  /**\n   * Список опций\n   */\n  options: ComboboxItemOption[]\n  /**\n   * Выбранное значение\n   */\n  value?: ComboboxValue<Multi>\n  /**\n   * Функция для изменения значения\n   */\n  onChange?: ChangeHandler<Multi>\n  /**\n   * Свойство управляющее поиском\n   */\n  searchable?: boolean\n  /**\n   * Открыть список по умолчанию\n   */\n  defaultOpen?: boolean\n  /**\n   * Свойства дополнительной иконки\n   */\n  attachmentProps?: DeepPartial<IFieldAttachmentProps>\n  /**\n   * Пометить поле как не валидное\n   */\n  invalid?: boolean\n  /**\n   * Функция для управления отображаемым значением\n   */\n  displayValue?: ((value: ComboboxItemOption | null) => string) | undefined\n  /**\n   * Отображаемый лейбл\n   */\n  label: string\n  /**\n   * Выключено поле\n   */\n  disabled?: boolean\n  /**\n   * Только для чтения\n   */\n  readOnly?: boolean\n  /**\n   * Дополнительные стили\n   */\n  classes?: ComboboxClasses\n  /**\n   * Дополнительные события\n   */\n  externalHandlers?: ExternalHandlers<Multi>\n  /**\n   * Функция для изменения значения поиска\n   */\n  onInputChange?: (value: string) => void\n  /**\n   * Значение инпута\n   */\n  inputValue?: string\n  /**\n   * Выключить фильтрацию списка\n   */\n  filterDisabled?: boolean\n  /**\n   * Включить рендеринг в портале\n   * @property {false | HTMLElement} portal document.body\n   */\n  portal?: false | HTMLElement\n  /**\n   * Обработка ошибок для даталееров\n   */\n  ['data-error-message']?: string\n  /**\n   * Даталееры\n   */\n  dataLayers?: DataLayers\n  /**\n   * Внешнее onBlur событие\n   */\n  onBlur?: React.FocusEventHandler<HTMLInputElement>\n}\n\nconst InnerComponent = <Multi extends boolean = false>(\n  {\n    options: initialOptions,\n    multiple,\n    value,\n    onChange,\n    defaultOpen,\n    attachmentProps,\n    searchable,\n    invalid,\n    displayValue,\n    label,\n    disabled,\n    readOnly,\n    className,\n    externalHandlers,\n    inputValue,\n    filterDisabled,\n    onInputChange: externalInputChangeHandler,\n    empty,\n    classes,\n    portal = globalThis ? globalThis?.document?.body : undefined,\n    ...props\n  }: ComboboxProps<Multi>,\n  ref: ForwardedRef<HTMLInputElement>\n) => {\n  const dataErrorMessage = props['data-error-message']\n\n  const { floating, ...dropdownClasses } = classes?.list ?? {}\n\n  const { refs, floatingStyles } = useFloating<HTMLDivElement>({\n    placement: 'bottom-start',\n    strategy: 'absolute',\n    middleware: [\n      flip({\n        boundary: 'clippingAncestors',\n        crossAxis: false\n      }),\n      offset(4)\n    ],\n    whileElementsMounted: autoUpdate\n  })\n\n  const { open, setOpen, state, changeHandler, options, search, onInputChange } = useCombobox({\n    multiple,\n    value,\n    onChange,\n    searchable,\n    defaultOpen,\n    displayValue,\n    initialOptions,\n    filterDisabled,\n    externalHandlers,\n    externalInputValue: inputValue,\n    externalOnInputChange: externalInputChangeHandler\n  })\n\n  useKeyboardNavigation({ ref: refs.domReference, openChangeHandler: setOpen })\n\n  const getLabel = () => {\n    if (!value) return ''\n\n    if (multiple && searchable) {\n      return stringifyComboboxValue(value)\n    } else if (searchable) {\n      return search\n    } else {\n      return stringifyComboboxValue(value)\n    }\n  }\n\n  const handleBlur = (event: React.FocusEvent<HTMLInputElement>) => {\n    if (event.target && event.relatedTarget) {\n      setOpen(false)\n    }\n  }\n\n  useClickOutsideMany([refs.floating, refs.reference as React.MutableRefObject<HTMLElement | null>], () => setOpen(false))\n\n  const portalContainer = portal ?? refs.domReference.current!\n\n  return (\n    <div ref={refs.setReference} className={cn('relative w-full', classes?.root, className)}>\n      <InputBase\n        ref={ref}\n        label={label}\n        invalid={invalid}\n        readOnly={readOnly || !searchable}\n        value={inputValue || getLabel()}\n        onChange={onInputChange}\n        disabled={disabled}\n        onClick={(event) => {\n          if (!open) setOpen(true)\n          externalHandlers?.clickHandler?.(event)\n        }}\n        onBlur={(event) => {\n          externalHandlers?.blurHandler?.(event)\n          handleBlur(event)\n          props?.onBlur?.(event)\n        }}\n        onFocus={externalHandlers?.focusHandler}\n        classes={{\n          input: cn({\n            'cursor-pointer': !searchable,\n            'cursor-default': disabled,\n            'pointer-events-none': disabled || readOnly\n          }),\n          ...classes?.input\n        }}\n        autoComplete='off'\n        attachmentProps={{\n          icon: (\n            <Icon\n              name='arrows/arrowRight'\n              className={cn('size-6 rotate-90 text-color-blue-grey-600 duration-100', {\n                '-rotate-90': open,\n                'text-color-negative': invalid\n              })}\n            />\n          ),\n          onClickIcon: () => setOpen((prev) => !prev),\n          ...attachmentProps\n        }}\n        data-id='combobox-input'\n        data-error-message={dataErrorMessage}\n        dataLayers={props?.dataLayers}\n      />\n\n      <Portal root={portalContainer}>\n        <AnimatePresence>\n          {open && (\n            <motion.div\n              ref={refs.setFloating}\n              initial={{ opacity: 0 }}\n              animate={{ opacity: 1 }}\n              transition={{ duration: 0.1 }}\n              className={cn('z-[1000]', floating)}\n              style={{\n                ...floatingStyles,\n                width: refs.reference.current?.getBoundingClientRect().width\n              }}\n            >\n              {TypeGuards.isArrayFilled(options) && (\n                <DropdownList\n                  empty={empty}\n                  options={options}\n                  multiple={multiple}\n                  onPick={changeHandler}\n                  value={state}\n                  displayValue={displayValue}\n                  classes={dropdownClasses}\n                  target={refs.domReference}\n                />\n              )}\n            </motion.div>\n          )}\n        </AnimatePresence>\n      </Portal>\n    </div>\n  )\n}\n\nexport const Combobox = forwardRef(InnerComponent) as <Multi extends boolean>(\n  props: ComboboxProps<Multi> & { ref?: ForwardedRef<HTMLInputElement> }\n) => React.JSX.Element\n"],"names":["InnerComponent","initialOptions","multiple","value","onChange","defaultOpen","attachmentProps","searchable","invalid","displayValue","label","disabled","readOnly","className","externalHandlers","inputValue","filterDisabled","externalInputChangeHandler","empty","classes","portal","props","ref","dataErrorMessage","floating","dropdownClasses","refs","floatingStyles","useFloating","flip","offset","autoUpdate","open","setOpen","state","changeHandler","options","search","onInputChange","useCombobox","useKeyboardNavigation","getLabel","stringifyComboboxValue","handleBlur","event","useClickOutsideMany","portalContainer","jsxs","cn","jsx","InputBase","Icon","prev","Portal","AnimatePresence","motion","TypeGuards","DropdownList","Combobox","forwardRef"],"mappings":"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"}

package/dist/lib/shared/ui/formElements/uncontrolled/combobox/hooks/useCombobox.js.map

@@ -1 +1 @@
-{"version":3,"file":"useCombobox.js","sources":["../../../../../../../../lib/shared/ui/formElements/uncontrolled/combobox/hooks/useCombobox.ts"],"sourcesContent":["import { useMemo, useRef, useState } from 'react'\nimport type { ExternalHandlers } from '../combobox'\nimport { type ChangeHandler, type ComboboxValue, stringifyComboboxValue } from '../model'\nimport type { ComboboxItemOption } from '../ui'\n\ntype UseComboboxOptions<Multi extends boolean = false> = {\n  initialOptions: ComboboxItemOption[]\n  searchable?: boolean\n  multiple?: Multi\n  value?: ComboboxValue<Multi>\n  onChange?: ChangeHandler<Multi>\n  displayValue?: ((value: ComboboxValue<boolean>) => string) | undefined\n  defaultOpen?: boolean\n  externalHandlers?: ExternalHandlers<Multi>\n  externalInputValue?: string\n  externalOnInputChange?: (value: string) => void\n  filterDisabled?: boolean\n}\n\nexport const useCombobox = <Multi extends boolean = false>(props: UseComboboxOptions<Multi>) => {\n  const {\n    multiple,\n    defaultOpen,\n    value,\n    onChange,\n    initialOptions,\n    searchable,\n    filterDisabled,\n    displayValue,\n    externalHandlers,\n    externalInputValue,\n    externalOnInputChange\n  } = props\n  const { changeHandler: externalChangeHandler, inputChangeHandler: externalInputChangeHandler } = externalHandlers ?? {}\n\n  const [search, setSearch] = useState<string>(stringifyComboboxValue(value) ?? '')\n  const [open, setOpen] = useState<boolean>(defaultOpen ?? false)\n\n  const isUpdatingRef = useRef<boolean>(false)\n\n  const options = useMemo<ComboboxItemOption[]>(() => {\n    if (filterDisabled) {\n      return initialOptions\n    }\n\n    if (!search.length || !searchable) {\n      return initialOptions\n    }\n\n    return initialOptions.filter((option) =>\n      option.label.toLowerCase().includes(externalInputValue ? externalInputValue.toLowerCase() : search.toLowerCase())\n    )\n  }, [externalInputValue, filterDisabled, initialOptions, search, searchable])\n\n  const onInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    setOpen(true)\n\n    setSearch(e.target.value)\n    externalInputChangeHandler?.(e.target.value)\n    externalOnInputChange?.(e.target.value)\n  }\n\n  const changeHandler = (newValue: ComboboxItemOption) => {\n    if (isUpdatingRef.current) return\n\n    isUpdatingRef.current = true\n\n    if (multiple) {\n      const prev = (value as ComboboxItemOption[]) || []\n      const exists = prev.some((option) => option.value === newValue.value)\n\n      let updatedValue: ComboboxItemOption[]\n\n      if (exists) {\n        updatedValue = prev.filter((option) => option.value !== newValue.value)\n      } else {\n        updatedValue = [...prev, newValue]\n      }\n\n      onChange?.(updatedValue as ComboboxValue<Multi>)\n      externalChangeHandler?.(updatedValue as ComboboxValue<Multi>)\n\n      const searchValue = stringifyComboboxValue(prev, displayValue)\n      setSearch(searchValue)\n      externalOnInputChange?.(searchValue)\n    } else {\n      let updated: ComboboxValue<Multi>\n\n      if ((value as ComboboxItemOption)?.value === newValue.value) {\n        updated = null as ComboboxValue<Multi>\n      } else {\n        updated = newValue as ComboboxValue<Multi>\n      }\n\n      onChange?.(updated)\n      externalChangeHandler?.(updated)\n\n      const label = stringifyComboboxValue(updated)\n      setSearch(label ?? '')\n      externalOnInputChange?.(label ?? '')\n      setOpen(false)\n    }\n\n    setTimeout(() => {\n      isUpdatingRef.current = false\n    }, 0)\n  }\n\n  return {\n    open,\n    setOpen,\n    changeHandler,\n    options,\n    search,\n    onInputChange,\n    state: value\n  }\n}\n"],"names":["useCombobox","props","multiple","defaultOpen","value","onChange","initialOptions","searchable","filterDisabled","displayValue","externalHandlers","externalInputValue","externalOnInputChange","externalChangeHandler","externalInputChangeHandler","search","setSearch","useState","stringifyComboboxValue","open","setOpen","isUpdatingRef","useRef","options","useMemo","option","newValue","prev","exists","updatedValue","searchValue","updated","label"],"mappings":"qHAmBO,MAAMA,EAA8CC,GAAqC,CAC9F,KAAM,CACJ,SAAAC,EACA,YAAAC,EACA,MAAAC,EACA,SAAAC,EACA,eAAAC,EACA,WAAAC,EACA,eAAAC,EACA,aAAAC,EACA,iBAAAC,EACA,mBAAAC,EACA,sBAAAC,CAAA,EACEX,EACE,CAAE,cAAeY,EAAuB,mBAAoBC,CAAA,EAA+BJ,GAAoB,CAAA,EAE/G,CAACK,EAAQC,CAAS,EAAIC,EAAiBC,EAAuBd,CAAK,GAAK,EAAE,EAC1E,CAACe,EAAMC,CAAO,EAAIH,EAAkBd,GAAe,EAAK,EAExDkB,EAAgBC,EAAgB,EAAK,EAErCC,EAAUC,EAA8B,IACxChB,GAIA,CAACO,EAAO,QAAU,CAACR,EACdD,EAGFA,EAAe,OAAQmB,GAC5BA,EAAO,MAAM,YAAA,EAAc,SAASd,EAAqBA,EAAmB,cAAgBI,EAAO,aAAa,CAAA,EAEjH,CAACJ,EAAoBH,EAAgBF,EAAgBS,EAAQR,CAAU,CAAC,EAwD3E,MAAO,CACL,KAAAY,EACA,QAAAC,EACA,cAjDqBM,GAAiC,CACtD,GAAI,CAAAL,EAAc,QAIlB,IAFAA,EAAc,QAAU,GAEpBnB,EAAU,CACZ,MAAMyB,EAAQvB,GAAkC,CAAA,EAC1CwB,EAASD,EAAK,KAAMF,GAAWA,EAAO,QAAUC,EAAS,KAAK,EAEpE,IAAIG,EAEAD,EACFC,EAAeF,EAAK,OAAQF,GAAWA,EAAO,QAAUC,EAAS,KAAK,EAEtEG,EAAe,CAAC,GAAGF,EAAMD,CAAQ,EAGnCrB,IAAWwB,CAAoC,EAC/ChB,IAAwBgB,CAAoC,EAE5D,MAAMC,EAAcZ,EAAuBS,EAAMlB,CAAY,EAC7DO,EAAUc,CAAW,EACrBlB,IAAwBkB,CAAW,CACrC,KAAO,CACL,IAAIC,EAEC3B,GAA8B,QAAUsB,EAAS,MACpDK,EAAU,KAEVA,EAAUL,EAGZrB,IAAW0B,CAAO,EAClBlB,IAAwBkB,CAAO,EAE/B,MAAMC,EAAQd,EAAuBa,CAAO,EAC5Cf,EAAUgB,GAAS,EAAE,EACrBpB,IAAwBoB,GAAS,EAAE,EACnCZ,EAAQ,EAAK,CACf,CAEA,WAAW,IAAM,CACfC,EAAc,QAAU,EAC1B,EAAG,CAAC,EACN,EAME,QAAAE,EACA,OAAAR,EACA,cA5DqB,GAA2C,CAChEK,EAAQ,EAAI,EAEZJ,EAAU,EAAE,OAAO,KAAK,EACxBF,IAA6B,EAAE,OAAO,KAAK,EAC3CF,IAAwB,EAAE,OAAO,KAAK,CACxC,EAuDE,MAAOR,CAAA,CAEX"}
+{"version":3,"file":"useCombobox.js","sources":["../../../../../../../../lib/shared/ui/formElements/uncontrolled/combobox/hooks/useCombobox.ts"],"sourcesContent":["import { useMemo, useRef, useState } from 'react'\nimport type { ExternalHandlers } from '../combobox'\nimport { type ChangeHandler, type ComboboxValue, stringifyComboboxValue } from '../model'\nimport type { ComboboxItemOption } from '../ui'\n\ntype UseComboboxOptions<Multi extends boolean = false> = {\n  initialOptions: ComboboxItemOption[]\n  searchable?: boolean\n  multiple?: Multi\n  value?: ComboboxValue<Multi>\n  onChange?: ChangeHandler<Multi>\n  displayValue?: ((value: ComboboxItemOption | null) => string) | undefined\n  defaultOpen?: boolean\n  externalHandlers?: ExternalHandlers<Multi>\n  externalInputValue?: string\n  externalOnInputChange?: (value: string) => void\n  filterDisabled?: boolean\n}\n\nexport const useCombobox = <Multi extends boolean = false>(props: UseComboboxOptions<Multi>) => {\n  const {\n    multiple,\n    defaultOpen,\n    value,\n    onChange,\n    initialOptions,\n    searchable,\n    filterDisabled,\n    displayValue,\n    externalHandlers,\n    externalInputValue,\n    externalOnInputChange\n  } = props\n  const { changeHandler: externalChangeHandler, inputChangeHandler: externalInputChangeHandler } = externalHandlers ?? {}\n\n  const [search, setSearch] = useState<string>(stringifyComboboxValue(value) ?? '')\n  const [open, setOpen] = useState<boolean>(defaultOpen ?? false)\n\n  const isUpdatingRef = useRef<boolean>(false)\n\n  const options = useMemo<ComboboxItemOption[]>(() => {\n    if (filterDisabled) {\n      return initialOptions\n    }\n\n    if (!search.length || !searchable) {\n      return initialOptions\n    }\n\n    return initialOptions.filter((option) =>\n      option.label.toLowerCase().includes(externalInputValue ? externalInputValue.toLowerCase() : search.toLowerCase())\n    )\n  }, [externalInputValue, filterDisabled, initialOptions, search, searchable])\n\n  const onInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    setOpen(true)\n\n    setSearch(e.target.value)\n    externalInputChangeHandler?.(e.target.value)\n    externalOnInputChange?.(e.target.value)\n  }\n\n  const changeHandler = (newValue: ComboboxItemOption) => {\n    if (isUpdatingRef.current) return\n\n    isUpdatingRef.current = true\n\n    if (multiple) {\n      const prev = (value as ComboboxItemOption[]) || []\n      const exists = prev.some((option) => option.value === newValue.value)\n\n      let updatedValue: ComboboxItemOption[]\n\n      if (exists) {\n        updatedValue = prev.filter((option) => option.value !== newValue.value)\n      } else {\n        updatedValue = [...prev, newValue]\n      }\n\n      onChange?.(updatedValue as ComboboxValue<Multi>)\n      externalChangeHandler?.(updatedValue as ComboboxValue<Multi>)\n\n      const searchValue = stringifyComboboxValue(prev, displayValue)\n      setSearch(searchValue)\n      externalOnInputChange?.(searchValue)\n    } else {\n      let updated: ComboboxValue<Multi>\n\n      if ((value as ComboboxItemOption)?.value === newValue.value) {\n        updated = null as ComboboxValue<Multi>\n      } else {\n        updated = newValue as ComboboxValue<Multi>\n      }\n\n      onChange?.(updated)\n      externalChangeHandler?.(updated)\n\n      const label = stringifyComboboxValue(updated)\n      setSearch(label ?? '')\n      externalOnInputChange?.(label ?? '')\n      setOpen(false)\n    }\n\n    setTimeout(() => {\n      isUpdatingRef.current = false\n    }, 0)\n  }\n\n  return {\n    open,\n    setOpen,\n    changeHandler,\n    options,\n    search,\n    onInputChange,\n    state: value\n  }\n}\n"],"names":["useCombobox","props","multiple","defaultOpen","value","onChange","initialOptions","searchable","filterDisabled","displayValue","externalHandlers","externalInputValue","externalOnInputChange","externalChangeHandler","externalInputChangeHandler","search","setSearch","useState","stringifyComboboxValue","open","setOpen","isUpdatingRef","useRef","options","useMemo","option","newValue","prev","exists","updatedValue","searchValue","updated","label"],"mappings":"qHAmBO,MAAMA,EAA8CC,GAAqC,CAC9F,KAAM,CACJ,SAAAC,EACA,YAAAC,EACA,MAAAC,EACA,SAAAC,EACA,eAAAC,EACA,WAAAC,EACA,eAAAC,EACA,aAAAC,EACA,iBAAAC,EACA,mBAAAC,EACA,sBAAAC,CAAA,EACEX,EACE,CAAE,cAAeY,EAAuB,mBAAoBC,CAAA,EAA+BJ,GAAoB,CAAA,EAE/G,CAACK,EAAQC,CAAS,EAAIC,EAAiBC,EAAuBd,CAAK,GAAK,EAAE,EAC1E,CAACe,EAAMC,CAAO,EAAIH,EAAkBd,GAAe,EAAK,EAExDkB,EAAgBC,EAAgB,EAAK,EAErCC,EAAUC,EAA8B,IACxChB,GAIA,CAACO,EAAO,QAAU,CAACR,EACdD,EAGFA,EAAe,OAAQmB,GAC5BA,EAAO,MAAM,YAAA,EAAc,SAASd,EAAqBA,EAAmB,cAAgBI,EAAO,aAAa,CAAA,EAEjH,CAACJ,EAAoBH,EAAgBF,EAAgBS,EAAQR,CAAU,CAAC,EAwD3E,MAAO,CACL,KAAAY,EACA,QAAAC,EACA,cAjDqBM,GAAiC,CACtD,GAAI,CAAAL,EAAc,QAIlB,IAFAA,EAAc,QAAU,GAEpBnB,EAAU,CACZ,MAAMyB,EAAQvB,GAAkC,CAAA,EAC1CwB,EAASD,EAAK,KAAMF,GAAWA,EAAO,QAAUC,EAAS,KAAK,EAEpE,IAAIG,EAEAD,EACFC,EAAeF,EAAK,OAAQF,GAAWA,EAAO,QAAUC,EAAS,KAAK,EAEtEG,EAAe,CAAC,GAAGF,EAAMD,CAAQ,EAGnCrB,IAAWwB,CAAoC,EAC/ChB,IAAwBgB,CAAoC,EAE5D,MAAMC,EAAcZ,EAAuBS,EAAMlB,CAAY,EAC7DO,EAAUc,CAAW,EACrBlB,IAAwBkB,CAAW,CACrC,KAAO,CACL,IAAIC,EAEC3B,GAA8B,QAAUsB,EAAS,MACpDK,EAAU,KAEVA,EAAUL,EAGZrB,IAAW0B,CAAO,EAClBlB,IAAwBkB,CAAO,EAE/B,MAAMC,EAAQd,EAAuBa,CAAO,EAC5Cf,EAAUgB,GAAS,EAAE,EACrBpB,IAAwBoB,GAAS,EAAE,EACnCZ,EAAQ,EAAK,CACf,CAEA,WAAW,IAAM,CACfC,EAAc,QAAU,EAC1B,EAAG,CAAC,EACN,EAME,QAAAE,EACA,OAAAR,EACA,cA5DqB,GAA2C,CAChEK,EAAQ,EAAI,EAEZJ,EAAU,EAAE,OAAO,KAAK,EACxBF,IAA6B,EAAE,OAAO,KAAK,EAC3CF,IAAwB,EAAE,OAAO,KAAK,CACxC,EAuDE,MAAOR,CAAA,CAEX"}

package/dist/lib/shared/ui/formElements/uncontrolled/combobox/model/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sources":["../../../../../../../../lib/shared/ui/formElements/uncontrolled/combobox/model/utils.ts"],"sourcesContent":["import { type ComboboxValue } from '$/shared/ui'\n\ntype Fn<T, R> = (arg: T) => R\n\nexport function call<T>(...functions: Array<Fn<T, void> | undefined>): Fn<T, void> {\n  return (arg: T) => functions.forEach((fn) => fn?.(arg))\n}\n\nexport const isSingleOption = (option: ComboboxValue<boolean> | undefined): option is ComboboxValue<false> => {\n  return !Array.isArray(option)\n}\n\nexport const stringifyComboboxValue = (\n  value: ComboboxValue<boolean> | undefined,\n  displayValue?: ((value: ComboboxValue<boolean>) => string) | undefined\n) => {\n  if (isSingleOption(value) && displayValue) {\n    return displayValue(value)\n  } else if (isSingleOption(value)) {\n    return value?.label ?? ''\n  } else if (!isSingleOption(value) && displayValue) {\n    return value?.map((option) => displayValue(option as ComboboxValue<boolean>)).join(', ') ?? ''\n  } else if (!isSingleOption(value)) {\n    return value?.map((option) => option.label).join(', ') ?? ''\n  }\n\n  return ''\n}\n"],"names":["call","functions","arg","fn","isSingleOption","option","stringifyComboboxValue","value","displayValue"],"mappings":"AAIO,SAASA,KAAWC,EAAwD,CACjF,OAAQC,GAAWD,EAAU,QAASE,GAAOA,IAAKD,CAAG,CAAC,CACxD,CAEO,MAAME,EAAkBC,GACtB,CAAC,MAAM,QAAQA,CAAM,EAGjBC,EAAyB,CACpCC,EACAC,IAEIJ,EAAeG,CAAK,GAAKC,EACpBA,EAAaD,CAAK,EAChBH,EAAeG,CAAK,EACtBA,GAAO,OAAS,GACd,CAACH,EAAeG,CAAK,GAAKC,EAC5BD,GAAO,IAAKF,GAAWG,EAAaH,CAAgC,CAAC,EAAE,KAAK,IAAI,GAAK,GAClFD,EAAeG,CAAK,EAIzB,GAHEA,GAAO,IAAKF,GAAWA,EAAO,KAAK,EAAE,KAAK,IAAI,GAAK"}
+{"version":3,"file":"utils.js","sources":["../../../../../../../../lib/shared/ui/formElements/uncontrolled/combobox/model/utils.ts"],"sourcesContent":["import { type ComboboxItemOption, type ComboboxValue } from '$/shared/ui'\n\ntype Fn<T, R> = (arg: T) => R\n\nexport function call<T>(...functions: Array<Fn<T, void> | undefined>): Fn<T, void> {\n  return (arg: T) => functions.forEach((fn) => fn?.(arg))\n}\n\nexport const isSingleOption = (option: ComboboxValue<boolean> | undefined): option is ComboboxValue<false> => {\n  return !Array.isArray(option)\n}\n\nexport const stringifyComboboxValue = (\n  value: ComboboxValue<boolean> | undefined,\n  displayValue?: ((value: ComboboxItemOption | null) => string) | undefined\n) => {\n  if (isSingleOption(value) && displayValue) {\n    return displayValue(value)\n  } else if (isSingleOption(value)) {\n    return value?.label ?? ''\n  } else if (!isSingleOption(value) && displayValue) {\n    return value?.map((option) => displayValue(option)).join(', ') ?? ''\n  } else if (!isSingleOption(value)) {\n    return value?.map((option) => option.label).join(', ') ?? ''\n  }\n\n  return ''\n}\n"],"names":["call","functions","arg","fn","isSingleOption","option","stringifyComboboxValue","value","displayValue"],"mappings":"AAIO,SAASA,KAAWC,EAAwD,CACjF,OAAQC,GAAWD,EAAU,QAASE,GAAOA,IAAKD,CAAG,CAAC,CACxD,CAEO,MAAME,EAAkBC,GACtB,CAAC,MAAM,QAAQA,CAAM,EAGjBC,EAAyB,CACpCC,EACAC,IAEIJ,EAAeG,CAAK,GAAKC,EACpBA,EAAaD,CAAK,EAChBH,EAAeG,CAAK,EACtBA,GAAO,OAAS,GACd,CAACH,EAAeG,CAAK,GAAKC,EAC5BD,GAAO,IAAKF,GAAWG,EAAaH,CAAM,CAAC,EAAE,KAAK,IAAI,GAAK,GACxDD,EAAeG,CAAK,EAIzB,GAHEA,GAAO,IAAKF,GAAWA,EAAO,KAAK,EAAE,KAAK,IAAI,GAAK"}

package/dist/lib/widgets/dynamicForm/DynamicForm.js

@@ -1,2 +1,2 @@
-import{jsx as e,jsxs as d}from"react/jsx-runtime";import{useState as A,createElement as J}from"react";import{getDynamicSchema as K}from"../../../src/shared/utils/getDynamicSchema.js";import{ZodUtils as O}from"../../shared/validation/utils/zodUtils.js";import{getFieldsProgress as T,withApprovement as W}from"./model/helpers.js";import{useFieldsProgress as X}from"../../shared/hooks/useFieldsProgress.js";import{QueryClientProvider as Y}from"../queryClientProvider/QueryClientProvider.js";import{cn as t}from"../../shared/utils/cn.js";import{Esia as S}from"../esia/Esia.js";import{ProgressBar as _}from"../../shared/ui/progressBar/ProgressBar.js";import{HTMLRenderer as p}from"../htmlParser/HTMLRenderer.js";import{FieldMapper as $}from"../fieldMapper/FieldMapper.js";import{useControlledForm as G}from"../../shared/hooks/useControlledForm.js";import{ResponsiveContainer as ee}from"../../shared/ui/responsiveContainer/ResponsiveContainer.js";import{Icon as te}from"../../shared/ui/icon/Icon.js";import{Heading as P}from"../../shared/ui/heading/Heading.js";import{Button as oe}from"../../shared/ui/button/Button.js";const we=({fields:c,title:h,progress:r,approvement:a,chips:s,submitProps:B,classes:o,buttonGroup:n,ssoAuthorizationTop:u=!1,backgroundColor:g,disabledButtons:C,esiaConfig:l})=>{const{submitCallback:x,onErrorCallback:E}=B||{},[m,F]=A(a.type==="checkbox"?a.defaultValue:!1),f=K(c),V=O.getZodDefaults(f),{control:b,handleSubmit:v,getValues:j,watch:D,trigger:H,formState:{isValid:L,errors:k}}=G({schema:f,defaultValues:V,mode:"onBlur"}),M=T(r,c),R=X({control:b,fields:M||[],schema:f}),Z=i=>{x&&x({...i,agree:m})},[y,w]=D(["fio","phone"]),z=!!y&&!k.fio,I=!!w&&!k.phone,Q=!z||!I||!m,N=async()=>{if(Q){await H(["fio","phone"]),console.error("[Error] - Empty field fio or phone",{fio:y,phone:w});return}l?.onClick&&l.onClick({...j(),agree:m})};return e(Y,{children:e("section",{id:"form","data-test-id":"form",className:t("w-full",o?.root,g&&"desktop:py-[80px]"),style:{backgroundColor:g},children:d(ee,{className:t("border-warm-grey-200 px-4 desktop:w-[636px] desktop:gap-8 desktop:p-14","relative mx-auto flex flex-col gap-6 rounded-sm bg-color-white py-8 desktop:border"),children:[s.enabled&&d("div",{className:t("desk-body-regular-l flex items-center gap-x-2 rounded-sm desktop:absolute","bg-color-blue-grey-100 px-2 py-1 text-color-tetriary","right-4 top-4 w-max",o?.chips?.root),children:[s.image&&e(te,{name:s.image,className:t("size-6",o?.chips?.icon)}),s.content]}),e(P,{as:"h2",className:t("text-color-dark desktop:hidden",o?.title),children:h}),e(P,{as:"h3",className:t("text-color-dark mobile:hidden",o?.title),children:h}),u&&l&&e(S,{...l,onClick:N}),d("form",{"data-valid":L,onSubmit:v(Z,i=>E?.(i)),className:t("flex w-full flex-col gap-y-6","desktop:gap-y-8",o?.form),children:[r.enabled&&e(_,{progress:R,topContent:e(p,{html:r.title}),leftSubtitle:e(p,{html:r.leftSubtitle}),rightSubtitle:e(p,{html:r.rightSubtitle}),maxPercent:r.maxPercent,classes:o?.progressBar}),e($,{control:b,fields:c}),d("div",{className:t("mob-body-regular-s flex flex-col items-start justify-between gap-4",{"desktop:flex-row desktop:items-center":n.length===1}),children:[W(a,m,F,o?.approvement),e("div",{className:t("flex w-full flex-col items-center justify-between gap-4 desktop:flex-row",{"desktop:w-fit":n.length===1}),children:n?.map((i,U)=>{const q=i.type==="submit"&&a.type==="checkbox"?!m:!1;return J(oe,{...i,size:"lg",key:U,disabled:C||q,className:t("w-full whitespace-nowrap",{"desktop:!w-fit":n.length===1},{"w-full":!!a},o?.submit)})})})]}),!u&&l&&e(S,{...l,onClick:N})]})]})})})};export{we as DynamicForm,we as default};
+import{jsx as e,jsxs as n}from"react/jsx-runtime";import{useState as A,createElement as J}from"react";import{getDynamicSchema as K}from"../../../src/shared/utils/getDynamicSchema.js";import{ZodUtils as O}from"../../shared/validation/utils/zodUtils.js";import{getFieldsProgress as T,withApprovement as W}from"./model/helpers.js";import{useFieldsProgress as X}from"../../shared/hooks/useFieldsProgress.js";import{QueryClientProvider as Y}from"../queryClientProvider/QueryClientProvider.js";import{cn as t}from"../../shared/utils/cn.js";import{Esia as S}from"../esia/Esia.js";import{ProgressBar as _}from"../../shared/ui/progressBar/ProgressBar.js";import{HTMLRenderer as p}from"../htmlParser/HTMLRenderer.js";import{FieldMapper as $}from"../fieldMapper/FieldMapper.js";import{useControlledForm as G}from"../../shared/hooks/useControlledForm.js";import{ResponsiveContainer as ee}from"../../shared/ui/responsiveContainer/ResponsiveContainer.js";import{Icon as te}from"../../shared/ui/icon/Icon.js";import{Heading as P}from"../../shared/ui/heading/Heading.js";import{Button as oe}from"../../shared/ui/button/Button.js";const we=({fields:c,title:h,progress:l,approvement:a,chips:s,submitProps:B,classes:o,buttonGroup:d,ssoAuthorizationTop:u=!1,backgroundColor:x,disabledButtons:E,esiaConfig:r})=>{const{submitCallback:b,onErrorCallback:F}=B||{},[m,V]=A(a.type==="checkbox"?a.defaultValue:!1),f=K(c),v=O.getZodDefaults(f),{control:g,handleSubmit:C,getValues:j,watch:D,trigger:H,formState:{isValid:L,errors:k}}=G({schema:f,defaultValues:v,mode:"onBlur"}),M=T(l,c),R=X({control:g,fields:M||[],schema:f}),Z=i=>{b&&b({...i,agree:m})},[y,w]=D(["fio","phone"]),z=!!y&&!k.fio,I=!!w&&!k.phone,Q=!z||!I||!m,N=async()=>{if(Q){await H(["fio","phone"]),console.error("[Error] - Empty field fio or phone",{fio:y,phone:w});return}r?.onClick&&r.onClick({...j(),agree:m})};return e(Y,{children:e("section",{id:"form","data-test-id":"form",className:t("w-full",o?.root,x&&"desktop:py-[80px]"),style:{backgroundColor:x},children:n(ee,{className:t("border-warm-grey-200 px-4 desktop:w-[636px] desktop:gap-8 desktop:p-14","relative mx-auto flex flex-col gap-6 rounded-sm bg-color-white py-8 desktop:border"),children:[s.enabled&&n("div",{className:t("desk-body-regular-l flex items-center gap-x-2 rounded-sm desktop:absolute","bg-color-blue-grey-100 px-2 py-1 text-color-tetriary","right-4 top-4 w-max",o?.chips?.root),children:[s.image&&e(te,{name:s.image,className:t("size-6",o?.chips?.icon)}),s.content]}),e(P,{as:"h2",className:t("text-color-dark desktop:hidden",o?.title),children:h}),e(P,{as:"h3",className:t("text-color-dark mobile:hidden",o?.title),children:h}),u&&r&&r.mode!=="off"&&e(S,{...r,onClick:N}),n("form",{"data-valid":L,onSubmit:C(Z,i=>F?.(i)),className:t("flex w-full flex-col gap-y-6","desktop:gap-y-8",o?.form),children:[l.enabled&&e(_,{progress:R,topContent:e(p,{html:l.title}),leftSubtitle:e(p,{html:l.leftSubtitle}),rightSubtitle:e(p,{html:l.rightSubtitle}),maxPercent:l.maxPercent,classes:o?.progressBar}),e($,{control:g,fields:c}),n("div",{className:t("mob-body-regular-s flex flex-col items-start justify-between gap-4",{"desktop:flex-row desktop:items-center":d.length===1}),children:[W(a,m,V,o?.approvement),e("div",{className:t("flex w-full flex-col items-center justify-between gap-4 desktop:flex-row",{"desktop:w-fit":d.length===1}),children:d?.map((i,U)=>{const q=i.type==="submit"&&a.type==="checkbox"?!m:!1;return J(oe,{...i,size:"lg",key:U,disabled:E||q,className:t("w-full whitespace-nowrap",{"desktop:!w-fit":d.length===1},{"w-full":!!a},o?.submit)})})})]}),!u&&r&&r.mode!=="off"&&e(S,{...r,onClick:N})]})]})})})};export{we as DynamicForm,we as default};
 //# sourceMappingURL=DynamicForm.js.map

package/dist/lib/widgets/dynamicForm/DynamicForm.js.map

@@ -1 +1 @@
-{"version":3,"file":"DynamicForm.js","sources":["../../../../lib/widgets/dynamicForm/DynamicForm.tsx"],"sourcesContent":["import { useState } from 'react'\nimport { type Control, type SubmitHandler } from 'react-hook-form'\nimport { type TypeOf } from 'zod'\nimport { Esia, type EsiaProps } from '../esia'\nimport { HTMLRenderer } from '../htmlParser'\nimport {\n  type Approvement,\n  type ApprovementClasses,\n  type ApprovementType,\n  type Chips,\n  type ChipsClasses,\n  type ChipsType,\n  getFieldsProgress,\n  type Progress,\n  type ProgressField,\n  type ProgressType,\n  type SubmitProps,\n  withApprovement\n} from './model'\nimport { type FieldValidation, getDynamicSchema } from '@/shared/utils'\nimport { type BackgroundColors } from '$/shared/constants'\nimport { useControlledForm, useFieldsProgress } from '$/shared/hooks'\nimport { Button, type ButtonProps, type CheckedState, Heading, Icon, ProgressBar, ResponsiveContainer } from '$/shared/ui'\nimport { cn } from '$/shared/utils'\nimport { ZodUtils } from '$/shared/validation'\nimport { type FieldElement, FieldMapper } from '$/widgets/fieldMapper'\nimport { QueryClientProvider } from '$/widgets/queryClientProvider'\n\nexport type DynamicFormClasses = {\n  root?: string\n  title?: string\n  fields?: string\n  form?: string\n  chips?: ChipsClasses\n  approvement?: ApprovementClasses\n  progressBar?: React.ComponentProps<typeof ProgressBar>['classes']\n  submit?: string\n}\n\nexport type DynamicFormProps<AType extends ApprovementType, CType extends ChipsType, PType extends ProgressType> = {\n  fields: FieldElement<any, any, { validation: FieldValidation; progress: ProgressField }>[]\n  ssoAuthorizationTop: boolean\n  title: string\n  progress: Progress<PType>\n  approvement: Approvement<AType>\n  chips: Chips<CType>\n  submitProps?: SubmitProps\n  classes?: DynamicFormClasses\n  buttonGroup: ButtonProps[]\n  backgroundColor?: BackgroundColors\n  disabledButtons?: boolean\n  esiaConfig?: EsiaProps\n}\n\nexport const DynamicForm = <AType extends ApprovementType, CType extends ChipsType, PType extends ProgressType>({\n  fields,\n  title,\n  progress,\n  approvement,\n  chips,\n  submitProps,\n  classes,\n  buttonGroup,\n  ssoAuthorizationTop = false,\n  backgroundColor,\n  disabledButtons,\n  esiaConfig\n}: DynamicFormProps<AType, CType, PType>) => {\n  const { submitCallback, onErrorCallback } = submitProps || {}\n\n  const [checked, onCheckedChange] = useState<CheckedState>(approvement.type === 'checkbox' ? approvement.defaultValue : false)\n\n  const schema = getDynamicSchema(fields)\n  const defaultValues = ZodUtils.getZodDefaults(schema)\n\n  const {\n    control,\n    handleSubmit,\n    getValues,\n    watch,\n    trigger,\n    formState: { isValid, errors }\n  } = useControlledForm({\n    schema,\n    defaultValues,\n    mode: 'onBlur'\n  })\n\n  const fieldsProgress = getFieldsProgress(progress, fields)\n\n  const formattedProgress = useFieldsProgress({ control, fields: fieldsProgress || [], schema })\n\n  const onSubmit: SubmitHandler<TypeOf<typeof schema>> = (values) => {\n    if (submitCallback) submitCallback({ ...values, agree: checked })\n  }\n\n  const [fio, phone] = watch(['fio', 'phone'])\n  const isFioValid = Boolean(fio) && !errors.fio\n  const isPhoneValid = Boolean(phone) && !errors.phone\n  const disabledEsia = !isFioValid || !isPhoneValid || !checked\n\n  const handleClickEsia = async () => {\n    if (disabledEsia) {\n      // Триггерим валидацию для полей fio и phone\n      await trigger(['fio', 'phone'])\n      console.error('[Error] - Empty field fio or phone', { fio, phone })\n      return\n    }\n\n    if (esiaConfig?.onClick) {\n      esiaConfig.onClick({ ...getValues(), agree: checked })\n    }\n  }\n\n  return (\n    <QueryClientProvider>\n      <section\n        id='form'\n        data-test-id='form'\n        className={cn('w-full', classes?.root, backgroundColor && `desktop:py-[80px]`)}\n        style={{ backgroundColor }}\n      >\n        <ResponsiveContainer\n          className={cn(\n            'border-warm-grey-200 px-4 desktop:w-[636px] desktop:gap-8 desktop:p-14',\n            'relative mx-auto flex flex-col gap-6 rounded-sm bg-color-white py-8 desktop:border'\n          )}\n        >\n          {chips.enabled && (\n            <div\n              className={cn(\n                'desk-body-regular-l flex items-center gap-x-2 rounded-sm desktop:absolute',\n                'bg-color-blue-grey-100 px-2 py-1 text-color-tetriary',\n                'right-4 top-4 w-max',\n                classes?.chips?.root\n              )}\n            >\n              {chips.image && <Icon name={chips.image} className={cn('size-6', classes?.chips?.icon)} />}\n              {chips.content}\n            </div>\n          )}\n          <Heading as='h2' className={cn('text-color-dark desktop:hidden', classes?.title)}>\n            {title}\n          </Heading>\n          <Heading as='h3' className={cn('text-color-dark mobile:hidden', classes?.title)}>\n            {title}\n          </Heading>\n          {ssoAuthorizationTop && esiaConfig && <Esia {...esiaConfig} onClick={handleClickEsia} />}\n          <form\n            data-valid={isValid}\n            onSubmit={handleSubmit(onSubmit, (error) => onErrorCallback?.(error))}\n            className={cn('flex w-full flex-col gap-y-6', 'desktop:gap-y-8', classes?.form)}\n          >\n            {progress.enabled && (\n              <ProgressBar\n                progress={formattedProgress}\n                topContent={<HTMLRenderer html={progress.title} />}\n                leftSubtitle={<HTMLRenderer html={progress.leftSubtitle} />}\n                rightSubtitle={<HTMLRenderer html={progress.rightSubtitle} />}\n                maxPercent={progress.maxPercent}\n                classes={classes?.progressBar}\n              />\n            )}\n            <FieldMapper control={control as unknown as Control} fields={fields} />\n            <div\n              className={cn('mob-body-regular-s flex flex-col items-start justify-between gap-4', {\n                ['desktop:flex-row desktop:items-center']: buttonGroup.length === 1\n              })}\n            >\n              {withApprovement(approvement, checked, onCheckedChange, classes?.approvement)}\n              <div\n                className={cn('flex w-full flex-col items-center justify-between gap-4 desktop:flex-row', {\n                  'desktop:w-fit': buttonGroup.length === 1\n                })}\n              >\n                {buttonGroup?.map((button, index) => {\n                  const isDisabledByLogic = button.type === 'submit' && approvement.type === 'checkbox' ? !checked : false\n\n                  const disabled = disabledButtons || isDisabledByLogic\n\n                  return (\n                    <Button\n                      {...button}\n                      size='lg'\n                      key={index}\n                      disabled={disabled}\n                      className={cn(\n                        'w-full whitespace-nowrap',\n                        {\n                          ['desktop:!w-fit']: buttonGroup.length === 1\n                        },\n                        {\n                          'w-full': Boolean(approvement)\n                        },\n                        classes?.submit\n                      )}\n                    />\n                  )\n                })}\n              </div>\n            </div>\n            {!ssoAuthorizationTop && esiaConfig && <Esia {...esiaConfig} onClick={handleClickEsia} />}\n          </form>\n        </ResponsiveContainer>\n      </section>\n    </QueryClientProvider>\n  )\n}\n\nexport default DynamicForm\n"],"names":["DynamicForm","fields","title","progress","approvement","chips","submitProps","classes","buttonGroup","ssoAuthorizationTop","backgroundColor","disabledButtons","esiaConfig","submitCallback","onErrorCallback","checked","onCheckedChange","useState","schema","getDynamicSchema","defaultValues","ZodUtils","control","handleSubmit","getValues","watch","trigger","isValid","errors","useControlledForm","fieldsProgress","getFieldsProgress","formattedProgress","useFieldsProgress","onSubmit","values","fio","phone","isFioValid","isPhoneValid","disabledEsia","handleClickEsia","QueryClientProvider","jsx","cn","jsxs","ResponsiveContainer","Icon","Heading","Esia","error","ProgressBar","HTMLRenderer","FieldMapper","withApprovement","button","index","isDisabledByLogic","createElement","Button"],"mappings":"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"}
+{"version":3,"file":"DynamicForm.js","sources":["../../../../lib/widgets/dynamicForm/DynamicForm.tsx"],"sourcesContent":["import { useState } from 'react'\nimport { type Control, type SubmitHandler } from 'react-hook-form'\nimport { type TypeOf } from 'zod'\nimport { Esia, type EsiaProps } from '../esia'\nimport { HTMLRenderer } from '../htmlParser'\nimport {\n  type Approvement,\n  type ApprovementClasses,\n  type ApprovementType,\n  type Chips,\n  type ChipsClasses,\n  type ChipsType,\n  getFieldsProgress,\n  type Progress,\n  type ProgressField,\n  type ProgressType,\n  type SubmitProps,\n  withApprovement\n} from './model'\nimport { type FieldValidation, getDynamicSchema } from '@/shared/utils'\nimport { type BackgroundColors } from '$/shared/constants'\nimport { useControlledForm, useFieldsProgress } from '$/shared/hooks'\nimport { Button, type ButtonProps, type CheckedState, Heading, Icon, ProgressBar, ResponsiveContainer } from '$/shared/ui'\nimport { cn } from '$/shared/utils'\nimport { ZodUtils } from '$/shared/validation'\nimport { type FieldElement, FieldMapper } from '$/widgets/fieldMapper'\nimport { QueryClientProvider } from '$/widgets/queryClientProvider'\n\nexport type DynamicFormClasses = {\n  root?: string\n  title?: string\n  fields?: string\n  form?: string\n  chips?: ChipsClasses\n  approvement?: ApprovementClasses\n  progressBar?: React.ComponentProps<typeof ProgressBar>['classes']\n  submit?: string\n}\n\nexport type DynamicFormProps<AType extends ApprovementType, CType extends ChipsType, PType extends ProgressType> = {\n  fields: FieldElement<any, any, { validation: FieldValidation; progress: ProgressField }>[]\n  ssoAuthorizationTop: boolean\n  title: string\n  progress: Progress<PType>\n  approvement: Approvement<AType>\n  chips: Chips<CType>\n  submitProps?: SubmitProps\n  classes?: DynamicFormClasses\n  buttonGroup: ButtonProps[]\n  backgroundColor?: BackgroundColors\n  disabledButtons?: boolean\n  esiaConfig?: EsiaProps\n}\n\nexport const DynamicForm = <AType extends ApprovementType, CType extends ChipsType, PType extends ProgressType>({\n  fields,\n  title,\n  progress,\n  approvement,\n  chips,\n  submitProps,\n  classes,\n  buttonGroup,\n  ssoAuthorizationTop = false,\n  backgroundColor,\n  disabledButtons,\n  esiaConfig\n}: DynamicFormProps<AType, CType, PType>) => {\n  const { submitCallback, onErrorCallback } = submitProps || {}\n\n  const [checked, onCheckedChange] = useState<CheckedState>(approvement.type === 'checkbox' ? approvement.defaultValue : false)\n\n  const schema = getDynamicSchema(fields)\n  const defaultValues = ZodUtils.getZodDefaults(schema)\n\n  const {\n    control,\n    handleSubmit,\n    getValues,\n    watch,\n    trigger,\n    formState: { isValid, errors }\n  } = useControlledForm({\n    schema,\n    defaultValues,\n    mode: 'onBlur'\n  })\n\n  const fieldsProgress = getFieldsProgress(progress, fields)\n\n  const formattedProgress = useFieldsProgress({ control, fields: fieldsProgress || [], schema })\n\n  const onSubmit: SubmitHandler<TypeOf<typeof schema>> = (values) => {\n    if (submitCallback) submitCallback({ ...values, agree: checked })\n  }\n\n  const [fio, phone] = watch(['fio', 'phone'])\n  const isFioValid = Boolean(fio) && !errors.fio\n  const isPhoneValid = Boolean(phone) && !errors.phone\n  const disabledEsia = !isFioValid || !isPhoneValid || !checked\n\n  const handleClickEsia = async () => {\n    if (disabledEsia) {\n      // Триггерим валидацию для полей fio и phone\n      await trigger(['fio', 'phone'])\n      console.error('[Error] - Empty field fio or phone', { fio, phone })\n      return\n    }\n\n    if (esiaConfig?.onClick) {\n      esiaConfig.onClick({ ...getValues(), agree: checked })\n    }\n  }\n\n  return (\n    <QueryClientProvider>\n      <section\n        id='form'\n        data-test-id='form'\n        className={cn('w-full', classes?.root, backgroundColor && `desktop:py-[80px]`)}\n        style={{ backgroundColor }}\n      >\n        <ResponsiveContainer\n          className={cn(\n            'border-warm-grey-200 px-4 desktop:w-[636px] desktop:gap-8 desktop:p-14',\n            'relative mx-auto flex flex-col gap-6 rounded-sm bg-color-white py-8 desktop:border'\n          )}\n        >\n          {chips.enabled && (\n            <div\n              className={cn(\n                'desk-body-regular-l flex items-center gap-x-2 rounded-sm desktop:absolute',\n                'bg-color-blue-grey-100 px-2 py-1 text-color-tetriary',\n                'right-4 top-4 w-max',\n                classes?.chips?.root\n              )}\n            >\n              {chips.image && <Icon name={chips.image} className={cn('size-6', classes?.chips?.icon)} />}\n              {chips.content}\n            </div>\n          )}\n          <Heading as='h2' className={cn('text-color-dark desktop:hidden', classes?.title)}>\n            {title}\n          </Heading>\n          <Heading as='h3' className={cn('text-color-dark mobile:hidden', classes?.title)}>\n            {title}\n          </Heading>\n          {ssoAuthorizationTop && esiaConfig && esiaConfig.mode !== 'off' && <Esia {...esiaConfig} onClick={handleClickEsia} />}\n          <form\n            data-valid={isValid}\n            onSubmit={handleSubmit(onSubmit, (error) => onErrorCallback?.(error))}\n            className={cn('flex w-full flex-col gap-y-6', 'desktop:gap-y-8', classes?.form)}\n          >\n            {progress.enabled && (\n              <ProgressBar\n                progress={formattedProgress}\n                topContent={<HTMLRenderer html={progress.title} />}\n                leftSubtitle={<HTMLRenderer html={progress.leftSubtitle} />}\n                rightSubtitle={<HTMLRenderer html={progress.rightSubtitle} />}\n                maxPercent={progress.maxPercent}\n                classes={classes?.progressBar}\n              />\n            )}\n            <FieldMapper control={control as unknown as Control} fields={fields} />\n            <div\n              className={cn('mob-body-regular-s flex flex-col items-start justify-between gap-4', {\n                ['desktop:flex-row desktop:items-center']: buttonGroup.length === 1\n              })}\n            >\n              {withApprovement(approvement, checked, onCheckedChange, classes?.approvement)}\n              <div\n                className={cn('flex w-full flex-col items-center justify-between gap-4 desktop:flex-row', {\n                  'desktop:w-fit': buttonGroup.length === 1\n                })}\n              >\n                {buttonGroup?.map((button, index) => {\n                  const isDisabledByLogic = button.type === 'submit' && approvement.type === 'checkbox' ? !checked : false\n\n                  const disabled = disabledButtons || isDisabledByLogic\n\n                  return (\n                    <Button\n                      {...button}\n                      size='lg'\n                      key={index}\n                      disabled={disabled}\n                      className={cn(\n                        'w-full whitespace-nowrap',\n                        {\n                          ['desktop:!w-fit']: buttonGroup.length === 1\n                        },\n                        {\n                          'w-full': Boolean(approvement)\n                        },\n                        classes?.submit\n                      )}\n                    />\n                  )\n                })}\n              </div>\n            </div>\n            {!ssoAuthorizationTop && esiaConfig && esiaConfig.mode !== 'off' && (\n              <Esia {...esiaConfig} onClick={handleClickEsia} />\n            )}\n          </form>\n        </ResponsiveContainer>\n      </section>\n    </QueryClientProvider>\n  )\n}\n\nexport default DynamicForm\n"],"names":["DynamicForm","fields","title","progress","approvement","chips","submitProps","classes","buttonGroup","ssoAuthorizationTop","backgroundColor","disabledButtons","esiaConfig","submitCallback","onErrorCallback","checked","onCheckedChange","useState","schema","getDynamicSchema","defaultValues","ZodUtils","control","handleSubmit","getValues","watch","trigger","isValid","errors","useControlledForm","fieldsProgress","getFieldsProgress","formattedProgress","useFieldsProgress","onSubmit","values","fio","phone","isFioValid","isPhoneValid","disabledEsia","handleClickEsia","QueryClientProvider","jsx","cn","jsxs","ResponsiveContainer","Icon","Heading","Esia","error","ProgressBar","HTMLRenderer","FieldMapper","withApprovement","button","index","isDisabledByLogic","createElement","Button"],"mappings":"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"}

package/dist/lib/widgets/dynamicFormDialog/DynamicFormDialog.js

@@ -1,2 +1,2 @@
-import{jsx as e,jsxs as x}from"react/jsx-runtime";import{useState as H,createElement as Q}from"react";import{getDynamicSchema as R}from"../../../src/shared/utils/getDynamicSchema.js";import{Button as T}from"../../shared/ui/button/Button.js";import{Dialog as U}from"../../shared/ui/dialog/Dialog.js";import{CheckboxBase as q}from"../../shared/ui/formElements/uncontrolled/checkbox/Checkbox.js";import{QueryClientProvider as z}from"../queryClientProvider/QueryClientProvider.js";import{TypeGuards as G}from"../../shared/utils/typeGuards.js";import{FieldMapper as I}from"../fieldMapper/FieldMapper.js";import{cn as g}from"../../shared/utils/cn.js";import{ZodUtils as J}from"../../shared/validation/utils/zodUtils.js";import{useControlledForm as K}from"../../shared/hooks/useControlledForm.js";import{Esia as k}from"../esia/Esia.js";import{HTMLRenderer as y}from"../htmlParser/HTMLRenderer.js";const O=(o,s,l,i)=>o.type==="off"?null:o.type==="text"?e(y,{html:o.message,as:"div",className:i?.content}):x("label",{className:g("mob-body-regular-s text-color-dark","desktop:desk-body-regular-m desktop:gap-x-4","flex items-center justify-items-start gap-x-3"),children:[e(q,{classes:i?.checkbox,checked:s,onCheckedChange:l}),e(y,{html:o.content,as:"div",className:i?.content})]}),de=({fields:o,title:s,approvement:l,submitProps:i,dialogId:w,classes:c,buttonGroup:m,ssoAuthorizationTop:n=!1,disabledButtons:B,esiaConfig:r,...C})=>{const{submitCallback:d,onErrorCallback:E}=i??{},[a,S]=H(!1),f=R(o),D=J.getZodDefaults(f),{control:N,handleSubmit:F,watch:V,trigger:j,getValues:L,formState:{errors:p}}=K({schema:f,defaultValues:D,mode:"onBlur"}),[u,h]=V(["fio","phone"]),M=!!u&&!p.fio,P=!!h&&!p.phone,Z=!M||!P||!a,b=async()=>{if(Z){await j(["fio","phone"]),console.error("[Error] - Empty field fio or phone",{fio:u,phone:h});return}r?.onClick&&r.onClick({...L(),agree:a})};return e(z,{children:e(U,{id:w,title:s,...C,children:x("form",{onSubmit:F(t=>{d&&d({...t,agree:a})},t=>E?.(t)),className:"flex flex-col gap-6",children:[n&&r&&e(k,{...r,onClick:b}),e(I,{control:N,fields:o}),O(l,a,S,c?.approvement),G.isArrayFilled(m)&&e("div",{className:"flex flex-col gap-4",children:m?.map((t,v)=>{const A=t.type==="submit"&&l.type==="checkbox"?!a:!1;return Q(T,{...t,size:"lg",key:v,disabled:B||A,className:g("w-full whitespace-nowrap",{"w-full":!!l},c?.submit)})})}),!n&&r&&e(k,{...r,onClick:b})]})})})};export{de as DynamicFormDialog,de as default};
+import{jsx as e,jsxs as x}from"react/jsx-runtime";import{useState as H,createElement as Q}from"react";import{getDynamicSchema as R}from"../../../src/shared/utils/getDynamicSchema.js";import{Button as T}from"../../shared/ui/button/Button.js";import{Dialog as U}from"../../shared/ui/dialog/Dialog.js";import{CheckboxBase as q}from"../../shared/ui/formElements/uncontrolled/checkbox/Checkbox.js";import{QueryClientProvider as z}from"../queryClientProvider/QueryClientProvider.js";import{TypeGuards as G}from"../../shared/utils/typeGuards.js";import{FieldMapper as I}from"../fieldMapper/FieldMapper.js";import{cn as g}from"../../shared/utils/cn.js";import{ZodUtils as J}from"../../shared/validation/utils/zodUtils.js";import{useControlledForm as K}from"../../shared/hooks/useControlledForm.js";import{Esia as k}from"../esia/Esia.js";import{HTMLRenderer as y}from"../htmlParser/HTMLRenderer.js";const O=(r,m,l,i)=>r.type==="off"?null:r.type==="text"?e(y,{html:r.message,as:"div",className:i?.content}):x("label",{className:g("mob-body-regular-s text-color-dark","desktop:desk-body-regular-m desktop:gap-x-4","flex items-center justify-items-start gap-x-3"),children:[e(q,{classes:i?.checkbox,checked:m,onCheckedChange:l}),e(y,{html:r.content,as:"div",className:i?.content})]}),de=({fields:r,title:m,approvement:l,submitProps:i,dialogId:w,classes:c,buttonGroup:s,ssoAuthorizationTop:n=!1,disabledButtons:B,esiaConfig:o,...E})=>{const{submitCallback:d,onErrorCallback:S}=i??{},[a,D]=H(!1),f=R(r),N=J.getZodDefaults(f),{control:C,handleSubmit:F,watch:V,trigger:j,getValues:L,formState:{errors:p}}=K({schema:f,defaultValues:N,mode:"onBlur"}),[u,h]=V(["fio","phone"]),M=!!u&&!p.fio,P=!!h&&!p.phone,Z=!M||!P||!a,b=async()=>{if(Z){await j(["fio","phone"]),console.error("[Error] - Empty field fio or phone",{fio:u,phone:h});return}o?.onClick&&o.onClick({...L(),agree:a})};return e(z,{children:e(U,{id:w,title:m,...E,children:x("form",{onSubmit:F(t=>{d&&d({...t,agree:a})},t=>S?.(t)),className:"flex flex-col gap-6",children:[n&&o&&o.mode!=="off"&&e(k,{...o,onClick:b}),e(I,{control:C,fields:r}),O(l,a,D,c?.approvement),G.isArrayFilled(s)&&e("div",{className:"flex flex-col gap-4",children:s?.map((t,v)=>{const A=t.type==="submit"&&l.type==="checkbox"?!a:!1;return Q(T,{...t,size:"lg",key:v,disabled:B||A,className:g("w-full whitespace-nowrap",{"w-full":!!l},c?.submit)})})}),!n&&o&&o.mode!=="off"&&e(k,{...o,onClick:b})]})})})};export{de as DynamicFormDialog,de as default};
 //# sourceMappingURL=DynamicFormDialog.js.map

package/dist/lib/widgets/dynamicFormDialog/DynamicFormDialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"DynamicFormDialog.js","sources":["../../../../lib/widgets/dynamicFormDialog/DynamicFormDialog.tsx"],"sourcesContent":["import { useState } from 'react'\nimport type { Control, FieldValues, SubmitHandler } from 'react-hook-form'\nimport { type TypeOf } from 'zod'\nimport type { Approvement, ApprovementType } from './model'\nimport { type FieldValidation, getDynamicSchema } from '@/shared/utils'\nimport { useControlledForm } from '$/shared/hooks'\nimport { Button, type ButtonProps } from '$/shared/ui/button/Button'\nimport { Dialog } from '$/shared/ui/dialog/Dialog'\nimport { CheckboxBase, type CheckedState } from '$/shared/ui/formElements/uncontrolled/checkbox/Checkbox'\nimport { cn, TypeGuards } from '$/shared/utils'\nimport { ZodUtils } from '$/shared/validation'\nimport { Esia, type EsiaProps, HTMLRenderer } from '$/widgets'\nimport { type FieldElement, FieldMapper } from '$/widgets/fieldMapper'\nimport { QueryClientProvider } from '$/widgets/queryClientProvider'\n\ntype SubmitProps = {\n  submitCallback: <T extends FieldValues>(values: T) => void\n  onErrorCallback?: <T extends FieldValues>(error: T) => void\n}\n\ntype ApprovementClasses = {\n  checkbox?: React.ComponentProps<typeof CheckboxBase>['classes']\n  content?: string\n}\n\ntype DynamicFormDialogClasses = {\n  root?: string\n  title?: string\n  fields?: string\n  form?: string\n  approvement?: ApprovementClasses\n  submit?: string\n}\n\nexport type DynamicFormDialogProps<AType extends ApprovementType> = React.DialogHTMLAttributes<HTMLDialogElement> & {\n  fields: FieldElement<any, any, { validation: FieldValidation }>[]\n  title: string\n  approvement: Approvement<AType>\n  dialogId: string\n  submitProps?: SubmitProps\n  classes?: DynamicFormDialogClasses\n  buttonGroup: ButtonProps[]\n  ssoAuthorizationTop?: boolean\n  disabledButtons?: boolean\n  esiaConfig?: EsiaProps\n}\n\nconst withApprovement = <Type extends ApprovementType>(\n  approvement: Approvement<Type>,\n  checked: CheckedState,\n  onCheckedChange: (checked: CheckedState) => void,\n  classes?: ApprovementClasses\n) => {\n  if (approvement.type === 'off') return null\n\n  if (approvement.type === 'text') {\n    return <HTMLRenderer html={approvement.message} as='div' className={classes?.content} />\n  }\n\n  return (\n    <label\n      className={cn(\n        'mob-body-regular-s text-color-dark',\n        'desktop:desk-body-regular-m desktop:gap-x-4',\n        'flex items-center justify-items-start gap-x-3'\n      )}\n    >\n      <CheckboxBase classes={classes?.checkbox} checked={checked} onCheckedChange={onCheckedChange} />\n      <HTMLRenderer html={approvement.content} as='div' className={classes?.content} />\n    </label>\n  )\n}\n\nexport const DynamicFormDialog = <AType extends ApprovementType>({\n  fields,\n  title,\n  approvement,\n  submitProps,\n  dialogId,\n  classes,\n  buttonGroup,\n  ssoAuthorizationTop = false,\n  disabledButtons,\n  esiaConfig,\n  ...props\n}: DynamicFormDialogProps<AType>) => {\n  const { submitCallback, onErrorCallback } = submitProps ?? {}\n\n  const [checked, onCheckedChange] = useState<CheckedState>(false)\n\n  const schema = getDynamicSchema(fields)\n  const defaultValues = ZodUtils.getZodDefaults(schema)\n\n  const {\n    control,\n    handleSubmit,\n    watch,\n    trigger,\n    getValues,\n    formState: { errors }\n  } = useControlledForm({\n    schema,\n    defaultValues,\n    mode: 'onBlur'\n  })\n\n  const [fio, phone] = watch(['fio', 'phone'])\n  const isFioValid = Boolean(fio) && !errors.fio\n  const isPhoneValid = Boolean(phone) && !errors.phone\n  const disabledEsia = !isFioValid || !isPhoneValid || !checked\n\n  const handleClickEsia = async () => {\n    if (disabledEsia) {\n      // Триггерим валидацию для полей fio и phone\n      await trigger(['fio', 'phone'])\n      console.error('[Error] - Empty field fio or phone', { fio, phone })\n      return\n    }\n\n    if (esiaConfig?.onClick) {\n      esiaConfig.onClick({ ...getValues(), agree: checked })\n    }\n  }\n\n  const onSubmit: SubmitHandler<TypeOf<typeof schema>> = (values) => {\n    if (submitCallback) submitCallback({ ...values, agree: checked })\n  }\n\n  return (\n    <QueryClientProvider>\n      <Dialog id={dialogId} title={title} {...props}>\n        <form onSubmit={handleSubmit(onSubmit, (error) => onErrorCallback?.(error))} className='flex flex-col gap-6'>\n          {ssoAuthorizationTop && esiaConfig && <Esia {...esiaConfig} onClick={handleClickEsia} />}\n          <FieldMapper control={control as unknown as Control} fields={fields} />\n          {withApprovement(approvement, checked, onCheckedChange, classes?.approvement)}\n          {TypeGuards.isArrayFilled(buttonGroup) && (\n            <div className='flex flex-col gap-4'>\n              {buttonGroup?.map((button, index) => {\n                const isDisabledByLogic = button.type === 'submit' && approvement.type === 'checkbox' ? !checked : false\n\n                const disabled = disabledButtons || isDisabledByLogic\n\n                return (\n                  <Button\n                    {...button}\n                    size='lg'\n                    key={index}\n                    disabled={disabled}\n                    className={cn(\n                      'w-full whitespace-nowrap',\n                      {\n                        'w-full': Boolean(approvement)\n                      },\n                      classes?.submit\n                    )}\n                  />\n                )\n              })}\n            </div>\n          )}\n\n          {!ssoAuthorizationTop && esiaConfig && <Esia {...esiaConfig} onClick={handleClickEsia} />}\n        </form>\n      </Dialog>\n    </QueryClientProvider>\n  )\n}\n\nexport default DynamicFormDialog\n"],"names":["withApprovement","approvement","checked","onCheckedChange","classes","jsx","HTMLRenderer","jsxs","cn","CheckboxBase","DynamicFormDialog","fields","title","submitProps","dialogId","buttonGroup","ssoAuthorizationTop","disabledButtons","esiaConfig","props","submitCallback","onErrorCallback","useState","schema","getDynamicSchema","defaultValues","ZodUtils","control","handleSubmit","watch","trigger","getValues","errors","useControlledForm","fio","phone","isFioValid","isPhoneValid","disabledEsia","handleClickEsia","QueryClientProvider","Dialog","values","error","Esia","FieldMapper","TypeGuards","button","index","isDisabledByLogic","createElement","Button"],"mappings":"03BA+CA,MAAMA,EAAkB,CACtBC,EACAC,EACAC,EACAC,IAEIH,EAAY,OAAS,MAAc,KAEnCA,EAAY,OAAS,OAChBI,EAACC,GAAa,KAAML,EAAY,QAAS,GAAG,MAAM,UAAWG,GAAS,OAAA,CAAS,EAItFG,EAAC,QAAA,CACC,UAAWC,EACT,qCACA,8CACA,+CAAA,EAGF,SAAA,CAAAH,EAACI,EAAA,CAAa,QAASL,GAAS,SAAU,QAAAF,EAAkB,gBAAAC,EAAkC,EAC9FE,EAACC,GAAa,KAAML,EAAY,QAAS,GAAG,MAAM,UAAWG,GAAS,OAAA,CAAS,CAAA,CAAA,CAAA,EAKxEM,GAAoB,CAAgC,CAC/D,OAAAC,EACA,MAAAC,EACA,YAAAX,EACA,YAAAY,EACA,SAAAC,EACA,QAAAV,EACA,YAAAW,EACA,oBAAAC,EAAsB,GACtB,gBAAAC,EACA,WAAAC,EACA,GAAGC,CACL,IAAqC,CACnC,KAAM,CAAE,eAAAC,EAAgB,gBAAAC,CAAA,EAAoBR,GAAe,CAAA,EAErD,CAACX,EAASC,CAAe,EAAImB,EAAuB,EAAK,EAEzDC,EAASC,EAAiBb,CAAM,EAChCc,EAAgBC,EAAS,eAAeH,CAAM,EAE9C,CACJ,QAAAI,EACA,aAAAC,EACA,MAAAC,EACA,QAAAC,EACA,UAAAC,EACA,UAAW,CAAE,OAAAC,CAAA,CAAO,EAClBC,EAAkB,CACpB,OAAAV,EACA,cAAAE,EACA,KAAM,QAAA,CACP,EAEK,CAACS,EAAKC,CAAK,EAAIN,EAAM,CAAC,MAAO,OAAO,CAAC,EACrCO,EAAa,EAAQF,GAAQ,CAACF,EAAO,IACrCK,EAAe,EAAQF,GAAU,CAACH,EAAO,MACzCM,EAAe,CAACF,GAAc,CAACC,GAAgB,CAACnC,EAEhDqC,EAAkB,SAAY,CAClC,GAAID,EAAc,CAEhB,MAAMR,EAAQ,CAAC,MAAO,OAAO,CAAC,EAC9B,QAAQ,MAAM,qCAAsC,CAAE,IAAAI,EAAK,MAAAC,EAAO,EAClE,MACF,CAEIjB,GAAY,SACdA,EAAW,QAAQ,CAAE,GAAGa,IAAa,MAAO7B,EAAS,CAEzD,EAMA,OACEG,EAACmC,GACC,SAAAnC,EAACoC,EAAA,CAAO,GAAI3B,EAAU,MAAAF,EAAe,GAAGO,EACtC,SAAAZ,EAAC,QAAK,SAAUqB,EAPkCc,GAAW,CAC7DtB,GAAgBA,EAAe,CAAE,GAAGsB,EAAQ,MAAOxC,EAAS,CAClE,EAK8CyC,GAAUtB,IAAkBsB,CAAK,CAAC,EAAG,UAAU,sBACpF,SAAA,CAAA3B,GAAuBE,GAAcb,EAACuC,EAAA,CAAM,GAAG1B,EAAY,QAASqB,EAAiB,EACtFlC,EAACwC,EAAA,CAAY,QAAAlB,EAAwC,OAAAhB,CAAA,CAAgB,EACpEX,EAAgBC,EAAaC,EAASC,EAAiBC,GAAS,WAAW,EAC3E0C,EAAW,cAAc/B,CAAW,GACnCV,EAAC,MAAA,CAAI,UAAU,sBACZ,SAAAU,GAAa,IAAI,CAACgC,EAAQC,IAAU,CACnC,MAAMC,EAAoBF,EAAO,OAAS,UAAY9C,EAAY,OAAS,WAAa,CAACC,EAAU,GAInG,OACEgD,EAACC,EAAA,CACE,GAAGJ,EACJ,KAAK,KACL,IAAKC,EACL,SAPa/B,GAAmBgC,EAQhC,UAAWzC,EACT,2BACA,CACE,SAAU,EAAQP,CAAW,EAE/BG,GAAS,MAAA,CACX,CAAA,CAGN,CAAC,CAAA,CACH,EAGD,CAACY,GAAuBE,GAAcb,EAACuC,GAAM,GAAG1B,EAAY,QAASqB,CAAA,CAAiB,CAAA,CAAA,CACzF,EACF,EACF,CAEJ"}
+{"version":3,"file":"DynamicFormDialog.js","sources":["../../../../lib/widgets/dynamicFormDialog/DynamicFormDialog.tsx"],"sourcesContent":["import { useState } from 'react'\nimport type { Control, FieldValues, SubmitHandler } from 'react-hook-form'\nimport { type TypeOf } from 'zod'\nimport type { Approvement, ApprovementType } from './model'\nimport { type FieldValidation, getDynamicSchema } from '@/shared/utils'\nimport { useControlledForm } from '$/shared/hooks'\nimport { Button, type ButtonProps } from '$/shared/ui/button/Button'\nimport { Dialog } from '$/shared/ui/dialog/Dialog'\nimport { CheckboxBase, type CheckedState } from '$/shared/ui/formElements/uncontrolled/checkbox/Checkbox'\nimport { cn, TypeGuards } from '$/shared/utils'\nimport { ZodUtils } from '$/shared/validation'\nimport { Esia, type EsiaProps, HTMLRenderer } from '$/widgets'\nimport { type FieldElement, FieldMapper } from '$/widgets/fieldMapper'\nimport { QueryClientProvider } from '$/widgets/queryClientProvider'\n\ntype SubmitProps = {\n  submitCallback: <T extends FieldValues>(values: T) => void\n  onErrorCallback?: <T extends FieldValues>(error: T) => void\n}\n\ntype ApprovementClasses = {\n  checkbox?: React.ComponentProps<typeof CheckboxBase>['classes']\n  content?: string\n}\n\ntype DynamicFormDialogClasses = {\n  root?: string\n  title?: string\n  fields?: string\n  form?: string\n  approvement?: ApprovementClasses\n  submit?: string\n}\n\nexport type DynamicFormDialogProps<AType extends ApprovementType> = React.DialogHTMLAttributes<HTMLDialogElement> & {\n  fields: FieldElement<any, any, { validation: FieldValidation }>[]\n  title: string\n  approvement: Approvement<AType>\n  dialogId: string\n  submitProps?: SubmitProps\n  classes?: DynamicFormDialogClasses\n  buttonGroup: ButtonProps[]\n  ssoAuthorizationTop?: boolean\n  disabledButtons?: boolean\n  esiaConfig?: EsiaProps\n}\n\nconst withApprovement = <Type extends ApprovementType>(\n  approvement: Approvement<Type>,\n  checked: CheckedState,\n  onCheckedChange: (checked: CheckedState) => void,\n  classes?: ApprovementClasses\n) => {\n  if (approvement.type === 'off') return null\n\n  if (approvement.type === 'text') {\n    return <HTMLRenderer html={approvement.message} as='div' className={classes?.content} />\n  }\n\n  return (\n    <label\n      className={cn(\n        'mob-body-regular-s text-color-dark',\n        'desktop:desk-body-regular-m desktop:gap-x-4',\n        'flex items-center justify-items-start gap-x-3'\n      )}\n    >\n      <CheckboxBase classes={classes?.checkbox} checked={checked} onCheckedChange={onCheckedChange} />\n      <HTMLRenderer html={approvement.content} as='div' className={classes?.content} />\n    </label>\n  )\n}\n\nexport const DynamicFormDialog = <AType extends ApprovementType>({\n  fields,\n  title,\n  approvement,\n  submitProps,\n  dialogId,\n  classes,\n  buttonGroup,\n  ssoAuthorizationTop = false,\n  disabledButtons,\n  esiaConfig,\n  ...props\n}: DynamicFormDialogProps<AType>) => {\n  const { submitCallback, onErrorCallback } = submitProps ?? {}\n\n  const [checked, onCheckedChange] = useState<CheckedState>(false)\n\n  const schema = getDynamicSchema(fields)\n  const defaultValues = ZodUtils.getZodDefaults(schema)\n\n  const {\n    control,\n    handleSubmit,\n    watch,\n    trigger,\n    getValues,\n    formState: { errors }\n  } = useControlledForm({\n    schema,\n    defaultValues,\n    mode: 'onBlur'\n  })\n\n  const [fio, phone] = watch(['fio', 'phone'])\n  const isFioValid = Boolean(fio) && !errors.fio\n  const isPhoneValid = Boolean(phone) && !errors.phone\n  const disabledEsia = !isFioValid || !isPhoneValid || !checked\n\n  const handleClickEsia = async () => {\n    if (disabledEsia) {\n      // Триггерим валидацию для полей fio и phone\n      await trigger(['fio', 'phone'])\n      console.error('[Error] - Empty field fio or phone', { fio, phone })\n      return\n    }\n\n    if (esiaConfig?.onClick) {\n      esiaConfig.onClick({ ...getValues(), agree: checked })\n    }\n  }\n\n  const onSubmit: SubmitHandler<TypeOf<typeof schema>> = (values) => {\n    if (submitCallback) submitCallback({ ...values, agree: checked })\n  }\n\n  return (\n    <QueryClientProvider>\n      <Dialog id={dialogId} title={title} {...props}>\n        <form onSubmit={handleSubmit(onSubmit, (error) => onErrorCallback?.(error))} className='flex flex-col gap-6'>\n          {ssoAuthorizationTop && esiaConfig && esiaConfig.mode !== 'off' && <Esia {...esiaConfig} onClick={handleClickEsia} />}\n          <FieldMapper control={control as unknown as Control} fields={fields} />\n          {withApprovement(approvement, checked, onCheckedChange, classes?.approvement)}\n          {TypeGuards.isArrayFilled(buttonGroup) && (\n            <div className='flex flex-col gap-4'>\n              {buttonGroup?.map((button, index) => {\n                const isDisabledByLogic = button.type === 'submit' && approvement.type === 'checkbox' ? !checked : false\n\n                const disabled = disabledButtons || isDisabledByLogic\n\n                return (\n                  <Button\n                    {...button}\n                    size='lg'\n                    key={index}\n                    disabled={disabled}\n                    className={cn(\n                      'w-full whitespace-nowrap',\n                      {\n                        'w-full': Boolean(approvement)\n                      },\n                      classes?.submit\n                    )}\n                  />\n                )\n              })}\n            </div>\n          )}\n\n          {!ssoAuthorizationTop && esiaConfig && esiaConfig.mode !== 'off' && <Esia {...esiaConfig} onClick={handleClickEsia} />}\n        </form>\n      </Dialog>\n    </QueryClientProvider>\n  )\n}\n\nexport default DynamicFormDialog\n"],"names":["withApprovement","approvement","checked","onCheckedChange","classes","jsx","HTMLRenderer","jsxs","cn","CheckboxBase","DynamicFormDialog","fields","title","submitProps","dialogId","buttonGroup","ssoAuthorizationTop","disabledButtons","esiaConfig","props","submitCallback","onErrorCallback","useState","schema","getDynamicSchema","defaultValues","ZodUtils","control","handleSubmit","watch","trigger","getValues","errors","useControlledForm","fio","phone","isFioValid","isPhoneValid","disabledEsia","handleClickEsia","QueryClientProvider","Dialog","values","error","Esia","FieldMapper","TypeGuards","button","index","isDisabledByLogic","createElement","Button"],"mappings":"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"}

package/dist/lib/widgets/esia/Esia.js.map

@@ -1 +1 @@
-{"version":3,"file":"Esia.js","sources":["../../../../lib/widgets/esia/Esia.tsx"],"sourcesContent":["import type { ComponentProps } from 'react'\nimport type { FieldValues } from 'react-hook-form'\nimport { EsiaLogo, TextBlock, type TextBlockClasses, type TextBlockProps } from './ui'\nimport { useDevice } from '$/shared/hooks'\nimport { Badge, Icon, Loader, type LoaderProps } from '$/shared/ui'\nimport { cn } from '$/shared/utils'\n\ntype EsiaClasses = {\n  root?: string\n  wrapper?: string\n  innerWrapper?: string\n  textWrapper?: string\n  esiaLogo?: string\n  arrowIcon?: string\n  badge?: string\n  textBlock?: TextBlockClasses\n}\n\nexport interface EsiaProps extends Pick<TextBlockProps, 'titles' | 'description'>, ComponentProps<'button'> {\n  classes?: EsiaClasses\n  badge?: string\n  loaderProps?: LoaderProps\n  isLoading?: boolean\n  onClick: <T extends FieldValues>(values: T) => void\n}\n\nexport const Esia = ({ isLoading, disabled, classes, titles, description, badge, onClick, loaderProps, ...props }: EsiaProps) => {\n  const { isMobile } = useDevice()\n\n  return (\n    <button\n      disabled={disabled}\n      type='button'\n      className={cn(\n        'relative flex h-[90px] w-full items-center justify-center rounded-sm p-2 desktop:max-w-[524px]',\n        'bg-color-white outline outline-1 outline-warm-grey-200 transition-colors focus-visible:outline-primary-focus',\n        classes?.root,\n        { 'cursor-auto opacity-60': disabled }\n      )}\n      {...props}\n      onClick={onClick}\n    >\n      <div\n        className={cn(\n          'flex h-[74px] flex-1 rounded-sm px-2 py-3 transition-colors desktop:px-4 desktop:py-3',\n          'bg-color-blue-grey-100 hover:bg-color-blue-grey-200 active:bg-color-blue-grey-300',\n          { 'items-center': isLoading },\n          classes?.wrapper\n        )}\n      >\n        {isLoading ? (\n          <Loader position='static' classes={{ wrapper: 'size-8 m-auto' }} {...loaderProps} />\n        ) : (\n          <div\n            className={cn(\n              'flex flex-1 items-center justify-between gap-1',\n              { 'mobile: justify-center': !badge && isMobile },\n              classes?.innerWrapper\n            )}\n          >\n            <div className={cn('flex items-center gap-1 desktop:gap-4', classes?.textWrapper)}>\n              <EsiaLogo className={cn('size-7 desktop:size-8', classes?.esiaLogo)} />\n              <TextBlock titles={titles} description={description} isMobile={isMobile} classes={classes?.textBlock} />\n              <Icon name='arrows/arrowRight' className={cn('size-6 mobile:hidden', classes?.arrowIcon)} />\n            </div>\n            {badge && <Badge className={cn('bg-color-positive', classes?.badge)}>{badge}</Badge>}\n          </div>\n        )}\n      </div>\n    </button>\n  )\n}\n"],"names":["Esia","isLoading","disabled","classes","titles","description","badge","onClick","loaderProps","props","isMobile","useDevice","jsx","cn","Loader","jsxs","EsiaLogo","TextBlock","Icon","Badge"],"mappings":"2ZA0BO,MAAMA,EAAO,CAAC,CAAE,UAAAC,EAAW,SAAAC,EAAU,QAAAC,EAAS,OAAAC,EAAQ,YAAAC,EAAa,MAAAC,EAAO,QAAAC,EAAS,YAAAC,EAAa,GAAGC,KAAuB,CAC/H,KAAM,CAAE,SAAAC,CAAA,EAAaC,EAAA,EAErB,OACEC,EAAC,SAAA,CACC,SAAAV,EACA,KAAK,SACL,UAAWW,EACT,iGACA,+GACAV,GAAS,KACT,CAAE,yBAA0BD,CAAA,CAAS,EAEtC,GAAGO,EACJ,QAAAF,EAEA,SAAAK,EAAC,MAAA,CACC,UAAWC,EACT,wFACA,oFACA,CAAE,eAAgBZ,CAAA,EAClBE,GAAS,OAAA,EAGV,SAAAF,EACCW,EAACE,EAAA,CAAO,SAAS,SAAS,QAAS,CAAE,QAAS,eAAA,EAAoB,GAAGN,CAAA,CAAa,EAElFO,EAAC,MAAA,CACC,UAAWF,EACT,iDACA,CAAE,yBAA0B,CAACP,GAASI,CAAA,EACtCP,GAAS,YAAA,EAGX,SAAA,CAAAY,EAAC,OAAI,UAAWF,EAAG,wCAAyCV,GAAS,WAAW,EAC9E,SAAA,CAAAS,EAACI,GAAS,UAAWH,EAAG,wBAAyBV,GAAS,QAAQ,EAAG,IACpEc,EAAA,CAAU,OAAAb,EAAgB,YAAAC,EAA0B,SAAAK,EAAoB,QAASP,GAAS,UAAW,EACtGS,EAACM,GAAK,KAAK,oBAAoB,UAAWL,EAAG,uBAAwBV,GAAS,SAAS,CAAA,CAAG,CAAA,EAC5F,EACCG,KAAUa,EAAA,CAAM,UAAWN,EAAG,oBAAqBV,GAAS,KAAK,EAAI,SAAAG,CAAA,CAAM,CAAA,CAAA,CAAA,CAC9E,CAAA,CAEJ,CAAA,CAGN"}
+{"version":3,"file":"Esia.js","sources":["../../../../lib/widgets/esia/Esia.tsx"],"sourcesContent":["import type { ComponentProps } from 'react'\nimport type { FieldValues } from 'react-hook-form'\nimport { EsiaLogo, TextBlock, type TextBlockClasses, type TextBlockProps } from './ui'\nimport { useDevice } from '$/shared/hooks'\nimport { Badge, Icon, Loader, type LoaderProps } from '$/shared/ui'\nimport { cn } from '$/shared/utils'\n\ntype EsiaClasses = {\n  root?: string\n  wrapper?: string\n  innerWrapper?: string\n  textWrapper?: string\n  esiaLogo?: string\n  arrowIcon?: string\n  badge?: string\n  textBlock?: TextBlockClasses\n}\n\nexport interface EsiaProps extends Pick<TextBlockProps, 'titles' | 'description'>, ComponentProps<'button'> {\n  classes?: EsiaClasses\n  badge?: string\n  loaderProps?: LoaderProps\n  isLoading?: boolean\n  onClick: <T extends FieldValues>(values: T) => void\n  mode: 'off' | 'esia'\n}\n\nexport const Esia = ({ isLoading, disabled, classes, titles, description, badge, onClick, loaderProps, ...props }: EsiaProps) => {\n  const { isMobile } = useDevice()\n\n  return (\n    <button\n      disabled={disabled}\n      type='button'\n      className={cn(\n        'relative flex h-[90px] w-full items-center justify-center rounded-sm p-2 desktop:max-w-[524px]',\n        'bg-color-white outline outline-1 outline-warm-grey-200 transition-colors focus-visible:outline-primary-focus',\n        classes?.root,\n        { 'cursor-auto opacity-60': disabled }\n      )}\n      {...props}\n      onClick={onClick}\n    >\n      <div\n        className={cn(\n          'flex h-[74px] flex-1 rounded-sm px-2 py-3 transition-colors desktop:px-4 desktop:py-3',\n          'bg-color-blue-grey-100 hover:bg-color-blue-grey-200 active:bg-color-blue-grey-300',\n          { 'items-center': isLoading },\n          classes?.wrapper\n        )}\n      >\n        {isLoading ? (\n          <Loader position='static' classes={{ wrapper: 'size-8 m-auto' }} {...loaderProps} />\n        ) : (\n          <div\n            className={cn(\n              'flex flex-1 items-center justify-between gap-1',\n              { 'mobile: justify-center': !badge && isMobile },\n              classes?.innerWrapper\n            )}\n          >\n            <div className={cn('flex items-center gap-1 desktop:gap-4', classes?.textWrapper)}>\n              <EsiaLogo className={cn('size-7 desktop:size-8', classes?.esiaLogo)} />\n              <TextBlock titles={titles} description={description} isMobile={isMobile} classes={classes?.textBlock} />\n              <Icon name='arrows/arrowRight' className={cn('size-6 mobile:hidden', classes?.arrowIcon)} />\n            </div>\n            {badge && <Badge className={cn('bg-color-positive', classes?.badge)}>{badge}</Badge>}\n          </div>\n        )}\n      </div>\n    </button>\n  )\n}\n"],"names":["Esia","isLoading","disabled","classes","titles","description","badge","onClick","loaderProps","props","isMobile","useDevice","jsx","cn","Loader","jsxs","EsiaLogo","TextBlock","Icon","Badge"],"mappings":"2ZA2BO,MAAMA,EAAO,CAAC,CAAE,UAAAC,EAAW,SAAAC,EAAU,QAAAC,EAAS,OAAAC,EAAQ,YAAAC,EAAa,MAAAC,EAAO,QAAAC,EAAS,YAAAC,EAAa,GAAGC,KAAuB,CAC/H,KAAM,CAAE,SAAAC,CAAA,EAAaC,EAAA,EAErB,OACEC,EAAC,SAAA,CACC,SAAAV,EACA,KAAK,SACL,UAAWW,EACT,iGACA,+GACAV,GAAS,KACT,CAAE,yBAA0BD,CAAA,CAAS,EAEtC,GAAGO,EACJ,QAAAF,EAEA,SAAAK,EAAC,MAAA,CACC,UAAWC,EACT,wFACA,oFACA,CAAE,eAAgBZ,CAAA,EAClBE,GAAS,OAAA,EAGV,SAAAF,EACCW,EAACE,EAAA,CAAO,SAAS,SAAS,QAAS,CAAE,QAAS,eAAA,EAAoB,GAAGN,CAAA,CAAa,EAElFO,EAAC,MAAA,CACC,UAAWF,EACT,iDACA,CAAE,yBAA0B,CAACP,GAASI,CAAA,EACtCP,GAAS,YAAA,EAGX,SAAA,CAAAY,EAAC,OAAI,UAAWF,EAAG,wCAAyCV,GAAS,WAAW,EAC9E,SAAA,CAAAS,EAACI,GAAS,UAAWH,EAAG,wBAAyBV,GAAS,QAAQ,EAAG,IACpEc,EAAA,CAAU,OAAAb,EAAgB,YAAAC,EAA0B,SAAAK,EAAoB,QAASP,GAAS,UAAW,EACtGS,EAACM,GAAK,KAAK,oBAAoB,UAAWL,EAAG,uBAAwBV,GAAS,SAAS,CAAA,CAAG,CAAA,EAC5F,EACCG,KAAUa,EAAA,CAAM,UAAWN,EAAG,oBAAqBV,GAAS,KAAK,EAAI,SAAAG,CAAA,CAAM,CAAA,CAAA,CAAA,CAC9E,CAAA,CAEJ,CAAA,CAGN"}