@ahrowe/ui 0.32.0 → 0.34.0

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

@@ -1,2 +1,2 @@
-import{useComponentDefaults as e}from"../configProvider/useComponentDefaults.mjs";import t from"../button/button.mjs";import n from"../actionIcon/actionIcon.mjs";import{Align as r}from"../floatingMenu/floatingMenu.types.mjs";import i from"../floatingMenu/floatingMenu.mjs";import a from"../tooltip/tooltip.mjs";import o from"../input/input.mjs";import s from"../modal/modal.mjs";import{getLocale as c}from"../../services/localization.mjs";import{correctDateMaskValue as ee,getDateFromDayMonthAndYear as te,getDateString as l,getMonthName as ne,getMonthNames as re}from"./dateFunctions.mjs";import ie from"./components/datePickerMonth/datePickerMonth.mjs";import u from"../dropdown/dropdown.mjs";import d from"./datePicker.module.mjs";import{useEffect as f,useRef as p,useState as m}from"react";import h from"classnames";import{faChevronLeft as ae,faChevronRight as oe}from"@fortawesome/free-solid-svg-icons";import{Fragment as se,jsx as g,jsxs as _}from"react/jsx-runtime";import ce from"@mona-health/react-input-mask";function v(v){let{className:le=``,selected:y,onSelect:b=()=>null,formValidator:x=null,noInput:S=!1,noHeader:C=!1,isModal:w=!1,isInline:T=!1,onChange:ue=()=>null,minDate:E=null,maxDate:D=null,children:de=null,showClearButton:fe=!1,label:pe=``,isValid:O=!0,errorMessage:k=``,isRequired:A=!1,startDate:j,endDate:M}=e(`DatePicker`,v),N=()=>x?x.value:y,P=N()??new Date,[F,I]=m(P.getMonth()+1),[L,R]=m(P.getFullYear()),[z,B]=m(!1),[V,H]=m(()=>N()?l(P):``),[me,U]=m(!1),[he,W]=m(!1),[,ge]=m(0),[_e,ve]=m(y),G=p(x);if(_e!==y){ve(y);let e=y??new Date;I(e.getMonth()+1),R(e.getFullYear()),H(y?l(y):``)}f(()=>{if(G.current=x,!x)return;let e=()=>{let e=x.value;e?(I(e.getMonth()+1),R(e.getFullYear()),H(l(e))):H(``),ge(e=>e+1)};return x.registerOnUpdateListener(e),()=>x.removeOnUpdateListener(e)},[x]);let ye=()=>x?x.touched&&x.hasError():!O||!!k,be=()=>!!(A||x?.validators.find(e=>e.validatorId===`required`)),K=e=>{H(e?l(e):``),x&&x.set(e),ue(e)},q=e=>{K(e),b(e),B(!1)},J=e=>{I(t=>{let n=t+e;return n<1?(n=12,R(e=>e-1)):n>12&&(n=1,R(e=>e+1)),n})},Y=e=>{if(e.match(/\d{2}\.\d{2}\.\d{4}/gi)){let[t,n,r]=e.split(`.`),i=te(Number(t),Number(n),Number(r));if(i&&i.toString()!==`Invalid Date`&&(!D||i<=D)&&(!E||i>=E))return i}return null},xe=({previousState:e,nextState:t})=>{if(!e||t.value===e.value)return t;let n=ee(t.value,e.value,t.selection??null),r=Y(n.value);return r&&K(r),n},Se=()=>{let e=400,t=new Date().getFullYear()-200;return E&&(t=E.getFullYear()),D&&(e=D.getFullYear()-t+1),Array.from(Array(e).keys()).map(e=>({key:e+t,label:e+t}))},X=N(),Z=ye(),Ce=C?null:_(`div`,{className:d.datePickerHeader,children:[g(n,{icon:ae,onClick:()=>J(-1)}),g(`div`,{className:d.datePickerHeaderMonthAndYearContainer,children:_(`div`,{className:d.datePickerHeaderMonthAndYear,children:[g(u,{plainStyle:!0,scrollToSelected:!0,onChange:e=>I(e),className:d.datePickerHeaderMonth,value:ne(c(`-`),L,F,1),items:re().map((e,t)=>({key:t+1,label:e}))}),g(u,{plainStyle:!0,scrollToSelected:!0,useMatLabelStyle:!1,className:d.datePickerHeaderYear,onChange:e=>R(e),value:L,items:Se()})]})}),g(n,{icon:oe,onClick:()=>J(1)})]}),Q=_(se,{children:[Ce,g(ie,{className:d.datePickerMonth,month:F,year:L,onSelect:q,selectionStart:j??X,selectionEnd:M??X,minDate:E,maxDate:D,onNavigateMonth:J}),fe&&g(t,{onClick:()=>q(null),children:`Clear`}),de]}),$=S?null:g(o,{autoComplete:`off`,readOnly:w,classNames:w?{input:d.datePickerModalInput}:void 0,label:`${pe}${be()?` *`:``}`,value:V,onChange:e=>H(e),onClick:()=>B(!0),customInput:g(ce,{mask:`99.99.9999`,maskPlaceholder:`_`,beforeMaskedStateChange:xe}),onBlur:()=>{G.current&&(G.current.touched=!0),U(!1),K(Y(V))},onFocus:()=>U(!0),onMouseEnter:()=>W(!0),onMouseLeave:()=>W(!1),isValid:!Z}),we=T?Q:w?g(s,{hideHeader:!0,isOpen:z,onClose:()=>B(!1),children:Q}):g(i,{isOpen:z,onOpenChange:e=>B(e),content:Q,align:r.Left,dontCloseOnChildClick:!0,children:$});return _(`div`,{className:h(d.datePicker,le),children:[(w||T)&&$,we,g(a,{variant:`error`,message:x?x.getCurrentErrorMessage():k||``,isVisible:Z&&(me||he)})]})}export{v as default};
+import{useComponentDefaults as e}from"../configProvider/useComponentDefaults.mjs";import t from"../button/button.mjs";import n from"../actionIcon/actionIcon.mjs";import{PopoverAlign as r,PopoverPlacement as i}from"../popover/popover.types.mjs";import ee from"../popover/popover.mjs";import te from"../tooltip/tooltip.mjs";import ne from"../input/input.mjs";import a from"../modal/modal.mjs";import{getLocale as o}from"../../services/localization.mjs";import{correctDateMaskValue as re,getDateFromDayMonthAndYear as ie,getDateString as s,getMonthName as ae,getMonthNames as oe}from"./dateFunctions.mjs";import se from"./components/datePickerMonth/datePickerMonth.mjs";import c from"../dropdown/dropdown.mjs";import l from"./datePicker.module.mjs";import{useEffect as ce,useRef as le,useState as u}from"react";import d from"classnames";import{faChevronLeft as f,faChevronRight as p}from"@fortawesome/free-solid-svg-icons";import{Fragment as m,jsx as h,jsxs as g}from"react/jsx-runtime";import ue from"@mona-health/react-input-mask";function _(_){let{className:de=``,selected:v,onSelect:fe=()=>null,formValidator:y=null,noInput:pe=!1,noHeader:me=!1,isModal:b=!1,isInline:x=!1,onChange:he=()=>null,minDate:S=null,maxDate:C=null,children:ge=null,showClearButton:_e=!1,label:ve=``,isValid:ye=!0,errorMessage:w=``,isRequired:T=!1,startDate:E,endDate:D,style:O,classNames:k,styles:A,...j}=e(`DatePicker`,_),M=()=>y?y.value:v,N=M()??new Date,[P,F]=u(N.getMonth()+1),[I,L]=u(N.getFullYear()),[R,z]=u(!1),[B,V]=u(()=>M()?s(N):``),[be,H]=u(!1),[xe,U]=u(!1),[,Se]=u(0),[Ce,we]=u(v),W=le(y);if(Ce!==v){we(v);let e=v??new Date;F(e.getMonth()+1),L(e.getFullYear()),V(v?s(v):``)}ce(()=>{if(W.current=y,!y)return;let e=()=>{let e=y.value;e?(F(e.getMonth()+1),L(e.getFullYear()),V(s(e))):V(``),Se(e=>e+1)};return y.registerOnUpdateListener(e),()=>y.removeOnUpdateListener(e)},[y]);let Te=()=>y?y.touched&&y.hasError():!ye||!!w,Ee=()=>!!(T||y?.validators.find(e=>e.validatorId===`required`)),G=e=>{V(e?s(e):``),y&&y.set(e),he(e)},K=e=>{G(e),fe(e),z(!1)},q=e=>{F(t=>{let n=t+e;return n<1?(n=12,L(e=>e-1)):n>12&&(n=1,L(e=>e+1)),n})},J=e=>{if(e.match(/\d{2}\.\d{2}\.\d{4}/gi)){let[t,n,r]=e.split(`.`),i=ie(Number(t),Number(n),Number(r));if(i&&i.toString()!==`Invalid Date`&&(!C||i<=C)&&(!S||i>=S))return i}return null},De=({previousState:e,nextState:t})=>{if(!e||t.value===e.value)return t;let n=re(t.value,e.value,t.selection??null),r=J(n.value);return r&&G(r),n},Y=()=>{let e=400,t=new Date().getFullYear()-200;return S&&(t=S.getFullYear()),C&&(e=C.getFullYear()-t+1),Array.from(Array(e).keys()).map(e=>({key:e+t,label:e+t}))},X=M(),Z=Te(),Oe=me?null:g(`div`,{className:d(l.datePickerHeader,k?.header),style:A?.header,children:[h(n,{icon:f,onClick:()=>q(-1)}),h(`div`,{className:l.datePickerHeaderMonthAndYearContainer,children:g(`div`,{className:l.datePickerHeaderMonthAndYear,children:[h(c,{plainStyle:!0,scrollToSelected:!0,onChange:e=>F(e),className:d(l.datePickerHeaderMonth,k?.monthDropdown),style:A?.monthDropdown,value:ae(o(`-`),I,P,1),items:oe().map((e,t)=>({key:t+1,label:e}))}),h(c,{plainStyle:!0,scrollToSelected:!0,useMatLabelStyle:!1,className:d(l.datePickerHeaderYear,k?.yearDropdown),style:A?.yearDropdown,onChange:e=>L(e),value:I,items:Y()})]})}),h(n,{icon:p,onClick:()=>q(1)})]}),Q=g(m,{children:[Oe,h(se,{className:d(l.datePickerMonth,k?.calendar),style:A?.calendar,month:P,year:I,onSelect:K,selectionStart:E??X,selectionEnd:D??X,minDate:S,maxDate:C,onNavigateMonth:q}),_e&&h(t,{onClick:()=>K(null),className:k?.clearButton,style:A?.clearButton,children:`Clear`}),ge]}),$=pe?null:h(ne,{autoComplete:`off`,className:k?.input,style:A?.input,readOnly:b,classNames:b?{input:l.datePickerModalInput}:void 0,label:`${ve}${Ee()?` *`:``}`,value:B,onChange:e=>V(e),onClick:()=>z(!0),customInput:h(ue,{mask:`99.99.9999`,maskPlaceholder:`_`,beforeMaskedStateChange:De}),onBlur:()=>{W.current&&(W.current.touched=!0),H(!1),G(J(B))},onFocus:()=>H(!0),onMouseEnter:()=>U(!0),onMouseLeave:()=>U(!1),isValid:!Z}),ke=x?Q:b?h(a,{hideHeader:!0,isOpen:R,onClose:()=>z(!1),children:Q}):h(ee,{isOpen:R,onOpenChange:e=>z(e),content:Q,placement:i.Bottom,align:r.Start,closeOnTriggerClick:!1,constrainWidth:!1,children:$});return g(`div`,{...j,className:d(l.datePicker,de,k?.root),style:{...O,...A?.root},children:[(b||x)&&$,ke,h(te,{variant:`error`,message:y?y.getCurrentErrorMessage():w||``,isVisible:Z&&(be||xe)})]})}export{_ as default};
 //# sourceMappingURL=datePicker.mjs.map

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 { 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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"}
+{"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 Popover from '../popover';\nimport Dropdown from '../dropdown';\nimport { PopoverAlign, PopoverPlacement } from '../popover/popover.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    style,\n    classNames,\n    styles: slotStyles,\n    ...rest\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={cx(styles.datePickerHeader, classNames?.header)} style={slotStyles?.header}>\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={cx(styles.datePickerHeaderMonth, classNames?.monthDropdown)}\n            style={slotStyles?.monthDropdown}\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={cx(styles.datePickerHeaderYear, classNames?.yearDropdown)}\n            style={slotStyles?.yearDropdown}\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={cx(styles.datePickerMonth, classNames?.calendar)}\n        style={slotStyles?.calendar}\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 && (\n        <Button onClick={() => handleSelect(null)} className={classNames?.clearButton} style={slotStyles?.clearButton}>\n          Clear\n        </Button>\n      )}\n      {children}\n    </>\n  );\n\n  const input = noInput ? null : (\n    <Input\n      autoComplete='off'\n      className={classNames?.input}\n      style={slotStyles?.input}\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      <Popover\n        isOpen={isPickerOpen}\n        onOpenChange={(open: boolean) => setIsPickerOpen(open)}\n        content={pickerContent}\n        placement={PopoverPlacement.Bottom}\n        align={PopoverAlign.Start}\n        // A click to place the caret in the field must not take the panel away.\n        // The focus stays there on its own: Popover only follows a keyboard open.\n        closeOnTriggerClick={false}\n        constrainWidth={false}\n      >\n        {input}\n      </Popover>\n    );\n  })();\n\n  return (\n    <div\n      {...rest}\n      className={cx(styles.datePicker, className, classNames?.root)}\n      style={{ ...style, ...slotStyles?.root }}\n    >\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/drawer/drawer.mjs

@@ -1,2 +1,2 @@
-import e from"./drawer.module.mjs";import{useEffect as t,useRef as n}from"react";import r from"classnames";import{jsx as i}from"react/jsx-runtime";function a({className:a,isOpen:o=!1,closedWidth:s,openedWidth:c,children:l}){let u=n(null),d=n(null);return t(()=>{let e=new ResizeObserver(()=>{u.current&&d.current&&u.current.style.setProperty(`--drawer-content-width`,`${d.current.scrollWidth}px`)});return d.current&&e.observe(d.current),()=>e.disconnect()},[]),i(`div`,{ref:u,className:r(e.drawer,o&&e.drawerOpen,a),style:{...s!==void 0&&{"--drawer-closed-width":s},...c!==void 0&&{"--drawer-opened-width":c}},children:i(`div`,{ref:d,className:e.drawerContent,children:i(`div`,{className:e.drawerContentInner,children:l})})})}export{a as default};
+import e from"./drawer.module.mjs";import{useEffect as t,useRef as n}from"react";import r from"classnames";import{jsx as i}from"react/jsx-runtime";function a({className:a,isOpen:o=!1,closedWidth:s,openedWidth:c,children:l,style:u,classNames:d,styles:f,...p}){let m=n(null),h=n(null);return t(()=>{let e=new ResizeObserver(()=>{m.current&&h.current&&m.current.style.setProperty(`--drawer-content-width`,`${h.current.scrollWidth}px`)});return h.current&&e.observe(h.current),()=>e.disconnect()},[]),i(`div`,{...p,ref:m,className:r(e.drawer,o&&e.drawerOpen,a,d?.root),style:{...s!==void 0&&{"--drawer-closed-width":s},...c!==void 0&&{"--drawer-opened-width":c},...u,...f?.root},children:i(`div`,{ref:h,className:r(e.drawerContent,d?.content),style:f?.content,children:i(`div`,{className:r(e.drawerContentInner,d?.inner),style:f?.inner,children:l})})})}export{a as default};
 //# sourceMappingURL=drawer.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"drawer.mjs","names":[],"sources":["../../../../package/common/drawer/drawer.tsx"],"sourcesContent":["import type { ReactElement, CSSProperties } from 'react';\nimport { useRef, useEffect } from 'react';\nimport { DrawerProps } from './drawer.types';\nimport cx from 'classnames';\n\nimport styles from './drawer.module.pcss';\n\nfunction Drawer({ className, isOpen = false, closedWidth, openedWidth, children }: DrawerProps): ReactElement {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const contentRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    const observer = new ResizeObserver(() => {\n      if (containerRef.current && contentRef.current) {\n        containerRef.current.style.setProperty('--drawer-content-width', `${contentRef.current.scrollWidth}px`);\n      }\n    });\n    if (contentRef.current) observer.observe(contentRef.current);\n    return () => observer.disconnect();\n  }, []);\n\n  return (\n    <div\n      ref={containerRef}\n      className={cx(styles.drawer, isOpen && styles.drawerOpen, className)}\n      style={\n        {\n          ...(closedWidth !== undefined && { '--drawer-closed-width': closedWidth }),\n          ...(openedWidth !== undefined && { '--drawer-opened-width': openedWidth }),\n        } as CSSProperties\n      }\n    >\n      <div ref={contentRef} className={styles.drawerContent}>\n        <div className={styles.drawerContentInner}>{children}</div>\n      </div>\n    </div>\n  );\n}\n\nexport default Drawer;\n"],"mappings":"mJAOA,SAAS,EAAO,CAAE,YAAW,SAAS,GAAO,cAAa,cAAa,YAAuC,CAC5G,IAAM,EAAe,EAAuB,IAAI,EAC1C,EAAa,EAAuB,IAAI,EAY9C,OAVA,MAAgB,CACd,IAAM,EAAW,IAAI,mBAAqB,CACpC,EAAa,SAAW,EAAW,SACrC,EAAa,QAAQ,MAAM,YAAY,yBAA0B,GAAG,EAAW,QAAQ,YAAY,GAAG,CAE1G,CAAC,EAED,OADI,EAAW,SAAS,EAAS,QAAQ,EAAW,OAAO,MAC9C,EAAS,WAAW,CACnC,EAAG,CAAC,CAAC,EAGH,EAAC,MAAD,CACE,IAAK,EACL,UAAW,EAAG,EAAO,OAAQ,GAAU,EAAO,WAAY,CAAS,EACnE,MACE,CACE,GAAI,IAAgB,IAAA,IAAa,CAAE,wBAAyB,CAAY,EACxE,GAAI,IAAgB,IAAA,IAAa,CAAE,wBAAyB,CAAY,CAC1E,EAGF,SAAA,EAAC,MAAD,CAAK,IAAK,EAAY,UAAW,EAAO,cACtC,SAAA,EAAC,MAAD,CAAK,UAAW,EAAO,mBAAqB,UAAc,CAAA,CACvD,CAAA,CACF,CAAA,CAET"}
+{"version":3,"file":"drawer.mjs","names":[],"sources":["../../../../package/common/drawer/drawer.tsx"],"sourcesContent":["import type { ReactElement, CSSProperties } from 'react';\nimport { useRef, useEffect } from 'react';\nimport { DrawerProps } from './drawer.types';\nimport cx from 'classnames';\n\nimport styles from './drawer.module.pcss';\n\nfunction Drawer({\n  className,\n  isOpen = false,\n  closedWidth,\n  openedWidth,\n  children,\n  style,\n  classNames,\n  styles: slotStyles,\n  ...rest\n}: DrawerProps): ReactElement {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const contentRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    const observer = new ResizeObserver(() => {\n      if (containerRef.current && contentRef.current) {\n        containerRef.current.style.setProperty('--drawer-content-width', `${contentRef.current.scrollWidth}px`);\n      }\n    });\n    if (contentRef.current) observer.observe(contentRef.current);\n    return () => observer.disconnect();\n  }, []);\n\n  return (\n    <div\n      {...rest}\n      ref={containerRef}\n      className={cx(styles.drawer, isOpen && styles.drawerOpen, className, classNames?.root)}\n      style={\n        {\n          ...(closedWidth !== undefined && { '--drawer-closed-width': closedWidth }),\n          ...(openedWidth !== undefined && { '--drawer-opened-width': openedWidth }),\n          ...style,\n          ...slotStyles?.root,\n        } as CSSProperties\n      }\n    >\n      <div ref={contentRef} className={cx(styles.drawerContent, classNames?.content)} style={slotStyles?.content}>\n        <div className={cx(styles.drawerContentInner, classNames?.inner)} style={slotStyles?.inner}>\n          {children}\n        </div>\n      </div>\n    </div>\n  );\n}\n\nexport default Drawer;\n"],"mappings":"mJAOA,SAAS,EAAO,CACd,YACA,SAAS,GACT,cACA,cACA,WACA,QACA,aACA,OAAQ,EACR,GAAG,GACyB,CAC5B,IAAM,EAAe,EAAuB,IAAI,EAC1C,EAAa,EAAuB,IAAI,EAY9C,OAVA,MAAgB,CACd,IAAM,EAAW,IAAI,mBAAqB,CACpC,EAAa,SAAW,EAAW,SACrC,EAAa,QAAQ,MAAM,YAAY,yBAA0B,GAAG,EAAW,QAAQ,YAAY,GAAG,CAE1G,CAAC,EAED,OADI,EAAW,SAAS,EAAS,QAAQ,EAAW,OAAO,MAC9C,EAAS,WAAW,CACnC,EAAG,CAAC,CAAC,EAGH,EAAC,MAAD,CACE,GAAI,EACJ,IAAK,EACL,UAAW,EAAG,EAAO,OAAQ,GAAU,EAAO,WAAY,EAAW,GAAY,IAAI,EACrF,MACE,CACE,GAAI,IAAgB,IAAA,IAAa,CAAE,wBAAyB,CAAY,EACxE,GAAI,IAAgB,IAAA,IAAa,CAAE,wBAAyB,CAAY,EACxE,GAAG,EACH,GAAG,GAAY,IACjB,EAGF,SAAA,EAAC,MAAD,CAAK,IAAK,EAAY,UAAW,EAAG,EAAO,cAAe,GAAY,OAAO,EAAG,MAAO,GAAY,QACjG,SAAA,EAAC,MAAD,CAAK,UAAW,EAAG,EAAO,mBAAoB,GAAY,KAAK,EAAG,MAAO,GAAY,MAClF,UACE,CAAA,CACF,CAAA,CACF,CAAA,CAET"}

package/dist/esm/common/dropdown/dropdown.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 ee from"../sheetBackdrop/sheetBackdrop.mjs";import{useFloatingPosition as i}from"../floatingMenu/useFloatingPosition.mjs";import{Presentation as a}from"../floatingMenu/floatingMenu.types.mjs";import o from"../hooks/useSheet.mjs";import{useOverlay as s}from"../hooks/useOverlay.mjs";import c from"../tooltip/tooltip.mjs";import te from"../infiniteBlock/infiniteBlock.mjs";import l from"./dropdown.module.mjs";import{useEffect as u,useLayoutEffect as ne,useRef as d,useState as f}from"react";import p from"classnames";import{FontAwesomeIcon as m}from"@fortawesome/react-fontawesome";import{faChevronDown as h}from"@fortawesome/free-solid-svg-icons";import{jsx as g,jsxs as _}from"react/jsx-runtime";import re from"downshift";function v(v){let{errorMessage:y=``,className:ie=``,label:b=``,value:x=``,isValid:ae=!0,tabIndex:oe=0,isRequired:se=!1,customProps:S={},isRow:ce=!1,disabled:C=!1,readOnly:w=!1,onScroll:le=()=>Promise.resolve(),onClick:T,onChange:E,onFocus:D=null,onBlur:O=null,onMouseEnter:k=null,onMouseLeave:ue=null,dropdownLabel:de,isDropdownListWider:A=!1,inputClassName:fe=``,dropDownIconClassName:pe=``,dropDownClassName:me=``,formValidator:j=null,labelClassName:he=``,dropDownInputClassName:ge=``,items:M=[],useMatLabelStyle:N=!0,alwaysFloatLabel:P=!1,placeholder:F=``,plainStyle:I=!1,scrollToSelected:L=!1,presentation:_e,reactRef:ve,...ye}=e(`Dropdown`,v),[R,z]=f(!1),[be,B]=f(!1),[,xe]=f(0),V=d(j),H=d(null),U=d(null),[W,Se]=f(!1),Ce=t(),we=_e??Ce??a.Default,{isSheet:G,sheetStyle:Te}=o(we);ne(()=>{let e=H.current,t=U.current;if(!W||G||!e||!t)return;let{width:n}=e.getBoundingClientRect(),{fontSize:r}=window.getComputedStyle(e);t.style.width=`${n}px`,t.style.fontSize=r},[W,G]),i({isOpen:W&&!G,triggerRef:H,anchorRef:U,panelRef:U,flipClassName:l.dropdownInputListAnimFlip}),s({isActive:W,containerRef:U,trapFocus:!1,lockScroll:G}),u(()=>{if(V.current=j,!V.current)return;V.current.label=b??``,V.current.validate();let e=()=>xe(e=>e+1);return V.current.registerOnUpdateListener(e),()=>V.current?.removeOnUpdateListener(e)},[j,b]);let Ee=e=>{B(!0),k?.(e)},De=e=>{B(!1),ue?.(e)},Oe=e=>{z(!0),D?.(e)},ke=e=>{V.current&&(V.current.touched=!0),z(!1),O?.(e)},Ae=()=>j?j.touched&&j.hasError():!ae||!!y,K=()=>!!(se||j?.validators.find(e=>e.validatorId===`required`)),je=e=>{j?(j.set(e),E?.(j.value,S)):E?.(e,S)},q=de,J=j?j.value:x,Y=Ae();M.forEach(e=>{e.key===J&&(q=e.label)});let X=q||J,Z=X==null||typeof X==`string`&&X.trim()===``,Q=K()?g(`span`,{className:l.requiredMark,children:`*`}):null,Me=b&&K()?`${b} *`:b,$=R&&!w;return _(`div`,{...ye,className:p(ie,l.dropdownLabel,l.dropdown,{[l.dropdownLabelColumn]:!ce}),onMouseEnter:Ee,onMouseLeave:De,children:[g(re,{...w?{isOpen:!1}:{},onChange:e=>je((e||{key:``}).key),itemToString:e=>e?String(e.key):``,selectedItem:M.find(e=>e.key===J)??null,onStateChange:e=>{typeof e.isOpen==`boolean`&&Se(e.isOpen)},stateReducer:(e,t)=>L&&Object.prototype.hasOwnProperty.call(t,`isOpen`)?{...t,highlightedIndex:t.isOpen?M.indexOf(e.selectedItem):null}:t,children:({getItemProps:e,getMenuProps:t,getToggleButtonProps:i,closeMenu:a,isOpen:o,selectedItem:s,highlightedIndex:c,setHighlightedIndex:u})=>g(`div`,{children:_(`div`,{ref:H,onFocus:Oe,onBlur:ke,className:p(l.dropdownInput,{[l.dropdownInputPlain]:I,[l.dropdownInputReadOnly]:w&&!C},ge),children:[g(`button`,{tabIndex:oe,type:`button`,disabled:C,"aria-readonly":w||void 0,style:A?{padding:`6px`,border:`none`}:{},className:p(l.dropdownInputButton,{[l.dropdownInputButtonDisabled]:C,[l.dropdownInputButtonReadOnly]:w&&!C},fe),...i(),onClick:e=>{i().onClick?.(e),T?.(e)},ref:ve,children:Z?`\xA0`:X}),g(`button`,{type:`button`,tabIndex:-1,disabled:C,className:p(l.dropdownInputButtonIcon,pe),...i(),onClick:e=>{i().onClick?.(e),T?.(e)},children:!C&&!w&&g(m,{icon:h,className:p(l.dropdownInputButtonIconArrow,{[l.dropdownInputButtonIconArrowOpen]:o})})}),!C&&!w&&o?_(n,{children:[G&&g(ee,{onClose:a}),g(`div`,{...t({ref:e=>{U.current=e},"aria-label":b||F||void 0},{suppressRefError:!0}),style:G?Te:void 0,className:p(l.dropdownInputListAnim,{[r.sheet]:G,[l.dropdownInputListAnimWider]:A&&!G}),children:g(te,{onScroll:le,className:p(l.dropdownInputList,G&&r.sheetScroll),setHighlightedIndex:u,children:M.map((t,n)=>g(`div`,{...e({index:n,item:t,disabled:!!t.disabled}),className:p(l.dropdownInputListItem,me,{[l.dropdownInputListItemActive]:c===n,[l.dropdownInputListItemSelected]:s===t,[l.dropdownInputListItemDisabled]:!!t.disabled}),children:t.label},t.key))})})]}):null,g(`fieldset`,{className:p(l.dropdownFieldset,{[l.dropdownBorderPlain]:I,[l.dropdownBorderFocused]:$,[l.dropdownBorderInvalid]:Y,[l.dropdownBorderError]:Y}),children:g(`legend`,{className:p(l.dropdownFieldsetLegend,{[l.dropdownFieldsetLegendActive]:N&&(P||$||!Z)}),children:g(`span`,{children:Me})})}),N&&b&&_(`div`,{className:p(l.dropdownMatLabel,{[l.dropdownMatLabelFloating]:P||$||!Z}),children:[b,Q]}),N&&F&&g(`div`,{className:p(l.dropdownPlaceholder,$&&!q&&l.dropdownPlaceholderShown),children:F})]})})}),b&&!N&&_(`div`,{className:p(l.dropdownLabelText,he),children:[b,Q]}),g(c,{variant:`error`,message:j?j.getCurrentErrorMessage():y||``,isVisible:Y&&(R||be)})]})}export{v as default};
+import{useComponentDefaults as e}from"../configProvider/useComponentDefaults.mjs";import{usePresentationDefault as t}from"../configProvider/usePresentationDefault.mjs";import{Presentation as n}from"../configProvider/presentation.types.mjs";import ee from"../styles/sheet.module.mjs";import{PopoverAlign as te,PopoverPlacement as ne}from"../popover/popover.types.mjs";import r from"../hooks/useSheet.mjs";import re from"../popover/popover.mjs";import i from"../tooltip/tooltip.mjs";import ie from"../infiniteBlock/infiniteBlock.mjs";import a from"./dropdown.module.mjs";import{useEffect as o,useLayoutEffect as s,useRef as c,useState as l}from"react";import u from"classnames";import{FontAwesomeIcon as ae}from"@fortawesome/react-fontawesome";import{faChevronDown as oe}from"@fortawesome/free-solid-svg-icons";import{jsx as d,jsxs as f}from"react/jsx-runtime";import se from"downshift";function p(p){let{errorMessage:m=``,className:ce=``,style:le,label:h=``,value:ue=``,isValid:de=!0,tabIndex:g=0,isRequired:_=!1,customProps:v={},isRow:fe=!1,disabled:y=!1,readOnly:b=!1,onScroll:pe=()=>Promise.resolve(),onClick:x,onChange:S,onFocus:me=null,onBlur:he=null,onMouseEnter:ge=null,onMouseLeave:_e=null,dropdownLabel:ve,isDropdownListWider:C=!1,formValidator:w=null,classNames:T,styles:E,items:D=[],useMatLabelStyle:O=!0,alwaysFloatLabel:k=!1,placeholder:A=``,plainStyle:j=!1,scrollToSelected:M=!1,presentation:N,reactRef:P,...F}=e(`Dropdown`,p),[I,L]=l(!1),[ye,R]=l(!1),[,be]=l(0),z=c(w),B=c(null),V=c(null),[H,xe]=l(!1),Se=t(),U=N??Se??n.Default,{isSheet:W}=r(U);s(()=>{let e=B.current,t=V.current;H&&!W&&e&&t&&(t.style.fontSize=window.getComputedStyle(e).fontSize)},[H,W]),o(()=>{if(z.current=w,!z.current)return;z.current.label=h??``,z.current.validate();let e=()=>be(e=>e+1);return z.current.registerOnUpdateListener(e),()=>z.current?.removeOnUpdateListener(e)},[w,h]);let Ce=e=>{R(!0),ge?.(e)},we=e=>{R(!1),_e?.(e)},Te=e=>{L(!0),me?.(e)},Ee=e=>{z.current&&(z.current.touched=!0),L(!1),he?.(e)},De=()=>w?w.touched&&w.hasError():!de||!!m,G=()=>!!(_||w?.validators.find(e=>e.validatorId===`required`)),K=e=>{w?(w.set(e),S?.(w.value,v)):S?.(e,v)},q=ve,J=w?w.value:ue,Y=De();D.forEach(e=>{e.key===J&&(q=e.label)});let X=q||J,Z=X==null||typeof X==`string`&&X.trim()===``,Q=G()?d(`span`,{className:a.requiredMark,children:`*`}):null,Oe=h&&G()?`${h} *`:h,$=I&&!b;return f(`div`,{...F,className:u(ce,T?.root,a.dropdownLabel,a.dropdown,{[a.dropdownLabelColumn]:!fe}),style:{...le,...E?.root},onMouseEnter:Ce,onMouseLeave:we,children:[d(se,{...b?{isOpen:!1}:{},onChange:e=>K((e||{key:``}).key),itemToString:e=>e?String(e.key):``,selectedItem:D.find(e=>e.key===J)??null,onStateChange:e=>{typeof e.isOpen==`boolean`&&xe(e.isOpen)},stateReducer:(e,t)=>M&&Object.prototype.hasOwnProperty.call(t,`isOpen`)?{...t,highlightedIndex:t.isOpen?D.indexOf(e.selectedItem):null}:t,children:({getItemProps:e,getMenuProps:t,getToggleButtonProps:n,closeMenu:r,isOpen:i,selectedItem:o,highlightedIndex:s,setHighlightedIndex:c})=>d(`div`,{children:d(re,{isOpen:!y&&!b&&i,onOpenChange:e=>{e||r()},placement:ne.Bottom,align:te.Start,offset:0,withArrow:!1,constrainWidth:!1,width:`trigger`,closeOnTriggerClick:!1,focusOnOpen:!1,presentation:U,classNames:{panel:a.dropdownPanel},content:d(`div`,{...t({ref:e=>{V.current=e},"aria-label":h||A||void 0},{suppressRefError:!0}),className:u(!W&&a.dropdownInputListAnim,{[a.dropdownInputListAnimWider]:C&&!W}),children:d(ie,{onScroll:pe,className:u(a.dropdownInputList,W&&ee.sheetScroll,T?.list),style:E?.list,setHighlightedIndex:c,children:D.map((t,n)=>d(`div`,{...e({index:n,item:t,disabled:!!t.disabled}),style:E?.option,className:u(a.dropdownInputListItem,T?.option,{[a.dropdownInputListItemActive]:s===n,[a.dropdownInputListItemSelected]:o===t,[a.dropdownInputListItemDisabled]:!!t.disabled}),children:t.label},t.key))})}),children:f(`div`,{ref:B,onFocus:Te,onBlur:Ee,className:u(a.dropdownInput,{[a.dropdownInputPlain]:j,[a.dropdownInputReadOnly]:b&&!y},T?.field),style:E?.field,children:[d(`button`,{tabIndex:g,type:`button`,disabled:y,"aria-readonly":b||void 0,className:u(a.dropdownInputButton,{[a.dropdownInputButtonDisabled]:y,[a.dropdownInputButtonReadOnly]:b&&!y},T?.control),style:{...C?{padding:`6px`,border:`none`}:{},...E?.control},...n(),onClick:e=>{n().onClick?.(e),x?.(e)},ref:P,children:Z?`\xA0`:X}),d(`button`,{type:`button`,tabIndex:-1,disabled:y,className:u(a.dropdownInputButtonIcon,T?.icon),style:E?.icon,...n(),onMouseDown:e=>e.preventDefault(),onClick:e=>{n().onClick?.(e),x?.(e)},children:!y&&!b&&d(ae,{icon:oe,className:u(a.dropdownInputButtonIconArrow,{[a.dropdownInputButtonIconArrowOpen]:i})})}),d(`fieldset`,{className:u(a.dropdownFieldset,{[a.dropdownBorderPlain]:j,[a.dropdownBorderFocused]:$,[a.dropdownBorderInvalid]:Y,[a.dropdownBorderError]:Y}),children:d(`legend`,{className:u(a.dropdownFieldsetLegend,{[a.dropdownFieldsetLegendActive]:O&&(k||$||!Z)}),children:d(`span`,{children:Oe})})}),O&&h&&f(`div`,{className:u(a.dropdownMatLabel,{[a.dropdownMatLabelFloating]:k||$||!Z},T?.label),style:E?.label,children:[h,Q]}),O&&A&&d(`div`,{className:u(a.dropdownPlaceholder,$&&!q&&a.dropdownPlaceholderShown),children:A})]})})})}),h&&!O&&f(`div`,{className:u(a.dropdownLabelText,T?.label),style:E?.label,children:[h,Q]}),d(i,{variant:`error`,message:w?w.getCurrentErrorMessage():m||``,isVisible:Y&&(I||ye)})]})}export{p as default};
 //# sourceMappingURL=dropdown.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"dropdown.mjs","names":[],"sources":["../../../../package/common/dropdown/dropdown.tsx"],"sourcesContent":["import React, { useState, useEffect, useLayoutEffect, useRef } from 'react';\nimport cx from 'classnames';\nimport InfiniteBlock from 'components/common/infiniteBlock';\nimport BodyEnd from 'components/common/bodyEnd';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { faChevronDown as dropdownIcon } from '@fortawesome/free-solid-svg-icons';\nimport Downshift, { StateChangeOptions, DownshiftState } from 'downshift';\nimport Tooltip from 'components/common/tooltip';\n\nimport { useFloatingPosition } from '../floatingMenu/useFloatingPosition';\nimport { useComponentDefaults, usePresentationDefault } from '../configProvider';\nimport { useSheet } from '../hooks/useSheet';\nimport { useOverlay } from '../hooks/useOverlay';\nimport { Presentation } from '../floatingMenu/floatingMenu.types';\nimport styles from './dropdown.module.pcss';\nimport sheetStyles from '../styles/sheet.module.pcss';\nimport SheetBackdrop from '../sheetBackdrop';\nimport type { DropdownProps, DropdownItem } from './dropdown.types';\n\nfunction Dropdown(props: DropdownProps) {\n  const {\n    errorMessage = '',\n    className = '',\n    label = '',\n    value = '',\n    isValid = true,\n    tabIndex = 0,\n    isRequired = false,\n    customProps = {},\n    isRow = false,\n    disabled = false,\n    readOnly = false,\n    onScroll = () => Promise.resolve(),\n    onClick,\n    onChange,\n    onFocus: onFocusProp = null,\n    onBlur: onBlurProp = null,\n    onMouseEnter: onMouseEnterProp = null,\n    onMouseLeave: onMouseLeaveProp = null,\n    dropdownLabel: dropdownLabelProp,\n    isDropdownListWider = false,\n    inputClassName = '',\n    dropDownIconClassName = '',\n    dropDownClassName = '',\n    formValidator = null,\n    labelClassName = '',\n    dropDownInputClassName = '',\n    items = [],\n    useMatLabelStyle = true,\n    alwaysFloatLabel = false,\n    placeholder = '',\n    plainStyle = false,\n    scrollToSelected = false,\n    presentation: presentationProp,\n    reactRef,\n    ...rest\n  } = useComponentDefaults('Dropdown', props);\n  const [isFocused, setIsFocused] = useState(false);\n  const [isHovered, setIsHovered] = useState(false);\n  const [, forceUpdate] = useState(0);\n  const fvRef = useRef(formValidator);\n  const triggerRef = useRef<HTMLDivElement>(null);\n  const anchorRef = useRef<HTMLDivElement>(null);\n  const [menuIsOpen, setMenuIsOpen] = useState(false);\n\n  // Explicit prop → this component's global default → the app-wide one → anchored.\n  const appPresentation = usePresentationDefault();\n  const presentation = presentationProp ?? appPresentation ?? Presentation.Default;\n  const { isSheet, sheetStyle } = useSheet(presentation);\n\n  useLayoutEffect(() => {\n    const trigger = triggerRef.current;\n    const menu = anchorRef.current;\n    // A sheet spans the screen; only an anchored list matches the trigger's width.\n    if (!menuIsOpen || isSheet || !trigger || !menu) return;\n    const { width } = trigger.getBoundingClientRect();\n    const { fontSize } = window.getComputedStyle(trigger);\n    menu.style.width = `${width}px`;\n    menu.style.fontSize = fontSize;\n  }, [menuIsOpen, isSheet]);\n\n  // A sheet isn't anchored to anything, so there's nothing to track, flip or clamp.\n  useFloatingPosition({\n    isOpen: menuIsOpen && !isSheet,\n    triggerRef,\n    anchorRef,\n    panelRef: anchorRef,\n    flipClassName: styles.dropdownInputListAnimFlip,\n  });\n\n  // Registered for as long as the list is open, not just as a sheet: it puts the list on the\n  // overlay stack so an enclosing Modal doesn't also act on the Escape that closes it. No\n  // `onEscape` of its own — Downshift already closes the list from the toggle button. Focus isn't\n  // trapped: Downshift keeps focus on that button and drives the list from there.\n  useOverlay({\n    isActive: menuIsOpen,\n    containerRef: anchorRef,\n    trapFocus: false,\n    lockScroll: isSheet,\n  });\n\n  useEffect(() => {\n    fvRef.current = formValidator;\n    if (!fvRef.current) return;\n    fvRef.current.label = label ?? '';\n    fvRef.current.validate();\n    const listener = () => forceUpdate((n) => n + 1);\n    fvRef.current.registerOnUpdateListener(listener);\n    return () => fvRef.current?.removeOnUpdateListener(listener);\n  }, [formValidator, label]);\n\n  const onMouseEnterHandler = (event: React.MouseEvent) => {\n    setIsHovered(true);\n    onMouseEnterProp?.(event);\n  };\n\n  const onMouseLeaveHandler = (event: React.MouseEvent) => {\n    setIsHovered(false);\n    onMouseLeaveProp?.(event);\n  };\n\n  const onFocusHandler = (event: React.FocusEvent) => {\n    setIsFocused(true);\n    onFocusProp?.(event);\n  };\n\n  const onBlurHandler = (event: React.FocusEvent) => {\n    if (fvRef.current) fvRef.current.touched = true;\n    setIsFocused(false);\n    onBlurProp?.(event);\n  };\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 onChangeHandler = (val: string | number): void => {\n    if (formValidator) {\n      formValidator.set(val);\n      onChange?.(formValidator.value, customProps);\n    } else {\n      onChange?.(val, customProps);\n    }\n  };\n\n  let dropdownLabel = dropdownLabelProp;\n  const currentValue = formValidator ? (formValidator.value as string | number) : value;\n  const hasErr = hasError();\n\n  items.forEach((item: DropdownItem) => {\n    if (item.key === currentValue) {\n      dropdownLabel = item.label as string;\n    }\n  });\n\n  const displayValue = dropdownLabel || currentValue;\n  const isDisplayBlank = displayValue == null || (typeof displayValue === 'string' && displayValue.trim() === '');\n\n  const requiredMark = computedIsRequired() ? <span className={styles.requiredMark}>*</span> : null;\n  const editedLabel = label && computedIsRequired() ? `${label} *` : label;\n\n  const showFocus = isFocused && !readOnly;\n\n  return (\n    <div\n      {...rest}\n      className={cx(className, styles.dropdownLabel, styles.dropdown, {\n        [styles.dropdownLabelColumn]: !isRow,\n      })}\n      onMouseEnter={onMouseEnterHandler}\n      onMouseLeave={onMouseLeaveHandler}\n    >\n      <Downshift\n        {...(readOnly ? { isOpen: false } : {})}\n        onChange={(selection: DropdownItem | null) => onChangeHandler((selection || { key: '' }).key)}\n        itemToString={(item: DropdownItem | null) => (item ? String(item.key) : '')}\n        selectedItem={items.find((el) => el.key === currentValue) ?? null}\n        onStateChange={(changes: StateChangeOptions<DropdownItem>) => {\n          if (typeof changes.isOpen === 'boolean') setMenuIsOpen(changes.isOpen);\n        }}\n        stateReducer={(state: DownshiftState<DropdownItem>, changes: StateChangeOptions<DropdownItem>) => {\n          if (scrollToSelected && Object.prototype.hasOwnProperty.call(changes, 'isOpen')) {\n            return {\n              ...changes,\n              highlightedIndex: changes.isOpen ? items.indexOf(state.selectedItem as DropdownItem) : null,\n            };\n          }\n          return changes;\n        }}\n      >\n        {({\n          getItemProps,\n          getMenuProps,\n          getToggleButtonProps,\n          closeMenu,\n          isOpen,\n          selectedItem,\n          highlightedIndex,\n          setHighlightedIndex,\n        }) => (\n          <div>\n            <div\n              ref={triggerRef}\n              onFocus={onFocusHandler}\n              onBlur={onBlurHandler}\n              className={cx(\n                styles.dropdownInput,\n                {\n                  [styles.dropdownInputPlain]: plainStyle,\n                  [styles.dropdownInputReadOnly]: readOnly && !disabled,\n                },\n                dropDownInputClassName,\n              )}\n            >\n              <button\n                tabIndex={tabIndex}\n                type='button'\n                disabled={disabled}\n                aria-readonly={readOnly || undefined}\n                style={isDropdownListWider ? { padding: '6px', border: 'none' } : {}}\n                className={cx(\n                  styles.dropdownInputButton,\n                  {\n                    [styles.dropdownInputButtonDisabled]: disabled,\n                    [styles.dropdownInputButtonReadOnly]: readOnly && !disabled,\n                  },\n                  inputClassName,\n                )}\n                {...getToggleButtonProps()}\n                onClick={(e: React.MouseEvent<HTMLButtonElement>) => {\n                  getToggleButtonProps().onClick?.(e);\n                  onClick?.(e);\n                }}\n                ref={reactRef}\n              >\n                {/* Non-breaking space when blank (same text-node layout as a\n                    real value) so the button keeps a full line of height. */}\n                {isDisplayBlank ? '\\u00A0' : displayValue}\n              </button>\n              <button\n                type='button'\n                tabIndex={-1}\n                disabled={disabled}\n                className={cx(styles.dropdownInputButtonIcon, dropDownIconClassName)}\n                {...getToggleButtonProps()}\n                onClick={(e: React.MouseEvent<HTMLButtonElement>) => {\n                  getToggleButtonProps().onClick?.(e);\n                  onClick?.(e);\n                }}\n              >\n                {!disabled && !readOnly && (\n                  <FontAwesomeIcon\n                    icon={dropdownIcon}\n                    className={cx(styles.dropdownInputButtonIconArrow, {\n                      [styles.dropdownInputButtonIconArrowOpen]: isOpen,\n                    })}\n                  />\n                )}\n              </button>\n              {!disabled && !readOnly && isOpen ? (\n                <BodyEnd>\n                  {isSheet && <SheetBackdrop onClose={closeMenu} />}\n                  <div\n                    {...getMenuProps(\n                      {\n                        ref: (node: HTMLDivElement | null) => {\n                          anchorRef.current = node;\n                        },\n                        'aria-label': label || placeholder || undefined,\n                      },\n                      { suppressRefError: true },\n                    )}\n                    style={isSheet ? sheetStyle : undefined}\n                    className={cx(styles.dropdownInputListAnim, {\n                      [sheetStyles.sheet]: isSheet,\n                      [styles.dropdownInputListAnimWider]: isDropdownListWider && !isSheet,\n                    })}\n                  >\n                    <InfiniteBlock\n                      onScroll={onScroll}\n                      className={cx(styles.dropdownInputList, isSheet && sheetStyles.sheetScroll)}\n                      setHighlightedIndex={setHighlightedIndex}\n                    >\n                      {items.map((item: DropdownItem, index: number) => (\n                        <div\n                          key={item.key}\n                          {...getItemProps({ index, item, disabled: !!item.disabled })}\n                          className={cx(styles.dropdownInputListItem, dropDownClassName, {\n                            [styles.dropdownInputListItemActive]: highlightedIndex === index,\n                            [styles.dropdownInputListItemSelected]: selectedItem === item,\n                            [styles.dropdownInputListItemDisabled]: !!item.disabled,\n                          })}\n                        >\n                          {item.label}\n                        </div>\n                      ))}\n                    </InfiniteBlock>\n                  </div>\n                </BodyEnd>\n              ) : null}\n              <fieldset\n                className={cx(styles.dropdownFieldset, {\n                  [styles.dropdownBorderPlain]: plainStyle,\n                  [styles.dropdownBorderFocused]: showFocus,\n                  [styles.dropdownBorderInvalid]: hasErr,\n                  [styles.dropdownBorderError]: hasErr,\n                })}\n              >\n                <legend\n                  className={cx(styles.dropdownFieldsetLegend, {\n                    [styles.dropdownFieldsetLegendActive]:\n                      useMatLabelStyle && (alwaysFloatLabel || showFocus || !isDisplayBlank),\n                  })}\n                >\n                  <span>{editedLabel}</span>\n                </legend>\n              </fieldset>\n              {useMatLabelStyle && label && (\n                <div\n                  className={cx(styles.dropdownMatLabel, {\n                    [styles.dropdownMatLabelFloating]: alwaysFloatLabel || showFocus || !isDisplayBlank,\n                  })}\n                >\n                  {label}\n                  {requiredMark}\n                </div>\n              )}\n              {useMatLabelStyle && placeholder && (\n                <div\n                  className={cx(\n                    styles.dropdownPlaceholder,\n                    showFocus && !dropdownLabel && styles.dropdownPlaceholderShown,\n                  )}\n                >\n                  {placeholder}\n                </div>\n              )}\n            </div>\n          </div>\n        )}\n      </Downshift>\n      {label && !useMatLabelStyle && (\n        <div className={cx(styles.dropdownLabelText, labelClassName)}>\n          {label}\n          {requiredMark}\n        </div>\n      )}\n      <Tooltip\n        variant='error'\n        message={formValidator ? formValidator.getCurrentErrorMessage() : errorMessage || ''}\n        isVisible={hasErr && (isFocused || isHovered)}\n      />\n    </div>\n  );\n}\n\nexport default Dropdown;\n"],"mappings":"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"}
+{"version":3,"file":"dropdown.mjs","names":[],"sources":["../../../../package/common/dropdown/dropdown.tsx"],"sourcesContent":["import React, { useState, useEffect, useLayoutEffect, useRef } from 'react';\nimport cx from 'classnames';\nimport InfiniteBlock from 'components/common/infiniteBlock';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { faChevronDown as dropdownIcon } from '@fortawesome/free-solid-svg-icons';\nimport Downshift, { StateChangeOptions, DownshiftState } from 'downshift';\nimport Tooltip from 'components/common/tooltip';\n\nimport Popover from '../popover';\nimport { PopoverAlign, PopoverPlacement } from '../popover/popover.types';\nimport { useComponentDefaults, usePresentationDefault } from '../configProvider';\nimport { useSheet } from '../hooks/useSheet';\nimport { Presentation } from '../configProvider/presentation.types';\nimport styles from './dropdown.module.pcss';\nimport sheetStyles from '../styles/sheet.module.pcss';\nimport type { DropdownProps, DropdownItem } from './dropdown.types';\n\nfunction Dropdown(props: DropdownProps) {\n  const {\n    errorMessage = '',\n    className = '',\n    style,\n    label = '',\n    value = '',\n    isValid = true,\n    tabIndex = 0,\n    isRequired = false,\n    customProps = {},\n    isRow = false,\n    disabled = false,\n    readOnly = false,\n    onScroll = () => Promise.resolve(),\n    onClick,\n    onChange,\n    onFocus: onFocusProp = null,\n    onBlur: onBlurProp = null,\n    onMouseEnter: onMouseEnterProp = null,\n    onMouseLeave: onMouseLeaveProp = null,\n    dropdownLabel: dropdownLabelProp,\n    isDropdownListWider = false,\n    formValidator = null,\n    classNames,\n    styles: slotStyles,\n    items = [],\n    useMatLabelStyle = true,\n    alwaysFloatLabel = false,\n    placeholder = '',\n    plainStyle = false,\n    scrollToSelected = false,\n    presentation: presentationProp,\n    reactRef,\n    ...rest\n  } = useComponentDefaults('Dropdown', props);\n  const [isFocused, setIsFocused] = useState(false);\n  const [isHovered, setIsHovered] = useState(false);\n  const [, forceUpdate] = useState(0);\n  const fvRef = useRef(formValidator);\n  const triggerRef = useRef<HTMLDivElement>(null);\n  const anchorRef = useRef<HTMLDivElement>(null);\n  const [menuIsOpen, setMenuIsOpen] = useState(false);\n\n  // Explicit prop → this component's global default → the app-wide one → anchored.\n  // Resolved here rather than left to Popover so that this component and the panel\n  // it opens can never disagree about whether they are presenting as a sheet.\n  const appPresentation = usePresentationDefault();\n  const presentation = presentationProp ?? appPresentation ?? Presentation.Default;\n  const { isSheet } = useSheet(presentation);\n\n  // The list reads at the field's size, which is not always the page's: a Dropdown\n  // inside something with a smaller font should not open a list at the default one.\n  // Width is Popover's job, through `width='trigger'`.\n  useLayoutEffect(() => {\n    const trigger = triggerRef.current;\n    const menu = anchorRef.current;\n    if (!menuIsOpen || isSheet || !trigger || !menu) return;\n    menu.style.fontSize = window.getComputedStyle(trigger).fontSize;\n  }, [menuIsOpen, isSheet]);\n\n  useEffect(() => {\n    fvRef.current = formValidator;\n    if (!fvRef.current) return;\n    fvRef.current.label = label ?? '';\n    fvRef.current.validate();\n    const listener = () => forceUpdate((n) => n + 1);\n    fvRef.current.registerOnUpdateListener(listener);\n    return () => fvRef.current?.removeOnUpdateListener(listener);\n  }, [formValidator, label]);\n\n  const onMouseEnterHandler = (event: React.MouseEvent) => {\n    setIsHovered(true);\n    onMouseEnterProp?.(event);\n  };\n\n  const onMouseLeaveHandler = (event: React.MouseEvent) => {\n    setIsHovered(false);\n    onMouseLeaveProp?.(event);\n  };\n\n  const onFocusHandler = (event: React.FocusEvent) => {\n    setIsFocused(true);\n    onFocusProp?.(event);\n  };\n\n  const onBlurHandler = (event: React.FocusEvent) => {\n    if (fvRef.current) fvRef.current.touched = true;\n    setIsFocused(false);\n    onBlurProp?.(event);\n  };\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 onChangeHandler = (val: string | number): void => {\n    if (formValidator) {\n      formValidator.set(val);\n      onChange?.(formValidator.value, customProps);\n    } else {\n      onChange?.(val, customProps);\n    }\n  };\n\n  let dropdownLabel = dropdownLabelProp;\n  const currentValue = formValidator ? (formValidator.value as string | number) : value;\n  const hasErr = hasError();\n\n  items.forEach((item: DropdownItem) => {\n    if (item.key === currentValue) {\n      dropdownLabel = item.label as string;\n    }\n  });\n\n  const displayValue = dropdownLabel || currentValue;\n  const isDisplayBlank = displayValue == null || (typeof displayValue === 'string' && displayValue.trim() === '');\n\n  const requiredMark = computedIsRequired() ? <span className={styles.requiredMark}>*</span> : null;\n  const editedLabel = label && computedIsRequired() ? `${label} *` : label;\n\n  const showFocus = isFocused && !readOnly;\n\n  return (\n    <div\n      {...rest}\n      className={cx(className, classNames?.root, styles.dropdownLabel, styles.dropdown, {\n        [styles.dropdownLabelColumn]: !isRow,\n      })}\n      style={{ ...style, ...slotStyles?.root }}\n      onMouseEnter={onMouseEnterHandler}\n      onMouseLeave={onMouseLeaveHandler}\n    >\n      <Downshift\n        {...(readOnly ? { isOpen: false } : {})}\n        onChange={(selection: DropdownItem | null) => onChangeHandler((selection || { key: '' }).key)}\n        itemToString={(item: DropdownItem | null) => (item ? String(item.key) : '')}\n        selectedItem={items.find((el) => el.key === currentValue) ?? null}\n        onStateChange={(changes: StateChangeOptions<DropdownItem>) => {\n          if (typeof changes.isOpen === 'boolean') setMenuIsOpen(changes.isOpen);\n        }}\n        stateReducer={(state: DownshiftState<DropdownItem>, changes: StateChangeOptions<DropdownItem>) => {\n          if (scrollToSelected && Object.prototype.hasOwnProperty.call(changes, 'isOpen')) {\n            return {\n              ...changes,\n              highlightedIndex: changes.isOpen ? items.indexOf(state.selectedItem as DropdownItem) : null,\n            };\n          }\n          return changes;\n        }}\n      >\n        {({\n          getItemProps,\n          getMenuProps,\n          getToggleButtonProps,\n          closeMenu,\n          isOpen,\n          selectedItem,\n          highlightedIndex,\n          setHighlightedIndex,\n        }) => (\n          <div>\n            <Popover\n              // Downshift owns the open state, the highlight and the keys; Popover\n              // owns where the list goes. So the open half of `onOpenChange` is\n              // Downshift's business already, and only a close is acted on: the\n              // outside click and the Escape Popover sees before it does.\n              isOpen={!disabled && !readOnly && isOpen}\n              onOpenChange={(next) => {\n                if (!next) closeMenu();\n              }}\n              placement={PopoverPlacement.Bottom}\n              align={PopoverAlign.Start}\n              offset={0}\n              withArrow={false}\n              constrainWidth={false}\n              width='trigger'\n              // The toggle button answers a click on the field, and the focus\n              // belongs to it while the list is open.\n              closeOnTriggerClick={false}\n              focusOnOpen={false}\n              presentation={presentation}\n              classNames={{ panel: styles.dropdownPanel }}\n              content={\n                <div\n                  {...getMenuProps(\n                    {\n                      ref: (node: HTMLDivElement | null) => {\n                        anchorRef.current = node;\n                      },\n                      'aria-label': label || placeholder || undefined,\n                    },\n                    { suppressRefError: true },\n                  )}\n                  // A sheet's own panel does the clipping and the scrolling, and\n                  // spans the screen rather than sizing itself to the field.\n                  className={cx(!isSheet && styles.dropdownInputListAnim, {\n                    [styles.dropdownInputListAnimWider]: isDropdownListWider && !isSheet,\n                  })}\n                >\n                  <InfiniteBlock\n                    onScroll={onScroll}\n                    className={cx(styles.dropdownInputList, isSheet && sheetStyles.sheetScroll, classNames?.list)}\n                    style={slotStyles?.list}\n                    setHighlightedIndex={setHighlightedIndex}\n                  >\n                    {items.map((item: DropdownItem, index: number) => (\n                      <div\n                        key={item.key}\n                        {...getItemProps({ index, item, disabled: !!item.disabled })}\n                        style={slotStyles?.option}\n                        className={cx(styles.dropdownInputListItem, classNames?.option, {\n                          [styles.dropdownInputListItemActive]: highlightedIndex === index,\n                          [styles.dropdownInputListItemSelected]: selectedItem === item,\n                          [styles.dropdownInputListItemDisabled]: !!item.disabled,\n                        })}\n                      >\n                        {item.label}\n                      </div>\n                    ))}\n                  </InfiniteBlock>\n                </div>\n              }\n            >\n              <div\n                ref={triggerRef}\n                onFocus={onFocusHandler}\n                onBlur={onBlurHandler}\n                className={cx(\n                  styles.dropdownInput,\n                  {\n                    [styles.dropdownInputPlain]: plainStyle,\n                    [styles.dropdownInputReadOnly]: readOnly && !disabled,\n                  },\n                  classNames?.field,\n                )}\n                style={slotStyles?.field}\n              >\n                <button\n                  tabIndex={tabIndex}\n                  type='button'\n                  disabled={disabled}\n                  aria-readonly={readOnly || undefined}\n                  className={cx(\n                    styles.dropdownInputButton,\n                    {\n                      [styles.dropdownInputButtonDisabled]: disabled,\n                      [styles.dropdownInputButtonReadOnly]: readOnly && !disabled,\n                    },\n                    classNames?.control,\n                  )}\n                  style={{ ...(isDropdownListWider ? { padding: '6px', border: 'none' } : {}), ...slotStyles?.control }}\n                  {...getToggleButtonProps()}\n                  onClick={(e: React.MouseEvent<HTMLButtonElement>) => {\n                    getToggleButtonProps().onClick?.(e);\n                    onClick?.(e);\n                  }}\n                  ref={reactRef}\n                >\n                  {/* Non-breaking space when blank (same text-node layout as a\n                    real value) so the button keeps a full line of height. */}\n                  {isDisplayBlank ? '\\u00A0' : displayValue}\n                </button>\n                <button\n                  type='button'\n                  tabIndex={-1}\n                  disabled={disabled}\n                  className={cx(styles.dropdownInputButtonIcon, classNames?.icon)}\n                  style={slotStyles?.icon}\n                  {...getToggleButtonProps()}\n                  // Keeping the focus where it is, rather than letting mousedown move\n                  // it here: both buttons carry the same downshift toggle props, and\n                  // the blur of the other one cancels the toggle this click performs,\n                  // so the chevron did nothing while the dropdown had focus.\n                  onMouseDown={(e: React.MouseEvent<HTMLButtonElement>) => e.preventDefault()}\n                  onClick={(e: React.MouseEvent<HTMLButtonElement>) => {\n                    getToggleButtonProps().onClick?.(e);\n                    onClick?.(e);\n                  }}\n                >\n                  {!disabled && !readOnly && (\n                    <FontAwesomeIcon\n                      icon={dropdownIcon}\n                      className={cx(styles.dropdownInputButtonIconArrow, {\n                        [styles.dropdownInputButtonIconArrowOpen]: isOpen,\n                      })}\n                    />\n                  )}\n                </button>\n                <fieldset\n                  className={cx(styles.dropdownFieldset, {\n                    [styles.dropdownBorderPlain]: plainStyle,\n                    [styles.dropdownBorderFocused]: showFocus,\n                    [styles.dropdownBorderInvalid]: hasErr,\n                    [styles.dropdownBorderError]: hasErr,\n                  })}\n                >\n                  <legend\n                    className={cx(styles.dropdownFieldsetLegend, {\n                      [styles.dropdownFieldsetLegendActive]:\n                        useMatLabelStyle && (alwaysFloatLabel || showFocus || !isDisplayBlank),\n                    })}\n                  >\n                    <span>{editedLabel}</span>\n                  </legend>\n                </fieldset>\n                {useMatLabelStyle && label && (\n                  <div\n                    className={cx(\n                      styles.dropdownMatLabel,\n                      {\n                        [styles.dropdownMatLabelFloating]: alwaysFloatLabel || showFocus || !isDisplayBlank,\n                      },\n                      // The floating and the stacked label are two renderings of\n                      // the same thing, so one slot reaches whichever is in use.\n                      classNames?.label,\n                    )}\n                    style={slotStyles?.label}\n                  >\n                    {label}\n                    {requiredMark}\n                  </div>\n                )}\n                {useMatLabelStyle && placeholder && (\n                  <div\n                    className={cx(\n                      styles.dropdownPlaceholder,\n                      showFocus && !dropdownLabel && styles.dropdownPlaceholderShown,\n                    )}\n                  >\n                    {placeholder}\n                  </div>\n                )}\n              </div>\n            </Popover>\n          </div>\n        )}\n      </Downshift>\n      {label && !useMatLabelStyle && (\n        <div className={cx(styles.dropdownLabelText, classNames?.label)} style={slotStyles?.label}>\n          {label}\n          {requiredMark}\n        </div>\n      )}\n      <Tooltip\n        variant='error'\n        message={formValidator ? formValidator.getCurrentErrorMessage() : errorMessage || ''}\n        isVisible={hasErr && (isFocused || isHovered)}\n      />\n    </div>\n  );\n}\n\nexport default Dropdown;\n"],"mappings":"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"}

package/dist/esm/common/dropdown/dropdown.module.mjs

@@ -1,2 +1,2 @@
-var e=`required-mark_fy7Fm`,t=`dropdown_XTshY`,n=`dropdown-label_TIpeK`,r=`dropdown-label-column_cMCBc`,i=`dropdown-label-text_u-UKq`,a=`dropdown-input_WiPcb`,o=`dropdown-input-plain_Ap12N`,s=`dropdown-input-readOnly_3GWSO`,c=`dropdown-input-button_ziKKi`,l=`dropdown-input-button-disabled_JEaO-`,u=`dropdown-input-button-readOnly_QhBYY`,d=`dropdown-input-button-icon_jl7EY`,f=`dropdown-input-button-icon-arrow_SFJbx`,p=`dropdown-input-button-icon-arrow-open_8yQbZ`,m=`dropdown-input-list-anim_knSMT`,h=`dropdown-input-list-anim-flip_O6wWY`,g=`dropdown-input-list-anim-wider_-YyLJ`,_=`dropdown-input-list_JnMbA`,v=`dropdown-input-list-item_EAy5L`,y=`dropdown-input-list-item-active_0dhia`,b=`dropdown-input-list-item-selected_hShJf`,x=`dropdown-input-list-item-disabled_3r-Yn`,S=`dropdown-fieldset_wQwTf`,C=`dropdown-fieldset-legend_a1M4L`,w=`dropdown-fieldset-legend-active_bnR5F`,T=`dropdown-placeholder_QYMPZ`,E=`dropdown-placeholder-shown_-IkNH`,D=`fadeIn_oMJZj`,O=`dropdown-matLabel_iHQnt`,k=`dropdown-matLabel-floating_zY51S`,A=`dropdown-border-focused_Te-ER`,j=`dropdown-border-plain_Bbh-3`,M=`dropdown-border-invalid_ySVaS`,N=`dropdown-border-error_-JB33`,P={"required-mark":`required-mark_fy7Fm`,requiredMark:e,dropdown:t,"dropdown-label":`dropdown-label_TIpeK`,dropdownLabel:n,"dropdown-label-column":`dropdown-label-column_cMCBc`,dropdownLabelColumn:r,"dropdown-label-text":`dropdown-label-text_u-UKq`,dropdownLabelText:i,"dropdown-input":`dropdown-input_WiPcb`,dropdownInput:a,"dropdown-input-plain":`dropdown-input-plain_Ap12N`,dropdownInputPlain:o,"dropdown-input-readOnly":`dropdown-input-readOnly_3GWSO`,dropdownInputReadOnly:s,"dropdown-input-button":`dropdown-input-button_ziKKi`,dropdownInputButton:c,"dropdown-input-button-disabled":`dropdown-input-button-disabled_JEaO-`,dropdownInputButtonDisabled:l,"dropdown-input-button-readOnly":`dropdown-input-button-readOnly_QhBYY`,dropdownInputButtonReadOnly:u,"dropdown-input-button-icon":`dropdown-input-button-icon_jl7EY`,dropdownInputButtonIcon:d,"dropdown-input-button-icon-arrow":`dropdown-input-button-icon-arrow_SFJbx`,dropdownInputButtonIconArrow:f,"dropdown-input-button-icon-arrow-open":`dropdown-input-button-icon-arrow-open_8yQbZ`,dropdownInputButtonIconArrowOpen:p,"dropdown-input-list-anim":`dropdown-input-list-anim_knSMT`,dropdownInputListAnim:m,"dropdown-input-list-anim-flip":`dropdown-input-list-anim-flip_O6wWY`,dropdownInputListAnimFlip:h,"dropdown-input-list-anim-wider":`dropdown-input-list-anim-wider_-YyLJ`,dropdownInputListAnimWider:g,"dropdown-input-list":`dropdown-input-list_JnMbA`,dropdownInputList:_,"dropdown-input-list-item":`dropdown-input-list-item_EAy5L`,dropdownInputListItem:v,"dropdown-input-list-item-active":`dropdown-input-list-item-active_0dhia`,dropdownInputListItemActive:y,"dropdown-input-list-item-selected":`dropdown-input-list-item-selected_hShJf`,dropdownInputListItemSelected:b,"dropdown-input-list-item-disabled":`dropdown-input-list-item-disabled_3r-Yn`,dropdownInputListItemDisabled:x,"dropdown-fieldset":`dropdown-fieldset_wQwTf`,dropdownFieldset:S,"dropdown-fieldset-legend":`dropdown-fieldset-legend_a1M4L`,dropdownFieldsetLegend:C,"dropdown-fieldset-legend-active":`dropdown-fieldset-legend-active_bnR5F`,dropdownFieldsetLegendActive:w,"dropdown-placeholder":`dropdown-placeholder_QYMPZ`,dropdownPlaceholder:T,"dropdown-placeholder-shown":`dropdown-placeholder-shown_-IkNH`,dropdownPlaceholderShown:E,fadeIn:D,"dropdown-matLabel":`dropdown-matLabel_iHQnt`,dropdownMatLabel:O,"dropdown-matLabel-floating":`dropdown-matLabel-floating_zY51S`,dropdownMatLabelFloating:k,"dropdown-border-focused":`dropdown-border-focused_Te-ER`,dropdownBorderFocused:A,"dropdown-border-plain":`dropdown-border-plain_Bbh-3`,dropdownBorderPlain:j,"dropdown-border-invalid":`dropdown-border-invalid_ySVaS`,dropdownBorderInvalid:M,"dropdown-border-error":`dropdown-border-error_-JB33`,dropdownBorderError:N};export{P as default,t as dropdown,N as dropdownBorderError,A as dropdownBorderFocused,M as dropdownBorderInvalid,j as dropdownBorderPlain,S as dropdownFieldset,C as dropdownFieldsetLegend,w as dropdownFieldsetLegendActive,a as dropdownInput,c as dropdownInputButton,l as dropdownInputButtonDisabled,d as dropdownInputButtonIcon,f as dropdownInputButtonIconArrow,p as dropdownInputButtonIconArrowOpen,u as dropdownInputButtonReadOnly,_ as dropdownInputList,m as dropdownInputListAnim,h as dropdownInputListAnimFlip,g as dropdownInputListAnimWider,v as dropdownInputListItem,y as dropdownInputListItemActive,x as dropdownInputListItemDisabled,b as dropdownInputListItemSelected,o as dropdownInputPlain,s as dropdownInputReadOnly,n as dropdownLabel,r as dropdownLabelColumn,i as dropdownLabelText,O as dropdownMatLabel,k as dropdownMatLabelFloating,T as dropdownPlaceholder,E as dropdownPlaceholderShown,D as fadeIn,e as requiredMark};
+var e=`required-mark_fy7Fm`,t=`dropdown_XTshY`,n=`dropdown-label_TIpeK`,r=`dropdown-label-column_cMCBc`,i=`dropdown-label-text_u-UKq`,a=`dropdown-input_WiPcb`,o=`dropdown-input-plain_Ap12N`,s=`dropdown-input-readOnly_3GWSO`,c=`dropdown-input-button_ziKKi`,l=`dropdown-input-button-disabled_JEaO-`,u=`dropdown-input-button-readOnly_QhBYY`,d=`dropdown-input-button-icon_jl7EY`,f=`dropdown-input-button-icon-arrow_SFJbx`,p=`dropdown-input-button-icon-arrow-open_8yQbZ`,m=`dropdown-input-list-anim_knSMT`,h=`dropdown-input-list-anim-wider_-YyLJ`,g=`dropdown-input-list_JnMbA`,_=`dropdown-input-list-item_EAy5L`,v=`dropdown-input-list-item-active_0dhia`,y=`dropdown-input-list-item-selected_hShJf`,b=`dropdown-input-list-item-disabled_3r-Yn`,x=`dropdown-fieldset_wQwTf`,S=`dropdown-fieldset-legend_a1M4L`,C=`dropdown-fieldset-legend-active_bnR5F`,w=`dropdown-placeholder_QYMPZ`,T=`dropdown-placeholder-shown_-IkNH`,E=`fadeIn_oMJZj`,D=`dropdown-matLabel_iHQnt`,O=`dropdown-matLabel-floating_zY51S`,k=`dropdown-border-focused_Te-ER`,A=`dropdown-border-plain_Bbh-3`,j=`dropdown-border-invalid_ySVaS`,M=`dropdown-border-error_-JB33`,N=`dropdownPanel_RYxpN`,P={"required-mark":`required-mark_fy7Fm`,requiredMark:e,dropdown:t,"dropdown-label":`dropdown-label_TIpeK`,dropdownLabel:n,"dropdown-label-column":`dropdown-label-column_cMCBc`,dropdownLabelColumn:r,"dropdown-label-text":`dropdown-label-text_u-UKq`,dropdownLabelText:i,"dropdown-input":`dropdown-input_WiPcb`,dropdownInput:a,"dropdown-input-plain":`dropdown-input-plain_Ap12N`,dropdownInputPlain:o,"dropdown-input-readOnly":`dropdown-input-readOnly_3GWSO`,dropdownInputReadOnly:s,"dropdown-input-button":`dropdown-input-button_ziKKi`,dropdownInputButton:c,"dropdown-input-button-disabled":`dropdown-input-button-disabled_JEaO-`,dropdownInputButtonDisabled:l,"dropdown-input-button-readOnly":`dropdown-input-button-readOnly_QhBYY`,dropdownInputButtonReadOnly:u,"dropdown-input-button-icon":`dropdown-input-button-icon_jl7EY`,dropdownInputButtonIcon:d,"dropdown-input-button-icon-arrow":`dropdown-input-button-icon-arrow_SFJbx`,dropdownInputButtonIconArrow:f,"dropdown-input-button-icon-arrow-open":`dropdown-input-button-icon-arrow-open_8yQbZ`,dropdownInputButtonIconArrowOpen:p,"dropdown-input-list-anim":`dropdown-input-list-anim_knSMT`,dropdownInputListAnim:m,"dropdown-input-list-anim-wider":`dropdown-input-list-anim-wider_-YyLJ`,dropdownInputListAnimWider:h,"dropdown-input-list":`dropdown-input-list_JnMbA`,dropdownInputList:g,"dropdown-input-list-item":`dropdown-input-list-item_EAy5L`,dropdownInputListItem:_,"dropdown-input-list-item-active":`dropdown-input-list-item-active_0dhia`,dropdownInputListItemActive:v,"dropdown-input-list-item-selected":`dropdown-input-list-item-selected_hShJf`,dropdownInputListItemSelected:y,"dropdown-input-list-item-disabled":`dropdown-input-list-item-disabled_3r-Yn`,dropdownInputListItemDisabled:b,"dropdown-fieldset":`dropdown-fieldset_wQwTf`,dropdownFieldset:x,"dropdown-fieldset-legend":`dropdown-fieldset-legend_a1M4L`,dropdownFieldsetLegend:S,"dropdown-fieldset-legend-active":`dropdown-fieldset-legend-active_bnR5F`,dropdownFieldsetLegendActive:C,"dropdown-placeholder":`dropdown-placeholder_QYMPZ`,dropdownPlaceholder:w,"dropdown-placeholder-shown":`dropdown-placeholder-shown_-IkNH`,dropdownPlaceholderShown:T,fadeIn:E,"dropdown-matLabel":`dropdown-matLabel_iHQnt`,dropdownMatLabel:D,"dropdown-matLabel-floating":`dropdown-matLabel-floating_zY51S`,dropdownMatLabelFloating:O,"dropdown-border-focused":`dropdown-border-focused_Te-ER`,dropdownBorderFocused:k,"dropdown-border-plain":`dropdown-border-plain_Bbh-3`,dropdownBorderPlain:A,"dropdown-border-invalid":`dropdown-border-invalid_ySVaS`,dropdownBorderInvalid:j,"dropdown-border-error":`dropdown-border-error_-JB33`,dropdownBorderError:M,dropdownPanel:N};export{P as default,t as dropdown,M as dropdownBorderError,k as dropdownBorderFocused,j as dropdownBorderInvalid,A as dropdownBorderPlain,x as dropdownFieldset,S as dropdownFieldsetLegend,C as dropdownFieldsetLegendActive,a as dropdownInput,c as dropdownInputButton,l as dropdownInputButtonDisabled,d as dropdownInputButtonIcon,f as dropdownInputButtonIconArrow,p as dropdownInputButtonIconArrowOpen,u as dropdownInputButtonReadOnly,g as dropdownInputList,m as dropdownInputListAnim,h as dropdownInputListAnimWider,_ as dropdownInputListItem,v as dropdownInputListItemActive,b as dropdownInputListItemDisabled,y as dropdownInputListItemSelected,o as dropdownInputPlain,s as dropdownInputReadOnly,n as dropdownLabel,r as dropdownLabelColumn,i as dropdownLabelText,D as dropdownMatLabel,O as dropdownMatLabelFloating,N as dropdownPanel,w as dropdownPlaceholder,T as dropdownPlaceholderShown,E as fadeIn,e as requiredMark};
 //# sourceMappingURL=dropdown.module.mjs.map

package/dist/esm/common/dropdown/dropdown.module.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown.module.mjs","names":[],"sources":["../../../../package/common/dropdown/dropdown.module.pcss"],"sourcesContent":[".required-mark {\n  padding: 0 0 0 4px;\n  color: var(--required-mark-color, var(--error-color));\n}\n\n.dropdown {\n  position: relative;\n\n  --dropdown-notch-height: 1.75em;\n\n  /* See input.module.pcss for why this exists: the visible border lives on `-input`/`-fieldset`\n     below, not this root, so a wrapping ButtonGroup's --group-radius-* custom properties (which\n     inherit through any nesting depth, unlike border-radius itself) are what let this component\n     flatten correctly when it sits inside a ButtonGroup. */\n  --dropdown-radius: var(--group-radius-tl, var(--default-border-radius))\n    var(--group-radius-tr, var(--default-border-radius)) var(--group-radius-br, var(--default-border-radius))\n    var(--group-radius-bl, var(--default-border-radius));\n\n  &-label {\n    display: flex;\n\n    &-column {\n      flex-direction: column;\n    }\n\n    &-text {\n      white-space: nowrap;\n      margin-right: 5px;\n      margin-bottom: 5px;\n      display: flex;\n      align-items: center;\n      color: var(--text-color);\n      font-size: 12px;\n      position: absolute;\n      top: -15px;\n    }\n  }\n\n  &-input {\n    position: relative;\n    cursor: pointer;\n    -webkit-tap-highlight-color: transparent;\n    background-color: var(--input-background);\n    border-radius: var(--dropdown-radius);\n\n    &-plain {\n      background: transparent;\n    }\n\n    &-readOnly {\n      cursor: default;\n    }\n\n    &:focus-within {\n      outline: none;\n    }\n\n    &-button {\n      padding: 7px 20% 7px 7.5px !important;\n      background-color: transparent;\n      border: none;\n      font-family: inherit;\n      font-size: inherit;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n      cursor: pointer;\n      -webkit-tap-highlight-color: transparent;\n      text-align: left;\n      width: 100%;\n      line-height: 1.25;\n      color: var(--text-color);\n\n      &-disabled {\n        background-color: var(--disabled-input-color);\n        color: var(--disabled-font-color);\n        border-radius: var(--dropdown-radius);\n      }\n\n      &-readOnly {\n        cursor: default;\n      }\n\n      &:focus {\n        outline: none;\n      }\n\n      &-icon {\n        float: right;\n        background-color: transparent;\n        border: none;\n        position: absolute;\n        outline: none;\n        right: var(--spacing-s);\n        top: 50%;\n        transform: translateY(-50%);\n        color: var(--text-color);\n        cursor: pointer;\n        -webkit-tap-highlight-color: transparent;\n\n        &-arrow {\n          transition: transform 0.25s;\n          pointer-events: none;\n\n          &-open {\n            transform: rotate(180deg);\n          }\n        }\n      }\n    }\n\n    &-list-anim {\n      position: fixed;\n      z-index: 1;\n      color: var(--text-color);\n      background: var(--background-modal);\n      box-shadow: var(--card-shadow);\n      border-radius: var(--default-border-radius);\n      overflow: hidden;\n      transform: scaleY(1);\n      transition: transform 0.25s;\n      transform-origin: right top;\n\n      &-flip {\n        transform-origin: right bottom;\n      }\n\n      &-wider {\n        width: max-content !important;\n      }\n    }\n\n    &-list {\n      width: 100%;\n      display: flex;\n      flex-direction: column;\n      overflow-y: auto;\n      max-height: 10em;\n      list-style-type: none;\n\n      &-item {\n        border: none;\n        cursor: pointer;\n        -webkit-tap-highlight-color: transparent;\n        background-color: var(--background-modal);\n        padding: 0.5em;\n        text-align: left;\n        border-radius: 0;\n        transition: background-color 0.3s;\n\n        &-active {\n          background-color: var(--background-accent);\n        }\n\n        &-selected {\n          font-weight: 500;\n        }\n\n        &:focus {\n          outline: none;\n        }\n\n        &:hover {\n          background-color: var(--background-accent);\n        }\n\n        &-disabled {\n          background-color: var(--disabled-input-color);\n          color: var(--disabled-font-color);\n          cursor: not-allowed;\n\n          &:hover {\n            background-color: var(--disabled-input-color);\n          }\n        }\n      }\n    }\n  }\n\n  &-fieldset {\n    position: absolute;\n    width: 100%;\n    margin: 0;\n    box-sizing: border-box;\n    border-radius: var(--dropdown-radius);\n    font-size: 0.8em;\n    inset: calc(var(--dropdown-notch-height) / -2) 0 0;\n    padding-left: 8px;\n    border-width: 1px;\n    border-style: solid;\n    border-color: var(--border-color);\n    pointer-events: none;\n    user-select: none;\n\n    &-legend {\n      display: block;\n      max-width: 0;\n      transition: max-width 0.2s;\n      white-space: nowrap;\n      padding: 0;\n\n      &-active {\n        max-width: 300px;\n      }\n\n      span {\n        line-height: var(--dropdown-notch-height);\n        padding: 0 5px;\n        opacity: 0;\n      }\n\n      /* With an empty label the span would still reserve its padding, leaving a gap in\n         the fieldset's top border. Collapse it so the notch closes when there's no label. */\n      span:empty {\n        padding: 0.000001px;\n      }\n    }\n  }\n\n  &-placeholder {\n    position: absolute;\n    top: 50%;\n    left: 7px;\n    transform: translateY(-50%);\n    transition: all 0.2s;\n    opacity: 0;\n\n    &-shown {\n      animation: 0.2s fadeIn 0.3s forwards;\n    }\n  }\n\n  &-matLabel {\n    position: absolute;\n    transition: all 0.3s;\n    left: 7px;\n    right: 0;\n    top: 50%;\n    transform: translateY(-50%);\n    font-size: 1em;\n    color: var(--input-label-resting-color, var(--text-light));\n    pointer-events: none;\n    user-select: none;\n\n    &-floating {\n      inset: 0 0 auto 14px;\n      font-size: 0.8em;\n      color: var(--input-label-floating-color, var(--text-color));\n      transform: translateY(-50%);\n    }\n  }\n\n  @keyframes fadeIn {\n    from {\n      opacity: 0;\n    }\n\n    to {\n      opacity: 0.5;\n    }\n  }\n\n  &-border {\n    &-focused {\n      outline-color: var(--focus-border-color, var(--primary-color));\n      border-color: var(--focus-border-color, var(--primary-color));\n    }\n\n    &-plain:not(&-focused) {\n      border-color: transparent;\n      outline-color: transparent;\n    }\n\n    &-invalid {\n      outline-color: var(--error-border-color);\n      border-color: var(--error-border-color);\n    }\n\n    &-invalid:hover {\n      outline-color: var(--error-border-color);\n      border-color: var(--error-border-color);\n    }\n\n    &-error {\n      outline-color: var(--error-border-color);\n      border-color: var(--error-border-color);\n    }\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"dropdown.module.mjs","names":[],"sources":["../../../../package/common/dropdown/dropdown.module.pcss"],"sourcesContent":[".required-mark {\n  padding: 0 0 0 4px;\n  color: var(--required-mark-color, var(--error-color));\n}\n\n.dropdown {\n  position: relative;\n\n  --dropdown-notch-height: 1.75em;\n\n  /* See input.module.pcss for why this exists: the visible border lives on `-input`/`-fieldset`\n     below, not this root, so a wrapping ButtonGroup's --group-radius-* custom properties (which\n     inherit through any nesting depth, unlike border-radius itself) are what let this component\n     flatten correctly when it sits inside a ButtonGroup. */\n  --dropdown-radius: var(--group-radius-tl, var(--default-border-radius))\n    var(--group-radius-tr, var(--default-border-radius)) var(--group-radius-br, var(--default-border-radius))\n    var(--group-radius-bl, var(--default-border-radius));\n\n  &-label {\n    display: flex;\n\n    &-column {\n      flex-direction: column;\n    }\n\n    &-text {\n      white-space: nowrap;\n      margin-right: 5px;\n      margin-bottom: 5px;\n      display: flex;\n      align-items: center;\n      color: var(--text-color);\n      font-size: 12px;\n      position: absolute;\n      top: -15px;\n    }\n  }\n\n  &-input {\n    position: relative;\n    cursor: pointer;\n    -webkit-tap-highlight-color: transparent;\n    background-color: var(--input-background);\n    border-radius: var(--dropdown-radius);\n\n    &-plain {\n      background: transparent;\n    }\n\n    &-readOnly {\n      cursor: default;\n    }\n\n    &:focus-within {\n      outline: none;\n    }\n\n    &-button {\n      padding: 7px 20% 7px 7.5px !important;\n      background-color: transparent;\n      border: none;\n      font-family: inherit;\n      font-size: inherit;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n      cursor: pointer;\n      -webkit-tap-highlight-color: transparent;\n      text-align: left;\n      width: 100%;\n      line-height: 1.25;\n      color: var(--text-color);\n\n      &-disabled {\n        background-color: var(--disabled-input-color);\n        color: var(--disabled-font-color);\n        border-radius: var(--dropdown-radius);\n      }\n\n      &-readOnly {\n        cursor: default;\n      }\n\n      &:focus {\n        outline: none;\n      }\n\n      &-icon {\n        float: right;\n        background-color: transparent;\n        border: none;\n        position: absolute;\n        outline: none;\n        right: var(--spacing-s);\n        top: 50%;\n        transform: translateY(-50%);\n        color: var(--text-color);\n        cursor: pointer;\n        -webkit-tap-highlight-color: transparent;\n\n        &-arrow {\n          transition: transform 0.25s;\n          pointer-events: none;\n\n          &-open {\n            transform: rotate(180deg);\n          }\n        }\n      }\n    }\n\n    /* Chrome, placement and the portal come from the Popover this renders inside.\n       What is left is the clipping that keeps the first and last row inside the\n       panel's rounded corners. */\n    &-list-anim {\n      overflow: hidden;\n      border-radius: inherit;\n\n      &-wider {\n        width: max-content !important;\n      }\n    }\n\n    &-list {\n      width: 100%;\n      display: flex;\n      flex-direction: column;\n      overflow-y: auto;\n      max-height: 10em;\n      list-style-type: none;\n\n      &-item {\n        border: none;\n        cursor: pointer;\n        -webkit-tap-highlight-color: transparent;\n        background-color: var(--background-modal);\n        padding: 0.5em;\n        text-align: left;\n        border-radius: 0;\n        transition: background-color 0.3s;\n\n        &-active {\n          background-color: var(--background-accent);\n        }\n\n        &-selected {\n          font-weight: 500;\n        }\n\n        &:focus {\n          outline: none;\n        }\n\n        &:hover {\n          background-color: var(--background-accent);\n        }\n\n        &-disabled {\n          background-color: var(--disabled-input-color);\n          color: var(--disabled-font-color);\n          cursor: not-allowed;\n\n          &:hover {\n            background-color: var(--disabled-input-color);\n          }\n        }\n      }\n    }\n  }\n\n  &-fieldset {\n    position: absolute;\n    width: 100%;\n    margin: 0;\n    box-sizing: border-box;\n    border-radius: var(--dropdown-radius);\n    font-size: 0.8em;\n    inset: calc(var(--dropdown-notch-height) / -2) 0 0;\n    padding-left: 8px;\n    border-width: 1px;\n    border-style: solid;\n    border-color: var(--border-color);\n    pointer-events: none;\n    user-select: none;\n\n    &-legend {\n      display: block;\n      max-width: 0;\n      transition: max-width 0.2s;\n      white-space: nowrap;\n      padding: 0;\n\n      &-active {\n        max-width: 300px;\n      }\n\n      span {\n        line-height: var(--dropdown-notch-height);\n        padding: 0 5px;\n        opacity: 0;\n      }\n\n      /* With an empty label the span would still reserve its padding, leaving a gap in\n         the fieldset's top border. Collapse it so the notch closes when there's no label. */\n      span:empty {\n        padding: 0.000001px;\n      }\n    }\n  }\n\n  &-placeholder {\n    position: absolute;\n    top: 50%;\n    left: 7px;\n    transform: translateY(-50%);\n    transition: all 0.2s;\n    opacity: 0;\n\n    &-shown {\n      animation: 0.2s fadeIn 0.3s forwards;\n    }\n  }\n\n  &-matLabel {\n    position: absolute;\n    transition: all 0.3s;\n    left: 7px;\n    right: 0;\n    top: 50%;\n    transform: translateY(-50%);\n    font-size: 1em;\n    color: var(--input-label-resting-color, var(--text-light));\n    pointer-events: none;\n    user-select: none;\n\n    &-floating {\n      inset: 0 0 auto 14px;\n      font-size: 0.8em;\n      color: var(--input-label-floating-color, var(--text-color));\n      transform: translateY(-50%);\n    }\n  }\n\n  @keyframes fadeIn {\n    from {\n      opacity: 0;\n    }\n\n    to {\n      opacity: 0.5;\n    }\n  }\n\n  &-border {\n    &-focused {\n      outline-color: var(--focus-border-color, var(--primary-color));\n      border-color: var(--focus-border-color, var(--primary-color));\n    }\n\n    &-plain:not(&-focused) {\n      border-color: transparent;\n      outline-color: transparent;\n    }\n\n    &-invalid {\n      outline-color: var(--error-border-color);\n      border-color: var(--error-border-color);\n    }\n\n    &-invalid:hover {\n      outline-color: var(--error-border-color);\n      border-color: var(--error-border-color);\n    }\n\n    &-error {\n      outline-color: var(--error-border-color);\n      border-color: var(--error-border-color);\n    }\n  }\n}\n\n/* The list brings its own padding and its rows reach the panel edge. */\n.dropdownPanel {\n  padding: 0;\n}\n"],"mappings":""}

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

@@ -1,2 +1,2 @@
-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};
+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,style:d,classNames:f,styles:p,...m}){let h=e(`EmptyState`,u,o);return a(`div`,{...m,className:r(n.emptyState,s,f?.root),style:{...d,...p?.root},children:[c?t(c,{className:f?.icon,style:p?.icon}):null,i(`div`,{className:f?.text,style:p?.text,children:l??h.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 { 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"}
+{"version":3,"file":"emptyState.mjs","names":[],"sources":["../../../../package/common/emptyState/emptyState.tsx"],"sourcesContent":["import cx from 'classnames';\nimport type { ReactElement } from 'react';\n\nimport styles from './emptyState.module.pcss';\nimport { useLabels } from '../configProvider';\nimport { renderIcon } from '../utils/renderIcon';\nimport type { EmptyStateLabels, EmptyStateProps } from './emptyState.types';\n\nconst DEFAULT_LABELS: Required<EmptyStateLabels> = {\n  empty: 'No entries available',\n};\n\nexport default function EmptyState({\n  className,\n  icon,\n  children,\n  labels,\n  style,\n  classNames,\n  styles: slotStyles,\n  ...rest\n}: EmptyStateProps): ReactElement {\n  const text = useLabels('EmptyState', labels, DEFAULT_LABELS);\n  return (\n    <div\n      {...rest}\n      className={cx(styles.emptyState, className, classNames?.root)}\n      style={{ ...style, ...slotStyles?.root }}\n    >\n      {icon ? renderIcon(icon, { className: classNames?.icon, style: slotStyles?.icon }) : null}\n      <div className={classNames?.text} style={slotStyles?.text}>\n        {children ?? text.empty}\n      </div>\n    </div>\n  );\n}\n"],"mappings":"oOAQA,IAAM,EAA6C,CACjD,MAAO,sBACT,EAEA,SAAwB,EAAW,CACjC,YACA,OACA,WACA,SACA,QACA,aACA,OAAQ,EACR,GAAG,GAC6B,CAChC,IAAM,EAAO,EAAU,aAAc,EAAQ,CAAc,EAC3D,OACE,EAAC,MAAD,CACE,GAAI,EACJ,UAAW,EAAG,EAAO,WAAY,EAAW,GAAY,IAAI,EAC5D,MAAO,CAAE,GAAG,EAAO,GAAG,GAAY,IAAK,EAHzC,SAAA,CAKG,EAAO,EAAW,EAAM,CAAE,UAAW,GAAY,KAAM,MAAO,GAAY,IAAK,CAAC,EAAI,KACrF,EAAC,MAAD,CAAK,UAAW,GAAY,KAAM,MAAO,GAAY,KAClD,SAAA,GAAY,EAAK,KACf,CAAA,CACF,GAET"}

package/dist/esm/common/fab/components/fabBase/fabBase.mjs

@@ -1,2 +1,2 @@
-import{ButtonSize as e,ButtonStyleType as t}from"../../../button/button.types.mjs";import n from"../../../button/button.mjs";import r from"./fabBase.module.mjs";import i from"classnames";import{jsx as a}from"react/jsx-runtime";var o={default:null,mini:r.fabSizeMini};function s({children:s=null,size:c=`default`,className:l=``,styleType:u=t.Primary,onClick:d=()=>{}}){return a(n,{styleType:u,size:e.Icon,className:i(r.fab,o[c],l),onClick:d,children:a(`div`,{className:r.fabContentContainer,children:a(`div`,{className:r.fabContent,children:s})})})}export{s as default};
+import{ButtonSize as e,ButtonStyleType as t}from"../../../button/button.types.mjs";import n from"../../../button/button.mjs";import r from"./fabBase.module.mjs";import i from"classnames";import{jsx as a}from"react/jsx-runtime";var o={default:null,mini:r.fabSizeMini};function s({style:s,children:c=null,size:l=`default`,className:u=``,styleType:d=t.Primary,onClick:f=()=>{}}){return a(n,{styleType:d,size:e.Icon,className:i(r.fab,o[l],u),style:s,onClick:f,children:a(`div`,{className:r.fabContentContainer,children:a(`div`,{className:r.fabContent,children:c})})})}export{s as default};
 //# sourceMappingURL=fabBase.mjs.map

package/dist/esm/common/fab/components/fabBase/fabBase.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"fabBase.mjs","names":[],"sources":["../../../../../../package/common/fab/components/fabBase/fabBase.tsx"],"sourcesContent":["import cx from 'classnames';\n\nimport Button from 'components/common/button';\nimport { ButtonSize, ButtonStyleType } from 'components/common/button/button.types';\nimport type { FabBaseProps, FabBaseSize } from './fabBase.types';\n\nimport styles from './fabBase.module.pcss';\n\nconst sizeClass: Record<FabBaseSize, string | null> = {\n  default: null,\n  mini: styles.fabSizeMini,\n};\n\nfunction FabBase({\n  children = null,\n  size = 'default',\n  className = '',\n  styleType = ButtonStyleType.Primary,\n  onClick = () => {},\n}: FabBaseProps) {\n  return (\n    /* Icon is the only size that adds no padding. Any other one pushes past the width set\n       below through Button's `min-width: min-content`, and the circle becomes an ellipse. */\n    <Button\n      styleType={styleType}\n      size={ButtonSize.Icon}\n      className={cx(styles.fab, sizeClass[size], className)}\n      onClick={onClick}\n    >\n      <div className={styles.fabContentContainer}>\n        <div className={styles.fabContent}>{children}</div>\n      </div>\n    </Button>\n  );\n}\n\nexport default FabBase;\n"],"mappings":"mOAQA,IAAM,EAAgD,CACpD,QAAS,KACT,KAAM,EAAO,WACf,EAEA,SAAS,EAAQ,CACf,WAAW,KACX,OAAO,UACP,YAAY,GACZ,YAAY,EAAgB,QAC5B,cAAgB,CAAC,GACF,CACf,OAGE,EAAC,EAAD,CACa,YACX,KAAM,EAAW,KACjB,UAAW,EAAG,EAAO,IAAK,EAAU,GAAO,CAAS,EAC3C,UAET,SAAA,EAAC,MAAD,CAAK,UAAW,EAAO,oBACrB,SAAA,EAAC,MAAD,CAAK,UAAW,EAAO,WAAa,UAAc,CAAA,CAC/C,CAAA,CACC,CAAA,CAEZ"}
+{"version":3,"file":"fabBase.mjs","names":[],"sources":["../../../../../../package/common/fab/components/fabBase/fabBase.tsx"],"sourcesContent":["import cx from 'classnames';\n\nimport Button from 'components/common/button';\nimport { ButtonSize, ButtonStyleType } from 'components/common/button/button.types';\nimport type { FabBaseProps, FabBaseSize } from './fabBase.types';\n\nimport styles from './fabBase.module.pcss';\n\nconst sizeClass: Record<FabBaseSize, string | null> = {\n  default: null,\n  mini: styles.fabSizeMini,\n};\n\nfunction FabBase({\n  style,\n  children = null,\n  size = 'default',\n  className = '',\n  styleType = ButtonStyleType.Primary,\n  onClick = () => {},\n}: FabBaseProps) {\n  return (\n    /* Icon is the only size that adds no padding. Any other one pushes past the width set\n       below through Button's `min-width: min-content`, and the circle becomes an ellipse. */\n    <Button\n      styleType={styleType}\n      size={ButtonSize.Icon}\n      className={cx(styles.fab, sizeClass[size], className)}\n      style={style}\n      onClick={onClick}\n    >\n      <div className={styles.fabContentContainer}>\n        <div className={styles.fabContent}>{children}</div>\n      </div>\n    </Button>\n  );\n}\n\nexport default FabBase;\n"],"mappings":"mOAQA,IAAM,EAAgD,CACpD,QAAS,KACT,KAAM,EAAO,WACf,EAEA,SAAS,EAAQ,CACf,QACA,WAAW,KACX,OAAO,UACP,YAAY,GACZ,YAAY,EAAgB,QAC5B,cAAgB,CAAC,GACF,CACf,OAGE,EAAC,EAAD,CACa,YACX,KAAM,EAAW,KACjB,UAAW,EAAG,EAAO,IAAK,EAAU,GAAO,CAAS,EAC7C,QACE,UAET,SAAA,EAAC,MAAD,CAAK,UAAW,EAAO,oBACrB,SAAA,EAAC,MAAD,CAAK,UAAW,EAAO,WAAa,UAAc,CAAA,CAC/C,CAAA,CACC,CAAA,CAEZ"}

package/dist/esm/common/fab/fab.mjs

@@ -1,2 +1,2 @@
-import{ButtonStyleType as e}from"../button/button.types.mjs";import{renderIcon as t}from"../utils/renderIcon.mjs";import n from"./components/fabBase/fabBase.mjs";import r from"./fab.module.mjs";import{useState as i}from"react";import a from"classnames";import{FontAwesomeIcon as o}from"@fortawesome/react-fontawesome";import{faPlus as s}from"@fortawesome/free-solid-svg-icons";import{jsx as c,jsxs as l}from"react/jsx-runtime";function u({children:u=null,size:d=`default`,menuEntries:f=[],onMenuEntryClicked:p=()=>{},onClick:m=()=>{},closeMenuOnEntryClicked:h=!0,...g}){let[_,v]=i(!1);function y(){f.length>0&&v(e=>!e),m()}function b(e,t){e.stopPropagation(),h&&v(!1),p(t)}return l(`div`,{...g,className:r.fabContainer,children:[c(`div`,{className:a(r.fabMenuBackdrop,_&&r.fabMenuBackdropOpen),onClick:e=>{e.stopPropagation(),v(!1)}}),c(`div`,{onClick:e=>e.stopPropagation(),children:c(n,{className:r.fab,size:d,onClick:y,children:l(`div`,{className:a(r.fabIcon,_&&r.fabIconMenuOpen),children:[c(`div`,{className:a(r.fabIconContent,!_&&r.fabIconContentShown),children:u}),c(`div`,{className:a(r.fabIconContent,_&&r.fabIconContentShown),children:c(o,{icon:s})})]})})}),c(`div`,{className:r.fabMenu,children:f.map(({id:i,label:o,icon:s})=>l(`div`,{className:a(r.fabMenuEntry,_&&r.fabMenuEntryShown),onClick:e=>b(e,i),children:[o&&c(`div`,{className:r.fabMenuEntryLabelContainer,children:c(`div`,{className:r.fabMenuEntryLabel,children:o})}),c(n,{size:`mini`,styleType:e.Default,children:t(s)})]},i))})]})}export{u as default};
+import{ButtonStyleType as e}from"../button/button.types.mjs";import{renderIcon as t}from"../utils/renderIcon.mjs";import n from"./components/fabBase/fabBase.mjs";import r from"./fab.module.mjs";import{useState as i}from"react";import a from"classnames";import{FontAwesomeIcon as o}from"@fortawesome/react-fontawesome";import{faPlus as s}from"@fortawesome/free-solid-svg-icons";import{jsx as c,jsxs as l}from"react/jsx-runtime";function u({children:u=null,size:d=`default`,menuEntries:f=[],onMenuEntryClicked:p=()=>{},onClick:m=()=>{},closeMenuOnEntryClicked:h=!0,className:g,style:_,classNames:v,styles:y,...b}){let[x,S]=i(!1);function C(){f.length>0&&S(e=>!e),m()}function w(e,t){e.stopPropagation(),h&&S(!1),p(t)}return l(`div`,{...b,className:a(r.fabContainer,g,v?.root),style:{..._,...y?.root},children:[c(`div`,{className:a(r.fabMenuBackdrop,x&&r.fabMenuBackdropOpen,v?.backdrop),style:y?.backdrop,onClick:e=>{e.stopPropagation(),S(!1)}}),c(`div`,{onClick:e=>e.stopPropagation(),children:c(n,{className:a(r.fab,v?.button),style:y?.button,size:d,onClick:C,children:l(`div`,{className:a(r.fabIcon,x&&r.fabIconMenuOpen,v?.icon),style:y?.icon,children:[c(`div`,{className:a(r.fabIconContent,!x&&r.fabIconContentShown),children:u}),c(`div`,{className:a(r.fabIconContent,x&&r.fabIconContentShown),children:c(o,{icon:s})})]})})}),c(`div`,{className:a(r.fabMenu,v?.menu),style:y?.menu,children:f.map(({id:i,label:o,icon:s})=>l(`div`,{className:a(r.fabMenuEntry,x&&r.fabMenuEntryShown,v?.menuEntry),style:y?.menuEntry,onClick:e=>w(e,i),children:[o&&c(`div`,{className:r.fabMenuEntryLabelContainer,children:c(`div`,{className:a(r.fabMenuEntryLabel,v?.menuEntryLabel),style:y?.menuEntryLabel,children:o})}),c(n,{size:`mini`,styleType:e.Default,children:t(s)})]},i))})]})}export{u as default};
 //# sourceMappingURL=fab.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"fab.mjs","names":[],"sources":["../../../../package/common/fab/fab.tsx"],"sourcesContent":["import { useState } from 'react';\nimport cx from 'classnames';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { faPlus as addIcon } from '@fortawesome/free-solid-svg-icons';\nimport { ButtonStyleType } from '../button/button.types';\n\nimport FabBase from './components/fabBase';\nimport type { FabProps } from './fab.types';\n\nimport styles from './fab.module.pcss';\nimport { renderIcon } from '../utils/renderIcon';\n\nfunction Fab({\n  children = null,\n  size = 'default',\n  menuEntries = [],\n  onMenuEntryClicked = () => {},\n  onClick = () => {},\n  closeMenuOnEntryClicked = true,\n  ...rest\n}: FabProps) {\n  const [menuOpen, setMenuOpen] = useState(false);\n\n  function handleFabClick() {\n    if (menuEntries.length > 0) setMenuOpen((prev) => !prev);\n    onClick();\n  }\n\n  function handleEntryClick(e: React.MouseEvent, id: string) {\n    e.stopPropagation();\n    if (closeMenuOnEntryClicked) setMenuOpen(false);\n    onMenuEntryClicked(id);\n  }\n\n  return (\n    <div {...rest} className={styles.fabContainer}>\n      <div\n        className={cx(styles.fabMenuBackdrop, menuOpen && styles.fabMenuBackdropOpen)}\n        onClick={(e) => {\n          e.stopPropagation();\n          setMenuOpen(false);\n        }}\n      />\n      <div onClick={(e) => e.stopPropagation()}>\n        <FabBase className={styles.fab} size={size} onClick={handleFabClick}>\n          <div className={cx(styles.fabIcon, menuOpen && styles.fabIconMenuOpen)}>\n            <div className={cx(styles.fabIconContent, !menuOpen && styles.fabIconContentShown)}>{children}</div>\n            <div className={cx(styles.fabIconContent, menuOpen && styles.fabIconContentShown)}>\n              <FontAwesomeIcon icon={addIcon} />\n            </div>\n          </div>\n        </FabBase>\n      </div>\n      <div className={styles.fabMenu}>\n        {menuEntries.map(({ id, label, icon }) => (\n          <div\n            key={id}\n            className={cx(styles.fabMenuEntry, menuOpen && styles.fabMenuEntryShown)}\n            onClick={(e) => handleEntryClick(e, id)}\n          >\n            {label && (\n              <div className={styles.fabMenuEntryLabelContainer}>\n                <div className={styles.fabMenuEntryLabel}>{label}</div>\n              </div>\n            )}\n            <FabBase size='mini' styleType={ButtonStyleType.Default}>\n              {renderIcon(icon)}\n            </FabBase>\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n}\n\nexport default Fab;\n"],"mappings":"2aAYA,SAAS,EAAI,CACX,WAAW,KACX,OAAO,UACP,cAAc,CAAC,EACf,yBAA2B,CAAC,EAC5B,cAAgB,CAAC,EACjB,0BAA0B,GAC1B,GAAG,GACQ,CACX,GAAM,CAAC,EAAU,GAAe,EAAS,EAAK,EAE9C,SAAS,GAAiB,CACpB,EAAY,OAAS,GAAG,EAAa,GAAS,CAAC,CAAI,EACvD,EAAQ,CACV,CAEA,SAAS,EAAiB,EAAqB,EAAY,CACzD,EAAE,gBAAgB,EACd,GAAyB,EAAY,EAAK,EAC9C,EAAmB,CAAE,CACvB,CAEA,OACE,EAAC,MAAD,CAAK,GAAI,EAAM,UAAW,EAAO,aAAjC,SAAA,CACE,EAAC,MAAD,CACE,UAAW,EAAG,EAAO,gBAAiB,GAAY,EAAO,mBAAmB,EAC5E,QAAU,GAAM,CACd,EAAE,gBAAgB,EAClB,EAAY,EAAK,CACnB,CACD,CAAA,EACD,EAAC,MAAD,CAAK,QAAU,GAAM,EAAE,gBAAgB,EACrC,SAAA,EAAC,EAAD,CAAS,UAAW,EAAO,IAAW,OAAM,QAAS,EACnD,SAAA,EAAC,MAAD,CAAK,UAAW,EAAG,EAAO,QAAS,GAAY,EAAO,eAAe,EAArE,SAAA,CACE,EAAC,MAAD,CAAK,UAAW,EAAG,EAAO,eAAgB,CAAC,GAAY,EAAO,mBAAmB,EAAI,UAAc,CAAA,EACnG,EAAC,MAAD,CAAK,UAAW,EAAG,EAAO,eAAgB,GAAY,EAAO,mBAAmB,EAC9E,SAAA,EAAC,EAAD,CAAiB,KAAM,CAAU,CAAA,CAC9B,CAAA,CACF,GACE,CAAA,CACN,CAAA,EACL,EAAC,MAAD,CAAK,UAAW,EAAO,QACpB,SAAA,EAAY,KAAK,CAAE,KAAI,QAAO,UAC7B,EAAC,MAAD,CAEE,UAAW,EAAG,EAAO,aAAc,GAAY,EAAO,iBAAiB,EACvE,QAAU,GAAM,EAAiB,EAAG,CAAE,EAHxC,SAAA,CAKG,GACC,EAAC,MAAD,CAAK,UAAW,EAAO,2BACrB,SAAA,EAAC,MAAD,CAAK,UAAW,EAAO,kBAAoB,SAAA,CAAW,CAAA,CACnD,CAAA,EAEP,EAAC,EAAD,CAAS,KAAK,OAAO,UAAW,EAAgB,QAC7C,SAAA,EAAW,CAAI,CACT,CAAA,CACN,CAZE,EAAA,CAYF,CACN,CACE,CAAA,CACF,GAET"}
+{"version":3,"file":"fab.mjs","names":[],"sources":["../../../../package/common/fab/fab.tsx"],"sourcesContent":["import { useState } from 'react';\nimport cx from 'classnames';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { faPlus as addIcon } from '@fortawesome/free-solid-svg-icons';\nimport { ButtonStyleType } from '../button/button.types';\n\nimport FabBase from './components/fabBase';\nimport type { FabProps } from './fab.types';\n\nimport styles from './fab.module.pcss';\nimport { renderIcon } from '../utils/renderIcon';\n\nfunction Fab({\n  children = null,\n  size = 'default',\n  menuEntries = [],\n  onMenuEntryClicked = () => {},\n  onClick = () => {},\n  closeMenuOnEntryClicked = true,\n  className,\n  style,\n  classNames,\n  styles: slotStyles,\n  ...rest\n}: FabProps) {\n  const [menuOpen, setMenuOpen] = useState(false);\n\n  function handleFabClick() {\n    if (menuEntries.length > 0) setMenuOpen((prev) => !prev);\n    onClick();\n  }\n\n  function handleEntryClick(e: React.MouseEvent, id: string) {\n    e.stopPropagation();\n    if (closeMenuOnEntryClicked) setMenuOpen(false);\n    onMenuEntryClicked(id);\n  }\n\n  return (\n    <div\n      {...rest}\n      className={cx(styles.fabContainer, className, classNames?.root)}\n      style={{ ...style, ...slotStyles?.root }}\n    >\n      <div\n        className={cx(styles.fabMenuBackdrop, menuOpen && styles.fabMenuBackdropOpen, classNames?.backdrop)}\n        style={slotStyles?.backdrop}\n        onClick={(e) => {\n          e.stopPropagation();\n          setMenuOpen(false);\n        }}\n      />\n      <div onClick={(e) => e.stopPropagation()}>\n        <FabBase\n          className={cx(styles.fab, classNames?.button)}\n          style={slotStyles?.button}\n          size={size}\n          onClick={handleFabClick}\n        >\n          <div\n            className={cx(styles.fabIcon, menuOpen && styles.fabIconMenuOpen, classNames?.icon)}\n            style={slotStyles?.icon}\n          >\n            <div className={cx(styles.fabIconContent, !menuOpen && styles.fabIconContentShown)}>{children}</div>\n            <div className={cx(styles.fabIconContent, menuOpen && styles.fabIconContentShown)}>\n              <FontAwesomeIcon icon={addIcon} />\n            </div>\n          </div>\n        </FabBase>\n      </div>\n      <div className={cx(styles.fabMenu, classNames?.menu)} style={slotStyles?.menu}>\n        {menuEntries.map(({ id, label, icon }) => (\n          <div\n            key={id}\n            className={cx(styles.fabMenuEntry, menuOpen && styles.fabMenuEntryShown, classNames?.menuEntry)}\n            style={slotStyles?.menuEntry}\n            onClick={(e) => handleEntryClick(e, id)}\n          >\n            {label && (\n              <div className={styles.fabMenuEntryLabelContainer}>\n                <div\n                  className={cx(styles.fabMenuEntryLabel, classNames?.menuEntryLabel)}\n                  style={slotStyles?.menuEntryLabel}\n                >\n                  {label}\n                </div>\n              </div>\n            )}\n            <FabBase size='mini' styleType={ButtonStyleType.Default}>\n              {renderIcon(icon)}\n            </FabBase>\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n}\n\nexport default Fab;\n"],"mappings":"2aAYA,SAAS,EAAI,CACX,WAAW,KACX,OAAO,UACP,cAAc,CAAC,EACf,yBAA2B,CAAC,EAC5B,cAAgB,CAAC,EACjB,0BAA0B,GAC1B,YACA,QACA,aACA,OAAQ,EACR,GAAG,GACQ,CACX,GAAM,CAAC,EAAU,GAAe,EAAS,EAAK,EAE9C,SAAS,GAAiB,CACpB,EAAY,OAAS,GAAG,EAAa,GAAS,CAAC,CAAI,EACvD,EAAQ,CACV,CAEA,SAAS,EAAiB,EAAqB,EAAY,CACzD,EAAE,gBAAgB,EACd,GAAyB,EAAY,EAAK,EAC9C,EAAmB,CAAE,CACvB,CAEA,OACE,EAAC,MAAD,CACE,GAAI,EACJ,UAAW,EAAG,EAAO,aAAc,EAAW,GAAY,IAAI,EAC9D,MAAO,CAAE,GAAG,EAAO,GAAG,GAAY,IAAK,EAHzC,SAAA,CAKE,EAAC,MAAD,CACE,UAAW,EAAG,EAAO,gBAAiB,GAAY,EAAO,oBAAqB,GAAY,QAAQ,EAClG,MAAO,GAAY,SACnB,QAAU,GAAM,CACd,EAAE,gBAAgB,EAClB,EAAY,EAAK,CACnB,CACD,CAAA,EACD,EAAC,MAAD,CAAK,QAAU,GAAM,EAAE,gBAAgB,EACrC,SAAA,EAAC,EAAD,CACE,UAAW,EAAG,EAAO,IAAK,GAAY,MAAM,EAC5C,MAAO,GAAY,OACb,OACN,QAAS,EAET,SAAA,EAAC,MAAD,CACE,UAAW,EAAG,EAAO,QAAS,GAAY,EAAO,gBAAiB,GAAY,IAAI,EAClF,MAAO,GAAY,KAFrB,SAAA,CAIE,EAAC,MAAD,CAAK,UAAW,EAAG,EAAO,eAAgB,CAAC,GAAY,EAAO,mBAAmB,EAAI,UAAc,CAAA,EACnG,EAAC,MAAD,CAAK,UAAW,EAAG,EAAO,eAAgB,GAAY,EAAO,mBAAmB,EAC9E,SAAA,EAAC,EAAD,CAAiB,KAAM,CAAU,CAAA,CAC9B,CAAA,CACF,GACE,CAAA,CACN,CAAA,EACL,EAAC,MAAD,CAAK,UAAW,EAAG,EAAO,QAAS,GAAY,IAAI,EAAG,MAAO,GAAY,KACtE,SAAA,EAAY,KAAK,CAAE,KAAI,QAAO,UAC7B,EAAC,MAAD,CAEE,UAAW,EAAG,EAAO,aAAc,GAAY,EAAO,kBAAmB,GAAY,SAAS,EAC9F,MAAO,GAAY,UACnB,QAAU,GAAM,EAAiB,EAAG,CAAE,EAJxC,SAAA,CAMG,GACC,EAAC,MAAD,CAAK,UAAW,EAAO,2BACrB,SAAA,EAAC,MAAD,CACE,UAAW,EAAG,EAAO,kBAAmB,GAAY,cAAc,EAClE,MAAO,GAAY,eAElB,SAAA,CACE,CAAA,CACF,CAAA,EAEP,EAAC,EAAD,CAAS,KAAK,OAAO,UAAW,EAAgB,QAC7C,SAAA,EAAW,CAAI,CACT,CAAA,CACN,CAlBE,EAAA,CAkBF,CACN,CACE,CAAA,CACF,GAET"}

package/dist/esm/common/hooks/useAnchorTracking.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"useAnchorTracking.mjs","names":[],"sources":["../../../../package/common/hooks/useAnchorTracking.ts"],"sourcesContent":["import { useLayoutEffect, useRef, type RefObject } from 'react';\nimport { getScrollableAncestors } from 'components/common/utils/scrollAncestors';\n\nexport interface UseAnchorTrackingArgs {\n  isOpen: boolean;\n  /** The element the popup is anchored to. Its scrollable ancestors are what get tracked. */\n  triggerRef: RefObject<HTMLElement | null>;\n  /**\n   * Every element the positioning maths needs. Tracking starts only once all of them, plus the\n   * trigger, are mounted. Read fresh on each setup, so an inline array literal is fine.\n   */\n  elementRefs: RefObject<HTMLElement | null>[];\n  /**\n   * Positions the popup. Called once on setup and then on every scroll, resize and tracked size\n   * change. Reads the caller's own refs for everything beyond the two arguments.\n   */\n  update: (trigger: HTMLElement, ancestors: HTMLElement[]) => void;\n  /**\n   * Elements whose own size changes must re-run `update`: a popup whose content changes size\n   * while open (a filtered list shrinking, an async list loading in) otherwise keeps coordinates\n   * computed for its old height and ends up detached from the trigger. Re-read on every update,\n   * since a panel can mount a commit later than the element it hangs off.\n   */\n  resizeRefs?: RefObject<HTMLElement | null>[];\n  /** Hands the popup's elements back as they were found. Runs when tracking stops. */\n  teardown?: () => void;\n  /** Values that must restart tracking, and so re-run `update`, when they change. */\n  deps?: readonly unknown[];\n}\n\n/**\n * The lifecycle half of anchoring a portaled, `position: fixed` popup to a trigger: waits for the\n * elements to mount, resolves the trigger's scrolling ancestors once, and re-runs the caller's\n * positioning on every scroll, viewport resize and tracked size change until it closes.\n *\n * Callers supply only the geometry (`update`) and the inline styles to clear again (`teardown`);\n * `useFloatingPosition` and `usePopoverPosition` are both built on this.\n *\n * Position is deliberately written straight to the DOM by the caller rather than through React\n * state: going through setState -> re-render -> commit adds a round-trip that lags behind the\n * browser's own scroll painting by at least a frame.\n */\nexport function useAnchorTracking({\n  isOpen,\n  triggerRef,\n  elementRefs,\n  update,\n  resizeRefs,\n  teardown,\n  deps = [],\n}: UseAnchorTrackingArgs) {\n  // Latest-value refs, so the effect restarts only for `deps` the caller names, never merely\n  // because these were passed as fresh array/function literals this render.\n  const latest = useRef({ elementRefs, update, resizeRefs, teardown });\n  latest.current = { elementRefs, update, resizeRefs, teardown };\n\n  useLayoutEffect(() => {\n    if (!isOpen) return;\n\n    let rafId: number | undefined;\n    let stop: (() => void) | undefined;\n\n    // The elements may not be mounted yet on the very first invocation of this effect: a portal\n    // target (e.g. BodyEnd's `#bodyEnd` div) can still be missing on the initial render, in which\n    // case the portaled content — and its ref — commits one render later. Since refs never change\n    // identity, that later commit doesn't re-trigger this effect on its own, so retry each frame.\n    function trySetup() {\n      const trigger = triggerRef.current;\n      const elements = latest.current.elementRefs;\n      if (!trigger || elements.some((ref) => !ref.current)) {\n        rafId = requestAnimationFrame(trySetup);\n        return;\n      }\n      const ancestors = getScrollableAncestors(trigger);\n\n      const resizeObserver = new ResizeObserver(() => runUpdate());\n      const observed = new Set<Element>();\n\n      function runUpdate() {\n        latest.current.update(trigger!, ancestors);\n        // After the update, so an element that only mounts during it is picked up too. Once\n        // observed this is a handful of Set lookups, so it costs nothing on the scroll path.\n        latest.current.resizeRefs?.forEach(({ current }) => {\n          if (!current || observed.has(current)) return;\n          observed.add(current);\n          resizeObserver.observe(current);\n        });\n      }\n\n      runUpdate();\n\n      const scrollTargets: (Window | HTMLElement)[] = [window, ...ancestors];\n      scrollTargets.forEach((t) => t.addEventListener('scroll', runUpdate, { passive: true }));\n      window.addEventListener('resize', runUpdate);\n      // `window.resize` doesn't reliably fire when a mobile keyboard opens/closes — visualViewport\n      // does, and is what the callers' flip/clamp maths is measured against.\n      window.visualViewport?.addEventListener('resize', runUpdate);\n      window.visualViewport?.addEventListener('scroll', runUpdate);\n\n      stop = () => {\n        scrollTargets.forEach((t) => t.removeEventListener('scroll', runUpdate));\n        window.removeEventListener('resize', runUpdate);\n        window.visualViewport?.removeEventListener('resize', runUpdate);\n        window.visualViewport?.removeEventListener('scroll', runUpdate);\n        resizeObserver.disconnect();\n        latest.current.teardown?.();\n      };\n    }\n\n    trySetup();\n\n    return () => {\n      if (rafId !== undefined) cancelAnimationFrame(rafId);\n      stop?.();\n    };\n    // Spread rather than listed: `deps` is the caller's own set of geometry inputs, and changing\n    // any of them has to restart tracking so the new values get applied immediately.\n    // oxlint-disable-next-line react-hooks/exhaustive-deps\n  }, [isOpen, triggerRef, ...deps]);\n}\n"],"mappings":"0HA0CA,SAAgB,EAAkB,CAChC,SACA,aACA,cACA,SACA,aACA,WACA,OAAO,CAAC,GACgB,CAGxB,IAAM,EAAS,EAAO,CAAE,cAAa,SAAQ,aAAY,UAAS,CAAC,EACnE,EAAO,QAAU,CAAE,cAAa,SAAQ,aAAY,UAAS,EAE7D,MAAsB,CACpB,GAAI,CAAC,EAAQ,OAEb,IAAI,EACA,EAMJ,SAAS,GAAW,CAClB,IAAM,EAAU,EAAW,QACrB,EAAW,EAAO,QAAQ,YAChC,GAAI,CAAC,GAAW,EAAS,KAAM,GAAQ,CAAC,EAAI,OAAO,EAAG,CACpD,EAAQ,sBAAsB,CAAQ,EACtC,MACF,CACA,IAAM,EAAY,EAAuB,CAAO,EAE1C,EAAiB,IAAI,mBAAqB,EAAU,CAAC,EACrD,EAAW,IAAI,IAErB,SAAS,GAAY,CACnB,EAAO,QAAQ,OAAO,EAAU,CAAS,EAGzC,EAAO,QAAQ,YAAY,SAAS,CAAE,aAAc,CAC7C,GAAW,GAAS,IAAI,CAAO,IACpC,EAAS,IAAI,CAAO,EACpB,EAAe,QAAQ,CAAO,EAChC,CAAC,CACH,CAEA,EAAU,EAEV,IAAM,EAA0C,CAAC,OAAQ,GAAG,CAAS,EACrE,EAAc,QAAS,GAAM,EAAE,iBAAiB,SAAU,EAAW,CAAE,QAAS,EAAK,CAAC,CAAC,EACvF,OAAO,iBAAiB,SAAU,CAAS,EAG3C,OAAO,gBAAgB,iBAAiB,SAAU,CAAS,EAC3D,OAAO,gBAAgB,iBAAiB,SAAU,CAAS,EAE3D,MAAa,CACX,EAAc,QAAS,GAAM,EAAE,oBAAoB,SAAU,CAAS,CAAC,EACvE,OAAO,oBAAoB,SAAU,CAAS,EAC9C,OAAO,gBAAgB,oBAAoB,SAAU,CAAS,EAC9D,OAAO,gBAAgB,oBAAoB,SAAU,CAAS,EAC9D,EAAe,WAAW,EAC1B,EAAO,QAAQ,WAAW,CAC5B,CACF,CAIA,OAFA,EAAS,MAEI,CACP,IAAU,IAAA,IAAW,qBAAqB,CAAK,EACnD,IAAO,CACT,CAIF,EAAG,CAAC,EAAQ,EAAY,GAAG,CAAI,CAAC,CAClC"}
+{"version":3,"file":"useAnchorTracking.mjs","names":[],"sources":["../../../../package/common/hooks/useAnchorTracking.ts"],"sourcesContent":["import { useLayoutEffect, useRef, type RefObject } from 'react';\nimport { getScrollableAncestors } from 'components/common/utils/scrollAncestors';\n\nexport interface UseAnchorTrackingArgs {\n  isOpen: boolean;\n  /** The element the popup is anchored to. Its scrollable ancestors are what get tracked. */\n  triggerRef: RefObject<HTMLElement | null>;\n  /**\n   * Every element the positioning maths needs. Tracking starts only once all of them, plus the\n   * trigger, are mounted. Read fresh on each setup, so an inline array literal is fine.\n   */\n  elementRefs: RefObject<HTMLElement | null>[];\n  /**\n   * Positions the popup. Called once on setup and then on every scroll, resize and tracked size\n   * change. Reads the caller's own refs for everything beyond the two arguments.\n   */\n  update: (trigger: HTMLElement, ancestors: HTMLElement[]) => void;\n  /**\n   * Elements whose own size changes must re-run `update`: a popup whose content changes size\n   * while open (a filtered list shrinking, an async list loading in) otherwise keeps coordinates\n   * computed for its old height and ends up detached from the trigger. Re-read on every update,\n   * since a panel can mount a commit later than the element it hangs off.\n   */\n  resizeRefs?: RefObject<HTMLElement | null>[];\n  /** Hands the popup's elements back as they were found. Runs when tracking stops. */\n  teardown?: () => void;\n  /** Values that must restart tracking, and so re-run `update`, when they change. */\n  deps?: readonly unknown[];\n}\n\n/**\n * The lifecycle half of anchoring a portaled, `position: fixed` popup to a trigger: waits for the\n * elements to mount, resolves the trigger's scrolling ancestors once, and re-runs the caller's\n * positioning on every scroll, viewport resize and tracked size change until it closes.\n *\n * Callers supply only the geometry (`update`) and the inline styles to clear again (`teardown`);\n * `usePopoverPosition` is built on this.\n *\n * Position is deliberately written straight to the DOM by the caller rather than through React\n * state: going through setState -> re-render -> commit adds a round-trip that lags behind the\n * browser's own scroll painting by at least a frame.\n */\nexport function useAnchorTracking({\n  isOpen,\n  triggerRef,\n  elementRefs,\n  update,\n  resizeRefs,\n  teardown,\n  deps = [],\n}: UseAnchorTrackingArgs) {\n  // Latest-value refs, so the effect restarts only for `deps` the caller names, never merely\n  // because these were passed as fresh array/function literals this render.\n  const latest = useRef({ elementRefs, update, resizeRefs, teardown });\n  latest.current = { elementRefs, update, resizeRefs, teardown };\n\n  useLayoutEffect(() => {\n    if (!isOpen) return;\n\n    let rafId: number | undefined;\n    let stop: (() => void) | undefined;\n\n    // The elements may not be mounted yet on the very first invocation of this effect: a portal\n    // target (e.g. BodyEnd's `#bodyEnd` div) can still be missing on the initial render, in which\n    // case the portaled content — and its ref — commits one render later. Since refs never change\n    // identity, that later commit doesn't re-trigger this effect on its own, so retry each frame.\n    function trySetup() {\n      const trigger = triggerRef.current;\n      const elements = latest.current.elementRefs;\n      if (!trigger || elements.some((ref) => !ref.current)) {\n        rafId = requestAnimationFrame(trySetup);\n        return;\n      }\n      const ancestors = getScrollableAncestors(trigger);\n\n      const resizeObserver = new ResizeObserver(() => runUpdate());\n      const observed = new Set<Element>();\n\n      function runUpdate() {\n        latest.current.update(trigger!, ancestors);\n        // After the update, so an element that only mounts during it is picked up too. Once\n        // observed this is a handful of Set lookups, so it costs nothing on the scroll path.\n        latest.current.resizeRefs?.forEach(({ current }) => {\n          if (!current || observed.has(current)) return;\n          observed.add(current);\n          resizeObserver.observe(current);\n        });\n      }\n\n      runUpdate();\n\n      const scrollTargets: (Window | HTMLElement)[] = [window, ...ancestors];\n      scrollTargets.forEach((t) => t.addEventListener('scroll', runUpdate, { passive: true }));\n      window.addEventListener('resize', runUpdate);\n      // `window.resize` doesn't reliably fire when a mobile keyboard opens/closes — visualViewport\n      // does, and is what the callers' flip/clamp maths is measured against.\n      window.visualViewport?.addEventListener('resize', runUpdate);\n      window.visualViewport?.addEventListener('scroll', runUpdate);\n\n      stop = () => {\n        scrollTargets.forEach((t) => t.removeEventListener('scroll', runUpdate));\n        window.removeEventListener('resize', runUpdate);\n        window.visualViewport?.removeEventListener('resize', runUpdate);\n        window.visualViewport?.removeEventListener('scroll', runUpdate);\n        resizeObserver.disconnect();\n        latest.current.teardown?.();\n      };\n    }\n\n    trySetup();\n\n    return () => {\n      if (rafId !== undefined) cancelAnimationFrame(rafId);\n      stop?.();\n    };\n    // Spread rather than listed: `deps` is the caller's own set of geometry inputs, and changing\n    // any of them has to restart tracking so the new values get applied immediately.\n    // oxlint-disable-next-line react-hooks/exhaustive-deps\n  }, [isOpen, triggerRef, ...deps]);\n}\n"],"mappings":"0HA0CA,SAAgB,EAAkB,CAChC,SACA,aACA,cACA,SACA,aACA,WACA,OAAO,CAAC,GACgB,CAGxB,IAAM,EAAS,EAAO,CAAE,cAAa,SAAQ,aAAY,UAAS,CAAC,EACnE,EAAO,QAAU,CAAE,cAAa,SAAQ,aAAY,UAAS,EAE7D,MAAsB,CACpB,GAAI,CAAC,EAAQ,OAEb,IAAI,EACA,EAMJ,SAAS,GAAW,CAClB,IAAM,EAAU,EAAW,QACrB,EAAW,EAAO,QAAQ,YAChC,GAAI,CAAC,GAAW,EAAS,KAAM,GAAQ,CAAC,EAAI,OAAO,EAAG,CACpD,EAAQ,sBAAsB,CAAQ,EACtC,MACF,CACA,IAAM,EAAY,EAAuB,CAAO,EAE1C,EAAiB,IAAI,mBAAqB,EAAU,CAAC,EACrD,EAAW,IAAI,IAErB,SAAS,GAAY,CACnB,EAAO,QAAQ,OAAO,EAAU,CAAS,EAGzC,EAAO,QAAQ,YAAY,SAAS,CAAE,aAAc,CAC7C,GAAW,GAAS,IAAI,CAAO,IACpC,EAAS,IAAI,CAAO,EACpB,EAAe,QAAQ,CAAO,EAChC,CAAC,CACH,CAEA,EAAU,EAEV,IAAM,EAA0C,CAAC,OAAQ,GAAG,CAAS,EACrE,EAAc,QAAS,GAAM,EAAE,iBAAiB,SAAU,EAAW,CAAE,QAAS,EAAK,CAAC,CAAC,EACvF,OAAO,iBAAiB,SAAU,CAAS,EAG3C,OAAO,gBAAgB,iBAAiB,SAAU,CAAS,EAC3D,OAAO,gBAAgB,iBAAiB,SAAU,CAAS,EAE3D,MAAa,CACX,EAAc,QAAS,GAAM,EAAE,oBAAoB,SAAU,CAAS,CAAC,EACvE,OAAO,oBAAoB,SAAU,CAAS,EAC9C,OAAO,gBAAgB,oBAAoB,SAAU,CAAS,EAC9D,OAAO,gBAAgB,oBAAoB,SAAU,CAAS,EAC9D,EAAe,WAAW,EAC1B,EAAO,QAAQ,WAAW,CAC5B,CACF,CAIA,OAFA,EAAS,MAEI,CACP,IAAU,IAAA,IAAW,qBAAqB,CAAK,EACnD,IAAO,CACT,CAIF,EAAG,CAAC,EAAQ,EAAY,GAAG,CAAI,CAAC,CAClC"}

package/dist/esm/common/hooks/useFocusBoundary.mjs

@@ -1,2 +1,2 @@
-var e=[`a[href]`,`area[href]`,`button:not([disabled])`,`input:not([disabled])`,`select:not([disabled])`,`textarea:not([disabled])`,`[tabindex]:not([tabindex="-1"])`,`[contenteditable="true"]`].join(`,`);function t(t){return t?Array.from(t.querySelectorAll(e)):[]}function n({triggerRef:e,contentRef:n}){function r(){return t(e.current)[0]??e.current}function i(){r()?.focus()}function a(){let e=t(document.body).filter(e=>!n.current?.contains(e)),i=r(),a=i?e.indexOf(i):-1;a>=0&&e[a+1]?.focus()}return{firstTriggerFocusable:r,restoreFocusToTrigger:i,focusAfterTrigger:a}}export{t as tabbablesIn,n as useFocusBoundary};
+var e=[`a[href]`,`area[href]`,`button:not([disabled])`,`input:not([disabled])`,`select:not([disabled])`,`textarea:not([disabled])`,`[tabindex]:not([tabindex="-1"])`,`[contenteditable="true"]`].join(`,`);function t(t){return t?Array.from(t.querySelectorAll(e)).filter(e=>e.getAttribute(`tabindex`)!==`-1`):[]}function n({triggerRef:e,contentRef:n}){function r(){return t(e.current)[0]??e.current}function i(){r()?.focus()}function a(){let e=t(document.body).filter(e=>!n.current?.contains(e)),i=r(),a=i?e.indexOf(i):-1;a>=0&&e[a+1]?.focus()}return{firstTriggerFocusable:r,restoreFocusToTrigger:i,focusAfterTrigger:a}}export{t as tabbablesIn,n as useFocusBoundary};
 //# sourceMappingURL=useFocusBoundary.mjs.map

package/dist/esm/common/hooks/useFocusBoundary.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"useFocusBoundary.mjs","names":[],"sources":["../../../../package/common/hooks/useFocusBoundary.ts"],"sourcesContent":["import type { RefObject } from 'react';\n\nconst FOCUSABLE_SELECTOR = [\n  'a[href]',\n  'area[href]',\n  'button:not([disabled])',\n  'input:not([disabled])',\n  'select:not([disabled])',\n  'textarea:not([disabled])',\n  '[tabindex]:not([tabindex=\"-1\"])',\n  '[contenteditable=\"true\"]',\n].join(',');\n\n/** Tabbable descendants of `root`, in DOM order. */\nexport function tabbablesIn(root: ParentNode | null): HTMLElement[] {\n  if (!root) return [];\n  return Array.from(root.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR));\n}\n\nexport interface UseFocusBoundaryArgs {\n  /** The trigger element focus returns to on Escape / Shift+Tab out of the content's top. */\n  triggerRef: RefObject<HTMLElement | null>;\n  /** The portaled content root — tabbables inside it define the Tab boundary. */\n  contentRef: RefObject<HTMLElement | null>;\n}\n\n/**\n * Focus helpers for content portaled to the end of the DOM (e.g. via BodyEnd), where Tab can't\n * reach it in visual document order on its own. Shared by FloatingMenu and Popover, which both\n * need to hand focus back to the trigger on Escape / Shift+Tab out of the top, and continue\n * focus naturally past the trigger when Tab exits the bottom.\n */\nexport function useFocusBoundary({ triggerRef, contentRef }: UseFocusBoundaryArgs) {\n  function firstTriggerFocusable(): HTMLElement | null {\n    return tabbablesIn(triggerRef.current)[0] ?? triggerRef.current;\n  }\n\n  function restoreFocusToTrigger() {\n    firstTriggerFocusable()?.focus();\n  }\n\n  // Move focus to the tabbable element that follows the trigger in the document, skipping the\n  // portaled content — the \"natural next\" stop when Tab exits the bottom of the content.\n  function focusAfterTrigger() {\n    const all = tabbablesIn(document.body).filter((el) => !contentRef.current?.contains(el));\n    const trig = firstTriggerFocusable();\n    const idx = trig ? all.indexOf(trig) : -1;\n    if (idx >= 0) all[idx + 1]?.focus();\n  }\n\n  return { firstTriggerFocusable, restoreFocusToTrigger, focusAfterTrigger };\n}\n"],"mappings":"AAEA,IAAM,EAAqB,CACzB,UACA,aACA,yBACA,wBACA,yBACA,2BACA,kCACA,0BACF,CAAC,CAAC,KAAK,GAAG,EAGV,SAAgB,EAAY,EAAwC,CAElE,OADK,EACE,MAAM,KAAK,EAAK,iBAA8B,CAAkB,CAAC,EADtD,CAAC,CAErB,CAeA,SAAgB,EAAiB,CAAE,aAAY,cAAoC,CACjF,SAAS,GAA4C,CACnD,OAAO,EAAY,EAAW,OAAO,CAAC,CAAC,IAAM,EAAW,OAC1D,CAEA,SAAS,GAAwB,CAC/B,EAAsB,CAAC,EAAE,MAAM,CACjC,CAIA,SAAS,GAAoB,CAC3B,IAAM,EAAM,EAAY,SAAS,IAAI,CAAC,CAAC,OAAQ,GAAO,CAAC,EAAW,SAAS,SAAS,CAAE,CAAC,EACjF,EAAO,EAAsB,EAC7B,EAAM,EAAO,EAAI,QAAQ,CAAI,EAAI,GACnC,GAAO,GAAG,EAAI,EAAM,EAAE,EAAE,MAAM,CACpC,CAEA,MAAO,CAAE,wBAAuB,wBAAuB,mBAAkB,CAC3E"}
+{"version":3,"file":"useFocusBoundary.mjs","names":[],"sources":["../../../../package/common/hooks/useFocusBoundary.ts"],"sourcesContent":["import type { RefObject } from 'react';\n\nconst FOCUSABLE_SELECTOR = [\n  'a[href]',\n  'area[href]',\n  'button:not([disabled])',\n  'input:not([disabled])',\n  'select:not([disabled])',\n  'textarea:not([disabled])',\n  '[tabindex]:not([tabindex=\"-1\"])',\n  '[contenteditable=\"true\"]',\n].join(',');\n\n/** Tabbable descendants of `root`, in DOM order. */\nexport function tabbablesIn(root: ParentNode | null): HTMLElement[] {\n  if (!root) return [];\n  return (\n    Array.from(root.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR))\n      // A button or a link can be taken out of the tab order too, which the\n      // selector above only catches for elements whose focusability comes from\n      // the attribute. A roving tabindex, where one item of a list is the tab\n      // stop and the rest are reachable by arrow key, otherwise reads as a list\n      // of tab stops, and the Tab boundary lands on the wrong entry.\n      .filter((el) => el.getAttribute('tabindex') !== '-1')\n  );\n}\n\nexport interface UseFocusBoundaryArgs {\n  /** The trigger element focus returns to on Escape / Shift+Tab out of the content's top. */\n  triggerRef: RefObject<HTMLElement | null>;\n  /** The portaled content root — tabbables inside it define the Tab boundary. */\n  contentRef: RefObject<HTMLElement | null>;\n}\n\n/**\n * Focus helpers for content portaled to the end of the DOM (e.g. via BodyEnd), where Tab can't\n * reach it in visual document order on its own. Used by Popover and by Menu, which both need to\n * hand focus back to the trigger on Escape / Shift+Tab out of the top, and continue focus\n * naturally past the trigger when Tab exits the bottom.\n */\nexport function useFocusBoundary({ triggerRef, contentRef }: UseFocusBoundaryArgs) {\n  function firstTriggerFocusable(): HTMLElement | null {\n    return tabbablesIn(triggerRef.current)[0] ?? triggerRef.current;\n  }\n\n  function restoreFocusToTrigger() {\n    firstTriggerFocusable()?.focus();\n  }\n\n  // Move focus to the tabbable element that follows the trigger in the document, skipping the\n  // portaled content — the \"natural next\" stop when Tab exits the bottom of the content.\n  function focusAfterTrigger() {\n    const all = tabbablesIn(document.body).filter((el) => !contentRef.current?.contains(el));\n    const trig = firstTriggerFocusable();\n    const idx = trig ? all.indexOf(trig) : -1;\n    if (idx >= 0) all[idx + 1]?.focus();\n  }\n\n  return { firstTriggerFocusable, restoreFocusToTrigger, focusAfterTrigger };\n}\n"],"mappings":"AAEA,IAAM,EAAqB,CACzB,UACA,aACA,yBACA,wBACA,yBACA,2BACA,kCACA,0BACF,CAAC,CAAC,KAAK,GAAG,EAGV,SAAgB,EAAY,EAAwC,CAElE,OADK,EAEH,MAAM,KAAK,EAAK,iBAA8B,CAAkB,CAAC,CAAC,CAM/D,OAAQ,GAAO,EAAG,aAAa,UAAU,IAAM,IAAI,EARtC,CAAC,CAUrB,CAeA,SAAgB,EAAiB,CAAE,aAAY,cAAoC,CACjF,SAAS,GAA4C,CACnD,OAAO,EAAY,EAAW,OAAO,CAAC,CAAC,IAAM,EAAW,OAC1D,CAEA,SAAS,GAAwB,CAC/B,EAAsB,CAAC,EAAE,MAAM,CACjC,CAIA,SAAS,GAAoB,CAC3B,IAAM,EAAM,EAAY,SAAS,IAAI,CAAC,CAAC,OAAQ,GAAO,CAAC,EAAW,SAAS,SAAS,CAAE,CAAC,EACjF,EAAO,EAAsB,EAC7B,EAAM,EAAO,EAAI,QAAQ,CAAI,EAAI,GACnC,GAAO,GAAG,EAAI,EAAM,EAAE,EAAE,MAAM,CACpC,CAEA,MAAO,CAAE,wBAAuB,wBAAuB,mBAAkB,CAC3E"}

package/dist/esm/common/hooks/useSheet.mjs

@@ -1,2 +1,2 @@
-import{Presentation as e}from"../floatingMenu/floatingMenu.types.mjs";import t from"./useMediaQuery.mjs";import n from"./useCoarsePointer.mjs";import{useVisualViewportSize as r}from"./useVisualViewportSize.mjs";var i=`(max-width: 767px)`,a=8;function o(o=e.Default){let s=n(),c=t(i),{height:l,offsetTop:u}=r();return o===e.Sheet||o===e.Auto&&s&&c?{isSheet:!0,sheetStyle:{bottom:typeof window>`u`?0:Math.max(0,window.innerHeight-(u+l)),"--sheet-available-height":`${Math.max(0,l-a)}px`}}:{isSheet:!1,sheetStyle:void 0}}export{o as default,o as useSheet};
+import{Presentation as e}from"../configProvider/presentation.types.mjs";import t from"./useMediaQuery.mjs";import n from"./useCoarsePointer.mjs";import{useVisualViewportSize as r}from"./useVisualViewportSize.mjs";var i=`(max-width: 767px)`,a=8;function o(o=e.Default){let s=n(),c=t(i),{height:l,offsetTop:u}=r();return o===e.Sheet||o===e.Auto&&s&&c?{isSheet:!0,sheetStyle:{bottom:typeof window>`u`?0:Math.max(0,window.innerHeight-(u+l)),"--sheet-available-height":`${Math.max(0,l-a)}px`}}:{isSheet:!1,sheetStyle:void 0}}export{o as default,o as useSheet};
 //# sourceMappingURL=useSheet.mjs.map

package/dist/esm/common/hooks/useSheet.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"useSheet.mjs","names":[],"sources":["../../../../package/common/hooks/useSheet.ts"],"sourcesContent":["import type { CSSProperties } from 'react';\nimport { Presentation } from '../floatingMenu/floatingMenu.types';\nimport { useCoarsePointer } from './useCoarsePointer';\nimport { useMediaQuery } from './useMediaQuery';\nimport { useVisualViewportSize } from './useVisualViewportSize';\n\n/** Below this, `Presentation.Auto` switches a touch device over to a sheet. */\nconst SMALL_SCREEN_QUERY = '(max-width: 767px)';\n\n/** Sliver kept above a full-height sheet, so it still reads as a sheet rather than a full screen. */\nconst TOP_GAP = 8;\n\nexport interface Sheet {\n  /** Whether the popup should render as a bottom sheet instead of anchored to its trigger. */\n  isSheet: boolean;\n  /**\n   * Inline style for the sheet root: keeps it above an open on-screen keyboard, and hands the CSS\n   * the height actually left on screen as `--sheet-available-height`.\n   */\n  sheetStyle: CSSProperties | undefined;\n}\n\n/**\n * Resolves whether a popup presents as a bottom sheet.\n *\n * `Auto` asks for a coarse pointer *and* a small screen: pointer alone turns a touchscreen laptop\n * into a phone, and width alone turns a narrow desktop window into one.\n */\nexport function useSheet(presentation: Presentation = Presentation.Default): Sheet {\n  const isCoarsePointer = useCoarsePointer();\n  const isSmallScreen = useMediaQuery(SMALL_SCREEN_QUERY);\n  const { height: viewportHeight, offsetTop } = useVisualViewportSize();\n\n  const isSheet =\n    presentation === Presentation.Sheet || (presentation === Presentation.Auto && isCoarsePointer && isSmallScreen);\n\n  if (!isSheet) return { isSheet: false, sheetStyle: undefined };\n\n  // `position: fixed` resolves against the layout viewport, which an open keyboard doesn't\n  // shrink — so a sheet at `bottom: 0` sits behind the keyboard. Lift it by the difference.\n  const keyboardHeight =\n    typeof window === 'undefined' ? 0 : Math.max(0, window.innerHeight - (offsetTop + viewportHeight));\n\n  // Lifting the sheet is only half of it: it also has to *fit* in what's left. No viewport unit\n  // can express that, because `dvh` (like `vh`) measures the layout viewport, which the keyboard\n  // doesn't shrink either — so a tall sheet capped at, say, `90dvh` and lifted by the keyboard\n  // height ends up with its top edge above the screen, taking the header and the first part of\n  // the body with it, out of reach of the body's own scrolling. The visual viewport is the only\n  // thing that knows the real number, so it's measured here and handed to the CSS to clamp with.\n  const availableHeight = Math.max(0, viewportHeight - TOP_GAP);\n\n  const sheetStyle = {\n    bottom: keyboardHeight,\n    '--sheet-available-height': `${availableHeight}px`,\n  } as CSSProperties;\n\n  return { isSheet: true, sheetStyle };\n}\n\nexport default useSheet;\n"],"mappings":"mNAOA,IAAM,EAAqB,qBAGrB,EAAU,EAkBhB,SAAgB,EAAS,EAA6B,EAAa,QAAgB,CACjF,IAAM,EAAkB,EAAiB,EACnC,EAAgB,EAAc,CAAkB,EAChD,CAAE,OAAQ,EAAgB,aAAc,EAAsB,EAyBpE,OAtBE,IAAiB,EAAa,OAAU,IAAiB,EAAa,MAAQ,GAAmB,EAsB5F,CAAE,QAAS,GAAM,WAAA,CAJtB,OAXA,OAAO,OAAW,IAAc,EAAI,KAAK,IAAI,EAAG,OAAO,aAAe,EAAY,EAAe,EAYjG,2BAA4B,GAJN,KAAK,IAAI,EAAG,EAAiB,CAIpB,EAAgB,GAGzB,CAAW,EApBd,CAAE,QAAS,GAAO,WAAY,IAAA,EAAU,CAqB/D"}
+{"version":3,"file":"useSheet.mjs","names":[],"sources":["../../../../package/common/hooks/useSheet.ts"],"sourcesContent":["import type { CSSProperties } from 'react';\nimport { Presentation } from '../configProvider/presentation.types';\nimport { useCoarsePointer } from './useCoarsePointer';\nimport { useMediaQuery } from './useMediaQuery';\nimport { useVisualViewportSize } from './useVisualViewportSize';\n\n/** Below this, `Presentation.Auto` switches a touch device over to a sheet. */\nconst SMALL_SCREEN_QUERY = '(max-width: 767px)';\n\n/** Sliver kept above a full-height sheet, so it still reads as a sheet rather than a full screen. */\nconst TOP_GAP = 8;\n\nexport interface Sheet {\n  /** Whether the popup should render as a bottom sheet instead of anchored to its trigger. */\n  isSheet: boolean;\n  /**\n   * Inline style for the sheet root: keeps it above an open on-screen keyboard, and hands the CSS\n   * the height actually left on screen as `--sheet-available-height`.\n   */\n  sheetStyle: CSSProperties | undefined;\n}\n\n/**\n * Resolves whether a popup presents as a bottom sheet.\n *\n * `Auto` asks for a coarse pointer *and* a small screen: pointer alone turns a touchscreen laptop\n * into a phone, and width alone turns a narrow desktop window into one.\n */\nexport function useSheet(presentation: Presentation = Presentation.Default): Sheet {\n  const isCoarsePointer = useCoarsePointer();\n  const isSmallScreen = useMediaQuery(SMALL_SCREEN_QUERY);\n  const { height: viewportHeight, offsetTop } = useVisualViewportSize();\n\n  const isSheet =\n    presentation === Presentation.Sheet || (presentation === Presentation.Auto && isCoarsePointer && isSmallScreen);\n\n  if (!isSheet) return { isSheet: false, sheetStyle: undefined };\n\n  // `position: fixed` resolves against the layout viewport, which an open keyboard doesn't\n  // shrink — so a sheet at `bottom: 0` sits behind the keyboard. Lift it by the difference.\n  const keyboardHeight =\n    typeof window === 'undefined' ? 0 : Math.max(0, window.innerHeight - (offsetTop + viewportHeight));\n\n  // Lifting the sheet is only half of it: it also has to *fit* in what's left. No viewport unit\n  // can express that, because `dvh` (like `vh`) measures the layout viewport, which the keyboard\n  // doesn't shrink either — so a tall sheet capped at, say, `90dvh` and lifted by the keyboard\n  // height ends up with its top edge above the screen, taking the header and the first part of\n  // the body with it, out of reach of the body's own scrolling. The visual viewport is the only\n  // thing that knows the real number, so it's measured here and handed to the CSS to clamp with.\n  const availableHeight = Math.max(0, viewportHeight - TOP_GAP);\n\n  const sheetStyle = {\n    bottom: keyboardHeight,\n    '--sheet-available-height': `${availableHeight}px`,\n  } as CSSProperties;\n\n  return { isSheet: true, sheetStyle };\n}\n\nexport default useSheet;\n"],"mappings":"qNAOA,IAAM,EAAqB,qBAGrB,EAAU,EAkBhB,SAAgB,EAAS,EAA6B,EAAa,QAAgB,CACjF,IAAM,EAAkB,EAAiB,EACnC,EAAgB,EAAc,CAAkB,EAChD,CAAE,OAAQ,EAAgB,aAAc,EAAsB,EAyBpE,OAtBE,IAAiB,EAAa,OAAU,IAAiB,EAAa,MAAQ,GAAmB,EAsB5F,CAAE,QAAS,GAAM,WAAA,CAJtB,OAXA,OAAO,OAAW,IAAc,EAAI,KAAK,IAAI,EAAG,OAAO,aAAe,EAAY,EAAe,EAYjG,2BAA4B,GAJN,KAAK,IAAI,EAAG,EAAiB,CAIpB,EAAgB,GAGzB,CAAW,EApBd,CAAE,QAAS,GAAO,WAAY,IAAA,EAAU,CAqB/D"}

package/dist/esm/common/infiniteBlock/infiniteBlock.mjs

@@ -1,2 +1,2 @@
-import e from"../loading/spinnerLoading/index.mjs";import t from"./infiniteBlock.module.mjs";import n,{useCallback as r,useEffect as i,useRef as a,useState as o}from"react";import s from"classnames";import{Fragment as c,jsx as l,jsxs as u}from"react/jsx-runtime";function d(e){return e==null||typeof e==`boolean`?``:typeof e==`string`||typeof e==`number`?String(e):Array.isArray(e)?e.map(d).join(``):n.isValidElement(e)?d(e.props.children):``}function f(e,t,n){return e===-1?t>0?0:n-1:(e+t+n)%n}function p(e,t,n){let[r,s]=o(!1),c=a(!1),l=a(null),u=a(t);return i(()=>{u.current=t}),i(()=>{let t=e.current,r=l.current;if(n||!t||!r)return;let i=!1,a=()=>{c.current||(c.current=!0,s(!0),u.current().catch(()=>null).finally(()=>{i||(c.current=!1,s(!1),o.unobserve(r),o.observe(r))}))},o=new IntersectionObserver(([e])=>{e.isIntersecting&&a()},{root:t});return o.observe(r),()=>{i=!0,o.disconnect()}},[e,n]),{isLoading:r,sentinelRef:l}}function m(e,t){let i=a(null),o=a(-1),s=a(null);return{containerRef:i,onKeyDown:r(r=>{let a=i.current;if(!a)return;let c=n.Children.toArray(e);if(c.length===0)return;let l=o.current;if(r.key===`ArrowDown`)r.preventDefault(),l=f(l,1,c.length);else if(r.key===`ArrowUp`)r.preventDefault(),l=f(l,-1,c.length);else if(r.key.length===1){let e=r.key.toLowerCase(),t=s.current===r.key?l+1:0,n=t=>d(t).toLowerCase().startsWith(e),i=c.slice(t).findIndex(n),a=i===-1?c.slice(0,t).findIndex(n):t+i;if(s.current=r.key,a===-1)return;l=a}else return;s.current=r.key,o.current=l;let u=a.children[l];if(u){let e=u.offsetTop,t=e+u.offsetHeight;e<a.scrollTop?a.scrollTop=e:t>a.scrollTop+a.clientHeight&&(a.scrollTop=t-a.clientHeight)}t(l)},[e,t])}}function h({children:n,onScroll:r,className:i=``,isDataLoading:a=!1,setHighlightedIndex:o=()=>null}){let{containerRef:d,onKeyDown:f}=m(n,o),{isLoading:h,sentinelRef:g}=p(d,r,a);return l(`div`,{className:s(t.infiniteBlock,i),onKeyDown:f,tabIndex:0,ref:d,children:a?l(`div`,{className:t.spinnerWrapper,children:l(e,{className:t.spinner})}):u(c,{children:[n,l(`div`,{ref:g,className:t.sentinel,"aria-hidden":`true`}),h&&l(`div`,{className:t.spinnerWrapper,children:l(e,{className:t.spinner})})]})})}export{h as default};
+import e from"../loading/spinnerLoading/index.mjs";import t from"./infiniteBlock.module.mjs";import n,{useCallback as r,useEffect as i,useRef as a,useState as o}from"react";import s from"classnames";import{Fragment as c,jsx as l,jsxs as u}from"react/jsx-runtime";function d(e){return e==null||typeof e==`boolean`?``:typeof e==`string`||typeof e==`number`?String(e):Array.isArray(e)?e.map(d).join(``):n.isValidElement(e)?d(e.props.children):``}function f(e,t,n){return e===-1?t>0?0:n-1:(e+t+n)%n}function p(e,t,n){let[r,s]=o(!1),c=a(!1),l=a(null),u=a(t);return i(()=>{u.current=t}),i(()=>{let t=e.current,r=l.current;if(n||!t||!r)return;let i=!1,a=()=>{c.current||(c.current=!0,s(!0),u.current().catch(()=>null).finally(()=>{i||(c.current=!1,s(!1),o.unobserve(r),o.observe(r))}))},o=new IntersectionObserver(([e])=>{e.isIntersecting&&a()},{root:t});return o.observe(r),()=>{i=!0,o.disconnect()}},[e,n]),{isLoading:r,sentinelRef:l}}function m(e,t){let i=a(null),o=a(-1),s=a(null);return{containerRef:i,onKeyDown:r(r=>{let a=i.current;if(!a)return;let c=n.Children.toArray(e);if(c.length===0)return;let l=o.current;if(r.key===`ArrowDown`)r.preventDefault(),l=f(l,1,c.length);else if(r.key===`ArrowUp`)r.preventDefault(),l=f(l,-1,c.length);else if(r.key.length===1){let e=r.key.toLowerCase(),t=s.current===r.key?l+1:0,n=t=>d(t).toLowerCase().startsWith(e),i=c.slice(t).findIndex(n),a=i===-1?c.slice(0,t).findIndex(n):t+i;if(s.current=r.key,a===-1)return;l=a}else return;s.current=r.key,o.current=l;let u=a.children[l];if(u){let e=u.offsetTop,t=e+u.offsetHeight;e<a.scrollTop?a.scrollTop=e:t>a.scrollTop+a.clientHeight&&(a.scrollTop=t-a.clientHeight)}t(l)},[e,t])}}function h({children:n,onScroll:r,className:i=``,style:a,isDataLoading:o=!1,setHighlightedIndex:d=()=>null}){let{containerRef:f,onKeyDown:h}=m(n,d),{isLoading:g,sentinelRef:_}=p(f,r,o);return l(`div`,{className:s(t.infiniteBlock,i),style:a,onKeyDown:h,tabIndex:0,ref:f,children:o?l(`div`,{className:t.spinnerWrapper,children:l(e,{className:t.spinner})}):u(c,{children:[n,l(`div`,{ref:_,className:t.sentinel,"aria-hidden":`true`}),g&&l(`div`,{className:t.spinnerWrapper,children:l(e,{className:t.spinner})})]})})}export{h as default};
 //# sourceMappingURL=infiniteBlock.mjs.map