@fluentui/react-tag-picker 9.9.0 → 9.74.3-experimental.esm.20260709-49ee7a20cf.0

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/TagPickerControl/useTagPickerControl.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ExtractSlotProps, Slot } from '@fluentui/react-utilities';\nimport {\n  elementContains,\n  getIntrinsicElementProps,\n  slot,\n  useEventCallback,\n  useId,\n  useMergedRefs,\n} from '@fluentui/react-utilities';\nimport { useFluent_unstable } from '@fluentui/react-shared-contexts';\nimport type { TagPickerControlBaseState, 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';\nimport { useExpandLabel } from '../../utils/useExpandLabel';\n\n/**\n * Create the base state required to render TagPickerControl, without design-only state.\n *\n * @param props - props from this instance of TagPickerControl\n * @param ref - reference to root HTMLDivElement of TagPickerControl\n */\nexport const useTagPickerControlBase_unstable = (\n  props: TagPickerControlProps,\n  ref: React.Ref<HTMLDivElement>,\n): TagPickerControlBaseState => {\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 disabled = useTagPickerContext_unstable(ctx => ctx.disabled);\n  const invalid = useFieldContext_unstable()?.validationState === 'error';\n  const noPopover = useTagPickerContext_unstable(ctx => ctx.noPopover ?? false);\n\n  const { targetDocument } = useFluent_unstable();\n  const tagPickerId = useId('tagPicker-');\n  const rafIdRef = React.useRef<number | null>(null);\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: !noPopover,\n    defaultProps: {\n      'aria-expanded': open,\n      'aria-disabled': disabled ? 'true' : undefined,\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    const targetWindow = targetDocument?.defaultView;\n\n    if (targetWindow) {\n      rafIdRef.current = targetWindow.requestAnimationFrame(() => {\n        innerRef.current?.style.setProperty(tagPickerControlAsideWidthToken, `${entry.contentRect.width}px`);\n      });\n    }\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\n  const state: TagPickerControlBaseState = {\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 && !noPopover ? popoverId : undefined,\n        ...props,\n        onMouseDown: handleMouseDown,\n      }),\n      { elementType: 'div' },\n    ),\n    aside,\n    expandIcon,\n    secondaryAction,\n    disabled,\n    invalid,\n  };\n\n  const expandIconLabelRef = useExpandLabel({\n    tagPickerId,\n    state: state as Pick<TagPickerControlBaseState, 'expandIcon'>,\n  });\n\n  const expandIconLabelMergeRef = useMergedRefs(expandIcon?.ref, expandIconLabelRef);\n  if (state.expandIcon) {\n    state.expandIcon.ref = expandIconLabelMergeRef;\n  }\n\n  React.useEffect(() => {\n    if (rafIdRef.current && targetDocument?.defaultView) {\n      targetDocument.defaultView.cancelAnimationFrame(rafIdRef.current);\n    }\n  }, [targetDocument]);\n\n  return state;\n};\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 baseState = useTagPickerControlBase_unstable(props, ref);\n  const size = useTagPickerContext_unstable(ctx => ctx.size);\n  const appearance = useTagPickerContext_unstable(ctx => ctx.appearance);\n\n  return {\n    ...baseState,\n    size,\n    appearance,\n  };\n};\n"],"names":["React","elementContains","getIntrinsicElementProps","slot","useEventCallback","useId","useMergedRefs","useFluent_unstable","useTagPickerContext_unstable","ChevronDownRegular","useResizeObserverRef","tagPickerControlAsideWidthToken","useFieldContext_unstable","useExpandLabel","useTagPickerControlBase_unstable","props","ref","targetRef","ctx","triggerRef","tagPickerGroupRef","open","popoverId","setOpen","secondaryInnerActionRef","secondaryActionRef","disabled","invalid","validationState","noPopover","targetDocument","tagPickerId","rafIdRef","useRef","innerRef","expandIconRef","asideRef","secondaryAction","optional","elementType","expandIcon","renderByDefault","defaultProps","undefined","children","role","expandIconMergeRef","observerRef","entry","targetWindow","defaultView","current","requestAnimationFrame","style","setProperty","contentRect","width","aside","Boolean","mergedAsideRefs","handleMouseDown","event","isDefaultPrevented","target","preventDefault","focus","state","components","root","always","onMouseDown","expandIconLabelRef","expandIconLabelMergeRef","useEffect","cancelAnimationFrame","useTagPickerControl_unstable","baseState","size","appearance"],"mappings":"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"}
+{"version":3,"sources":["../src/components/TagPickerControl/useTagPickerControl.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ExtractSlotProps, Slot } from '@fluentui/react-utilities';\nimport {\n  elementContains,\n  getIntrinsicElementProps,\n  slot,\n  useEventCallback,\n  useId,\n  useMergedRefs,\n} from '@fluentui/react-utilities';\nimport { useFluent_unstable } from '@fluentui/react-shared-contexts';\nimport type { TagPickerControlBaseState, 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';\nimport { useExpandLabel } from '../../utils/useExpandLabel';\n\n/**\n * Create the base state required to render TagPickerControl, without design-only state.\n *\n * @param props - props from this instance of TagPickerControl\n * @param ref - reference to root HTMLDivElement of TagPickerControl\n */\nexport const useTagPickerControlBase_unstable = (\n  props: TagPickerControlProps,\n  ref: React.Ref<HTMLDivElement>,\n): TagPickerControlBaseState => {\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 disabled = useTagPickerContext_unstable(ctx => ctx.disabled);\n  const invalid = useFieldContext_unstable()?.validationState === 'error';\n  const noPopover = useTagPickerContext_unstable(ctx => ctx.noPopover ?? false);\n\n  const { targetDocument } = useFluent_unstable();\n  const tagPickerId = useId('tagPicker-');\n  const rafIdRef = React.useRef<number | null>(null);\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: !noPopover,\n    defaultProps: {\n      'aria-expanded': open,\n      'aria-disabled': disabled ? 'true' : undefined,\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    const targetWindow = targetDocument?.defaultView;\n\n    if (targetWindow) {\n      rafIdRef.current = targetWindow.requestAnimationFrame(() => {\n        innerRef.current?.style.setProperty(tagPickerControlAsideWidthToken, `${entry.contentRect.width}px`);\n      });\n    }\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\n  const state: TagPickerControlBaseState = {\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 && !noPopover ? popoverId : undefined,\n        ...props,\n        onMouseDown: handleMouseDown,\n      }),\n      { elementType: 'div' },\n    ),\n    aside,\n    expandIcon,\n    secondaryAction,\n    disabled,\n    invalid,\n  };\n\n  const expandIconLabelRef = useExpandLabel({\n    tagPickerId,\n    state: state as Pick<TagPickerControlBaseState, 'expandIcon'>,\n  });\n\n  const expandIconLabelMergeRef = useMergedRefs(expandIcon?.ref, expandIconLabelRef);\n  if (state.expandIcon) {\n    state.expandIcon.ref = expandIconLabelMergeRef;\n  }\n\n  React.useEffect(() => {\n    if (rafIdRef.current && targetDocument?.defaultView) {\n      targetDocument.defaultView.cancelAnimationFrame(rafIdRef.current);\n    }\n  }, [targetDocument]);\n\n  return state;\n};\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 baseState = useTagPickerControlBase_unstable(props, ref);\n  const size = useTagPickerContext_unstable(ctx => ctx.size);\n  const appearance = useTagPickerContext_unstable(ctx => ctx.appearance);\n\n  return {\n    ...baseState,\n    size,\n    appearance,\n  };\n};\n"],"names":["React","elementContains","getIntrinsicElementProps","slot","useEventCallback","useId","useMergedRefs","useFluent_unstable","useTagPickerContext_unstable","ChevronDownRegular","useResizeObserverRef","tagPickerControlAsideWidthToken","useFieldContext_unstable","useExpandLabel","useTagPickerControlBase_unstable","props","ref","targetRef","ctx","triggerRef","tagPickerGroupRef","open","popoverId","setOpen","secondaryInnerActionRef","secondaryActionRef","disabled","invalid","validationState","noPopover","targetDocument","tagPickerId","rafIdRef","useRef","innerRef","expandIconRef","asideRef","secondaryAction","optional","elementType","expandIcon","renderByDefault","defaultProps","undefined","children","role","expandIconMergeRef","observerRef","entry","targetWindow","defaultView","current","requestAnimationFrame","style","setProperty","contentRect","width","aside","Boolean","mergedAsideRefs","handleMouseDown","event","isDefaultPrevented","target","preventDefault","focus","state","components","root","always","onMouseDown","expandIconLabelRef","expandIconLabelMergeRef","useEffect","cancelAnimationFrame","useTagPickerControl_unstable","baseState","size","appearance"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAE/B,SACEC,eAAe,EACfC,wBAAwB,EACxBC,IAAI,EACJC,gBAAgB,EAChBC,KAAK,EACLC,aAAa,QACR,4BAA4B;AACnC,SAASC,kBAAkB,QAAQ,kCAAkC;AAErE,SAASC,4BAA4B,QAAQ,qCAAkC;AAC/E,SAASC,kBAAkB,QAAQ,wBAAwB;AAC3D,SAASC,oBAAoB,QAAQ,sCAAmC;AACxE,SAASC,+BAA+B,QAAQ,wCAAqC;AACrF,SAASC,wBAAwB,QAAQ,wBAAwB;AACjE,SAASC,cAAc,QAAQ,gCAA6B;AAE5D;;;;;CAKC,GACD,OAAO,MAAMC,mCAAmC,CAC9CC,OACAC;QAUgBJ;IARhB,MAAMK,YAAYT,6BAA6BU,CAAAA,MAAOA,IAAID,SAAS;IACnE,MAAME,aAAaX,6BAA6BU,CAAAA,MAAOA,IAAIC,UAAU;IACrE,MAAMC,oBAAoBZ,6BAA6BU,CAAAA,MAAOA,IAAIE,iBAAiB;IACnF,MAAMC,OAAOb,6BAA6BU,CAAAA,MAAOA,IAAIG,IAAI;IACzD,MAAMC,YAAYd,6BAA6BU,CAAAA,MAAOA,IAAII,SAAS;IACnE,MAAMC,UAAUf,6BAA6BU,CAAAA,MAAOA,IAAIK,OAAO;IAC/D,MAAMC,0BAA0BhB,6BAA6BU,CAAAA,MAAOA,IAAIO,kBAAkB;IAC1F,MAAMC,WAAWlB,6BAA6BU,CAAAA,MAAOA,IAAIQ,QAAQ;IACjE,MAAMC,UAAUf,EAAAA,4BAAAA,wCAAAA,gDAAAA,0BAA4BgB,eAAe,MAAK;IAChE,MAAMC,YAAYrB,6BAA6BU,CAAAA;YAAOA;eAAAA,CAAAA,iBAAAA,IAAIW,SAAS,cAAbX,4BAAAA,iBAAiB;;IAEvE,MAAM,EAAEY,cAAc,EAAE,GAAGvB;IAC3B,MAAMwB,cAAc1B,MAAM;IAC1B,MAAM2B,WAAWhC,MAAMiC,MAAM,CAAgB;IAE7C,MAAMC,WAAWlC,MAAMiC,MAAM,CAAiB;IAC9C,MAAME,gBAAgBnC,MAAMiC,MAAM,CAAkB;IACpD,MAAMG,WAAWpC,MAAMiC,MAAM,CAAkB;IAE/C,MAAMI,kBAAkBlC,KAAKmC,QAAQ,CAACvB,MAAMsB,eAAe,EAAE;QAC3DE,aAAa;IACf;IACA,MAAMd,qBAAqBnB,cAAckB,yBAAyBa,4BAAAA,sCAAAA,gBAAiBrB,GAAG;IACtF,IAAIqB,iBAAiB;QACnBA,gBAAgBrB,GAAG,GAAGS;IACxB;IAEA,MAAMe,aAAarC,KAAKmC,QAAQ,CAACvB,MAAMyB,UAAU,EAAE;QACjDC,iBAAiB,CAACZ;QAClBa,cAAc;YACZ,iBAAiBrB;YACjB,iBAAiBK,WAAW,SAASiB;YACrCC,wBAAU,oBAACnC;YACXoC,MAAM;QACR;QACAN,aAAa;IACf;IAEA,MAAMO,qBAAqBxC,cAAckC,uBAAAA,iCAAAA,WAAYxB,GAAG,EAAEmB;IAC1D,IAAIK,YAAY;QACdA,WAAWxB,GAAG,GAAG8B;IACnB;IAEA,MAAMC,cAAcrC,qBAAsC,CAAC,CAACsC,MAAM;QAChE,MAAMC,eAAenB,2BAAAA,qCAAAA,eAAgBoB,WAAW;QAEhD,IAAID,cAAc;YAChBjB,SAASmB,OAAO,GAAGF,aAAaG,qBAAqB,CAAC;oBACpDlB;iBAAAA,oBAAAA,SAASiB,OAAO,cAAhBjB,wCAAAA,kBAAkBmB,KAAK,CAACC,WAAW,CAAC3C,iCAAiC,GAAGqC,MAAMO,WAAW,CAACC,KAAK,CAAC,EAAE,CAAC;YACrG;QACF;IACF;IACA,MAAMC,QAAQtD,KAAKmC,QAAQ,CAAiCK,WAAW;QACrEJ,aAAa;QACbE,iBAAiBiB,QAAQrB,mBAAmBG;QAC5CE,cAAc;YACZ1B,KAAK+B;QACP;IACF;IACA,MAAMY,kBAAkBrD,cAAc8B,UAAUqB,kBAAAA,4BAAAA,MAAOzC,GAAG;IAC1D,IAAIyC,OAAO;QACTA,MAAMzC,GAAG,GAAG2C;IACd;IAEA,MAAMC,kBAAkBxD,iBAAiB,CAACyD;QACxC,IAAIA,MAAMC,kBAAkB,IAAI;YAC9B;QACF;QACA,IACE7D,gBAAgBkC,cAAcgB,OAAO,EAAEU,MAAME,MAAM,KACnDF,MAAME,MAAM,KAAK7B,SAASiB,OAAO,IACjCU,MAAME,MAAM,KAAK3C,kBAAkB+B,OAAO,IAC1CU,MAAME,MAAM,KAAK3B,SAASe,OAAO,EACjC;gBAGAhC;YAFA0C,MAAMG,cAAc;YACpBzC,QAAQsC,OAAO,CAACxC;aAChBF,sBAAAA,WAAWgC,OAAO,cAAlBhC,0CAAAA,oBAAoB8C,KAAK;QAC3B;IACF;IAEA,MAAMC,QAAmC;QACvCC,YAAY;YACVC,MAAM;YACN5B,YAAY;YACZH,iBAAiB;YACjBoB,OAAO;QACT;QACAW,MAAMjE,KAAKkE,MAAM,CACfnE,yBAAyB,OAAO;YAC9Bc,KAAKV,cAAcU,KAAKC,WAAWiB;YACnC,aAAab,QAAQ,CAACQ,YAAYP,YAAYqB;YAC9C,GAAG5B,KAAK;YACRuD,aAAaV;QACf,IACA;YAAErB,aAAa;QAAM;QAEvBkB;QACAjB;QACAH;QACAX;QACAC;IACF;IAEA,MAAM4C,qBAAqB1D,eAAe;QACxCkB;QACAmC,OAAOA;IACT;IAEA,MAAMM,0BAA0BlE,cAAckC,uBAAAA,iCAAAA,WAAYxB,GAAG,EAAEuD;IAC/D,IAAIL,MAAM1B,UAAU,EAAE;QACpB0B,MAAM1B,UAAU,CAACxB,GAAG,GAAGwD;IACzB;IAEAxE,MAAMyE,SAAS,CAAC;QACd,IAAIzC,SAASmB,OAAO,KAAIrB,2BAAAA,qCAAAA,eAAgBoB,WAAW,GAAE;YACnDpB,eAAeoB,WAAW,CAACwB,oBAAoB,CAAC1C,SAASmB,OAAO;QAClE;IACF,GAAG;QAACrB;KAAe;IAEnB,OAAOoC;AACT,EAAE;AAEF;;;;;;;;CAQC,GACD,OAAO,MAAMS,+BAA+B,CAC1C5D,OACAC;IAEA,MAAM4D,YAAY9D,iCAAiCC,OAAOC;IAC1D,MAAM6D,OAAOrE,6BAA6BU,CAAAA,MAAOA,IAAI2D,IAAI;IACzD,MAAMC,aAAatE,6BAA6BU,CAAAA,MAAOA,IAAI4D,UAAU;IAErE,OAAO;QACL,GAAGF,SAAS;QACZC;QACAC;IACF;AACF,EAAE"}

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

@@ -1,7 +1,7 @@
 'use client';
 
-import { __styles, mergeClasses, shorthands } from '@griffel/react';
-import { tokens } from '@fluentui/react-theme';
+import { __styles, mergeClasses, shorthands } from "@griffel/react";
+import { tokens } from "@fluentui/react-theme";
 export const tagPickerControlClassNames = {
   root: 'fui-TagPickerControl',
   expandIcon: 'fui-TagPickerControl__expandIcon',

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

@@ -1 +1 @@
-{"version":3,"names":["__styles","mergeClasses","shorthands","tokens","tagPickerControlClassNames","root","expandIcon","secondaryAction","aside","tagPickerControlAsideWidthToken","useStyles","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","z189sj","uwmqm3","Bt984gj","i8kkvl","B7ck84d","mc9l5x","Bf4jedk","qhf8xq","Eh141a","Bbr2w1p","Bduesf4","Bpq79vn","li1rpt","Bsft5z2","E3zdtr","Eqx8gd","By385i5","B1piin3","Dlnsje","d9w3h3","B3778ie","B1q35kw","Bw17bha","Bcgy8vk","Bjuhk93","Gjdm7m","b1kco5","Ba2ppi3","F2fol1","lck23g","wi16st","ywj3b2","umuwi5","Blcqepd","nplu4u","Bioka5o","Bnupc0a","bing71","Bercvud","listbox","E5pizo","Bxyxcbc","listboxCollapsed","medium","sshi5w","large","outline","De3pzq","Bgfg5da","B9xav0g","oivjwe","Bn0qgzm","B4g9neb","zhjwy3","wvpqe5","ibv6hh","u1mtju","h3c5rm","vrafjx","Bekrc4i","i8vvqc","g2u3we","icvyot","B4j52fo","irswps","outlineInteractive","Bgoe8wy","Bwzppfd","oetu4i","gg5e9n","B6oc9vd","ak43y8","wmxk5l","B50zh58","Bvq3b66","Brahy3i","zoxjo1","an54nd","underline","invalid","tvckwq","gk2u95","hhx65j","Bxowmz0","invalidUnderline","disabled","Bceei9c","Bcq6wej","Jcjdmf","sc4o1m","Bosien3","d","p","w","m","h","a","useAsideStyles","Bhzewxz","j35jbq","Bqenvij","iconSizes","small","useIconStyles","icon","sj55zd","Brf1p80","qb2dma","Be2twd7","Bo70h7d","Frg6f3","useSecondaryActionStyles","useTagPickerControlStyles_unstable","state","styles","iconStyles","asideStyles","secondaryActionStyles","className","size","appearance"],"sources":["useTagPickerControlStyles.styles.js"],"sourcesContent":["'use client';\nimport { 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        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            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        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        border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,\n        borderBottomColor: tokens.colorNeutralStrokeAccessible\n    },\n    outlineInteractive: {\n        '&:hover': {\n            ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n            borderBottomColor: tokens.colorNeutralStrokeAccessibleHover\n        },\n        '&:active': {\n            ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n            borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed\n        },\n        '&:focus-within': {\n            ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n            borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed\n        }\n    },\n    underline: {\n        backgroundColor: tokens.colorTransparentBackground,\n        borderBottom: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStrokeAccessible}`,\n        borderRadius: '0'\n    },\n    'filled-lighter': {\n        backgroundColor: tokens.colorNeutralBackground1,\n        border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`\n    },\n    'filled-darker': {\n        backgroundColor: tokens.colorNeutralBackground3,\n        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: 'flex',\n        position: 'absolute',\n        top: '0',\n        right: tokens.spacingHorizontalM,\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: 'flex',\n        justifyContent: 'center',\n        alignItems: 'center',\n        alignSelf: 'flex-start',\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        minHeight: '32px'\n    },\n    large: {\n        fontSize: iconSizes.medium,\n        marginLeft: tokens.spacingHorizontalXXS,\n        minHeight: '40px'\n    },\n    'extra-large': {\n        fontSize: iconSizes.large,\n        marginLeft: tokens.spacingHorizontalSNudge,\n        minHeight: '44px'\n    },\n    disabled: {\n        color: tokens.colorNeutralForegroundDisabled,\n        cursor: 'not-allowed'\n    }\n});\nconst useSecondaryActionStyles = makeStyles({\n    root: {\n        display: 'flex'\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    const secondaryActionStyles = useSecondaryActionStyles();\n    // eslint-disable-next-line react-hooks/immutability\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        // eslint-disable-next-line react-hooks/immutability\n        state.aside.className = mergeClasses(tagPickerControlClassNames.aside, asideStyles.root, asideStyles[state.size], state.aside.className);\n    }\n    if (state.expandIcon) {\n        // eslint-disable-next-line react-hooks/immutability\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        // eslint-disable-next-line react-hooks/immutability\n        state.secondaryAction.className = mergeClasses(tagPickerControlClassNames.secondaryAction, secondaryActionStyles.root, state.secondaryAction.className);\n    }\n    return state;\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["__styles","mergeClasses","shorthands","tokens","tagPickerControlClassNames","root","expandIcon","secondaryAction","aside","tagPickerControlAsideWidthToken","useStyles","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","z189sj","uwmqm3","Bt984gj","i8kkvl","B7ck84d","mc9l5x","Bf4jedk","qhf8xq","Eh141a","Bbr2w1p","Bduesf4","Bpq79vn","li1rpt","Bsft5z2","E3zdtr","Eqx8gd","By385i5","B1piin3","Dlnsje","d9w3h3","B3778ie","B1q35kw","Bw17bha","Bcgy8vk","Bjuhk93","Gjdm7m","b1kco5","Ba2ppi3","F2fol1","lck23g","wi16st","ywj3b2","umuwi5","Blcqepd","nplu4u","Bioka5o","Bnupc0a","bing71","Bercvud","listbox","E5pizo","Bxyxcbc","listboxCollapsed","medium","sshi5w","large","outline","De3pzq","Bgfg5da","B9xav0g","oivjwe","Bn0qgzm","B4g9neb","zhjwy3","wvpqe5","ibv6hh","u1mtju","h3c5rm","vrafjx","Bekrc4i","i8vvqc","g2u3we","icvyot","B4j52fo","irswps","outlineInteractive","Bgoe8wy","Bwzppfd","oetu4i","gg5e9n","B6oc9vd","ak43y8","wmxk5l","B50zh58","Bvq3b66","Brahy3i","zoxjo1","an54nd","underline","invalid","tvckwq","gk2u95","hhx65j","Bxowmz0","invalidUnderline","disabled","Bceei9c","Bcq6wej","Jcjdmf","sc4o1m","Bosien3","d","p","w","m","h","a","useAsideStyles","Bhzewxz","j35jbq","Bqenvij","iconSizes","small","useIconStyles","icon","sj55zd","Brf1p80","qb2dma","Be2twd7","Bo70h7d","Frg6f3","useSecondaryActionStyles","useTagPickerControlStyles_unstable","state","styles","iconStyles","asideStyles","secondaryActionStyles","className","size","appearance"],"sources":["useTagPickerControlStyles.styles.js"],"sourcesContent":["'use client';\nimport { 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        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            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        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        border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,\n        borderBottomColor: tokens.colorNeutralStrokeAccessible\n    },\n    outlineInteractive: {\n        '&:hover': {\n            ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n            borderBottomColor: tokens.colorNeutralStrokeAccessibleHover\n        },\n        '&:active': {\n            ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n            borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed\n        },\n        '&:focus-within': {\n            ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n            borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed\n        }\n    },\n    underline: {\n        backgroundColor: tokens.colorTransparentBackground,\n        borderBottom: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStrokeAccessible}`,\n        borderRadius: '0'\n    },\n    'filled-lighter': {\n        backgroundColor: tokens.colorNeutralBackground1,\n        border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`\n    },\n    'filled-darker': {\n        backgroundColor: tokens.colorNeutralBackground3,\n        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: 'flex',\n        position: 'absolute',\n        top: '0',\n        right: tokens.spacingHorizontalM,\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: 'flex',\n        justifyContent: 'center',\n        alignItems: 'center',\n        alignSelf: 'flex-start',\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        minHeight: '32px'\n    },\n    large: {\n        fontSize: iconSizes.medium,\n        marginLeft: tokens.spacingHorizontalXXS,\n        minHeight: '40px'\n    },\n    'extra-large': {\n        fontSize: iconSizes.large,\n        marginLeft: tokens.spacingHorizontalSNudge,\n        minHeight: '44px'\n    },\n    disabled: {\n        color: tokens.colorNeutralForegroundDisabled,\n        cursor: 'not-allowed'\n    }\n});\nconst useSecondaryActionStyles = makeStyles({\n    root: {\n        display: 'flex'\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    const secondaryActionStyles = useSecondaryActionStyles();\n    // eslint-disable-next-line react-hooks/immutability\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        // eslint-disable-next-line react-hooks/immutability\n        state.aside.className = mergeClasses(tagPickerControlClassNames.aside, asideStyles.root, asideStyles[state.size], state.aside.className);\n    }\n    if (state.expandIcon) {\n        // eslint-disable-next-line react-hooks/immutability\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        // eslint-disable-next-line react-hooks/immutability\n        state.secondaryAction.className = mergeClasses(tagPickerControlClassNames.secondaryAction, secondaryActionStyles.root, state.secondaryAction.className);\n    }\n    return state;\n};\n"],"mappings":"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","ignoreList":[]}

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

@@ -1,6 +1,6 @@
 'use client';
-import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
-import { tokens } from '@fluentui/react-theme';
+import { makeStyles, mergeClasses, shorthands } from "@griffel/react";
+import { tokens } from "@fluentui/react-theme";
 export const tagPickerControlClassNames = {
     root: 'fui-TagPickerControl',
     expandIcon: 'fui-TagPickerControl__expandIcon',

package/lib/components/TagPickerGroup/TagPickerGroup.js

@@ -1,10 +1,10 @@
 'use client';
-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';
+import * as React from "react";
+import { useTagPickerGroup_unstable } from "./useTagPickerGroup.js";
+import { useTagGroupContextValues_unstable } from "@fluentui/react-tags";
+import { renderTagPickerGroup_unstable } from "./renderTagPickerGroup.js";
+import { useTagPickerGroupStyles_unstable } from "./useTagPickerGroupStyles.styles.js";
+import { useCustomStyleHook_unstable } from "@fluentui/react-shared-contexts";
 /**
  * TagPickerGroup component -
  * A TagPickerGroup is a composite component that allows users to group tags together.

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/TagPickerGroup/TagPickerGroup.tsx"],"sourcesContent":["'use client';\n\nimport * 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;AAEA,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"}
+{"version":3,"sources":["../src/components/TagPickerGroup/TagPickerGroup.tsx"],"sourcesContent":["'use client';\n\nimport * 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;AAEA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,0BAA0B,QAAQ,yBAAsB;AAEjE,SAASC,iCAAiC,QAAQ,uBAAuB;AACzE,SAASC,6BAA6B,QAAQ,4BAAyB;AACvE,SAASC,gCAAgC,QAAQ,sCAAmC;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/index.js

@@ -1,4 +1,4 @@
-export { TagPickerGroup } from './TagPickerGroup';
-export { renderTagPickerGroup_unstable } from './renderTagPickerGroup';
-export { useTagPickerGroup_unstable } from './useTagPickerGroup';
-export { tagPickerGroupClassNames, useTagPickerGroupStyles_unstable } from './useTagPickerGroupStyles.styles';
+export { TagPickerGroup } from "./TagPickerGroup.js";
+export { renderTagPickerGroup_unstable } from "./renderTagPickerGroup.js";
+export { useTagPickerGroup_unstable } from "./useTagPickerGroup.js";
+export { tagPickerGroupClassNames, useTagPickerGroupStyles_unstable } from "./useTagPickerGroupStyles.styles.js";

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/TagPickerGroup/index.ts"],"sourcesContent":["export { TagPickerGroup } from './TagPickerGroup';\nexport type { TagPickerGroupProps, TagPickerGroupSlots, TagPickerGroupState } from './TagPickerGroup.types';\nexport { renderTagPickerGroup_unstable } from './renderTagPickerGroup';\nexport { useTagPickerGroup_unstable } from './useTagPickerGroup';\nexport { tagPickerGroupClassNames, useTagPickerGroupStyles_unstable } from './useTagPickerGroupStyles.styles';\n"],"names":["TagPickerGroup","renderTagPickerGroup_unstable","useTagPickerGroup_unstable","tagPickerGroupClassNames","useTagPickerGroupStyles_unstable"],"mappings":"AAAA,SAASA,cAAc,QAAQ,mBAAmB;AAElD,SAASC,6BAA6B,QAAQ,yBAAyB;AACvE,SAASC,0BAA0B,QAAQ,sBAAsB;AACjE,SAASC,wBAAwB,EAAEC,gCAAgC,QAAQ,mCAAmC"}
+{"version":3,"sources":["../src/components/TagPickerGroup/index.ts"],"sourcesContent":["export { TagPickerGroup } from './TagPickerGroup';\nexport type { TagPickerGroupProps, TagPickerGroupSlots, TagPickerGroupState } from './TagPickerGroup.types';\nexport { renderTagPickerGroup_unstable } from './renderTagPickerGroup';\nexport { useTagPickerGroup_unstable } from './useTagPickerGroup';\nexport { tagPickerGroupClassNames, useTagPickerGroupStyles_unstable } from './useTagPickerGroupStyles.styles';\n"],"names":["TagPickerGroup","renderTagPickerGroup_unstable","useTagPickerGroup_unstable","tagPickerGroupClassNames","useTagPickerGroupStyles_unstable"],"mappings":"AAAA,SAASA,cAAc,QAAQ,sBAAmB;AAElD,SAASC,6BAA6B,QAAQ,4BAAyB;AACvE,SAASC,0BAA0B,QAAQ,yBAAsB;AACjE,SAASC,wBAAwB,EAAEC,gCAAgC,QAAQ,sCAAmC"}

package/lib/components/TagPickerGroup/renderTagPickerGroup.js

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

package/lib/components/TagPickerGroup/useTagPickerGroup.js

@@ -1,10 +1,10 @@
 'use client';
-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';
+import { useTagGroup_unstable } from "@fluentui/react-tags";
+import { useTagPickerContext_unstable } from "../../contexts/TagPickerContext.js";
+import { isHTMLElement, useEventCallback, useMergedRefs } from "@fluentui/react-utilities";
+import { tagPickerAppearanceToTagAppearance, tagPickerSizeToTagSize } from "../../utils/tagPicker2Tag.js";
+import { useArrowNavigationGroup } from "@fluentui/react-tabster";
+import { ArrowRight } from "@fluentui/keyboard-keys";
 /**
  * Create the state required to render TagPickerGroup.
  *

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/TagPickerGroup/useTagPickerGroup.ts"],"sourcesContent":["'use client';\n\nimport type * 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  const disabled = useTagPickerContext_unstable(ctx => ctx.disabled);\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      disabled,\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":["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","disabled","arrowNavigationProps","circular","axis","memorizeCurrent","state","role","dismissible","onKeyDown","event","target","key","current","focus","onDismiss","data","value","id","text","isDefaultPrevented"],"mappings":"AAAA;AAIA,SAASA,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;IACrE,MAAMC,WAAWrB,6BAA6BY,CAAAA,MAAOA,IAAIS,QAAQ;IAEjE,MAAMC,uBAAuBhB,wBAAwB;QACnDiB,UAAU;QACVC,MAAM;QACNC,iBAAiB;IACnB;IAEA,MAAMC,QAAQ3B,qBACZ;QACE4B,MAAM;QACNN;QACA,GAAGZ,KAAK;QACR,GAAGa,oBAAoB;QACvBH;QACAC,YAAYhB,mCAAmCgB;QAC/CQ,aAAa;QACbC,WAAW3B,iBAAiB4B,CAAAA;gBAC1BrB;aAAAA,mBAAAA,MAAMoB,SAAS,cAAfpB,uCAAAA,sBAAAA,OAAkBqB;YAClB,IAAI7B,cAAc6B,MAAMC,MAAM,KAAKD,MAAME,GAAG,KAAKzB,YAAY;oBAC3DS;iBAAAA,sBAAAA,WAAWiB,OAAO,cAAlBjB,0CAAAA,oBAAoBkB,KAAK;YAC3B;QACF;QACAC,WAAWjC,iBAAiB,CAAC4B,OAAOM;YAClClB,aAAaY,OAAiF;gBAC5FO,OAAOD,KAAKC,KAAK;gBACjB,0EAA0E;gBAC1E,oEAAoE;gBACpEC,IAAI;gBACJC,MAAM;YACR;YACA,IAAIxB,wBAAwB,CAACe,MAAMU,kBAAkB,IAAI;oBACvDxB;iBAAAA,sBAAAA,WAAWiB,OAAO,cAAlBjB,0CAAAA,oBAAoBkB,KAAK;YAC3B;QACF;IACF,GACA/B,cAAcO,KAAKO;IAGrB,OAAO;QACL,GAAGS,KAAK;QACRf;IACF;AACF,EAAE"}
+{"version":3,"sources":["../src/components/TagPickerGroup/useTagPickerGroup.ts"],"sourcesContent":["'use client';\n\nimport type * 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  const disabled = useTagPickerContext_unstable(ctx => ctx.disabled);\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      disabled,\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":["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","disabled","arrowNavigationProps","circular","axis","memorizeCurrent","state","role","dismissible","onKeyDown","event","target","key","current","focus","onDismiss","data","value","id","text","isDefaultPrevented"],"mappings":"AAAA;AAIA,SAASA,oBAAoB,QAAQ,uBAAuB;AAC5D,SAASC,4BAA4B,QAAQ,qCAAkC;AAC/E,SAASC,aAAa,EAAEC,gBAAgB,EAAEC,aAAa,QAAQ,4BAA4B;AAC3F,SAASC,kCAAkC,EAAEC,sBAAsB,QAAQ,+BAA4B;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;IACrE,MAAMC,WAAWrB,6BAA6BY,CAAAA,MAAOA,IAAIS,QAAQ;IAEjE,MAAMC,uBAAuBhB,wBAAwB;QACnDiB,UAAU;QACVC,MAAM;QACNC,iBAAiB;IACnB;IAEA,MAAMC,QAAQ3B,qBACZ;QACE4B,MAAM;QACNN;QACA,GAAGZ,KAAK;QACR,GAAGa,oBAAoB;QACvBH;QACAC,YAAYhB,mCAAmCgB;QAC/CQ,aAAa;QACbC,WAAW3B,iBAAiB4B,CAAAA;gBAC1BrB;aAAAA,mBAAAA,MAAMoB,SAAS,cAAfpB,uCAAAA,sBAAAA,OAAkBqB;YAClB,IAAI7B,cAAc6B,MAAMC,MAAM,KAAKD,MAAME,GAAG,KAAKzB,YAAY;oBAC3DS;iBAAAA,sBAAAA,WAAWiB,OAAO,cAAlBjB,0CAAAA,oBAAoBkB,KAAK;YAC3B;QACF;QACAC,WAAWjC,iBAAiB,CAAC4B,OAAOM;YAClClB,aAAaY,OAAiF;gBAC5FO,OAAOD,KAAKC,KAAK;gBACjB,0EAA0E;gBAC1E,oEAAoE;gBACpEC,IAAI;gBACJC,MAAM;YACR;YACA,IAAIxB,wBAAwB,CAACe,MAAMU,kBAAkB,IAAI;oBACvDxB;iBAAAA,sBAAAA,WAAWiB,OAAO,cAAlBjB,0CAAAA,oBAAoBkB,KAAK;YAC3B;QACF;IACF,GACA/B,cAAcO,KAAKO;IAGrB,OAAO;QACL,GAAGS,KAAK;QACRf;IACF;AACF,EAAE"}

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

@@ -1,9 +1,9 @@
 'use client';
 
-import { __styles, mergeClasses } from '@griffel/react';
-import { useTagGroupStyles_unstable } from '@fluentui/react-tags';
-import { tokens } from '@fluentui/react-theme';
-import { tagSizeToTagPickerSize } from '../../utils/tagPicker2Tag';
+import { __styles, mergeClasses } from "@griffel/react";
+import { useTagGroupStyles_unstable } from "@fluentui/react-tags";
+import { tokens } from "@fluentui/react-theme";
+import { tagSizeToTagPickerSize } from "../../utils/tagPicker2Tag.js";
 export const tagPickerGroupClassNames = {
   root: 'fui-TagPickerGroup'
 };

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

@@ -1 +1 @@
-{"version":3,"names":["__styles","mergeClasses","useTagGroupStyles_unstable","tokens","tagSizeToTagPickerSize","tagPickerGroupClassNames","root","useStyles","Eh141a","B7ck84d","Bceei9c","medium","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","i8kkvl","Belr9w4","rmohyg","large","d","p","useTagPickerGroupStyles_unstable","state","styles","className","size"],"sources":["useTagPickerGroupStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } 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        padding: `${tokens.spacingVerticalSNudge} 0 ${tokens.spacingVerticalSNudge} 0`,\n        gap: tokens.spacingHorizontalXS\n    },\n    large: {\n        padding: `${tokens.spacingVerticalS} 0 ${tokens.spacingVerticalS} 0`,\n        gap: tokens.spacingHorizontalSNudge\n    },\n    'extra-large': {\n        padding: `${tokens.spacingVerticalS} 0 ${tokens.spacingVerticalS} 0`,\n        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    // eslint-disable-next-line react-hooks/immutability\n    state.root.className = mergeClasses(tagPickerGroupClassNames.root, styles[tagSizeToTagPickerSize(state.size)], styles.root, state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,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,gBAAGP,QAAA;EAAAM,IAAA;IAAAE,MAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAC,KAAA;IAAAR,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAA;IAAAP,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;AAAA;EAAAE,CAAA;IAAAC,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;AAAA,CAmBrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,gCAAgC,GAAIC,KAAK,IAAG;EACzDtB,0BAA0B,CAACsB,KAAK,CAAC;EACjC,MAAMC,MAAM,GAAGlB,SAAS,CAAC,CAAC;EAC1B;EACAiB,KAAK,CAAClB,IAAI,CAACoB,SAAS,GAAGzB,YAAY,CAACI,wBAAwB,CAACC,IAAI,EAAEmB,MAAM,CAACrB,sBAAsB,CAACoB,KAAK,CAACG,IAAI,CAAC,CAAC,EAAEF,MAAM,CAACnB,IAAI,EAAEkB,KAAK,CAAClB,IAAI,CAACoB,SAAS,CAAC;EACjJ,OAAOF,KAAK;AAChB,CAAC","ignoreList":[]}
+{"version":3,"names":["__styles","mergeClasses","useTagGroupStyles_unstable","tokens","tagSizeToTagPickerSize","tagPickerGroupClassNames","root","useStyles","Eh141a","B7ck84d","Bceei9c","medium","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","i8kkvl","Belr9w4","rmohyg","large","d","p","useTagPickerGroupStyles_unstable","state","styles","className","size"],"sources":["useTagPickerGroupStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from \"@griffel/react\";\nimport { useTagGroupStyles_unstable } from \"@fluentui/react-tags\";\nimport { tokens } from \"@fluentui/react-theme\";\nimport { tagSizeToTagPickerSize } from \"../../utils/tagPicker2Tag.js\";\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        padding: `${tokens.spacingVerticalSNudge} 0 ${tokens.spacingVerticalSNudge} 0`,\n        gap: tokens.spacingHorizontalXS\n    },\n    large: {\n        padding: `${tokens.spacingVerticalS} 0 ${tokens.spacingVerticalS} 0`,\n        gap: tokens.spacingHorizontalSNudge\n    },\n    'extra-large': {\n        padding: `${tokens.spacingVerticalS} 0 ${tokens.spacingVerticalS} 0`,\n        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    // eslint-disable-next-line react-hooks/immutability\n    state.root.className = mergeClasses(tagPickerGroupClassNames.root, styles[tagSizeToTagPickerSize(state.size)], styles.root, state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,0BAA0B,QAAQ,sBAAsB;AACjE,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,SAASC,sBAAsB,QAAQ,8BAA8B;AACrE,OAAO,MAAMC,wBAAwB,GAAG;EACpCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGP,QAAA;EAAAM,IAAA;IAAAE,MAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAC,KAAA;IAAAR,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAA;IAAAP,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;AAAA;EAAAE,CAAA;IAAAC,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;AAAA,CAmBrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,gCAAgC,GAAIC,KAAK,IAAG;EACzDtB,0BAA0B,CAACsB,KAAK,CAAC;EACjC,MAAMC,MAAM,GAAGlB,SAAS,CAAC,CAAC;EAC1B;EACAiB,KAAK,CAAClB,IAAI,CAACoB,SAAS,GAAGzB,YAAY,CAACI,wBAAwB,CAACC,IAAI,EAAEmB,MAAM,CAACrB,sBAAsB,CAACoB,KAAK,CAACG,IAAI,CAAC,CAAC,EAAEF,MAAM,CAACnB,IAAI,EAAEkB,KAAK,CAAClB,IAAI,CAACoB,SAAS,CAAC;EACjJ,OAAOF,KAAK;AAChB,CAAC","ignoreList":[]}

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

@@ -1,8 +1,8 @@
 'use client';
-import { makeStyles, mergeClasses } from '@griffel/react';
-import { useTagGroupStyles_unstable } from '@fluentui/react-tags';
-import { tokens } from '@fluentui/react-theme';
-import { tagSizeToTagPickerSize } from '../../utils/tagPicker2Tag';
+import { makeStyles, mergeClasses } from "@griffel/react";
+import { useTagGroupStyles_unstable } from "@fluentui/react-tags";
+import { tokens } from "@fluentui/react-theme";
+import { tagSizeToTagPickerSize } from "../../utils/tagPicker2Tag.js";
 export const tagPickerGroupClassNames = {
     root: 'fui-TagPickerGroup'
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/TagPickerGroup/useTagPickerGroupStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { TagPickerGroupSlots, TagPickerGroupState } from './TagPickerGroup.types';\nimport { useTagGroupStyles_unstable } from '@fluentui/react-tags';\nimport { tokens } from '@fluentui/react-theme';\nimport { tagSizeToTagPickerSize } from '../../utils/tagPicker2Tag';\n\nexport const tagPickerGroupClassNames: SlotClassNames<TagPickerGroupSlots> = {\n  root: 'fui-TagPickerGroup',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    flexWrap: 'wrap',\n    boxSizing: 'border-box',\n    cursor: 'text',\n  },\n  // size variants\n  medium: {\n    padding: `${tokens.spacingVerticalSNudge} 0 ${tokens.spacingVerticalSNudge} 0`,\n    gap: tokens.spacingHorizontalXS,\n  },\n  large: {\n    padding: `${tokens.spacingVerticalS} 0 ${tokens.spacingVerticalS} 0`,\n    gap: tokens.spacingHorizontalSNudge,\n  },\n  'extra-large': {\n    padding: `${tokens.spacingVerticalS} 0 ${tokens.spacingVerticalS} 0`,\n    gap: tokens.spacingHorizontalSNudge,\n  },\n});\n\n/**\n * Apply styling to the TagPickerGroup slots based on the state\n */\nexport const useTagPickerGroupStyles_unstable = (state: TagPickerGroupState): TagPickerGroupState => {\n  useTagGroupStyles_unstable(state);\n  const styles = useStyles();\n  // eslint-disable-next-line react-hooks/immutability\n  state.root.className = mergeClasses(\n    tagPickerGroupClassNames.root,\n    styles[tagSizeToTagPickerSize(state.size)],\n    styles.root,\n    state.root.className,\n  );\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","useTagGroupStyles_unstable","tokens","tagSizeToTagPickerSize","tagPickerGroupClassNames","root","useStyles","flexWrap","boxSizing","cursor","medium","padding","spacingVerticalSNudge","gap","spacingHorizontalXS","large","spacingVerticalS","spacingHorizontalSNudge","useTagPickerGroupStyles_unstable","state","styles","className","size"],"mappings":"AAAA;AAEA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAG1D,SAASC,0BAA0B,QAAQ,uBAAuB;AAClE,SAASC,MAAM,QAAQ,wBAAwB;AAC/C,SAASC,sBAAsB,QAAQ,4BAA4B;AAEnE,OAAO,MAAMC,2BAAgE;IAC3EC,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,YAAYP,WAAW;IAC3BM,MAAM;QACJE,UAAU;QACVC,WAAW;QACXC,QAAQ;IACV;IACA,gBAAgB;IAChBC,QAAQ;QACNC,SAAS,GAAGT,OAAOU,qBAAqB,CAAC,GAAG,EAAEV,OAAOU,qBAAqB,CAAC,EAAE,CAAC;QAC9EC,KAAKX,OAAOY,mBAAmB;IACjC;IACAC,OAAO;QACLJ,SAAS,GAAGT,OAAOc,gBAAgB,CAAC,GAAG,EAAEd,OAAOc,gBAAgB,CAAC,EAAE,CAAC;QACpEH,KAAKX,OAAOe,uBAAuB;IACrC;IACA,eAAe;QACbN,SAAS,GAAGT,OAAOc,gBAAgB,CAAC,GAAG,EAAEd,OAAOc,gBAAgB,CAAC,EAAE,CAAC;QACpEH,KAAKX,OAAOe,uBAAuB;IACrC;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,mCAAmC,CAACC;IAC/ClB,2BAA2BkB;IAC3B,MAAMC,SAASd;IACf,oDAAoD;IACpDa,MAAMd,IAAI,CAACgB,SAAS,GAAGrB,aACrBI,yBAAyBC,IAAI,EAC7Be,MAAM,CAACjB,uBAAuBgB,MAAMG,IAAI,EAAE,EAC1CF,OAAOf,IAAI,EACXc,MAAMd,IAAI,CAACgB,SAAS;IAGtB,OAAOF;AACT,EAAE"}
+{"version":3,"sources":["../src/components/TagPickerGroup/useTagPickerGroupStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { TagPickerGroupSlots, TagPickerGroupState } from './TagPickerGroup.types';\nimport { useTagGroupStyles_unstable } from '@fluentui/react-tags';\nimport { tokens } from '@fluentui/react-theme';\nimport { tagSizeToTagPickerSize } from '../../utils/tagPicker2Tag';\n\nexport const tagPickerGroupClassNames: SlotClassNames<TagPickerGroupSlots> = {\n  root: 'fui-TagPickerGroup',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    flexWrap: 'wrap',\n    boxSizing: 'border-box',\n    cursor: 'text',\n  },\n  // size variants\n  medium: {\n    padding: `${tokens.spacingVerticalSNudge} 0 ${tokens.spacingVerticalSNudge} 0`,\n    gap: tokens.spacingHorizontalXS,\n  },\n  large: {\n    padding: `${tokens.spacingVerticalS} 0 ${tokens.spacingVerticalS} 0`,\n    gap: tokens.spacingHorizontalSNudge,\n  },\n  'extra-large': {\n    padding: `${tokens.spacingVerticalS} 0 ${tokens.spacingVerticalS} 0`,\n    gap: tokens.spacingHorizontalSNudge,\n  },\n});\n\n/**\n * Apply styling to the TagPickerGroup slots based on the state\n */\nexport const useTagPickerGroupStyles_unstable = (state: TagPickerGroupState): TagPickerGroupState => {\n  useTagGroupStyles_unstable(state);\n  const styles = useStyles();\n  // eslint-disable-next-line react-hooks/immutability\n  state.root.className = mergeClasses(\n    tagPickerGroupClassNames.root,\n    styles[tagSizeToTagPickerSize(state.size)],\n    styles.root,\n    state.root.className,\n  );\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","useTagGroupStyles_unstable","tokens","tagSizeToTagPickerSize","tagPickerGroupClassNames","root","useStyles","flexWrap","boxSizing","cursor","medium","padding","spacingVerticalSNudge","gap","spacingHorizontalXS","large","spacingVerticalS","spacingHorizontalSNudge","useTagPickerGroupStyles_unstable","state","styles","className","size"],"mappings":"AAAA;AAEA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAG1D,SAASC,0BAA0B,QAAQ,uBAAuB;AAClE,SAASC,MAAM,QAAQ,wBAAwB;AAC/C,SAASC,sBAAsB,QAAQ,+BAA4B;AAEnE,OAAO,MAAMC,2BAAgE;IAC3EC,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,YAAYP,WAAW;IAC3BM,MAAM;QACJE,UAAU;QACVC,WAAW;QACXC,QAAQ;IACV;IACA,gBAAgB;IAChBC,QAAQ;QACNC,SAAS,GAAGT,OAAOU,qBAAqB,CAAC,GAAG,EAAEV,OAAOU,qBAAqB,CAAC,EAAE,CAAC;QAC9EC,KAAKX,OAAOY,mBAAmB;IACjC;IACAC,OAAO;QACLJ,SAAS,GAAGT,OAAOc,gBAAgB,CAAC,GAAG,EAAEd,OAAOc,gBAAgB,CAAC,EAAE,CAAC;QACpEH,KAAKX,OAAOe,uBAAuB;IACrC;IACA,eAAe;QACbN,SAAS,GAAGT,OAAOc,gBAAgB,CAAC,GAAG,EAAEd,OAAOc,gBAAgB,CAAC,EAAE,CAAC;QACpEH,KAAKX,OAAOe,uBAAuB;IACrC;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,mCAAmC,CAACC;IAC/ClB,2BAA2BkB;IAC3B,MAAMC,SAASd;IACf,oDAAoD;IACpDa,MAAMd,IAAI,CAACgB,SAAS,GAAGrB,aACrBI,yBAAyBC,IAAI,EAC7Be,MAAM,CAACjB,uBAAuBgB,MAAMG,IAAI,EAAE,EAC1CF,OAAOf,IAAI,EACXc,MAAMd,IAAI,CAACgB,SAAS;IAGtB,OAAOF;AACT,EAAE"}

package/lib/components/TagPickerInput/TagPickerInput.js

@@ -1,9 +1,9 @@
 'use client';
-import * as React from 'react';
-import { useTagPickerInput_unstable } from './useTagPickerInput';
-import { renderTagPickerInput_unstable } from './renderTagPickerInput';
-import { useTagPickerInputStyles_unstable } from './useTagPickerInputStyles.styles';
-import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
+import * as React from "react";
+import { useTagPickerInput_unstable } from "./useTagPickerInput.js";
+import { renderTagPickerInput_unstable } from "./renderTagPickerInput.js";
+import { useTagPickerInputStyles_unstable } from "./useTagPickerInputStyles.styles.js";
+import { useCustomStyleHook_unstable } from "@fluentui/react-shared-contexts";
 /**
  * TagPickerInput component -
  * A TagPickerInput is a composite component that allows users to query tags.

package/lib/components/TagPickerInput/TagPickerInput.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/TagPickerInput/TagPickerInput.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useTagPickerInput_unstable } from './useTagPickerInput';\nimport { renderTagPickerInput_unstable } from './renderTagPickerInput';\nimport { useTagPickerInputStyles_unstable } from './useTagPickerInputStyles.styles';\nimport type { TagPickerInputProps } from './TagPickerInput.types';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * TagPickerInput component -\n * A TagPickerInput is a composite component that allows users to query tags.\n */\nexport const TagPickerInput: ForwardRefComponent<TagPickerInputProps> = React.forwardRef((props, ref) => {\n  const state = useTagPickerInput_unstable(props, ref);\n\n  useTagPickerInputStyles_unstable(state);\n  useCustomStyleHook_unstable('useTagPickerInputStyles_unstable')(state);\n\n  return renderTagPickerInput_unstable(state);\n});\n\nTagPickerInput.displayName = 'TagPickerInput';\n"],"names":["React","useTagPickerInput_unstable","renderTagPickerInput_unstable","useTagPickerInputStyles_unstable","useCustomStyleHook_unstable","TagPickerInput","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,0BAA0B,QAAQ,sBAAsB;AACjE,SAASC,6BAA6B,QAAQ,yBAAyB;AACvE,SAASC,gCAAgC,QAAQ,mCAAmC;AAEpF,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;;CAGC,GACD,OAAO,MAAMC,+BAA2DL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IAC/F,MAAMC,QAAQR,2BAA2BM,OAAOC;IAEhDL,iCAAiCM;IACjCL,4BAA4B,oCAAoCK;IAEhE,OAAOP,8BAA8BO;AACvC,GAAG;AAEHJ,eAAeK,WAAW,GAAG"}
+{"version":3,"sources":["../src/components/TagPickerInput/TagPickerInput.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useTagPickerInput_unstable } from './useTagPickerInput';\nimport { renderTagPickerInput_unstable } from './renderTagPickerInput';\nimport { useTagPickerInputStyles_unstable } from './useTagPickerInputStyles.styles';\nimport type { TagPickerInputProps } from './TagPickerInput.types';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * TagPickerInput component -\n * A TagPickerInput is a composite component that allows users to query tags.\n */\nexport const TagPickerInput: ForwardRefComponent<TagPickerInputProps> = React.forwardRef((props, ref) => {\n  const state = useTagPickerInput_unstable(props, ref);\n\n  useTagPickerInputStyles_unstable(state);\n  useCustomStyleHook_unstable('useTagPickerInputStyles_unstable')(state);\n\n  return renderTagPickerInput_unstable(state);\n});\n\nTagPickerInput.displayName = 'TagPickerInput';\n"],"names":["React","useTagPickerInput_unstable","renderTagPickerInput_unstable","useTagPickerInputStyles_unstable","useCustomStyleHook_unstable","TagPickerInput","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,0BAA0B,QAAQ,yBAAsB;AACjE,SAASC,6BAA6B,QAAQ,4BAAyB;AACvE,SAASC,gCAAgC,QAAQ,sCAAmC;AAEpF,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;;CAGC,GACD,OAAO,MAAMC,+BAA2DL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IAC/F,MAAMC,QAAQR,2BAA2BM,OAAOC;IAEhDL,iCAAiCM;IACjCL,4BAA4B,oCAAoCK;IAEhE,OAAOP,8BAA8BO;AACvC,GAAG;AAEHJ,eAAeK,WAAW,GAAG"}

package/lib/components/TagPickerInput/index.js

@@ -1,4 +1,4 @@
-export { TagPickerInput } from './TagPickerInput';
-export { renderTagPickerInput_unstable } from './renderTagPickerInput';
-export { useTagPickerInput_unstable, useTagPickerInputBase_unstable } from './useTagPickerInput';
-export { tagPickerInputClassNames, useTagPickerInputStyles_unstable } from './useTagPickerInputStyles.styles';
+export { TagPickerInput } from "./TagPickerInput.js";
+export { renderTagPickerInput_unstable } from "./renderTagPickerInput.js";
+export { useTagPickerInput_unstable, useTagPickerInputBase_unstable } from "./useTagPickerInput.js";
+export { tagPickerInputClassNames, useTagPickerInputStyles_unstable } from "./useTagPickerInputStyles.styles.js";

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/TagPickerInput/index.ts"],"sourcesContent":["export { TagPickerInput } from './TagPickerInput';\nexport type {\n  TagPickerInputBaseProps,\n  TagPickerInputBaseState,\n  TagPickerInputProps,\n  TagPickerInputSlots,\n  TagPickerInputState,\n} from './TagPickerInput.types';\nexport { renderTagPickerInput_unstable } from './renderTagPickerInput';\nexport { useTagPickerInput_unstable, useTagPickerInputBase_unstable } from './useTagPickerInput';\nexport { tagPickerInputClassNames, useTagPickerInputStyles_unstable } from './useTagPickerInputStyles.styles';\n"],"names":["TagPickerInput","renderTagPickerInput_unstable","useTagPickerInput_unstable","useTagPickerInputBase_unstable","tagPickerInputClassNames","useTagPickerInputStyles_unstable"],"mappings":"AAAA,SAASA,cAAc,QAAQ,mBAAmB;AAQlD,SAASC,6BAA6B,QAAQ,yBAAyB;AACvE,SAASC,0BAA0B,EAAEC,8BAA8B,QAAQ,sBAAsB;AACjG,SAASC,wBAAwB,EAAEC,gCAAgC,QAAQ,mCAAmC"}
+{"version":3,"sources":["../src/components/TagPickerInput/index.ts"],"sourcesContent":["export { TagPickerInput } from './TagPickerInput';\nexport type {\n  TagPickerInputBaseProps,\n  TagPickerInputBaseState,\n  TagPickerInputProps,\n  TagPickerInputSlots,\n  TagPickerInputState,\n} from './TagPickerInput.types';\nexport { renderTagPickerInput_unstable } from './renderTagPickerInput';\nexport { useTagPickerInput_unstable, useTagPickerInputBase_unstable } from './useTagPickerInput';\nexport { tagPickerInputClassNames, useTagPickerInputStyles_unstable } from './useTagPickerInputStyles.styles';\n"],"names":["TagPickerInput","renderTagPickerInput_unstable","useTagPickerInput_unstable","useTagPickerInputBase_unstable","tagPickerInputClassNames","useTagPickerInputStyles_unstable"],"mappings":"AAAA,SAASA,cAAc,QAAQ,sBAAmB;AAQlD,SAASC,6BAA6B,QAAQ,4BAAyB;AACvE,SAASC,0BAA0B,EAAEC,8BAA8B,QAAQ,yBAAsB;AACjG,SAASC,wBAAwB,EAAEC,gCAAgC,QAAQ,sCAAmC"}

package/lib/components/TagPickerInput/renderTagPickerInput.js

@@ -1,5 +1,5 @@
   import { jsx as _jsx } from "@fluentui/react-jsx-runtime/jsx-runtime";
-import { assertSlots } from '@fluentui/react-utilities';
+import { assertSlots } from "@fluentui/react-utilities";
 /**
  * Render the final JSX of TagPickerInput
  */ export const renderTagPickerInput_unstable = (state)=>{

package/lib/components/TagPickerInput/useTagPickerInput.js

@@ -1,14 +1,14 @@
 'use client';
-import * as React from 'react';
-import * as ReactDOM from 'react-dom';
-import { useActiveDescendantContext } from '@fluentui/react-aria';
-import { useTagPickerContext_unstable } from '../../contexts/TagPickerContext';
-import { useMergedRefs, getIntrinsicElementProps, useEventCallback, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';
-import { ArrowLeft, Backspace, Enter, Space } from '@fluentui/keyboard-keys';
-import { useInputTriggerSlot } from '@fluentui/react-combobox';
-import { useFieldControlProps_unstable } from '@fluentui/react-field';
-import { tagPickerInputCSSRules } from '../../utils/tokens';
-import { useFocusFinders } from '@fluentui/react-tabster';
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import { useActiveDescendantContext } from "@fluentui/react-aria";
+import { useTagPickerContext_unstable } from "../../contexts/TagPickerContext.js";
+import { useMergedRefs, getIntrinsicElementProps, useEventCallback, useIsomorphicLayoutEffect } from "@fluentui/react-utilities";
+import { ArrowLeft, Backspace, Enter, Space } from "@fluentui/keyboard-keys";
+import { useInputTriggerSlot } from "@fluentui/react-combobox";
+import { useFieldControlProps_unstable } from "@fluentui/react-field";
+import { tagPickerInputCSSRules } from "../../utils/tokens.js";
+import { useFocusFinders } from "@fluentui/react-tabster";
 /**
  * Create the base state required to render TagPickerInput, without design-only props.
  * The Base hook omits Tabster-driven focus management; consumers can re-add it via the

package/lib/components/TagPickerInput/useTagPickerInput.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/TagPickerInput/useTagPickerInput.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport * as ReactDOM from 'react-dom';\nimport type {\n  TagPickerInputBaseProps,\n  TagPickerInputBaseState,\n  TagPickerInputProps,\n  TagPickerInputState,\n} from './TagPickerInput.types';\nimport { useActiveDescendantContext } from '@fluentui/react-aria';\nimport { useTagPickerContext_unstable } from '../../contexts/TagPickerContext';\nimport {\n  useMergedRefs,\n  getIntrinsicElementProps,\n  useEventCallback,\n  useIsomorphicLayoutEffect,\n} from '@fluentui/react-utilities';\nimport { ArrowLeft, Backspace, Enter, Space } from '@fluentui/keyboard-keys';\nimport { useInputTriggerSlot } from '@fluentui/react-combobox';\nimport { useFieldControlProps_unstable } from '@fluentui/react-field';\nimport { tagPickerInputCSSRules } from '../../utils/tokens';\nimport { useFocusFinders } from '@fluentui/react-tabster';\n\n/**\n * Create the base state required to render TagPickerInput, without design-only props.\n * The Base hook omits Tabster-driven focus management; consumers can re-add it via the\n * styled wrapper {@link useTagPickerInput_unstable} or by composing their own keydown handler.\n *\n * @param props - props from this instance of TagPickerInput (without appearance)\n * @param ref - reference to root HTMLInputElement of TagPickerInput\n */\nexport const useTagPickerInputBase_unstable = (\n  props: TagPickerInputBaseProps,\n  ref: React.Ref<HTMLInputElement>,\n): TagPickerInputBaseState => {\n  const fieldProps = useFieldControlProps_unstable(props, {\n    supportsLabelFor: true,\n    supportsRequired: true,\n    supportsSize: true,\n  });\n  const { controller: activeDescendantController } = useActiveDescendantContext();\n  const contextDisabled = useTagPickerContext_unstable(ctx => ctx.disabled);\n\n  const triggerRef = useTagPickerContext_unstable(ctx => ctx.triggerRef as React.RefObject<HTMLInputElement>);\n  const selectedOptions = useTagPickerContext_unstable(ctx => ctx.selectedOptions);\n  const setValue = useTagPickerContext_unstable(ctx => ctx.setValue);\n  const setOpen = useTagPickerContext_unstable(ctx => ctx.setOpen);\n  const setHasFocus = useTagPickerContext_unstable(ctx => ctx.setHasFocus);\n  const clearSelection = useTagPickerContext_unstable(ctx => ctx.clearSelection);\n  const open = useTagPickerContext_unstable(ctx => ctx.open);\n  const popoverId = useTagPickerContext_unstable(ctx => (ctx.noPopover ? undefined : ctx.popoverId));\n  const selectOption = useTagPickerContext_unstable(ctx => ctx.selectOption);\n  const getOptionById = useTagPickerContext_unstable(ctx => ctx.getOptionById);\n  const contextValue = useTagPickerContext_unstable(ctx => ctx.value);\n\n  useIsomorphicLayoutEffect(() => {\n    if (!triggerRef.current) {\n      return;\n    }\n    setTagPickerInputStretchStyle(triggerRef.current);\n  }, [selectedOptions, triggerRef]);\n\n  useIsomorphicLayoutEffect(() => {\n    if (triggerRef.current) {\n      const input = triggerRef.current;\n      const cb = () => setTagPickerInputStretchStyle(input);\n      input.addEventListener('input', cb);\n      return () => {\n        input.removeEventListener('input', cb);\n      };\n    }\n  }, [triggerRef]);\n\n  const { value = contextValue, disabled = contextDisabled } = fieldProps;\n\n  const isTypingRef = React.useRef(false);\n\n  const root = useInputTriggerSlot(\n    {\n      type: 'text',\n      value: value ?? '',\n      'aria-controls': open ? popoverId : undefined,\n      disabled,\n      ...getIntrinsicElementProps('input', fieldProps),\n      onKeyDown: useEventCallback((event: React.KeyboardEvent<HTMLInputElement>) => {\n        fieldProps.onKeyDown?.(event);\n        if (event.key === Space) {\n          if (open && !isTypingRef.current) {\n            setOpen(event, false);\n          }\n        } else if (event.key === Enter) {\n          if (open) {\n            ReactDOM.unstable_batchedUpdates(() => {\n              setValue(undefined);\n              setOpen(event, false);\n            });\n          } else {\n            setOpen(event, true);\n          }\n        }\n        isTypingRef.current =\n          event.key.length === 1 && event.code !== Space && !event.altKey && !event.ctrlKey && !event.metaKey;\n      }),\n    },\n    useMergedRefs(triggerRef, ref),\n    {\n      activeDescendantController,\n      freeform: false,\n      state: {\n        clearSelection,\n        getOptionById,\n        open,\n        selectedOptions,\n        selectOption,\n        setHasFocus,\n        setOpen,\n        setValue,\n        multiselect: true,\n        value: fieldProps.value,\n      },\n    },\n  );\n\n  return {\n    components: {\n      root: 'input',\n    },\n    root,\n    disabled,\n  };\n};\n\n/**\n * Create the state required to render TagPickerInput.\n *\n * The returned state can be modified with hooks such as useTagPickerInputStyles_unstable,\n * before being passed to renderTagPickerInput_unstable.\n *\n * @param props - props from this instance of TagPickerInput\n * @param ref - reference to root HTMLInputElement of TagPickerInput\n */\nexport const useTagPickerInput_unstable = (\n  props: TagPickerInputProps,\n  ref: React.Ref<HTMLInputElement>,\n): TagPickerInputState => {\n  const tagPickerGroupRef = useTagPickerContext_unstable(ctx => ctx.tagPickerGroupRef);\n  const { findLastFocusable } = useFocusFinders();\n\n  const onKeyDown = useEventCallback((event: React.KeyboardEvent<HTMLInputElement>) => {\n    props.onKeyDown?.(event);\n    if (\n      (event.key === ArrowLeft || event.key === Backspace) &&\n      event.currentTarget.selectionStart === 0 &&\n      event.currentTarget.selectionEnd === 0 &&\n      tagPickerGroupRef.current\n    ) {\n      findLastFocusable(tagPickerGroupRef.current)?.focus();\n    }\n  });\n\n  const baseState = useTagPickerInputBase_unstable({ ...props, onKeyDown }, ref);\n  const size = useTagPickerContext_unstable(ctx => ctx.size);\n\n  return {\n    ...baseState,\n    size,\n  };\n};\n\n/**\n * while typing the user might need a bit more of space to see the text,\n * which means the input should stretch to 100% width\n * occupying a whole new line.\n *\n * This function will set the CSS variable `--width` to `100%` if the scrollWidth is greater than the offsetWidth,\n * meaning the text is overflowing the input.\n *\n * @param input - input element to apply the style\n * @returns void\n */\nconst setTagPickerInputStretchStyle = (input: HTMLInputElement) => {\n  // first we need to remove the CSS variable\n  // to properly calculate the difference between scrollWidth and offsetWidth\n  input.style.removeProperty(tagPickerInputCSSRules.width);\n  if (input.scrollWidth > input.offsetWidth + 1) {\n    input.style.setProperty(tagPickerInputCSSRules.width, '100%');\n  } else {\n    input.style.removeProperty(tagPickerInputCSSRules.width);\n  }\n};\n"],"names":["React","ReactDOM","useActiveDescendantContext","useTagPickerContext_unstable","useMergedRefs","getIntrinsicElementProps","useEventCallback","useIsomorphicLayoutEffect","ArrowLeft","Backspace","Enter","Space","useInputTriggerSlot","useFieldControlProps_unstable","tagPickerInputCSSRules","useFocusFinders","useTagPickerInputBase_unstable","props","ref","fieldProps","supportsLabelFor","supportsRequired","supportsSize","controller","activeDescendantController","contextDisabled","ctx","disabled","triggerRef","selectedOptions","setValue","setOpen","setHasFocus","clearSelection","open","popoverId","noPopover","undefined","selectOption","getOptionById","contextValue","value","current","setTagPickerInputStretchStyle","input","cb","addEventListener","removeEventListener","isTypingRef","useRef","root","type","onKeyDown","event","key","unstable_batchedUpdates","length","code","altKey","ctrlKey","metaKey","freeform","state","multiselect","components","useTagPickerInput_unstable","tagPickerGroupRef","findLastFocusable","currentTarget","selectionStart","selectionEnd","focus","baseState","size","style","removeProperty","width","scrollWidth","offsetWidth","setProperty"],"mappings":"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"}
+{"version":3,"sources":["../src/components/TagPickerInput/useTagPickerInput.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport * as ReactDOM from 'react-dom';\nimport type {\n  TagPickerInputBaseProps,\n  TagPickerInputBaseState,\n  TagPickerInputProps,\n  TagPickerInputState,\n} from './TagPickerInput.types';\nimport { useActiveDescendantContext } from '@fluentui/react-aria';\nimport { useTagPickerContext_unstable } from '../../contexts/TagPickerContext';\nimport {\n  useMergedRefs,\n  getIntrinsicElementProps,\n  useEventCallback,\n  useIsomorphicLayoutEffect,\n} from '@fluentui/react-utilities';\nimport { ArrowLeft, Backspace, Enter, Space } from '@fluentui/keyboard-keys';\nimport { useInputTriggerSlot } from '@fluentui/react-combobox';\nimport { useFieldControlProps_unstable } from '@fluentui/react-field';\nimport { tagPickerInputCSSRules } from '../../utils/tokens';\nimport { useFocusFinders } from '@fluentui/react-tabster';\n\n/**\n * Create the base state required to render TagPickerInput, without design-only props.\n * The Base hook omits Tabster-driven focus management; consumers can re-add it via the\n * styled wrapper {@link useTagPickerInput_unstable} or by composing their own keydown handler.\n *\n * @param props - props from this instance of TagPickerInput (without appearance)\n * @param ref - reference to root HTMLInputElement of TagPickerInput\n */\nexport const useTagPickerInputBase_unstable = (\n  props: TagPickerInputBaseProps,\n  ref: React.Ref<HTMLInputElement>,\n): TagPickerInputBaseState => {\n  const fieldProps = useFieldControlProps_unstable(props, {\n    supportsLabelFor: true,\n    supportsRequired: true,\n    supportsSize: true,\n  });\n  const { controller: activeDescendantController } = useActiveDescendantContext();\n  const contextDisabled = useTagPickerContext_unstable(ctx => ctx.disabled);\n\n  const triggerRef = useTagPickerContext_unstable(ctx => ctx.triggerRef as React.RefObject<HTMLInputElement>);\n  const selectedOptions = useTagPickerContext_unstable(ctx => ctx.selectedOptions);\n  const setValue = useTagPickerContext_unstable(ctx => ctx.setValue);\n  const setOpen = useTagPickerContext_unstable(ctx => ctx.setOpen);\n  const setHasFocus = useTagPickerContext_unstable(ctx => ctx.setHasFocus);\n  const clearSelection = useTagPickerContext_unstable(ctx => ctx.clearSelection);\n  const open = useTagPickerContext_unstable(ctx => ctx.open);\n  const popoverId = useTagPickerContext_unstable(ctx => (ctx.noPopover ? undefined : ctx.popoverId));\n  const selectOption = useTagPickerContext_unstable(ctx => ctx.selectOption);\n  const getOptionById = useTagPickerContext_unstable(ctx => ctx.getOptionById);\n  const contextValue = useTagPickerContext_unstable(ctx => ctx.value);\n\n  useIsomorphicLayoutEffect(() => {\n    if (!triggerRef.current) {\n      return;\n    }\n    setTagPickerInputStretchStyle(triggerRef.current);\n  }, [selectedOptions, triggerRef]);\n\n  useIsomorphicLayoutEffect(() => {\n    if (triggerRef.current) {\n      const input = triggerRef.current;\n      const cb = () => setTagPickerInputStretchStyle(input);\n      input.addEventListener('input', cb);\n      return () => {\n        input.removeEventListener('input', cb);\n      };\n    }\n  }, [triggerRef]);\n\n  const { value = contextValue, disabled = contextDisabled } = fieldProps;\n\n  const isTypingRef = React.useRef(false);\n\n  const root = useInputTriggerSlot(\n    {\n      type: 'text',\n      value: value ?? '',\n      'aria-controls': open ? popoverId : undefined,\n      disabled,\n      ...getIntrinsicElementProps('input', fieldProps),\n      onKeyDown: useEventCallback((event: React.KeyboardEvent<HTMLInputElement>) => {\n        fieldProps.onKeyDown?.(event);\n        if (event.key === Space) {\n          if (open && !isTypingRef.current) {\n            setOpen(event, false);\n          }\n        } else if (event.key === Enter) {\n          if (open) {\n            ReactDOM.unstable_batchedUpdates(() => {\n              setValue(undefined);\n              setOpen(event, false);\n            });\n          } else {\n            setOpen(event, true);\n          }\n        }\n        isTypingRef.current =\n          event.key.length === 1 && event.code !== Space && !event.altKey && !event.ctrlKey && !event.metaKey;\n      }),\n    },\n    useMergedRefs(triggerRef, ref),\n    {\n      activeDescendantController,\n      freeform: false,\n      state: {\n        clearSelection,\n        getOptionById,\n        open,\n        selectedOptions,\n        selectOption,\n        setHasFocus,\n        setOpen,\n        setValue,\n        multiselect: true,\n        value: fieldProps.value,\n      },\n    },\n  );\n\n  return {\n    components: {\n      root: 'input',\n    },\n    root,\n    disabled,\n  };\n};\n\n/**\n * Create the state required to render TagPickerInput.\n *\n * The returned state can be modified with hooks such as useTagPickerInputStyles_unstable,\n * before being passed to renderTagPickerInput_unstable.\n *\n * @param props - props from this instance of TagPickerInput\n * @param ref - reference to root HTMLInputElement of TagPickerInput\n */\nexport const useTagPickerInput_unstable = (\n  props: TagPickerInputProps,\n  ref: React.Ref<HTMLInputElement>,\n): TagPickerInputState => {\n  const tagPickerGroupRef = useTagPickerContext_unstable(ctx => ctx.tagPickerGroupRef);\n  const { findLastFocusable } = useFocusFinders();\n\n  const onKeyDown = useEventCallback((event: React.KeyboardEvent<HTMLInputElement>) => {\n    props.onKeyDown?.(event);\n    if (\n      (event.key === ArrowLeft || event.key === Backspace) &&\n      event.currentTarget.selectionStart === 0 &&\n      event.currentTarget.selectionEnd === 0 &&\n      tagPickerGroupRef.current\n    ) {\n      findLastFocusable(tagPickerGroupRef.current)?.focus();\n    }\n  });\n\n  const baseState = useTagPickerInputBase_unstable({ ...props, onKeyDown }, ref);\n  const size = useTagPickerContext_unstable(ctx => ctx.size);\n\n  return {\n    ...baseState,\n    size,\n  };\n};\n\n/**\n * while typing the user might need a bit more of space to see the text,\n * which means the input should stretch to 100% width\n * occupying a whole new line.\n *\n * This function will set the CSS variable `--width` to `100%` if the scrollWidth is greater than the offsetWidth,\n * meaning the text is overflowing the input.\n *\n * @param input - input element to apply the style\n * @returns void\n */\nconst setTagPickerInputStretchStyle = (input: HTMLInputElement) => {\n  // first we need to remove the CSS variable\n  // to properly calculate the difference between scrollWidth and offsetWidth\n  input.style.removeProperty(tagPickerInputCSSRules.width);\n  if (input.scrollWidth > input.offsetWidth + 1) {\n    input.style.setProperty(tagPickerInputCSSRules.width, '100%');\n  } else {\n    input.style.removeProperty(tagPickerInputCSSRules.width);\n  }\n};\n"],"names":["React","ReactDOM","useActiveDescendantContext","useTagPickerContext_unstable","useMergedRefs","getIntrinsicElementProps","useEventCallback","useIsomorphicLayoutEffect","ArrowLeft","Backspace","Enter","Space","useInputTriggerSlot","useFieldControlProps_unstable","tagPickerInputCSSRules","useFocusFinders","useTagPickerInputBase_unstable","props","ref","fieldProps","supportsLabelFor","supportsRequired","supportsSize","controller","activeDescendantController","contextDisabled","ctx","disabled","triggerRef","selectedOptions","setValue","setOpen","setHasFocus","clearSelection","open","popoverId","noPopover","undefined","selectOption","getOptionById","contextValue","value","current","setTagPickerInputStretchStyle","input","cb","addEventListener","removeEventListener","isTypingRef","useRef","root","type","onKeyDown","event","key","unstable_batchedUpdates","length","code","altKey","ctrlKey","metaKey","freeform","state","multiselect","components","useTagPickerInput_unstable","tagPickerGroupRef","findLastFocusable","currentTarget","selectionStart","selectionEnd","focus","baseState","size","style","removeProperty","width","scrollWidth","offsetWidth","setProperty"],"mappings":"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"}

package/lib/components/TagPickerInput/useTagPickerInputStyles.styles.js

@@ -1,8 +1,8 @@
 'use client';
 
-import { __resetStyles, __styles, mergeClasses } from '@griffel/react';
-import { typographyStyles, tokens } from '@fluentui/react-theme';
-import { tagPickerInputTokens } from '../../utils/tokens';
+import { __resetStyles, __styles, mergeClasses } from "@griffel/react";
+import { typographyStyles, tokens } from "@fluentui/react-theme";
+import { tagPickerInputTokens } from "../../utils/tokens.js";
 export const tagPickerInputClassNames = {
   root: 'fui-TagPickerInput'
 };

package/lib/components/TagPickerInput/useTagPickerInputStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["__resetStyles","__styles","mergeClasses","typographyStyles","tokens","tagPickerInputTokens","tagPickerInputClassNames","root","useBaseStyle","useStyles","medium","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","large","disabled","sj55zd","De3pzq","Bceei9c","yvdlaj","d","p","useTagPickerInputStyles_unstable","state","baseStyle","styles","className","size"],"sources":["useTagPickerInputStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { typographyStyles, tokens } from '@fluentui/react-theme';\nimport { tagPickerInputTokens } from '../../utils/tokens';\nexport const tagPickerInputClassNames = {\n    root: 'fui-TagPickerInput'\n};\nconst useBaseStyle = makeResetStyles({\n    backgroundColor: tokens.colorTransparentBackground,\n    color: tokens.colorNeutralForeground1,\n    fontFamily: tokens.fontFamilyBase,\n    boxSizing: 'border-box',\n    '&:focus': {\n        outlineStyle: 'none'\n    },\n    '&::placeholder': {\n        color: tokens.colorNeutralForeground4,\n        opacity: 1\n    },\n    '&::after': {\n        visibility: 'hidden',\n        whiteSpace: 'pre-wrap'\n    },\n    border: 'none',\n    minWidth: '24px',\n    maxWidth: '100%',\n    // by default width is 0,\n    // it will be calculated based on the requirement of stretching the component to 100% width\n    // see setTagPickerInputStretchStyle method for more details\n    width: tagPickerInputTokens.width,\n    flexGrow: 1\n});\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n    // size variants\n    medium: {\n        ...typographyStyles.body1,\n        padding: `${tokens.spacingVerticalSNudge} 0 ${tokens.spacingVerticalSNudge} 0`\n    },\n    large: {\n        ...typographyStyles.body1,\n        padding: `${tokens.spacingVerticalMNudge} 0 ${tokens.spacingVerticalMNudge} 0`\n    },\n    'extra-large': {\n        ...typographyStyles.body1,\n        padding: `${tokens.spacingVerticalM} 0 ${tokens.spacingVerticalM} 0`\n    },\n    disabled: {\n        color: tokens.colorNeutralForegroundDisabled,\n        backgroundColor: tokens.colorTransparentBackground,\n        cursor: 'not-allowed',\n        '::placeholder': {\n            color: tokens.colorNeutralForegroundDisabled\n        }\n    }\n});\n/**\n * Apply styling to the TagPickerInput slots based on the state\n */ export const useTagPickerInputStyles_unstable = (state)=>{\n    const baseStyle = useBaseStyle();\n    const styles = useStyles();\n    // eslint-disable-next-line react-hooks/immutability\n    state.root.className = mergeClasses(tagPickerInputClassNames.root, baseStyle, styles[state.size], state.disabled && styles.disabled, state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,aAAA,EAAAC,QAAA,EAAsCC,YAAY,QAAQ,gBAAgB;AAC1E,SAASC,gBAAgB,EAAEC,MAAM,QAAQ,uBAAuB;AAChE,SAASC,oBAAoB,QAAQ,oBAAoB;AACzD,OAAO,MAAMC,wBAAwB,GAAG;EACpCC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,YAAY,gBAAGR,aAAA,8mBAwBpB,CAAC;AACF;AACA;AACA;AAAI,MAAMS,SAAS,gBAAGR,QAAA;EAAAS,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAC,KAAA;IAAAT,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAA;IAAAR,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAE,QAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;IAAAC,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;AAAA,CAsBrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,gCAAgC,GAAIC,KAAK,IAAG;EACzD,MAAMC,SAAS,GAAGtB,YAAY,CAAC,CAAC;EAChC,MAAMuB,MAAM,GAAGtB,SAAS,CAAC,CAAC;EAC1B;EACAoB,KAAK,CAACtB,IAAI,CAACyB,SAAS,GAAG9B,YAAY,CAACI,wBAAwB,CAACC,IAAI,EAAEuB,SAAS,EAAEC,MAAM,CAACF,KAAK,CAACI,IAAI,CAAC,EAAEJ,KAAK,CAACR,QAAQ,IAAIU,MAAM,CAACV,QAAQ,EAAEQ,KAAK,CAACtB,IAAI,CAACyB,SAAS,CAAC;EAC1J,OAAOH,KAAK;AAChB,CAAC","ignoreList":[]}
+{"version":3,"names":["__resetStyles","__styles","mergeClasses","typographyStyles","tokens","tagPickerInputTokens","tagPickerInputClassNames","root","useBaseStyle","useStyles","medium","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","large","disabled","sj55zd","De3pzq","Bceei9c","yvdlaj","d","p","useTagPickerInputStyles_unstable","state","baseStyle","styles","className","size"],"sources":["useTagPickerInputStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeResetStyles, makeStyles, mergeClasses } from \"@griffel/react\";\nimport { typographyStyles, tokens } from \"@fluentui/react-theme\";\nimport { tagPickerInputTokens } from \"../../utils/tokens.js\";\nexport const tagPickerInputClassNames = {\n    root: 'fui-TagPickerInput'\n};\nconst useBaseStyle = makeResetStyles({\n    backgroundColor: tokens.colorTransparentBackground,\n    color: tokens.colorNeutralForeground1,\n    fontFamily: tokens.fontFamilyBase,\n    boxSizing: 'border-box',\n    '&:focus': {\n        outlineStyle: 'none'\n    },\n    '&::placeholder': {\n        color: tokens.colorNeutralForeground4,\n        opacity: 1\n    },\n    '&::after': {\n        visibility: 'hidden',\n        whiteSpace: 'pre-wrap'\n    },\n    border: 'none',\n    minWidth: '24px',\n    maxWidth: '100%',\n    // by default width is 0,\n    // it will be calculated based on the requirement of stretching the component to 100% width\n    // see setTagPickerInputStretchStyle method for more details\n    width: tagPickerInputTokens.width,\n    flexGrow: 1\n});\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n    // size variants\n    medium: {\n        ...typographyStyles.body1,\n        padding: `${tokens.spacingVerticalSNudge} 0 ${tokens.spacingVerticalSNudge} 0`\n    },\n    large: {\n        ...typographyStyles.body1,\n        padding: `${tokens.spacingVerticalMNudge} 0 ${tokens.spacingVerticalMNudge} 0`\n    },\n    'extra-large': {\n        ...typographyStyles.body1,\n        padding: `${tokens.spacingVerticalM} 0 ${tokens.spacingVerticalM} 0`\n    },\n    disabled: {\n        color: tokens.colorNeutralForegroundDisabled,\n        backgroundColor: tokens.colorTransparentBackground,\n        cursor: 'not-allowed',\n        '::placeholder': {\n            color: tokens.colorNeutralForegroundDisabled\n        }\n    }\n});\n/**\n * Apply styling to the TagPickerInput slots based on the state\n */ export const useTagPickerInputStyles_unstable = (state)=>{\n    const baseStyle = useBaseStyle();\n    const styles = useStyles();\n    // eslint-disable-next-line react-hooks/immutability\n    state.root.className = mergeClasses(tagPickerInputClassNames.root, baseStyle, styles[state.size], state.disabled && styles.disabled, state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,aAAA,EAAAC,QAAA,EAAsCC,YAAY,QAAQ,gBAAgB;AAC1E,SAASC,gBAAgB,EAAEC,MAAM,QAAQ,uBAAuB;AAChE,SAASC,oBAAoB,QAAQ,uBAAuB;AAC5D,OAAO,MAAMC,wBAAwB,GAAG;EACpCC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,YAAY,gBAAGR,aAAA,8mBAwBpB,CAAC;AACF;AACA;AACA;AAAI,MAAMS,SAAS,gBAAGR,QAAA;EAAAS,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAC,KAAA;IAAAT,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAA;IAAAR,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAE,QAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;IAAAC,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;AAAA,CAsBrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,gCAAgC,GAAIC,KAAK,IAAG;EACzD,MAAMC,SAAS,GAAGtB,YAAY,CAAC,CAAC;EAChC,MAAMuB,MAAM,GAAGtB,SAAS,CAAC,CAAC;EAC1B;EACAoB,KAAK,CAACtB,IAAI,CAACyB,SAAS,GAAG9B,YAAY,CAACI,wBAAwB,CAACC,IAAI,EAAEuB,SAAS,EAAEC,MAAM,CAACF,KAAK,CAACI,IAAI,CAAC,EAAEJ,KAAK,CAACR,QAAQ,IAAIU,MAAM,CAACV,QAAQ,EAAEQ,KAAK,CAACtB,IAAI,CAACyB,SAAS,CAAC;EAC1J,OAAOH,KAAK;AAChB,CAAC","ignoreList":[]}

package/lib/components/TagPickerInput/useTagPickerInputStyles.styles.raw.js

@@ -1,7 +1,7 @@
 'use client';
-import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';
-import { typographyStyles, tokens } from '@fluentui/react-theme';
-import { tagPickerInputTokens } from '../../utils/tokens';
+import { makeResetStyles, makeStyles, mergeClasses } from "@griffel/react";
+import { typographyStyles, tokens } from "@fluentui/react-theme";
+import { tagPickerInputTokens } from "../../utils/tokens.js";
 export const tagPickerInputClassNames = {
     root: 'fui-TagPickerInput'
 };

package/lib/components/TagPickerInput/useTagPickerInputStyles.styles.raw.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/TagPickerInput/useTagPickerInputStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { typographyStyles, tokens } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { TagPickerInputSlots, TagPickerInputState } from './TagPickerInput.types';\nimport { tagPickerInputTokens } from '../../utils/tokens';\n\nexport const tagPickerInputClassNames: SlotClassNames<TagPickerInputSlots> = {\n  root: 'fui-TagPickerInput',\n};\n\nconst useBaseStyle = makeResetStyles({\n  backgroundColor: tokens.colorTransparentBackground,\n  color: tokens.colorNeutralForeground1,\n  fontFamily: tokens.fontFamilyBase,\n  boxSizing: 'border-box',\n\n  '&:focus': {\n    outlineStyle: 'none',\n  },\n  '&::placeholder': {\n    color: tokens.colorNeutralForeground4,\n    opacity: 1,\n  },\n  '&::after': {\n    visibility: 'hidden',\n    whiteSpace: 'pre-wrap',\n  },\n  border: 'none',\n  minWidth: '24px',\n  maxWidth: '100%',\n  // by default width is 0,\n  // it will be calculated based on the requirement of stretching the component to 100% width\n  // see setTagPickerInputStretchStyle method for more details\n  width: tagPickerInputTokens.width,\n  flexGrow: 1,\n});\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  // size variants\n  medium: {\n    ...typographyStyles.body1,\n    padding: `${tokens.spacingVerticalSNudge} 0 ${tokens.spacingVerticalSNudge} 0`,\n  },\n  large: {\n    ...typographyStyles.body1,\n    padding: `${tokens.spacingVerticalMNudge} 0 ${tokens.spacingVerticalMNudge} 0`,\n  },\n  'extra-large': {\n    ...typographyStyles.body1,\n    padding: `${tokens.spacingVerticalM} 0 ${tokens.spacingVerticalM} 0`,\n  },\n  disabled: {\n    color: tokens.colorNeutralForegroundDisabled,\n    backgroundColor: tokens.colorTransparentBackground,\n    cursor: 'not-allowed',\n    '::placeholder': {\n      color: tokens.colorNeutralForegroundDisabled,\n    },\n  },\n});\n\n/**\n * Apply styling to the TagPickerInput slots based on the state\n */\nexport const useTagPickerInputStyles_unstable = (state: TagPickerInputState): TagPickerInputState => {\n  const baseStyle = useBaseStyle();\n  const styles = useStyles();\n  // eslint-disable-next-line react-hooks/immutability\n  state.root.className = mergeClasses(\n    tagPickerInputClassNames.root,\n    baseStyle,\n    styles[state.size],\n    state.disabled && styles.disabled,\n    state.root.className,\n  );\n  return state;\n};\n"],"names":["makeResetStyles","makeStyles","mergeClasses","typographyStyles","tokens","tagPickerInputTokens","tagPickerInputClassNames","root","useBaseStyle","backgroundColor","colorTransparentBackground","color","colorNeutralForeground1","fontFamily","fontFamilyBase","boxSizing","outlineStyle","colorNeutralForeground4","opacity","visibility","whiteSpace","border","minWidth","maxWidth","width","flexGrow","useStyles","medium","body1","padding","spacingVerticalSNudge","large","spacingVerticalMNudge","spacingVerticalM","disabled","colorNeutralForegroundDisabled","cursor","useTagPickerInputStyles_unstable","state","baseStyle","styles","className","size"],"mappings":"AAAA;AAEA,SAASA,eAAe,EAAEC,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAC3E,SAASC,gBAAgB,EAAEC,MAAM,QAAQ,wBAAwB;AAGjE,SAASC,oBAAoB,QAAQ,qBAAqB;AAE1D,OAAO,MAAMC,2BAAgE;IAC3EC,MAAM;AACR,EAAE;AAEF,MAAMC,eAAeR,gBAAgB;IACnCS,iBAAiBL,OAAOM,0BAA0B;IAClDC,OAAOP,OAAOQ,uBAAuB;IACrCC,YAAYT,OAAOU,cAAc;IACjCC,WAAW;IAEX,WAAW;QACTC,cAAc;IAChB;IACA,kBAAkB;QAChBL,OAAOP,OAAOa,uBAAuB;QACrCC,SAAS;IACX;IACA,YAAY;QACVC,YAAY;QACZC,YAAY;IACd;IACAC,QAAQ;IACRC,UAAU;IACVC,UAAU;IACV,yBAAyB;IACzB,2FAA2F;IAC3F,4DAA4D;IAC5DC,OAAOnB,qBAAqBmB,KAAK;IACjCC,UAAU;AACZ;AAEA;;CAEC,GACD,MAAMC,YAAYzB,WAAW;IAC3B,gBAAgB;IAChB0B,QAAQ;QACN,GAAGxB,iBAAiByB,KAAK;QACzBC,SAAS,GAAGzB,OAAO0B,qBAAqB,CAAC,GAAG,EAAE1B,OAAO0B,qBAAqB,CAAC,EAAE,CAAC;IAChF;IACAC,OAAO;QACL,GAAG5B,iBAAiByB,KAAK;QACzBC,SAAS,GAAGzB,OAAO4B,qBAAqB,CAAC,GAAG,EAAE5B,OAAO4B,qBAAqB,CAAC,EAAE,CAAC;IAChF;IACA,eAAe;QACb,GAAG7B,iBAAiByB,KAAK;QACzBC,SAAS,GAAGzB,OAAO6B,gBAAgB,CAAC,GAAG,EAAE7B,OAAO6B,gBAAgB,CAAC,EAAE,CAAC;IACtE;IACAC,UAAU;QACRvB,OAAOP,OAAO+B,8BAA8B;QAC5C1B,iBAAiBL,OAAOM,0BAA0B;QAClD0B,QAAQ;QACR,iBAAiB;YACfzB,OAAOP,OAAO+B,8BAA8B;QAC9C;IACF;AACF;AAEA;;CAEC,GACD,OAAO,MAAME,mCAAmC,CAACC;IAC/C,MAAMC,YAAY/B;IAClB,MAAMgC,SAASd;IACf,oDAAoD;IACpDY,MAAM/B,IAAI,CAACkC,SAAS,GAAGvC,aACrBI,yBAAyBC,IAAI,EAC7BgC,WACAC,MAAM,CAACF,MAAMI,IAAI,CAAC,EAClBJ,MAAMJ,QAAQ,IAAIM,OAAON,QAAQ,EACjCI,MAAM/B,IAAI,CAACkC,SAAS;IAEtB,OAAOH;AACT,EAAE"}
+{"version":3,"sources":["../src/components/TagPickerInput/useTagPickerInputStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { typographyStyles, tokens } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { TagPickerInputSlots, TagPickerInputState } from './TagPickerInput.types';\nimport { tagPickerInputTokens } from '../../utils/tokens';\n\nexport const tagPickerInputClassNames: SlotClassNames<TagPickerInputSlots> = {\n  root: 'fui-TagPickerInput',\n};\n\nconst useBaseStyle = makeResetStyles({\n  backgroundColor: tokens.colorTransparentBackground,\n  color: tokens.colorNeutralForeground1,\n  fontFamily: tokens.fontFamilyBase,\n  boxSizing: 'border-box',\n\n  '&:focus': {\n    outlineStyle: 'none',\n  },\n  '&::placeholder': {\n    color: tokens.colorNeutralForeground4,\n    opacity: 1,\n  },\n  '&::after': {\n    visibility: 'hidden',\n    whiteSpace: 'pre-wrap',\n  },\n  border: 'none',\n  minWidth: '24px',\n  maxWidth: '100%',\n  // by default width is 0,\n  // it will be calculated based on the requirement of stretching the component to 100% width\n  // see setTagPickerInputStretchStyle method for more details\n  width: tagPickerInputTokens.width,\n  flexGrow: 1,\n});\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  // size variants\n  medium: {\n    ...typographyStyles.body1,\n    padding: `${tokens.spacingVerticalSNudge} 0 ${tokens.spacingVerticalSNudge} 0`,\n  },\n  large: {\n    ...typographyStyles.body1,\n    padding: `${tokens.spacingVerticalMNudge} 0 ${tokens.spacingVerticalMNudge} 0`,\n  },\n  'extra-large': {\n    ...typographyStyles.body1,\n    padding: `${tokens.spacingVerticalM} 0 ${tokens.spacingVerticalM} 0`,\n  },\n  disabled: {\n    color: tokens.colorNeutralForegroundDisabled,\n    backgroundColor: tokens.colorTransparentBackground,\n    cursor: 'not-allowed',\n    '::placeholder': {\n      color: tokens.colorNeutralForegroundDisabled,\n    },\n  },\n});\n\n/**\n * Apply styling to the TagPickerInput slots based on the state\n */\nexport const useTagPickerInputStyles_unstable = (state: TagPickerInputState): TagPickerInputState => {\n  const baseStyle = useBaseStyle();\n  const styles = useStyles();\n  // eslint-disable-next-line react-hooks/immutability\n  state.root.className = mergeClasses(\n    tagPickerInputClassNames.root,\n    baseStyle,\n    styles[state.size],\n    state.disabled && styles.disabled,\n    state.root.className,\n  );\n  return state;\n};\n"],"names":["makeResetStyles","makeStyles","mergeClasses","typographyStyles","tokens","tagPickerInputTokens","tagPickerInputClassNames","root","useBaseStyle","backgroundColor","colorTransparentBackground","color","colorNeutralForeground1","fontFamily","fontFamilyBase","boxSizing","outlineStyle","colorNeutralForeground4","opacity","visibility","whiteSpace","border","minWidth","maxWidth","width","flexGrow","useStyles","medium","body1","padding","spacingVerticalSNudge","large","spacingVerticalMNudge","spacingVerticalM","disabled","colorNeutralForegroundDisabled","cursor","useTagPickerInputStyles_unstable","state","baseStyle","styles","className","size"],"mappings":"AAAA;AAEA,SAASA,eAAe,EAAEC,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAC3E,SAASC,gBAAgB,EAAEC,MAAM,QAAQ,wBAAwB;AAGjE,SAASC,oBAAoB,QAAQ,wBAAqB;AAE1D,OAAO,MAAMC,2BAAgE;IAC3EC,MAAM;AACR,EAAE;AAEF,MAAMC,eAAeR,gBAAgB;IACnCS,iBAAiBL,OAAOM,0BAA0B;IAClDC,OAAOP,OAAOQ,uBAAuB;IACrCC,YAAYT,OAAOU,cAAc;IACjCC,WAAW;IAEX,WAAW;QACTC,cAAc;IAChB;IACA,kBAAkB;QAChBL,OAAOP,OAAOa,uBAAuB;QACrCC,SAAS;IACX;IACA,YAAY;QACVC,YAAY;QACZC,YAAY;IACd;IACAC,QAAQ;IACRC,UAAU;IACVC,UAAU;IACV,yBAAyB;IACzB,2FAA2F;IAC3F,4DAA4D;IAC5DC,OAAOnB,qBAAqBmB,KAAK;IACjCC,UAAU;AACZ;AAEA;;CAEC,GACD,MAAMC,YAAYzB,WAAW;IAC3B,gBAAgB;IAChB0B,QAAQ;QACN,GAAGxB,iBAAiByB,KAAK;QACzBC,SAAS,GAAGzB,OAAO0B,qBAAqB,CAAC,GAAG,EAAE1B,OAAO0B,qBAAqB,CAAC,EAAE,CAAC;IAChF;IACAC,OAAO;QACL,GAAG5B,iBAAiByB,KAAK;QACzBC,SAAS,GAAGzB,OAAO4B,qBAAqB,CAAC,GAAG,EAAE5B,OAAO4B,qBAAqB,CAAC,EAAE,CAAC;IAChF;IACA,eAAe;QACb,GAAG7B,iBAAiByB,KAAK;QACzBC,SAAS,GAAGzB,OAAO6B,gBAAgB,CAAC,GAAG,EAAE7B,OAAO6B,gBAAgB,CAAC,EAAE,CAAC;IACtE;IACAC,UAAU;QACRvB,OAAOP,OAAO+B,8BAA8B;QAC5C1B,iBAAiBL,OAAOM,0BAA0B;QAClD0B,QAAQ;QACR,iBAAiB;YACfzB,OAAOP,OAAO+B,8BAA8B;QAC9C;IACF;AACF;AAEA;;CAEC,GACD,OAAO,MAAME,mCAAmC,CAACC;IAC/C,MAAMC,YAAY/B;IAClB,MAAMgC,SAASd;IACf,oDAAoD;IACpDY,MAAM/B,IAAI,CAACkC,SAAS,GAAGvC,aACrBI,yBAAyBC,IAAI,EAC7BgC,WACAC,MAAM,CAACF,MAAMI,IAAI,CAAC,EAClBJ,MAAMJ,QAAQ,IAAIM,OAAON,QAAQ,EACjCI,MAAM/B,IAAI,CAACkC,SAAS;IAEtB,OAAOH;AACT,EAAE"}

package/lib/components/TagPickerList/TagPickerList.js

@@ -1,9 +1,9 @@
 'use client';
-import * as React from 'react';
-import { useTagPickerList_unstable } from './useTagPickerList';
-import { renderTagPickerList_unstable } from './renderTagPickerList';
-import { useTagPickerListStyles_unstable } from './useTagPickerListStyles.styles';
-import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
+import * as React from "react";
+import { useTagPickerList_unstable } from "./useTagPickerList.js";
+import { renderTagPickerList_unstable } from "./renderTagPickerList.js";
+import { useTagPickerListStyles_unstable } from "./useTagPickerListStyles.styles.js";
+import { useCustomStyleHook_unstable } from "@fluentui/react-shared-contexts";
 /**
  * TagPickerList component -
  * A TagPickerList is a composite component that allows users to display a list of tag options to be selected.