@ahrowe/ui 0.15.0 → 0.16.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.
- package/dist/esm/common/flip/flip.mjs +2 -0
- package/dist/esm/common/flip/flip.mjs.map +1 -0
- package/dist/esm/common/flip/flip.module.mjs +2 -0
- package/dist/esm/common/flip/flip.module.mjs.map +1 -0
- package/dist/esm/common/floatingMenu/useFloatingPosition.mjs +1 -1
- package/dist/esm/common/floatingMenu/useFloatingPosition.mjs.map +1 -1
- package/dist/esm/common/input/input.mjs +1 -1
- package/dist/esm/common/input/input.mjs.map +1 -1
- package/dist/esm/common/numberInput/numberInput.mjs +1 -1
- package/dist/esm/common/numberInput/numberInput.mjs.map +1 -1
- package/dist/esm/common/revealLens/revealLens.mjs +2 -0
- package/dist/esm/common/revealLens/revealLens.mjs.map +1 -0
- package/dist/esm/common/revealLens/revealLens.module.mjs +2 -0
- package/dist/esm/common/revealLens/revealLens.module.mjs.map +1 -0
- package/dist/esm/common/tilt/tilt.mjs +2 -0
- package/dist/esm/common/tilt/tilt.mjs.map +1 -0
- package/dist/esm/common/tilt/tilt.module.mjs +2 -0
- package/dist/esm/common/tilt/tilt.module.mjs.map +1 -0
- package/dist/esm/common/tilt/tiltMath.mjs +2 -0
- package/dist/esm/common/tilt/tiltMath.mjs.map +1 -0
- package/dist/esm/common/tiltGroup/tiltGroup.mjs +2 -0
- package/dist/esm/common/tiltGroup/tiltGroup.mjs.map +1 -0
- package/dist/esm/common/timeline/timeline.module.mjs.map +1 -1
- package/dist/esm/index.mjs +1 -1
- package/dist/index.cjs +6 -6
- package/dist/index.cjs.map +1 -1
- package/dist/style.css +1 -1
- package/dist/types/package/common/configProvider/configProvider.types.d.ts +6 -0
- package/dist/types/package/common/flip/flip.d.ts +3 -0
- package/dist/types/package/common/flip/flip.types.d.ts +42 -0
- package/dist/types/package/common/flip/index.d.ts +2 -0
- package/dist/types/package/common/revealLens/index.d.ts +2 -0
- package/dist/types/package/common/revealLens/revealLens.d.ts +4 -0
- package/dist/types/package/common/revealLens/revealLens.types.d.ts +24 -0
- package/dist/types/package/common/tilt/index.d.ts +4 -0
- package/dist/types/package/common/tilt/tilt.d.ts +3 -0
- package/dist/types/package/common/tilt/tilt.types.d.ts +38 -0
- package/dist/types/package/common/tilt/tiltMath.d.ts +24 -0
- package/dist/types/package/common/tiltGroup/index.d.ts +3 -0
- package/dist/types/package/common/tiltGroup/tiltGroup.d.ts +6 -0
- package/dist/types/package/common/tiltGroup/tiltGroup.types.d.ts +16 -0
- package/dist/types/package/index.d.ts +8 -0
- package/docs/CLAUDE.md +3 -0
- package/docs/Dropdown.md +1 -1
- package/docs/Flip.md +97 -0
- package/docs/FloatingMenu.md +2 -0
- package/docs/Input.md +25 -2
- package/docs/InputDropdown.md +1 -1
- package/docs/RevealLens.md +67 -0
- package/docs/Tilt.md +124 -0
- package/package.json +1 -1
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{useComponentDefaults as e}from"../configProvider/useComponentDefaults.mjs";import t from"./flip.module.mjs";import{forwardRef as n,useEffect as r,useImperativeHandle as i,useRef as a,useState as o}from"react";import s from"classnames";import{jsx as c,jsxs as l}from"react/jsx-runtime";function u(){return typeof process<`u`&&!1}function d(){return typeof window<`u`&&window.matchMedia?.(`(prefers-reduced-motion: reduce)`).matches===!0}var f=n(function(n,f){let{front:p,back:m,flipped:h,defaultFlipped:g=!1,flipOnClick:_=!1,flipAxis:v=`y`,reverse:y=!1,flipDuration:b=600,perspective:x=800,disabled:S=!1,onFlip:C,onFlipEnd:w,className:T,style:E,classNames:D,styles:O,...k}=e(`Flip`,n),A=h!==void 0,[j,M]=o(g),N=A?h:j;function P(e){A||M(e),C?.(e)}let F=()=>{!_||S||P(!N)},I=e=>{!_||S||e.key!==`Enter`&&e.key!==` `||(e.preventDefault(),P(!N))},L=a(!1);r(()=>{if(!L.current){L.current=!0;return}d()&&w?.(N)},[N]);let R=e=>{e.target!==e.currentTarget||e.propertyName!==`transform`||w?.(N)};i(f,()=>({flip(){if(A){u()&&console.warn("Flip: flip() called on a controlled instance, update the `flipped` prop instead.");return}P(!N)},setFlipped(e){if(A){u()&&console.warn("Flip: setFlipped() called on a controlled instance, update the `flipped` prop instead.");return}P(e)},reset(){A||M(!1)}}));let z=y?-180:180,B=v===`x`&&N?z:0,V=v===`y`&&N?z:0,H=v===`x`?z:0,U=v===`y`?z:0;return c(`div`,{...k,className:s(t.flip,_&&t.flipClickable,T,D?.root),style:{...E,...O?.root},onClick:F,onKeyDown:_?I:void 0,role:_?`button`:void 0,tabIndex:_?0:void 0,"aria-pressed":_?N:void 0,children:c(`div`,{className:s(t.flipPerspective,D?.perspective),style:{perspective:x===`none`?`none`:`${x}px`,...O?.perspective},children:l(`div`,{className:s(t.flipSurface,D?.surface),style:{transform:`rotateX(${B}deg) rotateY(${V}deg)`,"--flip-duration":`${b}ms`,...O?.surface},"data-flipped":N,onTransitionEnd:R,children:[c(`div`,{className:s(t.flipFront,D?.front),style:O?.front,children:p}),c(`div`,{className:s(t.flipBack,D?.back),style:{transform:`rotateX(${H}deg) rotateY(${U}deg)`,...O?.back},children:m})]})})})});export{f as default};
|
|
2
|
+
//# sourceMappingURL=flip.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"flip.mjs","names":[],"sources":["../../../../package/common/flip/flip.tsx"],"sourcesContent":["import {\n forwardRef,\n useEffect,\n useImperativeHandle,\n useRef,\n useState,\n type CSSProperties,\n type KeyboardEvent,\n} from 'react';\nimport cx from 'classnames';\n\nimport { useComponentDefaults } from '../configProvider';\nimport type { FlipHandle, FlipProps } from './flip.types';\nimport styles from './flip.module.pcss';\n\n// Module-scoped ambient typing for the bundler-replaced NODE_ENV guard below. See bodyEnd.tsx.\ndeclare const process: { env: { NODE_ENV?: string } };\n\nfunction isDev(): boolean {\n return typeof process !== 'undefined' && process.env.NODE_ENV !== 'production';\n}\n\nfunction prefersReducedMotion(): boolean {\n return typeof window !== 'undefined' && window.matchMedia?.('(prefers-reduced-motion: reduce)').matches === true;\n}\n\nconst Flip = forwardRef<FlipHandle, FlipProps>(function Flip(props, ref) {\n const {\n front,\n back,\n flipped,\n defaultFlipped = false,\n flipOnClick = false,\n flipAxis = 'y',\n reverse = false,\n flipDuration = 600,\n perspective = 800,\n disabled = false,\n onFlip,\n onFlipEnd,\n className,\n style,\n classNames,\n styles: slotStyles,\n ...rest\n } = useComponentDefaults('Flip', props);\n\n const isControlled = flipped !== undefined;\n const [internalFlipped, setInternalFlipped] = useState(defaultFlipped);\n const effectiveFlipped = isControlled ? flipped : internalFlipped;\n\n function doFlip(nextFlipped: boolean) {\n if (!isControlled) setInternalFlipped(nextFlipped);\n onFlip?.(nextFlipped);\n }\n\n const handleClick = () => {\n if (!flipOnClick || disabled) return;\n doFlip(!effectiveFlipped);\n };\n\n const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n if (!flipOnClick || disabled) return;\n if (event.key !== 'Enter' && event.key !== ' ') return;\n event.preventDefault();\n doFlip(!effectiveFlipped);\n };\n\n const mountedRef = useRef(false);\n useEffect(() => {\n if (!mountedRef.current) {\n mountedRef.current = true;\n return;\n }\n if (prefersReducedMotion()) onFlipEnd?.(effectiveFlipped);\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [effectiveFlipped]);\n\n const handleTransitionEnd = (event: React.TransitionEvent<HTMLDivElement>) => {\n if (event.target !== event.currentTarget || event.propertyName !== 'transform') return;\n onFlipEnd?.(effectiveFlipped);\n };\n\n useImperativeHandle(ref, () => ({\n flip() {\n if (isControlled) {\n if (isDev()) {\n console.warn('Flip: flip() called on a controlled instance, update the `flipped` prop instead.');\n }\n return;\n }\n doFlip(!effectiveFlipped);\n },\n setFlipped(value: boolean) {\n if (isControlled) {\n if (isDev()) {\n console.warn('Flip: setFlipped() called on a controlled instance, update the `flipped` prop instead.');\n }\n return;\n }\n doFlip(value);\n },\n reset() {\n if (!isControlled) setInternalFlipped(false);\n },\n }));\n\n // `reverse` flips the rotation sign on the same hinge axis (+180deg vs -180deg), so adjacent\n // flips can sweep opposite ways without changing which edge they hinge on. The back face's\n // own static rotation (below) always uses this same sign, unconditionally: two rotations of\n // the same sign about the same axis (surface's + back's own) sum to +/-360deg, which is a full\n // turn back to a right-reading, forward-facing back, regardless of whether `reverse` is set.\n const turn = reverse ? -180 : 180;\n const flipOffsetX = flipAxis === 'x' && effectiveFlipped ? turn : 0;\n const flipOffsetY = flipAxis === 'y' && effectiveFlipped ? turn : 0;\n const backOffsetX = flipAxis === 'x' ? turn : 0;\n const backOffsetY = flipAxis === 'y' ? turn : 0;\n\n return (\n <div\n {...rest}\n className={cx(styles.flip, flipOnClick && styles.flipClickable, className, classNames?.root)}\n style={{ ...style, ...slotStyles?.root }}\n onClick={handleClick}\n onKeyDown={flipOnClick ? handleKeyDown : undefined}\n role={flipOnClick ? 'button' : undefined}\n tabIndex={flipOnClick ? 0 : undefined}\n aria-pressed={flipOnClick ? effectiveFlipped : undefined}\n >\n <div\n className={cx(styles.flipPerspective, classNames?.perspective)}\n style={{\n perspective: perspective === 'none' ? 'none' : `${perspective}px`,\n ...slotStyles?.perspective,\n }}\n >\n <div\n className={cx(styles.flipSurface, classNames?.surface)}\n style={{\n transform: `rotateX(${flipOffsetX}deg) rotateY(${flipOffsetY}deg)`,\n '--flip-duration': `${flipDuration}ms`,\n ...slotStyles?.surface,\n } as CSSProperties & Record<'--flip-duration', string>}\n data-flipped={effectiveFlipped}\n onTransitionEnd={handleTransitionEnd}\n >\n <div\n className={cx(styles.flipFront, classNames?.front)}\n style={slotStyles?.front}\n >\n {front}\n </div>\n <div\n className={cx(styles.flipBack, classNames?.back)}\n style={{\n transform: `rotateX(${backOffsetX}deg) rotateY(${backOffsetY}deg)`,\n ...slotStyles?.back,\n }}\n >\n {back}\n </div>\n </div>\n </div>\n </div>\n );\n});\n\nexport default Flip;\n"],"mappings":"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"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
var e={flip:`flip_bL-UK`,"flip-clickable":`flip-clickable_YcfaN`,flipClickable:`flip-clickable_YcfaN`,"flip-perspective":`flip-perspective_i9Km7`,flipPerspective:`flip-perspective_i9Km7`,"flip-surface":`flip-surface_wu3Rt`,flipSurface:`flip-surface_wu3Rt`,"flip-front":`flip-front_2kwDN`,flipFront:`flip-front_2kwDN`,"flip-back":`flip-back_4eqrK`,flipBack:`flip-back_4eqrK`};export{e as default};
|
|
2
|
+
//# sourceMappingURL=flip.module.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"flip.module.mjs","names":[],"sources":["../../../../package/common/flip/flip.module.pcss"],"sourcesContent":[".flip {\n display: inline-grid;\n\n &-clickable {\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n }\n\n &-perspective {\n display: grid;\n min-width: 0;\n min-height: 0;\n }\n\n &-surface {\n display: grid;\n min-width: 0;\n min-height: 0;\n transform-style: preserve-3d;\n transition: transform var(--flip-duration, 0.6s) ease;\n will-change: transform;\n\n @media (prefers-reduced-motion: reduce) {\n transition: none;\n }\n }\n\n &-front,\n &-back {\n grid-area: 1 / 1;\n min-width: 0;\n min-height: 0;\n backface-visibility: hidden;\n -webkit-backface-visibility: hidden;\n will-change: transform;\n }\n}\n"],"mappings":""}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{getScrollableAncestors as e,isHiddenByAnyAncestor as t}from"../utils/scrollAncestors.mjs";import{useLayoutEffect as n}from"react";function r({isOpen:r,triggerRef:i,anchorRef:a,panelRef:o,flipClassName:s,placement:c=`bottom`}){n(()=>{if(!r)return;let n,l;function u(){let r=i.current,d=a.current;if(!r||!d){n=requestAnimationFrame(u);return}let f=e(r);function p(){let e=r.getBoundingClientRect(),n=o.current?.offsetHeight??0,i=window.innerHeight-e.bottom,a=e.top,l=c===`top`?a:i,u=l<n&&(c===`top`?i:a)>l,p=c===`top`?!u:u;d.classList.toggle(s,u),d.style.top=`${p?e.top-d.offsetHeight:e.bottom}px`,d.style.left=`${e.left}px`,d.style.visibility=t(e,f)?`hidden
|
|
1
|
+
import{getScrollableAncestors as e,isHiddenByAnyAncestor as t}from"../utils/scrollAncestors.mjs";import{useLayoutEffect as n}from"react";function r({isOpen:r,triggerRef:i,anchorRef:a,panelRef:o,flipClassName:s,placement:c=`bottom`}){n(()=>{if(!r)return;let n,l;function u(){let r=i.current,d=a.current;if(!r||!d){n=requestAnimationFrame(u);return}let f=e(r);function p(){let e=r.getBoundingClientRect(),n=o.current?.offsetHeight??0,i=window.innerHeight-e.bottom,a=e.top,l=c===`top`?a:i,u=l<n&&(c===`top`?i:a)>l,p=c===`top`?!u:u;d.classList.toggle(s,u),d.style.top=`${p?e.top-d.offsetHeight:e.bottom}px`,d.style.left=`${e.left}px`,d.style.visibility=t(e,f)?`hidden`:``;let m=o.current;m&&!h.has(m)&&g()}let m=new ResizeObserver(()=>p()),h=new Set;function g(){[d,o.current].forEach(e=>{!e||h.has(e)||(h.add(e),m.observe(e))})}p();let _=[window,...f];_.forEach(e=>e.addEventListener(`scroll`,p,{passive:!0})),window.addEventListener(`resize`,p),l=()=>{_.forEach(e=>e.removeEventListener(`scroll`,p)),window.removeEventListener(`resize`,p),m.disconnect()}}return u(),()=>{n!==void 0&&cancelAnimationFrame(n),l?.()}},[r,i,a,o,s,c])}export{r as useFloatingPosition};
|
|
2
2
|
//# sourceMappingURL=useFloatingPosition.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useFloatingPosition.mjs","names":[],"sources":["../../../../package/common/floatingMenu/useFloatingPosition.ts"],"sourcesContent":["import { useLayoutEffect, type RefObject } from 'react';\nimport { getScrollableAncestors, isHiddenByAnyAncestor } from 'components/common/utils/scrollAncestors';\n\nexport interface UseFloatingPositionArgs {\n isOpen: boolean;\n /** The element the popup is anchored to. */\n triggerRef: RefObject<HTMLElement | null>;\n /** The `position: fixed` element that gets `top`/`left`/`visibility` written to it directly. */\n anchorRef: RefObject<HTMLElement | null>;\n /** The visible panel whose height decides whether there's room to render on the preferred side. */\n panelRef: RefObject<HTMLElement | null>;\n /** Class toggled on `anchorRef` when flipped to the non-preferred side. */\n flipClassName: string;\n /** Preferred side relative to the trigger (default `'bottom'`) — flips to the other side when there's no room. */\n placement?: 'top' | 'bottom';\n}\n\n/**\n * Keeps a portaled, `position: fixed` popup anchored to a trigger element: tracks the\n * trigger across scroll/resize on every real scrolling ancestor, flips above the trigger\n * when there's no room below, and hides (not closes) the popup when the trigger itself\n * scrolls behind a clipping ancestor — matching Floating UI's autoUpdate + hide middleware.\n *\n * Position/visibility are written straight to the DOM via refs, not through React state:\n * going through setState -> re-render -> commit adds a round-trip that lags behind the\n * browser's own scroll painting by at least a frame.\n */\nexport function useFloatingPosition({ isOpen, triggerRef, anchorRef, panelRef, flipClassName, placement = 'bottom' }: UseFloatingPositionArgs) {\n useLayoutEffect(() => {\n if (!isOpen) return;\n\n let rafId: number | undefined;\n let teardown: (() => void) | undefined;\n\n // The anchor/trigger may not be mounted yet on the very first invocation of this\n // effect: a portal target (e.g. BodyEnd's `#bodyEnd` div) can still be missing on\n // the initial render, in which case the portaled content — and this ref — commits\n // one render later. Since refs never change identity, that later commit doesn't\n // re-trigger this effect on its own, so retry on the next frame until it's there.\n function trySetup() {\n const trigger = triggerRef.current;\n const anchor = anchorRef.current;\n if (!trigger || !anchor) {\n rafId = requestAnimationFrame(trySetup);\n return;\n }\n const ancestors = getScrollableAncestors(trigger);\n\n function updatePos() {\n const rect = trigger!.getBoundingClientRect();\n const panelHeight = panelRef.current?.offsetHeight ?? 0;\n const spaceBelow = window.innerHeight - rect.bottom;\n const spaceAbove = rect.top;\n const preferredSpace = placement === 'top' ? spaceAbove : spaceBelow;\n const alternateSpace = placement === 'top' ? spaceBelow : spaceAbove;\n const flip = preferredSpace < panelHeight && alternateSpace > preferredSpace;\n const renderAbove = placement === 'top' ? !flip : flip;\n anchor!.classList.toggle(flipClassName, flip);\n // Shift up by the anchor's own height when rendering above, so this works whether\n // the anchor is a zero-height decorative wrapper (FloatingMenu, whose real panel\n // hangs off it via absolute-positioned CSS) or the visible panel itself\n // (Dropdown) — for the former the shift is a no-op (height 0).\n anchor!.style.top = `${renderAbove ? rect.top - anchor!.offsetHeight : rect.bottom}px`;\n anchor!.style.left = `${rect.left}px`;\n anchor!.style.visibility = isHiddenByAnyAncestor(rect, ancestors) ? 'hidden' : '';\n }\n\n updatePos();\n\n const scrollTargets: (Window | HTMLElement)[] = [window, ...ancestors];\n scrollTargets.forEach((t) => t.addEventListener('scroll', updatePos, { passive: true }));\n window.addEventListener('resize', updatePos);\n teardown = () => {\n scrollTargets.forEach((t) => t.removeEventListener('scroll', updatePos));\n window.removeEventListener('resize', updatePos);\n };\n }\n\n trySetup();\n\n return () => {\n if (rafId !== undefined) cancelAnimationFrame(rafId);\n teardown?.();\n };\n }, [isOpen, triggerRef, anchorRef, panelRef, flipClassName, placement]);\n}"],"mappings":"yIA2BA,SAAgB,EAAoB,CAAE,SAAQ,aAAY,YAAW,WAAU,gBAAe,YAAY,UAAqC,CAC7I,MAAsB,CACpB,GAAI,CAAC,EAAQ,OAEb,IAAI,EACA,EAOJ,SAAS,GAAW,CAClB,IAAM,EAAU,EAAW,QACrB,EAAS,EAAU,QACzB,GAAI,CAAC,GAAW,CAAC,EAAQ,CACvB,EAAQ,sBAAsB,CAAQ,EACtC,MACF,CACA,IAAM,EAAY,EAAuB,CAAO,EAEhD,SAAS,GAAY,CACnB,IAAM,EAAO,EAAS,sBAAsB,EACtC,EAAc,EAAS,SAAS,cAAgB,EAChD,EAAa,OAAO,YAAc,EAAK,OACvC,EAAa,EAAK,IAClB,EAAiB,IAAc,MAAQ,EAAa,EAEpD,EAAO,EAAiB,IADP,IAAc,MAAQ,EAAa,GACI,EACxD,EAAc,IAAc,MAAQ,CAAC,EAAO,EAClD,EAAQ,UAAU,OAAO,EAAe,CAAI,EAK5C,EAAQ,MAAM,IAAM,GAAG,EAAc,EAAK,IAAM,EAAQ,aAAe,EAAK,OAAO,IACnF,EAAQ,MAAM,KAAO,GAAG,EAAK,KAAK,IAClC,EAAQ,MAAM,WAAa,EAAsB,EAAM,CAAS,EAAI,SAAW,
|
|
1
|
+
{"version":3,"file":"useFloatingPosition.mjs","names":[],"sources":["../../../../package/common/floatingMenu/useFloatingPosition.ts"],"sourcesContent":["import { useLayoutEffect, type RefObject } from 'react';\nimport { getScrollableAncestors, isHiddenByAnyAncestor } from 'components/common/utils/scrollAncestors';\n\nexport interface UseFloatingPositionArgs {\n isOpen: boolean;\n /** The element the popup is anchored to. */\n triggerRef: RefObject<HTMLElement | null>;\n /** The `position: fixed` element that gets `top`/`left`/`visibility` written to it directly. */\n anchorRef: RefObject<HTMLElement | null>;\n /** The visible panel whose height decides whether there's room to render on the preferred side. */\n panelRef: RefObject<HTMLElement | null>;\n /** Class toggled on `anchorRef` when flipped to the non-preferred side. */\n flipClassName: string;\n /** Preferred side relative to the trigger (default `'bottom'`) — flips to the other side when there's no room. */\n placement?: 'top' | 'bottom';\n}\n\n/**\n * Keeps a portaled, `position: fixed` popup anchored to a trigger element: tracks the\n * trigger across scroll/resize on every real scrolling ancestor, flips above the trigger\n * when there's no room below, and hides (not closes) the popup when the trigger itself\n * scrolls behind a clipping ancestor — matching Floating UI's autoUpdate + hide middleware.\n *\n * Position/visibility are written straight to the DOM via refs, not through React state:\n * going through setState -> re-render -> commit adds a round-trip that lags behind the\n * browser's own scroll painting by at least a frame.\n */\nexport function useFloatingPosition({ isOpen, triggerRef, anchorRef, panelRef, flipClassName, placement = 'bottom' }: UseFloatingPositionArgs) {\n useLayoutEffect(() => {\n if (!isOpen) return;\n\n let rafId: number | undefined;\n let teardown: (() => void) | undefined;\n\n // The anchor/trigger may not be mounted yet on the very first invocation of this\n // effect: a portal target (e.g. BodyEnd's `#bodyEnd` div) can still be missing on\n // the initial render, in which case the portaled content — and this ref — commits\n // one render later. Since refs never change identity, that later commit doesn't\n // re-trigger this effect on its own, so retry on the next frame until it's there.\n function trySetup() {\n const trigger = triggerRef.current;\n const anchor = anchorRef.current;\n if (!trigger || !anchor) {\n rafId = requestAnimationFrame(trySetup);\n return;\n }\n const ancestors = getScrollableAncestors(trigger);\n\n function updatePos() {\n const rect = trigger!.getBoundingClientRect();\n const panelHeight = panelRef.current?.offsetHeight ?? 0;\n const spaceBelow = window.innerHeight - rect.bottom;\n const spaceAbove = rect.top;\n const preferredSpace = placement === 'top' ? spaceAbove : spaceBelow;\n const alternateSpace = placement === 'top' ? spaceBelow : spaceAbove;\n const flip = preferredSpace < panelHeight && alternateSpace > preferredSpace;\n const renderAbove = placement === 'top' ? !flip : flip;\n anchor!.classList.toggle(flipClassName, flip);\n // Shift up by the anchor's own height when rendering above, so this works whether\n // the anchor is a zero-height decorative wrapper (FloatingMenu, whose real panel\n // hangs off it via absolute-positioned CSS) or the visible panel itself\n // (Dropdown) — for the former the shift is a no-op (height 0).\n anchor!.style.top = `${renderAbove ? rect.top - anchor!.offsetHeight : rect.bottom}px`;\n anchor!.style.left = `${rect.left}px`;\n anchor!.style.visibility = isHiddenByAnyAncestor(rect, ancestors) ? 'hidden' : '';\n // The panel can mount a commit later than the anchor; once it's observed this\n // is a single Set lookup, so it costs nothing on the scroll path.\n const panel = panelRef.current;\n if (panel && !observed.has(panel)) observeSizeTargets();\n }\n\n // The panel's own height feeds both the flip decision and, when rendering above,\n // the top offset — so a popup whose content changes size while open (a filtered\n // list shrinking, an async list loading in) has to be re-measured, or it keeps a\n // top computed for its old height and ends up detached from the trigger.\n const resizeObserver = new ResizeObserver(() => updatePos());\n const observed = new Set<Element>();\n function observeSizeTargets() {\n // Both, since they're the same element for a panel-as-anchor consumer (Dropdown)\n // but not for a zero-height wrapper whose content sits inside it (FloatingMenu).\n // Called from updatePos too: the panel can mount a commit later than the anchor.\n [anchor, panelRef.current].forEach((el) => {\n if (!el || observed.has(el)) return;\n observed.add(el);\n resizeObserver.observe(el);\n });\n }\n\n updatePos();\n\n const scrollTargets: (Window | HTMLElement)[] = [window, ...ancestors];\n scrollTargets.forEach((t) => t.addEventListener('scroll', updatePos, { passive: true }));\n window.addEventListener('resize', updatePos);\n teardown = () => {\n scrollTargets.forEach((t) => t.removeEventListener('scroll', updatePos));\n window.removeEventListener('resize', updatePos);\n resizeObserver.disconnect();\n };\n }\n\n trySetup();\n\n return () => {\n if (rafId !== undefined) cancelAnimationFrame(rafId);\n teardown?.();\n };\n }, [isOpen, triggerRef, anchorRef, panelRef, flipClassName, placement]);\n}"],"mappings":"yIA2BA,SAAgB,EAAoB,CAAE,SAAQ,aAAY,YAAW,WAAU,gBAAe,YAAY,UAAqC,CAC7I,MAAsB,CACpB,GAAI,CAAC,EAAQ,OAEb,IAAI,EACA,EAOJ,SAAS,GAAW,CAClB,IAAM,EAAU,EAAW,QACrB,EAAS,EAAU,QACzB,GAAI,CAAC,GAAW,CAAC,EAAQ,CACvB,EAAQ,sBAAsB,CAAQ,EACtC,MACF,CACA,IAAM,EAAY,EAAuB,CAAO,EAEhD,SAAS,GAAY,CACnB,IAAM,EAAO,EAAS,sBAAsB,EACtC,EAAc,EAAS,SAAS,cAAgB,EAChD,EAAa,OAAO,YAAc,EAAK,OACvC,EAAa,EAAK,IAClB,EAAiB,IAAc,MAAQ,EAAa,EAEpD,EAAO,EAAiB,IADP,IAAc,MAAQ,EAAa,GACI,EACxD,EAAc,IAAc,MAAQ,CAAC,EAAO,EAClD,EAAQ,UAAU,OAAO,EAAe,CAAI,EAK5C,EAAQ,MAAM,IAAM,GAAG,EAAc,EAAK,IAAM,EAAQ,aAAe,EAAK,OAAO,IACnF,EAAQ,MAAM,KAAO,GAAG,EAAK,KAAK,IAClC,EAAQ,MAAM,WAAa,EAAsB,EAAM,CAAS,EAAI,SAAW,GAG/E,IAAM,EAAQ,EAAS,QACnB,GAAS,CAAC,EAAS,IAAI,CAAK,GAAG,EAAmB,CACxD,CAMA,IAAM,EAAiB,IAAI,mBAAqB,EAAU,CAAC,EACrD,EAAW,IAAI,IACrB,SAAS,GAAqB,CAI5B,CAAC,EAAQ,EAAS,OAAO,EAAE,QAAS,GAAO,CACrC,CAAC,GAAM,EAAS,IAAI,CAAE,IAC1B,EAAS,IAAI,CAAE,EACf,EAAe,QAAQ,CAAE,EAC3B,CAAC,CACH,CAEA,EAAU,EAEV,IAAM,EAA0C,CAAC,OAAQ,GAAG,CAAS,EACrE,EAAc,QAAS,GAAM,EAAE,iBAAiB,SAAU,EAAW,CAAE,QAAS,EAAK,CAAC,CAAC,EACvF,OAAO,iBAAiB,SAAU,CAAS,EAC3C,MAAiB,CACf,EAAc,QAAS,GAAM,EAAE,oBAAoB,SAAU,CAAS,CAAC,EACvE,OAAO,oBAAoB,SAAU,CAAS,EAC9C,EAAe,WAAW,CAC5B,CACF,CAIA,OAFA,EAAS,MAEI,CACP,IAAU,IAAA,IAAW,qBAAqB,CAAK,EACnD,IAAW,CACb,CACF,EAAG,CAAC,EAAQ,EAAY,EAAW,EAAU,EAAe,CAAS,CAAC,CACxE"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{useComponentDefaults as e}from"../configProvider/useComponentDefaults.mjs";import t from"../tooltip/tooltip.mjs";import n from"../animatedIcon/animatedIcon.mjs";import r from"./input.module.mjs";import{InputIconPosition as i,InputType as a}from"./input.types.mjs";import ee,{useCallback as te,useEffect as o,useId as ne,useRef as s,useState as c}from"react";import l from"classnames";import{FontAwesomeIcon as u}from"@fortawesome/react-fontawesome";import{faEnvelope as re,faEye as ie,faEyeSlash as ae,faPen as oe,faPhone as se,faSearch as ce,faXmark as d}from"@fortawesome/free-solid-svg-icons";import{jsx as f,jsxs as p}from"react/jsx-runtime";function m(m){let{name:h=``,id:le,label:g=``,errorMessage:ue=``,isValid:de=!0,className:fe=``,style:pe,value:
|
|
1
|
+
import{useComponentDefaults as e}from"../configProvider/useComponentDefaults.mjs";import t from"../tooltip/tooltip.mjs";import n from"../animatedIcon/animatedIcon.mjs";import r from"./input.module.mjs";import{InputIconPosition as i,InputType as a}from"./input.types.mjs";import ee,{useCallback as te,useEffect as o,useId as ne,useRef as s,useState as c}from"react";import l from"classnames";import{FontAwesomeIcon as u}from"@fortawesome/react-fontawesome";import{faEnvelope as re,faEye as ie,faEyeSlash as ae,faPen as oe,faPhone as se,faSearch as ce,faXmark as d}from"@fortawesome/free-solid-svg-icons";import{jsx as f,jsxs as p}from"react/jsx-runtime";function m(m){let{name:h=``,id:le,label:g=``,errorMessage:ue=``,isValid:de=!0,className:fe=``,style:pe,value:me=``,icon:he=null,iconPosition:ge,onChange:_=()=>{},onFocus:_e=null,onBlur:ve=null,onMouseEnter:ye=null,onMouseLeave:be=null,isUppercase:xe=!1,isRequired:Se=!1,tabIndex:Ce=0,type:v=void 0,isRow:we=!1,onIconClick:y=null,parse:b=null,formValidator:x=null,autoFocus:S=!1,suffix:C=null,upperRightLabel:w=null,labelInBorder:Te=!1,showCancel:Ee=!1,onClearClicked:De,min:Oe=null,max:ke=null,placeholder:T=``,useMatLabelStyle:E=!0,alwaysFloatLabel:Ae=!1,autoComplete:je=null,onClick:Me=()=>null,readOnly:D=!1,customInput:O,alwaysShowCancel:Ne=!1,multiline:k=!1,rows:A,autoResize:j=!1,classNames:M,styles:N,disabled:P=!1,...F}=e(`Input`,m),[I,Pe]=c(!1),[Fe,L]=c(!1),[R,Ie]=c(!1),[,Le]=c(0),z=s(null),B=s(x),Re=ne(),ze=le||h||Re,Be=te(()=>{let e=z.current;!e||!j||(e.style.height=`auto`,e.style.height=`${e.scrollHeight}px`)},[j]);o(()=>{Be()},[]),o(()=>{S&&z.current&&setTimeout(()=>{z.current?.focus()},1)},[S]),o(()=>{B.current=x;let e=B.current;if(!e)return;e.label=g??``,e.validate();let t=()=>Le(e=>e+1);return e.registerOnUpdateListener(t),()=>{e.removeOnUpdateListener(t)}},[x,g]);let Ve=()=>x?x.touched&&x.hasError():!de||!!ue,He=()=>!!(Se||x&&x.validators.find(e=>e.validatorId===`required`)),Ue=e=>{L(!0),ye&&ye(e)},We=e=>{L(!1),be&&be(e)},Ge=e=>{Pe(!0),_e&&_e(e)},Ke=e=>{B.current&&(B.current.touched=!0),Pe(!1),ve&&ve(e)},qe=e=>{let t,n;typeof e==`string`?n=e:(t=e,n=e.target.value),b&&(n=b(n)),x&&x.set(n),_&&_(n,t),Be()},Je=()=>{if(v!==a.Email)return v===a.Phone?`tel`:v===a.Search?`search`:v===`password`&&R?`text`:v},Ye=()=>{if(v===a.Email)return`email`;if(v===a.Phone)return`tel`;if(v===a.Search)return`search`},V=v&&v!==a.Date&&v!==a.Iban&&v!==a.HasNoIcon,Xe=v===a.Search||v===a.Password,H=!!he,Ze=H&&!Xe,Qe=v===a.Email||v===a.Phone||v===a.Search,U=(ge??(!E&&Qe?i.Left:i.Right))===i.Left,W={className:l(r.inputFieldIcon,{[r.inputFieldIconNotClickable]:!y,[r.inputFieldIconLeft]:U}),onClick:y??void 0},G=he,$e=Ze&&G?ee.cloneElement(G,{className:l(r.inputFieldIcon,{[r.inputFieldIconNotClickable]:!y&&!G.props.onClick,[r.inputFieldIconLeft]:U},G.props.className),onClick:y??G.props.onClick}):null,et=(V||H)&&U,tt={className:l(r.inputFieldIcon,r.inputFieldIconPassword,{[r.inputFieldIconLeft]:U}),onClick:()=>Ie(!R)},K=Ve(),q=g;q&&He()&&(q=`${q} *`);let nt=He()?f(`span`,{className:r.requiredMark,children:`*`}):null,J=x?x.value:me,Y=I&&!D,X=E&&(Ae||Y||J||v===a.Date),Z=v===a.Search&&!!J,Q=O?.props;function $(){x&&x.set(``),_?.(``),De?.()}return p(`div`,{className:l(r.input,{[r.inputIconLeft]:et},fe),style:pe,children:[p(`label`,{htmlFor:ze,className:l(r.inputLabel,M?.label,{[r.inputLabelColumn]:!we,[r.inputLabelInBorder]:Te}),style:N?.label,children:[g&&!E?p(`span`,{className:r.inputLabelText,children:[g,nt]}):null,w&&f(`div`,{className:l(r.inputUpperRightLabel,M?.upperRightLabel),style:N?.upperRightLabel,children:w}),p(`div`,{className:l(r.inputContainer,{[r.inputContainerMultiline]:k},M?.container),style:N?.container,onMouseEnter:Ue,onMouseLeave:We,children:[$e,ee.cloneElement(O||f(k?`textarea`:`input`,{}),{...F,className:l(r.inputField,{[r.inputFieldUppercase]:xe,[r.inputFieldDate]:v===a.Date,[r.inputFieldDefault]:v!==a.Date,[r.inputFieldWithIcon]:V||H,[r.inputFieldWithIconLeft]:et,[r.inputFieldMultiline]:k,[r.inputFieldMultilineAutoResize]:k&&j,[r.inputFieldReadOnly]:D&&!P},M?.input,Q?.className),style:Q?.style||N?.input?{...Q?.style,...N?.input}:void 0,name:h,id:ze,value:J,tabIndex:Ce,ref:O?void 0:z,onChange:qe,onFocus:Ge,onBlur:Ke,placeholder:E?``:T,autoComplete:je,onClick:Me,readOnly:D,disabled:P,...!k&&{type:Je(),inputMode:F.inputMode??Ye(),min:Oe,max:ke},...k&&A!==void 0&&{rows:A}}),C&&f(`div`,{className:l(r.inputFieldSuffix,M?.suffix),style:N?.suffix,children:C})]}),f(`fieldset`,{className:l(r.inputFieldset,M?.fieldset,{[r.inputFieldsetNoNotch]:!g,[r.inputContainerBorderFocused]:Y,[r.inputContainerBorderSearchFocused]:v===a.Search&&(Y||!!J),[r.inputContainerBorderInvalid]:K,[r.inputContainerBorderError]:K}),style:N?.fieldset,children:f(`legend`,{className:l(r.inputFieldsetLegend,{[r.inputFieldsetLegendActive]:X}),children:f(`span`,{children:q})})}),E&&g&&p(`div`,{className:l(r.inputMatLabel,{[r.inputMatLabelFloating]:X,[r.inputMatLabelMultiline]:k&&!X}),children:[g,nt]}),E&&T&&f(`div`,{className:l(r.inputPlaceholder,Y&&!J&&r.inputPlaceholderShown,k&&r.inputPlaceholderMultiline),children:T}),f(t,{variant:`error`,message:x?x.getCurrentErrorMessage():ue||``,isVisible:K&&(I||Fe)})]}),v===a.Phone&&!H&&f(u,{icon:se,...W}),v===a.Email&&!H&&f(u,{icon:re,...W}),v===a.Edit&&!H&&f(u,{icon:oe,...W}),v===a.Search&&f(n,{icon:Z?d:ce,className:l(r.inputFieldIcon,{[r.inputFieldIconNotClickable]:!Z,[r.inputFieldIconLeft]:U}),onClick:Z?$:void 0}),v===a.Password&&f(u,{icon:R?ae:ie,...tt}),(Ee&&J&&(I||Fe)||Ne)&&v!==a.Search&&f(u,{icon:d,className:r.inputFieldIcon,onClick:$,onMouseEnter:()=>L(!0),onMouseLeave:()=>L(!1)})]})}export{m as default};
|
|
2
2
|
//# sourceMappingURL=input.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"input.mjs","names":[],"sources":["../../../../package/common/input/input.tsx"],"sourcesContent":["import React, { useState, useEffect, useRef, useCallback, useId } from 'react';\nimport cx from 'classnames';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport {\n faPhone,\n faPen,\n faEnvelope,\n faSearch,\n faXmark,\n faEye as passwordHiddenIcon,\n faEyeSlash as passwordShownIcon,\n} from '@fortawesome/free-solid-svg-icons';\nimport Tooltip from 'components/common/tooltip';\nimport AnimatedIcon from 'components/common/animatedIcon';\nimport { useComponentDefaults } from 'components/common/configProvider';\nimport styles from './input.module.pcss';\nimport type { InputProps } from './input.types';\nimport { InputType, InputIconPosition } from './input.types';\n\nfunction Input(props: InputProps) {\n const {\n name = '',\n id,\n label = '',\n errorMessage = '',\n isValid = true,\n className = '',\n style,\n value = '',\n icon = null,\n iconPosition,\n onChange = () => {},\n onFocus: onFocusProp = null,\n onBlur: onBlurProp = null,\n onMouseEnter: onMouseEnterProp = null,\n onMouseLeave: onMouseLeaveProp = null,\n isUppercase = false,\n isRequired = false,\n tabIndex = 0,\n type = undefined,\n isRow = false,\n onIconClick = null,\n parse = null,\n formValidator = null,\n autoFocus = false,\n suffix = null,\n upperRightLabel = null,\n labelInBorder = false,\n showCancel = false,\n onClearClicked,\n min = null,\n max = null,\n placeholder = '',\n useMatLabelStyle = true,\n alwaysFloatLabel = false,\n autoComplete = null,\n onClick = () => null,\n readOnly = false,\n customInput,\n alwaysShowCancel = false,\n multiline = false,\n rows,\n autoResize = false,\n classNames,\n styles: slotStyles,\n disabled = false,\n ...rest\n } = useComponentDefaults('Input', props);\n const [isFocused, setIsFocused] = useState(false);\n const [isHovered, setIsHovered] = useState(false);\n const [isPasswordShown, setIsPasswordShown] = useState(false);\n const [, forceUpdate] = useState(0);\n\n const inputRef = useRef<HTMLInputElement | HTMLTextAreaElement>(null);\n const fvRef = useRef(formValidator);\n\n const generatedId = useId();\n const inputId = id || name || generatedId;\n\n const resizeTextarea = useCallback(() => {\n const el = inputRef.current;\n if (!el || !autoResize) return;\n el.style.height = 'auto';\n el.style.height = `${el.scrollHeight}px`;\n }, [autoResize]);\n\n useEffect(() => {\n resizeTextarea();\n }, []);\n\n useEffect(() => {\n if (autoFocus && inputRef.current) {\n setTimeout(() => { inputRef.current?.focus(); }, 1);\n }\n }, [autoFocus]);\n\n useEffect(() => {\n fvRef.current = formValidator;\n const fv = fvRef.current;\n if (!fv) return;\n fv.label = label ?? '';\n fv.validate();\n const listener = () => forceUpdate(n => n + 1);\n fv.registerOnUpdateListener(listener);\n return () => { fv.removeOnUpdateListener(listener); };\n }, [formValidator, label]);\n\n const hasError = (): boolean => {\n return formValidator\n ? (formValidator.touched && formValidator.hasError())\n : (!isValid || !!errorMessage);\n };\n\n const computedIsRequired = (): boolean => {\n return !!(isRequired || (formValidator && formValidator.validators.find(\n (v) => (v as { validatorId?: string }).validatorId === 'required'\n )));\n };\n\n const onMouseEnterHandler = (event: React.MouseEvent) => {\n setIsHovered(true);\n if (onMouseEnterProp) onMouseEnterProp(event);\n };\n\n const onMouseLeaveHandler = (event: React.MouseEvent) => {\n setIsHovered(false);\n if (onMouseLeaveProp) onMouseLeaveProp(event);\n };\n\n const onFocusHandler = (event: React.FocusEvent) => {\n setIsFocused(true);\n if (onFocusProp) onFocusProp(event);\n };\n\n const onBlurHandler = (event: React.FocusEvent) => {\n if (fvRef.current) fvRef.current.touched = true;\n setIsFocused(false);\n if (onBlurProp) onBlurProp(event);\n };\n\n const onChangeHandler = (event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement> | string): void => {\n let parsedEvent: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement> | undefined;\n let val: string;\n\n if (typeof event !== 'string') {\n parsedEvent = event;\n val = event.target.value;\n } else {\n val = event;\n }\n\n if (parse) val = parse(val);\n if (formValidator) formValidator.set(val);\n if (onChange) onChange(val, parsedEvent);\n resizeTextarea();\n };\n\n const getInputType = (): string | undefined => {\n if (type === InputType.Email) return undefined;\n if (type === InputType.Phone) return 'tel';\n if (type === InputType.Search) return 'search';\n if (type === 'password' && isPasswordShown) return 'text';\n return type;\n };\n\n const getInputMode = (): React.HTMLAttributes<HTMLInputElement>['inputMode'] => {\n if (type === InputType.Email) return 'email';\n if (type === InputType.Phone) return 'tel';\n if (type === InputType.Search) return 'search';\n return undefined;\n };\n\n const hasIcon =\n type &&\n type !== InputType.Date &&\n type !== InputType.Iban &&\n type !== InputType.HasNoIcon;\n\n const isFunctionalIconType = type === InputType.Search || type === InputType.Password;\n const hasCustomIcon = !!icon;\n const customIconApplies = hasCustomIcon && !isFunctionalIconType;\n\n const defaultsLeftWithoutMatLabel = type === InputType.Email || type === InputType.Phone || type === InputType.Search;\n const resolvedIconPosition = iconPosition ?? (!useMatLabelStyle && defaultsLeftWithoutMatLabel ? InputIconPosition.Left : InputIconPosition.Right);\n const iconIsLeft = resolvedIconPosition === InputIconPosition.Left;\n\n const iconProps = {\n className: cx(styles.inputFieldIcon, {\n [styles.inputFieldIconNotClickable]: !onIconClick,\n [styles.inputFieldIconLeft]: iconIsLeft,\n }),\n onClick: onIconClick ?? undefined,\n };\n\n const customIcon = icon as React.ReactElement<{ className?: string; onClick?: React.MouseEventHandler }> | null;\n const renderedIcon = customIconApplies && customIcon\n ? React.cloneElement(customIcon, {\n className: cx(\n styles.inputFieldIcon,\n {\n [styles.inputFieldIconNotClickable]: !onIconClick && !customIcon.props.onClick,\n [styles.inputFieldIconLeft]: iconIsLeft,\n },\n customIcon.props.className,\n ),\n onClick: onIconClick ?? customIcon.props.onClick,\n })\n : null;\n\n const hasLeftIcon = (hasIcon || hasCustomIcon) && iconIsLeft;\n\n const passwordIconProps = {\n className: cx(styles.inputFieldIcon, styles.inputFieldIconPassword, { [styles.inputFieldIconLeft]: iconIsLeft }),\n onClick: () => setIsPasswordShown(!isPasswordShown),\n };\n\n const hasErr = hasError();\n\n let editedLabel = label;\n if (editedLabel && computedIsRequired()) editedLabel = `${editedLabel} *`;\n const requiredMark = computedIsRequired() ? <span className={styles.requiredMark}>*</span> : null;\n\n const currVal = formValidator ? formValidator.value : value;\n const showFocus = isFocused && !readOnly;\n const shouldFloatLabel = useMatLabelStyle && (alwaysFloatLabel || showFocus || currVal || type === InputType.Date);\n\n const isSearchCleared = type === InputType.Search && !!currVal;\n\n function handleClear() {\n if (formValidator) formValidator.set('');\n onChange?.('');\n onClearClicked?.();\n }\n\n return (\n <div className={cx(styles.input, { [styles.inputIconLeft]: hasLeftIcon }, className)} style={style}>\n <label\n htmlFor={inputId}\n className={cx(styles.inputLabel, classNames?.label, {\n [styles.inputLabelColumn]: !isRow,\n [styles.inputLabelInBorder]: labelInBorder,\n })}\n style={slotStyles?.label}\n >\n {label && !useMatLabelStyle ? (\n <span className={styles.inputLabelText}>\n {label}\n {requiredMark}\n </span>\n ) : null}\n {upperRightLabel && (\n <div className={cx(styles.inputUpperRightLabel, classNames?.upperRightLabel)} style={slotStyles?.upperRightLabel}>\n {upperRightLabel}\n </div>\n )}\n <div\n className={cx(styles.inputContainer, { [styles.inputContainerMultiline]: multiline }, classNames?.container)}\n style={slotStyles?.container}\n onMouseEnter={onMouseEnterHandler}\n onMouseLeave={onMouseLeaveHandler}\n >\n {renderedIcon}\n {React.cloneElement(customInput || (multiline ? <textarea /> : <input />), {\n ...rest,\n className: cx(\n styles.inputField,\n {\n [styles.inputFieldUppercase]: isUppercase,\n [styles.inputFieldDate]: type === InputType.Date,\n [styles.inputFieldDefault]: type !== InputType.Date,\n [styles.inputFieldWithIcon]: hasIcon || hasCustomIcon,\n [styles.inputFieldWithIconLeft]: hasLeftIcon,\n [styles.inputFieldMultiline]: multiline,\n [styles.inputFieldMultilineAutoResize]: multiline && autoResize,\n [styles.inputFieldReadOnly]: readOnly && !disabled,\n },\n classNames?.input\n ),\n name,\n id: inputId,\n value: formValidator ? formValidator.value : value,\n tabIndex,\n ref: customInput ? undefined : inputRef,\n onChange: onChangeHandler,\n onFocus: onFocusHandler,\n onBlur: onBlurHandler,\n placeholder: !useMatLabelStyle ? placeholder : '',\n autoComplete,\n onClick,\n readOnly,\n disabled,\n ...(!multiline && { type: getInputType(), inputMode: rest.inputMode ?? getInputMode(), min, max }),\n ...(multiline && rows !== undefined && { rows }),\n })}\n {suffix && <div className={cx(styles.inputFieldSuffix, classNames?.suffix)} style={slotStyles?.suffix}>{suffix}</div>}\n </div>\n <fieldset\n className={cx(styles.inputFieldset, classNames?.fieldset, {\n [styles.inputFieldsetNoNotch]: !label,\n [styles.inputContainerBorderFocused]: showFocus,\n [styles.inputContainerBorderSearchFocused]:\n type === InputType.Search && (showFocus || value),\n [styles.inputContainerBorderInvalid]: hasErr,\n [styles.inputContainerBorderError]: hasErr,\n })}\n style={slotStyles?.fieldset}\n >\n <legend\n className={cx(styles.inputFieldsetLegend, {\n [styles.inputFieldsetLegendActive]: shouldFloatLabel,\n })}\n >\n <span>{editedLabel}</span>\n </legend>\n </fieldset>\n {useMatLabelStyle && label && (\n <div\n className={cx(styles.inputMatLabel, {\n [styles.inputMatLabelFloating]: shouldFloatLabel,\n [styles.inputMatLabelMultiline]: multiline && !shouldFloatLabel,\n })}\n >\n {label}\n {requiredMark}\n </div>\n )}\n {useMatLabelStyle && placeholder && (\n <div\n className={cx(\n styles.inputPlaceholder,\n showFocus && !currVal && styles.inputPlaceholderShown,\n multiline && styles.inputPlaceholderMultiline,\n )}\n >\n {placeholder}\n </div>\n )}\n <Tooltip\n variant=\"error\"\n message={formValidator ? formValidator.getCurrentErrorMessage() : (errorMessage || '')}\n isVisible={hasErr && (isFocused || isHovered)}\n />\n </label>\n\n {type === InputType.Phone && !hasCustomIcon && <FontAwesomeIcon icon={faPhone} {...iconProps} />}\n {type === InputType.Email && !hasCustomIcon && <FontAwesomeIcon icon={faEnvelope} {...iconProps} />}\n {type === InputType.Edit && !hasCustomIcon && <FontAwesomeIcon icon={faPen} {...iconProps} />}\n {type === InputType.Search && (\n <AnimatedIcon\n icon={isSearchCleared ? faXmark : faSearch}\n className={cx(styles.inputFieldIcon, {\n [styles.inputFieldIconNotClickable]: !isSearchCleared,\n [styles.inputFieldIconLeft]: iconIsLeft,\n })}\n onClick={isSearchCleared ? handleClear : undefined}\n />\n )}\n {type === InputType.Password && (\n <FontAwesomeIcon\n icon={isPasswordShown ? passwordShownIcon : passwordHiddenIcon}\n {...passwordIconProps}\n />\n )}\n\n {((showCancel && value && (isFocused || isHovered)) || alwaysShowCancel) && type !== InputType.Search && (\n <FontAwesomeIcon\n icon={faXmark}\n className={styles.inputFieldIcon}\n onClick={handleClear}\n onMouseEnter={() => setIsHovered(true)}\n onMouseLeave={() => setIsHovered(false)}\n />\n )}\n </div>\n );\n}\n\nexport default Input;\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"input.mjs","names":[],"sources":["../../../../package/common/input/input.tsx"],"sourcesContent":["import React, { useState, useEffect, useRef, useCallback, useId } from 'react';\nimport cx from 'classnames';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport {\n faPhone,\n faPen,\n faEnvelope,\n faSearch,\n faXmark,\n faEye as passwordHiddenIcon,\n faEyeSlash as passwordShownIcon,\n} from '@fortawesome/free-solid-svg-icons';\nimport Tooltip from 'components/common/tooltip';\nimport AnimatedIcon from 'components/common/animatedIcon';\nimport { useComponentDefaults } from 'components/common/configProvider';\nimport styles from './input.module.pcss';\nimport type { InputProps } from './input.types';\nimport { InputType, InputIconPosition } from './input.types';\n\nfunction Input(props: InputProps) {\n const {\n name = '',\n id,\n label = '',\n errorMessage = '',\n isValid = true,\n className = '',\n style,\n value = '',\n icon = null,\n iconPosition,\n onChange = () => {},\n onFocus: onFocusProp = null,\n onBlur: onBlurProp = null,\n onMouseEnter: onMouseEnterProp = null,\n onMouseLeave: onMouseLeaveProp = null,\n isUppercase = false,\n isRequired = false,\n tabIndex = 0,\n type = undefined,\n isRow = false,\n onIconClick = null,\n parse = null,\n formValidator = null,\n autoFocus = false,\n suffix = null,\n upperRightLabel = null,\n labelInBorder = false,\n showCancel = false,\n onClearClicked,\n min = null,\n max = null,\n placeholder = '',\n useMatLabelStyle = true,\n alwaysFloatLabel = false,\n autoComplete = null,\n onClick = () => null,\n readOnly = false,\n customInput,\n alwaysShowCancel = false,\n multiline = false,\n rows,\n autoResize = false,\n classNames,\n styles: slotStyles,\n disabled = false,\n ...rest\n } = useComponentDefaults('Input', props);\n const [isFocused, setIsFocused] = useState(false);\n const [isHovered, setIsHovered] = useState(false);\n const [isPasswordShown, setIsPasswordShown] = useState(false);\n const [, forceUpdate] = useState(0);\n\n const inputRef = useRef<HTMLInputElement | HTMLTextAreaElement>(null);\n const fvRef = useRef(formValidator);\n\n const generatedId = useId();\n const inputId = id || name || generatedId;\n\n const resizeTextarea = useCallback(() => {\n const el = inputRef.current;\n if (!el || !autoResize) return;\n el.style.height = 'auto';\n el.style.height = `${el.scrollHeight}px`;\n }, [autoResize]);\n\n useEffect(() => {\n resizeTextarea();\n }, []);\n\n useEffect(() => {\n if (autoFocus && inputRef.current) {\n setTimeout(() => { inputRef.current?.focus(); }, 1);\n }\n }, [autoFocus]);\n\n useEffect(() => {\n fvRef.current = formValidator;\n const fv = fvRef.current;\n if (!fv) return;\n fv.label = label ?? '';\n fv.validate();\n const listener = () => forceUpdate(n => n + 1);\n fv.registerOnUpdateListener(listener);\n return () => { fv.removeOnUpdateListener(listener); };\n }, [formValidator, label]);\n\n const hasError = (): boolean => {\n return formValidator\n ? (formValidator.touched && formValidator.hasError())\n : (!isValid || !!errorMessage);\n };\n\n const computedIsRequired = (): boolean => {\n return !!(isRequired || (formValidator && formValidator.validators.find(\n (v) => (v as { validatorId?: string }).validatorId === 'required'\n )));\n };\n\n const onMouseEnterHandler = (event: React.MouseEvent) => {\n setIsHovered(true);\n if (onMouseEnterProp) onMouseEnterProp(event);\n };\n\n const onMouseLeaveHandler = (event: React.MouseEvent) => {\n setIsHovered(false);\n if (onMouseLeaveProp) onMouseLeaveProp(event);\n };\n\n const onFocusHandler = (event: React.FocusEvent) => {\n setIsFocused(true);\n if (onFocusProp) onFocusProp(event);\n };\n\n const onBlurHandler = (event: React.FocusEvent) => {\n if (fvRef.current) fvRef.current.touched = true;\n setIsFocused(false);\n if (onBlurProp) onBlurProp(event);\n };\n\n const onChangeHandler = (event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement> | string): void => {\n let parsedEvent: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement> | undefined;\n let val: string;\n\n if (typeof event !== 'string') {\n parsedEvent = event;\n val = event.target.value;\n } else {\n val = event;\n }\n\n if (parse) val = parse(val);\n if (formValidator) formValidator.set(val);\n if (onChange) onChange(val, parsedEvent);\n resizeTextarea();\n };\n\n const getInputType = (): string | undefined => {\n if (type === InputType.Email) return undefined;\n if (type === InputType.Phone) return 'tel';\n if (type === InputType.Search) return 'search';\n if (type === 'password' && isPasswordShown) return 'text';\n return type;\n };\n\n const getInputMode = (): React.HTMLAttributes<HTMLInputElement>['inputMode'] => {\n if (type === InputType.Email) return 'email';\n if (type === InputType.Phone) return 'tel';\n if (type === InputType.Search) return 'search';\n return undefined;\n };\n\n const hasIcon =\n type &&\n type !== InputType.Date &&\n type !== InputType.Iban &&\n type !== InputType.HasNoIcon;\n\n const isFunctionalIconType = type === InputType.Search || type === InputType.Password;\n const hasCustomIcon = !!icon;\n const customIconApplies = hasCustomIcon && !isFunctionalIconType;\n\n const defaultsLeftWithoutMatLabel = type === InputType.Email || type === InputType.Phone || type === InputType.Search;\n const resolvedIconPosition = iconPosition ?? (!useMatLabelStyle && defaultsLeftWithoutMatLabel ? InputIconPosition.Left : InputIconPosition.Right);\n const iconIsLeft = resolvedIconPosition === InputIconPosition.Left;\n\n const iconProps = {\n className: cx(styles.inputFieldIcon, {\n [styles.inputFieldIconNotClickable]: !onIconClick,\n [styles.inputFieldIconLeft]: iconIsLeft,\n }),\n onClick: onIconClick ?? undefined,\n };\n\n const customIcon = icon as React.ReactElement<{ className?: string; onClick?: React.MouseEventHandler }> | null;\n const renderedIcon = customIconApplies && customIcon\n ? React.cloneElement(customIcon, {\n className: cx(\n styles.inputFieldIcon,\n {\n [styles.inputFieldIconNotClickable]: !onIconClick && !customIcon.props.onClick,\n [styles.inputFieldIconLeft]: iconIsLeft,\n },\n customIcon.props.className,\n ),\n onClick: onIconClick ?? customIcon.props.onClick,\n })\n : null;\n\n const hasLeftIcon = (hasIcon || hasCustomIcon) && iconIsLeft;\n\n const passwordIconProps = {\n className: cx(styles.inputFieldIcon, styles.inputFieldIconPassword, { [styles.inputFieldIconLeft]: iconIsLeft }),\n onClick: () => setIsPasswordShown(!isPasswordShown),\n };\n\n const hasErr = hasError();\n\n let editedLabel = label;\n if (editedLabel && computedIsRequired()) editedLabel = `${editedLabel} *`;\n const requiredMark = computedIsRequired() ? <span className={styles.requiredMark}>*</span> : null;\n\n const currVal = formValidator ? formValidator.value : value;\n const showFocus = isFocused && !readOnly;\n const shouldFloatLabel = useMatLabelStyle && (alwaysFloatLabel || showFocus || currVal || type === InputType.Date);\n\n const isSearchCleared = type === InputType.Search && !!currVal;\n\n const customInputProps = customInput?.props as\n | { className?: string; style?: React.CSSProperties }\n | undefined;\n\n function handleClear() {\n if (formValidator) formValidator.set('');\n onChange?.('');\n onClearClicked?.();\n }\n\n return (\n <div className={cx(styles.input, { [styles.inputIconLeft]: hasLeftIcon }, className)} style={style}>\n <label\n htmlFor={inputId}\n className={cx(styles.inputLabel, classNames?.label, {\n [styles.inputLabelColumn]: !isRow,\n [styles.inputLabelInBorder]: labelInBorder,\n })}\n style={slotStyles?.label}\n >\n {label && !useMatLabelStyle ? (\n <span className={styles.inputLabelText}>\n {label}\n {requiredMark}\n </span>\n ) : null}\n {upperRightLabel && (\n <div className={cx(styles.inputUpperRightLabel, classNames?.upperRightLabel)} style={slotStyles?.upperRightLabel}>\n {upperRightLabel}\n </div>\n )}\n <div\n className={cx(styles.inputContainer, { [styles.inputContainerMultiline]: multiline }, classNames?.container)}\n style={slotStyles?.container}\n onMouseEnter={onMouseEnterHandler}\n onMouseLeave={onMouseLeaveHandler}\n >\n {renderedIcon}\n {React.cloneElement(customInput || (multiline ? <textarea /> : <input />), {\n ...rest,\n className: cx(\n styles.inputField,\n {\n [styles.inputFieldUppercase]: isUppercase,\n [styles.inputFieldDate]: type === InputType.Date,\n [styles.inputFieldDefault]: type !== InputType.Date,\n [styles.inputFieldWithIcon]: hasIcon || hasCustomIcon,\n [styles.inputFieldWithIconLeft]: hasLeftIcon,\n [styles.inputFieldMultiline]: multiline,\n [styles.inputFieldMultilineAutoResize]: multiline && autoResize,\n [styles.inputFieldReadOnly]: readOnly && !disabled,\n },\n classNames?.input,\n customInputProps?.className,\n ),\n style: customInputProps?.style || slotStyles?.input\n ? { ...customInputProps?.style, ...slotStyles?.input }\n : undefined,\n name,\n id: inputId,\n value: currVal,\n tabIndex,\n ref: customInput ? undefined : inputRef,\n onChange: onChangeHandler,\n onFocus: onFocusHandler,\n onBlur: onBlurHandler,\n placeholder: !useMatLabelStyle ? placeholder : '',\n autoComplete,\n onClick,\n readOnly,\n disabled,\n ...(!multiline && { type: getInputType(), inputMode: rest.inputMode ?? getInputMode(), min, max }),\n ...(multiline && rows !== undefined && { rows }),\n })}\n {suffix && <div className={cx(styles.inputFieldSuffix, classNames?.suffix)} style={slotStyles?.suffix}>{suffix}</div>}\n </div>\n <fieldset\n className={cx(styles.inputFieldset, classNames?.fieldset, {\n [styles.inputFieldsetNoNotch]: !label,\n [styles.inputContainerBorderFocused]: showFocus,\n [styles.inputContainerBorderSearchFocused]:\n type === InputType.Search && (showFocus || !!currVal),\n [styles.inputContainerBorderInvalid]: hasErr,\n [styles.inputContainerBorderError]: hasErr,\n })}\n style={slotStyles?.fieldset}\n >\n <legend\n className={cx(styles.inputFieldsetLegend, {\n [styles.inputFieldsetLegendActive]: shouldFloatLabel,\n })}\n >\n <span>{editedLabel}</span>\n </legend>\n </fieldset>\n {useMatLabelStyle && label && (\n <div\n className={cx(styles.inputMatLabel, {\n [styles.inputMatLabelFloating]: shouldFloatLabel,\n [styles.inputMatLabelMultiline]: multiline && !shouldFloatLabel,\n })}\n >\n {label}\n {requiredMark}\n </div>\n )}\n {useMatLabelStyle && placeholder && (\n <div\n className={cx(\n styles.inputPlaceholder,\n showFocus && !currVal && styles.inputPlaceholderShown,\n multiline && styles.inputPlaceholderMultiline,\n )}\n >\n {placeholder}\n </div>\n )}\n <Tooltip\n variant=\"error\"\n message={formValidator ? formValidator.getCurrentErrorMessage() : (errorMessage || '')}\n isVisible={hasErr && (isFocused || isHovered)}\n />\n </label>\n\n {type === InputType.Phone && !hasCustomIcon && <FontAwesomeIcon icon={faPhone} {...iconProps} />}\n {type === InputType.Email && !hasCustomIcon && <FontAwesomeIcon icon={faEnvelope} {...iconProps} />}\n {type === InputType.Edit && !hasCustomIcon && <FontAwesomeIcon icon={faPen} {...iconProps} />}\n {type === InputType.Search && (\n <AnimatedIcon\n icon={isSearchCleared ? faXmark : faSearch}\n className={cx(styles.inputFieldIcon, {\n [styles.inputFieldIconNotClickable]: !isSearchCleared,\n [styles.inputFieldIconLeft]: iconIsLeft,\n })}\n onClick={isSearchCleared ? handleClear : undefined}\n />\n )}\n {type === InputType.Password && (\n <FontAwesomeIcon\n icon={isPasswordShown ? passwordShownIcon : passwordHiddenIcon}\n {...passwordIconProps}\n />\n )}\n\n {((showCancel && currVal && (isFocused || isHovered)) || alwaysShowCancel) && type !== InputType.Search && (\n <FontAwesomeIcon\n icon={faXmark}\n className={styles.inputFieldIcon}\n onClick={handleClear}\n onMouseEnter={() => setIsHovered(true)}\n onMouseLeave={() => setIsHovered(false)}\n />\n )}\n </div>\n );\n}\n\nexport default Input;\n"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{useComponentDefaults as e}from"../configProvider/useComponentDefaults.mjs";import t from"../interactableDiv/index.mjs";import n from"../input/input.mjs";import r from"./numberInput.module.mjs";import"react";import i from"classnames";import{FontAwesomeIcon as a}from"@fortawesome/react-fontawesome";import{faChevronDown as o,faChevronUp as s}from"@fortawesome/free-solid-svg-icons";import{jsx as c,jsxs as l}from"react/jsx-runtime";import{NumericFormat as u}from"react-number-format";function d(d){let{value:f,onChange:p,formValidator:m,label:h,error:g,className:_,allowNegative:
|
|
1
|
+
import{useComponentDefaults as e}from"../configProvider/useComponentDefaults.mjs";import t from"../interactableDiv/index.mjs";import n from"../input/input.mjs";import r from"./numberInput.module.mjs";import"react";import i from"classnames";import{FontAwesomeIcon as a}from"@fortawesome/react-fontawesome";import{faChevronDown as o,faChevronUp as s}from"@fortawesome/free-solid-svg-icons";import{jsx as c,jsxs as l}from"react/jsx-runtime";import{NumericFormat as u}from"react-number-format";function d(d){let{value:f,onChange:p,formValidator:m,label:h,error:g,className:_,style:v,allowNegative:y=!1,decimalSeparator:b,thousandSeparator:x,prefix:S,suffix:C,decimalScale:w,fixedDecimalScale:T=!0,placeholder:E,sign:D,showArrows:O=!1,step:k=1,readOnly:A=!1,onKeyDown:j,...M}=e(`NumberInput`,d),N=m==null?f:m.value,P=D!=null&&N!=null?Math.abs(Number(N)):N,F=P==null?``:String(P);function I(e){let t=e;t!==void 0&&(D===`-`&&(t=-Math.abs(t)),D===`+`&&(t=Math.abs(t))),m?.set(t??null),p?.(t)}function L(e){if(A)return;let t=(N!=null&&N!==``?Number(N):0)+e;!y&&D!==`-`&&(t=Math.max(0,t)),D===`-`&&(t=Math.min(0,t)),I(t)}function R(e){if(A){j?.(e);return}if(e.key===`ArrowUp`){e.preventDefault(),L(e.shiftKey?k*10:k);return}if(e.key===`ArrowDown`){e.preventDefault(),L(e.shiftKey?-k*10:-k);return}j?.(e)}let z=D===`-`?`-`:D===`+`?`+`:S,B=O&&!A?l(`div`,{className:r.arrows,children:[c(t,{className:r.arrowBtn,tabIndex:-1,onMouseDown:e=>{e.preventDefault(),L(e.shiftKey?k*10:k)},children:c(a,{icon:s})}),c(t,{className:r.arrowBtn,tabIndex:-1,onMouseDown:e=>{e.preventDefault(),L(e.shiftKey?-k*10:-k)},children:c(a,{icon:o})})]}):null;return c(n,{label:h,className:i(r.numberInput,_),style:v,value:F,onChange:()=>{},formValidator:null,isValid:m?m.touched?!m.hasError():!0:!g,errorMessage:m?m.getCurrentErrorMessage()??``:g??``,placeholder:E,readOnly:A,suffix:B,inputMode:w===0?`numeric`:`decimal`,customInput:c(u,{onValueChange:e=>I(e.floatValue),allowNegative:D==null?y:!1,decimalSeparator:b,thousandSeparator:x,decimalScale:w,fixedDecimalScale:T,prefix:z,suffix:C,onKeyDown:O?R:j,...M})})}export{d as default};
|
|
2
2
|
//# sourceMappingURL=numberInput.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"numberInput.mjs","names":[],"sources":["../../../../package/common/numberInput/numberInput.tsx"],"sourcesContent":["import type { ReactElement } from 'react';\nimport React from 'react';\nimport cx from 'classnames';\nimport { NumericFormat, NumericFormatProps } from 'react-number-format';\nimport type { FormValidator } from 'services/formValidation';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { faChevronUp, faChevronDown } from '@fortawesome/free-solid-svg-icons';\n\nimport styles from './numberInput.module.pcss';\nimport Input from '../input';\nimport InteractableDiv from '../interactableDiv';\nimport { useComponentDefaults } from '../configProvider';\n\nexport interface NumberInputProps\n extends Omit<NumericFormatProps, 'onValueChange' | 'value' | 'customInput' | 'onChange' | 'step' | 'onKeyDown'> {\n value?: number | string;\n onChange?: (value: number | undefined) => void;\n formValidator?: FormValidator | null;\n label?: string;\n error?: string;\n className?: string;\n allowNegative?: boolean;\n decimalSeparator?: string;\n thousandSeparator?: string | boolean;\n prefix?: string;\n suffix?: string;\n decimalScale?: number;\n /**\n * Whether to pad the value to exactly `decimalScale` decimals. Default `true`\n * (e.g. with `decimalScale={2}`, `12` displays as `12.00`). Set `false` to make\n * `decimalScale` an upper limit only — the user may type fewer decimals and they\n * are kept as-is (`12` stays `12`, `12.1` stays `12.1`), while anything beyond\n * `decimalScale` is still truncated.\n */\n fixedDecimalScale?: boolean;\n placeholder?: string;\n sign?: '+' | '-';\n showArrows?: boolean;\n step?: number;\n readOnly?: boolean;\n onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;\n}\n\nfunction NumberInput(props: NumberInputProps): ReactElement {\n const {\n value,\n onChange,\n formValidator,\n label,\n error,\n className,\n allowNegative = false,\n decimalSeparator,\n thousandSeparator,\n prefix,\n suffix,\n decimalScale,\n fixedDecimalScale = true,\n placeholder,\n sign,\n showArrows = false,\n step = 1,\n readOnly = false,\n onKeyDown: onKeyDownProp,\n ...rest\n } = useComponentDefaults('NumberInput', props);\n const rawValue = formValidator != null ? formValidator.value as number | string : value;\n // When a sign is forced, display the absolute value — the prefix character carries the sign visually.\n const displayValue = sign != null && rawValue != null ? Math.abs(Number(rawValue)) : rawValue;\n const controlledValue = displayValue != null ? String(displayValue) : '';\n\n function handleValueChange(floatValue: number | undefined) {\n let out = floatValue;\n if (out !== undefined) {\n if (sign === '-') out = -Math.abs(out);\n if (sign === '+') out = Math.abs(out);\n }\n if (formValidator != null) formValidator.set(out ?? null);\n onChange?.(out);\n }\n\n function handleStep(delta: number) {\n if (readOnly) return;\n const current = rawValue != null && rawValue !== '' ? Number(rawValue) : 0;\n let next = current + delta;\n if (!allowNegative && sign !== '-') next = Math.max(0, next);\n if (sign === '-') next = Math.min(0, next);\n handleValueChange(next);\n }\n\n function handleKeyDown(e: React.KeyboardEvent<HTMLInputElement>) {\n if (readOnly) { onKeyDownProp?.(e); return; }\n if (e.key === 'ArrowUp') {\n e.preventDefault();\n handleStep(e.shiftKey ? step * 10 : step);\n return;\n }\n if (e.key === 'ArrowDown') {\n e.preventDefault();\n handleStep(e.shiftKey ? -step * 10 : -step);\n return;\n }\n onKeyDownProp?.(e);\n }\n\n const resolvedPrefix = sign === '-' ? '-' : sign === '+' ? '+' : prefix;\n\n const arrowSuffix = showArrows && !readOnly ? (\n <div className={styles.arrows}>\n <InteractableDiv\n className={styles.arrowBtn}\n tabIndex={-1}\n onMouseDown={(e) => { e.preventDefault(); handleStep(e.shiftKey ? step * 10 : step); }}\n >\n <FontAwesomeIcon icon={faChevronUp} />\n </InteractableDiv>\n <InteractableDiv\n className={styles.arrowBtn}\n tabIndex={-1}\n onMouseDown={(e) => { e.preventDefault(); handleStep(e.shiftKey ? -step * 10 : -step); }}\n >\n <FontAwesomeIcon icon={faChevronDown} />\n </InteractableDiv>\n </div>\n ) : null;\n\n return (\n <Input\n label={label}\n className={cx(styles.numberInput, className)}\n value={controlledValue}\n onChange={() => {}}\n formValidator={null}\n isValid={formValidator ? (formValidator.touched ? !formValidator.hasError() : true) : !error}\n errorMessage={formValidator ? (formValidator.getCurrentErrorMessage() ?? '') : (error ?? '')}\n placeholder={placeholder}\n readOnly={readOnly}\n suffix={arrowSuffix}\n inputMode={decimalScale === 0 ? 'numeric' : 'decimal'}\n customInput={\n <NumericFormat\n onValueChange={(vals) => handleValueChange(vals.floatValue)}\n allowNegative={sign != null ? false : allowNegative}\n decimalSeparator={decimalSeparator}\n thousandSeparator={thousandSeparator}\n decimalScale={decimalScale}\n fixedDecimalScale={fixedDecimalScale}\n prefix={resolvedPrefix}\n suffix={suffix}\n onKeyDown={showArrows ? handleKeyDown : onKeyDownProp}\n {...rest}\n />\n }\n />\n );\n}\n\nexport default NumberInput;\n"],"mappings":"0eA2CA,SAAS,EAAY,EAAuC,CAC1D,GAAM,CACN,QACA,WACA,gBACA,QACA,QACA,YACA,gBAAgB,GAChB,mBACA,oBACA,SACA,SACA,eACA,oBAAoB,GACpB,cACA,OACA,aAAa,GACb,OAAO,EACP,WAAW,GACX,UAAW,EACX,GAAG,GACC,EAAqB,cAAe,CAAK,EACvC,EAAW,GAAiB,KAAgD,EAAzC,EAAc,MAEjD,EAAe,GAAQ,MAAQ,GAAY,KAAO,KAAK,IAAI,OAAO,CAAQ,CAAC,EAAI,EAC/E,EAAkB,GAAgB,KAA8B,GAAvB,OAAO,CAAY,EAElE,SAAS,EAAkB,EAAgC,CACzD,IAAI,EAAM,EACN,IAAQ,IAAA,KACN,IAAS,MAAK,EAAM,CAAC,KAAK,IAAI,CAAG,GACjC,IAAS,MAAK,EAAO,KAAK,IAAI,CAAG,IAEnC,GAAqC,IAAI,GAAO,IAAI,EACxD,IAAW,CAAG,CAChB,CAEA,SAAS,EAAW,EAAe,CACjC,GAAI,EAAU,OAEd,IAAI,GADY,GAAY,MAAQ,IAAa,GAAK,OAAO,CAAQ,EAAI,GACpD,EACjB,CAAC,GAAiB,IAAS,MAAK,EAAO,KAAK,IAAI,EAAG,CAAI,GACvD,IAAS,MAAK,EAAO,KAAK,IAAI,EAAG,CAAI,GACzC,EAAkB,CAAI,CACxB,CAEA,SAAS,EAAc,EAA0C,CAC/D,GAAI,EAAU,CAAE,IAAgB,CAAC,EAAG,MAAQ,CAC5C,GAAI,EAAE,MAAQ,UAAW,CACvB,EAAE,eAAe,EACjB,EAAW,EAAE,SAAW,EAAO,GAAK,CAAI,EACxC,MACF,CACA,GAAI,EAAE,MAAQ,YAAa,CACzB,EAAE,eAAe,EACjB,EAAW,EAAE,SAAW,CAAC,EAAO,GAAK,CAAC,CAAI,EAC1C,MACF,CACA,IAAgB,CAAC,CACnB,CAEA,IAAM,EAAiB,IAAS,IAAM,IAAM,IAAS,IAAM,IAAM,EAE3D,EAAc,GAAc,CAAC,EACjC,EAAC,MAAD,CAAK,UAAW,EAAO,gBAAvB,CACE,EAAC,EAAD,CACE,UAAW,EAAO,SAClB,SAAU,GACV,YAAc,GAAM,CAAE,EAAE,eAAe,EAAG,EAAW,EAAE,SAAW,EAAO,GAAK,CAAI,CAAG,WAErF,EAAC,EAAD,CAAiB,KAAM,CAAc,CAAA,CACtB,CAAA,EACjB,EAAC,EAAD,CACE,UAAW,EAAO,SAClB,SAAU,GACV,YAAc,GAAM,CAAE,EAAE,eAAe,EAAG,EAAW,EAAE,SAAW,CAAC,EAAO,GAAK,CAAC,CAAI,CAAG,WAEvF,EAAC,EAAD,CAAiB,KAAM,CAAgB,CAAA,CACxB,CAAA,CACd,IACH,KAEJ,OACE,EAAC,EAAD,CACS,QACP,UAAW,EAAG,EAAO,YAAa,CAAS,
|
|
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 style,\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 style={style}\n value={controlledValue}\n onChange={() => {}}\n formValidator={null}\n isValid={formValidator ? (formValidator.touched ? !formValidator.hasError() : true) : !error}\n errorMessage={formValidator ? (formValidator.getCurrentErrorMessage() ?? '') : (error ?? '')}\n placeholder={placeholder}\n readOnly={readOnly}\n suffix={arrowSuffix}\n inputMode={decimalScale === 0 ? 'numeric' : 'decimal'}\n customInput={\n <NumericFormat\n onValueChange={(vals) => handleValueChange(vals.floatValue)}\n allowNegative={sign != null ? false : allowNegative}\n decimalSeparator={decimalSeparator}\n thousandSeparator={thousandSeparator}\n decimalScale={decimalScale}\n fixedDecimalScale={fixedDecimalScale}\n prefix={resolvedPrefix}\n suffix={suffix}\n onKeyDown={showArrows ? handleKeyDown : onKeyDownProp}\n {...rest}\n />\n }\n />\n );\n}\n\nexport default NumberInput;\n"],"mappings":"0eA2CA,SAAS,EAAY,EAAuC,CAC1D,GAAM,CACN,QACA,WACA,gBACA,QACA,QACA,YACA,QACA,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,EACpC,QACP,MAAO,EACP,aAAgB,CAAC,EACjB,cAAe,KACf,QAAS,EAAiB,EAAc,QAAU,CAAC,EAAc,SAAS,EAAI,GAAQ,CAAC,EACvF,aAAc,EAAiB,EAAc,uBAAuB,GAAK,GAAO,GAAS,GAC5E,cACH,WACV,OAAQ,EACR,UAAW,IAAiB,EAAI,UAAY,UAC5C,YACE,EAAC,EAAD,CACE,cAAgB,GAAS,EAAkB,EAAK,UAAU,EAC1D,cAAe,GAAQ,KAAe,EAAR,GACZ,mBACC,oBACL,eACK,oBACnB,OAAQ,EACA,SACR,UAAW,EAAa,EAAgB,EACxC,GAAI,CACL,CAAA,CAEJ,CAAA,CAEL"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{useComponentDefaults as e}from"../configProvider/useComponentDefaults.mjs";import t from"./revealLens.module.mjs";import{useRef as n}from"react";import r from"classnames";import{jsx as i,jsxs as a}from"react/jsx-runtime";function o(e,t,n,r){let i=Math.max(n-r,0);return`radial-gradient(circle ${n}px at ${e}px ${t}px, transparent ${i}px, transparent ${i}px, white ${n}px)`}function s(e,t){e.style.setProperty(`mask-image`,t),e.style.setProperty(`-webkit-mask-image`,t)}function c(e){e.style.removeProperty(`mask-image`),e.style.removeProperty(`-webkit-mask-image`)}function l(l){let{background:u,overlay:d,radius:f=120,feather:p=24,shape:m=`circle`,maskImage:h,disabled:g=!1,className:_,style:v,classNames:y,styles:b,...x}=e(`RevealLens`,l),S=n(null),C=n(null),w=(e,n)=>{let r=S.current,i=C.current;if(!r||!i)return;let a=r.getBoundingClientRect(),c=e-a.left,l=n-a.top;i.classList.remove(t.revealLensOverlayTransitioning),s(i,h??o(c,l,f,p))},T=()=>{let e=C.current;e&&(e.classList.add(t.revealLensOverlayTransitioning),c(e))},E=e=>{g||(e.currentTarget.setPointerCapture?.(e.pointerId),w(e.clientX,e.clientY))},D=e=>{g||w(e.clientX,e.clientY)},O=e=>{g||e.pointerType===`mouse`||T()},k=e=>{if(g)return;let t=S.current;if(t){let n=t.getBoundingClientRect();if(e.clientX>=n.left&&e.clientX<=n.right&&e.clientY>=n.top&&e.clientY<=n.bottom)return;if(typeof document.elementFromPoint==`function`){let n=document.elementFromPoint(e.clientX,e.clientY);if(n&&t.contains(n))return}}T()};return a(`div`,{...x,ref:S,className:r(t.revealLens,_,y?.root),style:{...v,...b?.root},"data-reveal-shape":m,onPointerDown:E,onPointerMove:D,onPointerUp:O,onPointerCancel:k,onPointerLeave:k,children:[i(`div`,{className:r(t.revealLensBackground,y?.background),style:b?.background,children:u}),i(`div`,{ref:C,className:r(t.revealLensOverlay,y?.overlay),style:b?.overlay,children:d})]})}export{l as default};
|
|
2
|
+
//# sourceMappingURL=revealLens.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"revealLens.mjs","names":[],"sources":["../../../../package/common/revealLens/revealLens.tsx"],"sourcesContent":["import { useRef, type PointerEvent as ReactPointerEvent, type ReactElement } from 'react';\nimport cx from 'classnames';\n\nimport { useComponentDefaults } from '../configProvider';\nimport type { RevealLensProps } from './revealLens.types';\nimport styles from './revealLens.module.pcss';\n\nfunction buildMaskImage(x: number, y: number, radius: number, feather: number): string {\n const inner = Math.max(radius - feather, 0);\n return `radial-gradient(circle ${radius}px at ${x}px ${y}px, transparent ${inner}px, transparent ${inner}px, white ${radius}px)`;\n}\n\nfunction applyMask(overlay: HTMLDivElement, value: string) {\n overlay.style.setProperty('mask-image', value);\n overlay.style.setProperty('-webkit-mask-image', value);\n}\n\nfunction clearMask(overlay: HTMLDivElement) {\n overlay.style.removeProperty('mask-image');\n overlay.style.removeProperty('-webkit-mask-image');\n}\n\nfunction RevealLens(props: RevealLensProps): ReactElement {\n const {\n background,\n overlay,\n radius = 120,\n feather = 24,\n shape = 'circle',\n maskImage,\n disabled = false,\n className,\n style,\n classNames,\n styles: slotStyles,\n ...rest\n } = useComponentDefaults('RevealLens', props);\n\n const rootRef = useRef<HTMLDivElement>(null);\n const overlayRef = useRef<HTMLDivElement>(null);\n\n const updateMask = (clientX: number, clientY: number) => {\n const root = rootRef.current;\n const overlayEl = overlayRef.current;\n if (!root || !overlayEl) return;\n\n const rect = root.getBoundingClientRect();\n const x = clientX - rect.left;\n const y = clientY - rect.top;\n\n overlayEl.classList.remove(styles.revealLensOverlayTransitioning);\n applyMask(overlayEl, maskImage ?? buildMaskImage(x, y, radius, feather));\n };\n\n const resetMask = () => {\n const overlayEl = overlayRef.current;\n if (!overlayEl) return;\n\n overlayEl.classList.add(styles.revealLensOverlayTransitioning);\n clearMask(overlayEl);\n };\n\n const handlePointerDown = (event: ReactPointerEvent<HTMLDivElement>) => {\n if (disabled) return;\n event.currentTarget.setPointerCapture?.(event.pointerId);\n updateMask(event.clientX, event.clientY);\n };\n\n const handlePointerMove = (event: ReactPointerEvent<HTMLDivElement>) => {\n if (disabled) return;\n updateMask(event.clientX, event.clientY);\n };\n\n const handlePointerUp = (event: ReactPointerEvent<HTMLDivElement>) => {\n if (disabled || event.pointerType === 'mouse') return;\n resetMask();\n };\n\n // pointerleave/pointercancel can fire spuriously, with the pointer still physically over the\n // element, when it's nested inside two coincident 3D transform contexts (e.g. Tilt + Flip\n // composed per the docs, where Flip fills Tilt exactly and their perspective-origins land on\n // the same pixel). At that shared origin point, Chromium's hit-test can misresolve to an\n // ancestor instead of the actual topmost content. elementFromPoint reads that same broken\n // result, so it can't be trusted there either. The event's own clientX/clientY are real,\n // unaffected viewport coordinates, so check those directly against our own (transform-aware)\n // bounding rect first. A leave that's still geometrically inside us is never real.\n const handlePointerEnd = (event: ReactPointerEvent<HTMLDivElement>) => {\n if (disabled) return;\n const root = rootRef.current;\n if (root) {\n const rect = root.getBoundingClientRect();\n const stillInside =\n event.clientX >= rect.left &&\n event.clientX <= rect.right &&\n event.clientY >= rect.top &&\n event.clientY <= rect.bottom;\n if (stillInside) return;\n\n if (typeof document.elementFromPoint === 'function') {\n const target = document.elementFromPoint(event.clientX, event.clientY);\n if (target && root.contains(target)) return;\n }\n }\n resetMask();\n };\n\n return (\n <div\n {...rest}\n ref={rootRef}\n className={cx(styles.revealLens, className, classNames?.root)}\n style={{ ...style, ...slotStyles?.root }}\n data-reveal-shape={shape}\n onPointerDown={handlePointerDown}\n onPointerMove={handlePointerMove}\n onPointerUp={handlePointerUp}\n onPointerCancel={handlePointerEnd}\n onPointerLeave={handlePointerEnd}\n >\n <div\n className={cx(styles.revealLensBackground, classNames?.background)}\n style={slotStyles?.background}\n >\n {background}\n </div>\n <div\n ref={overlayRef}\n className={cx(styles.revealLensOverlay, classNames?.overlay)}\n style={slotStyles?.overlay}\n >\n {overlay}\n </div>\n </div>\n );\n}\n\nexport default RevealLens;\n"],"mappings":"oOAOA,SAAS,EAAe,EAAW,EAAW,EAAgB,EAAyB,CACrF,IAAM,EAAQ,KAAK,IAAI,EAAS,EAAS,CAAC,EAC1C,MAAO,0BAA0B,EAAO,QAAQ,EAAE,KAAK,EAAE,kBAAkB,EAAM,kBAAkB,EAAM,YAAY,EAAO,IAC9H,CAEA,SAAS,EAAU,EAAyB,EAAe,CACzD,EAAQ,MAAM,YAAY,aAAc,CAAK,EAC7C,EAAQ,MAAM,YAAY,qBAAsB,CAAK,CACvD,CAEA,SAAS,EAAU,EAAyB,CAC1C,EAAQ,MAAM,eAAe,YAAY,EACzC,EAAQ,MAAM,eAAe,oBAAoB,CACnD,CAEA,SAAS,EAAW,EAAsC,CACxD,GAAM,CACJ,aACA,UACA,SAAS,IACT,UAAU,GACV,QAAQ,SACR,YACA,WAAW,GACX,YACA,QACA,aACA,OAAQ,EACR,GAAG,GACD,EAAqB,aAAc,CAAK,EAEtC,EAAU,EAAuB,IAAI,EACrC,EAAa,EAAuB,IAAI,EAExC,GAAc,EAAiB,IAAoB,CACvD,IAAM,EAAO,EAAQ,QACf,EAAY,EAAW,QAC7B,GAAI,CAAC,GAAQ,CAAC,EAAW,OAEzB,IAAM,EAAO,EAAK,sBAAsB,EAClC,EAAI,EAAU,EAAK,KACnB,EAAI,EAAU,EAAK,IAEzB,EAAU,UAAU,OAAO,EAAO,8BAA8B,EAChE,EAAU,EAAW,GAAa,EAAe,EAAG,EAAG,EAAQ,CAAO,CAAC,CACzE,EAEM,MAAkB,CACtB,IAAM,EAAY,EAAW,QACxB,IAEL,EAAU,UAAU,IAAI,EAAO,8BAA8B,EAC7D,EAAU,CAAS,EACrB,EAEM,EAAqB,GAA6C,CAClE,IACJ,EAAM,cAAc,oBAAoB,EAAM,SAAS,EACvD,EAAW,EAAM,QAAS,EAAM,OAAO,EACzC,EAEM,EAAqB,GAA6C,CAClE,GACJ,EAAW,EAAM,QAAS,EAAM,OAAO,CACzC,EAEM,EAAmB,GAA6C,CAChE,GAAY,EAAM,cAAgB,SACtC,EAAU,CACZ,EAUM,EAAoB,GAA6C,CACrE,GAAI,EAAU,OACd,IAAM,EAAO,EAAQ,QACrB,GAAI,EAAM,CACR,IAAM,EAAO,EAAK,sBAAsB,EAMxC,GAJE,EAAM,SAAW,EAAK,MACtB,EAAM,SAAW,EAAK,OACtB,EAAM,SAAW,EAAK,KACtB,EAAM,SAAW,EAAK,OACP,OAEjB,GAAI,OAAO,SAAS,kBAAqB,WAAY,CACnD,IAAM,EAAS,SAAS,iBAAiB,EAAM,QAAS,EAAM,OAAO,EACrE,GAAI,GAAU,EAAK,SAAS,CAAM,EAAG,MACvC,CACF,CACA,EAAU,CACZ,EAEA,OACE,EAAC,MAAD,CACE,GAAI,EACJ,IAAK,EACL,UAAW,EAAG,EAAO,WAAY,EAAW,GAAY,IAAI,EAC5D,MAAO,CAAE,GAAG,EAAO,GAAG,GAAY,IAAK,EACvC,oBAAmB,EACnB,cAAe,EACf,cAAe,EACf,YAAa,EACb,gBAAiB,EACjB,eAAgB,WAVlB,CAYE,EAAC,MAAD,CACE,UAAW,EAAG,EAAO,qBAAsB,GAAY,UAAU,EACjE,MAAO,GAAY,oBAElB,CACE,CAAA,EACL,EAAC,MAAD,CACE,IAAK,EACL,UAAW,EAAG,EAAO,kBAAmB,GAAY,OAAO,EAC3D,MAAO,GAAY,iBAElB,CACE,CAAA,CACF,GAET"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
var e={revealLens:`revealLens_V3Kkk`,"revealLens-background":`revealLens-background_pQyK9`,revealLensBackground:`revealLens-background_pQyK9`,"revealLens-overlay":`revealLens-overlay_NOUoj`,revealLensOverlay:`revealLens-overlay_NOUoj`,"revealLens-overlay-transitioning":`revealLens-overlay-transitioning_-co2e`,revealLensOverlayTransitioning:`revealLens-overlay-transitioning_-co2e`};export{e as default};
|
|
2
|
+
//# sourceMappingURL=revealLens.module.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"revealLens.module.mjs","names":[],"sources":["../../../../package/common/revealLens/revealLens.module.pcss"],"sourcesContent":[".revealLens {\n display: grid;\n overflow: hidden;\n touch-action: none;\n\n &-background,\n &-overlay {\n grid-area: 1 / 1;\n min-width: 0;\n min-height: 0;\n }\n\n &-background {\n z-index: 0;\n }\n\n &-overlay {\n z-index: 1;\n }\n\n &-overlay-transitioning {\n transition: mask-image 0.25s ease, -webkit-mask-image 0.25s ease;\n\n @media (prefers-reduced-motion: reduce) {\n transition: none;\n }\n }\n}\n"],"mappings":""}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{useComponentDefaults as e}from"../configProvider/useComponentDefaults.mjs";import{useTiltGroup as t}from"../tiltGroup/tiltGroup.mjs";import{computeTilt as n,defaultTiltEasing as r}from"./tiltMath.mjs";import i from"./tilt.module.mjs";import{forwardRef as a,useEffect as o,useImperativeHandle as s,useRef as c}from"react";import l from"classnames";import{jsx as u}from"react/jsx-runtime";function d(){return typeof process<`u`&&!1}function f(){return typeof window<`u`&&window.matchMedia?.(`(prefers-reduced-motion: reduce)`).matches===!0}var p=.3,m=.05,h=a(function(a,h){let{children:g,maxTilt:_=15,maxTiltX:v,maxTiltY:y,perspective:b=800,easing:x=r,lockAxis:S=`none`,scaleOnHover:C=1,trackingMode:w=`self`,disabled:T=!1,onTiltChange:E,className:D,style:O,classNames:k,styles:A,...j}=e(`Tilt`,a),M=c(null),N=c(null),P=c(void 0),F=c(!1),I=c(!1),L=c(!1),R=c(null),z=c({rotateX:0,rotateY:0}),B=t(),V=w===`group`,H=V&&B!==null;o(()=>{V&&B===null&&d()&&console.warn(`Tilt: trackingMode="group" was set with no ancestor TiltGroup, falling back to self tracking.`)},[V,B===null]);let U=v??_,W=y??_;function G(e,t,n){let r=N.current;r&&(r.style.transform=`rotateX(${e}deg) rotateY(${t}deg)`+(n===1?``:` scale(${n})`))}function K(){P.current!==void 0&&(cancelAnimationFrame(P.current),P.current=void 0),F.current=!1}function q(){if(P.current=void 0,!N.current){F.current=!1;return}let e=I.current&&!T&&!f(),t=0,r=0;if(e){let e=R.current,i=M.current?.getBoundingClientRect();if(e&&i){let a=n(e.x-i.left,e.y-i.top,i,{maxTiltX:U,maxTiltY:W,easing:x,lockAxis:S});t=a.rotateX,r=a.rotateY}}let i=z.current,a,o;if(L.current?(a=i.rotateX+(t-i.rotateX)*p,o=i.rotateY+(r-i.rotateY)*p,Math.abs(t-a)<m&&Math.abs(r-o)<m&&(a=t,o=r,L.current=!1)):(a=t,o=r),z.current={rotateX:a,rotateY:o},G(a,o,e?C:1),E?.(a,o),!L.current){F.current=!1;return}P.current=requestAnimationFrame(q)}function J(){F.current||(F.current=!0,P.current=requestAnimationFrame(q))}function Y(e){I.current!==e&&(L.current=!0),I.current=e,J()}let X=e=>{T||H||f()||(R.current={x:e.clientX,y:e.clientY},Y(!0))},Z=()=>{H||Y(!1)};return o(()=>{if(H){if(T||f()){Y(!1);return}B?.pointer&&B.rect?(R.current={x:B.rect.left+B.pointer.x,y:B.rect.top+B.pointer.y},Y(!0)):Y(!1)}},[H,T,B?.pointer,B?.rect]),o(()=>()=>{K()},[]),s(h,()=>({setTilt(e,t){let n={rotateX:Math.max(-U,Math.min(U,e)),rotateY:Math.max(-W,Math.min(W,t))};K(),I.current=!1,L.current=!1,z.current=n,G(n.rotateX,n.rotateY,C),E?.(n.rotateX,n.rotateY)},reset(){K(),I.current=!1,L.current=!1,z.current={rotateX:0,rotateY:0},G(0,0,1)}})),u(`div`,{...j,ref:M,className:l(i.tilt,D,k?.root),style:{...O,...A?.root},onPointerMove:X,onPointerLeave:Z,onPointerCancel:Z,children:u(`div`,{className:l(i.tiltPerspective,k?.perspective),style:{perspective:`${b}px`,...A?.perspective},children:u(`div`,{ref:N,className:l(i.tiltSurface,k?.surface),style:A?.surface,children:g})})})});export{h as default};
|
|
2
|
+
//# sourceMappingURL=tilt.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"tilt.mjs","names":[],"sources":["../../../../package/common/tilt/tilt.tsx"],"sourcesContent":["import {\n forwardRef,\n useEffect,\n useImperativeHandle,\n useRef,\n type PointerEvent as ReactPointerEvent,\n} from 'react';\nimport cx from 'classnames';\n\nimport { useComponentDefaults } from '../configProvider';\nimport { useTiltGroup } from '../tiltGroup';\nimport { computeTilt, defaultTiltEasing } from './tiltMath';\nimport type { TiltHandle, TiltProps } from './tilt.types';\nimport styles from './tilt.module.pcss';\n\n// Module-scoped ambient typing for the bundler-replaced NODE_ENV guard below. See bodyEnd.tsx.\ndeclare const process: { env: { NODE_ENV?: string } };\n\nfunction isDev(): boolean {\n return typeof process !== 'undefined' && process.env.NODE_ENV !== 'production';\n}\n\nfunction prefersReducedMotion(): boolean {\n return typeof window !== 'undefined' && window.matchMedia?.('(prefers-reduced-motion: reduce)').matches === true;\n}\n\n// Per-frame catch-up rate (fraction of the remaining gap closed each tick) and the gap size,\n// in degrees, below which we consider the catch-up finished and switch to direct 1:1 writes.\nconst TILT_SMOOTHING = 0.3;\nconst TILT_CONVERGE_EPSILON = 0.05;\n\nconst Tilt = forwardRef<TiltHandle, TiltProps>(function Tilt(props, ref) {\n const {\n children,\n maxTilt = 15,\n maxTiltX,\n maxTiltY,\n perspective = 800,\n easing = defaultTiltEasing,\n lockAxis = 'none',\n scaleOnHover = 1,\n trackingMode = 'self',\n disabled = false,\n onTiltChange,\n className,\n style,\n classNames,\n styles: slotStyles,\n ...rest\n } = useComponentDefaults('Tilt', props);\n\n const rootRef = useRef<HTMLDivElement>(null);\n const surfaceRef = useRef<HTMLDivElement>(null);\n const rafRef = useRef<number | undefined>(undefined);\n const loopActiveRef = useRef(false);\n // Whether the pointer is currently \"over\" the element (self mode: within its own bounds;\n // group mode: the shared group pointer is set). The tilt loop's target is (0,0) whenever this\n // is false, and computed from `latestPointerRef` whenever it's true.\n const isHoveringRef = useRef(false);\n // True while the visually-applied tilt is still catching up to the target after a\n // discontinuity (entering from flat, or leaving back to flat), eased via a per-frame lerp\n // toward whatever the *current* target is. Once the gap closes, updates apply directly (1:1,\n // no lag) so continuous tracking stays crisp. A CSS transition can't do this cleanly: retargeting\n // one mid-flight restarts its full duration from scratch, so a continuously-moving cursor makes\n // it fall further and further behind instead of ever catching up.\n const isCatchingUpRef = useRef(false);\n const latestPointerRef = useRef<{ x: number; y: number } | null>(null);\n const currentTiltRef = useRef({ rotateX: 0, rotateY: 0 });\n\n const group = useTiltGroup();\n const usingGroup = trackingMode === 'group';\n const groupActive = usingGroup && group !== null;\n\n useEffect(() => {\n if (usingGroup && group === null && isDev()) {\n console.warn('Tilt: trackingMode=\"group\" was set with no ancestor TiltGroup, falling back to self tracking.');\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [usingGroup, group === null]);\n\n const clampX = maxTiltX ?? maxTilt;\n const clampY = maxTiltY ?? maxTilt;\n\n function writeTiltTransform(rotateX: number, rotateY: number, scale: number) {\n const surface = surfaceRef.current;\n if (!surface) return;\n surface.style.transform = `rotateX(${rotateX}deg) rotateY(${rotateY}deg)` + (scale !== 1 ? ` scale(${scale})` : '');\n }\n\n function stopTiltLoop() {\n if (rafRef.current !== undefined) {\n cancelAnimationFrame(rafRef.current);\n rafRef.current = undefined;\n }\n loopActiveRef.current = false;\n }\n\n // The single continuous per-frame driver for tilt. Reads live authoritative state\n // (`isHoveringRef`/`latestPointerRef`) fresh every tick rather than closing over values\n // captured at schedule time, so there's no possibility of a stale queued frame overwriting a\n // newer state.\n function tick() {\n rafRef.current = undefined;\n const surface = surfaceRef.current;\n if (!surface) {\n loopActiveRef.current = false;\n return;\n }\n\n const hovering = isHoveringRef.current && !disabled && !prefersReducedMotion();\n let targetX = 0;\n let targetY = 0;\n if (hovering) {\n const pos = latestPointerRef.current;\n const rect = rootRef.current?.getBoundingClientRect();\n if (pos && rect) {\n const target = computeTilt(pos.x - rect.left, pos.y - rect.top, rect, {\n maxTiltX: clampX,\n maxTiltY: clampY,\n easing,\n lockAxis,\n });\n targetX = target.rotateX;\n targetY = target.rotateY;\n }\n }\n\n const cur = currentTiltRef.current;\n let nextX: number;\n let nextY: number;\n if (isCatchingUpRef.current) {\n nextX = cur.rotateX + (targetX - cur.rotateX) * TILT_SMOOTHING;\n nextY = cur.rotateY + (targetY - cur.rotateY) * TILT_SMOOTHING;\n if (Math.abs(targetX - nextX) < TILT_CONVERGE_EPSILON && Math.abs(targetY - nextY) < TILT_CONVERGE_EPSILON) {\n nextX = targetX;\n nextY = targetY;\n isCatchingUpRef.current = false;\n }\n } else {\n // Locked on: apply the target directly, every frame. This is what keeps continuous\n // tracking crisp with zero added lag once the catch-up phase has finished.\n nextX = targetX;\n nextY = targetY;\n }\n\n currentTiltRef.current = { rotateX: nextX, rotateY: nextY };\n writeTiltTransform(nextX, nextY, hovering ? scaleOnHover : 1);\n onTiltChange?.(nextX, nextY);\n\n // Once locked on (nothing left to ease), stop rescheduling. The next native pointermove\n // (self mode) or group pointer update (group mode) calls `ensureTiltLoopRunning()` again on\n // its own, restarting the loop for exactly the one instant tick it needs.\n if (!isCatchingUpRef.current) {\n loopActiveRef.current = false;\n return;\n }\n rafRef.current = requestAnimationFrame(tick);\n }\n\n function ensureTiltLoopRunning() {\n if (loopActiveRef.current) return;\n loopActiveRef.current = true;\n rafRef.current = requestAnimationFrame(tick);\n }\n\n // Marks a hover-state transition (entering or leaving) so the loop re-arms its catch-up phase.\n // Only on an actual flip, not on every pointermove while already hovering, so continuous\n // tracking never re-triggers easing.\n function setHovering(next: boolean) {\n if (isHoveringRef.current !== next) {\n isCatchingUpRef.current = true;\n }\n isHoveringRef.current = next;\n ensureTiltLoopRunning();\n }\n\n // Self-mode pointer handlers.\n const handlePointerMove = (event: ReactPointerEvent<HTMLDivElement>) => {\n if (disabled || groupActive || prefersReducedMotion()) return;\n latestPointerRef.current = { x: event.clientX, y: event.clientY };\n setHovering(true);\n };\n\n const handlePointerLeave = () => {\n if (groupActive) return;\n setHovering(false);\n };\n\n // Group-mode tracking: react to the shared pointer position published by TiltGroup.\n useEffect(() => {\n if (!groupActive) return;\n if (disabled || prefersReducedMotion()) {\n setHovering(false);\n return;\n }\n if (group?.pointer && group.rect) {\n latestPointerRef.current = { x: group.rect.left + group.pointer.x, y: group.rect.top + group.pointer.y };\n setHovering(true);\n } else {\n setHovering(false);\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [groupActive, disabled, group?.pointer, group?.rect]);\n\n useEffect(() => {\n // Must go through stopTiltLoop() (not just cancelAnimationFrame) so loopActiveRef is reset\n // too. Under React StrictMode, every effect's cleanup runs once synchronously right after\n // its setup, before setup runs again, so this fires even though the component isn't really\n // unmounting. The group-mode effect above runs on every mount (it schedules the loop as soon\n // as there's a group context, even with a still-null pointer), so cancelling its pending\n // frame here without also clearing loopActiveRef left the loop believing it was still\n // \"active\" with nothing actually scheduled: permanently wedged, since every later call to\n // ensureTiltLoopRunning() saw loopActiveRef already true and silently no-opped forever.\n return () => {\n stopTiltLoop();\n };\n }, []);\n\n useImperativeHandle(ref, () => ({\n setTilt(rotateX: number, rotateY: number) {\n const clamped = {\n rotateX: Math.max(-clampX, Math.min(clampX, rotateX)),\n rotateY: Math.max(-clampY, Math.min(clampY, rotateY)),\n };\n // Stops the loop so live tracking (if any is active) can't overwrite this explicit value\n // on the very next frame. An external caller driving custom choreography expects the\n // value it just set to actually stick. A later real pointer move restarts tracking fresh.\n stopTiltLoop();\n isHoveringRef.current = false;\n isCatchingUpRef.current = false;\n currentTiltRef.current = clamped;\n writeTiltTransform(clamped.rotateX, clamped.rotateY, scaleOnHover);\n onTiltChange?.(clamped.rotateX, clamped.rotateY);\n },\n reset() {\n stopTiltLoop();\n isHoveringRef.current = false;\n isCatchingUpRef.current = false;\n currentTiltRef.current = { rotateX: 0, rotateY: 0 };\n writeTiltTransform(0, 0, 1);\n },\n }));\n\n return (\n <div\n {...rest}\n ref={rootRef}\n className={cx(styles.tilt, className, classNames?.root)}\n style={{ ...style, ...slotStyles?.root }}\n onPointerMove={handlePointerMove}\n onPointerLeave={handlePointerLeave}\n onPointerCancel={handlePointerLeave}\n >\n <div\n className={cx(styles.tiltPerspective, classNames?.perspective)}\n style={{ perspective: `${perspective}px`, ...slotStyles?.perspective }}\n >\n <div\n ref={surfaceRef}\n className={cx(styles.tiltSurface, classNames?.surface)}\n style={slotStyles?.surface}\n >\n {children}\n </div>\n </div>\n </div>\n );\n});\n\nexport default Tilt;\n"],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"tilt.module.mjs","names":[],"sources":["../../../../package/common/tilt/tilt.module.pcss"],"sourcesContent":[".tilt {\n display: inline-block;\n touch-action: none;\n\n &-perspective {\n width: 100%;\n height: 100%;\n }\n\n &-surface {\n position: relative;\n width: 100%;\n height: 100%;\n transform-style: preserve-3d;\n will-change: transform;\n }\n}\n"],"mappings":""}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
function e(e){let t=Math.max(-1,Math.min(1,e));return Math.sign(t)*Math.abs(t)**1.6}function t(e,t){return Math.max(-t,Math.min(t,e))}function n(e,n,r,{maxTiltX:i,maxTiltY:a,easing:o,lockAxis:s}){let c=r.width>0?e/r.width*2-1:0,l=r.height>0?n/r.height*2-1:0;return{rotateX:s===`x`?0:t(-o(l)*i,i),rotateY:s===`y`?0:t(o(c)*a,a)}}export{n as computeTilt,e as defaultTiltEasing};
|
|
2
|
+
//# sourceMappingURL=tiltMath.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"tiltMath.mjs","names":[],"sources":["../../../../package/common/tilt/tiltMath.ts"],"sourcesContent":["export type TiltAxisLock = 'x' | 'y' | 'none';\n\nexport interface ComputeTiltOptions {\n maxTiltX: number;\n maxTiltY: number;\n easing: (t: number) => number;\n lockAxis: TiltAxisLock;\n}\n\nexport interface TiltResult {\n rotateX: number;\n rotateY: number;\n}\n\n/**\n * Eases faster near the edges (|t| close to 1) and flatter near the center (|t| close to 0),\n * while staying odd-symmetric so tilt direction always matches cursor direction.\n */\nexport function defaultTiltEasing(t: number): number {\n const clamped = Math.max(-1, Math.min(1, t));\n return Math.sign(clamped) * Math.pow(Math.abs(clamped), 1.6);\n}\n\nfunction clamp(value: number, max: number): number {\n return Math.max(-max, Math.min(max, value));\n}\n\n/**\n * Computes the tilt rotation for a pointer at (x, y) relative to `rect`'s top-left corner.\n * Vertical cursor position drives rotateX (tilts top/bottom edges), horizontal drives rotateY.\n */\nexport function computeTilt(\n x: number,\n y: number,\n rect: { width: number; height: number },\n { maxTiltX, maxTiltY, easing, lockAxis }: ComputeTiltOptions,\n): TiltResult {\n const nx = rect.width > 0 ? (x / rect.width) * 2 - 1 : 0;\n const ny = rect.height > 0 ? (y / rect.height) * 2 - 1 : 0;\n\n const rotateX = lockAxis === 'x' ? 0 : clamp(-easing(ny) * maxTiltX, maxTiltX);\n const rotateY = lockAxis === 'y' ? 0 : clamp(easing(nx) * maxTiltY, maxTiltY);\n\n return { rotateX, rotateY };\n}\n"],"mappings":"AAkBA,SAAgB,EAAkB,EAAmB,CACnD,IAAM,EAAU,KAAK,IAAI,GAAI,KAAK,IAAI,EAAG,CAAC,CAAC,EAC3C,OAAO,KAAK,KAAK,CAAO,EAAa,KAAK,IAAI,CAAO,GAAG,GAC1D,CAEA,SAAS,EAAM,EAAe,EAAqB,CACjD,OAAO,KAAK,IAAI,CAAC,EAAK,KAAK,IAAI,EAAK,CAAK,CAAC,CAC5C,CAMA,SAAgB,EACd,EACA,EACA,EACA,CAAE,WAAU,WAAU,SAAQ,YAClB,CACZ,IAAM,EAAK,EAAK,MAAQ,EAAK,EAAI,EAAK,MAAS,EAAI,EAAI,EACjD,EAAK,EAAK,OAAS,EAAK,EAAI,EAAK,OAAU,EAAI,EAAI,EAKzD,MAAO,CAAE,QAHO,IAAa,IAAM,EAAI,EAAM,CAAC,EAAO,CAAE,EAAI,EAAU,CAAQ,EAG3D,QAFF,IAAa,IAAM,EAAI,EAAM,EAAO,CAAE,EAAI,EAAU,CAAQ,CAElD,CAC5B"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{createContext as e,useContext as t,useRef as n,useState as r}from"react";import{jsx as i}from"react/jsx-runtime";var a=e(null);function o(){return t(a)}function s({children:e,className:t,style:o,...s}){let c=n(null),l=n(void 0),u=n(!1),d=n(null),[f,p]=r({pointer:null,rect:null}),m=()=>{u.current||(u.current=!0,l.current=requestAnimationFrame(()=>{u.current=!1,l.current=void 0;let e=c.current,t=d.current;if(!e||!t)return;let n=e.getBoundingClientRect();p({pointer:{x:t.x-n.left,y:t.y-n.top},rect:n})}))},h=e=>{d.current={x:e.clientX,y:e.clientY},m()},g=()=>{d.current=null,u.current&&l.current!==void 0&&(cancelAnimationFrame(l.current),u.current=!1,l.current=void 0),p({pointer:null,rect:null})};return i(`div`,{...s,ref:c,className:t,style:o,onPointerMove:h,onPointerLeave:g,children:i(a.Provider,{value:f,children:e})})}export{a as TiltGroupContext,s as default,o as useTiltGroup};
|
|
2
|
+
//# sourceMappingURL=tiltGroup.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"tiltGroup.mjs","names":[],"sources":["../../../../package/common/tiltGroup/tiltGroup.tsx"],"sourcesContent":["import { createContext, useContext, useRef, useState, type PointerEvent as ReactPointerEvent, type ReactElement } from 'react';\nimport type { TiltGroupContextValue, TiltGroupProps } from './tiltGroup.types';\n\nexport const TiltGroupContext = createContext<TiltGroupContextValue | null>(null);\n\nexport function useTiltGroup(): TiltGroupContextValue | null {\n return useContext(TiltGroupContext);\n}\n\nfunction TiltGroup({ children, className, style, ...rest }: TiltGroupProps): ReactElement {\n const rootRef = useRef<HTMLDivElement>(null);\n const rafRef = useRef<number | undefined>(undefined);\n // See Tilt's identical `rafPendingRef` for why this is tracked separately from `rafRef`.\n const rafPendingRef = useRef(false);\n const latestClientPos = useRef<{ x: number; y: number } | null>(null);\n const [value, setValue] = useState<TiltGroupContextValue>({ pointer: null, rect: null });\n\n const scheduleUpdate = () => {\n if (rafPendingRef.current) return;\n rafPendingRef.current = true;\n rafRef.current = requestAnimationFrame(() => {\n rafPendingRef.current = false;\n rafRef.current = undefined;\n const root = rootRef.current;\n const pos = latestClientPos.current;\n if (!root || !pos) return;\n const rect = root.getBoundingClientRect();\n setValue({ pointer: { x: pos.x - rect.left, y: pos.y - rect.top }, rect });\n });\n };\n\n const handlePointerMove = (event: ReactPointerEvent<HTMLDivElement>) => {\n latestClientPos.current = { x: event.clientX, y: event.clientY };\n scheduleUpdate();\n };\n\n const handlePointerLeave = () => {\n latestClientPos.current = null;\n if (rafPendingRef.current && rafRef.current !== undefined) {\n cancelAnimationFrame(rafRef.current);\n rafPendingRef.current = false;\n rafRef.current = undefined;\n }\n setValue({ pointer: null, rect: null });\n };\n\n return (\n <div\n {...rest}\n ref={rootRef}\n className={className}\n style={style}\n onPointerMove={handlePointerMove}\n onPointerLeave={handlePointerLeave}\n >\n <TiltGroupContext.Provider value={value}>{children}</TiltGroupContext.Provider>\n </div>\n );\n}\n\nexport default TiltGroup;\n"],"mappings":"wHAGA,IAAa,EAAmB,EAA4C,IAAI,EAEhF,SAAgB,GAA6C,CAC3D,OAAO,EAAW,CAAgB,CACpC,CAEA,SAAS,EAAU,CAAE,WAAU,YAAW,QAAO,GAAG,GAAsC,CACxF,IAAM,EAAU,EAAuB,IAAI,EACrC,EAAS,EAA2B,IAAA,EAAS,EAE7C,EAAgB,EAAO,EAAK,EAC5B,EAAkB,EAAwC,IAAI,EAC9D,CAAC,EAAO,GAAY,EAAgC,CAAE,QAAS,KAAM,KAAM,IAAK,CAAC,EAEjF,MAAuB,CACvB,EAAc,UAClB,EAAc,QAAU,GACxB,EAAO,QAAU,0BAA4B,CAC3C,EAAc,QAAU,GACxB,EAAO,QAAU,IAAA,GACjB,IAAM,EAAO,EAAQ,QACf,EAAM,EAAgB,QAC5B,GAAI,CAAC,GAAQ,CAAC,EAAK,OACnB,IAAM,EAAO,EAAK,sBAAsB,EACxC,EAAS,CAAE,QAAS,CAAE,EAAG,EAAI,EAAI,EAAK,KAAM,EAAG,EAAI,EAAI,EAAK,GAAI,EAAG,MAAK,CAAC,CAC3E,CAAC,EACH,EAEM,EAAqB,GAA6C,CACtE,EAAgB,QAAU,CAAE,EAAG,EAAM,QAAS,EAAG,EAAM,OAAQ,EAC/D,EAAe,CACjB,EAEM,MAA2B,CAC/B,EAAgB,QAAU,KACtB,EAAc,SAAW,EAAO,UAAY,IAAA,KAC9C,qBAAqB,EAAO,OAAO,EACnC,EAAc,QAAU,GACxB,EAAO,QAAU,IAAA,IAEnB,EAAS,CAAE,QAAS,KAAM,KAAM,IAAK,CAAC,CACxC,EAEA,OACE,EAAC,MAAD,CACE,GAAI,EACJ,IAAK,EACM,YACJ,QACP,cAAe,EACf,eAAgB,WAEhB,EAAC,EAAiB,SAAlB,CAAkC,QAAQ,UAAoC,CAAA,CAC3E,CAAA,CAET"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"timeline.module.mjs","names":[],"sources":["../../../../package/common/timeline/timeline.module.pcss"],"sourcesContent":[".timeline {\n /* Theme tokens resolved once, each with a built-in fallback. Set any of the\n public `--timeline-*` variables via ThemeProvider (theme-wide) or `style`\n (per instance) to override; unset ones fall back to the values below. */\n --custom-timeline-dot-size: var(--timeline-dot-size, 14px);\n --custom-timeline-dot-color: var(--timeline-dot-color, var(--primary-color));\n --custom-timeline-dot-border: var(--timeline-dot-border, var(--background));\n --custom-timeline-line-color: var(--timeline-line-color, var(--border-color));\n --custom-timeline-line-thickness: var(--timeline-line-thickness, 2px);\n --custom-timeline-gap: var(--timeline-gap, 16px);\n --custom-timeline-item-gap: var(--timeline-item-gap, 20px);\n --custom-timeline-icon-dot-size: var(--timeline-icon-dot-size, 28px);\n\n display: flex;\n flex-direction: column;\n color: var(--text-color);\n\n &-item {\n display: flex;\n gap: var(--custom-timeline-gap);\n border-radius: var(--default-border-radius);\n\n &:last-child &-connector {\n display: none;\n }\n }\n\n &-item-clickable {\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n transition: background-color 0.15s ease;\n margin:
|
|
1
|
+
{"version":3,"file":"timeline.module.mjs","names":[],"sources":["../../../../package/common/timeline/timeline.module.pcss"],"sourcesContent":[".timeline {\n /* Theme tokens resolved once, each with a built-in fallback. Set any of the\n public `--timeline-*` variables via ThemeProvider (theme-wide) or `style`\n (per instance) to override; unset ones fall back to the values below. */\n --custom-timeline-dot-size: var(--timeline-dot-size, 14px);\n --custom-timeline-dot-color: var(--timeline-dot-color, var(--primary-color));\n --custom-timeline-dot-border: var(--timeline-dot-border, var(--background));\n --custom-timeline-line-color: var(--timeline-line-color, var(--border-color));\n --custom-timeline-line-thickness: var(--timeline-line-thickness, 2px);\n --custom-timeline-gap: var(--timeline-gap, 16px);\n --custom-timeline-item-gap: var(--timeline-item-gap, 20px);\n --custom-timeline-icon-dot-size: var(--timeline-icon-dot-size, 28px);\n\n display: flex;\n flex-direction: column;\n color: var(--text-color);\n\n &-item {\n display: flex;\n gap: var(--custom-timeline-gap);\n border-radius: var(--default-border-radius);\n\n &:last-child &-connector {\n display: none;\n }\n }\n\n &-item-clickable {\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n transition: background-color 0.15s ease;\n margin: 0px -10px;\n padding: 0px 10px;\n\n &:hover {\n background-color: var(--background-accent-light);\n }\n &:focus-visible {\n outline: 2px solid var(--primary-color);\n outline-offset: -2px;\n }\n }\n\n &-item-disabled {\n opacity: 0.5;\n }\n\n &-marker {\n display: flex;\n flex-direction: column;\n align-items: center;\n flex-shrink: 0;\n }\n\n &-dot {\n width: var(--custom-timeline-dot-size);\n height: var(--custom-timeline-dot-size);\n border-radius: 50%;\n background-color: var(--custom-timeline-dot-color);\n box-shadow: 0 0 0 3px var(--custom-timeline-dot-border);\n flex-shrink: 0;\n\n &:has(svg) {\n width: var(--custom-timeline-icon-dot-size);\n height: var(--custom-timeline-icon-dot-size);\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--text-on-primary);\n font-size: calc(var(--custom-timeline-icon-dot-size) * 0.5);\n }\n }\n\n &-dot-primary {\n background-color: var(--primary-color);\n }\n &-dot-success {\n background-color: var(--success-color);\n }\n &-dot-warn {\n background-color: var(--warn-color);\n }\n &-dot-error {\n background-color: var(--error-color);\n }\n\n &-connector {\n flex: 1 1 auto;\n width: var(--custom-timeline-line-thickness);\n min-height: 12px;\n background-color: var(--custom-timeline-line-color);\n margin: 4px 0;\n }\n\n &-content {\n flex: 1 1 auto;\n min-width: 0;\n padding-bottom: var(--custom-timeline-item-gap);\n }\n\n &-header {\n display: flex;\n align-items: baseline;\n justify-content: space-between;\n gap: 8px;\n }\n\n &-title {\n font-weight: 600;\n color: var(--text-color);\n }\n\n &-timestamp {\n flex-shrink: 0;\n color: var(--text-dark);\n font-size: var(--text-small-font-size, 0.85em);\n white-space: nowrap;\n }\n\n &-description {\n color: var(--text-dark);\n margin-top: 2px;\n }\n\n /* Right: markers + line on the right, content on the left */\n &-right &-item {\n flex-direction: row-reverse;\n text-align: right;\n }\n &-right &-header {\n flex-direction: row-reverse;\n }\n\n /* Alternate: two-column layout, entries alternating left/right of a centered line */\n &-alternate &-item {\n display: grid;\n grid-template-columns: 1fr auto 1fr;\n align-items: start;\n gap: var(--custom-timeline-gap);\n }\n &-alternate &-marker {\n grid-column: 2;\n grid-row: 1;\n }\n &-alternate &-content {\n grid-column: 1;\n grid-row: 1;\n text-align: right;\n }\n &-alternate &-header {\n flex-direction: row-reverse;\n }\n &-alternate &-item-right &-content {\n grid-column: 3;\n text-align: left;\n }\n &-alternate &-item-right &-header {\n flex-direction: row;\n }\n}\n"],"mappings":""}
|
package/dist/esm/index.mjs
CHANGED
|
@@ -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{AlertStyleType as p}from"./common/alert/alert.types.mjs";import m from"./common/alert/alert.mjs";import h from"./common/animatedLogo/animatedLogo.mjs";import{AnimatedTextUnit as g,AnimatedTextVariant as _}from"./common/animatedText/animatedText.types.mjs";import v from"./common/animatedText/animatedText.mjs";import{BadgePosition as y,BadgeStyleType as b}from"./common/badge/badge.types.mjs";import x from"./common/badge/badge.mjs";import S from"./common/avatar/avatar.mjs";import C from"./common/avatar/avatarGroup.mjs";import w from"./common/bodyEnd/bodyEnd.mjs";import{Align as T}from"./common/floatingMenu/floatingMenu.types.mjs";import E from"./common/floatingMenu/floatingMenu.mjs";import D from"./common/breadcrumb/breadcrumb.mjs";import{ButtonGroupOrientation as O}from"./common/buttonGroup/buttonGroup.types.mjs";import k from"./common/buttonGroup/buttonGroup.mjs";import{CardStyleType as A}from"./common/card/card.types.mjs";import j from"./common/card/Card.mjs";import M from"./common/card/CardHeader.mjs";import N from"./common/card/CardMedia.mjs";import P from"./common/card/CardContent.mjs";import F from"./common/card/CardActions.mjs";import I from"./common/carousel/carousel.mjs";import L from"./common/checkbox/checkbox.mjs";import{ChipStyleType as R}from"./common/chip/chip.types.mjs";import z from"./common/chip/chip.mjs";import B from"./common/chip/chipContainer.mjs";import V from"./common/tooltip/tooltip.mjs";import{InputIconPosition as H,InputType as U}from"./common/input/input.types.mjs";import W from"./common/input/input.mjs";import G from"./common/colorPicker/colorPicker.mjs";import K from"./common/modal/modal.mjs";import q from"./common/confirmModal/confirmModal.mjs";import{getLocale as J,mapLocale as Y,setLocale as X}from"./services/localization.mjs";import Z from"./common/infiniteBlock/infiniteBlock.mjs";import Q from"./common/dropdown/dropdown.mjs";import $ from"./common/datePicker/datePicker.mjs";import{DividerOrientation as ee,DividerTextPosition as te}from"./common/divider/divider.types.mjs";import ne from"./common/divider/divider.mjs";import re from"./common/drawer/drawer.mjs";import{DropZoneReturnType as ie,DropZoneStatus as ae}from"./common/dropZone/dropZone.types.mjs";import oe from"./common/dropZone/dropZone.mjs";import se from"./common/emptyState/emptyState.mjs";import{showToast as ce}from"./common/toast/toastService.mjs";import le from"./common/toast/toastProvider.mjs";import ue from"./common/errorBoundary/errorBoundary.mjs";import de from"./common/fab/fab.mjs";import fe from"./common/iconPicker/iconPicker.mjs";import
|
|
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{AlertStyleType as p}from"./common/alert/alert.types.mjs";import m from"./common/alert/alert.mjs";import h from"./common/animatedLogo/animatedLogo.mjs";import{AnimatedTextUnit as g,AnimatedTextVariant as _}from"./common/animatedText/animatedText.types.mjs";import v from"./common/animatedText/animatedText.mjs";import{BadgePosition as y,BadgeStyleType as b}from"./common/badge/badge.types.mjs";import x from"./common/badge/badge.mjs";import S from"./common/avatar/avatar.mjs";import C from"./common/avatar/avatarGroup.mjs";import w from"./common/bodyEnd/bodyEnd.mjs";import{Align as T}from"./common/floatingMenu/floatingMenu.types.mjs";import E from"./common/floatingMenu/floatingMenu.mjs";import D from"./common/breadcrumb/breadcrumb.mjs";import{ButtonGroupOrientation as O}from"./common/buttonGroup/buttonGroup.types.mjs";import k from"./common/buttonGroup/buttonGroup.mjs";import{CardStyleType as A}from"./common/card/card.types.mjs";import j from"./common/card/Card.mjs";import M from"./common/card/CardHeader.mjs";import N from"./common/card/CardMedia.mjs";import P from"./common/card/CardContent.mjs";import F from"./common/card/CardActions.mjs";import I from"./common/carousel/carousel.mjs";import L from"./common/checkbox/checkbox.mjs";import{ChipStyleType as R}from"./common/chip/chip.types.mjs";import z from"./common/chip/chip.mjs";import B from"./common/chip/chipContainer.mjs";import V from"./common/tooltip/tooltip.mjs";import{InputIconPosition as H,InputType as U}from"./common/input/input.types.mjs";import W from"./common/input/input.mjs";import G from"./common/colorPicker/colorPicker.mjs";import K from"./common/modal/modal.mjs";import q from"./common/confirmModal/confirmModal.mjs";import{getLocale as J,mapLocale as Y,setLocale as X}from"./services/localization.mjs";import Z from"./common/infiniteBlock/infiniteBlock.mjs";import Q from"./common/dropdown/dropdown.mjs";import $ from"./common/datePicker/datePicker.mjs";import{DividerOrientation as ee,DividerTextPosition as te}from"./common/divider/divider.types.mjs";import ne from"./common/divider/divider.mjs";import re from"./common/drawer/drawer.mjs";import{DropZoneReturnType as ie,DropZoneStatus as ae}from"./common/dropZone/dropZone.types.mjs";import oe from"./common/dropZone/dropZone.mjs";import se from"./common/emptyState/emptyState.mjs";import{showToast as ce}from"./common/toast/toastService.mjs";import le from"./common/toast/toastProvider.mjs";import ue from"./common/errorBoundary/errorBoundary.mjs";import de from"./common/fab/fab.mjs";import fe from"./common/flip/flip.mjs";import pe from"./common/iconPicker/iconPicker.mjs";import me from"./common/idleManager/idleManager.mjs";import he from"./common/inputDropdown/inputDropdown.mjs";import ge from"./common/kanbanBoard/KanbanColumn.mjs";import _e from"./common/kanbanBoard/KanbanBoard.mjs";import ve from"./common/searchInput/searchInput.mjs";import ye from"./common/klipyPicker/klipyPicker.mjs";import be from"./common/loading/iconLoading/index.mjs";import xe from"./common/numberInput/index.mjs";import Se from"./common/optionPicker/optionPicker.mjs";import Ce from"./common/overscroll/overscroll.mjs";import{PopoverAlign as we,PopoverPlacement as Te,PopoverTrigger as Ee}from"./common/popover/popover.types.mjs";import De from"./common/popover/popover.mjs";import Oe from"./common/progressBar/progressBar.mjs";import{RadioGroupOrientation as ke}from"./common/radioGroup/radioGroup.types.mjs";import Ae from"./common/radioGroup/radioGroup.mjs";import je from"./common/rating/rating.mjs";import Me from"./common/revealLens/revealLens.mjs";import Ne from"./common/roomDrawer/roomDrawer.mjs";import Pe from"./common/roomViewer/roomViewer.mjs";import Fe from"./common/scrollbarProvider/index.mjs";import{SectionHeaderSize as Ie}from"./common/sectionHeader/sectionHeader.types.mjs";import Le from"./common/sectionHeader/sectionHeader.mjs";import{SkeletonAnimation as Re,SkeletonVariant as ze}from"./common/skeleton/skeleton.types.mjs";import Be from"./common/skeleton/skeleton.mjs";import Ve from"./common/slider/slider.mjs";import He from"./common/splitButton/splitButton.mjs";import{StepperAlignment as Ue,StepperCollapse as We,StepperLabelPlacement as Ge,StepperStyleType as Ke}from"./common/stepper/stepper.types.mjs";import qe from"./common/stepper/stepper.mjs";import Je from"./common/sticky/sticky.mjs";import Ye from"./common/switch/switch.mjs";import Xe from"./common/tabHeader/tabHeader.mjs";import Ze from"./common/textarea/textarea.mjs";import{defaultTheme as Qe}from"./common/themeProvider/defaultTheme.mjs";import $e from"./common/themeProvider/themeProvider.mjs";import{useTheme as et}from"./common/themeProvider/useTheme.mjs";import tt,{TiltGroupContext as nt,useTiltGroup as rt}from"./common/tiltGroup/tiltGroup.mjs";import{defaultTiltEasing as it}from"./common/tilt/tiltMath.mjs";import at from"./common/tilt/tilt.mjs";import ot from"./common/timeInput/timeInput.mjs";import{TimelineAlignment as st,TimelineItemStatus as ct}from"./common/timeline/timeline.types.mjs";import lt from"./common/timeline/timeline.mjs";import ut from"./common/virtualList/virtualList.mjs";import dt from"./common/wizard/wizard.mjs";import ft from"./services/formValidation/FormValidatorGroupWithForm.mjs";import pt from"./services/formValidation/validatableComponent.mjs";import{useFormValidatorGroup as mt}from"./services/formValidation/useFormValidatorGroup.mjs";import{FormValidator as ht,Validators as gt,useFormValidator as _t}from"./services/formValidation/index.mjs";import{hasEightPasswordChars as vt,hasOnePasswordDigit as yt,hasOnePasswordLetter as bt,isBic as xt,isDate as St,isEmail as Ct,isISODate as wt,isNumber as Tt,isPassword as Et,isURL as Dt}from"@ahrowe/form-validation";export{r as Accordion,e as AccordionStyleType,u as ActionButtons,f as ActionIcon,m as Alert,p as AlertStyleType,T as Align,h as AnimatedLogo,v as AnimatedText,g as AnimatedTextUnit,_ as AnimatedTextVariant,S as Avatar,C as AvatarGroup,x as Badge,y as BadgePosition,b as BadgeStyleType,w as BodyEnd,D as Breadcrumb,l as Button,k as ButtonGroup,O as ButtonGroupOrientation,a as ButtonSize,o as ButtonStyleType,s as ButtonType,j as Card,F as CardActions,P as CardContent,M as CardHeader,N as CardMedia,A as CardStyleType,I as Carousel,L as Checkbox,z as Chip,B as ChipContainer,R as ChipStyleType,G as ColorPicker,t as ConfigProvider,q as ConfirmModal,$ as DatePicker,ne as Divider,ee as DividerOrientation,te as DividerTextPosition,re as Drawer,oe as DropZone,ie as DropZoneReturnType,ae as DropZoneStatus,Q as Dropdown,se as EmptyState,ue as ErrorBoundary,de as Fab,fe as Flip,E as FloatingMenu,ht as FormValidator,ft as FormValidatorGroup,be as IconLoading,pe as IconPicker,me as IdleManager,Z as InfiniteBlock,W as Input,he as InputDropdown,H as InputIconPosition,U as InputType,d as InteractableDiv,_e as KanbanBoard,ge as KanbanColumn,ye as KlipyPicker,K as Modal,xe as NumberInput,Se as OptionPicker,Ce as Overscroll,De as Popover,we as PopoverAlign,Te as PopoverPlacement,Ee as PopoverTrigger,Oe as ProgressBar,Ae as RadioGroup,ke as RadioGroupOrientation,je as Rating,Me as RevealLens,c as Ripple,Ne as RoomDrawer,Pe as RoomViewer,Fe as ScrollbarProvider,ve as SearchInput,Le as SectionHeader,Ie as SectionHeaderSize,Be as Skeleton,Re as SkeletonAnimation,ze as SkeletonVariant,Ve as Slider,i as SpinnerLoading,He as SplitButton,qe as Stepper,Ue as StepperAlignment,We as StepperCollapse,Ge as StepperLabelPlacement,Ke as StepperStyleType,Je as Sticky,Ye as Switch,Xe as TabHeader,Ze as Textarea,$e as ThemeProvider,at as Tilt,tt as TiltGroup,nt as TiltGroupContext,ot as TimeInput,lt as Timeline,st as TimelineAlignment,ct as TimelineItemStatus,le as ToastProvider,V as Tooltip,pt as ValidatableComponent,gt as Validators,ut as VirtualList,dt as Wizard,Qe as defaultTheme,it as defaultTiltEasing,J as getLocale,vt as hasEightPasswordChars,yt as hasOnePasswordDigit,bt as hasOnePasswordLetter,xt as isBic,St as isDate,Ct as isEmail,wt as isISODate,Tt as isNumber,Et as isPassword,Dt as isURL,Y as mapLocale,X as setLocale,ce as showToast,n as useComponentDefaults,_t as useFormValidator,mt as useFormValidatorGroup,et as useTheme,rt as useTiltGroup};
|