| 1 | {"version":3,"file":"Button.types.js","sourceRoot":"../src/","sources":["components/Button/Button.types.ts"],"names":[],"mappings":"AA8VA;;GAEG;AACH,MAAM,CAAN,IAAY,WAKX;AALD,WAAY,WAAW;IACrB,wBAAwB;IACxB,iDAAU,CAAA;IACV,mBAAmB;IACnB,iDAAU,CAAA;AACZ,CAAC,EALW,WAAW,KAAX,WAAW,QAKtB;AAED;;GAEG;AACH,MAAM,CAAN,IAAY,UAQX;AARD,WAAY,UAAU;IACpB,+CAAU,CAAA;IACV,iDAAW,CAAA;IACX,2CAAQ,CAAA;IACR,mDAAY,CAAA;IACZ,iDAAW,CAAA;IACX,2CAAQ,CAAA;IACR,iDAAW,CAAA;AACb,CAAC,EARW,UAAU,KAAV,UAAU,QAQrB","sourcesContent":["import * as React from 'react';\nimport { BaseButton } from './BaseButton';\nimport { Button } from './Button';\nimport { IButtonClassNames } from './BaseButton.classNames';\nimport { ISplitButtonClassNames } from './SplitButton/SplitButton.classNames';\nimport { IRefObject, IRenderFunction, KeyCodes, IComponentAs } from '../../Utilities';\nimport { IContextualMenuProps } from '../../ContextualMenu';\nimport { IIconProps } from '../../Icon';\nimport { IStyle, ITheme } from '../../Styling';\nimport { IKeytipProps } from '../../Keytip';\n\n/**\n * {@docCategory Button}\n */\nexport interface IButton {\n /**\n * Sets focus to the button.\n */\n focus: () => void;\n\n /**\n * If there is a menu associated with this button and it is visible, this will dismiss the menu\n */\n dismissMenu: () => void;\n\n /**\n * If there is a menu associated with this button and it is visible, this will open the menu.\n * Params are optional overrides to the ones defined in `menuProps` to apply to just this instance of\n * opening the menu.\n *\n * @param shouldFocusOnContainer - override to the ContextualMenu shouldFocusOnContainer prop.\n * BaseButton implementation defaults to 'undefined'.\n * @param shouldFocusOnMount - override to the ContextualMenu shouldFocusOnMount prop. BaseButton implementation\n * defaults to `true`.\n */\n openMenu: (shouldFocusOnContainer?: boolean, shouldFocusOnMount?: boolean) => void;\n}\n\n/**\n * {@docCategory Button}\n */\n/* eslint-disable deprecation/deprecation */\nexport interface IButtonProps\n extends React.AllHTMLAttributes<\n HTMLAnchorElement | HTMLButtonElement | HTMLDivElement | BaseButton | Button | HTMLSpanElement\n > {\n /* eslint-enable deprecation/deprecation */\n /**\n * Optional callback to access the IButton interface. Use this instead of ref for accessing\n * the public methods and properties of the component.\n */\n componentRef?: IRefObject<IButton>;\n\n /**\n * Optional callback to access the root DOM element.\n * @deprecated Temporary solution which will be replaced with ref in the V8 release.\n */\n elementRef?: React.Ref<HTMLElement>;\n\n /**\n * If provided, this component will be rendered as an anchor.\n * @defaultvalue ElementType.anchor\n */\n href?: string;\n\n /**\n * Changes the visual presentation of the button to be emphasized (if defined)\n * @defaultvalue false\n */\n primary?: boolean;\n\n /**\n * Unique id to identify the item. Typically a duplicate of key value.\n */\n uniqueId?: string | number;\n\n /**\n * Whether the button is disabled\n */\n disabled?: boolean;\n\n /**\n * Whether the button can have focus in disabled mode\n */\n allowDisabledFocus?: boolean;\n\n /**\n * If set to true and if this is a splitButton (split == true) then the primary action of a split button is disabled.\n */\n primaryDisabled?: boolean;\n\n /**\n * Custom styling for individual elements within the button DOM.\n */\n styles?: IButtonStyles;\n\n /**\n * Theme provided by HOC.\n */\n theme?: ITheme;\n\n /**\n * Whether the button is checked\n */\n checked?: boolean;\n\n /**\n * Whether button is a toggle button with distinct on and off states. This should be true for buttons that permanently\n * change state when a press event finishes, such as a volume mute button.\n */\n toggle?: boolean;\n\n /**\n * If provided, additional class name to provide on the root element.\n */\n className?: string;\n\n /**\n * The aria label of the button for the benefit of screen readers.\n */\n ariaLabel?: string;\n\n /**\n * Detailed description of the button for the benefit of screen readers.\n *\n * Besides the compound button, other button types will need more information provided to screen reader.\n */\n ariaDescription?: string;\n\n /**\n * If provided and is true it adds an 'aria-hidden' attribute instructing screen readers to ignore the element.\n */\n ariaHidden?: boolean;\n\n /**\n * Text to render button label. If text is supplied, it will override any string in button children.\n * Other children components will be passed through after the text.\n */\n text?: string;\n\n /**\n * The props for the icon shown in the button.\n */\n iconProps?: IIconProps;\n\n /**\n * Props for button menu. Providing this will default to showing the menu icon. See menuIconProps for overriding\n * how the default icon looks. Providing this in addition of onClick and setting the split property to true will\n * render a SplitButton.\n */\n menuProps?: IContextualMenuProps;\n\n /**\n * Callback that runs after Button's contextual menu was closed (removed from the DOM)\n */\n onAfterMenuDismiss?: () => void;\n\n /**\n * If set to true, and if menuProps and onClick are provided, the button will render as a SplitButton.\n * @defaultvalue false\n */\n split?: boolean;\n\n /**\n * The props for the icon shown when providing a menu dropdown.\n */\n menuIconProps?: IIconProps;\n\n /**\n * Accessible label for the dropdown chevron button if this button is split.\n */\n splitButtonAriaLabel?: string;\n\n /**\n * Optional callback when menu is clicked.\n */\n onMenuClick?: (ev?: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>, button?: IButtonProps) => void;\n\n /**\n * Custom render function for the icon\n */\n onRenderIcon?: IRenderFunction<IButtonProps>;\n\n /**\n * Custom render function for the label text.\n */\n onRenderText?: IRenderFunction<IButtonProps>;\n\n /**\n * Custom render function for the desciption text.\n */\n onRenderDescription?: IRenderFunction<IButtonProps>;\n\n /**\n * Custom render function for the aria description element.\n */\n onRenderAriaDescription?: IRenderFunction<IButtonProps>;\n\n /**\n * Custom render function for rendering the button children.\n */\n onRenderChildren?: IRenderFunction<IButtonProps>;\n\n /**\n * Custom render function for button menu icon\n */\n onRenderMenuIcon?: IRenderFunction<IButtonProps>;\n\n /**\n * Deprecated at v6.3.2, to be removed at \\>= v7.0.0. Use `menuAs` instead.\n * @deprecated Use `menuAs` instead.\n */\n onRenderMenu?: IRenderFunction<IContextualMenuProps>;\n\n /**\n * Render a custom menu in place of the normal one.\n */\n menuAs?: IComponentAs<IContextualMenuProps>;\n\n /**\n * Description of the action this button takes.\n * Only used for compound buttons\n */\n secondaryText?: string;\n\n /**\n * Deprecated at v1.2.3, to be removed at \\>= v2.0.0. Use specific button component instead.\n * @defaultvalue ButtonType.default\n * @deprecated Use specific button component instead.\n */\n\n buttonType?: ButtonType;\n\n /**\n * Deprecated at v0.56.2, to be removed at \\>= v1.0.0. Just pass in button props instead.\n * they will be mixed into the button/anchor element rendered by the component.\n * @deprecated Use button props instead.\n */\n rootProps?: React.ButtonHTMLAttributes<HTMLButtonElement> | React.AnchorHTMLAttributes<HTMLAnchorElement>;\n\n /**\n * Any custom data the developer wishes to associate with the menu item.\n * Deprecated, use `checked` if setting state.\n * @deprecated unused, use `checked` if setting state.\n */\n toggled?: boolean;\n\n /**\n * Any custom data the developer wishes to associate with the menu item.\n */\n data?: any;\n\n /**\n * Method to provide the classnames to style a button.\n * The default value for this prop is the getClassnames func\n * defined in BaseButton.classnames.\n * @defaultvalue getBaseButtonClassNames\n */\n getClassNames?: (\n theme: ITheme,\n className: string,\n variantClassName: string,\n iconClassName: string | undefined,\n menuIconClassName: string | undefined,\n disabled: boolean,\n checked: boolean,\n expanded: boolean,\n hasMenu: boolean,\n isSplit: boolean | undefined,\n allowDisabledFocus: boolean,\n ) => IButtonClassNames;\n\n /**\n * Method to provide the classnames to style a button.\n * The default value for this prop is the getClassnames func\n * defined in BaseButton.classnames.\n * @defaultvalue getBaseSplitButtonClassNames\n */\n getSplitButtonClassNames?: (\n disabled: boolean,\n expanded: boolean,\n checked: boolean,\n allowDisabledFocus: boolean,\n ) => ISplitButtonClassNames;\n\n /**\n * Provides a custom KeyCode that can be used to open the button menu.\n * The default KeyCode is the down arrow.\n * A value of null can be provided to disable the key codes for opening the button menu.\n */\n menuTriggerKeyCode?: KeyCodes | null;\n\n /**\n * Optional keytip for this button\n */\n keytipProps?: IKeytipProps;\n\n /**\n * Menu will not be created or destroyed when opened or closed, instead it\n * will be hidden. This will improve perf of the menu opening but could potentially\n * impact overall perf by having more elements in the dom. Should only be used\n * when perf is important.\n * Note: This may increase the amount of time it takes for the button itself to mount.\n */\n persistMenu?: boolean;\n\n /**\n * If true, the persisted menu is rendered hidden when the button\n * initially mounts. Non-persisted menus will\n * not be in the component tree unless they are being shown\n *\n * Note: This increases the time the button will take to mount, but\n * can improve perceived menu open perf. when the user opens the menu.\n *\n * @defaultvalue undefined, equivalent to false\n *\n * @deprecated There is known bug in Edge when this prop is true where scrollbars\n * overlap with the content when a menu is first rendered hidden.\n * See: https://github.com/microsoft/fluentui/issues/9034\n * Please do not start using this. If you are already using this,\n * please make sure that you are doing so only in non-Edge browsers\n */\n renderPersistedMenuHiddenOnMount?: boolean;\n\n /**\n * Experimental prop that get passed into the menuButton that's rendered as part of\n * split button. Anything passed in will likely need to have accompanying\n * style changes.\n */\n splitButtonMenuProps?: IButtonProps;\n\n /**\n * Style for the description text if applicable (for compound buttons.)\n * Deprecated, use `secondaryText` instead.\n * @deprecated Use `secondaryText` instead.\n */\n description?: IStyle;\n\n /**\n * yet unknown docs\n */\n defaultRender?: any;\n\n /**\n * Optional props to be applied only to the primary action button of SplitButton and not to the\n * overall SplitButton container\n */\n primaryActionButtonProps?: IButtonProps;\n}\n\n/**\n * {@docCategory Button}\n */\nexport enum ElementType {\n /** <button> element. */\n button = 0,\n /** <a> element. */\n anchor = 1,\n}\n\n/**\n * {@docCategory Button}\n */\nexport enum ButtonType {\n normal = 0,\n primary = 1,\n hero = 2,\n compound = 3,\n command = 4,\n icon = 5,\n default = 6,\n}\n\n/**\n * {@docCategory Button}\n */\nexport interface IButtonStyles {\n /**\n * Style for the root element in the default enabled, non-toggled state.\n */\n root?: IStyle;\n\n /**\n * Style override for the root element in a checked state, layered on top of the root style.\n */\n rootChecked?: IStyle;\n\n /**\n * Style override for the root element in a disabled state, layered on top of the root style.\n */\n rootDisabled?: IStyle;\n\n /**\n * Style override applied to the root on hover in the default, enabled, non-toggled state.\n */\n rootHovered?: IStyle;\n\n /**\n * Style override applied to the root on focus in the default, enabled, non-toggled state.\n */\n rootFocused?: IStyle;\n\n /**\n * Style override applied to the root on pressed in the default, enabled, non-toggled state.\n */\n rootPressed?: IStyle;\n\n /**\n * Style override applied to the root on when menu is expanded in the default, enabled, non-toggled state.\n */\n rootExpanded?: IStyle;\n\n /**\n * Style override applied to the root on hover in a checked, enabled state\n */\n rootCheckedHovered?: IStyle;\n\n /**\n * Style override applied to the root on pressed in a checked, enabled state\n */\n rootCheckedPressed?: IStyle;\n\n /**\n * Style override applied to the root on hover in a checked, disabled state\n */\n rootCheckedDisabled?: IStyle;\n\n /**\n * Style override applied to the root on hover in a expanded state on hover\n */\n rootExpandedHovered?: IStyle;\n\n /**\n * Style override for the root element when it has a menu button, layered on top of the root style.\n */\n rootHasMenu?: IStyle;\n\n /**\n * Style for the flexbox container within the root element.\n */\n flexContainer?: IStyle;\n\n /**\n * Style for the text container within the flexbox container element (and contains the text and description).\n */\n textContainer?: IStyle;\n\n /**\n * Style for the icon on the near side of the label.\n */\n icon?: IStyle;\n\n /**\n * Style for the icon on the near side of the label on hover.\n */\n iconHovered?: IStyle;\n\n /**\n * Style for the icon on the near side of the label when pressed.\n */\n iconPressed?: IStyle;\n\n /**\n * Style for the icon on the near side of the label when expanded.\n */\n iconExpanded?: IStyle;\n\n /**\n * Style for the icon on the near side of the label when expanded and hovered.\n */\n iconExpandedHovered?: IStyle;\n\n /**\n * Style override for the icon when the button is disabled.\n */\n iconDisabled?: IStyle;\n\n /**\n * Style override for the icon when the button is checked.\n */\n iconChecked?: IStyle;\n\n /**\n * Style for the text content of the button.\n */\n label?: IStyle;\n\n /**\n * Style override for the text content when the button is hovered.\n */\n labelHovered?: IStyle;\n\n /**\n * Style override for the text content when the button is disabled.\n */\n labelDisabled?: IStyle;\n\n /**\n * Style override for the text content when the button is checked.\n */\n labelChecked?: IStyle;\n\n /**\n * Style for the menu chevron.\n */\n menuIcon?: IStyle;\n\n /**\n * Style for the menu chevron on hover.\n */\n menuIconHovered?: IStyle;\n\n /**\n * Style for the menu chevron when pressed.\n */\n menuIconPressed?: IStyle;\n\n /**\n * Style for the menu chevron when expanded.\n */\n menuIconExpanded?: IStyle;\n\n /**\n * Style for the menu chevron when expanded and hovered.\n */\n menuIconExpandedHovered?: IStyle;\n\n /**\n * Style override for the menu chevron when the button is disabled.\n */\n menuIconDisabled?: IStyle;\n\n /**\n * Style override for the menu chevron when the button is checked.\n */\n menuIconChecked?: IStyle;\n\n /**\n * Style for the description text if applicable (for compound buttons.)\n */\n description?: IStyle;\n\n /**\n * Style for the description text if applicable (for compound buttons.)\n */\n secondaryText?: IStyle;\n\n /**\n * Style override for the description text when the button is hovered.\n */\n descriptionHovered?: IStyle;\n\n /**\n * Style for the description text when the button is pressed.\n */\n descriptionPressed?: IStyle;\n\n /**\n * Style override for the description text when the button is disabled.\n */\n descriptionDisabled?: IStyle;\n\n /**\n * Style override for the description text when the button is checked.\n */\n descriptionChecked?: IStyle;\n\n /**\n * Style override for the screen reader text.\n */\n screenReaderText?: IStyle;\n\n /**\n * Style override for the container div around a SplitButton element\n */\n splitButtonContainer?: IStyle;\n\n /**\n * Style for container div around a SplitButton element when the button is hovered.\n */\n splitButtonContainerHovered?: IStyle;\n\n /**\n * Style for container div around a SplitButton element when the button is focused.\n */\n splitButtonContainerFocused?: IStyle;\n\n /**\n * Style for container div around a SplitButton element when the button is checked.\n */\n splitButtonContainerChecked?: IStyle;\n\n /**\n * Style for container div around a SplitButton element when the button is checked and hovered.\n */\n splitButtonContainerCheckedHovered?: IStyle;\n\n /**\n * Style override for the container div around a SplitButton element in a disabled state\n */\n splitButtonContainerDisabled?: IStyle;\n\n /**\n * Style override for the divider element that appears between the button and menu button\n * for a split button.\n */\n splitButtonDivider?: IStyle;\n\n /**\n * Style override for the divider element that appears between the button and menu button\n * for a split button in a disabled state.\n */\n splitButtonDividerDisabled?: IStyle;\n\n /**\n * Style override for the SplitButton menu button\n */\n splitButtonMenuButton?: IStyle;\n\n /**\n * Style override for the SplitButton menu button element in a disabled state.\n */\n splitButtonMenuButtonDisabled?: IStyle;\n\n /**\n * Style override for the SplitButton menu button element in a checked state\n */\n splitButtonMenuButtonChecked?: IStyle;\n\n /**\n * Style override for the SplitButton menu button element in an expanded state\n */\n splitButtonMenuButtonExpanded?: IStyle;\n\n /**\n * Style override for the SplitButton menu icon element\n */\n splitButtonMenuIcon?: IStyle;\n\n /**\n * Style override for the SplitButton menu icon element in a disabled state\n */\n splitButtonMenuIconDisabled?: IStyle;\n\n /**\n * Style override for the SplitButton FlexContainer.\n */\n splitButtonFlexContainer?: IStyle;\n\n /**\n * Style override for the SplitButton when only primaryButton is in a disabled state\n */\n splitButtonMenuFocused?: IStyle;\n}\n"]} |