@ahrowe/ui 0.33.0 → 0.34.0

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

@@ -1 +1 @@
-{"version":3,"file":"dropdown.mjs","names":[],"sources":["../../../../package/common/dropdown/dropdown.tsx"],"sourcesContent":["import React, { useState, useEffect, useLayoutEffect, useRef } from 'react';\nimport cx from 'classnames';\nimport InfiniteBlock from 'components/common/infiniteBlock';\nimport BodyEnd from 'components/common/bodyEnd';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { faChevronDown as dropdownIcon } from '@fortawesome/free-solid-svg-icons';\nimport Downshift, { StateChangeOptions, DownshiftState } from 'downshift';\nimport Tooltip from 'components/common/tooltip';\n\nimport { useFloatingPosition } from '../floatingMenu/useFloatingPosition';\nimport { useComponentDefaults, usePresentationDefault } from '../configProvider';\nimport { useSheet } from '../hooks/useSheet';\nimport { useOverlay } from '../hooks/useOverlay';\nimport { Presentation } from '../floatingMenu/floatingMenu.types';\nimport styles from './dropdown.module.pcss';\nimport sheetStyles from '../styles/sheet.module.pcss';\nimport SheetBackdrop from '../sheetBackdrop';\nimport type { DropdownProps, DropdownItem } from './dropdown.types';\n\nfunction Dropdown(props: DropdownProps) {\n  const {\n    errorMessage = '',\n    className = '',\n    style,\n    label = '',\n    value = '',\n    isValid = true,\n    tabIndex = 0,\n    isRequired = false,\n    customProps = {},\n    isRow = false,\n    disabled = false,\n    readOnly = false,\n    onScroll = () => Promise.resolve(),\n    onClick,\n    onChange,\n    onFocus: onFocusProp = null,\n    onBlur: onBlurProp = null,\n    onMouseEnter: onMouseEnterProp = null,\n    onMouseLeave: onMouseLeaveProp = null,\n    dropdownLabel: dropdownLabelProp,\n    isDropdownListWider = false,\n    formValidator = null,\n    classNames,\n    styles: slotStyles,\n    items = [],\n    useMatLabelStyle = true,\n    alwaysFloatLabel = false,\n    placeholder = '',\n    plainStyle = false,\n    scrollToSelected = false,\n    presentation: presentationProp,\n    reactRef,\n    ...rest\n  } = useComponentDefaults('Dropdown', props);\n  const [isFocused, setIsFocused] = useState(false);\n  const [isHovered, setIsHovered] = useState(false);\n  const [, forceUpdate] = useState(0);\n  const fvRef = useRef(formValidator);\n  const triggerRef = useRef<HTMLDivElement>(null);\n  const anchorRef = useRef<HTMLDivElement>(null);\n  const [menuIsOpen, setMenuIsOpen] = useState(false);\n\n  // Explicit prop → this component's global default → the app-wide one → anchored.\n  const appPresentation = usePresentationDefault();\n  const presentation = presentationProp ?? appPresentation ?? Presentation.Default;\n  const { isSheet, sheetStyle } = useSheet(presentation);\n\n  useLayoutEffect(() => {\n    const trigger = triggerRef.current;\n    const menu = anchorRef.current;\n    // A sheet spans the screen; only an anchored list matches the trigger's width.\n    if (!menuIsOpen || isSheet || !trigger || !menu) return;\n    const { width } = trigger.getBoundingClientRect();\n    const { fontSize } = window.getComputedStyle(trigger);\n    menu.style.width = `${width}px`;\n    menu.style.fontSize = fontSize;\n  }, [menuIsOpen, isSheet]);\n\n  // A sheet isn't anchored to anything, so there's nothing to track, flip or clamp.\n  useFloatingPosition({\n    isOpen: menuIsOpen && !isSheet,\n    triggerRef,\n    anchorRef,\n    panelRef: anchorRef,\n    flipClassName: styles.dropdownInputListAnimFlip,\n  });\n\n  // Registered for as long as the list is open, not just as a sheet: it puts the list on the\n  // overlay stack so an enclosing Modal doesn't also act on the Escape that closes it. No\n  // `onEscape` of its own — Downshift already closes the list from the toggle button. Focus isn't\n  // trapped: Downshift keeps focus on that button and drives the list from there.\n  useOverlay({\n    isActive: menuIsOpen,\n    containerRef: anchorRef,\n    trapFocus: false,\n    lockScroll: isSheet,\n  });\n\n  useEffect(() => {\n    fvRef.current = formValidator;\n    if (!fvRef.current) return;\n    fvRef.current.label = label ?? '';\n    fvRef.current.validate();\n    const listener = () => forceUpdate((n) => n + 1);\n    fvRef.current.registerOnUpdateListener(listener);\n    return () => fvRef.current?.removeOnUpdateListener(listener);\n  }, [formValidator, label]);\n\n  const onMouseEnterHandler = (event: React.MouseEvent) => {\n    setIsHovered(true);\n    onMouseEnterProp?.(event);\n  };\n\n  const onMouseLeaveHandler = (event: React.MouseEvent) => {\n    setIsHovered(false);\n    onMouseLeaveProp?.(event);\n  };\n\n  const onFocusHandler = (event: React.FocusEvent) => {\n    setIsFocused(true);\n    onFocusProp?.(event);\n  };\n\n  const onBlurHandler = (event: React.FocusEvent) => {\n    if (fvRef.current) fvRef.current.touched = true;\n    setIsFocused(false);\n    onBlurProp?.(event);\n  };\n\n  const hasError = (): boolean => {\n    return formValidator ? formValidator.touched && formValidator.hasError() : !isValid || !!errorMessage;\n  };\n\n  const computedIsRequired = (): boolean => {\n    return !!(\n      isRequired || formValidator?.validators.find((v) => (v as { validatorId?: string }).validatorId === 'required')\n    );\n  };\n\n  const onChangeHandler = (val: string | number): void => {\n    if (formValidator) {\n      formValidator.set(val);\n      onChange?.(formValidator.value, customProps);\n    } else {\n      onChange?.(val, customProps);\n    }\n  };\n\n  let dropdownLabel = dropdownLabelProp;\n  const currentValue = formValidator ? (formValidator.value as string | number) : value;\n  const hasErr = hasError();\n\n  items.forEach((item: DropdownItem) => {\n    if (item.key === currentValue) {\n      dropdownLabel = item.label as string;\n    }\n  });\n\n  const displayValue = dropdownLabel || currentValue;\n  const isDisplayBlank = displayValue == null || (typeof displayValue === 'string' && displayValue.trim() === '');\n\n  const requiredMark = computedIsRequired() ? <span className={styles.requiredMark}>*</span> : null;\n  const editedLabel = label && computedIsRequired() ? `${label} *` : label;\n\n  const showFocus = isFocused && !readOnly;\n\n  return (\n    <div\n      {...rest}\n      className={cx(className, classNames?.root, styles.dropdownLabel, styles.dropdown, {\n        [styles.dropdownLabelColumn]: !isRow,\n      })}\n      style={{ ...style, ...slotStyles?.root }}\n      onMouseEnter={onMouseEnterHandler}\n      onMouseLeave={onMouseLeaveHandler}\n    >\n      <Downshift\n        {...(readOnly ? { isOpen: false } : {})}\n        onChange={(selection: DropdownItem | null) => onChangeHandler((selection || { key: '' }).key)}\n        itemToString={(item: DropdownItem | null) => (item ? String(item.key) : '')}\n        selectedItem={items.find((el) => el.key === currentValue) ?? null}\n        onStateChange={(changes: StateChangeOptions<DropdownItem>) => {\n          if (typeof changes.isOpen === 'boolean') setMenuIsOpen(changes.isOpen);\n        }}\n        stateReducer={(state: DownshiftState<DropdownItem>, changes: StateChangeOptions<DropdownItem>) => {\n          if (scrollToSelected && Object.prototype.hasOwnProperty.call(changes, 'isOpen')) {\n            return {\n              ...changes,\n              highlightedIndex: changes.isOpen ? items.indexOf(state.selectedItem as DropdownItem) : null,\n            };\n          }\n          return changes;\n        }}\n      >\n        {({\n          getItemProps,\n          getMenuProps,\n          getToggleButtonProps,\n          closeMenu,\n          isOpen,\n          selectedItem,\n          highlightedIndex,\n          setHighlightedIndex,\n        }) => (\n          <div>\n            <div\n              ref={triggerRef}\n              onFocus={onFocusHandler}\n              onBlur={onBlurHandler}\n              className={cx(\n                styles.dropdownInput,\n                {\n                  [styles.dropdownInputPlain]: plainStyle,\n                  [styles.dropdownInputReadOnly]: readOnly && !disabled,\n                },\n                classNames?.field,\n              )}\n              style={slotStyles?.field}\n            >\n              <button\n                tabIndex={tabIndex}\n                type='button'\n                disabled={disabled}\n                aria-readonly={readOnly || undefined}\n                className={cx(\n                  styles.dropdownInputButton,\n                  {\n                    [styles.dropdownInputButtonDisabled]: disabled,\n                    [styles.dropdownInputButtonReadOnly]: readOnly && !disabled,\n                  },\n                  classNames?.control,\n                )}\n                style={{ ...(isDropdownListWider ? { padding: '6px', border: 'none' } : {}), ...slotStyles?.control }}\n                {...getToggleButtonProps()}\n                onClick={(e: React.MouseEvent<HTMLButtonElement>) => {\n                  getToggleButtonProps().onClick?.(e);\n                  onClick?.(e);\n                }}\n                ref={reactRef}\n              >\n                {/* Non-breaking space when blank (same text-node layout as a\n                    real value) so the button keeps a full line of height. */}\n                {isDisplayBlank ? '\\u00A0' : displayValue}\n              </button>\n              <button\n                type='button'\n                tabIndex={-1}\n                disabled={disabled}\n                className={cx(styles.dropdownInputButtonIcon, classNames?.icon)}\n                style={slotStyles?.icon}\n                {...getToggleButtonProps()}\n                onClick={(e: React.MouseEvent<HTMLButtonElement>) => {\n                  getToggleButtonProps().onClick?.(e);\n                  onClick?.(e);\n                }}\n              >\n                {!disabled && !readOnly && (\n                  <FontAwesomeIcon\n                    icon={dropdownIcon}\n                    className={cx(styles.dropdownInputButtonIconArrow, {\n                      [styles.dropdownInputButtonIconArrowOpen]: isOpen,\n                    })}\n                  />\n                )}\n              </button>\n              {!disabled && !readOnly && isOpen ? (\n                <BodyEnd>\n                  {isSheet && <SheetBackdrop onClose={closeMenu} />}\n                  <div\n                    {...getMenuProps(\n                      {\n                        ref: (node: HTMLDivElement | null) => {\n                          anchorRef.current = node;\n                        },\n                        'aria-label': label || placeholder || undefined,\n                      },\n                      { suppressRefError: true },\n                    )}\n                    style={isSheet ? sheetStyle : undefined}\n                    className={cx(styles.dropdownInputListAnim, {\n                      [sheetStyles.sheet]: isSheet,\n                      [styles.dropdownInputListAnimWider]: isDropdownListWider && !isSheet,\n                    })}\n                  >\n                    <InfiniteBlock\n                      onScroll={onScroll}\n                      className={cx(styles.dropdownInputList, isSheet && sheetStyles.sheetScroll, classNames?.list)}\n                      style={slotStyles?.list}\n                      setHighlightedIndex={setHighlightedIndex}\n                    >\n                      {items.map((item: DropdownItem, index: number) => (\n                        <div\n                          key={item.key}\n                          {...getItemProps({ index, item, disabled: !!item.disabled })}\n                          style={slotStyles?.option}\n                          className={cx(styles.dropdownInputListItem, classNames?.option, {\n                            [styles.dropdownInputListItemActive]: highlightedIndex === index,\n                            [styles.dropdownInputListItemSelected]: selectedItem === item,\n                            [styles.dropdownInputListItemDisabled]: !!item.disabled,\n                          })}\n                        >\n                          {item.label}\n                        </div>\n                      ))}\n                    </InfiniteBlock>\n                  </div>\n                </BodyEnd>\n              ) : null}\n              <fieldset\n                className={cx(styles.dropdownFieldset, {\n                  [styles.dropdownBorderPlain]: plainStyle,\n                  [styles.dropdownBorderFocused]: showFocus,\n                  [styles.dropdownBorderInvalid]: hasErr,\n                  [styles.dropdownBorderError]: hasErr,\n                })}\n              >\n                <legend\n                  className={cx(styles.dropdownFieldsetLegend, {\n                    [styles.dropdownFieldsetLegendActive]:\n                      useMatLabelStyle && (alwaysFloatLabel || showFocus || !isDisplayBlank),\n                  })}\n                >\n                  <span>{editedLabel}</span>\n                </legend>\n              </fieldset>\n              {useMatLabelStyle && label && (\n                <div\n                  className={cx(\n                    styles.dropdownMatLabel,\n                    {\n                      [styles.dropdownMatLabelFloating]: alwaysFloatLabel || showFocus || !isDisplayBlank,\n                    },\n                    // The floating and the stacked label are two renderings of\n                    // the same thing, so one slot reaches whichever is in use.\n                    classNames?.label,\n                  )}\n                  style={slotStyles?.label}\n                >\n                  {label}\n                  {requiredMark}\n                </div>\n              )}\n              {useMatLabelStyle && placeholder && (\n                <div\n                  className={cx(\n                    styles.dropdownPlaceholder,\n                    showFocus && !dropdownLabel && styles.dropdownPlaceholderShown,\n                  )}\n                >\n                  {placeholder}\n                </div>\n              )}\n            </div>\n          </div>\n        )}\n      </Downshift>\n      {label && !useMatLabelStyle && (\n        <div className={cx(styles.dropdownLabelText, classNames?.label)} style={slotStyles?.label}>\n          {label}\n          {requiredMark}\n        </div>\n      )}\n      <Tooltip\n        variant='error'\n        message={formValidator ? formValidator.getCurrentErrorMessage() : errorMessage || ''}\n        isVisible={hasErr && (isFocused || isHovered)}\n      />\n    </div>\n  );\n}\n\nexport default Dropdown;\n"],"mappings":"o9BAmBA,SAAS,EAAS,EAAsB,CACtC,GAAM,CACJ,eAAe,GACf,YAAY,GACZ,SACA,QAAQ,GACR,SAAQ,GACR,WAAU,GACV,WAAW,EACX,cAAa,GACb,cAAc,CAAC,EACf,SAAQ,GACR,WAAW,GACX,WAAW,GACX,gBAAiB,QAAQ,QAAQ,EACjC,UACA,WACA,QAAS,GAAc,KACvB,OAAQ,GAAa,KACrB,aAAc,GAAmB,KACjC,aAAc,GAAmB,KACjC,cAAe,GACf,sBAAsB,GACtB,gBAAgB,KAChB,aACA,OAAQ,EACR,QAAQ,CAAC,EACT,mBAAmB,GACnB,mBAAmB,GACnB,cAAc,GACd,aAAa,GACb,mBAAmB,GACnB,aAAc,EACd,WACA,GAAG,IACD,EAAqB,WAAY,CAAK,EACpC,CAAC,EAAW,GAAgB,EAAS,EAAK,EAC1C,CAAC,GAAW,GAAgB,EAAS,EAAK,EAC1C,EAAG,IAAe,EAAS,CAAC,EAC5B,EAAQ,EAAO,CAAa,EAC5B,EAAa,EAAuB,IAAI,EACxC,EAAY,EAAuB,IAAI,EACvC,CAAC,EAAY,IAAiB,EAAS,EAAK,EAG5C,GAAkB,EAAuB,EACzC,GAAe,GAAoB,IAAmB,EAAa,QACnE,CAAE,UAAS,eAAe,EAAS,EAAY,EAErD,OAAsB,CACpB,IAAM,EAAU,EAAW,QACrB,EAAO,EAAU,QAEvB,GAAI,CAAC,GAAc,GAAW,CAAC,GAAW,CAAC,EAAM,OACjD,GAAM,CAAE,SAAU,EAAQ,sBAAsB,EAC1C,CAAE,YAAa,OAAO,iBAAiB,CAAO,EACpD,EAAK,MAAM,MAAQ,GAAG,EAAM,IAC5B,EAAK,MAAM,SAAW,CACxB,EAAG,CAAC,EAAY,CAAO,CAAC,EAGxB,EAAoB,CAClB,OAAQ,GAAc,CAAC,EACvB,aACA,YACA,SAAU,EACV,cAAe,EAAO,yBACxB,CAAC,EAMD,EAAW,CACT,SAAU,EACV,aAAc,EACd,UAAW,GACX,WAAY,CACd,CAAC,EAED,MAAgB,CAEd,GADA,EAAM,QAAU,EACZ,CAAC,EAAM,QAAS,OACpB,EAAM,QAAQ,MAAQ,GAAS,GAC/B,EAAM,QAAQ,SAAS,EACvB,IAAM,MAAiB,GAAa,GAAM,EAAI,CAAC,EAE/C,OADA,EAAM,QAAQ,yBAAyB,CAAQ,MAClC,EAAM,SAAS,uBAAuB,CAAQ,CAC7D,EAAG,CAAC,EAAe,CAAK,CAAC,EAEzB,IAAM,GAAuB,GAA4B,CACvD,EAAa,EAAI,EACjB,KAAmB,CAAK,CAC1B,EAEM,GAAuB,GAA4B,CACvD,EAAa,EAAK,EAClB,KAAmB,CAAK,CAC1B,EAEM,GAAkB,GAA4B,CAClD,EAAa,EAAI,EACjB,KAAc,CAAK,CACrB,EAEM,GAAiB,GAA4B,CAC7C,EAAM,UAAS,EAAM,QAAQ,QAAU,IAC3C,EAAa,EAAK,EAClB,KAAa,CAAK,CACpB,EAEM,OACG,EAAgB,EAAc,SAAW,EAAc,SAAS,EAAI,CAAC,IAAW,CAAC,CAAC,EAGrF,MACG,CAAC,EACN,IAAc,GAAe,WAAW,KAAM,GAAO,EAA+B,cAAgB,UAAU,GAI5G,GAAmB,GAA+B,CAClD,GACF,EAAc,IAAI,CAAG,EACrB,IAAW,EAAc,MAAO,CAAW,GAE3C,IAAW,EAAK,CAAW,CAE/B,EAEI,EAAgB,GACd,EAAe,EAAiB,EAAc,MAA4B,GAC1E,EAAS,GAAS,EAExB,EAAM,QAAS,GAAuB,CAChC,EAAK,MAAQ,IACf,EAAgB,EAAK,MAEzB,CAAC,EAED,IAAM,EAAe,GAAiB,EAChC,EAAiB,GAAgB,MAAS,OAAO,GAAiB,UAAY,EAAa,KAAK,IAAM,GAEtG,EAAe,EAAmB,EAAI,EAAC,OAAD,CAAM,UAAW,EAAO,aAAc,SAAA,GAAO,CAAA,EAAI,KACvF,GAAc,GAAS,EAAmB,EAAI,GAAG,EAAM,IAAM,EAE7D,EAAY,GAAa,CAAC,EAEhC,OACE,EAAC,MAAD,CACE,GAAI,GACJ,UAAW,EAAG,EAAW,GAAY,KAAM,EAAO,cAAe,EAAO,SAAU,EAC/E,EAAO,qBAAsB,CAAC,EACjC,CAAC,EACD,MAAO,CAAE,GAAG,GAAO,GAAG,GAAY,IAAK,EACvC,aAAc,GACd,aAAc,GAPhB,SAAA,CASE,EAAC,GAAD,CACE,GAAK,EAAW,CAAE,OAAQ,EAAM,EAAI,CAAC,EACrC,SAAW,GAAmC,IAAiB,GAAa,CAAE,IAAK,EAAG,EAAA,CAAG,GAAG,EAC5F,aAAe,GAA+B,EAAO,OAAO,EAAK,GAAG,EAAI,GACxE,aAAc,EAAM,KAAM,GAAO,EAAG,MAAQ,CAAY,GAAK,KAC7D,cAAgB,GAA8C,CACxD,OAAO,EAAQ,QAAW,WAAW,GAAc,EAAQ,MAAM,CACvE,EACA,cAAe,EAAqC,IAC9C,GAAoB,OAAO,UAAU,eAAe,KAAK,EAAS,QAAQ,EACrE,CACL,GAAG,EACH,iBAAkB,EAAQ,OAAS,EAAM,QAAQ,EAAM,YAA4B,EAAI,IACzF,EAEK,EAGP,UAAA,CACA,eACA,eACA,uBACA,YACA,SACA,eACA,mBACA,yBAEA,EAAC,MAAD,CAAA,SACE,EAAC,MAAD,CACE,IAAK,EACL,QAAS,GACT,OAAQ,GACR,UAAW,EACT,EAAO,cACP,EACG,EAAO,oBAAqB,GAC5B,EAAO,uBAAwB,GAAY,CAAC,CAC/C,EACA,GAAY,KACd,EACA,MAAO,GAAY,MAZrB,SAAA,CAcE,EAAC,SAAD,CACY,WACV,KAAK,SACK,WACV,gBAAe,GAAY,IAAA,GAC3B,UAAW,EACT,EAAO,oBACP,EACG,EAAO,6BAA8B,GACrC,EAAO,6BAA8B,GAAY,CAAC,CACrD,EACA,GAAY,OACd,EACA,MAAO,CAAE,GAAI,EAAsB,CAAE,QAAS,MAAO,OAAQ,MAAO,EAAI,CAAC,EAAI,GAAG,GAAY,OAAQ,EACpG,GAAI,EAAqB,EACzB,QAAU,GAA2C,CACnD,EAAqB,CAAC,CAAC,UAAU,CAAC,EAClC,IAAU,CAAC,CACb,EACA,IAAK,EAIJ,SAAA,EAAiB,OAAW,CACvB,CAAA,EACR,EAAC,SAAD,CACE,KAAK,SACL,SAAU,GACA,WACV,UAAW,EAAG,EAAO,wBAAyB,GAAY,IAAI,EAC9D,MAAO,GAAY,KACnB,GAAI,EAAqB,EACzB,QAAU,GAA2C,CACnD,EAAqB,CAAC,CAAC,UAAU,CAAC,EAClC,IAAU,CAAC,CACb,EAEC,SAAA,CAAC,GAAY,CAAC,GACb,EAAC,GAAD,CACE,KAAM,GACN,UAAW,EAAG,EAAO,6BAA8B,EAChD,EAAO,kCAAmC,CAC7C,CAAC,CACF,CAAA,CAEG,CAAA,EACP,CAAC,GAAY,CAAC,GAAY,EACzB,EAAC,EAAD,CAAA,SAAA,CACG,GAAW,EAAC,GAAD,CAAe,QAAS,CAAY,CAAA,EAChD,EAAC,MAAD,CACE,GAAI,EACF,CACE,IAAM,GAAgC,CACpC,EAAU,QAAU,CACtB,EACA,aAAc,GAAS,GAAe,IAAA,EACxC,EACA,CAAE,iBAAkB,EAAK,CAC3B,EACA,MAAO,EAAU,GAAa,IAAA,GAC9B,UAAW,EAAG,EAAO,sBAAuB,EACzC,EAAY,OAAQ,GACpB,EAAO,4BAA6B,GAAuB,CAAC,CAC/D,CAAC,EAED,SAAA,EAAC,GAAD,CACY,YACV,UAAW,EAAG,EAAO,kBAAmB,GAAW,EAAY,YAAa,GAAY,IAAI,EAC5F,MAAO,GAAY,KACE,sBAEpB,SAAA,EAAM,KAAK,EAAoB,IAC9B,EAAC,MAAD,CAEE,GAAI,EAAa,CAAE,QAAO,OAAM,SAAU,CAAC,CAAC,EAAK,QAAS,CAAC,EAC3D,MAAO,GAAY,OACnB,UAAW,EAAG,EAAO,sBAAuB,GAAY,OAAQ,EAC7D,EAAO,6BAA8B,IAAqB,GAC1D,EAAO,+BAAgC,IAAiB,GACxD,EAAO,+BAAgC,CAAC,CAAC,EAAK,QACjD,CAAC,EAEA,SAAA,EAAK,KACH,EAVE,EAAK,GAUP,CACN,CACY,CAAA,CACZ,CAAA,CACE,CAAA,CAAA,EACP,KACJ,EAAC,WAAD,CACE,UAAW,EAAG,EAAO,iBAAkB,EACpC,EAAO,qBAAsB,GAC7B,EAAO,uBAAwB,GAC/B,EAAO,uBAAwB,GAC/B,EAAO,qBAAsB,CAChC,CAAC,EAED,SAAA,EAAC,SAAD,CACE,UAAW,EAAG,EAAO,uBAAwB,EAC1C,EAAO,8BACN,IAAqB,GAAoB,GAAa,CAAC,EAC3D,CAAC,EAED,SAAA,EAAC,OAAD,CAAA,SAAO,EAAkB,CAAA,CACnB,CAAA,CACA,CAAA,EACT,GAAoB,GACnB,EAAC,MAAD,CACE,UAAW,EACT,EAAO,iBACP,EACG,EAAO,0BAA2B,GAAoB,GAAa,CAAC,CACvE,EAGA,GAAY,KACd,EACA,MAAO,GAAY,MAVrB,SAAA,CAYG,EACA,CACE,IAEN,GAAoB,GACnB,EAAC,MAAD,CACE,UAAW,EACT,EAAO,oBACP,GAAa,CAAC,GAAiB,EAAO,wBACxC,EAEC,SAAA,CACE,CAAA,CAEJ,CACF,CAAA,CAAA,CAAA,CAEE,CAAA,EACV,GAAS,CAAC,GACT,EAAC,MAAD,CAAK,UAAW,EAAG,EAAO,kBAAmB,GAAY,KAAK,EAAG,MAAO,GAAY,MAApF,SAAA,CACG,EACA,CACE,IAEP,EAAC,EAAD,CACE,QAAQ,QACR,QAAS,EAAgB,EAAc,uBAAuB,EAAI,GAAgB,GAClF,UAAW,IAAW,GAAa,GACpC,CAAA,CACE,GAET"}
+{"version":3,"file":"dropdown.mjs","names":[],"sources":["../../../../package/common/dropdown/dropdown.tsx"],"sourcesContent":["import React, { useState, useEffect, useLayoutEffect, useRef } from 'react';\nimport cx from 'classnames';\nimport InfiniteBlock from 'components/common/infiniteBlock';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { faChevronDown as dropdownIcon } from '@fortawesome/free-solid-svg-icons';\nimport Downshift, { StateChangeOptions, DownshiftState } from 'downshift';\nimport Tooltip from 'components/common/tooltip';\n\nimport Popover from '../popover';\nimport { PopoverAlign, PopoverPlacement } from '../popover/popover.types';\nimport { useComponentDefaults, usePresentationDefault } from '../configProvider';\nimport { useSheet } from '../hooks/useSheet';\nimport { Presentation } from '../configProvider/presentation.types';\nimport styles from './dropdown.module.pcss';\nimport sheetStyles from '../styles/sheet.module.pcss';\nimport type { DropdownProps, DropdownItem } from './dropdown.types';\n\nfunction Dropdown(props: DropdownProps) {\n  const {\n    errorMessage = '',\n    className = '',\n    style,\n    label = '',\n    value = '',\n    isValid = true,\n    tabIndex = 0,\n    isRequired = false,\n    customProps = {},\n    isRow = false,\n    disabled = false,\n    readOnly = false,\n    onScroll = () => Promise.resolve(),\n    onClick,\n    onChange,\n    onFocus: onFocusProp = null,\n    onBlur: onBlurProp = null,\n    onMouseEnter: onMouseEnterProp = null,\n    onMouseLeave: onMouseLeaveProp = null,\n    dropdownLabel: dropdownLabelProp,\n    isDropdownListWider = false,\n    formValidator = null,\n    classNames,\n    styles: slotStyles,\n    items = [],\n    useMatLabelStyle = true,\n    alwaysFloatLabel = false,\n    placeholder = '',\n    plainStyle = false,\n    scrollToSelected = false,\n    presentation: presentationProp,\n    reactRef,\n    ...rest\n  } = useComponentDefaults('Dropdown', props);\n  const [isFocused, setIsFocused] = useState(false);\n  const [isHovered, setIsHovered] = useState(false);\n  const [, forceUpdate] = useState(0);\n  const fvRef = useRef(formValidator);\n  const triggerRef = useRef<HTMLDivElement>(null);\n  const anchorRef = useRef<HTMLDivElement>(null);\n  const [menuIsOpen, setMenuIsOpen] = useState(false);\n\n  // Explicit prop → this component's global default → the app-wide one → anchored.\n  // Resolved here rather than left to Popover so that this component and the panel\n  // it opens can never disagree about whether they are presenting as a sheet.\n  const appPresentation = usePresentationDefault();\n  const presentation = presentationProp ?? appPresentation ?? Presentation.Default;\n  const { isSheet } = useSheet(presentation);\n\n  // The list reads at the field's size, which is not always the page's: a Dropdown\n  // inside something with a smaller font should not open a list at the default one.\n  // Width is Popover's job, through `width='trigger'`.\n  useLayoutEffect(() => {\n    const trigger = triggerRef.current;\n    const menu = anchorRef.current;\n    if (!menuIsOpen || isSheet || !trigger || !menu) return;\n    menu.style.fontSize = window.getComputedStyle(trigger).fontSize;\n  }, [menuIsOpen, isSheet]);\n\n  useEffect(() => {\n    fvRef.current = formValidator;\n    if (!fvRef.current) return;\n    fvRef.current.label = label ?? '';\n    fvRef.current.validate();\n    const listener = () => forceUpdate((n) => n + 1);\n    fvRef.current.registerOnUpdateListener(listener);\n    return () => fvRef.current?.removeOnUpdateListener(listener);\n  }, [formValidator, label]);\n\n  const onMouseEnterHandler = (event: React.MouseEvent) => {\n    setIsHovered(true);\n    onMouseEnterProp?.(event);\n  };\n\n  const onMouseLeaveHandler = (event: React.MouseEvent) => {\n    setIsHovered(false);\n    onMouseLeaveProp?.(event);\n  };\n\n  const onFocusHandler = (event: React.FocusEvent) => {\n    setIsFocused(true);\n    onFocusProp?.(event);\n  };\n\n  const onBlurHandler = (event: React.FocusEvent) => {\n    if (fvRef.current) fvRef.current.touched = true;\n    setIsFocused(false);\n    onBlurProp?.(event);\n  };\n\n  const hasError = (): boolean => {\n    return formValidator ? formValidator.touched && formValidator.hasError() : !isValid || !!errorMessage;\n  };\n\n  const computedIsRequired = (): boolean => {\n    return !!(\n      isRequired || formValidator?.validators.find((v) => (v as { validatorId?: string }).validatorId === 'required')\n    );\n  };\n\n  const onChangeHandler = (val: string | number): void => {\n    if (formValidator) {\n      formValidator.set(val);\n      onChange?.(formValidator.value, customProps);\n    } else {\n      onChange?.(val, customProps);\n    }\n  };\n\n  let dropdownLabel = dropdownLabelProp;\n  const currentValue = formValidator ? (formValidator.value as string | number) : value;\n  const hasErr = hasError();\n\n  items.forEach((item: DropdownItem) => {\n    if (item.key === currentValue) {\n      dropdownLabel = item.label as string;\n    }\n  });\n\n  const displayValue = dropdownLabel || currentValue;\n  const isDisplayBlank = displayValue == null || (typeof displayValue === 'string' && displayValue.trim() === '');\n\n  const requiredMark = computedIsRequired() ? <span className={styles.requiredMark}>*</span> : null;\n  const editedLabel = label && computedIsRequired() ? `${label} *` : label;\n\n  const showFocus = isFocused && !readOnly;\n\n  return (\n    <div\n      {...rest}\n      className={cx(className, classNames?.root, styles.dropdownLabel, styles.dropdown, {\n        [styles.dropdownLabelColumn]: !isRow,\n      })}\n      style={{ ...style, ...slotStyles?.root }}\n      onMouseEnter={onMouseEnterHandler}\n      onMouseLeave={onMouseLeaveHandler}\n    >\n      <Downshift\n        {...(readOnly ? { isOpen: false } : {})}\n        onChange={(selection: DropdownItem | null) => onChangeHandler((selection || { key: '' }).key)}\n        itemToString={(item: DropdownItem | null) => (item ? String(item.key) : '')}\n        selectedItem={items.find((el) => el.key === currentValue) ?? null}\n        onStateChange={(changes: StateChangeOptions<DropdownItem>) => {\n          if (typeof changes.isOpen === 'boolean') setMenuIsOpen(changes.isOpen);\n        }}\n        stateReducer={(state: DownshiftState<DropdownItem>, changes: StateChangeOptions<DropdownItem>) => {\n          if (scrollToSelected && Object.prototype.hasOwnProperty.call(changes, 'isOpen')) {\n            return {\n              ...changes,\n              highlightedIndex: changes.isOpen ? items.indexOf(state.selectedItem as DropdownItem) : null,\n            };\n          }\n          return changes;\n        }}\n      >\n        {({\n          getItemProps,\n          getMenuProps,\n          getToggleButtonProps,\n          closeMenu,\n          isOpen,\n          selectedItem,\n          highlightedIndex,\n          setHighlightedIndex,\n        }) => (\n          <div>\n            <Popover\n              // Downshift owns the open state, the highlight and the keys; Popover\n              // owns where the list goes. So the open half of `onOpenChange` is\n              // Downshift's business already, and only a close is acted on: the\n              // outside click and the Escape Popover sees before it does.\n              isOpen={!disabled && !readOnly && isOpen}\n              onOpenChange={(next) => {\n                if (!next) closeMenu();\n              }}\n              placement={PopoverPlacement.Bottom}\n              align={PopoverAlign.Start}\n              offset={0}\n              withArrow={false}\n              constrainWidth={false}\n              width='trigger'\n              // The toggle button answers a click on the field, and the focus\n              // belongs to it while the list is open.\n              closeOnTriggerClick={false}\n              focusOnOpen={false}\n              presentation={presentation}\n              classNames={{ panel: styles.dropdownPanel }}\n              content={\n                <div\n                  {...getMenuProps(\n                    {\n                      ref: (node: HTMLDivElement | null) => {\n                        anchorRef.current = node;\n                      },\n                      'aria-label': label || placeholder || undefined,\n                    },\n                    { suppressRefError: true },\n                  )}\n                  // A sheet's own panel does the clipping and the scrolling, and\n                  // spans the screen rather than sizing itself to the field.\n                  className={cx(!isSheet && styles.dropdownInputListAnim, {\n                    [styles.dropdownInputListAnimWider]: isDropdownListWider && !isSheet,\n                  })}\n                >\n                  <InfiniteBlock\n                    onScroll={onScroll}\n                    className={cx(styles.dropdownInputList, isSheet && sheetStyles.sheetScroll, classNames?.list)}\n                    style={slotStyles?.list}\n                    setHighlightedIndex={setHighlightedIndex}\n                  >\n                    {items.map((item: DropdownItem, index: number) => (\n                      <div\n                        key={item.key}\n                        {...getItemProps({ index, item, disabled: !!item.disabled })}\n                        style={slotStyles?.option}\n                        className={cx(styles.dropdownInputListItem, classNames?.option, {\n                          [styles.dropdownInputListItemActive]: highlightedIndex === index,\n                          [styles.dropdownInputListItemSelected]: selectedItem === item,\n                          [styles.dropdownInputListItemDisabled]: !!item.disabled,\n                        })}\n                      >\n                        {item.label}\n                      </div>\n                    ))}\n                  </InfiniteBlock>\n                </div>\n              }\n            >\n              <div\n                ref={triggerRef}\n                onFocus={onFocusHandler}\n                onBlur={onBlurHandler}\n                className={cx(\n                  styles.dropdownInput,\n                  {\n                    [styles.dropdownInputPlain]: plainStyle,\n                    [styles.dropdownInputReadOnly]: readOnly && !disabled,\n                  },\n                  classNames?.field,\n                )}\n                style={slotStyles?.field}\n              >\n                <button\n                  tabIndex={tabIndex}\n                  type='button'\n                  disabled={disabled}\n                  aria-readonly={readOnly || undefined}\n                  className={cx(\n                    styles.dropdownInputButton,\n                    {\n                      [styles.dropdownInputButtonDisabled]: disabled,\n                      [styles.dropdownInputButtonReadOnly]: readOnly && !disabled,\n                    },\n                    classNames?.control,\n                  )}\n                  style={{ ...(isDropdownListWider ? { padding: '6px', border: 'none' } : {}), ...slotStyles?.control }}\n                  {...getToggleButtonProps()}\n                  onClick={(e: React.MouseEvent<HTMLButtonElement>) => {\n                    getToggleButtonProps().onClick?.(e);\n                    onClick?.(e);\n                  }}\n                  ref={reactRef}\n                >\n                  {/* Non-breaking space when blank (same text-node layout as a\n                    real value) so the button keeps a full line of height. */}\n                  {isDisplayBlank ? '\\u00A0' : displayValue}\n                </button>\n                <button\n                  type='button'\n                  tabIndex={-1}\n                  disabled={disabled}\n                  className={cx(styles.dropdownInputButtonIcon, classNames?.icon)}\n                  style={slotStyles?.icon}\n                  {...getToggleButtonProps()}\n                  // Keeping the focus where it is, rather than letting mousedown move\n                  // it here: both buttons carry the same downshift toggle props, and\n                  // the blur of the other one cancels the toggle this click performs,\n                  // so the chevron did nothing while the dropdown had focus.\n                  onMouseDown={(e: React.MouseEvent<HTMLButtonElement>) => e.preventDefault()}\n                  onClick={(e: React.MouseEvent<HTMLButtonElement>) => {\n                    getToggleButtonProps().onClick?.(e);\n                    onClick?.(e);\n                  }}\n                >\n                  {!disabled && !readOnly && (\n                    <FontAwesomeIcon\n                      icon={dropdownIcon}\n                      className={cx(styles.dropdownInputButtonIconArrow, {\n                        [styles.dropdownInputButtonIconArrowOpen]: isOpen,\n                      })}\n                    />\n                  )}\n                </button>\n                <fieldset\n                  className={cx(styles.dropdownFieldset, {\n                    [styles.dropdownBorderPlain]: plainStyle,\n                    [styles.dropdownBorderFocused]: showFocus,\n                    [styles.dropdownBorderInvalid]: hasErr,\n                    [styles.dropdownBorderError]: hasErr,\n                  })}\n                >\n                  <legend\n                    className={cx(styles.dropdownFieldsetLegend, {\n                      [styles.dropdownFieldsetLegendActive]:\n                        useMatLabelStyle && (alwaysFloatLabel || showFocus || !isDisplayBlank),\n                    })}\n                  >\n                    <span>{editedLabel}</span>\n                  </legend>\n                </fieldset>\n                {useMatLabelStyle && label && (\n                  <div\n                    className={cx(\n                      styles.dropdownMatLabel,\n                      {\n                        [styles.dropdownMatLabelFloating]: alwaysFloatLabel || showFocus || !isDisplayBlank,\n                      },\n                      // The floating and the stacked label are two renderings of\n                      // the same thing, so one slot reaches whichever is in use.\n                      classNames?.label,\n                    )}\n                    style={slotStyles?.label}\n                  >\n                    {label}\n                    {requiredMark}\n                  </div>\n                )}\n                {useMatLabelStyle && placeholder && (\n                  <div\n                    className={cx(\n                      styles.dropdownPlaceholder,\n                      showFocus && !dropdownLabel && styles.dropdownPlaceholderShown,\n                    )}\n                  >\n                    {placeholder}\n                  </div>\n                )}\n              </div>\n            </Popover>\n          </div>\n        )}\n      </Downshift>\n      {label && !useMatLabelStyle && (\n        <div className={cx(styles.dropdownLabelText, classNames?.label)} style={slotStyles?.label}>\n          {label}\n          {requiredMark}\n        </div>\n      )}\n      <Tooltip\n        variant='error'\n        message={formValidator ? formValidator.getCurrentErrorMessage() : errorMessage || ''}\n        isVisible={hasErr && (isFocused || isHovered)}\n      />\n    </div>\n  );\n}\n\nexport default Dropdown;\n"],"mappings":"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"}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

package/dist/esm/common/inputDropdown/inputDropdown.mjs

@@ -1,2 +1,2 @@
-import{useComponentDefaults as e}from"../configProvider/useComponentDefaults.mjs";import t from"../bodyEnd/bodyEnd.mjs";import{useFloatingPosition as n}from"../floatingMenu/useFloatingPosition.mjs";import r from"../input/input.mjs";import i from"./inputDropdown.module.mjs";import{useCallback as a,useEffect as o,useLayoutEffect as s,useMemo as c,useRef as l,useState as u}from"react";import d from"classnames";import{jsx as f,jsxs as p}from"react/jsx-runtime";function m(e,t){return t?t.value??``:e??``}function h(e,t){let n=t.find(t=>t.value===e);return n?n.label??n.value:e}function g(g){let{label:_=``,value:v=``,formValidator:y=null,error:b,isRequired:x=!1,items:S=[],allowCustomValue:C=!1,maxItems:w=100,className:T,style:E,classNames:D,styles:O,onSelect:k=()=>null,onChange:A,placeholder:j=``,readOnly:M=!1,...N}=e(`InputDropdown`,g),P=m(v,y),[,F]=u(0),I=l(y);o(()=>{if(I.current=y,!y)return;let e=()=>F(e=>e+1);return y.registerOnUpdateListener(e),()=>{y.removeOnUpdateListener(e)}},[y]);let L=x||!!y?.validators.find(e=>e.validatorId===`required`),[R,z]=u(()=>h(P,S)),[B,V]=u(P),[H,U]=u(!1),[W,G]=u(null),K=l(null),q=l(null),J=l(null),Y=O?.dropdown?.fontSize;if(s(()=>{let e=q.current,t=J.current;H&&e&&t&&Y==null&&(t.style.fontSize=window.getComputedStyle(e).fontSize)},[H,Y]),n({isOpen:H,triggerRef:q,anchorRef:J,panelRef:J,flipClassName:i.dropdownFlip}),P!==B){V(P);let e=S.find(e=>e.value===P);e?z(e.label??e.value):C&&z(P)}let X=c(()=>{let e=R.toLowerCase(),t=[];for(let n of S)if((n.label??n.value).toLowerCase().includes(e)&&(t.push(n),w>0&&t.length>=w))break;return t},[S,R,w]),Z=()=>{M||(K.current&&=(clearTimeout(K.current),null),U(!0))},Q=()=>{I.current&&(I.current.touched=!0),K.current=setTimeout(()=>{U(!1),K.current=null,C||z(h(P,S))},100)},$=a(e=>{z(e.label??e.value),U(!1),G(null),y&&y.set(e.value),A&&A(e.value),k(e.value)},[y,A,k]),ee=a(e=>{M||(e.key===`ArrowUp`?(e.preventDefault(),G(e=>e?e-1:null)):e.key===`ArrowDown`?(e.preventDefault(),G(e=>e===null?0:Math.min(e+1,X.length-1))):e.key===`Enter`&&(W!==null&&X[W]?$(X[W]):C&&(U(!1),G(null))))},[X,W,$,C,M]);return p(`div`,{...N,ref:q,className:d(i.inputDropdown,D?.root,T),style:{...O?.root,...E},onFocus:Z,onBlur:Q,onKeyDown:ee,children:[f(r,{autoComplete:`off`,label:_,value:R,readOnly:M,formValidator:null,isRequired:L,isValid:y?!y.touched||!y.hasError():!b,errorMessage:y?y.touched?y.getCurrentErrorMessage()??``:``:b??``,onChange:e=>{if(z(e),G(null),U(!0),C)y&&y.set(e),A&&A(e);else if(e===``)y&&y.set(``),A&&A(``),k(``);else{let t=S.find(t=>(t.label??t.value).toLowerCase()===e.toLowerCase());t&&(y&&y.set(t.value),A&&A(t.value),k(t.value))}},placeholder:j}),H&&!M&&f(t,{children:f(`div`,{ref:J,className:d(i.dropdown,i.dropdownShown,D?.dropdown),style:O?.dropdown,children:f(`div`,{className:i.dropdownScroll,children:X.map((e,t)=>f(`div`,{className:d(i.dropdownItem,W===t&&i.dropdownItemHighlighted,D?.item),style:O?.item,onMouseDown:e=>e.preventDefault(),onClick:()=>$(e),children:e.label??e.value},`${t}_${e.label}_${e.value}`))})})})]})}export{g as default};
+import{useComponentDefaults as e}from"../configProvider/useComponentDefaults.mjs";import{PopoverAlign as t,PopoverPlacement as n}from"../popover/popover.types.mjs";import r from"../popover/popover.mjs";import i from"../input/input.mjs";import a from"./inputDropdown.module.mjs";import{useCallback as o,useEffect as s,useLayoutEffect as c,useMemo as l,useRef as u,useState as d}from"react";import f from"classnames";import{jsx as p}from"react/jsx-runtime";function m(e,t){return t?t.value??``:e??``}function h(e,t){let n=t.find(t=>t.value===e);return n?n.label??n.value:e}function g(g){let{label:_=``,value:v=``,formValidator:y=null,error:b,isRequired:x=!1,items:S=[],allowCustomValue:C=!1,maxItems:w=100,className:T,style:E,classNames:D,styles:O,onSelect:k=()=>null,onChange:A,placeholder:j=``,readOnly:M=!1,...N}=e(`InputDropdown`,g),P=m(v,y),[,F]=d(0),I=u(y);s(()=>{if(I.current=y,!y)return;let e=()=>F(e=>e+1);return y.registerOnUpdateListener(e),()=>{y.removeOnUpdateListener(e)}},[y]);let L=x||!!y?.validators.find(e=>e.validatorId===`required`),[R,z]=d(()=>h(P,S)),[B,V]=d(P),[H,U]=d(!1),[W,G]=d(null),K=u(null),q=u(null),J=u(null),Y=O?.dropdown?.fontSize;if(c(()=>{let e=q.current,t=J.current;H&&e&&t&&Y==null&&(t.style.fontSize=window.getComputedStyle(e).fontSize)},[H,Y]),P!==B){V(P);let e=S.find(e=>e.value===P);e?z(e.label??e.value):C&&z(P)}let X=l(()=>{let e=R.toLowerCase(),t=[];for(let n of S)if((n.label??n.value).toLowerCase().includes(e)&&(t.push(n),w>0&&t.length>=w))break;return t},[S,R,w]),Z=()=>{M||(K.current&&=(clearTimeout(K.current),null),U(!0))},Q=()=>{I.current&&(I.current.touched=!0),K.current=setTimeout(()=>{U(!1),K.current=null,C||z(h(P,S))},100)},$=o(e=>{z(e.label??e.value),U(!1),G(null),y&&y.set(e.value),A&&A(e.value),k(e.value)},[y,A,k]),ee=o(e=>{M||(e.key===`ArrowUp`?(e.preventDefault(),G(e=>e?e-1:null)):e.key===`ArrowDown`?(e.preventDefault(),G(e=>e===null?0:Math.min(e+1,X.length-1))):e.key===`Enter`&&(W!==null&&X[W]?$(X[W]):C&&(U(!1),G(null))))},[X,W,$,C,M]),te=p(`div`,{ref:J,className:f(a.dropdown,D?.dropdown),style:O?.dropdown,children:p(`div`,{className:a.dropdownScroll,children:X.map((e,t)=>p(`div`,{className:f(a.dropdownItem,W===t&&a.dropdownItemHighlighted,D?.item),style:O?.item,onMouseDown:e=>e.preventDefault(),onClick:()=>$(e),children:e.label??e.value},`${t}_${e.label}_${e.value}`))})});return p(`div`,{...N,ref:q,className:f(a.inputDropdown,D?.root,T),style:{...O?.root,...E},onFocus:Z,onBlur:Q,onKeyDown:ee,children:p(r,{isOpen:H&&!M,onOpenChange:e=>{e||U(!1)},placement:n.Bottom,align:t.Start,offset:0,withArrow:!1,constrainWidth:!1,closeOnTriggerClick:!1,focusOnOpen:!1,classNames:{panel:a.inputDropdownPanel},content:te,children:p(i,{autoComplete:`off`,label:_,value:R,readOnly:M,formValidator:null,isRequired:L,isValid:y?!y.touched||!y.hasError():!b,errorMessage:y?y.touched?y.getCurrentErrorMessage()??``:``:b??``,onChange:e=>{if(z(e),G(null),U(!0),C)y&&y.set(e),A&&A(e);else if(e===``)y&&y.set(``),A&&A(``),k(``);else{let t=S.find(t=>(t.label??t.value).toLowerCase()===e.toLowerCase());t&&(y&&y.set(t.value),A&&A(t.value),k(t.value))}},placeholder:j})})})}export{g as default};
 //# sourceMappingURL=inputDropdown.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"inputDropdown.mjs","names":[],"sources":["../../../../package/common/inputDropdown/inputDropdown.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';\nimport cx from 'classnames';\nimport BodyEnd from 'components/common/bodyEnd';\nimport styles from './inputDropdown.module.pcss';\nimport Input from '../input';\nimport { useFloatingPosition } from '../floatingMenu/useFloatingPosition';\nimport { useComponentDefaults } from '../configProvider';\nimport type { InputDropdownItem, InputDropdownProps } from './inputDropdown.types';\n\nfunction getKeyFromProps(value: string | undefined, formValidator: InputDropdownProps['formValidator']): string {\n  return formValidator ? ((formValidator.value as string) ?? '') : (value ?? '');\n}\n\nfunction labelForKey(key: string, items: InputDropdownItem[]): string {\n  const match = items.find((item) => item.value === key);\n  return match ? (match.label ?? match.value) : key;\n}\n\nexport default function InputDropdown(props: InputDropdownProps) {\n  const {\n    label = '',\n    value = '',\n    formValidator = null,\n    error,\n    isRequired = false,\n    items = [],\n    allowCustomValue = false,\n    maxItems = 100,\n    className,\n    style,\n    classNames,\n    styles: slotStyles,\n    onSelect = () => null,\n    onChange,\n    placeholder = '',\n    readOnly = false,\n    ...rest\n  } = useComponentDefaults('InputDropdown', props);\n  const currentKey = getKeyFromProps(value, formValidator);\n  const [, forceUpdate] = useState(0);\n  const fvRef = useRef(formValidator);\n\n  useEffect(() => {\n    fvRef.current = formValidator;\n    if (!formValidator) return;\n    const listener = () => forceUpdate((n) => n + 1);\n    formValidator.registerOnUpdateListener(listener);\n    return () => {\n      formValidator.removeOnUpdateListener(listener);\n    };\n  }, [formValidator]);\n\n  const computedIsRequired =\n    isRequired || !!formValidator?.validators.find((v) => (v as { validatorId?: string }).validatorId === 'required');\n\n  const [inputText, setInputText] = useState(() => labelForKey(currentKey, items));\n  const [prevKey, setPrevKey] = useState(currentKey);\n  const [isMenuShown, setIsMenuShown] = useState(false);\n  const [highlightedIndex, setHighlightedIndex] = useState<number | null>(null);\n  const hideTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n  const triggerRef = useRef<HTMLDivElement>(null);\n  const anchorRef = useRef<HTMLDivElement>(null);\n\n  const menuFontSizeOverride = slotStyles?.dropdown?.fontSize;\n  useLayoutEffect(() => {\n    const trigger = triggerRef.current;\n    const menu = anchorRef.current;\n    if (!isMenuShown || !trigger || !menu || menuFontSizeOverride != null) return;\n    menu.style.fontSize = window.getComputedStyle(trigger).fontSize;\n  }, [isMenuShown, menuFontSizeOverride]);\n\n  useFloatingPosition({\n    isOpen: isMenuShown,\n    triggerRef,\n    anchorRef,\n    panelRef: anchorRef,\n    flipClassName: styles.dropdownFlip,\n  });\n\n  // Sync display text when the controlled key changes externally (e.g. parent reset).\n  if (currentKey !== prevKey) {\n    setPrevKey(currentKey);\n    const match = items.find((item) => item.value === currentKey);\n    if (match) setInputText(match.label ?? match.value);\n    else if (allowCustomValue) setInputText(currentKey);\n  }\n\n  const currItems = useMemo(() => {\n    const needle = inputText.toLowerCase();\n    const matches: InputDropdownItem[] = [];\n    for (const item of items) {\n      if (!(item.label ?? item.value).toLowerCase().includes(needle)) continue;\n      matches.push(item);\n      if (maxItems > 0 && matches.length >= maxItems) break;\n    }\n    return matches;\n  }, [items, inputText, maxItems]);\n\n  const handleFocus = () => {\n    if (readOnly) return;\n    if (hideTimeoutRef.current) {\n      clearTimeout(hideTimeoutRef.current);\n      hideTimeoutRef.current = null;\n    }\n    setIsMenuShown(true);\n  };\n\n  const handleBlur = () => {\n    if (fvRef.current) fvRef.current.touched = true;\n    hideTimeoutRef.current = setTimeout(() => {\n      setIsMenuShown(false);\n      hideTimeoutRef.current = null;\n      // Without custom values, uncommitted typed text is invalid — snap the\n      // display back to the currently selected item's label.\n      if (!allowCustomValue) setInputText(labelForKey(currentKey, items));\n    }, 100);\n  };\n\n  const handleSelect = useCallback(\n    (item: InputDropdownItem) => {\n      setInputText(item.label ?? item.value);\n      setIsMenuShown(false);\n      setHighlightedIndex(null);\n      if (formValidator) formValidator.set(item.value);\n      if (onChange) onChange(item.value);\n      onSelect(item.value);\n    },\n    [formValidator, onChange, onSelect],\n  );\n\n  const onKeyDown = useCallback(\n    (event: React.KeyboardEvent) => {\n      if (readOnly) return;\n      if (event.key === 'ArrowUp') {\n        event.preventDefault();\n        setHighlightedIndex((idx) => (!idx ? null : idx - 1));\n      } else if (event.key === 'ArrowDown') {\n        event.preventDefault();\n        setHighlightedIndex((idx) => (idx === null ? 0 : Math.min(idx + 1, currItems.length - 1)));\n      } else if (event.key === 'Enter') {\n        if (highlightedIndex !== null && currItems[highlightedIndex]) {\n          handleSelect(currItems[highlightedIndex]);\n        } else if (allowCustomValue) {\n          setIsMenuShown(false);\n          setHighlightedIndex(null);\n        }\n      }\n    },\n    [currItems, highlightedIndex, handleSelect, allowCustomValue, readOnly],\n  );\n\n  return (\n    <div\n      {...rest}\n      ref={triggerRef}\n      className={cx(styles.inputDropdown, classNames?.root, className)}\n      style={{ ...slotStyles?.root, ...style }}\n      onFocus={handleFocus}\n      onBlur={handleBlur}\n      onKeyDown={onKeyDown}\n    >\n      <Input\n        // A combobox renders its own suggestion list; the browser's autofill dropdown\n        // opens on top of it, so two lists compete for the same space.\n        autoComplete='off'\n        label={label}\n        value={inputText}\n        readOnly={readOnly}\n        formValidator={null}\n        isRequired={computedIsRequired}\n        isValid={formValidator ? (formValidator.touched ? !formValidator.hasError() : true) : !error}\n        errorMessage={\n          formValidator ? (formValidator.touched ? (formValidator.getCurrentErrorMessage() ?? '') : '') : (error ?? '')\n        }\n        onChange={(text) => {\n          setInputText(text);\n          setHighlightedIndex(null);\n          setIsMenuShown(true);\n          if (allowCustomValue) {\n            if (formValidator) formValidator.set(text);\n            if (onChange) onChange(text);\n          } else if (text === '') {\n            if (formValidator) formValidator.set('');\n            if (onChange) onChange('');\n            onSelect('');\n          } else {\n            // Emit when the typed text exactly matches an item's label/value.\n            const match = items.find((item) => (item.label ?? item.value).toLowerCase() === text.toLowerCase());\n            if (match) {\n              if (formValidator) formValidator.set(match.value);\n              if (onChange) onChange(match.value);\n              onSelect(match.value);\n            }\n          }\n        }}\n        placeholder={placeholder}\n      />\n      {isMenuShown && !readOnly && (\n        <BodyEnd>\n          <div\n            ref={anchorRef}\n            className={cx(styles.dropdown, styles.dropdownShown, classNames?.dropdown)}\n            style={slotStyles?.dropdown}\n          >\n            <div className={styles.dropdownScroll}>\n              {currItems.map((item, key) => (\n                <div\n                  key={`${key}_${item.label}_${item.value}`}\n                  className={cx(\n                    styles.dropdownItem,\n                    highlightedIndex === key && styles.dropdownItemHighlighted,\n                    classNames?.item,\n                  )}\n                  style={slotStyles?.item}\n                  // Prevent the input from blurring before the click resolves.\n                  onMouseDown={(e) => e.preventDefault()}\n                  onClick={() => handleSelect(item)}\n                >\n                  {item.label ?? item.value}\n                </div>\n              ))}\n            </div>\n          </div>\n        </BodyEnd>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"inputDropdown.mjs","names":[],"sources":["../../../../package/common/inputDropdown/inputDropdown.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';\nimport cx from 'classnames';\nimport styles from './inputDropdown.module.pcss';\nimport Input from '../input';\nimport Popover from '../popover';\nimport { PopoverAlign, PopoverPlacement } from '../popover/popover.types';\nimport { useComponentDefaults } from '../configProvider';\nimport type { InputDropdownItem, InputDropdownProps } from './inputDropdown.types';\n\nfunction getKeyFromProps(value: string | undefined, formValidator: InputDropdownProps['formValidator']): string {\n  return formValidator ? ((formValidator.value as string) ?? '') : (value ?? '');\n}\n\nfunction labelForKey(key: string, items: InputDropdownItem[]): string {\n  const match = items.find((item) => item.value === key);\n  return match ? (match.label ?? match.value) : key;\n}\n\nexport default function InputDropdown(props: InputDropdownProps) {\n  const {\n    label = '',\n    value = '',\n    formValidator = null,\n    error,\n    isRequired = false,\n    items = [],\n    allowCustomValue = false,\n    maxItems = 100,\n    className,\n    style,\n    classNames,\n    styles: slotStyles,\n    onSelect = () => null,\n    onChange,\n    placeholder = '',\n    readOnly = false,\n    ...rest\n  } = useComponentDefaults('InputDropdown', props);\n  const currentKey = getKeyFromProps(value, formValidator);\n  const [, forceUpdate] = useState(0);\n  const fvRef = useRef(formValidator);\n\n  useEffect(() => {\n    fvRef.current = formValidator;\n    if (!formValidator) return;\n    const listener = () => forceUpdate((n) => n + 1);\n    formValidator.registerOnUpdateListener(listener);\n    return () => {\n      formValidator.removeOnUpdateListener(listener);\n    };\n  }, [formValidator]);\n\n  const computedIsRequired =\n    isRequired || !!formValidator?.validators.find((v) => (v as { validatorId?: string }).validatorId === 'required');\n\n  const [inputText, setInputText] = useState(() => labelForKey(currentKey, items));\n  const [prevKey, setPrevKey] = useState(currentKey);\n  const [isMenuShown, setIsMenuShown] = useState(false);\n  const [highlightedIndex, setHighlightedIndex] = useState<number | null>(null);\n  const hideTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n  const triggerRef = useRef<HTMLDivElement>(null);\n  const anchorRef = useRef<HTMLDivElement>(null);\n\n  const menuFontSizeOverride = slotStyles?.dropdown?.fontSize;\n  useLayoutEffect(() => {\n    const trigger = triggerRef.current;\n    const menu = anchorRef.current;\n    if (!isMenuShown || !trigger || !menu || menuFontSizeOverride != null) return;\n    menu.style.fontSize = window.getComputedStyle(trigger).fontSize;\n  }, [isMenuShown, menuFontSizeOverride]);\n\n  // Sync display text when the controlled key changes externally (e.g. parent reset).\n  if (currentKey !== prevKey) {\n    setPrevKey(currentKey);\n    const match = items.find((item) => item.value === currentKey);\n    if (match) setInputText(match.label ?? match.value);\n    else if (allowCustomValue) setInputText(currentKey);\n  }\n\n  const currItems = useMemo(() => {\n    const needle = inputText.toLowerCase();\n    const matches: InputDropdownItem[] = [];\n    for (const item of items) {\n      if (!(item.label ?? item.value).toLowerCase().includes(needle)) continue;\n      matches.push(item);\n      if (maxItems > 0 && matches.length >= maxItems) break;\n    }\n    return matches;\n  }, [items, inputText, maxItems]);\n\n  const handleFocus = () => {\n    if (readOnly) return;\n    if (hideTimeoutRef.current) {\n      clearTimeout(hideTimeoutRef.current);\n      hideTimeoutRef.current = null;\n    }\n    setIsMenuShown(true);\n  };\n\n  const handleBlur = () => {\n    if (fvRef.current) fvRef.current.touched = true;\n    hideTimeoutRef.current = setTimeout(() => {\n      setIsMenuShown(false);\n      hideTimeoutRef.current = null;\n      // Without custom values, uncommitted typed text is invalid — snap the\n      // display back to the currently selected item's label.\n      if (!allowCustomValue) setInputText(labelForKey(currentKey, items));\n    }, 100);\n  };\n\n  const handleSelect = useCallback(\n    (item: InputDropdownItem) => {\n      setInputText(item.label ?? item.value);\n      setIsMenuShown(false);\n      setHighlightedIndex(null);\n      if (formValidator) formValidator.set(item.value);\n      if (onChange) onChange(item.value);\n      onSelect(item.value);\n    },\n    [formValidator, onChange, onSelect],\n  );\n\n  const onKeyDown = useCallback(\n    (event: React.KeyboardEvent) => {\n      if (readOnly) return;\n      if (event.key === 'ArrowUp') {\n        event.preventDefault();\n        setHighlightedIndex((idx) => (!idx ? null : idx - 1));\n      } else if (event.key === 'ArrowDown') {\n        event.preventDefault();\n        setHighlightedIndex((idx) => (idx === null ? 0 : Math.min(idx + 1, currItems.length - 1)));\n      } else if (event.key === 'Enter') {\n        if (highlightedIndex !== null && currItems[highlightedIndex]) {\n          handleSelect(currItems[highlightedIndex]);\n        } else if (allowCustomValue) {\n          setIsMenuShown(false);\n          setHighlightedIndex(null);\n        }\n      }\n    },\n    [currItems, highlightedIndex, handleSelect, allowCustomValue, readOnly],\n  );\n\n  const menu = (\n    <div ref={anchorRef} className={cx(styles.dropdown, classNames?.dropdown)} style={slotStyles?.dropdown}>\n      <div className={styles.dropdownScroll}>\n        {currItems.map((item, key) => (\n          <div\n            key={`${key}_${item.label}_${item.value}`}\n            className={cx(\n              styles.dropdownItem,\n              highlightedIndex === key && styles.dropdownItemHighlighted,\n              classNames?.item,\n            )}\n            style={slotStyles?.item}\n            // Prevent the input from blurring before the click resolves.\n            onMouseDown={(e) => e.preventDefault()}\n            onClick={() => handleSelect(item)}\n          >\n            {item.label ?? item.value}\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n\n  return (\n    <div\n      {...rest}\n      ref={triggerRef}\n      className={cx(styles.inputDropdown, classNames?.root, className)}\n      style={{ ...slotStyles?.root, ...style }}\n      onFocus={handleFocus}\n      onBlur={handleBlur}\n      onKeyDown={onKeyDown}\n    >\n      <Popover\n        // The field owns the open state: it opens on typing and closes on blur, on\n        // a pick, or on Escape. Only a close is taken from Popover, which is the\n        // outside click its portaled panel would otherwise not see.\n        isOpen={isMenuShown && !readOnly}\n        onOpenChange={(next) => {\n          if (!next) setIsMenuShown(false);\n        }}\n        placement={PopoverPlacement.Bottom}\n        align={PopoverAlign.Start}\n        offset={0}\n        withArrow={false}\n        constrainWidth={false}\n        closeOnTriggerClick={false}\n        focusOnOpen={false}\n        classNames={{ panel: styles.inputDropdownPanel }}\n        content={menu}\n      >\n        <Input\n          // A combobox renders its own suggestion list; the browser's autofill dropdown\n          // opens on top of it, so two lists compete for the same space.\n          autoComplete='off'\n          label={label}\n          value={inputText}\n          readOnly={readOnly}\n          formValidator={null}\n          isRequired={computedIsRequired}\n          isValid={formValidator ? (formValidator.touched ? !formValidator.hasError() : true) : !error}\n          errorMessage={\n            formValidator\n              ? formValidator.touched\n                ? (formValidator.getCurrentErrorMessage() ?? '')\n                : ''\n              : (error ?? '')\n          }\n          onChange={(text) => {\n            setInputText(text);\n            setHighlightedIndex(null);\n            setIsMenuShown(true);\n            if (allowCustomValue) {\n              if (formValidator) formValidator.set(text);\n              if (onChange) onChange(text);\n            } else if (text === '') {\n              if (formValidator) formValidator.set('');\n              if (onChange) onChange('');\n              onSelect('');\n            } else {\n              // Emit when the typed text exactly matches an item's label/value.\n              const match = items.find((item) => (item.label ?? item.value).toLowerCase() === text.toLowerCase());\n              if (match) {\n                if (formValidator) formValidator.set(match.value);\n                if (onChange) onChange(match.value);\n                onSelect(match.value);\n              }\n            }\n          }}\n          placeholder={placeholder}\n        />\n      </Popover>\n    </div>\n  );\n}\n"],"mappings":"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"}

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

@@ -1,2 +1,2 @@
-var e=`inputDropdown_UdYMa`,t=`dropdown_-M5-x`,n=`dropdown-scroll_XMZs-`,r=`dropdown-shown_H2rFU`,i=`dropdown-flip_djJhT`,a=`dropdown-item_JRgbt`,o=`dropdown-item-highlighted_1ZENP`,s=`dropdown-category_OMT0E`,c={inputDropdown:e,dropdown:t,"dropdown-scroll":`dropdown-scroll_XMZs-`,dropdownScroll:n,"dropdown-shown":`dropdown-shown_H2rFU`,dropdownShown:r,"dropdown-flip":`dropdown-flip_djJhT`,dropdownFlip:i,"dropdown-item":`dropdown-item_JRgbt`,dropdownItem:a,"dropdown-item-highlighted":`dropdown-item-highlighted_1ZENP`,dropdownItemHighlighted:o,"dropdown-category":`dropdown-category_OMT0E`,dropdownCategory:s};export{c as default,t as dropdown,s as dropdownCategory,i as dropdownFlip,a as dropdownItem,o as dropdownItemHighlighted,n as dropdownScroll,r as dropdownShown,e as inputDropdown};
+var e=`inputDropdown_UdYMa`,t=`inputDropdownPanel_TAURL`,n=`dropdown_-M5-x`,r=`dropdown-scroll_XMZs-`,i=`dropdown-item_JRgbt`,a=`dropdown-item-highlighted_1ZENP`,o={inputDropdown:e,inputDropdownPanel:t,dropdown:n,"dropdown-scroll":`dropdown-scroll_XMZs-`,dropdownScroll:r,"dropdown-item":`dropdown-item_JRgbt`,dropdownItem:i,"dropdown-item-highlighted":`dropdown-item-highlighted_1ZENP`,dropdownItemHighlighted:a};export{o as default,n as dropdown,i as dropdownItem,a as dropdownItemHighlighted,r as dropdownScroll,e as inputDropdown,t as inputDropdownPanel};
 //# sourceMappingURL=inputDropdown.module.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"inputDropdown.module.mjs","names":[],"sources":["../../../../package/common/inputDropdown/inputDropdown.module.pcss"],"sourcesContent":[".inputDropdown {\n  position: relative;\n}\n\n.dropdown {\n  position: fixed;\n  width: fit-content;\n  max-width: 15em;\n  color: var(--text-color);\n  border-radius: var(--default-border-radius);\n  background: var(--background-modal);\n  box-shadow: var(--card-shadow);\n  box-sizing: border-box;\n  overflow: hidden;\n  transition:\n    opacity 0.1s,\n    transform 0.1s;\n  transform-origin: top left;\n  opacity: 0;\n  transform: scale(0.95);\n  z-index: 1;\n\n  &-scroll {\n    overflow: auto;\n    max-height: 12.5em;\n  }\n\n  &-shown {\n    transform: scale(1);\n    opacity: 1;\n  }\n\n  &-flip {\n    transform-origin: bottom left;\n  }\n\n  &-item {\n    padding: 0.5em;\n    z-index: 0;\n    outline: none;\n    cursor: pointer;\n    -webkit-tap-highlight-color: transparent;\n\n    &:hover,\n    &:focus {\n      background: var(--background-accent);\n    }\n\n    &-highlighted {\n      background: var(--background-accent);\n    }\n  }\n\n  &-category {\n    padding: 1em 0.5em 0.25em;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"inputDropdown.module.mjs","names":[],"sources":["../../../../package/common/inputDropdown/inputDropdown.module.pcss"],"sourcesContent":[".inputDropdown {\n  position: relative;\n}\n\n/* The list brings its own padding and its rows reach the panel edge. */\n.inputDropdownPanel {\n  padding: 0;\n}\n\n/* Chrome, placement and the portal come from the Popover this renders inside; the\n   width is this component's own, since the list sizes to the longest suggestion\n   rather than to the field. */\n.dropdown {\n  width: fit-content;\n  max-width: 15em;\n  box-sizing: border-box;\n  overflow: hidden;\n  border-radius: inherit;\n\n  &-scroll {\n    overflow: auto;\n    max-height: 12.5em;\n  }\n\n  &-item {\n    padding: 0.5em;\n    z-index: 0;\n    outline: none;\n    cursor: pointer;\n    -webkit-tap-highlight-color: transparent;\n\n    &:hover,\n    &:focus {\n      background: var(--background-accent);\n    }\n\n    &-highlighted {\n      background: var(--background-accent);\n    }\n  }\n}\n"],"mappings":""}

package/dist/esm/common/interactableDiv/interactableDiv.mjs

@@ -1,2 +1,2 @@
-import e from"./interactableDiv.module.mjs";import{isSelfActivation as t}from"../utils/activationKey.mjs";import n,{useCallback as r}from"react";import i from"classnames";import{jsx as a}from"react/jsx-runtime";var o=n.forwardRef(({className:n,children:o,onClick:s,onKeyDown:c,tabIndex:l,...u},d)=>{let f=r(e=>{t(e)&&(e.key===` `&&e.preventDefault(),s?.(e)),c?.(e)},[s,c]);return a(`div`,{className:i(e.interactableDiv,n),onClick:s,tabIndex:l===void 0?s?0:void 0:l??void 0,role:s?`button`:void 0,onKeyDown:f,ref:d,...u,children:o})});o.displayName=`InteractableDiv`;export{o as default};
+import e from"./interactableDiv.module.mjs";import{isSelfActivation as t}from"../utils/activationKey.mjs";import n,{useCallback as r}from"react";import i from"classnames";import{jsx as a}from"react/jsx-runtime";var o=n.forwardRef(({className:n,children:o,onClick:s,onKeyDown:c,tabIndex:l,...u},d)=>{let f=r(e=>{t(e)&&(e.key===` `&&e.preventDefault(),e.currentTarget.click()),c?.(e)},[c]);return a(`div`,{className:i(e.interactableDiv,n),onClick:s,tabIndex:l===void 0?s?0:void 0:l??void 0,role:s?`button`:void 0,onKeyDown:f,ref:d,...u,children:o})});o.displayName=`InteractableDiv`;export{o as default};
 //# sourceMappingURL=interactableDiv.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"interactableDiv.mjs","names":[],"sources":["../../../../package/common/interactableDiv/interactableDiv.tsx"],"sourcesContent":["import cx from 'classnames';\nimport React, { useCallback, type KeyboardEvent, type MouseEvent, type ReactElement } from 'react';\n\nimport styles from './interactableDiv.module.pcss';\nimport type { DataProps } from '../types/baseProps.types';\nimport { isSelfActivation } from '../utils/activationKey';\n\ninterface Properties extends DataProps, Omit<React.HTMLAttributes<HTMLDivElement>, 'tabIndex'> {\n  tabIndex?: number | null;\n}\n\nconst InteractableDiv = React.forwardRef<HTMLDivElement, Properties>(\n  ({ className, children, onClick, onKeyDown, tabIndex, ...props }, ref): ReactElement => {\n    const onKeyDownHandler = useCallback(\n      (e: KeyboardEvent<HTMLDivElement>) => {\n        if (isSelfActivation(e)) {\n          if (e.key === ' ') e.preventDefault();\n          onClick?.(e as unknown as MouseEvent<HTMLDivElement>);\n        }\n        onKeyDown?.(e);\n      },\n      [onClick, onKeyDown],\n    );\n\n    // Compared to undefined rather than using ??, so an explicit null still means \"no tabindex\"\n    // instead of falling through to the default.\n    return (\n      <div\n        className={cx(styles.interactableDiv, className)}\n        onClick={onClick}\n        tabIndex={tabIndex === undefined ? (onClick ? 0 : undefined) : (tabIndex ?? undefined)}\n        role={onClick ? 'button' : undefined}\n        onKeyDown={onKeyDownHandler}\n        ref={ref}\n        {...props}\n      >\n        {children}\n      </div>\n    );\n  },\n);\n\nInteractableDiv.displayName = 'InteractableDiv';\n\nexport default InteractableDiv;\n"],"mappings":"mNAWA,IAAM,EAAkB,EAAM,YAC3B,CAAE,YAAW,WAAU,UAAS,YAAW,WAAU,GAAG,GAAS,IAAsB,CACtF,IAAM,EAAmB,EACtB,GAAqC,CAChC,EAAiB,CAAC,IAChB,EAAE,MAAQ,KAAK,EAAE,eAAe,EACpC,IAAU,CAA0C,GAEtD,IAAY,CAAC,CACf,EACA,CAAC,EAAS,CAAS,CACrB,EAIA,OACE,EAAC,MAAD,CACE,UAAW,EAAG,EAAO,gBAAiB,CAAS,EACtC,UACT,SAAU,IAAa,IAAA,GAAa,EAAU,EAAI,IAAA,GAAc,GAAY,IAAA,GAC5E,KAAM,EAAU,SAAW,IAAA,GAC3B,UAAW,EACN,MACL,GAAI,EAEH,UACE,CAAA,CAET,CACF,EAEA,EAAgB,YAAc"}
+{"version":3,"file":"interactableDiv.mjs","names":[],"sources":["../../../../package/common/interactableDiv/interactableDiv.tsx"],"sourcesContent":["import cx from 'classnames';\nimport React, { useCallback, type KeyboardEvent, type ReactElement } from 'react';\n\nimport styles from './interactableDiv.module.pcss';\nimport type { DataProps } from '../types/baseProps.types';\nimport { isSelfActivation } from '../utils/activationKey';\n\ninterface Properties extends DataProps, Omit<React.HTMLAttributes<HTMLDivElement>, 'tabIndex'> {\n  tabIndex?: number | null;\n}\n\nconst InteractableDiv = React.forwardRef<HTMLDivElement, Properties>(\n  ({ className, children, onClick, onKeyDown, tabIndex, ...props }, ref): ReactElement => {\n    const onKeyDownHandler = useCallback(\n      (e: KeyboardEvent<HTMLDivElement>) => {\n        if (isSelfActivation(e)) {\n          if (e.key === ' ') e.preventDefault();\n          // A real click, the way a native button answers Enter and Space, rather\n          // than calling `onClick` directly: it arrives as a MouseEvent instead of\n          // a keyboard event wearing one, and it bubbles, so a parent that owns the\n          // click sees it too. That parent is how a `Popover` or `Menu` opens from\n          // a trigger that is not a button.\n          e.currentTarget.click();\n        }\n        onKeyDown?.(e);\n      },\n      [onKeyDown],\n    );\n\n    // Compared to undefined rather than using ??, so an explicit null still means \"no tabindex\"\n    // instead of falling through to the default.\n    return (\n      <div\n        className={cx(styles.interactableDiv, className)}\n        onClick={onClick}\n        tabIndex={tabIndex === undefined ? (onClick ? 0 : undefined) : (tabIndex ?? undefined)}\n        role={onClick ? 'button' : undefined}\n        onKeyDown={onKeyDownHandler}\n        ref={ref}\n        {...props}\n      >\n        {children}\n      </div>\n    );\n  },\n);\n\nInteractableDiv.displayName = 'InteractableDiv';\n\nexport default InteractableDiv;\n"],"mappings":"mNAWA,IAAM,EAAkB,EAAM,YAC3B,CAAE,YAAW,WAAU,UAAS,YAAW,WAAU,GAAG,GAAS,IAAsB,CACtF,IAAM,EAAmB,EACtB,GAAqC,CAChC,EAAiB,CAAC,IAChB,EAAE,MAAQ,KAAK,EAAE,eAAe,EAMpC,EAAE,cAAc,MAAM,GAExB,IAAY,CAAC,CACf,EACA,CAAC,CAAS,CACZ,EAIA,OACE,EAAC,MAAD,CACE,UAAW,EAAG,EAAO,gBAAiB,CAAS,EACtC,UACT,SAAU,IAAa,IAAA,GAAa,EAAU,EAAI,IAAA,GAAc,GAAY,IAAA,GAC5E,KAAM,EAAU,SAAW,IAAA,GAC3B,UAAW,EACN,MACL,GAAI,EAEH,UACE,CAAA,CAET,CACF,EAEA,EAAgB,YAAc"}

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"menu.module.mjs","names":[],"sources":["../../../../package/common/menu/menu.module.pcss"],"sourcesContent":[".menuPanel {\n  padding: 0;\n}\n\n.menu {\n  display: flex;\n  flex-direction: column;\n  min-width: 180px;\n  padding: 4px 0;\n  box-sizing: border-box;\n  font-family: var(--default-font);\n  font-size: var(--default-font-size);\n  color: var(--text-color);\n\n  /* Chrome (background, shadow, radius, positioning) comes from the Popover panel\n     this renders inside — keep only the list itself here. */\n\n  &-trigger {\n    /* The trigger is only here to give Escape somewhere to return the focus to;\n       it must not become a box of its own in the consumer's layout. */\n    display: contents;\n  }\n\n  &-item {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    width: 100%;\n    padding: 8px 12px;\n    border: none;\n    background: none;\n    font: inherit;\n    color: inherit;\n    text-align: left;\n    white-space: nowrap;\n    cursor: pointer;\n    -webkit-tap-highlight-color: transparent;\n    box-sizing: border-box;\n    transition: background 0.1s;\n\n    /* `:focus`, not `:focus-visible`: the entry with the focus is the one the\n       arrow keys are on, and it has to look like it whether the menu was opened\n       by keyboard or by mouse. `:focus-visible` would stay dark after a click on\n       the trigger, because the browser does not count that as keyboard input.\n\n       Not `--background-accent-light`: the panel under this list is\n       `--background-modal`, and the default theme gives both the same colour, so\n       the highlight was invisible. Dropdown and MultiSelect pick this one too. */\n    &:hover:not(:disabled),\n    &:focus {\n      background: var(--background-accent);\n    }\n\n    /* The ring would sit on top of the neighbouring rows' backgrounds; the row\n       highlight above is what marks the active entry. */\n    &:focus {\n      outline: none;\n    }\n\n    &:disabled {\n      opacity: 0.45;\n      cursor: default;\n    }\n\n    &-danger {\n      color: var(--error-color);\n    }\n\n    &-icon {\n      flex: none;\n      width: 1em;\n      text-align: center;\n    }\n\n    &-label {\n      flex: 1;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n\n    &-shortcut {\n      flex: none;\n      margin-left: 16px;\n      font-size: 0.85em;\n      color: var(--text-light);\n    }\n  }\n\n  &-separator {\n    height: 1px;\n    margin: 4px 0;\n    background: var(--border-color);\n  }\n\n  &-heading {\n    padding: 6px 12px 2px;\n    font-size: 0.8em;\n    font-weight: 600;\n    text-transform: uppercase;\n    letter-spacing: 0.04em;\n    color: var(--text-light);\n  }\n}\n"],"mappings":""}

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

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

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

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