Initial commit

This commit is contained in:
2025-03-07 19:22:02 +01:00
commit 4a98255d83
55743 changed files with 5280367 additions and 0 deletions
+3523
View File
File diff suppressed because it is too large Load Diff
+15
View File
@@ -0,0 +1,15 @@
@fluentui/react-button
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
+98
View File
@@ -0,0 +1,98 @@
# @fluentui/react-button
**Button components for [Fluent UI React](https://react.fluentui.dev/)**
- Buttons enable users to trigger an action or event, such as submitting a form, opening a dialog, canceling an action, or performing a delete operation.
- CompoundButtons are buttons that can have secondary content that adds extra information to the user.
- MenuButtons are buttons that have a chevron icon after the button contents and are usually clicked to open/close menus.
- SplitButtons are a grouping of two interactive surfaces where interacting with the first one triggers a primary action, while interacting with the second one opens a menu with secondary actions.
- ToggleButtons are buttons that toggle between two defined states when triggered.
## Usage
To import Button:
```js
import { Button, CompoundButton, MenuButton, SplitButton, ToggleButton } from '@fluentui/react-components';
```
### Examples
### Button
```jsx
<Button>Submit</Button>
<Button icon={<SVGIcon />} />
<Button icon={<SVGIcon />}>Submit</Button>
<Button icon={<SVGIcon />} iconPosition="after">Submit</Button>
<Button appearance="primary">Submit</Button>
<Button disabled>Submit</Button>
<Button size="small">Submit</Button>
<Button size="large">Submit</Button>
```
### CompoundButton
```jsx
<CompoundButton icon={<CalendarMonth />} secondaryContent="Secondary content" {...props}>
Example
</CompoundButton>
```
### MenuButton
```jsx
<Menu>
<MenuTrigger>
<MenuButton>Example</MenuButton>
</MenuTrigger>
<MenuPopover>
<MenuList>
<MenuItem>Item a</MenuItem>
<MenuItem>Item b</MenuItem>
</MenuList>
</MenuPopover>
</Menu>
```
### SplitButton
```jsx
<Menu positioning="below-end">
<MenuTrigger>
{(triggerProps: MenuButtonProps) => <SplitButton menuButton={triggerProps}>Example</SplitButton>}
</MenuTrigger>
<MenuPopover>
<MenuList>
<MenuItem>Item a</MenuItem>
<MenuItem>Item b</MenuItem>
</MenuList>
</MenuPopover>
</Menu>
```
### ToggleButton
```jsx
<ToggleButton>Toggle volume</ToggleButton>
<ToggleButton defaultChecked={true}>Toggle volume</ToggleButton>
<ToggleButton checked={true}>Toggle volume</ToggleButton>
<ToggleButton checked={false}>Toggle volume</ToggleButton>
```
See [Fluent UI Storybook](https://react.fluentui.dev/) for more detailed usage examples.
Alternatively, run Storybook locally with:
1. `yarn start`
2. Select `react-button` from the list.
### Specification
See [SPEC.md](./src/components/Button/SPEC.md).
### Migration Guide
If you're upgrading to Fluent UI v9 see [MIGRATION.md](./src/components/Button/MIGRATION.md) for guidance on updating to the latest component implementations.
+272
View File
@@ -0,0 +1,272 @@
/// <reference types="react" />
import type { ARIAButtonSlotProps } from '@fluentui/react-aria';
import type { ComponentProps } from '@fluentui/react-utilities';
import type { ComponentState } from '@fluentui/react-utilities';
import { ForwardRefComponent } from '@fluentui/react-utilities';
import * as React_2 from 'react';
import type { Slot } from '@fluentui/react-utilities';
import type { SlotClassNames } from '@fluentui/react-utilities';
/**
* Buttons give people a way to trigger an action.
*/
export declare const Button: ForwardRefComponent<ButtonProps>;
export declare const buttonClassNames: SlotClassNames<ButtonSlots>;
/**
* @internal
* Internal context provider used to update default values between internal components
*/
export declare const ButtonContextProvider: React_2.Provider<ButtonContextValue | undefined>;
/**
* @internal
* Internal context value used to update default values between internal components
*/
export declare interface ButtonContextValue {
size?: ButtonSize;
}
export declare type ButtonProps = ComponentProps<ButtonSlots> & {
/**
* A button can have its content and borders styled for greater emphasis or to be subtle.
* - 'secondary' (default): Gives emphasis to the button in such a way that it indicates a secondary action.
* - 'primary': Emphasizes the button as a primary action.
* - 'outline': Removes background styling.
* - 'subtle': Minimizes emphasis to blend into the background until hovered or focused.
* - 'transparent': Removes background and border styling.
*
* @default 'secondary'
*/
appearance?: 'secondary' | 'primary' | 'outline' | 'subtle' | 'transparent';
/**
* When set, allows the button to be focusable even when it has been disabled. This is used in scenarios where it
* is important to keep a consistent tab order for screen reader and keyboard users. The primary example of this
* pattern is when the disabled button is in a menu or a commandbar and is seldom used for standalone buttons.
*
* @default false
*/
disabledFocusable?: boolean;
/**
* A button can show that it cannot be interacted with.
*
* @default false
*/
disabled?: boolean;
/**
* A button can format its icon to appear before or after its content.
*
* @default 'before'
*/
iconPosition?: 'before' | 'after';
/**
* A button can be rounded, circular, or square.
*
* @default 'rounded'
*/
shape?: 'rounded' | 'circular' | 'square';
/**
* A button supports different sizes.
*
* @default 'medium'
*/
size?: ButtonSize;
};
/**
* A button supports different sizes.
*/
declare type ButtonSize = 'small' | 'medium' | 'large';
export declare type ButtonSlots = {
/**
* Root of the component that renders as either a `<button>` tag or an `<a>` tag.
*/
root: NonNullable<Slot<ARIAButtonSlotProps<'a'>>>;
/**
* Icon that renders either before or after the `children` as specified by the `iconPosition` prop.
*/
icon?: Slot<'span'>;
};
export declare type ButtonState = ComponentState<ButtonSlots> & Required<Pick<ButtonProps, 'appearance' | 'disabledFocusable' | 'disabled' | 'iconPosition' | 'shape' | 'size'>> & {
/**
* A button can contain only an icon.
*
* @default false
*/
iconOnly: boolean;
};
/**
* CompoundButtons are buttons that can have secondary content that adds extra information to the user.
*/
export declare const CompoundButton: ForwardRefComponent<CompoundButtonProps>;
export declare const compoundButtonClassNames: SlotClassNames<CompoundButtonSlots>;
export declare type CompoundButtonProps = ComponentProps<Partial<CompoundButtonSlots>> & Pick<ButtonProps, 'appearance' | 'disabledFocusable' | 'disabled' | 'iconPosition' | 'shape' | 'size'>;
export declare type CompoundButtonSlots = ButtonSlots & {
/**
* Second line of text that describes the action this button takes.
*/
secondaryContent?: Slot<'span'>;
/**
* Container that wraps the children and the secondaryContent slot.
*/
contentContainer: NonNullable<Slot<'span'>>;
};
export declare type CompoundButtonState = ComponentState<CompoundButtonSlots> & Omit<ButtonState, keyof ButtonSlots | 'components'>;
/**
* MenuButtons are buttons that have a chevron icon after the button contents and are usually clicked to open/close
* menus.
*/
export declare const MenuButton: ForwardRefComponent<MenuButtonProps>;
export declare const menuButtonClassNames: SlotClassNames<MenuButtonSlots>;
export declare type MenuButtonProps = ComponentProps<MenuButtonSlots> & Pick<ButtonProps, 'appearance' | 'disabledFocusable' | 'disabled' | 'shape' | 'size'>;
export declare type MenuButtonSlots = ButtonSlots & {
/**
* Menu icon that indicates that this button has a menu that can be expanded.
*/
menuIcon?: Slot<'span'>;
};
export declare type MenuButtonState = ComponentState<MenuButtonSlots> & Omit<ButtonState, keyof ButtonSlots | 'components' | 'iconPosition'>;
/**
* Renders a Button component by passing the state defined props to the appropriate slots.
*/
declare const renderButton_unstable: (state: ButtonState) => JSX.Element;
export { renderButton_unstable }
export { renderButton_unstable as renderToggleButton_unstable }
/**
* Renders a CompoundButton component by passing the state defined props to the appropriate slots.
*/
export declare const renderCompoundButton_unstable: (state: CompoundButtonState) => JSX.Element;
/**
* Renders a MenuButton component by passing the state defined props to the appropriate slots.
*/
export declare const renderMenuButton_unstable: (state: MenuButtonState) => JSX.Element;
/**
* Renders a SplitButton component by passing the state defined props to the appropriate slots.
*/
export declare const renderSplitButton_unstable: (state: SplitButtonState) => JSX.Element;
/**
* SplitButtons are a grouping of two interactive surfaces where interacting with the first one triggers a primary
* action, while interacting with the second one opens a menu with secondary actions.
*/
export declare const SplitButton: ForwardRefComponent<SplitButtonProps>;
export declare const splitButtonClassNames: SlotClassNames<SplitButtonSlots>;
export declare type SplitButtonProps = ComponentProps<SplitButtonSlots> & Omit<ButtonProps, 'root' | 'as'> & Omit<MenuButtonProps, 'root' | 'as'>;
export declare type SplitButtonSlots = {
/**
* Root of the component that wraps the primary action button and menu button.
*/
root: NonNullable<Slot<'div'>>;
/**
* Button that opens menu with secondary actions in SplitButton.
*/
menuButton?: Slot<typeof MenuButton>;
/**
* Button to perform primary action in SplitButton.
*/
primaryActionButton?: Slot<typeof Button>;
};
export declare type SplitButtonState = ComponentState<SplitButtonSlots> & Omit<ButtonState, 'components' | 'iconOnly' | 'root'> & Omit<MenuButtonState, 'components' | 'iconOnly' | 'root'>;
/**
* ToggleButtons are buttons that toggle between two defined states when triggered.
*/
export declare const ToggleButton: ForwardRefComponent<ToggleButtonProps>;
export declare const toggleButtonClassNames: SlotClassNames<ButtonSlots>;
export declare type ToggleButtonProps = ButtonProps & {
/**
* Defines whether the `ToggleButton` is initially in a checked state or not when rendered.
*
* @default false
*/
defaultChecked?: boolean;
/**
* Defines the controlled checked state of the `ToggleButton`.
* If passed, `ToggleButton` ignores the `defaultChecked` property.
* This should only be used if the checked state is to be controlled at a higher level and there is a plan to pass the
* correct value based on handling `onClick` events and re-rendering.
*
* @default false
*/
checked?: boolean;
};
export declare type ToggleButtonState = ButtonState & Required<Pick<ToggleButtonProps, 'checked'>>;
/**
* Given user props, defines default props for the Button, calls useButtonState, 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 useButton_unstable: (props: ButtonProps, ref: React_2.Ref<HTMLButtonElement | HTMLAnchorElement>) => ButtonState;
/**
* @internal
* Internal context hook used to update default values between internal components
*/
export declare const useButtonContext: () => ButtonContextValue;
export declare const useButtonStyles_unstable: (state: ButtonState) => ButtonState;
/**
* Given user props, defines default props for the CompoundButton, calls useButtonState, and returns processed state.
* @param props - User provided props to the CompoundButton component.
* @param ref - User provided ref to be passed to the CompoundButton component.
*/
export declare const useCompoundButton_unstable: ({ contentContainer, secondaryContent, ...props }: CompoundButtonProps, ref: React_2.Ref<HTMLButtonElement | HTMLAnchorElement>) => CompoundButtonState;
export declare const useCompoundButtonStyles_unstable: (state: CompoundButtonState) => CompoundButtonState;
/**
* Given user props, returns the final state for a MenuButton.
*/
export declare const useMenuButton_unstable: ({ menuIcon, ...props }: MenuButtonProps, ref: React_2.Ref<HTMLButtonElement | HTMLAnchorElement>) => MenuButtonState;
export declare const useMenuButtonStyles_unstable: (state: MenuButtonState) => MenuButtonState;
/**
* Given user props, defines default props for the SplitButton and returns processed state.
* @param props - User provided props to the SplitButton component.
* @param ref - User provided ref to be passed to the SplitButton component.
*/
export declare const useSplitButton_unstable: (props: SplitButtonProps, ref: React_2.Ref<HTMLButtonElement | HTMLAnchorElement>) => SplitButtonState;
export declare const useSplitButtonStyles_unstable: (state: SplitButtonState) => SplitButtonState;
/**
* 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 useToggleButton_unstable: (props: ToggleButtonProps, ref: React_2.Ref<HTMLButtonElement | HTMLAnchorElement>) => ToggleButtonState;
export declare const useToggleButtonStyles_unstable: (state: ToggleButtonState) => ToggleButtonState;
export declare function useToggleState<TToggleButtonProps extends Pick<ToggleButtonProps, 'checked' | 'defaultChecked' | 'disabled' | 'disabledFocusable'>, TButtonState extends Pick<ButtonState, 'root'>, TToggleButtonState extends Pick<ToggleButtonState, 'checked' | 'root'>>(props: TToggleButtonProps, state: TButtonState): TToggleButtonState;
export { }
+28
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, {
Button: function() {
return _index.Button;
},
buttonClassNames: function() {
return _index.buttonClassNames;
},
renderButton_unstable: function() {
return _index.renderButton_unstable;
},
useButtonStyles_unstable: function() {
return _index.useButtonStyles_unstable;
},
useButton_unstable: function() {
return _index.useButton_unstable;
}
});
const _index = require("./components/Button/index");
+1
View File
@@ -0,0 +1 @@
{"version":3,"sources":["../src/Button.tsx"],"sourcesContent":["export type { ButtonProps, ButtonSlots, ButtonState } from './components/Button/index';\nexport {\n Button,\n buttonClassNames,\n renderButton_unstable,\n useButtonStyles_unstable,\n useButton_unstable,\n} from './components/Button/index';\n"],"names":["Button","buttonClassNames","renderButton_unstable","useButtonStyles_unstable","useButton_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAEEA,MAAM;eAANA,aAAM;;IACNC,gBAAgB;eAAhBA,uBAAgB;;IAChBC,qBAAqB;eAArBA,4BAAqB;;IACrBC,wBAAwB;eAAxBA,+BAAwB;;IACxBC,kBAAkB;eAAlBA,yBAAkB;;;uBACb"}
+28
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, {
CompoundButton: function() {
return _index.CompoundButton;
},
compoundButtonClassNames: function() {
return _index.compoundButtonClassNames;
},
renderCompoundButton_unstable: function() {
return _index.renderCompoundButton_unstable;
},
useCompoundButtonStyles_unstable: function() {
return _index.useCompoundButtonStyles_unstable;
},
useCompoundButton_unstable: function() {
return _index.useCompoundButton_unstable;
}
});
const _index = require("./components/CompoundButton/index");
@@ -0,0 +1 @@
{"version":3,"sources":["../src/CompoundButton.ts"],"sourcesContent":["export type { CompoundButtonProps, CompoundButtonSlots, CompoundButtonState } from './components/CompoundButton/index';\nexport {\n CompoundButton,\n compoundButtonClassNames,\n renderCompoundButton_unstable,\n useCompoundButtonStyles_unstable,\n useCompoundButton_unstable,\n} from './components/CompoundButton/index';\n"],"names":["CompoundButton","compoundButtonClassNames","renderCompoundButton_unstable","useCompoundButtonStyles_unstable","useCompoundButton_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAEEA,cAAc;eAAdA,qBAAc;;IACdC,wBAAwB;eAAxBA,+BAAwB;;IACxBC,6BAA6B;eAA7BA,oCAA6B;;IAC7BC,gCAAgC;eAAhCA,uCAAgC;;IAChCC,0BAA0B;eAA1BA,iCAA0B;;;uBACrB"}
+28
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, {
MenuButton: function() {
return _index.MenuButton;
},
menuButtonClassNames: function() {
return _index.menuButtonClassNames;
},
renderMenuButton_unstable: function() {
return _index.renderMenuButton_unstable;
},
useMenuButtonStyles_unstable: function() {
return _index.useMenuButtonStyles_unstable;
},
useMenuButton_unstable: function() {
return _index.useMenuButton_unstable;
}
});
const _index = require("./components/MenuButton/index");
+1
View File
@@ -0,0 +1 @@
{"version":3,"sources":["../src/MenuButton.ts"],"sourcesContent":["export type { MenuButtonProps, MenuButtonSlots, MenuButtonState } from './components/MenuButton/index';\nexport {\n MenuButton,\n menuButtonClassNames,\n renderMenuButton_unstable,\n useMenuButtonStyles_unstable,\n useMenuButton_unstable,\n} from './components/MenuButton/index';\n"],"names":["MenuButton","menuButtonClassNames","renderMenuButton_unstable","useMenuButtonStyles_unstable","useMenuButton_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAEEA,UAAU;eAAVA,iBAAU;;IACVC,oBAAoB;eAApBA,2BAAoB;;IACpBC,yBAAyB;eAAzBA,gCAAyB;;IACzBC,4BAA4B;eAA5BA,mCAA4B;;IAC5BC,sBAAsB;eAAtBA,6BAAsB;;;uBACjB"}
+28
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, {
SplitButton: function() {
return _index.SplitButton;
},
renderSplitButton_unstable: function() {
return _index.renderSplitButton_unstable;
},
splitButtonClassNames: function() {
return _index.splitButtonClassNames;
},
useSplitButtonStyles_unstable: function() {
return _index.useSplitButtonStyles_unstable;
},
useSplitButton_unstable: function() {
return _index.useSplitButton_unstable;
}
});
const _index = require("./components/SplitButton/index");
+1
View File
@@ -0,0 +1 @@
{"version":3,"sources":["../src/SplitButton.ts"],"sourcesContent":["export type { SplitButtonProps, SplitButtonSlots, SplitButtonState } from './components/SplitButton/index';\nexport {\n SplitButton,\n renderSplitButton_unstable,\n splitButtonClassNames,\n useSplitButtonStyles_unstable,\n useSplitButton_unstable,\n} from './components/SplitButton/index';\n"],"names":["SplitButton","renderSplitButton_unstable","splitButtonClassNames","useSplitButtonStyles_unstable","useSplitButton_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAEEA,WAAW;eAAXA,kBAAW;;IACXC,0BAA0B;eAA1BA,iCAA0B;;IAC1BC,qBAAqB;eAArBA,4BAAqB;;IACrBC,6BAA6B;eAA7BA,oCAA6B;;IAC7BC,uBAAuB;eAAvBA,8BAAuB;;;uBAClB"}
+28
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, {
ToggleButton: function() {
return _index.ToggleButton;
},
renderToggleButton_unstable: function() {
return _index.renderToggleButton_unstable;
},
toggleButtonClassNames: function() {
return _index.toggleButtonClassNames;
},
useToggleButtonStyles_unstable: function() {
return _index.useToggleButtonStyles_unstable;
},
useToggleButton_unstable: function() {
return _index.useToggleButton_unstable;
}
});
const _index = require("./components/ToggleButton/index");
+1
View File
@@ -0,0 +1 @@
{"version":3,"sources":["../src/ToggleButton.ts"],"sourcesContent":["export type { ToggleButtonProps, ToggleButtonState } from './components/ToggleButton/index';\nexport {\n ToggleButton,\n renderToggleButton_unstable,\n toggleButtonClassNames,\n useToggleButtonStyles_unstable,\n useToggleButton_unstable,\n} from './components/ToggleButton/index';\n"],"names":["ToggleButton","renderToggleButton_unstable","toggleButtonClassNames","useToggleButtonStyles_unstable","useToggleButton_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAEEA,YAAY;eAAZA,mBAAY;;IACZC,2BAA2B;eAA3BA,kCAA2B;;IAC3BC,sBAAsB;eAAtBA,6BAAsB;;IACtBC,8BAA8B;eAA9BA,qCAA8B;;IAC9BC,wBAAwB;eAAxBA,+BAAwB;;;uBACnB"}
@@ -0,0 +1,24 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "Button", {
enumerable: true,
get: function() {
return Button;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _renderButton = require("./renderButton");
const _useButton = require("./useButton");
const _useButtonStylesstyles = require("./useButtonStyles.styles");
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
const Button = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
const state = (0, _useButton.useButton_unstable)(props, ref);
(0, _useButtonStylesstyles.useButtonStyles_unstable)(state);
(0, _reactsharedcontexts.useCustomStyleHook_unstable)('useButtonStyles_unstable')(state);
return (0, _renderButton.renderButton_unstable)(state);
// Casting is required due to lack of distributive union to support unions on @types/react
});
Button.displayName = 'Button';
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Button/Button.tsx"],"sourcesContent":["import * as React from 'react';\nimport { renderButton_unstable } from './renderButton';\nimport { useButton_unstable } from './useButton';\nimport { useButtonStyles_unstable } from './useButtonStyles.styles';\nimport type { ButtonProps } from './Button.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * Buttons give people a way to trigger an action.\n */\nexport const Button: ForwardRefComponent<ButtonProps> = React.forwardRef((props, ref) => {\n const state = useButton_unstable(props, ref);\n\n useButtonStyles_unstable(state);\n\n useCustomStyleHook_unstable('useButtonStyles_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<ButtonProps>;\n\nButton.displayName = 'Button';\n"],"names":["Button","React","forwardRef","props","ref","state","useButton_unstable","useButtonStyles_unstable","useCustomStyleHook_unstable","renderButton_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAWaA;;;eAAAA;;;;iEAXU;8BACe;2BACH;uCACM;qCAGG;AAKrC,MAAMA,SAAAA,WAAAA,GAA2CC,OAAMC,UAAU,CAAC,CAACC,OAAOC;IAC/E,MAAMC,QAAQC,IAAAA,6BAAAA,EAAmBH,OAAOC;IAExCG,IAAAA,+CAAAA,EAAyBF;IAEzBG,IAAAA,gDAAAA,EAA4B,4BAA4BH;IAExD,OAAOI,IAAAA,mCAAAA,EAAsBJ;AAC7B,0FAA0F;AAC5F;AAEAL,OAAOU,WAAW,GAAG"}
@@ -0,0 +1,4 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Button/Button.types.ts"],"sourcesContent":["import type { ARIAButtonSlotProps } from '@fluentui/react-aria';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type ButtonSlots = {\n /**\n * Root of the component that renders as either a `<button>` tag or an `<a>` tag.\n */\n root: NonNullable<Slot<ARIAButtonSlotProps<'a'>>>;\n\n /**\n * Icon that renders either before or after the `children` as specified by the `iconPosition` prop.\n */\n icon?: Slot<'span'>;\n};\n\n/**\n * A button supports different sizes.\n */\nexport type ButtonSize = 'small' | 'medium' | 'large';\n\nexport type ButtonProps = ComponentProps<ButtonSlots> & {\n /**\n * A button can have its content and borders styled for greater emphasis or to be subtle.\n * - 'secondary' (default): Gives emphasis to the button in such a way that it indicates a secondary action.\n * - 'primary': Emphasizes the button as a primary action.\n * - 'outline': Removes background styling.\n * - 'subtle': Minimizes emphasis to blend into the background until hovered or focused.\n * - 'transparent': Removes background and border styling.\n *\n * @default 'secondary'\n */\n appearance?: 'secondary' | 'primary' | 'outline' | 'subtle' | 'transparent';\n\n /**\n * When set, allows the button to be focusable even when it has been disabled. This is used in scenarios where it\n * is important to keep a consistent tab order for screen reader and keyboard users. The primary example of this\n * pattern is when the disabled button is in a menu or a commandbar and is seldom used for standalone buttons.\n *\n * @default false\n */\n disabledFocusable?: boolean;\n\n /**\n * A button can show that it cannot be interacted with.\n *\n * @default false\n */\n disabled?: boolean;\n\n /**\n * A button can format its icon to appear before or after its content.\n *\n * @default 'before'\n */\n iconPosition?: 'before' | 'after';\n\n /**\n * A button can be rounded, circular, or square.\n *\n * @default 'rounded'\n */\n shape?: 'rounded' | 'circular' | 'square';\n\n /**\n * A button supports different sizes.\n *\n * @default 'medium'\n */\n size?: ButtonSize;\n};\n\nexport type ButtonState = ComponentState<ButtonSlots> &\n Required<Pick<ButtonProps, 'appearance' | 'disabledFocusable' | 'disabled' | 'iconPosition' | 'shape' | 'size'>> & {\n /**\n * A button can contain only an icon.\n *\n * @default false\n */\n iconOnly: boolean;\n };\n"],"names":[],"rangeMappings":"","mappings":""}
@@ -0,0 +1,31 @@
"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, {
Button: function() {
return _Button.Button;
},
buttonClassNames: function() {
return _useButtonStylesstyles.buttonClassNames;
},
renderButton_unstable: function() {
return _renderButton.renderButton_unstable;
},
useButtonStyles_unstable: function() {
return _useButtonStylesstyles.useButtonStyles_unstable;
},
useButton_unstable: function() {
return _useButton.useButton_unstable;
}
});
const _Button = require("./Button");
const _renderButton = require("./renderButton");
const _useButton = require("./useButton");
const _useButtonStylesstyles = require("./useButtonStyles.styles");
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Button/index.ts"],"sourcesContent":["export { Button } from './Button';\n// Explicit exports to omit ButtonCommons\nexport type { ButtonProps, ButtonSlots, ButtonState } from './Button.types';\nexport { renderButton_unstable } from './renderButton';\nexport { useButton_unstable } from './useButton';\nexport { buttonClassNames, useButtonStyles_unstable } from './useButtonStyles.styles';\n"],"names":["Button","buttonClassNames","renderButton_unstable","useButtonStyles_unstable","useButton_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAASA,MAAM;eAANA,cAAM;;IAKNC,gBAAgB;eAAhBA,uCAAgB;;IAFhBC,qBAAqB;eAArBA,mCAAqB;;IAEHC,wBAAwB;eAAxBA,+CAAwB;;IAD1CC,kBAAkB;eAAlBA,6BAAkB;;;wBAJJ;8BAGe;2BACH;uCACwB"}
@@ -0,0 +1,23 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "renderButton_unstable", {
enumerable: true,
get: function() {
return renderButton_unstable;
}
});
const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
const _reactutilities = require("@fluentui/react-utilities");
const renderButton_unstable = (state)=>{
(0, _reactutilities.assertSlots)(state);
const { iconOnly, iconPosition } = state;
return /*#__PURE__*/ (0, _jsxruntime.jsxs)(state.root, {
children: [
iconPosition !== 'after' && state.icon && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.icon, {}),
!iconOnly && state.root.children,
iconPosition === 'after' && state.icon && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.icon, {})
]
});
};
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Button/renderButton.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { ButtonSlots, ButtonState } from './Button.types';\n\n/**\n * Renders a Button component by passing the state defined props to the appropriate slots.\n */\nexport const renderButton_unstable = (state: ButtonState) => {\n assertSlots<ButtonSlots>(state);\n const { iconOnly, iconPosition } = state;\n\n return (\n <state.root>\n {iconPosition !== 'after' && state.icon && <state.icon />}\n {!iconOnly && state.root.children}\n {iconPosition === 'after' && state.icon && <state.icon />}\n </state.root>\n );\n};\n"],"names":["renderButton_unstable","state","assertSlots","iconOnly","iconPosition","_jsxs","root","icon","_jsx","children"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BASaA;;;eAAAA;;;4BARb;gCAE4B;AAMrB,MAAMA,wBAAwB,CAACC;IACpCC,IAAAA,2BAAAA,EAAyBD;IACzB,MAAM,EAAEE,QAAQ,EAAEC,YAAY,EAAE,GAAGH;IAEnC,OAAA,WAAA,GACEI,IAAAA,gBAAA,EAACJ,MAAMK,IAAI,EAAA;;YACRF,iBAAiB,WAAWH,MAAMM,IAAI,IAAA,WAAA,GAAIC,IAAAA,eAAA,EAACP,MAAMM,IAAI,EAAA,CAAA;YACrD,CAACJ,YAAYF,MAAMK,IAAI,CAACG,QAAQ;YAChCL,iBAAiB,WAAWH,MAAMM,IAAI,IAAA,WAAA,GAAIC,IAAAA,eAAA,EAACP,MAAMM,IAAI,EAAA,CAAA;;;AAG5D"}
@@ -0,0 +1,44 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "useButton_unstable", {
enumerable: true,
get: function() {
return useButton_unstable;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _reactaria = require("@fluentui/react-aria");
const _reactutilities = require("@fluentui/react-utilities");
const _ButtonContext = require("../../contexts/ButtonContext");
const useButton_unstable = (props, ref)=>{
const { size: contextSize } = (0, _ButtonContext.useButtonContext)();
const { appearance = 'secondary', as = 'button', disabled = false, disabledFocusable = false, icon, iconPosition = 'before', shape = 'rounded', size = contextSize !== null && contextSize !== void 0 ? contextSize : 'medium' } = props;
const iconShorthand = _reactutilities.slot.optional(icon, {
elementType: 'span'
});
return {
// Props passed at the top-level
appearance,
disabled,
disabledFocusable,
iconPosition,
shape,
size,
iconOnly: Boolean((iconShorthand === null || iconShorthand === void 0 ? void 0 : iconShorthand.children) && !props.children),
components: {
root: 'button',
icon: 'span'
},
root: _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)(as, (0, _reactaria.useARIAButtonProps)(props.as, props)), {
elementType: 'button',
defaultProps: {
ref: ref,
type: as === 'button' ? 'button' : undefined
}
}),
icon: iconShorthand
};
};
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Button/useButton.ts"],"sourcesContent":["import * as React from 'react';\nimport { ARIAButtonSlotProps, useARIAButtonProps } from '@fluentui/react-aria';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport { useButtonContext } from '../../contexts/ButtonContext';\nimport type { ButtonProps, ButtonState } from './Button.types';\n\n/**\n * Given user props, defines default props for the Button, calls useButtonState, and returns 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 useButton_unstable = (\n props: ButtonProps,\n ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): ButtonState => {\n const { size: contextSize } = useButtonContext();\n const {\n appearance = 'secondary',\n as = 'button',\n disabled = false,\n disabledFocusable = false,\n icon,\n iconPosition = 'before',\n shape = 'rounded',\n size = contextSize ?? 'medium',\n } = props;\n const iconShorthand = slot.optional(icon, { elementType: 'span' });\n return {\n // Props passed at the top-level\n appearance,\n disabled,\n disabledFocusable,\n iconPosition,\n shape,\n size, // State calculated from a set of props\n iconOnly: Boolean(iconShorthand?.children && !props.children), // Slots definition\n components: { root: 'button', icon: 'span' },\n root: slot.always<ARIAButtonSlotProps<'a'>>(getIntrinsicElementProps(as, useARIAButtonProps(props.as, props)), {\n elementType: 'button',\n defaultProps: {\n ref: ref as React.Ref<HTMLButtonElement & HTMLAnchorElement>,\n type: as === 'button' ? 'button' : undefined,\n },\n }),\n icon: iconShorthand,\n };\n};\n"],"names":["useButton_unstable","props","ref","size","contextSize","useButtonContext","appearance","as","disabled","disabledFocusable","icon","iconPosition","shape","iconShorthand","slot","optional","elementType","iconOnly","Boolean","children","components","root","always","getIntrinsicElementProps","useARIAButtonProps","defaultProps","type","undefined"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAWaA;;;eAAAA;;;;iEAXU;2BACiC;gCACT;+BACd;AAQ1B,MAAMA,qBAAqB,CAChCC,OACAC;IAEA,MAAM,EAAEC,MAAMC,WAAW,EAAE,GAAGC,IAAAA,+BAAAA;IAC9B,MAAM,EACJC,aAAa,WAAW,EACxBC,KAAK,QAAQ,EACbC,WAAW,KAAK,EAChBC,oBAAoB,KAAK,EACzBC,IAAI,EACJC,eAAe,QAAQ,EACvBC,QAAQ,SAAS,EACjBT,OAAOC,gBAAAA,QAAAA,gBAAAA,KAAAA,IAAAA,cAAe,QAAQ,EAC/B,GAAGH;IACJ,MAAMY,gBAAgBC,oBAAAA,CAAKC,QAAQ,CAACL,MAAM;QAAEM,aAAa;IAAO;IAChE,OAAO;QACL,gCAAgC;QAChCV;QACAE;QACAC;QACAE;QACAC;QACAT;QACAc,UAAUC,QAAQL,CAAAA,kBAAAA,QAAAA,kBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,cAAeM,QAAQ,AAARA,KAAY,CAAClB,MAAMkB,QAAQ;QAC5DC,YAAY;YAAEC,MAAM;YAAUX,MAAM;QAAO;QAC3CW,MAAMP,oBAAAA,CAAKQ,MAAM,CAA2BC,IAAAA,wCAAAA,EAAyBhB,IAAIiB,IAAAA,6BAAAA,EAAmBvB,MAAMM,EAAE,EAAEN,SAAS;YAC7Ge,aAAa;YACbS,cAAc;gBACZvB,KAAKA;gBACLwB,MAAMnB,OAAO,WAAW,WAAWoB;YACrC;QACF;QACAjB,MAAMG;IACR;AACF"}
File diff suppressed because it is too large Load Diff
File diff suppressed because one or more lines are too long
@@ -0,0 +1,24 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "CompoundButton", {
enumerable: true,
get: function() {
return CompoundButton;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _renderCompoundButton = require("./renderCompoundButton");
const _useCompoundButton = require("./useCompoundButton");
const _useCompoundButtonStylesstyles = require("./useCompoundButtonStyles.styles");
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
const CompoundButton = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
const state = (0, _useCompoundButton.useCompoundButton_unstable)(props, ref);
(0, _useCompoundButtonStylesstyles.useCompoundButtonStyles_unstable)(state);
(0, _reactsharedcontexts.useCustomStyleHook_unstable)('useCompoundButtonStyles_unstable')(state);
return (0, _renderCompoundButton.renderCompoundButton_unstable)(state);
// Casting is required due to lack of distributive union to support unions on @types/react
});
CompoundButton.displayName = 'CompoundButton';
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/CompoundButton/CompoundButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { renderCompoundButton_unstable } from './renderCompoundButton';\nimport { useCompoundButton_unstable } from './useCompoundButton';\nimport { useCompoundButtonStyles_unstable } from './useCompoundButtonStyles.styles';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport type { CompoundButtonProps } from './CompoundButton.types';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * CompoundButtons are buttons that can have secondary content that adds extra information to the user.\n */\nexport const CompoundButton: ForwardRefComponent<CompoundButtonProps> = React.forwardRef((props, ref) => {\n const state = useCompoundButton_unstable(props, ref);\n\n useCompoundButtonStyles_unstable(state);\n\n useCustomStyleHook_unstable('useCompoundButtonStyles_unstable')(state);\n\n return renderCompoundButton_unstable(state);\n // Casting is required due to lack of distributive union to support unions on @types/react\n}) as ForwardRefComponent<CompoundButtonProps>;\n\nCompoundButton.displayName = 'CompoundButton';\n"],"names":["CompoundButton","React","forwardRef","props","ref","state","useCompoundButton_unstable","useCompoundButtonStyles_unstable","useCustomStyleHook_unstable","renderCompoundButton_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAWaA;;;eAAAA;;;;iEAXU;sCACuB;mCACH;+CACM;qCAGL;AAKrC,MAAMA,iBAAAA,WAAAA,GAA2DC,OAAMC,UAAU,CAAC,CAACC,OAAOC;IAC/F,MAAMC,QAAQC,IAAAA,6CAAAA,EAA2BH,OAAOC;IAEhDG,IAAAA,+DAAAA,EAAiCF;IAEjCG,IAAAA,gDAAAA,EAA4B,oCAAoCH;IAEhE,OAAOI,IAAAA,mDAAAA,EAA8BJ;AACrC,0FAA0F;AAC5F;AAEAL,eAAeU,WAAW,GAAG"}
@@ -0,0 +1,4 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/CompoundButton/CompoundButton.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { ButtonProps, ButtonSlots, ButtonState } from '../Button/Button.types';\n\nexport type CompoundButtonSlots = ButtonSlots & {\n /**\n * Second line of text that describes the action this button takes.\n */\n secondaryContent?: Slot<'span'>;\n\n /**\n * Container that wraps the children and the secondaryContent slot.\n */\n contentContainer: NonNullable<Slot<'span'>>;\n};\n\nexport type CompoundButtonProps = ComponentProps<Partial<CompoundButtonSlots>> &\n Pick<ButtonProps, 'appearance' | 'disabledFocusable' | 'disabled' | 'iconPosition' | 'shape' | 'size'>;\n\nexport type CompoundButtonState = ComponentState<CompoundButtonSlots> &\n Omit<ButtonState, keyof ButtonSlots | 'components'>;\n"],"names":[],"rangeMappings":"","mappings":""}
@@ -0,0 +1,31 @@
"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, {
CompoundButton: function() {
return _CompoundButton.CompoundButton;
},
compoundButtonClassNames: function() {
return _useCompoundButtonStylesstyles.compoundButtonClassNames;
},
renderCompoundButton_unstable: function() {
return _renderCompoundButton.renderCompoundButton_unstable;
},
useCompoundButtonStyles_unstable: function() {
return _useCompoundButtonStylesstyles.useCompoundButtonStyles_unstable;
},
useCompoundButton_unstable: function() {
return _useCompoundButton.useCompoundButton_unstable;
}
});
const _CompoundButton = require("./CompoundButton");
const _renderCompoundButton = require("./renderCompoundButton");
const _useCompoundButton = require("./useCompoundButton");
const _useCompoundButtonStylesstyles = require("./useCompoundButtonStyles.styles");
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/CompoundButton/index.ts"],"sourcesContent":["export { CompoundButton } from './CompoundButton';\nexport type { CompoundButtonProps, CompoundButtonSlots, CompoundButtonState } from './CompoundButton.types';\nexport { renderCompoundButton_unstable } from './renderCompoundButton';\nexport { useCompoundButton_unstable } from './useCompoundButton';\nexport { compoundButtonClassNames, useCompoundButtonStyles_unstable } from './useCompoundButtonStyles.styles';\n"],"names":["CompoundButton","compoundButtonClassNames","renderCompoundButton_unstable","useCompoundButtonStyles_unstable","useCompoundButton_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAASA,cAAc;eAAdA,8BAAc;;IAIdC,wBAAwB;eAAxBA,uDAAwB;;IAFxBC,6BAA6B;eAA7BA,mDAA6B;;IAEHC,gCAAgC;eAAhCA,+DAAgC;;IAD1DC,0BAA0B;eAA1BA,6CAA0B;;;gCAHJ;sCAEe;mCACH;+CACgC"}
@@ -0,0 +1,28 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "renderCompoundButton_unstable", {
enumerable: true,
get: function() {
return renderCompoundButton_unstable;
}
});
const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
const _reactutilities = require("@fluentui/react-utilities");
const renderCompoundButton_unstable = (state)=>{
(0, _reactutilities.assertSlots)(state);
const { iconOnly, iconPosition } = state;
return /*#__PURE__*/ (0, _jsxruntime.jsxs)(state.root, {
children: [
iconPosition !== 'after' && state.icon && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.icon, {}),
!iconOnly && /*#__PURE__*/ (0, _jsxruntime.jsxs)(state.contentContainer, {
children: [
state.root.children,
state.secondaryContent && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.secondaryContent, {})
]
}),
iconPosition === 'after' && state.icon && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.icon, {})
]
});
};
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/CompoundButton/renderCompoundButton.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { CompoundButtonSlots, CompoundButtonState } from './CompoundButton.types';\n\n/**\n * Renders a CompoundButton component by passing the state defined props to the appropriate slots.\n */\nexport const renderCompoundButton_unstable = (state: CompoundButtonState) => {\n assertSlots<CompoundButtonSlots>(state);\n const { iconOnly, iconPosition } = state;\n\n return (\n <state.root>\n {iconPosition !== 'after' && state.icon && <state.icon />}\n {!iconOnly && (\n <state.contentContainer>\n {state.root.children}\n {state.secondaryContent && <state.secondaryContent />}\n </state.contentContainer>\n )}\n\n {iconPosition === 'after' && state.icon && <state.icon />}\n </state.root>\n );\n};\n"],"names":["renderCompoundButton_unstable","state","assertSlots","iconOnly","iconPosition","_jsxs","root","icon","_jsx","contentContainer","children","secondaryContent"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BASaA;;;eAAAA;;;4BARb;gCAE4B;AAMrB,MAAMA,gCAAgC,CAACC;IAC5CC,IAAAA,2BAAAA,EAAiCD;IACjC,MAAM,EAAEE,QAAQ,EAAEC,YAAY,EAAE,GAAGH;IAEnC,OAAA,WAAA,GACEI,IAAAA,gBAAA,EAACJ,MAAMK,IAAI,EAAA;;YACRF,iBAAiB,WAAWH,MAAMM,IAAI,IAAA,WAAA,GAAIC,IAAAA,eAAA,EAACP,MAAMM,IAAI,EAAA,CAAA;YACrD,CAACJ,YAAAA,WAAAA,GACAE,IAAAA,gBAAA,EAACJ,MAAMQ,gBAAgB,EAAA;;oBACpBR,MAAMK,IAAI,CAACI,QAAQ;oBACnBT,MAAMU,gBAAgB,IAAA,WAAA,GAAIH,IAAAA,eAAA,EAACP,MAAMU,gBAAgB,EAAA,CAAA;;;YAIrDP,iBAAiB,WAAWH,MAAMM,IAAI,IAAA,WAAA,GAAIC,IAAAA,eAAA,EAACP,MAAMM,IAAI,EAAA,CAAA;;;AAG5D"}
@@ -0,0 +1,37 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "useCompoundButton_unstable", {
enumerable: true,
get: function() {
return useCompoundButton_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 _index = require("../Button/index");
const useCompoundButton_unstable = ({ contentContainer, secondaryContent, ...props }, ref)=>{
var _state_icon, _state_secondaryContent;
const state = {
// Button state
...(0, _index.useButton_unstable)(props, ref),
// Slots definition
components: {
root: 'button',
icon: 'span',
contentContainer: 'span',
secondaryContent: 'span'
},
contentContainer: _reactutilities.slot.always(contentContainer, {
elementType: 'span'
}),
secondaryContent: _reactutilities.slot.optional(secondaryContent, {
elementType: 'span'
})
};
// Recalculate iconOnly to take into account secondaryContent.
state.iconOnly = Boolean(((_state_icon = state.icon) === null || _state_icon === void 0 ? void 0 : _state_icon.children) && !props.children && !((_state_secondaryContent = state.secondaryContent) === null || _state_secondaryContent === void 0 ? void 0 : _state_secondaryContent.children));
return state;
};
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/CompoundButton/useCompoundButton.ts"],"sourcesContent":["import * as React from 'react';\nimport { slot } from '@fluentui/react-utilities';\nimport { useButton_unstable } from '../Button/index';\nimport type { CompoundButtonProps, CompoundButtonState } from './CompoundButton.types';\n\n/**\n * Given user props, defines default props for the CompoundButton, calls useButtonState, and returns processed state.\n * @param props - User provided props to the CompoundButton component.\n * @param ref - User provided ref to be passed to the CompoundButton component.\n */\nexport const useCompoundButton_unstable = (\n { contentContainer, secondaryContent, ...props }: CompoundButtonProps,\n ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): CompoundButtonState => {\n const state: CompoundButtonState = {\n // Button state\n ...useButton_unstable(props, ref),\n\n // Slots definition\n components: {\n root: 'button',\n icon: 'span',\n contentContainer: 'span',\n secondaryContent: 'span',\n },\n contentContainer: slot.always(contentContainer, { elementType: 'span' }),\n secondaryContent: slot.optional(secondaryContent, { elementType: 'span' }),\n };\n\n // Recalculate iconOnly to take into account secondaryContent.\n state.iconOnly = Boolean(state.icon?.children && !props.children && !state.secondaryContent?.children);\n\n return state;\n};\n"],"names":["useCompoundButton_unstable","contentContainer","secondaryContent","props","ref","state","useButton_unstable","components","root","icon","slot","always","elementType","optional","iconOnly","Boolean","children"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAUaA;;;eAAAA;;;;iEAVU;gCACF;uBACc;AAQ5B,MAAMA,6BAA6B,CACxC,EAAEC,gBAAgB,EAAEC,gBAAgB,EAAE,GAAGC,OAA4B,EACrEC;QAkByBC,aAA4CA;IAhBrE,MAAMA,QAA6B;QACjC,eAAe;QACf,GAAGC,IAAAA,yBAAAA,EAAmBH,OAAOC,IAAI;QAEjC,mBAAmB;QACnBG,YAAY;YACVC,MAAM;YACNC,MAAM;YACNR,kBAAkB;YAClBC,kBAAkB;QACpB;QACAD,kBAAkBS,oBAAAA,CAAKC,MAAM,CAACV,kBAAkB;YAAEW,aAAa;QAAO;QACtEV,kBAAkBQ,oBAAAA,CAAKG,QAAQ,CAACX,kBAAkB;YAAEU,aAAa;QAAO;IAC1E;IAEA,8DAA8D;IAC9DP,MAAMS,QAAQ,GAAGC,QAAQV,CAAAA,CAAAA,cAAAA,MAAMI,IAAI,AAAJA,MAAI,QAAVJ,gBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,YAAYW,QAAQ,AAARA,KAAY,CAACb,MAAMa,QAAQ,IAAI,CAAA,CAAA,AAACX,CAAAA,0BAAAA,MAAMH,gBAAgB,AAAhBA,MAAgB,QAAtBG,4BAAAA,KAAAA,IAAAA,KAAAA,IAAAA,wBAAwBW,QAAQ,AAARA;IAE7F,OAAOX;AACT"}
@@ -0,0 +1,329 @@
"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, {
compoundButtonClassNames: function() {
return compoundButtonClassNames;
},
useCompoundButtonStyles_unstable: function() {
return useCompoundButtonStyles_unstable;
}
});
const _react = require("@griffel/react");
const _useButtonStylesstyles = require("../Button/useButtonStyles.styles");
const compoundButtonClassNames = {
root: 'fui-CompoundButton',
icon: 'fui-CompoundButton__icon',
contentContainer: 'fui-CompoundButton__contentContainer',
secondaryContent: 'fui-CompoundButton__secondaryContent'
};
const useRootStyles = /*#__PURE__*/ (0, _react.__styles)({
base: {
Bqenvij: "f11ysow2",
J657lq: "f1um431h",
Jlnjib: "fte7hqw",
Bc29nj9: "f1yh8ef3"
},
highContrast: {
pu7qz5: "fi3u9nm",
B10010i: "f1tdgb9w"
},
outline: {},
primary: {
J657lq: "foe7gw6",
Jlnjib: "fvxlz81",
Bc29nj9: "f1c2mdy",
B8ia98v: "f1r39r2s"
},
secondary: {},
subtle: {
J657lq: "f1um431h",
Jlnjib: "fte7hqw",
Bc29nj9: "f1yh8ef3",
pu7qz5: "f1xoeh18",
B10010i: "f1ca1nd7"
},
transparent: {
J657lq: "f1um431h",
Jlnjib: "f1wn9xqz",
Bc29nj9: "f1a8q4d0"
},
small: {
Byoj8tv: 0,
uwmqm3: 0,
z189sj: 0,
z8tnut: 0,
B0ocmuz: "f1ge6w2w",
Be2twd7: "fkhj508",
Bg96gwp: "f1i3iumi"
},
medium: {
Byoj8tv: 0,
uwmqm3: 0,
z189sj: 0,
z8tnut: 0,
B0ocmuz: "fnnf4v2",
Be2twd7: "fkhj508",
Bg96gwp: "f1i3iumi"
},
large: {
Byoj8tv: 0,
uwmqm3: 0,
z189sj: 0,
z8tnut: 0,
B0ocmuz: "f14s4sho",
Be2twd7: "fod5ikn",
Bg96gwp: "faaz57k"
},
disabled: {
J657lq: "f1rlv8bf",
Jlnjib: "fd1dbtm",
Bc29nj9: "f1vqmdmi"
},
disabledHighContrast: {
B8ia98v: "f1csacz4",
pu7qz5: "f1s5tkfe",
B10010i: "fs0rda3"
}
}, {
d: [
".f11ysow2{height:auto;}",
".f1um431h .fui-CompoundButton__secondaryContent{color:var(--colorNeutralForeground2);}",
".foe7gw6 .fui-CompoundButton__secondaryContent{color:var(--colorNeutralForegroundOnBrand);}",
[
".f1ge6w2w{padding:var(--spacingHorizontalS) var(--spacingHorizontalS) var(--spacingHorizontalMNudge) var(--spacingHorizontalS);}",
{
p: -1
}
],
".fkhj508{font-size:var(--fontSizeBase300);}",
".f1i3iumi{line-height:var(--lineHeightBase300);}",
[
".fnnf4v2{padding:14px var(--spacingHorizontalM) var(--spacingHorizontalL) var(--spacingHorizontalM);}",
{
p: -1
}
],
[
".f14s4sho{padding:18px var(--spacingHorizontalL) var(--spacingHorizontalXL) var(--spacingHorizontalL);}",
{
p: -1
}
],
".fod5ikn{font-size:var(--fontSizeBase400);}",
".faaz57k{line-height:var(--lineHeightBase400);}",
".f1rlv8bf .fui-CompoundButton__secondaryContent{color:var(--colorNeutralForegroundDisabled);}"
],
h: [
".fte7hqw:hover .fui-CompoundButton__secondaryContent{color:var(--colorNeutralForeground2Hover);}",
".f1yh8ef3:hover:active .fui-CompoundButton__secondaryContent{color:var(--colorNeutralForeground2Pressed);}",
".fvxlz81:hover .fui-CompoundButton__secondaryContent{color:var(--colorNeutralForegroundOnBrand);}",
".f1c2mdy:hover:active .fui-CompoundButton__secondaryContent{color:var(--colorNeutralForegroundOnBrand);}",
".f1wn9xqz:hover .fui-CompoundButton__secondaryContent{color:var(--colorNeutralForeground2BrandHover);}",
".f1a8q4d0:hover:active .fui-CompoundButton__secondaryContent{color:var(--colorNeutralForeground2BrandPressed);}",
".fd1dbtm:hover .fui-CompoundButton__secondaryContent{color:var(--colorNeutralForegroundDisabled);}",
".f1vqmdmi:hover:active .fui-CompoundButton__secondaryContent{color:var(--colorNeutralForegroundDisabled);}"
],
m: [
[
"@media (forced-colors: active){.fi3u9nm:hover .fui-CompoundButton__secondaryContent{color:Highlight;}}",
{
m: "(forced-colors: active)"
}
],
[
"@media (forced-colors: active){.f1tdgb9w:hover:active .fui-CompoundButton__secondaryContent{color:Highlight;}}",
{
m: "(forced-colors: active)"
}
],
[
"@media (forced-colors: active){.f1r39r2s .fui-CompoundButton__secondaryContent{color:HighlightText;}}",
{
m: "(forced-colors: active)"
}
],
[
"@media (forced-colors: active){.f1xoeh18:hover .fui-CompoundButton__secondaryContent{color:Canvas;}}",
{
m: "(forced-colors: active)"
}
],
[
"@media (forced-colors: active){.f1ca1nd7:hover:active .fui-CompoundButton__secondaryContent{color:Canvas;}}",
{
m: "(forced-colors: active)"
}
],
[
"@media (forced-colors: active){.f1csacz4 .fui-CompoundButton__secondaryContent{color:GrayText;}}",
{
m: "(forced-colors: active)"
}
],
[
"@media (forced-colors: active){.f1s5tkfe:hover .fui-CompoundButton__secondaryContent{color:GrayText;}}",
{
m: "(forced-colors: active)"
}
],
[
"@media (forced-colors: active){.fs0rda3:hover:active .fui-CompoundButton__secondaryContent{color:GrayText;}}",
{
m: "(forced-colors: active)"
}
]
]
});
const useRootIconOnlyStyles = /*#__PURE__*/ (0, _react.__styles)({
small: {
Byoj8tv: 0,
uwmqm3: 0,
z189sj: 0,
z8tnut: 0,
B0ocmuz: "f1t35pdg",
B2u0y6b: "ft5vyj6",
Bf4jedk: "f17suaiq"
},
medium: {
Byoj8tv: 0,
uwmqm3: 0,
z189sj: 0,
z8tnut: 0,
B0ocmuz: "f1r1wyb6",
B2u0y6b: "fdczgix",
Bf4jedk: "fjdcg9m"
},
large: {
Byoj8tv: 0,
uwmqm3: 0,
z189sj: 0,
z8tnut: 0,
B0ocmuz: "f1bnz8pu",
B2u0y6b: "fww51uw",
Bf4jedk: "f1qhsl2h"
}
}, {
d: [
[
".f1t35pdg{padding:var(--spacingHorizontalXS);}",
{
p: -1
}
],
".ft5vyj6{max-width:48px;}",
".f17suaiq{min-width:48px;}",
[
".f1r1wyb6{padding:var(--spacingHorizontalSNudge);}",
{
p: -1
}
],
".fdczgix{max-width:52px;}",
".fjdcg9m{min-width:52px;}",
[
".f1bnz8pu{padding:var(--spacingHorizontalS);}",
{
p: -1
}
],
".fww51uw{max-width:56px;}",
".f1qhsl2h{min-width:56px;}"
]
});
const useIconStyles = /*#__PURE__*/ (0, _react.__styles)({
base: {
Be2twd7: "fndrnj9",
Bqenvij: "fbhnoac",
a9b677: "feqmc2u"
},
before: {
t21cq0: [
"fkujibs",
"f199hnxi"
]
},
after: {
Frg6f3: [
"f199hnxi",
"fkujibs"
]
}
}, {
d: [
".fndrnj9{font-size:40px;}",
".fbhnoac{height:40px;}",
".feqmc2u{width:40px;}",
".fkujibs{margin-right:var(--spacingHorizontalM);}",
".f199hnxi{margin-left:var(--spacingHorizontalM);}"
]
});
const useContentContainerStyles = /*#__PURE__*/ (0, _react.__styles)({
base: {
mc9l5x: "f22iagw",
Beiy3e4: "f1vx9l62",
fsow6f: [
"f1o700av",
"fes3tcz"
]
}
}, {
d: [
".f22iagw{display:flex;}",
".f1vx9l62{flex-direction:column;}",
".f1o700av{text-align:left;}",
".fes3tcz{text-align:right;}"
]
});
const useSecondaryContentStyles = /*#__PURE__*/ (0, _react.__styles)({
base: {
Bg96gwp: "flkuc6h",
Bhrd7zp: "figsok6"
},
small: {
Be2twd7: "fy9rknc"
},
medium: {
Be2twd7: "fy9rknc"
},
large: {
Be2twd7: "fkhj508"
}
}, {
d: [
".flkuc6h{line-height:100%;}",
".figsok6{font-weight:var(--fontWeightRegular);}",
".fy9rknc{font-size:var(--fontSizeBase200);}",
".fkhj508{font-size:var(--fontSizeBase300);}"
]
});
const useCompoundButtonStyles_unstable = (state)=>{
'use no memo';
const rootStyles = useRootStyles();
const rootIconOnlyStyles = useRootIconOnlyStyles();
const iconStyles = useIconStyles();
const contentContainerStyles = useContentContainerStyles();
const secondaryContentStyles = useSecondaryContentStyles();
const { appearance, disabled, disabledFocusable, iconOnly, iconPosition, size } = state;
state.root.className = (0, _react.mergeClasses)(compoundButtonClassNames.root, // Root styles
rootStyles.base, rootStyles.highContrast, appearance && rootStyles[appearance], rootStyles[size], // Disabled styles
(disabled || disabledFocusable) && rootStyles.disabled, (disabled || disabledFocusable) && rootStyles.disabledHighContrast, // Icon-only styles
iconOnly && rootIconOnlyStyles[size], // User provided class name
state.root.className);
state.contentContainer.className = (0, _react.mergeClasses)(compoundButtonClassNames.contentContainer, contentContainerStyles.base, state.contentContainer.className);
if (state.icon) {
state.icon.className = (0, _react.mergeClasses)(compoundButtonClassNames.icon, iconStyles.base, state.root.children !== undefined && state.root.children !== null && iconStyles[iconPosition], state.icon.className);
}
if (state.secondaryContent) {
state.secondaryContent.className = (0, _react.mergeClasses)(compoundButtonClassNames.secondaryContent, secondaryContentStyles.base, secondaryContentStyles[size], state.secondaryContent.className);
}
(0, _useButtonStylesstyles.useButtonStyles_unstable)(state);
return state;
};
File diff suppressed because one or more lines are too long
@@ -0,0 +1,24 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "MenuButton", {
enumerable: true,
get: function() {
return MenuButton;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _renderMenuButton = require("./renderMenuButton");
const _useMenuButton = require("./useMenuButton");
const _useMenuButtonStylesstyles = require("./useMenuButtonStyles.styles");
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
const MenuButton = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
const state = (0, _useMenuButton.useMenuButton_unstable)(props, ref);
(0, _useMenuButtonStylesstyles.useMenuButtonStyles_unstable)(state);
(0, _reactsharedcontexts.useCustomStyleHook_unstable)('useMenuButtonStyles_unstable')(state);
return (0, _renderMenuButton.renderMenuButton_unstable)(state);
// Casting is required due to lack of distributive union to support unions on @types/react
});
MenuButton.displayName = 'MenuButton';
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/MenuButton/MenuButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { renderMenuButton_unstable } from './renderMenuButton';\nimport { useMenuButton_unstable } from './useMenuButton';\nimport { useMenuButtonStyles_unstable } from './useMenuButtonStyles.styles';\nimport type { MenuButtonProps } from './MenuButton.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * MenuButtons are buttons that have a chevron icon after the button contents and are usually clicked to open/close\n * menus.\n */\nexport const MenuButton: ForwardRefComponent<MenuButtonProps> = React.forwardRef((props, ref) => {\n const state = useMenuButton_unstable(props, ref);\n\n useMenuButtonStyles_unstable(state);\n\n useCustomStyleHook_unstable('useMenuButtonStyles_unstable')(state);\n\n return renderMenuButton_unstable(state);\n // Casting is required due to lack of distributive union to support unions on @types/react\n}) as ForwardRefComponent<MenuButtonProps>;\n\nMenuButton.displayName = 'MenuButton';\n"],"names":["MenuButton","React","forwardRef","props","ref","state","useMenuButton_unstable","useMenuButtonStyles_unstable","useCustomStyleHook_unstable","renderMenuButton_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAYaA;;;eAAAA;;;;iEAZU;kCACmB;+BACH;2CACM;qCAGD;AAMrC,MAAMA,aAAAA,WAAAA,GAAmDC,OAAMC,UAAU,CAAC,CAACC,OAAOC;IACvF,MAAMC,QAAQC,IAAAA,qCAAAA,EAAuBH,OAAOC;IAE5CG,IAAAA,uDAAAA,EAA6BF;IAE7BG,IAAAA,gDAAAA,EAA4B,gCAAgCH;IAE5D,OAAOI,IAAAA,2CAAAA,EAA0BJ;AACjC,0FAA0F;AAC5F;AAEAL,WAAWU,WAAW,GAAG"}
@@ -0,0 +1,4 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/MenuButton/MenuButton.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { ButtonProps, ButtonSlots, ButtonState } from '../Button/Button.types';\n\nexport type MenuButtonSlots = ButtonSlots & {\n /**\n * Menu icon that indicates that this button has a menu that can be expanded.\n */\n menuIcon?: Slot<'span'>;\n};\n\nexport type MenuButtonProps = ComponentProps<MenuButtonSlots> &\n Pick<ButtonProps, 'appearance' | 'disabledFocusable' | 'disabled' | 'shape' | 'size'>;\n\nexport type MenuButtonState = ComponentState<MenuButtonSlots> &\n Omit<ButtonState, keyof ButtonSlots | 'components' | 'iconPosition'>;\n"],"names":[],"rangeMappings":"","mappings":""}
@@ -0,0 +1,31 @@
"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, {
MenuButton: function() {
return _MenuButton.MenuButton;
},
menuButtonClassNames: function() {
return _useMenuButtonStylesstyles.menuButtonClassNames;
},
renderMenuButton_unstable: function() {
return _renderMenuButton.renderMenuButton_unstable;
},
useMenuButtonStyles_unstable: function() {
return _useMenuButtonStylesstyles.useMenuButtonStyles_unstable;
},
useMenuButton_unstable: function() {
return _useMenuButton.useMenuButton_unstable;
}
});
const _MenuButton = require("./MenuButton");
const _renderMenuButton = require("./renderMenuButton");
const _useMenuButton = require("./useMenuButton");
const _useMenuButtonStylesstyles = require("./useMenuButtonStyles.styles");
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/MenuButton/index.ts"],"sourcesContent":["export type { MenuButtonProps, MenuButtonSlots, MenuButtonState } from './MenuButton.types';\nexport { MenuButton } from './MenuButton';\nexport { renderMenuButton_unstable } from './renderMenuButton';\nexport { useMenuButton_unstable } from './useMenuButton';\nexport { menuButtonClassNames, useMenuButtonStyles_unstable } from './useMenuButtonStyles.styles';\n"],"names":["MenuButton","menuButtonClassNames","renderMenuButton_unstable","useMenuButtonStyles_unstable","useMenuButton_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IACSA,UAAU;eAAVA,sBAAU;;IAGVC,oBAAoB;eAApBA,+CAAoB;;IAFpBC,yBAAyB;eAAzBA,2CAAyB;;IAEHC,4BAA4B;eAA5BA,uDAA4B;;IADlDC,sBAAsB;eAAtBA,qCAAsB;;;4BAFJ;kCACe;+BACH;2CAC4B"}
@@ -0,0 +1,23 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "renderMenuButton_unstable", {
enumerable: true,
get: function() {
return renderMenuButton_unstable;
}
});
const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
const _reactutilities = require("@fluentui/react-utilities");
const renderMenuButton_unstable = (state)=>{
(0, _reactutilities.assertSlots)(state);
const { icon, iconOnly } = state;
return /*#__PURE__*/ (0, _jsxruntime.jsxs)(state.root, {
children: [
state.icon && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.icon, {}),
!iconOnly && state.root.children,
(!iconOnly || !(icon === null || icon === void 0 ? void 0 : icon.children)) && state.menuIcon && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.menuIcon, {})
]
});
};
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/MenuButton/renderMenuButton.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { MenuButtonSlots, MenuButtonState } from './MenuButton.types';\n\n/**\n * Renders a MenuButton component by passing the state defined props to the appropriate slots.\n */\nexport const renderMenuButton_unstable = (state: MenuButtonState) => {\n assertSlots<MenuButtonSlots>(state);\n const { icon, iconOnly } = state;\n\n return (\n <state.root>\n {state.icon && <state.icon />}\n {!iconOnly && state.root.children}\n {(!iconOnly || !icon?.children) && state.menuIcon && <state.menuIcon />}\n </state.root>\n );\n};\n"],"names":["renderMenuButton_unstable","state","assertSlots","icon","iconOnly","_jsxs","root","_jsx","children","menuIcon"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BASaA;;;eAAAA;;;4BARb;gCAE4B;AAMrB,MAAMA,4BAA4B,CAACC;IACxCC,IAAAA,2BAAAA,EAA6BD;IAC7B,MAAM,EAAEE,IAAI,EAAEC,QAAQ,EAAE,GAAGH;IAE3B,OAAA,WAAA,GACEI,IAAAA,gBAAA,EAACJ,MAAMK,IAAI,EAAA;;YACRL,MAAME,IAAI,IAAA,WAAA,GAAII,IAAAA,eAAA,EAACN,MAAME,IAAI,EAAA,CAAA;YACzB,CAACC,YAAYH,MAAMK,IAAI,CAACE,QAAQ;YAC/B,CAAA,CAACJ,YAAY,CAACD,CAAAA,SAAAA,QAAAA,SAAAA,KAAAA,IAAAA,KAAAA,IAAAA,KAAMK,QAAQ,AAARA,CAAQ,KAAKP,MAAMQ,QAAQ,IAAA,WAAA,GAAIF,IAAAA,eAAA,EAACN,MAAMQ,QAAQ,EAAA,CAAA;;;AAG1E"}
@@ -0,0 +1,40 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "useMenuButton_unstable", {
enumerable: true,
get: function() {
return useMenuButton_unstable;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _reacticons = require("@fluentui/react-icons");
const _reactutilities = require("@fluentui/react-utilities");
const _index = require("../Button/index");
const useMenuButton_unstable = ({ menuIcon, ...props }, ref)=>{
'use no memo';
const buttonState = (0, _index.useButton_unstable)(props, ref);
// force aria-expanded to be a boolean, not a string
buttonState.root['aria-expanded'] = props['aria-expanded'] ? props['aria-expanded'] === 'true' || props['aria-expanded'] === true : false;
return {
// Button state
...buttonState,
// State calculated from a set of props
iconOnly: Boolean(!props.children),
// Slots definition
components: {
root: 'button',
icon: 'span',
menuIcon: 'span'
},
menuIcon: _reactutilities.slot.optional(menuIcon, {
defaultProps: {
children: /*#__PURE__*/ _react.createElement(_reacticons.ChevronDownRegular, null)
},
renderByDefault: true,
elementType: 'span'
})
};
};
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/MenuButton/useMenuButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { ChevronDownRegular } from '@fluentui/react-icons';\nimport { slot } from '@fluentui/react-utilities';\nimport { useButton_unstable } from '../Button/index';\nimport type { MenuButtonProps, MenuButtonState } from './MenuButton.types';\n\n/**\n * Given user props, returns the final state for a MenuButton.\n */\nexport const useMenuButton_unstable = (\n { menuIcon, ...props }: MenuButtonProps,\n ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): MenuButtonState => {\n 'use no memo';\n\n const buttonState = useButton_unstable(props, ref);\n // force aria-expanded to be a boolean, not a string\n buttonState.root['aria-expanded'] = props['aria-expanded']\n ? props['aria-expanded'] === 'true' || props['aria-expanded'] === true\n : false;\n\n return {\n // Button state\n ...buttonState,\n\n // State calculated from a set of props\n iconOnly: Boolean(!props.children),\n\n // Slots definition\n components: {\n root: 'button',\n icon: 'span',\n menuIcon: 'span',\n },\n\n menuIcon: slot.optional(menuIcon, {\n defaultProps: {\n children: <ChevronDownRegular />,\n },\n renderByDefault: true,\n elementType: 'span',\n }),\n };\n};\n"],"names":["useMenuButton_unstable","menuIcon","props","ref","buttonState","useButton_unstable","root","iconOnly","Boolean","children","components","icon","slot","optional","defaultProps","React","createElement","ChevronDownRegular","renderByDefault","elementType"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BASaA;;;eAAAA;;;;iEATU;4BACY;gCACd;uBACc;AAM5B,MAAMA,yBAAyB,CACpC,EAAEC,QAAQ,EAAE,GAAGC,OAAwB,EACvCC;IAEA;IAEA,MAAMC,cAAcC,IAAAA,yBAAAA,EAAmBH,OAAOC;IAC9C,oDAAoD;IACpDC,YAAYE,IAAI,CAAC,gBAAgB,GAAGJ,KAAK,CAAC,gBAAgB,GACtDA,KAAK,CAAC,gBAAgB,KAAK,UAAUA,KAAK,CAAC,gBAAgB,KAAK,OAChE;IAEJ,OAAO;QACL,eAAe;QACf,GAAGE,WAAW;QAEd,uCAAuC;QACvCG,UAAUC,QAAQ,CAACN,MAAMO,QAAQ;QAEjC,mBAAmB;QACnBC,YAAY;YACVJ,MAAM;YACNK,MAAM;YACNV,UAAU;QACZ;QAEAA,UAAUW,oBAAAA,CAAKC,QAAQ,CAACZ,UAAU;YAChCa,cAAc;gBACZL,UAAAA,WAAAA,GAAUM,OAAAC,aAAA,CAACC,8BAAAA,EAAAA;YACb;YACAC,iBAAiB;YACjBC,aAAa;QACf;IACF;AACF"}
@@ -0,0 +1,191 @@
"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, {
menuButtonClassNames: function() {
return menuButtonClassNames;
},
useMenuButtonStyles_unstable: function() {
return useMenuButtonStyles_unstable;
}
});
const _react = require("@griffel/react");
const _useButtonStylesstyles = require("../Button/useButtonStyles.styles");
const menuButtonClassNames = {
root: 'fui-MenuButton',
icon: 'fui-MenuButton__icon',
menuIcon: 'fui-MenuButton__menuIcon'
};
const useRootExpandedStyles = /*#__PURE__*/ (0, _react.__styles)({
base: {
D0sxk3: "fxoiby5",
t6yez3: "f15q0o9g"
},
outline: {
g2u3we: "f1ly1fcm",
h3c5rm: [
"fi8bssc",
"fj6btzu"
],
B9xav0g: "f1s9tnsa",
zhjwy3: [
"fj6btzu",
"fi8bssc"
],
B4j52fo: "fgx37oo",
Bekrc4i: [
"f130t4y6",
"f1efpmoh"
],
Bn0qgzm: "fv51ejd",
ibv6hh: [
"f1efpmoh",
"f130t4y6"
],
sj55zd: "f14nttnl"
},
primary: {
De3pzq: "f8w4g0q"
},
secondary: {
De3pzq: "f1nfm20t",
g2u3we: "f1ly1fcm",
h3c5rm: [
"fi8bssc",
"fj6btzu"
],
B9xav0g: "f1s9tnsa",
zhjwy3: [
"fj6btzu",
"fi8bssc"
],
sj55zd: "f14nttnl"
},
subtle: {
De3pzq: "fq5gl1p",
sj55zd: "f1eryozh"
},
transparent: {
De3pzq: "f1q9pm1r",
sj55zd: "f1qj7y59"
}
}, {
d: [
".fxoiby5 .fui-Icon-filled{display:inline;}",
".f15q0o9g .fui-Icon-regular{display:none;}",
".f1ly1fcm{border-top-color:var(--colorNeutralStroke1Selected);}",
".fi8bssc{border-right-color:var(--colorNeutralStroke1Selected);}",
".fj6btzu{border-left-color:var(--colorNeutralStroke1Selected);}",
".f1s9tnsa{border-bottom-color:var(--colorNeutralStroke1Selected);}",
".fgx37oo{border-top-width:var(--strokeWidthThicker);}",
".f130t4y6{border-right-width:var(--strokeWidthThicker);}",
".f1efpmoh{border-left-width:var(--strokeWidthThicker);}",
".fv51ejd{border-bottom-width:var(--strokeWidthThicker);}",
".f14nttnl{color:var(--colorNeutralForeground1Selected);}",
".f8w4g0q{background-color:var(--colorBrandBackgroundSelected);}",
".f1nfm20t{background-color:var(--colorNeutralBackground1Selected);}",
".fq5gl1p{background-color:var(--colorSubtleBackgroundSelected);}",
".f1eryozh{color:var(--colorNeutralForeground2Selected);}",
".f1q9pm1r{background-color:var(--colorTransparentBackgroundSelected);}",
".f1qj7y59{color:var(--colorNeutralForeground2BrandSelected);}"
]
});
const useIconExpandedStyles = /*#__PURE__*/ (0, _react.__styles)({
outline: {
sj55zd: "f14nttnl"
},
primary: {},
secondary: {
sj55zd: "f14nttnl"
},
subtle: {
sj55zd: "f1qj7y59"
},
transparent: {
sj55zd: "f1qj7y59"
},
highContrast: {
ze5xyy: "f4xjyn1"
}
}, {
d: [
".f14nttnl{color:var(--colorNeutralForeground1Selected);}",
".f1qj7y59{color:var(--colorNeutralForeground2BrandSelected);}"
],
m: [
[
"@media (forced-colors: active){.f4xjyn1:hover{color:Highlight;}}",
{
m: "(forced-colors: active)"
}
]
]
});
const useMenuIconStyles = /*#__PURE__*/ (0, _react.__styles)({
base: {
Bg96gwp: "fez10in"
},
small: {
Be2twd7: "f1ugzwwg",
Bqenvij: "fvblgha",
Bg96gwp: "fwrc4pm",
a9b677: "frx94fk"
},
medium: {
Be2twd7: "f1ugzwwg",
Bqenvij: "fvblgha",
Bg96gwp: "fwrc4pm",
a9b677: "frx94fk"
},
large: {
Be2twd7: "f4ybsrx",
Bqenvij: "fd461yt",
Bg96gwp: "faaz57k",
a9b677: "fjw5fx7"
},
notIconOnly: {
Frg6f3: [
"fbyavb5",
"fm0x6gh"
]
}
}, {
d: [
".fez10in{line-height:0;}",
".f1ugzwwg{font-size:12px;}",
".fvblgha{height:12px;}",
".fwrc4pm{line-height:var(--lineHeightBase200);}",
".frx94fk{width:12px;}",
".f4ybsrx{font-size:16px;}",
".fd461yt{height:16px;}",
".faaz57k{line-height:var(--lineHeightBase400);}",
".fjw5fx7{width:16px;}",
".fbyavb5{margin-left:var(--spacingHorizontalXS);}",
".fm0x6gh{margin-right:var(--spacingHorizontalXS);}"
]
});
const useMenuButtonStyles_unstable = (state)=>{
'use no memo';
const rootExpandedStyles = useRootExpandedStyles();
const iconExpandedStyles = useIconExpandedStyles();
const menuIconStyles = useMenuIconStyles();
state.root.className = (0, _react.mergeClasses)(menuButtonClassNames.root, state.root['aria-expanded'] && rootExpandedStyles.base, state.root['aria-expanded'] && rootExpandedStyles[state.appearance], state.root.className);
if (state.icon) {
state.icon.className = (0, _react.mergeClasses)(menuButtonClassNames.icon, state.root['aria-expanded'] && iconExpandedStyles[state.appearance] && iconExpandedStyles.highContrast, state.icon.className);
}
if (state.menuIcon) {
state.menuIcon.className = (0, _react.mergeClasses)(menuButtonClassNames.menuIcon, menuIconStyles.base, menuIconStyles[state.size], !state.iconOnly && menuIconStyles.notIconOnly, state.menuIcon.className);
}
(0, _useButtonStylesstyles.useButtonStyles_unstable)({
...state,
iconPosition: 'before'
});
return state;
};
File diff suppressed because one or more lines are too long
@@ -0,0 +1,24 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "SplitButton", {
enumerable: true,
get: function() {
return SplitButton;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _renderSplitButton = require("./renderSplitButton");
const _useSplitButton = require("./useSplitButton");
const _useSplitButtonStylesstyles = require("./useSplitButtonStyles.styles");
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
const SplitButton = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
const state = (0, _useSplitButton.useSplitButton_unstable)(props, ref);
(0, _useSplitButtonStylesstyles.useSplitButtonStyles_unstable)(state);
(0, _reactsharedcontexts.useCustomStyleHook_unstable)('useSplitButtonStyles_unstable')(state);
return (0, _renderSplitButton.renderSplitButton_unstable)(state);
// Casting is required due to lack of distributive union to support unions on @types/react
});
SplitButton.displayName = 'SplitButton';
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/SplitButton/SplitButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { renderSplitButton_unstable } from './renderSplitButton';\nimport { useSplitButton_unstable } from './useSplitButton';\nimport { useSplitButtonStyles_unstable } from './useSplitButtonStyles.styles';\nimport type { SplitButtonProps } from './SplitButton.types';\nimport { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * SplitButtons are a grouping of two interactive surfaces where interacting with the first one triggers a primary\n * action, while interacting with the second one opens a menu with secondary actions.\n */\nexport const SplitButton: ForwardRefComponent<SplitButtonProps> = React.forwardRef((props, ref) => {\n const state = useSplitButton_unstable(props, ref);\n\n useSplitButtonStyles_unstable(state);\n\n useCustomStyleHook_unstable('useSplitButtonStyles_unstable')(state);\n\n return renderSplitButton_unstable(state);\n // Casting is required due to lack of distributive union to support unions on @types/react\n}) as ForwardRefComponent<SplitButtonProps>;\n\nSplitButton.displayName = 'SplitButton';\n"],"names":["SplitButton","React","forwardRef","props","ref","state","useSplitButton_unstable","useSplitButtonStyles_unstable","useCustomStyleHook_unstable","renderSplitButton_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAYaA;;;eAAAA;;;;iEAZU;mCACoB;gCACH;4CACM;qCAGF;AAMrC,MAAMA,cAAAA,WAAAA,GAAqDC,OAAMC,UAAU,CAAC,CAACC,OAAOC;IACzF,MAAMC,QAAQC,IAAAA,uCAAAA,EAAwBH,OAAOC;IAE7CG,IAAAA,yDAAAA,EAA8BF;IAE9BG,IAAAA,gDAAAA,EAA4B,iCAAiCH;IAE7D,OAAOI,IAAAA,6CAAAA,EAA2BJ;AAClC,0FAA0F;AAC5F;AAEAL,YAAYU,WAAW,GAAG"}
@@ -0,0 +1,4 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/SplitButton/SplitButton.types.ts"],"sourcesContent":["import { Button } from '../Button/Button';\nimport { MenuButton } from '../MenuButton/MenuButton';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { ButtonProps, ButtonState } from '../Button/Button.types';\nimport type { MenuButtonProps, MenuButtonState } from '../MenuButton/MenuButton.types';\n\nexport type SplitButtonSlots = {\n /**\n * Root of the component that wraps the primary action button and menu button.\n */\n root: NonNullable<Slot<'div'>>;\n\n /**\n * Button that opens menu with secondary actions in SplitButton.\n */\n menuButton?: Slot<typeof MenuButton>;\n /**\n * Button to perform primary action in SplitButton.\n */\n primaryActionButton?: Slot<typeof Button>;\n};\n\nexport type SplitButtonProps = ComponentProps<SplitButtonSlots> &\n Omit<ButtonProps, 'root' | 'as'> &\n Omit<MenuButtonProps, 'root' | 'as'>;\n\nexport type SplitButtonState = ComponentState<SplitButtonSlots> &\n Omit<ButtonState, 'components' | 'iconOnly' | 'root'> &\n Omit<MenuButtonState, 'components' | 'iconOnly' | 'root'>;\n"],"names":[],"rangeMappings":"","mappings":""}
@@ -0,0 +1,31 @@
"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, {
SplitButton: function() {
return _SplitButton.SplitButton;
},
renderSplitButton_unstable: function() {
return _renderSplitButton.renderSplitButton_unstable;
},
splitButtonClassNames: function() {
return _useSplitButtonStylesstyles.splitButtonClassNames;
},
useSplitButtonStyles_unstable: function() {
return _useSplitButtonStylesstyles.useSplitButtonStyles_unstable;
},
useSplitButton_unstable: function() {
return _useSplitButton.useSplitButton_unstable;
}
});
const _SplitButton = require("./SplitButton");
const _renderSplitButton = require("./renderSplitButton");
const _useSplitButton = require("./useSplitButton");
const _useSplitButtonStylesstyles = require("./useSplitButtonStyles.styles");
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/SplitButton/index.ts"],"sourcesContent":["export { SplitButton } from './SplitButton';\nexport type { SplitButtonProps, SplitButtonSlots, SplitButtonState } from './SplitButton.types';\nexport { renderSplitButton_unstable } from './renderSplitButton';\nexport { useSplitButton_unstable } from './useSplitButton';\nexport { splitButtonClassNames, useSplitButtonStyles_unstable } from './useSplitButtonStyles.styles';\n"],"names":["SplitButton","renderSplitButton_unstable","splitButtonClassNames","useSplitButtonStyles_unstable","useSplitButton_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAASA,WAAW;eAAXA,wBAAW;;IAEXC,0BAA0B;eAA1BA,6CAA0B;;IAE1BC,qBAAqB;eAArBA,iDAAqB;;IAAEC,6BAA6B;eAA7BA,yDAA6B;;IADpDC,uBAAuB;eAAvBA,uCAAuB;;;6BAHJ;mCAEe;gCACH;4CAC6B"}
@@ -0,0 +1,21 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "renderSplitButton_unstable", {
enumerable: true,
get: function() {
return renderSplitButton_unstable;
}
});
const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
const _reactutilities = require("@fluentui/react-utilities");
const renderSplitButton_unstable = (state)=>{
(0, _reactutilities.assertSlots)(state);
return /*#__PURE__*/ (0, _jsxruntime.jsxs)(state.root, {
children: [
state.primaryActionButton && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.primaryActionButton, {}),
state.menuButton && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.menuButton, {})
]
});
};
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/SplitButton/renderSplitButton.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { SplitButtonSlots, SplitButtonState } from './SplitButton.types';\n\n/**\n * Renders a SplitButton component by passing the state defined props to the appropriate slots.\n */\nexport const renderSplitButton_unstable = (state: SplitButtonState) => {\n assertSlots<SplitButtonSlots>(state);\n\n return (\n <state.root>\n {state.primaryActionButton && <state.primaryActionButton />}\n {state.menuButton && <state.menuButton />}\n </state.root>\n );\n};\n"],"names":["renderSplitButton_unstable","state","assertSlots","_jsxs","root","primaryActionButton","_jsx","menuButton"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BASaA;;;eAAAA;;;4BARb;gCAE4B;AAMrB,MAAMA,6BAA6B,CAACC;IACzCC,IAAAA,2BAAAA,EAA8BD;IAE9B,OAAA,WAAA,GACEE,IAAAA,gBAAA,EAACF,MAAMG,IAAI,EAAA;;YACRH,MAAMI,mBAAmB,IAAA,WAAA,GAAIC,IAAAA,eAAA,EAACL,MAAMI,mBAAmB,EAAA,CAAA;YACvDJ,MAAMM,UAAU,IAAA,WAAA,GAAID,IAAAA,eAAA,EAACL,MAAMM,UAAU,EAAA,CAAA;;;AAG5C"}
@@ -0,0 +1,73 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "useSplitButton_unstable", {
enumerable: true,
get: function() {
return useSplitButton_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 _Button = require("../Button/Button");
const _MenuButton = require("../MenuButton/MenuButton");
const useSplitButton_unstable = (props, ref)=>{
const { appearance = 'secondary', children, disabled = false, disabledFocusable = false, icon, iconPosition = 'before', menuButton, menuIcon, primaryActionButton, shape = 'rounded', size = 'medium' } = props;
const baseId = (0, _reactutilities.useId)('splitButton-');
const menuButtonShorthand = _reactutilities.slot.optional(menuButton, {
defaultProps: {
appearance,
disabled,
disabledFocusable,
menuIcon,
shape,
size
},
renderByDefault: true,
elementType: _MenuButton.MenuButton
});
const primaryActionButtonShorthand = _reactutilities.slot.optional(primaryActionButton, {
defaultProps: {
appearance,
children,
disabled,
disabledFocusable,
icon,
iconPosition,
id: baseId + '__primaryActionButton',
shape,
size
},
renderByDefault: true,
elementType: _Button.Button
});
// Resolve menu button's aria-labelledby to be labelled by the primary action button if no label was provided by the
// user.
if (menuButtonShorthand && primaryActionButtonShorthand && !menuButtonShorthand['aria-label'] && !menuButtonShorthand['aria-labelledby']) {
menuButtonShorthand['aria-labelledby'] = primaryActionButtonShorthand.id;
}
return {
// Props passed at the top-level
appearance,
disabled,
disabledFocusable,
iconPosition,
shape,
size,
components: {
root: 'div',
menuButton: _MenuButton.MenuButton,
primaryActionButton: _Button.Button
},
root: _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)('div', {
ref,
...props
}), {
elementType: 'div'
}),
menuButton: menuButtonShorthand,
primaryActionButton: primaryActionButtonShorthand
};
};
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/SplitButton/useSplitButton.ts"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, useId, slot } from '@fluentui/react-utilities';\nimport { Button } from '../Button/Button';\nimport { MenuButton } from '../MenuButton/MenuButton';\nimport type { SplitButtonProps, SplitButtonState } from './SplitButton.types';\n\n/**\n * Given user props, defines default props for the SplitButton and returns processed state.\n * @param props - User provided props to the SplitButton component.\n * @param ref - User provided ref to be passed to the SplitButton component.\n */\nexport const useSplitButton_unstable = (\n props: SplitButtonProps,\n ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): SplitButtonState => {\n const {\n appearance = 'secondary',\n children,\n disabled = false,\n disabledFocusable = false,\n icon,\n iconPosition = 'before',\n menuButton,\n menuIcon,\n primaryActionButton,\n shape = 'rounded',\n size = 'medium',\n } = props;\n const baseId = useId('splitButton-');\n\n const menuButtonShorthand = slot.optional(menuButton, {\n defaultProps: {\n appearance,\n disabled,\n disabledFocusable,\n menuIcon,\n shape,\n size,\n },\n renderByDefault: true,\n elementType: MenuButton,\n });\n const primaryActionButtonShorthand = slot.optional(primaryActionButton, {\n defaultProps: {\n appearance,\n children,\n disabled,\n disabledFocusable,\n icon,\n iconPosition,\n id: baseId + '__primaryActionButton',\n shape,\n size,\n },\n renderByDefault: true,\n elementType: Button,\n });\n\n // Resolve menu button's aria-labelledby to be labelled by the primary action button if no label was provided by the\n // user.\n if (\n menuButtonShorthand &&\n primaryActionButtonShorthand &&\n !menuButtonShorthand['aria-label'] &&\n !menuButtonShorthand['aria-labelledby']\n ) {\n menuButtonShorthand['aria-labelledby'] = primaryActionButtonShorthand.id;\n }\n\n return {\n // Props passed at the top-level\n appearance,\n disabled,\n disabledFocusable,\n iconPosition,\n shape,\n size, // Slots definition\n components: { root: 'div', menuButton: MenuButton, primaryActionButton: Button },\n root: slot.always(getIntrinsicElementProps('div', { ref, ...props }), { elementType: 'div' }),\n menuButton: menuButtonShorthand,\n primaryActionButton: primaryActionButtonShorthand,\n };\n};\n"],"names":["useSplitButton_unstable","props","ref","appearance","children","disabled","disabledFocusable","icon","iconPosition","menuButton","menuIcon","primaryActionButton","shape","size","baseId","useId","menuButtonShorthand","slot","optional","defaultProps","renderByDefault","elementType","MenuButton","primaryActionButtonShorthand","id","Button","components","root","always","getIntrinsicElementProps"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAWaA;;;eAAAA;;;;iEAXU;gCAC+B;wBAC/B;4BACI;AAQpB,MAAMA,0BAA0B,CACrCC,OACAC;IAEA,MAAM,EACJC,aAAa,WAAW,EACxBC,QAAQ,EACRC,WAAW,KAAK,EAChBC,oBAAoB,KAAK,EACzBC,IAAI,EACJC,eAAe,QAAQ,EACvBC,UAAU,EACVC,QAAQ,EACRC,mBAAmB,EACnBC,QAAQ,SAAS,EACjBC,OAAO,QAAQ,EAChB,GAAGZ;IACJ,MAAMa,SAASC,IAAAA,qBAAAA,EAAM;IAErB,MAAMC,sBAAsBC,oBAAAA,CAAKC,QAAQ,CAACT,YAAY;QACpDU,cAAc;YACZhB;YACAE;YACAC;YACAI;YACAE;YACAC;QACF;QACAO,iBAAiB;QACjBC,aAAaC,sBAAAA;IACf;IACA,MAAMC,+BAA+BN,oBAAAA,CAAKC,QAAQ,CAACP,qBAAqB;QACtEQ,cAAc;YACZhB;YACAC;YACAC;YACAC;YACAC;YACAC;YACAgB,IAAIV,SAAS;YACbF;YACAC;QACF;QACAO,iBAAiB;QACjBC,aAAaI,cAAAA;IACf;IAEA,oHAAoH;IACpH,QAAQ;IACR,IACET,uBACAO,gCACA,CAACP,mBAAmB,CAAC,aAAa,IAClC,CAACA,mBAAmB,CAAC,kBAAkB,EACvC;QACAA,mBAAmB,CAAC,kBAAkB,GAAGO,6BAA6BC,EAAE;IAC1E;IAEA,OAAO;QACL,gCAAgC;QAChCrB;QACAE;QACAC;QACAE;QACAI;QACAC;QACAa,YAAY;YAAEC,MAAM;YAAOlB,YAAYa,sBAAAA;YAAYX,qBAAqBc,cAAAA;QAAO;QAC/EE,MAAMV,oBAAAA,CAAKW,MAAM,CAACC,IAAAA,wCAAAA,EAAyB,OAAO;YAAE3B;YAAK,GAAGD,KAAK;QAAC,IAAI;YAAEoB,aAAa;QAAM;QAC3FZ,YAAYO;QACZL,qBAAqBY;IACvB;AACF"}
@@ -0,0 +1,268 @@
"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, {
splitButtonClassNames: function() {
return splitButtonClassNames;
},
useSplitButtonStyles_unstable: function() {
return useSplitButtonStyles_unstable;
}
});
const _react = require("@griffel/react");
const splitButtonClassNames = {
root: 'fui-SplitButton',
menuButton: 'fui-SplitButton__menuButton',
primaryActionButton: 'fui-SplitButton__primaryActionButton'
};
// WCAG minimum target size for pointer targets that are immediately adjacent to other targets:
// https://w3c.github.io/wcag/guidelines/22/#target-size-minimum
const MIN_TARGET_SIZE = '24px';
const useFocusStyles = /*#__PURE__*/ (0, _react.__styles)({
primaryActionButton: {
B6xbmo0: [
"f1x37qnr",
"f1um7c6d"
],
kdpuga: [
"fn4c73s",
"f6pwzcr"
]
},
menuButton: {
lbo84a: [
"frrbwxo",
"f1rgcpbv"
],
dm238s: [
"f1um7c6d",
"f1x37qnr"
],
Bw81rd7: [
"f6pwzcr",
"fn4c73s"
]
}
}, {
d: [
".f1x37qnr[data-fui-focus-visible]{border-top-right-radius:0;}",
".f1um7c6d[data-fui-focus-visible]{border-top-left-radius:0;}",
".fn4c73s[data-fui-focus-visible]{border-bottom-right-radius:0;}",
".f6pwzcr[data-fui-focus-visible]{border-bottom-left-radius:0;}",
".frrbwxo[data-fui-focus-visible]{border-left-width:0;}",
".f1rgcpbv[data-fui-focus-visible]{border-right-width:0;}"
]
});
const useRootStyles = /*#__PURE__*/ (0, _react.__styles)({
base: {
mc9l5x: "ftuwxu6",
Brf1p80: "fsxf2b5",
qhf8xq: "f10pi13n",
ha4doy: "fmrv4ls",
kn2xc0: [
"f14uur2j",
"fc1btbj"
],
Bs76p8a: [
"fye5tvs",
"fc597qq"
],
cuxpm9: [
"f1e8brtx",
"fr36rk3"
],
Biffepf: [
"fxp12j1",
"f1m6nt2y"
],
Defnvf: [
"fr7y8no",
"f1dn0c6m"
],
z0pv9t: "f1b65x5h"
},
outline: {},
primary: {
B1l9wao: [
"f4rm5b0",
"f1tuwo13"
],
lcnrd8: [
"fdwdeeo",
"f1ezdslh"
],
Brbpp8k: [
"fckzjn8",
"f8ohr2i"
],
Bcsxniv: [
"ff0tx2l",
"fnrj3rw"
],
tl7e51: [
"f3jppgx",
"f1m2s8ie"
],
mba178: [
"f96h41g",
"fdxf0pi"
]
},
secondary: {},
subtle: {
B1l9wao: [
"f16kf41h",
"fxiafvi"
],
lcnrd8: [
"ffl6mx9",
"f1t5sw6t"
],
Brbpp8k: [
"f1t42bc8",
"fsw5hli"
]
},
transparent: {
B1l9wao: [
"f16kf41h",
"fxiafvi"
],
lcnrd8: [
"ffl6mx9",
"f1t5sw6t"
],
Brbpp8k: [
"f1t42bc8",
"fsw5hli"
]
},
circular: {},
rounded: {},
square: {},
disabled: {
B1l9wao: [
"f10xrnr8",
"f15nylwb"
],
lcnrd8: [
"f11fwhjz",
"f18vtcsx"
],
Brbpp8k: [
"f31btwb",
"fzgm9gq"
]
},
disabledHighContrast: {
Bcsxniv: [
"fj2q5vi",
"f13tct40"
],
tl7e51: [
"fb2mzc7",
"f179dhpp"
],
mba178: [
"f1ma39qa",
"f1nzpdru"
]
}
}, {
d: [
".ftuwxu6{display:inline-flex;}",
".fsxf2b5{justify-content:stretch;}",
".f10pi13n{position:relative;}",
".fmrv4ls{vertical-align:middle;}",
".f14uur2j .fui-SplitButton__primaryActionButton{border-top-right-radius:0;}",
".fc1btbj .fui-SplitButton__primaryActionButton{border-top-left-radius:0;}",
".fye5tvs .fui-SplitButton__primaryActionButton{border-bottom-right-radius:0;}",
".fc597qq .fui-SplitButton__primaryActionButton{border-bottom-left-radius:0;}",
".f1e8brtx .fui-SplitButton__menuButton{border-left-width:0;}",
".fr36rk3 .fui-SplitButton__menuButton{border-right-width:0;}",
".fxp12j1 .fui-SplitButton__menuButton{border-top-left-radius:0;}",
".f1m6nt2y .fui-SplitButton__menuButton{border-top-right-radius:0;}",
".fr7y8no .fui-SplitButton__menuButton{border-bottom-left-radius:0;}",
".f1dn0c6m .fui-SplitButton__menuButton{border-bottom-right-radius:0;}",
".f1b65x5h .fui-SplitButton__menuButton{min-width:24px;}",
".f4rm5b0 .fui-SplitButton__primaryActionButton{border-right-color:var(--colorNeutralStrokeOnBrand);}",
".f1tuwo13 .fui-SplitButton__primaryActionButton{border-left-color:var(--colorNeutralStrokeOnBrand);}",
".f16kf41h .fui-SplitButton__primaryActionButton{border-right-color:var(--colorTransparentBackground);}",
".fxiafvi .fui-SplitButton__primaryActionButton{border-left-color:var(--colorTransparentBackground);}",
".f10xrnr8 .fui-SplitButton__primaryActionButton{border-right-color:var(--colorNeutralStrokeDisabled);}",
".f15nylwb .fui-SplitButton__primaryActionButton{border-left-color:var(--colorNeutralStrokeDisabled);}"
],
h: [
".fdwdeeo:hover .fui-SplitButton__primaryActionButton{border-right-color:var(--colorNeutralStrokeOnBrand);}",
".f1ezdslh:hover .fui-SplitButton__primaryActionButton{border-left-color:var(--colorNeutralStrokeOnBrand);}",
".fckzjn8:hover:active .fui-SplitButton__primaryActionButton{border-right-color:var(--colorNeutralStrokeOnBrand);}",
".f8ohr2i:hover:active .fui-SplitButton__primaryActionButton{border-left-color:var(--colorNeutralStrokeOnBrand);}",
".ffl6mx9:hover .fui-SplitButton__primaryActionButton{border-right-color:var(--colorTransparentBackgroundHover);}",
".f1t5sw6t:hover .fui-SplitButton__primaryActionButton{border-left-color:var(--colorTransparentBackgroundHover);}",
".f1t42bc8:hover:active .fui-SplitButton__primaryActionButton{border-right-color:var(--colorTransparentBackgroundPressed);}",
".fsw5hli:hover:active .fui-SplitButton__primaryActionButton{border-left-color:var(--colorTransparentBackgroundPressed);}",
".f11fwhjz:hover .fui-SplitButton__primaryActionButton{border-right-color:var(--colorNeutralStrokeDisabled);}",
".f18vtcsx:hover .fui-SplitButton__primaryActionButton{border-left-color:var(--colorNeutralStrokeDisabled);}",
".f31btwb:hover:active .fui-SplitButton__primaryActionButton{border-right-color:var(--colorNeutralStrokeDisabled);}",
".fzgm9gq:hover:active .fui-SplitButton__primaryActionButton{border-left-color:var(--colorNeutralStrokeDisabled);}"
],
m: [
[
"@media (forced-colors: active){.ff0tx2l .fui-SplitButton__primaryActionButton{border-right-color:HighlightText;}.fnrj3rw .fui-SplitButton__primaryActionButton{border-left-color:HighlightText;}}",
{
m: "(forced-colors: active)"
}
],
[
"@media (forced-colors: active){.f1m2s8ie:hover .fui-SplitButton__primaryActionButton{border-left-color:Highlight;}.f3jppgx:hover .fui-SplitButton__primaryActionButton{border-right-color:Highlight;}}",
{
m: "(forced-colors: active)"
}
],
[
"@media (forced-colors: active){.f96h41g:hover:active .fui-SplitButton__primaryActionButton{border-right-color:Highlight;}.fdxf0pi:hover:active .fui-SplitButton__primaryActionButton{border-left-color:Highlight;}}",
{
m: "(forced-colors: active)"
}
],
[
"@media (forced-colors: active){.f13tct40 .fui-SplitButton__primaryActionButton{border-left-color:GrayText;}.fj2q5vi .fui-SplitButton__primaryActionButton{border-right-color:GrayText;}}",
{
m: "(forced-colors: active)"
}
],
[
"@media (forced-colors: active){.f179dhpp:hover .fui-SplitButton__primaryActionButton{border-left-color:GrayText;}.fb2mzc7:hover .fui-SplitButton__primaryActionButton{border-right-color:GrayText;}}",
{
m: "(forced-colors: active)"
}
],
[
"@media (forced-colors: active){.f1ma39qa:hover:active .fui-SplitButton__primaryActionButton{border-right-color:GrayText;}.f1nzpdru:hover:active .fui-SplitButton__primaryActionButton{border-left-color:GrayText;}}",
{
m: "(forced-colors: active)"
}
]
]
});
const useSplitButtonStyles_unstable = (state)=>{
'use no memo';
const rootStyles = useRootStyles();
const focusStyles = useFocusStyles();
const { appearance, disabled, disabledFocusable } = state;
state.root.className = (0, _react.mergeClasses)(splitButtonClassNames.root, rootStyles.base, appearance && rootStyles[appearance], (disabled || disabledFocusable) && rootStyles.disabled, (disabled || disabledFocusable) && rootStyles.disabledHighContrast, state.root.className);
if (state.menuButton) {
state.menuButton.className = (0, _react.mergeClasses)(splitButtonClassNames.menuButton, focusStyles.menuButton, state.menuButton.className);
}
if (state.primaryActionButton) {
state.primaryActionButton.className = (0, _react.mergeClasses)(splitButtonClassNames.primaryActionButton, focusStyles.primaryActionButton, state.primaryActionButton.className);
}
return state;
};
File diff suppressed because one or more lines are too long
@@ -0,0 +1,24 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "ToggleButton", {
enumerable: true,
get: function() {
return ToggleButton;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _renderToggleButton = require("./renderToggleButton");
const _useToggleButton = require("./useToggleButton");
const _useToggleButtonStylesstyles = require("./useToggleButtonStyles.styles");
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
const ToggleButton = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
const state = (0, _useToggleButton.useToggleButton_unstable)(props, ref);
(0, _useToggleButtonStylesstyles.useToggleButtonStyles_unstable)(state);
(0, _reactsharedcontexts.useCustomStyleHook_unstable)('useToggleButtonStyles_unstable')(state);
return (0, _renderToggleButton.renderToggleButton_unstable)(state);
// Casting is required due to lack of distributive union to support unions on @types/react
});
ToggleButton.displayName = 'ToggleButton';
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/ToggleButton/ToggleButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { renderToggleButton_unstable } from './renderToggleButton';\nimport { useToggleButton_unstable } from './useToggleButton';\nimport { useToggleButtonStyles_unstable } from './useToggleButtonStyles.styles';\nimport type { ToggleButtonProps } from './ToggleButton.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * ToggleButtons are buttons that toggle between two defined states when triggered.\n */\nexport const ToggleButton: ForwardRefComponent<ToggleButtonProps> = React.forwardRef((props, ref) => {\n const state = useToggleButton_unstable(props, ref);\n\n useToggleButtonStyles_unstable(state);\n\n useCustomStyleHook_unstable('useToggleButtonStyles_unstable')(state);\n\n return renderToggleButton_unstable(state);\n // Casting is required due to lack of distributive union to support unions on @types/react\n}) as ForwardRefComponent<ToggleButtonProps>;\n\nToggleButton.displayName = 'ToggleButton';\n"],"names":["ToggleButton","React","forwardRef","props","ref","state","useToggleButton_unstable","useToggleButtonStyles_unstable","useCustomStyleHook_unstable","renderToggleButton_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAWaA;;;eAAAA;;;;iEAXU;oCACqB;iCACH;6CACM;qCAGH;AAKrC,MAAMA,eAAAA,WAAAA,GAAuDC,OAAMC,UAAU,CAAC,CAACC,OAAOC;IAC3F,MAAMC,QAAQC,IAAAA,yCAAAA,EAAyBH,OAAOC;IAE9CG,IAAAA,2DAAAA,EAA+BF;IAE/BG,IAAAA,gDAAAA,EAA4B,kCAAkCH;IAE9D,OAAOI,IAAAA,+CAAAA,EAA4BJ;AACnC,0FAA0F;AAC5F;AAEAL,aAAaU,WAAW,GAAG"}
@@ -0,0 +1,4 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/ToggleButton/ToggleButton.types.ts"],"sourcesContent":["import type { ButtonProps, ButtonState } from '../Button/Button.types';\n\nexport type ToggleButtonProps = ButtonProps & {\n /**\n * Defines whether the `ToggleButton` is initially in a checked state or not when rendered.\n *\n * @default false\n */\n defaultChecked?: boolean;\n\n /**\n * Defines the controlled checked state of the `ToggleButton`.\n * If passed, `ToggleButton` ignores the `defaultChecked` property.\n * This should only be used if the checked state is to be controlled at a higher level and there is a plan to pass the\n * correct value based on handling `onClick` events and re-rendering.\n *\n * @default false\n */\n checked?: boolean;\n};\n\nexport type ToggleButtonState = ButtonState & Required<Pick<ToggleButtonProps, 'checked'>>;\n"],"names":[],"rangeMappings":"","mappings":""}
@@ -0,0 +1,31 @@
"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, {
ToggleButton: function() {
return _ToggleButton.ToggleButton;
},
renderToggleButton_unstable: function() {
return _renderToggleButton.renderToggleButton_unstable;
},
toggleButtonClassNames: function() {
return _useToggleButtonStylesstyles.toggleButtonClassNames;
},
useToggleButtonStyles_unstable: function() {
return _useToggleButtonStylesstyles.useToggleButtonStyles_unstable;
},
useToggleButton_unstable: function() {
return _useToggleButton.useToggleButton_unstable;
}
});
const _ToggleButton = require("./ToggleButton");
const _renderToggleButton = require("./renderToggleButton");
const _useToggleButton = require("./useToggleButton");
const _useToggleButtonStylesstyles = require("./useToggleButtonStyles.styles");
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/ToggleButton/index.ts"],"sourcesContent":["export { ToggleButton } from './ToggleButton';\nexport type { ToggleButtonProps, ToggleButtonState } from './ToggleButton.types';\nexport { renderToggleButton_unstable } from './renderToggleButton';\nexport { useToggleButton_unstable } from './useToggleButton';\nexport { toggleButtonClassNames, useToggleButtonStyles_unstable } from './useToggleButtonStyles.styles';\n"],"names":["ToggleButton","renderToggleButton_unstable","toggleButtonClassNames","useToggleButtonStyles_unstable","useToggleButton_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAASA,YAAY;eAAZA,0BAAY;;IAEZC,2BAA2B;eAA3BA,+CAA2B;;IAE3BC,sBAAsB;eAAtBA,mDAAsB;;IAAEC,8BAA8B;eAA9BA,2DAA8B;;IADtDC,wBAAwB;eAAxBA,yCAAwB;;;8BAHJ;oCAEe;iCACH;6CAC8B"}
@@ -0,0 +1,11 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "renderToggleButton_unstable", {
enumerable: true,
get: function() {
return _renderButton.renderButton_unstable;
}
});
const _renderButton = require("../Button/renderButton");
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/ToggleButton/renderToggleButton.tsx"],"sourcesContent":["export { renderButton_unstable as renderToggleButton_unstable } from '../Button/renderButton';\n"],"names":["renderToggleButton_unstable","renderButton_unstable"],"rangeMappings":";;;;;;;;;;","mappings":";;;;+BAAkCA;;;eAAzBC,mCAAAA;;;8BAA4D"}
@@ -0,0 +1,18 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "useToggleButton_unstable", {
enumerable: true,
get: function() {
return useToggleButton_unstable;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _useToggleState = require("../../utils/useToggleState");
const _useButton = require("../Button/useButton");
const useToggleButton_unstable = (props, ref)=>{
const buttonState = (0, _useButton.useButton_unstable)(props, ref);
return (0, _useToggleState.useToggleState)(props, buttonState);
};
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/ToggleButton/useToggleButton.ts"],"sourcesContent":["import * as React from 'react';\nimport { useToggleState } from '../../utils/useToggleState';\nimport { useButton_unstable } from '../Button/useButton';\nimport type { ToggleButtonProps, ToggleButtonState } from './ToggleButton.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 useToggleButton_unstable = (\n props: ToggleButtonProps,\n ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): ToggleButtonState => {\n const buttonState = useButton_unstable(props, ref);\n\n return useToggleState(props, buttonState);\n};\n"],"names":["useToggleButton_unstable","props","ref","buttonState","useButton_unstable","useToggleState"],"rangeMappings":";;;;;;;;;;;;;;;;;","mappings":";;;;+BAWaA;;;eAAAA;;;;iEAXU;gCACQ;2BACI;AAS5B,MAAMA,2BAA2B,CACtCC,OACAC;IAEA,MAAMC,cAAcC,IAAAA,6BAAAA,EAAmBH,OAAOC;IAE9C,OAAOG,IAAAA,8BAAAA,EAAeJ,OAAOE;AAC/B"}
@@ -0,0 +1,802 @@
"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, {
toggleButtonClassNames: function() {
return toggleButtonClassNames;
},
useToggleButtonStyles_unstable: function() {
return useToggleButtonStyles_unstable;
}
});
const _react = require("@griffel/react");
const _useButtonStylesstyles = require("../Button/useButtonStyles.styles");
const toggleButtonClassNames = {
root: 'fui-ToggleButton',
icon: 'fui-ToggleButton__icon'
};
const useRootCheckedStyles = /*#__PURE__*/ (0, _react.__styles)({
base: {
De3pzq: "f1nfm20t",
g2u3we: "fj3muxo",
h3c5rm: [
"f1akhkt",
"f1lxtadh"
],
B9xav0g: "f1aperda",
zhjwy3: [
"f1lxtadh",
"f1akhkt"
],
sj55zd: "f14nttnl",
B4j52fo: "f192inf7",
Bekrc4i: [
"f5tn483",
"f1ojsxk5"
],
Bn0qgzm: "f1vxd6vx",
ibv6hh: [
"f1ojsxk5",
"f5tn483"
],
D0sxk3: "fxoiby5",
t6yez3: "f15q0o9g",
Jwef8y: "f1knas48",
Bgoe8wy: "fvcxoqz",
Bwzppfd: [
"f1ub3y4t",
"f1m52nbi"
],
oetu4i: "f1xlaoq0",
gg5e9n: [
"f1m52nbi",
"f1ub3y4t"
],
Bi91k9c: "feu1g3u",
iro3zm: "f141de4g",
b661bw: "f11v6sdu",
Bk6r4ia: [
"f9yn8i4",
"f1ajwf28"
],
B9zn80p: "f1uwu36w",
Bpld233: [
"f1ajwf28",
"f9yn8i4"
],
B2d53fq: "f9olfzr"
},
highContrast: {
Bsw6fvg: "f1rirnrt",
Bjwas2f: "f132fbg1",
Bn1d65q: [
"f1ene5x0",
"fzbc999"
],
Bxeuatn: "f6jgcol",
n51gp8: [
"fzbc999",
"f1ene5x0"
],
Bbusuzp: "f1lkg8j3",
ycbfsm: "fkc42ay",
Bqrx1nm: "fq7113v",
pgvf35: "ff1wgvm",
Bh7lczh: [
"fiob0tu",
"f1x4h75k"
],
dpv3f4: "f1j6scgf",
Bpnjhaq: [
"f1x4h75k",
"fiob0tu"
],
ze5xyy: "f4xjyn1",
g2kj27: "fbgcvur",
Bf756sw: "f1ks1yx8",
Bow2dr7: [
"f1o6qegi",
"fmxjhhp"
],
Bvhedfk: "fcnxywj",
Gye4lf: [
"fmxjhhp",
"f1o6qegi"
],
pc6evw: "f9ddjv3",
F3bflw: 0,
mxns5l: 0,
B0tp99d: 0,
l9kbep: 0,
Bg4echp: 0,
o3nasb: 0,
B55dcl7: 0,
By5cl00: 0,
Bnk1xnq: 0,
gdbnj: 0,
Bw5jppy: 0,
B8jyv7h: 0,
ka51wi: 0,
G867l3: 0,
abbn9y: 0,
Btyszwp: 0,
Bi9mhhg: "f1mh9o5k",
B7d2ofm: "fkom8lu"
},
outline: {
De3pzq: "f1q9pm1r",
g2u3we: "fj3muxo",
h3c5rm: [
"f1akhkt",
"f1lxtadh"
],
B9xav0g: "f1aperda",
zhjwy3: [
"f1lxtadh",
"f1akhkt"
],
B4j52fo: "fgx37oo",
Bekrc4i: [
"f130t4y6",
"f1efpmoh"
],
Bn0qgzm: "fv51ejd",
ibv6hh: [
"f1efpmoh",
"f130t4y6"
],
Jwef8y: "fjxutwb",
iro3zm: "fwiml72",
B8q5s1w: "fcaw57c",
Bci5o5g: [
"fpwd27e",
"f1999bjr"
],
n8qw10: "f1hi52o4",
Bdrgwmp: [
"f1999bjr",
"fpwd27e"
]
},
primary: {
De3pzq: "f8w4g0q",
g2u3we: "f1p3nwhy",
h3c5rm: [
"f11589ue",
"f1pdflbu"
],
B9xav0g: "f1q5o8ev",
zhjwy3: [
"f1pdflbu",
"f11589ue"
],
sj55zd: "f1phragk",
Jwef8y: "f15wkkf3",
Bgoe8wy: "f1s2uweq",
Bwzppfd: [
"fr80ssc",
"fecsdlb"
],
oetu4i: "f1ukrpxl",
gg5e9n: [
"fecsdlb",
"fr80ssc"
],
Bi91k9c: "f1rq72xc",
iro3zm: "fnp9lpt",
b661bw: "f1h0usnq",
Bk6r4ia: [
"fs4ktlq",
"fx2bmrt"
],
B9zn80p: "f16h9ulv",
Bpld233: [
"fx2bmrt",
"fs4ktlq"
],
B2d53fq: "f1d6v5y2"
},
secondary: {},
subtle: {
De3pzq: "fq5gl1p",
g2u3we: "f1p3nwhy",
h3c5rm: [
"f11589ue",
"f1pdflbu"
],
B9xav0g: "f1q5o8ev",
zhjwy3: [
"f1pdflbu",
"f11589ue"
],
sj55zd: "f1eryozh",
Jwef8y: "f1t94bn6",
Bgoe8wy: "f1s2uweq",
Bwzppfd: [
"fr80ssc",
"fecsdlb"
],
oetu4i: "f1ukrpxl",
gg5e9n: [
"fecsdlb",
"fr80ssc"
],
Bi91k9c: "fnwyq0v",
iro3zm: "fsv2rcd",
b661bw: "f1h0usnq",
Bk6r4ia: [
"fs4ktlq",
"fx2bmrt"
],
B9zn80p: "f16h9ulv",
Bpld233: [
"fx2bmrt",
"fs4ktlq"
],
B2d53fq: "f1omzyqd"
},
transparent: {
De3pzq: "f1q9pm1r",
g2u3we: "f1p3nwhy",
h3c5rm: [
"f11589ue",
"f1pdflbu"
],
B9xav0g: "f1q5o8ev",
zhjwy3: [
"f1pdflbu",
"f11589ue"
],
sj55zd: "f1qj7y59",
Jwef8y: "fjxutwb",
Bgoe8wy: "f1s2uweq",
Bwzppfd: [
"fr80ssc",
"fecsdlb"
],
oetu4i: "f1ukrpxl",
gg5e9n: [
"fecsdlb",
"fr80ssc"
],
Bi91k9c: "f139oj5f",
iro3zm: "fwiml72",
b661bw: "f1h0usnq",
Bk6r4ia: [
"fs4ktlq",
"fx2bmrt"
],
B9zn80p: "f16h9ulv",
Bpld233: [
"fx2bmrt",
"fs4ktlq"
],
B2d53fq: "f1fg1p5m"
}
}, {
d: [
".f1nfm20t{background-color:var(--colorNeutralBackground1Selected);}",
".fj3muxo{border-top-color:var(--colorNeutralStroke1);}",
".f1akhkt{border-right-color:var(--colorNeutralStroke1);}",
".f1lxtadh{border-left-color:var(--colorNeutralStroke1);}",
".f1aperda{border-bottom-color:var(--colorNeutralStroke1);}",
".f14nttnl{color:var(--colorNeutralForeground1Selected);}",
".f192inf7{border-top-width:var(--strokeWidthThin);}",
".f5tn483{border-right-width:var(--strokeWidthThin);}",
".f1ojsxk5{border-left-width:var(--strokeWidthThin);}",
".f1vxd6vx{border-bottom-width:var(--strokeWidthThin);}",
".fxoiby5 .fui-Icon-filled{display:inline;}",
".f15q0o9g .fui-Icon-regular{display:none;}",
".f1q9pm1r{background-color:var(--colorTransparentBackgroundSelected);}",
".fgx37oo{border-top-width:var(--strokeWidthThicker);}",
".f130t4y6{border-right-width:var(--strokeWidthThicker);}",
".f1efpmoh{border-left-width:var(--strokeWidthThicker);}",
".fv51ejd{border-bottom-width:var(--strokeWidthThicker);}",
".fcaw57c[data-fui-focus-visible]{border-top-color:var(--colorNeutralStroke1);}",
".fpwd27e[data-fui-focus-visible]{border-right-color:var(--colorNeutralStroke1);}",
".f1999bjr[data-fui-focus-visible]{border-left-color:var(--colorNeutralStroke1);}",
".f1hi52o4[data-fui-focus-visible]{border-bottom-color:var(--colorNeutralStroke1);}",
".f8w4g0q{background-color:var(--colorBrandBackgroundSelected);}",
".f1p3nwhy{border-top-color:transparent;}",
".f11589ue{border-right-color:transparent;}",
".f1pdflbu{border-left-color:transparent;}",
".f1q5o8ev{border-bottom-color:transparent;}",
".f1phragk{color:var(--colorNeutralForegroundOnBrand);}",
".fq5gl1p{background-color:var(--colorSubtleBackgroundSelected);}",
".f1eryozh{color:var(--colorNeutralForeground2Selected);}",
".f1qj7y59{color:var(--colorNeutralForeground2BrandSelected);}"
],
h: [
".f1knas48:hover{background-color:var(--colorNeutralBackground1Hover);}",
".fvcxoqz:hover{border-top-color:var(--colorNeutralStroke1Hover);}",
".f1ub3y4t:hover{border-right-color:var(--colorNeutralStroke1Hover);}",
".f1m52nbi:hover{border-left-color:var(--colorNeutralStroke1Hover);}",
".f1xlaoq0:hover{border-bottom-color:var(--colorNeutralStroke1Hover);}",
".feu1g3u:hover{color:var(--colorNeutralForeground1Hover);}",
".f141de4g:hover:active{background-color:var(--colorNeutralBackground1Pressed);}",
".f11v6sdu:hover:active{border-top-color:var(--colorNeutralStroke1Pressed);}",
".f9yn8i4:hover:active{border-right-color:var(--colorNeutralStroke1Pressed);}",
".f1ajwf28:hover:active{border-left-color:var(--colorNeutralStroke1Pressed);}",
".f1uwu36w:hover:active{border-bottom-color:var(--colorNeutralStroke1Pressed);}",
".f9olfzr:hover:active{color:var(--colorNeutralForeground1Pressed);}",
".fjxutwb:hover{background-color:var(--colorTransparentBackgroundHover);}",
".fwiml72:hover:active{background-color:var(--colorTransparentBackgroundPressed);}",
".f15wkkf3:hover{background-color:var(--colorBrandBackgroundHover);}",
".f1s2uweq:hover{border-top-color:transparent;}",
".fr80ssc:hover{border-right-color:transparent;}",
".fecsdlb:hover{border-left-color:transparent;}",
".f1ukrpxl:hover{border-bottom-color:transparent;}",
".f1rq72xc:hover{color:var(--colorNeutralForegroundOnBrand);}",
".fnp9lpt:hover:active{background-color:var(--colorBrandBackgroundPressed);}",
".f1h0usnq:hover:active{border-top-color:transparent;}",
".fs4ktlq:hover:active{border-right-color:transparent;}",
".fx2bmrt:hover:active{border-left-color:transparent;}",
".f16h9ulv:hover:active{border-bottom-color:transparent;}",
".f1d6v5y2:hover:active{color:var(--colorNeutralForegroundOnBrand);}",
".f1t94bn6:hover{background-color:var(--colorSubtleBackgroundHover);}",
".fnwyq0v:hover{color:var(--colorNeutralForeground2Hover);}",
".fsv2rcd:hover:active{background-color:var(--colorSubtleBackgroundPressed);}",
".f1omzyqd:hover:active{color:var(--colorNeutralForeground2Pressed);}",
".f139oj5f:hover{color:var(--colorNeutralForeground2BrandHover);}",
".f1fg1p5m:hover:active{color:var(--colorNeutralForeground2BrandPressed);}"
],
m: [
[
"@media (forced-colors: active){.f1rirnrt{background-color:Highlight;}}",
{
m: "(forced-colors: active)"
}
],
[
"@media (forced-colors: active){.f132fbg1{border-top-color:Highlight;}}",
{
m: "(forced-colors: active)"
}
],
[
"@media (forced-colors: active){.f1ene5x0{border-right-color:Highlight;}.fzbc999{border-left-color:Highlight;}}",
{
m: "(forced-colors: active)"
}
],
[
"@media (forced-colors: active){.f6jgcol{border-bottom-color:Highlight;}}",
{
m: "(forced-colors: active)"
}
],
[
"@media (forced-colors: active){.f1lkg8j3{color:HighlightText;}}",
{
m: "(forced-colors: active)"
}
],
[
"@media (forced-colors: active){.fkc42ay{forced-color-adjust:none;}}",
{
m: "(forced-colors: active)"
}
],
[
"@media (forced-colors: active){.fq7113v:hover{background-color:HighlightText;}}",
{
m: "(forced-colors: active)"
}
],
[
"@media (forced-colors: active){.ff1wgvm:hover{border-top-color:Highlight;}}",
{
m: "(forced-colors: active)"
}
],
[
"@media (forced-colors: active){.f1x4h75k:hover{border-left-color:Highlight;}.fiob0tu:hover{border-right-color:Highlight;}}",
{
m: "(forced-colors: active)"
}
],
[
"@media (forced-colors: active){.f1j6scgf:hover{border-bottom-color:Highlight;}}",
{
m: "(forced-colors: active)"
}
],
[
"@media (forced-colors: active){.f4xjyn1:hover{color:Highlight;}}",
{
m: "(forced-colors: active)"
}
],
[
"@media (forced-colors: active){.fbgcvur:hover:active{background-color:HighlightText;}}",
{
m: "(forced-colors: active)"
}
],
[
"@media (forced-colors: active){.f1ks1yx8:hover:active{border-top-color:Highlight;}}",
{
m: "(forced-colors: active)"
}
],
[
"@media (forced-colors: active){.f1o6qegi:hover:active{border-right-color:Highlight;}.fmxjhhp:hover:active{border-left-color:Highlight;}}",
{
m: "(forced-colors: active)"
}
],
[
"@media (forced-colors: active){.fcnxywj:hover:active{border-bottom-color:Highlight;}}",
{
m: "(forced-colors: active)"
}
],
[
"@media (forced-colors: active){.f9ddjv3:hover:active{color:Highlight;}}",
{
m: "(forced-colors: active)"
}
],
[
"@media (forced-colors: active){.f1mh9o5k:focus{border:1px solid HighlightText;}}",
{
p: -2,
m: "(forced-colors: active)"
}
],
[
"@media (forced-colors: active){.fkom8lu:focus{outline-color:Highlight;}}",
{
m: "(forced-colors: active)"
}
]
]
});
const useRootDisabledStyles = /*#__PURE__*/ (0, _react.__styles)({
base: {
De3pzq: "f1bg9a2p",
g2u3we: "f1jj8ep1",
h3c5rm: [
"f15xbau",
"fy0fskl"
],
B9xav0g: "f4ikngz",
zhjwy3: [
"fy0fskl",
"f15xbau"
],
sj55zd: "f1s2aq7o",
Jwef8y: "f1falr9n",
Bgoe8wy: "f12mpcsy",
Bwzppfd: [
"f1gwvigk",
"f18rmfxp"
],
oetu4i: "f1jnshp0",
gg5e9n: [
"f18rmfxp",
"f1gwvigk"
],
Bi91k9c: "fvgxktp",
iro3zm: "f1t6o4dc",
b661bw: "f10ztigi",
Bk6r4ia: [
"f1ft5sdu",
"f1gzf82w"
],
B9zn80p: "f12zbtn2",
Bpld233: [
"f1gzf82w",
"f1ft5sdu"
],
B2d53fq: "fcvwxyo"
},
outline: {},
primary: {
g2u3we: "f1p3nwhy",
h3c5rm: [
"f11589ue",
"f1pdflbu"
],
B9xav0g: "f1q5o8ev",
zhjwy3: [
"f1pdflbu",
"f11589ue"
],
Bgoe8wy: "f1s2uweq",
Bwzppfd: [
"fr80ssc",
"fecsdlb"
],
oetu4i: "f1ukrpxl",
gg5e9n: [
"fecsdlb",
"fr80ssc"
],
b661bw: "f1h0usnq",
Bk6r4ia: [
"fs4ktlq",
"fx2bmrt"
],
B9zn80p: "f16h9ulv",
Bpld233: [
"fx2bmrt",
"fs4ktlq"
]
},
secondary: {},
subtle: {
De3pzq: "f1c21dwh",
g2u3we: "f1p3nwhy",
h3c5rm: [
"f11589ue",
"f1pdflbu"
],
B9xav0g: "f1q5o8ev",
zhjwy3: [
"f1pdflbu",
"f11589ue"
],
Jwef8y: "fjxutwb",
Bgoe8wy: "f1s2uweq",
Bwzppfd: [
"fr80ssc",
"fecsdlb"
],
oetu4i: "f1ukrpxl",
gg5e9n: [
"fecsdlb",
"fr80ssc"
],
iro3zm: "fwiml72",
b661bw: "f1h0usnq",
Bk6r4ia: [
"fs4ktlq",
"fx2bmrt"
],
B9zn80p: "f16h9ulv",
Bpld233: [
"fx2bmrt",
"fs4ktlq"
]
},
transparent: {
De3pzq: "f1c21dwh",
g2u3we: "f1p3nwhy",
h3c5rm: [
"f11589ue",
"f1pdflbu"
],
B9xav0g: "f1q5o8ev",
zhjwy3: [
"f1pdflbu",
"f11589ue"
],
Jwef8y: "fjxutwb",
Bgoe8wy: "f1s2uweq",
Bwzppfd: [
"fr80ssc",
"fecsdlb"
],
oetu4i: "f1ukrpxl",
gg5e9n: [
"fecsdlb",
"fr80ssc"
],
iro3zm: "fwiml72",
b661bw: "f1h0usnq",
Bk6r4ia: [
"fs4ktlq",
"fx2bmrt"
],
B9zn80p: "f16h9ulv",
Bpld233: [
"fx2bmrt",
"fs4ktlq"
]
}
}, {
d: [
".f1bg9a2p{background-color:var(--colorNeutralBackgroundDisabled);}",
".f1jj8ep1{border-top-color:var(--colorNeutralStrokeDisabled);}",
".f15xbau{border-right-color:var(--colorNeutralStrokeDisabled);}",
".fy0fskl{border-left-color:var(--colorNeutralStrokeDisabled);}",
".f4ikngz{border-bottom-color:var(--colorNeutralStrokeDisabled);}",
".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}",
".f1p3nwhy{border-top-color:transparent;}",
".f11589ue{border-right-color:transparent;}",
".f1pdflbu{border-left-color:transparent;}",
".f1q5o8ev{border-bottom-color:transparent;}",
".f1c21dwh{background-color:var(--colorTransparentBackground);}"
],
h: [
".f1falr9n:hover{background-color:var(--colorNeutralBackgroundDisabled);}",
".f12mpcsy:hover{border-top-color:var(--colorNeutralStrokeDisabled);}",
".f1gwvigk:hover{border-right-color:var(--colorNeutralStrokeDisabled);}",
".f18rmfxp:hover{border-left-color:var(--colorNeutralStrokeDisabled);}",
".f1jnshp0:hover{border-bottom-color:var(--colorNeutralStrokeDisabled);}",
".fvgxktp:hover{color:var(--colorNeutralForegroundDisabled);}",
".f1t6o4dc:hover:active{background-color:var(--colorNeutralBackgroundDisabled);}",
".f10ztigi:hover:active{border-top-color:var(--colorNeutralStrokeDisabled);}",
".f1ft5sdu:hover:active{border-right-color:var(--colorNeutralStrokeDisabled);}",
".f1gzf82w:hover:active{border-left-color:var(--colorNeutralStrokeDisabled);}",
".f12zbtn2:hover:active{border-bottom-color:var(--colorNeutralStrokeDisabled);}",
".fcvwxyo:hover:active{color:var(--colorNeutralForegroundDisabled);}",
".f1s2uweq:hover{border-top-color:transparent;}",
".fr80ssc:hover{border-right-color:transparent;}",
".fecsdlb:hover{border-left-color:transparent;}",
".f1ukrpxl:hover{border-bottom-color:transparent;}",
".f1h0usnq:hover:active{border-top-color:transparent;}",
".fs4ktlq:hover:active{border-right-color:transparent;}",
".fx2bmrt:hover:active{border-left-color:transparent;}",
".f16h9ulv:hover:active{border-bottom-color:transparent;}",
".fjxutwb:hover{background-color:var(--colorTransparentBackgroundHover);}",
".fwiml72:hover:active{background-color:var(--colorTransparentBackgroundPressed);}"
]
});
const useIconCheckedStyles = /*#__PURE__*/ (0, _react.__styles)({
subtleOrTransparent: {
sj55zd: "f1qj7y59"
},
highContrast: {
ycbfsm: "fg4l7m0"
}
}, {
d: [
".f1qj7y59{color:var(--colorNeutralForeground2BrandSelected);}"
],
m: [
[
"@media (forced-colors: active){.fg4l7m0{forced-color-adjust:auto;}}",
{
m: "(forced-colors: active)"
}
]
]
});
const usePrimaryHighContrastStyles = /*#__PURE__*/ (0, _react.__styles)({
base: {
Bsw6fvg: "f4lkoma",
Bjwas2f: "f1bauw5b",
Bn1d65q: [
"fbpknfk",
"fedl69w"
],
Bxeuatn: "f15s25nd",
n51gp8: [
"fedl69w",
"fbpknfk"
],
Bbusuzp: "f1e4kh5",
ycbfsm: "fg4l7m0"
},
disabled: {
Bjwas2f: "fg455y9",
Bn1d65q: [
"f1rvyvqg",
"f14g86mu"
],
Bxeuatn: "f1cwzwz",
n51gp8: [
"f14g86mu",
"f1rvyvqg"
],
Bbusuzp: "f1dcs8yz",
G867l3: "fjwq6ea",
gdbnj: [
"f1lr3nhc",
"f1mbxvi6"
],
mxns5l: "fn5gmvv",
o3nasb: [
"f1mbxvi6",
"f1lr3nhc"
]
}
}, {
m: [
[
"@media (forced-colors: active){.f4lkoma{background-color:ButtonFace;}}",
{
m: "(forced-colors: active)"
}
],
[
"@media (forced-colors: active){.f1bauw5b{border-top-color:ButtonBorder;}}",
{
m: "(forced-colors: active)"
}
],
[
"@media (forced-colors: active){.fbpknfk{border-right-color:ButtonBorder;}.fedl69w{border-left-color:ButtonBorder;}}",
{
m: "(forced-colors: active)"
}
],
[
"@media (forced-colors: active){.f15s25nd{border-bottom-color:ButtonBorder;}}",
{
m: "(forced-colors: active)"
}
],
[
"@media (forced-colors: active){.f1e4kh5{color:ButtonText;}}",
{
m: "(forced-colors: active)"
}
],
[
"@media (forced-colors: active){.fg4l7m0{forced-color-adjust:auto;}}",
{
m: "(forced-colors: active)"
}
],
[
"@media (forced-colors: active){.fg455y9{border-top-color:GrayText;}}",
{
m: "(forced-colors: active)"
}
],
[
"@media (forced-colors: active){.f14g86mu{border-left-color:GrayText;}.f1rvyvqg{border-right-color:GrayText;}}",
{
m: "(forced-colors: active)"
}
],
[
"@media (forced-colors: active){.f1cwzwz{border-bottom-color:GrayText;}}",
{
m: "(forced-colors: active)"
}
],
[
"@media (forced-colors: active){.f1dcs8yz{color:GrayText;}}",
{
m: "(forced-colors: active)"
}
],
[
"@media (forced-colors: active){.fjwq6ea:focus{border-top-color:GrayText;}}",
{
m: "(forced-colors: active)"
}
],
[
"@media (forced-colors: active){.f1lr3nhc:focus{border-right-color:GrayText;}.f1mbxvi6:focus{border-left-color:GrayText;}}",
{
m: "(forced-colors: active)"
}
],
[
"@media (forced-colors: active){.fn5gmvv:focus{border-bottom-color:GrayText;}}",
{
m: "(forced-colors: active)"
}
]
]
});
const useToggleButtonStyles_unstable = (state)=>{
'use no memo';
const rootCheckedStyles = useRootCheckedStyles();
const rootDisabledStyles = useRootDisabledStyles();
const iconCheckedStyles = useIconCheckedStyles();
const primaryHighContrastStyles = usePrimaryHighContrastStyles();
const { appearance, checked, disabled, disabledFocusable } = state;
state.root.className = (0, _react.mergeClasses)(toggleButtonClassNames.root, // Primary high contrast styles
appearance === 'primary' && primaryHighContrastStyles.base, appearance === 'primary' && (disabled || disabledFocusable) && primaryHighContrastStyles.disabled, // Checked styles
checked && rootCheckedStyles.base, checked && rootCheckedStyles.highContrast, appearance && checked && rootCheckedStyles[appearance], // Disabled styles
(disabled || disabledFocusable) && rootDisabledStyles.base, appearance && (disabled || disabledFocusable) && rootDisabledStyles[appearance], // User provided class name
state.root.className);
if (state.icon) {
state.icon.className = (0, _react.mergeClasses)(toggleButtonClassNames.icon, checked && (appearance === 'subtle' || appearance === 'transparent') && iconCheckedStyles.subtleOrTransparent, iconCheckedStyles.highContrast, state.icon.className);
}
(0, _useButtonStylesstyles.useButtonStyles_unstable)(state);
return state;
};
File diff suppressed because one or more lines are too long
@@ -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, {
ButtonContextProvider: function() {
return ButtonContextProvider;
},
useButtonContext: function() {
return useButtonContext;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const buttonContext = /*#__PURE__*/ _react.createContext(undefined);
const buttonContextDefaultValue = {};
const ButtonContextProvider = buttonContext.Provider;
const useButtonContext = ()=>{
var _React_useContext;
return (_React_useContext = _react.useContext(buttonContext)) !== null && _React_useContext !== void 0 ? _React_useContext : buttonContextDefaultValue;
};
@@ -0,0 +1 @@
{"version":3,"sources":["../src/contexts/ButtonContext.ts"],"sourcesContent":["import * as React from 'react';\nimport { ButtonSize } from '../components/Button/Button.types';\n\nconst buttonContext = React.createContext<ButtonContextValue | undefined>(undefined);\n\n/**\n * @internal\n * Internal context value used to update default values between internal components\n */\nexport interface ButtonContextValue {\n size?: ButtonSize;\n}\n\nconst buttonContextDefaultValue: ButtonContextValue = {};\n\n/**\n * @internal\n * Internal context provider used to update default values between internal components\n */\nexport const ButtonContextProvider = buttonContext.Provider;\n\n/**\n * @internal\n * Internal context hook used to update default values between internal components\n */\nexport const useButtonContext = () => React.useContext(buttonContext) ?? buttonContextDefaultValue;\n"],"names":["ButtonContextProvider","useButtonContext","buttonContext","React","createContext","undefined","buttonContextDefaultValue","Provider","useContext"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAmBaA,qBAAAA;eAAAA;;IAMAC,gBAAAA;eAAAA;;;;iEAzBU;AAGvB,MAAMC,8BAAgBC,OAAMC,aAAa,CAAiCC;AAU1E,MAAMC,4BAAgD,CAAC;AAMhD,MAAMN,wBAAwBE,cAAcK,QAAQ;AAMpD,MAAMN,mBAAmB;QAAME;WAAAA,CAAAA,oBAAAA,OAAMK,UAAU,CAACN,cAAAA,MAAAA,QAAjBC,sBAAAA,KAAAA,IAAAA,oBAAmCG;AAAwB"}
+19
View File
@@ -0,0 +1,19 @@
"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, {
ButtonContextProvider: function() {
return _ButtonContext.ButtonContextProvider;
},
useButtonContext: function() {
return _ButtonContext.useButtonContext;
}
});
const _ButtonContext = require("./ButtonContext");
@@ -0,0 +1 @@
{"version":3,"sources":["../src/contexts/index.ts"],"sourcesContent":["export type { ButtonContextValue } from './ButtonContext';\nexport { ButtonContextProvider, useButtonContext } from './ButtonContext';\n"],"names":["ButtonContextProvider","useButtonContext"],"rangeMappings":";;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IACSA,qBAAqB;eAArBA,oCAAqB;;IAAEC,gBAAgB;eAAhBA,+BAAgB;;;+BAAQ"}
+103
View File
@@ -0,0 +1,103 @@
"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, {
Button: function() {
return _Button.Button;
},
ButtonContextProvider: function() {
return _index1.ButtonContextProvider;
},
CompoundButton: function() {
return _CompoundButton.CompoundButton;
},
MenuButton: function() {
return _MenuButton.MenuButton;
},
SplitButton: function() {
return _SplitButton.SplitButton;
},
ToggleButton: function() {
return _ToggleButton.ToggleButton;
},
buttonClassNames: function() {
return _Button.buttonClassNames;
},
compoundButtonClassNames: function() {
return _CompoundButton.compoundButtonClassNames;
},
menuButtonClassNames: function() {
return _MenuButton.menuButtonClassNames;
},
renderButton_unstable: function() {
return _Button.renderButton_unstable;
},
renderCompoundButton_unstable: function() {
return _CompoundButton.renderCompoundButton_unstable;
},
renderMenuButton_unstable: function() {
return _MenuButton.renderMenuButton_unstable;
},
renderSplitButton_unstable: function() {
return _SplitButton.renderSplitButton_unstable;
},
renderToggleButton_unstable: function() {
return _ToggleButton.renderToggleButton_unstable;
},
splitButtonClassNames: function() {
return _SplitButton.splitButtonClassNames;
},
toggleButtonClassNames: function() {
return _ToggleButton.toggleButtonClassNames;
},
useButtonContext: function() {
return _index1.useButtonContext;
},
useButtonStyles_unstable: function() {
return _Button.useButtonStyles_unstable;
},
useButton_unstable: function() {
return _Button.useButton_unstable;
},
useCompoundButtonStyles_unstable: function() {
return _CompoundButton.useCompoundButtonStyles_unstable;
},
useCompoundButton_unstable: function() {
return _CompoundButton.useCompoundButton_unstable;
},
useMenuButtonStyles_unstable: function() {
return _MenuButton.useMenuButtonStyles_unstable;
},
useMenuButton_unstable: function() {
return _MenuButton.useMenuButton_unstable;
},
useSplitButtonStyles_unstable: function() {
return _SplitButton.useSplitButtonStyles_unstable;
},
useSplitButton_unstable: function() {
return _SplitButton.useSplitButton_unstable;
},
useToggleButtonStyles_unstable: function() {
return _ToggleButton.useToggleButtonStyles_unstable;
},
useToggleButton_unstable: function() {
return _ToggleButton.useToggleButton_unstable;
},
useToggleState: function() {
return _index.useToggleState;
}
});
const _Button = require("./Button");
const _CompoundButton = require("./CompoundButton");
const _MenuButton = require("./MenuButton");
const _SplitButton = require("./SplitButton");
const _ToggleButton = require("./ToggleButton");
const _index = require("./utils/index");
const _index1 = require("./contexts/index");
+1
View File
@@ -0,0 +1 @@
{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export {\n Button,\n buttonClassNames,\n renderButton_unstable,\n useButtonStyles_unstable,\n useButton_unstable,\n} from './Button';\nexport type { ButtonProps, ButtonSlots, ButtonState } from './Button';\nexport {\n CompoundButton,\n compoundButtonClassNames,\n renderCompoundButton_unstable,\n useCompoundButtonStyles_unstable,\n useCompoundButton_unstable,\n} from './CompoundButton';\nexport type { CompoundButtonProps, CompoundButtonSlots, CompoundButtonState } from './CompoundButton';\nexport {\n MenuButton,\n menuButtonClassNames,\n renderMenuButton_unstable,\n useMenuButtonStyles_unstable,\n useMenuButton_unstable,\n} from './MenuButton';\nexport type { MenuButtonProps, MenuButtonSlots, MenuButtonState } from './MenuButton';\nexport {\n SplitButton,\n renderSplitButton_unstable,\n splitButtonClassNames,\n useSplitButtonStyles_unstable,\n useSplitButton_unstable,\n} from './SplitButton';\nexport type { SplitButtonProps, SplitButtonSlots, SplitButtonState } from './SplitButton';\nexport {\n ToggleButton,\n renderToggleButton_unstable,\n toggleButtonClassNames,\n useToggleButtonStyles_unstable,\n useToggleButton_unstable,\n} from './ToggleButton';\nexport type { ToggleButtonProps, ToggleButtonState } from './ToggleButton';\n\nexport { useToggleState } from './utils/index';\n\nexport { ButtonContextProvider, useButtonContext } from './contexts/index';\nexport type { ButtonContextValue } from './contexts/index';\n"],"names":["Button","ButtonContextProvider","CompoundButton","MenuButton","SplitButton","ToggleButton","buttonClassNames","compoundButtonClassNames","menuButtonClassNames","renderButton_unstable","renderCompoundButton_unstable","renderMenuButton_unstable","renderSplitButton_unstable","renderToggleButton_unstable","splitButtonClassNames","toggleButtonClassNames","useButtonContext","useButtonStyles_unstable","useButton_unstable","useCompoundButtonStyles_unstable","useCompoundButton_unstable","useMenuButtonStyles_unstable","useMenuButton_unstable","useSplitButtonStyles_unstable","useSplitButton_unstable","useToggleButtonStyles_unstable","useToggleButton_unstable","useToggleState"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IACEA,MAAM;eAANA,cAAM;;IA0CCC,qBAAqB;eAArBA,6BAAqB;;IAlC5BC,cAAc;eAAdA,8BAAc;;IAQdC,UAAU;eAAVA,sBAAU;;IAQVC,WAAW;eAAXA,wBAAW;;IAQXC,YAAY;eAAZA,0BAAY;;IA/BZC,gBAAgB;eAAhBA,wBAAgB;;IAQhBC,wBAAwB;eAAxBA,wCAAwB;;IAQxBC,oBAAoB;eAApBA,gCAAoB;;IAfpBC,qBAAqB;eAArBA,6BAAqB;;IAQrBC,6BAA6B;eAA7BA,6CAA6B;;IAQ7BC,yBAAyB;eAAzBA,qCAAyB;;IAOzBC,0BAA0B;eAA1BA,uCAA0B;;IAQ1BC,2BAA2B;eAA3BA,yCAA2B;;IAP3BC,qBAAqB;eAArBA,kCAAqB;;IAQrBC,sBAAsB;eAAtBA,oCAAsB;;IAQQC,gBAAgB;eAAhBA,wBAAgB;;IAvC9CC,wBAAwB;eAAxBA,gCAAwB;;IACxBC,kBAAkB;eAAlBA,0BAAkB;;IAOlBC,gCAAgC;eAAhCA,gDAAgC;;IAChCC,0BAA0B;eAA1BA,0CAA0B;;IAO1BC,4BAA4B;eAA5BA,wCAA4B;;IAC5BC,sBAAsB;eAAtBA,kCAAsB;;IAOtBC,6BAA6B;eAA7BA,0CAA6B;;IAC7BC,uBAAuB;eAAvBA,oCAAuB;;IAOvBC,8BAA8B;eAA9BA,4CAA8B;;IAC9BC,wBAAwB;eAAxBA,sCAAwB;;IAIjBC,cAAc;eAAdA,qBAAc;;;wBAnChB;gCAQA;4BAQA;6BAQA;8BAQA;uBAGwB;wBAEyB"}
+11
View File
@@ -0,0 +1,11 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "useToggleState", {
enumerable: true,
get: function() {
return _useToggleState.useToggleState;
}
});
const _useToggleState = require("./useToggleState");
+1
View File
@@ -0,0 +1 @@
{"version":3,"sources":["../src/utils/index.ts"],"sourcesContent":["export { useToggleState } from './useToggleState';\n"],"names":["useToggleState"],"rangeMappings":";;;;;;;;;;","mappings":";;;;+BAASA;;;eAAAA,8BAAc;;;gCAAQ"}
@@ -0,0 +1,45 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "useToggleState", {
enumerable: true,
get: function() {
return useToggleState;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _reactutilities = require("@fluentui/react-utilities");
function useToggleState(props, state) {
const { checked, defaultChecked, disabled, disabledFocusable } = props;
const { onClick, role } = state.root;
const [checkedValue, setCheckedValue] = (0, _reactutilities.useControllableState)({
state: checked,
defaultState: defaultChecked,
initialState: false
});
const isCheckboxTypeRole = role === 'menuitemcheckbox' || role === 'checkbox';
const onToggleClick = _react.useCallback((ev)=>{
if (!disabled && !disabledFocusable) {
if (ev.defaultPrevented) {
return;
}
setCheckedValue(!checkedValue);
}
}, [
checkedValue,
disabled,
disabledFocusable,
setCheckedValue
]);
return {
...state,
checked: checkedValue,
root: {
...state.root,
[isCheckboxTypeRole ? 'aria-checked' : 'aria-pressed']: checkedValue,
onClick: (0, _reactutilities.useEventCallback)((0, _reactutilities.mergeCallbacks)(onClick, onToggleClick))
}
};
}
@@ -0,0 +1 @@
{"version":3,"sources":["../src/utils/useToggleState.ts"],"sourcesContent":["import * as React from 'react';\nimport { mergeCallbacks, useControllableState, useEventCallback } from '@fluentui/react-utilities';\nimport type { ButtonState } from '../Button';\nimport type { ToggleButtonProps, ToggleButtonState } from '../ToggleButton';\n\nexport function useToggleState<\n TToggleButtonProps extends Pick<ToggleButtonProps, 'checked' | 'defaultChecked' | 'disabled' | 'disabledFocusable'>,\n TButtonState extends Pick<ButtonState, 'root'>,\n TToggleButtonState extends Pick<ToggleButtonState, 'checked' | 'root'>,\n>(props: TToggleButtonProps, state: TButtonState): TToggleButtonState {\n const { checked, defaultChecked, disabled, disabledFocusable } = props;\n const { onClick, role } = state.root;\n\n const [checkedValue, setCheckedValue] = useControllableState({\n state: checked,\n defaultState: defaultChecked,\n initialState: false,\n });\n\n const isCheckboxTypeRole = role === 'menuitemcheckbox' || role === 'checkbox';\n\n const onToggleClick = React.useCallback(\n ev => {\n if (!disabled && !disabledFocusable) {\n if (ev.defaultPrevented) {\n return;\n }\n\n setCheckedValue(!checkedValue);\n }\n },\n [checkedValue, disabled, disabledFocusable, setCheckedValue],\n );\n\n return {\n ...state,\n\n checked: checkedValue,\n\n root: {\n ...state.root,\n [isCheckboxTypeRole ? 'aria-checked' : 'aria-pressed']: checkedValue,\n onClick: useEventCallback(\n mergeCallbacks(onClick as React.MouseEventHandler<HTMLButtonElement | HTMLAnchorElement>, onToggleClick),\n ),\n },\n } as TToggleButtonState;\n}\n"],"names":["useToggleState","props","state","checked","defaultChecked","disabled","disabledFocusable","onClick","role","root","checkedValue","setCheckedValue","useControllableState","defaultState","initialState","isCheckboxTypeRole","onToggleClick","React","useCallback","ev","defaultPrevented","useEventCallback","mergeCallbacks"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAKgBA;;;eAAAA;;;;iEALO;gCACgD;AAIhE,SAASA,eAIdC,KAAyB,EAAEC,KAAmB;IAC9C,MAAM,EAAEC,OAAO,EAAEC,cAAc,EAAEC,QAAQ,EAAEC,iBAAiB,EAAE,GAAGL;IACjE,MAAM,EAAEM,OAAO,EAAEC,IAAI,EAAE,GAAGN,MAAMO,IAAI;IAEpC,MAAM,CAACC,cAAcC,gBAAgB,GAAGC,IAAAA,oCAAAA,EAAqB;QAC3DV,OAAOC;QACPU,cAAcT;QACdU,cAAc;IAChB;IAEA,MAAMC,qBAAqBP,SAAS,sBAAsBA,SAAS;IAEnE,MAAMQ,gBAAgBC,OAAMC,WAAW,CACrCC,CAAAA;QACE,IAAI,CAACd,YAAY,CAACC,mBAAmB;YACnC,IAAIa,GAAGC,gBAAgB,EAAE;gBACvB;YACF;YAEAT,gBAAgB,CAACD;QACnB;IACF,GACA;QAACA;QAAcL;QAAUC;QAAmBK;KAAgB;IAG9D,OAAO;QACL,GAAGT,KAAK;QAERC,SAASO;QAETD,MAAM;YACJ,GAAGP,MAAMO,IAAI;YACb,CAACM,qBAAqB,iBAAiB,eAAe,EAAEL;YACxDH,SAASc,IAAAA,gCAAAA,EACPC,IAAAA,8BAAAA,EAAef,SAA2ES;QAE9F;IACF;AACF"}
+1
View File
@@ -0,0 +1 @@
export { Button, buttonClassNames, renderButton_unstable, useButtonStyles_unstable, useButton_unstable } from './components/Button/index';
+1
View File
@@ -0,0 +1 @@
{"version":3,"sources":["../src/Button.tsx"],"sourcesContent":["export type { ButtonProps, ButtonSlots, ButtonState } from './components/Button/index';\nexport {\n Button,\n buttonClassNames,\n renderButton_unstable,\n useButtonStyles_unstable,\n useButton_unstable,\n} from './components/Button/index';\n"],"names":["Button","buttonClassNames","renderButton_unstable","useButtonStyles_unstable","useButton_unstable"],"rangeMappings":"","mappings":"AACA,SACEA,MAAM,EACNC,gBAAgB,EAChBC,qBAAqB,EACrBC,wBAAwB,EACxBC,kBAAkB,QACb,4BAA4B"}
+1
View File
@@ -0,0 +1 @@
export { CompoundButton, compoundButtonClassNames, renderCompoundButton_unstable, useCompoundButtonStyles_unstable, useCompoundButton_unstable } from './components/CompoundButton/index';
+1
View File
@@ -0,0 +1 @@
{"version":3,"sources":["../src/CompoundButton.ts"],"sourcesContent":["export type { CompoundButtonProps, CompoundButtonSlots, CompoundButtonState } from './components/CompoundButton/index';\nexport {\n CompoundButton,\n compoundButtonClassNames,\n renderCompoundButton_unstable,\n useCompoundButtonStyles_unstable,\n useCompoundButton_unstable,\n} from './components/CompoundButton/index';\n"],"names":["CompoundButton","compoundButtonClassNames","renderCompoundButton_unstable","useCompoundButtonStyles_unstable","useCompoundButton_unstable"],"rangeMappings":"","mappings":"AACA,SACEA,cAAc,EACdC,wBAAwB,EACxBC,6BAA6B,EAC7BC,gCAAgC,EAChCC,0BAA0B,QACrB,oCAAoC"}
+1
View File
@@ -0,0 +1 @@
export { MenuButton, menuButtonClassNames, renderMenuButton_unstable, useMenuButtonStyles_unstable, useMenuButton_unstable } from './components/MenuButton/index';
+1
View File
@@ -0,0 +1 @@
{"version":3,"sources":["../src/MenuButton.ts"],"sourcesContent":["export type { MenuButtonProps, MenuButtonSlots, MenuButtonState } from './components/MenuButton/index';\nexport {\n MenuButton,\n menuButtonClassNames,\n renderMenuButton_unstable,\n useMenuButtonStyles_unstable,\n useMenuButton_unstable,\n} from './components/MenuButton/index';\n"],"names":["MenuButton","menuButtonClassNames","renderMenuButton_unstable","useMenuButtonStyles_unstable","useMenuButton_unstable"],"rangeMappings":"","mappings":"AACA,SACEA,UAAU,EACVC,oBAAoB,EACpBC,yBAAyB,EACzBC,4BAA4B,EAC5BC,sBAAsB,QACjB,gCAAgC"}
+1
View File
@@ -0,0 +1 @@
export { SplitButton, renderSplitButton_unstable, splitButtonClassNames, useSplitButtonStyles_unstable, useSplitButton_unstable } from './components/SplitButton/index';
+1
View File
@@ -0,0 +1 @@
{"version":3,"sources":["../src/SplitButton.ts"],"sourcesContent":["export type { SplitButtonProps, SplitButtonSlots, SplitButtonState } from './components/SplitButton/index';\nexport {\n SplitButton,\n renderSplitButton_unstable,\n splitButtonClassNames,\n useSplitButtonStyles_unstable,\n useSplitButton_unstable,\n} from './components/SplitButton/index';\n"],"names":["SplitButton","renderSplitButton_unstable","splitButtonClassNames","useSplitButtonStyles_unstable","useSplitButton_unstable"],"rangeMappings":"","mappings":"AACA,SACEA,WAAW,EACXC,0BAA0B,EAC1BC,qBAAqB,EACrBC,6BAA6B,EAC7BC,uBAAuB,QAClB,iCAAiC"}
+1
View File
@@ -0,0 +1 @@
export { ToggleButton, renderToggleButton_unstable, toggleButtonClassNames, useToggleButtonStyles_unstable, useToggleButton_unstable } from './components/ToggleButton/index';
+1
View File
@@ -0,0 +1 @@
{"version":3,"sources":["../src/ToggleButton.ts"],"sourcesContent":["export type { ToggleButtonProps, ToggleButtonState } from './components/ToggleButton/index';\nexport {\n ToggleButton,\n renderToggleButton_unstable,\n toggleButtonClassNames,\n useToggleButtonStyles_unstable,\n useToggleButton_unstable,\n} from './components/ToggleButton/index';\n"],"names":["ToggleButton","renderToggleButton_unstable","toggleButtonClassNames","useToggleButtonStyles_unstable","useToggleButton_unstable"],"rangeMappings":"","mappings":"AACA,SACEA,YAAY,EACZC,2BAA2B,EAC3BC,sBAAsB,EACtBC,8BAA8B,EAC9BC,wBAAwB,QACnB,kCAAkC"}
+15
View File
@@ -0,0 +1,15 @@
import * as React from 'react';
import { renderButton_unstable } from './renderButton';
import { useButton_unstable } from './useButton';
import { useButtonStyles_unstable } from './useButtonStyles.styles';
import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
/**
* Buttons give people a way to trigger an action.
*/ export const Button = /*#__PURE__*/ React.forwardRef((props, ref)=>{
const state = useButton_unstable(props, ref);
useButtonStyles_unstable(state);
useCustomStyleHook_unstable('useButtonStyles_unstable')(state);
return renderButton_unstable(state);
// Casting is required due to lack of distributive union to support unions on @types/react
});
Button.displayName = 'Button';
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Button/Button.tsx"],"sourcesContent":["import * as React from 'react';\nimport { renderButton_unstable } from './renderButton';\nimport { useButton_unstable } from './useButton';\nimport { useButtonStyles_unstable } from './useButtonStyles.styles';\nimport type { ButtonProps } from './Button.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * Buttons give people a way to trigger an action.\n */\nexport const Button: ForwardRefComponent<ButtonProps> = React.forwardRef((props, ref) => {\n const state = useButton_unstable(props, ref);\n\n useButtonStyles_unstable(state);\n\n useCustomStyleHook_unstable('useButtonStyles_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<ButtonProps>;\n\nButton.displayName = 'Button';\n"],"names":["React","renderButton_unstable","useButton_unstable","useButtonStyles_unstable","useCustomStyleHook_unstable","Button","forwardRef","props","ref","state","displayName"],"rangeMappings":";;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,qBAAqB,QAAQ,iBAAiB;AACvD,SAASC,kBAAkB,QAAQ,cAAc;AACjD,SAASC,wBAAwB,QAAQ,2BAA2B;AAGpE,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,uBAA2CL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IAC/E,MAAMC,QAAQP,mBAAmBK,OAAOC;IAExCL,yBAAyBM;IAEzBL,4BAA4B,4BAA4BK;IAExD,OAAOR,sBAAsBQ;AAC7B,0FAA0F;AAC5F,GAAuC;AAEvCJ,OAAOK,WAAW,GAAG"}
@@ -0,0 +1 @@
export { };
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Button/Button.types.ts"],"sourcesContent":["import type { ARIAButtonSlotProps } from '@fluentui/react-aria';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type ButtonSlots = {\n /**\n * Root of the component that renders as either a `<button>` tag or an `<a>` tag.\n */\n root: NonNullable<Slot<ARIAButtonSlotProps<'a'>>>;\n\n /**\n * Icon that renders either before or after the `children` as specified by the `iconPosition` prop.\n */\n icon?: Slot<'span'>;\n};\n\n/**\n * A button supports different sizes.\n */\nexport type ButtonSize = 'small' | 'medium' | 'large';\n\nexport type ButtonProps = ComponentProps<ButtonSlots> & {\n /**\n * A button can have its content and borders styled for greater emphasis or to be subtle.\n * - 'secondary' (default): Gives emphasis to the button in such a way that it indicates a secondary action.\n * - 'primary': Emphasizes the button as a primary action.\n * - 'outline': Removes background styling.\n * - 'subtle': Minimizes emphasis to blend into the background until hovered or focused.\n * - 'transparent': Removes background and border styling.\n *\n * @default 'secondary'\n */\n appearance?: 'secondary' | 'primary' | 'outline' | 'subtle' | 'transparent';\n\n /**\n * When set, allows the button to be focusable even when it has been disabled. This is used in scenarios where it\n * is important to keep a consistent tab order for screen reader and keyboard users. The primary example of this\n * pattern is when the disabled button is in a menu or a commandbar and is seldom used for standalone buttons.\n *\n * @default false\n */\n disabledFocusable?: boolean;\n\n /**\n * A button can show that it cannot be interacted with.\n *\n * @default false\n */\n disabled?: boolean;\n\n /**\n * A button can format its icon to appear before or after its content.\n *\n * @default 'before'\n */\n iconPosition?: 'before' | 'after';\n\n /**\n * A button can be rounded, circular, or square.\n *\n * @default 'rounded'\n */\n shape?: 'rounded' | 'circular' | 'square';\n\n /**\n * A button supports different sizes.\n *\n * @default 'medium'\n */\n size?: ButtonSize;\n};\n\nexport type ButtonState = ComponentState<ButtonSlots> &\n Required<Pick<ButtonProps, 'appearance' | 'disabledFocusable' | 'disabled' | 'iconPosition' | 'shape' | 'size'>> & {\n /**\n * A button can contain only an icon.\n *\n * @default false\n */\n iconOnly: boolean;\n };\n"],"names":[],"rangeMappings":"","mappings":"AAuEA,WAQI"}
+4
View File
@@ -0,0 +1,4 @@
export { Button } from './Button';
export { renderButton_unstable } from './renderButton';
export { useButton_unstable } from './useButton';
export { buttonClassNames, useButtonStyles_unstable } from './useButtonStyles.styles';
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Button/index.ts"],"sourcesContent":["export { Button } from './Button';\n// Explicit exports to omit ButtonCommons\nexport type { ButtonProps, ButtonSlots, ButtonState } from './Button.types';\nexport { renderButton_unstable } from './renderButton';\nexport { useButton_unstable } from './useButton';\nexport { buttonClassNames, useButtonStyles_unstable } from './useButtonStyles.styles';\n"],"names":["Button","renderButton_unstable","useButton_unstable","buttonClassNames","useButtonStyles_unstable"],"rangeMappings":";;;","mappings":"AAAA,SAASA,MAAM,QAAQ,WAAW;AAGlC,SAASC,qBAAqB,QAAQ,iBAAiB;AACvD,SAASC,kBAAkB,QAAQ,cAAc;AACjD,SAASC,gBAAgB,EAAEC,wBAAwB,QAAQ,2BAA2B"}

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