@fluentui-copilot/react-reference 0.0.0-nightly-20240807-0406-0ae2e0d2.1 → 0.0.0-nightly-20240809-0407-b2c628b1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (14) hide show
  1. package/CHANGELOG.json +11 -11
  2. package/CHANGELOG.md +8 -8
  3. package/dist/index.d.ts +9 -1
  4. package/lib/components/reference-v2/ReferenceList/ReferenceList.types.js.map +1 -1
  5. package/lib/components/reference-v2/ReferenceList/renderReferenceList.js +4 -0
  6. package/lib/components/reference-v2/ReferenceList/renderReferenceList.js.map +1 -1
  7. package/lib/components/reference-v2/ReferenceList/useReferenceList.js +4 -1
  8. package/lib/components/reference-v2/ReferenceList/useReferenceList.js.map +1 -1
  9. package/lib-commonjs/components/reference-v2/ReferenceList/ReferenceList.types.js.map +1 -1
  10. package/lib-commonjs/components/reference-v2/ReferenceList/renderReferenceList.js +2 -0
  11. package/lib-commonjs/components/reference-v2/ReferenceList/renderReferenceList.js.map +1 -1
  12. package/lib-commonjs/components/reference-v2/ReferenceList/useReferenceList.js +4 -2
  13. package/lib-commonjs/components/reference-v2/ReferenceList/useReferenceList.js.map +1 -1
  14. package/package.json +5 -5
package/CHANGELOG.json CHANGED
@@ -2,9 +2,9 @@
2
2
  "name": "@fluentui-copilot/react-reference",
3
3
  "entries": [
4
4
  {
5
- "date": "Wed, 07 Aug 2024 04:13:14 GMT",
6
- "tag": "@fluentui-copilot/react-reference_v0.0.0-nightly-20240807-0406-0ae2e0d2.1",
7
- "version": "0.0.0-nightly-20240807-0406-0ae2e0d2.1",
5
+ "date": "Fri, 09 Aug 2024 04:14:04 GMT",
6
+ "tag": "@fluentui-copilot/react-reference_v0.0.0-nightly-20240809-0407-b2c628b1.1",
7
+ "version": "0.0.0-nightly-20240809-0407-b2c628b1.1",
8
8
  "comments": {
9
9
  "prerelease": [
10
10
  {
@@ -16,26 +16,26 @@
16
16
  {
17
17
  "author": "beachball",
18
18
  "package": "@fluentui-copilot/react-reference",
19
- "comment": "Bump @fluentui-copilot/react-preview to v0.0.0-nightly-20240807-0406-0ae2e0d2.1",
20
- "commit": "1845cceabcbd8a7c59755767ff6284a3145277c5"
19
+ "comment": "Bump @fluentui-copilot/react-preview to v0.0.0-nightly-20240809-0407-b2c628b1.1",
20
+ "commit": "cb1e3017495d9c1a6b169637acc1965e90fd02eb"
21
21
  },
22
22
  {
23
23
  "author": "beachball",
24
24
  "package": "@fluentui-copilot/react-reference",
25
- "comment": "Bump @fluentui-copilot/react-provider to v0.0.0-nightly-20240807-0406-0ae2e0d2.1",
26
- "commit": "1845cceabcbd8a7c59755767ff6284a3145277c5"
25
+ "comment": "Bump @fluentui-copilot/react-provider to v0.0.0-nightly-20240809-0407-b2c628b1.1",
26
+ "commit": "cb1e3017495d9c1a6b169637acc1965e90fd02eb"
27
27
  },
28
28
  {
29
29
  "author": "beachball",
30
30
  "package": "@fluentui-copilot/react-reference",
31
- "comment": "Bump @fluentui-copilot/react-sensitivity-label to v0.0.0-nightly-20240807-0406-0ae2e0d2.1",
32
- "commit": "1845cceabcbd8a7c59755767ff6284a3145277c5"
31
+ "comment": "Bump @fluentui-copilot/react-sensitivity-label to v0.0.0-nightly-20240809-0407-b2c628b1.1",
32
+ "commit": "cb1e3017495d9c1a6b169637acc1965e90fd02eb"
33
33
  },
34
34
  {
35
35
  "author": "beachball",
36
36
  "package": "@fluentui-copilot/react-reference",
37
- "comment": "Bump @fluentui-copilot/react-utilities to v0.0.0-nightly-20240807-0406-0ae2e0d2.1",
38
- "commit": "1845cceabcbd8a7c59755767ff6284a3145277c5"
37
+ "comment": "Bump @fluentui-copilot/react-utilities to v0.0.0-nightly-20240809-0407-b2c628b1.1",
38
+ "commit": "cb1e3017495d9c1a6b169637acc1965e90fd02eb"
39
39
  }
40
40
  ]
41
41
  }
package/CHANGELOG.md CHANGED
@@ -1,21 +1,21 @@
1
1
  # Change Log - @fluentui-copilot/react-reference
2
2
 
3
- This log was last generated on Wed, 07 Aug 2024 04:13:14 GMT and should not be manually modified.
3
+ This log was last generated on Fri, 09 Aug 2024 04:14:04 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
- ## [0.0.0-nightly-20240807-0406-0ae2e0d2.1](https://github.com/microsoft/fluentai/tree/@fluentui-copilot/react-reference_v0.0.0-nightly-20240807-0406-0ae2e0d2.1)
7
+ ## [0.0.0-nightly-20240809-0407-b2c628b1.1](https://github.com/microsoft/fluentai/tree/@fluentui-copilot/react-reference_v0.0.0-nightly-20240809-0407-b2c628b1.1)
8
8
 
9
- Wed, 07 Aug 2024 04:13:14 GMT
10
- [Compare changes](https://github.com/microsoft/fluentai/compare/@fluentui-copilot/react-reference_v0.12.3..@fluentui-copilot/react-reference_v0.0.0-nightly-20240807-0406-0ae2e0d2.1)
9
+ Fri, 09 Aug 2024 04:14:04 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentai/compare/@fluentui-copilot/react-reference_v0.12.3..@fluentui-copilot/react-reference_v0.0.0-nightly-20240809-0407-b2c628b1.1)
11
11
 
12
12
  ### Changes
13
13
 
14
14
  - Release nightly ([commit](https://github.com/microsoft/fluentai/commit/not available) by fluentui-internal@service.microsoft.com)
15
- - Bump @fluentui-copilot/react-preview to v0.0.0-nightly-20240807-0406-0ae2e0d2.1 ([commit](https://github.com/microsoft/fluentai/commit/1845cceabcbd8a7c59755767ff6284a3145277c5) by beachball)
16
- - Bump @fluentui-copilot/react-provider to v0.0.0-nightly-20240807-0406-0ae2e0d2.1 ([commit](https://github.com/microsoft/fluentai/commit/1845cceabcbd8a7c59755767ff6284a3145277c5) by beachball)
17
- - Bump @fluentui-copilot/react-sensitivity-label to v0.0.0-nightly-20240807-0406-0ae2e0d2.1 ([commit](https://github.com/microsoft/fluentai/commit/1845cceabcbd8a7c59755767ff6284a3145277c5) by beachball)
18
- - Bump @fluentui-copilot/react-utilities to v0.0.0-nightly-20240807-0406-0ae2e0d2.1 ([commit](https://github.com/microsoft/fluentai/commit/1845cceabcbd8a7c59755767ff6284a3145277c5) by beachball)
15
+ - Bump @fluentui-copilot/react-preview to v0.0.0-nightly-20240809-0407-b2c628b1.1 ([commit](https://github.com/microsoft/fluentai/commit/cb1e3017495d9c1a6b169637acc1965e90fd02eb) by beachball)
16
+ - Bump @fluentui-copilot/react-provider to v0.0.0-nightly-20240809-0407-b2c628b1.1 ([commit](https://github.com/microsoft/fluentai/commit/cb1e3017495d9c1a6b169637acc1965e90fd02eb) by beachball)
17
+ - Bump @fluentui-copilot/react-sensitivity-label to v0.0.0-nightly-20240809-0407-b2c628b1.1 ([commit](https://github.com/microsoft/fluentai/commit/cb1e3017495d9c1a6b169637acc1965e90fd02eb) by beachball)
18
+ - Bump @fluentui-copilot/react-utilities to v0.0.0-nightly-20240809-0407-b2c628b1.1 ([commit](https://github.com/microsoft/fluentai/commit/cb1e3017495d9c1a6b169637acc1965e90fd02eb) by beachball)
19
19
 
20
20
  ## [0.12.3](https://github.com/microsoft/fluentai/tree/@fluentui-copilot/react-reference_v0.12.3)
21
21
 
package/dist/index.d.ts CHANGED
@@ -270,9 +270,17 @@ export declare type ReferenceListV2Props = ComponentProps<ReferenceListV2Slots>
270
270
  * The maximum number of references to display before the overflow button is shown even if there is
271
271
  * enough space available to show more.
272
272
  * If not set, the overflow functionality will be disabled.
273
+ * If this value is less than `minVisibleReferences`, then `minVisibleReferences` will take precedence.
273
274
  * @default undefined
274
275
  */
275
276
  maxVisibleReferences?: number;
277
+ /**
278
+ * The minimum number of references to always show before overflowing.
279
+ * If this value exceeds the number of references, the overflow functionality will be disabled.
280
+ * If this value is greater than `maxVisibleReferences`, then this will take precedence.
281
+ * @default undefined
282
+ */
283
+ minVisibleReferences?: number;
276
284
  };
277
285
 
278
286
  export declare type ReferenceListV2Slots = {
@@ -284,7 +292,7 @@ export declare type ReferenceListV2Slots = {
284
292
  showLessButton?: Slot<'span'>;
285
293
  };
286
294
 
287
- export declare type ReferenceListV2State = ComponentState<ReferenceListV2Slots> & Pick<ReferenceListV2Props, 'maxVisibleReferences'> & {
295
+ export declare type ReferenceListV2State = ComponentState<ReferenceListV2Slots> & Pick<ReferenceListV2Props, 'maxVisibleReferences' | 'minVisibleReferences'> & {
288
296
  areReferencesExpanded: boolean;
289
297
  overflowButtonTriggeredViaKeyboard: React.MutableRefObject<boolean>;
290
298
  referenceListRef: React.RefObject<HTMLDivElement>;
package/lib/components/reference-v2/ReferenceList/ReferenceList.types.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["ReferenceList.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-components';\nimport type { ReferenceListContextValue } from '../../../contexts/reference-v2/referenceListContext';\n\nexport type ReferenceListSlots = {\n /** The root of the component that contains the list of references. */\n root: NonNullable<Slot<'div'>>;\n\n /** A space containing a button that expands the list of references. This slot is only rendered when the list of references is collapsed. */\n showMoreButton?: Slot<'span'>;\n\n /** A space containing a button that collapses the list of references. This slot is only rendered when the list of references is expanded. */\n showLessButton?: Slot<'span'>;\n};\n\nexport type ReferenceListProps = ComponentProps<ReferenceListSlots> & {\n /**\n * The maximum number of references to display before the overflow button is shown even if there is\n * enough space available to show more.\n * If not set, the overflow functionality will be disabled.\n * @default undefined\n */\n maxVisibleReferences?: number;\n};\n\nexport type ReferenceListState = ComponentState<ReferenceListSlots> &\n Pick<ReferenceListProps, 'maxVisibleReferences'> & {\n areReferencesExpanded: boolean;\n overflowButtonTriggeredViaKeyboard: React.MutableRefObject<boolean>;\n referenceListRef: React.RefObject<HTMLDivElement>;\n shouldUseOverflow: boolean;\n totalReferencesCount: number;\n };\n\nexport type ReferenceListContextValues = {\n referenceList: ReferenceListContextValue;\n};\n"],"names":[],"rangeMappings":"","mappings":"AAiCA,WAEE"}
1
+ {"version":3,"sources":["ReferenceList.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-components';\nimport type { ReferenceListContextValue } from '../../../contexts/reference-v2/referenceListContext';\n\nexport type ReferenceListSlots = {\n /** The root of the component that contains the list of references. */\n root: NonNullable<Slot<'div'>>;\n\n /** A space containing a button that expands the list of references. This slot is only rendered when the list of references is collapsed. */\n showMoreButton?: Slot<'span'>;\n\n /** A space containing a button that collapses the list of references. This slot is only rendered when the list of references is expanded. */\n showLessButton?: Slot<'span'>;\n};\n\nexport type ReferenceListProps = ComponentProps<ReferenceListSlots> & {\n /**\n * The maximum number of references to display before the overflow button is shown even if there is\n * enough space available to show more.\n * If not set, the overflow functionality will be disabled.\n * If this value is less than `minVisibleReferences`, then `minVisibleReferences` will take precedence.\n * @default undefined\n */\n maxVisibleReferences?: number;\n\n /**\n * The minimum number of references to always show before overflowing.\n * If this value exceeds the number of references, the overflow functionality will be disabled.\n * If this value is greater than `maxVisibleReferences`, then this will take precedence.\n * @default undefined\n */\n minVisibleReferences?: number;\n};\n\nexport type ReferenceListState = ComponentState<ReferenceListSlots> &\n Pick<ReferenceListProps, 'maxVisibleReferences' | 'minVisibleReferences'> & {\n areReferencesExpanded: boolean;\n overflowButtonTriggeredViaKeyboard: React.MutableRefObject<boolean>;\n referenceListRef: React.RefObject<HTMLDivElement>;\n shouldUseOverflow: boolean;\n totalReferencesCount: number;\n };\n\nexport type ReferenceListContextValues = {\n referenceList: ReferenceListContextValue;\n};\n"],"names":[],"rangeMappings":"","mappings":"AA0CA,WAEE"}
package/lib/components/reference-v2/ReferenceList/renderReferenceList.js CHANGED
@@ -6,9 +6,13 @@ import { ReferenceListContextProvider } from '../../../contexts/reference-v2/ref
6
6
  */
7
7
  export const renderReferenceList_unstable = (state, contextValues) => {
8
8
  assertSlots(state);
9
+ const {
10
+ minVisibleReferences
11
+ } = state;
9
12
  return /*#__PURE__*/_jsx(ReferenceListContextProvider, {
10
13
  value: contextValues.referenceList,
11
14
  children: /*#__PURE__*/_jsx(Overflow, {
15
+ minimumVisible: minVisibleReferences,
12
16
  children: /*#__PURE__*/_jsxs(state.root, {
13
17
  children: [state.root.children, state.showMoreButton && /*#__PURE__*/_jsx(state.showMoreButton, {}), state.showLessButton && /*#__PURE__*/_jsx(state.showLessButton, {})]
14
18
  })
package/lib/components/reference-v2/ReferenceList/renderReferenceList.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["renderReferenceList.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { Overflow, assertSlots } from '@fluentui/react-components';\nimport type { ReferenceListState, ReferenceListSlots, ReferenceListContextValues } from './ReferenceList.types';\nimport { ReferenceListContextProvider } from '../../../contexts/reference-v2/referenceListContext';\n\n/**\n * Render the final JSX of ReferenceList\n */\nexport const renderReferenceList_unstable = (state: ReferenceListState, contextValues: ReferenceListContextValues) => {\n assertSlots<ReferenceListSlots>(state);\n\n return (\n <ReferenceListContextProvider value={contextValues.referenceList}>\n <Overflow>\n <state.root>\n {state.root.children}\n {state.showMoreButton && <state.showMoreButton />}\n {state.showLessButton && <state.showLessButton />}\n </state.root>\n </Overflow>\n </ReferenceListContextProvider>\n );\n};\n"],"names":["Overflow","assertSlots","ReferenceListContextProvider","renderReferenceList_unstable","state","contextValues","value","referenceList","root","children","showMoreButton","showLessButton"],"rangeMappings":";;;;;;;;;;;;;;;;;;;","mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,QAAQ,EAAEC,WAAW,QAAQ,6BAA6B;AAEnE,SAASC,4BAA4B,QAAQ,sDAAsD;AAEnG;;CAEC,GACD,OAAO,MAAMC,+BAA+B,CAACC,OAA2BC;IACtEJ,YAAgCG;IAEhC,qBACE,KAACF;QAA6BI,OAAOD,cAAcE,aAAa;kBAC9D,cAAA,KAACP;sBACC,cAAA,MAACI,MAAMI,IAAI;;oBACRJ,MAAMI,IAAI,CAACC,QAAQ;oBACnBL,MAAMM,cAAc,kBAAI,KAACN,MAAMM,cAAc;oBAC7CN,MAAMO,cAAc,kBAAI,KAACP,MAAMO,cAAc;;;;;AAKxD,EAAE"}
1
+ {"version":3,"sources":["renderReferenceList.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { Overflow, assertSlots } from '@fluentui/react-components';\nimport type { ReferenceListState, ReferenceListSlots, ReferenceListContextValues } from './ReferenceList.types';\nimport { ReferenceListContextProvider } from '../../../contexts/reference-v2/referenceListContext';\n\n/**\n * Render the final JSX of ReferenceList\n */\nexport const renderReferenceList_unstable = (state: ReferenceListState, contextValues: ReferenceListContextValues) => {\n assertSlots<ReferenceListSlots>(state);\n\n const { minVisibleReferences } = state;\n\n return (\n <ReferenceListContextProvider value={contextValues.referenceList}>\n <Overflow minimumVisible={minVisibleReferences}>\n <state.root>\n {state.root.children}\n {state.showMoreButton && <state.showMoreButton />}\n {state.showLessButton && <state.showLessButton />}\n </state.root>\n </Overflow>\n </ReferenceListContextProvider>\n );\n};\n"],"names":["Overflow","assertSlots","ReferenceListContextProvider","renderReferenceList_unstable","state","contextValues","minVisibleReferences","value","referenceList","minimumVisible","root","children","showMoreButton","showLessButton"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,QAAQ,EAAEC,WAAW,QAAQ,6BAA6B;AAEnE,SAASC,4BAA4B,QAAQ,sDAAsD;AAEnG;;CAEC,GACD,OAAO,MAAMC,+BAA+B,CAACC,OAA2BC;IACtEJ,YAAgCG;IAEhC,MAAM,EAAEE,oBAAoB,EAAE,GAAGF;IAEjC,qBACE,KAACF;QAA6BK,OAAOF,cAAcG,aAAa;kBAC9D,cAAA,KAACR;YAASS,gBAAgBH;sBACxB,cAAA,MAACF,MAAMM,IAAI;;oBACRN,MAAMM,IAAI,CAACC,QAAQ;oBACnBP,MAAMQ,cAAc,kBAAI,KAACR,MAAMQ,cAAc;oBAC7CR,MAAMS,cAAc,kBAAI,KAACT,MAAMS,cAAc;;;;;AAKxD,EAAE"}
package/lib/components/reference-v2/ReferenceList/useReferenceList.js CHANGED
@@ -15,6 +15,7 @@ export const useReferenceList_unstable = (props, ref) => {
15
15
  const {
16
16
  children,
17
17
  maxVisibleReferences,
18
+ minVisibleReferences,
18
19
  showLessButton,
19
20
  showMoreButton,
20
21
  ...rest
@@ -27,6 +28,7 @@ export const useReferenceList_unstable = (props, ref) => {
27
28
  additionalCondition: !areReferencesExpanded,
28
29
  children,
29
30
  maxVisibleItems: maxVisibleReferences,
31
+ minVisibleItems: minVisibleReferences,
30
32
  overflowClassName: styles.overflow
31
33
  });
32
34
  // We keep track of whether we are interacting with the overflow button via keyboard or not.
@@ -42,11 +44,12 @@ export const useReferenceList_unstable = (props, ref) => {
42
44
  const onShowLessButtonClick = React.useCallback(() => {
43
45
  setAreReferencesExpanded(false);
44
46
  }, []);
45
- const shouldUseOverflow = maxVisibleReferences !== undefined && !areReferencesExpanded;
47
+ const shouldUseOverflow = (minVisibleReferences === undefined || minVisibleReferences < totalReferencesCount) && maxVisibleReferences !== undefined && !areReferencesExpanded;
46
48
  const state = {
47
49
  areReferencesExpanded,
48
50
  overflowButtonTriggeredViaKeyboard,
49
51
  maxVisibleReferences,
52
+ minVisibleReferences,
50
53
  referenceListRef,
51
54
  shouldUseOverflow,
52
55
  totalReferencesCount,
package/lib/components/reference-v2/ReferenceList/useReferenceList.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["useReferenceList.ts"],"sourcesContent":["import * as React from 'react';\nimport {\n getIntrinsicElementProps,\n mergeCallbacks,\n slot,\n useArrowNavigationGroup,\n useMergedRefs,\n} from '@fluentui/react-components';\nimport { useOverflowMaxVisibleItems } from '@fluentui-copilot/react-utilities';\nimport { useRootStyles } from '../Reference/useReferenceStyles.styles';\nimport type { ReferenceListProps, ReferenceListState } from './ReferenceList.types';\n\n/**\n * Create the state required to render ReferenceList.\n *\n * The returned state can be modified with hooks such as useReferenceListStyles_unstable,\n * before being passed to renderReferenceList_unstable.\n *\n * @param props - props from this instance of ReferenceList\n * @param ref - reference to root HTMLElement of ReferenceList\n */\nexport const useReferenceList_unstable = (\n props: ReferenceListProps,\n ref: React.Ref<HTMLDivElement>,\n): ReferenceListState => {\n const { children, maxVisibleReferences, showLessButton, showMoreButton, ...rest } = props;\n\n const [areReferencesExpanded, setAreReferencesExpanded] = React.useState(false);\n const referenceListRef = React.useRef<HTMLDivElement>(null);\n\n const totalReferencesCount = React.Children.count(children);\n const styles = useRootStyles();\n const resolvedChildren = useOverflowMaxVisibleItems({\n additionalCondition: !areReferencesExpanded,\n children,\n maxVisibleItems: maxVisibleReferences,\n overflowClassName: styles.overflow,\n });\n\n // We keep track of whether we are interacting with the overflow button via keyboard or not.\n const overflowButtonTriggeredViaKeyboard = React.useRef(false);\n\n const focusAttributes = useArrowNavigationGroup({\n axis: 'both',\n circular: true,\n memorizeCurrent: true,\n });\n\n const onShowMoreButtonClick = React.useCallback<React.MouseEventHandler<HTMLButtonElement>>(() => {\n setAreReferencesExpanded(true);\n }, []);\n\n const onShowLessButtonClick = React.useCallback<React.MouseEventHandler<HTMLButtonElement>>(() => {\n setAreReferencesExpanded(false);\n }, []);\n\n const shouldUseOverflow = maxVisibleReferences !== undefined && !areReferencesExpanded;\n\n const state: ReferenceListState = {\n areReferencesExpanded,\n overflowButtonTriggeredViaKeyboard,\n maxVisibleReferences,\n referenceListRef,\n shouldUseOverflow,\n totalReferencesCount,\n\n components: {\n root: 'div',\n showMoreButton: 'span',\n showLessButton: 'span',\n },\n root: slot.always(\n getIntrinsicElementProps('div', {\n ref: useMergedRefs(ref, referenceListRef),\n ...focusAttributes,\n ...rest,\n children: resolvedChildren,\n }),\n { elementType: 'div' },\n ),\n showMoreButton: shouldUseOverflow ? slot.optional(showMoreButton, { elementType: 'span' }) : undefined,\n showLessButton: areReferencesExpanded ? slot.optional(showLessButton, { elementType: 'span' }) : undefined,\n };\n\n if (state.showMoreButton) {\n state.showMoreButton.onClick = mergeCallbacks(onShowMoreButtonClick, state.showMoreButton.onClick);\n }\n\n if (state.showLessButton) {\n state.showLessButton.onClick = mergeCallbacks(onShowLessButtonClick, state.showLessButton.onClick);\n }\n\n return state;\n};\n"],"names":["React","getIntrinsicElementProps","mergeCallbacks","slot","useArrowNavigationGroup","useMergedRefs","useOverflowMaxVisibleItems","useRootStyles","useReferenceList_unstable","props","ref","children","maxVisibleReferences","showLessButton","showMoreButton","rest","areReferencesExpanded","setAreReferencesExpanded","useState","referenceListRef","useRef","totalReferencesCount","Children","count","styles","resolvedChildren","additionalCondition","maxVisibleItems","overflowClassName","overflow","overflowButtonTriggeredViaKeyboard","focusAttributes","axis","circular","memorizeCurrent","onShowMoreButtonClick","useCallback","onShowLessButtonClick","shouldUseOverflow","undefined","state","components","root","always","elementType","optional","onClick"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SACEC,wBAAwB,EACxBC,cAAc,EACdC,IAAI,EACJC,uBAAuB,EACvBC,aAAa,QACR,6BAA6B;AACpC,SAASC,0BAA0B,QAAQ,oCAAoC;AAC/E,SAASC,aAAa,QAAQ,yCAAyC;AAGvE;;;;;;;;CAQC,GACD,OAAO,MAAMC,4BAA4B,CACvCC,OACAC;IAEA,MAAM,EAAEC,QAAQ,EAAEC,oBAAoB,EAAEC,cAAc,EAAEC,cAAc,EAAE,GAAGC,MAAM,GAAGN;IAEpF,MAAM,CAACO,uBAAuBC,yBAAyB,GAAGjB,MAAMkB,QAAQ,CAAC;IACzE,MAAMC,mBAAmBnB,MAAMoB,MAAM,CAAiB;IAEtD,MAAMC,uBAAuBrB,MAAMsB,QAAQ,CAACC,KAAK,CAACZ;IAClD,MAAMa,SAASjB;IACf,MAAMkB,mBAAmBnB,2BAA2B;QAClDoB,qBAAqB,CAACV;QACtBL;QACAgB,iBAAiBf;QACjBgB,mBAAmBJ,OAAOK,QAAQ;IACpC;IAEA,4FAA4F;IAC5F,MAAMC,qCAAqC9B,MAAMoB,MAAM,CAAC;IAExD,MAAMW,kBAAkB3B,wBAAwB;QAC9C4B,MAAM;QACNC,UAAU;QACVC,iBAAiB;IACnB;IAEA,MAAMC,wBAAwBnC,MAAMoC,WAAW,CAA6C;QAC1FnB,yBAAyB;IAC3B,GAAG,EAAE;IAEL,MAAMoB,wBAAwBrC,MAAMoC,WAAW,CAA6C;QAC1FnB,yBAAyB;IAC3B,GAAG,EAAE;IAEL,MAAMqB,oBAAoB1B,yBAAyB2B,aAAa,CAACvB;IAEjE,MAAMwB,QAA4B;QAChCxB;QACAc;QACAlB;QACAO;QACAmB;QACAjB;QAEAoB,YAAY;YACVC,MAAM;YACN5B,gBAAgB;YAChBD,gBAAgB;QAClB;QACA6B,MAAMvC,KAAKwC,MAAM,CACf1C,yBAAyB,OAAO;YAC9BS,KAAKL,cAAcK,KAAKS;YACxB,GAAGY,eAAe;YAClB,GAAGhB,IAAI;YACPJ,UAAUc;QACZ,IACA;YAAEmB,aAAa;QAAM;QAEvB9B,gBAAgBwB,oBAAoBnC,KAAK0C,QAAQ,CAAC/B,gBAAgB;YAAE8B,aAAa;QAAO,KAAKL;QAC7F1B,gBAAgBG,wBAAwBb,KAAK0C,QAAQ,CAAChC,gBAAgB;YAAE+B,aAAa;QAAO,KAAKL;IACnG;IAEA,IAAIC,MAAM1B,cAAc,EAAE;QACxB0B,MAAM1B,cAAc,CAACgC,OAAO,GAAG5C,eAAeiC,uBAAuBK,MAAM1B,cAAc,CAACgC,OAAO;IACnG;IAEA,IAAIN,MAAM3B,cAAc,EAAE;QACxB2B,MAAM3B,cAAc,CAACiC,OAAO,GAAG5C,eAAemC,uBAAuBG,MAAM3B,cAAc,CAACiC,OAAO;IACnG;IAEA,OAAON;AACT,EAAE"}
1
+ {"version":3,"sources":["useReferenceList.ts"],"sourcesContent":["import * as React from 'react';\nimport {\n getIntrinsicElementProps,\n mergeCallbacks,\n slot,\n useArrowNavigationGroup,\n useMergedRefs,\n} from '@fluentui/react-components';\nimport { useOverflowMaxVisibleItems } from '@fluentui-copilot/react-utilities';\nimport { useRootStyles } from '../Reference/useReferenceStyles.styles';\nimport type { ReferenceListProps, ReferenceListState } from './ReferenceList.types';\n\n/**\n * Create the state required to render ReferenceList.\n *\n * The returned state can be modified with hooks such as useReferenceListStyles_unstable,\n * before being passed to renderReferenceList_unstable.\n *\n * @param props - props from this instance of ReferenceList\n * @param ref - reference to root HTMLElement of ReferenceList\n */\nexport const useReferenceList_unstable = (\n props: ReferenceListProps,\n ref: React.Ref<HTMLDivElement>,\n): ReferenceListState => {\n const { children, maxVisibleReferences, minVisibleReferences, showLessButton, showMoreButton, ...rest } = props;\n\n const [areReferencesExpanded, setAreReferencesExpanded] = React.useState(false);\n const referenceListRef = React.useRef<HTMLDivElement>(null);\n\n const totalReferencesCount = React.Children.count(children);\n const styles = useRootStyles();\n const resolvedChildren = useOverflowMaxVisibleItems({\n additionalCondition: !areReferencesExpanded,\n children,\n maxVisibleItems: maxVisibleReferences,\n minVisibleItems: minVisibleReferences,\n overflowClassName: styles.overflow,\n });\n\n // We keep track of whether we are interacting with the overflow button via keyboard or not.\n const overflowButtonTriggeredViaKeyboard = React.useRef(false);\n\n const focusAttributes = useArrowNavigationGroup({\n axis: 'both',\n circular: true,\n memorizeCurrent: true,\n });\n\n const onShowMoreButtonClick = React.useCallback<React.MouseEventHandler<HTMLButtonElement>>(() => {\n setAreReferencesExpanded(true);\n }, []);\n\n const onShowLessButtonClick = React.useCallback<React.MouseEventHandler<HTMLButtonElement>>(() => {\n setAreReferencesExpanded(false);\n }, []);\n\n const shouldUseOverflow =\n (minVisibleReferences === undefined || minVisibleReferences < totalReferencesCount) &&\n maxVisibleReferences !== undefined &&\n !areReferencesExpanded;\n\n const state: ReferenceListState = {\n areReferencesExpanded,\n overflowButtonTriggeredViaKeyboard,\n maxVisibleReferences,\n minVisibleReferences,\n referenceListRef,\n shouldUseOverflow,\n totalReferencesCount,\n\n components: {\n root: 'div',\n showMoreButton: 'span',\n showLessButton: 'span',\n },\n root: slot.always(\n getIntrinsicElementProps('div', {\n ref: useMergedRefs(ref, referenceListRef),\n ...focusAttributes,\n ...rest,\n children: resolvedChildren,\n }),\n { elementType: 'div' },\n ),\n showMoreButton: shouldUseOverflow ? slot.optional(showMoreButton, { elementType: 'span' }) : undefined,\n showLessButton: areReferencesExpanded ? slot.optional(showLessButton, { elementType: 'span' }) : undefined,\n };\n\n if (state.showMoreButton) {\n state.showMoreButton.onClick = mergeCallbacks(onShowMoreButtonClick, state.showMoreButton.onClick);\n }\n\n if (state.showLessButton) {\n state.showLessButton.onClick = mergeCallbacks(onShowLessButtonClick, state.showLessButton.onClick);\n }\n\n return state;\n};\n"],"names":["React","getIntrinsicElementProps","mergeCallbacks","slot","useArrowNavigationGroup","useMergedRefs","useOverflowMaxVisibleItems","useRootStyles","useReferenceList_unstable","props","ref","children","maxVisibleReferences","minVisibleReferences","showLessButton","showMoreButton","rest","areReferencesExpanded","setAreReferencesExpanded","useState","referenceListRef","useRef","totalReferencesCount","Children","count","styles","resolvedChildren","additionalCondition","maxVisibleItems","minVisibleItems","overflowClassName","overflow","overflowButtonTriggeredViaKeyboard","focusAttributes","axis","circular","memorizeCurrent","onShowMoreButtonClick","useCallback","onShowLessButtonClick","shouldUseOverflow","undefined","state","components","root","always","elementType","optional","onClick"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SACEC,wBAAwB,EACxBC,cAAc,EACdC,IAAI,EACJC,uBAAuB,EACvBC,aAAa,QACR,6BAA6B;AACpC,SAASC,0BAA0B,QAAQ,oCAAoC;AAC/E,SAASC,aAAa,QAAQ,yCAAyC;AAGvE;;;;;;;;CAQC,GACD,OAAO,MAAMC,4BAA4B,CACvCC,OACAC;IAEA,MAAM,EAAEC,QAAQ,EAAEC,oBAAoB,EAAEC,oBAAoB,EAAEC,cAAc,EAAEC,cAAc,EAAE,GAAGC,MAAM,GAAGP;IAE1G,MAAM,CAACQ,uBAAuBC,yBAAyB,GAAGlB,MAAMmB,QAAQ,CAAC;IACzE,MAAMC,mBAAmBpB,MAAMqB,MAAM,CAAiB;IAEtD,MAAMC,uBAAuBtB,MAAMuB,QAAQ,CAACC,KAAK,CAACb;IAClD,MAAMc,SAASlB;IACf,MAAMmB,mBAAmBpB,2BAA2B;QAClDqB,qBAAqB,CAACV;QACtBN;QACAiB,iBAAiBhB;QACjBiB,iBAAiBhB;QACjBiB,mBAAmBL,OAAOM,QAAQ;IACpC;IAEA,4FAA4F;IAC5F,MAAMC,qCAAqChC,MAAMqB,MAAM,CAAC;IAExD,MAAMY,kBAAkB7B,wBAAwB;QAC9C8B,MAAM;QACNC,UAAU;QACVC,iBAAiB;IACnB;IAEA,MAAMC,wBAAwBrC,MAAMsC,WAAW,CAA6C;QAC1FpB,yBAAyB;IAC3B,GAAG,EAAE;IAEL,MAAMqB,wBAAwBvC,MAAMsC,WAAW,CAA6C;QAC1FpB,yBAAyB;IAC3B,GAAG,EAAE;IAEL,MAAMsB,oBACJ,AAAC3B,CAAAA,yBAAyB4B,aAAa5B,uBAAuBS,oBAAmB,KACjFV,yBAAyB6B,aACzB,CAACxB;IAEH,MAAMyB,QAA4B;QAChCzB;QACAe;QACApB;QACAC;QACAO;QACAoB;QACAlB;QAEAqB,YAAY;YACVC,MAAM;YACN7B,gBAAgB;YAChBD,gBAAgB;QAClB;QACA8B,MAAMzC,KAAK0C,MAAM,CACf5C,yBAAyB,OAAO;YAC9BS,KAAKL,cAAcK,KAAKU;YACxB,GAAGa,eAAe;YAClB,GAAGjB,IAAI;YACPL,UAAUe;QACZ,IACA;YAAEoB,aAAa;QAAM;QAEvB/B,gBAAgByB,oBAAoBrC,KAAK4C,QAAQ,CAAChC,gBAAgB;YAAE+B,aAAa;QAAO,KAAKL;QAC7F3B,gBAAgBG,wBAAwBd,KAAK4C,QAAQ,CAACjC,gBAAgB;YAAEgC,aAAa;QAAO,KAAKL;IACnG;IAEA,IAAIC,MAAM3B,cAAc,EAAE;QACxB2B,MAAM3B,cAAc,CAACiC,OAAO,GAAG9C,eAAemC,uBAAuBK,MAAM3B,cAAc,CAACiC,OAAO;IACnG;IAEA,IAAIN,MAAM5B,cAAc,EAAE;QACxB4B,MAAM5B,cAAc,CAACkC,OAAO,GAAG9C,eAAeqC,uBAAuBG,MAAM5B,cAAc,CAACkC,OAAO;IACnG;IAEA,OAAON;AACT,EAAE"}
package/lib-commonjs/components/reference-v2/ReferenceList/ReferenceList.types.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["ReferenceList.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-components';\nimport type { ReferenceListContextValue } from '../../../contexts/reference-v2/referenceListContext';\n\nexport type ReferenceListSlots = {\n /** The root of the component that contains the list of references. */\n root: NonNullable<Slot<'div'>>;\n\n /** A space containing a button that expands the list of references. This slot is only rendered when the list of references is collapsed. */\n showMoreButton?: Slot<'span'>;\n\n /** A space containing a button that collapses the list of references. This slot is only rendered when the list of references is expanded. */\n showLessButton?: Slot<'span'>;\n};\n\nexport type ReferenceListProps = ComponentProps<ReferenceListSlots> & {\n /**\n * The maximum number of references to display before the overflow button is shown even if there is\n * enough space available to show more.\n * If not set, the overflow functionality will be disabled.\n * @default undefined\n */\n maxVisibleReferences?: number;\n};\n\nexport type ReferenceListState = ComponentState<ReferenceListSlots> &\n Pick<ReferenceListProps, 'maxVisibleReferences'> & {\n areReferencesExpanded: boolean;\n overflowButtonTriggeredViaKeyboard: React.MutableRefObject<boolean>;\n referenceListRef: React.RefObject<HTMLDivElement>;\n shouldUseOverflow: boolean;\n totalReferencesCount: number;\n };\n\nexport type ReferenceListContextValues = {\n referenceList: ReferenceListContextValue;\n};\n"],"names":[],"rangeMappings":"","mappings":""}
1
+ {"version":3,"sources":["ReferenceList.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-components';\nimport type { ReferenceListContextValue } from '../../../contexts/reference-v2/referenceListContext';\n\nexport type ReferenceListSlots = {\n /** The root of the component that contains the list of references. */\n root: NonNullable<Slot<'div'>>;\n\n /** A space containing a button that expands the list of references. This slot is only rendered when the list of references is collapsed. */\n showMoreButton?: Slot<'span'>;\n\n /** A space containing a button that collapses the list of references. This slot is only rendered when the list of references is expanded. */\n showLessButton?: Slot<'span'>;\n};\n\nexport type ReferenceListProps = ComponentProps<ReferenceListSlots> & {\n /**\n * The maximum number of references to display before the overflow button is shown even if there is\n * enough space available to show more.\n * If not set, the overflow functionality will be disabled.\n * If this value is less than `minVisibleReferences`, then `minVisibleReferences` will take precedence.\n * @default undefined\n */\n maxVisibleReferences?: number;\n\n /**\n * The minimum number of references to always show before overflowing.\n * If this value exceeds the number of references, the overflow functionality will be disabled.\n * If this value is greater than `maxVisibleReferences`, then this will take precedence.\n * @default undefined\n */\n minVisibleReferences?: number;\n};\n\nexport type ReferenceListState = ComponentState<ReferenceListSlots> &\n Pick<ReferenceListProps, 'maxVisibleReferences' | 'minVisibleReferences'> & {\n areReferencesExpanded: boolean;\n overflowButtonTriggeredViaKeyboard: React.MutableRefObject<boolean>;\n referenceListRef: React.RefObject<HTMLDivElement>;\n shouldUseOverflow: boolean;\n totalReferencesCount: number;\n };\n\nexport type ReferenceListContextValues = {\n referenceList: ReferenceListContextValue;\n};\n"],"names":[],"rangeMappings":"","mappings":""}
package/lib-commonjs/components/reference-v2/ReferenceList/renderReferenceList.js CHANGED
@@ -13,9 +13,11 @@ const _reactcomponents = require("@fluentui/react-components");
13
13
  const _referenceListContext = require("../../../contexts/reference-v2/referenceListContext");
14
14
  const renderReferenceList_unstable = (state, contextValues)=>{
15
15
  (0, _reactcomponents.assertSlots)(state);
16
+ const { minVisibleReferences } = state;
16
17
  return /*#__PURE__*/ (0, _jsxruntime.jsx)(_referenceListContext.ReferenceListContextProvider, {
17
18
  value: contextValues.referenceList,
18
19
  children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactcomponents.Overflow, {
20
+ minimumVisible: minVisibleReferences,
19
21
  children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(state.root, {
20
22
  children: [
21
23
  state.root.children,
package/lib-commonjs/components/reference-v2/ReferenceList/renderReferenceList.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["renderReferenceList.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { Overflow, assertSlots } from '@fluentui/react-components';\nimport type { ReferenceListState, ReferenceListSlots, ReferenceListContextValues } from './ReferenceList.types';\nimport { ReferenceListContextProvider } from '../../../contexts/reference-v2/referenceListContext';\n\n/**\n * Render the final JSX of ReferenceList\n */\nexport const renderReferenceList_unstable = (state: ReferenceListState, contextValues: ReferenceListContextValues) => {\n assertSlots<ReferenceListSlots>(state);\n\n return (\n <ReferenceListContextProvider value={contextValues.referenceList}>\n <Overflow>\n <state.root>\n {state.root.children}\n {state.showMoreButton && <state.showMoreButton />}\n {state.showLessButton && <state.showLessButton />}\n </state.root>\n </Overflow>\n </ReferenceListContextProvider>\n );\n};\n"],"names":["assertSlots","state","value","contextValues","referenceList","Overflow","_jsx","root","children","showMoreButton","showLessButton"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAWEA;;;eAAAA;;;4BAVF;iCAEsC;sCAEO;AAM3CA,MAAAA,+BAAgCC,CAAAA,OAAAA;oCAEhC,EAAAA;WACgCC,WAAOC,GAAAA,IAAAA,eAAAA,EAAAA,kDAA2B,EAAA;6BAC9DC,aAACC;6BACC,GAAAC,IAAAA,eAAA,EAAAD,yBAAA,EAACJ;;;0BACEA,IAAMM,CAAIC,QAACA;oBAAQP,MAAAQ,cAAA,IAAA,WAAA,GAAAH,IAAAA,eAAA,EAAAL,MAAAQ,cAAA,EAAA,CAAA;oBAAAR,MAAAS,cAAA,IAAA,WAAA,GAAAJ,IAAAA,eAAA,EAAAL,MAAAS,cAAA,EAAA,CAAA;iBAAA"}
1
+ {"version":3,"sources":["renderReferenceList.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { Overflow, assertSlots } from '@fluentui/react-components';\nimport type { ReferenceListState, ReferenceListSlots, ReferenceListContextValues } from './ReferenceList.types';\nimport { ReferenceListContextProvider } from '../../../contexts/reference-v2/referenceListContext';\n\n/**\n * Render the final JSX of ReferenceList\n */\nexport const renderReferenceList_unstable = (state: ReferenceListState, contextValues: ReferenceListContextValues) => {\n assertSlots<ReferenceListSlots>(state);\n\n const { minVisibleReferences } = state;\n\n return (\n <ReferenceListContextProvider value={contextValues.referenceList}>\n <Overflow minimumVisible={minVisibleReferences}>\n <state.root>\n {state.root.children}\n {state.showMoreButton && <state.showMoreButton />}\n {state.showLessButton && <state.showLessButton />}\n </state.root>\n </Overflow>\n </ReferenceListContextProvider>\n );\n};\n"],"names":["assertSlots","state","minVisibleReferences","contextValues","minimumVisible","referenceList","showMoreButton","root","showLessButton","_jsx"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAWEA;;;eAAAA;;;4BAVF;iCAEsC;sCAEO;AAM3CA,MAAAA,+BAAgCC,CAAAA,OAAAA;oCAExBC,EAAAA;UAER,sBACuCC;sBACzBC,GAAAA,IAAAA,eAAAA,EAAAA,kDAAgBF,EAAAA;6BACxBG,aAAA;;4BACGJ;iCACMK,GAAAA,IAAAA,gBAAAA,EAAAA,MAAcC,IAAA,EAAA;;0BACpBN,IAAMO,CAAAA,QAAAA;oBAAcP,MAAAK,cAAI,IAACL,WAAMO,GAAAA,IAAAA,eAAAA,EAAAA,MAAcF,cAAA,EAAA,CAAA;oBAAAL,MAAAO,cAAA,IAAA,WAAA,GAAAC,IAAAA,eAAA,EAAAR,MAAAO,cAAA,EAAA,CAAA;iBAAA;;;;GAKxD,+CAAE"}
package/lib-commonjs/components/reference-v2/ReferenceList/useReferenceList.js CHANGED
@@ -14,7 +14,7 @@ const _reactcomponents = require("@fluentui/react-components");
14
14
  const _reactutilities = require("@fluentui-copilot/react-utilities");
15
15
  const _useReferenceStylesstyles = require("../Reference/useReferenceStyles.styles");
16
16
  const useReferenceList_unstable = (props, ref)=>{
17
- const { children, maxVisibleReferences, showLessButton, showMoreButton, ...rest } = props;
17
+ const { children, maxVisibleReferences, minVisibleReferences, showLessButton, showMoreButton, ...rest } = props;
18
18
  const [areReferencesExpanded, setAreReferencesExpanded] = _react.useState(false);
19
19
  const referenceListRef = _react.useRef(null);
20
20
  const totalReferencesCount = _react.Children.count(children);
@@ -23,6 +23,7 @@ const useReferenceList_unstable = (props, ref)=>{
23
23
  additionalCondition: !areReferencesExpanded,
24
24
  children,
25
25
  maxVisibleItems: maxVisibleReferences,
26
+ minVisibleItems: minVisibleReferences,
26
27
  overflowClassName: styles.overflow
27
28
  });
28
29
  // We keep track of whether we are interacting with the overflow button via keyboard or not.
@@ -38,11 +39,12 @@ const useReferenceList_unstable = (props, ref)=>{
38
39
  const onShowLessButtonClick = _react.useCallback(()=>{
39
40
  setAreReferencesExpanded(false);
40
41
  }, []);
41
- const shouldUseOverflow = maxVisibleReferences !== undefined && !areReferencesExpanded;
42
+ const shouldUseOverflow = (minVisibleReferences === undefined || minVisibleReferences < totalReferencesCount) && maxVisibleReferences !== undefined && !areReferencesExpanded;
42
43
  const state = {
43
44
  areReferencesExpanded,
44
45
  overflowButtonTriggeredViaKeyboard,
45
46
  maxVisibleReferences,
47
+ minVisibleReferences,
46
48
  referenceListRef,
47
49
  shouldUseOverflow,
48
50
  totalReferencesCount,
package/lib-commonjs/components/reference-v2/ReferenceList/useReferenceList.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["useReferenceList.ts"],"sourcesContent":["import * as React from 'react';\nimport {\n getIntrinsicElementProps,\n mergeCallbacks,\n slot,\n useArrowNavigationGroup,\n useMergedRefs,\n} from '@fluentui/react-components';\nimport { useOverflowMaxVisibleItems } from '@fluentui-copilot/react-utilities';\nimport { useRootStyles } from '../Reference/useReferenceStyles.styles';\nimport type { ReferenceListProps, ReferenceListState } from './ReferenceList.types';\n\n/**\n * Create the state required to render ReferenceList.\n *\n * The returned state can be modified with hooks such as useReferenceListStyles_unstable,\n * before being passed to renderReferenceList_unstable.\n *\n * @param props - props from this instance of ReferenceList\n * @param ref - reference to root HTMLElement of ReferenceList\n */\nexport const useReferenceList_unstable = (\n props: ReferenceListProps,\n ref: React.Ref<HTMLDivElement>,\n): ReferenceListState => {\n const { children, maxVisibleReferences, showLessButton, showMoreButton, ...rest } = props;\n\n const [areReferencesExpanded, setAreReferencesExpanded] = React.useState(false);\n const referenceListRef = React.useRef<HTMLDivElement>(null);\n\n const totalReferencesCount = React.Children.count(children);\n const styles = useRootStyles();\n const resolvedChildren = useOverflowMaxVisibleItems({\n additionalCondition: !areReferencesExpanded,\n children,\n maxVisibleItems: maxVisibleReferences,\n overflowClassName: styles.overflow,\n });\n\n // We keep track of whether we are interacting with the overflow button via keyboard or not.\n const overflowButtonTriggeredViaKeyboard = React.useRef(false);\n\n const focusAttributes = useArrowNavigationGroup({\n axis: 'both',\n circular: true,\n memorizeCurrent: true,\n });\n\n const onShowMoreButtonClick = React.useCallback<React.MouseEventHandler<HTMLButtonElement>>(() => {\n setAreReferencesExpanded(true);\n }, []);\n\n const onShowLessButtonClick = React.useCallback<React.MouseEventHandler<HTMLButtonElement>>(() => {\n setAreReferencesExpanded(false);\n }, []);\n\n const shouldUseOverflow = maxVisibleReferences !== undefined && !areReferencesExpanded;\n\n const state: ReferenceListState = {\n areReferencesExpanded,\n overflowButtonTriggeredViaKeyboard,\n maxVisibleReferences,\n referenceListRef,\n shouldUseOverflow,\n totalReferencesCount,\n\n components: {\n root: 'div',\n showMoreButton: 'span',\n showLessButton: 'span',\n },\n root: slot.always(\n getIntrinsicElementProps('div', {\n ref: useMergedRefs(ref, referenceListRef),\n ...focusAttributes,\n ...rest,\n children: resolvedChildren,\n }),\n { elementType: 'div' },\n ),\n showMoreButton: shouldUseOverflow ? slot.optional(showMoreButton, { elementType: 'span' }) : undefined,\n showLessButton: areReferencesExpanded ? slot.optional(showLessButton, { elementType: 'span' }) : undefined,\n };\n\n if (state.showMoreButton) {\n state.showMoreButton.onClick = mergeCallbacks(onShowMoreButtonClick, state.showMoreButton.onClick);\n }\n\n if (state.showLessButton) {\n state.showLessButton.onClick = mergeCallbacks(onShowLessButtonClick, state.showLessButton.onClick);\n }\n\n return state;\n};\n"],"names":["children","maxVisibleReferences","props","showLessButton","referenceListRef","totalReferencesCount","styles","showMoreButton","resolvedChildren","maxVisibleItems","overflowClassName","overflow","React","Children","count","useRootStyles","overflowButtonTriggeredViaKeyboard","useRef","additionalCondition","focusAttributes","memorizeCurrent","setAreReferencesExpanded","useArrowNavigationGroup","axis","onShowLessButtonClick","onShowMoreButtonClick","useCallback","areReferencesExpanded","components","slot","always","getIntrinsicElementProps","shouldUseOverflow","elementType","rest","undefined","optional","state"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAyBUA;;;eAAAA;;;;iEAzBa;iCAOhB;gCACoC;0CACb;AAgB5B,MAAQA,4BAAUC,CAAoBC,OAAEC;UAExC,EACAH,QAAMI,EAENH,oBAAMI,EACNF,cAAMG,EACNC,cAAMC;UAGJC,CAAAA,uBAAiBR,yBAAAA,GAAAA,OAAAA,QAAAA,CAAAA;UACjBS,mBAAmBJ,OAAAA,MAAOK,CAAAA;UAC5BN,uBAAAO,OAAAC,QAAA,CAAAC,KAAA,CAAAd;UAEAM,SAAAS,IAAAA,uCAAA;UACAP,mBAAMQ,IAAAA,0CAA2CC,EAAAA;QAEjDC,qBAAMC,CAAAA;;yBAEMlB;2BACVmB,OAAiBT,QAAA;;gGAGyE;UAC1FU,qCAAyBT,OAAAK,MAAA,CAAA;UACxBE,kBAAEG,IAAAA,wCAAA,EAAA;QAELC,MAAMC;kBACJH;QACFD,iBAAK;;UAILK,wBAAkCb,OAAAc,WAAA,CAAA;iCAChCC;;UAEA1B,wBAAAA,OAAAA,WAAAA,CAAAA;iCACAG;;UAEAC,oBAAAA,yBAAAA,aAAAA,CAAAA;UAEAuB,QAAAA;;;;;;;oBAQOT;kBACH;4BACUX;4BAEZ;;cAAqBqB,qBAAA,CAAAC,MAAA,CAAAC,IAAAA,yCAAA,EAAA,OAAA;iBAEvBxB,IAAAA,8BAAgByB,EAAAA,KAAAA;8BAAoDC;eAAoBC,IAAKC;sBAC7FhC;;yBAAiGgC;QACnG;QAEA5B,gBAAUA,oBAAgBsB,qBAAA,CAAAO,QAAA,CAAA7B,gBAAA;yBAClBA;QACR,KAAA4B;QAEAhC,gBAAUA,wBAAgB0B,qBAAA,CAAAO,QAAA,CAAAjC,gBAAA;yBAClBA;QACR,KAAAgC;;IAGA,IAAAE,MAAA9B,cAAA,EAAA"}
1
+ {"version":3,"sources":["useReferenceList.ts"],"sourcesContent":["import * as React from 'react';\nimport {\n getIntrinsicElementProps,\n mergeCallbacks,\n slot,\n useArrowNavigationGroup,\n useMergedRefs,\n} from '@fluentui/react-components';\nimport { useOverflowMaxVisibleItems } from '@fluentui-copilot/react-utilities';\nimport { useRootStyles } from '../Reference/useReferenceStyles.styles';\nimport type { ReferenceListProps, ReferenceListState } from './ReferenceList.types';\n\n/**\n * Create the state required to render ReferenceList.\n *\n * The returned state can be modified with hooks such as useReferenceListStyles_unstable,\n * before being passed to renderReferenceList_unstable.\n *\n * @param props - props from this instance of ReferenceList\n * @param ref - reference to root HTMLElement of ReferenceList\n */\nexport const useReferenceList_unstable = (\n props: ReferenceListProps,\n ref: React.Ref<HTMLDivElement>,\n): ReferenceListState => {\n const { children, maxVisibleReferences, minVisibleReferences, showLessButton, showMoreButton, ...rest } = props;\n\n const [areReferencesExpanded, setAreReferencesExpanded] = React.useState(false);\n const referenceListRef = React.useRef<HTMLDivElement>(null);\n\n const totalReferencesCount = React.Children.count(children);\n const styles = useRootStyles();\n const resolvedChildren = useOverflowMaxVisibleItems({\n additionalCondition: !areReferencesExpanded,\n children,\n maxVisibleItems: maxVisibleReferences,\n minVisibleItems: minVisibleReferences,\n overflowClassName: styles.overflow,\n });\n\n // We keep track of whether we are interacting with the overflow button via keyboard or not.\n const overflowButtonTriggeredViaKeyboard = React.useRef(false);\n\n const focusAttributes = useArrowNavigationGroup({\n axis: 'both',\n circular: true,\n memorizeCurrent: true,\n });\n\n const onShowMoreButtonClick = React.useCallback<React.MouseEventHandler<HTMLButtonElement>>(() => {\n setAreReferencesExpanded(true);\n }, []);\n\n const onShowLessButtonClick = React.useCallback<React.MouseEventHandler<HTMLButtonElement>>(() => {\n setAreReferencesExpanded(false);\n }, []);\n\n const shouldUseOverflow =\n (minVisibleReferences === undefined || minVisibleReferences < totalReferencesCount) &&\n maxVisibleReferences !== undefined &&\n !areReferencesExpanded;\n\n const state: ReferenceListState = {\n areReferencesExpanded,\n overflowButtonTriggeredViaKeyboard,\n maxVisibleReferences,\n minVisibleReferences,\n referenceListRef,\n shouldUseOverflow,\n totalReferencesCount,\n\n components: {\n root: 'div',\n showMoreButton: 'span',\n showLessButton: 'span',\n },\n root: slot.always(\n getIntrinsicElementProps('div', {\n ref: useMergedRefs(ref, referenceListRef),\n ...focusAttributes,\n ...rest,\n children: resolvedChildren,\n }),\n { elementType: 'div' },\n ),\n showMoreButton: shouldUseOverflow ? slot.optional(showMoreButton, { elementType: 'span' }) : undefined,\n showLessButton: areReferencesExpanded ? slot.optional(showLessButton, { elementType: 'span' }) : undefined,\n };\n\n if (state.showMoreButton) {\n state.showMoreButton.onClick = mergeCallbacks(onShowMoreButtonClick, state.showMoreButton.onClick);\n }\n\n if (state.showLessButton) {\n state.showLessButton.onClick = mergeCallbacks(onShowLessButtonClick, state.showLessButton.onClick);\n }\n\n return state;\n};\n"],"names":["children","maxVisibleReferences","props","minVisibleReferences","referenceListRef","totalReferencesCount","useRootStyles","showLessButton","resolvedChildren","additionalCondition","minVisibleItems","overflowClassName","styles","overflow","React","Children","count","overflowButtonTriggeredViaKeyboard","useRef","focusAttributes","memorizeCurrent","onShowLessButtonClick","useCallback","setAreReferencesExpanded","circular","shouldUseOverflow","areReferencesExpanded","components","rest","elementType","showMoreButton","slot","optional","ref","undefined","mergeCallbacks","onShowMoreButtonClick","state"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAyBUA;;;eAAAA;;;;iEAzBa;iCAOhB;gCACoC;0CACb;AAgB5B,MAAQA,4BAAUC,CAAoBC,OAAEC;UAExC,EACAH,QAAMI,EAENH,oBAAMI,EACNF,oBAAeG,EACfC,cAAMC,gBACJC;UAGAC,CAAAA,uBAAiBP,yBAAAA,GAAAA,OAAAA,QAAAA,CAAAA;UACjBQ,mBAAmBC,OAAAA,MAAOC,CAAAA;UAC5BR,uBAAAS,OAAAC,QAAA,CAAAC,KAAA,CAAAhB;UAEAY,SAAAN,IAAAA,uCAAA;UACAE,mBAAMS,IAAAA,0CAA2CC,EAAAA;QAEjDT,qBAAMU,CAAAA;;yBAEMlB;yBACVmB;QACFT,mBAAAC,OAAAC,QAAA;;gGAG2B;UACxBI,qCAAEH,OAAAI,MAAA,CAAA;UAELC,kBAAME,IAAAA,wCAA8BC,EAAAA;cAClCC;QACFC,UAAK;QAELJ,iBAAMK;;UAMJC,wBAAAA,OAAAA,WAAAA,CAAAA;iCACAT;;UAEAd,wBAAAA,OAAAA,WAAAA,CAAAA;iCACAC;;UAEAC,oBAAAA,CAAAA,yBAAAA,aAAAA,uBAAAA,oBAAAA,KAAAA,yBAAAA,aAAAA,CAAAA;UAEAsB,QAAAA;;;;;;;;oBASOC;kBACH5B;4BAEF;4BAAE6B;;cAEJC,qBAAAA,CAAAA,MAAAA,CAAAA,IAAAA,yCAAoCC,EAAAA,OAAKC;mDAA2BH,EAAaI,KAAA7B;eAAOe,eAAKe;eAC7F3B,IAAAA;sBAAwEsB;YAAoB;YAC9FA,aAAA;QAEA;wBACQC,oBAAyBK,qBAAAA,CAAAA,QAAAA,CAAeC,gBAAAA;YAChDP,aAAA;QAEA,KAAIQ;wBACI9B,wBAAyB4B,qBAAAA,CAAAA,QAAed,CAAAA,gBAAAA;YAChDQ,aAAA;QAEA,KAAAK;IACA"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fluentui-copilot/react-reference",
3
- "version": "0.0.0-nightly-20240807-0406-0ae2e0d2.1",
3
+ "version": "0.0.0-nightly-20240809-0407-b2c628b1.1",
4
4
  "description": "Fluent AI controls for citations and references",
5
5
  "main": "lib-commonjs/index.js",
6
6
  "module": "lib/index.js",
@@ -12,10 +12,10 @@
12
12
  },
13
13
  "license": "MIT",
14
14
  "dependencies": {
15
- "@fluentui-copilot/react-preview": "0.0.0-nightly-20240807-0406-0ae2e0d2.1",
16
- "@fluentui-copilot/react-provider": "0.0.0-nightly-20240807-0406-0ae2e0d2.1",
17
- "@fluentui-copilot/react-sensitivity-label": "0.0.0-nightly-20240807-0406-0ae2e0d2.1",
18
- "@fluentui-copilot/react-utilities": "0.0.0-nightly-20240807-0406-0ae2e0d2.1",
15
+ "@fluentui-copilot/react-preview": "0.0.0-nightly-20240809-0407-b2c628b1.1",
16
+ "@fluentui-copilot/react-provider": "0.0.0-nightly-20240809-0407-b2c628b1.1",
17
+ "@fluentui-copilot/react-sensitivity-label": "0.0.0-nightly-20240809-0407-b2c628b1.1",
18
+ "@fluentui-copilot/react-utilities": "0.0.0-nightly-20240809-0407-b2c628b1.1",
19
19
  "@swc/helpers": "^0.5.1"
20
20
  },
21
21
  "peerDependencies": {