@ahrowe/ui 0.34.0 → 0.36.0

package/dist/esm/common/loading/spinnerLoading/spinnerLoading.module.mjs

@@ -1,2 +1,2 @@
-var e=`spinner-loading_qbxX-`,t=`animate-spinner_6HoVF`,n=`spin_axdh6`,r={"spinner-loading":`spinner-loading_qbxX-`,spinnerLoading:e,"animate-spinner":`animate-spinner_6HoVF`,animateSpinner:t,spin:n};export{t as animateSpinner,r as default,n as spin,e as spinnerLoading};
+"use client";var e=`spinner-loading_qbxX-`,t=`animate-spinner_6HoVF`,n=`spin_axdh6`,r={"spinner-loading":`spinner-loading_qbxX-`,spinnerLoading:e,"animate-spinner":`animate-spinner_6HoVF`,animateSpinner:t,spin:n};export{t as animateSpinner,r as default,n as spin,e as spinnerLoading};
 //# sourceMappingURL=spinnerLoading.module.mjs.map

package/dist/esm/common/maskedInput/mask.mjs

@@ -0,0 +1,2 @@
+"use client";var e=e=>e!==void 0&&e>=`0`&&e<=`9`;function t(e){let t=[];for(let n=0;n<e.length;n++)e[n]===`9`&&t.push(n);return t}function n(t,n,r){return[...n].map((n,i)=>n===`9`?e(t[i])?t[i]:r:n).join(``)}function r(e,t,n){return e>=t.length?n.length:t[e]}function i(e,t){let n=t.findIndex(t=>t>=e);return n===-1?t.length:n}function a(e,t){for(let n=t.length-1;n>=0;n--)if(t[n]<e)return n;return-1}function o(r,i,a){let o=t(i),s=n(r,i,a),c=o.findIndex(t=>!e(s[t]));return c===-1?i.length:o[c]}function s(e,t,n){let r=Math.max(0,Math.min(e.length,e.length-(t.length-n))),i=0;for(;i<r&&i<n&&e[i]===t[i];)i++;return{from:i,to:r,inserted:t.slice(i,n)}}function c(o,c,l,u,d){let f=t(u),p=[...n(o,u,d)],m=e=>r(e,f,u),h=(e,t)=>f.filter(n=>n>=e&&n<t),{from:g,to:_,inserted:v}=s(o,c,l),y=[...v].filter(e);if(v.length>0&&y.length===0){let e=i(g,f);return{value:p.join(``),selection:{start:m(e),end:m(e)}}}if(v.length===0){let e=h(g,_),t=a(g,f),n=e.length>0?e:t===-1?[]:[f[t]];for(let e of n)p[e]=d;let r=e.length>0?i(g,f):Math.max(t,0);return{value:p.join(``),selection:{start:m(r),end:m(r)}}}for(let e of h(g,_))p[e]=d;let b=i(g,f);if(b>=f.length){let t=f.findIndex(t=>!e(p[t]));t!==-1&&(b=t)}for(let e of y){if(b>=f.length)break;p[f[b]]=e,b++}return{value:p.join(``),selection:{start:m(b),end:m(b)}}}function l(n,r){return!t(r).some(t=>e(n[t]))}export{o as firstEmptyCaret,l as isBlank,c as maskChange,t as slotIndices,n as toMask};
+//# sourceMappingURL=mask.mjs.map

package/dist/esm/common/maskedInput/mask.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"mask.mjs","names":[],"sources":["../../../../package/common/maskedInput/mask.ts"],"sourcesContent":["/**\n * A fixed-width digit mask: `99:99`, `99.99.9999`.\n *\n * Fixed means every character keeps its position. Clearing a digit in the middle leaves a hole\n * rather than pulling the rest left, which is what a date or a time wants: deleting the month\n * out of `11.11.2025` must not turn the year into the month.\n *\n * `9` marks a slot that takes a digit. Every other character is a literal the caret steps over\n * and the user cannot type into.\n */\n\nconst DIGIT_SLOT = '9';\n\nexport interface MaskSelection {\n  start: number;\n  end: number;\n}\n\nexport interface MaskState {\n  value: string;\n  selection: MaskSelection | null;\n}\n\nconst isDigit = (character: string | undefined): boolean =>\n  character !== undefined && character >= '0' && character <= '9';\n\n/** The mask indices that take a digit, in order. */\nexport function slotIndices(mask: string): number[] {\n  const slots: number[] = [];\n  for (let index = 0; index < mask.length; index++) if (mask[index] === DIGIT_SLOT) slots.push(index);\n  return slots;\n}\n\n/** The mask with every slot empty: `__.__.____`. */\nexport function emptyMask(mask: string, placeholder: string): string {\n  return [...mask].map((character) => (character === DIGIT_SLOT ? placeholder : character)).join('');\n}\n\n/**\n * Any string as one character per mask index, so slots can be read and written by position.\n *\n * Every other function here assumes a value exactly as long as the mask, with literals where the\n * mask has them. Putting a value through this is what guarantees that, whether it came from a\n * keystroke, from a consumer's state, or from nothing at all.\n */\nexport function toMask(value: string, mask: string, placeholder: string): string {\n  return [...mask]\n    .map((maskCharacter, index) => {\n      if (maskCharacter !== DIGIT_SLOT) return maskCharacter;\n      return isDigit(value[index]) ? value[index] : placeholder;\n    })\n    .join('');\n}\n\n/** Where the caret belongs so the next digit typed lands in `slot`. */\nfunction caretForSlot(slot: number, slots: number[], mask: string): number {\n  return slot >= slots.length ? mask.length : slots[slot];\n}\n\n/** The first slot at or after `index`, or the slot count when there is none. */\nfunction slotAtOrAfter(index: number, slots: number[]): number {\n  const found = slots.findIndex((position) => position >= index);\n  return found === -1 ? slots.length : found;\n}\n\n/** The last slot strictly before `index`, or -1. */\nfunction slotBefore(index: number, slots: number[]): number {\n  for (let slot = slots.length - 1; slot >= 0; slot--) if (slots[slot] < index) return slot;\n  return -1;\n}\n\n/**\n * Where the caret belongs when the field is entered: the first slot with no digit in it.\n *\n * A mask is as wide when empty as when full, so a click lands wherever it likes, and clicking at\n * the end of `__.__.____` would otherwise leave the caret past every slot with nowhere to put the\n * next digit.\n */\nexport function firstEmptyCaret(value: string, mask: string, placeholder: string): number {\n  const slots = slotIndices(mask);\n  const filled = toMask(value, mask, placeholder);\n  const empty = slots.findIndex((index) => !isDigit(filled[index]));\n  return empty === -1 ? mask.length : slots[empty];\n}\n\n/** One edit, as the region of the old value it replaced and the text it put there. */\nfunction editOf(previous: string, raw: string, caret: number) {\n  // Everything after the caret is untouched, so the replaced region ends exactly as far from the\n  // end of the old value as the caret is from the end of the new one. This is what the caret is\n  // for: a prefix/suffix diff alone cannot tell a forward Delete from a Backspace one place along,\n  // nor typing `1` over a `1` from typing nothing at all.\n  const to = Math.max(0, Math.min(previous.length, previous.length - (raw.length - caret)));\n\n  let from = 0;\n  while (from < to && from < caret && previous[from] === raw[from]) from++;\n\n  return { from, to, inserted: raw.slice(from, caret) };\n}\n\n/**\n * What the field should show after the browser has changed its raw text, and where the caret\n * belongs.\n *\n * Works from the edit rather than from key events, so a paste, a drag, a replaced selection, an\n * autofill and a keystroke all arrive the same way.\n */\nexport function maskChange(previous: string, raw: string, caret: number, mask: string, placeholder: string): MaskState {\n  const slots = slotIndices(mask);\n  const characters = [...toMask(previous, mask, placeholder)];\n  const at = (slot: number) => caretForSlot(slot, slots, mask);\n  const held = (from: number, to: number) => slots.filter((index) => index >= from && index < to);\n\n  const { from, to, inserted } = editOf(previous, raw, caret);\n  const digits = [...inserted].filter(isDigit);\n\n  // Something was typed that the mask has no room for: a separator the mask already draws, a\n  // letter, a symbol. The old library dropped these, and so does this — writing nothing would\n  // still be wrong, because the browser has already put the character in the field.\n  if (inserted.length > 0 && digits.length === 0) {\n    const caretSlot = slotAtOrAfter(from, slots);\n    return { value: characters.join(''), selection: { start: at(caretSlot), end: at(caretSlot) } };\n  }\n\n  if (inserted.length === 0) {\n    const touched = held(from, to);\n\n    // Backspace over a literal reads as deleting only that literal, which the user cannot have\n    // meant: nothing they typed is there. Take the digit in front of it instead, the way the\n    // caret would have if it had never been allowed to rest on a literal.\n    const previousSlot = slotBefore(from, slots);\n    const target = touched.length > 0 ? touched : previousSlot === -1 ? [] : [slots[previousSlot]];\n\n    for (const index of target) characters[index] = placeholder;\n    const caretSlot = touched.length > 0 ? slotAtOrAfter(from, slots) : Math.max(previousSlot, 0);\n    return { value: characters.join(''), selection: { start: at(caretSlot), end: at(caretSlot) } };\n  }\n\n  // A replaced selection clears what it covered first, so typing over a highlighted month does\n  // not leave its second digit behind.\n  for (const index of held(from, to)) characters[index] = placeholder;\n\n  let slot = slotAtOrAfter(from, slots);\n  // Typed past the last slot: a mask is as wide empty as full, so a click can leave the caret\n  // there with nothing after it. Fall back to the first slot still free, which is where the digit\n  // was going to end up anyway. A value with no free slot is left alone, as it should be.\n  if (slot >= slots.length) {\n    const free = slots.findIndex((index) => !isDigit(characters[index]));\n    if (free !== -1) slot = free;\n  }\n\n  for (const digit of digits) {\n    if (slot >= slots.length) break;\n    characters[slots[slot]] = digit;\n    slot++;\n  }\n\n  return { value: characters.join(''), selection: { start: at(slot), end: at(slot) } };\n}\n\n/** Whether a masked value holds no digits at all, so the field reads as empty. */\nexport function isBlank(value: string, mask: string): boolean {\n  return !slotIndices(mask).some((index) => isDigit(value[index]));\n}\n"],"mappings":"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"}

package/dist/esm/common/maskedInput/maskedInput.mjs

@@ -0,0 +1,2 @@
+"use client";import{mergeRefs as e}from"../utils/mergeRefs.mjs";import{firstEmptyCaret as t,isBlank as n,maskChange as r,toMask as i}from"./mask.mjs";import{useLayoutEffect as a,useRef as o,useState as s}from"react";import{jsx as c}from"react/jsx-runtime";function l(l){let{mask:u,maskPlaceholder:d=`_`,value:f=``,onChange:p,beforeMaskedStateChange:m,onFocus:h,onBlur:g,onClick:_,ref:v,...y}=l,b=o(null),[x,S]=s(!1),C=o(null);a(()=>{C.current!==null&&(b.current?.setSelectionRange(C.current,C.current),C.current=null)});let w=n(f,u),T=w?x?i(``,u,d):``:i(f,u,d),E=e=>{C.current=e,b.current?.setSelectionRange(e,e)},D=e=>{let a=e.target,o=a.value,s=r(T,o,a.selectionStart??o.length,u,d),c=m?m({previousState:{value:T,selection:null},nextState:s}):s,l=i(c.value,u,d),f=c.selection?.start??t(l,u,d);if(l===T){a.value=T,E(f);return}C.current=f,p?.(n(l,u)?``:l)},O=e=>{S(!0),w&&(C.current=0),h?.(e)},k=e=>{let n=e.currentTarget,r=t(T,u,d);n.selectionStart===n.selectionEnd&&(n.selectionStart??0)>r&&n.setSelectionRange(r,r),_?.(e)},A=e=>{S(!1),g?.(e)};return c(`input`,{...y,ref:e(b,v),value:T,onChange:D,onFocus:O,onBlur:A,onClick:k,inputMode:`numeric`})}export{l as default};
+//# sourceMappingURL=maskedInput.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"maskedInput.mjs","names":[],"sources":["../../../../package/common/maskedInput/maskedInput.tsx"],"sourcesContent":["import { useLayoutEffect, useRef, useState } from 'react';\nimport type React from 'react';\n\nimport { mergeRefs } from '../utils/mergeRefs';\nimport { firstEmptyCaret, isBlank, maskChange, toMask } from './mask';\nimport type { MaskedInputProps } from './maskedInput.types';\n\n/**\n * A text input under a fixed digit mask, used by `DatePicker` and `TimeInput` through `Input`'s\n * `customInput`. Internal: consumers reach it through those two.\n *\n * Controlled, with one exception. An empty field shows nothing until it is focused, and then shows\n * the bare mask, so a form full of `__.__.____` does not greet someone who has typed nothing. That\n * mask is display only and is never reported through `onChange`, or every untouched date field\n * would submit a value made of underscores.\n */\nfunction MaskedInput(props: MaskedInputProps) {\n  const {\n    mask,\n    maskPlaceholder = '_',\n    value = '',\n    onChange,\n    beforeMaskedStateChange,\n    onFocus,\n    onBlur,\n    onClick,\n    ref,\n    ...rest\n  } = props;\n\n  const inputRef = useRef<HTMLInputElement>(null);\n  const [isFocused, setIsFocused] = useState(false);\n  /**\n   * Where the caret belongs after the value the parent holds comes back to us. Set during the\n   * change and applied on the next paint, because the browser puts the caret at the end of any\n   * value it did not compute itself.\n   */\n  const caretRef = useRef<number | null>(null);\n\n  useLayoutEffect(() => {\n    if (caretRef.current === null) return;\n    inputRef.current?.setSelectionRange(caretRef.current, caretRef.current);\n    caretRef.current = null;\n  });\n\n  const blank = isBlank(value, mask);\n  // Everything below assumes a value exactly as long as the mask. The prop is whatever the parent\n  // holds, which on a first render can be a date from somewhere else entirely, so it is put\n  // through the mask rather than trusted.\n  const display = blank ? (isFocused ? toMask('', mask, maskPlaceholder) : '') : toMask(value, mask, maskPlaceholder);\n\n  const setCaret = (position: number) => {\n    caretRef.current = position;\n    inputRef.current?.setSelectionRange(position, position);\n  };\n\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    const input = event.target;\n    const raw = input.value;\n    const nextState = maskChange(display, raw, input.selectionStart ?? raw.length, mask, maskPlaceholder);\n\n    const state = beforeMaskedStateChange\n      ? beforeMaskedStateChange({ previousState: { value: display, selection: null }, nextState })\n      : nextState;\n\n    const next = toMask(state.value, mask, maskPlaceholder);\n    const caret = state.selection?.start ?? firstEmptyCaret(next, mask, maskPlaceholder);\n\n    // Nothing came of it — a letter typed into an empty field, or a separator the mask already\n    // draws. React re-renders nothing when the value it holds has not changed, so the caret has\n    // to be put back here; the layout effect will not run.\n    if (next === display) {\n      input.value = display;\n      setCaret(caret);\n      return;\n    }\n\n    caretRef.current = caret;\n    onChange?.(isBlank(next, mask) ? '' : next);\n  };\n\n  const handleFocus = (event: React.FocusEvent<HTMLInputElement>) => {\n    setIsFocused(true);\n    // Only when the mask is about to appear. The field showed nothing a moment ago, so whatever\n    // caret the browser picked was measured against an empty string. A field with something in it\n    // keeps the caret where the user put it, and `handleClick` pulls it back only if it landed\n    // past the last free slot.\n    if (blank) caretRef.current = 0;\n    onFocus?.(event);\n  };\n\n  /**\n   * A click can leave the caret past every slot, because a mask is as wide empty as full. Runs on\n   * click rather than on focus: the browser sets the selection on mouse *up*, after focus, so at\n   * focus time there is nothing reliable to read.\n   */\n  const handleClick = (event: React.MouseEvent<HTMLInputElement>) => {\n    const input = event.currentTarget;\n    const limit = firstEmptyCaret(display, mask, maskPlaceholder);\n    // A drag that selected something is left alone; so is a caret already inside the filled part.\n    if (input.selectionStart === input.selectionEnd && (input.selectionStart ?? 0) > limit) {\n      input.setSelectionRange(limit, limit);\n    }\n    onClick?.(event);\n  };\n\n  const handleBlur = (event: React.FocusEvent<HTMLInputElement>) => {\n    setIsFocused(false);\n    onBlur?.(event);\n  };\n\n  return (\n    <input\n      {...rest}\n      ref={mergeRefs(inputRef, ref)}\n      value={display}\n      onChange={handleChange}\n      onFocus={handleFocus}\n      onBlur={handleBlur}\n      onClick={handleClick}\n      inputMode='numeric'\n    />\n  );\n}\n\nexport default MaskedInput;\n"],"mappings":"gQAgBA,SAAS,EAAY,EAAyB,CAC5C,GAAM,CACJ,OACA,kBAAkB,IAClB,QAAQ,GACR,WACA,0BACA,UACA,SACA,UACA,MACA,GAAG,GACD,EAEE,EAAW,EAAyB,IAAI,EACxC,CAAC,EAAW,GAAgB,EAAS,EAAK,EAM1C,EAAW,EAAsB,IAAI,EAE3C,MAAsB,CAChB,EAAS,UAAY,OACzB,EAAS,SAAS,kBAAkB,EAAS,QAAS,EAAS,OAAO,EACtE,EAAS,QAAU,KACrB,CAAC,EAED,IAAM,EAAQ,EAAQ,EAAO,CAAI,EAI3B,EAAU,EAAS,EAAY,EAAO,GAAI,EAAM,CAAe,EAAI,GAAM,EAAO,EAAO,EAAM,CAAe,EAE5G,EAAY,GAAqB,CACrC,EAAS,QAAU,EACnB,EAAS,SAAS,kBAAkB,EAAU,CAAQ,CACxD,EAEM,EAAgB,GAA+C,CACnE,IAAM,EAAQ,EAAM,OACd,EAAM,EAAM,MACZ,EAAY,EAAW,EAAS,EAAK,EAAM,gBAAkB,EAAI,OAAQ,EAAM,CAAe,EAE9F,EAAQ,EACV,EAAwB,CAAE,cAAe,CAAE,MAAO,EAAS,UAAW,IAAK,EAAG,WAAU,CAAC,EACzF,EAEE,EAAO,EAAO,EAAM,MAAO,EAAM,CAAe,EAChD,EAAQ,EAAM,WAAW,OAAS,EAAgB,EAAM,EAAM,CAAe,EAKnF,GAAI,IAAS,EAAS,CACpB,EAAM,MAAQ,EACd,EAAS,CAAK,EACd,MACF,CAEA,EAAS,QAAU,EACnB,IAAW,EAAQ,EAAM,CAAI,EAAI,GAAK,CAAI,CAC5C,EAEM,EAAe,GAA8C,CACjE,EAAa,EAAI,EAKb,IAAO,EAAS,QAAU,GAC9B,IAAU,CAAK,CACjB,EAOM,EAAe,GAA8C,CACjE,IAAM,EAAQ,EAAM,cACd,EAAQ,EAAgB,EAAS,EAAM,CAAe,EAExD,EAAM,iBAAmB,EAAM,eAAiB,EAAM,gBAAkB,GAAK,GAC/E,EAAM,kBAAkB,EAAO,CAAK,EAEtC,IAAU,CAAK,CACjB,EAEM,EAAc,GAA8C,CAChE,EAAa,EAAK,EAClB,IAAS,CAAK,CAChB,EAEA,OACE,EAAC,QAAD,CACE,GAAI,EACJ,IAAK,EAAU,EAAU,CAAG,EAC5B,MAAO,EACP,SAAU,EACV,QAAS,EACT,OAAQ,EACR,QAAS,EACT,UAAU,SACX,CAAA,CAEL"}

package/dist/esm/common/menu/menu.mjs

@@ -1,2 +1,2 @@
-import{renderIcon as e}from"../utils/renderIcon.mjs";import{PopoverAlign as t,PopoverPlacement as n}from"../popover/popover.types.mjs";import{useFocusBoundary as r}from"../hooks/useFocusBoundary.mjs";import i from"../popover/popover.mjs";import a from"./menu.module.mjs";import{isMenuAction as o,isMenuHeading as s,isMenuSeparator as c}from"./menu.types.mjs";import{cloneElement as l,isValidElement as u,useEffect as d,useId as f,useRef as p,useState as m}from"react";import h from"classnames";import{jsx as g,jsxs as _}from"react/jsx-runtime";var v=600;function y(e,t,n){for(let r=1;r<=e.length;r++){let i=(t+n*r+e.length*r)%e.length,a=e[i];if(o(a)&&!a.disabled)return i}return-1}function b(e){return e.findIndex(e=>o(e)&&!e.disabled)}function x(e){for(let t=e.length-1;t>=0;t--){let n=e[t];if(o(n)&&!n.disabled)return t}return-1}function S({items:S,children:C,onAction:w,isOpen:T,onOpenChange:ee,placement:E=n.Bottom,align:D=t.Start,presentation:O,className:k,style:A,classNames:j,styles:M,...N}){let P=T!==void 0,[F,I]=m(!1),L=P?T:F,[R,z]=m(-1),B=p([]),V=p(null),H=p(null),{restoreFocusToTrigger:U,focusAfterTrigger:W}=r({triggerRef:V,contentRef:H}),G=f(),K=p(`first`),q=p({query:``,timer:void 0}),J=p(!1);function Y(e,t=!1){e&&(J.current=t),P||I(e),ee?.(e)}d(()=>{if(!L)return;if(!J.current){z(-1);return}let e=K.current===`last`?x(S):b(S);z(e);let t=requestAnimationFrame(()=>{B.current[e]?.focus()});return()=>{cancelAnimationFrame(t),K.current=`first`}},[L,S]),d(()=>()=>clearTimeout(q.current.timer),[]);function X(e){e<0||(z(e),B.current[e]?.focus())}function Z(e){Y(!1),e&&U()}function Q(e){if(e.length!==1||!e.trim())return!1;clearTimeout(q.current.timer),q.current.query+=e.toLowerCase(),q.current.timer=setTimeout(()=>{q.current.query=``},v);let t=q.current.query,n=t.length>1&&[...t].every(e=>e===t[0]),r=n?t[0]:t,i=n||t.length===1?R:R-1;for(let e=1;e<=S.length;e++){let t=(i+e+S.length)%S.length,n=S[t];if(o(n)&&!n.disabled&&(B.current[t]?.textContent?.trim().toLowerCase()??``).startsWith(r))return X(t),!0}return!1}function $(e){if(e.key===`ArrowDown`||e.key===`ArrowUp`){if(e.preventDefault(),e.stopPropagation(),L){X(e.key===`ArrowUp`?x(S):b(S));return}K.current=e.key===`ArrowUp`?`last`:`first`,Y(!0,!0)}}function te(e){switch(e.key){case`ArrowDown`:X(y(S,R,1));break;case`ArrowUp`:X(y(S,R,-1));break;case`Home`:X(b(S));break;case`End`:X(x(S));break;case`Escape`:Z(!0);break;case`Tab`:Z(!1),e.shiftKey?U():W();break;default:if(!Q(e.key))return}e.preventDefault(),e.stopPropagation()}function ne(e){let t=S[e];o(t)&&!t.disabled&&(t.onClick?.(),w?.(t.id),Z(!0))}let re=u(C)?l(C,{"aria-haspopup":C.props[`aria-haspopup`]??`menu`,"aria-expanded":C.props[`aria-expanded`]??L,"aria-controls":L?C.props[`aria-controls`]??G:C.props[`aria-controls`]}):C,ie=g(`div`,{ref:H,id:G,role:`menu`,className:h(a.menu,j?.menu),style:M?.menu,onKeyDown:te,children:S.map((t,n)=>c(t)?g(`div`,{role:`separator`,className:h(a.menuSeparator,j?.separator),style:M?.separator},`separator-${n}`):s(t)?g(`div`,{role:`presentation`,className:h(a.menuHeading,j?.heading),style:M?.heading,children:t.heading},`heading-${n}`):_(`button`,{ref:e=>{B.current[n]=e},type:`button`,role:`menuitem`,disabled:t.disabled,tabIndex:n===R?0:-1,className:h(a.menuItem,t.danger&&a.menuItemDanger,j?.item),style:M?.item,onClick:()=>ne(n),onMouseEnter:()=>z(n),children:[t.icon!=null&&e(t.icon,{className:h(a.menuItemIcon,j?.itemIcon),style:M?.itemIcon}),g(`span`,{className:h(a.menuItemLabel,j?.itemLabel),style:M?.itemLabel,children:t.label}),t.shortcut!=null&&g(`span`,{className:h(a.menuItemShortcut,j?.itemShortcut),style:M?.itemShortcut,children:t.shortcut})]},t.id))});return g(i,{...N,isOpen:L,onOpenChange:(e,{fromKeyboard:t})=>Y(e,t),placement:E,align:D,presentation:O,content:ie,focusOnOpen:!1,constrainWidth:!1,classNames:{panel:a.menuPanel},className:h(k,j?.root),style:{...A,...M?.root},children:g(`span`,{ref:V,className:h(a.menuTrigger,j?.trigger),style:M?.trigger,onKeyDown:$,children:re})})}export{S as default};
+"use client";import{renderIcon as e}from"../utils/renderIcon.mjs";import{PopoverAlign as t,PopoverPlacement as n}from"../popover/popover.types.mjs";import{useFocusBoundary as r}from"../hooks/useFocusBoundary.mjs";import i from"../popover/popover.mjs";import a from"./menu.module.mjs";import{isMenuAction as o,isMenuHeading as s,isMenuSeparator as c}from"./menu.types.mjs";import{cloneElement as l,isValidElement as u,useEffect as d,useId as f,useRef as p,useState as m}from"react";import h from"classnames";import{jsx as g,jsxs as _}from"react/jsx-runtime";var v=600;function y(e,t,n){for(let r=1;r<=e.length;r++){let i=(t+n*r+e.length*r)%e.length,a=e[i];if(o(a)&&!a.disabled)return i}return-1}function b(e){return e.findIndex(e=>o(e)&&!e.disabled)}function x(e){for(let t=e.length-1;t>=0;t--){let n=e[t];if(o(n)&&!n.disabled)return t}return-1}function S({items:S,children:C,onAction:w,isOpen:T,onOpenChange:ee,placement:E=n.Bottom,align:D=t.Start,presentation:O,className:k,style:A,classNames:j,styles:M,...N}){let P=T!==void 0,[F,I]=m(!1),L=P?T:F,[R,z]=m(-1),B=p([]),V=p(null),H=p(null),{restoreFocusToTrigger:U,focusAfterTrigger:W}=r({triggerRef:V,contentRef:H}),G=f(),K=p(`first`),q=p({query:``,timer:void 0}),J=p(!1);function Y(e,t=!1){e&&(J.current=t),P||I(e),ee?.(e)}d(()=>{if(!L)return;if(!J.current){z(-1);return}let e=K.current===`last`?x(S):b(S);z(e);let t=requestAnimationFrame(()=>{B.current[e]?.focus()});return()=>{cancelAnimationFrame(t),K.current=`first`}},[L,S]),d(()=>()=>clearTimeout(q.current.timer),[]);function X(e){e<0||(z(e),B.current[e]?.focus())}function Z(e){Y(!1),e&&U()}function Q(e){if(e.length!==1||!e.trim())return!1;clearTimeout(q.current.timer),q.current.query+=e.toLowerCase(),q.current.timer=setTimeout(()=>{q.current.query=``},v);let t=q.current.query,n=t.length>1&&[...t].every(e=>e===t[0]),r=n?t[0]:t,i=n||t.length===1?R:R-1;for(let e=1;e<=S.length;e++){let t=(i+e+S.length)%S.length,n=S[t];if(o(n)&&!n.disabled&&(B.current[t]?.textContent?.trim().toLowerCase()??``).startsWith(r))return X(t),!0}return!1}function $(e){if(e.key===`ArrowDown`||e.key===`ArrowUp`){if(e.preventDefault(),e.stopPropagation(),L){X(e.key===`ArrowUp`?x(S):b(S));return}K.current=e.key===`ArrowUp`?`last`:`first`,Y(!0,!0)}}function te(e){switch(e.key){case`ArrowDown`:X(y(S,R,1));break;case`ArrowUp`:X(y(S,R,-1));break;case`Home`:X(b(S));break;case`End`:X(x(S));break;case`Escape`:Z(!0);break;case`Tab`:Z(!1),e.shiftKey?U():W();break;default:if(!Q(e.key))return}e.preventDefault(),e.stopPropagation()}function ne(e){let t=S[e];o(t)&&!t.disabled&&(t.onClick?.(),w?.(t.id),Z(!0))}let re=u(C)?l(C,{"aria-haspopup":C.props[`aria-haspopup`]??`menu`,"aria-expanded":C.props[`aria-expanded`]??L,"aria-controls":L?C.props[`aria-controls`]??G:C.props[`aria-controls`]}):C,ie=g(`div`,{ref:H,id:G,role:`menu`,className:h(a.menu,j?.menu),style:M?.menu,onKeyDown:te,children:S.map((t,n)=>c(t)?g(`div`,{role:`separator`,className:h(a.menuSeparator,j?.separator),style:M?.separator},`separator-${n}`):s(t)?g(`div`,{role:`presentation`,className:h(a.menuHeading,j?.heading),style:M?.heading,children:t.heading},`heading-${n}`):_(`button`,{ref:e=>{B.current[n]=e},type:`button`,role:`menuitem`,disabled:t.disabled,tabIndex:n===R?0:-1,className:h(a.menuItem,t.danger&&a.menuItemDanger,j?.item),style:M?.item,onClick:()=>ne(n),onMouseEnter:()=>z(n),children:[t.icon!=null&&e(t.icon,{className:h(a.menuItemIcon,j?.itemIcon),style:M?.itemIcon}),g(`span`,{className:h(a.menuItemLabel,j?.itemLabel),style:M?.itemLabel,children:t.label}),t.shortcut!=null&&g(`span`,{className:h(a.menuItemShortcut,j?.itemShortcut),style:M?.itemShortcut,children:t.shortcut})]},t.id))});return g(i,{...N,isOpen:L,onOpenChange:(e,{fromKeyboard:t})=>Y(e,t),placement:E,align:D,presentation:O,content:ie,focusOnOpen:!1,constrainWidth:!1,classNames:{panel:a.menuPanel},className:h(k,j?.root),style:{...A,...M?.root},children:g(`span`,{ref:V,className:h(a.menuTrigger,j?.trigger),style:M?.trigger,onKeyDown:$,children:re})})}export{S as default};
 //# sourceMappingURL=menu.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"menu.mjs","names":[],"sources":["../../../../package/common/menu/menu.tsx"],"sourcesContent":["import { cloneElement, isValidElement, useEffect, useId, useRef, useState, type ReactElement } from 'react';\nimport cx from 'classnames';\n\nimport styles from './menu.module.pcss';\nimport Popover from '../popover';\nimport { PopoverAlign, PopoverPlacement } from '../popover/popover.types';\nimport { renderIcon } from '../utils/renderIcon';\nimport { useFocusBoundary } from '../hooks/useFocusBoundary';\nimport { isMenuAction, isMenuHeading, isMenuSeparator, type MenuEntry, type MenuProps } from './menu.types';\n\n/** How long a typed run stays one search before it starts over. */\nconst TYPEAHEAD_RESET_MS = 600;\n\n/** Index of the next action that can be focused, wrapping, or -1 if there is none. */\nfunction nextEnabled(items: MenuEntry[], from: number, step: 1 | -1): number {\n  for (let i = 1; i <= items.length; i++) {\n    // The `items.length * i` term only keeps the value positive for a backwards\n    // step; JavaScript's `%` would otherwise return a negative index.\n    const index = (from + step * i + items.length * i) % items.length;\n    const entry = items[index];\n    if (isMenuAction(entry) && !entry.disabled) return index;\n  }\n  return -1;\n}\n\nfunction firstEnabled(items: MenuEntry[]): number {\n  return items.findIndex((entry) => isMenuAction(entry) && !entry.disabled);\n}\n\nfunction lastEnabled(items: MenuEntry[]): number {\n  for (let i = items.length - 1; i >= 0; i--) {\n    const entry = items[i];\n    if (isMenuAction(entry) && !entry.disabled) return i;\n  }\n  return -1;\n}\n\n/**\n * A menu of actions on a trigger of your choosing.\n *\n * `Popover` does the anchoring, portalling and outside-click work but takes\n * arbitrary `content`, which leaves every consumer to write their own `ul`/`li`\n * and, in practice, to leave out the roles and the arrow keys. This is that list,\n * done once: `role=\"menu\"`, a roving focus that skips disabled entries, Escape\n * back to the trigger, and separators and headings that stay out of the keyboard\n * order.\n */\nfunction Menu({\n  items,\n  children,\n  onAction,\n  isOpen: controlledOpen,\n  onOpenChange,\n  placement = PopoverPlacement.Bottom,\n  align = PopoverAlign.Start,\n  presentation,\n  className,\n  style,\n  classNames,\n  styles: slotStyles,\n  ...rest\n}: MenuProps): ReactElement {\n  const isControlled = controlledOpen !== undefined;\n  const [internalOpen, setInternalOpen] = useState(false);\n  const isOpen = isControlled ? controlledOpen : internalOpen;\n\n  const [activeIndex, setActiveIndex] = useState(-1);\n  const itemRefs = useRef<(HTMLButtonElement | null)[]>([]);\n  const triggerRef = useRef<HTMLSpanElement>(null);\n  const menuRef = useRef<HTMLDivElement>(null);\n  // Tab leaves the panel in both directions, so the menu needs the same boundary\n  // Popover uses: back to the trigger, or on to whatever follows it.\n  const { restoreFocusToTrigger, focusAfterTrigger } = useFocusBoundary({ triggerRef, contentRef: menuRef });\n  const menuId = useId();\n  // Which end to land on when the menu opens: `ArrowUp` on the trigger opens at\n  // the bottom, everything else at the top.\n  const openAtRef = useRef<'first' | 'last'>('first');\n  const typeahead = useRef<{ query: string; timer: ReturnType<typeof setTimeout> | undefined }>({\n    query: '',\n    timer: undefined,\n  });\n\n  // Whether a key opened the menu, which decides between landing the focus on an\n  // entry and leaving it on the trigger. Set from Popover, which is what sees the\n  // trigger's events, or here when an arrow key did the opening.\n  const openedByKeyboardRef = useRef(false);\n\n  function setOpen(next: boolean, fromKeyboard = false) {\n    if (next) openedByKeyboardRef.current = fromKeyboard;\n    if (!isControlled) setInternalOpen(next);\n    onOpenChange?.(next);\n  }\n\n  // Focus follows the active entry rather than the menu keeping focus and\n  // pointing at it: the items are real buttons, so Enter and Space are theirs.\n  // Popover's own `focusOnOpen` would take the first focusable and stop there;\n  // the active index has to move with it, so the menu does it itself.\n  useEffect(() => {\n    if (!isOpen) return;\n    // A pointer open leaves the focus where the pointer put it. A highlight on an\n    // entry nobody pointed at reads as a selection, and the mouse is about to land\n    // somewhere else anyway; the first arrow key moves in, see the trigger's keys.\n    if (!openedByKeyboardRef.current) {\n      setActiveIndex(-1);\n      return;\n    }\n    const target = openAtRef.current === 'last' ? lastEnabled(items) : firstEnabled(items);\n    setActiveIndex(target);\n    // The panel is portalled and animated in, so its buttons exist a frame later.\n    const frame = requestAnimationFrame(() => {\n      itemRefs.current[target]?.focus();\n    });\n    return () => {\n      cancelAnimationFrame(frame);\n      openAtRef.current = 'first';\n    };\n  }, [isOpen, items]);\n\n  useEffect(() => () => clearTimeout(typeahead.current.timer), []);\n\n  function moveTo(index: number) {\n    if (index < 0) return;\n    setActiveIndex(index);\n    itemRefs.current[index]?.focus();\n  }\n\n  function close(returnFocus: boolean) {\n    setOpen(false);\n    if (returnFocus) restoreFocusToTrigger();\n  }\n\n  /**\n   * Jumps to the next entry whose label starts with what has been typed. The\n   * text comes off the rendered button rather than the `label` prop, which is a\n   * `ReactNode` and may be an icon, a badge or anything else.\n   */\n  function handleTypeahead(key: string): boolean {\n    if (key.length !== 1 || !key.trim()) return false;\n    clearTimeout(typeahead.current.timer);\n    typeahead.current.query += key.toLowerCase();\n    typeahead.current.timer = setTimeout(() => {\n      typeahead.current.query = '';\n    }, TYPEAHEAD_RESET_MS);\n\n    const query = typeahead.current.query;\n    // A repeated single character walks through the entries starting with it,\n    // rather than sticking to the first one.\n    const repeated = query.length > 1 && [...query].every((c) => c === query[0]);\n    const needle = repeated ? query[0] : query;\n    const from = repeated || query.length === 1 ? activeIndex : activeIndex - 1;\n\n    for (let i = 1; i <= items.length; i++) {\n      const index = (from + i + items.length) % items.length;\n      const entry = items[index];\n      if (!isMenuAction(entry) || entry.disabled) continue;\n      const text = itemRefs.current[index]?.textContent?.trim().toLowerCase() ?? '';\n      if (text.startsWith(needle)) {\n        moveTo(index);\n        return true;\n      }\n    }\n    return false;\n  }\n\n  /** The trigger's own keys, which decide where the menu opens. */\n  function handleTriggerKeyDown(event: React.KeyboardEvent) {\n    if (event.key !== 'ArrowDown' && event.key !== 'ArrowUp') return;\n    // Popover opens on these keys too; letting both act would be harmless but\n    // this keeps the decision about where to land in one place.\n    event.preventDefault();\n    event.stopPropagation();\n    // Already open means a pointer opened it and the focus never left the trigger,\n    // since an entry's own keys never reach here. This is the key that moves in.\n    if (isOpen) {\n      moveTo(event.key === 'ArrowUp' ? lastEnabled(items) : firstEnabled(items));\n      return;\n    }\n    openAtRef.current = event.key === 'ArrowUp' ? 'last' : 'first';\n    setOpen(true, true);\n  }\n\n  function handleKeyDown(event: React.KeyboardEvent) {\n    switch (event.key) {\n      case 'ArrowDown':\n        moveTo(nextEnabled(items, activeIndex, 1));\n        break;\n      case 'ArrowUp':\n        moveTo(nextEnabled(items, activeIndex, -1));\n        break;\n      case 'Home':\n        moveTo(firstEnabled(items));\n        break;\n      case 'End':\n        moveTo(lastEnabled(items));\n        break;\n      // Popover handles both of these too, but only once the focus has actually\n      // reached the panel: its Escape restores focus on that condition, and its\n      // Tab handling acts at the first and last focusable. A menu focuses its\n      // first entry a frame after opening, so a key pressed in between would\n      // fall through. Here they are unconditional, which is also what a menu\n      // wants from Tab: leave, whatever is focused.\n      case 'Escape':\n        close(true);\n        break;\n      case 'Tab':\n        // Carry on from the trigger, as if the panel had never been in the tab\n        // order. Closing and letting the browser take it from here would move on\n        // from an entry that is about to be removed, which lands at the top of\n        // the document.\n        close(false);\n        if (event.shiftKey) restoreFocusToTrigger();\n        else focusAfterTrigger();\n        break;\n      default:\n        if (!handleTypeahead(event.key)) return;\n    }\n    event.preventDefault();\n    event.stopPropagation();\n  }\n\n  function handleAction(index: number) {\n    const entry = items[index];\n    if (!isMenuAction(entry) || entry.disabled) return;\n    entry.onClick?.();\n    onAction?.(entry.id);\n    close(true);\n  }\n\n  // A screen reader has no way to tell that this button opens a menu unless the\n  // button itself says so. Only filled in where the consumer has not, so a\n  // trigger that describes itself keeps doing that.\n  const triggerWithMenuSemantics = isValidElement<Record<string, unknown>>(children)\n    ? cloneElement(children, {\n        'aria-haspopup': children.props['aria-haspopup'] ?? 'menu',\n        'aria-expanded': children.props['aria-expanded'] ?? isOpen,\n        'aria-controls': isOpen ? (children.props['aria-controls'] ?? menuId) : children.props['aria-controls'],\n      })\n    : children;\n\n  const content = (\n    <div\n      ref={menuRef}\n      id={menuId}\n      role='menu'\n      className={cx(styles.menu, classNames?.menu)}\n      style={slotStyles?.menu}\n      onKeyDown={handleKeyDown}\n    >\n      {items.map((entry, index) => {\n        if (isMenuSeparator(entry))\n          return (\n            <div\n              // Separators and headings carry no id of their own, and reordering\n              // the list re-renders it wholesale anyway.\n              key={`separator-${index}`}\n              role='separator'\n              className={cx(styles.menuSeparator, classNames?.separator)}\n              style={slotStyles?.separator}\n            />\n          );\n\n        if (isMenuHeading(entry))\n          return (\n            <div\n              key={`heading-${index}`}\n              role='presentation'\n              className={cx(styles.menuHeading, classNames?.heading)}\n              style={slotStyles?.heading}\n            >\n              {entry.heading}\n            </div>\n          );\n\n        return (\n          <button\n            key={entry.id}\n            ref={(el) => {\n              itemRefs.current[index] = el;\n            }}\n            type='button'\n            role='menuitem'\n            disabled={entry.disabled}\n            // One tab stop for the whole menu: the arrow keys move between items.\n            tabIndex={index === activeIndex ? 0 : -1}\n            className={cx(styles.menuItem, entry.danger && styles.menuItemDanger, classNames?.item)}\n            style={slotStyles?.item}\n            onClick={() => handleAction(index)}\n            onMouseEnter={() => setActiveIndex(index)}\n          >\n            {entry.icon != null &&\n              renderIcon(entry.icon, {\n                className: cx(styles.menuItemIcon, classNames?.itemIcon),\n                style: slotStyles?.itemIcon,\n              })}\n            <span className={cx(styles.menuItemLabel, classNames?.itemLabel)} style={slotStyles?.itemLabel}>\n              {entry.label}\n            </span>\n            {entry.shortcut != null && (\n              <span className={cx(styles.menuItemShortcut, classNames?.itemShortcut)} style={slotStyles?.itemShortcut}>\n                {entry.shortcut}\n              </span>\n            )}\n          </button>\n        );\n      })}\n    </div>\n  );\n\n  return (\n    <Popover\n      {...rest}\n      isOpen={isOpen}\n      onOpenChange={(next, { fromKeyboard }) => setOpen(next, fromKeyboard)}\n      placement={placement}\n      align={align}\n      presentation={presentation}\n      content={content}\n      // The list pads its own rows, so a hover highlight reaches the panel edge,\n      // and it sizes itself. Focus is the menu's own business, see above.\n      focusOnOpen={false}\n      constrainWidth={false}\n      classNames={{ panel: styles.menuPanel }}\n      className={cx(className, classNames?.root)}\n      style={{ ...style, ...slotStyles?.root }}\n    >\n      <span\n        ref={triggerRef}\n        className={cx(styles.menuTrigger, classNames?.trigger)}\n        style={slotStyles?.trigger}\n        onKeyDown={handleTriggerKeyDown}\n      >\n        {triggerWithMenuSemantics}\n      </span>\n    </Popover>\n  );\n}\n\nexport default Menu;\n"],"mappings":"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"}
+{"version":3,"file":"menu.mjs","names":[],"sources":["../../../../package/common/menu/menu.tsx"],"sourcesContent":["import { cloneElement, isValidElement, useEffect, useId, useRef, useState, type ReactElement } from 'react';\nimport cx from 'classnames';\n\nimport styles from './menu.module.pcss';\nimport Popover from '../popover';\nimport { PopoverAlign, PopoverPlacement } from '../popover/popover.types';\nimport { renderIcon } from '../utils/renderIcon';\nimport { useFocusBoundary } from '../hooks/useFocusBoundary';\nimport { isMenuAction, isMenuHeading, isMenuSeparator, type MenuEntry, type MenuProps } from './menu.types';\n\n/** How long a typed run stays one search before it starts over. */\nconst TYPEAHEAD_RESET_MS = 600;\n\n/** Index of the next action that can be focused, wrapping, or -1 if there is none. */\nfunction nextEnabled(items: MenuEntry[], from: number, step: 1 | -1): number {\n  for (let i = 1; i <= items.length; i++) {\n    // The `items.length * i` term only keeps the value positive for a backwards\n    // step; JavaScript's `%` would otherwise return a negative index.\n    const index = (from + step * i + items.length * i) % items.length;\n    const entry = items[index];\n    if (isMenuAction(entry) && !entry.disabled) return index;\n  }\n  return -1;\n}\n\nfunction firstEnabled(items: MenuEntry[]): number {\n  return items.findIndex((entry) => isMenuAction(entry) && !entry.disabled);\n}\n\nfunction lastEnabled(items: MenuEntry[]): number {\n  for (let i = items.length - 1; i >= 0; i--) {\n    const entry = items[i];\n    if (isMenuAction(entry) && !entry.disabled) return i;\n  }\n  return -1;\n}\n\n/**\n * A menu of actions on a trigger of your choosing.\n *\n * `Popover` does the anchoring, portalling and outside-click work but takes\n * arbitrary `content`, which leaves every consumer to write their own `ul`/`li`\n * and, in practice, to leave out the roles and the arrow keys. This is that list,\n * done once: `role=\"menu\"`, a roving focus that skips disabled entries, Escape\n * back to the trigger, and separators and headings that stay out of the keyboard\n * order.\n */\nfunction Menu({\n  items,\n  children,\n  onAction,\n  isOpen: controlledOpen,\n  onOpenChange,\n  placement = PopoverPlacement.Bottom,\n  align = PopoverAlign.Start,\n  presentation,\n  className,\n  style,\n  classNames,\n  styles: slotStyles,\n  ...rest\n}: MenuProps): ReactElement {\n  const isControlled = controlledOpen !== undefined;\n  const [internalOpen, setInternalOpen] = useState(false);\n  const isOpen = isControlled ? controlledOpen : internalOpen;\n\n  const [activeIndex, setActiveIndex] = useState(-1);\n  const itemRefs = useRef<(HTMLButtonElement | null)[]>([]);\n  const triggerRef = useRef<HTMLSpanElement>(null);\n  const menuRef = useRef<HTMLDivElement>(null);\n  // Tab leaves the panel in both directions, so the menu needs the same boundary\n  // Popover uses: back to the trigger, or on to whatever follows it.\n  const { restoreFocusToTrigger, focusAfterTrigger } = useFocusBoundary({ triggerRef, contentRef: menuRef });\n  const menuId = useId();\n  // Which end to land on when the menu opens: `ArrowUp` on the trigger opens at\n  // the bottom, everything else at the top.\n  const openAtRef = useRef<'first' | 'last'>('first');\n  const typeahead = useRef<{ query: string; timer: ReturnType<typeof setTimeout> | undefined }>({\n    query: '',\n    timer: undefined,\n  });\n\n  // Whether a key opened the menu, which decides between landing the focus on an\n  // entry and leaving it on the trigger. Set from Popover, which is what sees the\n  // trigger's events, or here when an arrow key did the opening.\n  const openedByKeyboardRef = useRef(false);\n\n  function setOpen(next: boolean, fromKeyboard = false) {\n    if (next) openedByKeyboardRef.current = fromKeyboard;\n    if (!isControlled) setInternalOpen(next);\n    onOpenChange?.(next);\n  }\n\n  // Focus follows the active entry rather than the menu keeping focus and\n  // pointing at it: the items are real buttons, so Enter and Space are theirs.\n  // Popover's own `focusOnOpen` would take the first focusable and stop there;\n  // the active index has to move with it, so the menu does it itself.\n  useEffect(() => {\n    if (!isOpen) return;\n    // A pointer open leaves the focus where the pointer put it. A highlight on an\n    // entry nobody pointed at reads as a selection, and the mouse is about to land\n    // somewhere else anyway; the first arrow key moves in, see the trigger's keys.\n    if (!openedByKeyboardRef.current) {\n      setActiveIndex(-1);\n      return;\n    }\n    const target = openAtRef.current === 'last' ? lastEnabled(items) : firstEnabled(items);\n    setActiveIndex(target);\n    // The panel is portalled and animated in, so its buttons exist a frame later.\n    const frame = requestAnimationFrame(() => {\n      itemRefs.current[target]?.focus();\n    });\n    return () => {\n      cancelAnimationFrame(frame);\n      openAtRef.current = 'first';\n    };\n  }, [isOpen, items]);\n\n  useEffect(() => () => clearTimeout(typeahead.current.timer), []);\n\n  function moveTo(index: number) {\n    if (index < 0) return;\n    setActiveIndex(index);\n    itemRefs.current[index]?.focus();\n  }\n\n  function close(returnFocus: boolean) {\n    setOpen(false);\n    if (returnFocus) restoreFocusToTrigger();\n  }\n\n  /**\n   * Jumps to the next entry whose label starts with what has been typed. The\n   * text comes off the rendered button rather than the `label` prop, which is a\n   * `ReactNode` and may be an icon, a badge or anything else.\n   */\n  function handleTypeahead(key: string): boolean {\n    if (key.length !== 1 || !key.trim()) return false;\n    clearTimeout(typeahead.current.timer);\n    typeahead.current.query += key.toLowerCase();\n    typeahead.current.timer = setTimeout(() => {\n      typeahead.current.query = '';\n    }, TYPEAHEAD_RESET_MS);\n\n    const query = typeahead.current.query;\n    // A repeated single character walks through the entries starting with it,\n    // rather than sticking to the first one.\n    const repeated = query.length > 1 && [...query].every((c) => c === query[0]);\n    const needle = repeated ? query[0] : query;\n    const from = repeated || query.length === 1 ? activeIndex : activeIndex - 1;\n\n    for (let i = 1; i <= items.length; i++) {\n      const index = (from + i + items.length) % items.length;\n      const entry = items[index];\n      if (!isMenuAction(entry) || entry.disabled) continue;\n      const text = itemRefs.current[index]?.textContent?.trim().toLowerCase() ?? '';\n      if (text.startsWith(needle)) {\n        moveTo(index);\n        return true;\n      }\n    }\n    return false;\n  }\n\n  /** The trigger's own keys, which decide where the menu opens. */\n  function handleTriggerKeyDown(event: React.KeyboardEvent) {\n    if (event.key !== 'ArrowDown' && event.key !== 'ArrowUp') return;\n    // Popover opens on these keys too; letting both act would be harmless but\n    // this keeps the decision about where to land in one place.\n    event.preventDefault();\n    event.stopPropagation();\n    // Already open means a pointer opened it and the focus never left the trigger,\n    // since an entry's own keys never reach here. This is the key that moves in.\n    if (isOpen) {\n      moveTo(event.key === 'ArrowUp' ? lastEnabled(items) : firstEnabled(items));\n      return;\n    }\n    openAtRef.current = event.key === 'ArrowUp' ? 'last' : 'first';\n    setOpen(true, true);\n  }\n\n  function handleKeyDown(event: React.KeyboardEvent) {\n    switch (event.key) {\n      case 'ArrowDown':\n        moveTo(nextEnabled(items, activeIndex, 1));\n        break;\n      case 'ArrowUp':\n        moveTo(nextEnabled(items, activeIndex, -1));\n        break;\n      case 'Home':\n        moveTo(firstEnabled(items));\n        break;\n      case 'End':\n        moveTo(lastEnabled(items));\n        break;\n      // Popover handles both of these too, but only once the focus has actually\n      // reached the panel: its Escape restores focus on that condition, and its\n      // Tab handling acts at the first and last focusable. A menu focuses its\n      // first entry a frame after opening, so a key pressed in between would\n      // fall through. Here they are unconditional, which is also what a menu\n      // wants from Tab: leave, whatever is focused.\n      case 'Escape':\n        close(true);\n        break;\n      case 'Tab':\n        // Carry on from the trigger, as if the panel had never been in the tab\n        // order. Closing and letting the browser take it from here would move on\n        // from an entry that is about to be removed, which lands at the top of\n        // the document.\n        close(false);\n        if (event.shiftKey) restoreFocusToTrigger();\n        else focusAfterTrigger();\n        break;\n      default:\n        if (!handleTypeahead(event.key)) return;\n    }\n    event.preventDefault();\n    event.stopPropagation();\n  }\n\n  function handleAction(index: number) {\n    const entry = items[index];\n    if (!isMenuAction(entry) || entry.disabled) return;\n    entry.onClick?.();\n    onAction?.(entry.id);\n    close(true);\n  }\n\n  // A screen reader has no way to tell that this button opens a menu unless the\n  // button itself says so. Only filled in where the consumer has not, so a\n  // trigger that describes itself keeps doing that.\n  const triggerWithMenuSemantics = isValidElement<Record<string, unknown>>(children)\n    ? cloneElement(children, {\n        'aria-haspopup': children.props['aria-haspopup'] ?? 'menu',\n        'aria-expanded': children.props['aria-expanded'] ?? isOpen,\n        'aria-controls': isOpen ? (children.props['aria-controls'] ?? menuId) : children.props['aria-controls'],\n      })\n    : children;\n\n  const content = (\n    <div\n      ref={menuRef}\n      id={menuId}\n      role='menu'\n      className={cx(styles.menu, classNames?.menu)}\n      style={slotStyles?.menu}\n      onKeyDown={handleKeyDown}\n    >\n      {items.map((entry, index) => {\n        if (isMenuSeparator(entry))\n          return (\n            <div\n              // Separators and headings carry no id of their own, and reordering\n              // the list re-renders it wholesale anyway.\n              key={`separator-${index}`}\n              role='separator'\n              className={cx(styles.menuSeparator, classNames?.separator)}\n              style={slotStyles?.separator}\n            />\n          );\n\n        if (isMenuHeading(entry))\n          return (\n            <div\n              key={`heading-${index}`}\n              role='presentation'\n              className={cx(styles.menuHeading, classNames?.heading)}\n              style={slotStyles?.heading}\n            >\n              {entry.heading}\n            </div>\n          );\n\n        return (\n          <button\n            key={entry.id}\n            ref={(el) => {\n              itemRefs.current[index] = el;\n            }}\n            type='button'\n            role='menuitem'\n            disabled={entry.disabled}\n            // One tab stop for the whole menu: the arrow keys move between items.\n            tabIndex={index === activeIndex ? 0 : -1}\n            className={cx(styles.menuItem, entry.danger && styles.menuItemDanger, classNames?.item)}\n            style={slotStyles?.item}\n            onClick={() => handleAction(index)}\n            onMouseEnter={() => setActiveIndex(index)}\n          >\n            {entry.icon != null &&\n              renderIcon(entry.icon, {\n                className: cx(styles.menuItemIcon, classNames?.itemIcon),\n                style: slotStyles?.itemIcon,\n              })}\n            <span className={cx(styles.menuItemLabel, classNames?.itemLabel)} style={slotStyles?.itemLabel}>\n              {entry.label}\n            </span>\n            {entry.shortcut != null && (\n              <span className={cx(styles.menuItemShortcut, classNames?.itemShortcut)} style={slotStyles?.itemShortcut}>\n                {entry.shortcut}\n              </span>\n            )}\n          </button>\n        );\n      })}\n    </div>\n  );\n\n  return (\n    <Popover\n      {...rest}\n      isOpen={isOpen}\n      onOpenChange={(next, { fromKeyboard }) => setOpen(next, fromKeyboard)}\n      placement={placement}\n      align={align}\n      presentation={presentation}\n      content={content}\n      // The list pads its own rows, so a hover highlight reaches the panel edge,\n      // and it sizes itself. Focus is the menu's own business, see above.\n      focusOnOpen={false}\n      constrainWidth={false}\n      classNames={{ panel: styles.menuPanel }}\n      className={cx(className, classNames?.root)}\n      style={{ ...style, ...slotStyles?.root }}\n    >\n      <span\n        ref={triggerRef}\n        className={cx(styles.menuTrigger, classNames?.trigger)}\n        style={slotStyles?.trigger}\n        onKeyDown={handleTriggerKeyDown}\n      >\n        {triggerWithMenuSemantics}\n      </span>\n    </Popover>\n  );\n}\n\nexport default Menu;\n"],"mappings":"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"}

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

@@ -1,2 +1,2 @@
-var e=`menuPanel_ldsja`,t=`menu_QNY8D`,n=`menu-trigger_YbVFX`,r=`menu-item_-dxHx`,i=`menu-item-danger_sztTU`,a=`menu-item-icon_BM1Ks`,o=`menu-item-label_sK5Z5`,s=`menu-item-shortcut_lRTZF`,c=`menu-separator_HfNOp`,l=`menu-heading_QSu4U`,u={menuPanel:e,menu:t,"menu-trigger":`menu-trigger_YbVFX`,menuTrigger:n,"menu-item":`menu-item_-dxHx`,menuItem:r,"menu-item-danger":`menu-item-danger_sztTU`,menuItemDanger:i,"menu-item-icon":`menu-item-icon_BM1Ks`,menuItemIcon:a,"menu-item-label":`menu-item-label_sK5Z5`,menuItemLabel:o,"menu-item-shortcut":`menu-item-shortcut_lRTZF`,menuItemShortcut:s,"menu-separator":`menu-separator_HfNOp`,menuSeparator:c,"menu-heading":`menu-heading_QSu4U`,menuHeading:l};export{u as default,t as menu,l as menuHeading,r as menuItem,i as menuItemDanger,a as menuItemIcon,o as menuItemLabel,s as menuItemShortcut,e as menuPanel,c as menuSeparator,n as menuTrigger};
+"use client";var e=`menuPanel_ldsja`,t=`menu_QNY8D`,n=`menu-trigger_YbVFX`,r=`menu-item_-dxHx`,i=`menu-item-danger_sztTU`,a=`menu-item-icon_BM1Ks`,o=`menu-item-label_sK5Z5`,s=`menu-item-shortcut_lRTZF`,c=`menu-separator_HfNOp`,l=`menu-heading_QSu4U`,u={menuPanel:e,menu:t,"menu-trigger":`menu-trigger_YbVFX`,menuTrigger:n,"menu-item":`menu-item_-dxHx`,menuItem:r,"menu-item-danger":`menu-item-danger_sztTU`,menuItemDanger:i,"menu-item-icon":`menu-item-icon_BM1Ks`,menuItemIcon:a,"menu-item-label":`menu-item-label_sK5Z5`,menuItemLabel:o,"menu-item-shortcut":`menu-item-shortcut_lRTZF`,menuItemShortcut:s,"menu-separator":`menu-separator_HfNOp`,menuSeparator:c,"menu-heading":`menu-heading_QSu4U`,menuHeading:l};export{u as default,t as menu,l as menuHeading,r as menuItem,i as menuItemDanger,a as menuItemIcon,o as menuItemLabel,s as menuItemShortcut,e as menuPanel,c as menuSeparator,n as menuTrigger};
 //# sourceMappingURL=menu.module.mjs.map

package/dist/esm/common/menu/menu.types.mjs

@@ -1,2 +1,2 @@
-function e(e){return`separator`in e}function t(e){return`heading`in e}function n(n){return!e(n)&&!t(n)}export{n as isMenuAction,t as isMenuHeading,e as isMenuSeparator};
+"use client";function e(e){return`separator`in e}function t(e){return`heading`in e}function n(n){return!e(n)&&!t(n)}export{n as isMenuAction,t as isMenuHeading,e as isMenuSeparator};
 //# sourceMappingURL=menu.types.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"menu.types.mjs","names":[],"sources":["../../../../package/common/menu/menu.types.ts"],"sourcesContent":["import type { CSSProperties, ReactNode } from 'react';\nimport type { SlotClassNames, SlotStyles, HtmlProps } from '../types/slots.types';\nimport type { IconContent } from '../types/icon.types';\nimport type { PopoverAlign, PopoverPlacement } from '../popover/popover.types';\nimport type { Presentation } from '../configProvider/presentation.types';\n\n/** One thing the menu can do. */\nexport interface MenuAction {\n  /** Stable id, also what `onAction` reports. */\n  id: string;\n  label: ReactNode;\n  icon?: IconContent;\n  /**\n   * Keyboard hint on the trailing edge, e.g. `⌘K`. Display only: binding the\n   * shortcut is yours, since only you know what else is listening.\n   */\n  shortcut?: ReactNode;\n  disabled?: boolean;\n  /** Renders in the destructive colour. For deleting, discarding, revoking. */\n  danger?: boolean;\n  onClick?: () => void;\n}\n\n/** A line between groups of actions. */\nexport interface MenuSeparator {\n  separator: true;\n}\n\n/** A label over the actions that follow it. */\nexport interface MenuHeading {\n  heading: ReactNode;\n}\n\nexport type MenuEntry = MenuAction | MenuSeparator | MenuHeading;\n\nexport function isMenuSeparator(entry: MenuEntry): entry is MenuSeparator {\n  return 'separator' in entry;\n}\n\nexport function isMenuHeading(entry: MenuEntry): entry is MenuHeading {\n  return 'heading' in entry;\n}\n\nexport function isMenuAction(entry: MenuEntry): entry is MenuAction {\n  return !isMenuSeparator(entry) && !isMenuHeading(entry);\n}\n\nexport type MenuSlots =\n  | 'root'\n  | 'trigger'\n  | 'menu'\n  | 'item'\n  | 'itemIcon'\n  | 'itemLabel'\n  | 'itemShortcut'\n  | 'separator'\n  | 'heading';\n\nexport interface MenuProps extends Omit<HtmlProps, 'onSelect'> {\n  /** What the menu offers, in the order it is read. */\n  items: MenuEntry[];\n  /** The element that opens the menu. */\n  children?: ReactNode;\n  /** Called with the id of the action that was picked, after its own `onClick`. */\n  onAction?: (id: string) => void;\n  /** Controlled open state. Leave it out to let the menu manage its own. */\n  isOpen?: boolean;\n  onOpenChange?: (isOpen: boolean) => void;\n  /** Which side of the trigger the menu opens on (default `Bottom`). */\n  placement?: PopoverPlacement;\n  /** Which edge it lines up with on the cross axis (default `Start`). */\n  align?: PopoverAlign;\n  /** Anchored to the trigger, pinned to the bottom of the screen, or the latter only on touch. */\n  presentation?: Presentation;\n  className?: string;\n  style?: CSSProperties;\n  classNames?: SlotClassNames<MenuSlots>;\n  styles?: SlotStyles<MenuSlots>;\n}\n"],"mappings":"AAmCA,SAAgB,EAAgB,EAA0C,CACxE,MAAO,cAAe,CACxB,CAEA,SAAgB,EAAc,EAAwC,CACpE,MAAO,YAAa,CACtB,CAEA,SAAgB,EAAa,EAAuC,CAClE,MAAO,CAAC,EAAgB,CAAK,GAAK,CAAC,EAAc,CAAK,CACxD"}
+{"version":3,"file":"menu.types.mjs","names":[],"sources":["../../../../package/common/menu/menu.types.ts"],"sourcesContent":["import type { CSSProperties, ReactNode } from 'react';\nimport type { SlotClassNames, SlotStyles, HtmlProps } from '../types/slots.types';\nimport type { IconContent } from '../types/icon.types';\nimport type { PopoverAlign, PopoverPlacement } from '../popover/popover.types';\nimport type { Presentation } from '../configProvider/presentation.types';\n\n/** One thing the menu can do. */\nexport interface MenuAction {\n  /** Stable id, also what `onAction` reports. */\n  id: string;\n  label: ReactNode;\n  icon?: IconContent;\n  /**\n   * Keyboard hint on the trailing edge, e.g. `⌘K`. Display only: binding the\n   * shortcut is yours, since only you know what else is listening.\n   */\n  shortcut?: ReactNode;\n  disabled?: boolean;\n  /** Renders in the destructive colour. For deleting, discarding, revoking. */\n  danger?: boolean;\n  onClick?: () => void;\n}\n\n/** A line between groups of actions. */\nexport interface MenuSeparator {\n  separator: true;\n}\n\n/** A label over the actions that follow it. */\nexport interface MenuHeading {\n  heading: ReactNode;\n}\n\nexport type MenuEntry = MenuAction | MenuSeparator | MenuHeading;\n\nexport function isMenuSeparator(entry: MenuEntry): entry is MenuSeparator {\n  return 'separator' in entry;\n}\n\nexport function isMenuHeading(entry: MenuEntry): entry is MenuHeading {\n  return 'heading' in entry;\n}\n\nexport function isMenuAction(entry: MenuEntry): entry is MenuAction {\n  return !isMenuSeparator(entry) && !isMenuHeading(entry);\n}\n\nexport type MenuSlots =\n  | 'root'\n  | 'trigger'\n  | 'menu'\n  | 'item'\n  | 'itemIcon'\n  | 'itemLabel'\n  | 'itemShortcut'\n  | 'separator'\n  | 'heading';\n\nexport interface MenuProps extends Omit<HtmlProps, 'onSelect'> {\n  /** What the menu offers, in the order it is read. */\n  items: MenuEntry[];\n  /** The element that opens the menu. */\n  children?: ReactNode;\n  /** Called with the id of the action that was picked, after its own `onClick`. */\n  onAction?: (id: string) => void;\n  /** Controlled open state. Leave it out to let the menu manage its own. */\n  isOpen?: boolean;\n  onOpenChange?: (isOpen: boolean) => void;\n  /** Which side of the trigger the menu opens on (default `Bottom`). */\n  placement?: PopoverPlacement;\n  /** Which edge it lines up with on the cross axis (default `Start`). */\n  align?: PopoverAlign;\n  /** Anchored to the trigger, pinned to the bottom of the screen, or the latter only on touch. */\n  presentation?: Presentation;\n  className?: string;\n  style?: CSSProperties;\n  classNames?: SlotClassNames<MenuSlots>;\n  styles?: SlotStyles<MenuSlots>;\n}\n"],"mappings":"aAmCA,SAAgB,EAAgB,EAA0C,CACxE,MAAO,cAAe,CACxB,CAEA,SAAgB,EAAc,EAAwC,CACpE,MAAO,YAAa,CACtB,CAEA,SAAgB,EAAa,EAAuC,CAClE,MAAO,CAAC,EAAgB,CAAK,GAAK,CAAC,EAAc,CAAK,CACxD"}

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

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

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

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

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

@@ -1,2 +1,2 @@
-var e=`modal_L-Fkd`,t=`slideIn_RVIHR`,n=`fadeIn_XSuIE`,r=`modal-sheet_WkXR4`,i=`modal-container_qwKIm`,a=`modal-header_DhsRr`,o=`modal-body_Mmn0-`,s=`modal-close-button_UMZjq`,c=`modal-wrapper_r5wzq`,l=`modal-wrapper-shown_F0BgK`,u={modal:e,slideIn:t,fadeIn:n,"modal-sheet":`modal-sheet_WkXR4`,modalSheet:r,"modal-container":`modal-container_qwKIm`,modalContainer:i,"modal-header":`modal-header_DhsRr`,modalHeader:a,"modal-body":`modal-body_Mmn0-`,modalBody:o,"modal-close-button":`modal-close-button_UMZjq`,modalCloseButton:s,"modal-wrapper":`modal-wrapper_r5wzq`,modalWrapper:c,"modal-wrapper-shown":`modal-wrapper-shown_F0BgK`,modalWrapperShown:l};export{u as default,n as fadeIn,e as modal,o as modalBody,s as modalCloseButton,i as modalContainer,a as modalHeader,r as modalSheet,c as modalWrapper,l as modalWrapperShown,t as slideIn};
+"use client";var e=`modal_L-Fkd`,t=`slideIn_RVIHR`,n=`fadeIn_XSuIE`,r=`modal-sheet_WkXR4`,i=`modal-container_qwKIm`,a=`modal-header_DhsRr`,o=`modal-body_Mmn0-`,s=`modal-footer_idArP`,c=`modal-close-button_UMZjq`,l=`modal-wrapper_r5wzq`,u=`modal-wrapper-shown_F0BgK`,d={modal:e,slideIn:t,fadeIn:n,"modal-sheet":`modal-sheet_WkXR4`,modalSheet:r,"modal-container":`modal-container_qwKIm`,modalContainer:i,"modal-header":`modal-header_DhsRr`,modalHeader:a,"modal-body":`modal-body_Mmn0-`,modalBody:o,"modal-footer":`modal-footer_idArP`,modalFooter:s,"modal-close-button":`modal-close-button_UMZjq`,modalCloseButton:c,"modal-wrapper":`modal-wrapper_r5wzq`,modalWrapper:l,"modal-wrapper-shown":`modal-wrapper-shown_F0BgK`,modalWrapperShown:u};export{d as default,n as fadeIn,e as modal,o as modalBody,c as modalCloseButton,i as modalContainer,s as modalFooter,a as modalHeader,r as modalSheet,l as modalWrapper,u as modalWrapperShown,t as slideIn};
 //# sourceMappingURL=modal.module.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"modal.module.mjs","names":[],"sources":["../../../../package/common/modal/modal.module.pcss"],"sourcesContent":[".modal {\n  padding: 16px;\n  border-radius: var(--default-border-radius);\n  background: var(--background-modal);\n  color: var(--text-color);\n  font-family: var(--default-font);\n  box-sizing: border-box;\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  transform-origin: bottom center;\n  animation:\n    slideIn 0.2s,\n    fadeIn 0.3s forwards;\n  max-width: 95%;\n  max-height: 95%;\n\n  /* The panel itself never scrolls, so the header stays put; `&-body` is what scrolls. */\n  overflow: hidden;\n\n  @media (width <= 767px) {\n    max-width: 100%;\n    max-height: 100%;\n  }\n\n  /* A sheet-presented modal carries forms and detail views, not a short menu, so it takes more\n     of the screen than the shared default — and keeps the panel's own 16px at the bottom edge. */\n  &-sheet {\n    --sheet-max-height: 90dvh;\n    --sheet-safe-padding: 16px;\n  }\n\n  &-container {\n    position: fixed;\n    width: 100%;\n    height: 100%;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    top: 0;\n    left: 0;\n  }\n\n  &-header {\n    display: flex;\n    gap: 8px;\n    justify-content: space-between;\n    align-items: center;\n    margin-bottom: 16px;\n    flex: 0 0 auto;\n\n    div {\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n  }\n\n  &-body {\n    /* `min-height: 0` lets this shrink below its content's height so it, not the panel, scrolls. */\n    flex: 1 1 auto;\n    min-height: 0;\n    overflow: auto;\n    margin: -0.6em;\n    padding: 0.6em;\n  }\n\n  &-close-button {\n    flex-shrink: 0;\n    background: none;\n    border: none;\n    padding: 0;\n    color: inherit;\n    font-size: inherit;\n    line-height: 1;\n    cursor: pointer;\n    -webkit-tap-highlight-color: transparent;\n  }\n\n  &-wrapper {\n    position: fixed;\n    width: 100%;\n    height: 100%;\n    background: #00000052;\n    top: 0;\n    left: 0;\n    transition: all 0.3s ease-in-out;\n    opacity: 0;\n\n    &-shown {\n      opacity: 1;\n    }\n  }\n}\n\n@keyframes slideIn {\n  from {\n    transform: scale(0);\n  }\n\n  to {\n    transform: scale(0.99);\n  }\n}\n\n@keyframes fadeIn {\n  from {\n    opacity: 0;\n  }\n\n  to {\n    opacity: 1;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"modal.module.mjs","names":[],"sources":["../../../../package/common/modal/modal.module.pcss"],"sourcesContent":[".modal {\n  /* Theme tokens resolved once, each with a built-in fallback. Set any of the public\n     `--modal-*` variables via ThemeProvider (theme-wide) or `style` (per instance) to\n     override; unset ones fall back to the values below. */\n  --custom-modal-padding: var(--modal-padding, var(--spacing-l));\n  --custom-modal-gap: var(--modal-gap, var(--spacing-l));\n\n  /* Half the gap, so the scroll port's clipping edge — where the divider sits — lands midway\n     between the chrome and where the content rests, with the same room either side. Flush\n     against the chrome (bleed = gap) reads as a sliced line of text colliding with the title;\n     an unrelated value (this was `0.6em`) puts it at a distance that drifts with the font size. */\n  --custom-modal-body-bleed: var(--modal-body-bleed, calc(var(--custom-modal-gap) / 2));\n\n  /* The panel never comes closer to the screen edge than its own padding, at every size. A\n     percentage instead reads as a different inset on every screen, and pairing one with a\n     breakpoint made the two axes disagree: 5% of a 390px width is 19.5px but 5% of a 780px\n     height is 39px, so the same rule came out narrower and taller than the default on one phone. */\n  --custom-modal-max-width: var(--modal-max-width, calc(100% - 2 * var(--custom-modal-padding)));\n  --custom-modal-max-height: var(--modal-max-height, calc(100% - 2 * var(--custom-modal-padding)));\n\n  padding: var(--custom-modal-padding);\n  border-radius: var(--default-border-radius);\n  background: var(--background-modal);\n  color: var(--text-color);\n  font-family: var(--default-font);\n  box-sizing: border-box;\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  transform-origin: bottom center;\n  animation:\n    slideIn 0.2s,\n    fadeIn 0.3s forwards;\n  max-width: var(--custom-modal-max-width);\n  max-height: var(--custom-modal-max-height);\n\n  /* The panel itself never scrolls, so the header stays put; `&-body` is what scrolls. */\n  overflow: hidden;\n\n  /* A sheet-presented modal carries forms and detail views, not a short menu, so it takes more\n     of the screen than the shared default — and keeps the panel's own padding at the bottom edge. */\n  &-sheet {\n    --sheet-max-height: 90dvh;\n    --sheet-safe-padding: var(--custom-modal-padding);\n  }\n\n  &-container {\n    position: fixed;\n    width: 100%;\n    height: 100%;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    top: 0;\n    left: 0;\n  }\n\n  &-header {\n    display: flex;\n    gap: var(--spacing-m);\n    justify-content: space-between;\n    align-items: center;\n    margin-bottom: var(--custom-modal-gap);\n    flex: 0 0 auto;\n\n    div {\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n  }\n\n  &-body {\n    /* `min-height: 0` lets this shrink below its content's height so it, not the panel, scrolls. */\n    flex: 1 1 auto;\n    min-height: 0;\n    overflow: auto;\n\n    /* A negative margin cancelled by an equal padding, so a focus ring or a floating label at\n       the body's edge isn't clipped by the scroll container. Override the pair with\n       `--modal-body-bleed`, never with a plain `padding`, which drops the negative half and\n       brings the clipping back. See `docs/Modal.md` for what the two do together. */\n    margin: calc(-1 * var(--custom-modal-body-bleed));\n    padding: var(--custom-modal-body-bleed);\n\n    /* The mask lives in `styles/scrollFade.module.pcss`; the component applies it along with the\n       modifiers saying which end genuinely hides content. The run has to clear the port's own\n       padding before any content fades at all, hence gap + bleed. Set here as the shared sheet's\n       private length rather than as `--scroll-fade-length`, which would inherit down into a\n       `ScrollFade` nested in the body. */\n    --custom-scroll-fade-length: var(\n      --modal-scroll-fade,\n      calc(var(--custom-modal-gap) + var(--custom-modal-body-bleed))\n    );\n  }\n\n  &-footer {\n    margin-top: var(--custom-modal-gap);\n    flex: 0 0 auto;\n  }\n\n  &-close-button {\n    flex-shrink: 0;\n    background: none;\n    border: none;\n    padding: 0;\n    color: inherit;\n    font-size: inherit;\n    line-height: 1;\n    cursor: pointer;\n    -webkit-tap-highlight-color: transparent;\n  }\n\n  &-wrapper {\n    position: fixed;\n    width: 100%;\n    height: 100%;\n    background: #00000052;\n    top: 0;\n    left: 0;\n    transition: all 0.3s ease-in-out;\n    opacity: 0;\n\n    &-shown {\n      opacity: 1;\n    }\n  }\n}\n\n@keyframes slideIn {\n  from {\n    transform: scale(0);\n  }\n\n  to {\n    transform: scale(0.99);\n  }\n}\n\n@keyframes fadeIn {\n  from {\n    opacity: 0;\n  }\n\n  to {\n    opacity: 1;\n  }\n}\n\n/* Only the scale-in goes; the backdrop and the panel still fade, which is not motion.\n   `slideIn` ends at scale(0.99) and the panel has no transform of its own, so dropping the\n   animation lands it at scale(1) rather than leaving it collapsed. */\n@media (prefers-reduced-motion: reduce) {\n  .modal {\n    animation: fadeIn 0.3s forwards;\n  }\n}\n"],"mappings":""}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"multiSelect.mjs","names":[],"sources":["../../../../package/common/multiSelect/multiSelect.tsx"],"sourcesContent":["import { useEffect, useId, useRef, useState } from 'react';\nimport type { ReactElement } from 'react';\nimport cx from 'classnames';\nimport { faChevronDown, faCheck, faXmark } from '@fortawesome/free-solid-svg-icons';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\n\nimport Chip from 'components/common/chip';\nimport SearchInput from 'components/common/searchInput';\nimport Tooltip from 'components/common/tooltip';\nimport Popover from 'components/common/popover';\nimport { PopoverAlign, PopoverPlacement, PopoverTrigger } from '../popover/popover.types';\nimport { useComponentDefaults, useLabels } from '../configProvider';\nimport type { MultiSelectItem, MultiSelectLabels, MultiSelectProps, MultiSelectValue } from './multiSelect.types';\n\nimport styles from './multiSelect.module.pcss';\n\nconst EMPTY: MultiSelectValue[] = [];\n\nconst DEFAULT_LABELS: Required<MultiSelectLabels> = {\n  clearSelection: 'Clear selection',\n  create: (value) => `Add \"${value}\"`,\n  searchPlaceholder: 'Search…',\n  empty: 'No matches',\n};\n\nfunction MultiSelect(props: MultiSelectProps): ReactElement {\n  const {\n    items,\n    value,\n    defaultValue = [],\n    onChange = () => {},\n    label = '',\n    alwaysFloatLabel = false,\n    placeholder = '',\n    searchable = false,\n    allowCustomValues = false,\n    maxSelected,\n    clearable = true,\n    disabled = false,\n    readOnly = false,\n    presentation,\n    formValidator = null,\n    errorMessage = '',\n    isValid = true,\n    className,\n    style,\n    classNames,\n    styles: slotStyles,\n    onMouseEnter,\n    onMouseLeave,\n    onFocus,\n    onBlur,\n    labels,\n    ...rest\n  } = useComponentDefaults('MultiSelect', props);\n  const text = useLabels('MultiSelect', labels, DEFAULT_LABELS);\n\n  const rootRef = useRef<HTMLDivElement>(null);\n  const controlRef = useRef<HTMLDivElement>(null);\n  const searchRef = useRef<HTMLDivElement>(null);\n  const listboxId = useId();\n\n  const [internalValue, setInternalValue] = useState<MultiSelectValue[]>(defaultValue);\n  const [isOpen, setIsOpen] = useState(false);\n  const [search, setSearch] = useState('');\n  const [activeIndex, setActiveIndex] = useState(0);\n  const [isFocused, setIsFocused] = useState(false);\n  const [isHovered, setIsHovered] = useState(false);\n  const [panelWidth, setPanelWidth] = useState<number>();\n\n  // A ref as well as the prop: react-hooks/immutability refuses a mutation of the prop itself in\n  // an event handler, and marking the validator touched happens in one.\n  const fvRef = useRef(formValidator);\n  const [, forceUpdate] = useState(0);\n  useEffect(() => {\n    fvRef.current = formValidator;\n    const fv = fvRef.current;\n    if (!fv) return;\n    fv.label = label;\n    fv.validate();\n    const listener = () => forceUpdate((n) => n + 1);\n    fv.registerOnUpdateListener(listener);\n    return () => {\n      fv.removeOnUpdateListener(listener);\n    };\n  }, [formValidator, label]);\n\n  const isControlled = value !== undefined && !formValidator;\n  const rawValue = formValidator ? formValidator.value : isControlled ? value : internalValue;\n  const selected = Array.isArray(rawValue) ? (rawValue as MultiSelectValue[]) : EMPTY;\n\n  const hasError = formValidator ? formValidator.touched && formValidator.hasError() : !isValid || !!errorMessage;\n  const errorText = formValidator ? formValidator.getCurrentErrorMessage() : errorMessage || '';\n\n  const isInteractive = !disabled && !readOnly;\n  const atMax = maxSelected !== undefined && selected.length >= maxSelected;\n\n  const shouldFloatLabel = alwaysFloatLabel || isOpen || isFocused || selected.length > 0;\n\n  const isSearchable = searchable || allowCustomValues;\n  const typed = search.trim();\n  const needle = isSearchable ? typed.toLowerCase() : '';\n  const matches = needle ? items.filter((item) => item.label.toLowerCase().includes(needle)) : items;\n\n  const canCreate =\n    allowCustomValues &&\n    typed.length > 0 &&\n    !atMax &&\n    !items.some((item) => item.label.toLowerCase() === needle || String(item.key).toLowerCase() === needle) &&\n    !selected.some((key) => String(key).toLowerCase() === needle);\n\n  const visibleItems: MultiSelectItem[] = canCreate ? [...matches, { key: typed, label: text.create(typed) }] : matches;\n\n  // Mapped from `selected`, not filtered from `items`, to keep the chips in pick order. A custom\n  // value has no entry in `items`, so it stands in for itself.\n  const selectedItems = selected\n    .map<MultiSelectItem | undefined>(\n      (key) => items.find((item) => item.key === key) ?? (allowCustomValues ? { key, label: String(key) } : undefined),\n    )\n    .filter((item): item is MultiSelectItem => item !== undefined);\n\n  function commit(next: MultiSelectValue[]) {\n    if (formValidator) formValidator.set(next);\n    else if (!isControlled) setInternalValue(next);\n    onChange(next);\n  }\n\n  function toggle(item: MultiSelectItem) {\n    if (!isInteractive || item.disabled) return;\n    if (selected.includes(item.key)) commit(selected.filter((key) => key !== item.key));\n    else if (!atMax) commit([...selected, item.key]);\n    // The typed text has become a chip, so leaving it in the box would offer to add it again.\n    if (canCreate && item.key === typed) setSearch('');\n  }\n\n  /**\n   * A focused element that unmounts fires no blur, so removing the chip or clear button that was\n   * just clicked would leave `isFocused` stuck true. Hand focus back so there is still something\n   * left to blur.\n   */\n  function keepFocusInControl() {\n    if (rootRef.current?.contains(document.activeElement)) controlRef.current?.focus();\n  }\n\n  function handleOpenChange(next: boolean) {\n    if (next && !isInteractive) return;\n    setIsOpen(next);\n    if (next) {\n      setPanelWidth(controlRef.current?.offsetWidth);\n      setActiveIndex(0);\n    } else {\n      setSearch('');\n      if (fvRef.current) fvRef.current.touched = true;\n    }\n  }\n\n  useEffect(() => {\n    if (!isOpen || !isSearchable) return;\n    searchRef.current?.querySelector('input')?.focus();\n  }, [isOpen, isSearchable]);\n\n  function handleKeyDown(event: React.KeyboardEvent) {\n    if (!isInteractive) return;\n\n    if (!isOpen) {\n      if (event.key === 'ArrowDown' || event.key === 'Enter' || event.key === ' ') {\n        event.preventDefault();\n        handleOpenChange(true);\n      } else if (event.key === 'Backspace' && selected.length > 0) {\n        commit(selected.slice(0, -1));\n      }\n      return;\n    }\n\n    if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {\n      event.preventDefault();\n      if (visibleItems.length === 0) return;\n      const step = event.key === 'ArrowDown' ? 1 : -1;\n      setActiveIndex((current) => (current + step + visibleItems.length) % visibleItems.length);\n    } else if (event.key === 'Home' || event.key === 'End') {\n      event.preventDefault();\n      setActiveIndex(event.key === 'Home' ? 0 : visibleItems.length - 1);\n    } else if (event.key === 'Enter') {\n      event.preventDefault();\n      const item = visibleItems[activeIndex];\n      if (item) toggle(item);\n    } else if (event.key === 'Backspace' && !search && selected.length > 0) {\n      commit(selected.slice(0, -1));\n    }\n  }\n\n  const panel = (\n    <div className={cx(styles.multiSelectPanel, classNames?.panel)} style={slotStyles?.panel}>\n      {isSearchable && (\n        <div ref={searchRef} className={cx(styles.multiSelectSearch, classNames?.search)} style={slotStyles?.search}>\n          <SearchInput\n            value={search}\n            onChange={(value) => {\n              setSearch(value);\n              setActiveIndex(0);\n            }}\n            placeholder={text.searchPlaceholder}\n            onKeyDown={handleKeyDown}\n          />\n        </div>\n      )}\n      <div\n        id={listboxId}\n        role='listbox'\n        aria-multiselectable='true'\n        aria-label={label || undefined}\n        className={cx(styles.multiSelectOptions, classNames?.options)}\n        style={slotStyles?.options}\n      >\n        {visibleItems.length === 0 ? (\n          <div className={cx(styles.multiSelectEmpty, classNames?.empty)} style={slotStyles?.empty}>\n            {text.empty}\n          </div>\n        ) : (\n          visibleItems.map((item, index) => {\n            const isSelected = selected.includes(item.key);\n            const isDisabled = item.disabled || (atMax && !isSelected);\n\n            return (\n              <div\n                key={item.key}\n                id={`${listboxId}-${index}`}\n                role='option'\n                aria-selected={isSelected}\n                aria-disabled={isDisabled || undefined}\n                className={cx(\n                  styles.multiSelectOption,\n                  index === activeIndex && styles.multiSelectOptionActive,\n                  isSelected && styles.multiSelectOptionSelected,\n                  isDisabled && styles.multiSelectOptionDisabled,\n                  classNames?.option,\n                )}\n                style={slotStyles?.option}\n                onMouseDown={(event) => event.preventDefault()}\n                onMouseEnter={() => setActiveIndex(index)}\n                onClick={() => toggle(item)}\n              >\n                <span\n                  className={cx(styles.multiSelectOptionCheck, classNames?.optionCheck)}\n                  style={slotStyles?.optionCheck}\n                >\n                  {isSelected && <FontAwesomeIcon icon={faCheck} />}\n                </span>\n                <span\n                  className={cx(styles.multiSelectOptionLabel, classNames?.optionLabel)}\n                  style={slotStyles?.optionLabel}\n                >\n                  {item.label}\n                </span>\n              </div>\n            );\n          })\n        )}\n      </div>\n    </div>\n  );\n\n  return (\n    <div\n      {...rest}\n      ref={rootRef}\n      className={cx(styles.multiSelect, disabled && styles.multiSelectDisabled, classNames?.root, className)}\n      style={{ ...style, ...slotStyles?.root }}\n      onMouseEnter={(event) => {\n        setIsHovered(true);\n        onMouseEnter?.(event);\n      }}\n      onMouseLeave={(event) => {\n        setIsHovered(false);\n        onMouseLeave?.(event);\n      }}\n      onFocus={(event) => {\n        setIsFocused(true);\n        onFocus?.(event);\n      }}\n      onBlur={(event) => {\n        if (event.currentTarget.contains(event.relatedTarget as Node | null)) return;\n        setIsFocused(false);\n        onBlur?.(event);\n      }}\n    >\n      <Popover\n        isOpen={isOpen}\n        onOpenChange={handleOpenChange}\n        trigger={PopoverTrigger.Click}\n        placement={PopoverPlacement.Bottom}\n        align={PopoverAlign.Start}\n        offset={4}\n        withArrow={false}\n        // Neither half of this is the keyboard-only default. A search field takes\n        // the caret however the panel was opened, and without one the control\n        // keeps the focus and points at the active option with\n        // `aria-activedescendant`, so nothing may take it away.\n        focusOnOpen={isSearchable}\n        constrainWidth={false}\n        width='trigger'\n        disabled={!isInteractive}\n        presentation={presentation}\n        content={panel}\n        styles={{ panel: panelWidth ? { minWidth: panelWidth } : undefined }}\n      >\n        <div\n          ref={controlRef}\n          role='combobox'\n          tabIndex={disabled ? -1 : 0}\n          aria-expanded={isOpen}\n          aria-haspopup='listbox'\n          aria-controls={listboxId}\n          aria-activedescendant={isOpen && visibleItems.length > 0 ? `${listboxId}-${activeIndex}` : undefined}\n          aria-disabled={disabled || undefined}\n          aria-readonly={readOnly || undefined}\n          className={cx(styles.multiSelectControl, classNames?.control)}\n          style={slotStyles?.control}\n          onKeyDown={handleKeyDown}\n        >\n          {placeholder && selectedItems.length === 0 && (\n            <span\n              className={cx(\n                styles.multiSelectPlaceholder,\n                (!label || shouldFloatLabel) && styles.multiSelectPlaceholderShown,\n                !label && styles.multiSelectPlaceholderInstant,\n                classNames?.placeholder,\n              )}\n              style={slotStyles?.placeholder}\n            >\n              {placeholder}\n            </span>\n          )}\n\n          <div className={cx(styles.multiSelectValues, classNames?.values)} style={slotStyles?.values}>\n            {selectedItems.map((item) => (\n              <Chip\n                key={item.key}\n                text={item.label}\n                showRemoveIcon={isInteractive}\n                labels={{ remove: `Remove ${item.label}` }}\n                onMouseDown={(event) => event.preventDefault()}\n                onRemove={() => {\n                  toggle(item);\n                  keepFocusInControl();\n                }}\n                className={cx(styles.multiSelectChip, classNames?.chip)}\n                style={slotStyles?.chip}\n              />\n            ))}\n          </div>\n\n          {clearable && isInteractive && selected.length > 0 && (\n            <button\n              type='button'\n              tabIndex={-1}\n              aria-label={text.clearSelection}\n              className={cx(styles.multiSelectClearButton, classNames?.clearButton)}\n              style={slotStyles?.clearButton}\n              onMouseDown={(event) => event.preventDefault()}\n              onClick={(event) => {\n                event.stopPropagation();\n                commit([]);\n                keepFocusInControl();\n              }}\n            >\n              <FontAwesomeIcon icon={faXmark} />\n            </button>\n          )}\n\n          <FontAwesomeIcon\n            icon={faChevronDown}\n            className={cx(styles.multiSelectIcon, isOpen && styles.multiSelectIconOpen, classNames?.icon)}\n            style={slotStyles?.icon as React.CSSProperties & Record<`--fa-font-${string}`, string>}\n          />\n\n          {label && (\n            <div\n              className={cx(\n                styles.multiSelectLabel,\n                shouldFloatLabel && styles.multiSelectLabelFloating,\n                classNames?.label,\n              )}\n              style={slotStyles?.label}\n            >\n              {label}\n            </div>\n          )}\n\n          {/* The visible border lives here rather than on the control, because the legend is what\n              cuts the notch the floating label sits in. Same construction as Input. */}\n          <fieldset\n            className={cx(\n              styles.multiSelectFieldset,\n              !label && styles.multiSelectFieldsetNoNotch,\n              (isFocused || isOpen) && styles.multiSelectFieldsetFocused,\n              hasError && styles.multiSelectFieldsetError,\n              classNames?.fieldset,\n            )}\n            style={slotStyles?.fieldset}\n          >\n            <legend\n              className={cx(\n                styles.multiSelectFieldsetLegend,\n                shouldFloatLabel && styles.multiSelectFieldsetLegendActive,\n              )}\n            >\n              <span>{label}</span>\n            </legend>\n          </fieldset>\n        </div>\n      </Popover>\n\n      <Tooltip variant='error' message={errorText} isVisible={hasError && (isFocused || isHovered)} />\n    </div>\n  );\n}\n\nexport default MultiSelect;\n"],"mappings":"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"}
+{"version":3,"file":"multiSelect.mjs","names":[],"sources":["../../../../package/common/multiSelect/multiSelect.tsx"],"sourcesContent":["import { useEffect, useId, useRef, useState } from 'react';\nimport type { ReactElement } from 'react';\nimport cx from 'classnames';\nimport { faChevronDown, faCheck, faXmark } from '@fortawesome/free-solid-svg-icons';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\n\nimport Chip from 'components/common/chip';\nimport SearchInput from 'components/common/searchInput';\nimport Tooltip from 'components/common/tooltip';\nimport Popover from 'components/common/popover';\nimport { PopoverAlign, PopoverPlacement, PopoverTrigger } from '../popover/popover.types';\nimport { useComponentDefaults, useLabels } from '../configProvider';\nimport { edgeIndex, nextIndex, scrollOptionIntoView } from '../utils/listNavigation';\nimport type { MultiSelectItem, MultiSelectLabels, MultiSelectProps, MultiSelectValue } from './multiSelect.types';\n\nimport styles from './multiSelect.module.pcss';\n\nconst EMPTY: MultiSelectValue[] = [];\n\nconst DEFAULT_LABELS: Required<MultiSelectLabels> = {\n  clearSelection: 'Clear selection',\n  create: (value) => `Add \"${value}\"`,\n  searchPlaceholder: 'Search…',\n  empty: 'No matches',\n};\n\nfunction MultiSelect(props: MultiSelectProps): ReactElement {\n  const {\n    items,\n    value,\n    defaultValue = [],\n    onChange = () => {},\n    label = '',\n    alwaysFloatLabel = false,\n    placeholder = '',\n    searchable = false,\n    allowCustomValues = false,\n    maxSelected,\n    clearable = true,\n    disabled = false,\n    readOnly = false,\n    presentation,\n    formValidator = null,\n    errorMessage = '',\n    isValid = true,\n    className,\n    style,\n    classNames,\n    styles: slotStyles,\n    onMouseEnter,\n    onMouseLeave,\n    onFocus,\n    onBlur,\n    labels,\n    ...rest\n  } = useComponentDefaults('MultiSelect', props);\n  const text = useLabels('MultiSelect', labels, DEFAULT_LABELS);\n\n  const rootRef = useRef<HTMLDivElement>(null);\n  const controlRef = useRef<HTMLDivElement>(null);\n  const searchRef = useRef<HTMLDivElement>(null);\n  const optionsRef = useRef<HTMLDivElement>(null);\n  const listboxId = useId();\n\n  const [internalValue, setInternalValue] = useState<MultiSelectValue[]>(defaultValue);\n  const [isOpen, setIsOpen] = useState(false);\n  const [search, setSearch] = useState('');\n  const [activeIndex, setActiveIndex] = useState(0);\n  const [isFocused, setIsFocused] = useState(false);\n  const [isHovered, setIsHovered] = useState(false);\n  const [panelWidth, setPanelWidth] = useState<number>();\n\n  // A ref as well as the prop: react-hooks/immutability refuses a mutation of the prop itself in\n  // an event handler, and marking the validator touched happens in one.\n  const fvRef = useRef(formValidator);\n  const [, forceUpdate] = useState(0);\n  useEffect(() => {\n    fvRef.current = formValidator;\n    const fv = fvRef.current;\n    if (!fv) return;\n    fv.label = label;\n    fv.validate();\n    const listener = () => forceUpdate((n) => n + 1);\n    fv.registerOnUpdateListener(listener);\n    return () => {\n      fv.removeOnUpdateListener(listener);\n    };\n  }, [formValidator, label]);\n\n  const isControlled = value !== undefined && !formValidator;\n  const rawValue = formValidator ? formValidator.value : isControlled ? value : internalValue;\n  const selected = Array.isArray(rawValue) ? (rawValue as MultiSelectValue[]) : EMPTY;\n\n  const hasError = formValidator ? formValidator.touched && formValidator.hasError() : !isValid || !!errorMessage;\n  const errorText = formValidator ? formValidator.getCurrentErrorMessage() : errorMessage || '';\n\n  const isInteractive = !disabled && !readOnly;\n  const atMax = maxSelected !== undefined && selected.length >= maxSelected;\n\n  const shouldFloatLabel = alwaysFloatLabel || isOpen || isFocused || selected.length > 0;\n\n  const isSearchable = searchable || allowCustomValues;\n  const typed = search.trim();\n  const needle = isSearchable ? typed.toLowerCase() : '';\n  const matches = needle ? items.filter((item) => item.label.toLowerCase().includes(needle)) : items;\n\n  const canCreate =\n    allowCustomValues &&\n    typed.length > 0 &&\n    !atMax &&\n    !items.some((item) => item.label.toLowerCase() === needle || String(item.key).toLowerCase() === needle) &&\n    !selected.some((key) => String(key).toLowerCase() === needle);\n\n  const visibleItems: MultiSelectItem[] = canCreate ? [...matches, { key: typed, label: text.create(typed) }] : matches;\n\n  // Mapped from `selected`, not filtered from `items`, to keep the chips in pick order. A custom\n  // value has no entry in `items`, so it stands in for itself.\n  const selectedItems = selected\n    .map<MultiSelectItem | undefined>(\n      (key) => items.find((item) => item.key === key) ?? (allowCustomValues ? { key, label: String(key) } : undefined),\n    )\n    .filter((item): item is MultiSelectItem => item !== undefined);\n\n  function commit(next: MultiSelectValue[]) {\n    if (formValidator) formValidator.set(next);\n    else if (!isControlled) setInternalValue(next);\n    onChange(next);\n  }\n\n  function toggle(item: MultiSelectItem) {\n    if (!isInteractive || item.disabled) return;\n    if (selected.includes(item.key)) commit(selected.filter((key) => key !== item.key));\n    else if (!atMax) commit([...selected, item.key]);\n    // The typed text has become a chip, so leaving it in the box would offer to add it again.\n    if (canCreate && item.key === typed) setSearch('');\n  }\n\n  /**\n   * A focused element that unmounts fires no blur, so removing the chip or clear button that was\n   * just clicked would leave `isFocused` stuck true. Hand focus back so there is still something\n   * left to blur.\n   */\n  function keepFocusInControl() {\n    if (rootRef.current?.contains(document.activeElement)) controlRef.current?.focus();\n  }\n\n  function handleOpenChange(next: boolean) {\n    if (next && !isInteractive) return;\n    setIsOpen(next);\n    if (next) {\n      setPanelWidth(controlRef.current?.offsetWidth);\n      setActiveIndex(0);\n    } else {\n      setSearch('');\n      if (fvRef.current) fvRef.current.touched = true;\n    }\n  }\n\n  useEffect(() => {\n    if (!isOpen || !isSearchable) return;\n    searchRef.current?.querySelector('input')?.focus();\n  }, [isOpen, isSearchable]);\n\n  useEffect(() => {\n    if (!isOpen) return;\n    scrollOptionIntoView(optionsRef.current, document.getElementById(`${listboxId}-${activeIndex}`));\n  }, [isOpen, activeIndex, listboxId]);\n\n  // Matches what the options render as `aria-disabled`, so the arrows cannot land on one.\n  const navigation = {\n    isDisabled: (index: number) => {\n      const item = visibleItems[index];\n      return !!item.disabled || (atMax && !selected.includes(item.key));\n    },\n  };\n\n  function handleKeyDown(event: React.KeyboardEvent) {\n    if (!isInteractive) return;\n\n    if (!isOpen) {\n      if (event.key === 'ArrowDown' || event.key === 'Enter' || event.key === ' ') {\n        event.preventDefault();\n        handleOpenChange(true);\n      } else if (event.key === 'Backspace' && selected.length > 0) {\n        commit(selected.slice(0, -1));\n      }\n      return;\n    }\n\n    if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {\n      event.preventDefault();\n      setActiveIndex(nextIndex(activeIndex, event.key === 'ArrowDown' ? 1 : -1, visibleItems.length, navigation) ?? 0);\n    } else if (event.key === 'Home' || event.key === 'End') {\n      event.preventDefault();\n      setActiveIndex(edgeIndex(event.key === 'Home' ? 'first' : 'last', visibleItems.length, navigation) ?? 0);\n    } else if (event.key === 'Enter') {\n      event.preventDefault();\n      const item = visibleItems[activeIndex];\n      if (item) toggle(item);\n    } else if (event.key === 'Backspace' && !search && selected.length > 0) {\n      commit(selected.slice(0, -1));\n    }\n  }\n\n  const panel = (\n    <div className={cx(styles.multiSelectPanel, classNames?.panel)} style={slotStyles?.panel}>\n      {isSearchable && (\n        <div ref={searchRef} className={cx(styles.multiSelectSearch, classNames?.search)} style={slotStyles?.search}>\n          <SearchInput\n            value={search}\n            onChange={(value) => {\n              setSearch(value);\n              setActiveIndex(0);\n            }}\n            placeholder={text.searchPlaceholder}\n            onKeyDown={handleKeyDown}\n          />\n        </div>\n      )}\n      <div\n        ref={optionsRef}\n        id={listboxId}\n        role='listbox'\n        aria-multiselectable='true'\n        aria-label={label || undefined}\n        className={cx(styles.multiSelectOptions, classNames?.options)}\n        style={slotStyles?.options}\n      >\n        {visibleItems.length === 0 ? (\n          <div className={cx(styles.multiSelectEmpty, classNames?.empty)} style={slotStyles?.empty}>\n            {text.empty}\n          </div>\n        ) : (\n          visibleItems.map((item, index) => {\n            const isSelected = selected.includes(item.key);\n            const isDisabled = item.disabled || (atMax && !isSelected);\n\n            return (\n              <div\n                key={item.key}\n                id={`${listboxId}-${index}`}\n                role='option'\n                aria-selected={isSelected}\n                aria-disabled={isDisabled || undefined}\n                className={cx(\n                  styles.multiSelectOption,\n                  index === activeIndex && styles.multiSelectOptionActive,\n                  isSelected && styles.multiSelectOptionSelected,\n                  isDisabled && styles.multiSelectOptionDisabled,\n                  classNames?.option,\n                )}\n                style={slotStyles?.option}\n                onMouseDown={(event) => event.preventDefault()}\n                onMouseEnter={() => setActiveIndex(index)}\n                onClick={() => toggle(item)}\n              >\n                <span\n                  className={cx(styles.multiSelectOptionCheck, classNames?.optionCheck)}\n                  style={slotStyles?.optionCheck}\n                >\n                  {isSelected && <FontAwesomeIcon icon={faCheck} />}\n                </span>\n                <span\n                  className={cx(styles.multiSelectOptionLabel, classNames?.optionLabel)}\n                  style={slotStyles?.optionLabel}\n                >\n                  {item.label}\n                </span>\n              </div>\n            );\n          })\n        )}\n      </div>\n    </div>\n  );\n\n  return (\n    <div\n      {...rest}\n      ref={rootRef}\n      className={cx(styles.multiSelect, disabled && styles.multiSelectDisabled, classNames?.root, className)}\n      style={{ ...style, ...slotStyles?.root }}\n      onMouseEnter={(event) => {\n        setIsHovered(true);\n        onMouseEnter?.(event);\n      }}\n      onMouseLeave={(event) => {\n        setIsHovered(false);\n        onMouseLeave?.(event);\n      }}\n      onFocus={(event) => {\n        setIsFocused(true);\n        onFocus?.(event);\n      }}\n      onBlur={(event) => {\n        if (event.currentTarget.contains(event.relatedTarget as Node | null)) return;\n        setIsFocused(false);\n        onBlur?.(event);\n      }}\n    >\n      <Popover\n        isOpen={isOpen}\n        onOpenChange={handleOpenChange}\n        trigger={PopoverTrigger.Click}\n        placement={PopoverPlacement.Bottom}\n        align={PopoverAlign.Start}\n        offset={4}\n        withArrow={false}\n        // Neither half of this is the keyboard-only default. A search field takes\n        // the caret however the panel was opened, and without one the control\n        // keeps the focus and points at the active option with\n        // `aria-activedescendant`, so nothing may take it away.\n        focusOnOpen={isSearchable}\n        constrainWidth={false}\n        width='trigger'\n        disabled={!isInteractive}\n        presentation={presentation}\n        content={panel}\n        styles={{ panel: panelWidth ? { minWidth: panelWidth } : undefined }}\n      >\n        <div\n          ref={controlRef}\n          role='combobox'\n          tabIndex={disabled ? -1 : 0}\n          aria-expanded={isOpen}\n          aria-haspopup='listbox'\n          aria-controls={listboxId}\n          aria-activedescendant={isOpen && visibleItems.length > 0 ? `${listboxId}-${activeIndex}` : undefined}\n          aria-disabled={disabled || undefined}\n          aria-readonly={readOnly || undefined}\n          className={cx(styles.multiSelectControl, classNames?.control)}\n          style={slotStyles?.control}\n          onKeyDown={handleKeyDown}\n        >\n          {placeholder && selectedItems.length === 0 && (\n            <span\n              className={cx(\n                styles.multiSelectPlaceholder,\n                (!label || shouldFloatLabel) && styles.multiSelectPlaceholderShown,\n                !label && styles.multiSelectPlaceholderInstant,\n                classNames?.placeholder,\n              )}\n              style={slotStyles?.placeholder}\n            >\n              {placeholder}\n            </span>\n          )}\n\n          <div className={cx(styles.multiSelectValues, classNames?.values)} style={slotStyles?.values}>\n            {selectedItems.map((item) => (\n              <Chip\n                key={item.key}\n                text={item.label}\n                showRemoveIcon={isInteractive}\n                labels={{ remove: `Remove ${item.label}` }}\n                onMouseDown={(event) => event.preventDefault()}\n                onRemove={() => {\n                  toggle(item);\n                  keepFocusInControl();\n                }}\n                className={cx(styles.multiSelectChip, classNames?.chip)}\n                style={slotStyles?.chip}\n              />\n            ))}\n          </div>\n\n          {clearable && isInteractive && selected.length > 0 && (\n            <button\n              type='button'\n              tabIndex={-1}\n              aria-label={text.clearSelection}\n              className={cx(styles.multiSelectClearButton, classNames?.clearButton)}\n              style={slotStyles?.clearButton}\n              onMouseDown={(event) => event.preventDefault()}\n              onClick={(event) => {\n                event.stopPropagation();\n                commit([]);\n                keepFocusInControl();\n              }}\n            >\n              <FontAwesomeIcon icon={faXmark} />\n            </button>\n          )}\n\n          <FontAwesomeIcon\n            icon={faChevronDown}\n            className={cx(styles.multiSelectIcon, isOpen && styles.multiSelectIconOpen, classNames?.icon)}\n            style={slotStyles?.icon as React.CSSProperties & Record<`--fa-font-${string}`, string>}\n          />\n\n          {label && (\n            <div\n              className={cx(\n                styles.multiSelectLabel,\n                shouldFloatLabel && styles.multiSelectLabelFloating,\n                classNames?.label,\n              )}\n              style={slotStyles?.label}\n            >\n              {label}\n            </div>\n          )}\n\n          {/* The visible border lives here rather than on the control, because the legend is what\n              cuts the notch the floating label sits in. Same construction as Input. */}\n          <fieldset\n            className={cx(\n              styles.multiSelectFieldset,\n              !label && styles.multiSelectFieldsetNoNotch,\n              (isFocused || isOpen) && styles.multiSelectFieldsetFocused,\n              hasError && styles.multiSelectFieldsetError,\n              classNames?.fieldset,\n            )}\n            style={slotStyles?.fieldset}\n          >\n            <legend\n              className={cx(\n                styles.multiSelectFieldsetLegend,\n                shouldFloatLabel && styles.multiSelectFieldsetLegendActive,\n              )}\n            >\n              <span>{label}</span>\n            </legend>\n          </fieldset>\n        </div>\n      </Popover>\n\n      <Tooltip variant='error' message={errorText} isVisible={hasError && (isFocused || isHovered)} />\n    </div>\n  );\n}\n\nexport default MultiSelect;\n"],"mappings":"g2BAiBA,IAAM,GAA4B,CAAC,EAE7B,GAA8C,CAClD,eAAgB,kBAChB,OAAS,GAAU,QAAQ,EAAM,GACjC,kBAAmB,UACnB,MAAO,YACT,EAEA,SAAS,EAAY,EAAuC,CAC1D,GAAM,CACJ,QACA,QACA,gBAAe,CAAC,EAChB,gBAAiB,CAAC,EAClB,QAAQ,GACR,oBAAmB,GACnB,cAAc,GACd,cAAa,GACb,oBAAoB,GACpB,cACA,aAAY,GACZ,WAAW,GACX,WAAW,GACX,gBACA,gBAAgB,KAChB,eAAe,GACf,WAAU,GACV,aACA,SACA,aACA,OAAQ,EACR,gBACA,gBACA,WACA,UACA,UACA,GAAG,IACD,EAAqB,cAAe,CAAK,EACvC,EAAO,EAAU,cAAe,GAAQ,EAAc,EAEtD,EAAU,EAAuB,IAAI,EACrC,EAAa,EAAuB,IAAI,EACxC,EAAY,EAAuB,IAAI,EACvC,EAAa,EAAuB,IAAI,EACxC,EAAY,GAAM,EAElB,CAAC,GAAe,IAAoB,EAA6B,EAAY,EAC7E,CAAC,EAAQ,IAAa,EAAS,EAAK,EACpC,CAAC,EAAQ,GAAa,EAAS,EAAE,EACjC,CAAC,EAAa,GAAkB,EAAS,CAAC,EAC1C,CAAC,EAAW,GAAgB,EAAS,EAAK,EAC1C,CAAC,GAAW,IAAgB,EAAS,EAAK,EAC1C,CAAC,GAAY,IAAiB,EAAiB,EAI/C,EAAQ,EAAO,CAAa,EAC5B,EAAG,IAAe,EAAS,CAAC,EAClC,MAAgB,CACd,EAAM,QAAU,EAChB,IAAM,EAAK,EAAM,QACjB,GAAI,CAAC,EAAI,OACT,EAAG,MAAQ,EACX,EAAG,SAAS,EACZ,IAAM,MAAiB,GAAa,GAAM,EAAI,CAAC,EAE/C,OADA,EAAG,yBAAyB,CAAQ,MACvB,CACX,EAAG,uBAAuB,CAAQ,CACpC,CACF,EAAG,CAAC,EAAe,CAAK,CAAC,EAEzB,IAAM,EAAe,IAAU,IAAA,IAAa,CAAC,EACvC,EAAW,EAAgB,EAAc,MAAQ,EAAe,EAAQ,GACxE,EAAW,MAAM,QAAQ,CAAQ,EAAK,EAAkC,GAExE,EAAW,EAAgB,EAAc,SAAW,EAAc,SAAS,EAAI,CAAC,IAAW,CAAC,CAAC,EAC7F,GAAY,EAAgB,EAAc,uBAAuB,EAAI,GAAgB,GAErF,EAAgB,CAAC,GAAY,CAAC,EAC9B,EAAQ,IAAgB,IAAA,IAAa,EAAS,QAAU,EAExD,EAAmB,IAAoB,GAAU,GAAa,EAAS,OAAS,EAEhF,EAAe,IAAc,EAC7B,EAAQ,EAAO,KAAK,EACpB,EAAS,EAAe,EAAM,YAAY,EAAI,GAC9C,EAAU,EAAS,EAAM,OAAQ,GAAS,EAAK,MAAM,YAAY,CAAC,CAAC,SAAS,CAAM,CAAC,EAAI,EAEvF,EACJ,GACA,EAAM,OAAS,GACf,CAAC,GACD,CAAC,EAAM,KAAM,GAAS,EAAK,MAAM,YAAY,IAAM,GAAU,OAAO,EAAK,GAAG,CAAC,CAAC,YAAY,IAAM,CAAM,GACtG,CAAC,EAAS,KAAM,GAAQ,OAAO,CAAG,CAAC,CAAC,YAAY,IAAM,CAAM,EAExD,EAAkC,EAAY,CAAC,GAAG,EAAS,CAAE,IAAK,EAAO,MAAO,EAAK,OAAO,CAAK,CAAE,CAAC,EAAI,EAIxG,GAAgB,EACnB,IACE,GAAQ,EAAM,KAAM,GAAS,EAAK,MAAQ,CAAG,IAAM,EAAoB,CAAE,MAAK,MAAO,OAAO,CAAG,CAAE,EAAI,IAAA,GACxG,CAAC,CACA,OAAQ,GAAkC,IAAS,IAAA,EAAS,EAE/D,SAAS,EAAO,EAA0B,CACpC,EAAe,EAAc,IAAI,CAAI,EAC/B,GAAc,GAAiB,CAAI,EAC7C,GAAS,CAAI,CACf,CAEA,SAAS,EAAO,EAAuB,CAChC,GAAiB,GAAK,WACvB,EAAS,SAAS,EAAK,GAAG,EAAG,EAAO,EAAS,OAAQ,GAAQ,IAAQ,EAAK,GAAG,CAAC,EACxE,GAAO,EAAO,CAAC,GAAG,EAAU,EAAK,GAAG,CAAC,EAE3C,GAAa,EAAK,MAAQ,GAAO,EAAU,EAAE,EACnD,CAOA,SAAS,IAAqB,CACxB,EAAQ,SAAS,SAAS,SAAS,aAAa,GAAG,EAAW,SAAS,MAAM,CACnF,CAEA,SAAS,GAAiB,EAAe,EACnC,IAAS,KACb,GAAU,CAAI,EACV,GACF,GAAc,EAAW,SAAS,WAAW,EAC7C,EAAe,CAAC,IAEhB,EAAU,EAAE,EACR,EAAM,UAAS,EAAM,QAAQ,QAAU,KAE/C,CAEA,MAAgB,CACT,GAAW,GAChB,EAAU,SAAS,cAAc,OAAO,CAAC,EAAE,MAAM,CACnD,EAAG,CAAC,EAAQ,CAAY,CAAC,EAEzB,MAAgB,CACT,GACL,GAAqB,EAAW,QAAS,SAAS,eAAe,GAAG,EAAU,GAAG,GAAa,CAAC,CACjG,EAAG,CAAC,EAAQ,EAAa,CAAS,CAAC,EAGnC,IAAM,GAAa,CACjB,WAAa,GAAkB,CAC7B,IAAM,EAAO,EAAa,GAC1B,MAAO,CAAC,CAAC,EAAK,UAAa,GAAS,CAAC,EAAS,SAAS,EAAK,GAAG,CACjE,CACF,EAEA,SAAS,GAAc,EAA4B,CAC5C,KAEL,IAAI,CAAC,EAAQ,CACP,EAAM,MAAQ,aAAe,EAAM,MAAQ,SAAW,EAAM,MAAQ,KACtE,EAAM,eAAe,EACrB,GAAiB,EAAI,GACZ,EAAM,MAAQ,aAAe,EAAS,OAAS,GACxD,EAAO,EAAS,MAAM,EAAG,EAAE,CAAC,EAE9B,MACF,CAEA,GAAI,EAAM,MAAQ,aAAe,EAAM,MAAQ,UAC7C,EAAM,eAAe,EACrB,EAAe,GAAU,EAAa,EAAM,MAAQ,YAAc,EAAI,GAAI,EAAa,OAAQ,EAAU,GAAK,CAAC,OAC1G,GAAI,EAAM,MAAQ,QAAU,EAAM,MAAQ,MAC/C,EAAM,eAAe,EACrB,EAAe,GAAU,EAAM,MAAQ,OAAS,QAAU,OAAQ,EAAa,OAAQ,EAAU,GAAK,CAAC,OAClG,GAAI,EAAM,MAAQ,QAAS,CAChC,EAAM,eAAe,EACrB,IAAM,EAAO,EAAa,GACtB,GAAM,EAAO,CAAI,CACvB,MAAW,EAAM,MAAQ,aAAe,CAAC,GAAU,EAAS,OAAS,GACnE,EAAO,EAAS,MAAM,EAAG,EAAE,CAAC,CAb9B,CAeF,CAEA,IAAM,GACJ,EAAC,MAAD,CAAK,UAAW,EAAG,EAAO,iBAAkB,GAAY,KAAK,EAAG,MAAO,GAAY,MAAnF,SAAA,CACG,GACC,EAAC,MAAD,CAAK,IAAK,EAAW,UAAW,EAAG,EAAO,kBAAmB,GAAY,MAAM,EAAG,MAAO,GAAY,OACnG,SAAA,EAAC,GAAD,CACE,MAAO,EACP,SAAW,GAAU,CACnB,EAAU,CAAK,EACf,EAAe,CAAC,CAClB,EACA,YAAa,EAAK,kBAClB,UAAW,EACZ,CAAA,CACE,CAAA,EAEP,EAAC,MAAD,CACE,IAAK,EACL,GAAI,EACJ,KAAK,UACL,uBAAqB,OACrB,aAAY,GAAS,IAAA,GACrB,UAAW,EAAG,EAAO,mBAAoB,GAAY,OAAO,EAC5D,MAAO,GAAY,QAElB,SAAA,EAAa,SAAW,EACvB,EAAC,MAAD,CAAK,UAAW,EAAG,EAAO,iBAAkB,GAAY,KAAK,EAAG,MAAO,GAAY,MAChF,SAAA,EAAK,KACH,CAAA,EAEL,EAAa,KAAK,EAAM,IAAU,CAChC,IAAM,EAAa,EAAS,SAAS,EAAK,GAAG,EACvC,EAAa,EAAK,UAAa,GAAS,CAAC,EAE/C,OACE,EAAC,MAAD,CAEE,GAAI,GAAG,EAAU,GAAG,IACpB,KAAK,SACL,gBAAe,EACf,gBAAe,GAAc,IAAA,GAC7B,UAAW,EACT,EAAO,kBACP,IAAU,GAAe,EAAO,wBAChC,GAAc,EAAO,0BACrB,GAAc,EAAO,0BACrB,GAAY,MACd,EACA,MAAO,GAAY,OACnB,YAAc,GAAU,EAAM,eAAe,EAC7C,iBAAoB,EAAe,CAAK,EACxC,YAAe,EAAO,CAAI,EAhB5B,SAAA,CAkBE,EAAC,OAAD,CACE,UAAW,EAAG,EAAO,uBAAwB,GAAY,WAAW,EACpE,MAAO,GAAY,YAElB,SAAA,GAAc,EAAC,EAAD,CAAiB,KAAM,EAAU,CAAA,CAC5C,CAAA,EACN,EAAC,OAAD,CACE,UAAW,EAAG,EAAO,uBAAwB,GAAY,WAAW,EACpE,MAAO,GAAY,YAElB,SAAA,EAAK,KACF,CAAA,CACH,CA7BE,EAAA,EAAK,GA6BP,CAET,CAAC,CAEA,CAAA,CACF,IAGP,OACE,EAAC,MAAD,CACE,GAAI,GACJ,IAAK,EACL,UAAW,EAAG,EAAO,YAAa,GAAY,EAAO,oBAAqB,GAAY,KAAM,EAAS,EACrG,MAAO,CAAE,GAAG,GAAO,GAAG,GAAY,IAAK,EACvC,aAAe,GAAU,CACvB,GAAa,EAAI,EACjB,KAAe,CAAK,CACtB,EACA,aAAe,GAAU,CACvB,GAAa,EAAK,EAClB,KAAe,CAAK,CACtB,EACA,QAAU,GAAU,CAClB,EAAa,EAAI,EACjB,KAAU,CAAK,CACjB,EACA,OAAS,GAAU,CACb,EAAM,cAAc,SAAS,EAAM,aAA4B,IACnE,EAAa,EAAK,EAClB,KAAS,CAAK,EAChB,EArBF,SAAA,CAuBE,EAAC,GAAD,CACU,SACR,aAAc,GACd,QAAS,GAAe,MACxB,UAAW,EAAiB,OAC5B,MAAO,EAAa,MACpB,OAAQ,EACR,UAAW,GAKX,YAAa,EACb,eAAgB,GAChB,MAAM,UACN,SAAU,CAAC,EACG,gBACd,QAAS,GACT,OAAQ,CAAE,MAAO,GAAa,CAAE,SAAU,EAAW,EAAI,IAAA,EAAU,EAEnE,SAAA,EAAC,MAAD,CACE,IAAK,EACL,KAAK,WACL,SAAU,EAAW,GAAK,EAC1B,gBAAe,EACf,gBAAc,UACd,gBAAe,EACf,wBAAuB,GAAU,EAAa,OAAS,EAAI,GAAG,EAAU,GAAG,IAAgB,IAAA,GAC3F,gBAAe,GAAY,IAAA,GAC3B,gBAAe,GAAY,IAAA,GAC3B,UAAW,EAAG,EAAO,mBAAoB,GAAY,OAAO,EAC5D,MAAO,GAAY,QACnB,UAAW,GAZb,SAAA,CAcG,GAAe,GAAc,SAAW,GACvC,EAAC,OAAD,CACE,UAAW,EACT,EAAO,wBACN,CAAC,GAAS,IAAqB,EAAO,4BACvC,CAAC,GAAS,EAAO,8BACjB,GAAY,WACd,EACA,MAAO,GAAY,YAElB,SAAA,CACG,CAAA,EAGR,EAAC,MAAD,CAAK,UAAW,EAAG,EAAO,kBAAmB,GAAY,MAAM,EAAG,MAAO,GAAY,OAClF,SAAA,GAAc,IAAK,GAClB,EAAC,GAAD,CAEE,KAAM,EAAK,MACX,eAAgB,EAChB,OAAQ,CAAE,OAAQ,UAAU,EAAK,OAAQ,EACzC,YAAc,GAAU,EAAM,eAAe,EAC7C,aAAgB,CACd,EAAO,CAAI,EACX,GAAmB,CACrB,EACA,UAAW,EAAG,EAAO,gBAAiB,GAAY,IAAI,EACtD,MAAO,GAAY,IACpB,EAXM,EAAK,GAWX,CACF,CACE,CAAA,EAEJ,IAAa,GAAiB,EAAS,OAAS,GAC/C,EAAC,SAAD,CACE,KAAK,SACL,SAAU,GACV,aAAY,EAAK,eACjB,UAAW,EAAG,EAAO,uBAAwB,GAAY,WAAW,EACpE,MAAO,GAAY,YACnB,YAAc,GAAU,EAAM,eAAe,EAC7C,QAAU,GAAU,CAClB,EAAM,gBAAgB,EACtB,EAAO,CAAC,CAAC,EACT,GAAmB,CACrB,EAEA,SAAA,EAAC,EAAD,CAAiB,KAAM,EAAU,CAAA,CAC3B,CAAA,EAGV,EAAC,EAAD,CACE,KAAM,GACN,UAAW,EAAG,EAAO,gBAAiB,GAAU,EAAO,oBAAqB,GAAY,IAAI,EAC5F,MAAO,GAAY,IACpB,CAAA,EAEA,GACC,EAAC,MAAD,CACE,UAAW,EACT,EAAO,iBACP,GAAoB,EAAO,yBAC3B,GAAY,KACd,EACA,MAAO,GAAY,MAElB,SAAA,CACE,CAAA,EAKP,EAAC,WAAD,CACE,UAAW,EACT,EAAO,oBACP,CAAC,GAAS,EAAO,4BAChB,GAAa,IAAW,EAAO,2BAChC,GAAY,EAAO,yBACnB,GAAY,QACd,EACA,MAAO,GAAY,SAEnB,SAAA,EAAC,SAAD,CACE,UAAW,EACT,EAAO,0BACP,GAAoB,EAAO,+BAC7B,EAEA,SAAA,EAAC,OAAD,CAAA,SAAO,CAAY,CAAA,CACb,CAAA,CACA,CAAA,CACP,GACE,CAAA,EAET,EAAC,GAAD,CAAS,QAAQ,QAAQ,QAAS,GAAW,UAAW,IAAa,GAAa,GAAa,CAAA,CAC5F,GAET"}

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

@@ -1,2 +1,2 @@
-var e=`multiSelect_fmViY`,t=`multiSelect-label_asHZ1`,n=`multiSelect-label-floating_d4-Om`,r=`multiSelect-fieldset_Eo29l`,i=`multiSelect-fieldset-noNotch_8EL3U`,a=`multiSelect-fieldset-focused_ZC2P6`,o=`multiSelect-fieldset-error_CWzEo`,s=`multiSelect-fieldset-legend_p-6nh`,c=`multiSelect-fieldset-legend-active_M0L7g`,l=`multiSelect-control_zLb7t`,u=`multiSelect-values_k1Q8x`,d=`multiSelect-chip_xqe8Q`,f=`multiSelect-placeholder_Tjrmh`,p=`multiSelect-placeholder-shown_8v36t`,m=`multiSelectFadeIn_rOplX`,h=`multiSelect-placeholder-instant_r9-TD`,g=`multiSelect-clearButton_FKs0m`,_=`multiSelect-icon_ovLu-`,v=`multiSelect-icon-open_h8VAu`,y=`multiSelect-disabled_Hm8mv`,b=`multiSelect-panel_VX7gU`,x=`multiSelect-search_g4OHX`,S=`multiSelect-options_MGZCv`,C=`multiSelect-option_hbvPY`,w=`multiSelect-option-active_mSWFG`,T=`multiSelect-option-selected_mjPq-`,E=`multiSelect-option-disabled_qSgYz`,D=`multiSelect-optionCheck_-YKoj`,O=`multiSelect-optionLabel_CFZke`,k=`multiSelect-empty_MjABY`,A={multiSelect:e,"multiSelect-label":`multiSelect-label_asHZ1`,multiSelectLabel:t,"multiSelect-label-floating":`multiSelect-label-floating_d4-Om`,multiSelectLabelFloating:n,"multiSelect-fieldset":`multiSelect-fieldset_Eo29l`,multiSelectFieldset:r,"multiSelect-fieldset-noNotch":`multiSelect-fieldset-noNotch_8EL3U`,multiSelectFieldsetNoNotch:i,"multiSelect-fieldset-focused":`multiSelect-fieldset-focused_ZC2P6`,multiSelectFieldsetFocused:a,"multiSelect-fieldset-error":`multiSelect-fieldset-error_CWzEo`,multiSelectFieldsetError:o,"multiSelect-fieldset-legend":`multiSelect-fieldset-legend_p-6nh`,multiSelectFieldsetLegend:s,"multiSelect-fieldset-legend-active":`multiSelect-fieldset-legend-active_M0L7g`,multiSelectFieldsetLegendActive:c,"multiSelect-control":`multiSelect-control_zLb7t`,multiSelectControl:l,"multiSelect-values":`multiSelect-values_k1Q8x`,multiSelectValues:u,"multiSelect-chip":`multiSelect-chip_xqe8Q`,multiSelectChip:d,"multiSelect-placeholder":`multiSelect-placeholder_Tjrmh`,multiSelectPlaceholder:f,"multiSelect-placeholder-shown":`multiSelect-placeholder-shown_8v36t`,multiSelectPlaceholderShown:p,multiSelectFadeIn:m,"multiSelect-placeholder-instant":`multiSelect-placeholder-instant_r9-TD`,multiSelectPlaceholderInstant:h,"multiSelect-clearButton":`multiSelect-clearButton_FKs0m`,multiSelectClearButton:g,"multiSelect-icon":`multiSelect-icon_ovLu-`,multiSelectIcon:_,"multiSelect-icon-open":`multiSelect-icon-open_h8VAu`,multiSelectIconOpen:v,"multiSelect-disabled":`multiSelect-disabled_Hm8mv`,multiSelectDisabled:y,"multiSelect-panel":`multiSelect-panel_VX7gU`,multiSelectPanel:b,"multiSelect-search":`multiSelect-search_g4OHX`,multiSelectSearch:x,"multiSelect-options":`multiSelect-options_MGZCv`,multiSelectOptions:S,"multiSelect-option":`multiSelect-option_hbvPY`,multiSelectOption:C,"multiSelect-option-active":`multiSelect-option-active_mSWFG`,multiSelectOptionActive:w,"multiSelect-option-selected":`multiSelect-option-selected_mjPq-`,multiSelectOptionSelected:T,"multiSelect-option-disabled":`multiSelect-option-disabled_qSgYz`,multiSelectOptionDisabled:E,"multiSelect-optionCheck":`multiSelect-optionCheck_-YKoj`,multiSelectOptionCheck:D,"multiSelect-optionLabel":`multiSelect-optionLabel_CFZke`,multiSelectOptionLabel:O,"multiSelect-empty":`multiSelect-empty_MjABY`,multiSelectEmpty:k};export{A as default,e as multiSelect,d as multiSelectChip,g as multiSelectClearButton,l as multiSelectControl,y as multiSelectDisabled,k as multiSelectEmpty,m as multiSelectFadeIn,r as multiSelectFieldset,o as multiSelectFieldsetError,a as multiSelectFieldsetFocused,s as multiSelectFieldsetLegend,c as multiSelectFieldsetLegendActive,i as multiSelectFieldsetNoNotch,_ as multiSelectIcon,v as multiSelectIconOpen,t as multiSelectLabel,n as multiSelectLabelFloating,C as multiSelectOption,w as multiSelectOptionActive,D as multiSelectOptionCheck,E as multiSelectOptionDisabled,O as multiSelectOptionLabel,T as multiSelectOptionSelected,S as multiSelectOptions,b as multiSelectPanel,f as multiSelectPlaceholder,h as multiSelectPlaceholderInstant,p as multiSelectPlaceholderShown,x as multiSelectSearch,u as multiSelectValues};
+"use client";var e=`multiSelect_fmViY`,t=`multiSelect-label_asHZ1`,n=`multiSelect-label-floating_d4-Om`,r=`multiSelect-fieldset_Eo29l`,i=`multiSelect-fieldset-noNotch_8EL3U`,a=`multiSelect-fieldset-focused_ZC2P6`,o=`multiSelect-fieldset-error_CWzEo`,s=`multiSelect-fieldset-legend_p-6nh`,c=`multiSelect-fieldset-legend-active_M0L7g`,l=`multiSelect-control_zLb7t`,u=`multiSelect-values_k1Q8x`,d=`multiSelect-chip_xqe8Q`,f=`multiSelect-placeholder_Tjrmh`,p=`multiSelect-placeholder-shown_8v36t`,m=`multiSelectFadeIn_rOplX`,h=`multiSelect-placeholder-instant_r9-TD`,g=`multiSelect-clearButton_FKs0m`,_=`multiSelect-icon_ovLu-`,v=`multiSelect-icon-open_h8VAu`,y=`multiSelect-disabled_Hm8mv`,b=`multiSelect-panel_VX7gU`,x=`multiSelect-search_g4OHX`,S=`multiSelect-options_MGZCv`,C=`multiSelect-option_hbvPY`,w=`multiSelect-option-active_mSWFG`,T=`multiSelect-option-selected_mjPq-`,E=`multiSelect-option-disabled_qSgYz`,D=`multiSelect-optionCheck_-YKoj`,O=`multiSelect-optionLabel_CFZke`,k=`multiSelect-empty_MjABY`,A={multiSelect:e,"multiSelect-label":`multiSelect-label_asHZ1`,multiSelectLabel:t,"multiSelect-label-floating":`multiSelect-label-floating_d4-Om`,multiSelectLabelFloating:n,"multiSelect-fieldset":`multiSelect-fieldset_Eo29l`,multiSelectFieldset:r,"multiSelect-fieldset-noNotch":`multiSelect-fieldset-noNotch_8EL3U`,multiSelectFieldsetNoNotch:i,"multiSelect-fieldset-focused":`multiSelect-fieldset-focused_ZC2P6`,multiSelectFieldsetFocused:a,"multiSelect-fieldset-error":`multiSelect-fieldset-error_CWzEo`,multiSelectFieldsetError:o,"multiSelect-fieldset-legend":`multiSelect-fieldset-legend_p-6nh`,multiSelectFieldsetLegend:s,"multiSelect-fieldset-legend-active":`multiSelect-fieldset-legend-active_M0L7g`,multiSelectFieldsetLegendActive:c,"multiSelect-control":`multiSelect-control_zLb7t`,multiSelectControl:l,"multiSelect-values":`multiSelect-values_k1Q8x`,multiSelectValues:u,"multiSelect-chip":`multiSelect-chip_xqe8Q`,multiSelectChip:d,"multiSelect-placeholder":`multiSelect-placeholder_Tjrmh`,multiSelectPlaceholder:f,"multiSelect-placeholder-shown":`multiSelect-placeholder-shown_8v36t`,multiSelectPlaceholderShown:p,multiSelectFadeIn:m,"multiSelect-placeholder-instant":`multiSelect-placeholder-instant_r9-TD`,multiSelectPlaceholderInstant:h,"multiSelect-clearButton":`multiSelect-clearButton_FKs0m`,multiSelectClearButton:g,"multiSelect-icon":`multiSelect-icon_ovLu-`,multiSelectIcon:_,"multiSelect-icon-open":`multiSelect-icon-open_h8VAu`,multiSelectIconOpen:v,"multiSelect-disabled":`multiSelect-disabled_Hm8mv`,multiSelectDisabled:y,"multiSelect-panel":`multiSelect-panel_VX7gU`,multiSelectPanel:b,"multiSelect-search":`multiSelect-search_g4OHX`,multiSelectSearch:x,"multiSelect-options":`multiSelect-options_MGZCv`,multiSelectOptions:S,"multiSelect-option":`multiSelect-option_hbvPY`,multiSelectOption:C,"multiSelect-option-active":`multiSelect-option-active_mSWFG`,multiSelectOptionActive:w,"multiSelect-option-selected":`multiSelect-option-selected_mjPq-`,multiSelectOptionSelected:T,"multiSelect-option-disabled":`multiSelect-option-disabled_qSgYz`,multiSelectOptionDisabled:E,"multiSelect-optionCheck":`multiSelect-optionCheck_-YKoj`,multiSelectOptionCheck:D,"multiSelect-optionLabel":`multiSelect-optionLabel_CFZke`,multiSelectOptionLabel:O,"multiSelect-empty":`multiSelect-empty_MjABY`,multiSelectEmpty:k};export{A as default,e as multiSelect,d as multiSelectChip,g as multiSelectClearButton,l as multiSelectControl,y as multiSelectDisabled,k as multiSelectEmpty,m as multiSelectFadeIn,r as multiSelectFieldset,o as multiSelectFieldsetError,a as multiSelectFieldsetFocused,s as multiSelectFieldsetLegend,c as multiSelectFieldsetLegendActive,i as multiSelectFieldsetNoNotch,_ as multiSelectIcon,v as multiSelectIconOpen,t as multiSelectLabel,n as multiSelectLabelFloating,C as multiSelectOption,w as multiSelectOptionActive,D as multiSelectOptionCheck,E as multiSelectOptionDisabled,O as multiSelectOptionLabel,T as multiSelectOptionSelected,S as multiSelectOptions,b as multiSelectPanel,f as multiSelectPlaceholder,h as multiSelectPlaceholderInstant,p as multiSelectPlaceholderShown,x as multiSelectSearch,u as multiSelectValues};
 //# sourceMappingURL=multiSelect.module.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"multiSelect.module.mjs","names":[],"sources":["../../../../package/common/multiSelect/multiSelect.module.pcss"],"sourcesContent":[".multiSelect {\n  position: relative;\n  width: 100%;\n\n  /* Input's notch geometry, so both labels float to the same height in a form row. */\n  --multi-select-notch-height: 1.75em;\n\n  &-label {\n    position: absolute;\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    transition: all 0.3s;\n\n    &-floating {\n      top: 0;\n      bottom: auto;\n      left: 14px;\n      font-size: 0.8em;\n      color: var(--input-label-floating-color, var(--text-color));\n    }\n  }\n\n  /* The field's border lives here, not on the control: the legend has to cut the notch out of it. */\n  &-fieldset {\n    position: absolute;\n    inset: calc(var(--multi-select-notch-height) / -2) 0 0;\n    width: 100%;\n    margin: 0;\n    padding: 0 0 0 8px;\n    min-width: 0;\n    box-sizing: border-box;\n    border: 1px solid var(--border-color);\n    border-radius: var(--default-border-radius);\n    font-size: 0.8em;\n    pointer-events: none;\n    user-select: none;\n    transition: border-color 0.15s;\n\n    &-noNotch {\n      /* Resetting this everywhere would leave a label-less field shorter than its neighbours.\n         Only Firefox renders the reserved space as an overlap, so scope it there, as Input does. */\n      @supports (-moz-appearance: none) {\n        inset: 0;\n      }\n    }\n\n    &-focused {\n      border-color: var(--focus-border-color, var(--primary-color));\n    }\n\n    &-error {\n      border-color: var(--error-border-color, var(--error-color));\n    }\n\n    &-legend {\n      display: block;\n      max-width: 0;\n      padding: 0;\n      white-space: nowrap;\n      transition: max-width 0.2s;\n\n      &-active {\n        max-width: 300px;\n      }\n\n      span {\n        line-height: var(--multi-select-notch-height);\n        padding: 0 5px;\n        opacity: 0;\n      }\n\n      span:empty {\n        padding: 0.000001px;\n      }\n    }\n  }\n\n  &-control {\n    position: relative;\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    box-sizing: border-box;\n    width: 100%;\n\n    /* Input and Dropdown both resolve to this: a 1.25 line-height plus 14px of padding. Kept as\n       the formula rather than a flat 34px so it still matches them at another font size. */\n    min-height: var(--multi-select-min-height, calc(1.25em + 14px));\n    padding: 2px 8px;\n    border-radius: var(--default-border-radius);\n    background: var(--input-background, var(--background));\n    color: var(--text-color);\n    cursor: pointer;\n    -webkit-tap-highlight-color: transparent;\n\n    /* An outline here would draw a second, un-notched rectangle over the fieldset's border. */\n    &:focus-visible {\n      outline: none;\n\n      .multiSelect-fieldset {\n        border-color: var(--focus-border-color, var(--primary-color));\n      }\n    }\n  }\n\n  &-values {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    gap: 4px;\n    flex: 1;\n    min-width: 0;\n  }\n\n  /* At full size a Chip is nearly as tall as the field, so one row would set the height instead\n     of fitting inside it. Shrinking the font shrinks the text and the 1em remove icon together. */\n  &-chip {\n    max-width: 100%;\n    min-width: 0;\n    font-size: 0.8em;\n\n    /* FontAwesome's `vertical-align: -0.125em` makes the inline remove icon reserve 1.6px of\n       descender space: the difference between a 34px field and a 34.4px one. */\n    svg {\n      display: block;\n    }\n  }\n\n  /* Faded in on a delay rather than swapped in: the label takes 0.3s to float clear, and showing\n     the placeholder as it starts moving puts the two on top of each other. As Input does it. */\n  &-placeholder {\n    position: absolute;\n    left: 8px;\n    right: 1.75em;\n    top: 50%;\n    transform: translateY(-50%);\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    opacity: 0;\n    color: var(--input-label-resting-color, var(--text-light));\n    pointer-events: none;\n    user-select: none;\n\n    &-shown {\n      animation: 0.2s multiSelectFadeIn 0.3s forwards;\n    }\n\n    /* Nothing to wait for without a label. Must stay after `-shown` to win the specificity tie. */\n    &-instant {\n      animation-delay: 0s;\n    }\n  }\n\n  @keyframes multiSelectFadeIn {\n    from {\n      opacity: 0;\n    }\n\n    to {\n      opacity: 1;\n    }\n  }\n\n  &-clearButton {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    flex: none;\n    width: 22px;\n    height: 22px;\n    padding: 0;\n    border: none;\n    border-radius: 50%;\n    background: transparent;\n    color: var(--text-dark);\n    cursor: pointer;\n    -webkit-tap-highlight-color: transparent;\n\n    &:hover {\n      background: var(--background-accent);\n      color: var(--text-color);\n    }\n  }\n\n  &-icon {\n    flex: none;\n    color: var(--input-icon-color, var(--text-dark));\n    transition: transform 0.2s;\n\n    &-open {\n      transform: rotate(180deg);\n    }\n  }\n\n  &-disabled {\n    opacity: 0.5;\n\n    .multiSelect-control {\n      cursor: default;\n    }\n  }\n}\n\n/* Portalled, so a sibling of the field rather than a descendant, and not nestable above. */\n.multiSelect-panel {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  min-width: 180px;\n}\n\n.multiSelect-search {\n  flex: none;\n}\n\n.multiSelect-options {\n  display: flex;\n  flex-direction: column;\n  max-height: var(--multi-select-panel-height, 260px);\n  overflow-y: auto;\n}\n\n.multiSelect-option {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 10px;\n  border-radius: var(--default-border-radius);\n  color: var(--text-color);\n  cursor: pointer;\n  -webkit-tap-highlight-color: transparent;\n\n  &-active {\n    background: var(--background-accent);\n  }\n\n  &-selected {\n    color: var(--primary-color);\n    font-weight: 600;\n  }\n\n  &-disabled {\n    opacity: 0.45;\n    cursor: default;\n    pointer-events: none;\n  }\n}\n\n.multiSelect-optionCheck {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex: none;\n  width: 1em;\n  color: var(--primary-color);\n}\n\n.multiSelect-optionLabel {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.multiSelect-empty {\n  padding: 12px 10px;\n  color: var(--text-dark);\n  text-align: center;\n}\n"],"mappings":""}
+{"version":3,"file":"multiSelect.module.mjs","names":[],"sources":["../../../../package/common/multiSelect/multiSelect.module.pcss"],"sourcesContent":[".multiSelect {\n  position: relative;\n  width: 100%;\n\n  /* Input's notch geometry, so both labels float to the same height in a form row. */\n  --multi-select-notch-height: 1.75em;\n\n  &-label {\n    position: absolute;\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    transition: all 0.3s;\n\n    &-floating {\n      top: 0;\n      bottom: auto;\n      left: 14px;\n      font-size: 0.8em;\n      color: var(--input-label-floating-color, var(--text-color));\n    }\n  }\n\n  /* The field's border lives here, not on the control: the legend has to cut the notch out of it. */\n  &-fieldset {\n    position: absolute;\n    inset: calc(var(--multi-select-notch-height) / -2) 0 0;\n    width: 100%;\n    margin: 0;\n    padding: 0 0 0 8px;\n    min-width: 0;\n    box-sizing: border-box;\n    border: 1px solid var(--border-color);\n    border-radius: var(--default-border-radius);\n    font-size: 0.8em;\n    pointer-events: none;\n    user-select: none;\n    transition: border-color 0.15s;\n\n    &-noNotch {\n      /* Resetting this everywhere would leave a label-less field shorter than its neighbours.\n         Only Firefox renders the reserved space as an overlap, so scope it there, as Input does. */\n      @supports (-moz-appearance: none) {\n        inset: 0;\n      }\n    }\n\n    &-focused {\n      border-color: var(--focus-border-color, var(--primary-color));\n    }\n\n    &-error {\n      border-color: var(--error-border-color, var(--error-color));\n    }\n\n    &-legend {\n      display: block;\n      max-width: 0;\n      padding: 0;\n      white-space: nowrap;\n      transition: max-width 0.2s;\n\n      &-active {\n        max-width: 300px;\n      }\n\n      span {\n        line-height: var(--multi-select-notch-height);\n        padding: 0 5px;\n        opacity: 0;\n      }\n\n      span:empty {\n        padding: 0.000001px;\n      }\n    }\n  }\n\n  &-control {\n    position: relative;\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    box-sizing: border-box;\n    width: 100%;\n\n    /* Input and Dropdown both resolve to this: a 1.25 line-height plus 14px of padding. Kept as\n       the formula rather than a flat 34px so it still matches them at another font size. */\n    min-height: var(--multi-select-min-height, calc(1.25em + 14px));\n    padding: 2px 8px;\n    border-radius: var(--default-border-radius);\n    background: var(--input-background, var(--background));\n    color: var(--text-color);\n    cursor: pointer;\n    -webkit-tap-highlight-color: transparent;\n\n    /* An outline here would draw a second, un-notched rectangle over the fieldset's border. */\n    &:focus-visible {\n      outline: none;\n\n      .multiSelect-fieldset {\n        border-color: var(--focus-border-color, var(--primary-color));\n      }\n    }\n  }\n\n  &-values {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    gap: 4px;\n    flex: 1;\n    min-width: 0;\n  }\n\n  /* At full size a Chip is nearly as tall as the field, so one row would set the height instead\n     of fitting inside it. Shrinking the font shrinks the text and the 1em remove icon together. */\n  &-chip {\n    max-width: 100%;\n    min-width: 0;\n    font-size: 0.8em;\n\n    /* FontAwesome's `vertical-align: -0.125em` makes the inline remove icon reserve 1.6px of\n       descender space: the difference between a 34px field and a 34.4px one. */\n    svg {\n      display: block;\n    }\n  }\n\n  /* Faded in on a delay rather than swapped in: the label takes 0.3s to float clear, and showing\n     the placeholder as it starts moving puts the two on top of each other. As Input does it. */\n  &-placeholder {\n    position: absolute;\n    left: 8px;\n    right: 1.75em;\n    top: 50%;\n    transform: translateY(-50%);\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    opacity: 0;\n    color: var(--input-label-resting-color, var(--text-light));\n    pointer-events: none;\n    user-select: none;\n\n    &-shown {\n      animation: 0.2s multiSelectFadeIn 0.3s forwards;\n    }\n\n    /* Nothing to wait for without a label. Must stay after `-shown` to win the specificity tie. */\n    &-instant {\n      animation-delay: 0s;\n    }\n  }\n\n  @keyframes multiSelectFadeIn {\n    from {\n      opacity: 0;\n    }\n\n    to {\n      opacity: 1;\n    }\n  }\n\n  &-clearButton {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    flex: none;\n    width: 22px;\n    height: 22px;\n    padding: 0;\n    border: none;\n    border-radius: 50%;\n    background: transparent;\n    color: var(--text-dark);\n    cursor: pointer;\n    -webkit-tap-highlight-color: transparent;\n\n    &:hover {\n      background: var(--background-accent);\n      color: var(--text-color);\n    }\n  }\n\n  &-icon {\n    flex: none;\n    color: var(--input-icon-color, var(--text-dark));\n    transition: transform 0.2s;\n\n    &-open {\n      transform: rotate(180deg);\n    }\n  }\n\n  &-disabled {\n    opacity: 0.5;\n\n    .multiSelect-control {\n      cursor: default;\n    }\n  }\n}\n\n/* Portalled, so a sibling of the field rather than a descendant, and not nestable above. */\n.multiSelect-panel {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  min-width: 180px;\n}\n\n.multiSelect-search {\n  flex: none;\n}\n\n.multiSelect-options {\n  display: flex;\n  flex-direction: column;\n  max-height: var(--multi-select-panel-height, 260px);\n  overflow-y: auto;\n}\n\n.multiSelect-option {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 10px;\n  border-radius: var(--default-border-radius);\n  color: var(--text-color);\n  cursor: pointer;\n  -webkit-tap-highlight-color: transparent;\n\n  &-active {\n    background: var(--background-accent);\n  }\n\n  &-selected {\n    color: var(--primary-color);\n    font-weight: 600;\n  }\n\n  &-disabled {\n    opacity: 0.45;\n    cursor: default;\n    pointer-events: none;\n  }\n}\n\n.multiSelect-optionCheck {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex: none;\n  width: 1em;\n  color: var(--primary-color);\n}\n\n.multiSelect-optionLabel {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.multiSelect-empty {\n  padding: 12px 10px;\n  color: var(--text-dark);\n  text-align: center;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .multiSelect-label,\n  .multiSelect-icon {\n    transition: none;\n  }\n}\n"],"mappings":""}

package/dist/esm/common/numberInput/index.mjs

@@ -1,2 +1,2 @@
-import e from"./numberInput.mjs";var t=e;export{t as default};
+"use client";import e from"./numberInput.mjs";var t=e;export{t as default};
 //# sourceMappingURL=index.mjs.map

package/dist/esm/common/numberInput/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../../../../package/common/numberInput/index.ts"],"sourcesContent":["import NumberInput from './numberInput';\n\nexport type { NumberInputProps, NumberInputArrowsLayout } from './numberInput.types';\nexport default NumberInput;\n"],"mappings":"iCAGA,IAAA,EAAe"}
+{"version":3,"file":"index.mjs","names":[],"sources":["../../../../package/common/numberInput/index.ts"],"sourcesContent":["import NumberInput from './numberInput';\n\nexport type { NumberInputProps, NumberInputArrowsLayout } from './numberInput.types';\nexport default NumberInput;\n"],"mappings":"8CAGA,IAAA,EAAe"}

package/dist/esm/common/numberInput/numberInput.mjs

@@ -1,2 +1,2 @@
-import{useComponentDefaults as e}from"../configProvider/useComponentDefaults.mjs";import{useLabels as t}from"../configProvider/useLabels.mjs";import{ButtonSize as n}from"../button/button.types.mjs";import r from"../button/button.mjs";import i from"../hooks/useCoarsePointer.mjs";import ee from"../buttonGroup/buttonGroup.mjs";import a from"../input/input.mjs";import o from"./numberInput.module.mjs";import te from"./useStepRepeat.mjs";import s from"react";import c from"classnames";import{FontAwesomeIcon as l}from"@fortawesome/react-fontawesome";import{faChevronDown as ne,faChevronUp as re,faMinus as ie,faPlus as ae}from"@fortawesome/free-solid-svg-icons";import{jsx as u,jsxs as d}from"react/jsx-runtime";import{NumericFormat as oe}from"react-number-format";var se={increase:`Increase`,decrease:`Decrease`};function f({label:e,disabled:t,direction:n,onStart:r,onStop:i}){return{tabIndex:-1,disabled:t,"aria-label":e,onPointerDown:e=>{(e.button===0||e.pointerType!==`mouse`)&&(e.preventDefault(),r(n,e.shiftKey?10:1))},onPointerUp:i,onPointerCancel:i,onContextMenu:e=>e.preventDefault()}}function p(e){return u(`button`,{type:`button`,...f(e),className:c(o.arrowBtn,e.className),style:e.style,children:u(l,{icon:e.icon,"aria-hidden":`true`})})}function m(e){let{disabled:t,...i}=f(e);return u(r,{...i,className:c(o.splitBtn,e.className),style:e.style,size:n.Icon,disabled:t,icon:e.icon})}function h(n){let r=s.useRef(void 0),{value:l,onChange:f,formValidator:h,label:ce,error:g,className:_,style:v,classNames:y,styles:b,allowNegative:x=!1,decimalSeparator:S,thousandSeparator:C,prefix:le,suffix:ue,decimalScale:w,fixedDecimalScale:de=!0,placeholder:fe,sign:T,showArrows:pe=!1,step:E=1,min:D,max:O,arrowsLayout:k=`auto`,labels:me,readOnly:A=!1,disabled:j=!1,isRequired:he=!1,onKeyDown:M,...ge}=e(`NumberInput`,n),N=t(`NumberInput`,me,se),[,P]=s.useState(0);s.useEffect(()=>{if(r.current=h,!h)return;let e=()=>P(e=>e+1);return h.registerOnUpdateListener(e),()=>{h.removeOnUpdateListener(e)}},[h]);let F=he||!!h?.validators.find(e=>e.validatorId===`required`),I=h==null?l:h.value,L=T!=null&&I!=null?Math.abs(Number(I)):I,R=L==null?``:String(L);function z(e){let t=e;t!==void 0&&(T===`-`&&(t=-Math.abs(t)),T===`+`&&(t=Math.abs(t))),h?.set(t??null),f?.(t)}function B(e){let t=e;return!x&&T!==`-`&&(t=Math.max(0,t)),T===`-`&&(t=Math.min(0,t)),D!==void 0&&(t=Math.max(D,t)),O!==void 0&&(t=Math.min(O,t)),t}let V=I!=null&&I!==``?Number(I):0;function H(){if(A||j||I==null||I===``)return;let e=Number(I);if(!Number.isFinite(e))return;let t=B(e);t!==e&&z(t)}function U(e){if(A||j)return!1;let t=B(V+e);return t!==V&&(z(t),!0)}let{start:_e,stop:ve}=te(e=>U(e*E));function ye(e){if(e.key===`Enter`){H(),M?.(e);return}if(!G){M?.(e);return}if(e.key===`ArrowUp`){e.preventDefault(),U(e.shiftKey?E*10:E);return}if(e.key===`ArrowDown`){e.preventDefault(),U(e.shiftKey?-E*10:-E);return}M?.(e)}let be=T===`-`?`-`:T===`+`?`+`:le,W=i(),G=pe&&!A&&!j,K=k===`split`||k===`auto`&&W,q=B(V+E)!==V,J=B(V-E)!==V,Y={onStart:_e,onStop:ve},X=G&&!K?d(`div`,{className:c(o.arrows,y?.arrows),style:b?.arrows,children:[u(p,{className:y?.increaseButton,style:b?.increaseButton,label:N.increase,icon:re,disabled:!q,direction:1,...Y}),u(p,{className:y?.decreaseButton,style:b?.decreaseButton,label:N.decrease,icon:ne,disabled:!J,direction:-1,...Y})]}):null,xe=G?{role:`spinbutton`,"aria-valuenow":Number.isFinite(V)?V:void 0,"aria-valuemin":D,"aria-valuemax":O,"aria-valuetext":R||void 0}:{},Z=h?!h.touched||!h.hasError():!g,Q=G&&K,$=u(a,{label:ce,className:c(o.numberInput,{[o.numberInputSplit]:Q},Q?void 0:_,Q?void 0:y?.root,y?.input),style:{...Q?void 0:v,...Q?void 0:b?.root,...b?.input},value:R,onChange:()=>{},formValidator:null,isRequired:F,onBlur:()=>{H(),r.current&&(r.current.touched=!0)},isValid:Z,errorMessage:h?h.touched?h.getCurrentErrorMessage()??``:``:g??``,placeholder:fe,readOnly:A,disabled:j,suffix:X,classNames:X?{suffix:o.arrowSuffix}:void 0,inputMode:w===0?`numeric`:`decimal`,customInput:u(oe,{onValueChange:e=>z(e.floatValue),allowNegative:T==null&&x,decimalSeparator:S,thousandSeparator:C,decimalScale:w,fixedDecimalScale:de,prefix:be,suffix:ue,onKeyDown:ye,...xe,...ge})});return Q?d(ee,{className:c(o.split,{[o.splitInvalid]:!Z},_,y?.root),style:{...v,...b?.root},children:[u(m,{className:y?.decreaseButton,style:b?.decreaseButton,label:N.decrease,icon:ie,disabled:!J,direction:-1,...Y}),$,u(m,{className:y?.increaseButton,style:b?.increaseButton,label:N.increase,icon:ae,disabled:!q,direction:1,...Y})]}):$}export{h as default};
+"use client";import{useComponentDefaults as e}from"../configProvider/useComponentDefaults.mjs";import{useLabels as t}from"../configProvider/useLabels.mjs";import{ButtonSize as n}from"../button/button.types.mjs";import r from"../button/button.mjs";import i from"../hooks/useCoarsePointer.mjs";import ee from"../buttonGroup/buttonGroup.mjs";import a from"../input/input.mjs";import o from"./numberInput.module.mjs";import te from"./useStepRepeat.mjs";import s from"react";import c from"classnames";import{FontAwesomeIcon as l}from"@fortawesome/react-fontawesome";import{faChevronDown as ne,faChevronUp as re,faMinus as ie,faPlus as ae}from"@fortawesome/free-solid-svg-icons";import{jsx as u,jsxs as d}from"react/jsx-runtime";import{NumericFormat as oe}from"react-number-format";var se={increase:`Increase`,decrease:`Decrease`};function f({label:e,disabled:t,direction:n,onStart:r,onStop:i}){return{tabIndex:-1,disabled:t,"aria-label":e,onPointerDown:e=>{(e.button===0||e.pointerType!==`mouse`)&&(e.preventDefault(),r(n,e.shiftKey?10:1))},onPointerUp:i,onPointerCancel:i,onContextMenu:e=>e.preventDefault()}}function p(e){return u(`button`,{type:`button`,...f(e),className:c(o.arrowBtn,e.className),style:e.style,children:u(l,{icon:e.icon,"aria-hidden":`true`})})}function m(e){let{disabled:t,...i}=f(e);return u(r,{...i,className:c(o.splitBtn,e.className),style:e.style,size:n.Icon,disabled:t,icon:e.icon})}function h(n){let r=s.useRef(void 0),{value:l,onChange:f,formValidator:h,label:ce,error:g,className:_,style:v,classNames:y,styles:b,allowNegative:x=!1,decimalSeparator:S,thousandSeparator:le,prefix:ue,suffix:de,decimalScale:C,fixedDecimalScale:fe=!0,placeholder:pe,sign:w,showArrows:me=!1,step:T=1,min:E,max:D,arrowsLayout:O=`auto`,labels:he,readOnly:k=!1,disabled:A=!1,isRequired:ge=!1,onKeyDown:j,ref:_e,...M}=e(`NumberInput`,n),N=t(`NumberInput`,he,se),[,P]=s.useState(0);s.useEffect(()=>{if(r.current=h,!h)return;let e=()=>P(e=>e+1);return h.registerOnUpdateListener(e),()=>{h.removeOnUpdateListener(e)}},[h]);let F=ge||!!h?.validators.find(e=>e.validatorId===`required`),I=h==null?l:h.value,L=w!=null&&I!=null?Math.abs(Number(I)):I,R=L==null?``:String(L);function z(e){let t=e;t!==void 0&&(w===`-`&&(t=-Math.abs(t)),w===`+`&&(t=Math.abs(t))),h?.set(t??null),f?.(t)}function B(e){let t=e;return!x&&w!==`-`&&(t=Math.max(0,t)),w===`-`&&(t=Math.min(0,t)),E!==void 0&&(t=Math.max(E,t)),D!==void 0&&(t=Math.min(D,t)),t}let V=I!=null&&I!==``?Number(I):0;function H(){if(k||A||I==null||I===``)return;let e=Number(I);if(!Number.isFinite(e))return;let t=B(e);t!==e&&z(t)}function U(e){if(k||A)return!1;let t=B(V+e);return t!==V&&(z(t),!0)}let{start:ve,stop:ye}=te(e=>U(e*T));function be(e){if(e.key===`Enter`){H(),j?.(e);return}if(!G){j?.(e);return}if(e.key===`ArrowUp`){e.preventDefault(),U(e.shiftKey?T*10:T);return}if(e.key===`ArrowDown`){e.preventDefault(),U(e.shiftKey?-T*10:-T);return}j?.(e)}let W=w===`-`?`-`:w===`+`?`+`:ue,xe=i(),G=me&&!k&&!A,K=O===`split`||O===`auto`&&xe,q=B(V+T)!==V,J=B(V-T)!==V,Y={onStart:ve,onStop:ye},X=G&&!K?d(`div`,{className:c(o.arrows,y?.arrows),style:b?.arrows,children:[u(p,{className:y?.increaseButton,style:b?.increaseButton,label:N.increase,icon:re,disabled:!q,direction:1,...Y}),u(p,{className:y?.decreaseButton,style:b?.decreaseButton,label:N.decrease,icon:ne,disabled:!J,direction:-1,...Y})]}):null,Se=G?{role:`spinbutton`,"aria-valuenow":Number.isFinite(V)?V:void 0,"aria-valuemin":E,"aria-valuemax":D,"aria-valuetext":R||void 0}:{},Z=h?!h.touched||!h.hasError():!g,Q=G&&K,$=u(a,{label:ce,className:c(o.numberInput,{[o.numberInputSplit]:Q},Q?void 0:_,Q?void 0:y?.root,y?.input),style:{...Q?void 0:v,...Q?void 0:b?.root,...b?.input},value:R,onChange:()=>{},formValidator:null,isRequired:F,onBlur:()=>{H(),r.current&&(r.current.touched=!0)},isValid:Z,errorMessage:h?h.touched?h.getCurrentErrorMessage()??``:``:g??``,placeholder:pe,readOnly:k,disabled:A,suffix:X,classNames:X?{suffix:o.arrowSuffix}:void 0,inputMode:C===0?`numeric`:`decimal`,customInput:u(oe,{onValueChange:e=>z(e.floatValue),allowNegative:w==null&&x,decimalSeparator:S,thousandSeparator:le,decimalScale:C,fixedDecimalScale:fe,prefix:W,suffix:de,onKeyDown:be,getInputRef:_e,...Se,...M})});return Q?d(ee,{className:c(o.split,{[o.splitInvalid]:!Z},_,y?.root),style:{...v,...b?.root},children:[u(m,{className:y?.decreaseButton,style:b?.decreaseButton,label:N.decrease,icon:ie,disabled:!J,direction:-1,...Y}),$,u(m,{className:y?.increaseButton,style:b?.increaseButton,label:N.increase,icon:ae,disabled:!q,direction:1,...Y})]}):$}export{h as default};
 //# sourceMappingURL=numberInput.mjs.map