@lumx/react 3.20.1-alpha.11 → 3.20.1-alpha.12
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/_internal/{8fcceef3.js → 0420e67b.js} +13 -14
- package/_internal/{8fcceef3.js.map → 0420e67b.js.map} +1 -1
- package/_internal/{7b214f74.js → 0a490b07.js} +29 -24
- package/_internal/{7b214f74.js.map → 0a490b07.js.map} +1 -1
- package/_internal/{4d92e13b.js → 0be1006e.js} +25 -25
- package/_internal/{4d92e13b.js.map → 0be1006e.js.map} +1 -1
- package/_internal/{dd0a245d.js → 0d1a078c.js} +44 -42
- package/_internal/{dd0a245d.js.map → 0d1a078c.js.map} +1 -1
- package/_internal/{1eab656b.js → 15eab19b.js} +25 -25
- package/_internal/{1eab656b.js.map → 15eab19b.js.map} +1 -1
- package/_internal/{87bada02.js → 179a84d1.js} +64 -67
- package/_internal/{87bada02.js.map → 179a84d1.js.map} +1 -1
- package/_internal/{4c5a7b63.js → 193521fa.js} +11 -12
- package/_internal/{4c5a7b63.js.map → 193521fa.js.map} +1 -1
- package/_internal/{f57d4eb8.js → 1a90ea3d.js} +15 -17
- package/_internal/{f57d4eb8.js.map → 1a90ea3d.js.map} +1 -1
- package/_internal/1deba7d7.js +224 -0
- package/_internal/{2d6bde7d.js.map → 1deba7d7.js.map} +1 -1
- package/_internal/{2938a251.js → 1ea72630.js} +16 -17
- package/_internal/{2938a251.js.map → 1ea72630.js.map} +1 -1
- package/_internal/21b83d16.js +137 -0
- package/_internal/{5ba8fae8.js.map → 21b83d16.js.map} +1 -1
- package/_internal/297bed8f.js +457 -0
- package/_internal/{e53b5a39.js.map → 297bed8f.js.map} +1 -1
- package/_internal/{432c85a7.js → 2c2b6a89.js} +9 -7
- package/_internal/{432c85a7.js.map → 2c2b6a89.js.map} +1 -1
- package/_internal/{bba7d4c4.js → 2f1716fa.js} +75 -63
- package/_internal/{bba7d4c4.js.map → 2f1716fa.js.map} +1 -1
- package/_internal/{2c7942af.js → 2f6c7f84.js} +16 -21
- package/_internal/{2c7942af.js.map → 2f6c7f84.js.map} +1 -1
- package/_internal/{64046d7a.js → 329b5f12.js} +10 -12
- package/_internal/{64046d7a.js.map → 329b5f12.js.map} +1 -1
- package/_internal/332e9844.js +2 -0
- package/_internal/332e9844.js.map +1 -0
- package/_internal/{85d992d2.js → 34c59f5b.js} +101 -98
- package/_internal/{85d992d2.js.map → 34c59f5b.js.map} +1 -1
- package/_internal/{30f4c83c.js → 370bdaed.js} +7 -5
- package/_internal/{30f4c83c.js.map → 370bdaed.js.map} +1 -1
- package/_internal/{7c4f4643.js → 37b007a4.js} +2 -2
- package/_internal/{7c4f4643.js.map → 37b007a4.js.map} +1 -1
- package/_internal/{07e0bd90.js → 3a4e4636.js} +51 -36
- package/_internal/{07e0bd90.js.map → 3a4e4636.js.map} +1 -1
- package/_internal/{3683d267.js → 3e653144.js} +8 -11
- package/_internal/{3683d267.js.map → 3e653144.js.map} +1 -1
- package/_internal/{c43d098b.js → 3f86608e.js} +5 -2
- package/_internal/{c43d098b.js.map → 3f86608e.js.map} +1 -1
- package/_internal/{b3bfbe72.js → 478b5c92.js} +2 -2
- package/_internal/{b3bfbe72.js.map → 478b5c92.js.map} +1 -1
- package/_internal/4962be5b.js +121 -0
- package/_internal/{70cf341b.js.map → 4962be5b.js.map} +1 -1
- package/_internal/{407735b4.js → 4cd870a5.js} +2 -2
- package/_internal/{407735b4.js.map → 4cd870a5.js.map} +1 -1
- package/_internal/{e4613195.js → 501f2f9f.js} +8 -9
- package/_internal/{e4613195.js.map → 501f2f9f.js.map} +1 -1
- package/_internal/5e7b90e2.js +2 -0
- package/_internal/5e7b90e2.js.map +1 -0
- package/_internal/{18334f0d.js → 5ec059fe.js} +48 -43
- package/_internal/{18334f0d.js.map → 5ec059fe.js.map} +1 -1
- package/_internal/{fc47f2da.js → 5f8f9454.js} +10 -12
- package/_internal/{fc47f2da.js.map → 5f8f9454.js.map} +1 -1
- package/_internal/{3f3de25e.js → 5fe09341.js} +3 -3
- package/_internal/{3f3de25e.js.map → 5fe09341.js.map} +1 -1
- package/_internal/{714809cc.js → 628468c4.js} +47 -46
- package/_internal/{714809cc.js.map → 628468c4.js.map} +1 -1
- package/_internal/{d3321a86.js → 6589b796.js} +2 -12
- package/_internal/{d3321a86.js.map → 6589b796.js.map} +1 -1
- package/_internal/{2368cb68.js → 65f91970.js} +43 -43
- package/_internal/{2368cb68.js.map → 65f91970.js.map} +1 -1
- package/_internal/66f691d3.js +74 -0
- package/_internal/{1921f348.js.map → 66f691d3.js.map} +1 -1
- package/_internal/{bdd41804.js → 68c10f98.js} +50 -41
- package/_internal/{bdd41804.js.map → 68c10f98.js.map} +1 -1
- package/_internal/{9cfa3e10.js → 690ca33e.js} +36 -35
- package/_internal/{9cfa3e10.js.map → 690ca33e.js.map} +1 -1
- package/_internal/6ca04271.js +108 -0
- package/_internal/{a67f26a8.js.map → 6ca04271.js.map} +1 -1
- package/_internal/{cdc3efab.js → 6da19518.js} +24 -32
- package/_internal/{cdc3efab.js.map → 6da19518.js.map} +1 -1
- package/_internal/{bcce6ceb.js → 7093ba23.js} +6 -4
- package/_internal/{bcce6ceb.js.map → 7093ba23.js.map} +1 -1
- package/_internal/{bc4cb4c0.js → 74a4a214.js} +29 -33
- package/_internal/{bc4cb4c0.js.map → 74a4a214.js.map} +1 -1
- package/_internal/{95a2e851.js → 76be70dd.js} +3 -3
- package/_internal/{95a2e851.js.map → 76be70dd.js.map} +1 -1
- package/_internal/{60f8e509.js → 7f54e947.js} +114 -101
- package/_internal/{60f8e509.js.map → 7f54e947.js.map} +1 -1
- package/_internal/{72407886.js → 84dfe68f.js} +50 -44
- package/_internal/{72407886.js.map → 84dfe68f.js.map} +1 -1
- package/_internal/{e2440593.js → 85e3a5ca.js} +32 -35
- package/_internal/{e2440593.js.map → 85e3a5ca.js.map} +1 -1
- package/_internal/{742d4906.js → 86aa4aa4.js} +60 -54
- package/_internal/{742d4906.js.map → 86aa4aa4.js.map} +1 -1
- package/_internal/{4e1dde79.js → 8ab42752.js} +25 -26
- package/_internal/{4e1dde79.js.map → 8ab42752.js.map} +1 -1
- package/_internal/{0f4b35b2.js → 95cfd814.js} +14 -20
- package/_internal/{0f4b35b2.js.map → 95cfd814.js.map} +1 -1
- package/_internal/{d6b3a3c0.js → 9a4dfad0.js} +48 -39
- package/_internal/{d6b3a3c0.js.map → 9a4dfad0.js.map} +1 -1
- package/_internal/{80e5c950.js → 9c9df5f2.js} +19 -19
- package/_internal/{80e5c950.js.map → 9c9df5f2.js.map} +1 -1
- package/_internal/{21aeb1c7.js → 9d1336a1.js} +6 -6
- package/_internal/{21aeb1c7.js.map → 9d1336a1.js.map} +1 -1
- package/_internal/{ee64ab0d.js → 9fdc715b.js} +37 -34
- package/_internal/{ee64ab0d.js.map → 9fdc715b.js.map} +1 -1
- package/_internal/a003602b.js +116 -0
- package/_internal/{32698205.js.map → a003602b.js.map} +1 -1
- package/_internal/{baa0a23b.js → a34639bd.js} +31 -29
- package/_internal/{baa0a23b.js.map → a34639bd.js.map} +1 -1
- package/_internal/{cb036703.js → a84f4981.js} +35 -26
- package/_internal/{cb036703.js.map → a84f4981.js.map} +1 -1
- package/_internal/{9210e2f3.js → b0a7a999.js} +10 -12
- package/_internal/{9210e2f3.js.map → b0a7a999.js.map} +1 -1
- package/_internal/{3646abc3.js → b0b2e33d.js} +117 -104
- package/_internal/{3646abc3.js.map → b0b2e33d.js.map} +1 -1
- package/_internal/{1aaa0341.js → b1af5979.js} +168 -160
- package/_internal/{1aaa0341.js.map → b1af5979.js.map} +1 -1
- package/_internal/{21cf275f.js → b477da26.js} +63 -57
- package/_internal/{21cf275f.js.map → b477da26.js.map} +1 -1
- package/_internal/{60923026.js → b8667090.js} +2 -2
- package/_internal/{60923026.js.map → b8667090.js.map} +1 -1
- package/_internal/{1e4b7ad5.js → bae266a9.js} +19 -18
- package/_internal/{1e4b7ad5.js.map → bae266a9.js.map} +1 -1
- package/_internal/{9d8130ae.js → be6da9b0.js} +69 -74
- package/_internal/{9d8130ae.js.map → be6da9b0.js.map} +1 -1
- package/_internal/{9452daf7.js → c0414b89.js} +10 -12
- package/_internal/{9452daf7.js.map → c0414b89.js.map} +1 -1
- package/_internal/{e566d502.js → c2388b10.js} +21 -17
- package/_internal/{e566d502.js.map → c2388b10.js.map} +1 -1
- package/_internal/{9cf0d217.js → c459a04d.js} +55 -54
- package/_internal/{9cf0d217.js.map → c459a04d.js.map} +1 -1
- package/_internal/c6ca7494.js +2 -0
- package/_internal/c6ca7494.js.map +1 -0
- package/_internal/{01bc8fcf.js → cdddaed8.js} +20 -18
- package/_internal/{01bc8fcf.js.map → cdddaed8.js.map} +1 -1
- package/_internal/{0361b7fb.js → d45e3f16.js} +2 -2
- package/_internal/{0361b7fb.js.map → d45e3f16.js.map} +1 -1
- package/_internal/{d66c4375.js → d5f316cb.js} +2 -2
- package/_internal/{d66c4375.js.map → d5f316cb.js.map} +1 -1
- package/_internal/{0a31e895.js → db4fdc7b.js} +63 -57
- package/_internal/{0a31e895.js.map → db4fdc7b.js.map} +1 -1
- package/_internal/dbe0cf24.js +75 -0
- package/_internal/{803945f7.js.map → dbe0cf24.js.map} +1 -1
- package/_internal/{4ceaf17c.js → e2afb13f.js} +2 -2
- package/_internal/{4ceaf17c.js.map → e2afb13f.js.map} +1 -1
- package/_internal/{b925072d.js → e52f0d3f.js} +37 -34
- package/_internal/{b925072d.js.map → e52f0d3f.js.map} +1 -1
- package/_internal/{aa8c5d9b.js → e6dd117e.js} +2 -2
- package/_internal/{aa8c5d9b.js.map → e6dd117e.js.map} +1 -1
- package/_internal/{077b7bef.js → ea04260d.js} +6 -6
- package/_internal/{077b7bef.js.map → ea04260d.js.map} +1 -1
- package/_internal/{77eb8ef3.js → eaa8b1d8.js} +39 -38
- package/_internal/{77eb8ef3.js.map → eaa8b1d8.js.map} +1 -1
- package/_internal/{aafcf80e.js → edab29ce.js} +61 -65
- package/_internal/{aafcf80e.js.map → edab29ce.js.map} +1 -1
- package/_internal/{38b3ecf3.js → f0900583.js} +54 -45
- package/_internal/{38b3ecf3.js.map → f0900583.js.map} +1 -1
- package/_internal/{881714a1.js → f23cdf84.js} +45 -51
- package/_internal/{881714a1.js.map → f23cdf84.js.map} +1 -1
- package/_internal/f52e979e.js +3 -0
- package/_internal/f52e979e.js.map +1 -0
- package/_internal/{1ce667fb.js → f5508d3d.js} +53 -51
- package/_internal/{1ce667fb.js.map → f5508d3d.js.map} +1 -1
- package/_internal/{43262bfe.js → f93fe83e.js} +11 -13
- package/_internal/{43262bfe.js.map → f93fe83e.js.map} +1 -1
- package/index.js +63 -63
- package/package.json +3 -11
- package/utils/index.js +3 -3
- package/_internal/1921f348.js +0 -72
- package/_internal/286fc728.js +0 -2
- package/_internal/286fc728.js.map +0 -1
- package/_internal/2d6bde7d.js +0 -209
- package/_internal/32698205.js +0 -107
- package/_internal/5ba8fae8.js +0 -120
- package/_internal/70cf341b.js +0 -117
- package/_internal/803945f7.js +0 -65
- package/_internal/a67f26a8.js +0 -98
- package/_internal/ac3bc511.js +0 -2
- package/_internal/ac3bc511.js.map +0 -1
- package/_internal/cc995526.js +0 -2
- package/_internal/cc995526.js.map +0 -1
- package/_internal/e2122a37.js +0 -3
- package/_internal/e2122a37.js.map +0 -1
- package/_internal/e53b5a39.js +0 -407
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { l as classNames } from './
|
|
1
|
+
import { l as classNames } from './6589b796.js';
|
|
2
2
|
import isBoolean from 'lodash/isBoolean';
|
|
3
3
|
import isEmpty from 'lodash/isEmpty';
|
|
4
4
|
import kebabCase from 'lodash/kebabCase';
|
|
@@ -72,4 +72,4 @@ function handleBasicClasses({
|
|
|
72
72
|
}
|
|
73
73
|
|
|
74
74
|
export { getBasicClass as g, handleBasicClasses as h };
|
|
75
|
-
//# sourceMappingURL=
|
|
75
|
+
//# sourceMappingURL=e2afb13f.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"
|
|
1
|
+
{"version":3,"file":"e2afb13f.js","sources":["../../../lumx-core/src/js/utils/className/getBasicClass.ts","../../../lumx-core/src/js/utils/className/handleBasicClasses.ts"],"sourcesContent":["import isBoolean from 'lodash/isBoolean';\nimport kebabCase from 'lodash/kebabCase';\n\n/**\n * Get the basic CSS class for the given type.\n *\n * @param prefix The class name prefix for the generated CSS class.\n * @param type The type of CSS class we want to generate (e.g.: 'color', 'variant', ...).\n * @param value The value of the type of the CSS class (e.g.: 'primary', 'button', ...).\n * @return The basic CSS class.\n */\nexport function getBasicClass({\n prefix,\n type,\n value,\n}: {\n prefix: string;\n type: string;\n value: string | number | boolean | undefined;\n}): string {\n if (isBoolean(value)) {\n if (!value) {\n // False value should not return a class.\n return '';\n }\n const booleanPrefixes = ['has', 'is'];\n\n if (booleanPrefixes.some((booleanPrefix) => type.toString().startsWith(booleanPrefix))) {\n return `${prefix}--${kebabCase(type)}`;\n }\n\n return `${prefix}--is-${kebabCase(type)}`;\n }\n\n return `${prefix}--${kebabCase(type)}-${value}`;\n}\n","import classNames from 'classnames';\n\nimport isBoolean from 'lodash/isBoolean';\nimport isEmpty from 'lodash/isEmpty';\n\nimport { getBasicClass } from './getBasicClass';\n\n/**\n * Enhance isEmpty method to also works with numbers.\n *\n * @param value The value to check.\n * @return Whether the input value is empty or != 0.\n */\nconst _isEmpty = (value: any) => {\n if (typeof value === 'number') {\n return value === 0;\n }\n\n return isEmpty(value);\n};\n\n/**\n * Return all basic LumX CSS classes which are available for every components.\n *\n * @see {@link /src/components/index.d.ts} for the possible values of each parameter.\n *\n * @param prefix The class name prefix for the generated CSS class.\n * @param props All the other props you want to generate a class.\n * The rule of thumb: the key is the name of the prop in the class, the value a string that will\n * be used in the classname to represent the value of the given prop.\n * @return All LumX basic CSS classes.\n */\nexport function handleBasicClasses({ prefix, ...props }: { prefix: string; [prop: string]: any }): string {\n const otherClasses: any = {};\n if (!isEmpty(props)) {\n Object.keys(props).forEach((prop) => {\n otherClasses[getBasicClass({ prefix, type: prop, value: props[prop] })] = isBoolean(props[prop])\n ? props[prop]\n : !_isEmpty(props[prop]);\n });\n }\n\n return classNames(prefix, otherClasses);\n}\n"],"names":["getBasicClass","prefix","type","value","isBoolean","booleanPrefixes","some","booleanPrefix","toString","startsWith","kebabCase","_isEmpty","isEmpty","handleBasicClasses","props","otherClasses","Object","keys","forEach","prop","classNames"],"mappings":";;;;;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASA,aAAaA,CAAC;EAC1BC,MAAM;EACNC,IAAI;AACJC,EAAAA,KAAAA;AAKJ,CAAC,EAAU;AACP,EAAA,IAAIC,SAAS,CAACD,KAAK,CAAC,EAAE;IAClB,IAAI,CAACA,KAAK,EAAE;AACR;AACA,MAAA,OAAO,EAAE,CAAA;AACb,KAAA;AACA,IAAA,MAAME,eAAe,GAAG,CAAC,KAAK,EAAE,IAAI,CAAC,CAAA;AAErC,IAAA,IAAIA,eAAe,CAACC,IAAI,CAAEC,aAAa,IAAKL,IAAI,CAACM,QAAQ,EAAE,CAACC,UAAU,CAACF,aAAa,CAAC,CAAC,EAAE;AACpF,MAAA,OAAO,GAAGN,MAAM,CAAA,EAAA,EAAKS,SAAS,CAACR,IAAI,CAAC,CAAE,CAAA,CAAA;AAC1C,KAAA;AAEA,IAAA,OAAO,GAAGD,MAAM,CAAA,KAAA,EAAQS,SAAS,CAACR,IAAI,CAAC,CAAE,CAAA,CAAA;AAC7C,GAAA;EAEA,OAAO,CAAA,EAAGD,MAAM,CAAKS,EAAAA,EAAAA,SAAS,CAACR,IAAI,CAAC,CAAIC,CAAAA,EAAAA,KAAK,CAAE,CAAA,CAAA;AACnD;;AC5BA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMQ,QAAQ,GAAIR,KAAU,IAAK;AAC7B,EAAA,IAAI,OAAOA,KAAK,KAAK,QAAQ,EAAE;IAC3B,OAAOA,KAAK,KAAK,CAAC,CAAA;AACtB,GAAA;EAEA,OAAOS,OAAO,CAACT,KAAK,CAAC,CAAA;AACzB,CAAC,CAAA;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASU,kBAAkBA,CAAC;EAAEZ,MAAM;EAAE,GAAGa,KAAAA;AAA+C,CAAC,EAAU;EACtG,MAAMC,YAAiB,GAAG,EAAE,CAAA;AAC5B,EAAA,IAAI,CAACH,OAAO,CAACE,KAAK,CAAC,EAAE;IACjBE,MAAM,CAACC,IAAI,CAACH,KAAK,CAAC,CAACI,OAAO,CAAEC,IAAI,IAAK;MACjCJ,YAAY,CAACf,aAAa,CAAC;QAAEC,MAAM;AAAEC,QAAAA,IAAI,EAAEiB,IAAI;QAAEhB,KAAK,EAAEW,KAAK,CAACK,IAAI,CAAA;OAAG,CAAC,CAAC,GAAGf,SAAS,CAACU,KAAK,CAACK,IAAI,CAAC,CAAC,GAC1FL,KAAK,CAACK,IAAI,CAAC,GACX,CAACR,QAAQ,CAACG,KAAK,CAACK,IAAI,CAAC,CAAC,CAAA;AAChC,KAAC,CAAC,CAAA;AACN,GAAA;AAEA,EAAA,OAAOC,UAAU,CAACnB,MAAM,EAAEc,YAAY,CAAC,CAAA;AAC3C;;;;"}
|
|
@@ -1,13 +1,10 @@
|
|
|
1
|
-
import { m as getRootClassName, n as forwardRef, b as Theme, _ as _extends, l as classNames, A as Alignment, i as AspectRatio } from './d3321a86.js';
|
|
2
1
|
import { useMemo } from 'react';
|
|
2
|
+
import { m as getRootClassName, n as forwardRef, b as Theme, l as classNames, A as Alignment, i as AspectRatio } from './6589b796.js';
|
|
3
3
|
import take from 'lodash/take';
|
|
4
4
|
import { u as useTheme } from './3181f000.js';
|
|
5
|
-
import { h as handleBasicClasses } from './
|
|
6
|
-
import {
|
|
7
|
-
|
|
8
|
-
/**
|
|
9
|
-
* Defines the props of the component.
|
|
10
|
-
*/
|
|
5
|
+
import { h as handleBasicClasses } from './e2afb13f.js';
|
|
6
|
+
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
7
|
+
import { T as Thumbnail } from './628468c4.js';
|
|
11
8
|
|
|
12
9
|
/**
|
|
13
10
|
* Component display name.
|
|
@@ -47,9 +44,9 @@ const Mosaic = forwardRef((props, ref) => {
|
|
|
47
44
|
onImageClick?.(index);
|
|
48
45
|
};
|
|
49
46
|
}, [onImageClick]);
|
|
50
|
-
return /*#__PURE__*/
|
|
51
|
-
ref: ref
|
|
52
|
-
|
|
47
|
+
return /*#__PURE__*/jsx("div", {
|
|
48
|
+
ref: ref,
|
|
49
|
+
...forwardedProps,
|
|
53
50
|
className: classNames(className, handleBasicClasses({
|
|
54
51
|
prefix: CLASSNAME,
|
|
55
52
|
theme
|
|
@@ -58,34 +55,40 @@ const Mosaic = forwardRef((props, ref) => {
|
|
|
58
55
|
[`${CLASSNAME}--has-2-thumbnails`]: thumbnails?.length === 2,
|
|
59
56
|
[`${CLASSNAME}--has-3-thumbnails`]: thumbnails?.length === 3,
|
|
60
57
|
[`${CLASSNAME}--has-4-thumbnails`]: thumbnails?.length >= 4
|
|
58
|
+
}),
|
|
59
|
+
children: /*#__PURE__*/jsx("div", {
|
|
60
|
+
className: `${CLASSNAME}__wrapper`,
|
|
61
|
+
children: take(thumbnails, 4).map((thumbnail, index) => {
|
|
62
|
+
const {
|
|
63
|
+
image,
|
|
64
|
+
onClick,
|
|
65
|
+
align,
|
|
66
|
+
...thumbnailProps
|
|
67
|
+
} = thumbnail;
|
|
68
|
+
return /*#__PURE__*/jsxs("div", {
|
|
69
|
+
className: `${CLASSNAME}__thumbnail`,
|
|
70
|
+
children: [/*#__PURE__*/jsx(Thumbnail, {
|
|
71
|
+
...thumbnailProps,
|
|
72
|
+
align: align || Alignment.left,
|
|
73
|
+
image: image,
|
|
74
|
+
theme: theme,
|
|
75
|
+
aspectRatio: AspectRatio.free,
|
|
76
|
+
fillHeight: true,
|
|
77
|
+
onClick: handleImageClick?.(index, onClick) || onClick
|
|
78
|
+
}), thumbnails.length > 4 && index === 3 && /*#__PURE__*/jsx("div", {
|
|
79
|
+
className: `${CLASSNAME}__overlay`,
|
|
80
|
+
children: /*#__PURE__*/jsxs("span", {
|
|
81
|
+
children: ["+", thumbnails.length - 4]
|
|
82
|
+
})
|
|
83
|
+
})]
|
|
84
|
+
}, index);
|
|
85
|
+
})
|
|
61
86
|
})
|
|
62
|
-
})
|
|
63
|
-
className: `${CLASSNAME}__wrapper`
|
|
64
|
-
}, take(thumbnails, 4).map((thumbnail, index) => {
|
|
65
|
-
const {
|
|
66
|
-
image,
|
|
67
|
-
onClick,
|
|
68
|
-
align,
|
|
69
|
-
...thumbnailProps
|
|
70
|
-
} = thumbnail;
|
|
71
|
-
return /*#__PURE__*/React.createElement("div", {
|
|
72
|
-
key: index,
|
|
73
|
-
className: `${CLASSNAME}__thumbnail`
|
|
74
|
-
}, /*#__PURE__*/React.createElement(Thumbnail, _extends({}, thumbnailProps, {
|
|
75
|
-
align: align || Alignment.left,
|
|
76
|
-
image: image,
|
|
77
|
-
theme: theme,
|
|
78
|
-
aspectRatio: AspectRatio.free,
|
|
79
|
-
fillHeight: true,
|
|
80
|
-
onClick: handleImageClick?.(index, onClick) || onClick
|
|
81
|
-
})), thumbnails.length > 4 && index === 3 && /*#__PURE__*/React.createElement("div", {
|
|
82
|
-
className: `${CLASSNAME}__overlay`
|
|
83
|
-
}, /*#__PURE__*/React.createElement("span", null, "+", thumbnails.length - 4)));
|
|
84
|
-
})));
|
|
87
|
+
});
|
|
85
88
|
});
|
|
86
89
|
Mosaic.displayName = COMPONENT_NAME;
|
|
87
90
|
Mosaic.className = CLASSNAME;
|
|
88
91
|
Mosaic.defaultProps = DEFAULT_PROPS;
|
|
89
92
|
|
|
90
93
|
export { Mosaic };
|
|
91
|
-
//# sourceMappingURL=
|
|
94
|
+
//# sourceMappingURL=e52f0d3f.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"
|
|
1
|
+
{"version":3,"file":"e52f0d3f.js","sources":["../../src/components/mosaic/Mosaic.tsx"],"sourcesContent":["import { MouseEventHandler, useMemo } from 'react';\n\nimport classNames from 'classnames';\nimport take from 'lodash/take';\nimport { useTheme } from '@lumx/react/utils/theme/ThemeContext';\n\nimport { Alignment, AspectRatio, Theme, Thumbnail, ThumbnailProps } from '@lumx/react';\nimport { GenericProps, HasTheme } from '@lumx/react/utils/type';\nimport { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';\nimport { forwardRef } from '@lumx/react/utils/react/forwardRef';\n\n/**\n * Defines the props of the component.\n */\nexport interface MosaicProps extends GenericProps, HasTheme {\n /** Thumbnails. */\n thumbnails: ThumbnailProps[];\n /** On image click callback. */\n onImageClick?(index: number): void;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'Mosaic';\n\n/**\n * Component default class name and class prefix.\n */\nconst CLASSNAME = getRootClassName(COMPONENT_NAME);\n\n/**\n * Component default props.\n */\nconst DEFAULT_PROPS: Partial<MosaicProps> = {};\n\n/**\n * Mosaic component.\n *\n * @param props Component props.\n * @param ref Component ref.\n * @return React element.\n */\nexport const Mosaic = forwardRef<MosaicProps, HTMLDivElement>((props, ref) => {\n const defaultTheme = useTheme() || Theme.light;\n const { className, theme = defaultTheme, thumbnails, onImageClick, ...forwardedProps } = props;\n const handleImageClick = useMemo(() => {\n if (!onImageClick) return undefined;\n\n return (index: number, onClick?: MouseEventHandler): MouseEventHandler =>\n (event) => {\n onClick?.(event);\n onImageClick?.(index);\n };\n }, [onImageClick]);\n\n return (\n <div\n ref={ref}\n {...forwardedProps}\n className={classNames(className, handleBasicClasses({ prefix: CLASSNAME, theme }), {\n [`${CLASSNAME}--has-1-thumbnail`]: thumbnails?.length === 1,\n [`${CLASSNAME}--has-2-thumbnails`]: thumbnails?.length === 2,\n [`${CLASSNAME}--has-3-thumbnails`]: thumbnails?.length === 3,\n [`${CLASSNAME}--has-4-thumbnails`]: thumbnails?.length >= 4,\n })}\n >\n <div className={`${CLASSNAME}__wrapper`}>\n {take(thumbnails, 4).map((thumbnail: any, index: number) => {\n const { image, onClick, align, ...thumbnailProps } = thumbnail;\n\n return (\n <div key={index} className={`${CLASSNAME}__thumbnail`}>\n <Thumbnail\n {...thumbnailProps}\n align={align || Alignment.left}\n image={image}\n theme={theme}\n aspectRatio={AspectRatio.free}\n fillHeight\n onClick={handleImageClick?.(index, onClick) || onClick}\n />\n\n {thumbnails.length > 4 && index === 3 && (\n <div className={`${CLASSNAME}__overlay`}>\n <span>+{thumbnails.length - 4}</span>\n </div>\n )}\n </div>\n );\n })}\n </div>\n </div>\n );\n});\nMosaic.displayName = COMPONENT_NAME;\nMosaic.className = CLASSNAME;\nMosaic.defaultProps = DEFAULT_PROPS;\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","Mosaic","forwardRef","props","ref","defaultTheme","useTheme","Theme","light","className","theme","thumbnails","onImageClick","forwardedProps","handleImageClick","useMemo","undefined","index","onClick","event","_jsx","classNames","handleBasicClasses","prefix","length","children","take","map","thumbnail","image","align","thumbnailProps","_jsxs","Thumbnail","Alignment","left","aspectRatio","AspectRatio","free","fillHeight","displayName","defaultProps"],"mappings":"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"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { useState, useRef, useEffect } from 'react';
|
|
2
|
-
import { W as WINDOW } from './
|
|
2
|
+
import { W as WINDOW } from './478b5c92.js';
|
|
3
3
|
|
|
4
4
|
/** Check if user prefers reduced motion */
|
|
5
5
|
function isReducedMotion() {
|
|
@@ -47,4 +47,4 @@ const useTransitionVisibility = (ref, isComponentVisible, timeout, onVisibilityC
|
|
|
47
47
|
};
|
|
48
48
|
|
|
49
49
|
export { isReducedMotion as i, useTransitionVisibility as u };
|
|
50
|
-
//# sourceMappingURL=
|
|
50
|
+
//# sourceMappingURL=e6dd117e.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"
|
|
1
|
+
{"version":3,"file":"e6dd117e.js","sources":["../../src/utils/browser/isReducedMotion.ts","../../src/hooks/useTransitionVisibility.ts"],"sourcesContent":["import { WINDOW } from '@lumx/react/constants';\n\n/** Check if user prefers reduced motion */\nexport function isReducedMotion() {\n return WINDOW?.matchMedia?.('(prefers-reduced-motion: reduce)').matches;\n}\n","import { RefObject, useEffect, useRef, useState } from 'react';\nimport { isReducedMotion } from '@lumx/react/utils/browser/isReducedMotion';\n\n/**\n * Returns true if the component is visible tracking the opacity transition.\n *\n * @param ref Element on which to listen the transition event.\n * @param isComponentVisible Whether the component intends to be visible or not.\n * @param onVisibilityChange Callback called when the visibility changes.\n * @return true if the component should be rendered\n */\nexport const useTransitionVisibility = (\n ref: RefObject<HTMLElement>,\n isComponentVisible: boolean,\n timeout: number,\n onVisibilityChange?: (isVisible: boolean) => void,\n) => {\n const [isVisible, setVisible] = useState(isComponentVisible);\n const previousVisibility = useRef(isVisible);\n\n // On component visibility change.\n useEffect(() => {\n if (isComponentVisible) {\n setVisible(true);\n return undefined;\n }\n const { current: element } = ref;\n\n // Transition event is not supported or the user prefers reduced motion.\n // => Skip and set visibility to false directly.\n if (!element || !window.TransitionEvent || isReducedMotion()) {\n setVisible(false);\n return undefined;\n }\n\n const timer = setTimeout(() => setVisible(false), timeout);\n return () => clearTimeout(timer);\n }, [isComponentVisible, ref, timeout]);\n\n useEffect(() => {\n if (onVisibilityChange && previousVisibility.current !== isVisible) {\n onVisibilityChange(isVisible);\n previousVisibility.current = isVisible;\n }\n }, [isVisible, onVisibilityChange]);\n\n return isVisible || isComponentVisible;\n};\n"],"names":["isReducedMotion","WINDOW","matchMedia","matches","useTransitionVisibility","ref","isComponentVisible","timeout","onVisibilityChange","isVisible","setVisible","useState","previousVisibility","useRef","useEffect","undefined","current","element","window","TransitionEvent","timer","setTimeout","clearTimeout"],"mappings":";;;AAEA;AACO,SAASA,eAAeA,GAAG;AAC9B,EAAA,OAAOC,MAAM,EAAEC,UAAU,GAAG,kCAAkC,CAAC,CAACC,OAAO,CAAA;AAC3E;;ACFA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMC,uBAAuB,GAAGA,CACnCC,GAA2B,EAC3BC,kBAA2B,EAC3BC,OAAe,EACfC,kBAAiD,KAChD;EACD,MAAM,CAACC,SAAS,EAAEC,UAAU,CAAC,GAAGC,QAAQ,CAACL,kBAAkB,CAAC,CAAA;AAC5D,EAAA,MAAMM,kBAAkB,GAAGC,MAAM,CAACJ,SAAS,CAAC,CAAA;;AAE5C;AACAK,EAAAA,SAAS,CAAC,MAAM;AACZ,IAAA,IAAIR,kBAAkB,EAAE;MACpBI,UAAU,CAAC,IAAI,CAAC,CAAA;AAChB,MAAA,OAAOK,SAAS,CAAA;AACpB,KAAA;IACA,MAAM;AAAEC,MAAAA,OAAO,EAAEC,OAAAA;AAAQ,KAAC,GAAGZ,GAAG,CAAA;;AAEhC;AACA;IACA,IAAI,CAACY,OAAO,IAAI,CAACC,MAAM,CAACC,eAAe,IAAInB,eAAe,EAAE,EAAE;MAC1DU,UAAU,CAAC,KAAK,CAAC,CAAA;AACjB,MAAA,OAAOK,SAAS,CAAA;AACpB,KAAA;IAEA,MAAMK,KAAK,GAAGC,UAAU,CAAC,MAAMX,UAAU,CAAC,KAAK,CAAC,EAAEH,OAAO,CAAC,CAAA;AAC1D,IAAA,OAAO,MAAMe,YAAY,CAACF,KAAK,CAAC,CAAA;GACnC,EAAE,CAACd,kBAAkB,EAAED,GAAG,EAAEE,OAAO,CAAC,CAAC,CAAA;AAEtCO,EAAAA,SAAS,CAAC,MAAM;AACZ,IAAA,IAAIN,kBAAkB,IAAII,kBAAkB,CAACI,OAAO,KAAKP,SAAS,EAAE;MAChED,kBAAkB,CAACC,SAAS,CAAC,CAAA;MAC7BG,kBAAkB,CAACI,OAAO,GAAGP,SAAS,CAAA;AAC1C,KAAA;AACJ,GAAC,EAAE,CAACA,SAAS,EAAED,kBAAkB,CAAC,CAAC,CAAA;EAEnC,OAAOC,SAAS,IAAIH,kBAAkB,CAAA;AAC1C;;;;"}
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import React__default, { useContext } from 'react';
|
|
2
|
-
|
|
3
|
-
/** Disable state */
|
|
2
|
+
import { jsx } from 'react/jsx-runtime';
|
|
4
3
|
|
|
5
4
|
const DisabledStateContext = /*#__PURE__*/React__default.createContext({
|
|
6
5
|
state: null
|
|
@@ -13,9 +12,10 @@ function DisabledStateProvider({
|
|
|
13
12
|
children,
|
|
14
13
|
...value
|
|
15
14
|
}) {
|
|
16
|
-
return /*#__PURE__*/
|
|
17
|
-
value: value
|
|
18
|
-
|
|
15
|
+
return /*#__PURE__*/jsx(DisabledStateContext.Provider, {
|
|
16
|
+
value: value,
|
|
17
|
+
children: children
|
|
18
|
+
});
|
|
19
19
|
}
|
|
20
20
|
|
|
21
21
|
/**
|
|
@@ -26,4 +26,4 @@ function useDisabledStateContext() {
|
|
|
26
26
|
}
|
|
27
27
|
|
|
28
28
|
export { DisabledStateProvider as D, useDisabledStateContext as u };
|
|
29
|
-
//# sourceMappingURL=
|
|
29
|
+
//# sourceMappingURL=ea04260d.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"
|
|
1
|
+
{"version":3,"file":"ea04260d.js","sources":["../../src/utils/disabled/DisabledStateContext.tsx"],"sourcesContent":["import React, { useContext } from 'react';\n\n/** Disable state */\ntype DisabledStateContextValue =\n | {\n state: 'disabled';\n }\n | { state: undefined | null };\n\nexport const DisabledStateContext = React.createContext<DisabledStateContextValue>({ state: null });\n\nexport type DisabledStateProviderProps = DisabledStateContextValue & {\n children: React.ReactNode;\n};\n\n/**\n * Disabled state provider.\n * All nested LumX Design System components inherit this disabled state.\n */\nexport function DisabledStateProvider({ children, ...value }: DisabledStateProviderProps) {\n return <DisabledStateContext.Provider value={value}>{children}</DisabledStateContext.Provider>;\n}\n\n/**\n * Get DisabledState context value\n */\nexport function useDisabledStateContext(): DisabledStateContextValue {\n return useContext(DisabledStateContext);\n}\n"],"names":["DisabledStateContext","React","createContext","state","DisabledStateProvider","children","value","_jsx","Provider","useDisabledStateContext","useContext"],"mappings":";;;AASO,MAAMA,oBAAoB,gBAAGC,cAAK,CAACC,aAAa,CAA4B;AAAEC,EAAAA,KAAK,EAAE,IAAA;AAAK,CAAC,CAAC,CAAA;AAMnG;AACA;AACA;AACA;AACO,SAASC,qBAAqBA,CAAC;EAAEC,QAAQ;EAAE,GAAGC,KAAAA;AAAkC,CAAC,EAAE;AACtF,EAAA,oBAAOC,GAAA,CAACP,oBAAoB,CAACQ,QAAQ,EAAA;AAACF,IAAAA,KAAK,EAAEA,KAAM;AAAAD,IAAAA,QAAA,EAAEA,QAAAA;AAAQ,GAAgC,CAAC,CAAA;AAClG,CAAA;;AAEA;AACA;AACA;AACO,SAASI,uBAAuBA,GAA8B;EACjE,OAAOC,UAAU,CAACV,oBAAoB,CAAC,CAAA;AAC3C;;;;"}
|
|
@@ -1,9 +1,10 @@
|
|
|
1
|
-
import { n as forwardRef, b as Theme, _ as _extends } from './d3321a86.js';
|
|
2
1
|
import React__default, { useEffect } from 'react';
|
|
3
|
-
import { a as SlideshowControls, b as Slides, c as buildSlideShowGroupId, D as DEFAULT_OPTIONS } from './
|
|
4
|
-
export { S as SlideshowItem } from './
|
|
2
|
+
import { a as SlideshowControls, b as Slides, c as buildSlideShowGroupId, D as DEFAULT_OPTIONS } from './34c59f5b.js';
|
|
3
|
+
export { S as SlideshowItem } from './34c59f5b.js';
|
|
5
4
|
import { m as mergeRefs } from './f0d7d6ea.js';
|
|
6
5
|
import { u as useTheme } from './3181f000.js';
|
|
6
|
+
import { n as forwardRef, b as Theme } from './6589b796.js';
|
|
7
|
+
import { jsx } from 'react/jsx-runtime';
|
|
7
8
|
|
|
8
9
|
/**
|
|
9
10
|
* Hook that allows to control when there is a focus event within a given element, meaning
|
|
@@ -29,10 +30,6 @@ const useFocusWithin = ({
|
|
|
29
30
|
}, [onFocusIn, element, onFocusOut]);
|
|
30
31
|
};
|
|
31
32
|
|
|
32
|
-
/**
|
|
33
|
-
* Defines the props of the component.
|
|
34
|
-
*/
|
|
35
|
-
|
|
36
33
|
/**
|
|
37
34
|
* Component default props.
|
|
38
35
|
*/
|
|
@@ -97,7 +94,7 @@ const Slideshow = forwardRef((props, ref) => {
|
|
|
97
94
|
onFocusOut: startAutoPlay
|
|
98
95
|
});
|
|
99
96
|
const showControls = slideshowControlsProps && slidesCount > 1;
|
|
100
|
-
return /*#__PURE__*/
|
|
97
|
+
return /*#__PURE__*/jsx(Slides, {
|
|
101
98
|
activeIndex: currentIndex,
|
|
102
99
|
id: slideshowId,
|
|
103
100
|
className: className,
|
|
@@ -111,39 +108,43 @@ const Slideshow = forwardRef((props, ref) => {
|
|
|
111
108
|
ref: mergeRefs(ref, setSlideshow),
|
|
112
109
|
hasControls: showControls,
|
|
113
110
|
slideGroupLabel: slideGroupLabel,
|
|
114
|
-
afterSlides: slideshowControlsProps && slidesCount > 1 ? /*#__PURE__*/
|
|
115
|
-
className: `${Slides.className}__controls
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
111
|
+
afterSlides: slideshowControlsProps && slidesCount > 1 ? /*#__PURE__*/jsx("div", {
|
|
112
|
+
className: `${Slides.className}__controls`,
|
|
113
|
+
children: /*#__PURE__*/jsx(SlideshowControls, {
|
|
114
|
+
...slideshowControlsProps,
|
|
115
|
+
activeIndex: currentIndex,
|
|
116
|
+
onPaginationClick: onPaginationClick,
|
|
117
|
+
onNextClick: onNextClick,
|
|
118
|
+
onPreviousClick: onPreviousClick,
|
|
119
|
+
slidesCount: slidesCount,
|
|
120
|
+
parentRef: slideshow,
|
|
121
|
+
theme: theme,
|
|
122
|
+
isAutoPlaying: isAutoPlaying,
|
|
123
|
+
nextButtonProps: {
|
|
124
|
+
'aria-controls': slideshowSlidesId,
|
|
125
|
+
...slideshowControlsProps.nextButtonProps
|
|
126
|
+
},
|
|
127
|
+
previousButtonProps: {
|
|
128
|
+
'aria-controls': slideshowSlidesId,
|
|
129
|
+
...slideshowControlsProps.previousButtonProps
|
|
130
|
+
},
|
|
131
|
+
playButtonProps: autoPlay ? {
|
|
132
|
+
'aria-controls': slideshowSlidesId,
|
|
133
|
+
onClick: toggleForcePause,
|
|
134
|
+
...slideshowControlsProps.playButtonProps
|
|
135
|
+
} : undefined,
|
|
136
|
+
paginationItemProps: index => ({
|
|
137
|
+
'aria-controls': buildSlideShowGroupId(slideshowSlidesId, index),
|
|
138
|
+
...slideshowControlsProps.paginationItemProps?.(index)
|
|
139
|
+
})
|
|
141
140
|
})
|
|
142
|
-
})
|
|
143
|
-
|
|
141
|
+
}) : undefined,
|
|
142
|
+
...forwardedProps,
|
|
143
|
+
children: children
|
|
144
|
+
});
|
|
144
145
|
});
|
|
145
146
|
Slideshow.displayName = 'Slideshow';
|
|
146
147
|
Slideshow.defaultProps = DEFAULT_PROPS;
|
|
147
148
|
|
|
148
149
|
export { Slides, Slideshow, SlideshowControls };
|
|
149
|
-
//# sourceMappingURL=
|
|
150
|
+
//# sourceMappingURL=eaa8b1d8.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"77eb8ef3.js","sources":["../../src/hooks/useFocusWithin.ts","../../src/components/slideshow/Slideshow.tsx"],"sourcesContent":["import { useEffect } from 'react';\n\nexport interface UseFocusWithinOptions {\n /** element to add the focus within to */\n element: HTMLElement | null;\n /** callback to be executed on focus in */\n onFocusIn: (ev: FocusEvent) => void;\n /** callback to be executed on focus out */\n onFocusOut: (ev: FocusEvent) => void;\n}\n\n/**\n * Hook that allows to control when there is a focus event within a given element, meaning\n * that any element within the given target will trigger the focus in and focus out events.\n * @param options - UseFocusWithinOptions\n */\nexport const useFocusWithin = ({ element, onFocusIn, onFocusOut }: UseFocusWithinOptions) => {\n useEffect(() => {\n if (element) {\n element.addEventListener('focusin', onFocusIn);\n\n element.addEventListener('focusout', onFocusOut);\n }\n\n return () => {\n if (element) {\n element.removeEventListener('focusin', onFocusIn);\n\n element.removeEventListener('focusout', onFocusOut);\n }\n };\n }, [onFocusIn, element, onFocusOut]);\n};\n","import React from 'react';\n\nimport { SlideshowControls, SlideshowControlsProps, Theme, Slides, SlidesProps } from '@lumx/react';\nimport { DEFAULT_OPTIONS } from '@lumx/react/hooks/useSlideshowControls';\nimport { GenericProps } from '@lumx/react/utils/type';\nimport { useFocusWithin } from '@lumx/react/hooks/useFocusWithin';\nimport { mergeRefs } from '@lumx/react/utils/react/mergeRefs';\nimport { useTheme } from '@lumx/react/utils/theme/ThemeContext';\nimport { forwardRef } from '@lumx/react/utils/react/forwardRef';\n\nimport { buildSlideShowGroupId } from './SlideshowItemGroup';\n\n/**\n * Defines the props of the component.\n */\nexport interface SlideshowProps\n extends GenericProps,\n Pick<SlidesProps, 'autoPlay' | 'slidesId' | 'id' | 'theme' | 'fillHeight' | 'groupBy' | 'slideGroupLabel'> {\n /** current slide active */\n activeIndex?: SlidesProps['activeIndex'];\n /** Interval between each slide when automatic rotation is enabled. */\n interval?: number;\n /** Props to pass to the slideshow controls (minus those already set by the Slideshow props). */\n slideshowControlsProps?: Pick<\n SlideshowControlsProps,\n 'nextButtonProps' | 'previousButtonProps' | 'paginationItemProps'\n > &\n Omit<\n SlideshowControlsProps,\n | 'activeIndex'\n | 'onPaginationClick'\n | 'onNextClick'\n | 'onPreviousClick'\n | 'slidesCount'\n | 'parentRef'\n | 'theme'\n >;\n /** Callback when slide changes */\n onChange?(index: number): void;\n /** Children */\n children?: React.ReactNode;\n}\n\n/**\n * Component default props.\n */\nconst DEFAULT_PROPS: Partial<SlideshowProps> = DEFAULT_OPTIONS;\n\n/**\n * Slideshow component.\n *\n * @param props Component props.\n * @param ref Component ref.\n * @return React element.\n */\nexport const Slideshow = forwardRef<SlideshowProps, HTMLDivElement>((props, ref) => {\n const defaultTheme = useTheme() || Theme.light;\n const {\n activeIndex,\n autoPlay = DEFAULT_PROPS.autoPlay,\n children,\n className,\n fillHeight,\n groupBy = DEFAULT_OPTIONS.groupBy,\n interval = DEFAULT_PROPS.interval,\n onChange,\n slideshowControlsProps,\n theme = defaultTheme,\n id,\n slidesId,\n slideGroupLabel,\n ...forwardedProps\n } = props;\n // Number of slideshow items.\n const itemsCount = React.Children.count(children);\n\n const {\n activeIndex: currentIndex,\n slideshowId,\n setSlideshow,\n isAutoPlaying,\n slideshowSlidesId,\n slidesCount,\n onNextClick,\n onPaginationClick,\n onPreviousClick,\n slideshow,\n stopAutoPlay,\n startAutoPlay,\n toggleAutoPlay,\n toggleForcePause,\n } = SlideshowControls.useSlideshowControls({\n activeIndex,\n defaultActiveIndex: DEFAULT_PROPS.activeIndex as number,\n autoPlay: Boolean(autoPlay),\n itemsCount,\n groupBy,\n id,\n interval,\n onChange,\n slidesId,\n });\n\n useFocusWithin({\n element: slideshow,\n onFocusIn: stopAutoPlay,\n onFocusOut: startAutoPlay,\n });\n\n const showControls = slideshowControlsProps && slidesCount > 1;\n\n return (\n <Slides\n activeIndex={currentIndex}\n id={slideshowId}\n className={className}\n theme={theme}\n fillHeight={fillHeight}\n groupBy={groupBy}\n isAutoPlaying={isAutoPlaying}\n autoPlay={autoPlay}\n slidesId={slideshowSlidesId}\n toggleAutoPlay={toggleAutoPlay}\n ref={mergeRefs(ref, setSlideshow)}\n hasControls={showControls}\n slideGroupLabel={slideGroupLabel}\n afterSlides={\n slideshowControlsProps && slidesCount > 1 ? (\n <div className={`${Slides.className}__controls`}>\n <SlideshowControls\n {...slideshowControlsProps}\n activeIndex={currentIndex}\n onPaginationClick={onPaginationClick}\n onNextClick={onNextClick}\n onPreviousClick={onPreviousClick}\n slidesCount={slidesCount}\n parentRef={slideshow}\n theme={theme}\n isAutoPlaying={isAutoPlaying}\n nextButtonProps={{\n 'aria-controls': slideshowSlidesId,\n ...slideshowControlsProps.nextButtonProps,\n }}\n previousButtonProps={{\n 'aria-controls': slideshowSlidesId,\n ...slideshowControlsProps.previousButtonProps,\n }}\n playButtonProps={\n autoPlay\n ? {\n 'aria-controls': slideshowSlidesId,\n onClick: toggleForcePause,\n ...slideshowControlsProps.playButtonProps,\n }\n : undefined\n }\n paginationItemProps={(index) => ({\n 'aria-controls': buildSlideShowGroupId(slideshowSlidesId, index),\n ...slideshowControlsProps.paginationItemProps?.(index),\n })}\n />\n </div>\n ) : undefined\n }\n {...forwardedProps}\n >\n {children}\n </Slides>\n );\n});\n\nSlideshow.displayName = 'Slideshow';\nSlideshow.defaultProps = DEFAULT_PROPS;\n"],"names":["useFocusWithin","element","onFocusIn","onFocusOut","useEffect","addEventListener","removeEventListener","DEFAULT_PROPS","DEFAULT_OPTIONS","Slideshow","forwardRef","props","ref","defaultTheme","useTheme","Theme","light","activeIndex","autoPlay","children","className","fillHeight","groupBy","interval","onChange","slideshowControlsProps","theme","id","slidesId","slideGroupLabel","forwardedProps","itemsCount","React","Children","count","currentIndex","slideshowId","setSlideshow","isAutoPlaying","slideshowSlidesId","slidesCount","onNextClick","onPaginationClick","onPreviousClick","slideshow","stopAutoPlay","startAutoPlay","toggleAutoPlay","toggleForcePause","SlideshowControls","useSlideshowControls","defaultActiveIndex","Boolean","showControls","createElement","Slides","_extends","mergeRefs","hasControls","afterSlides","parentRef","nextButtonProps","previousButtonProps","playButtonProps","onClick","undefined","paginationItemProps","index","buildSlideShowGroupId","displayName","defaultProps"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"eaa8b1d8.js","sources":["../../src/hooks/useFocusWithin.ts","../../src/components/slideshow/Slideshow.tsx"],"sourcesContent":["import { useEffect } from 'react';\n\nexport interface UseFocusWithinOptions {\n /** element to add the focus within to */\n element: HTMLElement | null;\n /** callback to be executed on focus in */\n onFocusIn: (ev: FocusEvent) => void;\n /** callback to be executed on focus out */\n onFocusOut: (ev: FocusEvent) => void;\n}\n\n/**\n * Hook that allows to control when there is a focus event within a given element, meaning\n * that any element within the given target will trigger the focus in and focus out events.\n * @param options - UseFocusWithinOptions\n */\nexport const useFocusWithin = ({ element, onFocusIn, onFocusOut }: UseFocusWithinOptions) => {\n useEffect(() => {\n if (element) {\n element.addEventListener('focusin', onFocusIn);\n\n element.addEventListener('focusout', onFocusOut);\n }\n\n return () => {\n if (element) {\n element.removeEventListener('focusin', onFocusIn);\n\n element.removeEventListener('focusout', onFocusOut);\n }\n };\n }, [onFocusIn, element, onFocusOut]);\n};\n","import React from 'react';\n\nimport { SlideshowControls, SlideshowControlsProps, Theme, Slides, SlidesProps } from '@lumx/react';\nimport { DEFAULT_OPTIONS } from '@lumx/react/hooks/useSlideshowControls';\nimport { GenericProps } from '@lumx/react/utils/type';\nimport { useFocusWithin } from '@lumx/react/hooks/useFocusWithin';\nimport { mergeRefs } from '@lumx/react/utils/react/mergeRefs';\nimport { useTheme } from '@lumx/react/utils/theme/ThemeContext';\nimport { forwardRef } from '@lumx/react/utils/react/forwardRef';\n\nimport { buildSlideShowGroupId } from './SlideshowItemGroup';\n\n/**\n * Defines the props of the component.\n */\nexport interface SlideshowProps\n extends GenericProps,\n Pick<SlidesProps, 'autoPlay' | 'slidesId' | 'id' | 'theme' | 'fillHeight' | 'groupBy' | 'slideGroupLabel'> {\n /** current slide active */\n activeIndex?: SlidesProps['activeIndex'];\n /** Interval between each slide when automatic rotation is enabled. */\n interval?: number;\n /** Props to pass to the slideshow controls (minus those already set by the Slideshow props). */\n slideshowControlsProps?: Pick<\n SlideshowControlsProps,\n 'nextButtonProps' | 'previousButtonProps' | 'paginationItemProps'\n > &\n Omit<\n SlideshowControlsProps,\n | 'activeIndex'\n | 'onPaginationClick'\n | 'onNextClick'\n | 'onPreviousClick'\n | 'slidesCount'\n | 'parentRef'\n | 'theme'\n >;\n /** Callback when slide changes */\n onChange?(index: number): void;\n /** Children */\n children?: React.ReactNode;\n}\n\n/**\n * Component default props.\n */\nconst DEFAULT_PROPS: Partial<SlideshowProps> = DEFAULT_OPTIONS;\n\n/**\n * Slideshow component.\n *\n * @param props Component props.\n * @param ref Component ref.\n * @return React element.\n */\nexport const Slideshow = forwardRef<SlideshowProps, HTMLDivElement>((props, ref) => {\n const defaultTheme = useTheme() || Theme.light;\n const {\n activeIndex,\n autoPlay = DEFAULT_PROPS.autoPlay,\n children,\n className,\n fillHeight,\n groupBy = DEFAULT_OPTIONS.groupBy,\n interval = DEFAULT_PROPS.interval,\n onChange,\n slideshowControlsProps,\n theme = defaultTheme,\n id,\n slidesId,\n slideGroupLabel,\n ...forwardedProps\n } = props;\n // Number of slideshow items.\n const itemsCount = React.Children.count(children);\n\n const {\n activeIndex: currentIndex,\n slideshowId,\n setSlideshow,\n isAutoPlaying,\n slideshowSlidesId,\n slidesCount,\n onNextClick,\n onPaginationClick,\n onPreviousClick,\n slideshow,\n stopAutoPlay,\n startAutoPlay,\n toggleAutoPlay,\n toggleForcePause,\n } = SlideshowControls.useSlideshowControls({\n activeIndex,\n defaultActiveIndex: DEFAULT_PROPS.activeIndex as number,\n autoPlay: Boolean(autoPlay),\n itemsCount,\n groupBy,\n id,\n interval,\n onChange,\n slidesId,\n });\n\n useFocusWithin({\n element: slideshow,\n onFocusIn: stopAutoPlay,\n onFocusOut: startAutoPlay,\n });\n\n const showControls = slideshowControlsProps && slidesCount > 1;\n\n return (\n <Slides\n activeIndex={currentIndex}\n id={slideshowId}\n className={className}\n theme={theme}\n fillHeight={fillHeight}\n groupBy={groupBy}\n isAutoPlaying={isAutoPlaying}\n autoPlay={autoPlay}\n slidesId={slideshowSlidesId}\n toggleAutoPlay={toggleAutoPlay}\n ref={mergeRefs(ref, setSlideshow)}\n hasControls={showControls}\n slideGroupLabel={slideGroupLabel}\n afterSlides={\n slideshowControlsProps && slidesCount > 1 ? (\n <div className={`${Slides.className}__controls`}>\n <SlideshowControls\n {...slideshowControlsProps}\n activeIndex={currentIndex}\n onPaginationClick={onPaginationClick}\n onNextClick={onNextClick}\n onPreviousClick={onPreviousClick}\n slidesCount={slidesCount}\n parentRef={slideshow}\n theme={theme}\n isAutoPlaying={isAutoPlaying}\n nextButtonProps={{\n 'aria-controls': slideshowSlidesId,\n ...slideshowControlsProps.nextButtonProps,\n }}\n previousButtonProps={{\n 'aria-controls': slideshowSlidesId,\n ...slideshowControlsProps.previousButtonProps,\n }}\n playButtonProps={\n autoPlay\n ? {\n 'aria-controls': slideshowSlidesId,\n onClick: toggleForcePause,\n ...slideshowControlsProps.playButtonProps,\n }\n : undefined\n }\n paginationItemProps={(index) => ({\n 'aria-controls': buildSlideShowGroupId(slideshowSlidesId, index),\n ...slideshowControlsProps.paginationItemProps?.(index),\n })}\n />\n </div>\n ) : undefined\n }\n {...forwardedProps}\n >\n {children}\n </Slides>\n );\n});\n\nSlideshow.displayName = 'Slideshow';\nSlideshow.defaultProps = DEFAULT_PROPS;\n"],"names":["useFocusWithin","element","onFocusIn","onFocusOut","useEffect","addEventListener","removeEventListener","DEFAULT_PROPS","DEFAULT_OPTIONS","Slideshow","forwardRef","props","ref","defaultTheme","useTheme","Theme","light","activeIndex","autoPlay","children","className","fillHeight","groupBy","interval","onChange","slideshowControlsProps","theme","id","slidesId","slideGroupLabel","forwardedProps","itemsCount","React","Children","count","currentIndex","slideshowId","setSlideshow","isAutoPlaying","slideshowSlidesId","slidesCount","onNextClick","onPaginationClick","onPreviousClick","slideshow","stopAutoPlay","startAutoPlay","toggleAutoPlay","toggleForcePause","SlideshowControls","useSlideshowControls","defaultActiveIndex","Boolean","showControls","_jsx","Slides","mergeRefs","hasControls","afterSlides","parentRef","nextButtonProps","previousButtonProps","playButtonProps","onClick","undefined","paginationItemProps","index","buildSlideShowGroupId","displayName","defaultProps"],"mappings":"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"}
|
|
@@ -1,15 +1,16 @@
|
|
|
1
1
|
import React__default, { useReducer, useEffect, useCallback } from 'react';
|
|
2
2
|
import { r as reducer, I as INIT_STATE, T as TabProviderContext, u as useTabProviderContextState, a as useTabProviderContext } from './825ac334.js';
|
|
3
|
-
import {
|
|
3
|
+
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
4
|
+
import { m as getRootClassName, n as forwardRef, l as classNames, c as Size, K as Kind, C as CSS_PREFIX } from './6589b796.js';
|
|
4
5
|
import { m as mergeRefs } from './f0d7d6ea.js';
|
|
5
6
|
import { u as useRovingTabIndex } from './7daf0f24.js';
|
|
6
|
-
import { h as handleBasicClasses } from './
|
|
7
|
-
import { u as useDisableStateProps } from './
|
|
8
|
-
import { I as Icon, m as mdiAlertCircle } from './
|
|
9
|
-
import { InputLabel } from './
|
|
10
|
-
import { InputHelper } from './
|
|
7
|
+
import { h as handleBasicClasses } from './e2afb13f.js';
|
|
8
|
+
import { u as useDisableStateProps } from './b8667090.js';
|
|
9
|
+
import { I as Icon, m as mdiAlertCircle } from './8ab42752.js';
|
|
10
|
+
import { InputLabel } from './b0a7a999.js';
|
|
11
|
+
import { InputHelper } from './5f8f9454.js';
|
|
11
12
|
import { m as mdiCheckCircle } from './de24f857.js';
|
|
12
|
-
import './
|
|
13
|
+
import './478b5c92.js';
|
|
13
14
|
|
|
14
15
|
const mdiRadioboxBlank = 'M12 20a8 8 0 0 1-8-8 8 8 0 0 1 8-8 8 8 0 0 1 8 8 8 8 0 0 1-8 8m0-18A10 10 0 0 0 2 12a10 10 0 0 0 10 10 10 10 0 0 0 10-10A10 10 0 0 0 12 2';
|
|
15
16
|
|
|
@@ -62,16 +63,13 @@ const ProgressTrackerProvider = props => {
|
|
|
62
63
|
},
|
|
63
64
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
64
65
|
[onChange, state.activeTabIndex]);
|
|
65
|
-
return /*#__PURE__*/
|
|
66
|
-
value: [state, dispatch]
|
|
67
|
-
|
|
66
|
+
return /*#__PURE__*/jsx(TabProviderContext.Provider, {
|
|
67
|
+
value: [state, dispatch],
|
|
68
|
+
children: children
|
|
69
|
+
});
|
|
68
70
|
};
|
|
69
71
|
ProgressTrackerProvider.defaultProps = DEFAULT_PROPS$3;
|
|
70
72
|
|
|
71
|
-
/**
|
|
72
|
-
* Defines the props of the component.
|
|
73
|
-
*/
|
|
74
|
-
|
|
75
73
|
/**
|
|
76
74
|
* Component display name.
|
|
77
75
|
*/
|
|
@@ -114,37 +112,35 @@ const ProgressTracker = forwardRef((props, ref) => {
|
|
|
114
112
|
const numberOfSteps = state?.ids?.tab?.length || 0;
|
|
115
113
|
const backgroundPosition = numberOfSteps > 0 ? 100 / (numberOfSteps * 2) : 0;
|
|
116
114
|
const trackPosition = numberOfSteps > 0 ? 100 / (numberOfSteps - 1) * (state?.activeTabIndex || 0) / 100 : 0;
|
|
117
|
-
return /*#__PURE__*/
|
|
118
|
-
ref: mergeRefs(ref, stepListRef)
|
|
119
|
-
|
|
120
|
-
className: classNames(className, CLASSNAME$2)
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
115
|
+
return /*#__PURE__*/jsxs("div", {
|
|
116
|
+
ref: mergeRefs(ref, stepListRef),
|
|
117
|
+
...forwardedProps,
|
|
118
|
+
className: classNames(className, CLASSNAME$2),
|
|
119
|
+
children: [/*#__PURE__*/jsx("div", {
|
|
120
|
+
className: `${CLASSNAME$2}__steps`,
|
|
121
|
+
role: "tablist",
|
|
122
|
+
"aria-label": ariaLabel,
|
|
123
|
+
children: children
|
|
124
|
+
}), /*#__PURE__*/jsx("div", {
|
|
125
|
+
className: `${CLASSNAME$2}__background-bar`,
|
|
126
|
+
style: {
|
|
127
|
+
left: `${backgroundPosition}%`,
|
|
128
|
+
right: `${backgroundPosition}%`
|
|
129
|
+
}
|
|
130
|
+
}), /*#__PURE__*/jsx("div", {
|
|
131
|
+
className: `${CLASSNAME$2}__foreground-bar`,
|
|
132
|
+
style: {
|
|
133
|
+
left: `${backgroundPosition}%`,
|
|
134
|
+
right: `${backgroundPosition}%`,
|
|
135
|
+
transform: `scaleX(${trackPosition})`
|
|
136
|
+
}
|
|
137
|
+
})]
|
|
138
|
+
});
|
|
139
139
|
});
|
|
140
140
|
ProgressTracker.displayName = COMPONENT_NAME$2;
|
|
141
141
|
ProgressTracker.className = CLASSNAME$2;
|
|
142
142
|
ProgressTracker.defaultProps = DEFAULT_PROPS$2;
|
|
143
143
|
|
|
144
|
-
/**
|
|
145
|
-
* Defines the props of the component.
|
|
146
|
-
*/
|
|
147
|
-
|
|
148
144
|
/**
|
|
149
145
|
* Component display name.
|
|
150
146
|
*/
|
|
@@ -217,9 +213,9 @@ const ProgressTrackerStep = forwardRef((props, ref) => {
|
|
|
217
213
|
}
|
|
218
214
|
return mdiRadioboxBlank;
|
|
219
215
|
};
|
|
220
|
-
return /*#__PURE__*/
|
|
221
|
-
ref: ref
|
|
222
|
-
|
|
216
|
+
return /*#__PURE__*/jsxs("button", {
|
|
217
|
+
ref: ref,
|
|
218
|
+
...forwardedProps,
|
|
223
219
|
type: "button",
|
|
224
220
|
id: state?.tabId,
|
|
225
221
|
className: classNames(className, handleBasicClasses({
|
|
@@ -236,27 +232,26 @@ const ProgressTrackerStep = forwardRef((props, ref) => {
|
|
|
236
232
|
tabIndex: isActive ? 0 : tabIndex,
|
|
237
233
|
"aria-disabled": isAnyDisabled,
|
|
238
234
|
"aria-selected": isActive,
|
|
239
|
-
"aria-controls": state?.tabPanelId
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
235
|
+
"aria-controls": state?.tabPanelId,
|
|
236
|
+
children: [/*#__PURE__*/jsx(Icon, {
|
|
237
|
+
className: `${CLASSNAME$1}__state`,
|
|
238
|
+
icon: getIcon(),
|
|
239
|
+
size: Size.s
|
|
240
|
+
}), /*#__PURE__*/jsx(InputLabel, {
|
|
241
|
+
htmlFor: state?.tabId || '',
|
|
242
|
+
className: `${CLASSNAME$1}__label`,
|
|
243
|
+
children: label
|
|
244
|
+
}), helper && /*#__PURE__*/jsx(InputHelper, {
|
|
245
|
+
kind: hasError ? Kind.error : Kind.info,
|
|
246
|
+
className: `${CLASSNAME$1}__helper`,
|
|
247
|
+
children: helper
|
|
248
|
+
})]
|
|
249
|
+
});
|
|
251
250
|
});
|
|
252
251
|
ProgressTrackerStep.displayName = COMPONENT_NAME$1;
|
|
253
252
|
ProgressTrackerStep.className = CLASSNAME$1;
|
|
254
253
|
ProgressTrackerStep.defaultProps = DEFAULT_PROPS$1;
|
|
255
254
|
|
|
256
|
-
/**
|
|
257
|
-
* Defines the props of the component.
|
|
258
|
-
*/
|
|
259
|
-
|
|
260
255
|
/**
|
|
261
256
|
* Component display name.
|
|
262
257
|
*/
|
|
@@ -291,9 +286,9 @@ const ProgressTrackerStepPanel = forwardRef((props, ref) => {
|
|
|
291
286
|
} = props;
|
|
292
287
|
const state = useTabProviderContext('tabPanel', id);
|
|
293
288
|
const isActive = propIsActive || state?.isActive;
|
|
294
|
-
return /*#__PURE__*/
|
|
295
|
-
ref: ref
|
|
296
|
-
|
|
289
|
+
return /*#__PURE__*/jsx("div", {
|
|
290
|
+
ref: ref,
|
|
291
|
+
...forwardedProps,
|
|
297
292
|
id: state?.tabPanelId,
|
|
298
293
|
className: classNames(className, handleBasicClasses({
|
|
299
294
|
prefix: CLASSNAME,
|
|
@@ -301,12 +296,13 @@ const ProgressTrackerStepPanel = forwardRef((props, ref) => {
|
|
|
301
296
|
})),
|
|
302
297
|
role: "tabpanel",
|
|
303
298
|
tabIndex: isActive ? 0 : -1,
|
|
304
|
-
"aria-labelledby": state?.tabId
|
|
305
|
-
|
|
299
|
+
"aria-labelledby": state?.tabId,
|
|
300
|
+
children: (!state?.isLazy || isActive) && children
|
|
301
|
+
});
|
|
306
302
|
});
|
|
307
303
|
ProgressTrackerStepPanel.displayName = COMPONENT_NAME;
|
|
308
304
|
ProgressTrackerStepPanel.className = CLASSNAME;
|
|
309
305
|
ProgressTrackerStepPanel.defaultProps = DEFAULT_PROPS;
|
|
310
306
|
|
|
311
307
|
export { ProgressTracker, ProgressTrackerProvider, ProgressTrackerStep, ProgressTrackerStepPanel };
|
|
312
|
-
//# sourceMappingURL=
|
|
308
|
+
//# sourceMappingURL=edab29ce.js.map
|