@fluentui/react-tag-picker 9.0.0

package/lib/components/TagPickerInput/TagPickerInput.js

@@ -0,0 +1,15 @@
+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';
+/**
+ * TagPickerInput component -
+ * A TagPickerInput is a composite component that allows users to query tags.
+ */ export const TagPickerInput = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const state = useTagPickerInput_unstable(props, ref);
+    useTagPickerInputStyles_unstable(state);
+    useCustomStyleHook_unstable('useTagPickerInputStyles_unstable')(state);
+    return renderTagPickerInput_unstable(state);
+});
+TagPickerInput.displayName = 'TagPickerInput';

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

@@ -0,0 +1 @@
+{"version":3,"sources":["TagPickerInput.tsx"],"sourcesContent":["import * 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,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"}

package/lib/components/TagPickerInput/TagPickerInput.types.js

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

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

@@ -0,0 +1 @@
+{"version":3,"sources":["TagPickerInput.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { ComboboxProps } from '@fluentui/react-combobox';\nimport { TagPickerContextValue } from '../../contexts/TagPickerContext';\n\nexport type TagPickerInputSlots = {\n  root: NonNullable<Slot<'input'>>;\n};\n\n/**\n * TagPickerInput Props\n */\nexport type TagPickerInputProps = Omit<\n  ComponentProps<Partial<TagPickerInputSlots>>,\n  'children' | 'size' | 'defaultValue'\n> &\n  Pick<ComboboxProps, 'clearable' | 'appearance'> & {\n    disabled?: boolean;\n    value?: string;\n  };\n\n/**\n * State used in rendering TagPickerInput\n */\nexport type TagPickerInputState = ComponentState<TagPickerInputSlots> &\n  Pick<TagPickerContextValue, 'size' | 'disabled'>;\n"],"names":[],"mappings":"AAAA,WAwBmD"}

package/lib/components/TagPickerInput/index.js

@@ -0,0 +1,5 @@
+export * from './TagPickerInput';
+export * from './TagPickerInput.types';
+export * from './renderTagPickerInput';
+export * from './useTagPickerInput';
+export * from './useTagPickerInputStyles.styles';

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

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

package/lib/components/TagPickerInput/renderTagPickerInput.js

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

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

@@ -0,0 +1 @@
+{"version":3,"sources":["renderTagPickerInput.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { TagPickerInputState, TagPickerInputSlots } from './TagPickerInput.types';\n\n/**\n * Render the final JSX of TagPickerInput\n */\nexport const renderTagPickerInput_unstable = (state: TagPickerInputState) => {\n  assertSlots<TagPickerInputSlots>(state);\n\n  return <state.root />;\n};\n"],"names":["assertSlots","renderTagPickerInput_unstable","state","root"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAGxD;;CAEC,GACD,OAAO,MAAMC,gCAAgC,CAACC;IAC5CF,YAAiCE;IAEjC,qBAAO,KAACA,MAAMC,IAAI;AACpB,EAAE"}

package/lib/components/TagPickerInput/useTagPickerInput.js

@@ -0,0 +1,137 @@
+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';
+/**
+ * Create the state required to render TagPickerInput.
+ *
+ * The returned state can be modified with hooks such as useTagPickerInputStyles_unstable,
+ * before being passed to renderTagPickerInput_unstable.
+ *
+ * @param props - props from this instance of TagPickerInput
+ * @param ref - reference to root HTMLDivElement of TagPickerInput
+ */ export const useTagPickerInput_unstable = (props, ref)=>{
+    props = useFieldControlProps_unstable(props, {
+        supportsLabelFor: true,
+        supportsRequired: true,
+        supportsSize: true
+    });
+    const { controller: activeDescendantController } = useActiveDescendantContext();
+    const size = useTagPickerContext_unstable((ctx)=>ctx.size);
+    const contextDisabled = useTagPickerContext_unstable((ctx)=>ctx.disabled);
+    const tagPickerGroupRef = useTagPickerContext_unstable((ctx)=>ctx.tagPickerGroupRef);
+    const triggerRef = useTagPickerContext_unstable((ctx)=>ctx.triggerRef);
+    const selectedOptions = useTagPickerContext_unstable((ctx)=>ctx.selectedOptions);
+    const setValue = useTagPickerContext_unstable((ctx)=>ctx.setValue);
+    const setOpen = useTagPickerContext_unstable((ctx)=>ctx.setOpen);
+    const setHasFocus = useTagPickerContext_unstable((ctx)=>ctx.setHasFocus);
+    const clearSelection = useTagPickerContext_unstable((ctx)=>ctx.clearSelection);
+    const open = useTagPickerContext_unstable((ctx)=>ctx.open);
+    const popoverId = useTagPickerContext_unstable((ctx)=>ctx.popoverId);
+    const selectOption = useTagPickerContext_unstable((ctx)=>ctx.selectOption);
+    const getOptionById = useTagPickerContext_unstable((ctx)=>ctx.getOptionById);
+    const contextValue = useTagPickerContext_unstable((ctx)=>ctx.value);
+    useIsomorphicLayoutEffect(()=>{
+        if (!triggerRef.current) {
+            return;
+        }
+        setTagPickerInputStretchStyle(triggerRef.current);
+    }, [
+        selectedOptions,
+        triggerRef
+    ]);
+    useIsomorphicLayoutEffect(()=>{
+        if (triggerRef.current) {
+            const input = triggerRef.current;
+            const cb = ()=>setTagPickerInputStretchStyle(input);
+            input.addEventListener('input', cb);
+            return ()=>{
+                input.removeEventListener('input', cb);
+            };
+        }
+    }, [
+        triggerRef
+    ]);
+    const { value = contextValue, disabled = contextDisabled } = props;
+    const { findLastFocusable } = useFocusFinders();
+    const isTypingRef = React.useRef(false);
+    const root = useInputTriggerSlot({
+        type: 'text',
+        value: value !== null && value !== void 0 ? value : '',
+        'aria-controls': open ? popoverId : undefined,
+        disabled,
+        ...getIntrinsicElementProps('input', props),
+        onKeyDown: useEventCallback((event)=>{
+            var _props_onKeyDown;
+            (_props_onKeyDown = props.onKeyDown) === null || _props_onKeyDown === void 0 ? void 0 : _props_onKeyDown.call(props, event);
+            if ((event.key === ArrowLeft || event.key === Backspace) && event.currentTarget.selectionStart === 0 && tagPickerGroupRef.current) {
+                var _findLastFocusable;
+                (_findLastFocusable = findLastFocusable(tagPickerGroupRef.current)) === null || _findLastFocusable === void 0 ? void 0 : _findLastFocusable.focus();
+            } else if (event.key === Space) {
+                if (open && !isTypingRef.current) {
+                    setOpen(event, false);
+                }
+            } else if (event.key === Enter) {
+                if (open) {
+                    ReactDOM.unstable_batchedUpdates(()=>{
+                        setValue(undefined);
+                        setOpen(event, false);
+                    });
+                } else {
+                    setOpen(event, true);
+                }
+            }
+            isTypingRef.current = event.key.length === 1 && event.code !== Space && !event.altKey && !event.ctrlKey && !event.metaKey;
+        })
+    }, useMergedRefs(triggerRef, ref), {
+        activeDescendantController,
+        freeform: false,
+        state: {
+            clearSelection,
+            getOptionById,
+            open,
+            selectedOptions,
+            selectOption,
+            setHasFocus,
+            setOpen,
+            setValue,
+            multiselect: true,
+            value: props.value
+        }
+    });
+    const state = {
+        components: {
+            root: 'input'
+        },
+        root,
+        disabled,
+        size
+    };
+    return state;
+};
+/**
+ * while typing the user might need a bit more of space to see the text,
+ * which means the input should stretch to 100% width
+ * occupying a whole new line.
+ *
+ * This function will set the CSS variable `--width` to `100%` if the scrollWidth is greater than the offsetWidth,
+ * meaning the text is overflowing the input.
+ *
+ * @param input - input element to apply the style
+ * @returns void
+ */ const setTagPickerInputStretchStyle = (input)=>{
+    // first we need to remove the CSS variable
+    // to properly calculate the difference between scrollWidth and offsetWidth
+    input.style.removeProperty(tagPickerInputCSSRules.width);
+    if (input.scrollWidth > input.offsetWidth + 1) {
+        input.style.setProperty(tagPickerInputCSSRules.width, '100%');
+    } else {
+        input.style.removeProperty(tagPickerInputCSSRules.width);
+    }
+};

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

@@ -0,0 +1 @@
+{"version":3,"sources":["useTagPickerInput.tsx"],"sourcesContent":["import * as React from 'react';\nimport * as ReactDOM from 'react-dom';\nimport type { TagPickerInputProps, TagPickerInputState } 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 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 HTMLDivElement of TagPickerInput\n */\nexport const useTagPickerInput_unstable = (\n  props: TagPickerInputProps,\n  ref: React.Ref<HTMLInputElement>,\n): TagPickerInputState => {\n  props = useFieldControlProps_unstable(props, { supportsLabelFor: true, supportsRequired: true, supportsSize: true });\n  const { controller: activeDescendantController } = useActiveDescendantContext();\n  const size = useTagPickerContext_unstable(ctx => ctx.size);\n  const contextDisabled = useTagPickerContext_unstable(ctx => ctx.disabled);\n  const tagPickerGroupRef = useTagPickerContext_unstable(ctx => ctx.tagPickerGroupRef);\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.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 } = props;\n  const { findLastFocusable } = useFocusFinders();\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', props),\n      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          tagPickerGroupRef.current\n        ) {\n          findLastFocusable(tagPickerGroupRef.current)?.focus();\n        } else 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: props.value,\n      },\n    },\n  );\n\n  const state: TagPickerInputState = {\n    components: {\n      root: 'input',\n    },\n    root,\n    disabled,\n    size,\n  };\n\n  return state;\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","useTagPickerInput_unstable","props","ref","supportsLabelFor","supportsRequired","supportsSize","controller","activeDescendantController","size","ctx","contextDisabled","disabled","tagPickerGroupRef","triggerRef","selectedOptions","setValue","setOpen","setHasFocus","clearSelection","open","popoverId","selectOption","getOptionById","contextValue","value","current","setTagPickerInputStretchStyle","input","cb","addEventListener","removeEventListener","findLastFocusable","isTypingRef","useRef","root","type","undefined","onKeyDown","event","key","currentTarget","selectionStart","focus","unstable_batchedUpdates","length","code","altKey","ctrlKey","metaKey","freeform","state","multiselect","components","style","removeProperty","width","scrollWidth","offsetWidth","setProperty"],"mappings":"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"}

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

@@ -0,0 +1,60 @@
+import { __resetStyles, __styles, mergeClasses, shorthands } from '@griffel/react';
+import { typographyStyles, tokens } from '@fluentui/react-theme';
+import { tagPickerInputTokens } from '../../utils/tokens';
+export const tagPickerInputClassNames = {
+  root: 'fui-TagPickerInput'
+};
+const useBaseStyle = /*#__PURE__*/__resetStyles("rk7r7zd", "r123qfvl", [".rk7r7zd{background-color:var(--colorTransparentBackground);color:var(--colorNeutralForeground1);font-family:var(--fontFamilyBase);box-sizing:border-box;border-top-width:0;border-right-width:0;border-bottom-width:0;border-left-width:0;min-width:24px;max-width:100%;width:var(--fluent-TagPickerInput__width, 0);flex-grow:1;}", ".rk7r7zd:focus{outline-style:none;}", ".rk7r7zd::-webkit-input-placeholder{color:var(--colorNeutralForeground4);opacity:1;}", ".rk7r7zd::-moz-placeholder{color:var(--colorNeutralForeground4);opacity:1;}", ".rk7r7zd:-ms-input-placeholder{color:var(--colorNeutralForeground4);opacity:1;}", ".rk7r7zd::placeholder{color:var(--colorNeutralForeground4);opacity:1;}", ".rk7r7zd::after{visibility:hidden;white-space:pre-wrap;}", ".r123qfvl{background-color:var(--colorTransparentBackground);color:var(--colorNeutralForeground1);font-family:var(--fontFamilyBase);box-sizing:border-box;border-top-width:0;border-left-width:0;border-bottom-width:0;border-right-width:0;min-width:24px;max-width:100%;width:var(--fluent-TagPickerInput__width, 0);flex-grow:1;}", ".r123qfvl:focus{outline-style:none;}", ".r123qfvl::-webkit-input-placeholder{color:var(--colorNeutralForeground4);opacity:1;}", ".r123qfvl::-moz-placeholder{color:var(--colorNeutralForeground4);opacity:1;}", ".r123qfvl:-ms-input-placeholder{color:var(--colorNeutralForeground4);opacity:1;}", ".r123qfvl::placeholder{color:var(--colorNeutralForeground4);opacity:1;}", ".r123qfvl::after{visibility:hidden;white-space:pre-wrap;}"]);
+/**
+ * Styles for the root slot
+ */
+const useStyles = /*#__PURE__*/__styles({
+  medium: {
+    Bahqtrf: "fk6fouc",
+    Be2twd7: "fkhj508",
+    Bhrd7zp: "figsok6",
+    Bg96gwp: "f1i3iumi",
+    z8tnut: "fp2oml8",
+    z189sj: ["fhxju0i", "f1cnd47f"],
+    Byoj8tv: "f1tdddsa",
+    uwmqm3: ["f1cnd47f", "fhxju0i"]
+  },
+  large: {
+    Bahqtrf: "fk6fouc",
+    Be2twd7: "fkhj508",
+    Bhrd7zp: "figsok6",
+    Bg96gwp: "f1i3iumi",
+    z8tnut: "f1ngh7ph",
+    z189sj: ["fhxju0i", "f1cnd47f"],
+    Byoj8tv: "f5o476b",
+    uwmqm3: ["f1cnd47f", "fhxju0i"]
+  },
+  "extra-large": {
+    Bahqtrf: "fk6fouc",
+    Be2twd7: "fkhj508",
+    Bhrd7zp: "figsok6",
+    Bg96gwp: "f1i3iumi",
+    z8tnut: "f5yzyt",
+    z189sj: ["fhxju0i", "f1cnd47f"],
+    Byoj8tv: "fx3omr",
+    uwmqm3: ["f1cnd47f", "fhxju0i"]
+  },
+  disabled: {
+    sj55zd: "f1s2aq7o",
+    De3pzq: "f1c21dwh",
+    Bceei9c: "fdrzuqr",
+    yvdlaj: "fahhnxm"
+  }
+}, {
+  d: [".fk6fouc{font-family:var(--fontFamilyBase);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".fp2oml8{padding-top:var(--spacingVerticalSNudge);}", ".fhxju0i{padding-right:0;}", ".f1cnd47f{padding-left:0;}", ".f1tdddsa{padding-bottom:var(--spacingVerticalSNudge);}", ".f1ngh7ph{padding-top:var(--spacingVerticalMNudge);}", ".f5o476b{padding-bottom:var(--spacingVerticalMNudge);}", ".f5yzyt{padding-top:var(--spacingVerticalM);}", ".fx3omr{padding-bottom:var(--spacingVerticalM);}", ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}", ".f1c21dwh{background-color:var(--colorTransparentBackground);}", ".fdrzuqr{cursor:not-allowed;}", ".fahhnxm::-webkit-input-placeholder{color:var(--colorNeutralForegroundDisabled);}", ".fahhnxm::-moz-placeholder{color:var(--colorNeutralForegroundDisabled);}"]
+});
+/**
+ * Apply styling to the TagPickerInput slots based on the state
+ */
+export const useTagPickerInputStyles_unstable = state => {
+  const baseStyle = useBaseStyle();
+  const styles = useStyles();
+  state.root.className = mergeClasses(tagPickerInputClassNames.root, baseStyle, styles[state.size], state.disabled && styles.disabled, state.root.className);
+  return state;
+};
+//# sourceMappingURL=useTagPickerInputStyles.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["__resetStyles","__styles","mergeClasses","shorthands","typographyStyles","tokens","tagPickerInputTokens","tagPickerInputClassNames","root","useBaseStyle","useStyles","medium","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","z8tnut","z189sj","Byoj8tv","uwmqm3","large","disabled","sj55zd","De3pzq","Bceei9c","yvdlaj","d","useTagPickerInputStyles_unstable","state","baseStyle","styles","className","size"],"sources":["useTagPickerInputStyles.styles.js"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses, shorthands } 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    ...shorthands.border('0'),\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        ...shorthands.padding(tokens.spacingVerticalSNudge, 0, tokens.spacingVerticalSNudge, 0)\n    },\n    large: {\n        ...typographyStyles.body1,\n        ...shorthands.padding(tokens.spacingVerticalMNudge, 0, tokens.spacingVerticalMNudge, 0)\n    },\n    'extra-large': {\n        ...typographyStyles.body1,\n        ...shorthands.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    state.root.className = mergeClasses(tagPickerInputClassNames.root, baseStyle, styles[state.size], state.disabled && styles.disabled, state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,SAAAA,aAAA,EAAAC,QAAA,EAAsCC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AACtF,SAASC,gBAAgB,EAAEC,MAAM,QAAQ,uBAAuB;AAChE,SAASC,oBAAoB,QAAQ,oBAAoB;AACzD,OAAO,MAAMC,wBAAwB,GAAG;EACpCC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,YAAY,gBAAGT,aAAA,2/CAwBpB,CAAC;AACF;AACA;AACA;AAAI,MAAMU,SAAS,gBAAGT,QAAA;EAAAU,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAC,KAAA;IAAAR,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAA;IAAAP,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAE,QAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAsBrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,gCAAgC,GAAIC,KAAK,IAAG;EACzD,MAAMC,SAAS,GAAGpB,YAAY,CAAC,CAAC;EAChC,MAAMqB,MAAM,GAAGpB,SAAS,CAAC,CAAC;EAC1BkB,KAAK,CAACpB,IAAI,CAACuB,SAAS,GAAG7B,YAAY,CAACK,wBAAwB,CAACC,IAAI,EAAEqB,SAAS,EAAEC,MAAM,CAACF,KAAK,CAACI,IAAI,CAAC,EAAEJ,KAAK,CAACP,QAAQ,IAAIS,MAAM,CAACT,QAAQ,EAAEO,KAAK,CAACpB,IAAI,CAACuB,SAAS,CAAC;EAC1J,OAAOH,KAAK;AAChB,CAAC"}

package/lib/components/TagPickerList/TagPickerList.js

@@ -0,0 +1,15 @@
+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';
+/**
+ * TagPickerList component -
+ * A TagPickerList is a composite component that allows users to display a list of tag options to be selected.
+ */ export const TagPickerList = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const state = useTagPickerList_unstable(props, ref);
+    useTagPickerListStyles_unstable(state);
+    useCustomStyleHook_unstable('useTagPickerListStyles_unstable')(state);
+    return renderTagPickerList_unstable(state);
+});
+TagPickerList.displayName = 'TagPickerList';

package/lib/components/TagPickerList/TagPickerList.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["TagPickerList.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useTagPickerList_unstable } from './useTagPickerList';\nimport { renderTagPickerList_unstable } from './renderTagPickerList';\nimport { useTagPickerListStyles_unstable } from './useTagPickerListStyles.styles';\nimport type { TagPickerListProps } from './TagPickerList.types';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * TagPickerList component -\n * A TagPickerList is a composite component that allows users to display a list of tag options to be selected.\n */\nexport const TagPickerList: ForwardRefComponent<TagPickerListProps> = React.forwardRef((props, ref) => {\n  const state = useTagPickerList_unstable(props, ref);\n\n  useTagPickerListStyles_unstable(state);\n  useCustomStyleHook_unstable('useTagPickerListStyles_unstable')(state);\n  return renderTagPickerList_unstable(state);\n});\n\nTagPickerList.displayName = 'TagPickerList';\n"],"names":["React","useTagPickerList_unstable","renderTagPickerList_unstable","useTagPickerListStyles_unstable","useCustomStyleHook_unstable","TagPickerList","forwardRef","props","ref","state","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,yBAAyB,QAAQ,qBAAqB;AAC/D,SAASC,4BAA4B,QAAQ,wBAAwB;AACrE,SAASC,+BAA+B,QAAQ,kCAAkC;AAElF,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;;CAGC,GACD,OAAO,MAAMC,8BAAyDL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IAC7F,MAAMC,QAAQR,0BAA0BM,OAAOC;IAE/CL,gCAAgCM;IAChCL,4BAA4B,mCAAmCK;IAC/D,OAAOP,6BAA6BO;AACtC,GAAG;AAEHJ,cAAcK,WAAW,GAAG"}

package/lib/components/TagPickerList/TagPickerList.types.js

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

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

@@ -0,0 +1 @@
+{"version":3,"sources":["TagPickerList.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { Listbox } from '@fluentui/react-combobox';\nimport { TagPickerContextValue } from '../../contexts/TagPickerContext';\n\nexport type TagPickerListSlots = {\n  root: Slot<typeof Listbox>;\n};\n\n/**\n * TagPickerList Props\n */\nexport type TagPickerListProps = ComponentProps<TagPickerListSlots>;\n\n/**\n * State used in rendering TagPickerList\n */\nexport type TagPickerListState = ComponentState<TagPickerListSlots> & Pick<TagPickerContextValue, 'open'>;\n"],"names":[],"mappings":"AAAA,WAgB0G"}

package/lib/components/TagPickerList/index.js

@@ -0,0 +1,5 @@
+export * from './TagPickerList';
+export * from './TagPickerList.types';
+export * from './renderTagPickerList';
+export * from './useTagPickerList';
+export * from './useTagPickerListStyles.styles';

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

@@ -0,0 +1 @@
+{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './TagPickerList';\nexport * from './TagPickerList.types';\nexport * from './renderTagPickerList';\nexport * from './useTagPickerList';\nexport * from './useTagPickerListStyles.styles';\n"],"names":[],"mappings":"AAAA,cAAc,kBAAkB;AAChC,cAAc,wBAAwB;AACtC,cAAc,wBAAwB;AACtC,cAAc,qBAAqB;AACnC,cAAc,kCAAkC"}

package/lib/components/TagPickerList/renderTagPickerList.js

@@ -0,0 +1,8 @@
+  import { jsx as _jsx } from "@fluentui/react-jsx-runtime/jsx-runtime";
+import { assertSlots } from '@fluentui/react-utilities';
+/**
+ * Render the final JSX of TagPickerList
+ */ export const renderTagPickerList_unstable = (state)=>{
+    assertSlots(state);
+    return /*#__PURE__*/ _jsx(state.root, {});
+};

package/lib/components/TagPickerList/renderTagPickerList.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["renderTagPickerList.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { TagPickerListState, TagPickerListSlots } from './TagPickerList.types';\n\n/**\n * Render the final JSX of TagPickerList\n */\nexport const renderTagPickerList_unstable = (state: TagPickerListState) => {\n  assertSlots<TagPickerListSlots>(state);\n  return <state.root />;\n};\n"],"names":["assertSlots","renderTagPickerList_unstable","state","root"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAGxD;;CAEC,GACD,OAAO,MAAMC,+BAA+B,CAACC;IAC3CF,YAAgCE;IAChC,qBAAO,KAACA,MAAMC,IAAI;AACpB,EAAE"}

package/lib/components/TagPickerList/useTagPickerList.js

@@ -0,0 +1,39 @@
+import * as React from 'react';
+import { Listbox } from '@fluentui/react-combobox';
+import { useTagPickerContext_unstable } from '../../contexts/TagPickerContext';
+import { slot, useMergedRefs } from '@fluentui/react-utilities';
+import { useListboxSlot } from '@fluentui/react-combobox';
+/**
+ * Create the state required to render TagPickerList.
+ *
+ * The returned state can be modified with hooks such as useTagPickerListStyles_unstable,
+ * before being passed to renderTagPickerList_unstable.
+ *
+ * @param props - props from this instance of TagPickerList
+ * @param ref - reference to root HTMLDivElement of TagPickerList
+ */ export const useTagPickerList_unstable = (props, ref)=>{
+    const triggerRef = useTagPickerContext_unstable((ctx)=>ctx.triggerRef);
+    const popoverRef = useTagPickerContext_unstable((ctx)=>ctx.popoverRef);
+    const popoverId = useTagPickerContext_unstable((ctx)=>ctx.popoverId);
+    const open = useTagPickerContext_unstable((ctx)=>ctx.open);
+    return {
+        open,
+        components: {
+            root: Listbox
+        },
+        root: slot.always({
+            ...useListboxSlot(props, useMergedRefs(popoverRef, ref), {
+                state: {
+                    multiselect: true
+                },
+                triggerRef,
+                defaultProps: {
+                    id: popoverId
+                }
+            }),
+            role: 'listbox'
+        }, {
+            elementType: Listbox
+        })
+    };
+};

package/lib/components/TagPickerList/useTagPickerList.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useTagPickerList.ts"],"sourcesContent":["import * as React from 'react';\nimport type { TagPickerListProps, TagPickerListState } from './TagPickerList.types';\nimport { Listbox } from '@fluentui/react-combobox';\nimport { useTagPickerContext_unstable } from '../../contexts/TagPickerContext';\nimport { slot, useMergedRefs } from '@fluentui/react-utilities';\nimport { useListboxSlot } from '@fluentui/react-combobox';\n\n/**\n * Create the state required to render TagPickerList.\n *\n * The returned state can be modified with hooks such as useTagPickerListStyles_unstable,\n * before being passed to renderTagPickerList_unstable.\n *\n * @param props - props from this instance of TagPickerList\n * @param ref - reference to root HTMLDivElement of TagPickerList\n */\nexport const useTagPickerList_unstable = (\n  props: TagPickerListProps,\n  ref: React.Ref<HTMLDivElement>,\n): TagPickerListState => {\n  const triggerRef = useTagPickerContext_unstable(ctx => ctx.triggerRef) as\n    | React.RefObject<HTMLInputElement>\n    | React.RefObject<HTMLButtonElement>;\n  const popoverRef = useTagPickerContext_unstable(ctx => ctx.popoverRef);\n  const popoverId = useTagPickerContext_unstable(ctx => ctx.popoverId);\n  const open = useTagPickerContext_unstable(ctx => ctx.open);\n\n  return {\n    open,\n    components: {\n      root: Listbox,\n    },\n    root: slot.always(\n      {\n        ...useListboxSlot(props, useMergedRefs(popoverRef, ref), {\n          state: { multiselect: true },\n          triggerRef,\n          defaultProps: { id: popoverId },\n        }),\n        role: 'listbox',\n      },\n      { elementType: Listbox },\n    ),\n  };\n};\n"],"names":["React","Listbox","useTagPickerContext_unstable","slot","useMergedRefs","useListboxSlot","useTagPickerList_unstable","props","ref","triggerRef","ctx","popoverRef","popoverId","open","components","root","always","state","multiselect","defaultProps","id","role","elementType"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,OAAO,QAAQ,2BAA2B;AACnD,SAASC,4BAA4B,QAAQ,kCAAkC;AAC/E,SAASC,IAAI,EAAEC,aAAa,QAAQ,4BAA4B;AAChE,SAASC,cAAc,QAAQ,2BAA2B;AAE1D;;;;;;;;CAQC,GACD,OAAO,MAAMC,4BAA4B,CACvCC,OACAC;IAEA,MAAMC,aAAaP,6BAA6BQ,CAAAA,MAAOA,IAAID,UAAU;IAGrE,MAAME,aAAaT,6BAA6BQ,CAAAA,MAAOA,IAAIC,UAAU;IACrE,MAAMC,YAAYV,6BAA6BQ,CAAAA,MAAOA,IAAIE,SAAS;IACnE,MAAMC,OAAOX,6BAA6BQ,CAAAA,MAAOA,IAAIG,IAAI;IAEzD,OAAO;QACLA;QACAC,YAAY;YACVC,MAAMd;QACR;QACAc,MAAMZ,KAAKa,MAAM,CACf;YACE,GAAGX,eAAeE,OAAOH,cAAcO,YAAYH,MAAM;gBACvDS,OAAO;oBAAEC,aAAa;gBAAK;gBAC3BT;gBACAU,cAAc;oBAAEC,IAAIR;gBAAU;YAChC,EAAE;YACFS,MAAM;QACR,GACA;YAAEC,aAAarB;QAAQ;IAE3B;AACF,EAAE"}

package/lib/components/TagPickerList/useTagPickerListStyles.styles.js

@@ -0,0 +1,33 @@
+import { __styles, mergeClasses, shorthands } from '@griffel/react';
+import { tokens } from '@fluentui/react-theme';
+export const tagPickerListClassNames = {
+  root: 'fui-TagPickerList'
+};
+/**
+ * Styles for the root slot
+ */
+const useStyles = /*#__PURE__*/__styles({
+  root: {
+    E5pizo: "f1hg901r",
+    Bbmb7ep: ["f1aa9q02", "f16jpd5f"],
+    Beyfa6y: ["f16jpd5f", "f1aa9q02"],
+    B7oj6ja: ["f1jar5jt", "fyu767a"],
+    Btl43ni: ["fyu767a", "f1jar5jt"],
+    Bxyxcbc: "fmmk62d",
+    B7ck84d: "f1ewtqcl"
+  },
+  collapsed: {
+    mc9l5x: "fjseox"
+  }
+}, {
+  d: [".f1hg901r{box-shadow:var(--shadow16);}", ".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}", ".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}", ".fmmk62d{max-height:80vh;}", ".f1ewtqcl{box-sizing:border-box;}", ".fjseox{display:none;}"]
+});
+/**
+ * Apply styling to the TagPickerList slots based on the state
+ */
+export const useTagPickerListStyles_unstable = state => {
+  const styles = useStyles();
+  state.root.className = mergeClasses(tagPickerListClassNames.root, styles.root, !state.open && styles.collapsed, state.root.className);
+  return state;
+};
+//# sourceMappingURL=useTagPickerListStyles.styles.js.map

package/lib/components/TagPickerList/useTagPickerListStyles.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__styles","mergeClasses","shorthands","tokens","tagPickerListClassNames","root","useStyles","E5pizo","Bbmb7ep","Beyfa6y","B7oj6ja","Btl43ni","Bxyxcbc","B7ck84d","collapsed","mc9l5x","d","useTagPickerListStyles_unstable","state","styles","className","open"],"sources":["useTagPickerListStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const tagPickerListClassNames = {\n    root: 'fui-TagPickerList'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n    root: {\n        boxShadow: `${tokens.shadow16}`,\n        ...shorthands.borderRadius(tokens.borderRadiusMedium),\n        maxHeight: '80vh',\n        boxSizing: 'border-box'\n    },\n    collapsed: {\n        display: 'none'\n    }\n});\n/**\n * Apply styling to the TagPickerList slots based on the state\n */ export const useTagPickerListStyles_unstable = (state)=>{\n    const styles = useStyles();\n    state.root.className = mergeClasses(tagPickerListClassNames.root, styles.root, !state.open && styles.collapsed, state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AACrE,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,uBAAuB,GAAG;EACnCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGN,QAAA;EAAAK,IAAA;IAAAE,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAAC,SAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAUrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,+BAA+B,GAAIC,KAAK,IAAG;EACxD,MAAMC,MAAM,GAAGb,SAAS,CAAC,CAAC;EAC1BY,KAAK,CAACb,IAAI,CAACe,SAAS,GAAGnB,YAAY,CAACG,uBAAuB,CAACC,IAAI,EAAEc,MAAM,CAACd,IAAI,EAAE,CAACa,KAAK,CAACG,IAAI,IAAIF,MAAM,CAACL,SAAS,EAAEI,KAAK,CAACb,IAAI,CAACe,SAAS,CAAC;EACrI,OAAOF,KAAK;AAChB,CAAC"}

package/lib/components/TagPickerOption/TagPickerOption.js

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { useTagPickerOption_unstable } from './useTagPickerOption';
+import { renderTagPickerOption_unstable } from './renderTagPickerOption';
+import { useTagPickerOptionStyles_unstable } from './useTagPickerOptionStyles.styles';
+import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
+/**
+ * TagPickerOption component -
+ * A TagPickerOption is a composite component that allows users to select tags.
+ */ export const TagPickerOption = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const state = useTagPickerOption_unstable(props, ref);
+    useTagPickerOptionStyles_unstable(state);
+    useCustomStyleHook_unstable('useTagPickerOptionStyles_unstable')(state);
+    return renderTagPickerOption_unstable(state);
+});
+TagPickerOption.displayName = 'TagPickerOption';

package/lib/components/TagPickerOption/TagPickerOption.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["TagPickerOption.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useTagPickerOption_unstable } from './useTagPickerOption';\nimport { renderTagPickerOption_unstable } from './renderTagPickerOption';\nimport { useTagPickerOptionStyles_unstable } from './useTagPickerOptionStyles.styles';\nimport type { TagPickerOptionProps } from './TagPickerOption.types';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * TagPickerOption component -\n * A TagPickerOption is a composite component that allows users to select tags.\n */\nexport const TagPickerOption: ForwardRefComponent<TagPickerOptionProps> = React.forwardRef((props, ref) => {\n  const state = useTagPickerOption_unstable(props, ref);\n\n  useTagPickerOptionStyles_unstable(state);\n  useCustomStyleHook_unstable('useTagPickerOptionStyles_unstable')(state);\n  return renderTagPickerOption_unstable(state);\n});\n\nTagPickerOption.displayName = 'TagPickerOption';\n"],"names":["React","useTagPickerOption_unstable","renderTagPickerOption_unstable","useTagPickerOptionStyles_unstable","useCustomStyleHook_unstable","TagPickerOption","forwardRef","props","ref","state","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,2BAA2B,QAAQ,uBAAuB;AACnE,SAASC,8BAA8B,QAAQ,0BAA0B;AACzE,SAASC,iCAAiC,QAAQ,oCAAoC;AAEtF,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;;CAGC,GACD,OAAO,MAAMC,gCAA6DL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IACjG,MAAMC,QAAQR,4BAA4BM,OAAOC;IAEjDL,kCAAkCM;IAClCL,4BAA4B,qCAAqCK;IACjE,OAAOP,+BAA+BO;AACxC,GAAG;AAEHJ,gBAAgBK,WAAW,GAAG"}

package/lib/components/TagPickerOption/TagPickerOption.types.js

@@ -0,0 +1 @@
+import * as React from 'react';

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

@@ -0,0 +1 @@
+{"version":3,"sources":["TagPickerOption.types.ts"],"sourcesContent":["import { OptionSlots, OptionState } from '@fluentui/react-combobox';\nimport { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nexport type TagPickerOptionSlots = Pick<OptionSlots, 'root'> & {\n  media?: Slot<'div'>;\n  secondaryContent?: Slot<'span'>;\n};\n\n/**\n * TagPickerOption Props\n */\nexport type TagPickerOptionProps = ComponentProps<TagPickerOptionSlots> & {\n  children: React.ReactNode;\n  value: string;\n};\n\n/**\n * State used in rendering TagPickerOption\n */\nexport type TagPickerOptionState = ComponentState<TagPickerOptionSlots> & Pick<OptionState, 'components' | 'root'>;\n"],"names":["React"],"mappings":"AAEA,YAAYA,WAAW,QAAQ"}

package/lib/components/TagPickerOption/index.js

@@ -0,0 +1,5 @@
+export * from './TagPickerOption';
+export * from './TagPickerOption.types';
+export * from './renderTagPickerOption';
+export * from './useTagPickerOption';
+export * from './useTagPickerOptionStyles.styles';

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

@@ -0,0 +1 @@
+{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './TagPickerOption';\nexport * from './TagPickerOption.types';\nexport * from './renderTagPickerOption';\nexport * from './useTagPickerOption';\nexport * from './useTagPickerOptionStyles.styles';\n"],"names":[],"mappings":"AAAA,cAAc,oBAAoB;AAClC,cAAc,0BAA0B;AACxC,cAAc,0BAA0B;AACxC,cAAc,uBAAuB;AACrC,cAAc,oCAAoC"}

package/lib/components/TagPickerOption/renderTagPickerOption.js

@@ -0,0 +1,14 @@
+  import { jsx as _jsx, jsxs as _jsxs } from "@fluentui/react-jsx-runtime/jsx-runtime";
+import { assertSlots } from '@fluentui/react-utilities';
+/**
+ * Render the final JSX of TagPickerOption
+ */ export const renderTagPickerOption_unstable = (state)=>{
+    assertSlots(state);
+    return /*#__PURE__*/ _jsxs(state.root, {
+        children: [
+            state.media && /*#__PURE__*/ _jsx(state.media, {}),
+            state.root.children,
+            state.secondaryContent && /*#__PURE__*/ _jsx(state.secondaryContent, {})
+        ]
+    });
+};

package/lib/components/TagPickerOption/renderTagPickerOption.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["renderTagPickerOption.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { TagPickerOptionState, TagPickerOptionSlots } from './TagPickerOption.types';\n\n/**\n * Render the final JSX of TagPickerOption\n */\nexport const renderTagPickerOption_unstable = (state: TagPickerOptionState) => {\n  assertSlots<TagPickerOptionSlots>(state);\n\n  return (\n    <state.root>\n      {state.media && <state.media />}\n      {state.root.children}\n      {state.secondaryContent && <state.secondaryContent />}\n    </state.root>\n  );\n};\n"],"names":["assertSlots","renderTagPickerOption_unstable","state","root","media","children","secondaryContent"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAGxD;;CAEC,GACD,OAAO,MAAMC,iCAAiC,CAACC;IAC7CF,YAAkCE;IAElC,qBACE,MAACA,MAAMC,IAAI;;YACRD,MAAME,KAAK,kBAAI,KAACF,MAAME,KAAK;YAC3BF,MAAMC,IAAI,CAACE,QAAQ;YACnBH,MAAMI,gBAAgB,kBAAI,KAACJ,MAAMI,gBAAgB;;;AAGxD,EAAE"}

package/lib/components/TagPickerOption/useTagPickerOption.js

@@ -0,0 +1,35 @@
+import * as React from 'react';
+import { slot } from '@fluentui/react-utilities';
+import { useOption_unstable } from '@fluentui/react-combobox';
+/**
+ * Create the state required to render TagPickerOption.
+ *
+ * The returned state can be modified with hooks such as useTagPickerOptionStyles_unstable,
+ * before being passed to renderTagPickerOption_unstable.
+ *
+ * @param props - props from this instance of TagPickerOption
+ * @param ref - reference to root HTMLDivElement of TagPickerOption
+ */ export const useTagPickerOption_unstable = (props, ref)=>{
+    const optionState = useOption_unstable(props, ref);
+    const state = {
+        components: {
+            ...optionState.components,
+            media: 'div',
+            secondaryContent: 'span'
+        },
+        media: slot.optional(props.media, {
+            elementType: 'div'
+        }),
+        secondaryContent: slot.optional(props.secondaryContent, {
+            elementType: 'span'
+        }),
+        root: slot.always({
+            ...optionState.root,
+            role: 'option',
+            'aria-checked': props['aria-checked']
+        }, {
+            elementType: 'div'
+        })
+    };
+    return state;
+};

package/lib/components/TagPickerOption/useTagPickerOption.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useTagPickerOption.ts"],"sourcesContent":["import * as React from 'react';\nimport { slot } from '@fluentui/react-utilities';\nimport { OptionProps, useOption_unstable } from '@fluentui/react-combobox';\nimport type { TagPickerOptionProps, TagPickerOptionState } from './TagPickerOption.types';\n\n/**\n * Create the state required to render TagPickerOption.\n *\n * The returned state can be modified with hooks such as useTagPickerOptionStyles_unstable,\n * before being passed to renderTagPickerOption_unstable.\n *\n * @param props - props from this instance of TagPickerOption\n * @param ref - reference to root HTMLDivElement of TagPickerOption\n */\nexport const useTagPickerOption_unstable = (\n  props: TagPickerOptionProps,\n  ref: React.Ref<HTMLDivElement>,\n): TagPickerOptionState => {\n  const optionState = useOption_unstable(props as OptionProps, ref);\n  const state: TagPickerOptionState = {\n    components: {\n      ...optionState.components,\n      media: 'div',\n      secondaryContent: 'span',\n    },\n    media: slot.optional(props.media, {\n      elementType: 'div',\n    }),\n    secondaryContent: slot.optional(props.secondaryContent, {\n      elementType: 'span',\n    }),\n    root: slot.always(\n      { ...optionState.root, role: 'option', 'aria-checked': props['aria-checked'] },\n      {\n        elementType: 'div',\n      },\n    ),\n  };\n\n  return state;\n};\n"],"names":["React","slot","useOption_unstable","useTagPickerOption_unstable","props","ref","optionState","state","components","media","secondaryContent","optional","elementType","root","always","role"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,IAAI,QAAQ,4BAA4B;AACjD,SAAsBC,kBAAkB,QAAQ,2BAA2B;AAG3E;;;;;;;;CAQC,GACD,OAAO,MAAMC,8BAA8B,CACzCC,OACAC;IAEA,MAAMC,cAAcJ,mBAAmBE,OAAsBC;IAC7D,MAAME,QAA8B;QAClCC,YAAY;YACV,GAAGF,YAAYE,UAAU;YACzBC,OAAO;YACPC,kBAAkB;QACpB;QACAD,OAAOR,KAAKU,QAAQ,CAACP,MAAMK,KAAK,EAAE;YAChCG,aAAa;QACf;QACAF,kBAAkBT,KAAKU,QAAQ,CAACP,MAAMM,gBAAgB,EAAE;YACtDE,aAAa;QACf;QACAC,MAAMZ,KAAKa,MAAM,CACf;YAAE,GAAGR,YAAYO,IAAI;YAAEE,MAAM;YAAU,gBAAgBX,KAAK,CAAC,eAAe;QAAC,GAC7E;YACEQ,aAAa;QACf;IAEJ;IAEA,OAAOL;AACT,EAAE"}

package/lib/components/TagPickerOption/useTagPickerOptionStyles.styles.js

@@ -0,0 +1,49 @@
+import { __styles, mergeClasses } from '@griffel/react';
+import { useOptionStyles_unstable } from '@fluentui/react-combobox';
+export const tagPickerOptionClassNames = {
+  root: 'fui-TagPickerOption',
+  media: 'fui-TagPickerOption__media',
+  secondaryContent: 'fui-TagPickerOption__secondaryContent'
+};
+/**
+ * Styles for the root slot
+ */
+const useStyles = /*#__PURE__*/__styles({
+  root: {
+    mc9l5x: "f13qh94s",
+    Budl1dq: "fjxzuw",
+    Bt984gj: "f122n59"
+  },
+  secondaryContent: {
+    Br312pm: "fd46tj4",
+    Ijaq50: "faunodf"
+  },
+  media: {
+    Ijaq50: "fldnz9j"
+  }
+}, {
+  d: [".f13qh94s{display:grid;}", ".fjxzuw{grid-template-columns:auto 1fr;}", ".f122n59{align-items:center;}", ".fd46tj4{grid-column-start:2;}", ".faunodf{grid-row-start:2;}", ".fldnz9j{grid-row-start:span 2;}"]
+});
+/**
+ * Apply styling to the TagPickerOption slots based on the state
+ */
+export const useTagPickerOptionStyles_unstable = state => {
+  useOptionStyles_unstable({
+    ...state,
+    active: false,
+    disabled: false,
+    focusVisible: false,
+    checkIcon: undefined,
+    selected: false
+  });
+  const styles = useStyles();
+  state.root.className = mergeClasses(tagPickerOptionClassNames.root, styles.root, state.root.className);
+  if (state.media) {
+    state.media.className = mergeClasses(tagPickerOptionClassNames.media, styles.media, state.media.className);
+  }
+  if (state.secondaryContent) {
+    state.secondaryContent.className = mergeClasses(tagPickerOptionClassNames.secondaryContent, styles.secondaryContent, state.secondaryContent.className);
+  }
+  return state;
+};
+//# sourceMappingURL=useTagPickerOptionStyles.styles.js.map

package/lib/components/TagPickerOption/useTagPickerOptionStyles.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__styles","mergeClasses","useOptionStyles_unstable","tagPickerOptionClassNames","root","media","secondaryContent","useStyles","mc9l5x","Budl1dq","Bt984gj","Br312pm","Ijaq50","d","useTagPickerOptionStyles_unstable","state","active","disabled","focusVisible","checkIcon","undefined","selected","styles","className"],"sources":["useTagPickerOptionStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { useOptionStyles_unstable } from '@fluentui/react-combobox';\nexport const tagPickerOptionClassNames = {\n    root: 'fui-TagPickerOption',\n    media: 'fui-TagPickerOption__media',\n    secondaryContent: 'fui-TagPickerOption__secondaryContent'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n    root: {\n        display: 'grid',\n        gridTemplateColumns: 'auto 1fr',\n        alignItems: 'center'\n    },\n    secondaryContent: {\n        gridColumnStart: 2,\n        gridRowStart: 2\n    },\n    media: {\n        gridRowStart: 'span 2'\n    }\n});\n/**\n * Apply styling to the TagPickerOption slots based on the state\n */ export const useTagPickerOptionStyles_unstable = (state)=>{\n    useOptionStyles_unstable({\n        ...state,\n        active: false,\n        disabled: false,\n        focusVisible: false,\n        checkIcon: undefined,\n        selected: false\n    });\n    const styles = useStyles();\n    state.root.className = mergeClasses(tagPickerOptionClassNames.root, styles.root, state.root.className);\n    if (state.media) {\n        state.media.className = mergeClasses(tagPickerOptionClassNames.media, styles.media, state.media.className);\n    }\n    if (state.secondaryContent) {\n        state.secondaryContent.className = mergeClasses(tagPickerOptionClassNames.secondaryContent, styles.secondaryContent, state.secondaryContent.className);\n    }\n    return state;\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,wBAAwB,QAAQ,0BAA0B;AACnE,OAAO,MAAMC,yBAAyB,GAAG;EACrCC,IAAI,EAAE,qBAAqB;EAC3BC,KAAK,EAAE,4BAA4B;EACnCC,gBAAgB,EAAE;AACtB,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGP,QAAA;EAAAI,IAAA;IAAAI,MAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAAJ,gBAAA;IAAAK,OAAA;IAAAC,MAAA;EAAA;EAAAP,KAAA;IAAAO,MAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAarB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,iCAAiC,GAAIC,KAAK,IAAG;EAC1Db,wBAAwB,CAAC;IACrB,GAAGa,KAAK;IACRC,MAAM,EAAE,KAAK;IACbC,QAAQ,EAAE,KAAK;IACfC,YAAY,EAAE,KAAK;IACnBC,SAAS,EAAEC,SAAS;IACpBC,QAAQ,EAAE;EACd,CAAC,CAAC;EACF,MAAMC,MAAM,GAAGf,SAAS,CAAC,CAAC;EAC1BQ,KAAK,CAACX,IAAI,CAACmB,SAAS,GAAGtB,YAAY,CAACE,yBAAyB,CAACC,IAAI,EAAEkB,MAAM,CAAClB,IAAI,EAAEW,KAAK,CAACX,IAAI,CAACmB,SAAS,CAAC;EACtG,IAAIR,KAAK,CAACV,KAAK,EAAE;IACbU,KAAK,CAACV,KAAK,CAACkB,SAAS,GAAGtB,YAAY,CAACE,yBAAyB,CAACE,KAAK,EAAEiB,MAAM,CAACjB,KAAK,EAAEU,KAAK,CAACV,KAAK,CAACkB,SAAS,CAAC;EAC9G;EACA,IAAIR,KAAK,CAACT,gBAAgB,EAAE;IACxBS,KAAK,CAACT,gBAAgB,CAACiB,SAAS,GAAGtB,YAAY,CAACE,yBAAyB,CAACG,gBAAgB,EAAEgB,MAAM,CAAChB,gBAAgB,EAAES,KAAK,CAACT,gBAAgB,CAACiB,SAAS,CAAC;EAC1J;EACA,OAAOR,KAAK;AAChB,CAAC"}