@fluentui/react-utilities 9.26.2 → 9.26.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +11 -2
- package/dist/index.d.ts +56 -43
- package/lib/compose/assertSlots.js +10 -11
- package/lib/compose/assertSlots.js.map +1 -1
- package/lib/compose/constants.js +6 -3
- package/lib/compose/constants.js.map +1 -1
- package/lib/compose/deprecated/getSlotsNext.js +1 -2
- package/lib/compose/deprecated/getSlotsNext.js.map +1 -1
- package/lib/compose/getIntrinsicElementProps.js +0 -1
- package/lib/compose/getIntrinsicElementProps.js.map +1 -1
- package/lib/compose/isSlot.js.map +1 -1
- package/lib/compose/types.js +17 -1
- package/lib/compose/types.js.map +1 -1
- package/lib/events/mouseTouchHelpers.js +0 -1
- package/lib/events/mouseTouchHelpers.js.map +1 -1
- package/lib/hooks/useAnimationFrame.js +1 -1
- package/lib/hooks/useAnimationFrame.js.map +1 -1
- package/lib/hooks/useBrowserTimer.js +1 -1
- package/lib/hooks/useBrowserTimer.js.map +1 -1
- package/lib/hooks/useControllableState.js +1 -3
- package/lib/hooks/useControllableState.js.map +1 -1
- package/lib/hooks/useEventCallback.js +1 -1
- package/lib/hooks/useEventCallback.js.map +1 -1
- package/lib/hooks/useFirstMount.js +1 -1
- package/lib/hooks/useFirstMount.js.map +1 -1
- package/lib/hooks/useForceUpdate.js +2 -1
- package/lib/hooks/useForceUpdate.js.map +1 -1
- package/lib/hooks/useOnClickOutside.js +2 -1
- package/lib/hooks/useOnClickOutside.js.map +1 -1
- package/lib/hooks/useOnScrollOutside.js +2 -1
- package/lib/hooks/useOnScrollOutside.js.map +1 -1
- package/lib/hooks/useTimeout.js +1 -1
- package/lib/hooks/useTimeout.js.map +1 -1
- package/lib/selection/types.js +1 -1
- package/lib/selection/types.js.map +1 -1
- package/lib/selection/useSelection.js.map +1 -1
- package/lib/trigger/applyTriggerPropsToChildren.js +2 -1
- package/lib/trigger/applyTriggerPropsToChildren.js.map +1 -1
- package/lib/trigger/getTriggerChild.js +2 -1
- package/lib/trigger/getTriggerChild.js.map +1 -1
- package/lib/trigger/isFluentTrigger.js +2 -2
- package/lib/trigger/isFluentTrigger.js.map +1 -1
- package/lib/trigger/types.js +6 -1
- package/lib/trigger/types.js.map +1 -1
- package/lib/utils/clamp.js +1 -1
- package/lib/utils/clamp.js.map +1 -1
- package/lib/utils/getNativeElementProps.js +0 -1
- package/lib/utils/getNativeElementProps.js.map +1 -1
- package/lib/utils/getRTLSafeKey.js +2 -1
- package/lib/utils/getRTLSafeKey.js.map +1 -1
- package/lib/utils/getReactCallbackName.js +0 -1
- package/lib/utils/getReactCallbackName.js.map +1 -1
- package/lib/utils/isInteractiveHTMLElement.js +2 -1
- package/lib/utils/isInteractiveHTMLElement.js.map +1 -1
- package/lib/utils/mergeCallbacks.js +1 -1
- package/lib/utils/mergeCallbacks.js.map +1 -1
- package/lib/utils/properties.js +1 -0
- package/lib/utils/properties.js.map +1 -1
- package/lib/utils/types.js +4 -1
- package/lib/utils/types.js.map +1 -1
- package/lib-commonjs/compose/assertSlots.js +0 -1
- package/lib-commonjs/compose/assertSlots.js.map +1 -1
- package/lib-commonjs/compose/constants.js +2 -1
- package/lib-commonjs/compose/constants.js.map +1 -1
- package/lib-commonjs/compose/deprecated/getSlotsNext.js +0 -2
- package/lib-commonjs/compose/deprecated/getSlotsNext.js.map +1 -1
- package/lib-commonjs/compose/getIntrinsicElementProps.js +0 -2
- package/lib-commonjs/compose/getIntrinsicElementProps.js.map +1 -1
- package/lib-commonjs/compose/isSlot.js.map +1 -1
- package/lib-commonjs/compose/types.js +0 -2
- package/lib-commonjs/compose/types.js.map +1 -1
- package/lib-commonjs/events/mouseTouchHelpers.js +0 -2
- package/lib-commonjs/events/mouseTouchHelpers.js.map +1 -1
- package/lib-commonjs/hooks/useAnimationFrame.js.map +1 -1
- package/lib-commonjs/hooks/useBrowserTimer.js.map +1 -1
- package/lib-commonjs/hooks/useControllableState.js.map +1 -1
- package/lib-commonjs/hooks/useEventCallback.js.map +1 -1
- package/lib-commonjs/hooks/useFirstMount.js.map +1 -1
- package/lib-commonjs/hooks/useForceUpdate.js.map +1 -1
- package/lib-commonjs/hooks/useOnClickOutside.js.map +1 -1
- package/lib-commonjs/hooks/useOnScrollOutside.js.map +1 -1
- package/lib-commonjs/hooks/useTimeout.js.map +1 -1
- package/lib-commonjs/selection/types.js +0 -2
- package/lib-commonjs/selection/types.js.map +1 -1
- package/lib-commonjs/selection/useSelection.js.map +1 -1
- package/lib-commonjs/trigger/applyTriggerPropsToChildren.js.map +1 -1
- package/lib-commonjs/trigger/getTriggerChild.js.map +1 -1
- package/lib-commonjs/trigger/isFluentTrigger.js +0 -2
- package/lib-commonjs/trigger/isFluentTrigger.js.map +1 -1
- package/lib-commonjs/trigger/types.js +0 -2
- package/lib-commonjs/trigger/types.js.map +1 -1
- package/lib-commonjs/utils/clamp.js +1 -1
- package/lib-commonjs/utils/clamp.js.map +1 -1
- package/lib-commonjs/utils/getNativeElementProps.js +0 -2
- package/lib-commonjs/utils/getNativeElementProps.js.map +1 -1
- package/lib-commonjs/utils/getRTLSafeKey.js +2 -1
- package/lib-commonjs/utils/getRTLSafeKey.js.map +1 -1
- package/lib-commonjs/utils/getReactCallbackName.js +0 -2
- package/lib-commonjs/utils/getReactCallbackName.js.map +1 -1
- package/lib-commonjs/utils/isInteractiveHTMLElement.js.map +1 -1
- package/lib-commonjs/utils/mergeCallbacks.js +1 -1
- package/lib-commonjs/utils/mergeCallbacks.js.map +1 -1
- package/lib-commonjs/utils/properties.js +1 -0
- package/lib-commonjs/utils/properties.js.map +1 -1
- package/lib-commonjs/utils/types.js +0 -2
- package/lib-commonjs/utils/types.js.map +1 -1
- package/package.json +1 -1
package/lib/compose/types.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/compose/types.ts"],"sourcesContent":["import * as React from 'react';\nimport { SLOT_CLASS_NAME_PROP_SYMBOL, SLOT_ELEMENT_TYPE_SYMBOL, SLOT_RENDER_FUNCTION_SYMBOL } from './constants';\nimport type {\n ComponentType,\n FunctionComponent,\n NamedExoticComponent,\n PropsWithoutChildren,\n PropsWithoutRef,\n ReactNode,\n ReactVersionDependent,\n ReplaceNullWithUndefined,\n JSXIntrinsicElementKeys,\n JSXIntrinsicElement,\n} from '../utils/types';\n\nexport type SlotRenderFunction<Props> = (Component: React.ElementType<Props>, props: Omit<Props, 'as'>) => ReactNode;\n\n/**\n * Matches any component's Slots type (such as ButtonSlots).\n *\n * This should ONLY be used in type templates as in `extends SlotPropsRecord`;\n * it shouldn't be used as a component's Slots type.\n */\nexport type SlotPropsRecord = Record<string, UnknownSlotProps | SlotShorthandValue | null | undefined>;\n\n/**\n * The shorthand value of a slot allows specifying its child\n */\nexport type SlotShorthandValue = React.ReactElement | string | number | Iterable<ReactNode> | React.ReactPortal;\n\n/**\n * Matches any slot props type.\n *\n * This should ONLY be used in type templates as in `extends UnknownSlotProps`;\n * it shouldn't be used as the type of a slot.\n */\nexport type UnknownSlotProps = Pick<React.HTMLAttributes<HTMLElement>, 'className' | 'style'> & {\n as?: JSXIntrinsicElementKeys;\n children?: ReactNode;\n};\n\n/**\n * Helper type for {@link Slot}. Adds shorthand types that are assignable to the slot's `children`.\n */\ntype WithSlotShorthandValue<Props> =\n | Props\n | ('children' extends keyof Props ? Extract<SlotShorthandValue, Props['children']> : never);\n\n/**\n * @internal\n * Helper type for {@link Slot}. Takes the props we want to support for a slot and adds the ability for `children`\n * to be a render function that takes those props.\n *\n * Notes: For React 17 and earlier, `children` can be a render function that returns a ReactNode.\n * For React 18 and later, `children` can be any value, as React.ReactNode is a more strict type and does not allow functions anymore.\n * This means that the render functions need to be asserted as `SlotRenderFunction<Props>` for React 18 and later.\n *\n * @example\n * ```tsx\n * // For React 17 and earlier:\n * <Component slot={{ children: (Component, props) => <Component {...props} /> }} />\n *\n * // For React 18 and later:\n * <Component slot={{ children: (Component, props) => <Component {...props} /> as SlotRenderFunction<SlotProps> }} />\n * ```\n */\nexport type WithSlotRenderFunction<Props> = PropsWithoutChildren<Props> & {\n children?: 'children' extends keyof Props\n ? ReactVersionDependent<ReactNode, Props['children'] | SlotRenderFunction<Props>>\n : never;\n};\n\n/**\n * @internal\n */\nexport type WithoutSlotRenderFunction<Props> = Props extends unknown\n ? 'children' extends keyof Props\n ? Omit<Props, 'children'> & { children?: Exclude<Props['children'], Function> }\n : Props\n : never;\n\n/**\n * HTML element types that are not allowed to have children.\n *\n * Reference: https://developer.mozilla.org/en-US/docs/Glossary/Empty_element\n */\ntype EmptyIntrinsicElements =\n | 'area'\n | 'base'\n | 'br'\n | 'col'\n | 'embed'\n | 'hr'\n | 'img'\n | 'input'\n | 'link'\n | 'meta'\n | 'param'\n | 'source'\n | 'track'\n | 'wbr';\n\n/**\n * Helper type for {@link Slot}. Modifies `JSXIntrinsicElements<Type>`:\n * * Removes legacy string ref.\n * * Disallows children for empty tags like 'img'.\n */\ntype IntrinsicElementProps<Type extends JSXIntrinsicElementKeys> = Type extends EmptyIntrinsicElements\n ? PropsWithoutChildren<\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n React.PropsWithRef<JSXIntrinsicElement<Type>>\n >\n : // eslint-disable-next-line @typescript-eslint/no-deprecated\n React.PropsWithRef<JSXIntrinsicElement<Type>>;\n\n/**\n * The props type and shorthand value for a slot. Type is either a single intrinsic element like `'div'`,\n * or a component like `typeof Button`.\n *\n * If a slot needs to support multiple intrinsic element types, use the `AlternateAs` param (see examples below).\n *\n * By default, slots can be set to `null` to prevent them from being rendered. If a slot must always be rendered,\n * wrap with `NonNullable` (see examples below).\n *\n * @example\n * ```\n * // Intrinsic element examples:\n * Slot<'div'> // Slot is always div\n * Slot<'button', 'a'> // Defaults to button, but allows as=\"a\" with anchor-specific props\n * Slot<'span', 'div' | 'pre'> // Defaults to span, but allows as=\"div\" or as=\"pre\"\n * NonNullable<Slot<'div'>> // Slot that will always be rendered (can't be set to null by the user)\n *\n * // Component examples:\n * Slot<typeof Button> // Slot is always a Button, and accepts all of Button's Props\n * NonNullable<Slot<typeof Label>> // Slot is a Label and will always be rendered (can't be set to null by the user)\n * ```\n */\nexport type Slot<\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n Type extends JSXIntrinsicElementKeys | ComponentType<any> | UnknownSlotProps,\n AlternateAs extends JSXIntrinsicElementKeys = never,\n> = IsSingleton<Extract<Type, string>> extends true\n ?\n | WithSlotShorthandValue<\n Type extends JSXIntrinsicElementKeys // Intrinsic elements like `div`\n ? { as?: Type } & WithSlotRenderFunction<IntrinsicElementProps<Type>>\n : Type extends ComponentType<infer Props> // Component types like `typeof Button`\n ? Props extends UnknownSlotProps\n ? Props\n : WithSlotRenderFunction<Props>\n : Type // Props types like `ButtonProps`\n >\n | (AlternateAs extends unknown\n ? { as: AlternateAs } & WithSlotRenderFunction<IntrinsicElementProps<AlternateAs>>\n : never)\n | null\n : 'Error: First parameter to Slot must not be not a union of types. See documentation of Slot type.';\n\n/**\n * Evaluates to true if the given type contains exactly one string, or false if it is a union of strings.\n *\n * ```\n * IsSingleton<'a'> // true\n * IsSingleton<'a' | 'b' | 'c'> // false\n * ```\n */\nexport type IsSingleton<T extends string> = { [K in T]: Exclude<T, K> extends never ? true : false }[T];\n\n/**\n * Helper type for inferring the type of the as prop from a Props type.\n *\n * For example:\n * ```\n * type Example<T> = T extends AsIntrinsicElement<infer As> ? As : never;\n * ```\n */\nexport type AsIntrinsicElement<As extends JSXIntrinsicElementKeys> = { as?: As };\n\n/**\n * Removes SlotShorthandValue and null from the slot type, extracting just the slot's Props object.\n */\nexport type ExtractSlotProps<S> = Exclude<S, SlotShorthandValue | null | undefined>;\n\n/**\n * Defines the Props type for a component given its slots and the definition of which one is the primary slot,\n * defaulting to root if one is not provided.\n */\nexport type ComponentProps<Slots extends SlotPropsRecord, Primary extends keyof Slots = 'root'> =\n // Include a prop for each slot (see note below about the Omit)\n // Note: the `Omit<Slots, Primary & 'root'>` here is a little tricky. Here's what it's doing:\n // * If the Primary slot is 'root', then omit the `root` slot prop.\n // * Otherwise, don't omit any props: include *both* the Primary and `root` props.\n // We need both props to allow the user to specify native props for either slot because the `root` slot is\n // special and always gets className and style props, per RFC https://github.com/microsoft/fluentui/pull/18983\n Omit<Slots, Primary & 'root'> &\n // Include all of the props of the primary slot inline in the component's props\n PropsWithoutRef<ExtractSlotProps<Slots[Primary]>>;\n\n/**\n * Defines the State object of a component given its slots.\n */\nexport type ComponentState<Slots extends SlotPropsRecord> = {\n /**\n * @deprecated\n * The base element type for each slot.\n * This property is deprecated and will be removed in a future version.\n * The slot base element type is declared through `slot.*(slotShorthand, {elementType: ElementType})` instead.\n */\n components: {\n [Key in keyof Slots]-?: React.ElementType;\n };\n} & {\n // Include a prop for each slot, with the shorthand resolved to a props object\n // The root slot can never be null, so also exclude null from it\n [Key in keyof Slots]: ReplaceNullWithUndefined<\n WithoutSlotRenderFunction<Exclude<Slots[Key], SlotShorthandValue | (Key extends 'root' ? null : never)>>\n >;\n};\n\n/**\n * This is part of a hack to infer the element type from a native element *props* type.\n * The only place the original element is found in a native props type (at least that's workable\n * for inference) is in the event handlers, so some of the helper types use this event handler\n * name to infer the original element type.\n *\n * Notes:\n * - Using an extremely obscure event handler reduces the likelihood that its signature will be\n * modified in any component's props.\n * - Inferring based on a single prop name instead of a larger type like `DOMAttributes<T>` should be\n * less expensive for typescript to evaluate and is less likely to result in type expansion in .d.ts.\n */\ntype ObscureEventName = 'onLostPointerCaptureCapture';\n\n/**\n * Infers the element type from props that are declared using ComponentProps.\n */\nexport type InferredElementRefType<Props> = ObscureEventName extends keyof Props\n ? Required<Props>[ObscureEventName] extends React.PointerEventHandler<infer Element>\n ? Element\n : never\n : never;\n\n/**\n * Return type for `React.forwardRef`, including inference of the proper typing for the ref.\n *\n * @remarks\n * {@link React.RefAttributes} is {@link https://github.com/DefinitelyTyped/DefinitelyTyped/discussions/69756 | leaking string references} into `forwardRef` components\n * after introducing {@link https://github.com/DefinitelyTyped/DefinitelyTyped/pull/68720 | RefAttributes Type Extension}, which shipped in `@types/react@18.2.61`\n * - `forwardRef` component do not support string refs.\n * - uses custom `RefAttributes` which is compatible with all React versions enforcing no `string` allowance.\n */\nexport type ForwardRefComponent<Props> = NamedExoticComponent<Props & RefAttributes<InferredElementRefType<Props>>>;\n\n/**\n * Helper type to correctly define the slot class names object.\n */\nexport type SlotClassNames<Slots> = {\n [SlotName in keyof Slots]-?: string;\n};\n\n/**\n * A definition of a slot, as a component, very similar to how a React component is declared,\n * but with some additional metadata that is used to determine how to render the slot.\n */\nexport type SlotComponentType<Props> = WithoutSlotRenderFunction<Props> &\n FunctionComponent<{ children?: ReactNode }> & {\n /**\n * @internal\n */\n [SLOT_RENDER_FUNCTION_SYMBOL]?: SlotRenderFunction<Props>;\n /**\n * @internal\n */\n [SLOT_ELEMENT_TYPE_SYMBOL]:\n | ComponentType<Props>\n | (Props extends AsIntrinsicElement<infer As> ? As : JSXIntrinsicElementKeys);\n /**\n * @internal\n * The original className prop for the slot, before being modified by the useStyles hook.\n */\n [SLOT_CLASS_NAME_PROP_SYMBOL]?: string;\n };\n\n/**\n * Data type for event handlers. It makes data a discriminated union, where each object requires `event` and `type` property.\n * - `event` is the specific event type\n * - `type` is a string literal. It serves as a clear identifier of the event type that reflects the component's state when the event occurred.\n * For example, the Tree component's `onNavigation` event handler has different `type` for different key presses: `{ event: React.KeyboardEvent<HTMLElement>; type: typeof ArrowRight } | { event: React.KeyboardEvent<HTMLElement>; type: typeof ArrowLeft }`.\n * Developers can use the `type` property to identify and filter events of interest.\n * See RFC event-handlers-event-type.md for more details.\n *\n * Example usage:\n * type OnOpenChangeData = (\n * | EventData\\<'click', React.MouseEvent\\<MyComponentElement\\>\\>\n * | EventData\\<'keydown', React.KeyboardEvent\\<MyComponentElement\\>\\>\n * ) & \\{ open: boolean; \\};\n */\nexport type EventData<Type extends string, TEvent> =\n | { type: undefined; event: React.SyntheticEvent | Event }\n | { type: Type; event: TEvent };\n\n/**\n * Type for props that are event handlers.\n * See RFC event-handlers-event-type.md for more details.\n *\n * Example usage:\n * type OnSomeEventData = EventData\\<'click', React.MouseEvent\\<MyComponentElement\\>\\> & \\{ open: boolean; \\};\n * type SomeProps = \\{ onSomeEvent?: EventHandler\\<OnSomeEventData\\>; \\};\n */\nexport type EventHandler<TData extends EventData<string, unknown>> = (\n ev: React.SyntheticEvent | Event,\n data: TData,\n) => void;\n\n/**\n * This type should be used in place of `React.RefAttributes<T>` in all components that specify `ref` prop.\n *\n * If user is using React 18 types `>=18.2.61`, they will run into type issues of incompatible refs, using this type mitigates this issues across react type versions.\n *\n * @remarks\n *\n * React 18 types introduced Type Expansion Change to the `RefAttributes` interface as patch release.\n * These changes were released in `@types/react@18.2.61` (replacing ref with `LegacyRef`, which leaks `string` into the union type, causing breaking changes between v8/v9 libraries):\n * - {@link https://github.com/DefinitelyTyped/DefinitelyTyped/pull/68720 | PR }\n * - {@link https://app.unpkg.com/@types/react@18.2.61/files/index.d.ts | shipped definitions }\n *\n *\n * In React 19 types this was \"reverted\" back to the original `Ref<T>` type.\n * In order to maintain compatibility with React 17,18,19, we are forced to use our own version of `RefAttributes`.\n *\n */\nexport interface RefAttributes<T> extends React.Attributes {\n ref?: React.Ref<T> | undefined;\n}\n"],"names":["React"],"mappings":"AAAA,YAAYA,WAAW,QAAQ"}
|
|
1
|
+
{"version":3,"sources":["../src/compose/types.ts"],"sourcesContent":["import type * as React from 'react';\nimport type { SLOT_CLASS_NAME_PROP_SYMBOL, SLOT_ELEMENT_TYPE_SYMBOL, SLOT_RENDER_FUNCTION_SYMBOL } from './constants';\nimport type {\n ComponentType,\n FunctionComponent,\n NamedExoticComponent,\n PropsWithoutChildren,\n PropsWithoutRef,\n ReactNode,\n ReactVersionDependent,\n ReplaceNullWithUndefined,\n JSXIntrinsicElementKeys,\n JSXIntrinsicElement,\n} from '../utils/types';\n\nexport type SlotRenderFunction<Props> = (Component: React.ElementType<Props>, props: Omit<Props, 'as'>) => ReactNode;\n\n/**\n * Matches any component's Slots type (such as ButtonSlots).\n *\n * This should ONLY be used in type templates as in `extends SlotPropsRecord`;\n * it shouldn't be used as a component's Slots type.\n */\nexport type SlotPropsRecord = Record<string, UnknownSlotProps | SlotShorthandValue | null | undefined>;\n\n/**\n * The shorthand value of a slot allows specifying its child\n */\nexport type SlotShorthandValue = React.ReactElement | string | number | Iterable<ReactNode> | React.ReactPortal;\n\n/**\n * Matches any slot props type.\n *\n * This should ONLY be used in type templates as in `extends UnknownSlotProps`;\n * it shouldn't be used as the type of a slot.\n */\nexport type UnknownSlotProps = Pick<React.HTMLAttributes<HTMLElement>, 'className' | 'style'> & {\n as?: JSXIntrinsicElementKeys;\n children?: ReactNode;\n};\n\n/**\n * Helper type for {@link Slot}. Adds shorthand types that are assignable to the slot's `children`.\n */\ntype WithSlotShorthandValue<Props> =\n | Props\n | ('children' extends keyof Props ? Extract<SlotShorthandValue, Props['children']> : never);\n\n/**\n * Helper type for {@link Slot}. Takes the props we want to support for a slot and adds the ability for `children`\n * to be a render function that takes those props.\n *\n * Notes: For React 17 and earlier, `children` can be a render function that returns a ReactNode.\n * For React 18 and later, `children` can be any value, as React.ReactNode is a more strict type and does not allow functions anymore.\n * This means that the render functions need to be asserted as `SlotRenderFunction<Props>` for React 18 and later.\n *\n * @internal\n * @example\n * ```tsx\n * // For React 17 and earlier:\n * <Component slot={{ children: (Component, props) => <Component {...props} /> }} />\n *\n * // For React 18 and later:\n * <Component slot={{ children: (Component, props) => <Component {...props} /> as SlotRenderFunction<SlotProps> }} />\n * ```\n */\nexport type WithSlotRenderFunction<Props> = PropsWithoutChildren<Props> & {\n children?: 'children' extends keyof Props\n ? ReactVersionDependent<ReactNode, Props['children'] | SlotRenderFunction<Props>>\n : never;\n};\n\n/**\n * @internal\n */\nexport type WithoutSlotRenderFunction<Props> = Props extends unknown\n ? 'children' extends keyof Props\n ? Omit<Props, 'children'> & { children?: Exclude<Props['children'], Function> }\n : Props\n : never;\n\n/**\n * HTML element types that are not allowed to have children.\n *\n * Reference: https://developer.mozilla.org/en-US/docs/Glossary/Empty_element\n */\ntype EmptyIntrinsicElements =\n | 'area'\n | 'base'\n | 'br'\n | 'col'\n | 'embed'\n | 'hr'\n | 'img'\n | 'input'\n | 'link'\n | 'meta'\n | 'param'\n | 'source'\n | 'track'\n | 'wbr';\n\n/**\n * Helper type for {@link Slot}. Modifies `JSXIntrinsicElements<Type>`:\n * * Removes legacy string ref.\n * * Disallows children for empty tags like 'img'.\n */\ntype IntrinsicElementProps<Type extends JSXIntrinsicElementKeys> = Type extends EmptyIntrinsicElements\n ? PropsWithoutChildren<\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n React.PropsWithRef<JSXIntrinsicElement<Type>>\n >\n : // eslint-disable-next-line @typescript-eslint/no-deprecated\n React.PropsWithRef<JSXIntrinsicElement<Type>>;\n\n/**\n * The props type and shorthand value for a slot. Type is either a single intrinsic element like `'div'`,\n * or a component like `typeof Button`.\n *\n * If a slot needs to support multiple intrinsic element types, use the `AlternateAs` param (see examples below).\n *\n * By default, slots can be set to `null` to prevent them from being rendered. If a slot must always be rendered,\n * wrap with `NonNullable` (see examples below).\n *\n * @example\n * ```\n * // Intrinsic element examples:\n * Slot<'div'> // Slot is always div\n * Slot<'button', 'a'> // Defaults to button, but allows as=\"a\" with anchor-specific props\n * Slot<'span', 'div' | 'pre'> // Defaults to span, but allows as=\"div\" or as=\"pre\"\n * NonNullable<Slot<'div'>> // Slot that will always be rendered (can't be set to null by the user)\n *\n * // Component examples:\n * Slot<typeof Button> // Slot is always a Button, and accepts all of Button's Props\n * NonNullable<Slot<typeof Label>> // Slot is a Label and will always be rendered (can't be set to null by the user)\n * ```\n */\nexport type Slot<\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n Type extends JSXIntrinsicElementKeys | ComponentType<any> | UnknownSlotProps,\n AlternateAs extends JSXIntrinsicElementKeys = never,\n> = IsSingleton<Extract<Type, string>> extends true\n ?\n | WithSlotShorthandValue<\n Type extends JSXIntrinsicElementKeys // Intrinsic elements like `div`\n ? { as?: Type } & WithSlotRenderFunction<IntrinsicElementProps<Type>>\n : Type extends ComponentType<infer Props> // Component types like `typeof Button`\n ? Props extends UnknownSlotProps\n ? Props\n : WithSlotRenderFunction<Props>\n : Type // Props types like `ButtonProps`\n >\n | (AlternateAs extends unknown\n ? { as: AlternateAs } & WithSlotRenderFunction<IntrinsicElementProps<AlternateAs>>\n : never)\n | null\n : 'Error: First parameter to Slot must not be not a union of types. See documentation of Slot type.';\n\n/**\n * Evaluates to true if the given type contains exactly one string, or false if it is a union of strings.\n *\n * ```\n * IsSingleton<'a'> // true\n * IsSingleton<'a' | 'b' | 'c'> // false\n * ```\n */\nexport type IsSingleton<T extends string> = { [K in T]: Exclude<T, K> extends never ? true : false }[T];\n\n/**\n * Helper type for inferring the type of the as prop from a Props type.\n *\n * For example:\n * ```\n * type Example<T> = T extends AsIntrinsicElement<infer As> ? As : never;\n * ```\n */\nexport type AsIntrinsicElement<As extends JSXIntrinsicElementKeys> = { as?: As };\n\n/**\n * Removes SlotShorthandValue and null from the slot type, extracting just the slot's Props object.\n */\nexport type ExtractSlotProps<S> = Exclude<S, SlotShorthandValue | null | undefined>;\n\n/**\n * Defines the Props type for a component given its slots and the definition of which one is the primary slot,\n * defaulting to root if one is not provided.\n */\nexport type ComponentProps<Slots extends SlotPropsRecord, Primary extends keyof Slots = 'root'> =\n // Include a prop for each slot (see note below about the Omit)\n // Note: the `Omit<Slots, Primary & 'root'>` here is a little tricky. Here's what it's doing:\n // * If the Primary slot is 'root', then omit the `root` slot prop.\n // * Otherwise, don't omit any props: include *both* the Primary and `root` props.\n // We need both props to allow the user to specify native props for either slot because the `root` slot is\n // special and always gets className and style props, per RFC https://github.com/microsoft/fluentui/pull/18983\n Omit<Slots, Primary & 'root'> &\n // Include all of the props of the primary slot inline in the component's props\n PropsWithoutRef<ExtractSlotProps<Slots[Primary]>>;\n\n/**\n * Defines the State object of a component given its slots.\n */\nexport type ComponentState<Slots extends SlotPropsRecord> = {\n /**\n * @deprecated\n * The base element type for each slot.\n * This property is deprecated and will be removed in a future version.\n * The slot base element type is declared through `slot.*(slotShorthand, {elementType: ElementType})` instead.\n */\n components: {\n [Key in keyof Slots]-?: React.ElementType;\n };\n} & {\n // Include a prop for each slot, with the shorthand resolved to a props object\n // The root slot can never be null, so also exclude null from it\n [Key in keyof Slots]: ReplaceNullWithUndefined<\n WithoutSlotRenderFunction<Exclude<Slots[Key], SlotShorthandValue | (Key extends 'root' ? null : never)>>\n >;\n};\n\n/**\n * This is part of a hack to infer the element type from a native element *props* type.\n * The only place the original element is found in a native props type (at least that's workable\n * for inference) is in the event handlers, so some of the helper types use this event handler\n * name to infer the original element type.\n *\n * Notes:\n * - Using an extremely obscure event handler reduces the likelihood that its signature will be\n * modified in any component's props.\n * - Inferring based on a single prop name instead of a larger type like `DOMAttributes<T>` should be\n * less expensive for typescript to evaluate and is less likely to result in type expansion in .d.ts.\n */\ntype ObscureEventName = 'onLostPointerCaptureCapture';\n\n/**\n * Infers the element type from props that are declared using ComponentProps.\n */\nexport type InferredElementRefType<Props> = ObscureEventName extends keyof Props\n ? Required<Props>[ObscureEventName] extends React.PointerEventHandler<infer Element>\n ? Element\n : never\n : never;\n\n/**\n * Return type for `React.forwardRef`, including inference of the proper typing for the ref.\n *\n * @remarks\n * {@link React.RefAttributes} is {@link https://github.com/DefinitelyTyped/DefinitelyTyped/discussions/69756 | leaking string references} into `forwardRef` components\n * after introducing {@link https://github.com/DefinitelyTyped/DefinitelyTyped/pull/68720 | RefAttributes Type Extension}, which shipped in `@types/react@18.2.61`\n * - `forwardRef` component do not support string refs.\n * - uses custom `RefAttributes` which is compatible with all React versions enforcing no `string` allowance.\n */\nexport type ForwardRefComponent<Props> = NamedExoticComponent<Props & RefAttributes<InferredElementRefType<Props>>>;\n\n/**\n * Helper type to correctly define the slot class names object.\n */\nexport type SlotClassNames<Slots> = {\n [SlotName in keyof Slots]-?: string;\n};\n\n/**\n * A definition of a slot, as a component, very similar to how a React component is declared,\n * but with some additional metadata that is used to determine how to render the slot.\n */\nexport type SlotComponentType<Props> = WithoutSlotRenderFunction<Props> &\n FunctionComponent<{ children?: ReactNode }> & {\n /**\n * @internal\n */\n [SLOT_RENDER_FUNCTION_SYMBOL]?: SlotRenderFunction<Props>;\n /**\n * @internal\n */\n [SLOT_ELEMENT_TYPE_SYMBOL]:\n | ComponentType<Props>\n | (Props extends AsIntrinsicElement<infer As> ? As : JSXIntrinsicElementKeys);\n /**\n * The original className prop for the slot, before being modified by the useStyles hook.\n *\n * @internal\n */\n [SLOT_CLASS_NAME_PROP_SYMBOL]?: string;\n };\n\n/**\n * Data type for event handlers. It makes data a discriminated union, where each object requires `event` and `type` property.\n * - `event` is the specific event type\n * - `type` is a string literal. It serves as a clear identifier of the event type that reflects the component's state when the event occurred.\n * For example, the Tree component's `onNavigation` event handler has different `type` for different key presses: `{ event: React.KeyboardEvent<HTMLElement>; type: typeof ArrowRight } | { event: React.KeyboardEvent<HTMLElement>; type: typeof ArrowLeft }`.\n * Developers can use the `type` property to identify and filter events of interest.\n * See RFC event-handlers-event-type.md for more details.\n *\n * Example usage:\n * type OnOpenChangeData = (\n * | EventData\\<'click', React.MouseEvent\\<MyComponentElement\\>\\>\n * | EventData\\<'keydown', React.KeyboardEvent\\<MyComponentElement\\>\\>\n * ) & \\{ open: boolean; \\};\n */\nexport type EventData<Type extends string, TEvent> =\n | { type: undefined; event: React.SyntheticEvent | Event }\n | { type: Type; event: TEvent };\n\n/**\n * Type for props that are event handlers.\n * See RFC event-handlers-event-type.md for more details.\n *\n * Example usage:\n * type OnSomeEventData = EventData\\<'click', React.MouseEvent\\<MyComponentElement\\>\\> & \\{ open: boolean; \\};\n * type SomeProps = \\{ onSomeEvent?: EventHandler\\<OnSomeEventData\\>; \\};\n */\nexport type EventHandler<TData extends EventData<string, unknown>> = (\n ev: React.SyntheticEvent | Event,\n data: TData,\n) => void;\n\n/**\n * This type should be used in place of `React.RefAttributes<T>` in all components that specify `ref` prop.\n *\n * If user is using React 18 types `>=18.2.61`, they will run into type issues of incompatible refs, using this type mitigates this issues across react type versions.\n *\n * @remarks\n *\n * React 18 types introduced Type Expansion Change to the `RefAttributes` interface as patch release.\n * These changes were released in `@types/react@18.2.61` (replacing ref with `LegacyRef`, which leaks `string` into the union type, causing breaking changes between v8/v9 libraries):\n * - {@link https://github.com/DefinitelyTyped/DefinitelyTyped/pull/68720 | PR }\n * - {@link https://app.unpkg.com/@types/react@18.2.61/files/index.d.ts | shipped definitions }\n *\n *\n * In React 19 types this was \"reverted\" back to the original `Ref<T>` type.\n * In order to maintain compatibility with React 17,18,19, we are forced to use our own version of `RefAttributes`.\n *\n */\nexport interface RefAttributes<T> extends React.Attributes {\n ref?: React.Ref<T> | undefined;\n}\n"],"names":[],"mappings":"AA2TA;;;;;;;;;;;;;;;;CAgBC,GACD,WAEC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/events/mouseTouchHelpers.ts"],"sourcesContent":["import * as React from 'react';\n\nexport type NativeTouchOrMouseEvent = MouseEvent | TouchEvent;\n\nexport type ReactTouchOrMouseEvent = React.MouseEvent | React.TouchEvent;\n\nexport type TouchOrMouseEvent = NativeTouchOrMouseEvent | ReactTouchOrMouseEvent;\n\n/**\n * Returns true if event is a touch event. Useful when sharing logic between touch and mouse interactions.\n */\nexport function isTouchEvent(event: TouchOrMouseEvent): event is TouchEvent | React.TouchEvent {\n return event.type.startsWith('touch');\n}\n\n/**\n * Returns true if event is a mouse event. Useful when sharing logic between touch and mouse interactions.\n */\nexport function isMouseEvent(event: TouchOrMouseEvent): event is MouseEvent | React.MouseEvent {\n return event.type.startsWith('mouse') || ['click', 'contextmenu', 'dblclick'].indexOf(event.type) > -1;\n}\n\n/**\n * Returns an object with clientX, clientY for TouchOrMouseEvent.\n * Returns zeros in case the event is not a mouse or a touch event.\n */\nexport function getEventClientCoords(event: TouchOrMouseEvent): { clientX: number; clientY: number } {\n if (isMouseEvent(event)) {\n return { clientX: event.clientX, clientY: event.clientY };\n } else if (isTouchEvent(event)) {\n return { clientX: event.touches[0].clientX, clientY: event.touches[0].clientY };\n } else {\n if (process.env.NODE_ENV !== 'production') {\n throw new Error('@fluentui/react-utilities]: Unable to get clientX. Unknown event type.');\n }\n return { clientX: 0, clientY: 0 };\n }\n}\n"],"names":["
|
|
1
|
+
{"version":3,"sources":["../src/events/mouseTouchHelpers.ts"],"sourcesContent":["import type * as React from 'react';\n\nexport type NativeTouchOrMouseEvent = MouseEvent | TouchEvent;\n\nexport type ReactTouchOrMouseEvent = React.MouseEvent | React.TouchEvent;\n\nexport type TouchOrMouseEvent = NativeTouchOrMouseEvent | ReactTouchOrMouseEvent;\n\n/**\n * Returns true if event is a touch event. Useful when sharing logic between touch and mouse interactions.\n */\nexport function isTouchEvent(event: TouchOrMouseEvent): event is TouchEvent | React.TouchEvent {\n return event.type.startsWith('touch');\n}\n\n/**\n * Returns true if event is a mouse event. Useful when sharing logic between touch and mouse interactions.\n */\nexport function isMouseEvent(event: TouchOrMouseEvent): event is MouseEvent | React.MouseEvent {\n return event.type.startsWith('mouse') || ['click', 'contextmenu', 'dblclick'].indexOf(event.type) > -1;\n}\n\n/**\n * Returns an object with clientX, clientY for TouchOrMouseEvent.\n * Returns zeros in case the event is not a mouse or a touch event.\n */\nexport function getEventClientCoords(event: TouchOrMouseEvent): { clientX: number; clientY: number } {\n if (isMouseEvent(event)) {\n return { clientX: event.clientX, clientY: event.clientY };\n } else if (isTouchEvent(event)) {\n return { clientX: event.touches[0].clientX, clientY: event.touches[0].clientY };\n } else {\n if (process.env.NODE_ENV !== 'production') {\n throw new Error('@fluentui/react-utilities]: Unable to get clientX. Unknown event type.');\n }\n return { clientX: 0, clientY: 0 };\n }\n}\n"],"names":["isTouchEvent","event","type","startsWith","isMouseEvent","indexOf","getEventClientCoords","clientX","clientY","touches","process","env","NODE_ENV","Error"],"mappings":"AAQA;;CAEC,GACD,OAAO,SAASA,aAAaC,KAAwB;IACnD,OAAOA,MAAMC,IAAI,CAACC,UAAU,CAAC;AAC/B;AAEA;;CAEC,GACD,OAAO,SAASC,aAAaH,KAAwB;IACnD,OAAOA,MAAMC,IAAI,CAACC,UAAU,CAAC,YAAY;QAAC;QAAS;QAAe;KAAW,CAACE,OAAO,CAACJ,MAAMC,IAAI,IAAI,CAAC;AACvG;AAEA;;;CAGC,GACD,OAAO,SAASI,qBAAqBL,KAAwB;IAC3D,IAAIG,aAAaH,QAAQ;QACvB,OAAO;YAAEM,SAASN,MAAMM,OAAO;YAAEC,SAASP,MAAMO,OAAO;QAAC;IAC1D,OAAO,IAAIR,aAAaC,QAAQ;QAC9B,OAAO;YAAEM,SAASN,MAAMQ,OAAO,CAAC,EAAE,CAACF,OAAO;YAAEC,SAASP,MAAMQ,OAAO,CAAC,EAAE,CAACD,OAAO;QAAC;IAChF,OAAO;QACL,IAAIE,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;YACzC,MAAM,IAAIC,MAAM;QAClB;QACA,OAAO;YAAEN,SAAS;YAAGC,SAAS;QAAE;IAClC;AACF"}
|
|
@@ -7,11 +7,11 @@ const setAnimationFrameNoop = (callback)=>{
|
|
|
7
7
|
};
|
|
8
8
|
const cancelAnimationFrameNoop = (handle)=>handle;
|
|
9
9
|
/**
|
|
10
|
-
* @internal
|
|
11
10
|
* Helper to manage a browser requestAnimationFrame.
|
|
12
11
|
* Ensures that the requestAnimationFrame isn't set multiple times at once and is cleaned up
|
|
13
12
|
* when the component is unloaded.
|
|
14
13
|
*
|
|
14
|
+
* @internal
|
|
15
15
|
* @returns A pair of [requestAnimationFrame, cancelAnimationFrame] that are stable between renders.
|
|
16
16
|
*/ export function useAnimationFrame() {
|
|
17
17
|
const { targetDocument } = useFluent();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/hooks/useAnimationFrame.ts"],"sourcesContent":["'use client';\n\nimport { useBrowserTimer } from './useBrowserTimer';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\n\nconst setAnimationFrameNoop = (callback: FrameRequestCallback) => {\n callback(0);\n return 0;\n};\nconst cancelAnimationFrameNoop = (handle: number) => handle;\n\n/**\n *
|
|
1
|
+
{"version":3,"sources":["../src/hooks/useAnimationFrame.ts"],"sourcesContent":["'use client';\n\nimport { useBrowserTimer } from './useBrowserTimer';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\n\nconst setAnimationFrameNoop = (callback: FrameRequestCallback) => {\n callback(0);\n return 0;\n};\nconst cancelAnimationFrameNoop = (handle: number) => handle;\n\n/**\n * Helper to manage a browser requestAnimationFrame.\n * Ensures that the requestAnimationFrame isn't set multiple times at once and is cleaned up\n * when the component is unloaded.\n *\n * @internal\n * @returns A pair of [requestAnimationFrame, cancelAnimationFrame] that are stable between renders.\n */\nexport function useAnimationFrame(): readonly [(fn: FrameRequestCallback) => number, () => void] {\n const { targetDocument } = useFluent();\n const win = targetDocument?.defaultView;\n\n const setAnimationFrame = win ? win.requestAnimationFrame : setAnimationFrameNoop;\n const clearAnimationFrame = win ? win.cancelAnimationFrame : cancelAnimationFrameNoop;\n\n return useBrowserTimer(setAnimationFrame, clearAnimationFrame) as [(fn: FrameRequestCallback) => number, () => void];\n}\n"],"names":["useBrowserTimer","useFluent_unstable","useFluent","setAnimationFrameNoop","callback","cancelAnimationFrameNoop","handle","useAnimationFrame","targetDocument","win","defaultView","setAnimationFrame","requestAnimationFrame","clearAnimationFrame","cancelAnimationFrame"],"mappings":"AAAA;AAEA,SAASA,eAAe,QAAQ,oBAAoB;AACpD,SAASC,sBAAsBC,SAAS,QAAQ,kCAAkC;AAElF,MAAMC,wBAAwB,CAACC;IAC7BA,SAAS;IACT,OAAO;AACT;AACA,MAAMC,2BAA2B,CAACC,SAAmBA;AAErD;;;;;;;CAOC,GACD,OAAO,SAASC;IACd,MAAM,EAAEC,cAAc,EAAE,GAAGN;IAC3B,MAAMO,MAAMD,2BAAAA,qCAAAA,eAAgBE,WAAW;IAEvC,MAAMC,oBAAoBF,MAAMA,IAAIG,qBAAqB,GAAGT;IAC5D,MAAMU,sBAAsBJ,MAAMA,IAAIK,oBAAoB,GAAGT;IAE7D,OAAOL,gBAAgBW,mBAAmBE;AAC5C"}
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
import * as React from 'react';
|
|
3
3
|
/**
|
|
4
|
-
* @internal
|
|
5
4
|
* Helper to manage a browser timer.
|
|
6
5
|
* Ensures that the timer isn't set multiple times at once,
|
|
7
6
|
* and is cleaned up when the component is unloaded.
|
|
8
7
|
*
|
|
8
|
+
* @internal
|
|
9
9
|
* @param setTimer - The timer setter function
|
|
10
10
|
* @param cancelTimer - The timer cancel function
|
|
11
11
|
* @returns A pair of [setTimer, cancelTimer] that are stable between renders.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/hooks/useBrowserTimer.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\ntype BrowserTimerSetter =\n | ((fn: () => void, duration?: number, ...args: Record<string, unknown>[]) => number)\n | ((fn: () => void) => number);\n\n/**\n *
|
|
1
|
+
{"version":3,"sources":["../src/hooks/useBrowserTimer.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\ntype BrowserTimerSetter =\n | ((fn: () => void, duration?: number, ...args: Record<string, unknown>[]) => number)\n | ((fn: () => void) => number);\n\n/**\n * Helper to manage a browser timer.\n * Ensures that the timer isn't set multiple times at once,\n * and is cleaned up when the component is unloaded.\n *\n * @internal\n * @param setTimer - The timer setter function\n * @param cancelTimer - The timer cancel function\n * @returns A pair of [setTimer, cancelTimer] that are stable between renders.\n *\n * @example\n * const [setTimer, cancelTimer] = useBrowserTimer(setTimeout, cancelTimeout);\n *\n * setTimer(() => console.log('Hello world!'), 1000);\n * cancelTimer();\n */\nexport function useBrowserTimer(\n setTimer: BrowserTimerSetter,\n cancelTimer: (id: number) => void,\n): [(fn: () => void, delay?: number) => number, () => void] {\n const id = React.useRef<number | undefined>(undefined);\n\n const set = React.useCallback(\n (fn: () => void, delay?: number) => {\n if (id.current !== undefined) {\n cancelTimer(id.current);\n }\n\n id.current = setTimer(fn, delay);\n return id.current;\n },\n [cancelTimer, setTimer],\n );\n\n const cancel = React.useCallback(() => {\n if (id.current !== undefined) {\n cancelTimer(id.current);\n id.current = undefined;\n }\n }, [cancelTimer]);\n\n // Clean up the timeout when the component is unloaded\n React.useEffect(() => cancel, [cancel]);\n\n return [set, cancel] as const;\n}\n"],"names":["React","useBrowserTimer","setTimer","cancelTimer","id","useRef","undefined","set","useCallback","fn","delay","current","cancel","useEffect"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAM/B;;;;;;;;;;;;;;;CAeC,GACD,OAAO,SAASC,gBACdC,QAA4B,EAC5BC,WAAiC;IAEjC,MAAMC,KAAKJ,MAAMK,MAAM,CAAqBC;IAE5C,MAAMC,MAAMP,MAAMQ,WAAW,CAC3B,CAACC,IAAgBC;QACf,IAAIN,GAAGO,OAAO,KAAKL,WAAW;YAC5BH,YAAYC,GAAGO,OAAO;QACxB;QAEAP,GAAGO,OAAO,GAAGT,SAASO,IAAIC;QAC1B,OAAON,GAAGO,OAAO;IACnB,GACA;QAACR;QAAaD;KAAS;IAGzB,MAAMU,SAASZ,MAAMQ,WAAW,CAAC;QAC/B,IAAIJ,GAAGO,OAAO,KAAKL,WAAW;YAC5BH,YAAYC,GAAGO,OAAO;YACtBP,GAAGO,OAAO,GAAGL;QACf;IACF,GAAG;QAACH;KAAY;IAEhB,sDAAsD;IACtDH,MAAMa,SAAS,CAAC,IAAMD,QAAQ;QAACA;KAAO;IAEtC,OAAO;QAACL;QAAKK;KAAO;AACtB"}
|
|
@@ -4,12 +4,11 @@ function isFactoryDispatch(newState) {
|
|
|
4
4
|
return typeof newState === 'function';
|
|
5
5
|
}
|
|
6
6
|
/**
|
|
7
|
-
* @internal
|
|
8
|
-
*
|
|
9
7
|
* A [`useState`](https://reactjs.org/docs/hooks-reference.html#usestate)-like hook
|
|
10
8
|
* to manage a value that could be either `controlled` or `uncontrolled`,
|
|
11
9
|
* such as a checked state or text input string.
|
|
12
10
|
*
|
|
11
|
+
* @internal
|
|
13
12
|
* @see https://react.dev/learn/sharing-state-between-components#controlled-and-uncontrolled-components for more details on `controlled`/`uncontrolled`
|
|
14
13
|
*
|
|
15
14
|
* @returns an array of the current value and an updater (dispatcher) function.
|
|
@@ -18,7 +17,6 @@ function isFactoryDispatch(newState) {
|
|
|
18
17
|
*
|
|
19
18
|
* ❗️❗️ Calls to the dispatcher will only modify the state if the state is `uncontrolled`.
|
|
20
19
|
* Meaning that if a state is `controlled`, calls to the dispatcher do not modify the state.
|
|
21
|
-
*
|
|
22
20
|
*/ export const useControllableState = (options)=>{
|
|
23
21
|
'use no memo';
|
|
24
22
|
if (process.env.NODE_ENV !== 'production') {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/hooks/useControllableState.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\n/**\n * @internal\n */\nexport type UseControllableStateOptions<State> = {\n /**\n * User-provided default state or initializer, for uncontrolled usage.\n */\n defaultState?: State | (() => State);\n /**\n * User-provided controlled state. `undefined` means internal state will be used.\n */\n state: State | undefined;\n /**\n * Used as the initial state if `state` and `defaultState` are both `undefined`.\n * If `undefined` is the correct initial state, pass that here.\n */\n initialState: State;\n};\n\nfunction isFactoryDispatch<State>(newState: React.SetStateAction<State>): newState is (prevState: State) => State {\n return typeof newState === 'function';\n}\n\n/**\n *
|
|
1
|
+
{"version":3,"sources":["../src/hooks/useControllableState.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\n/**\n * @internal\n */\nexport type UseControllableStateOptions<State> = {\n /**\n * User-provided default state or initializer, for uncontrolled usage.\n */\n defaultState?: State | (() => State);\n /**\n * User-provided controlled state. `undefined` means internal state will be used.\n */\n state: State | undefined;\n /**\n * Used as the initial state if `state` and `defaultState` are both `undefined`.\n * If `undefined` is the correct initial state, pass that here.\n */\n initialState: State;\n};\n\nfunction isFactoryDispatch<State>(newState: React.SetStateAction<State>): newState is (prevState: State) => State {\n return typeof newState === 'function';\n}\n\n/**\n * A [`useState`](https://reactjs.org/docs/hooks-reference.html#usestate)-like hook\n * to manage a value that could be either `controlled` or `uncontrolled`,\n * such as a checked state or text input string.\n *\n * @internal\n * @see https://react.dev/learn/sharing-state-between-components#controlled-and-uncontrolled-components for more details on `controlled`/`uncontrolled`\n *\n * @returns an array of the current value and an updater (dispatcher) function.\n * The updater function is referentially stable (won't change during the component's lifecycle).\n * It can take either a new value, or a function which is passed the previous value and returns the new value.\n *\n * ❗️❗️ Calls to the dispatcher will only modify the state if the state is `uncontrolled`.\n * Meaning that if a state is `controlled`, calls to the dispatcher do not modify the state.\n */\nexport const useControllableState = <State>(\n options: UseControllableStateOptions<State>,\n): [State, React.Dispatch<React.SetStateAction<State>>] => {\n 'use no memo';\n\n if (process.env.NODE_ENV !== 'production') {\n if (options.state !== undefined && options.defaultState !== undefined) {\n // eslint-disable-next-line no-console\n console.error(/** #__DE-INDENT__ */ `\n @fluentui/react-utilities [useControllableState]:\n A component must be either controlled or uncontrolled (specify either the state or the defaultState, but not both).\n Decide between using a controlled or uncontrolled component and remove one of this props.\n More info: https://reactjs.org/link/controlled-components\n ${new Error().stack}\n `);\n }\n }\n const [internalState, setInternalState] = React.useState<State>(() => {\n if (options.defaultState === undefined) {\n return options.initialState;\n }\n return isInitializer(options.defaultState) ? options.defaultState() : options.defaultState;\n });\n\n // Heads up!\n // This part is specific for controlled mode and mocks behavior of React dispatcher function.\n\n const stateValueRef = React.useRef<State | undefined>(options.state);\n\n React.useEffect(() => {\n stateValueRef.current = options.state;\n }, [options.state]);\n\n const setControlledState = React.useCallback((newState: React.SetStateAction<State>) => {\n if (isFactoryDispatch(newState)) {\n newState(stateValueRef.current as State);\n }\n }, []);\n\n return useIsControlled(options.state) ? [options.state, setControlledState] : [internalState, setInternalState];\n};\n\nfunction isInitializer<State>(value: State | (() => State)): value is () => State {\n return typeof value === 'function';\n}\n\n/**\n * Helper hook to handle previous comparison of controlled/uncontrolled\n * Prints an error when isControlled value switches between subsequent renders\n * @returns - whether the value is controlled\n */\nconst useIsControlled = <V>(controlledValue: V | undefined): controlledValue is V => {\n 'use no memo';\n\n const [isControlled] = React.useState<boolean>(() => controlledValue !== undefined);\n\n if (process.env.NODE_ENV !== 'production') {\n // We don't want these warnings in production even though it is against native behaviour\n // eslint-disable-next-line react-hooks/rules-of-hooks\n React.useEffect(() => {\n if (isControlled !== (controlledValue !== undefined)) {\n const error = new Error();\n\n const controlWarning = isControlled\n ? 'a controlled value to be uncontrolled'\n : 'an uncontrolled value to be controlled';\n\n const undefinedWarning = isControlled ? 'defined to an undefined' : 'undefined to a defined';\n\n // eslint-disable-next-line no-console\n console.error(/** #__DE-INDENT__ */ `\n @fluentui/react-utilities [useControllableState]:\n A component is changing ${controlWarning}. This is likely caused by the value changing from ${undefinedWarning} value, which should not happen.\n Decide between using a controlled or uncontrolled input element for the lifetime of the component.\n More info: https://reactjs.org/link/controlled-components\n ${error.stack}\n `);\n }\n }, [isControlled, controlledValue]);\n }\n\n return isControlled;\n};\n"],"names":["React","isFactoryDispatch","newState","useControllableState","options","process","env","NODE_ENV","state","undefined","defaultState","console","error","Error","stack","internalState","setInternalState","useState","initialState","isInitializer","stateValueRef","useRef","useEffect","current","setControlledState","useCallback","useIsControlled","value","controlledValue","isControlled","controlWarning","undefinedWarning"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAqB/B,SAASC,kBAAyBC,QAAqC;IACrE,OAAO,OAAOA,aAAa;AAC7B;AAEA;;;;;;;;;;;;;;CAcC,GACD,OAAO,MAAMC,uBAAuB,CAClCC;IAEA;IAEA,IAAIC,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;QACzC,IAAIH,QAAQI,KAAK,KAAKC,aAAaL,QAAQM,YAAY,KAAKD,WAAW;YACrE,sCAAsC;YACtCE,QAAQC,KAAK,CAAuB,CAAC;;;;AAKrC,EAAE,IAAIC,QAAQC,KAAK,EACpB;QACD;IACF;IACA,MAAM,CAACC,eAAeC,iBAAiB,GAAGhB,MAAMiB,QAAQ,CAAQ;QAC9D,IAAIb,QAAQM,YAAY,KAAKD,WAAW;YACtC,OAAOL,QAAQc,YAAY;QAC7B;QACA,OAAOC,cAAcf,QAAQM,YAAY,IAAIN,QAAQM,YAAY,KAAKN,QAAQM,YAAY;IAC5F;IAEA,YAAY;IACZ,6FAA6F;IAE7F,MAAMU,gBAAgBpB,MAAMqB,MAAM,CAAoBjB,QAAQI,KAAK;IAEnER,MAAMsB,SAAS,CAAC;QACdF,cAAcG,OAAO,GAAGnB,QAAQI,KAAK;IACvC,GAAG;QAACJ,QAAQI,KAAK;KAAC;IAElB,MAAMgB,qBAAqBxB,MAAMyB,WAAW,CAAC,CAACvB;QAC5C,IAAID,kBAAkBC,WAAW;YAC/BA,SAASkB,cAAcG,OAAO;QAChC;IACF,GAAG,EAAE;IAEL,OAAOG,gBAAgBtB,QAAQI,KAAK,IAAI;QAACJ,QAAQI,KAAK;QAAEgB;KAAmB,GAAG;QAACT;QAAeC;KAAiB;AACjH,EAAE;AAEF,SAASG,cAAqBQ,KAA4B;IACxD,OAAO,OAAOA,UAAU;AAC1B;AAEA;;;;CAIC,GACD,MAAMD,kBAAkB,CAAIE;IAC1B;IAEA,MAAM,CAACC,aAAa,GAAG7B,MAAMiB,QAAQ,CAAU,IAAMW,oBAAoBnB;IAEzE,IAAIJ,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;QACzC,wFAAwF;QACxF,sDAAsD;QACtDP,MAAMsB,SAAS,CAAC;YACd,IAAIO,iBAAkBD,CAAAA,oBAAoBnB,SAAQ,GAAI;gBACpD,MAAMG,QAAQ,IAAIC;gBAElB,MAAMiB,iBAAiBD,eACnB,0CACA;gBAEJ,MAAME,mBAAmBF,eAAe,4BAA4B;gBAEpE,sCAAsC;gBACtClB,QAAQC,KAAK,CAAuB,CAAC;wBAEX,EAAEkB,eAAe,mDAAmD,EAAEC,iBAAiB;;;AAG/G,EAAEnB,MAAME,KAAK,EACd;YACH;QACF,GAAG;YAACe;YAAcD;SAAgB;IACpC;IAEA,OAAOC;AACT"}
|
|
@@ -2,7 +2,6 @@
|
|
|
2
2
|
import * as React from 'react';
|
|
3
3
|
import { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect';
|
|
4
4
|
/**
|
|
5
|
-
* @internal
|
|
6
5
|
* https://reactjs.org/docs/hooks-faq.html#how-to-read-an-often-changing-value-from-usecallback
|
|
7
6
|
*
|
|
8
7
|
* Modified `useCallback` that can be used when dependencies change too frequently. Can occur when
|
|
@@ -12,6 +11,7 @@ import { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect';
|
|
|
12
11
|
* This should not be used often, but can be a useful re-render optimization since the callback is a ref and
|
|
13
12
|
* will not be invalidated between re-renders
|
|
14
13
|
*
|
|
14
|
+
* @internal
|
|
15
15
|
* @param fn - The callback function that will be used
|
|
16
16
|
*/ export const useEventCallback = (fn)=>{
|
|
17
17
|
const callbackRef = React.useRef(()=>{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/hooks/useEventCallback.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect';\n\n/**\n *
|
|
1
|
+
{"version":3,"sources":["../src/hooks/useEventCallback.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect';\n\n/**\n * https://reactjs.org/docs/hooks-faq.html#how-to-read-an-often-changing-value-from-usecallback\n *\n * Modified `useCallback` that can be used when dependencies change too frequently. Can occur when\n * e.g. user props are dependencies which could change on every render\n * e.g. volatile values (i.e. useState/useDispatch) are dependencies which could change frequently\n *\n * This should not be used often, but can be a useful re-render optimization since the callback is a ref and\n * will not be invalidated between re-renders\n *\n * @internal\n * @param fn - The callback function that will be used\n */\nexport const useEventCallback = <Args extends unknown[], Return>(\n fn: (...args: Args) => Return,\n): ((...args: Args) => Return) => {\n const callbackRef = React.useRef<typeof fn>(() => {\n throw new Error('Cannot call an event handler while rendering');\n });\n\n useIsomorphicLayoutEffect(() => {\n callbackRef.current = fn;\n }, [fn]);\n\n return React.useCallback(\n (...args: Args) => {\n const callback = callbackRef.current;\n return callback(...args);\n },\n [callbackRef],\n );\n};\n"],"names":["React","useIsomorphicLayoutEffect","useEventCallback","fn","callbackRef","useRef","Error","current","useCallback","args","callback"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,yBAAyB,QAAQ,8BAA8B;AAExE;;;;;;;;;;;;CAYC,GACD,OAAO,MAAMC,mBAAmB,CAC9BC;IAEA,MAAMC,cAAcJ,MAAMK,MAAM,CAAY;QAC1C,MAAM,IAAIC,MAAM;IAClB;IAEAL,0BAA0B;QACxBG,YAAYG,OAAO,GAAGJ;IACxB,GAAG;QAACA;KAAG;IAEP,OAAOH,MAAMQ,WAAW,CACtB,CAAC,GAAGC;QACF,MAAMC,WAAWN,YAAYG,OAAO;QACpC,OAAOG,YAAYD;IACrB,GACA;QAACL;KAAY;AAEjB,EAAE"}
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
import * as React from 'react';
|
|
3
3
|
/**
|
|
4
|
-
* @internal
|
|
5
4
|
* Checks if components was mounted the first time.
|
|
6
5
|
* Supports React concurrent/strict mode by using `useEffect`
|
|
7
6
|
* to track the first mount instead of mutating refs during render.
|
|
8
7
|
*
|
|
8
|
+
* @internal
|
|
9
9
|
* @example
|
|
10
10
|
* const isFirstMount = useFirstMount();
|
|
11
11
|
*/ export function useFirstMount() {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/hooks/useFirstMount.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\n/**\n *
|
|
1
|
+
{"version":3,"sources":["../src/hooks/useFirstMount.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\n/**\n * Checks if components was mounted the first time.\n * Supports React concurrent/strict mode by using `useEffect`\n * to track the first mount instead of mutating refs during render.\n *\n * @internal\n * @example\n * const isFirstMount = useFirstMount();\n */\nexport function useFirstMount(): boolean {\n const isFirst = React.useRef(true);\n\n React.useEffect(() => {\n if (isFirst.current) {\n isFirst.current = false;\n }\n }, []);\n\n return isFirst.current;\n}\n"],"names":["React","useFirstMount","isFirst","useRef","useEffect","current"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAE/B;;;;;;;;CAQC,GACD,OAAO,SAASC;IACd,MAAMC,UAAUF,MAAMG,MAAM,CAAC;IAE7BH,MAAMI,SAAS,CAAC;QACd,IAAIF,QAAQG,OAAO,EAAE;YACnBH,QAAQG,OAAO,GAAG;QACpB;IACF,GAAG,EAAE;IAEL,OAAOH,QAAQG,OAAO;AACxB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/hooks/useForceUpdate.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n/**\n *
|
|
1
|
+
{"version":3,"sources":["../src/hooks/useForceUpdate.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n/**\n * Forces a re-render, similar to `forceUpdate` in class components.\n *\n * @internal\n */\nexport function useForceUpdate(): React.DispatchWithoutAction {\n return React.useReducer(x => x + 1, 0)[1];\n}\n"],"names":["React","useForceUpdate","useReducer","x"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B;;;;CAIC,GACD,OAAO,SAASC;IACd,OAAOD,MAAME,UAAU,CAACC,CAAAA,IAAKA,IAAI,GAAG,EAAE,CAAC,EAAE;AAC3C"}
|
|
@@ -4,8 +4,9 @@ import { useEventCallback } from './useEventCallback';
|
|
|
4
4
|
import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
|
|
5
5
|
const DEFAULT_CONTAINS = (parent, child)=>!!(parent === null || parent === void 0 ? void 0 : parent.contains(child));
|
|
6
6
|
/**
|
|
7
|
-
* @internal
|
|
8
7
|
* Utility to perform checks where a click/touch event was made outside a component
|
|
8
|
+
*
|
|
9
|
+
* @internal
|
|
9
10
|
*/ export const useOnClickOutside = (options)=>{
|
|
10
11
|
const { targetDocument } = useFluent();
|
|
11
12
|
const win = targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.defaultView;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/hooks/useOnClickOutside.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useEventCallback } from './useEventCallback';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\n\n/**\n * @internal\n */\nexport type UseOnClickOrScrollOutsideOptions = {\n /**\n * The element to listen for the click event\n */\n element: Document | undefined;\n /**\n * Refs to elements that check if the click is outside\n */\n refs: // eslint-disable-next-line @typescript-eslint/no-deprecated\n React.MutableRefObject<HTMLElement | undefined | null>[];\n\n /**\n * By default uses element.contains, but custom contain function can be provided\n *\n * @param parent - provided parent element\n * @param child - event target element\n */\n contains?(parent: HTMLElement | null, child: HTMLElement): boolean;\n\n /**\n * Disables event listeners\n */\n disabled?: boolean;\n\n /**\n * Disables custom focus event listeners for iframes\n */\n disabledFocusOnIframe?: boolean;\n\n /**\n * Called if the click is outside the element refs\n */\n callback: (ev: MouseEvent | TouchEvent) => void;\n};\n\nconst DEFAULT_CONTAINS: UseOnClickOrScrollOutsideOptions['contains'] = (parent, child) => !!parent?.contains(child);\n\n/**\n * @internal\n * Utility to perform checks where a click/touch event was made outside a component\n */\nexport const useOnClickOutside = (options: UseOnClickOrScrollOutsideOptions): void => {\n const { targetDocument } = useFluent();\n const win = targetDocument?.defaultView;\n const { refs, callback, element, disabled, disabledFocusOnIframe, contains = DEFAULT_CONTAINS } = options;\n const timeoutId = React.useRef<number | undefined>(undefined);\n\n useIFrameFocus({ element, disabled: disabledFocusOnIframe || disabled, callback, refs, contains });\n\n const isMouseDownInsideRef = React.useRef(false);\n const listener = useEventCallback((ev: MouseEvent | TouchEvent) => {\n if (isMouseDownInsideRef.current) {\n isMouseDownInsideRef.current = false;\n return;\n }\n\n const target = ev.composedPath()[0] as HTMLElement;\n const isOutside = refs.every(ref => !contains(ref.current || null, target));\n\n if (isOutside && !disabled) {\n callback(ev);\n }\n });\n\n const handleMouseDown = useEventCallback((ev: MouseEvent) => {\n // Selecting text from inside to outside will rigger click event.\n // In this case click event target is outside but mouse down event target is inside.\n // And this click event should be considered as inside click.\n isMouseDownInsideRef.current = refs.some(ref => contains(ref.current || null, ev.target as HTMLElement));\n });\n\n React.useEffect(() => {\n if (disabled) {\n return;\n }\n\n // Store the current event to avoid triggering handlers immediately\n // Note this depends on a deprecated but extremely well supported quirk of the web platform\n // https://github.com/facebook/react/issues/20074\n let currentEvent = getWindowEvent(win);\n\n const conditionalHandler = (event: MouseEvent | TouchEvent) => {\n // Skip if this event is the same as the one running when we added the handlers\n if (event === currentEvent) {\n currentEvent = undefined;\n return;\n }\n\n listener(event);\n };\n\n // use capture phase because React can update DOM before the event bubbles to the document\n element?.addEventListener('click', conditionalHandler, true);\n element?.addEventListener('touchstart', conditionalHandler, true);\n element?.addEventListener('contextmenu', conditionalHandler, true);\n element?.addEventListener('mousedown', handleMouseDown, true);\n\n // Garbage collect this event after it's no longer useful to avoid memory leaks\n timeoutId.current = win?.setTimeout(() => {\n currentEvent = undefined;\n }, 1);\n\n return () => {\n element?.removeEventListener('click', conditionalHandler, true);\n element?.removeEventListener('touchstart', conditionalHandler, true);\n element?.removeEventListener('contextmenu', conditionalHandler, true);\n element?.removeEventListener('mousedown', handleMouseDown, true);\n\n win?.clearTimeout(timeoutId.current);\n currentEvent = undefined;\n };\n }, [listener, element, disabled, handleMouseDown, win]);\n};\n\nconst getWindowEvent = (target: Node | Window | null | undefined): Event | undefined => {\n if (target) {\n if (typeof (target as Window).window === 'object' && (target as Window).window === target) {\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n return target.event;\n }\n\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n return (target as Node).ownerDocument?.defaultView?.event ?? undefined;\n }\n\n return undefined;\n};\n\nconst FUI_FRAME_EVENT = 'fuiframefocus';\n\ninterface UseIFrameFocusOptions\n extends Pick<UseOnClickOrScrollOutsideOptions, 'disabled' | 'element' | 'callback' | 'contains' | 'refs'> {\n /**\n * Millisecond duration to poll\n */\n pollDuration?: number;\n}\n\n/**\n * Since click events do not propagate past iframes, we use focus to detect if a\n * click has happened inside an iframe, since the only ways of focusing inside an\n * iframe are:\n * - clicking inside\n * - tabbing inside\n *\n * Polls the value of `document.activeElement`. If it is an iframe, then dispatch\n * a custom DOM event. When the custom event is received call the provided callback\n */\nconst useIFrameFocus = (options: UseIFrameFocusOptions) => {\n const {\n disabled,\n element: targetDocument,\n callback,\n contains = DEFAULT_CONTAINS,\n pollDuration = 100,\n refs,\n } = options;\n const timeoutRef = React.useRef<number | undefined>(undefined);\n\n const listener = useEventCallback((e: Event) => {\n const isOutside = refs.every(ref => !contains(ref.current || null, e.target as HTMLElement));\n\n if (isOutside && !disabled) {\n callback(e as MouseEvent);\n }\n });\n\n // Adds listener to the custom iframe focus event\n React.useEffect(() => {\n if (disabled) {\n return;\n }\n\n targetDocument?.addEventListener(FUI_FRAME_EVENT, listener, true);\n\n return () => {\n targetDocument?.removeEventListener(FUI_FRAME_EVENT, listener, true);\n };\n }, [targetDocument, disabled, listener]);\n\n // Starts polling for the active element\n React.useEffect(() => {\n if (disabled) {\n return;\n }\n\n timeoutRef.current = targetDocument?.defaultView?.setInterval(() => {\n const activeElement = targetDocument?.activeElement;\n\n if (activeElement?.tagName === 'IFRAME' || activeElement?.tagName === 'WEBVIEW') {\n const event = new CustomEvent(FUI_FRAME_EVENT, { bubbles: true });\n activeElement.dispatchEvent(event);\n }\n }, pollDuration);\n\n return () => {\n targetDocument?.defaultView?.clearInterval(timeoutRef.current);\n };\n }, [targetDocument, disabled, pollDuration]);\n};\n"],"names":["React","useEventCallback","useFluent_unstable","useFluent","DEFAULT_CONTAINS","parent","child","contains","useOnClickOutside","options","targetDocument","win","defaultView","refs","callback","element","disabled","disabledFocusOnIframe","timeoutId","useRef","undefined","useIFrameFocus","isMouseDownInsideRef","listener","ev","current","target","composedPath","isOutside","every","ref","handleMouseDown","some","useEffect","currentEvent","getWindowEvent","conditionalHandler","event","addEventListener","setTimeout","removeEventListener","clearTimeout","window","ownerDocument","FUI_FRAME_EVENT","pollDuration","timeoutRef","e","setInterval","activeElement","tagName","CustomEvent","bubbles","dispatchEvent","clearInterval"],"mappings":"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"}
|
|
1
|
+
{"version":3,"sources":["../src/hooks/useOnClickOutside.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useEventCallback } from './useEventCallback';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\n\n/**\n * @internal\n */\nexport type UseOnClickOrScrollOutsideOptions = {\n /**\n * The element to listen for the click event\n */\n element: Document | undefined;\n /**\n * Refs to elements that check if the click is outside\n */\n refs: // eslint-disable-next-line @typescript-eslint/no-deprecated\n React.MutableRefObject<HTMLElement | undefined | null>[];\n\n /**\n * By default uses element.contains, but custom contain function can be provided\n *\n * @param parent - provided parent element\n * @param child - event target element\n */\n contains?(parent: HTMLElement | null, child: HTMLElement): boolean;\n\n /**\n * Disables event listeners\n */\n disabled?: boolean;\n\n /**\n * Disables custom focus event listeners for iframes\n */\n disabledFocusOnIframe?: boolean;\n\n /**\n * Called if the click is outside the element refs\n */\n callback: (ev: MouseEvent | TouchEvent) => void;\n};\n\nconst DEFAULT_CONTAINS: UseOnClickOrScrollOutsideOptions['contains'] = (parent, child) => !!parent?.contains(child);\n\n/**\n * Utility to perform checks where a click/touch event was made outside a component\n *\n * @internal\n */\nexport const useOnClickOutside = (options: UseOnClickOrScrollOutsideOptions): void => {\n const { targetDocument } = useFluent();\n const win = targetDocument?.defaultView;\n const { refs, callback, element, disabled, disabledFocusOnIframe, contains = DEFAULT_CONTAINS } = options;\n const timeoutId = React.useRef<number | undefined>(undefined);\n\n useIFrameFocus({ element, disabled: disabledFocusOnIframe || disabled, callback, refs, contains });\n\n const isMouseDownInsideRef = React.useRef(false);\n const listener = useEventCallback((ev: MouseEvent | TouchEvent) => {\n if (isMouseDownInsideRef.current) {\n isMouseDownInsideRef.current = false;\n return;\n }\n\n const target = ev.composedPath()[0] as HTMLElement;\n const isOutside = refs.every(ref => !contains(ref.current || null, target));\n\n if (isOutside && !disabled) {\n callback(ev);\n }\n });\n\n const handleMouseDown = useEventCallback((ev: MouseEvent) => {\n // Selecting text from inside to outside will rigger click event.\n // In this case click event target is outside but mouse down event target is inside.\n // And this click event should be considered as inside click.\n isMouseDownInsideRef.current = refs.some(ref => contains(ref.current || null, ev.target as HTMLElement));\n });\n\n React.useEffect(() => {\n if (disabled) {\n return;\n }\n\n // Store the current event to avoid triggering handlers immediately\n // Note this depends on a deprecated but extremely well supported quirk of the web platform\n // https://github.com/facebook/react/issues/20074\n let currentEvent = getWindowEvent(win);\n\n const conditionalHandler = (event: MouseEvent | TouchEvent) => {\n // Skip if this event is the same as the one running when we added the handlers\n if (event === currentEvent) {\n currentEvent = undefined;\n return;\n }\n\n listener(event);\n };\n\n // use capture phase because React can update DOM before the event bubbles to the document\n element?.addEventListener('click', conditionalHandler, true);\n element?.addEventListener('touchstart', conditionalHandler, true);\n element?.addEventListener('contextmenu', conditionalHandler, true);\n element?.addEventListener('mousedown', handleMouseDown, true);\n\n // Garbage collect this event after it's no longer useful to avoid memory leaks\n timeoutId.current = win?.setTimeout(() => {\n currentEvent = undefined;\n }, 1);\n\n return () => {\n element?.removeEventListener('click', conditionalHandler, true);\n element?.removeEventListener('touchstart', conditionalHandler, true);\n element?.removeEventListener('contextmenu', conditionalHandler, true);\n element?.removeEventListener('mousedown', handleMouseDown, true);\n\n win?.clearTimeout(timeoutId.current);\n currentEvent = undefined;\n };\n }, [listener, element, disabled, handleMouseDown, win]);\n};\n\nconst getWindowEvent = (target: Node | Window | null | undefined): Event | undefined => {\n if (target) {\n if (typeof (target as Window).window === 'object' && (target as Window).window === target) {\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n return target.event;\n }\n\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n return (target as Node).ownerDocument?.defaultView?.event ?? undefined;\n }\n\n return undefined;\n};\n\nconst FUI_FRAME_EVENT = 'fuiframefocus';\n\ninterface UseIFrameFocusOptions\n extends Pick<UseOnClickOrScrollOutsideOptions, 'disabled' | 'element' | 'callback' | 'contains' | 'refs'> {\n /**\n * Millisecond duration to poll\n */\n pollDuration?: number;\n}\n\n/**\n * Since click events do not propagate past iframes, we use focus to detect if a\n * click has happened inside an iframe, since the only ways of focusing inside an\n * iframe are:\n * - clicking inside\n * - tabbing inside\n *\n * Polls the value of `document.activeElement`. If it is an iframe, then dispatch\n * a custom DOM event. When the custom event is received call the provided callback\n */\nconst useIFrameFocus = (options: UseIFrameFocusOptions) => {\n const {\n disabled,\n element: targetDocument,\n callback,\n contains = DEFAULT_CONTAINS,\n pollDuration = 100,\n refs,\n } = options;\n const timeoutRef = React.useRef<number | undefined>(undefined);\n\n const listener = useEventCallback((e: Event) => {\n const isOutside = refs.every(ref => !contains(ref.current || null, e.target as HTMLElement));\n\n if (isOutside && !disabled) {\n callback(e as MouseEvent);\n }\n });\n\n // Adds listener to the custom iframe focus event\n React.useEffect(() => {\n if (disabled) {\n return;\n }\n\n targetDocument?.addEventListener(FUI_FRAME_EVENT, listener, true);\n\n return () => {\n targetDocument?.removeEventListener(FUI_FRAME_EVENT, listener, true);\n };\n }, [targetDocument, disabled, listener]);\n\n // Starts polling for the active element\n React.useEffect(() => {\n if (disabled) {\n return;\n }\n\n timeoutRef.current = targetDocument?.defaultView?.setInterval(() => {\n const activeElement = targetDocument?.activeElement;\n\n if (activeElement?.tagName === 'IFRAME' || activeElement?.tagName === 'WEBVIEW') {\n const event = new CustomEvent(FUI_FRAME_EVENT, { bubbles: true });\n activeElement.dispatchEvent(event);\n }\n }, pollDuration);\n\n return () => {\n targetDocument?.defaultView?.clearInterval(timeoutRef.current);\n };\n }, [targetDocument, disabled, pollDuration]);\n};\n"],"names":["React","useEventCallback","useFluent_unstable","useFluent","DEFAULT_CONTAINS","parent","child","contains","useOnClickOutside","options","targetDocument","win","defaultView","refs","callback","element","disabled","disabledFocusOnIframe","timeoutId","useRef","undefined","useIFrameFocus","isMouseDownInsideRef","listener","ev","current","target","composedPath","isOutside","every","ref","handleMouseDown","some","useEffect","currentEvent","getWindowEvent","conditionalHandler","event","addEventListener","setTimeout","removeEventListener","clearTimeout","window","ownerDocument","FUI_FRAME_EVENT","pollDuration","timeoutRef","e","setInterval","activeElement","tagName","CustomEvent","bubbles","dispatchEvent","clearInterval"],"mappings":"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"}
|
|
@@ -2,8 +2,9 @@
|
|
|
2
2
|
import * as React from 'react';
|
|
3
3
|
import { useEventCallback } from './useEventCallback';
|
|
4
4
|
/**
|
|
5
|
-
* @internal
|
|
6
5
|
* Utility to perform checks where a click/touch event was made outside a component
|
|
6
|
+
*
|
|
7
|
+
* @internal
|
|
7
8
|
*/ export const useOnScrollOutside = (options)=>{
|
|
8
9
|
const { refs, callback, element, disabled, contains: containsProp } = options;
|
|
9
10
|
const listener = useEventCallback((ev)=>{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/hooks/useOnScrollOutside.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useEventCallback } from './useEventCallback';\nimport type { UseOnClickOrScrollOutsideOptions } from './useOnClickOutside';\n\n/**\n *
|
|
1
|
+
{"version":3,"sources":["../src/hooks/useOnScrollOutside.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useEventCallback } from './useEventCallback';\nimport type { UseOnClickOrScrollOutsideOptions } from './useOnClickOutside';\n\n/**\n * Utility to perform checks where a click/touch event was made outside a component\n *\n * @internal\n */\nexport const useOnScrollOutside = (options: UseOnClickOrScrollOutsideOptions): void => {\n const { refs, callback, element, disabled, contains: containsProp } = options;\n\n const listener = useEventCallback((ev: MouseEvent | TouchEvent) => {\n const contains: UseOnClickOrScrollOutsideOptions['contains'] =\n containsProp || ((parent, child) => !!parent?.contains(child));\n\n const target = ev.composedPath()[0] as HTMLElement;\n const isOutside = refs.every(ref => !contains(ref.current || null, target));\n\n if (isOutside && !disabled) {\n callback(ev);\n }\n });\n\n React.useEffect(() => {\n if (disabled) {\n return;\n }\n\n element?.addEventListener('wheel', listener);\n element?.addEventListener('touchmove', listener);\n\n return () => {\n element?.removeEventListener('wheel', listener);\n element?.removeEventListener('touchmove', listener);\n };\n }, [listener, element, disabled]);\n};\n"],"names":["React","useEventCallback","useOnScrollOutside","options","refs","callback","element","disabled","contains","containsProp","listener","ev","parent","child","target","composedPath","isOutside","every","ref","current","useEffect","addEventListener","removeEventListener"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,gBAAgB,QAAQ,qBAAqB;AAGtD;;;;CAIC,GACD,OAAO,MAAMC,qBAAqB,CAACC;IACjC,MAAM,EAAEC,IAAI,EAAEC,QAAQ,EAAEC,OAAO,EAAEC,QAAQ,EAAEC,UAAUC,YAAY,EAAE,GAAGN;IAEtE,MAAMO,WAAWT,iBAAiB,CAACU;QACjC,MAAMH,WACJC,gBAAiB,CAAA,CAACG,QAAQC,QAAU,CAAC,EAACD,mBAAAA,6BAAAA,OAAQJ,QAAQ,CAACK,OAAK;QAE9D,MAAMC,SAASH,GAAGI,YAAY,EAAE,CAAC,EAAE;QACnC,MAAMC,YAAYZ,KAAKa,KAAK,CAACC,CAAAA,MAAO,CAACV,SAASU,IAAIC,OAAO,IAAI,MAAML;QAEnE,IAAIE,aAAa,CAACT,UAAU;YAC1BF,SAASM;QACX;IACF;IAEAX,MAAMoB,SAAS,CAAC;QACd,IAAIb,UAAU;YACZ;QACF;QAEAD,oBAAAA,8BAAAA,QAASe,gBAAgB,CAAC,SAASX;QACnCJ,oBAAAA,8BAAAA,QAASe,gBAAgB,CAAC,aAAaX;QAEvC,OAAO;YACLJ,oBAAAA,8BAAAA,QAASgB,mBAAmB,CAAC,SAASZ;YACtCJ,oBAAAA,8BAAAA,QAASgB,mBAAmB,CAAC,aAAaZ;QAC5C;IACF,GAAG;QAACA;QAAUJ;QAASC;KAAS;AAClC,EAAE"}
|
package/lib/hooks/useTimeout.js
CHANGED
|
@@ -4,11 +4,11 @@ import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts
|
|
|
4
4
|
const setTimeoutNoop = (_callback)=>-1;
|
|
5
5
|
const clearTimeoutNoop = (_handle)=>undefined;
|
|
6
6
|
/**
|
|
7
|
-
* @internal
|
|
8
7
|
* Helper to manage a browser timeout.
|
|
9
8
|
* Ensures that the timeout isn't set multiple times at once and is cleaned up
|
|
10
9
|
* when the component is unloaded.
|
|
11
10
|
*
|
|
11
|
+
* @internal
|
|
12
12
|
* @returns A pair of [setTimeout, clearTimeout] that are stable between renders.
|
|
13
13
|
*/ export function useTimeout() {
|
|
14
14
|
const { targetDocument } = useFluent();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/hooks/useTimeout.ts"],"sourcesContent":["'use client';\n\nimport { useBrowserTimer } from './useBrowserTimer';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\n\nconst setTimeoutNoop = (_callback: Function) => -1;\nconst clearTimeoutNoop = (_handle: number) => undefined;\n\n/**\n *
|
|
1
|
+
{"version":3,"sources":["../src/hooks/useTimeout.ts"],"sourcesContent":["'use client';\n\nimport { useBrowserTimer } from './useBrowserTimer';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\n\nconst setTimeoutNoop = (_callback: Function) => -1;\nconst clearTimeoutNoop = (_handle: number) => undefined;\n\n/**\n * Helper to manage a browser timeout.\n * Ensures that the timeout isn't set multiple times at once and is cleaned up\n * when the component is unloaded.\n *\n * @internal\n * @returns A pair of [setTimeout, clearTimeout] that are stable between renders.\n */\nexport function useTimeout(): readonly [(fn: () => void, delay?: number) => number, () => void] {\n const { targetDocument } = useFluent();\n const win = targetDocument?.defaultView;\n\n const setTimerFn = win ? win.setTimeout : setTimeoutNoop;\n const clearTimerFn = win ? win.clearTimeout : clearTimeoutNoop;\n\n return useBrowserTimer(setTimerFn, clearTimerFn);\n}\n"],"names":["useBrowserTimer","useFluent_unstable","useFluent","setTimeoutNoop","_callback","clearTimeoutNoop","_handle","undefined","useTimeout","targetDocument","win","defaultView","setTimerFn","setTimeout","clearTimerFn","clearTimeout"],"mappings":"AAAA;AAEA,SAASA,eAAe,QAAQ,oBAAoB;AACpD,SAASC,sBAAsBC,SAAS,QAAQ,kCAAkC;AAElF,MAAMC,iBAAiB,CAACC,YAAwB,CAAC;AACjD,MAAMC,mBAAmB,CAACC,UAAoBC;AAE9C;;;;;;;CAOC,GACD,OAAO,SAASC;IACd,MAAM,EAAEC,cAAc,EAAE,GAAGP;IAC3B,MAAMQ,MAAMD,2BAAAA,qCAAAA,eAAgBE,WAAW;IAEvC,MAAMC,aAAaF,MAAMA,IAAIG,UAAU,GAAGV;IAC1C,MAAMW,eAAeJ,MAAMA,IAAIK,YAAY,GAAGV;IAE9C,OAAOL,gBAAgBY,YAAYE;AACrC"}
|
package/lib/selection/types.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
|
|
1
|
+
export { };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/selection/types.ts"],"sourcesContent":["import * as React from 'react';\n\nexport type SelectionMode = 'single' | 'multiselect';\n\nexport interface SelectionMethods {\n toggleItem(event: React.SyntheticEvent, id: SelectionItemId): void;\n selectItem(event: React.SyntheticEvent, id: SelectionItemId): void;\n deselectItem(event: React.SyntheticEvent, id: SelectionItemId): void;\n clearItems(event: React.SyntheticEvent): void;\n isSelected(id: SelectionItemId): boolean;\n toggleAllItems(event: React.SyntheticEvent, itemIds: SelectionItemId[]): void;\n}\n\nexport type SelectionItemId = string | number;\n\nexport type OnSelectionChangeCallback = (event: React.SyntheticEvent, selectedItems: Set<SelectionItemId>) => void;\n\nexport type OnSelectionChangeData = {\n selectedItems: Set<SelectionItemId>;\n};\n\nexport type SelectionHookParams = {\n selectionMode: SelectionMode;\n /**\n * Used in uncontrolled mode to set initial selected items on mount\n */\n defaultSelectedItems?: Iterable<SelectionItemId>;\n /**\n * Used to control selected items\n */\n selectedItems?: Iterable<SelectionItemId>;\n /**\n * Called when selection changes\n */\n onSelectionChange?(event: React.SyntheticEvent, data: OnSelectionChangeData): void;\n};\n"],"names":[
|
|
1
|
+
{"version":3,"sources":["../src/selection/types.ts"],"sourcesContent":["import type * as React from 'react';\n\nexport type SelectionMode = 'single' | 'multiselect';\n\nexport interface SelectionMethods {\n toggleItem(event: React.SyntheticEvent, id: SelectionItemId): void;\n selectItem(event: React.SyntheticEvent, id: SelectionItemId): void;\n deselectItem(event: React.SyntheticEvent, id: SelectionItemId): void;\n clearItems(event: React.SyntheticEvent): void;\n isSelected(id: SelectionItemId): boolean;\n toggleAllItems(event: React.SyntheticEvent, itemIds: SelectionItemId[]): void;\n}\n\nexport type SelectionItemId = string | number;\n\nexport type OnSelectionChangeCallback = (event: React.SyntheticEvent, selectedItems: Set<SelectionItemId>) => void;\n\nexport type OnSelectionChangeData = {\n selectedItems: Set<SelectionItemId>;\n};\n\nexport type SelectionHookParams = {\n selectionMode: SelectionMode;\n /**\n * Used in uncontrolled mode to set initial selected items on mount\n */\n defaultSelectedItems?: Iterable<SelectionItemId>;\n /**\n * Used to control selected items\n */\n selectedItems?: Iterable<SelectionItemId>;\n /**\n * Called when selection changes\n */\n onSelectionChange?(event: React.SyntheticEvent, data: OnSelectionChangeData): void;\n};\n"],"names":[],"mappings":"AAqBA,WAcE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/selection/useSelection.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { SelectionHookParams, SelectionItemId, SelectionMethods } from './types';\nimport { useControllableState } from '../hooks/useControllableState';\nimport { createSetFromIterable } from '../utils/createSetFromIterable';\n\nfunction useSelectionState(params: Omit<SelectionHookParams, 'selectionMode'>) {\n const [selected, setSelected] = useControllableState<Set<SelectionItemId>>({\n initialState: new Set(),\n defaultState: React.useMemo(\n () => params.defaultSelectedItems && createSetFromIterable(params.defaultSelectedItems),\n [params.defaultSelectedItems],\n ),\n state: React.useMemo(\n () => params.selectedItems && createSetFromIterable(params.selectedItems),\n [params.selectedItems],\n ),\n });\n const changeSelection = (event: React.SyntheticEvent, nextSelectedItems: Set<SelectionItemId>) => {\n params.onSelectionChange?.(event, { selectedItems: nextSelectedItems });\n setSelected(nextSelectedItems);\n };\n return [selected, changeSelection] as const;\n}\n\nfunction useSingleSelection(params: Omit<SelectionHookParams, 'selectionMode'>) {\n const [selected, changeSelection] = useSelectionState(params);\n const methods: SelectionMethods = {\n deselectItem: event => changeSelection(event, new Set()),\n selectItem: (event, itemId) => changeSelection(event, new Set([itemId])),\n toggleAllItems: () => {\n if (process.env.NODE_ENV !== 'production') {\n throw new Error('[react-utilities]: `toggleAllItems` should not be used in single selection mode');\n }\n },\n toggleItem: (event, itemId) => changeSelection(event, new Set([itemId])),\n clearItems: event => changeSelection(event, new Set()),\n isSelected: itemId => selected.has(itemId) ?? false,\n };\n return [selected, methods] as const;\n}\n\nfunction useMultipleSelection(params: Omit<SelectionHookParams, 'selectionMode'>) {\n const [selected, changeSelection] = useSelectionState(params);\n const methods: SelectionMethods = {\n toggleItem: (event, itemId) => {\n const nextSelectedItems = new Set(selected);\n if (selected.has(itemId)) {\n nextSelectedItems.delete(itemId);\n } else {\n nextSelectedItems.add(itemId);\n }\n changeSelection(event, nextSelectedItems);\n },\n selectItem: (event, itemId) => {\n const nextSelectedItems = new Set(selected);\n nextSelectedItems.add(itemId);\n changeSelection(event, nextSelectedItems);\n },\n deselectItem: (event, itemId) => {\n const nextSelectedItems = new Set(selected);\n nextSelectedItems.delete(itemId);\n changeSelection(event, nextSelectedItems);\n },\n clearItems: event => {\n changeSelection(event, new Set());\n },\n isSelected: itemId => selected.has(itemId),\n toggleAllItems: (event, itemIds) => {\n const allItemsSelected = itemIds.every(itemId => selected.has(itemId));\n const nextSelectedItems = new Set(selected);\n if (allItemsSelected) {\n nextSelectedItems.clear();\n } else {\n itemIds.forEach(itemId => nextSelectedItems.add(itemId));\n }\n changeSelection(event, nextSelectedItems);\n },\n };\n return [selected, methods] as const;\n}\n\nexport function useSelection(params: SelectionHookParams): readonly [Set<SelectionItemId>, SelectionMethods] {\n 'use no memo';\n\n if (params.selectionMode === 'multiselect') {\n // selectionMode is a static value, so we can safely ignore rules-of-hooks\n // eslint-disable-next-line react-hooks/rules-of-hooks\n return useMultipleSelection(params);\n }\n // selectionMode is a static value, so we can safely ignore rules-of-hooks\n // eslint-disable-next-line react-hooks/rules-of-hooks\n return useSingleSelection(params);\n}\n"],"names":["React","useControllableState","createSetFromIterable","useSelectionState","params","selected","setSelected","initialState","Set","defaultState","useMemo","defaultSelectedItems","state","selectedItems","changeSelection","event","nextSelectedItems","onSelectionChange","useSingleSelection","methods","deselectItem","selectItem","itemId","toggleAllItems","process","env","NODE_ENV","Error","toggleItem","clearItems","isSelected","has","useMultipleSelection","delete","add","itemIds","allItemsSelected","every","clear","forEach","useSelection","selectionMode"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,oBAAoB,QAAQ,gCAAgC;AACrE,SAASC,qBAAqB,QAAQ,iCAAiC;AAEvE,SAASC,kBAAkBC,MAAkD;IAC3E,MAAM,CAACC,UAAUC,YAAY,GAAGL,qBAA2C;QACzEM,cAAc,IAAIC;QAClBC,cAAcT,MAAMU,OAAO,CACzB,IAAMN,OAAOO,oBAAoB,IAAIT,sBAAsBE,OAAOO,oBAAoB,GACtF;YAACP,OAAOO,oBAAoB;SAAC;QAE/BC,OAAOZ,MAAMU,OAAO,CAClB,IAAMN,OAAOS,aAAa,IAAIX,sBAAsBE,OAAOS,aAAa,GACxE;YAACT,OAAOS,aAAa;SAAC;IAE1B;IACA,MAAMC,kBAAkB,CAACC,OAA6BC;YACpDZ;SAAAA,4BAAAA,OAAOa,iBAAiB,cAAxBb,gDAAAA,+BAAAA,QAA2BW,OAAO;YAAEF,eAAeG;QAAkB;QACrEV,YAAYU;IACd;IACA,OAAO;QAACX;QAAUS;KAAgB;AACpC;AAEA,SAASI,mBAAmBd,MAAkD;IAC5E,MAAM,CAACC,UAAUS,gBAAgB,GAAGX,kBAAkBC;IACtD,MAAMe,UAA4B;QAChCC,cAAcL,CAAAA,QAASD,gBAAgBC,OAAO,IAAIP;QAClDa,YAAY,CAACN,OAAOO,SAAWR,gBAAgBC,OAAO,IAAIP,IAAI;gBAACc;aAAO;QACtEC,gBAAgB;YACd,IAAIC,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;gBACzC,MAAM,IAAIC,MAAM;YAClB;QACF;QACAC,YAAY,CAACb,OAAOO,SAAWR,gBAAgBC,OAAO,IAAIP,IAAI;gBAACc;aAAO;QACtEO,YAAYd,CAAAA,QAASD,gBAAgBC,OAAO,IAAIP;QAChDsB,YAAYR,CAAAA;gBAAUjB;mBAAAA,CAAAA,gBAAAA,SAAS0B,GAAG,CAACT,qBAAbjB,2BAAAA,gBAAwB;;IAChD;IACA,OAAO;QAACA;QAAUc;KAAQ;AAC5B;AAEA,SAASa,qBAAqB5B,MAAkD;IAC9E,MAAM,CAACC,UAAUS,gBAAgB,GAAGX,kBAAkBC;IACtD,MAAMe,UAA4B;QAChCS,YAAY,CAACb,OAAOO;YAClB,MAAMN,oBAAoB,IAAIR,IAAIH;YAClC,IAAIA,SAAS0B,GAAG,CAACT,SAAS;gBACxBN,kBAAkBiB,MAAM,CAACX;YAC3B,OAAO;gBACLN,kBAAkBkB,GAAG,CAACZ;YACxB;YACAR,gBAAgBC,OAAOC;QACzB;QACAK,YAAY,CAACN,OAAOO;YAClB,MAAMN,oBAAoB,IAAIR,IAAIH;YAClCW,kBAAkBkB,GAAG,CAACZ;YACtBR,gBAAgBC,OAAOC;QACzB;QACAI,cAAc,CAACL,OAAOO;YACpB,MAAMN,oBAAoB,IAAIR,IAAIH;YAClCW,kBAAkBiB,MAAM,CAACX;YACzBR,gBAAgBC,OAAOC;QACzB;QACAa,YAAYd,CAAAA;YACVD,gBAAgBC,OAAO,IAAIP;QAC7B;QACAsB,YAAYR,CAAAA,SAAUjB,SAAS0B,GAAG,CAACT;QACnCC,gBAAgB,CAACR,OAAOoB;YACtB,MAAMC,mBAAmBD,QAAQE,KAAK,CAACf,CAAAA,SAAUjB,SAAS0B,GAAG,CAACT;YAC9D,MAAMN,oBAAoB,IAAIR,IAAIH;YAClC,IAAI+B,kBAAkB;gBACpBpB,kBAAkBsB,KAAK;YACzB,OAAO;gBACLH,QAAQI,OAAO,CAACjB,CAAAA,SAAUN,kBAAkBkB,GAAG,CAACZ;YAClD;YACAR,gBAAgBC,OAAOC;QACzB;IACF;IACA,OAAO;QAACX;QAAUc;KAAQ;AAC5B;AAEA,OAAO,SAASqB,aAAapC,MAA2B;IACtD;IAEA,IAAIA,OAAOqC,aAAa,KAAK,eAAe;QAC1C,0EAA0E;QAC1E,sDAAsD;QACtD,OAAOT,qBAAqB5B;IAC9B;IACA,0EAA0E;IAC1E,sDAAsD;IACtD,OAAOc,mBAAmBd;AAC5B"}
|
|
1
|
+
{"version":3,"sources":["../src/selection/useSelection.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { SelectionHookParams, SelectionItemId, SelectionMethods } from './types';\nimport { useControllableState } from '../hooks/useControllableState';\nimport { createSetFromIterable } from '../utils/createSetFromIterable';\n\nfunction useSelectionState(params: Omit<SelectionHookParams, 'selectionMode'>) {\n const [selected, setSelected] = useControllableState<Set<SelectionItemId>>({\n initialState: new Set(),\n defaultState: React.useMemo(\n () => params.defaultSelectedItems && createSetFromIterable(params.defaultSelectedItems),\n [params.defaultSelectedItems],\n ),\n state: React.useMemo(\n () => params.selectedItems && createSetFromIterable(params.selectedItems),\n [params.selectedItems],\n ),\n });\n const changeSelection = (event: React.SyntheticEvent, nextSelectedItems: Set<SelectionItemId>) => {\n params.onSelectionChange?.(event, { selectedItems: nextSelectedItems });\n setSelected(nextSelectedItems);\n };\n return [selected, changeSelection] as const;\n}\n\nfunction useSingleSelection(params: Omit<SelectionHookParams, 'selectionMode'>) {\n const [selected, changeSelection] = useSelectionState(params);\n const methods: SelectionMethods = {\n deselectItem: event => changeSelection(event, new Set()),\n selectItem: (event, itemId) => changeSelection(event, new Set([itemId])),\n toggleAllItems: () => {\n if (process.env.NODE_ENV !== 'production') {\n throw new Error('[react-utilities]: `toggleAllItems` should not be used in single selection mode');\n }\n },\n toggleItem: (event, itemId) => changeSelection(event, new Set([itemId])),\n clearItems: event => changeSelection(event, new Set()),\n isSelected: itemId => selected.has(itemId) ?? false,\n };\n return [selected, methods] as const;\n}\n\nfunction useMultipleSelection(params: Omit<SelectionHookParams, 'selectionMode'>) {\n const [selected, changeSelection] = useSelectionState(params);\n const methods: SelectionMethods = {\n toggleItem: (event, itemId) => {\n const nextSelectedItems = new Set(selected);\n if (selected.has(itemId)) {\n nextSelectedItems.delete(itemId);\n } else {\n nextSelectedItems.add(itemId);\n }\n changeSelection(event, nextSelectedItems);\n },\n selectItem: (event, itemId) => {\n const nextSelectedItems = new Set(selected);\n nextSelectedItems.add(itemId);\n changeSelection(event, nextSelectedItems);\n },\n deselectItem: (event, itemId) => {\n const nextSelectedItems = new Set(selected);\n nextSelectedItems.delete(itemId);\n changeSelection(event, nextSelectedItems);\n },\n clearItems: event => {\n changeSelection(event, new Set());\n },\n isSelected: itemId => selected.has(itemId),\n toggleAllItems: (event, itemIds) => {\n const allItemsSelected = itemIds.every(itemId => selected.has(itemId));\n const nextSelectedItems = new Set(selected);\n if (allItemsSelected) {\n nextSelectedItems.clear();\n } else {\n itemIds.forEach(itemId => nextSelectedItems.add(itemId));\n }\n changeSelection(event, nextSelectedItems);\n },\n };\n return [selected, methods] as const;\n}\n\nexport function useSelection(params: SelectionHookParams): readonly [Set<SelectionItemId>, SelectionMethods] {\n 'use no memo';\n\n if (params.selectionMode === 'multiselect') {\n // selectionMode is a static value, so we can safely ignore rules-of-hooks\n // eslint-disable-next-line react-hooks/rules-of-hooks\n return useMultipleSelection(params);\n }\n // selectionMode is a static value, so we can safely ignore rules-of-hooks\n // eslint-disable-next-line react-hooks/rules-of-hooks\n return useSingleSelection(params);\n}\n"],"names":["React","useControllableState","createSetFromIterable","useSelectionState","params","selected","setSelected","initialState","Set","defaultState","useMemo","defaultSelectedItems","state","selectedItems","changeSelection","event","nextSelectedItems","onSelectionChange","useSingleSelection","methods","deselectItem","selectItem","itemId","toggleAllItems","process","env","NODE_ENV","Error","toggleItem","clearItems","isSelected","has","useMultipleSelection","delete","add","itemIds","allItemsSelected","every","clear","forEach","useSelection","selectionMode"],"mappings":"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"}
|
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { isFluentTrigger } from './isFluentTrigger';
|
|
3
3
|
/**
|
|
4
|
-
* @internal
|
|
5
4
|
* resolve the trigger props to the children, either by calling the render function, or cloning with the new props.
|
|
5
|
+
*
|
|
6
|
+
* @internal
|
|
6
7
|
*/ export function applyTriggerPropsToChildren(children, triggerChildProps) {
|
|
7
8
|
if (typeof children === 'function') {
|
|
8
9
|
return children(triggerChildProps);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/trigger/applyTriggerPropsToChildren.ts"],"sourcesContent":["import * as React from 'react';\nimport { isFluentTrigger } from './isFluentTrigger';\nimport type { TriggerProps } from './types';\n\n/**\n *
|
|
1
|
+
{"version":3,"sources":["../src/trigger/applyTriggerPropsToChildren.ts"],"sourcesContent":["import * as React from 'react';\nimport { isFluentTrigger } from './isFluentTrigger';\nimport type { TriggerProps } from './types';\n\n/**\n * resolve the trigger props to the children, either by calling the render function, or cloning with the new props.\n *\n * @internal\n */\nexport function applyTriggerPropsToChildren<TriggerChildProps>(\n children: TriggerProps<TriggerChildProps>['children'],\n triggerChildProps: TriggerChildProps,\n): React.ReactElement | null {\n if (typeof children === 'function') {\n return children(triggerChildProps);\n } else if (children) {\n return cloneTriggerTree(children, triggerChildProps);\n }\n\n // Components in React should return either JSX elements or \"null\", otherwise React will throw:\n // Nothing was returned from render.\n // This usually means a return statement is missing. Or, to render nothing, return null.\n return children || null;\n}\n\n/**\n * Clones a React element tree, and applies the given props to the first grandchild that is not\n * a FluentTriggerComponent or React Fragment (the same element returned by {@link getTriggerChild}).\n */\nfunction cloneTriggerTree<TriggerChildProps>(\n child: TriggerProps['children'],\n triggerProps: TriggerChildProps,\n): React.ReactElement {\n if (!React.isValidElement(child) || child.type === React.Fragment) {\n throw new Error(\n 'A trigger element must be a single element for this component. ' +\n \"Please ensure that you're not using React Fragments.\",\n );\n }\n\n if (isFluentTrigger(child)) {\n const grandchild = cloneTriggerTree(child.props.children, triggerProps);\n return React.cloneElement(child, undefined, grandchild);\n } else {\n return React.cloneElement(child, triggerProps as TriggerChildProps & React.Attributes);\n }\n}\n"],"names":["React","isFluentTrigger","applyTriggerPropsToChildren","children","triggerChildProps","cloneTriggerTree","child","triggerProps","isValidElement","type","Fragment","Error","grandchild","props","cloneElement","undefined"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,eAAe,QAAQ,oBAAoB;AAGpD;;;;CAIC,GACD,OAAO,SAASC,4BACdC,QAAqD,EACrDC,iBAAoC;IAEpC,IAAI,OAAOD,aAAa,YAAY;QAClC,OAAOA,SAASC;IAClB,OAAO,IAAID,UAAU;QACnB,OAAOE,iBAAiBF,UAAUC;IACpC;IAEA,+FAA+F;IAC/F,sCAAsC;IACtC,0FAA0F;IAC1F,OAAOD,YAAY;AACrB;AAEA;;;CAGC,GACD,SAASE,iBACPC,KAA+B,EAC/BC,YAA+B;IAE/B,IAAI,CAACP,MAAMQ,cAAc,CAACF,UAAUA,MAAMG,IAAI,KAAKT,MAAMU,QAAQ,EAAE;QACjE,MAAM,IAAIC,MACR,oEACE;IAEN;IAEA,IAAIV,gBAAgBK,QAAQ;QAC1B,MAAMM,aAAaP,iBAAiBC,MAAMO,KAAK,CAACV,QAAQ,EAAEI;QAC1D,OAAOP,MAAMc,YAAY,CAACR,OAAOS,WAAWH;IAC9C,OAAO;QACL,OAAOZ,MAAMc,YAAY,CAACR,OAAOC;IACnC;AACF"}
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { isFluentTrigger } from './isFluentTrigger';
|
|
3
3
|
/**
|
|
4
|
-
* @internal
|
|
5
4
|
* Gets the trigger element of a FluentTriggerComponent (such as Tooltip or MenuTrigger).
|
|
6
5
|
*
|
|
7
6
|
* In the case where the immediate child is itself a FluentTriggerComponent and/or React Fragment,
|
|
@@ -21,6 +20,8 @@ import { isFluentTrigger } from './isFluentTrigger';
|
|
|
21
20
|
*
|
|
22
21
|
* In the case where the immediate child is not a valid element,
|
|
23
22
|
* null is returned
|
|
23
|
+
*
|
|
24
|
+
* @internal
|
|
24
25
|
*/ export function getTriggerChild(children) {
|
|
25
26
|
if (!React.isValidElement(children)) {
|
|
26
27
|
return null;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/trigger/getTriggerChild.ts"],"sourcesContent":["import * as React from 'react';\nimport { isFluentTrigger } from './isFluentTrigger';\nimport type { TriggerProps } from './types';\n\n/**\n *
|
|
1
|
+
{"version":3,"sources":["../src/trigger/getTriggerChild.ts"],"sourcesContent":["import * as React from 'react';\nimport { isFluentTrigger } from './isFluentTrigger';\nimport type { TriggerProps } from './types';\n\n/**\n * Gets the trigger element of a FluentTriggerComponent (such as Tooltip or MenuTrigger).\n *\n * In the case where the immediate child is itself a FluentTriggerComponent and/or React Fragment,\n * it returns the first descendant that is _not_ a FluentTriggerComponent or Fragment.\n * This allows multiple triggers to be stacked, and still apply their props to the actual trigger element.\n *\n * For example, the following returns `<div id=\"child\" />`:\n * ```jsx\n * getTriggerChild(\n * <Tooltip>\n * <MenuTrigger>\n * <div id=\"child\" />\n * </MenuTrigger>\n * </Tooltip>\n * );\n * ```\n *\n * In the case where the immediate child is not a valid element,\n * null is returned\n *\n * @internal\n */\nexport function getTriggerChild<TriggerChildProps>(\n children: TriggerProps<TriggerChildProps>['children'],\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n): (React.ReactElement<Partial<TriggerChildProps>> & { ref?: React.Ref<any> }) | null {\n if (!React.isValidElement<TriggerChildProps>(children)) {\n return null;\n }\n return isFluentTrigger(children)\n ? getTriggerChild(\n // FIXME: This casting should be unnecessary as isFluentTrigger is a guard type method,\n // but for some reason it's failing on build\n (children.props as TriggerProps).children,\n )\n : children;\n}\n"],"names":["React","isFluentTrigger","getTriggerChild","children","isValidElement","props"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,eAAe,QAAQ,oBAAoB;AAGpD;;;;;;;;;;;;;;;;;;;;;;CAsBC,GACD,OAAO,SAASC,gBACdC,QAAqD;IAGrD,IAAI,CAACH,MAAMI,cAAc,CAAoBD,WAAW;QACtD,OAAO;IACT;IACA,OAAOF,gBAAgBE,YACnBD,gBAGE,AAFA,uFAAuF;IACvF,4CAA4C;IAC3CC,SAASE,KAAK,CAAkBF,QAAQ,IAE3CA;AACN"}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
1
|
/**
|
|
3
|
-
* @internal
|
|
4
2
|
* Checks if a given element is a FluentUI trigger (e.g. `MenuTrigger` or `Tooltip`).
|
|
5
3
|
* See the {@link FluentTriggerComponent} type for more info.
|
|
4
|
+
*
|
|
5
|
+
* @internal
|
|
6
6
|
*/ export function isFluentTrigger(element) {
|
|
7
7
|
return Boolean(element.type.isFluentTriggerComponent);
|
|
8
8
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/trigger/isFluentTrigger.ts"],"sourcesContent":["import * as React from 'react';\nimport type { FluentTriggerComponent, TriggerProps } from './types';\n\n/**\n *
|
|
1
|
+
{"version":3,"sources":["../src/trigger/isFluentTrigger.ts"],"sourcesContent":["import type * as React from 'react';\nimport type { FluentTriggerComponent, TriggerProps } from './types';\n\n/**\n * Checks if a given element is a FluentUI trigger (e.g. `MenuTrigger` or `Tooltip`).\n * See the {@link FluentTriggerComponent} type for more info.\n *\n * @internal\n */\nexport function isFluentTrigger(element: React.ReactElement): element is React.ReactElement<TriggerProps> {\n return Boolean((element.type as FluentTriggerComponent).isFluentTriggerComponent);\n}\n"],"names":["isFluentTrigger","element","Boolean","type","isFluentTriggerComponent"],"mappings":"AAGA;;;;;CAKC,GACD,OAAO,SAASA,gBAAgBC,OAA2B;IACzD,OAAOC,QAAQ,AAACD,QAAQE,IAAI,CAA4BC,wBAAwB;AAClF"}
|
package/lib/trigger/types.js
CHANGED
package/lib/trigger/types.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/trigger/types.ts"],"sourcesContent":["import * as React from 'react';\n\n/**\n *
|
|
1
|
+
{"version":3,"sources":["../src/trigger/types.ts"],"sourcesContent":["import type * as React from 'react';\n\n/**\n * Allows a component to be tagged as a FluentUI trigger component.\n *\n * Triggers are special-case components: they attach event listeners and other props on their child,\n * and use them to trigger another component to show. Examples include `MenuTrigger` and `Tooltip`.\n *\n * A component can be tagged as a trigger as follows:\n * ```ts\n * const MyComponent: React.FC<MyComponentProps> & FluentTriggerComponent = ...;\n *\n * MyComponent.isFluentTriggerComponent = true; // MUST also set this to true\n * ```\n *\n * @internal\n */\nexport type FluentTriggerComponent = {\n isFluentTriggerComponent?: boolean;\n};\n\n/**\n * A trigger may have a children that could be either:\n * 1. A single element\n * 2. A render function that will receive properties and must return a valid element or null\n * 3. null or undefined\n */\nexport type TriggerProps<TriggerChildProps = unknown> = {\n children?: React.ReactElement | ((props: TriggerChildProps) => React.ReactElement | null) | null;\n};\n"],"names":[],"mappings":"AAqBA;;;;;CAKC,GACD,WAEE"}
|
package/lib/utils/clamp.js
CHANGED
package/lib/utils/clamp.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/utils/clamp.ts"],"sourcesContent":["/**\n *
|
|
1
|
+
{"version":3,"sources":["../src/utils/clamp.ts"],"sourcesContent":["/**\n * Clamps `value` to a number between the min and max.\n *\n * @internal\n * @param value - the value to be clamped\n * @param min - the lowest valid value\n * @param max - the highest valid value\n */\nexport const clamp = (value: number, min: number, max: number): number => Math.max(min, Math.min(max, value || 0));\n"],"names":["clamp","value","min","max","Math"],"mappings":"AAAA;;;;;;;CAOC,GACD,OAAO,MAAMA,QAAQ,CAACC,OAAeC,KAAaC,MAAwBC,KAAKD,GAAG,CAACD,KAAKE,KAAKF,GAAG,CAACC,KAAKF,SAAS,IAAI"}
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
1
|
import { labelProperties, audioProperties, videoProperties, olProperties, liProperties, anchorProperties, buttonProperties, inputProperties, textAreaProperties, selectProperties, optionProperties, tableProperties, trProperties, thProperties, tdProperties, colGroupProperties, colProperties, fieldsetProperties, formProperties, iframeProperties, imgProperties, htmlElementProperties, getNativeProps, timeProperties, dialogProperties } from './properties';
|
|
3
2
|
const nativeElementMap = {
|
|
4
3
|
label: labelProperties,
|