Private
Public Access
1
0

feat: Fluent UI Outlook Lite + connections mockup

This commit is contained in:
2026-04-14 18:52:25 +00:00
parent 1199eff6c3
commit dfa4010406
34820 changed files with 1003813 additions and 205 deletions

View File

@@ -0,0 +1,26 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "Toolbar", {
enumerable: true,
get: function() {
return Toolbar;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _useToolbar = require("./useToolbar");
const _renderToolbar = require("./renderToolbar");
const _useToolbarStylesstyles = require("./useToolbarStyles.styles");
const _useToolbarContextValues = require("./useToolbarContextValues");
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
const Toolbar = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
const state = (0, _useToolbar.useToolbar_unstable)(props, ref);
const contextValues = (0, _useToolbarContextValues.useToolbarContextValues_unstable)(state);
(0, _useToolbarStylesstyles.useToolbarStyles_unstable)(state);
(0, _reactsharedcontexts.useCustomStyleHook_unstable)('useToolbarStyles_unstable')(state);
return (0, _renderToolbar.renderToolbar_unstable)(state, contextValues);
});
Toolbar.displayName = 'Toolbar';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Toolbar/Toolbar.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useToolbar_unstable } from './useToolbar';\nimport { renderToolbar_unstable } from './renderToolbar';\nimport { useToolbarStyles_unstable } from './useToolbarStyles.styles';\nimport type { ToolbarProps } from './Toolbar.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useToolbarContextValues_unstable } from './useToolbarContextValues';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * Toolbar component\n */\nexport const Toolbar: ForwardRefComponent<ToolbarProps> = React.forwardRef((props, ref) => {\n const state = useToolbar_unstable(props, ref);\n const contextValues = useToolbarContextValues_unstable(state);\n\n useToolbarStyles_unstable(state);\n\n useCustomStyleHook_unstable('useToolbarStyles_unstable')(state);\n\n return renderToolbar_unstable(state, contextValues);\n});\n\nToolbar.displayName = 'Toolbar';\n"],"names":["React","useToolbar_unstable","renderToolbar_unstable","useToolbarStyles_unstable","useToolbarContextValues_unstable","useCustomStyleHook_unstable","Toolbar","forwardRef","props","ref","state","contextValues","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;4BACK,eAAe;+BACZ,kBAAkB;wCACf,4BAA4B;yCAGrB,4BAA4B;qCACjC,kCAAkC;AAKvE,MAAMM,UAAAA,WAAAA,GAA6CN,OAAMO,UAAU,CAAC,CAACC,OAAOC;IACjF,MAAMC,YAAQT,+BAAAA,EAAoBO,OAAOC;IACzC,MAAME,oBAAgBP,yDAAAA,EAAiCM;QAEvDP,iDAAAA,EAA0BO;QAE1BL,gDAAAA,EAA4B,6BAA6BK;IAEzD,WAAOR,qCAAAA,EAAuBQ,OAAOC;AACvC,GAAG;AAEHL,QAAQM,WAAW,GAAG"}

View File

@@ -0,0 +1,6 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Toolbar/Toolbar.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type ToolbarSlots = {\n root: Slot<'div'>;\n};\n\nexport type ToolbarCheckedValueChangeData = {\n /** The items for this value that are checked */\n checkedItems: string[];\n /** The name of the value */\n name: string;\n};\n\nexport type ToolbarCheckedValueChangeEvent = React.MouseEvent | React.KeyboardEvent;\n\n/**\n * Toolbar Props\n */\nexport type ToolbarProps = ComponentProps<ToolbarSlots> & {\n /**\n * Toolbar can have small or medium size\n *\n * @default medium\n */\n size?: 'small' | 'medium' | 'large';\n\n /**\n * Toolbar can be vertical styled\n * @default false\n */\n vertical?: boolean;\n\n /**\n * Map of all checked values\n */\n checkedValues?: Record<string, string[]>;\n\n /**\n * Default values to be checked on mount\n */\n defaultCheckedValues?: Record<string, string[]>;\n\n /**\n * Callback when checked items change for value with a name\n *\n * @param event - React's original SyntheticEvent\n * @param data - A data object with relevant information\n */\n // eslint-disable-next-line @nx/workspace-consistent-callback-type -- can't change type of existing callback\n onCheckedValueChange?: (e: ToolbarCheckedValueChangeEvent, data: ToolbarCheckedValueChangeData) => void;\n};\n\nexport type ToolbarBaseProps = Omit<ToolbarProps, 'size'>;\n\n/**\n * State used in rendering Toolbar\n */\nexport type ToolbarState = ComponentState<ToolbarSlots> &\n Required<Pick<ToolbarProps, 'size' | 'checkedValues' | 'vertical'>> &\n Pick<ToolbarProps, 'defaultCheckedValues' | 'onCheckedValueChange'> & {\n /*\n * Toggles the state of a ToggleButton item\n */\n handleToggleButton: ToggableHandler;\n /*\n * Toggles the state of a ToggleButton item\n */\n handleRadio: ToggableHandler;\n };\n\nexport type ToolbarBaseState = Omit<ToolbarState, 'size'>;\n\nexport type ToolbarContextValue = Pick<ToolbarState, 'size' | 'vertical' | 'checkedValues'> & {\n handleToggleButton?: ToggableHandler;\n handleRadio?: ToggableHandler;\n};\n\nexport type ToolbarContextValues = {\n toolbar: ToolbarContextValue;\n};\n\nexport type UninitializedToolbarState = Omit<ToolbarBaseState, 'checkedValues' | 'handleToggleButton' | 'handleRadio'> &\n Partial<Pick<ToolbarState, 'checkedValues'>>;\n\nexport type ToggableHandler = (\n e: React.MouseEvent | React.KeyboardEvent,\n name: string,\n value: string,\n checked?: boolean,\n) => void;\n"],"names":["React"],"mappings":";;;;;iEAAuB,QAAQ"}

View File

@@ -0,0 +1,29 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
ToolbarContext: function() {
return ToolbarContext;
},
useToolbarContext_unstable: function() {
return useToolbarContext_unstable;
}
});
const _reactcontextselector = require("@fluentui/react-context-selector");
const ToolbarContext = (0, _reactcontextselector.createContext)(undefined);
const toolbarContextDefaultValue = {
size: 'medium',
handleToggleButton: ()=>null,
handleRadio: ()=>null,
vertical: false,
checkedValues: {}
};
const useToolbarContext_unstable = (selector)=>(0, _reactcontextselector.useContextSelector)(ToolbarContext, (ctx = toolbarContextDefaultValue)=>selector(ctx));

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Toolbar/ToolbarContext.ts"],"sourcesContent":["'use client';\n\nimport { ContextSelector, createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport type { Context } from '@fluentui/react-context-selector';\nimport type { ToolbarContextValue } from './Toolbar.types';\n\nexport const ToolbarContext = createContext<ToolbarContextValue | undefined>(undefined) as Context<ToolbarContextValue>;\n\nconst toolbarContextDefaultValue: ToolbarContextValue = {\n size: 'medium' as 'medium',\n handleToggleButton: () => null,\n handleRadio: () => null,\n vertical: false,\n checkedValues: {},\n};\n\nexport const useToolbarContext_unstable = <T>(selector: ContextSelector<ToolbarContextValue, T>): T =>\n useContextSelector(ToolbarContext, (ctx = toolbarContextDefaultValue) => selector(ctx));\n"],"names":["createContext","useContextSelector","ToolbarContext","undefined","toolbarContextDefaultValue","size","handleToggleButton","handleRadio","vertical","checkedValues","useToolbarContext_unstable","selector","ctx"],"mappings":"AAAA;;;;;;;;;;;;kBAMaE;;;8BAUAQ;;;;sCAdsD,mCAAmC;AAI/F,MAAMR,qBAAiBF,mCAAAA,EAA+CG,WAA2C;AAExH,MAAMC,6BAAkD;IACtDC,MAAM;IACNC,oBAAoB,IAAM;IAC1BC,aAAa,IAAM;IACnBC,UAAU;IACVC,eAAe,CAAC;AAClB;AAEO,MAAMC,6BAA6B,CAAIC,eAC5CV,wCAAAA,EAAmBC,gBAAgB,CAACU,MAAMR,0BAA0B,GAAKO,SAASC,MAAM"}

View File

@@ -0,0 +1,42 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
Toolbar: function() {
return _Toolbar.Toolbar;
},
renderToolbar_unstable: function() {
return _renderToolbar.renderToolbar_unstable;
},
toolbarClassNames: function() {
return _useToolbarStylesstyles.toolbarClassNames;
},
useToolbarBase_unstable: function() {
return _useToolbar.useToolbarBase_unstable;
},
useToolbarContextValues_unstable: function() {
return _useToolbarContextValues.useToolbarContextValues_unstable;
},
useToolbarContext_unstable: function() {
return _ToolbarContext.useToolbarContext_unstable;
},
useToolbarStyles_unstable: function() {
return _useToolbarStylesstyles.useToolbarStyles_unstable;
},
useToolbar_unstable: function() {
return _useToolbar.useToolbar_unstable;
}
});
const _ToolbarContext = require("./ToolbarContext");
const _Toolbar = require("./Toolbar");
const _renderToolbar = require("./renderToolbar");
const _useToolbar = require("./useToolbar");
const _useToolbarContextValues = require("./useToolbarContextValues");
const _useToolbarStylesstyles = require("./useToolbarStyles.styles");

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Toolbar/index.ts"],"sourcesContent":["export { useToolbarContext_unstable } from './ToolbarContext';\nexport { Toolbar } from './Toolbar';\nexport type {\n ToggableHandler,\n ToolbarCheckedValueChangeData,\n ToolbarCheckedValueChangeEvent,\n ToolbarContextValue,\n ToolbarContextValues,\n ToolbarBaseProps,\n ToolbarProps,\n ToolbarSlots,\n ToolbarBaseState,\n ToolbarState,\n UninitializedToolbarState,\n} from './Toolbar.types';\nexport { renderToolbar_unstable } from './renderToolbar';\nexport { useToolbar_unstable, useToolbarBase_unstable } from './useToolbar';\nexport { useToolbarContextValues_unstable } from './useToolbarContextValues';\nexport { toolbarClassNames, useToolbarStyles_unstable } from './useToolbarStyles.styles';\n"],"names":["useToolbarContext_unstable","Toolbar","renderToolbar_unstable","useToolbar_unstable","useToolbarBase_unstable","useToolbarContextValues_unstable","toolbarClassNames","useToolbarStyles_unstable"],"mappings":";;;;;;;;;;;IACSC;+BAAO;;;eAcPC,qCAAsB;;;eAGtBI,yCAAiB;;;eAFIF,mCAAuB;;;eAC5CC,yDAAgC;;;eAjBhCL,0CAA0B;;;eAkBPO,iDAAyB;;;eAF5CJ,+BAAmB;;;gCAhBe,mBAAmB;yBACtC,YAAY;+BAcG,kBAAkB;4BACI,eAAe;yCAC3B,4BAA4B;wCAChB,4BAA4B"}

View File

@@ -0,0 +1,22 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "renderToolbar_unstable", {
enumerable: true,
get: function() {
return renderToolbar_unstable;
}
});
const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
const _reactutilities = require("@fluentui/react-utilities");
const _ToolbarContext = require("./ToolbarContext");
const renderToolbar_unstable = (state, contextValues)=>{
(0, _reactutilities.assertSlots)(state);
return /*#__PURE__*/ (0, _jsxruntime.jsx)(_ToolbarContext.ToolbarContext.Provider, {
value: contextValues.toolbar,
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(state.root, {
children: state.root.children
})
});
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Toolbar/renderToolbar.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { ToolbarState, ToolbarSlots, ToolbarContextValues } from './Toolbar.types';\nimport { ToolbarContext } from './ToolbarContext';\n\n/**\n * Render the final JSX of Toolbar\n */\nexport const renderToolbar_unstable = (state: ToolbarState, contextValues: ToolbarContextValues): JSXElement => {\n assertSlots<ToolbarSlots>(state);\n\n return (\n <ToolbarContext.Provider value={contextValues.toolbar}>\n <state.root>{state.root.children}</state.root>\n </ToolbarContext.Provider>\n );\n};\n"],"names":["assertSlots","ToolbarContext","renderToolbar_unstable","state","contextValues","Provider","value","toolbar","root","children"],"mappings":";;;;+BAUaE;;;;;;4BATb,gDAAiD;gCACrB,4BAA4B;gCAGzB,mBAAmB;AAK3C,+BAA+B,CAACC,OAAqBC;QAC1DJ,2BAAAA,EAA0BG;IAE1B,OAAA,WAAA,OACE,eAAA,EAACF,8BAAAA,CAAeI,QAAQ,EAAA;QAACC,OAAOF,cAAcG,OAAO;kBACnD,WAAA,OAAA,eAAA,EAACJ,MAAMK,IAAI,EAAA;sBAAEL,MAAMK,IAAI,CAACC,QAAQ;;;AAGtC,EAAE"}

View File

@@ -0,0 +1,137 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
useToolbarArrowNavigationProps_unstable: function() {
return useToolbarArrowNavigationProps_unstable;
},
useToolbarBase_unstable: function() {
return useToolbarBase_unstable;
},
useToolbar_unstable: function() {
return useToolbar_unstable;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _reactutilities = require("@fluentui/react-utilities");
const _reacttabster = require("@fluentui/react-tabster");
const useToolbar_unstable = (props, ref)=>{
const { size = 'medium' } = props;
const state = useToolbarBase_unstable(props, ref);
const arrowNavigationProps = useToolbarArrowNavigationProps_unstable();
return {
size,
...state,
root: {
...state.root,
...arrowNavigationProps
}
};
};
const useToolbarBase_unstable = (props, ref)=>{
const { vertical = false } = props;
const initialState = {
vertical,
// TODO add appropriate props/defaults
components: {
// TODO add each slot's element type or component
root: 'div'
},
// TODO add appropriate slots, for example:
// mySlot: resolveShorthand(props.mySlot),
root: _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)('div', {
role: 'toolbar',
ref: ref,
...vertical && {
'aria-orientation': 'vertical'
},
...props
}), {
elementType: 'div'
})
};
const [checkedValues, onCheckedValueChange] = useToolbarSelectableState({
checkedValues: props.checkedValues,
defaultCheckedValues: props.defaultCheckedValues,
onCheckedValueChange: props.onCheckedValueChange
});
const handleToggleButton = (0, _reactutilities.useEventCallback)((e, name, value, checked)=>{
if (name && value) {
const checkedItems = (checkedValues === null || checkedValues === void 0 ? void 0 : checkedValues[name]) || [];
const newCheckedItems = [
...checkedItems
];
if (checked) {
newCheckedItems.splice(newCheckedItems.indexOf(value), 1);
} else {
newCheckedItems.push(value);
}
onCheckedValueChange === null || onCheckedValueChange === void 0 ? void 0 : onCheckedValueChange(e, {
name,
checkedItems: newCheckedItems
});
}
});
const handleRadio = (0, _reactutilities.useEventCallback)((e, name, value, checked)=>{
if (name && value) {
onCheckedValueChange === null || onCheckedValueChange === void 0 ? void 0 : onCheckedValueChange(e, {
name,
checkedItems: [
value
]
});
}
});
return {
...initialState,
handleToggleButton,
handleRadio,
checkedValues: checkedValues !== null && checkedValues !== void 0 ? checkedValues : {}
};
};
/**
* Adds appropriate state values and handlers for selectable items
* i.e checkboxes and radios
*/ const useToolbarSelectableState = (state)=>{
const [checkedValues, setCheckedValues] = (0, _reactutilities.useControllableState)({
state: state.checkedValues,
defaultState: state.defaultCheckedValues,
initialState: {}
});
const { onCheckedValueChange: onCheckedValueChangeOriginal } = state;
const onCheckedValueChange = (0, _reactutilities.useEventCallback)((e, { name, checkedItems })=>{
if (onCheckedValueChangeOriginal) {
onCheckedValueChangeOriginal(e, {
name,
checkedItems
});
}
setCheckedValues((s)=>{
return s ? {
...s,
[name]: checkedItems
} : {
[name]: checkedItems
};
});
});
return [
checkedValues,
onCheckedValueChange
];
};
const useToolbarArrowNavigationProps_unstable = ()=>{
return (0, _reacttabster.useArrowNavigationGroup)({
circular: true,
axis: 'both'
});
};

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,24 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "useToolbarContextValues_unstable", {
enumerable: true,
get: function() {
return useToolbarContextValues_unstable;
}
});
function useToolbarContextValues_unstable(state) {
const { size, handleToggleButton, vertical, checkedValues, handleRadio } = state;
// This context is created with "@fluentui/react-context-selector", these is no sense to memoize it
const toolbar = {
size,
vertical,
handleToggleButton,
handleRadio,
checkedValues
};
return {
toolbar
};
}

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Toolbar/useToolbarContextValues.tsx"],"sourcesContent":["import type { ToolbarContextValue, ToolbarContextValues, ToolbarState } from './Toolbar.types';\n\nexport function useToolbarContextValues_unstable(state: ToolbarState): ToolbarContextValues {\n const { size, handleToggleButton, vertical, checkedValues, handleRadio } = state;\n // This context is created with \"@fluentui/react-context-selector\", these is no sense to memoize it\n const toolbar: ToolbarContextValue = {\n size,\n vertical,\n handleToggleButton,\n handleRadio,\n checkedValues,\n };\n\n return { toolbar };\n}\n"],"names":["useToolbarContextValues_unstable","state","size","handleToggleButton","vertical","checkedValues","handleRadio","toolbar"],"mappings":";;;;+BAEgBA;;;;;;AAAT,0CAA0CC,KAAmB;IAClE,MAAM,EAAEC,IAAI,EAAEC,kBAAkB,EAAEC,QAAQ,EAAEC,aAAa,EAAEC,WAAW,EAAE,GAAGL;IAC3E,mGAAmG;IACnG,MAAMM,UAA+B;QACnCL;QACAE;QACAD;QACAG;QACAD;IACF;IAEA,OAAO;QAAEE;IAAQ;AACnB"}

View File

@@ -0,0 +1,99 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
toolbarClassNames: function() {
return toolbarClassNames;
},
useToolbarStyles_unstable: function() {
return useToolbarStyles_unstable;
}
});
const _react = require("@griffel/react");
const toolbarClassNames = {
root: 'fui-Toolbar'
};
/**
* Styles for the root slot
*/ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
root: {
mc9l5x: "f22iagw",
Bt984gj: "f122n59",
Byoj8tv: 0,
uwmqm3: 0,
z189sj: 0,
z8tnut: 0,
B0ocmuz: "f1yqiaad"
},
vertical: {
Beiy3e4: "f1vx9l62",
a9b677: "f1acs6jw"
},
small: {
Byoj8tv: 0,
uwmqm3: 0,
z189sj: 0,
z8tnut: 0,
B0ocmuz: "fvz760z"
},
medium: {
Byoj8tv: 0,
uwmqm3: 0,
z189sj: 0,
z8tnut: 0,
B0ocmuz: "f1yqiaad"
},
large: {
Byoj8tv: 0,
uwmqm3: 0,
z189sj: 0,
z8tnut: 0,
B0ocmuz: "f1ms6bdn"
}
}, {
d: [
".f22iagw{display:flex;}",
".f122n59{align-items:center;}",
[
".f1yqiaad{padding:4px 8px;}",
{
p: -1
}
],
".f1vx9l62{flex-direction:column;}",
".f1acs6jw{width:fit-content;}",
[
".fvz760z{padding:0px 4px;}",
{
p: -1
}
],
[
".f1yqiaad{padding:4px 8px;}",
{
p: -1
}
],
[
".f1ms6bdn{padding:4px 20px;}",
{
p: -1
}
]
]
});
const useToolbarStyles_unstable = (state)=>{
'use no memo';
const styles = useStyles();
const { vertical, size } = state;
state.root.className = (0, _react.mergeClasses)(toolbarClassNames.root, styles.root, vertical && styles.vertical, size === 'small' && !vertical && styles.small, size === 'medium' && !vertical && styles.medium, size === 'large' && !vertical && styles.large, state.root.className);
return state;
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["useToolbarStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nexport const toolbarClassNames = {\n root: 'fui-Toolbar'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n root: {\n display: 'flex',\n alignItems: 'center',\n padding: '4px 8px'\n },\n vertical: {\n flexDirection: 'column',\n width: 'fit-content'\n },\n small: {\n padding: '0px 4px'\n },\n medium: {\n padding: '4px 8px'\n },\n large: {\n padding: '4px 20px'\n }\n});\n/**\n * Apply styling to the Toolbar slots based on the state\n */ export const useToolbarStyles_unstable = (state)=>{\n 'use no memo';\n const styles = useStyles();\n const { vertical, size } = state;\n state.root.className = mergeClasses(toolbarClassNames.root, styles.root, vertical && styles.vertical, size === 'small' && !vertical && styles.small, size === 'medium' && !vertical && styles.medium, size === 'large' && !vertical && styles.large, state.root.className);\n return state;\n};\n"],"names":["__styles","mergeClasses","toolbarClassNames","root","useStyles","mc9l5x","Bt984gj","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","vertical","Beiy3e4","a9b677","small","medium","large","d","p","useToolbarStyles_unstable","state","styles","size","className"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAECE,iBAAiB;;;IA2BbkB,yBAAyB;;;;uBA5BD,gBAAgB;AAClD,0BAA0B;IAC7BjB,IAAI,EAAE;AACV,CAAC;AACD;;CAEA,GAAI,MAAMC,SAAS,GAAA,WAAA,OAAGJ,eAAA,EAAA;IAAAG,IAAA,EAAA;QAAAE,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAC,QAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAAC,KAAA,EAAA;QAAAR,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAK,MAAA,EAAA;QAAAT,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAM,KAAA,EAAA;QAAAV,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;AAAA,GAAA;IAAAO,CAAA,EAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAC,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;KAAA;AAAA,CAmBrB,CAAC;AAGS,kCAAmCE,KAAK,IAAG;IAClD,aAAa;IACb,MAAMC,MAAM,GAAGlB,SAAS,CAAC,CAAC;IAC1B,MAAM,EAAEQ,QAAQ,EAAEW,IAAAA,EAAM,GAAGF,KAAK;IAChCA,KAAK,CAAClB,IAAI,CAACqB,SAAS,OAAGvB,mBAAY,EAACC,iBAAiB,CAACC,IAAI,EAAEmB,MAAM,CAACnB,IAAI,EAAES,QAAQ,IAAIU,MAAM,CAACV,QAAQ,EAAEW,IAAI,KAAK,OAAO,IAAI,CAACX,QAAQ,IAAIU,MAAM,CAACP,KAAK,EAAEQ,IAAI,KAAK,QAAQ,IAAI,CAACX,QAAQ,IAAIU,MAAM,CAACN,MAAM,EAAEO,IAAI,KAAK,OAAO,IAAI,CAACX,QAAQ,IAAIU,MAAM,CAACL,KAAK,EAAEI,KAAK,CAAClB,IAAI,CAACqB,SAAS,CAAC;IAC1Q,OAAOH,KAAK;AAChB,CAAC"}

View File

@@ -0,0 +1,52 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
toolbarClassNames: function() {
return toolbarClassNames;
},
useToolbarStyles_unstable: function() {
return useToolbarStyles_unstable;
}
});
const _react = require("@griffel/react");
const toolbarClassNames = {
root: 'fui-Toolbar'
};
/**
* Styles for the root slot
*/ const useStyles = (0, _react.makeStyles)({
root: {
display: 'flex',
alignItems: 'center',
padding: '4px 8px'
},
vertical: {
flexDirection: 'column',
width: 'fit-content'
},
small: {
padding: '0px 4px'
},
medium: {
padding: '4px 8px'
},
large: {
padding: '4px 20px'
}
});
const useToolbarStyles_unstable = (state)=>{
'use no memo';
const styles = useStyles();
const { vertical, size } = state;
state.root.className = (0, _react.mergeClasses)(toolbarClassNames.root, styles.root, vertical && styles.vertical, size === 'small' && !vertical && styles.small, size === 'medium' && !vertical && styles.medium, size === 'large' && !vertical && styles.large, state.root.className);
return state;
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Toolbar/useToolbarStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { ToolbarSlots, ToolbarState } from './Toolbar.types';\n\nexport const toolbarClassNames: SlotClassNames<ToolbarSlots> = {\n root: 'fui-Toolbar',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n root: {\n display: 'flex',\n alignItems: 'center',\n padding: '4px 8px',\n },\n vertical: {\n flexDirection: 'column',\n width: 'fit-content',\n },\n small: { padding: '0px 4px' },\n medium: { padding: '4px 8px' },\n large: { padding: '4px 20px' },\n});\n\n/**\n * Apply styling to the Toolbar slots based on the state\n */\nexport const useToolbarStyles_unstable = (state: ToolbarState): ToolbarState => {\n 'use no memo';\n\n const styles = useStyles();\n const { vertical, size } = state;\n state.root.className = mergeClasses(\n toolbarClassNames.root,\n styles.root,\n vertical && styles.vertical,\n size === 'small' && !vertical && styles.small,\n size === 'medium' && !vertical && styles.medium,\n size === 'large' && !vertical && styles.large,\n state.root.className,\n );\n\n return state;\n};\n"],"names":["makeStyles","mergeClasses","toolbarClassNames","root","useStyles","display","alignItems","padding","vertical","flexDirection","width","small","medium","large","useToolbarStyles_unstable","state","styles","size","className"],"mappings":"AAAA;;;;;;;;;;;;IAMaE,iBAAAA;;;6BAyBAY;eAAAA;;;uBA5B4B,iBAAiB;AAGnD,0BAAwD;IAC7DX,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,gBAAYJ,iBAAAA,EAAW;IAC3BG,MAAM;QACJE,SAAS;QACTC,YAAY;QACZC,SAAS;IACX;IACAC,UAAU;QACRC,eAAe;QACfC,OAAO;IACT;IACAC,OAAO;QAAEJ,SAAS;IAAU;IAC5BK,QAAQ;QAAEL,SAAS;IAAU;IAC7BM,OAAO;QAAEN,SAAS;IAAW;AAC/B;AAKO,kCAAkC,CAACQ;IACxC;IAEA,MAAMC,SAASZ;IACf,MAAM,EAAEI,QAAQ,EAAES,IAAI,EAAE,GAAGF;IAC3BA,MAAMZ,IAAI,CAACe,SAAS,OAAGjB,mBAAAA,EACrBC,kBAAkBC,IAAI,EACtBa,OAAOb,IAAI,EACXK,YAAYQ,OAAOR,QAAQ,EAC3BS,SAAS,WAAW,CAACT,YAAYQ,OAAOL,KAAK,EAC7CM,SAAS,YAAY,CAACT,YAAYQ,OAAOJ,MAAM,EAC/CK,SAAS,WAAW,CAACT,YAAYQ,OAAOH,KAAK,EAC7CE,MAAMZ,IAAI,CAACe,SAAS;IAGtB,OAAOH;AACT,EAAE"}

View File

@@ -0,0 +1,25 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "ToolbarButton", {
enumerable: true,
get: function() {
return ToolbarButton;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _reactbutton = require("@fluentui/react-button");
const _useToolbarButtonStylesstyles = require("./useToolbarButtonStyles.styles");
const _useToolbarButton = require("./useToolbarButton");
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
const ToolbarButton = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
const state = (0, _useToolbarButton.useToolbarButton_unstable)(props, ref);
(0, _useToolbarButtonStylesstyles.useToolbarButtonStyles_unstable)(state);
(0, _reactsharedcontexts.useCustomStyleHook_unstable)('useToolbarButtonStyles_unstable')(state);
return (0, _reactbutton.renderButton_unstable)(state);
// Casting is required due to lack of distributive union to support unions on @types/react
});
ToolbarButton.displayName = 'ToolbarButton';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/ToolbarButton/ToolbarButton.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ToolbarButtonProps } from './ToolbarButton.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { renderButton_unstable } from '@fluentui/react-button';\nimport { useToolbarButtonStyles_unstable } from './useToolbarButtonStyles.styles';\nimport { useToolbarButton_unstable } from './useToolbarButton';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * ToolbarButton component is a Button to be used inside Toolbar\n * which will respect toolbar props such as `size`\n */\nexport const ToolbarButton: ForwardRefComponent<ToolbarButtonProps> = React.forwardRef((props, ref) => {\n const state = useToolbarButton_unstable(props, ref);\n\n useToolbarButtonStyles_unstable(state);\n\n useCustomStyleHook_unstable('useToolbarButtonStyles_unstable')(state);\n\n return renderButton_unstable(state);\n // Casting is required due to lack of distributive union to support unions on @types/react\n}) as ForwardRefComponent<ToolbarButtonProps>;\n\nToolbarButton.displayName = 'ToolbarButton';\n"],"names":["React","renderButton_unstable","useToolbarButtonStyles_unstable","useToolbarButton_unstable","useCustomStyleHook_unstable","ToolbarButton","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;6BAGO,yBAAyB;8CACf,kCAAkC;kCACxC,qBAAqB;qCACnB,kCAAkC;AAMvE,MAAMK,gBAAAA,WAAAA,GAAyDL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IAC7F,MAAMC,YAAQN,2CAAAA,EAA0BI,OAAOC;QAE/CN,6DAAAA,EAAgCO;QAEhCL,gDAAAA,EAA4B,mCAAmCK;IAE/D,WAAOR,kCAAAA,EAAsBQ;AAC7B,0FAA0F;AAC5F,GAA8C;AAE9CJ,cAAcK,WAAW,GAAG"}

View File

@@ -0,0 +1,4 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/ToolbarButton/ToolbarButton.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, DistributiveOmit } from '@fluentui/react-utilities';\nimport { ButtonProps, ButtonSlots, ButtonState } from '@fluentui/react-button';\n\n/**\n * ToolbarButton Props\n */\nexport type ToolbarButtonProps = ComponentProps<ButtonSlots> &\n Partial<Pick<ButtonProps, 'disabled' | 'disabledFocusable'>> & {\n appearance?: 'primary' | 'subtle' | 'transparent';\n } & {\n vertical?: boolean;\n };\n\nexport type ToolbarButtonBaseProps = DistributiveOmit<ToolbarButtonProps, 'appearance'>;\n\n/**\n * State used in rendering ToolbarButton\n */\nexport type ToolbarButtonState = ComponentState<Partial<ButtonSlots>> &\n ButtonState &\n Required<Pick<ToolbarButtonProps, 'vertical'>>;\n\nexport type ToolbarButtonBaseState = DistributiveOmit<ToolbarButtonState, 'appearance' | 'size' | 'shape'>;\n"],"names":[],"mappings":""}

View File

@@ -0,0 +1,27 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
ToolbarButton: function() {
return _ToolbarButton.ToolbarButton;
},
useToolbarButtonBase_unstable: function() {
return _useToolbarButton.useToolbarButtonBase_unstable;
},
useToolbarButtonStyles_unstable: function() {
return _useToolbarButtonStylesstyles.useToolbarButtonStyles_unstable;
},
useToolbarButton_unstable: function() {
return _useToolbarButton.useToolbarButton_unstable;
}
});
const _ToolbarButton = require("./ToolbarButton");
const _useToolbarButton = require("./useToolbarButton");
const _useToolbarButtonStylesstyles = require("./useToolbarButtonStyles.styles");

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/ToolbarButton/index.ts"],"sourcesContent":["export { ToolbarButton } from './ToolbarButton';\nexport type {\n ToolbarButtonBaseProps,\n ToolbarButtonProps,\n ToolbarButtonBaseState,\n ToolbarButtonState,\n} from './ToolbarButton.types';\nexport { useToolbarButton_unstable, useToolbarButtonBase_unstable } from './useToolbarButton';\nexport { useToolbarButtonStyles_unstable } from './useToolbarButtonStyles.styles';\n"],"names":["ToolbarButton","useToolbarButton_unstable","useToolbarButtonBase_unstable","useToolbarButtonStyles_unstable"],"mappings":";;;;;;;;;;;;eAASA,4BAAa;;;eAOcE,+CAA6B;;;eACxDC,6DAA+B;;;eAD/BF,2CAAyB;;;+BAPJ,kBAAkB;kCAOyB,qBAAqB;8CAC9C,kCAAkC"}

View File

@@ -0,0 +1,43 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
useToolbarButtonBase_unstable: function() {
return useToolbarButtonBase_unstable;
},
useToolbarButton_unstable: function() {
return useToolbarButton_unstable;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _reactbutton = require("@fluentui/react-button");
const useToolbarButton_unstable = (props, ref)=>{
const state = useToolbarButtonBase_unstable(props, ref);
return {
appearance: 'subtle',
size: 'medium',
shape: 'rounded',
...state
};
};
const useToolbarButtonBase_unstable = (props, ref)=>{
const { vertical = false, ...buttonProps } = props;
const state = (0, _reactbutton.useButton_unstable)({
appearance: 'subtle',
...buttonProps,
size: 'medium'
}, ref);
return {
vertical,
...state
};
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/ToolbarButton/useToolbarButton.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useButton_unstable } from '@fluentui/react-button';\nimport type {\n ToolbarButtonBaseProps,\n ToolbarButtonBaseState,\n ToolbarButtonProps,\n ToolbarButtonState,\n} from './ToolbarButton.types';\n\n/**\n * Given user props, defines default props for the Button, calls useButtonState and useChecked, and returns\n * processed state.\n * @param props - User provided props to the Button component.\n * @param ref - User provided ref to be passed to the Button component.\n */\nexport const useToolbarButton_unstable = (\n props: ToolbarButtonProps,\n ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): ToolbarButtonState => {\n const state = useToolbarButtonBase_unstable(props, ref);\n\n return {\n appearance: 'subtle',\n size: 'medium',\n shape: 'rounded',\n ...state,\n };\n};\n\n/**\n * Base hook that builds Toolbar Button state for behavior and structure only.\n * It does not provide any design-related defaults.\n *\n * @internal\n * @param props - User provided props to the Button component.\n * @param ref - User provided ref to be passed to the Button component.\n */\nexport const useToolbarButtonBase_unstable = (\n props: ToolbarButtonBaseProps,\n ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): ToolbarButtonBaseState => {\n const { vertical = false, ...buttonProps } = props;\n const state = useButton_unstable(\n {\n appearance: 'subtle',\n ...buttonProps,\n size: 'medium',\n },\n ref,\n );\n\n return {\n vertical,\n ...state,\n };\n};\n"],"names":["React","useButton_unstable","useToolbarButton_unstable","props","ref","state","useToolbarButtonBase_unstable","appearance","size","shape","vertical","buttonProps"],"mappings":"AAAA;;;;;;;;;;;;iCAuCaM;eAAAA;;6BAtBAJ;;;;;iEAfU,QAAQ;6BACI,yBAAyB;AAcrD,MAAMA,4BAA4B,CACvCC,OACAC;IAEA,MAAMC,QAAQC,8BAA8BH,OAAOC;IAEnD,OAAO;QACLG,YAAY;QACZC,MAAM;QACNC,OAAO;QACP,GAAGJ,KAAK;IACV;AACF,EAAE;AAUK,sCAAsC,CAC3CF,OACAC;IAEA,MAAM,EAAEM,WAAW,KAAK,EAAE,GAAGC,aAAa,GAAGR;IAC7C,MAAME,YAAQJ,+BAAAA,EACZ;QACEM,YAAY;QACZ,GAAGI,WAAW;QACdH,MAAM;IACR,GACAJ;IAGF,OAAO;QACLM;QACA,GAAGL,KAAK;IACV;AACF,EAAE"}

View File

@@ -0,0 +1,46 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "useToolbarButtonStyles_unstable", {
enumerable: true,
get: function() {
return useToolbarButtonStyles_unstable;
}
});
const _react = require("@griffel/react");
const _reactbutton = require("@fluentui/react-button");
const useBaseStyles = /*#__PURE__*/ (0, _react.__styles)({
vertical: {
Beiy3e4: "f1vx9l62"
},
verticalIcon: {
Be2twd7: "f1rt2boy",
jrapky: 0,
Frg6f3: 0,
t21cq0: 0,
B6of3ja: 0,
B74szlk: "f1s184ao"
}
}, {
d: [
".f1vx9l62{flex-direction:column;}",
".f1rt2boy{font-size:24px;}",
[
".f1s184ao{margin:0;}",
{
p: -1
}
]
]
});
const useToolbarButtonStyles_unstable = (state)=>{
'use no memo';
const buttonStyles = useBaseStyles();
state.root.className = (0, _react.mergeClasses)(state.vertical && buttonStyles.vertical, state.root.className);
if (state.icon) {
state.icon.className = (0, _react.mergeClasses)(state.vertical && buttonStyles.verticalIcon, state.icon.className);
}
(0, _reactbutton.useButtonStyles_unstable)(state);
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["useToolbarButtonStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { useButtonStyles_unstable } from '@fluentui/react-button';\nconst useBaseStyles = makeStyles({\n vertical: {\n flexDirection: 'column'\n },\n verticalIcon: {\n fontSize: '24px',\n margin: '0'\n }\n});\n/**\n * Apply styling to the ToolbarButton slots based on the state\n */ export const useToolbarButtonStyles_unstable = (state)=>{\n 'use no memo';\n const buttonStyles = useBaseStyles();\n state.root.className = mergeClasses(state.vertical && buttonStyles.vertical, state.root.className);\n if (state.icon) {\n state.icon.className = mergeClasses(state.vertical && buttonStyles.verticalIcon, state.icon.className);\n }\n useButtonStyles_unstable(state);\n};\n"],"names":["__styles","mergeClasses","useButtonStyles_unstable","useBaseStyles","vertical","Beiy3e4","verticalIcon","Be2twd7","jrapky","Frg6f3","t21cq0","B6of3ja","B74szlk","d","p","useToolbarButtonStyles_unstable","state","buttonStyles","root","className","icon"],"mappings":"AAAA,YAAY;;;;;+BAcKe,+BAA+B;;;;;;uBAbP,gBAAgB;6BAChB,wBAAwB;AACjE,MAAMZ,aAAa,GAAA,WAAA,OAAGH,eAAA,EAAA;IAAAI,QAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAC,YAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAC,CAAA,EAAA,CAAA;YAAA;SAAA;KAAA;AAAA,CAQrB,CAAC;AAGS,yCAAyCE,KAAK,IAAG;IACxD,aAAa;IACb,MAAMC,YAAY,GAAGd,aAAa,CAAC,CAAC;IACpCa,KAAK,CAACE,IAAI,CAACC,SAAS,OAAGlB,mBAAY,EAACe,KAAK,CAACZ,QAAQ,IAAIa,YAAY,CAACb,QAAQ,EAAEY,KAAK,CAACE,IAAI,CAACC,SAAS,CAAC;IAClG,IAAIH,KAAK,CAACI,IAAI,EAAE;QACZJ,KAAK,CAACI,IAAI,CAACD,SAAS,OAAGlB,mBAAY,EAACe,KAAK,CAACZ,QAAQ,IAAIa,YAAY,CAACX,YAAY,EAAEU,KAAK,CAACI,IAAI,CAACD,SAAS,CAAC;IAC1G;QACAjB,qCAAwB,EAACc,KAAK,CAAC;AACnC,CAAC"}

View File

@@ -0,0 +1,31 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "useToolbarButtonStyles_unstable", {
enumerable: true,
get: function() {
return useToolbarButtonStyles_unstable;
}
});
const _react = require("@griffel/react");
const _reactbutton = require("@fluentui/react-button");
const useBaseStyles = (0, _react.makeStyles)({
vertical: {
flexDirection: 'column'
},
verticalIcon: {
fontSize: '24px',
margin: '0'
}
});
const useToolbarButtonStyles_unstable = (state)=>{
'use no memo';
const buttonStyles = useBaseStyles();
state.root.className = (0, _react.mergeClasses)(state.vertical && buttonStyles.vertical, state.root.className);
if (state.icon) {
state.icon.className = (0, _react.mergeClasses)(state.vertical && buttonStyles.verticalIcon, state.icon.className);
}
(0, _reactbutton.useButtonStyles_unstable)(state);
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/ToolbarButton/useToolbarButtonStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { useButtonStyles_unstable } from '@fluentui/react-button';\nimport { ToolbarButtonState } from './ToolbarButton.types';\n\nconst useBaseStyles = makeStyles({\n vertical: {\n flexDirection: 'column',\n },\n verticalIcon: {\n fontSize: '24px',\n margin: '0',\n },\n});\n\n/**\n * Apply styling to the ToolbarButton slots based on the state\n */\nexport const useToolbarButtonStyles_unstable = (state: ToolbarButtonState): void => {\n 'use no memo';\n\n const buttonStyles = useBaseStyles();\n\n state.root.className = mergeClasses(state.vertical && buttonStyles.vertical, state.root.className);\n\n if (state.icon) {\n state.icon.className = mergeClasses(state.vertical && buttonStyles.verticalIcon, state.icon.className);\n }\n\n useButtonStyles_unstable(state);\n};\n"],"names":["makeStyles","mergeClasses","useButtonStyles_unstable","useBaseStyles","vertical","flexDirection","verticalIcon","fontSize","margin","useToolbarButtonStyles_unstable","state","buttonStyles","root","className","icon"],"mappings":"AAAA;;;;;;;;;;;uBAEyC,iBAAiB;6BACjB,yBAAyB;AAGlE,MAAMG,oBAAgBH,iBAAAA,EAAW;IAC/BI,UAAU;QACRC,eAAe;IACjB;IACAC,cAAc;QACZC,UAAU;QACVC,QAAQ;IACV;AACF;AAKO,MAAMC,kCAAkC,CAACC;IAC9C;IAEA,MAAMC,eAAeR;IAErBO,MAAME,IAAI,CAACC,SAAS,OAAGZ,mBAAAA,EAAaS,MAAMN,QAAQ,IAAIO,aAAaP,QAAQ,EAAEM,MAAME,IAAI,CAACC,SAAS;IAEjG,IAAIH,MAAMI,IAAI,EAAE;QACdJ,MAAMI,IAAI,CAACD,SAAS,OAAGZ,mBAAAA,EAAaS,MAAMN,QAAQ,IAAIO,aAAaL,YAAY,EAAEI,MAAMI,IAAI,CAACD,SAAS;IACvG;QAEAX,qCAAAA,EAAyBQ;AAC3B,EAAE"}

View File

@@ -0,0 +1,24 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "ToolbarDivider", {
enumerable: true,
get: function() {
return ToolbarDivider;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _useToolbarDividerStylesstyles = require("./useToolbarDividerStyles.styles");
const _reactdivider = require("@fluentui/react-divider");
const _useToolbarDivider = require("./useToolbarDivider");
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
const ToolbarDivider = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
const state = (0, _useToolbarDivider.useToolbarDivider_unstable)(props, ref);
(0, _useToolbarDividerStylesstyles.useToolbarDividerStyles_unstable)(state);
(0, _reactsharedcontexts.useCustomStyleHook_unstable)('useToolbarDividerStyles_unstable')(state);
return (0, _reactdivider.renderDivider_unstable)(state);
});
ToolbarDivider.displayName = 'ToolbarDivider';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/ToolbarDivider/ToolbarDivider.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useToolbarDividerStyles_unstable } from './useToolbarDividerStyles.styles';\nimport type { ToolbarDividerProps } from './ToolbarDivider.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { renderDivider_unstable } from '@fluentui/react-divider';\nimport { useToolbarDivider_unstable } from './useToolbarDivider';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * ToolbarDivider component\n */\nexport const ToolbarDivider: ForwardRefComponent<ToolbarDividerProps> = React.forwardRef((props, ref) => {\n const state = useToolbarDivider_unstable(props, ref);\n\n useToolbarDividerStyles_unstable(state);\n\n useCustomStyleHook_unstable('useToolbarDividerStyles_unstable')(state);\n\n return renderDivider_unstable(state);\n});\n\nToolbarDivider.displayName = 'ToolbarDivider';\n"],"names":["React","useToolbarDividerStyles_unstable","renderDivider_unstable","useToolbarDivider_unstable","useCustomStyleHook_unstable","ToolbarDivider","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;+CACkB,mCAAmC;8BAG7C,0BAA0B;mCACtB,sBAAsB;qCACrB,kCAAkC;AAKvE,MAAMK,iBAAAA,WAAAA,GAA2DL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IAC/F,MAAMC,YAAQN,6CAAAA,EAA2BI,OAAOC;QAEhDP,+DAAAA,EAAiCQ;QAEjCL,gDAAAA,EAA4B,oCAAoCK;IAEhE,WAAOP,oCAAAA,EAAuBO;AAChC,GAAG;AAEHJ,eAAeK,WAAW,GAAG"}

View File

@@ -0,0 +1,4 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/ToolbarDivider/ToolbarDivider.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState } from '@fluentui/react-utilities';\nimport type { DividerSlots, DividerState } from '@fluentui/react-divider';\n\n/**\n * ToolbarDivider Props\n */\nexport type ToolbarDividerProps = ComponentProps<Partial<DividerSlots>> & {\n /**\n * A divider can be horizontal or vertical (default).\n *\n * @default true\n */\n vertical?: boolean;\n};\n\nexport type ToolbarDividerBaseProps = ToolbarDividerProps;\n\n/**\n * State used in rendering ToolbarDivider\n */\nexport type ToolbarDividerState = ComponentState<Partial<DividerSlots>> & DividerState;\n\nexport type ToolbarDividerBaseState = Omit<ToolbarDividerState, 'appearance'>;\n"],"names":[],"mappings":""}

View File

@@ -0,0 +1,27 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
ToolbarDivider: function() {
return _ToolbarDivider.ToolbarDivider;
},
useToolbarDividerBase_unstable: function() {
return _useToolbarDivider.useToolbarDividerBase_unstable;
},
useToolbarDividerStyles_unstable: function() {
return _useToolbarDividerStylesstyles.useToolbarDividerStyles_unstable;
},
useToolbarDivider_unstable: function() {
return _useToolbarDivider.useToolbarDivider_unstable;
}
});
const _ToolbarDivider = require("./ToolbarDivider");
const _useToolbarDividerStylesstyles = require("./useToolbarDividerStyles.styles");
const _useToolbarDivider = require("./useToolbarDivider");

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/ToolbarDivider/index.ts"],"sourcesContent":["export { ToolbarDivider } from './ToolbarDivider';\nexport type {\n ToolbarDividerBaseProps,\n ToolbarDividerProps,\n ToolbarDividerBaseState,\n ToolbarDividerState,\n} from './ToolbarDivider.types';\nexport { useToolbarDividerStyles_unstable } from './useToolbarDividerStyles.styles';\nexport { useToolbarDivider_unstable, useToolbarDividerBase_unstable } from './useToolbarDivider';\n"],"names":["ToolbarDivider","useToolbarDividerStyles_unstable","useToolbarDivider_unstable","useToolbarDividerBase_unstable"],"mappings":";;;;;;;;;;;;eAASA,8BAAc;;;eAQcG,iDAA8B;;;eAD1DF,+DAAgC;;;eAChCC,6CAA0B;;;gCARJ,mBAAmB;+CAOD,mCAAmC;mCACT,sBAAsB"}

View File

@@ -0,0 +1,37 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
useToolbarDividerBase_unstable: function() {
return useToolbarDividerBase_unstable;
},
useToolbarDivider_unstable: function() {
return useToolbarDivider_unstable;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _reactdivider = require("@fluentui/react-divider");
const _ToolbarContext = require("../Toolbar/ToolbarContext");
const useToolbarDivider_unstable = (props, ref)=>{
const state = useToolbarDividerBase_unstable(props, ref);
return {
...state,
appearance: 'default'
};
};
const useToolbarDividerBase_unstable = (props, ref)=>{
const vertical = (0, _ToolbarContext.useToolbarContext_unstable)((ctx)=>ctx.vertical);
return (0, _reactdivider.useDivider_unstable)({
vertical: !vertical,
...props
}, ref);
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/ToolbarDivider/useToolbarDivider.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type {\n ToolbarDividerBaseProps,\n ToolbarDividerBaseState,\n ToolbarDividerProps,\n ToolbarDividerState,\n} from './ToolbarDivider.types';\nimport { useDivider_unstable } from '@fluentui/react-divider';\nimport { useToolbarContext_unstable } from '../Toolbar/ToolbarContext';\n\n/**\n * Create the state required to render ToolbarDivider.\n *\n * The returned state can be modified with hooks such as useToolbarDividerStyles_unstable,\n * before being passed to renderToolbar_unstable.\n *\n * @param props - props from this instance of ToolbarDivider\n * @param ref - reference to root HTMLElement of ToolbarDivider\n */\nexport const useToolbarDivider_unstable = (\n props: ToolbarDividerProps,\n ref: React.Ref<HTMLElement>,\n): ToolbarDividerState => {\n const state = useToolbarDividerBase_unstable(props, ref);\n return {\n ...state,\n appearance: 'default',\n };\n};\n\n/**\n * Base hook that builds ToolbarDivider state for behavior and structure only.\n * It does not provide any design-related defaults.\n *\n * @internal\n * @param props - props from this instance of ToolbarDivider\n * @param ref - reference to root HTMLElement of ToolbarDivider\n */\nexport const useToolbarDividerBase_unstable = (\n props: ToolbarDividerBaseProps,\n ref: React.Ref<HTMLElement>,\n): ToolbarDividerBaseState => {\n const vertical = useToolbarContext_unstable(ctx => ctx.vertical);\n return useDivider_unstable({ vertical: !vertical, ...props }, ref);\n};\n"],"names":["React","useDivider_unstable","useToolbarContext_unstable","useToolbarDivider_unstable","props","ref","state","useToolbarDividerBase_unstable","appearance","vertical","ctx"],"mappings":"AAAA;;;;;;;;;;;;kCAwCaO;;;8BAnBAJ;;;;;iEAnBU,QAAQ;8BAOK,0BAA0B;gCACnB,4BAA4B;AAWhE,MAAMA,6BAA6B,CACxCC,OACAC;IAEA,MAAMC,QAAQC,+BAA+BH,OAAOC;IACpD,OAAO;QACL,GAAGC,KAAK;QACRE,YAAY;IACd;AACF,EAAE;AAUK,MAAMD,iCAAiC,CAC5CH,OACAC;IAEA,MAAMI,eAAWP,0CAAAA,EAA2BQ,CAAAA,MAAOA,IAAID,QAAQ;IAC/D,WAAOR,iCAAAA,EAAoB;QAAEQ,UAAU,CAACA;QAAU,GAAGL,KAAK;IAAC,GAAGC;AAChE,EAAE"}

View File

@@ -0,0 +1,47 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "useToolbarDividerStyles_unstable", {
enumerable: true,
get: function() {
return useToolbarDividerStyles_unstable;
}
});
const _react = require("@griffel/react");
const _reactdivider = require("@fluentui/react-divider");
const useBaseStyles = /*#__PURE__*/ (0, _react.__styles)({
root: {
mc9l5x: "ftuwxu6",
B2u0y6b: "f1lwjmbk",
Byoj8tv: 0,
uwmqm3: 0,
z189sj: 0,
z8tnut: 0,
B0ocmuz: "f1oic3e7"
},
vertical: {
B2u0y6b: "fe668z"
}
}, {
d: [
".ftuwxu6{display:inline-flex;}",
".f1lwjmbk{max-width:1px;}",
[
".f1oic3e7{padding:0 12px;}",
{
p: -1
}
],
".fe668z{max-width:initial;}"
]
});
const useToolbarDividerStyles_unstable = (state)=>{
'use no memo';
(0, _reactdivider.useDividerStyles_unstable)(state);
const { vertical } = state;
const toolbarDividerStyles = useBaseStyles();
state.root.className = (0, _react.mergeClasses)(toolbarDividerStyles.root, !vertical && toolbarDividerStyles.vertical, state.root.className);
return state;
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["useToolbarDividerStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { useDividerStyles_unstable } from '@fluentui/react-divider';\nconst useBaseStyles = makeStyles({\n // Base styles\n root: {\n display: 'inline-flex',\n maxWidth: '1px',\n padding: '0 12px'\n },\n vertical: {\n maxWidth: 'initial'\n }\n});\n/**\n * Apply styling to the ToolbarDivider slots based on the state\n */ export const useToolbarDividerStyles_unstable = (state)=>{\n 'use no memo';\n useDividerStyles_unstable(state);\n const { vertical } = state;\n const toolbarDividerStyles = useBaseStyles();\n state.root.className = mergeClasses(toolbarDividerStyles.root, !vertical && toolbarDividerStyles.vertical, state.root.className);\n return state;\n};\n"],"names":["__styles","mergeClasses","useDividerStyles_unstable","useBaseStyles","root","mc9l5x","B2u0y6b","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","vertical","d","p","useToolbarDividerStyles_unstable","state","toolbarDividerStyles","className"],"mappings":"AAAA,YAAY;;;;;+BAgBKe,gCAAgC;;;;;;uBAfR,gBAAgB;8BACf,yBAAyB;AACnE,MAAMZ,aAAa,GAAA,WAAA,OAAGH,eAAA,EAAA;IAAAI,IAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAC,QAAA,EAAA;QAAAN,OAAA,EAAA;IAAA;AAAA,GAAA;IAAAO,CAAA,EAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAC,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;KAAA;AAAA,CAUrB,CAAC;AAGS,0CAA0CE,KAAK,IAAG;IACzD,aAAa;QACbd,uCAAyB,EAACc,KAAK,CAAC;IAChC,MAAM,EAAEJ,QAAAA,EAAU,GAAGI,KAAK;IAC1B,MAAMC,oBAAoB,GAAGd,aAAa,CAAC,CAAC;IAC5Ca,KAAK,CAACZ,IAAI,CAACc,SAAS,OAAGjB,mBAAY,EAACgB,oBAAoB,CAACb,IAAI,EAAE,CAACQ,QAAQ,IAAIK,oBAAoB,CAACL,QAAQ,EAAEI,KAAK,CAACZ,IAAI,CAACc,SAAS,CAAC;IAChI,OAAOF,KAAK;AAChB,CAAC"}

View File

@@ -0,0 +1,32 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "useToolbarDividerStyles_unstable", {
enumerable: true,
get: function() {
return useToolbarDividerStyles_unstable;
}
});
const _react = require("@griffel/react");
const _reactdivider = require("@fluentui/react-divider");
const useBaseStyles = (0, _react.makeStyles)({
// Base styles
root: {
display: 'inline-flex',
maxWidth: '1px',
padding: '0 12px'
},
vertical: {
maxWidth: 'initial'
}
});
const useToolbarDividerStyles_unstable = (state)=>{
'use no memo';
(0, _reactdivider.useDividerStyles_unstable)(state);
const { vertical } = state;
const toolbarDividerStyles = useBaseStyles();
state.root.className = (0, _react.mergeClasses)(toolbarDividerStyles.root, !vertical && toolbarDividerStyles.vertical, state.root.className);
return state;
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/ToolbarDivider/useToolbarDividerStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { useDividerStyles_unstable } from '@fluentui/react-divider';\nimport type { ToolbarDividerState } from './ToolbarDivider.types';\n\nconst useBaseStyles = makeStyles({\n // Base styles\n root: {\n display: 'inline-flex',\n maxWidth: '1px',\n padding: '0 12px',\n },\n vertical: {\n maxWidth: 'initial',\n },\n});\n\n/**\n * Apply styling to the ToolbarDivider slots based on the state\n */\nexport const useToolbarDividerStyles_unstable = (state: ToolbarDividerState): ToolbarDividerState => {\n 'use no memo';\n\n useDividerStyles_unstable(state);\n const { vertical } = state;\n const toolbarDividerStyles = useBaseStyles();\n state.root.className = mergeClasses(\n toolbarDividerStyles.root,\n !vertical && toolbarDividerStyles.vertical,\n state.root.className,\n );\n return state;\n};\n"],"names":["makeStyles","mergeClasses","useDividerStyles_unstable","useBaseStyles","root","display","maxWidth","padding","vertical","useToolbarDividerStyles_unstable","state","toolbarDividerStyles","className"],"mappings":"AAAA;;;;;+BAqBaS;;;;;;uBAnB4B,iBAAiB;8BAChB,0BAA0B;AAGpE,MAAMN,oBAAgBH,iBAAAA,EAAW;IAC/B,cAAc;IACdI,MAAM;QACJC,SAAS;QACTC,UAAU;QACVC,SAAS;IACX;IACAC,UAAU;QACRF,UAAU;IACZ;AACF;AAKO,yCAAyC,CAACI;IAC/C;QAEAR,uCAAAA,EAA0BQ;IAC1B,MAAM,EAAEF,QAAQ,EAAE,GAAGE;IACrB,MAAMC,uBAAuBR;IAC7BO,MAAMN,IAAI,CAACQ,SAAS,OAAGX,mBAAAA,EACrBU,qBAAqBP,IAAI,EACzB,CAACI,YAAYG,qBAAqBH,QAAQ,EAC1CE,MAAMN,IAAI,CAACQ,SAAS;IAEtB,OAAOF;AACT,EAAE"}

View File

@@ -0,0 +1,25 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "ToolbarGroup", {
enumerable: true,
get: function() {
return ToolbarGroup;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _useToolbarGroup = require("./useToolbarGroup");
const _useToolbarGroupStylesstyles = require("./useToolbarGroupStyles.styles");
const _renderToolbarGroup = require("./renderToolbarGroup");
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
const ToolbarGroup = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
const state = (0, _useToolbarGroup.useToolbarGroup_unstable)(props, ref);
(0, _useToolbarGroupStylesstyles.useToolbarGroupStyles_unstable)(state);
(0, _reactsharedcontexts.useCustomStyleHook_unstable)('useToolbarGroupStyles_unstable')(state);
return (0, _renderToolbarGroup.renderToolbarGroup_unstable)(state);
// Casting is required due to lack of distributive union to support unions on @types/react
});
ToolbarGroup.displayName = 'ToolbarGroup';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/ToolbarGroup/ToolbarGroup.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ToolbarGroupProps } from './ToolbarGroup.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useToolbarGroup_unstable } from './useToolbarGroup';\nimport { useToolbarGroupStyles_unstable } from './useToolbarGroupStyles.styles';\nimport { renderToolbarGroup_unstable } from './renderToolbarGroup';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * ToolbarGroup component is a Button to be used inside Toolbar\n * which will respect toolbar props such as `size`\n */\nexport const ToolbarGroup: ForwardRefComponent<ToolbarGroupProps> = React.forwardRef((props, ref) => {\n const state = useToolbarGroup_unstable(props, ref);\n\n useToolbarGroupStyles_unstable(state);\n\n useCustomStyleHook_unstable('useToolbarGroupStyles_unstable')(state);\n\n return renderToolbarGroup_unstable(state);\n // Casting is required due to lack of distributive union to support unions on @types/react\n}) as ForwardRefComponent<ToolbarGroupProps>;\n\nToolbarGroup.displayName = 'ToolbarGroup';\n"],"names":["React","useToolbarGroup_unstable","useToolbarGroupStyles_unstable","renderToolbarGroup_unstable","useCustomStyleHook_unstable","ToolbarGroup","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;iCAGU,oBAAoB;6CACd,iCAAiC;oCACpC,uBAAuB;qCACvB,kCAAkC;AAMvE,MAAMK,eAAAA,WAAAA,GAAuDL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IAC3F,MAAMC,YAAQR,yCAAAA,EAAyBM,OAAOC;QAE9CN,2DAAAA,EAA+BO;QAE/BL,gDAAAA,EAA4B,kCAAkCK;IAE9D,WAAON,+CAAAA,EAA4BM;AACnC,0FAA0F;AAC5F,GAA6C;AAE7CJ,aAAaK,WAAW,GAAG"}

View File

@@ -0,0 +1,6 @@
/**
* State used in rendering ToolbarButton
*/ "use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/ToolbarGroup/ToolbarGroup.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type ToolbarGroupSlots = {\n root: Slot<'div'>;\n};\n\n/**\n * ToolbarButton Props\n */\nexport type ToolbarGroupProps = ComponentProps<ToolbarGroupSlots>;\n\n/**\n * State used in rendering ToolbarButton\n */\nexport type ToolbarGroupState = ComponentState<ToolbarGroupSlots> & {\n vertical?: boolean;\n};\n"],"names":[],"mappings":"AAWA;;CAEC,GACD,WAEE"}

View File

@@ -0,0 +1,34 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
ToolbarGroup: function() {
return _ToolbarGroup.ToolbarGroup;
},
renderToolbarGroup_unstable: function() {
return _renderToolbarGroup.renderToolbarGroup_unstable;
},
toolbarGroupClassNames: function() {
return _useToolbarGroupStylesstyles.toolbarGroupClassNames;
},
useToolbarGroupBase_unstable: function() {
return _useToolbarGroup.useToolbarGroupBase_unstable;
},
useToolbarGroupStyles_unstable: function() {
return _useToolbarGroupStylesstyles.useToolbarGroupStyles_unstable;
},
useToolbarGroup_unstable: function() {
return _useToolbarGroup.useToolbarGroup_unstable;
}
});
const _ToolbarGroup = require("./ToolbarGroup");
const _useToolbarGroup = require("./useToolbarGroup");
const _useToolbarGroupStylesstyles = require("./useToolbarGroupStyles.styles");
const _renderToolbarGroup = require("./renderToolbarGroup");

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/ToolbarGroup/index.ts"],"sourcesContent":["export { ToolbarGroup } from './ToolbarGroup';\nexport type { ToolbarGroupProps, ToolbarGroupSlots, ToolbarGroupState } from './ToolbarGroup.types';\nexport { useToolbarGroup_unstable, useToolbarGroupBase_unstable } from './useToolbarGroup';\nexport { toolbarGroupClassNames, useToolbarGroupStyles_unstable } from './useToolbarGroupStyles.styles';\nexport { renderToolbarGroup_unstable } from './renderToolbarGroup';\n"],"names":["ToolbarGroup","useToolbarGroup_unstable","useToolbarGroupBase_unstable","toolbarGroupClassNames","useToolbarGroupStyles_unstable","renderToolbarGroup_unstable"],"mappings":";;;;;;;;;;;;eAASA,0BAAY;;;eAIZK,+CAA2B;;;eAD3BF,mDAAsB;;;eADID,6CAA4B;;;eAC9BE,2DAA8B;;;eADtDH,yCAAwB;;;8BAFJ,iBAAiB;iCAEyB,oBAAoB;6CACpB,iCAAiC;oCAC5D,uBAAuB"}

View File

@@ -0,0 +1,18 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "renderToolbarGroup_unstable", {
enumerable: true,
get: function() {
return renderToolbarGroup_unstable;
}
});
const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
const _reactutilities = require("@fluentui/react-utilities");
const renderToolbarGroup_unstable = (state)=>{
(0, _reactutilities.assertSlots)(state);
return /*#__PURE__*/ (0, _jsxruntime.jsx)(state.root, {
children: state.root.children
});
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/ToolbarGroup/renderToolbarGroup.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { ToolbarGroupState, ToolbarGroupSlots } from './ToolbarGroup.types';\n\n/**\n * Render the final JSX of ToolbarGroup\n */\nexport const renderToolbarGroup_unstable = (state: ToolbarGroupState): JSXElement => {\n assertSlots<ToolbarGroupSlots>(state);\n\n return <state.root>{state.root.children}</state.root>;\n};\n"],"names":["assertSlots","renderToolbarGroup_unstable","state","root","children"],"mappings":";;;;;;;;;;4BACA,gDAAiD;gCACrB,4BAA4B;AAOjD,MAAMC,8BAA8B,CAACC;QAC1CF,2BAAAA,EAA+BE;IAE/B,OAAA,WAAA,OAAO,eAAA,EAACA,MAAMC,IAAI,EAAA;kBAAED,MAAMC,IAAI,CAACC,QAAQ;;AACzC,EAAE"}

View File

@@ -0,0 +1,42 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
useToolbarGroupBase_unstable: function() {
return useToolbarGroupBase_unstable;
},
useToolbarGroup_unstable: function() {
return useToolbarGroup_unstable;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _reactutilities = require("@fluentui/react-utilities");
const _ToolbarContext = require("../Toolbar/ToolbarContext");
const useToolbarGroup_unstable = (props, ref)=>{
return useToolbarGroupBase_unstable(props, ref);
};
const useToolbarGroupBase_unstable = (props, ref)=>{
const vertical = (0, _ToolbarContext.useToolbarContext_unstable)((ctx)=>ctx.vertical);
return {
components: {
root: 'div'
},
root: _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)('div', {
ref,
role: 'presentation',
...props
}), {
elementType: 'div'
}),
vertical
};
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/ToolbarGroup/useToolbarGroup.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nimport type { ToolbarGroupProps, ToolbarGroupState } from './ToolbarGroup.types';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport { useToolbarContext_unstable } from '../Toolbar/ToolbarContext';\n\n/**\n * Given user props, defines default props for the Group\n * @param props - User provided props to the Group component.\n * @param ref - User provided ref to be passed to the Group component.\n */\nexport const useToolbarGroup_unstable = (\n props: ToolbarGroupProps,\n ref: React.Ref<HTMLDivElement>,\n): ToolbarGroupState => {\n return useToolbarGroupBase_unstable(props, ref);\n};\n\n/**\n * Base hook that builds Toolbar Group state for behavior and structure only.\n * It does not provide any design-related defaults.\n *\n * @internal\n * @param props - User provided props to the Group component.\n * @param ref - User provided ref to be passed to the Group component.\n */\nexport const useToolbarGroupBase_unstable = (\n props: ToolbarGroupProps,\n ref: React.Ref<HTMLDivElement>,\n): ToolbarGroupState => {\n const vertical = useToolbarContext_unstable(ctx => ctx.vertical);\n\n return {\n components: {\n root: 'div',\n },\n root: slot.always(\n getIntrinsicElementProps<React.HTMLAttributes<HTMLDivElement>>('div', {\n ref,\n role: 'presentation',\n ...props,\n }),\n { elementType: 'div' },\n ),\n vertical,\n };\n};\n"],"names":["React","getIntrinsicElementProps","slot","useToolbarContext_unstable","useToolbarGroup_unstable","props","ref","useToolbarGroupBase_unstable","vertical","ctx","components","root","always","role","elementType"],"mappings":"AAAA;;;;;;;;;;;;gCA4BaO;eAAAA;;4BAfAH;;;;;iEAXU,QAAQ;gCAGgB,4BAA4B;gCAChC,4BAA4B;AAOhE,MAAMA,2BAA2B,CACtCC,OACAC;IAEA,OAAOC,6BAA6BF,OAAOC;AAC7C,EAAE;AAUK,qCAAqC,CAC1CD,OACAC;IAEA,MAAME,eAAWL,0CAAAA,EAA2BM,CAAAA,MAAOA,IAAID,QAAQ;IAE/D,OAAO;QACLE,YAAY;YACVC,MAAM;QACR;QACAA,MAAMT,oBAAAA,CAAKU,MAAM,KACfX,wCAAAA,EAA+D,OAAO;YACpEK;YACAO,MAAM;YACN,GAAGR,KAAK;QACV,IACA;YAAES,aAAa;QAAM;QAEvBN;IACF;AACF,EAAE"}

View File

@@ -0,0 +1,47 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
toolbarGroupClassNames: function() {
return toolbarGroupClassNames;
},
useToolbarGroupStyles_unstable: function() {
return useToolbarGroupStyles_unstable;
}
});
const _react = require("@griffel/react");
const toolbarGroupClassNames = {
root: 'fui-ToolbarGroup'
};
const useStyles = /*#__PURE__*/ (0, _react.__styles)({
root: {
mc9l5x: "f22iagw",
Bt984gj: "f122n59"
},
vertical: {
Beiy3e4: "f1vx9l62",
a9b677: "f1acs6jw"
}
}, {
d: [
".f22iagw{display:flex;}",
".f122n59{align-items:center;}",
".f1vx9l62{flex-direction:column;}",
".f1acs6jw{width:fit-content;}"
]
});
const useToolbarGroupStyles_unstable = (state)=>{
'use no memo';
const { vertical } = state;
const styles = useStyles();
state.root.className = (0, _react.mergeClasses)(toolbarGroupClassNames.root, styles.root, vertical && styles.vertical, state.root.className);
return state;
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["useToolbarGroupStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nexport const toolbarGroupClassNames = {\n root: 'fui-ToolbarGroup'\n};\nconst useStyles = makeStyles({\n root: {\n display: 'flex',\n alignItems: 'center'\n },\n vertical: {\n flexDirection: 'column',\n width: 'fit-content'\n }\n});\n/**\n * Apply styling to the Toolbar slots based on the state\n */ export const useToolbarGroupStyles_unstable = (state)=>{\n 'use no memo';\n const { vertical } = state;\n const styles = useStyles();\n state.root.className = mergeClasses(toolbarGroupClassNames.root, styles.root, vertical && styles.vertical, state.root.className);\n return state;\n};\n"],"names":["__styles","mergeClasses","toolbarGroupClassNames","root","useStyles","mc9l5x","Bt984gj","vertical","Beiy3e4","a9b677","d","useToolbarGroupStyles_unstable","state","styles","className"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAECE,sBAAsB;;;kCAeY;eAA9BS;;;uBAhBwB,gBAAgB;AAClD,+BAA+B;IAClCR,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,SAAS,GAAA,WAAA,OAAGJ,eAAA,EAAA;IAAAG,IAAA,EAAA;QAAAE,MAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAC,QAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA,CASjB,CAAC;AAGS,wCAAwCE,KAAK,IAAG;IACvD,aAAa;IACb,MAAM,EAAEL,QAAAA,EAAU,GAAGK,KAAK;IAC1B,MAAMC,MAAM,GAAGT,SAAS,CAAC,CAAC;IAC1BQ,KAAK,CAACT,IAAI,CAACW,SAAS,OAAGb,mBAAY,EAACC,sBAAsB,CAACC,IAAI,EAAEU,MAAM,CAACV,IAAI,EAAEI,QAAQ,IAAIM,MAAM,CAACN,QAAQ,EAAEK,KAAK,CAACT,IAAI,CAACW,SAAS,CAAC;IAChI,OAAOF,KAAK;AAChB,CAAC"}

View File

@@ -0,0 +1,40 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
toolbarGroupClassNames: function() {
return toolbarGroupClassNames;
},
useToolbarGroupStyles_unstable: function() {
return useToolbarGroupStyles_unstable;
}
});
const _react = require("@griffel/react");
const toolbarGroupClassNames = {
root: 'fui-ToolbarGroup'
};
const useStyles = (0, _react.makeStyles)({
root: {
display: 'flex',
alignItems: 'center'
},
vertical: {
flexDirection: 'column',
width: 'fit-content'
}
});
const useToolbarGroupStyles_unstable = (state)=>{
'use no memo';
const { vertical } = state;
const styles = useStyles();
state.root.className = (0, _react.mergeClasses)(toolbarGroupClassNames.root, styles.root, vertical && styles.vertical, state.root.className);
return state;
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/ToolbarGroup/useToolbarGroupStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses } from '@griffel/react';\n\nimport type { ToolbarGroupSlots, ToolbarGroupState } from './ToolbarGroup.types';\n\nexport const toolbarGroupClassNames: SlotClassNames<ToolbarGroupSlots> = {\n root: 'fui-ToolbarGroup',\n};\n\nconst useStyles = makeStyles({\n root: {\n display: 'flex',\n alignItems: 'center',\n },\n vertical: {\n flexDirection: 'column',\n width: 'fit-content',\n },\n});\n\n/**\n * Apply styling to the Toolbar slots based on the state\n */\nexport const useToolbarGroupStyles_unstable = (state: ToolbarGroupState): ToolbarGroupState => {\n 'use no memo';\n\n const { vertical } = state;\n const styles = useStyles();\n\n state.root.className = mergeClasses(\n toolbarGroupClassNames.root,\n styles.root,\n vertical && styles.vertical,\n state.root.className,\n );\n\n return state;\n};\n"],"names":["makeStyles","mergeClasses","toolbarGroupClassNames","root","useStyles","display","alignItems","vertical","flexDirection","width","useToolbarGroupStyles_unstable","state","styles","className"],"mappings":"AAAA;;;;;;;;;;;;IAOaE,sBAAAA;;;IAkBAQ,8BAAAA;;;;uBAtB4B,iBAAiB;AAInD,+BAAkE;IACvEP,MAAM;AACR,EAAE;AAEF,MAAMC,gBAAYJ,iBAAAA,EAAW;IAC3BG,MAAM;QACJE,SAAS;QACTC,YAAY;IACd;IACAC,UAAU;QACRC,eAAe;QACfC,OAAO;IACT;AACF;AAKO,uCAAuC,CAACE;IAC7C;IAEA,MAAM,EAAEJ,QAAQ,EAAE,GAAGI;IACrB,MAAMC,SAASR;IAEfO,MAAMR,IAAI,CAACU,SAAS,OAAGZ,mBAAAA,EACrBC,uBAAuBC,IAAI,EAC3BS,OAAOT,IAAI,EACXI,YAAYK,OAAOL,QAAQ,EAC3BI,MAAMR,IAAI,CAACU,SAAS;IAGtB,OAAOF;AACT,EAAE"}

View File

@@ -0,0 +1,24 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "ToolbarRadioButton", {
enumerable: true,
get: function() {
return ToolbarRadioButton;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _reactbutton = require("@fluentui/react-button");
const _useToolbarRadioButton = require("./useToolbarRadioButton");
const _useToolbarRadioButtonStylesstyles = require("./useToolbarRadioButtonStyles.styles");
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
const ToolbarRadioButton = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
const state = (0, _useToolbarRadioButton.useToolbarRadioButton_unstable)(props, ref);
(0, _useToolbarRadioButtonStylesstyles.useToolbarRadioButtonStyles_unstable)(state);
(0, _reactsharedcontexts.useCustomStyleHook_unstable)('useToolbarRadioButtonStyles_unstable')(state);
return (0, _reactbutton.renderToggleButton_unstable)(state);
});
ToolbarRadioButton.displayName = 'ToolbarRadioButton';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/ToolbarRadioButton/ToolbarRadioButton.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ToolbarRadioButtonProps } from './ToolbarRadioButton.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { renderToggleButton_unstable } from '@fluentui/react-button';\nimport { useToolbarRadioButton_unstable } from './useToolbarRadioButton';\nimport { useToolbarRadioButtonStyles_unstable } from './useToolbarRadioButtonStyles.styles';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * ToolbarRadioButton component\n */\nexport const ToolbarRadioButton: ForwardRefComponent<ToolbarRadioButtonProps> = React.forwardRef((props, ref) => {\n const state = useToolbarRadioButton_unstable(props, ref);\n\n useToolbarRadioButtonStyles_unstable(state);\n\n useCustomStyleHook_unstable('useToolbarRadioButtonStyles_unstable')(state);\n\n return renderToggleButton_unstable(state);\n}) as ForwardRefComponent<ToolbarRadioButtonProps>;\n\nToolbarRadioButton.displayName = 'ToolbarRadioButton';\n"],"names":["React","renderToggleButton_unstable","useToolbarRadioButton_unstable","useToolbarRadioButtonStyles_unstable","useCustomStyleHook_unstable","ToolbarRadioButton","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;6BAGa,yBAAyB;uCACtB,0BAA0B;mDACpB,uCAAuC;qCAChD,kCAAkC;AAKvE,MAAMK,qBAAAA,WAAAA,GAAmEL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IACvG,MAAMC,YAAQP,qDAAAA,EAA+BK,OAAOC;QAEpDL,uEAAAA,EAAqCM;QAErCL,gDAAAA,EAA4B,wCAAwCK;IAEpE,WAAOR,wCAAAA,EAA4BQ;AACrC,GAAmD;AAEnDJ,mBAAmBK,WAAW,GAAG"}

View File

@@ -0,0 +1,4 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/ToolbarRadioButton/ToolbarRadioButton.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, DistributiveOmit } from '@fluentui/react-utilities';\nimport type { ToggleButtonProps, ButtonSlots, ToggleButtonState } from '@fluentui/react-button';\n\n/**\n * ToolbarRadioButton Props\n */\nexport type ToolbarRadioButtonProps = ComponentProps<ButtonSlots> &\n Partial<Pick<ToggleButtonProps, 'disabled' | 'disabledFocusable' | 'size'>> & {\n appearance?: 'primary' | 'subtle' | 'transparent';\n name: string;\n value: string;\n };\n\nexport type ToolbarRadioButtonBaseProps = DistributiveOmit<ToolbarRadioButtonProps, 'appearance'>;\n\n/**\n * State used in rendering ToolbarRadioButton\n */\nexport type ToolbarRadioButtonState = ComponentState<Partial<ButtonSlots>> &\n ToggleButtonState &\n Required<Pick<ToggleButtonProps, 'checked'>> &\n Pick<ToolbarRadioButtonProps, 'name' | 'value'>;\n\nexport type ToolbarRadioButtonBaseState = DistributiveOmit<ToolbarRadioButtonState, 'appearance' | 'size'>;\n"],"names":[],"mappings":""}

View File

@@ -0,0 +1,27 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
ToolbarRadioButton: function() {
return _ToolbarRadioButton.ToolbarRadioButton;
},
useToolbarRadioButtonBase_unstable: function() {
return _useToolbarRadioButton.useToolbarRadioButtonBase_unstable;
},
useToolbarRadioButtonStyles_unstable: function() {
return _useToolbarRadioButtonStylesstyles.useToolbarRadioButtonStyles_unstable;
},
useToolbarRadioButton_unstable: function() {
return _useToolbarRadioButton.useToolbarRadioButton_unstable;
}
});
const _ToolbarRadioButton = require("./ToolbarRadioButton");
const _useToolbarRadioButton = require("./useToolbarRadioButton");
const _useToolbarRadioButtonStylesstyles = require("./useToolbarRadioButtonStyles.styles");

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/ToolbarRadioButton/index.ts"],"sourcesContent":["export { ToolbarRadioButton } from './ToolbarRadioButton';\nexport type {\n ToolbarRadioButtonBaseProps,\n ToolbarRadioButtonProps,\n ToolbarRadioButtonBaseState,\n ToolbarRadioButtonState,\n} from './ToolbarRadioButton.types';\nexport { useToolbarRadioButton_unstable, useToolbarRadioButtonBase_unstable } from './useToolbarRadioButton';\nexport { useToolbarRadioButtonStyles_unstable } from './useToolbarRadioButtonStyles.styles';\n"],"names":["ToolbarRadioButton","useToolbarRadioButton_unstable","useToolbarRadioButtonBase_unstable","useToolbarRadioButtonStyles_unstable"],"mappings":";;;;;;;;;;;;eAASA,sCAAkB;;;eAOcE,yDAAkC;;;eAClEC,uEAAoC;;;eADpCF,qDAA8B;;;oCAPJ,uBAAuB;uCAOyB,0BAA0B;mDACxD,uCAAuC"}

View File

@@ -0,0 +1,60 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
useToolbarRadioButtonBase_unstable: function() {
return useToolbarRadioButtonBase_unstable;
},
useToolbarRadioButton_unstable: function() {
return useToolbarRadioButton_unstable;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _reactutilities = require("@fluentui/react-utilities");
const _reactbutton = require("@fluentui/react-button");
const _ToolbarContext = require("../Toolbar/ToolbarContext");
const useToolbarRadioButton_unstable = (props, ref)=>{
const { appearance = 'secondary' } = props;
const size = (0, _ToolbarContext.useToolbarContext_unstable)((ctx)=>ctx.size);
const state = useToolbarRadioButtonBase_unstable(props, ref);
return {
...state,
appearance,
size: props.size || size
};
};
const useToolbarRadioButtonBase_unstable = (props, ref)=>{
const handleRadio = (0, _ToolbarContext.useToolbarContext_unstable)((ctx)=>ctx.handleRadio);
const checked = (0, _ToolbarContext.useToolbarContext_unstable)((ctx)=>{
var _ctx_checkedValues_props_name;
return !!((_ctx_checkedValues_props_name = ctx.checkedValues[props.name]) === null || _ctx_checkedValues_props_name === void 0 ? void 0 : _ctx_checkedValues_props_name.includes(props.value));
});
const { onClick: onClickOriginal } = props;
const toggleButtonState = (0, _reactbutton.useToggleButton_unstable)({
checked,
role: 'radio',
'aria-checked': checked,
...props
}, ref);
const state = {
...toggleButtonState,
name: props.name,
value: props.value
};
const handleOnClick = (0, _reactutilities.useEventCallback)((e)=>{
handleRadio === null || handleRadio === void 0 ? void 0 : handleRadio(e, state.name, state.value, state.checked);
onClickOriginal === null || onClickOriginal === void 0 ? void 0 : onClickOriginal(e);
});
state.root['aria-pressed'] = undefined;
state.root.onClick = handleOnClick;
return state;
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/ToolbarRadioButton/useToolbarRadioButton.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useEventCallback } from '@fluentui/react-utilities';\nimport { useToggleButton_unstable } from '@fluentui/react-button';\nimport { useToolbarContext_unstable } from '../Toolbar/ToolbarContext';\nimport type {\n ToolbarRadioButtonProps,\n ToolbarRadioButtonState,\n ToolbarRadioButtonBaseProps,\n ToolbarRadioButtonBaseState,\n} from './ToolbarRadioButton.types';\n\n/**\n * Given user props, defines default props for the RadioButton, calls useButtonState and useChecked, and returns\n * processed state.\n * @param props - User provided props to the RadioButton component.\n * @param ref - User provided ref to be passed to the RadioButton component.\n */\nexport const useToolbarRadioButton_unstable = (\n props: ToolbarRadioButtonProps,\n ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): ToolbarRadioButtonState => {\n const { appearance = 'secondary' } = props;\n const size = useToolbarContext_unstable(ctx => ctx.size);\n const state = useToolbarRadioButtonBase_unstable(props, ref);\n\n return {\n ...state,\n\n appearance,\n size: props.size || size,\n };\n};\n\n/**\n * Base hook that builds Toolbar RadioButton state for behavior and structure only.\n * It does not provide any design-related defaults.\n *\n * @internal\n * @param props - User provided props to the RadioButton component.\n * @param ref - User provided ref to be passed to the RadioButton component.\n */\nexport const useToolbarRadioButtonBase_unstable = (\n props: ToolbarRadioButtonBaseProps,\n ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): ToolbarRadioButtonBaseState => {\n const handleRadio = useToolbarContext_unstable(ctx => ctx.handleRadio);\n const checked = useToolbarContext_unstable(ctx => !!ctx.checkedValues[props.name]?.includes(props.value));\n\n const { onClick: onClickOriginal } = props;\n const toggleButtonState = useToggleButton_unstable(\n { checked, role: 'radio', 'aria-checked': checked, ...props },\n ref,\n );\n const state: ToolbarRadioButtonBaseState = {\n ...toggleButtonState,\n name: props.name,\n value: props.value,\n };\n\n const handleOnClick = useEventCallback(\n (e: React.MouseEvent<HTMLButtonElement, MouseEvent> & React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {\n handleRadio?.(e, state.name, state.value, state.checked);\n onClickOriginal?.(e);\n },\n );\n state.root['aria-pressed'] = undefined;\n state.root.onClick = handleOnClick;\n\n return state;\n};\n"],"names":["React","useEventCallback","useToggleButton_unstable","useToolbarContext_unstable","useToolbarRadioButton_unstable","props","ref","appearance","size","ctx","state","useToolbarRadioButtonBase_unstable","handleRadio","checked","checkedValues","name","includes","value","onClick","onClickOriginal","toggleButtonState","role","handleOnClick","e","root","undefined"],"mappings":"AAAA;;;;;;;;;;;;IA2CaW,kCAAAA;;;kCAxBAP;;;;;iEAjBU,QAAQ;gCACE,4BAA4B;6BACpB,yBAAyB;gCACvB,4BAA4B;AAchE,MAAMA,iCAAiC,CAC5CC,OACAC;IAEA,MAAM,EAAEC,aAAa,WAAW,EAAE,GAAGF;IACrC,MAAMG,WAAOL,0CAAAA,EAA2BM,CAAAA,MAAOA,IAAID,IAAI;IACvD,MAAME,QAAQC,mCAAmCN,OAAOC;IAExD,OAAO;QACL,GAAGI,KAAK;QAERH;QACAC,MAAMH,MAAMG,IAAI,IAAIA;IACtB;AACF,EAAE;AAUK,2CAA2C,CAChDH,OACAC;IAEA,MAAMM,cAAcT,8CAAAA,EAA2BM,CAAAA,MAAOA,IAAIG,WAAW;IACrE,MAAMC,cAAUV,0CAAAA,EAA2BM,CAAAA;YAASA;eAAF,CAAC,CAAA,CAAA,CAACA,gCAAAA,IAAIK,aAAa,CAACT,MAAMU,KAAI,AAAC,MAAA,QAA7BN,kCAAAA,KAAAA,IAAAA,KAAAA,IAAAA,8BAA+BO,QAAQ,CAACX,MAAMY,MAAK;;IAEvG,MAAM,EAAEC,SAASC,eAAe,EAAE,GAAGd;IACrC,MAAMe,wBAAoBlB,qCAAAA,EACxB;QAAEW;QAASQ,MAAM;QAAS,gBAAgBR;QAAS,GAAGR,KAAK;IAAC,GAC5DC;IAEF,MAAMI,QAAqC;QACzC,GAAGU,iBAAiB;QACpBL,MAAMV,MAAMU,IAAI;QAChBE,OAAOZ,MAAMY,KAAK;IACpB;IAEA,MAAMK,oBAAgBrB,gCAAAA,EACpB,CAACsB;QACCX,gBAAAA,QAAAA,gBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,YAAcW,GAAGb,MAAMK,IAAI,EAAEL,MAAMO,KAAK,EAAEP,MAAMG,OAAO;QACvDM,oBAAAA,QAAAA,oBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,gBAAkBI;IACpB;IAEFb,MAAMc,IAAI,CAAC,eAAe,GAAGC;IAC7Bf,MAAMc,IAAI,CAACN,OAAO,GAAGI;IAErB,OAAOZ;AACT,EAAE"}

View File

@@ -0,0 +1,38 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "useToolbarRadioButtonStyles_unstable", {
enumerable: true,
get: function() {
return useToolbarRadioButtonStyles_unstable;
}
});
const _react = require("@griffel/react");
const _reactbutton = require("@fluentui/react-button");
const useBaseStyles = /*#__PURE__*/ (0, _react.__styles)({
selected: {
De3pzq: "fq5gl1p",
sj55zd: "f1eryozh"
},
iconSelected: {
sj55zd: "f1qj7y59"
}
}, {
d: [
".fq5gl1p{background-color:var(--colorSubtleBackgroundSelected);}",
".f1eryozh{color:var(--colorNeutralForeground2Selected);}",
".f1qj7y59{color:var(--colorNeutralForeground2BrandSelected);}"
]
});
const useToolbarRadioButtonStyles_unstable = (state)=>{
'use no memo';
const toggleButtonStyles = useBaseStyles();
state.root.className = (0, _react.mergeClasses)(state.checked && toggleButtonStyles.selected, state.root.className);
if (state.icon) {
state.icon.className = (0, _react.mergeClasses)(state.checked && toggleButtonStyles.iconSelected, state.icon.className);
}
(0, _reactbutton.useToggleButtonStyles_unstable)(state);
return state;
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["useToolbarRadioButtonStyles.styles.js"],"sourcesContent":["'use client';\nimport { tokens } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { useToggleButtonStyles_unstable } from '@fluentui/react-button';\nconst useBaseStyles = makeStyles({\n /* use subtle ToggleButton selected styles for Toolbar Radio selected state */ selected: {\n backgroundColor: tokens.colorSubtleBackgroundSelected,\n color: tokens.colorNeutralForeground2Selected\n },\n iconSelected: {\n color: tokens.colorNeutralForeground2BrandSelected\n }\n});\n/**\n * Apply styling to the ToolbarRadioButton slots based on the state\n */ export const useToolbarRadioButtonStyles_unstable = (state)=>{\n 'use no memo';\n const toggleButtonStyles = useBaseStyles();\n state.root.className = mergeClasses(state.checked && toggleButtonStyles.selected, state.root.className);\n if (state.icon) {\n state.icon.className = mergeClasses(state.checked && toggleButtonStyles.iconSelected, state.icon.className);\n }\n useToggleButtonStyles_unstable(state);\n return state;\n};\n"],"names":["tokens","__styles","mergeClasses","useToggleButtonStyles_unstable","useBaseStyles","selected","De3pzq","sj55zd","iconSelected","d","useToolbarRadioButtonStyles_unstable","state","toggleButtonStyles","root","className","checked","icon"],"mappings":"AAAA,YAAY;;;;;;;;;;;uBAE6B,gBAAgB;6BACV,wBAAwB;AACvE,MAAMI,aAAa,GAAA,WAAA,OAAGH,eAAA,EAAA;IAAAI,QAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAAC,YAAA,EAAA;QAAAD,MAAA,EAAA;IAAA;AAAA,GAAA;IAAAE,CAAA,EAAA;QAAA;QAAA;QAAA;KAAA;AAAA,CAQrB,CAAC;AAGS,MAAMC,oCAAoC,IAAIC,KAAK,IAAG;IAC7D,aAAa;IACb,MAAMC,kBAAkB,GAAGR,aAAa,CAAC,CAAC;IAC1CO,KAAK,CAACE,IAAI,CAACC,SAAS,GAAGZ,uBAAY,EAACS,KAAK,CAACI,OAAO,IAAIH,kBAAkB,CAACP,QAAQ,EAAEM,KAAK,CAACE,IAAI,CAACC,SAAS,CAAC;IACvG,IAAIH,KAAK,CAACK,IAAI,EAAE;QACZL,KAAK,CAACK,IAAI,CAACF,SAAS,OAAGZ,mBAAY,EAACS,KAAK,CAACI,OAAO,IAAIH,kBAAkB,CAACJ,YAAY,EAAEG,KAAK,CAACK,IAAI,CAACF,SAAS,CAAC;IAC/G;QACAX,2CAA8B,EAACQ,KAAK,CAAC;IACrC,OAAOA,KAAK;AAChB,CAAC"}

View File

@@ -0,0 +1,33 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "useToolbarRadioButtonStyles_unstable", {
enumerable: true,
get: function() {
return useToolbarRadioButtonStyles_unstable;
}
});
const _reacttheme = require("@fluentui/react-theme");
const _react = require("@griffel/react");
const _reactbutton = require("@fluentui/react-button");
const useBaseStyles = (0, _react.makeStyles)({
/* use subtle ToggleButton selected styles for Toolbar Radio selected state */ selected: {
backgroundColor: _reacttheme.tokens.colorSubtleBackgroundSelected,
color: _reacttheme.tokens.colorNeutralForeground2Selected
},
iconSelected: {
color: _reacttheme.tokens.colorNeutralForeground2BrandSelected
}
});
const useToolbarRadioButtonStyles_unstable = (state)=>{
'use no memo';
const toggleButtonStyles = useBaseStyles();
state.root.className = (0, _react.mergeClasses)(state.checked && toggleButtonStyles.selected, state.root.className);
if (state.icon) {
state.icon.className = (0, _react.mergeClasses)(state.checked && toggleButtonStyles.iconSelected, state.icon.className);
}
(0, _reactbutton.useToggleButtonStyles_unstable)(state);
return state;
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/ToolbarRadioButton/useToolbarRadioButtonStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { tokens } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { useToggleButtonStyles_unstable } from '@fluentui/react-button';\nimport { ToolbarRadioButtonState } from './ToolbarRadioButton.types';\n\nconst useBaseStyles = makeStyles({\n /* use subtle ToggleButton selected styles for Toolbar Radio selected state */\n selected: {\n backgroundColor: tokens.colorSubtleBackgroundSelected,\n color: tokens.colorNeutralForeground2Selected,\n },\n\n iconSelected: {\n color: tokens.colorNeutralForeground2BrandSelected,\n },\n});\n\n/**\n * Apply styling to the ToolbarRadioButton slots based on the state\n */\nexport const useToolbarRadioButtonStyles_unstable = (state: ToolbarRadioButtonState): ToolbarRadioButtonState => {\n 'use no memo';\n\n const toggleButtonStyles = useBaseStyles();\n\n state.root.className = mergeClasses(state.checked && toggleButtonStyles.selected, state.root.className);\n\n if (state.icon) {\n state.icon.className = mergeClasses(state.checked && toggleButtonStyles.iconSelected, state.icon.className);\n }\n\n useToggleButtonStyles_unstable(state);\n\n return state;\n};\n"],"names":["tokens","makeStyles","mergeClasses","useToggleButtonStyles_unstable","useBaseStyles","selected","backgroundColor","colorSubtleBackgroundSelected","color","colorNeutralForeground2Selected","iconSelected","colorNeutralForeground2BrandSelected","useToolbarRadioButtonStyles_unstable","state","toggleButtonStyles","root","className","checked","icon"],"mappings":"AAAA;;;;;;;;;;;4BAEuB,wBAAwB;uBACN,iBAAiB;6BACX,yBAAyB;AAGxE,MAAMI,oBAAgBH,iBAAAA,EAAW;IAC/B,4EAA4E,GAC5EI,UAAU;QACRC,iBAAiBN,kBAAAA,CAAOO,6BAA6B;QACrDC,OAAOR,kBAAAA,CAAOS,+BAA+B;IAC/C;IAEAC,cAAc;QACZF,OAAOR,kBAAAA,CAAOW,oCAAoC;IACpD;AACF;AAKO,MAAMC,uCAAuC,CAACC;IACnD;IAEA,MAAMC,qBAAqBV;IAE3BS,MAAME,IAAI,CAACC,SAAS,GAAGd,uBAAAA,EAAaW,MAAMI,OAAO,IAAIH,mBAAmBT,QAAQ,EAAEQ,MAAME,IAAI,CAACC,SAAS;IAEtG,IAAIH,MAAMK,IAAI,EAAE;QACdL,MAAMK,IAAI,CAACF,SAAS,OAAGd,mBAAAA,EAAaW,MAAMI,OAAO,IAAIH,mBAAmBJ,YAAY,EAAEG,MAAMK,IAAI,CAACF,SAAS;IAC5G;QAEAb,2CAAAA,EAA+BU;IAE/B,OAAOA;AACT,EAAE"}

View File

@@ -0,0 +1,26 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "ToolbarRadioGroup", {
enumerable: true,
get: function() {
return ToolbarRadioGroup;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _ToolbarGroup = require("../../ToolbarGroup");
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
const ToolbarRadioGroup = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
const state = (0, _ToolbarGroup.useToolbarGroup_unstable)({
role: 'radiogroup',
...props
}, ref);
(0, _ToolbarGroup.useToolbarGroupStyles_unstable)(state);
(0, _reactsharedcontexts.useCustomStyleHook_unstable)('useToolbarGroupStyles_unstable')(state);
return (0, _ToolbarGroup.renderToolbarGroup_unstable)(state);
// Casting is required due to lack of distributive union to support unions on @types/react
});
ToolbarRadioGroup.displayName = 'ToolbarRadioGroup';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/ToolbarRadioGroup/ToolbarRadioGroup.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ToolbarRadioGroupProps } from './ToolbarRadioGroup.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport {\n renderToolbarGroup_unstable,\n useToolbarGroupStyles_unstable,\n useToolbarGroup_unstable,\n} from '../../ToolbarGroup';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * ToolbarRadioGroup component is a Button to be used inside Toolbar\n * which will respect toolbar props such as `size`\n */\nexport const ToolbarRadioGroup: ForwardRefComponent<ToolbarRadioGroupProps> = React.forwardRef((props, ref) => {\n const state = useToolbarGroup_unstable({ role: 'radiogroup', ...props }, ref);\n\n useToolbarGroupStyles_unstable(state);\n\n useCustomStyleHook_unstable('useToolbarGroupStyles_unstable')(state);\n\n return renderToolbarGroup_unstable(state);\n // Casting is required due to lack of distributive union to support unions on @types/react\n}) as ForwardRefComponent<ToolbarRadioGroupProps>;\n\nToolbarRadioGroup.displayName = 'ToolbarRadioGroup';\n"],"names":["React","renderToolbarGroup_unstable","useToolbarGroupStyles_unstable","useToolbarGroup_unstable","useCustomStyleHook_unstable","ToolbarRadioGroup","forwardRef","props","ref","state","role","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;8BAOxB,qBAAqB;qCACgB,kCAAkC;AAMvE,MAAMK,oBAAAA,WAAAA,GAAiEL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IACrG,MAAMC,YAAQN,sCAAAA,EAAyB;QAAEO,MAAM;QAAc,GAAGH,KAAK;IAAC,GAAGC;QAEzEN,4CAAAA,EAA+BO;QAE/BL,gDAAAA,EAA4B,kCAAkCK;IAE9D,WAAOR,yCAAAA,EAA4BQ;AACnC,0FAA0F;AAC5F,GAAkD;AAElDJ,kBAAkBM,WAAW,GAAG"}

View File

@@ -0,0 +1,6 @@
/**
* State used in rendering ToolbarButton
*/ "use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/ToolbarRadioGroup/ToolbarRadioGroup.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type ToolbarRadioGroupSlots = {\n root: Slot<'div'>;\n};\n\n/**\n * ToolbarButton Props\n */\nexport type ToolbarRadioGroupProps = ComponentProps<ToolbarRadioGroupSlots>;\n\n/**\n * State used in rendering ToolbarButton\n */\nexport type ToolbarRadioGroupState = ComponentState<ToolbarRadioGroupSlots>;\n"],"names":[],"mappings":"AAWA;;CAEC,GACD,WAA4E"}

View File

@@ -0,0 +1,11 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "ToolbarRadioGroup", {
enumerable: true,
get: function() {
return _ToolbarRadioGroup.ToolbarRadioGroup;
}
});
const _ToolbarRadioGroup = require("./ToolbarRadioGroup");

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/ToolbarRadioGroup/index.ts"],"sourcesContent":["export { ToolbarRadioGroup } from './ToolbarRadioGroup';\nexport type { ToolbarRadioGroupProps, ToolbarRadioGroupSlots, ToolbarRadioGroupState } from './ToolbarRadioGroup.types';\n"],"names":["ToolbarRadioGroup"],"mappings":";;;;;;;eAASA,oCAAiB;;;mCAAQ,sBAAsB"}

View File

@@ -0,0 +1,24 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "ToolbarToggleButton", {
enumerable: true,
get: function() {
return ToolbarToggleButton;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _reactbutton = require("@fluentui/react-button");
const _useToolbarToggleButton = require("./useToolbarToggleButton");
const _useToolbarToggleButtonStylesstyles = require("./useToolbarToggleButtonStyles.styles");
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
const ToolbarToggleButton = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
const state = (0, _useToolbarToggleButton.useToolbarToggleButton_unstable)(props, ref);
(0, _useToolbarToggleButtonStylesstyles.useToolbarToggleButtonStyles_unstable)(state);
(0, _reactsharedcontexts.useCustomStyleHook_unstable)('useToolbarToggleButtonStyles_unstable')(state);
return (0, _reactbutton.renderToggleButton_unstable)(state);
});
ToolbarToggleButton.displayName = 'ToolbarToggleButton';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/ToolbarToggleButton/ToolbarToggleButton.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ToolbarToggleButtonProps } from './ToolbarToggleButton.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { renderToggleButton_unstable } from '@fluentui/react-button';\nimport { useToolbarToggleButton_unstable } from './useToolbarToggleButton';\nimport { useToolbarToggleButtonStyles_unstable } from './useToolbarToggleButtonStyles.styles';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * ToolbarToggleButton component\n */\nexport const ToolbarToggleButton: ForwardRefComponent<ToolbarToggleButtonProps> = React.forwardRef((props, ref) => {\n const state = useToolbarToggleButton_unstable(props, ref);\n\n useToolbarToggleButtonStyles_unstable(state);\n\n useCustomStyleHook_unstable('useToolbarToggleButtonStyles_unstable')(state);\n\n return renderToggleButton_unstable(state);\n}) as ForwardRefComponent<ToolbarToggleButtonProps>;\n\nToolbarToggleButton.displayName = 'ToolbarToggleButton';\n"],"names":["React","renderToggleButton_unstable","useToolbarToggleButton_unstable","useToolbarToggleButtonStyles_unstable","useCustomStyleHook_unstable","ToolbarToggleButton","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;6BAGa,yBAAyB;wCACrB,2BAA2B;oDACrB,wCAAwC;qCAClD,kCAAkC;AAKvE,MAAMK,sBAAAA,WAAAA,GAAqEL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IACzG,MAAMC,YAAQP,uDAAAA,EAAgCK,OAAOC;QAErDL,yEAAAA,EAAsCM;QAEtCL,gDAAAA,EAA4B,yCAAyCK;IAErE,WAAOR,wCAAAA,EAA4BQ;AACrC,GAAoD;AAEpDJ,oBAAoBK,WAAW,GAAG"}

View File

@@ -0,0 +1,4 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/ToolbarToggleButton/ToolbarToggleButton.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, DistributiveOmit } from '@fluentui/react-utilities';\nimport type { ToggleButtonProps, ButtonSlots, ToggleButtonState } from '@fluentui/react-button';\n\n/**\n * ToolbarToggleButton Props\n */\nexport type ToolbarToggleButtonProps = ComponentProps<ButtonSlots> &\n Partial<Pick<ToggleButtonProps, 'disabled' | 'disabledFocusable' | 'size'>> & {\n appearance?: 'primary' | 'subtle' | 'transparent';\n name: string;\n value: string;\n };\n\nexport type ToolbarToggleButtonBaseProps = DistributiveOmit<ToolbarToggleButtonProps, 'appearance'>;\n\n/**\n * State used in rendering ToolbarToggleButton\n */\nexport type ToolbarToggleButtonState = ComponentState<Partial<ButtonSlots>> &\n ToggleButtonState &\n Required<Pick<ToggleButtonProps, 'checked'>> &\n Pick<ToolbarToggleButtonProps, 'name' | 'value'>;\n\nexport type ToolbarToggleButtonBaseState = DistributiveOmit<ToolbarToggleButtonState, 'appearance'>;\n"],"names":[],"mappings":""}

View File

@@ -0,0 +1,27 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
ToolbarToggleButton: function() {
return _ToolbarToggleButton.ToolbarToggleButton;
},
useToolbarToggleButtonBase_unstable: function() {
return _useToolbarToggleButton.useToolbarToggleButtonBase_unstable;
},
useToolbarToggleButtonStyles_unstable: function() {
return _useToolbarToggleButtonStylesstyles.useToolbarToggleButtonStyles_unstable;
},
useToolbarToggleButton_unstable: function() {
return _useToolbarToggleButton.useToolbarToggleButton_unstable;
}
});
const _ToolbarToggleButton = require("./ToolbarToggleButton");
const _useToolbarToggleButton = require("./useToolbarToggleButton");
const _useToolbarToggleButtonStylesstyles = require("./useToolbarToggleButtonStyles.styles");

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/ToolbarToggleButton/index.ts"],"sourcesContent":["export { ToolbarToggleButton } from './ToolbarToggleButton';\nexport type {\n ToolbarToggleButtonBaseState,\n ToolbarToggleButtonProps,\n ToolbarToggleButtonBaseProps,\n ToolbarToggleButtonState,\n} from './ToolbarToggleButton.types';\nexport { useToolbarToggleButton_unstable, useToolbarToggleButtonBase_unstable } from './useToolbarToggleButton';\nexport { useToolbarToggleButtonStyles_unstable } from './useToolbarToggleButtonStyles.styles';\n"],"names":["ToolbarToggleButton","useToolbarToggleButton_unstable","useToolbarToggleButtonBase_unstable","useToolbarToggleButtonStyles_unstable"],"mappings":";;;;;;;;;;;;eAASA,wCAAmB;;;eAOcE,2DAAmC;;;eACpEC,yEAAqC;;;eADrCF,uDAA+B;;;qCAPJ,wBAAwB;wCAOyB,2BAA2B;oDAC1D,wCAAwC"}

View File

@@ -0,0 +1,59 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
useToolbarToggleButtonBase_unstable: function() {
return useToolbarToggleButtonBase_unstable;
},
useToolbarToggleButton_unstable: function() {
return useToolbarToggleButton_unstable;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _reactbutton = require("@fluentui/react-button");
const _ToolbarContext = require("../Toolbar/ToolbarContext");
const useToolbarToggleButton_unstable = (props, ref)=>{
const { appearance = 'subtle', ...baseProps } = props;
const state = useToolbarToggleButtonBase_unstable(baseProps, ref);
return {
appearance,
...state
};
};
const useToolbarToggleButtonBase_unstable = (props, ref)=>{
const handleToggleButton = (0, _ToolbarContext.useToolbarContext_unstable)((ctx)=>ctx.handleToggleButton);
const checked = (0, _ToolbarContext.useToolbarContext_unstable)((ctx)=>{
var _ctx_checkedValues_props_name;
return !!((_ctx_checkedValues_props_name = ctx.checkedValues[props.name]) === null || _ctx_checkedValues_props_name === void 0 ? void 0 : _ctx_checkedValues_props_name.includes(props.value));
});
const { onClick: onClickOriginal } = props;
const toggleButtonState = (0, _reactbutton.useToggleButton_unstable)({
checked,
...props
}, ref);
const state = {
...toggleButtonState,
name: props.name,
value: props.value
};
const handleOnClick = (e)=>{
if (state.disabled || state.disabledFocusable) {
e.preventDefault();
e.stopPropagation();
return;
}
handleToggleButton === null || handleToggleButton === void 0 ? void 0 : handleToggleButton(e, state.name, state.value, state.checked);
onClickOriginal === null || onClickOriginal === void 0 ? void 0 : onClickOriginal(e);
};
state.root.onClick = handleOnClick;
return state;
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/ToolbarToggleButton/useToolbarToggleButton.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useToggleButton_unstable } from '@fluentui/react-button';\nimport { useToolbarContext_unstable } from '../Toolbar/ToolbarContext';\nimport type {\n ToolbarToggleButtonProps,\n ToolbarToggleButtonState,\n ToolbarToggleButtonBaseProps,\n ToolbarToggleButtonBaseState,\n} from './ToolbarToggleButton.types';\n\n/**\n * Given user props, defines default props for the ToggleButton, calls useButtonState and useChecked, and returns\n * processed state.\n * @param props - User provided props to the ToggleButton component.\n * @param ref - User provided ref to be passed to the ToggleButton component.\n */\nexport const useToolbarToggleButton_unstable = (\n props: ToolbarToggleButtonProps,\n ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): ToolbarToggleButtonState => {\n const { appearance = 'subtle', ...baseProps } = props;\n const state = useToolbarToggleButtonBase_unstable(baseProps, ref);\n return {\n appearance,\n ...state,\n };\n};\n\n/**\n * Base hook that builds Toolbar ToggleButton state for behavior and structure only.\n * It does not provide any design-related defaults.\n *\n * @internal\n * @param props - User provided props to the ToggleButton component.\n * @param ref - User provided ref to be passed to the ToggleButton component.\n */\nexport const useToolbarToggleButtonBase_unstable = (\n props: ToolbarToggleButtonBaseProps,\n ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): ToolbarToggleButtonBaseState => {\n const handleToggleButton = useToolbarContext_unstable(ctx => ctx.handleToggleButton);\n const checked = useToolbarContext_unstable(ctx => !!ctx.checkedValues[props.name]?.includes(props.value));\n\n const { onClick: onClickOriginal } = props;\n const toggleButtonState = useToggleButton_unstable({ checked, ...props }, ref);\n const state: ToolbarToggleButtonBaseState = {\n ...toggleButtonState,\n name: props.name,\n value: props.value,\n };\n\n const handleOnClick = (\n e: React.MouseEvent<HTMLButtonElement, MouseEvent> & React.MouseEvent<HTMLAnchorElement, MouseEvent>,\n ) => {\n if (state.disabled || state.disabledFocusable) {\n e.preventDefault();\n e.stopPropagation();\n return;\n }\n\n handleToggleButton?.(e, state.name, state.value, state.checked);\n onClickOriginal?.(e);\n };\n\n state.root.onClick = handleOnClick;\n return state;\n};\n"],"names":["React","useToggleButton_unstable","useToolbarContext_unstable","useToolbarToggleButton_unstable","props","ref","appearance","baseProps","state","useToolbarToggleButtonBase_unstable","handleToggleButton","ctx","checked","checkedValues","name","includes","value","onClick","onClickOriginal","toggleButtonState","handleOnClick","e","disabled","disabledFocusable","preventDefault","stopPropagation","root"],"mappings":"AAAA;;;;;;;;;;;;uCAsCaS;eAAAA;;mCApBAN;;;;;iEAhBU,QAAQ;6BACU,yBAAyB;gCACvB,4BAA4B;AAchE,MAAMA,kCAAkC,CAC7CC,OACAC;IAEA,MAAM,EAAEC,aAAa,QAAQ,EAAE,GAAGC,WAAW,GAAGH;IAChD,MAAMI,QAAQC,oCAAoCF,WAAWF;IAC7D,OAAO;QACLC;QACA,GAAGE,KAAK;IACV;AACF,EAAE;AAUK,4CAA4C,CACjDJ,OACAC;IAEA,MAAMK,yBAAqBR,0CAAAA,EAA2BS,CAAAA,MAAOA,IAAID,kBAAkB;IACnF,MAAME,UAAUV,8CAAAA,EAA2BS,CAAAA;YAASA;eAAF,CAAC,CAAA,CAAA,CAACA,gCAAAA,IAAIE,aAAa,CAACT,MAAMU,IAAI,CAAC,MAAA,QAA7BH,kCAAAA,KAAAA,IAAAA,KAAAA,IAAAA,8BAA+BI,QAAQ,CAACX,MAAMY,MAAK;;IAEvG,MAAM,EAAEC,SAASC,eAAe,EAAE,GAAGd;IACrC,MAAMe,wBAAoBlB,qCAAAA,EAAyB;QAAEW;QAAS,GAAGR,KAAK;IAAC,GAAGC;IAC1E,MAAMG,QAAsC;QAC1C,GAAGW,iBAAiB;QACpBL,MAAMV,MAAMU,IAAI;QAChBE,OAAOZ,MAAMY,KAAK;IACpB;IAEA,MAAMI,gBAAgB,CACpBC;QAEA,IAAIb,MAAMc,QAAQ,IAAId,MAAMe,iBAAiB,EAAE;YAC7CF,EAAEG,cAAc;YAChBH,EAAEI,eAAe;YACjB;QACF;QAEAf,uBAAAA,QAAAA,uBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,mBAAqBW,GAAGb,MAAMM,IAAI,EAAEN,MAAMQ,KAAK,EAAER,MAAMI,OAAO;QAC9DM,oBAAAA,QAAAA,oBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,gBAAkBG;IACpB;IAEAb,MAAMkB,IAAI,CAACT,OAAO,GAAGG;IACrB,OAAOZ;AACT,EAAE"}

View File

@@ -0,0 +1,38 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "useToolbarToggleButtonStyles_unstable", {
enumerable: true,
get: function() {
return useToolbarToggleButtonStyles_unstable;
}
});
const _react = require("@griffel/react");
const _reactbutton = require("@fluentui/react-button");
const useBaseStyles = /*#__PURE__*/ (0, _react.__styles)({
selected: {
De3pzq: "fq5gl1p",
sj55zd: "f1eryozh"
},
iconSelected: {
sj55zd: "f1qj7y59"
}
}, {
d: [
".fq5gl1p{background-color:var(--colorSubtleBackgroundSelected);}",
".f1eryozh{color:var(--colorNeutralForeground2Selected);}",
".f1qj7y59{color:var(--colorNeutralForeground2BrandSelected);}"
]
});
const useToolbarToggleButtonStyles_unstable = (state)=>{
'use no memo';
const toggleButtonStyles = useBaseStyles();
state.root.className = (0, _react.mergeClasses)(state.checked && toggleButtonStyles.selected, state.root.className);
if (state.icon) {
state.icon.className = (0, _react.mergeClasses)(state.checked && toggleButtonStyles.iconSelected, state.icon.className);
}
(0, _reactbutton.useToggleButtonStyles_unstable)(state);
return state;
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["useToolbarToggleButtonStyles.styles.js"],"sourcesContent":["'use client';\nimport { tokens } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { useToggleButtonStyles_unstable } from '@fluentui/react-button';\nconst useBaseStyles = makeStyles({\n /* use subtle ToggleButton selected styles for Toolbar Radio selected state */ selected: {\n backgroundColor: tokens.colorSubtleBackgroundSelected,\n color: tokens.colorNeutralForeground2Selected\n },\n iconSelected: {\n color: tokens.colorNeutralForeground2BrandSelected\n }\n});\n/**\n * Apply styling to the ToolbarToggleButton slots based on the state\n */ export const useToolbarToggleButtonStyles_unstable = (state)=>{\n 'use no memo';\n const toggleButtonStyles = useBaseStyles();\n state.root.className = mergeClasses(state.checked && toggleButtonStyles.selected, state.root.className);\n if (state.icon) {\n state.icon.className = mergeClasses(state.checked && toggleButtonStyles.iconSelected, state.icon.className);\n }\n useToggleButtonStyles_unstable(state);\n return state;\n};\n"],"names":["tokens","__styles","mergeClasses","useToggleButtonStyles_unstable","useBaseStyles","selected","De3pzq","sj55zd","iconSelected","d","useToolbarToggleButtonStyles_unstable","state","toggleButtonStyles","root","className","checked","icon"],"mappings":"AAAA,YAAY;;;;;;;;;;;uBAE6B,gBAAgB;6BACV,wBAAwB;AACvE,MAAMI,aAAa,GAAA,WAAA,OAAGH,eAAA,EAAA;IAAAI,QAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAAC,YAAA,EAAA;QAAAD,MAAA,EAAA;IAAA;AAAA,GAAA;IAAAE,CAAA,EAAA;QAAA;QAAA;QAAA;KAAA;AAAA,CAQrB,CAAC;AAGS,MAAMC,qCAAqC,IAAIC,KAAK,IAAG;IAC9D,aAAa;IACb,MAAMC,kBAAkB,GAAGR,aAAa,CAAC,CAAC;IAC1CO,KAAK,CAACE,IAAI,CAACC,SAAS,GAAGZ,uBAAY,EAACS,KAAK,CAACI,OAAO,IAAIH,kBAAkB,CAACP,QAAQ,EAAEM,KAAK,CAACE,IAAI,CAACC,SAAS,CAAC;IACvG,IAAIH,KAAK,CAACK,IAAI,EAAE;QACZL,KAAK,CAACK,IAAI,CAACF,SAAS,OAAGZ,mBAAY,EAACS,KAAK,CAACI,OAAO,IAAIH,kBAAkB,CAACJ,YAAY,EAAEG,KAAK,CAACK,IAAI,CAACF,SAAS,CAAC;IAC/G;QACAX,2CAA8B,EAACQ,KAAK,CAAC;IACrC,OAAOA,KAAK;AAChB,CAAC"}

View File

@@ -0,0 +1,33 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "useToolbarToggleButtonStyles_unstable", {
enumerable: true,
get: function() {
return useToolbarToggleButtonStyles_unstable;
}
});
const _reacttheme = require("@fluentui/react-theme");
const _react = require("@griffel/react");
const _reactbutton = require("@fluentui/react-button");
const useBaseStyles = (0, _react.makeStyles)({
/* use subtle ToggleButton selected styles for Toolbar Radio selected state */ selected: {
backgroundColor: _reacttheme.tokens.colorSubtleBackgroundSelected,
color: _reacttheme.tokens.colorNeutralForeground2Selected
},
iconSelected: {
color: _reacttheme.tokens.colorNeutralForeground2BrandSelected
}
});
const useToolbarToggleButtonStyles_unstable = (state)=>{
'use no memo';
const toggleButtonStyles = useBaseStyles();
state.root.className = (0, _react.mergeClasses)(state.checked && toggleButtonStyles.selected, state.root.className);
if (state.icon) {
state.icon.className = (0, _react.mergeClasses)(state.checked && toggleButtonStyles.iconSelected, state.icon.className);
}
(0, _reactbutton.useToggleButtonStyles_unstable)(state);
return state;
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/ToolbarToggleButton/useToolbarToggleButtonStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { tokens } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { useToggleButtonStyles_unstable } from '@fluentui/react-button';\nimport { ToolbarToggleButtonState } from './ToolbarToggleButton.types';\n\nconst useBaseStyles = makeStyles({\n /* use subtle ToggleButton selected styles for Toolbar Radio selected state */\n selected: {\n backgroundColor: tokens.colorSubtleBackgroundSelected,\n color: tokens.colorNeutralForeground2Selected,\n },\n\n iconSelected: {\n color: tokens.colorNeutralForeground2BrandSelected,\n },\n});\n\n/**\n * Apply styling to the ToolbarToggleButton slots based on the state\n */\nexport const useToolbarToggleButtonStyles_unstable = (state: ToolbarToggleButtonState): ToolbarToggleButtonState => {\n 'use no memo';\n\n const toggleButtonStyles = useBaseStyles();\n\n state.root.className = mergeClasses(state.checked && toggleButtonStyles.selected, state.root.className);\n\n if (state.icon) {\n state.icon.className = mergeClasses(state.checked && toggleButtonStyles.iconSelected, state.icon.className);\n }\n\n useToggleButtonStyles_unstable(state);\n\n return state;\n};\n"],"names":["tokens","makeStyles","mergeClasses","useToggleButtonStyles_unstable","useBaseStyles","selected","backgroundColor","colorSubtleBackgroundSelected","color","colorNeutralForeground2Selected","iconSelected","colorNeutralForeground2BrandSelected","useToolbarToggleButtonStyles_unstable","state","toggleButtonStyles","root","className","checked","icon"],"mappings":"AAAA;;;;;;;;;;;4BAEuB,wBAAwB;uBACN,iBAAiB;6BACX,yBAAyB;AAGxE,MAAMI,oBAAgBH,iBAAAA,EAAW;IAC/B,4EAA4E,GAC5EI,UAAU;QACRC,iBAAiBN,kBAAAA,CAAOO,6BAA6B;QACrDC,OAAOR,kBAAAA,CAAOS,+BAA+B;IAC/C;IAEAC,cAAc;QACZF,OAAOR,kBAAAA,CAAOW,oCAAoC;IACpD;AACF;AAKO,MAAMC,wCAAwC,CAACC;IACpD;IAEA,MAAMC,qBAAqBV;IAE3BS,MAAME,IAAI,CAACC,SAAS,GAAGd,uBAAAA,EAAaW,MAAMI,OAAO,IAAIH,mBAAmBT,QAAQ,EAAEQ,MAAME,IAAI,CAACC,SAAS;IAEtG,IAAIH,MAAMK,IAAI,EAAE;QACdL,MAAMK,IAAI,CAACF,SAAS,OAAGd,mBAAAA,EAAaW,MAAMI,OAAO,IAAIH,mBAAmBJ,YAAY,EAAEG,MAAMK,IAAI,CAACF,SAAS;IAC5G;QAEAb,2CAAAA,EAA+BU;IAE/B,OAAOA;AACT,EAAE"}