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

2637
node_modules/@fluentui/react-toolbar/CHANGELOG.md generated vendored Normal file

File diff suppressed because it is too large Load Diff

15
node_modules/@fluentui/react-toolbar/LICENSE generated vendored Normal file
View File

@@ -0,0 +1,15 @@
@fluentui/react-toolbar
Copyright (c) Microsoft Corporation
All rights reserved.
MIT License
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the ""Software""), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED *AS IS*, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
Note: Usage of the fonts and icons referenced in Fluent UI React is subject to the terms listed at https://aka.ms/fluentui-assets-license

7
node_modules/@fluentui/react-toolbar/README.md generated vendored Normal file
View File

@@ -0,0 +1,7 @@
# @fluentui/react-toolbar
## WIP
**React Toolbar components for [Fluent UI React](https://react.fluentui.dev)**
These are not production-ready components and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.

309
node_modules/@fluentui/react-toolbar/dist/index.d.ts generated vendored Normal file
View File

@@ -0,0 +1,309 @@
import { ButtonProps } from '@fluentui/react-button';
import { ButtonSlots } from '@fluentui/react-button';
import { ButtonState } from '@fluentui/react-button';
import type { ComponentProps } from '@fluentui/react-utilities';
import type { ComponentState } from '@fluentui/react-utilities';
import { ContextSelector } from '@fluentui/react-context-selector';
import type { DividerSlots } from '@fluentui/react-divider';
import type { DividerState } from '@fluentui/react-divider';
import type { ForwardRefComponent } from '@fluentui/react-utilities';
import type { JSXElement } from '@fluentui/react-utilities';
import * as React_2 from 'react';
import type { Slot } from '@fluentui/react-utilities';
import { SlotClassNames } from '@fluentui/react-utilities';
import type { ToggleButtonProps } from '@fluentui/react-button';
import type { ToggleButtonState } from '@fluentui/react-button';
/**
* Render the final JSX of Toolbar
*/
export declare const renderToolbar_unstable: (state: ToolbarState, contextValues: ToolbarContextValues) => JSXElement;
/**
* Render the final JSX of ToolbarGroup
*/
export declare const renderToolbarGroup_unstable: (state: ToolbarGroupState) => JSXElement;
declare type ToggableHandler = (e: React_2.MouseEvent | React_2.KeyboardEvent, name: string, value: string, checked?: boolean) => void;
/**
* Toolbar component
*/
export declare const Toolbar: ForwardRefComponent<ToolbarProps>;
/**
* ToolbarButton component is a Button to be used inside Toolbar
* which will respect toolbar props such as `size`
*/
export declare const ToolbarButton: ForwardRefComponent<ToolbarButtonProps>;
/**
* ToolbarButton Props
*/
export declare type ToolbarButtonProps = ComponentProps<ButtonSlots> & Partial<Pick<ButtonProps, 'disabled' | 'disabledFocusable'>> & {
appearance?: 'primary' | 'subtle' | 'transparent';
} & {
vertical?: boolean;
};
/**
* State used in rendering ToolbarButton
*/
export declare type ToolbarButtonState = ComponentState<Partial<ButtonSlots>> & ButtonState & Required<Pick<ToolbarButtonProps, 'vertical'>>;
declare type ToolbarCheckedValueChangeData = {
/** The items for this value that are checked */
checkedItems: string[];
/** The name of the value */
name: string;
};
declare type ToolbarCheckedValueChangeEvent = React_2.MouseEvent | React_2.KeyboardEvent;
export declare const toolbarClassNames: SlotClassNames<ToolbarSlots>;
export declare type ToolbarContextValue = Pick<ToolbarState, 'size' | 'vertical' | 'checkedValues'> & {
handleToggleButton?: ToggableHandler;
handleRadio?: ToggableHandler;
};
export declare type ToolbarContextValues = {
toolbar: ToolbarContextValue;
};
/**
* ToolbarDivider component
*/
export declare const ToolbarDivider: ForwardRefComponent<ToolbarDividerProps>;
/**
* ToolbarDivider Props
*/
export declare type ToolbarDividerProps = ComponentProps<Partial<DividerSlots>> & {
/**
* A divider can be horizontal or vertical (default).
*
* @default true
*/
vertical?: boolean;
};
/**
* State used in rendering ToolbarDivider
*/
export declare type ToolbarDividerState = ComponentState<Partial<DividerSlots>> & DividerState;
/**
* ToolbarGroup component is a Button to be used inside Toolbar
* which will respect toolbar props such as `size`
*/
export declare const ToolbarGroup: ForwardRefComponent<ToolbarGroupProps>;
export declare const toolbarGroupClassNames: SlotClassNames<ToolbarGroupSlots>;
/**
* ToolbarButton Props
*/
export declare type ToolbarGroupProps = ComponentProps<ToolbarGroupSlots>;
declare type ToolbarGroupSlots = {
root: Slot<'div'>;
};
/**
* State used in rendering ToolbarButton
*/
export declare type ToolbarGroupState = ComponentState<ToolbarGroupSlots> & {
vertical?: boolean;
};
/**
* Toolbar Props
*/
export declare type ToolbarProps = ComponentProps<ToolbarSlots> & {
/**
* Toolbar can have small or medium size
*
* @default medium
*/
size?: 'small' | 'medium' | 'large';
/**
* Toolbar can be vertical styled
* @default false
*/
vertical?: boolean;
/**
* Map of all checked values
*/
checkedValues?: Record<string, string[]>;
/**
* Default values to be checked on mount
*/
defaultCheckedValues?: Record<string, string[]>;
/**
* Callback when checked items change for value with a name
*
* @param event - React's original SyntheticEvent
* @param data - A data object with relevant information
*/
onCheckedValueChange?: (e: ToolbarCheckedValueChangeEvent, data: ToolbarCheckedValueChangeData) => void;
};
/**
* ToolbarRadioButton component
*/
export declare const ToolbarRadioButton: ForwardRefComponent<ToolbarRadioButtonProps>;
/**
* ToolbarRadioButton Props
*/
export declare type ToolbarRadioButtonProps = ComponentProps<ButtonSlots> & Partial<Pick<ToggleButtonProps, 'disabled' | 'disabledFocusable' | 'size'>> & {
appearance?: 'primary' | 'subtle' | 'transparent';
name: string;
value: string;
};
/**
* State used in rendering ToolbarRadioButton
*/
export declare type ToolbarRadioButtonState = ComponentState<Partial<ButtonSlots>> & ToggleButtonState & Required<Pick<ToggleButtonProps, 'checked'>> & Pick<ToolbarRadioButtonProps, 'name' | 'value'>;
/**
* ToolbarRadioGroup component is a Button to be used inside Toolbar
* which will respect toolbar props such as `size`
*/
export declare const ToolbarRadioGroup: ForwardRefComponent<ToolbarRadioGroupProps>;
/**
* ToolbarButton Props
*/
export declare type ToolbarRadioGroupProps = ComponentProps<ToolbarRadioGroupSlots>;
declare type ToolbarRadioGroupSlots = {
root: Slot<'div'>;
};
/**
* State used in rendering ToolbarButton
*/
export declare type ToolbarRadioGroupState = ComponentState<ToolbarRadioGroupSlots>;
export declare type ToolbarSlots = {
root: Slot<'div'>;
};
/**
* State used in rendering Toolbar
*/
export declare type ToolbarState = ComponentState<ToolbarSlots> & Required<Pick<ToolbarProps, 'size' | 'checkedValues' | 'vertical'>> & Pick<ToolbarProps, 'defaultCheckedValues' | 'onCheckedValueChange'> & {
handleToggleButton: ToggableHandler;
handleRadio: ToggableHandler;
};
/**
* ToolbarToggleButton component
*/
export declare const ToolbarToggleButton: ForwardRefComponent<ToolbarToggleButtonProps>;
/**
* ToolbarToggleButton Props
*/
export declare type ToolbarToggleButtonProps = ComponentProps<ButtonSlots> & Partial<Pick<ToggleButtonProps, 'disabled' | 'disabledFocusable' | 'size'>> & {
appearance?: 'primary' | 'subtle' | 'transparent';
name: string;
value: string;
};
/**
* State used in rendering ToolbarToggleButton
*/
export declare type ToolbarToggleButtonState = ComponentState<Partial<ButtonSlots>> & ToggleButtonState & Required<Pick<ToggleButtonProps, 'checked'>> & Pick<ToolbarToggleButtonProps, 'name' | 'value'>;
/**
* Create the state required to render Toolbar.
*
* The returned state can be modified with hooks such as useToolbarStyles_unstable,
* before being passed to renderToolbar_unstable.
*
* @param props - props from this instance of Toolbar
* @param ref - reference to root HTMLElement of Toolbar
*/
export declare const useToolbar_unstable: (props: ToolbarProps, ref: React_2.Ref<HTMLElement>) => ToolbarState;
/**
* Given user props, defines default props for the Button, calls useButtonState and useChecked, and returns
* processed state.
* @param props - User provided props to the Button component.
* @param ref - User provided ref to be passed to the Button component.
*/
export declare const useToolbarButton_unstable: (props: ToolbarButtonProps, ref: React_2.Ref<HTMLButtonElement | HTMLAnchorElement>) => ToolbarButtonState;
/**
* Apply styling to the ToolbarButton slots based on the state
*/
export declare const useToolbarButtonStyles_unstable: (state: ToolbarButtonState) => void;
export declare const useToolbarContext_unstable: <T>(selector: ContextSelector<ToolbarContextValue, T>) => T;
export declare function useToolbarContextValues_unstable(state: ToolbarState): ToolbarContextValues;
/**
* Create the state required to render ToolbarDivider.
*
* The returned state can be modified with hooks such as useToolbarDividerStyles_unstable,
* before being passed to renderToolbar_unstable.
*
* @param props - props from this instance of ToolbarDivider
* @param ref - reference to root HTMLElement of ToolbarDivider
*/
export declare const useToolbarDivider_unstable: (props: ToolbarDividerProps, ref: React_2.Ref<HTMLElement>) => ToolbarDividerState;
/**
* Apply styling to the ToolbarDivider slots based on the state
*/
export declare const useToolbarDividerStyles_unstable: (state: ToolbarDividerState) => ToolbarDividerState;
/**
* Given user props, defines default props for the Group
* @param props - User provided props to the Group component.
* @param ref - User provided ref to be passed to the Group component.
*/
export declare const useToolbarGroup_unstable: (props: ToolbarGroupProps, ref: React_2.Ref<HTMLDivElement>) => ToolbarGroupState;
/**
* Apply styling to the Toolbar slots based on the state
*/
export declare const useToolbarGroupStyles_unstable: (state: ToolbarGroupState) => ToolbarGroupState;
/**
* Given user props, defines default props for the RadioButton, calls useButtonState and useChecked, and returns
* processed state.
* @param props - User provided props to the RadioButton component.
* @param ref - User provided ref to be passed to the RadioButton component.
*/
export declare const useToolbarRadioButton_unstable: (props: ToolbarRadioButtonProps, ref: React_2.Ref<HTMLButtonElement | HTMLAnchorElement>) => ToolbarRadioButtonState;
/**
* Apply styling to the ToolbarRadioButton slots based on the state
*/
export declare const useToolbarRadioButtonStyles_unstable: (state: ToolbarRadioButtonState) => ToolbarRadioButtonState;
/**
* Apply styling to the Toolbar slots based on the state
*/
export declare const useToolbarStyles_unstable: (state: ToolbarState) => ToolbarState;
/**
* Given user props, defines default props for the ToggleButton, calls useButtonState and useChecked, and returns
* processed state.
* @param props - User provided props to the ToggleButton component.
* @param ref - User provided ref to be passed to the ToggleButton component.
*/
export declare const useToolbarToggleButton_unstable: (props: ToolbarToggleButtonProps, ref: React_2.Ref<HTMLButtonElement | HTMLAnchorElement>) => ToolbarToggleButtonState;
/**
* Apply styling to the ToolbarToggleButton slots based on the state
*/
export declare const useToolbarToggleButtonStyles_unstable: (state: ToolbarToggleButtonState) => ToolbarToggleButtonState;
export { }

View File

@@ -0,0 +1,37 @@
"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 _index.Toolbar;
},
renderToolbar_unstable: function() {
return _index.renderToolbar_unstable;
},
toolbarClassNames: function() {
return _index.toolbarClassNames;
},
useToolbarBase_unstable: function() {
return _index.useToolbarBase_unstable;
},
useToolbarContextValues_unstable: function() {
return _index.useToolbarContextValues_unstable;
},
useToolbarContext_unstable: function() {
return _index.useToolbarContext_unstable;
},
useToolbarStyles_unstable: function() {
return _index.useToolbarStyles_unstable;
},
useToolbar_unstable: function() {
return _index.useToolbar_unstable;
}
});
const _index = require("./components/Toolbar/index");

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/Toolbar.ts"],"sourcesContent":["export 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 './components/Toolbar/index';\nexport {\n Toolbar,\n renderToolbar_unstable,\n toolbarClassNames,\n useToolbarStyles_unstable,\n useToolbar_unstable,\n useToolbarBase_unstable,\n useToolbarContext_unstable,\n useToolbarContextValues_unstable,\n} from './components/Toolbar/index';\n"],"names":["Toolbar","renderToolbar_unstable","toolbarClassNames","useToolbarStyles_unstable","useToolbar_unstable","useToolbarBase_unstable","useToolbarContext_unstable","useToolbarContextValues_unstable"],"mappings":";;;;;;;;;;;IAcEA;6BAAO;;;eACPC,6BAAsB;;;eACtBC,wBAAiB;;;eAGjBG,8BAAuB;;IAEvBE;sDAAgC;;;eADhCD,iCAA0B;;;eAH1BH,gCAAyB;;;eACzBC,0BAAmB;;;uBAId,6BAA6B"}

View File

@@ -0,0 +1,25 @@
"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 _index.ToolbarButton;
},
useToolbarButtonBase_unstable: function() {
return _index.useToolbarButtonBase_unstable;
},
useToolbarButtonStyles_unstable: function() {
return _index.useToolbarButtonStyles_unstable;
},
useToolbarButton_unstable: function() {
return _index.useToolbarButton_unstable;
}
});
const _index = require("./components/ToolbarButton/index");

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/ToolbarButton.ts"],"sourcesContent":["export type {\n ToolbarButtonBaseState,\n ToolbarButtonProps,\n ToolbarButtonBaseProps,\n ToolbarButtonState,\n} from './components/ToolbarButton/index';\nexport {\n ToolbarButton,\n useToolbarButtonStyles_unstable,\n useToolbarButton_unstable,\n useToolbarButtonBase_unstable,\n} from './components/ToolbarButton/index';\n"],"names":["ToolbarButton","useToolbarButtonStyles_unstable","useToolbarButton_unstable","useToolbarButtonBase_unstable"],"mappings":";;;;;;;;;;;;eAOEA,oBAAa;;;eAGbG,oCAA6B;;;eAF7BF,sCAA+B;;;eAC/BC,gCAAyB;;;uBAEpB,mCAAmC"}

View File

@@ -0,0 +1,25 @@
"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 _index.ToolbarDivider;
},
useToolbarDividerBase_unstable: function() {
return _index.useToolbarDividerBase_unstable;
},
useToolbarDividerStyles_unstable: function() {
return _index.useToolbarDividerStyles_unstable;
},
useToolbarDivider_unstable: function() {
return _index.useToolbarDivider_unstable;
}
});
const _index = require("./components/ToolbarDivider/index");

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/ToolbarDivider.ts"],"sourcesContent":["export type {\n ToolbarDividerBaseState,\n ToolbarDividerProps,\n ToolbarDividerBaseProps,\n ToolbarDividerState,\n} from './components/ToolbarDivider/index';\nexport {\n ToolbarDivider,\n useToolbarDividerStyles_unstable,\n useToolbarDivider_unstable,\n useToolbarDividerBase_unstable,\n} from './components/ToolbarDivider/index';\n"],"names":["ToolbarDivider","useToolbarDividerStyles_unstable","useToolbarDivider_unstable","useToolbarDividerBase_unstable"],"mappings":";;;;;;;;;;;;eAOEA,qBAAc;;;eAGdG,qCAA8B;;;eAF9BF,uCAAgC;;;eAChCC,iCAA0B;;;uBAErB,oCAAoC"}

View File

@@ -0,0 +1,28 @@
"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 _index.ToolbarGroup;
},
renderToolbarGroup_unstable: function() {
return _index.renderToolbarGroup_unstable;
},
toolbarGroupClassNames: function() {
return _index.toolbarGroupClassNames;
},
useToolbarGroupStyles_unstable: function() {
return _index.useToolbarGroupStyles_unstable;
},
useToolbarGroup_unstable: function() {
return _index.useToolbarGroup_unstable;
}
});
const _index = require("./components/ToolbarGroup/index");

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/ToolbarGroup.ts"],"sourcesContent":["export type { ToolbarGroupProps, ToolbarGroupSlots, ToolbarGroupState } from './components/ToolbarGroup/index';\nexport {\n ToolbarGroup,\n renderToolbarGroup_unstable,\n toolbarGroupClassNames,\n useToolbarGroupStyles_unstable,\n useToolbarGroup_unstable,\n} from './components/ToolbarGroup/index';\n"],"names":["ToolbarGroup","renderToolbarGroup_unstable","toolbarGroupClassNames","useToolbarGroupStyles_unstable","useToolbarGroup_unstable"],"mappings":";;;;;;;;;;;;eAEEA,mBAAY;;;eACZC,kCAA2B;;;eAC3BC,6BAAsB;;;eACtBC,qCAA8B;;;eAC9BC,+BAAwB;;;uBACnB,kCAAkC"}

View File

@@ -0,0 +1,25 @@
"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 _index.ToolbarRadioButton;
},
useToolbarRadioButtonBase_unstable: function() {
return _index.useToolbarRadioButtonBase_unstable;
},
useToolbarRadioButtonStyles_unstable: function() {
return _index.useToolbarRadioButtonStyles_unstable;
},
useToolbarRadioButton_unstable: function() {
return _index.useToolbarRadioButton_unstable;
}
});
const _index = require("./components/ToolbarRadioButton/index");

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/ToolbarRadioButton.ts"],"sourcesContent":["export type {\n ToolbarRadioButtonBaseProps,\n ToolbarRadioButtonProps,\n ToolbarRadioButtonBaseState,\n ToolbarRadioButtonState,\n} from './components/ToolbarRadioButton/index';\nexport {\n ToolbarRadioButton,\n useToolbarRadioButtonStyles_unstable,\n useToolbarRadioButton_unstable,\n useToolbarRadioButtonBase_unstable,\n} from './components/ToolbarRadioButton/index';\n"],"names":["ToolbarRadioButton","useToolbarRadioButtonStyles_unstable","useToolbarRadioButton_unstable","useToolbarRadioButtonBase_unstable"],"mappings":";;;;;;;;;;;;eAOEA,yBAAkB;;;eAGlBG,yCAAkC;;;eAFlCF,2CAAoC;;;eACpCC,qCAA8B;;;uBAEzB,wCAAwC"}

View File

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

View File

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

View File

@@ -0,0 +1,25 @@
"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 _index.ToolbarToggleButton;
},
useToolbarToggleButtonBase_unstable: function() {
return _index.useToolbarToggleButtonBase_unstable;
},
useToolbarToggleButtonStyles_unstable: function() {
return _index.useToolbarToggleButtonStyles_unstable;
},
useToolbarToggleButton_unstable: function() {
return _index.useToolbarToggleButton_unstable;
}
});
const _index = require("./components/ToolbarToggleButton/index");

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/ToolbarToggleButton.ts"],"sourcesContent":["export type {\n ToolbarToggleButtonBaseProps,\n ToolbarToggleButtonProps,\n ToolbarToggleButtonBaseState,\n ToolbarToggleButtonState,\n} from './components/ToolbarToggleButton/index';\nexport {\n ToolbarToggleButton,\n useToolbarToggleButtonStyles_unstable,\n useToolbarToggleButton_unstable,\n useToolbarToggleButtonBase_unstable,\n} from './components/ToolbarToggleButton/index';\n"],"names":["ToolbarToggleButton","useToolbarToggleButtonStyles_unstable","useToolbarToggleButton_unstable","useToolbarToggleButtonBase_unstable"],"mappings":";;;;;;;;;;;;eAOEA,0BAAmB;;;eAGnBG,0CAAmC;;;eAFnCF,4CAAqC;;;eACrCC,sCAA+B;;;uBAE1B,yCAAyC"}

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"}

Some files were not shown because too many files have changed in this diff Show More