@fluentui/react-message-bar 9.6.6 → 9.6.8
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 +28 -2
- package/dist/index.d.ts +9 -1
- package/lib/components/MessageBar/MessageBar.js +1 -0
- package/lib/components/MessageBar/MessageBar.js.map +1 -1
- package/lib/components/MessageBar/MessageBar.types.js.map +1 -1
- package/lib/components/MessageBar/useMessageBar.js +4 -1
- package/lib/components/MessageBar/useMessageBar.js.map +1 -1
- package/lib/components/MessageBar/useMessageBarContextValues.js +1 -0
- package/lib/components/MessageBar/useMessageBarContextValues.js.map +1 -1
- package/lib/components/MessageBar/useMessageBarReflow.js +1 -0
- package/lib/components/MessageBar/useMessageBarReflow.js.map +1 -1
- package/lib/components/MessageBar/useMessageBarStyles.styles.js +3 -1
- package/lib/components/MessageBar/useMessageBarStyles.styles.js.map +1 -1
- package/lib/components/MessageBar/useMessageBarStyles.styles.raw.js +2 -1
- package/lib/components/MessageBar/useMessageBarStyles.styles.raw.js.map +1 -1
- package/lib/components/MessageBarActions/MessageBarActions.js +1 -0
- package/lib/components/MessageBarActions/MessageBarActions.js.map +1 -1
- package/lib/components/MessageBarActions/useMessageBarActions.js +1 -0
- package/lib/components/MessageBarActions/useMessageBarActions.js.map +1 -1
- package/lib/components/MessageBarActions/useMessageBarActionsContextValues.js +1 -0
- package/lib/components/MessageBarActions/useMessageBarActionsContextValues.js.map +1 -1
- package/lib/components/MessageBarActions/useMessageBarActionsStyles.styles.js +2 -0
- package/lib/components/MessageBarActions/useMessageBarActionsStyles.styles.js.map +1 -1
- package/lib/components/MessageBarActions/useMessageBarActionsStyles.styles.raw.js +1 -0
- package/lib/components/MessageBarActions/useMessageBarActionsStyles.styles.raw.js.map +1 -1
- package/lib/components/MessageBarBody/MessageBarBody.js +1 -0
- package/lib/components/MessageBarBody/MessageBarBody.js.map +1 -1
- package/lib/components/MessageBarBody/useMessageBarBody.js +1 -0
- package/lib/components/MessageBarBody/useMessageBarBody.js.map +1 -1
- package/lib/components/MessageBarBody/useMessageBarBodyContextValues.js +1 -0
- package/lib/components/MessageBarBody/useMessageBarBodyContextValues.js.map +1 -1
- package/lib/components/MessageBarBody/useMessageBarBodyStyles.styles.js +2 -0
- package/lib/components/MessageBarBody/useMessageBarBodyStyles.styles.js.map +1 -1
- package/lib/components/MessageBarBody/useMessageBarBodyStyles.styles.raw.js +1 -0
- package/lib/components/MessageBarBody/useMessageBarBodyStyles.styles.raw.js.map +1 -1
- package/lib/components/MessageBarGroup/MessageBarGroup.js +1 -0
- package/lib/components/MessageBarGroup/MessageBarGroup.js.map +1 -1
- package/lib/components/MessageBarGroup/MessageBarGroup.motions.js +84 -0
- package/lib/components/MessageBarGroup/MessageBarGroup.motions.js.map +1 -0
- package/lib/components/MessageBarGroup/MessageBarGroup.types.js.map +1 -1
- package/lib/components/MessageBarGroup/renderMessageBarGroup.js +9 -8
- package/lib/components/MessageBarGroup/renderMessageBarGroup.js.map +1 -1
- package/lib/components/MessageBarGroup/useMessageBarGroupStyles.styles.js +1 -23
- package/lib/components/MessageBarGroup/useMessageBarGroupStyles.styles.js.map +1 -1
- package/lib/components/MessageBarGroup/useMessageBarGroupStyles.styles.raw.js +1 -35
- package/lib/components/MessageBarGroup/useMessageBarGroupStyles.styles.raw.js.map +1 -1
- package/lib/components/MessageBarTitle/MessageBarTitle.js +1 -0
- package/lib/components/MessageBarTitle/MessageBarTitle.js.map +1 -1
- package/lib/components/MessageBarTitle/useMessageBarTitle.js +1 -0
- package/lib/components/MessageBarTitle/useMessageBarTitle.js.map +1 -1
- package/lib/components/MessageBarTitle/useMessageBarTitleStyles.styles.js +2 -0
- package/lib/components/MessageBarTitle/useMessageBarTitleStyles.styles.js.map +1 -1
- package/lib/components/MessageBarTitle/useMessageBarTitleStyles.styles.raw.js +1 -0
- package/lib/components/MessageBarTitle/useMessageBarTitleStyles.styles.raw.js.map +1 -1
- package/lib/components/MotionRefForwarder.js +17 -0
- package/lib/components/MotionRefForwarder.js.map +1 -0
- package/lib/contexts/messageBarContext.js +1 -0
- package/lib/contexts/messageBarContext.js.map +1 -1
- package/lib/contexts/messageBarTransitionContext.js +2 -1
- package/lib/contexts/messageBarTransitionContext.js.map +1 -1
- package/lib-commonjs/components/MessageBar/MessageBar.js +1 -0
- package/lib-commonjs/components/MessageBar/MessageBar.js.map +1 -1
- package/lib-commonjs/components/MessageBar/MessageBar.types.js.map +1 -1
- package/lib-commonjs/components/MessageBar/useMessageBar.js +4 -1
- package/lib-commonjs/components/MessageBar/useMessageBar.js.map +1 -1
- package/lib-commonjs/components/MessageBar/useMessageBarContextValues.js +1 -0
- package/lib-commonjs/components/MessageBar/useMessageBarContextValues.js.map +1 -1
- package/lib-commonjs/components/MessageBar/useMessageBarReflow.js +1 -0
- package/lib-commonjs/components/MessageBar/useMessageBarReflow.js.map +1 -1
- package/lib-commonjs/components/MessageBar/useMessageBarStyles.styles.js +2 -1
- package/lib-commonjs/components/MessageBar/useMessageBarStyles.styles.js.map +1 -1
- package/lib-commonjs/components/MessageBar/useMessageBarStyles.styles.raw.js +2 -1
- package/lib-commonjs/components/MessageBar/useMessageBarStyles.styles.raw.js.map +1 -1
- package/lib-commonjs/components/MessageBarActions/MessageBarActions.js +1 -0
- package/lib-commonjs/components/MessageBarActions/MessageBarActions.js.map +1 -1
- package/lib-commonjs/components/MessageBarActions/useMessageBarActions.js +1 -0
- package/lib-commonjs/components/MessageBarActions/useMessageBarActions.js.map +1 -1
- package/lib-commonjs/components/MessageBarActions/useMessageBarActionsContextValues.js +1 -0
- package/lib-commonjs/components/MessageBarActions/useMessageBarActionsContextValues.js.map +1 -1
- package/lib-commonjs/components/MessageBarActions/useMessageBarActionsStyles.styles.js +1 -0
- package/lib-commonjs/components/MessageBarActions/useMessageBarActionsStyles.styles.js.map +1 -1
- package/lib-commonjs/components/MessageBarActions/useMessageBarActionsStyles.styles.raw.js +1 -0
- package/lib-commonjs/components/MessageBarActions/useMessageBarActionsStyles.styles.raw.js.map +1 -1
- package/lib-commonjs/components/MessageBarBody/MessageBarBody.js +1 -0
- package/lib-commonjs/components/MessageBarBody/MessageBarBody.js.map +1 -1
- package/lib-commonjs/components/MessageBarBody/useMessageBarBody.js +1 -0
- package/lib-commonjs/components/MessageBarBody/useMessageBarBody.js.map +1 -1
- package/lib-commonjs/components/MessageBarBody/useMessageBarBodyContextValues.js +1 -0
- package/lib-commonjs/components/MessageBarBody/useMessageBarBodyContextValues.js.map +1 -1
- package/lib-commonjs/components/MessageBarBody/useMessageBarBodyStyles.styles.js +1 -0
- package/lib-commonjs/components/MessageBarBody/useMessageBarBodyStyles.styles.js.map +1 -1
- package/lib-commonjs/components/MessageBarBody/useMessageBarBodyStyles.styles.raw.js +1 -0
- package/lib-commonjs/components/MessageBarBody/useMessageBarBodyStyles.styles.raw.js.map +1 -1
- package/lib-commonjs/components/MessageBarGroup/MessageBarGroup.js +1 -0
- package/lib-commonjs/components/MessageBarGroup/MessageBarGroup.js.map +1 -1
- package/lib-commonjs/components/MessageBarGroup/MessageBarGroup.motions.js +84 -0
- package/lib-commonjs/components/MessageBarGroup/MessageBarGroup.motions.js.map +1 -0
- package/lib-commonjs/components/MessageBarGroup/MessageBarGroup.types.js.map +1 -1
- package/lib-commonjs/components/MessageBarGroup/renderMessageBarGroup.js +9 -8
- package/lib-commonjs/components/MessageBarGroup/renderMessageBarGroup.js.map +1 -1
- package/lib-commonjs/components/MessageBarGroup/useMessageBarGroupStyles.styles.js +0 -28
- package/lib-commonjs/components/MessageBarGroup/useMessageBarGroupStyles.styles.js.map +1 -1
- package/lib-commonjs/components/MessageBarGroup/useMessageBarGroupStyles.styles.raw.js +0 -34
- package/lib-commonjs/components/MessageBarGroup/useMessageBarGroupStyles.styles.raw.js.map +1 -1
- package/lib-commonjs/components/MessageBarTitle/MessageBarTitle.js +1 -0
- package/lib-commonjs/components/MessageBarTitle/MessageBarTitle.js.map +1 -1
- package/lib-commonjs/components/MessageBarTitle/useMessageBarTitle.js +1 -0
- package/lib-commonjs/components/MessageBarTitle/useMessageBarTitle.js.map +1 -1
- package/lib-commonjs/components/MessageBarTitle/useMessageBarTitleStyles.styles.js +1 -0
- package/lib-commonjs/components/MessageBarTitle/useMessageBarTitleStyles.styles.js.map +1 -1
- package/lib-commonjs/components/MessageBarTitle/useMessageBarTitleStyles.styles.raw.js +1 -0
- package/lib-commonjs/components/MessageBarTitle/useMessageBarTitleStyles.styles.raw.js.map +1 -1
- package/lib-commonjs/components/MotionRefForwarder.js +30 -0
- package/lib-commonjs/components/MotionRefForwarder.js.map +1 -0
- package/lib-commonjs/contexts/messageBarContext.js +1 -0
- package/lib-commonjs/contexts/messageBarContext.js.map +1 -1
- package/lib-commonjs/contexts/messageBarTransitionContext.js +1 -0
- package/lib-commonjs/contexts/messageBarTransitionContext.js.map +1 -1
- package/package.json +9 -8
- package/lib/components/MessageBarGroup/MessageBarTransition.js +0 -45
- package/lib/components/MessageBarGroup/MessageBarTransition.js.map +0 -1
- package/lib-commonjs/components/MessageBarGroup/MessageBarTransition.js +0 -53
- package/lib-commonjs/components/MessageBarGroup/MessageBarTransition.js.map +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useMessageBarStyles.styles.js"],"sourcesContent":["
|
|
1
|
+
{"version":3,"sources":["useMessageBarStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const messageBarClassNames = {\n root: 'fui-MessageBar',\n icon: 'fui-MessageBar__icon',\n bottomReflowSpacer: 'fui-MessageBar__bottomReflowSpacer'\n};\nconst useRootBaseStyles = makeResetStyles({\n whiteSpace: 'nowrap',\n display: 'grid',\n gridTemplateColumns: 'auto 1fr auto auto',\n gridTemplateRows: '1fr',\n gridTemplateAreas: '\"icon body secondaryActions actions\"',\n paddingLeft: tokens.spacingHorizontalM,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,\n borderRadius: tokens.borderRadiusMedium,\n alignItems: 'center',\n minHeight: '36px',\n boxSizing: 'border-box',\n backgroundColor: tokens.colorNeutralBackground3\n});\nconst useIconBaseStyles = makeResetStyles({\n gridArea: 'icon',\n fontSize: tokens.fontSizeBase500,\n marginRight: tokens.spacingHorizontalS,\n color: tokens.colorNeutralForeground3,\n display: 'flex',\n alignItems: 'center'\n});\nconst useReflowSpacerBaseStyles = makeResetStyles({\n marginBottom: tokens.spacingVerticalS,\n gridArea: 'secondaryActions'\n});\nconst useStyles = makeStyles({\n rootMultiline: {\n whiteSpace: 'normal',\n alignItems: 'start',\n paddingTop: tokens.spacingVerticalMNudge,\n gridTemplateColumns: 'auto 1fr auto',\n gridTemplateAreas: `\n \"icon body actions\"\n \"secondaryActions secondaryActions secondaryActions\"\n `\n },\n secondaryActionsMultiline: {\n justifyContent: 'end',\n marginTop: tokens.spacingVerticalMNudge,\n marginBottom: tokens.spacingVerticalS,\n marginRight: '0px'\n },\n square: {\n borderRadius: '0'\n }\n});\nconst useIconIntentStyles = makeStyles({\n info: {\n },\n error: {\n color: tokens.colorStatusDangerForeground1\n },\n warning: {\n color: tokens.colorStatusWarningForeground3\n },\n success: {\n color: tokens.colorStatusSuccessForeground1\n }\n});\nconst useRootIntentStyles = makeStyles({\n info: {\n },\n error: {\n backgroundColor: tokens.colorStatusDangerBackground1,\n ...shorthands.borderColor(tokens.colorStatusDangerBorder1)\n },\n warning: {\n backgroundColor: tokens.colorStatusWarningBackground1,\n ...shorthands.borderColor(tokens.colorStatusWarningBorder1)\n },\n success: {\n backgroundColor: tokens.colorStatusSuccessBackground1,\n ...shorthands.borderColor(tokens.colorStatusSuccessBorder1)\n }\n});\n/**\n * Apply styling to the MessageBar slots based on the state\n */ export const useMessageBarStyles_unstable = (state)=>{\n 'use no memo';\n const rootBaseStyles = useRootBaseStyles();\n const iconBaseStyles = useIconBaseStyles();\n const iconIntentStyles = useIconIntentStyles();\n const rootIntentStyles = useRootIntentStyles();\n const reflowSpacerStyles = useReflowSpacerBaseStyles();\n const styles = useStyles();\n state.root.className = mergeClasses(messageBarClassNames.root, rootBaseStyles, state.layout === 'multiline' && styles.rootMultiline, state.shape === 'square' && styles.square, rootIntentStyles[state.intent], state.root.className);\n if (state.icon) {\n state.icon.className = mergeClasses(messageBarClassNames.icon, iconBaseStyles, iconIntentStyles[state.intent], state.icon.className);\n }\n if (state.bottomReflowSpacer) {\n state.bottomReflowSpacer.className = mergeClasses(messageBarClassNames.bottomReflowSpacer, reflowSpacerStyles);\n }\n return state;\n};\n"],"names":["__resetStyles","__styles","mergeClasses","shorthands","tokens","messageBarClassNames","root","icon","bottomReflowSpacer","useRootBaseStyles","useIconBaseStyles","useReflowSpacerBaseStyles","useStyles","rootMultiline","Huce71","Bt984gj","z8tnut","Budl1dq","zoa1oz","secondaryActionsMultiline","Brf1p80","B6of3ja","jrapky","t21cq0","square","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","d","p","useIconIntentStyles","info","error","sj55zd","warning","success","useRootIntentStyles","De3pzq","g2u3we","h3c5rm","B9xav0g","zhjwy3","useMessageBarStyles_unstable","state","rootBaseStyles","iconBaseStyles","iconIntentStyles","rootIntentStyles","reflowSpacerStyles","styles","className","layout","shape","intent"],"mappings":"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"}
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
'use client';
|
|
1
2
|
"use strict";
|
|
2
3
|
Object.defineProperty(exports, "__esModule", {
|
|
3
4
|
value: true
|
|
@@ -105,7 +106,7 @@ const useMessageBarStyles_unstable = (state)=>{
|
|
|
105
106
|
const rootIntentStyles = useRootIntentStyles();
|
|
106
107
|
const reflowSpacerStyles = useReflowSpacerBaseStyles();
|
|
107
108
|
const styles = useStyles();
|
|
108
|
-
state.root.className = (0, _react.mergeClasses)(messageBarClassNames.root, rootBaseStyles, state.layout === 'multiline' && styles.rootMultiline, state.shape === 'square' && styles.square, rootIntentStyles[state.intent], state.
|
|
109
|
+
state.root.className = (0, _react.mergeClasses)(messageBarClassNames.root, rootBaseStyles, state.layout === 'multiline' && styles.rootMultiline, state.shape === 'square' && styles.square, rootIntentStyles[state.intent], state.root.className);
|
|
109
110
|
if (state.icon) {
|
|
110
111
|
state.icon.className = (0, _react.mergeClasses)(messageBarClassNames.icon, iconBaseStyles, iconIntentStyles[state.intent], state.icon.className);
|
|
111
112
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/MessageBar/useMessageBarStyles.styles.ts"],"sourcesContent":["
|
|
1
|
+
{"version":3,"sources":["../src/components/MessageBar/useMessageBarStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { MessageBarSlots, MessageBarState } from './MessageBar.types';\n\nexport const messageBarClassNames: SlotClassNames<MessageBarSlots> = {\n root: 'fui-MessageBar',\n icon: 'fui-MessageBar__icon',\n bottomReflowSpacer: 'fui-MessageBar__bottomReflowSpacer',\n};\n\nconst useRootBaseStyles = makeResetStyles({\n whiteSpace: 'nowrap',\n display: 'grid',\n gridTemplateColumns: 'auto 1fr auto auto',\n gridTemplateRows: '1fr',\n gridTemplateAreas: '\"icon body secondaryActions actions\"',\n paddingLeft: tokens.spacingHorizontalM,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,\n borderRadius: tokens.borderRadiusMedium,\n alignItems: 'center',\n minHeight: '36px',\n boxSizing: 'border-box',\n backgroundColor: tokens.colorNeutralBackground3,\n});\n\nconst useIconBaseStyles = makeResetStyles({\n gridArea: 'icon',\n fontSize: tokens.fontSizeBase500,\n marginRight: tokens.spacingHorizontalS,\n color: tokens.colorNeutralForeground3,\n display: 'flex',\n alignItems: 'center',\n});\n\nconst useReflowSpacerBaseStyles = makeResetStyles({\n marginBottom: tokens.spacingVerticalS,\n gridArea: 'secondaryActions',\n});\n\nconst useStyles = makeStyles({\n rootMultiline: {\n whiteSpace: 'normal',\n alignItems: 'start',\n paddingTop: tokens.spacingVerticalMNudge,\n gridTemplateColumns: 'auto 1fr auto',\n gridTemplateAreas: `\n \"icon body actions\"\n \"secondaryActions secondaryActions secondaryActions\"\n `,\n },\n\n secondaryActionsMultiline: {\n justifyContent: 'end',\n marginTop: tokens.spacingVerticalMNudge,\n marginBottom: tokens.spacingVerticalS,\n marginRight: '0px',\n },\n\n square: {\n borderRadius: '0',\n },\n});\n\nconst useIconIntentStyles = makeStyles({\n info: {\n /** already in base reset styles */\n },\n error: {\n color: tokens.colorStatusDangerForeground1,\n },\n warning: {\n color: tokens.colorStatusWarningForeground3,\n },\n success: {\n color: tokens.colorStatusSuccessForeground1,\n },\n});\n\nconst useRootIntentStyles = makeStyles({\n info: {\n /** already in base reset styles */\n },\n error: {\n backgroundColor: tokens.colorStatusDangerBackground1,\n ...shorthands.borderColor(tokens.colorStatusDangerBorder1),\n },\n warning: {\n backgroundColor: tokens.colorStatusWarningBackground1,\n ...shorthands.borderColor(tokens.colorStatusWarningBorder1),\n },\n success: {\n backgroundColor: tokens.colorStatusSuccessBackground1,\n ...shorthands.borderColor(tokens.colorStatusSuccessBorder1),\n },\n});\n\n/**\n * Apply styling to the MessageBar slots based on the state\n */\nexport const useMessageBarStyles_unstable = (state: MessageBarState): MessageBarState => {\n 'use no memo';\n\n const rootBaseStyles = useRootBaseStyles();\n const iconBaseStyles = useIconBaseStyles();\n const iconIntentStyles = useIconIntentStyles();\n const rootIntentStyles = useRootIntentStyles();\n const reflowSpacerStyles = useReflowSpacerBaseStyles();\n const styles = useStyles();\n\n state.root.className = mergeClasses(\n messageBarClassNames.root,\n rootBaseStyles,\n state.layout === 'multiline' && styles.rootMultiline,\n state.shape === 'square' && styles.square,\n rootIntentStyles[state.intent],\n state.root.className,\n );\n\n if (state.icon) {\n state.icon.className = mergeClasses(\n messageBarClassNames.icon,\n iconBaseStyles,\n iconIntentStyles[state.intent],\n state.icon.className,\n );\n }\n\n if (state.bottomReflowSpacer) {\n state.bottomReflowSpacer.className = mergeClasses(messageBarClassNames.bottomReflowSpacer, reflowSpacerStyles);\n }\n\n return state;\n};\n"],"names":["makeResetStyles","makeStyles","mergeClasses","shorthands","tokens","messageBarClassNames","root","icon","bottomReflowSpacer","useRootBaseStyles","whiteSpace","display","gridTemplateColumns","gridTemplateRows","gridTemplateAreas","paddingLeft","spacingHorizontalM","border","strokeWidthThin","colorNeutralStroke1","borderRadius","borderRadiusMedium","alignItems","minHeight","boxSizing","backgroundColor","colorNeutralBackground3","useIconBaseStyles","gridArea","fontSize","fontSizeBase500","marginRight","spacingHorizontalS","color","colorNeutralForeground3","useReflowSpacerBaseStyles","marginBottom","spacingVerticalS","useStyles","rootMultiline","paddingTop","spacingVerticalMNudge","secondaryActionsMultiline","justifyContent","marginTop","square","useIconIntentStyles","info","error","colorStatusDangerForeground1","warning","colorStatusWarningForeground3","success","colorStatusSuccessForeground1","useRootIntentStyles","colorStatusDangerBackground1","borderColor","colorStatusDangerBorder1","colorStatusWarningBackground1","colorStatusWarningBorder1","colorStatusSuccessBackground1","colorStatusSuccessBorder1","useMessageBarStyles_unstable","state","rootBaseStyles","iconBaseStyles","iconIntentStyles","rootIntentStyles","reflowSpacerStyles","styles","className","layout","shape","intent"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/MessageBarActions/MessageBarActions.tsx"],"sourcesContent":["
|
|
1
|
+
{"version":3,"sources":["../src/components/MessageBarActions/MessageBarActions.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\nimport { useMessageBarActions_unstable } from './useMessageBarActions';\nimport { renderMessageBarActions_unstable } from './renderMessageBarActions';\nimport { useMessageBarActionsStyles_unstable } from './useMessageBarActionsStyles.styles';\nimport type { MessageBarActionsProps } from './MessageBarActions.types';\nimport { useMessageBarActionsContextValue_unstable } from './useMessageBarActionsContextValues';\n\n/**\n * MessageBarActions component\n */\nexport const MessageBarActions: ForwardRefComponent<MessageBarActionsProps> = React.forwardRef((props, ref) => {\n const state = useMessageBarActions_unstable(props, ref);\n\n useMessageBarActionsStyles_unstable(state);\n useCustomStyleHook_unstable('useMessageBarActionsStyles_unstable')(state);\n return renderMessageBarActions_unstable(state, useMessageBarActionsContextValue_unstable());\n});\n\nMessageBarActions.displayName = 'MessageBarActions';\n"],"names":["React","useCustomStyleHook_unstable","useMessageBarActions_unstable","renderMessageBarActions_unstable","useMessageBarActionsStyles_unstable","useMessageBarActionsContextValue_unstable","MessageBarActions","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;qCAEa,kCAAkC;sCAChC,yBAAyB;yCACtB,4BAA4B;kDACzB,sCAAsC;mDAEhC,sCAAsC;AAKzF,MAAMM,oBAAAA,WAAAA,GAAiEN,OAAMO,UAAU,CAAC,CAACC,OAAOC;IACrG,MAAMC,YAAQR,mDAAAA,EAA8BM,OAAOC;QAEnDL,qEAAAA,EAAoCM;QACpCT,gDAAAA,EAA4B,uCAAuCS;IACnE,WAAOP,yDAAAA,EAAiCO,WAAOL,4EAAAA;AACjD,GAAG;AAEHC,kBAAkBK,WAAW,GAAG"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/MessageBarActions/useMessageBarActions.ts"],"sourcesContent":["
|
|
1
|
+
{"version":3,"sources":["../src/components/MessageBarActions/useMessageBarActions.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { getIntrinsicElementProps, slot, useMergedRefs } from '@fluentui/react-utilities';\nimport type { MessageBarActionsProps, MessageBarActionsState } from './MessageBarActions.types';\nimport { useMessageBarContext } from '../../contexts/messageBarContext';\n\n/**\n * Create the state required to render MessageBarActions.\n *\n * The returned state can be modified with hooks such as useMessageBarActionsStyles_unstable,\n * before being passed to renderMessageBarActions_unstable.\n *\n * @param props - props from this instance of MessageBarActions\n * @param ref - reference to root HTMLElement of MessageBarActions\n */\nexport const useMessageBarActions_unstable = (\n props: MessageBarActionsProps,\n ref: React.Ref<HTMLDivElement>,\n): MessageBarActionsState => {\n const { layout = 'singleline', actionsRef } = useMessageBarContext();\n return {\n components: {\n root: 'div',\n containerAction: 'div',\n },\n containerAction: slot.optional(props.containerAction, { renderByDefault: false, elementType: 'div' }),\n root: slot.always(\n getIntrinsicElementProps('div', {\n ref: useMergedRefs(ref, actionsRef),\n ...props,\n }),\n { elementType: 'div' },\n ),\n layout,\n hasActions: !!props.children,\n };\n};\n"],"names":["React","getIntrinsicElementProps","slot","useMergedRefs","useMessageBarContext","useMessageBarActions_unstable","props","ref","layout","actionsRef","components","root","containerAction","optional","renderByDefault","elementType","always","hasActions","children"],"mappings":"AAAA;;;;;+BAgBaK;;;;;;;iEAdU,QAAQ;gCAC+B,4BAA4B;mCAErD,mCAAmC;AAWjE,sCAAsC,CAC3CC,OACAC;IAEA,MAAM,EAAEC,SAAS,YAAY,EAAEC,UAAU,EAAE,OAAGL,uCAAAA;IAC9C,OAAO;QACLM,YAAY;YACVC,MAAM;YACNC,iBAAiB;QACnB;QACAA,iBAAiBV,oBAAAA,CAAKW,QAAQ,CAACP,MAAMM,eAAe,EAAE;YAAEE,iBAAiB;YAAOC,aAAa;QAAM;QACnGJ,MAAMT,oBAAAA,CAAKc,MAAM,KACff,wCAAAA,EAAyB,OAAO;YAC9BM,KAAKJ,iCAAAA,EAAcI,KAAKE;YACxB,GAAGH,KAAK;QACV,IACA;YAAES,aAAa;QAAM;QAEvBP;QACAS,YAAY,CAAC,CAACX,MAAMY,QAAQ;IAC9B;AACF,EAAE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/MessageBarActions/useMessageBarActionsContextValues.ts"],"sourcesContent":["
|
|
1
|
+
{"version":3,"sources":["../src/components/MessageBarActions/useMessageBarActionsContextValues.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { MessageBarActionsContextValues } from './MessageBarActions.types';\n\nexport function useMessageBarActionsContextValue_unstable(): MessageBarActionsContextValues {\n const buttonContext = React.useMemo(\n () => ({\n size: 'small' as const,\n }),\n [],\n );\n\n return {\n button: buttonContext,\n };\n}\n"],"names":["React","useMessageBarActionsContextValue_unstable","buttonContext","useMemo","size","button"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;AAGxB,SAASC;IACd,MAAMC,gBAAgBF,OAAMG,OAAO,CACjC,IAAO,CAAA;YACLC,MAAM;SACR,CAAA,EACA,EAAE;IAGJ,OAAO;QACLC,QAAQH;IACV;AACF"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useMessageBarActionsStyles.styles.js"],"sourcesContent":["
|
|
1
|
+
{"version":3,"sources":["useMessageBarActionsStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const messageBarActionsClassNames = {\n root: 'fui-MessageBarActions',\n containerAction: 'fui-MessageBarActions__containerAction'\n};\n/**\n * Styles for the root slot\n */ const useRootBaseStyles = makeResetStyles({\n gridArea: 'secondaryActions',\n display: 'flex',\n columnGap: tokens.spacingHorizontalM,\n paddingRight: tokens.spacingHorizontalM\n});\nconst useContainerActionBaseStyles = makeResetStyles({\n gridArea: 'actions',\n paddingRight: tokens.spacingHorizontalM\n});\nconst useMultilineStyles = makeStyles({\n root: {\n justifyContent: 'end',\n marginTop: tokens.spacingVerticalMNudge,\n marginBottom: tokens.spacingVerticalS,\n marginRight: '0px',\n paddingRight: tokens.spacingVerticalM\n },\n noActions: {\n display: 'none'\n }\n});\n/**\n * Apply styling to the MessageBarActions slots based on the state\n */ export const useMessageBarActionsStyles_unstable = (state)=>{\n 'use no memo';\n const rootBaseStyles = useRootBaseStyles();\n const containerActionBaseStyles = useContainerActionBaseStyles();\n const multilineStyles = useMultilineStyles();\n state.root.className = mergeClasses(messageBarActionsClassNames.root, rootBaseStyles, state.layout === 'multiline' && multilineStyles.root, !state.hasActions && multilineStyles.noActions, state.root.className);\n if (state.containerAction) {\n state.containerAction.className = mergeClasses(messageBarActionsClassNames.containerAction, containerActionBaseStyles, state.containerAction.className);\n }\n return state;\n};\n"],"names":["__resetStyles","__styles","mergeClasses","tokens","messageBarActionsClassNames","root","containerAction","useRootBaseStyles","useContainerActionBaseStyles","useMultilineStyles","Brf1p80","B6of3ja","jrapky","t21cq0","z189sj","noActions","mc9l5x","d","useMessageBarActionsStyles_unstable","state","rootBaseStyles","containerActionBaseStyles","multilineStyles","className","layout","hasActions"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAGCI,2BAA2B;;;uCA8BY;eAAnCc;;;uBAhCyC,gBAAgB;AAEnE,oCAAoC;IACvCb,IAAI,EAAE,uBAAuB;IAC7BC,eAAe,EAAE;AACrB,CAAC;AACD;;CAEA,GAAI,MAAMC,iBAAiB,GAAA,WAAA,OAAGP,oBAAA,EAAA,YAAA,YAAA;IAAA;IAAA;CAK7B,CAAC;AACF,MAAMQ,4BAA4B,GAAA,WAAA,OAAGR,oBAAA,EAAA,WAAA,YAAA;IAAA;IAAA;CAGpC,CAAC;AACF,MAAMS,kBAAkB,GAAA,WAAA,OAAGR,eAAA,EAAA;IAAAI,IAAA,EAAA;QAAAK,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;IAAA;IAAAC,SAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA,CAW1B,CAAC;AAGS,6CAA6CE,KAAK,IAAG;IAC5D,aAAa;IACb,MAAMC,cAAc,GAAGb,iBAAiB,CAAC,CAAC;IAC1C,MAAMc,yBAAyB,GAAGb,4BAA4B,CAAC,CAAC;IAChE,MAAMc,eAAe,GAAGb,kBAAkB,CAAC,CAAC;IAC5CU,KAAK,CAACd,IAAI,CAACkB,SAAS,OAAGrB,mBAAY,EAACE,2BAA2B,CAACC,IAAI,EAAEe,cAAc,EAAED,KAAK,CAACK,MAAM,KAAK,WAAW,IAAIF,eAAe,CAACjB,IAAI,EAAE,CAACc,KAAK,CAACM,UAAU,IAAIH,eAAe,CAACP,SAAS,EAAEI,KAAK,CAACd,IAAI,CAACkB,SAAS,CAAC;IACjN,IAAIJ,KAAK,CAACb,eAAe,EAAE;QACvBa,KAAK,CAACb,eAAe,CAACiB,SAAS,OAAGrB,mBAAY,EAACE,2BAA2B,CAACE,eAAe,EAAEe,yBAAyB,EAAEF,KAAK,CAACb,eAAe,CAACiB,SAAS,CAAC;IAC3J;IACA,OAAOJ,KAAK;AAChB,CAAC"}
|
package/lib-commonjs/components/MessageBarActions/useMessageBarActionsStyles.styles.raw.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/MessageBarActions/useMessageBarActionsStyles.styles.ts"],"sourcesContent":["
|
|
1
|
+
{"version":3,"sources":["../src/components/MessageBarActions/useMessageBarActionsStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { tokens } from '@fluentui/react-theme';\nimport type { MessageBarActionsSlots, MessageBarActionsState } from './MessageBarActions.types';\n\nexport const messageBarActionsClassNames: SlotClassNames<MessageBarActionsSlots> = {\n root: 'fui-MessageBarActions',\n containerAction: 'fui-MessageBarActions__containerAction',\n};\n\n/**\n * Styles for the root slot\n */\nconst useRootBaseStyles = makeResetStyles({\n gridArea: 'secondaryActions',\n display: 'flex',\n columnGap: tokens.spacingHorizontalM,\n paddingRight: tokens.spacingHorizontalM,\n});\n\nconst useContainerActionBaseStyles = makeResetStyles({\n gridArea: 'actions',\n paddingRight: tokens.spacingHorizontalM,\n});\n\nconst useMultilineStyles = makeStyles({\n root: {\n justifyContent: 'end',\n marginTop: tokens.spacingVerticalMNudge,\n marginBottom: tokens.spacingVerticalS,\n marginRight: '0px',\n paddingRight: tokens.spacingVerticalM,\n },\n\n noActions: {\n display: 'none',\n },\n});\n\n/**\n * Apply styling to the MessageBarActions slots based on the state\n */\nexport const useMessageBarActionsStyles_unstable = (state: MessageBarActionsState): MessageBarActionsState => {\n 'use no memo';\n\n const rootBaseStyles = useRootBaseStyles();\n const containerActionBaseStyles = useContainerActionBaseStyles();\n const multilineStyles = useMultilineStyles();\n state.root.className = mergeClasses(\n messageBarActionsClassNames.root,\n rootBaseStyles,\n state.layout === 'multiline' && multilineStyles.root,\n !state.hasActions && multilineStyles.noActions,\n state.root.className,\n );\n\n if (state.containerAction) {\n state.containerAction.className = mergeClasses(\n messageBarActionsClassNames.containerAction,\n containerActionBaseStyles,\n state.containerAction.className,\n );\n }\n\n return state;\n};\n"],"names":["makeResetStyles","makeStyles","mergeClasses","tokens","messageBarActionsClassNames","root","containerAction","useRootBaseStyles","gridArea","display","columnGap","spacingHorizontalM","paddingRight","useContainerActionBaseStyles","useMultilineStyles","justifyContent","marginTop","spacingVerticalMNudge","marginBottom","spacingVerticalS","marginRight","spacingVerticalM","noActions","useMessageBarActionsStyles_unstable","state","rootBaseStyles","containerActionBaseStyles","multilineStyles","className","layout","hasActions"],"mappings":"AAAA;;;;;;;;;;;;IAOaI,2BAAAA;;;IAqCAmB,mCAAAA;;;;uBA1C6C,iBAAiB;4BAEpD,wBAAwB;AAGxC,oCAA4E;IACjFlB,MAAM;IACNC,iBAAiB;AACnB,EAAE;AAEF;;CAEC,GACD,MAAMC,wBAAoBP,sBAAAA,EAAgB;IACxCQ,UAAU;IACVC,SAAS;IACTC,WAAWP,kBAAAA,CAAOQ,kBAAkB;IACpCC,cAAcT,kBAAAA,CAAOQ,kBAAkB;AACzC;AAEA,MAAME,mCAA+Bb,sBAAAA,EAAgB;IACnDQ,UAAU;IACVI,cAAcT,kBAAAA,CAAOQ,kBAAkB;AACzC;AAEA,MAAMG,yBAAqBb,iBAAAA,EAAW;IACpCI,MAAM;QACJU,gBAAgB;QAChBC,WAAWb,kBAAAA,CAAOc,qBAAqB;QACvCC,cAAcf,kBAAAA,CAAOgB,gBAAgB;QACrCC,aAAa;QACbR,cAAcT,kBAAAA,CAAOkB,gBAAgB;IACvC;IAEAC,WAAW;QACTb,SAAS;IACX;AACF;AAKO,4CAA4C,CAACe;IAClD;IAEA,MAAMC,iBAAiBlB;IACvB,MAAMmB,4BAA4Bb;IAClC,MAAMc,kBAAkBb;IACxBU,MAAMnB,IAAI,CAACuB,SAAS,OAAG1B,mBAAAA,EACrBE,4BAA4BC,IAAI,EAChCoB,gBACAD,MAAMK,MAAM,KAAK,eAAeF,gBAAgBtB,IAAI,EACpD,CAACmB,MAAMM,UAAU,IAAIH,gBAAgBL,SAAS,EAC9CE,MAAMnB,IAAI,CAACuB,SAAS;IAGtB,IAAIJ,MAAMlB,eAAe,EAAE;QACzBkB,MAAMlB,eAAe,CAACsB,SAAS,OAAG1B,mBAAAA,EAChCE,4BAA4BE,eAAe,EAC3CoB,2BACAF,MAAMlB,eAAe,CAACsB,SAAS;IAEnC;IAEA,OAAOJ;AACT,EAAE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/MessageBarBody/MessageBarBody.tsx"],"sourcesContent":["
|
|
1
|
+
{"version":3,"sources":["../src/components/MessageBarBody/MessageBarBody.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\nimport { useMessageBarBody_unstable } from './useMessageBarBody';\nimport { renderMessageBarBody_unstable } from './renderMessageBarBody';\nimport { useMessageBarBodyStyles_unstable } from './useMessageBarBodyStyles.styles';\nimport { useMessageBarBodyContextValues_unstable } from './useMessageBarBodyContextValues';\nimport type { MessageBarBodyProps } from './MessageBarBody.types';\n\n/**\n * MessageBarBody component\n */\nexport const MessageBarBody: ForwardRefComponent<MessageBarBodyProps> = React.forwardRef((props, ref) => {\n const state = useMessageBarBody_unstable(props, ref);\n const ctx = useMessageBarBodyContextValues_unstable(state);\n\n useMessageBarBodyStyles_unstable(state);\n useCustomStyleHook_unstable('useMessageBarBodyStyles_unstable')(state);\n return renderMessageBarBody_unstable(state, ctx);\n});\n\nMessageBarBody.displayName = 'MessageBarBody';\n"],"names":["React","useCustomStyleHook_unstable","useMessageBarBody_unstable","renderMessageBarBody_unstable","useMessageBarBodyStyles_unstable","useMessageBarBodyContextValues_unstable","MessageBarBody","forwardRef","props","ref","state","ctx","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;qCAEa,kCAAkC;mCACnC,sBAAsB;sCACnB,yBAAyB;+CACtB,mCAAmC;gDAC5B,mCAAmC;AAMpF,MAAMM,iBAAAA,WAAAA,GAA2DN,OAAMO,UAAU,CAAC,CAACC,OAAOC;IAC/F,MAAMC,YAAQR,6CAAAA,EAA2BM,OAAOC;IAChD,MAAME,UAAMN,uEAAAA,EAAwCK;QAEpDN,+DAAAA,EAAiCM;QACjCT,gDAAAA,EAA4B,oCAAoCS;IAChE,WAAOP,mDAAAA,EAA8BO,OAAOC;AAC9C,GAAG;AAEHL,eAAeM,WAAW,GAAG"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/MessageBarBody/useMessageBarBody.ts"],"sourcesContent":["
|
|
1
|
+
{"version":3,"sources":["../src/components/MessageBarBody/useMessageBarBody.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { getIntrinsicElementProps, slot, useMergedRefs } from '@fluentui/react-utilities';\nimport type { MessageBarBodyProps, MessageBarBodyState } from './MessageBarBody.types';\nimport { useMessageBarContext } from '../../contexts/messageBarContext';\n\n/**\n * Create the state required to render MessageBarBody.\n *\n * The returned state can be modified with hooks such as useMessageBarBodyStyles_unstable,\n * before being passed to renderMessageBarBody_unstable.\n *\n * @param props - props from this instance of MessageBarBody\n * @param ref - reference to root HTMLElement of MessageBarBody\n */\nexport const useMessageBarBody_unstable = (\n props: MessageBarBodyProps,\n ref: React.Ref<HTMLDivElement>,\n): MessageBarBodyState => {\n const { bodyRef } = useMessageBarContext();\n return {\n components: {\n root: 'div',\n },\n root: slot.always(\n getIntrinsicElementProps('div', {\n ref: useMergedRefs(ref, bodyRef),\n ...props,\n }),\n { elementType: 'div' },\n ),\n };\n};\n"],"names":["React","getIntrinsicElementProps","slot","useMergedRefs","useMessageBarContext","useMessageBarBody_unstable","props","ref","bodyRef","components","root","always","elementType"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;gCAC+B,4BAA4B;mCAErD,mCAAmC;AAWjE,MAAMK,6BAA6B,CACxCC,OACAC;IAEA,MAAM,EAAEC,OAAO,EAAE,OAAGJ,uCAAAA;IACpB,OAAO;QACLK,YAAY;YACVC,MAAM;QACR;QACAA,MAAMR,oBAAAA,CAAKS,MAAM,KACfV,wCAAAA,EAAyB,OAAO;YAC9BM,SAAKJ,6BAAAA,EAAcI,KAAKC;YACxB,GAAGF,KAAK;QACV,IACA;YAAEM,aAAa;QAAM;IAEzB;AACF,EAAE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/MessageBarBody/useMessageBarBodyContextValues.ts"],"sourcesContent":["
|
|
1
|
+
{"version":3,"sources":["../src/components/MessageBarBody/useMessageBarBodyContextValues.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { MessageBarBodyState, MessageBarBodyContextValues } from './MessageBarBody.types';\n\nexport function useMessageBarBodyContextValues_unstable(state: MessageBarBodyState): MessageBarBodyContextValues {\n const link = React.useMemo(\n () => ({\n inline: true,\n }),\n [],\n );\n\n return {\n link,\n };\n}\n"],"names":["React","useMessageBarBodyContextValues_unstable","state","link","useMemo","inline"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;AAGxB,SAASC,wCAAwCC,KAA0B;IAChF,MAAMC,OAAOH,OAAMI,OAAO,CACxB,IAAO,CAAA;YACLC,QAAQ;SACV,CAAA,EACA,EAAE;IAGJ,OAAO;QACLF;IACF;AACF"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useMessageBarBodyStyles.styles.js"],"sourcesContent":["
|
|
1
|
+
{"version":3,"sources":["useMessageBarBodyStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeResetStyles, mergeClasses } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nexport const messageBarBodyClassNames = {\n root: 'fui-MessageBarBody'\n};\nconst useRootBaseStyles = makeResetStyles({\n ...typographyStyles.body1,\n gridArea: 'body',\n paddingRight: tokens.spacingHorizontalM\n});\n/**\n * Apply styling to the MessageBarBody slots based on the state\n */ export const useMessageBarBodyStyles_unstable = (state)=>{\n 'use no memo';\n const rootBaseStyles = useRootBaseStyles();\n state.root.className = mergeClasses(messageBarBodyClassNames.root, rootBaseStyles, state.root.className);\n return state;\n};\n"],"names":["__resetStyles","mergeClasses","tokens","typographyStyles","messageBarBodyClassNames","root","useRootBaseStyles","useMessageBarBodyStyles_unstable","state","rootBaseStyles","className"],"mappings":"AAAA,YAAY;;;;;;;;;;;;4BAGyB;;;IAUpBO,gCAAgC;;;;uBAZH,gBAAgB;AAEvD,MAAMH,2BAA2B;IACpCC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,iBAAiB,GAAA,WAAA,OAAGN,oBAAA,EAAA,WAAA,WAAA;IAAA;IAAA;CAIzB,CAAC;AAGS,0CAA0CQ,KAAK,IAAG;IACzD,aAAa;IACb,MAAMC,cAAc,GAAGH,iBAAiB,CAAC,CAAC;IAC1CE,KAAK,CAACH,IAAI,CAACK,SAAS,OAAGT,mBAAY,EAACG,wBAAwB,CAACC,IAAI,EAAEI,cAAc,EAAED,KAAK,CAACH,IAAI,CAACK,SAAS,CAAC;IACxG,OAAOF,KAAK;AAChB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/MessageBarBody/useMessageBarBodyStyles.styles.ts"],"sourcesContent":["
|
|
1
|
+
{"version":3,"sources":["../src/components/MessageBarBody/useMessageBarBodyStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeResetStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { MessageBarBodySlots, MessageBarBodyState } from './MessageBarBody.types';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\n\nexport const messageBarBodyClassNames: SlotClassNames<MessageBarBodySlots> = {\n root: 'fui-MessageBarBody',\n};\n\nconst useRootBaseStyles = makeResetStyles({\n ...typographyStyles.body1,\n gridArea: 'body',\n paddingRight: tokens.spacingHorizontalM,\n});\n\n/**\n * Apply styling to the MessageBarBody slots based on the state\n */\nexport const useMessageBarBodyStyles_unstable = (state: MessageBarBodyState): MessageBarBodyState => {\n 'use no memo';\n\n const rootBaseStyles = useRootBaseStyles();\n state.root.className = mergeClasses(messageBarBodyClassNames.root, rootBaseStyles, state.root.className);\n\n return state;\n};\n"],"names":["makeResetStyles","mergeClasses","tokens","typographyStyles","messageBarBodyClassNames","root","useRootBaseStyles","body1","gridArea","paddingRight","spacingHorizontalM","useMessageBarBodyStyles_unstable","state","rootBaseStyles","className"],"mappings":"AAAA;;;;;;;;;;;;4BAOaI;;;oCAaAO;;;;uBAlBiC,iBAAiB;4BAGtB,wBAAwB;AAE1D,MAAMP,2BAAgE;IAC3EC,MAAM;AACR,EAAE;AAEF,MAAMC,wBAAoBN,sBAAAA,EAAgB;IACxC,GAAGG,4BAAAA,CAAiBI,KAAK;IACzBC,UAAU;IACVC,cAAcP,kBAAAA,CAAOQ,kBAAkB;AACzC;AAKO,MAAMC,mCAAmC,CAACC;IAC/C;IAEA,MAAMC,iBAAiBP;IACvBM,MAAMP,IAAI,CAACS,SAAS,OAAGb,mBAAAA,EAAaG,yBAAyBC,IAAI,EAAEQ,gBAAgBD,MAAMP,IAAI,CAACS,SAAS;IAEvG,OAAOF;AACT,EAAE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/MessageBarGroup/MessageBarGroup.tsx"],"sourcesContent":["
|
|
1
|
+
{"version":3,"sources":["../src/components/MessageBarGroup/MessageBarGroup.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\nimport { useMessageBarGroup_unstable } from './useMessageBarGroup';\nimport { renderMessageBarGroup_unstable } from './renderMessageBarGroup';\nimport { useMessageBarGroupStyles_unstable } from './useMessageBarGroupStyles.styles';\nimport type { MessageBarGroupProps } from './MessageBarGroup.types';\n\n/**\n * MessageBarGroup component\n */\nexport const MessageBarGroup: ForwardRefComponent<MessageBarGroupProps> = React.forwardRef((props, ref) => {\n const state = useMessageBarGroup_unstable(props, ref);\n\n useMessageBarGroupStyles_unstable(state);\n useCustomStyleHook_unstable('useMessageBarGroupStyles_unstable')(state);\n return renderMessageBarGroup_unstable(state);\n});\n\nMessageBarGroup.displayName = 'MessageBarGroup';\n"],"names":["React","useCustomStyleHook_unstable","useMessageBarGroup_unstable","renderMessageBarGroup_unstable","useMessageBarGroupStyles_unstable","MessageBarGroup","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;qCAEa,kCAAkC;oCAClC,uBAAuB;uCACpB,0BAA0B;gDACvB,oCAAoC;AAM/E,MAAMK,kBAAAA,WAAAA,GAA6DL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IACjG,MAAMC,YAAQP,+CAAAA,EAA4BK,OAAOC;QAEjDJ,iEAAAA,EAAkCK;QAClCR,gDAAAA,EAA4B,qCAAqCQ;IACjE,WAAON,qDAAAA,EAA+BM;AACxC,GAAG;AAEHJ,gBAAgBK,WAAW,GAAG"}
|
|
@@ -0,0 +1,84 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", {
|
|
3
|
+
value: true
|
|
4
|
+
});
|
|
5
|
+
function _export(target, all) {
|
|
6
|
+
for(var name in all)Object.defineProperty(target, name, {
|
|
7
|
+
enumerable: true,
|
|
8
|
+
get: all[name]
|
|
9
|
+
});
|
|
10
|
+
}
|
|
11
|
+
_export(exports, {
|
|
12
|
+
MessageBarMotion: function() {
|
|
13
|
+
return MessageBarMotion;
|
|
14
|
+
},
|
|
15
|
+
fadeAtom: function() {
|
|
16
|
+
return fadeAtom;
|
|
17
|
+
},
|
|
18
|
+
slideAtom: function() {
|
|
19
|
+
return slideAtom;
|
|
20
|
+
}
|
|
21
|
+
});
|
|
22
|
+
const _reactmotion = require("@fluentui/react-motion");
|
|
23
|
+
const fadeAtom = ({ direction, duration, easing = _reactmotion.motionTokens.curveLinear, delay = 0, fromOpacity = 0 })=>{
|
|
24
|
+
const keyframes = [
|
|
25
|
+
{
|
|
26
|
+
opacity: fromOpacity
|
|
27
|
+
},
|
|
28
|
+
{
|
|
29
|
+
opacity: 1
|
|
30
|
+
}
|
|
31
|
+
];
|
|
32
|
+
if (direction === 'exit') {
|
|
33
|
+
keyframes.reverse();
|
|
34
|
+
}
|
|
35
|
+
return {
|
|
36
|
+
keyframes,
|
|
37
|
+
duration,
|
|
38
|
+
easing,
|
|
39
|
+
delay,
|
|
40
|
+
// Applying opacity backwards and forwards in time is important
|
|
41
|
+
// to avoid a bug where a delayed animation is not hidden when it should be.
|
|
42
|
+
fill: 'both'
|
|
43
|
+
};
|
|
44
|
+
};
|
|
45
|
+
const slideAtom = ({ direction, duration, easing = _reactmotion.motionTokens.curveLinear, delay = 0, fromX = '0px', fromY = '20px' })=>{
|
|
46
|
+
const keyframes = [
|
|
47
|
+
{
|
|
48
|
+
translate: `${fromX} ${fromY}`
|
|
49
|
+
},
|
|
50
|
+
{
|
|
51
|
+
translate: '0px 0px'
|
|
52
|
+
}
|
|
53
|
+
];
|
|
54
|
+
if (direction === 'exit') {
|
|
55
|
+
keyframes.reverse();
|
|
56
|
+
}
|
|
57
|
+
return {
|
|
58
|
+
keyframes,
|
|
59
|
+
duration,
|
|
60
|
+
easing,
|
|
61
|
+
delay
|
|
62
|
+
};
|
|
63
|
+
};
|
|
64
|
+
const MessageBarMotion = (0, _reactmotion.createPresenceComponent)(({ animate })=>{
|
|
65
|
+
const duration = _reactmotion.motionTokens.durationGentle;
|
|
66
|
+
return {
|
|
67
|
+
enter: animate === 'both' ? [
|
|
68
|
+
fadeAtom({
|
|
69
|
+
direction: 'enter',
|
|
70
|
+
duration
|
|
71
|
+
}),
|
|
72
|
+
slideAtom({
|
|
73
|
+
direction: 'enter',
|
|
74
|
+
fromY: '-100%',
|
|
75
|
+
duration
|
|
76
|
+
})
|
|
77
|
+
] : [],
|
|
78
|
+
// Always exit with a fade
|
|
79
|
+
exit: fadeAtom({
|
|
80
|
+
direction: 'exit',
|
|
81
|
+
duration
|
|
82
|
+
})
|
|
83
|
+
};
|
|
84
|
+
});
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/components/MessageBarGroup/MessageBarGroup.motions.tsx"],"sourcesContent":["import { motionTokens, createPresenceComponent, PresenceDirection, AtomMotion } from '@fluentui/react-motion';\nimport { MessageBarGroupProps } from './MessageBarGroup.types';\n\n// TODO: import these atoms from react-motion-components-preview once they're available there\n\ntype BaseAtomParams = {\n /** The functional direction of the motion: 'enter' or 'exit'. */\n direction: PresenceDirection;\n\n /** The duration of the motion in milliseconds. */\n duration: number;\n\n /** The easing curve for the motion. */\n easing?: EffectTiming['easing'];\n\n /** Time (ms) to delay the animation. */\n delay?: EffectTiming['delay'];\n};\n\ninterface FadeAtomParams extends BaseAtomParams {\n /** Defines how values are applied before and after execution. Defaults to 'both'. */\n fill?: FillMode;\n\n /** The starting opacity value. Defaults to 0. */\n fromOpacity?: number;\n}\n\n/**\n * Generates a motion atom object for a fade-in or fade-out.\n * @param direction - The functional direction of the motion: 'enter' or 'exit'.\n * @param duration - The duration of the motion in milliseconds.\n * @param easing - The easing curve for the motion. Defaults to `motionTokens.curveLinear`.\n * @param delay - The delay before the motion starts. Defaults to 0.\n * @param fromOpacity - The starting opacity value. Defaults to 0.\n * @returns A motion atom object with opacity keyframes and the supplied duration and easing.\n */\nexport const fadeAtom = ({\n direction,\n duration,\n easing = motionTokens.curveLinear,\n delay = 0,\n fromOpacity = 0,\n}: FadeAtomParams): AtomMotion => {\n const keyframes = [{ opacity: fromOpacity }, { opacity: 1 }];\n if (direction === 'exit') {\n keyframes.reverse();\n }\n return {\n keyframes,\n duration,\n easing,\n delay,\n // Applying opacity backwards and forwards in time is important\n // to avoid a bug where a delayed animation is not hidden when it should be.\n fill: 'both',\n };\n};\n\ninterface SlideAtomParams extends BaseAtomParams {\n fromX?: string;\n fromY?: string;\n}\n\n/**\n * Generates a motion atom object for a slide-in or slide-out.\n * @param direction - The functional direction of the motion: 'enter' or 'exit'.\n * @param duration - The duration of the motion in milliseconds.\n * @param easing - The easing curve for the motion. Defaults to `motionTokens.curveLinear`.\n * @param fromX - The starting X translate value with units (e.g., '0px', '100%'). Defaults to '0px'.\n * @param fromY - The starting Y translate value with units (e.g., '-20px', '100%'). Defaults to '0px'.\n * @returns A motion atom object with translate keyframes and the supplied duration and easing.\n */\nexport const slideAtom = ({\n direction,\n duration,\n easing = motionTokens.curveLinear,\n delay = 0,\n fromX = '0px',\n fromY = '20px',\n}: SlideAtomParams): AtomMotion => {\n const keyframes = [{ translate: `${fromX} ${fromY}` }, { translate: '0px 0px' }];\n if (direction === 'exit') {\n keyframes.reverse();\n }\n return {\n keyframes,\n duration,\n easing,\n delay,\n };\n};\n\n/**\n * A presence component for a MessageBar to enter and exit from a MessageBarGroup.\n * It has an optional enter transition of a slide-in and fade-in,\n * when the `animate` prop is set to `'both'`.\n * It always has an exit transition of a fade-out.\n */\nexport const MessageBarMotion = createPresenceComponent<{ animate?: MessageBarGroupProps['animate'] }>(\n ({ animate }) => {\n const duration = motionTokens.durationGentle;\n\n return {\n enter:\n animate === 'both'\n ? // enter with slide and fade\n [fadeAtom({ direction: 'enter', duration }), slideAtom({ direction: 'enter', fromY: '-100%', duration })]\n : [], // no enter motion\n\n // Always exit with a fade\n exit: fadeAtom({ direction: 'exit', duration }),\n };\n },\n);\n"],"names":["motionTokens","createPresenceComponent","fadeAtom","direction","duration","easing","curveLinear","delay","fromOpacity","keyframes","opacity","reverse","fill","slideAtom","fromX","fromY","translate","MessageBarMotion","animate","durationGentle","enter","exit"],"mappings":";;;;;;;;;;;oBAkGaiB;;;IA9DAf,QAAAA;;;aAoCAW;;;;6BAxEwE,yBAAyB;AAoCvG,iBAAiB,CAAC,EACvBV,SAAS,EACTC,QAAQ,EACRC,SAASL,yBAAAA,CAAaM,WAAW,EACjCC,QAAQ,CAAC,EACTC,cAAc,CAAC,EACA;IACf,MAAMC,YAAY;QAAC;YAAEC,SAASF;QAAY;QAAG;YAAEE,SAAS;QAAE;KAAE;IAC5D,IAAIP,cAAc,QAAQ;QACxBM,UAAUE,OAAO;IACnB;IACA,OAAO;QACLF;QACAL;QACAC;QACAE;QACA,+DAA+D;QAC/D,4EAA4E;QAC5EK,MAAM;IACR;AACF,EAAE;AAgBK,MAAMC,YAAY,CAAC,EACxBV,SAAS,EACTC,QAAQ,EACRC,SAASL,yBAAAA,CAAaM,WAAW,EACjCC,QAAQ,CAAC,EACTO,QAAQ,KAAK,EACbC,QAAQ,MAAM,EACE;IAChB,MAAMN,YAAY;QAAC;YAAEO,WAAW,GAAGF,MAAM,CAAC,EAAEC,OAAO;QAAC;QAAG;YAAEC,WAAW;QAAU;KAAE;IAChF,IAAIb,cAAc,QAAQ;QACxBM,UAAUE,OAAO;IACnB;IACA,OAAO;QACLF;QACAL;QACAC;QACAE;IACF;AACF,EAAE;AAQK,MAAMU,uBAAmBhB,oCAAAA,EAC9B,CAAC,EAAEiB,OAAO,EAAE;IACV,MAAMd,WAAWJ,yBAAAA,CAAamB,cAAc;IAE5C,OAAO;QACLC,OACEF,YAAY,SAER;YAAChB,SAAS;gBAAEC,WAAW;gBAASC;YAAS;YAAIS,UAAU;gBAAEV,WAAW;gBAASY,OAAO;gBAASX;YAAS;SAAG,GACzG,EAAE;QAER,0BAA0B;QAC1BiB,MAAMnB,SAAS;YAAEC,WAAW;YAAQC;QAAS;IAC/C;AACF,GACA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/MessageBarGroup/MessageBarGroup.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nexport type MessageBarGroupSlots = {\n root: Slot<'div'>;\n};\n\n/**\n * MessageBarGroup Props\n */\nexport type MessageBarGroupProps = ComponentProps<MessageBarGroupSlots> & {\n children: React.ReactElement[] | React.ReactElement;\n animate?: 'exit-only' | 'both';\n};\n\n/**\n * State used in rendering MessageBarGroup\n */\nexport type MessageBarGroupState = ComponentState<MessageBarGroupSlots> &\n Pick<MessageBarGroupProps, 'animate'> & {\n enterStyles: string;\n exitStyles: string;\n children: React.ReactElement[];\n };\n"],"names":["React"],"mappings":";;;;;iEACuB,QAAQ"}
|
|
1
|
+
{"version":3,"sources":["../src/components/MessageBarGroup/MessageBarGroup.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nexport type MessageBarGroupSlots = {\n root: Slot<'div'>;\n};\n\n/**\n * MessageBarGroup Props\n */\nexport type MessageBarGroupProps = ComponentProps<MessageBarGroupSlots> & {\n children: React.ReactElement[] | React.ReactElement;\n animate?: 'exit-only' | 'both';\n};\n\n/**\n * State used in rendering MessageBarGroup\n */\nexport type MessageBarGroupState = ComponentState<MessageBarGroupSlots> &\n Pick<MessageBarGroupProps, 'animate'> & {\n /** @deprecated property is unused; these CSS animations were replaced by motion components */\n enterStyles: string;\n /** @deprecated property is unused; these CSS animations were replaced by motion components */\n exitStyles: string;\n children: React.ReactElement[];\n };\n"],"names":["React"],"mappings":";;;;;iEACuB,QAAQ"}
|
|
@@ -10,18 +10,19 @@ Object.defineProperty(exports, "renderMessageBarGroup_unstable", {
|
|
|
10
10
|
});
|
|
11
11
|
const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
|
|
12
12
|
const _reactutilities = require("@fluentui/react-utilities");
|
|
13
|
-
const
|
|
14
|
-
const
|
|
13
|
+
const _reactmotion = require("@fluentui/react-motion");
|
|
14
|
+
const _MessageBarGroupmotions = require("./MessageBarGroup.motions");
|
|
15
|
+
const _MotionRefForwarder = require("../MotionRefForwarder");
|
|
15
16
|
const renderMessageBarGroup_unstable = (state)=>{
|
|
16
17
|
(0, _reactutilities.assertSlots)(state);
|
|
17
18
|
return /*#__PURE__*/ (0, _jsxruntime.jsx)(state.root, {
|
|
18
|
-
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(
|
|
19
|
-
|
|
20
|
-
children: state.children.map((child)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_MessageBarTransition.MessageBarTransition, {
|
|
19
|
+
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactmotion.PresenceGroup, {
|
|
20
|
+
children: state.children.map((child)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_MessageBarGroupmotions.MessageBarMotion, {
|
|
21
21
|
animate: state.animate,
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
22
|
+
unmountOnExit: true,
|
|
23
|
+
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_MotionRefForwarder.MotionRefForwarder, {
|
|
24
|
+
children: child
|
|
25
|
+
})
|
|
25
26
|
}, child.key))
|
|
26
27
|
})
|
|
27
28
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/MessageBarGroup/renderMessageBarGroup.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { MessageBarGroupState, MessageBarGroupSlots } from './MessageBarGroup.types';\nimport {
|
|
1
|
+
{"version":3,"sources":["../src/components/MessageBarGroup/renderMessageBarGroup.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { MessageBarGroupState, MessageBarGroupSlots } from './MessageBarGroup.types';\nimport { PresenceGroup } from '@fluentui/react-motion';\nimport { MessageBarMotion } from './MessageBarGroup.motions';\nimport { MotionRefForwarder } from '../MotionRefForwarder';\n\n/**\n * Render the final JSX of MessageBarGroup\n */\nexport const renderMessageBarGroup_unstable = (state: MessageBarGroupState): JSXElement => {\n assertSlots<MessageBarGroupSlots>(state);\n\n return (\n <state.root>\n <PresenceGroup>\n {state.children.map(child => (\n <MessageBarMotion key={child.key} animate={state.animate} unmountOnExit>\n <MotionRefForwarder>{child}</MotionRefForwarder>\n </MessageBarMotion>\n ))}\n </PresenceGroup>\n </state.root>\n );\n};\n"],"names":["assertSlots","PresenceGroup","MessageBarMotion","MotionRefForwarder","renderMessageBarGroup_unstable","state","root","children","map","child","animate","unmountOnExit","key"],"mappings":";;;;+BAaaI;;;;;;4BAZb,gDAAiD;gCAErB,4BAA4B;6BAG1B,yBAAyB;wCACtB,4BAA4B;oCAC1B,wBAAwB;AAKpD,uCAAuC,CAACC;QAC7CL,2BAAAA,EAAkCK;IAElC,OAAA,WAAA,OACE,eAAA,EAACA,MAAMC,IAAI,EAAA;kBACT,WAAA,OAAA,eAAA,EAACL,0BAAAA,EAAAA;sBACEI,MAAME,QAAQ,CAACC,GAAG,CAACC,CAAAA,QAAAA,WAAAA,OAClB,eAAA,EAACP,wCAAAA,EAAAA;oBAAiCQ,SAASL,MAAMK,OAAO;oBAAEC,aAAa,EAAA;8BACrE,WAAA,OAAA,eAAA,EAACR,sCAAAA,EAAAA;kCAAoBM;;mBADAA,MAAMG,GAAG;;;AAO1C,EAAE"}
|
|
@@ -20,36 +20,8 @@ const _react = require("@griffel/react");
|
|
|
20
20
|
const messageBarGroupClassNames = {
|
|
21
21
|
root: 'fui-MessageBarGroup'
|
|
22
22
|
};
|
|
23
|
-
/**
|
|
24
|
-
* Styles for the root slot
|
|
25
|
-
*/ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
|
|
26
|
-
base: {
|
|
27
|
-
Bf5fcs: "f4cll0y",
|
|
28
|
-
vin17d: "fy8si0b"
|
|
29
|
-
},
|
|
30
|
-
enter: {
|
|
31
|
-
Bv12yb3: "f1dg9w1v"
|
|
32
|
-
},
|
|
33
|
-
exit: {
|
|
34
|
-
Bv12yb3: "fu80iee"
|
|
35
|
-
}
|
|
36
|
-
}, {
|
|
37
|
-
d: [
|
|
38
|
-
".f4cll0y{animation-fill-mode:forwards;}",
|
|
39
|
-
".fy8si0b{animation-duration:var(--durationNormal);}",
|
|
40
|
-
".f1dg9w1v{animation-name:fngeioi;}",
|
|
41
|
-
".fu80iee{animation-name:fk0lfw7;}"
|
|
42
|
-
],
|
|
43
|
-
k: [
|
|
44
|
-
"@keyframes fngeioi{from{opacity:0;transform:translateY(-100%);}to{opacity:1;transform:translateY(0);}}",
|
|
45
|
-
"@keyframes fk0lfw7{from{opacity:1;}to{opacity:0;}}"
|
|
46
|
-
]
|
|
47
|
-
});
|
|
48
23
|
const useMessageBarGroupStyles_unstable = (state)=>{
|
|
49
24
|
'use no memo';
|
|
50
|
-
const styles = useStyles();
|
|
51
25
|
state.root.className = (0, _react.mergeClasses)(messageBarGroupClassNames.root, state.root.className);
|
|
52
|
-
state.enterStyles = (0, _react.mergeClasses)(styles.base, styles.enter);
|
|
53
|
-
state.exitStyles = (0, _react.mergeClasses)(styles.base, styles.exit);
|
|
54
26
|
return state;
|
|
55
27
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useMessageBarGroupStyles.styles.js"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"sources":["useMessageBarGroupStyles.styles.js"],"sourcesContent":["import { mergeClasses } from '@griffel/react';\nexport const messageBarGroupClassNames = {\n root: 'fui-MessageBarGroup'\n};\n/**\n * Apply styling to the MessageBarGroup slots based on the state\n */ export const useMessageBarGroupStyles_unstable = (state)=>{\n 'use no memo';\n state.root.className = mergeClasses(messageBarGroupClassNames.root, state.root.className);\n return state;\n};\n"],"names":["mergeClasses","messageBarGroupClassNames","root","useMessageBarGroupStyles_unstable","state","className"],"mappings":";;;;;;;;;;;IACaC,yBAAyB;;;qCAKY;;;;uBANrB,gBAAgB;AACtC,kCAAkC;IACrCC,IAAI,EAAE;AACV,CAAC;AAGU,MAAMC,oCAAqCC,KAAK,IAAG;IAC1D,aAAa;IACbA,KAAK,CAACF,IAAI,CAACG,SAAS,OAAGL,mBAAY,EAACC,yBAAyB,CAACC,IAAI,EAAEE,KAAK,CAACF,IAAI,CAACG,SAAS,CAAC;IACzF,OAAOD,KAAK;AAChB,CAAC"}
|
|
@@ -17,45 +17,11 @@ _export(exports, {
|
|
|
17
17
|
}
|
|
18
18
|
});
|
|
19
19
|
const _react = require("@griffel/react");
|
|
20
|
-
const _reacttheme = require("@fluentui/react-theme");
|
|
21
20
|
const messageBarGroupClassNames = {
|
|
22
21
|
root: 'fui-MessageBarGroup'
|
|
23
22
|
};
|
|
24
|
-
/**
|
|
25
|
-
* Styles for the root slot
|
|
26
|
-
*/ const useStyles = (0, _react.makeStyles)({
|
|
27
|
-
base: {
|
|
28
|
-
animationFillMode: 'forwards',
|
|
29
|
-
animationDuration: _reacttheme.tokens.durationNormal
|
|
30
|
-
},
|
|
31
|
-
enter: {
|
|
32
|
-
animationName: {
|
|
33
|
-
from: {
|
|
34
|
-
opacity: 0,
|
|
35
|
-
transform: 'translateY(-100%)'
|
|
36
|
-
},
|
|
37
|
-
to: {
|
|
38
|
-
opacity: 1,
|
|
39
|
-
transform: 'translateY(0)'
|
|
40
|
-
}
|
|
41
|
-
}
|
|
42
|
-
},
|
|
43
|
-
exit: {
|
|
44
|
-
animationName: {
|
|
45
|
-
from: {
|
|
46
|
-
opacity: 1
|
|
47
|
-
},
|
|
48
|
-
to: {
|
|
49
|
-
opacity: 0
|
|
50
|
-
}
|
|
51
|
-
}
|
|
52
|
-
}
|
|
53
|
-
});
|
|
54
23
|
const useMessageBarGroupStyles_unstable = (state)=>{
|
|
55
24
|
'use no memo';
|
|
56
|
-
const styles = useStyles();
|
|
57
25
|
state.root.className = (0, _react.mergeClasses)(messageBarGroupClassNames.root, state.root.className);
|
|
58
|
-
state.enterStyles = (0, _react.mergeClasses)(styles.base, styles.enter);
|
|
59
|
-
state.exitStyles = (0, _react.mergeClasses)(styles.base, styles.exit);
|
|
60
26
|
return state;
|
|
61
27
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/MessageBarGroup/useMessageBarGroupStyles.styles.ts"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"sources":["../src/components/MessageBarGroup/useMessageBarGroupStyles.styles.ts"],"sourcesContent":["import { mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { MessageBarGroupSlots, MessageBarGroupState } from './MessageBarGroup.types';\n\nexport const messageBarGroupClassNames: SlotClassNames<MessageBarGroupSlots> = {\n root: 'fui-MessageBarGroup',\n};\n\n/**\n * Apply styling to the MessageBarGroup slots based on the state\n */\nexport const useMessageBarGroupStyles_unstable = (state: MessageBarGroupState): MessageBarGroupState => {\n 'use no memo';\n\n state.root.className = mergeClasses(messageBarGroupClassNames.root, state.root.className);\n return state;\n};\n"],"names":["mergeClasses","messageBarGroupClassNames","root","useMessageBarGroupStyles_unstable","state","className"],"mappings":";;;;;;;;;;;IAIaC,yBAAAA;;;qCAOAE;;;;uBAXgB,iBAAiB;AAIvC,kCAAwE;IAC7ED,MAAM;AACR,EAAE;AAKK,MAAMC,oCAAoC,CAACC;IAChD;IAEAA,MAAMF,IAAI,CAACG,SAAS,OAAGL,mBAAAA,EAAaC,0BAA0BC,IAAI,EAAEE,MAAMF,IAAI,CAACG,SAAS;IACxF,OAAOD;AACT,EAAE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/MessageBarTitle/MessageBarTitle.tsx"],"sourcesContent":["
|
|
1
|
+
{"version":3,"sources":["../src/components/MessageBarTitle/MessageBarTitle.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\nimport { useMessageBarTitle_unstable } from './useMessageBarTitle';\nimport { renderMessageBarTitle_unstable } from './renderMessageBarTitle';\nimport { useMessageBarTitleStyles_unstable } from './useMessageBarTitleStyles.styles';\nimport type { MessageBarTitleProps } from './MessageBarTitle.types';\n\n/**\n * MessageBarTitle component\n */\nexport const MessageBarTitle: ForwardRefComponent<MessageBarTitleProps> = React.forwardRef((props, ref) => {\n const state = useMessageBarTitle_unstable(props, ref);\n\n useMessageBarTitleStyles_unstable(state);\n useCustomStyleHook_unstable('useMessageBarTitleStyles_unstable')(state);\n return renderMessageBarTitle_unstable(state);\n});\n\nMessageBarTitle.displayName = 'MessageBarTitle';\n"],"names":["React","useCustomStyleHook_unstable","useMessageBarTitle_unstable","renderMessageBarTitle_unstable","useMessageBarTitleStyles_unstable","MessageBarTitle","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;qCAEa,kCAAkC;oCAClC,uBAAuB;uCACpB,0BAA0B;gDACvB,oCAAoC;AAM/E,MAAMK,kBAAAA,WAAAA,GAA6DL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IACjG,MAAMC,YAAQP,+CAAAA,EAA4BK,OAAOC;QAEjDJ,iEAAAA,EAAkCK;QAClCR,gDAAAA,EAA4B,qCAAqCQ;IACjE,WAAON,qDAAAA,EAA+BM;AACxC,GAAG;AAEHJ,gBAAgBK,WAAW,GAAG"}
|