@fluentui/react-tag-picker 9.0.0

package/lib-commonjs/components/TagPickerControl/useTagPickerControl.js

@@ -0,0 +1,104 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useTagPickerControl_unstable", {
+    enumerable: true,
+    get: function() {
+        return useTagPickerControl_unstable;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _reactutilities = require("@fluentui/react-utilities");
+const _TagPickerContext = require("../../contexts/TagPickerContext");
+const _reacticons = require("@fluentui/react-icons");
+const _useResizeObserverRef = require("../../utils/useResizeObserverRef");
+const _useTagPickerControlStylesstyles = require("./useTagPickerControlStyles.styles");
+const _reactfield = require("@fluentui/react-field");
+const useTagPickerControl_unstable = (props, ref)=>{
+    var _useFieldContext_unstable;
+    const targetRef = (0, _TagPickerContext.useTagPickerContext_unstable)((ctx)=>ctx.targetRef);
+    const triggerRef = (0, _TagPickerContext.useTagPickerContext_unstable)((ctx)=>ctx.triggerRef);
+    const tagPickerGroupRef = (0, _TagPickerContext.useTagPickerContext_unstable)((ctx)=>ctx.tagPickerGroupRef);
+    const open = (0, _TagPickerContext.useTagPickerContext_unstable)((ctx)=>ctx.open);
+    const popoverId = (0, _TagPickerContext.useTagPickerContext_unstable)((ctx)=>ctx.popoverId);
+    const setOpen = (0, _TagPickerContext.useTagPickerContext_unstable)((ctx)=>ctx.setOpen);
+    const secondaryInnerActionRef = (0, _TagPickerContext.useTagPickerContext_unstable)((ctx)=>ctx.secondaryActionRef);
+    const size = (0, _TagPickerContext.useTagPickerContext_unstable)((ctx)=>ctx.size);
+    const appearance = (0, _TagPickerContext.useTagPickerContext_unstable)((ctx)=>ctx.appearance);
+    const disabled = (0, _TagPickerContext.useTagPickerContext_unstable)((ctx)=>ctx.disabled);
+    const invalid = ((_useFieldContext_unstable = (0, _reactfield.useFieldContext_unstable)()) === null || _useFieldContext_unstable === void 0 ? void 0 : _useFieldContext_unstable.validationState) === 'error';
+    const innerRef = _react.useRef(null);
+    const expandIconRef = _react.useRef(null);
+    const asideRef = _react.useRef(null);
+    const secondaryAction = _reactutilities.slot.optional(props.secondaryAction, {
+        elementType: 'span'
+    });
+    const secondaryActionRef = (0, _reactutilities.useMergedRefs)(secondaryInnerActionRef, secondaryAction === null || secondaryAction === void 0 ? void 0 : secondaryAction.ref);
+    if (secondaryAction) {
+        secondaryAction.ref = secondaryActionRef;
+    }
+    const expandIcon = _reactutilities.slot.optional(props.expandIcon, {
+        renderByDefault: true,
+        defaultProps: {
+            'aria-expanded': open,
+            children: /*#__PURE__*/ _react.createElement(_reacticons.ChevronDownRegular, null),
+            role: 'button'
+        },
+        elementType: 'span'
+    });
+    const expandIconMergeRef = (0, _reactutilities.useMergedRefs)(expandIcon === null || expandIcon === void 0 ? void 0 : expandIcon.ref, expandIconRef);
+    if (expandIcon) {
+        expandIcon.ref = expandIconMergeRef;
+    }
+    const observerRef = (0, _useResizeObserverRef.useResizeObserverRef)(([entry])=>{
+        var _innerRef_current;
+        (_innerRef_current = innerRef.current) === null || _innerRef_current === void 0 ? void 0 : _innerRef_current.style.setProperty(_useTagPickerControlStylesstyles.tagPickerControlAsideWidthToken, `${entry.contentRect.width}px`);
+    });
+    const aside = _reactutilities.slot.optional(undefined, {
+        elementType: 'span',
+        renderByDefault: Boolean(secondaryAction || expandIcon),
+        defaultProps: {
+            ref: observerRef
+        }
+    });
+    const mergedAsideRefs = (0, _reactutilities.useMergedRefs)(asideRef, aside === null || aside === void 0 ? void 0 : aside.ref);
+    if (aside) {
+        aside.ref = mergedAsideRefs;
+    }
+    const handleMouseDown = (0, _reactutilities.useEventCallback)((event)=>{
+        if (event.isDefaultPrevented()) {
+            return;
+        }
+        if ((0, _reactutilities.elementContains)(expandIconRef.current, event.target) || event.target === innerRef.current || event.target === tagPickerGroupRef.current || event.target === asideRef.current) {
+            var _triggerRef_current;
+            event.preventDefault();
+            setOpen(event, !open);
+            (_triggerRef_current = triggerRef.current) === null || _triggerRef_current === void 0 ? void 0 : _triggerRef_current.focus();
+        }
+    });
+    return {
+        components: {
+            root: 'div',
+            expandIcon: 'span',
+            secondaryAction: 'span',
+            aside: 'span'
+        },
+        root: _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)('div', {
+            ref: (0, _reactutilities.useMergedRefs)(ref, targetRef, innerRef),
+            'aria-owns': open ? popoverId : undefined,
+            ...props,
+            onMouseDown: handleMouseDown
+        }), {
+            elementType: 'div'
+        }),
+        aside,
+        expandIcon,
+        secondaryAction,
+        size,
+        appearance,
+        disabled,
+        invalid
+    };
+};

package/lib-commonjs/components/TagPickerControl/useTagPickerControl.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useTagPickerControl.js"],"sourcesContent":["import * as React from 'react';\nimport { elementContains, getIntrinsicElementProps, slot, useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport { useTagPickerContext_unstable } from '../../contexts/TagPickerContext';\nimport { ChevronDownRegular } from '@fluentui/react-icons';\nimport { useResizeObserverRef } from '../../utils/useResizeObserverRef';\nimport { tagPickerControlAsideWidthToken } from './useTagPickerControlStyles.styles';\nimport { useFieldContext_unstable } from '@fluentui/react-field';\n/**\n * Create the state required to render PickerControl.\n *\n * The returned state can be modified with hooks such as usePickerControlStyles_unstable,\n * before being passed to renderPickerControl_unstable.\n *\n * @param props - props from this instance of PickerControl\n * @param ref - reference to root HTMLDivElement of PickerControl\n */ export const useTagPickerControl_unstable = (props, ref)=>{\n    var _useFieldContext_unstable;\n    const targetRef = useTagPickerContext_unstable((ctx)=>ctx.targetRef);\n    const triggerRef = useTagPickerContext_unstable((ctx)=>ctx.triggerRef);\n    const tagPickerGroupRef = useTagPickerContext_unstable((ctx)=>ctx.tagPickerGroupRef);\n    const open = useTagPickerContext_unstable((ctx)=>ctx.open);\n    const popoverId = useTagPickerContext_unstable((ctx)=>ctx.popoverId);\n    const setOpen = useTagPickerContext_unstable((ctx)=>ctx.setOpen);\n    const secondaryInnerActionRef = useTagPickerContext_unstable((ctx)=>ctx.secondaryActionRef);\n    const size = useTagPickerContext_unstable((ctx)=>ctx.size);\n    const appearance = useTagPickerContext_unstable((ctx)=>ctx.appearance);\n    const disabled = useTagPickerContext_unstable((ctx)=>ctx.disabled);\n    const invalid = ((_useFieldContext_unstable = useFieldContext_unstable()) === null || _useFieldContext_unstable === void 0 ? void 0 : _useFieldContext_unstable.validationState) === 'error';\n    const innerRef = React.useRef(null);\n    const expandIconRef = React.useRef(null);\n    const asideRef = React.useRef(null);\n    const secondaryAction = slot.optional(props.secondaryAction, {\n        elementType: 'span'\n    });\n    const secondaryActionRef = useMergedRefs(secondaryInnerActionRef, secondaryAction === null || secondaryAction === void 0 ? void 0 : secondaryAction.ref);\n    if (secondaryAction) {\n        secondaryAction.ref = secondaryActionRef;\n    }\n    const expandIcon = slot.optional(props.expandIcon, {\n        renderByDefault: true,\n        defaultProps: {\n            'aria-expanded': open,\n            children: /*#__PURE__*/ React.createElement(ChevronDownRegular, null),\n            role: 'button'\n        },\n        elementType: 'span'\n    });\n    const expandIconMergeRef = useMergedRefs(expandIcon === null || expandIcon === void 0 ? void 0 : expandIcon.ref, expandIconRef);\n    if (expandIcon) {\n        expandIcon.ref = expandIconMergeRef;\n    }\n    const observerRef = useResizeObserverRef(([entry])=>{\n        var _innerRef_current;\n        (_innerRef_current = innerRef.current) === null || _innerRef_current === void 0 ? void 0 : _innerRef_current.style.setProperty(tagPickerControlAsideWidthToken, `${entry.contentRect.width}px`);\n    });\n    const aside = slot.optional(undefined, {\n        elementType: 'span',\n        renderByDefault: Boolean(secondaryAction || expandIcon),\n        defaultProps: {\n            ref: observerRef\n        }\n    });\n    const mergedAsideRefs = useMergedRefs(asideRef, aside === null || aside === void 0 ? void 0 : aside.ref);\n    if (aside) {\n        aside.ref = mergedAsideRefs;\n    }\n    const handleMouseDown = useEventCallback((event)=>{\n        if (event.isDefaultPrevented()) {\n            return;\n        }\n        if (elementContains(expandIconRef.current, event.target) || event.target === innerRef.current || event.target === tagPickerGroupRef.current || event.target === asideRef.current) {\n            var _triggerRef_current;\n            event.preventDefault();\n            setOpen(event, !open);\n            (_triggerRef_current = triggerRef.current) === null || _triggerRef_current === void 0 ? void 0 : _triggerRef_current.focus();\n        }\n    });\n    return {\n        components: {\n            root: 'div',\n            expandIcon: 'span',\n            secondaryAction: 'span',\n            aside: 'span'\n        },\n        root: slot.always(getIntrinsicElementProps('div', {\n            ref: useMergedRefs(ref, targetRef, innerRef),\n            'aria-owns': open ? popoverId : undefined,\n            ...props,\n            onMouseDown: handleMouseDown\n        }), {\n            elementType: 'div'\n        }),\n        aside,\n        expandIcon,\n        secondaryAction,\n        size,\n        appearance,\n        disabled,\n        invalid\n    };\n};\n"],"names":["useTagPickerControl_unstable","props","ref","_useFieldContext_unstable","targetRef","useTagPickerContext_unstable","ctx","triggerRef","tagPickerGroupRef","open","popoverId","setOpen","secondaryInnerActionRef","secondaryActionRef","size","appearance","disabled","invalid","useFieldContext_unstable","validationState","innerRef","React","useRef","expandIconRef","asideRef","secondaryAction","slot","optional","elementType","useMergedRefs","expandIcon","renderByDefault","defaultProps","children","createElement","ChevronDownRegular","role","expandIconMergeRef","observerRef","useResizeObserverRef","entry","_innerRef_current","current","style","setProperty","tagPickerControlAsideWidthToken","contentRect","width","aside","undefined","Boolean","mergedAsideRefs","handleMouseDown","useEventCallback","event","isDefaultPrevented","elementContains","target","_triggerRef_current","preventDefault","focus","components","root","always","getIntrinsicElementProps","onMouseDown"],"mappings":"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"}