first commit

This commit is contained in:
Stefan Hacker
2026-04-03 09:38:48 +02:00
commit 37ad745546
47450 changed files with 3120798 additions and 0 deletions
@@ -0,0 +1,3 @@
import * as React from 'react';
import type { IButtonGridProps } from './ButtonGrid.types';
export declare const ButtonGridBase: React.FunctionComponent<IButtonGridProps>;
@@ -0,0 +1,36 @@
import { __assign } from "tslib";
import * as React from 'react';
import { toMatrix, classNamesFunction, getNativeProps, htmlElementProperties } from '../../Utilities';
import { FocusZone } from '../../FocusZone';
import { useId } from '@fluentui/react-hooks';
var getClassNames = classNamesFunction();
export var ButtonGridBase = React.forwardRef(function (props, forwardedRef) {
var id = useId(undefined, props.id);
var items = props.items, columnCount = props.columnCount, onRenderItem = props.onRenderItem, isSemanticRadio = props.isSemanticRadio,
// eslint-disable-next-line @typescript-eslint/no-deprecated
_a = props.ariaPosInSet,
// eslint-disable-next-line @typescript-eslint/no-deprecated
ariaPosInSet = _a === void 0 ? props.positionInSet : _a,
// eslint-disable-next-line @typescript-eslint/no-deprecated
_b = props.ariaSetSize,
// eslint-disable-next-line @typescript-eslint/no-deprecated
ariaSetSize = _b === void 0 ? props.setSize : _b, styles = props.styles, doNotContainWithinFocusZone = props.doNotContainWithinFocusZone;
var htmlProps = getNativeProps(props, htmlElementProperties,
// avoid applying onBlur on the table if it's being used in the FocusZone
doNotContainWithinFocusZone ? [] : ['onBlur']);
var classNames = getClassNames(styles, { theme: props.theme });
// Array to store the cells in the correct row index
var rowsOfItems = toMatrix(items, columnCount);
var content = (React.createElement("table", __assign({ "aria-posinset": ariaPosInSet, "aria-setsize": ariaSetSize, id: id, role: isSemanticRadio ? 'radiogroup' : 'grid' }, htmlProps, { className: classNames.root }),
React.createElement("tbody", { role: isSemanticRadio ? 'presentation' : 'rowgroup' }, rowsOfItems.map(function (rows, rowIndex) {
return (React.createElement("tr", { role: isSemanticRadio ? 'presentation' : 'row', key: rowIndex }, rows.map(function (cell, cellIndex) {
return (React.createElement("td", { role: "presentation", key: cellIndex + '-cell', className: classNames.tableCell }, onRenderItem(cell, cellIndex)));
})));
}))));
return doNotContainWithinFocusZone ? (content) : (React.createElement(FocusZone
// eslint-disable-next-line @typescript-eslint/no-deprecated
, {
// eslint-disable-next-line @typescript-eslint/no-deprecated
elementRef: forwardedRef, isCircularNavigation: props.shouldFocusCircularNavigate, className: classNames.focusedContainer, onBlur: props.onBlur }, content));
});
//# sourceMappingURL=ButtonGrid.base.js.map
@@ -0,0 +1 @@
{"version":3,"file":"ButtonGrid.base.js","sourceRoot":"../src/","sources":["utilities/ButtonGrid/ButtonGrid.base.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,QAAQ,EAAE,kBAAkB,EAAE,cAAc,EAAE,qBAAqB,EAAE,MAAM,iBAAiB,CAAC;AACtG,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,OAAO,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAG9C,IAAM,aAAa,GAAG,kBAAkB,EAA4C,CAAC;AAErF,MAAM,CAAC,IAAM,cAAc,GAA8C,KAAK,CAAC,UAAU,CAGvF,UAAC,KAAK,EAAE,YAAY;IACpB,IAAM,EAAE,GAAG,KAAK,CAAC,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,CAAC;IAGpC,IAAA,KAAK,GAUH,KAAK,MAVF,EACL,WAAW,GAST,KAAK,YATI,EACX,YAAY,GAQV,KAAK,aARK,EACZ,eAAe,GAOb,KAAK,gBAPQ;IACf,4DAA4D;IAC5D,KAKE,KAAK,aAL2B;IADlC,4DAA4D;IAC5D,YAAY,mBAAG,KAAK,CAAC,aAAa,KAAA;IAClC,4DAA4D;IAC5D,KAGE,KAAK,YAHoB;IAD3B,4DAA4D;IAC5D,WAAW,mBAAG,KAAK,CAAC,OAAO,KAAA,EAC3B,MAAM,GAEJ,KAAK,OAFD,EACN,2BAA2B,GACzB,KAAK,4BADoB,CACnB;IAEV,IAAM,SAAS,GAAG,cAAc,CAC9B,KAAK,EACL,qBAAqB;IACrB,yEAAyE;IACzE,2BAA2B,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAC9C,CAAC;IAEF,IAAM,UAAU,GAAG,aAAa,CAAC,MAAO,EAAE,EAAE,KAAK,EAAE,KAAK,CAAC,KAAM,EAAE,CAAC,CAAC;IAEnE,oDAAoD;IACpD,IAAM,WAAW,GAAY,QAAQ,CAAC,KAAK,EAAE,WAAW,CAAC,CAAC;IAE1D,IAAM,OAAO,GAAG,CACd,yDACiB,YAAY,kBACb,WAAW,EACzB,EAAE,EAAE,EAAE,EACN,IAAI,EAAE,eAAe,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,MAAM,IACzC,SAAS,IACb,SAAS,EAAE,UAAU,CAAC,IAAI;QAE1B,+BAAO,IAAI,EAAE,eAAe,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,UAAU,IACvD,WAAW,CAAC,GAAG,CAAC,UAAC,IAAI,EAAE,QAAQ;YAC9B,OAAO,CACL,4BAAI,IAAI,EAAE,eAAe,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,KAAK,EAAE,GAAG,EAAE,QAAQ,IAC9D,IAAI,CAAC,GAAG,CAAC,UAAC,IAAI,EAAE,SAAiB;gBAChC,OAAO,CACL,4BAAI,IAAI,EAAC,cAAc,EAAC,GAAG,EAAE,SAAS,GAAG,OAAO,EAAE,SAAS,EAAE,UAAU,CAAC,SAAS,IAC9E,YAAY,CAAC,IAAI,EAAE,SAAS,CAAC,CAC3B,CACN,CAAC;YACJ,CAAC,CAAC,CACC,CACN,CAAC;QACJ,CAAC,CAAC,CACI,CACF,CACT,CAAC;IAEF,OAAO,2BAA2B,CAAC,CAAC,CAAC,CACnC,OAAO,CACR,CAAC,CAAC,CAAC,CACF,oBAAC,SAAS;IACR,4DAA4D;;QAA5D,4DAA4D;QAC5D,UAAU,EAAE,YAAY,EACxB,oBAAoB,EAAE,KAAK,CAAC,2BAA2B,EACvD,SAAS,EAAE,UAAU,CAAC,gBAAgB,EACtC,MAAM,EAAE,KAAK,CAAC,MAAM,IAEnB,OAAO,CACE,CACb,CAAC;AACJ,CAAC,CAAC,CAAC","sourcesContent":["import * as React from 'react';\nimport { toMatrix, classNamesFunction, getNativeProps, htmlElementProperties } from '../../Utilities';\nimport { FocusZone } from '../../FocusZone';\nimport { useId } from '@fluentui/react-hooks';\nimport type { IButtonGridProps, IButtonGridStyleProps, IButtonGridStyles } from './ButtonGrid.types';\n\nconst getClassNames = classNamesFunction<IButtonGridStyleProps, IButtonGridStyles>();\n\nexport const ButtonGridBase: React.FunctionComponent<IButtonGridProps> = React.forwardRef<\n HTMLElement,\n IButtonGridProps\n>((props, forwardedRef) => {\n const id = useId(undefined, props.id);\n\n const {\n items,\n columnCount,\n onRenderItem,\n isSemanticRadio,\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n ariaPosInSet = props.positionInSet,\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n ariaSetSize = props.setSize,\n styles,\n doNotContainWithinFocusZone,\n } = props;\n\n const htmlProps = getNativeProps<React.HTMLAttributes<HTMLTableElement>>(\n props,\n htmlElementProperties,\n // avoid applying onBlur on the table if it's being used in the FocusZone\n doNotContainWithinFocusZone ? [] : ['onBlur'],\n );\n\n const classNames = getClassNames(styles!, { theme: props.theme! });\n\n // Array to store the cells in the correct row index\n const rowsOfItems: any[][] = toMatrix(items, columnCount);\n\n const content = (\n <table\n aria-posinset={ariaPosInSet}\n aria-setsize={ariaSetSize}\n id={id}\n role={isSemanticRadio ? 'radiogroup' : 'grid'}\n {...htmlProps}\n className={classNames.root}\n >\n <tbody role={isSemanticRadio ? 'presentation' : 'rowgroup'}>\n {rowsOfItems.map((rows, rowIndex) => {\n return (\n <tr role={isSemanticRadio ? 'presentation' : 'row'} key={rowIndex}>\n {rows.map((cell, cellIndex: number) => {\n return (\n <td role=\"presentation\" key={cellIndex + '-cell'} className={classNames.tableCell}>\n {onRenderItem(cell, cellIndex)}\n </td>\n );\n })}\n </tr>\n );\n })}\n </tbody>\n </table>\n );\n\n return doNotContainWithinFocusZone ? (\n content\n ) : (\n <FocusZone\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n elementRef={forwardedRef}\n isCircularNavigation={props.shouldFocusCircularNavigate}\n className={classNames.focusedContainer}\n onBlur={props.onBlur}\n >\n {content}\n </FocusZone>\n );\n});\n"]}
@@ -0,0 +1,3 @@
import * as React from 'react';
import type { IButtonGridProps } from './ButtonGrid.types';
export declare const ButtonGrid: React.FunctionComponent<IButtonGridProps>;
+6
View File
@@ -0,0 +1,6 @@
import { styled } from '../../Utilities';
import { ButtonGridBase } from './ButtonGrid.base';
import { getStyles } from './ButtonGrid.styles';
export var ButtonGrid = styled(ButtonGridBase, getStyles);
ButtonGrid.displayName = 'ButtonGrid';
//# sourceMappingURL=ButtonGrid.js.map
@@ -0,0 +1 @@
{"version":3,"file":"ButtonGrid.js","sourceRoot":"../src/","sources":["utilities/ButtonGrid/ButtonGrid.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACzC,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AACnD,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAGhD,MAAM,CAAC,IAAM,UAAU,GAA8C,MAAM,CAKzE,cAAc,EAAE,SAAS,CAAC,CAAC;AAC7B,UAAU,CAAC,WAAW,GAAG,YAAY,CAAC","sourcesContent":["import * as React from 'react';\nimport { styled } from '../../Utilities';\nimport { ButtonGridBase } from './ButtonGrid.base';\nimport { getStyles } from './ButtonGrid.styles';\nimport type { IButtonGridProps, IButtonGridStyleProps, IButtonGridStyles } from './ButtonGrid.types';\n\nexport const ButtonGrid: React.FunctionComponent<IButtonGridProps> = styled<\n IButtonGridProps,\n IButtonGridStyleProps,\n IButtonGridStyles,\n HTMLElement\n>(ButtonGridBase, getStyles);\nButtonGrid.displayName = 'ButtonGrid';\n"]}
@@ -0,0 +1,2 @@
import type { IButtonGridStyleProps, IButtonGridStyles } from './ButtonGrid.types';
export declare const getStyles: (props: IButtonGridStyleProps) => IButtonGridStyles;
@@ -0,0 +1,12 @@
export var getStyles = function (props) {
return {
root: {
padding: 2,
outline: 'none',
},
tableCell: {
padding: 0,
},
};
};
//# sourceMappingURL=ButtonGrid.styles.js.map
@@ -0,0 +1 @@
{"version":3,"file":"ButtonGrid.styles.js","sourceRoot":"../src/","sources":["utilities/ButtonGrid/ButtonGrid.styles.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,IAAM,SAAS,GAAG,UAAC,KAA4B;IACpD,OAAO;QACL,IAAI,EAAE;YACJ,OAAO,EAAE,CAAC;YACV,OAAO,EAAE,MAAM;SAChB;QACD,SAAS,EAAE;YACT,OAAO,EAAE,CAAC;SACX;KACF,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import type { IButtonGridStyleProps, IButtonGridStyles } from './ButtonGrid.types';\n\nexport const getStyles = (props: IButtonGridStyleProps): IButtonGridStyles => {\n return {\n root: {\n padding: 2,\n outline: 'none',\n },\n tableCell: {\n padding: 0,\n },\n };\n};\n"]}
@@ -0,0 +1,102 @@
import * as React from 'react';
import type { IStyle, ITheme } from '../../Styling';
import type { IRefObject, IStyleFunctionOrObject } from '../../Utilities';
import type { JSXElement } from '@fluentui/utilities';
export interface IButtonGrid {
}
export interface IButtonGridProps extends React.TableHTMLAttributes<HTMLTableElement>, React.RefAttributes<HTMLElement> {
/**
* Gets the component ref.
*/
componentRef?: IRefObject<IButtonGrid>;
/**
* Items to display in a ButtonGrid with the specified number of columns
*/
items: any[];
/**
* The number of columns
*/
columnCount: number;
/**
* Custom renderer for the individual items
*/
onRenderItem: (item: any, index: number) => JSXElement;
/**
* Whether focus should cycle back to the beginning once the user navigates past the end (and vice versa).
* Only relevant if `doNotContainWithinFocusZone` is not true.
*/
shouldFocusCircularNavigate?: boolean;
/**
* If false (the default), the ButtonGrid is contained inside a FocusZone.
* If true, a FocusZone is not used.
* @default false
*/
doNotContainWithinFocusZone?: boolean;
/**
* Class name for the FocusZone container for the ButtonGrid.
* @deprecated Use `styles.focusedContainer` to define styling for the focus zone container
*/
containerClassName?: string;
/**
* Handler for when focus leaves the ButtonGrid.
*/
onBlur?: () => void;
/**
* If true, uses radiogroup semantics for the ButtonGrid.
* This should be set to true for single-row grids, for two reasons:
* 1. Radios are a more simple and understandable control,
* and a better fit for a single-dimensional selection control
* 2. Multiple browsers use heuristics to strip table and grid roles from single-row tables with no column headers.
*/
isSemanticRadio?: boolean;
/**
* Position this ButtonGrid is in the parent set (index in a parent menu, for example)
*/
ariaPosInSet?: number;
/**
* @deprecated Use `ariaPosInSet`
*/
positionInSet?: number;
/**
* Size of the parent set (size of parent menu, for example)
*/
ariaSetSize?: number;
/**
* @deprecated Use `ariaSetSize`
*/
setSize?: number;
/**
* Theme to apply to the component.
*/
theme?: ITheme;
/**
* Optional styles for the component.
*/
styles?: IStyleFunctionOrObject<IButtonGridStyleProps, IButtonGridStyles>;
}
/**
* Properties required to build the styles for the ButtonGrid component.
*/
export interface IButtonGridStyleProps {
/**
* Theme to apply to the ButtonGrid
*/
theme: ITheme;
}
/**
* Styles for the ButtonGrid Component.
*/
export interface IButtonGridStyles {
/**
* Style for the table container of a ButtonGrid.
*/
root: IStyle;
/**
* Style for the table cells of the ButtonGrid.
*/
tableCell: IStyle;
/**
* Style for the FocusZone container for the ButtonGrid.
*/
focusedContainer?: IStyle;
}
@@ -0,0 +1,2 @@
export {};
//# sourceMappingURL=ButtonGrid.types.js.map
@@ -0,0 +1 @@
{"version":3,"file":"ButtonGrid.types.js","sourceRoot":"../src/","sources":["utilities/ButtonGrid/ButtonGrid.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport type { IStyle, ITheme } from '../../Styling';\nimport type { IRefObject, IStyleFunctionOrObject } from '../../Utilities';\n\nimport type { JSXElement } from '@fluentui/utilities';\n\nexport interface IButtonGrid {}\n\nexport interface IButtonGridProps\n extends React.TableHTMLAttributes<HTMLTableElement>,\n React.RefAttributes<HTMLElement> {\n /**\n * Gets the component ref.\n */\n componentRef?: IRefObject<IButtonGrid>;\n\n /**\n * Items to display in a ButtonGrid with the specified number of columns\n */\n items: any[];\n\n /**\n * The number of columns\n */\n columnCount: number;\n\n /**\n * Custom renderer for the individual items\n */\n\n onRenderItem: (item: any, index: number) => JSXElement;\n\n /**\n * Whether focus should cycle back to the beginning once the user navigates past the end (and vice versa).\n * Only relevant if `doNotContainWithinFocusZone` is not true.\n */\n shouldFocusCircularNavigate?: boolean;\n\n /**\n * If false (the default), the ButtonGrid is contained inside a FocusZone.\n * If true, a FocusZone is not used.\n * @default false\n */\n doNotContainWithinFocusZone?: boolean;\n\n /**\n * Class name for the FocusZone container for the ButtonGrid.\n * @deprecated Use `styles.focusedContainer` to define styling for the focus zone container\n */\n containerClassName?: string;\n\n /**\n * Handler for when focus leaves the ButtonGrid.\n */\n onBlur?: () => void;\n\n /**\n * If true, uses radiogroup semantics for the ButtonGrid.\n * This should be set to true for single-row grids, for two reasons:\n * 1. Radios are a more simple and understandable control,\n * and a better fit for a single-dimensional selection control\n * 2. Multiple browsers use heuristics to strip table and grid roles from single-row tables with no column headers.\n */\n isSemanticRadio?: boolean;\n\n /**\n * Position this ButtonGrid is in the parent set (index in a parent menu, for example)\n */\n ariaPosInSet?: number;\n\n /**\n * @deprecated Use `ariaPosInSet`\n */\n positionInSet?: number;\n\n /**\n * Size of the parent set (size of parent menu, for example)\n */\n ariaSetSize?: number;\n\n /**\n * @deprecated Use `ariaSetSize`\n */\n setSize?: number;\n\n /**\n * Theme to apply to the component.\n */\n theme?: ITheme;\n\n /**\n * Optional styles for the component.\n */\n styles?: IStyleFunctionOrObject<IButtonGridStyleProps, IButtonGridStyles>;\n}\n\n/**\n * Properties required to build the styles for the ButtonGrid component.\n */\nexport interface IButtonGridStyleProps {\n /**\n * Theme to apply to the ButtonGrid\n */\n theme: ITheme;\n}\n\n/**\n * Styles for the ButtonGrid Component.\n */\nexport interface IButtonGridStyles {\n /**\n * Style for the table container of a ButtonGrid.\n */\n root: IStyle;\n\n /**\n * Style for the table cells of the ButtonGrid.\n */\n tableCell: IStyle;\n\n /**\n * Style for the FocusZone container for the ButtonGrid.\n */\n focusedContainer?: IStyle;\n}\n"]}
@@ -0,0 +1,3 @@
import type { IButtonGridCellProps } from './ButtonGridCell.types';
import type { JSXElement } from '@fluentui/utilities';
export declare const ButtonGridCell: <T, P extends IButtonGridCellProps<T>>(props: IButtonGridCellProps<T>) => JSXElement;
@@ -0,0 +1,44 @@
import { __assign } from "tslib";
import * as React from 'react';
import { css, getNativeProps, buttonProperties } from '../../Utilities';
import { CommandButton } from '../../Button';
import { useId } from '@fluentui/react-hooks';
export var ButtonGridCell = function (props) {
var _a;
var defaultId = useId('gridCell');
var item = props.item, _b = props.id, id = _b === void 0 ? defaultId : _b, className = props.className, selected = props.selected, _c = props.disabled, disabled = _c === void 0 ? false : _c, onRenderItem = props.onRenderItem, cellDisabledStyle = props.cellDisabledStyle, cellIsSelectedStyle = props.cellIsSelectedStyle, index = props.index, label = props.label, getClassNames = props.getClassNames, onClick = props.onClick, onHover = props.onHover, onMouseMove = props.onMouseMove, onMouseLeave = props.onMouseLeave, onMouseEnter = props.onMouseEnter, onFocus = props.onFocus;
var buttonProps = getNativeProps(props, buttonProperties);
var handleClick = React.useCallback(function (event) {
if (onClick && !disabled) {
onClick(item, event);
}
}, [disabled, item, onClick]);
var handleMouseEnter = React.useCallback(function (ev) {
var didUpdateOnEnter = onMouseEnter && onMouseEnter(ev);
if (!didUpdateOnEnter && onHover && !disabled) {
onHover(item, ev);
}
}, [disabled, item, onHover, onMouseEnter]);
var handleMouseMove = React.useCallback(function (ev) {
var didUpdateOnMove = onMouseMove && onMouseMove(ev);
if (!didUpdateOnMove && onHover && !disabled) {
onHover(item, ev);
}
}, [disabled, item, onHover, onMouseMove]);
var handleMouseLeave = React.useCallback(function (ev) {
var didUpdateOnLeave = onMouseLeave && onMouseLeave(ev);
if (!didUpdateOnLeave && onHover && !disabled) {
onHover(undefined, ev);
}
}, [disabled, onHover, onMouseLeave]);
var handleFocus = React.useCallback(function (event) {
if (onFocus && !disabled) {
onFocus(item, event);
}
}, [disabled, item, onFocus]);
return (React.createElement(CommandButton, __assign({ id: id, "data-index": index, "data-is-focusable": true, "aria-selected": selected, ariaLabel: label, title: label }, buttonProps, { className: css(className, (_a = {},
_a['' + cellIsSelectedStyle] = selected,
_a['' + cellDisabledStyle] = disabled,
_a)), onClick: handleClick, onMouseEnter: handleMouseEnter, onMouseMove: handleMouseMove, onMouseLeave: handleMouseLeave, onFocus: handleFocus, getClassNames: getClassNames }), onRenderItem(item)));
};
//# sourceMappingURL=ButtonGridCell.js.map
File diff suppressed because one or more lines are too long
@@ -0,0 +1,63 @@
import * as React from 'react';
import type { IButtonClassNames } from '../../components/Button/BaseButton.classNames';
import type { ITheme } from '../../Styling';
import type { JSXElement } from '@fluentui/utilities';
export interface IButtonGridCellProps<T> {
/**
* The option that will be made available to the user
*/
item: T;
/**
* Arbitrary unique string associated with this option
*/
id: string;
/**
* If the this option should be disabled
*/
disabled?: boolean;
/**
* If the cell is currently selected
*/
selected?: boolean;
onClick?: (item: T, event?: React.MouseEvent<HTMLButtonElement>) => void;
/**
* The render callback to handle rendering the item
*/
onRenderItem: (item: T) => JSXElement;
onHover?: (item?: T, event?: React.MouseEvent<HTMLButtonElement>) => void;
onFocus?: (item: T, event?: React.FocusEvent<HTMLButtonElement>) => void;
/**
* The accessible role for this option
*/
role?: string;
/**
* className(s) to apply
*/
className?: string;
/**
* CSS classes to apply when the cell is disabled
*/
cellDisabledStyle?: string[];
/**
* CSS classes to apply when the cell is selected
*/
cellIsSelectedStyle?: string[];
/**
* Index for this option
*/
index?: number;
/**
* The label for this item.
*/
label?: string;
/**
* Method to provide the classnames to style a button.
* The default value for this prop is `getClassnames` defined in `BaseButton.classNames`.
*/
getClassNames?: (theme: ITheme, className: string, variantClassName: string, iconClassName: string | undefined, menuIconClassName: string | undefined, disabled: boolean, checked: boolean, expanded: boolean, isSplit: boolean | undefined) => IButtonClassNames;
onMouseEnter?: (ev: React.MouseEvent<HTMLButtonElement>) => boolean;
onMouseMove?: (ev: React.MouseEvent<HTMLButtonElement>) => boolean;
onMouseLeave?: (ev: React.MouseEvent<HTMLButtonElement>) => void;
onWheel?: (ev: React.MouseEvent<HTMLButtonElement>) => void;
onKeyDown?: (ev: React.KeyboardEvent<HTMLButtonElement>) => void;
}
@@ -0,0 +1,2 @@
export {};
//# sourceMappingURL=ButtonGridCell.types.js.map
@@ -0,0 +1 @@
{"version":3,"file":"ButtonGridCell.types.js","sourceRoot":"../src/","sources":["utilities/ButtonGrid/ButtonGridCell.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport type { IButtonClassNames } from '../../components/Button/BaseButton.classNames';\nimport type { ITheme } from '../../Styling';\n\nimport type { JSXElement } from '@fluentui/utilities';\n\nexport interface IButtonGridCellProps<T> {\n /**\n * The option that will be made available to the user\n */\n item: T;\n\n /**\n * Arbitrary unique string associated with this option\n */\n id: string;\n\n /**\n * If the this option should be disabled\n */\n disabled?: boolean;\n\n /**\n * If the cell is currently selected\n */\n selected?: boolean;\n\n onClick?: (item: T, event?: React.MouseEvent<HTMLButtonElement>) => void;\n\n /**\n * The render callback to handle rendering the item\n */\n onRenderItem: (item: T) => JSXElement;\n\n onHover?: (item?: T, event?: React.MouseEvent<HTMLButtonElement>) => void;\n\n onFocus?: (item: T, event?: React.FocusEvent<HTMLButtonElement>) => void;\n\n /**\n * The accessible role for this option\n */\n role?: string;\n\n /**\n * className(s) to apply\n */\n className?: string;\n\n /**\n * CSS classes to apply when the cell is disabled\n */\n cellDisabledStyle?: string[];\n\n /**\n * CSS classes to apply when the cell is selected\n */\n cellIsSelectedStyle?: string[];\n\n /**\n * Index for this option\n */\n index?: number;\n\n /**\n * The label for this item.\n */\n label?: string;\n\n /**\n * Method to provide the classnames to style a button.\n * The default value for this prop is `getClassnames` defined in `BaseButton.classNames`.\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 isSplit: boolean | undefined,\n ) => IButtonClassNames;\n\n onMouseEnter?: (ev: React.MouseEvent<HTMLButtonElement>) => boolean;\n\n onMouseMove?: (ev: React.MouseEvent<HTMLButtonElement>) => boolean;\n\n onMouseLeave?: (ev: React.MouseEvent<HTMLButtonElement>) => void;\n\n onWheel?: (ev: React.MouseEvent<HTMLButtonElement>) => void;\n\n onKeyDown?: (ev: React.KeyboardEvent<HTMLButtonElement>) => void;\n}\n"]}
+4
View File
@@ -0,0 +1,4 @@
export * from './ButtonGrid';
export * from './ButtonGrid.types';
export * from './ButtonGridCell';
export * from './ButtonGridCell.types';
+5
View File
@@ -0,0 +1,5 @@
export * from './ButtonGrid';
export * from './ButtonGrid.types';
export * from './ButtonGridCell';
export * from './ButtonGridCell.types';
//# sourceMappingURL=index.js.map
+1
View File
@@ -0,0 +1 @@
{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["utilities/ButtonGrid/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,oBAAoB,CAAC;AACnC,cAAc,kBAAkB,CAAC;AACjC,cAAc,wBAAwB,CAAC","sourcesContent":["export * from './ButtonGrid';\nexport * from './ButtonGrid.types';\nexport * from './ButtonGridCell';\nexport * from './ButtonGridCell.types';\n"]}
@@ -0,0 +1,60 @@
import * as React from 'react';
import type { IDraggableZoneProps, ICoordinates } from './DraggableZone.types';
import type { JSXElement } from '@fluentui/utilities';
export interface IDraggableZoneState {
isDragging: boolean;
position: ICoordinates;
lastPosition?: ICoordinates;
}
export declare class DraggableZone extends React.Component<IDraggableZoneProps, IDraggableZoneState> {
static contextType: React.Context<import("@fluentui/react-window-provider").WindowProviderProps>;
context: any;
private _touchId?;
private _currentEventType;
private _events;
constructor(props: IDraggableZoneProps);
componentDidUpdate(prevProps: IDraggableZoneProps): void;
componentWillUnmount(): void;
render(): JSXElement;
private _onMouseDown;
private _onMouseUp;
private _onTouchStart;
private _onTouchEnd;
private _onDragStart;
private _onDrag;
private _onDragStop;
/**
* Get the control position based off the event that fired
* @param event - The event to get offsets from
*/
private _getControlPosition;
/**
* Get the active touch point that we have saved from the event's TouchList
* @param event - The event used to get the TouchList for the active touch point
*/
private _getActiveTouch;
/**
* Get the initial touch identifier associated with the given event
* @param event - The event that contains the TouchList
*/
private _getTouchId;
/**
* Returns if an element (or any of the element's parents) match the given selector
*/
private _matchesSelector;
/**
* Attempts to find the Touch that matches the identifier we stored in dragStart
* @param touchList The TouchList to look for the stored identifier from dragStart
*/
private _findTouchInTouchList;
/**
* Create DragData based off of the last known position and the new position passed in
* @param position The new position as part of the drag
*/
private _createDragDataFromPosition;
/**
* Creates an updated DragData based off the current position and given baseDragData
* @param baseDragData The base DragData (from _createDragDataFromPosition) used to calculate the updated positions
*/
private _createUpdatedDragData;
}
@@ -0,0 +1,275 @@
import { __assign, __extends } from "tslib";
import * as React from 'react';
import { getClassNames } from './DraggableZone.styles';
import { on } from '../../Utilities';
import { WindowContext } from '@fluentui/react-window-provider';
import { getDocumentEx } from '../dom';
var eventMapping = {
touch: {
start: 'touchstart',
move: 'touchmove',
stop: 'touchend',
},
mouse: {
start: 'mousedown',
move: 'mousemove',
stop: 'mouseup',
},
};
var DraggableZone = /** @class */ (function (_super) {
__extends(DraggableZone, _super);
function DraggableZone(props) {
var _this = _super.call(this, props) || this;
_this._currentEventType = eventMapping.mouse;
_this._events = [];
_this._onMouseDown = function (event) {
var onMouseDown = React.Children.only(_this.props.children).props.onMouseDown;
if (onMouseDown) {
onMouseDown(event);
}
_this._currentEventType = eventMapping.mouse;
return _this._onDragStart(event);
};
_this._onMouseUp = function (event) {
var onMouseUp = React.Children.only(_this.props.children).props.onMouseUp;
if (onMouseUp) {
onMouseUp(event);
}
_this._currentEventType = eventMapping.mouse;
return _this._onDragStop(event);
};
_this._onTouchStart = function (event) {
var onTouchStart = React.Children.only(_this.props.children).props.onTouchStart;
if (onTouchStart) {
onTouchStart(event);
}
_this._currentEventType = eventMapping.touch;
return _this._onDragStart(event);
};
_this._onTouchEnd = function (event) {
var onTouchEnd = React.Children.only(_this.props.children).props.onTouchEnd;
if (onTouchEnd) {
onTouchEnd(event);
}
_this._currentEventType = eventMapping.touch;
_this._onDragStop(event);
};
_this._onDragStart = function (event) {
// Only handle left click for dragging
if (typeof event.button === 'number' && event.button !== 0) {
return false;
}
// If the target doesn't match the handleSelector OR
// if the target does match the preventDragSelector, bail out
if ((_this.props.handleSelector && !_this._matchesSelector(event.target, _this.props.handleSelector)) ||
(_this.props.preventDragSelector &&
_this._matchesSelector(event.target, _this.props.preventDragSelector))) {
return;
}
// Remember the touch identifier if this is a touch event so we can
// distinguish between individual touches in multitouch scenarios
// by remembering which touch point we were given
_this._touchId = _this._getTouchId(event);
var position = _this._getControlPosition(event);
if (position === undefined) {
return;
}
var dragData = _this._createDragDataFromPosition(position);
_this.props.onStart && _this.props.onStart(event, dragData);
_this.setState({
isDragging: true,
lastPosition: position,
});
// hook up the appropriate mouse/touch events to the body to ensure
// smooth dragging
var doc = getDocumentEx(_this.context);
_this._events = [
on(doc.body, _this._currentEventType.move, _this._onDrag, true /* use capture phase */),
on(doc.body, _this._currentEventType.stop, _this._onDragStop, true /* use capture phase */),
];
};
_this._onDrag = function (event) {
// Prevent scrolling on mobile devices
if (event.type === 'touchmove') {
event.preventDefault();
}
var position = _this._getControlPosition(event);
if (!position) {
return;
}
// create the updated drag data from the position data
var updatedData = _this._createUpdatedDragData(_this._createDragDataFromPosition(position));
var updatedPosition = updatedData.position;
_this.props.onDragChange && _this.props.onDragChange(event, updatedData);
_this.setState({
position: updatedPosition,
lastPosition: position,
});
};
_this._onDragStop = function (event) {
if (!_this.state.isDragging) {
return;
}
var position = _this._getControlPosition(event);
if (!position) {
return;
}
var baseDragData = _this._createDragDataFromPosition(position);
// Set dragging to false and reset the lastPosition
_this.setState({
isDragging: false,
lastPosition: undefined,
});
_this.props.onStop && _this.props.onStop(event, baseDragData);
if (_this.props.position) {
_this.setState({
position: _this.props.position,
});
}
// Remove event handlers
_this._events.forEach(function (dispose) { return dispose(); });
};
_this.state = {
isDragging: false,
position: _this.props.position || { x: 0, y: 0 },
lastPosition: undefined,
};
return _this;
}
DraggableZone.prototype.componentDidUpdate = function (prevProps) {
if (this.props.position && (!prevProps.position || this.props.position !== prevProps.position)) {
this.setState({ position: this.props.position });
}
};
DraggableZone.prototype.componentWillUnmount = function () {
this._events.forEach(function (dispose) { return dispose(); });
};
DraggableZone.prototype.render = function () {
var child = React.Children.only(this.props.children);
var props = child.props;
var position = this.props.position;
var _a = this.state, statePosition = _a.position, isDragging = _a.isDragging;
var x = statePosition.x;
var y = statePosition.y;
if (position && !isDragging) {
x = position.x;
y = position.y;
}
return React.cloneElement(child, {
style: __assign(__assign({}, props.style), { transform: "translate(".concat(x, "px, ").concat(y, "px)") }),
className: getClassNames(props.className, this.state.isDragging).root,
onMouseDown: this._onMouseDown,
onMouseUp: this._onMouseUp,
onTouchStart: this._onTouchStart,
onTouchEnd: this._onTouchEnd,
});
};
/**
* Get the control position based off the event that fired
* @param event - The event to get offsets from
*/
DraggableZone.prototype._getControlPosition = function (event) {
var touchObj = this._getActiveTouch(event);
// did we get the right touch?
if (this._touchId !== undefined && !touchObj) {
return undefined;
}
var eventToGetOffset = touchObj || event;
return {
x: eventToGetOffset.clientX,
y: eventToGetOffset.clientY,
};
};
/**
* Get the active touch point that we have saved from the event's TouchList
* @param event - The event used to get the TouchList for the active touch point
*/
DraggableZone.prototype._getActiveTouch = function (event) {
return ((event.targetTouches && this._findTouchInTouchList(event.targetTouches)) ||
(event.changedTouches && this._findTouchInTouchList(event.changedTouches)));
};
/**
* Get the initial touch identifier associated with the given event
* @param event - The event that contains the TouchList
*/
DraggableZone.prototype._getTouchId = function (event) {
var touch = (event.targetTouches && event.targetTouches[0]) || (event.changedTouches && event.changedTouches[0]);
if (touch) {
return touch.identifier;
}
};
/**
* Returns if an element (or any of the element's parents) match the given selector
*/
DraggableZone.prototype._matchesSelector = function (element, selector) {
var _a;
if (!element || element === ((_a = getDocumentEx(this.context)) === null || _a === void 0 ? void 0 : _a.body)) {
return false;
}
var matchesSelectorFn =
// eslint-disable-next-line @typescript-eslint/no-deprecated
element.matches || element.webkitMatchesSelector || element.msMatchesSelector; /* for IE */
if (!matchesSelectorFn) {
return false;
}
return matchesSelectorFn.call(element, selector) || this._matchesSelector(element.parentElement, selector);
};
/**
* Attempts to find the Touch that matches the identifier we stored in dragStart
* @param touchList The TouchList to look for the stored identifier from dragStart
*/
DraggableZone.prototype._findTouchInTouchList = function (touchList) {
if (this._touchId === undefined) {
return;
}
for (var i = 0; i < touchList.length; i++) {
if (touchList[i].identifier === this._touchId) {
return touchList[i];
}
}
return undefined;
};
/**
* Create DragData based off of the last known position and the new position passed in
* @param position The new position as part of the drag
*/
DraggableZone.prototype._createDragDataFromPosition = function (position) {
var lastPosition = this.state.lastPosition;
// If we have no lastPosition, use the given position
// for last position
if (lastPosition === undefined) {
return {
delta: { x: 0, y: 0 },
lastPosition: position,
position: position,
};
}
return {
delta: {
x: position.x - lastPosition.x,
y: position.y - lastPosition.y,
},
lastPosition: lastPosition,
position: position,
};
};
/**
* Creates an updated DragData based off the current position and given baseDragData
* @param baseDragData The base DragData (from _createDragDataFromPosition) used to calculate the updated positions
*/
DraggableZone.prototype._createUpdatedDragData = function (baseDragData) {
var position = this.state.position;
return {
position: {
x: position.x + baseDragData.delta.x,
y: position.y + baseDragData.delta.y,
},
delta: baseDragData.delta,
lastPosition: position,
};
};
DraggableZone.contextType = WindowContext;
return DraggableZone;
}(React.Component));
export { DraggableZone };
//# sourceMappingURL=DraggableZone.js.map
File diff suppressed because one or more lines are too long
@@ -0,0 +1,4 @@
export interface IDraggableZoneStyles {
root: string;
}
export declare const getClassNames: (className: string, isDragging: boolean) => IDraggableZoneStyles;
@@ -0,0 +1,15 @@
import { memoizeFunction } from '../../Utilities';
import { mergeStyles } from '../../Styling';
export var getClassNames = memoizeFunction(function (className, isDragging) {
return {
root: mergeStyles(className, isDragging && {
touchAction: 'none',
selectors: {
'& *': {
userSelect: 'none',
},
},
}),
};
});
//# sourceMappingURL=DraggableZone.styles.js.map
@@ -0,0 +1 @@
{"version":3,"file":"DraggableZone.styles.js","sourceRoot":"../src/","sources":["utilities/DraggableZone/DraggableZone.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAM5C,MAAM,CAAC,IAAM,aAAa,GAAG,eAAe,CAAC,UAAC,SAAiB,EAAE,UAAmB;IAClF,OAAO;QACL,IAAI,EAAE,WAAW,CACf,SAAS,EACT,UAAU,IAAI;YACZ,WAAW,EAAE,MAAM;YACnB,SAAS,EAAE;gBACT,KAAK,EAAE;oBACL,UAAU,EAAE,MAAM;iBACnB;aACF;SACF,CACF;KACF,CAAC;AACJ,CAAC,CAAC,CAAC","sourcesContent":["import { memoizeFunction } from '../../Utilities';\nimport { mergeStyles } from '../../Styling';\n\nexport interface IDraggableZoneStyles {\n root: string;\n}\n\nexport const getClassNames = memoizeFunction((className: string, isDragging: boolean): IDraggableZoneStyles => {\n return {\n root: mergeStyles(\n className,\n isDragging && {\n touchAction: 'none',\n selectors: {\n '& *': {\n userSelect: 'none',\n },\n },\n },\n ),\n };\n});\n"]}
@@ -0,0 +1,39 @@
import * as React from 'react';
export interface IDragData {
position: ICoordinates;
lastPosition?: ICoordinates;
delta: ICoordinates;
}
export interface ICoordinates {
x: number;
y: number;
}
export interface IDraggableZoneProps extends React.HTMLAttributes<HTMLDivElement> {
/**
* Specifies a selector to be used as the handle that initiates drag
*/
handleSelector?: string;
/**
* Specifies a selector to be used to prevent drag initialization.
* For example, if you do not want buttons inside of your handleSelector
* to have the cursor change to move or to allow users to select from buttons,
* you could pass button here (the close button in the header of a dialog is a concrete example)
*/
preventDragSelector?: string;
/**
* the X and Y coordinates to use as an offest to position the draggable content
*/
position?: ICoordinates;
/**
* Callback for when dragging starts
*/
onStart?: (event: React.MouseEvent<HTMLElement> & React.TouchEvent<HTMLElement>, dragData: IDragData) => void;
/**
* Callback for when the drag changes, while dragging
*/
onDragChange?: (event: React.MouseEvent<HTMLElement> & React.TouchEvent<HTMLElement>, dragData: IDragData) => void;
/**
* Callback for when dragging stops
*/
onStop?: (event: React.MouseEvent<HTMLElement> & React.TouchEvent<HTMLElement>, dragData: IDragData) => void;
}
@@ -0,0 +1,2 @@
export {};
//# sourceMappingURL=DraggableZone.types.js.map
@@ -0,0 +1 @@
{"version":3,"file":"DraggableZone.types.js","sourceRoot":"../src/","sources":["utilities/DraggableZone/DraggableZone.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\n\nexport interface IDragData {\n position: ICoordinates;\n lastPosition?: ICoordinates;\n delta: ICoordinates;\n}\n\nexport interface ICoordinates {\n x: number;\n y: number;\n}\n\nexport interface IDraggableZoneProps extends React.HTMLAttributes<HTMLDivElement> {\n /**\n * Specifies a selector to be used as the handle that initiates drag\n */\n handleSelector?: string;\n\n /**\n * Specifies a selector to be used to prevent drag initialization.\n * For example, if you do not want buttons inside of your handleSelector\n * to have the cursor change to move or to allow users to select from buttons,\n * you could pass button here (the close button in the header of a dialog is a concrete example)\n */\n preventDragSelector?: string;\n\n /**\n * the X and Y coordinates to use as an offest to position the draggable content\n */\n position?: ICoordinates;\n\n /**\n * Callback for when dragging starts\n */\n onStart?: (event: React.MouseEvent<HTMLElement> & React.TouchEvent<HTMLElement>, dragData: IDragData) => void;\n\n /**\n * Callback for when the drag changes, while dragging\n */\n onDragChange?: (event: React.MouseEvent<HTMLElement> & React.TouchEvent<HTMLElement>, dragData: IDragData) => void;\n\n /**\n * Callback for when dragging stops\n */\n onStop?: (event: React.MouseEvent<HTMLElement> & React.TouchEvent<HTMLElement>, dragData: IDragData) => void;\n}\n"]}
+3
View File
@@ -0,0 +1,3 @@
export * from './DraggableZone';
export * from './DraggableZone.types';
export * from './DraggableZone.styles';
+4
View File
@@ -0,0 +1,4 @@
export * from './DraggableZone';
export * from './DraggableZone.types';
export * from './DraggableZone.styles';
//# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["utilities/DraggableZone/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC;AAChC,cAAc,uBAAuB,CAAC;AACtC,cAAc,wBAAwB,CAAC","sourcesContent":["export * from './DraggableZone';\nexport * from './DraggableZone.types';\nexport * from './DraggableZone.styles';\n"]}
@@ -0,0 +1,4 @@
import * as React from 'react';
import type { MinimalMenuProps } from './types';
export declare const MenuContext: React.Context<MinimalMenuProps>;
export declare const useMenuContext: () => MinimalMenuProps;
@@ -0,0 +1,6 @@
import * as React from 'react';
export var MenuContext = React.createContext({});
export var useMenuContext = function () {
return React.useContext(MenuContext);
};
//# sourceMappingURL=MenuContext.js.map
@@ -0,0 +1 @@
{"version":3,"file":"MenuContext.js","sourceRoot":"../src/","sources":["utilities/MenuContext/MenuContext.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,MAAM,CAAC,IAAM,WAAW,GAAG,KAAK,CAAC,aAAa,CAAmB,EAAE,CAAC,CAAC;AAErE,MAAM,CAAC,IAAM,cAAc,GAAG;IAC5B,OAAO,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC;AACvC,CAAC,CAAC","sourcesContent":["import * as React from 'react';\nimport type { MinimalMenuProps } from './types';\n\nexport const MenuContext = React.createContext<MinimalMenuProps>({});\n\nexport const useMenuContext = (): MinimalMenuProps => {\n return React.useContext(MenuContext);\n};\n"]}
+2
View File
@@ -0,0 +1,2 @@
export * from './MenuContext';
export * from './types';
+3
View File
@@ -0,0 +1,3 @@
export * from './MenuContext';
export * from './types';
//# sourceMappingURL=index.js.map
+1
View File
@@ -0,0 +1 @@
{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["utilities/MenuContext/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,SAAS,CAAC","sourcesContent":["export * from './MenuContext';\nexport * from './types';\n"]}
+9
View File
@@ -0,0 +1,9 @@
import * as React from 'react';
/**
* {@docCategory MenuContext}
*/
export type MinimalMenuProps = {
hidden?: boolean;
onDismiss?: () => void;
target?: React.Ref<HTMLElement | undefined>;
};
+2
View File
@@ -0,0 +1,2 @@
export {};
//# sourceMappingURL=types.js.map
+1
View File
@@ -0,0 +1 @@
{"version":3,"file":"types.js","sourceRoot":"../src/","sources":["utilities/MenuContext/types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\n\n/**\n * {@docCategory MenuContext}\n */\nexport type MinimalMenuProps = {\n hidden?: boolean;\n onDismiss?: () => void;\n target?: React.Ref<HTMLElement | undefined>;\n};\n"]}
@@ -0,0 +1,3 @@
import * as React from 'react';
import type { Theme } from '@fluentui/theme';
export declare const ThemeContext: React.Context<Theme | undefined>;
@@ -0,0 +1,3 @@
import * as React from 'react';
export var ThemeContext = React.createContext(undefined);
//# sourceMappingURL=ThemeContext.js.map
@@ -0,0 +1 @@
{"version":3,"file":"ThemeContext.js","sourceRoot":"../src/","sources":["utilities/ThemeProvider/ThemeContext.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,MAAM,CAAC,IAAM,YAAY,GAAG,KAAK,CAAC,aAAa,CAAoB,SAAS,CAAC,CAAC","sourcesContent":["import * as React from 'react';\nimport type { Theme } from '@fluentui/theme';\n\nexport const ThemeContext = React.createContext<Theme | undefined>(undefined);\n"]}
@@ -0,0 +1,6 @@
import * as React from 'react';
import type { ThemeProviderProps } from './ThemeProvider.types';
/**
* ThemeProvider, used for providing css variables and registering stylesheets.
*/
export declare const ThemeProvider: React.FunctionComponent<ThemeProviderProps>;
@@ -0,0 +1,21 @@
import * as React from 'react';
import { useThemeProviderClasses } from './useThemeProviderClasses';
import { useThemeProvider } from './useThemeProvider';
import { useMergedRefs } from '@fluentui/react-hooks';
/**
* ThemeProvider, used for providing css variables and registering stylesheets.
*/
export var ThemeProvider = React.forwardRef(function (props, ref) {
var rootRef = useMergedRefs(ref, React.useRef(null));
var _a = useThemeProvider(props, {
ref: rootRef,
as: 'div',
applyTo: 'element',
}), render = _a.render, state = _a.state;
// Render styles.
useThemeProviderClasses(state);
// Return the rendered content.
return render(state);
});
ThemeProvider.displayName = 'ThemeProvider';
//# sourceMappingURL=ThemeProvider.js.map
@@ -0,0 +1 @@
{"version":3,"file":"ThemeProvider.js","sourceRoot":"../src/","sources":["utilities/ThemeProvider/ThemeProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,uBAAuB,EAAE,MAAM,2BAA2B,CAAC;AACpE,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAGtD;;GAEG;AACH,MAAM,CAAC,IAAM,aAAa,GAAG,KAAK,CAAC,UAAU,CAC3C,UAAC,KAAyB,EAAE,GAA8B;IACxD,IAAM,OAAO,GAAG,aAAa,CAAC,GAAG,EAAE,KAAK,CAAC,MAAM,CAAc,IAAI,CAAC,CAAC,CAAC;IAC9D,IAAA,KAAoB,gBAAgB,CAAC,KAAK,EAAE;QAChD,GAAG,EAAE,OAAO;QACZ,EAAE,EAAE,KAAK;QACT,OAAO,EAAE,SAAS;KACnB,CAAC,EAJM,MAAM,YAAA,EAAE,KAAK,WAInB,CAAC;IAEH,iBAAiB;IACjB,uBAAuB,CAAC,KAAK,CAAC,CAAC;IAE/B,+BAA+B;IAC/B,OAAO,MAAM,CAAC,KAAK,CAAC,CAAC;AACvB,CAAC,CAC6C,CAAC;AAEjD,aAAa,CAAC,WAAW,GAAG,eAAe,CAAC","sourcesContent":["import * as React from 'react';\nimport { useThemeProviderClasses } from './useThemeProviderClasses';\nimport { useThemeProvider } from './useThemeProvider';\nimport { useMergedRefs } from '@fluentui/react-hooks';\nimport type { ThemeProviderProps } from './ThemeProvider.types';\n\n/**\n * ThemeProvider, used for providing css variables and registering stylesheets.\n */\nexport const ThemeProvider = React.forwardRef<HTMLDivElement, ThemeProviderProps>(\n (props: ThemeProviderProps, ref: React.Ref<HTMLDivElement>) => {\n const rootRef = useMergedRefs(ref, React.useRef<HTMLElement>(null));\n const { render, state } = useThemeProvider(props, {\n ref: rootRef,\n as: 'div',\n applyTo: 'element',\n });\n\n // Render styles.\n useThemeProviderClasses(state);\n\n // Return the rendered content.\n return render(state);\n },\n) as React.FunctionComponent<ThemeProviderProps>;\n\nThemeProvider.displayName = 'ThemeProvider';\n"]}
@@ -0,0 +1,38 @@
import * as React from 'react';
import type { Theme, PartialTheme } from '@fluentui/theme';
import type { ICustomizerContext } from '@fluentui/utilities';
/**
* {@docCategory ThemeProvider}
* Props for the ThemeProvider component.
*/
export interface ThemeProviderProps extends React.HTMLAttributes<HTMLDivElement> {
/**
* A component that should be used as the root element of the ThemeProvider component.
*/
as?: React.ElementType;
/**
* Optional ref to the root element.
*/
ref?: React.Ref<HTMLElement>;
/**
* Defines the theme provided by the user.
*/
theme?: PartialTheme | Theme;
/**
* Defines where body-related theme is applied to.
* Setting to 'element' will apply body styles to the root element of ThemeProvider.
* Setting to 'body' will apply body styles to document body.
* Setting to 'none' will not apply body styles to either element or body.
*
* @defaultvalue 'element'
*/
applyTo?: 'element' | 'body' | 'none';
}
/**
* State for the ThemeProvider component.
*/
export type ThemeProviderState = Omit<ThemeProviderProps, 'theme' | 'ref'> & {
theme: Theme;
ref: React.RefObject<HTMLElement | null>;
customizerContext: ICustomizerContext;
};
@@ -0,0 +1,2 @@
export {};
//# sourceMappingURL=ThemeProvider.types.js.map
@@ -0,0 +1 @@
{"version":3,"file":"ThemeProvider.types.js","sourceRoot":"../src/","sources":["utilities/ThemeProvider/ThemeProvider.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport type { Theme, PartialTheme } from '@fluentui/theme';\nimport type { ICustomizerContext } from '@fluentui/utilities';\n\n/* eslint-disable @typescript-eslint/naming-convention */\n\n/**\n * {@docCategory ThemeProvider}\n * Props for the ThemeProvider component.\n */\nexport interface ThemeProviderProps extends React.HTMLAttributes<HTMLDivElement> {\n /**\n * A component that should be used as the root element of the ThemeProvider component.\n */\n as?: React.ElementType;\n\n /**\n * Optional ref to the root element.\n */\n ref?: React.Ref<HTMLElement>;\n\n /**\n * Defines the theme provided by the user.\n */\n theme?: PartialTheme | Theme;\n\n /**\n * Defines where body-related theme is applied to.\n * Setting to 'element' will apply body styles to the root element of ThemeProvider.\n * Setting to 'body' will apply body styles to document body.\n * Setting to 'none' will not apply body styles to either element or body.\n *\n * @defaultvalue 'element'\n */\n applyTo?: 'element' | 'body' | 'none';\n}\n\n/**\n * State for the ThemeProvider component.\n */\nexport type ThemeProviderState = Omit<ThemeProviderProps, 'theme' | 'ref'> & {\n theme: Theme;\n\n ref: React.RefObject<HTMLElement | null>;\n\n customizerContext: ICustomizerContext;\n};\n"]}
+5
View File
@@ -0,0 +1,5 @@
export { ThemeProvider } from './ThemeProvider';
export { useTheme } from './useTheme';
export { ThemeContext } from './ThemeContext';
export * from './makeStyles';
export type { ThemeProviderProps } from './ThemeProvider.types';
+5
View File
@@ -0,0 +1,5 @@
export { ThemeProvider } from './ThemeProvider';
export { useTheme } from './useTheme';
export { ThemeContext } from './ThemeContext';
export * from './makeStyles';
//# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["utilities/ThemeProvider/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,cAAc,cAAc,CAAC","sourcesContent":["export { ThemeProvider } from './ThemeProvider';\nexport { useTheme } from './useTheme';\nexport { ThemeContext } from './ThemeContext';\nexport * from './makeStyles';\nexport type { ThemeProviderProps } from './ThemeProvider.types';\n"]}
@@ -0,0 +1,28 @@
import type { IStyle } from '@fluentui/style-utilities';
import type { Theme } from '@fluentui/theme';
export type StylesClassMapping<TStyleSet extends {
[key in keyof TStyleSet]: IStyle;
}> = {
[key in keyof TStyleSet]: string;
};
/**
* Options that can be provided to the hook generated by `makeStyles`.
* @deprecated Only used in deprecated `makeStyles` implementation below.
*/
export type UseStylesOptions = {
theme?: Theme;
};
/**
* Registers a css object, optionally as a function of the theme.
*
* @param styleOrFunction - Either a css javascript object, or a function which takes in `ITheme`
* and returns a css javascript object.
*
* @deprecated Use `mergeStyles` instead for v8 related code. We will be using a new implementation of `makeStyles` in
* future versions of the library.
*/
export declare function makeStyles<TStyleSet extends {
[key in keyof TStyleSet]: IStyle;
} = {
[key: string]: IStyle;
}>(styleOrFunction: TStyleSet | ((theme: Theme) => TStyleSet)): (options?: UseStylesOptions) => StylesClassMapping<TStyleSet>;
+108
View File
@@ -0,0 +1,108 @@
import * as React from 'react';
import { useTheme } from './useTheme';
import { getId } from '@fluentui/utilities';
import { useWindow } from '@fluentui/react-window-provider';
import { mergeStylesRenderer } from './styleRenderers/mergeStylesRenderer';
var graphGet = function (graphNode, _a) {
var _b, _c, _d;
var windowId = _a[0], id = _a[1], theme = _a[2];
return (_d = (_c = (_b = graphNode.get(windowId)) === null || _b === void 0 ? void 0 : _b.get(id)) === null || _c === void 0 ? void 0 : _c.get(theme)) === null || _d === void 0 ? void 0 : _d.classMap;
};
var graphSet = function (graphNode, _a, classMap) {
var _b, _c;
var windowId = _a[0], id = _a[1], theme = _a[2];
var windowNode = (_b = graphNode.get(windowId)) !== null && _b !== void 0 ? _b : new Map();
graphNode.set(windowId, windowNode);
var idNode = (_c = windowNode.get(id)) !== null && _c !== void 0 ? _c : new Map();
windowNode.set(id, idNode);
idNode.set(theme, { classMap: classMap, refCount: 0 });
};
function graphRef(graphNode, _a) {
var _b, _c;
var windowId = _a[0], id = _a[1], theme = _a[2];
var node = (_c = (_b = graphNode.get(windowId)) === null || _b === void 0 ? void 0 : _b.get(id)) === null || _c === void 0 ? void 0 : _c.get(theme);
if (node) {
node.refCount++;
}
}
function graphDeref(graphNode, _a) {
var _b, _c, _d, _e, _f, _g, _h, _j;
var windowId = _a[0], id = _a[1], theme = _a[2];
var node = (_c = (_b = graphNode.get(windowId)) === null || _b === void 0 ? void 0 : _b.get(id)) === null || _c === void 0 ? void 0 : _c.get(theme);
if (node) {
node.refCount--;
if (node.refCount === 0) {
(_e = (_d = graphNode.get(windowId)) === null || _d === void 0 ? void 0 : _d.get(id)) === null || _e === void 0 ? void 0 : _e.delete(theme);
if (((_g = (_f = graphNode.get(windowId)) === null || _f === void 0 ? void 0 : _f.get(id)) === null || _g === void 0 ? void 0 : _g.size) === 0) {
(_h = graphNode.get(windowId)) === null || _h === void 0 ? void 0 : _h.delete(id);
if (((_j = graphNode.get(windowId)) === null || _j === void 0 ? void 0 : _j.size) === 0) {
graphNode.delete(windowId);
}
}
}
}
}
/**
* Registers a css object, optionally as a function of the theme.
*
* @param styleOrFunction - Either a css javascript object, or a function which takes in `ITheme`
* and returns a css javascript object.
*
* @deprecated Use `mergeStyles` instead for v8 related code. We will be using a new implementation of `makeStyles` in
* future versions of the library.
*/
export function makeStyles(styleOrFunction) {
// Create graph of inputs to map to output.
var graph = new Map();
// Retain a dictionary of window ids we're tracking
var allWindows = new Set();
// cleanupMapEntries will
// 1. remove all the graph branches for the window,
// 2. remove the event listener,
// 3. delete the allWindows entry.
var cleanupMapEntries = function (ev) {
var win = ev.currentTarget;
var winId = win.__id__;
graph.delete(winId);
win.removeEventListener('unload', cleanupMapEntries);
allWindows.delete(winId);
};
// eslint-disable-next-line @typescript-eslint/no-deprecated
return function (options) {
if (options === void 0) { options = {}; }
var theme = options.theme;
var winId;
var win = useWindow();
if (win) {
win.__id__ = win.__id__ || getId();
winId = win.__id__;
if (!allWindows.has(winId)) {
allWindows.add(winId);
win.addEventListener('unload', cleanupMapEntries);
}
}
var contextualTheme = useTheme();
theme = theme || contextualTheme;
var renderer = mergeStylesRenderer;
var id = renderer.getId();
var path = [winId, id, theme];
var value = graphGet(graph, path);
// Don't keep around unused styles
React.useEffect(function () {
graphRef(graph, [winId, id, theme]);
return function () { return graphDeref(graph, [winId, id, theme]); };
}, [winId, id, theme]);
if (!value) {
var styles = isStyleFunction(styleOrFunction)
? styleOrFunction(theme)
: styleOrFunction;
value = mergeStylesRenderer.renderStyles(styles, { targetWindow: win, rtl: !!theme.rtl });
graphSet(graph, path, value);
}
return value;
};
}
function isStyleFunction(styleOrFunction) {
return typeof styleOrFunction === 'function';
}
//# sourceMappingURL=makeStyles.js.map
File diff suppressed because one or more lines are too long
@@ -0,0 +1,3 @@
import type { ThemeProviderState } from './ThemeProvider.types';
import type { JSXElement } from '@fluentui/utilities';
export declare const renderThemeProvider: (state: ThemeProviderState) => JSXElement;
@@ -0,0 +1,18 @@
import { __assign } from "tslib";
import * as React from 'react';
import { CustomizerContext, FocusRectsProvider, getNativeElementProps, omit } from '@fluentui/utilities';
import { ThemeContext } from './ThemeContext';
export var renderThemeProvider = function (state) {
var customizerContext = state.customizerContext, ref = state.ref, theme = state.theme;
var Root = state.as || 'div';
var rootProps = typeof state.as === 'string'
? getNativeElementProps(state.as, state)
: state.as === React.Fragment
? { children: state.children }
: omit(state, ['as']);
return (React.createElement(ThemeContext.Provider, { value: theme },
React.createElement(CustomizerContext.Provider, { value: customizerContext },
React.createElement(FocusRectsProvider, { providerRef: ref },
React.createElement(Root, __assign({}, rootProps))))));
};
//# sourceMappingURL=renderThemeProvider.js.map
@@ -0,0 +1 @@
{"version":3,"file":"renderThemeProvider.js","sourceRoot":"../src/","sources":["utilities/ThemeProvider/renderThemeProvider.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,iBAAiB,EAAE,kBAAkB,EAAE,qBAAqB,EAAE,IAAI,EAAE,MAAM,qBAAqB,CAAC;AACzG,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAK9C,MAAM,CAAC,IAAM,mBAAmB,GAAG,UAAC,KAAyB;IACnD,IAAA,iBAAiB,GAAiB,KAAK,kBAAtB,EAAE,GAAG,GAAY,KAAK,IAAjB,EAAE,KAAK,GAAK,KAAK,MAAV,CAAW;IAChD,IAAM,IAAI,GAAG,KAAK,CAAC,EAAE,IAAI,KAAK,CAAC;IAC/B,IAAM,SAAS,GACb,OAAO,KAAK,CAAC,EAAE,KAAK,QAAQ;QAC1B,CAAC,CAAC,qBAAqB,CAAC,KAAK,CAAC,EAAE,EAAE,KAAK,CAAC;QACxC,CAAC,CAAC,KAAK,CAAC,EAAE,KAAK,KAAK,CAAC,QAAQ;YAC7B,CAAC,CAAC,EAAE,QAAQ,EAAE,KAAK,CAAC,QAAQ,EAAE;YAC9B,CAAC,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;IAE1B,OAAO,CACL,oBAAC,YAAY,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK;QACjC,oBAAC,iBAAiB,CAAC,QAAQ,IAAC,KAAK,EAAE,iBAAiB;YAClD,oBAAC,kBAAkB,IAAC,WAAW,EAAE,GAAG;gBAClC,oBAAC,IAAI,eAAK,SAAS,EAAI,CACJ,CACM,CACP,CACzB,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import * as React from 'react';\nimport { CustomizerContext, FocusRectsProvider, getNativeElementProps, omit } from '@fluentui/utilities';\nimport { ThemeContext } from './ThemeContext';\nimport type { ThemeProviderState } from './ThemeProvider.types';\n\nimport type { JSXElement } from '@fluentui/utilities';\n\nexport const renderThemeProvider = (state: ThemeProviderState): JSXElement => {\n const { customizerContext, ref, theme } = state;\n const Root = state.as || 'div';\n const rootProps =\n typeof state.as === 'string'\n ? getNativeElementProps(state.as, state)\n : state.as === React.Fragment\n ? { children: state.children }\n : omit(state, ['as']);\n\n return (\n <ThemeContext.Provider value={theme}>\n <CustomizerContext.Provider value={customizerContext}>\n <FocusRectsProvider providerRef={ref}>\n <Root {...rootProps} />\n </FocusRectsProvider>\n </CustomizerContext.Provider>\n </ThemeContext.Provider>\n );\n};\n"]}
@@ -0,0 +1,2 @@
import type { StyleRenderer } from './types';
export declare const mergeStylesRenderer: StyleRenderer;
@@ -0,0 +1,19 @@
import { Stylesheet, mergeCssSets, fontFace as mergeFontFace, keyframes as mergeKeyframes, } from '@fluentui/merge-styles';
var _seed = 0;
export var mergeStylesRenderer = {
reset: function () {
// If the stylesheet reset call is made, invalidate the cache keys.
Stylesheet.getInstance().onReset(function () { return _seed++; });
},
getId: function () { return _seed; },
renderStyles: function (styleSet, options) {
return mergeCssSets((Array.isArray(styleSet) ? styleSet : [styleSet]), options);
},
renderFontFace: function (fontFace, options) {
return mergeFontFace(fontFace);
},
renderKeyframes: function (keyframes) {
return mergeKeyframes(keyframes);
},
};
//# sourceMappingURL=mergeStylesRenderer.js.map
@@ -0,0 +1 @@
{"version":3,"file":"mergeStylesRenderer.js","sourceRoot":"../src/","sources":["utilities/ThemeProvider/styleRenderers/mergeStylesRenderer.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,UAAU,EACV,YAAY,EACZ,QAAQ,IAAI,aAAa,EACzB,SAAS,IAAI,cAAc,GAC5B,MAAM,wBAAwB,CAAC;AAGhC,IAAI,KAAK,GAAG,CAAC,CAAC;AAEd,MAAM,CAAC,IAAM,mBAAmB,GAAkB;IAChD,KAAK,EAAE;QACL,mEAAmE;QACnE,UAAU,CAAC,WAAW,EAAE,CAAC,OAAO,CAAC,cAAM,OAAA,KAAK,EAAE,EAAP,CAAO,CAAC,CAAC;IAClD,CAAC;IAED,KAAK,EAAE,cAAM,OAAA,KAAK,EAAL,CAAK;IAElB,YAAY,EAAE,UAAC,QAAQ,EAAE,OAAO;QAC9B,OAAO,YAAY,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAQ,EAAE,OAAO,CAAQ,CAAC;IAChG,CAAC;IAED,cAAc,EAAE,UAAC,QAAQ,EAAE,OAAO;QAChC,OAAO,aAAa,CAAC,QAAQ,CAAC,CAAC;IACjC,CAAC;IAED,eAAe,EAAE,UAAA,SAAS;QACxB,OAAO,cAAc,CAAC,SAAgB,CAAC,CAAC;IAC1C,CAAC;CACF,CAAC","sourcesContent":["import {\n Stylesheet,\n mergeCssSets,\n fontFace as mergeFontFace,\n keyframes as mergeKeyframes,\n} from '@fluentui/merge-styles';\nimport type { StyleRenderer } from './types';\n\nlet _seed = 0;\n\nexport const mergeStylesRenderer: StyleRenderer = {\n reset: () => {\n // If the stylesheet reset call is made, invalidate the cache keys.\n Stylesheet.getInstance().onReset(() => _seed++);\n },\n\n getId: () => _seed,\n\n renderStyles: (styleSet, options) => {\n return mergeCssSets((Array.isArray(styleSet) ? styleSet : [styleSet]) as any, options) as any;\n },\n\n renderFontFace: (fontFace, options) => {\n return mergeFontFace(fontFace);\n },\n\n renderKeyframes: keyframes => {\n return mergeKeyframes(keyframes as any);\n },\n};\n"]}
@@ -0,0 +1,31 @@
import type { IFontFace, IKeyframes } from '@fluentui/merge-styles';
type StyleRendererOptions = {
rtl?: boolean;
targetWindow: Window | undefined;
};
export interface StyleRenderer {
/**
* Expected to initialize or re-initialize the renderer. Primarily for testing purposes.
*/
reset: () => void;
/**
* Returns a unique id for the renderer; used as part of the cache key when determining if new
* styles need to be rendered.
*/
getId: () => number;
/**
* Renders a stylesheet and returns the map of key to class name.
*/
renderStyles: <TRuleSet>(ruleSet: TRuleSet, options: StyleRendererOptions) => {
[key in keyof TRuleSet]: string;
};
/**
* Renders keyframes and returns the keyframe name.
*/
renderKeyframes: (keyframes: IKeyframes, options: StyleRendererOptions) => string;
/**
* Renders fontfaces.
*/
renderFontFace: (fontFace: IFontFace, options: StyleRendererOptions) => void;
}
export {};
@@ -0,0 +1,2 @@
export {};
//# sourceMappingURL=types.js.map
@@ -0,0 +1 @@
{"version":3,"file":"types.js","sourceRoot":"../src/","sources":["utilities/ThemeProvider/styleRenderers/types.ts"],"names":[],"mappings":"","sourcesContent":["/* eslint-disable @typescript-eslint/naming-convention */\nimport type { IFontFace, IKeyframes } from '@fluentui/merge-styles';\n\ntype StyleRendererOptions = {\n rtl?: boolean;\n targetWindow: Window | undefined;\n};\n\nexport interface StyleRenderer {\n /**\n * Expected to initialize or re-initialize the renderer. Primarily for testing purposes.\n */\n reset: () => void;\n\n /**\n * Returns a unique id for the renderer; used as part of the cache key when determining if new\n * styles need to be rendered.\n */\n getId: () => number;\n\n /**\n * Renders a stylesheet and returns the map of key to class name.\n */\n renderStyles: <TRuleSet>(ruleSet: TRuleSet, options: StyleRendererOptions) => { [key in keyof TRuleSet]: string };\n\n /**\n * Renders keyframes and returns the keyframe name.\n */\n renderKeyframes: (keyframes: IKeyframes, options: StyleRendererOptions) => string;\n\n /**\n * Renders fontfaces.\n */\n renderFontFace: (fontFace: IFontFace, options: StyleRendererOptions) => void;\n}\n"]}
@@ -0,0 +1,5 @@
import type { Theme } from '@fluentui/theme';
/**
* React hook for programmatically accessing the theme.
*/
export declare const useTheme: () => Theme;
+19
View File
@@ -0,0 +1,19 @@
import * as React from 'react';
import { useCustomizationSettings } from '@fluentui/utilities';
import { createTheme } from '@fluentui/theme';
import { ThemeContext } from './ThemeContext';
/**
* Get theme from CustomizerContext or Customizations singleton.
*/
function useCompatTheme() {
return useCustomizationSettings(['theme']).theme;
}
/**
* React hook for programmatically accessing the theme.
*/
export var useTheme = function () {
var theme = React.useContext(ThemeContext);
var legacyTheme = useCompatTheme();
return theme || legacyTheme || createTheme({});
};
//# sourceMappingURL=useTheme.js.map
@@ -0,0 +1 @@
{"version":3,"file":"useTheme.js","sourceRoot":"../src/","sources":["utilities/ThemeProvider/useTheme.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,wBAAwB,EAAE,MAAM,qBAAqB,CAAC;AAC/D,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAG9C;;GAEG;AACH,SAAS,cAAc;IACrB,OAAO,wBAAwB,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC;AACnD,CAAC;AAED;;GAEG;AACH,MAAM,CAAC,IAAM,QAAQ,GAAG;IACtB,IAAM,KAAK,GAAG,KAAK,CAAC,UAAU,CAAC,YAAY,CAAC,CAAC;IAC7C,IAAM,WAAW,GAAG,cAAc,EAAE,CAAC;IAErC,OAAO,KAAK,IAAI,WAAW,IAAI,WAAW,CAAC,EAAE,CAAC,CAAC;AACjD,CAAC,CAAC","sourcesContent":["import * as React from 'react';\nimport { useCustomizationSettings } from '@fluentui/utilities';\nimport { createTheme } from '@fluentui/theme';\nimport { ThemeContext } from './ThemeContext';\nimport type { ITheme, Theme } from '@fluentui/theme';\n\n/**\n * Get theme from CustomizerContext or Customizations singleton.\n */\nfunction useCompatTheme(): ITheme | undefined {\n return useCustomizationSettings(['theme']).theme;\n}\n\n/**\n * React hook for programmatically accessing the theme.\n */\nexport const useTheme = (): Theme => {\n const theme = React.useContext(ThemeContext);\n const legacyTheme = useCompatTheme();\n\n return theme || legacyTheme || createTheme({});\n};\n"]}
@@ -0,0 +1,10 @@
import type { ThemeProviderProps, ThemeProviderState } from './ThemeProvider.types';
import type { JSXElement } from '@fluentui/utilities';
/**
* Returns the ThemeProvider render function and calculated state, given user input, ref, and
* a set of default prop values.
*/
export declare const useThemeProvider: (props: ThemeProviderProps, defaultProps: ThemeProviderProps) => {
state: ThemeProviderState;
render: (state: ThemeProviderState) => JSXElement;
};
@@ -0,0 +1,17 @@
import { renderThemeProvider as render } from './renderThemeProvider';
import { useThemeProviderState } from './useThemeProviderState';
import { getPropsWithDefaults } from '@fluentui/utilities';
/**
* Returns the ThemeProvider render function and calculated state, given user input, ref, and
* a set of default prop values.
*/
export var useThemeProvider = function (props, defaultProps) {
var state = getPropsWithDefaults(defaultProps, props);
// Apply changes to state.
useThemeProviderState(state);
return {
state: state,
render: render,
};
};
//# sourceMappingURL=useThemeProvider.js.map
@@ -0,0 +1 @@
{"version":3,"file":"useThemeProvider.js","sourceRoot":"../src/","sources":["utilities/ThemeProvider/useThemeProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,IAAI,MAAM,EAAE,MAAM,uBAAuB,CAAC;AACtE,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAChE,OAAO,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AAK3D;;;GAGG;AACH,MAAM,CAAC,IAAM,gBAAgB,GAAG,UAC9B,KAAyB,EACzB,YAAgC;IAKhC,IAAM,KAAK,GAAG,oBAAoB,CAAC,YAAY,EAAE,KAAK,CAAuB,CAAC;IAE9E,0BAA0B;IAC1B,qBAAqB,CAAC,KAAK,CAAC,CAAC;IAE7B,OAAO;QACL,KAAK,OAAA;QACL,MAAM,QAAA;KACP,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { renderThemeProvider as render } from './renderThemeProvider';\nimport { useThemeProviderState } from './useThemeProviderState';\nimport { getPropsWithDefaults } from '@fluentui/utilities';\nimport type { ThemeProviderProps, ThemeProviderState } from './ThemeProvider.types';\n\nimport type { JSXElement } from '@fluentui/utilities';\n\n/**\n * Returns the ThemeProvider render function and calculated state, given user input, ref, and\n * a set of default prop values.\n */\nexport const useThemeProvider = (\n props: ThemeProviderProps,\n defaultProps: ThemeProviderProps,\n): {\n state: ThemeProviderState;\n render: (state: ThemeProviderState) => JSXElement;\n} => {\n const state = getPropsWithDefaults(defaultProps, props) as ThemeProviderState;\n\n // Apply changes to state.\n useThemeProviderState(state);\n\n return {\n state,\n render,\n };\n};\n"]}
@@ -0,0 +1,2 @@
import type { ThemeProviderState } from './ThemeProvider.types';
export declare function useThemeProviderClasses(state: ThemeProviderState): void;
@@ -0,0 +1,59 @@
import * as React from 'react';
import { css } from '@fluentui/utilities';
import { useDocument } from '@fluentui/react-window-provider';
import { makeStyles } from './makeStyles';
// eslint-disable-next-line @typescript-eslint/no-deprecated
var useThemeProviderStyles = makeStyles(function (theme) {
var semanticColors = theme.semanticColors, fonts = theme.fonts;
return {
body: [
{
color: semanticColors.bodyText,
background: semanticColors.bodyBackground,
fontFamily: fonts.medium.fontFamily,
fontWeight: fonts.medium.fontWeight,
fontSize: fonts.medium.fontSize,
MozOsxFontSmoothing: fonts.medium.MozOsxFontSmoothing,
WebkitFontSmoothing: fonts.medium.WebkitFontSmoothing,
},
],
};
});
/**
* Hook to add class to body element.
*/
function useApplyClassToBody(state, classesToApply) {
var _a;
var applyTo = state.applyTo;
var applyToBody = applyTo === 'body';
var body = (_a = useDocument()) === null || _a === void 0 ? void 0 : _a.body;
React.useEffect(function () {
if (!applyToBody || !body) {
return;
}
for (var _i = 0, classesToApply_1 = classesToApply; _i < classesToApply_1.length; _i++) {
var classToApply = classesToApply_1[_i];
if (classToApply) {
body.classList.add(classToApply);
}
}
return function () {
if (!applyToBody || !body) {
return;
}
for (var _i = 0, classesToApply_2 = classesToApply; _i < classesToApply_2.length; _i++) {
var classToApply = classesToApply_2[_i];
if (classToApply) {
body.classList.remove(classToApply);
}
}
};
}, [applyToBody, body, classesToApply]);
}
export function useThemeProviderClasses(state) {
var classes = useThemeProviderStyles(state);
var className = state.className, applyTo = state.applyTo;
useApplyClassToBody(state, [classes.root, classes.body]);
state.className = css(className, classes.root, applyTo === 'element' && classes.body);
}
//# sourceMappingURL=useThemeProviderClasses.js.map
@@ -0,0 +1 @@
{"version":3,"file":"useThemeProviderClasses.js","sourceRoot":"../src/","sources":["utilities/ThemeProvider/useThemeProviderClasses.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,GAAG,EAAE,MAAM,qBAAqB,CAAC;AAC1C,OAAO,EAAE,WAAW,EAAE,MAAM,iCAAiC,CAAC;AAC9D,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAI1C,4DAA4D;AAC5D,IAAM,sBAAsB,GAAG,UAAU,CAAC,UAAC,KAAY;IAC7C,IAAA,cAAc,GAAY,KAAK,eAAjB,EAAE,KAAK,GAAK,KAAK,MAAV,CAAW;IAExC,OAAO;QACL,IAAI,EAAE;YACJ;gBACE,KAAK,EAAE,cAAc,CAAC,QAAQ;gBAC9B,UAAU,EAAE,cAAc,CAAC,cAAc;gBACzC,UAAU,EAAE,KAAK,CAAC,MAAM,CAAC,UAAU;gBACnC,UAAU,EAAE,KAAK,CAAC,MAAM,CAAC,UAAU;gBACnC,QAAQ,EAAE,KAAK,CAAC,MAAM,CAAC,QAAQ;gBAC/B,mBAAmB,EAAE,KAAK,CAAC,MAAM,CAAC,mBAAmB;gBACrD,mBAAmB,EAAE,KAAK,CAAC,MAAM,CAAC,mBAAmB;aACtD;SACF;KACqB,CAAC;AAC3B,CAAC,CAAC,CAAC;AAEH;;GAEG;AACH,SAAS,mBAAmB,CAAC,KAAyB,EAAE,cAAwB;;IACtE,IAAA,OAAO,GAAK,KAAK,QAAV,CAAW;IAE1B,IAAM,WAAW,GAAG,OAAO,KAAK,MAAM,CAAC;IACvC,IAAM,IAAI,GAAG,MAAA,WAAW,EAAE,0CAAE,IAAI,CAAC;IAEjC,KAAK,CAAC,SAAS,CAAC;QACd,IAAI,CAAC,WAAW,IAAI,CAAC,IAAI,EAAE,CAAC;YAC1B,OAAO;QACT,CAAC;QAED,KAA2B,UAAc,EAAd,iCAAc,EAAd,4BAAc,EAAd,IAAc,EAAE,CAAC;YAAvC,IAAM,YAAY,uBAAA;YACrB,IAAI,YAAY,EAAE,CAAC;gBACjB,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,YAAY,CAAC,CAAC;YACnC,CAAC;QACH,CAAC;QAED,OAAO;YACL,IAAI,CAAC,WAAW,IAAI,CAAC,IAAI,EAAE,CAAC;gBAC1B,OAAO;YACT,CAAC;YAED,KAA2B,UAAc,EAAd,iCAAc,EAAd,4BAAc,EAAd,IAAc,EAAE,CAAC;gBAAvC,IAAM,YAAY,uBAAA;gBACrB,IAAI,YAAY,EAAE,CAAC;oBACjB,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC;gBACtC,CAAC;YACH,CAAC;QACH,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,WAAW,EAAE,IAAI,EAAE,cAAc,CAAC,CAAC,CAAC;AAC1C,CAAC;AAED,MAAM,UAAU,uBAAuB,CAAC,KAAyB;IAC/D,IAAM,OAAO,GAAG,sBAAsB,CAAC,KAAK,CAAC,CAAC;IACtC,IAAA,SAAS,GAAc,KAAK,UAAnB,EAAE,OAAO,GAAK,KAAK,QAAV,CAAW;IAErC,mBAAmB,CAAC,KAAK,EAAE,CAAC,OAAO,CAAC,IAAI,EAAE,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC;IAEzD,KAAK,CAAC,SAAS,GAAG,GAAG,CAAC,SAAS,EAAE,OAAO,CAAC,IAAI,EAAE,OAAO,KAAK,SAAS,IAAI,OAAO,CAAC,IAAI,CAAC,CAAC;AACxF,CAAC","sourcesContent":["import * as React from 'react';\nimport { css } from '@fluentui/utilities';\nimport { useDocument } from '@fluentui/react-window-provider';\nimport { makeStyles } from './makeStyles';\nimport type { ThemeProviderState } from './ThemeProvider.types';\nimport type { Theme } from '@fluentui/theme';\n\n// eslint-disable-next-line @typescript-eslint/no-deprecated\nconst useThemeProviderStyles = makeStyles((theme: Theme) => {\n const { semanticColors, fonts } = theme;\n\n return {\n body: [\n {\n color: semanticColors.bodyText,\n background: semanticColors.bodyBackground,\n fontFamily: fonts.medium.fontFamily,\n fontWeight: fonts.medium.fontWeight,\n fontSize: fonts.medium.fontSize,\n MozOsxFontSmoothing: fonts.medium.MozOsxFontSmoothing,\n WebkitFontSmoothing: fonts.medium.WebkitFontSmoothing,\n },\n ],\n } as Record<string, any>;\n});\n\n/**\n * Hook to add class to body element.\n */\nfunction useApplyClassToBody(state: ThemeProviderState, classesToApply: string[]): void {\n const { applyTo } = state;\n\n const applyToBody = applyTo === 'body';\n const body = useDocument()?.body;\n\n React.useEffect(() => {\n if (!applyToBody || !body) {\n return;\n }\n\n for (const classToApply of classesToApply) {\n if (classToApply) {\n body.classList.add(classToApply);\n }\n }\n\n return () => {\n if (!applyToBody || !body) {\n return;\n }\n\n for (const classToApply of classesToApply) {\n if (classToApply) {\n body.classList.remove(classToApply);\n }\n }\n };\n }, [applyToBody, body, classesToApply]);\n}\n\nexport function useThemeProviderClasses(state: ThemeProviderState): void {\n const classes = useThemeProviderStyles(state);\n const { className, applyTo } = state;\n\n useApplyClassToBody(state, [classes.root, classes.body]);\n\n state.className = css(className, classes.root, applyTo === 'element' && classes.body);\n}\n"]}
@@ -0,0 +1,2 @@
import type { ThemeProviderState } from './ThemeProvider.types';
export declare const useThemeProviderState: (draftState: ThemeProviderState) => void;
@@ -0,0 +1,46 @@
import { mergeThemes } from '@fluentui/theme';
import * as React from 'react';
import { useTheme } from './useTheme';
import { getId } from '@fluentui/utilities';
var themeToIdMap = new Map();
var getThemeId = function () {
var themes = [];
for (var _i = 0; _i < arguments.length; _i++) {
themes[_i] = arguments[_i];
}
var ids = [];
for (var _a = 0, themes_1 = themes; _a < themes_1.length; _a++) {
var theme = themes_1[_a];
if (theme) {
var id = theme.id || themeToIdMap.get(theme);
if (!id) {
id = getId('');
themeToIdMap.set(theme, id);
}
ids.push(id);
}
}
return ids.join('-');
};
export var useThemeProviderState = function (draftState) {
var userTheme = draftState.theme;
// Pull contextual theme.
var parentTheme = useTheme();
// Update the incoming theme with a memoized version of the merged theme.
var theme = (draftState.theme = React.useMemo(function () {
var mergedTheme = mergeThemes(parentTheme, userTheme);
mergedTheme.id = getThemeId(parentTheme, userTheme);
return mergedTheme;
}, [parentTheme, userTheme]));
draftState.customizerContext = React.useMemo(function () { return ({
customizations: {
inCustomizerContext: true,
settings: { theme: theme },
scopedSettings: theme.components || {},
},
}); }, [theme]);
if (draftState.theme.rtl !== parentTheme.rtl) {
draftState.dir = draftState.theme.rtl ? 'rtl' : 'ltr';
}
};
//# sourceMappingURL=useThemeProviderState.js.map
@@ -0,0 +1 @@
{"version":3,"file":"useThemeProviderState.js","sourceRoot":"../src/","sources":["utilities/ThemeProvider/useThemeProviderState.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,KAAK,EAAE,MAAM,qBAAqB,CAAC;AAK5C,IAAM,YAAY,GAAG,IAAI,GAAG,EAAkB,CAAC;AAE/C,IAAM,UAAU,GAAG;IAAC,gBAA+C;SAA/C,UAA+C,EAA/C,qBAA+C,EAA/C,IAA+C;QAA/C,2BAA+C;;IACjE,IAAM,GAAG,GAAa,EAAE,CAAC;IAEzB,KAAoB,UAAM,EAAN,iBAAM,EAAN,oBAAM,EAAN,IAAM,EAAE,CAAC;QAAxB,IAAM,KAAK,eAAA;QACd,IAAI,KAAK,EAAE,CAAC;YACV,IAAI,EAAE,GAAI,KAAe,CAAC,EAAE,IAAI,YAAY,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;YAExD,IAAI,CAAC,EAAE,EAAE,CAAC;gBACR,EAAE,GAAG,KAAK,CAAC,EAAE,CAAC,CAAC;gBACf,YAAY,CAAC,GAAG,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC;YAC9B,CAAC;YACD,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;QACf,CAAC;IACH,CAAC;IAED,OAAO,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AACvB,CAAC,CAAC;AAEF,MAAM,CAAC,IAAM,qBAAqB,GAAG,UAAC,UAA8B;IAClE,IAAM,SAAS,GAAiB,UAAU,CAAC,KAAK,CAAC;IAEjD,yBAAyB;IACzB,IAAM,WAAW,GAAG,QAAQ,EAAE,CAAC;IAE/B,yEAAyE;IACzE,IAAM,KAAK,GAAG,CAAC,UAAU,CAAC,KAAK,GAAG,KAAK,CAAC,OAAO,CAAQ;QACrD,IAAM,WAAW,GAAU,WAAW,CAAC,WAAW,EAAE,SAAS,CAAC,CAAC;QAE/D,WAAW,CAAC,EAAE,GAAG,UAAU,CAAC,WAAW,EAAE,SAAS,CAAC,CAAC;QAEpD,OAAO,WAAW,CAAC;IACrB,CAAC,EAAE,CAAC,WAAW,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC;IAE9B,UAAU,CAAC,iBAAiB,GAAG,KAAK,CAAC,OAAO,CAC1C,cAAM,OAAA,CAAC;QACL,cAAc,EAAE;YACd,mBAAmB,EAAE,IAAI;YACzB,QAAQ,EAAE,EAAE,KAAK,OAAA,EAAE;YACnB,cAAc,EAAE,KAAK,CAAC,UAAU,IAAI,EAAE;SACvC;KACF,CAAC,EANI,CAMJ,EACF,CAAC,KAAK,CAAC,CACR,CAAC;IAEF,IAAI,UAAU,CAAC,KAAK,CAAC,GAAG,KAAK,WAAW,CAAC,GAAG,EAAE,CAAC;QAC7C,UAAU,CAAC,GAAG,GAAG,UAAU,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC;IACxD,CAAC;AACH,CAAC,CAAC","sourcesContent":["import { mergeThemes } from '@fluentui/theme';\nimport * as React from 'react';\nimport { useTheme } from './useTheme';\nimport { getId } from '@fluentui/utilities';\nimport type { PartialTheme, Theme } from '@fluentui/theme';\nimport type { ThemeProviderState } from './ThemeProvider.types';\nimport type { ICustomizerContext } from '@fluentui/utilities';\n\nconst themeToIdMap = new Map<Object, string>();\n\nconst getThemeId = (...themes: (Theme | PartialTheme | undefined)[]) => {\n const ids: string[] = [];\n\n for (const theme of themes) {\n if (theme) {\n let id = (theme as Theme).id || themeToIdMap.get(theme);\n\n if (!id) {\n id = getId('');\n themeToIdMap.set(theme, id);\n }\n ids.push(id);\n }\n }\n\n return ids.join('-');\n};\n\nexport const useThemeProviderState = (draftState: ThemeProviderState): void => {\n const userTheme: PartialTheme = draftState.theme;\n\n // Pull contextual theme.\n const parentTheme = useTheme();\n\n // Update the incoming theme with a memoized version of the merged theme.\n const theme = (draftState.theme = React.useMemo<Theme>(() => {\n const mergedTheme: Theme = mergeThemes(parentTheme, userTheme);\n\n mergedTheme.id = getThemeId(parentTheme, userTheme);\n\n return mergedTheme;\n }, [parentTheme, userTheme]));\n\n draftState.customizerContext = React.useMemo<ICustomizerContext>(\n () => ({\n customizations: {\n inCustomizerContext: true,\n settings: { theme },\n scopedSettings: theme.components || {},\n },\n }),\n [theme],\n );\n\n if (draftState.theme.rtl !== parentTheme.rtl) {\n draftState.dir = draftState.theme.rtl ? 'rtl' : 'ltr';\n }\n};\n"]}
@@ -0,0 +1,7 @@
/**
* @internal
* Get a CSS color string from some color components.
* If `a` is specified and not 100, returns an `rgba()` string.
* Otherwise returns `hex` prefixed with #.
*/
export declare function _rgbaOrHexString(r: number, g: number, b: number, a: number | undefined, hex: string): string;
+11
View File
@@ -0,0 +1,11 @@
import { MAX_COLOR_ALPHA } from './consts';
/**
* @internal
* Get a CSS color string from some color components.
* If `a` is specified and not 100, returns an `rgba()` string.
* Otherwise returns `hex` prefixed with #.
*/
export function _rgbaOrHexString(r, g, b, a, hex) {
return a === MAX_COLOR_ALPHA || typeof a !== 'number' ? "#".concat(hex) : "rgba(".concat(r, ", ").concat(g, ", ").concat(b, ", ").concat(a / MAX_COLOR_ALPHA, ")");
}
//# sourceMappingURL=_rgbaOrHexString.js.map
@@ -0,0 +1 @@
{"version":3,"file":"_rgbaOrHexString.js","sourceRoot":"../src/","sources":["utilities/color/_rgbaOrHexString.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAE3C;;;;;GAKG;AACH,MAAM,UAAU,gBAAgB,CAAC,CAAS,EAAE,CAAS,EAAE,CAAS,EAAE,CAAqB,EAAE,GAAW;IAClG,OAAO,CAAC,KAAK,eAAe,IAAI,OAAO,CAAC,KAAK,QAAQ,CAAC,CAAC,CAAC,WAAI,GAAG,CAAE,CAAC,CAAC,CAAC,eAAQ,CAAC,eAAK,CAAC,eAAK,CAAC,eAAK,CAAC,GAAG,eAAe,MAAG,CAAC;AACvH,CAAC","sourcesContent":["import { MAX_COLOR_ALPHA } from './consts';\n\n/**\n * @internal\n * Get a CSS color string from some color components.\n * If `a` is specified and not 100, returns an `rgba()` string.\n * Otherwise returns `hex` prefixed with #.\n */\nexport function _rgbaOrHexString(r: number, g: number, b: number, a: number | undefined, hex: string): string {\n return a === MAX_COLOR_ALPHA || typeof a !== 'number' ? `#${hex}` : `rgba(${r}, ${g}, ${b}, ${a / MAX_COLOR_ALPHA})`;\n}\n"]}
+2
View File
@@ -0,0 +1,2 @@
/** Clamp a value to ensure it falls within a given range. */
export declare function clamp(value: number, max: number, min?: number): number;
+6
View File
@@ -0,0 +1,6 @@
/** Clamp a value to ensure it falls within a given range. */
export function clamp(value, max, min) {
if (min === void 0) { min = 0; }
return value < min ? min : value > max ? max : value;
}
//# sourceMappingURL=clamp.js.map
+1
View File
@@ -0,0 +1 @@
{"version":3,"file":"clamp.js","sourceRoot":"../src/","sources":["utilities/color/clamp.ts"],"names":[],"mappings":"AAAA,6DAA6D;AAC7D,MAAM,UAAU,KAAK,CAAC,KAAa,EAAE,GAAW,EAAE,GAAO;IAAP,oBAAA,EAAA,OAAO;IACvD,OAAO,KAAK,GAAG,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,KAAK,GAAG,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,KAAK,CAAC;AACvD,CAAC","sourcesContent":["/** Clamp a value to ensure it falls within a given range. */\nexport function clamp(value: number, max: number, min = 0): number {\n return value < min ? min : value > max ? max : value;\n}\n"]}
+22
View File
@@ -0,0 +1,22 @@
export * from './consts';
export * from './interfaces';
export * from './cssColor';
export * from './rgb2hex';
export * from './clamp';
export * from './hsl2rgb';
export * from './hsl2hsv';
export * from './hsv2rgb';
export * from './hsv2hex';
export * from './rgb2hsv';
export * from './hsv2hsl';
export * from './getColorFromString';
export * from './getColorFromRGBA';
export * from './getColorFromHSV';
export * from './getFullColorString';
export * from './updateSV';
export * from './updateH';
export * from './updateRGB';
export * from './updateA';
export * from './correctRGB';
export * from './correctHSV';
export * from './correctHex';
+23
View File
@@ -0,0 +1,23 @@
export * from './consts';
export * from './interfaces';
export * from './cssColor';
export * from './rgb2hex';
export * from './clamp';
export * from './hsl2rgb';
export * from './hsl2hsv';
export * from './hsv2rgb';
export * from './hsv2hex';
export * from './rgb2hsv';
export * from './hsv2hsl';
export * from './getColorFromString';
export * from './getColorFromRGBA';
export * from './getColorFromHSV';
export * from './getFullColorString';
export * from './updateSV';
export * from './updateH';
export * from './updateRGB';
export * from './updateA';
export * from './correctRGB';
export * from './correctHSV';
export * from './correctHex';
//# sourceMappingURL=colors.js.map
+1
View File
@@ -0,0 +1 @@
{"version":3,"file":"colors.js","sourceRoot":"../src/","sources":["utilities/color/colors.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAC1B,cAAc,sBAAsB,CAAC;AACrC,cAAc,oBAAoB,CAAC;AACnC,cAAc,mBAAmB,CAAC;AAClC,cAAc,sBAAsB,CAAC;AACrC,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC","sourcesContent":["export * from './consts';\nexport * from './interfaces';\nexport * from './cssColor';\nexport * from './rgb2hex';\nexport * from './clamp';\nexport * from './hsl2rgb';\nexport * from './hsl2hsv';\nexport * from './hsv2rgb';\nexport * from './hsv2hex';\nexport * from './rgb2hsv';\nexport * from './hsv2hsl';\nexport * from './getColorFromString';\nexport * from './getColorFromRGBA';\nexport * from './getColorFromHSV';\nexport * from './getFullColorString';\nexport * from './updateSV';\nexport * from './updateH';\nexport * from './updateRGB';\nexport * from './updateA';\nexport * from './correctRGB';\nexport * from './correctHSV';\nexport * from './correctHex';\n"]}
+19
View File
@@ -0,0 +1,19 @@
export declare const MAX_COLOR_SATURATION = 100;
export declare const MAX_COLOR_HUE = 359;
export declare const MAX_COLOR_VALUE = 100;
export declare const MAX_COLOR_RGB = 255;
/** @deprecated Use MAX_COLOR_RGB (255) or MAX_COLOR_ALPHA (100) */
export declare const MAX_COLOR_RGBA = 255;
export declare const MAX_COLOR_ALPHA = 100;
/** Minimum length for a hexadecimal color string (not including the #) */
export declare const MIN_HEX_LENGTH = 3;
/** Maximum length for a hexadecimal color string (not including the #) */
export declare const MAX_HEX_LENGTH = 6;
/** Minimum length for a string of an RGBA color component */
export declare const MIN_RGBA_LENGTH = 1;
/** Maximum length for a string of an RGBA color component */
export declare const MAX_RGBA_LENGTH = 3;
/** Regular expression matching only valid hexadecimal chars */
export declare const HEX_REGEX: RegExp;
/** Regular expression matching only numbers */
export declare const RGBA_REGEX: RegExp;
+20
View File
@@ -0,0 +1,20 @@
export var MAX_COLOR_SATURATION = 100;
export var MAX_COLOR_HUE = 359;
export var MAX_COLOR_VALUE = 100;
export var MAX_COLOR_RGB = 255;
/** @deprecated Use MAX_COLOR_RGB (255) or MAX_COLOR_ALPHA (100) */
export var MAX_COLOR_RGBA = MAX_COLOR_RGB;
export var MAX_COLOR_ALPHA = 100;
/** Minimum length for a hexadecimal color string (not including the #) */
export var MIN_HEX_LENGTH = 3;
/** Maximum length for a hexadecimal color string (not including the #) */
export var MAX_HEX_LENGTH = 6;
/** Minimum length for a string of an RGBA color component */
export var MIN_RGBA_LENGTH = 1;
/** Maximum length for a string of an RGBA color component */
export var MAX_RGBA_LENGTH = 3;
/** Regular expression matching only valid hexadecimal chars */
export var HEX_REGEX = /^[\da-f]{0,6}$/i;
/** Regular expression matching only numbers */
export var RGBA_REGEX = /^\d{0,3}$/;
//# sourceMappingURL=consts.js.map
+1
View File
@@ -0,0 +1 @@
{"version":3,"file":"consts.js","sourceRoot":"../src/","sources":["utilities/color/consts.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,IAAM,oBAAoB,GAAG,GAAG,CAAC;AACxC,MAAM,CAAC,IAAM,aAAa,GAAG,GAAG,CAAC;AACjC,MAAM,CAAC,IAAM,eAAe,GAAG,GAAG,CAAC;AACnC,MAAM,CAAC,IAAM,aAAa,GAAG,GAAG,CAAC;AACjC,mEAAmE;AACnE,MAAM,CAAC,IAAM,cAAc,GAAG,aAAa,CAAC;AAC5C,MAAM,CAAC,IAAM,eAAe,GAAG,GAAG,CAAC;AAEnC,0EAA0E;AAC1E,MAAM,CAAC,IAAM,cAAc,GAAG,CAAC,CAAC;AAChC,0EAA0E;AAC1E,MAAM,CAAC,IAAM,cAAc,GAAG,CAAC,CAAC;AAChC,6DAA6D;AAC7D,MAAM,CAAC,IAAM,eAAe,GAAG,CAAC,CAAC;AACjC,6DAA6D;AAC7D,MAAM,CAAC,IAAM,eAAe,GAAG,CAAC,CAAC;AAEjC,+DAA+D;AAC/D,MAAM,CAAC,IAAM,SAAS,GAAG,iBAAiB,CAAC;AAC3C,+CAA+C;AAC/C,MAAM,CAAC,IAAM,UAAU,GAAG,WAAW,CAAC","sourcesContent":["export const MAX_COLOR_SATURATION = 100;\nexport const MAX_COLOR_HUE = 359;\nexport const MAX_COLOR_VALUE = 100;\nexport const MAX_COLOR_RGB = 255;\n/** @deprecated Use MAX_COLOR_RGB (255) or MAX_COLOR_ALPHA (100) */\nexport const MAX_COLOR_RGBA = MAX_COLOR_RGB;\nexport const MAX_COLOR_ALPHA = 100;\n\n/** Minimum length for a hexadecimal color string (not including the #) */\nexport const MIN_HEX_LENGTH = 3;\n/** Maximum length for a hexadecimal color string (not including the #) */\nexport const MAX_HEX_LENGTH = 6;\n/** Minimum length for a string of an RGBA color component */\nexport const MIN_RGBA_LENGTH = 1;\n/** Maximum length for a string of an RGBA color component */\nexport const MAX_RGBA_LENGTH = 3;\n\n/** Regular expression matching only valid hexadecimal chars */\nexport const HEX_REGEX = /^[\\da-f]{0,6}$/i;\n/** Regular expression matching only numbers */\nexport const RGBA_REGEX = /^\\d{0,3}$/;\n"]}
+3
View File
@@ -0,0 +1,3 @@
import type { IHSV } from './interfaces';
/** Corrects an HSV color to fall within the valid range. */
export declare function correctHSV(color: IHSV): IHSV;
+11
View File
@@ -0,0 +1,11 @@
import { MAX_COLOR_HUE, MAX_COLOR_SATURATION, MAX_COLOR_VALUE } from './consts';
import { clamp } from './clamp';
/** Corrects an HSV color to fall within the valid range. */
export function correctHSV(color) {
return {
h: clamp(color.h, MAX_COLOR_HUE),
s: clamp(color.s, MAX_COLOR_SATURATION),
v: clamp(color.v, MAX_COLOR_VALUE),
};
}
//# sourceMappingURL=correctHSV.js.map
+1
View File
@@ -0,0 +1 @@
{"version":3,"file":"correctHSV.js","sourceRoot":"../src/","sources":["utilities/color/correctHSV.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,oBAAoB,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAChF,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAGhC,4DAA4D;AAC5D,MAAM,UAAU,UAAU,CAAC,KAAW;IACpC,OAAO;QACL,CAAC,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,aAAa,CAAC;QAChC,CAAC,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,oBAAoB,CAAC;QACvC,CAAC,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,eAAe,CAAC;KACnC,CAAC;AACJ,CAAC","sourcesContent":["import { MAX_COLOR_HUE, MAX_COLOR_SATURATION, MAX_COLOR_VALUE } from './consts';\nimport { clamp } from './clamp';\nimport type { IHSV } from './interfaces';\n\n/** Corrects an HSV color to fall within the valid range. */\nexport function correctHSV(color: IHSV): IHSV {\n return {\n h: clamp(color.h, MAX_COLOR_HUE),\n s: clamp(color.s, MAX_COLOR_SATURATION),\n v: clamp(color.v, MAX_COLOR_VALUE),\n };\n}\n"]}
+6
View File
@@ -0,0 +1,6 @@
/**
* Corrects a hex color to have length 3 or 6. Defaults to white if too short.
* Does NOT check anything besides the length (such as valid characters) and does NOT handle
* hex values starting with # sign.
*/
export declare function correctHex(hex: string): string;
+16
View File
@@ -0,0 +1,16 @@
import { MIN_HEX_LENGTH, MAX_HEX_LENGTH } from './consts';
/**
* Corrects a hex color to have length 3 or 6. Defaults to white if too short.
* Does NOT check anything besides the length (such as valid characters) and does NOT handle
* hex values starting with # sign.
*/
export function correctHex(hex) {
if (!hex || hex.length < MIN_HEX_LENGTH) {
return 'ffffff'; // not a valid color--default to white
}
if (hex.length >= MAX_HEX_LENGTH) {
return hex.substring(0, MAX_HEX_LENGTH);
}
return hex.substring(0, MIN_HEX_LENGTH);
}
//# sourceMappingURL=correctHex.js.map
+1
View File
@@ -0,0 +1 @@
{"version":3,"file":"correctHex.js","sourceRoot":"../src/","sources":["utilities/color/correctHex.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAE1D;;;;GAIG;AACH,MAAM,UAAU,UAAU,CAAC,GAAW;IACpC,IAAI,CAAC,GAAG,IAAI,GAAG,CAAC,MAAM,GAAG,cAAc,EAAE,CAAC;QACxC,OAAO,QAAQ,CAAC,CAAC,sCAAsC;IACzD,CAAC;IACD,IAAI,GAAG,CAAC,MAAM,IAAI,cAAc,EAAE,CAAC;QACjC,OAAO,GAAG,CAAC,SAAS,CAAC,CAAC,EAAE,cAAc,CAAC,CAAC;IAC1C,CAAC;IACD,OAAO,GAAG,CAAC,SAAS,CAAC,CAAC,EAAE,cAAc,CAAC,CAAC;AAC1C,CAAC","sourcesContent":["import { MIN_HEX_LENGTH, MAX_HEX_LENGTH } from './consts';\n\n/**\n * Corrects a hex color to have length 3 or 6. Defaults to white if too short.\n * Does NOT check anything besides the length (such as valid characters) and does NOT handle\n * hex values starting with # sign.\n */\nexport function correctHex(hex: string): string {\n if (!hex || hex.length < MIN_HEX_LENGTH) {\n return 'ffffff'; // not a valid color--default to white\n }\n if (hex.length >= MAX_HEX_LENGTH) {\n return hex.substring(0, MAX_HEX_LENGTH);\n }\n return hex.substring(0, MIN_HEX_LENGTH);\n}\n"]}
+3
View File
@@ -0,0 +1,3 @@
import type { IRGB } from './interfaces';
/** Corrects an RGB color to fall within the valid range. */
export declare function correctRGB(color: IRGB): IRGB;
+12
View File
@@ -0,0 +1,12 @@
import { MAX_COLOR_ALPHA, MAX_COLOR_RGB } from './consts';
import { clamp } from './clamp';
/** Corrects an RGB color to fall within the valid range. */
export function correctRGB(color) {
return {
r: clamp(color.r, MAX_COLOR_RGB),
g: clamp(color.g, MAX_COLOR_RGB),
b: clamp(color.b, MAX_COLOR_RGB),
a: typeof color.a === 'number' ? clamp(color.a, MAX_COLOR_ALPHA) : color.a,
};
}
//# sourceMappingURL=correctRGB.js.map
+1
View File
@@ -0,0 +1 @@
{"version":3,"file":"correctRGB.js","sourceRoot":"../src/","sources":["utilities/color/correctRGB.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAC1D,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAGhC,6DAA6D;AAC7D,MAAM,UAAU,UAAU,CAAC,KAAW;IACpC,OAAO;QACL,CAAC,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,aAAa,CAAC;QAChC,CAAC,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,aAAa,CAAC;QAChC,CAAC,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,aAAa,CAAC;QAChC,CAAC,EAAE,OAAO,KAAK,CAAC,CAAC,KAAK,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,eAAe,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC;KAC3E,CAAC;AACJ,CAAC","sourcesContent":["import { MAX_COLOR_ALPHA, MAX_COLOR_RGB } from './consts';\nimport { clamp } from './clamp';\nimport type { IRGB } from './interfaces';\n\n/** Corrects an RGB color to fall within the valid range. */\nexport function correctRGB(color: IRGB): IRGB {\n return {\n r: clamp(color.r, MAX_COLOR_RGB),\n g: clamp(color.g, MAX_COLOR_RGB),\n b: clamp(color.b, MAX_COLOR_RGB),\n a: typeof color.a === 'number' ? clamp(color.a, MAX_COLOR_ALPHA) : color.a,\n };\n}\n"]}
+8
View File
@@ -0,0 +1,8 @@
import type { IRGB } from './interfaces';
/**
* Converts a valid CSS color string to an RGB color.
* Note that hex colors *must* be prefixed with # to be considered valid.
* Alpha in returned color defaults to 100.
* Four and eight digit hex values (with alpha) are supported if the current browser supports them.
*/
export declare function cssColor(color?: string, doc?: Document): IRGB | undefined;

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