@ahrowe/ui 0.7.0 → 0.8.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 (58) hide show
  1. package/dist/esm/common/animatedLogo/animatedLogo.mjs +2 -0
  2. package/dist/esm/common/animatedLogo/animatedLogo.mjs.map +1 -0
  3. package/dist/esm/common/animatedLogo/animatedLogo.module.mjs +2 -0
  4. package/dist/esm/common/animatedLogo/animatedLogo.module.mjs.map +1 -0
  5. package/dist/esm/common/datePicker/datePicker.mjs.map +1 -1
  6. package/dist/esm/common/dropdown/dropdown.mjs +1 -1
  7. package/dist/esm/common/dropdown/dropdown.mjs.map +1 -1
  8. package/dist/esm/common/input/input.types.mjs.map +1 -1
  9. package/dist/esm/common/numberInput/numberInput.mjs.map +1 -1
  10. package/dist/esm/index.mjs +1 -1
  11. package/dist/esm/services/formValidation/FormValidatorGroupWithForm.mjs +1 -1
  12. package/dist/esm/services/formValidation/FormValidatorGroupWithForm.mjs.map +1 -1
  13. package/dist/esm/services/formValidation/index.mjs +1 -0
  14. package/dist/esm/services/formValidation/useFormValidatorGroup.mjs +1 -1
  15. package/dist/esm/services/formValidation/useFormValidatorGroup.mjs.map +1 -1
  16. package/dist/esm/services/formValidation/validatableComponent.mjs.map +1 -1
  17. package/dist/index.cjs +4 -4
  18. package/dist/index.cjs.map +1 -1
  19. package/dist/style.css +1 -1
  20. package/dist/types/package/common/animatedLogo/animatedLogo.d.ts +4 -0
  21. package/dist/types/package/common/animatedLogo/animatedLogo.types.d.ts +27 -0
  22. package/dist/types/package/common/animatedLogo/index.d.ts +2 -0
  23. package/dist/types/package/common/checkbox/checkbox.types.d.ts +1 -1
  24. package/dist/types/package/common/datePicker/datePicker.d.ts +1 -1
  25. package/dist/types/package/common/dropdown/dropdown.types.d.ts +1 -1
  26. package/dist/types/package/common/iconPicker/iconPicker.types.d.ts +1 -1
  27. package/dist/types/package/common/input/input.types.d.ts +1 -1
  28. package/dist/types/package/common/inputDropdown/inputDropdown.types.d.ts +1 -1
  29. package/dist/types/package/common/numberInput/numberInput.d.ts +1 -1
  30. package/dist/types/package/common/switch/switch.types.d.ts +1 -1
  31. package/dist/types/package/common/timeInput/timeInput.types.d.ts +1 -1
  32. package/dist/types/package/index.d.ts +3 -1
  33. package/dist/types/package/services/formValidation/FormValidatorGroupWithForm.d.ts +1 -1
  34. package/dist/types/package/services/formValidation/index.d.ts +2 -5
  35. package/dist/types/package/services/formValidation/useFormValidatorGroup.d.ts +8 -24
  36. package/dist/types/package/services/formValidation/validatableComponent.d.ts +1 -1
  37. package/docs/AnimatedLogo.md +60 -0
  38. package/docs/CLAUDE.md +1 -0
  39. package/package.json +2 -1
  40. package/dist/esm/services/formValidation/FormValidatorGroupForm.mjs +0 -2
  41. package/dist/esm/services/formValidation/FormValidatorGroupForm.mjs.map +0 -1
  42. package/dist/esm/services/formValidation/formValidator.mjs +0 -2
  43. package/dist/esm/services/formValidation/formValidator.mjs.map +0 -1
  44. package/dist/esm/services/formValidation/formValidatorGroup.mjs +0 -2
  45. package/dist/esm/services/formValidation/formValidatorGroup.mjs.map +0 -1
  46. package/dist/esm/services/formValidation/useFormValidator.mjs +0 -2
  47. package/dist/esm/services/formValidation/useFormValidator.mjs.map +0 -1
  48. package/dist/esm/services/formValidation/validators.mjs +0 -2
  49. package/dist/esm/services/formValidation/validators.mjs.map +0 -1
  50. package/dist/esm/services/regexp.mjs +0 -2
  51. package/dist/esm/services/regexp.mjs.map +0 -1
  52. package/dist/types/package/services/formValidation/FormValidatorGroupForm.d.ts +0 -7
  53. package/dist/types/package/services/formValidation/formValidator.d.ts +0 -39
  54. package/dist/types/package/services/formValidation/formValidatorGroup.d.ts +0 -64
  55. package/dist/types/package/services/formValidation/types.d.ts +0 -10
  56. package/dist/types/package/services/formValidation/useFormValidator.d.ts +0 -9
  57. package/dist/types/package/services/formValidation/validators.d.ts +0 -20
  58. package/dist/types/package/services/regexp.d.ts +0 -10
@@ -0,0 +1,2 @@
1
+ import e from"./animatedLogo.module.mjs";import{useEffect as t,useRef as n,useState as r}from"react";import i from"classnames";import{jsx as a}from"react/jsx-runtime";var o=`M 1.292 0.278 C -0.41 4.855 3.185 6.433 0.344 8.916 Q 3.923 10.712 5.361 14.001 Q 6.128 14.398 6.876 14.003 Q 8.439 10.632 11.86 8.912 C 8.893 6.387 12.578 5.159 10.86 0.255 Q 8.655 1.166 7.391 3.377 Q 6.092 2.93 4.843 3.38 Q 3.246 0.883 1.292 0.278 Z M 1.663 1.28 Q 2.413 1.635 3.195 2.718 Q 2.083 2.778 1.595 3.884 Q 1.309 2.7 1.663 1.28 M 3.802 7.908 Q 4.426 8.069 3.284 9.003 Q 3.824 9.32 4.557 10.141 Q 4.812 10.869 4.849 11.671 Q 4.371 10.09 2.642 9.144 Q 2.438 9.033 2.609 8.922 Q 3.229 8.537 3.802 7.908 M 8.469 7.927 Q 8.955 8.469 9.646 8.926 Q 9.791 9.032 9.647 9.136 Q 7.821 10.157 7.389 11.702 Q 7.464 10.869 7.709 10.119 Q 8.219 9.53 8.956 9.025 Q 7.81 7.927 8.469 7.927`,s=`0.244 0.155 11.72 14.25`;function c(c){let{path:l=o,viewBox:u=s,size:d=96,color:f,duration:p=4.2,loop:m=!0,fill:h=!0,spin:g=!1,scale:_=!1,className:v,style:y,classNames:b,styles:x,...S}=c,C=n(null),[w,T]=r(!1);t(()=>{let e=C.current;if(!e)return;T(!1);let t=e.getTotalLength();e.style.setProperty(`--animated-logo-length`,String(t)),e.style.strokeDasharray=String(t),e.style.strokeDashoffset=String(t);let n=requestAnimationFrame(()=>T(!0));return()=>cancelAnimationFrame(n)},[l]);let E={animationDuration:`${p}s`,...f?{stroke:f,fill:f}:void 0,...x?.path};return a(`svg`,{...S,className:i(e.animatedLogo,v),style:{width:d,height:d,...y},viewBox:u,xmlns:`http://www.w3.org/2000/svg`,children:a(`g`,{className:i(w&&_&&(m?e.animatedLogoScaleLoop:e.animatedLogoScaleOnce)),style:{animationDuration:`${p}s`},children:a(`g`,{className:i(w&&g&&(m?e.animatedLogoSpinLoop:e.animatedLogoSpinOnce)),style:{animationDuration:`${p}s`},children:a(`path`,{ref:C,className:i(e.animatedLogoPath,w&&(m?h?e.animatedLogoPathLoop:e.animatedLogoPathLoopNoFill:h?e.animatedLogoPathOnce:e.animatedLogoPathOnceNoFill),b?.path),style:E,strokeWidth:.1,strokeLinejoin:`round`,strokeLinecap:`round`,d:l})})})})}export{c as default};
2
+ //# sourceMappingURL=animatedLogo.mjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"animatedLogo.mjs","names":[],"sources":["../../../../package/common/animatedLogo/animatedLogo.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\nimport type { CSSProperties, ReactElement } from 'react';\nimport cx from 'classnames';\n\nimport type { AnimatedLogoProps } from './animatedLogo.types';\nimport styles from './animatedLogo.module.pcss';\n\nconst DEFAULT_PATH =\n 'M 1.292 0.278 C -0.41 4.855 3.185 6.433 0.344 8.916 Q 3.923 10.712 5.361 14.001 Q 6.128 14.398 6.876 14.003 Q 8.439 10.632 11.86 8.912 C 8.893 6.387 12.578 5.159 10.86 0.255 Q 8.655 1.166 7.391 3.377 Q 6.092 2.93 4.843 3.38 Q 3.246 0.883 1.292 0.278 Z M 1.663 1.28 Q 2.413 1.635 3.195 2.718 Q 2.083 2.778 1.595 3.884 Q 1.309 2.7 1.663 1.28 M 3.802 7.908 Q 4.426 8.069 3.284 9.003 Q 3.824 9.32 4.557 10.141 Q 4.812 10.869 4.849 11.671 Q 4.371 10.09 2.642 9.144 Q 2.438 9.033 2.609 8.922 Q 3.229 8.537 3.802 7.908 M 8.469 7.927 Q 8.955 8.469 9.646 8.926 Q 9.791 9.032 9.647 9.136 Q 7.821 10.157 7.389 11.702 Q 7.464 10.869 7.709 10.119 Q 8.219 9.53 8.956 9.025 Q 7.81 7.927 8.469 7.927';\n\nconst DEFAULT_VIEW_BOX = '0.244 0.155 11.72 14.25';\n\nfunction AnimatedLogo(props: AnimatedLogoProps): ReactElement {\n const {\n path = DEFAULT_PATH,\n viewBox = DEFAULT_VIEW_BOX,\n size = 96,\n color,\n duration = 4.2,\n loop = true,\n fill = true,\n spin = false,\n scale = false,\n className,\n style,\n classNames,\n styles: slotStyles,\n ...rest\n } = props;\n\n const pathRef = useRef<SVGPathElement>(null);\n const [ready, setReady] = useState(false);\n\n useEffect(() => {\n const pathEl = pathRef.current;\n if (!pathEl) return;\n\n setReady(false);\n const length = pathEl.getTotalLength();\n pathEl.style.setProperty('--animated-logo-length', String(length));\n pathEl.style.strokeDasharray = String(length);\n pathEl.style.strokeDashoffset = String(length);\n\n const frame = requestAnimationFrame(() => setReady(true));\n return () => cancelAnimationFrame(frame);\n }, [path]);\n\n const pathStyle: CSSProperties = {\n animationDuration: `${duration}s`,\n ...(color ? { stroke: color, fill: color } : undefined),\n ...slotStyles?.path,\n };\n\n return (\n <svg\n {...rest}\n className={cx(styles.animatedLogo, className)}\n style={{ width: size, height: size, ...style }}\n viewBox={viewBox}\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <g\n className={cx(ready && scale && (loop ? styles.animatedLogoScaleLoop : styles.animatedLogoScaleOnce))}\n style={{ animationDuration: `${duration}s` }}\n >\n <g\n className={cx(ready && spin && (loop ? styles.animatedLogoSpinLoop : styles.animatedLogoSpinOnce))}\n style={{ animationDuration: `${duration}s` }}\n >\n <path\n ref={pathRef}\n className={cx(\n styles.animatedLogoPath,\n ready &&\n (loop\n ? fill\n ? styles.animatedLogoPathLoop\n : styles.animatedLogoPathLoopNoFill\n : fill\n ? styles.animatedLogoPathOnce\n : styles.animatedLogoPathOnceNoFill),\n classNames?.path\n )}\n style={pathStyle}\n strokeWidth={0.1}\n strokeLinejoin=\"round\"\n strokeLinecap=\"round\"\n d={path}\n />\n </g>\n </g>\n </svg>\n );\n}\n\nexport default AnimatedLogo;\n"],"mappings":"uKAOA,IAAM,EACJ,8qBAEI,EAAmB,0BAEzB,SAAS,EAAa,EAAwC,CAC5D,GAAM,CACJ,OAAO,EACP,UAAU,EACV,OAAO,GACP,QACA,WAAW,IACX,OAAO,GACP,OAAO,GACP,OAAO,GACP,QAAQ,GACR,YACA,QACA,aACA,OAAQ,EACR,GAAG,GACD,EAEE,EAAU,EAAuB,IAAI,EACrC,CAAC,EAAO,GAAY,EAAS,EAAK,EAExC,MAAgB,CACd,IAAM,EAAS,EAAQ,QACvB,GAAI,CAAC,EAAQ,OAEb,EAAS,EAAK,EACd,IAAM,EAAS,EAAO,eAAe,EACrC,EAAO,MAAM,YAAY,yBAA0B,OAAO,CAAM,CAAC,EACjE,EAAO,MAAM,gBAAkB,OAAO,CAAM,EAC5C,EAAO,MAAM,iBAAmB,OAAO,CAAM,EAE7C,IAAM,EAAQ,0BAA4B,EAAS,EAAI,CAAC,EACxD,UAAa,qBAAqB,CAAK,CACzC,EAAG,CAAC,CAAI,CAAC,EAET,IAAM,EAA2B,CAC/B,kBAAmB,GAAG,EAAS,GAC/B,GAAI,EAAQ,CAAE,OAAQ,EAAO,KAAM,CAAM,EAAI,IAAA,GAC7C,GAAG,GAAY,IACjB,EAEA,OACE,EAAC,MAAD,CACE,GAAI,EACJ,UAAW,EAAG,EAAO,aAAc,CAAS,EAC5C,MAAO,CAAE,MAAO,EAAM,OAAQ,EAAM,GAAG,CAAM,EACpC,UACT,MAAM,sCAEN,EAAC,IAAD,CACE,UAAW,EAAG,GAAS,IAAU,EAAO,EAAO,sBAAwB,EAAO,sBAAsB,EACpG,MAAO,CAAE,kBAAmB,GAAG,EAAS,EAAG,WAE3C,EAAC,IAAD,CACE,UAAW,EAAG,GAAS,IAAS,EAAO,EAAO,qBAAuB,EAAO,qBAAqB,EACjG,MAAO,CAAE,kBAAmB,GAAG,EAAS,EAAG,WAE3C,EAAC,OAAD,CACE,IAAK,EACL,UAAW,EACT,EAAO,iBACP,IACG,EACG,EACE,EAAO,qBACP,EAAO,2BACT,EACE,EAAO,qBACP,EAAO,4BACf,GAAY,IACd,EACA,MAAO,EACP,YAAa,GACb,eAAe,QACf,cAAc,QACd,EAAG,CACJ,CAAA,CACA,CAAA,CACF,CAAA,CACA,CAAA,CAET"}
@@ -0,0 +1,2 @@
1
+ var e={animatedLogo:`animatedLogo_7zZx1`,"animatedLogo-path":`animatedLogo-path_pP1g2`,animatedLogoPath:`animatedLogo-path_pP1g2`,"animatedLogo-pathLoop":`animatedLogo-pathLoop_i83B-`,animatedLogoPathLoop:`animatedLogo-pathLoop_i83B-`,animatedLogoRevealLoop:`animatedLogoRevealLoop_lH4zm`,"animatedLogo-pathOnce":`animatedLogo-pathOnce_gEYxA`,animatedLogoPathOnce:`animatedLogo-pathOnce_gEYxA`,animatedLogoRevealOnce:`animatedLogoRevealOnce_NEt2W`,"animatedLogo-pathLoopNoFill":`animatedLogo-pathLoopNoFill_M3ewW`,animatedLogoPathLoopNoFill:`animatedLogo-pathLoopNoFill_M3ewW`,animatedLogoRevealLoopNoFill:`animatedLogoRevealLoopNoFill_mfZJo`,"animatedLogo-pathOnceNoFill":`animatedLogo-pathOnceNoFill_hiqiK`,animatedLogoPathOnceNoFill:`animatedLogo-pathOnceNoFill_hiqiK`,animatedLogoRevealOnceNoFill:`animatedLogoRevealOnceNoFill_sdu0s`,"animatedLogo-spinLoop":`animatedLogo-spinLoop_Lfz9H`,animatedLogoSpinLoop:`animatedLogo-spinLoop_Lfz9H`,"animatedLogo-spinOnce":`animatedLogo-spinOnce_pXZUX`,animatedLogoSpinOnce:`animatedLogo-spinOnce_pXZUX`,"animatedLogo-scaleLoop":`animatedLogo-scaleLoop_yox9X`,animatedLogoScaleLoop:`animatedLogo-scaleLoop_yox9X`,"animatedLogo-scaleOnce":`animatedLogo-scaleOnce_ZNKV7`,animatedLogoScaleOnce:`animatedLogo-scaleOnce_ZNKV7`,animatedLogoRotateLoop:`animatedLogoRotateLoop_oPtfw`,animatedLogoRotateOnce:`animatedLogoRotateOnce_Ia1H1`,animatedLogoGrowLoop:`animatedLogoGrowLoop_lZjug`,animatedLogoGrowOnce:`animatedLogoGrowOnce_xHfCV`};export{e as default};
2
+ //# sourceMappingURL=animatedLogo.module.mjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"animatedLogo.module.mjs","names":[],"sources":["../../../../package/common/animatedLogo/animatedLogo.module.pcss"],"sourcesContent":[".animatedLogo {\n display: inline-block;\n overflow: visible;\n\n &-path {\n stroke: var(--primary-color);\n fill: var(--primary-color);\n fill-opacity: 0;\n }\n\n &-pathLoop {\n animation-name: animatedLogoRevealLoop;\n animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);\n animation-iteration-count: infinite;\n }\n\n &-pathOnce {\n animation-name: animatedLogoRevealOnce;\n animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);\n animation-iteration-count: 1;\n animation-fill-mode: forwards;\n }\n\n &-pathLoopNoFill {\n animation-name: animatedLogoRevealLoopNoFill;\n animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);\n animation-iteration-count: infinite;\n }\n\n &-pathOnceNoFill {\n animation-name: animatedLogoRevealOnceNoFill;\n animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);\n animation-iteration-count: 1;\n animation-fill-mode: forwards;\n }\n\n &-spinLoop,\n &-spinOnce,\n &-scaleLoop,\n &-scaleOnce {\n display: inline-block;\n transform-box: fill-box;\n transform-origin: center;\n animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);\n }\n\n &-spinLoop {\n animation-name: animatedLogoRotateLoop;\n animation-iteration-count: infinite;\n }\n\n &-spinOnce {\n animation-name: animatedLogoRotateOnce;\n animation-iteration-count: 1;\n animation-fill-mode: forwards;\n }\n\n &-scaleLoop {\n animation-name: animatedLogoGrowLoop;\n animation-iteration-count: infinite;\n }\n\n &-scaleOnce {\n animation-name: animatedLogoGrowOnce;\n animation-iteration-count: 1;\n animation-fill-mode: forwards;\n }\n\n @media (prefers-reduced-motion: reduce) {\n &-pathLoop,\n &-pathOnce {\n animation: none;\n fill-opacity: 1;\n stroke-dashoffset: 0;\n }\n\n &-pathLoopNoFill,\n &-pathOnceNoFill {\n animation: none;\n stroke-dashoffset: 0;\n }\n\n &-spinLoop,\n &-spinOnce,\n &-scaleLoop,\n &-scaleOnce {\n animation: none;\n }\n }\n}\n\n@keyframes animatedLogoRevealLoop {\n 0% {\n stroke-dashoffset: var(--animated-logo-length);\n fill-opacity: 0;\n }\n\n 38% {\n stroke-dashoffset: 0;\n fill-opacity: 0;\n }\n\n 62% {\n fill-opacity: 1;\n }\n\n 86% {\n fill-opacity: 1;\n }\n\n 96% {\n stroke-dashoffset: 0;\n fill-opacity: 0;\n }\n\n 100% {\n stroke-dashoffset: var(--animated-logo-length);\n fill-opacity: 0;\n }\n}\n\n@keyframes animatedLogoRevealOnce {\n 0% {\n stroke-dashoffset: var(--animated-logo-length);\n fill-opacity: 0;\n }\n\n 45% {\n stroke-dashoffset: 0;\n fill-opacity: 0;\n }\n\n 100% {\n fill-opacity: 1;\n }\n}\n\n@keyframes animatedLogoRevealLoopNoFill {\n 0% {\n stroke-dashoffset: var(--animated-logo-length);\n }\n\n 38% {\n stroke-dashoffset: 0;\n }\n\n 86% {\n stroke-dashoffset: 0;\n }\n\n 100% {\n stroke-dashoffset: var(--animated-logo-length);\n }\n}\n\n@keyframes animatedLogoRevealOnceNoFill {\n 0% {\n stroke-dashoffset: var(--animated-logo-length);\n }\n\n 45% {\n stroke-dashoffset: 0;\n }\n\n 100% {\n stroke-dashoffset: 0;\n }\n}\n\n@keyframes animatedLogoRotateLoop {\n 0% {\n transform: rotate(180deg);\n }\n\n 38% {\n transform: rotate(0deg);\n }\n\n 100% {\n transform: rotate(0deg);\n }\n}\n\n@keyframes animatedLogoRotateOnce {\n 0% {\n transform: rotate(180deg);\n }\n\n 45% {\n transform: rotate(0deg);\n }\n\n 100% {\n transform: rotate(0deg);\n }\n}\n\n@keyframes animatedLogoGrowLoop {\n 0% {\n transform: scale(0);\n }\n\n 38% {\n transform: scale(1);\n }\n\n 100% {\n transform: scale(1);\n }\n}\n\n@keyframes animatedLogoGrowOnce {\n 0% {\n transform: scale(0);\n }\n\n 45% {\n transform: scale(1);\n }\n\n 100% {\n transform: scale(1);\n }\n}\n"],"mappings":""}
@@ -1 +1 @@
1
- {"version":3,"file":"datePicker.mjs","names":[],"sources":["../../../../package/common/datePicker/datePicker.tsx"],"sourcesContent":["import React, { useState, useEffect, useRef } from 'react';\nimport cx from 'classnames';\nimport Input from '../input';\nimport { useComponentDefaults } from '../configProvider';\nimport DatePickerMonth from './components/datePickerMonth';\nimport { faChevronLeft, faChevronRight } from '@fortawesome/free-solid-svg-icons';\nimport { getLocale } from 'services/localization';\nimport ActionIcon from '../actionIcon';\nimport Modal from '../modal';\nimport FloatingMenu from '../floatingMenu';\nimport Dropdown from '../dropdown';\nimport { Align } from '../floatingMenu/floatingMenu.types';\nimport InputMask, { InputState, BeforeMaskedStateChangeStates } from '@mona-health/react-input-mask';\nimport { getDateFromDayMonthAndYear, getMonthName, getMonthNames, getDateString, correctDateMaskValue } from './dateFunctions';\nimport Button from '../button';\nimport Tooltip from '../tooltip';\nimport type FormValidator from 'services/formValidation/formValidator';\n\nimport styles from './datePicker.module.pcss';\n\nexport interface DatePickerProps {\n className?: string;\n selected?: Date;\n onSelect?: (date: Date | null) => void;\n formValidator?: FormValidator | null;\n noInput?: boolean;\n noHeader?: boolean;\n isModal?: boolean;\n isInline?: boolean;\n onChange?: (date: Date | null) => void;\n minDate?: Date | null;\n maxDate?: Date | null;\n children?: React.ReactNode;\n showClearButton?: boolean;\n label?: string;\n isValid?: boolean;\n errorMessage?: string;\n isRequired?: boolean;\n startDate?: Date;\n endDate?: Date;\n}\n\nexport default function DatePicker(props: DatePickerProps) {\n const {\n className = '',\n selected,\n onSelect = () => null,\n formValidator = null,\n noInput = false,\n noHeader = false,\n isModal = false,\n isInline = false,\n onChange = () => null,\n minDate = null,\n maxDate = null,\n children = null,\n showClearButton = false,\n label = '',\n isValid = true,\n errorMessage = '',\n isRequired = false,\n startDate,\n endDate,\n } = useComponentDefaults('DatePicker', props);\n const getCurrValue = (): Date | undefined =>\n formValidator ? (formValidator.value as Date) : selected;\n\n const initialDate = getCurrValue() ?? new Date();\n\n const [currentMonth, setCurrentMonth] = useState(initialDate.getMonth() + 1);\n const [currentYear, setCurrentYear] = useState(initialDate.getFullYear());\n const [isPickerOpen, setIsPickerOpen] = useState(false);\n const [currentDateString, setCurrentDateString] = useState(() =>\n getCurrValue() ? getDateString(initialDate) : ''\n );\n const [isFocused, setIsFocused] = useState(false);\n const [isHovered, setIsHovered] = useState(false);\n const [, forceUpdate] = useState(0);\n const [prevSelected, setPrevSelected] = useState(selected);\n\n const fvRef = useRef(formValidator);\n\n // Sync navigation view when `selected` prop changes externally\n if (prevSelected !== selected) {\n setPrevSelected(selected);\n const d = selected ?? new Date();\n setCurrentMonth(d.getMonth() + 1);\n setCurrentYear(d.getFullYear());\n setCurrentDateString(selected ? getDateString(selected) : '');\n }\n\n // Subscribe to formValidator updates (external system → setState in callback)\n useEffect(() => {\n fvRef.current = formValidator;\n if (!formValidator) return;\n const listener = () => {\n const val = formValidator.value as Date | undefined;\n if (val) {\n setCurrentMonth(val.getMonth() + 1);\n setCurrentYear(val.getFullYear());\n setCurrentDateString(getDateString(val));\n } else {\n setCurrentDateString('');\n }\n forceUpdate((n: number) => n + 1);\n };\n formValidator.registerOnUpdateListener(listener);\n return () => formValidator.removeOnUpdateListener(listener);\n }, [formValidator]);\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?.validators.find(\n (v) => (v as { validatorId?: string }).validatorId === 'required'\n ));\n };\n\n const handleChange = (date: Date | null) => {\n setCurrentDateString(date ? getDateString(date) : '');\n if (formValidator) formValidator.set(date);\n onChange(date);\n };\n\n const handleSelect = (date: Date | null) => {\n handleChange(date);\n onSelect(date);\n setIsPickerOpen(false);\n };\n\n const changeMonth = (delta: number) => {\n setCurrentMonth((prev) => {\n let next = prev + delta;\n if (next < 1) { next = 12; setCurrentYear((y) => y - 1); }\n else if (next > 12) { next = 1; setCurrentYear((y) => y + 1); }\n return next;\n });\n };\n\n const tryParseDateString = (dateString: string): Date | null => {\n if (dateString.match(/\\d{2}\\.\\d{2}\\.\\d{4}/gi)) {\n const [day, month, year] = dateString.split('.');\n const parsedDate = getDateFromDayMonthAndYear(Number(day), Number(month), Number(year));\n if (parsedDate && parsedDate.toString() !== 'Invalid Date') {\n const isSmallerThanMaxDate = !maxDate || parsedDate <= maxDate;\n const isBiggerThanMinDate = !minDate || parsedDate >= minDate;\n if (isSmallerThanMaxDate && isBiggerThanMinDate) return parsedDate;\n }\n }\n return null;\n };\n\n const beforeMaskedStateChange = ({ previousState, nextState }: BeforeMaskedStateChangeStates): InputState => {\n // previousState is only supplied on user-driven change events; on mount/focus/blur\n // there is nothing to auto-correct, so the next state passes through unchanged.\n if (!previousState || nextState.value === previousState.value) return nextState;\n\n const corrected = correctDateMaskValue(nextState.value, previousState.value, nextState.selection ?? null);\n\n const parsedDate = tryParseDateString(corrected.value);\n if (parsedDate) handleChange(parsedDate);\n\n return corrected;\n };\n\n const getYearDropdownOptions = () => {\n let length = 400;\n let zeroOffset = new Date().getFullYear() - 200;\n if (minDate) zeroOffset = minDate.getFullYear();\n if (maxDate) length = maxDate.getFullYear() - zeroOffset + 1;\n return Array.from(Array(length).keys()).map((i) => ({ key: i + zeroOffset, label: i + zeroOffset }));\n };\n\n const currValue = getCurrValue();\n const hasErr = hasError();\n\n const header = noHeader ? null : (\n <div className={styles.datePickerHeader}>\n <ActionIcon icon={faChevronLeft} onClick={() => changeMonth(-1)} />\n <div className={styles.datePickerHeaderMonthAndYearContainer}>\n <div className={styles.datePickerHeaderMonthAndYear}>\n <Dropdown\n plainStyle\n scrollToSelected\n onChange={(v) => setCurrentMonth(v as number)}\n className={styles.datePickerHeaderMonth}\n value={getMonthName(getLocale('-'), currentYear, currentMonth, 1)}\n items={getMonthNames().map((month, index) => ({ key: index + 1, label: month }))}\n />\n <Dropdown\n plainStyle\n scrollToSelected\n useMatLabelStyle={false}\n className={styles.datePickerHeaderYear}\n onChange={(v) => setCurrentYear(v as number)}\n value={currentYear}\n items={getYearDropdownOptions()}\n />\n </div>\n </div>\n <ActionIcon icon={faChevronRight} onClick={() => changeMonth(1)} />\n </div>\n );\n\n const pickerContent = (\n <>\n {header}\n <DatePickerMonth\n className={styles.datePickerMonth}\n month={currentMonth}\n year={currentYear}\n onSelect={handleSelect}\n selectionStart={startDate ?? currValue}\n selectionEnd={endDate ?? currValue}\n minDate={minDate}\n maxDate={maxDate}\n />\n {showClearButton && <Button onClick={() => handleSelect(null)}>Clear</Button>}\n {children}\n </>\n );\n\n const input = noInput ? null : (\n <Input\n readOnly={isModal}\n label={`${label}${computedIsRequired() ? ' *' : ''}`}\n value={currentDateString}\n onChange={(v) => setCurrentDateString(v as string)}\n onClick={() => setIsPickerOpen(true)}\n customInput={\n <InputMask mask=\"99.99.9999\" maskPlaceholder=\"_\" beforeMaskedStateChange={beforeMaskedStateChange} />\n }\n onBlur={() => {\n if (fvRef.current) fvRef.current.touched = true;\n setIsFocused(false);\n handleChange(tryParseDateString(currentDateString));\n }}\n onFocus={() => setIsFocused(true)}\n onMouseEnter={() => setIsHovered(true)}\n onMouseLeave={() => setIsHovered(false)}\n isValid={!hasErr}\n />\n );\n\n const picker = (() => {\n if (isInline) return pickerContent;\n if (isModal) {\n return (\n <Modal hideHeader isOpen={isPickerOpen} onClose={() => setIsPickerOpen(false)}>\n {pickerContent}\n </Modal>\n );\n }\n return (\n <FloatingMenu\n isOpen={isPickerOpen}\n onOpenChange={(open: boolean) => setIsPickerOpen(open)}\n content={pickerContent}\n align={Align.Left}\n dontCloseOnChildClick\n >\n {input}\n </FloatingMenu>\n );\n })();\n\n return (\n <div className={cx(styles.datePicker, className)}>\n {(isModal || isInline) && input}\n {picker}\n <Tooltip\n variant=\"error\"\n message={formValidator ? formValidator.getCurrentErrorMessage() : (errorMessage || '')}\n isVisible={hasErr && (isFocused || isHovered)}\n />\n </div>\n );\n}\n"],"mappings":"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"}
1
+ {"version":3,"file":"datePicker.mjs","names":[],"sources":["../../../../package/common/datePicker/datePicker.tsx"],"sourcesContent":["import React, { useState, useEffect, useRef } from 'react';\nimport cx from 'classnames';\nimport Input from '../input';\nimport { useComponentDefaults } from '../configProvider';\nimport DatePickerMonth from './components/datePickerMonth';\nimport { faChevronLeft, faChevronRight } from '@fortawesome/free-solid-svg-icons';\nimport { getLocale } from 'services/localization';\nimport ActionIcon from '../actionIcon';\nimport Modal from '../modal';\nimport FloatingMenu from '../floatingMenu';\nimport Dropdown from '../dropdown';\nimport { Align } from '../floatingMenu/floatingMenu.types';\nimport InputMask, { InputState, BeforeMaskedStateChangeStates } from '@mona-health/react-input-mask';\nimport { getDateFromDayMonthAndYear, getMonthName, getMonthNames, getDateString, correctDateMaskValue } from './dateFunctions';\nimport Button from '../button';\nimport Tooltip from '../tooltip';\nimport type { FormValidator } from 'services/formValidation';\n\nimport styles from './datePicker.module.pcss';\n\nexport interface DatePickerProps {\n className?: string;\n selected?: Date;\n onSelect?: (date: Date | null) => void;\n formValidator?: FormValidator | null;\n noInput?: boolean;\n noHeader?: boolean;\n isModal?: boolean;\n isInline?: boolean;\n onChange?: (date: Date | null) => void;\n minDate?: Date | null;\n maxDate?: Date | null;\n children?: React.ReactNode;\n showClearButton?: boolean;\n label?: string;\n isValid?: boolean;\n errorMessage?: string;\n isRequired?: boolean;\n startDate?: Date;\n endDate?: Date;\n}\n\nexport default function DatePicker(props: DatePickerProps) {\n const {\n className = '',\n selected,\n onSelect = () => null,\n formValidator = null,\n noInput = false,\n noHeader = false,\n isModal = false,\n isInline = false,\n onChange = () => null,\n minDate = null,\n maxDate = null,\n children = null,\n showClearButton = false,\n label = '',\n isValid = true,\n errorMessage = '',\n isRequired = false,\n startDate,\n endDate,\n } = useComponentDefaults('DatePicker', props);\n const getCurrValue = (): Date | undefined =>\n formValidator ? (formValidator.value as Date) : selected;\n\n const initialDate = getCurrValue() ?? new Date();\n\n const [currentMonth, setCurrentMonth] = useState(initialDate.getMonth() + 1);\n const [currentYear, setCurrentYear] = useState(initialDate.getFullYear());\n const [isPickerOpen, setIsPickerOpen] = useState(false);\n const [currentDateString, setCurrentDateString] = useState(() =>\n getCurrValue() ? getDateString(initialDate) : ''\n );\n const [isFocused, setIsFocused] = useState(false);\n const [isHovered, setIsHovered] = useState(false);\n const [, forceUpdate] = useState(0);\n const [prevSelected, setPrevSelected] = useState(selected);\n\n const fvRef = useRef(formValidator);\n\n // Sync navigation view when `selected` prop changes externally\n if (prevSelected !== selected) {\n setPrevSelected(selected);\n const d = selected ?? new Date();\n setCurrentMonth(d.getMonth() + 1);\n setCurrentYear(d.getFullYear());\n setCurrentDateString(selected ? getDateString(selected) : '');\n }\n\n // Subscribe to formValidator updates (external system → setState in callback)\n useEffect(() => {\n fvRef.current = formValidator;\n if (!formValidator) return;\n const listener = () => {\n const val = formValidator.value as Date | undefined;\n if (val) {\n setCurrentMonth(val.getMonth() + 1);\n setCurrentYear(val.getFullYear());\n setCurrentDateString(getDateString(val));\n } else {\n setCurrentDateString('');\n }\n forceUpdate((n: number) => n + 1);\n };\n formValidator.registerOnUpdateListener(listener);\n return () => formValidator.removeOnUpdateListener(listener);\n }, [formValidator]);\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?.validators.find(\n (v) => (v as { validatorId?: string }).validatorId === 'required'\n ));\n };\n\n const handleChange = (date: Date | null) => {\n setCurrentDateString(date ? getDateString(date) : '');\n if (formValidator) formValidator.set(date);\n onChange(date);\n };\n\n const handleSelect = (date: Date | null) => {\n handleChange(date);\n onSelect(date);\n setIsPickerOpen(false);\n };\n\n const changeMonth = (delta: number) => {\n setCurrentMonth((prev) => {\n let next = prev + delta;\n if (next < 1) { next = 12; setCurrentYear((y) => y - 1); }\n else if (next > 12) { next = 1; setCurrentYear((y) => y + 1); }\n return next;\n });\n };\n\n const tryParseDateString = (dateString: string): Date | null => {\n if (dateString.match(/\\d{2}\\.\\d{2}\\.\\d{4}/gi)) {\n const [day, month, year] = dateString.split('.');\n const parsedDate = getDateFromDayMonthAndYear(Number(day), Number(month), Number(year));\n if (parsedDate && parsedDate.toString() !== 'Invalid Date') {\n const isSmallerThanMaxDate = !maxDate || parsedDate <= maxDate;\n const isBiggerThanMinDate = !minDate || parsedDate >= minDate;\n if (isSmallerThanMaxDate && isBiggerThanMinDate) return parsedDate;\n }\n }\n return null;\n };\n\n const beforeMaskedStateChange = ({ previousState, nextState }: BeforeMaskedStateChangeStates): InputState => {\n // previousState is only supplied on user-driven change events; on mount/focus/blur\n // there is nothing to auto-correct, so the next state passes through unchanged.\n if (!previousState || nextState.value === previousState.value) return nextState;\n\n const corrected = correctDateMaskValue(nextState.value, previousState.value, nextState.selection ?? null);\n\n const parsedDate = tryParseDateString(corrected.value);\n if (parsedDate) handleChange(parsedDate);\n\n return corrected;\n };\n\n const getYearDropdownOptions = () => {\n let length = 400;\n let zeroOffset = new Date().getFullYear() - 200;\n if (minDate) zeroOffset = minDate.getFullYear();\n if (maxDate) length = maxDate.getFullYear() - zeroOffset + 1;\n return Array.from(Array(length).keys()).map((i) => ({ key: i + zeroOffset, label: i + zeroOffset }));\n };\n\n const currValue = getCurrValue();\n const hasErr = hasError();\n\n const header = noHeader ? null : (\n <div className={styles.datePickerHeader}>\n <ActionIcon icon={faChevronLeft} onClick={() => changeMonth(-1)} />\n <div className={styles.datePickerHeaderMonthAndYearContainer}>\n <div className={styles.datePickerHeaderMonthAndYear}>\n <Dropdown\n plainStyle\n scrollToSelected\n onChange={(v) => setCurrentMonth(v as number)}\n className={styles.datePickerHeaderMonth}\n value={getMonthName(getLocale('-'), currentYear, currentMonth, 1)}\n items={getMonthNames().map((month, index) => ({ key: index + 1, label: month }))}\n />\n <Dropdown\n plainStyle\n scrollToSelected\n useMatLabelStyle={false}\n className={styles.datePickerHeaderYear}\n onChange={(v) => setCurrentYear(v as number)}\n value={currentYear}\n items={getYearDropdownOptions()}\n />\n </div>\n </div>\n <ActionIcon icon={faChevronRight} onClick={() => changeMonth(1)} />\n </div>\n );\n\n const pickerContent = (\n <>\n {header}\n <DatePickerMonth\n className={styles.datePickerMonth}\n month={currentMonth}\n year={currentYear}\n onSelect={handleSelect}\n selectionStart={startDate ?? currValue}\n selectionEnd={endDate ?? currValue}\n minDate={minDate}\n maxDate={maxDate}\n />\n {showClearButton && <Button onClick={() => handleSelect(null)}>Clear</Button>}\n {children}\n </>\n );\n\n const input = noInput ? null : (\n <Input\n readOnly={isModal}\n label={`${label}${computedIsRequired() ? ' *' : ''}`}\n value={currentDateString}\n onChange={(v) => setCurrentDateString(v as string)}\n onClick={() => setIsPickerOpen(true)}\n customInput={\n <InputMask mask=\"99.99.9999\" maskPlaceholder=\"_\" beforeMaskedStateChange={beforeMaskedStateChange} />\n }\n onBlur={() => {\n if (fvRef.current) fvRef.current.touched = true;\n setIsFocused(false);\n handleChange(tryParseDateString(currentDateString));\n }}\n onFocus={() => setIsFocused(true)}\n onMouseEnter={() => setIsHovered(true)}\n onMouseLeave={() => setIsHovered(false)}\n isValid={!hasErr}\n />\n );\n\n const picker = (() => {\n if (isInline) return pickerContent;\n if (isModal) {\n return (\n <Modal hideHeader isOpen={isPickerOpen} onClose={() => setIsPickerOpen(false)}>\n {pickerContent}\n </Modal>\n );\n }\n return (\n <FloatingMenu\n isOpen={isPickerOpen}\n onOpenChange={(open: boolean) => setIsPickerOpen(open)}\n content={pickerContent}\n align={Align.Left}\n dontCloseOnChildClick\n >\n {input}\n </FloatingMenu>\n );\n })();\n\n return (\n <div className={cx(styles.datePicker, className)}>\n {(isModal || isInline) && input}\n {picker}\n <Tooltip\n variant=\"error\"\n message={formValidator ? formValidator.getCurrentErrorMessage() : (errorMessage || '')}\n isVisible={hasErr && (isFocused || isHovered)}\n />\n </div>\n );\n}\n"],"mappings":"0/BA0CA,SAAwB,EAAW,EAAwB,CACzD,GAAM,CACN,aAAY,GACZ,WACA,eAAiB,KACjB,gBAAgB,KAChB,UAAU,GACV,YAAW,GACX,UAAU,GACV,WAAW,GACX,gBAAiB,KACjB,UAAU,KACV,UAAU,KACV,YAAW,KACX,mBAAkB,GAClB,SAAQ,GACR,UAAU,GACV,eAAe,GACf,aAAa,GACb,YACA,WACI,EAAqB,aAAc,CAAK,EACtC,MACJ,EAAiB,EAAc,MAAiB,EAE5C,EAAc,EAAa,GAAK,IAAI,KAEpC,CAAC,EAAc,GAAmB,EAAS,EAAY,SAAS,EAAI,CAAC,EACrE,CAAC,EAAa,GAAkB,EAAS,EAAY,YAAY,CAAC,EAClE,CAAC,EAAc,GAAmB,EAAS,EAAK,EAChD,CAAC,EAAmB,GAAwB,MAChD,EAAa,EAAI,EAAc,CAAW,EAAI,EAChD,EACM,CAAC,GAAW,GAAgB,EAAS,EAAK,EAC1C,CAAC,GAAW,GAAgB,EAAS,EAAK,EAC1C,EAAG,IAAe,EAAS,CAAC,EAC5B,CAAC,GAAc,IAAmB,EAAS,CAAQ,EAEnD,EAAQ,EAAO,CAAa,EAGlC,GAAI,KAAiB,EAAU,CAC7B,GAAgB,CAAQ,EACxB,IAAM,EAAI,GAAY,IAAI,KAC1B,EAAgB,EAAE,SAAS,EAAI,CAAC,EAChC,EAAe,EAAE,YAAY,CAAC,EAC9B,EAAqB,EAAW,EAAc,CAAQ,EAAI,EAAE,CAC9D,CAGA,MAAgB,CAEd,GADA,EAAM,QAAU,EACZ,CAAC,EAAe,OACpB,IAAM,MAAiB,CACrB,IAAM,EAAM,EAAc,MACtB,GACF,EAAgB,EAAI,SAAS,EAAI,CAAC,EAClC,EAAe,EAAI,YAAY,CAAC,EAChC,EAAqB,EAAc,CAAG,CAAC,GAEvC,EAAqB,EAAE,EAEzB,GAAa,GAAc,EAAI,CAAC,CAClC,EAEA,OADA,EAAc,yBAAyB,CAAQ,MAClC,EAAc,uBAAuB,CAAQ,CAC5D,EAAG,CAAC,CAAa,CAAC,EAElB,IAAM,OACG,EACF,EAAc,SAAW,EAAc,SAAS,EAChD,CAAC,GAAW,CAAC,CAAC,EAGf,OACG,CAAC,EAAE,GAAc,GAAe,WAAW,KAC/C,GAAO,EAA+B,cAAgB,UACzD,GAGI,EAAgB,GAAsB,CAC1C,EAAqB,EAAO,EAAc,CAAI,EAAI,EAAE,EAChD,GAAe,EAAc,IAAI,CAAI,EACzC,GAAS,CAAI,CACf,EAEM,EAAgB,GAAsB,CAC1C,EAAa,CAAI,EACjB,EAAS,CAAI,EACb,EAAgB,EAAK,CACvB,EAEM,EAAe,GAAkB,CACrC,EAAiB,GAAS,CACxB,IAAI,EAAO,EAAO,EAGlB,OAFI,EAAO,GAAK,EAAO,GAAI,EAAgB,GAAM,EAAI,CAAC,GAC7C,EAAO,KAAM,EAAO,EAAG,EAAgB,GAAM,EAAI,CAAC,GACpD,CACT,CAAC,CACH,EAEM,EAAsB,GAAoC,CAC9D,GAAI,EAAW,MAAM,uBAAuB,EAAG,CAC7C,GAAM,CAAC,EAAK,EAAO,GAAQ,EAAW,MAAM,GAAG,EACzC,EAAa,EAA2B,OAAO,CAAG,EAAG,OAAO,CAAK,EAAG,OAAO,CAAI,CAAC,EACtF,GAAI,GAAc,EAAW,SAAS,IAAM,iBACb,CAAC,GAAW,GAAc,KAC3B,CAAC,GAAW,GAAc,GACL,OAAO,CAE5D,CACA,OAAO,IACT,EAEM,IAA2B,CAAE,gBAAe,eAA2D,CAG3G,GAAI,CAAC,GAAiB,EAAU,QAAU,EAAc,MAAO,OAAO,EAEtE,IAAM,EAAY,GAAqB,EAAU,MAAO,EAAc,MAAO,EAAU,WAAa,IAAI,EAElG,EAAa,EAAmB,EAAU,KAAK,EAGrD,OAFI,GAAY,EAAa,CAAU,EAEhC,CACT,EAEM,OAA+B,CACnC,IAAI,EAAS,IACT,EAAa,IAAI,KAAK,EAAE,YAAY,EAAI,IAG5C,OAFI,IAAS,EAAa,EAAQ,YAAY,GAC1C,IAAS,EAAS,EAAQ,YAAY,EAAI,EAAa,GACpD,MAAM,KAAK,MAAM,CAAM,EAAE,KAAK,CAAC,EAAE,IAAK,IAAO,CAAE,IAAK,EAAI,EAAY,MAAO,EAAI,CAAW,EAAE,CACrG,EAEM,EAAY,EAAa,EACzB,EAAS,GAAS,EA8BlB,EACJ,EAAA,GAAA,CAAA,SAAA,CA7Ba,GAAW,KACxB,EAAC,MAAD,CAAK,UAAW,EAAO,0BAAvB,CACE,EAAC,EAAD,CAAY,KAAM,GAAe,YAAe,EAAY,EAAE,CAAI,CAAA,EAClE,EAAC,MAAD,CAAK,UAAW,EAAO,+CACrB,EAAC,MAAD,CAAK,UAAW,EAAO,sCAAvB,CACE,EAAC,EAAD,CACE,WAAA,GACA,iBAAA,GACA,SAAW,GAAM,EAAgB,CAAW,EAC5C,UAAW,EAAO,sBAClB,MAAO,GAAa,GAAU,GAAG,EAAG,EAAa,EAAc,CAAC,EAChE,MAAO,GAAc,EAAE,KAAK,EAAO,KAAW,CAAE,IAAK,EAAQ,EAAG,MAAO,CAAM,EAAE,CAChF,CAAA,EACD,EAAC,EAAD,CACE,WAAA,GACA,iBAAA,GACA,iBAAkB,GAClB,UAAW,EAAO,qBAClB,SAAW,GAAM,EAAe,CAAW,EAC3C,MAAO,EACP,MAAO,GAAuB,CAC/B,CAAA,CACE,GACF,CAAA,EACL,EAAC,EAAD,CAAY,KAAM,GAAgB,YAAe,EAAY,CAAC,CAAI,CAAA,CAC/D,IAMH,EAAC,GAAD,CACE,UAAW,EAAO,gBAClB,MAAO,EACP,KAAM,EACN,SAAU,EACV,eAAgB,GAAa,EAC7B,aAAc,GAAW,EAChB,UACA,SACV,CAAA,EACA,IAAmB,EAAC,EAAD,CAAQ,YAAe,EAAa,IAAI,WAAG,OAAa,CAAA,EAC3E,EACD,CAAA,CAAA,EAGE,EAAQ,EAAU,KACtB,EAAC,EAAD,CACE,SAAU,EACV,MAAO,GAAG,KAAQ,GAAmB,EAAI,KAAO,KAChD,MAAO,EACP,SAAW,GAAM,EAAqB,CAAW,EACjD,YAAe,EAAgB,EAAI,EACnC,YACE,EAAC,EAAD,CAAW,KAAK,aAAa,gBAAgB,IAA6B,0BAA0B,CAAA,EAEtG,WAAc,CACR,EAAM,UAAS,EAAM,QAAQ,QAAU,IAC3C,EAAa,EAAK,EAClB,EAAa,EAAmB,CAAiB,CAAC,CACpD,EACA,YAAe,EAAa,EAAI,EAChC,iBAAoB,EAAa,EAAI,EACrC,iBAAoB,EAAa,EAAK,EACtC,QAAS,CAAC,CACX,CAAA,EAGG,GACA,EAAiB,EACjB,EAEA,EAAC,EAAD,CAAO,WAAA,GAAW,OAAQ,EAAc,YAAe,EAAgB,EAAK,WACzE,CACI,CAAA,EAIT,EAAC,EAAD,CACE,OAAQ,EACR,aAAe,GAAkB,EAAgB,CAAI,EACrD,QAAS,EACT,MAAO,EAAM,KACb,sBAAA,YAEC,CACW,CAAA,EAIlB,OACE,EAAC,MAAD,CAAK,UAAW,EAAG,EAAO,WAAY,EAAS,WAA/C,EACI,GAAW,IAAa,EACzB,GACD,EAAC,EAAD,CACE,QAAQ,QACR,QAAS,EAAgB,EAAc,uBAAuB,EAAK,GAAgB,GACnF,UAAW,IAAW,IAAa,GACpC,CAAA,CACE,GAET"}
@@ -1,2 +1,2 @@
1
- import{useComponentDefaults as e}from"../configProvider/useComponentDefaults.mjs";import t from"../bodyEnd/bodyEnd.mjs";import{useFloatingPosition as n}from"../floatingMenu/useFloatingPosition.mjs";import r from"../tooltip/tooltip.mjs";import ee from"../infiniteBlock/infiniteBlock.mjs";import i from"./dropdown.module.mjs";import{useEffect as a,useRef as o,useState as s}from"react";import c from"classnames";import{FontAwesomeIcon as te}from"@fortawesome/react-fontawesome";import{faChevronDown as ne}from"@fortawesome/free-solid-svg-icons";import{jsx as l,jsxs as u}from"react/jsx-runtime";import re from"downshift";function d(d){let{errorMessage:f=``,className:ie=``,label:p=``,value:m=``,isValid:ae=!0,tabIndex:oe=0,isRequired:se=!1,customProps:h={},isRow:ce=!1,disabled:g=!1,readOnly:_=!1,onScroll:le=()=>Promise.resolve(),onClick:v,onChange:y,onFocus:b=null,onBlur:ue=null,onMouseEnter:x=null,onMouseLeave:S=null,dropdownLabel:C,isDropdownListWider:w=!1,inputClassName:T=``,dropDownIconClassName:E=``,dropDownClassName:D=``,formValidator:O=null,labelClassName:de=``,dropDownInputClassName:fe=``,items:k=[],useMatLabelStyle:A=!0,alwaysFloatLabel:j=!1,placeholder:M=``,plainStyle:N=!1,scrollToSelected:P=!1,reactRef:F,...I}=e(`Dropdown`,d),[L,R]=s(!1),[z,B]=s(!1),[,V]=s(0),H=o(O),U=o(null),W=o(null),[G,pe]=s(!1),[me,he]=s(10);a(()=>{if(G){let e=U.current?.getBoundingClientRect();he(e?.width??10)}},[G]),n({isOpen:G,triggerRef:U,anchorRef:W,panelRef:W,flipClassName:i.dropdownInputListAnimFlip}),a(()=>{if(H.current=O,!H.current)return;H.current.label=p??``,H.current.validate();let e=()=>V(e=>e+1);return H.current.registerOnUpdateListener(e),()=>H.current?.removeOnUpdateListener(e)},[O,p]);let ge=e=>{B(!0),x?.(e)},_e=e=>{B(!1),S?.(e)},ve=e=>{R(!0),b?.(e)},ye=e=>{H.current&&(H.current.touched=!0),R(!1),ue?.(e)},be=()=>O?O.touched&&O.hasError():!ae||!!f,K=()=>!!(se||O?.validators.find(e=>e.validatorId===`required`)),xe=e=>{O?(O.set(e),y?.(O.value,h)):y?.(e,h)},q=C,J=O?O.value:m,Y=be();k.forEach(e=>{e.key===J&&(q=e.label)});let X=q||J,Z=X==null||typeof X==`string`&&X.trim()===``,Q=K()?l(`span`,{className:i.requiredMark,children:`*`}):null,Se=p&&K()?`${p} *`:p,$=L&&!_;return u(`div`,{...I,className:c(ie,i.dropdownLabel,i.dropdown,{[i.dropdownLabelColumn]:!ce}),onMouseEnter:ge,onMouseLeave:_e,children:[l(re,{..._?{isOpen:!1}:{},onChange:e=>xe((e||{key:``}).key),itemToString:e=>e?String(e.key):``,selectedItem:k.find(e=>e.key===J)??null,onStateChange:e=>{typeof e.isOpen==`boolean`&&pe(e.isOpen)},stateReducer:(e,t)=>P&&Object.prototype.hasOwnProperty.call(t,`isOpen`)?{...t,highlightedIndex:t.isOpen?k.indexOf(e.selectedItem):null}:t,children:({getItemProps:e,getToggleButtonProps:n,isOpen:r,selectedItem:a,highlightedIndex:o,setHighlightedIndex:s})=>l(`div`,{children:u(`div`,{ref:U,onFocus:ve,onBlur:ye,className:c(i.dropdownInput,{[i.dropdownInputPlain]:N,[i.dropdownInputReadOnly]:_&&!g},fe),children:[l(`button`,{tabIndex:oe,type:`button`,disabled:g,"aria-readonly":_||void 0,style:w?{padding:`6px`,border:`none`}:{},className:c(i.dropdownInputButton,{[i.dropdownInputButtonDisabled]:g,[i.dropdownInputButtonReadOnly]:_&&!g},T),...n(),onClick:e=>{n().onClick?.(e),v?.(e)},ref:F,children:Z?`\xA0`:X}),l(`button`,{type:`button`,tabIndex:-1,disabled:g,className:c(i.dropdownInputButtonIcon,E),...n(),onClick:e=>{n().onClick?.(e),v?.(e)},children:!g&&!_&&l(te,{icon:ne,className:c(i.dropdownInputButtonIconArrow,{[i.dropdownInputButtonIconArrowOpen]:r})})}),!g&&!_&&r?l(t,{children:l(`div`,{ref:W,className:c(i.dropdownInputListAnim,{[i.dropdownInputListAnimWider]:w}),style:{width:`${me}px`},children:l(ee,{onScroll:le,className:i.dropdownInputList,setHighlightedIndex:s,children:k.map((t,n)=>l(`div`,{...e({index:n,item:t,disabled:!!t.disabled}),className:c(i.dropdownInputListItem,D,{[i.dropdownInputListItemActive]:o===n,[i.dropdownInputListItemSelected]:a===t,[i.dropdownInputListItemDisabled]:!!t.disabled}),children:t.label},t.key))})})}):null,l(`fieldset`,{className:c(i.dropdownFieldset,{[i.dropdownBorderPlain]:N,[i.dropdownBorderFocused]:$,[i.dropdownBorderInvalid]:Y,[i.dropdownBorderError]:Y}),children:l(`legend`,{className:c(i.dropdownFieldsetLegend,{[i.dropdownFieldsetLegendActive]:A&&(j||$||!Z)}),children:l(`span`,{children:Se})})}),A&&p&&u(`div`,{className:c(i.dropdownMatLabel,{[i.dropdownMatLabelFloating]:j||$||!Z}),children:[p,Q]}),A&&M&&l(`div`,{className:c(i.dropdownPlaceholder,$&&!q&&i.dropdownPlaceholderShown),children:M})]})})}),p&&!A&&u(`div`,{className:c(i.dropdownLabelText,de),children:[p,Q]}),l(r,{variant:`error`,message:O?O.getCurrentErrorMessage():f||``,isVisible:Y&&(L||z)})]})}export{d as default};
1
+ import{useComponentDefaults as e}from"../configProvider/useComponentDefaults.mjs";import t from"../bodyEnd/bodyEnd.mjs";import{useFloatingPosition as n}from"../floatingMenu/useFloatingPosition.mjs";import r from"../tooltip/tooltip.mjs";import ee from"../infiniteBlock/infiniteBlock.mjs";import i from"./dropdown.module.mjs";import{useEffect as a,useRef as o,useState as s}from"react";import c from"classnames";import{FontAwesomeIcon as te}from"@fortawesome/react-fontawesome";import{faChevronDown as ne}from"@fortawesome/free-solid-svg-icons";import{jsx as l,jsxs as u}from"react/jsx-runtime";import d from"downshift";function f(f){let{errorMessage:p=``,className:m=``,label:h=``,value:re=``,isValid:ie=!0,tabIndex:g=0,isRequired:ae=!1,customProps:_={},isRow:oe=!1,disabled:v=!1,readOnly:y=!1,onScroll:se=()=>Promise.resolve(),onClick:b,onChange:x,onFocus:ce=null,onBlur:S=null,onMouseEnter:C=null,onMouseLeave:le=null,dropdownLabel:ue,isDropdownListWider:w=!1,inputClassName:T=``,dropDownIconClassName:E=``,dropDownClassName:D=``,formValidator:O=null,labelClassName:de=``,dropDownInputClassName:fe=``,items:k=[],useMatLabelStyle:A=!0,alwaysFloatLabel:j=!1,placeholder:M=``,plainStyle:N=!1,scrollToSelected:P=!1,reactRef:F,...I}=e(`Dropdown`,f),[L,R]=s(!1),[z,B]=s(!1),[,V]=s(0),H=o(O),U=o(null),W=o(null),[G,pe]=s(!1),[me,he]=s(10);a(()=>{if(G){let e=U.current?.getBoundingClientRect();he(e?.width??10)}},[G]),n({isOpen:G,triggerRef:U,anchorRef:W,panelRef:W,flipClassName:i.dropdownInputListAnimFlip}),a(()=>{if(H.current=O,!H.current)return;H.current.label=h??``,H.current.validate();let e=()=>V(e=>e+1);return H.current.registerOnUpdateListener(e),()=>H.current?.removeOnUpdateListener(e)},[O,h]);let ge=e=>{B(!0),C?.(e)},_e=e=>{B(!1),le?.(e)},ve=e=>{R(!0),ce?.(e)},ye=e=>{H.current&&(H.current.touched=!0),R(!1),S?.(e)},be=()=>O?O.touched&&O.hasError():!ie||!!p,K=()=>!!(ae||O?.validators.find(e=>e.validatorId===`required`)),xe=e=>{O?(O.set(e),x?.(O.value,_)):x?.(e,_)},q=ue,J=O?O.value:re,Y=be();k.forEach(e=>{e.key===J&&(q=e.label)});let X=q||J,Z=X==null||typeof X==`string`&&X.trim()===``,Q=K()?l(`span`,{className:i.requiredMark,children:`*`}):null,Se=h&&K()?`${h} *`:h,$=L&&!y;return u(`div`,{...I,className:c(m,i.dropdownLabel,i.dropdown,{[i.dropdownLabelColumn]:!oe}),onMouseEnter:ge,onMouseLeave:_e,children:[l(d,{...y?{isOpen:!1}:{},onChange:e=>xe((e||{key:``}).key),itemToString:e=>e?String(e.key):``,selectedItem:k.find(e=>e.key===J)??null,onStateChange:e=>{typeof e.isOpen==`boolean`&&pe(e.isOpen)},stateReducer:(e,t)=>P&&Object.prototype.hasOwnProperty.call(t,`isOpen`)?{...t,highlightedIndex:t.isOpen?k.indexOf(e.selectedItem):null}:t,children:({getItemProps:e,getMenuProps:n,getToggleButtonProps:r,isOpen:a,selectedItem:o,highlightedIndex:s,setHighlightedIndex:d})=>l(`div`,{children:u(`div`,{ref:U,onFocus:ve,onBlur:ye,className:c(i.dropdownInput,{[i.dropdownInputPlain]:N,[i.dropdownInputReadOnly]:y&&!v},fe),children:[l(`button`,{tabIndex:g,type:`button`,disabled:v,"aria-readonly":y||void 0,style:w?{padding:`6px`,border:`none`}:{},className:c(i.dropdownInputButton,{[i.dropdownInputButtonDisabled]:v,[i.dropdownInputButtonReadOnly]:y&&!v},T),...r(),onClick:e=>{r().onClick?.(e),b?.(e)},ref:F,children:Z?`\xA0`:X}),l(`button`,{type:`button`,tabIndex:-1,disabled:v,className:c(i.dropdownInputButtonIcon,E),...r(),onClick:e=>{r().onClick?.(e),b?.(e)},children:!v&&!y&&l(te,{icon:ne,className:c(i.dropdownInputButtonIconArrow,{[i.dropdownInputButtonIconArrowOpen]:a})})}),!v&&!y&&a?l(t,{children:l(`div`,{...n({ref:e=>{W.current=e},"aria-label":h||M||void 0},{suppressRefError:!0}),className:c(i.dropdownInputListAnim,{[i.dropdownInputListAnimWider]:w}),style:{width:`${me}px`},children:l(ee,{onScroll:se,className:i.dropdownInputList,setHighlightedIndex:d,children:k.map((t,n)=>l(`div`,{...e({index:n,item:t,disabled:!!t.disabled}),className:c(i.dropdownInputListItem,D,{[i.dropdownInputListItemActive]:s===n,[i.dropdownInputListItemSelected]:o===t,[i.dropdownInputListItemDisabled]:!!t.disabled}),children:t.label},t.key))})})}):null,l(`fieldset`,{className:c(i.dropdownFieldset,{[i.dropdownBorderPlain]:N,[i.dropdownBorderFocused]:$,[i.dropdownBorderInvalid]:Y,[i.dropdownBorderError]:Y}),children:l(`legend`,{className:c(i.dropdownFieldsetLegend,{[i.dropdownFieldsetLegendActive]:A&&(j||$||!Z)}),children:l(`span`,{children:Se})})}),A&&h&&u(`div`,{className:c(i.dropdownMatLabel,{[i.dropdownMatLabelFloating]:j||$||!Z}),children:[h,Q]}),A&&M&&l(`div`,{className:c(i.dropdownPlaceholder,$&&!q&&i.dropdownPlaceholderShown),children:M})]})})}),h&&!A&&u(`div`,{className:c(i.dropdownLabelText,de),children:[h,Q]}),l(r,{variant:`error`,message:O?O.getCurrentErrorMessage():p||``,isVisible:Y&&(L||z)})]})}export{f as default};
2
2
  //# sourceMappingURL=dropdown.mjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"dropdown.mjs","names":[],"sources":["../../../../package/common/dropdown/dropdown.tsx"],"sourcesContent":["import React, { useState, useEffect, useRef } from 'react';\nimport cx from 'classnames';\nimport InfiniteBlock from 'components/common/infiniteBlock';\nimport BodyEnd from 'components/common/bodyEnd';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { faChevronDown as dropdownIcon } from '@fortawesome/free-solid-svg-icons';\nimport Downshift, { StateChangeOptions, DownshiftState } from 'downshift';\nimport Tooltip from 'components/common/tooltip';\n\nimport { useFloatingPosition } from '../floatingMenu/useFloatingPosition';\nimport { useComponentDefaults } from '../configProvider';\nimport styles from './dropdown.module.pcss';\nimport type { DropdownProps, DropdownItem } from './dropdown.types';\n\nfunction Dropdown(props: DropdownProps) {\n const {\n errorMessage = '',\n className = '',\n label = '',\n value = '',\n isValid = true,\n tabIndex = 0,\n isRequired = false,\n customProps = {},\n isRow = false,\n disabled = false,\n readOnly = false,\n onScroll = () => Promise.resolve(),\n onClick,\n onChange,\n onFocus: onFocusProp = null,\n onBlur: onBlurProp = null,\n onMouseEnter: onMouseEnterProp = null,\n onMouseLeave: onMouseLeaveProp = null,\n dropdownLabel: dropdownLabelProp,\n isDropdownListWider = false,\n inputClassName = '',\n dropDownIconClassName = '',\n dropDownClassName = '',\n formValidator = null,\n labelClassName = '',\n dropDownInputClassName = '',\n items = [],\n useMatLabelStyle = true,\n alwaysFloatLabel = false,\n placeholder = '',\n plainStyle = false,\n scrollToSelected = false,\n reactRef,\n ...rest\n } = useComponentDefaults('Dropdown', props);\n const [isFocused, setIsFocused] = useState(false);\n const [isHovered, setIsHovered] = useState(false);\n const [, forceUpdate] = useState(0);\n const fvRef = useRef(formValidator);\n const triggerRef = useRef<HTMLDivElement>(null);\n const anchorRef = useRef<HTMLDivElement>(null);\n const [menuIsOpen, setMenuIsOpen] = useState(false);\n const [triggerWidth, setTriggerWidth] = useState(10);\n\n useEffect(() => {\n if (menuIsOpen) {\n const rect = triggerRef.current?.getBoundingClientRect();\n setTriggerWidth(rect?.width ?? 10);\n }\n }, [menuIsOpen]);\n\n useFloatingPosition({\n isOpen: menuIsOpen,\n triggerRef,\n anchorRef,\n panelRef: anchorRef,\n flipClassName: styles.dropdownInputListAnimFlip,\n });\n\n useEffect(() => {\n fvRef.current = formValidator;\n if (!fvRef.current) return;\n fvRef.current.label = label ?? '';\n fvRef.current.validate();\n const listener = () => forceUpdate(n => n + 1);\n fvRef.current.registerOnUpdateListener(listener);\n return () => fvRef.current?.removeOnUpdateListener(listener);\n }, [formValidator, label]);\n\n const onMouseEnterHandler = (event: React.MouseEvent) => {\n setIsHovered(true);\n onMouseEnterProp?.(event);\n };\n\n const onMouseLeaveHandler = (event: React.MouseEvent) => {\n setIsHovered(false);\n onMouseLeaveProp?.(event);\n };\n\n const onFocusHandler = (event: React.FocusEvent) => {\n setIsFocused(true);\n onFocusProp?.(event);\n };\n\n const onBlurHandler = (event: React.FocusEvent) => {\n if (fvRef.current) fvRef.current.touched = true;\n setIsFocused(false);\n onBlurProp?.(event);\n };\n\n const hasError = (): boolean => {\n return formValidator\n ? (formValidator.touched && formValidator.hasError())\n : (!isValid || !!errorMessage);\n };\n\n const computedIsRequired = (): boolean => {\n return !!(isRequired || formValidator?.validators.find(\n (v) => (v as { validatorId?: string }).validatorId === 'required'\n ));\n };\n\n const onChangeHandler = (val: string | number): void => {\n if (formValidator) {\n formValidator.set(val);\n onChange?.(formValidator.value, customProps);\n } else {\n onChange?.(val, customProps);\n }\n };\n\n let dropdownLabel = dropdownLabelProp;\n const currentValue = formValidator ? formValidator.value as string | number : value;\n const hasErr = hasError();\n\n items.forEach((item: DropdownItem) => {\n if (item.key === currentValue) {\n dropdownLabel = item.label as string;\n }\n });\n\n const displayValue = dropdownLabel || currentValue;\n const isDisplayBlank =\n displayValue == null ||\n (typeof displayValue === 'string' && displayValue.trim() === '');\n\n const requiredMark = computedIsRequired() ? <span className={styles.requiredMark}>*</span> : null;\n const editedLabel = label && computedIsRequired() ? `${label} *` : label;\n\n const showFocus = isFocused && !readOnly;\n\n return (\n <div\n {...rest}\n className={cx(className, styles.dropdownLabel, styles.dropdown, {\n [styles.dropdownLabelColumn]: !isRow,\n })}\n onMouseEnter={onMouseEnterHandler}\n onMouseLeave={onMouseLeaveHandler}\n >\n <Downshift\n {...(readOnly ? { isOpen: false } : {})}\n onChange={(selection: DropdownItem | null) => onChangeHandler((selection || { key: '' }).key)}\n itemToString={(item: DropdownItem | null) => (item ? String(item.key) : '')}\n selectedItem={items.find((el) => el.key === currentValue) ?? null}\n onStateChange={(changes: StateChangeOptions<DropdownItem>) => {\n if (typeof changes.isOpen === 'boolean') setMenuIsOpen(changes.isOpen);\n }}\n stateReducer={(state: DownshiftState<DropdownItem>, changes: StateChangeOptions<DropdownItem>) => {\n if (scrollToSelected && Object.prototype.hasOwnProperty.call(changes, 'isOpen')) {\n return {\n ...changes,\n highlightedIndex: changes.isOpen ? items.indexOf(state.selectedItem as DropdownItem) : null,\n };\n }\n return changes;\n }}\n >\n {({\n getItemProps,\n getToggleButtonProps,\n isOpen,\n selectedItem,\n highlightedIndex,\n setHighlightedIndex,\n }) => (\n <div>\n <div\n ref={triggerRef}\n onFocus={onFocusHandler}\n onBlur={onBlurHandler}\n className={cx(\n styles.dropdownInput,\n {\n [styles.dropdownInputPlain]: plainStyle,\n [styles.dropdownInputReadOnly]: readOnly && !disabled,\n },\n dropDownInputClassName\n )}\n >\n <button\n tabIndex={tabIndex}\n type=\"button\"\n disabled={disabled}\n aria-readonly={readOnly || undefined}\n style={isDropdownListWider ? { padding: '6px', border: 'none' } : {}}\n className={cx(\n styles.dropdownInputButton,\n {\n [styles.dropdownInputButtonDisabled]: disabled,\n [styles.dropdownInputButtonReadOnly]: readOnly && !disabled,\n },\n inputClassName\n )}\n {...getToggleButtonProps()}\n onClick={(e: React.MouseEvent<HTMLButtonElement>) => {\n getToggleButtonProps().onClick?.(e);\n onClick?.(e);\n }}\n ref={reactRef}\n >\n {/* Non-breaking space when blank (same text-node layout as a\n real value) so the button keeps a full line of height. */}\n {isDisplayBlank ? '\\u00A0' : displayValue}\n </button>\n <button\n type=\"button\"\n tabIndex={-1}\n disabled={disabled}\n className={cx(styles.dropdownInputButtonIcon, dropDownIconClassName)}\n {...getToggleButtonProps()}\n onClick={(e: React.MouseEvent<HTMLButtonElement>) => {\n getToggleButtonProps().onClick?.(e);\n onClick?.(e);\n }}\n >\n {!disabled && !readOnly && (\n <FontAwesomeIcon\n icon={dropdownIcon}\n className={cx(styles.dropdownInputButtonIconArrow, {\n [styles.dropdownInputButtonIconArrowOpen]: isOpen,\n })}\n />\n )}\n </button>\n {!disabled && !readOnly && isOpen ? (\n <BodyEnd>\n <div\n ref={anchorRef}\n className={cx(styles.dropdownInputListAnim, {\n [styles.dropdownInputListAnimWider]: isDropdownListWider,\n })}\n style={{ width: `${triggerWidth}px` }}\n >\n <InfiniteBlock\n onScroll={onScroll}\n className={styles.dropdownInputList}\n setHighlightedIndex={setHighlightedIndex}\n >\n {items.map((item: DropdownItem, index: number) => (\n <div\n key={item.key}\n {...getItemProps({ index, item, disabled: !!item.disabled })}\n className={cx(styles.dropdownInputListItem, dropDownClassName, {\n [styles.dropdownInputListItemActive]: highlightedIndex === index,\n [styles.dropdownInputListItemSelected]: selectedItem === item,\n [styles.dropdownInputListItemDisabled]: !!item.disabled,\n })}\n >\n {item.label}\n </div>\n ))}\n </InfiniteBlock>\n </div>\n </BodyEnd>\n ) : null}\n <fieldset\n className={cx(styles.dropdownFieldset, {\n [styles.dropdownBorderPlain]: plainStyle,\n [styles.dropdownBorderFocused]: showFocus,\n [styles.dropdownBorderInvalid]: hasErr,\n [styles.dropdownBorderError]: hasErr,\n })}\n >\n <legend\n className={cx(styles.dropdownFieldsetLegend, {\n [styles.dropdownFieldsetLegendActive]:\n useMatLabelStyle && (alwaysFloatLabel || showFocus || !isDisplayBlank),\n })}\n >\n <span>{editedLabel}</span>\n </legend>\n </fieldset>\n {useMatLabelStyle && label && (\n <div\n className={cx(styles.dropdownMatLabel, {\n [styles.dropdownMatLabelFloating]: alwaysFloatLabel || showFocus || !isDisplayBlank,\n })}\n >\n {label}\n {requiredMark}\n </div>\n )}\n {useMatLabelStyle && placeholder && (\n <div\n className={cx(\n styles.dropdownPlaceholder,\n showFocus && !dropdownLabel && styles.dropdownPlaceholderShown\n )}\n >\n {placeholder}\n </div>\n )}\n </div>\n </div>\n )}\n </Downshift>\n {label && !useMatLabelStyle && (\n <div className={cx(styles.dropdownLabelText, labelClassName)}>\n {label}\n {requiredMark}\n </div>\n )}\n <Tooltip\n variant=\"error\"\n message={formValidator ? formValidator.getCurrentErrorMessage() : (errorMessage || '')}\n isVisible={hasErr && (isFocused || isHovered)}\n />\n </div>\n );\n}\n\nexport default Dropdown;\n"],"mappings":"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"}
1
+ {"version":3,"file":"dropdown.mjs","names":[],"sources":["../../../../package/common/dropdown/dropdown.tsx"],"sourcesContent":["import React, { useState, useEffect, useRef } from 'react';\nimport cx from 'classnames';\nimport InfiniteBlock from 'components/common/infiniteBlock';\nimport BodyEnd from 'components/common/bodyEnd';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { faChevronDown as dropdownIcon } from '@fortawesome/free-solid-svg-icons';\nimport Downshift, { StateChangeOptions, DownshiftState } from 'downshift';\nimport Tooltip from 'components/common/tooltip';\n\nimport { useFloatingPosition } from '../floatingMenu/useFloatingPosition';\nimport { useComponentDefaults } from '../configProvider';\nimport styles from './dropdown.module.pcss';\nimport type { DropdownProps, DropdownItem } from './dropdown.types';\n\nfunction Dropdown(props: DropdownProps) {\n const {\n errorMessage = '',\n className = '',\n label = '',\n value = '',\n isValid = true,\n tabIndex = 0,\n isRequired = false,\n customProps = {},\n isRow = false,\n disabled = false,\n readOnly = false,\n onScroll = () => Promise.resolve(),\n onClick,\n onChange,\n onFocus: onFocusProp = null,\n onBlur: onBlurProp = null,\n onMouseEnter: onMouseEnterProp = null,\n onMouseLeave: onMouseLeaveProp = null,\n dropdownLabel: dropdownLabelProp,\n isDropdownListWider = false,\n inputClassName = '',\n dropDownIconClassName = '',\n dropDownClassName = '',\n formValidator = null,\n labelClassName = '',\n dropDownInputClassName = '',\n items = [],\n useMatLabelStyle = true,\n alwaysFloatLabel = false,\n placeholder = '',\n plainStyle = false,\n scrollToSelected = false,\n reactRef,\n ...rest\n } = useComponentDefaults('Dropdown', props);\n const [isFocused, setIsFocused] = useState(false);\n const [isHovered, setIsHovered] = useState(false);\n const [, forceUpdate] = useState(0);\n const fvRef = useRef(formValidator);\n const triggerRef = useRef<HTMLDivElement>(null);\n const anchorRef = useRef<HTMLDivElement>(null);\n const [menuIsOpen, setMenuIsOpen] = useState(false);\n const [triggerWidth, setTriggerWidth] = useState(10);\n\n useEffect(() => {\n if (menuIsOpen) {\n const rect = triggerRef.current?.getBoundingClientRect();\n setTriggerWidth(rect?.width ?? 10);\n }\n }, [menuIsOpen]);\n\n useFloatingPosition({\n isOpen: menuIsOpen,\n triggerRef,\n anchorRef,\n panelRef: anchorRef,\n flipClassName: styles.dropdownInputListAnimFlip,\n });\n\n useEffect(() => {\n fvRef.current = formValidator;\n if (!fvRef.current) return;\n fvRef.current.label = label ?? '';\n fvRef.current.validate();\n const listener = () => forceUpdate(n => n + 1);\n fvRef.current.registerOnUpdateListener(listener);\n return () => fvRef.current?.removeOnUpdateListener(listener);\n }, [formValidator, label]);\n\n const onMouseEnterHandler = (event: React.MouseEvent) => {\n setIsHovered(true);\n onMouseEnterProp?.(event);\n };\n\n const onMouseLeaveHandler = (event: React.MouseEvent) => {\n setIsHovered(false);\n onMouseLeaveProp?.(event);\n };\n\n const onFocusHandler = (event: React.FocusEvent) => {\n setIsFocused(true);\n onFocusProp?.(event);\n };\n\n const onBlurHandler = (event: React.FocusEvent) => {\n if (fvRef.current) fvRef.current.touched = true;\n setIsFocused(false);\n onBlurProp?.(event);\n };\n\n const hasError = (): boolean => {\n return formValidator\n ? (formValidator.touched && formValidator.hasError())\n : (!isValid || !!errorMessage);\n };\n\n const computedIsRequired = (): boolean => {\n return !!(isRequired || formValidator?.validators.find(\n (v) => (v as { validatorId?: string }).validatorId === 'required'\n ));\n };\n\n const onChangeHandler = (val: string | number): void => {\n if (formValidator) {\n formValidator.set(val);\n onChange?.(formValidator.value, customProps);\n } else {\n onChange?.(val, customProps);\n }\n };\n\n let dropdownLabel = dropdownLabelProp;\n const currentValue = formValidator ? formValidator.value as string | number : value;\n const hasErr = hasError();\n\n items.forEach((item: DropdownItem) => {\n if (item.key === currentValue) {\n dropdownLabel = item.label as string;\n }\n });\n\n const displayValue = dropdownLabel || currentValue;\n const isDisplayBlank =\n displayValue == null ||\n (typeof displayValue === 'string' && displayValue.trim() === '');\n\n const requiredMark = computedIsRequired() ? <span className={styles.requiredMark}>*</span> : null;\n const editedLabel = label && computedIsRequired() ? `${label} *` : label;\n\n const showFocus = isFocused && !readOnly;\n\n return (\n <div\n {...rest}\n className={cx(className, styles.dropdownLabel, styles.dropdown, {\n [styles.dropdownLabelColumn]: !isRow,\n })}\n onMouseEnter={onMouseEnterHandler}\n onMouseLeave={onMouseLeaveHandler}\n >\n <Downshift\n {...(readOnly ? { isOpen: false } : {})}\n onChange={(selection: DropdownItem | null) => onChangeHandler((selection || { key: '' }).key)}\n itemToString={(item: DropdownItem | null) => (item ? String(item.key) : '')}\n selectedItem={items.find((el) => el.key === currentValue) ?? null}\n onStateChange={(changes: StateChangeOptions<DropdownItem>) => {\n if (typeof changes.isOpen === 'boolean') setMenuIsOpen(changes.isOpen);\n }}\n stateReducer={(state: DownshiftState<DropdownItem>, changes: StateChangeOptions<DropdownItem>) => {\n if (scrollToSelected && Object.prototype.hasOwnProperty.call(changes, 'isOpen')) {\n return {\n ...changes,\n highlightedIndex: changes.isOpen ? items.indexOf(state.selectedItem as DropdownItem) : null,\n };\n }\n return changes;\n }}\n >\n {({\n getItemProps,\n getMenuProps,\n getToggleButtonProps,\n isOpen,\n selectedItem,\n highlightedIndex,\n setHighlightedIndex,\n }) => (\n <div>\n <div\n ref={triggerRef}\n onFocus={onFocusHandler}\n onBlur={onBlurHandler}\n className={cx(\n styles.dropdownInput,\n {\n [styles.dropdownInputPlain]: plainStyle,\n [styles.dropdownInputReadOnly]: readOnly && !disabled,\n },\n dropDownInputClassName\n )}\n >\n <button\n tabIndex={tabIndex}\n type=\"button\"\n disabled={disabled}\n aria-readonly={readOnly || undefined}\n style={isDropdownListWider ? { padding: '6px', border: 'none' } : {}}\n className={cx(\n styles.dropdownInputButton,\n {\n [styles.dropdownInputButtonDisabled]: disabled,\n [styles.dropdownInputButtonReadOnly]: readOnly && !disabled,\n },\n inputClassName\n )}\n {...getToggleButtonProps()}\n onClick={(e: React.MouseEvent<HTMLButtonElement>) => {\n getToggleButtonProps().onClick?.(e);\n onClick?.(e);\n }}\n ref={reactRef}\n >\n {/* Non-breaking space when blank (same text-node layout as a\n real value) so the button keeps a full line of height. */}\n {isDisplayBlank ? '\\u00A0' : displayValue}\n </button>\n <button\n type=\"button\"\n tabIndex={-1}\n disabled={disabled}\n className={cx(styles.dropdownInputButtonIcon, dropDownIconClassName)}\n {...getToggleButtonProps()}\n onClick={(e: React.MouseEvent<HTMLButtonElement>) => {\n getToggleButtonProps().onClick?.(e);\n onClick?.(e);\n }}\n >\n {!disabled && !readOnly && (\n <FontAwesomeIcon\n icon={dropdownIcon}\n className={cx(styles.dropdownInputButtonIconArrow, {\n [styles.dropdownInputButtonIconArrowOpen]: isOpen,\n })}\n />\n )}\n </button>\n {!disabled && !readOnly && isOpen ? (\n <BodyEnd>\n <div\n {...getMenuProps(\n {\n ref: (node: HTMLDivElement | null) => {\n anchorRef.current = node;\n },\n 'aria-label': label || placeholder || undefined,\n },\n { suppressRefError: true }\n )}\n className={cx(styles.dropdownInputListAnim, {\n [styles.dropdownInputListAnimWider]: isDropdownListWider,\n })}\n style={{ width: `${triggerWidth}px` }}\n >\n <InfiniteBlock\n onScroll={onScroll}\n className={styles.dropdownInputList}\n setHighlightedIndex={setHighlightedIndex}\n >\n {items.map((item: DropdownItem, index: number) => (\n <div\n key={item.key}\n {...getItemProps({ index, item, disabled: !!item.disabled })}\n className={cx(styles.dropdownInputListItem, dropDownClassName, {\n [styles.dropdownInputListItemActive]: highlightedIndex === index,\n [styles.dropdownInputListItemSelected]: selectedItem === item,\n [styles.dropdownInputListItemDisabled]: !!item.disabled,\n })}\n >\n {item.label}\n </div>\n ))}\n </InfiniteBlock>\n </div>\n </BodyEnd>\n ) : null}\n <fieldset\n className={cx(styles.dropdownFieldset, {\n [styles.dropdownBorderPlain]: plainStyle,\n [styles.dropdownBorderFocused]: showFocus,\n [styles.dropdownBorderInvalid]: hasErr,\n [styles.dropdownBorderError]: hasErr,\n })}\n >\n <legend\n className={cx(styles.dropdownFieldsetLegend, {\n [styles.dropdownFieldsetLegendActive]:\n useMatLabelStyle && (alwaysFloatLabel || showFocus || !isDisplayBlank),\n })}\n >\n <span>{editedLabel}</span>\n </legend>\n </fieldset>\n {useMatLabelStyle && label && (\n <div\n className={cx(styles.dropdownMatLabel, {\n [styles.dropdownMatLabelFloating]: alwaysFloatLabel || showFocus || !isDisplayBlank,\n })}\n >\n {label}\n {requiredMark}\n </div>\n )}\n {useMatLabelStyle && placeholder && (\n <div\n className={cx(\n styles.dropdownPlaceholder,\n showFocus && !dropdownLabel && styles.dropdownPlaceholderShown\n )}\n >\n {placeholder}\n </div>\n )}\n </div>\n </div>\n )}\n </Downshift>\n {label && !useMatLabelStyle && (\n <div className={cx(styles.dropdownLabelText, labelClassName)}>\n {label}\n {requiredMark}\n </div>\n )}\n <Tooltip\n variant=\"error\"\n message={formValidator ? formValidator.getCurrentErrorMessage() : (errorMessage || '')}\n isVisible={hasErr && (isFocused || isHovered)}\n />\n </div>\n );\n}\n\nexport default Dropdown;\n"],"mappings":"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"}
@@ -1 +1 @@
1
- {"version":3,"file":"input.types.mjs","names":[],"sources":["../../../../package/common/input/input.types.ts"],"sourcesContent":["import React from 'react';\nimport FormValidator from 'services/formValidation/formValidator';\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 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 +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/formValidator';\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 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 +1 @@
1
- import{AccordionStyleType as e}from"./common/accordion/accordion.types.mjs";import t from"./common/configProvider/configProvider.mjs";import{useComponentDefaults as n}from"./common/configProvider/useComponentDefaults.mjs";import r from"./common/accordion/accordion.mjs";import i from"./common/loading/spinnerLoading/index.mjs";import{ButtonSize as a,ButtonStyleType as o,ButtonType as s}from"./common/button/button.types.mjs";import c from"./common/ripple/ripple.mjs";import l from"./common/button/button.mjs";import u from"./common/actionButtons/actionButtons.mjs";import d from"./common/interactableDiv/index.mjs";import f from"./common/actionIcon/actionIcon.mjs";import{BadgePosition as p,BadgeStyleType as m}from"./common/badge/badge.types.mjs";import h from"./common/badge/badge.mjs";import g from"./common/avatar/avatar.mjs";import _ from"./common/avatar/avatarGroup.mjs";import v from"./common/bodyEnd/bodyEnd.mjs";import{CardStyleType as y}from"./common/card/card.types.mjs";import b from"./common/card/Card.mjs";import x from"./common/card/CardHeader.mjs";import S from"./common/card/CardMedia.mjs";import C from"./common/card/CardContent.mjs";import w from"./common/card/CardActions.mjs";import T from"./common/checkbox/checkbox.mjs";import{ChipStyleType as E}from"./common/chip/chip.types.mjs";import D from"./common/chip/chip.mjs";import O from"./common/chip/chipContainer.mjs";import{Align as k}from"./common/floatingMenu/floatingMenu.types.mjs";import A from"./common/floatingMenu/floatingMenu.mjs";import j from"./common/tooltip/tooltip.mjs";import{InputType as M}from"./common/input/input.types.mjs";import N from"./common/input/input.mjs";import P from"./common/colorPicker/colorPicker.mjs";import F from"./common/modal/modal.mjs";import I from"./common/confirmModal/confirmModal.mjs";import{getLocale as L,mapLocale as R,setLocale as z}from"./services/localization.mjs";import B from"./common/infiniteBlock/infiniteBlock.mjs";import V from"./common/dropdown/dropdown.mjs";import H from"./common/datePicker/datePicker.mjs";import{DividerTextPosition as U}from"./common/divider/divider.types.mjs";import W from"./common/divider/divider.mjs";import G from"./common/drawer/drawer.mjs";import{DropZoneReturnType as K,DropZoneStatus as q}from"./common/dropZone/dropZone.types.mjs";import J from"./common/dropZone/dropZone.mjs";import Y from"./common/emptyState/emptyState.mjs";import X from"./common/fab/fab.mjs";import Z from"./common/iconPicker/iconPicker.mjs";import Q from"./common/idleManager/idleManager.mjs";import $ from"./common/inputDropdown/inputDropdown.mjs";import ee from"./common/kanbanBoard/KanbanColumn.mjs";import te from"./common/kanbanBoard/KanbanBoard.mjs";import ne from"./common/searchInput/searchInput.mjs";import re from"./common/klipyPicker/klipyPicker.mjs";import ie from"./common/loading/iconLoading/index.mjs";import ae from"./common/numberInput/index.mjs";import oe from"./common/optionPicker/optionPicker.mjs";import se from"./common/overscroll/overscroll.mjs";import ce from"./common/progressBar/progressBar.mjs";import le from"./common/roomDrawer/roomDrawer.mjs";import ue from"./common/roomViewer/roomViewer.mjs";import de from"./common/scrollbarProvider/index.mjs";import{SectionHeaderSize as fe}from"./common/sectionHeader/sectionHeader.types.mjs";import pe from"./common/sectionHeader/sectionHeader.mjs";import{SkeletonAnimation as me,SkeletonVariant as he}from"./common/skeleton/skeleton.types.mjs";import ge from"./common/skeleton/skeleton.mjs";import _e from"./common/stepper/stepper.mjs";import ve from"./common/sticky/sticky.mjs";import ye from"./common/switch/switch.mjs";import be from"./common/tabHeader/tabHeader.mjs";import xe from"./common/textarea/textarea.mjs";import{defaultTheme as Se}from"./common/themeProvider/defaultTheme.mjs";import Ce from"./common/themeProvider/themeProvider.mjs";import{useTheme as we}from"./common/themeProvider/useTheme.mjs";import Te from"./common/timeInput/timeInput.mjs";import{showToast as Ee}from"./common/toast/toastService.mjs";import De from"./common/toast/toastProvider.mjs";import Oe from"./common/virtualList/virtualList.mjs";import ke from"./common/wizard/wizard.mjs";import Ae from"./services/formValidation/FormValidatorGroupWithForm.mjs";import je from"./services/formValidation/formValidator.mjs";import{hasEightPasswordChars as Me,hasOnePasswordDigit as Ne,hasOnePasswordLetter as Pe,isBic as Fe,isDate as Ie,isEmail as Le,isISODate as Re,isNumber as ze,isPassword as Be,isURL as Ve}from"./services/regexp.mjs";import He from"./services/formValidation/validators.mjs";import Ue from"./services/formValidation/validatableComponent.mjs";import{useFormValidator as We}from"./services/formValidation/useFormValidator.mjs";import{useFormValidatorGroup as Ge}from"./services/formValidation/useFormValidatorGroup.mjs";export{r as Accordion,e as AccordionStyleType,u as ActionButtons,f as ActionIcon,k as Align,g as Avatar,_ as AvatarGroup,h as Badge,p as BadgePosition,m as BadgeStyleType,v as BodyEnd,l as Button,a as ButtonSize,o as ButtonStyleType,s as ButtonType,b as Card,w as CardActions,C as CardContent,x as CardHeader,S as CardMedia,y as CardStyleType,T as Checkbox,D as Chip,O as ChipContainer,E as ChipStyleType,P as ColorPicker,t as ConfigProvider,I as ConfirmModal,H as DatePicker,W as Divider,U as DividerTextPosition,G as Drawer,J as DropZone,K as DropZoneReturnType,q as DropZoneStatus,V as Dropdown,Y as EmptyState,X as Fab,A as FloatingMenu,je as FormValidator,Ae as FormValidatorGroup,ie as IconLoading,Z as IconPicker,Q as IdleManager,B as InfiniteBlock,N as Input,$ as InputDropdown,M as InputType,d as InteractableDiv,te as KanbanBoard,ee as KanbanColumn,re as KlipyPicker,F as Modal,ae as NumberInput,oe as OptionPicker,se as Overscroll,ce as ProgressBar,c as Ripple,le as RoomDrawer,ue as RoomViewer,de as ScrollbarProvider,ne as SearchInput,pe as SectionHeader,fe as SectionHeaderSize,ge as Skeleton,me as SkeletonAnimation,he as SkeletonVariant,i as SpinnerLoading,_e as Stepper,ve as Sticky,ye as Switch,be as TabHeader,xe as Textarea,Ce as ThemeProvider,Te as TimeInput,De as ToastProvider,j as Tooltip,Ue as ValidatableComponent,He as Validators,Oe as VirtualList,ke as Wizard,Se as defaultTheme,L as getLocale,Me as hasEightPasswordChars,Ne as hasOnePasswordDigit,Pe as hasOnePasswordLetter,Fe as isBic,Ie as isDate,Le as isEmail,Re as isISODate,ze as isNumber,Be as isPassword,Ve as isURL,R as mapLocale,z as setLocale,Ee as showToast,n as useComponentDefaults,We as useFormValidator,Ge as useFormValidatorGroup,we as useTheme};
1
+ import{AccordionStyleType as e}from"./common/accordion/accordion.types.mjs";import t from"./common/configProvider/configProvider.mjs";import{useComponentDefaults as n}from"./common/configProvider/useComponentDefaults.mjs";import r from"./common/accordion/accordion.mjs";import i from"./common/loading/spinnerLoading/index.mjs";import{ButtonSize as a,ButtonStyleType as o,ButtonType as s}from"./common/button/button.types.mjs";import c from"./common/ripple/ripple.mjs";import l from"./common/button/button.mjs";import u from"./common/actionButtons/actionButtons.mjs";import d from"./common/interactableDiv/index.mjs";import f from"./common/actionIcon/actionIcon.mjs";import p from"./common/animatedLogo/animatedLogo.mjs";import{BadgePosition as m,BadgeStyleType as h}from"./common/badge/badge.types.mjs";import g from"./common/badge/badge.mjs";import _ from"./common/avatar/avatar.mjs";import v from"./common/avatar/avatarGroup.mjs";import y from"./common/bodyEnd/bodyEnd.mjs";import{CardStyleType as b}from"./common/card/card.types.mjs";import x from"./common/card/Card.mjs";import S from"./common/card/CardHeader.mjs";import C from"./common/card/CardMedia.mjs";import w from"./common/card/CardContent.mjs";import T from"./common/card/CardActions.mjs";import E from"./common/checkbox/checkbox.mjs";import{ChipStyleType as D}from"./common/chip/chip.types.mjs";import O from"./common/chip/chip.mjs";import k from"./common/chip/chipContainer.mjs";import{Align as A}from"./common/floatingMenu/floatingMenu.types.mjs";import j from"./common/floatingMenu/floatingMenu.mjs";import M from"./common/tooltip/tooltip.mjs";import{InputType as N}from"./common/input/input.types.mjs";import P from"./common/input/input.mjs";import F from"./common/colorPicker/colorPicker.mjs";import I from"./common/modal/modal.mjs";import L from"./common/confirmModal/confirmModal.mjs";import{getLocale as R,mapLocale as z,setLocale as B}from"./services/localization.mjs";import V from"./common/infiniteBlock/infiniteBlock.mjs";import H from"./common/dropdown/dropdown.mjs";import U from"./common/datePicker/datePicker.mjs";import{DividerTextPosition as W}from"./common/divider/divider.types.mjs";import G from"./common/divider/divider.mjs";import K from"./common/drawer/drawer.mjs";import{DropZoneReturnType as q,DropZoneStatus as J}from"./common/dropZone/dropZone.types.mjs";import Y from"./common/dropZone/dropZone.mjs";import X from"./common/emptyState/emptyState.mjs";import Z from"./common/fab/fab.mjs";import Q from"./common/iconPicker/iconPicker.mjs";import $ from"./common/idleManager/idleManager.mjs";import ee from"./common/inputDropdown/inputDropdown.mjs";import te from"./common/kanbanBoard/KanbanColumn.mjs";import ne from"./common/kanbanBoard/KanbanBoard.mjs";import re from"./common/searchInput/searchInput.mjs";import ie from"./common/klipyPicker/klipyPicker.mjs";import ae from"./common/loading/iconLoading/index.mjs";import oe from"./common/numberInput/index.mjs";import se from"./common/optionPicker/optionPicker.mjs";import ce from"./common/overscroll/overscroll.mjs";import le from"./common/progressBar/progressBar.mjs";import ue from"./common/roomDrawer/roomDrawer.mjs";import de from"./common/roomViewer/roomViewer.mjs";import fe from"./common/scrollbarProvider/index.mjs";import{SectionHeaderSize as pe}from"./common/sectionHeader/sectionHeader.types.mjs";import me from"./common/sectionHeader/sectionHeader.mjs";import{SkeletonAnimation as he,SkeletonVariant as ge}from"./common/skeleton/skeleton.types.mjs";import _e from"./common/skeleton/skeleton.mjs";import ve from"./common/stepper/stepper.mjs";import ye from"./common/sticky/sticky.mjs";import be from"./common/switch/switch.mjs";import xe from"./common/tabHeader/tabHeader.mjs";import Se from"./common/textarea/textarea.mjs";import{defaultTheme as Ce}from"./common/themeProvider/defaultTheme.mjs";import we from"./common/themeProvider/themeProvider.mjs";import{useTheme as Te}from"./common/themeProvider/useTheme.mjs";import Ee from"./common/timeInput/timeInput.mjs";import{showToast as De}from"./common/toast/toastService.mjs";import Oe from"./common/toast/toastProvider.mjs";import ke from"./common/virtualList/virtualList.mjs";import Ae from"./common/wizard/wizard.mjs";import je from"./services/formValidation/FormValidatorGroupWithForm.mjs";import Me from"./services/formValidation/validatableComponent.mjs";import{useFormValidatorGroup as Ne}from"./services/formValidation/useFormValidatorGroup.mjs";import{FormValidator as Pe,Validators as Fe,useFormValidator as Ie}from"./services/formValidation/index.mjs";import{hasEightPasswordChars as Le,hasOnePasswordDigit as Re,hasOnePasswordLetter as ze,isBic as Be,isDate as Ve,isEmail as He,isISODate as Ue,isNumber as We,isPassword as Ge,isURL as Ke}from"@ahrowe/form-validation";export{r as Accordion,e as AccordionStyleType,u as ActionButtons,f as ActionIcon,A as Align,p as AnimatedLogo,_ as Avatar,v as AvatarGroup,g as Badge,m as BadgePosition,h as BadgeStyleType,y as BodyEnd,l as Button,a as ButtonSize,o as ButtonStyleType,s as ButtonType,x as Card,T as CardActions,w as CardContent,S as CardHeader,C as CardMedia,b as CardStyleType,E as Checkbox,O as Chip,k as ChipContainer,D as ChipStyleType,F as ColorPicker,t as ConfigProvider,L as ConfirmModal,U as DatePicker,G as Divider,W as DividerTextPosition,K as Drawer,Y as DropZone,q as DropZoneReturnType,J as DropZoneStatus,H as Dropdown,X as EmptyState,Z as Fab,j as FloatingMenu,Pe as FormValidator,je as FormValidatorGroup,ae as IconLoading,Q as IconPicker,$ as IdleManager,V as InfiniteBlock,P as Input,ee as InputDropdown,N as InputType,d as InteractableDiv,ne as KanbanBoard,te as KanbanColumn,ie as KlipyPicker,I as Modal,oe as NumberInput,se as OptionPicker,ce as Overscroll,le as ProgressBar,c as Ripple,ue as RoomDrawer,de as RoomViewer,fe as ScrollbarProvider,re as SearchInput,me as SectionHeader,pe as SectionHeaderSize,_e as Skeleton,he as SkeletonAnimation,ge as SkeletonVariant,i as SpinnerLoading,ve as Stepper,ye as Sticky,be as Switch,xe as TabHeader,Se as Textarea,we as ThemeProvider,Ee as TimeInput,Oe as ToastProvider,M as Tooltip,Me as ValidatableComponent,Fe as Validators,ke as VirtualList,Ae as Wizard,Ce as defaultTheme,R as getLocale,Le as hasEightPasswordChars,Re as hasOnePasswordDigit,ze as hasOnePasswordLetter,Be as isBic,Ve as isDate,He as isEmail,Ue as isISODate,We as isNumber,Ge as isPassword,Ke as isURL,z as mapLocale,B as setLocale,De as showToast,n as useComponentDefaults,Ie as useFormValidator,Ne as useFormValidatorGroup,Te as useTheme};
@@ -1,2 +1,2 @@
1
- import{showToast as e}from"../../common/toast/toastService.mjs";import t from"./formValidatorGroup.mjs";import{createFormComponent as n}from"./FormValidatorGroupForm.mjs";var r=t=>{e(t[0].message,{type:`error`})},i=class extends t{constructor(e,t=null,i){super(e,t,{...i,onSubmitError:i?.onSubmitError??r}),this.Form=n(this)}};export{i as default};
1
+ import{showToast as e}from"../../common/toast/toastService.mjs";import{FormValidatorGroup as t,createFormComponent as n}from"@ahrowe/form-validation";var r=t=>{e(t[0].message,{type:`error`})},i=class extends t{constructor(e,t=null,i){super(e,t,{...i,onSubmitError:i?.onSubmitError??r}),this.Form=n(this)}};export{i as default};
2
2
  //# sourceMappingURL=FormValidatorGroupWithForm.mjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"FormValidatorGroupWithForm.mjs","names":[],"sources":["../../../../package/services/formValidation/FormValidatorGroupWithForm.tsx"],"sourcesContent":["import { showToast } from 'components/common/toast';\nimport FormValidatorGroup from './formValidatorGroup';\nimport { createFormComponent } from './FormValidatorGroupForm';\nimport type { FormGroup, FormValidatorGroupOptions, InferGroupValues } from './formValidatorGroup';\nimport type { ValidationError } from './types';\nimport type React from 'react';\n\n/** Default onSubmitError: surface the first error as an error toast. Callers can override via options.onSubmitError. */\nconst defaultOnSubmitError = (errors: ValidationError[]): void => {\n showToast(errors[0].message, { type: 'error' });\n};\n\n/**\n * FormValidatorGroup with `this.Form` automatically attached.\n * Kept in a .tsx file so formValidatorGroup.ts stays framework-agnostic.\n *\n * This is the class you should use everywhere — it is a drop-in replacement\n * for FormValidatorGroup with one extra property: `this.Form`.\n *\n * Also injects the default toast-based onSubmitError so both hook and class-component\n * consumers surface errors out of the box; pass options.onSubmitError to override.\n */\nexport default class FormValidatorGroupWithForm<\n TGroup extends FormGroup = FormGroup,\n TInitial = InferGroupValues<TGroup>\n> extends FormValidatorGroup<TGroup, TInitial> {\n Form: React.FC<React.FormHTMLAttributes<HTMLFormElement>>;\n\n constructor(\n groupDef: TGroup,\n component: { forceUpdate: () => void } | null = null,\n options?: FormValidatorGroupOptions<TGroup, TInitial>\n ) {\n super(groupDef, component, { ...options, onSubmitError: options?.onSubmitError ?? defaultOnSubmitError });\n this.Form = createFormComponent(this);\n }\n}\n"],"mappings":"2KAQA,IAAM,EAAwB,GAAoC,CAChE,EAAU,EAAO,GAAG,QAAS,CAAE,KAAM,OAAQ,CAAC,CAChD,EAYqB,EAArB,cAGU,CAAqC,CAG7C,YACE,EACA,EAAgD,KAChD,EACA,CACA,MAAM,EAAU,EAAW,CAAE,GAAG,EAAS,cAAe,GAAS,eAAiB,CAAqB,CAAC,EACxG,KAAK,KAAO,EAAoB,IAAI,CACtC,CACF"}
1
+ {"version":3,"file":"FormValidatorGroupWithForm.mjs","names":[],"sources":["../../../../package/services/formValidation/FormValidatorGroupWithForm.tsx"],"sourcesContent":["import { showToast } from 'components/common/toast';\nimport { FormValidatorGroup, createFormComponent } from '@ahrowe/form-validation';\nimport type { FormGroup, FormValidatorGroupOptions, InferGroupValues, ValidationError } from '@ahrowe/form-validation';\nimport type React from 'react';\n\n/** Default onSubmitError: surface the first error as an error toast. Callers can override via options.onSubmitError. */\nconst defaultOnSubmitError = (errors: ValidationError[]): void => {\n showToast(errors[0].message, { type: 'error' });\n};\n\n/**\n * FormValidatorGroup with `this.Form` automatically attached.\n * Kept in a .tsx file so formValidatorGroup.ts stays framework-agnostic.\n *\n * This is the class you should use everywhere — it is a drop-in replacement\n * for FormValidatorGroup with one extra property: `this.Form`.\n *\n * Also injects the default toast-based onSubmitError so both hook and class-component\n * consumers surface errors out of the box; pass options.onSubmitError to override.\n */\nexport default class FormValidatorGroupWithForm<\n TGroup extends FormGroup = FormGroup,\n TInitial = InferGroupValues<TGroup>\n> extends FormValidatorGroup<TGroup, TInitial> {\n Form: React.FC<React.FormHTMLAttributes<HTMLFormElement>>;\n\n constructor(\n groupDef: TGroup,\n component: { forceUpdate: () => void } | null = null,\n options?: FormValidatorGroupOptions<TGroup, TInitial>\n ) {\n super(groupDef, component, { ...options, onSubmitError: options?.onSubmitError ?? defaultOnSubmitError });\n this.Form = createFormComponent(this);\n }\n}\n"],"mappings":"sJAMA,IAAM,EAAwB,GAAoC,CAChE,EAAU,EAAO,GAAG,QAAS,CAAE,KAAM,OAAQ,CAAC,CAChD,EAYqB,EAArB,cAGU,CAAqC,CAG7C,YACE,EACA,EAAgD,KAChD,EACA,CACA,MAAM,EAAU,EAAW,CAAE,GAAG,EAAS,cAAe,GAAS,eAAiB,CAAqB,CAAC,EACxG,KAAK,KAAO,EAAoB,IAAI,CACtC,CACF"}
@@ -0,0 +1 @@
1
+ import"./FormValidatorGroupWithForm.mjs";import"./validatableComponent.mjs";import"./useFormValidatorGroup.mjs";import{FormValidator as e,Validators as t,useFormValidator as n}from"@ahrowe/form-validation";export{e as FormValidator,t as Validators,n as useFormValidator};
@@ -1,2 +1,2 @@
1
- import e from"./FormValidatorGroupWithForm.mjs";import{useEffect as t,useReducer as n,useRef as r}from"react";function i(i,{initialValues:a,onSubmit:o,onValidate:s,errorParser:c,onSubmitError:l}={}){let[,u]=n(e=>e+1,0),d=r(null);d.current||=new e(i,null,{initialValues:a,errorParser:c,onSubmitError:l});let f=d.current,p=r(o),m=r(s);return p.current=o,m.current=s,t(()=>(o!==void 0&&(f.onSubmitCallback=(...e)=>p.current?.(...e)),s!==void 0&&(f.onValidateCallback=(...e)=>m.current?.(...e)),f.registerOnUpdateListener(u),()=>f.removeOnUpdateListener(u)),[]),f}export{i as useFormValidatorGroup};
1
+ import e from"./FormValidatorGroupWithForm.mjs";import{useFormValidatorGroupInstance as t}from"@ahrowe/form-validation";function n(n,{initialValues:r,onSubmit:i,onValidate:a,errorParser:o,onSubmitError:s}={}){return t(()=>new e(n,null,{initialValues:r,errorParser:o,onSubmitError:s}),i,a)}export{n as useFormValidatorGroup};
2
2
  //# sourceMappingURL=useFormValidatorGroup.mjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"useFormValidatorGroup.mjs","names":[],"sources":["../../../../package/services/formValidation/useFormValidatorGroup.ts"],"sourcesContent":["import { useEffect, useReducer, useRef } from 'react';\nimport FormValidatorGroup from './FormValidatorGroupWithForm';\nimport type { FormGroup, FormValidatorGroupOptions, InferGroupValues } from './formValidatorGroup';\n\n/**\n * Creates and subscribes a function component to a FormValidatorGroup.\n * Triggers a re-render whenever any field, submit state, or validation state changes.\n *\n * The group is created once on mount from the provided field map.\n * onSubmit / onValidate are kept fresh via refs — they always reflect the latest\n * closure without needing to be listed in effect dependencies.\n *\n * onSubmitError defaults to showing the message as an error toast (provided by FormValidatorGroupWithForm);\n * pass options.onSubmitError to override.\n *\n * @param groupDef - Map of field name → FormValidator instance\n * @param options - initialValues, onSubmit, onValidate, errorParser, onSubmitError\n *\n * @example\n * const form = useFormValidatorGroup(\n * { name: new FormValidator('', [Validators.required('Required')]) },\n * {\n * initialValues: { name: 'Jane' },\n * onSubmit: async (values) => save(values),\n * },\n * );\n */\nexport function useFormValidatorGroup<\nTGroup extends FormGroup = FormGroup,\nTInitial = InferGroupValues<TGroup>\n>(\n groupDef: TGroup,\n { initialValues, onSubmit, onValidate, errorParser, onSubmitError }: FormValidatorGroupOptions<TGroup, TInitial> = {}\n): FormValidatorGroup<TGroup, TInitial> {\n const [, rerender] = useReducer((n: number) => n + 1, 0);\n\n const groupRef = useRef<FormValidatorGroup<TGroup, TInitial> | null>(null);\n if (!groupRef.current) {\n groupRef.current = new FormValidatorGroup(groupDef, null, {\n initialValues,\n errorParser,\n onSubmitError,\n });\n }\n const group = groupRef.current;\n\n const onSubmitRef = useRef(onSubmit);\n const onValidateRef = useRef(onValidate);\n onSubmitRef.current = onSubmit;\n onValidateRef.current = onValidate;\n\n useEffect(() => {\n if (onSubmit !== undefined) {\n group.onSubmitCallback = (...args) => onSubmitRef.current?.(...args);\n }\n if (onValidate !== undefined) {\n group.onValidateCallback = (...args) => onValidateRef.current?.(...args);\n }\n group.registerOnUpdateListener(rerender);\n return () => group.removeOnUpdateListener(rerender);\n }, []);\n\n return group;\n}\n"],"mappings":"8GA2BA,SAAgB,EAId,EACA,CAAE,gBAAe,WAAU,aAAY,cAAa,iBAA+D,CAAC,EAC9E,CACtC,GAAM,EAAG,GAAY,EAAY,GAAc,EAAI,EAAG,CAAC,EAEjD,EAAW,EAAoD,IAAI,EACzE,AACE,EAAS,UAAU,IAAI,EAAmB,EAAU,KAAM,CACxD,gBACA,cACA,eACF,CAAC,EAEH,IAAM,EAAQ,EAAS,QAEjB,EAAc,EAAO,CAAQ,EAC7B,EAAgB,EAAO,CAAU,EAevC,MAdA,GAAY,QAAU,EACtB,EAAc,QAAU,EAExB,OACM,IAAa,IAAA,KACf,EAAM,kBAAoB,GAAG,IAAS,EAAY,UAAU,GAAG,CAAI,GAEjE,IAAe,IAAA,KACjB,EAAM,oBAAsB,GAAG,IAAS,EAAc,UAAU,GAAG,CAAI,GAEzE,EAAM,yBAAyB,CAAQ,MAC1B,EAAM,uBAAuB,CAAQ,GACjD,CAAC,CAAC,EAEE,CACT"}
1
+ {"version":3,"file":"useFormValidatorGroup.mjs","names":[],"sources":["../../../../package/services/formValidation/useFormValidatorGroup.ts"],"sourcesContent":["import { useFormValidatorGroupInstance } from '@ahrowe/form-validation';\nimport type { FormGroup, FormValidatorGroupOptions, InferGroupValues } from '@ahrowe/form-validation';\nimport FormValidatorGroupWithForm from './FormValidatorGroupWithForm';\n\n/**\n * @ahrowe/ui's flavour of useFormValidatorGroup: the group it creates has\n * `.Form` attached and defaults `onSubmitError` to an error toast (see\n * FormValidatorGroupWithForm). Reuses the core package's reactive wiring\n * (useFormValidatorGroupInstance) so this and the pure hook share one\n * implementation of \"subscribe a function component to a group\".\n */\nexport function useFormValidatorGroup<\nTGroup extends FormGroup = FormGroup,\nTInitial = InferGroupValues<TGroup>\n>(\n groupDef: TGroup,\n { initialValues, onSubmit, onValidate, errorParser, onSubmitError }: FormValidatorGroupOptions<TGroup, TInitial> = {}\n): FormValidatorGroupWithForm<TGroup, TInitial> {\n return useFormValidatorGroupInstance(\n () => new FormValidatorGroupWithForm(groupDef, null, { initialValues, errorParser, onSubmitError }),\n onSubmit,\n onValidate,\n );\n}\n"],"mappings":"wHAWA,SAAgB,EAId,EACA,CAAE,gBAAe,WAAU,aAAY,cAAa,iBAA+D,CAAC,EACtE,CAC9C,OAAO,MACC,IAAI,EAA2B,EAAU,KAAM,CAAE,gBAAe,cAAa,eAAc,CAAC,EAClG,EACA,CACF,CACF"}
@@ -1 +1 @@
1
- {"version":3,"file":"validatableComponent.mjs","names":[],"sources":["../../../../package/services/formValidation/validatableComponent.tsx"],"sourcesContent":["/* eslint-disable react/no-unused-state */\nimport React, { PureComponent } from 'react';\nimport FormValidator from 'services/formValidation/formValidator';\nimport Tooltip from 'components/common/tooltip';\n\nexport interface ValidatableComponentProps {\n formValidator?: FormValidator | null;\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: unknown) => void) | null;\n errorMessage?: string;\n isValid?: boolean;\n isRequired?: boolean;\n label?: string;\n}\n\nexport interface ValidatableComponentState {\n isFocused: boolean;\n isHovered: boolean;\n}\n\n/**\n * Base class that extends PureComponent with FormValidator integration.\n * Manages hover/focus state and renders error tooltips.\n */\nexport default class ValidatableComponent<\n P extends ValidatableComponentProps = ValidatableComponentProps,\n S extends ValidatableComponentState = ValidatableComponentState,\n> extends PureComponent<P, S> {\n static defaultProps: Partial<ValidatableComponentProps> = {\n formValidator: null,\n onMouseEnter: null,\n onMouseLeave: null,\n onFocus: null,\n onBlur: null,\n onChange: null,\n errorMessage: '',\n isValid: false,\n isRequired: false,\n label: '',\n };\n\n constructor(props: P) {\n super(props);\n const { formValidator } = props;\n\n if (formValidator) {\n formValidator.label = props.label ?? '';\n formValidator.validate();\n formValidator.registerOnUpdateListener(() => { this.forceUpdate(); });\n }\n\n this.state = { isFocused: false, isHovered: false } as S;\n\n this.onMouseEnter = this.onMouseEnter.bind(this);\n this.onMouseLeave = this.onMouseLeave.bind(this);\n this.onFocus = this.onFocus.bind(this);\n this.onBlur = this.onBlur.bind(this);\n this.hasError = this.hasError.bind(this);\n this.renderTooltip = this.renderTooltip.bind(this);\n this.onChange = this.onChange.bind(this);\n }\n\n componentDidMount(): void {\n setTimeout(() => this.setState({ isFocused: false, isHovered: false } as S), 1);\n }\n\n componentDidUpdate(prevProps: P): void {\n const { formValidator } = this.props;\n if (prevProps.formValidator && formValidator && prevProps.formValidator !== formValidator) {\n formValidator.registerOnUpdateListener(() => { this.forceUpdate(); });\n }\n }\n\n onMouseEnter(event: React.MouseEvent): void {\n const { onMouseEnter } = this.props;\n this.setState({ isHovered: true } as unknown as S);\n if (onMouseEnter) onMouseEnter(event);\n }\n\n onMouseLeave(event: React.MouseEvent): void {\n const { onMouseLeave } = this.props;\n this.setState({ isHovered: false } as unknown as S);\n if (onMouseLeave) onMouseLeave(event);\n }\n\n onFocus(event: React.FocusEvent): void {\n const { onFocus } = this.props;\n this.setState({ isFocused: true } as unknown as S);\n if (onFocus) onFocus(event);\n }\n\n onBlur(event: React.FocusEvent): void {\n const { formValidator, onBlur } = this.props;\n if (formValidator) formValidator.touched = true;\n this.setState({ isFocused: false } as unknown as S);\n if (onBlur) onBlur(event);\n }\n\n hasError(): boolean {\n const { errorMessage, isValid, formValidator } = this.props;\n return formValidator\n ? (formValidator.touched && formValidator.hasError())\n : (!isValid || !!errorMessage);\n }\n\n isRequired(): boolean {\n const { isRequired, formValidator } = this.props;\n return !!(isRequired\n || (formValidator && formValidator.validators.find((v) => (v as { validatorId?: string }).validatorId === 'required')));\n }\n\n renderTooltip(): React.ReactNode {\n const { errorMessage, formValidator } = this.props;\n const { isHovered, isFocused } = this.state;\n return (\n <Tooltip\n variant=\"error\"\n message={formValidator ? formValidator.getCurrentErrorMessage() : (errorMessage || '')}\n isVisible={this.hasError() && (isFocused || isHovered)}\n />\n );\n }\n\n onChange(newVal: unknown): void {\n const { onChange, formValidator } = this.props;\n if (formValidator) {\n let extractedVal = newVal;\n if (newVal && (newVal as React.ChangeEvent<HTMLInputElement>).target) {\n extractedVal = (newVal as React.ChangeEvent<HTMLInputElement>).target.value;\n }\n formValidator.set(extractedVal);\n }\n if (onChange) onChange(newVal);\n }\n}\n"],"mappings":"8HA2BA,IAAqB,EAArB,cAGU,CAAoB,0BAC8B,CACxD,cAAe,KACf,aAAc,KACd,aAAc,KACd,QAAS,KACT,OAAQ,KACR,SAAU,KACV,aAAc,GACd,QAAS,GACT,WAAY,GACZ,MAAO,EACT,EAEA,YAAY,EAAU,CACpB,MAAM,CAAK,EACX,GAAM,CAAE,iBAAkB,EAEtB,IACF,EAAc,MAAQ,EAAM,OAAS,GACrC,EAAc,SAAS,EACvB,EAAc,6BAA+B,CAAE,KAAK,YAAY,CAAG,CAAC,GAGtE,KAAK,MAAQ,CAAE,UAAW,GAAO,UAAW,EAAM,EAElD,KAAK,aAAe,KAAK,aAAa,KAAK,IAAI,EAC/C,KAAK,aAAe,KAAK,aAAa,KAAK,IAAI,EAC/C,KAAK,QAAU,KAAK,QAAQ,KAAK,IAAI,EACrC,KAAK,OAAS,KAAK,OAAO,KAAK,IAAI,EACnC,KAAK,SAAW,KAAK,SAAS,KAAK,IAAI,EACvC,KAAK,cAAgB,KAAK,cAAc,KAAK,IAAI,EACjD,KAAK,SAAW,KAAK,SAAS,KAAK,IAAI,CACzC,CAEA,mBAA0B,CACxB,eAAiB,KAAK,SAAS,CAAE,UAAW,GAAO,UAAW,EAAM,CAAM,EAAG,CAAC,CAChF,CAEA,mBAAmB,EAAoB,CACrC,GAAM,CAAE,iBAAkB,KAAK,MAC3B,EAAU,eAAiB,GAAiB,EAAU,gBAAkB,GAC1E,EAAc,6BAA+B,CAAE,KAAK,YAAY,CAAG,CAAC,CAExE,CAEA,aAAa,EAA+B,CAC1C,GAAM,CAAE,gBAAiB,KAAK,MAC9B,KAAK,SAAS,CAAE,UAAW,EAAK,CAAiB,EAC7C,GAAc,EAAa,CAAK,CACtC,CAEA,aAAa,EAA+B,CAC1C,GAAM,CAAE,gBAAiB,KAAK,MAC9B,KAAK,SAAS,CAAE,UAAW,EAAM,CAAiB,EAC9C,GAAc,EAAa,CAAK,CACtC,CAEA,QAAQ,EAA+B,CACrC,GAAM,CAAE,WAAY,KAAK,MACzB,KAAK,SAAS,CAAE,UAAW,EAAK,CAAiB,EAC7C,GAAS,EAAQ,CAAK,CAC5B,CAEA,OAAO,EAA+B,CACpC,GAAM,CAAE,gBAAe,UAAW,KAAK,MACnC,IAAe,EAAc,QAAU,IAC3C,KAAK,SAAS,CAAE,UAAW,EAAM,CAAiB,EAC9C,GAAQ,EAAO,CAAK,CAC1B,CAEA,UAAoB,CAClB,GAAM,CAAE,eAAc,UAAS,iBAAkB,KAAK,MACtD,OAAO,EACF,EAAc,SAAW,EAAc,SAAS,EAChD,CAAC,GAAW,CAAC,CAAC,CACrB,CAEA,YAAsB,CACpB,GAAM,CAAE,aAAY,iBAAkB,KAAK,MAC3C,MAAO,CAAC,EAAE,GACJ,GAAiB,EAAc,WAAW,KAAM,GAAO,EAA+B,cAAgB,UAAU,EACxH,CAEA,eAAiC,CAC/B,GAAM,CAAE,eAAc,iBAAkB,KAAK,MACvC,CAAE,YAAW,aAAc,KAAK,MACtC,OACE,EAAC,EAAD,CACE,QAAQ,QACR,QAAS,EAAgB,EAAc,uBAAuB,EAAK,GAAgB,GACnF,UAAW,KAAK,SAAS,IAAM,GAAa,EAC7C,CAAA,CAEL,CAEA,SAAS,EAAuB,CAC9B,GAAM,CAAE,WAAU,iBAAkB,KAAK,MACzC,GAAI,EAAe,CACjB,IAAI,EAAe,EACf,GAAW,EAA+C,SAC5D,EAAgB,EAA+C,OAAO,OAExE,EAAc,IAAI,CAAY,CAChC,CACI,GAAU,EAAS,CAAM,CAC/B,CACF"}
1
+ {"version":3,"file":"validatableComponent.mjs","names":[],"sources":["../../../../package/services/formValidation/validatableComponent.tsx"],"sourcesContent":["/* eslint-disable react/no-unused-state */\nimport React, { PureComponent } from 'react';\nimport { FormValidator } from '@ahrowe/form-validation';\nimport Tooltip from 'components/common/tooltip';\n\nexport interface ValidatableComponentProps {\n formValidator?: FormValidator | null;\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: unknown) => void) | null;\n errorMessage?: string;\n isValid?: boolean;\n isRequired?: boolean;\n label?: string;\n}\n\nexport interface ValidatableComponentState {\n isFocused: boolean;\n isHovered: boolean;\n}\n\n/**\n * Base class that extends PureComponent with FormValidator integration.\n * Manages hover/focus state and renders error tooltips.\n */\nexport default class ValidatableComponent<\n P extends ValidatableComponentProps = ValidatableComponentProps,\n S extends ValidatableComponentState = ValidatableComponentState,\n> extends PureComponent<P, S> {\n static defaultProps: Partial<ValidatableComponentProps> = {\n formValidator: null,\n onMouseEnter: null,\n onMouseLeave: null,\n onFocus: null,\n onBlur: null,\n onChange: null,\n errorMessage: '',\n isValid: false,\n isRequired: false,\n label: '',\n };\n\n constructor(props: P) {\n super(props);\n const { formValidator } = props;\n\n if (formValidator) {\n formValidator.label = props.label ?? '';\n formValidator.validate();\n formValidator.registerOnUpdateListener(() => { this.forceUpdate(); });\n }\n\n this.state = { isFocused: false, isHovered: false } as S;\n\n this.onMouseEnter = this.onMouseEnter.bind(this);\n this.onMouseLeave = this.onMouseLeave.bind(this);\n this.onFocus = this.onFocus.bind(this);\n this.onBlur = this.onBlur.bind(this);\n this.hasError = this.hasError.bind(this);\n this.renderTooltip = this.renderTooltip.bind(this);\n this.onChange = this.onChange.bind(this);\n }\n\n componentDidMount(): void {\n setTimeout(() => this.setState({ isFocused: false, isHovered: false } as S), 1);\n }\n\n componentDidUpdate(prevProps: P): void {\n const { formValidator } = this.props;\n if (prevProps.formValidator && formValidator && prevProps.formValidator !== formValidator) {\n formValidator.registerOnUpdateListener(() => { this.forceUpdate(); });\n }\n }\n\n onMouseEnter(event: React.MouseEvent): void {\n const { onMouseEnter } = this.props;\n this.setState({ isHovered: true } as unknown as S);\n if (onMouseEnter) onMouseEnter(event);\n }\n\n onMouseLeave(event: React.MouseEvent): void {\n const { onMouseLeave } = this.props;\n this.setState({ isHovered: false } as unknown as S);\n if (onMouseLeave) onMouseLeave(event);\n }\n\n onFocus(event: React.FocusEvent): void {\n const { onFocus } = this.props;\n this.setState({ isFocused: true } as unknown as S);\n if (onFocus) onFocus(event);\n }\n\n onBlur(event: React.FocusEvent): void {\n const { formValidator, onBlur } = this.props;\n if (formValidator) formValidator.touched = true;\n this.setState({ isFocused: false } as unknown as S);\n if (onBlur) onBlur(event);\n }\n\n hasError(): boolean {\n const { errorMessage, isValid, formValidator } = this.props;\n return formValidator\n ? (formValidator.touched && formValidator.hasError())\n : (!isValid || !!errorMessage);\n }\n\n isRequired(): boolean {\n const { isRequired, formValidator } = this.props;\n return !!(isRequired\n || (formValidator && formValidator.validators.find((v) => (v as { validatorId?: string }).validatorId === 'required')));\n }\n\n renderTooltip(): React.ReactNode {\n const { errorMessage, formValidator } = this.props;\n const { isHovered, isFocused } = this.state;\n return (\n <Tooltip\n variant=\"error\"\n message={formValidator ? formValidator.getCurrentErrorMessage() : (errorMessage || '')}\n isVisible={this.hasError() && (isFocused || isHovered)}\n />\n );\n }\n\n onChange(newVal: unknown): void {\n const { onChange, formValidator } = this.props;\n if (formValidator) {\n let extractedVal = newVal;\n if (newVal && (newVal as React.ChangeEvent<HTMLInputElement>).target) {\n extractedVal = (newVal as React.ChangeEvent<HTMLInputElement>).target.value;\n }\n formValidator.set(extractedVal);\n }\n if (onChange) onChange(newVal);\n }\n}\n"],"mappings":"8HA2BA,IAAqB,EAArB,cAGU,CAAoB,0BAC8B,CACxD,cAAe,KACf,aAAc,KACd,aAAc,KACd,QAAS,KACT,OAAQ,KACR,SAAU,KACV,aAAc,GACd,QAAS,GACT,WAAY,GACZ,MAAO,EACT,EAEA,YAAY,EAAU,CACpB,MAAM,CAAK,EACX,GAAM,CAAE,iBAAkB,EAEtB,IACF,EAAc,MAAQ,EAAM,OAAS,GACrC,EAAc,SAAS,EACvB,EAAc,6BAA+B,CAAE,KAAK,YAAY,CAAG,CAAC,GAGtE,KAAK,MAAQ,CAAE,UAAW,GAAO,UAAW,EAAM,EAElD,KAAK,aAAe,KAAK,aAAa,KAAK,IAAI,EAC/C,KAAK,aAAe,KAAK,aAAa,KAAK,IAAI,EAC/C,KAAK,QAAU,KAAK,QAAQ,KAAK,IAAI,EACrC,KAAK,OAAS,KAAK,OAAO,KAAK,IAAI,EACnC,KAAK,SAAW,KAAK,SAAS,KAAK,IAAI,EACvC,KAAK,cAAgB,KAAK,cAAc,KAAK,IAAI,EACjD,KAAK,SAAW,KAAK,SAAS,KAAK,IAAI,CACzC,CAEA,mBAA0B,CACxB,eAAiB,KAAK,SAAS,CAAE,UAAW,GAAO,UAAW,EAAM,CAAM,EAAG,CAAC,CAChF,CAEA,mBAAmB,EAAoB,CACrC,GAAM,CAAE,iBAAkB,KAAK,MAC3B,EAAU,eAAiB,GAAiB,EAAU,gBAAkB,GAC1E,EAAc,6BAA+B,CAAE,KAAK,YAAY,CAAG,CAAC,CAExE,CAEA,aAAa,EAA+B,CAC1C,GAAM,CAAE,gBAAiB,KAAK,MAC9B,KAAK,SAAS,CAAE,UAAW,EAAK,CAAiB,EAC7C,GAAc,EAAa,CAAK,CACtC,CAEA,aAAa,EAA+B,CAC1C,GAAM,CAAE,gBAAiB,KAAK,MAC9B,KAAK,SAAS,CAAE,UAAW,EAAM,CAAiB,EAC9C,GAAc,EAAa,CAAK,CACtC,CAEA,QAAQ,EAA+B,CACrC,GAAM,CAAE,WAAY,KAAK,MACzB,KAAK,SAAS,CAAE,UAAW,EAAK,CAAiB,EAC7C,GAAS,EAAQ,CAAK,CAC5B,CAEA,OAAO,EAA+B,CACpC,GAAM,CAAE,gBAAe,UAAW,KAAK,MACnC,IAAe,EAAc,QAAU,IAC3C,KAAK,SAAS,CAAE,UAAW,EAAM,CAAiB,EAC9C,GAAQ,EAAO,CAAK,CAC1B,CAEA,UAAoB,CAClB,GAAM,CAAE,eAAc,UAAS,iBAAkB,KAAK,MACtD,OAAO,EACF,EAAc,SAAW,EAAc,SAAS,EAChD,CAAC,GAAW,CAAC,CAAC,CACrB,CAEA,YAAsB,CACpB,GAAM,CAAE,aAAY,iBAAkB,KAAK,MAC3C,MAAO,CAAC,EAAE,GACJ,GAAiB,EAAc,WAAW,KAAM,GAAO,EAA+B,cAAgB,UAAU,EACxH,CAEA,eAAiC,CAC/B,GAAM,CAAE,eAAc,iBAAkB,KAAK,MACvC,CAAE,YAAW,aAAc,KAAK,MACtC,OACE,EAAC,EAAD,CACE,QAAQ,QACR,QAAS,EAAgB,EAAc,uBAAuB,EAAK,GAAgB,GACnF,UAAW,KAAK,SAAS,IAAM,GAAa,EAC7C,CAAA,CAEL,CAEA,SAAS,EAAuB,CAC9B,GAAM,CAAE,WAAU,iBAAkB,KAAK,MACzC,GAAI,EAAe,CACjB,IAAI,EAAe,EACf,GAAW,EAA+C,SAC5D,EAAgB,EAA+C,OAAO,OAExE,EAAc,IAAI,CAAY,CAChC,CACI,GAAU,EAAS,CAAM,CAC/B,CACF"}