@fluentui/react-tag-picker 9.0.0

package/lib/components/TagPickerControl/useTagPickerControl.js

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

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

@@ -0,0 +1 @@
+{"version":3,"sources":["useTagPickerControl.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  ExtractSlotProps,\n  Slot,\n  elementContains,\n  getIntrinsicElementProps,\n  slot,\n  useEventCallback,\n  useMergedRefs,\n} from '@fluentui/react-utilities';\nimport type { TagPickerControlProps, TagPickerControlState } from './TagPickerControl.types';\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/**\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 */\nexport const useTagPickerControl_unstable = (\n  props: TagPickerControlProps,\n  ref: React.Ref<HTMLDivElement>,\n): TagPickerControlState => {\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()?.validationState === 'error';\n\n  const innerRef = React.useRef<HTMLDivElement>(null);\n  const expandIconRef = React.useRef<HTMLSpanElement>(null);\n  const asideRef = React.useRef<HTMLSpanElement>(null);\n\n  const secondaryAction = slot.optional(props.secondaryAction, {\n    elementType: 'span',\n  });\n  const secondaryActionRef = useMergedRefs(secondaryInnerActionRef, secondaryAction?.ref);\n  if (secondaryAction) {\n    secondaryAction.ref = secondaryActionRef;\n  }\n\n  const expandIcon = slot.optional(props.expandIcon, {\n    renderByDefault: true,\n    defaultProps: {\n      'aria-expanded': open,\n      children: <ChevronDownRegular />,\n      role: 'button',\n    },\n    elementType: 'span',\n  });\n\n  const expandIconMergeRef = useMergedRefs(expandIcon?.ref, expandIconRef);\n  if (expandIcon) {\n    expandIcon.ref = expandIconMergeRef;\n  }\n\n  const observerRef = useResizeObserverRef<HTMLSpanElement>(([entry]) => {\n    innerRef.current?.style.setProperty(tagPickerControlAsideWidthToken, `${entry.contentRect.width}px`);\n  });\n  const aside = slot.optional<ExtractSlotProps<Slot<'span'>>>(undefined, {\n    elementType: 'span',\n    renderByDefault: Boolean(secondaryAction || expandIcon),\n    defaultProps: {\n      ref: observerRef,\n    },\n  });\n  const mergedAsideRefs = useMergedRefs(asideRef, aside?.ref);\n  if (aside) {\n    aside.ref = mergedAsideRefs;\n  }\n\n  const handleMouseDown = useEventCallback((event: React.MouseEvent<HTMLDivElement>) => {\n    if (event.isDefaultPrevented()) {\n      return;\n    }\n    if (\n      elementContains(expandIconRef.current, event.target as Node) ||\n      event.target === innerRef.current ||\n      event.target === tagPickerGroupRef.current ||\n      event.target === asideRef.current\n    ) {\n      event.preventDefault();\n      setOpen(event, !open);\n      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(\n      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":["React","elementContains","getIntrinsicElementProps","slot","useEventCallback","useMergedRefs","useTagPickerContext_unstable","ChevronDownRegular","useResizeObserverRef","tagPickerControlAsideWidthToken","useFieldContext_unstable","useTagPickerControl_unstable","props","ref","targetRef","ctx","triggerRef","tagPickerGroupRef","open","popoverId","setOpen","secondaryInnerActionRef","secondaryActionRef","size","appearance","disabled","invalid","validationState","innerRef","useRef","expandIconRef","asideRef","secondaryAction","optional","elementType","expandIcon","renderByDefault","defaultProps","children","role","expandIconMergeRef","observerRef","entry","current","style","setProperty","contentRect","width","aside","undefined","Boolean","mergedAsideRefs","handleMouseDown","event","isDefaultPrevented","target","preventDefault","focus","components","root","always","onMouseDown"],"mappings":"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"}

package/lib/components/TagPickerControl/useTagPickerControlStyles.styles.js

@@ -0,0 +1,262 @@
+import { __styles, mergeClasses, shorthands } from '@griffel/react';
+import { tokens } from '@fluentui/react-theme';
+export const tagPickerControlClassNames = {
+  root: 'fui-TagPickerControl',
+  expandIcon: 'fui-TagPickerControl__expandIcon',
+  secondaryAction: 'fui-TagPickerControl__secondaryAction',
+  aside: 'fui-TagPickerControl__aside'
+};
+export const tagPickerControlAsideWidthToken = '--fui-TagPickerControl-aside-width';
+/**
+ * Styles for the root slot
+ */
+const useStyles = /*#__PURE__*/__styles({
+  root: {
+    Bbmb7ep: ["f1aa9q02", "f16jpd5f"],
+    Beyfa6y: ["f16jpd5f", "f1aa9q02"],
+    B7oj6ja: ["f1jar5jt", "fyu767a"],
+    Btl43ni: ["fyu767a", "f1jar5jt"],
+    z189sj: ["f1d8q41i", "f8lqu5g"],
+    uwmqm3: ["f1uw59to", "fw5db7e"],
+    Bt984gj: "f122n59",
+    i8kkvl: "f14mj54c",
+    B7ck84d: "f1ewtqcl",
+    mc9l5x: "f22iagw",
+    Bf4jedk: "f1exfvgq",
+    qhf8xq: "f10pi13n",
+    Eh141a: "fni485r",
+    Bbr2w1p: "f14a1fxs",
+    Bduesf4: "f3e99gv",
+    Bpq79vn: "fhljsf7",
+    li1rpt: "f1gw3sf2",
+    Bsft5z2: "f13zj6fq",
+    E3zdtr: "f1mdlcz9",
+    Eqx8gd: ["f1a7op3", "f1cjjd47"],
+    By385i5: "f1gboi2j",
+    B1piin3: ["f1cjjd47", "f1a7op3"],
+    Dlnsje: "f145g4dw",
+    d9w3h3: ["f1kp91vd", "f1ibwz09"],
+    B3778ie: ["f1ibwz09", "f1kp91vd"],
+    Bcgy8vk: "f14pi962",
+    Bw17bha: "f1lh990p",
+    B1q35kw: "f1jc6hxc",
+    Gjdm7m: "f13evtba",
+    b1kco5: "f1yk9hq",
+    Ba2ppi3: "fhwpy7i",
+    F2fol1: "f14ee0xe",
+    lck23g: "f1xhbsuh",
+    df92cz: "fv8e3ye",
+    I188md: "ftb5wc6",
+    umuwi5: "fjw5xc1",
+    Blcqepd: "f1xdyd5c",
+    nplu4u: "fatpbeo",
+    Bioka5o: "fb7uyps",
+    H713fs: "f1cmft4k",
+    B9ooomg: "f1x58t8o",
+    Bercvud: "f1ibeo51"
+  },
+  listbox: {
+    E5pizo: "f1hg901r",
+    Bbmb7ep: ["f1aa9q02", "f16jpd5f"],
+    Beyfa6y: ["f16jpd5f", "f1aa9q02"],
+    B7oj6ja: ["f1jar5jt", "fyu767a"],
+    Btl43ni: ["fyu767a", "f1jar5jt"],
+    Bxyxcbc: "fmmk62d",
+    B7ck84d: "f1ewtqcl"
+  },
+  listboxCollapsed: {
+    mc9l5x: "fjseox"
+  },
+  medium: {
+    sshi5w: "f1nxs5xn"
+  },
+  large: {
+    sshi5w: "f1w5jphr"
+  },
+  "extra-large": {
+    sshi5w: "f5pgtk9"
+  },
+  outline: {
+    De3pzq: "fxugw4r",
+    B4j52fo: "f192inf7",
+    Bekrc4i: ["f5tn483", "f1ojsxk5"],
+    Bn0qgzm: "f1vxd6vx",
+    ibv6hh: ["f1ojsxk5", "f5tn483"],
+    icvyot: "fzkkow9",
+    vrafjx: ["fcdblym", "fjik90z"],
+    oivjwe: "fg706s2",
+    wvpqe5: ["fjik90z", "fcdblym"],
+    g2u3we: "fj3muxo",
+    h3c5rm: ["f1akhkt", "f1lxtadh"],
+    B9xav0g: "f1c1zstj",
+    zhjwy3: ["f1lxtadh", "f1akhkt"]
+  },
+  outlineInteractive: {
+    Bgoe8wy: "fvcxoqz",
+    Bwzppfd: ["f1ub3y4t", "f1m52nbi"],
+    oetu4i: "flmw63s",
+    gg5e9n: ["f1m52nbi", "f1ub3y4t"],
+    B6oc9vd: "fvs00aa",
+    ak43y8: ["f1assf6x", "f4ruux4"],
+    wmxk5l: "fqhmt4z",
+    B50zh58: ["f4ruux4", "f1assf6x"]
+  },
+  underline: {
+    De3pzq: "f1c21dwh",
+    Bn0qgzm: "f1vxd6vx",
+    oivjwe: "fg706s2",
+    B9xav0g: "f1c1zstj",
+    Bbmb7ep: ["f1krrbdw", "f1deotkl"],
+    Beyfa6y: ["f1deotkl", "f1krrbdw"],
+    B7oj6ja: ["f10ostut", "f1ozlkrg"],
+    Btl43ni: ["f1ozlkrg", "f10ostut"]
+  },
+  "filled-lighter": {
+    De3pzq: "fxugw4r",
+    B4j52fo: "f192inf7",
+    Bekrc4i: ["f5tn483", "f1ojsxk5"],
+    Bn0qgzm: "f1vxd6vx",
+    ibv6hh: ["f1ojsxk5", "f5tn483"],
+    icvyot: "fzkkow9",
+    vrafjx: ["fcdblym", "fjik90z"],
+    oivjwe: "fg706s2",
+    wvpqe5: ["fjik90z", "fcdblym"],
+    g2u3we: "fghlq4f",
+    h3c5rm: ["f1gn591s", "fjscplz"],
+    B9xav0g: "fb073pr",
+    zhjwy3: ["fjscplz", "f1gn591s"]
+  },
+  "filled-darker": {
+    De3pzq: "f16xq7d1",
+    B4j52fo: "f192inf7",
+    Bekrc4i: ["f5tn483", "f1ojsxk5"],
+    Bn0qgzm: "f1vxd6vx",
+    ibv6hh: ["f1ojsxk5", "f5tn483"],
+    icvyot: "fzkkow9",
+    vrafjx: ["fcdblym", "fjik90z"],
+    oivjwe: "fg706s2",
+    wvpqe5: ["fjik90z", "fcdblym"],
+    g2u3we: "fghlq4f",
+    h3c5rm: ["f1gn591s", "fjscplz"],
+    B9xav0g: "fb073pr",
+    zhjwy3: ["fjscplz", "f1gn591s"]
+  },
+  invalid: {
+    tvckwq: "fs4k3qj",
+    gk2u95: ["fcee079", "fmyw78r"],
+    hhx65j: "f1fgmyf4",
+    Bxowmz0: ["fmyw78r", "fcee079"]
+  },
+  invalidUnderline: {
+    hhx65j: "f1fgmyf4"
+  },
+  disabled: {
+    Bceei9c: "fdrzuqr",
+    De3pzq: "f1c21dwh",
+    g2u3we: "f1jj8ep1",
+    h3c5rm: ["f15xbau", "fy0fskl"],
+    B9xav0g: "f4ikngz",
+    zhjwy3: ["fy0fskl", "f15xbau"],
+    Bjwas2f: "fg455y9",
+    Bn1d65q: ["f1rvyvqg", "f14g86mu"],
+    Bxeuatn: "f1cwzwz",
+    n51gp8: ["f14g86mu", "f1rvyvqg"]
+  }
+}, {
+  d: [".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}", ".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}", ".f1d8q41i{padding-right:calc(var(--spacingHorizontalM) + var(--fui-TagPickerControl-aside-width, 0px));}", ".f8lqu5g{padding-left:calc(var(--spacingHorizontalM) + var(--fui-TagPickerControl-aside-width, 0px));}", ".f1uw59to{padding-left:var(--spacingHorizontalM);}", ".fw5db7e{padding-right:var(--spacingHorizontalM);}", ".f122n59{align-items:center;}", ".f14mj54c{column-gap:var(--spacingHorizontalXXS);}", ".f1ewtqcl{box-sizing:border-box;}", ".f22iagw{display:flex;}", ".f1exfvgq{min-width:250px;}", ".f10pi13n{position:relative;}", ".fni485r{flex-wrap:wrap;}", ".f1gw3sf2::after{box-sizing:border-box;}", ".f13zj6fq::after{content:\"\";}", ".f1mdlcz9::after{position:absolute;}", ".f1a7op3::after{left:-1px;}", ".f1cjjd47::after{right:-1px;}", ".f1gboi2j::after{bottom:-1px;}", ".f145g4dw::after{height:max(2px, var(--borderRadiusMedium));}", ".f1kp91vd::after{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1ibwz09::after{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f14pi962::after{border-bottom-width:var(--strokeWidthThick);}", ".f1lh990p::after{border-bottom-style:solid;}", ".f1jc6hxc::after{border-bottom-color:var(--colorCompoundBrandStroke);}", ".f13evtba::after{clip-path:inset(calc(100% - 2px) 0 0 0);}", ".f1yk9hq::after{transform:scaleX(0);}", ".fhwpy7i::after{transition-property:transform;}", ".f14ee0xe::after{transition-duration:var(--durationUltraFast);}", ".f1xhbsuh::after{transition-delay:var(--curveAccelerateMid);}", ".f1hg901r{box-shadow:var(--shadow16);}", ".fmmk62d{max-height:80vh;}", ".fjseox{display:none;}", ".f1nxs5xn{min-height:32px;}", ".f1w5jphr{min-height:40px;}", ".f5pgtk9{min-height:44px;}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".f192inf7{border-top-width:var(--strokeWidthThin);}", ".f5tn483{border-right-width:var(--strokeWidthThin);}", ".f1ojsxk5{border-left-width:var(--strokeWidthThin);}", ".f1vxd6vx{border-bottom-width:var(--strokeWidthThin);}", ".fzkkow9{border-top-style:solid;}", ".fcdblym{border-right-style:solid;}", ".fjik90z{border-left-style:solid;}", ".fg706s2{border-bottom-style:solid;}", ".fj3muxo{border-top-color:var(--colorNeutralStroke1);}", ".f1akhkt{border-right-color:var(--colorNeutralStroke1);}", ".f1lxtadh{border-left-color:var(--colorNeutralStroke1);}", ".f1c1zstj{border-bottom-color:var(--colorNeutralStrokeAccessible);}", ".f1c21dwh{background-color:var(--colorTransparentBackground);}", ".f1krrbdw{border-bottom-right-radius:0;}", ".f1deotkl{border-bottom-left-radius:0;}", ".f10ostut{border-top-right-radius:0;}", ".f1ozlkrg{border-top-left-radius:0;}", ".fghlq4f{border-top-color:var(--colorTransparentStroke);}", ".f1gn591s{border-right-color:var(--colorTransparentStroke);}", ".fjscplz{border-left-color:var(--colorTransparentStroke);}", ".fb073pr{border-bottom-color:var(--colorTransparentStroke);}", ".f16xq7d1{background-color:var(--colorNeutralBackground3);}", ".fs4k3qj:not(:focus-within),.fs4k3qj:hover:not(:focus-within){border-top-color:var(--colorPaletteRedBorder2);}", ".fcee079:not(:focus-within),.fcee079:hover:not(:focus-within){border-right-color:var(--colorPaletteRedBorder2);}", ".fmyw78r:not(:focus-within),.fmyw78r:hover:not(:focus-within){border-left-color:var(--colorPaletteRedBorder2);}", ".f1fgmyf4:not(:focus-within),.f1fgmyf4:hover:not(:focus-within){border-bottom-color:var(--colorPaletteRedBorder2);}", ".fdrzuqr{cursor:not-allowed;}", ".f1jj8ep1{border-top-color:var(--colorNeutralStrokeDisabled);}", ".f15xbau{border-right-color:var(--colorNeutralStrokeDisabled);}", ".fy0fskl{border-left-color:var(--colorNeutralStrokeDisabled);}", ".f4ikngz{border-bottom-color:var(--colorNeutralStrokeDisabled);}"],
+  w: [".f14a1fxs:focus-within{outline-width:2px;}", ".f3e99gv:focus-within{outline-style:solid;}", ".fhljsf7:focus-within{outline-color:transparent;}", ".fjw5xc1:focus-within::after{transform:scaleX(1);}", ".f1xdyd5c:focus-within::after{transition-property:transform;}", ".fatpbeo:focus-within::after{transition-duration:var(--durationNormal);}", ".fb7uyps:focus-within::after{transition-delay:var(--curveDecelerateMid);}", ".f1ibeo51:focus-within:active::after{border-bottom-color:var(--colorCompoundBrandStrokePressed);}"],
+  m: [["@media screen and (prefers-reduced-motion: reduce){.fv8e3ye::after{transition-duration:0.01ms;}}", {
+    m: "screen and (prefers-reduced-motion: reduce)"
+  }], ["@media screen and (prefers-reduced-motion: reduce){.ftb5wc6::after{transition-delay:0.01ms;}}", {
+    m: "screen and (prefers-reduced-motion: reduce)"
+  }], ["@media screen and (prefers-reduced-motion: reduce){.f1cmft4k:focus-within::after{transition-duration:0.01ms;}}", {
+    m: "screen and (prefers-reduced-motion: reduce)"
+  }], ["@media screen and (prefers-reduced-motion: reduce){.f1x58t8o:focus-within::after{transition-delay:0.01ms;}}", {
+    m: "screen and (prefers-reduced-motion: reduce)"
+  }], ["@media (forced-colors: active){.fg455y9{border-top-color:GrayText;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f14g86mu{border-left-color:GrayText;}.f1rvyvqg{border-right-color:GrayText;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f1cwzwz{border-bottom-color:GrayText;}}", {
+    m: "(forced-colors: active)"
+  }]],
+  h: [".fvcxoqz:hover{border-top-color:var(--colorNeutralStroke1Hover);}", ".f1ub3y4t:hover{border-right-color:var(--colorNeutralStroke1Hover);}", ".f1m52nbi:hover{border-left-color:var(--colorNeutralStroke1Hover);}", ".flmw63s:hover{border-bottom-color:var(--colorNeutralStrokeAccessible);}"],
+  a: [".fvs00aa:active{border-top-color:var(--colorNeutralStroke1Pressed);}", ".f1assf6x:active{border-right-color:var(--colorNeutralStroke1Pressed);}", ".f4ruux4:active{border-left-color:var(--colorNeutralStroke1Pressed);}", ".fqhmt4z:active{border-bottom-color:var(--colorNeutralStrokeAccessible);}"]
+});
+const useAsideStyles = /*#__PURE__*/__styles({
+  root: {
+    mc9l5x: "f13qh94s",
+    Bt984gj: "f122n59",
+    qhf8xq: "f1euv43f",
+    Bhzewxz: "f15twtuk",
+    j35jbq: ["f8b87gs", "fedtrts"],
+    Budl1dq: "f13p5kfd",
+    wkccdc: "fjg31ve",
+    Bqenvij: "f1l02sjl",
+    Bceei9c: "f113hnb5"
+  },
+  medium: {
+    sshi5w: "f1nxs5xn"
+  },
+  large: {
+    sshi5w: "f1w5jphr"
+  },
+  "extra-large": {
+    sshi5w: "f5pgtk9"
+  }
+}, {
+  d: [".f13qh94s{display:grid;}", ".f122n59{align-items:center;}", ".f1euv43f{position:absolute;}", ".f15twtuk{top:0;}", ".f8b87gs{right:var(--spacingHorizontalM);}", ".fedtrts{left:var(--spacingHorizontalM);}", ".f13p5kfd{grid-template-columns:repeat(2, auto);}", ".fjg31ve{grid-template-rows:minmax(32px, auto) 1fr;}", ".f1l02sjl{height:100%;}", ".f113hnb5{cursor:text;}", ".f1nxs5xn{min-height:32px;}", ".f1w5jphr{min-height:40px;}", ".f5pgtk9{min-height:44px;}"]
+});
+export const iconSizes = {
+  small: '16px',
+  medium: '20px',
+  large: '24px'
+};
+const useIconStyles = /*#__PURE__*/__styles({
+  icon: {
+    B7ck84d: "f1ewtqcl",
+    sj55zd: "fxkbij4",
+    Bceei9c: "f1k6fduh",
+    mc9l5x: "ftgm304",
+    Be2twd7: "f1pp30po",
+    Bo70h7d: "fvc9v3g"
+  },
+  medium: {
+    Be2twd7: "f4ybsrx",
+    Frg6f3: ["f1h9en5y", "f1xk557c"]
+  },
+  large: {
+    Be2twd7: "fe5j1ua",
+    Frg6f3: ["f1h9en5y", "f1xk557c"]
+  },
+  "extra-large": {
+    Be2twd7: "f1rt2boy",
+    Frg6f3: ["f1t5qyk5", "f1ikr372"]
+  },
+  disabled: {
+    sj55zd: "f1s2aq7o",
+    Bceei9c: "fdrzuqr"
+  }
+}, {
+  d: [".f1ewtqcl{box-sizing:border-box;}", ".fxkbij4{color:var(--colorNeutralStrokeAccessible);}", ".f1k6fduh{cursor:pointer;}", ".ftgm304{display:block;}", ".f1pp30po{font-size:var(--fontSizeBase500);}", ".fvc9v3g svg{display:block;}", ".f4ybsrx{font-size:16px;}", ".f1h9en5y{margin-left:var(--spacingHorizontalXXS);}", ".f1xk557c{margin-right:var(--spacingHorizontalXXS);}", ".fe5j1ua{font-size:20px;}", ".f1rt2boy{font-size:24px;}", ".f1t5qyk5{margin-left:var(--spacingHorizontalSNudge);}", ".f1ikr372{margin-right:var(--spacingHorizontalSNudge);}", ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}", ".fdrzuqr{cursor:not-allowed;}"]
+});
+/**
+ * Apply styling to the PickerControl slots based on the state
+ */
+export const useTagPickerControlStyles_unstable = state => {
+  const styles = useStyles();
+  const iconStyles = useIconStyles();
+  const asideStyles = useAsideStyles();
+  state.root.className = mergeClasses(tagPickerControlClassNames.root, styles.root, styles[state.size], styles[state.appearance], !state.disabled && state.appearance === 'outline' && styles.outlineInteractive, state.invalid && state.appearance !== 'underline' && styles.invalid, state.invalid && state.appearance === 'underline' && styles.invalidUnderline, state.disabled && styles.disabled, state.root.className);
+  if (state.aside) {
+    state.aside.className = mergeClasses(tagPickerControlClassNames.aside, asideStyles.root, asideStyles[state.size], state.aside.className);
+  }
+  if (state.expandIcon) {
+    state.expandIcon.className = mergeClasses(tagPickerControlClassNames.expandIcon, iconStyles.icon, iconStyles[state.size], state.disabled && iconStyles.disabled, state.expandIcon.className);
+  }
+  if (state.secondaryAction) {
+    state.secondaryAction.className = mergeClasses(tagPickerControlClassNames.secondaryAction, state.secondaryAction.className);
+  }
+  return state;
+};
+//# sourceMappingURL=useTagPickerControlStyles.styles.js.map

package/lib/components/TagPickerControl/useTagPickerControlStyles.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__styles","mergeClasses","shorthands","tokens","tagPickerControlClassNames","root","expandIcon","secondaryAction","aside","tagPickerControlAsideWidthToken","useStyles","Bbmb7ep","Beyfa6y","B7oj6ja","Btl43ni","z189sj","uwmqm3","Bt984gj","i8kkvl","B7ck84d","mc9l5x","Bf4jedk","qhf8xq","Eh141a","Bbr2w1p","Bduesf4","Bpq79vn","li1rpt","Bsft5z2","E3zdtr","Eqx8gd","By385i5","B1piin3","Dlnsje","d9w3h3","B3778ie","Bcgy8vk","Bw17bha","B1q35kw","Gjdm7m","b1kco5","Ba2ppi3","F2fol1","lck23g","df92cz","I188md","umuwi5","Blcqepd","nplu4u","Bioka5o","H713fs","B9ooomg","Bercvud","listbox","E5pizo","Bxyxcbc","listboxCollapsed","medium","sshi5w","large","outline","De3pzq","B4j52fo","Bekrc4i","Bn0qgzm","ibv6hh","icvyot","vrafjx","oivjwe","wvpqe5","g2u3we","h3c5rm","B9xav0g","zhjwy3","outlineInteractive","Bgoe8wy","Bwzppfd","oetu4i","gg5e9n","B6oc9vd","ak43y8","wmxk5l","B50zh58","underline","invalid","tvckwq","gk2u95","hhx65j","Bxowmz0","invalidUnderline","disabled","Bceei9c","Bjwas2f","Bn1d65q","Bxeuatn","n51gp8","d","w","m","h","a","useAsideStyles","Bhzewxz","j35jbq","Budl1dq","wkccdc","Bqenvij","iconSizes","small","useIconStyles","icon","sj55zd","Be2twd7","Bo70h7d","Frg6f3","useTagPickerControlStyles_unstable","state","styles","iconStyles","asideStyles","className","size","appearance"],"sources":["useTagPickerControlStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const tagPickerControlClassNames = {\n    root: 'fui-TagPickerControl',\n    expandIcon: 'fui-TagPickerControl__expandIcon',\n    secondaryAction: 'fui-TagPickerControl__secondaryAction',\n    aside: 'fui-TagPickerControl__aside'\n};\nexport const tagPickerControlAsideWidthToken = '--fui-TagPickerControl-aside-width';\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n    root: {\n        ...shorthands.borderRadius(tokens.borderRadiusMedium),\n        paddingRight: `calc(${tokens.spacingHorizontalM} + var(${tagPickerControlAsideWidthToken}, 0px))`,\n        paddingLeft: tokens.spacingHorizontalM,\n        alignItems: 'center',\n        columnGap: tokens.spacingHorizontalXXS,\n        boxSizing: 'border-box',\n        display: 'flex',\n        minWidth: '250px',\n        position: 'relative',\n        flexWrap: 'wrap',\n        // windows high contrast mode focus indicator\n        ':focus-within': {\n            outlineWidth: '2px',\n            outlineStyle: 'solid',\n            outlineColor: 'transparent'\n        },\n        // bottom focus border, shared with Input, Select, and SpinButton\n        '::after': {\n            boxSizing: 'border-box',\n            content: '\"\"',\n            position: 'absolute',\n            left: '-1px',\n            bottom: '-1px',\n            right: '-1px',\n            height: `max(2px, ${tokens.borderRadiusMedium})`,\n            borderBottomLeftRadius: tokens.borderRadiusMedium,\n            borderBottomRightRadius: tokens.borderRadiusMedium,\n            ...shorthands.borderBottom(tokens.strokeWidthThick, 'solid', tokens.colorCompoundBrandStroke),\n            clipPath: 'inset(calc(100% - 2px) 0 0 0)',\n            transform: 'scaleX(0)',\n            transitionProperty: 'transform',\n            transitionDuration: tokens.durationUltraFast,\n            transitionDelay: tokens.curveAccelerateMid,\n            '@media screen and (prefers-reduced-motion: reduce)': {\n                transitionDuration: '0.01ms',\n                transitionDelay: '0.01ms'\n            }\n        },\n        ':focus-within::after': {\n            transform: 'scaleX(1)',\n            transitionProperty: 'transform',\n            transitionDuration: tokens.durationNormal,\n            transitionDelay: tokens.curveDecelerateMid,\n            '@media screen and (prefers-reduced-motion: reduce)': {\n                transitionDuration: '0.01ms',\n                transitionDelay: '0.01ms'\n            }\n        },\n        ':focus-within:active::after': {\n            borderBottomColor: tokens.colorCompoundBrandStrokePressed\n        }\n    },\n    listbox: {\n        boxShadow: `${tokens.shadow16}`,\n        ...shorthands.borderRadius(tokens.borderRadiusMedium),\n        maxHeight: '80vh',\n        boxSizing: 'border-box'\n    },\n    listboxCollapsed: {\n        display: 'none'\n    },\n    // size variants\n    medium: {\n        minHeight: '32px'\n    },\n    large: {\n        minHeight: '40px'\n    },\n    'extra-large': {\n        minHeight: '44px'\n    },\n    // appearance variants\n    outline: {\n        backgroundColor: tokens.colorNeutralBackground1,\n        ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke1),\n        borderBottomColor: tokens.colorNeutralStrokeAccessible\n    },\n    outlineInteractive: {\n        '&:hover': {\n            ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n            borderBottomColor: tokens.colorNeutralStrokeAccessible\n        },\n        '&:active': {\n            ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n            borderBottomColor: tokens.colorNeutralStrokeAccessible\n        }\n    },\n    underline: {\n        backgroundColor: tokens.colorTransparentBackground,\n        ...shorthands.borderBottom(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStrokeAccessible),\n        ...shorthands.borderRadius(0)\n    },\n    'filled-lighter': {\n        backgroundColor: tokens.colorNeutralBackground1,\n        ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorTransparentStroke)\n    },\n    'filled-darker': {\n        backgroundColor: tokens.colorNeutralBackground3,\n        ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorTransparentStroke)\n    },\n    invalid: {\n        ':not(:focus-within),:hover:not(:focus-within)': {\n            ...shorthands.borderColor(tokens.colorPaletteRedBorder2)\n        }\n    },\n    invalidUnderline: {\n        ':not(:focus-within),:hover:not(:focus-within)': {\n            borderBottomColor: tokens.colorPaletteRedBorder2\n        }\n    },\n    disabled: {\n        cursor: 'not-allowed',\n        backgroundColor: tokens.colorTransparentBackground,\n        ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n        '@media (forced-colors: active)': {\n            ...shorthands.borderColor('GrayText')\n        }\n    }\n});\nconst useAsideStyles = makeStyles({\n    root: {\n        display: 'grid',\n        alignItems: 'center',\n        position: 'absolute',\n        top: '0',\n        right: tokens.spacingHorizontalM,\n        gridTemplateColumns: 'repeat(2, auto)',\n        gridTemplateRows: 'minmax(32px, auto) 1fr',\n        height: '100%',\n        cursor: 'text'\n    },\n    // size variants\n    medium: {\n        minHeight: '32px'\n    },\n    large: {\n        minHeight: '40px'\n    },\n    'extra-large': {\n        minHeight: '44px'\n    }\n});\nexport const iconSizes = {\n    small: '16px',\n    medium: '20px',\n    large: '24px'\n};\nconst useIconStyles = makeStyles({\n    icon: {\n        boxSizing: 'border-box',\n        color: tokens.colorNeutralStrokeAccessible,\n        cursor: 'pointer',\n        display: 'block',\n        fontSize: tokens.fontSizeBase500,\n        // the SVG must have display: block for accurate positioning\n        // otherwise an extra inline space is inserted after the svg element\n        '& svg': {\n            display: 'block'\n        }\n    },\n    // icon size variants\n    medium: {\n        fontSize: iconSizes.small,\n        marginLeft: tokens.spacingHorizontalXXS\n    },\n    large: {\n        fontSize: iconSizes.medium,\n        marginLeft: tokens.spacingHorizontalXXS\n    },\n    'extra-large': {\n        fontSize: iconSizes.large,\n        marginLeft: tokens.spacingHorizontalSNudge\n    },\n    disabled: {\n        color: tokens.colorNeutralForegroundDisabled,\n        cursor: 'not-allowed'\n    }\n});\n/**\n * Apply styling to the PickerControl slots based on the state\n */ export const useTagPickerControlStyles_unstable = (state)=>{\n    const styles = useStyles();\n    const iconStyles = useIconStyles();\n    const asideStyles = useAsideStyles();\n    state.root.className = mergeClasses(tagPickerControlClassNames.root, styles.root, styles[state.size], styles[state.appearance], !state.disabled && state.appearance === 'outline' && styles.outlineInteractive, state.invalid && state.appearance !== 'underline' && styles.invalid, state.invalid && state.appearance === 'underline' && styles.invalidUnderline, state.disabled && styles.disabled, state.root.className);\n    if (state.aside) {\n        state.aside.className = mergeClasses(tagPickerControlClassNames.aside, asideStyles.root, asideStyles[state.size], state.aside.className);\n    }\n    if (state.expandIcon) {\n        state.expandIcon.className = mergeClasses(tagPickerControlClassNames.expandIcon, iconStyles.icon, iconStyles[state.size], state.disabled && iconStyles.disabled, state.expandIcon.className);\n    }\n    if (state.secondaryAction) {\n        state.secondaryAction.className = mergeClasses(tagPickerControlClassNames.secondaryAction, state.secondaryAction.className);\n    }\n    return state;\n};\n"],"mappings":"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"}

package/lib/components/TagPickerGroup/TagPickerGroup.js

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { useTagPickerGroup_unstable } from './useTagPickerGroup';
+import { useTagGroupContextValues_unstable } from '@fluentui/react-tags';
+import { renderTagPickerGroup_unstable } from './renderTagPickerGroup';
+import { useTagPickerGroupStyles_unstable } from './useTagPickerGroupStyles.styles';
+import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
+/**
+ * TagPickerGroup component -
+ * A TagPickerGroup is a composite component that allows users to group tags together.
+ */ export const TagPickerGroup = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const state = useTagPickerGroup_unstable(props, ref);
+    useTagPickerGroupStyles_unstable(state);
+    useCustomStyleHook_unstable('useTagPickerGroupStyles_unstable')(state);
+    return renderTagPickerGroup_unstable(state, useTagGroupContextValues_unstable(state));
+});
+TagPickerGroup.displayName = 'TagPickerGroup';

package/lib/components/TagPickerGroup/TagPickerGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["TagPickerGroup.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useTagPickerGroup_unstable } from './useTagPickerGroup';\nimport type { TagPickerGroupProps } from './TagPickerGroup.types';\nimport { useTagGroupContextValues_unstable } from '@fluentui/react-tags';\nimport { renderTagPickerGroup_unstable } from './renderTagPickerGroup';\nimport { useTagPickerGroupStyles_unstable } from './useTagPickerGroupStyles.styles';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * TagPickerGroup component -\n * A TagPickerGroup is a composite component that allows users to group tags together.\n */\nexport const TagPickerGroup: ForwardRefComponent<TagPickerGroupProps> = React.forwardRef((props, ref) => {\n  const state = useTagPickerGroup_unstable(props, ref);\n\n  useTagPickerGroupStyles_unstable(state);\n  useCustomStyleHook_unstable('useTagPickerGroupStyles_unstable')(state);\n  return renderTagPickerGroup_unstable(state, useTagGroupContextValues_unstable(state));\n});\n\nTagPickerGroup.displayName = 'TagPickerGroup';\n"],"names":["React","useTagPickerGroup_unstable","useTagGroupContextValues_unstable","renderTagPickerGroup_unstable","useTagPickerGroupStyles_unstable","useCustomStyleHook_unstable","TagPickerGroup","forwardRef","props","ref","state","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,0BAA0B,QAAQ,sBAAsB;AAEjE,SAASC,iCAAiC,QAAQ,uBAAuB;AACzE,SAASC,6BAA6B,QAAQ,yBAAyB;AACvE,SAASC,gCAAgC,QAAQ,mCAAmC;AACpF,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;;CAGC,GACD,OAAO,MAAMC,+BAA2DN,MAAMO,UAAU,CAAC,CAACC,OAAOC;IAC/F,MAAMC,QAAQT,2BAA2BO,OAAOC;IAEhDL,iCAAiCM;IACjCL,4BAA4B,oCAAoCK;IAChE,OAAOP,8BAA8BO,OAAOR,kCAAkCQ;AAChF,GAAG;AAEHJ,eAAeK,WAAW,GAAG"}

package/lib/components/TagPickerGroup/TagPickerGroup.types.js

@@ -0,0 +1 @@
+export { };

package/lib/components/TagPickerGroup/TagPickerGroup.types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["TagPickerGroup.types.ts"],"sourcesContent":["import type { TagGroupSlots, TagGroupState } from '@fluentui/react-tags';\nimport type { ComponentProps } from '@fluentui/react-utilities';\n\nexport type TagPickerGroupSlots = TagGroupSlots;\n\n/**\n * TagPickerGroup Props\n */\nexport type TagPickerGroupProps = ComponentProps<TagPickerGroupSlots>;\n\n/**\n * State used in rendering TagPickerGroup\n */\nexport type TagPickerGroupState = TagGroupState & {\n  hasSelectedOptions: boolean;\n};\n"],"names":[],"mappings":"AAAA,WAeE"}

package/lib/components/TagPickerGroup/index.js

@@ -0,0 +1,5 @@
+export * from './TagPickerGroup';
+export * from './TagPickerGroup.types';
+export * from './renderTagPickerGroup';
+export * from './useTagPickerGroup';
+export * from './useTagPickerGroupStyles.styles';

package/lib/components/TagPickerGroup/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './TagPickerGroup';\nexport * from './TagPickerGroup.types';\nexport * from './renderTagPickerGroup';\nexport * from './useTagPickerGroup';\nexport * from './useTagPickerGroupStyles.styles';\n"],"names":[],"mappings":"AAAA,cAAc,mBAAmB;AACjC,cAAc,yBAAyB;AACvC,cAAc,yBAAyB;AACvC,cAAc,sBAAsB;AACpC,cAAc,mCAAmC"}

package/lib/components/TagPickerGroup/renderTagPickerGroup.js

@@ -0,0 +1,7 @@
+import { renderTagGroup_unstable } from '@fluentui/react-tags';
+export function renderTagPickerGroup_unstable(state, contexts) {
+    if (!state.hasSelectedOptions) {
+        return null;
+    }
+    return renderTagGroup_unstable(state, contexts);
+}

package/lib/components/TagPickerGroup/renderTagPickerGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["renderTagPickerGroup.ts"],"sourcesContent":["import { TagPickerGroupState } from './TagPickerGroup.types';\nimport { renderTagGroup_unstable, type TagGroupContextValues } from '@fluentui/react-tags';\n\nexport function renderTagPickerGroup_unstable(state: TagPickerGroupState, contexts: TagGroupContextValues) {\n  if (!state.hasSelectedOptions) {\n    return null;\n  }\n\n  return renderTagGroup_unstable(state, contexts);\n}\n"],"names":["renderTagGroup_unstable","renderTagPickerGroup_unstable","state","contexts","hasSelectedOptions"],"mappings":"AACA,SAASA,uBAAuB,QAAoC,uBAAuB;AAE3F,OAAO,SAASC,8BAA8BC,KAA0B,EAAEC,QAA+B;IACvG,IAAI,CAACD,MAAME,kBAAkB,EAAE;QAC7B,OAAO;IACT;IAEA,OAAOJ,wBAAwBE,OAAOC;AACxC"}

package/lib/components/TagPickerGroup/useTagPickerGroup.js

@@ -0,0 +1,62 @@
+import * as React from 'react';
+import { useTagGroup_unstable } from '@fluentui/react-tags';
+import { useTagPickerContext_unstable } from '../../contexts/TagPickerContext';
+import { isHTMLElement, useEventCallback, useMergedRefs } from '@fluentui/react-utilities';
+import { tagPickerAppearanceToTagAppearance, tagPickerSizeToTagSize } from '../../utils/tagPicker2Tag';
+import { useArrowNavigationGroup } from '@fluentui/react-tabster';
+import { ArrowRight } from '@fluentui/keyboard-keys';
+/**
+ * Create the state required to render TagPickerGroup.
+ *
+ * The returned state can be modified with hooks such as usePickerTagGroupStyles_unstable,
+ * before being passed to renderPickerTagGroup_unstable.
+ *
+ * @param props - props from this instance of TagPickerGroup
+ * @param ref - reference to root HTMLDivElement of TagPickerGroup
+ */ export const useTagPickerGroup_unstable = (props, ref)=>{
+    const hasSelectedOptions = useTagPickerContext_unstable((ctx)=>ctx.selectedOptions.length > 0);
+    const hasOneSelectedOption = useTagPickerContext_unstable((ctx)=>ctx.selectedOptions.length === 1);
+    const triggerRef = useTagPickerContext_unstable((ctx)=>ctx.triggerRef);
+    const tagPickerGroupRef = useTagPickerContext_unstable((ctx)=>ctx.tagPickerGroupRef);
+    const selectOption = useTagPickerContext_unstable((ctx)=>ctx.selectOption);
+    const size = useTagPickerContext_unstable((ctx)=>tagPickerSizeToTagSize(ctx.size));
+    const appearance = useTagPickerContext_unstable((ctx)=>ctx.appearance);
+    const arrowNavigationProps = useArrowNavigationGroup({
+        circular: false,
+        axis: 'both',
+        memorizeCurrent: true
+    });
+    const state = useTagGroup_unstable({
+        role: 'listbox',
+        ...props,
+        ...arrowNavigationProps,
+        size,
+        appearance: tagPickerAppearanceToTagAppearance(appearance),
+        dismissible: true,
+        onKeyDown: useEventCallback((event)=>{
+            var _props_onKeyDown;
+            (_props_onKeyDown = props.onKeyDown) === null || _props_onKeyDown === void 0 ? void 0 : _props_onKeyDown.call(props, event);
+            if (isHTMLElement(event.target) && event.key === ArrowRight) {
+                var _triggerRef_current;
+                (_triggerRef_current = triggerRef.current) === null || _triggerRef_current === void 0 ? void 0 : _triggerRef_current.focus();
+            }
+        }),
+        onDismiss: useEventCallback((event, data)=>{
+            selectOption(event, {
+                value: data.value,
+                // These values no longer exist because the option has unregistered itself
+                // for the purposes of selection - these values aren't actually used
+                id: 'ERROR_DO_NOT_USE',
+                text: 'ERROR_DO_NOT_USE'
+            });
+            if (hasOneSelectedOption && !event.isDefaultPrevented()) {
+                var _triggerRef_current;
+                (_triggerRef_current = triggerRef.current) === null || _triggerRef_current === void 0 ? void 0 : _triggerRef_current.focus();
+            }
+        })
+    }, useMergedRefs(ref, tagPickerGroupRef));
+    return {
+        ...state,
+        hasSelectedOptions
+    };
+};

package/lib/components/TagPickerGroup/useTagPickerGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useTagPickerGroup.ts"],"sourcesContent":["import * as React from 'react';\nimport type { TagPickerGroupProps, TagPickerGroupState } from './TagPickerGroup.types';\nimport { useTagGroup_unstable } from '@fluentui/react-tags';\nimport { useTagPickerContext_unstable } from '../../contexts/TagPickerContext';\nimport { isHTMLElement, useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport { tagPickerAppearanceToTagAppearance, tagPickerSizeToTagSize } from '../../utils/tagPicker2Tag';\nimport { useArrowNavigationGroup } from '@fluentui/react-tabster';\nimport { ArrowRight } from '@fluentui/keyboard-keys';\n\n/**\n * Create the state required to render TagPickerGroup.\n *\n * The returned state can be modified with hooks such as usePickerTagGroupStyles_unstable,\n * before being passed to renderPickerTagGroup_unstable.\n *\n * @param props - props from this instance of TagPickerGroup\n * @param ref - reference to root HTMLDivElement of TagPickerGroup\n */\nexport const useTagPickerGroup_unstable = (\n  props: TagPickerGroupProps,\n  ref: React.Ref<HTMLDivElement>,\n): TagPickerGroupState => {\n  const hasSelectedOptions = useTagPickerContext_unstable(ctx => ctx.selectedOptions.length > 0);\n  const hasOneSelectedOption = useTagPickerContext_unstable(ctx => ctx.selectedOptions.length === 1);\n  const triggerRef = useTagPickerContext_unstable(ctx => ctx.triggerRef);\n  const tagPickerGroupRef = useTagPickerContext_unstable(ctx => ctx.tagPickerGroupRef);\n  const selectOption = useTagPickerContext_unstable(ctx => ctx.selectOption);\n  const size = useTagPickerContext_unstable(ctx => tagPickerSizeToTagSize(ctx.size));\n  const appearance = useTagPickerContext_unstable(ctx => ctx.appearance);\n\n  const arrowNavigationProps = useArrowNavigationGroup({\n    circular: false,\n    axis: 'both',\n    memorizeCurrent: true,\n  });\n\n  const state = useTagGroup_unstable(\n    {\n      role: 'listbox',\n      ...props,\n      ...arrowNavigationProps,\n      size,\n      appearance: tagPickerAppearanceToTagAppearance(appearance),\n      dismissible: true,\n      onKeyDown: useEventCallback(event => {\n        props.onKeyDown?.(event);\n        if (isHTMLElement(event.target) && event.key === ArrowRight) {\n          triggerRef.current?.focus();\n        }\n      }),\n      onDismiss: useEventCallback((event, data) => {\n        selectOption(event as React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>, {\n          value: data.value,\n          // These values no longer exist because the option has unregistered itself\n          // for the purposes of selection - these values aren't actually used\n          id: 'ERROR_DO_NOT_USE',\n          text: 'ERROR_DO_NOT_USE',\n        });\n        if (hasOneSelectedOption && !event.isDefaultPrevented()) {\n          triggerRef.current?.focus();\n        }\n      }),\n    },\n    useMergedRefs(ref, tagPickerGroupRef),\n  );\n\n  return {\n    ...state,\n    hasSelectedOptions,\n  };\n};\n"],"names":["React","useTagGroup_unstable","useTagPickerContext_unstable","isHTMLElement","useEventCallback","useMergedRefs","tagPickerAppearanceToTagAppearance","tagPickerSizeToTagSize","useArrowNavigationGroup","ArrowRight","useTagPickerGroup_unstable","props","ref","hasSelectedOptions","ctx","selectedOptions","length","hasOneSelectedOption","triggerRef","tagPickerGroupRef","selectOption","size","appearance","arrowNavigationProps","circular","axis","memorizeCurrent","state","role","dismissible","onKeyDown","event","target","key","current","focus","onDismiss","data","value","id","text","isDefaultPrevented"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,oBAAoB,QAAQ,uBAAuB;AAC5D,SAASC,4BAA4B,QAAQ,kCAAkC;AAC/E,SAASC,aAAa,EAAEC,gBAAgB,EAAEC,aAAa,QAAQ,4BAA4B;AAC3F,SAASC,kCAAkC,EAAEC,sBAAsB,QAAQ,4BAA4B;AACvG,SAASC,uBAAuB,QAAQ,0BAA0B;AAClE,SAASC,UAAU,QAAQ,0BAA0B;AAErD;;;;;;;;CAQC,GACD,OAAO,MAAMC,6BAA6B,CACxCC,OACAC;IAEA,MAAMC,qBAAqBX,6BAA6BY,CAAAA,MAAOA,IAAIC,eAAe,CAACC,MAAM,GAAG;IAC5F,MAAMC,uBAAuBf,6BAA6BY,CAAAA,MAAOA,IAAIC,eAAe,CAACC,MAAM,KAAK;IAChG,MAAME,aAAahB,6BAA6BY,CAAAA,MAAOA,IAAII,UAAU;IACrE,MAAMC,oBAAoBjB,6BAA6BY,CAAAA,MAAOA,IAAIK,iBAAiB;IACnF,MAAMC,eAAelB,6BAA6BY,CAAAA,MAAOA,IAAIM,YAAY;IACzE,MAAMC,OAAOnB,6BAA6BY,CAAAA,MAAOP,uBAAuBO,IAAIO,IAAI;IAChF,MAAMC,aAAapB,6BAA6BY,CAAAA,MAAOA,IAAIQ,UAAU;IAErE,MAAMC,uBAAuBf,wBAAwB;QACnDgB,UAAU;QACVC,MAAM;QACNC,iBAAiB;IACnB;IAEA,MAAMC,QAAQ1B,qBACZ;QACE2B,MAAM;QACN,GAAGjB,KAAK;QACR,GAAGY,oBAAoB;QACvBF;QACAC,YAAYhB,mCAAmCgB;QAC/CO,aAAa;QACbC,WAAW1B,iBAAiB2B,CAAAA;gBAC1BpB;aAAAA,mBAAAA,MAAMmB,SAAS,cAAfnB,uCAAAA,sBAAAA,OAAkBoB;YAClB,IAAI5B,cAAc4B,MAAMC,MAAM,KAAKD,MAAME,GAAG,KAAKxB,YAAY;oBAC3DS;iBAAAA,sBAAAA,WAAWgB,OAAO,cAAlBhB,0CAAAA,oBAAoBiB,KAAK;YAC3B;QACF;QACAC,WAAWhC,iBAAiB,CAAC2B,OAAOM;YAClCjB,aAAaW,OAAiF;gBAC5FO,OAAOD,KAAKC,KAAK;gBACjB,0EAA0E;gBAC1E,oEAAoE;gBACpEC,IAAI;gBACJC,MAAM;YACR;YACA,IAAIvB,wBAAwB,CAACc,MAAMU,kBAAkB,IAAI;oBACvDvB;iBAAAA,sBAAAA,WAAWgB,OAAO,cAAlBhB,0CAAAA,oBAAoBiB,KAAK;YAC3B;QACF;IACF,GACA9B,cAAcO,KAAKO;IAGrB,OAAO;QACL,GAAGQ,KAAK;QACRd;IACF;AACF,EAAE"}

package/lib/components/TagPickerGroup/useTagPickerGroupStyles.styles.js

@@ -0,0 +1,53 @@
+import { __styles, mergeClasses, shorthands } from '@griffel/react';
+import { useTagGroupStyles_unstable } from '@fluentui/react-tags';
+import { tokens } from '@fluentui/react-theme';
+import { tagSizeToTagPickerSize } from '../../utils/tagPicker2Tag';
+export const tagPickerGroupClassNames = {
+  root: 'fui-TagPickerGroup'
+};
+/**
+ * Styles for the root slot
+ */
+const useStyles = /*#__PURE__*/__styles({
+  root: {
+    Eh141a: "fni485r",
+    B7ck84d: "f1ewtqcl",
+    Bceei9c: "f113hnb5"
+  },
+  medium: {
+    z8tnut: "fp2oml8",
+    z189sj: ["fhxju0i", "f1cnd47f"],
+    Byoj8tv: "f1tdddsa",
+    uwmqm3: ["f1cnd47f", "fhxju0i"],
+    i8kkvl: "f1ufnopg",
+    Belr9w4: "f14sijuj"
+  },
+  large: {
+    z8tnut: "f1kwiid1",
+    z189sj: ["fhxju0i", "f1cnd47f"],
+    Byoj8tv: "f5b47ha",
+    uwmqm3: ["f1cnd47f", "fhxju0i"],
+    i8kkvl: "f1rjii52",
+    Belr9w4: "f1r7g2jn"
+  },
+  "extra-large": {
+    z8tnut: "f1kwiid1",
+    z189sj: ["fhxju0i", "f1cnd47f"],
+    Byoj8tv: "f5b47ha",
+    uwmqm3: ["f1cnd47f", "fhxju0i"],
+    i8kkvl: "f1rjii52",
+    Belr9w4: "f1r7g2jn"
+  }
+}, {
+  d: [".fni485r{flex-wrap:wrap;}", ".f1ewtqcl{box-sizing:border-box;}", ".f113hnb5{cursor:text;}", ".fp2oml8{padding-top:var(--spacingVerticalSNudge);}", ".fhxju0i{padding-right:0;}", ".f1cnd47f{padding-left:0;}", ".f1tdddsa{padding-bottom:var(--spacingVerticalSNudge);}", ".f1ufnopg{column-gap:var(--spacingHorizontalXS);}", ".f14sijuj{row-gap:var(--spacingHorizontalXS);}", ".f1kwiid1{padding-top:var(--spacingVerticalS);}", ".f5b47ha{padding-bottom:var(--spacingVerticalS);}", ".f1rjii52{column-gap:var(--spacingHorizontalSNudge);}", ".f1r7g2jn{row-gap:var(--spacingHorizontalSNudge);}"]
+});
+/**
+ * Apply styling to the TagPickerGroup slots based on the state
+ */
+export const useTagPickerGroupStyles_unstable = state => {
+  useTagGroupStyles_unstable(state);
+  const styles = useStyles();
+  state.root.className = mergeClasses(tagPickerGroupClassNames.root, styles[tagSizeToTagPickerSize(state.size)], styles.root, state.root.className);
+  return state;
+};
+//# sourceMappingURL=useTagPickerGroupStyles.styles.js.map

package/lib/components/TagPickerGroup/useTagPickerGroupStyles.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__styles","mergeClasses","shorthands","useTagGroupStyles_unstable","tokens","tagSizeToTagPickerSize","tagPickerGroupClassNames","root","useStyles","Eh141a","B7ck84d","Bceei9c","medium","z8tnut","z189sj","Byoj8tv","uwmqm3","i8kkvl","Belr9w4","large","d","useTagPickerGroupStyles_unstable","state","styles","className","size"],"sources":["useTagPickerGroupStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { useTagGroupStyles_unstable } from '@fluentui/react-tags';\nimport { tokens } from '@fluentui/react-theme';\nimport { tagSizeToTagPickerSize } from '../../utils/tagPicker2Tag';\nexport const tagPickerGroupClassNames = {\n    root: 'fui-TagPickerGroup'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n    root: {\n        flexWrap: 'wrap',\n        boxSizing: 'border-box',\n        cursor: 'text'\n    },\n    // size variants\n    medium: {\n        ...shorthands.padding(tokens.spacingVerticalSNudge, 0, tokens.spacingVerticalSNudge, 0),\n        ...shorthands.gap(tokens.spacingHorizontalXS)\n    },\n    large: {\n        ...shorthands.padding(tokens.spacingVerticalS, 0, tokens.spacingVerticalS, 0),\n        ...shorthands.gap(tokens.spacingHorizontalSNudge)\n    },\n    'extra-large': {\n        ...shorthands.padding(tokens.spacingVerticalS, 0, tokens.spacingVerticalS, 0),\n        ...shorthands.gap(tokens.spacingHorizontalSNudge)\n    }\n});\n/**\n * Apply styling to the TagPickerGroup slots based on the state\n */ export const useTagPickerGroupStyles_unstable = (state)=>{\n    useTagGroupStyles_unstable(state);\n    const styles = useStyles();\n    state.root.className = mergeClasses(tagPickerGroupClassNames.root, styles[tagSizeToTagPickerSize(state.size)], styles.root, state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AACrE,SAASC,0BAA0B,QAAQ,sBAAsB;AACjE,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,SAASC,sBAAsB,QAAQ,2BAA2B;AAClE,OAAO,MAAMC,wBAAwB,GAAG;EACpCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGR,QAAA;EAAAO,IAAA;IAAAE,MAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAC,KAAA;IAAAN,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAA;IAAAL,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;AAAA;EAAAE,CAAA;AAAA,CAmBrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,gCAAgC,GAAIC,KAAK,IAAG;EACzDnB,0BAA0B,CAACmB,KAAK,CAAC;EACjC,MAAMC,MAAM,GAAGf,SAAS,CAAC,CAAC;EAC1Bc,KAAK,CAACf,IAAI,CAACiB,SAAS,GAAGvB,YAAY,CAACK,wBAAwB,CAACC,IAAI,EAAEgB,MAAM,CAAClB,sBAAsB,CAACiB,KAAK,CAACG,IAAI,CAAC,CAAC,EAAEF,MAAM,CAAChB,IAAI,EAAEe,KAAK,CAACf,IAAI,CAACiB,SAAS,CAAC;EACjJ,OAAOF,KAAK;AAChB,CAAC"}