@fluentui-copilot/react-morse-code 0.0.0-nightly-20250507-0406-4976ea07.1 → 0.0.0-nightly-20250509-0405-12581083.1

package/CHANGELOG.json

@@ -2,9 +2,9 @@
   "name": "@fluentui-copilot/react-morse-code",
   "entries": [
     {
-      "date": "Wed, 07 May 2025 04:13:49 GMT",
-      "tag": "@fluentui-copilot/react-morse-code_v0.0.0-nightly-20250507-0406-4976ea07.1",
-      "version": "0.0.0-nightly-20250507-0406-4976ea07.1",
+      "date": "Fri, 09 May 2025 04:12:44 GMT",
+      "tag": "@fluentui-copilot/react-morse-code_v0.0.0-nightly-20250509-0405-12581083.1",
+      "version": "0.0.0-nightly-20250509-0405-12581083.1",
       "comments": {
         "prerelease": [
           {

package/CHANGELOG.md

@@ -1,13 +1,13 @@
 # Change Log - @fluentui-copilot/react-morse-code
 
-This log was last generated on Wed, 07 May 2025 04:13:49 GMT and should not be manually modified.
+This log was last generated on Fri, 09 May 2025 04:12:44 GMT and should not be manually modified.
 
 <!-- Start content -->
 
-## [0.0.0-nightly-20250507-0406-4976ea07.1](https://github.com/microsoft/fluentai/tree/@fluentui-copilot/react-morse-code_v0.0.0-nightly-20250507-0406-4976ea07.1)
+## [0.0.0-nightly-20250509-0405-12581083.1](https://github.com/microsoft/fluentai/tree/@fluentui-copilot/react-morse-code_v0.0.0-nightly-20250509-0405-12581083.1)
 
-Wed, 07 May 2025 04:13:49 GMT 
-[Compare changes](https://github.com/microsoft/fluentai/compare/@fluentui-copilot/react-morse-code_v0.0.6..@fluentui-copilot/react-morse-code_v0.0.0-nightly-20250507-0406-4976ea07.1)
+Fri, 09 May 2025 04:12:44 GMT 
+[Compare changes](https://github.com/microsoft/fluentai/compare/@fluentui-copilot/react-morse-code_v0.0.6..@fluentui-copilot/react-morse-code_v0.0.0-nightly-20250509-0405-12581083.1)
 
 ### Changes
 

package/dist/index.d.ts

@@ -9,6 +9,7 @@ export declare const MorseCodeHoudini: React_2.FC<MorseCodeProps>;
 export declare type MorseCodeProps = {
     baseUrl?: string;
     fileName?: string;
+    className?: string;
 };
 
 export { }

package/lib/components/MorseCode.types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["MorseCode.types.tsx"],"sourcesContent":["export type MorseCodeProps = {\n  baseUrl?: string;\n  fileName?: string;\n};\n"],"names":[],"rangeMappings":"","mappings":"AAAA,WAGE"}
+{"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"}

package/lib/components/MorseCodeFallback.js

@@ -2,33 +2,31 @@ import * as React from 'react';
 import { mergeClasses } from '@fluentui/react-components';
 import { morseCode } from '@fluentui-copilot/morse-code';
 import { useMorseCodeStyles } from './MorseCode.styles';
-import { hasWebkitCanvas } from '@fluentui-contrib/houdini-utils';
-const IS_WEBKIT = hasWebkitCanvas();
 // eslint-disable-next-line @typescript-eslint/no-empty-function
 const ON_COMPLETE_NOOP = () => {};
-export const MorseCodeFallback = () => {
+export const MorseCodeFallback = props => {
   const morseCodeStyles = useMorseCodeStyles();
   const targetRef = React.useCallback(node => {
     let animControls;
     if (node) {
       animControls = morseCode(node);
-      if (IS_WEBKIT && animControls.canvas) {
-        animControls.canvas.setAttribute('style', '');
-        node.appendChild(animControls.canvas);
-      }
       animControls.play(ON_COMPLETE_NOOP);
     } else {
       if (animControls) {
-        var _animControls_canvas;
         animControls.stop();
         animControls.cleanup();
-        IS_WEBKIT && ((_animControls_canvas = animControls.canvas) === null || _animControls_canvas === void 0 ? void 0 : _animControls_canvas.remove());
         animControls = undefined;
       }
     }
   }, []);
+  const {
+    className,
+    ...restProps
+  } = props;
+  const cn = mergeClasses(morseCodeStyles.wrapper, className);
   return /*#__PURE__*/React.createElement("div", {
-    className: morseCodeStyles.wrapper
+    className: cn,
+    ...restProps
   }, /*#__PURE__*/React.createElement("div", {
     ref: targetRef,
     className: mergeClasses('fai-MorseCode', 'fai-MorseCodeFallback', morseCodeStyles.base)

package/lib/components/MorseCodeFallback.js.map

@@ -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';\nimport { hasWebkitCanvas } from '@fluentui-contrib/houdini-utils';\n\nimport type { MorseCodeProps } from './MorseCode.types';\n\nconst IS_WEBKIT = hasWebkitCanvas();\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> = () => {\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      if (IS_WEBKIT && animControls.canvas) {\n        animControls.canvas.setAttribute('style', '');\n        node.appendChild(animControls.canvas);\n      }\n      animControls.play(ON_COMPLETE_NOOP);\n    } else {\n      if (animControls) {\n        animControls.stop();\n        animControls.cleanup();\n        IS_WEBKIT && animControls.canvas?.remove();\n        animControls = undefined;\n      }\n    }\n  }, []);\n\n  return (\n    <div className={morseCodeStyles.wrapper}>\n      <div ref={targetRef} className={mergeClasses('fai-MorseCode', 'fai-MorseCodeFallback', morseCodeStyles.base)} />\n    </div>\n  );\n};\n"],"names":["React","mergeClasses","morseCode","useMorseCodeStyles","hasWebkitCanvas","IS_WEBKIT","ON_COMPLETE_NOOP","MorseCodeFallback","morseCodeStyles","targetRef","useCallback","node","animControls","canvas","setAttribute","appendChild","play","stop","cleanup","remove","undefined","div","className","wrapper","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;AACxD,SAASC,eAAe,QAAQ,kCAAkC;AAIlE,MAAMC,YAAYD;AAIlB,gEAAgE;AAChE,MAAME,mBAAmB,KAAO;AAEhC,OAAO,MAAMC,oBAA8C;IACzD,MAAMC,kBAAkBL;IAExB,MAAMM,YAAYT,MAAMU,WAAW,CAAC,CAACC;QACnC,IAAIC;QAEJ,IAAID,MAAM;YACRC,eAAeV,UAAUS;YACzB,IAAIN,aAAaO,aAAaC,MAAM,EAAE;gBACpCD,aAAaC,MAAM,CAACC,YAAY,CAAC,SAAS;gBAC1CH,KAAKI,WAAW,CAACH,aAAaC,MAAM;YACtC;YACAD,aAAaI,IAAI,CAACV;QACpB,OAAO;YACL,IAAIM,cAAc;oBAGHA;gBAFbA,aAAaK,IAAI;gBACjBL,aAAaM,OAAO;gBACpBb,eAAaO,uBAAAA,aAAaC,MAAM,cAAnBD,2CAAAA,qBAAqBO,MAAM;gBACxCP,eAAeQ;YACjB;QACF;IACF,GAAG,EAAE;IAEL,qBACE,oBAACC;QAAIC,WAAWd,gBAAgBe,OAAO;qBACrC,oBAACF;QAAIG,KAAKf;QAAWa,WAAWrB,aAAa,iBAAiB,yBAAyBO,gBAAgBiB,IAAI;;AAGjH,EAAE"}
+{"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"}

package/lib/components/MorseCodeHoudini.js

@@ -11,7 +11,9 @@ const useMorseCodeAnimationClassName = __resetStyles("r1ms8zpq", "rqpk8qn", {
 });
 export const MorseCodeHoudini = ({
   baseUrl = DEFAULT_BASE_URL,
-  fileName = DEFAULT_FILE_URL
+  fileName = DEFAULT_FILE_URL,
+  className,
+  ...restProps
 }) => {
   React.useEffect(() => {
     const path = `${baseUrl}${fileName}`;
@@ -25,8 +27,10 @@ export const MorseCodeHoudini = ({
   }, [baseUrl, fileName]);
   const morseCodeStyles = useMorseCodeStyles();
   const animationClassName = useMorseCodeAnimationClassName();
+  const cn = mergeClasses(morseCodeStyles.wrapper, className);
   return /*#__PURE__*/React.createElement("div", {
-    className: morseCodeStyles.wrapper
+    className: cn,
+    ...restProps
   }, /*#__PURE__*/React.createElement("div", {
     className: mergeClasses('fai-MorseCode', 'fai-MorseCodeHoudini', morseCodeStyles.base, animationClassName)
   }));

package/lib/components/MorseCodeHoudini.js.map

@@ -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={morseCodeStyles.wrapper}>\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","useEffect","path","then","catch","err","morseCodeStyles","animationClassName","div","className","wrapper","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,EAC5B;IACCT,MAAM0B,SAAS,CAAC;QACd,MAAMC,OAAO,CAAC,EAAEH,QAAQ,EAAEC,SAAS,CAAC;QACpC,IAAI,CAACf,kBAAkB,CAACiB,KAAK,EAAE;YAC7BxB,UAAUqB,SAASC,UAChBG,IAAI,CAAC;gBACJlB,kBAAkB,CAACiB,KAAK,GAAG;YAC7B,GACCE,KAAK,CAACC,CAAAA;gBACLpB,kBAAkB,CAACiB,KAAK,GAAG;YAC7B;QACJ;IACF,GAAG;QAACH;QAASC;KAAS;IAEtB,MAAMM,kBAAkB3B;IACxB,MAAM4B,qBAAqBrB;IAE3B,qBACE,oBAACsB;QAAIC,WAAWH,gBAAgBI,OAAO;qBACrC,oBAACF;QACCC,WAAWhC,aAAa,iBAAiB,wBAAwB6B,gBAAgBK,IAAI,EAAEJ;;AAI/F,EAAE"}
+{"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"}

package/lib-commonjs/components/MorseCode.types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["MorseCode.types.tsx"],"sourcesContent":["export type MorseCodeProps = {\n  baseUrl?: string;\n  fileName?: string;\n};\n"],"names":[],"rangeMappings":"","mappings":""}
+{"version":3,"sources":["MorseCode.types.tsx"],"sourcesContent":["export type MorseCodeProps = {\n  baseUrl?: string;\n  fileName?: string;\n  className?: string;\n};\n"],"names":[],"rangeMappings":"","mappings":""}

package/lib-commonjs/components/MorseCodeFallback.js

@@ -13,33 +13,28 @@ const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _reactcomponents = require("@fluentui/react-components");
 const _morsecode = require("@fluentui-copilot/morse-code");
 const _MorseCodestyles = require("./MorseCode.styles");
-const _houdiniutils = require("@fluentui-contrib/houdini-utils");
-const IS_WEBKIT = (0, _houdiniutils.hasWebkitCanvas)();
 // eslint-disable-next-line @typescript-eslint/no-empty-function
 const ON_COMPLETE_NOOP = ()=>{};
-const MorseCodeFallback = ()=>{
+const MorseCodeFallback = (props)=>{
     const morseCodeStyles = (0, _MorseCodestyles.useMorseCodeStyles)();
     const targetRef = _react.useCallback((node)=>{
         let animControls;
         if (node) {
             animControls = (0, _morsecode.morseCode)(node);
-            if (IS_WEBKIT && animControls.canvas) {
-                animControls.canvas.setAttribute('style', '');
-                node.appendChild(animControls.canvas);
-            }
             animControls.play(ON_COMPLETE_NOOP);
         } else {
             if (animControls) {
-                var _animControls_canvas;
                 animControls.stop();
                 animControls.cleanup();
-                IS_WEBKIT && ((_animControls_canvas = animControls.canvas) === null || _animControls_canvas === void 0 ? void 0 : _animControls_canvas.remove());
                 animControls = undefined;
             }
         }
     }, []);
+    const { className, ...restProps } = props;
+    const cn = (0, _reactcomponents.mergeClasses)(morseCodeStyles.wrapper, className);
     return /*#__PURE__*/ _react.createElement("div", {
-        className: morseCodeStyles.wrapper
+        className: cn,
+        ...restProps
     }, /*#__PURE__*/ _react.createElement("div", {
         ref: targetRef,
         className: (0, _reactcomponents.mergeClasses)('fai-MorseCode', 'fai-MorseCodeFallback', morseCodeStyles.base)

package/lib-commonjs/components/MorseCodeFallback.js.map

@@ -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';\nimport { hasWebkitCanvas } from '@fluentui-contrib/houdini-utils';\n\nimport type { MorseCodeProps } from './MorseCode.types';\n\nconst IS_WEBKIT = hasWebkitCanvas();\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> = () => {\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      if (IS_WEBKIT && animControls.canvas) {\n        animControls.canvas.setAttribute('style', '');\n        node.appendChild(animControls.canvas);\n      }\n      animControls.play(ON_COMPLETE_NOOP);\n    } else {\n      if (animControls) {\n        animControls.stop();\n        animControls.cleanup();\n        IS_WEBKIT && animControls.canvas?.remove();\n        animControls = undefined;\n      }\n    }\n  }, []);\n\n  return (\n    <div className={morseCodeStyles.wrapper}>\n      <div ref={targetRef} className={mergeClasses('fai-MorseCode', 'fai-MorseCodeFallback', morseCodeStyles.base)} />\n    </div>\n  );\n};\n"],"names":["MorseCodeFallback","IS_WEBKIT","hasWebkitCanvas","ON_COMPLETE_NOOP","morseCodeStyles","useMorseCodeStyles","targetRef","React","useCallback","animControls","node","morseCode","canvas","setAttribute","appendChild","_animControls_canvas","createElement","div","className","wrapper","ref","mergeClasses","base"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAeaA;;;eAAAA;;;;iEAfU;iCACM;2BACH;iCACS;8BACH;AAIhC,MAAMC,YAAYC,IAAAA,6BAAAA;AAIlB,gEAAgE;AAChE,MAAMC,mBAAmB,KAAO;AAEzB,MAAMH,oBAA8C;UACzDI,kBAAMA,IAAAA,mCAAkBC;UAExBC,YAAMA,OAAYC,WAAMC,CAAAA,CAAAA;YACtBC;YAEAC,MAAIA;2BACFD,IAAAA,oBAAeE,EAAAA;6BACXV,aAAaQ,MAAaG,EAAAA;6BAC5BH,MAAAA,CAAAA,YAAoBI,CAAAA,SAAa;gCAC5BC,CAAAA,aAAYL,MAAAA;;yBAEnBA,IAAAA,CAAAA;eACF;8BACMA;;6BACFA,IAAAA;6BACAA,OAAAA;6BACAR,CAAAA,CAAAA,uBAAaQ,aAAAA,MAAAA,MAAaG,QAAMG,yBAAnBN,KAAAA,IAAAA,KAAAA,IAAAA,qBAAAA,MAAAA,EAAAA;+BACbA;;;OAGN,EAAG;WAEH,WAAA,GAAAF,OACES,aAAA,CAAA,OAACC;mBAAIC,gBAAWd,OAAgBe;4BAC9BH,aAAA,CAAA,OAACC;aAAIG;mBAAgBF,IAAAA,6BAAWG,EAAAA,iBAAa,yBAAiBjB,gBAAyBA,IAAgBkB;;AAG7G"}
+{"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"}

package/lib-commonjs/components/MorseCodeHoudini.js

@@ -28,7 +28,7 @@ const useMorseCodeAnimationClassName = (0, _reactcomponents.__resetStyles)("r1ms
         "@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;}}"
     ]
 });
-const MorseCodeHoudini = ({ baseUrl = _morsecode.DEFAULT_BASE_URL, fileName = _morsecode.DEFAULT_FILE_URL })=>{
+const MorseCodeHoudini = ({ baseUrl = _morsecode.DEFAULT_BASE_URL, fileName = _morsecode.DEFAULT_FILE_URL, className, ...restProps })=>{
     _react.useEffect(()=>{
         const path = `${baseUrl}${fileName}`;
         if (!initializedModules[path]) {
@@ -44,8 +44,10 @@ const MorseCodeHoudini = ({ baseUrl = _morsecode.DEFAULT_BASE_URL, fileName = _m
     ]);
     const morseCodeStyles = (0, _MorseCodestyles.useMorseCodeStyles)();
     const animationClassName = useMorseCodeAnimationClassName();
+    const cn = (0, _reactcomponents.mergeClasses)(morseCodeStyles.wrapper, className);
     return /*#__PURE__*/ _react.createElement("div", {
-        className: morseCodeStyles.wrapper
+        className: cn,
+        ...restProps
     }, /*#__PURE__*/ _react.createElement("div", {
         className: (0, _reactcomponents.mergeClasses)('fai-MorseCode', 'fai-MorseCodeHoudini', morseCodeStyles.base, animationClassName)
     }));

package/lib-commonjs/components/MorseCodeHoudini.js.map

@@ -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={morseCodeStyles.wrapper}>\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","useEffect","path","baseUrl","fileName","animationDuration","morseCodeStyles","useMorseCodeStyles","animationClassName","MorseCodeHoudini","DEFAULT_BASE_URL","React","wrapper","base","err"],"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;WAAgFC,SAAA,CAAA;QAEhG,MAAAC,OAAA,CAAA,EAAAC,QAAA,EAAAC,SAAkC,CAAA;YAChCR,CAAAA,kBAAiBE,CAAAA,KAAAA,EAAAA;uCACjBD,EAAAA,SAAAA,UAAyBC,IAAAA,CAAAA;gBACzBO,kBAAAA,CAAmBP,KAAAA,GAAAA;eACnBP,KAAAA,CAAAA,CAAAA;gBACAQ,kBAAe,CAAAG,KAAA,GAAA;;;;;QAAmFE;KAAA;UACpGE,kBAAAC,IAAAA,mCAAA;IACF,MAAAC,qBAAAd;IAEA,OAAO,WAAMe,GAAAA,OAAAA,aACXN,CAAAA,OAAUO;QAGVC,WAAMV,gBAAUW,OAAA;kBACRV,GAAAA,OAAUC,aAAUC,CAAAA,OAAU;mBAC/BZ,IAAAA,6BAAAA,EAAAA,iBAA0B,wBAAAc,gBAAAO,IAAA,EAAAL;;+CAKpBM"}
+{"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

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui-copilot/react-morse-code",
-  "version": "0.0.0-nightly-20250507-0406-4976ea07.1",
+  "version": "0.0.0-nightly-20250509-0405-12581083.1",
   "description": "A Fluent AI package",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -12,8 +12,8 @@
   },
   "license": "MIT",
   "dependencies": {
-    "@fluentui-contrib/houdini-utils": "0.3.4",
-    "@fluentui-copilot/morse-code": "^0.0.0-nightly-20250507-0406-4976ea07.1",
+    "@fluentui-contrib/houdini-utils": "0.3.5",
+    "@fluentui-copilot/morse-code": "^0.0.0-nightly-20250509-0405-12581083.1",
     "@swc/helpers": "^0.5.1"
   },
   "peerDependencies": {