npm - @ahrowe/ui - Versions diffs - 0.35.0 → 0.37.0 - Mend

@ahrowe/ui 0.35.0 → 0.37.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (783) hide show

package/dist/esm/common/dropdown/dropdown.mjs CHANGED Viewed

@@ -1,2 +1,2 @@
-"use client";import{useComponentDefaults as e}from"../configProvider/useComponentDefaults.mjs";import{usePresentationDefault as t}from"../configProvider/usePresentationDefault.mjs";import{Presentation as n}from"../configProvider/presentation.types.mjs";import ee from"../styles/sheet.module.mjs";import{PopoverAlign as te,PopoverPlacement as ne}from"../popover/popover.types.mjs";import r from"../hooks/useSheet.mjs";import re from"../popover/popover.mjs";import i from"../tooltip/tooltip.mjs";import ie from"../infiniteBlock/infiniteBlock.mjs";import a from"./dropdown.module.mjs";import{useEffect as o,useLayoutEffect as s,useRef as c,useState as l}from"react";import u from"classnames";import{FontAwesomeIcon as ae}from"@fortawesome/react-fontawesome";import{faChevronDown as oe}from"@fortawesome/free-solid-svg-icons";import{jsx as d,jsxs as f}from"react/jsx-runtime";import se from"downshift";function p(p){let{errorMessage:m=``,className:ce=``,style:le,label:h=``,value:ue=``,isValid:de=!0,tabIndex:g=0,isRequired:_=!1,customProps:v={},isRow:fe=!1,disabled:y=!1,readOnly:b=!1,onScroll:pe=()=>Promise.resolve(),onClick:x,onChange:S,onFocus:me=null,onBlur:he=null,onMouseEnter:ge=null,onMouseLeave:_e=null,dropdownLabel:ve,isDropdownListWider:C=!1,formValidator:w=null,classNames:T,styles:E,items:D=[],useMatLabelStyle:O=!0,alwaysFloatLabel:k=!1,placeholder:A=``,plainStyle:j=!1,scrollToSelected:M=!1,presentation:N,reactRef:P,...F}=e(`Dropdown`,p),[I,L]=l(!1),[ye,R]=l(!1),[,be]=l(0),z=c(w),B=c(null),V=c(null),[H,xe]=l(!1),Se=t(),U=N??Se??n.Default,{isSheet:W}=r(U);s(()=>{let e=B.current,t=V.current;H&&!W&&e&&t&&(t.style.fontSize=window.getComputedStyle(e).fontSize)},[H,W]),o(()=>{if(z.current=w,!z.current)return;z.current.label=h??``,z.current.validate();let e=()=>be(e=>e+1);return z.current.registerOnUpdateListener(e),()=>z.current?.removeOnUpdateListener(e)},[w,h]);let Ce=e=>{R(!0),ge?.(e)},we=e=>{R(!1),_e?.(e)},Te=e=>{L(!0),me?.(e)},Ee=e=>{z.current&&(z.current.touched=!0),L(!1),he?.(e)},De=()=>w?w.touched&&w.hasError():!de||!!m,G=()=>!!(_||w?.validators.find(e=>e.validatorId===`required`)),K=e=>{w?(w.set(e),S?.(w.value,v)):S?.(e,v)},q=ve,J=w?w.value:ue,Y=De();D.forEach(e=>{e.key===J&&(q=e.label)});let X=q||J,Z=X==null||typeof X==`string`&&X.trim()===``,Q=G()?d(`span`,{className:a.requiredMark,children:`*`}):null,Oe=h&&G()?`${h} *`:h,$=I&&!b;return f(`div`,{...F,className:u(ce,T?.root,a.dropdownLabel,a.dropdown,{[a.dropdownLabelColumn]:!fe}),style:{...le,...E?.root},onMouseEnter:Ce,onMouseLeave:we,children:[d(se,{...b?{isOpen:!1}:{},onChange:e=>K((e||{key:``}).key),itemToString:e=>e?String(e.key):``,selectedItem:D.find(e=>e.key===J)??null,onStateChange:e=>{typeof e.isOpen==`boolean`&&xe(e.isOpen)},stateReducer:(e,t)=>M&&Object.prototype.hasOwnProperty.call(t,`isOpen`)?{...t,highlightedIndex:t.isOpen?D.indexOf(e.selectedItem):null}:t,children:({getItemProps:e,getMenuProps:t,getToggleButtonProps:n,closeMenu:r,isOpen:i,selectedItem:o,highlightedIndex:s,setHighlightedIndex:c})=>d(`div`,{children:d(re,{isOpen:!y&&!b&&i,onOpenChange:e=>{e||r()},placement:ne.Bottom,align:te.Start,offset:0,withArrow:!1,constrainWidth:!1,width:`trigger`,closeOnTriggerClick:!1,focusOnOpen:!1,presentation:U,classNames:{panel:a.dropdownPanel},content:d(`div`,{...t({ref:e=>{V.current=e},"aria-label":h||A||void 0},{suppressRefError:!0}),className:u(!W&&a.dropdownInputListAnim,{[a.dropdownInputListAnimWider]:C&&!W}),children:d(ie,{onScroll:pe,className:u(a.dropdownInputList,W&&ee.sheetScroll,T?.list),style:E?.list,setHighlightedIndex:c,children:D.map((t,n)=>d(`div`,{...e({index:n,item:t,disabled:!!t.disabled}),style:E?.option,className:u(a.dropdownInputListItem,T?.option,{[a.dropdownInputListItemActive]:s===n,[a.dropdownInputListItemSelected]:o===t,[a.dropdownInputListItemDisabled]:!!t.disabled}),children:t.label},t.key))})}),children:f(`div`,{ref:B,onFocus:Te,onBlur:Ee,className:u(a.dropdownInput,{[a.dropdownInputPlain]:j,[a.dropdownInputReadOnly]:b&&!y},T?.field),style:E?.field,children:[d(`button`,{tabIndex:g,type:`button`,disabled:y,"aria-readonly":b||void 0,className:u(a.dropdownInputButton,{[a.dropdownInputButtonDisabled]:y,[a.dropdownInputButtonReadOnly]:b&&!y},T?.control),style:{...C?{padding:`6px`,border:`none`}:{},...E?.control},...n(),onClick:e=>{n().onClick?.(e),x?.(e)},ref:P,children:Z?`\xA0`:X}),d(`button`,{type:`button`,tabIndex:-1,disabled:y,className:u(a.dropdownInputButtonIcon,T?.icon),style:E?.icon,...n(),onMouseDown:e=>e.preventDefault(),onClick:e=>{n().onClick?.(e),x?.(e)},children:!y&&!b&&d(ae,{icon:oe,className:u(a.dropdownInputButtonIconArrow,{[a.dropdownInputButtonIconArrowOpen]:i})})}),d(`fieldset`,{className:u(a.dropdownFieldset,{[a.dropdownBorderPlain]:j,[a.dropdownBorderFocused]:$,[a.dropdownBorderInvalid]:Y,[a.dropdownBorderError]:Y}),children:d(`legend`,{className:u(a.dropdownFieldsetLegend,{[a.dropdownFieldsetLegendActive]:O&&(k||$||!Z)}),children:d(`span`,{children:Oe})})}),O&&h&&f(`div`,{className:u(a.dropdownMatLabel,{[a.dropdownMatLabelFloating]:k||$||!Z},T?.label),style:E?.label,children:[h,Q]}),O&&A&&d(`div`,{className:u(a.dropdownPlaceholder,$&&!q&&a.dropdownPlaceholderShown),children:A})]})})})}),h&&!O&&f(`div`,{className:u(a.dropdownLabelText,T?.label),style:E?.label,children:[h,Q]}),d(i,{variant:`error`,message:w?w.getCurrentErrorMessage():m||``,isVisible:Y&&(I||ye)})]})}export{p as default};
+"use client";import{useComponentDefaults as e}from"../configProvider/useComponentDefaults.mjs";import{usePresentationDefault as t}from"../configProvider/usePresentationDefault.mjs";import{Presentation as n}from"../configProvider/presentation.types.mjs";import r from"../loading/spinnerLoading/index.mjs";import i from"../styles/sheet.module.mjs";import{PopoverAlign as ee,PopoverPlacement as te}from"../popover/popover.types.mjs";import ne from"../hooks/useSheet.mjs";import re from"../popover/popover.mjs";import ie from"../tooltip/tooltip.mjs";import{useInfiniteScroll as ae}from"../infiniteBlock/useInfiniteScroll.mjs";import{edgeIndex as oe,nextIndex as se,scrollOptionIntoView as ce}from"../utils/listNavigation.mjs";import a from"./dropdown.module.mjs";import{useEffect as o,useId as le,useLayoutEffect as ue,useRef as s,useState as c}from"react";import l from"classnames";import{FontAwesomeIcon as de}from"@fortawesome/react-fontawesome";import{faChevronDown as fe}from"@fortawesome/free-solid-svg-icons";import{jsx as u,jsxs as d}from"react/jsx-runtime";var pe=500;function f(f){let{errorMessage:p=``,className:me=``,style:he,label:m=``,value:ge=``,isValid:_e=!0,tabIndex:ve=0,isRequired:ye=!1,customProps:h={},isRow:be=!1,disabled:g=!1,readOnly:_=!1,onScroll:xe=()=>Promise.resolve(),onClick:v,onChange:y,onFocus:Se=null,onBlur:Ce=null,onMouseEnter:we=null,onMouseLeave:Te=null,dropdownLabel:Ee,isDropdownListWider:b=!1,formValidator:x=null,classNames:S,styles:C,items:w=[],useMatLabelStyle:T=!0,alwaysFloatLabel:E=!1,placeholder:D=``,plainStyle:O=!1,scrollToSelected:De=!1,presentation:Oe,reactRef:ke,...Ae}=e(`Dropdown`,f),[je,Me]=c(!1),[Ne,Pe]=c(!1),[,Fe]=c(0),k=s(x),A=s(null),j=s(null),M=s(null),[Ie,Le]=c(!1),[N,P]=c(null),F=s({buffer:``,at:0}),I=le(),L=`${I}-listbox`,R=`${I}-label`,z=e=>`${I}-option-${e}`,B=!g&&!_,V=Ie&&B,{isLoading:Re,sentinelRef:ze}=ae(M,xe,!1),Be=t(),H=Oe??Be??n.Default,{isSheet:U}=ne(H);ue(()=>{let e=A.current,t=j.current;V&&!U&&e&&t&&(t.style.fontSize=window.getComputedStyle(e).fontSize)},[V,U]),o(()=>{if(k.current=x,!k.current)return;k.current.label=m??``,k.current.validate();let e=()=>Fe(e=>e+1);return k.current.registerOnUpdateListener(e),()=>k.current?.removeOnUpdateListener(e)},[x,m]);let W=x?x.value:ge,G=w.findIndex(e=>e.key===W);o(()=>{V&&N!==null&&ce(M.current,document.getElementById(z(N)))},[V,N]);let Ve=e=>{Pe(!0),we?.(e)},He=e=>{Pe(!1),Te?.(e)},Ue=e=>{Me(!0),Se?.(e)},We=e=>{k.current&&(k.current.touched=!0),Me(!1),Ce?.(e)},Ge=()=>x?x.touched&&x.hasError():!_e||!!p,K=()=>!!(ye||x?.validators.find(e=>e.validatorId===`required`)),Ke=e=>{x?(x.set(e),y?.(x.value,h)):y?.(e,h)};function q(e){(!e||B)&&(Le(e),e?P(De&&G>=0?G:null):F.current={buffer:``,at:0})}function J(e){e.disabled||(Ke(e.key),q(!1))}let qe={isDisabled:e=>!!w[e].disabled};function Je(e){let t=Date.now(),n=t-F.current.at>pe?e:F.current.buffer+e;F.current={buffer:n,at:t};let r=n.toLowerCase(),i=w.findIndex(e=>!e.disabled&&typeof e.label==`string`&&e.label.toLowerCase().startsWith(r));i!==-1&&(V?P(i):J(w[i]))}function Ye(e){if(B){if(!V){e.key===`ArrowDown`||e.key===`ArrowUp`||e.key===`Enter`||e.key===` `?(e.preventDefault(),q(!0)):e.key.length===1&&Je(e.key);return}if(e.key===`ArrowDown`||e.key===`ArrowUp`)e.preventDefault(),P(se(N,e.key===`ArrowDown`?1:-1,w.length,qe));else if(e.key===`Home`||e.key===`End`)e.preventDefault(),P(oe(e.key===`Home`?`first`:`last`,w.length,qe));else if(e.key===`Enter`||e.key===` `){e.preventDefault();let t=N===null?void 0:w[N];t?J(t):q(!1)}else e.key===`Escape`||e.key===`Tab`?q(!1):e.key.length===1&&Je(e.key)}}let Y=Ee,X=Ge();w.forEach(e=>{e.key===W&&(Y=e.label)});let Z=Y||W,Q=Z==null||typeof Z==`string`&&Z.trim()===``,Xe=K()?u(`span`,{className:a.requiredMark,children:`*`}):null,Ze=m&&K()?`${m} *`:m,$=je&&!_;return d(`div`,{...Ae,className:l(me,S?.root,a.dropdownLabel,a.dropdown,{[a.dropdownLabelColumn]:!be}),style:{...he,...C?.root},onMouseEnter:Ve,onMouseLeave:He,children:[u(`div`,{children:u(re,{isOpen:V,onOpenChange:q,disabled:!B,placement:te.Bottom,align:ee.Start,offset:0,withArrow:!1,constrainWidth:!1,width:`trigger`,focusOnOpen:!1,presentation:H,classNames:{panel:a.dropdownPanel},content:u(`div`,{ref:j,className:l(!U&&a.dropdownInputListAnim,{[a.dropdownInputListAnimWider]:b&&!U}),children:d(`div`,{ref:M,id:L,role:`listbox`,"aria-label":m||D||void 0,className:l(a.dropdownInputList,U&&i.sheetScroll,S?.list),style:C?.list,children:[w.map((e,t)=>u(`div`,{id:z(t),role:`option`,"aria-selected":e.key===W,"aria-disabled":e.disabled||void 0,style:C?.option,className:l(a.dropdownInputListItem,S?.option,{[a.dropdownInputListItemActive]:N===t,[a.dropdownInputListItemSelected]:e.key===W,[a.dropdownInputListItemDisabled]:!!e.disabled}),onMouseDown:e=>e.preventDefault(),onMouseEnter:()=>P(t),onClick:()=>J(e),children:e.label},e.key)),u(`div`,{ref:ze,className:a.dropdownSentinel,"aria-hidden":`true`}),Re&&u(`div`,{className:a.dropdownLoadMore,"aria-hidden":`true`,children:u(r,{className:a.dropdownLoadMoreSpinner})})]})}),children:d(`div`,{ref:A,onFocus:Ue,onBlur:We,className:l(a.dropdownInput,{[a.dropdownInputPlain]:O,[a.dropdownInputReadOnly]:_&&!g},S?.field),style:C?.field,children:[u(`button`,{tabIndex:ve,type:`button`,disabled:g,role:`combobox`,"aria-haspopup":`listbox`,"aria-expanded":V,"aria-controls":L,"aria-activedescendant":V&&N!==null?z(N):void 0,"aria-labelledby":m?R:void 0,"aria-label":m?void 0:D||void 0,"aria-readonly":_||void 0,className:l(a.dropdownInputButton,{[a.dropdownInputButtonDisabled]:g,[a.dropdownInputButtonReadOnly]:_&&!g},S?.control),style:{...b?{padding:`6px`,border:`none`}:{},...C?.control},onKeyDown:Ye,onClick:v,ref:ke,children:Q?`\xA0`:Z}),u(`button`,{type:`button`,tabIndex:-1,disabled:g,"aria-hidden":`true`,className:l(a.dropdownInputButtonIcon,S?.icon),style:C?.icon,onMouseDown:e=>e.preventDefault(),onClick:v,children:!g&&!_&&u(de,{icon:fe,className:l(a.dropdownInputButtonIconArrow,{[a.dropdownInputButtonIconArrowOpen]:V})})}),u(`fieldset`,{className:l(a.dropdownFieldset,{[a.dropdownBorderPlain]:O,[a.dropdownBorderFocused]:$,[a.dropdownBorderInvalid]:X,[a.dropdownBorderError]:X}),children:u(`legend`,{className:l(a.dropdownFieldsetLegend,{[a.dropdownFieldsetLegendActive]:T&&(E||$||!Q)}),children:u(`span`,{children:Ze})})}),T&&m&&d(`div`,{id:R,className:l(a.dropdownMatLabel,{[a.dropdownMatLabelFloating]:E||$||!Q},S?.label),style:C?.label,children:[m,Xe]}),T&&D&&u(`div`,{className:l(a.dropdownPlaceholder,$&&!Y&&a.dropdownPlaceholderShown),children:D})]})})}),m&&!T&&d(`div`,{id:R,className:l(a.dropdownLabelText,S?.label),style:C?.label,children:[m,Xe]}),u(ie,{variant:`error`,message:x?x.getCurrentErrorMessage():p||``,isVisible:X&&(je||Ne)})]})}export{f as default};
 //# sourceMappingURL=dropdown.mjs.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"dropdown.mjs","names":[],"sources":["../../../../package/common/dropdown/dropdown.tsx"],"sourcesContent":["import React, { useState, useEffect, useLayoutEffect, useRef } from 'react';\nimport cx from 'classnames';\nimport InfiniteBlock from 'components/common/infiniteBlock';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { faChevronDown as dropdownIcon } from '@fortawesome/free-solid-svg-icons';\nimport Downshift, { StateChangeOptions, DownshiftState } from 'downshift';\nimport Tooltip from 'components/common/tooltip';\n\nimport Popover from '../popover';\nimport { PopoverAlign, PopoverPlacement } from '../popover/popover.types';\nimport { useComponentDefaults, usePresentationDefault } from '../configProvider';\nimport { useSheet } from '../hooks/useSheet';\nimport { Presentation } from '../configProvider/presentation.types';\nimport styles from './dropdown.module.pcss';\nimport sheetStyles from '../styles/sheet.module.pcss';\nimport type { DropdownProps, DropdownItem } from './dropdown.types';\n\nfunction Dropdown(props: DropdownProps) {\n const {\n errorMessage = '',\n className = '',\n style,\n label = '',\n value = '',\n isValid = true,\n tabIndex = 0,\n isRequired = false,\n customProps = {},\n isRow = false,\n disabled = false,\n readOnly = false,\n onScroll = () => Promise.resolve(),\n onClick,\n onChange,\n onFocus: onFocusProp = null,\n onBlur: onBlurProp = null,\n onMouseEnter: onMouseEnterProp = null,\n onMouseLeave: onMouseLeaveProp = null,\n dropdownLabel: dropdownLabelProp,\n isDropdownListWider = false,\n formValidator = null,\n classNames,\n styles: slotStyles,\n items = [],\n useMatLabelStyle = true,\n alwaysFloatLabel = false,\n placeholder = '',\n plainStyle = false,\n scrollToSelected = false,\n presentation: presentationProp,\n reactRef,\n ...rest\n } = useComponentDefaults('Dropdown', props);\n const [isFocused, setIsFocused] = useState(false);\n const [isHovered, setIsHovered] = useState(false);\n const [, forceUpdate] = useState(0);\n const fvRef = useRef(formValidator);\n const triggerRef = useRef<HTMLDivElement>(null);\n const anchorRef = useRef<HTMLDivElement>(null);\n const [menuIsOpen, setMenuIsOpen] = useState(false);\n\n // Explicit prop → this component's global default → the app-wide one → anchored.\n // Resolved here rather than left to Popover so that this component and the panel\n // it opens can never disagree about whether they are presenting as a sheet.\n const appPresentation = usePresentationDefault();\n const presentation = presentationProp ?? appPresentation ?? Presentation.Default;\n const { isSheet } = useSheet(presentation);\n\n // The list reads at the field's size, which is not always the page's: a Dropdown\n // inside something with a smaller font should not open a list at the default one.\n // Width is Popover's job, through `width='trigger'`.\n useLayoutEffect(() => {\n const trigger = triggerRef.current;\n const menu = anchorRef.current;\n if (!menuIsOpen \|\| isSheet \|\| !trigger \|\| !menu) return;\n menu.style.fontSize = window.getComputedStyle(trigger).fontSize;\n }, [menuIsOpen, isSheet]);\n\n useEffect(() => {\n fvRef.current = formValidator;\n if (!fvRef.current) return;\n fvRef.current.label = label ?? '';\n fvRef.current.validate();\n const listener = () => forceUpdate((n) => n + 1);\n fvRef.current.registerOnUpdateListener(listener);\n return () => fvRef.current?.removeOnUpdateListener(listener);\n }, [formValidator, label]);\n\n const onMouseEnterHandler = (event: React.MouseEvent) => {\n setIsHovered(true);\n onMouseEnterProp?.(event);\n };\n\n const onMouseLeaveHandler = (event: React.MouseEvent) => {\n setIsHovered(false);\n onMouseLeaveProp?.(event);\n };\n\n const onFocusHandler = (event: React.FocusEvent) => {\n setIsFocused(true);\n onFocusProp?.(event);\n };\n\n const onBlurHandler = (event: React.FocusEvent) => {\n if (fvRef.current) fvRef.current.touched = true;\n setIsFocused(false);\n onBlurProp?.(event);\n };\n\n const hasError = (): boolean => {\n return formValidator ? formValidator.touched && formValidator.hasError() : !isValid \|\| !!errorMessage;\n };\n\n const computedIsRequired = (): boolean => {\n return !!(\n isRequired \|\| formValidator?.validators.find((v) => (v as { validatorId?: string }).validatorId === 'required')\n );\n };\n\n const onChangeHandler = (val: string \| number): void => {\n if (formValidator) {\n formValidator.set(val);\n onChange?.(formValidator.value, customProps);\n } else {\n onChange?.(val, customProps);\n }\n };\n\n let dropdownLabel = dropdownLabelProp;\n const currentValue = formValidator ? (formValidator.value as string \| number) : value;\n const hasErr = hasError();\n\n items.forEach((item: DropdownItem) => {\n if (item.key === currentValue) {\n dropdownLabel = item.label as string;\n }\n });\n\n const displayValue = dropdownLabel \|\| currentValue;\n const isDisplayBlank = displayValue == null \|\| (typeof displayValue === 'string' && displayValue.trim() === '');\n\n const requiredMark = computedIsRequired() ? <span className={styles.requiredMark}></span> : null;\n const editedLabel = label && computedIsRequired() ? `${label} ` : label;\n\n const showFocus = isFocused && !readOnly;\n\n return (\n <div\n {...rest}\n className={cx(className, classNames?.root, styles.dropdownLabel, styles.dropdown, {\n [styles.dropdownLabelColumn]: !isRow,\n })}\n style={{ ...style, ...slotStyles?.root }}\n onMouseEnter={onMouseEnterHandler}\n onMouseLeave={onMouseLeaveHandler}\n >\n <Downshift\n {...(readOnly ? { isOpen: false } : {})}\n onChange={(selection: DropdownItem \| null) => onChangeHandler((selection \|\| { key: '' }).key)}\n itemToString={(item: DropdownItem \| null) => (item ? String(item.key) : '')}\n selectedItem={items.find((el) => el.key === currentValue) ?? null}\n onStateChange={(changes: StateChangeOptions<DropdownItem>) => {\n if (typeof changes.isOpen === 'boolean') setMenuIsOpen(changes.isOpen);\n }}\n stateReducer={(state: DownshiftState<DropdownItem>, changes: StateChangeOptions<DropdownItem>) => {\n if (scrollToSelected && Object.prototype.hasOwnProperty.call(changes, 'isOpen')) {\n return {\n ...changes,\n highlightedIndex: changes.isOpen ? items.indexOf(state.selectedItem as DropdownItem) : null,\n };\n }\n return changes;\n }}\n >\n {({\n getItemProps,\n getMenuProps,\n getToggleButtonProps,\n closeMenu,\n isOpen,\n selectedItem,\n highlightedIndex,\n setHighlightedIndex,\n }) => (\n <div>\n <Popover\n // Downshift owns the open state, the highlight and the keys; Popover\n // owns where the list goes. So the open half of `onOpenChange` is\n // Downshift's business already, and only a close is acted on: the\n // outside click and the Escape Popover sees before it does.\n isOpen={!disabled && !readOnly && isOpen}\n onOpenChange={(next) => {\n if (!next) closeMenu();\n }}\n placement={PopoverPlacement.Bottom}\n align={PopoverAlign.Start}\n offset={0}\n withArrow={false}\n constrainWidth={false}\n width='trigger'\n // The toggle button answers a click on the field, and the focus\n // belongs to it while the list is open.\n closeOnTriggerClick={false}\n focusOnOpen={false}\n presentation={presentation}\n classNames={{ panel: styles.dropdownPanel }}\n content={\n <div\n {...getMenuProps(\n {\n ref: (node: HTMLDivElement \| null) => {\n anchorRef.current = node;\n },\n 'aria-label': label \|\| placeholder \|\| undefined,\n },\n { suppressRefError: true },\n )}\n // A sheet's own panel does the clipping and the scrolling, and\n // spans the screen rather than sizing itself to the field.\n className={cx(!isSheet && styles.dropdownInputListAnim, {\n [styles.dropdownInputListAnimWider]: isDropdownListWider && !isSheet,\n })}\n >\n <InfiniteBlock\n onScroll={onScroll}\n className={cx(styles.dropdownInputList, isSheet && sheetStyles.sheetScroll, classNames?.list)}\n style={slotStyles?.list}\n setHighlightedIndex={setHighlightedIndex}\n >\n {items.map((item: DropdownItem, index: number) => (\n <div\n key={item.key}\n {...getItemProps({ index, item, disabled: !!item.disabled })}\n style={slotStyles?.option}\n className={cx(styles.dropdownInputListItem, classNames?.option, {\n [styles.dropdownInputListItemActive]: highlightedIndex === index,\n [styles.dropdownInputListItemSelected]: selectedItem === item,\n [styles.dropdownInputListItemDisabled]: !!item.disabled,\n })}\n >\n {item.label}\n </div>\n ))}\n </InfiniteBlock>\n </div>\n }\n >\n <div\n ref={triggerRef}\n onFocus={onFocusHandler}\n onBlur={onBlurHandler}\n className={cx(\n styles.dropdownInput,\n {\n [styles.dropdownInputPlain]: plainStyle,\n [styles.dropdownInputReadOnly]: readOnly && !disabled,\n },\n classNames?.field,\n )}\n style={slotStyles?.field}\n >\n <button\n tabIndex={tabIndex}\n type='button'\n disabled={disabled}\n aria-readonly={readOnly \|\| undefined}\n className={cx(\n styles.dropdownInputButton,\n {\n [styles.dropdownInputButtonDisabled]: disabled,\n [styles.dropdownInputButtonReadOnly]: readOnly && !disabled,\n },\n classNames?.control,\n )}\n style={{ ...(isDropdownListWider ? { padding: '6px', border: 'none' } : {}), ...slotStyles?.control }}\n {...getToggleButtonProps()}\n onClick={(e: React.MouseEvent<HTMLButtonElement>) => {\n getToggleButtonProps().onClick?.(e);\n onClick?.(e);\n }}\n ref={reactRef}\n >\n {/* Non-breaking space when blank (same text-node layout as a\n real value) so the button keeps a full line of height. */}\n {isDisplayBlank ? '\\u00A0' : displayValue}\n </button>\n <button\n type='button'\n tabIndex={-1}\n disabled={disabled}\n className={cx(styles.dropdownInputButtonIcon, classNames?.icon)}\n style={slotStyles?.icon}\n {...getToggleButtonProps()}\n // Keeping the focus where it is, rather than letting mousedown move\n // it here: both buttons carry the same downshift toggle props, and\n // the blur of the other one cancels the toggle this click performs,\n // so the chevron did nothing while the dropdown had focus.\n onMouseDown={(e: React.MouseEvent<HTMLButtonElement>) => e.preventDefault()}\n onClick={(e: React.MouseEvent<HTMLButtonElement>) => {\n getToggleButtonProps().onClick?.(e);\n onClick?.(e);\n }}\n >\n {!disabled && !readOnly && (\n <FontAwesomeIcon\n icon={dropdownIcon}\n className={cx(styles.dropdownInputButtonIconArrow, {\n [styles.dropdownInputButtonIconArrowOpen]: isOpen,\n })}\n />\n )}\n </button>\n <fieldset\n className={cx(styles.dropdownFieldset, {\n [styles.dropdownBorderPlain]: plainStyle,\n [styles.dropdownBorderFocused]: showFocus,\n [styles.dropdownBorderInvalid]: hasErr,\n [styles.dropdownBorderError]: hasErr,\n })}\n >\n <legend\n className={cx(styles.dropdownFieldsetLegend, {\n [styles.dropdownFieldsetLegendActive]:\n useMatLabelStyle && (alwaysFloatLabel \|\| showFocus \|\| !isDisplayBlank),\n })}\n >\n <span>{editedLabel}</span>\n </legend>\n </fieldset>\n {useMatLabelStyle && label && (\n <div\n className={cx(\n styles.dropdownMatLabel,\n {\n [styles.dropdownMatLabelFloating]: alwaysFloatLabel \|\| showFocus \|\| !isDisplayBlank,\n },\n // The floating and the stacked label are two renderings of\n // the same thing, so one slot reaches whichever is in use.\n classNames?.label,\n )}\n style={slotStyles?.label}\n >\n {label}\n {requiredMark}\n </div>\n )}\n {useMatLabelStyle && placeholder && (\n <div\n className={cx(\n styles.dropdownPlaceholder,\n showFocus && !dropdownLabel && styles.dropdownPlaceholderShown,\n )}\n >\n {placeholder}\n </div>\n )}\n </div>\n </Popover>\n </div>\n )}\n </Downshift>\n {label && !useMatLabelStyle && (\n <div className={cx(styles.dropdownLabelText, classNames?.label)} style={slotStyles?.label}>\n {label}\n {requiredMark}\n </div>\n )}\n <Tooltip\n variant='error'\n message={formValidator ? formValidator.getCurrentErrorMessage() : errorMessage \|\| ''}\n isVisible={hasErr && (isFocused \|\| isHovered)}\n />\n </div>\n );\n}\n\nexport default Dropdown;\n"],"mappings":"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"}
1	+ {"version":3,"file":"dropdown.mjs","names":[],"sources":["../../../../package/common/dropdown/dropdown.tsx"],"sourcesContent":["import React, { useEffect, useId, useLayoutEffect, useRef, useState } from 'react';\nimport cx from 'classnames';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { faChevronDown as dropdownIcon } from '@fortawesome/free-solid-svg-icons';\nimport Tooltip from 'components/common/tooltip';\n\nimport Popover from '../popover';\nimport SpinnerLoading from '../loading/spinnerLoading';\nimport { useInfiniteScroll } from '../infiniteBlock/useInfiniteScroll';\nimport { edgeIndex, nextIndex, scrollOptionIntoView, type ActiveIndex } from '../utils/listNavigation';\nimport { PopoverAlign, PopoverPlacement } from '../popover/popover.types';\nimport { useComponentDefaults, usePresentationDefault } from '../configProvider';\nimport { useSheet } from '../hooks/useSheet';\nimport { Presentation } from '../configProvider/presentation.types';\nimport styles from './dropdown.module.pcss';\nimport sheetStyles from '../styles/sheet.module.pcss';\nimport type { DropdownProps, DropdownItem } from './dropdown.types';\n\n/** How long a pause resets the type-ahead buffer, matching a native `<select>`. /\nconst TYPEAHEAD_RESET_MS = 500;\n\nfunction Dropdown(props: DropdownProps) {\n const {\n errorMessage = '',\n className = '',\n style,\n label = '',\n value = '',\n isValid = true,\n tabIndex = 0,\n isRequired = false,\n customProps = {},\n isRow = false,\n disabled = false,\n readOnly = false,\n onScroll = () => Promise.resolve(),\n onClick,\n onChange,\n onFocus: onFocusProp = null,\n onBlur: onBlurProp = null,\n onMouseEnter: onMouseEnterProp = null,\n onMouseLeave: onMouseLeaveProp = null,\n dropdownLabel: dropdownLabelProp,\n isDropdownListWider = false,\n formValidator = null,\n classNames,\n styles: slotStyles,\n items = [],\n useMatLabelStyle = true,\n alwaysFloatLabel = false,\n placeholder = '',\n plainStyle = false,\n scrollToSelected = false,\n presentation: presentationProp,\n reactRef,\n ...rest\n } = useComponentDefaults('Dropdown', props);\n const [isFocused, setIsFocused] = useState(false);\n const [isHovered, setIsHovered] = useState(false);\n const [, forceUpdate] = useState(0);\n const fvRef = useRef(formValidator);\n const triggerRef = useRef<HTMLDivElement>(null);\n const anchorRef = useRef<HTMLDivElement>(null);\n const listRef = useRef<HTMLDivElement>(null);\n const [menuIsOpen, setMenuIsOpen] = useState(false);\n // `null` is \"nothing highlighted\", the state a list opens in unless `scrollToSelected`\n // asks for the current value. Arrowing from there enters the list at either end.\n const [activeIndex, setActiveIndex] = useState<ActiveIndex>(null);\n const typeahead = useRef({ buffer: '', at: 0 });\n\n const baseId = useId();\n const listboxId = `${baseId}-listbox`;\n const labelId = `${baseId}-label`;\n const optionId = (index: number) => `${baseId}-option-${index}`;\n\n const isInteractive = !disabled && !readOnly;\n const isOpen = menuIsOpen && isInteractive;\n\n // The list is its own scroll container. It used to render through an `InfiniteBlock`, which\n // also brought a tabbable container and a second key handler: inside a listbox that put a\n // focusable element with no role in the tab order and gave the arrows two owners.\n const { isLoading: showScrollSpinner, sentinelRef } = useInfiniteScroll(listRef, onScroll, false);\n\n // Explicit prop → this component's global default → the app-wide one → anchored.\n // Resolved here rather than left to Popover so that this component and the panel\n // it opens can never disagree about whether they are presenting as a sheet.\n const appPresentation = usePresentationDefault();\n const presentation = presentationProp ?? appPresentation ?? Presentation.Default;\n const { isSheet } = useSheet(presentation);\n\n // The list reads at the field's size, which is not always the page's: a Dropdown\n // inside something with a smaller font should not open a list at the default one.\n // Width is Popover's job, through `width='trigger'`.\n useLayoutEffect(() => {\n const trigger = triggerRef.current;\n const menu = anchorRef.current;\n if (!isOpen \|\| isSheet \|\| !trigger \|\| !menu) return;\n menu.style.fontSize = window.getComputedStyle(trigger).fontSize;\n }, [isOpen, isSheet]);\n\n useEffect(() => {\n fvRef.current = formValidator;\n if (!fvRef.current) return;\n fvRef.current.label = label ?? '';\n fvRef.current.validate();\n const listener = () => forceUpdate((n) => n + 1);\n fvRef.current.registerOnUpdateListener(listener);\n return () => fvRef.current?.removeOnUpdateListener(listener);\n }, [formValidator, label]);\n\n const currentValue = formValidator ? (formValidator.value as string \| number) : value;\n const selectedIndex = items.findIndex((item) => item.key === currentValue);\n\n useEffect(() => {\n if (!isOpen \|\| activeIndex === null) return;\n scrollOptionIntoView(listRef.current, document.getElementById(optionId(activeIndex)));\n // optionId is derived from a stable useId, so it cannot go stale between renders.\n // oxlint-disable-next-line react-hooks/exhaustive-deps\n }, [isOpen, activeIndex]);\n\n const onMouseEnterHandler = (event: React.MouseEvent) => {\n setIsHovered(true);\n onMouseEnterProp?.(event);\n };\n\n const onMouseLeaveHandler = (event: React.MouseEvent) => {\n setIsHovered(false);\n onMouseLeaveProp?.(event);\n };\n\n const onFocusHandler = (event: React.FocusEvent) => {\n setIsFocused(true);\n onFocusProp?.(event);\n };\n\n const onBlurHandler = (event: React.FocusEvent) => {\n if (fvRef.current) fvRef.current.touched = true;\n setIsFocused(false);\n onBlurProp?.(event);\n };\n\n const hasError = (): boolean => {\n return formValidator ? formValidator.touched && formValidator.hasError() : !isValid \|\| !!errorMessage;\n };\n\n const computedIsRequired = (): boolean => {\n return !!(\n isRequired \|\| formValidator?.validators.find((v) => (v as { validatorId?: string }).validatorId === 'required')\n );\n };\n\n const onChangeHandler = (val: string \| number): void => {\n if (formValidator) {\n formValidator.set(val);\n onChange?.(formValidator.value, customProps);\n } else {\n onChange?.(val, customProps);\n }\n };\n\n function handleOpenChange(next: boolean) {\n if (next && !isInteractive) return;\n setMenuIsOpen(next);\n if (next) setActiveIndex(scrollToSelected && selectedIndex >= 0 ? selectedIndex : null);\n else typeahead.current = { buffer: '', at: 0 };\n }\n\n function select(item: DropdownItem) {\n if (item.disabled) return;\n onChangeHandler(item.key);\n handleOpenChange(false);\n }\n\n const navigation = { isDisabled: (index: number) => !!items[index].disabled };\n\n /* Jumps to the option whose label starts with what was typed, as a native `<select>` does. /\n function handleTypeahead(key: string) {\n const now = Date.now();\n const buffer = now - typeahead.current.at > TYPEAHEAD_RESET_MS ? key : typeahead.current.buffer + key;\n typeahead.current = { buffer, at: now };\n\n const needle = buffer.toLowerCase();\n const match = items.findIndex(\n (item) => !item.disabled && typeof item.label === 'string' && item.label.toLowerCase().startsWith(needle),\n );\n if (match === -1) return;\n if (isOpen) setActiveIndex(match);\n else select(items[match]);\n }\n\n function handleKeyDown(event: React.KeyboardEvent) {\n if (!isInteractive) return;\n\n if (!isOpen) {\n if (event.key === 'ArrowDown' \|\| event.key === 'ArrowUp' \|\| event.key === 'Enter' \|\| event.key === ' ') {\n // Without this the browser turns the key into a click on the trigger, which\n // Popover would read as a second toggle and close the list again.\n event.preventDefault();\n handleOpenChange(true);\n } else if (event.key.length === 1) {\n handleTypeahead(event.key);\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, items.length, navigation));\n } else if (event.key === 'Home' \|\| event.key === 'End') {\n event.preventDefault();\n setActiveIndex(edgeIndex(event.key === 'Home' ? 'first' : 'last', items.length, navigation));\n } else if (event.key === 'Enter' \|\| event.key === ' ') {\n event.preventDefault();\n const item = activeIndex === null ? undefined : items[activeIndex];\n if (item) select(item);\n else handleOpenChange(false);\n } else if (event.key === 'Escape' \|\| event.key === 'Tab') {\n handleOpenChange(false);\n } else if (event.key.length === 1) {\n handleTypeahead(event.key);\n }\n }\n\n let dropdownLabel = dropdownLabelProp;\n const hasErr = hasError();\n\n items.forEach((item: DropdownItem) => {\n if (item.key === currentValue) {\n dropdownLabel = item.label as string;\n }\n });\n\n const displayValue = dropdownLabel \|\| currentValue;\n const isDisplayBlank = displayValue == null \|\| (typeof displayValue === 'string' && displayValue.trim() === '');\n\n const requiredMark = computedIsRequired() ? <span className={styles.requiredMark}></span> : null;\n const editedLabel = label && computedIsRequired() ? `${label} ` : label;\n\n const showFocus = isFocused && !readOnly;\n\n return (\n <div\n {...rest}\n className={cx(className, classNames?.root, styles.dropdownLabel, styles.dropdown, {\n [styles.dropdownLabelColumn]: !isRow,\n })}\n style={{ ...style, ...slotStyles?.root }}\n onMouseEnter={onMouseEnterHandler}\n onMouseLeave={onMouseLeaveHandler}\n >\n <div>\n <Popover\n // Popover owns opening and closing, including the outside click, Escape and the\n // click on the field itself. The trigger only has to say what it wants.\n isOpen={isOpen}\n onOpenChange={handleOpenChange}\n disabled={!isInteractive}\n placement={PopoverPlacement.Bottom}\n align={PopoverAlign.Start}\n offset={0}\n withArrow={false}\n constrainWidth={false}\n width='trigger'\n // The focus stays on the trigger while the list is open, because that is what\n // `aria-activedescendant` points from.\n focusOnOpen={false}\n presentation={presentation}\n classNames={{ panel: styles.dropdownPanel }}\n content={\n <div\n ref={anchorRef}\n // A sheet's own panel does the clipping and the scrolling, and\n // spans the screen rather than sizing itself to the field.\n className={cx(!isSheet && styles.dropdownInputListAnim, {\n [styles.dropdownInputListAnimWider]: isDropdownListWider && !isSheet,\n })}\n >\n <div\n ref={listRef}\n id={listboxId}\n role='listbox'\n aria-label={label \|\| placeholder \|\| undefined}\n className={cx(styles.dropdownInputList, isSheet && sheetStyles.sheetScroll, classNames?.list)}\n style={slotStyles?.list}\n >\n {items.map((item: DropdownItem, index: number) => (\n <div\n key={item.key}\n id={optionId(index)}\n role='option'\n aria-selected={item.key === currentValue}\n aria-disabled={item.disabled \|\| undefined}\n style={slotStyles?.option}\n className={cx(styles.dropdownInputListItem, classNames?.option, {\n [styles.dropdownInputListItemActive]: activeIndex === index,\n [styles.dropdownInputListItemSelected]: item.key === currentValue,\n [styles.dropdownInputListItemDisabled]: !!item.disabled,\n })}\n // Selecting must not move the focus off the trigger, which is what\n // `aria-activedescendant` is anchored to.\n onMouseDown={(event) => event.preventDefault()}\n onMouseEnter={() => setActiveIndex(index)}\n onClick={() => select(item)}\n >\n {item.label}\n </div>\n ))}\n <div ref={sentinelRef} className={styles.dropdownSentinel} aria-hidden='true' />\n {showScrollSpinner && (\n <div className={styles.dropdownLoadMore} aria-hidden='true'>\n <SpinnerLoading className={styles.dropdownLoadMoreSpinner} />\n </div>\n )}\n </div>\n </div>\n }\n >\n <div\n ref={triggerRef}\n onFocus={onFocusHandler}\n onBlur={onBlurHandler}\n className={cx(\n styles.dropdownInput,\n {\n [styles.dropdownInputPlain]: plainStyle,\n [styles.dropdownInputReadOnly]: readOnly && !disabled,\n },\n classNames?.field,\n )}\n style={slotStyles?.field}\n >\n <button\n tabIndex={tabIndex}\n type='button'\n disabled={disabled}\n // A select-only combobox: the accessible name comes from the field's label,\n // and the element's own content is read as its value. A plain `button` role\n // would announce the value as the name and never mention the label.\n role='combobox'\n aria-haspopup='listbox'\n aria-expanded={isOpen}\n aria-controls={listboxId}\n aria-activedescendant={isOpen && activeIndex !== null ? optionId(activeIndex) : undefined}\n aria-labelledby={label ? labelId : undefined}\n aria-label={label ? undefined : placeholder \|\| undefined}\n aria-readonly={readOnly \|\| undefined}\n className={cx(\n styles.dropdownInputButton,\n {\n [styles.dropdownInputButtonDisabled]: disabled,\n [styles.dropdownInputButtonReadOnly]: readOnly && !disabled,\n },\n classNames?.control,\n )}\n style={{ ...(isDropdownListWider ? { padding: '6px', border: 'none' } : {}), ...slotStyles?.control }}\n onKeyDown={handleKeyDown}\n onClick={onClick}\n ref={reactRef}\n >\n {/ Non-breaking space when blank (same text-node layout as a\n real value) so the button keeps a full line of height. */}\n {isDisplayBlank ? ' ' : displayValue}\n </button>\n <button\n type='button'\n tabIndex={-1}\n disabled={disabled}\n // The chevron repeats what the combobox beside it already does, so it is a\n // pointer affordance only. Announcing it would offer the same control twice.\n aria-hidden='true'\n className={cx(styles.dropdownInputButtonIcon, classNames?.icon)}\n style={slotStyles?.icon}\n // Keeping the focus where it is, rather than letting mousedown move it here:\n // the trigger is what `aria-activedescendant` points from, and the click\n // still reaches Popover by bubbling.\n onMouseDown={(event: React.MouseEvent<HTMLButtonElement>) => event.preventDefault()}\n onClick={onClick}\n >\n {!disabled && !readOnly && (\n <FontAwesomeIcon\n icon={dropdownIcon}\n className={cx(styles.dropdownInputButtonIconArrow, {\n [styles.dropdownInputButtonIconArrowOpen]: isOpen,\n })}\n />\n )}\n </button>\n <fieldset\n className={cx(styles.dropdownFieldset, {\n [styles.dropdownBorderPlain]: plainStyle,\n [styles.dropdownBorderFocused]: showFocus,\n [styles.dropdownBorderInvalid]: hasErr,\n [styles.dropdownBorderError]: hasErr,\n })}\n >\n <legend\n className={cx(styles.dropdownFieldsetLegend, {\n [styles.dropdownFieldsetLegendActive]:\n useMatLabelStyle && (alwaysFloatLabel \|\| showFocus \|\| !isDisplayBlank),\n })}\n >\n <span>{editedLabel}</span>\n </legend>\n </fieldset>\n {useMatLabelStyle && label && (\n <div\n id={labelId}\n className={cx(\n styles.dropdownMatLabel,\n {\n [styles.dropdownMatLabelFloating]: alwaysFloatLabel \|\| showFocus \|\| !isDisplayBlank,\n },\n // The floating and the stacked label are two renderings of\n // the same thing, so one slot reaches whichever is in use.\n classNames?.label,\n )}\n style={slotStyles?.label}\n >\n {label}\n {requiredMark}\n </div>\n )}\n {useMatLabelStyle && placeholder && (\n <div\n className={cx(\n styles.dropdownPlaceholder,\n showFocus && !dropdownLabel && styles.dropdownPlaceholderShown,\n )}\n >\n {placeholder}\n </div>\n )}\n </div>\n </Popover>\n </div>\n {label && !useMatLabelStyle && (\n <div id={labelId} className={cx(styles.dropdownLabelText, classNames?.label)} style={slotStyles?.label}>\n {label}\n {requiredMark}\n </div>\n )}\n <Tooltip\n variant='error'\n message={formValidator ? formValidator.getCurrentErrorMessage() : errorMessage \|\| ''}\n isVisible={hasErr && (isFocused \|\| isHovered)}\n />\n </div>\n );\n}\n\nexport default Dropdown;\n"],"mappings":"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"}

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

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

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

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

package/dist/esm/common/hooks/useHotkeys.mjs ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ "use client";import{useEffect as e,useRef as t}from"react";var n=`input, textarea, select, [contenteditable=""], [contenteditable="true"]`,r={esc:`escape`,space:` `,spacebar:` `,plus:`+`,up:`arrowup`,down:`arrowdown`,left:`arrowleft`,right:`arrowright`};function i(){return typeof navigator<`u`&&/Mac\|iPhone\|iPad\|iPod/i.test(navigator.userAgent)}function a(e){let t=e.split(`+`).map(e=>e.trim().toLowerCase()).filter(Boolean);if(t.length===0)return null;let n={key:``,ctrl:!1,meta:!1,alt:!1,shift:!1,shiftNamed:!1},a=i();for(let e of t)switch(e){case`mod`:a?n.meta=!0:n.ctrl=!0;break;case`ctrl`:case`control`:n.ctrl=!0;break;case`meta`:case`cmd`:case`command`:n.meta=!0;break;case`alt`:case`option`:n.alt=!0;break;case`shift`:n.shift=!0,n.shiftNamed=!0;break;default:n.key=r[e]??e}return n.key?n:null}function o(e){let t=[e.key.toLowerCase()],n=/^(?:Key\|Digit)(.)$/.exec(e.code);return n&&t.push(n[1].toLowerCase()),t}function s(e,t){return e.ctrl!==t.ctrlKey\|\|e.meta!==t.metaKey\|\|e.alt!==t.altKey\|\|e.shiftNamed&&e.shift!==t.shiftKey?!1:o(t).includes(e.key)}function c(e){return e instanceof Element&&!!e.closest(n)}var l=new Set([`arrowup`,`arrowdown`,`arrowleft`,`arrowright`,`home`,`end`,`pageup`,`pagedown`,`backspace`,`delete`,`enter`,`tab`]);function u(e){return e.ctrl\|\|e.meta\|\|e.alt?!1:e.key.length===1\|\|l.has(e.key)}var d={" ":`Space`,arrowup:`↑`,arrowdown:`↓`,arrowleft:`←`,arrowright:`→`,escape:`Esc`,enter:`↵`,backspace:`⌫`,delete:`Del`,pageup:`PgUp`,pagedown:`PgDn`};function f(e){let t=a(e);if(!t)return e;let n=d[t.key]??(t.key.length===1?t.key.toUpperCase():p(t.key));return i()?[t.ctrl&&`⌃`,t.alt&&`⌥`,t.shift&&`⇧`,t.meta&&`⌘`].filter(Boolean).join(``)+n:[...[t.ctrl&&`Ctrl`,t.meta&&`Win`,t.alt&&`Alt`,t.shift&&`Shift`].filter(Boolean),n].join(`+`)}function p(e){return e[0].toUpperCase()+e.slice(1)}function m(n,r={}){let{enabled:i=!0,target:o,enableInFields:l=!1,preventDefault:d=!0}=r,f=t(n);e(()=>{f.current=n}),e(()=>{if(!i)return;let e=o?o.current:window;if(!e)return;function t(e){let t=e;if(!t.isComposing)for(let[e,n]of Object.entries(f.current)){let r=a(e);if(r&&s(r,t)&&!(u(r)&&!l&&c(t.target))){d&&t.preventDefault(),n(t);return}}}return e.addEventListener(`keydown`,t),()=>e.removeEventListener(`keydown`,t)},[i,o,l,d])}export{m as default,m as useHotkeys,f as formatHotkey};
2	+ //# sourceMappingURL=useHotkeys.mjs.map

package/dist/esm/common/hooks/useHotkeys.mjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"useHotkeys.mjs","names":[],"sources":["../../../../package/common/hooks/useHotkeys.ts"],"sourcesContent":["import { useEffect, useRef, type RefObject } from 'react';\n\nexport type HotkeyHandler = (event: KeyboardEvent) => void;\n\n/** Combo → handler, e.g. `{ 'mod+k': open, Escape: close }`. */\nexport type HotkeyMap = Record<string, HotkeyHandler>;\n\nexport interface UseHotkeysOptions {\n /** Attach the listener at all. Default `true`; pass `false` to suspend every combo at once. */\n enabled?: boolean;\n /** Scope the shortcuts to one element instead of the whole window. */\n target?: RefObject<HTMLElement | null>;\n /**\n * Let plain-key combos fire while a text field or `contenteditable` has focus. Default `false`,\n * so `'n'` does not fire for every `n` typed into an input. Combos carrying Ctrl, Cmd or Alt\n * are never suppressed — they cannot be confused with typing.\n */\n enableInFields?: boolean;\n /**\n * Call `preventDefault()` on a match, so `mod+s` does not also open the browser's save dialog.\n * Default `true`.\n */\n preventDefault?: boolean;\n}\n\ninterface Combo {\n key: string;\n ctrl: boolean;\n meta: boolean;\n alt: boolean;\n shift: boolean;\n /** Set when the combo named Shift itself — see `matches`. */\n shiftNamed: boolean;\n}\n\nconst FIELD_SELECTOR = 'input, textarea, select, [contenteditable=\"\"], [contenteditable=\"true\"]';\n\n/** Spellings accepted for keys whose `event.key` is awkward to write inside a `+`-separated combo. */\nconst KEY_ALIASES: Record<string, string> = {\n esc: 'escape',\n space: ' ',\n spacebar: ' ',\n plus: '+',\n up: 'arrowup',\n down: 'arrowdown',\n left: 'arrowleft',\n right: 'arrowright',\n};\n\n/** `mod` is Cmd where Cmd is the command modifier, and Ctrl everywhere else. */\nfunction isApplePlatform(): boolean {\n return typeof navigator !== 'undefined' && /Mac|iPhone|iPad|iPod/i.test(navigator.userAgent);\n}\n\nfunction parseCombo(combo: string): Combo | null {\n const parts = combo\n .split('+')\n .map((part) => part.trim().toLowerCase())\n .filter(Boolean);\n // A trailing separator (`'mod+'`) loses its key to the filter above, so the whole combo is\n // dropped rather than matching on the modifier alone. `'mod+plus'` is how to mean `+` itself.\n if (parts.length === 0) return null;\n\n const parsed: Combo = { key: '', ctrl: false, meta: false, alt: false, shift: false, shiftNamed: false };\n const apple = isApplePlatform();\n\n for (const part of parts) {\n switch (part) {\n case 'mod':\n if (apple) parsed.meta = true;\n else parsed.ctrl = true;\n break;\n case 'ctrl':\n case 'control':\n parsed.ctrl = true;\n break;\n case 'meta':\n case 'cmd':\n case 'command':\n parsed.meta = true;\n break;\n case 'alt':\n case 'option':\n parsed.alt = true;\n break;\n case 'shift':\n parsed.shift = true;\n parsed.shiftNamed = true;\n break;\n default:\n parsed.key = KEY_ALIASES[part] ?? part;\n }\n }\n\n return parsed.key ? parsed : null;\n}\n\n/**\n * The key the event carries, plus the one its physical position would produce unshifted.\n *\n * Both are needed: Alt+K on a Mac arrives as `key: '˚'` and Shift+1 as `key: '!'`, so a combo\n * written against the letter or digit on the keycap only matches through `code`.\n */\nfunction pressedKeys(event: KeyboardEvent): string[] {\n const keys = [event.key.toLowerCase()];\n const physical = /^(?:Key|Digit)(.)$/.exec(event.code);\n if (physical) keys.push(physical[1].toLowerCase());\n return keys;\n}\n\nfunction matches(combo: Combo, event: KeyboardEvent): boolean {\n if (combo.ctrl !== event.ctrlKey || combo.meta !== event.metaKey || combo.alt !== event.altKey) return false;\n // Shift is only compared when the combo named it. A symbol is typed *with* Shift on most\n // layouts, so requiring `shiftKey === false` would make `'?'` and `'mod+/'` unreachable.\n if (combo.shiftNamed && combo.shift !== event.shiftKey) return false;\n return pressedKeys(event).includes(combo.key);\n}\n\nfunction isInField(target: EventTarget | null): boolean {\n return target instanceof Element && !!target.closest(FIELD_SELECTOR);\n}\n\n/** Keys a text field uses for itself, beyond the characters it inserts. */\nconst FIELD_KEYS = new Set([\n 'arrowup',\n 'arrowdown',\n 'arrowleft',\n 'arrowright',\n 'home',\n 'end',\n 'pageup',\n 'pagedown',\n 'backspace',\n 'delete',\n 'enter',\n 'tab',\n]);\n\n/**\n * Whether a combo would be taken out of a focused field's mouth.\n *\n * Ctrl, Cmd and Alt take a key out of the field's hands whatever it is. Without one, a single\n * character is typing and the listed keys are editing, but `F2` and `Escape` are neither, and\n * suppressing those made a menu's `F2` do nothing the moment the page had a focused input.\n */\nfunction isFieldKey(combo: Combo): boolean {\n if (combo.ctrl || combo.meta || combo.alt) return false;\n return combo.key.length === 1 || FIELD_KEYS.has(combo.key);\n}\n\n/** Keys whose name is not what a keycap says. Anything else is capitalised, so `f2` reads `F2`. */\nconst KEY_LABELS: Record<string, string> = {\n ' ': 'Space',\n arrowup: '↑',\n arrowdown: '↓',\n arrowleft: '←',\n arrowright: '→',\n escape: 'Esc',\n enter: '↵',\n backspace: '⌫',\n delete: 'Del',\n pageup: 'PgUp',\n pagedown: 'PgDn',\n};\n\n/**\n * A combo written for the reader: `'mod+shift+k'` reads `⇧⌘K` on an Apple platform and\n * `Ctrl+Shift+K` everywhere else.\n *\n * So a shortcut is written once, in one spelling, and the hint beside it cannot contradict what\n * the binding actually listens for. Hand-written `'⌘K'` hints are wrong on every other platform,\n * silently, because nothing compares the label to the binding.\n *\n * Resolved from the platform at call time, so a server-rendered page renders the non-Apple form.\n */\nexport function formatHotkey(combo: string): string {\n const parsed = parseCombo(combo);\n if (!parsed) return combo;\n\n const key = KEY_LABELS[parsed.key] ?? (parsed.key.length === 1 ? parsed.key.toUpperCase() : capitalise(parsed.key));\n\n // Apple orders modifier symbols ⌃⌥⇧⌘ and runs them into the key; everywhere else they are\n // words joined by `+`.\n if (isApplePlatform()) {\n const symbols = [parsed.ctrl && '⌃', parsed.alt && '⌥', parsed.shift && '⇧', parsed.meta && '⌘'];\n return symbols.filter(Boolean).join('') + key;\n }\n const words = [parsed.ctrl && 'Ctrl', parsed.meta && 'Win', parsed.alt && 'Alt', parsed.shift && 'Shift'];\n return [...words.filter(Boolean), key].join('+');\n}\n\nfunction capitalise(value: string): string {\n return value[0].toUpperCase() + value.slice(1);\n}\n\n/**\n * Keyboard shortcuts, for a whole app or for one element.\n *\n * ```tsx\n * useHotkeys({ 'mod+k': () => setPaletteOpen(true), '?': () => setHelpOpen(true) });\n * ```\n *\n * The map is read through a ref at event time, so an inline object literal is fine and no handler\n * needs memoising. Shortcuts keep firing while a Modal or Drawer is open — pass `enabled` for the\n * ones that should not.\n */\nexport function useHotkeys(hotkeys: HotkeyMap, options: UseHotkeysOptions = {}): void {\n const { enabled = true, target, enableInFields = false, preventDefault = true } = options;\n\n const hotkeysRef = useRef(hotkeys);\n useEffect(() => {\n hotkeysRef.current = hotkeys;\n });\n\n useEffect(() => {\n if (!enabled) return;\n const node: HTMLElement | Window | null = target ? target.current : window;\n if (!node) return;\n\n function onKeyDown(event: Event) {\n const keyboardEvent = event as KeyboardEvent;\n // A key pressed to compose a character in an IME is not a shortcut.\n if (keyboardEvent.isComposing) return;\n\n for (const [spelling, handler] of Object.entries(hotkeysRef.current)) {\n const combo = parseCombo(spelling);\n if (!combo || !matches(combo, keyboardEvent)) continue;\n if (isFieldKey(combo) && !enableInFields && isInField(keyboardEvent.target)) continue;\n if (preventDefault) keyboardEvent.preventDefault();\n handler(keyboardEvent);\n return;\n }\n }\n\n node.addEventListener('keydown', onKeyDown);\n return () => node.removeEventListener('keydown', onKeyDown);\n }, [enabled, target, enableInFields, preventDefault]);\n}\n\nexport default useHotkeys;\n"],"mappings":"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"}

package/dist/esm/common/hooks/useScrollEdges.mjs ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ "use client";import{useEffect as e,useState as t}from"react";var n={hasStart:!1,hasEnd:!1};function r(r,i={}){let{axis:a=`vertical`,isEnabled:o=!0}=i,[s,c]=t(n);return e(()=>{let e=r.current;if(!o\|\|!e){c(e=>e===n?e:n);return}let t=a===`vertical`,i=getComputedStyle(e),s=t?i.overflowY:i.overflowX,l=s===`hidden`\|\|s===`clip`,u=()=>{let n=t?e.scrollTop:e.scrollLeft,r=t?e.scrollHeight:e.scrollWidth,i=t?e.clientHeight:e.clientWidth,a=!l&&n>1,o=!l&&r-i-n>1;c(e=>e.hasStart===a&&e.hasEnd===o?e:{hasStart:a,hasEnd:o})},d=new ResizeObserver(u),f=()=>{d.disconnect(),d.observe(e);for(let t of Array.from(e.children))d.observe(t)},p=new MutationObserver(()=>{f(),u()});return u(),f(),p.observe(e,{childList:!0,subtree:!0,characterData:!0}),e.addEventListener(`scroll`,u,{passive:!0}),()=>{e.removeEventListener(`scroll`,u),p.disconnect(),d.disconnect()}},[r,a,o]),s}export{r as useScrollEdges};
2	+ //# sourceMappingURL=useScrollEdges.mjs.map

package/dist/esm/common/hooks/useScrollEdges.mjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"useScrollEdges.mjs","names":[],"sources":["../../../../package/common/hooks/useScrollEdges.ts"],"sourcesContent":["import { useEffect, useState, type RefObject } from 'react';\n\nexport interface ScrollEdges {\n /** Content is scrolled out of view past the element's top (or left) edge. */\n hasStart: boolean;\n /** Content continues past the element's bottom (or right) edge. */\n hasEnd: boolean;\n}\n\nexport interface ScrollEdgesOptions {\n /** Which axis to measure. Default `'vertical'`. */\n axis?: 'vertical' | 'horizontal';\n /** Measure at all. Default `true`; pass `false` while the element is hidden. */\n isEnabled?: boolean;\n}\n\nconst NONE: ScrollEdges = { hasStart: false, hasEnd: false };\n\n/**\n * Reports which edges of a scroll container currently hide content, so a caller can mark the\n * boundary, most often by fading it: see `styles/scrollFade.module.pcss`.\n */\nexport function useScrollEdges(ref: RefObject<HTMLElement | null>, options: ScrollEdgesOptions = {}): ScrollEdges {\n const { axis = 'vertical', isEnabled = true } = options;\n const [edges, setEdges] = useState<ScrollEdges>(NONE);\n\n useEffect(() => {\n const element = ref.current;\n if (!isEnabled || !element) {\n setEdges((previous) => (previous === NONE ? previous : NONE));\n return;\n }\n\n const isVertical = axis === 'vertical';\n // Read once rather than per measurement: `getComputedStyle` in the scroll handler forces a\n // style flush on every frame of a scroll, and the overflow mode can only change with the\n // element's class or inline style, which re-runs this effect anyway.\n const style = getComputedStyle(element);\n // `hidden` and `clip` cut the overflow off with no way for anyone to reach the rest, so\n // marking an edge there would promise a scroll that cannot happen. The metrics alone never\n // say so: `scrollHeight` reports the full content height under both.\n const overflow = isVertical ? style.overflowY : style.overflowX;\n const isClipped = overflow === 'hidden' || overflow === 'clip';\n\n const measure = () => {\n const offset = isVertical ? element.scrollTop : element.scrollLeft;\n const total = isVertical ? element.scrollHeight : element.scrollWidth;\n const visible = isVertical ? element.clientHeight : element.clientWidth;\n // A pixel of slack: fractional layout at non-integer zoom leaves the offset a hair short of\n // the maximum, which would otherwise read as \"there is still more past this edge\" forever.\n const hasStart = !isClipped && offset > 1;\n const hasEnd = !isClipped && total - visible - offset > 1;\n setEdges((previous) =>\n previous.hasStart === hasStart && previous.hasEnd === hasEnd ? previous : { hasStart, hasEnd },\n );\n };\n\n const resizes = new ResizeObserver(measure);\n // The port's own box stops changing once it is capped, so content that grows without one of\n // its ancestors resizing, an image decoding or a web font swapping in, only shows on a child.\n const observeContent = () => {\n resizes.disconnect();\n resizes.observe(element);\n for (const child of Array.from(element.children)) resizes.observe(child);\n };\n\n // Content arriving through React changes `scrollHeight` without resizing anything already\n // observed, and the new children have to be picked up for the next time they grow.\n const mutations = new MutationObserver(() => {\n observeContent();\n measure();\n });\n\n measure();\n observeContent();\n mutations.observe(element, { childList: true, subtree: true, characterData: true });\n element.addEventListener('scroll', measure, { passive: true });\n return () => {\n element.removeEventListener('scroll', measure);\n mutations.disconnect();\n resizes.disconnect();\n };\n }, [ref, axis, isEnabled]);\n\n return edges;\n}\n"],"mappings":"6DAgBA,IAAM,EAAoB,CAAE,SAAU,GAAO,OAAQ,EAAM,EAM3D,SAAgB,EAAe,EAAoC,EAA8B,CAAC,EAAgB,CAChH,GAAM,CAAE,OAAO,WAAY,YAAY,IAAS,EAC1C,CAAC,EAAO,GAAY,EAAsB,CAAI,EA4DpD,OA1DA,MAAgB,CACd,IAAM,EAAU,EAAI,QACpB,GAAI,CAAC,GAAa,CAAC,EAAS,CAC1B,EAAU,GAAc,IAAa,EAAO,EAAW,CAAK,EAC5D,MACF,CAEA,IAAM,EAAa,IAAS,WAItB,EAAQ,iBAAiB,CAAO,EAIhC,EAAW,EAAa,EAAM,UAAY,EAAM,UAChD,EAAY,IAAa,UAAY,IAAa,OAElD,MAAgB,CACpB,IAAM,EAAS,EAAa,EAAQ,UAAY,EAAQ,WAClD,EAAQ,EAAa,EAAQ,aAAe,EAAQ,YACpD,EAAU,EAAa,EAAQ,aAAe,EAAQ,YAGtD,EAAW,CAAC,GAAa,EAAS,EAClC,EAAS,CAAC,GAAa,EAAQ,EAAU,EAAS,EACxD,EAAU,GACR,EAAS,WAAa,GAAY,EAAS,SAAW,EAAS,EAAW,CAAE,WAAU,QAAO,CAC/F,CACF,EAEM,EAAU,IAAI,eAAe,CAAO,EAGpC,MAAuB,CAC3B,EAAQ,WAAW,EACnB,EAAQ,QAAQ,CAAO,EACvB,IAAK,IAAM,KAAS,MAAM,KAAK,EAAQ,QAAQ,EAAG,EAAQ,QAAQ,CAAK,CACzE,EAIM,EAAY,IAAI,qBAAuB,CAC3C,EAAe,EACf,EAAQ,CACV,CAAC,EAMD,OAJA,EAAQ,EACR,EAAe,EACf,EAAU,QAAQ,EAAS,CAAE,UAAW,GAAM,QAAS,GAAM,cAAe,EAAK,CAAC,EAClF,EAAQ,iBAAiB,SAAU,EAAS,CAAE,QAAS,EAAK,CAAC,MAChD,CACX,EAAQ,oBAAoB,SAAU,CAAO,EAC7C,EAAU,WAAW,EACrB,EAAQ,WAAW,CACrB,CACF,EAAG,CAAC,EAAK,EAAM,CAAS,CAAC,EAElB,CACT"}

package/dist/esm/common/hooks/useSwipeDismiss.mjs CHANGED Viewed

@@ -1,2 +1,2 @@
-"use client";import e from"./useCoarsePointer.mjs";import{useEffect as t,useRef as n,useState as r}from"react";var i=180,a=10;function o({onDismiss:o,axis:s=`x`,distanceThreshold:c=80,velocityThreshold:l=.5,disabled:u=!1,mobileOnly:d=!0}){let f=n(null),[p,m]=r(!1),h=e(),g=u||d&&!h,_=n(null),v=n(o);return t(()=>{v.current=o}),t(()=>{let e=f.current;if(!e||g)return;function t(t,n){if(!e)return;n!==`none`&&e.offsetHeight;let r=s===`x`?`translateX(${t}px)`:`translateY(${t}px)`;e.style.transition=n,e.style.transform=r;let i=Math.max(0,1-Math.abs(t)/(c*2.5));e.style.opacity=String(i)}function n(e){let n=_.current;if(!n||e.pointerId!==n.pointerId)return;let r=e.clientX-n.startX,i=e.clientY-n.startY;if(!n.axisLocked){let e=s===`x`?r:i,t=s===`x`?i:r;if(Math.abs(e)<a&&Math.abs(t)<a)return;if(Math.abs(t)>Math.abs(e)){n.active=!1;return}n.axisLocked=!0,m(!0)}n.active&&(e.preventDefault(),n.offset=s===`x`?r:i,t(n.offset,`none`))}function r(){let a=_.current;if(_.current=null,window.removeEventListener(`pointermove`,n),window.removeEventListener(`pointerup`,r),window.removeEventListener(`pointercancel`,r),!a||!a.active||!a.axisLocked){m(!1);return}let o=Math.max(1,Date.now()-a.startTime),s=a.offset/o;if(Math.abs(a.offset)>=c||Math.abs(s)>=l){let n=e?.getBoundingClientRect().width??0;t(Math.sign(a.offset||1)*(n+40),`transform ${i}ms ease-out, opacity ${i}ms ease-out`),setTimeout(()=>v.current(),i)}else t(0,`transform ${i}ms ease-out, opacity ${i}ms ease-out`);m(!1)}function o(t){!_.current&&e&&(e.style.animation=`none`,_.current={pointerId:t.pointerId,startX:t.clientX,startY:t.clientY,startTime:Date.now(),offset:0,axisLocked:!1,active:!0},window.addEventListener(`pointermove`,n,{passive:!1}),window.addEventListener(`pointerup`,r),window.addEventListener(`pointercancel`,r))}return e.addEventListener(`pointerdown`,o),()=>{e.removeEventListener(`pointerdown`,o),window.removeEventListener(`pointermove`,n),window.removeEventListener(`pointerup`,r),window.removeEventListener(`pointercancel`,r)}},[s,c,l,g]),{ref:f,isDragging:p}}export{o as useSwipeDismiss};
+"use client";import e from"./useCoarsePointer.mjs";import{useCallback as t,useEffect as n,useRef as r,useState as i}from"react";var a=180,o=10;function s({onDismiss:s,axis:c=`x`,distanceThreshold:l=80,velocityThreshold:u=.5,disabled:d=!1,mobileOnly:f=!0}){let[p,m]=i(null),h=t(e=>m(e),[]),[g,_]=i(!1),v=e(),y=d||f&&!v,b=r(null),x=r(s);return n(()=>{x.current=s}),n(()=>{let e=p;if(!e||y)return;function t(t,n){if(!e)return;n!==`none`&&e.offsetHeight;let r=c===`x`?`translateX(${t}px)`:`translateY(${t}px)`;e.style.transition=n,e.style.transform=r;let i=Math.max(0,1-Math.abs(t)/(l*2.5));e.style.opacity=String(i)}function n(e){let n=b.current;if(!n||e.pointerId!==n.pointerId)return;let r=e.clientX-n.startX,i=e.clientY-n.startY;if(!n.axisLocked){let e=c===`x`?r:i,t=c===`x`?i:r;if(Math.abs(e)<o&&Math.abs(t)<o)return;if(Math.abs(t)>Math.abs(e)){n.active=!1;return}n.axisLocked=!0,_(!0)}n.active&&(e.preventDefault(),n.offset=c===`x`?r:i,t(n.offset,`none`))}function r(){let i=b.current;if(b.current=null,window.removeEventListener(`pointermove`,n),window.removeEventListener(`pointerup`,r),window.removeEventListener(`pointercancel`,r),!i||!i.active||!i.axisLocked){_(!1);return}let o=Math.max(1,Date.now()-i.startTime),s=i.offset/o;if(Math.abs(i.offset)>=l||Math.abs(s)>=u){let n=e?.getBoundingClientRect().width??0;t(Math.sign(i.offset||1)*(n+40),`transform ${a}ms ease-out, opacity ${a}ms ease-out`),setTimeout(()=>x.current(),a)}else t(0,`transform ${a}ms ease-out, opacity ${a}ms ease-out`);_(!1)}function i(t){!b.current&&e&&(e.style.animation=`none`,b.current={pointerId:t.pointerId,startX:t.clientX,startY:t.clientY,startTime:Date.now(),offset:0,axisLocked:!1,active:!0},window.addEventListener(`pointermove`,n,{passive:!1}),window.addEventListener(`pointerup`,r),window.addEventListener(`pointercancel`,r))}return e.addEventListener(`pointerdown`,i),()=>{e.removeEventListener(`pointerdown`,i),window.removeEventListener(`pointermove`,n),window.removeEventListener(`pointerup`,r),window.removeEventListener(`pointercancel`,r)}},[p,c,l,u,y]),{ref:h,isDragging:g}}export{s as useSwipeDismiss};
 //# sourceMappingURL=useSwipeDismiss.mjs.map

package/dist/esm/common/hooks/useSwipeDismiss.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useSwipeDismiss.mjs","names":[],"sources":["../../../../package/common/hooks/useSwipeDismiss.ts"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\n\nimport { useCoarsePointer } from './useCoarsePointer';\n\nexport interface UseSwipeDismissOptions {\n /** Called once the swipe commits (past the threshold) — after the exit transition finishes,\n * not the instant the pointer is released. /\n onDismiss: () => void;\n /* Which axis the drag tracks (default `'x'`, the natural direction for a toast/notification). /\n axis?: 'x' \| 'y';\n /* Distance in px past which releasing counts as a commit, regardless of speed (default `80`). /\n distanceThreshold?: number;\n /* Speed in px/ms past which releasing counts as a commit, regardless of distance (default `0.5`) —\n * lets a fast flick dismiss even if the pointer didn't travel very far. /\n velocityThreshold?: number;\n /* Disables the gesture entirely — no listeners are attached. /\n disabled?: boolean;\n /* Restricts the gesture to coarse (touch) pointers, auto-detected via `matchMedia`. On a\n * mouse/trackpad device a drag is more likely to be a text selection than an intentional\n * dismiss, and other affordances (a close button, auto-dismiss) typically already cover that\n * case. Default `true`; set `false` to allow the gesture on any pointer type. /\n mobileOnly?: boolean;\n}\n\nexport interface UseSwipeDismissResult<T extends HTMLElement> {\n /* Attach to the element that should become draggable. The hook wires up its own pointer\n * listeners on this node directly (no handlers to spread), so this is the only thing to attach. /\n ref: React.RefObject<T \| null>;\n /* True for the duration of an active drag — e.g. use it to pause an auto-dismiss timer. /\n isDragging: boolean;\n}\n\nconst EXIT_TRANSITION_MS = 180;\n// Below this many px of movement, direction intent isn't decided yet — lets a vertical scroll\n// gesture that merely starts on the element pass through instead of being hijacked as a swipe.\nconst AXIS_LOCK_THRESHOLD = 10;\n\n/\n Drag-to-dismiss on any pointer type (touch, mouse, pen) via the Pointer Events API. Applies the\n * drag offset and a fading opacity directly to the DOM node (bypassing React state) so the visual\n * tracks the pointer at native speed, then either springs back or animates fully off-screen and\n * calls `onDismiss` once that exit transition completes.\n /\nexport function useSwipeDismiss<T extends HTMLElement>({\n onDismiss,\n axis = 'x',\n distanceThreshold = 80,\n velocityThreshold = 0.5,\n disabled = false,\n mobileOnly = true,\n}: UseSwipeDismissOptions): UseSwipeDismissResult<T> {\n const ref = useRef<T>(null);\n const [isDragging, setIsDragging] = useState(false);\n\n const isCoarsePointer = useCoarsePointer();\n\n const effectiveDisabled = disabled \|\| (mobileOnly && !isCoarsePointer);\n\n // Mutable across the life of one drag; doesn't need to trigger re-renders.\n const dragRef = useRef<{\n pointerId: number;\n startX: number;\n startY: number;\n startTime: number;\n offset: number;\n axisLocked: boolean;\n active: boolean;\n } \| null>(null);\n\n const onDismissRef = useRef(onDismiss);\n useEffect(() => {\n onDismissRef.current = onDismiss;\n });\n\n useEffect(() => {\n const el = ref.current;\n if (!el \|\| effectiveDisabled) return;\n\n function applyTransform(offset: number, transition: string) {\n if (!el) return;\n if (transition !== 'none') {\n // Switching straight from the live drag's `transition: none` to an animated one, in the\n // same tick as the transform change, can get coalesced into a single frame with no\n // animation in between — the element just jumps to its end state instead of sliding\n // there. Forcing a layout read first commits the current (pre-transition) position as\n // its own frame, so the transition below actually has something to animate from.\n void el.offsetHeight;\n }\n const translate = axis === 'x' ? `translateX(${offset}px)` : `translateY(${offset}px)`;\n el.style.transition = transition;\n el.style.transform = translate;\n const fade = Math.max(0, 1 - Math.abs(offset) / (distanceThreshold 2.5));\n el.style.opacity = String(fade);\n }\n\n function onPointerMove(event: PointerEvent) {\n const drag = dragRef.current;\n if (!drag \|\| event.pointerId !== drag.pointerId) return;\n\n const deltaX = event.clientX - drag.startX;\n const deltaY = event.clientY - drag.startY;\n\n if (!drag.axisLocked) {\n const primary = axis === 'x' ? deltaX : deltaY;\n const cross = axis === 'x' ? deltaY : deltaX;\n if (Math.abs(primary) < AXIS_LOCK_THRESHOLD && Math.abs(cross) < AXIS_LOCK_THRESHOLD) return;\n if (Math.abs(cross) > Math.abs(primary)) {\n // The gesture is mostly along the other axis (e.g. a page scroll) — hand it back.\n drag.active = false;\n return;\n }\n drag.axisLocked = true;\n setIsDragging(true);\n }\n\n if (!drag.active) return;\n event.preventDefault();\n drag.offset = axis === 'x' ? deltaX : deltaY;\n applyTransform(drag.offset, 'none');\n }\n\n function finishDrag() {\n const drag = dragRef.current;\n dragRef.current = null;\n window.removeEventListener('pointermove', onPointerMove);\n window.removeEventListener('pointerup', finishDrag);\n window.removeEventListener('pointercancel', finishDrag);\n if (!drag \|\| !drag.active \|\| !drag.axisLocked) {\n setIsDragging(false);\n return;\n }\n\n const elapsed = Math.max(1, Date.now() - drag.startTime);\n const velocity = drag.offset / elapsed;\n const committed = Math.abs(drag.offset) >= distanceThreshold \|\| Math.abs(velocity) >= velocityThreshold;\n\n if (committed) {\n const width = el?.getBoundingClientRect().width ?? 0;\n const exitOffset = Math.sign(drag.offset \|\| 1) * (width + 40);\n applyTransform(\n exitOffset,\n `transform ${EXIT_TRANSITION_MS}ms ease-out, opacity ${EXIT_TRANSITION_MS}ms ease-out`,\n );\n setTimeout(() => onDismissRef.current(), EXIT_TRANSITION_MS);\n } else {\n applyTransform(0, `transform ${EXIT_TRANSITION_MS}ms ease-out, opacity ${EXIT_TRANSITION_MS}ms ease-out`);\n }\n setIsDragging(false);\n }\n\n function onPointerDown(event: PointerEvent) {\n if (dragRef.current \|\| !el) return;\n // A still-\"forwards\"-filling CSS animation (e.g. the toast's entrance slide) wins the\n // cascade over an inline style.transform, so the drag offset below would silently never\n // show up on screen unless the animation is cleared first.\n el.style.animation = 'none';\n dragRef.current = {\n pointerId: event.pointerId,\n startX: event.clientX,\n startY: event.clientY,\n startTime: Date.now(),\n offset: 0,\n axisLocked: false,\n active: true,\n };\n window.addEventListener('pointermove', onPointerMove, { passive: false });\n window.addEventListener('pointerup', finishDrag);\n window.addEventListener('pointercancel', finishDrag);\n }\n\n el.addEventListener('pointerdown', onPointerDown);\n return () => {\n el.removeEventListener('pointerdown', onPointerDown);\n window.removeEventListener('pointermove', onPointerMove);\n window.removeEventListener('pointerup', finishDrag);\n window.removeEventListener('pointercancel', finishDrag);\n };\n }, [axis, distanceThreshold, velocityThreshold, effectiveDisabled]);\n\n return { ref, isDragging };\n}\n"],"mappings":"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"}
1	+ {"version":3,"file":"useSwipeDismiss.mjs","names":[],"sources":["../../../../package/common/hooks/useSwipeDismiss.ts"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react';\n\nimport { useCoarsePointer } from './useCoarsePointer';\n\nexport interface UseSwipeDismissOptions {\n /** Called once the swipe commits (past the threshold) — after the exit transition finishes,\n * not the instant the pointer is released. /\n onDismiss: () => void;\n /* Which axis the drag tracks (default `'x'`, the natural direction for a toast/notification). /\n axis?: 'x' \| 'y';\n /* Distance in px past which releasing counts as a commit, regardless of speed (default `80`). /\n distanceThreshold?: number;\n /* Speed in px/ms past which releasing counts as a commit, regardless of distance (default `0.5`) —\n * lets a fast flick dismiss even if the pointer didn't travel very far. /\n velocityThreshold?: number;\n /* Disables the gesture entirely — no listeners are attached. /\n disabled?: boolean;\n /* Restricts the gesture to coarse (touch) pointers, auto-detected via `matchMedia`. On a\n * mouse/trackpad device a drag is more likely to be a text selection than an intentional\n * dismiss, and other affordances (a close button, auto-dismiss) typically already cover that\n * case. Default `true`; set `false` to allow the gesture on any pointer type. /\n mobileOnly?: boolean;\n}\n\nexport interface UseSwipeDismissResult<T extends HTMLElement> {\n /* Attach to the element that should become draggable. The hook wires up its own pointer\n * listeners on this node directly (no handlers to spread), so this is the only thing to attach.\n \n A callback ref rather than an object one, because the hook has to know when the node changes:\n * an element that is unmounted and rendered again is a different node, and a ref object cannot\n * say so. To keep a ref of your own on the element, call both from one callback. /\n ref: React.RefCallback<T>;\n /* True for the duration of an active drag — e.g. use it to pause an auto-dismiss timer. /\n isDragging: boolean;\n}\n\nconst EXIT_TRANSITION_MS = 180;\n// Below this many px of movement, direction intent isn't decided yet — lets a vertical scroll\n// gesture that merely starts on the element pass through instead of being hijacked as a swipe.\nconst AXIS_LOCK_THRESHOLD = 10;\n\n/\n Drag-to-dismiss on any pointer type (touch, mouse, pen) via the Pointer Events API. Applies the\n * drag offset and a fading opacity directly to the DOM node (bypassing React state) so the visual\n * tracks the pointer at native speed, then either springs back or animates fully off-screen and\n * calls `onDismiss` once that exit transition completes.\n /\nexport function useSwipeDismiss<T extends HTMLElement>({\n onDismiss,\n axis = 'x',\n distanceThreshold = 80,\n velocityThreshold = 0.5,\n disabled = false,\n mobileOnly = true,\n}: UseSwipeDismissOptions): UseSwipeDismissResult<T> {\n // The node lives in state, not in a ref: the listeners have to be re-attached when the element\n // is replaced, and a ref object's `current` changing never re-runs the effect below. Rendering\n // the element again after it was unmounted otherwise left the gesture wired to the old node.\n const [node, setNode] = useState<T \| null>(null);\n const ref = useCallback((element: T \| null) => setNode(element), []);\n const [isDragging, setIsDragging] = useState(false);\n\n const isCoarsePointer = useCoarsePointer();\n\n const effectiveDisabled = disabled \|\| (mobileOnly && !isCoarsePointer);\n\n // Mutable across the life of one drag; doesn't need to trigger re-renders.\n const dragRef = useRef<{\n pointerId: number;\n startX: number;\n startY: number;\n startTime: number;\n offset: number;\n axisLocked: boolean;\n active: boolean;\n } \| null>(null);\n\n const onDismissRef = useRef(onDismiss);\n useEffect(() => {\n onDismissRef.current = onDismiss;\n });\n\n useEffect(() => {\n const el = node;\n if (!el \|\| effectiveDisabled) return;\n\n function applyTransform(offset: number, transition: string) {\n if (!el) return;\n if (transition !== 'none') {\n // Switching straight from the live drag's `transition: none` to an animated one, in the\n // same tick as the transform change, can get coalesced into a single frame with no\n // animation in between — the element just jumps to its end state instead of sliding\n // there. Forcing a layout read first commits the current (pre-transition) position as\n // its own frame, so the transition below actually has something to animate from.\n void el.offsetHeight;\n }\n const translate = axis === 'x' ? `translateX(${offset}px)` : `translateY(${offset}px)`;\n el.style.transition = transition;\n el.style.transform = translate;\n const fade = Math.max(0, 1 - Math.abs(offset) / (distanceThreshold 2.5));\n el.style.opacity = String(fade);\n }\n\n function onPointerMove(event: PointerEvent) {\n const drag = dragRef.current;\n if (!drag \|\| event.pointerId !== drag.pointerId) return;\n\n const deltaX = event.clientX - drag.startX;\n const deltaY = event.clientY - drag.startY;\n\n if (!drag.axisLocked) {\n const primary = axis === 'x' ? deltaX : deltaY;\n const cross = axis === 'x' ? deltaY : deltaX;\n if (Math.abs(primary) < AXIS_LOCK_THRESHOLD && Math.abs(cross) < AXIS_LOCK_THRESHOLD) return;\n if (Math.abs(cross) > Math.abs(primary)) {\n // The gesture is mostly along the other axis (e.g. a page scroll) — hand it back.\n drag.active = false;\n return;\n }\n drag.axisLocked = true;\n setIsDragging(true);\n }\n\n if (!drag.active) return;\n event.preventDefault();\n drag.offset = axis === 'x' ? deltaX : deltaY;\n applyTransform(drag.offset, 'none');\n }\n\n function finishDrag() {\n const drag = dragRef.current;\n dragRef.current = null;\n window.removeEventListener('pointermove', onPointerMove);\n window.removeEventListener('pointerup', finishDrag);\n window.removeEventListener('pointercancel', finishDrag);\n if (!drag \|\| !drag.active \|\| !drag.axisLocked) {\n setIsDragging(false);\n return;\n }\n\n const elapsed = Math.max(1, Date.now() - drag.startTime);\n const velocity = drag.offset / elapsed;\n const committed = Math.abs(drag.offset) >= distanceThreshold \|\| Math.abs(velocity) >= velocityThreshold;\n\n if (committed) {\n const width = el?.getBoundingClientRect().width ?? 0;\n const exitOffset = Math.sign(drag.offset \|\| 1) * (width + 40);\n applyTransform(\n exitOffset,\n `transform ${EXIT_TRANSITION_MS}ms ease-out, opacity ${EXIT_TRANSITION_MS}ms ease-out`,\n );\n setTimeout(() => onDismissRef.current(), EXIT_TRANSITION_MS);\n } else {\n applyTransform(0, `transform ${EXIT_TRANSITION_MS}ms ease-out, opacity ${EXIT_TRANSITION_MS}ms ease-out`);\n }\n setIsDragging(false);\n }\n\n function onPointerDown(event: PointerEvent) {\n if (dragRef.current \|\| !el) return;\n // A still-\"forwards\"-filling CSS animation (e.g. the toast's entrance slide) wins the\n // cascade over an inline style.transform, so the drag offset below would silently never\n // show up on screen unless the animation is cleared first.\n el.style.animation = 'none';\n dragRef.current = {\n pointerId: event.pointerId,\n startX: event.clientX,\n startY: event.clientY,\n startTime: Date.now(),\n offset: 0,\n axisLocked: false,\n active: true,\n };\n window.addEventListener('pointermove', onPointerMove, { passive: false });\n window.addEventListener('pointerup', finishDrag);\n window.addEventListener('pointercancel', finishDrag);\n }\n\n el.addEventListener('pointerdown', onPointerDown);\n return () => {\n el.removeEventListener('pointerdown', onPointerDown);\n window.removeEventListener('pointermove', onPointerMove);\n window.removeEventListener('pointerup', finishDrag);\n window.removeEventListener('pointercancel', finishDrag);\n };\n }, [node, axis, distanceThreshold, velocityThreshold, effectiveDisabled]);\n\n return { ref, isDragging };\n}\n"],"mappings":"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"}

package/dist/esm/common/infiniteBlock/useInfiniteScroll.mjs ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ "use client";import{useEffect as e,useRef as t,useState as n}from"react";function r(r,i,a){let[o,s]=n(!1),c=t(!1),l=t(null),u=t(i);return e(()=>{u.current=i}),e(()=>{let e=r.current,t=l.current;if(a\|\|!e\|\|!t)return;let n=!1,i=()=>{c.current\|\|(c.current=!0,s(!0),u.current().catch(()=>null).finally(()=>{n\|\|(c.current=!1,s(!1),o.unobserve(t),o.observe(t))}))},o=new IntersectionObserver(([e])=>{e.isIntersecting&&i()},{root:e});return o.observe(t),()=>{n=!0,o.disconnect()}},[r,a]),{isLoading:o,sentinelRef:l}}export{r as useInfiniteScroll};
2	+ //# sourceMappingURL=useInfiniteScroll.mjs.map

package/dist/esm/common/infiniteBlock/useInfiniteScroll.mjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"useInfiniteScroll.mjs","names":[],"sources":["../../../../package/common/infiniteBlock/useInfiniteScroll.ts"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\nimport type React from 'react';\n\n// Loads more items once a sentinel element at the end of the list scrolls into view.\n// IntersectionObserver only fires on a change of intersection state, so if a page of\n// freshly-loaded items still doesn't fill the container, the sentinel stays visible and\n// we have to re-arm the observer ourselves to pick up the next page.\nexport function useInfiniteScroll(\n containerRef: React.RefObject<HTMLDivElement | null>,\n onScroll: () => Promise<void>,\n disabled: boolean,\n) {\n const [isLoading, setIsLoading] = useState(false);\n const isLoadingRef = useRef(false);\n const sentinelRef = useRef<HTMLDivElement>(null);\n\n // Kept in a ref so a caller passing a fresh onScroll function each render doesn't\n // tear down and recreate the observer every time.\n const onScrollRef = useRef(onScroll);\n useEffect(() => {\n onScrollRef.current = onScroll;\n });\n\n useEffect(() => {\n const root = containerRef.current;\n const sentinel = sentinelRef.current;\n if (disabled || !root || !sentinel) return undefined;\n\n let cancelled = false;\n\n const loadMore = () => {\n if (isLoadingRef.current) return;\n isLoadingRef.current = true;\n setIsLoading(true);\n\n onScrollRef\n .current()\n .catch(() => null)\n .finally(() => {\n if (cancelled) return;\n isLoadingRef.current = false;\n setIsLoading(false);\n observer.unobserve(sentinel);\n observer.observe(sentinel);\n });\n };\n\n const observer = new IntersectionObserver(\n ([entry]) => {\n if (entry.isIntersecting) loadMore();\n },\n { root },\n );\n\n observer.observe(sentinel);\n\n return () => {\n cancelled = true;\n observer.disconnect();\n };\n }, [containerRef, disabled]);\n\n return { isLoading, sentinelRef };\n}\n"],"mappings":"yEAOA,SAAgB,EACd,EACA,EACA,EACA,CACA,GAAM,CAAC,EAAW,GAAgB,EAAS,EAAK,EAC1C,EAAe,EAAO,EAAK,EAC3B,EAAc,EAAuB,IAAI,EAIzC,EAAc,EAAO,CAAQ,EA4CnC,OA3CA,MAAgB,CACd,EAAY,QAAU,CACxB,CAAC,EAED,MAAgB,CACd,IAAM,EAAO,EAAa,QACpB,EAAW,EAAY,QAC7B,GAAI,GAAY,CAAC,GAAQ,CAAC,EAAU,OAEpC,IAAI,EAAY,GAEV,MAAiB,CACjB,EAAa,UACjB,EAAa,QAAU,GACvB,EAAa,EAAI,EAEjB,EACG,QAAQ,CAAC,CACT,UAAY,IAAI,CAAC,CACjB,YAAc,CACT,IACJ,EAAa,QAAU,GACvB,EAAa,EAAK,EAClB,EAAS,UAAU,CAAQ,EAC3B,EAAS,QAAQ,CAAQ,EAC3B,CAAC,EACL,EAEM,EAAW,IAAI,sBAClB,CAAC,KAAW,CACP,EAAM,gBAAgB,EAAS,CACrC,EACA,CAAE,MAAK,CACT,EAIA,OAFA,EAAS,QAAQ,CAAQ,MAEZ,CACX,EAAY,GACZ,EAAS,WAAW,CACtB,CACF,EAAG,CAAC,EAAc,CAAQ,CAAC,EAEpB,CAAE,YAAW,aAAY,CAClC"}

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

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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"input.mjs","names":[],"sources":["../../../../package/common/input/input.tsx"],"sourcesContent":["import React, { useState, useEffect, useRef, useCallback, useId } from 'react';\nimport cx from 'classnames';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport {\n faPhone,\n faPen,\n faEnvelope,\n faSearch,\n faXmark,\n faEye as passwordHiddenIcon,\n faEyeSlash as passwordShownIcon,\n} from '@fortawesome/free-solid-svg-icons';\nimport Tooltip from 'components/common/tooltip';\nimport AnimatedIcon from 'components/common/animatedIcon';\nimport { useComponentDefaults, useLabels } from 'components/common/configProvider';\nimport styles from './input.module.pcss';\nimport { mergeRefs } from '../utils/mergeRefs';\nimport type { InputLabels, InputProps } from './input.types';\nimport { InputType, InputIconPosition } from './input.types';\n\nconst DEFAULT_LABELS: Required<InputLabels> = {\n clear: 'Clear',\n showPassword: 'Show password',\n hidePassword: 'Hide password',\n clearSearch: 'Clear search',\n};\n\nfunction keyboardActivationProps(onActivate?: ((event: React.SyntheticEvent) => void) \| null) {\n if (!onActivate) return undefined;\n return {\n role: 'button' as const,\n tabIndex: 0,\n onKeyDown: (event: React.KeyboardEvent) => {\n if (event.key !== 'Enter' && event.key !== ' ') return;\n event.preventDefault();\n onActivate(event);\n },\n };\n}\n\nfunction Input(props: InputProps) {\n const {\n name = '',\n id,\n label = '',\n errorMessage = '',\n isValid = true,\n className = '',\n style,\n value = '',\n icon = null,\n iconPosition,\n onChange = () => {},\n onFocus: onFocusProp = null,\n onBlur: onBlurProp = null,\n onMouseEnter: onMouseEnterProp = null,\n onMouseLeave: onMouseLeaveProp = null,\n isUppercase = false,\n isRequired = false,\n tabIndex = 0,\n type = undefined,\n isRow = false,\n onIconClick = null,\n parse = null,\n formValidator = null,\n autoFocus = false,\n suffix = null,\n upperRightLabel = null,\n labelInBorder = false,\n showCancel = false,\n onClearClicked,\n min = null,\n max = null,\n placeholder = '',\n useMatLabelStyle = true,\n alwaysFloatLabel = false,\n autoComplete = null,\n onClick = () => null,\n readOnly = false,\n customInput,\n alwaysShowCancel = false,\n multiline = false,\n rows,\n autoResize = false,\n classNames,\n styles: slotStyles,\n disabled = false,\n labels,\n ref,\n ...rest\n } = useComponentDefaults('Input', props);\n const text = useLabels('Input', labels, DEFAULT_LABELS);\n const [isFocused, setIsFocused] = useState(false);\n // Chrome fills a field on page load without firing anything React sees. The animation the\n // stylesheet binds to :-webkit-autofill is the only notification it gives.\n const [isAutofilled, setIsAutofilled] = useState(false);\n const [isHovered, setIsHovered] = useState(false);\n const [isPasswordShown, setIsPasswordShown] = useState(false);\n const [, forceUpdate] = useState(0);\n\n const inputRef = useRef<HTMLInputElement \| HTMLTextAreaElement>(null);\n const fvRef = useRef(formValidator);\n\n const generatedId = useId();\n const inputId = id \|\| name \|\| generatedId;\n\n const currVal = formValidator ? formValidator.value : value;\n const didSetAutoHeightRef = useRef(false);\n\n const resizeTextarea = useCallback(() => {\n const el = inputRef.current;\n if (!el) return;\n if (!autoResize) {\n // Only undo a height this set, so an explicit one from `styles.input` survives.\n if (didSetAutoHeightRef.current) {\n el.style.height = '';\n didSetAutoHeightRef.current = false;\n }\n return;\n }\n el.style.height = 'auto';\n el.style.height = `${el.scrollHeight}px`;\n didSetAutoHeightRef.current = true;\n }, [autoResize]);\n\n // `currVal` is a dependency because the value can change without passing through\n // `onChangeHandler`: the clear button, a parent resetting it, or `formValidator.set` elsewhere.\n useEffect(() => {\n resizeTextarea();\n }, [resizeTextarea, currVal]);\n\n useEffect(() => {\n if (autoFocus && inputRef.current) {\n setTimeout(() => {\n inputRef.current?.focus();\n }, 1);\n }\n }, [autoFocus]);\n\n useEffect(() => {\n fvRef.current = formValidator;\n const fv = fvRef.current;\n if (!fv) return;\n fv.label = label ?? '';\n fv.validate();\n const listener = () => forceUpdate((n) => n + 1);\n fv.registerOnUpdateListener(listener);\n return () => {\n fv.removeOnUpdateListener(listener);\n };\n }, [formValidator, label]);\n\n const hasError = (): boolean => {\n return formValidator ? formValidator.touched && formValidator.hasError() : !isValid \|\| !!errorMessage;\n };\n\n const computedIsRequired = (): boolean => {\n return !!(\n isRequired \|\|\n (formValidator &&\n formValidator.validators.find((v) => (v as { validatorId?: string }).validatorId === 'required'))\n );\n };\n\n const onMouseEnterHandler = (event: React.MouseEvent) => {\n setIsHovered(true);\n if (onMouseEnterProp) onMouseEnterProp(event);\n };\n\n const onMouseLeaveHandler = (event: React.MouseEvent) => {\n setIsHovered(false);\n if (onMouseLeaveProp) onMouseLeaveProp(event);\n };\n\n const onFocusHandler = (event: React.FocusEvent) => {\n setIsFocused(true);\n if (onFocusProp) onFocusProp(event);\n };\n\n const onBlurHandler = (event: React.FocusEvent) => {\n if (fvRef.current) fvRef.current.touched = true;\n setIsFocused(false);\n if (onBlurProp) onBlurProp(event);\n };\n\n const onChangeHandler = (event: React.ChangeEvent<HTMLInputElement \| HTMLTextAreaElement> \| string): void => {\n let parsedEvent: React.ChangeEvent<HTMLInputElement \| HTMLTextAreaElement> \| undefined;\n let val: string;\n\n if (typeof event !== 'string') {\n parsedEvent = event;\n val = event.target.value;\n } else {\n val = event;\n }\n\n if (parse) val = parse(val);\n if (formValidator) formValidator.set(val);\n if (onChange) onChange(val, parsedEvent);\n resizeTextarea();\n };\n\n const getInputType = (): string \| undefined => {\n if (type === InputType.Email) return undefined;\n if (type === InputType.Phone) return 'tel';\n if (type === InputType.Search) return 'search';\n if (type === 'password' && isPasswordShown) return 'text';\n return type;\n };\n\n const getInputMode = (): React.HTMLAttributes<HTMLInputElement>['inputMode'] => {\n if (type === InputType.Email) return 'email';\n if (type === InputType.Phone) return 'tel';\n if (type === InputType.Search) return 'search';\n return undefined;\n };\n\n const hasIcon = type && type !== InputType.Date && type !== InputType.Iban && type !== InputType.HasNoIcon;\n\n const isFunctionalIconType = type === InputType.Search \|\| type === InputType.Password;\n const hasCustomIcon = !!icon;\n const customIconApplies = hasCustomIcon && !isFunctionalIconType;\n\n const defaultsLeftWithoutMatLabel = type === InputType.Email \|\| type === InputType.Phone \|\| type === InputType.Search;\n const resolvedIconPosition =\n iconPosition ??\n (!useMatLabelStyle && defaultsLeftWithoutMatLabel ? InputIconPosition.Left : InputIconPosition.Right);\n const iconIsLeft = resolvedIconPosition === InputIconPosition.Left;\n\n const iconProps = {\n className: cx(styles.inputFieldIcon, {\n [styles.inputFieldIconNotClickable]: !onIconClick,\n [styles.inputFieldIconLeft]: iconIsLeft,\n }),\n onClick: onIconClick ?? undefined,\n ...keyboardActivationProps(onIconClick),\n };\n\n const customIcon = icon as React.ReactElement<{ className?: string; onClick?: React.MouseEventHandler }> \| null;\n const resolvedCustomIconClick = onIconClick ?? customIcon?.props.onClick;\n const renderedIcon =\n customIconApplies && customIcon\n ? React.cloneElement(customIcon, {\n className: cx(\n styles.inputFieldIcon,\n {\n [styles.inputFieldIconNotClickable]: !resolvedCustomIconClick,\n [styles.inputFieldIconLeft]: iconIsLeft,\n },\n customIcon.props.className,\n ),\n onClick: resolvedCustomIconClick,\n ...keyboardActivationProps(resolvedCustomIconClick as ((event: React.SyntheticEvent) => void) \| undefined),\n })\n : null;\n\n const hasLeftIcon = (hasIcon \|\| hasCustomIcon) && iconIsLeft;\n\n const passwordIconProps = {\n className: cx(styles.inputFieldIcon, styles.inputFieldIconPassword, { [styles.inputFieldIconLeft]: iconIsLeft }),\n onClick: () => setIsPasswordShown(!isPasswordShown),\n ...keyboardActivationProps(() => setIsPasswordShown(!isPasswordShown)),\n 'aria-label': isPasswordShown ? text.hidePassword : text.showPassword,\n };\n\n const hasErr = hasError();\n\n let editedLabel = label;\n if (editedLabel && computedIsRequired()) editedLabel = `${editedLabel} `;\n const requiredMark = computedIsRequired() ? <span className={styles.requiredMark}></span> : null;\n\n const showFocus = isFocused && !readOnly;\n const shouldFloatLabel =\n useMatLabelStyle && (alwaysFloatLabel \|\| showFocus \|\| currVal \|\| isAutofilled \|\| type === InputType.Date);\n\n const handleAutofillAnimation = (event: React.AnimationEvent) => {\n const { animationName } = event;\n if (animationName === styles.inputAutofillStart) {\n setIsAutofilled(true);\n // The field is controlled, so the commit this triggers would write `value` back over\n // what the browser just put there and blank it. Replay it as an ordinary change first.\n const filled = (event.currentTarget as HTMLInputElement).value;\n if (filled && filled !== String(currVal ?? '')) onChangeHandler(filled);\n return;\n }\n if (animationName === styles.inputAutofillEnd) {\n setIsAutofilled(false);\n return;\n }\n // Not ours. `onAnimationStart` arrives through `rest`, and the consumer must not receive\n // the two above: the `:not()` rule fires one of them on every mount.\n rest.onAnimationStart?.(event as React.AnimationEvent<HTMLInputElement>);\n };\n\n const isSearchCleared = type === InputType.Search && !!currVal;\n\n const customInputProps = customInput?.props as { className?: string; style?: React.CSSProperties } \| undefined;\n\n function handleClear() {\n if (formValidator) formValidator.set('');\n onChange?.('');\n onClearClicked?.();\n }\n\n return (\n <div className={cx(styles.input, { [styles.inputIconLeft]: hasLeftIcon }, className)} style={style}>\n <label\n htmlFor={inputId}\n className={cx(styles.inputLabel, classNames?.label, {\n [styles.inputLabelColumn]: !isRow,\n [styles.inputLabelInBorder]: labelInBorder,\n })}\n style={slotStyles?.label}\n >\n {label && !useMatLabelStyle ? (\n <span className={styles.inputLabelText}>\n {label}\n {requiredMark}\n </span>\n ) : null}\n {upperRightLabel && (\n <div\n className={cx(styles.inputUpperRightLabel, classNames?.upperRightLabel)}\n style={slotStyles?.upperRightLabel}\n >\n {upperRightLabel}\n </div>\n )}\n <div\n className={cx(styles.inputContainer, { [styles.inputContainerMultiline]: multiline }, classNames?.container)}\n style={slotStyles?.container}\n onMouseEnter={onMouseEnterHandler}\n onMouseLeave={onMouseLeaveHandler}\n >\n {renderedIcon}\n {React.cloneElement(customInput \|\| (multiline ? <textarea /> : <input />), {\n ...rest,\n className: cx(\n styles.inputField,\n {\n [styles.inputFieldUppercase]: isUppercase,\n [styles.inputFieldDate]: type === InputType.Date,\n [styles.inputFieldDefault]: type !== InputType.Date,\n [styles.inputFieldWithIcon]: hasIcon \|\| hasCustomIcon,\n [styles.inputFieldWithIconLeft]: hasLeftIcon,\n [styles.inputFieldMultiline]: multiline,\n [styles.inputFieldMultilineAutoResize]: multiline && autoResize,\n [styles.inputFieldReadOnly]: readOnly && !disabled,\n },\n classNames?.input,\n customInputProps?.className,\n ),\n style:\n customInputProps?.style \|\| slotStyles?.input\n ? { ...customInputProps?.style, ...slotStyles?.input }\n : undefined,\n name,\n id: inputId,\n value: currVal,\n tabIndex,\n ref: customInput ? undefined : mergeRefs(inputRef, ref),\n onChange: onChangeHandler,\n onAnimationStart: handleAutofillAnimation,\n onFocus: onFocusHandler,\n onBlur: onBlurHandler,\n placeholder: !useMatLabelStyle ? placeholder : '',\n autoComplete,\n onClick,\n readOnly,\n disabled,\n ...(!multiline && { type: getInputType(), inputMode: rest.inputMode ?? getInputMode(), min, max }),\n ...(multiline && rows !== undefined && { rows }),\n })}\n {suffix && (\n <div className={cx(styles.inputFieldSuffix, classNames?.suffix)} style={slotStyles?.suffix}>\n {suffix}\n </div>\n )}\n </div>\n <fieldset\n className={cx(styles.inputFieldset, classNames?.fieldset, {\n [styles.inputFieldsetNoNotch]: !label,\n [styles.inputContainerBorderFocused]: showFocus,\n [styles.inputContainerBorderSearchFocused]: type === InputType.Search && (showFocus \|\| !!currVal),\n [styles.inputContainerBorderInvalid]: hasErr,\n [styles.inputContainerBorderError]: hasErr,\n })}\n style={slotStyles?.fieldset}\n >\n <legend\n className={cx(styles.inputFieldsetLegend, {\n [styles.inputFieldsetLegendActive]: shouldFloatLabel,\n })}\n >\n <span>{editedLabel}</span>\n </legend>\n </fieldset>\n {useMatLabelStyle && label && (\n <div\n className={cx(styles.inputMatLabel, {\n [styles.inputMatLabelFloating]: shouldFloatLabel,\n [styles.inputMatLabelMultiline]: multiline && !shouldFloatLabel,\n })}\n >\n {label}\n {requiredMark}\n </div>\n )}\n {useMatLabelStyle && placeholder && (\n <div\n className={cx(\n styles.inputPlaceholder,\n showFocus && !currVal && !isAutofilled && styles.inputPlaceholderShown,\n multiline && styles.inputPlaceholderMultiline,\n )}\n >\n {placeholder}\n </div>\n )}\n <Tooltip\n variant='error'\n message={formValidator ? formValidator.getCurrentErrorMessage() : errorMessage \|\| ''}\n isVisible={hasErr && (isFocused \|\| isHovered)}\n />\n </label>\n\n {type === InputType.Phone && !hasCustomIcon && <FontAwesomeIcon icon={faPhone} {...iconProps} />}\n {type === InputType.Email && !hasCustomIcon && <FontAwesomeIcon icon={faEnvelope} {...iconProps} />}\n {type === InputType.Edit && !hasCustomIcon && <FontAwesomeIcon icon={faPen} {...iconProps} />}\n {type === InputType.Search && (\n <AnimatedIcon\n icon={isSearchCleared ? faXmark : faSearch}\n className={cx(styles.inputFieldIcon, {\n [styles.inputFieldIconNotClickable]: !isSearchCleared,\n [styles.inputFieldIconLeft]: iconIsLeft,\n })}\n onClick={isSearchCleared ? handleClear : undefined}\n {...keyboardActivationProps(isSearchCleared ? handleClear : undefined)}\n aria-label={isSearchCleared ? text.clearSearch : undefined}\n />\n )}\n {type === InputType.Password && (\n <FontAwesomeIcon icon={isPasswordShown ? passwordShownIcon : passwordHiddenIcon} {...passwordIconProps} />\n )}\n\n {((showCancel && currVal && (isFocused \|\| isHovered)) \|\| alwaysShowCancel) && type !== InputType.Search && (\n <FontAwesomeIcon\n icon={faXmark}\n className={styles.inputFieldIcon}\n onClick={handleClear}\n onMouseEnter={() => setIsHovered(true)}\n onMouseLeave={() => setIsHovered(false)}\n {...keyboardActivationProps(handleClear)}\n aria-label={text.clear}\n />\n )}\n </div>\n );\n}\n\nexport default Input;\n"],"mappings":"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"}
1	+ {"version":3,"file":"input.mjs","names":[],"sources":["../../../../package/common/input/input.tsx"],"sourcesContent":["import React, { useState, useEffect, useRef, useCallback, useId } from 'react';\nimport cx from 'classnames';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport {\n faPhone,\n faPen,\n faEnvelope,\n faSearch,\n faXmark,\n faEye as passwordHiddenIcon,\n faEyeSlash as passwordShownIcon,\n} from '@fortawesome/free-solid-svg-icons';\nimport Tooltip from 'components/common/tooltip';\nimport AnimatedIcon from 'components/common/animatedIcon';\nimport { useComponentDefaults, useLabels } from 'components/common/configProvider';\nimport styles from './input.module.pcss';\nimport { mergeRefs } from '../utils/mergeRefs';\nimport type { InputLabels, InputProps } from './input.types';\nimport { InputType, InputIconPosition } from './input.types';\n\nconst DEFAULT_LABELS: Required<InputLabels> = {\n clear: 'Clear',\n showPassword: 'Show password',\n hidePassword: 'Hide password',\n clearSearch: 'Clear search',\n};\n\nfunction keyboardActivationProps(onActivate?: ((event: React.SyntheticEvent) => void) \| null) {\n if (!onActivate) return undefined;\n return {\n role: 'button' as const,\n tabIndex: 0,\n onKeyDown: (event: React.KeyboardEvent) => {\n if (event.key !== 'Enter' && event.key !== ' ') return;\n event.preventDefault();\n onActivate(event);\n },\n };\n}\n\nfunction Input(props: InputProps) {\n const {\n name = '',\n id,\n label = '',\n errorMessage = '',\n isValid = true,\n className = '',\n style,\n value = '',\n icon = null,\n iconPosition,\n onChange = () => {},\n onFocus: onFocusProp = null,\n onBlur: onBlurProp = null,\n onMouseEnter: onMouseEnterProp = null,\n onMouseLeave: onMouseLeaveProp = null,\n isUppercase = false,\n isRequired = false,\n tabIndex = 0,\n type = undefined,\n isRow = false,\n onIconClick = null,\n parse = null,\n formValidator = null,\n autoFocus = false,\n suffix = null,\n upperRightLabel = null,\n labelInBorder = false,\n showCancel = false,\n onClearClicked,\n min = null,\n max = null,\n placeholder = '',\n useMatLabelStyle = true,\n alwaysFloatLabel = false,\n autoComplete = null,\n onClick = () => null,\n readOnly = false,\n customInput,\n alwaysShowCancel = false,\n multiline = false,\n rows,\n autoResize = false,\n classNames,\n styles: slotStyles,\n disabled = false,\n labels,\n ref,\n ...rest\n } = useComponentDefaults('Input', props);\n const text = useLabels('Input', labels, DEFAULT_LABELS);\n const [isFocused, setIsFocused] = useState(false);\n // Chrome fills a field on page load without firing anything React sees. The animation the\n // stylesheet binds to :-webkit-autofill is the only notification it gives.\n const [isAutofilled, setIsAutofilled] = useState(false);\n const [isHovered, setIsHovered] = useState(false);\n const [isPasswordShown, setIsPasswordShown] = useState(false);\n const [, forceUpdate] = useState(0);\n\n const inputRef = useRef<HTMLInputElement \| HTMLTextAreaElement>(null);\n const fvRef = useRef(formValidator);\n\n const generatedId = useId();\n const inputId = id \|\| name \|\| generatedId;\n\n const currVal = formValidator ? formValidator.value : value;\n const didSetAutoHeightRef = useRef(false);\n\n const resizeTextarea = useCallback(() => {\n const el = inputRef.current;\n if (!el) return;\n if (!autoResize) {\n // Only undo a height this set, so an explicit one from `styles.input` survives.\n if (didSetAutoHeightRef.current) {\n el.style.height = '';\n didSetAutoHeightRef.current = false;\n }\n return;\n }\n el.style.height = 'auto';\n el.style.height = `${el.scrollHeight}px`;\n didSetAutoHeightRef.current = true;\n }, [autoResize]);\n\n // `currVal` is a dependency because the value can change without passing through\n // `onChangeHandler`: the clear button, a parent resetting it, or `formValidator.set` elsewhere.\n useEffect(() => {\n resizeTextarea();\n }, [resizeTextarea, currVal]);\n\n useEffect(() => {\n if (autoFocus && inputRef.current) {\n setTimeout(() => {\n inputRef.current?.focus();\n }, 1);\n }\n }, [autoFocus]);\n\n useEffect(() => {\n fvRef.current = formValidator;\n const fv = fvRef.current;\n if (!fv) return;\n fv.label = label ?? '';\n fv.validate();\n const listener = () => forceUpdate((n) => n + 1);\n fv.registerOnUpdateListener(listener);\n return () => {\n fv.removeOnUpdateListener(listener);\n };\n }, [formValidator, label]);\n\n const hasError = (): boolean => {\n return formValidator ? formValidator.touched && formValidator.hasError() : !isValid \|\| !!errorMessage;\n };\n\n const computedIsRequired = (): boolean => {\n return !!(\n isRequired \|\|\n (formValidator &&\n formValidator.validators.find((v) => (v as { validatorId?: string }).validatorId === 'required'))\n );\n };\n\n const onMouseEnterHandler = (event: React.MouseEvent) => {\n setIsHovered(true);\n if (onMouseEnterProp) onMouseEnterProp(event);\n };\n\n const onMouseLeaveHandler = (event: React.MouseEvent) => {\n setIsHovered(false);\n if (onMouseLeaveProp) onMouseLeaveProp(event);\n };\n\n const onFocusHandler = (event: React.FocusEvent) => {\n setIsFocused(true);\n if (onFocusProp) onFocusProp(event);\n };\n\n const onBlurHandler = (event: React.FocusEvent) => {\n if (fvRef.current) fvRef.current.touched = true;\n setIsFocused(false);\n if (onBlurProp) onBlurProp(event);\n };\n\n const onChangeHandler = (event: React.ChangeEvent<HTMLInputElement \| HTMLTextAreaElement> \| string): void => {\n let parsedEvent: React.ChangeEvent<HTMLInputElement \| HTMLTextAreaElement> \| undefined;\n let val: string;\n\n if (typeof event !== 'string') {\n parsedEvent = event;\n val = event.target.value;\n } else {\n val = event;\n }\n\n if (parse) val = parse(val);\n if (formValidator) formValidator.set(val);\n if (onChange) onChange(val, parsedEvent);\n resizeTextarea();\n };\n\n const getInputType = (): string \| undefined => {\n if (type === InputType.Email) return undefined;\n if (type === InputType.Phone) return 'tel';\n if (type === InputType.Search) return 'search';\n if (type === 'password' && isPasswordShown) return 'text';\n return type;\n };\n\n const getInputMode = (): React.HTMLAttributes<HTMLInputElement>['inputMode'] => {\n if (type === InputType.Email) return 'email';\n if (type === InputType.Phone) return 'tel';\n if (type === InputType.Search) return 'search';\n return undefined;\n };\n\n const hasIcon = type && type !== InputType.Date && type !== InputType.Iban && type !== InputType.HasNoIcon;\n\n const isFunctionalIconType = type === InputType.Search \|\| type === InputType.Password;\n const hasCustomIcon = !!icon;\n const customIconApplies = hasCustomIcon && !isFunctionalIconType;\n\n const defaultsLeftWithoutMatLabel = type === InputType.Email \|\| type === InputType.Phone \|\| type === InputType.Search;\n const resolvedIconPosition =\n iconPosition ??\n (!useMatLabelStyle && defaultsLeftWithoutMatLabel ? InputIconPosition.Left : InputIconPosition.Right);\n const iconIsLeft = resolvedIconPosition === InputIconPosition.Left;\n\n const iconProps = {\n className: cx(styles.inputFieldIcon, {\n [styles.inputFieldIconNotClickable]: !onIconClick,\n [styles.inputFieldIconLeft]: iconIsLeft,\n }),\n onClick: onIconClick ?? undefined,\n ...keyboardActivationProps(onIconClick),\n };\n\n const customIcon = icon as React.ReactElement<{ className?: string; onClick?: React.MouseEventHandler }> \| null;\n const resolvedCustomIconClick = onIconClick ?? customIcon?.props.onClick;\n const renderedIcon =\n customIconApplies && customIcon\n ? React.cloneElement(customIcon, {\n className: cx(\n styles.inputFieldIcon,\n {\n [styles.inputFieldIconNotClickable]: !resolvedCustomIconClick,\n [styles.inputFieldIconLeft]: iconIsLeft,\n },\n customIcon.props.className,\n ),\n onClick: resolvedCustomIconClick,\n ...keyboardActivationProps(resolvedCustomIconClick as ((event: React.SyntheticEvent) => void) \| undefined),\n })\n : null;\n\n const hasLeftIcon = (hasIcon \|\| hasCustomIcon) && iconIsLeft;\n\n const passwordIconProps = {\n className: cx(styles.inputFieldIcon, styles.inputFieldIconPassword, { [styles.inputFieldIconLeft]: iconIsLeft }),\n onClick: () => setIsPasswordShown(!isPasswordShown),\n ...keyboardActivationProps(() => setIsPasswordShown(!isPasswordShown)),\n 'aria-label': isPasswordShown ? text.hidePassword : text.showPassword,\n };\n\n const hasErr = hasError();\n\n let editedLabel = label;\n if (editedLabel && computedIsRequired()) editedLabel = `${editedLabel} `;\n const requiredMark = computedIsRequired() ? <span className={styles.requiredMark}></span> : null;\n\n const showFocus = isFocused && !readOnly;\n const shouldFloatLabel =\n useMatLabelStyle && (alwaysFloatLabel \|\| showFocus \|\| currVal \|\| isAutofilled \|\| type === InputType.Date);\n\n const handleAutofillAnimation = (event: React.AnimationEvent) => {\n const { animationName } = event;\n if (animationName === styles.inputAutofillStart) {\n setIsAutofilled(true);\n // The field is controlled, so the commit this triggers would write `value` back over\n // what the browser just put there and blank it. Replay it as an ordinary change first.\n const filled = (event.currentTarget as HTMLInputElement).value;\n if (filled && filled !== String(currVal ?? '')) onChangeHandler(filled);\n return;\n }\n if (animationName === styles.inputAutofillEnd) {\n setIsAutofilled(false);\n return;\n }\n // Not ours. `onAnimationStart` arrives through `rest`, and the consumer must not receive\n // the two above: the `:not()` rule fires one of them on every mount.\n rest.onAnimationStart?.(event as React.AnimationEvent<HTMLInputElement>);\n };\n\n const isSearchCleared = type === InputType.Search && !!currVal;\n\n const customInputProps = customInput?.props as { className?: string; style?: React.CSSProperties } \| undefined;\n\n function handleClear() {\n if (formValidator) formValidator.set('');\n onChange?.('');\n onClearClicked?.();\n }\n\n return (\n <div className={cx(styles.input, { [styles.inputIconLeft]: hasLeftIcon }, className)} style={style}>\n <label\n htmlFor={inputId}\n className={cx(styles.inputLabel, classNames?.label, {\n [styles.inputLabelColumn]: !isRow,\n [styles.inputLabelInBorder]: labelInBorder,\n })}\n style={slotStyles?.label}\n >\n {label && !useMatLabelStyle ? (\n <span className={styles.inputLabelText}>\n {label}\n {requiredMark}\n </span>\n ) : null}\n {upperRightLabel && (\n <div\n className={cx(styles.inputUpperRightLabel, classNames?.upperRightLabel)}\n style={slotStyles?.upperRightLabel}\n >\n {upperRightLabel}\n </div>\n )}\n <div\n className={cx(styles.inputContainer, { [styles.inputContainerMultiline]: multiline }, classNames?.container)}\n style={slotStyles?.container}\n onMouseEnter={onMouseEnterHandler}\n onMouseLeave={onMouseLeaveHandler}\n >\n {renderedIcon}\n {React.cloneElement(customInput \|\| (multiline ? <textarea /> : <input />), {\n ...rest,\n className: cx(\n styles.inputField,\n {\n [styles.inputFieldUppercase]: isUppercase,\n [styles.inputFieldDate]: type === InputType.Date,\n [styles.inputFieldDefault]: type !== InputType.Date,\n [styles.inputFieldWithIcon]: hasIcon \|\| hasCustomIcon,\n [styles.inputFieldWithIconLeft]: hasLeftIcon,\n [styles.inputFieldMultiline]: multiline,\n [styles.inputFieldMultilineAutoResize]: multiline && autoResize,\n [styles.inputFieldReadOnly]: readOnly && !disabled,\n },\n classNames?.input,\n customInputProps?.className,\n ),\n style:\n customInputProps?.style \|\| slotStyles?.input\n ? { ...customInputProps?.style, ...slotStyles?.input }\n : undefined,\n name,\n id: inputId,\n value: currVal,\n tabIndex,\n ref: customInput ? undefined : mergeRefs(inputRef, ref),\n onChange: onChangeHandler,\n onAnimationStart: handleAutofillAnimation,\n onFocus: onFocusHandler,\n onBlur: onBlurHandler,\n placeholder: !useMatLabelStyle ? placeholder : '',\n autoComplete,\n onClick,\n readOnly,\n disabled,\n ...(!multiline && { type: getInputType(), inputMode: rest.inputMode ?? getInputMode(), min, max }),\n ...(multiline && rows !== undefined && { rows }),\n })}\n {suffix && (\n <div className={cx(styles.inputFieldSuffix, classNames?.suffix)} style={slotStyles?.suffix}>\n {suffix}\n </div>\n )}\n </div>\n <fieldset\n className={cx(styles.inputFieldset, classNames?.fieldset, {\n [styles.inputContainerBorderFocused]: showFocus,\n [styles.inputContainerBorderSearchFocused]: type === InputType.Search && (showFocus \|\| !!currVal),\n [styles.inputContainerBorderInvalid]: hasErr,\n [styles.inputContainerBorderError]: hasErr,\n })}\n style={slotStyles?.fieldset}\n >\n <legend\n className={cx(styles.inputFieldsetLegend, {\n [styles.inputFieldsetLegendActive]: shouldFloatLabel,\n })}\n >\n <span>{editedLabel}</span>\n </legend>\n </fieldset>\n {useMatLabelStyle && label && (\n <div\n className={cx(styles.inputMatLabel, {\n [styles.inputMatLabelFloating]: shouldFloatLabel,\n [styles.inputMatLabelMultiline]: multiline && !shouldFloatLabel,\n })}\n >\n {label}\n {requiredMark}\n </div>\n )}\n {useMatLabelStyle && placeholder && (\n <div\n className={cx(\n styles.inputPlaceholder,\n showFocus && !currVal && !isAutofilled && styles.inputPlaceholderShown,\n multiline && styles.inputPlaceholderMultiline,\n )}\n >\n {placeholder}\n </div>\n )}\n <Tooltip\n variant='error'\n message={formValidator ? formValidator.getCurrentErrorMessage() : errorMessage \|\| ''}\n isVisible={hasErr && (isFocused \|\| isHovered)}\n />\n </label>\n\n {type === InputType.Phone && !hasCustomIcon && <FontAwesomeIcon icon={faPhone} {...iconProps} />}\n {type === InputType.Email && !hasCustomIcon && <FontAwesomeIcon icon={faEnvelope} {...iconProps} />}\n {type === InputType.Edit && !hasCustomIcon && <FontAwesomeIcon icon={faPen} {...iconProps} />}\n {type === InputType.Search && (\n <AnimatedIcon\n icon={isSearchCleared ? faXmark : faSearch}\n className={cx(styles.inputFieldIcon, {\n [styles.inputFieldIconNotClickable]: !isSearchCleared,\n [styles.inputFieldIconLeft]: iconIsLeft,\n })}\n onClick={isSearchCleared ? handleClear : undefined}\n {...keyboardActivationProps(isSearchCleared ? handleClear : undefined)}\n aria-label={isSearchCleared ? text.clearSearch : undefined}\n />\n )}\n {type === InputType.Password && (\n <FontAwesomeIcon icon={isPasswordShown ? passwordShownIcon : passwordHiddenIcon} {...passwordIconProps} />\n )}\n\n {((showCancel && currVal && (isFocused \|\| isHovered)) \|\| alwaysShowCancel) && type !== InputType.Search && (\n <FontAwesomeIcon\n icon={faXmark}\n className={styles.inputFieldIcon}\n onClick={handleClear}\n onMouseEnter={() => setIsHovered(true)}\n onMouseLeave={() => setIsHovered(false)}\n {...keyboardActivationProps(handleClear)}\n aria-label={text.clear}\n />\n )}\n </div>\n );\n}\n\nexport default Input;\n"],"mappings":"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"}

package/dist/esm/common/input/input.module.mjs CHANGED Viewed

@@ -1,2 +1,2 @@
-"use client";var e=`required-mark_xGJdX`,t=`input_VKNCE`,n=`input-placeholder_IZH-l`,r=`input-placeholder-shown_mm35e`,i=`fadeIn_kmX3i`,a=`input-placeholder-multiline_tLHAl`,o=`input-matLabel_-05ey`,s=`input-matLabel-floating_1P2YE`,c=`input-matLabel-multiline_miIZJ`,l=`input-fieldset_XCibg`,u=`input-fieldset-no-notch_re-Fw`,d=`input-fieldset-legend_X23zp`,f=`input-fieldset-legend-active_t-9hu`,p=`input-iconLeft_itIuo`,m=`input-container_M1RoG`,h=`input-container-multiline_eLw7h`,g=`input-container-border_l131I`,_=`input-container-border-focused_ct6oY`,v=`input-container-border-searchFocused_lq088`,y=`input-container-border-invalid_Wdbq2`,b=`input-container-border-error_gzfPG`,x=`input-label_w1hMR`,S=`input-label-column_qBFPC`,C=`input-label-text_-J5qQ`,w=`input-upper-right-label_I-WG3`,T=`input-field_pmDvZ`,E=`inputAutofillStart_tOifY`,D=`inputAutofillEnd_KLDQQ`,O=`input-field-withIcon_VpfmK`,k=`input-field-withIcon-left_Io7lU`,A=`input-field-suffix_NZpXp`,j=`input-field-date_UHJEZ`,M=`input-field-default_TKipA`,N=`input-field-readOnly_Eut34`,P=`input-field-uppercase_UV6f1`,F=`input-field-multiline_al3V1`,I=`input-field-multiline-autoResize_nK33P`,L=`input-field-icon_YyJIr`,R=`input-field-icon-left_m2XB1`,z=`input-field-icon-notClickable_7j24I`,B=`input-error_LIG23`,V={"required-mark":`required-mark_xGJdX`,requiredMark:e,input:t,"input-placeholder":`input-placeholder_IZH-l`,inputPlaceholder:n,"input-placeholder-shown":`input-placeholder-shown_mm35e`,inputPlaceholderShown:r,fadeIn:i,"input-placeholder-multiline":`input-placeholder-multiline_tLHAl`,inputPlaceholderMultiline:a,"input-matLabel":`input-matLabel_-05ey`,inputMatLabel:o,"input-matLabel-floating":`input-matLabel-floating_1P2YE`,inputMatLabelFloating:s,"input-matLabel-multiline":`input-matLabel-multiline_miIZJ`,inputMatLabelMultiline:c,"input-fieldset":`input-fieldset_XCibg`,inputFieldset:l,"input-fieldset-no-notch":`input-fieldset-no-notch_re-Fw`,inputFieldsetNoNotch:u,"input-fieldset-legend":`input-fieldset-legend_X23zp`,inputFieldsetLegend:d,"input-fieldset-legend-active":`input-fieldset-legend-active_t-9hu`,inputFieldsetLegendActive:f,"input-iconLeft":`input-iconLeft_itIuo`,inputIconLeft:p,"input-container":`input-container_M1RoG`,inputContainer:m,"input-container-multiline":`input-container-multiline_eLw7h`,inputContainerMultiline:h,"input-container-border":`input-container-border_l131I`,inputContainerBorder:g,"input-container-border-focused":`input-container-border-focused_ct6oY`,inputContainerBorderFocused:_,"input-container-border-searchFocused":`input-container-border-searchFocused_lq088`,inputContainerBorderSearchFocused:v,"input-container-border-invalid":`input-container-border-invalid_Wdbq2`,inputContainerBorderInvalid:y,"input-container-border-error":`input-container-border-error_gzfPG`,inputContainerBorderError:b,"input-label":`input-label_w1hMR`,inputLabel:x,"input-label-column":`input-label-column_qBFPC`,inputLabelColumn:S,"input-label-text":`input-label-text_-J5qQ`,inputLabelText:C,"input-upper-right-label":`input-upper-right-label_I-WG3`,inputUpperRightLabel:w,"input-field":`input-field_pmDvZ`,inputField:T,inputAutofillStart:E,inputAutofillEnd:D,"input-field-withIcon":`input-field-withIcon_VpfmK`,inputFieldWithIcon:O,"input-field-withIcon-left":`input-field-withIcon-left_Io7lU`,inputFieldWithIconLeft:k,"input-field-suffix":`input-field-suffix_NZpXp`,inputFieldSuffix:A,"input-field-date":`input-field-date_UHJEZ`,inputFieldDate:j,"input-field-default":`input-field-default_TKipA`,inputFieldDefault:M,"input-field-readOnly":`input-field-readOnly_Eut34`,inputFieldReadOnly:N,"input-field-uppercase":`input-field-uppercase_UV6f1`,inputFieldUppercase:P,"input-field-multiline":`input-field-multiline_al3V1`,inputFieldMultiline:F,"input-field-multiline-autoResize":`input-field-multiline-autoResize_nK33P`,inputFieldMultilineAutoResize:I,"input-field-icon":`input-field-icon_YyJIr`,inputFieldIcon:L,"input-field-icon-left":`input-field-icon-left_m2XB1`,inputFieldIconLeft:R,"input-field-icon-notClickable":`input-field-icon-notClickable_7j24I`,inputFieldIconNotClickable:z,"input-error":`input-error_LIG23`,inputError:B};export{V as default,i as fadeIn,t as input,D as inputAutofillEnd,E as inputAutofillStart,m as inputContainer,g as inputContainerBorder,b as inputContainerBorderError,_ as inputContainerBorderFocused,y as inputContainerBorderInvalid,v as inputContainerBorderSearchFocused,h as inputContainerMultiline,B as inputError,T as inputField,j as inputFieldDate,M as inputFieldDefault,L as inputFieldIcon,R as inputFieldIconLeft,z as inputFieldIconNotClickable,F as inputFieldMultiline,I as inputFieldMultilineAutoResize,N as inputFieldReadOnly,A as inputFieldSuffix,P as inputFieldUppercase,O as inputFieldWithIcon,k as inputFieldWithIconLeft,l as inputFieldset,d as inputFieldsetLegend,f as inputFieldsetLegendActive,u as inputFieldsetNoNotch,p as inputIconLeft,x as inputLabel,S as inputLabelColumn,C as inputLabelText,o as inputMatLabel,s as inputMatLabelFloating,c as inputMatLabelMultiline,n as inputPlaceholder,a as inputPlaceholderMultiline,r as inputPlaceholderShown,w as inputUpperRightLabel,e as requiredMark};
+"use client";var e=`required-mark_xGJdX`,t=`input_VKNCE`,n=`input-placeholder_IZH-l`,r=`input-placeholder-shown_mm35e`,i=`fadeIn_kmX3i`,a=`input-placeholder-multiline_tLHAl`,o=`input-matLabel_-05ey`,s=`input-matLabel-floating_1P2YE`,c=`input-matLabel-multiline_miIZJ`,l=`input-fieldset_XCibg`,u=`input-fieldset-legend_X23zp`,d=`input-fieldset-legend-active_t-9hu`,f=`input-iconLeft_itIuo`,p=`input-container_M1RoG`,m=`input-container-multiline_eLw7h`,h=`input-container-border_l131I`,g=`input-container-border-focused_ct6oY`,_=`input-container-border-searchFocused_lq088`,v=`input-container-border-invalid_Wdbq2`,y=`input-container-border-error_gzfPG`,b=`input-label_w1hMR`,x=`input-label-column_qBFPC`,S=`input-label-text_-J5qQ`,C=`input-upper-right-label_I-WG3`,w=`input-field_pmDvZ`,T=`inputAutofillStart_tOifY`,E=`inputAutofillEnd_KLDQQ`,D=`input-field-withIcon_VpfmK`,O=`input-field-withIcon-left_Io7lU`,k=`input-field-suffix_NZpXp`,A=`input-field-date_UHJEZ`,j=`input-field-default_TKipA`,M=`input-field-readOnly_Eut34`,N=`input-field-uppercase_UV6f1`,P=`input-field-multiline_al3V1`,F=`input-field-multiline-autoResize_nK33P`,I=`input-field-icon_YyJIr`,L=`input-field-icon-left_m2XB1`,R=`input-field-icon-notClickable_7j24I`,z=`input-error_LIG23`,B={"required-mark":`required-mark_xGJdX`,requiredMark:e,input:t,"input-placeholder":`input-placeholder_IZH-l`,inputPlaceholder:n,"input-placeholder-shown":`input-placeholder-shown_mm35e`,inputPlaceholderShown:r,fadeIn:i,"input-placeholder-multiline":`input-placeholder-multiline_tLHAl`,inputPlaceholderMultiline:a,"input-matLabel":`input-matLabel_-05ey`,inputMatLabel:o,"input-matLabel-floating":`input-matLabel-floating_1P2YE`,inputMatLabelFloating:s,"input-matLabel-multiline":`input-matLabel-multiline_miIZJ`,inputMatLabelMultiline:c,"input-fieldset":`input-fieldset_XCibg`,inputFieldset:l,"input-fieldset-legend":`input-fieldset-legend_X23zp`,inputFieldsetLegend:u,"input-fieldset-legend-active":`input-fieldset-legend-active_t-9hu`,inputFieldsetLegendActive:d,"input-iconLeft":`input-iconLeft_itIuo`,inputIconLeft:f,"input-container":`input-container_M1RoG`,inputContainer:p,"input-container-multiline":`input-container-multiline_eLw7h`,inputContainerMultiline:m,"input-container-border":`input-container-border_l131I`,inputContainerBorder:h,"input-container-border-focused":`input-container-border-focused_ct6oY`,inputContainerBorderFocused:g,"input-container-border-searchFocused":`input-container-border-searchFocused_lq088`,inputContainerBorderSearchFocused:_,"input-container-border-invalid":`input-container-border-invalid_Wdbq2`,inputContainerBorderInvalid:v,"input-container-border-error":`input-container-border-error_gzfPG`,inputContainerBorderError:y,"input-label":`input-label_w1hMR`,inputLabel:b,"input-label-column":`input-label-column_qBFPC`,inputLabelColumn:x,"input-label-text":`input-label-text_-J5qQ`,inputLabelText:S,"input-upper-right-label":`input-upper-right-label_I-WG3`,inputUpperRightLabel:C,"input-field":`input-field_pmDvZ`,inputField:w,inputAutofillStart:T,inputAutofillEnd:E,"input-field-withIcon":`input-field-withIcon_VpfmK`,inputFieldWithIcon:D,"input-field-withIcon-left":`input-field-withIcon-left_Io7lU`,inputFieldWithIconLeft:O,"input-field-suffix":`input-field-suffix_NZpXp`,inputFieldSuffix:k,"input-field-date":`input-field-date_UHJEZ`,inputFieldDate:A,"input-field-default":`input-field-default_TKipA`,inputFieldDefault:j,"input-field-readOnly":`input-field-readOnly_Eut34`,inputFieldReadOnly:M,"input-field-uppercase":`input-field-uppercase_UV6f1`,inputFieldUppercase:N,"input-field-multiline":`input-field-multiline_al3V1`,inputFieldMultiline:P,"input-field-multiline-autoResize":`input-field-multiline-autoResize_nK33P`,inputFieldMultilineAutoResize:F,"input-field-icon":`input-field-icon_YyJIr`,inputFieldIcon:I,"input-field-icon-left":`input-field-icon-left_m2XB1`,inputFieldIconLeft:L,"input-field-icon-notClickable":`input-field-icon-notClickable_7j24I`,inputFieldIconNotClickable:R,"input-error":`input-error_LIG23`,inputError:z};export{B as default,i as fadeIn,t as input,E as inputAutofillEnd,T as inputAutofillStart,p as inputContainer,h as inputContainerBorder,y as inputContainerBorderError,g as inputContainerBorderFocused,v as inputContainerBorderInvalid,_ as inputContainerBorderSearchFocused,m as inputContainerMultiline,z as inputError,w as inputField,A as inputFieldDate,j as inputFieldDefault,I as inputFieldIcon,L as inputFieldIconLeft,R as inputFieldIconNotClickable,P as inputFieldMultiline,F as inputFieldMultilineAutoResize,M as inputFieldReadOnly,k as inputFieldSuffix,N as inputFieldUppercase,D as inputFieldWithIcon,O as inputFieldWithIconLeft,l as inputFieldset,u as inputFieldsetLegend,d as inputFieldsetLegendActive,f as inputIconLeft,b as inputLabel,x as inputLabelColumn,S as inputLabelText,o as inputMatLabel,s as inputMatLabelFloating,c as inputMatLabelMultiline,n as inputPlaceholder,a as inputPlaceholderMultiline,r as inputPlaceholderShown,C as inputUpperRightLabel,e as requiredMark};
 //# sourceMappingURL=input.module.mjs.map