@fluentui/react-utilities - npm Package Compare versions

Comparing version 0.0.0-nightly906d31cfa320211115.1 to 0.0.0-nightly940a86cbd620220117.1

CHANGELOG.json

@@ -5,5 +5,5 @@ {
     {
-      "date": "Mon, 15 Nov 2021 04:16:29 GMT",
-      "tag": "@fluentui/react-utilities_v0.0.0-nightly906d31cfa320211115.1",
-      "version": "0.0.0-nightly906d31cfa320211115.1",
+      "date": "Mon, 17 Jan 2022 04:14:09 GMT",
+      "tag": "@fluentui/react-utilities_v0.0.0-nightly940a86cbd620220117.1",
+      "version": "0.0.0-nightly940a86cbd620220117.1",
       "comments": {
@@ -14,11 +14,43 @@ "prerelease": [
             "package": "@fluentui/react-utilities",
-            "commit": "05edacbae8d85aa6b3d4164f9cd7d1465b47f246",
+            "commit": "07adbf7fccd0e09945e35e8c537e3595d8170375",
             "comment": "Release nightly v9"
           },
           {
+            "author": "[e-mail]",
+            "package": "@fluentui/react-utilities",
+            "commit": "7cc28ed8320b00f42d91c63882f10316db2205c5",
+            "comment": "getSlots: remove slotNames param, and infer from state.components instead"
+          },
+          {
+            "author": "[e-mail]",
+            "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-nightly906d31cfa320211115.1",
-            "commit": "05edacbae8d85aa6b3d4164f9cd7d1465b47f246"
+            "comment": "Bump @fluentui/keyboard-keys to v0.0.0-nightly940a86cbd620220117.1",
+            "commit": "07adbf7fccd0e09945e35e8c537e3595d8170375"
           }
+        ],
+        "none": [
+          {
+            "author": "[e-mail]",
+            "package": "@fluentui/react-utilities",
+            "commit": "3360b45ec159250b1346c91afad7dce138e6bc20",
+            "comment": "Update API file to version generated by typescript 4.3"
+          },
+          {
+            "author": "[e-mail]",
+            "package": "@fluentui/react-utilities",
+            "commit": "6404bef16cebf1f67b9b80a9f6d5f605f9873df1",
+            "comment": "Update getSlots() docs."
+          },
+          {
+            "author": "[e-mail]",
+            "package": "@fluentui/react-utilities",
+            "commit": "a4e048a0e03ddd676670da516e3a6612b26ea500",
+            "comment": "chore: Remove enzyme from react-utilities tests"
+          }
         ]
@@ -28,2 +60,25 @@ }
     {
+      "date": "Thu, 25 Nov 2021 08:34:09 GMT",
+      "tag": "@fluentui/react-utilities_v9.0.0-beta.4",
+      "version": "9.0.0-beta.4",
+      "comments": {
+        "none": [
+          {
+            "author": "[e-mail]",
+            "package": "@fluentui/react-utilities",
+            "commit": "718e63006d8d07d24efab9c32942041963d78dc7",
+            "comment": "Migrate package to use solution style ts-configs"
+          }
+        ],
+        "prerelease": [
+          {
+            "author": "[e-mail]",
+            "package": "@fluentui/react-utilities",
+            "commit": "99adff5a9aab9086e8bc4737040654ab23f0febe",
+            "comment": "Update utility types to support specifying a primary slot other than root"
+          }
+        ]
+      }
+    },
+    {
       "date": "Fri, 12 Nov 2021 13:25:10 GMT",
@@ -30,0 +85,0 @@ "tag": "@fluentui/react-utilities_v9.0.0-beta.3",

CHANGELOG.md

 # Change Log - @fluentui/react-utilities
 
-This log was last generated on Mon, 15 Nov 2021 04:16:29 GMT and should not be manually modified.
+This log was last generated on Mon, 17 Jan 2022 04:14:09 GMT and should not be manually modified.
 
 <!-- Start content -->
 
-## [0.0.0-nightly906d31cfa320211115.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-utilities_v0.0.0-nightly906d31cfa320211115.1)
+## [0.0.0-nightly940a86cbd620220117.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-utilities_v0.0.0-nightly940a86cbd620220117.1)
 
-Mon, 15 Nov 2021 04:16:29 GMT 
-[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-utilities_v9.0.0-beta.3..@fluentui/react-utilities_v0.0.0-nightly906d31cfa320211115.1)
+Mon, 17 Jan 2022 04:14:09 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-utilities_v9.0.0-beta.4..@fluentui/react-utilities_v0.0.0-nightly940a86cbd620220117.1)
 
 ### Changes
 
-- Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/05edacbae8d85aa6b3d4164f9cd7d1465b47f246) by email not defined)
-- Bump @fluentui/keyboard-keys to v0.0.0-nightly906d31cfa320211115.1 ([commit](https://github.com/microsoft/fluentui/commit/05edacbae8d85aa6b3d4164f9cd7d1465b47f246) by beachball)
+- Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/07adbf7fccd0e09945e35e8c537e3595d8170375) by email not defined)
+- getSlots: remove slotNames param, and infer from state.components instead ([PR #21134](https://github.com/microsoft/fluentui/pull/21134) by [e-mail])
+- [breaking] Remove useControllableValue hook (use useControllableState instead) ([PR #20865](https://github.com/microsoft/fluentui/pull/20865) by [e-mail])
+- Bump @fluentui/keyboard-keys to v0.0.0-nightly940a86cbd620220117.1 ([commit](https://github.com/microsoft/fluentui/commit/07adbf7fccd0e09945e35e8c537e3595d8170375) by beachball)
 
+## [9.0.0-beta.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-utilities_v9.0.0-beta.4)
+
+Thu, 25 Nov 2021 08:34:09 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-utilities_v9.0.0-beta.3..@fluentui/react-utilities_v9.0.0-beta.4)
+
+### Changes
+
+- Update utility types to support specifying a primary slot other than root ([PR #20617](https://github.com/microsoft/fluentui/pull/20617) by [e-mail])
+
 ## [9.0.0-beta.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-utilities_v9.0.0-beta.3)
@@ -18,0 +29,0 @@

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;
-
 /**
@@ -80,6 +78,6 @@ * Clamps `value` to a number between the min and max.
     [Key in keyof Shorthands]?: ShorthandProps<NonNullable<Shorthands[Key]>>;
-}, Primary> & PropsWithoutRef<Shorthands[Primary]>;
+}, Primary & 'root'> & PropsWithoutRef<Shorthands[Primary]>;
 
 export declare type ComponentState<Shorthands extends ObjectShorthandPropsRecord> = {
-    components?: {
+    components: {
         [Key in keyof Shorthands]-?: React_2.ComponentType<NonNullable<Shorthands[Key]> extends ObjectShorthandProps<infer P> ? P : NonNullable<Shorthands[Key]>> | (NonNullable<Shorthands[Key]> extends AsIntrinsicElement<infer As> ? As : keyof JSX.IntrinsicElements);
@@ -95,4 +93,3 @@ };
  */
-export declare type DefaultObjectShorthandProps = ObjectShorthandProps<{
-    children?: React_2.ReactNode;
+export declare type DefaultObjectShorthandProps = ObjectShorthandProps<Pick<React_2.HTMLAttributes<HTMLElement>, 'children' | 'className' | 'style'> & {
     as?: keyof JSX.IntrinsicElements;
@@ -109,7 +106,2 @@ }>;
 /**
- * Default value can be a value or an initializer
- */
-declare type DefaultValue<TValue> = TValue | (() => TValue);
-
-/**
  * An array of DIV tag properties and events.
@@ -159,2 +151,25 @@ *
 /**
+ * Splits the native props into ones that go to the `root` slot, and ones that go to the primary slot.
+ *
+ * This function is only for use with components that have a primary slot other than `root`.
+ * Most components should use {@link getNativeElementProps} for their root slot if it is the primary slot.
+ *
+ * @returns An object containing the native props for the `root` and primary slots.
+ */
+export declare const getPartitionedNativeProps: ({ primarySlotTagName, props, excludedPropNames, }: {
+    /** The primary slot's element type (e.g. 'div') */
+    primarySlotTagName: keyof JSX.IntrinsicElements;
+    /** The component's props object */
+    props: Pick<React_2.HTMLAttributes<HTMLElement>, 'style' | 'className'>;
+    /** List of native props to exclude from the returned value */
+    excludedPropNames?: string[] | undefined;
+}) => {
+    root: {
+        style: React_2.CSSProperties | undefined;
+        className: string | undefined;
+    };
+    primary: React_2.HTMLAttributes<any>;
+};
+
+/**
  * Finds and swaps a provided key for it's right to left format.
@@ -173,10 +188,11 @@ */
  * 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.
  *
  * @param state - State including slot definitions
- * @param slotNames - Name of which props are slots
  * @returns An object containing the `slots` map and `slotProps` map.
  */
-export declare function getSlots<R extends ObjectShorthandPropsRecord>(state: ComponentState<R>, slotNames?: (keyof R)[]): {
+export declare function getSlots<R extends ObjectShorthandPropsRecord>(state: ComponentState<R>): {
     slots: Slots<R>;
@@ -323,3 +339,3 @@ slotProps: SlotProps<R>;
  */
-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>>;
 
@@ -482,5 +498,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
  */
@@ -491,11 +516,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.
      */
@@ -506,17 +532,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
@@ -523,0 +534,0 @@ *

lib-commonjs/compose/getSlots.d.ts

@@ -18,10 +18,11 @@ 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.
  *
  * @param state - State including slot definitions
- * @param slotNames - Name of which props are slots
  * @returns An object containing the `slots` map and `slotProps` map.
  */
-export declare function getSlots<R extends ObjectShorthandPropsRecord>(state: ComponentState<R>, slotNames?: (keyof R)[]): {
+export declare function getSlots<R extends ObjectShorthandPropsRecord>(state: ComponentState<R>): {
     slots: Slots<R>;
@@ -28,0 +29,0 @@ slotProps: SlotProps<R>;

lib-commonjs/compose/getSlots.js

@@ -22,7 +22,8 @@ "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.
  *
  * @param state - State including slot definitions
- * @param slotNames - Name of which props are slots
  * @returns An object containing the `slots` map and `slotProps` map.
@@ -32,5 +33,6 @@ */
 
-function getSlots(state, slotNames = ['root']) {
+function getSlots(state) {
   const slots = {};
   const slotProps = {};
+  const slotNames = Object.keys(state.components);
 
@@ -37,0 +39,0 @@ for (const slotName of slotNames) {

lib-commonjs/compose/types.d.ts

@@ -11,4 +11,3 @@ import * as React from 'react';
  */
-export declare type DefaultObjectShorthandProps = ObjectShorthandProps<{
-    children?: React.ReactNode;
+export declare type DefaultObjectShorthandProps = ObjectShorthandProps<Pick<React.HTMLAttributes<HTMLElement>, 'children' | 'className' | 'style'> & {
     as?: keyof JSX.IntrinsicElements;
@@ -82,5 +81,5 @@ }>;
     [Key in keyof Shorthands]?: ShorthandProps<NonNullable<Shorthands[Key]>>;
-}, Primary> & PropsWithoutRef<Shorthands[Primary]>;
+}, Primary & 'root'> & PropsWithoutRef<Shorthands[Primary]>;
 export declare type ComponentState<Shorthands extends ObjectShorthandPropsRecord> = {
-    components?: {
+    components: {
         [Key in keyof Shorthands]-?: React.ComponentType<NonNullable<Shorthands[Key]> extends ObjectShorthandProps<infer P> ? P : NonNullable<Shorthands[Key]>> | (NonNullable<Shorthands[Key]> extends AsIntrinsicElement<infer As> ? As : keyof JSX.IntrinsicElements);
@@ -87,0 +86,0 @@ };

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';

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 @@

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>>];

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;

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;

lib-commonjs/utils/getNativeElementProps.d.ts

@@ -10,1 +10,23 @@ import * as React from 'react';
 export declare function getNativeElementProps<TAttributes extends React.HTMLAttributes<any>>(tagName: string, props: {}, excludedPropNames?: string[]): TAttributes;
+/**
+ * Splits the native props into ones that go to the `root` slot, and ones that go to the primary slot.
+ *
+ * This function is only for use with components that have a primary slot other than `root`.
+ * Most components should use {@link getNativeElementProps} for their root slot if it is the primary slot.
+ *
+ * @returns An object containing the native props for the `root` and primary slots.
+ */
+export declare const getPartitionedNativeProps: ({ primarySlotTagName, props, excludedPropNames, }: {
+    /** The primary slot's element type (e.g. 'div') */
+    primarySlotTagName: keyof JSX.IntrinsicElements;
+    /** The component's props object */
+    props: Pick<React.HTMLAttributes<HTMLElement>, 'style' | 'className'>;
+    /** List of native props to exclude from the returned value */
+    excludedPropNames?: string[] | undefined;
+}) => {
+    root: {
+        style: React.CSSProperties | undefined;
+        className: string | undefined;
+    };
+    primary: React.HTMLAttributes<any>;
+};

lib-commonjs/utils/getNativeElementProps.js

@@ -6,3 +6,3 @@ "use strict";
 });
-exports.getNativeElementProps = void 0;
+exports.getPartitionedNativeProps = exports.getNativeElementProps = void 0;
 
@@ -49,2 +49,26 @@ const properties_1 = /*#__PURE__*/require("./properties");
 exports.getNativeElementProps = getNativeElementProps;
+/**
+ * Splits the native props into ones that go to the `root` slot, and ones that go to the primary slot.
+ *
+ * This function is only for use with components that have a primary slot other than `root`.
+ * Most components should use {@link getNativeElementProps} for their root slot if it is the primary slot.
+ *
+ * @returns An object containing the native props for the `root` and primary slots.
+ */
+
+const getPartitionedNativeProps = ({
+  primarySlotTagName,
+  props,
+  excludedPropNames
+}) => {
+  return {
+    root: {
+      style: props.style,
+      className: props.className
+    },
+    primary: getNativeElementProps(primarySlotTagName, props, [...(excludedPropNames || []), 'style', 'className'])
+  };
+};
+
+exports.getPartitionedNativeProps = getPartitionedNativeProps;
 //# sourceMappingURL=getNativeElementProps.js.map

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>>;

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.

lib/compose/getSlots.d.ts

@@ -18,10 +18,11 @@ 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.
  *
  * @param state - State including slot definitions
- * @param slotNames - Name of which props are slots
  * @returns An object containing the `slots` map and `slotProps` map.
  */
-export declare function getSlots<R extends ObjectShorthandPropsRecord>(state: ComponentState<R>, slotNames?: (keyof R)[]): {
+export declare function getSlots<R extends ObjectShorthandPropsRecord>(state: ComponentState<R>): {
     slots: Slots<R>;
@@ -28,0 +29,0 @@ slotProps: SlotProps<R>;

lib/compose/getSlots.js

@@ -13,13 +13,15 @@ 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.
  *
  * @param state - State including slot definitions
- * @param slotNames - Name of which props are slots
  * @returns An object containing the `slots` map and `slotProps` map.
  */
 
-export function getSlots(state, slotNames = ['root']) {
+export function getSlots(state) {
   const slots = {};
   const slotProps = {};
+  const slotNames = Object.keys(state.components);
 
@@ -26,0 +28,0 @@ for (const slotName of slotNames) {

lib/compose/types.d.ts

@@ -11,4 +11,3 @@ import * as React from 'react';
  */
-export declare type DefaultObjectShorthandProps = ObjectShorthandProps<{
-    children?: React.ReactNode;
+export declare type DefaultObjectShorthandProps = ObjectShorthandProps<Pick<React.HTMLAttributes<HTMLElement>, 'children' | 'className' | 'style'> & {
     as?: keyof JSX.IntrinsicElements;
@@ -82,5 +81,5 @@ }>;
     [Key in keyof Shorthands]?: ShorthandProps<NonNullable<Shorthands[Key]>>;
-}, Primary> & PropsWithoutRef<Shorthands[Primary]>;
+}, Primary & 'root'> & PropsWithoutRef<Shorthands[Primary]>;
 export declare type ComponentState<Shorthands extends ObjectShorthandPropsRecord> = {
-    components?: {
+    components: {
         [Key in keyof Shorthands]-?: React.ComponentType<NonNullable<Shorthands[Key]> extends ObjectShorthandProps<infer P> ? P : NonNullable<Shorthands[Key]>> | (NonNullable<Shorthands[Key]> extends AsIntrinsicElement<infer As> ? As : keyof JSX.IntrinsicElements);
@@ -87,0 +86,0 @@ };

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';

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';

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>>];

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;

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;

lib/utils/getNativeElementProps.d.ts

@@ -10,1 +10,23 @@ import * as React from 'react';
 export declare function getNativeElementProps<TAttributes extends React.HTMLAttributes<any>>(tagName: string, props: {}, excludedPropNames?: string[]): TAttributes;
+/**
+ * Splits the native props into ones that go to the `root` slot, and ones that go to the primary slot.
+ *
+ * This function is only for use with components that have a primary slot other than `root`.
+ * Most components should use {@link getNativeElementProps} for their root slot if it is the primary slot.
+ *
+ * @returns An object containing the native props for the `root` and primary slots.
+ */
+export declare const getPartitionedNativeProps: ({ primarySlotTagName, props, excludedPropNames, }: {
+    /** The primary slot's element type (e.g. 'div') */
+    primarySlotTagName: keyof JSX.IntrinsicElements;
+    /** The component's props object */
+    props: Pick<React.HTMLAttributes<HTMLElement>, 'style' | 'className'>;
+    /** List of native props to exclude from the returned value */
+    excludedPropNames?: string[] | undefined;
+}) => {
+    root: {
+        style: React.CSSProperties | undefined;
+        className: string | undefined;
+    };
+    primary: React.HTMLAttributes<any>;
+};

lib/utils/getNativeElementProps.js

@@ -38,2 +38,24 @@ import { labelProperties, audioProperties, videoProperties, olProperties, liProperties, anchorProperties, buttonProperties, inputProperties, textAreaProperties, selectProperties, optionProperties, tableProperties, trProperties, thProperties, tdProperties, colGroupProperties, colProperties, formProperties, iframeProperties, imgProperties, htmlElementProperties, getNativeProps } from './properties';
 }
+/**
+ * Splits the native props into ones that go to the `root` slot, and ones that go to the primary slot.
+ *
+ * This function is only for use with components that have a primary slot other than `root`.
+ * Most components should use {@link getNativeElementProps} for their root slot if it is the primary slot.
+ *
+ * @returns An object containing the native props for the `root` and primary slots.
+ */
+
+export const getPartitionedNativeProps = ({
+  primarySlotTagName,
+  props,
+  excludedPropNames
+}) => {
+  return {
+    root: {
+      style: props.style,
+      className: props.className
+    },
+    primary: getNativeElementProps(primarySlotTagName, props, [...(excludedPropNames || []), 'style', 'className'])
+  };
+};
 //# sourceMappingURL=getNativeElementProps.js.map

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>>;

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.

package.json

 {
   "name": "@fluentui/react-utilities",
-  "version": "0.0.0-nightly906d31cfa320211115.1",
+  "version": "0.0.0-nightly940a86cbd620220117.1",
   "description": "A set of general React-specific utilities.",
@@ -23,5 +23,5 @@ "main": "lib-commonjs/index.js",
     "docs": "api-extractor run --config=config/api-extractor.local.json --local",
-    "build:local": "tsc -p . --module esnext --emitDeclarationOnly && node ../../scripts/typescript/normalize-import --output dist/react-utilities/src && yarn docs",
-    "storybook": "start-storybook",
-    "start": "yarn storybook"
+    "build:local": "tsc -p ./tsconfig.lib.json --module esnext --emitDeclarationOnly && node ../../scripts/typescript/normalize-import --output ./dist/packages/react-utilities/src && yarn docs",
+    "start": "yarn storybook",
+    "type-check": "tsc -b tsconfig.json"
   },
@@ -31,8 +31,4 @@ "devDependencies": {
     "@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",
@@ -42,3 +38,3 @@ "react-test-renderer": "^16.3.0"
   "dependencies": {
-    "@fluentui/keyboard-keys": "0.0.0-nightly906d31cfa320211115.1",
+    "@fluentui/keyboard-keys": "0.0.0-nightly940a86cbd620220117.1",
     "tslib": "^2.1.0"
@@ -45,0 +41,0 @@ },

No alert changes

Improved metrics

Dev dependency count

6

decreased by-40%

Lines of code

5681

increased by1.37%

Number of low supply chain risk alerts

4

decreased by-33.33%

Worsened metrics

Total package byte prevSize

325806

decreased by-0.5%

Number of package files

211

decreased by-2.76%

Dependency changes

• + Added@fluentui/keyboard-keys@0.0.0-nightly940a86cbd620220117.1(transitive)

• - Removed@fluentui/keyboard-keys@0.0.0-nightly906d31cfa320211115.1(transitive)

• Updated@fluentui/keyboard-keys@0.0.0-nightly940a86cbd620220117.1