@fluentui/react-migration-v0-v9 9.6.12 → 9.6.13
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 +17 -2
- package/dist/index.d.ts +1 -3
- package/lib/components/Flex/Flex.js.map +1 -1
- package/lib/components/FormField/FormFieldShim.js +1 -0
- package/lib/components/FormField/FormFieldShim.js.map +1 -1
- package/lib/components/Video/Video.js +1 -1
- package/lib/components/Video/Video.js.map +1 -1
- package/lib-commonjs/components/Flex/Flex.js.map +1 -1
- package/lib-commonjs/components/FormField/FormFieldShim.js +1 -0
- package/lib-commonjs/components/FormField/FormFieldShim.js.map +1 -1
- package/lib-commonjs/components/Video/Video.js +1 -1
- package/lib-commonjs/components/Video/Video.js.map +1 -1
- package/package.json +7 -7
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,27 @@
|
|
|
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, 06 Nov 2025 14:56:58 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.6.13](https://github.com/microsoft/fluentui/tree/@fluentui/react-migration-v0-v9_v9.6.13)
|
|
8
|
+
|
|
9
|
+
Thu, 06 Nov 2025 14:56:58 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-migration-v0-v9_v9.6.12..@fluentui/react-migration-v0-v9_v9.6.13)
|
|
11
|
+
|
|
12
|
+
### Patches
|
|
13
|
+
|
|
14
|
+
- chore: migrate source to react 19 ([PR #35434](https://github.com/microsoft/fluentui/pull/35434) by martinhochel@microsoft.com)
|
|
15
|
+
- Bump @fluentui/react-aria to v9.17.5 ([PR #35466](https://github.com/microsoft/fluentui/pull/35466) by beachball)
|
|
16
|
+
- Bump @fluentui/react-components to v9.72.5 ([PR #35466](https://github.com/microsoft/fluentui/pull/35466) by beachball)
|
|
17
|
+
- Bump @fluentui/react-context-selector to v9.2.11 ([PR #35466](https://github.com/microsoft/fluentui/pull/35466) by beachball)
|
|
18
|
+
- Bump @fluentui/react-jsx-runtime to v9.3.2 ([PR #35466](https://github.com/microsoft/fluentui/pull/35466) by beachball)
|
|
19
|
+
- Bump @fluentui/react-tabster to v9.26.9 ([PR #35466](https://github.com/microsoft/fluentui/pull/35466) by beachball)
|
|
20
|
+
- Bump @fluentui/react-utilities to v9.25.3 ([PR #35466](https://github.com/microsoft/fluentui/pull/35466) by beachball)
|
|
21
|
+
|
|
7
22
|
## [9.6.12](https://github.com/microsoft/fluentui/tree/@fluentui/react-migration-v0-v9_v9.6.12)
|
|
8
23
|
|
|
9
|
-
Fri, 31 Oct 2025 16:
|
|
24
|
+
Fri, 31 Oct 2025 16:22:06 GMT
|
|
10
25
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-migration-v0-v9_v9.6.11..@fluentui/react-migration-v0-v9_v9.6.12)
|
|
11
26
|
|
|
12
27
|
### Patches
|
package/dist/index.d.ts
CHANGED
|
@@ -161,9 +161,7 @@ export declare const input: {
|
|
|
161
161
|
|
|
162
162
|
export declare const ItemLayout: React_2.ForwardRefExoticComponent<Omit<ItemLayoutSlots, "root"> & Omit<{
|
|
163
163
|
as?: "div" | undefined;
|
|
164
|
-
} & Omit<
|
|
165
|
-
ref?: ((instance: HTMLDivElement | null) => void | React_2.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React_2.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React_2.RefObject<HTMLDivElement> | null | undefined;
|
|
166
|
-
}, "children"> & {
|
|
164
|
+
} & Omit<React_2.DetailedHTMLProps<React_2.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "children"> & {
|
|
167
165
|
children?: any;
|
|
168
166
|
}, "ref"> & React_2.RefAttributes<HTMLDivElement>>;
|
|
169
167
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/Flex/Flex.tsx"],"sourcesContent":["'use client';\n\nimport { mergeClasses } from '@fluentui/react-components';\nimport * as React from 'react';\n\nimport { useFlexStyles } from './Flex.styles';\n\nexport interface FlexProps {\n /** Defines if container should be inline element. */\n inline?: boolean;\n\n /** Sets vertical flow direction. */\n column?: boolean;\n\n /** Allows overflow items to wrap on the next container's line. */\n wrap?: boolean;\n\n /** Controls items alignment in horizontal direction. */\n hAlign?: 'start' | 'center' | 'end' | 'stretch';\n\n /** Controls items alignment in vertical direction. */\n vAlign?: 'start' | 'center' | 'end' | 'stretch';\n\n /** Defines strategy for distributing remaining space between items. */\n space?: 'around' | 'between' | 'evenly';\n\n /** Defines gap between each two adjacent child items. */\n gap?: 'gap.smaller' | 'gap.small' | 'gap.medium' | 'gap.large';\n\n /** Defines container's padding. */\n padding?: 'padding.medium';\n\n /** Orders container to fill all parent's space available. */\n fill?: boolean;\n}\n\nexport const flexClassName = 'fui-Flex';\n\nexport const Flex = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLElement> & FlexProps>((props, ref) => {\n const { children, column, fill, gap, hAlign, inline, padding, space, vAlign, wrap, className, ...rest } = props;\n const classes = useFlexStyles();\n\n const classMaps = React.useMemo(\n () => ({\n alignItems: {\n start: classes.alignItemsFlexStart,\n center: classes.alignItemsCenter,\n end: classes.alignItemsFlexEnd,\n stretch: classes.alignItemsCenter,\n },\n justifyContent: {\n start: classes.justifyContentFlexStart,\n center: classes.justifyContentCenter,\n end: classes.justifyContentFlexEnd,\n stretch: classes.justifyContentStretch,\n },\n justifyContentSpace: {\n around: classes.justifyContentSpaceAround,\n between: classes.justifyContentSpaceBetween,\n evenly: classes.justifyContentSpaceEvenly,\n },\n gapForColumnFlex: {\n 'gap.smaller': classes.gapForColumnFlexSmaller,\n 'gap.small': classes.gapForColumnFlexSmall,\n 'gap.medium': classes.gapForColumnFlexMedium,\n 'gap.large': classes.gapForColumnFlexLarge,\n },\n gapRow: {\n 'gap.smaller': classes.gapForRowFlexSmaller,\n 'gap.small': classes.gapForRowFlexSmall,\n 'gap.medium': classes.gapForRowFlexMedium,\n 'gap.large': classes.gapForRowFlexLarge,\n },\n paddings: {\n 'padding.medium': classes.paddingMedium,\n },\n }),\n [classes],\n );\n\n const flexClasses = mergeClasses(\n flexClassName,\n classes.flex,\n inline && classes.inline,\n column && classes.column,\n hAlign && (column ? classMaps.alignItems[hAlign] : classMaps.justifyContent[hAlign]),\n vAlign && (column ? classMaps.justifyContent[vAlign] : classMaps.alignItems[vAlign]),\n space && classMaps.justifyContentSpace[space],\n wrap && classes.wrap,\n fill && classes.fill,\n gap && (column ? classMaps.gapForColumnFlex[gap] : classMaps.gapRow[gap]),\n padding && classMaps.paddings[padding],\n className,\n );\n\n const content = React.Children.map(children, child => {\n // @ts-expect-error __isFlexItem is added to the React type property by N*\n const isFlexItemElement: boolean = child?.type?.__isFlexItem;\n\n return isFlexItemElement\n ? React.cloneElement(child as React.ReactElement
|
|
1
|
+
{"version":3,"sources":["../src/components/Flex/Flex.tsx"],"sourcesContent":["'use client';\n\nimport { mergeClasses } from '@fluentui/react-components';\nimport * as React from 'react';\n\nimport { useFlexStyles } from './Flex.styles';\n\nexport interface FlexProps {\n /** Defines if container should be inline element. */\n inline?: boolean;\n\n /** Sets vertical flow direction. */\n column?: boolean;\n\n /** Allows overflow items to wrap on the next container's line. */\n wrap?: boolean;\n\n /** Controls items alignment in horizontal direction. */\n hAlign?: 'start' | 'center' | 'end' | 'stretch';\n\n /** Controls items alignment in vertical direction. */\n vAlign?: 'start' | 'center' | 'end' | 'stretch';\n\n /** Defines strategy for distributing remaining space between items. */\n space?: 'around' | 'between' | 'evenly';\n\n /** Defines gap between each two adjacent child items. */\n gap?: 'gap.smaller' | 'gap.small' | 'gap.medium' | 'gap.large';\n\n /** Defines container's padding. */\n padding?: 'padding.medium';\n\n /** Orders container to fill all parent's space available. */\n fill?: boolean;\n}\n\nexport const flexClassName = 'fui-Flex';\n\nexport const Flex = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLElement> & FlexProps>((props, ref) => {\n const { children, column, fill, gap, hAlign, inline, padding, space, vAlign, wrap, className, ...rest } = props;\n const classes = useFlexStyles();\n\n const classMaps = React.useMemo(\n () => ({\n alignItems: {\n start: classes.alignItemsFlexStart,\n center: classes.alignItemsCenter,\n end: classes.alignItemsFlexEnd,\n stretch: classes.alignItemsCenter,\n },\n justifyContent: {\n start: classes.justifyContentFlexStart,\n center: classes.justifyContentCenter,\n end: classes.justifyContentFlexEnd,\n stretch: classes.justifyContentStretch,\n },\n justifyContentSpace: {\n around: classes.justifyContentSpaceAround,\n between: classes.justifyContentSpaceBetween,\n evenly: classes.justifyContentSpaceEvenly,\n },\n gapForColumnFlex: {\n 'gap.smaller': classes.gapForColumnFlexSmaller,\n 'gap.small': classes.gapForColumnFlexSmall,\n 'gap.medium': classes.gapForColumnFlexMedium,\n 'gap.large': classes.gapForColumnFlexLarge,\n },\n gapRow: {\n 'gap.smaller': classes.gapForRowFlexSmaller,\n 'gap.small': classes.gapForRowFlexSmall,\n 'gap.medium': classes.gapForRowFlexMedium,\n 'gap.large': classes.gapForRowFlexLarge,\n },\n paddings: {\n 'padding.medium': classes.paddingMedium,\n },\n }),\n [classes],\n );\n\n const flexClasses = mergeClasses(\n flexClassName,\n classes.flex,\n inline && classes.inline,\n column && classes.column,\n hAlign && (column ? classMaps.alignItems[hAlign] : classMaps.justifyContent[hAlign]),\n vAlign && (column ? classMaps.justifyContent[vAlign] : classMaps.alignItems[vAlign]),\n space && classMaps.justifyContentSpace[space],\n wrap && classes.wrap,\n fill && classes.fill,\n gap && (column ? classMaps.gapForColumnFlex[gap] : classMaps.gapRow[gap]),\n padding && classMaps.paddings[padding],\n className,\n );\n\n const content = React.Children.map(children, child => {\n // @ts-expect-error __isFlexItem is added to the React type property by N*\n const isFlexItemElement: boolean = child?.type?.__isFlexItem;\n\n return isFlexItemElement\n ? // eslint-disable-next-line @typescript-eslint/no-explicit-any\n React.cloneElement(child as React.ReactElement<any>, {\n flexDirection: column ? 'column' : 'row',\n })\n : child;\n });\n\n return (\n <div ref={ref} className={flexClasses} {...rest}>\n {content}\n </div>\n );\n});\n\nFlex.displayName = 'Flex';\n"],"names":["mergeClasses","React","useFlexStyles","flexClassName","Flex","forwardRef","props","ref","children","column","fill","gap","hAlign","inline","padding","space","vAlign","wrap","className","rest","classes","classMaps","useMemo","alignItems","start","alignItemsFlexStart","center","alignItemsCenter","end","alignItemsFlexEnd","stretch","justifyContent","justifyContentFlexStart","justifyContentCenter","justifyContentFlexEnd","justifyContentStretch","justifyContentSpace","around","justifyContentSpaceAround","between","justifyContentSpaceBetween","evenly","justifyContentSpaceEvenly","gapForColumnFlex","gapForColumnFlexSmaller","gapForColumnFlexSmall","gapForColumnFlexMedium","gapForColumnFlexLarge","gapRow","gapForRowFlexSmaller","gapForRowFlexSmall","gapForRowFlexMedium","gapForRowFlexLarge","paddings","paddingMedium","flexClasses","flex","content","Children","map","child","isFlexItemElement","type","__isFlexItem","cloneElement","flexDirection","div","displayName"],"mappings":"AAAA;AAEA,SAASA,YAAY,QAAQ,6BAA6B;AAC1D,YAAYC,WAAW,QAAQ;AAE/B,SAASC,aAAa,QAAQ,gBAAgB;AA+B9C,OAAO,MAAMC,gBAAgB,WAAW;AAExC,OAAO,MAAMC,qBAAOH,MAAMI,UAAU,CAAgE,CAACC,OAAOC;IAC1G,MAAM,EAAEC,QAAQ,EAAEC,MAAM,EAAEC,IAAI,EAAEC,GAAG,EAAEC,MAAM,EAAEC,MAAM,EAAEC,OAAO,EAAEC,KAAK,EAAEC,MAAM,EAAEC,IAAI,EAAEC,SAAS,EAAE,GAAGC,MAAM,GAAGb;IAC1G,MAAMc,UAAUlB;IAEhB,MAAMmB,YAAYpB,MAAMqB,OAAO,CAC7B,IAAO,CAAA;YACLC,YAAY;gBACVC,OAAOJ,QAAQK,mBAAmB;gBAClCC,QAAQN,QAAQO,gBAAgB;gBAChCC,KAAKR,QAAQS,iBAAiB;gBAC9BC,SAASV,QAAQO,gBAAgB;YACnC;YACAI,gBAAgB;gBACdP,OAAOJ,QAAQY,uBAAuB;gBACtCN,QAAQN,QAAQa,oBAAoB;gBACpCL,KAAKR,QAAQc,qBAAqB;gBAClCJ,SAASV,QAAQe,qBAAqB;YACxC;YACAC,qBAAqB;gBACnBC,QAAQjB,QAAQkB,yBAAyB;gBACzCC,SAASnB,QAAQoB,0BAA0B;gBAC3CC,QAAQrB,QAAQsB,yBAAyB;YAC3C;YACAC,kBAAkB;gBAChB,eAAevB,QAAQwB,uBAAuB;gBAC9C,aAAaxB,QAAQyB,qBAAqB;gBAC1C,cAAczB,QAAQ0B,sBAAsB;gBAC5C,aAAa1B,QAAQ2B,qBAAqB;YAC5C;YACAC,QAAQ;gBACN,eAAe5B,QAAQ6B,oBAAoB;gBAC3C,aAAa7B,QAAQ8B,kBAAkB;gBACvC,cAAc9B,QAAQ+B,mBAAmB;gBACzC,aAAa/B,QAAQgC,kBAAkB;YACzC;YACAC,UAAU;gBACR,kBAAkBjC,QAAQkC,aAAa;YACzC;QACF,CAAA,GACA;QAAClC;KAAQ;IAGX,MAAMmC,cAAcvD,aAClBG,eACAiB,QAAQoC,IAAI,EACZ3C,UAAUO,QAAQP,MAAM,EACxBJ,UAAUW,QAAQX,MAAM,EACxBG,UAAWH,CAAAA,SAASY,UAAUE,UAAU,CAACX,OAAO,GAAGS,UAAUU,cAAc,CAACnB,OAAO,AAAD,GAClFI,UAAWP,CAAAA,SAASY,UAAUU,cAAc,CAACf,OAAO,GAAGK,UAAUE,UAAU,CAACP,OAAO,AAAD,GAClFD,SAASM,UAAUe,mBAAmB,CAACrB,MAAM,EAC7CE,QAAQG,QAAQH,IAAI,EACpBP,QAAQU,QAAQV,IAAI,EACpBC,OAAQF,CAAAA,SAASY,UAAUsB,gBAAgB,CAAChC,IAAI,GAAGU,UAAU2B,MAAM,CAACrC,IAAI,AAAD,GACvEG,WAAWO,UAAUgC,QAAQ,CAACvC,QAAQ,EACtCI;IAGF,MAAMuC,UAAUxD,MAAMyD,QAAQ,CAACC,GAAG,CAACnD,UAAUoD,CAAAA;YAERA;QADnC,0EAA0E;QAC1E,MAAMC,oBAA6BD,kBAAAA,6BAAAA,cAAAA,MAAOE,IAAI,cAAXF,kCAAAA,YAAaG,YAAY;QAE5D,OAAOF,kCAEH5D,MAAM+D,YAAY,CAACJ,OAAkC;YACnDK,eAAexD,SAAS,WAAW;QACrC,KACAmD;IACN;IAEA,qBACE,oBAACM;QAAI3D,KAAKA;QAAKW,WAAWqC;QAAc,GAAGpC,IAAI;OAC5CsC;AAGP,GAAG;AAEHrD,KAAK+D,WAAW,GAAG"}
|
|
@@ -28,6 +28,7 @@ export const FormFieldShim = /*#__PURE__*/ React.forwardRef((props, ref)=>{
|
|
|
28
28
|
// Use the Field's child render function to pass the field control props to the child
|
|
29
29
|
fieldProps.children = (fieldControlProps)=>/*#__PURE__*/ React.cloneElement(child, {
|
|
30
30
|
...fieldControlProps,
|
|
31
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
31
32
|
...child.props
|
|
32
33
|
});
|
|
33
34
|
} else {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/FormField/FormFieldShim.tsx"],"sourcesContent":["'use client';\n\nimport {\n FieldProps,\n renderField_unstable,\n useFieldContextValues_unstable,\n useFieldStyles_unstable,\n useField_unstable,\n} from '@fluentui/react-components';\nimport type { ObjectShorthandValue } from '@fluentui/react-northstar';\n\nimport * as React from 'react';\n\ntype WithContent = ObjectShorthandValue<React.HTMLAttributes<HTMLDivElement>> | string;\n\n/**\n *\n */\ntype CustomInputFieldProps = React.PropsWithChildren<{\n /**\n * Message to be shown when error state is true\n */\n errorMessage?: WithContent;\n /**\n * Whether the field label should be marked as required.\n */\n required?: boolean;\n /**\n * Control to be rendered\n */\n control?: ObjectShorthandValue<{\n /**\n * Control content\n */\n content?: React.ReactNode;\n }> & {\n /**\n * Error state\n */\n error?: 'true' | 'false';\n };\n /**\n * Label to be rendered\n */\n label?: WithContent;\n}>;\n\nexport const FormFieldShim = React.forwardRef<HTMLInputElement, CustomInputFieldProps>((props, ref) => {\n const { errorMessage, required, control, label } = props;\n const fieldProps: FieldProps = { required };\n\n if (errorMessage && control?.error === 'true') {\n fieldProps.validationState = 'error';\n if (typeof errorMessage === 'object') {\n fieldProps.validationMessage = errorMessage.content;\n }\n if (typeof errorMessage === 'string') {\n fieldProps.validationMessage = errorMessage;\n }\n }\n\n if (label) {\n if (typeof label === 'object') {\n fieldProps.label = label.content;\n } else {\n fieldProps.label = label;\n }\n }\n\n const children: FieldProps['children'] = props.children || control?.content;\n\n if (React.isValidElement(children)) {\n const child: React.ReactElement = children;\n\n // Use the Field's child render function to pass the field control props to the child\n fieldProps.children = fieldControlProps
|
|
1
|
+
{"version":3,"sources":["../src/components/FormField/FormFieldShim.tsx"],"sourcesContent":["'use client';\n\nimport {\n FieldProps,\n renderField_unstable,\n useFieldContextValues_unstable,\n useFieldStyles_unstable,\n useField_unstable,\n} from '@fluentui/react-components';\nimport type { ObjectShorthandValue } from '@fluentui/react-northstar';\n\nimport * as React from 'react';\n\ntype WithContent = ObjectShorthandValue<React.HTMLAttributes<HTMLDivElement>> | string;\n\n/**\n *\n */\ntype CustomInputFieldProps = React.PropsWithChildren<{\n /**\n * Message to be shown when error state is true\n */\n errorMessage?: WithContent;\n /**\n * Whether the field label should be marked as required.\n */\n required?: boolean;\n /**\n * Control to be rendered\n */\n control?: ObjectShorthandValue<{\n /**\n * Control content\n */\n content?: React.ReactNode;\n }> & {\n /**\n * Error state\n */\n error?: 'true' | 'false';\n };\n /**\n * Label to be rendered\n */\n label?: WithContent;\n}>;\n\nexport const FormFieldShim = React.forwardRef<HTMLInputElement, CustomInputFieldProps>((props, ref) => {\n const { errorMessage, required, control, label } = props;\n const fieldProps: FieldProps = { required };\n\n if (errorMessage && control?.error === 'true') {\n fieldProps.validationState = 'error';\n if (typeof errorMessage === 'object') {\n fieldProps.validationMessage = errorMessage.content;\n }\n if (typeof errorMessage === 'string') {\n fieldProps.validationMessage = errorMessage;\n }\n }\n\n if (label) {\n if (typeof label === 'object') {\n fieldProps.label = label.content;\n } else {\n fieldProps.label = label;\n }\n }\n\n const children: FieldProps['children'] = props.children || control?.content;\n\n if (React.isValidElement(children)) {\n const child: React.ReactElement = children;\n\n // Use the Field's child render function to pass the field control props to the child\n fieldProps.children = fieldControlProps =>\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;AAEA,SAEEA,oBAAoB,EACpBC,8BAA8B,EAC9BC,uBAAuB,EACvBC,iBAAiB,QACZ,6BAA6B;AAGpC,YAAYC,WAAW,QAAQ;AAoC/B,OAAO,MAAMC,8BAAgBD,MAAME,UAAU,CAA0C,CAACC,OAAOC;IAC7F,MAAM,EAAEC,YAAY,EAAEC,QAAQ,EAAEC,OAAO,EAAEC,KAAK,EAAE,GAAGL;IACnD,MAAMM,aAAyB;QAAEH;IAAS;IAE1C,IAAID,gBAAgBE,CAAAA,oBAAAA,8BAAAA,QAASG,KAAK,MAAK,QAAQ;QAC7CD,WAAWE,eAAe,GAAG;QAC7B,IAAI,OAAON,iBAAiB,UAAU;YACpCI,WAAWG,iBAAiB,GAAGP,aAAaQ,OAAO;QACrD;QACA,IAAI,OAAOR,iBAAiB,UAAU;YACpCI,WAAWG,iBAAiB,GAAGP;QACjC;IACF;IAEA,IAAIG,OAAO;QACT,IAAI,OAAOA,UAAU,UAAU;YAC7BC,WAAWD,KAAK,GAAGA,MAAMK,OAAO;QAClC,OAAO;YACLJ,WAAWD,KAAK,GAAGA;QACrB;IACF;IAEA,MAAMM,WAAmCX,MAAMW,QAAQ,KAAIP,oBAAAA,8BAAAA,QAASM,OAAO;IAE3E,kBAAIb,MAAMe,cAAc,CAACD,WAAW;QAClC,MAAME,QAA4BF;QAElC,qFAAqF;QACrFL,WAAWK,QAAQ,GAAGG,CAAAA,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"}
|
|
@@ -6,7 +6,7 @@ export const videoClassName = 'fui-Video';
|
|
|
6
6
|
export const Video = /*#__PURE__*/ React.forwardRef((props, ref)=>{
|
|
7
7
|
'use no memo';
|
|
8
8
|
const { className, muted, ...rest } = props;
|
|
9
|
-
const videoRef = React.useRef();
|
|
9
|
+
const videoRef = React.useRef(null);
|
|
10
10
|
const classes = useVideoStyles();
|
|
11
11
|
React.useEffect(()=>{
|
|
12
12
|
// this is a workaround for a potential memory leak in Chromium which retains a Detached HTMLVideoElement when <video autoplay> is unmounted
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/Video/Video.tsx"],"sourcesContent":["'use client';\n\nimport { mergeClasses, useMergedRefs } from '@fluentui/react-components';\nimport * as React from 'react';\nimport { useVideoStyles } from './Video.styles';\n\nexport const videoClassName = 'fui-Video';\n\n/**\n * Video component props\n */\nexport interface VideoProps extends React.VideoHTMLAttributes<HTMLVideoElement> {\n /**\n * The source URL of the video\n */\n src: string;\n\n /**\n * Whether the video should start playing automatically\n * @default false\n */\n autoPlay?: boolean;\n\n /**\n * Whether the video should display controls\n * @default true\n */\n controls?: boolean;\n\n /**\n * Whether the video should loop\n */\n loop?: boolean;\n\n /**\n * Whether the video should be muted\n */\n muted?: boolean;\n\n /**\n * The URL of an image to display while the video is loading\n */\n poster?: string;\n}\n\nexport const Video = React.forwardRef<HTMLVideoElement, VideoProps>((props, ref) => {\n 'use no memo';\n\n const { className, muted, ...rest } = props;\n\n const videoRef = React.useRef<HTMLVideoElement>();\n\n const classes = useVideoStyles();\n React.useEffect(() => {\n // this is a workaround for a potential memory leak in Chromium which retains a Detached HTMLVideoElement when <video autoplay> is unmounted\n // https://bugs.chromium.org/p/chromium/issues/detail?id=969049\n return () => {\n if (videoRef?.current) {\n // we want to perform the cleanup on the latest element rendered\n // eslint-disable-next-line react-hooks/exhaustive-deps\n videoRef.current.src = '';\n }\n };\n }, [videoRef]);\n\n React.useEffect(() => {\n // React doesn't guarantee that props will be set:\n // https://github.com/facebook/react/issues/10389\n if (videoRef.current) {\n videoRef.current.muted = !!muted;\n }\n }, [muted]);\n\n return (\n <video\n ref={useMergedRefs(ref, videoRef) as React.Ref<HTMLVideoElement>}\n role=\"application\"\n className={mergeClasses(videoClassName, classes.root, className)}\n controls={true}\n autoPlay={false}\n muted={muted}\n {...rest}\n />\n );\n});\n\nVideo.displayName = 'Video';\n"],"names":["mergeClasses","useMergedRefs","React","useVideoStyles","videoClassName","Video","forwardRef","props","ref","className","muted","rest","videoRef","useRef","classes","useEffect","current","src","video","role","root","controls","autoPlay","displayName"],"mappings":"AAAA;AAEA,SAASA,YAAY,EAAEC,aAAa,QAAQ,6BAA6B;AACzE,YAAYC,WAAW,QAAQ;AAC/B,SAASC,cAAc,QAAQ,iBAAiB;AAEhD,OAAO,MAAMC,iBAAiB,YAAY;AAuC1C,OAAO,MAAMC,sBAAQH,MAAMI,UAAU,CAA+B,CAACC,OAAOC;IAC1E;IAEA,MAAM,EAAEC,SAAS,EAAEC,KAAK,EAAE,GAAGC,MAAM,GAAGJ;IAEtC,MAAMK,WAAWV,MAAMW,MAAM;
|
|
1
|
+
{"version":3,"sources":["../src/components/Video/Video.tsx"],"sourcesContent":["'use client';\n\nimport { mergeClasses, useMergedRefs } from '@fluentui/react-components';\nimport * as React from 'react';\nimport { useVideoStyles } from './Video.styles';\n\nexport const videoClassName = 'fui-Video';\n\n/**\n * Video component props\n */\nexport interface VideoProps extends React.VideoHTMLAttributes<HTMLVideoElement> {\n /**\n * The source URL of the video\n */\n src: string;\n\n /**\n * Whether the video should start playing automatically\n * @default false\n */\n autoPlay?: boolean;\n\n /**\n * Whether the video should display controls\n * @default true\n */\n controls?: boolean;\n\n /**\n * Whether the video should loop\n */\n loop?: boolean;\n\n /**\n * Whether the video should be muted\n */\n muted?: boolean;\n\n /**\n * The URL of an image to display while the video is loading\n */\n poster?: string;\n}\n\nexport const Video = React.forwardRef<HTMLVideoElement, VideoProps>((props, ref) => {\n 'use no memo';\n\n const { className, muted, ...rest } = props;\n\n const videoRef = React.useRef<HTMLVideoElement>(null);\n\n const classes = useVideoStyles();\n React.useEffect(() => {\n // this is a workaround for a potential memory leak in Chromium which retains a Detached HTMLVideoElement when <video autoplay> is unmounted\n // https://bugs.chromium.org/p/chromium/issues/detail?id=969049\n return () => {\n if (videoRef?.current) {\n // we want to perform the cleanup on the latest element rendered\n // eslint-disable-next-line react-hooks/exhaustive-deps\n videoRef.current.src = '';\n }\n };\n }, [videoRef]);\n\n React.useEffect(() => {\n // React doesn't guarantee that props will be set:\n // https://github.com/facebook/react/issues/10389\n if (videoRef.current) {\n videoRef.current.muted = !!muted;\n }\n }, [muted]);\n\n return (\n <video\n ref={useMergedRefs(ref, videoRef) as React.Ref<HTMLVideoElement>}\n role=\"application\"\n className={mergeClasses(videoClassName, classes.root, className)}\n controls={true}\n autoPlay={false}\n muted={muted}\n {...rest}\n />\n );\n});\n\nVideo.displayName = 'Video';\n"],"names":["mergeClasses","useMergedRefs","React","useVideoStyles","videoClassName","Video","forwardRef","props","ref","className","muted","rest","videoRef","useRef","classes","useEffect","current","src","video","role","root","controls","autoPlay","displayName"],"mappings":"AAAA;AAEA,SAASA,YAAY,EAAEC,aAAa,QAAQ,6BAA6B;AACzE,YAAYC,WAAW,QAAQ;AAC/B,SAASC,cAAc,QAAQ,iBAAiB;AAEhD,OAAO,MAAMC,iBAAiB,YAAY;AAuC1C,OAAO,MAAMC,sBAAQH,MAAMI,UAAU,CAA+B,CAACC,OAAOC;IAC1E;IAEA,MAAM,EAAEC,SAAS,EAAEC,KAAK,EAAE,GAAGC,MAAM,GAAGJ;IAEtC,MAAMK,WAAWV,MAAMW,MAAM,CAAmB;IAEhD,MAAMC,UAAUX;IAChBD,MAAMa,SAAS,CAAC;QACd,4IAA4I;QAC5I,+DAA+D;QAC/D,OAAO;YACL,IAAIH,qBAAAA,+BAAAA,SAAUI,OAAO,EAAE;gBACrB,gEAAgE;gBAChE,uDAAuD;gBACvDJ,SAASI,OAAO,CAACC,GAAG,GAAG;YACzB;QACF;IACF,GAAG;QAACL;KAAS;IAEbV,MAAMa,SAAS,CAAC;QACd,kDAAkD;QAClD,iDAAiD;QACjD,IAAIH,SAASI,OAAO,EAAE;YACpBJ,SAASI,OAAO,CAACN,KAAK,GAAG,CAAC,CAACA;QAC7B;IACF,GAAG;QAACA;KAAM;IAEV,qBACE,oBAACQ;QACCV,KAAKP,cAAcO,KAAKI;QACxBO,MAAK;QACLV,WAAWT,aAAaI,gBAAgBU,QAAQM,IAAI,EAAEX;QACtDY,UAAU;QACVC,UAAU;QACVZ,OAAOA;QACN,GAAGC,IAAI;;AAGd,GAAG;AAEHN,MAAMkB,WAAW,GAAG"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/Flex/Flex.tsx"],"sourcesContent":["'use client';\n\nimport { mergeClasses } from '@fluentui/react-components';\nimport * as React from 'react';\n\nimport { useFlexStyles } from './Flex.styles';\n\nexport interface FlexProps {\n /** Defines if container should be inline element. */\n inline?: boolean;\n\n /** Sets vertical flow direction. */\n column?: boolean;\n\n /** Allows overflow items to wrap on the next container's line. */\n wrap?: boolean;\n\n /** Controls items alignment in horizontal direction. */\n hAlign?: 'start' | 'center' | 'end' | 'stretch';\n\n /** Controls items alignment in vertical direction. */\n vAlign?: 'start' | 'center' | 'end' | 'stretch';\n\n /** Defines strategy for distributing remaining space between items. */\n space?: 'around' | 'between' | 'evenly';\n\n /** Defines gap between each two adjacent child items. */\n gap?: 'gap.smaller' | 'gap.small' | 'gap.medium' | 'gap.large';\n\n /** Defines container's padding. */\n padding?: 'padding.medium';\n\n /** Orders container to fill all parent's space available. */\n fill?: boolean;\n}\n\nexport const flexClassName = 'fui-Flex';\n\nexport const Flex = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLElement> & FlexProps>((props, ref) => {\n const { children, column, fill, gap, hAlign, inline, padding, space, vAlign, wrap, className, ...rest } = props;\n const classes = useFlexStyles();\n\n const classMaps = React.useMemo(\n () => ({\n alignItems: {\n start: classes.alignItemsFlexStart,\n center: classes.alignItemsCenter,\n end: classes.alignItemsFlexEnd,\n stretch: classes.alignItemsCenter,\n },\n justifyContent: {\n start: classes.justifyContentFlexStart,\n center: classes.justifyContentCenter,\n end: classes.justifyContentFlexEnd,\n stretch: classes.justifyContentStretch,\n },\n justifyContentSpace: {\n around: classes.justifyContentSpaceAround,\n between: classes.justifyContentSpaceBetween,\n evenly: classes.justifyContentSpaceEvenly,\n },\n gapForColumnFlex: {\n 'gap.smaller': classes.gapForColumnFlexSmaller,\n 'gap.small': classes.gapForColumnFlexSmall,\n 'gap.medium': classes.gapForColumnFlexMedium,\n 'gap.large': classes.gapForColumnFlexLarge,\n },\n gapRow: {\n 'gap.smaller': classes.gapForRowFlexSmaller,\n 'gap.small': classes.gapForRowFlexSmall,\n 'gap.medium': classes.gapForRowFlexMedium,\n 'gap.large': classes.gapForRowFlexLarge,\n },\n paddings: {\n 'padding.medium': classes.paddingMedium,\n },\n }),\n [classes],\n );\n\n const flexClasses = mergeClasses(\n flexClassName,\n classes.flex,\n inline && classes.inline,\n column && classes.column,\n hAlign && (column ? classMaps.alignItems[hAlign] : classMaps.justifyContent[hAlign]),\n vAlign && (column ? classMaps.justifyContent[vAlign] : classMaps.alignItems[vAlign]),\n space && classMaps.justifyContentSpace[space],\n wrap && classes.wrap,\n fill && classes.fill,\n gap && (column ? classMaps.gapForColumnFlex[gap] : classMaps.gapRow[gap]),\n padding && classMaps.paddings[padding],\n className,\n );\n\n const content = React.Children.map(children, child => {\n // @ts-expect-error __isFlexItem is added to the React type property by N*\n const isFlexItemElement: boolean = child?.type?.__isFlexItem;\n\n return isFlexItemElement\n ? React.cloneElement(child as React.ReactElement
|
|
1
|
+
{"version":3,"sources":["../src/components/Flex/Flex.tsx"],"sourcesContent":["'use client';\n\nimport { mergeClasses } from '@fluentui/react-components';\nimport * as React from 'react';\n\nimport { useFlexStyles } from './Flex.styles';\n\nexport interface FlexProps {\n /** Defines if container should be inline element. */\n inline?: boolean;\n\n /** Sets vertical flow direction. */\n column?: boolean;\n\n /** Allows overflow items to wrap on the next container's line. */\n wrap?: boolean;\n\n /** Controls items alignment in horizontal direction. */\n hAlign?: 'start' | 'center' | 'end' | 'stretch';\n\n /** Controls items alignment in vertical direction. */\n vAlign?: 'start' | 'center' | 'end' | 'stretch';\n\n /** Defines strategy for distributing remaining space between items. */\n space?: 'around' | 'between' | 'evenly';\n\n /** Defines gap between each two adjacent child items. */\n gap?: 'gap.smaller' | 'gap.small' | 'gap.medium' | 'gap.large';\n\n /** Defines container's padding. */\n padding?: 'padding.medium';\n\n /** Orders container to fill all parent's space available. */\n fill?: boolean;\n}\n\nexport const flexClassName = 'fui-Flex';\n\nexport const Flex = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLElement> & FlexProps>((props, ref) => {\n const { children, column, fill, gap, hAlign, inline, padding, space, vAlign, wrap, className, ...rest } = props;\n const classes = useFlexStyles();\n\n const classMaps = React.useMemo(\n () => ({\n alignItems: {\n start: classes.alignItemsFlexStart,\n center: classes.alignItemsCenter,\n end: classes.alignItemsFlexEnd,\n stretch: classes.alignItemsCenter,\n },\n justifyContent: {\n start: classes.justifyContentFlexStart,\n center: classes.justifyContentCenter,\n end: classes.justifyContentFlexEnd,\n stretch: classes.justifyContentStretch,\n },\n justifyContentSpace: {\n around: classes.justifyContentSpaceAround,\n between: classes.justifyContentSpaceBetween,\n evenly: classes.justifyContentSpaceEvenly,\n },\n gapForColumnFlex: {\n 'gap.smaller': classes.gapForColumnFlexSmaller,\n 'gap.small': classes.gapForColumnFlexSmall,\n 'gap.medium': classes.gapForColumnFlexMedium,\n 'gap.large': classes.gapForColumnFlexLarge,\n },\n gapRow: {\n 'gap.smaller': classes.gapForRowFlexSmaller,\n 'gap.small': classes.gapForRowFlexSmall,\n 'gap.medium': classes.gapForRowFlexMedium,\n 'gap.large': classes.gapForRowFlexLarge,\n },\n paddings: {\n 'padding.medium': classes.paddingMedium,\n },\n }),\n [classes],\n );\n\n const flexClasses = mergeClasses(\n flexClassName,\n classes.flex,\n inline && classes.inline,\n column && classes.column,\n hAlign && (column ? classMaps.alignItems[hAlign] : classMaps.justifyContent[hAlign]),\n vAlign && (column ? classMaps.justifyContent[vAlign] : classMaps.alignItems[vAlign]),\n space && classMaps.justifyContentSpace[space],\n wrap && classes.wrap,\n fill && classes.fill,\n gap && (column ? classMaps.gapForColumnFlex[gap] : classMaps.gapRow[gap]),\n padding && classMaps.paddings[padding],\n className,\n );\n\n const content = React.Children.map(children, child => {\n // @ts-expect-error __isFlexItem is added to the React type property by N*\n const isFlexItemElement: boolean = child?.type?.__isFlexItem;\n\n return isFlexItemElement\n ? // eslint-disable-next-line @typescript-eslint/no-explicit-any\n React.cloneElement(child as React.ReactElement<any>, {\n flexDirection: column ? 'column' : 'row',\n })\n : child;\n });\n\n return (\n <div ref={ref} className={flexClasses} {...rest}>\n {content}\n </div>\n );\n});\n\nFlex.displayName = 'Flex';\n"],"names":["mergeClasses","React","useFlexStyles","flexClassName","Flex","forwardRef","props","ref","children","column","fill","gap","hAlign","inline","padding","space","vAlign","wrap","className","rest","classes","classMaps","useMemo","alignItems","start","alignItemsFlexStart","center","alignItemsCenter","end","alignItemsFlexEnd","stretch","justifyContent","justifyContentFlexStart","justifyContentCenter","justifyContentFlexEnd","justifyContentStretch","justifyContentSpace","around","justifyContentSpaceAround","between","justifyContentSpaceBetween","evenly","justifyContentSpaceEvenly","gapForColumnFlex","gapForColumnFlexSmaller","gapForColumnFlexSmall","gapForColumnFlexMedium","gapForColumnFlexLarge","gapRow","gapForRowFlexSmaller","gapForRowFlexSmall","gapForRowFlexMedium","gapForRowFlexLarge","paddings","paddingMedium","flexClasses","flex","content","Children","map","child","isFlexItemElement","type","__isFlexItem","cloneElement","flexDirection","div","displayName"],"mappings":"AAAA;;;;;;;;;;;;IAsCaI,IAAAA;;;iBAFAD;;;;;iCAlCgB,6BAA6B;iEACnC,QAAQ;4BAED,gBAAgB;AA+BvC,MAAMA,gBAAgB,WAAW;AAEjC,aAAMC,WAAAA,GAAOH,OAAMI,UAAU,CAAgE,CAACC,OAAOC;IAC1G,MAAM,EAAEC,QAAQ,EAAEC,MAAM,EAAEC,IAAI,EAAEC,GAAG,EAAEC,MAAM,EAAEC,MAAM,EAAEC,OAAO,EAAEC,KAAK,EAAEC,MAAM,EAAEC,IAAI,EAAEC,SAAS,EAAE,GAAGC,MAAM,GAAGb;IAC1G,MAAMc,UAAUlB,6BAAAA;IAEhB,MAAMmB,YAAYpB,OAAMqB,OAAO,CAC7B,IAAO,CAAA;YACLC,YAAY;gBACVC,OAAOJ,QAAQK,mBAAmB;gBAClCC,QAAQN,QAAQO,gBAAgB;gBAChCC,KAAKR,QAAQS,iBAAiB;gBAC9BC,SAASV,QAAQO,gBAAgB;YACnC;YACAI,gBAAgB;gBACdP,OAAOJ,QAAQY,uBAAuB;gBACtCN,QAAQN,QAAQa,oBAAoB;gBACpCL,KAAKR,QAAQc,qBAAqB;gBAClCJ,SAASV,QAAQe,qBAAqB;YACxC;YACAC,qBAAqB;gBACnBC,QAAQjB,QAAQkB,yBAAyB;gBACzCC,SAASnB,QAAQoB,0BAA0B;gBAC3CC,QAAQrB,QAAQsB,yBAAyB;YAC3C;YACAC,kBAAkB;gBAChB,eAAevB,QAAQwB,uBAAuB;gBAC9C,aAAaxB,QAAQyB,qBAAqB;gBAC1C,cAAczB,QAAQ0B,sBAAsB;gBAC5C,aAAa1B,QAAQ2B,qBAAqB;YAC5C;YACAC,QAAQ;gBACN,eAAe5B,QAAQ6B,oBAAoB;gBAC3C,aAAa7B,QAAQ8B,kBAAkB;gBACvC,cAAc9B,QAAQ+B,mBAAmB;gBACzC,aAAa/B,QAAQgC,kBAAkB;YACzC;YACAC,UAAU;gBACR,kBAAkBjC,QAAQkC,aAAa;YACzC;QACF,CAAA,GACA;QAAClC;KAAQ;IAGX,MAAMmC,kBAAcvD,6BAAAA,EAClBG,eACAiB,QAAQoC,IAAI,EACZ3C,UAAUO,QAAQP,MAAM,EACxBJ,UAAUW,QAAQX,MAAM,EACxBG,UAAWH,CAAAA,SAASY,UAAUE,UAAU,CAACX,OAAO,GAAGS,UAAUU,cAAc,CAACnB,OAAAA,AAAM,GAClFI,UAAWP,CAAAA,SAASY,UAAUU,cAAc,CAACf,OAAO,GAAGK,UAAUE,UAAU,CAACP,OAAAA,AAAM,GAClFD,SAASM,UAAUe,mBAAmB,CAACrB,MAAM,EAC7CE,QAAQG,QAAQH,IAAI,EACpBP,QAAQU,QAAQV,IAAI,EACpBC,OAAQF,CAAAA,SAASY,UAAUsB,gBAAgB,CAAChC,IAAI,GAAGU,UAAU2B,MAAM,CAACrC,IAAAA,AAAG,GACvEG,WAAWO,UAAUgC,QAAQ,CAACvC,QAAQ,EACtCI;IAGF,MAAMuC,UAAUxD,OAAMyD,QAAQ,CAACC,GAAG,CAACnD,UAAUoD,CAAAA;YAERA;QADnC,0EAA0E;QAC1E,MAAMC,oBAA6BD,UAAAA,QAAAA,UAAAA,KAAAA,IAAAA,KAAAA,IAAAA,CAAAA,cAAAA,MAAOE,IAAAA,AAAI,MAAA,QAAXF,gBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,YAAaG,YAAY;QAE5D,OAAOF,oBAAAA,WAAAA,GAEH5D,OAAM+D,YAAY,CAACJ,OAAkC;YACnDK,eAAexD,SAAS,WAAW;QACrC,KACAmD;IACN;IAEA,OAAA,WAAA,GACE,OAAA,aAAA,CAACM,OAAAA;QAAI3D,KAAKA;QAAKW,WAAWqC;QAAc,GAAGpC,IAAI;OAC5CsC;AAGP,GAAG;AAEHrD,KAAK+D,WAAW,GAAG"}
|
|
@@ -39,6 +39,7 @@ const FormFieldShim = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
|
|
|
39
39
|
// Use the Field's child render function to pass the field control props to the child
|
|
40
40
|
fieldProps.children = (fieldControlProps)=>/*#__PURE__*/ _react.cloneElement(child, {
|
|
41
41
|
...fieldControlProps,
|
|
42
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
42
43
|
...child.props
|
|
43
44
|
});
|
|
44
45
|
} else {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/FormField/FormFieldShim.tsx"],"sourcesContent":["'use client';\n\nimport {\n FieldProps,\n renderField_unstable,\n useFieldContextValues_unstable,\n useFieldStyles_unstable,\n useField_unstable,\n} from '@fluentui/react-components';\nimport type { ObjectShorthandValue } from '@fluentui/react-northstar';\n\nimport * as React from 'react';\n\ntype WithContent = ObjectShorthandValue<React.HTMLAttributes<HTMLDivElement>> | string;\n\n/**\n *\n */\ntype CustomInputFieldProps = React.PropsWithChildren<{\n /**\n * Message to be shown when error state is true\n */\n errorMessage?: WithContent;\n /**\n * Whether the field label should be marked as required.\n */\n required?: boolean;\n /**\n * Control to be rendered\n */\n control?: ObjectShorthandValue<{\n /**\n * Control content\n */\n content?: React.ReactNode;\n }> & {\n /**\n * Error state\n */\n error?: 'true' | 'false';\n };\n /**\n * Label to be rendered\n */\n label?: WithContent;\n}>;\n\nexport const FormFieldShim = React.forwardRef<HTMLInputElement, CustomInputFieldProps>((props, ref) => {\n const { errorMessage, required, control, label } = props;\n const fieldProps: FieldProps = { required };\n\n if (errorMessage && control?.error === 'true') {\n fieldProps.validationState = 'error';\n if (typeof errorMessage === 'object') {\n fieldProps.validationMessage = errorMessage.content;\n }\n if (typeof errorMessage === 'string') {\n fieldProps.validationMessage = errorMessage;\n }\n }\n\n if (label) {\n if (typeof label === 'object') {\n fieldProps.label = label.content;\n } else {\n fieldProps.label = label;\n }\n }\n\n const children: FieldProps['children'] = props.children || control?.content;\n\n if (React.isValidElement(children)) {\n const child: React.ReactElement = children;\n\n // Use the Field's child render function to pass the field control props to the child\n fieldProps.children = fieldControlProps
|
|
1
|
+
{"version":3,"sources":["../src/components/FormField/FormFieldShim.tsx"],"sourcesContent":["'use client';\n\nimport {\n FieldProps,\n renderField_unstable,\n useFieldContextValues_unstable,\n useFieldStyles_unstable,\n useField_unstable,\n} from '@fluentui/react-components';\nimport type { ObjectShorthandValue } from '@fluentui/react-northstar';\n\nimport * as React from 'react';\n\ntype WithContent = ObjectShorthandValue<React.HTMLAttributes<HTMLDivElement>> | string;\n\n/**\n *\n */\ntype CustomInputFieldProps = React.PropsWithChildren<{\n /**\n * Message to be shown when error state is true\n */\n errorMessage?: WithContent;\n /**\n * Whether the field label should be marked as required.\n */\n required?: boolean;\n /**\n * Control to be rendered\n */\n control?: ObjectShorthandValue<{\n /**\n * Control content\n */\n content?: React.ReactNode;\n }> & {\n /**\n * Error state\n */\n error?: 'true' | 'false';\n };\n /**\n * Label to be rendered\n */\n label?: WithContent;\n}>;\n\nexport const FormFieldShim = React.forwardRef<HTMLInputElement, CustomInputFieldProps>((props, ref) => {\n const { errorMessage, required, control, label } = props;\n const fieldProps: FieldProps = { required };\n\n if (errorMessage && control?.error === 'true') {\n fieldProps.validationState = 'error';\n if (typeof errorMessage === 'object') {\n fieldProps.validationMessage = errorMessage.content;\n }\n if (typeof errorMessage === 'string') {\n fieldProps.validationMessage = errorMessage;\n }\n }\n\n if (label) {\n if (typeof label === 'object') {\n fieldProps.label = label.content;\n } else {\n fieldProps.label = label;\n }\n }\n\n const children: FieldProps['children'] = props.children || control?.content;\n\n if (React.isValidElement(children)) {\n const child: React.ReactElement = children;\n\n // Use the Field's child render function to pass the field control props to the child\n fieldProps.children = fieldControlProps =>\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"}
|
|
@@ -25,7 +25,7 @@ const videoClassName = 'fui-Video';
|
|
|
25
25
|
const Video = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
|
|
26
26
|
'use no memo';
|
|
27
27
|
const { className, muted, ...rest } = props;
|
|
28
|
-
const videoRef = _react.useRef();
|
|
28
|
+
const videoRef = _react.useRef(null);
|
|
29
29
|
const classes = (0, _Videostyles.useVideoStyles)();
|
|
30
30
|
_react.useEffect(()=>{
|
|
31
31
|
// this is a workaround for a potential memory leak in Chromium which retains a Detached HTMLVideoElement when <video autoplay> is unmounted
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/Video/Video.tsx"],"sourcesContent":["'use client';\n\nimport { mergeClasses, useMergedRefs } from '@fluentui/react-components';\nimport * as React from 'react';\nimport { useVideoStyles } from './Video.styles';\n\nexport const videoClassName = 'fui-Video';\n\n/**\n * Video component props\n */\nexport interface VideoProps extends React.VideoHTMLAttributes<HTMLVideoElement> {\n /**\n * The source URL of the video\n */\n src: string;\n\n /**\n * Whether the video should start playing automatically\n * @default false\n */\n autoPlay?: boolean;\n\n /**\n * Whether the video should display controls\n * @default true\n */\n controls?: boolean;\n\n /**\n * Whether the video should loop\n */\n loop?: boolean;\n\n /**\n * Whether the video should be muted\n */\n muted?: boolean;\n\n /**\n * The URL of an image to display while the video is loading\n */\n poster?: string;\n}\n\nexport const Video = React.forwardRef<HTMLVideoElement, VideoProps>((props, ref) => {\n 'use no memo';\n\n const { className, muted, ...rest } = props;\n\n const videoRef = React.useRef<HTMLVideoElement>();\n\n const classes = useVideoStyles();\n React.useEffect(() => {\n // this is a workaround for a potential memory leak in Chromium which retains a Detached HTMLVideoElement when <video autoplay> is unmounted\n // https://bugs.chromium.org/p/chromium/issues/detail?id=969049\n return () => {\n if (videoRef?.current) {\n // we want to perform the cleanup on the latest element rendered\n // eslint-disable-next-line react-hooks/exhaustive-deps\n videoRef.current.src = '';\n }\n };\n }, [videoRef]);\n\n React.useEffect(() => {\n // React doesn't guarantee that props will be set:\n // https://github.com/facebook/react/issues/10389\n if (videoRef.current) {\n videoRef.current.muted = !!muted;\n }\n }, [muted]);\n\n return (\n <video\n ref={useMergedRefs(ref, videoRef) as React.Ref<HTMLVideoElement>}\n role=\"application\"\n className={mergeClasses(videoClassName, classes.root, className)}\n controls={true}\n autoPlay={false}\n muted={muted}\n {...rest}\n />\n );\n});\n\nVideo.displayName = 'Video';\n"],"names":["mergeClasses","useMergedRefs","React","useVideoStyles","videoClassName","Video","forwardRef","props","ref","className","muted","rest","videoRef","useRef","classes","useEffect","current","src","video","role","root","controls","autoPlay","displayName"],"mappings":"AAAA;;;;;;;;;;;;IA6CaK,KAAAA;;;kBAvCAD;;;;;iCAJ+B,6BAA6B;iEAClD,QAAQ;6BACA,iBAAiB;AAEzC,MAAMA,iBAAiB,YAAY;AAuCnC,cAAMC,WAAAA,GAAQH,OAAMI,UAAU,CAA+B,CAACC,OAAOC;IAC1E;IAEA,MAAM,EAAEC,SAAS,EAAEC,KAAK,EAAE,GAAGC,MAAM,GAAGJ;IAEtC,MAAMK,WAAWV,OAAMW,MAAM;
|
|
1
|
+
{"version":3,"sources":["../src/components/Video/Video.tsx"],"sourcesContent":["'use client';\n\nimport { mergeClasses, useMergedRefs } from '@fluentui/react-components';\nimport * as React from 'react';\nimport { useVideoStyles } from './Video.styles';\n\nexport const videoClassName = 'fui-Video';\n\n/**\n * Video component props\n */\nexport interface VideoProps extends React.VideoHTMLAttributes<HTMLVideoElement> {\n /**\n * The source URL of the video\n */\n src: string;\n\n /**\n * Whether the video should start playing automatically\n * @default false\n */\n autoPlay?: boolean;\n\n /**\n * Whether the video should display controls\n * @default true\n */\n controls?: boolean;\n\n /**\n * Whether the video should loop\n */\n loop?: boolean;\n\n /**\n * Whether the video should be muted\n */\n muted?: boolean;\n\n /**\n * The URL of an image to display while the video is loading\n */\n poster?: string;\n}\n\nexport const Video = React.forwardRef<HTMLVideoElement, VideoProps>((props, ref) => {\n 'use no memo';\n\n const { className, muted, ...rest } = props;\n\n const videoRef = React.useRef<HTMLVideoElement>(null);\n\n const classes = useVideoStyles();\n React.useEffect(() => {\n // this is a workaround for a potential memory leak in Chromium which retains a Detached HTMLVideoElement when <video autoplay> is unmounted\n // https://bugs.chromium.org/p/chromium/issues/detail?id=969049\n return () => {\n if (videoRef?.current) {\n // we want to perform the cleanup on the latest element rendered\n // eslint-disable-next-line react-hooks/exhaustive-deps\n videoRef.current.src = '';\n }\n };\n }, [videoRef]);\n\n React.useEffect(() => {\n // React doesn't guarantee that props will be set:\n // https://github.com/facebook/react/issues/10389\n if (videoRef.current) {\n videoRef.current.muted = !!muted;\n }\n }, [muted]);\n\n return (\n <video\n ref={useMergedRefs(ref, videoRef) as React.Ref<HTMLVideoElement>}\n role=\"application\"\n className={mergeClasses(videoClassName, classes.root, className)}\n controls={true}\n autoPlay={false}\n muted={muted}\n {...rest}\n />\n );\n});\n\nVideo.displayName = 'Video';\n"],"names":["mergeClasses","useMergedRefs","React","useVideoStyles","videoClassName","Video","forwardRef","props","ref","className","muted","rest","videoRef","useRef","classes","useEffect","current","src","video","role","root","controls","autoPlay","displayName"],"mappings":"AAAA;;;;;;;;;;;;IA6CaK,KAAAA;;;kBAvCAD;;;;;iCAJ+B,6BAA6B;iEAClD,QAAQ;6BACA,iBAAiB;AAEzC,MAAMA,iBAAiB,YAAY;AAuCnC,cAAMC,WAAAA,GAAQH,OAAMI,UAAU,CAA+B,CAACC,OAAOC;IAC1E;IAEA,MAAM,EAAEC,SAAS,EAAEC,KAAK,EAAE,GAAGC,MAAM,GAAGJ;IAEtC,MAAMK,WAAWV,OAAMW,MAAM,CAAmB;IAEhD,MAAMC,cAAUX,2BAAAA;IAChBD,OAAMa,SAAS,CAAC;QACd,4IAA4I;QAC5I,+DAA+D;QAC/D,OAAO;YACL,IAAIH,aAAAA,QAAAA,aAAAA,KAAAA,IAAAA,KAAAA,IAAAA,SAAUI,OAAO,EAAE;gBACrB,gEAAgE;gBAChE,uDAAuD;gBACvDJ,SAASI,OAAO,CAACC,GAAG,GAAG;YACzB;QACF;IACF,GAAG;QAACL;KAAS;IAEbV,OAAMa,SAAS,CAAC;QACd,kDAAkD;QAClD,iDAAiD;QACjD,IAAIH,SAASI,OAAO,EAAE;YACpBJ,SAASI,OAAO,CAACN,KAAK,GAAG,CAAC,CAACA;QAC7B;IACF,GAAG;QAACA;KAAM;IAEV,OAAA,WAAA,GACE,OAAA,aAAA,CAACQ,SAAAA;QACCV,SAAKP,8BAAAA,EAAcO,KAAKI;QACxBO,MAAK;QACLV,eAAWT,6BAAAA,EAAaI,gBAAgBU,QAAQM,IAAI,EAAEX;QACtDY,UAAU;QACVC,UAAU;QACVZ,OAAOA;QACN,GAAGC,IAAI;;AAGd,GAAG;AAEHN,MAAMkB,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.13",
|
|
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",
|
|
@@ -20,15 +20,15 @@
|
|
|
20
20
|
"@fluentui/scripts-storybook": "*"
|
|
21
21
|
},
|
|
22
22
|
"dependencies": {
|
|
23
|
-
"@fluentui/react-aria": "^9.17.
|
|
24
|
-
"@fluentui/react-components": "^9.72.
|
|
25
|
-
"@fluentui/react-context-selector": "^9.2.
|
|
23
|
+
"@fluentui/react-aria": "^9.17.5",
|
|
24
|
+
"@fluentui/react-components": "^9.72.5",
|
|
25
|
+
"@fluentui/react-context-selector": "^9.2.11",
|
|
26
26
|
"@fluentui/react-icons": "^2.0.245",
|
|
27
|
-
"@fluentui/react-jsx-runtime": "^9.3.
|
|
27
|
+
"@fluentui/react-jsx-runtime": "^9.3.2",
|
|
28
28
|
"@fluentui/react-shared-contexts": "^9.25.2",
|
|
29
|
-
"@fluentui/react-tabster": "^9.26.
|
|
29
|
+
"@fluentui/react-tabster": "^9.26.9",
|
|
30
30
|
"@fluentui/react-theme": "^9.2.0",
|
|
31
|
-
"@fluentui/react-utilities": "^9.25.
|
|
31
|
+
"@fluentui/react-utilities": "^9.25.3",
|
|
32
32
|
"@griffel/react": "^1.5.22",
|
|
33
33
|
"@swc/helpers": "^0.5.1"
|
|
34
34
|
},
|