npm - @fluentui/react-migration-v0-v9 - Versions diffs - 9.6.6 → 9.6.7 - Mend

@fluentui/react-migration-v0-v9 9.6.6 → 9.6.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.

Files changed (98) hide show

package/CHANGELOG.md CHANGED Viewed

@@ -1,12 +1,28 @@
 # Change Log - @fluentui/react-migration-v0-v9
-This log was last generated on Mon, 08 Sep 2025 12:41:47 GMT and should not be manually modified.
+This log was last generated on Thu, 02 Oct 2025 15:07:16 GMT and should not be manually modified.
 <!-- Start content -->
+## [9.6.7](https://github.com/microsoft/fluentui/tree/@fluentui/react-migration-v0-v9_v9.6.7)
+Thu, 02 Oct 2025 15:07:16 GMT
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-migration-v0-v9_v9.6.6..@fluentui/react-migration-v0-v9_v9.6.7)
+### Patches
+- feat: enforce usage of use client directive for files with client-only features ([PR #35173](https://github.com/microsoft/fluentui/pull/35173) by dmytrokirpa@microsoft.com)
+- Bump @fluentui/react-aria to v9.17.1 ([PR #35133](https://github.com/microsoft/fluentui/pull/35133) by beachball)
+- Bump @fluentui/react-components to v9.71.0 ([PR #35133](https://github.com/microsoft/fluentui/pull/35133) by beachball)
+- Bump @fluentui/react-context-selector to v9.2.8 ([PR #35133](https://github.com/microsoft/fluentui/pull/35133) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.2.1 ([PR #35133](https://github.com/microsoft/fluentui/pull/35133) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.25.2 ([PR #35133](https://github.com/microsoft/fluentui/pull/35133) by beachball)
+- Bump @fluentui/react-tabster to v9.26.6 ([PR #35133](https://github.com/microsoft/fluentui/pull/35133) by beachball)
+- Bump @fluentui/react-utilities to v9.25.0 ([PR #35133](https://github.com/microsoft/fluentui/pull/35133) by beachball)
 ## [9.6.6](https://github.com/microsoft/fluentui/tree/@fluentui/react-migration-v0-v9_v9.6.6)
-Mon, 08 Sep 2025 12:41:47 GMT
+Mon, 08 Sep 2025 12:51:07 GMT
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-migration-v0-v9_v9.6.5..@fluentui/react-migration-v0-v9_v9.6.6)
 ### Patches

package/lib/components/Attachment/Attachment.js CHANGED Viewed

@@ -1,3 +1,4 @@
+'use client';
 import { mergeClasses } from '@fluentui/react-components';
 import { useARIAButtonProps } from '@fluentui/react-aria';
 import * as React from 'react';

package/lib/components/Attachment/Attachment.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/Attachment/Attachment.tsx"],"sourcesContent":["~~import~~ { mergeClasses } from '@fluentui/react-components';\nimport { useARIAButtonProps } from '@fluentui/react-aria';\nimport * as React from 'react';\n\nimport { useAttachmentBaseStyles, useAttachmentStyles } from './Attachment.styles';\n\nexport const attachmentClassName = 'fui-Attachment';\nexport const attachmentProgressContainerClassName = `${attachmentClassName}__progress-container`;\nexport const attachmentProgressBarClassName = `${attachmentClassName}__progress`;\n\nexport interface AttachmentProps extends React.HTMLAttributes<HTMLElement> {\n actionable?: boolean;\n disabled?: boolean;\n progress?: string \| number;\n onClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;\n}\n\nexport const Attachment = React.forwardRef<HTMLDivElement, AttachmentProps>((props, ref) => {\n const { actionable, className, children, disabled, onClick, progress, onKeyDown, onKeyUp, ...rest } = props;\n const attachmentBaseClass = useAttachmentBaseStyles();\n const classes = useAttachmentStyles();\n\n const buttonProps = useARIAButtonProps('div', {\n disabled,\n onClick,\n onKeyDown: onKeyDown as React.KeyboardEventHandler<HTMLLIElement & HTMLDivElement>,\n onKeyUp: onKeyUp as React.KeyboardEventHandler<HTMLLIElement & HTMLDivElement>,\n });\n\n return (\n <div\n ref={ref}\n className={mergeClasses(attachmentClassName, attachmentBaseClass, actionable && classes.actionable, className)}\n {...(actionable && {\n 'data-is-focusable': true,\n ...buttonProps,\n })}\n {...rest}\n >\n {children}\n {!isNaN(Number(progress)) && (\n <div className={mergeClasses(attachmentProgressContainerClassName, classes.progressContainer)}>\n <div\n className={mergeClasses(classes.progressBar, attachmentProgressBarClassName)}\n style={{ width: `${progress}%` }}\n />\n </div>\n )}\n </div>\n );\n});\n\nAttachment.displayName = 'Attachment';\n"],"names":["mergeClasses","useARIAButtonProps","React","useAttachmentBaseStyles","useAttachmentStyles","attachmentClassName","attachmentProgressContainerClassName","attachmentProgressBarClassName","Attachment","forwardRef","props","ref","actionable","className","children","disabled","onClick","progress","onKeyDown","onKeyUp","rest","attachmentBaseClass","classes","buttonProps","div","isNaN","Number","progressContainer","progressBar","style","width","displayName"],"mappings":"AAAA,SAASA,YAAY,QAAQ,6BAA6B;AAC1D,SAASC,kBAAkB,QAAQ,uBAAuB;AAC1D,YAAYC,WAAW,QAAQ;AAE/B,SAASC,uBAAuB,EAAEC,mBAAmB,QAAQ,sBAAsB;AAEnF,OAAO,MAAMC,sBAAsB,iBAAiB;AACpD,OAAO,MAAMC,uCAAuC,GAAGD,oBAAoB,oBAAoB,CAAC,CAAC;AACjG,OAAO,MAAME,iCAAiC,GAAGF,oBAAoB,UAAU,CAAC,CAAC;AASjF,OAAO,MAAMG,2BAAaN,MAAMO,UAAU,CAAkC,CAACC,OAAOC;IAClF,MAAM,EAAEC,UAAU,EAAEC,SAAS,EAAEC,QAAQ,EAAEC,QAAQ,EAAEC,OAAO,EAAEC,QAAQ,EAAEC,SAAS,EAAEC,OAAO,EAAE,GAAGC,MAAM,GAAGV;IACtG,MAAMW,sBAAsBlB;IAC5B,MAAMmB,UAAUlB;IAEhB,MAAMmB,cAActB,mBAAmB,OAAO;QAC5Cc;QACAC;QACAE,WAAWA;QACXC,SAASA;IACX;IAEA,qBACE,oBAACK;QACCb,KAAKA;QACLE,WAAWb,aAAaK,qBAAqBgB,qBAAqBT,cAAcU,QAAQV,UAAU,EAAEC;QACnG,GAAID,cAAc;YACjB,qBAAqB;YACrB,GAAGW,WAAW;QAChB,CAAC;QACA,GAAGH,IAAI;OAEPN,UACA,CAACW,MAAMC,OAAOT,4BACb,oBAACO;QAAIX,WAAWb,aAAaM,sCAAsCgB,QAAQK,iBAAiB;qBAC1F,oBAACH;QACCX,WAAWb,aAAasB,QAAQM,WAAW,EAAErB;QAC7CsB,OAAO;YAAEC,OAAO,GAAGb,SAAS,CAAC,CAAC;QAAC;;AAM3C,GAAG;AAEHT,WAAWuB,WAAW,GAAG"}
1	+ {"version":3,"sources":["../src/components/Attachment/Attachment.tsx"],"sourcesContent":["'use client';\n\nimport { mergeClasses } from '@fluentui/react-components';\nimport { useARIAButtonProps } from '@fluentui/react-aria';\nimport * as React from 'react';\n\nimport { useAttachmentBaseStyles, useAttachmentStyles } from './Attachment.styles';\n\nexport const attachmentClassName = 'fui-Attachment';\nexport const attachmentProgressContainerClassName = `${attachmentClassName}__progress-container`;\nexport const attachmentProgressBarClassName = `${attachmentClassName}__progress`;\n\nexport interface AttachmentProps extends React.HTMLAttributes<HTMLElement> {\n actionable?: boolean;\n disabled?: boolean;\n progress?: string \| number;\n onClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;\n}\n\nexport const Attachment = React.forwardRef<HTMLDivElement, AttachmentProps>((props, ref) => {\n const { actionable, className, children, disabled, onClick, progress, onKeyDown, onKeyUp, ...rest } = props;\n const attachmentBaseClass = useAttachmentBaseStyles();\n const classes = useAttachmentStyles();\n\n const buttonProps = useARIAButtonProps('div', {\n disabled,\n onClick,\n onKeyDown: onKeyDown as React.KeyboardEventHandler<HTMLLIElement & HTMLDivElement>,\n onKeyUp: onKeyUp as React.KeyboardEventHandler<HTMLLIElement & HTMLDivElement>,\n });\n\n return (\n <div\n ref={ref}\n className={mergeClasses(attachmentClassName, attachmentBaseClass, actionable && classes.actionable, className)}\n {...(actionable && {\n 'data-is-focusable': true,\n ...buttonProps,\n })}\n {...rest}\n >\n {children}\n {!isNaN(Number(progress)) && (\n <div className={mergeClasses(attachmentProgressContainerClassName, classes.progressContainer)}>\n <div\n className={mergeClasses(classes.progressBar, attachmentProgressBarClassName)}\n style={{ width: `${progress}%` }}\n />\n </div>\n )}\n </div>\n );\n});\n\nAttachment.displayName = 'Attachment';\n"],"names":["mergeClasses","useARIAButtonProps","React","useAttachmentBaseStyles","useAttachmentStyles","attachmentClassName","attachmentProgressContainerClassName","attachmentProgressBarClassName","Attachment","forwardRef","props","ref","actionable","className","children","disabled","onClick","progress","onKeyDown","onKeyUp","rest","attachmentBaseClass","classes","buttonProps","div","isNaN","Number","progressContainer","progressBar","style","width","displayName"],"mappings":"AAAA;AAEA,SAASA,YAAY,QAAQ,6BAA6B;AAC1D,SAASC,kBAAkB,QAAQ,uBAAuB;AAC1D,YAAYC,WAAW,QAAQ;AAE/B,SAASC,uBAAuB,EAAEC,mBAAmB,QAAQ,sBAAsB;AAEnF,OAAO,MAAMC,sBAAsB,iBAAiB;AACpD,OAAO,MAAMC,uCAAuC,GAAGD,oBAAoB,oBAAoB,CAAC,CAAC;AACjG,OAAO,MAAME,iCAAiC,GAAGF,oBAAoB,UAAU,CAAC,CAAC;AASjF,OAAO,MAAMG,2BAAaN,MAAMO,UAAU,CAAkC,CAACC,OAAOC;IAClF,MAAM,EAAEC,UAAU,EAAEC,SAAS,EAAEC,QAAQ,EAAEC,QAAQ,EAAEC,OAAO,EAAEC,QAAQ,EAAEC,SAAS,EAAEC,OAAO,EAAE,GAAGC,MAAM,GAAGV;IACtG,MAAMW,sBAAsBlB;IAC5B,MAAMmB,UAAUlB;IAEhB,MAAMmB,cAActB,mBAAmB,OAAO;QAC5Cc;QACAC;QACAE,WAAWA;QACXC,SAASA;IACX;IAEA,qBACE,oBAACK;QACCb,KAAKA;QACLE,WAAWb,aAAaK,qBAAqBgB,qBAAqBT,cAAcU,QAAQV,UAAU,EAAEC;QACnG,GAAID,cAAc;YACjB,qBAAqB;YACrB,GAAGW,WAAW;QAChB,CAAC;QACA,GAAGH,IAAI;OAEPN,UACA,CAACW,MAAMC,OAAOT,4BACb,oBAACO;QAAIX,WAAWb,aAAaM,sCAAsCgB,QAAQK,iBAAiB;qBAC1F,oBAACH;QACCX,WAAWb,aAAasB,QAAQM,WAAW,EAAErB;QAC7CsB,OAAO;YAAEC,OAAO,GAAGb,SAAS,CAAC,CAAC;QAAC;;AAM3C,GAAG;AAEHT,WAAWuB,WAAW,GAAG"}

package/lib/components/Attachment/AttachmentAction.js CHANGED Viewed

@@ -1,3 +1,4 @@
+'use client';
 import { Button, mergeClasses } from '@fluentui/react-components';
 import * as React from 'react';
 import { useAttachmentActionStyles } from './AttachmentAction.styles';

package/lib/components/Attachment/AttachmentAction.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/Attachment/AttachmentAction.tsx"],"sourcesContent":["~~import~~ { Button, ButtonProps, mergeClasses } from '@fluentui/react-components';\nimport * as React from 'react';\nimport { useAttachmentActionStyles } from './AttachmentAction.styles';\n\nexport type AttachmentActionProps = ButtonProps;\n\nexport const attachmentActionClassName = 'fui-AttachmentAction';\n\nexport const AttachmentAction = React.forwardRef<HTMLButtonElement, AttachmentActionProps>((props, ref) => {\n const { className, disabled, disabledFocusable, children, onClick, onKeyUp, onKeyDown, ...rest } = props;\n const classes = useAttachmentActionStyles();\n\n const handleClick = React.useCallback<React.MouseEventHandler<HTMLButtonElement & HTMLAnchorElement>>(\n e => {\n e.stopPropagation();\n e.preventDefault();\n onClick?.(e);\n },\n [onClick],\n );\n\n const handleKeyUp = React.useCallback<React.KeyboardEventHandler<HTMLAnchorElement & HTMLButtonElement>>(\n e => {\n if (e.key === 'Enter' \|\| e.key === ' ') {\n e.stopPropagation();\n }\n onKeyUp?.(e);\n },\n [onKeyUp],\n );\n\n const handleKeyDown = React.useCallback<React.KeyboardEventHandler<HTMLButtonElement & HTMLAnchorElement>>(\n e => {\n if (e.key === 'Enter' \|\| e.key === ' ') {\n e.stopPropagation();\n }\n onKeyDown?.(e);\n },\n [onKeyDown],\n );\n\n return (\n <Button\n ref={ref}\n className={mergeClasses(\n attachmentActionClassName,\n classes.root,\n (disabled \|\| disabledFocusable) && classes.disabled,\n className,\n )}\n appearance=\"transparent\"\n disabled={disabled}\n disabledFocusable={disabledFocusable}\n onClick={handleClick}\n onKeyDown={handleKeyDown}\n onKeyUp={handleKeyUp}\n {...rest}\n >\n {children}\n </Button>\n );\n});\n\nAttachmentAction.displayName = 'AttachmentAction';\n"],"names":["Button","mergeClasses","React","useAttachmentActionStyles","attachmentActionClassName","AttachmentAction","forwardRef","props","ref","className","disabled","disabledFocusable","children","onClick","onKeyUp","onKeyDown","rest","classes","handleClick","useCallback","e","stopPropagation","preventDefault","handleKeyUp","key","handleKeyDown","root","appearance","displayName"],"mappings":"AAAA,SAASA,MAAM,EAAeC,YAAY,QAAQ,6BAA6B;AAC/E,YAAYC,WAAW,QAAQ;AAC/B,SAASC,yBAAyB,QAAQ,4BAA4B;AAItE,OAAO,MAAMC,4BAA4B,uBAAuB;AAEhE,OAAO,MAAMC,iCAAmBH,MAAMI,UAAU,CAA2C,CAACC,OAAOC;IACjG,MAAM,EAAEC,SAAS,EAAEC,QAAQ,EAAEC,iBAAiB,EAAEC,QAAQ,EAAEC,OAAO,EAAEC,OAAO,EAAEC,SAAS,EAAE,GAAGC,MAAM,GAAGT;IACnG,MAAMU,UAAUd;IAEhB,MAAMe,cAAchB,MAAMiB,WAAW,CACnCC,CAAAA;QACEA,EAAEC,eAAe;QACjBD,EAAEE,cAAc;QAChBT,oBAAAA,8BAAAA,QAAUO;IACZ,GACA;QAACP;KAAQ;IAGX,MAAMU,cAAcrB,MAAMiB,WAAW,CACnCC,CAAAA;QACE,IAAIA,EAAEI,GAAG,KAAK,WAAWJ,EAAEI,GAAG,KAAK,KAAK;YACtCJ,EAAEC,eAAe;QACnB;QACAP,oBAAAA,8BAAAA,QAAUM;IACZ,GACA;QAACN;KAAQ;IAGX,MAAMW,gBAAgBvB,MAAMiB,WAAW,CACrCC,CAAAA;QACE,IAAIA,EAAEI,GAAG,KAAK,WAAWJ,EAAEI,GAAG,KAAK,KAAK;YACtCJ,EAAEC,eAAe;QACnB;QACAN,sBAAAA,gCAAAA,UAAYK;IACd,GACA;QAACL;KAAU;IAGb,qBACE,oBAACf;QACCQ,KAAKA;QACLC,WAAWR,aACTG,2BACAa,QAAQS,IAAI,EACZ,AAAChB,CAAAA,YAAYC,iBAAgB,KAAMM,QAAQP,QAAQ,EACnDD;QAEFkB,YAAW;QACXjB,UAAUA;QACVC,mBAAmBA;QACnBE,SAASK;QACTH,WAAWU;QACXX,SAASS;QACR,GAAGP,IAAI;OAEPJ;AAGP,GAAG;AAEHP,iBAAiBuB,WAAW,GAAG"}
1	+ {"version":3,"sources":["../src/components/Attachment/AttachmentAction.tsx"],"sourcesContent":["'use client';\n\nimport { Button, ButtonProps, mergeClasses } from '@fluentui/react-components';\nimport * as React from 'react';\nimport { useAttachmentActionStyles } from './AttachmentAction.styles';\n\nexport type AttachmentActionProps = ButtonProps;\n\nexport const attachmentActionClassName = 'fui-AttachmentAction';\n\nexport const AttachmentAction = React.forwardRef<HTMLButtonElement, AttachmentActionProps>((props, ref) => {\n const { className, disabled, disabledFocusable, children, onClick, onKeyUp, onKeyDown, ...rest } = props;\n const classes = useAttachmentActionStyles();\n\n const handleClick = React.useCallback<React.MouseEventHandler<HTMLButtonElement & HTMLAnchorElement>>(\n e => {\n e.stopPropagation();\n e.preventDefault();\n onClick?.(e);\n },\n [onClick],\n );\n\n const handleKeyUp = React.useCallback<React.KeyboardEventHandler<HTMLAnchorElement & HTMLButtonElement>>(\n e => {\n if (e.key === 'Enter' \|\| e.key === ' ') {\n e.stopPropagation();\n }\n onKeyUp?.(e);\n },\n [onKeyUp],\n );\n\n const handleKeyDown = React.useCallback<React.KeyboardEventHandler<HTMLButtonElement & HTMLAnchorElement>>(\n e => {\n if (e.key === 'Enter' \|\| e.key === ' ') {\n e.stopPropagation();\n }\n onKeyDown?.(e);\n },\n [onKeyDown],\n );\n\n return (\n <Button\n ref={ref}\n className={mergeClasses(\n attachmentActionClassName,\n classes.root,\n (disabled \|\| disabledFocusable) && classes.disabled,\n className,\n )}\n appearance=\"transparent\"\n disabled={disabled}\n disabledFocusable={disabledFocusable}\n onClick={handleClick}\n onKeyDown={handleKeyDown}\n onKeyUp={handleKeyUp}\n {...rest}\n >\n {children}\n </Button>\n );\n});\n\nAttachmentAction.displayName = 'AttachmentAction';\n"],"names":["Button","mergeClasses","React","useAttachmentActionStyles","attachmentActionClassName","AttachmentAction","forwardRef","props","ref","className","disabled","disabledFocusable","children","onClick","onKeyUp","onKeyDown","rest","classes","handleClick","useCallback","e","stopPropagation","preventDefault","handleKeyUp","key","handleKeyDown","root","appearance","displayName"],"mappings":"AAAA;AAEA,SAASA,MAAM,EAAeC,YAAY,QAAQ,6BAA6B;AAC/E,YAAYC,WAAW,QAAQ;AAC/B,SAASC,yBAAyB,QAAQ,4BAA4B;AAItE,OAAO,MAAMC,4BAA4B,uBAAuB;AAEhE,OAAO,MAAMC,iCAAmBH,MAAMI,UAAU,CAA2C,CAACC,OAAOC;IACjG,MAAM,EAAEC,SAAS,EAAEC,QAAQ,EAAEC,iBAAiB,EAAEC,QAAQ,EAAEC,OAAO,EAAEC,OAAO,EAAEC,SAAS,EAAE,GAAGC,MAAM,GAAGT;IACnG,MAAMU,UAAUd;IAEhB,MAAMe,cAAchB,MAAMiB,WAAW,CACnCC,CAAAA;QACEA,EAAEC,eAAe;QACjBD,EAAEE,cAAc;QAChBT,oBAAAA,8BAAAA,QAAUO;IACZ,GACA;QAACP;KAAQ;IAGX,MAAMU,cAAcrB,MAAMiB,WAAW,CACnCC,CAAAA;QACE,IAAIA,EAAEI,GAAG,KAAK,WAAWJ,EAAEI,GAAG,KAAK,KAAK;YACtCJ,EAAEC,eAAe;QACnB;QACAP,oBAAAA,8BAAAA,QAAUM;IACZ,GACA;QAACN;KAAQ;IAGX,MAAMW,gBAAgBvB,MAAMiB,WAAW,CACrCC,CAAAA;QACE,IAAIA,EAAEI,GAAG,KAAK,WAAWJ,EAAEI,GAAG,KAAK,KAAK;YACtCJ,EAAEC,eAAe;QACnB;QACAN,sBAAAA,gCAAAA,UAAYK;IACd,GACA;QAACL;KAAU;IAGb,qBACE,oBAACf;QACCQ,KAAKA;QACLC,WAAWR,aACTG,2BACAa,QAAQS,IAAI,EACZ,AAAChB,CAAAA,YAAYC,iBAAgB,KAAMM,QAAQP,QAAQ,EACnDD;QAEFkB,YAAW;QACXjB,UAAUA;QACVC,mBAAmBA;QACnBE,SAASK;QACTH,WAAWU;QACXX,SAASS;QACR,GAAGP,IAAI;OAEPJ;AAGP,GAAG;AAEHP,iBAAiBuB,WAAW,GAAG"}

package/lib/components/Attachment/AttachmentBody.js CHANGED Viewed

@@ -1,3 +1,4 @@
+'use client';
 import { mergeClasses } from '@fluentui/react-components';
 import * as React from 'react';
 import { useAttachmentBodyStyles } from './AttachmentBody.styles';

package/lib/components/Attachment/AttachmentBody.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/Attachment/AttachmentBody.tsx"],"sourcesContent":["~~import~~ { mergeClasses } from '@fluentui/react-components';\nimport * as React from 'react';\nimport { useAttachmentBodyStyles } from './AttachmentBody.styles';\n\nexport interface AttachmentBodyProps extends React.HTMLAttributes<HTMLDivElement> {}\n\nexport const attachmentBodyClassName = 'fui-AttachmentBody';\n\nexport const AttachmentBody: React.FC<AttachmentBodyProps> = React.forwardRef<HTMLDivElement, AttachmentBodyProps>(\n (props, ref) => {\n const { className, children, ...rest } = props;\n const classes = useAttachmentBodyStyles();\n\n return (\n <div ref={ref} className={mergeClasses(attachmentBodyClassName, classes.root, className)} {...rest}>\n {children}\n </div>\n );\n },\n);\n\nAttachmentBody.displayName = 'AttachmentBody';\n"],"names":["mergeClasses","React","useAttachmentBodyStyles","attachmentBodyClassName","AttachmentBody","forwardRef","props","ref","className","children","rest","classes","div","root","displayName"],"mappings":"AAAA,SAASA,YAAY,QAAQ,6BAA6B;AAC1D,YAAYC,WAAW,QAAQ;AAC/B,SAASC,uBAAuB,QAAQ,0BAA0B;AAIlE,OAAO,MAAMC,0BAA0B,qBAAqB;AAE5D,OAAO,MAAMC,+BAAgDH,MAAMI,UAAU,CAC3E,CAACC,OAAOC;IACN,MAAM,EAAEC,SAAS,EAAEC,QAAQ,EAAE,GAAGC,MAAM,GAAGJ;IACzC,MAAMK,UAAUT;IAEhB,qBACE,oBAACU;QAAIL,KAAKA;QAAKC,WAAWR,aAAaG,yBAAyBQ,QAAQE,IAAI,EAAEL;QAAa,GAAGE,IAAI;OAC/FD;AAGP,GACA;AAEFL,eAAeU,WAAW,GAAG"}
1	+ {"version":3,"sources":["../src/components/Attachment/AttachmentBody.tsx"],"sourcesContent":["'use client';\n\nimport { mergeClasses } from '@fluentui/react-components';\nimport * as React from 'react';\nimport { useAttachmentBodyStyles } from './AttachmentBody.styles';\n\nexport interface AttachmentBodyProps extends React.HTMLAttributes<HTMLDivElement> {}\n\nexport const attachmentBodyClassName = 'fui-AttachmentBody';\n\nexport const AttachmentBody: React.FC<AttachmentBodyProps> = React.forwardRef<HTMLDivElement, AttachmentBodyProps>(\n (props, ref) => {\n const { className, children, ...rest } = props;\n const classes = useAttachmentBodyStyles();\n\n return (\n <div ref={ref} className={mergeClasses(attachmentBodyClassName, classes.root, className)} {...rest}>\n {children}\n </div>\n );\n },\n);\n\nAttachmentBody.displayName = 'AttachmentBody';\n"],"names":["mergeClasses","React","useAttachmentBodyStyles","attachmentBodyClassName","AttachmentBody","forwardRef","props","ref","className","children","rest","classes","div","root","displayName"],"mappings":"AAAA;AAEA,SAASA,YAAY,QAAQ,6BAA6B;AAC1D,YAAYC,WAAW,QAAQ;AAC/B,SAASC,uBAAuB,QAAQ,0BAA0B;AAIlE,OAAO,MAAMC,0BAA0B,qBAAqB;AAE5D,OAAO,MAAMC,+BAAgDH,MAAMI,UAAU,CAC3E,CAACC,OAAOC;IACN,MAAM,EAAEC,SAAS,EAAEC,QAAQ,EAAE,GAAGC,MAAM,GAAGJ;IACzC,MAAMK,UAAUT;IAEhB,qBACE,oBAACU;QAAIL,KAAKA;QAAKC,WAAWR,aAAaG,yBAAyBQ,QAAQE,IAAI,EAAEL;QAAa,GAAGE,IAAI;OAC/FD;AAGP,GACA;AAEFL,eAAeU,WAAW,GAAG"}

package/lib/components/Attachment/AttachmentDescription.js CHANGED Viewed

@@ -1,3 +1,4 @@
+'use client';
 import { mergeClasses } from '@fluentui/react-components';
 import * as React from 'react';
 import { useAttachmentDescriptionStyles } from './AttachmentDescription.styles';

package/lib/components/Attachment/AttachmentDescription.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/Attachment/AttachmentDescription.tsx"],"sourcesContent":["~~import~~ { mergeClasses } from '@fluentui/react-components';\nimport * as React from 'react';\nimport { useAttachmentDescriptionStyles } from './AttachmentDescription.styles';\n\nexport interface AttachmentDescriptionProps extends React.HTMLAttributes<HTMLSpanElement> {}\n\nexport const attachmentDescriptionClassName = 'fui-AttachmentDescription';\n\nexport const AttachmentDescription: React.FC<AttachmentDescriptionProps> = React.forwardRef<\n HTMLSpanElement,\n AttachmentDescriptionProps\n>((props, ref) => {\n const { className, children, ...rest } = props;\n const classes = useAttachmentDescriptionStyles();\n\n return (\n <span ref={ref} className={mergeClasses(attachmentDescriptionClassName, classes.root, className)} {...rest}>\n {children}\n </span>\n );\n});\n\nAttachmentDescription.displayName = 'AttachmentDescription';\n"],"names":["mergeClasses","React","useAttachmentDescriptionStyles","attachmentDescriptionClassName","AttachmentDescription","forwardRef","props","ref","className","children","rest","classes","span","root","displayName"],"mappings":"AAAA,SAASA,YAAY,QAAQ,6BAA6B;AAC1D,YAAYC,WAAW,QAAQ;AAC/B,SAASC,8BAA8B,QAAQ,iCAAiC;AAIhF,OAAO,MAAMC,iCAAiC,4BAA4B;AAE1E,OAAO,MAAMC,sCAA8DH,MAAMI,UAAU,CAGzF,CAACC,OAAOC;IACR,MAAM,EAAEC,SAAS,EAAEC,QAAQ,EAAE,GAAGC,MAAM,GAAGJ;IACzC,MAAMK,UAAUT;IAEhB,qBACE,oBAACU;QAAKL,KAAKA;QAAKC,WAAWR,aAAaG,gCAAgCQ,QAAQE,IAAI,EAAEL;QAAa,GAAGE,IAAI;OACvGD;AAGP,GAAG;AAEHL,sBAAsBU,WAAW,GAAG"}
1	+ {"version":3,"sources":["../src/components/Attachment/AttachmentDescription.tsx"],"sourcesContent":["'use client';\n\nimport { mergeClasses } from '@fluentui/react-components';\nimport * as React from 'react';\nimport { useAttachmentDescriptionStyles } from './AttachmentDescription.styles';\n\nexport interface AttachmentDescriptionProps extends React.HTMLAttributes<HTMLSpanElement> {}\n\nexport const attachmentDescriptionClassName = 'fui-AttachmentDescription';\n\nexport const AttachmentDescription: React.FC<AttachmentDescriptionProps> = React.forwardRef<\n HTMLSpanElement,\n AttachmentDescriptionProps\n>((props, ref) => {\n const { className, children, ...rest } = props;\n const classes = useAttachmentDescriptionStyles();\n\n return (\n <span ref={ref} className={mergeClasses(attachmentDescriptionClassName, classes.root, className)} {...rest}>\n {children}\n </span>\n );\n});\n\nAttachmentDescription.displayName = 'AttachmentDescription';\n"],"names":["mergeClasses","React","useAttachmentDescriptionStyles","attachmentDescriptionClassName","AttachmentDescription","forwardRef","props","ref","className","children","rest","classes","span","root","displayName"],"mappings":"AAAA;AAEA,SAASA,YAAY,QAAQ,6BAA6B;AAC1D,YAAYC,WAAW,QAAQ;AAC/B,SAASC,8BAA8B,QAAQ,iCAAiC;AAIhF,OAAO,MAAMC,iCAAiC,4BAA4B;AAE1E,OAAO,MAAMC,sCAA8DH,MAAMI,UAAU,CAGzF,CAACC,OAAOC;IACR,MAAM,EAAEC,SAAS,EAAEC,QAAQ,EAAE,GAAGC,MAAM,GAAGJ;IACzC,MAAMK,UAAUT;IAEhB,qBACE,oBAACU;QAAKL,KAAKA;QAAKC,WAAWR,aAAaG,gCAAgCQ,QAAQE,IAAI,EAAEL;QAAa,GAAGE,IAAI;OACvGD;AAGP,GAAG;AAEHL,sBAAsBU,WAAW,GAAG"}

package/lib/components/Attachment/AttachmentHeader.js CHANGED Viewed

@@ -1,3 +1,4 @@
+'use client';
 import { mergeClasses } from '@fluentui/react-components';
 import * as React from 'react';
 import { useAttachmentHeaderStyles } from './AttachmentHeader.styles';

package/lib/components/Attachment/AttachmentHeader.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/Attachment/AttachmentHeader.tsx"],"sourcesContent":["~~import~~ { mergeClasses } from '@fluentui/react-components';\nimport * as React from 'react';\nimport { useAttachmentHeaderStyles } from './AttachmentHeader.styles';\n\nexport interface AttachmentHeaderProps extends React.HTMLAttributes<HTMLSpanElement> {}\n\nexport const attachmentHeaderClassName = 'fui-AttachmentHeader';\n\nexport const AttachmentHeader: React.FC<AttachmentHeaderProps> = React.forwardRef<\n HTMLSpanElement,\n AttachmentHeaderProps\n>((props, ref) => {\n const { className, children, ...rest } = props;\n const classes = useAttachmentHeaderStyles();\n\n return (\n <span ref={ref} className={mergeClasses(attachmentHeaderClassName, classes.root, className)} {...rest}>\n {children}\n </span>\n );\n});\n\nAttachmentHeader.displayName = 'AttachmentHeader';\n"],"names":["mergeClasses","React","useAttachmentHeaderStyles","attachmentHeaderClassName","AttachmentHeader","forwardRef","props","ref","className","children","rest","classes","span","root","displayName"],"mappings":"AAAA,SAASA,YAAY,QAAQ,6BAA6B;AAC1D,YAAYC,WAAW,QAAQ;AAC/B,SAASC,yBAAyB,QAAQ,4BAA4B;AAItE,OAAO,MAAMC,4BAA4B,uBAAuB;AAEhE,OAAO,MAAMC,iCAAoDH,MAAMI,UAAU,CAG/E,CAACC,OAAOC;IACR,MAAM,EAAEC,SAAS,EAAEC,QAAQ,EAAE,GAAGC,MAAM,GAAGJ;IACzC,MAAMK,UAAUT;IAEhB,qBACE,oBAACU;QAAKL,KAAKA;QAAKC,WAAWR,aAAaG,2BAA2BQ,QAAQE,IAAI,EAAEL;QAAa,GAAGE,IAAI;OAClGD;AAGP,GAAG;AAEHL,iBAAiBU,WAAW,GAAG"}
1	+ {"version":3,"sources":["../src/components/Attachment/AttachmentHeader.tsx"],"sourcesContent":["'use client';\n\nimport { mergeClasses } from '@fluentui/react-components';\nimport * as React from 'react';\nimport { useAttachmentHeaderStyles } from './AttachmentHeader.styles';\n\nexport interface AttachmentHeaderProps extends React.HTMLAttributes<HTMLSpanElement> {}\n\nexport const attachmentHeaderClassName = 'fui-AttachmentHeader';\n\nexport const AttachmentHeader: React.FC<AttachmentHeaderProps> = React.forwardRef<\n HTMLSpanElement,\n AttachmentHeaderProps\n>((props, ref) => {\n const { className, children, ...rest } = props;\n const classes = useAttachmentHeaderStyles();\n\n return (\n <span ref={ref} className={mergeClasses(attachmentHeaderClassName, classes.root, className)} {...rest}>\n {children}\n </span>\n );\n});\n\nAttachmentHeader.displayName = 'AttachmentHeader';\n"],"names":["mergeClasses","React","useAttachmentHeaderStyles","attachmentHeaderClassName","AttachmentHeader","forwardRef","props","ref","className","children","rest","classes","span","root","displayName"],"mappings":"AAAA;AAEA,SAASA,YAAY,QAAQ,6BAA6B;AAC1D,YAAYC,WAAW,QAAQ;AAC/B,SAASC,yBAAyB,QAAQ,4BAA4B;AAItE,OAAO,MAAMC,4BAA4B,uBAAuB;AAEhE,OAAO,MAAMC,iCAAoDH,MAAMI,UAAU,CAG/E,CAACC,OAAOC;IACR,MAAM,EAAEC,SAAS,EAAEC,QAAQ,EAAE,GAAGC,MAAM,GAAGJ;IACzC,MAAMK,UAAUT;IAEhB,qBACE,oBAACU;QAAKL,KAAKA;QAAKC,WAAWR,aAAaG,2BAA2BQ,QAAQE,IAAI,EAAEL;QAAa,GAAGE,IAAI;OAClGD;AAGP,GAAG;AAEHL,iBAAiBU,WAAW,GAAG"}

package/lib/components/Attachment/AttachmentIcon.js CHANGED Viewed

@@ -1,3 +1,4 @@
+'use client';
 import { mergeClasses } from '@fluentui/react-components';
 import * as React from 'react';
 import { useAttachmentIconStyles } from './AttachmentIcon.styles';

package/lib/components/Attachment/AttachmentIcon.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/Attachment/AttachmentIcon.tsx"],"sourcesContent":["~~import~~ { mergeClasses } from '@fluentui/react-components';\nimport * as React from 'react';\nimport { useAttachmentIconStyles } from './AttachmentIcon.styles';\n\nexport interface AttachmentIconProps extends React.HTMLAttributes<HTMLSpanElement> {}\n\nexport const attachmentIconClassName = 'fui-AttachmentIcon';\n\nexport const AttachmentIcon: React.FC<AttachmentIconProps> = React.forwardRef<HTMLSpanElement, AttachmentIconProps>(\n (props, ref) => {\n const { className, children, ...rest } = props;\n const classes = useAttachmentIconStyles();\n\n return (\n <span ref={ref} className={mergeClasses(attachmentIconClassName, classes.root, className)} {...rest}>\n {children}\n </span>\n );\n },\n);\n\nAttachmentIcon.displayName = 'AttachmentIcon';\n"],"names":["mergeClasses","React","useAttachmentIconStyles","attachmentIconClassName","AttachmentIcon","forwardRef","props","ref","className","children","rest","classes","span","root","displayName"],"mappings":"AAAA,SAASA,YAAY,QAAQ,6BAA6B;AAC1D,YAAYC,WAAW,QAAQ;AAC/B,SAASC,uBAAuB,QAAQ,0BAA0B;AAIlE,OAAO,MAAMC,0BAA0B,qBAAqB;AAE5D,OAAO,MAAMC,+BAAgDH,MAAMI,UAAU,CAC3E,CAACC,OAAOC;IACN,MAAM,EAAEC,SAAS,EAAEC,QAAQ,EAAE,GAAGC,MAAM,GAAGJ;IACzC,MAAMK,UAAUT;IAEhB,qBACE,oBAACU;QAAKL,KAAKA;QAAKC,WAAWR,aAAaG,yBAAyBQ,QAAQE,IAAI,EAAEL;QAAa,GAAGE,IAAI;OAChGD;AAGP,GACA;AAEFL,eAAeU,WAAW,GAAG"}
1	+ {"version":3,"sources":["../src/components/Attachment/AttachmentIcon.tsx"],"sourcesContent":["'use client';\n\nimport { mergeClasses } from '@fluentui/react-components';\nimport * as React from 'react';\nimport { useAttachmentIconStyles } from './AttachmentIcon.styles';\n\nexport interface AttachmentIconProps extends React.HTMLAttributes<HTMLSpanElement> {}\n\nexport const attachmentIconClassName = 'fui-AttachmentIcon';\n\nexport const AttachmentIcon: React.FC<AttachmentIconProps> = React.forwardRef<HTMLSpanElement, AttachmentIconProps>(\n (props, ref) => {\n const { className, children, ...rest } = props;\n const classes = useAttachmentIconStyles();\n\n return (\n <span ref={ref} className={mergeClasses(attachmentIconClassName, classes.root, className)} {...rest}>\n {children}\n </span>\n );\n },\n);\n\nAttachmentIcon.displayName = 'AttachmentIcon';\n"],"names":["mergeClasses","React","useAttachmentIconStyles","attachmentIconClassName","AttachmentIcon","forwardRef","props","ref","className","children","rest","classes","span","root","displayName"],"mappings":"AAAA;AAEA,SAASA,YAAY,QAAQ,6BAA6B;AAC1D,YAAYC,WAAW,QAAQ;AAC/B,SAASC,uBAAuB,QAAQ,0BAA0B;AAIlE,OAAO,MAAMC,0BAA0B,qBAAqB;AAE5D,OAAO,MAAMC,+BAAgDH,MAAMI,UAAU,CAC3E,CAACC,OAAOC;IACN,MAAM,EAAEC,SAAS,EAAEC,QAAQ,EAAE,GAAGC,MAAM,GAAGJ;IACzC,MAAMK,UAAUT;IAEhB,qBACE,oBAACU;QAAKL,KAAKA;QAAKC,WAAWR,aAAaG,yBAAyBQ,QAAQE,IAAI,EAAEL;QAAa,GAAGE,IAAI;OAChGD;AAGP,GACA;AAEFL,eAAeU,WAAW,GAAG"}

package/lib/components/Flex/Flex.js CHANGED Viewed

@@ -1,3 +1,4 @@
+'use client';
 import { mergeClasses } from '@fluentui/react-components';
 import * as React from 'react';
 import { useFlexStyles } from './Flex.styles';

package/lib/components/Flex/Flex.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/Flex/Flex.tsx"],"sourcesContent":["~~import~~ { mergeClasses } from '@fluentui/react-components';\nimport * as React from 'react';\n\nimport { useFlexStyles } from './Flex.styles';\n\nexport interface FlexProps {\n /** Defines if container should be inline element. /\n inline?: boolean;\n\n /* Sets vertical flow direction. /\n column?: boolean;\n\n /* Allows overflow items to wrap on the next container's line. /\n wrap?: boolean;\n\n /* Controls items alignment in horizontal direction. /\n hAlign?: 'start' \| 'center' \| 'end' \| 'stretch';\n\n /* Controls items alignment in vertical direction. /\n vAlign?: 'start' \| 'center' \| 'end' \| 'stretch';\n\n /* Defines strategy for distributing remaining space between items. /\n space?: 'around' \| 'between' \| 'evenly';\n\n /* Defines gap between each two adjacent child items. /\n gap?: 'gap.smaller' \| 'gap.small' \| 'gap.medium' \| 'gap.large';\n\n /* Defines container's padding. /\n padding?: 'padding.medium';\n\n /* Orders container to fill all parent's space available. /\n fill?: boolean;\n}\n\nexport const flexClassName = 'fui-Flex';\n\nexport const Flex = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLElement> & FlexProps>((props, ref) => {\n const { children, column, fill, gap, hAlign, inline, padding, space, vAlign, wrap, className, ...rest } = props;\n const classes = useFlexStyles();\n\n const classMaps = React.useMemo(\n () => ({\n alignItems: {\n start: classes.alignItemsFlexStart,\n center: classes.alignItemsCenter,\n end: classes.alignItemsFlexEnd,\n stretch: classes.alignItemsCenter,\n },\n justifyContent: {\n start: classes.justifyContentFlexStart,\n center: classes.justifyContentCenter,\n end: classes.justifyContentFlexEnd,\n stretch: classes.justifyContentStretch,\n },\n justifyContentSpace: {\n around: classes.justifyContentSpaceAround,\n between: classes.justifyContentSpaceBetween,\n evenly: classes.justifyContentSpaceEvenly,\n },\n gapForColumnFlex: {\n 'gap.smaller': classes.gapForColumnFlexSmaller,\n 'gap.small': classes.gapForColumnFlexSmall,\n 'gap.medium': classes.gapForColumnFlexMedium,\n 'gap.large': classes.gapForColumnFlexLarge,\n },\n gapRow: {\n 'gap.smaller': classes.gapForRowFlexSmaller,\n 'gap.small': classes.gapForRowFlexSmall,\n 'gap.medium': classes.gapForRowFlexMedium,\n 'gap.large': classes.gapForRowFlexLarge,\n },\n paddings: {\n 'padding.medium': classes.paddingMedium,\n },\n }),\n [classes],\n );\n\n const flexClasses = mergeClasses(\n flexClassName,\n classes.flex,\n inline && classes.inline,\n column && classes.column,\n hAlign && (column ? classMaps.alignItems[hAlign] : classMaps.justifyContent[hAlign]),\n vAlign && (column ? classMaps.justifyContent[vAlign] : classMaps.alignItems[vAlign]),\n space && classMaps.justifyContentSpace[space],\n wrap && classes.wrap,\n fill && classes.fill,\n gap && (column ? classMaps.gapForColumnFlex[gap] : classMaps.gapRow[gap]),\n padding && classMaps.paddings[padding],\n className,\n );\n\n const content = React.Children.map(children, child => {\n // @ts-expect-error __isFlexItem is added to the React type property by N\n const isFlexItemElement: boolean = child?.type?.__isFlexItem;\n\n return isFlexItemElement\n ? React.cloneElement(child as React.ReactElement, {\n flexDirection: column ? 'column' : 'row',\n })\n : child;\n });\n\n return (\n <div ref={ref} className={flexClasses} {...rest}>\n {content}\n </div>\n );\n});\n\nFlex.displayName = 'Flex';\n"],"names":["mergeClasses","React","useFlexStyles","flexClassName","Flex","forwardRef","props","ref","children","column","fill","gap","hAlign","inline","padding","space","vAlign","wrap","className","rest","classes","classMaps","useMemo","alignItems","start","alignItemsFlexStart","center","alignItemsCenter","end","alignItemsFlexEnd","stretch","justifyContent","justifyContentFlexStart","justifyContentCenter","justifyContentFlexEnd","justifyContentStretch","justifyContentSpace","around","justifyContentSpaceAround","between","justifyContentSpaceBetween","evenly","justifyContentSpaceEvenly","gapForColumnFlex","gapForColumnFlexSmaller","gapForColumnFlexSmall","gapForColumnFlexMedium","gapForColumnFlexLarge","gapRow","gapForRowFlexSmaller","gapForRowFlexSmall","gapForRowFlexMedium","gapForRowFlexLarge","paddings","paddingMedium","flexClasses","flex","content","Children","map","child","isFlexItemElement","type","__isFlexItem","cloneElement","flexDirection","div","displayName"],"mappings":"AAAA,SAASA,YAAY,QAAQ,6BAA6B;AAC1D,YAAYC,WAAW,QAAQ;AAE/B,SAASC,aAAa,QAAQ,gBAAgB;AA+B9C,OAAO,MAAMC,gBAAgB,WAAW;AAExC,OAAO,MAAMC,qBAAOH,MAAMI,UAAU,CAAgE,CAACC,OAAOC;IAC1G,MAAM,EAAEC,QAAQ,EAAEC,MAAM,EAAEC,IAAI,EAAEC,GAAG,EAAEC,MAAM,EAAEC,MAAM,EAAEC,OAAO,EAAEC,KAAK,EAAEC,MAAM,EAAEC,IAAI,EAAEC,SAAS,EAAE,GAAGC,MAAM,GAAGb;IAC1G,MAAMc,UAAUlB;IAEhB,MAAMmB,YAAYpB,MAAMqB,OAAO,CAC7B,IAAO,CAAA;YACLC,YAAY;gBACVC,OAAOJ,QAAQK,mBAAmB;gBAClCC,QAAQN,QAAQO,gBAAgB;gBAChCC,KAAKR,QAAQS,iBAAiB;gBAC9BC,SAASV,QAAQO,gBAAgB;YACnC;YACAI,gBAAgB;gBACdP,OAAOJ,QAAQY,uBAAuB;gBACtCN,QAAQN,QAAQa,oBAAoB;gBACpCL,KAAKR,QAAQc,qBAAqB;gBAClCJ,SAASV,QAAQe,qBAAqB;YACxC;YACAC,qBAAqB;gBACnBC,QAAQjB,QAAQkB,yBAAyB;gBACzCC,SAASnB,QAAQoB,0BAA0B;gBAC3CC,QAAQrB,QAAQsB,yBAAyB;YAC3C;YACAC,kBAAkB;gBAChB,eAAevB,QAAQwB,uBAAuB;gBAC9C,aAAaxB,QAAQyB,qBAAqB;gBAC1C,cAAczB,QAAQ0B,sBAAsB;gBAC5C,aAAa1B,QAAQ2B,qBAAqB;YAC5C;YACAC,QAAQ;gBACN,eAAe5B,QAAQ6B,oBAAoB;gBAC3C,aAAa7B,QAAQ8B,kBAAkB;gBACvC,cAAc9B,QAAQ+B,mBAAmB;gBACzC,aAAa/B,QAAQgC,kBAAkB;YACzC;YACAC,UAAU;gBACR,kBAAkBjC,QAAQkC,aAAa;YACzC;QACF,CAAA,GACA;QAAClC;KAAQ;IAGX,MAAMmC,cAAcvD,aAClBG,eACAiB,QAAQoC,IAAI,EACZ3C,UAAUO,QAAQP,MAAM,EACxBJ,UAAUW,QAAQX,MAAM,EACxBG,UAAWH,CAAAA,SAASY,UAAUE,UAAU,CAACX,OAAO,GAAGS,UAAUU,cAAc,CAACnB,OAAO,AAAD,GAClFI,UAAWP,CAAAA,SAASY,UAAUU,cAAc,CAACf,OAAO,GAAGK,UAAUE,UAAU,CAACP,OAAO,AAAD,GAClFD,SAASM,UAAUe,mBAAmB,CAACrB,MAAM,EAC7CE,QAAQG,QAAQH,IAAI,EACpBP,QAAQU,QAAQV,IAAI,EACpBC,OAAQF,CAAAA,SAASY,UAAUsB,gBAAgB,CAAChC,IAAI,GAAGU,UAAU2B,MAAM,CAACrC,IAAI,AAAD,GACvEG,WAAWO,UAAUgC,QAAQ,CAACvC,QAAQ,EACtCI;IAGF,MAAMuC,UAAUxD,MAAMyD,QAAQ,CAACC,GAAG,CAACnD,UAAUoD,CAAAA;YAERA;QADnC,0EAA0E;QAC1E,MAAMC,oBAA6BD,kBAAAA,6BAAAA,cAAAA,MAAOE,IAAI,cAAXF,kCAAAA,YAAaG,YAAY;QAE5D,OAAOF,kCACH5D,MAAM+D,YAAY,CAACJ,OAA6B;YAC9CK,eAAexD,SAAS,WAAW;QACrC,KACAmD;IACN;IAEA,qBACE,oBAACM;QAAI3D,KAAKA;QAAKW,WAAWqC;QAAc,GAAGpC,IAAI;OAC5CsC;AAGP,GAAG;AAEHrD,KAAK+D,WAAW,GAAG"}
1	+ {"version":3,"sources":["../src/components/Flex/Flex.tsx"],"sourcesContent":["'use client';\n\nimport { mergeClasses } from '@fluentui/react-components';\nimport * as React from 'react';\n\nimport { useFlexStyles } from './Flex.styles';\n\nexport interface FlexProps {\n /** Defines if container should be inline element. /\n inline?: boolean;\n\n /* Sets vertical flow direction. /\n column?: boolean;\n\n /* Allows overflow items to wrap on the next container's line. /\n wrap?: boolean;\n\n /* Controls items alignment in horizontal direction. /\n hAlign?: 'start' \| 'center' \| 'end' \| 'stretch';\n\n /* Controls items alignment in vertical direction. /\n vAlign?: 'start' \| 'center' \| 'end' \| 'stretch';\n\n /* Defines strategy for distributing remaining space between items. /\n space?: 'around' \| 'between' \| 'evenly';\n\n /* Defines gap between each two adjacent child items. /\n gap?: 'gap.smaller' \| 'gap.small' \| 'gap.medium' \| 'gap.large';\n\n /* Defines container's padding. /\n padding?: 'padding.medium';\n\n /* Orders container to fill all parent's space available. /\n fill?: boolean;\n}\n\nexport const flexClassName = 'fui-Flex';\n\nexport const Flex = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLElement> & FlexProps>((props, ref) => {\n const { children, column, fill, gap, hAlign, inline, padding, space, vAlign, wrap, className, ...rest } = props;\n const classes = useFlexStyles();\n\n const classMaps = React.useMemo(\n () => ({\n alignItems: {\n start: classes.alignItemsFlexStart,\n center: classes.alignItemsCenter,\n end: classes.alignItemsFlexEnd,\n stretch: classes.alignItemsCenter,\n },\n justifyContent: {\n start: classes.justifyContentFlexStart,\n center: classes.justifyContentCenter,\n end: classes.justifyContentFlexEnd,\n stretch: classes.justifyContentStretch,\n },\n justifyContentSpace: {\n around: classes.justifyContentSpaceAround,\n between: classes.justifyContentSpaceBetween,\n evenly: classes.justifyContentSpaceEvenly,\n },\n gapForColumnFlex: {\n 'gap.smaller': classes.gapForColumnFlexSmaller,\n 'gap.small': classes.gapForColumnFlexSmall,\n 'gap.medium': classes.gapForColumnFlexMedium,\n 'gap.large': classes.gapForColumnFlexLarge,\n },\n gapRow: {\n 'gap.smaller': classes.gapForRowFlexSmaller,\n 'gap.small': classes.gapForRowFlexSmall,\n 'gap.medium': classes.gapForRowFlexMedium,\n 'gap.large': classes.gapForRowFlexLarge,\n },\n paddings: {\n 'padding.medium': classes.paddingMedium,\n },\n }),\n [classes],\n );\n\n const flexClasses = mergeClasses(\n flexClassName,\n classes.flex,\n inline && classes.inline,\n column && classes.column,\n hAlign && (column ? classMaps.alignItems[hAlign] : classMaps.justifyContent[hAlign]),\n vAlign && (column ? classMaps.justifyContent[vAlign] : classMaps.alignItems[vAlign]),\n space && classMaps.justifyContentSpace[space],\n wrap && classes.wrap,\n fill && classes.fill,\n gap && (column ? classMaps.gapForColumnFlex[gap] : classMaps.gapRow[gap]),\n padding && classMaps.paddings[padding],\n className,\n );\n\n const content = React.Children.map(children, child => {\n // @ts-expect-error __isFlexItem is added to the React type property by N\n const isFlexItemElement: boolean = child?.type?.__isFlexItem;\n\n return isFlexItemElement\n ? React.cloneElement(child as React.ReactElement, {\n flexDirection: column ? 'column' : 'row',\n })\n : child;\n });\n\n return (\n <div ref={ref} className={flexClasses} {...rest}>\n {content}\n </div>\n );\n});\n\nFlex.displayName = 'Flex';\n"],"names":["mergeClasses","React","useFlexStyles","flexClassName","Flex","forwardRef","props","ref","children","column","fill","gap","hAlign","inline","padding","space","vAlign","wrap","className","rest","classes","classMaps","useMemo","alignItems","start","alignItemsFlexStart","center","alignItemsCenter","end","alignItemsFlexEnd","stretch","justifyContent","justifyContentFlexStart","justifyContentCenter","justifyContentFlexEnd","justifyContentStretch","justifyContentSpace","around","justifyContentSpaceAround","between","justifyContentSpaceBetween","evenly","justifyContentSpaceEvenly","gapForColumnFlex","gapForColumnFlexSmaller","gapForColumnFlexSmall","gapForColumnFlexMedium","gapForColumnFlexLarge","gapRow","gapForRowFlexSmaller","gapForRowFlexSmall","gapForRowFlexMedium","gapForRowFlexLarge","paddings","paddingMedium","flexClasses","flex","content","Children","map","child","isFlexItemElement","type","__isFlexItem","cloneElement","flexDirection","div","displayName"],"mappings":"AAAA;AAEA,SAASA,YAAY,QAAQ,6BAA6B;AAC1D,YAAYC,WAAW,QAAQ;AAE/B,SAASC,aAAa,QAAQ,gBAAgB;AA+B9C,OAAO,MAAMC,gBAAgB,WAAW;AAExC,OAAO,MAAMC,qBAAOH,MAAMI,UAAU,CAAgE,CAACC,OAAOC;IAC1G,MAAM,EAAEC,QAAQ,EAAEC,MAAM,EAAEC,IAAI,EAAEC,GAAG,EAAEC,MAAM,EAAEC,MAAM,EAAEC,OAAO,EAAEC,KAAK,EAAEC,MAAM,EAAEC,IAAI,EAAEC,SAAS,EAAE,GAAGC,MAAM,GAAGb;IAC1G,MAAMc,UAAUlB;IAEhB,MAAMmB,YAAYpB,MAAMqB,OAAO,CAC7B,IAAO,CAAA;YACLC,YAAY;gBACVC,OAAOJ,QAAQK,mBAAmB;gBAClCC,QAAQN,QAAQO,gBAAgB;gBAChCC,KAAKR,QAAQS,iBAAiB;gBAC9BC,SAASV,QAAQO,gBAAgB;YACnC;YACAI,gBAAgB;gBACdP,OAAOJ,QAAQY,uBAAuB;gBACtCN,QAAQN,QAAQa,oBAAoB;gBACpCL,KAAKR,QAAQc,qBAAqB;gBAClCJ,SAASV,QAAQe,qBAAqB;YACxC;YACAC,qBAAqB;gBACnBC,QAAQjB,QAAQkB,yBAAyB;gBACzCC,SAASnB,QAAQoB,0BAA0B;gBAC3CC,QAAQrB,QAAQsB,yBAAyB;YAC3C;YACAC,kBAAkB;gBAChB,eAAevB,QAAQwB,uBAAuB;gBAC9C,aAAaxB,QAAQyB,qBAAqB;gBAC1C,cAAczB,QAAQ0B,sBAAsB;gBAC5C,aAAa1B,QAAQ2B,qBAAqB;YAC5C;YACAC,QAAQ;gBACN,eAAe5B,QAAQ6B,oBAAoB;gBAC3C,aAAa7B,QAAQ8B,kBAAkB;gBACvC,cAAc9B,QAAQ+B,mBAAmB;gBACzC,aAAa/B,QAAQgC,kBAAkB;YACzC;YACAC,UAAU;gBACR,kBAAkBjC,QAAQkC,aAAa;YACzC;QACF,CAAA,GACA;QAAClC;KAAQ;IAGX,MAAMmC,cAAcvD,aAClBG,eACAiB,QAAQoC,IAAI,EACZ3C,UAAUO,QAAQP,MAAM,EACxBJ,UAAUW,QAAQX,MAAM,EACxBG,UAAWH,CAAAA,SAASY,UAAUE,UAAU,CAACX,OAAO,GAAGS,UAAUU,cAAc,CAACnB,OAAO,AAAD,GAClFI,UAAWP,CAAAA,SAASY,UAAUU,cAAc,CAACf,OAAO,GAAGK,UAAUE,UAAU,CAACP,OAAO,AAAD,GAClFD,SAASM,UAAUe,mBAAmB,CAACrB,MAAM,EAC7CE,QAAQG,QAAQH,IAAI,EACpBP,QAAQU,QAAQV,IAAI,EACpBC,OAAQF,CAAAA,SAASY,UAAUsB,gBAAgB,CAAChC,IAAI,GAAGU,UAAU2B,MAAM,CAACrC,IAAI,AAAD,GACvEG,WAAWO,UAAUgC,QAAQ,CAACvC,QAAQ,EACtCI;IAGF,MAAMuC,UAAUxD,MAAMyD,QAAQ,CAACC,GAAG,CAACnD,UAAUoD,CAAAA;YAERA;QADnC,0EAA0E;QAC1E,MAAMC,oBAA6BD,kBAAAA,6BAAAA,cAAAA,MAAOE,IAAI,cAAXF,kCAAAA,YAAaG,YAAY;QAE5D,OAAOF,kCACH5D,MAAM+D,YAAY,CAACJ,OAA6B;YAC9CK,eAAexD,SAAS,WAAW;QACrC,KACAmD;IACN;IAEA,qBACE,oBAACM;QAAI3D,KAAKA;QAAKW,WAAWqC;QAAc,GAAGpC,IAAI;OAC5CsC;AAGP,GAAG;AAEHrD,KAAK+D,WAAW,GAAG"}

package/lib/components/FormField/FormFieldShim.js CHANGED Viewed

@@ -1,3 +1,4 @@
+'use client';
 import { renderField_unstable, useFieldContextValues_unstable, useFieldStyles_unstable, useField_unstable } from '@fluentui/react-components';
 import * as React from 'react';
 export const FormFieldShim = /*#__PURE__*/ React.forwardRef((props, ref)=>{

package/lib/components/FormField/FormFieldShim.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/FormField/FormFieldShim.tsx"],"sourcesContent":["~~import~~ {\n FieldProps,\n renderField_unstable,\n useFieldContextValues_unstable,\n useFieldStyles_unstable,\n useField_unstable,\n} from '@fluentui/react-components';\nimport type { ObjectShorthandValue } from '@fluentui/react-northstar';\n\nimport * as React from 'react';\n\ntype WithContent = ObjectShorthandValue<React.HTMLAttributes<HTMLDivElement>> \| string;\n\n/*\n \n /\ntype CustomInputFieldProps = React.PropsWithChildren<{\n /\n Message to be shown when error state is true\n /\n errorMessage?: WithContent;\n /\n Whether the field label should be marked as required.\n /\n required?: boolean;\n /\n Control to be rendered\n /\n control?: ObjectShorthandValue<{\n /\n Control content\n /\n content?: React.ReactNode;\n }> & {\n /\n Error state\n /\n error?: 'true' \| 'false';\n };\n /\n Label to be rendered\n */\n label?: WithContent;\n}>;\n\nexport const FormFieldShim = React.forwardRef<HTMLInputElement, CustomInputFieldProps>((props, ref) => {\n const { errorMessage, required, control, label } = props;\n const fieldProps: FieldProps = { required };\n\n if (errorMessage && control?.error === 'true') {\n fieldProps.validationState = 'error';\n if (typeof errorMessage === 'object') {\n fieldProps.validationMessage = errorMessage.content;\n }\n if (typeof errorMessage === 'string') {\n fieldProps.validationMessage = errorMessage;\n }\n }\n\n if (label) {\n if (typeof label === 'object') {\n fieldProps.label = label.content;\n } else {\n fieldProps.label = label;\n }\n }\n\n const children: FieldProps['children'] = props.children \|\| control?.content;\n\n if (React.isValidElement(children)) {\n const child: React.ReactElement = children;\n\n // Use the Field's child render function to pass the field control props to the child\n fieldProps.children = fieldControlProps => React.cloneElement(child, { ...fieldControlProps, ...child.props });\n } else {\n fieldProps.children = children;\n }\n\n const state = useField_unstable(fieldProps, ref);\n useFieldStyles_unstable(state);\n const context = useFieldContextValues_unstable(state);\n return renderField_unstable(state, context);\n});\n\nFormFieldShim.displayName = 'FormFieldShim';\n"],"names":["renderField_unstable","useFieldContextValues_unstable","useFieldStyles_unstable","useField_unstable","React","FormFieldShim","forwardRef","props","ref","errorMessage","required","control","label","fieldProps","error","validationState","validationMessage","content","children","isValidElement","child","fieldControlProps","cloneElement","state","context","displayName"],"mappings":"AAAA,SAEEA,oBAAoB,EACpBC,8BAA8B,EAC9BC,uBAAuB,EACvBC,iBAAiB,QACZ,6BAA6B;AAGpC,YAAYC,WAAW,QAAQ;AAoC/B,OAAO,MAAMC,8BAAgBD,MAAME,UAAU,CAA0C,CAACC,OAAOC;IAC7F,MAAM,EAAEC,YAAY,EAAEC,QAAQ,EAAEC,OAAO,EAAEC,KAAK,EAAE,GAAGL;IACnD,MAAMM,aAAyB;QAAEH;IAAS;IAE1C,IAAID,gBAAgBE,CAAAA,oBAAAA,8BAAAA,QAASG,KAAK,MAAK,QAAQ;QAC7CD,WAAWE,eAAe,GAAG;QAC7B,IAAI,OAAON,iBAAiB,UAAU;YACpCI,WAAWG,iBAAiB,GAAGP,aAAaQ,OAAO;QACrD;QACA,IAAI,OAAOR,iBAAiB,UAAU;YACpCI,WAAWG,iBAAiB,GAAGP;QACjC;IACF;IAEA,IAAIG,OAAO;QACT,IAAI,OAAOA,UAAU,UAAU;YAC7BC,WAAWD,KAAK,GAAGA,MAAMK,OAAO;QAClC,OAAO;YACLJ,WAAWD,KAAK,GAAGA;QACrB;IACF;IAEA,MAAMM,WAAmCX,MAAMW,QAAQ,KAAIP,oBAAAA,8BAAAA,QAASM,OAAO;IAE3E,kBAAIb,MAAMe,cAAc,CAACD,WAAW;QAClC,MAAME,QAA4BF;QAElC,qFAAqF;QACrFL,WAAWK,QAAQ,GAAGG,CAAAA,kCAAqBjB,MAAMkB,YAAY,CAACF,OAAO;gBAAE,GAAGC,iBAAiB;gBAAE,GAAGD,MAAMb,KAAK;YAAC;IAC9G,OAAO;QACLM,WAAWK,QAAQ,GAAGA;IACxB;IAEA,MAAMK,QAAQpB,kBAAkBU,YAAYL;IAC5CN,wBAAwBqB;IACxB,MAAMC,UAAUvB,+BAA+BsB;IAC/C,OAAOvB,qBAAqBuB,OAAOC;AACrC,GAAG;AAEHnB,cAAcoB,WAAW,GAAG"}
1	+ {"version":3,"sources":["../src/components/FormField/FormFieldShim.tsx"],"sourcesContent":["'use client';\n\nimport {\n FieldProps,\n renderField_unstable,\n useFieldContextValues_unstable,\n useFieldStyles_unstable,\n useField_unstable,\n} from '@fluentui/react-components';\nimport type { ObjectShorthandValue } from '@fluentui/react-northstar';\n\nimport * as React from 'react';\n\ntype WithContent = ObjectShorthandValue<React.HTMLAttributes<HTMLDivElement>> \| string;\n\n/*\n \n /\ntype CustomInputFieldProps = React.PropsWithChildren<{\n /\n Message to be shown when error state is true\n /\n errorMessage?: WithContent;\n /\n Whether the field label should be marked as required.\n /\n required?: boolean;\n /\n Control to be rendered\n /\n control?: ObjectShorthandValue<{\n /\n Control content\n /\n content?: React.ReactNode;\n }> & {\n /\n Error state\n /\n error?: 'true' \| 'false';\n };\n /\n Label to be rendered\n */\n label?: WithContent;\n}>;\n\nexport const FormFieldShim = React.forwardRef<HTMLInputElement, CustomInputFieldProps>((props, ref) => {\n const { errorMessage, required, control, label } = props;\n const fieldProps: FieldProps = { required };\n\n if (errorMessage && control?.error === 'true') {\n fieldProps.validationState = 'error';\n if (typeof errorMessage === 'object') {\n fieldProps.validationMessage = errorMessage.content;\n }\n if (typeof errorMessage === 'string') {\n fieldProps.validationMessage = errorMessage;\n }\n }\n\n if (label) {\n if (typeof label === 'object') {\n fieldProps.label = label.content;\n } else {\n fieldProps.label = label;\n }\n }\n\n const children: FieldProps['children'] = props.children \|\| control?.content;\n\n if (React.isValidElement(children)) {\n const child: React.ReactElement = children;\n\n // Use the Field's child render function to pass the field control props to the child\n fieldProps.children = fieldControlProps => React.cloneElement(child, { ...fieldControlProps, ...child.props });\n } else {\n fieldProps.children = children;\n }\n\n const state = useField_unstable(fieldProps, ref);\n useFieldStyles_unstable(state);\n const context = useFieldContextValues_unstable(state);\n return renderField_unstable(state, context);\n});\n\nFormFieldShim.displayName = 'FormFieldShim';\n"],"names":["renderField_unstable","useFieldContextValues_unstable","useFieldStyles_unstable","useField_unstable","React","FormFieldShim","forwardRef","props","ref","errorMessage","required","control","label","fieldProps","error","validationState","validationMessage","content","children","isValidElement","child","fieldControlProps","cloneElement","state","context","displayName"],"mappings":"AAAA;AAEA,SAEEA,oBAAoB,EACpBC,8BAA8B,EAC9BC,uBAAuB,EACvBC,iBAAiB,QACZ,6BAA6B;AAGpC,YAAYC,WAAW,QAAQ;AAoC/B,OAAO,MAAMC,8BAAgBD,MAAME,UAAU,CAA0C,CAACC,OAAOC;IAC7F,MAAM,EAAEC,YAAY,EAAEC,QAAQ,EAAEC,OAAO,EAAEC,KAAK,EAAE,GAAGL;IACnD,MAAMM,aAAyB;QAAEH;IAAS;IAE1C,IAAID,gBAAgBE,CAAAA,oBAAAA,8BAAAA,QAASG,KAAK,MAAK,QAAQ;QAC7CD,WAAWE,eAAe,GAAG;QAC7B,IAAI,OAAON,iBAAiB,UAAU;YACpCI,WAAWG,iBAAiB,GAAGP,aAAaQ,OAAO;QACrD;QACA,IAAI,OAAOR,iBAAiB,UAAU;YACpCI,WAAWG,iBAAiB,GAAGP;QACjC;IACF;IAEA,IAAIG,OAAO;QACT,IAAI,OAAOA,UAAU,UAAU;YAC7BC,WAAWD,KAAK,GAAGA,MAAMK,OAAO;QAClC,OAAO;YACLJ,WAAWD,KAAK,GAAGA;QACrB;IACF;IAEA,MAAMM,WAAmCX,MAAMW,QAAQ,KAAIP,oBAAAA,8BAAAA,QAASM,OAAO;IAE3E,kBAAIb,MAAMe,cAAc,CAACD,WAAW;QAClC,MAAME,QAA4BF;QAElC,qFAAqF;QACrFL,WAAWK,QAAQ,GAAGG,CAAAA,kCAAqBjB,MAAMkB,YAAY,CAACF,OAAO;gBAAE,GAAGC,iBAAiB;gBAAE,GAAGD,MAAMb,KAAK;YAAC;IAC9G,OAAO;QACLM,WAAWK,QAAQ,GAAGA;IACxB;IAEA,MAAMK,QAAQpB,kBAAkBU,YAAYL;IAC5CN,wBAAwBqB;IACxB,MAAMC,UAAUvB,+BAA+BsB;IAC/C,OAAOvB,qBAAqBuB,OAAOC;AACrC,GAAG;AAEHnB,cAAcoB,WAAW,GAAG"}

package/lib/components/Grid/GridShim.js CHANGED Viewed

@@ -1,3 +1,4 @@
+'use client';
 import { mergeClasses } from '@fluentui/react-components';
 import * as React from 'react';
 import { useGridStyles } from './Grid.styles';

package/lib/components/Grid/GridShim.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/Grid/GridShim.tsx"],"sourcesContent":["~~import~~ { mergeClasses } from '@fluentui/react-components';\nimport * as React from 'react';\nimport { useGridStyles } from './Grid.styles';\n\nexport interface GridShimProps {\n /*\n The columns of the grid with a space-separated list of values.\n * The values represent the track size, and the space between them represents the grid line.\n /\n columns?: 1 \| 2 \| 3;\n\n /\n The rows of the grid with a space-separated list of values.\n * The values represent the track size, and the space between them represents the grid line.\n */\n rows?: 1 \| 2 \| 3;\n}\n\nexport const gridShimClassName = 'fui-Grid';\n\nexport const GridShim = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLElement> & GridShimProps>(\n (props, ref) => {\n const { rows, columns, className, ...rest } = props;\n const classes = useGridStyles();\n\n const classMaps = React.useMemo(\n () => ({\n rowsClasses: {\n 1: classes.rows1,\n 2: classes.rows2,\n 3: classes.rows3,\n },\n columnsClasses: {\n 1: classes.columns1,\n 2: classes.columns2,\n 3: classes.columns3,\n },\n }),\n [classes],\n );\n\n const gridClasses = mergeClasses(\n gridShimClassName,\n classes.grid,\n !rows && !columns && classes.columnsDefault,\n rows && !columns && classes.onlyRows,\n rows && classMaps.rowsClasses[rows],\n columns && classMaps.columnsClasses[columns],\n className,\n );\n return <div ref={ref} className={gridClasses} {...rest} />;\n },\n);\n\nGridShim.displayName = 'GridShim';\n"],"names":["mergeClasses","React","useGridStyles","gridShimClassName","GridShim","forwardRef","props","ref","rows","columns","className","rest","classes","classMaps","useMemo","rowsClasses","rows1","rows2","rows3","columnsClasses","columns1","columns2","columns3","gridClasses","grid","columnsDefault","onlyRows","div","displayName"],"mappings":"AAAA,SAASA,YAAY,QAAQ,6BAA6B;AAC1D,YAAYC,WAAW,QAAQ;AAC/B,SAASC,aAAa,QAAQ,gBAAgB;AAgB9C,OAAO,MAAMC,oBAAoB,WAAW;AAE5C,OAAO,MAAMC,yBAAWH,MAAMI,UAAU,CACtC,CAACC,OAAOC;IACN,MAAM,EAAEC,IAAI,EAAEC,OAAO,EAAEC,SAAS,EAAE,GAAGC,MAAM,GAAGL;IAC9C,MAAMM,UAAUV;IAEhB,MAAMW,YAAYZ,MAAMa,OAAO,CAC7B,IAAO,CAAA;YACLC,aAAa;gBACX,GAAGH,QAAQI,KAAK;gBAChB,GAAGJ,QAAQK,KAAK;gBAChB,GAAGL,QAAQM,KAAK;YAClB;YACAC,gBAAgB;gBACd,GAAGP,QAAQQ,QAAQ;gBACnB,GAAGR,QAAQS,QAAQ;gBACnB,GAAGT,QAAQU,QAAQ;YACrB;QACF,CAAA,GACA;QAACV;KAAQ;IAGX,MAAMW,cAAcvB,aAClBG,mBACAS,QAAQY,IAAI,EACZ,CAAChB,QAAQ,CAACC,WAAWG,QAAQa,cAAc,EAC3CjB,QAAQ,CAACC,WAAWG,QAAQc,QAAQ,EACpClB,QAAQK,UAAUE,WAAW,CAACP,KAAK,EACnCC,WAAWI,UAAUM,cAAc,CAACV,QAAQ,EAC5CC;IAEF,qBAAO,oBAACiB;QAAIpB,KAAKA;QAAKG,WAAWa;QAAc,GAAGZ,IAAI;;AACxD,GACA;AAEFP,SAASwB,WAAW,GAAG"}
1	+ {"version":3,"sources":["../src/components/Grid/GridShim.tsx"],"sourcesContent":["'use client';\n\nimport { mergeClasses } from '@fluentui/react-components';\nimport * as React from 'react';\nimport { useGridStyles } from './Grid.styles';\n\nexport interface GridShimProps {\n /*\n The columns of the grid with a space-separated list of values.\n * The values represent the track size, and the space between them represents the grid line.\n /\n columns?: 1 \| 2 \| 3;\n\n /\n The rows of the grid with a space-separated list of values.\n * The values represent the track size, and the space between them represents the grid line.\n */\n rows?: 1 \| 2 \| 3;\n}\n\nexport const gridShimClassName = 'fui-Grid';\n\nexport const GridShim = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLElement> & GridShimProps>(\n (props, ref) => {\n const { rows, columns, className, ...rest } = props;\n const classes = useGridStyles();\n\n const classMaps = React.useMemo(\n () => ({\n rowsClasses: {\n 1: classes.rows1,\n 2: classes.rows2,\n 3: classes.rows3,\n },\n columnsClasses: {\n 1: classes.columns1,\n 2: classes.columns2,\n 3: classes.columns3,\n },\n }),\n [classes],\n );\n\n const gridClasses = mergeClasses(\n gridShimClassName,\n classes.grid,\n !rows && !columns && classes.columnsDefault,\n rows && !columns && classes.onlyRows,\n rows && classMaps.rowsClasses[rows],\n columns && classMaps.columnsClasses[columns],\n className,\n );\n return <div ref={ref} className={gridClasses} {...rest} />;\n },\n);\n\nGridShim.displayName = 'GridShim';\n"],"names":["mergeClasses","React","useGridStyles","gridShimClassName","GridShim","forwardRef","props","ref","rows","columns","className","rest","classes","classMaps","useMemo","rowsClasses","rows1","rows2","rows3","columnsClasses","columns1","columns2","columns3","gridClasses","grid","columnsDefault","onlyRows","div","displayName"],"mappings":"AAAA;AAEA,SAASA,YAAY,QAAQ,6BAA6B;AAC1D,YAAYC,WAAW,QAAQ;AAC/B,SAASC,aAAa,QAAQ,gBAAgB;AAgB9C,OAAO,MAAMC,oBAAoB,WAAW;AAE5C,OAAO,MAAMC,yBAAWH,MAAMI,UAAU,CACtC,CAACC,OAAOC;IACN,MAAM,EAAEC,IAAI,EAAEC,OAAO,EAAEC,SAAS,EAAE,GAAGC,MAAM,GAAGL;IAC9C,MAAMM,UAAUV;IAEhB,MAAMW,YAAYZ,MAAMa,OAAO,CAC7B,IAAO,CAAA;YACLC,aAAa;gBACX,GAAGH,QAAQI,KAAK;gBAChB,GAAGJ,QAAQK,KAAK;gBAChB,GAAGL,QAAQM,KAAK;YAClB;YACAC,gBAAgB;gBACd,GAAGP,QAAQQ,QAAQ;gBACnB,GAAGR,QAAQS,QAAQ;gBACnB,GAAGT,QAAQU,QAAQ;YACrB;QACF,CAAA,GACA;QAACV;KAAQ;IAGX,MAAMW,cAAcvB,aAClBG,mBACAS,QAAQY,IAAI,EACZ,CAAChB,QAAQ,CAACC,WAAWG,QAAQa,cAAc,EAC3CjB,QAAQ,CAACC,WAAWG,QAAQc,QAAQ,EACpClB,QAAQK,UAAUE,WAAW,CAACP,KAAK,EACnCC,WAAWI,UAAUM,cAAc,CAACV,QAAQ,EAC5CC;IAEF,qBAAO,oBAACiB;QAAIpB,KAAKA;QAAKG,WAAWa;QAAc,GAAGZ,IAAI;;AACxD,GACA;AAEFP,SAASwB,WAAW,GAAG"}

package/lib/components/ItemLayout/ItemLayout.js CHANGED Viewed

@@ -1,4 +1,5 @@
-  import { jsx as _jsx, jsxs as _jsxs } from "@fluentui/react-jsx-runtime/jsx-runtime";
+  'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "@fluentui/react-jsx-runtime/jsx-runtime";
 import * as React from 'react';
 import { mergeClasses } from '@fluentui/react-components';
 import { getIntrinsicElementProps, slot, assertSlots } from '@fluentui/react-utilities';

package/lib/components/ItemLayout/ItemLayout.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/ItemLayout/ItemLayout.tsx"],"sourcesContent":["/** @jsxRuntime automatic /\n/* @jsxImportSource @fluentui/react-jsx-runtime /\n\nimport as React from 'react';\nimport { mergeClasses } from '@fluentui/react-components';\nimport {\n ComponentProps,\n ComponentState,\n getIntrinsicElementProps,\n Slot,\n slot,\n assertSlots,\n} from '@fluentui/react-utilities';\n\nimport { useItemLayoutStyles } from './ItemLayout.styles';\n\ntype ItemLayoutSlots = {\n root: Slot<'div'>;\n\n contentMedia?: Slot<'div'>;\n contentWrapper?: Slot<'div'>;\n\n header?: Slot<'div'>;\n headerMedia?: Slot<'div'>;\n\n startMedia?: Slot<'div'>;\n endMedia?: Slot<'div'>;\n};\n\ntype ItemLayoutProps = ComponentProps<ItemLayoutSlots>;\n\ntype ItemLayoutState = ComponentState<ItemLayoutSlots>;\n\nexport const itemLayoutClassName = 'fui-ItemLayout';\n\nexport const ItemLayout = React.forwardRef<HTMLDivElement, ItemLayoutProps>((props, ref) => {\n const state: ItemLayoutState = {\n components: {\n root: 'div',\n contentWrapper: 'div',\n contentMedia: 'div',\n header: 'div',\n headerMedia: 'div',\n startMedia: 'div',\n endMedia: 'div',\n },\n root: slot.always(getIntrinsicElementProps('div', { ...props, ref }), { elementType: 'div' }),\n contentMedia: slot.optional(props.contentMedia, { elementType: 'div' }),\n contentWrapper: slot.optional(props.contentWrapper, { renderByDefault: true, elementType: 'div' }),\n header: slot.optional(props.header, { elementType: 'div' }),\n headerMedia: slot.optional(props.headerMedia, { elementType: 'div' }),\n startMedia: slot.optional(props.startMedia, { elementType: 'div' }),\n endMedia: slot.optional(props.endMedia, { elementType: 'div' }),\n };\n const styles = useItemLayoutStyles();\n\n state.root.className = mergeClasses(itemLayoutClassName, styles.root, state.root.className);\n if (state.contentWrapper) {\n state.contentWrapper.className = mergeClasses(styles.contentWrapper, state.contentWrapper.className);\n }\n\n if (state.contentMedia) {\n state.contentMedia.className = mergeClasses(styles.contentMedia, state.contentMedia.className);\n }\n\n if (state.header) {\n state.header.className = mergeClasses(styles.header, state.header.className);\n }\n\n if (state.headerMedia) {\n state.headerMedia.className = mergeClasses(styles.headerMedia, state.headerMedia.className);\n }\n\n if (state.startMedia) {\n state.startMedia.className = mergeClasses(styles.startMedia, state.startMedia.className);\n }\n\n if (state.endMedia) {\n state.endMedia.className = mergeClasses(styles.endMedia, state.endMedia.className);\n }\n\n assertSlots<ItemLayoutSlots>(state);\n\n return (\n <state.root>\n {state.startMedia && <state.startMedia />}\n {state.header && <state.header />}\n {state.headerMedia && <state.headerMedia />}\n {state.contentWrapper && <state.contentWrapper>{state.root.children}</state.contentWrapper>}\n {state.contentMedia && <state.contentMedia />}\n {state.endMedia && <state.endMedia />}\n </state.root>\n );\n});\n\nItemLayout.displayName = 'ItemLayout';\n"],"names":["React","mergeClasses","getIntrinsicElementProps","slot","assertSlots","useItemLayoutStyles","itemLayoutClassName","ItemLayout","forwardRef","props","ref","state","components","root","contentWrapper","contentMedia","header","headerMedia","startMedia","endMedia","always","elementType","optional","renderByDefault","styles","className","children","displayName"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD~~;AAEjD~~,YAAYA,WAAW,QAAQ;AAC/B,SAASC,YAAY,QAAQ,6BAA6B;AAC1D,SAGEC,wBAAwB,EAExBC,IAAI,EACJC,WAAW,QACN,4BAA4B;AAEnC,SAASC,mBAAmB,QAAQ,sBAAsB;AAmB1D,OAAO,MAAMC,sBAAsB,iBAAiB;AAEpD,OAAO,MAAMC,2BAAaP,MAAMQ,UAAU,CAAkC,CAACC,OAAOC;IAClF,MAAMC,QAAyB;QAC7BC,YAAY;YACVC,MAAM;YACNC,gBAAgB;YAChBC,cAAc;YACdC,QAAQ;YACRC,aAAa;YACbC,YAAY;YACZC,UAAU;QACZ;QACAN,MAAMV,KAAKiB,MAAM,CAAClB,yBAAyB,OAAO;YAAE,GAAGO,KAAK;YAAEC;QAAI,IAAI;YAAEW,aAAa;QAAM;QAC3FN,cAAcZ,KAAKmB,QAAQ,CAACb,MAAMM,YAAY,EAAE;YAAEM,aAAa;QAAM;QACrEP,gBAAgBX,KAAKmB,QAAQ,CAACb,MAAMK,cAAc,EAAE;YAAES,iBAAiB;YAAMF,aAAa;QAAM;QAChGL,QAAQb,KAAKmB,QAAQ,CAACb,MAAMO,MAAM,EAAE;YAAEK,aAAa;QAAM;QACzDJ,aAAad,KAAKmB,QAAQ,CAACb,MAAMQ,WAAW,EAAE;YAAEI,aAAa;QAAM;QACnEH,YAAYf,KAAKmB,QAAQ,CAACb,MAAMS,UAAU,EAAE;YAAEG,aAAa;QAAM;QACjEF,UAAUhB,KAAKmB,QAAQ,CAACb,MAAMU,QAAQ,EAAE;YAAEE,aAAa;QAAM;IAC/D;IACA,MAAMG,SAASnB;IAEfM,MAAME,IAAI,CAACY,SAAS,GAAGxB,aAAaK,qBAAqBkB,OAAOX,IAAI,EAAEF,MAAME,IAAI,CAACY,SAAS;IAC1F,IAAId,MAAMG,cAAc,EAAE;QACxBH,MAAMG,cAAc,CAACW,SAAS,GAAGxB,aAAauB,OAAOV,cAAc,EAAEH,MAAMG,cAAc,CAACW,SAAS;IACrG;IAEA,IAAId,MAAMI,YAAY,EAAE;QACtBJ,MAAMI,YAAY,CAACU,SAAS,GAAGxB,aAAauB,OAAOT,YAAY,EAAEJ,MAAMI,YAAY,CAACU,SAAS;IAC/F;IAEA,IAAId,MAAMK,MAAM,EAAE;QAChBL,MAAMK,MAAM,CAACS,SAAS,GAAGxB,aAAauB,OAAOR,MAAM,EAAEL,MAAMK,MAAM,CAACS,SAAS;IAC7E;IAEA,IAAId,MAAMM,WAAW,EAAE;QACrBN,MAAMM,WAAW,CAACQ,SAAS,GAAGxB,aAAauB,OAAOP,WAAW,EAAEN,MAAMM,WAAW,CAACQ,SAAS;IAC5F;IAEA,IAAId,MAAMO,UAAU,EAAE;QACpBP,MAAMO,UAAU,CAACO,SAAS,GAAGxB,aAAauB,OAAON,UAAU,EAAEP,MAAMO,UAAU,CAACO,SAAS;IACzF;IAEA,IAAId,MAAMQ,QAAQ,EAAE;QAClBR,MAAMQ,QAAQ,CAACM,SAAS,GAAGxB,aAAauB,OAAOL,QAAQ,EAAER,MAAMQ,QAAQ,CAACM,SAAS;IACnF;IAEArB,YAA6BO;IAE7B,qBACE,MAACA,MAAME,IAAI;;YACRF,MAAMO,UAAU,kBAAI,KAACP,MAAMO,UAAU;YACrCP,MAAMK,MAAM,kBAAI,KAACL,MAAMK,MAAM;YAC7BL,MAAMM,WAAW,kBAAI,KAACN,MAAMM,WAAW;YACvCN,MAAMG,cAAc,kBAAI,KAACH,MAAMG,cAAc;0BAAEH,MAAME,IAAI,CAACa,QAAQ;;YAClEf,MAAMI,YAAY,kBAAI,KAACJ,MAAMI,YAAY;YACzCJ,MAAMQ,QAAQ,kBAAI,KAACR,MAAMQ,QAAQ;;;AAGxC,GAAG;AAEHZ,WAAWoB,WAAW,GAAG"}
1	+ {"version":3,"sources":["../src/components/ItemLayout/ItemLayout.tsx"],"sourcesContent":["/** @jsxRuntime automatic /\n/* @jsxImportSource @fluentui/react-jsx-runtime /\n\n'use client';\n\nimport as React from 'react';\nimport { mergeClasses } from '@fluentui/react-components';\nimport {\n ComponentProps,\n ComponentState,\n getIntrinsicElementProps,\n Slot,\n slot,\n assertSlots,\n} from '@fluentui/react-utilities';\n\nimport { useItemLayoutStyles } from './ItemLayout.styles';\n\ntype ItemLayoutSlots = {\n root: Slot<'div'>;\n\n contentMedia?: Slot<'div'>;\n contentWrapper?: Slot<'div'>;\n\n header?: Slot<'div'>;\n headerMedia?: Slot<'div'>;\n\n startMedia?: Slot<'div'>;\n endMedia?: Slot<'div'>;\n};\n\ntype ItemLayoutProps = ComponentProps<ItemLayoutSlots>;\n\ntype ItemLayoutState = ComponentState<ItemLayoutSlots>;\n\nexport const itemLayoutClassName = 'fui-ItemLayout';\n\nexport const ItemLayout = React.forwardRef<HTMLDivElement, ItemLayoutProps>((props, ref) => {\n const state: ItemLayoutState = {\n components: {\n root: 'div',\n contentWrapper: 'div',\n contentMedia: 'div',\n header: 'div',\n headerMedia: 'div',\n startMedia: 'div',\n endMedia: 'div',\n },\n root: slot.always(getIntrinsicElementProps('div', { ...props, ref }), { elementType: 'div' }),\n contentMedia: slot.optional(props.contentMedia, { elementType: 'div' }),\n contentWrapper: slot.optional(props.contentWrapper, { renderByDefault: true, elementType: 'div' }),\n header: slot.optional(props.header, { elementType: 'div' }),\n headerMedia: slot.optional(props.headerMedia, { elementType: 'div' }),\n startMedia: slot.optional(props.startMedia, { elementType: 'div' }),\n endMedia: slot.optional(props.endMedia, { elementType: 'div' }),\n };\n const styles = useItemLayoutStyles();\n\n state.root.className = mergeClasses(itemLayoutClassName, styles.root, state.root.className);\n if (state.contentWrapper) {\n state.contentWrapper.className = mergeClasses(styles.contentWrapper, state.contentWrapper.className);\n }\n\n if (state.contentMedia) {\n state.contentMedia.className = mergeClasses(styles.contentMedia, state.contentMedia.className);\n }\n\n if (state.header) {\n state.header.className = mergeClasses(styles.header, state.header.className);\n }\n\n if (state.headerMedia) {\n state.headerMedia.className = mergeClasses(styles.headerMedia, state.headerMedia.className);\n }\n\n if (state.startMedia) {\n state.startMedia.className = mergeClasses(styles.startMedia, state.startMedia.className);\n }\n\n if (state.endMedia) {\n state.endMedia.className = mergeClasses(styles.endMedia, state.endMedia.className);\n }\n\n assertSlots<ItemLayoutSlots>(state);\n\n return (\n <state.root>\n {state.startMedia && <state.startMedia />}\n {state.header && <state.header />}\n {state.headerMedia && <state.headerMedia />}\n {state.contentWrapper && <state.contentWrapper>{state.root.children}</state.contentWrapper>}\n {state.contentMedia && <state.contentMedia />}\n {state.endMedia && <state.endMedia />}\n </state.root>\n );\n});\n\nItemLayout.displayName = 'ItemLayout';\n"],"names":["React","mergeClasses","getIntrinsicElementProps","slot","assertSlots","useItemLayoutStyles","itemLayoutClassName","ItemLayout","forwardRef","props","ref","state","components","root","contentWrapper","contentMedia","header","headerMedia","startMedia","endMedia","always","elementType","optional","renderByDefault","styles","className","children","displayName"],"mappings":"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"}

package/lib/components/List/List/List.js CHANGED Viewed

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
 import { useList_unstable } from './useList';

package/lib/components/List/List/List.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/List/List/List.tsx"],"sourcesContent":["~~import~~ * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\nimport { useList_unstable } from './useList';\nimport { renderList_unstable } from './renderList';\nimport { useListStyles_unstable } from './useListStyles.styles';\nimport type { ListProps } from './List.types';\nimport { useListContextValues_unstable } from './useListContextValues';\n\nexport const List: ForwardRefComponent<ListProps> = React.forwardRef((props, ref) => {\n const state = useList_unstable(props, ref);\n const contextValues = useListContextValues_unstable(state);\n\n useListStyles_unstable(state);\n useCustomStyleHook_unstable('useListStyles_unstable')(state);\n\n return renderList_unstable(state, contextValues);\n});\n\nList.displayName = 'List';\n"],"names":["React","useCustomStyleHook_unstable","useList_unstable","renderList_unstable","useListStyles_unstable","useListContextValues_unstable","List","forwardRef","props","ref","state","contextValues","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,2BAA2B,QAAQ,kCAAkC;AAC9E,SAASC,gBAAgB,QAAQ,YAAY;AAC7C,SAASC,mBAAmB,QAAQ,eAAe;AACnD,SAASC,sBAAsB,QAAQ,yBAAyB;AAEhE,SAASC,6BAA6B,QAAQ,yBAAyB;AAEvE,OAAO,MAAMC,qBAAuCN,MAAMO,UAAU,CAAC,CAACC,OAAOC;IAC3E,MAAMC,QAAQR,iBAAiBM,OAAOC;IACtC,MAAME,gBAAgBN,8BAA8BK;IAEpDN,uBAAuBM;IACvBT,4BAA4B,0BAA0BS;IAEtD,OAAOP,oBAAoBO,OAAOC;AACpC,GAAG;AAEHL,KAAKM,WAAW,GAAG"}
1	+ {"version":3,"sources":["../src/components/List/List/List.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\nimport { useList_unstable } from './useList';\nimport { renderList_unstable } from './renderList';\nimport { useListStyles_unstable } from './useListStyles.styles';\nimport type { ListProps } from './List.types';\nimport { useListContextValues_unstable } from './useListContextValues';\n\nexport const List: ForwardRefComponent<ListProps> = React.forwardRef((props, ref) => {\n const state = useList_unstable(props, ref);\n const contextValues = useListContextValues_unstable(state);\n\n useListStyles_unstable(state);\n useCustomStyleHook_unstable('useListStyles_unstable')(state);\n\n return renderList_unstable(state, contextValues);\n});\n\nList.displayName = 'List';\n"],"names":["React","useCustomStyleHook_unstable","useList_unstable","renderList_unstable","useListStyles_unstable","useListContextValues_unstable","List","forwardRef","props","ref","state","contextValues","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,2BAA2B,QAAQ,kCAAkC;AAC9E,SAASC,gBAAgB,QAAQ,YAAY;AAC7C,SAASC,mBAAmB,QAAQ,eAAe;AACnD,SAASC,sBAAsB,QAAQ,yBAAyB;AAEhE,SAASC,6BAA6B,QAAQ,yBAAyB;AAEvE,OAAO,MAAMC,qBAAuCN,MAAMO,UAAU,CAAC,CAACC,OAAOC;IAC3E,MAAMC,QAAQR,iBAAiBM,OAAOC;IACtC,MAAME,gBAAgBN,8BAA8BK;IAEpDN,uBAAuBM;IACvBT,4BAA4B,0BAA0BS;IAEtD,OAAOP,oBAAoBO,OAAOC;AACpC,GAAG;AAEHL,KAAKM,WAAW,GAAG"}

package/lib/components/List/List/listContext.js CHANGED Viewed

@@ -1,3 +1,4 @@
+'use client';
 import { createContext, useContextSelector } from '@fluentui/react-context-selector';
 export const listContextDefaultValue = {
     navigable: false,

package/lib/components/List/List/listContext.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/List/List/listContext.ts"],"sourcesContent":["~~import~~ { createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport type { ContextSelector } from '@fluentui/react-context-selector';\nimport { ListContextValue } from './List.types';\n\nexport const listContextDefaultValue: ListContextValue = {\n navigable: false,\n selection: undefined,\n as: undefined,\n};\n\nconst listContext = createContext<ListContextValue \| undefined>(undefined);\n\nexport const ListContextProvider = listContext.Provider;\n\nexport const useListContext_unstable = <T>(selector: ContextSelector<ListContextValue, T>): T =>\n useContextSelector(listContext, (ctx = listContextDefaultValue) => selector(ctx));\n"],"names":["createContext","useContextSelector","listContextDefaultValue","navigable","selection","undefined","as","listContext","ListContextProvider","Provider","useListContext_unstable","selector","ctx"],"mappings":"AAAA,SAASA,aAAa,EAAEC,kBAAkB,QAAQ,mCAAmC;AAIrF,OAAO,MAAMC,0BAA4C;IACvDC,WAAW;IACXC,WAAWC;IACXC,IAAID;AACN,EAAE;AAEF,MAAME,cAAcP,cAA4CK;AAEhE,OAAO,MAAMG,sBAAsBD,YAAYE,QAAQ,CAAC;AAExD,OAAO,MAAMC,0BAA0B,CAAIC,WACzCV,mBAAmBM,aAAa,CAACK,MAAMV,uBAAuB,GAAKS,SAASC,MAAM"}
1	+ {"version":3,"sources":["../src/components/List/List/listContext.ts"],"sourcesContent":["'use client';\n\nimport { createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport type { ContextSelector } from '@fluentui/react-context-selector';\nimport { ListContextValue } from './List.types';\n\nexport const listContextDefaultValue: ListContextValue = {\n navigable: false,\n selection: undefined,\n as: undefined,\n};\n\nconst listContext = createContext<ListContextValue \| undefined>(undefined);\n\nexport const ListContextProvider = listContext.Provider;\n\nexport const useListContext_unstable = <T>(selector: ContextSelector<ListContextValue, T>): T =>\n useContextSelector(listContext, (ctx = listContextDefaultValue) => selector(ctx));\n"],"names":["createContext","useContextSelector","listContextDefaultValue","navigable","selection","undefined","as","listContext","ListContextProvider","Provider","useListContext_unstable","selector","ctx"],"mappings":"AAAA;AAEA,SAASA,aAAa,EAAEC,kBAAkB,QAAQ,mCAAmC;AAIrF,OAAO,MAAMC,0BAA4C;IACvDC,WAAW;IACXC,WAAWC;IACXC,IAAID;AACN,EAAE;AAEF,MAAME,cAAcP,cAA4CK;AAEhE,OAAO,MAAMG,sBAAsBD,YAAYE,QAAQ,CAAC;AAExD,OAAO,MAAMC,0BAA0B,CAAIC,WACzCV,mBAAmBM,aAAa,CAACK,MAAMV,uBAAuB,GAAKS,SAASC,MAAM"}

package/lib/components/List/List/useList.js CHANGED Viewed

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { getIntrinsicElementProps, slot, useControllableState, useEventCallback } from '@fluentui/react-utilities';
 import { useArrowNavigationGroup } from '@fluentui/react-tabster';

package/lib/components/List/List/useList.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/List/List/useList.ts"],"sourcesContent":["~~import~~ * as React from 'react';\nimport {\n getIntrinsicElementProps,\n OnSelectionChangeData,\n slot,\n useControllableState,\n useEventCallback,\n} from '@fluentui/react-utilities';\nimport { useArrowNavigationGroup } from '@fluentui/react-tabster';\nimport { ListProps, ListState } from './List.types';\nimport { useListSelection } from '../hooks/useListSelection';\n\nconst DEFAULT_ROOT_EL_TYPE = 'ul';\n\n/*\n Create the state required to render List.\n \n The returned state can be modified with hooks such as useListStyles_unstable,\n * before being passed to renderList_unstable.\n \n @param props - props from this instance of List\n * @param ref - reference to root HTMLElement of List\n */\nexport const useList_unstable = (props: ListProps, ref: React.Ref<HTMLDivElement \| HTMLUListElement>): ListState => {\n const {\n layout = 'vertical',\n navigable = false,\n selectable = false,\n selectionMode = 'single',\n selectedItems,\n defaultSelectedItems,\n as,\n onSelectionChange,\n truncateContent = false,\n truncateHeader = false,\n } = props;\n\n const arrowNavigationAttributes = useArrowNavigationGroup({\n axis: layout === 'grid' ? 'grid-linear' : 'both',\n memorizeCurrent: true,\n });\n\n const [selectionState, setSelectionState] = useControllableState({\n state: selectedItems,\n defaultState: defaultSelectedItems,\n initialState: [],\n });\n\n const onChange = useEventCallback((e: React.SyntheticEvent, data: OnSelectionChangeData) => {\n const selectedItemsAsArray = Array.from(data.selectedItems);\n setSelectionState(selectedItemsAsArray);\n onSelectionChange?.(e, { selectedItems: selectedItemsAsArray });\n });\n\n const selection = useListSelection({\n onSelectionChange: onChange,\n selectionMode,\n selectedItems: selectionState,\n defaultSelectedItems,\n });\n\n return {\n components: {\n root: DEFAULT_ROOT_EL_TYPE,\n },\n root: slot.always(\n getIntrinsicElementProps(DEFAULT_ROOT_EL_TYPE, {\n ref,\n ...(navigable && { role: 'menu' }),\n ...(selectable && {\n role: 'listbox',\n 'aria-multiselectable': selectionMode === 'multiselect' ? true : undefined,\n }),\n ...arrowNavigationAttributes,\n ...props,\n }),\n { elementType: DEFAULT_ROOT_EL_TYPE },\n ),\n layout,\n // context:\n navigable,\n as: as \|\| DEFAULT_ROOT_EL_TYPE,\n truncateContent,\n truncateHeader,\n // only pass down selection state if its handled internally, otherwise just report the events\n selection: selectable ? selection : undefined,\n };\n};\n"],"names":["React","getIntrinsicElementProps","slot","useControllableState","useEventCallback","useArrowNavigationGroup","useListSelection","DEFAULT_ROOT_EL_TYPE","useList_unstable","props","ref","layout","navigable","selectable","selectionMode","selectedItems","defaultSelectedItems","as","onSelectionChange","truncateContent","truncateHeader","arrowNavigationAttributes","axis","memorizeCurrent","selectionState","setSelectionState","state","defaultState","initialState","onChange","e","data","selectedItemsAsArray","Array","from","selection","components","root","always","role","undefined","elementType"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SACEC,wBAAwB,EAExBC,IAAI,EACJC,oBAAoB,EACpBC,gBAAgB,QACX,4BAA4B;AACnC,SAASC,uBAAuB,QAAQ,0BAA0B;AAElE,SAASC,gBAAgB,QAAQ,4BAA4B;AAE7D,MAAMC,uBAAuB;AAE7B;;;;;;;;CAQC,GACD,OAAO,MAAMC,mBAAmB,CAACC,OAAkBC;IACjD,MAAM,EACJC,SAAS,UAAU,EACnBC,YAAY,KAAK,EACjBC,aAAa,KAAK,EAClBC,gBAAgB,QAAQ,EACxBC,aAAa,EACbC,oBAAoB,EACpBC,EAAE,EACFC,iBAAiB,EACjBC,kBAAkB,KAAK,EACvBC,iBAAiB,KAAK,EACvB,GAAGX;IAEJ,MAAMY,4BAA4BhB,wBAAwB;QACxDiB,MAAMX,WAAW,SAAS,gBAAgB;QAC1CY,iBAAiB;IACnB;IAEA,MAAM,CAACC,gBAAgBC,kBAAkB,GAAGtB,qBAAqB;QAC/DuB,OAAOX;QACPY,cAAcX;QACdY,cAAc,EAAE;IAClB;IAEA,MAAMC,WAAWzB,iBAAiB,CAAC0B,GAAyBC;QAC1D,MAAMC,uBAAuBC,MAAMC,IAAI,CAACH,KAAKhB,aAAa;QAC1DU,kBAAkBO;QAClBd,8BAAAA,wCAAAA,kBAAoBY,GAAG;YAAEf,eAAeiB;QAAqB;IAC/D;IAEA,MAAMG,YAAY7B,iBAAiB;QACjCY,mBAAmBW;QACnBf;QACAC,eAAeS;QACfR;IACF;IAEA,OAAO;QACLoB,YAAY;YACVC,MAAM9B;QACR;QACA8B,MAAMnC,KAAKoC,MAAM,CACfrC,yBAAyBM,sBAAsB;YAC7CG;YACA,GAAIE,aAAa;gBAAE2B,MAAM;YAAO,CAAC;YACjC,GAAI1B,cAAc;gBAChB0B,MAAM;gBACN,wBAAwBzB,kBAAkB,gBAAgB,OAAO0B;YACnE,CAAC;YACD,GAAGnB,yBAAyB;YAC5B,GAAGZ,KAAK;QACV,IACA;YAAEgC,aAAalC;QAAqB;QAEtCI;QACA,WAAW;QACXC;QACAK,IAAIA,MAAMV;QACVY;QACAC;QACA,6FAA6F;QAC7Fe,WAAWtB,aAAasB,YAAYK;IACtC;AACF,EAAE"}
1	+ {"version":3,"sources":["../src/components/List/List/useList.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport {\n getIntrinsicElementProps,\n OnSelectionChangeData,\n slot,\n useControllableState,\n useEventCallback,\n} from '@fluentui/react-utilities';\nimport { useArrowNavigationGroup } from '@fluentui/react-tabster';\nimport { ListProps, ListState } from './List.types';\nimport { useListSelection } from '../hooks/useListSelection';\n\nconst DEFAULT_ROOT_EL_TYPE = 'ul';\n\n/*\n Create the state required to render List.\n \n The returned state can be modified with hooks such as useListStyles_unstable,\n * before being passed to renderList_unstable.\n \n @param props - props from this instance of List\n * @param ref - reference to root HTMLElement of List\n */\nexport const useList_unstable = (props: ListProps, ref: React.Ref<HTMLDivElement \| HTMLUListElement>): ListState => {\n const {\n layout = 'vertical',\n navigable = false,\n selectable = false,\n selectionMode = 'single',\n selectedItems,\n defaultSelectedItems,\n as,\n onSelectionChange,\n truncateContent = false,\n truncateHeader = false,\n } = props;\n\n const arrowNavigationAttributes = useArrowNavigationGroup({\n axis: layout === 'grid' ? 'grid-linear' : 'both',\n memorizeCurrent: true,\n });\n\n const [selectionState, setSelectionState] = useControllableState({\n state: selectedItems,\n defaultState: defaultSelectedItems,\n initialState: [],\n });\n\n const onChange = useEventCallback((e: React.SyntheticEvent, data: OnSelectionChangeData) => {\n const selectedItemsAsArray = Array.from(data.selectedItems);\n setSelectionState(selectedItemsAsArray);\n onSelectionChange?.(e, { selectedItems: selectedItemsAsArray });\n });\n\n const selection = useListSelection({\n onSelectionChange: onChange,\n selectionMode,\n selectedItems: selectionState,\n defaultSelectedItems,\n });\n\n return {\n components: {\n root: DEFAULT_ROOT_EL_TYPE,\n },\n root: slot.always(\n getIntrinsicElementProps(DEFAULT_ROOT_EL_TYPE, {\n ref,\n ...(navigable && { role: 'menu' }),\n ...(selectable && {\n role: 'listbox',\n 'aria-multiselectable': selectionMode === 'multiselect' ? true : undefined,\n }),\n ...arrowNavigationAttributes,\n ...props,\n }),\n { elementType: DEFAULT_ROOT_EL_TYPE },\n ),\n layout,\n // context:\n navigable,\n as: as \|\| DEFAULT_ROOT_EL_TYPE,\n truncateContent,\n truncateHeader,\n // only pass down selection state if its handled internally, otherwise just report the events\n selection: selectable ? selection : undefined,\n };\n};\n"],"names":["React","getIntrinsicElementProps","slot","useControllableState","useEventCallback","useArrowNavigationGroup","useListSelection","DEFAULT_ROOT_EL_TYPE","useList_unstable","props","ref","layout","navigable","selectable","selectionMode","selectedItems","defaultSelectedItems","as","onSelectionChange","truncateContent","truncateHeader","arrowNavigationAttributes","axis","memorizeCurrent","selectionState","setSelectionState","state","defaultState","initialState","onChange","e","data","selectedItemsAsArray","Array","from","selection","components","root","always","role","undefined","elementType"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SACEC,wBAAwB,EAExBC,IAAI,EACJC,oBAAoB,EACpBC,gBAAgB,QACX,4BAA4B;AACnC,SAASC,uBAAuB,QAAQ,0BAA0B;AAElE,SAASC,gBAAgB,QAAQ,4BAA4B;AAE7D,MAAMC,uBAAuB;AAE7B;;;;;;;;CAQC,GACD,OAAO,MAAMC,mBAAmB,CAACC,OAAkBC;IACjD,MAAM,EACJC,SAAS,UAAU,EACnBC,YAAY,KAAK,EACjBC,aAAa,KAAK,EAClBC,gBAAgB,QAAQ,EACxBC,aAAa,EACbC,oBAAoB,EACpBC,EAAE,EACFC,iBAAiB,EACjBC,kBAAkB,KAAK,EACvBC,iBAAiB,KAAK,EACvB,GAAGX;IAEJ,MAAMY,4BAA4BhB,wBAAwB;QACxDiB,MAAMX,WAAW,SAAS,gBAAgB;QAC1CY,iBAAiB;IACnB;IAEA,MAAM,CAACC,gBAAgBC,kBAAkB,GAAGtB,qBAAqB;QAC/DuB,OAAOX;QACPY,cAAcX;QACdY,cAAc,EAAE;IAClB;IAEA,MAAMC,WAAWzB,iBAAiB,CAAC0B,GAAyBC;QAC1D,MAAMC,uBAAuBC,MAAMC,IAAI,CAACH,KAAKhB,aAAa;QAC1DU,kBAAkBO;QAClBd,8BAAAA,wCAAAA,kBAAoBY,GAAG;YAAEf,eAAeiB;QAAqB;IAC/D;IAEA,MAAMG,YAAY7B,iBAAiB;QACjCY,mBAAmBW;QACnBf;QACAC,eAAeS;QACfR;IACF;IAEA,OAAO;QACLoB,YAAY;YACVC,MAAM9B;QACR;QACA8B,MAAMnC,KAAKoC,MAAM,CACfrC,yBAAyBM,sBAAsB;YAC7CG;YACA,GAAIE,aAAa;gBAAE2B,MAAM;YAAO,CAAC;YACjC,GAAI1B,cAAc;gBAChB0B,MAAM;gBACN,wBAAwBzB,kBAAkB,gBAAgB,OAAO0B;YACnE,CAAC;YACD,GAAGnB,yBAAyB;YAC5B,GAAGZ,KAAK;QACV,IACA;YAAEgC,aAAalC;QAAqB;QAEtCI;QACA,WAAW;QACXC;QACAK,IAAIA,MAAMV;QACVY;QACAC;QACA,6FAA6F;QAC7Fe,WAAWtB,aAAasB,YAAYK;IACtC;AACF,EAAE"}

package/lib/components/List/List/useListStyles.styles.js CHANGED Viewed

@@ -1,3 +1,5 @@
+'use client';
 import { __styles, __resetStyles, mergeClasses } from '@griffel/react';
 export const listClassNames = {
   root: 'fui-List'

package/lib/components/List/List/useListStyles.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["__styles","__resetStyles","mergeClasses","listClassNames","root","useRootBaseStyles","useStyles","rootHorizontal","mc9l5x","rootGrid","d","useListStyles_unstable","state","rootStyles","styles","layoutToStyles","undefined","className","layout"],"sources":["useListStyles.styles.js"],"sourcesContent":["~~import~~ { makeStyles, makeResetStyles, mergeClasses } from '@griffel/react';\nexport const listClassNames = {\n root: 'fui-List'\n};\nconst useRootBaseStyles = makeResetStyles({\n padding: 0,\n margin: 0,\n textIndent: 0,\n listStyleType: 'none'\n});\n/*\n Styles for the root slot\n / const useStyles = makeStyles({\n rootHorizontal: {\n display: 'flex'\n },\n rootGrid: {\n display: 'grid'\n }\n});\n/\n Apply styling to the List slots based on the state\n */ export const useListStyles_unstable = (state)=>{\n 'use no memo';\n const rootStyles = useRootBaseStyles();\n const styles = useStyles();\n const layoutToStyles = {\n ['horizontal']: styles.rootHorizontal,\n ['grid']: styles.rootGrid,\n ['vertical']: undefined\n };\n state.root.className = mergeClasses(listClassNames.root, rootStyles, layoutToStyles[state.layout], state.root.className);\n return state;\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAAC,aAAA,EAAsCC,YAAY,QAAQ,gBAAgB;AAC1E,OAAO,MAAMC,cAAc,GAAG;EAC1BC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,iBAAiB,gBAAGJ,aAAA,wFAKzB,CAAC;AACF;AACA;AACA;AAAI,MAAMK,SAAS,gBAAGN,QAAA;EAAAO,cAAA;IAAAC,MAAA;EAAA;EAAAC,QAAA;IAAAD,MAAA;EAAA;AAAA;EAAAE,CAAA;AAAA,CAOrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,sBAAsB,GAAIC,KAAK,IAAG;EAC/C,aAAa;;EACb,MAAMC,UAAU,GAAGR,iBAAiB,CAAC,CAAC;EACtC,MAAMS,MAAM,GAAGR,SAAS,CAAC,CAAC;EAC1B,MAAMS,cAAc,GAAG;IACnB,CAAC,YAAY,GAAGD,MAAM,CAACP,cAAc;IACrC,CAAC,MAAM,GAAGO,MAAM,CAACL,QAAQ;IACzB,CAAC,UAAU,GAAGO;EAClB,CAAC;EACDJ,KAAK,CAACR,IAAI,CAACa,SAAS,GAAGf,YAAY,CAACC,cAAc,CAACC,IAAI,EAAES,UAAU,EAAEE,cAAc,CAACH,KAAK,CAACM,MAAM,CAAC,EAAEN,KAAK,CAACR,IAAI,CAACa,SAAS,CAAC;EACxH,OAAOL,KAAK;AAChB,CAAC","ignoreList":[]}
1	+ {"version":3,"names":["__styles","__resetStyles","mergeClasses","listClassNames","root","useRootBaseStyles","useStyles","rootHorizontal","mc9l5x","rootGrid","d","useListStyles_unstable","state","rootStyles","styles","layoutToStyles","undefined","className","layout"],"sources":["useListStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, makeResetStyles, mergeClasses } from '@griffel/react';\nexport const listClassNames = {\n root: 'fui-List'\n};\nconst useRootBaseStyles = makeResetStyles({\n padding: 0,\n margin: 0,\n textIndent: 0,\n listStyleType: 'none'\n});\n/*\n Styles for the root slot\n / const useStyles = makeStyles({\n rootHorizontal: {\n display: 'flex'\n },\n rootGrid: {\n display: 'grid'\n }\n});\n/\n Apply styling to the List slots based on the state\n */ export const useListStyles_unstable = (state)=>{\n 'use no memo';\n const rootStyles = useRootBaseStyles();\n const styles = useStyles();\n const layoutToStyles = {\n ['horizontal']: styles.rootHorizontal,\n ['grid']: styles.rootGrid,\n ['vertical']: undefined\n };\n state.root.className = mergeClasses(listClassNames.root, rootStyles, layoutToStyles[state.layout], state.root.className);\n return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,QAAA,EAAAC,aAAA,EAAsCC,YAAY,QAAQ,gBAAgB;AAC1E,OAAO,MAAMC,cAAc,GAAG;EAC1BC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,iBAAiB,gBAAGJ,aAAA,wFAKzB,CAAC;AACF;AACA;AACA;AAAI,MAAMK,SAAS,gBAAGN,QAAA;EAAAO,cAAA;IAAAC,MAAA;EAAA;EAAAC,QAAA;IAAAD,MAAA;EAAA;AAAA;EAAAE,CAAA;AAAA,CAOrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,sBAAsB,GAAIC,KAAK,IAAG;EAC/C,aAAa;;EACb,MAAMC,UAAU,GAAGR,iBAAiB,CAAC,CAAC;EACtC,MAAMS,MAAM,GAAGR,SAAS,CAAC,CAAC;EAC1B,MAAMS,cAAc,GAAG;IACnB,CAAC,YAAY,GAAGD,MAAM,CAACP,cAAc;IACrC,CAAC,MAAM,GAAGO,MAAM,CAACL,QAAQ;IACzB,CAAC,UAAU,GAAGO;EAClB,CAAC;EACDJ,KAAK,CAACR,IAAI,CAACa,SAAS,GAAGf,YAAY,CAACC,cAAc,CAACC,IAAI,EAAES,UAAU,EAAEE,cAAc,CAACH,KAAK,CAACM,MAAM,CAAC,EAAEN,KAAK,CAACR,IAAI,CAACa,SAAS,CAAC;EACxH,OAAOL,KAAK;AAChB,CAAC","ignoreList":[]}

package/lib/components/List/List/useListStyles.styles.raw.js CHANGED Viewed

@@ -1,3 +1,4 @@
+'use client';
 import { makeStyles, makeResetStyles, mergeClasses } from '@griffel/react';
 export const listClassNames = {
     root: 'fui-List'

package/lib/components/List/List/useListStyles.styles.raw.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/List/List/useListStyles.styles.ts"],"sourcesContent":["~~import~~ type { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, makeResetStyles, mergeClasses } from '@griffel/react';\nimport type { ListSlots, ListState } from './List.types';\n\nexport const listClassNames: SlotClassNames<ListSlots> = {\n root: 'fui-List',\n};\n\nconst useRootBaseStyles = makeResetStyles({\n padding: 0,\n margin: 0,\n textIndent: 0,\n listStyleType: 'none',\n});\n\n/*\n Styles for the root slot\n /\nconst useStyles = makeStyles({\n rootHorizontal: {\n display: 'flex',\n },\n\n rootGrid: {\n display: 'grid',\n },\n});\n\n/\n Apply styling to the List slots based on the state\n */\nexport const useListStyles_unstable = (state: ListState): ListState => {\n 'use no memo';\n\n const rootStyles = useRootBaseStyles();\n const styles = useStyles();\n\n const layoutToStyles = {\n ['horizontal']: styles.rootHorizontal,\n ['grid']: styles.rootGrid,\n ['vertical']: undefined, // no extra styles needed, keep it in for completeness and type safety\n };\n\n state.root.className = mergeClasses(\n listClassNames.root,\n rootStyles,\n layoutToStyles[state.layout],\n state.root.className,\n );\n\n return state;\n};\n"],"names":["makeStyles","makeResetStyles","mergeClasses","listClassNames","root","useRootBaseStyles","padding","margin","textIndent","listStyleType","useStyles","rootHorizontal","display","rootGrid","useListStyles_unstable","state","rootStyles","styles","layoutToStyles","undefined","className","layout"],"mappings":"~~AACA~~,SAASA,UAAU,EAAEC,eAAe,EAAEC,YAAY,QAAQ,iBAAiB;AAG3E,OAAO,MAAMC,iBAA4C;IACvDC,MAAM;AACR,EAAE;AAEF,MAAMC,oBAAoBJ,gBAAgB;IACxCK,SAAS;IACTC,QAAQ;IACRC,YAAY;IACZC,eAAe;AACjB;AAEA;;CAEC,GACD,MAAMC,YAAYV,WAAW;IAC3BW,gBAAgB;QACdC,SAAS;IACX;IAEAC,UAAU;QACRD,SAAS;IACX;AACF;AAEA;;CAEC,GACD,OAAO,MAAME,yBAAyB,CAACC;IACrC;IAEA,MAAMC,aAAaX;IACnB,MAAMY,SAASP;IAEf,MAAMQ,iBAAiB;QACrB,CAAC,aAAa,EAAED,OAAON,cAAc;QACrC,CAAC,OAAO,EAAEM,OAAOJ,QAAQ;QACzB,CAAC,WAAW,EAAEM;IAChB;IAEAJ,MAAMX,IAAI,CAACgB,SAAS,GAAGlB,aACrBC,eAAeC,IAAI,EACnBY,YACAE,cAAc,CAACH,MAAMM,MAAM,CAAC,EAC5BN,MAAMX,IAAI,CAACgB,SAAS;IAGtB,OAAOL;AACT,EAAE"}
1	+ {"version":3,"sources":["../src/components/List/List/useListStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, makeResetStyles, mergeClasses } from '@griffel/react';\nimport type { ListSlots, ListState } from './List.types';\n\nexport const listClassNames: SlotClassNames<ListSlots> = {\n root: 'fui-List',\n};\n\nconst useRootBaseStyles = makeResetStyles({\n padding: 0,\n margin: 0,\n textIndent: 0,\n listStyleType: 'none',\n});\n\n/*\n Styles for the root slot\n /\nconst useStyles = makeStyles({\n rootHorizontal: {\n display: 'flex',\n },\n\n rootGrid: {\n display: 'grid',\n },\n});\n\n/\n Apply styling to the List slots based on the state\n */\nexport const useListStyles_unstable = (state: ListState): ListState => {\n 'use no memo';\n\n const rootStyles = useRootBaseStyles();\n const styles = useStyles();\n\n const layoutToStyles = {\n ['horizontal']: styles.rootHorizontal,\n ['grid']: styles.rootGrid,\n ['vertical']: undefined, // no extra styles needed, keep it in for completeness and type safety\n };\n\n state.root.className = mergeClasses(\n listClassNames.root,\n rootStyles,\n layoutToStyles[state.layout],\n state.root.className,\n );\n\n return state;\n};\n"],"names":["makeStyles","makeResetStyles","mergeClasses","listClassNames","root","useRootBaseStyles","padding","margin","textIndent","listStyleType","useStyles","rootHorizontal","display","rootGrid","useListStyles_unstable","state","rootStyles","styles","layoutToStyles","undefined","className","layout"],"mappings":"AAAA;AAGA,SAASA,UAAU,EAAEC,eAAe,EAAEC,YAAY,QAAQ,iBAAiB;AAG3E,OAAO,MAAMC,iBAA4C;IACvDC,MAAM;AACR,EAAE;AAEF,MAAMC,oBAAoBJ,gBAAgB;IACxCK,SAAS;IACTC,QAAQ;IACRC,YAAY;IACZC,eAAe;AACjB;AAEA;;CAEC,GACD,MAAMC,YAAYV,WAAW;IAC3BW,gBAAgB;QACdC,SAAS;IACX;IAEAC,UAAU;QACRD,SAAS;IACX;AACF;AAEA;;CAEC,GACD,OAAO,MAAME,yBAAyB,CAACC;IACrC;IAEA,MAAMC,aAAaX;IACnB,MAAMY,SAASP;IAEf,MAAMQ,iBAAiB;QACrB,CAAC,aAAa,EAAED,OAAON,cAAc;QACrC,CAAC,OAAO,EAAEM,OAAOJ,QAAQ;QACzB,CAAC,WAAW,EAAEM;IAChB;IAEAJ,MAAMX,IAAI,CAACgB,SAAS,GAAGlB,aACrBC,eAAeC,IAAI,EACnBY,YACAE,cAAc,CAACH,MAAMM,MAAM,CAAC,EAC5BN,MAAMX,IAAI,CAACgB,SAAS;IAGtB,OAAOL;AACT,EAAE"}

package/lib/components/List/ListItem/ListItem.js CHANGED Viewed

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
 import { useListItem_unstable } from './useListItem';

package/lib/components/List/ListItem/ListItem.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/List/ListItem/ListItem.tsx"],"sourcesContent":["~~import~~ * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\nimport { useListItem_unstable } from './useListItem';\nimport { renderListItem_unstable } from './renderListItem';\nimport { useListItemStyles_unstable } from './useListItemStyles.styles';\nimport type { ListItemProps } from './ListItem.types';\n\nexport const ListItem: ForwardRefComponent<ListItemProps> = React.forwardRef<HTMLLIElement \| HTMLDivElement>(\n (props, ref) => {\n const state = useListItem_unstable(props, ref);\n\n useListItemStyles_unstable(state);\n useCustomStyleHook_unstable('useListItemStyles_unstable')(state);\n return renderListItem_unstable(state);\n },\n);\n\nListItem.displayName = 'ListItem';\n"],"names":["React","useCustomStyleHook_unstable","useListItem_unstable","renderListItem_unstable","useListItemStyles_unstable","ListItem","forwardRef","props","ref","state","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,2BAA2B,QAAQ,kCAAkC;AAC9E,SAASC,oBAAoB,QAAQ,gBAAgB;AACrD,SAASC,uBAAuB,QAAQ,mBAAmB;AAC3D,SAASC,0BAA0B,QAAQ,6BAA6B;AAGxE,OAAO,MAAMC,yBAA+CL,MAAMM,UAAU,CAC1E,CAACC,OAAOC;IACN,MAAMC,QAAQP,qBAAqBK,OAAOC;IAE1CJ,2BAA2BK;IAC3BR,4BAA4B,8BAA8BQ;IAC1D,OAAON,wBAAwBM;AACjC,GACA;AAEFJ,SAASK,WAAW,GAAG"}
1	+ {"version":3,"sources":["../src/components/List/ListItem/ListItem.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\nimport { useListItem_unstable } from './useListItem';\nimport { renderListItem_unstable } from './renderListItem';\nimport { useListItemStyles_unstable } from './useListItemStyles.styles';\nimport type { ListItemProps } from './ListItem.types';\n\nexport const ListItem: ForwardRefComponent<ListItemProps> = React.forwardRef<HTMLLIElement \| HTMLDivElement>(\n (props, ref) => {\n const state = useListItem_unstable(props, ref);\n\n useListItemStyles_unstable(state);\n useCustomStyleHook_unstable('useListItemStyles_unstable')(state);\n return renderListItem_unstable(state);\n },\n);\n\nListItem.displayName = 'ListItem';\n"],"names":["React","useCustomStyleHook_unstable","useListItem_unstable","renderListItem_unstable","useListItemStyles_unstable","ListItem","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,2BAA2B,QAAQ,kCAAkC;AAC9E,SAASC,oBAAoB,QAAQ,gBAAgB;AACrD,SAASC,uBAAuB,QAAQ,mBAAmB;AAC3D,SAASC,0BAA0B,QAAQ,6BAA6B;AAGxE,OAAO,MAAMC,yBAA+CL,MAAMM,UAAU,CAC1E,CAACC,OAAOC;IACN,MAAMC,QAAQP,qBAAqBK,OAAOC;IAE1CJ,2BAA2BK;IAC3BR,4BAA4B,8BAA8BQ;IAC1D,OAAON,wBAAwBM;AACjC,GACA;AAEFJ,SAASK,WAAW,GAAG"}

package/lib/components/List/ListItem/useListItem.js CHANGED Viewed

@@ -1,3 +1,4 @@
+'use client';
 import { useARIAButtonProps } from '@fluentui/react-aria';
 import { getIntrinsicElementProps, slot, useEventCallback, useId } from '@fluentui/react-utilities';
 import * as React from 'react';

package/lib/components/List/ListItem/useListItem.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/List/ListItem/useListItem.tsx"],"sourcesContent":["~~import~~ { useARIAButtonProps } from '@fluentui/react-aria';\nimport { getIntrinsicElementProps, slot, useEventCallback, useId } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport { useListContext_unstable } from '../List/listContext';\nimport type { ListItemProps, ListItemState } from './ListItem.types';\n\nconst DEFAULT_ROOT_EL_TYPE = 'li';\n\nfunction validateProperElementTypes(parentRenderedAs?: 'div' \| 'ul' \| 'ol', renderedAs?: 'div' \| 'li') {\n if (process.env.NODE_ENV === 'production') {\n return;\n }\n\n if (renderedAs === 'div' && parentRenderedAs !== 'div') {\n throw new Error('ListItem cannot be rendered as a div when its parent is not a div.');\n }\n if (renderedAs === 'li' && parentRenderedAs === 'div') {\n throw new Error('ListItem cannot be rendered as a li when its parent is a div.');\n }\n}\n\nfunction validateNavigableWhenOnClickPresent(navigable: boolean, onClick?: React.MouseEventHandler) {\n if (process.env.NODE_ENV === 'production') {\n return;\n }\n\n if (onClick && !navigable) {\n throw new Error('ListItem must be navigable when onClick is present. Set navigable={true} on the List.');\n }\n}\n\n/*\n Create the state required to render ListItem.\n \n The returned state can be modified with hooks such as useListItemStyles_unstable,\n * before being passed to renderListItem_unstable.\n \n @param props - props from this instance of ListItem\n * @param ref - reference to root HTMLLIElement \| HTMLDivElementof ListItem\n */\nexport const useListItem_unstable = (\n props: ListItemProps,\n ref: React.Ref<HTMLLIElement \| HTMLDivElement>,\n): ListItemState => {\n const id = useId('listItem');\n const { value = id, truncateHeader, truncateContent, onClick, onKeyDown, onKeyUp } = props;\n\n const navigable = useListContext_unstable(ctx => ctx.navigable);\n const toggleItem = useListContext_unstable(ctx => ctx.selection?.toggleItem);\n const isSelectionEnabled = useListContext_unstable(ctx => !!ctx.selection);\n const isSelected = useListContext_unstable(ctx => ctx.selection?.isSelected(value));\n\n const truncateHeaderOnList = useListContext_unstable(ctx => ctx.truncateHeader);\n const truncateContentOnList = useListContext_unstable(ctx => ctx.truncateContent);\n\n const parentRenderedAs = useListContext_unstable(ctx => ctx.as);\n const renderedAs = props.as \|\| DEFAULT_ROOT_EL_TYPE;\n\n validateProperElementTypes(parentRenderedAs, renderedAs);\n\n validateNavigableWhenOnClickPresent(navigable, onClick);\n\n const handleClick: React.MouseEventHandler<HTMLLIElement & HTMLDivElement> = useEventCallback(e => {\n onClick?.(e);\n\n if (!isSelectionEnabled \|\| e.defaultPrevented) {\n return;\n }\n\n toggleItem?.(e, value);\n });\n\n // avoid passing empty onClick to prevent items unnecessary being narrated as clickable\n // see https://github.com/microsoft/fluentui/issues/20658\n const passClickHandler = !!onClick \|\| isSelectionEnabled;\n\n const clickHandlerProps = {\n onClick: passClickHandler ? handleClick : undefined,\n onKeyDown: onKeyDown as React.KeyboardEventHandler<HTMLLIElement & HTMLDivElement>,\n onKeyUp: onKeyUp as React.KeyboardEventHandler<HTMLLIElement & HTMLDivElement>,\n };\n\n // This will give us the onKeyDown and onKeyUp props for Enter and Space\n const ariaButtonProps = useARIAButtonProps('div', clickHandlerProps);\n\n // v0 ListItem adds keyboard handling only for navigable or selectable items\n const buttonProps = navigable \|\| isSelectionEnabled ? ariaButtonProps : clickHandlerProps;\n\n const root = slot.always(\n getIntrinsicElementProps(DEFAULT_ROOT_EL_TYPE, {\n ref: ref as React.Ref<HTMLLIElement & HTMLDivElement>,\n tabIndex: navigable \|\| isSelectionEnabled ? 0 : undefined,\n role: navigable ? 'menuitem' : 'listitem',\n id: String(value),\n ...(isSelectionEnabled && {\n role: 'option',\n 'aria-selected': isSelected,\n }),\n ...props,\n onKeyDown: buttonProps.onKeyDown as React.KeyboardEventHandler<HTMLLIElement & HTMLDivElement>,\n onKeyUp: buttonProps.onKeyUp as React.KeyboardEventHandler<HTMLLIElement & HTMLDivElement>,\n onClick: buttonProps.onClick as React.MouseEventHandler<HTMLLIElement & HTMLDivElement>,\n }),\n { elementType: DEFAULT_ROOT_EL_TYPE },\n );\n\n const state: ListItemState = {\n components: {\n root: DEFAULT_ROOT_EL_TYPE,\n media: 'div',\n header: 'div',\n contentWrapper: 'div',\n headerMedia: 'div',\n contentMedia: 'div',\n endMedia: 'div',\n },\n root,\n navigable,\n selectable: isSelectionEnabled,\n selected: isSelected,\n media: slot.optional(props.media, { elementType: 'div' }),\n header: slot.optional(props.header, { elementType: 'div' }),\n contentWrapper: slot.optional(props.contentWrapper, { elementType: 'div', renderByDefault: true }),\n headerMedia: slot.optional(props.headerMedia, { elementType: 'div' }),\n contentMedia: slot.optional(props.contentMedia, { elementType: 'div' }),\n endMedia: slot.optional(props.endMedia, { elementType: 'div' }),\n truncateHeader: truncateHeader ?? truncateHeaderOnList,\n truncateContent: truncateContent ?? truncateContentOnList,\n };\n\n return state;\n};\n"],"names":["useARIAButtonProps","getIntrinsicElementProps","slot","useEventCallback","useId","React","useListContext_unstable","DEFAULT_ROOT_EL_TYPE","validateProperElementTypes","parentRenderedAs","renderedAs","process","env","NODE_ENV","Error","validateNavigableWhenOnClickPresent","navigable","onClick","useListItem_unstable","props","ref","id","value","truncateHeader","truncateContent","onKeyDown","onKeyUp","ctx","toggleItem","selection","isSelectionEnabled","isSelected","truncateHeaderOnList","truncateContentOnList","as","handleClick","e","defaultPrevented","passClickHandler","clickHandlerProps","undefined","ariaButtonProps","buttonProps","root","always","tabIndex","role","String","elementType","state","components","media","header","contentWrapper","headerMedia","contentMedia","endMedia","selectable","selected","optional","renderByDefault"],"mappings":"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"}
1	+ {"version":3,"sources":["../src/components/List/ListItem/useListItem.tsx"],"sourcesContent":["'use client';\n\nimport { useARIAButtonProps } from '@fluentui/react-aria';\nimport { getIntrinsicElementProps, slot, useEventCallback, useId } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport { useListContext_unstable } from '../List/listContext';\nimport type { ListItemProps, ListItemState } from './ListItem.types';\n\nconst DEFAULT_ROOT_EL_TYPE = 'li';\n\nfunction validateProperElementTypes(parentRenderedAs?: 'div' \| 'ul' \| 'ol', renderedAs?: 'div' \| 'li') {\n if (process.env.NODE_ENV === 'production') {\n return;\n }\n\n if (renderedAs === 'div' && parentRenderedAs !== 'div') {\n throw new Error('ListItem cannot be rendered as a div when its parent is not a div.');\n }\n if (renderedAs === 'li' && parentRenderedAs === 'div') {\n throw new Error('ListItem cannot be rendered as a li when its parent is a div.');\n }\n}\n\nfunction validateNavigableWhenOnClickPresent(navigable: boolean, onClick?: React.MouseEventHandler) {\n if (process.env.NODE_ENV === 'production') {\n return;\n }\n\n if (onClick && !navigable) {\n throw new Error('ListItem must be navigable when onClick is present. Set navigable={true} on the List.');\n }\n}\n\n/*\n Create the state required to render ListItem.\n \n The returned state can be modified with hooks such as useListItemStyles_unstable,\n * before being passed to renderListItem_unstable.\n \n @param props - props from this instance of ListItem\n * @param ref - reference to root HTMLLIElement \| HTMLDivElementof ListItem\n */\nexport const useListItem_unstable = (\n props: ListItemProps,\n ref: React.Ref<HTMLLIElement \| HTMLDivElement>,\n): ListItemState => {\n const id = useId('listItem');\n const { value = id, truncateHeader, truncateContent, onClick, onKeyDown, onKeyUp } = props;\n\n const navigable = useListContext_unstable(ctx => ctx.navigable);\n const toggleItem = useListContext_unstable(ctx => ctx.selection?.toggleItem);\n const isSelectionEnabled = useListContext_unstable(ctx => !!ctx.selection);\n const isSelected = useListContext_unstable(ctx => ctx.selection?.isSelected(value));\n\n const truncateHeaderOnList = useListContext_unstable(ctx => ctx.truncateHeader);\n const truncateContentOnList = useListContext_unstable(ctx => ctx.truncateContent);\n\n const parentRenderedAs = useListContext_unstable(ctx => ctx.as);\n const renderedAs = props.as \|\| DEFAULT_ROOT_EL_TYPE;\n\n validateProperElementTypes(parentRenderedAs, renderedAs);\n\n validateNavigableWhenOnClickPresent(navigable, onClick);\n\n const handleClick: React.MouseEventHandler<HTMLLIElement & HTMLDivElement> = useEventCallback(e => {\n onClick?.(e);\n\n if (!isSelectionEnabled \|\| e.defaultPrevented) {\n return;\n }\n\n toggleItem?.(e, value);\n });\n\n // avoid passing empty onClick to prevent items unnecessary being narrated as clickable\n // see https://github.com/microsoft/fluentui/issues/20658\n const passClickHandler = !!onClick \|\| isSelectionEnabled;\n\n const clickHandlerProps = {\n onClick: passClickHandler ? handleClick : undefined,\n onKeyDown: onKeyDown as React.KeyboardEventHandler<HTMLLIElement & HTMLDivElement>,\n onKeyUp: onKeyUp as React.KeyboardEventHandler<HTMLLIElement & HTMLDivElement>,\n };\n\n // This will give us the onKeyDown and onKeyUp props for Enter and Space\n const ariaButtonProps = useARIAButtonProps('div', clickHandlerProps);\n\n // v0 ListItem adds keyboard handling only for navigable or selectable items\n const buttonProps = navigable \|\| isSelectionEnabled ? ariaButtonProps : clickHandlerProps;\n\n const root = slot.always(\n getIntrinsicElementProps(DEFAULT_ROOT_EL_TYPE, {\n ref: ref as React.Ref<HTMLLIElement & HTMLDivElement>,\n tabIndex: navigable \|\| isSelectionEnabled ? 0 : undefined,\n role: navigable ? 'menuitem' : 'listitem',\n id: String(value),\n ...(isSelectionEnabled && {\n role: 'option',\n 'aria-selected': isSelected,\n }),\n ...props,\n onKeyDown: buttonProps.onKeyDown as React.KeyboardEventHandler<HTMLLIElement & HTMLDivElement>,\n onKeyUp: buttonProps.onKeyUp as React.KeyboardEventHandler<HTMLLIElement & HTMLDivElement>,\n onClick: buttonProps.onClick as React.MouseEventHandler<HTMLLIElement & HTMLDivElement>,\n }),\n { elementType: DEFAULT_ROOT_EL_TYPE },\n );\n\n const state: ListItemState = {\n components: {\n root: DEFAULT_ROOT_EL_TYPE,\n media: 'div',\n header: 'div',\n contentWrapper: 'div',\n headerMedia: 'div',\n contentMedia: 'div',\n endMedia: 'div',\n },\n root,\n navigable,\n selectable: isSelectionEnabled,\n selected: isSelected,\n media: slot.optional(props.media, { elementType: 'div' }),\n header: slot.optional(props.header, { elementType: 'div' }),\n contentWrapper: slot.optional(props.contentWrapper, { elementType: 'div', renderByDefault: true }),\n headerMedia: slot.optional(props.headerMedia, { elementType: 'div' }),\n contentMedia: slot.optional(props.contentMedia, { elementType: 'div' }),\n endMedia: slot.optional(props.endMedia, { elementType: 'div' }),\n truncateHeader: truncateHeader ?? truncateHeaderOnList,\n truncateContent: truncateContent ?? truncateContentOnList,\n };\n\n return state;\n};\n"],"names":["useARIAButtonProps","getIntrinsicElementProps","slot","useEventCallback","useId","React","useListContext_unstable","DEFAULT_ROOT_EL_TYPE","validateProperElementTypes","parentRenderedAs","renderedAs","process","env","NODE_ENV","Error","validateNavigableWhenOnClickPresent","navigable","onClick","useListItem_unstable","props","ref","id","value","truncateHeader","truncateContent","onKeyDown","onKeyUp","ctx","toggleItem","selection","isSelectionEnabled","isSelected","truncateHeaderOnList","truncateContentOnList","as","handleClick","e","defaultPrevented","passClickHandler","clickHandlerProps","undefined","ariaButtonProps","buttonProps","root","always","tabIndex","role","String","elementType","state","components","media","header","contentWrapper","headerMedia","contentMedia","endMedia","selectable","selected","optional","renderByDefault"],"mappings":"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"}

package/lib/components/List/ListItem/useListItemStyles.styles.js CHANGED Viewed

@@ -1,3 +1,5 @@
+'use client';
 import { __styles, __resetStyles, mergeClasses } from '@griffel/react';
 import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';
 import { tokens } from '@fluentui/react-theme';

package/lib/components/List/ListItem/useListItemStyles.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["__styles","__resetStyles","mergeClasses","createCustomFocusIndicatorStyle","tokens","listItemClassNames","root","media","header","contentWrapper","headerMedia","contentMedia","endMedia","useRootBaseStyles","useStyles","Be2twd7","contentWrapperWithoutMedia","Bw0ie65","truncate","B68tc82","Bmxbyg5","Bpg54ce","j4b8c3","ygn44y","rootSelected","De3pzq","rootClickable","Bceei9c","Jwef8y","d","p","h","useListItemStyles_unstable","state","rootBaseStyles","styles","className","selectable","navigable","selected","_state_header","truncateHeader","_state_contentWrapper","truncateContent"],"sources":["useListItemStyles.styles.js"],"sourcesContent":["~~import~~ { makeStyles, makeResetStyles, mergeClasses } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nexport const listItemClassNames = {\n root: 'fui-ListItem',\n media: 'fui-ListItem__media',\n header: 'fui-ListItem__header',\n contentWrapper: 'fui-ListItem__contentWrapper',\n headerMedia: 'fui-ListItem__headerMedia',\n contentMedia: 'fui-ListItem__contentMedia',\n endMedia: 'fui-ListItem__endMedia'\n};\nconst useRootBaseStyles = makeResetStyles({\n padding: '0 10px',\n margin: 0,\n textIndent: 0,\n listStyleType: 'none',\n ...createCustomFocusIndicatorStyle({\n outline: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,\n borderRadius: tokens.borderRadiusMedium\n }, {\n selector: 'focus'\n })\n});\n/*\n Styles for the root slot\n / const useStyles = makeStyles({\n contentWrapper: {\n fontSize: tokens.fontSizeBase200\n },\n // The content should go all the way to the end if the content media is not present\n contentWrapperWithoutMedia: {\n gridColumnEnd: 4\n },\n truncate: {\n overflow: 'hidden',\n textWrap: 'nowrap',\n textOverflow: 'ellipsis'\n },\n rootSelected: {\n backgroundColor: tokens.colorNeutralBackground1Selected\n },\n rootClickable: {\n cursor: 'pointer',\n '&:hover': {\n backgroundColor: tokens.colorNeutralBackground1Hover\n }\n }\n});\n/\n Apply styling to the ListItem slots based on the state\n */ export const useListItemStyles_unstable = (state)=>{\n 'use no memo';\n const rootBaseStyles = useRootBaseStyles();\n const styles = useStyles();\n state.root.className = mergeClasses(listItemClassNames.root, rootBaseStyles, (state.selectable \|\| state.navigable) && styles.rootClickable, state.selected && styles.rootSelected, state.root.className);\n if (state.header) {\n var _state_header;\n state.header.className = mergeClasses(state.truncateHeader && styles.truncate, (_state_header = state.header) === null \|\| _state_header === void 0 ? void 0 : _state_header.className);\n }\n if (state.contentWrapper) {\n var _state_contentWrapper;\n state.contentWrapper.className = mergeClasses(styles.contentWrapper, state.truncateContent && styles.truncate, !state.contentMedia && styles.contentWrapperWithoutMedia, (_state_contentWrapper = state.contentWrapper) === null \|\| _state_contentWrapper === void 0 ? void 0 : _state_contentWrapper.className);\n }\n return state;\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAAC,aAAA,EAAsCC,YAAY,QAAQ,gBAAgB;AAC1E,SAASC,+BAA+B,QAAQ,yBAAyB;AACzE,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,kBAAkB,GAAG;EAC9BC,IAAI,EAAE,cAAc;EACpBC,KAAK,EAAE,qBAAqB;EAC5BC,MAAM,EAAE,sBAAsB;EAC9BC,cAAc,EAAE,8BAA8B;EAC9CC,WAAW,EAAE,2BAA2B;EACxCC,YAAY,EAAE,4BAA4B;EAC1CC,QAAQ,EAAE;AACd,CAAC;AACD,MAAMC,iBAAiB,gBAAGZ,aAAA,wOAWzB,CAAC;AACF;AACA;AACA;AAAI,MAAMa,SAAS,gBAAGd,QAAA;EAAAS,cAAA;IAAAM,OAAA;EAAA;EAAAC,0BAAA;IAAAC,OAAA;EAAA;EAAAC,QAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,YAAA;IAAAC,MAAA;EAAA;EAAAC,aAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;IAAAC,CAAA;EAAA;EAAAC,CAAA;AAAA,CAsBrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,0BAA0B,GAAIC,KAAK,IAAG;EACnD,aAAa;;EACb,MAAMC,cAAc,GAAGrB,iBAAiB,CAAC,CAAC;EAC1C,MAAMsB,MAAM,GAAGrB,SAAS,CAAC,CAAC;EAC1BmB,KAAK,CAAC3B,IAAI,CAAC8B,SAAS,GAAGlC,YAAY,CAACG,kBAAkB,CAACC,IAAI,EAAE4B,cAAc,EAAE,CAACD,KAAK,CAACI,UAAU,IAAIJ,KAAK,CAACK,SAAS,KAAKH,MAAM,CAACT,aAAa,EAAEO,KAAK,CAACM,QAAQ,IAAIJ,MAAM,CAACX,YAAY,EAAES,KAAK,CAAC3B,IAAI,CAAC8B,SAAS,CAAC;EACxM,IAAIH,KAAK,CAACzB,MAAM,EAAE;IACd,IAAIgC,aAAa;IACjBP,KAAK,CAACzB,MAAM,CAAC4B,SAAS,GAAGlC,YAAY,CAAC+B,KAAK,CAACQ,cAAc,IAAIN,MAAM,CAACjB,QAAQ,EAAE,CAACsB,aAAa,GAAGP,KAAK,CAACzB,MAAM,MAAM,IAAI,IAAIgC,aAAa,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAGA,aAAa,CAACJ,SAAS,CAAC;EAC1L;EACA,IAAIH,KAAK,CAACxB,cAAc,EAAE;IACtB,IAAIiC,qBAAqB;IACzBT,KAAK,CAACxB,cAAc,CAAC2B,SAAS,GAAGlC,YAAY,CAACiC,MAAM,CAAC1B,cAAc,EAAEwB,KAAK,CAACU,eAAe,IAAIR,MAAM,CAACjB,QAAQ,EAAE,CAACe,KAAK,CAACtB,YAAY,IAAIwB,MAAM,CAACnB,0BAA0B,EAAE,CAAC0B,qBAAqB,GAAGT,KAAK,CAACxB,cAAc,MAAM,IAAI,IAAIiC,qBAAqB,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAGA,qBAAqB,CAACN,SAAS,CAAC;EACpT;EACA,OAAOH,KAAK;AAChB,CAAC","ignoreList":[]}
1	+ {"version":3,"names":["__styles","__resetStyles","mergeClasses","createCustomFocusIndicatorStyle","tokens","listItemClassNames","root","media","header","contentWrapper","headerMedia","contentMedia","endMedia","useRootBaseStyles","useStyles","Be2twd7","contentWrapperWithoutMedia","Bw0ie65","truncate","B68tc82","Bmxbyg5","Bpg54ce","j4b8c3","ygn44y","rootSelected","De3pzq","rootClickable","Bceei9c","Jwef8y","d","p","h","useListItemStyles_unstable","state","rootBaseStyles","styles","className","selectable","navigable","selected","_state_header","truncateHeader","_state_contentWrapper","truncateContent"],"sources":["useListItemStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, makeResetStyles, mergeClasses } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nexport const listItemClassNames = {\n root: 'fui-ListItem',\n media: 'fui-ListItem__media',\n header: 'fui-ListItem__header',\n contentWrapper: 'fui-ListItem__contentWrapper',\n headerMedia: 'fui-ListItem__headerMedia',\n contentMedia: 'fui-ListItem__contentMedia',\n endMedia: 'fui-ListItem__endMedia'\n};\nconst useRootBaseStyles = makeResetStyles({\n padding: '0 10px',\n margin: 0,\n textIndent: 0,\n listStyleType: 'none',\n ...createCustomFocusIndicatorStyle({\n outline: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,\n borderRadius: tokens.borderRadiusMedium\n }, {\n selector: 'focus'\n })\n});\n/*\n Styles for the root slot\n / const useStyles = makeStyles({\n contentWrapper: {\n fontSize: tokens.fontSizeBase200\n },\n // The content should go all the way to the end if the content media is not present\n contentWrapperWithoutMedia: {\n gridColumnEnd: 4\n },\n truncate: {\n overflow: 'hidden',\n textWrap: 'nowrap',\n textOverflow: 'ellipsis'\n },\n rootSelected: {\n backgroundColor: tokens.colorNeutralBackground1Selected\n },\n rootClickable: {\n cursor: 'pointer',\n '&:hover': {\n backgroundColor: tokens.colorNeutralBackground1Hover\n }\n }\n});\n/\n Apply styling to the ListItem slots based on the state\n */ export const useListItemStyles_unstable = (state)=>{\n 'use no memo';\n const rootBaseStyles = useRootBaseStyles();\n const styles = useStyles();\n state.root.className = mergeClasses(listItemClassNames.root, rootBaseStyles, (state.selectable \|\| state.navigable) && styles.rootClickable, state.selected && styles.rootSelected, state.root.className);\n if (state.header) {\n var _state_header;\n state.header.className = mergeClasses(state.truncateHeader && styles.truncate, (_state_header = state.header) === null \|\| _state_header === void 0 ? void 0 : _state_header.className);\n }\n if (state.contentWrapper) {\n var _state_contentWrapper;\n state.contentWrapper.className = mergeClasses(styles.contentWrapper, state.truncateContent && styles.truncate, !state.contentMedia && styles.contentWrapperWithoutMedia, (_state_contentWrapper = state.contentWrapper) === null \|\| _state_contentWrapper === void 0 ? void 0 : _state_contentWrapper.className);\n }\n return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,QAAA,EAAAC,aAAA,EAAsCC,YAAY,QAAQ,gBAAgB;AAC1E,SAASC,+BAA+B,QAAQ,yBAAyB;AACzE,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,kBAAkB,GAAG;EAC9BC,IAAI,EAAE,cAAc;EACpBC,KAAK,EAAE,qBAAqB;EAC5BC,MAAM,EAAE,sBAAsB;EAC9BC,cAAc,EAAE,8BAA8B;EAC9CC,WAAW,EAAE,2BAA2B;EACxCC,YAAY,EAAE,4BAA4B;EAC1CC,QAAQ,EAAE;AACd,CAAC;AACD,MAAMC,iBAAiB,gBAAGZ,aAAA,wOAWzB,CAAC;AACF;AACA;AACA;AAAI,MAAMa,SAAS,gBAAGd,QAAA;EAAAS,cAAA;IAAAM,OAAA;EAAA;EAAAC,0BAAA;IAAAC,OAAA;EAAA;EAAAC,QAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,YAAA;IAAAC,MAAA;EAAA;EAAAC,aAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;IAAAC,CAAA;EAAA;EAAAC,CAAA;AAAA,CAsBrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,0BAA0B,GAAIC,KAAK,IAAG;EACnD,aAAa;;EACb,MAAMC,cAAc,GAAGrB,iBAAiB,CAAC,CAAC;EAC1C,MAAMsB,MAAM,GAAGrB,SAAS,CAAC,CAAC;EAC1BmB,KAAK,CAAC3B,IAAI,CAAC8B,SAAS,GAAGlC,YAAY,CAACG,kBAAkB,CAACC,IAAI,EAAE4B,cAAc,EAAE,CAACD,KAAK,CAACI,UAAU,IAAIJ,KAAK,CAACK,SAAS,KAAKH,MAAM,CAACT,aAAa,EAAEO,KAAK,CAACM,QAAQ,IAAIJ,MAAM,CAACX,YAAY,EAAES,KAAK,CAAC3B,IAAI,CAAC8B,SAAS,CAAC;EACxM,IAAIH,KAAK,CAACzB,MAAM,EAAE;IACd,IAAIgC,aAAa;IACjBP,KAAK,CAACzB,MAAM,CAAC4B,SAAS,GAAGlC,YAAY,CAAC+B,KAAK,CAACQ,cAAc,IAAIN,MAAM,CAACjB,QAAQ,EAAE,CAACsB,aAAa,GAAGP,KAAK,CAACzB,MAAM,MAAM,IAAI,IAAIgC,aAAa,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAGA,aAAa,CAACJ,SAAS,CAAC;EAC1L;EACA,IAAIH,KAAK,CAACxB,cAAc,EAAE;IACtB,IAAIiC,qBAAqB;IACzBT,KAAK,CAACxB,cAAc,CAAC2B,SAAS,GAAGlC,YAAY,CAACiC,MAAM,CAAC1B,cAAc,EAAEwB,KAAK,CAACU,eAAe,IAAIR,MAAM,CAACjB,QAAQ,EAAE,CAACe,KAAK,CAACtB,YAAY,IAAIwB,MAAM,CAACnB,0BAA0B,EAAE,CAAC0B,qBAAqB,GAAGT,KAAK,CAACxB,cAAc,MAAM,IAAI,IAAIiC,qBAAqB,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAGA,qBAAqB,CAACN,SAAS,CAAC;EACpT;EACA,OAAOH,KAAK;AAChB,CAAC","ignoreList":[]}

package/lib/components/List/ListItem/useListItemStyles.styles.raw.js CHANGED Viewed

@@ -1,3 +1,4 @@
+'use client';
 import { makeStyles, makeResetStyles, mergeClasses } from '@griffel/react';
 import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';
 import { tokens } from '@fluentui/react-theme';

package/lib/components/List/ListItem/useListItemStyles.styles.raw.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/List/ListItem/useListItemStyles.styles.ts"],"sourcesContent":["~~import~~ type { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, makeResetStyles, mergeClasses } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport type { ListItemSlots, ListItemState } from './ListItem.types';\nimport { tokens } from '@fluentui/react-theme';\n\nexport const listItemClassNames: SlotClassNames<ListItemSlots> = {\n root: 'fui-ListItem',\n media: 'fui-ListItem__media',\n header: 'fui-ListItem__header',\n contentWrapper: 'fui-ListItem__contentWrapper',\n headerMedia: 'fui-ListItem__headerMedia',\n contentMedia: 'fui-ListItem__contentMedia',\n endMedia: 'fui-ListItem__endMedia',\n};\n\nconst useRootBaseStyles = makeResetStyles({\n padding: '0 10px',\n margin: 0,\n textIndent: 0,\n listStyleType: 'none',\n ...createCustomFocusIndicatorStyle(\n {\n outline: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,\n borderRadius: tokens.borderRadiusMedium,\n },\n { selector: 'focus' },\n ),\n});\n\n/*\n Styles for the root slot\n /\nconst useStyles = makeStyles({\n contentWrapper: {\n fontSize: tokens.fontSizeBase200,\n },\n\n // The content should go all the way to the end if the content media is not present\n contentWrapperWithoutMedia: {\n gridColumnEnd: 4,\n },\n truncate: {\n overflow: 'hidden',\n textWrap: 'nowrap',\n textOverflow: 'ellipsis',\n },\n rootSelected: {\n backgroundColor: tokens.colorNeutralBackground1Selected,\n },\n rootClickable: {\n cursor: 'pointer',\n\n '&:hover': {\n backgroundColor: tokens.colorNeutralBackground1Hover,\n },\n },\n});\n\n/\n Apply styling to the ListItem slots based on the state\n */\nexport const useListItemStyles_unstable = (state: ListItemState): ListItemState => {\n 'use no memo';\n\n const rootBaseStyles = useRootBaseStyles();\n const styles = useStyles();\n\n state.root.className = mergeClasses(\n listItemClassNames.root,\n rootBaseStyles,\n (state.selectable \|\| state.navigable) && styles.rootClickable,\n state.selected && styles.rootSelected,\n state.root.className,\n );\n\n if (state.header) {\n state.header.className = mergeClasses(state.truncateHeader && styles.truncate, state.header?.className);\n }\n\n if (state.contentWrapper) {\n state.contentWrapper.className = mergeClasses(\n styles.contentWrapper,\n state.truncateContent && styles.truncate,\n !state.contentMedia && styles.contentWrapperWithoutMedia,\n state.contentWrapper?.className,\n );\n }\n\n return state;\n};\n"],"names":["makeStyles","makeResetStyles","mergeClasses","createCustomFocusIndicatorStyle","tokens","listItemClassNames","root","media","header","contentWrapper","headerMedia","contentMedia","endMedia","useRootBaseStyles","padding","margin","textIndent","listStyleType","outline","strokeWidthThick","colorStrokeFocus2","borderRadius","borderRadiusMedium","selector","useStyles","fontSize","fontSizeBase200","contentWrapperWithoutMedia","gridColumnEnd","truncate","overflow","textWrap","textOverflow","rootSelected","backgroundColor","colorNeutralBackground1Selected","rootClickable","cursor","colorNeutralBackground1Hover","useListItemStyles_unstable","state","rootBaseStyles","styles","className","selectable","navigable","selected","truncateHeader","truncateContent"],"mappings":"~~AACA~~,SAASA,UAAU,EAAEC,eAAe,EAAEC,YAAY,QAAQ,iBAAiB;AAC3E,SAASC,+BAA+B,QAAQ,0BAA0B;AAE1E,SAASC,MAAM,QAAQ,wBAAwB;AAE/C,OAAO,MAAMC,qBAAoD;IAC/DC,MAAM;IACNC,OAAO;IACPC,QAAQ;IACRC,gBAAgB;IAChBC,aAAa;IACbC,cAAc;IACdC,UAAU;AACZ,EAAE;AAEF,MAAMC,oBAAoBZ,gBAAgB;IACxCa,SAAS;IACTC,QAAQ;IACRC,YAAY;IACZC,eAAe;IACf,GAAGd,gCACD;QACEe,SAAS,GAAGd,OAAOe,gBAAgB,CAAC,OAAO,EAAEf,OAAOgB,iBAAiB,EAAE;QACvEC,cAAcjB,OAAOkB,kBAAkB;IACzC,GACA;QAAEC,UAAU;IAAQ,EACrB;AACH;AAEA;;CAEC,GACD,MAAMC,YAAYxB,WAAW;IAC3BS,gBAAgB;QACdgB,UAAUrB,OAAOsB,eAAe;IAClC;IAEA,mFAAmF;IACnFC,4BAA4B;QAC1BC,eAAe;IACjB;IACAC,UAAU;QACRC,UAAU;QACVC,UAAU;QACVC,cAAc;IAChB;IACAC,cAAc;QACZC,iBAAiB9B,OAAO+B,+BAA+B;IACzD;IACAC,eAAe;QACbC,QAAQ;QAER,WAAW;YACTH,iBAAiB9B,OAAOkC,4BAA4B;QACtD;IACF;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,6BAA6B,CAACC;IACzC;IAEA,MAAMC,iBAAiB5B;IACvB,MAAM6B,SAASlB;IAEfgB,MAAMlC,IAAI,CAACqC,SAAS,GAAGzC,aACrBG,mBAAmBC,IAAI,EACvBmC,gBACA,AAACD,CAAAA,MAAMI,UAAU,IAAIJ,MAAMK,SAAS,AAAD,KAAMH,OAAON,aAAa,EAC7DI,MAAMM,QAAQ,IAAIJ,OAAOT,YAAY,EACrCO,MAAMlC,IAAI,CAACqC,SAAS;IAGtB,IAAIH,MAAMhC,MAAM,EAAE;YAC+DgC;QAA/EA,MAAMhC,MAAM,CAACmC,SAAS,GAAGzC,aAAasC,MAAMO,cAAc,IAAIL,OAAOb,QAAQ,GAAEW,gBAAAA,MAAMhC,MAAM,cAAZgC,oCAAAA,cAAcG,SAAS;IACxG;IAEA,IAAIH,MAAM/B,cAAc,EAAE;YAKtB+B;QAJFA,MAAM/B,cAAc,CAACkC,SAAS,GAAGzC,aAC/BwC,OAAOjC,cAAc,EACrB+B,MAAMQ,eAAe,IAAIN,OAAOb,QAAQ,EACxC,CAACW,MAAM7B,YAAY,IAAI+B,OAAOf,0BAA0B,GACxDa,wBAAAA,MAAM/B,cAAc,cAApB+B,4CAAAA,sBAAsBG,SAAS;IAEnC;IAEA,OAAOH;AACT,EAAE"}
1	+ {"version":3,"sources":["../src/components/List/ListItem/useListItemStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, makeResetStyles, mergeClasses } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport type { ListItemSlots, ListItemState } from './ListItem.types';\nimport { tokens } from '@fluentui/react-theme';\n\nexport const listItemClassNames: SlotClassNames<ListItemSlots> = {\n root: 'fui-ListItem',\n media: 'fui-ListItem__media',\n header: 'fui-ListItem__header',\n contentWrapper: 'fui-ListItem__contentWrapper',\n headerMedia: 'fui-ListItem__headerMedia',\n contentMedia: 'fui-ListItem__contentMedia',\n endMedia: 'fui-ListItem__endMedia',\n};\n\nconst useRootBaseStyles = makeResetStyles({\n padding: '0 10px',\n margin: 0,\n textIndent: 0,\n listStyleType: 'none',\n ...createCustomFocusIndicatorStyle(\n {\n outline: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,\n borderRadius: tokens.borderRadiusMedium,\n },\n { selector: 'focus' },\n ),\n});\n\n/*\n Styles for the root slot\n /\nconst useStyles = makeStyles({\n contentWrapper: {\n fontSize: tokens.fontSizeBase200,\n },\n\n // The content should go all the way to the end if the content media is not present\n contentWrapperWithoutMedia: {\n gridColumnEnd: 4,\n },\n truncate: {\n overflow: 'hidden',\n textWrap: 'nowrap',\n textOverflow: 'ellipsis',\n },\n rootSelected: {\n backgroundColor: tokens.colorNeutralBackground1Selected,\n },\n rootClickable: {\n cursor: 'pointer',\n\n '&:hover': {\n backgroundColor: tokens.colorNeutralBackground1Hover,\n },\n },\n});\n\n/\n Apply styling to the ListItem slots based on the state\n */\nexport const useListItemStyles_unstable = (state: ListItemState): ListItemState => {\n 'use no memo';\n\n const rootBaseStyles = useRootBaseStyles();\n const styles = useStyles();\n\n state.root.className = mergeClasses(\n listItemClassNames.root,\n rootBaseStyles,\n (state.selectable \|\| state.navigable) && styles.rootClickable,\n state.selected && styles.rootSelected,\n state.root.className,\n );\n\n if (state.header) {\n state.header.className = mergeClasses(state.truncateHeader && styles.truncate, state.header?.className);\n }\n\n if (state.contentWrapper) {\n state.contentWrapper.className = mergeClasses(\n styles.contentWrapper,\n state.truncateContent && styles.truncate,\n !state.contentMedia && styles.contentWrapperWithoutMedia,\n state.contentWrapper?.className,\n );\n }\n\n return state;\n};\n"],"names":["makeStyles","makeResetStyles","mergeClasses","createCustomFocusIndicatorStyle","tokens","listItemClassNames","root","media","header","contentWrapper","headerMedia","contentMedia","endMedia","useRootBaseStyles","padding","margin","textIndent","listStyleType","outline","strokeWidthThick","colorStrokeFocus2","borderRadius","borderRadiusMedium","selector","useStyles","fontSize","fontSizeBase200","contentWrapperWithoutMedia","gridColumnEnd","truncate","overflow","textWrap","textOverflow","rootSelected","backgroundColor","colorNeutralBackground1Selected","rootClickable","cursor","colorNeutralBackground1Hover","useListItemStyles_unstable","state","rootBaseStyles","styles","className","selectable","navigable","selected","truncateHeader","truncateContent"],"mappings":"AAAA;AAGA,SAASA,UAAU,EAAEC,eAAe,EAAEC,YAAY,QAAQ,iBAAiB;AAC3E,SAASC,+BAA+B,QAAQ,0BAA0B;AAE1E,SAASC,MAAM,QAAQ,wBAAwB;AAE/C,OAAO,MAAMC,qBAAoD;IAC/DC,MAAM;IACNC,OAAO;IACPC,QAAQ;IACRC,gBAAgB;IAChBC,aAAa;IACbC,cAAc;IACdC,UAAU;AACZ,EAAE;AAEF,MAAMC,oBAAoBZ,gBAAgB;IACxCa,SAAS;IACTC,QAAQ;IACRC,YAAY;IACZC,eAAe;IACf,GAAGd,gCACD;QACEe,SAAS,GAAGd,OAAOe,gBAAgB,CAAC,OAAO,EAAEf,OAAOgB,iBAAiB,EAAE;QACvEC,cAAcjB,OAAOkB,kBAAkB;IACzC,GACA;QAAEC,UAAU;IAAQ,EACrB;AACH;AAEA;;CAEC,GACD,MAAMC,YAAYxB,WAAW;IAC3BS,gBAAgB;QACdgB,UAAUrB,OAAOsB,eAAe;IAClC;IAEA,mFAAmF;IACnFC,4BAA4B;QAC1BC,eAAe;IACjB;IACAC,UAAU;QACRC,UAAU;QACVC,UAAU;QACVC,cAAc;IAChB;IACAC,cAAc;QACZC,iBAAiB9B,OAAO+B,+BAA+B;IACzD;IACAC,eAAe;QACbC,QAAQ;QAER,WAAW;YACTH,iBAAiB9B,OAAOkC,4BAA4B;QACtD;IACF;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,6BAA6B,CAACC;IACzC;IAEA,MAAMC,iBAAiB5B;IACvB,MAAM6B,SAASlB;IAEfgB,MAAMlC,IAAI,CAACqC,SAAS,GAAGzC,aACrBG,mBAAmBC,IAAI,EACvBmC,gBACA,AAACD,CAAAA,MAAMI,UAAU,IAAIJ,MAAMK,SAAS,AAAD,KAAMH,OAAON,aAAa,EAC7DI,MAAMM,QAAQ,IAAIJ,OAAOT,YAAY,EACrCO,MAAMlC,IAAI,CAACqC,SAAS;IAGtB,IAAIH,MAAMhC,MAAM,EAAE;YAC+DgC;QAA/EA,MAAMhC,MAAM,CAACmC,SAAS,GAAGzC,aAAasC,MAAMO,cAAc,IAAIL,OAAOb,QAAQ,GAAEW,gBAAAA,MAAMhC,MAAM,cAAZgC,oCAAAA,cAAcG,SAAS;IACxG;IAEA,IAAIH,MAAM/B,cAAc,EAAE;YAKtB+B;QAJFA,MAAM/B,cAAc,CAACkC,SAAS,GAAGzC,aAC/BwC,OAAOjC,cAAc,EACrB+B,MAAMQ,eAAe,IAAIN,OAAOb,QAAQ,EACxC,CAACW,MAAM7B,YAAY,IAAI+B,OAAOf,0BAA0B,GACxDa,wBAAAA,MAAM/B,cAAc,cAApB+B,4CAAAA,sBAAsBG,SAAS;IAEnC;IAEA,OAAOH;AACT,EAAE"}

package/lib/components/List/hooks/useListSelection.js CHANGED Viewed

@@ -1,3 +1,4 @@
+'use client';
 import { useControllableState, useEventCallback, useSelection } from '@fluentui/react-utilities';
 import * as React from 'react';
 export function useListSelection(options = {