Socket
Socket
Sign inDemoInstall

@fluentui/react-utilities

Package Overview
Dependencies
Maintainers
13
Versions
837
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@fluentui/react-utilities - npm Package Compare versions

Comparing version 0.0.0-nightly131c59c96120211203.1 to 0.0.0-nightly2462abf75c20211217.1

38

CHANGELOG.json

@@ -5,5 +5,5 @@ {

{
"date": "Fri, 03 Dec 2021 04:13:24 GMT",
"tag": "@fluentui/react-utilities_v0.0.0-nightly131c59c96120211203.1",
"version": "0.0.0-nightly131c59c96120211203.1",
"date": "Fri, 17 Dec 2021 04:14:53 GMT",
"tag": "@fluentui/react-utilities_v0.0.0-nightly2462abf75c20211217.1",
"version": "0.0.0-nightly2462abf75c20211217.1",
"comments": {

@@ -14,11 +14,37 @@ "prerelease": [

"package": "@fluentui/react-utilities",
"commit": "6fe1f0a081835b662f3c880d6405724d3abc4c0b",
"commit": "4d9ea3499c852a0ed7b218202c074558963d7bca",
"comment": "Release nightly v9"
},
{
"author": "elcraig@microsoft.com",
"package": "@fluentui/react-utilities",
"commit": "39ce3cbcf15ce2619649e1eddccf932736ceac07",
"comment": "[breaking] Remove useControllableValue hook (use useControllableState instead)"
},
{
"author": "beachball",
"package": "@fluentui/react-utilities",
"comment": "Bump @fluentui/keyboard-keys to v0.0.0-nightly131c59c96120211203.1",
"commit": "6fe1f0a081835b662f3c880d6405724d3abc4c0b"
"comment": "Bump @fluentui/keyboard-keys to v0.0.0-nightly2462abf75c20211217.1",
"commit": "4d9ea3499c852a0ed7b218202c074558963d7bca"
}
],
"none": [
{
"author": "elcraig@microsoft.com",
"package": "@fluentui/react-utilities",
"commit": "3360b45ec159250b1346c91afad7dce138e6bc20",
"comment": "Update API file to version generated by typescript 4.3"
},
{
"author": "seanmonahan@microsoft.com",
"package": "@fluentui/react-utilities",
"commit": "6404bef16cebf1f67b9b80a9f6d5f605f9873df1",
"comment": "Update getSlots() docs."
},
{
"author": "lingfangao@hotmail.com",
"package": "@fluentui/react-utilities",
"commit": "a4e048a0e03ddd676670da516e3a6612b26ea500",
"comment": "chore: Remove enzyme from react-utilities tests"
}
]

@@ -25,0 +51,0 @@ }

13

CHANGELOG.md
# Change Log - @fluentui/react-utilities
This log was last generated on Fri, 03 Dec 2021 04:13:24 GMT and should not be manually modified.
This log was last generated on Fri, 17 Dec 2021 04:14:53 GMT and should not be manually modified.
<!-- Start content -->
## [0.0.0-nightly131c59c96120211203.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-utilities_v0.0.0-nightly131c59c96120211203.1)
## [0.0.0-nightly2462abf75c20211217.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-utilities_v0.0.0-nightly2462abf75c20211217.1)
Fri, 03 Dec 2021 04:13:24 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-utilities_v9.0.0-beta.4..@fluentui/react-utilities_v0.0.0-nightly131c59c96120211203.1)
Fri, 17 Dec 2021 04:14:53 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-utilities_v9.0.0-beta.4..@fluentui/react-utilities_v0.0.0-nightly2462abf75c20211217.1)
### Changes
- Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/6fe1f0a081835b662f3c880d6405724d3abc4c0b) by email not defined)
- Bump @fluentui/keyboard-keys to v0.0.0-nightly131c59c96120211203.1 ([commit](https://github.com/microsoft/fluentui/commit/6fe1f0a081835b662f3c880d6405724d3abc4c0b) by beachball)
- Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/4d9ea3499c852a0ed7b218202c074558963d7bca) by email not defined)
- [breaking] Remove useControllableValue hook (use useControllableState instead) ([PR #20865](https://github.com/microsoft/fluentui/pull/20865) by elcraig@microsoft.com)
- Bump @fluentui/keyboard-keys to v0.0.0-nightly2462abf75c20211217.1 ([commit](https://github.com/microsoft/fluentui/commit/4d9ea3499c852a0ed7b218202c074558963d7bca) by beachball)

@@ -17,0 +18,0 @@ ## [9.0.0-beta.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-utilities_v9.0.0-beta.4)

54

dist/react-utilities.d.ts

@@ -14,3 +14,3 @@ import { DispatchWithoutAction } from 'react';

*/
export declare const applyTriggerPropsToChildren: <TTriggerProps>(children: React_2.ReactElement<any, string | ((props: any) => React_2.ReactElement<any, string | any | (new (props: any) => React_2.Component<any, any, any>)> | null) | (new (props: any) => React_2.Component<any, any, any>)> | ((props: TTriggerProps) => React_2.ReactNode) | null | undefined, triggerProps: TTriggerProps) => React_2.ReactNode;
export declare const applyTriggerPropsToChildren: <TTriggerProps>(children: React_2.ReactElement<any, string | React_2.JSXElementConstructor<any>> | ((props: TTriggerProps) => React_2.ReactNode) | null | undefined, triggerProps: TTriggerProps) => React_2.ReactNode;

@@ -62,4 +62,2 @@ /**

export declare type ChangeCallback<TElement extends HTMLElement, TValue, TEvent extends React_2.SyntheticEvent<TElement> | undefined> = (ev: TEvent, newValue: TValue | undefined) => void;
/**

@@ -106,7 +104,2 @@ * Clamps `value` to a number between the min and max.

/**
* Default value can be a value or an initializer
*/
declare type DefaultValue<TValue> = TValue | (() => TValue);
/**
* An array of DIV tag properties and events.

@@ -192,4 +185,6 @@ *

* The slotProps will always omit the `as` prop within them, and for slots that are string
* primitives, the props will be filtered according the the slot type. For example, if the
* slot is rendered `as: 'a'`, the props will be filtered for acceptable anchor props.
* primitives, the props will be filtered according to the slot type by the type system.
* For example, if the slot is rendered `as: 'a'`, the props will be filtered for acceptable
* anchor props. Note that this is only enforced at build time by Typescript -- there is no
* runtime code filtering props in this function.
*

@@ -342,3 +337,3 @@ * @param state - State including slot definitions

*/
export declare const onlyChild: <P>(child: string | number | boolean | {} | React_2.ReactNodeArray | React_2.ReactPortal | React_2.ReactElement<P, string | ((props: any) => React_2.ReactElement<any, string | any | (new (props: any) => React_2.Component<any, any, any>)> | null) | (new (props: any) => React_2.Component<any, any, any>)> | null | undefined) => React_2.ReactElement<P, string | ((props: any) => React_2.ReactElement<any, string | any | (new (props: any) => React_2.Component<any, any, any>)> | null) | (new (props: any) => React_2.Component<any, any, any>)>;
export declare const onlyChild: <P>(child: boolean | React_2.ReactText | React_2.ReactFragment | React_2.ReactPortal | React_2.ReactElement<P, string | React_2.JSXElementConstructor<any>> | null | undefined) => React_2.ReactElement<P, string | React_2.JSXElementConstructor<any>>;

@@ -501,5 +496,14 @@ export declare const optionProperties: Record<string, number>;

/**
* A useState 'like' hook that allows optional user control
* Useful for components which allow uncontrolled and controlled behaviour for users
* @returns - https://reactjs.org/docs/hooks-state.html
* A `useState`-like hook to manage a value that could be either controlled or uncontrolled,
* such as a checked state or text input string.
*
* Unlike `setState`, it's okay to call the returned updater (dispatch) function for either a
* controlled or uncontrolled component. Calls will only be respected if the component is uncontrolled.
*
* @returns Same as [`useState`](https://reactjs.org/docs/hooks-reference.html#usestate): an array
* of the current value and an updater (dispatch) function. The updater function is referentially
* stable (won't change during the component's lifecycle). It can take either a new value, or a
* function which is passed the previous value and returns the new value. Unlike `setState`, calls
* to the updater function will only be respected if the component is uncontrolled.
* @see https://reactjs.org/docs/uncontrolled-components.html
*/

@@ -510,11 +514,12 @@ export declare const useControllableState: <State>(options: UseControllableStateOptions<State>) => [State, React_2.Dispatch<React_2.SetStateAction<State>>];

/**
* User provided default state or factory initializer
* User-provided default state or initializer, for uncontrolled usage.
*/
defaultState?: State | (() => State);
/**
* User provided controllable state, undefined state means internal state will be used
* User-provided controlled state. `undefined` means internal state will be used.
*/
state: State | undefined;
/**
* Used to initialize state if all user provided states are undefined
* Used as the initial state if `state` and `defaultState` are both `undefined`.
* If `undefined` is the correct initial state, pass that here.
*/

@@ -525,17 +530,2 @@ initialState: State;

/**
* Hook to manage a value that could be either controlled or uncontrolled, such as a checked state or
* text box string.
* @param controlledValue - The controlled value passed in the props. This value will always be used if provided,
* and the internal state will be updated to reflect it.
* @param defaultUncontrolledValue - Initial value for the internal state in the uncontrolled case.
* @returns An array of the current value and an updater callback. Like `React.useState`, the updater
* callback always has the same identity, and it can take either a new value, or a function which
* is passed the previous value and returns the new value.
* @see https://reactjs.org/docs/uncontrolled-components.html
*/
export declare function useControllableValue<TValue, TElement extends HTMLElement>(controlledValue: TValue, defaultUncontrolledValue: DefaultValue<TValue>): Readonly<[TValue, (update: React_2.SetStateAction<TValue>) => void]>;
export declare function useControllableValue<TValue, TElement extends HTMLElement, TEvent extends React_2.SyntheticEvent<TElement> | undefined>(controlledValue: TValue, defaultUncontrolledValue: DefaultValue<TValue>, onChange: ChangeCallback<TElement, TValue, TEvent>): Readonly<[TValue, (update: React_2.SetStateAction<TValue>, ev?: React_2.FormEvent<TElement>) => void]>;
/**
* https://reactjs.org/docs/hooks-faq.html#how-to-read-an-often-changing-value-from-usecallback

@@ -542,0 +532,0 @@ *

6

lib-commonjs/compose/getSlots.d.ts

@@ -18,4 +18,6 @@ import * as React from 'react';

* The slotProps will always omit the `as` prop within them, and for slots that are string
* primitives, the props will be filtered according the the slot type. For example, if the
* slot is rendered `as: 'a'`, the props will be filtered for acceptable anchor props.
* primitives, the props will be filtered according to the slot type by the type system.
* For example, if the slot is rendered `as: 'a'`, the props will be filtered for acceptable
* anchor props. Note that this is only enforced at build time by Typescript -- there is no
* runtime code filtering props in this function.
*

@@ -22,0 +24,0 @@ * @param state - State including slot definitions

6

lib-commonjs/compose/getSlots.js

@@ -22,4 +22,6 @@ "use strict";

* The slotProps will always omit the `as` prop within them, and for slots that are string
* primitives, the props will be filtered according the the slot type. For example, if the
* slot is rendered `as: 'a'`, the props will be filtered for acceptable anchor props.
* primitives, the props will be filtered according to the slot type by the type system.
* For example, if the slot is rendered `as: 'a'`, the props will be filtered for acceptable
* anchor props. Note that this is only enforced at build time by Typescript -- there is no
* runtime code filtering props in this function.
*

@@ -26,0 +28,0 @@ * @param state - State including slot definitions

1

lib-commonjs/hooks/index.d.ts
export * from './useControllableState';
export * from './useBoolean';
export * from './useConst';
export * from './useControllableValue';
export * from './useEventCallback';

@@ -6,0 +5,0 @@ export * from './useFirstMount';

2

lib-commonjs/hooks/index.js

@@ -15,4 +15,2 @@ "use strict";

tslib_1.__exportStar(require("./useControllableValue"), exports);
tslib_1.__exportStar(require("./useEventCallback"), exports);

@@ -19,0 +17,0 @@

22

lib-commonjs/hooks/useControllableState.d.ts
import * as React from 'react';
export declare type UseControllableStateOptions<State> = {
/**
* User provided default state or factory initializer
* User-provided default state or initializer, for uncontrolled usage.
*/
defaultState?: State | (() => State);
/**
* User provided controllable state, undefined state means internal state will be used
* User-provided controlled state. `undefined` means internal state will be used.
*/
state: State | undefined;
/**
* Used to initialize state if all user provided states are undefined
* Used as the initial state if `state` and `defaultState` are both `undefined`.
* If `undefined` is the correct initial state, pass that here.
*/

@@ -17,6 +18,15 @@ initialState: State;

/**
* A useState 'like' hook that allows optional user control
* Useful for components which allow uncontrolled and controlled behaviour for users
* @returns - https://reactjs.org/docs/hooks-state.html
* A `useState`-like hook to manage a value that could be either controlled or uncontrolled,
* such as a checked state or text input string.
*
* Unlike `setState`, it's okay to call the returned updater (dispatch) function for either a
* controlled or uncontrolled component. Calls will only be respected if the component is uncontrolled.
*
* @returns Same as [`useState`](https://reactjs.org/docs/hooks-reference.html#usestate): an array
* of the current value and an updater (dispatch) function. The updater function is referentially
* stable (won't change during the component's lifecycle). It can take either a new value, or a
* function which is passed the previous value and returns the new value. Unlike `setState`, calls
* to the updater function will only be respected if the component is uncontrolled.
* @see https://reactjs.org/docs/uncontrolled-components.html
*/
export declare const useControllableState: <State>(options: UseControllableStateOptions<State>) => [State, React.Dispatch<React.SetStateAction<State>>];

21

lib-commonjs/hooks/useControllableState.js

@@ -12,6 +12,2 @@ "use strict";

function isUndefined(state) {
return typeof state === 'undefined';
}
function isFactoryDispatch(newState) {

@@ -21,5 +17,14 @@ return typeof newState === 'function';

/**
* A useState 'like' hook that allows optional user control
* Useful for components which allow uncontrolled and controlled behaviour for users
* @returns - https://reactjs.org/docs/hooks-state.html
* A `useState`-like hook to manage a value that could be either controlled or uncontrolled,
* such as a checked state or text input string.
*
* Unlike `setState`, it's okay to call the returned updater (dispatch) function for either a
* controlled or uncontrolled component. Calls will only be respected if the component is uncontrolled.
*
* @returns Same as [`useState`](https://reactjs.org/docs/hooks-reference.html#usestate): an array
* of the current value and an updater (dispatch) function. The updater function is referentially
* stable (won't change during the component's lifecycle). It can take either a new value, or a
* function which is passed the previous value and returns the new value. Unlike `setState`, calls
* to the updater function will only be respected if the component is uncontrolled.
* @see https://reactjs.org/docs/uncontrolled-components.html
*/

@@ -30,3 +35,3 @@

const isControlled = useIsControlled(options.state);
const initialState = isUndefined(options.defaultState) ? options.initialState : options.defaultState;
const initialState = typeof options.defaultState === 'undefined' ? options.initialState : options.defaultState;
const [internalState, setInternalState] = React.useState(initialState);

@@ -33,0 +38,0 @@ const state = isControlled ? options.state : internalState;

2

lib-commonjs/utils/applyTriggerPropsToChildren.d.ts

@@ -5,2 +5,2 @@ import * as React from 'react';

*/
export declare const applyTriggerPropsToChildren: <TTriggerProps>(children: React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)> | ((props: TTriggerProps) => React.ReactNode) | null | undefined, triggerProps: TTriggerProps) => React.ReactNode;
export declare const applyTriggerPropsToChildren: <TTriggerProps>(children: React.ReactElement<any, string | React.JSXElementConstructor<any>> | ((props: TTriggerProps) => React.ReactNode) | null | undefined, triggerProps: TTriggerProps) => React.ReactNode;

2

lib-commonjs/utils/onlyChild.d.ts

@@ -5,2 +5,2 @@ import * as React from 'react';

*/
export declare const onlyChild: <P>(child: string | number | boolean | {} | React.ReactNodeArray | React.ReactPortal | React.ReactElement<P, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)> | null | undefined) => React.ReactElement<P, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)>;
export declare const onlyChild: <P>(child: boolean | React.ReactText | React.ReactFragment | React.ReactPortal | React.ReactElement<P, string | React.JSXElementConstructor<any>> | null | undefined) => React.ReactElement<P, string | React.JSXElementConstructor<any>>;

60

lib-commonjs/utils/properties.js

@@ -35,3 +35,4 @@ "use strict";

exports.baseElementProperties = /*#__PURE__*/toObjectMap(['accessKey', 'children', 'className', 'contentEditable', 'dir', 'draggable', 'hidden', 'htmlFor', 'id', 'lang', 'ref', 'role', 'style', 'tabIndex', 'title', 'translate', 'spellCheck', 'name']);
exports.baseElementProperties = /*#__PURE__*/toObjectMap(['accessKey', 'children', 'className', 'contentEditable', 'dir', 'draggable', 'hidden', 'htmlFor', 'id', 'lang', 'ref', 'role', 'style', 'tabIndex', 'title', 'translate', 'spellCheck', 'name' // global
]);
/**

@@ -50,3 +51,4 @@ * An array of HTML element properties and events.

exports.labelProperties = /*#__PURE__*/toObjectMap(exports.htmlElementProperties, ['form']);
exports.labelProperties = /*#__PURE__*/toObjectMap(exports.htmlElementProperties, ['form' // button, fieldset, input, label, meter, object, output, select, textarea
]);
/**

@@ -58,3 +60,4 @@ * An array of AUDIO tag properties and events.

exports.audioProperties = /*#__PURE__*/toObjectMap(exports.htmlElementProperties, ['height', 'loop', 'muted', 'preload', 'src', 'width']);
exports.audioProperties = /*#__PURE__*/toObjectMap(exports.htmlElementProperties, ['height', 'loop', 'muted', 'preload', 'src', 'width' // canvas, embed, iframe, img, input, object, video
]);
/**

@@ -66,3 +69,4 @@ * An array of VIDEO tag properties and events.

exports.videoProperties = /*#__PURE__*/toObjectMap(exports.audioProperties, ['poster']);
exports.videoProperties = /*#__PURE__*/toObjectMap(exports.audioProperties, ['poster' // video
]);
/**

@@ -74,3 +78,4 @@ * An array of OL tag properties and events.

exports.olProperties = /*#__PURE__*/toObjectMap(exports.htmlElementProperties, ['start']);
exports.olProperties = /*#__PURE__*/toObjectMap(exports.htmlElementProperties, ['start' // ol
]);
/**

@@ -82,3 +87,4 @@ * An array of LI tag properties and events.

exports.liProperties = /*#__PURE__*/toObjectMap(exports.htmlElementProperties, ['value']);
exports.liProperties = /*#__PURE__*/toObjectMap(exports.htmlElementProperties, ['value' // button, input, li, option, meter, progress, param
]);
/**

@@ -90,3 +96,4 @@ * An array of A tag properties and events.

exports.anchorProperties = /*#__PURE__*/toObjectMap(exports.htmlElementProperties, ['download', 'href', 'hrefLang', 'media', 'rel', 'target', 'type']);
exports.anchorProperties = /*#__PURE__*/toObjectMap(exports.htmlElementProperties, ['download', 'href', 'hrefLang', 'media', 'rel', 'target', 'type' // a, button, input, link, menu, object, script, source, style
]);
/**

@@ -98,3 +105,4 @@ * An array of BUTTON tag properties and events.

exports.buttonProperties = /*#__PURE__*/toObjectMap(exports.htmlElementProperties, ['autoFocus', 'disabled', 'form', 'formAction', 'formEncType', 'formMethod', 'formNoValidate', 'formTarget', 'type', 'value']);
exports.buttonProperties = /*#__PURE__*/toObjectMap(exports.htmlElementProperties, ['autoFocus', 'disabled', 'form', 'formAction', 'formEncType', 'formMethod', 'formNoValidate', 'formTarget', 'type', 'value' // button, input, li, option, meter, progress, param,
]);
/**

@@ -106,3 +114,4 @@ * An array of INPUT tag properties and events.

exports.inputProperties = /*#__PURE__*/toObjectMap(exports.buttonProperties, ['accept', 'alt', 'autoCapitalize', 'autoComplete', 'checked', 'dirname', 'form', 'height', 'inputMode', 'list', 'max', 'maxLength', 'min', 'multiple', 'pattern', 'placeholder', 'readOnly', 'required', 'src', 'step', 'size', 'type', 'value', 'width']);
exports.inputProperties = /*#__PURE__*/toObjectMap(exports.buttonProperties, ['accept', 'alt', 'autoCapitalize', 'autoComplete', 'checked', 'dirname', 'form', 'height', 'inputMode', 'list', 'max', 'maxLength', 'min', 'multiple', 'pattern', 'placeholder', 'readOnly', 'required', 'src', 'step', 'size', 'type', 'value', 'width' // canvas, embed, iframe, img, input, object, video
]);
/**

@@ -114,3 +123,4 @@ * An array of TEXTAREA tag properties and events.

exports.textAreaProperties = /*#__PURE__*/toObjectMap(exports.buttonProperties, ['autoCapitalize', 'cols', 'dirname', 'form', 'maxLength', 'placeholder', 'readOnly', 'required', 'rows', 'wrap']);
exports.textAreaProperties = /*#__PURE__*/toObjectMap(exports.buttonProperties, ['autoCapitalize', 'cols', 'dirname', 'form', 'maxLength', 'placeholder', 'readOnly', 'required', 'rows', 'wrap' // textarea
]);
/**

@@ -122,4 +132,6 @@ * An array of SELECT tag properties and events.

exports.selectProperties = /*#__PURE__*/toObjectMap(exports.buttonProperties, ['form', 'multiple', 'required']);
exports.optionProperties = /*#__PURE__*/toObjectMap(exports.htmlElementProperties, ['selected', 'value']);
exports.selectProperties = /*#__PURE__*/toObjectMap(exports.buttonProperties, ['form', 'multiple', 'required' // input, select, textarea
]);
exports.optionProperties = /*#__PURE__*/toObjectMap(exports.htmlElementProperties, ['selected', 'value' // button, input, li, option, meter, progress, param
]);
/**

@@ -131,3 +143,4 @@ * An array of TABLE tag properties and events.

exports.tableProperties = /*#__PURE__*/toObjectMap(exports.htmlElementProperties, ['cellPadding', 'cellSpacing']);
exports.tableProperties = /*#__PURE__*/toObjectMap(exports.htmlElementProperties, ['cellPadding', 'cellSpacing' // table
]);
/**

@@ -146,3 +159,4 @@ * An array of TR tag properties and events.

exports.thProperties = /*#__PURE__*/toObjectMap(exports.htmlElementProperties, ['rowSpan', 'scope']);
exports.thProperties = /*#__PURE__*/toObjectMap(exports.htmlElementProperties, ['rowSpan', 'scope' // th
]);
/**

@@ -154,5 +168,8 @@ * An array of TD tag properties and events.

exports.tdProperties = /*#__PURE__*/toObjectMap(exports.htmlElementProperties, ['colSpan', 'headers', 'rowSpan', 'scope']);
exports.colGroupProperties = /*#__PURE__*/toObjectMap(exports.htmlElementProperties, ['span']);
exports.colProperties = /*#__PURE__*/toObjectMap(exports.htmlElementProperties, ['span']);
exports.tdProperties = /*#__PURE__*/toObjectMap(exports.htmlElementProperties, ['colSpan', 'headers', 'rowSpan', 'scope' // th
]);
exports.colGroupProperties = /*#__PURE__*/toObjectMap(exports.htmlElementProperties, ['span' // col, colgroup
]);
exports.colProperties = /*#__PURE__*/toObjectMap(exports.htmlElementProperties, ['span' // col, colgroup
]);
/**

@@ -164,3 +181,4 @@ * An array of FORM tag properties and events.

exports.formProperties = /*#__PURE__*/toObjectMap(exports.htmlElementProperties, ['acceptCharset', 'action', 'encType', 'encType', 'method', 'noValidate', 'target']);
exports.formProperties = /*#__PURE__*/toObjectMap(exports.htmlElementProperties, ['acceptCharset', 'action', 'encType', 'encType', 'method', 'noValidate', 'target' // form
]);
/**

@@ -172,3 +190,4 @@ * An array of IFRAME tag properties and events.

exports.iframeProperties = /*#__PURE__*/toObjectMap(exports.htmlElementProperties, ['allow', 'allowFullScreen', 'allowPaymentRequest', 'allowTransparency', 'csp', 'height', 'importance', 'referrerPolicy', 'sandbox', 'src', 'srcDoc', 'width']);
exports.iframeProperties = /*#__PURE__*/toObjectMap(exports.htmlElementProperties, ['allow', 'allowFullScreen', 'allowPaymentRequest', 'allowTransparency', 'csp', 'height', 'importance', 'referrerPolicy', 'sandbox', 'src', 'srcDoc', 'width' // canvas, embed, iframe, img, input, object, video,
]);
/**

@@ -180,3 +199,4 @@ * An array of IMAGE tag properties and events.

exports.imgProperties = /*#__PURE__*/toObjectMap(exports.htmlElementProperties, ['alt', 'crossOrigin', 'height', 'src', 'srcSet', 'useMap', 'width']);
exports.imgProperties = /*#__PURE__*/toObjectMap(exports.htmlElementProperties, ['alt', 'crossOrigin', 'height', 'src', 'srcSet', 'useMap', 'width' // canvas, embed, iframe, img, input, object, video
]);
/**

@@ -183,0 +203,0 @@ * @deprecated Use imgProperties for img elements.

6

lib/compose/getSlots.d.ts

@@ -18,4 +18,6 @@ import * as React from 'react';

* The slotProps will always omit the `as` prop within them, and for slots that are string
* primitives, the props will be filtered according the the slot type. For example, if the
* slot is rendered `as: 'a'`, the props will be filtered for acceptable anchor props.
* primitives, the props will be filtered according to the slot type by the type system.
* For example, if the slot is rendered `as: 'a'`, the props will be filtered for acceptable
* anchor props. Note that this is only enforced at build time by Typescript -- there is no
* runtime code filtering props in this function.
*

@@ -22,0 +24,0 @@ * @param state - State including slot definitions

6

lib/compose/getSlots.js

@@ -13,4 +13,6 @@ import * as React from 'react';

* The slotProps will always omit the `as` prop within them, and for slots that are string
* primitives, the props will be filtered according the the slot type. For example, if the
* slot is rendered `as: 'a'`, the props will be filtered for acceptable anchor props.
* primitives, the props will be filtered according to the slot type by the type system.
* For example, if the slot is rendered `as: 'a'`, the props will be filtered for acceptable
* anchor props. Note that this is only enforced at build time by Typescript -- there is no
* runtime code filtering props in this function.
*

@@ -17,0 +19,0 @@ * @param state - State including slot definitions

1

lib/hooks/index.d.ts
export * from './useControllableState';
export * from './useBoolean';
export * from './useConst';
export * from './useControllableValue';
export * from './useEventCallback';

@@ -6,0 +5,0 @@ export * from './useFirstMount';

1

lib/hooks/index.js
export * from './useControllableState';
export * from './useBoolean';
export * from './useConst';
export * from './useControllableValue';
export * from './useEventCallback';

@@ -6,0 +5,0 @@ export * from './useFirstMount';

22

lib/hooks/useControllableState.d.ts
import * as React from 'react';
export declare type UseControllableStateOptions<State> = {
/**
* User provided default state or factory initializer
* User-provided default state or initializer, for uncontrolled usage.
*/
defaultState?: State | (() => State);
/**
* User provided controllable state, undefined state means internal state will be used
* User-provided controlled state. `undefined` means internal state will be used.
*/
state: State | undefined;
/**
* Used to initialize state if all user provided states are undefined
* Used as the initial state if `state` and `defaultState` are both `undefined`.
* If `undefined` is the correct initial state, pass that here.
*/

@@ -17,6 +18,15 @@ initialState: State;

/**
* A useState 'like' hook that allows optional user control
* Useful for components which allow uncontrolled and controlled behaviour for users
* @returns - https://reactjs.org/docs/hooks-state.html
* A `useState`-like hook to manage a value that could be either controlled or uncontrolled,
* such as a checked state or text input string.
*
* Unlike `setState`, it's okay to call the returned updater (dispatch) function for either a
* controlled or uncontrolled component. Calls will only be respected if the component is uncontrolled.
*
* @returns Same as [`useState`](https://reactjs.org/docs/hooks-reference.html#usestate): an array
* of the current value and an updater (dispatch) function. The updater function is referentially
* stable (won't change during the component's lifecycle). It can take either a new value, or a
* function which is passed the previous value and returns the new value. Unlike `setState`, calls
* to the updater function will only be respected if the component is uncontrolled.
* @see https://reactjs.org/docs/uncontrolled-components.html
*/
export declare const useControllableState: <State>(options: UseControllableStateOptions<State>) => [State, React.Dispatch<React.SetStateAction<State>>];

21

lib/hooks/useControllableState.js
import * as React from 'react';
import { useConst } from './useConst';
function isUndefined(state) {
return typeof state === 'undefined';
}
function isFactoryDispatch(newState) {

@@ -12,5 +8,14 @@ return typeof newState === 'function';

/**
* A useState 'like' hook that allows optional user control
* Useful for components which allow uncontrolled and controlled behaviour for users
* @returns - https://reactjs.org/docs/hooks-state.html
* A `useState`-like hook to manage a value that could be either controlled or uncontrolled,
* such as a checked state or text input string.
*
* Unlike `setState`, it's okay to call the returned updater (dispatch) function for either a
* controlled or uncontrolled component. Calls will only be respected if the component is uncontrolled.
*
* @returns Same as [`useState`](https://reactjs.org/docs/hooks-reference.html#usestate): an array
* of the current value and an updater (dispatch) function. The updater function is referentially
* stable (won't change during the component's lifecycle). It can take either a new value, or a
* function which is passed the previous value and returns the new value. Unlike `setState`, calls
* to the updater function will only be respected if the component is uncontrolled.
* @see https://reactjs.org/docs/uncontrolled-components.html
*/

@@ -21,3 +26,3 @@

const isControlled = useIsControlled(options.state);
const initialState = isUndefined(options.defaultState) ? options.initialState : options.defaultState;
const initialState = typeof options.defaultState === 'undefined' ? options.initialState : options.defaultState;
const [internalState, setInternalState] = React.useState(initialState);

@@ -24,0 +29,0 @@ const state = isControlled ? options.state : internalState;

2

lib/utils/applyTriggerPropsToChildren.d.ts

@@ -5,2 +5,2 @@ import * as React from 'react';

*/
export declare const applyTriggerPropsToChildren: <TTriggerProps>(children: React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)> | ((props: TTriggerProps) => React.ReactNode) | null | undefined, triggerProps: TTriggerProps) => React.ReactNode;
export declare const applyTriggerPropsToChildren: <TTriggerProps>(children: React.ReactElement<any, string | React.JSXElementConstructor<any>> | ((props: TTriggerProps) => React.ReactNode) | null | undefined, triggerProps: TTriggerProps) => React.ReactNode;

2

lib/utils/onlyChild.d.ts

@@ -5,2 +5,2 @@ import * as React from 'react';

*/
export declare const onlyChild: <P>(child: string | number | boolean | {} | React.ReactNodeArray | React.ReactPortal | React.ReactElement<P, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)> | null | undefined) => React.ReactElement<P, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)>;
export declare const onlyChild: <P>(child: boolean | React.ReactText | React.ReactFragment | React.ReactPortal | React.ReactElement<P, string | React.JSXElementConstructor<any>> | null | undefined) => React.ReactElement<P, string | React.JSXElementConstructor<any>>;

60

lib/utils/properties.js

@@ -28,3 +28,4 @@ const toObjectMap = (...items) => {

export const baseElementProperties = /*#__PURE__*/toObjectMap(['accessKey', 'children', 'className', 'contentEditable', 'dir', 'draggable', 'hidden', 'htmlFor', 'id', 'lang', 'ref', 'role', 'style', 'tabIndex', 'title', 'translate', 'spellCheck', 'name']);
export const baseElementProperties = /*#__PURE__*/toObjectMap(['accessKey', 'children', 'className', 'contentEditable', 'dir', 'draggable', 'hidden', 'htmlFor', 'id', 'lang', 'ref', 'role', 'style', 'tabIndex', 'title', 'translate', 'spellCheck', 'name' // global
]);
/**

@@ -43,3 +44,4 @@ * An array of HTML element properties and events.

export const labelProperties = /*#__PURE__*/toObjectMap(htmlElementProperties, ['form']);
export const labelProperties = /*#__PURE__*/toObjectMap(htmlElementProperties, ['form' // button, fieldset, input, label, meter, object, output, select, textarea
]);
/**

@@ -51,3 +53,4 @@ * An array of AUDIO tag properties and events.

export const audioProperties = /*#__PURE__*/toObjectMap(htmlElementProperties, ['height', 'loop', 'muted', 'preload', 'src', 'width']);
export const audioProperties = /*#__PURE__*/toObjectMap(htmlElementProperties, ['height', 'loop', 'muted', 'preload', 'src', 'width' // canvas, embed, iframe, img, input, object, video
]);
/**

@@ -59,3 +62,4 @@ * An array of VIDEO tag properties and events.

export const videoProperties = /*#__PURE__*/toObjectMap(audioProperties, ['poster']);
export const videoProperties = /*#__PURE__*/toObjectMap(audioProperties, ['poster' // video
]);
/**

@@ -67,3 +71,4 @@ * An array of OL tag properties and events.

export const olProperties = /*#__PURE__*/toObjectMap(htmlElementProperties, ['start']);
export const olProperties = /*#__PURE__*/toObjectMap(htmlElementProperties, ['start' // ol
]);
/**

@@ -75,3 +80,4 @@ * An array of LI tag properties and events.

export const liProperties = /*#__PURE__*/toObjectMap(htmlElementProperties, ['value']);
export const liProperties = /*#__PURE__*/toObjectMap(htmlElementProperties, ['value' // button, input, li, option, meter, progress, param
]);
/**

@@ -83,3 +89,4 @@ * An array of A tag properties and events.

export const anchorProperties = /*#__PURE__*/toObjectMap(htmlElementProperties, ['download', 'href', 'hrefLang', 'media', 'rel', 'target', 'type']);
export const anchorProperties = /*#__PURE__*/toObjectMap(htmlElementProperties, ['download', 'href', 'hrefLang', 'media', 'rel', 'target', 'type' // a, button, input, link, menu, object, script, source, style
]);
/**

@@ -91,3 +98,4 @@ * An array of BUTTON tag properties and events.

export const buttonProperties = /*#__PURE__*/toObjectMap(htmlElementProperties, ['autoFocus', 'disabled', 'form', 'formAction', 'formEncType', 'formMethod', 'formNoValidate', 'formTarget', 'type', 'value']);
export const buttonProperties = /*#__PURE__*/toObjectMap(htmlElementProperties, ['autoFocus', 'disabled', 'form', 'formAction', 'formEncType', 'formMethod', 'formNoValidate', 'formTarget', 'type', 'value' // button, input, li, option, meter, progress, param,
]);
/**

@@ -99,3 +107,4 @@ * An array of INPUT tag properties and events.

export const inputProperties = /*#__PURE__*/toObjectMap(buttonProperties, ['accept', 'alt', 'autoCapitalize', 'autoComplete', 'checked', 'dirname', 'form', 'height', 'inputMode', 'list', 'max', 'maxLength', 'min', 'multiple', 'pattern', 'placeholder', 'readOnly', 'required', 'src', 'step', 'size', 'type', 'value', 'width']);
export const inputProperties = /*#__PURE__*/toObjectMap(buttonProperties, ['accept', 'alt', 'autoCapitalize', 'autoComplete', 'checked', 'dirname', 'form', 'height', 'inputMode', 'list', 'max', 'maxLength', 'min', 'multiple', 'pattern', 'placeholder', 'readOnly', 'required', 'src', 'step', 'size', 'type', 'value', 'width' // canvas, embed, iframe, img, input, object, video
]);
/**

@@ -107,3 +116,4 @@ * An array of TEXTAREA tag properties and events.

export const textAreaProperties = /*#__PURE__*/toObjectMap(buttonProperties, ['autoCapitalize', 'cols', 'dirname', 'form', 'maxLength', 'placeholder', 'readOnly', 'required', 'rows', 'wrap']);
export const textAreaProperties = /*#__PURE__*/toObjectMap(buttonProperties, ['autoCapitalize', 'cols', 'dirname', 'form', 'maxLength', 'placeholder', 'readOnly', 'required', 'rows', 'wrap' // textarea
]);
/**

@@ -115,4 +125,6 @@ * An array of SELECT tag properties and events.

export const selectProperties = /*#__PURE__*/toObjectMap(buttonProperties, ['form', 'multiple', 'required']);
export const optionProperties = /*#__PURE__*/toObjectMap(htmlElementProperties, ['selected', 'value']);
export const selectProperties = /*#__PURE__*/toObjectMap(buttonProperties, ['form', 'multiple', 'required' // input, select, textarea
]);
export const optionProperties = /*#__PURE__*/toObjectMap(htmlElementProperties, ['selected', 'value' // button, input, li, option, meter, progress, param
]);
/**

@@ -124,3 +136,4 @@ * An array of TABLE tag properties and events.

export const tableProperties = /*#__PURE__*/toObjectMap(htmlElementProperties, ['cellPadding', 'cellSpacing']);
export const tableProperties = /*#__PURE__*/toObjectMap(htmlElementProperties, ['cellPadding', 'cellSpacing' // table
]);
/**

@@ -139,3 +152,4 @@ * An array of TR tag properties and events.

export const thProperties = /*#__PURE__*/toObjectMap(htmlElementProperties, ['rowSpan', 'scope']);
export const thProperties = /*#__PURE__*/toObjectMap(htmlElementProperties, ['rowSpan', 'scope' // th
]);
/**

@@ -147,5 +161,8 @@ * An array of TD tag properties and events.

export const tdProperties = /*#__PURE__*/toObjectMap(htmlElementProperties, ['colSpan', 'headers', 'rowSpan', 'scope']);
export const colGroupProperties = /*#__PURE__*/toObjectMap(htmlElementProperties, ['span']);
export const colProperties = /*#__PURE__*/toObjectMap(htmlElementProperties, ['span']);
export const tdProperties = /*#__PURE__*/toObjectMap(htmlElementProperties, ['colSpan', 'headers', 'rowSpan', 'scope' // th
]);
export const colGroupProperties = /*#__PURE__*/toObjectMap(htmlElementProperties, ['span' // col, colgroup
]);
export const colProperties = /*#__PURE__*/toObjectMap(htmlElementProperties, ['span' // col, colgroup
]);
/**

@@ -157,3 +174,4 @@ * An array of FORM tag properties and events.

export const formProperties = /*#__PURE__*/toObjectMap(htmlElementProperties, ['acceptCharset', 'action', 'encType', 'encType', 'method', 'noValidate', 'target']);
export const formProperties = /*#__PURE__*/toObjectMap(htmlElementProperties, ['acceptCharset', 'action', 'encType', 'encType', 'method', 'noValidate', 'target' // form
]);
/**

@@ -165,3 +183,4 @@ * An array of IFRAME tag properties and events.

export const iframeProperties = /*#__PURE__*/toObjectMap(htmlElementProperties, ['allow', 'allowFullScreen', 'allowPaymentRequest', 'allowTransparency', 'csp', 'height', 'importance', 'referrerPolicy', 'sandbox', 'src', 'srcDoc', 'width']);
export const iframeProperties = /*#__PURE__*/toObjectMap(htmlElementProperties, ['allow', 'allowFullScreen', 'allowPaymentRequest', 'allowTransparency', 'csp', 'height', 'importance', 'referrerPolicy', 'sandbox', 'src', 'srcDoc', 'width' // canvas, embed, iframe, img, input, object, video,
]);
/**

@@ -173,3 +192,4 @@ * An array of IMAGE tag properties and events.

export const imgProperties = /*#__PURE__*/toObjectMap(htmlElementProperties, ['alt', 'crossOrigin', 'height', 'src', 'srcSet', 'useMap', 'width']);
export const imgProperties = /*#__PURE__*/toObjectMap(htmlElementProperties, ['alt', 'crossOrigin', 'height', 'src', 'srcSet', 'useMap', 'width' // canvas, embed, iframe, img, input, object, video
]);
/**

@@ -176,0 +196,0 @@ * @deprecated Use imgProperties for img elements.

8

package.json
{
"name": "@fluentui/react-utilities",
"version": "0.0.0-nightly131c59c96120211203.1",
"version": "0.0.0-nightly2462abf75c20211217.1",
"description": "A set of general React-specific utilities.",

@@ -30,8 +30,4 @@ "main": "lib-commonjs/index.js",

"@fluentui/scripts": "^1.0.0",
"@types/enzyme": "3.10.3",
"@types/enzyme-adapter-react-16": "1.0.3",
"@types/react": "16.9.42",
"@types/react-test-renderer": "^16.0.0",
"enzyme": "~3.10.0",
"enzyme-adapter-react-16": "^1.15.0",
"react": "16.8.6",

@@ -41,3 +37,3 @@ "react-test-renderer": "^16.3.0"

"dependencies": {
"@fluentui/keyboard-keys": "0.0.0-nightly131c59c96120211203.1",
"@fluentui/keyboard-keys": "0.0.0-nightly2462abf75c20211217.1",
"tslib": "^2.1.0"

@@ -44,0 +40,0 @@ },

lib-commonjs/hooks/useControllableValue.d.ts
lib-commonjs/hooks/useControllableValue.js
lib-commonjs/hooks/useControllableValue.js.map
lib/hooks/useControllableValue.d.ts
lib/hooks/useControllableValue.js
lib/hooks/useControllableValue.js.map
lib-commonjs/compose/getSlots.js.map

Sorry, the diff of this file is not supported yet

lib-commonjs/hooks/index.js.map

Sorry, the diff of this file is not supported yet

lib-commonjs/hooks/useControllableState.js.map

Sorry, the diff of this file is not supported yet

lib-commonjs/hooks/useOnClickOutside.js.map

Sorry, the diff of this file is not supported yet

lib-commonjs/utils/properties.js.map

Sorry, the diff of this file is not supported yet

lib/compose/getSlots.js.map

Sorry, the diff of this file is not supported yet

lib/hooks/index.js.map

Sorry, the diff of this file is not supported yet

lib/hooks/useControllableState.js.map

Sorry, the diff of this file is not supported yet

lib/hooks/useOnClickOutside.js.map

Sorry, the diff of this file is not supported yet

lib/utils/properties.js.map

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc