@fluentui-copilot/react-morse-code 0.0.5 → 0.0.7
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/CHANGELOG.json +45 -1
- package/CHANGELOG.md +21 -2
- package/dist/index.d.ts +1 -0
- package/lib/components/MorseCode.types.js.map +1 -1
- package/lib/components/MorseCodeFallback.js +8 -10
- package/lib/components/MorseCodeFallback.js.map +1 -1
- package/lib/components/MorseCodeHoudini.js +6 -2
- package/lib/components/MorseCodeHoudini.js.map +1 -1
- package/lib-commonjs/components/MorseCode.types.js.map +1 -1
- package/lib-commonjs/components/MorseCodeFallback.js +5 -10
- package/lib-commonjs/components/MorseCodeFallback.js.map +1 -1
- package/lib-commonjs/components/MorseCodeHoudini.js +4 -2
- package/lib-commonjs/components/MorseCodeHoudini.js.map +1 -1
- package/package.json +5 -5
package/CHANGELOG.json
CHANGED
|
@@ -2,7 +2,51 @@
|
|
|
2
2
|
"name": "@fluentui-copilot/react-morse-code",
|
|
3
3
|
"entries": [
|
|
4
4
|
{
|
|
5
|
-
"date": "
|
|
5
|
+
"date": "Mon, 19 May 2025 18:03:24 GMT",
|
|
6
|
+
"tag": "@fluentui-copilot/react-morse-code_v0.0.7",
|
|
7
|
+
"version": "0.0.7",
|
|
8
|
+
"comments": {
|
|
9
|
+
"patch": [
|
|
10
|
+
{
|
|
11
|
+
"author": "seanmonahan@microsoft.com",
|
|
12
|
+
"package": "@fluentui-copilot/react-morse-code",
|
|
13
|
+
"commit": "fbac9207adceef0452cb82deb5086ea80bee0d1b",
|
|
14
|
+
"comment": "feat: pass props through to underlying DOM elements"
|
|
15
|
+
},
|
|
16
|
+
{
|
|
17
|
+
"author": "seanmonahan@microsoft.com",
|
|
18
|
+
"package": "@fluentui-copilot/react-morse-code",
|
|
19
|
+
"commit": "330a550d94b417426f04be631de75174655daa7a",
|
|
20
|
+
"comment": "fix: remove Webkit-specific code path"
|
|
21
|
+
}
|
|
22
|
+
],
|
|
23
|
+
"none": [
|
|
24
|
+
{
|
|
25
|
+
"author": "hochelmartin@gmail.com",
|
|
26
|
+
"package": "@fluentui-copilot/react-morse-code",
|
|
27
|
+
"commit": "442954951d0eca92de20ecb0ff0fa9492431b62d",
|
|
28
|
+
"comment": "fix: exclude story files from production build"
|
|
29
|
+
}
|
|
30
|
+
]
|
|
31
|
+
}
|
|
32
|
+
},
|
|
33
|
+
{
|
|
34
|
+
"date": "Sat, 03 May 2025 01:27:44 GMT",
|
|
35
|
+
"tag": "@fluentui-copilot/react-morse-code_v0.0.6",
|
|
36
|
+
"version": "0.0.6",
|
|
37
|
+
"comments": {
|
|
38
|
+
"patch": [
|
|
39
|
+
{
|
|
40
|
+
"author": "estebanmu@microsoft.com",
|
|
41
|
+
"package": "@fluentui-copilot/react-morse-code",
|
|
42
|
+
"commit": "3dc05bb66ec473691f198f65b5124cc24390f47c",
|
|
43
|
+
"comment": "chore: Bump @fluentui/react-components to 9.63.0."
|
|
44
|
+
}
|
|
45
|
+
]
|
|
46
|
+
}
|
|
47
|
+
},
|
|
48
|
+
{
|
|
49
|
+
"date": "Wed, 30 Apr 2025 01:47:49 GMT",
|
|
6
50
|
"tag": "@fluentui-copilot/react-morse-code_v0.0.5",
|
|
7
51
|
"version": "0.0.5",
|
|
8
52
|
"comments": {
|
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,31 @@
|
|
|
1
1
|
# Change Log - @fluentui-copilot/react-morse-code
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Mon, 19 May 2025 18:03:24 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [0.0.7](https://github.com/microsoft/fluentai/tree/@fluentui-copilot/react-morse-code_v0.0.7)
|
|
8
|
+
|
|
9
|
+
Mon, 19 May 2025 18:03:24 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentai/compare/@fluentui-copilot/react-morse-code_v0.0.6..@fluentui-copilot/react-morse-code_v0.0.7)
|
|
11
|
+
|
|
12
|
+
### Patches
|
|
13
|
+
|
|
14
|
+
- feat: pass props through to underlying DOM elements ([PR #2991](https://github.com/microsoft/fluentai/pull/2991) by seanmonahan@microsoft.com)
|
|
15
|
+
- fix: remove Webkit-specific code path ([PR #2993](https://github.com/microsoft/fluentai/pull/2993) by seanmonahan@microsoft.com)
|
|
16
|
+
|
|
17
|
+
## [0.0.6](https://github.com/microsoft/fluentai/tree/@fluentui-copilot/react-morse-code_v0.0.6)
|
|
18
|
+
|
|
19
|
+
Sat, 03 May 2025 01:27:44 GMT
|
|
20
|
+
[Compare changes](https://github.com/microsoft/fluentai/compare/@fluentui-copilot/react-morse-code_v0.0.5..@fluentui-copilot/react-morse-code_v0.0.6)
|
|
21
|
+
|
|
22
|
+
### Patches
|
|
23
|
+
|
|
24
|
+
- chore: Bump @fluentui/react-components to 9.63.0. ([PR #2917](https://github.com/microsoft/fluentai/pull/2917) by estebanmu@microsoft.com)
|
|
25
|
+
|
|
7
26
|
## [0.0.5](https://github.com/microsoft/fluentai/tree/@fluentui-copilot/react-morse-code_v0.0.5)
|
|
8
27
|
|
|
9
|
-
Wed, 30 Apr 2025 01:
|
|
28
|
+
Wed, 30 Apr 2025 01:47:49 GMT
|
|
10
29
|
[Compare changes](https://github.com/microsoft/fluentai/compare/@fluentui-copilot/react-morse-code_v0.0.1..@fluentui-copilot/react-morse-code_v0.0.5)
|
|
11
30
|
|
|
12
31
|
### Patches
|
package/dist/index.d.ts
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["MorseCode.types.tsx"],"sourcesContent":["export type MorseCodeProps = {\n baseUrl?: string;\n fileName?: string;\n};\n"],"names":[],"rangeMappings":"","mappings":"AAAA,
|
|
1
|
+
{"version":3,"sources":["MorseCode.types.tsx"],"sourcesContent":["export type MorseCodeProps = {\n baseUrl?: string;\n fileName?: string;\n className?: string;\n};\n"],"names":[],"rangeMappings":"","mappings":"AAAA,WAIE"}
|
|
@@ -2,33 +2,31 @@ import * as React from 'react';
|
|
|
2
2
|
import { mergeClasses } from '@fluentui/react-components';
|
|
3
3
|
import { morseCode } from '@fluentui-copilot/morse-code';
|
|
4
4
|
import { useMorseCodeStyles } from './MorseCode.styles';
|
|
5
|
-
import { hasWebkitCanvas } from '@fluentui-contrib/houdini-utils';
|
|
6
|
-
const IS_WEBKIT = hasWebkitCanvas();
|
|
7
5
|
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
|
8
6
|
const ON_COMPLETE_NOOP = () => {};
|
|
9
|
-
export const MorseCodeFallback =
|
|
7
|
+
export const MorseCodeFallback = props => {
|
|
10
8
|
const morseCodeStyles = useMorseCodeStyles();
|
|
11
9
|
const targetRef = React.useCallback(node => {
|
|
12
10
|
let animControls;
|
|
13
11
|
if (node) {
|
|
14
12
|
animControls = morseCode(node);
|
|
15
|
-
if (IS_WEBKIT && animControls.canvas) {
|
|
16
|
-
animControls.canvas.setAttribute('style', '');
|
|
17
|
-
node.appendChild(animControls.canvas);
|
|
18
|
-
}
|
|
19
13
|
animControls.play(ON_COMPLETE_NOOP);
|
|
20
14
|
} else {
|
|
21
15
|
if (animControls) {
|
|
22
|
-
var _animControls_canvas;
|
|
23
16
|
animControls.stop();
|
|
24
17
|
animControls.cleanup();
|
|
25
|
-
IS_WEBKIT && ((_animControls_canvas = animControls.canvas) === null || _animControls_canvas === void 0 ? void 0 : _animControls_canvas.remove());
|
|
26
18
|
animControls = undefined;
|
|
27
19
|
}
|
|
28
20
|
}
|
|
29
21
|
}, []);
|
|
22
|
+
const {
|
|
23
|
+
className,
|
|
24
|
+
...restProps
|
|
25
|
+
} = props;
|
|
26
|
+
const cn = mergeClasses(morseCodeStyles.wrapper, className);
|
|
30
27
|
return /*#__PURE__*/React.createElement("div", {
|
|
31
|
-
className:
|
|
28
|
+
className: cn,
|
|
29
|
+
...restProps
|
|
32
30
|
}, /*#__PURE__*/React.createElement("div", {
|
|
33
31
|
ref: targetRef,
|
|
34
32
|
className: mergeClasses('fai-MorseCode', 'fai-MorseCodeFallback', morseCodeStyles.base)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["MorseCodeFallback.tsx"],"sourcesContent":["import * as React from 'react';\nimport { mergeClasses } from '@fluentui/react-components';\nimport { morseCode } from '@fluentui-copilot/morse-code';\nimport { useMorseCodeStyles } from './MorseCode.styles';\
|
|
1
|
+
{"version":3,"sources":["MorseCodeFallback.tsx"],"sourcesContent":["import * as React from 'react';\nimport { mergeClasses } from '@fluentui/react-components';\nimport { morseCode } from '@fluentui-copilot/morse-code';\nimport { useMorseCodeStyles } from './MorseCode.styles';\n\nimport type { MorseCodeProps } from './MorseCode.types';\n\ntype FallbackAnimation = ReturnType<typeof morseCode>;\n\n// eslint-disable-next-line @typescript-eslint/no-empty-function\nconst ON_COMPLETE_NOOP = () => {};\n\nexport const MorseCodeFallback: React.FC<MorseCodeProps> = props => {\n const morseCodeStyles = useMorseCodeStyles();\n\n const targetRef = React.useCallback((node: HTMLElement | null) => {\n let animControls: FallbackAnimation | undefined;\n\n if (node) {\n animControls = morseCode(node);\n animControls.play(ON_COMPLETE_NOOP);\n } else {\n if (animControls) {\n animControls.stop();\n animControls.cleanup();\n animControls = undefined;\n }\n }\n }, []);\n\n const { className, ...restProps } = props;\n const cn = mergeClasses(morseCodeStyles.wrapper, className);\n\n return (\n <div className={cn} {...restProps}>\n <div ref={targetRef} className={mergeClasses('fai-MorseCode', 'fai-MorseCodeFallback', morseCodeStyles.base)} />\n </div>\n );\n};\n"],"names":["React","mergeClasses","morseCode","useMorseCodeStyles","ON_COMPLETE_NOOP","MorseCodeFallback","props","morseCodeStyles","targetRef","useCallback","node","animControls","play","stop","cleanup","undefined","className","restProps","cn","wrapper","div","ref","base"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,YAAY,QAAQ,6BAA6B;AAC1D,SAASC,SAAS,QAAQ,+BAA+B;AACzD,SAASC,kBAAkB,QAAQ,qBAAqB;AAMxD,gEAAgE;AAChE,MAAMC,mBAAmB,KAAO;AAEhC,OAAO,MAAMC,oBAA8CC,CAAAA;IACzD,MAAMC,kBAAkBJ;IAExB,MAAMK,YAAYR,MAAMS,WAAW,CAAC,CAACC;QACnC,IAAIC;QAEJ,IAAID,MAAM;YACRC,eAAeT,UAAUQ;YACzBC,aAAaC,IAAI,CAACR;QACpB,OAAO;YACL,IAAIO,cAAc;gBAChBA,aAAaE,IAAI;gBACjBF,aAAaG,OAAO;gBACpBH,eAAeI;YACjB;QACF;IACF,GAAG,EAAE;IAEL,MAAM,EAAEC,SAAS,EAAE,GAAGC,WAAW,GAAGX;IACpC,MAAMY,KAAKjB,aAAaM,gBAAgBY,OAAO,EAAEH;IAEjD,qBACE,oBAACI;QAAIJ,WAAWE;QAAK,GAAGD,SAAS;qBAC/B,oBAACG;QAAIC,KAAKb;QAAWQ,WAAWf,aAAa,iBAAiB,yBAAyBM,gBAAgBe,IAAI;;AAGjH,EAAE"}
|
|
@@ -11,7 +11,9 @@ const useMorseCodeAnimationClassName = __resetStyles("r1ms8zpq", "rqpk8qn", {
|
|
|
11
11
|
});
|
|
12
12
|
export const MorseCodeHoudini = ({
|
|
13
13
|
baseUrl = DEFAULT_BASE_URL,
|
|
14
|
-
fileName = DEFAULT_FILE_URL
|
|
14
|
+
fileName = DEFAULT_FILE_URL,
|
|
15
|
+
className,
|
|
16
|
+
...restProps
|
|
15
17
|
}) => {
|
|
16
18
|
React.useEffect(() => {
|
|
17
19
|
const path = `${baseUrl}${fileName}`;
|
|
@@ -25,8 +27,10 @@ export const MorseCodeHoudini = ({
|
|
|
25
27
|
}, [baseUrl, fileName]);
|
|
26
28
|
const morseCodeStyles = useMorseCodeStyles();
|
|
27
29
|
const animationClassName = useMorseCodeAnimationClassName();
|
|
30
|
+
const cn = mergeClasses(morseCodeStyles.wrapper, className);
|
|
28
31
|
return /*#__PURE__*/React.createElement("div", {
|
|
29
|
-
className:
|
|
32
|
+
className: cn,
|
|
33
|
+
...restProps
|
|
30
34
|
}, /*#__PURE__*/React.createElement("div", {
|
|
31
35
|
className: mergeClasses('fai-MorseCode', 'fai-MorseCodeHoudini', morseCodeStyles.base, animationClassName)
|
|
32
36
|
}));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["MorseCodeHoudini.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { makeResetStyles, mergeClasses } from '@fluentui/react-components';\nimport { addModule } from '@fluentui-contrib/houdini-utils';\nimport { useMorseCodeStyles } from './MorseCode.styles';\n\nimport {\n initializeMorseCodeCustomProperties,\n morseCodeAnimationTokens,\n morseCodeTokens,\n DEFAULT_BASE_URL,\n DEFAULT_FILE_URL,\n} from '@fluentui-copilot/morse-code';\n\nimport type { MorseCodeProps } from './MorseCode.types';\n\nconst initializedModules = {} as Record<string, boolean>;\n\ninitializeMorseCodeCustomProperties();\n\nconst useMorseCodeAnimationClassName = makeResetStyles({\n backgroundImage: morseCodeTokens.backgroundImage,\n animationIterationCount: morseCodeTokens.morseCodeAnimationIterationCount,\n animationDuration: morseCodeTokens.morseCodeAnimationDuration,\n animationTimingFunction: morseCodeTokens.morseCodeAnimationTimingFunction,\n animationName: [morseCodeAnimationTokens.colorAnimation, morseCodeAnimationTokens.dotsAndDashes],\n\n '@media (forced-colors: active)': {\n backgroundImage: morseCodeTokens.backgroundImage,\n animationIterationCount: morseCodeTokens.morseCodeAnimationIterationCount,\n animationDuration: morseCodeTokens.morseCodeAnimationDuration,\n animationTimingFunction: morseCodeTokens.morseCodeAnimationTimingFunction,\n animationName: [morseCodeAnimationTokens.colorHCAnimation, morseCodeAnimationTokens.dotsAndDashes],\n },\n});\n\nexport const MorseCodeHoudini: React.FC<MorseCodeProps> = ({\n baseUrl = DEFAULT_BASE_URL,\n fileName = DEFAULT_FILE_URL,\n}) => {\n React.useEffect(() => {\n const path = `${baseUrl}${fileName}`;\n if (!initializedModules[path]) {\n addModule(baseUrl, fileName)\n .then(() => {\n initializedModules[path] = true;\n })\n .catch(err => {\n initializedModules[path] = false;\n });\n }\n }, [baseUrl, fileName]);\n\n const morseCodeStyles = useMorseCodeStyles();\n const animationClassName = useMorseCodeAnimationClassName();\n\n return (\n <div className={
|
|
1
|
+
{"version":3,"sources":["MorseCodeHoudini.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { makeResetStyles, mergeClasses } from '@fluentui/react-components';\nimport { addModule } from '@fluentui-contrib/houdini-utils';\nimport { useMorseCodeStyles } from './MorseCode.styles';\n\nimport {\n initializeMorseCodeCustomProperties,\n morseCodeAnimationTokens,\n morseCodeTokens,\n DEFAULT_BASE_URL,\n DEFAULT_FILE_URL,\n} from '@fluentui-copilot/morse-code';\n\nimport type { MorseCodeProps } from './MorseCode.types';\n\nconst initializedModules = {} as Record<string, boolean>;\n\ninitializeMorseCodeCustomProperties();\n\nconst useMorseCodeAnimationClassName = makeResetStyles({\n backgroundImage: morseCodeTokens.backgroundImage,\n animationIterationCount: morseCodeTokens.morseCodeAnimationIterationCount,\n animationDuration: morseCodeTokens.morseCodeAnimationDuration,\n animationTimingFunction: morseCodeTokens.morseCodeAnimationTimingFunction,\n animationName: [morseCodeAnimationTokens.colorAnimation, morseCodeAnimationTokens.dotsAndDashes],\n\n '@media (forced-colors: active)': {\n backgroundImage: morseCodeTokens.backgroundImage,\n animationIterationCount: morseCodeTokens.morseCodeAnimationIterationCount,\n animationDuration: morseCodeTokens.morseCodeAnimationDuration,\n animationTimingFunction: morseCodeTokens.morseCodeAnimationTimingFunction,\n animationName: [morseCodeAnimationTokens.colorHCAnimation, morseCodeAnimationTokens.dotsAndDashes],\n },\n});\n\nexport const MorseCodeHoudini: React.FC<MorseCodeProps> = ({\n baseUrl = DEFAULT_BASE_URL,\n fileName = DEFAULT_FILE_URL,\n className,\n ...restProps\n}) => {\n React.useEffect(() => {\n const path = `${baseUrl}${fileName}`;\n if (!initializedModules[path]) {\n addModule(baseUrl, fileName)\n .then(() => {\n initializedModules[path] = true;\n })\n .catch(err => {\n initializedModules[path] = false;\n });\n }\n }, [baseUrl, fileName]);\n\n const morseCodeStyles = useMorseCodeStyles();\n const animationClassName = useMorseCodeAnimationClassName();\n const cn = mergeClasses(morseCodeStyles.wrapper, className);\n\n return (\n <div className={cn} {...restProps}>\n <div\n className={mergeClasses('fai-MorseCode', 'fai-MorseCodeHoudini', morseCodeStyles.base, animationClassName)}\n />\n </div>\n );\n};\n"],"names":["React","makeResetStyles","mergeClasses","addModule","useMorseCodeStyles","initializeMorseCodeCustomProperties","morseCodeAnimationTokens","morseCodeTokens","DEFAULT_BASE_URL","DEFAULT_FILE_URL","initializedModules","useMorseCodeAnimationClassName","backgroundImage","animationIterationCount","morseCodeAnimationIterationCount","animationDuration","morseCodeAnimationDuration","animationTimingFunction","morseCodeAnimationTimingFunction","animationName","colorAnimation","dotsAndDashes","colorHCAnimation","MorseCodeHoudini","baseUrl","fileName","className","restProps","useEffect","path","then","catch","err","morseCodeStyles","animationClassName","cn","wrapper","div","base"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,eAAe,EAAEC,YAAY,QAAQ,6BAA6B;AAC3E,SAASC,SAAS,QAAQ,kCAAkC;AAC5D,SAASC,kBAAkB,QAAQ,qBAAqB;AAExD,SACEC,mCAAmC,EACnCC,wBAAwB,EACxBC,eAAe,EACfC,gBAAgB,EAChBC,gBAAgB,QACX,+BAA+B;AAItC,MAAMC,qBAAqB,CAAC;AAE5BL;AAEA,MAAMM,iCAAiCV,gBAAgB;IACrDW,iBAAiBL,gBAAgBK,eAAe;IAChDC,yBAAyBN,gBAAgBO,gCAAgC;IACzEC,mBAAmBR,gBAAgBS,0BAA0B;IAC7DC,yBAAyBV,gBAAgBW,gCAAgC;IACzEC,eAAe;QAACb,yBAAyBc,cAAc;QAAEd,yBAAyBe,aAAa;KAAC;IAEhG,kCAAkC;QAChCT,iBAAiBL,gBAAgBK,eAAe;QAChDC,yBAAyBN,gBAAgBO,gCAAgC;QACzEC,mBAAmBR,gBAAgBS,0BAA0B;QAC7DC,yBAAyBV,gBAAgBW,gCAAgC;QACzEC,eAAe;YAACb,yBAAyBgB,gBAAgB;YAAEhB,yBAAyBe,aAAa;SAAC;IACpG;AACF;AAEA,OAAO,MAAME,mBAA6C,CAAC,EACzDC,UAAUhB,gBAAgB,EAC1BiB,WAAWhB,gBAAgB,EAC3BiB,SAAS,EACT,GAAGC,WACJ;IACC3B,MAAM4B,SAAS,CAAC;QACd,MAAMC,OAAO,CAAC,EAAEL,QAAQ,EAAEC,SAAS,CAAC;QACpC,IAAI,CAACf,kBAAkB,CAACmB,KAAK,EAAE;YAC7B1B,UAAUqB,SAASC,UAChBK,IAAI,CAAC;gBACJpB,kBAAkB,CAACmB,KAAK,GAAG;YAC7B,GACCE,KAAK,CAACC,CAAAA;gBACLtB,kBAAkB,CAACmB,KAAK,GAAG;YAC7B;QACJ;IACF,GAAG;QAACL;QAASC;KAAS;IAEtB,MAAMQ,kBAAkB7B;IACxB,MAAM8B,qBAAqBvB;IAC3B,MAAMwB,KAAKjC,aAAa+B,gBAAgBG,OAAO,EAAEV;IAEjD,qBACE,oBAACW;QAAIX,WAAWS;QAAK,GAAGR,SAAS;qBAC/B,oBAACU;QACCX,WAAWxB,aAAa,iBAAiB,wBAAwB+B,gBAAgBK,IAAI,EAAEJ;;AAI/F,EAAE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["MorseCode.types.tsx"],"sourcesContent":["export type MorseCodeProps = {\n baseUrl?: string;\n fileName?: string;\n};\n"],"names":[],"rangeMappings":"","mappings":""}
|
|
1
|
+
{"version":3,"sources":["MorseCode.types.tsx"],"sourcesContent":["export type MorseCodeProps = {\n baseUrl?: string;\n fileName?: string;\n className?: string;\n};\n"],"names":[],"rangeMappings":"","mappings":""}
|
|
@@ -13,33 +13,28 @@ const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
|
|
|
13
13
|
const _reactcomponents = require("@fluentui/react-components");
|
|
14
14
|
const _morsecode = require("@fluentui-copilot/morse-code");
|
|
15
15
|
const _MorseCodestyles = require("./MorseCode.styles");
|
|
16
|
-
const _houdiniutils = require("@fluentui-contrib/houdini-utils");
|
|
17
|
-
const IS_WEBKIT = (0, _houdiniutils.hasWebkitCanvas)();
|
|
18
16
|
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
|
19
17
|
const ON_COMPLETE_NOOP = ()=>{};
|
|
20
|
-
const MorseCodeFallback = ()=>{
|
|
18
|
+
const MorseCodeFallback = (props)=>{
|
|
21
19
|
const morseCodeStyles = (0, _MorseCodestyles.useMorseCodeStyles)();
|
|
22
20
|
const targetRef = _react.useCallback((node)=>{
|
|
23
21
|
let animControls;
|
|
24
22
|
if (node) {
|
|
25
23
|
animControls = (0, _morsecode.morseCode)(node);
|
|
26
|
-
if (IS_WEBKIT && animControls.canvas) {
|
|
27
|
-
animControls.canvas.setAttribute('style', '');
|
|
28
|
-
node.appendChild(animControls.canvas);
|
|
29
|
-
}
|
|
30
24
|
animControls.play(ON_COMPLETE_NOOP);
|
|
31
25
|
} else {
|
|
32
26
|
if (animControls) {
|
|
33
|
-
var _animControls_canvas;
|
|
34
27
|
animControls.stop();
|
|
35
28
|
animControls.cleanup();
|
|
36
|
-
IS_WEBKIT && ((_animControls_canvas = animControls.canvas) === null || _animControls_canvas === void 0 ? void 0 : _animControls_canvas.remove());
|
|
37
29
|
animControls = undefined;
|
|
38
30
|
}
|
|
39
31
|
}
|
|
40
32
|
}, []);
|
|
33
|
+
const { className, ...restProps } = props;
|
|
34
|
+
const cn = (0, _reactcomponents.mergeClasses)(morseCodeStyles.wrapper, className);
|
|
41
35
|
return /*#__PURE__*/ _react.createElement("div", {
|
|
42
|
-
className:
|
|
36
|
+
className: cn,
|
|
37
|
+
...restProps
|
|
43
38
|
}, /*#__PURE__*/ _react.createElement("div", {
|
|
44
39
|
ref: targetRef,
|
|
45
40
|
className: (0, _reactcomponents.mergeClasses)('fai-MorseCode', 'fai-MorseCodeFallback', morseCodeStyles.base)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["MorseCodeFallback.tsx"],"sourcesContent":["import * as React from 'react';\nimport { mergeClasses } from '@fluentui/react-components';\nimport { morseCode } from '@fluentui-copilot/morse-code';\nimport { useMorseCodeStyles } from './MorseCode.styles';\
|
|
1
|
+
{"version":3,"sources":["MorseCodeFallback.tsx"],"sourcesContent":["import * as React from 'react';\nimport { mergeClasses } from '@fluentui/react-components';\nimport { morseCode } from '@fluentui-copilot/morse-code';\nimport { useMorseCodeStyles } from './MorseCode.styles';\n\nimport type { MorseCodeProps } from './MorseCode.types';\n\ntype FallbackAnimation = ReturnType<typeof morseCode>;\n\n// eslint-disable-next-line @typescript-eslint/no-empty-function\nconst ON_COMPLETE_NOOP = () => {};\n\nexport const MorseCodeFallback: React.FC<MorseCodeProps> = props => {\n const morseCodeStyles = useMorseCodeStyles();\n\n const targetRef = React.useCallback((node: HTMLElement | null) => {\n let animControls: FallbackAnimation | undefined;\n\n if (node) {\n animControls = morseCode(node);\n animControls.play(ON_COMPLETE_NOOP);\n } else {\n if (animControls) {\n animControls.stop();\n animControls.cleanup();\n animControls = undefined;\n }\n }\n }, []);\n\n const { className, ...restProps } = props;\n const cn = mergeClasses(morseCodeStyles.wrapper, className);\n\n return (\n <div className={cn} {...restProps}>\n <div ref={targetRef} className={mergeClasses('fai-MorseCode', 'fai-MorseCodeFallback', morseCodeStyles.base)} />\n </div>\n );\n};\n"],"names":["MorseCodeFallback","ON_COMPLETE_NOOP","props","morseCodeStyles","useMorseCodeStyles","targetRef","React","useCallback","animControls","node","morseCode","className","cn","restProps","wrapper","createElement","div","ref"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAYaA;;;eAAAA;;;;iEAZU;iCACM;2BACH;iCACS;AAMnC,gEAAgE;AAChE,MAAMC,mBAAmB,KAAO;AAEzB,MAAMD,oBAA8CE,CAAAA;UACzDC,kBAAMA,IAAAA,mCAAkBC;UAExBC,YAAMA,OAAYC,WAAMC,CAAAA,CAAAA;YACtBC;YAEAC,MAAIA;2BACFD,IAAAA,oBAAeE,EAAAA;yBACfF,IAAAA,CAAAA;eACF;8BACMA;6BACFA,IAAAA;6BACAA,OAAAA;+BACAA;;;OAGN,EAAG;UAEH,EACAG,SAAMC,EAEN,GAAAC;UACuBD,KAAGC,IAAAA,6BAAS,EAAAV,gBAAAW,OAAA,EAAAH;yBAC/BL,OAAAS,aAACC,CAAAA,OAAAA;mBAASX;oBAAWM;;QAGzBM,KAAAZ"}
|
|
@@ -28,7 +28,7 @@ const useMorseCodeAnimationClassName = (0, _reactcomponents.__resetStyles)("r1ms
|
|
|
28
28
|
"@media (forced-colors: active){.rqpk8qn{background-image:paint(morseCode);animation-iteration-count:infinite,infinite;animation-duration:2000ms,2000ms;animation-timing-function:linear,linear;animation-name:r9zjrdo,r1i9k8jr;}}"
|
|
29
29
|
]
|
|
30
30
|
});
|
|
31
|
-
const MorseCodeHoudini = ({ baseUrl = _morsecode.DEFAULT_BASE_URL, fileName = _morsecode.DEFAULT_FILE_URL })=>{
|
|
31
|
+
const MorseCodeHoudini = ({ baseUrl = _morsecode.DEFAULT_BASE_URL, fileName = _morsecode.DEFAULT_FILE_URL, className, ...restProps })=>{
|
|
32
32
|
_react.useEffect(()=>{
|
|
33
33
|
const path = `${baseUrl}${fileName}`;
|
|
34
34
|
if (!initializedModules[path]) {
|
|
@@ -44,8 +44,10 @@ const MorseCodeHoudini = ({ baseUrl = _morsecode.DEFAULT_BASE_URL, fileName = _m
|
|
|
44
44
|
]);
|
|
45
45
|
const morseCodeStyles = (0, _MorseCodestyles.useMorseCodeStyles)();
|
|
46
46
|
const animationClassName = useMorseCodeAnimationClassName();
|
|
47
|
+
const cn = (0, _reactcomponents.mergeClasses)(morseCodeStyles.wrapper, className);
|
|
47
48
|
return /*#__PURE__*/ _react.createElement("div", {
|
|
48
|
-
className:
|
|
49
|
+
className: cn,
|
|
50
|
+
...restProps
|
|
49
51
|
}, /*#__PURE__*/ _react.createElement("div", {
|
|
50
52
|
className: (0, _reactcomponents.mergeClasses)('fai-MorseCode', 'fai-MorseCodeHoudini', morseCodeStyles.base, animationClassName)
|
|
51
53
|
}));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["MorseCodeHoudini.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { makeResetStyles, mergeClasses } from '@fluentui/react-components';\nimport { addModule } from '@fluentui-contrib/houdini-utils';\nimport { useMorseCodeStyles } from './MorseCode.styles';\n\nimport {\n initializeMorseCodeCustomProperties,\n morseCodeAnimationTokens,\n morseCodeTokens,\n DEFAULT_BASE_URL,\n DEFAULT_FILE_URL,\n} from '@fluentui-copilot/morse-code';\n\nimport type { MorseCodeProps } from './MorseCode.types';\n\nconst initializedModules = {} as Record<string, boolean>;\n\ninitializeMorseCodeCustomProperties();\n\nconst useMorseCodeAnimationClassName = makeResetStyles({\n backgroundImage: morseCodeTokens.backgroundImage,\n animationIterationCount: morseCodeTokens.morseCodeAnimationIterationCount,\n animationDuration: morseCodeTokens.morseCodeAnimationDuration,\n animationTimingFunction: morseCodeTokens.morseCodeAnimationTimingFunction,\n animationName: [morseCodeAnimationTokens.colorAnimation, morseCodeAnimationTokens.dotsAndDashes],\n\n '@media (forced-colors: active)': {\n backgroundImage: morseCodeTokens.backgroundImage,\n animationIterationCount: morseCodeTokens.morseCodeAnimationIterationCount,\n animationDuration: morseCodeTokens.morseCodeAnimationDuration,\n animationTimingFunction: morseCodeTokens.morseCodeAnimationTimingFunction,\n animationName: [morseCodeAnimationTokens.colorHCAnimation, morseCodeAnimationTokens.dotsAndDashes],\n },\n});\n\nexport const MorseCodeHoudini: React.FC<MorseCodeProps> = ({\n baseUrl = DEFAULT_BASE_URL,\n fileName = DEFAULT_FILE_URL,\n}) => {\n React.useEffect(() => {\n const path = `${baseUrl}${fileName}`;\n if (!initializedModules[path]) {\n addModule(baseUrl, fileName)\n .then(() => {\n initializedModules[path] = true;\n })\n .catch(err => {\n initializedModules[path] = false;\n });\n }\n }, [baseUrl, fileName]);\n\n const morseCodeStyles = useMorseCodeStyles();\n const animationClassName = useMorseCodeAnimationClassName();\n\n return (\n <div className={
|
|
1
|
+
{"version":3,"sources":["MorseCodeHoudini.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { makeResetStyles, mergeClasses } from '@fluentui/react-components';\nimport { addModule } from '@fluentui-contrib/houdini-utils';\nimport { useMorseCodeStyles } from './MorseCode.styles';\n\nimport {\n initializeMorseCodeCustomProperties,\n morseCodeAnimationTokens,\n morseCodeTokens,\n DEFAULT_BASE_URL,\n DEFAULT_FILE_URL,\n} from '@fluentui-copilot/morse-code';\n\nimport type { MorseCodeProps } from './MorseCode.types';\n\nconst initializedModules = {} as Record<string, boolean>;\n\ninitializeMorseCodeCustomProperties();\n\nconst useMorseCodeAnimationClassName = makeResetStyles({\n backgroundImage: morseCodeTokens.backgroundImage,\n animationIterationCount: morseCodeTokens.morseCodeAnimationIterationCount,\n animationDuration: morseCodeTokens.morseCodeAnimationDuration,\n animationTimingFunction: morseCodeTokens.morseCodeAnimationTimingFunction,\n animationName: [morseCodeAnimationTokens.colorAnimation, morseCodeAnimationTokens.dotsAndDashes],\n\n '@media (forced-colors: active)': {\n backgroundImage: morseCodeTokens.backgroundImage,\n animationIterationCount: morseCodeTokens.morseCodeAnimationIterationCount,\n animationDuration: morseCodeTokens.morseCodeAnimationDuration,\n animationTimingFunction: morseCodeTokens.morseCodeAnimationTimingFunction,\n animationName: [morseCodeAnimationTokens.colorHCAnimation, morseCodeAnimationTokens.dotsAndDashes],\n },\n});\n\nexport const MorseCodeHoudini: React.FC<MorseCodeProps> = ({\n baseUrl = DEFAULT_BASE_URL,\n fileName = DEFAULT_FILE_URL,\n className,\n ...restProps\n}) => {\n React.useEffect(() => {\n const path = `${baseUrl}${fileName}`;\n if (!initializedModules[path]) {\n addModule(baseUrl, fileName)\n .then(() => {\n initializedModules[path] = true;\n })\n .catch(err => {\n initializedModules[path] = false;\n });\n }\n }, [baseUrl, fileName]);\n\n const morseCodeStyles = useMorseCodeStyles();\n const animationClassName = useMorseCodeAnimationClassName();\n const cn = mergeClasses(morseCodeStyles.wrapper, className);\n\n return (\n <div className={cn} {...restProps}>\n <div\n className={mergeClasses('fai-MorseCode', 'fai-MorseCodeHoudini', morseCodeStyles.base, animationClassName)}\n />\n </div>\n );\n};\n"],"names":["animationTimingFunction","initializedModules","initializeMorseCodeCustomProperties","useMorseCodeAnimationClassName","makeResetStyles","backgroundImage","animationIterationCount","morseCodeTokens","animationName","morseCodeAnimationTokens","restProps","animationDuration","path","baseUrl","fileName","morseCodeStyles","MorseCodeHoudini","React","cn","mergeClasses","className","addModule","catch","err","base","animationClassName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAwBEA;;;eAAAA;;;;iEAxBqB;iCAEe;8BACZ;iCACS;2BAQ5B;AAIP,MAAMC,qBAAqB,CAAC;AAE5BC,IAAAA,8CAAAA;AAEA,MAAMC,iCAAiCC,IAAAA,8BAAAA,EAAAA,YAAgB,WAAA;OACrDC;QAAAA;QAAgD;QAAA;QAAA;KAAA;OAChDC;QAAAA;QAAyE;KAAA;;AAEzEN,MAAAA,mBAAyBO,CAAAA,YACzBC,2BAAe,aAACC,2BAAAA,WAAyCA,KAAuCC;WAG9FL,SAAAA,CAAAA;cACAC,OAAAA,CAAAA,EAAAA,QAAAA,EAAAA,SAAyBC,CAAAA;YACzBI,CAAAA,kBAAmBJ,CAAAA,KAAAA,EAAAA;uCACnBP,EAAAA,SAAAA,UAAyBO,IAAAA,CAAAA;gBACzBC,kBAAe,CAAAI,KAAA,GAAA;oBAACH,CAAAA,CAAAA;kCAA2CA,CAAAA,KAAAA,GAAAA;;QAC7D;IACF,GAAA;QAAAI;QAAAC;KAAA;IAEA,MAAOC,kBAAMC,IAAAA,mCACXH;UAKAI,qBAAgBd;UACde,KAAAC,IAAAA,6BAAgBN,EAAAA,gBAAUC,OAAU,EAAAM;WACpC,WAAKnB,GAAAA,OAAAA,aAA0B,CAAA,OAAA;mBAC7BoB;oBAEIpB;kBAEDqB,GAAAA,OAAMC,aAAAA,CAAAA,OAAAA;oDACLtB,EAAAA,iBAA2B,wBAAAc,gBAAAS,IAAA,EAAAC;;+CAGhC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui-copilot/react-morse-code",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.7",
|
|
4
4
|
"description": "A Fluent AI package",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -12,13 +12,13 @@
|
|
|
12
12
|
},
|
|
13
13
|
"license": "MIT",
|
|
14
14
|
"dependencies": {
|
|
15
|
-
"@fluentui-contrib/houdini-utils": "
|
|
16
|
-
"@fluentui-copilot/morse-code": "^0.0.
|
|
15
|
+
"@fluentui-contrib/houdini-utils": "0.3.5",
|
|
16
|
+
"@fluentui-copilot/morse-code": "^0.0.7",
|
|
17
17
|
"@swc/helpers": "^0.5.1"
|
|
18
18
|
},
|
|
19
19
|
"peerDependencies": {
|
|
20
|
-
"@fluentui/react-components": ">=9.
|
|
21
|
-
"@fluentui/react-jsx-runtime": ">=9.0.
|
|
20
|
+
"@fluentui/react-components": ">=9.63.0 <10.0.0",
|
|
21
|
+
"@fluentui/react-jsx-runtime": ">=9.0.54 <10.0.0",
|
|
22
22
|
"@types/react": ">=16.14.0 <19.0.0",
|
|
23
23
|
"@types/react-dom": ">=16.9.8 <19.0.0",
|
|
24
24
|
"react": ">=16.14.0 <19.0.0",
|