@design-factory/core 21.1.0-next.1 → 22.0.0-next.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (131) hide show
  1. package/{accordion-D9ba0XYq.js → accordion-B5RqDwi3.js} +76 -15
  2. package/alert-Db6cG6JE.js +125 -0
  3. package/{collapse-Bn8iHKrd.js → collapse-D8Jo56k9.js} +2 -2
  4. package/{common-DFyZvkII.js → common-CP4amR0Z.js} +2 -2
  5. package/components/accordion/accordion.d.ts +73 -15
  6. package/components/accordion/index.js +1 -1
  7. package/components/alert/alert.d.ts +77 -8
  8. package/components/alert/common.d.ts +9 -9
  9. package/components/alert/index.js +2 -3
  10. package/components/carousel/index.js +2 -2
  11. package/components/collapse/index.js +1 -1
  12. package/components/drawer/drawer.d.ts +6 -0
  13. package/components/drawer/index.js +1 -1
  14. package/components/dropdown/dropdown.d.ts +110 -0
  15. package/components/dropdown/index.d.ts +1 -0
  16. package/components/dropdown/index.js +5 -0
  17. package/components/modal/index.js +1 -1
  18. package/components/pagination/index.js +1 -1
  19. package/components/progressbar/index.js +1 -1
  20. package/components/rating/index.js +1 -1
  21. package/components/slider/index.js +1 -1
  22. package/components/slider/slider.d.ts +23 -4
  23. package/components/toast/index.js +1 -1
  24. package/components/tooltip/index.d.ts +1 -0
  25. package/components/tooltip/index.js +174 -0
  26. package/components/tooltip/tooltip.d.ts +63 -0
  27. package/components/tree/index.js +1 -1
  28. package/{directive-CNNSo5Yn.js → directive-CMT2vEDg.js} +7 -4
  29. package/{drawer-BIIfJa0F.js → drawer-CpGnS2ln.js} +12 -5
  30. package/dropdown-Bjj2ql6d.js +246 -0
  31. package/index.d.ts +3 -1
  32. package/index.js +44 -37
  33. package/isFocusable-C2iRr0zh.js +72 -0
  34. package/{modal-C13G13jV.js → modal-CQWh2Sm5.js} +4 -4
  35. package/package.json +1 -1
  36. package/{pagination-BQWusWXN.js → pagination-DIRcpdRE.js} +2 -2
  37. package/{progressbar-S1pNn5rM.js → progressbar-Bth8r3Qu.js} +2 -2
  38. package/{promise-D-RZVPuv.js → promise-CkIc0KKt.js} +3 -3
  39. package/{rating-DWgGgwk3.js → rating-DLsgFSyB.js} +2 -2
  40. package/{scrollbars-CcxSrnCx.js → scrollbars-ChGk75QR.js} +3 -0
  41. package/services/extendWidget.d.ts +1 -1
  42. package/services/focusElement.js +2 -2
  43. package/services/focustrack.js +2 -2
  44. package/services/matchMedia.js +1 -1
  45. package/services/mousetrack.d.ts +34 -0
  46. package/services/mousetrack.js +41 -0
  47. package/services/navManager.js +2 -2
  48. package/services/pointerdownPosition.js +1 -1
  49. package/services/portal.js +1 -1
  50. package/services/positioning.d.ts +101 -0
  51. package/services/positioning.js +104 -0
  52. package/services/resizeObserver.js +1 -1
  53. package/services/siblingsInert.js +1 -1
  54. package/services/transitions/baseTransitions.js +3 -3
  55. package/services/transitions/collapse.js +4 -7
  56. package/services/transitions/cssTransitions.js +2 -2
  57. package/services/transitions/simpleClassTransition.js +1 -1
  58. package/{slider-Br_Qiopx.js → slider-b9cVFNAL.js} +96 -58
  59. package/{toaster-BUBzFeJM.js → toaster-BS9qeRLF.js} +3 -3
  60. package/{tree-vD7ZkV8Z.js → tree-DW6iLxdw.js} +2 -2
  61. package/types.d.ts +8 -1
  62. package/utils/debounceSignal.d.ts +11 -0
  63. package/utils/debounceSignal.js +18 -0
  64. package/utils/directive.js +1 -1
  65. package/utils/edgeState.d.ts +23 -0
  66. package/utils/edgeState.js +43 -0
  67. package/utils/internal/isFocusable.d.ts +40 -0
  68. package/utils/stores.d.ts +1 -1
  69. package/utils/stores.js +4 -1
  70. package/utils/writables.d.ts +27 -13
  71. package/utils/writables.js +12 -11
  72. package/{writables-DYGjj5T3.js → writables-_7BriMb2.js} +37 -12
  73. package/accordion-B0vs8JWM.cjs +0 -314
  74. package/alert-AhaliJ17.cjs +0 -9
  75. package/alert-Cb9FhbFQ.js +0 -10
  76. package/collapse-BnWw4Hnc.cjs +0 -94
  77. package/common-B5jS-Ih_.cjs +0 -73
  78. package/components/accordion/index.cjs +0 -7
  79. package/components/alert/index.cjs +0 -5
  80. package/components/carousel/index.cjs +0 -292
  81. package/components/collapse/index.cjs +0 -5
  82. package/components/drawer/index.cjs +0 -5
  83. package/components/modal/index.cjs +0 -8
  84. package/components/pagination/index.cjs +0 -5
  85. package/components/progressbar/index.cjs +0 -5
  86. package/components/rating/index.cjs +0 -5
  87. package/components/slider/index.cjs +0 -5
  88. package/components/toast/index.cjs +0 -7
  89. package/components/tree/index.cjs +0 -5
  90. package/config.cjs +0 -36
  91. package/directive-DyTodNPd.cjs +0 -523
  92. package/drawer-C8ojtwIn.cjs +0 -328
  93. package/index.cjs +0 -134
  94. package/isFocusable-Ckwus82R.js +0 -32
  95. package/isFocusable-DfzDLeAN.cjs +0 -31
  96. package/modal-DWv0VqiG.cjs +0 -252
  97. package/pagination-BLVa1UsZ.cjs +0 -254
  98. package/progressbar-RopgvVeA.cjs +0 -86
  99. package/promise-CxCD3NYv.cjs +0 -118
  100. package/rating-DZ3OQgtt.cjs +0 -183
  101. package/scrollbars-CT87iv_6.cjs +0 -30
  102. package/services/extendWidget.cjs +0 -41
  103. package/services/floatingUI.cjs +0 -111
  104. package/services/floatingUI.d.ts +0 -76
  105. package/services/floatingUI.js +0 -111
  106. package/services/focusElement.cjs +0 -46
  107. package/services/focustrack.cjs +0 -47
  108. package/services/hash.cjs +0 -15
  109. package/services/intersection.cjs +0 -53
  110. package/services/matchMedia.cjs +0 -14
  111. package/services/navManager.cjs +0 -166
  112. package/services/pointerdownPosition.cjs +0 -60
  113. package/services/portal.cjs +0 -42
  114. package/services/resizeObserver.cjs +0 -54
  115. package/services/siblingsInert.cjs +0 -44
  116. package/services/transitions/baseTransitions.cjs +0 -186
  117. package/services/transitions/collapse.cjs +0 -40
  118. package/services/transitions/cssTransitions.cjs +0 -32
  119. package/services/transitions/simpleClassTransition.cjs +0 -37
  120. package/slider-pgDq1V5r.cjs +0 -807
  121. package/textDirection-zqcZ5-eK.cjs +0 -3
  122. package/toaster-Dlube4Ya.cjs +0 -161
  123. package/tree-Chcy4ulJ.cjs +0 -228
  124. package/types.cjs +0 -6
  125. package/utils/directive.cjs +0 -28
  126. package/utils/func.cjs +0 -7
  127. package/utils/id.cjs +0 -5
  128. package/utils/stores.cjs +0 -172
  129. package/utils/widget.cjs +0 -8
  130. package/utils/writables.cjs +0 -16
  131. package/writables-Dt68gADJ.cjs +0 -102
@@ -1,183 +0,0 @@
1
- "use strict";
2
- const tansu = require("@amadeus-it-group/tansu");
3
- const types = require("./types.cjs");
4
- const utils_directive = require("./directive-DyTodNPd.cjs");
5
- const utils_writables = require("./writables-Dt68gADJ.cjs");
6
- const utils_func = require("./utils/func.cjs");
7
- const utils_stores = require("./utils/stores.cjs");
8
- const utils_widget = require("./utils/widget.cjs");
9
- const defaultConfig = {
10
- rating: 0,
11
- tabindex: 0,
12
- maxRating: 10,
13
- disabled: false,
14
- readonly: false,
15
- resettable: true,
16
- ariaValueTextFn: (rating, maxRating) => `${rating} out of ${maxRating}`,
17
- onHover: utils_func.noop,
18
- onLeave: utils_func.noop,
19
- onRatingChange: utils_func.noop,
20
- className: "",
21
- ariaLabel: "Rating",
22
- ariaLabelledBy: ""
23
- };
24
- function getRatingDefaultConfig() {
25
- return { ...defaultConfig };
26
- }
27
- const configValidator = {
28
- rating: utils_writables.typeNumber,
29
- tabindex: utils_writables.typeNumber,
30
- maxRating: { normalizeValue: (value) => utils_writables.isNumber(value) ? Math.max(0, value) : types.INVALID_VALUE },
31
- disabled: utils_writables.typeBoolean,
32
- readonly: utils_writables.typeBoolean,
33
- resettable: utils_writables.typeBoolean,
34
- ariaValueTextFn: utils_writables.typeFunction,
35
- onHover: utils_writables.typeFunction,
36
- onLeave: utils_writables.typeFunction,
37
- onRatingChange: utils_writables.typeFunction,
38
- className: utils_writables.typeString,
39
- ariaLabel: utils_writables.typeString,
40
- ariaLabelledBy: utils_writables.typeString
41
- };
42
- const createRating = utils_widget.createWidgetFactory(
43
- "rating",
44
- (config) => {
45
- const [
46
- {
47
- // dirty inputs that need adjustment:
48
- rating$: _dirtyRating$,
49
- tabindex$: _dirtyTabindex$,
50
- ariaValueTextFn$,
51
- onHover$,
52
- onLeave$,
53
- onRatingChange$,
54
- ...stateProps
55
- },
56
- patch
57
- ] = utils_stores.writablesForProps(defaultConfig, config, configValidator);
58
- const { ariaLabel$, ariaLabelledBy$, className$, disabled$, maxRating$, readonly$, resettable$ } = stateProps;
59
- const tabindex$ = tansu.computed(() => disabled$() ? -1 : _dirtyTabindex$());
60
- const rating$ = utils_stores.bindableProp(_dirtyRating$, onRatingChange$, (dirtyRating) => utils_writables.clamp(dirtyRating, maxRating$(), 0));
61
- const _hoveredRating$ = tansu.writable(0);
62
- const interactive$ = tansu.computed(() => !disabled$() && !readonly$());
63
- const visibleRating$ = tansu.computed(() => {
64
- const hoveredRating = _hoveredRating$();
65
- return hoveredRating !== 0 ? hoveredRating : rating$();
66
- });
67
- const ariaValueText$ = tansu.computed(() => ariaValueTextFn$()(visibleRating$(), maxRating$()));
68
- const stars$ = tansu.computed(() => {
69
- const visibleRating = visibleRating$();
70
- return Array.from({ length: maxRating$() }, (_v, i) => ({
71
- fill: Math.round(Math.max(Math.min(visibleRating - i, 1), 0) * 100),
72
- index: i
73
- }));
74
- });
75
- const widget = {
76
- ...utils_stores.stateStores({
77
- ariaValueText$,
78
- interactive$,
79
- rating$,
80
- stars$,
81
- tabindex$,
82
- visibleRating$,
83
- ...stateProps
84
- }),
85
- patch,
86
- directives: {
87
- containerDirective: utils_directive.createAttributesDirective(() => ({
88
- events: {
89
- keydown: (event) => {
90
- if (interactive$()) {
91
- const { key } = event;
92
- switch (key) {
93
- case "ArrowLeft":
94
- case "ArrowDown":
95
- rating$.update((rating) => rating - 1);
96
- break;
97
- case "ArrowRight":
98
- case "ArrowUp":
99
- rating$.update((rating) => rating + 1);
100
- break;
101
- case "Home":
102
- case "PageDown":
103
- rating$.set(0);
104
- break;
105
- case "End":
106
- case "PageUp":
107
- rating$.set(maxRating$());
108
- break;
109
- default:
110
- return;
111
- }
112
- event.preventDefault();
113
- event.stopPropagation();
114
- }
115
- },
116
- mouseleave: () => {
117
- if (interactive$()) {
118
- widget.api.leave();
119
- }
120
- }
121
- },
122
- attributes: {
123
- role: tansu.readable("slider"),
124
- class: className$,
125
- "aria-valuemin": tansu.readable(0),
126
- tabindex: tabindex$,
127
- "aria-valuemax": maxRating$,
128
- "aria-valuenow": visibleRating$,
129
- "aria-valuetext": ariaValueText$,
130
- "aria-readonly": tansu.computed(() => readonly$() ? "true" : void 0),
131
- "aria-disabled": tansu.computed(() => disabled$() ? "true" : void 0),
132
- "aria-label": ariaLabel$,
133
- "aria-labelledby": tansu.computed(() => ariaLabelledBy$() || void 0)
134
- },
135
- classNames: {
136
- "au-rating": utils_stores.true$
137
- }
138
- })),
139
- starDirective: utils_directive.createAttributesDirective((starContext$) => {
140
- return {
141
- events: {
142
- mouseenter: () => {
143
- const index = starContext$().index + 1;
144
- if (interactive$() && index > 0 && index <= maxRating$()) {
145
- _hoveredRating$.set(index);
146
- onHover$()(index);
147
- }
148
- },
149
- click: () => {
150
- const index = starContext$().index + 1;
151
- if (interactive$() && index > 0 && index <= maxRating$()) {
152
- rating$.update((rating) => rating === index && resettable$() ? 0 : index);
153
- }
154
- }
155
- },
156
- styles: {
157
- cursor: tansu.computed(() => interactive$() ? "pointer" : "default")
158
- },
159
- classNames: {
160
- "au-rating-star": utils_stores.true$
161
- }
162
- };
163
- })
164
- },
165
- api: {
166
- setRating(index) {
167
- rating$.set(index);
168
- },
169
- setHoveredRating(index) {
170
- onHover$()(index);
171
- _hoveredRating$.set(index);
172
- },
173
- leave() {
174
- onLeave$()(visibleRating$());
175
- _hoveredRating$.set(0);
176
- }
177
- }
178
- };
179
- return widget;
180
- }
181
- );
182
- exports.createRating = createRating;
183
- exports.getRatingDefaultConfig = getRatingDefaultConfig;
@@ -1,30 +0,0 @@
1
- "use strict";
2
- const utils_func = require("./utils/func.cjs");
3
- const internalRemoveScrollbars = () => {
4
- const scrollbarWidth = Math.abs(window.innerWidth - document.documentElement.clientWidth);
5
- const body = document.body;
6
- const bodyStyle = body.style;
7
- const { overflow, paddingRight } = bodyStyle;
8
- if (scrollbarWidth > 0) {
9
- const actualPadding = parseFloat(window.getComputedStyle(body).paddingRight);
10
- bodyStyle.paddingRight = `${actualPadding + scrollbarWidth}px`;
11
- }
12
- bodyStyle.overflow = "hidden";
13
- return () => {
14
- if (scrollbarWidth > 0) {
15
- bodyStyle.paddingRight = paddingRight;
16
- }
17
- bodyStyle.overflow = overflow;
18
- };
19
- };
20
- let internalRevert = utils_func.noop;
21
- const removeScrollbars = () => {
22
- internalRevert();
23
- internalRevert = internalRemoveScrollbars();
24
- };
25
- const revertScrollbars = () => {
26
- internalRevert();
27
- internalRevert = utils_func.noop;
28
- };
29
- exports.removeScrollbars = removeScrollbars;
30
- exports.revertScrollbars = revertScrollbars;
@@ -1,41 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
- const tansu = require("@amadeus-it-group/tansu");
4
- const utils_stores = require("../utils/stores.cjs");
5
- const types = require("../types.cjs");
6
- const extendWidgetProps = (factory, extraPropsDefaults, extraPropsConfig, overrideDefaults) => {
7
- const extendedFactory = (propsConfig) => {
8
- const extraPropsWritables = utils_stores.writablesWithDefault(
9
- extraPropsDefaults,
10
- propsConfig,
11
- extraPropsConfig
12
- );
13
- const propsConfigConfig = propsConfig?.config;
14
- const config = utils_stores.isStore(propsConfigConfig) ? tansu.computed(() => ({ ...overrideDefaults, ...propsConfigConfig() })) : { ...overrideDefaults, ...propsConfigConfig ?? {} };
15
- const widget = factory({ props: propsConfig?.props, config });
16
- return {
17
- ...widget,
18
- ...utils_stores.stateStores({ ...widget.stores, ...extraPropsWritables }),
19
- patch: (storesValues) => tansu.batch(() => {
20
- let widgetProps;
21
- for (const [name, value] of Object.entries(storesValues ?? {})) {
22
- const extraPropsStore = extraPropsWritables[`${name}$`];
23
- if (extraPropsStore) {
24
- extraPropsStore.set(value);
25
- } else {
26
- if (!widgetProps) {
27
- widgetProps = {};
28
- }
29
- widgetProps[name] = value;
30
- }
31
- }
32
- if (widgetProps) {
33
- widget.patch(widgetProps);
34
- }
35
- })
36
- };
37
- };
38
- extendedFactory[types.FACTORY_WIDGET_NAME] = factory[types.FACTORY_WIDGET_NAME];
39
- return extendedFactory;
40
- };
41
- exports.extendWidgetProps = extendWidgetProps;
@@ -1,111 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
- const tansu = require("@amadeus-it-group/tansu");
4
- const dom = require("@floating-ui/dom");
5
- const utils_directive = require("../directive-DyTodNPd.cjs");
6
- const promise = require("../promise-CxCD3NYv.cjs");
7
- const utils_stores = require("../utils/stores.cjs");
8
- const defaultConfig = {
9
- computePositionOptions: {},
10
- autoUpdateOptions: {},
11
- arrowOptions: {}
12
- };
13
- const createFloatingUI = (propsConfig) => {
14
- const [
15
- { autoUpdateOptions$, computePositionOptions$: computePositionInputOptions$, arrowOptions$: arrowInputOptions$ },
16
- patch
17
- ] = utils_stores.writablesForProps(defaultConfig, propsConfig);
18
- const { directive: floatingDirective, element$: floatingElement$ } = utils_directive.createBrowserStoreDirective();
19
- const { directive: referenceDirective, element$: referenceElement$ } = utils_directive.createBrowserStoreDirective();
20
- const { directive: arrowDirective, element$: arrowElement$ } = utils_directive.createBrowserStoreDirective();
21
- const arrowOptions$ = tansu.computed(() => {
22
- const arrowElement = arrowElement$();
23
- if (!arrowElement) {
24
- return null;
25
- }
26
- const arrowInputOptions = arrowInputOptions$();
27
- return typeof arrowInputOptions === "function" ? (state) => ({ ...arrowInputOptions(state), element: arrowElement }) : { ...arrowInputOptions, element: arrowElement };
28
- });
29
- const computePositionOptions$ = tansu.computed(() => {
30
- let options = computePositionInputOptions$();
31
- const arrowOptions = arrowOptions$();
32
- if (arrowOptions) {
33
- options = {
34
- ...options,
35
- middleware: [...options.middleware ?? [], dom.arrow(arrowOptions)]
36
- };
37
- }
38
- return options;
39
- });
40
- const promisePosition$ = tansu.derived(
41
- [floatingElement$, referenceElement$, computePositionOptions$, autoUpdateOptions$],
42
- ([floatingElement, referenceElement, computePositionOptions, autoUpdateOptions], set) => {
43
- if (floatingElement && referenceElement) {
44
- const clean = dom.autoUpdate(
45
- referenceElement,
46
- floatingElement,
47
- () => {
48
- set(dom.computePosition(referenceElement, floatingElement, computePositionOptions));
49
- },
50
- autoUpdateOptions
51
- );
52
- return () => {
53
- set(null);
54
- clean();
55
- };
56
- }
57
- return void 0;
58
- },
59
- null
60
- );
61
- const position$ = promise.promiseStoreToValueStore(promisePosition$, null);
62
- const placement$ = tansu.computed(() => position$()?.placement);
63
- const middlewareData$ = tansu.computed(() => position$()?.middlewareData);
64
- const x$ = tansu.computed(() => position$()?.x);
65
- const y$ = tansu.computed(() => position$()?.y);
66
- const strategy$ = tansu.computed(() => position$()?.strategy);
67
- const arrowX$ = tansu.computed(() => middlewareData$()?.arrow?.x);
68
- const arrowY$ = tansu.computed(() => middlewareData$()?.arrow?.y);
69
- const floatingStyleApplyAction$ = tansu.computed(() => {
70
- const floatingElement = floatingElement$();
71
- if (floatingElement) {
72
- floatingElement.style.left = `${x$() ?? 0}px`;
73
- floatingElement.style.top = `${y$() ?? 0}px`;
74
- }
75
- });
76
- const arrowStyleApplyAction$ = tansu.computed(() => {
77
- const arrowElement = arrowElement$();
78
- if (arrowElement) {
79
- const arrowX = arrowX$();
80
- const arrowY = arrowY$();
81
- arrowElement.style.left = arrowX != null ? `${arrowX}px` : "";
82
- arrowElement.style.top = arrowY != null ? `${arrowY}px` : "";
83
- }
84
- });
85
- return {
86
- patch,
87
- ...utils_stores.stateStores({
88
- x$,
89
- y$,
90
- strategy$,
91
- placement$,
92
- middlewareData$
93
- }),
94
- directives: {
95
- /**
96
- * Directive to be used on the reference element from where the floating element will be positioned
97
- */
98
- referenceDirective,
99
- /**
100
- * Directive to be used on the floating element
101
- */
102
- floatingDirective: utils_directive.mergeDirectives(floatingDirective, utils_directive.directiveSubscribe(floatingStyleApplyAction$)),
103
- /**
104
- * Directive to be used on the arrow element, if any
105
- */
106
- arrowDirective: utils_directive.mergeDirectives(arrowDirective, utils_directive.directiveSubscribe(arrowStyleApplyAction$))
107
- },
108
- api: {}
109
- };
110
- };
111
- exports.createFloatingUI = createFloatingUI;
@@ -1,76 +0,0 @@
1
- import type { ArrowOptions, AutoUpdateOptions, ComputePositionConfig, Derivable, MiddlewareData, Placement, Strategy } from '@floating-ui/dom';
2
- import type { Directive, PropsConfig, SSRHTMLElement, Widget } from '../types';
3
- /**
4
- * Interface representing the properties for configuring Floating UI.
5
- */
6
- export interface FloatingUIProps {
7
- /**
8
- * Options to use when calling computePosition from Floating UI
9
- */
10
- computePositionOptions: ComputePositionConfig;
11
- /**
12
- * Options to use when calling autoUpdate from Floating UI
13
- */
14
- autoUpdateOptions: AutoUpdateOptions;
15
- /**
16
- * Options to use when calling the arrow middleware from Floating UI
17
- */
18
- arrowOptions: Omit<ArrowOptions, 'element'> | Derivable<Omit<ArrowOptions, 'element'>>;
19
- }
20
- /**
21
- * Represents the state of a floating UI element.
22
- */
23
- export interface FloatingUIState {
24
- /**
25
- * The x coordinate of the floating ui
26
- */
27
- x: number | undefined;
28
- /**
29
- * The y coordinate of the floating ui
30
- */
31
- y: number | undefined;
32
- /**
33
- * The strategy used to position the floating element
34
- */
35
- strategy: Strategy | undefined;
36
- /**
37
- * The final chosen placement of the floating element
38
- */
39
- placement: Placement | undefined;
40
- /**
41
- * Object containing data returned from all middleware, keyed by their name
42
- */
43
- middlewareData: MiddlewareData | undefined;
44
- }
45
- /**
46
- * Interface representing the directives used to enable floating ui.
47
- */
48
- export interface FloatingUIDirectives {
49
- /**
50
- * Directive to attach to the reference element
51
- */
52
- referenceDirective: Directive<void, SSRHTMLElement>;
53
- /**
54
- * Directive to attach to the floating element
55
- */
56
- floatingDirective: Directive<void, SSRHTMLElement>;
57
- /**
58
- * Directive to attach to the arrow element
59
- */
60
- arrowDirective: Directive<void, SSRHTMLElement>;
61
- }
62
- /**
63
- * Represents the type returned by the `createFloatingUI` function.
64
- *
65
- * This type is used to define the structure and behavior of the Floating UI component.
66
- */
67
- export type FloatingUI = Widget<FloatingUIProps, FloatingUIState, object, FloatingUIDirectives>;
68
- /**
69
- * Create a floating UI service.
70
- *
71
- * The returned service includes the patch method to patch the states, the stores to track the states and directives to apply.
72
- *
73
- * @param propsConfig - the props config for the floating UI service
74
- * @returns the floating UI service
75
- */
76
- export declare const createFloatingUI: (propsConfig?: PropsConfig<FloatingUIProps>) => FloatingUI;
@@ -1,111 +0,0 @@
1
- import { computed, derived } from "@amadeus-it-group/tansu";
2
- import { arrow, autoUpdate, computePosition } from "@floating-ui/dom";
3
- import { i as createBrowserStoreDirective, s as mergeDirectives, o as directiveSubscribe } from "../directive-CNNSo5Yn.js";
4
- import { a as promiseStoreToValueStore } from "../promise-D-RZVPuv.js";
5
- import { writablesForProps, stateStores } from "../utils/stores.js";
6
- const defaultConfig = {
7
- computePositionOptions: {},
8
- autoUpdateOptions: {},
9
- arrowOptions: {}
10
- };
11
- const createFloatingUI = (propsConfig) => {
12
- const [
13
- { autoUpdateOptions$, computePositionOptions$: computePositionInputOptions$, arrowOptions$: arrowInputOptions$ },
14
- patch
15
- ] = writablesForProps(defaultConfig, propsConfig);
16
- const { directive: floatingDirective, element$: floatingElement$ } = createBrowserStoreDirective();
17
- const { directive: referenceDirective, element$: referenceElement$ } = createBrowserStoreDirective();
18
- const { directive: arrowDirective, element$: arrowElement$ } = createBrowserStoreDirective();
19
- const arrowOptions$ = computed(() => {
20
- const arrowElement = arrowElement$();
21
- if (!arrowElement) {
22
- return null;
23
- }
24
- const arrowInputOptions = arrowInputOptions$();
25
- return typeof arrowInputOptions === "function" ? (state) => ({ ...arrowInputOptions(state), element: arrowElement }) : { ...arrowInputOptions, element: arrowElement };
26
- });
27
- const computePositionOptions$ = computed(() => {
28
- let options = computePositionInputOptions$();
29
- const arrowOptions = arrowOptions$();
30
- if (arrowOptions) {
31
- options = {
32
- ...options,
33
- middleware: [...options.middleware ?? [], arrow(arrowOptions)]
34
- };
35
- }
36
- return options;
37
- });
38
- const promisePosition$ = derived(
39
- [floatingElement$, referenceElement$, computePositionOptions$, autoUpdateOptions$],
40
- ([floatingElement, referenceElement, computePositionOptions, autoUpdateOptions], set) => {
41
- if (floatingElement && referenceElement) {
42
- const clean = autoUpdate(
43
- referenceElement,
44
- floatingElement,
45
- () => {
46
- set(computePosition(referenceElement, floatingElement, computePositionOptions));
47
- },
48
- autoUpdateOptions
49
- );
50
- return () => {
51
- set(null);
52
- clean();
53
- };
54
- }
55
- return void 0;
56
- },
57
- null
58
- );
59
- const position$ = promiseStoreToValueStore(promisePosition$, null);
60
- const placement$ = computed(() => position$()?.placement);
61
- const middlewareData$ = computed(() => position$()?.middlewareData);
62
- const x$ = computed(() => position$()?.x);
63
- const y$ = computed(() => position$()?.y);
64
- const strategy$ = computed(() => position$()?.strategy);
65
- const arrowX$ = computed(() => middlewareData$()?.arrow?.x);
66
- const arrowY$ = computed(() => middlewareData$()?.arrow?.y);
67
- const floatingStyleApplyAction$ = computed(() => {
68
- const floatingElement = floatingElement$();
69
- if (floatingElement) {
70
- floatingElement.style.left = `${x$() ?? 0}px`;
71
- floatingElement.style.top = `${y$() ?? 0}px`;
72
- }
73
- });
74
- const arrowStyleApplyAction$ = computed(() => {
75
- const arrowElement = arrowElement$();
76
- if (arrowElement) {
77
- const arrowX = arrowX$();
78
- const arrowY = arrowY$();
79
- arrowElement.style.left = arrowX != null ? `${arrowX}px` : "";
80
- arrowElement.style.top = arrowY != null ? `${arrowY}px` : "";
81
- }
82
- });
83
- return {
84
- patch,
85
- ...stateStores({
86
- x$,
87
- y$,
88
- strategy$,
89
- placement$,
90
- middlewareData$
91
- }),
92
- directives: {
93
- /**
94
- * Directive to be used on the reference element from where the floating element will be positioned
95
- */
96
- referenceDirective,
97
- /**
98
- * Directive to be used on the floating element
99
- */
100
- floatingDirective: mergeDirectives(floatingDirective, directiveSubscribe(floatingStyleApplyAction$)),
101
- /**
102
- * Directive to be used on the arrow element, if any
103
- */
104
- arrowDirective: mergeDirectives(arrowDirective, directiveSubscribe(arrowStyleApplyAction$))
105
- },
106
- api: {}
107
- };
108
- };
109
- export {
110
- createFloatingUI
111
- };
@@ -1,46 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
- const utils_directive = require("../directive-DyTodNPd.cjs");
4
- const isFocusable = require("../isFocusable-DfzDLeAN.cjs");
5
- const stack = [];
6
- let stackProcessPlanned = false;
7
- const processStack = () => {
8
- stackProcessPlanned = false;
9
- const candidates = [];
10
- while (stack.length > 0) {
11
- const top = stack[stack.length - 1];
12
- if (top.element) {
13
- candidates.push(top.element);
14
- break;
15
- } else {
16
- if (top.previousElement) {
17
- candidates.push(top.previousElement);
18
- }
19
- stack.pop();
20
- }
21
- }
22
- for (const candidate of candidates) {
23
- if (isFocusable.isFocusable(candidate)) {
24
- candidate.focus();
25
- return;
26
- }
27
- }
28
- };
29
- const planProcessStack = () => {
30
- if (!stackProcessPlanned) {
31
- stackProcessPlanned = true;
32
- setTimeout(processStack, 0);
33
- }
34
- };
35
- const focusElement = utils_directive.browserDirective((element) => {
36
- const stackEntry = { element, previousElement: document.activeElement };
37
- stack.push(stackEntry);
38
- planProcessStack();
39
- return {
40
- destroy() {
41
- stackEntry.element = null;
42
- planProcessStack();
43
- }
44
- };
45
- });
46
- exports.focusElement = focusElement;
@@ -1,47 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
- const tansu = require("@amadeus-it-group/tansu");
4
- const utils_directive = require("../directive-DyTodNPd.cjs");
5
- const esmEnv = require("esm-env");
6
- const evtFocusIn = "focusin";
7
- const evtFocusOut = "focusout";
8
- const activeElement$ = !esmEnv.BROWSER ? tansu.readable(null) : tansu.readable(null, {
9
- onUse({ set }) {
10
- function setActiveElement() {
11
- set(document.activeElement);
12
- }
13
- setActiveElement();
14
- const container = document.documentElement;
15
- function onFocusOut() {
16
- setTimeout(setActiveElement);
17
- }
18
- container.addEventListener(evtFocusIn, setActiveElement, { capture: true });
19
- container.addEventListener(evtFocusOut, onFocusOut, { capture: true });
20
- return () => {
21
- container.removeEventListener(evtFocusIn, setActiveElement, { capture: true });
22
- container.removeEventListener(evtFocusOut, onFocusOut, { capture: true });
23
- };
24
- },
25
- equal: Object.is
26
- });
27
- function createHasFocus() {
28
- const { elements$, directive } = utils_directive.createBrowserStoreArrayDirective();
29
- const hasFocus$ = tansu.computed(() => {
30
- const activeElement = activeElement$();
31
- if (!activeElement) {
32
- return false;
33
- }
34
- for (const element of elements$()) {
35
- if (element === activeElement || element.contains(activeElement)) {
36
- return true;
37
- }
38
- }
39
- return false;
40
- });
41
- return {
42
- directive,
43
- hasFocus$
44
- };
45
- }
46
- exports.activeElement$ = activeElement$;
47
- exports.createHasFocus = createHasFocus;
package/services/hash.cjs DELETED
@@ -1,15 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
- const tansu = require("@amadeus-it-group/tansu");
4
- const hash$ = tansu.readable("", {
5
- onUse({ set }) {
6
- function handleHashChange() {
7
- const hash = location.hash;
8
- set(hash ? hash.substring(1) : "");
9
- }
10
- handleHashChange();
11
- window.addEventListener("hashchange", handleHashChange);
12
- return () => window.removeEventListener("hashchange", handleHashChange);
13
- }
14
- });
15
- exports.hash$ = hash$;