@fluentui/react-migration-v0-v9 9.6.26 → 9.6.28
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +25 -2
- package/dist/index.d.ts +7 -7
- package/lib/components/Attachment/AttachmentAction.js.map +1 -1
- package/lib/components/Button/ButtonMigration.mixins.js.map +1 -1
- package/lib/components/Flex/FlexItem.mixins.js.map +1 -1
- package/lib/components/FormField/FormFieldShim.js.map +1 -1
- package/lib/components/Grid/Grid.mixins.js.map +1 -1
- package/lib/components/Input/Input.mixins.js.map +1 -1
- package/lib/components/ItemLayout/ItemLayout.js.map +1 -1
- package/lib/components/List/List/List.types.js +3 -1
- package/lib/components/List/List/List.types.js.map +1 -1
- package/lib/components/List/List/listContext.js.map +1 -1
- package/lib/components/List/List/useList.js +0 -1
- package/lib/components/List/List/useList.js.map +1 -1
- package/lib/components/List/List/useListContextValues.js.map +1 -1
- package/lib/components/List/ListItem/ListItem.types.js +3 -1
- package/lib/components/List/ListItem/ListItem.types.js.map +1 -1
- package/lib/components/List/ListItem/useListItem.js +0 -1
- package/lib/components/List/ListItem/useListItem.js.map +1 -1
- package/lib/components/List/hooks/types.js +1 -1
- package/lib/components/List/hooks/types.js.map +1 -1
- package/lib/components/List/hooks/useListSelection.js.map +1 -1
- package/lib/components/Slider/Slider.mixins.js.map +1 -1
- package/lib/components/Spinner/SpinnerMigration.mixins.js.map +1 -1
- package/lib/components/StyledText/StyledText.js.map +1 -1
- package/lib-commonjs/components/Attachment/AttachmentAction.js.map +1 -1
- package/lib-commonjs/components/Button/ButtonMigration.mixins.js.map +1 -1
- package/lib-commonjs/components/Flex/FlexItem.mixins.js.map +1 -1
- package/lib-commonjs/components/FormField/FormFieldShim.js.map +1 -1
- package/lib-commonjs/components/Grid/Grid.mixins.js.map +1 -1
- package/lib-commonjs/components/Input/Input.mixins.js.map +1 -1
- package/lib-commonjs/components/ItemLayout/ItemLayout.js.map +1 -1
- package/lib-commonjs/components/List/List/List.types.js +3 -3
- package/lib-commonjs/components/List/List/List.types.js.map +1 -1
- package/lib-commonjs/components/List/List/listContext.js.map +1 -1
- package/lib-commonjs/components/List/List/useList.js +0 -2
- package/lib-commonjs/components/List/List/useList.js.map +1 -1
- package/lib-commonjs/components/List/List/useListContextValues.js.map +1 -1
- package/lib-commonjs/components/List/ListItem/ListItem.types.js +3 -3
- package/lib-commonjs/components/List/ListItem/ListItem.types.js.map +1 -1
- package/lib-commonjs/components/List/ListItem/useListItem.js +0 -2
- package/lib-commonjs/components/List/ListItem/useListItem.js.map +1 -1
- package/lib-commonjs/components/List/hooks/types.js +0 -2
- package/lib-commonjs/components/List/hooks/types.js.map +1 -1
- package/lib-commonjs/components/List/hooks/useListSelection.js.map +1 -1
- package/lib-commonjs/components/Slider/Slider.mixins.js.map +1 -1
- package/lib-commonjs/components/Spinner/SpinnerMigration.mixins.js.map +1 -1
- package/lib-commonjs/components/StyledText/StyledText.js.map +1 -1
- package/package.json +7 -7
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,35 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-migration-v0-v9
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Thu, 23 Apr 2026 11:59:26 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.6.28](https://github.com/microsoft/fluentui/tree/@fluentui/react-migration-v0-v9_v9.6.28)
|
|
8
|
+
|
|
9
|
+
Thu, 23 Apr 2026 11:59:26 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-migration-v0-v9_v9.6.27..@fluentui/react-migration-v0-v9_v9.6.28)
|
|
11
|
+
|
|
12
|
+
### Patches
|
|
13
|
+
|
|
14
|
+
- Bump @fluentui/react-aria to v9.17.11 ([PR #35996](https://github.com/microsoft/fluentui/pull/35996) by beachball)
|
|
15
|
+
- Bump @fluentui/react-components to v9.73.8 ([PR #35996](https://github.com/microsoft/fluentui/pull/35996) by beachball)
|
|
16
|
+
- Bump @fluentui/react-context-selector to v9.2.16 ([PR #35996](https://github.com/microsoft/fluentui/pull/35996) by beachball)
|
|
17
|
+
- Bump @fluentui/react-jsx-runtime to v9.4.2 ([PR #35996](https://github.com/microsoft/fluentui/pull/35996) by beachball)
|
|
18
|
+
- Bump @fluentui/react-tabster to v9.26.14 ([PR #35996](https://github.com/microsoft/fluentui/pull/35996) by beachball)
|
|
19
|
+
- Bump @fluentui/react-utilities to v9.26.3 ([PR #35996](https://github.com/microsoft/fluentui/pull/35996) by beachball)
|
|
20
|
+
|
|
21
|
+
## [9.6.27](https://github.com/microsoft/fluentui/tree/@fluentui/react-migration-v0-v9_v9.6.27)
|
|
22
|
+
|
|
23
|
+
Wed, 01 Apr 2026 15:52:43 GMT
|
|
24
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-migration-v0-v9_v9.6.26..@fluentui/react-migration-v0-v9_v9.6.27)
|
|
25
|
+
|
|
26
|
+
### Patches
|
|
27
|
+
|
|
28
|
+
- Bump @fluentui/react-components to v9.73.7 ([PR #35912](https://github.com/microsoft/fluentui/pull/35912) by beachball)
|
|
29
|
+
|
|
7
30
|
## [9.6.26](https://github.com/microsoft/fluentui/tree/@fluentui/react-migration-v0-v9_v9.6.26)
|
|
8
31
|
|
|
9
|
-
Mon, 30 Mar 2026 14:
|
|
32
|
+
Mon, 30 Mar 2026 14:37:41 GMT
|
|
10
33
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-migration-v0-v9_v9.6.25..@fluentui/react-migration-v0-v9_v9.6.26)
|
|
11
34
|
|
|
12
35
|
### Patches
|
package/dist/index.d.ts
CHANGED
|
@@ -1,19 +1,19 @@
|
|
|
1
|
-
import { ButtonProps } from '@fluentui/react-components';
|
|
2
|
-
import { ComponentProps } from '@fluentui/react-components';
|
|
1
|
+
import type { ButtonProps } from '@fluentui/react-components';
|
|
2
|
+
import type { ComponentProps } from '@fluentui/react-components';
|
|
3
3
|
import type { ComponentProps as ComponentProps_2 } from '@fluentui/react-utilities';
|
|
4
4
|
import type { ComponentState } from '@fluentui/react-utilities';
|
|
5
5
|
import type { ForwardRefComponent } from '@fluentui/react-utilities';
|
|
6
|
-
import { GriffelStyle } from '@fluentui/react-components';
|
|
6
|
+
import type { GriffelStyle } from '@fluentui/react-components';
|
|
7
7
|
import type { JSXElement } from '@fluentui/react-utilities';
|
|
8
8
|
import type { JSXIntrinsicElement } from '@fluentui/react-utilities';
|
|
9
9
|
import type { JSXIntrinsicElementKeys } from '@fluentui/react-utilities';
|
|
10
10
|
import type { ObjectShorthandValue } from '@fluentui/react-northstar';
|
|
11
11
|
import * as React_2 from 'react';
|
|
12
|
-
import { SelectionHookParams } from '@fluentui/react-utilities';
|
|
13
|
-
import { SelectionItemId } from '@fluentui/react-utilities';
|
|
12
|
+
import type { SelectionHookParams } from '@fluentui/react-utilities';
|
|
13
|
+
import type { SelectionItemId } from '@fluentui/react-utilities';
|
|
14
14
|
import type { SelectionMode as SelectionMode_2 } from '@fluentui/react-utilities';
|
|
15
|
-
import { Slot } from '@fluentui/react-components';
|
|
16
|
-
import { Slot as Slot_2 } from '@fluentui/react-utilities';
|
|
15
|
+
import type { Slot } from '@fluentui/react-components';
|
|
16
|
+
import type { Slot as Slot_2 } from '@fluentui/react-utilities';
|
|
17
17
|
import type { SlotClassNames } from '@fluentui/react-utilities';
|
|
18
18
|
|
|
19
19
|
export declare const Attachment: React_2.ForwardRefExoticComponent<AttachmentProps & React_2.RefAttributes<HTMLDivElement>>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/Attachment/AttachmentAction.tsx"],"sourcesContent":["'use client';\n\nimport { Button,
|
|
1
|
+
{"version":3,"sources":["../src/components/Attachment/AttachmentAction.tsx"],"sourcesContent":["'use client';\n\nimport type { ButtonProps } from '@fluentui/react-components';\nimport { Button, 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;AAGA,SAASA,MAAM,EAAEC,YAAY,QAAQ,6BAA6B;AAClE,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 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/Button/ButtonMigration.mixins.ts"],"sourcesContent":["import { GriffelStyle } from '@fluentui/react-components';\nimport { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';\n\n// class names from v0 - not imported as we do not want to keep depending on v0.\nconst iconClassNames = {\n filled: 'ui-icon__filled',\n outline: 'ui-icon__outline',\n};\n\nexport const v9HoverClasses = (): GriffelStyle => ({\n [`& .${iconFilledClassName}`]: {\n display: 'none',\n },\n [`& .${iconRegularClassName}`]: {\n display: 'inline',\n },\n '&:hover': {\n [`& .${iconFilledClassName}`]: {\n display: 'inline',\n },\n [`& .${iconRegularClassName}`]: {\n display: 'none',\n },\n },\n});\n\nexport const v9Icon = (): GriffelStyle => ({\n // styles that allow to keep consistent size of v9 icon with v0 icon\n '& svg': {\n width: '100%',\n paddingBottom: '100%',\n // negative margin is necessary here for centering v9 icon\n // with v0 button, because of extra spaces that svg contains\n margin: '-4px 0 0 -4px',\n overflow: 'visible',\n },\n ...v9HoverClasses(),\n});\n\nexport const v9CustomSizeIcon = (): GriffelStyle => ({\n '& svg': { overflow: 'visible' },\n ...v9HoverClasses(),\n});\n\nexport const v0Icon = (): GriffelStyle => ({\n [`& .${iconClassNames.outline}`]: {\n display: 'block',\n },\n [`& .${iconClassNames.filled}`]: {\n display: 'none',\n },\n '&:hover': {\n [`& .${iconClassNames.outline}`]: {\n display: 'none',\n },\n [`& .${iconClassNames.filled}`]: {\n display: 'block',\n },\n },\n});\n\nexport const v9DisabledCursor = (): GriffelStyle => ({\n '&:disabled': {\n cursor: 'default',\n '&:hover': {\n cursor: 'default',\n },\n '&:hover:active': {\n cursor: 'default',\n },\n },\n});\n"],"names":["iconFilledClassName","iconRegularClassName","iconClassNames","filled","outline","v9HoverClasses","display","v9Icon","width","paddingBottom","margin","overflow","v9CustomSizeIcon","v0Icon","v9DisabledCursor","cursor"],"mappings":"AACA,SAASA,mBAAmB,EAAEC,oBAAoB,QAAQ,wBAAwB;AAElF,gFAAgF;AAChF,MAAMC,iBAAiB;IACrBC,QAAQ;IACRC,SAAS;AACX;AAEA,OAAO,MAAMC,iBAAiB,IAAqB,CAAA;QACjD,CAAC,CAAC,GAAG,EAAEL,qBAAqB,CAAC,EAAE;YAC7BM,SAAS;QACX;QACA,CAAC,CAAC,GAAG,EAAEL,sBAAsB,CAAC,EAAE;YAC9BK,SAAS;QACX;QACA,WAAW;YACT,CAAC,CAAC,GAAG,EAAEN,qBAAqB,CAAC,EAAE;gBAC7BM,SAAS;YACX;YACA,CAAC,CAAC,GAAG,EAAEL,sBAAsB,CAAC,EAAE;gBAC9BK,SAAS;YACX;QACF;IACF,CAAA,EAAG;AAEH,OAAO,MAAMC,SAAS,IAAqB,CAAA;QACzC,oEAAoE;QACpE,SAAS;YACPC,OAAO;YACPC,eAAe;YACf,0DAA0D;YAC1D,4DAA4D;YAC5DC,QAAQ;YACRC,UAAU;QACZ;QACA,GAAGN,gBAAgB;IACrB,CAAA,EAAG;AAEH,OAAO,MAAMO,mBAAmB,IAAqB,CAAA;QACnD,SAAS;YAAED,UAAU;QAAU;QAC/B,GAAGN,gBAAgB;IACrB,CAAA,EAAG;AAEH,OAAO,MAAMQ,SAAS,IAAqB,CAAA;QACzC,CAAC,CAAC,GAAG,EAAEX,eAAeE,OAAO,EAAE,CAAC,EAAE;YAChCE,SAAS;QACX;QACA,CAAC,CAAC,GAAG,EAAEJ,eAAeC,MAAM,EAAE,CAAC,EAAE;YAC/BG,SAAS;QACX;QACA,WAAW;YACT,CAAC,CAAC,GAAG,EAAEJ,eAAeE,OAAO,EAAE,CAAC,EAAE;gBAChCE,SAAS;YACX;YACA,CAAC,CAAC,GAAG,EAAEJ,eAAeC,MAAM,EAAE,CAAC,EAAE;gBAC/BG,SAAS;YACX;QACF;IACF,CAAA,EAAG;AAEH,OAAO,MAAMQ,mBAAmB,IAAqB,CAAA;QACnD,cAAc;YACZC,QAAQ;YACR,WAAW;gBACTA,QAAQ;YACV;YACA,kBAAkB;gBAChBA,QAAQ;YACV;QACF;IACF,CAAA,EAAG"}
|
|
1
|
+
{"version":3,"sources":["../src/components/Button/ButtonMigration.mixins.ts"],"sourcesContent":["import type { GriffelStyle } from '@fluentui/react-components';\nimport { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';\n\n// class names from v0 - not imported as we do not want to keep depending on v0.\nconst iconClassNames = {\n filled: 'ui-icon__filled',\n outline: 'ui-icon__outline',\n};\n\nexport const v9HoverClasses = (): GriffelStyle => ({\n [`& .${iconFilledClassName}`]: {\n display: 'none',\n },\n [`& .${iconRegularClassName}`]: {\n display: 'inline',\n },\n '&:hover': {\n [`& .${iconFilledClassName}`]: {\n display: 'inline',\n },\n [`& .${iconRegularClassName}`]: {\n display: 'none',\n },\n },\n});\n\nexport const v9Icon = (): GriffelStyle => ({\n // styles that allow to keep consistent size of v9 icon with v0 icon\n '& svg': {\n width: '100%',\n paddingBottom: '100%',\n // negative margin is necessary here for centering v9 icon\n // with v0 button, because of extra spaces that svg contains\n margin: '-4px 0 0 -4px',\n overflow: 'visible',\n },\n ...v9HoverClasses(),\n});\n\nexport const v9CustomSizeIcon = (): GriffelStyle => ({\n '& svg': { overflow: 'visible' },\n ...v9HoverClasses(),\n});\n\nexport const v0Icon = (): GriffelStyle => ({\n [`& .${iconClassNames.outline}`]: {\n display: 'block',\n },\n [`& .${iconClassNames.filled}`]: {\n display: 'none',\n },\n '&:hover': {\n [`& .${iconClassNames.outline}`]: {\n display: 'none',\n },\n [`& .${iconClassNames.filled}`]: {\n display: 'block',\n },\n },\n});\n\nexport const v9DisabledCursor = (): GriffelStyle => ({\n '&:disabled': {\n cursor: 'default',\n '&:hover': {\n cursor: 'default',\n },\n '&:hover:active': {\n cursor: 'default',\n },\n },\n});\n"],"names":["iconFilledClassName","iconRegularClassName","iconClassNames","filled","outline","v9HoverClasses","display","v9Icon","width","paddingBottom","margin","overflow","v9CustomSizeIcon","v0Icon","v9DisabledCursor","cursor"],"mappings":"AACA,SAASA,mBAAmB,EAAEC,oBAAoB,QAAQ,wBAAwB;AAElF,gFAAgF;AAChF,MAAMC,iBAAiB;IACrBC,QAAQ;IACRC,SAAS;AACX;AAEA,OAAO,MAAMC,iBAAiB,IAAqB,CAAA;QACjD,CAAC,CAAC,GAAG,EAAEL,qBAAqB,CAAC,EAAE;YAC7BM,SAAS;QACX;QACA,CAAC,CAAC,GAAG,EAAEL,sBAAsB,CAAC,EAAE;YAC9BK,SAAS;QACX;QACA,WAAW;YACT,CAAC,CAAC,GAAG,EAAEN,qBAAqB,CAAC,EAAE;gBAC7BM,SAAS;YACX;YACA,CAAC,CAAC,GAAG,EAAEL,sBAAsB,CAAC,EAAE;gBAC9BK,SAAS;YACX;QACF;IACF,CAAA,EAAG;AAEH,OAAO,MAAMC,SAAS,IAAqB,CAAA;QACzC,oEAAoE;QACpE,SAAS;YACPC,OAAO;YACPC,eAAe;YACf,0DAA0D;YAC1D,4DAA4D;YAC5DC,QAAQ;YACRC,UAAU;QACZ;QACA,GAAGN,gBAAgB;IACrB,CAAA,EAAG;AAEH,OAAO,MAAMO,mBAAmB,IAAqB,CAAA;QACnD,SAAS;YAAED,UAAU;QAAU;QAC/B,GAAGN,gBAAgB;IACrB,CAAA,EAAG;AAEH,OAAO,MAAMQ,SAAS,IAAqB,CAAA;QACzC,CAAC,CAAC,GAAG,EAAEX,eAAeE,OAAO,EAAE,CAAC,EAAE;YAChCE,SAAS;QACX;QACA,CAAC,CAAC,GAAG,EAAEJ,eAAeC,MAAM,EAAE,CAAC,EAAE;YAC/BG,SAAS;QACX;QACA,WAAW;YACT,CAAC,CAAC,GAAG,EAAEJ,eAAeE,OAAO,EAAE,CAAC,EAAE;gBAChCE,SAAS;YACX;YACA,CAAC,CAAC,GAAG,EAAEJ,eAAeC,MAAM,EAAE,CAAC,EAAE;gBAC/BG,SAAS;YACX;QACF;IACF,CAAA,EAAG;AAEH,OAAO,MAAMQ,mBAAmB,IAAqB,CAAA;QACnD,cAAc;YACZC,QAAQ;YACR,WAAW;gBACTA,QAAQ;YACV;YACA,kBAAkB;gBAChBA,QAAQ;YACV;QACF;IACF,CAAA,EAAG"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/Flex/FlexItem.mixins.ts"],"sourcesContent":["import { GriffelStyle } from '@fluentui/react-components';\n\nconst ALIGN = {\n auto: { alignSelf: 'auto' },\n start: { alignSelf: 'flex-start' },\n end: { alignSelf: 'flex-end' },\n center: { alignSelf: 'center' },\n baseline: { alignSelf: 'baseline' },\n stretch: { alignSelf: 'stretch' },\n};\n\nconst SIZE = {\n half: { flexBasis: '50%' },\n quarter: { flexBasis: '25%' },\n small: { flexBasis: '150px' },\n medium: { flexBasis: '200px' },\n large: { flexBasis: '300px' },\n};\n\nconst align = (value: 'auto' | 'start' | 'end' | 'center' | 'baseline' | 'stretch'): GriffelStyle => ALIGN[value];\n\nconst size = (value: 'half' | 'quarter' | 'small' | 'medium' | 'large'): GriffelStyle => SIZE[value];\n\nconst grow = (flexGrow: boolean | number): GriffelStyle | undefined => {\n if (flexGrow === true) {\n return { flexGrow: 1 };\n } else if (flexGrow) {\n return { flexGrow };\n } else {\n return undefined;\n }\n};\n\nconst shrink = (flexShrink: boolean | number): GriffelStyle | undefined => {\n if (typeof flexShrink === 'number') {\n return { flexShrink };\n } else if (flexShrink === false) {\n return { flexShrink: 0 };\n } else {\n return undefined;\n }\n};\n\nconst pushRow = (): GriffelStyle => ({ marginLeft: 'auto' });\nconst pushColumn = (): GriffelStyle => ({ marginTop: 'auto' });\n\nexport const flexItem = {\n align,\n size,\n grow,\n shrink,\n pushRow,\n pushColumn,\n};\n"],"names":["ALIGN","auto","alignSelf","start","end","center","baseline","stretch","SIZE","half","flexBasis","quarter","small","medium","large","align","value","size","grow","flexGrow","undefined","shrink","flexShrink","pushRow","marginLeft","pushColumn","marginTop","flexItem"],"mappings":"AAEA,MAAMA,QAAQ;IACZC,MAAM;QAAEC,WAAW;IAAO;IAC1BC,OAAO;QAAED,WAAW;IAAa;IACjCE,KAAK;QAAEF,WAAW;IAAW;IAC7BG,QAAQ;QAAEH,WAAW;IAAS;IAC9BI,UAAU;QAAEJ,WAAW;IAAW;IAClCK,SAAS;QAAEL,WAAW;IAAU;AAClC;AAEA,MAAMM,OAAO;IACXC,MAAM;QAAEC,WAAW;IAAM;IACzBC,SAAS;QAAED,WAAW;IAAM;IAC5BE,OAAO;QAAEF,WAAW;IAAQ;IAC5BG,QAAQ;QAAEH,WAAW;IAAQ;IAC7BI,OAAO;QAAEJ,WAAW;IAAQ;AAC9B;AAEA,MAAMK,QAAQ,CAACC,QAAsFhB,KAAK,CAACgB,MAAM;AAEjH,MAAMC,OAAO,CAACD,QAA2ER,IAAI,CAACQ,MAAM;AAEpG,MAAME,OAAO,CAACC;IACZ,IAAIA,aAAa,MAAM;QACrB,OAAO;YAAEA,UAAU;QAAE;IACvB,OAAO,IAAIA,UAAU;QACnB,OAAO;YAAEA;QAAS;IACpB,OAAO;QACL,OAAOC;IACT;AACF;AAEA,MAAMC,SAAS,CAACC;IACd,IAAI,OAAOA,eAAe,UAAU;QAClC,OAAO;YAAEA;QAAW;IACtB,OAAO,IAAIA,eAAe,OAAO;QAC/B,OAAO;YAAEA,YAAY;QAAE;IACzB,OAAO;QACL,OAAOF;IACT;AACF;AAEA,MAAMG,UAAU,IAAqB,CAAA;QAAEC,YAAY;IAAO,CAAA;AAC1D,MAAMC,aAAa,IAAqB,CAAA;QAAEC,WAAW;IAAO,CAAA;AAE5D,OAAO,MAAMC,WAAW;IACtBZ;IACAE;IACAC;IACAG;IACAE;IACAE;AACF,EAAE"}
|
|
1
|
+
{"version":3,"sources":["../src/components/Flex/FlexItem.mixins.ts"],"sourcesContent":["import type { GriffelStyle } from '@fluentui/react-components';\n\nconst ALIGN = {\n auto: { alignSelf: 'auto' },\n start: { alignSelf: 'flex-start' },\n end: { alignSelf: 'flex-end' },\n center: { alignSelf: 'center' },\n baseline: { alignSelf: 'baseline' },\n stretch: { alignSelf: 'stretch' },\n};\n\nconst SIZE = {\n half: { flexBasis: '50%' },\n quarter: { flexBasis: '25%' },\n small: { flexBasis: '150px' },\n medium: { flexBasis: '200px' },\n large: { flexBasis: '300px' },\n};\n\nconst align = (value: 'auto' | 'start' | 'end' | 'center' | 'baseline' | 'stretch'): GriffelStyle => ALIGN[value];\n\nconst size = (value: 'half' | 'quarter' | 'small' | 'medium' | 'large'): GriffelStyle => SIZE[value];\n\nconst grow = (flexGrow: boolean | number): GriffelStyle | undefined => {\n if (flexGrow === true) {\n return { flexGrow: 1 };\n } else if (flexGrow) {\n return { flexGrow };\n } else {\n return undefined;\n }\n};\n\nconst shrink = (flexShrink: boolean | number): GriffelStyle | undefined => {\n if (typeof flexShrink === 'number') {\n return { flexShrink };\n } else if (flexShrink === false) {\n return { flexShrink: 0 };\n } else {\n return undefined;\n }\n};\n\nconst pushRow = (): GriffelStyle => ({ marginLeft: 'auto' });\nconst pushColumn = (): GriffelStyle => ({ marginTop: 'auto' });\n\nexport const flexItem = {\n align,\n size,\n grow,\n shrink,\n pushRow,\n pushColumn,\n};\n"],"names":["ALIGN","auto","alignSelf","start","end","center","baseline","stretch","SIZE","half","flexBasis","quarter","small","medium","large","align","value","size","grow","flexGrow","undefined","shrink","flexShrink","pushRow","marginLeft","pushColumn","marginTop","flexItem"],"mappings":"AAEA,MAAMA,QAAQ;IACZC,MAAM;QAAEC,WAAW;IAAO;IAC1BC,OAAO;QAAED,WAAW;IAAa;IACjCE,KAAK;QAAEF,WAAW;IAAW;IAC7BG,QAAQ;QAAEH,WAAW;IAAS;IAC9BI,UAAU;QAAEJ,WAAW;IAAW;IAClCK,SAAS;QAAEL,WAAW;IAAU;AAClC;AAEA,MAAMM,OAAO;IACXC,MAAM;QAAEC,WAAW;IAAM;IACzBC,SAAS;QAAED,WAAW;IAAM;IAC5BE,OAAO;QAAEF,WAAW;IAAQ;IAC5BG,QAAQ;QAAEH,WAAW;IAAQ;IAC7BI,OAAO;QAAEJ,WAAW;IAAQ;AAC9B;AAEA,MAAMK,QAAQ,CAACC,QAAsFhB,KAAK,CAACgB,MAAM;AAEjH,MAAMC,OAAO,CAACD,QAA2ER,IAAI,CAACQ,MAAM;AAEpG,MAAME,OAAO,CAACC;IACZ,IAAIA,aAAa,MAAM;QACrB,OAAO;YAAEA,UAAU;QAAE;IACvB,OAAO,IAAIA,UAAU;QACnB,OAAO;YAAEA;QAAS;IACpB,OAAO;QACL,OAAOC;IACT;AACF;AAEA,MAAMC,SAAS,CAACC;IACd,IAAI,OAAOA,eAAe,UAAU;QAClC,OAAO;YAAEA;QAAW;IACtB,OAAO,IAAIA,eAAe,OAAO;QAC/B,OAAO;YAAEA,YAAY;QAAE;IACzB,OAAO;QACL,OAAOF;IACT;AACF;AAEA,MAAMG,UAAU,IAAqB,CAAA;QAAEC,YAAY;IAAO,CAAA;AAC1D,MAAMC,aAAa,IAAqB,CAAA;QAAEC,WAAW;IAAO,CAAA;AAE5D,OAAO,MAAMC,WAAW;IACtBZ;IACAE;IACAC;IACAG;IACAE;IACAE;AACF,EAAE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/FormField/FormFieldShim.tsx"],"sourcesContent":["'use client';\n\nimport {\n
|
|
1
|
+
{"version":3,"sources":["../src/components/FormField/FormFieldShim.tsx"],"sourcesContent":["'use client';\n\nimport type { FieldProps } from '@fluentui/react-components';\nimport {\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 =>\n React.cloneElement(child, {\n ...fieldControlProps,\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n ...(child.props as any),\n });\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;AAGA,SACEA,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,kCACpBjB,MAAMkB,YAAY,CAACF,OAAO;gBACxB,GAAGC,iBAAiB;gBACpB,8DAA8D;gBAC9D,GAAID,MAAMb,KAAK;YACjB;IACJ,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 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/Grid/Grid.mixins.ts"],"sourcesContent":["import { GriffelStyle } from '@fluentui/react-components';\n\nconst getCSSTemplateValue = (template: string | number): string => {\n const templateAsNumber = Number(template);\n\n return !isNaN(templateAsNumber) && templateAsNumber > 0 ? `repeat(${template}, 1fr)` : String(template);\n};\n\nconst columns = (template: string): GriffelStyle => ({\n gridTemplateColumns: getCSSTemplateValue(template),\n});\n\nconst rows = (template: string): GriffelStyle => ({\n gridTemplateRows: getCSSTemplateValue(template),\n});\n\nexport const grid = {\n columns,\n rows,\n};\n"],"names":["getCSSTemplateValue","template","templateAsNumber","Number","isNaN","String","columns","gridTemplateColumns","rows","gridTemplateRows","grid"],"mappings":"AAEA,MAAMA,sBAAsB,CAACC;IAC3B,MAAMC,mBAAmBC,OAAOF;IAEhC,OAAO,CAACG,MAAMF,qBAAqBA,mBAAmB,IAAI,CAAC,OAAO,EAAED,SAAS,MAAM,CAAC,GAAGI,OAAOJ;AAChG;AAEA,MAAMK,UAAU,CAACL,WAAoC,CAAA;QACnDM,qBAAqBP,oBAAoBC;IAC3C,CAAA;AAEA,MAAMO,OAAO,CAACP,WAAoC,CAAA;QAChDQ,kBAAkBT,oBAAoBC;IACxC,CAAA;AAEA,OAAO,MAAMS,OAAO;IAClBJ;IACAE;AACF,EAAE"}
|
|
1
|
+
{"version":3,"sources":["../src/components/Grid/Grid.mixins.ts"],"sourcesContent":["import type { GriffelStyle } from '@fluentui/react-components';\n\nconst getCSSTemplateValue = (template: string | number): string => {\n const templateAsNumber = Number(template);\n\n return !isNaN(templateAsNumber) && templateAsNumber > 0 ? `repeat(${template}, 1fr)` : String(template);\n};\n\nconst columns = (template: string): GriffelStyle => ({\n gridTemplateColumns: getCSSTemplateValue(template),\n});\n\nconst rows = (template: string): GriffelStyle => ({\n gridTemplateRows: getCSSTemplateValue(template),\n});\n\nexport const grid = {\n columns,\n rows,\n};\n"],"names":["getCSSTemplateValue","template","templateAsNumber","Number","isNaN","String","columns","gridTemplateColumns","rows","gridTemplateRows","grid"],"mappings":"AAEA,MAAMA,sBAAsB,CAACC;IAC3B,MAAMC,mBAAmBC,OAAOF;IAEhC,OAAO,CAACG,MAAMF,qBAAqBA,mBAAmB,IAAI,CAAC,OAAO,EAAED,SAAS,MAAM,CAAC,GAAGI,OAAOJ;AAChG;AAEA,MAAMK,UAAU,CAACL,WAAoC,CAAA;QACnDM,qBAAqBP,oBAAoBC;IAC3C,CAAA;AAEA,MAAMO,OAAO,CAACP,WAAoC,CAAA;QAChDQ,kBAAkBT,oBAAoBC;IACxC,CAAA;AAEA,OAAO,MAAMS,OAAO;IAClBJ;IACAE;AACF,EAAE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/Input/Input.mixins.ts"],"sourcesContent":["import { GriffelStyle
|
|
1
|
+
{"version":3,"sources":["../src/components/Input/Input.mixins.ts"],"sourcesContent":["import type { GriffelStyle } from '@fluentui/react-components';\nimport { tokens } from '@fluentui/react-components';\n\nconst fluid = (): GriffelStyle => ({ width: '100%' });\n\nconst error = (): GriffelStyle => ({ border: `1px solid ${tokens.colorPaletteRedBorderActive}` });\n\nconst errorIndicator = (): GriffelStyle => ({\n color: tokens.colorPaletteRedBorderActive,\n});\n\nconst successIndicator = (): GriffelStyle => ({\n color: tokens.colorPaletteGreenForeground1,\n});\n\nexport const input = {\n error,\n errorIndicator,\n fluid,\n successIndicator,\n};\n"],"names":["tokens","fluid","width","error","border","colorPaletteRedBorderActive","errorIndicator","color","successIndicator","colorPaletteGreenForeground1","input"],"mappings":"AACA,SAASA,MAAM,QAAQ,6BAA6B;AAEpD,MAAMC,QAAQ,IAAqB,CAAA;QAAEC,OAAO;IAAO,CAAA;AAEnD,MAAMC,QAAQ,IAAqB,CAAA;QAAEC,QAAQ,CAAC,UAAU,EAAEJ,OAAOK,2BAA2B,EAAE;IAAC,CAAA;AAE/F,MAAMC,iBAAiB,IAAqB,CAAA;QAC1CC,OAAOP,OAAOK,2BAA2B;IAC3C,CAAA;AAEA,MAAMG,mBAAmB,IAAqB,CAAA;QAC5CD,OAAOP,OAAOS,4BAA4B;IAC5C,CAAA;AAEA,OAAO,MAAMC,QAAQ;IACnBP;IACAG;IACAL;IACAO;AACF,EAAE"}
|
|
@@ -1 +1 @@
|
|
|
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 {
|
|
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 type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { getIntrinsicElementProps, slot, assertSlots } 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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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/List/List/List.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { ComponentProps, ComponentState, Slot, SelectionMode, SelectionItemId } from '@fluentui/react-utilities';\nimport type { ListSelectionState } from '../hooks/types';\n\ntype ListLayout = 'horizontal' | 'vertical' | 'grid';\n\nexport type ListSlots = {\n root: NonNullable<Slot<'ul', 'div' | 'ol'>>;\n};\n\n/**\n * List Props\n */\nexport type ListProps = ComponentProps<ListSlots> & {\n /**\n * Defines the layout orientation.\n *\n * @default vertical\n */\n layout?: ListLayout;\n\n /**\n * Defines if the list should be navigable. Set this to true when adding an `onClick` handler.\n *\n * @default false\n */\n navigable?: boolean;\n\n /**\n * Defines if the List items should be selectable.\n *\n * @default false\n */\n selectable?: boolean;\n\n /**\n * Defines selection mode for the List.\n *\n * @default single\n */\n selectionMode?: SelectionMode;\n\n /**\n * For controlled selection - defines selected items\n */\n selectedItems?: SelectionItemId[];\n\n /**\n * For uncontrolled selection - defines default selected items\n */\n defaultSelectedItems?: SelectionItemId[];\n\n /**\n * Callback for selection change events, used for both controlled and uncontrolled (as notification)\n */\n // eslint-disable-next-line @nx/workspace-consistent-callback-type -- can't change type of existing callback\n onSelectionChange?: (event: React.SyntheticEvent, data: { selectedItems: SelectionItemId[] }) => void;\n\n /**\n * Truncates header\n *\n * @default false\n */\n truncateHeader?: boolean;\n\n /**\n * Truncates content\n *\n * @default false\n */\n truncateContent?: boolean;\n};\n\nexport type ListContextValue = {\n navigable: boolean;\n selection?: ListSelectionState;\n as?: 'div' | 'ol' | 'ul';\n truncateHeader?: ListProps['truncateHeader'];\n truncateContent?: ListProps['truncateContent'];\n};\n\nexport type ListContextValues = {\n listContext: ListContextValue;\n};\n\n/**\n * State used in rendering List\n */\nexport type ListState = ComponentState<ListSlots> & Required<Pick<ListProps, 'layout'>> & ListContextValue;\n"],"names":[
|
|
1
|
+
{"version":3,"sources":["../src/components/List/List/List.types.ts"],"sourcesContent":["import type * as React from 'react';\nimport type { ComponentProps, ComponentState, Slot, SelectionMode, SelectionItemId } from '@fluentui/react-utilities';\nimport type { ListSelectionState } from '../hooks/types';\n\ntype ListLayout = 'horizontal' | 'vertical' | 'grid';\n\nexport type ListSlots = {\n root: NonNullable<Slot<'ul', 'div' | 'ol'>>;\n};\n\n/**\n * List Props\n */\nexport type ListProps = ComponentProps<ListSlots> & {\n /**\n * Defines the layout orientation.\n *\n * @default vertical\n */\n layout?: ListLayout;\n\n /**\n * Defines if the list should be navigable. Set this to true when adding an `onClick` handler.\n *\n * @default false\n */\n navigable?: boolean;\n\n /**\n * Defines if the List items should be selectable.\n *\n * @default false\n */\n selectable?: boolean;\n\n /**\n * Defines selection mode for the List.\n *\n * @default single\n */\n selectionMode?: SelectionMode;\n\n /**\n * For controlled selection - defines selected items\n */\n selectedItems?: SelectionItemId[];\n\n /**\n * For uncontrolled selection - defines default selected items\n */\n defaultSelectedItems?: SelectionItemId[];\n\n /**\n * Callback for selection change events, used for both controlled and uncontrolled (as notification)\n */\n // eslint-disable-next-line @nx/workspace-consistent-callback-type -- can't change type of existing callback\n onSelectionChange?: (event: React.SyntheticEvent, data: { selectedItems: SelectionItemId[] }) => void;\n\n /**\n * Truncates header\n *\n * @default false\n */\n truncateHeader?: boolean;\n\n /**\n * Truncates content\n *\n * @default false\n */\n truncateContent?: boolean;\n};\n\nexport type ListContextValue = {\n navigable: boolean;\n selection?: ListSelectionState;\n as?: 'div' | 'ol' | 'ul';\n truncateHeader?: ListProps['truncateHeader'];\n truncateContent?: ListProps['truncateContent'];\n};\n\nexport type ListContextValues = {\n listContext: ListContextValue;\n};\n\n/**\n * State used in rendering List\n */\nexport type ListState = ComponentState<ListSlots> & Required<Pick<ListProps, 'layout'>> & ListContextValue;\n"],"names":[],"mappings":"AAqFA;;CAEC,GACD,WAA2G"}
|
|
@@ -1 +1 @@
|
|
|
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"}
|
|
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 type { 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"}
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
'use client';
|
|
2
|
-
import * as React from 'react';
|
|
3
2
|
import { getIntrinsicElementProps, slot, useControllableState, useEventCallback } from '@fluentui/react-utilities';
|
|
4
3
|
import { useArrowNavigationGroup } from '@fluentui/react-tabster';
|
|
5
4
|
import { useListSelection } from '../hooks/useListSelection';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/List/List/useList.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport {
|
|
1
|
+
{"version":3,"sources":["../src/components/List/List/useList.ts"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport type { OnSelectionChangeData } from '@fluentui/react-utilities';\nimport { getIntrinsicElementProps, slot, useControllableState, useEventCallback } from '@fluentui/react-utilities';\nimport { useArrowNavigationGroup } from '@fluentui/react-tabster';\nimport type { 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":["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;AAIA,SAASA,wBAAwB,EAAEC,IAAI,EAAEC,oBAAoB,EAAEC,gBAAgB,QAAQ,4BAA4B;AACnH,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 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/List/List/useListContextValues.ts"],"sourcesContent":["import { ListContextValues, ListState } from './List.types';\n\nexport function useListContextValues_unstable(state: ListState): ListContextValues {\n const { navigable, selection, as, truncateContent, truncateHeader } = state;\n\n const listContext = {\n navigable,\n selection,\n as,\n truncateContent,\n truncateHeader,\n };\n\n return {\n listContext,\n };\n}\n"],"names":["useListContextValues_unstable","state","navigable","selection","as","truncateContent","truncateHeader","listContext"],"mappings":"AAEA,OAAO,SAASA,8BAA8BC,KAAgB;IAC5D,MAAM,EAAEC,SAAS,EAAEC,SAAS,EAAEC,EAAE,EAAEC,eAAe,EAAEC,cAAc,EAAE,GAAGL;IAEtE,MAAMM,cAAc;QAClBL;QACAC;QACAC;QACAC;QACAC;IACF;IAEA,OAAO;QACLC;IACF;AACF"}
|
|
1
|
+
{"version":3,"sources":["../src/components/List/List/useListContextValues.ts"],"sourcesContent":["import type { ListContextValues, ListState } from './List.types';\n\nexport function useListContextValues_unstable(state: ListState): ListContextValues {\n const { navigable, selection, as, truncateContent, truncateHeader } = state;\n\n const listContext = {\n navigable,\n selection,\n as,\n truncateContent,\n truncateHeader,\n };\n\n return {\n listContext,\n };\n}\n"],"names":["useListContextValues_unstable","state","navigable","selection","as","truncateContent","truncateHeader","listContext"],"mappings":"AAEA,OAAO,SAASA,8BAA8BC,KAAgB;IAC5D,MAAM,EAAEC,SAAS,EAAEC,SAAS,EAAEC,EAAE,EAAEC,eAAe,EAAEC,cAAc,EAAE,GAAGL;IAEtE,MAAMM,cAAc;QAClBL;QACAC;QACAC;QACAC;QACAC;IACF;IAEA,OAAO;QACLC;IACF;AACF"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/List/ListItem/ListItem.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { ItemLayout } from '../../ItemLayout';\n\nexport type ListItemSlots = {\n root: NonNullable<Slot<'li', 'div'>>;\n media?: React.ComponentProps<typeof ItemLayout>['startMedia'];\n header?: React.ComponentProps<typeof ItemLayout>['header'];\n contentWrapper?: React.ComponentProps<typeof ItemLayout>['contentWrapper'];\n headerMedia?: React.ComponentProps<typeof ItemLayout>['headerMedia'];\n contentMedia?: React.ComponentProps<typeof ItemLayout>['contentMedia'];\n endMedia?: React.ComponentProps<typeof ItemLayout>['endMedia'];\n};\n\n/**\n * ListItem Props\n */\nexport type ListItemProps = ComponentProps<ListItemSlots> & {\n value?: string | number;\n truncateHeader?: boolean;\n truncateContent?: boolean;\n};\n\n/**\n * State used in rendering ListItem\n */\nexport type ListItemState = ComponentState<ListItemSlots> & {\n selectable?: boolean;\n selected?: boolean;\n navigable?: boolean;\n truncateHeader?: boolean;\n truncateContent?: boolean;\n};\n"],"names":[
|
|
1
|
+
{"version":3,"sources":["../src/components/List/ListItem/ListItem.types.ts"],"sourcesContent":["import type * as React from 'react';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { ItemLayout } from '../../ItemLayout';\n\nexport type ListItemSlots = {\n root: NonNullable<Slot<'li', 'div'>>;\n media?: React.ComponentProps<typeof ItemLayout>['startMedia'];\n header?: React.ComponentProps<typeof ItemLayout>['header'];\n contentWrapper?: React.ComponentProps<typeof ItemLayout>['contentWrapper'];\n headerMedia?: React.ComponentProps<typeof ItemLayout>['headerMedia'];\n contentMedia?: React.ComponentProps<typeof ItemLayout>['contentMedia'];\n endMedia?: React.ComponentProps<typeof ItemLayout>['endMedia'];\n};\n\n/**\n * ListItem Props\n */\nexport type ListItemProps = ComponentProps<ListItemSlots> & {\n value?: string | number;\n truncateHeader?: boolean;\n truncateContent?: boolean;\n};\n\n/**\n * State used in rendering ListItem\n */\nexport type ListItemState = ComponentState<ListItemSlots> & {\n selectable?: boolean;\n selected?: boolean;\n navigable?: boolean;\n truncateHeader?: boolean;\n truncateContent?: boolean;\n};\n"],"names":[],"mappings":"AAuBA;;CAEC,GACD,WAME"}
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
import { useARIAButtonProps } from '@fluentui/react-aria';
|
|
3
3
|
import { getIntrinsicElementProps, slot, useEventCallback, useId } from '@fluentui/react-utilities';
|
|
4
|
-
import * as React from 'react';
|
|
5
4
|
import { useListContext_unstable } from '../List/listContext';
|
|
6
5
|
const DEFAULT_ROOT_EL_TYPE = 'li';
|
|
7
6
|
function validateProperElementTypes(parentRenderedAs, renderedAs) {
|
|
@@ -1 +1 @@
|
|
|
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","
|
|
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 type * 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","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 +1 @@
|
|
|
1
|
-
|
|
1
|
+
export { };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/List/hooks/types.ts"],"sourcesContent":["import { SelectionItemId } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nexport type ListSelectionState = {\n isSelected: (item: string | number) => boolean;\n toggleItem: (e: React.SyntheticEvent, id: string | number) => void;\n deselectItem: (e: React.SyntheticEvent, id: string | number) => void;\n selectItem: (e: React.SyntheticEvent, id: string | number) => void;\n clearSelection: (e: React.SyntheticEvent) => void;\n toggleAllItems: (e: React.SyntheticEvent, itemIds: string[] | number[]) => void;\n setSelectedItems: React.Dispatch<React.SetStateAction<Iterable<SelectionItemId>>>;\n selectedItems: SelectionItemId[];\n};\n"],"names":[
|
|
1
|
+
{"version":3,"sources":["../src/components/List/hooks/types.ts"],"sourcesContent":["import type { SelectionItemId } from '@fluentui/react-utilities';\nimport type * as React from 'react';\n\nexport type ListSelectionState = {\n isSelected: (item: string | number) => boolean;\n toggleItem: (e: React.SyntheticEvent, id: string | number) => void;\n deselectItem: (e: React.SyntheticEvent, id: string | number) => void;\n selectItem: (e: React.SyntheticEvent, id: string | number) => void;\n clearSelection: (e: React.SyntheticEvent) => void;\n toggleAllItems: (e: React.SyntheticEvent, itemIds: string[] | number[]) => void;\n setSelectedItems: React.Dispatch<React.SetStateAction<Iterable<SelectionItemId>>>;\n selectedItems: SelectionItemId[];\n};\n"],"names":[],"mappings":"AAGA,WASE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/List/hooks/useListSelection.tsx"],"sourcesContent":["'use client';\n\nimport { SelectionHookParams
|
|
1
|
+
{"version":3,"sources":["../src/components/List/hooks/useListSelection.tsx"],"sourcesContent":["'use client';\n\nimport type { SelectionHookParams } from '@fluentui/react-utilities';\nimport { useControllableState, useEventCallback, useSelection } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport type { ListSelectionState } from './types';\n\nexport function useListSelection(options: SelectionHookParams = { selectionMode: 'multiselect' }): ListSelectionState {\n const { selectionMode, defaultSelectedItems, onSelectionChange } = options;\n\n const [selectedItems, setSelectedItems] = useControllableState({\n state: options.selectedItems,\n defaultState: defaultSelectedItems,\n initialState: [],\n });\n\n const [selected, selectionMethods] = useSelection({\n selectionMode,\n defaultSelectedItems,\n selectedItems,\n onSelectionChange: (e, data) => {\n setSelectedItems(data.selectedItems);\n onSelectionChange?.(e, data);\n },\n });\n\n const toggleItem: ListSelectionState['toggleItem'] = useEventCallback((e, itemId) =>\n selectionMethods.toggleItem(e, itemId),\n );\n\n const toggleAllItems: ListSelectionState['toggleAllItems'] = useEventCallback((e, itemIds) => {\n selectionMethods.toggleAllItems(e, itemIds);\n });\n\n const deselectItem: ListSelectionState['deselectItem'] = useEventCallback((e, itemId: string | number) =>\n selectionMethods.deselectItem(e, itemId),\n );\n\n const selectItem: ListSelectionState['selectItem'] = useEventCallback((e, itemId: string | number) =>\n selectionMethods.selectItem(e, itemId),\n );\n\n const clearSelection: ListSelectionState['clearSelection'] = useEventCallback(e => selectionMethods.clearItems(e));\n\n const selectedArray = React.useMemo(() => Array.from(selected), [selected]);\n\n return {\n selectedItems: selectedArray,\n toggleItem,\n toggleAllItems,\n deselectItem,\n selectItem,\n setSelectedItems,\n isSelected: (id: string | number) => selectionMethods.isSelected(id),\n clearSelection,\n };\n}\n"],"names":["useControllableState","useEventCallback","useSelection","React","useListSelection","options","selectionMode","defaultSelectedItems","onSelectionChange","selectedItems","setSelectedItems","state","defaultState","initialState","selected","selectionMethods","e","data","toggleItem","itemId","toggleAllItems","itemIds","deselectItem","selectItem","clearSelection","clearItems","selectedArray","useMemo","Array","from","isSelected","id"],"mappings":"AAAA;AAGA,SAASA,oBAAoB,EAAEC,gBAAgB,EAAEC,YAAY,QAAQ,4BAA4B;AACjG,YAAYC,WAAW,QAAQ;AAG/B,OAAO,SAASC,iBAAiBC,UAA+B;IAAEC,eAAe;AAAc,CAAC;IAC9F,MAAM,EAAEA,aAAa,EAAEC,oBAAoB,EAAEC,iBAAiB,EAAE,GAAGH;IAEnE,MAAM,CAACI,eAAeC,iBAAiB,GAAGV,qBAAqB;QAC7DW,OAAON,QAAQI,aAAa;QAC5BG,cAAcL;QACdM,cAAc,EAAE;IAClB;IAEA,MAAM,CAACC,UAAUC,iBAAiB,GAAGb,aAAa;QAChDI;QACAC;QACAE;QACAD,mBAAmB,CAACQ,GAAGC;YACrBP,iBAAiBO,KAAKR,aAAa;YACnCD,8BAAAA,wCAAAA,kBAAoBQ,GAAGC;QACzB;IACF;IAEA,MAAMC,aAA+CjB,iBAAiB,CAACe,GAAGG,SACxEJ,iBAAiBG,UAAU,CAACF,GAAGG;IAGjC,MAAMC,iBAAuDnB,iBAAiB,CAACe,GAAGK;QAChFN,iBAAiBK,cAAc,CAACJ,GAAGK;IACrC;IAEA,MAAMC,eAAmDrB,iBAAiB,CAACe,GAAGG,SAC5EJ,iBAAiBO,YAAY,CAACN,GAAGG;IAGnC,MAAMI,aAA+CtB,iBAAiB,CAACe,GAAGG,SACxEJ,iBAAiBQ,UAAU,CAACP,GAAGG;IAGjC,MAAMK,iBAAuDvB,iBAAiBe,CAAAA,IAAKD,iBAAiBU,UAAU,CAACT;IAE/G,MAAMU,gBAAgBvB,MAAMwB,OAAO,CAAC,IAAMC,MAAMC,IAAI,CAACf,WAAW;QAACA;KAAS;IAE1E,OAAO;QACLL,eAAeiB;QACfR;QACAE;QACAE;QACAC;QACAb;QACAoB,YAAY,CAACC,KAAwBhB,iBAAiBe,UAAU,CAACC;QACjEP;IACF;AACF"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/Slider/Slider.mixins.ts"],"sourcesContent":["import { GriffelStyle } from '@fluentui/react-components';\n\nconst fluid = (): GriffelStyle => ({ width: '100%' });\n\nexport const slider = {\n fluid,\n};\n"],"names":["fluid","width","slider"],"mappings":"AAEA,MAAMA,QAAQ,IAAqB,CAAA;QAAEC,OAAO;IAAO,CAAA;AAEnD,OAAO,MAAMC,SAAS;IACpBF;AACF,EAAE"}
|
|
1
|
+
{"version":3,"sources":["../src/components/Slider/Slider.mixins.ts"],"sourcesContent":["import type { GriffelStyle } from '@fluentui/react-components';\n\nconst fluid = (): GriffelStyle => ({ width: '100%' });\n\nexport const slider = {\n fluid,\n};\n"],"names":["fluid","width","slider"],"mappings":"AAEA,MAAMA,QAAQ,IAAqB,CAAA;QAAEC,OAAO;IAAO,CAAA;AAEnD,OAAO,MAAMC,SAAS;IACpBF;AACF,EAAE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/Spinner/SpinnerMigration.mixins.ts"],"sourcesContent":["import { GriffelStyle
|
|
1
|
+
{"version":3,"sources":["../src/components/Spinner/SpinnerMigration.mixins.ts"],"sourcesContent":["import type { GriffelStyle } from '@fluentui/react-components';\nimport { tokens, labelClassNames } from '@fluentui/react-components';\n\nconst v0Inline = (): GriffelStyle => ({ display: 'inline-flex' });\n\nconst v0SpinnerLabelStyle = (): GriffelStyle => ({\n [`& .${labelClassNames.root}`]: {\n fontSize: '14px',\n fontWeight: tokens.fontWeightMedium,\n },\n});\n\nexport const spinner = {\n v0Inline,\n v0SpinnerLabelStyle,\n};\n"],"names":["tokens","labelClassNames","v0Inline","display","v0SpinnerLabelStyle","root","fontSize","fontWeight","fontWeightMedium","spinner"],"mappings":"AACA,SAASA,MAAM,EAAEC,eAAe,QAAQ,6BAA6B;AAErE,MAAMC,WAAW,IAAqB,CAAA;QAAEC,SAAS;IAAc,CAAA;AAE/D,MAAMC,sBAAsB,IAAqB,CAAA;QAC/C,CAAC,CAAC,GAAG,EAAEH,gBAAgBI,IAAI,EAAE,CAAC,EAAE;YAC9BC,UAAU;YACVC,YAAYP,OAAOQ,gBAAgB;QACrC;IACF,CAAA;AAEA,OAAO,MAAMC,UAAU;IACrBP;IACAE;AACF,EAAE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/StyledText/StyledText.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\n'use client';\n\nimport * as React from 'react';\nimport {
|
|
1
|
+
{"version":3,"sources":["../src/components/StyledText/StyledText.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\n'use client';\n\nimport * as React from 'react';\nimport type { Slot, ComponentProps } from '@fluentui/react-components';\nimport { getIntrinsicElementProps, mergeClasses, slot } from '@fluentui/react-components';\nimport { useSizeStyles, useStyles, useWeightStyles } from './StyledText.styles';\n\nexport type StyledTextSlots = {\n root: Slot<'span', 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'pre' | 'time'>;\n};\n\nexport type StyledTextProps = ComponentProps<StyledTextSlots> & {\n /**\n * Aligns text based on the parent container.\n */\n align?: 'start' | 'center' | 'end' | 'justify';\n\n /**\n * At mentions can be formatted to draw users' attention.\n * Mentions for \"me\" can be formatted to appear differently.\n */\n atMention?: 'me' | boolean;\n\n /**\n * Set as disabled StyledText component\n */\n disabled?: boolean;\n\n /**\n * Set as error StyledText component\n */\n error?: boolean;\n\n /**\n * The StyledText can appear more important and draw user's attention\n */\n important?: boolean;\n\n /**\n * Applies font size and line height based on the theme tokens.\n */\n size?:\n | 'smaller'\n | 'small'\n | 'medium'\n | 'large'\n | 'large500'\n | 'larger'\n | 'largest'\n | 100\n | 200\n | 300\n | 400\n | 500\n | 600\n | 700;\n\n /**\n * Set as success StyledText component\n */\n success?: boolean;\n\n /**\n * The text can signify a temporary state\n */\n temporary?: boolean;\n\n /**\n * Set as timestamp StyledText component\n */\n timestamp?: boolean;\n\n /**\n * Truncate overflowing text for block displays.\n */\n truncate?: boolean;\n\n /**\n * Applies font weight to the content.\n */\n weight?: 'light' | 'semilight' | 'regular' | 'medium' | 'semibold' | 'bold';\n\n /**\n * Wraps the text content on white spaces.\n *\n * @default true\n */\n wrap?: boolean;\n};\n\nexport const styledTextClassName = 'fui-StyledText';\n\nconst sizeMap: Record<string, 'base100' | 'base200' | 'base300' | 'base400' | 'base500' | 'base600' | 'hero700'> = {\n '100': 'base100',\n '200': 'base200',\n '300': 'base300',\n '400': 'base400',\n '500': 'base500',\n '600': 'base600',\n '700': 'hero700',\n smaller: 'base100',\n small: 'base200',\n medium: 'base300',\n large: 'base400',\n large500: 'base500',\n larger: 'base600',\n largest: 'hero700',\n};\n\nexport const StyledText = React.forwardRef<HTMLSpanElement, StyledTextProps>((props, ref) => {\n const {\n align,\n atMention,\n disabled,\n error,\n important,\n success,\n temporary,\n timestamp,\n truncate,\n weight,\n wrap = true,\n } = props;\n\n const dir = typeof props.children === 'string' ? 'auto' : undefined;\n\n const sizeStyles = useSizeStyles();\n const weightStyles = useWeightStyles();\n const styles = useStyles();\n\n const size = props.size ? sizeMap[props.size] : props.size;\n\n const RootSlot = slot.always(\n getIntrinsicElementProps('span', {\n ref,\n ...props,\n dir,\n className: mergeClasses(\n styledTextClassName,\n size && sizeStyles[size],\n weight && weightStyles[weight],\n wrap === false && styles.nowrap,\n truncate && styles.truncate,\n align === 'center' && styles.alignCenter,\n align === 'end' && styles.alignEnd,\n align === 'justify' && styles.alignJustify,\n\n atMention && styles.mention,\n atMention === 'me' && styles.mentionMe,\n disabled && styles.disabled,\n error && styles.error,\n important && styles.important,\n success && styles.success,\n temporary && styles.temporary,\n timestamp && styles.timestamp,\n props.className,\n ),\n }),\n { elementType: 'span' },\n );\n\n return <RootSlot />;\n});\n\nStyledText.displayName = 'StyledText';\n"],"names":["React","getIntrinsicElementProps","mergeClasses","slot","useSizeStyles","useStyles","useWeightStyles","styledTextClassName","sizeMap","smaller","small","medium","large","large500","larger","largest","StyledText","forwardRef","props","ref","align","atMention","disabled","error","important","success","temporary","timestamp","truncate","weight","wrap","dir","children","undefined","sizeStyles","weightStyles","styles","size","RootSlot","always","className","nowrap","alignCenter","alignEnd","alignJustify","mention","mentionMe","elementType","displayName"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD,GAEjD;;AAEA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,wBAAwB,EAAEC,YAAY,EAAEC,IAAI,QAAQ,6BAA6B;AAC1F,SAASC,aAAa,EAAEC,SAAS,EAAEC,eAAe,QAAQ,sBAAsB;AAqFhF,OAAO,MAAMC,sBAAsB,iBAAiB;AAEpD,MAAMC,UAA6G;IACjH,OAAO;IACP,OAAO;IACP,OAAO;IACP,OAAO;IACP,OAAO;IACP,OAAO;IACP,OAAO;IACPC,SAAS;IACTC,OAAO;IACPC,QAAQ;IACRC,OAAO;IACPC,UAAU;IACVC,QAAQ;IACRC,SAAS;AACX;AAEA,OAAO,MAAMC,2BAAahB,MAAMiB,UAAU,CAAmC,CAACC,OAAOC;IACnF,MAAM,EACJC,KAAK,EACLC,SAAS,EACTC,QAAQ,EACRC,KAAK,EACLC,SAAS,EACTC,OAAO,EACPC,SAAS,EACTC,SAAS,EACTC,QAAQ,EACRC,MAAM,EACNC,OAAO,IAAI,EACZ,GAAGZ;IAEJ,MAAMa,MAAM,OAAOb,MAAMc,QAAQ,KAAK,WAAW,SAASC;IAE1D,MAAMC,aAAa9B;IACnB,MAAM+B,eAAe7B;IACrB,MAAM8B,SAAS/B;IAEf,MAAMgC,OAAOnB,MAAMmB,IAAI,GAAG7B,OAAO,CAACU,MAAMmB,IAAI,CAAC,GAAGnB,MAAMmB,IAAI;IAE1D,MAAMC,WAAWnC,KAAKoC,MAAM,CAC1BtC,yBAAyB,QAAQ;QAC/BkB;QACA,GAAGD,KAAK;QACRa;QACAS,WAAWtC,aACTK,qBACA8B,QAAQH,UAAU,CAACG,KAAK,EACxBR,UAAUM,YAAY,CAACN,OAAO,EAC9BC,SAAS,SAASM,OAAOK,MAAM,EAC/Bb,YAAYQ,OAAOR,QAAQ,EAC3BR,UAAU,YAAYgB,OAAOM,WAAW,EACxCtB,UAAU,SAASgB,OAAOO,QAAQ,EAClCvB,UAAU,aAAagB,OAAOQ,YAAY,EAE1CvB,aAAae,OAAOS,OAAO,EAC3BxB,cAAc,QAAQe,OAAOU,SAAS,EACtCxB,YAAYc,OAAOd,QAAQ,EAC3BC,SAASa,OAAOb,KAAK,EACrBC,aAAaY,OAAOZ,SAAS,EAC7BC,WAAWW,OAAOX,OAAO,EACzBC,aAAaU,OAAOV,SAAS,EAC7BC,aAAaS,OAAOT,SAAS,EAC7BT,MAAMsB,SAAS;IAEnB,IACA;QAAEO,aAAa;IAAO;IAGxB,qBAAO,KAACT;AACV,GAAG;AAEHtB,WAAWgC,WAAW,GAAG"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/Attachment/AttachmentAction.tsx"],"sourcesContent":["'use client';\n\nimport { Button,
|
|
1
|
+
{"version":3,"sources":["../src/components/Attachment/AttachmentAction.tsx"],"sourcesContent":["'use client';\n\nimport type { ButtonProps } from '@fluentui/react-components';\nimport { Button, 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;;;;;;;;;;;;IAWaK,gBAAAA;;;6BAFAD;;;;;iCANwB,6BAA6B;iEAC3C,QAAQ;wCACW,4BAA4B;AAI/D,MAAMA,4BAA4B,uBAAuB;AAEzD,yBAAMC,WAAAA,GAAmBH,OAAMI,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,cAAUd,iDAAAA;IAEhB,MAAMe,cAAchB,OAAMiB,WAAW,CACnCC,CAAAA;QACEA,EAAEC,eAAe;QACjBD,EAAEE,cAAc;QAChBT,YAAAA,QAAAA,YAAAA,KAAAA,IAAAA,KAAAA,IAAAA,QAAUO;IACZ,GACA;QAACP;KAAQ;IAGX,MAAMU,cAAcrB,OAAMiB,WAAW,CACnCC,CAAAA;QACE,IAAIA,EAAEI,GAAG,KAAK,WAAWJ,EAAEI,GAAG,KAAK,KAAK;YACtCJ,EAAEC,eAAe;QACnB;QACAP,YAAAA,QAAAA,YAAAA,KAAAA,IAAAA,KAAAA,IAAAA,QAAUM;IACZ,GACA;QAACN;KAAQ;IAGX,MAAMW,gBAAgBvB,OAAMiB,WAAW,CACrCC,CAAAA;QACE,IAAIA,EAAEI,GAAG,KAAK,WAAWJ,EAAEI,GAAG,KAAK,KAAK;YACtCJ,EAAEC,eAAe;QACnB;QACAN,cAAAA,QAAAA,cAAAA,KAAAA,IAAAA,KAAAA,IAAAA,UAAYK;IACd,GACA;QAACL;KAAU;IAGb,OAAA,WAAA,GACE,OAAA,aAAA,CAACf,uBAAAA,EAAAA;QACCQ,KAAKA;QACLC,WAAWR,iCAAAA,EACTG,2BACAa,QAAQS,IAAI,EACXhB,CAAAA,YAAYC,iBAAAA,CAAgB,IAAMM,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 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/Button/ButtonMigration.mixins.ts"],"sourcesContent":["import { GriffelStyle } from '@fluentui/react-components';\nimport { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';\n\n// class names from v0 - not imported as we do not want to keep depending on v0.\nconst iconClassNames = {\n filled: 'ui-icon__filled',\n outline: 'ui-icon__outline',\n};\n\nexport const v9HoverClasses = (): GriffelStyle => ({\n [`& .${iconFilledClassName}`]: {\n display: 'none',\n },\n [`& .${iconRegularClassName}`]: {\n display: 'inline',\n },\n '&:hover': {\n [`& .${iconFilledClassName}`]: {\n display: 'inline',\n },\n [`& .${iconRegularClassName}`]: {\n display: 'none',\n },\n },\n});\n\nexport const v9Icon = (): GriffelStyle => ({\n // styles that allow to keep consistent size of v9 icon with v0 icon\n '& svg': {\n width: '100%',\n paddingBottom: '100%',\n // negative margin is necessary here for centering v9 icon\n // with v0 button, because of extra spaces that svg contains\n margin: '-4px 0 0 -4px',\n overflow: 'visible',\n },\n ...v9HoverClasses(),\n});\n\nexport const v9CustomSizeIcon = (): GriffelStyle => ({\n '& svg': { overflow: 'visible' },\n ...v9HoverClasses(),\n});\n\nexport const v0Icon = (): GriffelStyle => ({\n [`& .${iconClassNames.outline}`]: {\n display: 'block',\n },\n [`& .${iconClassNames.filled}`]: {\n display: 'none',\n },\n '&:hover': {\n [`& .${iconClassNames.outline}`]: {\n display: 'none',\n },\n [`& .${iconClassNames.filled}`]: {\n display: 'block',\n },\n },\n});\n\nexport const v9DisabledCursor = (): GriffelStyle => ({\n '&:disabled': {\n cursor: 'default',\n '&:hover': {\n cursor: 'default',\n },\n '&:hover:active': {\n cursor: 'default',\n },\n },\n});\n"],"names":["iconFilledClassName","iconRegularClassName","iconClassNames","filled","outline","v9HoverClasses","display","v9Icon","width","paddingBottom","margin","overflow","v9CustomSizeIcon","v0Icon","v9DisabledCursor","cursor"],"mappings":";;;;;;;;;;;UA4Caa;;;oBALAD;;;oBAsBAE;;;IApDAT,cAAAA;;;UAiBAE;;;;4BAzB6C,wBAAwB;AAElF,gFAAgF;AAChF,MAAML,iBAAiB;IACrBC,QAAQ;IACRC,SAAS;AACX;AAEO,uBAAuB,IAAqB,CAAA;QACjD,CAAC,CAAC,GAAG,EAAEJ,+BAAAA,EAAqB,CAAC,EAAE;YAC7BM,SAAS;QACX;QACA,CAAC,CAAC,GAAG,EAAEL,gCAAAA,EAAsB,CAAC,EAAE;YAC9BK,SAAS;QACX;QACA,WAAW;YACT,CAAC,CAAC,GAAG,EAAEN,+BAAAA,EAAqB,CAAC,EAAE;gBAC7BM,SAAS;YACX;YACA,CAAC,CAAC,GAAG,EAAEL,gCAAAA,EAAsB,CAAC,EAAE;gBAC9BK,SAAS;YACX;QACF;KACF,CAAA,EAAG;AAEI,MAAMC,SAAS,IAAqB,CAAA;QACzC,oEAAoE;QACpE,SAAS;YACPC,OAAO;YACPC,eAAe;YACf,0DAA0D;YAC1D,4DAA4D;YAC5DC,QAAQ;YACRC,UAAU;QACZ;QACA,GAAGN,gBAAgB;KACrB,CAAA,EAAG;AAEI,MAAMO,mBAAmB,IAAqB;QACnD,SAAS;YAAED,UAAU;QAAU;QAC/B,GAAGN,gBAAgB;KACrB,CAAA,EAAG;AAEI,MAAMQ,SAAS,IAAqB,CAAA;QACzC,CAAC,CAAC,GAAG,EAAEX,eAAeE,OAAO,EAAE,CAAC,EAAE;YAChCE,SAAS;QACX;QACA,CAAC,CAAC,GAAG,EAAEJ,eAAeC,MAAM,EAAE,CAAC,EAAE;YAC/BG,SAAS;QACX;QACA,WAAW;YACT,CAAC,CAAC,GAAG,EAAEJ,eAAeE,OAAO,EAAE,CAAC,EAAE;gBAChCE,SAAS;YACX;YACA,CAAC,CAAC,GAAG,EAAEJ,eAAeC,MAAM,EAAE,CAAC,EAAE;gBAC/BG,SAAS;YACX;QACF;KACF,CAAA,EAAG;AAEI,MAAMQ,mBAAmB,IAAqB,CAAA;QACnD,cAAc;YACZC,QAAQ;YACR,WAAW;gBACTA,QAAQ;YACV;YACA,kBAAkB;gBAChBA,QAAQ;YACV;QACF;KACF,CAAA,EAAG"}
|
|
1
|
+
{"version":3,"sources":["../src/components/Button/ButtonMigration.mixins.ts"],"sourcesContent":["import type { GriffelStyle } from '@fluentui/react-components';\nimport { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';\n\n// class names from v0 - not imported as we do not want to keep depending on v0.\nconst iconClassNames = {\n filled: 'ui-icon__filled',\n outline: 'ui-icon__outline',\n};\n\nexport const v9HoverClasses = (): GriffelStyle => ({\n [`& .${iconFilledClassName}`]: {\n display: 'none',\n },\n [`& .${iconRegularClassName}`]: {\n display: 'inline',\n },\n '&:hover': {\n [`& .${iconFilledClassName}`]: {\n display: 'inline',\n },\n [`& .${iconRegularClassName}`]: {\n display: 'none',\n },\n },\n});\n\nexport const v9Icon = (): GriffelStyle => ({\n // styles that allow to keep consistent size of v9 icon with v0 icon\n '& svg': {\n width: '100%',\n paddingBottom: '100%',\n // negative margin is necessary here for centering v9 icon\n // with v0 button, because of extra spaces that svg contains\n margin: '-4px 0 0 -4px',\n overflow: 'visible',\n },\n ...v9HoverClasses(),\n});\n\nexport const v9CustomSizeIcon = (): GriffelStyle => ({\n '& svg': { overflow: 'visible' },\n ...v9HoverClasses(),\n});\n\nexport const v0Icon = (): GriffelStyle => ({\n [`& .${iconClassNames.outline}`]: {\n display: 'block',\n },\n [`& .${iconClassNames.filled}`]: {\n display: 'none',\n },\n '&:hover': {\n [`& .${iconClassNames.outline}`]: {\n display: 'none',\n },\n [`& .${iconClassNames.filled}`]: {\n display: 'block',\n },\n },\n});\n\nexport const v9DisabledCursor = (): GriffelStyle => ({\n '&:disabled': {\n cursor: 'default',\n '&:hover': {\n cursor: 'default',\n },\n '&:hover:active': {\n cursor: 'default',\n },\n },\n});\n"],"names":["iconFilledClassName","iconRegularClassName","iconClassNames","filled","outline","v9HoverClasses","display","v9Icon","width","paddingBottom","margin","overflow","v9CustomSizeIcon","v0Icon","v9DisabledCursor","cursor"],"mappings":";;;;;;;;;;;UA4Caa;;;oBALAD;;;oBAsBAE;;;IApDAT,cAAAA;;;UAiBAE;;;;4BAzB6C,wBAAwB;AAElF,gFAAgF;AAChF,MAAML,iBAAiB;IACrBC,QAAQ;IACRC,SAAS;AACX;AAEO,uBAAuB,IAAqB,CAAA;QACjD,CAAC,CAAC,GAAG,EAAEJ,+BAAAA,EAAqB,CAAC,EAAE;YAC7BM,SAAS;QACX;QACA,CAAC,CAAC,GAAG,EAAEL,gCAAAA,EAAsB,CAAC,EAAE;YAC9BK,SAAS;QACX;QACA,WAAW;YACT,CAAC,CAAC,GAAG,EAAEN,+BAAAA,EAAqB,CAAC,EAAE;gBAC7BM,SAAS;YACX;YACA,CAAC,CAAC,GAAG,EAAEL,gCAAAA,EAAsB,CAAC,EAAE;gBAC9BK,SAAS;YACX;QACF;KACF,CAAA,EAAG;AAEI,MAAMC,SAAS,IAAqB,CAAA;QACzC,oEAAoE;QACpE,SAAS;YACPC,OAAO;YACPC,eAAe;YACf,0DAA0D;YAC1D,4DAA4D;YAC5DC,QAAQ;YACRC,UAAU;QACZ;QACA,GAAGN,gBAAgB;KACrB,CAAA,EAAG;AAEI,MAAMO,mBAAmB,IAAqB;QACnD,SAAS;YAAED,UAAU;QAAU;QAC/B,GAAGN,gBAAgB;KACrB,CAAA,EAAG;AAEI,MAAMQ,SAAS,IAAqB,CAAA;QACzC,CAAC,CAAC,GAAG,EAAEX,eAAeE,OAAO,EAAE,CAAC,EAAE;YAChCE,SAAS;QACX;QACA,CAAC,CAAC,GAAG,EAAEJ,eAAeC,MAAM,EAAE,CAAC,EAAE;YAC/BG,SAAS;QACX;QACA,WAAW;YACT,CAAC,CAAC,GAAG,EAAEJ,eAAeE,OAAO,EAAE,CAAC,EAAE;gBAChCE,SAAS;YACX;YACA,CAAC,CAAC,GAAG,EAAEJ,eAAeC,MAAM,EAAE,CAAC,EAAE;gBAC/BG,SAAS;YACX;QACF;KACF,CAAA,EAAG;AAEI,MAAMQ,mBAAmB,IAAqB,CAAA;QACnD,cAAc;YACZC,QAAQ;YACR,WAAW;gBACTA,QAAQ;YACV;YACA,kBAAkB;gBAChBA,QAAQ;YACV;QACF;KACF,CAAA,EAAG"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/Flex/FlexItem.mixins.ts"],"sourcesContent":["import { GriffelStyle } from '@fluentui/react-components';\n\nconst ALIGN = {\n auto: { alignSelf: 'auto' },\n start: { alignSelf: 'flex-start' },\n end: { alignSelf: 'flex-end' },\n center: { alignSelf: 'center' },\n baseline: { alignSelf: 'baseline' },\n stretch: { alignSelf: 'stretch' },\n};\n\nconst SIZE = {\n half: { flexBasis: '50%' },\n quarter: { flexBasis: '25%' },\n small: { flexBasis: '150px' },\n medium: { flexBasis: '200px' },\n large: { flexBasis: '300px' },\n};\n\nconst align = (value: 'auto' | 'start' | 'end' | 'center' | 'baseline' | 'stretch'): GriffelStyle => ALIGN[value];\n\nconst size = (value: 'half' | 'quarter' | 'small' | 'medium' | 'large'): GriffelStyle => SIZE[value];\n\nconst grow = (flexGrow: boolean | number): GriffelStyle | undefined => {\n if (flexGrow === true) {\n return { flexGrow: 1 };\n } else if (flexGrow) {\n return { flexGrow };\n } else {\n return undefined;\n }\n};\n\nconst shrink = (flexShrink: boolean | number): GriffelStyle | undefined => {\n if (typeof flexShrink === 'number') {\n return { flexShrink };\n } else if (flexShrink === false) {\n return { flexShrink: 0 };\n } else {\n return undefined;\n }\n};\n\nconst pushRow = (): GriffelStyle => ({ marginLeft: 'auto' });\nconst pushColumn = (): GriffelStyle => ({ marginTop: 'auto' });\n\nexport const flexItem = {\n align,\n size,\n grow,\n shrink,\n pushRow,\n pushColumn,\n};\n"],"names":["ALIGN","auto","alignSelf","start","end","center","baseline","stretch","SIZE","half","flexBasis","quarter","small","medium","large","align","value","size","grow","flexGrow","undefined","shrink","flexShrink","pushRow","marginLeft","pushColumn","marginTop","flexItem"],"mappings":";;;;;;;;;;AAEA,MAAMA,QAAQ;IACZC,MAAM;QAAEC,WAAW;IAAO;IAC1BC,OAAO;QAAED,WAAW;IAAa;IACjCE,KAAK;QAAEF,WAAW;IAAW;IAC7BG,QAAQ;QAAEH,WAAW;IAAS;IAC9BI,UAAU;QAAEJ,WAAW;IAAW;IAClCK,SAAS;QAAEL,WAAW;IAAU;AAClC;AAEA,MAAMM,OAAO;IACXC,MAAM;QAAEC,WAAW;IAAM;IACzBC,SAAS;QAAED,WAAW;IAAM;IAC5BE,OAAO;QAAEF,WAAW;IAAQ;IAC5BG,QAAQ;QAAEH,WAAW;IAAQ;IAC7BI,OAAO;QAAEJ,WAAW;IAAQ;AAC9B;AAEA,MAAMK,QAAQ,CAACC,QAAsFhB,KAAK,CAACgB,MAAM;AAEjH,MAAMC,OAAO,CAACD,QAA2ER,IAAI,CAACQ,MAAM;AAEpG,MAAME,OAAO,CAACC;IACZ,IAAIA,aAAa,MAAM;QACrB,OAAO;YAAEA,UAAU;QAAE;IACvB,OAAO,IAAIA,UAAU;QACnB,OAAO;YAAEA;QAAS;IACpB,OAAO;QACL,OAAOC;IACT;AACF;AAEA,MAAMC,SAAS,CAACC;IACd,IAAI,OAAOA,eAAe,UAAU;QAClC,OAAO;YAAEA;QAAW;IACtB,OAAO,IAAIA,eAAe,OAAO;QAC/B,OAAO;YAAEA,YAAY;QAAE;IACzB,OAAO;QACL,OAAOF;IACT;AACF;AAEA,MAAMG,UAAU,IAAqB,CAAA;QAAEC,YAAY;KAAO,CAAA;AAC1D,MAAMC,aAAa,IAAqB,CAAA;QAAEC,WAAW;IAAO,CAAA;AAErD,MAAMC,WAAW;IACtBZ;IACAE;IACAC;IACAG;IACAE;IACAE;AACF,EAAE"}
|
|
1
|
+
{"version":3,"sources":["../src/components/Flex/FlexItem.mixins.ts"],"sourcesContent":["import type { GriffelStyle } from '@fluentui/react-components';\n\nconst ALIGN = {\n auto: { alignSelf: 'auto' },\n start: { alignSelf: 'flex-start' },\n end: { alignSelf: 'flex-end' },\n center: { alignSelf: 'center' },\n baseline: { alignSelf: 'baseline' },\n stretch: { alignSelf: 'stretch' },\n};\n\nconst SIZE = {\n half: { flexBasis: '50%' },\n quarter: { flexBasis: '25%' },\n small: { flexBasis: '150px' },\n medium: { flexBasis: '200px' },\n large: { flexBasis: '300px' },\n};\n\nconst align = (value: 'auto' | 'start' | 'end' | 'center' | 'baseline' | 'stretch'): GriffelStyle => ALIGN[value];\n\nconst size = (value: 'half' | 'quarter' | 'small' | 'medium' | 'large'): GriffelStyle => SIZE[value];\n\nconst grow = (flexGrow: boolean | number): GriffelStyle | undefined => {\n if (flexGrow === true) {\n return { flexGrow: 1 };\n } else if (flexGrow) {\n return { flexGrow };\n } else {\n return undefined;\n }\n};\n\nconst shrink = (flexShrink: boolean | number): GriffelStyle | undefined => {\n if (typeof flexShrink === 'number') {\n return { flexShrink };\n } else if (flexShrink === false) {\n return { flexShrink: 0 };\n } else {\n return undefined;\n }\n};\n\nconst pushRow = (): GriffelStyle => ({ marginLeft: 'auto' });\nconst pushColumn = (): GriffelStyle => ({ marginTop: 'auto' });\n\nexport const flexItem = {\n align,\n size,\n grow,\n shrink,\n pushRow,\n pushColumn,\n};\n"],"names":["ALIGN","auto","alignSelf","start","end","center","baseline","stretch","SIZE","half","flexBasis","quarter","small","medium","large","align","value","size","grow","flexGrow","undefined","shrink","flexShrink","pushRow","marginLeft","pushColumn","marginTop","flexItem"],"mappings":";;;;;;;;;;AAEA,MAAMA,QAAQ;IACZC,MAAM;QAAEC,WAAW;IAAO;IAC1BC,OAAO;QAAED,WAAW;IAAa;IACjCE,KAAK;QAAEF,WAAW;IAAW;IAC7BG,QAAQ;QAAEH,WAAW;IAAS;IAC9BI,UAAU;QAAEJ,WAAW;IAAW;IAClCK,SAAS;QAAEL,WAAW;IAAU;AAClC;AAEA,MAAMM,OAAO;IACXC,MAAM;QAAEC,WAAW;IAAM;IACzBC,SAAS;QAAED,WAAW;IAAM;IAC5BE,OAAO;QAAEF,WAAW;IAAQ;IAC5BG,QAAQ;QAAEH,WAAW;IAAQ;IAC7BI,OAAO;QAAEJ,WAAW;IAAQ;AAC9B;AAEA,MAAMK,QAAQ,CAACC,QAAsFhB,KAAK,CAACgB,MAAM;AAEjH,MAAMC,OAAO,CAACD,QAA2ER,IAAI,CAACQ,MAAM;AAEpG,MAAME,OAAO,CAACC;IACZ,IAAIA,aAAa,MAAM;QACrB,OAAO;YAAEA,UAAU;QAAE;IACvB,OAAO,IAAIA,UAAU;QACnB,OAAO;YAAEA;QAAS;IACpB,OAAO;QACL,OAAOC;IACT;AACF;AAEA,MAAMC,SAAS,CAACC;IACd,IAAI,OAAOA,eAAe,UAAU;QAClC,OAAO;YAAEA;QAAW;IACtB,OAAO,IAAIA,eAAe,OAAO;QAC/B,OAAO;YAAEA,YAAY;QAAE;IACzB,OAAO;QACL,OAAOF;IACT;AACF;AAEA,MAAMG,UAAU,IAAqB,CAAA;QAAEC,YAAY;KAAO,CAAA;AAC1D,MAAMC,aAAa,IAAqB,CAAA;QAAEC,WAAW;IAAO,CAAA;AAErD,MAAMC,WAAW;IACtBZ;IACAE;IACAC;IACAG;IACAE;IACAE;AACF,EAAE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/FormField/FormFieldShim.tsx"],"sourcesContent":["'use client';\n\nimport {\n
|
|
1
|
+
{"version":3,"sources":["../src/components/FormField/FormFieldShim.tsx"],"sourcesContent":["'use client';\n\nimport type { FieldProps } from '@fluentui/react-components';\nimport {\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 =>\n React.cloneElement(child, {\n ...fieldControlProps,\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n ...(child.props as any),\n });\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;;;;;+BA+CaK;;;;;;;iCAvCN,6BAA6B;iEAGb,QAAQ;AAoCxB,sBAAMA,WAAAA,GAAgBD,OAAME,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,YAAAA,QAAAA,YAAAA,KAAAA,IAAAA,KAAAA,IAAAA,QAASG,KAAAA,AAAK,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,YAAAA,QAAAA,YAAAA,KAAAA,IAAAA,KAAAA,IAAAA,QAASM,OAAAA,AAAO;IAE3E,IAAA,WAAA,GAAIb,OAAMe,cAAc,CAACD,WAAW;QAClC,MAAME,QAA4BF;QAElC,qFAAqF;QACrFL,WAAWK,QAAQ,GAAGG,CAAAA,oBAAAA,WAAAA,GACpBjB,OAAMkB,YAAY,CAACF,OAAO;gBACxB,GAAGC,iBAAiB;gBACpB,8DAA8D;gBAC9D,GAAID,MAAMb,KAAK;YACjB;IACJ,OAAO;QACLM,WAAWK,QAAQ,GAAGA;IACxB;IAEA,MAAMK,YAAQpB,kCAAAA,EAAkBU,YAAYL;QAC5CN,wCAAAA,EAAwBqB;IACxB,MAAMC,cAAUvB,+CAAAA,EAA+BsB;IAC/C,WAAOvB,qCAAAA,EAAqBuB,OAAOC;AACrC,GAAG;AAEHnB,cAAcoB,WAAW,GAAG"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/Grid/Grid.mixins.ts"],"sourcesContent":["import { GriffelStyle } from '@fluentui/react-components';\n\nconst getCSSTemplateValue = (template: string | number): string => {\n const templateAsNumber = Number(template);\n\n return !isNaN(templateAsNumber) && templateAsNumber > 0 ? `repeat(${template}, 1fr)` : String(template);\n};\n\nconst columns = (template: string): GriffelStyle => ({\n gridTemplateColumns: getCSSTemplateValue(template),\n});\n\nconst rows = (template: string): GriffelStyle => ({\n gridTemplateRows: getCSSTemplateValue(template),\n});\n\nexport const grid = {\n columns,\n rows,\n};\n"],"names":["getCSSTemplateValue","template","templateAsNumber","Number","isNaN","String","columns","gridTemplateColumns","rows","gridTemplateRows","grid"],"mappings":";;;;;;;;;;AAEA,MAAMA,sBAAsB,CAACC;IAC3B,MAAMC,mBAAmBC,OAAOF;IAEhC,OAAO,CAACG,MAAMF,qBAAqBA,mBAAmB,IAAI,CAAC,OAAO,EAAED,SAAS,MAAM,CAAC,GAAGI,OAAOJ;AAChG;AAEA,MAAMK,UAAU,CAACL,WAAoC,CAAA;QACnDM,qBAAqBP,oBAAoBC;KAC3C,CAAA;AAEA,MAAMO,OAAO,CAACP,WAAoC;QAChDQ,kBAAkBT,oBAAoBC;KACxC,CAAA;AAEO,MAAMS,OAAO;IAClBJ;IACAE;AACF,EAAE"}
|
|
1
|
+
{"version":3,"sources":["../src/components/Grid/Grid.mixins.ts"],"sourcesContent":["import type { GriffelStyle } from '@fluentui/react-components';\n\nconst getCSSTemplateValue = (template: string | number): string => {\n const templateAsNumber = Number(template);\n\n return !isNaN(templateAsNumber) && templateAsNumber > 0 ? `repeat(${template}, 1fr)` : String(template);\n};\n\nconst columns = (template: string): GriffelStyle => ({\n gridTemplateColumns: getCSSTemplateValue(template),\n});\n\nconst rows = (template: string): GriffelStyle => ({\n gridTemplateRows: getCSSTemplateValue(template),\n});\n\nexport const grid = {\n columns,\n rows,\n};\n"],"names":["getCSSTemplateValue","template","templateAsNumber","Number","isNaN","String","columns","gridTemplateColumns","rows","gridTemplateRows","grid"],"mappings":";;;;;;;;;;AAEA,MAAMA,sBAAsB,CAACC;IAC3B,MAAMC,mBAAmBC,OAAOF;IAEhC,OAAO,CAACG,MAAMF,qBAAqBA,mBAAmB,IAAI,CAAC,OAAO,EAAED,SAAS,MAAM,CAAC,GAAGI,OAAOJ;AAChG;AAEA,MAAMK,UAAU,CAACL,WAAoC,CAAA;QACnDM,qBAAqBP,oBAAoBC;KAC3C,CAAA;AAEA,MAAMO,OAAO,CAACP,WAAoC;QAChDQ,kBAAkBT,oBAAoBC;KACxC,CAAA;AAEO,MAAMS,OAAO;IAClBJ;IACAE;AACF,EAAE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/Input/Input.mixins.ts"],"sourcesContent":["import { GriffelStyle
|
|
1
|
+
{"version":3,"sources":["../src/components/Input/Input.mixins.ts"],"sourcesContent":["import type { GriffelStyle } from '@fluentui/react-components';\nimport { tokens } from '@fluentui/react-components';\n\nconst fluid = (): GriffelStyle => ({ width: '100%' });\n\nconst error = (): GriffelStyle => ({ border: `1px solid ${tokens.colorPaletteRedBorderActive}` });\n\nconst errorIndicator = (): GriffelStyle => ({\n color: tokens.colorPaletteRedBorderActive,\n});\n\nconst successIndicator = (): GriffelStyle => ({\n color: tokens.colorPaletteGreenForeground1,\n});\n\nexport const input = {\n error,\n errorIndicator,\n fluid,\n successIndicator,\n};\n"],"names":["tokens","fluid","width","error","border","colorPaletteRedBorderActive","errorIndicator","color","successIndicator","colorPaletteGreenForeground1","input"],"mappings":";;;;;;;;;;iCACuB,6BAA6B;AAEpD,MAAMC,QAAQ,IAAqB,CAAA;QAAEC,OAAO;KAAO,CAAA;AAEnD,MAAMC,QAAQ,IAAqB,CAAA;QAAEC,QAAQ,CAAC,UAAU,EAAEJ,uBAAAA,CAAOK,2BAA2B,EAAE;KAAC,CAAA;AAE/F,MAAMC,iBAAiB,IAAqB,CAAA;QAC1CC,OAAOP,uBAAAA,CAAOK,2BAA2B;KAC3C,CAAA;AAEA,MAAMG,mBAAmB,IAAqB,CAAA;QAC5CD,OAAOP,uBAAAA,CAAOS,4BAA4B;KAC5C,CAAA;AAEO,MAAMC,QAAQ;IACnBP;IACAG;IACAL;IACAO;AACF,EAAE"}
|
|
@@ -1 +1 @@
|
|
|
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 {
|
|
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 type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { getIntrinsicElementProps, slot, assertSlots } 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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"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
|
|
1
|
+
/**
|
|
2
|
+
* State used in rendering List
|
|
3
|
+
*/ "use strict";
|
|
2
4
|
Object.defineProperty(exports, "__esModule", {
|
|
3
5
|
value: true
|
|
4
6
|
});
|
|
5
|
-
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
|
|
6
|
-
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/List/List/List.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { ComponentProps, ComponentState, Slot, SelectionMode, SelectionItemId } from '@fluentui/react-utilities';\nimport type { ListSelectionState } from '../hooks/types';\n\ntype ListLayout = 'horizontal' | 'vertical' | 'grid';\n\nexport type ListSlots = {\n root: NonNullable<Slot<'ul', 'div' | 'ol'>>;\n};\n\n/**\n * List Props\n */\nexport type ListProps = ComponentProps<ListSlots> & {\n /**\n * Defines the layout orientation.\n *\n * @default vertical\n */\n layout?: ListLayout;\n\n /**\n * Defines if the list should be navigable. Set this to true when adding an `onClick` handler.\n *\n * @default false\n */\n navigable?: boolean;\n\n /**\n * Defines if the List items should be selectable.\n *\n * @default false\n */\n selectable?: boolean;\n\n /**\n * Defines selection mode for the List.\n *\n * @default single\n */\n selectionMode?: SelectionMode;\n\n /**\n * For controlled selection - defines selected items\n */\n selectedItems?: SelectionItemId[];\n\n /**\n * For uncontrolled selection - defines default selected items\n */\n defaultSelectedItems?: SelectionItemId[];\n\n /**\n * Callback for selection change events, used for both controlled and uncontrolled (as notification)\n */\n // eslint-disable-next-line @nx/workspace-consistent-callback-type -- can't change type of existing callback\n onSelectionChange?: (event: React.SyntheticEvent, data: { selectedItems: SelectionItemId[] }) => void;\n\n /**\n * Truncates header\n *\n * @default false\n */\n truncateHeader?: boolean;\n\n /**\n * Truncates content\n *\n * @default false\n */\n truncateContent?: boolean;\n};\n\nexport type ListContextValue = {\n navigable: boolean;\n selection?: ListSelectionState;\n as?: 'div' | 'ol' | 'ul';\n truncateHeader?: ListProps['truncateHeader'];\n truncateContent?: ListProps['truncateContent'];\n};\n\nexport type ListContextValues = {\n listContext: ListContextValue;\n};\n\n/**\n * State used in rendering List\n */\nexport type ListState = ComponentState<ListSlots> & Required<Pick<ListProps, 'layout'>> & ListContextValue;\n"],"names":[
|
|
1
|
+
{"version":3,"sources":["../src/components/List/List/List.types.ts"],"sourcesContent":["import type * as React from 'react';\nimport type { ComponentProps, ComponentState, Slot, SelectionMode, SelectionItemId } from '@fluentui/react-utilities';\nimport type { ListSelectionState } from '../hooks/types';\n\ntype ListLayout = 'horizontal' | 'vertical' | 'grid';\n\nexport type ListSlots = {\n root: NonNullable<Slot<'ul', 'div' | 'ol'>>;\n};\n\n/**\n * List Props\n */\nexport type ListProps = ComponentProps<ListSlots> & {\n /**\n * Defines the layout orientation.\n *\n * @default vertical\n */\n layout?: ListLayout;\n\n /**\n * Defines if the list should be navigable. Set this to true when adding an `onClick` handler.\n *\n * @default false\n */\n navigable?: boolean;\n\n /**\n * Defines if the List items should be selectable.\n *\n * @default false\n */\n selectable?: boolean;\n\n /**\n * Defines selection mode for the List.\n *\n * @default single\n */\n selectionMode?: SelectionMode;\n\n /**\n * For controlled selection - defines selected items\n */\n selectedItems?: SelectionItemId[];\n\n /**\n * For uncontrolled selection - defines default selected items\n */\n defaultSelectedItems?: SelectionItemId[];\n\n /**\n * Callback for selection change events, used for both controlled and uncontrolled (as notification)\n */\n // eslint-disable-next-line @nx/workspace-consistent-callback-type -- can't change type of existing callback\n onSelectionChange?: (event: React.SyntheticEvent, data: { selectedItems: SelectionItemId[] }) => void;\n\n /**\n * Truncates header\n *\n * @default false\n */\n truncateHeader?: boolean;\n\n /**\n * Truncates content\n *\n * @default false\n */\n truncateContent?: boolean;\n};\n\nexport type ListContextValue = {\n navigable: boolean;\n selection?: ListSelectionState;\n as?: 'div' | 'ol' | 'ul';\n truncateHeader?: ListProps['truncateHeader'];\n truncateContent?: ListProps['truncateContent'];\n};\n\nexport type ListContextValues = {\n listContext: ListContextValue;\n};\n\n/**\n * State used in rendering List\n */\nexport type ListState = ComponentState<ListSlots> & Required<Pick<ListProps, 'layout'>> & ListContextValue;\n"],"names":[],"mappings":"AAqFA;;CAEC,GACD,WAA2G"}
|
|
@@ -1 +1 @@
|
|
|
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;;;;;;;;;;;;uBAcaQ;;;2BARAN;;;2BAUAQ;;;;sCAdqC,mCAAmC;AAI9E,MAAMR,0BAA4C;IACvDC,WAAW;IACXC,WAAWC;IACXC,IAAID;AACN,EAAE;AAEF,MAAME,kBAAcP,mCAAAA,EAA4CK;AAEzD,MAAMG,sBAAsBD,YAAYE,QAAQ,CAAC;AAEjD,MAAMC,0BAA0B,CAAIC,eACzCV,wCAAAA,EAAmBM,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 type { 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;;;;;;;;;;;;uBAcaQ;;;2BARAN;;;2BAUAQ;;;;sCAdqC,mCAAmC;AAI9E,MAAMR,0BAA4C;IACvDC,WAAW;IACXC,WAAWC;IACXC,IAAID;AACN,EAAE;AAEF,MAAME,kBAAcP,mCAAAA,EAA4CK;AAEzD,MAAMG,sBAAsBD,YAAYE,QAAQ,CAAC;AAEjD,MAAMC,0BAA0B,CAAIC,eACzCV,wCAAAA,EAAmBM,aAAa,CAACK,MAAMV,uBAAuB,GAAKS,SAASC,MAAM"}
|
|
@@ -9,8 +9,6 @@ Object.defineProperty(exports, "useList_unstable", {
|
|
|
9
9
|
return useList_unstable;
|
|
10
10
|
}
|
|
11
11
|
});
|
|
12
|
-
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
|
|
13
|
-
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
|
|
14
12
|
const _reactutilities = require("@fluentui/react-utilities");
|
|
15
13
|
const _reacttabster = require("@fluentui/react-tabster");
|
|
16
14
|
const _useListSelection = require("../hooks/useListSelection");
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/List/List/useList.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport {
|
|
1
|
+
{"version":3,"sources":["../src/components/List/List/useList.ts"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport type { OnSelectionChangeData } from '@fluentui/react-utilities';\nimport { getIntrinsicElementProps, slot, useControllableState, useEventCallback } from '@fluentui/react-utilities';\nimport { useArrowNavigationGroup } from '@fluentui/react-tabster';\nimport type { 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":["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;;;;;+BAoBaO;;;;;;gCAhB0E,4BAA4B;8BAC3E,0BAA0B;kCAEjC,4BAA4B;AAE7D,MAAMD,uBAAuB;AAWtB,yBAAyB,CAACE,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,gCAA4BhB,qCAAAA,EAAwB;QACxDiB,MAAMX,WAAW,SAAS,gBAAgB;QAC1CY,iBAAiB;IACnB;IAEA,MAAM,CAACC,gBAAgBC,kBAAkB,OAAGtB,oCAAAA,EAAqB;QAC/DuB,OAAOX;QACPY,cAAcX;QACdY,cAAc,EAAE;IAClB;IAEA,MAAMC,eAAWzB,gCAAAA,EAAiB,CAAC0B,GAAyBC;QAC1D,MAAMC,uBAAuBC,MAAMC,IAAI,CAACH,KAAKhB,aAAa;QAC1DU,kBAAkBO;QAClBd,sBAAAA,QAAAA,sBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,kBAAoBY,GAAG;YAAEf,eAAeiB;QAAqB;IAC/D;IAEA,MAAMG,gBAAY7B,kCAAAA,EAAiB;QACjCY,mBAAmBW;QACnBf;QACAC,eAAeS;QACfR;IACF;IAEA,OAAO;QACLoB,YAAY;YACVC,MAAM9B;QACR;QACA8B,MAAMnC,oBAAAA,CAAKoC,MAAM,KACfrC,wCAAAA,EAAyBM,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 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/List/List/useListContextValues.ts"],"sourcesContent":["import { ListContextValues, ListState } from './List.types';\n\nexport function useListContextValues_unstable(state: ListState): ListContextValues {\n const { navigable, selection, as, truncateContent, truncateHeader } = state;\n\n const listContext = {\n navigable,\n selection,\n as,\n truncateContent,\n truncateHeader,\n };\n\n return {\n listContext,\n };\n}\n"],"names":["useListContextValues_unstable","state","navigable","selection","as","truncateContent","truncateHeader","listContext"],"mappings":";;;;+BAEgBA;;;;;;AAAT,uCAAuCC,KAAgB;IAC5D,MAAM,EAAEC,SAAS,EAAEC,SAAS,EAAEC,EAAE,EAAEC,eAAe,EAAEC,cAAc,EAAE,GAAGL;IAEtE,MAAMM,cAAc;QAClBL;QACAC;QACAC;QACAC;QACAC;IACF;IAEA,OAAO;QACLC;IACF;AACF"}
|
|
1
|
+
{"version":3,"sources":["../src/components/List/List/useListContextValues.ts"],"sourcesContent":["import type { ListContextValues, ListState } from './List.types';\n\nexport function useListContextValues_unstable(state: ListState): ListContextValues {\n const { navigable, selection, as, truncateContent, truncateHeader } = state;\n\n const listContext = {\n navigable,\n selection,\n as,\n truncateContent,\n truncateHeader,\n };\n\n return {\n listContext,\n };\n}\n"],"names":["useListContextValues_unstable","state","navigable","selection","as","truncateContent","truncateHeader","listContext"],"mappings":";;;;+BAEgBA;;;;;;AAAT,uCAAuCC,KAAgB;IAC5D,MAAM,EAAEC,SAAS,EAAEC,SAAS,EAAEC,EAAE,EAAEC,eAAe,EAAEC,cAAc,EAAE,GAAGL;IAEtE,MAAMM,cAAc;QAClBL;QACAC;QACAC;QACAC;QACAC;IACF;IAEA,OAAO;QACLC;IACF;AACF"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
|
|
1
|
+
/**
|
|
2
|
+
* State used in rendering ListItem
|
|
3
|
+
*/ "use strict";
|
|
2
4
|
Object.defineProperty(exports, "__esModule", {
|
|
3
5
|
value: true
|
|
4
6
|
});
|
|
5
|
-
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
|
|
6
|
-
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/List/ListItem/ListItem.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { ItemLayout } from '../../ItemLayout';\n\nexport type ListItemSlots = {\n root: NonNullable<Slot<'li', 'div'>>;\n media?: React.ComponentProps<typeof ItemLayout>['startMedia'];\n header?: React.ComponentProps<typeof ItemLayout>['header'];\n contentWrapper?: React.ComponentProps<typeof ItemLayout>['contentWrapper'];\n headerMedia?: React.ComponentProps<typeof ItemLayout>['headerMedia'];\n contentMedia?: React.ComponentProps<typeof ItemLayout>['contentMedia'];\n endMedia?: React.ComponentProps<typeof ItemLayout>['endMedia'];\n};\n\n/**\n * ListItem Props\n */\nexport type ListItemProps = ComponentProps<ListItemSlots> & {\n value?: string | number;\n truncateHeader?: boolean;\n truncateContent?: boolean;\n};\n\n/**\n * State used in rendering ListItem\n */\nexport type ListItemState = ComponentState<ListItemSlots> & {\n selectable?: boolean;\n selected?: boolean;\n navigable?: boolean;\n truncateHeader?: boolean;\n truncateContent?: boolean;\n};\n"],"names":[
|
|
1
|
+
{"version":3,"sources":["../src/components/List/ListItem/ListItem.types.ts"],"sourcesContent":["import type * as React from 'react';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { ItemLayout } from '../../ItemLayout';\n\nexport type ListItemSlots = {\n root: NonNullable<Slot<'li', 'div'>>;\n media?: React.ComponentProps<typeof ItemLayout>['startMedia'];\n header?: React.ComponentProps<typeof ItemLayout>['header'];\n contentWrapper?: React.ComponentProps<typeof ItemLayout>['contentWrapper'];\n headerMedia?: React.ComponentProps<typeof ItemLayout>['headerMedia'];\n contentMedia?: React.ComponentProps<typeof ItemLayout>['contentMedia'];\n endMedia?: React.ComponentProps<typeof ItemLayout>['endMedia'];\n};\n\n/**\n * ListItem Props\n */\nexport type ListItemProps = ComponentProps<ListItemSlots> & {\n value?: string | number;\n truncateHeader?: boolean;\n truncateContent?: boolean;\n};\n\n/**\n * State used in rendering ListItem\n */\nexport type ListItemState = ComponentState<ListItemSlots> & {\n selectable?: boolean;\n selected?: boolean;\n navigable?: boolean;\n truncateHeader?: boolean;\n truncateContent?: boolean;\n};\n"],"names":[],"mappings":"AAuBA;;CAEC,GACD,WAME"}
|
|
@@ -9,10 +9,8 @@ Object.defineProperty(exports, "useListItem_unstable", {
|
|
|
9
9
|
return useListItem_unstable;
|
|
10
10
|
}
|
|
11
11
|
});
|
|
12
|
-
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
|
|
13
12
|
const _reactaria = require("@fluentui/react-aria");
|
|
14
13
|
const _reactutilities = require("@fluentui/react-utilities");
|
|
15
|
-
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
|
|
16
14
|
const _listContext = require("../List/listContext");
|
|
17
15
|
const DEFAULT_ROOT_EL_TYPE = 'li';
|
|
18
16
|
function validateProperElementTypes(parentRenderedAs, renderedAs) {
|
|
@@ -1 +1 @@
|
|
|
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","
|
|
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 type * 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","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 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/List/hooks/types.ts"],"sourcesContent":["import { SelectionItemId } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nexport type ListSelectionState = {\n isSelected: (item: string | number) => boolean;\n toggleItem: (e: React.SyntheticEvent, id: string | number) => void;\n deselectItem: (e: React.SyntheticEvent, id: string | number) => void;\n selectItem: (e: React.SyntheticEvent, id: string | number) => void;\n clearSelection: (e: React.SyntheticEvent) => void;\n toggleAllItems: (e: React.SyntheticEvent, itemIds: string[] | number[]) => void;\n setSelectedItems: React.Dispatch<React.SetStateAction<Iterable<SelectionItemId>>>;\n selectedItems: SelectionItemId[];\n};\n"],"names":[
|
|
1
|
+
{"version":3,"sources":["../src/components/List/hooks/types.ts"],"sourcesContent":["import type { SelectionItemId } from '@fluentui/react-utilities';\nimport type * as React from 'react';\n\nexport type ListSelectionState = {\n isSelected: (item: string | number) => boolean;\n toggleItem: (e: React.SyntheticEvent, id: string | number) => void;\n deselectItem: (e: React.SyntheticEvent, id: string | number) => void;\n selectItem: (e: React.SyntheticEvent, id: string | number) => void;\n clearSelection: (e: React.SyntheticEvent) => void;\n toggleAllItems: (e: React.SyntheticEvent, itemIds: string[] | number[]) => void;\n setSelectedItems: React.Dispatch<React.SetStateAction<Iterable<SelectionItemId>>>;\n selectedItems: SelectionItemId[];\n};\n"],"names":[],"mappings":""}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/List/hooks/useListSelection.tsx"],"sourcesContent":["'use client';\n\nimport { SelectionHookParams
|
|
1
|
+
{"version":3,"sources":["../src/components/List/hooks/useListSelection.tsx"],"sourcesContent":["'use client';\n\nimport type { SelectionHookParams } from '@fluentui/react-utilities';\nimport { useControllableState, useEventCallback, useSelection } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport type { ListSelectionState } from './types';\n\nexport function useListSelection(options: SelectionHookParams = { selectionMode: 'multiselect' }): ListSelectionState {\n const { selectionMode, defaultSelectedItems, onSelectionChange } = options;\n\n const [selectedItems, setSelectedItems] = useControllableState({\n state: options.selectedItems,\n defaultState: defaultSelectedItems,\n initialState: [],\n });\n\n const [selected, selectionMethods] = useSelection({\n selectionMode,\n defaultSelectedItems,\n selectedItems,\n onSelectionChange: (e, data) => {\n setSelectedItems(data.selectedItems);\n onSelectionChange?.(e, data);\n },\n });\n\n const toggleItem: ListSelectionState['toggleItem'] = useEventCallback((e, itemId) =>\n selectionMethods.toggleItem(e, itemId),\n );\n\n const toggleAllItems: ListSelectionState['toggleAllItems'] = useEventCallback((e, itemIds) => {\n selectionMethods.toggleAllItems(e, itemIds);\n });\n\n const deselectItem: ListSelectionState['deselectItem'] = useEventCallback((e, itemId: string | number) =>\n selectionMethods.deselectItem(e, itemId),\n );\n\n const selectItem: ListSelectionState['selectItem'] = useEventCallback((e, itemId: string | number) =>\n selectionMethods.selectItem(e, itemId),\n );\n\n const clearSelection: ListSelectionState['clearSelection'] = useEventCallback(e => selectionMethods.clearItems(e));\n\n const selectedArray = React.useMemo(() => Array.from(selected), [selected]);\n\n return {\n selectedItems: selectedArray,\n toggleItem,\n toggleAllItems,\n deselectItem,\n selectItem,\n setSelectedItems,\n isSelected: (id: string | number) => selectionMethods.isSelected(id),\n clearSelection,\n };\n}\n"],"names":["useControllableState","useEventCallback","useSelection","React","useListSelection","options","selectionMode","defaultSelectedItems","onSelectionChange","selectedItems","setSelectedItems","state","defaultState","initialState","selected","selectionMethods","e","data","toggleItem","itemId","toggleAllItems","itemIds","deselectItem","selectItem","clearSelection","clearItems","selectedArray","useMemo","Array","from","isSelected","id"],"mappings":"AAAA;;;;;+BAOgBI;;;;;;;gCAJqD,4BAA4B;iEAC1E,QAAQ;AAGxB,0BAA0BC,UAA+B;IAAEC,eAAe;AAAc,CAAC;IAC9F,MAAM,EAAEA,aAAa,EAAEC,oBAAoB,EAAEC,iBAAiB,EAAE,GAAGH;IAEnE,MAAM,CAACI,eAAeC,iBAAiB,GAAGV,wCAAAA,EAAqB;QAC7DW,OAAON,QAAQI,aAAa;QAC5BG,cAAcL;QACdM,cAAc,EAAE;IAClB;IAEA,MAAM,CAACC,UAAUC,iBAAiB,OAAGb,4BAAAA,EAAa;QAChDI;QACAC;QACAE;QACAD,mBAAmB,CAACQ,GAAGC;YACrBP,iBAAiBO,KAAKR,aAAa;YACnCD,sBAAAA,QAAAA,sBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,kBAAoBQ,GAAGC;QACzB;IACF;IAEA,MAAMC,iBAA+CjB,gCAAAA,EAAiB,CAACe,GAAGG,SACxEJ,iBAAiBG,UAAU,CAACF,GAAGG;IAGjC,MAAMC,qBAAuDnB,gCAAAA,EAAiB,CAACe,GAAGK;QAChFN,iBAAiBK,cAAc,CAACJ,GAAGK;IACrC;IAEA,MAAMC,mBAAmDrB,gCAAAA,EAAiB,CAACe,GAAGG,SAC5EJ,iBAAiBO,YAAY,CAACN,GAAGG;IAGnC,MAAMI,iBAA+CtB,gCAAAA,EAAiB,CAACe,GAAGG,SACxEJ,iBAAiBQ,UAAU,CAACP,GAAGG;IAGjC,MAAMK,qBAAuDvB,gCAAAA,EAAiBe,CAAAA,IAAKD,iBAAiBU,UAAU,CAACT;IAE/G,MAAMU,gBAAgBvB,OAAMwB,OAAO,CAAC,IAAMC,MAAMC,IAAI,CAACf,WAAW;QAACA;KAAS;IAE1E,OAAO;QACLL,eAAeiB;QACfR;QACAE;QACAE;QACAC;QACAb;QACAoB,YAAY,CAACC,KAAwBhB,iBAAiBe,UAAU,CAACC;QACjEP;IACF;AACF"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/Slider/Slider.mixins.ts"],"sourcesContent":["import { GriffelStyle } from '@fluentui/react-components';\n\nconst fluid = (): GriffelStyle => ({ width: '100%' });\n\nexport const slider = {\n fluid,\n};\n"],"names":["fluid","width","slider"],"mappings":";;;;;;;;;;AAEA,MAAMA,QAAQ,IAAqB,CAAA;QAAEC,OAAO;KAAO,CAAA;AAE5C,MAAMC,SAAS;IACpBF;AACF,EAAE"}
|
|
1
|
+
{"version":3,"sources":["../src/components/Slider/Slider.mixins.ts"],"sourcesContent":["import type { GriffelStyle } from '@fluentui/react-components';\n\nconst fluid = (): GriffelStyle => ({ width: '100%' });\n\nexport const slider = {\n fluid,\n};\n"],"names":["fluid","width","slider"],"mappings":";;;;;;;;;;AAEA,MAAMA,QAAQ,IAAqB,CAAA;QAAEC,OAAO;KAAO,CAAA;AAE5C,MAAMC,SAAS;IACpBF;AACF,EAAE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/Spinner/SpinnerMigration.mixins.ts"],"sourcesContent":["import { GriffelStyle
|
|
1
|
+
{"version":3,"sources":["../src/components/Spinner/SpinnerMigration.mixins.ts"],"sourcesContent":["import type { GriffelStyle } from '@fluentui/react-components';\nimport { tokens, labelClassNames } from '@fluentui/react-components';\n\nconst v0Inline = (): GriffelStyle => ({ display: 'inline-flex' });\n\nconst v0SpinnerLabelStyle = (): GriffelStyle => ({\n [`& .${labelClassNames.root}`]: {\n fontSize: '14px',\n fontWeight: tokens.fontWeightMedium,\n },\n});\n\nexport const spinner = {\n v0Inline,\n v0SpinnerLabelStyle,\n};\n"],"names":["tokens","labelClassNames","v0Inline","display","v0SpinnerLabelStyle","root","fontSize","fontWeight","fontWeightMedium","spinner"],"mappings":";;;;;;;;;;iCACwC,6BAA6B;AAErE,MAAME,WAAW,IAAqB,CAAA;QAAEC,SAAS;KAAc,CAAA;AAE/D,MAAMC,sBAAsB,IAAqB,CAAA;QAC/C,CAAC,CAAC,GAAG,EAAEH,gCAAAA,CAAgBI,IAAI,EAAE,CAAC,EAAE;YAC9BC,UAAU;YACVC,YAAYP,uBAAAA,CAAOQ,gBAAgB;QACrC;KACF,CAAA;AAEO,MAAMC,UAAU;IACrBP;IACAE;AACF,EAAE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/StyledText/StyledText.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\n'use client';\n\nimport * as React from 'react';\nimport {
|
|
1
|
+
{"version":3,"sources":["../src/components/StyledText/StyledText.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\n'use client';\n\nimport * as React from 'react';\nimport type { Slot, ComponentProps } from '@fluentui/react-components';\nimport { getIntrinsicElementProps, mergeClasses, slot } from '@fluentui/react-components';\nimport { useSizeStyles, useStyles, useWeightStyles } from './StyledText.styles';\n\nexport type StyledTextSlots = {\n root: Slot<'span', 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'pre' | 'time'>;\n};\n\nexport type StyledTextProps = ComponentProps<StyledTextSlots> & {\n /**\n * Aligns text based on the parent container.\n */\n align?: 'start' | 'center' | 'end' | 'justify';\n\n /**\n * At mentions can be formatted to draw users' attention.\n * Mentions for \"me\" can be formatted to appear differently.\n */\n atMention?: 'me' | boolean;\n\n /**\n * Set as disabled StyledText component\n */\n disabled?: boolean;\n\n /**\n * Set as error StyledText component\n */\n error?: boolean;\n\n /**\n * The StyledText can appear more important and draw user's attention\n */\n important?: boolean;\n\n /**\n * Applies font size and line height based on the theme tokens.\n */\n size?:\n | 'smaller'\n | 'small'\n | 'medium'\n | 'large'\n | 'large500'\n | 'larger'\n | 'largest'\n | 100\n | 200\n | 300\n | 400\n | 500\n | 600\n | 700;\n\n /**\n * Set as success StyledText component\n */\n success?: boolean;\n\n /**\n * The text can signify a temporary state\n */\n temporary?: boolean;\n\n /**\n * Set as timestamp StyledText component\n */\n timestamp?: boolean;\n\n /**\n * Truncate overflowing text for block displays.\n */\n truncate?: boolean;\n\n /**\n * Applies font weight to the content.\n */\n weight?: 'light' | 'semilight' | 'regular' | 'medium' | 'semibold' | 'bold';\n\n /**\n * Wraps the text content on white spaces.\n *\n * @default true\n */\n wrap?: boolean;\n};\n\nexport const styledTextClassName = 'fui-StyledText';\n\nconst sizeMap: Record<string, 'base100' | 'base200' | 'base300' | 'base400' | 'base500' | 'base600' | 'hero700'> = {\n '100': 'base100',\n '200': 'base200',\n '300': 'base300',\n '400': 'base400',\n '500': 'base500',\n '600': 'base600',\n '700': 'hero700',\n smaller: 'base100',\n small: 'base200',\n medium: 'base300',\n large: 'base400',\n large500: 'base500',\n larger: 'base600',\n largest: 'hero700',\n};\n\nexport const StyledText = React.forwardRef<HTMLSpanElement, StyledTextProps>((props, ref) => {\n const {\n align,\n atMention,\n disabled,\n error,\n important,\n success,\n temporary,\n timestamp,\n truncate,\n weight,\n wrap = true,\n } = props;\n\n const dir = typeof props.children === 'string' ? 'auto' : undefined;\n\n const sizeStyles = useSizeStyles();\n const weightStyles = useWeightStyles();\n const styles = useStyles();\n\n const size = props.size ? sizeMap[props.size] : props.size;\n\n const RootSlot = slot.always(\n getIntrinsicElementProps('span', {\n ref,\n ...props,\n dir,\n className: mergeClasses(\n styledTextClassName,\n size && sizeStyles[size],\n weight && weightStyles[weight],\n wrap === false && styles.nowrap,\n truncate && styles.truncate,\n align === 'center' && styles.alignCenter,\n align === 'end' && styles.alignEnd,\n align === 'justify' && styles.alignJustify,\n\n atMention && styles.mention,\n atMention === 'me' && styles.mentionMe,\n disabled && styles.disabled,\n error && styles.error,\n important && styles.important,\n success && styles.success,\n temporary && styles.temporary,\n timestamp && styles.timestamp,\n props.className,\n ),\n }),\n { elementType: 'span' },\n );\n\n return <RootSlot />;\n});\n\nStyledText.displayName = 'StyledText';\n"],"names":["React","getIntrinsicElementProps","mergeClasses","slot","useSizeStyles","useStyles","useWeightStyles","styledTextClassName","sizeMap","smaller","small","medium","large","large500","larger","largest","StyledText","forwardRef","props","ref","align","atMention","disabled","error","important","success","temporary","timestamp","truncate","weight","wrap","dir","children","undefined","sizeStyles","weightStyles","styles","size","RootSlot","always","className","nowrap","alignCenter","alignEnd","alignJustify","mention","mentionMe","elementType","displayName"],"mappings":"AAAA,wBAA0B,GAC1B,iDAAiD,GAEjD;;;;;;;;;;;;IA6GagB,UAAAA;;;uBAnBAT;;;;;;iEAxFU,QAAQ;iCAE8B,6BAA6B;kCAChC,sBAAsB;AAqFzE,MAAMA,sBAAsB,iBAAiB;AAEpD,MAAMC,UAA6G;IACjH,OAAO;IACP,OAAO;IACP,OAAO;IACP,OAAO;IACP,OAAO;IACP,OAAO;IACP,OAAO;IACPC,SAAS;IACTC,OAAO;IACPC,QAAQ;IACRC,OAAO;IACPC,UAAU;IACVC,QAAQ;IACRC,SAAS;AACX;AAEO,mBAAMC,WAAAA,GAAahB,OAAMiB,UAAU,CAAmC,CAACC,OAAOC;IACnF,MAAM,EACJC,KAAK,EACLC,SAAS,EACTC,QAAQ,EACRC,KAAK,EACLC,SAAS,EACTC,OAAO,EACPC,SAAS,EACTC,SAAS,EACTC,QAAQ,EACRC,MAAM,EACNC,OAAO,IAAI,EACZ,GAAGZ;IAEJ,MAAMa,MAAM,OAAOb,MAAMc,QAAQ,KAAK,WAAW,SAASC;IAE1D,MAAMC,aAAa9B,mCAAAA;IACnB,MAAM+B,mBAAe7B,iCAAAA;IACrB,MAAM8B,aAAS/B,2BAAAA;IAEf,MAAMgC,OAAOnB,MAAMmB,IAAI,GAAG7B,OAAO,CAACU,MAAMmB,IAAI,CAAC,GAAGnB,MAAMmB,IAAI;IAE1D,MAAMC,WAAWnC,qBAAAA,CAAKoC,MAAM,KAC1BtC,yCAAAA,EAAyB,QAAQ;QAC/BkB;QACA,GAAGD,KAAK;QACRa;QACAS,eAAWtC,6BAAAA,EACTK,qBACA8B,QAAQH,UAAU,CAACG,KAAK,EACxBR,UAAUM,YAAY,CAACN,OAAO,EAC9BC,SAAS,SAASM,OAAOK,MAAM,EAC/Bb,YAAYQ,OAAOR,QAAQ,EAC3BR,UAAU,YAAYgB,OAAOM,WAAW,EACxCtB,UAAU,SAASgB,OAAOO,QAAQ,EAClCvB,UAAU,aAAagB,OAAOQ,YAAY,EAE1CvB,aAAae,OAAOS,OAAO,EAC3BxB,cAAc,QAAQe,OAAOU,SAAS,EACtCxB,YAAYc,OAAOd,QAAQ,EAC3BC,SAASa,OAAOb,KAAK,EACrBC,aAAaY,OAAOZ,SAAS,EAC7BC,WAAWW,OAAOX,OAAO,EACzBC,aAAaU,OAAOV,SAAS,EAC7BC,aAAaS,OAAOT,SAAS,EAC7BT,MAAMsB,SAAS;IAEnB,IACA;QAAEO,aAAa;IAAO;IAGxB,OAAA,WAAA,OAAO,eAAA,EAACT,UAAAA,CAAAA;AACV,GAAG;AAEHtB,WAAWgC,WAAW,GAAG"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-migration-v0-v9",
|
|
3
|
-
"version": "9.6.
|
|
3
|
+
"version": "9.6.28",
|
|
4
4
|
"description": "Migration shim components and methods for hybrid v0/v9 applications building on Fluent UI React.",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -12,15 +12,15 @@
|
|
|
12
12
|
},
|
|
13
13
|
"license": "MIT",
|
|
14
14
|
"dependencies": {
|
|
15
|
-
"@fluentui/react-aria": "^9.17.
|
|
16
|
-
"@fluentui/react-components": "^9.73.
|
|
17
|
-
"@fluentui/react-context-selector": "^9.2.
|
|
15
|
+
"@fluentui/react-aria": "^9.17.11",
|
|
16
|
+
"@fluentui/react-components": "^9.73.8",
|
|
17
|
+
"@fluentui/react-context-selector": "^9.2.16",
|
|
18
18
|
"@fluentui/react-icons": "^2.0.245",
|
|
19
|
-
"@fluentui/react-jsx-runtime": "^9.4.
|
|
19
|
+
"@fluentui/react-jsx-runtime": "^9.4.2",
|
|
20
20
|
"@fluentui/react-shared-contexts": "^9.26.2",
|
|
21
|
-
"@fluentui/react-tabster": "^9.26.
|
|
21
|
+
"@fluentui/react-tabster": "^9.26.14",
|
|
22
22
|
"@fluentui/react-theme": "^9.2.1",
|
|
23
|
-
"@fluentui/react-utilities": "^9.26.
|
|
23
|
+
"@fluentui/react-utilities": "^9.26.3",
|
|
24
24
|
"@griffel/react": "^1.5.32",
|
|
25
25
|
"@swc/helpers": "^0.5.1"
|
|
26
26
|
},
|