@ahrowe/ui 0.12.0 → 0.14.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (116) hide show
  1. package/dist/esm/common/alert/alert.mjs +2 -0
  2. package/dist/esm/common/alert/alert.mjs.map +1 -0
  3. package/dist/esm/common/alert/alert.module.mjs +2 -0
  4. package/dist/esm/common/alert/alert.module.mjs.map +1 -0
  5. package/dist/esm/common/alert/alert.types.mjs +2 -0
  6. package/dist/esm/common/alert/alert.types.mjs.map +1 -0
  7. package/dist/esm/common/animatedIcon/animatedIcon.mjs +2 -0
  8. package/dist/esm/common/animatedIcon/animatedIcon.mjs.map +1 -0
  9. package/dist/esm/common/animatedIcon/animatedIcon.module.mjs +2 -0
  10. package/dist/esm/common/animatedIcon/animatedIcon.module.mjs.map +1 -0
  11. package/dist/esm/common/breadcrumb/breadcrumb.mjs +2 -0
  12. package/dist/esm/common/breadcrumb/breadcrumb.mjs.map +1 -0
  13. package/dist/esm/common/breadcrumb/breadcrumb.module.mjs +2 -0
  14. package/dist/esm/common/breadcrumb/breadcrumb.module.mjs.map +1 -0
  15. package/dist/esm/common/buttonGroup/buttonGroup.mjs +2 -0
  16. package/dist/esm/common/buttonGroup/buttonGroup.mjs.map +1 -0
  17. package/dist/esm/common/buttonGroup/buttonGroup.module.mjs +2 -0
  18. package/dist/esm/common/buttonGroup/buttonGroup.module.mjs.map +1 -0
  19. package/dist/esm/common/buttonGroup/buttonGroup.types.mjs +2 -0
  20. package/dist/esm/common/buttonGroup/buttonGroup.types.mjs.map +1 -0
  21. package/dist/esm/common/carousel/carousel.mjs +2 -0
  22. package/dist/esm/common/carousel/carousel.mjs.map +1 -0
  23. package/dist/esm/common/carousel/carousel.module.mjs +2 -0
  24. package/dist/esm/common/carousel/carousel.module.mjs.map +1 -0
  25. package/dist/esm/common/divider/divider.mjs +1 -1
  26. package/dist/esm/common/divider/divider.mjs.map +1 -1
  27. package/dist/esm/common/divider/divider.module.mjs +1 -1
  28. package/dist/esm/common/divider/divider.module.mjs.map +1 -1
  29. package/dist/esm/common/divider/divider.types.mjs +1 -1
  30. package/dist/esm/common/divider/divider.types.mjs.map +1 -1
  31. package/dist/esm/common/dropdown/dropdown.module.mjs +1 -1
  32. package/dist/esm/common/dropdown/dropdown.module.mjs.map +1 -1
  33. package/dist/esm/common/fab/fab.mjs +1 -1
  34. package/dist/esm/common/fab/fab.mjs.map +1 -1
  35. package/dist/esm/common/floatingMenu/floatingMenu.mjs +1 -1
  36. package/dist/esm/common/floatingMenu/floatingMenu.mjs.map +1 -1
  37. package/dist/esm/common/floatingMenu/floatingMenu.module.mjs.map +1 -1
  38. package/dist/esm/common/hooks/useFocusBoundary.mjs +2 -0
  39. package/dist/esm/common/hooks/useFocusBoundary.mjs.map +1 -0
  40. package/dist/esm/common/input/input.mjs +1 -1
  41. package/dist/esm/common/input/input.mjs.map +1 -1
  42. package/dist/esm/common/input/input.module.mjs +1 -1
  43. package/dist/esm/common/input/input.module.mjs.map +1 -1
  44. package/dist/esm/common/input/input.types.mjs +1 -1
  45. package/dist/esm/common/input/input.types.mjs.map +1 -1
  46. package/dist/esm/common/klipyPicker/klipyPicker.mjs +1 -1
  47. package/dist/esm/common/klipyPicker/klipyPicker.mjs.map +1 -1
  48. package/dist/esm/common/numberInput/numberInput.mjs +1 -1
  49. package/dist/esm/common/numberInput/numberInput.mjs.map +1 -1
  50. package/dist/esm/common/popover/popover.mjs +1 -1
  51. package/dist/esm/common/popover/popover.mjs.map +1 -1
  52. package/dist/esm/common/rating/rating.mjs +2 -0
  53. package/dist/esm/common/rating/rating.mjs.map +1 -0
  54. package/dist/esm/common/rating/rating.module.mjs +2 -0
  55. package/dist/esm/common/rating/rating.module.mjs.map +1 -0
  56. package/dist/esm/common/splitButton/splitButton.mjs +2 -0
  57. package/dist/esm/common/splitButton/splitButton.mjs.map +1 -0
  58. package/dist/esm/common/splitButton/splitButton.module.mjs +2 -0
  59. package/dist/esm/common/splitButton/splitButton.module.mjs.map +1 -0
  60. package/dist/esm/common/virtualList/useRowDrag.mjs +1 -1
  61. package/dist/esm/common/virtualList/useRowDrag.mjs.map +1 -1
  62. package/dist/esm/common/virtualList/useVirtualWindow.mjs +1 -1
  63. package/dist/esm/common/virtualList/useVirtualWindow.mjs.map +1 -1
  64. package/dist/esm/common/virtualList/virtualList.mjs +1 -1
  65. package/dist/esm/common/virtualList/virtualList.mjs.map +1 -1
  66. package/dist/esm/common/virtualList/virtualRow.mjs +1 -1
  67. package/dist/esm/common/virtualList/virtualRow.mjs.map +1 -1
  68. package/dist/esm/index.mjs +1 -1
  69. package/dist/index.cjs +4 -4
  70. package/dist/index.cjs.map +1 -1
  71. package/dist/style.css +1 -1
  72. package/dist/types/package/common/alert/alert.d.ts +4 -0
  73. package/dist/types/package/common/alert/alert.types.d.ts +23 -0
  74. package/dist/types/package/common/alert/index.d.ts +2 -0
  75. package/dist/types/package/common/animatedIcon/animatedIcon.d.ts +3 -0
  76. package/dist/types/package/common/animatedIcon/animatedIcon.types.d.ts +25 -0
  77. package/dist/types/package/common/animatedIcon/index.d.ts +2 -0
  78. package/dist/types/package/common/breadcrumb/breadcrumb.d.ts +4 -0
  79. package/dist/types/package/common/breadcrumb/breadcrumb.types.d.ts +26 -0
  80. package/dist/types/package/common/breadcrumb/index.d.ts +2 -0
  81. package/dist/types/package/common/buttonGroup/buttonGroup.d.ts +4 -0
  82. package/dist/types/package/common/buttonGroup/buttonGroup.types.d.ts +12 -0
  83. package/dist/types/package/common/buttonGroup/index.d.ts +2 -0
  84. package/dist/types/package/common/carousel/carousel.d.ts +3 -0
  85. package/dist/types/package/common/carousel/carousel.types.d.ts +20 -0
  86. package/dist/types/package/common/carousel/index.d.ts +2 -0
  87. package/dist/types/package/common/configProvider/configProvider.types.d.ts +10 -0
  88. package/dist/types/package/common/divider/divider.types.d.ts +5 -0
  89. package/dist/types/package/common/hooks/useFocusBoundary.d.ts +20 -0
  90. package/dist/types/package/common/input/input.types.d.ts +5 -0
  91. package/dist/types/package/common/rating/index.d.ts +2 -0
  92. package/dist/types/package/common/rating/rating.d.ts +4 -0
  93. package/dist/types/package/common/rating/rating.types.d.ts +19 -0
  94. package/dist/types/package/common/splitButton/index.d.ts +2 -0
  95. package/dist/types/package/common/splitButton/splitButton.d.ts +3 -0
  96. package/dist/types/package/common/splitButton/splitButton.types.d.ts +28 -0
  97. package/dist/types/package/common/themeProvider/theme.types.d.ts +1 -0
  98. package/dist/types/package/common/virtualList/useRowDrag.d.ts +4 -0
  99. package/dist/types/package/common/virtualList/useVirtualWindow.d.ts +3 -1
  100. package/dist/types/package/common/virtualList/virtualList.types.d.ts +5 -1
  101. package/dist/types/package/common/virtualList/virtualRow.d.ts +8 -1
  102. package/dist/types/package/index.d.ts +12 -0
  103. package/docs/Alert.md +64 -0
  104. package/docs/Breadcrumb.md +106 -0
  105. package/docs/ButtonGroup.md +90 -0
  106. package/docs/CLAUDE.md +6 -0
  107. package/docs/Carousel.md +67 -0
  108. package/docs/Divider.md +15 -3
  109. package/docs/FloatingMenu.md +7 -3
  110. package/docs/Input.md +30 -6
  111. package/docs/NumberInput.md +2 -0
  112. package/docs/Rating.md +72 -0
  113. package/docs/SearchInput.md +6 -0
  114. package/docs/SplitButton.md +79 -0
  115. package/docs/VirtualList.md +86 -3
  116. package/package.json +1 -1
@@ -1 +1 @@
1
- {"version":3,"file":"input.mjs","names":[],"sources":["../../../../package/common/input/input.tsx"],"sourcesContent":["import React, { useState, useEffect, useRef, useCallback, useId } from 'react';\nimport cx from 'classnames';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport {\n faPhone,\n faPen,\n faEnvelope,\n faSearch,\n faXmark,\n faEye as passwordHiddenIcon,\n faEyeSlash as passwordShownIcon,\n} from '@fortawesome/free-solid-svg-icons';\nimport Tooltip from 'components/common/tooltip';\nimport { useComponentDefaults } from 'components/common/configProvider';\nimport styles from './input.module.pcss';\nimport type { InputProps } from './input.types';\nimport { InputType } from './input.types';\n\nfunction Input(props: InputProps) {\n const {\n name = '',\n id,\n label = '',\n errorMessage = '',\n isValid = true,\n className = '',\n style,\n value = '',\n icon = null,\n onChange = () => {},\n onFocus: onFocusProp = null,\n onBlur: onBlurProp = null,\n onMouseEnter: onMouseEnterProp = null,\n onMouseLeave: onMouseLeaveProp = null,\n isUppercase = false,\n isRequired = false,\n tabIndex = 0,\n type = undefined,\n isRow = false,\n onIconClick = null,\n parse = null,\n formValidator = null,\n autoFocus = false,\n suffix = null,\n upperRightLabel = null,\n labelInBorder = false,\n showCancel = false,\n onClearClicked,\n min = null,\n max = null,\n placeholder = '',\n useMatLabelStyle = true,\n alwaysFloatLabel = false,\n autoComplete = null,\n onClick = () => null,\n readOnly = false,\n customInput,\n alwaysShowCancel = false,\n multiline = false,\n rows,\n autoResize = false,\n classNames,\n styles: slotStyles,\n disabled = false,\n ...rest\n } = useComponentDefaults('Input', props);\n const [isFocused, setIsFocused] = useState(false);\n const [isHovered, setIsHovered] = useState(false);\n const [isPasswordShown, setIsPasswordShown] = useState(false);\n const [, forceUpdate] = useState(0);\n\n const inputRef = useRef<HTMLInputElement | HTMLTextAreaElement>(null);\n const fvRef = useRef(formValidator);\n\n const generatedId = useId();\n const inputId = id || name || generatedId;\n\n const resizeTextarea = useCallback(() => {\n const el = inputRef.current;\n if (!el || !autoResize) return;\n el.style.height = 'auto';\n el.style.height = `${el.scrollHeight}px`;\n }, [autoResize]);\n\n useEffect(() => {\n resizeTextarea();\n }, []);\n\n useEffect(() => {\n if (autoFocus && inputRef.current) {\n setTimeout(() => { inputRef.current?.focus(); }, 1);\n }\n }, [autoFocus]);\n\n useEffect(() => {\n fvRef.current = formValidator;\n const fv = fvRef.current;\n if (!fv) return;\n fv.label = label ?? '';\n fv.validate();\n const listener = () => forceUpdate(n => n + 1);\n fv.registerOnUpdateListener(listener);\n return () => { fv.removeOnUpdateListener(listener); };\n }, [formValidator, label]);\n\n const hasError = (): boolean => {\n return formValidator\n ? (formValidator.touched && formValidator.hasError())\n : (!isValid || !!errorMessage);\n };\n\n const computedIsRequired = (): boolean => {\n return !!(isRequired || (formValidator && formValidator.validators.find(\n (v) => (v as { validatorId?: string }).validatorId === 'required'\n )));\n };\n\n const onMouseEnterHandler = (event: React.MouseEvent) => {\n setIsHovered(true);\n if (onMouseEnterProp) onMouseEnterProp(event);\n };\n\n const onMouseLeaveHandler = (event: React.MouseEvent) => {\n setIsHovered(false);\n if (onMouseLeaveProp) onMouseLeaveProp(event);\n };\n\n const onFocusHandler = (event: React.FocusEvent) => {\n setIsFocused(true);\n if (onFocusProp) onFocusProp(event);\n };\n\n const onBlurHandler = (event: React.FocusEvent) => {\n if (fvRef.current) fvRef.current.touched = true;\n setIsFocused(false);\n if (onBlurProp) onBlurProp(event);\n };\n\n const onChangeHandler = (event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement> | string): void => {\n let parsedEvent: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement> | undefined;\n let val: string;\n\n if (typeof event !== 'string') {\n parsedEvent = event;\n val = event.target.value;\n } else {\n val = event;\n }\n\n if (parse) val = parse(val);\n if (formValidator) formValidator.set(val);\n if (onChange) onChange(val, parsedEvent);\n resizeTextarea();\n };\n\n const getInputType = (): string | undefined => {\n if (type === 'email') return undefined;\n if (type === 'password' && isPasswordShown) return 'text';\n return type;\n };\n\n const hasIcon =\n type &&\n type !== InputType.Date &&\n type !== InputType.Iban &&\n type !== InputType.HasNoIcon;\n\n const hasIconLeft =\n hasIcon && !useMatLabelStyle &&\n (type === InputType.Email || type === InputType.Phone || type === InputType.Search);\n\n const iconProps = {\n className: cx(styles.inputFieldIcon, {\n [styles.inputFieldIconNotClickable]: !onIconClick,\n [styles.inputFieldIconLeft]: hasIconLeft,\n }),\n onClick: onIconClick ?? undefined,\n };\n\n const customIcon = icon as React.ReactElement<{ className?: string; onClick?: React.MouseEventHandler }> | null;\n const renderedIcon = customIcon\n ? React.cloneElement(customIcon, {\n className: cx(\n styles.inputFieldIcon,\n { [styles.inputFieldIconNotClickable]: !onIconClick && !customIcon.props.onClick },\n customIcon.props.className,\n ),\n onClick: onIconClick ?? customIcon.props.onClick,\n })\n : null;\n const hasCustomIcon = !!icon;\n\n const passwordIconProps = {\n className: cx(styles.inputFieldIcon, styles.inputFieldIconPassword),\n onClick: () => setIsPasswordShown(!isPasswordShown),\n };\n\n const hasErr = hasError();\n\n let editedLabel = label;\n if (editedLabel && computedIsRequired()) editedLabel = `${editedLabel} *`;\n const requiredMark = computedIsRequired() ? <span className={styles.requiredMark}>*</span> : null;\n\n const currVal = formValidator ? formValidator.value : value;\n // A readOnly field is focusable but not editable — don't let focus drive the\n // \"editing\" affordances (primary-color border, label floating up on focus).\n // The label still floats when there's a value, since that's value-driven.\n const showFocus = isFocused && !readOnly;\n const shouldFloatLabel = useMatLabelStyle && (alwaysFloatLabel || showFocus || currVal || type === InputType.Date);\n\n return (\n <div className={cx(styles.input, className)} style={style}>\n <label\n htmlFor={inputId}\n className={cx(styles.inputLabel, classNames?.label, {\n [styles.inputLabelColumn]: !isRow,\n [styles.inputLabelInBorder]: labelInBorder,\n })}\n style={slotStyles?.label}\n >\n {label && !useMatLabelStyle ? (\n <span className={styles.inputLabelText}>\n {label}\n {requiredMark}\n </span>\n ) : null}\n {upperRightLabel && (\n <div className={cx(styles.inputUpperRightLabel, classNames?.upperRightLabel)} style={slotStyles?.upperRightLabel}>\n {upperRightLabel}\n </div>\n )}\n <div\n className={cx(styles.inputContainer, { [styles.inputContainerMultiline]: multiline }, classNames?.container)}\n style={slotStyles?.container}\n onMouseEnter={onMouseEnterHandler}\n onMouseLeave={onMouseLeaveHandler}\n >\n {renderedIcon}\n {React.cloneElement(customInput || (multiline ? <textarea /> : <input />), {\n ...rest,\n className: cx(\n styles.inputField,\n {\n [styles.inputFieldUppercase]: isUppercase,\n [styles.inputFieldDate]: type === InputType.Date,\n [styles.inputFieldDefault]: type !== InputType.Date,\n [styles.inputFieldWithIcon]: hasIcon || hasCustomIcon,\n [styles.inputFieldWithIconLeft]: hasIconLeft,\n [styles.inputFieldMultiline]: multiline,\n [styles.inputFieldMultilineAutoResize]: multiline && autoResize,\n [styles.inputFieldReadOnly]: readOnly && !disabled,\n },\n classNames?.input\n ),\n name,\n id: inputId,\n value: formValidator ? formValidator.value : value,\n tabIndex,\n ref: customInput ? undefined : inputRef,\n onChange: onChangeHandler,\n onFocus: onFocusHandler,\n onBlur: onBlurHandler,\n placeholder: !useMatLabelStyle ? placeholder : '',\n autoComplete,\n onClick,\n readOnly,\n disabled,\n ...(!multiline && { type: getInputType(), min, max }),\n ...(multiline && rows !== undefined && { rows }),\n })}\n {suffix && <div className={cx(styles.inputFieldSuffix, classNames?.suffix)} style={slotStyles?.suffix}>{suffix}</div>}\n </div>\n <fieldset\n className={cx(styles.inputFieldset, classNames?.fieldset, {\n [styles.inputContainerBorderFocused]: showFocus,\n [styles.inputContainerBorderSearchFocused]:\n type === InputType.Search && (showFocus || value),\n [styles.inputContainerBorderInvalid]: hasErr,\n [styles.inputContainerBorderError]: hasErr,\n })}\n style={slotStyles?.fieldset}\n >\n <legend\n className={cx(styles.inputFieldsetLegend, {\n [styles.inputFieldsetLegendActive]: shouldFloatLabel,\n })}\n >\n <span>{editedLabel}</span>\n </legend>\n </fieldset>\n {useMatLabelStyle && label && (\n <div\n className={cx(styles.inputMatLabel, {\n [styles.inputMatLabelFloating]: shouldFloatLabel,\n [styles.inputMatLabelMultiline]: multiline && !shouldFloatLabel,\n })}\n >\n {label}\n {requiredMark}\n </div>\n )}\n {useMatLabelStyle && placeholder && (\n <div\n className={cx(\n styles.inputPlaceholder,\n showFocus && !currVal && styles.inputPlaceholderShown,\n multiline && styles.inputPlaceholderMultiline,\n )}\n >\n {placeholder}\n </div>\n )}\n <Tooltip\n variant=\"error\"\n message={formValidator ? formValidator.getCurrentErrorMessage() : (errorMessage || '')}\n isVisible={hasErr && (isFocused || isHovered)}\n />\n </label>\n\n {type === InputType.Phone && <FontAwesomeIcon icon={faPhone} {...iconProps} />}\n {type === InputType.Email && <FontAwesomeIcon icon={faEnvelope} {...iconProps} />}\n {type === InputType.Edit && <FontAwesomeIcon icon={faPen} {...iconProps} />}\n {type === InputType.Search && <FontAwesomeIcon icon={faSearch} {...iconProps} />}\n {type === InputType.Password && (\n <FontAwesomeIcon\n icon={isPasswordShown ? passwordShownIcon : passwordHiddenIcon}\n {...passwordIconProps}\n />\n )}\n\n {((showCancel && value && (isFocused || isHovered)) || alwaysShowCancel) && (\n <FontAwesomeIcon\n icon={faXmark}\n className={styles.inputFieldIcon}\n onClick={onClearClicked ?? undefined}\n onMouseEnter={() => setIsHovered(true)}\n onMouseLeave={() => setIsHovered(false)}\n />\n )}\n </div>\n );\n}\n\nexport default Input;\n"],"mappings":"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"}
1
+ {"version":3,"file":"input.mjs","names":[],"sources":["../../../../package/common/input/input.tsx"],"sourcesContent":["import React, { useState, useEffect, useRef, useCallback, useId } from 'react';\nimport cx from 'classnames';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport {\n faPhone,\n faPen,\n faEnvelope,\n faSearch,\n faXmark,\n faEye as passwordHiddenIcon,\n faEyeSlash as passwordShownIcon,\n} from '@fortawesome/free-solid-svg-icons';\nimport Tooltip from 'components/common/tooltip';\nimport AnimatedIcon from 'components/common/animatedIcon';\nimport { useComponentDefaults } from 'components/common/configProvider';\nimport styles from './input.module.pcss';\nimport type { InputProps } from './input.types';\nimport { InputType, InputIconPosition } from './input.types';\n\nfunction Input(props: InputProps) {\n const {\n name = '',\n id,\n label = '',\n errorMessage = '',\n isValid = true,\n className = '',\n style,\n value = '',\n icon = null,\n iconPosition,\n onChange = () => {},\n onFocus: onFocusProp = null,\n onBlur: onBlurProp = null,\n onMouseEnter: onMouseEnterProp = null,\n onMouseLeave: onMouseLeaveProp = null,\n isUppercase = false,\n isRequired = false,\n tabIndex = 0,\n type = undefined,\n isRow = false,\n onIconClick = null,\n parse = null,\n formValidator = null,\n autoFocus = false,\n suffix = null,\n upperRightLabel = null,\n labelInBorder = false,\n showCancel = false,\n onClearClicked,\n min = null,\n max = null,\n placeholder = '',\n useMatLabelStyle = true,\n alwaysFloatLabel = false,\n autoComplete = null,\n onClick = () => null,\n readOnly = false,\n customInput,\n alwaysShowCancel = false,\n multiline = false,\n rows,\n autoResize = false,\n classNames,\n styles: slotStyles,\n disabled = false,\n ...rest\n } = useComponentDefaults('Input', props);\n const [isFocused, setIsFocused] = useState(false);\n const [isHovered, setIsHovered] = useState(false);\n const [isPasswordShown, setIsPasswordShown] = useState(false);\n const [, forceUpdate] = useState(0);\n\n const inputRef = useRef<HTMLInputElement | HTMLTextAreaElement>(null);\n const fvRef = useRef(formValidator);\n\n const generatedId = useId();\n const inputId = id || name || generatedId;\n\n const resizeTextarea = useCallback(() => {\n const el = inputRef.current;\n if (!el || !autoResize) return;\n el.style.height = 'auto';\n el.style.height = `${el.scrollHeight}px`;\n }, [autoResize]);\n\n useEffect(() => {\n resizeTextarea();\n }, []);\n\n useEffect(() => {\n if (autoFocus && inputRef.current) {\n setTimeout(() => { inputRef.current?.focus(); }, 1);\n }\n }, [autoFocus]);\n\n useEffect(() => {\n fvRef.current = formValidator;\n const fv = fvRef.current;\n if (!fv) return;\n fv.label = label ?? '';\n fv.validate();\n const listener = () => forceUpdate(n => n + 1);\n fv.registerOnUpdateListener(listener);\n return () => { fv.removeOnUpdateListener(listener); };\n }, [formValidator, label]);\n\n const hasError = (): boolean => {\n return formValidator\n ? (formValidator.touched && formValidator.hasError())\n : (!isValid || !!errorMessage);\n };\n\n const computedIsRequired = (): boolean => {\n return !!(isRequired || (formValidator && formValidator.validators.find(\n (v) => (v as { validatorId?: string }).validatorId === 'required'\n )));\n };\n\n const onMouseEnterHandler = (event: React.MouseEvent) => {\n setIsHovered(true);\n if (onMouseEnterProp) onMouseEnterProp(event);\n };\n\n const onMouseLeaveHandler = (event: React.MouseEvent) => {\n setIsHovered(false);\n if (onMouseLeaveProp) onMouseLeaveProp(event);\n };\n\n const onFocusHandler = (event: React.FocusEvent) => {\n setIsFocused(true);\n if (onFocusProp) onFocusProp(event);\n };\n\n const onBlurHandler = (event: React.FocusEvent) => {\n if (fvRef.current) fvRef.current.touched = true;\n setIsFocused(false);\n if (onBlurProp) onBlurProp(event);\n };\n\n const onChangeHandler = (event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement> | string): void => {\n let parsedEvent: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement> | undefined;\n let val: string;\n\n if (typeof event !== 'string') {\n parsedEvent = event;\n val = event.target.value;\n } else {\n val = event;\n }\n\n if (parse) val = parse(val);\n if (formValidator) formValidator.set(val);\n if (onChange) onChange(val, parsedEvent);\n resizeTextarea();\n };\n\n const getInputType = (): string | undefined => {\n if (type === InputType.Email) return undefined;\n if (type === InputType.Phone) return 'tel';\n if (type === InputType.Search) return 'search';\n if (type === 'password' && isPasswordShown) return 'text';\n return type;\n };\n\n const getInputMode = (): React.HTMLAttributes<HTMLInputElement>['inputMode'] => {\n if (type === InputType.Email) return 'email';\n if (type === InputType.Phone) return 'tel';\n if (type === InputType.Search) return 'search';\n return undefined;\n };\n\n const hasIcon =\n type &&\n type !== InputType.Date &&\n type !== InputType.Iban &&\n type !== InputType.HasNoIcon;\n\n const isFunctionalIconType = type === InputType.Search || type === InputType.Password;\n const hasCustomIcon = !!icon;\n const customIconApplies = hasCustomIcon && !isFunctionalIconType;\n\n const defaultsLeftWithoutMatLabel = type === InputType.Email || type === InputType.Phone || type === InputType.Search;\n const resolvedIconPosition = iconPosition ?? (!useMatLabelStyle && defaultsLeftWithoutMatLabel ? InputIconPosition.Left : InputIconPosition.Right);\n const iconIsLeft = resolvedIconPosition === InputIconPosition.Left;\n\n const iconProps = {\n className: cx(styles.inputFieldIcon, {\n [styles.inputFieldIconNotClickable]: !onIconClick,\n [styles.inputFieldIconLeft]: iconIsLeft,\n }),\n onClick: onIconClick ?? undefined,\n };\n\n const customIcon = icon as React.ReactElement<{ className?: string; onClick?: React.MouseEventHandler }> | null;\n const renderedIcon = customIconApplies && customIcon\n ? React.cloneElement(customIcon, {\n className: cx(\n styles.inputFieldIcon,\n {\n [styles.inputFieldIconNotClickable]: !onIconClick && !customIcon.props.onClick,\n [styles.inputFieldIconLeft]: iconIsLeft,\n },\n customIcon.props.className,\n ),\n onClick: onIconClick ?? customIcon.props.onClick,\n })\n : null;\n\n const hasLeftIcon = (hasIcon || hasCustomIcon) && iconIsLeft;\n\n const passwordIconProps = {\n className: cx(styles.inputFieldIcon, styles.inputFieldIconPassword, { [styles.inputFieldIconLeft]: iconIsLeft }),\n onClick: () => setIsPasswordShown(!isPasswordShown),\n };\n\n const hasErr = hasError();\n\n let editedLabel = label;\n if (editedLabel && computedIsRequired()) editedLabel = `${editedLabel} *`;\n const requiredMark = computedIsRequired() ? <span className={styles.requiredMark}>*</span> : null;\n\n const currVal = formValidator ? formValidator.value : value;\n const showFocus = isFocused && !readOnly;\n const shouldFloatLabel = useMatLabelStyle && (alwaysFloatLabel || showFocus || currVal || type === InputType.Date);\n\n const isSearchCleared = type === InputType.Search && !!currVal;\n\n function handleClear() {\n if (formValidator) formValidator.set('');\n onChange?.('');\n onClearClicked?.();\n }\n\n return (\n <div className={cx(styles.input, { [styles.inputIconLeft]: hasLeftIcon }, className)} style={style}>\n <label\n htmlFor={inputId}\n className={cx(styles.inputLabel, classNames?.label, {\n [styles.inputLabelColumn]: !isRow,\n [styles.inputLabelInBorder]: labelInBorder,\n })}\n style={slotStyles?.label}\n >\n {label && !useMatLabelStyle ? (\n <span className={styles.inputLabelText}>\n {label}\n {requiredMark}\n </span>\n ) : null}\n {upperRightLabel && (\n <div className={cx(styles.inputUpperRightLabel, classNames?.upperRightLabel)} style={slotStyles?.upperRightLabel}>\n {upperRightLabel}\n </div>\n )}\n <div\n className={cx(styles.inputContainer, { [styles.inputContainerMultiline]: multiline }, classNames?.container)}\n style={slotStyles?.container}\n onMouseEnter={onMouseEnterHandler}\n onMouseLeave={onMouseLeaveHandler}\n >\n {renderedIcon}\n {React.cloneElement(customInput || (multiline ? <textarea /> : <input />), {\n ...rest,\n className: cx(\n styles.inputField,\n {\n [styles.inputFieldUppercase]: isUppercase,\n [styles.inputFieldDate]: type === InputType.Date,\n [styles.inputFieldDefault]: type !== InputType.Date,\n [styles.inputFieldWithIcon]: hasIcon || hasCustomIcon,\n [styles.inputFieldWithIconLeft]: hasLeftIcon,\n [styles.inputFieldMultiline]: multiline,\n [styles.inputFieldMultilineAutoResize]: multiline && autoResize,\n [styles.inputFieldReadOnly]: readOnly && !disabled,\n },\n classNames?.input\n ),\n name,\n id: inputId,\n value: formValidator ? formValidator.value : value,\n tabIndex,\n ref: customInput ? undefined : inputRef,\n onChange: onChangeHandler,\n onFocus: onFocusHandler,\n onBlur: onBlurHandler,\n placeholder: !useMatLabelStyle ? placeholder : '',\n autoComplete,\n onClick,\n readOnly,\n disabled,\n ...(!multiline && { type: getInputType(), inputMode: rest.inputMode ?? getInputMode(), min, max }),\n ...(multiline && rows !== undefined && { rows }),\n })}\n {suffix && <div className={cx(styles.inputFieldSuffix, classNames?.suffix)} style={slotStyles?.suffix}>{suffix}</div>}\n </div>\n <fieldset\n className={cx(styles.inputFieldset, classNames?.fieldset, {\n [styles.inputFieldsetNoNotch]: !label,\n [styles.inputContainerBorderFocused]: showFocus,\n [styles.inputContainerBorderSearchFocused]:\n type === InputType.Search && (showFocus || value),\n [styles.inputContainerBorderInvalid]: hasErr,\n [styles.inputContainerBorderError]: hasErr,\n })}\n style={slotStyles?.fieldset}\n >\n <legend\n className={cx(styles.inputFieldsetLegend, {\n [styles.inputFieldsetLegendActive]: shouldFloatLabel,\n })}\n >\n <span>{editedLabel}</span>\n </legend>\n </fieldset>\n {useMatLabelStyle && label && (\n <div\n className={cx(styles.inputMatLabel, {\n [styles.inputMatLabelFloating]: shouldFloatLabel,\n [styles.inputMatLabelMultiline]: multiline && !shouldFloatLabel,\n })}\n >\n {label}\n {requiredMark}\n </div>\n )}\n {useMatLabelStyle && placeholder && (\n <div\n className={cx(\n styles.inputPlaceholder,\n showFocus && !currVal && styles.inputPlaceholderShown,\n multiline && styles.inputPlaceholderMultiline,\n )}\n >\n {placeholder}\n </div>\n )}\n <Tooltip\n variant=\"error\"\n message={formValidator ? formValidator.getCurrentErrorMessage() : (errorMessage || '')}\n isVisible={hasErr && (isFocused || isHovered)}\n />\n </label>\n\n {type === InputType.Phone && !hasCustomIcon && <FontAwesomeIcon icon={faPhone} {...iconProps} />}\n {type === InputType.Email && !hasCustomIcon && <FontAwesomeIcon icon={faEnvelope} {...iconProps} />}\n {type === InputType.Edit && !hasCustomIcon && <FontAwesomeIcon icon={faPen} {...iconProps} />}\n {type === InputType.Search && (\n <AnimatedIcon\n icon={isSearchCleared ? faXmark : faSearch}\n className={cx(styles.inputFieldIcon, {\n [styles.inputFieldIconNotClickable]: !isSearchCleared,\n [styles.inputFieldIconLeft]: iconIsLeft,\n })}\n onClick={isSearchCleared ? handleClear : undefined}\n />\n )}\n {type === InputType.Password && (\n <FontAwesomeIcon\n icon={isPasswordShown ? passwordShownIcon : passwordHiddenIcon}\n {...passwordIconProps}\n />\n )}\n\n {((showCancel && value && (isFocused || isHovered)) || alwaysShowCancel) && type !== InputType.Search && (\n <FontAwesomeIcon\n icon={faXmark}\n className={styles.inputFieldIcon}\n onClick={handleClear}\n onMouseEnter={() => setIsHovered(true)}\n onMouseLeave={() => setIsHovered(false)}\n />\n )}\n </div>\n );\n}\n\nexport default Input;\n"],"mappings":"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"}
@@ -1,2 +1,2 @@
1
- var e={"required-mark":`required-mark_xGJdX`,requiredMark:`required-mark_xGJdX`,input:`input_VKNCE`,"input-placeholder":`input-placeholder_IZH-l`,inputPlaceholder:`input-placeholder_IZH-l`,"input-placeholder-shown":`input-placeholder-shown_mm35e`,inputPlaceholderShown:`input-placeholder-shown_mm35e`,fadeIn:`fadeIn_kmX3i`,"input-placeholder-multiline":`input-placeholder-multiline_tLHAl`,inputPlaceholderMultiline:`input-placeholder-multiline_tLHAl`,"input-matLabel":`input-matLabel_-05ey`,inputMatLabel:`input-matLabel_-05ey`,"input-matLabel-floating":`input-matLabel-floating_1P2YE`,inputMatLabelFloating:`input-matLabel-floating_1P2YE`,"input-matLabel-multiline":`input-matLabel-multiline_miIZJ`,inputMatLabelMultiline:`input-matLabel-multiline_miIZJ`,"input-fieldset":`input-fieldset_XCibg`,inputFieldset:`input-fieldset_XCibg`,"input-fieldset-legend":`input-fieldset-legend_X23zp`,inputFieldsetLegend:`input-fieldset-legend_X23zp`,"input-fieldset-legend-active":`input-fieldset-legend-active_t-9hu`,inputFieldsetLegendActive:`input-fieldset-legend-active_t-9hu`,"input-container":`input-container_M1RoG`,inputContainer:`input-container_M1RoG`,"input-container-multiline":`input-container-multiline_eLw7h`,inputContainerMultiline:`input-container-multiline_eLw7h`,"input-container-border":`input-container-border_l131I`,inputContainerBorder:`input-container-border_l131I`,"input-container-border-focused":`input-container-border-focused_ct6oY`,inputContainerBorderFocused:`input-container-border-focused_ct6oY`,"input-container-border-searchFocused":`input-container-border-searchFocused_lq088`,inputContainerBorderSearchFocused:`input-container-border-searchFocused_lq088`,"input-container-border-invalid":`input-container-border-invalid_Wdbq2`,inputContainerBorderInvalid:`input-container-border-invalid_Wdbq2`,"input-container-border-error":`input-container-border-error_gzfPG`,inputContainerBorderError:`input-container-border-error_gzfPG`,"input-label":`input-label_w1hMR`,inputLabel:`input-label_w1hMR`,"input-label-column":`input-label-column_qBFPC`,inputLabelColumn:`input-label-column_qBFPC`,"input-label-text":`input-label-text_-J5qQ`,inputLabelText:`input-label-text_-J5qQ`,"input-upper-right-label":`input-upper-right-label_I-WG3`,inputUpperRightLabel:`input-upper-right-label_I-WG3`,"input-field":`input-field_pmDvZ`,inputField:`input-field_pmDvZ`,"input-field-withIcon":`input-field-withIcon_VpfmK`,inputFieldWithIcon:`input-field-withIcon_VpfmK`,"input-field-withIcon-left":`input-field-withIcon-left_Io7lU`,inputFieldWithIconLeft:`input-field-withIcon-left_Io7lU`,"input-field-suffix":`input-field-suffix_NZpXp`,inputFieldSuffix:`input-field-suffix_NZpXp`,"input-field-date":`input-field-date_UHJEZ`,inputFieldDate:`input-field-date_UHJEZ`,"input-field-default":`input-field-default_TKipA`,inputFieldDefault:`input-field-default_TKipA`,"input-field-readOnly":`input-field-readOnly_Eut34`,inputFieldReadOnly:`input-field-readOnly_Eut34`,"input-field-uppercase":`input-field-uppercase_UV6f1`,inputFieldUppercase:`input-field-uppercase_UV6f1`,"input-field-multiline":`input-field-multiline_al3V1`,inputFieldMultiline:`input-field-multiline_al3V1`,"input-field-multiline-autoResize":`input-field-multiline-autoResize_nK33P`,inputFieldMultilineAutoResize:`input-field-multiline-autoResize_nK33P`,"input-field-icon":`input-field-icon_YyJIr`,inputFieldIcon:`input-field-icon_YyJIr`,"input-field-icon-left":`input-field-icon-left_m2XB1`,inputFieldIconLeft:`input-field-icon-left_m2XB1`,"input-field-icon-notClickable":`input-field-icon-notClickable_7j24I`,inputFieldIconNotClickable:`input-field-icon-notClickable_7j24I`,"input-error":`input-error_LIG23`,inputError:`input-error_LIG23`};export{e as default};
1
+ var e={"required-mark":`required-mark_xGJdX`,requiredMark:`required-mark_xGJdX`,input:`input_VKNCE`,"input-placeholder":`input-placeholder_IZH-l`,inputPlaceholder:`input-placeholder_IZH-l`,"input-placeholder-shown":`input-placeholder-shown_mm35e`,inputPlaceholderShown:`input-placeholder-shown_mm35e`,fadeIn:`fadeIn_kmX3i`,"input-placeholder-multiline":`input-placeholder-multiline_tLHAl`,inputPlaceholderMultiline:`input-placeholder-multiline_tLHAl`,"input-matLabel":`input-matLabel_-05ey`,inputMatLabel:`input-matLabel_-05ey`,"input-matLabel-floating":`input-matLabel-floating_1P2YE`,inputMatLabelFloating:`input-matLabel-floating_1P2YE`,"input-matLabel-multiline":`input-matLabel-multiline_miIZJ`,inputMatLabelMultiline:`input-matLabel-multiline_miIZJ`,"input-fieldset":`input-fieldset_XCibg`,inputFieldset:`input-fieldset_XCibg`,"input-fieldset-no-notch":`input-fieldset-no-notch_re-Fw`,inputFieldsetNoNotch:`input-fieldset-no-notch_re-Fw`,"input-fieldset-legend":`input-fieldset-legend_X23zp`,inputFieldsetLegend:`input-fieldset-legend_X23zp`,"input-fieldset-legend-active":`input-fieldset-legend-active_t-9hu`,inputFieldsetLegendActive:`input-fieldset-legend-active_t-9hu`,"input-iconLeft":`input-iconLeft_itIuo`,inputIconLeft:`input-iconLeft_itIuo`,"input-container":`input-container_M1RoG`,inputContainer:`input-container_M1RoG`,"input-container-multiline":`input-container-multiline_eLw7h`,inputContainerMultiline:`input-container-multiline_eLw7h`,"input-container-border":`input-container-border_l131I`,inputContainerBorder:`input-container-border_l131I`,"input-container-border-focused":`input-container-border-focused_ct6oY`,inputContainerBorderFocused:`input-container-border-focused_ct6oY`,"input-container-border-searchFocused":`input-container-border-searchFocused_lq088`,inputContainerBorderSearchFocused:`input-container-border-searchFocused_lq088`,"input-container-border-invalid":`input-container-border-invalid_Wdbq2`,inputContainerBorderInvalid:`input-container-border-invalid_Wdbq2`,"input-container-border-error":`input-container-border-error_gzfPG`,inputContainerBorderError:`input-container-border-error_gzfPG`,"input-label":`input-label_w1hMR`,inputLabel:`input-label_w1hMR`,"input-label-column":`input-label-column_qBFPC`,inputLabelColumn:`input-label-column_qBFPC`,"input-label-text":`input-label-text_-J5qQ`,inputLabelText:`input-label-text_-J5qQ`,"input-upper-right-label":`input-upper-right-label_I-WG3`,inputUpperRightLabel:`input-upper-right-label_I-WG3`,"input-field":`input-field_pmDvZ`,inputField:`input-field_pmDvZ`,"input-field-withIcon":`input-field-withIcon_VpfmK`,inputFieldWithIcon:`input-field-withIcon_VpfmK`,"input-field-withIcon-left":`input-field-withIcon-left_Io7lU`,inputFieldWithIconLeft:`input-field-withIcon-left_Io7lU`,"input-field-suffix":`input-field-suffix_NZpXp`,inputFieldSuffix:`input-field-suffix_NZpXp`,"input-field-date":`input-field-date_UHJEZ`,inputFieldDate:`input-field-date_UHJEZ`,"input-field-default":`input-field-default_TKipA`,inputFieldDefault:`input-field-default_TKipA`,"input-field-readOnly":`input-field-readOnly_Eut34`,inputFieldReadOnly:`input-field-readOnly_Eut34`,"input-field-uppercase":`input-field-uppercase_UV6f1`,inputFieldUppercase:`input-field-uppercase_UV6f1`,"input-field-multiline":`input-field-multiline_al3V1`,inputFieldMultiline:`input-field-multiline_al3V1`,"input-field-multiline-autoResize":`input-field-multiline-autoResize_nK33P`,inputFieldMultilineAutoResize:`input-field-multiline-autoResize_nK33P`,"input-field-icon":`input-field-icon_YyJIr`,inputFieldIcon:`input-field-icon_YyJIr`,"input-field-icon-left":`input-field-icon-left_m2XB1`,inputFieldIconLeft:`input-field-icon-left_m2XB1`,"input-field-icon-notClickable":`input-field-icon-notClickable_7j24I`,inputFieldIconNotClickable:`input-field-icon-notClickable_7j24I`,"input-error":`input-error_LIG23`,inputError:`input-error_LIG23`};export{e as default};
2
2
  //# sourceMappingURL=input.module.mjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"input.module.mjs","names":[],"sources":["../../../../package/common/input/input.module.pcss"],"sourcesContent":["\n.required-mark {\n padding: 0px 0px 0px 4px;\n color: var(--required-mark-color, var(--error-color));\n}\n\n.input {\n position: relative;\n width: 100%;\n --input-notch-height: 1.75em;\n\n &-placeholder {\n position: absolute;\n top: 50%;\n left: 7px;\n transform: translateY(-50%);\n transition: all 0.2s;\n opacity: 0;\n user-select: none;\n pointer-events: none;\n\n &-shown {\n animation: 0.2s fadeIn 0.3s forwards;\n }\n\n &-multiline {\n top: 14px;\n transform: translateY(0);\n }\n }\n\n &-matLabel {\n position: absolute;\n transition: all 0.3s;\n left: 7px;\n right: 0;\n top: 50%;\n transform: translateY(-50%);\n font-size: 1em;\n color: var(--input-label-resting-color, var(--text-light));\n pointer-events: none;\n user-select: none;\n\n &-floating {\n top: 0;\n bottom: auto;\n left: 14px;\n right: 0;\n font-size: 0.8em;\n color: var(--input-label-floating-color, var(--text-color));\n transform: translateY(-50%);\n }\n\n &-multiline {\n top: 14px;\n transform: translateY(0);\n }\n }\n\n &-fieldset {\n position: absolute;\n width: 100%;\n margin: 0;\n padding: 0;\n min-width: 0;\n box-sizing: border-box;\n border-radius: var(--default-border-radius);\n font-size: 0.8em;\n inset: calc(var(--input-notch-height) / -2) 0 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(--input-notch-height);\n padding: 0 5px;\n opacity: 0;\n }\n\n span:empty {\n padding: 0.000001px;\n }\n }\n }\n\n &-container {\n display: flex;\n align-items: center;\n border-radius: var(--default-border-radius);\n background-color: var(--input-background);\n transition: border-color;\n cursor: text;\n height: 100%;\n\n &-multiline {\n overflow: hidden;\n padding-top: 10px;\n align-items: flex-start;\n }\n\n &-border {\n outline: 1px solid var(--border-color);\n transition: border-color;\n background-color: var(--input-background);\n outline: none;\n\n &-focused {\n outline-color: var(--primary-color);\n border-color: var(--primary-color);\n }\n\n &-searchFocused {\n outline-color: var(--search-input-color);\n outline-width: 2px;\n border-color: var(--search-input-color);\n }\n\n &-invalid {\n outline-color: var(--error-border-color);\n border-color: var(--error-border-color);\n }\n\n &-invalid:hover {\n outline-color: var(--error-border-color);\n border-color: var(--error-border-color);\n }\n\n &-error {\n outline-color: var(--error-border-color);\n border-color: var(--error-border-color);\n }\n }\n }\n\n &-label {\n display: flex;\n color: var(--text-color);\n height: 100%;\n\n &-column {\n flex-direction: column;\n }\n\n &-text {\n white-space: nowrap;\n margin-right: 5px;\n margin-bottom: 6px;\n display: flex;\n align-items: center;\n color: color(var(--border-color) lightness(40%));\n background-color: transparent;\n font-size: 12px;\n position: absolute;\n top: -15px;\n white-space: nowrap;\n }\n }\n\n &-upper-right-label {\n position: absolute;\n transform: translateY(calc(-100% - 1.5px));\n right: 8px;\n min-height: 12px;\n font-size: 12px;\n color: color(var(--border-color) lightness(40%));\n }\n\n &-field {\n appearance: none;\n -webkit-appearance: none;\n font-family: inherit;\n font-size: inherit;\n box-sizing: border-box;\n resize: none;\n width: 100%;\n border: none;\n border-radius: var(--default-border-radius);\n overflow: hidden;\n line-height: 1.25;\n color: var(--text-color);\n background: transparent;\n\n &:focus {\n outline: none;\n }\n\n &::placeholder {\n color: var(--text-light);\n }\n\n &-withIcon {\n padding-right: 37px !important;\n\n &-left {\n padding-right: 9px !important;\n padding-left: 37px !important;\n }\n }\n\n &-suffix {\n padding-right: 9px;\n }\n\n &-date {\n padding: 6px 9px;\n color-scheme: dark;\n\n svg {\n color: white;\n }\n }\n\n &-default {\n padding: 8px 7.5px 6px;\n }\n\n &[disabled] {\n background-color: var(--disabled-input-color);\n color: var(--disabled-font-color);\n -webkit-text-fill-color: var(--disabled-font-color);\n opacity: 1;\n\n &::placeholder {\n color: var(--disabled-font-color);\n -webkit-text-fill-color: var(--disabled-font-color);\n }\n }\n\n &-readOnly {\n cursor: default;\n color: var(--text-dark);\n -webkit-text-fill-color: var(--text-dark);\n }\n\n &-uppercase {\n text-transform: uppercase;\n }\n\n &-multiline {\n overflow-y: auto;\n resize: vertical;\n padding-top: 4px;\n min-height: 30px;\n\n &-autoResize {\n resize: none;\n overflow: hidden;\n }\n }\n\n &-icon {\n appearance: none;\n -webkit-appearance: none;\n box-sizing: border-box;\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n background-color: transparent;\n border: none;\n position: absolute;\n outline: none;\n right: 10px;\n top: 8px;\n color: var(--input-icon-color);\n width: 19px !important;\n height: 19px !important;\n user-select: none;\n top: 50%;\n transform: translateY(-50%);\n\n &-left {\n left: 10px;\n }\n\n &-notClickable {\n pointer-events: none;\n }\n }\n }\n\n &-error {\n height: 1em;\n padding-top: 3px;\n color: var(--error-font-color);\n font-size: 11px;\n }\n\n @keyframes fadeIn {\n from {\n opacity: 0;\n }\n to {\n opacity: 0.5;\n }\n }\n}\n"],"mappings":""}
1
+ {"version":3,"file":"input.module.mjs","names":[],"sources":["../../../../package/common/input/input.module.pcss"],"sourcesContent":["\n.required-mark {\n padding: 0px 0px 0px 4px;\n color: var(--required-mark-color, var(--error-color));\n}\n\n.input {\n position: relative;\n width: 100%;\n --input-notch-height: 1.75em;\n --input-icon-size: 1.2em;\n --input-icon-offset: 0.6em;\n --input-icon-gutter: 2.2em;\n\n &-placeholder {\n position: absolute;\n top: 50%;\n left: 7px;\n transform: translateY(-50%);\n transition: all 0.2s;\n opacity: 0;\n user-select: none;\n pointer-events: none;\n\n &-shown {\n animation: 0.2s fadeIn 0.3s forwards;\n }\n\n &-multiline {\n top: 14px;\n transform: translateY(0);\n }\n }\n\n &-matLabel {\n position: absolute;\n transition: all 0.3s;\n left: 7px;\n right: 0;\n top: 50%;\n transform: translateY(-50%);\n font-size: 1em;\n color: var(--input-label-resting-color, var(--text-light));\n pointer-events: none;\n user-select: none;\n\n &-floating {\n top: 0;\n bottom: auto;\n left: 14px;\n right: 0;\n font-size: 0.8em;\n color: var(--input-label-floating-color, var(--text-color));\n transform: translateY(-50%);\n }\n\n &-multiline {\n top: 14px;\n transform: translateY(0);\n }\n }\n\n &-fieldset {\n position: absolute;\n width: 100%;\n margin: 0;\n padding: 0;\n min-width: 0;\n box-sizing: border-box;\n border-radius: var(--default-border-radius);\n font-size: 0.8em;\n inset: calc(var(--input-notch-height) / -2) 0 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 &-no-notch {\n /* Only Firefox actually renders the reserved notch space as a visible overlap on\n label-less inputs (e.g. crossing a divider directly above it in a tightly-packed\n layout like the sidebar search box); Chrome's rendering was never broken, just\n consistently sized with every other input. @supports (-moz-appearance: none) is a\n reliable Firefox-only feature query, so this scopes the fix to where it's needed\n instead of changing every browser's sizing. */\n @supports (-moz-appearance: none) {\n inset: 0;\n }\n }\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(--input-notch-height);\n padding: 0 5px;\n opacity: 0;\n }\n\n span:empty {\n padding: 0.000001px;\n }\n }\n }\n\n &-iconLeft {\n .input-matLabel {\n left: var(--input-icon-gutter);\n\n &-floating {\n left: calc(var(--input-icon-gutter) + 0.5em);\n }\n }\n\n .input-placeholder {\n left: var(--input-icon-gutter);\n }\n\n .input-fieldset {\n padding-left: var(--input-icon-gutter);\n }\n }\n\n &-container {\n display: flex;\n align-items: center;\n border-radius: var(--default-border-radius);\n background-color: var(--input-background);\n transition: border-color;\n cursor: text;\n height: 100%;\n\n &-multiline {\n overflow: hidden;\n padding-top: 10px;\n align-items: flex-start;\n }\n\n &-border {\n outline: 1px solid var(--border-color);\n transition: border-color;\n background-color: var(--input-background);\n outline: none;\n\n &-focused {\n outline-color: var(--primary-color);\n border-color: var(--primary-color);\n }\n\n &-searchFocused {\n outline-color: var(--search-input-color);\n outline-width: 2px;\n border-color: var(--search-input-color);\n }\n\n &-invalid {\n outline-color: var(--error-border-color);\n border-color: var(--error-border-color);\n }\n\n &-invalid:hover {\n outline-color: var(--error-border-color);\n border-color: var(--error-border-color);\n }\n\n &-error {\n outline-color: var(--error-border-color);\n border-color: var(--error-border-color);\n }\n }\n }\n\n &-label {\n display: flex;\n color: var(--text-color);\n height: 100%;\n\n &-column {\n flex-direction: column;\n }\n\n &-text {\n white-space: nowrap;\n margin-right: 5px;\n margin-bottom: 6px;\n display: flex;\n align-items: center;\n color: color(var(--border-color) lightness(40%));\n background-color: transparent;\n font-size: 12px;\n position: absolute;\n top: -15px;\n white-space: nowrap;\n }\n }\n\n &-upper-right-label {\n position: absolute;\n transform: translateY(calc(-100% - 1.5px));\n right: 8px;\n min-height: 12px;\n font-size: 12px;\n color: color(var(--border-color) lightness(40%));\n }\n\n &-field {\n appearance: none;\n -webkit-appearance: none;\n font-family: inherit;\n font-size: inherit;\n box-sizing: border-box;\n resize: none;\n width: 100%;\n border: none;\n border-radius: var(--default-border-radius);\n overflow: hidden;\n line-height: 1.25;\n color: var(--text-color);\n background: transparent;\n\n &:focus {\n outline: none;\n }\n\n &::placeholder {\n color: var(--text-light);\n }\n\n /* The browser's own search-cancel decoration doesn't match the theme — Search has its own\n themed clear icon (see isSearchCleared in input.tsx) that replaces it. */\n &::-webkit-search-cancel-button,\n &::-webkit-search-decoration {\n -webkit-appearance: none;\n appearance: none;\n display: none;\n }\n\n &-withIcon {\n padding-right: var(--input-icon-gutter) !important;\n\n &-left {\n padding-right: 0.643em !important;\n padding-left: var(--input-icon-gutter) !important;\n }\n }\n\n &-suffix {\n padding-right: 9px;\n }\n\n &-date {\n padding: 6px 9px;\n color-scheme: dark;\n\n svg {\n color: white;\n }\n }\n\n &-default {\n padding: 8px 7.5px 6px;\n }\n\n &[disabled] {\n background-color: var(--disabled-input-color);\n color: var(--disabled-font-color);\n -webkit-text-fill-color: var(--disabled-font-color);\n opacity: 1;\n\n &::placeholder {\n color: var(--disabled-font-color);\n -webkit-text-fill-color: var(--disabled-font-color);\n }\n }\n\n &-readOnly {\n cursor: default;\n color: var(--text-dark);\n -webkit-text-fill-color: var(--text-dark);\n }\n\n &-uppercase {\n text-transform: uppercase;\n }\n\n &-multiline {\n overflow-y: auto;\n resize: vertical;\n padding-top: 4px;\n min-height: 30px;\n\n &-autoResize {\n resize: none;\n overflow: hidden;\n }\n }\n\n &-icon {\n appearance: none;\n -webkit-appearance: none;\n box-sizing: border-box;\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n background-color: transparent;\n border: none;\n position: absolute;\n outline: none;\n right: var(--input-icon-offset);\n color: var(--input-icon-color);\n width: var(--input-icon-size) !important;\n height: var(--input-icon-size) !important;\n user-select: none;\n top: 50%;\n transform: translateY(-50%);\n\n &-left {\n left: var(--input-icon-offset);\n }\n\n &-notClickable {\n pointer-events: none;\n }\n }\n }\n\n &-error {\n height: 1em;\n padding-top: 3px;\n color: var(--error-font-color);\n font-size: 11px;\n }\n\n @keyframes fadeIn {\n from {\n opacity: 0;\n }\n to {\n opacity: 0.5;\n }\n }\n}\n"],"mappings":""}
@@ -1,2 +1,2 @@
1
- var e=function(e){return e.Edit=`edit`,e.Phone=`phone`,e.Email=`email`,e.Iban=`iban`,e.Date=`date`,e.HasNoIcon=`hasNoIcon`,e.Search=`searchInput`,e.Password=`password`,e}({});export{e as InputType};
1
+ var e=function(e){return e.Edit=`edit`,e.Phone=`phone`,e.Email=`email`,e.Iban=`iban`,e.Date=`date`,e.HasNoIcon=`hasNoIcon`,e.Search=`searchInput`,e.Password=`password`,e}({}),t=function(e){return e.Left=`left`,e.Right=`right`,e}({});export{t as InputIconPosition,e as InputType};
2
2
  //# sourceMappingURL=input.types.mjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"input.types.mjs","names":[],"sources":["../../../../package/common/input/input.types.ts"],"sourcesContent":["import React from 'react';\nimport type { FormValidator } from 'services/formValidation';\nimport type { SlotClassNames, SlotStyles, HtmlProps } from '../types/slots.types';\n\nexport enum InputType {\n Edit = 'edit',\n Phone = 'phone',\n Email = 'email',\n Iban = 'iban',\n Date = 'date',\n HasNoIcon = 'hasNoIcon',\n Search = 'searchInput',\n Password = 'password',\n}\n\nexport type InputSlots = 'label' | 'container' | 'input' | 'suffix' | 'upperRightLabel' | 'fieldset';\n\ntype OverriddenInputAttributes =\n | 'onChange'\n | 'onFocus'\n | 'onBlur'\n | 'onMouseEnter'\n | 'onMouseLeave'\n | 'onClick'\n | 'type'\n | 'value'\n | 'min'\n | 'max'\n | 'autoComplete';\n\nexport interface InputProps\n extends Omit<React.InputHTMLAttributes<HTMLInputElement>, OverriddenInputAttributes>,\n HtmlProps {\n onMouseEnter?: ((event: React.MouseEvent) => void) | null;\n onMouseLeave?: ((event: React.MouseEvent) => void) | null;\n onFocus?: ((event: React.FocusEvent) => void) | null;\n onBlur?: ((event: React.FocusEvent) => void) | null;\n onChange?: ((value: string, event?: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement, Element>) => void) | null;\n errorMessage?: string;\n isValid?: boolean;\n isRequired?: boolean;\n label?: string;\n name?: string;\n className?: string;\n style?: React.CSSProperties;\n value?: string | number;\n icon?: React.ReactElement | null;\n isUppercase?: boolean;\n isRow?: boolean;\n tabIndex?: number;\n type?: InputType;\n onIconClick?: (() => void) | null;\n parse?: ((value: string) => string) | null;\n suffix?: string | React.ReactNode;\n disabled?: boolean;\n upperRightLabel?: string | React.ReactNode;\n labelInBorder?: boolean;\n showCancel?: boolean;\n onClearClicked?: (() => void) | null;\n min?: string | number | null;\n max?: string | number | null;\n placeholder?: string;\n useMatLabelStyle?: boolean;\n alwaysFloatLabel?: boolean;\n autoComplete?: string | null;\n onClick?: (() => void) | null;\n readOnly?: boolean;\n customInput?: React.ReactElement | null;\n autoFocus?: boolean;\n alwaysShowCancel?: boolean;\n formValidator?: FormValidator | null;\n multiline?: boolean;\n rows?: number;\n autoResize?: boolean;\n classNames?: SlotClassNames<InputSlots>;\n styles?: SlotStyles<InputSlots>;\n}\n"],"mappings":"AAIA,IAAY,EAAL,SAAA,EAAA,OACL,GAAA,KAAA,OACA,EAAA,MAAA,QACA,EAAA,MAAA,QACA,EAAA,KAAA,OACA,EAAA,KAAA,OACA,EAAA,UAAA,YACA,EAAA,OAAA,cACA,EAAA,SAAA,YACF,EAAA,CAAA,CAAA"}
1
+ {"version":3,"file":"input.types.mjs","names":[],"sources":["../../../../package/common/input/input.types.ts"],"sourcesContent":["import React from 'react';\nimport type { FormValidator } from 'services/formValidation';\nimport type { SlotClassNames, SlotStyles, HtmlProps } from '../types/slots.types';\n\nexport enum InputType {\n Edit = 'edit',\n Phone = 'phone',\n Email = 'email',\n Iban = 'iban',\n Date = 'date',\n HasNoIcon = 'hasNoIcon',\n Search = 'searchInput',\n Password = 'password',\n}\n\nexport enum InputIconPosition {\n Left = 'left',\n Right = 'right',\n}\n\nexport type InputSlots = 'label' | 'container' | 'input' | 'suffix' | 'upperRightLabel' | 'fieldset';\n\ntype OverriddenInputAttributes =\n | 'onChange'\n | 'onFocus'\n | 'onBlur'\n | 'onMouseEnter'\n | 'onMouseLeave'\n | 'onClick'\n | 'type'\n | 'value'\n | 'min'\n | 'max'\n | 'autoComplete';\n\nexport interface InputProps\n extends Omit<React.InputHTMLAttributes<HTMLInputElement>, OverriddenInputAttributes>,\n HtmlProps {\n onMouseEnter?: ((event: React.MouseEvent) => void) | null;\n onMouseLeave?: ((event: React.MouseEvent) => void) | null;\n onFocus?: ((event: React.FocusEvent) => void) | null;\n onBlur?: ((event: React.FocusEvent) => void) | null;\n onChange?: ((value: string, event?: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement, Element>) => void) | null;\n errorMessage?: string;\n isValid?: boolean;\n isRequired?: boolean;\n label?: string;\n name?: string;\n className?: string;\n style?: React.CSSProperties;\n value?: string | number;\n icon?: React.ReactElement | null;\n iconPosition?: InputIconPosition;\n isUppercase?: boolean;\n isRow?: boolean;\n tabIndex?: number;\n type?: InputType;\n onIconClick?: (() => void) | null;\n parse?: ((value: string) => string) | null;\n suffix?: string | React.ReactNode;\n disabled?: boolean;\n upperRightLabel?: string | React.ReactNode;\n labelInBorder?: boolean;\n showCancel?: boolean;\n onClearClicked?: (() => void) | null;\n min?: string | number | null;\n max?: string | number | null;\n placeholder?: string;\n useMatLabelStyle?: boolean;\n alwaysFloatLabel?: boolean;\n autoComplete?: string | null;\n onClick?: (() => void) | null;\n readOnly?: boolean;\n customInput?: React.ReactElement | null;\n autoFocus?: boolean;\n alwaysShowCancel?: boolean;\n formValidator?: FormValidator | null;\n multiline?: boolean;\n rows?: number;\n autoResize?: boolean;\n classNames?: SlotClassNames<InputSlots>;\n styles?: SlotStyles<InputSlots>;\n}\n"],"mappings":"AAIA,IAAY,EAAL,SAAA,EAAA,OACL,GAAA,KAAA,OACA,EAAA,MAAA,QACA,EAAA,MAAA,QACA,EAAA,KAAA,OACA,EAAA,KAAA,OACA,EAAA,UAAA,YACA,EAAA,OAAA,cACA,EAAA,SAAA,YACF,EAAA,CAAA,CAAA,EAEY,EAAL,SAAA,EAAA,OACL,GAAA,KAAA,OACA,EAAA,MAAA,SACF,EAAA,CAAA,CAAA"}
@@ -1,2 +1,2 @@
1
- import e from"../actionButtons/actionButtons.module.mjs";import{ButtonStyleType as t}from"../button/button.types.mjs";import n from"../button/button.mjs";import r from"../chip/chip.mjs";import i from"../chip/chipContainer.mjs";import{Align as a}from"../floatingMenu/floatingMenu.types.mjs";import o from"../floatingMenu/floatingMenu.mjs";import s from"../modal/modal.mjs";import c from"../../services/klipy.mjs";import l from"../searchInput/searchInput.mjs";import u from"./components/gifPreview/gifPreview.mjs";import d from"./components/gifView/gifView.mjs";import f from"./klipyPicker.module.mjs";import{useMemo as p,useState as m}from"react";import h from"classnames";import{Fragment as g,jsx as _,jsxs as v}from"react/jsx-runtime";function y({className:y,token:b=``,isModal:x=!1,onSelect:S=()=>void 0,selected:C=null}){let w=p(()=>new c(b),[b]),[T,E]=m(``),[D,O]=m([]),[k,A]=m([]),[j,M]=m(null),[N,P]=m(!1);async function F(e){if(E(e),!e.trim()){O([]),A([]),M(null);return}let[{results:t=[],next:n=null},{results:r=[]}]=await Promise.all([w.search(e,{limit:18,contentfilter:`medium`}),w.searchSuggestions(e)]);O(t),M(n),A(r)}async function I(){let{results:e=[],next:t=null}=await w.search(T,{limit:36,pos:j??void 0,contentfilter:`medium`});M(t),O(t=>[...t,...e])}async function L(e){await S(e),P(!1),e&&w.registerShare(T,e.id)}function R(){return _(i,{inline:!0,className:f.klipyPickerSuggestionsContainer,children:k.map(e=>_(r,{className:f.klipyPickerSuggestionsItem,text:e,onClick:()=>F(e)},e))})}function z(){return _(u,{previewItems:D,onSelect:L,onLoadAdditional:I})}function B(){return _(l,{label:`Pick gif`,value:T,onDebounce:F,onChange:E})}return x?v(`div`,{className:h(f.klipyPicker,y),children:[v(`div`,{className:e.actionButtons,children:[_(n,{onClick:()=>P(!0),children:`Pick gif`}),C&&_(n,{styleType:t.Delete,onClick:()=>L(null),children:`Remove gif`})]}),C&&_(d,{className:f.klipyPickerSelected,src:C}),_(s,{isOpen:N,onClose:()=>P(!1),children:v(`div`,{className:f.klipyPickerModalContent,children:[B(),R(),z()]})})]}):v(`div`,{className:h(f.klipyPicker,y),children:[_(o,{align:a.Left,isOpen:D.length>0&&N,onOpenChange:P,content:v(g,{children:[R(),z()]}),children:B()}),C&&_(n,{styleType:t.Delete,onClick:()=>L(null),children:`Remove gif`}),C&&_(d,{className:f.klipyPickerSelected,src:C})]})}export{y as default};
1
+ import e from"../actionButtons/actionButtons.module.mjs";import{ButtonStyleType as t}from"../button/button.types.mjs";import n from"../button/button.mjs";import{Align as r}from"../floatingMenu/floatingMenu.types.mjs";import i from"../floatingMenu/floatingMenu.mjs";import a from"../chip/chip.mjs";import o from"../chip/chipContainer.mjs";import s from"../modal/modal.mjs";import c from"../../services/klipy.mjs";import l from"../searchInput/searchInput.mjs";import u from"./components/gifPreview/gifPreview.mjs";import d from"./components/gifView/gifView.mjs";import f from"./klipyPicker.module.mjs";import{useMemo as p,useState as m}from"react";import h from"classnames";import{Fragment as g,jsx as _,jsxs as v}from"react/jsx-runtime";function y({className:y,token:b=``,isModal:x=!1,onSelect:S=()=>void 0,selected:C=null}){let w=p(()=>new c(b),[b]),[T,E]=m(``),[D,O]=m([]),[k,A]=m([]),[j,M]=m(null),[N,P]=m(!1);async function F(e){if(E(e),!e.trim()){O([]),A([]),M(null);return}let[{results:t=[],next:n=null},{results:r=[]}]=await Promise.all([w.search(e,{limit:18,contentfilter:`medium`}),w.searchSuggestions(e)]);O(t),M(n),A(r)}async function I(){let{results:e=[],next:t=null}=await w.search(T,{limit:36,pos:j??void 0,contentfilter:`medium`});M(t),O(t=>[...t,...e])}async function L(e){await S(e),P(!1),e&&w.registerShare(T,e.id)}function R(){return _(o,{inline:!0,className:f.klipyPickerSuggestionsContainer,children:k.map(e=>_(a,{className:f.klipyPickerSuggestionsItem,text:e,onClick:()=>F(e)},e))})}function z(){return _(u,{previewItems:D,onSelect:L,onLoadAdditional:I})}function B(){return _(l,{label:`Pick gif`,value:T,onDebounce:F,onChange:E})}return x?v(`div`,{className:h(f.klipyPicker,y),children:[v(`div`,{className:e.actionButtons,children:[_(n,{onClick:()=>P(!0),children:`Pick gif`}),C&&_(n,{styleType:t.Delete,onClick:()=>L(null),children:`Remove gif`})]}),C&&_(d,{className:f.klipyPickerSelected,src:C}),_(s,{isOpen:N,onClose:()=>P(!1),children:v(`div`,{className:f.klipyPickerModalContent,children:[B(),R(),z()]})})]}):v(`div`,{className:h(f.klipyPicker,y),children:[_(i,{align:r.Left,isOpen:D.length>0&&N,onOpenChange:P,dontCloseOnChildClick:!0,content:v(g,{children:[R(),z()]}),children:B()}),C&&_(n,{styleType:t.Delete,onClick:()=>L(null),children:`Remove gif`}),C&&_(d,{className:f.klipyPickerSelected,src:C})]})}export{y as default};
2
2
  //# sourceMappingURL=klipyPicker.mjs.map
@@ -1 +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 { KlipyPickerProps } from './klipyPicker.types';\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}: KlipyPickerProps): ReactElement {\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 = [] }] =\n 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 (\n <SearchInput\n label=\"Pick gif\"\n value={searchText}\n onDebounce={searchFor}\n onChange={setSearchText}\n />\n );\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 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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"}
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 { KlipyPickerProps } from './klipyPicker.types';\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}: KlipyPickerProps): ReactElement {\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 = [] }] =\n 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 (\n <SearchInput\n label=\"Pick gif\"\n value={searchText}\n onDebounce={searchFor}\n onChange={setSearchText}\n />\n );\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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"}
@@ -1,2 +1,2 @@
1
- import{useComponentDefaults as e}from"../configProvider/useComponentDefaults.mjs";import t from"../interactableDiv/index.mjs";import n from"../input/input.mjs";import r from"./numberInput.module.mjs";import"react";import i from"classnames";import{FontAwesomeIcon as a}from"@fortawesome/react-fontawesome";import{faChevronDown as o,faChevronUp as s}from"@fortawesome/free-solid-svg-icons";import{jsx as c,jsxs as l}from"react/jsx-runtime";import{NumericFormat as u}from"react-number-format";function d(d){let{value:f,onChange:p,formValidator:m,label:h,error:g,className:_,allowNegative:v=!1,decimalSeparator:y,thousandSeparator:b,prefix:x,suffix:S,decimalScale:C,fixedDecimalScale:w=!0,placeholder:T,sign:E,showArrows:D=!1,step:O=1,readOnly:k=!1,onKeyDown:A,...j}=e(`NumberInput`,d),M=m==null?f:m.value,N=E!=null&&M!=null?Math.abs(Number(M)):M,P=N==null?``:String(N);function F(e){let t=e;t!==void 0&&(E===`-`&&(t=-Math.abs(t)),E===`+`&&(t=Math.abs(t))),m?.set(t??null),p?.(t)}function I(e){if(k)return;let t=(M!=null&&M!==``?Number(M):0)+e;!v&&E!==`-`&&(t=Math.max(0,t)),E===`-`&&(t=Math.min(0,t)),F(t)}function L(e){if(k){A?.(e);return}if(e.key===`ArrowUp`){e.preventDefault(),I(e.shiftKey?O*10:O);return}if(e.key===`ArrowDown`){e.preventDefault(),I(e.shiftKey?-O*10:-O);return}A?.(e)}let R=E===`-`?`-`:E===`+`?`+`:x,z=D&&!k?l(`div`,{className:r.arrows,children:[c(t,{className:r.arrowBtn,tabIndex:-1,onMouseDown:e=>{e.preventDefault(),I(e.shiftKey?O*10:O)},children:c(a,{icon:s})}),c(t,{className:r.arrowBtn,tabIndex:-1,onMouseDown:e=>{e.preventDefault(),I(e.shiftKey?-O*10:-O)},children:c(a,{icon:o})})]}):null;return c(n,{label:h,className:i(r.numberInput,_),value:P,onChange:()=>{},formValidator:null,isValid:m?m.touched?!m.hasError():!0:!g,errorMessage:m?m.getCurrentErrorMessage()??``:g??``,placeholder:T,readOnly:k,suffix:z,customInput:c(u,{onValueChange:e=>F(e.floatValue),allowNegative:E==null?v:!1,decimalSeparator:y,thousandSeparator:b,decimalScale:C,fixedDecimalScale:w,prefix:R,suffix:S,onKeyDown:D?L:A,...j})})}export{d as default};
1
+ import{useComponentDefaults as e}from"../configProvider/useComponentDefaults.mjs";import t from"../interactableDiv/index.mjs";import n from"../input/input.mjs";import r from"./numberInput.module.mjs";import"react";import i from"classnames";import{FontAwesomeIcon as a}from"@fortawesome/react-fontawesome";import{faChevronDown as o,faChevronUp as s}from"@fortawesome/free-solid-svg-icons";import{jsx as c,jsxs as l}from"react/jsx-runtime";import{NumericFormat as u}from"react-number-format";function d(d){let{value:f,onChange:p,formValidator:m,label:h,error:g,className:_,allowNegative:v=!1,decimalSeparator:y,thousandSeparator:b,prefix:x,suffix:S,decimalScale:C,fixedDecimalScale:w=!0,placeholder:T,sign:E,showArrows:D=!1,step:O=1,readOnly:k=!1,onKeyDown:A,...j}=e(`NumberInput`,d),M=m==null?f:m.value,N=E!=null&&M!=null?Math.abs(Number(M)):M,P=N==null?``:String(N);function F(e){let t=e;t!==void 0&&(E===`-`&&(t=-Math.abs(t)),E===`+`&&(t=Math.abs(t))),m?.set(t??null),p?.(t)}function I(e){if(k)return;let t=(M!=null&&M!==``?Number(M):0)+e;!v&&E!==`-`&&(t=Math.max(0,t)),E===`-`&&(t=Math.min(0,t)),F(t)}function L(e){if(k){A?.(e);return}if(e.key===`ArrowUp`){e.preventDefault(),I(e.shiftKey?O*10:O);return}if(e.key===`ArrowDown`){e.preventDefault(),I(e.shiftKey?-O*10:-O);return}A?.(e)}let R=E===`-`?`-`:E===`+`?`+`:x,z=D&&!k?l(`div`,{className:r.arrows,children:[c(t,{className:r.arrowBtn,tabIndex:-1,onMouseDown:e=>{e.preventDefault(),I(e.shiftKey?O*10:O)},children:c(a,{icon:s})}),c(t,{className:r.arrowBtn,tabIndex:-1,onMouseDown:e=>{e.preventDefault(),I(e.shiftKey?-O*10:-O)},children:c(a,{icon:o})})]}):null;return c(n,{label:h,className:i(r.numberInput,_),value:P,onChange:()=>{},formValidator:null,isValid:m?m.touched?!m.hasError():!0:!g,errorMessage:m?m.getCurrentErrorMessage()??``:g??``,placeholder:T,readOnly:k,suffix:z,inputMode:C===0?`numeric`:`decimal`,customInput:c(u,{onValueChange:e=>F(e.floatValue),allowNegative:E==null?v:!1,decimalSeparator:y,thousandSeparator:b,decimalScale:C,fixedDecimalScale:w,prefix:R,suffix:S,onKeyDown:D?L:A,...j})})}export{d as default};
2
2
  //# sourceMappingURL=numberInput.mjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"numberInput.mjs","names":[],"sources":["../../../../package/common/numberInput/numberInput.tsx"],"sourcesContent":["import type { ReactElement } from 'react';\nimport React from 'react';\nimport cx from 'classnames';\nimport { NumericFormat, NumericFormatProps } from 'react-number-format';\nimport type { FormValidator } from 'services/formValidation';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { faChevronUp, faChevronDown } from '@fortawesome/free-solid-svg-icons';\n\nimport styles from './numberInput.module.pcss';\nimport Input from '../input';\nimport InteractableDiv from '../interactableDiv';\nimport { useComponentDefaults } from '../configProvider';\n\nexport interface NumberInputProps\n extends Omit<NumericFormatProps, 'onValueChange' | 'value' | 'customInput' | 'onChange' | 'step' | 'onKeyDown'> {\n value?: number | string;\n onChange?: (value: number | undefined) => void;\n formValidator?: FormValidator | null;\n label?: string;\n error?: string;\n className?: string;\n allowNegative?: boolean;\n decimalSeparator?: string;\n thousandSeparator?: string | boolean;\n prefix?: string;\n suffix?: string;\n decimalScale?: number;\n /**\n * Whether to pad the value to exactly `decimalScale` decimals. Default `true`\n * (e.g. with `decimalScale={2}`, `12` displays as `12.00`). Set `false` to make\n * `decimalScale` an upper limit only — the user may type fewer decimals and they\n * are kept as-is (`12` stays `12`, `12.1` stays `12.1`), while anything beyond\n * `decimalScale` is still truncated.\n */\n fixedDecimalScale?: boolean;\n placeholder?: string;\n sign?: '+' | '-';\n showArrows?: boolean;\n step?: number;\n readOnly?: boolean;\n onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;\n}\n\nfunction NumberInput(props: NumberInputProps): ReactElement {\n const {\n value,\n onChange,\n formValidator,\n label,\n error,\n className,\n allowNegative = false,\n decimalSeparator,\n thousandSeparator,\n prefix,\n suffix,\n decimalScale,\n fixedDecimalScale = true,\n placeholder,\n sign,\n showArrows = false,\n step = 1,\n readOnly = false,\n onKeyDown: onKeyDownProp,\n ...rest\n } = useComponentDefaults('NumberInput', props);\n const rawValue = formValidator != null ? formValidator.value as number | string : value;\n // When a sign is forced, display the absolute value — the prefix character carries the sign visually.\n const displayValue = sign != null && rawValue != null ? Math.abs(Number(rawValue)) : rawValue;\n const controlledValue = displayValue != null ? String(displayValue) : '';\n\n function handleValueChange(floatValue: number | undefined) {\n let out = floatValue;\n if (out !== undefined) {\n if (sign === '-') out = -Math.abs(out);\n if (sign === '+') out = Math.abs(out);\n }\n if (formValidator != null) formValidator.set(out ?? null);\n onChange?.(out);\n }\n\n function handleStep(delta: number) {\n if (readOnly) return;\n const current = rawValue != null && rawValue !== '' ? Number(rawValue) : 0;\n let next = current + delta;\n if (!allowNegative && sign !== '-') next = Math.max(0, next);\n if (sign === '-') next = Math.min(0, next);\n handleValueChange(next);\n }\n\n function handleKeyDown(e: React.KeyboardEvent<HTMLInputElement>) {\n if (readOnly) { onKeyDownProp?.(e); return; }\n if (e.key === 'ArrowUp') {\n e.preventDefault();\n handleStep(e.shiftKey ? step * 10 : step);\n return;\n }\n if (e.key === 'ArrowDown') {\n e.preventDefault();\n handleStep(e.shiftKey ? -step * 10 : -step);\n return;\n }\n onKeyDownProp?.(e);\n }\n\n const resolvedPrefix = sign === '-' ? '-' : sign === '+' ? '+' : prefix;\n\n const arrowSuffix = showArrows && !readOnly ? (\n <div className={styles.arrows}>\n <InteractableDiv\n className={styles.arrowBtn}\n tabIndex={-1}\n onMouseDown={(e) => { e.preventDefault(); handleStep(e.shiftKey ? step * 10 : step); }}\n >\n <FontAwesomeIcon icon={faChevronUp} />\n </InteractableDiv>\n <InteractableDiv\n className={styles.arrowBtn}\n tabIndex={-1}\n onMouseDown={(e) => { e.preventDefault(); handleStep(e.shiftKey ? -step * 10 : -step); }}\n >\n <FontAwesomeIcon icon={faChevronDown} />\n </InteractableDiv>\n </div>\n ) : null;\n\n return (\n <Input\n label={label}\n className={cx(styles.numberInput, className)}\n value={controlledValue}\n onChange={() => {}}\n formValidator={null}\n isValid={formValidator ? (formValidator.touched ? !formValidator.hasError() : true) : !error}\n errorMessage={formValidator ? (formValidator.getCurrentErrorMessage() ?? '') : (error ?? '')}\n placeholder={placeholder}\n readOnly={readOnly}\n suffix={arrowSuffix}\n customInput={\n <NumericFormat\n onValueChange={(vals) => handleValueChange(vals.floatValue)}\n allowNegative={sign != null ? false : allowNegative}\n decimalSeparator={decimalSeparator}\n thousandSeparator={thousandSeparator}\n decimalScale={decimalScale}\n fixedDecimalScale={fixedDecimalScale}\n prefix={resolvedPrefix}\n suffix={suffix}\n onKeyDown={showArrows ? handleKeyDown : onKeyDownProp}\n {...rest}\n />\n }\n />\n );\n}\n\nexport default NumberInput;\n"],"mappings":"0eA2CA,SAAS,EAAY,EAAuC,CAC1D,GAAM,CACN,QACA,WACA,gBACA,QACA,QACA,YACA,gBAAgB,GAChB,mBACA,oBACA,SACA,SACA,eACA,oBAAoB,GACpB,cACA,OACA,aAAa,GACb,OAAO,EACP,WAAW,GACX,UAAW,EACX,GAAG,GACC,EAAqB,cAAe,CAAK,EACvC,EAAW,GAAiB,KAAgD,EAAzC,EAAc,MAEjD,EAAe,GAAQ,MAAQ,GAAY,KAAO,KAAK,IAAI,OAAO,CAAQ,CAAC,EAAI,EAC/E,EAAkB,GAAgB,KAA8B,GAAvB,OAAO,CAAY,EAElE,SAAS,EAAkB,EAAgC,CACzD,IAAI,EAAM,EACN,IAAQ,IAAA,KACN,IAAS,MAAK,EAAM,CAAC,KAAK,IAAI,CAAG,GACjC,IAAS,MAAK,EAAO,KAAK,IAAI,CAAG,IAEnC,GAAqC,IAAI,GAAO,IAAI,EACxD,IAAW,CAAG,CAChB,CAEA,SAAS,EAAW,EAAe,CACjC,GAAI,EAAU,OAEd,IAAI,GADY,GAAY,MAAQ,IAAa,GAAK,OAAO,CAAQ,EAAI,GACpD,EACjB,CAAC,GAAiB,IAAS,MAAK,EAAO,KAAK,IAAI,EAAG,CAAI,GACvD,IAAS,MAAK,EAAO,KAAK,IAAI,EAAG,CAAI,GACzC,EAAkB,CAAI,CACxB,CAEA,SAAS,EAAc,EAA0C,CAC/D,GAAI,EAAU,CAAE,IAAgB,CAAC,EAAG,MAAQ,CAC5C,GAAI,EAAE,MAAQ,UAAW,CACvB,EAAE,eAAe,EACjB,EAAW,EAAE,SAAW,EAAO,GAAK,CAAI,EACxC,MACF,CACA,GAAI,EAAE,MAAQ,YAAa,CACzB,EAAE,eAAe,EACjB,EAAW,EAAE,SAAW,CAAC,EAAO,GAAK,CAAC,CAAI,EAC1C,MACF,CACA,IAAgB,CAAC,CACnB,CAEA,IAAM,EAAiB,IAAS,IAAM,IAAM,IAAS,IAAM,IAAM,EAE3D,EAAc,GAAc,CAAC,EACjC,EAAC,MAAD,CAAK,UAAW,EAAO,gBAAvB,CACE,EAAC,EAAD,CACE,UAAW,EAAO,SAClB,SAAU,GACV,YAAc,GAAM,CAAE,EAAE,eAAe,EAAG,EAAW,EAAE,SAAW,EAAO,GAAK,CAAI,CAAG,WAErF,EAAC,EAAD,CAAiB,KAAM,CAAc,CAAA,CACtB,CAAA,EACjB,EAAC,EAAD,CACE,UAAW,EAAO,SAClB,SAAU,GACV,YAAc,GAAM,CAAE,EAAE,eAAe,EAAG,EAAW,EAAE,SAAW,CAAC,EAAO,GAAK,CAAC,CAAI,CAAG,WAEvF,EAAC,EAAD,CAAiB,KAAM,CAAgB,CAAA,CACxB,CAAA,CACd,IACH,KAEJ,OACE,EAAC,EAAD,CACS,QACP,UAAW,EAAG,EAAO,YAAa,CAAS,EAC3C,MAAO,EACP,aAAgB,CAAC,EACjB,cAAe,KACf,QAAS,EAAiB,EAAc,QAAU,CAAC,EAAc,SAAS,EAAI,GAAQ,CAAC,EACvF,aAAc,EAAiB,EAAc,uBAAuB,GAAK,GAAO,GAAS,GAC5E,cACH,WACV,OAAQ,EACR,YACE,EAAC,EAAD,CACE,cAAgB,GAAS,EAAkB,EAAK,UAAU,EAC1D,cAAe,GAAQ,KAAe,EAAR,GACZ,mBACC,oBACL,eACK,oBACnB,OAAQ,EACA,SACR,UAAW,EAAa,EAAgB,EACxC,GAAI,CACL,CAAA,CAEJ,CAAA,CAEL"}
1
+ {"version":3,"file":"numberInput.mjs","names":[],"sources":["../../../../package/common/numberInput/numberInput.tsx"],"sourcesContent":["import type { ReactElement } from 'react';\nimport React from 'react';\nimport cx from 'classnames';\nimport { NumericFormat, NumericFormatProps } from 'react-number-format';\nimport type { FormValidator } from 'services/formValidation';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { faChevronUp, faChevronDown } from '@fortawesome/free-solid-svg-icons';\n\nimport styles from './numberInput.module.pcss';\nimport Input from '../input';\nimport InteractableDiv from '../interactableDiv';\nimport { useComponentDefaults } from '../configProvider';\n\nexport interface NumberInputProps\n extends Omit<NumericFormatProps, 'onValueChange' | 'value' | 'customInput' | 'onChange' | 'step' | 'onKeyDown'> {\n value?: number | string;\n onChange?: (value: number | undefined) => void;\n formValidator?: FormValidator | null;\n label?: string;\n error?: string;\n className?: string;\n allowNegative?: boolean;\n decimalSeparator?: string;\n thousandSeparator?: string | boolean;\n prefix?: string;\n suffix?: string;\n decimalScale?: number;\n /**\n * Whether to pad the value to exactly `decimalScale` decimals. Default `true`\n * (e.g. with `decimalScale={2}`, `12` displays as `12.00`). Set `false` to make\n * `decimalScale` an upper limit only — the user may type fewer decimals and they\n * are kept as-is (`12` stays `12`, `12.1` stays `12.1`), while anything beyond\n * `decimalScale` is still truncated.\n */\n fixedDecimalScale?: boolean;\n placeholder?: string;\n sign?: '+' | '-';\n showArrows?: boolean;\n step?: number;\n readOnly?: boolean;\n onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;\n}\n\nfunction NumberInput(props: NumberInputProps): ReactElement {\n const {\n value,\n onChange,\n formValidator,\n label,\n error,\n className,\n allowNegative = false,\n decimalSeparator,\n thousandSeparator,\n prefix,\n suffix,\n decimalScale,\n fixedDecimalScale = true,\n placeholder,\n sign,\n showArrows = false,\n step = 1,\n readOnly = false,\n onKeyDown: onKeyDownProp,\n ...rest\n } = useComponentDefaults('NumberInput', props);\n const rawValue = formValidator != null ? formValidator.value as number | string : value;\n // When a sign is forced, display the absolute value — the prefix character carries the sign visually.\n const displayValue = sign != null && rawValue != null ? Math.abs(Number(rawValue)) : rawValue;\n const controlledValue = displayValue != null ? String(displayValue) : '';\n\n function handleValueChange(floatValue: number | undefined) {\n let out = floatValue;\n if (out !== undefined) {\n if (sign === '-') out = -Math.abs(out);\n if (sign === '+') out = Math.abs(out);\n }\n if (formValidator != null) formValidator.set(out ?? null);\n onChange?.(out);\n }\n\n function handleStep(delta: number) {\n if (readOnly) return;\n const current = rawValue != null && rawValue !== '' ? Number(rawValue) : 0;\n let next = current + delta;\n if (!allowNegative && sign !== '-') next = Math.max(0, next);\n if (sign === '-') next = Math.min(0, next);\n handleValueChange(next);\n }\n\n function handleKeyDown(e: React.KeyboardEvent<HTMLInputElement>) {\n if (readOnly) { onKeyDownProp?.(e); return; }\n if (e.key === 'ArrowUp') {\n e.preventDefault();\n handleStep(e.shiftKey ? step * 10 : step);\n return;\n }\n if (e.key === 'ArrowDown') {\n e.preventDefault();\n handleStep(e.shiftKey ? -step * 10 : -step);\n return;\n }\n onKeyDownProp?.(e);\n }\n\n const resolvedPrefix = sign === '-' ? '-' : sign === '+' ? '+' : prefix;\n\n const arrowSuffix = showArrows && !readOnly ? (\n <div className={styles.arrows}>\n <InteractableDiv\n className={styles.arrowBtn}\n tabIndex={-1}\n onMouseDown={(e) => { e.preventDefault(); handleStep(e.shiftKey ? step * 10 : step); }}\n >\n <FontAwesomeIcon icon={faChevronUp} />\n </InteractableDiv>\n <InteractableDiv\n className={styles.arrowBtn}\n tabIndex={-1}\n onMouseDown={(e) => { e.preventDefault(); handleStep(e.shiftKey ? -step * 10 : -step); }}\n >\n <FontAwesomeIcon icon={faChevronDown} />\n </InteractableDiv>\n </div>\n ) : null;\n\n return (\n <Input\n label={label}\n className={cx(styles.numberInput, className)}\n value={controlledValue}\n onChange={() => {}}\n formValidator={null}\n isValid={formValidator ? (formValidator.touched ? !formValidator.hasError() : true) : !error}\n errorMessage={formValidator ? (formValidator.getCurrentErrorMessage() ?? '') : (error ?? '')}\n placeholder={placeholder}\n readOnly={readOnly}\n suffix={arrowSuffix}\n inputMode={decimalScale === 0 ? 'numeric' : 'decimal'}\n customInput={\n <NumericFormat\n onValueChange={(vals) => handleValueChange(vals.floatValue)}\n allowNegative={sign != null ? false : allowNegative}\n decimalSeparator={decimalSeparator}\n thousandSeparator={thousandSeparator}\n decimalScale={decimalScale}\n fixedDecimalScale={fixedDecimalScale}\n prefix={resolvedPrefix}\n suffix={suffix}\n onKeyDown={showArrows ? handleKeyDown : onKeyDownProp}\n {...rest}\n />\n }\n />\n );\n}\n\nexport default NumberInput;\n"],"mappings":"0eA2CA,SAAS,EAAY,EAAuC,CAC1D,GAAM,CACN,QACA,WACA,gBACA,QACA,QACA,YACA,gBAAgB,GAChB,mBACA,oBACA,SACA,SACA,eACA,oBAAoB,GACpB,cACA,OACA,aAAa,GACb,OAAO,EACP,WAAW,GACX,UAAW,EACX,GAAG,GACC,EAAqB,cAAe,CAAK,EACvC,EAAW,GAAiB,KAAgD,EAAzC,EAAc,MAEjD,EAAe,GAAQ,MAAQ,GAAY,KAAO,KAAK,IAAI,OAAO,CAAQ,CAAC,EAAI,EAC/E,EAAkB,GAAgB,KAA8B,GAAvB,OAAO,CAAY,EAElE,SAAS,EAAkB,EAAgC,CACzD,IAAI,EAAM,EACN,IAAQ,IAAA,KACN,IAAS,MAAK,EAAM,CAAC,KAAK,IAAI,CAAG,GACjC,IAAS,MAAK,EAAO,KAAK,IAAI,CAAG,IAEnC,GAAqC,IAAI,GAAO,IAAI,EACxD,IAAW,CAAG,CAChB,CAEA,SAAS,EAAW,EAAe,CACjC,GAAI,EAAU,OAEd,IAAI,GADY,GAAY,MAAQ,IAAa,GAAK,OAAO,CAAQ,EAAI,GACpD,EACjB,CAAC,GAAiB,IAAS,MAAK,EAAO,KAAK,IAAI,EAAG,CAAI,GACvD,IAAS,MAAK,EAAO,KAAK,IAAI,EAAG,CAAI,GACzC,EAAkB,CAAI,CACxB,CAEA,SAAS,EAAc,EAA0C,CAC/D,GAAI,EAAU,CAAE,IAAgB,CAAC,EAAG,MAAQ,CAC5C,GAAI,EAAE,MAAQ,UAAW,CACvB,EAAE,eAAe,EACjB,EAAW,EAAE,SAAW,EAAO,GAAK,CAAI,EACxC,MACF,CACA,GAAI,EAAE,MAAQ,YAAa,CACzB,EAAE,eAAe,EACjB,EAAW,EAAE,SAAW,CAAC,EAAO,GAAK,CAAC,CAAI,EAC1C,MACF,CACA,IAAgB,CAAC,CACnB,CAEA,IAAM,EAAiB,IAAS,IAAM,IAAM,IAAS,IAAM,IAAM,EAE3D,EAAc,GAAc,CAAC,EACjC,EAAC,MAAD,CAAK,UAAW,EAAO,gBAAvB,CACE,EAAC,EAAD,CACE,UAAW,EAAO,SAClB,SAAU,GACV,YAAc,GAAM,CAAE,EAAE,eAAe,EAAG,EAAW,EAAE,SAAW,EAAO,GAAK,CAAI,CAAG,WAErF,EAAC,EAAD,CAAiB,KAAM,CAAc,CAAA,CACtB,CAAA,EACjB,EAAC,EAAD,CACE,UAAW,EAAO,SAClB,SAAU,GACV,YAAc,GAAM,CAAE,EAAE,eAAe,EAAG,EAAW,EAAE,SAAW,CAAC,EAAO,GAAK,CAAC,CAAI,CAAG,WAEvF,EAAC,EAAD,CAAiB,KAAM,CAAgB,CAAA,CACxB,CAAA,CACd,IACH,KAEJ,OACE,EAAC,EAAD,CACS,QACP,UAAW,EAAG,EAAO,YAAa,CAAS,EAC3C,MAAO,EACP,aAAgB,CAAC,EACjB,cAAe,KACf,QAAS,EAAiB,EAAc,QAAU,CAAC,EAAc,SAAS,EAAI,GAAQ,CAAC,EACvF,aAAc,EAAiB,EAAc,uBAAuB,GAAK,GAAO,GAAS,GAC5E,cACH,WACV,OAAQ,EACR,UAAW,IAAiB,EAAI,UAAY,UAC5C,YACE,EAAC,EAAD,CACE,cAAgB,GAAS,EAAkB,EAAK,UAAU,EAC1D,cAAe,GAAQ,KAAe,EAAR,GACZ,mBACC,oBACL,eACK,oBACnB,OAAQ,EACA,SACR,UAAW,EAAa,EAAgB,EACxC,GAAI,CACL,CAAA,CAEJ,CAAA,CAEL"}
@@ -1,2 +1,2 @@
1
- import e from"../bodyEnd/bodyEnd.mjs";import t from"./popover.module.mjs";import{PopoverAlign as n,PopoverPlacement as r,PopoverTrigger as i}from"./popover.types.mjs";import{usePopoverPosition as a}from"./usePopoverPosition.mjs";import{useCallback as o,useEffect as s,useRef as c,useState as l}from"react";import u from"classnames";import{jsx as d,jsxs as f}from"react/jsx-runtime";var p=[`a[href]`,`area[href]`,`button:not([disabled])`,`input:not([disabled])`,`select:not([disabled])`,`textarea:not([disabled])`,`[tabindex]:not([tabindex="-1"])`,`[contenteditable="true"]`].join(`,`);function m(e){return e?Array.from(e.querySelectorAll(p)):[]}function h({children:p=null,content:h=null,placement:g=r.Bottom,align:_=n.Center,trigger:v=i.Click,isOpen:y,defaultOpen:b=!1,onOpenChange:x=()=>{},offset:S=10,withArrow:C=!0,closeOnOutsideClick:w=!0,closeOnEscape:T=!0,openDelay:E=100,closeDelay:D=120,disabled:O=!1,className:k,style:A,classNames:j,styles:M,...N}){let P=c(null),F=c(null),I=c(null),L=c(null),R=c(void 0),z=y!==void 0,[B,V]=l(b),H=z?y:B,U=c(x);s(()=>{U.current=x});let W=o(e=>{O&&e||(z||V(e),U.current(e))},[O,z]);a({isOpen:!!H,placement:g,align:_,offset:S,triggerRef:P,floatingRef:F,panelRef:I,arrowRef:C?L:{current:null}});function G(){return m(P.current)[0]??P.current}function K(){G()?.focus()}function q(){let e=m(document.body).filter(e=>!F.current?.contains(e)),t=G(),n=t?e.indexOf(t):-1;n>=0&&e[n+1]?.focus()}s(()=>{if(!H||v!==i.Click)return;let e=m(I.current);e.length!==0&&(F.current?.setAttribute(`role`,`dialog`),e[0].focus())},[H,v]);function J(e){if(e.key!==`Tab`||v!==i.Click)return;let t=m(I.current);if(t.length===0)return;let n=document.activeElement;!e.shiftKey&&n===t[t.length-1]?(e.preventDefault(),q(),W(!1)):e.shiftKey&&n===t[0]&&(e.preventDefault(),K(),W(!1))}s(()=>{if(!H)return;function e(e){let t=e.target,n=F.current?.contains(t),r=P.current?.contains(t);!n&&!r&&W(!1)}function t(e){e.key===`Escape`&&(F.current?.contains(document.activeElement)&&(m(P.current)[0]??P.current)?.focus(),W(!1))}function n(e){let t=e.target,n=F.current?.contains(t),r=P.current?.contains(t);!n&&!r&&W(!1)}return w&&v!==i.Hover&&(window.addEventListener(`mouseup`,e),document.addEventListener(`focusin`,n)),T&&window.addEventListener(`keydown`,t),()=>{window.removeEventListener(`mouseup`,e),document.removeEventListener(`focusin`,n),window.removeEventListener(`keydown`,t)}},[H,w,T,v,W]),s(()=>()=>clearTimeout(R.current),[]);function Y(e){clearTimeout(R.current),R.current=setTimeout(()=>W(e),e?E:D)}let X=v===i.Click?{onClick:()=>W(!H)}:v===i.Hover?{onMouseEnter:()=>Y(!0),onMouseLeave:()=>Y(!1)}:{onFocus:()=>W(!0),onBlur:()=>W(!1)},Z=v===i.Hover?{onMouseEnter:()=>Y(!0),onMouseLeave:()=>Y(!1)}:{};return f(`div`,{...N,className:u(t.popover,k,j?.root),style:{...A,...M?.root},children:[d(`div`,{ref:P,className:u(t.popoverTrigger,j?.trigger),style:M?.trigger,...X,children:p}),H&&d(e,{children:f(`div`,{ref:F,className:u(t.popoverFloating,j?.floating),style:M?.floating,"data-placement":g,onKeyDown:J,...Z,children:[d(`div`,{ref:I,className:u(t.popoverPanel,j?.panel),style:M?.panel,children:h}),C&&d(`div`,{ref:L,className:u(t.popoverArrow,j?.arrow),style:M?.arrow})]})})]})}export{h as default};
1
+ import e from"../bodyEnd/bodyEnd.mjs";import{tabbablesIn as t,useFocusBoundary as n}from"../hooks/useFocusBoundary.mjs";import r from"./popover.module.mjs";import{PopoverAlign as i,PopoverPlacement as a,PopoverTrigger as o}from"./popover.types.mjs";import{usePopoverPosition as s}from"./usePopoverPosition.mjs";import{useCallback as c,useEffect as l,useRef as u,useState as d}from"react";import f from"classnames";import{jsx as p,jsxs as m}from"react/jsx-runtime";function h({children:h=null,content:g=null,placement:_=a.Bottom,align:v=i.Center,trigger:y=o.Click,isOpen:b,defaultOpen:x=!1,onOpenChange:S=()=>{},offset:C=10,withArrow:w=!0,closeOnOutsideClick:T=!0,closeOnEscape:E=!0,openDelay:D=100,closeDelay:O=120,disabled:k=!1,className:A,style:j,classNames:M,styles:N,...P}){let F=u(null),I=u(null),L=u(null),R=u(null),z=u(void 0),B=b!==void 0,[V,H]=d(x),U=B?b:V,W=u(S);l(()=>{W.current=S});let G=c(e=>{k&&e||(B||H(e),W.current(e))},[k,B]);s({isOpen:!!U,placement:_,align:v,offset:C,triggerRef:F,floatingRef:I,panelRef:L,arrowRef:w?R:{current:null}});let{restoreFocusToTrigger:K,focusAfterTrigger:q}=n({triggerRef:F,contentRef:I});l(()=>{if(!U||y!==o.Click)return;let e=t(L.current);e.length!==0&&(I.current?.setAttribute(`role`,`dialog`),e[0].focus())},[U,y]);function J(e){if(e.key!==`Tab`||y!==o.Click)return;let n=t(L.current);if(n.length===0)return;let r=document.activeElement;!e.shiftKey&&r===n[n.length-1]?(e.preventDefault(),q(),G(!1)):e.shiftKey&&r===n[0]&&(e.preventDefault(),K(),G(!1))}l(()=>{if(!U)return;function e(e){let t=e.target,n=I.current?.contains(t),r=F.current?.contains(t);!n&&!r&&G(!1)}function n(e){e.key===`Escape`&&(I.current?.contains(document.activeElement)&&(t(F.current)[0]??F.current)?.focus(),G(!1))}function r(e){let t=e.target,n=I.current?.contains(t),r=F.current?.contains(t);!n&&!r&&G(!1)}return T&&y!==o.Hover&&(window.addEventListener(`mouseup`,e),document.addEventListener(`focusin`,r)),E&&window.addEventListener(`keydown`,n),()=>{window.removeEventListener(`mouseup`,e),document.removeEventListener(`focusin`,r),window.removeEventListener(`keydown`,n)}},[U,T,E,y,G]),l(()=>()=>clearTimeout(z.current),[]);function Y(e){clearTimeout(z.current),z.current=setTimeout(()=>G(e),e?D:O)}let X=y===o.Click?{onClick:()=>G(!U)}:y===o.Hover?{onMouseEnter:()=>Y(!0),onMouseLeave:()=>Y(!1)}:{onFocus:()=>G(!0),onBlur:()=>G(!1)},Z=y===o.Hover?{onMouseEnter:()=>Y(!0),onMouseLeave:()=>Y(!1)}:{};return m(`div`,{...P,className:f(r.popover,A,M?.root),style:{...j,...N?.root},children:[p(`div`,{ref:F,className:f(r.popoverTrigger,M?.trigger),style:N?.trigger,...X,children:h}),U&&p(e,{children:m(`div`,{ref:I,className:f(r.popoverFloating,M?.floating),style:N?.floating,"data-placement":_,onKeyDown:J,...Z,children:[p(`div`,{ref:L,className:f(r.popoverPanel,M?.panel),style:N?.panel,children:g}),w&&p(`div`,{ref:R,className:f(r.popoverArrow,M?.arrow),style:N?.arrow})]})})]})}export{h as default};
2
2
  //# sourceMappingURL=popover.mjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"popover.mjs","names":[],"sources":["../../../../package/common/popover/popover.tsx"],"sourcesContent":["import { useRef, useEffect, useState, useCallback } from 'react';\nimport cx from 'classnames';\nimport BodyEnd from 'components/common/bodyEnd';\n\nimport styles from './popover.module.pcss';\nimport { usePopoverPosition } from './usePopoverPosition';\nimport { PopoverPlacement, PopoverAlign, PopoverTrigger, type PopoverProps } from './popover.types';\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. */\nfunction tabbablesIn(root: ParentNode | null): HTMLElement[] {\n if (!root) return [];\n return Array.from(root.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR));\n}\n\nfunction Popover({\n children = null,\n content = null,\n placement = PopoverPlacement.Bottom,\n align = PopoverAlign.Center,\n trigger = PopoverTrigger.Click,\n isOpen,\n defaultOpen = false,\n onOpenChange = () => {},\n offset = 10,\n withArrow = true,\n closeOnOutsideClick = true,\n closeOnEscape = true,\n openDelay = 100,\n closeDelay = 120,\n disabled = false,\n className,\n style,\n classNames,\n styles: slotStyles,\n ...rest\n}: PopoverProps) {\n const triggerRef = useRef<HTMLDivElement>(null);\n const floatingRef = useRef<HTMLDivElement>(null);\n const panelRef = useRef<HTMLDivElement>(null);\n const arrowRef = useRef<HTMLDivElement>(null);\n const hoverTimer = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);\n\n const isControlled = isOpen !== undefined;\n const [internalOpen, setInternalOpen] = useState(defaultOpen);\n const open = isControlled ? isOpen : internalOpen;\n\n // Keep the outside-click/Escape listeners pointed at the latest setter without re-subscribing.\n const onOpenChangeRef = useRef(onOpenChange);\n useEffect(() => { onOpenChangeRef.current = onOpenChange; });\n\n const setOpen = useCallback((next: boolean) => {\n if (disabled && next) return;\n if (!isControlled) setInternalOpen(next);\n onOpenChangeRef.current(next);\n }, [disabled, isControlled]);\n\n usePopoverPosition({\n isOpen: !!open,\n placement,\n align,\n offset,\n triggerRef,\n floatingRef,\n panelRef,\n arrowRef: withArrow ? arrowRef : { current: null },\n });\n\n function firstTriggerFocusable(): HTMLElement | null {\n return tabbablesIn(triggerRef.current)[0] ?? triggerRef.current;\n }\n\n // Hand focus back to the trigger — used on Escape and on Shift+Tab out of the panel top.\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 panel — the \"natural next\" stop when Tab exits the bottom of the panel.\n function focusAfterTrigger() {\n const all = tabbablesIn(document.body).filter((el) => !floatingRef.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 // The panel is portaled to the end of the DOM, so Tab never flows into it naturally. When we\n // manage focus (click trigger + focusable content), move focus in on open and, on Tab out of\n // either end, close and continue focus as if the panel sat right after the trigger.\n useEffect(() => {\n if (!open || trigger !== PopoverTrigger.Click) return;\n const focusables = tabbablesIn(panelRef.current);\n if (focusables.length === 0) return;\n // Only claim the dialog role when we're actually managing focus for real content.\n floatingRef.current?.setAttribute('role', 'dialog');\n focusables[0].focus();\n }, [open, trigger]);\n\n function handleFloatingKeyDown(event: React.KeyboardEvent) {\n if (event.key !== 'Tab' || trigger !== PopoverTrigger.Click) return;\n const focusables = tabbablesIn(panelRef.current);\n if (focusables.length === 0) return;\n const active = document.activeElement;\n if (!event.shiftKey && active === focusables[focusables.length - 1]) {\n event.preventDefault();\n focusAfterTrigger();\n setOpen(false);\n } else if (event.shiftKey && active === focusables[0]) {\n event.preventDefault();\n restoreFocusToTrigger();\n setOpen(false);\n }\n }\n\n // Outside click + Escape. Registered only while open and only for the relevant trigger mode.\n useEffect(() => {\n if (!open) return;\n\n function onMouseUp(event: MouseEvent) {\n const target = event.target as Node;\n const inPanel = floatingRef.current?.contains(target);\n const inTrigger = triggerRef.current?.contains(target);\n if (!inPanel && !inTrigger) setOpen(false);\n }\n function onKeyDown(event: KeyboardEvent) {\n if (event.key !== 'Escape') return;\n // Hand focus back to the trigger when it currently sits inside the panel.\n if (floatingRef.current?.contains(document.activeElement)) {\n (tabbablesIn(triggerRef.current)[0] ?? triggerRef.current)?.focus();\n }\n setOpen(false);\n }\n // Keyboard counterpart to the outside click: once focus leaves both the trigger\n // and the (portaled) panel — e.g. tabbing on to the next element — close.\n function onFocusIn(event: FocusEvent) {\n const target = event.target as Node;\n const inPanel = floatingRef.current?.contains(target);\n const inTrigger = triggerRef.current?.contains(target);\n if (!inPanel && !inTrigger) setOpen(false);\n }\n\n if (closeOnOutsideClick && trigger !== PopoverTrigger.Hover) {\n window.addEventListener('mouseup', onMouseUp);\n document.addEventListener('focusin', onFocusIn);\n }\n if (closeOnEscape) window.addEventListener('keydown', onKeyDown);\n return () => {\n window.removeEventListener('mouseup', onMouseUp);\n document.removeEventListener('focusin', onFocusIn);\n window.removeEventListener('keydown', onKeyDown);\n };\n }, [open, closeOnOutsideClick, closeOnEscape, trigger, setOpen]);\n\n useEffect(() => () => clearTimeout(hoverTimer.current), []);\n\n function scheduleHover(next: boolean) {\n clearTimeout(hoverTimer.current);\n hoverTimer.current = setTimeout(() => setOpen(next), next ? openDelay : closeDelay);\n }\n\n const triggerHandlers =\n trigger === PopoverTrigger.Click\n ? { onClick: () => setOpen(!open) }\n : trigger === PopoverTrigger.Hover\n ? { onMouseEnter: () => scheduleHover(true), onMouseLeave: () => scheduleHover(false) }\n : { onFocus: () => setOpen(true), onBlur: () => setOpen(false) };\n\n const floatingHoverHandlers =\n trigger === PopoverTrigger.Hover\n ? { onMouseEnter: () => scheduleHover(true), onMouseLeave: () => scheduleHover(false) }\n : {};\n\n return (\n <div\n {...rest}\n className={cx(styles.popover, className, classNames?.root)}\n style={{ ...style, ...slotStyles?.root }}\n >\n <div\n ref={triggerRef}\n className={cx(styles.popoverTrigger, classNames?.trigger)}\n style={slotStyles?.trigger}\n {...triggerHandlers}\n >\n {children}\n </div>\n {open && (\n <BodyEnd>\n <div\n ref={floatingRef}\n className={cx(styles.popoverFloating, classNames?.floating)}\n style={slotStyles?.floating}\n data-placement={placement}\n onKeyDown={handleFloatingKeyDown}\n {...floatingHoverHandlers}\n >\n <div\n ref={panelRef}\n className={cx(styles.popoverPanel, classNames?.panel)}\n style={slotStyles?.panel}\n >\n {content}\n </div>\n {withArrow && (\n <div\n ref={arrowRef}\n className={cx(styles.popoverArrow, classNames?.arrow)}\n style={slotStyles?.arrow}\n />\n )}\n </div>\n </BodyEnd>\n )}\n </div>\n );\n}\n\nexport default Popover;\n"],"mappings":"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"}
1
+ {"version":3,"file":"popover.mjs","names":[],"sources":["../../../../package/common/popover/popover.tsx"],"sourcesContent":["import { useRef, useEffect, useState, useCallback } from 'react';\nimport cx from 'classnames';\nimport BodyEnd from 'components/common/bodyEnd';\n\nimport styles from './popover.module.pcss';\nimport { usePopoverPosition } from './usePopoverPosition';\nimport { useFocusBoundary, tabbablesIn } from '../hooks/useFocusBoundary';\nimport { PopoverPlacement, PopoverAlign, PopoverTrigger, type PopoverProps } from './popover.types';\n\nfunction Popover({\n children = null,\n content = null,\n placement = PopoverPlacement.Bottom,\n align = PopoverAlign.Center,\n trigger = PopoverTrigger.Click,\n isOpen,\n defaultOpen = false,\n onOpenChange = () => {},\n offset = 10,\n withArrow = true,\n closeOnOutsideClick = true,\n closeOnEscape = true,\n openDelay = 100,\n closeDelay = 120,\n disabled = false,\n className,\n style,\n classNames,\n styles: slotStyles,\n ...rest\n}: PopoverProps) {\n const triggerRef = useRef<HTMLDivElement>(null);\n const floatingRef = useRef<HTMLDivElement>(null);\n const panelRef = useRef<HTMLDivElement>(null);\n const arrowRef = useRef<HTMLDivElement>(null);\n const hoverTimer = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);\n\n const isControlled = isOpen !== undefined;\n const [internalOpen, setInternalOpen] = useState(defaultOpen);\n const open = isControlled ? isOpen : internalOpen;\n\n // Keep the outside-click/Escape listeners pointed at the latest setter without re-subscribing.\n const onOpenChangeRef = useRef(onOpenChange);\n useEffect(() => { onOpenChangeRef.current = onOpenChange; });\n\n const setOpen = useCallback((next: boolean) => {\n if (disabled && next) return;\n if (!isControlled) setInternalOpen(next);\n onOpenChangeRef.current(next);\n }, [disabled, isControlled]);\n\n usePopoverPosition({\n isOpen: !!open,\n placement,\n align,\n offset,\n triggerRef,\n floatingRef,\n panelRef,\n arrowRef: withArrow ? arrowRef : { current: null },\n });\n\n const { restoreFocusToTrigger, focusAfterTrigger } = useFocusBoundary({\n triggerRef,\n contentRef: floatingRef,\n });\n\n // The panel is portaled to the end of the DOM, so Tab never flows into it naturally. When we\n // manage focus (click trigger + focusable content), move focus in on open and, on Tab out of\n // either end, close and continue focus as if the panel sat right after the trigger.\n useEffect(() => {\n if (!open || trigger !== PopoverTrigger.Click) return;\n const focusables = tabbablesIn(panelRef.current);\n if (focusables.length === 0) return;\n // Only claim the dialog role when we're actually managing focus for real content.\n floatingRef.current?.setAttribute('role', 'dialog');\n focusables[0].focus();\n }, [open, trigger]);\n\n function handleFloatingKeyDown(event: React.KeyboardEvent) {\n if (event.key !== 'Tab' || trigger !== PopoverTrigger.Click) return;\n const focusables = tabbablesIn(panelRef.current);\n if (focusables.length === 0) return;\n const active = document.activeElement;\n if (!event.shiftKey && active === focusables[focusables.length - 1]) {\n event.preventDefault();\n focusAfterTrigger();\n setOpen(false);\n } else if (event.shiftKey && active === focusables[0]) {\n event.preventDefault();\n restoreFocusToTrigger();\n setOpen(false);\n }\n }\n\n // Outside click + Escape. Registered only while open and only for the relevant trigger mode.\n useEffect(() => {\n if (!open) return;\n\n function onMouseUp(event: MouseEvent) {\n const target = event.target as Node;\n const inPanel = floatingRef.current?.contains(target);\n const inTrigger = triggerRef.current?.contains(target);\n if (!inPanel && !inTrigger) setOpen(false);\n }\n function onKeyDown(event: KeyboardEvent) {\n if (event.key !== 'Escape') return;\n // Hand focus back to the trigger when it currently sits inside the panel.\n if (floatingRef.current?.contains(document.activeElement)) {\n (tabbablesIn(triggerRef.current)[0] ?? triggerRef.current)?.focus();\n }\n setOpen(false);\n }\n // Keyboard counterpart to the outside click: once focus leaves both the trigger\n // and the (portaled) panel — e.g. tabbing on to the next element — close.\n function onFocusIn(event: FocusEvent) {\n const target = event.target as Node;\n const inPanel = floatingRef.current?.contains(target);\n const inTrigger = triggerRef.current?.contains(target);\n if (!inPanel && !inTrigger) setOpen(false);\n }\n\n if (closeOnOutsideClick && trigger !== PopoverTrigger.Hover) {\n window.addEventListener('mouseup', onMouseUp);\n document.addEventListener('focusin', onFocusIn);\n }\n if (closeOnEscape) window.addEventListener('keydown', onKeyDown);\n return () => {\n window.removeEventListener('mouseup', onMouseUp);\n document.removeEventListener('focusin', onFocusIn);\n window.removeEventListener('keydown', onKeyDown);\n };\n }, [open, closeOnOutsideClick, closeOnEscape, trigger, setOpen]);\n\n useEffect(() => () => clearTimeout(hoverTimer.current), []);\n\n function scheduleHover(next: boolean) {\n clearTimeout(hoverTimer.current);\n hoverTimer.current = setTimeout(() => setOpen(next), next ? openDelay : closeDelay);\n }\n\n const triggerHandlers =\n trigger === PopoverTrigger.Click\n ? { onClick: () => setOpen(!open) }\n : trigger === PopoverTrigger.Hover\n ? { onMouseEnter: () => scheduleHover(true), onMouseLeave: () => scheduleHover(false) }\n : { onFocus: () => setOpen(true), onBlur: () => setOpen(false) };\n\n const floatingHoverHandlers =\n trigger === PopoverTrigger.Hover\n ? { onMouseEnter: () => scheduleHover(true), onMouseLeave: () => scheduleHover(false) }\n : {};\n\n return (\n <div\n {...rest}\n className={cx(styles.popover, className, classNames?.root)}\n style={{ ...style, ...slotStyles?.root }}\n >\n <div\n ref={triggerRef}\n className={cx(styles.popoverTrigger, classNames?.trigger)}\n style={slotStyles?.trigger}\n {...triggerHandlers}\n >\n {children}\n </div>\n {open && (\n <BodyEnd>\n <div\n ref={floatingRef}\n className={cx(styles.popoverFloating, classNames?.floating)}\n style={slotStyles?.floating}\n data-placement={placement}\n onKeyDown={handleFloatingKeyDown}\n {...floatingHoverHandlers}\n >\n <div\n ref={panelRef}\n className={cx(styles.popoverPanel, classNames?.panel)}\n style={slotStyles?.panel}\n >\n {content}\n </div>\n {withArrow && (\n <div\n ref={arrowRef}\n className={cx(styles.popoverArrow, classNames?.arrow)}\n style={slotStyles?.arrow}\n />\n )}\n </div>\n </BodyEnd>\n )}\n </div>\n );\n}\n\nexport default Popover;\n"],"mappings":"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"}
@@ -0,0 +1,2 @@
1
+ import{useComponentDefaults as e}from"../configProvider/useComponentDefaults.mjs";import t from"./rating.module.mjs";import{useRef as n,useState as r}from"react";import i from"classnames";import{FontAwesomeIcon as a}from"@fortawesome/react-fontawesome";import{faStar as o}from"@fortawesome/free-solid-svg-icons";import{jsx as s,jsxs as c}from"react/jsx-runtime";var l=4;function u(e,t){return Math.max(0,Math.min(t,e))}function d(d){let{value:f,defaultValue:p=0,onChange:m=()=>{},max:h=5,allowHalf:g=!1,allowClear:_=!0,readOnly:v=!1,disabled:y=!1,icon:b=o,"aria-label":x=`Rating`,className:S,style:C,classNames:w,styles:T,...E}=e(`Rating`,d),D=f!==void 0,[O,k]=r(p),A=u(D?f:O,h),[j,M]=r(null),N=!v&&!y,P=j??A,F=n(null),I=n(A),L=n(!1),R=n(0),z=n(!1);function B(e){let t=u(e,h);D||k(t),m(t)}function V(e){let t=F.current?.getBoundingClientRect();if(!t||t.width===0)return null;let n=u((e-t.left)/t.width,1)*h;return g?Math.round(n*2)/2:Math.ceil(n)}function H(e){if(!N)return;e.currentTarget.setPointerCapture?.(e.pointerId),L.current=!0,z.current=!1,R.current=e.clientX,I.current=A;let t=V(e.clientX);t!==null&&M(t)}function U(e){if(!N)return;let t=V(e.clientX);t!==null&&(L.current&&(e.preventDefault(),Math.abs(e.clientX-R.current)>l&&(z.current=!0)),M(t))}function W(e){if(!N||!L.current)return;e.currentTarget.releasePointerCapture?.(e.pointerId),L.current=!1;let t=V(e.clientX)??j;t!==null&&B(!z.current&&_&&t===I.current?0:t),M(null)}function G(){!N||L.current||M(null)}function K(e){let t=g?.5:1;e.key===`ArrowRight`||e.key===`ArrowUp`?(e.preventDefault(),B(A+t)):e.key===`ArrowLeft`||e.key===`ArrowDown`?(e.preventDefault(),B(A-t)):e.key===`Home`?(e.preventDefault(),B(0)):e.key===`End`&&(e.preventDefault(),B(h))}return s(`div`,{...E,ref:F,role:`slider`,"aria-label":x,"aria-valuemin":0,"aria-valuemax":h,"aria-valuenow":A,"aria-valuetext":`${A} out of ${h}`,"aria-readonly":v||void 0,"aria-disabled":y||void 0,tabIndex:N?0:-1,className:i(t.rating,y&&t.ratingDisabled,v&&t.ratingReadOnly,w?.root,S),style:{...C,...T?.root},onKeyDown:N?K:void 0,onPointerDown:N?H:void 0,onPointerMove:N?U:void 0,onPointerUp:N?W:void 0,onPointerCancel:N?W:void 0,onPointerLeave:N?G:void 0,children:Array.from({length:h},(e,n)=>{let r=Math.round(Math.max(0,Math.min(1,P-n))*100);return c(`div`,{className:i(t.ratingItem,w?.item),style:T?.item,children:[s(a,{icon:b,className:i(t.ratingIconEmpty,w?.iconEmpty),style:T?.iconEmpty}),s(`div`,{className:t.ratingIconFilledClip,style:{width:`${r}%`},children:s(a,{icon:b,className:i(t.ratingIconFilled,w?.iconFilled),style:T?.iconFilled})})]},n)})})}export{d as default};
2
+ //# sourceMappingURL=rating.mjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"rating.mjs","names":[],"sources":["../../../../package/common/rating/rating.tsx"],"sourcesContent":["import { useRef, useState } from 'react';\nimport type { CSSProperties, ReactElement } from 'react';\nimport cx from 'classnames';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { faStar } from '@fortawesome/free-solid-svg-icons';\n\nimport { useComponentDefaults } from '../configProvider';\nimport type { RatingProps } from './rating.types';\n\nimport styles from './rating.module.pcss';\n\nconst DRAG_THRESHOLD = 4;\n\nfunction clampValue(value: number, max: number): number {\n return Math.max(0, Math.min(max, value));\n}\n\nfunction Rating(props: RatingProps): ReactElement {\n const {\n value: controlledValue,\n defaultValue = 0,\n onChange = () => {},\n max = 5,\n allowHalf = false,\n allowClear = true,\n readOnly = false,\n disabled = false,\n icon = faStar,\n 'aria-label': ariaLabel = 'Rating',\n className,\n style,\n classNames,\n styles: slotStyles,\n ...rest\n } = useComponentDefaults('Rating', props);\n\n const isControlled = controlledValue !== undefined;\n const [internalValue, setInternalValue] = useState(defaultValue);\n const value = clampValue(isControlled ? controlledValue! : internalValue, max);\n\n const [hoverValue, setHoverValue] = useState<number | null>(null);\n const isInteractive = !readOnly && !disabled;\n const displayValue = hoverValue ?? value;\n\n const rootRef = useRef<HTMLDivElement>(null);\n const valueBeforeGestureRef = useRef(value);\n const draggingRef = useRef(false);\n const gestureStartXRef = useRef(0);\n const hasDraggedRef = useRef(false);\n\n function commit(nextValue: number) {\n const clamped = clampValue(nextValue, max);\n if (!isControlled) setInternalValue(clamped);\n onChange(clamped);\n }\n\n function getValueFromClientX(clientX: number): number | null {\n const rect = rootRef.current?.getBoundingClientRect();\n if (!rect || rect.width === 0) return null;\n const fraction = clampValue((clientX - rect.left) / rect.width, 1);\n const raw = fraction * max;\n return allowHalf ? Math.round(raw * 2) / 2 : Math.ceil(raw);\n }\n\n function handlePointerDown(event: React.PointerEvent<HTMLDivElement>) {\n if (!isInteractive) return;\n event.currentTarget.setPointerCapture?.(event.pointerId);\n draggingRef.current = true;\n hasDraggedRef.current = false;\n gestureStartXRef.current = event.clientX;\n valueBeforeGestureRef.current = value;\n const next = getValueFromClientX(event.clientX);\n if (next !== null) setHoverValue(next);\n }\n\n function handlePointerMove(event: React.PointerEvent<HTMLDivElement>) {\n if (!isInteractive) return;\n const next = getValueFromClientX(event.clientX);\n if (next === null) return;\n if (draggingRef.current) {\n event.preventDefault();\n if (Math.abs(event.clientX - gestureStartXRef.current) > DRAG_THRESHOLD) {\n hasDraggedRef.current = true;\n }\n }\n setHoverValue(next);\n }\n\n function handlePointerUp(event: React.PointerEvent<HTMLDivElement>) {\n if (!isInteractive || !draggingRef.current) return;\n event.currentTarget.releasePointerCapture?.(event.pointerId);\n draggingRef.current = false;\n const next = getValueFromClientX(event.clientX) ?? hoverValue;\n if (next !== null) {\n const isClick = !hasDraggedRef.current;\n commit(isClick && allowClear && next === valueBeforeGestureRef.current ? 0 : next);\n }\n setHoverValue(null);\n }\n\n function handlePointerLeave() {\n if (!isInteractive || draggingRef.current) return;\n setHoverValue(null);\n }\n\n function handleKeyDown(event: React.KeyboardEvent<HTMLDivElement>) {\n const step = allowHalf ? 0.5 : 1;\n if (event.key === 'ArrowRight' || event.key === 'ArrowUp') {\n event.preventDefault();\n commit(value + step);\n } else if (event.key === 'ArrowLeft' || event.key === 'ArrowDown') {\n event.preventDefault();\n commit(value - step);\n } else if (event.key === 'Home') {\n event.preventDefault();\n commit(0);\n } else if (event.key === 'End') {\n event.preventDefault();\n commit(max);\n }\n }\n\n return (\n <div\n {...rest}\n ref={rootRef}\n role=\"slider\"\n aria-label={ariaLabel}\n aria-valuemin={0}\n aria-valuemax={max}\n aria-valuenow={value}\n aria-valuetext={`${value} out of ${max}`}\n aria-readonly={readOnly || undefined}\n aria-disabled={disabled || undefined}\n tabIndex={isInteractive ? 0 : -1}\n className={cx(\n styles.rating,\n disabled && styles.ratingDisabled,\n readOnly && styles.ratingReadOnly,\n classNames?.root,\n className\n )}\n style={{ ...style, ...slotStyles?.root }}\n onKeyDown={isInteractive ? handleKeyDown : undefined}\n onPointerDown={isInteractive ? handlePointerDown : undefined}\n onPointerMove={isInteractive ? handlePointerMove : undefined}\n onPointerUp={isInteractive ? handlePointerUp : undefined}\n onPointerCancel={isInteractive ? handlePointerUp : undefined}\n onPointerLeave={isInteractive ? handlePointerLeave : undefined}\n >\n {Array.from({ length: max }, (_, index) => {\n const fillPercent = Math.round(Math.max(0, Math.min(1, displayValue - index)) * 100);\n\n return (\n <div key={index} className={cx(styles.ratingItem, classNames?.item)} style={slotStyles?.item}>\n <FontAwesomeIcon\n icon={icon}\n className={cx(styles.ratingIconEmpty, classNames?.iconEmpty)}\n style={slotStyles?.iconEmpty as CSSProperties & Record<`--fa-font-${string}`, string>}\n />\n <div className={styles.ratingIconFilledClip} style={{ width: `${fillPercent}%` }}>\n <FontAwesomeIcon\n icon={icon}\n className={cx(styles.ratingIconFilled, classNames?.iconFilled)}\n style={slotStyles?.iconFilled as CSSProperties & Record<`--fa-font-${string}`, string>}\n />\n </div>\n </div>\n );\n })}\n </div>\n );\n}\n\nexport default Rating;\n"],"mappings":"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"}
@@ -0,0 +1,2 @@
1
+ var e={rating:`rating_eDKeX`,"rating-disabled":`rating-disabled_Xk0cI`,ratingDisabled:`rating-disabled_Xk0cI`,"rating-readOnly":`rating-readOnly_o8Kx1`,ratingReadOnly:`rating-readOnly_o8Kx1`,"rating-item":`rating-item_4tqx2`,ratingItem:`rating-item_4tqx2`,"rating-iconEmpty":`rating-iconEmpty_3uk2A`,ratingIconEmpty:`rating-iconEmpty_3uk2A`,"rating-iconFilledClip":`rating-iconFilledClip_4aNxG`,ratingIconFilledClip:`rating-iconFilledClip_4aNxG`,"rating-iconFilled":`rating-iconFilled_-rQ58`,ratingIconFilled:`rating-iconFilled_-rQ58`};export{e as default};
2
+ //# sourceMappingURL=rating.module.mjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"rating.module.mjs","names":[],"sources":["../../../../package/common/rating/rating.module.pcss"],"sourcesContent":[".rating {\n display: inline-flex;\n align-items: center;\n align-self: flex-start;\n width: fit-content;\n gap: 0.15em;\n font-size: 20px;\n outline: none;\n touch-action: pan-y;\n user-select: none;\n\n &:focus-visible {\n box-shadow: 0 0 0 2px var(--primary-lighter);\n border-radius: var(--default-border-radius);\n }\n\n &-disabled {\n opacity: 0.5;\n }\n\n &-disabled,\n &-readOnly {\n pointer-events: none;\n }\n\n &-item {\n position: relative;\n display: inline-flex;\n width: 1em;\n height: 1em;\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n }\n\n &-iconEmpty {\n width: 1em;\n height: 1em;\n color: var(--rating-empty-color, var(--background-accent-light));\n }\n\n &-iconFilledClip {\n position: absolute;\n top: 0;\n left: 0;\n height: 100%;\n overflow: hidden;\n pointer-events: none;\n }\n\n &-iconFilled {\n width: 1em;\n height: 1em;\n color: var(--rating-filled-color, var(--primary-color));\n }\n}\n"],"mappings":""}
@@ -0,0 +1,2 @@
1
+ import{useComponentDefaults as e}from"../configProvider/useComponentDefaults.mjs";import{ButtonSize as t,ButtonStyleType as n}from"../button/button.types.mjs";import r from"../button/button.mjs";import i from"../interactableDiv/index.mjs";import{Align as a}from"../floatingMenu/floatingMenu.types.mjs";import o from"../floatingMenu/floatingMenu.mjs";import s from"../buttonGroup/buttonGroup.mjs";import c from"./splitButton.module.mjs";import{useEffect as l,useRef as u,useState as d}from"react";import f from"classnames";import{FontAwesomeIcon as p}from"@fortawesome/react-fontawesome";import{faChevronDown as m}from"@fortawesome/free-solid-svg-icons";import{jsx as h,jsxs as g}from"react/jsx-runtime";function _(e,t){return(e%t+t)%t}function v(v){let{children:y,onClick:b=()=>{},actions:x=[],styleType:S=n.Primary,size:C=t.Default,disabled:w=!1,isLoading:T=!1,align:E=a.Right,className:D,style:O,classNames:k,styles:A,...j}=e(`SplitButton`,v),[M,N]=d(!1),P=u([]),[F,I]=d(w);w!==F&&(I(w),w&&N(!1)),l(()=>{if(!M)return;let e=x.findIndex(e=>!e.disabled);e!==-1&&P.current[e]?.focus()},[M]);function L(e,t){let n=x.map((e,t)=>t).filter(e=>!x[e].disabled);if(n.length===0)return;let r=n.indexOf(e),i=r===-1?t===1?0:n.length-1:_(r+t,n.length);P.current[n[i]]?.focus()}function R(e){let t=P.current.findIndex(e=>e===document.activeElement);e.key===`ArrowDown`?(e.preventDefault(),L(t,1)):e.key===`ArrowUp`?(e.preventDefault(),L(t,-1)):e.key===`Home`?(e.preventDefault(),L(-1,1)):e.key===`End`&&(e.preventDefault(),L(-1,-1))}return g(s,{...j,className:f(c.splitButton,k?.root,D),style:{...O,...A?.root},children:[h(r,{styleType:S,size:C,disabled:w,isLoading:T,onClick:b,className:f(c.splitButtonPrimary,k?.primaryButton),style:A?.primaryButton,children:y}),h(o,{isOpen:M,onOpenChange:N,align:E,dontCloseOnChildClick:!0,content:h(`ul`,{className:f(c.splitButtonMenu,k?.menu),style:A?.menu,role:`menu`,onKeyDown:R,children:x.map((e,t)=>h(`li`,{role:`none`,children:g(i,{ref:e=>{P.current[t]=e},role:`menuitem`,tabIndex:e.disabled?-1:0,"aria-disabled":e.disabled,className:f(c.splitButtonMenuItem,{[c.splitButtonMenuItemDisabled]:e.disabled},k?.menuItem),style:A?.menuItem,onClick:()=>{w||e.disabled||(e.onClick(),N(!1))},children:[e.icon?h(p,{icon:e.icon,className:c.splitButtonMenuItemIcon}):null,e.label]})},e.id))}),children:h(r,{styleType:S,size:C,disabled:w,icon:m,"aria-label":`More actions`,className:f(c.splitButtonTrigger,k?.triggerButton),style:A?.triggerButton})})]})}export{v as default};
2
+ //# sourceMappingURL=splitButton.mjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"splitButton.mjs","names":[],"sources":["../../../../package/common/splitButton/splitButton.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\nimport type { KeyboardEvent } from 'react';\nimport cx from 'classnames';\nimport { faChevronDown } from '@fortawesome/free-solid-svg-icons';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\n\nimport Button from '../button';\nimport { ButtonStyleType, ButtonSize } from '../button/button.types';\nimport ButtonGroup from '../buttonGroup';\nimport FloatingMenu from '../floatingMenu';\nimport { Align } from '../floatingMenu/floatingMenu.types';\nimport InteractableDiv from '../interactableDiv';\nimport { useComponentDefaults } from '../configProvider';\nimport type { SplitButtonProps } from './splitButton.types';\n\nimport styles from './splitButton.module.pcss';\n\nfunction mod(n: number, m: number) {\n return ((n % m) + m) % m;\n}\n\nfunction SplitButton(props: SplitButtonProps) {\n const {\n children,\n onClick = () => {},\n actions = [],\n styleType = ButtonStyleType.Primary,\n size = ButtonSize.Default,\n disabled = false,\n isLoading = false,\n align = Align.Right,\n className,\n style,\n classNames,\n styles: slotStyles,\n ...rest\n } = useComponentDefaults('SplitButton', props);\n\n const [isOpen, setIsOpen] = useState(false);\n const itemRefs = useRef<(HTMLDivElement | null)[]>([]);\n\n // Adjusting state during render (not in an effect) on a prop change is the documented React\n // pattern for this: closing the menu as soon as `disabled` becomes true, without an extra\n // render tick or a setState-in-effect lint violation.\n const [prevDisabled, setPrevDisabled] = useState(disabled);\n if (disabled !== prevDisabled) {\n setPrevDisabled(disabled);\n if (disabled) setIsOpen(false);\n }\n\n useEffect(() => {\n if (!isOpen) return;\n const firstEnabled = actions.findIndex((action) => !action.disabled);\n if (firstEnabled !== -1) itemRefs.current[firstEnabled]?.focus();\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [isOpen]);\n\n function focusEnabledItem(fromIndex: number, direction: 1 | -1) {\n const enabledIndexes = actions\n .map((action, index) => index)\n .filter((index) => !actions[index].disabled);\n if (enabledIndexes.length === 0) return;\n\n const currentPos = enabledIndexes.indexOf(fromIndex);\n const nextPos = currentPos === -1\n ? (direction === 1 ? 0 : enabledIndexes.length - 1)\n : mod(currentPos + direction, enabledIndexes.length);\n itemRefs.current[enabledIndexes[nextPos]]?.focus();\n }\n\n function handleMenuKeyDown(event: KeyboardEvent<HTMLUListElement>) {\n const activeIndex = itemRefs.current.findIndex((el) => el === document.activeElement);\n\n if (event.key === 'ArrowDown') {\n event.preventDefault();\n focusEnabledItem(activeIndex, 1);\n } else if (event.key === 'ArrowUp') {\n event.preventDefault();\n focusEnabledItem(activeIndex, -1);\n } else if (event.key === 'Home') {\n event.preventDefault();\n focusEnabledItem(-1, 1);\n } else if (event.key === 'End') {\n event.preventDefault();\n focusEnabledItem(-1, -1);\n }\n // Escape and Tab-boundary handling live in FloatingMenu itself, since any menu content with\n // focusable elements needs the same treatment, not just this one.\n }\n\n return (\n <ButtonGroup\n {...rest}\n className={cx(styles.splitButton, classNames?.root, className)}\n style={{ ...style, ...slotStyles?.root }}\n >\n <Button\n styleType={styleType}\n size={size}\n disabled={disabled}\n isLoading={isLoading}\n onClick={onClick}\n className={cx(styles.splitButtonPrimary, classNames?.primaryButton)}\n style={slotStyles?.primaryButton}\n >\n {children}\n </Button>\n\n <FloatingMenu\n isOpen={isOpen}\n onOpenChange={setIsOpen}\n align={align}\n dontCloseOnChildClick\n content={\n <ul\n className={cx(styles.splitButtonMenu, classNames?.menu)}\n style={slotStyles?.menu}\n role=\"menu\"\n onKeyDown={handleMenuKeyDown}\n >\n {actions.map((action, index) => (\n <li key={action.id} role=\"none\">\n <InteractableDiv\n ref={(el) => { itemRefs.current[index] = el; }}\n role=\"menuitem\"\n tabIndex={action.disabled ? -1 : 0}\n aria-disabled={action.disabled}\n className={cx(\n styles.splitButtonMenuItem,\n { [styles.splitButtonMenuItemDisabled]: action.disabled },\n classNames?.menuItem\n )}\n style={slotStyles?.menuItem}\n onClick={() => {\n if (disabled || action.disabled) return;\n action.onClick();\n setIsOpen(false);\n }}\n >\n {action.icon ? <FontAwesomeIcon icon={action.icon} className={styles.splitButtonMenuItemIcon} /> : null}\n {action.label}\n </InteractableDiv>\n </li>\n ))}\n </ul>\n }\n >\n <Button\n styleType={styleType}\n size={size}\n disabled={disabled}\n icon={faChevronDown}\n aria-label=\"More actions\"\n className={cx(styles.splitButtonTrigger, classNames?.triggerButton)}\n style={slotStyles?.triggerButton}\n />\n </FloatingMenu>\n </ButtonGroup>\n );\n}\n\nexport default SplitButton;\n"],"mappings":"+rBAiBA,SAAS,EAAI,EAAW,EAAW,CACjC,OAAS,EAAI,EAAK,GAAK,CACzB,CAEA,SAAS,EAAY,EAAyB,CAC5C,GAAM,CACJ,WACA,cAAgB,CAAC,EACjB,UAAU,CAAC,EACX,YAAY,EAAgB,QAC5B,OAAO,EAAW,QAClB,WAAW,GACX,YAAY,GACZ,QAAQ,EAAM,MACd,YACA,QACA,aACA,OAAQ,EACR,GAAG,GACD,EAAqB,cAAe,CAAK,EAEvC,CAAC,EAAQ,GAAa,EAAS,EAAK,EACpC,EAAW,EAAkC,CAAC,CAAC,EAK/C,CAAC,EAAc,GAAmB,EAAS,CAAQ,EACrD,IAAa,IACf,EAAgB,CAAQ,EACpB,GAAU,EAAU,EAAK,GAG/B,MAAgB,CACd,GAAI,CAAC,EAAQ,OACb,IAAM,EAAe,EAAQ,UAAW,GAAW,CAAC,EAAO,QAAQ,EAC/D,IAAiB,IAAI,EAAS,QAAQ,IAAe,MAAM,CAEjE,EAAG,CAAC,CAAM,CAAC,EAEX,SAAS,EAAiB,EAAmB,EAAmB,CAC9D,IAAM,EAAiB,EACpB,KAAK,EAAQ,IAAU,CAAK,EAC5B,OAAQ,GAAU,CAAC,EAAQ,GAAO,QAAQ,EAC7C,GAAI,EAAe,SAAW,EAAG,OAEjC,IAAM,EAAa,EAAe,QAAQ,CAAS,EAC7C,EAAU,IAAe,GAC1B,IAAc,EAAI,EAAI,EAAe,OAAS,EAC/C,EAAI,EAAa,EAAW,EAAe,MAAM,EACrD,EAAS,QAAQ,EAAe,KAAW,MAAM,CACnD,CAEA,SAAS,EAAkB,EAAwC,CACjE,IAAM,EAAc,EAAS,QAAQ,UAAW,GAAO,IAAO,SAAS,aAAa,EAEhF,EAAM,MAAQ,aAChB,EAAM,eAAe,EACrB,EAAiB,EAAa,CAAC,GACtB,EAAM,MAAQ,WACvB,EAAM,eAAe,EACrB,EAAiB,EAAa,EAAE,GACvB,EAAM,MAAQ,QACvB,EAAM,eAAe,EACrB,EAAiB,GAAI,CAAC,GACb,EAAM,MAAQ,QACvB,EAAM,eAAe,EACrB,EAAiB,GAAI,EAAE,EAI3B,CAEA,OACE,EAAC,EAAD,CACE,GAAI,EACJ,UAAW,EAAG,EAAO,YAAa,GAAY,KAAM,CAAS,EAC7D,MAAO,CAAE,GAAG,EAAO,GAAG,GAAY,IAAK,WAHzC,CAKE,EAAC,EAAD,CACa,YACL,OACI,WACC,YACF,UACT,UAAW,EAAG,EAAO,mBAAoB,GAAY,aAAa,EAClE,MAAO,GAAY,cAElB,UACK,CAAA,EAER,EAAC,EAAD,CACU,SACR,aAAc,EACP,QACP,sBAAA,GACA,QACE,EAAC,KAAD,CACE,UAAW,EAAG,EAAO,gBAAiB,GAAY,IAAI,EACtD,MAAO,GAAY,KACnB,KAAK,OACL,UAAW,WAEV,EAAQ,KAAK,EAAQ,IACpB,EAAC,KAAD,CAAoB,KAAK,gBACvB,EAAC,EAAD,CACE,IAAM,GAAO,CAAE,EAAS,QAAQ,GAAS,CAAI,EAC7C,KAAK,WACL,SAAU,EAAO,SAAW,GAAK,EACjC,gBAAe,EAAO,SACtB,UAAW,EACT,EAAO,oBACP,EAAG,EAAO,6BAA8B,EAAO,QAAS,EACxD,GAAY,QACd,EACA,MAAO,GAAY,SACnB,YAAe,CACT,GAAY,EAAO,WACvB,EAAO,QAAQ,EACf,EAAU,EAAK,EACjB,WAfF,CAiBG,EAAO,KAAO,EAAC,EAAD,CAAiB,KAAM,EAAO,KAAM,UAAW,EAAO,uBAA0B,CAAA,EAAI,KAClG,EAAO,KACO,GACf,EArBK,EAAO,EAqBZ,CACL,CACC,CAAA,WAGN,EAAC,EAAD,CACa,YACL,OACI,WACV,KAAM,EACN,aAAW,eACX,UAAW,EAAG,EAAO,mBAAoB,GAAY,aAAa,EAClE,MAAO,GAAY,aACpB,CAAA,CACW,CAAA,CACH,GAEjB"}
@@ -0,0 +1,2 @@
1
+ var e={splitButton:`splitButton_5ak5W`,splitButtonPrimary:`splitButtonPrimary_4mVy8`,splitButtonTrigger:`splitButtonTrigger_32cQA`,splitButtonMenu:`splitButtonMenu_P6Ofl`,splitButtonMenuItem:`splitButtonMenuItem_dbEEz`,"splitButtonMenuItem-disabled":`splitButtonMenuItem-disabled_Dw1mr`,splitButtonMenuItemDisabled:`splitButtonMenuItem-disabled_Dw1mr`,"splitButtonMenuItem-icon":`splitButtonMenuItem-icon_dMuKX`,splitButtonMenuItemIcon:`splitButtonMenuItem-icon_dMuKX`};export{e as default};
2
+ //# sourceMappingURL=splitButton.module.mjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"splitButton.module.mjs","names":[],"sources":["../../../../package/common/splitButton/splitButton.module.pcss"],"sourcesContent":[".splitButton {\n display: inline-flex;\n}\n\n/* The class is doubled to boost specificity above Button's own .button rule (both are plain\n single classes, so specificity would otherwise tie and the outcome would depend on which\n CSS module happens to load first in the bundle). This guarantees the flattened corner always\n wins regardless of load order. */\n.splitButtonPrimary.splitButtonPrimary {\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n}\n\n.splitButtonTrigger.splitButtonTrigger {\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n margin-left: -1px;\n}\n\n.splitButtonMenu {\n display: flex;\n flex-direction: column;\n gap: 2px;\n margin: 0;\n padding: 6px;\n list-style: none;\n min-width: 140px;\n}\n\n.splitButtonMenuItem {\n display: flex;\n align-items: center;\n padding: 8px 10px;\n border-radius: var(--default-border-radius);\n color: var(--text-color);\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n transition: background 0.15s;\n\n &:hover {\n background: var(--background-accent-light);\n }\n\n &-disabled {\n opacity: 0.5;\n cursor: default;\n pointer-events: none;\n }\n\n &-icon {\n width: 1em;\n flex: none;\n margin-right: 8px;\n }\n}\n"],"mappings":""}
@@ -1,2 +1,2 @@
1
- import e from"./virtualList.module.mjs";import{lastDescendantIndex as t,resolveReorderTarget as n,resolveTreeDropTarget as r}from"./virtualList.utils.mjs";import{useCallback as i,useEffect as a,useLayoutEffect as o,useRef as s,useState as c}from"react";function l({reorderable:l,treeReorder:u,onReorder:d,onTreeDrop:f,longPressDelay:p,dragHandle:m,treeIndentPx:ee,keys:h,depths:g,isGroupAt:_,rootRef:v,keysRef:y}){let b=s(null),[x,S]=c(null),[C,w]=c(null),T=s(null),E=s(d),D=s(f),O=s(u),k=s(g),A=s(_),j=s(!0),M=s(null),N=s(!1),P=s(null),F=s(0),I=s(0),L=s(null),R=s(!1),z=s(null),B=s(0),V=s(0),H=s(0),[U]=c(()=>typeof window<`u`&&typeof window.matchMedia==`function`?window.matchMedia(`(pointer: coarse)`).matches:!1);o(()=>{E.current=d,D.current=f,O.current=u,k.current=g,T.current=C,A.current=_});function W(e){j.current=!!e.target.closest(`[data-drag-handle]`)}function G(e,t){if(m&&!j.current){t.preventDefault();return}b.current=e,S(e),u&&w(null)}function K(e,n,i){let a=b.current;if(a==null)return null;let o=h.indexOf(a);if(o!==-1&&e>=o&&e<=t(o,g))return null;let s=r(n,i.top,i.height,_(e));return{key:h[e],position:s}}function q(e,t){t.preventDefault();let n=t.currentTarget.getBoundingClientRect(),r=K(e,t.clientY,n);w(e=>e?.key===r?.key&&e?.position===r?.position?e:r)}function te(){let e=b.current,t=T.current;e!=null&&t&&t.key!==e&&f?.(e,t)}function ne(e){e.preventDefault(),te(),w(null),b.current=null,S(null)}function re(){w(null),b.current=null,S(null)}function ie(e,t){t.preventDefault();let r=b.current;if(r==null)return;let i=h.indexOf(r),a=t.currentTarget.getBoundingClientRect(),o=n(i,e,t.clientY,a.top,a.height);o!=null&&d?.(i,o)}function ae(){b.current=null,S(null)}let J=i(e=>{let i=b.current,a=v.current;if(i==null||!a)return;let o=z.current?I.current-B.current+H.current/2:I.current,s=document.elementFromPoint(e,o),c=s&&a.contains(s)?s.closest(`[data-index]`):null;if(!c)return;let l=Number(c.dataset.index);if(Number.isNaN(l))return;let u=y.current.indexOf(i),d=c.getBoundingClientRect();if(O.current){let e=y.current,n=k.current;if(u!==-1&&l>=u&&l<=t(u,n)){w(null);return}let i=r(o,d.top,d.height,A.current(l)),a={key:e[l],position:i};w(e=>e?.key===a.key&&e?.position===a.position?e:a);return}let f=n(u,l,o,d.top,d.height);f!=null&&E.current?.(u,f)},[v,y]),Y=i(()=>{let e=z.current;e&&(e.style.transform=`translate(${V.current}px, ${I.current-B.current}px)`)},[]),X=i(()=>{let e=v.current;if(!e||!N.current){L.current=null;return}let t=e.getBoundingClientRect(),n=F.current,r=I.current,i=0;n>=t.left&&n<=t.right&&r>=t.top&&r<=t.bottom&&(r<t.top+48?i=-Math.min(18,Math.ceil((t.top+48-r)/3)):r>t.bottom-48&&(i=Math.min(18,Math.ceil((r-(t.bottom-48))/3)))),i!==0&&(e.scrollTop+=i,J(n)),L.current=requestAnimationFrame(X)},[J,v]),Z=i(()=>{if(M.current!=null&&(clearTimeout(M.current),M.current=null),window.removeEventListener(`touchmove`,Q),window.removeEventListener(`touchend`,Z),window.removeEventListener(`touchcancel`,Z),L.current!=null&&(cancelAnimationFrame(L.current),L.current=null),z.current&&=(z.current.remove(),null),document.body.style.touchAction=``,document.body.style.overscrollBehavior=``,N.current&&(R.current=!0,setTimeout(()=>{R.current=!1},350),O.current)){let e=b.current,t=T.current;e!=null&&t&&t.key!==e&&D.current?.(e,t)}w(null),N.current=!1,P.current=null,b.current=null,S(null)},[]),Q=i(e=>{let t=e.touches[0];if(t){if(F.current=t.clientX,I.current=t.clientY,!N.current){let e=P.current;e!=null&&Math.abs(t.clientY-e)>10&&M.current!=null&&(clearTimeout(M.current),M.current=null);return}e.cancelable&&e.preventDefault(),Y(),J(t.clientX)}},[J,Y]);function oe(e,t){if(!l&&!u||m&&!t.target.closest(`[data-drag-handle]`)||M.current!=null||N.current)return;let n=t.touches[0];n&&(P.current=n.clientY,F.current=n.clientX,I.current=n.clientY,window.addEventListener(`touchmove`,Q,{passive:!1}),window.addEventListener(`touchend`,Z),window.addEventListener(`touchcancel`,Z),M.current=window.setTimeout(()=>{M.current=null,N.current=!0,b.current=e,S(e),navigator.vibrate?.(10),document.body.style.touchAction=`none`,document.body.style.overscrollBehavior=`none`,se(e),L.current??=requestAnimationFrame(X)},p))}function se(t){let n=v.current;if(!n)return;let r=y.current.indexOf(t),i=n.querySelector(`[data-index="${r}"]`);if(!i)return;let a=i.getBoundingClientRect();B.current=I.current-a.top,V.current=a.left,H.current=a.height;let o=i.cloneNode(!0);o.removeAttribute(`data-index`),o.setAttribute(`data-drag-clone`,`true`),o.setAttribute(`aria-hidden`,`true`),o.classList.add(e.virtualListDragClone),Object.assign(o.style,{position:`fixed`,left:`0`,top:`0`,width:`${a.width}px`,height:`${a.height}px`,margin:`0`,opacity:`1`,pointerEvents:`none`,zIndex:`3`,background:`var(--background)`,boxShadow:`var(--card-shadow)`,borderRadius:`var(--default-border-radius)`}),n.appendChild(o),z.current=o,Y()}a(()=>Z,[Z]);let $=l||u;function ce(e,t){let n=u&&C?.key===t?C.position:void 0;return{reorderable:$&&!m,draggable:$&&!U||void 0,isDragging:$&&t===x,onMouseDown:$&&m?W:void 0,onDragStart:$?e=>G(t,e):void 0,onDragOver:u?t=>q(e,t):l?t=>ie(e,t):void 0,onDragEnd:u?re:l?ae:void 0,onDrop:u?ne:void 0,onTouchStart:$?e=>oe(t,e):void 0,dropPosition:n,dropIndentPx:n?(g[e]??0)*ee:void 0}}function le(){return R.current?(R.current=!1,!0):!1}return{draggingKey:x,dragEnabled:$,getRowDragProps:ce,consumeSuppressedClick:le}}export{l as useRowDrag};
1
+ import e from"./virtualList.module.mjs";import{lastDescendantIndex as t,resolveReorderTarget as n,resolveTreeDropTarget as r}from"./virtualList.utils.mjs";import{useCallback as i,useEffect as a,useLayoutEffect as o,useRef as s,useState as c}from"react";function l({reorderable:l,treeReorder:u,onReorder:d,onTreeDrop:f,longPressDelay:ee,dragHandle:p,treeIndentPx:m,keys:h,depths:g,isGroupAt:_,rootRef:v,keysRef:y}){let b=s(null),[x,S]=c(null),[C,w]=c(null),T=s(null),E=s(d),D=s(f),O=s(u),k=s(g),A=s(_),j=s(!0),M=s(null),[N,te]=c(null),P=s(null),F=s(!1),I=s(null),L=s(0),R=s(0),z=s(null),B=s(!1),V=s(null),H=s(0),U=s(0),W=s(0),[G]=c(()=>typeof window<`u`&&typeof window.matchMedia==`function`?window.matchMedia(`(pointer: coarse)`).matches:!1);o(()=>{E.current=d,D.current=f,O.current=u,k.current=g,T.current=C,A.current=_});function K(e){G||M.current!==e&&(M.current=e,te(e))}function ne(e,t){t.buttons===0&&K(t.target.closest(`[data-drag-handle]`)?e:null)}function re(e){e.buttons===0&&K(null)}function ie(e,t){if(t.button!==0)return;let n=!!t.target.closest(`[data-drag-handle]`);j.current=n,n&&K(e)}function ae(e,t){if(p&&!j.current){t.preventDefault();return}b.current=e,S(e),u&&w(null)}function oe(e,n,i){let a=b.current;if(a==null)return null;let o=h.indexOf(a);if(o!==-1&&e>=o&&e<=t(o,g))return null;let s=r(n,i.top,i.height,_(e));return{key:h[e],position:s}}function se(e,t){t.preventDefault();let n=t.currentTarget.getBoundingClientRect(),r=oe(e,t.clientY,n);w(e=>e?.key===r?.key&&e?.position===r?.position?e:r)}function ce(){let e=b.current,t=T.current;e!=null&&t&&t.key!==e&&f?.(e,t)}function le(e){e.preventDefault(),ce(),w(null),b.current=null,S(null),K(null)}function ue(){w(null),b.current=null,S(null),K(null)}function de(e,t){t.preventDefault();let r=b.current;if(r==null)return;let i=h.indexOf(r),a=t.currentTarget.getBoundingClientRect(),o=n(i,e,t.clientY,a.top,a.height);o!=null&&d?.(i,o)}function fe(){b.current=null,S(null),K(null)}let q=i(e=>{let i=b.current,a=v.current;if(i==null||!a)return;let o=V.current?R.current-H.current+W.current/2:R.current,s=document.elementFromPoint(e,o),c=s&&a.contains(s)?s.closest(`[data-index]`):null;if(!c)return;let l=Number(c.dataset.index);if(Number.isNaN(l))return;let u=y.current.indexOf(i),d=c.getBoundingClientRect();if(O.current){let e=y.current,n=k.current;if(u!==-1&&l>=u&&l<=t(u,n)){w(null);return}let i=r(o,d.top,d.height,A.current(l)),a={key:e[l],position:i};w(e=>e?.key===a.key&&e?.position===a.position?e:a);return}let f=n(u,l,o,d.top,d.height);f!=null&&E.current?.(u,f)},[v,y]),J=i(()=>{let e=V.current;e&&(e.style.transform=`translate(${U.current}px, ${R.current-H.current}px)`)},[]),Y=i(()=>{let e=v.current;if(!e||!F.current){z.current=null;return}let t=e.getBoundingClientRect(),n=L.current,r=R.current,i=0;n>=t.left&&n<=t.right&&r>=t.top&&r<=t.bottom&&(r<t.top+48?i=-Math.min(18,Math.ceil((t.top+48-r)/3)):r>t.bottom-48&&(i=Math.min(18,Math.ceil((r-(t.bottom-48))/3)))),i!==0&&(e.scrollTop+=i,q(n)),z.current=requestAnimationFrame(Y)},[q,v]),X=i(()=>{if(P.current!=null&&(clearTimeout(P.current),P.current=null),window.removeEventListener(`touchmove`,Z),window.removeEventListener(`touchend`,X),window.removeEventListener(`touchcancel`,X),z.current!=null&&(cancelAnimationFrame(z.current),z.current=null),V.current&&=(V.current.remove(),null),document.body.style.touchAction=``,document.body.style.overscrollBehavior=``,F.current&&(B.current=!0,setTimeout(()=>{B.current=!1},350),O.current)){let e=b.current,t=T.current;e!=null&&t&&t.key!==e&&D.current?.(e,t)}w(null),F.current=!1,I.current=null,b.current=null,S(null)},[]),Z=i(e=>{let t=e.touches[0];if(t){if(L.current=t.clientX,R.current=t.clientY,!F.current){let e=I.current;e!=null&&Math.abs(t.clientY-e)>10&&P.current!=null&&(clearTimeout(P.current),P.current=null);return}e.cancelable&&e.preventDefault(),J(),q(t.clientX)}},[q,J]);function pe(e,t){if(!l&&!u||p&&!t.target.closest(`[data-drag-handle]`)||P.current!=null||F.current)return;let n=t.touches[0];n&&(I.current=n.clientY,L.current=n.clientX,R.current=n.clientY,window.addEventListener(`touchmove`,Z,{passive:!1}),window.addEventListener(`touchend`,X),window.addEventListener(`touchcancel`,X),P.current=window.setTimeout(()=>{P.current=null,F.current=!0,b.current=e,S(e),navigator.vibrate?.(10),document.body.style.touchAction=`none`,document.body.style.overscrollBehavior=`none`,me(e),z.current??=requestAnimationFrame(Y)},ee))}function me(t){let n=v.current;if(!n)return;let r=y.current.indexOf(t),i=n.querySelector(`[data-index="${r}"]`);if(!i)return;let a=i.getBoundingClientRect();H.current=R.current-a.top,U.current=a.left,W.current=a.height;let o=i.cloneNode(!0);o.removeAttribute(`data-index`),o.setAttribute(`data-drag-clone`,`true`),o.setAttribute(`aria-hidden`,`true`),o.classList.add(e.virtualListDragClone),Object.assign(o.style,{position:`fixed`,left:`0`,top:`0`,width:`${a.width}px`,height:`${a.height}px`,margin:`0`,opacity:`1`,pointerEvents:`none`,zIndex:`3`,background:`var(--background)`,boxShadow:`var(--card-shadow)`,borderRadius:`var(--default-border-radius)`}),n.appendChild(o),V.current=o,J()}a(()=>X,[X]);let Q=l||u,$=Q&&!G;function he(e,t){let n=u&&C?.key===t?C.position:void 0;return{reorderable:Q&&!p,mouseDragEnabled:$,draggable:$&&(!p||t===N)||void 0,isDragging:Q&&t===x,onMouseDown:Q&&p?e=>ie(t,e):void 0,onMouseOver:Q&&p?e=>ne(t,e):void 0,onMouseLeave:Q&&p?re:void 0,onDragStart:Q?e=>ae(t,e):void 0,onDragOver:u?t=>se(e,t):l?t=>de(e,t):void 0,onDragEnd:u?ue:l?fe:void 0,onDrop:u?le:void 0,onTouchStart:Q?e=>pe(t,e):void 0,dropPosition:n,dropIndentPx:n?(g[e]??0)*m:void 0}}function ge(){return B.current?(B.current=!1,!0):!1}return{draggingKey:x,dragEnabled:Q,getRowDragProps:he,consumeSuppressedClick:ge}}export{l as useRowDrag};
2
2
  //# sourceMappingURL=useRowDrag.mjs.map