@ahrowe/ui 0.31.0 → 0.32.0

package/dist/esm/common/datePicker/components/datePickerMonth/datePickerMonth.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"datePickerMonth.mjs","names":[],"sources":["../../../../../../package/common/datePicker/components/datePickerMonth/datePickerMonth.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\nimport cx from 'classnames';\n\nimport styles from './datePickerMonth.module.pcss';\nimport { getLocale } from 'services/localization';\nimport InteractableDiv from 'components/common/interactableDiv';\nimport {\n  addDays,\n  getDateFromDayMonthAndYear,\n  getDayMonthAndYearOfDate,\n  getDaysInMonth,\n  getStartWeekDayOfMonth,\n  getWeekDays,\n} from '../../dateFunctions';\n\ninterface DatePickerMonthProps {\n  className?: string;\n  month?: number;\n  year?: number;\n  onSelect?: (date: Date) => void;\n  selectionStart?: Date;\n  selectionEnd?: Date;\n  minDate?: Date | null;\n  maxDate?: Date | null;\n  /** Called to shift the displayed month by ±1 when arrow navigation runs past its edge. */\n  onNavigateMonth?: (delta: 1 | -1) => void;\n}\n\n// Which day gets the sole tab stop when this month first renders (or when the displayed\n// month changes via the header, not via arrow navigation): the selected day if it falls in\n// this month, else today if it falls in this month, else the 1st.\nfunction getDefaultFocusedDay(month: number, year: number, selectionStart: Date | undefined): number {\n  if (selectionStart) {\n    const sel = getDayMonthAndYearOfDate(selectionStart);\n    if (sel.month === month && sel.year === year) return sel.day;\n  }\n  const today = getDayMonthAndYearOfDate(new Date());\n  if (today.month === month && today.year === year) return today.day;\n  return 1;\n}\n\nfunction checkSelected(\n  day: number,\n  month: number,\n  year: number,\n  selectionStart: Date | undefined,\n  selectionEnd: Date | undefined,\n) {\n  const {\n    day: startDay,\n    month: startMonth,\n    year: startYear,\n  } = selectionStart ? getDayMonthAndYearOfDate(selectionStart) : { day: undefined, month: undefined, year: undefined };\n  const {\n    day: endDay,\n    month: endMonth,\n    year: endYear,\n  } = selectionEnd ? getDayMonthAndYearOfDate(selectionEnd) : { day: undefined, month: undefined, year: undefined };\n\n  const toCheckNoTime = getDateFromDayMonthAndYear(day, month, year);\n\n  const isStartDate = day === startDay && month === startMonth && year === startYear;\n  const isEndDate = day === endDay && month === endMonth && year === endYear;\n\n  let isInRange = false;\n  if (\n    startDay !== undefined &&\n    startMonth !== undefined &&\n    startYear !== undefined &&\n    endDay !== undefined &&\n    endMonth !== undefined &&\n    endYear !== undefined\n  ) {\n    const selectionStartNoTime = getDateFromDayMonthAndYear(startDay, startMonth, startYear);\n    const selectionEndNoTime = getDateFromDayMonthAndYear(endDay, endMonth, endYear);\n    isInRange =\n      toCheckNoTime.getTime() >= selectionStartNoTime.getTime() &&\n      toCheckNoTime.getTime() <= selectionEndNoTime.getTime();\n  }\n\n  return { isStartDate, isInRange, isEndDate };\n}\n\nfunction checkDisabled(\n  day: number,\n  month: number,\n  year: number,\n  minDate: Date | null | undefined,\n  maxDate: Date | null | undefined,\n): boolean {\n  const toCheckNoTime = getDateFromDayMonthAndYear(day, month, year);\n\n  if (minDate) {\n    const { day: minDay, month: minMonth, year: minYear } = getDayMonthAndYearOfDate(minDate);\n    if (toCheckNoTime < getDateFromDayMonthAndYear(minDay, minMonth, minYear)) return true;\n  }\n\n  if (maxDate) {\n    const { day: maxDay, month: maxMonth, year: maxYear } = getDayMonthAndYearOfDate(maxDate);\n    if (toCheckNoTime > getDateFromDayMonthAndYear(maxDay, maxMonth, maxYear)) return true;\n  }\n\n  return false;\n}\n\nfunction checkIsToday(day: number, month: number, year: number): boolean {\n  const { day: currDay, month: currMonth, year: currYear } = getDayMonthAndYearOfDate(new Date());\n  return day === currDay && month === currMonth && year === currYear;\n}\n\nexport default function DatePickerMonth({\n  className = '',\n  month = new Date().getMonth() + 1,\n  year = new Date().getFullYear(),\n  onSelect = () => null,\n  selectionStart,\n  selectionEnd,\n  minDate = null,\n  maxDate = null,\n  onNavigateMonth,\n}: DatePickerMonthProps) {\n  const locale = getLocale('-');\n  const daysInMonth = getDaysInMonth(month, year);\n  const startWeekDayOfMonth = getStartWeekDayOfMonth(month, year);\n\n  const dayRefs = useRef<Record<number, HTMLDivElement | null>>({});\n  const [focusedDay, setFocusedDay] = useState(() => getDefaultFocusedDay(month, year, selectionStart));\n\n  // A day arrowed onto in an adjacent month, waiting for that month's grid to render so it\n  // can be focused. `onNavigateMonth` only shifts `month`/`year` — the actual DOM focus has\n  // to happen after this component re-renders with the new days, hence the effect below.\n  const pendingFocusDayRef = useRef<number | null>(null);\n\n  useEffect(() => {\n    if (pendingFocusDayRef.current != null) {\n      const day = pendingFocusDayRef.current;\n      pendingFocusDayRef.current = null;\n      setFocusedDay(day);\n      dayRefs.current[day]?.focus();\n    } else {\n      // The displayed month changed some other way (header chevrons, month/year dropdowns) —\n      // re-pick a sensible tab stop, but don't steal focus from whatever the user just used.\n      setFocusedDay(getDefaultFocusedDay(month, year, selectionStart));\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [month, year]);\n\n  function handleDayKeyDown(event: React.KeyboardEvent<HTMLDivElement>, day: number) {\n    let delta = 0;\n    if (event.key === 'ArrowRight') delta = 1;\n    else if (event.key === 'ArrowLeft') delta = -1;\n    else if (event.key === 'ArrowDown') delta = 7;\n    else if (event.key === 'ArrowUp') delta = -7;\n    else return;\n\n    event.preventDefault();\n    const next = addDays(day, month, year, delta);\n\n    if (next.month !== month || next.year !== year) {\n      pendingFocusDayRef.current = next.day;\n      onNavigateMonth?.(next.month > month || next.year > year ? 1 : -1);\n    } else {\n      setFocusedDay(next.day);\n      dayRefs.current[next.day]?.focus();\n    }\n  }\n\n  return (\n    <div className={cx(styles.datePickerMonth, className)}>\n      <div className={cx(styles.datePickerMonthContent)}>\n        {getWeekDays(locale).map((weekDay, index) => (\n          <div key={index}>{weekDay}</div>\n        ))}\n        {Array.from(Array(startWeekDayOfMonth - 1).keys()).map((index) => (\n          <div key={index} className={cx(styles.datePickerMonthItem, styles.datePickerMonthPlaceholder)} />\n        ))}\n        {Array.from(Array(daysInMonth).keys()).map((index) => {\n          const day = index + 1;\n          const selectedRes = checkSelected(day, month, year, selectionStart, selectionEnd);\n          const isDisabled = checkDisabled(day, month, year, minDate, maxDate);\n          const isToday = checkIsToday(day, month, year);\n\n          return (\n            <InteractableDiv\n              key={day}\n              ref={(el) => {\n                dayRefs.current[day] = el;\n              }}\n              tabIndex={day === focusedDay ? 0 : -1}\n              onKeyDown={(event) => handleDayKeyDown(event, day)}\n              onClick={() => (isDisabled ? null : onSelect(getDateFromDayMonthAndYear(day, month, year)))}\n              className={cx(styles.datePickerMonthDay, styles.datePickerMonthItem, {\n                [styles.datePickerMonthDaySelected]: selectedRes.isInRange,\n                [styles.datePickerMonthDaySelectedStart]: selectedRes.isStartDate,\n                [styles.datePickerMonthDaySelectedEnd]: selectedRes.isEndDate,\n                [styles.datePickerMonthDayDisabled]: isDisabled,\n                [styles.datePickerMonthDayToday]: isToday,\n              })}\n            >\n              {day}\n            </InteractableDiv>\n          );\n        })}\n        {Array.from(Array(42 - (startWeekDayOfMonth + daysInMonth - 1)).keys()).map((index) => (\n          <div key={index} className={cx(styles.datePickerMonthItem, styles.datePickerMonthPlaceholder)}>\n            &nbsp;\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"datePickerMonth.mjs","names":[],"sources":["../../../../../../package/common/datePicker/components/datePickerMonth/datePickerMonth.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\nimport cx from 'classnames';\n\nimport styles from './datePickerMonth.module.pcss';\nimport { getLocale } from 'services/localization';\nimport InteractableDiv from 'components/common/interactableDiv';\nimport {\n  addDays,\n  getDateFromDayMonthAndYear,\n  getDayMonthAndYearOfDate,\n  getDaysInMonth,\n  getStartWeekDayOfMonth,\n  getWeekDays,\n} from '../../dateFunctions';\nimport type { DatePickerMonthProps } from './datePickerMonth.types';\n\n// Which day gets the sole tab stop when this month first renders (or when the displayed\n// month changes via the header, not via arrow navigation): the selected day if it falls in\n// this month, else today if it falls in this month, else the 1st.\nfunction getDefaultFocusedDay(month: number, year: number, selectionStart: Date | undefined): number {\n  if (selectionStart) {\n    const sel = getDayMonthAndYearOfDate(selectionStart);\n    if (sel.month === month && sel.year === year) return sel.day;\n  }\n  const today = getDayMonthAndYearOfDate(new Date());\n  if (today.month === month && today.year === year) return today.day;\n  return 1;\n}\n\nfunction checkSelected(\n  day: number,\n  month: number,\n  year: number,\n  selectionStart: Date | undefined,\n  selectionEnd: Date | undefined,\n) {\n  const {\n    day: startDay,\n    month: startMonth,\n    year: startYear,\n  } = selectionStart ? getDayMonthAndYearOfDate(selectionStart) : { day: undefined, month: undefined, year: undefined };\n  const {\n    day: endDay,\n    month: endMonth,\n    year: endYear,\n  } = selectionEnd ? getDayMonthAndYearOfDate(selectionEnd) : { day: undefined, month: undefined, year: undefined };\n\n  const toCheckNoTime = getDateFromDayMonthAndYear(day, month, year);\n\n  const isStartDate = day === startDay && month === startMonth && year === startYear;\n  const isEndDate = day === endDay && month === endMonth && year === endYear;\n\n  let isInRange = false;\n  if (\n    startDay !== undefined &&\n    startMonth !== undefined &&\n    startYear !== undefined &&\n    endDay !== undefined &&\n    endMonth !== undefined &&\n    endYear !== undefined\n  ) {\n    const selectionStartNoTime = getDateFromDayMonthAndYear(startDay, startMonth, startYear);\n    const selectionEndNoTime = getDateFromDayMonthAndYear(endDay, endMonth, endYear);\n    isInRange =\n      toCheckNoTime.getTime() >= selectionStartNoTime.getTime() &&\n      toCheckNoTime.getTime() <= selectionEndNoTime.getTime();\n  }\n\n  return { isStartDate, isInRange, isEndDate };\n}\n\nfunction checkDisabled(\n  day: number,\n  month: number,\n  year: number,\n  minDate: Date | null | undefined,\n  maxDate: Date | null | undefined,\n): boolean {\n  const toCheckNoTime = getDateFromDayMonthAndYear(day, month, year);\n\n  if (minDate) {\n    const { day: minDay, month: minMonth, year: minYear } = getDayMonthAndYearOfDate(minDate);\n    if (toCheckNoTime < getDateFromDayMonthAndYear(minDay, minMonth, minYear)) return true;\n  }\n\n  if (maxDate) {\n    const { day: maxDay, month: maxMonth, year: maxYear } = getDayMonthAndYearOfDate(maxDate);\n    if (toCheckNoTime > getDateFromDayMonthAndYear(maxDay, maxMonth, maxYear)) return true;\n  }\n\n  return false;\n}\n\nfunction checkIsToday(day: number, month: number, year: number): boolean {\n  const { day: currDay, month: currMonth, year: currYear } = getDayMonthAndYearOfDate(new Date());\n  return day === currDay && month === currMonth && year === currYear;\n}\n\nexport default function DatePickerMonth({\n  className = '',\n  month = new Date().getMonth() + 1,\n  year = new Date().getFullYear(),\n  onSelect = () => null,\n  selectionStart,\n  selectionEnd,\n  minDate = null,\n  maxDate = null,\n  onNavigateMonth,\n}: DatePickerMonthProps) {\n  const locale = getLocale('-');\n  const daysInMonth = getDaysInMonth(month, year);\n  const startWeekDayOfMonth = getStartWeekDayOfMonth(month, year);\n\n  const dayRefs = useRef<Record<number, HTMLDivElement | null>>({});\n  const [focusedDay, setFocusedDay] = useState(() => getDefaultFocusedDay(month, year, selectionStart));\n\n  // A day arrowed onto in an adjacent month, waiting for that month's grid to render so it\n  // can be focused. `onNavigateMonth` only shifts `month`/`year` — the actual DOM focus has\n  // to happen after this component re-renders with the new days, hence the effect below.\n  const pendingFocusDayRef = useRef<number | null>(null);\n\n  useEffect(() => {\n    if (pendingFocusDayRef.current != null) {\n      const day = pendingFocusDayRef.current;\n      pendingFocusDayRef.current = null;\n      setFocusedDay(day);\n      dayRefs.current[day]?.focus();\n    } else {\n      // The displayed month changed some other way (header chevrons, month/year dropdowns) —\n      // re-pick a sensible tab stop, but don't steal focus from whatever the user just used.\n      setFocusedDay(getDefaultFocusedDay(month, year, selectionStart));\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [month, year]);\n\n  function handleDayKeyDown(event: React.KeyboardEvent<HTMLDivElement>, day: number) {\n    let delta = 0;\n    if (event.key === 'ArrowRight') delta = 1;\n    else if (event.key === 'ArrowLeft') delta = -1;\n    else if (event.key === 'ArrowDown') delta = 7;\n    else if (event.key === 'ArrowUp') delta = -7;\n    else return;\n\n    event.preventDefault();\n    const next = addDays(day, month, year, delta);\n\n    if (next.month !== month || next.year !== year) {\n      pendingFocusDayRef.current = next.day;\n      onNavigateMonth?.(next.month > month || next.year > year ? 1 : -1);\n    } else {\n      setFocusedDay(next.day);\n      dayRefs.current[next.day]?.focus();\n    }\n  }\n\n  return (\n    <div className={cx(styles.datePickerMonth, className)}>\n      <div className={cx(styles.datePickerMonthContent)}>\n        {getWeekDays(locale).map((weekDay, index) => (\n          <div key={index}>{weekDay}</div>\n        ))}\n        {Array.from(Array(startWeekDayOfMonth - 1).keys()).map((index) => (\n          <div key={index} className={cx(styles.datePickerMonthItem, styles.datePickerMonthPlaceholder)} />\n        ))}\n        {Array.from(Array(daysInMonth).keys()).map((index) => {\n          const day = index + 1;\n          const selectedRes = checkSelected(day, month, year, selectionStart, selectionEnd);\n          const isDisabled = checkDisabled(day, month, year, minDate, maxDate);\n          const isToday = checkIsToday(day, month, year);\n\n          return (\n            <InteractableDiv\n              key={day}\n              ref={(el) => {\n                dayRefs.current[day] = el;\n              }}\n              tabIndex={day === focusedDay ? 0 : -1}\n              onKeyDown={(event) => handleDayKeyDown(event, day)}\n              onClick={() => (isDisabled ? null : onSelect(getDateFromDayMonthAndYear(day, month, year)))}\n              className={cx(styles.datePickerMonthDay, styles.datePickerMonthItem, {\n                [styles.datePickerMonthDaySelected]: selectedRes.isInRange,\n                [styles.datePickerMonthDaySelectedStart]: selectedRes.isStartDate,\n                [styles.datePickerMonthDaySelectedEnd]: selectedRes.isEndDate,\n                [styles.datePickerMonthDayDisabled]: isDisabled,\n                [styles.datePickerMonthDayToday]: isToday,\n              })}\n            >\n              {day}\n            </InteractableDiv>\n          );\n        })}\n        {Array.from(Array(42 - (startWeekDayOfMonth + daysInMonth - 1)).keys()).map((index) => (\n          <div key={index} className={cx(styles.datePickerMonthItem, styles.datePickerMonthPlaceholder)}>\n            &nbsp;\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/esm/common/datePicker/datePicker.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"datePicker.mjs","names":[],"sources":["../../../../package/common/datePicker/datePicker.tsx"],"sourcesContent":["import React, { useState, useEffect, useRef } from 'react';\nimport cx from 'classnames';\nimport Input from '../input';\nimport { useComponentDefaults } from '../configProvider';\nimport DatePickerMonth from './components/datePickerMonth';\nimport { faChevronLeft, faChevronRight } from '@fortawesome/free-solid-svg-icons';\nimport { getLocale } from 'services/localization';\nimport ActionIcon from '../actionIcon';\nimport Modal from '../modal';\nimport FloatingMenu from '../floatingMenu';\nimport Dropdown from '../dropdown';\nimport { Align } from '../floatingMenu/floatingMenu.types';\nimport InputMask, { InputState, BeforeMaskedStateChangeStates } from '@mona-health/react-input-mask';\nimport {\n  getDateFromDayMonthAndYear,\n  getMonthName,\n  getMonthNames,\n  getDateString,\n  correctDateMaskValue,\n} from './dateFunctions';\nimport Button from '../button';\nimport Tooltip from '../tooltip';\nimport type { FormValidator } from 'services/formValidation';\n\nimport styles from './datePicker.module.pcss';\n\nexport interface DatePickerProps {\n  className?: string;\n  selected?: Date;\n  onSelect?: (date: Date | null) => void;\n  formValidator?: FormValidator | null;\n  noInput?: boolean;\n  noHeader?: boolean;\n  isModal?: boolean;\n  isInline?: boolean;\n  onChange?: (date: Date | null) => void;\n  minDate?: Date | null;\n  maxDate?: Date | null;\n  children?: React.ReactNode;\n  showClearButton?: boolean;\n  label?: string;\n  isValid?: boolean;\n  errorMessage?: string;\n  isRequired?: boolean;\n  startDate?: Date;\n  endDate?: Date;\n}\n\nexport default function DatePicker(props: DatePickerProps) {\n  const {\n    className = '',\n    selected,\n    onSelect = () => null,\n    formValidator = null,\n    noInput = false,\n    noHeader = false,\n    isModal = false,\n    isInline = false,\n    onChange = () => null,\n    minDate = null,\n    maxDate = null,\n    children = null,\n    showClearButton = false,\n    label = '',\n    isValid = true,\n    errorMessage = '',\n    isRequired = false,\n    startDate,\n    endDate,\n  } = useComponentDefaults('DatePicker', props);\n  const getCurrValue = (): Date | undefined => (formValidator ? (formValidator.value as Date) : selected);\n\n  const initialDate = getCurrValue() ?? new Date();\n\n  const [currentMonth, setCurrentMonth] = useState(initialDate.getMonth() + 1);\n  const [currentYear, setCurrentYear] = useState(initialDate.getFullYear());\n  const [isPickerOpen, setIsPickerOpen] = useState(false);\n  const [currentDateString, setCurrentDateString] = useState(() => (getCurrValue() ? getDateString(initialDate) : ''));\n  const [isFocused, setIsFocused] = useState(false);\n  const [isHovered, setIsHovered] = useState(false);\n  const [, forceUpdate] = useState(0);\n  const [prevSelected, setPrevSelected] = useState(selected);\n\n  const fvRef = useRef(formValidator);\n\n  // Sync navigation view when `selected` prop changes externally\n  if (prevSelected !== selected) {\n    setPrevSelected(selected);\n    const d = selected ?? new Date();\n    setCurrentMonth(d.getMonth() + 1);\n    setCurrentYear(d.getFullYear());\n    setCurrentDateString(selected ? getDateString(selected) : '');\n  }\n\n  // Subscribe to formValidator updates (external system → setState in callback)\n  useEffect(() => {\n    fvRef.current = formValidator;\n    if (!formValidator) return;\n    const listener = () => {\n      const val = formValidator.value as Date | undefined;\n      if (val) {\n        setCurrentMonth(val.getMonth() + 1);\n        setCurrentYear(val.getFullYear());\n        setCurrentDateString(getDateString(val));\n      } else {\n        setCurrentDateString('');\n      }\n      forceUpdate((n: number) => n + 1);\n    };\n    formValidator.registerOnUpdateListener(listener);\n    return () => formValidator.removeOnUpdateListener(listener);\n  }, [formValidator]);\n\n  const hasError = (): boolean => {\n    return formValidator ? formValidator.touched && formValidator.hasError() : !isValid || !!errorMessage;\n  };\n\n  const computedIsRequired = (): boolean => {\n    return !!(\n      isRequired || formValidator?.validators.find((v) => (v as { validatorId?: string }).validatorId === 'required')\n    );\n  };\n\n  const handleChange = (date: Date | null) => {\n    setCurrentDateString(date ? getDateString(date) : '');\n    if (formValidator) formValidator.set(date);\n    onChange(date);\n  };\n\n  const handleSelect = (date: Date | null) => {\n    handleChange(date);\n    onSelect(date);\n    setIsPickerOpen(false);\n  };\n\n  const changeMonth = (delta: number) => {\n    setCurrentMonth((prev) => {\n      let next = prev + delta;\n      if (next < 1) {\n        next = 12;\n        setCurrentYear((y) => y - 1);\n      } else if (next > 12) {\n        next = 1;\n        setCurrentYear((y) => y + 1);\n      }\n      return next;\n    });\n  };\n\n  const tryParseDateString = (dateString: string): Date | null => {\n    if (dateString.match(/\\d{2}\\.\\d{2}\\.\\d{4}/gi)) {\n      const [day, month, year] = dateString.split('.');\n      const parsedDate = getDateFromDayMonthAndYear(Number(day), Number(month), Number(year));\n      if (parsedDate && parsedDate.toString() !== 'Invalid Date') {\n        const isSmallerThanMaxDate = !maxDate || parsedDate <= maxDate;\n        const isBiggerThanMinDate = !minDate || parsedDate >= minDate;\n        if (isSmallerThanMaxDate && isBiggerThanMinDate) return parsedDate;\n      }\n    }\n    return null;\n  };\n\n  const beforeMaskedStateChange = ({ previousState, nextState }: BeforeMaskedStateChangeStates): InputState => {\n    // previousState is only supplied on user-driven change events; on mount/focus/blur\n    // there is nothing to auto-correct, so the next state passes through unchanged.\n    if (!previousState || nextState.value === previousState.value) return nextState;\n\n    const corrected = correctDateMaskValue(nextState.value, previousState.value, nextState.selection ?? null);\n\n    const parsedDate = tryParseDateString(corrected.value);\n    if (parsedDate) handleChange(parsedDate);\n\n    return corrected;\n  };\n\n  const getYearDropdownOptions = () => {\n    let length = 400;\n    let zeroOffset = new Date().getFullYear() - 200;\n    if (minDate) zeroOffset = minDate.getFullYear();\n    if (maxDate) length = maxDate.getFullYear() - zeroOffset + 1;\n    return Array.from(Array(length).keys()).map((i) => ({ key: i + zeroOffset, label: i + zeroOffset }));\n  };\n\n  const currValue = getCurrValue();\n  const hasErr = hasError();\n\n  const header = noHeader ? null : (\n    <div className={styles.datePickerHeader}>\n      <ActionIcon icon={faChevronLeft} onClick={() => changeMonth(-1)} />\n      <div className={styles.datePickerHeaderMonthAndYearContainer}>\n        <div className={styles.datePickerHeaderMonthAndYear}>\n          <Dropdown\n            plainStyle\n            scrollToSelected\n            onChange={(v) => setCurrentMonth(v as number)}\n            className={styles.datePickerHeaderMonth}\n            value={getMonthName(getLocale('-'), currentYear, currentMonth, 1)}\n            items={getMonthNames().map((month, index) => ({ key: index + 1, label: month }))}\n          />\n          <Dropdown\n            plainStyle\n            scrollToSelected\n            useMatLabelStyle={false}\n            className={styles.datePickerHeaderYear}\n            onChange={(v) => setCurrentYear(v as number)}\n            value={currentYear}\n            items={getYearDropdownOptions()}\n          />\n        </div>\n      </div>\n      <ActionIcon icon={faChevronRight} onClick={() => changeMonth(1)} />\n    </div>\n  );\n\n  const pickerContent = (\n    <>\n      {header}\n      <DatePickerMonth\n        className={styles.datePickerMonth}\n        month={currentMonth}\n        year={currentYear}\n        onSelect={handleSelect}\n        selectionStart={startDate ?? currValue}\n        selectionEnd={endDate ?? currValue}\n        minDate={minDate}\n        maxDate={maxDate}\n        onNavigateMonth={changeMonth}\n      />\n      {showClearButton && <Button onClick={() => handleSelect(null)}>Clear</Button>}\n      {children}\n    </>\n  );\n\n  const input = noInput ? null : (\n    <Input\n      autoComplete='off'\n      readOnly={isModal}\n      classNames={isModal ? { input: styles.datePickerModalInput } : undefined}\n      label={`${label}${computedIsRequired() ? ' *' : ''}`}\n      value={currentDateString}\n      onChange={(v) => setCurrentDateString(v as string)}\n      onClick={() => setIsPickerOpen(true)}\n      customInput={\n        <InputMask mask='99.99.9999' maskPlaceholder='_' beforeMaskedStateChange={beforeMaskedStateChange} />\n      }\n      onBlur={() => {\n        if (fvRef.current) fvRef.current.touched = true;\n        setIsFocused(false);\n        handleChange(tryParseDateString(currentDateString));\n      }}\n      onFocus={() => setIsFocused(true)}\n      onMouseEnter={() => setIsHovered(true)}\n      onMouseLeave={() => setIsHovered(false)}\n      isValid={!hasErr}\n    />\n  );\n\n  const picker = (() => {\n    if (isInline) return pickerContent;\n    if (isModal) {\n      return (\n        <Modal hideHeader isOpen={isPickerOpen} onClose={() => setIsPickerOpen(false)}>\n          {pickerContent}\n        </Modal>\n      );\n    }\n    return (\n      <FloatingMenu\n        isOpen={isPickerOpen}\n        onOpenChange={(open: boolean) => setIsPickerOpen(open)}\n        content={pickerContent}\n        align={Align.Left}\n        dontCloseOnChildClick\n      >\n        {input}\n      </FloatingMenu>\n    );\n  })();\n\n  return (\n    <div className={cx(styles.datePicker, className)}>\n      {(isModal || isInline) && input}\n      {picker}\n      <Tooltip\n        variant='error'\n        message={formValidator ? formValidator.getCurrentErrorMessage() : errorMessage || ''}\n        isVisible={hasErr && (isFocused || isHovered)}\n      />\n    </div>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"datePicker.mjs","names":[],"sources":["../../../../package/common/datePicker/datePicker.tsx"],"sourcesContent":["import React, { useState, useEffect, useRef } from 'react';\nimport cx from 'classnames';\nimport Input from '../input';\nimport { useComponentDefaults } from '../configProvider';\nimport DatePickerMonth from './components/datePickerMonth';\nimport { faChevronLeft, faChevronRight } from '@fortawesome/free-solid-svg-icons';\nimport { getLocale } from 'services/localization';\nimport ActionIcon from '../actionIcon';\nimport Modal from '../modal';\nimport FloatingMenu from '../floatingMenu';\nimport Dropdown from '../dropdown';\nimport { Align } from '../floatingMenu/floatingMenu.types';\nimport InputMask, { InputState, BeforeMaskedStateChangeStates } from '@mona-health/react-input-mask';\nimport {\n  getDateFromDayMonthAndYear,\n  getMonthName,\n  getMonthNames,\n  getDateString,\n  correctDateMaskValue,\n} from './dateFunctions';\nimport Button from '../button';\nimport Tooltip from '../tooltip';\nimport type { DatePickerProps } from './datePicker.types';\n\nimport styles from './datePicker.module.pcss';\n\nexport default function DatePicker(props: DatePickerProps) {\n  const {\n    className = '',\n    selected,\n    onSelect = () => null,\n    formValidator = null,\n    noInput = false,\n    noHeader = false,\n    isModal = false,\n    isInline = false,\n    onChange = () => null,\n    minDate = null,\n    maxDate = null,\n    children = null,\n    showClearButton = false,\n    label = '',\n    isValid = true,\n    errorMessage = '',\n    isRequired = false,\n    startDate,\n    endDate,\n  } = useComponentDefaults('DatePicker', props);\n  const getCurrValue = (): Date | undefined => (formValidator ? (formValidator.value as Date) : selected);\n\n  const initialDate = getCurrValue() ?? new Date();\n\n  const [currentMonth, setCurrentMonth] = useState(initialDate.getMonth() + 1);\n  const [currentYear, setCurrentYear] = useState(initialDate.getFullYear());\n  const [isPickerOpen, setIsPickerOpen] = useState(false);\n  const [currentDateString, setCurrentDateString] = useState(() => (getCurrValue() ? getDateString(initialDate) : ''));\n  const [isFocused, setIsFocused] = useState(false);\n  const [isHovered, setIsHovered] = useState(false);\n  const [, forceUpdate] = useState(0);\n  const [prevSelected, setPrevSelected] = useState(selected);\n\n  const fvRef = useRef(formValidator);\n\n  // Sync navigation view when `selected` prop changes externally\n  if (prevSelected !== selected) {\n    setPrevSelected(selected);\n    const d = selected ?? new Date();\n    setCurrentMonth(d.getMonth() + 1);\n    setCurrentYear(d.getFullYear());\n    setCurrentDateString(selected ? getDateString(selected) : '');\n  }\n\n  // Subscribe to formValidator updates (external system → setState in callback)\n  useEffect(() => {\n    fvRef.current = formValidator;\n    if (!formValidator) return;\n    const listener = () => {\n      const val = formValidator.value as Date | undefined;\n      if (val) {\n        setCurrentMonth(val.getMonth() + 1);\n        setCurrentYear(val.getFullYear());\n        setCurrentDateString(getDateString(val));\n      } else {\n        setCurrentDateString('');\n      }\n      forceUpdate((n: number) => n + 1);\n    };\n    formValidator.registerOnUpdateListener(listener);\n    return () => formValidator.removeOnUpdateListener(listener);\n  }, [formValidator]);\n\n  const hasError = (): boolean => {\n    return formValidator ? formValidator.touched && formValidator.hasError() : !isValid || !!errorMessage;\n  };\n\n  const computedIsRequired = (): boolean => {\n    return !!(\n      isRequired || formValidator?.validators.find((v) => (v as { validatorId?: string }).validatorId === 'required')\n    );\n  };\n\n  const handleChange = (date: Date | null) => {\n    setCurrentDateString(date ? getDateString(date) : '');\n    if (formValidator) formValidator.set(date);\n    onChange(date);\n  };\n\n  const handleSelect = (date: Date | null) => {\n    handleChange(date);\n    onSelect(date);\n    setIsPickerOpen(false);\n  };\n\n  const changeMonth = (delta: number) => {\n    setCurrentMonth((prev) => {\n      let next = prev + delta;\n      if (next < 1) {\n        next = 12;\n        setCurrentYear((y) => y - 1);\n      } else if (next > 12) {\n        next = 1;\n        setCurrentYear((y) => y + 1);\n      }\n      return next;\n    });\n  };\n\n  const tryParseDateString = (dateString: string): Date | null => {\n    if (dateString.match(/\\d{2}\\.\\d{2}\\.\\d{4}/gi)) {\n      const [day, month, year] = dateString.split('.');\n      const parsedDate = getDateFromDayMonthAndYear(Number(day), Number(month), Number(year));\n      if (parsedDate && parsedDate.toString() !== 'Invalid Date') {\n        const isSmallerThanMaxDate = !maxDate || parsedDate <= maxDate;\n        const isBiggerThanMinDate = !minDate || parsedDate >= minDate;\n        if (isSmallerThanMaxDate && isBiggerThanMinDate) return parsedDate;\n      }\n    }\n    return null;\n  };\n\n  const beforeMaskedStateChange = ({ previousState, nextState }: BeforeMaskedStateChangeStates): InputState => {\n    // previousState is only supplied on user-driven change events; on mount/focus/blur\n    // there is nothing to auto-correct, so the next state passes through unchanged.\n    if (!previousState || nextState.value === previousState.value) return nextState;\n\n    const corrected = correctDateMaskValue(nextState.value, previousState.value, nextState.selection ?? null);\n\n    const parsedDate = tryParseDateString(corrected.value);\n    if (parsedDate) handleChange(parsedDate);\n\n    return corrected;\n  };\n\n  const getYearDropdownOptions = () => {\n    let length = 400;\n    let zeroOffset = new Date().getFullYear() - 200;\n    if (minDate) zeroOffset = minDate.getFullYear();\n    if (maxDate) length = maxDate.getFullYear() - zeroOffset + 1;\n    return Array.from(Array(length).keys()).map((i) => ({ key: i + zeroOffset, label: i + zeroOffset }));\n  };\n\n  const currValue = getCurrValue();\n  const hasErr = hasError();\n\n  const header = noHeader ? null : (\n    <div className={styles.datePickerHeader}>\n      <ActionIcon icon={faChevronLeft} onClick={() => changeMonth(-1)} />\n      <div className={styles.datePickerHeaderMonthAndYearContainer}>\n        <div className={styles.datePickerHeaderMonthAndYear}>\n          <Dropdown\n            plainStyle\n            scrollToSelected\n            onChange={(v) => setCurrentMonth(v as number)}\n            className={styles.datePickerHeaderMonth}\n            value={getMonthName(getLocale('-'), currentYear, currentMonth, 1)}\n            items={getMonthNames().map((month, index) => ({ key: index + 1, label: month }))}\n          />\n          <Dropdown\n            plainStyle\n            scrollToSelected\n            useMatLabelStyle={false}\n            className={styles.datePickerHeaderYear}\n            onChange={(v) => setCurrentYear(v as number)}\n            value={currentYear}\n            items={getYearDropdownOptions()}\n          />\n        </div>\n      </div>\n      <ActionIcon icon={faChevronRight} onClick={() => changeMonth(1)} />\n    </div>\n  );\n\n  const pickerContent = (\n    <>\n      {header}\n      <DatePickerMonth\n        className={styles.datePickerMonth}\n        month={currentMonth}\n        year={currentYear}\n        onSelect={handleSelect}\n        selectionStart={startDate ?? currValue}\n        selectionEnd={endDate ?? currValue}\n        minDate={minDate}\n        maxDate={maxDate}\n        onNavigateMonth={changeMonth}\n      />\n      {showClearButton && <Button onClick={() => handleSelect(null)}>Clear</Button>}\n      {children}\n    </>\n  );\n\n  const input = noInput ? null : (\n    <Input\n      autoComplete='off'\n      readOnly={isModal}\n      classNames={isModal ? { input: styles.datePickerModalInput } : undefined}\n      label={`${label}${computedIsRequired() ? ' *' : ''}`}\n      value={currentDateString}\n      onChange={(v) => setCurrentDateString(v as string)}\n      onClick={() => setIsPickerOpen(true)}\n      customInput={\n        <InputMask mask='99.99.9999' maskPlaceholder='_' beforeMaskedStateChange={beforeMaskedStateChange} />\n      }\n      onBlur={() => {\n        if (fvRef.current) fvRef.current.touched = true;\n        setIsFocused(false);\n        handleChange(tryParseDateString(currentDateString));\n      }}\n      onFocus={() => setIsFocused(true)}\n      onMouseEnter={() => setIsHovered(true)}\n      onMouseLeave={() => setIsHovered(false)}\n      isValid={!hasErr}\n    />\n  );\n\n  const picker = (() => {\n    if (isInline) return pickerContent;\n    if (isModal) {\n      return (\n        <Modal hideHeader isOpen={isPickerOpen} onClose={() => setIsPickerOpen(false)}>\n          {pickerContent}\n        </Modal>\n      );\n    }\n    return (\n      <FloatingMenu\n        isOpen={isPickerOpen}\n        onOpenChange={(open: boolean) => setIsPickerOpen(open)}\n        content={pickerContent}\n        align={Align.Left}\n        dontCloseOnChildClick\n      >\n        {input}\n      </FloatingMenu>\n    );\n  })();\n\n  return (\n    <div className={cx(styles.datePicker, className)}>\n      {(isModal || isInline) && input}\n      {picker}\n      <Tooltip\n        variant='error'\n        message={formValidator ? formValidator.getCurrentErrorMessage() : errorMessage || ''}\n        isVisible={hasErr && (isFocused || isHovered)}\n      />\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/esm/common/emptyState/emptyState.mjs

@@ -1,2 +1,2 @@
-import{renderIcon as e}from"../utils/renderIcon.mjs";import t from"./emptyState.module.mjs";import n from"classnames";import{jsx as r,jsxs as i}from"react/jsx-runtime";function a({className:a,icon:o,children:s,...c}){return i(`div`,{...c,className:n(t.emptyState,a),children:[o?e(o):null,r(`div`,{children:s??`No entries available`})]})}export{a as default};
+import{useLabels as e}from"../configProvider/useLabels.mjs";import{renderIcon as t}from"../utils/renderIcon.mjs";import n from"./emptyState.module.mjs";import r from"classnames";import{jsx as i,jsxs as a}from"react/jsx-runtime";var o={empty:`No entries available`};function s({className:s,icon:c,children:l,labels:u,...d}){let f=e(`EmptyState`,u,o);return a(`div`,{...d,className:r(n.emptyState,s),children:[c?t(c):null,i(`div`,{children:l??f.empty})]})}export{s as default};
 //# sourceMappingURL=emptyState.mjs.map

package/dist/esm/common/emptyState/emptyState.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"emptyState.mjs","names":[],"sources":["../../../../package/common/emptyState/emptyState.tsx"],"sourcesContent":["import cx from 'classnames';\nimport type { ReactElement } from 'react';\nimport type { EmptyStateProps } from './emptyState.types';\nimport styles from './emptyState.module.pcss';\nimport { renderIcon } from '../utils/renderIcon';\n\nexport default function EmptyState({ className, icon, children, ...rest }: EmptyStateProps): ReactElement {\n  return (\n    <div {...rest} className={cx(styles.emptyState, className)}>\n      {icon ? renderIcon(icon) : null}\n      <div>{children ?? 'No entries available'}</div>\n    </div>\n  );\n}\n"],"mappings":"wKAMA,SAAwB,EAAW,CAAE,YAAW,OAAM,WAAU,GAAG,GAAuC,CACxG,OACE,EAAC,MAAD,CAAK,GAAI,EAAM,UAAW,EAAG,EAAO,WAAY,CAAS,EAAzD,SAAA,CACG,EAAO,EAAW,CAAI,EAAI,KAC3B,EAAC,MAAD,CAAA,SAAM,GAAY,sBAA4B,CAAA,CAC3C,GAET"}
+{"version":3,"file":"emptyState.mjs","names":[],"sources":["../../../../package/common/emptyState/emptyState.tsx"],"sourcesContent":["import cx from 'classnames';\nimport type { ReactElement } from 'react';\nimport type { EmptyStateLabels, EmptyStateProps } from './emptyState.types';\nimport { useLabels } from '../configProvider';\n\nconst DEFAULT_LABELS: Required<EmptyStateLabels> = {\n  empty: 'No entries available',\n};\nimport styles from './emptyState.module.pcss';\nimport { renderIcon } from '../utils/renderIcon';\n\nexport default function EmptyState({ className, icon, children, labels, ...rest }: EmptyStateProps): ReactElement {\n  const text = useLabels('EmptyState', labels, DEFAULT_LABELS);\n  return (\n    <div {...rest} className={cx(styles.emptyState, className)}>\n      {icon ? renderIcon(icon) : null}\n      <div>{children ?? text.empty}</div>\n    </div>\n  );\n}\n"],"mappings":"oOAKA,IAAM,EAA6C,CACjD,MAAO,sBACT,EAIA,SAAwB,EAAW,CAAE,YAAW,OAAM,WAAU,SAAQ,GAAG,GAAuC,CAChH,IAAM,EAAO,EAAU,aAAc,EAAQ,CAAc,EAC3D,OACE,EAAC,MAAD,CAAK,GAAI,EAAM,UAAW,EAAG,EAAO,WAAY,CAAS,EAAzD,SAAA,CACG,EAAO,EAAW,CAAI,EAAI,KAC3B,EAAC,MAAD,CAAA,SAAM,GAAY,EAAK,KAAW,CAAA,CAC/B,GAET"}

package/dist/esm/common/input/input.mjs

@@ -1,2 +1,2 @@
-import{useComponentDefaults as e}from"../configProvider/useComponentDefaults.mjs";import t from"../tooltip/tooltip.mjs";import n from"../animatedIcon/animatedIcon.mjs";import r from"./input.module.mjs";import{InputIconPosition as i,InputType as a}from"./input.types.mjs";import ee,{useCallback as te,useEffect as o,useId as ne,useRef as s,useState as c}from"react";import l from"classnames";import{FontAwesomeIcon as u}from"@fortawesome/react-fontawesome";import{faEnvelope as re,faEye as ie,faEyeSlash as ae,faPen as oe,faPhone as se,faSearch as ce,faXmark as le}from"@fortawesome/free-solid-svg-icons";import{jsx as d,jsxs as f}from"react/jsx-runtime";function p(e){if(e)return{role:`button`,tabIndex:0,onKeyDown:t=>{(t.key===`Enter`||t.key===` `)&&(t.preventDefault(),e(t))}}}function ue(ue){let{name:de=``,id:fe,label:m=``,errorMessage:pe=``,isValid:me=!0,className:he=``,style:ge,value:_e=``,icon:ve=null,iconPosition:ye,onChange:h=()=>{},onFocus:g=null,onBlur:_=null,onMouseEnter:v=null,onMouseLeave:be=null,isUppercase:xe=!1,isRequired:Se=!1,tabIndex:Ce=0,type:y=void 0,isRow:we=!1,onIconClick:b=null,parse:Te=null,formValidator:x=null,autoFocus:Ee=!1,suffix:S=null,upperRightLabel:C=null,labelInBorder:De=!1,showCancel:Oe=!1,onClearClicked:ke,min:Ae=null,max:je=null,placeholder:w=``,useMatLabelStyle:T=!0,alwaysFloatLabel:Me=!1,autoComplete:Ne=null,onClick:Pe=()=>null,readOnly:E=!1,customInput:D,alwaysShowCancel:Fe=!1,multiline:O=!1,rows:k,autoResize:A=!1,classNames:j,styles:M,disabled:Ie=!1,...N}=e(`Input`,ue),[P,F]=c(!1),[Le,Re]=c(!1),[ze,I]=c(!1),[L,Be]=c(!1),[,Ve]=c(0),R=s(null),z=s(x),He=ne(),Ue=fe||de||He,B=x?x.value:_e,We=s(!1),V=te(()=>{let e=R.current;if(e){if(!A){We.current&&=(e.style.height=``,!1);return}e.style.height=`auto`,e.style.height=`${e.scrollHeight}px`,We.current=!0}},[A]);o(()=>{V()},[V,B]),o(()=>{Ee&&R.current&&setTimeout(()=>{R.current?.focus()},1)},[Ee]),o(()=>{z.current=x;let e=z.current;if(!e)return;e.label=m??``,e.validate();let t=()=>Ve(e=>e+1);return e.registerOnUpdateListener(t),()=>{e.removeOnUpdateListener(t)}},[x,m]);let Ge=()=>x?x.touched&&x.hasError():!me||!!pe,Ke=()=>!!(Se||x&&x.validators.find(e=>e.validatorId===`required`)),qe=e=>{I(!0),v&&v(e)},Je=e=>{I(!1),be&&be(e)},Ye=e=>{F(!0),g&&g(e)},Xe=e=>{z.current&&(z.current.touched=!0),F(!1),_&&_(e)},Ze=e=>{let t,n;typeof e==`string`?n=e:(t=e,n=e.target.value),Te&&(n=Te(n)),x&&x.set(n),h&&h(n,t),V()},Qe=()=>{if(y!==a.Email)return y===a.Phone?`tel`:y===a.Search?`search`:y===`password`&&L?`text`:y},$e=()=>{if(y===a.Email)return`email`;if(y===a.Phone)return`tel`;if(y===a.Search)return`search`},et=y&&y!==a.Date&&y!==a.Iban&&y!==a.HasNoIcon,tt=y===a.Search||y===a.Password,H=!!ve,nt=H&&!tt,rt=y===a.Email||y===a.Phone||y===a.Search,U=(ye??(!T&&rt?i.Left:i.Right))===i.Left,W={className:l(r.inputFieldIcon,{[r.inputFieldIconNotClickable]:!b,[r.inputFieldIconLeft]:U}),onClick:b??void 0,...p(b)},G=ve,K=b??G?.props.onClick,it=nt&&G?ee.cloneElement(G,{className:l(r.inputFieldIcon,{[r.inputFieldIconNotClickable]:!K,[r.inputFieldIconLeft]:U},G.props.className),onClick:K,...p(K)}):null,at=(et||H)&&U,ot={className:l(r.inputFieldIcon,r.inputFieldIconPassword,{[r.inputFieldIconLeft]:U}),onClick:()=>Be(!L),...p(()=>Be(!L)),"aria-label":L?`Hide password`:`Show password`},q=Ge(),J=m;J&&Ke()&&(J=`${J} *`);let st=Ke()?d(`span`,{className:r.requiredMark,children:`*`}):null,Y=P&&!E,X=T&&(Me||Y||B||Le||y===a.Date),ct=e=>{let{animationName:t}=e;if(t===r.inputAutofillStart){Re(!0);let t=e.currentTarget.value;t&&t!==String(B??``)&&Ze(t);return}if(t===r.inputAutofillEnd){Re(!1);return}N.onAnimationStart?.(e)},Z=y===a.Search&&!!B,Q=D?.props;function $(){x&&x.set(``),h?.(``),ke?.()}return f(`div`,{className:l(r.input,{[r.inputIconLeft]:at},he),style:ge,children:[f(`label`,{htmlFor:Ue,className:l(r.inputLabel,j?.label,{[r.inputLabelColumn]:!we,[r.inputLabelInBorder]:De}),style:M?.label,children:[m&&!T?f(`span`,{className:r.inputLabelText,children:[m,st]}):null,C&&d(`div`,{className:l(r.inputUpperRightLabel,j?.upperRightLabel),style:M?.upperRightLabel,children:C}),f(`div`,{className:l(r.inputContainer,{[r.inputContainerMultiline]:O},j?.container),style:M?.container,onMouseEnter:qe,onMouseLeave:Je,children:[it,ee.cloneElement(D||d(O?`textarea`:`input`,{}),{...N,className:l(r.inputField,{[r.inputFieldUppercase]:xe,[r.inputFieldDate]:y===a.Date,[r.inputFieldDefault]:y!==a.Date,[r.inputFieldWithIcon]:et||H,[r.inputFieldWithIconLeft]:at,[r.inputFieldMultiline]:O,[r.inputFieldMultilineAutoResize]:O&&A,[r.inputFieldReadOnly]:E&&!Ie},j?.input,Q?.className),style:Q?.style||M?.input?{...Q?.style,...M?.input}:void 0,name:de,id:Ue,value:B,tabIndex:Ce,ref:D?void 0:R,onChange:Ze,onAnimationStart:ct,onFocus:Ye,onBlur:Xe,placeholder:T?``:w,autoComplete:Ne,onClick:Pe,readOnly:E,disabled:Ie,...!O&&{type:Qe(),inputMode:N.inputMode??$e(),min:Ae,max:je},...O&&k!==void 0&&{rows:k}}),S&&d(`div`,{className:l(r.inputFieldSuffix,j?.suffix),style:M?.suffix,children:S})]}),d(`fieldset`,{className:l(r.inputFieldset,j?.fieldset,{[r.inputFieldsetNoNotch]:!m,[r.inputContainerBorderFocused]:Y,[r.inputContainerBorderSearchFocused]:y===a.Search&&(Y||!!B),[r.inputContainerBorderInvalid]:q,[r.inputContainerBorderError]:q}),style:M?.fieldset,children:d(`legend`,{className:l(r.inputFieldsetLegend,{[r.inputFieldsetLegendActive]:X}),children:d(`span`,{children:J})})}),T&&m&&f(`div`,{className:l(r.inputMatLabel,{[r.inputMatLabelFloating]:X,[r.inputMatLabelMultiline]:O&&!X}),children:[m,st]}),T&&w&&d(`div`,{className:l(r.inputPlaceholder,Y&&!B&&!Le&&r.inputPlaceholderShown,O&&r.inputPlaceholderMultiline),children:w}),d(t,{variant:`error`,message:x?x.getCurrentErrorMessage():pe||``,isVisible:q&&(P||ze)})]}),y===a.Phone&&!H&&d(u,{icon:se,...W}),y===a.Email&&!H&&d(u,{icon:re,...W}),y===a.Edit&&!H&&d(u,{icon:oe,...W}),y===a.Search&&d(n,{icon:Z?le:ce,className:l(r.inputFieldIcon,{[r.inputFieldIconNotClickable]:!Z,[r.inputFieldIconLeft]:U}),onClick:Z?$:void 0,...p(Z?$:void 0),"aria-label":Z?`Clear search`:void 0}),y===a.Password&&d(u,{icon:L?ae:ie,...ot}),(Oe&&B&&(P||ze)||Fe)&&y!==a.Search&&d(u,{icon:le,className:r.inputFieldIcon,onClick:$,onMouseEnter:()=>I(!0),onMouseLeave:()=>I(!1),...p($),"aria-label":`Clear`})]})}export{ue as default};
+import{useComponentDefaults as e}from"../configProvider/useComponentDefaults.mjs";import{useLabels as t}from"../configProvider/useLabels.mjs";import n from"../tooltip/tooltip.mjs";import ee from"../animatedIcon/animatedIcon.mjs";import r from"./input.module.mjs";import{InputIconPosition as i,InputType as a}from"./input.types.mjs";import te,{useCallback as ne,useEffect as o,useId as re,useRef as s,useState as c}from"react";import l from"classnames";import{FontAwesomeIcon as u}from"@fortawesome/react-fontawesome";import{faEnvelope as ie,faEye as ae,faEyeSlash as oe,faPen as se,faPhone as ce,faSearch as le,faXmark as ue}from"@fortawesome/free-solid-svg-icons";import{jsx as d,jsxs as f}from"react/jsx-runtime";var de={clear:`Clear`,showPassword:`Show password`,hidePassword:`Hide password`,clearSearch:`Clear search`};function p(e){if(e)return{role:`button`,tabIndex:0,onKeyDown:t=>{(t.key===`Enter`||t.key===` `)&&(t.preventDefault(),e(t))}}}function fe(fe){let{name:pe=``,id:me,label:m=``,errorMessage:he=``,isValid:ge=!0,className:_e=``,style:ve,value:ye=``,icon:h=null,iconPosition:be,onChange:g=()=>{},onFocus:_=null,onBlur:xe=null,onMouseEnter:Se=null,onMouseLeave:Ce=null,isUppercase:we=!1,isRequired:Te=!1,tabIndex:Ee=0,type:v=void 0,isRow:De=!1,onIconClick:y=null,parse:Oe=null,formValidator:b=null,autoFocus:x=!1,suffix:S=null,upperRightLabel:C=null,labelInBorder:ke=!1,showCancel:Ae=!1,onClearClicked:je,min:Me=null,max:Ne=null,placeholder:w=``,useMatLabelStyle:T=!0,alwaysFloatLabel:Pe=!1,autoComplete:Fe=null,onClick:Ie=()=>null,readOnly:E=!1,customInput:D,alwaysShowCancel:Le=!1,multiline:O=!1,rows:Re,autoResize:k=!1,classNames:A,styles:j,disabled:ze=!1,labels:Be,...M}=e(`Input`,fe),N=t(`Input`,Be,de),[P,Ve]=c(!1),[F,He]=c(!1),[Ue,I]=c(!1),[L,We]=c(!1),[,Ge]=c(0),R=s(null),z=s(b),Ke=re(),qe=me||pe||Ke,B=b?b.value:ye,Je=s(!1),V=ne(()=>{let e=R.current;if(e){if(!k){Je.current&&=(e.style.height=``,!1);return}e.style.height=`auto`,e.style.height=`${e.scrollHeight}px`,Je.current=!0}},[k]);o(()=>{V()},[V,B]),o(()=>{x&&R.current&&setTimeout(()=>{R.current?.focus()},1)},[x]),o(()=>{z.current=b;let e=z.current;if(!e)return;e.label=m??``,e.validate();let t=()=>Ge(e=>e+1);return e.registerOnUpdateListener(t),()=>{e.removeOnUpdateListener(t)}},[b,m]);let Ye=()=>b?b.touched&&b.hasError():!ge||!!he,Xe=()=>!!(Te||b&&b.validators.find(e=>e.validatorId===`required`)),Ze=e=>{I(!0),Se&&Se(e)},Qe=e=>{I(!1),Ce&&Ce(e)},$e=e=>{Ve(!0),_&&_(e)},et=e=>{z.current&&(z.current.touched=!0),Ve(!1),xe&&xe(e)},tt=e=>{let t,n;typeof e==`string`?n=e:(t=e,n=e.target.value),Oe&&(n=Oe(n)),b&&b.set(n),g&&g(n,t),V()},nt=()=>{if(v!==a.Email)return v===a.Phone?`tel`:v===a.Search?`search`:v===`password`&&L?`text`:v},rt=()=>{if(v===a.Email)return`email`;if(v===a.Phone)return`tel`;if(v===a.Search)return`search`},it=v&&v!==a.Date&&v!==a.Iban&&v!==a.HasNoIcon,at=v===a.Search||v===a.Password,H=!!h,ot=H&&!at,st=v===a.Email||v===a.Phone||v===a.Search,U=(be??(!T&&st?i.Left:i.Right))===i.Left,W={className:l(r.inputFieldIcon,{[r.inputFieldIconNotClickable]:!y,[r.inputFieldIconLeft]:U}),onClick:y??void 0,...p(y)},G=h,K=y??G?.props.onClick,ct=ot&&G?te.cloneElement(G,{className:l(r.inputFieldIcon,{[r.inputFieldIconNotClickable]:!K,[r.inputFieldIconLeft]:U},G.props.className),onClick:K,...p(K)}):null,lt=(it||H)&&U,ut={className:l(r.inputFieldIcon,r.inputFieldIconPassword,{[r.inputFieldIconLeft]:U}),onClick:()=>We(!L),...p(()=>We(!L)),"aria-label":L?N.hidePassword:N.showPassword},q=Ye(),J=m;J&&Xe()&&(J=`${J} *`);let dt=Xe()?d(`span`,{className:r.requiredMark,children:`*`}):null,Y=P&&!E,X=T&&(Pe||Y||B||F||v===a.Date),ft=e=>{let{animationName:t}=e;if(t===r.inputAutofillStart){He(!0);let t=e.currentTarget.value;t&&t!==String(B??``)&&tt(t);return}if(t===r.inputAutofillEnd){He(!1);return}M.onAnimationStart?.(e)},Z=v===a.Search&&!!B,Q=D?.props;function $(){b&&b.set(``),g?.(``),je?.()}return f(`div`,{className:l(r.input,{[r.inputIconLeft]:lt},_e),style:ve,children:[f(`label`,{htmlFor:qe,className:l(r.inputLabel,A?.label,{[r.inputLabelColumn]:!De,[r.inputLabelInBorder]:ke}),style:j?.label,children:[m&&!T?f(`span`,{className:r.inputLabelText,children:[m,dt]}):null,C&&d(`div`,{className:l(r.inputUpperRightLabel,A?.upperRightLabel),style:j?.upperRightLabel,children:C}),f(`div`,{className:l(r.inputContainer,{[r.inputContainerMultiline]:O},A?.container),style:j?.container,onMouseEnter:Ze,onMouseLeave:Qe,children:[ct,te.cloneElement(D||d(O?`textarea`:`input`,{}),{...M,className:l(r.inputField,{[r.inputFieldUppercase]:we,[r.inputFieldDate]:v===a.Date,[r.inputFieldDefault]:v!==a.Date,[r.inputFieldWithIcon]:it||H,[r.inputFieldWithIconLeft]:lt,[r.inputFieldMultiline]:O,[r.inputFieldMultilineAutoResize]:O&&k,[r.inputFieldReadOnly]:E&&!ze},A?.input,Q?.className),style:Q?.style||j?.input?{...Q?.style,...j?.input}:void 0,name:pe,id:qe,value:B,tabIndex:Ee,ref:D?void 0:R,onChange:tt,onAnimationStart:ft,onFocus:$e,onBlur:et,placeholder:T?``:w,autoComplete:Fe,onClick:Ie,readOnly:E,disabled:ze,...!O&&{type:nt(),inputMode:M.inputMode??rt(),min:Me,max:Ne},...O&&Re!==void 0&&{rows:Re}}),S&&d(`div`,{className:l(r.inputFieldSuffix,A?.suffix),style:j?.suffix,children:S})]}),d(`fieldset`,{className:l(r.inputFieldset,A?.fieldset,{[r.inputFieldsetNoNotch]:!m,[r.inputContainerBorderFocused]:Y,[r.inputContainerBorderSearchFocused]:v===a.Search&&(Y||!!B),[r.inputContainerBorderInvalid]:q,[r.inputContainerBorderError]:q}),style:j?.fieldset,children:d(`legend`,{className:l(r.inputFieldsetLegend,{[r.inputFieldsetLegendActive]:X}),children:d(`span`,{children:J})})}),T&&m&&f(`div`,{className:l(r.inputMatLabel,{[r.inputMatLabelFloating]:X,[r.inputMatLabelMultiline]:O&&!X}),children:[m,dt]}),T&&w&&d(`div`,{className:l(r.inputPlaceholder,Y&&!B&&!F&&r.inputPlaceholderShown,O&&r.inputPlaceholderMultiline),children:w}),d(n,{variant:`error`,message:b?b.getCurrentErrorMessage():he||``,isVisible:q&&(P||Ue)})]}),v===a.Phone&&!H&&d(u,{icon:ce,...W}),v===a.Email&&!H&&d(u,{icon:ie,...W}),v===a.Edit&&!H&&d(u,{icon:se,...W}),v===a.Search&&d(ee,{icon:Z?ue:le,className:l(r.inputFieldIcon,{[r.inputFieldIconNotClickable]:!Z,[r.inputFieldIconLeft]:U}),onClick:Z?$:void 0,...p(Z?$:void 0),"aria-label":Z?N.clearSearch:void 0}),v===a.Password&&d(u,{icon:L?oe:ae,...ut}),(Ae&&B&&(P||Ue)||Le)&&v!==a.Search&&d(u,{icon:ue,className:r.inputFieldIcon,onClick:$,onMouseEnter:()=>I(!0),onMouseLeave:()=>I(!1),...p($),"aria-label":N.clear})]})}export{fe as default};
 //# sourceMappingURL=input.mjs.map

package/dist/esm/common/input/input.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"input.mjs","names":[],"sources":["../../../../package/common/input/input.tsx"],"sourcesContent":["import React, { useState, useEffect, useRef, useCallback, useId } from 'react';\nimport cx from 'classnames';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport {\n  faPhone,\n  faPen,\n  faEnvelope,\n  faSearch,\n  faXmark,\n  faEye as passwordHiddenIcon,\n  faEyeSlash as passwordShownIcon,\n} from '@fortawesome/free-solid-svg-icons';\nimport Tooltip from 'components/common/tooltip';\nimport AnimatedIcon from 'components/common/animatedIcon';\nimport { useComponentDefaults } from 'components/common/configProvider';\nimport styles from './input.module.pcss';\nimport type { InputProps } from './input.types';\nimport { InputType, InputIconPosition } from './input.types';\n\nfunction keyboardActivationProps(onActivate?: ((event: React.SyntheticEvent) => void) | null) {\n  if (!onActivate) return undefined;\n  return {\n    role: 'button' as const,\n    tabIndex: 0,\n    onKeyDown: (event: React.KeyboardEvent) => {\n      if (event.key !== 'Enter' && event.key !== ' ') return;\n      event.preventDefault();\n      onActivate(event);\n    },\n  };\n}\n\nfunction Input(props: InputProps) {\n  const {\n    name = '',\n    id,\n    label = '',\n    errorMessage = '',\n    isValid = true,\n    className = '',\n    style,\n    value = '',\n    icon = null,\n    iconPosition,\n    onChange = () => {},\n    onFocus: onFocusProp = null,\n    onBlur: onBlurProp = null,\n    onMouseEnter: onMouseEnterProp = null,\n    onMouseLeave: onMouseLeaveProp = null,\n    isUppercase = false,\n    isRequired = false,\n    tabIndex = 0,\n    type = undefined,\n    isRow = false,\n    onIconClick = null,\n    parse = null,\n    formValidator = null,\n    autoFocus = false,\n    suffix = null,\n    upperRightLabel = null,\n    labelInBorder = false,\n    showCancel = false,\n    onClearClicked,\n    min = null,\n    max = null,\n    placeholder = '',\n    useMatLabelStyle = true,\n    alwaysFloatLabel = false,\n    autoComplete = null,\n    onClick = () => null,\n    readOnly = false,\n    customInput,\n    alwaysShowCancel = false,\n    multiline = false,\n    rows,\n    autoResize = false,\n    classNames,\n    styles: slotStyles,\n    disabled = false,\n    ...rest\n  } = useComponentDefaults('Input', props);\n  const [isFocused, setIsFocused] = useState(false);\n  // Chrome fills a field on page load without firing anything React sees. The animation the\n  // stylesheet binds to :-webkit-autofill is the only notification it gives.\n  const [isAutofilled, setIsAutofilled] = useState(false);\n  const [isHovered, setIsHovered] = useState(false);\n  const [isPasswordShown, setIsPasswordShown] = useState(false);\n  const [, forceUpdate] = useState(0);\n\n  const inputRef = useRef<HTMLInputElement | HTMLTextAreaElement>(null);\n  const fvRef = useRef(formValidator);\n\n  const generatedId = useId();\n  const inputId = id || name || generatedId;\n\n  const currVal = formValidator ? formValidator.value : value;\n  const didSetAutoHeightRef = useRef(false);\n\n  const resizeTextarea = useCallback(() => {\n    const el = inputRef.current;\n    if (!el) return;\n    if (!autoResize) {\n      // Only undo a height this set, so an explicit one from `styles.input` survives.\n      if (didSetAutoHeightRef.current) {\n        el.style.height = '';\n        didSetAutoHeightRef.current = false;\n      }\n      return;\n    }\n    el.style.height = 'auto';\n    el.style.height = `${el.scrollHeight}px`;\n    didSetAutoHeightRef.current = true;\n  }, [autoResize]);\n\n  // `currVal` is a dependency because the value can change without passing through\n  // `onChangeHandler`: the clear button, a parent resetting it, or `formValidator.set` elsewhere.\n  useEffect(() => {\n    resizeTextarea();\n  }, [resizeTextarea, currVal]);\n\n  useEffect(() => {\n    if (autoFocus && inputRef.current) {\n      setTimeout(() => {\n        inputRef.current?.focus();\n      }, 1);\n    }\n  }, [autoFocus]);\n\n  useEffect(() => {\n    fvRef.current = formValidator;\n    const fv = fvRef.current;\n    if (!fv) return;\n    fv.label = label ?? '';\n    fv.validate();\n    const listener = () => forceUpdate((n) => n + 1);\n    fv.registerOnUpdateListener(listener);\n    return () => {\n      fv.removeOnUpdateListener(listener);\n    };\n  }, [formValidator, label]);\n\n  const hasError = (): boolean => {\n    return formValidator ? formValidator.touched && formValidator.hasError() : !isValid || !!errorMessage;\n  };\n\n  const computedIsRequired = (): boolean => {\n    return !!(\n      isRequired ||\n      (formValidator &&\n        formValidator.validators.find((v) => (v as { validatorId?: string }).validatorId === 'required'))\n    );\n  };\n\n  const onMouseEnterHandler = (event: React.MouseEvent) => {\n    setIsHovered(true);\n    if (onMouseEnterProp) onMouseEnterProp(event);\n  };\n\n  const onMouseLeaveHandler = (event: React.MouseEvent) => {\n    setIsHovered(false);\n    if (onMouseLeaveProp) onMouseLeaveProp(event);\n  };\n\n  const onFocusHandler = (event: React.FocusEvent) => {\n    setIsFocused(true);\n    if (onFocusProp) onFocusProp(event);\n  };\n\n  const onBlurHandler = (event: React.FocusEvent) => {\n    if (fvRef.current) fvRef.current.touched = true;\n    setIsFocused(false);\n    if (onBlurProp) onBlurProp(event);\n  };\n\n  const onChangeHandler = (event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement> | string): void => {\n    let parsedEvent: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement> | undefined;\n    let val: string;\n\n    if (typeof event !== 'string') {\n      parsedEvent = event;\n      val = event.target.value;\n    } else {\n      val = event;\n    }\n\n    if (parse) val = parse(val);\n    if (formValidator) formValidator.set(val);\n    if (onChange) onChange(val, parsedEvent);\n    resizeTextarea();\n  };\n\n  const getInputType = (): string | undefined => {\n    if (type === InputType.Email) return undefined;\n    if (type === InputType.Phone) return 'tel';\n    if (type === InputType.Search) return 'search';\n    if (type === 'password' && isPasswordShown) return 'text';\n    return type;\n  };\n\n  const getInputMode = (): React.HTMLAttributes<HTMLInputElement>['inputMode'] => {\n    if (type === InputType.Email) return 'email';\n    if (type === InputType.Phone) return 'tel';\n    if (type === InputType.Search) return 'search';\n    return undefined;\n  };\n\n  const hasIcon = type && type !== InputType.Date && type !== InputType.Iban && type !== InputType.HasNoIcon;\n\n  const isFunctionalIconType = type === InputType.Search || type === InputType.Password;\n  const hasCustomIcon = !!icon;\n  const customIconApplies = hasCustomIcon && !isFunctionalIconType;\n\n  const defaultsLeftWithoutMatLabel = type === InputType.Email || type === InputType.Phone || type === InputType.Search;\n  const resolvedIconPosition =\n    iconPosition ??\n    (!useMatLabelStyle && defaultsLeftWithoutMatLabel ? InputIconPosition.Left : InputIconPosition.Right);\n  const iconIsLeft = resolvedIconPosition === InputIconPosition.Left;\n\n  const iconProps = {\n    className: cx(styles.inputFieldIcon, {\n      [styles.inputFieldIconNotClickable]: !onIconClick,\n      [styles.inputFieldIconLeft]: iconIsLeft,\n    }),\n    onClick: onIconClick ?? undefined,\n    ...keyboardActivationProps(onIconClick),\n  };\n\n  const customIcon = icon as React.ReactElement<{ className?: string; onClick?: React.MouseEventHandler }> | null;\n  const resolvedCustomIconClick = onIconClick ?? customIcon?.props.onClick;\n  const renderedIcon =\n    customIconApplies && customIcon\n      ? React.cloneElement(customIcon, {\n          className: cx(\n            styles.inputFieldIcon,\n            {\n              [styles.inputFieldIconNotClickable]: !resolvedCustomIconClick,\n              [styles.inputFieldIconLeft]: iconIsLeft,\n            },\n            customIcon.props.className,\n          ),\n          onClick: resolvedCustomIconClick,\n          ...keyboardActivationProps(resolvedCustomIconClick as ((event: React.SyntheticEvent) => void) | undefined),\n        })\n      : null;\n\n  const hasLeftIcon = (hasIcon || hasCustomIcon) && iconIsLeft;\n\n  const passwordIconProps = {\n    className: cx(styles.inputFieldIcon, styles.inputFieldIconPassword, { [styles.inputFieldIconLeft]: iconIsLeft }),\n    onClick: () => setIsPasswordShown(!isPasswordShown),\n    ...keyboardActivationProps(() => setIsPasswordShown(!isPasswordShown)),\n    'aria-label': isPasswordShown ? 'Hide password' : 'Show password',\n  };\n\n  const hasErr = hasError();\n\n  let editedLabel = label;\n  if (editedLabel && computedIsRequired()) editedLabel = `${editedLabel} *`;\n  const requiredMark = computedIsRequired() ? <span className={styles.requiredMark}>*</span> : null;\n\n  const showFocus = isFocused && !readOnly;\n  const shouldFloatLabel =\n    useMatLabelStyle && (alwaysFloatLabel || showFocus || currVal || isAutofilled || type === InputType.Date);\n\n  const handleAutofillAnimation = (event: React.AnimationEvent) => {\n    const { animationName } = event;\n    if (animationName === styles.inputAutofillStart) {\n      setIsAutofilled(true);\n      // The field is controlled, so the commit this triggers would write `value` back over\n      // what the browser just put there and blank it. Replay it as an ordinary change first.\n      const filled = (event.currentTarget as HTMLInputElement).value;\n      if (filled && filled !== String(currVal ?? '')) onChangeHandler(filled);\n      return;\n    }\n    if (animationName === styles.inputAutofillEnd) {\n      setIsAutofilled(false);\n      return;\n    }\n    // Not ours. `onAnimationStart` arrives through `rest`, and the consumer must not receive\n    // the two above: the `:not()` rule fires one of them on every mount.\n    rest.onAnimationStart?.(event as React.AnimationEvent<HTMLInputElement>);\n  };\n\n  const isSearchCleared = type === InputType.Search && !!currVal;\n\n  const customInputProps = customInput?.props as { className?: string; style?: React.CSSProperties } | undefined;\n\n  function handleClear() {\n    if (formValidator) formValidator.set('');\n    onChange?.('');\n    onClearClicked?.();\n  }\n\n  return (\n    <div className={cx(styles.input, { [styles.inputIconLeft]: hasLeftIcon }, className)} style={style}>\n      <label\n        htmlFor={inputId}\n        className={cx(styles.inputLabel, classNames?.label, {\n          [styles.inputLabelColumn]: !isRow,\n          [styles.inputLabelInBorder]: labelInBorder,\n        })}\n        style={slotStyles?.label}\n      >\n        {label && !useMatLabelStyle ? (\n          <span className={styles.inputLabelText}>\n            {label}\n            {requiredMark}\n          </span>\n        ) : null}\n        {upperRightLabel && (\n          <div\n            className={cx(styles.inputUpperRightLabel, classNames?.upperRightLabel)}\n            style={slotStyles?.upperRightLabel}\n          >\n            {upperRightLabel}\n          </div>\n        )}\n        <div\n          className={cx(styles.inputContainer, { [styles.inputContainerMultiline]: multiline }, classNames?.container)}\n          style={slotStyles?.container}\n          onMouseEnter={onMouseEnterHandler}\n          onMouseLeave={onMouseLeaveHandler}\n        >\n          {renderedIcon}\n          {React.cloneElement(customInput || (multiline ? <textarea /> : <input />), {\n            ...rest,\n            className: cx(\n              styles.inputField,\n              {\n                [styles.inputFieldUppercase]: isUppercase,\n                [styles.inputFieldDate]: type === InputType.Date,\n                [styles.inputFieldDefault]: type !== InputType.Date,\n                [styles.inputFieldWithIcon]: hasIcon || hasCustomIcon,\n                [styles.inputFieldWithIconLeft]: hasLeftIcon,\n                [styles.inputFieldMultiline]: multiline,\n                [styles.inputFieldMultilineAutoResize]: multiline && autoResize,\n                [styles.inputFieldReadOnly]: readOnly && !disabled,\n              },\n              classNames?.input,\n              customInputProps?.className,\n            ),\n            style:\n              customInputProps?.style || slotStyles?.input\n                ? { ...customInputProps?.style, ...slotStyles?.input }\n                : undefined,\n            name,\n            id: inputId,\n            value: currVal,\n            tabIndex,\n            ref: customInput ? undefined : inputRef,\n            onChange: onChangeHandler,\n            onAnimationStart: handleAutofillAnimation,\n            onFocus: onFocusHandler,\n            onBlur: onBlurHandler,\n            placeholder: !useMatLabelStyle ? placeholder : '',\n            autoComplete,\n            onClick,\n            readOnly,\n            disabled,\n            ...(!multiline && { type: getInputType(), inputMode: rest.inputMode ?? getInputMode(), min, max }),\n            ...(multiline && rows !== undefined && { rows }),\n          })}\n          {suffix && (\n            <div className={cx(styles.inputFieldSuffix, classNames?.suffix)} style={slotStyles?.suffix}>\n              {suffix}\n            </div>\n          )}\n        </div>\n        <fieldset\n          className={cx(styles.inputFieldset, classNames?.fieldset, {\n            [styles.inputFieldsetNoNotch]: !label,\n            [styles.inputContainerBorderFocused]: showFocus,\n            [styles.inputContainerBorderSearchFocused]: type === InputType.Search && (showFocus || !!currVal),\n            [styles.inputContainerBorderInvalid]: hasErr,\n            [styles.inputContainerBorderError]: hasErr,\n          })}\n          style={slotStyles?.fieldset}\n        >\n          <legend\n            className={cx(styles.inputFieldsetLegend, {\n              [styles.inputFieldsetLegendActive]: shouldFloatLabel,\n            })}\n          >\n            <span>{editedLabel}</span>\n          </legend>\n        </fieldset>\n        {useMatLabelStyle && label && (\n          <div\n            className={cx(styles.inputMatLabel, {\n              [styles.inputMatLabelFloating]: shouldFloatLabel,\n              [styles.inputMatLabelMultiline]: multiline && !shouldFloatLabel,\n            })}\n          >\n            {label}\n            {requiredMark}\n          </div>\n        )}\n        {useMatLabelStyle && placeholder && (\n          <div\n            className={cx(\n              styles.inputPlaceholder,\n              showFocus && !currVal && !isAutofilled && styles.inputPlaceholderShown,\n              multiline && styles.inputPlaceholderMultiline,\n            )}\n          >\n            {placeholder}\n          </div>\n        )}\n        <Tooltip\n          variant='error'\n          message={formValidator ? formValidator.getCurrentErrorMessage() : errorMessage || ''}\n          isVisible={hasErr && (isFocused || isHovered)}\n        />\n      </label>\n\n      {type === InputType.Phone && !hasCustomIcon && <FontAwesomeIcon icon={faPhone} {...iconProps} />}\n      {type === InputType.Email && !hasCustomIcon && <FontAwesomeIcon icon={faEnvelope} {...iconProps} />}\n      {type === InputType.Edit && !hasCustomIcon && <FontAwesomeIcon icon={faPen} {...iconProps} />}\n      {type === InputType.Search && (\n        <AnimatedIcon\n          icon={isSearchCleared ? faXmark : faSearch}\n          className={cx(styles.inputFieldIcon, {\n            [styles.inputFieldIconNotClickable]: !isSearchCleared,\n            [styles.inputFieldIconLeft]: iconIsLeft,\n          })}\n          onClick={isSearchCleared ? handleClear : undefined}\n          {...keyboardActivationProps(isSearchCleared ? handleClear : undefined)}\n          aria-label={isSearchCleared ? 'Clear search' : undefined}\n        />\n      )}\n      {type === InputType.Password && (\n        <FontAwesomeIcon icon={isPasswordShown ? passwordShownIcon : passwordHiddenIcon} {...passwordIconProps} />\n      )}\n\n      {((showCancel && currVal && (isFocused || isHovered)) || alwaysShowCancel) && type !== InputType.Search && (\n        <FontAwesomeIcon\n          icon={faXmark}\n          className={styles.inputFieldIcon}\n          onClick={handleClear}\n          onMouseEnter={() => setIsHovered(true)}\n          onMouseLeave={() => setIsHovered(false)}\n          {...keyboardActivationProps(handleClear)}\n          aria-label='Clear'\n        />\n      )}\n    </div>\n  );\n}\n\nexport default Input;\n"],"mappings":"8oBAmBA,SAAS,EAAwB,EAA6D,CACvF,KACL,MAAO,CACL,KAAM,SACN,SAAU,EACV,UAAY,GAA+B,EACrC,EAAM,MAAQ,SAAW,EAAM,MAAQ,OAC3C,EAAM,eAAe,EACrB,EAAW,CAAK,EAClB,CACF,CACF,CAEA,SAAS,GAAM,GAAmB,CAChC,GAAM,CACJ,QAAO,GACP,MACA,QAAQ,GACR,gBAAe,GACf,WAAU,GACV,aAAY,GACZ,SACA,SAAQ,GACR,QAAO,KACP,gBACA,eAAiB,CAAC,EAClB,QAAS,EAAc,KACvB,OAAQ,EAAa,KACrB,aAAc,EAAmB,KACjC,aAAc,GAAmB,KACjC,eAAc,GACd,cAAa,GACb,YAAW,EACX,OAAO,IAAA,GACP,SAAQ,GACR,cAAc,KACd,SAAQ,KACR,gBAAgB,KAChB,aAAY,GACZ,SAAS,KACT,kBAAkB,KAClB,iBAAgB,GAChB,cAAa,GACb,kBACA,OAAM,KACN,OAAM,KACN,cAAc,GACd,mBAAmB,GACnB,oBAAmB,GACnB,gBAAe,KACf,eAAgB,KAChB,WAAW,GACX,cACA,oBAAmB,GACnB,YAAY,GACZ,OACA,aAAa,GACb,aACA,OAAQ,EACR,YAAW,GACX,GAAG,GACD,EAAqB,QAAS,EAAK,EACjC,CAAC,EAAW,GAAgB,EAAS,EAAK,EAG1C,CAAC,GAAc,IAAmB,EAAS,EAAK,EAChD,CAAC,GAAW,GAAgB,EAAS,EAAK,EAC1C,CAAC,EAAiB,IAAsB,EAAS,EAAK,EACtD,EAAG,IAAe,EAAS,CAAC,EAE5B,EAAW,EAA+C,IAAI,EAC9D,EAAQ,EAAO,CAAa,EAE5B,GAAc,GAAM,EACpB,GAAU,IAAM,IAAQ,GAExB,EAAU,EAAgB,EAAc,MAAQ,GAChD,GAAsB,EAAO,EAAK,EAElC,EAAiB,OAAkB,CACvC,IAAM,EAAK,EAAS,QACf,KACL,IAAI,CAAC,EAAY,CAEf,AAEE,GAAoB,WADpB,EAAG,MAAM,OAAS,GACY,IAEhC,MACF,CACA,EAAG,MAAM,OAAS,OAClB,EAAG,MAAM,OAAS,GAAG,EAAG,aAAa,IACrC,GAAoB,QAAU,EAH9B,CAIF,EAAG,CAAC,CAAU,CAAC,EAIf,MAAgB,CACd,EAAe,CACjB,EAAG,CAAC,EAAgB,CAAO,CAAC,EAE5B,MAAgB,CACV,IAAa,EAAS,SACxB,eAAiB,CACf,EAAS,SAAS,MAAM,CAC1B,EAAG,CAAC,CAER,EAAG,CAAC,EAAS,CAAC,EAEd,MAAgB,CACd,EAAM,QAAU,EAChB,IAAM,EAAK,EAAM,QACjB,GAAI,CAAC,EAAI,OACT,EAAG,MAAQ,GAAS,GACpB,EAAG,SAAS,EACZ,IAAM,MAAiB,GAAa,GAAM,EAAI,CAAC,EAE/C,OADA,EAAG,yBAAyB,CAAQ,MACvB,CACX,EAAG,uBAAuB,CAAQ,CACpC,CACF,EAAG,CAAC,EAAe,CAAK,CAAC,EAEzB,IAAM,OACG,EAAgB,EAAc,SAAW,EAAc,SAAS,EAAI,CAAC,IAAW,CAAC,CAAC,GAGrF,OACG,CAAC,EACN,IACC,GACC,EAAc,WAAW,KAAM,GAAO,EAA+B,cAAgB,UAAU,GAI/F,GAAuB,GAA4B,CACvD,EAAa,EAAI,EACb,GAAkB,EAAiB,CAAK,CAC9C,EAEM,GAAuB,GAA4B,CACvD,EAAa,EAAK,EACd,IAAkB,GAAiB,CAAK,CAC9C,EAEM,GAAkB,GAA4B,CAClD,EAAa,EAAI,EACb,GAAa,EAAY,CAAK,CACpC,EAEM,GAAiB,GAA4B,CAC7C,EAAM,UAAS,EAAM,QAAQ,QAAU,IAC3C,EAAa,EAAK,EACd,GAAY,EAAW,CAAK,CAClC,EAEM,GAAmB,GAAoF,CAC3G,IAAI,EACA,EAEA,OAAO,GAAU,SAInB,EAAM,GAHN,EAAc,EACd,EAAM,EAAM,OAAO,OAKjB,KAAO,EAAM,GAAM,CAAG,GACtB,GAAe,EAAc,IAAI,CAAG,EACpC,GAAU,EAAS,EAAK,CAAW,EACvC,EAAe,CACjB,EAEM,OAAyC,CACzC,OAAS,EAAU,MAIvB,OAHI,IAAS,EAAU,MAAc,MACjC,IAAS,EAAU,OAAe,SAClC,IAAS,YAAc,EAAwB,OAC5C,CACT,EAEM,OAA0E,CAC9E,GAAI,IAAS,EAAU,MAAO,MAAO,QACrC,GAAI,IAAS,EAAU,MAAO,MAAO,MACrC,GAAI,IAAS,EAAU,OAAQ,MAAO,QAExC,EAEM,GAAU,GAAQ,IAAS,EAAU,MAAQ,IAAS,EAAU,MAAQ,IAAS,EAAU,UAE3F,GAAuB,IAAS,EAAU,QAAU,IAAS,EAAU,SACvE,EAAgB,CAAC,CAAC,GAClB,GAAoB,GAAiB,CAAC,GAEtC,GAA8B,IAAS,EAAU,OAAS,IAAS,EAAU,OAAS,IAAS,EAAU,OAIzG,GAFJ,KACC,CAAC,GAAoB,GAA8B,EAAkB,KAAO,EAAkB,UACrD,EAAkB,KAExD,EAAY,CAChB,UAAW,EAAG,EAAO,eAAgB,EAClC,EAAO,4BAA6B,CAAC,GACrC,EAAO,oBAAqB,CAC/B,CAAC,EACD,QAAS,GAAe,IAAA,GACxB,GAAG,EAAwB,CAAW,CACxC,EAEM,EAAa,GACb,EAA0B,GAAe,GAAY,MAAM,QAC3D,GACJ,IAAqB,EACjB,GAAM,aAAa,EAAY,CAC7B,UAAW,EACT,EAAO,eACP,EACG,EAAO,4BAA6B,CAAC,GACrC,EAAO,oBAAqB,CAC/B,EACA,EAAW,MAAM,SACnB,EACA,QAAS,EACT,GAAG,EAAwB,CAA8E,CAC3G,CAAC,EACD,KAEA,IAAe,IAAW,IAAkB,EAE5C,GAAoB,CACxB,UAAW,EAAG,EAAO,eAAgB,EAAO,uBAAwB,EAAG,EAAO,oBAAqB,CAAW,CAAC,EAC/G,YAAe,GAAmB,CAAC,CAAe,EAClD,GAAG,MAA8B,GAAmB,CAAC,CAAe,CAAC,EACrE,aAAc,EAAkB,gBAAkB,eACpD,EAEM,EAAS,GAAS,EAEpB,EAAc,EACd,GAAe,GAAmB,IAAG,EAAc,GAAG,EAAY,KACtE,IAAM,GAAe,GAAmB,EAAI,EAAC,OAAD,CAAM,UAAW,EAAO,aAAc,SAAA,GAAO,CAAA,EAAI,KAEvF,EAAY,GAAa,CAAC,EAC1B,EACJ,IAAqB,IAAoB,GAAa,GAAW,IAAgB,IAAS,EAAU,MAEhG,GAA2B,GAAgC,CAC/D,GAAM,CAAE,iBAAkB,EAC1B,GAAI,IAAkB,EAAO,mBAAoB,CAC/C,GAAgB,EAAI,EAGpB,IAAM,EAAU,EAAM,cAAmC,MACrD,GAAU,IAAW,OAAO,GAAW,EAAE,GAAG,GAAgB,CAAM,EACtE,MACF,CACA,GAAI,IAAkB,EAAO,iBAAkB,CAC7C,GAAgB,EAAK,EACrB,MACF,CAGA,EAAK,mBAAmB,CAA+C,CACzE,EAEM,EAAkB,IAAS,EAAU,QAAU,CAAC,CAAC,EAEjD,EAAmB,GAAa,MAEtC,SAAS,GAAc,CACjB,GAAe,EAAc,IAAI,EAAE,EACvC,IAAW,EAAE,EACb,KAAiB,CACnB,CAEA,OACE,EAAC,MAAD,CAAK,UAAW,EAAG,EAAO,MAAO,EAAG,EAAO,eAAgB,EAAY,EAAG,EAAS,EAAU,SAA7F,SAAA,CACE,EAAC,QAAD,CACE,QAAS,GACT,UAAW,EAAG,EAAO,WAAY,GAAY,MAAO,EACjD,EAAO,kBAAmB,CAAC,IAC3B,EAAO,oBAAqB,EAC/B,CAAC,EACD,MAAO,GAAY,MANrB,SAAA,CAQG,GAAS,CAAC,EACT,EAAC,OAAD,CAAM,UAAW,EAAO,eAAxB,SAAA,CACG,EACA,EACG,CACJ,CAAA,EAAA,KACH,GACC,EAAC,MAAD,CACE,UAAW,EAAG,EAAO,qBAAsB,GAAY,eAAe,EACtE,MAAO,GAAY,gBAElB,SAAA,CACE,CAAA,EAEP,EAAC,MAAD,CACE,UAAW,EAAG,EAAO,eAAgB,EAAG,EAAO,yBAA0B,CAAU,EAAG,GAAY,SAAS,EAC3G,MAAO,GAAY,UACnB,aAAc,GACd,aAAc,GAJhB,SAAA,CAMG,GACA,GAAM,aAAa,GAA4B,EAAZ,EAAa,WAAe,QAAhB,CAAW,CAAY,EAAI,CACzE,GAAG,EACH,UAAW,EACT,EAAO,WACP,EACG,EAAO,qBAAsB,IAC7B,EAAO,gBAAiB,IAAS,EAAU,MAC3C,EAAO,mBAAoB,IAAS,EAAU,MAC9C,EAAO,oBAAqB,IAAW,GACvC,EAAO,wBAAyB,IAChC,EAAO,qBAAsB,GAC7B,EAAO,+BAAgC,GAAa,GACpD,EAAO,oBAAqB,GAAY,CAAC,EAC5C,EACA,GAAY,MACZ,GAAkB,SACpB,EACA,MACE,GAAkB,OAAS,GAAY,MACnC,CAAE,GAAG,GAAkB,MAAO,GAAG,GAAY,KAAM,EACnD,IAAA,GACN,QACA,GAAI,GACJ,MAAO,EACP,YACA,IAAK,EAAc,IAAA,GAAY,EAC/B,SAAU,GACV,iBAAkB,GAClB,QAAS,GACT,OAAQ,GACR,YAAc,EAAiC,GAAd,EACjC,gBACA,WACA,WACA,YACA,GAAI,CAAC,GAAa,CAAE,KAAM,GAAa,EAAG,UAAW,EAAK,WAAa,GAAa,EAAG,OAAK,MAAI,EAChG,GAAI,GAAa,IAAS,IAAA,IAAa,CAAE,MAAK,CAChD,CAAC,EACA,GACC,EAAC,MAAD,CAAK,UAAW,EAAG,EAAO,iBAAkB,GAAY,MAAM,EAAG,MAAO,GAAY,OACjF,SAAA,CACE,CAAA,CAEJ,IACL,EAAC,WAAD,CACE,UAAW,EAAG,EAAO,cAAe,GAAY,SAAU,EACvD,EAAO,sBAAuB,CAAC,GAC/B,EAAO,6BAA8B,GACrC,EAAO,mCAAoC,IAAS,EAAU,SAAW,GAAa,CAAC,CAAC,IACxF,EAAO,6BAA8B,GACrC,EAAO,2BAA4B,CACtC,CAAC,EACD,MAAO,GAAY,SAEnB,SAAA,EAAC,SAAD,CACE,UAAW,EAAG,EAAO,oBAAqB,EACvC,EAAO,2BAA4B,CACtC,CAAC,EAED,SAAA,EAAC,OAAD,CAAA,SAAO,CAAkB,CAAA,CACnB,CAAA,CACA,CAAA,EACT,GAAoB,GACnB,EAAC,MAAD,CACE,UAAW,EAAG,EAAO,cAAe,EACjC,EAAO,uBAAwB,GAC/B,EAAO,wBAAyB,GAAa,CAAC,CACjD,CAAC,EAJH,SAAA,CAMG,EACA,EACE,IAEN,GAAoB,GACnB,EAAC,MAAD,CACE,UAAW,EACT,EAAO,iBACP,GAAa,CAAC,GAAW,CAAC,IAAgB,EAAO,sBACjD,GAAa,EAAO,yBACtB,EAEC,SAAA,CACE,CAAA,EAEP,EAAC,EAAD,CACE,QAAQ,QACR,QAAS,EAAgB,EAAc,uBAAuB,EAAI,IAAgB,GAClF,UAAW,IAAW,GAAa,GACpC,CAAA,CACI,IAEN,IAAS,EAAU,OAAS,CAAC,GAAiB,EAAC,EAAD,CAAiB,KAAM,GAAS,GAAI,CAAY,CAAA,EAC9F,IAAS,EAAU,OAAS,CAAC,GAAiB,EAAC,EAAD,CAAiB,KAAM,GAAY,GAAI,CAAY,CAAA,EACjG,IAAS,EAAU,MAAQ,CAAC,GAAiB,EAAC,EAAD,CAAiB,KAAM,GAAO,GAAI,CAAY,CAAA,EAC3F,IAAS,EAAU,QAClB,EAAC,EAAD,CACE,KAAM,EAAkB,GAAU,GAClC,UAAW,EAAG,EAAO,eAAgB,EAClC,EAAO,4BAA6B,CAAC,GACrC,EAAO,oBAAqB,CAC/B,CAAC,EACD,QAAS,EAAkB,EAAc,IAAA,GACzC,GAAI,EAAwB,EAAkB,EAAc,IAAA,EAAS,EACrE,aAAY,EAAkB,eAAiB,IAAA,EAChD,CAAA,EAEF,IAAS,EAAU,UAClB,EAAC,EAAD,CAAiB,KAAM,EAAkB,GAAoB,GAAoB,GAAI,EAAoB,CAAA,GAGxG,IAAc,IAAY,GAAa,KAAe,KAAqB,IAAS,EAAU,QAC/F,EAAC,EAAD,CACE,KAAM,GACN,UAAW,EAAO,eAClB,QAAS,EACT,iBAAoB,EAAa,EAAI,EACrC,iBAAoB,EAAa,EAAK,EACtC,GAAI,EAAwB,CAAW,EACvC,aAAW,OACZ,CAAA,CAEA,GAET"}
+{"version":3,"file":"input.mjs","names":[],"sources":["../../../../package/common/input/input.tsx"],"sourcesContent":["import React, { useState, useEffect, useRef, useCallback, useId } from 'react';\nimport cx from 'classnames';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport {\n  faPhone,\n  faPen,\n  faEnvelope,\n  faSearch,\n  faXmark,\n  faEye as passwordHiddenIcon,\n  faEyeSlash as passwordShownIcon,\n} from '@fortawesome/free-solid-svg-icons';\nimport Tooltip from 'components/common/tooltip';\nimport AnimatedIcon from 'components/common/animatedIcon';\nimport { useComponentDefaults, useLabels } from 'components/common/configProvider';\nimport styles from './input.module.pcss';\nimport type { InputLabels, InputProps } from './input.types';\nimport { InputType, InputIconPosition } from './input.types';\n\nconst DEFAULT_LABELS: Required<InputLabels> = {\n  clear: 'Clear',\n  showPassword: 'Show password',\n  hidePassword: 'Hide password',\n  clearSearch: 'Clear search',\n};\n\nfunction keyboardActivationProps(onActivate?: ((event: React.SyntheticEvent) => void) | null) {\n  if (!onActivate) return undefined;\n  return {\n    role: 'button' as const,\n    tabIndex: 0,\n    onKeyDown: (event: React.KeyboardEvent) => {\n      if (event.key !== 'Enter' && event.key !== ' ') return;\n      event.preventDefault();\n      onActivate(event);\n    },\n  };\n}\n\nfunction Input(props: InputProps) {\n  const {\n    name = '',\n    id,\n    label = '',\n    errorMessage = '',\n    isValid = true,\n    className = '',\n    style,\n    value = '',\n    icon = null,\n    iconPosition,\n    onChange = () => {},\n    onFocus: onFocusProp = null,\n    onBlur: onBlurProp = null,\n    onMouseEnter: onMouseEnterProp = null,\n    onMouseLeave: onMouseLeaveProp = null,\n    isUppercase = false,\n    isRequired = false,\n    tabIndex = 0,\n    type = undefined,\n    isRow = false,\n    onIconClick = null,\n    parse = null,\n    formValidator = null,\n    autoFocus = false,\n    suffix = null,\n    upperRightLabel = null,\n    labelInBorder = false,\n    showCancel = false,\n    onClearClicked,\n    min = null,\n    max = null,\n    placeholder = '',\n    useMatLabelStyle = true,\n    alwaysFloatLabel = false,\n    autoComplete = null,\n    onClick = () => null,\n    readOnly = false,\n    customInput,\n    alwaysShowCancel = false,\n    multiline = false,\n    rows,\n    autoResize = false,\n    classNames,\n    styles: slotStyles,\n    disabled = false,\n    labels,\n    ...rest\n  } = useComponentDefaults('Input', props);\n  const text = useLabels('Input', labels, DEFAULT_LABELS);\n  const [isFocused, setIsFocused] = useState(false);\n  // Chrome fills a field on page load without firing anything React sees. The animation the\n  // stylesheet binds to :-webkit-autofill is the only notification it gives.\n  const [isAutofilled, setIsAutofilled] = useState(false);\n  const [isHovered, setIsHovered] = useState(false);\n  const [isPasswordShown, setIsPasswordShown] = useState(false);\n  const [, forceUpdate] = useState(0);\n\n  const inputRef = useRef<HTMLInputElement | HTMLTextAreaElement>(null);\n  const fvRef = useRef(formValidator);\n\n  const generatedId = useId();\n  const inputId = id || name || generatedId;\n\n  const currVal = formValidator ? formValidator.value : value;\n  const didSetAutoHeightRef = useRef(false);\n\n  const resizeTextarea = useCallback(() => {\n    const el = inputRef.current;\n    if (!el) return;\n    if (!autoResize) {\n      // Only undo a height this set, so an explicit one from `styles.input` survives.\n      if (didSetAutoHeightRef.current) {\n        el.style.height = '';\n        didSetAutoHeightRef.current = false;\n      }\n      return;\n    }\n    el.style.height = 'auto';\n    el.style.height = `${el.scrollHeight}px`;\n    didSetAutoHeightRef.current = true;\n  }, [autoResize]);\n\n  // `currVal` is a dependency because the value can change without passing through\n  // `onChangeHandler`: the clear button, a parent resetting it, or `formValidator.set` elsewhere.\n  useEffect(() => {\n    resizeTextarea();\n  }, [resizeTextarea, currVal]);\n\n  useEffect(() => {\n    if (autoFocus && inputRef.current) {\n      setTimeout(() => {\n        inputRef.current?.focus();\n      }, 1);\n    }\n  }, [autoFocus]);\n\n  useEffect(() => {\n    fvRef.current = formValidator;\n    const fv = fvRef.current;\n    if (!fv) return;\n    fv.label = label ?? '';\n    fv.validate();\n    const listener = () => forceUpdate((n) => n + 1);\n    fv.registerOnUpdateListener(listener);\n    return () => {\n      fv.removeOnUpdateListener(listener);\n    };\n  }, [formValidator, label]);\n\n  const hasError = (): boolean => {\n    return formValidator ? formValidator.touched && formValidator.hasError() : !isValid || !!errorMessage;\n  };\n\n  const computedIsRequired = (): boolean => {\n    return !!(\n      isRequired ||\n      (formValidator &&\n        formValidator.validators.find((v) => (v as { validatorId?: string }).validatorId === 'required'))\n    );\n  };\n\n  const onMouseEnterHandler = (event: React.MouseEvent) => {\n    setIsHovered(true);\n    if (onMouseEnterProp) onMouseEnterProp(event);\n  };\n\n  const onMouseLeaveHandler = (event: React.MouseEvent) => {\n    setIsHovered(false);\n    if (onMouseLeaveProp) onMouseLeaveProp(event);\n  };\n\n  const onFocusHandler = (event: React.FocusEvent) => {\n    setIsFocused(true);\n    if (onFocusProp) onFocusProp(event);\n  };\n\n  const onBlurHandler = (event: React.FocusEvent) => {\n    if (fvRef.current) fvRef.current.touched = true;\n    setIsFocused(false);\n    if (onBlurProp) onBlurProp(event);\n  };\n\n  const onChangeHandler = (event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement> | string): void => {\n    let parsedEvent: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement> | undefined;\n    let val: string;\n\n    if (typeof event !== 'string') {\n      parsedEvent = event;\n      val = event.target.value;\n    } else {\n      val = event;\n    }\n\n    if (parse) val = parse(val);\n    if (formValidator) formValidator.set(val);\n    if (onChange) onChange(val, parsedEvent);\n    resizeTextarea();\n  };\n\n  const getInputType = (): string | undefined => {\n    if (type === InputType.Email) return undefined;\n    if (type === InputType.Phone) return 'tel';\n    if (type === InputType.Search) return 'search';\n    if (type === 'password' && isPasswordShown) return 'text';\n    return type;\n  };\n\n  const getInputMode = (): React.HTMLAttributes<HTMLInputElement>['inputMode'] => {\n    if (type === InputType.Email) return 'email';\n    if (type === InputType.Phone) return 'tel';\n    if (type === InputType.Search) return 'search';\n    return undefined;\n  };\n\n  const hasIcon = type && type !== InputType.Date && type !== InputType.Iban && type !== InputType.HasNoIcon;\n\n  const isFunctionalIconType = type === InputType.Search || type === InputType.Password;\n  const hasCustomIcon = !!icon;\n  const customIconApplies = hasCustomIcon && !isFunctionalIconType;\n\n  const defaultsLeftWithoutMatLabel = type === InputType.Email || type === InputType.Phone || type === InputType.Search;\n  const resolvedIconPosition =\n    iconPosition ??\n    (!useMatLabelStyle && defaultsLeftWithoutMatLabel ? InputIconPosition.Left : InputIconPosition.Right);\n  const iconIsLeft = resolvedIconPosition === InputIconPosition.Left;\n\n  const iconProps = {\n    className: cx(styles.inputFieldIcon, {\n      [styles.inputFieldIconNotClickable]: !onIconClick,\n      [styles.inputFieldIconLeft]: iconIsLeft,\n    }),\n    onClick: onIconClick ?? undefined,\n    ...keyboardActivationProps(onIconClick),\n  };\n\n  const customIcon = icon as React.ReactElement<{ className?: string; onClick?: React.MouseEventHandler }> | null;\n  const resolvedCustomIconClick = onIconClick ?? customIcon?.props.onClick;\n  const renderedIcon =\n    customIconApplies && customIcon\n      ? React.cloneElement(customIcon, {\n          className: cx(\n            styles.inputFieldIcon,\n            {\n              [styles.inputFieldIconNotClickable]: !resolvedCustomIconClick,\n              [styles.inputFieldIconLeft]: iconIsLeft,\n            },\n            customIcon.props.className,\n          ),\n          onClick: resolvedCustomIconClick,\n          ...keyboardActivationProps(resolvedCustomIconClick as ((event: React.SyntheticEvent) => void) | undefined),\n        })\n      : null;\n\n  const hasLeftIcon = (hasIcon || hasCustomIcon) && iconIsLeft;\n\n  const passwordIconProps = {\n    className: cx(styles.inputFieldIcon, styles.inputFieldIconPassword, { [styles.inputFieldIconLeft]: iconIsLeft }),\n    onClick: () => setIsPasswordShown(!isPasswordShown),\n    ...keyboardActivationProps(() => setIsPasswordShown(!isPasswordShown)),\n    'aria-label': isPasswordShown ? text.hidePassword : text.showPassword,\n  };\n\n  const hasErr = hasError();\n\n  let editedLabel = label;\n  if (editedLabel && computedIsRequired()) editedLabel = `${editedLabel} *`;\n  const requiredMark = computedIsRequired() ? <span className={styles.requiredMark}>*</span> : null;\n\n  const showFocus = isFocused && !readOnly;\n  const shouldFloatLabel =\n    useMatLabelStyle && (alwaysFloatLabel || showFocus || currVal || isAutofilled || type === InputType.Date);\n\n  const handleAutofillAnimation = (event: React.AnimationEvent) => {\n    const { animationName } = event;\n    if (animationName === styles.inputAutofillStart) {\n      setIsAutofilled(true);\n      // The field is controlled, so the commit this triggers would write `value` back over\n      // what the browser just put there and blank it. Replay it as an ordinary change first.\n      const filled = (event.currentTarget as HTMLInputElement).value;\n      if (filled && filled !== String(currVal ?? '')) onChangeHandler(filled);\n      return;\n    }\n    if (animationName === styles.inputAutofillEnd) {\n      setIsAutofilled(false);\n      return;\n    }\n    // Not ours. `onAnimationStart` arrives through `rest`, and the consumer must not receive\n    // the two above: the `:not()` rule fires one of them on every mount.\n    rest.onAnimationStart?.(event as React.AnimationEvent<HTMLInputElement>);\n  };\n\n  const isSearchCleared = type === InputType.Search && !!currVal;\n\n  const customInputProps = customInput?.props as { className?: string; style?: React.CSSProperties } | undefined;\n\n  function handleClear() {\n    if (formValidator) formValidator.set('');\n    onChange?.('');\n    onClearClicked?.();\n  }\n\n  return (\n    <div className={cx(styles.input, { [styles.inputIconLeft]: hasLeftIcon }, className)} style={style}>\n      <label\n        htmlFor={inputId}\n        className={cx(styles.inputLabel, classNames?.label, {\n          [styles.inputLabelColumn]: !isRow,\n          [styles.inputLabelInBorder]: labelInBorder,\n        })}\n        style={slotStyles?.label}\n      >\n        {label && !useMatLabelStyle ? (\n          <span className={styles.inputLabelText}>\n            {label}\n            {requiredMark}\n          </span>\n        ) : null}\n        {upperRightLabel && (\n          <div\n            className={cx(styles.inputUpperRightLabel, classNames?.upperRightLabel)}\n            style={slotStyles?.upperRightLabel}\n          >\n            {upperRightLabel}\n          </div>\n        )}\n        <div\n          className={cx(styles.inputContainer, { [styles.inputContainerMultiline]: multiline }, classNames?.container)}\n          style={slotStyles?.container}\n          onMouseEnter={onMouseEnterHandler}\n          onMouseLeave={onMouseLeaveHandler}\n        >\n          {renderedIcon}\n          {React.cloneElement(customInput || (multiline ? <textarea /> : <input />), {\n            ...rest,\n            className: cx(\n              styles.inputField,\n              {\n                [styles.inputFieldUppercase]: isUppercase,\n                [styles.inputFieldDate]: type === InputType.Date,\n                [styles.inputFieldDefault]: type !== InputType.Date,\n                [styles.inputFieldWithIcon]: hasIcon || hasCustomIcon,\n                [styles.inputFieldWithIconLeft]: hasLeftIcon,\n                [styles.inputFieldMultiline]: multiline,\n                [styles.inputFieldMultilineAutoResize]: multiline && autoResize,\n                [styles.inputFieldReadOnly]: readOnly && !disabled,\n              },\n              classNames?.input,\n              customInputProps?.className,\n            ),\n            style:\n              customInputProps?.style || slotStyles?.input\n                ? { ...customInputProps?.style, ...slotStyles?.input }\n                : undefined,\n            name,\n            id: inputId,\n            value: currVal,\n            tabIndex,\n            ref: customInput ? undefined : inputRef,\n            onChange: onChangeHandler,\n            onAnimationStart: handleAutofillAnimation,\n            onFocus: onFocusHandler,\n            onBlur: onBlurHandler,\n            placeholder: !useMatLabelStyle ? placeholder : '',\n            autoComplete,\n            onClick,\n            readOnly,\n            disabled,\n            ...(!multiline && { type: getInputType(), inputMode: rest.inputMode ?? getInputMode(), min, max }),\n            ...(multiline && rows !== undefined && { rows }),\n          })}\n          {suffix && (\n            <div className={cx(styles.inputFieldSuffix, classNames?.suffix)} style={slotStyles?.suffix}>\n              {suffix}\n            </div>\n          )}\n        </div>\n        <fieldset\n          className={cx(styles.inputFieldset, classNames?.fieldset, {\n            [styles.inputFieldsetNoNotch]: !label,\n            [styles.inputContainerBorderFocused]: showFocus,\n            [styles.inputContainerBorderSearchFocused]: type === InputType.Search && (showFocus || !!currVal),\n            [styles.inputContainerBorderInvalid]: hasErr,\n            [styles.inputContainerBorderError]: hasErr,\n          })}\n          style={slotStyles?.fieldset}\n        >\n          <legend\n            className={cx(styles.inputFieldsetLegend, {\n              [styles.inputFieldsetLegendActive]: shouldFloatLabel,\n            })}\n          >\n            <span>{editedLabel}</span>\n          </legend>\n        </fieldset>\n        {useMatLabelStyle && label && (\n          <div\n            className={cx(styles.inputMatLabel, {\n              [styles.inputMatLabelFloating]: shouldFloatLabel,\n              [styles.inputMatLabelMultiline]: multiline && !shouldFloatLabel,\n            })}\n          >\n            {label}\n            {requiredMark}\n          </div>\n        )}\n        {useMatLabelStyle && placeholder && (\n          <div\n            className={cx(\n              styles.inputPlaceholder,\n              showFocus && !currVal && !isAutofilled && styles.inputPlaceholderShown,\n              multiline && styles.inputPlaceholderMultiline,\n            )}\n          >\n            {placeholder}\n          </div>\n        )}\n        <Tooltip\n          variant='error'\n          message={formValidator ? formValidator.getCurrentErrorMessage() : errorMessage || ''}\n          isVisible={hasErr && (isFocused || isHovered)}\n        />\n      </label>\n\n      {type === InputType.Phone && !hasCustomIcon && <FontAwesomeIcon icon={faPhone} {...iconProps} />}\n      {type === InputType.Email && !hasCustomIcon && <FontAwesomeIcon icon={faEnvelope} {...iconProps} />}\n      {type === InputType.Edit && !hasCustomIcon && <FontAwesomeIcon icon={faPen} {...iconProps} />}\n      {type === InputType.Search && (\n        <AnimatedIcon\n          icon={isSearchCleared ? faXmark : faSearch}\n          className={cx(styles.inputFieldIcon, {\n            [styles.inputFieldIconNotClickable]: !isSearchCleared,\n            [styles.inputFieldIconLeft]: iconIsLeft,\n          })}\n          onClick={isSearchCleared ? handleClear : undefined}\n          {...keyboardActivationProps(isSearchCleared ? handleClear : undefined)}\n          aria-label={isSearchCleared ? text.clearSearch : undefined}\n        />\n      )}\n      {type === InputType.Password && (\n        <FontAwesomeIcon icon={isPasswordShown ? passwordShownIcon : passwordHiddenIcon} {...passwordIconProps} />\n      )}\n\n      {((showCancel && currVal && (isFocused || isHovered)) || alwaysShowCancel) && type !== InputType.Search && (\n        <FontAwesomeIcon\n          icon={faXmark}\n          className={styles.inputFieldIcon}\n          onClick={handleClear}\n          onMouseEnter={() => setIsHovered(true)}\n          onMouseLeave={() => setIsHovered(false)}\n          {...keyboardActivationProps(handleClear)}\n          aria-label={text.clear}\n        />\n      )}\n    </div>\n  );\n}\n\nexport default Input;\n"],"mappings":"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"}

package/dist/esm/common/input/input.types.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"input.types.mjs","names":[],"sources":["../../../../package/common/input/input.types.ts"],"sourcesContent":["import React from 'react';\nimport type { FormValidator } from 'services/formValidation';\nimport type { SlotClassNames, SlotStyles, DataProps } from '../types/slots.types';\n\nexport enum InputType {\n  Edit = 'edit',\n  Phone = 'phone',\n  Email = 'email',\n  Iban = 'iban',\n  Date = 'date',\n  HasNoIcon = 'hasNoIcon',\n  Search = 'searchInput',\n  Password = 'password',\n}\n\nexport enum InputIconPosition {\n  Left = 'left',\n  Right = 'right',\n}\n\nexport type InputSlots = 'label' | 'container' | 'input' | 'suffix' | 'upperRightLabel' | 'fieldset';\n\ntype OverriddenInputAttributes =\n  | 'onChange'\n  | 'onFocus'\n  | 'onBlur'\n  | 'onMouseEnter'\n  | 'onMouseLeave'\n  | 'onClick'\n  | 'type'\n  | 'value'\n  | 'min'\n  | 'max'\n  | 'autoComplete';\n\nexport interface InputProps\n  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, OverriddenInputAttributes>, DataProps {\n  onMouseEnter?: ((event: React.MouseEvent) => void) | null;\n  onMouseLeave?: ((event: React.MouseEvent) => void) | null;\n  onFocus?: ((event: React.FocusEvent) => void) | null;\n  onBlur?: ((event: React.FocusEvent) => void) | null;\n  onChange?:\n    | ((value: string, event?: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement, Element>) => void)\n    | null;\n  errorMessage?: string;\n  isValid?: boolean;\n  isRequired?: boolean;\n  label?: string;\n  name?: string;\n  className?: string;\n  style?: React.CSSProperties;\n  value?: string | number;\n  icon?: React.ReactElement | null;\n  iconPosition?: InputIconPosition;\n  isUppercase?: boolean;\n  isRow?: boolean;\n  tabIndex?: number;\n  type?: InputType;\n  onIconClick?: (() => void) | null;\n  parse?: ((value: string) => string) | null;\n  suffix?: string | React.ReactNode;\n  disabled?: boolean;\n  upperRightLabel?: string | React.ReactNode;\n  labelInBorder?: boolean;\n  showCancel?: boolean;\n  onClearClicked?: (() => void) | null;\n  min?: string | number | null;\n  max?: string | number | null;\n  placeholder?: string;\n  useMatLabelStyle?: boolean;\n  alwaysFloatLabel?: boolean;\n  autoComplete?: string | null;\n  onClick?: (() => void) | null;\n  readOnly?: boolean;\n  customInput?: React.ReactElement | null;\n  autoFocus?: boolean;\n  alwaysShowCancel?: boolean;\n  formValidator?: FormValidator | null;\n  multiline?: boolean;\n  rows?: number;\n  autoResize?: boolean;\n  classNames?: SlotClassNames<InputSlots>;\n  styles?: SlotStyles<InputSlots>;\n}\n"],"mappings":"AAIA,IAAY,EAAL,SAAA,EAAA,OACL,GAAA,KAAA,OACA,EAAA,MAAA,QACA,EAAA,MAAA,QACA,EAAA,KAAA,OACA,EAAA,KAAA,OACA,EAAA,UAAA,YACA,EAAA,OAAA,cACA,EAAA,SAAA,YACF,EAAA,CAAA,CAAA,EAEY,EAAL,SAAA,EAAA,OACL,GAAA,KAAA,OACA,EAAA,MAAA,SACF,EAAA,CAAA,CAAA"}
+{"version":3,"file":"input.types.mjs","names":[],"sources":["../../../../package/common/input/input.types.ts"],"sourcesContent":["import React from 'react';\nimport type { FormValidator } from 'services/formValidation';\nimport type { SlotClassNames, SlotStyles, DataProps } from '../types/slots.types';\n\nexport enum InputType {\n  Edit = 'edit',\n  Phone = 'phone',\n  Email = 'email',\n  Iban = 'iban',\n  Date = 'date',\n  HasNoIcon = 'hasNoIcon',\n  Search = 'searchInput',\n  Password = 'password',\n}\n\nexport enum InputIconPosition {\n  Left = 'left',\n  Right = 'right',\n}\n\nexport type InputSlots = 'label' | 'container' | 'input' | 'suffix' | 'upperRightLabel' | 'fieldset';\n\ntype OverriddenInputAttributes =\n  | 'onChange'\n  | 'onFocus'\n  | 'onBlur'\n  | 'onMouseEnter'\n  | 'onMouseLeave'\n  | 'onClick'\n  | 'type'\n  | 'value'\n  | 'min'\n  | 'max'\n  | 'autoComplete';\n\n/** Text Input renders of its own, for translating it. */\nexport interface InputLabels {\n  /** Clear button on a search input, read out by screen readers. */\n  clear?: string;\n  /** Reveals a password, read out by screen readers. */\n  showPassword?: string;\n  /** Hides a password again. */\n  hidePassword?: string;\n  /** Clears a search input, read out by screen readers. */\n  clearSearch?: string;\n}\n\nexport interface InputProps\n  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, OverriddenInputAttributes>, DataProps {\n  onMouseEnter?: ((event: React.MouseEvent) => void) | null;\n  onMouseLeave?: ((event: React.MouseEvent) => void) | null;\n  onFocus?: ((event: React.FocusEvent) => void) | null;\n  onBlur?: ((event: React.FocusEvent) => void) | null;\n  onChange?:\n    | ((value: string, event?: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement, Element>) => void)\n    | null;\n  errorMessage?: string;\n  isValid?: boolean;\n  isRequired?: boolean;\n  label?: string;\n  name?: string;\n  className?: string;\n  style?: React.CSSProperties;\n  value?: string | number;\n  icon?: React.ReactElement | null;\n  iconPosition?: InputIconPosition;\n  isUppercase?: boolean;\n  isRow?: boolean;\n  tabIndex?: number;\n  type?: InputType;\n  onIconClick?: (() => void) | null;\n  parse?: ((value: string) => string) | null;\n  suffix?: string | React.ReactNode;\n  disabled?: boolean;\n  upperRightLabel?: string | React.ReactNode;\n  labelInBorder?: boolean;\n  showCancel?: boolean;\n  onClearClicked?: (() => void) | null;\n  min?: string | number | null;\n  max?: string | number | null;\n  placeholder?: string;\n  useMatLabelStyle?: boolean;\n  alwaysFloatLabel?: boolean;\n  autoComplete?: string | null;\n  onClick?: (() => void) | null;\n  readOnly?: boolean;\n  customInput?: React.ReactElement | null;\n  autoFocus?: boolean;\n  alwaysShowCancel?: boolean;\n  formValidator?: FormValidator | null;\n  multiline?: boolean;\n  rows?: number;\n  autoResize?: boolean;\n  classNames?: SlotClassNames<InputSlots>;\n  styles?: SlotStyles<InputSlots>;\n  /** Overrides the text Input renders of its own. Merged per key. */\n  labels?: InputLabels;\n}\n"],"mappings":"AAIA,IAAY,EAAL,SAAA,EAAA,OACL,GAAA,KAAA,OACA,EAAA,MAAA,QACA,EAAA,MAAA,QACA,EAAA,KAAA,OACA,EAAA,KAAA,OACA,EAAA,UAAA,YACA,EAAA,OAAA,cACA,EAAA,SAAA,YACF,EAAA,CAAA,CAAA,EAEY,EAAL,SAAA,EAAA,OACL,GAAA,KAAA,OACA,EAAA,MAAA,SACF,EAAA,CAAA,CAAA"}

package/dist/esm/common/klipyPicker/klipyPicker.mjs

@@ -1,2 +1,2 @@
-import e from"../actionButtons/actionButtons.module.mjs";import{ButtonStyleType as t}from"../button/button.types.mjs";import n from"../button/button.mjs";import{Align as r}from"../floatingMenu/floatingMenu.types.mjs";import i from"../floatingMenu/floatingMenu.mjs";import a from"../chip/chip.mjs";import o from"../chip/chipContainer.mjs";import s from"../modal/modal.mjs";import c from"../../services/klipy.mjs";import l from"../searchInput/searchInput.mjs";import u from"./components/gifPreview/gifPreview.mjs";import d from"./components/gifView/gifView.mjs";import f from"./klipyPicker.module.mjs";import{useMemo as p,useState as m}from"react";import h from"classnames";import{Fragment as g,jsx as _,jsxs as v}from"react/jsx-runtime";function y({className:y,token:b=``,isModal:x=!1,onSelect:S=()=>void 0,selected:C=null}){let w=p(()=>new c(b),[b]),[T,E]=m(``),[D,O]=m([]),[k,A]=m([]),[j,M]=m(null),[N,P]=m(!1);async function F(e){if(E(e),!e.trim()){O([]),A([]),M(null);return}let[{results:t=[],next:n=null},{results:r=[]}]=await Promise.all([w.search(e,{limit:18,contentfilter:`medium`}),w.searchSuggestions(e)]);O(t),M(n),A(r)}async function I(){let{results:e=[],next:t=null}=await w.search(T,{limit:36,pos:j??void 0,contentfilter:`medium`});M(t),O(t=>[...t,...e])}async function L(e){await S(e),P(!1),e&&w.registerShare(T,e.id)}function R(){return _(o,{inline:!0,className:f.klipyPickerSuggestionsContainer,children:k.map(e=>_(a,{className:f.klipyPickerSuggestionsItem,text:e,onClick:()=>F(e)},e))})}function z(){return _(u,{previewItems:D,onSelect:L,onLoadAdditional:I})}function B(){return _(l,{label:`Pick gif`,value:T,onDebounce:F,onChange:E})}return x?v(`div`,{className:h(f.klipyPicker,y),children:[v(`div`,{className:e.actionButtons,children:[_(n,{onClick:()=>P(!0),children:`Pick gif`}),C&&_(n,{styleType:t.Delete,onClick:()=>L(null),children:`Remove gif`})]}),C&&_(d,{className:f.klipyPickerSelected,src:C}),_(s,{isOpen:N,onClose:()=>P(!1),children:v(`div`,{className:f.klipyPickerModalContent,children:[B(),R(),z()]})})]}):v(`div`,{className:h(f.klipyPicker,y),children:[_(i,{align:r.Left,isOpen:D.length>0&&N,onOpenChange:P,dontCloseOnChildClick:!0,content:v(g,{children:[R(),z()]}),children:B()}),C&&_(n,{styleType:t.Delete,onClick:()=>L(null),children:`Remove gif`}),C&&_(d,{className:f.klipyPickerSelected,src:C})]})}export{y as default};
+import{useLabels as e}from"../configProvider/useLabels.mjs";import t from"../actionButtons/actionButtons.module.mjs";import{ButtonStyleType as n}from"../button/button.types.mjs";import r from"../button/button.mjs";import{Align as i}from"../floatingMenu/floatingMenu.types.mjs";import a from"../floatingMenu/floatingMenu.mjs";import o from"../chip/chip.mjs";import s from"../chip/chipContainer.mjs";import c from"../modal/modal.mjs";import l from"../../services/klipy.mjs";import u from"../searchInput/searchInput.mjs";import d from"./components/gifPreview/gifPreview.mjs";import f from"./components/gifView/gifView.mjs";import p from"./klipyPicker.module.mjs";import{useMemo as m,useState as h}from"react";import g from"classnames";import{Fragment as _,jsx as v,jsxs as y}from"react/jsx-runtime";var b={search:`Pick gif`};function x({className:x,token:S=``,isModal:C=!1,onSelect:w=()=>void 0,selected:T=null,labels:E}){let D=e(`KlipyPicker`,E,b),O=m(()=>new l(S),[S]),[k,A]=h(``),[j,M]=h([]),[N,P]=h([]),[F,I]=h(null),[L,R]=h(!1);async function z(e){if(A(e),!e.trim()){M([]),P([]),I(null);return}let[{results:t=[],next:n=null},{results:r=[]}]=await Promise.all([O.search(e,{limit:18,contentfilter:`medium`}),O.searchSuggestions(e)]);M(t),I(n),P(r)}async function B(){let{results:e=[],next:t=null}=await O.search(k,{limit:36,pos:F??void 0,contentfilter:`medium`});I(t),M(t=>[...t,...e])}async function V(e){await w(e),R(!1),e&&O.registerShare(k,e.id)}function H(){return v(s,{inline:!0,className:p.klipyPickerSuggestionsContainer,children:N.map(e=>v(o,{className:p.klipyPickerSuggestionsItem,text:e,onClick:()=>z(e)},e))})}function U(){return v(d,{previewItems:j,onSelect:V,onLoadAdditional:B})}function W(){return v(u,{label:D.search,value:k,onDebounce:z,onChange:A})}return C?y(`div`,{className:g(p.klipyPicker,x),children:[y(`div`,{className:t.actionButtons,children:[v(r,{onClick:()=>R(!0),children:`Pick gif`}),T&&v(r,{styleType:n.Delete,onClick:()=>V(null),children:`Remove gif`})]}),T&&v(f,{className:p.klipyPickerSelected,src:T}),v(c,{isOpen:L,onClose:()=>R(!1),children:y(`div`,{className:p.klipyPickerModalContent,children:[W(),H(),U()]})})]}):y(`div`,{className:g(p.klipyPicker,x),children:[v(a,{align:i.Left,isOpen:j.length>0&&L,onOpenChange:R,dontCloseOnChildClick:!0,content:y(_,{children:[H(),U()]}),children:W()}),T&&v(r,{styleType:n.Delete,onClick:()=>V(null),children:`Remove gif`}),T&&v(f,{className:p.klipyPickerSelected,src:T})]})}export{x as default};
 //# sourceMappingURL=klipyPicker.mjs.map

package/dist/esm/common/klipyPicker/klipyPicker.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"klipyPicker.mjs","names":[],"sources":["../../../../package/common/klipyPicker/klipyPicker.tsx"],"sourcesContent":["import { useMemo, useState } from 'react';\nimport cx from 'classnames';\nimport type { ReactElement, ReactNode } from 'react';\nimport KlipyService from 'services/klipy';\nimport type { KlipyResult } from 'services/klipy';\nimport SearchInput from '../searchInput';\nimport GifPreview from './components/gifPreview';\nimport FloatingMenu from '../floatingMenu';\nimport Button, { ButtonStyleType } from '../button';\nimport Modal from '../modal';\nimport Chip, { ChipContainer } from '../chip';\nimport GifView from './components/gifView';\nimport type { KlipyPickerProps } from './klipyPicker.types';\nimport styles from './klipyPicker.module.pcss';\nimport actionButtonStyles from 'components/common/actionButtons/actionButtons.module.pcss';\nimport { Align } from '../floatingMenu/floatingMenu.types';\n\nexport default function KlipyPicker({\n  className,\n  token = '',\n  isModal = false,\n  onSelect = () => undefined,\n  selected = null,\n}: KlipyPickerProps): ReactElement {\n  const klipyService = useMemo(() => new KlipyService(token), [token]);\n\n  const [searchText, setSearchText] = useState('');\n  const [currentPreviews, setCurrentPreviews] = useState<KlipyResult[]>([]);\n  const [currentSuggestions, setCurrentSuggestions] = useState<string[]>([]);\n  const [lastNext, setLastNext] = useState<string | null>(null);\n  const [isMenuOpen, setIsMenuOpen] = useState(false);\n\n  async function searchFor(query: string) {\n    setSearchText(query);\n    if (!query.trim()) {\n      setCurrentPreviews([]);\n      setCurrentSuggestions([]);\n      setLastNext(null);\n      return;\n    }\n    const [{ results: searchResults = [], next = null }, { results: suggestionResults = [] }] = await Promise.all([\n      klipyService.search(query, { limit: 18, contentfilter: 'medium' }),\n      klipyService.searchSuggestions(query),\n    ]);\n    setCurrentPreviews(searchResults);\n    setLastNext(next);\n    setCurrentSuggestions(suggestionResults);\n  }\n\n  async function handleLoadAdditional() {\n    const { results: searchResults = [], next = null } = await klipyService.search(searchText, {\n      limit: 36,\n      pos: lastNext ?? undefined,\n      contentfilter: 'medium',\n    });\n    setLastNext(next);\n    setCurrentPreviews((prev) => [...prev, ...searchResults]);\n  }\n\n  async function handlePreviewSelect(preview: KlipyResult | null) {\n    await onSelect(preview);\n    setIsMenuOpen(false);\n    if (preview) klipyService.registerShare(searchText, preview.id);\n  }\n\n  function renderSuggestions(): ReactNode {\n    return (\n      <ChipContainer inline className={styles.klipyPickerSuggestionsContainer}>\n        {currentSuggestions.map((suggestion) => (\n          <Chip\n            className={styles.klipyPickerSuggestionsItem}\n            key={suggestion}\n            text={suggestion}\n            onClick={() => searchFor(suggestion)}\n          />\n        ))}\n      </ChipContainer>\n    );\n  }\n\n  function renderPreviewPicker(): ReactNode {\n    return (\n      <GifPreview\n        previewItems={currentPreviews}\n        onSelect={handlePreviewSelect}\n        onLoadAdditional={handleLoadAdditional}\n      />\n    );\n  }\n\n  function renderSearchInput(): ReactNode {\n    return <SearchInput label='Pick gif' value={searchText} onDebounce={searchFor} onChange={setSearchText} />;\n  }\n\n  if (isModal) {\n    return (\n      <div className={cx(styles.klipyPicker, className)}>\n        <div className={actionButtonStyles.actionButtons}>\n          <Button onClick={() => setIsMenuOpen(true)}>Pick gif</Button>\n          {selected && (\n            <Button styleType={ButtonStyleType.Delete} onClick={() => handlePreviewSelect(null)}>\n              Remove gif\n            </Button>\n          )}\n        </div>\n        {selected && <GifView className={styles.klipyPickerSelected} src={selected} />}\n        <Modal isOpen={isMenuOpen} onClose={() => setIsMenuOpen(false)}>\n          <div className={styles.klipyPickerModalContent}>\n            {renderSearchInput()}\n            {renderSuggestions()}\n            {renderPreviewPicker()}\n          </div>\n        </Modal>\n      </div>\n    );\n  }\n\n  return (\n    <div className={cx(styles.klipyPicker, className)}>\n      <FloatingMenu\n        align={Align.Left}\n        isOpen={currentPreviews.length > 0 && isMenuOpen}\n        onOpenChange={setIsMenuOpen}\n        dontCloseOnChildClick\n        content={\n          <>\n            {renderSuggestions()}\n            {renderPreviewPicker()}\n          </>\n        }\n      >\n        {renderSearchInput()}\n      </FloatingMenu>\n      {selected && (\n        <Button styleType={ButtonStyleType.Delete} onClick={() => handlePreviewSelect(null)}>\n          Remove gif\n        </Button>\n      )}\n      {selected && <GifView className={styles.klipyPickerSelected} src={selected} />}\n    </div>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"klipyPicker.mjs","names":[],"sources":["../../../../package/common/klipyPicker/klipyPicker.tsx"],"sourcesContent":["import { useMemo, useState } from 'react';\nimport cx from 'classnames';\nimport type { ReactElement, ReactNode } from 'react';\nimport KlipyService from 'services/klipy';\nimport type { KlipyResult } from 'services/klipy';\nimport SearchInput from '../searchInput';\nimport GifPreview from './components/gifPreview';\nimport FloatingMenu from '../floatingMenu';\nimport Button, { ButtonStyleType } from '../button';\nimport Modal from '../modal';\nimport Chip, { ChipContainer } from '../chip';\nimport GifView from './components/gifView';\nimport type { KlipyPickerLabels, KlipyPickerProps } from './klipyPicker.types';\nimport { useLabels } from '../configProvider';\n\nconst DEFAULT_LABELS: Required<KlipyPickerLabels> = {\n  search: 'Pick gif',\n};\nimport styles from './klipyPicker.module.pcss';\nimport actionButtonStyles from 'components/common/actionButtons/actionButtons.module.pcss';\nimport { Align } from '../floatingMenu/floatingMenu.types';\n\nexport default function KlipyPicker({\n  className,\n  token = '',\n  isModal = false,\n  onSelect = () => undefined,\n  selected = null,\n  labels,\n}: KlipyPickerProps): ReactElement {\n  const text = useLabels('KlipyPicker', labels, DEFAULT_LABELS);\n  const klipyService = useMemo(() => new KlipyService(token), [token]);\n\n  const [searchText, setSearchText] = useState('');\n  const [currentPreviews, setCurrentPreviews] = useState<KlipyResult[]>([]);\n  const [currentSuggestions, setCurrentSuggestions] = useState<string[]>([]);\n  const [lastNext, setLastNext] = useState<string | null>(null);\n  const [isMenuOpen, setIsMenuOpen] = useState(false);\n\n  async function searchFor(query: string) {\n    setSearchText(query);\n    if (!query.trim()) {\n      setCurrentPreviews([]);\n      setCurrentSuggestions([]);\n      setLastNext(null);\n      return;\n    }\n    const [{ results: searchResults = [], next = null }, { results: suggestionResults = [] }] = await Promise.all([\n      klipyService.search(query, { limit: 18, contentfilter: 'medium' }),\n      klipyService.searchSuggestions(query),\n    ]);\n    setCurrentPreviews(searchResults);\n    setLastNext(next);\n    setCurrentSuggestions(suggestionResults);\n  }\n\n  async function handleLoadAdditional() {\n    const { results: searchResults = [], next = null } = await klipyService.search(searchText, {\n      limit: 36,\n      pos: lastNext ?? undefined,\n      contentfilter: 'medium',\n    });\n    setLastNext(next);\n    setCurrentPreviews((prev) => [...prev, ...searchResults]);\n  }\n\n  async function handlePreviewSelect(preview: KlipyResult | null) {\n    await onSelect(preview);\n    setIsMenuOpen(false);\n    if (preview) klipyService.registerShare(searchText, preview.id);\n  }\n\n  function renderSuggestions(): ReactNode {\n    return (\n      <ChipContainer inline className={styles.klipyPickerSuggestionsContainer}>\n        {currentSuggestions.map((suggestion) => (\n          <Chip\n            className={styles.klipyPickerSuggestionsItem}\n            key={suggestion}\n            text={suggestion}\n            onClick={() => searchFor(suggestion)}\n          />\n        ))}\n      </ChipContainer>\n    );\n  }\n\n  function renderPreviewPicker(): ReactNode {\n    return (\n      <GifPreview\n        previewItems={currentPreviews}\n        onSelect={handlePreviewSelect}\n        onLoadAdditional={handleLoadAdditional}\n      />\n    );\n  }\n\n  function renderSearchInput(): ReactNode {\n    return <SearchInput label={text.search} value={searchText} onDebounce={searchFor} onChange={setSearchText} />;\n  }\n\n  if (isModal) {\n    return (\n      <div className={cx(styles.klipyPicker, className)}>\n        <div className={actionButtonStyles.actionButtons}>\n          <Button onClick={() => setIsMenuOpen(true)}>Pick gif</Button>\n          {selected && (\n            <Button styleType={ButtonStyleType.Delete} onClick={() => handlePreviewSelect(null)}>\n              Remove gif\n            </Button>\n          )}\n        </div>\n        {selected && <GifView className={styles.klipyPickerSelected} src={selected} />}\n        <Modal isOpen={isMenuOpen} onClose={() => setIsMenuOpen(false)}>\n          <div className={styles.klipyPickerModalContent}>\n            {renderSearchInput()}\n            {renderSuggestions()}\n            {renderPreviewPicker()}\n          </div>\n        </Modal>\n      </div>\n    );\n  }\n\n  return (\n    <div className={cx(styles.klipyPicker, className)}>\n      <FloatingMenu\n        align={Align.Left}\n        isOpen={currentPreviews.length > 0 && isMenuOpen}\n        onOpenChange={setIsMenuOpen}\n        dontCloseOnChildClick\n        content={\n          <>\n            {renderSuggestions()}\n            {renderPreviewPicker()}\n          </>\n        }\n      >\n        {renderSearchInput()}\n      </FloatingMenu>\n      {selected && (\n        <Button styleType={ButtonStyleType.Delete} onClick={() => handlePreviewSelect(null)}>\n          Remove gif\n        </Button>\n      )}\n      {selected && <GifView className={styles.klipyPickerSelected} src={selected} />}\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/esm/common/modal/modal.mjs

@@ -1,2 +1,2 @@
-import{useComponentDefaults as e}from"../configProvider/useComponentDefaults.mjs";import{usePresentationDefault as t}from"../configProvider/usePresentationDefault.mjs";import n from"../bodyEnd/bodyEnd.mjs";import r from"../styles/sheet.module.mjs";import{useVisualViewportSize as i}from"../hooks/useVisualViewportSize.mjs";import a from"../hooks/useSheet.mjs";import{useOverlay as o}from"../hooks/useOverlay.mjs";import s from"./modal.module.mjs";import{useEffect as c,useId as l,useRef as u,useState as d}from"react";import f from"classnames";import{FontAwesomeIcon as p}from"@fortawesome/react-fontawesome";import{faXmark as m}from"@fortawesome/free-solid-svg-icons";import{jsx as h,jsxs as g}from"react/jsx-runtime";function _(_){let{children:v=null,title:y=``,isOpen:b=!1,onClose:x=()=>null,className:S=``,style:C,hideHeader:w=!1,closeOnEscape:T=!0,presentation:E,classNames:D,styles:O,...k}=e(`Modal`,_),[A,j]=d(b),[M,N]=d(b),P=u(null),F=l(),{height:I,offsetTop:L}=i(),R=t(),{isSheet:z,sheetStyle:B}=a(E??R);if(c(()=>{b?(j(b),setTimeout(()=>N(!0),1)):(N(!1),setTimeout(()=>j(b),300))},[b]),o({isActive:A&&M,containerRef:P,onEscape:T?x:void 0}),!A)return null;let V=!w&&!!y;return h(n,{children:g(`div`,{className:f(s.modalContainer,D?.container),style:{height:I,top:L,...O?.container},children:[h(`div`,{className:f(s.modalWrapper,M&&s.modalWrapperShown,D?.backdrop),style:O?.backdrop,onClick:x}),M&&g(`div`,{...k,ref:P,role:`dialog`,"aria-modal":`true`,"aria-labelledby":V?F:void 0,tabIndex:-1,className:f(s.modal,M&&s.modalShown,z&&[r.sheet,r.sheetSurface,s.modalSheet],S,D?.modal),style:{...z?B:void 0,...C,...O?.modal},onClick:e=>e.stopPropagation(),children:[!w&&g(`div`,{className:f(s.modalHeader,D?.header),style:O?.header,children:[h(`div`,{id:F,className:D?.title,style:O?.title,children:y}),h(`button`,{type:`button`,onClick:x,"aria-label":`Close`,className:f(s.modalCloseButton,D?.closeButton),style:O?.closeButton,children:h(p,{icon:m})})]}),h(`div`,{className:f(s.modalBody,D?.body),style:O?.body,children:v})]})]})})}export{_ as default};
+import{useComponentDefaults as e}from"../configProvider/useComponentDefaults.mjs";import{useLabels as t}from"../configProvider/useLabels.mjs";import{usePresentationDefault as n}from"../configProvider/usePresentationDefault.mjs";import r from"../bodyEnd/bodyEnd.mjs";import i from"../styles/sheet.module.mjs";import{useVisualViewportSize as a}from"../hooks/useVisualViewportSize.mjs";import o from"../hooks/useSheet.mjs";import{useOverlay as s}from"../hooks/useOverlay.mjs";import c from"./modal.module.mjs";import{useEffect as l,useId as u,useRef as d,useState as f}from"react";import p from"classnames";import{FontAwesomeIcon as m}from"@fortawesome/react-fontawesome";import{faXmark as h}from"@fortawesome/free-solid-svg-icons";import{jsx as g,jsxs as _}from"react/jsx-runtime";var v={close:`Close`};function y(y){let{children:b=null,title:x=``,isOpen:S=!1,onClose:C=()=>null,className:w=``,style:T,hideHeader:E=!1,closeOnEscape:D=!0,presentation:O,classNames:k,styles:A,labels:j,...M}=e(`Modal`,y),N=t(`Modal`,j,v),[P,F]=f(S),[I,L]=f(S),R=d(null),z=u(),{height:B,offsetTop:V}=a(),H=n(),{isSheet:U,sheetStyle:W}=o(O??H);if(l(()=>{S?(F(S),setTimeout(()=>L(!0),1)):(L(!1),setTimeout(()=>F(S),300))},[S]),s({isActive:P&&I,containerRef:R,onEscape:D?C:void 0}),!P)return null;let G=!E&&!!x;return g(r,{children:_(`div`,{className:p(c.modalContainer,k?.container),style:{height:B,top:V,...A?.container},children:[g(`div`,{className:p(c.modalWrapper,I&&c.modalWrapperShown,k?.backdrop),style:A?.backdrop,onClick:C}),I&&_(`div`,{...M,ref:R,role:`dialog`,"aria-modal":`true`,"aria-labelledby":G?z:void 0,tabIndex:-1,className:p(c.modal,I&&c.modalShown,U&&[i.sheet,i.sheetSurface,c.modalSheet],w,k?.modal),style:{...U?W:void 0,...T,...A?.modal},onClick:e=>e.stopPropagation(),children:[!E&&_(`div`,{className:p(c.modalHeader,k?.header),style:A?.header,children:[g(`div`,{id:z,className:k?.title,style:A?.title,children:x}),g(`button`,{type:`button`,onClick:C,"aria-label":N.close,className:p(c.modalCloseButton,k?.closeButton),style:A?.closeButton,children:g(m,{icon:h})})]}),g(`div`,{className:p(c.modalBody,k?.body),style:A?.body,children:b})]})]})})}export{y as default};
 //# sourceMappingURL=modal.mjs.map

package/dist/esm/common/modal/modal.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"modal.mjs","names":[],"sources":["../../../../package/common/modal/modal.tsx"],"sourcesContent":["import cx from 'classnames';\nimport BodyEnd from 'components/common/bodyEnd';\n\nimport styles from './modal.module.pcss';\nimport sheetStyles from 'components/common/styles/sheet.module.pcss';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { faXmark as closeIcon } from '@fortawesome/free-solid-svg-icons';\nimport { ModalProps } from './modal.types';\nimport { useEffect, useId, useRef, useState } from 'react';\nimport { useVisualViewportSize } from 'components/common/hooks/useVisualViewportSize';\nimport { useOverlay } from 'components/common/hooks/useOverlay';\nimport { useSheet } from 'components/common/hooks/useSheet';\nimport { useComponentDefaults, usePresentationDefault } from 'components/common/configProvider';\n\nfunction Modal(props: ModalProps) {\n  const {\n    children = null,\n    title = '',\n    isOpen = false,\n    onClose = () => null,\n    className = '',\n    style,\n    hideHeader = false,\n    closeOnEscape = true,\n    presentation: presentationProp,\n    classNames,\n    styles: slotStyles,\n    ...rest\n  } = useComponentDefaults('Modal', props);\n  const [isRendered, setIsRendered] = useState(isOpen);\n  const [animateIn, setAnimateIn] = useState(isOpen);\n  const modalRef = useRef<HTMLDivElement>(null);\n  const titleId = useId();\n  // Centering/sizing against the actually-visible viewport (not the full layout viewport) keeps\n  // the modal — and whatever's focused inside it — from ending up under a mobile keyboard.\n  const { height: viewportHeight, offsetTop: viewportOffsetTop } = useVisualViewportSize();\n  // Explicit prop → this component's global default → the app-wide one. There's no built-in\n  // fallback to add: `Default` and no presentation at all both mean the ordinary centred dialog.\n  const appPresentation = usePresentationDefault();\n  const presentation = presentationProp ?? appPresentation;\n  const { isSheet, sheetStyle } = useSheet(presentation);\n\n  useEffect(() => {\n    if (isOpen) {\n      // eslint-disable-next-line react-hooks/set-state-in-effect\n      setIsRendered(isOpen);\n      setTimeout(() => setAnimateIn(true), 1);\n    } else {\n      setAnimateIn(false);\n      setTimeout(() => setIsRendered(isOpen), 300);\n    }\n  }, [isOpen]);\n\n  // Keyed on `animateIn` rather than `isOpen`, because the panel this needs to focus and trap\n  // focus inside of only mounts once that flips.\n  useOverlay({\n    isActive: isRendered && animateIn,\n    containerRef: modalRef,\n    onEscape: closeOnEscape ? onClose : undefined,\n  });\n\n  if (!isRendered) return null;\n\n  const hasHeaderTitle = !hideHeader && !!title;\n\n  return (\n    <BodyEnd>\n      <div\n        className={cx(styles.modalContainer, classNames?.container)}\n        style={{ height: viewportHeight, top: viewportOffsetTop, ...slotStyles?.container }}\n      >\n        <div\n          className={cx(styles.modalWrapper, animateIn && styles.modalWrapperShown, classNames?.backdrop)}\n          style={slotStyles?.backdrop}\n          onClick={onClose}\n        />\n        {animateIn && (\n          <div\n            {...rest}\n            ref={modalRef}\n            role='dialog'\n            aria-modal='true'\n            aria-labelledby={hasHeaderTitle ? titleId : undefined}\n            // Focusable so the trap has somewhere to put focus when the content has no tabbables.\n            tabIndex={-1}\n            className={cx(\n              styles.modal,\n              animateIn && styles.modalShown,\n              // The panel is its own sheet surface here: there's no inner panel to fill, since\n              // Modal already splits itself into a fixed header and a scrolling body.\n              isSheet && [sheetStyles.sheet, sheetStyles.sheetSurface, styles.modalSheet],\n              className,\n              classNames?.modal,\n            )}\n            style={{ ...(isSheet ? sheetStyle : undefined), ...style, ...slotStyles?.modal }}\n            onClick={(e) => e.stopPropagation()}\n          >\n            {!hideHeader && (\n              <div className={cx(styles.modalHeader, classNames?.header)} style={slotStyles?.header}>\n                <div id={titleId} className={classNames?.title} style={slotStyles?.title}>\n                  {title}\n                </div>\n                <button\n                  type='button'\n                  onClick={onClose}\n                  aria-label='Close'\n                  className={cx(styles.modalCloseButton, classNames?.closeButton)}\n                  style={slotStyles?.closeButton}\n                >\n                  <FontAwesomeIcon icon={closeIcon} />\n                </button>\n              </div>\n            )}\n            <div className={cx(styles.modalBody, classNames?.body)} style={slotStyles?.body}>\n              {children}\n            </div>\n          </div>\n        )}\n      </div>\n    </BodyEnd>\n  );\n}\n\nexport default Modal;\n"],"mappings":"+sBAcA,SAAS,EAAM,EAAmB,CAChC,GAAM,CACJ,WAAW,KACX,QAAQ,GACR,SAAS,GACT,cAAgB,KAChB,YAAY,GACZ,QACA,aAAa,GACb,gBAAgB,GAChB,aAAc,EACd,aACA,OAAQ,EACR,GAAG,GACD,EAAqB,QAAS,CAAK,EACjC,CAAC,EAAY,GAAiB,EAAS,CAAM,EAC7C,CAAC,EAAW,GAAgB,EAAS,CAAM,EAC3C,EAAW,EAAuB,IAAI,EACtC,EAAU,EAAM,EAGhB,CAAE,OAAQ,EAAgB,UAAW,GAAsB,EAAsB,EAGjF,EAAkB,EAAuB,EAEzC,CAAE,UAAS,cAAe,EADX,GAAoB,CACY,EAqBrD,GAnBA,MAAgB,CACV,GAEF,EAAc,CAAM,EACpB,eAAiB,EAAa,EAAI,EAAG,CAAC,IAEtC,EAAa,EAAK,EAClB,eAAiB,EAAc,CAAM,EAAG,GAAG,EAE/C,EAAG,CAAC,CAAM,CAAC,EAIX,EAAW,CACT,SAAU,GAAc,EACxB,aAAc,EACd,SAAU,EAAgB,EAAU,IAAA,EACtC,CAAC,EAEG,CAAC,EAAY,OAAO,KAExB,IAAM,EAAiB,CAAC,GAAc,CAAC,CAAC,EAExC,OACE,EAAC,EAAD,CAAA,SACE,EAAC,MAAD,CACE,UAAW,EAAG,EAAO,eAAgB,GAAY,SAAS,EAC1D,MAAO,CAAE,OAAQ,EAAgB,IAAK,EAAmB,GAAG,GAAY,SAAU,EAFpF,SAAA,CAIE,EAAC,MAAD,CACE,UAAW,EAAG,EAAO,aAAc,GAAa,EAAO,kBAAmB,GAAY,QAAQ,EAC9F,MAAO,GAAY,SACnB,QAAS,CACV,CAAA,EACA,GACC,EAAC,MAAD,CACE,GAAI,EACJ,IAAK,EACL,KAAK,SACL,aAAW,OACX,kBAAiB,EAAiB,EAAU,IAAA,GAE5C,SAAU,GACV,UAAW,EACT,EAAO,MACP,GAAa,EAAO,WAGpB,GAAW,CAAC,EAAY,MAAO,EAAY,aAAc,EAAO,UAAU,EAC1E,EACA,GAAY,KACd,EACA,MAAO,CAAE,GAAI,EAAU,EAAa,IAAA,GAAY,GAAG,EAAO,GAAG,GAAY,KAAM,EAC/E,QAAU,GAAM,EAAE,gBAAgB,EAlBpC,SAAA,CAoBG,CAAC,GACA,EAAC,MAAD,CAAK,UAAW,EAAG,EAAO,YAAa,GAAY,MAAM,EAAG,MAAO,GAAY,OAA/E,SAAA,CACE,EAAC,MAAD,CAAK,GAAI,EAAS,UAAW,GAAY,MAAO,MAAO,GAAY,MAChE,SAAA,CACE,CAAA,EACL,EAAC,SAAD,CACE,KAAK,SACL,QAAS,EACT,aAAW,QACX,UAAW,EAAG,EAAO,iBAAkB,GAAY,WAAW,EAC9D,MAAO,GAAY,YAEnB,SAAA,EAAC,EAAD,CAAiB,KAAM,CAAY,CAAA,CAC7B,CAAA,CACL,CAEP,CAAA,EAAA,EAAC,MAAD,CAAK,UAAW,EAAG,EAAO,UAAW,GAAY,IAAI,EAAG,MAAO,GAAY,KACxE,UACE,CAAA,CACF,CAEJ,CAAA,CAAA,CACE,CAAA,CAAA,CAAA,CAEb"}
+{"version":3,"file":"modal.mjs","names":[],"sources":["../../../../package/common/modal/modal.tsx"],"sourcesContent":["import cx from 'classnames';\nimport BodyEnd from 'components/common/bodyEnd';\n\nimport styles from './modal.module.pcss';\nimport sheetStyles from 'components/common/styles/sheet.module.pcss';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { faXmark as closeIcon } from '@fortawesome/free-solid-svg-icons';\nimport { ModalProps } from './modal.types';\nimport type { ModalLabels } from './modal.types';\nimport { useEffect, useId, useRef, useState } from 'react';\nimport { useVisualViewportSize } from 'components/common/hooks/useVisualViewportSize';\nimport { useOverlay } from 'components/common/hooks/useOverlay';\nimport { useSheet } from 'components/common/hooks/useSheet';\nimport { useComponentDefaults, useLabels, usePresentationDefault } from 'components/common/configProvider';\n\nconst DEFAULT_LABELS: Required<ModalLabels> = {\n  close: 'Close',\n};\n\nfunction Modal(props: ModalProps) {\n  const {\n    children = null,\n    title = '',\n    isOpen = false,\n    onClose = () => null,\n    className = '',\n    style,\n    hideHeader = false,\n    closeOnEscape = true,\n    presentation: presentationProp,\n    classNames,\n    styles: slotStyles,\n    labels,\n    ...rest\n  } = useComponentDefaults('Modal', props);\n  const text = useLabels('Modal', labels, DEFAULT_LABELS);\n  const [isRendered, setIsRendered] = useState(isOpen);\n  const [animateIn, setAnimateIn] = useState(isOpen);\n  const modalRef = useRef<HTMLDivElement>(null);\n  const titleId = useId();\n  // Centering/sizing against the actually-visible viewport (not the full layout viewport) keeps\n  // the modal — and whatever's focused inside it — from ending up under a mobile keyboard.\n  const { height: viewportHeight, offsetTop: viewportOffsetTop } = useVisualViewportSize();\n  // Explicit prop → this component's global default → the app-wide one. There's no built-in\n  // fallback to add: `Default` and no presentation at all both mean the ordinary centred dialog.\n  const appPresentation = usePresentationDefault();\n  const presentation = presentationProp ?? appPresentation;\n  const { isSheet, sheetStyle } = useSheet(presentation);\n\n  useEffect(() => {\n    if (isOpen) {\n      // eslint-disable-next-line react-hooks/set-state-in-effect\n      setIsRendered(isOpen);\n      setTimeout(() => setAnimateIn(true), 1);\n    } else {\n      setAnimateIn(false);\n      setTimeout(() => setIsRendered(isOpen), 300);\n    }\n  }, [isOpen]);\n\n  // Keyed on `animateIn` rather than `isOpen`, because the panel this needs to focus and trap\n  // focus inside of only mounts once that flips.\n  useOverlay({\n    isActive: isRendered && animateIn,\n    containerRef: modalRef,\n    onEscape: closeOnEscape ? onClose : undefined,\n  });\n\n  if (!isRendered) return null;\n\n  const hasHeaderTitle = !hideHeader && !!title;\n\n  return (\n    <BodyEnd>\n      <div\n        className={cx(styles.modalContainer, classNames?.container)}\n        style={{ height: viewportHeight, top: viewportOffsetTop, ...slotStyles?.container }}\n      >\n        <div\n          className={cx(styles.modalWrapper, animateIn && styles.modalWrapperShown, classNames?.backdrop)}\n          style={slotStyles?.backdrop}\n          onClick={onClose}\n        />\n        {animateIn && (\n          <div\n            {...rest}\n            ref={modalRef}\n            role='dialog'\n            aria-modal='true'\n            aria-labelledby={hasHeaderTitle ? titleId : undefined}\n            // Focusable so the trap has somewhere to put focus when the content has no tabbables.\n            tabIndex={-1}\n            className={cx(\n              styles.modal,\n              animateIn && styles.modalShown,\n              // The panel is its own sheet surface here: there's no inner panel to fill, since\n              // Modal already splits itself into a fixed header and a scrolling body.\n              isSheet && [sheetStyles.sheet, sheetStyles.sheetSurface, styles.modalSheet],\n              className,\n              classNames?.modal,\n            )}\n            style={{ ...(isSheet ? sheetStyle : undefined), ...style, ...slotStyles?.modal }}\n            onClick={(e) => e.stopPropagation()}\n          >\n            {!hideHeader && (\n              <div className={cx(styles.modalHeader, classNames?.header)} style={slotStyles?.header}>\n                <div id={titleId} className={classNames?.title} style={slotStyles?.title}>\n                  {title}\n                </div>\n                <button\n                  type='button'\n                  onClick={onClose}\n                  aria-label={text.close}\n                  className={cx(styles.modalCloseButton, classNames?.closeButton)}\n                  style={slotStyles?.closeButton}\n                >\n                  <FontAwesomeIcon icon={closeIcon} />\n                </button>\n              </div>\n            )}\n            <div className={cx(styles.modalBody, classNames?.body)} style={slotStyles?.body}>\n              {children}\n            </div>\n          </div>\n        )}\n      </div>\n    </BodyEnd>\n  );\n}\n\nexport default Modal;\n"],"mappings":"2wBAeA,IAAM,EAAwC,CAC5C,MAAO,OACT,EAEA,SAAS,EAAM,EAAmB,CAChC,GAAM,CACJ,WAAW,KACX,QAAQ,GACR,SAAS,GACT,cAAgB,KAChB,YAAY,GACZ,QACA,aAAa,GACb,gBAAgB,GAChB,aAAc,EACd,aACA,OAAQ,EACR,SACA,GAAG,GACD,EAAqB,QAAS,CAAK,EACjC,EAAO,EAAU,QAAS,EAAQ,CAAc,EAChD,CAAC,EAAY,GAAiB,EAAS,CAAM,EAC7C,CAAC,EAAW,GAAgB,EAAS,CAAM,EAC3C,EAAW,EAAuB,IAAI,EACtC,EAAU,EAAM,EAGhB,CAAE,OAAQ,EAAgB,UAAW,GAAsB,EAAsB,EAGjF,EAAkB,EAAuB,EAEzC,CAAE,UAAS,cAAe,EADX,GAAoB,CACY,EAqBrD,GAnBA,MAAgB,CACV,GAEF,EAAc,CAAM,EACpB,eAAiB,EAAa,EAAI,EAAG,CAAC,IAEtC,EAAa,EAAK,EAClB,eAAiB,EAAc,CAAM,EAAG,GAAG,EAE/C,EAAG,CAAC,CAAM,CAAC,EAIX,EAAW,CACT,SAAU,GAAc,EACxB,aAAc,EACd,SAAU,EAAgB,EAAU,IAAA,EACtC,CAAC,EAEG,CAAC,EAAY,OAAO,KAExB,IAAM,EAAiB,CAAC,GAAc,CAAC,CAAC,EAExC,OACE,EAAC,EAAD,CAAA,SACE,EAAC,MAAD,CACE,UAAW,EAAG,EAAO,eAAgB,GAAY,SAAS,EAC1D,MAAO,CAAE,OAAQ,EAAgB,IAAK,EAAmB,GAAG,GAAY,SAAU,EAFpF,SAAA,CAIE,EAAC,MAAD,CACE,UAAW,EAAG,EAAO,aAAc,GAAa,EAAO,kBAAmB,GAAY,QAAQ,EAC9F,MAAO,GAAY,SACnB,QAAS,CACV,CAAA,EACA,GACC,EAAC,MAAD,CACE,GAAI,EACJ,IAAK,EACL,KAAK,SACL,aAAW,OACX,kBAAiB,EAAiB,EAAU,IAAA,GAE5C,SAAU,GACV,UAAW,EACT,EAAO,MACP,GAAa,EAAO,WAGpB,GAAW,CAAC,EAAY,MAAO,EAAY,aAAc,EAAO,UAAU,EAC1E,EACA,GAAY,KACd,EACA,MAAO,CAAE,GAAI,EAAU,EAAa,IAAA,GAAY,GAAG,EAAO,GAAG,GAAY,KAAM,EAC/E,QAAU,GAAM,EAAE,gBAAgB,EAlBpC,SAAA,CAoBG,CAAC,GACA,EAAC,MAAD,CAAK,UAAW,EAAG,EAAO,YAAa,GAAY,MAAM,EAAG,MAAO,GAAY,OAA/E,SAAA,CACE,EAAC,MAAD,CAAK,GAAI,EAAS,UAAW,GAAY,MAAO,MAAO,GAAY,MAChE,SAAA,CACE,CAAA,EACL,EAAC,SAAD,CACE,KAAK,SACL,QAAS,EACT,aAAY,EAAK,MACjB,UAAW,EAAG,EAAO,iBAAkB,GAAY,WAAW,EAC9D,MAAO,GAAY,YAEnB,SAAA,EAAC,EAAD,CAAiB,KAAM,CAAY,CAAA,CAC7B,CAAA,CACL,CAEP,CAAA,EAAA,EAAC,MAAD,CAAK,UAAW,EAAG,EAAO,UAAW,GAAY,IAAI,EAAG,MAAO,GAAY,KACxE,UACE,CAAA,CACF,CAEJ,CAAA,CAAA,CACE,CAAA,CAAA,CAAA,CAEb"}

package/dist/esm/common/multiSelect/multiSelect.mjs

@@ -1,2 +1,2 @@
-import{useComponentDefaults as e}from"../configProvider/useComponentDefaults.mjs";import t from"../chip/chip.mjs";import n from"../tooltip/tooltip.mjs";import r from"../searchInput/searchInput.mjs";import{PopoverAlign as ee,PopoverPlacement as te,PopoverTrigger as ne}from"../popover/popover.types.mjs";import re from"../popover/popover.mjs";import i from"./multiSelect.module.mjs";import{useEffect as a,useId as ie,useRef as o,useState as s}from"react";import c from"classnames";import{FontAwesomeIcon as l}from"@fortawesome/react-fontawesome";import{faCheck as ae,faChevronDown as oe,faXmark as se}from"@fortawesome/free-solid-svg-icons";import{jsx as u,jsxs as d}from"react/jsx-runtime";var ce=[];function f(f){let{items:p,value:m,defaultValue:le=[],onChange:ue=()=>{},label:h=``,alwaysFloatLabel:de=!1,placeholder:g=``,searchable:fe=!1,allowCustomValues:_=!1,createLabel:pe=e=>`Add "${e}"`,searchPlaceholder:me=`Search…`,emptyLabel:he=`No matches`,maxSelected:v,clearable:ge=!0,disabled:y=!1,readOnly:_e=!1,presentation:ve,formValidator:b=null,errorMessage:x=``,isValid:ye=!0,className:be,style:xe,classNames:S,styles:C,onMouseEnter:Se,onMouseLeave:Ce,onFocus:we,onBlur:Te,...Ee}=e(`MultiSelect`,f),w=o(null),T=o(null),E=o(null),D=ie(),[De,Oe]=s(le),[O,ke]=s(!1),[k,A]=s(``),[j,M]=s(0),[N,P]=s(!1),[Ae,F]=s(!1),[I,je]=s(),L=o(b),[,Me]=s(0);a(()=>{L.current=b;let e=L.current;if(!e)return;e.label=h,e.validate();let t=()=>Me(e=>e+1);return e.registerOnUpdateListener(t),()=>{e.removeOnUpdateListener(t)}},[b,h]);let R=m!==void 0&&!b,z=b?b.value:R?m:De,B=Array.isArray(z)?z:ce,V=b?b.touched&&b.hasError():!ye||!!x,Ne=b?b.getCurrentErrorMessage():x||``,H=!y&&!_e,U=v!==void 0&&B.length>=v,W=de||O||N||B.length>0,G=fe||_,K=k.trim(),q=G?K.toLowerCase():``,J=q?p.filter(e=>e.label.toLowerCase().includes(q)):p,Y=_&&K.length>0&&!U&&!p.some(e=>e.label.toLowerCase()===q||String(e.key).toLowerCase()===q)&&!B.some(e=>String(e).toLowerCase()===q),X=Y?[...J,{key:K,label:pe(K)}]:J,Pe=B.map(e=>p.find(t=>t.key===e)??(_?{key:e,label:String(e)}:void 0)).filter(e=>e!==void 0);function Z(e){b?b.set(e):R||Oe(e),ue(e)}function Q(e){H&&!e.disabled&&(B.includes(e.key)?Z(B.filter(t=>t!==e.key)):U||Z([...B,e.key]),Y&&e.key===K&&A(``))}function Fe(){w.current?.contains(document.activeElement)&&T.current?.focus()}function Ie(e){(!e||H)&&(ke(e),e?(je(T.current?.offsetWidth),M(0)):(A(``),L.current&&(L.current.touched=!0)))}a(()=>{O&&G&&E.current?.querySelector(`input`)?.focus()},[O,G]);function $(e){if(H){if(!O){e.key===`ArrowDown`||e.key===`Enter`||e.key===` `?(e.preventDefault(),Ie(!0)):e.key===`Backspace`&&B.length>0&&Z(B.slice(0,-1));return}if(e.key===`ArrowDown`||e.key===`ArrowUp`){if(e.preventDefault(),X.length===0)return;let t=e.key===`ArrowDown`?1:-1;M(e=>(e+t+X.length)%X.length)}else if(e.key===`Home`||e.key===`End`)e.preventDefault(),M(e.key===`Home`?0:X.length-1);else if(e.key===`Enter`){e.preventDefault();let t=X[j];t&&Q(t)}else e.key===`Backspace`&&!k&&B.length>0&&Z(B.slice(0,-1))}}let Le=d(`div`,{className:c(i.multiSelectPanel,S?.panel),style:C?.panel,children:[G&&u(`div`,{ref:E,className:c(i.multiSelectSearch,S?.search),style:C?.search,children:u(r,{value:k,onChange:e=>{A(e),M(0)},placeholder:me,onKeyDown:$})}),u(`div`,{id:D,role:`listbox`,"aria-multiselectable":`true`,"aria-label":h||void 0,className:c(i.multiSelectOptions,S?.options),style:C?.options,children:X.length===0?u(`div`,{className:c(i.multiSelectEmpty,S?.empty),style:C?.empty,children:he}):X.map((e,t)=>{let n=B.includes(e.key),r=e.disabled||U&&!n;return d(`div`,{id:`${D}-${t}`,role:`option`,"aria-selected":n,"aria-disabled":r||void 0,className:c(i.multiSelectOption,t===j&&i.multiSelectOptionActive,n&&i.multiSelectOptionSelected,r&&i.multiSelectOptionDisabled,S?.option),style:C?.option,onMouseDown:e=>e.preventDefault(),onMouseEnter:()=>M(t),onClick:()=>Q(e),children:[u(`span`,{className:c(i.multiSelectOptionCheck,S?.optionCheck),style:C?.optionCheck,children:n&&u(l,{icon:ae})}),u(`span`,{className:c(i.multiSelectOptionLabel,S?.optionLabel),style:C?.optionLabel,children:e.label})]},e.key)})})]});return d(`div`,{...Ee,ref:w,className:c(i.multiSelect,y&&i.multiSelectDisabled,S?.root,be),style:{...xe,...C?.root},onMouseEnter:e=>{F(!0),Se?.(e)},onMouseLeave:e=>{F(!1),Ce?.(e)},onFocus:e=>{P(!0),we?.(e)},onBlur:e=>{e.currentTarget.contains(e.relatedTarget)||(P(!1),Te?.(e))},children:[u(re,{isOpen:O,onOpenChange:Ie,trigger:ne.Click,placement:te.Bottom,align:ee.Start,offset:4,withArrow:!1,disabled:!H,presentation:ve,content:Le,className:i.multiSelectPopover,styles:{panel:I?{minWidth:I}:void 0},children:d(`div`,{ref:T,role:`combobox`,tabIndex:y?-1:0,"aria-expanded":O,"aria-haspopup":`listbox`,"aria-controls":D,"aria-activedescendant":O&&X.length>0?`${D}-${j}`:void 0,"aria-disabled":y||void 0,"aria-readonly":_e||void 0,className:c(i.multiSelectControl,S?.control),style:C?.control,onKeyDown:$,children:[g&&Pe.length===0&&u(`span`,{className:c(i.multiSelectPlaceholder,(!h||W)&&i.multiSelectPlaceholderShown,!h&&i.multiSelectPlaceholderInstant,S?.placeholder),style:C?.placeholder,children:g}),u(`div`,{className:c(i.multiSelectValues,S?.values),style:C?.values,children:Pe.map(e=>u(t,{text:e.label,showRemoveIcon:H,removeLabel:`Remove ${e.label}`,onMouseDown:e=>e.preventDefault(),onRemove:()=>{Q(e),Fe()},className:c(i.multiSelectChip,S?.chip),style:C?.chip},e.key))}),ge&&H&&B.length>0&&u(`button`,{type:`button`,tabIndex:-1,"aria-label":`Clear selection`,className:c(i.multiSelectClearButton,S?.clearButton),style:C?.clearButton,onMouseDown:e=>e.preventDefault(),onClick:e=>{e.stopPropagation(),Z([]),Fe()},children:u(l,{icon:se})}),u(l,{icon:oe,className:c(i.multiSelectIcon,O&&i.multiSelectIconOpen,S?.icon),style:C?.icon}),h&&u(`div`,{className:c(i.multiSelectLabel,W&&i.multiSelectLabelFloating,S?.label),style:C?.label,children:h}),u(`fieldset`,{className:c(i.multiSelectFieldset,!h&&i.multiSelectFieldsetNoNotch,(N||O)&&i.multiSelectFieldsetFocused,V&&i.multiSelectFieldsetError,S?.fieldset),style:C?.fieldset,children:u(`legend`,{className:c(i.multiSelectFieldsetLegend,W&&i.multiSelectFieldsetLegendActive),children:u(`span`,{children:h})})})]})}),u(n,{variant:`error`,message:Ne,isVisible:V&&(N||Ae)})]})}export{f as default};
+import{useComponentDefaults as e}from"../configProvider/useComponentDefaults.mjs";import{useLabels as t}from"../configProvider/useLabels.mjs";import n from"../chip/chip.mjs";import r from"../tooltip/tooltip.mjs";import ee from"../searchInput/searchInput.mjs";import{PopoverAlign as te,PopoverPlacement as ne,PopoverTrigger as re}from"../popover/popover.types.mjs";import ie from"../popover/popover.mjs";import i from"./multiSelect.module.mjs";import{useEffect as a,useId as ae,useRef as o,useState as s}from"react";import c from"classnames";import{FontAwesomeIcon as l}from"@fortawesome/react-fontawesome";import{faCheck as oe,faChevronDown as se,faXmark as ce}from"@fortawesome/free-solid-svg-icons";import{jsx as u,jsxs as d}from"react/jsx-runtime";var le=[],ue={clearSelection:`Clear selection`,create:e=>`Add "${e}"`,searchPlaceholder:`Search…`,empty:`No matches`};function f(f){let{items:p,value:m,defaultValue:de=[],onChange:fe=()=>{},label:h=``,alwaysFloatLabel:pe=!1,placeholder:g=``,searchable:me=!1,allowCustomValues:_=!1,maxSelected:v,clearable:he=!0,disabled:y=!1,readOnly:b=!1,presentation:ge,formValidator:x=null,errorMessage:_e=``,isValid:ve=!0,className:ye,style:be,classNames:S,styles:C,onMouseEnter:xe,onMouseLeave:Se,onFocus:Ce,onBlur:we,labels:Te,...Ee}=e(`MultiSelect`,f),w=t(`MultiSelect`,Te,ue),T=o(null),E=o(null),D=o(null),O=ae(),[De,Oe]=s(de),[k,ke]=s(!1),[A,j]=s(``),[M,N]=s(0),[P,F]=s(!1),[Ae,I]=s(!1),[L,je]=s(),R=o(x),[,Me]=s(0);a(()=>{R.current=x;let e=R.current;if(!e)return;e.label=h,e.validate();let t=()=>Me(e=>e+1);return e.registerOnUpdateListener(t),()=>{e.removeOnUpdateListener(t)}},[x,h]);let z=m!==void 0&&!x,B=x?x.value:z?m:De,V=Array.isArray(B)?B:le,H=x?x.touched&&x.hasError():!ve||!!_e,Ne=x?x.getCurrentErrorMessage():_e||``,U=!y&&!b,W=v!==void 0&&V.length>=v,G=pe||k||P||V.length>0,K=me||_,q=A.trim(),J=K?q.toLowerCase():``,Y=J?p.filter(e=>e.label.toLowerCase().includes(J)):p,Pe=_&&q.length>0&&!W&&!p.some(e=>e.label.toLowerCase()===J||String(e.key).toLowerCase()===J)&&!V.some(e=>String(e).toLowerCase()===J),X=Pe?[...Y,{key:q,label:w.create(q)}]:Y,Fe=V.map(e=>p.find(t=>t.key===e)??(_?{key:e,label:String(e)}:void 0)).filter(e=>e!==void 0);function Z(e){x?x.set(e):z||Oe(e),fe(e)}function Q(e){U&&!e.disabled&&(V.includes(e.key)?Z(V.filter(t=>t!==e.key)):W||Z([...V,e.key]),Pe&&e.key===q&&j(``))}function Ie(){T.current?.contains(document.activeElement)&&E.current?.focus()}function Le(e){(!e||U)&&(ke(e),e?(je(E.current?.offsetWidth),N(0)):(j(``),R.current&&(R.current.touched=!0)))}a(()=>{k&&K&&D.current?.querySelector(`input`)?.focus()},[k,K]);function $(e){if(U){if(!k){e.key===`ArrowDown`||e.key===`Enter`||e.key===` `?(e.preventDefault(),Le(!0)):e.key===`Backspace`&&V.length>0&&Z(V.slice(0,-1));return}if(e.key===`ArrowDown`||e.key===`ArrowUp`){if(e.preventDefault(),X.length===0)return;let t=e.key===`ArrowDown`?1:-1;N(e=>(e+t+X.length)%X.length)}else if(e.key===`Home`||e.key===`End`)e.preventDefault(),N(e.key===`Home`?0:X.length-1);else if(e.key===`Enter`){e.preventDefault();let t=X[M];t&&Q(t)}else e.key===`Backspace`&&!A&&V.length>0&&Z(V.slice(0,-1))}}let Re=d(`div`,{className:c(i.multiSelectPanel,S?.panel),style:C?.panel,children:[K&&u(`div`,{ref:D,className:c(i.multiSelectSearch,S?.search),style:C?.search,children:u(ee,{value:A,onChange:e=>{j(e),N(0)},placeholder:w.searchPlaceholder,onKeyDown:$})}),u(`div`,{id:O,role:`listbox`,"aria-multiselectable":`true`,"aria-label":h||void 0,className:c(i.multiSelectOptions,S?.options),style:C?.options,children:X.length===0?u(`div`,{className:c(i.multiSelectEmpty,S?.empty),style:C?.empty,children:w.empty}):X.map((e,t)=>{let n=V.includes(e.key),r=e.disabled||W&&!n;return d(`div`,{id:`${O}-${t}`,role:`option`,"aria-selected":n,"aria-disabled":r||void 0,className:c(i.multiSelectOption,t===M&&i.multiSelectOptionActive,n&&i.multiSelectOptionSelected,r&&i.multiSelectOptionDisabled,S?.option),style:C?.option,onMouseDown:e=>e.preventDefault(),onMouseEnter:()=>N(t),onClick:()=>Q(e),children:[u(`span`,{className:c(i.multiSelectOptionCheck,S?.optionCheck),style:C?.optionCheck,children:n&&u(l,{icon:oe})}),u(`span`,{className:c(i.multiSelectOptionLabel,S?.optionLabel),style:C?.optionLabel,children:e.label})]},e.key)})})]});return d(`div`,{...Ee,ref:T,className:c(i.multiSelect,y&&i.multiSelectDisabled,S?.root,ye),style:{...be,...C?.root},onMouseEnter:e=>{I(!0),xe?.(e)},onMouseLeave:e=>{I(!1),Se?.(e)},onFocus:e=>{F(!0),Ce?.(e)},onBlur:e=>{e.currentTarget.contains(e.relatedTarget)||(F(!1),we?.(e))},children:[u(ie,{isOpen:k,onOpenChange:Le,trigger:re.Click,placement:ne.Bottom,align:te.Start,offset:4,withArrow:!1,disabled:!U,presentation:ge,content:Re,className:i.multiSelectPopover,styles:{panel:L?{minWidth:L}:void 0},children:d(`div`,{ref:E,role:`combobox`,tabIndex:y?-1:0,"aria-expanded":k,"aria-haspopup":`listbox`,"aria-controls":O,"aria-activedescendant":k&&X.length>0?`${O}-${M}`:void 0,"aria-disabled":y||void 0,"aria-readonly":b||void 0,className:c(i.multiSelectControl,S?.control),style:C?.control,onKeyDown:$,children:[g&&Fe.length===0&&u(`span`,{className:c(i.multiSelectPlaceholder,(!h||G)&&i.multiSelectPlaceholderShown,!h&&i.multiSelectPlaceholderInstant,S?.placeholder),style:C?.placeholder,children:g}),u(`div`,{className:c(i.multiSelectValues,S?.values),style:C?.values,children:Fe.map(e=>u(n,{text:e.label,showRemoveIcon:U,labels:{remove:`Remove ${e.label}`},onMouseDown:e=>e.preventDefault(),onRemove:()=>{Q(e),Ie()},className:c(i.multiSelectChip,S?.chip),style:C?.chip},e.key))}),he&&U&&V.length>0&&u(`button`,{type:`button`,tabIndex:-1,"aria-label":w.clearSelection,className:c(i.multiSelectClearButton,S?.clearButton),style:C?.clearButton,onMouseDown:e=>e.preventDefault(),onClick:e=>{e.stopPropagation(),Z([]),Ie()},children:u(l,{icon:ce})}),u(l,{icon:se,className:c(i.multiSelectIcon,k&&i.multiSelectIconOpen,S?.icon),style:C?.icon}),h&&u(`div`,{className:c(i.multiSelectLabel,G&&i.multiSelectLabelFloating,S?.label),style:C?.label,children:h}),u(`fieldset`,{className:c(i.multiSelectFieldset,!h&&i.multiSelectFieldsetNoNotch,(P||k)&&i.multiSelectFieldsetFocused,H&&i.multiSelectFieldsetError,S?.fieldset),style:C?.fieldset,children:u(`legend`,{className:c(i.multiSelectFieldsetLegend,G&&i.multiSelectFieldsetLegendActive),children:u(`span`,{children:h})})})]})}),u(r,{variant:`error`,message:Ne,isVisible:H&&(P||Ae)})]})}export{f as default};
 //# sourceMappingURL=multiSelect.mjs.map