@lumx/core 3.21.1 → 3.21.2-alpha.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 (142) hide show
  1. package/CONTRIBUTING.md +1 -5
  2. package/{js/utils/className/resolveColorWithVariants.js → _internal/DPnPEC08.js} +1 -5
  3. package/js/constants/_internal/design-tokens.d.ts +5421 -0
  4. package/js/constants/className/index.d.ts +4 -0
  5. package/js/constants/className/index.js +6 -0
  6. package/js/constants/components/index.d.ts +24 -0
  7. package/js/constants/components/index.js +26 -0
  8. package/js/constants/enums/index.d.ts +200 -0
  9. package/js/constants/enums/index.js +155 -0
  10. package/js/constants/index.d.ts +4 -0
  11. package/js/constants/index.js +4 -218
  12. package/js/constants/keycodes/index.d.ts +36 -0
  13. package/js/constants/{keycodes.js → keycodes/index.js} +1 -13
  14. package/js/types/Direction.d.ts +1 -0
  15. package/js/types/{GenericProps.ts → GenericProps.d.ts} +0 -1
  16. package/js/types/HasAriaLabelOrLabelledBy.d.ts +17 -0
  17. package/js/types/{HasTheme.ts → HasTheme.d.ts} +0 -1
  18. package/js/types/KebabCase.d.ts +2 -0
  19. package/js/types/LumxClassName.d.ts +3 -0
  20. package/js/types/Point.d.ts +7 -0
  21. package/js/types/RectSize.d.ts +7 -0
  22. package/js/types/Spacing.d.ts +1 -0
  23. package/js/types/{TextElement.ts → TextElement.d.ts} +0 -1
  24. package/js/types/{index.ts → index.d.ts} +3 -0
  25. package/js/types/index.js +0 -1
  26. package/js/utils/_internal/className/getBasicClass.d.ts +13 -0
  27. package/js/utils/_internal/className/handleBasicClasses.d.ts +15 -0
  28. package/js/utils/_internal/className/index.d.ts +2 -0
  29. package/js/utils/_internal/color/index.d.ts +1 -0
  30. package/js/utils/_internal/color/resolveColorWithVariants.d.ts +3 -0
  31. package/js/utils/classNames/color/index.d.ts +43 -0
  32. package/js/utils/classNames/color/index.js +50 -0
  33. package/js/utils/classNames/index.d.ts +5 -0
  34. package/js/utils/classNames/index.js +5 -0
  35. package/js/utils/classNames/spacing/index.d.ts +70 -0
  36. package/js/utils/classNames/spacing/index.js +74 -0
  37. package/js/utils/classNames/typography/index.d.ts +6 -0
  38. package/js/utils/classNames/typography/index.js +9 -0
  39. package/js/utils/classNames/visually-hidden/index.d.ts +5 -0
  40. package/js/utils/classNames/visually-hidden/index.js +10 -0
  41. package/js/utils/events/index.d.ts +2 -0
  42. package/js/utils/events/index.js +2 -0
  43. package/js/utils/events/keyboard.d.ts +24 -0
  44. package/js/utils/events/keyboard.js +44 -0
  45. package/js/utils/events/swipe.d.ts +6 -0
  46. package/js/utils/events/swipe.js +79 -0
  47. package/js/utils/index.d.ts +2 -0
  48. package/js/utils/index.js +4 -223
  49. package/lumx.css +7 -6
  50. package/package.json +11 -11
  51. package/scss/components/list/_index.scss +10 -4
  52. package/js/constants/design-tokens.js +0 -2329
  53. package/js/constants/design-tokens.min.js +0 -1
  54. package/js/constants/design-tokens.ts +0 -2324
  55. package/js/constants/index.min.js +0 -1
  56. package/js/constants/index.ts +0 -231
  57. package/js/constants/keycodes.min.js +0 -1
  58. package/js/constants/keycodes.ts +0 -44
  59. package/js/custom-colors.js +0 -48
  60. package/js/custom-colors.min.js +0 -1
  61. package/js/custom-colors.ts +0 -56
  62. package/js/date-picker.js +0 -71
  63. package/js/date-picker.min.js +0 -1
  64. package/js/date-picker.ts +0 -77
  65. package/js/types/Callback.js +0 -2
  66. package/js/types/Callback.min.js +0 -1
  67. package/js/types/Falsy.js +0 -2
  68. package/js/types/Falsy.min.js +0 -1
  69. package/js/types/GenericProps.js +0 -2
  70. package/js/types/GenericProps.min.js +0 -1
  71. package/js/types/HasAriaLabelOrLabelledBy.js +0 -2
  72. package/js/types/HasAriaLabelOrLabelledBy.min.js +0 -1
  73. package/js/types/HasAriaLabelOrLabelledBy.ts +0 -19
  74. package/js/types/HasClassName.js +0 -2
  75. package/js/types/HasClassName.min.js +0 -1
  76. package/js/types/HasCloseMode.js +0 -2
  77. package/js/types/HasCloseMode.min.js +0 -1
  78. package/js/types/HasTheme.js +0 -2
  79. package/js/types/HasTheme.min.js +0 -1
  80. package/js/types/HeadingElement.js +0 -2
  81. package/js/types/HeadingElement.min.js +0 -1
  82. package/js/types/Point.js +0 -2
  83. package/js/types/Point.min.js +0 -1
  84. package/js/types/Point.ts +0 -4
  85. package/js/types/Predicate.js +0 -2
  86. package/js/types/Predicate.min.js +0 -1
  87. package/js/types/RectSize.js +0 -2
  88. package/js/types/RectSize.min.js +0 -1
  89. package/js/types/RectSize.ts +0 -4
  90. package/js/types/TextElement.js +0 -2
  91. package/js/types/TextElement.min.js +0 -1
  92. package/js/types/ValueOf.js +0 -2
  93. package/js/types/ValueOf.min.js +0 -1
  94. package/js/types/index.min.js +0 -1
  95. package/js/utils/className/fontColorClass.js +0 -20
  96. package/js/utils/className/fontColorClass.min.js +0 -1
  97. package/js/utils/className/fontColorClass.test.js +0 -18
  98. package/js/utils/className/fontColorClass.test.min.js +0 -1
  99. package/js/utils/className/fontColorClass.test.ts +0 -15
  100. package/js/utils/className/fontColorClass.ts +0 -12
  101. package/js/utils/className/getBasicClass.js +0 -36
  102. package/js/utils/className/getBasicClass.min.js +0 -1
  103. package/js/utils/className/getBasicClass.test.js +0 -22
  104. package/js/utils/className/getBasicClass.test.min.js +0 -1
  105. package/js/utils/className/getBasicClass.test.ts +0 -20
  106. package/js/utils/className/getBasicClass.ts +0 -36
  107. package/js/utils/className/getRootClassName.js +0 -33
  108. package/js/utils/className/getRootClassName.min.js +0 -1
  109. package/js/utils/className/getRootClassName.test.js +0 -15
  110. package/js/utils/className/getRootClassName.test.min.js +0 -1
  111. package/js/utils/className/getRootClassName.test.ts +0 -11
  112. package/js/utils/className/getRootClassName.ts +0 -25
  113. package/js/utils/className/getTypographyClassName.js +0 -13
  114. package/js/utils/className/getTypographyClassName.min.js +0 -1
  115. package/js/utils/className/getTypographyClassName.test.js +0 -9
  116. package/js/utils/className/getTypographyClassName.test.min.js +0 -1
  117. package/js/utils/className/getTypographyClassName.test.ts +0 -7
  118. package/js/utils/className/getTypographyClassName.ts +0 -9
  119. package/js/utils/className/handleBasicClasses.js +0 -52
  120. package/js/utils/className/handleBasicClasses.min.js +0 -1
  121. package/js/utils/className/handleBasicClasses.test.js +0 -35
  122. package/js/utils/className/handleBasicClasses.test.min.js +0 -1
  123. package/js/utils/className/handleBasicClasses.test.ts +0 -28
  124. package/js/utils/className/handleBasicClasses.ts +0 -44
  125. package/js/utils/className/index.js +0 -25
  126. package/js/utils/className/index.min.js +0 -1
  127. package/js/utils/className/index.ts +0 -6
  128. package/js/utils/className/resolveColorWithVariants.min.js +0 -1
  129. package/js/utils/className/resolveColorWithVariants.test.js +0 -30
  130. package/js/utils/className/resolveColorWithVariants.test.min.js +0 -1
  131. package/js/utils/className/resolveColorWithVariants.test.ts +0 -33
  132. package/js/utils/className/resolveColorWithVariants.ts +0 -11
  133. package/js/utils/index.min.js +0 -1
  134. package/js/utils/index.ts +0 -221
  135. package/lumx.min.css +0 -1
  136. /package/js/types/{Callback.ts → Callback.d.ts} +0 -0
  137. /package/js/types/{Falsy.ts → Falsy.d.ts} +0 -0
  138. /package/js/types/{HasClassName.ts → HasClassName.d.ts} +0 -0
  139. /package/js/types/{HasCloseMode.ts → HasCloseMode.d.ts} +0 -0
  140. /package/js/types/{HeadingElement.ts → HeadingElement.d.ts} +0 -0
  141. /package/js/types/{Predicate.ts → Predicate.d.ts} +0 -0
  142. /package/js/types/{ValueOf.ts → ValueOf.d.ts} +0 -0
@@ -1,33 +0,0 @@
1
- import { resolveColorWithVariants } from './resolveColorWithVariants';
2
-
3
- describe(resolveColorWithVariants, () => {
4
- it('should handle undefined color', () => {
5
- const result = resolveColorWithVariants(undefined);
6
- expect(result).toEqual([undefined, undefined]);
7
- });
8
-
9
- it('should handle undefined color with variant', () => {
10
- const result = resolveColorWithVariants(undefined, 'L2');
11
- expect(result).toEqual([undefined, 'L2']);
12
- });
13
-
14
- it('should handle color with undefined variant', () => {
15
- const result = resolveColorWithVariants('primary');
16
- expect(result).toEqual(['primary', undefined]);
17
- });
18
-
19
- it('should handle color & variant separated', () => {
20
- const result = resolveColorWithVariants('primary', 'L2');
21
- expect(result).toEqual(['primary', 'L2']);
22
- });
23
-
24
- it('should handle color with variant all in one', () => {
25
- const result = resolveColorWithVariants('primary-L2');
26
- expect(result).toEqual(['primary', 'L2']);
27
- });
28
-
29
- it('should override color variant with the given color variant', () => {
30
- const result = resolveColorWithVariants('primary-L2', 'D2');
31
- expect(result).toEqual(['primary', 'D2']);
32
- });
33
- });
@@ -1,11 +0,0 @@
1
- import { ColorPalette, ColorVariant, ColorWithVariants } from '../../constants';
2
-
3
- /** Resolve color & color variant from a `ColorWithVariants` and optionally a `ColorVariant`. */
4
- export function resolveColorWithVariants(
5
- colorWithVariants?: ColorWithVariants,
6
- colorVariant?: ColorVariant,
7
- ): [color?: ColorPalette, colorVariant?: ColorVariant] {
8
- if (!colorWithVariants) return [undefined, colorVariant];
9
- const [color, baseColorVariant] = colorWithVariants.split('-');
10
- return [color as ColorPalette, (colorVariant || baseColorVariant) as ColorVariant];
11
- }
@@ -1 +0,0 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("lodash/noop"),t=require("./className/handleBasicClasses.min.js"),s=require("./className/getBasicClass.min.js"),r=require("./className/getRootClassName.min.js"),a=require("./className/getTypographyClassName.min.js"),n=require("./className/fontColorClass.min.js"),o=require("./className/resolveColorWithVariants.min.js");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}require("classnames"),require("lodash/isBoolean"),require("lodash/isEmpty"),require("lodash/kebabCase"),require("../constants/index.min.js"),require("../constants/keycodes.min.js");var u=i(e);exports.handleBasicClasses=t.handleBasicClasses,exports.getBasicClass=s.getBasicClass,exports.getRootClassName=r.getRootClassName,exports.getTypographyClassName=a.getTypographyClassName,exports.fontColorClass=n.fontColorClass,exports.resolveColorWithVariants=o.resolveColorWithVariants,exports.detectHorizontalSwipe=function(e,t){let s,r,a,n,o;const i=e=>{const[t]=Array.from(e.changedTouches);s=t.pageX,r=t.pageY,n=(new Date).getTime(),o=!1},c=e=>{if(o)return;if(a=(new Date).getTime()-n,a>300)return;const[i]=Array.from(e.changedTouches),u=i.pageX-s,c=i.pageY-r;if(!(Math.abs(u)>=150&&Math.abs(c)<=150))return;t(u<0?"left":"right"),o=!0},l=!!function(){let e=!1;try{const t=Object.defineProperty({},"passive",{get(){e=!0}});window.addEventListener("testPassiveEventSupport",u.default,t),window.removeEventListener("testPassiveEventSupport",u.default,t)}catch(e){}return e}()&&{passive:!0};return e.addEventListener("touchstart",i,l),e.addEventListener("touchmove",c,l),()=>{e.removeEventListener("touchstart",i,l),e.removeEventListener("touchmove",c,l)}},exports.detectSwipe=function(e,t=u.default){let s,r,a,n,o,i,c;const l=e=>{const[t]=Array.from(e.changedTouches);o="none",a=t.pageX,n=t.pageY,c=(new Date).getTime(),e.preventDefault()},p=e=>{e.preventDefault()},d=e=>{const[u]=Array.from(e.changedTouches);s=u.pageX-a,r=u.pageY-n,i=(new Date).getTime()-c,i<=300&&(Math.abs(s)>=150&&Math.abs(r)<=100?o=s<0?"left":"right":Math.abs(r)>=150&&Math.abs(s)<=100&&(o=r<0?"up":"down")),t(o),e.preventDefault()};return e.addEventListener("touchstart",l,!1),e.addEventListener("touchmove",p,!1),e.addEventListener("touchend",d,!1),()=>{e.removeEventListener("touchstart",l,!1),e.removeEventListener("touchmove",p,!1),e.removeEventListener("touchend",d,!1)}},exports.onButtonPressed=function(e){return t=>{"Enter"!==t.key&&" "!==t.key||e(t)}},exports.onEnterPressed=function(e){return t=>{"Enter"===t.key&&e(t)}},exports.onEscapePressed=function(e){return t=>{"Escape"===t.key&&e(t)}};
package/js/utils/index.ts DELETED
@@ -1,221 +0,0 @@
1
- import type { KeyboardEvent as ReactKeyboardEvent } from 'react';
2
-
3
- import noop from 'lodash/noop';
4
-
5
- export * from './className';
6
-
7
- type KeyboardEventHandler<E extends KeyboardEvent | ReactKeyboardEvent> = (event: E) => void;
8
-
9
- /**
10
- * Make sure the pressed key is the enter key before calling the callback.
11
- *
12
- * @param handler The handler to call on enter/return press.
13
- * @return The decorated function.
14
- */
15
- export function onEnterPressed<E extends KeyboardEvent | ReactKeyboardEvent>(
16
- handler: KeyboardEventHandler<E>,
17
- ): KeyboardEventHandler<E> {
18
- return (evt) => {
19
- if (evt.key !== 'Enter') {
20
- return;
21
- }
22
- handler(evt);
23
- };
24
- }
25
-
26
- /**
27
- * Make sure the pressed key is the escape key before calling the callback.
28
- *
29
- * @param handler The handler to call on enter/return press.
30
- * @return The decorated function.
31
- */
32
- export function onEscapePressed<E extends KeyboardEvent | ReactKeyboardEvent>(
33
- handler: KeyboardEventHandler<E>,
34
- ): KeyboardEventHandler<E> {
35
- return (evt) => {
36
- if (evt.key !== 'Escape') {
37
- return;
38
- }
39
- handler(evt);
40
- };
41
- }
42
-
43
- /**
44
- * Handle button key pressed (Enter + Space).
45
- *
46
- * @param handler The handler to call.
47
- * @return The decorated function.
48
- */
49
- export function onButtonPressed<E extends KeyboardEvent | ReactKeyboardEvent>(
50
- handler: KeyboardEventHandler<E>,
51
- ): KeyboardEventHandler<E> {
52
- return (evt) => {
53
- if (evt.key !== 'Enter' && evt.key !== ' ') {
54
- return;
55
- }
56
- handler(evt);
57
- };
58
- }
59
-
60
- declare type SwipeDirection = 'none' | 'up' | 'down' | 'left' | 'right';
61
-
62
- /**
63
- * Detects swipe direction.
64
- * Credits: http://javascriptkit.com/javatutors/touchevents2.shtml.
65
- *
66
- * @deprecated use `detectHorizontalSwipe` instead if possible (better performance and does not block scroll)
67
- * @param touchSurface Element that will hold touch events.
68
- * @param handleSwipe Callback function.
69
- * @return Function to remove listeners.
70
- */
71
- export function detectSwipe(touchSurface: Element, handleSwipe: (direction: SwipeDirection) => void = noop) {
72
- let distX: number;
73
- let distY: number;
74
- let startX: number;
75
- let startY: number;
76
- let direction: SwipeDirection;
77
- // Required min distance traveled to be considered swipe.
78
- const threshold = 150;
79
- // Maximum distance allowed at the same time in perpendicular direction.
80
- const restraint = 100;
81
- // Maximum time allowed to travel that distance.
82
- const allowedTime = 300;
83
- let elapsedTime: number;
84
- let startTime: number;
85
-
86
- const onTouchStart = (evt: Event) => {
87
- const [touch] = Array.from((evt as TouchEvent).changedTouches);
88
- direction = 'none';
89
- // Const dist = 0;
90
- startX = touch.pageX;
91
- startY = touch.pageY;
92
- // Record time when finger first makes contact with surface.
93
- startTime = new Date().getTime();
94
- evt.preventDefault();
95
- };
96
-
97
- const onTouchMove = (evt: Event) => {
98
- // Prevent scrolling when inside DIV.
99
- evt.preventDefault();
100
- };
101
-
102
- const onTouchEnd = (evt: Event) => {
103
- const [touch] = Array.from((evt as TouchEvent).changedTouches);
104
- // Get horizontal dist traveled by finger while in contact with surface.
105
- distX = touch.pageX - startX;
106
- // Get vertical dist traveled by finger while in contact with surface.
107
- distY = touch.pageY - startY;
108
- // Get time elapsed.
109
- elapsedTime = new Date().getTime() - startTime;
110
- if (elapsedTime <= allowedTime) {
111
- // First condition for awipe met.
112
- if (Math.abs(distX) >= threshold && Math.abs(distY) <= restraint) {
113
- // 2nd condition for horizontal swipe met.
114
- // If dist traveled is negative, it indicates left swipe.
115
- direction = distX < 0 ? 'left' : 'right';
116
- } else if (Math.abs(distY) >= threshold && Math.abs(distX) <= restraint) {
117
- // 2nd condition for vertical swipe met.
118
- // If dist traveled is negative, it indicates up swipe.
119
- direction = distY < 0 ? 'up' : 'down';
120
- }
121
- }
122
- handleSwipe(direction);
123
- evt.preventDefault();
124
- };
125
-
126
- touchSurface.addEventListener('touchstart', onTouchStart, false);
127
- touchSurface.addEventListener('touchmove', onTouchMove, false);
128
- touchSurface.addEventListener('touchend', onTouchEnd, false);
129
-
130
- return () => {
131
- touchSurface.removeEventListener('touchstart', onTouchStart, false);
132
- touchSurface.removeEventListener('touchmove', onTouchMove, false);
133
- touchSurface.removeEventListener('touchend', onTouchEnd, false);
134
- };
135
- }
136
-
137
- /**
138
- * Checks whether or not the browser support passive events.
139
- * @see https://github.com/Modernizr/Modernizr/blob/6d56d814b9682843313b16060adb25a58d83a317/feature-detects/dom/passiveeventlisteners.js
140
- */
141
- function isPassiveEventAvailable() {
142
- let supportsPassiveOption = false;
143
- try {
144
- const opts = Object.defineProperty({}, 'passive', {
145
- get() {
146
- supportsPassiveOption = true;
147
- },
148
- });
149
- window.addEventListener('testPassiveEventSupport', noop, opts);
150
- window.removeEventListener('testPassiveEventSupport', noop, opts);
151
- } catch (e) {
152
- // ignored
153
- }
154
- return supportsPassiveOption;
155
- }
156
-
157
- /**
158
- * Detects horizontal swipe direction without blocking the browser scroll using passive event.
159
- * @see http://javascriptkit.com/javatutors/touchevents2.shtml
160
- * @see https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md
161
- */
162
- export function detectHorizontalSwipe(touchSurface: Element, handleSwipe: (direction: 'right' | 'left') => void) {
163
- let startX: number;
164
- let startY: number;
165
- // Required min distance traveled to be considered swipe.
166
- const threshold = 150;
167
- // Maximum distance allowed at the same time in perpendicular direction.
168
- const restraint = 150;
169
- // Maximum time allowed to travel that distance.
170
- const allowedTime = 300;
171
- let elapsedTime: number;
172
- let startTime: number;
173
- let finished: boolean;
174
-
175
- const onTouchStart = (evt: Event) => {
176
- const [touch] = Array.from((evt as TouchEvent).changedTouches);
177
- startX = touch.pageX;
178
- startY = touch.pageY;
179
- // Record time when finger first makes contact with surface.
180
- startTime = new Date().getTime();
181
- finished = false;
182
- };
183
-
184
- const onTouchMove = (evt: Event) => {
185
- if (finished) {
186
- return;
187
- }
188
-
189
- elapsedTime = new Date().getTime() - startTime;
190
- if (elapsedTime > allowedTime) {
191
- // Touch swipe too long to be considered.
192
- return;
193
- }
194
-
195
- const [touch] = Array.from((evt as TouchEvent).changedTouches);
196
- // Get horizontal dist traveled by finger while in contact with surface.
197
- const distX = touch.pageX - startX;
198
- // Get vertical dist traveled by finger while in contact with surface.
199
- const distY = touch.pageY - startY;
200
-
201
- if (!(Math.abs(distX) >= threshold && Math.abs(distY) <= restraint)) {
202
- // Swipe is not horizontal.
203
- return;
204
- }
205
- // Swipe direction.
206
- const direction = distX < 0 ? 'left' : 'right';
207
-
208
- handleSwipe(direction);
209
- finished = true;
210
- };
211
-
212
- // Activate passive event if possible for better scrolling performance.
213
- const eventOptions: any = isPassiveEventAvailable() ? { passive: true } : false;
214
- touchSurface.addEventListener('touchstart', onTouchStart, eventOptions);
215
- touchSurface.addEventListener('touchmove', onTouchMove, eventOptions);
216
-
217
- return () => {
218
- touchSurface.removeEventListener('touchstart', onTouchStart, eventOptions);
219
- touchSurface.removeEventListener('touchmove', onTouchMove, eventOptions);
220
- };
221
- }