@udixio/ui-react 2.9.14 → 2.9.15

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (43) hide show
  1. package/CHANGELOG.md +14 -0
  2. package/dist/index.cjs +3 -3
  3. package/dist/index.js +3866 -3744
  4. package/dist/lib/components/AnchorPositioner.d.ts +11 -0
  5. package/dist/lib/components/AnchorPositioner.d.ts.map +1 -0
  6. package/dist/lib/components/TextField.d.ts +1 -2
  7. package/dist/lib/components/TextField.d.ts.map +1 -1
  8. package/dist/lib/components/Tooltip.d.ts +1 -1
  9. package/dist/lib/components/Tooltip.d.ts.map +1 -1
  10. package/dist/lib/components/index.d.ts +1 -0
  11. package/dist/lib/components/index.d.ts.map +1 -1
  12. package/dist/lib/effects/smooth-scroll.effect.d.ts +14 -0
  13. package/dist/lib/effects/smooth-scroll.effect.d.ts.map +1 -1
  14. package/dist/lib/hooks/index.d.ts +0 -1
  15. package/dist/lib/hooks/index.d.ts.map +1 -1
  16. package/dist/lib/interfaces/text-field.interface.d.ts +1 -1
  17. package/dist/lib/interfaces/text-field.interface.d.ts.map +1 -1
  18. package/dist/lib/interfaces/tooltip.interface.d.ts +2 -0
  19. package/dist/lib/interfaces/tooltip.interface.d.ts.map +1 -1
  20. package/dist/lib/styles/card.style.d.ts +2 -2
  21. package/dist/lib/styles/checkbox.style.d.ts +2 -2
  22. package/dist/lib/styles/fab.style.d.ts +2 -2
  23. package/dist/lib/styles/navigation-rail-item.style.d.ts +2 -2
  24. package/dist/lib/styles/side-sheet.style.d.ts +2 -2
  25. package/dist/lib/styles/slider.style.d.ts +2 -2
  26. package/dist/lib/styles/tab.style.d.ts +2 -2
  27. package/dist/lib/styles/text-field.style.d.ts +4 -4
  28. package/dist/lib/styles/tooltip.style.d.ts +8 -4
  29. package/dist/lib/styles/tooltip.style.d.ts.map +1 -1
  30. package/package.json +3 -3
  31. package/src/lib/components/AnchorPositioner.tsx +132 -0
  32. package/src/lib/components/TextField.tsx +131 -19
  33. package/src/lib/components/Tooltip.tsx +13 -13
  34. package/src/lib/components/index.ts +1 -0
  35. package/src/lib/effects/smooth-scroll.effect.tsx +15 -1
  36. package/src/lib/hooks/index.ts +0 -1
  37. package/src/lib/interfaces/text-field.interface.ts +1 -1
  38. package/src/lib/interfaces/tooltip.interface.ts +2 -0
  39. package/src/lib/styles/date-picker.style.ts +1 -1
  40. package/src/lib/styles/side-sheet.style.ts +2 -2
  41. package/dist/lib/hooks/useTooltipPosition.d.ts +0 -22
  42. package/dist/lib/hooks/useTooltipPosition.d.ts.map +0 -1
  43. package/src/lib/hooks/useTooltipPosition.ts +0 -95
@@ -0,0 +1,11 @@
1
+ import { default as React, CSSProperties, RefObject } from 'react';
2
+ export type Position = 'top' | 'bottom' | 'left' | 'right' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
3
+ export interface AnchorPositionerProps {
4
+ anchorRef: RefObject<HTMLElement | null>;
5
+ position?: Position;
6
+ children: React.ReactNode;
7
+ style?: CSSProperties;
8
+ className?: string;
9
+ }
10
+ export declare const AnchorPositioner: ({ anchorRef, position, children, style, }: AnchorPositionerProps) => import("react/jsx-runtime").JSX.Element;
11
+ //# sourceMappingURL=AnchorPositioner.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"AnchorPositioner.d.ts","sourceRoot":"","sources":["../../../src/lib/components/AnchorPositioner.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EACZ,aAAa,EACb,SAAS,EAIV,MAAM,OAAO,CAAC;AAGf,MAAM,MAAM,QAAQ,GAChB,KAAK,GACL,QAAQ,GACR,MAAM,GACN,OAAO,GACP,UAAU,GACV,WAAW,GACX,aAAa,GACb,cAAc,CAAC;AAEnB,MAAM,WAAW,qBAAqB;IACpC,SAAS,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IACzC,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,gBAAgB,GAAI,2CAK9B,qBAAqB,4CAmGvB,CAAC"}
@@ -1,5 +1,4 @@
1
1
  import { ReactProps } from '../utils/component';
2
- import { TextFieldInterface } from '../interfaces/text-field.interface';
3
2
  /**
4
3
  * Text fields let users enter text into a UI
5
4
  * @status beta
@@ -10,5 +9,5 @@ import { TextFieldInterface } from '../interfaces/text-field.interface';
10
9
  * @a11y
11
10
  * - `aria-describedby` links supporting text/error to input.
12
11
  */
13
- export declare const TextField: ({ variant, disabled, errorText, placeholder, suffix, name, label, className, supportingText, trailingIcon, leadingIcon, type, multiline, autoComplete, onChange, value: valueProp, defaultValue, showSupportingText, id: idProp, style, ...restProps }: ReactProps<TextFieldInterface>) => import("react/jsx-runtime").JSX.Element;
12
+ export declare const TextField: ({ variant, disabled, errorText, placeholder, suffix, name, label, className, supportingText, trailingIcon, leadingIcon, type, multiline, autoComplete, onChange, value: valueProp, defaultValue, showSupportingText, id: idProp, style, ref, ...restProps }: ReactProps<TextFieldInterface>) => import("react/jsx-runtime").JSX.Element;
14
13
  //# sourceMappingURL=TextField.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"TextField.d.ts","sourceRoot":"","sources":["../../../src/lib/components/TextField.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAChD,OAAO,EAAE,kBAAkB,EAAE,MAAM,oCAAoC,CAAC;AAExE;;;;;;;;;GASG;AACH,eAAO,MAAM,SAAS,GAAI,wPAsBvB,UAAU,CAAC,kBAAkB,CAAC,4CA8NhC,CAAC"}
1
+ {"version":3,"file":"TextField.d.ts","sourceRoot":"","sources":["../../../src/lib/components/TextField.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAGhD;;;;;;;;;GASG;AACH,eAAO,MAAM,SAAS,GAAI,6PAuBvB,UAAU,CAAC,kBAAkB,CAAC,4CAwUhC,CAAC"}
@@ -10,5 +10,5 @@ import { ToolTipInterface } from '../interfaces';
10
10
  * @a11y
11
11
  * - Provides `role="tooltip"` and `aria-describedby` when open.
12
12
  */
13
- export declare const Tooltip: ({ variant, buttons, className, children, title, text, content, position: positionProp, targetRef, ref, trigger, transition, openDelay, closeDelay, isOpen: isOpenProp, defaultOpen, onOpenChange, id, ...props }: MotionProps<ToolTipInterface>) => import("react/jsx-runtime").JSX.Element;
13
+ export declare const Tooltip: ({ variant, buttons, className, children, title, text, content, position: positionProp, targetRef, ref, trigger, transition, openDelay, closeDelay, isOpen: isOpenProp, defaultOpen, onOpenChange, id, anchorRef, ...props }: MotionProps<ToolTipInterface>) => import("react/jsx-runtime").JSX.Element;
14
14
  //# sourceMappingURL=Tooltip.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Tooltip.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAEvC,OAAO,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAMjD;;;;;;;;;GASG;AACH,eAAO,MAAM,OAAO,GAAI,kNAoBrB,WAAW,CAAC,gBAAgB,CAAC,4CAiL/B,CAAC"}
1
+ {"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Tooltip.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAGvC,OAAO,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAKjD;;;;;;;;;GASG;AACH,eAAO,MAAM,OAAO,GAAI,6NAqBrB,WAAW,CAAC,gBAAgB,CAAC,4CAgL/B,CAAC"}
@@ -1,3 +1,4 @@
1
+ export * from './AnchorPositioner';
1
2
  export * from './Button';
2
3
  export * from './Card';
3
4
  export * from './Carousel';
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,OAAO,CAAC;AACtB,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,qBAAqB,CAAC;AACpC,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,OAAO,CAAC;AACtB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,sBAAsB,CAAC;AACrC,cAAc,kBAAkB,CAAC;AACjC,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAC;AACnC,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,OAAO,CAAC;AACtB,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,qBAAqB,CAAC;AACpC,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,OAAO,CAAC;AACtB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,sBAAsB,CAAC;AACrC,cAAc,kBAAkB,CAAC;AACjC,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC"}
@@ -33,6 +33,20 @@ export type SmoothScrollProps = {
33
33
  /**
34
34
  * SmoothScroll component using Lenis for smooth scrolling.
35
35
  * This component enables smooth scrolling at the document level.
36
+ *
37
+ * @warning **Use with caution.** Overriding native scroll behavior can cause:
38
+ * - **Accessibility issues**: Screen readers, keyboard navigation, and assistive technologies
39
+ * may not work correctly with custom scroll implementations.
40
+ * - **Anchor links broken**: `scrollIntoView()`, hash navigation (`#section`), and
41
+ * `window.scrollTo()` may behave unexpectedly or be ignored.
42
+ * - **Third-party library conflicts**: Libraries relying on native scroll events
43
+ * (infinite scroll, lazy loading, scroll-triggered animations) may malfunction.
44
+ * - **Browser features disabled**: Find-in-page (Ctrl+F), autoscroll, and native
45
+ * momentum scrolling on trackpads may not work as expected.
46
+ * - **Performance overhead**: The RAF loop runs continuously, which may impact
47
+ * battery life and performance on low-end devices.
48
+ * - **Mobile issues**: Touch gestures, pull-to-refresh, and overscroll behaviors
49
+ * can conflict with smooth scroll implementations.
36
50
  */
37
51
  export declare const SmoothScroll: ({ transition, easing, orientation, smoothTouch, touchMultiplier, children, }: SmoothScrollProps) => import("react/jsx-runtime").JSX.Element | null;
38
52
  //# sourceMappingURL=smooth-scroll.effect.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"smooth-scroll.effect.d.ts","sourceRoot":"","sources":["../../../src/lib/effects/smooth-scroll.effect.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAqB,SAAS,EAAE,MAAM,OAAO,CAAC;AAGrD,MAAM,MAAM,iBAAiB,GAAG;IAC9B;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC7B;;;OAGG;IACH,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,MAAM,CAAC;IAC/B;;;OAGG;IACH,WAAW,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;IACxC;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,YAAY,GAAI,8EAO1B,iBAAiB,mDAmDnB,CAAC"}
1
+ {"version":3,"file":"smooth-scroll.effect.d.ts","sourceRoot":"","sources":["../../../src/lib/effects/smooth-scroll.effect.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAqB,MAAM,OAAO,CAAC;AAGrD,MAAM,MAAM,iBAAiB,GAAG;IAC9B;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC7B;;;OAGG;IACH,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,MAAM,CAAC;IAC/B;;;OAGG;IACH,WAAW,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;IACxC;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,CAAC;AAEF;;;;;;;;;;;;;;;;;GAiBG;AACH,eAAO,MAAM,YAAY,GAAI,8EAO1B,iBAAiB,mDAmDnB,CAAC"}
@@ -1,5 +1,4 @@
1
1
  export { useTooltipTrigger } from './useTooltipTrigger';
2
2
  export type { UseTooltipTriggerOptions, UseTooltipTriggerReturn, } from './useTooltipTrigger';
3
- export { useTooltipPosition } from './useTooltipPosition';
4
3
  export type { UseTooltipPositionOptions, UseTooltipPositionReturn, } from './useTooltipPosition';
5
4
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/hooks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,YAAY,EACV,wBAAwB,EACxB,uBAAuB,GACxB,MAAM,qBAAqB,CAAC;AAE7B,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,YAAY,EACV,yBAAyB,EACzB,wBAAwB,GACzB,MAAM,sBAAsB,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/hooks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,YAAY,EACV,wBAAwB,EACxB,uBAAuB,GACxB,MAAM,qBAAqB,CAAC;AAE7B,YAAY,EACV,yBAAyB,EACzB,wBAAwB,GACzB,MAAM,sBAAsB,CAAC"}
@@ -19,7 +19,7 @@ type Props = {
19
19
  id?: string;
20
20
  style?: React.CSSProperties;
21
21
  variant?: TextFieldVariant;
22
- type?: 'text' | 'password' | 'number';
22
+ type?: 'text' | 'password' | 'number' | 'date';
23
23
  autoComplete?: 'on' | 'off' | string;
24
24
  multiline?: boolean;
25
25
  };
@@ -1 +1 @@
1
- {"version":3,"file":"text-field.interface.d.ts","sourceRoot":"","sources":["../../../src/lib/interfaces/text-field.interface.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AACtD,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAE/B,MAAM,MAAM,gBAAgB,GAAG,QAAQ,GAAG,UAAU,CAAC;AAErD,KAAK,KAAK,GAAG;IACX,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,YAAY,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,OAAO,UAAU,CAAC,GAAG,IAAI,CAAC;IAC5D,WAAW,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,OAAO,UAAU,CAAC,GAAG,IAAI,CAAC;IAC3D,QAAQ,CAAC,EAAE,KAAK,CAAC,kBAAkB,CAAC,gBAAgB,GAAG,mBAAmB,CAAC,CAAC;IAC5E,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,OAAO,CAAC,EAAE,gBAAgB,CAAC;IAC3B,IAAI,CAAC,EAAE,MAAM,GAAG,UAAU,GAAG,QAAQ,CAAC;IACtC,YAAY,CAAC,EAAE,IAAI,GAAG,KAAK,GAAG,MAAM,CAAC;IACrC,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AACF,MAAM,MAAM,eAAe,GAAG;IAC5B,SAAS,EAAE,OAAO,CAAC;IACnB,aAAa,EAAE,OAAO,CAAC;IACvB,kBAAkB,EAAE,OAAO,CAAC;CAC7B,CAAC;AAEF,MAAM,WAAW,kBAAkB;IACjC,IAAI,EAAE,KAAK,CAAC;IACZ,KAAK,EAAE,KAAK,CAAC;IACb,MAAM,EAAE,eAAe,CAAC;IACxB,QAAQ,EAAE;QACR,WAAW;QACX,SAAS;QACT,OAAO;QACP,OAAO;QACP,iBAAiB;QACjB,gBAAgB;QAChB,aAAa;QACb,cAAc;QACd,QAAQ;QACR,YAAY;KACb,CAAC;CACH"}
1
+ {"version":3,"file":"text-field.interface.d.ts","sourceRoot":"","sources":["../../../src/lib/interfaces/text-field.interface.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AACtD,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAE/B,MAAM,MAAM,gBAAgB,GAAG,QAAQ,GAAG,UAAU,CAAC;AAErD,KAAK,KAAK,GAAG;IACX,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,YAAY,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,OAAO,UAAU,CAAC,GAAG,IAAI,CAAC;IAC5D,WAAW,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,OAAO,UAAU,CAAC,GAAG,IAAI,CAAC;IAC3D,QAAQ,CAAC,EAAE,KAAK,CAAC,kBAAkB,CAAC,gBAAgB,GAAG,mBAAmB,CAAC,CAAC;IAC5E,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,OAAO,CAAC,EAAE,gBAAgB,CAAC;IAC3B,IAAI,CAAC,EAAE,MAAM,GAAG,UAAU,GAAG,QAAQ,GAAG,MAAM,CAAC;IAC/C,YAAY,CAAC,EAAE,IAAI,GAAG,KAAK,GAAG,MAAM,CAAC;IACrC,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AACF,MAAM,MAAM,eAAe,GAAG;IAC5B,SAAS,EAAE,OAAO,CAAC;IACnB,aAAa,EAAE,OAAO,CAAC;IACvB,kBAAkB,EAAE,OAAO,CAAC;CAC7B,CAAC;AAEF,MAAM,WAAW,kBAAkB;IACjC,IAAI,EAAE,KAAK,CAAC;IACZ,KAAK,EAAE,KAAK,CAAC;IACb,MAAM,EAAE,eAAe,CAAC;IACxB,QAAQ,EAAE;QACR,WAAW;QACX,SAAS;QACT,OAAO;QACP,OAAO;QACP,iBAAiB;QACjB,gBAAgB;QAChB,aAAa;QACb,cAAc;QACd,QAAQ;QACR,YAAY;KACb,CAAC;CACH"}
@@ -28,6 +28,8 @@ export type ToolTipInterface<T extends HTMLElement = any> = {
28
28
  onOpenChange?: (open: boolean) => void;
29
29
  /** Custom ID for accessibility linking. Auto-generated if not provided. */
30
30
  id?: string;
31
+ /** Custom anchor for positioning. Defaults to the trigger element. */
32
+ anchorRef?: RefObject<HTMLElement>;
31
33
  } & ({
32
34
  children?: never;
33
35
  targetRef: RefObject<T>;
@@ -1 +1 @@
1
- {"version":3,"file":"tooltip.interface.d.ts","sourceRoot":"","sources":["../../../src/lib/interfaces/tooltip.interface.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AACtC,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AACrD,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAC7C,OAAO,EAAE,UAAU,EAAE,MAAM,QAAQ,CAAC;AAEpC,KAAK,OAAO,GAAG,OAAO,GAAG,OAAO,GAAG,OAAO,GAAG,IAAI,CAAC;AAElD,MAAM,MAAM,gBAAgB,CAAC,CAAC,SAAS,WAAW,GAAG,GAAG,IAAI;IAC1D,IAAI,EAAE,KAAK,CAAC;IACZ,KAAK,EAAE;QACL,OAAO,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;QAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,2EAA2E;QAC3E,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,yEAAyE;QACzE,OAAO,CAAC,EAAE,SAAS,CAAC;QACpB,OAAO,CAAC,EAAE,UAAU,CAAC,eAAe,CAAC,GAAG,UAAU,CAAC,eAAe,CAAC,EAAE,CAAC;QACtE,QAAQ,CAAC,EACL,KAAK,GACL,QAAQ,GACR,MAAM,GACN,OAAO,GACP,UAAU,GACV,WAAW,GACX,aAAa,GACb,cAAc,CAAC;QACnB,OAAO,CAAC,EAAE,OAAO,GAAG,OAAO,EAAE,CAAC;QAC9B,UAAU,CAAC,EAAE,UAAU,CAAC;QACxB,uEAAuE;QACvE,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,sEAAsE;QACtE,UAAU,CAAC,EAAE,MAAM,CAAC;QACpB,sEAAsE;QACtE,MAAM,CAAC,EAAE,OAAO,CAAC;QACjB,4CAA4C;QAC5C,WAAW,CAAC,EAAE,OAAO,CAAC;QACtB,2CAA2C;QAC3C,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;QACvC,2EAA2E;QAC3E,EAAE,CAAC,EAAE,MAAM,CAAC;KACb,GAAG,CACA;QACE,QAAQ,CAAC,EAAE,KAAK,CAAC;QACjB,SAAS,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC;KACzB,GACD;QACE,QAAQ,EAAE,SAAS,CAAC;QACpB,SAAS,CAAC,EAAE,KAAK,CAAC;KACnB,CACJ,CAAC;IACF,QAAQ,EAAE;QACR,SAAS;QACT,WAAW;QACX,SAAS;QACT,gBAAgB;QAChB,SAAS;QACT,SAAS;KACV,CAAC;CACH,CAAC"}
1
+ {"version":3,"file":"tooltip.interface.d.ts","sourceRoot":"","sources":["../../../src/lib/interfaces/tooltip.interface.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AACtC,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AACrD,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAC7C,OAAO,EAAE,UAAU,EAAE,MAAM,QAAQ,CAAC;AAEpC,KAAK,OAAO,GAAG,OAAO,GAAG,OAAO,GAAG,OAAO,GAAG,IAAI,CAAC;AAElD,MAAM,MAAM,gBAAgB,CAAC,CAAC,SAAS,WAAW,GAAG,GAAG,IAAI;IAC1D,IAAI,EAAE,KAAK,CAAC;IACZ,KAAK,EAAE;QACL,OAAO,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;QAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,2EAA2E;QAC3E,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,yEAAyE;QACzE,OAAO,CAAC,EAAE,SAAS,CAAC;QACpB,OAAO,CAAC,EAAE,UAAU,CAAC,eAAe,CAAC,GAAG,UAAU,CAAC,eAAe,CAAC,EAAE,CAAC;QACtE,QAAQ,CAAC,EACL,KAAK,GACL,QAAQ,GACR,MAAM,GACN,OAAO,GACP,UAAU,GACV,WAAW,GACX,aAAa,GACb,cAAc,CAAC;QACnB,OAAO,CAAC,EAAE,OAAO,GAAG,OAAO,EAAE,CAAC;QAC9B,UAAU,CAAC,EAAE,UAAU,CAAC;QACxB,uEAAuE;QACvE,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,sEAAsE;QACtE,UAAU,CAAC,EAAE,MAAM,CAAC;QACpB,sEAAsE;QACtE,MAAM,CAAC,EAAE,OAAO,CAAC;QACjB,4CAA4C;QAC5C,WAAW,CAAC,EAAE,OAAO,CAAC;QACtB,2CAA2C;QAC3C,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;QACvC,2EAA2E;QAC3E,EAAE,CAAC,EAAE,MAAM,CAAC;QACZ,sEAAsE;QACtE,SAAS,CAAC,EAAE,SAAS,CAAC,WAAW,CAAC,CAAC;KACpC,GAAG,CACA;QACE,QAAQ,CAAC,EAAE,KAAK,CAAC;QACjB,SAAS,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC;KACzB,GACD;QACE,QAAQ,EAAE,SAAS,CAAC;QACpB,SAAS,CAAC,EAAE,KAAK,CAAC;KACnB,CACJ,CAAC;IACF,QAAQ,EAAE;QACR,SAAS;QACT,WAAW;QACX,SAAS;QACT,gBAAgB;QAChB,SAAS;QACT,SAAS;KACV,CAAC;CACH,CAAC"}
@@ -10,12 +10,12 @@ export declare const cardStyle: (states: {
10
10
  children: import('react').ReactNode;
11
11
  } & {
12
12
  className: string | ClassNameComponent<CardInterface> | undefined;
13
- }) => Record<"card" | "stateLayer", string>;
13
+ }) => Record<"stateLayer" | "card", string>;
14
14
  export declare const useCardStyle: (states: {
15
15
  variant?: "outlined" | "elevated" | "filled";
16
16
  interactive?: boolean;
17
17
  children: import('react').ReactNode;
18
18
  } & {
19
19
  className?: string | ClassNameComponent<CardInterface> | undefined;
20
- }) => Record<"card" | "stateLayer", string>;
20
+ }) => Record<"stateLayer" | "card", string>;
21
21
  //# sourceMappingURL=card.style.d.ts.map
@@ -26,7 +26,7 @@ export declare const checkboxStyle: (states: {
26
26
  className?: string;
27
27
  } & import('..').CheckboxStates & {
28
28
  className: string | ClassNameComponent<CheckboxInterface> | undefined;
29
- }) => Record<"box" | "container" | "input" | "icon" | "checkbox" | "stateLayer" | "ripple", string>;
29
+ }) => Record<"input" | "container" | "checkbox" | "icon" | "box" | "stateLayer" | "ripple", string>;
30
30
  export declare const useCheckboxStyle: (states: import('..').CheckboxStates & {
31
31
  checked?: boolean;
32
32
  defaultChecked?: boolean;
@@ -41,5 +41,5 @@ export declare const useCheckboxStyle: (states: import('..').CheckboxStates & {
41
41
  className?: string;
42
42
  } & {
43
43
  className?: string | ClassNameComponent<CheckboxInterface> | undefined;
44
- }) => Record<"box" | "container" | "input" | "icon" | "checkbox" | "stateLayer" | "ripple", string>;
44
+ }) => Record<"input" | "container" | "checkbox" | "icon" | "box" | "stateLayer" | "ripple", string>;
45
45
  //# sourceMappingURL=checkbox.style.d.ts.map
@@ -40,7 +40,7 @@ export declare const fabStyle: (states: ({
40
40
  href?: never;
41
41
  })) & {
42
42
  className: string | ClassNameComponent<FabInterface> | undefined;
43
- })) => Record<"label" | "icon" | "fab" | "stateLayer", string>;
43
+ })) => Record<"label" | "icon" | "stateLayer" | "fab", string>;
44
44
  export declare const useFabStyle: (states: (({
45
45
  variant?: import('..').FabVariant;
46
46
  label?: string;
@@ -63,5 +63,5 @@ export declare const useFabStyle: (states: (({
63
63
  href?: never;
64
64
  })) & {
65
65
  className?: string | ClassNameComponent<FabInterface> | undefined;
66
- }) => Record<"label" | "icon" | "fab" | "stateLayer", string>;
66
+ }) => Record<"label" | "icon" | "stateLayer" | "fab", string>;
67
67
  //# sourceMappingURL=fab.style.d.ts.map
@@ -38,7 +38,7 @@ export declare const navigationRailItemStyle: (states: (({
38
38
  isSelected: boolean;
39
39
  } & {
40
40
  className: string | ClassNameComponent<NavigationRailItemInterface> | undefined;
41
- }) => Record<"container" | "label" | "icon" | "stateLayer" | "navigationRailItem", string>;
41
+ }) => Record<"label" | "container" | "icon" | "stateLayer" | "navigationRailItem", string>;
42
42
  export declare const useNavigationRailItemStyle: (states: {
43
43
  isSelected: boolean;
44
44
  } & (((import('..').NavProps & {
@@ -47,5 +47,5 @@ export declare const useNavigationRailItemStyle: (states: {
47
47
  href?: never;
48
48
  })) & {
49
49
  className?: string | ClassNameComponent<NavigationRailItemInterface> | undefined;
50
- })) => Record<"container" | "label" | "icon" | "stateLayer" | "navigationRailItem", string>;
50
+ })) => Record<"label" | "container" | "icon" | "stateLayer" | "navigationRailItem", string>;
51
51
  //# sourceMappingURL=navigation-rail-item.style.d.ts.map
@@ -25,7 +25,7 @@ export declare const sideSheetStyle: (states: {
25
25
  isExtended: boolean;
26
26
  } & {
27
27
  className: string | ClassNameComponent<SideSheetInterface> | undefined;
28
- }) => Record<"container" | "content" | "header" | "title" | "overlay" | "divider" | "sideSheet" | "closeButton", string>;
28
+ }) => Record<"header" | "title" | "content" | "container" | "overlay" | "divider" | "sideSheet" | "closeButton", string>;
29
29
  export declare const useSideSheetStyle: (states: {
30
30
  isExtended: boolean;
31
31
  } & {
@@ -40,5 +40,5 @@ export declare const useSideSheetStyle: (states: {
40
40
  divider?: boolean;
41
41
  } & {
42
42
  className?: string | ClassNameComponent<SideSheetInterface> | undefined;
43
- }) => Record<"container" | "content" | "header" | "title" | "overlay" | "divider" | "sideSheet" | "closeButton", string>;
43
+ }) => Record<"header" | "title" | "content" | "container" | "overlay" | "divider" | "sideSheet" | "closeButton", string>;
44
44
  //# sourceMappingURL=side-sheet.style.d.ts.map
@@ -26,7 +26,7 @@ export declare const sliderStyle: (states: {
26
26
  isChanging: boolean;
27
27
  } & {
28
28
  className: string | ClassNameComponent<SliderInterface> | undefined;
29
- }) => Record<"slider" | "dot" | "activeTrack" | "handle" | "inactiveTrack" | "valueIndicator", string>;
29
+ }) => Record<"dot" | "slider" | "activeTrack" | "handle" | "inactiveTrack" | "valueIndicator", string>;
30
30
  export declare const useSliderStyle: (states: {
31
31
  isChanging: boolean;
32
32
  } & {
@@ -43,5 +43,5 @@ export declare const useSliderStyle: (states: {
43
43
  }[];
44
44
  } & {
45
45
  className?: string | ClassNameComponent<SliderInterface> | undefined;
46
- }) => Record<"slider" | "dot" | "activeTrack" | "handle" | "inactiveTrack" | "valueIndicator", string>;
46
+ }) => Record<"dot" | "slider" | "activeTrack" | "handle" | "inactiveTrack" | "valueIndicator", string>;
47
47
  //# sourceMappingURL=slider.style.d.ts.map
@@ -34,7 +34,7 @@ export declare const tabStyle: (states: (({
34
34
  isSelected: boolean;
35
35
  } & {
36
36
  className: string | ClassNameComponent<TabInterface> | undefined;
37
- }) => Record<"content" | "label" | "icon" | "tab" | "underline" | "stateLayer", string>;
37
+ }) => Record<"label" | "content" | "icon" | "underline" | "tab" | "stateLayer", string>;
38
38
  export declare const useTabStyle: (states: {
39
39
  isSelected: boolean;
40
40
  } & (((import('..').TabProps & {
@@ -43,5 +43,5 @@ export declare const useTabStyle: (states: {
43
43
  href?: never;
44
44
  })) & {
45
45
  className?: string | ClassNameComponent<TabInterface> | undefined;
46
- })) => Record<"content" | "label" | "icon" | "tab" | "underline" | "stateLayer", string>;
46
+ })) => Record<"label" | "content" | "icon" | "underline" | "tab" | "stateLayer", string>;
47
47
  //# sourceMappingURL=tab.style.d.ts.map
@@ -38,12 +38,12 @@ export declare const textFieldStyle: (states: {
38
38
  id?: string;
39
39
  style?: React.CSSProperties;
40
40
  variant?: import('..').TextFieldVariant;
41
- type?: "text" | "password" | "number";
41
+ type?: "text" | "password" | "number" | "date";
42
42
  autoComplete?: "on" | "off" | string;
43
43
  multiline?: boolean;
44
44
  } & import('..').TextFieldStates & {
45
45
  className: string | ClassNameComponent<TextFieldInterface> | undefined;
46
- }) => Record<"content" | "input" | "label" | "stateLayer" | "leadingIcon" | "trailingIcon" | "activeIndicator" | "supportingText" | "textField" | "suffix", string>;
46
+ }) => Record<"input" | "label" | "content" | "stateLayer" | "leadingIcon" | "trailingIcon" | "activeIndicator" | "supportingText" | "textField" | "suffix", string>;
47
47
  export declare const useTextFieldStyle: (states: import('..').TextFieldStates & {
48
48
  placeholder?: string;
49
49
  name?: string;
@@ -61,10 +61,10 @@ export declare const useTextFieldStyle: (states: import('..').TextFieldStates &
61
61
  id?: string;
62
62
  style?: React.CSSProperties;
63
63
  variant?: import('..').TextFieldVariant;
64
- type?: "text" | "password" | "number";
64
+ type?: "text" | "password" | "number" | "date";
65
65
  autoComplete?: "on" | "off" | string;
66
66
  multiline?: boolean;
67
67
  } & {
68
68
  className?: string | ClassNameComponent<TextFieldInterface> | undefined;
69
- }) => Record<"content" | "input" | "label" | "stateLayer" | "leadingIcon" | "trailingIcon" | "activeIndicator" | "supportingText" | "textField" | "suffix", string>;
69
+ }) => Record<"input" | "label" | "content" | "stateLayer" | "leadingIcon" | "trailingIcon" | "activeIndicator" | "supportingText" | "textField" | "suffix", string>;
70
70
  //# sourceMappingURL=text-field.style.d.ts.map
@@ -15,6 +15,7 @@ export declare const toolStyle: (states: ({
15
15
  defaultOpen: any;
16
16
  onOpenChange: any;
17
17
  id: any;
18
+ anchorRef: any;
18
19
  children: any;
19
20
  targetRef: any;
20
21
  } | {
@@ -32,6 +33,7 @@ export declare const toolStyle: (states: ({
32
33
  defaultOpen: any;
33
34
  onOpenChange: any;
34
35
  id: any;
36
+ anchorRef: any;
35
37
  children: any;
36
38
  targetRef: any;
37
39
  }) & (({
@@ -41,7 +43,7 @@ export declare const toolStyle: (states: ({
41
43
  content?: import('react').ReactNode;
42
44
  buttons?: import('..').ReactProps<import('..').ButtonInterface> | import('..').ReactProps<import('..').ButtonInterface>[];
43
45
  position?: "top" | "bottom" | "left" | "right" | "top-left" | "top-right" | "bottom-left" | "bottom-right";
44
- trigger?: ("hover" | "click" | "focus" | null) | ("hover" | "click" | "focus" | null)[];
46
+ trigger?: ("click" | "focus" | "hover" | null) | ("click" | "focus" | "hover" | null)[];
45
47
  transition?: import('motion').Transition;
46
48
  openDelay?: number;
47
49
  closeDelay?: number;
@@ -49,6 +51,7 @@ export declare const toolStyle: (states: ({
49
51
  defaultOpen?: boolean;
50
52
  onOpenChange?: (open: boolean) => void;
51
53
  id?: string;
54
+ anchorRef?: import('react').RefObject<HTMLElement>;
52
55
  } & ({
53
56
  children: import('react').ReactNode;
54
57
  targetRef?: never;
@@ -57,7 +60,7 @@ export declare const toolStyle: (states: ({
57
60
  targetRef: import('react').RefObject<any>;
58
61
  })) & {
59
62
  className: string | ClassNameComponent<ToolTipInterface> | undefined;
60
- })) => Record<"container" | "content" | "actions" | "supportingText" | "toolTip" | "subHead", string>;
63
+ })) => Record<"content" | "container" | "actions" | "supportingText" | "toolTip" | "subHead", string>;
61
64
  export declare const useToolTipStyle: (states: ({
62
65
  variant?: "plain" | "rich";
63
66
  title?: string;
@@ -65,7 +68,7 @@ export declare const useToolTipStyle: (states: ({
65
68
  content?: import('react').ReactNode;
66
69
  buttons?: import('..').ReactProps<import('..').ButtonInterface> | import('..').ReactProps<import('..').ButtonInterface>[];
67
70
  position?: "top" | "bottom" | "left" | "right" | "top-left" | "top-right" | "bottom-left" | "bottom-right";
68
- trigger?: ("hover" | "click" | "focus" | null) | ("hover" | "click" | "focus" | null)[];
71
+ trigger?: ("click" | "focus" | "hover" | null) | ("click" | "focus" | "hover" | null)[];
69
72
  transition?: import('motion').Transition;
70
73
  openDelay?: number;
71
74
  closeDelay?: number;
@@ -73,6 +76,7 @@ export declare const useToolTipStyle: (states: ({
73
76
  defaultOpen?: boolean;
74
77
  onOpenChange?: (open: boolean) => void;
75
78
  id?: string;
79
+ anchorRef?: import('react').RefObject<HTMLElement>;
76
80
  } & ({
77
81
  children: import('react').ReactNode;
78
82
  targetRef?: never;
@@ -81,5 +85,5 @@ export declare const useToolTipStyle: (states: ({
81
85
  targetRef: import('react').RefObject<any>;
82
86
  })) & {
83
87
  className?: string | ClassNameComponent<ToolTipInterface> | undefined;
84
- }) => Record<"container" | "content" | "actions" | "supportingText" | "toolTip" | "subHead", string>;
88
+ }) => Record<"content" | "container" | "actions" | "supportingText" | "toolTip" | "subHead", string>;
85
89
  //# sourceMappingURL=tooltip.style.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"tooltip.style.d.ts","sourceRoot":"","sources":["../../../src/lib/styles/tooltip.style.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,kBAAkB,EAIxB,MAAM,UAAU,CAAC;AAClB,OAAO,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAiCjD,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qGAGrB,CAAC;AAEF,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;oGAG3B,CAAC"}
1
+ {"version":3,"file":"tooltip.style.d.ts","sourceRoot":"","sources":["../../../src/lib/styles/tooltip.style.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,kBAAkB,EAIxB,MAAM,UAAU,CAAC;AAClB,OAAO,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAiCjD,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qGAGrB,CAAC;AAEF,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;oGAG3B,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@udixio/ui-react",
3
- "version": "2.9.14",
3
+ "version": "2.9.15",
4
4
  "type": "module",
5
5
  "main": "./dist/index.js",
6
6
  "module": "./dist/index.js",
@@ -37,8 +37,8 @@
37
37
  "devDependencies": {
38
38
  "react": "^19.1.1",
39
39
  "react-dom": "^19.1.1",
40
- "@udixio/theme": "2.1.13",
41
- "@udixio/tailwind": "2.4.13"
40
+ "@udixio/tailwind": "2.4.13",
41
+ "@udixio/theme": "2.1.13"
42
42
  },
43
43
  "repository": {
44
44
  "type": "git",
@@ -0,0 +1,132 @@
1
+ import React, {
2
+ CSSProperties,
3
+ RefObject,
4
+ useId,
5
+ useLayoutEffect,
6
+ useState,
7
+ } from 'react';
8
+ import { SyncedFixedWrapper } from '../effects';
9
+
10
+ export type Position =
11
+ | 'top'
12
+ | 'bottom'
13
+ | 'left'
14
+ | 'right'
15
+ | 'top-left'
16
+ | 'top-right'
17
+ | 'bottom-left'
18
+ | 'bottom-right';
19
+
20
+ export interface AnchorPositionerProps {
21
+ anchorRef: RefObject<HTMLElement | null>;
22
+ position?: Position;
23
+ children: React.ReactNode;
24
+ style?: CSSProperties;
25
+ className?: string; // Optional if we want to wrap in a class
26
+ }
27
+
28
+ export const AnchorPositioner = ({
29
+ anchorRef,
30
+ position = 'bottom',
31
+ children,
32
+ style,
33
+ }: AnchorPositionerProps) => {
34
+ const uniqueId = useId();
35
+ const anchorName = `--anchor-${uniqueId.replace(/:/g, '')}`;
36
+ const [supportsAnchor, setSupportsAnchor] = useState(false);
37
+
38
+ useLayoutEffect(() => {
39
+ if (typeof CSS !== 'undefined' && CSS.supports('anchor-name', '--a')) {
40
+ setSupportsAnchor(true);
41
+ }
42
+ }, []);
43
+
44
+ useLayoutEffect(() => {
45
+ if (supportsAnchor && anchorRef.current) {
46
+ const el = anchorRef.current;
47
+ // Apply anchor name to the reference element
48
+ (el.style as any).anchorName = anchorName;
49
+ return () => {
50
+ if (anchorRef.current) {
51
+ (anchorRef.current.style as any).anchorName = '';
52
+ }
53
+ };
54
+ }
55
+ }, [supportsAnchor, anchorRef, anchorName]);
56
+
57
+ if (supportsAnchor) {
58
+ const positionAreaMap: Record<Position, string> = {
59
+ top: 'top',
60
+ bottom: 'bottom',
61
+ left: 'left',
62
+ right: 'right',
63
+ 'top-left': 'top left',
64
+ 'top-right': 'top right',
65
+ 'bottom-left': 'bottom left',
66
+ 'bottom-right': 'bottom right',
67
+ };
68
+
69
+ const floatingStyles: CSSProperties = {
70
+ position: 'fixed',
71
+ margin: 0,
72
+ zIndex: 9999,
73
+ positionAnchor: anchorName,
74
+ positionArea: positionAreaMap[position],
75
+ positionTryFallbacks: 'flip-block, flip-inline',
76
+ ...style,
77
+ } as any;
78
+
79
+ return <div style={floatingStyles}>{children}</div>;
80
+ }
81
+
82
+ const fallbackStyles: CSSProperties = {
83
+ position: 'absolute',
84
+ pointerEvents: 'auto',
85
+ ...style,
86
+ };
87
+
88
+ switch (position) {
89
+ case 'top':
90
+ fallbackStyles.bottom = '100%';
91
+ fallbackStyles.left = '50%';
92
+ fallbackStyles.transform = 'translateX(-50%)';
93
+ break;
94
+ case 'top-left':
95
+ fallbackStyles.bottom = '100%';
96
+ fallbackStyles.left = 0;
97
+ break;
98
+ case 'top-right':
99
+ fallbackStyles.bottom = '100%';
100
+ fallbackStyles.right = 0;
101
+ break;
102
+ case 'bottom':
103
+ fallbackStyles.top = '100%';
104
+ fallbackStyles.left = '50%';
105
+ fallbackStyles.transform = 'translateX(-50%)';
106
+ break;
107
+ case 'bottom-left':
108
+ fallbackStyles.top = '100%';
109
+ fallbackStyles.left = 0;
110
+ break;
111
+ case 'bottom-right':
112
+ fallbackStyles.top = '100%';
113
+ fallbackStyles.right = 0;
114
+ break;
115
+ case 'left':
116
+ fallbackStyles.right = '100%';
117
+ fallbackStyles.top = '50%';
118
+ fallbackStyles.transform = 'translateY(-50%)';
119
+ break;
120
+ case 'right':
121
+ fallbackStyles.left = '100%';
122
+ fallbackStyles.top = '50%';
123
+ fallbackStyles.transform = 'translateY(-50%)';
124
+ break;
125
+ }
126
+
127
+ return (
128
+ <SyncedFixedWrapper targetRef={anchorRef}>
129
+ <div style={fallbackStyles}>{children}</div>
130
+ </SyncedFixedWrapper>
131
+ );
132
+ };