@ahrowe/ui 0.45.0 → 0.47.0

package/CHANGELOG.md

@@ -1,5 +1,42 @@
 # @ahrowe/ui
 
+## 0.47.0
+
+### Minor Changes
+
+- af36198: **Breaking:** Input's `showCancel` and `alwaysShowCancel` are one `clearable`, whose button shows whenever the field has a value, and `onClearClicked` is `onClear`. See "Migration from `showCancel`" in docs/Input.md
+
+### Patch Changes
+
+- af36198: Input's clear buttons, Search's included, no longer clear a disabled or read-only field
+- a14320e: Input's clear buttons return focus to the field when pressed from the keyboard, instead of losing it
+- a14320e: A disabled Input's background now also covers its suffix and the top edge of a multiline field
+- a14320e: Fixed Input icons covering the suffix, the clear button covering the text, and the clear button stacking on top of a type icon
+- a14320e: A multiline Input's icons and suffix now sit on its first line, and its resize grip in the field's corner. To turn resizing off, set `resize: 'none'` on `styles.container` instead of `styles.input`
+
+## 0.46.0
+
+### Minor Changes
+
+- c3be3c5: Arrow keys move focus between `KanbanBoard` cards, and between column titles with `reorderableColumns`, while nothing is picked up, and both draw the library's focus ring
+- c3be3c5: `KanbanBoard` no longer collapses empty columns by default; pass `collapseEmptyColumns` to keep shrinking them to a narrow strip
+- c3be3c5: With `dragHandle`, a `KanbanBoard` card's `data-drag-handle` element is also its keyboard handle, focusable and named with `getItemLabel` unless it has a name, and the card itself is no longer a button wrapped around its own controls
+- c3be3c5: A `KanbanBoard` given a height, such as `style={{ height: '100%' }}` in a parent with one, fills it and scrolls each column on its own, with `onLoadMore` working there as well as with `columnMaxHeight`
+
+### Patch Changes
+
+- c3be3c5: Space and Enter pressed in a control inside a `KanbanBoard` card, such as a button or an input, reach that control instead of picking the card up
+- c3be3c5: A collapsed `KanbanBoard` column shows its whole title, with the count and header actions wrapping below it instead of cutting the title to a single letter
+- c3be3c5: A `KanbanBoard` column being dragged shows its whole header, count and actions included, instead of a shorter bar with only the title
+- c3be3c5: `KanbanBoard`'s `dragHandle` restricts mouse and touch drags to the handle again; a press anywhere on the card started one
+- ef88ada: Fixed a `KanbanBoard` card staying behind when a column auto-scrolls under a pointer that holds still, and then dropping there instead of where the board showed it
+- c3be3c5: `KanbanBoard` columns stretch to the height of the tallest one, so a card dropped in the empty space below a column's cards lands in that column instead of the one beside it
+- c3be3c5: With `reorderableColumns`, a `KanbanBoard` header's own buttons answer Enter and Space instead of picking the column up: the column's title is now its keyboard handle, so the handle no longer wraps those buttons
+- ef88ada: Fixed `KanbanBoard` losing the cards `onLoadMore` loaded during a drag, and asking for more pages over and over until the drop
+- c3be3c5: Dragging a `KanbanBoard` card near the bottom of the window scrolls the page only toward a part of the board that is out of view, instead of on past the board until it was off screen
+- c3be3c5: A card dragged on a `KanbanBoard` lands in the column under the pointer, including a collapsed column narrower than the card
+- c3be3c5: `KanbanBoard` with `collapseEmptyColumns` keeps every column's width still during a drag, instead of widening each collapsed column the moment a card is picked up; a column the drag empties or fills changes width after the drop
+
 ## 0.45.0
 
 ### Minor Changes

package/dist/cjs-types/common/input/input.types.d.ts

@@ -54,8 +54,10 @@ export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElem
     disabled?: boolean;
     upperRightLabel?: string | React.ReactNode;
     labelInBorder?: boolean;
-    showCancel?: boolean;
-    onClearClicked?: (() => void) | null;
+    /** Show a button that clears the field, whenever it has a value it can change. */
+    clearable?: boolean;
+    /** Called after a clear button empties the field, by click or key. */
+    onClear?: (() => void) | null;
     min?: string | number | null;
     max?: string | number | null;
     placeholder?: string;
@@ -66,7 +68,6 @@ export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElem
     readOnly?: boolean;
     customInput?: React.ReactElement | null;
     autoFocus?: boolean;
-    alwaysShowCancel?: boolean;
     formValidator?: FormValidator | null;
     multiline?: boolean;
     rows?: number;

package/dist/cjs-types/common/kanbanBoard/KanbanBoard.d.ts

@@ -1,3 +1,3 @@
 import { KanbanBoardProps } from './kanbanBoard.types.js';
-declare function KanbanBoard<T = unknown>({ columns, items, renderItem, onChange, dragHandle, getItemLabel, getItemDisabled, renderEmptyColumn, renderColumnActions, reorderableColumns, collapseEmptyColumns, columnMaxHeight, onLoadMore, loadMoreThreshold, className, style, classNames, styles: slotStyles, ...rest }: KanbanBoardProps<T>): import("react").JSX.Element;
+declare function KanbanBoard<T = unknown>({ columns, items, renderItem, onChange, dragHandle, getItemLabel, getItemDisabled, renderEmptyColumn, renderColumnActions, reorderableColumns, collapseEmptyColumns, columnMaxHeight, onLoadMore, loadMoreThreshold, onKeyDown, className, style, classNames, styles: slotStyles, ...rest }: KanbanBoardProps<T>): import("react").JSX.Element;
 export default KanbanBoard;

package/dist/cjs-types/common/kanbanBoard/KanbanColumn.d.ts

@@ -1,25 +1,21 @@
-import { ReactNode } from 'react';
-import { KanbanColumnProps } from './kanbanBoard.types.js';
+import { HTMLAttributes, ReactNode, Ref } from 'react';
+import { DataProps, SlotClassNames, SlotStyles } from '../types/slots.types.js';
+import { KanbanColumnProps, KanbanColumnSlots } from './kanbanBoard.types.js';
 interface KanbanColumnInternalProps<T> extends KanbanColumnProps {
     itemIds: string[];
     items: Record<string, T>;
     renderItem: (item: T, id: string) => ReactNode;
     dragHandle?: boolean;
-    /**
-     * Keep the column at its normal flex width even when `itemIds` is empty. Used while a drag
-     * is in progress: the empty-column collapse is driven by transient shadow state during a
-     * drag, and letting the column shrink mid-drag shifts every column's layout underneath the
-     * pointer, which can flip the collision target back and forth forever.
-     */
-    preserveSizeWhileEmpty?: boolean;
-    /** Shrink to a narrow strip when empty — see `KanbanBoardProps.collapseEmptyColumns`. Defaults to `true`. */
-    collapseEmptyColumns?: boolean;
+    /** Shrink to a narrow strip. The board decides when, see `KanbanBoardProps.collapseEmptyColumns`. */
+    collapsed?: boolean;
     /** Work-in-progress limit — see `KanbanColumnDef.maxItems`. Display-only. */
     maxItems?: number;
     /** Freezes the column — see `KanbanColumnDef.disabled`. */
     disabled?: boolean;
     /** Returns whether a specific card can't be picked up — see `KanbanBoardProps.getItemDisabled`. */
     getItemDisabled?: (item: T, id: string) => boolean;
+    /** Names a card's drag handle — see `KanbanBoardProps.getItemLabel`. */
+    getItemLabel?: (item: T, id: string) => string;
     /** Custom content shown when the column has no cards — see `KanbanBoardProps.renderEmptyColumn`. */
     emptyPlaceholder?: ReactNode;
     /** Custom header actions — see `KanbanBoardProps.renderColumnActions`. */
@@ -41,5 +37,18 @@ interface KanbanColumnInternalProps<T> extends KanbanColumnProps {
     /** Scroll distance from the bottom that triggers `onLoadMore` — see `KanbanBoardProps.loadMoreThreshold`. */
     loadMoreThreshold?: number;
 }
-declare function KanbanColumn<T>({ id, title, itemIds, items, renderItem, dragHandle, preserveSizeWhileEmpty, collapseEmptyColumns, maxItems, disabled, getItemDisabled, emptyPlaceholder, actions, reorderable, activeIsColumn, columnMaxHeight, hasMore, onLoadMore, loadMoreThreshold, className, style, classNames, styles: slotStyles, ...rest }: KanbanColumnInternalProps<T>): import("react").JSX.Element;
+interface ColumnHeaderContentProps {
+    title: string;
+    count: number;
+    maxItems?: number;
+    actions?: ReactNode;
+    /** Makes the title the column's keyboard drag handle. */
+    titleProps?: HTMLAttributes<HTMLSpanElement> & DataProps & {
+        ref?: Ref<HTMLSpanElement>;
+    };
+    classNames?: SlotClassNames<KanbanColumnSlots>;
+    styles?: SlotStyles<KanbanColumnSlots>;
+}
+export declare function ColumnHeaderContent({ title, count, maxItems, actions, titleProps, classNames, styles: slotStyles, }: ColumnHeaderContentProps): import("react").JSX.Element;
+declare function KanbanColumn<T>({ id, title, itemIds, items, renderItem, dragHandle, collapsed, maxItems, disabled, getItemDisabled, getItemLabel, emptyPlaceholder, actions, reorderable, activeIsColumn, columnMaxHeight, hasMore, onLoadMore, loadMoreThreshold, className, style, classNames, styles: slotStyles, ...rest }: KanbanColumnInternalProps<T>): import("react").JSX.Element;
 export default KanbanColumn;

package/dist/cjs-types/common/kanbanBoard/KanbanItem.d.ts

@@ -1,3 +1,3 @@
 import { KanbanItemProps } from './kanbanBoard.types.js';
-declare function KanbanItem({ id, dragHandle, disabled, preventAsDropTarget, children }: KanbanItemProps): import("react").JSX.Element;
+declare function KanbanItem({ id, label, dragHandle, disabled, preventAsDropTarget, children }: KanbanItemProps): import("react").JSX.Element;
 export default KanbanItem;

package/dist/cjs-types/common/kanbanBoard/kanbanBoard.types.d.ts

@@ -38,14 +38,17 @@ export interface KanbanBoardProps<T = unknown> extends Omit<HtmlProps, 'onChange
      */
     onChange: (columns: KanbanColumnDef[]) => void;
     /**
-     * Restrict drag initiation to elements marked `data-drag-handle` within a card,
-     * instead of the whole card. Use when `renderItem` includes interactive content
-     * (buttons, inputs) that would otherwise have its clicks swallowed by the drag listener.
+     * Drag a card only by the element marked `data-drag-handle` inside it, with the mouse, touch
+     * and the keyboard, instead of by the whole card. The handle is made focusable and named with
+     * `getItemLabel` unless it has a name, and the card stops being a button. Use when `renderItem`
+     * includes controls (buttons, inputs): inside a card that is itself the button, a screen reader
+     * reads them as plain text.
      */
     dragHandle?: boolean;
     /**
      * Produce an accessible label for a card, announced to screen-reader users while dragging
-     * (e.g. "Picked up <label>."). Defaults to the card's id when omitted.
+     * (e.g. "Picked up <label>."), and naming a `dragHandle` handle that has no name of its own.
+     * Defaults to the card's id when omitted.
      */
     getItemLabel?: (item: T, id: string) => string;
     /**
@@ -70,27 +73,28 @@ export interface KanbanBoardProps<T = unknown> extends Omit<HtmlProps, 'onChange
      */
     reorderableColumns?: boolean;
     /**
-     * Shrink a column to a narrow strip once it has no cards, instead of keeping it at the same
-     * width as every other column. Defaults to `true`. Set `false` to keep every column the same
-     * width regardless of card count. The collapsed width itself is set via the
-     * `--kanban-empty-column-width` CSS variable (falls back to `140px`) — override it theme-wide
-     * via `ThemeProvider`'s `variables`, or per board via `style`.
+     * Shrink a column to a narrow strip while it has no cards. Defaults to `false`. Widths hold
+     * still during a drag: a column the drag empties or fills changes width after the drop. The
+     * collapsed width is set via the `--kanban-empty-column-width` CSS variable (falls back to
+     * `140px`): override it theme-wide via `ThemeProvider`'s `variables`, or per board via `style`.
      */
     collapseEmptyColumns?: boolean;
     /**
-     * Bounds each column's height (any CSS length, e.g. `'70vh'`, `'600px'`) and makes its card
-     * list scroll independently once content overflows, instead of growing the whole page. Leave
-     * unset for the default unbounded height. Required for `onLoadMore` to ever trigger, since an
-     * unbounded column never scrolls.
+     * Caps each column's card list at a length (any CSS length, e.g. `'70vh'`, `'600px'`), so a
+     * long column scrolls on its own instead of growing the page. To fill the space your layout
+     * gives the board instead, give the board a height (`style={{ height: '100%' }}` in a parent
+     * with one): its columns then scroll the same way.
      */
     columnMaxHeight?: string;
     /**
      * Called with a column's `id` when that column has `hasMore` set and its card list is scrolled
-     * within `loadMoreThreshold` of the bottom — fetch and append the next page of items for it.
+     * within `loadMoreThreshold` of the bottom: fetch and append the next page of items for it.
      * `KanbanColumn` tracks its own in-flight state per column (shown as a spinner at the bottom of
-     * the list), so overlapping calls for the same column are never made concurrently. Also
-     * retried automatically if a loaded batch doesn't fill the column's visible height, since a
-     * column shorter than its own viewport never generates a scroll event to trigger a next page.
+     * the list), so overlapping calls for the same column are never made concurrently. Also called
+     * while the column's cards leave empty space below them, since a column that doesn't overflow
+     * can't be scrolled. Paging all the way needs a column that scrolls: `columnMaxHeight`, or a
+     * board with a height. On a board that grows with its cards, a short column only fills up to
+     * the tallest one.
      */
     onLoadMore?: (columnId: string) => void | Promise<void>;
     /**
@@ -115,6 +119,8 @@ export interface KanbanColumnProps extends HtmlProps {
 }
 export interface KanbanItemProps {
     id: string;
+    /** Names the card's `[data-drag-handle]` when it has no `aria-label` of its own. */
+    label?: string;
     dragHandle?: boolean;
     /** Whether this card can't be picked up (column frozen, or the card itself is pinned). */
     disabled?: boolean;

package/dist/cjs-types/common/kanbanBoard/kanbanBoard.utils.d.ts

@@ -20,8 +20,28 @@ export declare function moveColumn(columns: KanbanColumnDef[], activeColumnId: s
  * which reads as needing to "wiggle it around" before the right drop target lights up. This
  * restricts the candidates to only the same kind as whatever is being dragged: a column drag only
  * considers other columns, a card drag only considers cards and card lists.
+ *
+ * A card drag also lets the pointer pick the column, and `closestCorners` only the position within
+ * it. Corners alone compare the dragged card's whole rect, so a wide card over a collapsed column
+ * had its corners nearer the neighbours' cards, and landed beside the column under the pointer.
+ * Without a pointer (the keyboard) or between columns, every column is a candidate as before.
  */
 export declare const kanbanCollisionDetection: CollisionDetection;
+/**
+ * Whether the auto-scroll may move `scroller`, an ancestor of the board such as the page, while
+ * something is dragged: only toward a part of the board that is out of view. Nothing beyond the
+ * board takes a drop, and a page left free to scroll carried the whole board off screen.
+ */
+export declare function scrollsTowardBoard(scroller: {
+    top: number;
+    bottom: number;
+}, board: {
+    top: number;
+    bottom: number;
+}, dragged: {
+    top: number;
+    height: number;
+}): boolean;
 /** Extracts the column id from a column droppable's `column-<id>` identifier, or `null` for a card id. */
 export declare function resolveColumnDropId(overId: string): string | null;
 export interface DragGeometry {
@@ -40,9 +60,35 @@ export interface DragGeometry {
  * position (see the two branches below for what each one decides).
  */
 export declare function moveItem(columns: KanbanColumnDef[], activeItemId: string, overId: string, geometry: DragGeometry): KanbanColumnDef[];
+/**
+ * Where a drag has put the dragged card or column so far. The board keeps this rather than a copy
+ * of `columns`, so a change the consumer makes mid-drag (a page appended by `onLoadMore`) still
+ * shows, and is still there in what `onChange` receives on drop.
+ */
+export interface DragPlacement {
+    /** The dragged card's or column's id. */
+    id: string;
+    /** The column the card sits in, or `null` while a whole column is dragged. */
+    columnId: string | null;
+    index: number;
+}
+/** The position `id` holds in `columns`, as a placement to lay over a later `columns`. */
+export declare function findPlacement(columns: KanbanColumnDef[], id: string, isColumn: boolean): DragPlacement | null;
+/**
+ * Moves the dragged card or column to its placement in `columns`. Returns `columns` itself when
+ * there is no placement, or when the card, the column, or its destination is no longer there.
+ */
+export declare function applyPlacement(columns: KanbanColumnDef[], placement: DragPlacement | null): KanbanColumnDef[];
+/**
+ * Where an arrow key moves focus from a focused card or column handle while nothing is picked up.
+ * It mirrors what the same keys do to a picked-up card: Up/Down within the column, Left/Right to
+ * the nearest card in the next column with anything to focus, or from a handle to the next handle.
+ * Returns `null` when `from` is not a card or handle, or there is nowhere to go.
+ */
+export declare function findArrowFocusTarget(board: HTMLElement, from: HTMLElement, key: string): HTMLElement | null;
 /**
  * Builds screen-reader drag announcements against the columns layout as currently understood
- * (the live shadow layout while a drag is in progress, or the settled `columns` prop otherwise).
+ * (the live layout while a drag is in progress, or the settled `columns` prop otherwise).
  */
 export declare function buildAnnouncements<T>(columns: KanbanColumnDef[], items: Record<string, T>, getItemLabel: (item: T, id: string) => string): Announcements;
 /**

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"input.mjs","names":[],"sources":["../../../../package/common/input/input.tsx"],"sourcesContent":["import React, { useState, useEffect, useRef, useCallback, useId } from 'react';\nimport cx from 'classnames';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport {\n  faPhone,\n  faPen,\n  faEnvelope,\n  faSearch,\n  faXmark,\n  faEye as passwordHiddenIcon,\n  faEyeSlash as passwordShownIcon,\n} from '@fortawesome/free-solid-svg-icons';\nimport Tooltip from 'components/common/tooltip';\nimport AnimatedIcon from 'components/common/animatedIcon';\nimport { useComponentDefaults, 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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"}
+{"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 type { IconDefinition } from '@fortawesome/fontawesome-svg-core';\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\nconst TYPE_ICONS: Partial<Record<InputType, IconDefinition>> = {\n  [InputType.Phone]: faPhone,\n  [InputType.Email]: faEnvelope,\n  [InputType.Edit]: faPen,\n};\n\nfunction clickableIconProps(onActivate?: ((event: React.SyntheticEvent) => void) | null) {\n  if (!onActivate) return undefined;\n  return {\n    role: 'button' as const,\n    tabIndex: 0,\n    // The icon sits inside the <label>, whose click focuses the field anyway. Letting mousedown\n    // focus the icon first would hand the consumer a blur and a focus for a single click.\n    onMouseDown: (event: React.MouseEvent) => event.preventDefault(),\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    clearable = false,\n    onClear,\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    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 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    ...clickableIconProps(onIconClick),\n  };\n  const typeIcon = type && !hasCustomIcon ? TYPE_ICONS[type] : undefined;\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          ...clickableIconProps(resolvedCustomIconClick as ((event: React.SyntheticEvent) => void) | undefined),\n        })\n      : null;\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 canClear = !!currVal && !disabled && !readOnly;\n  const isSearchCleared = type === InputType.Search && canClear;\n\n  function togglePassword() {\n    setIsPasswordShown(!isPasswordShown);\n  }\n\n  let fieldIcon: React.ReactNode = renderedIcon;\n  if (type === InputType.Search) {\n    fieldIcon = (\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        {...clickableIconProps(isSearchCleared ? handleClear : undefined)}\n        aria-label={isSearchCleared ? text.clearSearch : undefined}\n      />\n    );\n  } else if (type === InputType.Password) {\n    fieldIcon = (\n      <FontAwesomeIcon\n        icon={isPasswordShown ? passwordShownIcon : passwordHiddenIcon}\n        className={cx(styles.inputFieldIcon, { [styles.inputFieldIconLeft]: iconIsLeft })}\n        onClick={togglePassword}\n        {...clickableIconProps(togglePassword)}\n        aria-label={isPasswordShown ? text.hidePassword : text.showPassword}\n      />\n    );\n  } else if (typeIcon) {\n    fieldIcon = <FontAwesomeIcon icon={typeIcon} {...iconProps} />;\n  }\n  const hasLeftIcon = !!fieldIcon && iconIsLeft;\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    onClear?.();\n    // A key press would otherwise leave focus on a button that is about to vanish.\n    inputRef.current?.focus();\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(\n            styles.inputContainer,\n            {\n              [styles.inputContainerMultiline]: multiline,\n              [styles.inputContainerResizable]: multiline && !autoResize,\n              [styles.inputContainerDisabled]: disabled,\n            },\n            classNames?.container,\n          )}\n          style={slotStyles?.container}\n          onMouseEnter={onMouseEnterHandler}\n          onMouseLeave={onMouseLeaveHandler}\n        >\n          {iconIsLeft && fieldIcon}\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.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          {/* Mounted while empty too, so the first character grows it in rather than popping it in. */}\n          {clearable && type !== InputType.Search && (\n            <FontAwesomeIcon\n              icon={faXmark}\n              className={cx(styles.inputFieldIcon, styles.inputFieldIconClear, {\n                [styles.inputFieldIconClearHidden]: !canClear,\n              })}\n              onClick={canClear ? handleClear : undefined}\n              {...clickableIconProps(canClear ? handleClear : undefined)}\n              aria-label={text.clear}\n            />\n          )}\n          {!iconIsLeft && fieldIcon}\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    </div>\n  );\n}\n\nexport default Input;\n"],"mappings":"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"}

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

@@ -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-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};
+"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-field-icon_YyJIr`,g=`input-field-suffix_NZpXp`,_=`input-container-resizable_8mhPR`,v=`input-container-disabled_I7B5p`,y=`input-container-border_l131I`,b=`input-container-border-focused_ct6oY`,x=`input-container-border-searchFocused_lq088`,S=`input-container-border-invalid_Wdbq2`,C=`input-container-border-error_gzfPG`,w=`input-label_w1hMR`,T=`input-label-column_qBFPC`,E=`input-label-text_-J5qQ`,D=`input-upper-right-label_I-WG3`,O=`input-field_pmDvZ`,k=`inputAutofillStart_tOifY`,A=`inputAutofillEnd_KLDQQ`,j=`input-field-withIcon-left_Io7lU`,M=`input-field-date_UHJEZ`,N=`input-field-default_TKipA`,P=`input-field-readOnly_Eut34`,F=`input-field-uppercase_UV6f1`,I=`input-field-multiline_al3V1`,L=`input-field-multiline-autoResize_nK33P`,R=`input-field-icon-left_m2XB1`,z=`input-field-icon-notClickable_7j24I`,B=`input-field-icon-clear_qibLp`,V=`input-field-icon-clear-hidden_kSasA`,H=`input-error_LIG23`,U={"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-field-icon":`input-field-icon_YyJIr`,inputFieldIcon:h,"input-field-suffix":`input-field-suffix_NZpXp`,inputFieldSuffix:g,"input-container-resizable":`input-container-resizable_8mhPR`,inputContainerResizable:_,"input-container-disabled":`input-container-disabled_I7B5p`,inputContainerDisabled:v,"input-container-border":`input-container-border_l131I`,inputContainerBorder:y,"input-container-border-focused":`input-container-border-focused_ct6oY`,inputContainerBorderFocused:b,"input-container-border-searchFocused":`input-container-border-searchFocused_lq088`,inputContainerBorderSearchFocused:x,"input-container-border-invalid":`input-container-border-invalid_Wdbq2`,inputContainerBorderInvalid:S,"input-container-border-error":`input-container-border-error_gzfPG`,inputContainerBorderError:C,"input-label":`input-label_w1hMR`,inputLabel:w,"input-label-column":`input-label-column_qBFPC`,inputLabelColumn:T,"input-label-text":`input-label-text_-J5qQ`,inputLabelText:E,"input-upper-right-label":`input-upper-right-label_I-WG3`,inputUpperRightLabel:D,"input-field":`input-field_pmDvZ`,inputField:O,inputAutofillStart:k,inputAutofillEnd:A,"input-field-withIcon-left":`input-field-withIcon-left_Io7lU`,inputFieldWithIconLeft:j,"input-field-date":`input-field-date_UHJEZ`,inputFieldDate:M,"input-field-default":`input-field-default_TKipA`,inputFieldDefault:N,"input-field-readOnly":`input-field-readOnly_Eut34`,inputFieldReadOnly:P,"input-field-uppercase":`input-field-uppercase_UV6f1`,inputFieldUppercase:F,"input-field-multiline":`input-field-multiline_al3V1`,inputFieldMultiline:I,"input-field-multiline-autoResize":`input-field-multiline-autoResize_nK33P`,inputFieldMultilineAutoResize:L,"input-field-icon-left":`input-field-icon-left_m2XB1`,inputFieldIconLeft:R,"input-field-icon-notClickable":`input-field-icon-notClickable_7j24I`,inputFieldIconNotClickable:z,"input-field-icon-clear":`input-field-icon-clear_qibLp`,inputFieldIconClear:B,"input-field-icon-clear-hidden":`input-field-icon-clear-hidden_kSasA`,inputFieldIconClearHidden:V,"input-error":`input-error_LIG23`,inputError:H};export{U as default,i as fadeIn,t as input,A as inputAutofillEnd,k as inputAutofillStart,p as inputContainer,y as inputContainerBorder,C as inputContainerBorderError,b as inputContainerBorderFocused,S as inputContainerBorderInvalid,x as inputContainerBorderSearchFocused,v as inputContainerDisabled,m as inputContainerMultiline,_ as inputContainerResizable,H as inputError,O as inputField,M as inputFieldDate,N as inputFieldDefault,h as inputFieldIcon,B as inputFieldIconClear,V as inputFieldIconClearHidden,R as inputFieldIconLeft,z as inputFieldIconNotClickable,I as inputFieldMultiline,L as inputFieldMultilineAutoResize,P as inputFieldReadOnly,g as inputFieldSuffix,F as inputFieldUppercase,j as inputFieldWithIconLeft,l as inputFieldset,u as inputFieldsetLegend,d as inputFieldsetLegendActive,f as inputIconLeft,w as inputLabel,T as inputLabelColumn,E as inputLabelText,o as inputMatLabel,s as inputMatLabelFloating,c as inputMatLabelMultiline,n as inputPlaceholder,a as inputPlaceholderMultiline,r as inputPlaceholderShown,D as inputUpperRightLabel,e as requiredMark};
 //# sourceMappingURL=input.module.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"input.module.mjs","names":[],"sources":["../../../../package/common/input/input.module.pcss"],"sourcesContent":["/* Chrome fills a field on page load without firing anything React can see, and an animation\n   bound to the pseudo-class is the only hook it offers. The declarations are inert on purpose;\n   the pair exists to be listened for — see handleAutofillAnimation in input.tsx. */\n@keyframes inputAutofillStart {\n  from {\n    opacity: 1;\n  }\n}\n\n@keyframes inputAutofillEnd {\n  from {\n    opacity: 1;\n  }\n}\n\n.required-mark {\n  padding: 0 0 0 4px;\n  color: var(--required-mark-color, var(--error-color));\n}\n\n.input {\n  position: relative;\n  width: 100%;\n\n  --input-notch-height: 1.75em;\n  --input-icon-size: 1.2em;\n  --input-icon-offset: 0.6em;\n  --input-icon-gutter: 2.2em;\n\n  /* The visible border lives on `fieldset`/`container` below, not this root — buried inside a\n     `<label>`, out of reach of a plain ancestor selector. --group-radius-* are custom properties\n     (not defined here) that a wrapping ButtonGroup sets per corner on the position it occupies;\n     unlike border-radius itself they inherit through any nesting depth, so they reach these\n     descendants and flatten the right corners when this Input sits inside a ButtonGroup. */\n  --input-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  &-placeholder {\n    position: absolute;\n    top: 50%;\n    left: 7px;\n    transform: translateY(-50%);\n    transition: all 0.2s;\n    opacity: 0;\n    user-select: none;\n    pointer-events: none;\n\n    &-shown {\n      animation: 0.2s fadeIn 0.3s forwards;\n    }\n\n    &-multiline {\n      top: 14px;\n      transform: translateY(0);\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    &-multiline {\n      top: 14px;\n      transform: translateY(0);\n    }\n  }\n\n  &-fieldset {\n    position: absolute;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    min-width: 0;\n    box-sizing: border-box;\n    border-radius: var(--input-radius);\n    font-size: 0.8em;\n    inset: calc(var(--input-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(--input-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(--input-notch-height);\n        padding: 0 5px;\n        opacity: 0;\n      }\n\n      span:empty {\n        padding: 0;\n      }\n    }\n  }\n\n  &-iconLeft {\n    .input-matLabel {\n      left: var(--input-icon-gutter);\n\n      &-floating {\n        left: calc(var(--input-icon-gutter) + 0.5em);\n      }\n    }\n\n    .input-placeholder {\n      left: var(--input-icon-gutter);\n    }\n\n    .input-fieldset {\n      padding-left: var(--input-icon-gutter);\n    }\n  }\n\n  &-container {\n    display: flex;\n    align-items: center;\n    border-radius: var(--input-radius);\n    background-color: var(--input-background);\n    transition: border-color;\n    cursor: text;\n    height: 100%;\n\n    &-multiline {\n      overflow: hidden;\n      padding-top: 10px;\n      align-items: flex-start;\n    }\n\n    &-border {\n      transition: border-color;\n      background-color: var(--input-background);\n      outline: none;\n\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      &-searchFocused {\n        outline-color: var(--search-input-color);\n        outline-width: 2px;\n        border-color: var(--search-input-color);\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  &-label {\n    display: flex;\n    color: var(--text-color);\n    height: 100%;\n\n    &-column {\n      flex-direction: column;\n    }\n\n    &-text {\n      margin-right: 5px;\n      margin-bottom: 6px;\n      display: flex;\n      align-items: center;\n      color: color(var(--border-color) lightness(40%));\n      background-color: transparent;\n      font-size: 12px;\n      position: absolute;\n      top: -15px;\n      white-space: nowrap;\n    }\n  }\n\n  &-upper-right-label {\n    position: absolute;\n    transform: translateY(calc(-100% - 1.5px));\n    right: 8px;\n    min-height: 12px;\n    font-size: 12px;\n    color: color(var(--border-color) lightness(40%));\n  }\n\n  &-field {\n    appearance: none;\n    -webkit-appearance: none;\n    font-family: inherit;\n    font-size: inherit;\n    box-sizing: border-box;\n    resize: none;\n    width: 100%;\n    border: none;\n    border-radius: var(--default-border-radius);\n    overflow: hidden;\n    line-height: 1.25;\n    color: var(--text-color);\n    background: transparent;\n\n    &:focus {\n      outline: none;\n    }\n\n    &::placeholder {\n      color: var(--text-light);\n    }\n\n    /* Chrome overrides `background` and `color` on an autofilled field outright. Clipping the\n       background to the glyphs is what removes it: the page cannot win on colour, but it can\n       say where a background paints, and -webkit-text-fill-color then beats the text colour.\n       The field is transparent either way, so what shows through is whatever is really behind\n       it — no surface has to declare itself, which an inset-shadow cover-up would have needed. */\n    &:-webkit-autofill,\n    &:-webkit-autofill:hover,\n    &:-webkit-autofill:focus,\n    &:-webkit-autofill:active {\n      animation-name: inputAutofillStart;\n      animation-duration: 1ms;\n      -webkit-background-clip: text;\n      background-clip: text;\n      -webkit-text-fill-color: var(--text-color);\n      caret-color: var(--text-color);\n    }\n\n    &:not(:-webkit-autofill) {\n      animation-name: inputAutofillEnd;\n      animation-duration: 1ms;\n    }\n\n    /* The browser's own search-cancel decoration doesn't match the theme — Search has its own\n       themed clear icon (see isSearchCleared in input.tsx) that replaces it. */\n    &::-webkit-search-cancel-button,\n    &::-webkit-search-decoration {\n      -webkit-appearance: none;\n      appearance: none;\n      display: none;\n    }\n\n    &-withIcon {\n      padding-right: var(--input-icon-gutter) !important;\n\n      &-left {\n        padding-right: 0.643em !important;\n        padding-left: var(--input-icon-gutter) !important;\n      }\n    }\n\n    &-suffix {\n      padding-right: 9px;\n    }\n\n    &-date {\n      padding: 6px 9px;\n      color-scheme: dark;\n\n      svg {\n        color: var(--input-icon-color);\n      }\n    }\n\n    &-default {\n      padding: 8px 7.5px 6px;\n    }\n\n    &[disabled] {\n      background-color: var(--disabled-input-color);\n      color: var(--disabled-font-color);\n      -webkit-text-fill-color: var(--disabled-font-color);\n      opacity: 1;\n\n      &::placeholder {\n        color: var(--disabled-font-color);\n        -webkit-text-fill-color: var(--disabled-font-color);\n      }\n    }\n\n    &-readOnly {\n      cursor: default;\n      color: var(--text-dark);\n      -webkit-text-fill-color: var(--text-dark);\n    }\n\n    &-uppercase {\n      text-transform: uppercase;\n    }\n\n    &-multiline {\n      overflow-y: auto;\n      resize: vertical;\n      padding-top: 4px;\n      min-height: 30px;\n\n      &-autoResize {\n        resize: none;\n        overflow: hidden;\n      }\n    }\n\n    &-icon {\n      appearance: none;\n      -webkit-appearance: none;\n      box-sizing: border-box;\n      cursor: pointer;\n      -webkit-tap-highlight-color: transparent;\n      background-color: transparent;\n      border: none;\n      position: absolute;\n      outline: none;\n      right: var(--input-icon-offset);\n      color: var(--input-icon-color);\n      width: var(--input-icon-size) !important;\n      height: var(--input-icon-size) !important;\n      user-select: none;\n      top: 50%;\n      transform: translateY(-50%);\n\n      &:focus-visible {\n        outline: 1px solid var(--focus-border-color, var(--primary-color));\n        outline-offset: 2px;\n      }\n\n      &-left {\n        left: var(--input-icon-offset);\n      }\n\n      &-notClickable {\n        pointer-events: none;\n      }\n    }\n  }\n\n  &-error {\n    height: 1em;\n    padding-top: 3px;\n    color: var(--error-font-color);\n    font-size: 11px;\n  }\n\n  @keyframes fadeIn {\n    from {\n      opacity: 0;\n    }\n\n    to {\n      opacity: 0.5;\n    }\n  }\n}\n\n/* The label's glide between resting and floating is the motion; it still moves, just instantly. */\n@media (prefers-reduced-motion: reduce) {\n  .input-matLabel,\n  .input-placeholder {\n    transition: none;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"input.module.mjs","names":[],"sources":["../../../../package/common/input/input.module.pcss"],"sourcesContent":["/* Chrome fills a field on page load without firing anything React can see, and an animation\n   bound to the pseudo-class is the only hook it offers. The declarations are inert on purpose;\n   the pair exists to be listened for — see handleAutofillAnimation in input.tsx. */\n@keyframes inputAutofillStart {\n  from {\n    opacity: 1;\n  }\n}\n\n@keyframes inputAutofillEnd {\n  from {\n    opacity: 1;\n  }\n}\n\n.required-mark {\n  padding: 0 0 0 4px;\n  color: var(--required-mark-color, var(--error-color));\n}\n\n.input {\n  position: relative;\n  width: 100%;\n\n  --input-notch-height: 1.75em;\n  --input-icon-size: 1.2em;\n  --input-icon-offset: 0.6em;\n  --input-icon-gutter: 2.2em;\n\n  /* The visible border lives on `fieldset`/`container` below, not this root — buried inside a\n     `<label>`, out of reach of a plain ancestor selector. --group-radius-* are custom properties\n     (not defined here) that a wrapping ButtonGroup sets per corner on the position it occupies;\n     unlike border-radius itself they inherit through any nesting depth, so they reach these\n     descendants and flatten the right corners when this Input sits inside a ButtonGroup. */\n  --input-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  &-placeholder {\n    position: absolute;\n    top: 50%;\n    left: 7px;\n    transform: translateY(-50%);\n    transition: all 0.2s;\n    opacity: 0;\n    user-select: none;\n    pointer-events: none;\n\n    &-shown {\n      animation: 0.2s fadeIn 0.3s forwards;\n    }\n\n    &-multiline {\n      top: 14px;\n      transform: translateY(0);\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    &-multiline {\n      top: 14px;\n      transform: translateY(0);\n    }\n  }\n\n  &-fieldset {\n    position: absolute;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    min-width: 0;\n    box-sizing: border-box;\n    border-radius: var(--input-radius);\n    font-size: 0.8em;\n    inset: calc(var(--input-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(--input-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(--input-notch-height);\n        padding: 0 5px;\n        opacity: 0;\n      }\n\n      span:empty {\n        padding: 0;\n      }\n    }\n  }\n\n  &-iconLeft {\n    .input-matLabel {\n      left: var(--input-icon-gutter);\n\n      &-floating {\n        left: calc(var(--input-icon-gutter) + 0.5em);\n      }\n    }\n\n    .input-placeholder {\n      left: var(--input-icon-gutter);\n    }\n\n    .input-fieldset {\n      padding-left: var(--input-icon-gutter);\n    }\n  }\n\n  &-container {\n    display: flex;\n    align-items: center;\n    border-radius: var(--input-radius);\n    background-color: var(--input-background);\n    transition: border-color;\n    cursor: text;\n    height: 100%;\n\n    &-multiline {\n      overflow: hidden;\n      padding-top: 10px;\n      align-items: flex-start;\n\n      /* Matches the textarea's padding-top, so they sit on its first line. */\n      .input-field-icon,\n      .input-field-suffix {\n        margin-top: 4px;\n      }\n    }\n\n    /* Not on the textarea, whose grip would sit beside the icons. The textarea's\n       align-self: stretch is what makes it follow. */\n    &-resizable {\n      resize: vertical;\n    }\n\n    /* On the container, not the field, so it reaches under the icons and the suffix too. */\n    &-disabled {\n      background-color: var(--disabled-input-color);\n    }\n\n    &-border {\n      transition: border-color;\n      background-color: var(--input-background);\n      outline: none;\n\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      &-searchFocused {\n        outline-color: var(--search-input-color);\n        outline-width: 2px;\n        border-color: var(--search-input-color);\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  &-label {\n    display: flex;\n    color: var(--text-color);\n    height: 100%;\n\n    &-column {\n      flex-direction: column;\n    }\n\n    &-text {\n      margin-right: 5px;\n      margin-bottom: 6px;\n      display: flex;\n      align-items: center;\n      color: color(var(--border-color) lightness(40%));\n      background-color: transparent;\n      font-size: 12px;\n      position: absolute;\n      top: -15px;\n      white-space: nowrap;\n    }\n  }\n\n  &-upper-right-label {\n    position: absolute;\n    transform: translateY(calc(-100% - 1.5px));\n    right: 8px;\n    min-height: 12px;\n    font-size: 12px;\n    color: color(var(--border-color) lightness(40%));\n  }\n\n  &-field {\n    appearance: none;\n    -webkit-appearance: none;\n    font-family: inherit;\n    font-size: inherit;\n    box-sizing: border-box;\n    resize: none;\n    width: 100%;\n    border: none;\n    border-radius: var(--default-border-radius);\n    overflow: hidden;\n    line-height: 1.25;\n    color: var(--text-color);\n    background: transparent;\n\n    &:focus {\n      outline: none;\n    }\n\n    &::placeholder {\n      color: var(--text-light);\n    }\n\n    /* Chrome overrides `background` and `color` on an autofilled field outright. Clipping the\n       background to the glyphs is what removes it: the page cannot win on colour, but it can\n       say where a background paints, and -webkit-text-fill-color then beats the text colour.\n       The field is transparent either way, so what shows through is whatever is really behind\n       it — no surface has to declare itself, which an inset-shadow cover-up would have needed. */\n    &:-webkit-autofill,\n    &:-webkit-autofill:hover,\n    &:-webkit-autofill:focus,\n    &:-webkit-autofill:active {\n      animation-name: inputAutofillStart;\n      animation-duration: 1ms;\n      -webkit-background-clip: text;\n      background-clip: text;\n      -webkit-text-fill-color: var(--text-color);\n      caret-color: var(--text-color);\n    }\n\n    &:not(:-webkit-autofill) {\n      animation-name: inputAutofillEnd;\n      animation-duration: 1ms;\n    }\n\n    /* The browser's own search-cancel decoration doesn't match the theme — Search has its own\n       themed clear icon (see isSearchCleared in input.tsx) that replaces it. */\n    &::-webkit-search-cancel-button,\n    &::-webkit-search-decoration {\n      -webkit-appearance: none;\n      appearance: none;\n      display: none;\n    }\n\n    /* The left icon's margins carry the gap, so the text starts exactly at --input-icon-gutter,\n       where the label, the placeholder and the notch are drawn. */\n    &-withIcon-left {\n      padding-left: 0 !important;\n    }\n\n    &-suffix {\n      padding-right: 9px;\n    }\n\n    &-date {\n      padding: 6px 9px;\n      color-scheme: dark;\n\n      svg {\n        color: var(--input-icon-color);\n      }\n    }\n\n    &-default {\n      padding: 8px 7.5px 6px;\n    }\n\n    &[disabled] {\n      color: var(--disabled-font-color);\n      -webkit-text-fill-color: var(--disabled-font-color);\n      opacity: 1;\n\n      &::placeholder {\n        color: var(--disabled-font-color);\n        -webkit-text-fill-color: var(--disabled-font-color);\n      }\n    }\n\n    &-readOnly {\n      cursor: default;\n      color: var(--text-dark);\n      -webkit-text-fill-color: var(--text-dark);\n    }\n\n    &-uppercase {\n      text-transform: uppercase;\n    }\n\n    &-multiline {\n      align-self: stretch;\n      overflow-y: auto;\n      padding-top: 4px;\n      min-height: 30px;\n\n      &-autoResize {\n        overflow: hidden;\n      }\n    }\n\n    &-icon {\n      appearance: none;\n      -webkit-appearance: none;\n      box-sizing: border-box;\n      cursor: pointer;\n      -webkit-tap-highlight-color: transparent;\n      background-color: transparent;\n      border: none;\n      outline: none;\n      flex: none;\n      margin-right: var(--input-icon-offset);\n      color: var(--input-icon-color);\n      width: var(--input-icon-size) !important;\n      height: var(--input-icon-size) !important;\n      user-select: none;\n\n      &:focus-visible {\n        outline: 1px solid var(--focus-border-color, var(--primary-color));\n        outline-offset: 2px;\n      }\n\n      &-left {\n        margin-left: var(--input-icon-offset);\n        margin-right: calc(var(--input-icon-gutter) - var(--input-icon-offset) - var(--input-icon-size));\n      }\n\n      &-notClickable {\n        pointer-events: none;\n      }\n\n      &-clear {\n        transition: 0.15s ease-out;\n        transition-property: width, margin-right, opacity;\n\n        &-hidden {\n          width: 0 !important;\n          margin-right: 0;\n          opacity: 0;\n          visibility: hidden;\n\n          /* Only on the way out: visibility holds at visible until the fade has played. */\n          transition-property: width, margin-right, opacity, visibility;\n        }\n      }\n    }\n  }\n\n  &-error {\n    height: 1em;\n    padding-top: 3px;\n    color: var(--error-font-color);\n    font-size: 11px;\n  }\n\n  @keyframes fadeIn {\n    from {\n      opacity: 0;\n    }\n\n    to {\n      opacity: 0.5;\n    }\n  }\n}\n\n/* The label's glide between resting and floating is the motion; it still moves, just instantly.\n   The clear button keeps its fade, while the suffix beside it jumps instead of sliding. */\n@media (prefers-reduced-motion: reduce) {\n  .input-matLabel,\n  .input-placeholder {\n    transition: none;\n  }\n\n  .input-field-icon-clear {\n    transition-property: opacity, visibility;\n  }\n}\n"],"mappings":""}

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

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

package/dist/esm/common/kanbanBoard/KanbanBoard.mjs

@@ -1,7 +1,8 @@
-"use client";import e from"./kanbanBoard.module.mjs";import t from"./KanbanColumn.mjs";import{buildAnnouncements as n,columnsEqual as r,isColumnDragData as i,kanbanCollisionDetection as a,kanbanKeyboardCoordinateGetter as o,moveColumn as s,moveItem as c}from"./kanbanBoard.utils.mjs";import{useMemo as l,useRef as u,useState as d}from"react";import f from"classnames";import{jsx as p,jsxs as m}from"react/jsx-runtime";import{DndContext as h,DragOverlay as g,KeyboardSensor as _,MouseSensor as v,TouchSensor as y,useSensor as b,useSensors as x}from"@dnd-kit/core";import{SortableContext as S,horizontalListSortingStrategy as C}from"@dnd-kit/sortable";var ee=(e,t)=>t,te={activationConstraint:{distance:8}},ne={activationConstraint:{delay:250,tolerance:5}},re={coordinateGetter:o},w={draggable:`
+"use client";import e from"./kanbanBoard.module.mjs";import t,{ColumnHeaderContent as n}from"./KanbanColumn.mjs";import{applyPlacement as r,buildAnnouncements as i,columnsEqual as a,findArrowFocusTarget as o,findPlacement as s,isColumnDragData as c,kanbanCollisionDetection as ee,kanbanKeyboardCoordinateGetter as l,moveColumn as te,moveItem as ne,scrollsTowardBoard as re}from"./kanbanBoard.utils.mjs";import{useCallback as ie,useEffect as ae,useMemo as u,useRef as d,useState as f}from"react";import p from"classnames";import{jsx as m,jsxs as oe}from"react/jsx-runtime";import{DndContext as h,DragOverlay as g,KeyboardSensor as _,MouseSensor as v,TouchSensor as se,useSensor as y,useSensors as ce}from"@dnd-kit/core";import{SortableContext as le,horizontalListSortingStrategy as ue}from"@dnd-kit/sortable";var de=(e,t)=>t,fe={activationConstraint:{distance:8}},pe={activationConstraint:{delay:250,tolerance:5}},me={coordinateGetter:l},he={draggable:`
     To pick up a card or column, press space or enter.
+    Use the arrow keys to move between cards and columns.
     While dragging, use the arrow keys to move it — for a card, between positions and columns;
     for a column, left/right to reorder it.
     Press space or enter again to drop it, or press escape to cancel.
-  `};function T({columns:o,items:T,renderItem:E,onChange:D,dragHandle:O,getItemLabel:k=ee,getItemDisabled:A,renderEmptyColumn:j,renderColumnActions:M,reorderableColumns:N,collapseEmptyColumns:P,columnMaxHeight:F,onLoadMore:I,loadMoreThreshold:L,className:R,style:z,classNames:ie,styles:B,...V}){let[H,U]=d(null),[W,G]=d(!1),[K,q]=d(null),J=u(null),Y=x(b(v,te),b(y,ne),b(_,re)),X=K??o,ae=l(()=>X.map(e=>e.id),[X]),Z=l(()=>n(X,T,k),[X,T,k]),oe=l(()=>({announcements:Z,screenReaderInstructions:w}),[Z]);function se({active:e}){U(String(e.id)),G(i(e.data.current)),q(o),J.current=null}function Q({active:e,over:t}){if(!t)return;if(i(e.data.current)){let n=String(e.id),r=String(t.id);q(e=>{let t=e??o,i=s(t,n,r);return i===t?e:i});return}let n=String(e.id),r=String(t.id),a=e.rect.current.translated??e.rect.current.initial,l=a?`${a.top}:${a.left}`:null;(l===null||l!==J.current)&&(J.current=l,q(e=>{let i=e??o,s=c(i,n,r,{activeRect:a,overRect:t.rect});return s===i?e:s}))}function ce({over:e}){if(U(null),G(!1),!e||!K){q(null);return}r(K,o)||D(K),q(null)}function le(){U(null),G(!1),q(null)}let $=H&&W?X.find(e=>e.id===H):void 0;return m(h,{sensors:Y,collisionDetection:a,onDragStart:se,onDragOver:Q,onDragEnd:ce,onDragCancel:le,accessibility:oe,children:[p(S,{id:`kanban-columns`,items:ae,strategy:C,children:p(`div`,{...V,className:f(e.board,R),style:z,children:X.map(e=>p(t,{id:e.id,title:e.title,itemIds:e.itemIds,maxItems:e.maxItems,disabled:e.disabled,getItemDisabled:A,emptyPlaceholder:j?.(e),actions:M?.(e),reorderable:N,activeIsColumn:H!==null&&W,collapseEmptyColumns:P,columnMaxHeight:F,hasMore:e.hasMore,onLoadMore:I?()=>I(e.id):void 0,loadMoreThreshold:L,items:T,renderItem:E,dragHandle:O,preserveSizeWhileEmpty:H!==null},e.id))})}),p(g,{children:$?p(`div`,{className:f(e.column,e.columnDragOverlay),children:p(`div`,{className:e.columnHeader,children:p(`span`,{className:e.columnHeaderTitle,children:$.title})})}):H&&!W&&T[H]!==void 0?p(`div`,{className:f(e.dragOverlay,ie?.dragOverlay),style:B?.dragOverlay,children:E(T[H],H)}):null})]})}export{T as default};
+  `};function b({columns:l,items:b,renderItem:x,onChange:ge,dragHandle:S,getItemLabel:C=de,getItemDisabled:w,renderEmptyColumn:T,renderColumnActions:E,reorderableColumns:D,collapseEmptyColumns:O=!1,columnMaxHeight:k,onLoadMore:A,loadMoreThreshold:j,onKeyDown:M,className:N,style:P,classNames:F,styles:I,...L}){let[R,z]=f(null),[B,V]=f(!1),[H,U]=f(null),W=d(null),G=d(null),K=d(null),q=ie(e=>{let t=G.current,n=K.current?.current.translated;if(!t||!n||t.contains(e))return!0;let r=e===document.scrollingElement?{top:0,bottom:window.innerHeight}:e.getBoundingClientRect();return re(r,t.getBoundingClientRect(),n)},[]),[,_e]=f(0),J=R!==null;ae(()=>{if(!J)return;let e=({target:e})=>{let t=G.current;if(!t||!(e instanceof Node)||!(e.contains(t)||t.contains(e)))return;W.current=null;let n=e===document?document.scrollingElement:e;n instanceof Element&&!q(n)&&_e(e=>e+1)};return window.addEventListener(`scroll`,e,{capture:!0,passive:!0}),()=>window.removeEventListener(`scroll`,e,{capture:!0})},[J,q]);let Y=ce(y(v,fe),y(se,pe),y(_,me)),X=u(()=>r(l,H),[l,H]),ve=u(()=>X.map(e=>e.id),[X]),ye=u(()=>new Set(O?l.filter(e=>e.itemIds.length===0).map(e=>e.id):[]),[l,O]),Z=u(()=>i(X,b,C),[X,b,C]),be=u(()=>({announcements:Z,screenReaderInstructions:he}),[Z]);function xe(e){if(M?.(e),e.defaultPrevented||R!==null||!G.current||!(e.target instanceof HTMLElement)||e.altKey||e.ctrlKey||e.metaKey||e.shiftKey)return;let t=o(G.current,e.target,e.key);t&&(e.preventDefault(),t.focus())}function Se({active:e}){z(String(e.id)),V(c(e.data.current)),K.current=e.rect,W.current=null}function Ce({active:e,over:t}){if(!t)return;if(c(e.data.current)){let n=String(e.id),i=String(t.id);U(e=>{let t=r(l,e),a=te(t,n,i);return a===t?e:s(a,n,!0)});return}let n=String(e.id),i=String(t.id),a=e.rect.current.translated??e.rect.current.initial,o=a?`${a.top}:${a.left}`:null;(o===null||o!==W.current)&&(W.current=o,U(e=>{let o=r(l,e),c=ne(o,n,i,{activeRect:a,overRect:t.rect});return c===o?e:s(c,n,!1)}))}function we({over:e}){Q(),e&&!a(X,l)&&ge(X)}function Q(){z(null),V(!1),U(null)}let $=R&&B?X.find(e=>e.id===R):void 0;return oe(h,{sensors:Y,collisionDetection:ee,onDragStart:Se,onDragOver:Ce,onDragEnd:we,onDragCancel:Q,accessibility:be,autoScroll:{canScroll:e=>q(e)},children:[m(le,{id:`kanban-columns`,items:ve,strategy:ue,children:m(`div`,{...L,ref:G,className:p(e.board,N),style:P,onKeyDown:xe,children:X.map(e=>m(t,{id:e.id,title:e.title,itemIds:e.itemIds,maxItems:e.maxItems,disabled:e.disabled,getItemDisabled:w,getItemLabel:C,emptyPlaceholder:T?.(e),actions:E?.(e),reorderable:D,activeIsColumn:R!==null&&B,collapsed:ye.has(e.id),columnMaxHeight:k,hasMore:e.hasMore,onLoadMore:A?()=>A(e.id):void 0,loadMoreThreshold:j,items:b,renderItem:x,dragHandle:S},e.id))})}),m(g,{children:$?m(`div`,{className:p(e.column,e.columnDragOverlay),inert:!0,children:m(`div`,{className:e.columnHeader,children:m(n,{title:$.title,count:$.itemIds.length,maxItems:$.maxItems,actions:E?.($)})})}):R&&!B&&b[R]!==void 0?m(`div`,{className:p(e.dragOverlay,F?.dragOverlay),style:I?.dragOverlay,children:x(b[R],R)}):null})]})}export{b as default};
 //# sourceMappingURL=KanbanBoard.mjs.map