@fluentui/react-utilities - npm Package Compare versions

Comparing version 0.0.0-nightly-20240822-0407.1 to 0.0.0-nightly-20240822-1237.1

dist/index.d.ts

@@ -12,3 +12,3 @@ import { DispatchWithoutAction } from 'react';
  */
-declare function always<Props extends UnknownSlotProps>(value: Props | SlotShorthandValue | undefined, options: SlotOptions<Props>): SlotComponentType<Props>;
+declare function always<Props extends SlotPropsDataType>(value: Props | SlotShorthandValue | undefined, options: SlotOptions<Props>): SlotComponentType<Props>;
 
@@ -70,2 +70,10 @@ /**
 /**
+ * @internal
+ * **THIS TYPE IS INTERNAL AND SHOULD NEVER BE EXPOSED**
+ */
+declare interface ComponentClass<P = {}, S = React_2.ComponentState> extends React_2.StaticLifecycle<P, S> {
+    new (props: P): React_2.Component<P, S>;
+}
+
+/**
  * Defines the Props type for a component given its slots and the definition of which one is the primary slot,
@@ -80,7 +88,13 @@ * defaulting to root if one is not provided.
 export declare type ComponentState<Slots extends SlotPropsRecord> = {
+    /**
+     * @deprecated
+     * The base element type for each slot.
+     * This property is deprecated and will be removed in a future version.
+     * The slot base element type is declared through `slot.*(slotShorthand, {elementType: ElementType})` instead.
+     */
     components: {
-        [Key in keyof Slots]-?: React_2.ComponentType<ExtractSlotProps<Slots[Key]>> | (ExtractSlotProps<Slots[Key]> extends AsIntrinsicElement<infer As> ? As : keyof JSX.IntrinsicElements);
+        [Key in keyof Slots]-?: React_2.ElementType;
     };
 } & {
-    [Key in keyof Slots]: ReplaceNullWithUndefined<Exclude<Slots[Key], SlotShorthandValue | (Key extends 'root' ? null : never)>>;
+    [Key in keyof Slots]: ReplaceNullWithUndefined<WithoutSlotRenderFunction<Exclude<Slots[Key], SlotShorthandValue | (Key extends 'root' ? null : never)>>>;
 };
@@ -90,2 +104,12 @@
  * @internal
+ * With react 18, our `children` type starts leaking everywhere and that causes conflicts on component declaration, specially in the `propTypes` property of
+ * both `ComponentClass` and `FunctionComponent`.
+ *
+ * This type substitutes `React.ComponentType` only keeping the function signature, it omits `propTypes`, `displayName` and other properties that are not
+ * required for the inference.
+ */
+declare type ComponentType<P = {}> = ComponentClass<P> | FunctionComponent<P>;
+
+/**
+ * @internal
  * @param compare - comparison function for items
@@ -152,2 +176,7 @@ * @returns Priority queue implemented with a min heap
 
+declare interface ExoticComponent<P> {
+    (props: P): any;
+    $$typeof: symbol;
+}
+
 /**
@@ -178,6 +207,29 @@ * Removes SlotShorthandValue and null from the slot type, extracting just the slot's Props object.
  * Return type for `React.forwardRef`, including inference of the proper typing for the ref.
+ *
+ * Note: {@link React.RefAttributes} is {@link https://github.com/DefinitelyTyped/DefinitelyTyped/discussions/69756 | leaking string references} into forwardRef components, forwardRef component do not support string refs.
  */
-export declare type ForwardRefComponent<Props> = React_2.ForwardRefExoticComponent<Props & React_2.RefAttributes<InferredElementRefType<Props>>>;
+export declare type ForwardRefComponent<Props> = NamedExoticComponent<Props & RefAttributes<InferredElementRefType<Props>>>;
 
 /**
+ * @internal
+ *
+ * On types/react 18 there are two types being delivered,
+ * they rely on the typescript version to decide which will be consumed {@link https://github.com/DefinitelyTyped/DefinitelyTyped/blob/b59dc3ac1e2770fbd6cdbb90ba52abe04c168196/types/react/package.json#L10}
+ *
+ * If TS is higher than 5.0 then the `FunctionComponent` will be returning ReactNode (which we don't support)
+ * If TS is below or equal to 5.0 then the `FunctionComponent` will be returning ReactElement | null (which we support)
+ *
+ * Since it's not possible to have a single type that works for both cases
+ * (as ReactNode is more specific, and this will break while evaluating functions),
+ * we need to create our own `FunctionComponent` type
+ * that will work for both cases.
+ *
+ * **THIS TYPE IS INTERNAL AND SHOULD NEVER BE EXPOSED**
+ */
+declare interface FunctionComponent<P> {
+    (props: P): any;
+    displayName?: string;
+}
+
+/**
  * Returns an object with clientX, clientY for TouchOrMouseEvent.
@@ -197,3 +249,3 @@ * Returns zeros in case the event is not a mouse or a touch event.
  */
-export declare const getIntrinsicElementProps: <Props extends UnknownSlotProps, ExcludedPropKeys extends Extract<keyof Props, string> = never>(tagName: NonNullable<Props["as"]>, props: Props & React_2.RefAttributes<InferredElementRefType<Props>>, excludedPropNames?: ExcludedPropKeys[] | undefined) => DistributiveOmit<Props, ExcludedPropKeys | Exclude<keyof Props, "as" | keyof HTMLAttributes>>;
+export declare const getIntrinsicElementProps: <Props extends SlotPropsDataType, ExcludedPropKeys extends Extract<keyof Props, string> = never>(tagName: NonNullable<Props["as"]>, props: Props & React_2.RefAttributes<InferredElementRefType<Props>>, excludedPropNames?: ExcludedPropKeys[] | undefined) => DistributiveOmit<Props, ExcludedPropKeys | Exclude<keyof Props, "children" | "slot" | "style" | "title" | "as" | "className" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture">>;
 
@@ -274,3 +326,3 @@ /**
  */
-export declare function getSlots<R extends SlotPropsRecord>(state: ComponentState<R>): {
+export declare function getSlots<R extends SlotPropsRecord>(state: unknown): {
     slots: Slots<R>;
@@ -290,3 +342,3 @@ slotProps: ObjectSlotProps<R>;
  */
-export declare function getSlotsNext<R extends SlotPropsRecord>(state: ComponentState<R>): {
+export declare function getSlotsNext<R extends SlotPropsRecord>(state: unknown): {
     slots: Slots<R>;
@@ -322,4 +374,2 @@ slotProps: ObjectSlotProps<R>;
 
-declare type HTMLAttributes = React_2.HTMLAttributes<any>;
-
 declare type HTMLElementConstructorName = 'HTMLElement' | 'HTMLAnchorElement' | 'HTMLAreaElement' | 'HTMLAudioElement' | 'HTMLBaseElement' | 'HTMLBodyElement' | 'HTMLBRElement' | 'HTMLButtonElement' | 'HTMLCanvasElement' | 'HTMLDataElement' | 'HTMLDataListElement' | 'HTMLDetailsElement' | 'HTMLDivElement' | 'HTMLDListElement' | 'HTMLEmbedElement' | 'HTMLFieldSetElement' | 'HTMLFormElement' | 'HTMLHeadingElement' | 'HTMLHeadElement' | 'HTMLHRElement' | 'HTMLHtmlElement' | 'HTMLIFrameElement' | 'HTMLImageElement' | 'HTMLInputElement' | 'HTMLModElement' | 'HTMLLabelElement' | 'HTMLLegendElement' | 'HTMLLIElement' | 'HTMLLinkElement' | 'HTMLMapElement' | 'HTMLMetaElement' | 'HTMLMeterElement' | 'HTMLObjectElement' | 'HTMLOListElement' | 'HTMLOptGroupElement' | 'HTMLOptionElement' | 'HTMLOutputElement' | 'HTMLParagraphElement' | 'HTMLParamElement' | 'HTMLPreElement' | 'HTMLProgressElement' | 'HTMLQuoteElement' | 'HTMLSlotElement' | 'HTMLScriptElement' | 'HTMLSelectElement' | 'HTMLSourceElement' | 'HTMLSpanElement' | 'HTMLStyleElement' | 'HTMLTableElement' | 'HTMLTableColElement' | 'HTMLTableRowElement' | 'HTMLTableSectionElement' | 'HTMLTemplateElement' | 'HTMLTextAreaElement' | 'HTMLTimeElement' | 'HTMLTitleElement' | 'HTMLTrackElement' | 'HTMLUListElement' | 'HTMLVideoElement';
@@ -415,3 +465,3 @@
  */
-export declare function isResolvedShorthand<Shorthand extends Slot<UnknownSlotProps>>(shorthand?: Shorthand): shorthand is ExtractSlotProps<Shorthand>;
+export declare function isResolvedShorthand<Shorthand extends Slot<SlotPropsDataType>>(shorthand?: Shorthand): shorthand is ExtractSlotProps<Shorthand>;
 
@@ -466,2 +516,6 @@ /**
 
+declare interface NamedExoticComponent<P> extends ExoticComponent<P> {
+    displayName?: string;
+}
+
 export declare type NativeTouchOrMouseEvent = MouseEvent | TouchEvent;
@@ -473,3 +527,3 @@
 declare type ObjectSlotProps<S extends SlotPropsRecord> = {
-    [K in keyof S]-?: ExtractSlotProps<S[K]> extends AsIntrinsicElement<infer As> ? UnionToIntersection<JSX.IntrinsicElements[As]> : ExtractSlotProps<S[K]> extends React_2.ComponentType<infer P> ? P : ExtractSlotProps<S[K]>;
+    [K in keyof S]-?: any;
 };
@@ -525,3 +579,3 @@
  */
-declare function optional<Props extends UnknownSlotProps>(value: Props | SlotShorthandValue | undefined | null, options: {
+declare function optional<Props extends SlotPropsDataType>(value: Props | SlotShorthandValue | undefined | null, options: {
     renderByDefault?: boolean;
@@ -567,4 +621,20 @@ } & SlotOptions<Props>): SlotComponentType<Props> | undefined;
 
+/**
+ * @internal
+ *
+ * on types/react 18 ReactNode becomes a more strict type, which is not compatible with our current implementation. to avoid any issues we are creating our own ReactNode type which allows anything.
+ *
+ * This type should only be used for inference purposes, and should never be exposed.
+ *
+ * **THIS TYPE IS INTERNAL AND SHOULD NEVER BE EXPOSED**
+ *
+ */
+declare type ReactNode = any;
+
 export declare type ReactTouchOrMouseEvent = React_2.MouseEvent | React_2.TouchEvent;
 
+declare interface RefAttributes<T> extends React_2.Attributes {
+    ref?: React_2.Ref<T> | undefined;
+}
+
 /**
@@ -594,5 +664,5 @@ * A Ref function which can be treated like a ref object in that it has an attached
  *
- * @deprecated use slot.always or slot.optional combined with assertSlots instead
+ * @deprecated use slot.always, slot.optional, slot.resolveShorthand combined with assertSlots instead
  */
-export declare const resolveShorthand: ResolveShorthandFunction<UnknownSlotProps>;
+export declare const resolveShorthand: ResolveShorthandFunction<SlotPropsDataType>;
 
@@ -604,3 +674,3 @@ /**
  */
-declare function resolveShorthand_2<Props extends UnknownSlotProps | null | undefined>(value: Props | SlotShorthandValue): Props;
+declare function resolveShorthand_2<Props extends SlotPropsDataType | null | undefined>(value: Props | SlotShorthandValue): Props;
 
@@ -610,5 +680,5 @@ /**
  */
-export declare type ResolveShorthandFunction<Props extends UnknownSlotProps = UnknownSlotProps> = {
-    <P extends Props>(value: P | SlotShorthandValue | undefined, options: ResolveShorthandOptions<P, true>): P;
-    <P extends Props>(value: P | SlotShorthandValue | null | undefined, options?: ResolveShorthandOptions<P, boolean>): P | undefined;
+export declare type ResolveShorthandFunction<Props extends SlotPropsDataType = SlotPropsDataType> = {
+    <P extends Props>(value: P | SlotShorthandValue | undefined, options: ResolveShorthandOptions<P, true>): WithoutSlotRenderFunction<P>;
+    <P extends Props>(value: P | SlotShorthandValue | null | undefined, options?: ResolveShorthandOptions<P, boolean>): WithoutSlotRenderFunction<P> | undefined;
 };
@@ -688,9 +758,7 @@
  */
-export declare type Slot<Type extends keyof JSX.IntrinsicElements | React_2.ComponentType | React_2.VoidFunctionComponent | UnknownSlotProps, AlternateAs extends keyof JSX.IntrinsicElements = never> = IsSingleton<Extract<Type, string>> extends true ? WithSlotShorthandValue<Type extends keyof JSX.IntrinsicElements ? {
+export declare type Slot<Type extends keyof JSX.IntrinsicElements | ComponentType<any> | SlotPropsDataType, AlternateAs extends keyof JSX.IntrinsicElements = never> = IsSingleton<Extract<Type, string>> extends true ? WithSlotShorthandValue<Type extends keyof JSX.IntrinsicElements ? {
     as?: Type;
-} & WithSlotRenderFunction<IntrinsicElementProps<Type>> : Type extends React_2.ComponentType<infer Props> ? WithSlotRenderFunction<Props> : Type> | {
-    [As in AlternateAs]: {
-        as: As;
-    } & WithSlotRenderFunction<IntrinsicElementProps<As>>;
-}[AlternateAs] | null : 'Error: First parameter to Slot must not be not a union of types. See documentation of Slot type.';
+} & WithSlotRenderFunction<IntrinsicElementProps<Type>> : Type extends ComponentType<infer Props> ? Props extends SlotPropsDataType ? Props : WithSlotRenderFunction<Props> : Type> | (AlternateAs extends unknown ? {
+    as: AlternateAs;
+} & WithSlotRenderFunction<IntrinsicElementProps<AlternateAs>> : never) | null : 'Error: First parameter to Slot must not be not a union of types. See documentation of Slot type.';
 
@@ -734,8 +802,6 @@ declare namespace slot {
  */
-export declare type SlotComponentType<Props> = Props & {
+export declare type SlotComponentType<Props> = WithoutSlotRenderFunction<Props> & FunctionComponent<{
+    children?: ReactNode;
+}> & {
     /**
-     * **NOTE**: Slot components are not callable.
-     */
-    (props: React_2.PropsWithChildren<{}>): React_2.ReactElement | null;
-    /**
      * @internal
@@ -747,11 +813,24 @@ */
      */
-    [SLOT_ELEMENT_TYPE_SYMBOL]: React_2.ComponentType<Props> | (Props extends AsIntrinsicElement<infer As> ? As : keyof JSX.IntrinsicElements);
+    [SLOT_ELEMENT_TYPE_SYMBOL]: ComponentType<Props> | (Props extends AsIntrinsicElement<infer As> ? As : keyof JSX.IntrinsicElements);
 };
 
-export declare type SlotOptions<Props extends UnknownSlotProps> = {
+export declare type SlotOptions<Props extends SlotPropsDataType> = {
     elementType: React_2.ComponentType<Props> | (Props extends AsIntrinsicElement<infer As> ? As : keyof JSX.IntrinsicElements);
-    defaultProps?: Partial<Props>;
+    defaultProps?: Partial<Props & {
+        ref?: React_2.Ref<InferredElementRefType<Props>>;
+    }>;
 };
 
 /**
+ * @internal
+ *
+ * This should ONLY be used in type templates as in `extends SlotPropsDataType`;
+ * it shouldn't be used as a component's Slot props type.
+ */
+declare type SlotPropsDataType = {
+    as?: keyof JSX.IntrinsicElements;
+    children?: ReactNode;
+};
+
+/**
  * Matches any component's Slots type (such as ButtonSlots).
@@ -762,5 +841,5 @@ *
  */
-export declare type SlotPropsRecord = Record<string, UnknownSlotProps | SlotShorthandValue | null | undefined>;
+export declare type SlotPropsRecord = Record<string, SlotPropsDataType | SlotShorthandValue | null | undefined>;
 
-export declare type SlotRenderFunction<Props> = (Component: React_2.ElementType<Props>, props: Omit<Props, 'as'>) => React_2.ReactNode;
+export declare type SlotRenderFunction<Props> = (Component: React_2.ElementType<Props>, props: Omit<Props, 'as'>) => ReactNode;
 
@@ -771,3 +850,3 @@ /**
 export declare type Slots<S extends SlotPropsRecord> = {
-    [K in keyof S]: ExtractSlotProps<S[K]> extends AsIntrinsicElement<infer As> ? As : ExtractSlotProps<S[K]> extends React_2.ComponentType<infer P> ? React_2.ElementType<NonNullable<P>> : React_2.ElementType<ExtractSlotProps<S[K]>>;
+    [K in keyof S]: React_2.ElementType<any>;
 };
@@ -778,3 +857,3 @@
  */
-export declare type SlotShorthandValue = React_2.ReactChild | React_2.ReactNode[] | React_2.ReactPortal;
+export declare type SlotShorthandValue = React_2.ReactElement | string | number | Iterable<ReactNode> | React_2.ReactPortal;
 
@@ -809,2 +888,3 @@ /**
 /**
+ * @deprecated - SlotPropsDataType instead
  * Matches any slot props type.
@@ -1015,6 +1095,14 @@ *
 /**
+ * @internal
+ */
+declare type WithoutSlotRenderFunction<Props> = Props extends unknown ? 'children' extends keyof Props ? Omit<Props, 'children'> & {
+    children?: Exclude<Props['children'], Function>;
+} : Props : never;
+
+/**
+ * @internal
  * Helper type for {@link Slot}. Takes the props we want to support for a slot and adds the ability for `children`
  * to be a render function that takes those props.
  */
-declare type WithSlotRenderFunction<Props> = Props & {
+declare type WithSlotRenderFunction<Props> = Omit<Props, 'children'> & {
     children?: ('children' extends keyof Props ? Props['children'] : never) | SlotRenderFunction<Props>;
@@ -1021,0 +1109,0 @@ };

lib-commonjs/compose/assertSlots.js

@@ -22,2 +22,3 @@ "use strict";
         const typedState = state;
+        // eslint-disable-next-line deprecation/deprecation
         for (const slotName of Object.keys(typedState.components)){
@@ -33,2 +34,3 @@ const slotElement = typedState[slotName];
                 typedState[slotName] = _slot.always(slotElement, {
+                    // eslint-disable-next-line deprecation/deprecation
                     elementType: typedState.components[slotName]
@@ -44,3 +46,5 @@ });
                 const { [_constants.SLOT_ELEMENT_TYPE_SYMBOL]: elementType } = slotElement;
+                // eslint-disable-next-line deprecation/deprecation
                 if (elementType !== typedState.components[slotName]) {
+                    // eslint-disable-next-line deprecation/deprecation
                     slotElement[_constants.SLOT_ELEMENT_TYPE_SYMBOL] = typedState.components[slotName];
@@ -47,0 +51,0 @@ // eslint-disable-next-line no-console

lib-commonjs/compose/deprecated/getSlots.js

@@ -17,8 +17,10 @@ "use strict";
 function getSlots(state) {
+    const typeState = state;
     // eslint-disable-next-line deprecation/deprecation
     const slots = {};
     const slotProps = {};
-    const slotNames = Object.keys(state.components);
+    // eslint-disable-next-line deprecation/deprecation
+    const slotNames = Object.keys(typeState.components);
     for (const slotName of slotNames){
-        const [slot, props] = getSlot(state, slotName);
+        const [slot, props] = getSlot(typeState, slotName);
         // eslint-disable-next-line deprecation/deprecation
@@ -46,3 +48,5 @@ slots[slotName] = slot;
     const renderFunction = (0, _isSlot.isSlot)(props) ? props[_constants.SLOT_RENDER_FUNCTION_SYMBOL] : undefined;
-    const slot = ((_state_components = state.components) === null || _state_components === void 0 ? void 0 : _state_components[slotName]) === undefined || typeof state.components[slotName] === 'string' ? asProp || ((_state_components1 = state.components) === null || _state_components1 === void 0 ? void 0 : _state_components1[slotName]) || 'div' : state.components[slotName];
+    const slot = ((_state_components = state.components) === null || _state_components === void 0 ? void 0 : _state_components[slotName]) === undefined || // eslint-disable-line deprecation/deprecation
+    // eslint-disable-next-line deprecation/deprecation
+    typeof state.components[slotName] === 'string' ? asProp || ((_state_components1 = state.components) === null || _state_components1 === void 0 ? void 0 : _state_components1[slotName]) || 'div' : state.components[slotName];
     if (renderFunction || typeof children === 'function') {
@@ -58,2 +62,3 @@ const render = renderFunction || children;
     const shouldOmitAsProp = typeof slot === 'string' && asProp;
+    // eslint-disable-next-line deprecation/deprecation
     const slotProps = shouldOmitAsProp ? (0, _omit.omit)(props, [
@@ -60,0 +65,0 @@ 'as'

lib-commonjs/compose/deprecated/getSlotsNext.js

@@ -14,9 +14,11 @@ "use strict";
 function getSlotsNext(state) {
+    const typedState = state;
     // eslint-disable-next-line deprecation/deprecation
     const slots = {};
     const slotProps = {};
-    const slotNames = Object.keys(state.components);
+    // eslint-disable-next-line deprecation/deprecation
+    const slotNames = Object.keys(typedState.components);
     for (const slotName of slotNames){
         // eslint-disable-next-line deprecation/deprecation
-        const [slot, props] = getSlotNext(state, slotName);
+        const [slot, props] = getSlotNext(typedState, slotName);
         // eslint-disable-next-line deprecation/deprecation
@@ -45,4 +47,7 @@ slots[slotName] = slot;
     const { as: asProp, ...propsWithoutAs } = props;
-    const slot = ((_state_components = state.components) === null || _state_components === void 0 ? void 0 : _state_components[slotName]) === undefined || typeof state.components[slotName] === 'string' ? asProp || ((_state_components1 = state.components) === null || _state_components1 === void 0 ? void 0 : _state_components1[slotName]) || 'div' : state.components[slotName];
+    const slot = ((_state_components = state.components) === null || _state_components === void 0 ? void 0 : _state_components[slotName]) === undefined || // eslint-disable-line deprecation/deprecation
+    // eslint-disable-next-line deprecation/deprecation
+    typeof state.components[slotName] === 'string' ? asProp || ((_state_components1 = state.components) === null || _state_components1 === void 0 ? void 0 : _state_components1[slotName]) || 'div' : state.components[slotName];
     const shouldOmitAsProp = typeof slot === 'string' && asProp;
+    // eslint-disable-next-line deprecation/deprecation
     const slotProps = shouldOmitAsProp ? propsWithoutAs : props;
@@ -49,0 +54,0 @@ return [

lib-commonjs/compose/slot.js

@@ -51,3 +51,3 @@ "use strict";
 function resolveShorthand(value) {
-    if (typeof value === 'string' || typeof value === 'number' || Array.isArray(value) || // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    if (typeof value === 'string' || typeof value === 'number' || isIterable(value) || // eslint-disable-next-line @typescript-eslint/no-explicit-any
     /*#__PURE__*/ _react.isValidElement(value)) {
@@ -68,1 +68,3 @@ return {
 }
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const isIterable = (value)=>typeof value === 'object' && value !== null && Symbol.iterator in value;

lib-commonjs/hooks/useMergedRefs.js

@@ -19,2 +19,10 @@ "use strict";
         for (const ref of refs){
+            if (typeof ref === 'string' && process.env.NODE_ENV !== 'production') {
+                // eslint-disable-next-line no-console
+                console.error(`@fluentui/react-utilities [useMergedRefs]:
+This hook does not support the usage of string refs. Please use React.useRef instead.
+
+For more info on 'React.useRef', see https://react.dev/reference/react/useRef.
+For more info on string refs, see https://react.dev/blog/2024/04/25/react-19-upgrade-guide#removed-string-refs.`);
+            }
             if (typeof ref === 'function') {
@@ -21,0 +29,0 @@ ref(value);

lib-commonjs/utils/types.js

@@ -1,27 +0,6 @@
-/**
- * Helper type that works similar to Omit,
- * but when modifying an union type it will distribute the omission to all the union members.
- *
- * See [distributive conditional types](https://www.typescriptlang.org/docs/handbook/2/conditional-types.html#distributive-conditional-types) for more information
- */ // Traditional Omit is basically equivalent to => Pick<T, Exclude<keyof T, K>>
-//
-// let's say we have Omit<{ a: string } | { b: string }, 'a'>
-// equivalent to: Pick<{ a: string } | { b: string }, Exclude<keyof ({ a: string } | { b: string }), 'a'>>
-// The expected result would be {} | { b: string }, the omission of 'a' from all the union members,
-// but keyof ({ a: string } | { b: string }) is never as they don't share common keys
-// so  Exclude<never, 'a'> is never,
-// and Pick<{ a: string } | { b: string }, never> is {}.
-//
-// With DistributiveOmit on the other hand it becomes like this:
-// DistributiveOmit<{ a: string } | { b: string }, 'a'>
-// equivalent to: Omit<{ a: string }, 'a'> | Omit<{ b: string }, 'a'>
-// Since every single Omit clause in this case is being applied to a single union member there's no conflicts on keyof evaluation and in the second clause Omit<{ b: string }, 'a'> becomes { b: string },
-// so the result is {} | { b: string }, as expected.
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-/**
- * @internal
- * If type T includes `null`, remove it and add `undefined` instead.
- */ "use strict";
+"use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));

lib/compose/assertSlots.js

@@ -29,2 +29,3 @@ import * as React from 'react';
         const typedState = state;
+        // eslint-disable-next-line deprecation/deprecation
         for (const slotName of Object.keys(typedState.components)){
@@ -40,2 +41,3 @@ const slotElement = typedState[slotName];
                 typedState[slotName] = slot.always(slotElement, {
+                    // eslint-disable-next-line deprecation/deprecation
                     elementType: typedState.components[slotName]
@@ -51,3 +53,5 @@ });
                 const { [SLOT_ELEMENT_TYPE_SYMBOL]: elementType } = slotElement;
+                // eslint-disable-next-line deprecation/deprecation
                 if (elementType !== typedState.components[slotName]) {
+                    // eslint-disable-next-line deprecation/deprecation
                     slotElement[SLOT_ELEMENT_TYPE_SYMBOL] = typedState.components[slotName];
@@ -54,0 +58,0 @@ // eslint-disable-next-line no-console

lib/compose/deprecated/getSlots.js

@@ -24,8 +24,10 @@ import * as React from 'react';
  */ export function getSlots(state) {
+    const typeState = state;
     // eslint-disable-next-line deprecation/deprecation
     const slots = {};
     const slotProps = {};
-    const slotNames = Object.keys(state.components);
+    // eslint-disable-next-line deprecation/deprecation
+    const slotNames = Object.keys(typeState.components);
     for (const slotName of slotNames){
-        const [slot, props] = getSlot(state, slotName);
+        const [slot, props] = getSlot(typeState, slotName);
         // eslint-disable-next-line deprecation/deprecation
@@ -53,3 +55,5 @@ slots[slotName] = slot;
     const renderFunction = isSlot(props) ? props[SLOT_RENDER_FUNCTION_SYMBOL] : undefined;
-    const slot = ((_state_components = state.components) === null || _state_components === void 0 ? void 0 : _state_components[slotName]) === undefined || typeof state.components[slotName] === 'string' ? asProp || ((_state_components1 = state.components) === null || _state_components1 === void 0 ? void 0 : _state_components1[slotName]) || 'div' : state.components[slotName];
+    const slot = ((_state_components = state.components) === null || _state_components === void 0 ? void 0 : _state_components[slotName]) === undefined || // eslint-disable-line deprecation/deprecation
+    // eslint-disable-next-line deprecation/deprecation
+    typeof state.components[slotName] === 'string' ? asProp || ((_state_components1 = state.components) === null || _state_components1 === void 0 ? void 0 : _state_components1[slotName]) || 'div' : state.components[slotName];
     if (renderFunction || typeof children === 'function') {
@@ -65,2 +69,3 @@ const render = renderFunction || children;
     const shouldOmitAsProp = typeof slot === 'string' && asProp;
+    // eslint-disable-next-line deprecation/deprecation
     const slotProps = shouldOmitAsProp ? omit(props, [
@@ -67,0 +72,0 @@ 'as'

lib/compose/deprecated/getSlotsNext.js

@@ -12,9 +12,11 @@ import * as React from 'react';
  */ export function getSlotsNext(state) {
+    const typedState = state;
     // eslint-disable-next-line deprecation/deprecation
     const slots = {};
     const slotProps = {};
-    const slotNames = Object.keys(state.components);
+    // eslint-disable-next-line deprecation/deprecation
+    const slotNames = Object.keys(typedState.components);
     for (const slotName of slotNames){
         // eslint-disable-next-line deprecation/deprecation
-        const [slot, props] = getSlotNext(state, slotName);
+        const [slot, props] = getSlotNext(typedState, slotName);
         // eslint-disable-next-line deprecation/deprecation
@@ -43,4 +45,7 @@ slots[slotName] = slot;
     const { as: asProp, ...propsWithoutAs } = props;
-    const slot = ((_state_components = state.components) === null || _state_components === void 0 ? void 0 : _state_components[slotName]) === undefined || typeof state.components[slotName] === 'string' ? asProp || ((_state_components1 = state.components) === null || _state_components1 === void 0 ? void 0 : _state_components1[slotName]) || 'div' : state.components[slotName];
+    const slot = ((_state_components = state.components) === null || _state_components === void 0 ? void 0 : _state_components[slotName]) === undefined || // eslint-disable-line deprecation/deprecation
+    // eslint-disable-next-line deprecation/deprecation
+    typeof state.components[slotName] === 'string' ? asProp || ((_state_components1 = state.components) === null || _state_components1 === void 0 ? void 0 : _state_components1[slotName]) || 'div' : state.components[slotName];
     const shouldOmitAsProp = typeof slot === 'string' && asProp;
+    // eslint-disable-next-line deprecation/deprecation
     const slotProps = shouldOmitAsProp ? propsWithoutAs : props;
@@ -47,0 +52,0 @@ return [

lib/compose/deprecated/resolveShorthand.js

@@ -9,3 +9,3 @@ import * as slot from '../slot';
  *
- * @deprecated use slot.always or slot.optional combined with assertSlots instead
+ * @deprecated use slot.always, slot.optional, slot.resolveShorthand combined with assertSlots instead
  */ // eslint-disable-next-line deprecation/deprecation
@@ -12,0 +12,0 @@ export const resolveShorthand = (value, options)=>slot.optional(value, {

lib/compose/slot.js

@@ -52,3 +52,3 @@ import * as React from 'react';
  */ export function resolveShorthand(value) {
-    if (typeof value === 'string' || typeof value === 'number' || Array.isArray(value) || // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    if (typeof value === 'string' || typeof value === 'number' || isIterable(value) || // eslint-disable-next-line @typescript-eslint/no-explicit-any
     React.isValidElement(value)) {
@@ -69,1 +69,3 @@ return {
 }
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const isIterable = (value)=>typeof value === 'object' && value !== null && Symbol.iterator in value;

lib/hooks/useMergedRefs.js

@@ -7,3 +7,4 @@ import * as React from 'react';
  * @returns A function with an attached "current" prop, so that it can be treated like a RefObject.
- */ export function useMergedRefs(...refs) {
+ */ // LegacyRef is actually not supported, but in React v18 types this is leaking directly from forwardRef component declaration
+export function useMergedRefs(...refs) {
     'use no memo';
@@ -14,2 +15,10 @@ const mergedCallback = React.useCallback((value)=>{
         for (const ref of refs){
+            if (typeof ref === 'string' && process.env.NODE_ENV !== 'production') {
+                // eslint-disable-next-line no-console
+                console.error(`@fluentui/react-utilities [useMergedRefs]:
+This hook does not support the usage of string refs. Please use React.useRef instead.
+
+For more info on 'React.useRef', see https://react.dev/reference/react/useRef.
+For more info on string refs, see https://react.dev/blog/2024/04/25/react-19-upgrade-guide#removed-string-refs.`);
+            }
             if (typeof ref === 'function') {
@@ -16,0 +25,0 @@ ref(value);

lib/utils/types.js

@@ -1,24 +0,1 @@
-/**
- * Helper type that works similar to Omit,
- * but when modifying an union type it will distribute the omission to all the union members.
- *
- * See [distributive conditional types](https://www.typescriptlang.org/docs/handbook/2/conditional-types.html#distributive-conditional-types) for more information
- */ // Traditional Omit is basically equivalent to => Pick<T, Exclude<keyof T, K>>
-//
-// let's say we have Omit<{ a: string } | { b: string }, 'a'>
-// equivalent to: Pick<{ a: string } | { b: string }, Exclude<keyof ({ a: string } | { b: string }), 'a'>>
-// The expected result would be {} | { b: string }, the omission of 'a' from all the union members,
-// but keyof ({ a: string } | { b: string }) is never as they don't share common keys
-// so  Exclude<never, 'a'> is never,
-// and Pick<{ a: string } | { b: string }, never> is {}.
-//
-// With DistributiveOmit on the other hand it becomes like this:
-// DistributiveOmit<{ a: string } | { b: string }, 'a'>
-// equivalent to: Omit<{ a: string }, 'a'> | Omit<{ b: string }, 'a'>
-// Since every single Omit clause in this case is being applied to a single union member there's no conflicts on keyof evaluation and in the second clause Omit<{ b: string }, 'a'> becomes { b: string },
-// so the result is {} | { b: string }, as expected.
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-/**
- * @internal
- * If type T includes `null`, remove it and add `undefined` instead.
- */ export { };
+import * as React from 'react';

package.json

 {
   "name": "@fluentui/react-utilities",
-  "version": "0.0.0-nightly-20240822-0407.1",
+  "version": "0.0.0-nightly-20240822-1237.1",
   "description": "A set of general React-specific utilities.",
@@ -34,4 +34,4 @@ "main": "lib-commonjs/index.js",
   "dependencies": {
-    "@fluentui/keyboard-keys": "0.0.0-nightly-20240822-0407.1",
-    "@fluentui/react-shared-contexts": "0.0.0-nightly-20240822-0407.1",
+    "@fluentui/keyboard-keys": "0.0.0-nightly-20240822-1237.1",
+    "@fluentui/react-shared-contexts": "0.0.0-nightly-20240822-1237.1",
     "@swc/helpers": "^0.5.1"
@@ -38,0 +38,0 @@ },

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

614754

increased by3.28%

Lines of code

5446

increased by1.76%

Worsened metrics

Number of low supply chain risk alerts

18

increased by12.5%

Dependency changes

• + Added@fluentui/keyboard-keys@0.0.0-nightly-20240822-1237.1(transitive)

• + Added@fluentui/react-shared-contexts@0.0.0-nightly-20240822-1237.1(transitive)

• + Added@fluentui/react-theme@0.0.0-nightly-20240822-1237.1(transitive)

• + Added@fluentui/tokens@0.0.0-nightly-20240822-1237.1(transitive)

• - Removed@fluentui/keyboard-keys@0.0.0-nightly-20240822-0407.1(transitive)

• - Removed@fluentui/react-shared-contexts@0.0.0-nightly-20240822-0407.1(transitive)

• - Removed@fluentui/react-theme@0.0.0-nightly-20240822-0407.1(transitive)

• - Removed@fluentui/tokens@0.0.0-nightly-20240822-0407.1(transitive)

• Updated@fluentui/keyboard-keys@0.0.0-nightly-20240822-1237.1

• Updated@fluentui/react-shared-contexts@0.0.0-nightly-20240822-1237.1