@fluentui/react-nav 0.0.0-nightly-20250926-0406.1 → 0.0.0-nightly-20250930-0405.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 (25) hide show
  1. package/CHANGELOG.md +18 -18
  2. package/dist/index.d.ts +5 -0
  3. package/lib/components/Nav/useNav.js +2 -1
  4. package/lib/components/Nav/useNav.js.map +1 -1
  5. package/lib/components/NavContext.js +4 -1
  6. package/lib/components/NavContext.js.map +1 -1
  7. package/lib/components/NavContext.types.js.map +1 -1
  8. package/lib/components/NavDrawer/useNavDrawer.js +4 -12
  9. package/lib/components/NavDrawer/useNavDrawer.js.map +1 -1
  10. package/lib/components/NavDrawerBody/useNavDrawerBody.js +12 -1
  11. package/lib/components/NavDrawerBody/useNavDrawerBody.js.map +1 -1
  12. package/lib/components/useNavContextValues.js +5 -3
  13. package/lib/components/useNavContextValues.js.map +1 -1
  14. package/lib-commonjs/components/Nav/useNav.js +2 -1
  15. package/lib-commonjs/components/Nav/useNav.js.map +1 -1
  16. package/lib-commonjs/components/NavContext.js +4 -1
  17. package/lib-commonjs/components/NavContext.js.map +1 -1
  18. package/lib-commonjs/components/NavContext.types.js.map +1 -1
  19. package/lib-commonjs/components/NavDrawer/useNavDrawer.js +4 -12
  20. package/lib-commonjs/components/NavDrawer/useNavDrawer.js.map +1 -1
  21. package/lib-commonjs/components/NavDrawerBody/useNavDrawerBody.js +12 -1
  22. package/lib-commonjs/components/NavDrawerBody/useNavDrawerBody.js.map +1 -1
  23. package/lib-commonjs/components/useNavContextValues.js +5 -3
  24. package/lib-commonjs/components/useNavContextValues.js.map +1 -1
  25. package/package.json +15 -15
package/CHANGELOG.md CHANGED
@@ -1,31 +1,31 @@
1
1
  # Change Log - @fluentui/react-nav
2
2
 
3
- This log was last generated on Fri, 26 Sep 2025 04:21:26 GMT and should not be manually modified.
3
+ This log was last generated on Tue, 30 Sep 2025 04:20:36 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
- ## [0.0.0-nightly-20250926-0406.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-nav_v0.0.0-nightly-20250926-0406.1)
7
+ ## [0.0.0-nightly-20250930-0405.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-nav_v0.0.0-nightly-20250930-0405.1)
8
8
 
9
- Fri, 26 Sep 2025 04:21:26 GMT
10
- [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-nav_v9.3.6..@fluentui/react-nav_v0.0.0-nightly-20250926-0406.1)
9
+ Tue, 30 Sep 2025 04:20:36 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-nav_v9.3.6..@fluentui/react-nav_v0.0.0-nightly-20250930-0405.1)
11
11
 
12
12
  ### Changes
13
13
 
14
14
  - Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/not available) by fluentui-internal@service.microsoft.com)
15
- - Bump @fluentui/react-aria to v0.0.0-nightly-20250926-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/e96bd2bc13e0c107fb06cdfdf1c9837abc5d6565) by beachball)
16
- - Bump @fluentui/react-button to v0.0.0-nightly-20250926-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/e96bd2bc13e0c107fb06cdfdf1c9837abc5d6565) by beachball)
17
- - Bump @fluentui/react-context-selector to v0.0.0-nightly-20250926-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/e96bd2bc13e0c107fb06cdfdf1c9837abc5d6565) by beachball)
18
- - Bump @fluentui/react-divider to v0.0.0-nightly-20250926-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/e96bd2bc13e0c107fb06cdfdf1c9837abc5d6565) by beachball)
19
- - Bump @fluentui/react-drawer to v0.0.0-nightly-20250926-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/e96bd2bc13e0c107fb06cdfdf1c9837abc5d6565) by beachball)
20
- - Bump @fluentui/react-jsx-runtime to v0.0.0-nightly-20250926-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/e96bd2bc13e0c107fb06cdfdf1c9837abc5d6565) by beachball)
21
- - Bump @fluentui/react-motion to v0.0.0-nightly-20250926-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/e96bd2bc13e0c107fb06cdfdf1c9837abc5d6565) by beachball)
22
- - Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20250926-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/e96bd2bc13e0c107fb06cdfdf1c9837abc5d6565) by beachball)
23
- - Bump @fluentui/react-tabster to v0.0.0-nightly-20250926-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/e96bd2bc13e0c107fb06cdfdf1c9837abc5d6565) by beachball)
24
- - Bump @fluentui/react-theme to v0.0.0-nightly-20250926-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/e96bd2bc13e0c107fb06cdfdf1c9837abc5d6565) by beachball)
25
- - Bump @fluentui/react-tooltip to v0.0.0-nightly-20250926-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/e96bd2bc13e0c107fb06cdfdf1c9837abc5d6565) by beachball)
26
- - Bump @fluentui/react-utilities to v0.0.0-nightly-20250926-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/e96bd2bc13e0c107fb06cdfdf1c9837abc5d6565) by beachball)
27
- - Bump @fluentui/react-conformance to v0.0.0-nightly-20250926-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/e96bd2bc13e0c107fb06cdfdf1c9837abc5d6565) by beachball)
28
- - Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20250926-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/e96bd2bc13e0c107fb06cdfdf1c9837abc5d6565) by beachball)
15
+ - Bump @fluentui/react-aria to v0.0.0-nightly-20250930-0405.1 ([commit](https://github.com/microsoft/fluentui/commit/c1584bc27c0a0d4c873c3f4f7b67d11abdd7c5b2) by beachball)
16
+ - Bump @fluentui/react-button to v0.0.0-nightly-20250930-0405.1 ([commit](https://github.com/microsoft/fluentui/commit/c1584bc27c0a0d4c873c3f4f7b67d11abdd7c5b2) by beachball)
17
+ - Bump @fluentui/react-context-selector to v0.0.0-nightly-20250930-0405.1 ([commit](https://github.com/microsoft/fluentui/commit/c1584bc27c0a0d4c873c3f4f7b67d11abdd7c5b2) by beachball)
18
+ - Bump @fluentui/react-divider to v0.0.0-nightly-20250930-0405.1 ([commit](https://github.com/microsoft/fluentui/commit/c1584bc27c0a0d4c873c3f4f7b67d11abdd7c5b2) by beachball)
19
+ - Bump @fluentui/react-drawer to v0.0.0-nightly-20250930-0405.1 ([commit](https://github.com/microsoft/fluentui/commit/c1584bc27c0a0d4c873c3f4f7b67d11abdd7c5b2) by beachball)
20
+ - Bump @fluentui/react-jsx-runtime to v0.0.0-nightly-20250930-0405.1 ([commit](https://github.com/microsoft/fluentui/commit/c1584bc27c0a0d4c873c3f4f7b67d11abdd7c5b2) by beachball)
21
+ - Bump @fluentui/react-motion to v0.0.0-nightly-20250930-0405.1 ([commit](https://github.com/microsoft/fluentui/commit/c1584bc27c0a0d4c873c3f4f7b67d11abdd7c5b2) by beachball)
22
+ - Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20250930-0405.1 ([commit](https://github.com/microsoft/fluentui/commit/c1584bc27c0a0d4c873c3f4f7b67d11abdd7c5b2) by beachball)
23
+ - Bump @fluentui/react-tabster to v0.0.0-nightly-20250930-0405.1 ([commit](https://github.com/microsoft/fluentui/commit/c1584bc27c0a0d4c873c3f4f7b67d11abdd7c5b2) by beachball)
24
+ - Bump @fluentui/react-theme to v0.0.0-nightly-20250930-0405.1 ([commit](https://github.com/microsoft/fluentui/commit/c1584bc27c0a0d4c873c3f4f7b67d11abdd7c5b2) by beachball)
25
+ - Bump @fluentui/react-tooltip to v0.0.0-nightly-20250930-0405.1 ([commit](https://github.com/microsoft/fluentui/commit/c1584bc27c0a0d4c873c3f4f7b67d11abdd7c5b2) by beachball)
26
+ - Bump @fluentui/react-utilities to v0.0.0-nightly-20250930-0405.1 ([commit](https://github.com/microsoft/fluentui/commit/c1584bc27c0a0d4c873c3f4f7b67d11abdd7c5b2) by beachball)
27
+ - Bump @fluentui/react-conformance to v0.0.0-nightly-20250930-0405.1 ([commit](https://github.com/microsoft/fluentui/commit/c1584bc27c0a0d4c873c3f4f7b67d11abdd7c5b2) by beachball)
28
+ - Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20250930-0405.1 ([commit](https://github.com/microsoft/fluentui/commit/c1584bc27c0a0d4c873c3f4f7b67d11abdd7c5b2) by beachball)
29
29
 
30
30
  ## [9.3.6](https://github.com/microsoft/fluentui/tree/@fluentui/react-nav_v9.3.6)
31
31
 
package/dist/index.d.ts CHANGED
@@ -255,6 +255,11 @@ export declare type NavContextValue = Pick<NavProps, 'onNavItemSelect' | 'select
255
255
  * @default true, indicating that multiple categories can be open at the same time.
256
256
  */
257
257
  multiple: boolean;
258
+ /**
259
+ * Setting this to true enables tab AND arrow navigation.
260
+ * @default false
261
+ */
262
+ tabbable: boolean;
258
263
  };
259
264
 
260
265
  /**
package/lib/components/Nav/useNav.js CHANGED
@@ -129,6 +129,7 @@ import { useControllableState, useEventCallback, useMergedRefs, slot, getIntrins
129
129
  getRegisteredNavItems,
130
130
  onRequestNavCategoryItemToggle,
131
131
  multiple,
132
- density
132
+ density,
133
+ tabbable: false
133
134
  };
134
135
  };
package/lib/components/Nav/useNav.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/Nav/useNav.ts"],"sourcesContent":["import * as React from 'react';\nimport {\n useControllableState,\n useEventCallback,\n useMergedRefs,\n slot,\n getIntrinsicElementProps,\n EventHandler,\n} from '@fluentui/react-utilities';\n\nimport type { NavProps, NavState, OnNavItemSelectData } from './Nav.types';\nimport type { NavItemRegisterData, NavItemValue } from '../NavContext.types';\n\n/**\n * Initial value for the uncontrolled case of the list of open indexes\n */\nfunction initializeUncontrolledOpenCategories({\n defaultOpenCategories,\n multiple,\n}: Pick<NavProps, 'defaultOpenCategories' | 'multiple'>): NavItemValue[] | undefined {\n if (defaultOpenCategories !== undefined) {\n if (Array.isArray(defaultOpenCategories)) {\n return multiple ? defaultOpenCategories : [defaultOpenCategories[0]];\n }\n return [defaultOpenCategories];\n }\n return undefined;\n}\n\n/**\n * Updates the list of open indexes based on an index that changes\n * @param value - the index that will change\n * @param previousOpenItems - list of current open indexes\n * @param multiple - if Nav supports open categories at the same time\n */\nconst updateOpenCategories = (value: NavItemValue, previousOpenItems: NavItemValue[], multiple: boolean) => {\n if (multiple) {\n if (previousOpenItems.includes(value)) {\n return previousOpenItems.filter(i => i !== value);\n } else {\n return [...previousOpenItems, value];\n }\n }\n\n return previousOpenItems[0] === value ? [] : [value];\n};\n\n/**\n * Create the state required to render Nav.\n *\n * The returned state can be modified with hooks such as useNavStyles,\n * before being passed to renderNav.\n *\n * @param props - props from this instance of Nav\n * @param ref - reference to root HTMLDivElement of Nav\n */\nexport const useNav_unstable = (props: NavProps, ref: React.Ref<HTMLDivElement>): NavState => {\n const {\n onNavItemSelect,\n onNavCategoryItemToggle,\n multiple = true,\n density = 'medium',\n openCategories: controlledOpenCategoryItems,\n selectedCategoryValue: controlledSelectedCategoryValue,\n selectedValue: controlledSelectedValue,\n defaultOpenCategories,\n defaultSelectedValue,\n defaultSelectedCategoryValue,\n } = props;\n\n const innerRef = React.useRef<HTMLElement>(null);\n\n const [openCategories, setOpenCategories] = useControllableState({\n state: controlledOpenCategoryItems,\n defaultState: initializeUncontrolledOpenCategories({ defaultOpenCategories, multiple }),\n initialState: [],\n });\n\n const [selectedCategoryValue, setSelectedCategoryValue] = useControllableState({\n state: controlledSelectedCategoryValue,\n defaultState: defaultSelectedCategoryValue,\n initialState: undefined,\n });\n\n const [selectedValue, setSelectedValue] = useControllableState({\n state: controlledSelectedValue,\n defaultState: defaultSelectedValue,\n initialState: undefined,\n });\n\n // considered usePrevious, but it is sensitive to re-renders\n // this could cause the previous to move to current in the case where the navItem list re-renders.\n // these refs avoid getRegisteredNavItems changing when selectedValue changes and causing\n // renders for navItems that have not changed.\n const currentSelectedValue = React.useRef<NavItemValue | undefined>(undefined);\n const previousSelectedValue = React.useRef<NavItemValue | undefined>(undefined);\n\n const currentSelectedCategoryValue = React.useRef<NavItemValue | undefined>(undefined);\n const previousSelectedCategoryValue = React.useRef<NavItemValue | undefined>(undefined);\n\n if (currentSelectedValue.current !== selectedValue) {\n previousSelectedValue.current = currentSelectedValue.current;\n currentSelectedValue.current = selectedValue;\n }\n\n if (currentSelectedCategoryValue.current !== selectedCategoryValue) {\n previousSelectedCategoryValue.current = currentSelectedCategoryValue.current;\n currentSelectedCategoryValue.current = selectedCategoryValue;\n }\n\n // used for NavItems and NavSubItems\n const onSelect: EventHandler<OnNavItemSelectData> = useEventCallback((event, data) => {\n setSelectedValue(data.value);\n setSelectedCategoryValue(data.categoryValue ? data.categoryValue : '');\n onNavItemSelect?.(event, data);\n });\n\n // used for NavCategoryItems\n const onRequestNavCategoryItemToggle: EventHandler<OnNavItemSelectData> = useEventCallback((event, data) => {\n if (data.categoryValue !== undefined) {\n const nextOpenCategories = updateOpenCategories(data.categoryValue, openCategories ?? [], multiple);\n onNavCategoryItemToggle?.(event, data);\n setOpenCategories(nextOpenCategories);\n }\n });\n\n const registeredNavItems = React.useRef<Record<string, NavItemRegisterData>>({});\n\n const onRegister = React.useCallback((data: NavItemRegisterData) => {\n registeredNavItems.current[JSON.stringify(data.value)] = data;\n }, []);\n\n const onUnregister = React.useCallback((data: NavItemRegisterData) => {\n delete registeredNavItems.current[JSON.stringify(data.value)];\n }, []);\n\n const getRegisteredNavItems = React.useCallback(() => {\n return {\n selectedValue: currentSelectedValue.current,\n previousSelectedValue: previousSelectedValue.current,\n selectedCategoryValue: currentSelectedCategoryValue.current,\n previousSelectedCategoryValue: previousSelectedCategoryValue.current,\n registeredNavItems: registeredNavItems.current,\n };\n }, []);\n\n return {\n components: {\n root: 'div',\n },\n root: slot.always(\n getIntrinsicElementProps('div', {\n ref: useMergedRefs(ref, innerRef) as React.Ref<HTMLDivElement>,\n ...props,\n }),\n { elementType: 'div' },\n ),\n openCategories,\n selectedValue,\n selectedCategoryValue,\n onRegister,\n onUnregister,\n onSelect,\n getRegisteredNavItems,\n onRequestNavCategoryItemToggle,\n multiple,\n density,\n };\n};\n"],"names":["React","useControllableState","useEventCallback","useMergedRefs","slot","getIntrinsicElementProps","initializeUncontrolledOpenCategories","defaultOpenCategories","multiple","undefined","Array","isArray","updateOpenCategories","value","previousOpenItems","includes","filter","i","useNav_unstable","props","ref","onNavItemSelect","onNavCategoryItemToggle","density","openCategories","controlledOpenCategoryItems","selectedCategoryValue","controlledSelectedCategoryValue","selectedValue","controlledSelectedValue","defaultSelectedValue","defaultSelectedCategoryValue","innerRef","useRef","setOpenCategories","state","defaultState","initialState","setSelectedCategoryValue","setSelectedValue","currentSelectedValue","previousSelectedValue","currentSelectedCategoryValue","previousSelectedCategoryValue","current","onSelect","event","data","categoryValue","onRequestNavCategoryItemToggle","nextOpenCategories","registeredNavItems","onRegister","useCallback","JSON","stringify","onUnregister","getRegisteredNavItems","components","root","always","elementType"],"mappings":"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"}
1
+ {"version":3,"sources":["../src/components/Nav/useNav.ts"],"sourcesContent":["import * as React from 'react';\nimport {\n useControllableState,\n useEventCallback,\n useMergedRefs,\n slot,\n getIntrinsicElementProps,\n EventHandler,\n} from '@fluentui/react-utilities';\n\nimport type { NavProps, NavState, OnNavItemSelectData } from './Nav.types';\nimport type { NavItemRegisterData, NavItemValue } from '../NavContext.types';\n\n/**\n * Initial value for the uncontrolled case of the list of open indexes\n */\nfunction initializeUncontrolledOpenCategories({\n defaultOpenCategories,\n multiple,\n}: Pick<NavProps, 'defaultOpenCategories' | 'multiple'>): NavItemValue[] | undefined {\n if (defaultOpenCategories !== undefined) {\n if (Array.isArray(defaultOpenCategories)) {\n return multiple ? defaultOpenCategories : [defaultOpenCategories[0]];\n }\n return [defaultOpenCategories];\n }\n return undefined;\n}\n\n/**\n * Updates the list of open indexes based on an index that changes\n * @param value - the index that will change\n * @param previousOpenItems - list of current open indexes\n * @param multiple - if Nav supports open categories at the same time\n */\nconst updateOpenCategories = (value: NavItemValue, previousOpenItems: NavItemValue[], multiple: boolean) => {\n if (multiple) {\n if (previousOpenItems.includes(value)) {\n return previousOpenItems.filter(i => i !== value);\n } else {\n return [...previousOpenItems, value];\n }\n }\n\n return previousOpenItems[0] === value ? [] : [value];\n};\n\n/**\n * Create the state required to render Nav.\n *\n * The returned state can be modified with hooks such as useNavStyles,\n * before being passed to renderNav.\n *\n * @param props - props from this instance of Nav\n * @param ref - reference to root HTMLDivElement of Nav\n */\nexport const useNav_unstable = (props: NavProps, ref: React.Ref<HTMLDivElement>): NavState => {\n const {\n onNavItemSelect,\n onNavCategoryItemToggle,\n multiple = true,\n density = 'medium',\n openCategories: controlledOpenCategoryItems,\n selectedCategoryValue: controlledSelectedCategoryValue,\n selectedValue: controlledSelectedValue,\n defaultOpenCategories,\n defaultSelectedValue,\n defaultSelectedCategoryValue,\n } = props;\n\n const innerRef = React.useRef<HTMLElement>(null);\n\n const [openCategories, setOpenCategories] = useControllableState({\n state: controlledOpenCategoryItems,\n defaultState: initializeUncontrolledOpenCategories({ defaultOpenCategories, multiple }),\n initialState: [],\n });\n\n const [selectedCategoryValue, setSelectedCategoryValue] = useControllableState({\n state: controlledSelectedCategoryValue,\n defaultState: defaultSelectedCategoryValue,\n initialState: undefined,\n });\n\n const [selectedValue, setSelectedValue] = useControllableState({\n state: controlledSelectedValue,\n defaultState: defaultSelectedValue,\n initialState: undefined,\n });\n\n // considered usePrevious, but it is sensitive to re-renders\n // this could cause the previous to move to current in the case where the navItem list re-renders.\n // these refs avoid getRegisteredNavItems changing when selectedValue changes and causing\n // renders for navItems that have not changed.\n const currentSelectedValue = React.useRef<NavItemValue | undefined>(undefined);\n const previousSelectedValue = React.useRef<NavItemValue | undefined>(undefined);\n\n const currentSelectedCategoryValue = React.useRef<NavItemValue | undefined>(undefined);\n const previousSelectedCategoryValue = React.useRef<NavItemValue | undefined>(undefined);\n\n if (currentSelectedValue.current !== selectedValue) {\n previousSelectedValue.current = currentSelectedValue.current;\n currentSelectedValue.current = selectedValue;\n }\n\n if (currentSelectedCategoryValue.current !== selectedCategoryValue) {\n previousSelectedCategoryValue.current = currentSelectedCategoryValue.current;\n currentSelectedCategoryValue.current = selectedCategoryValue;\n }\n\n // used for NavItems and NavSubItems\n const onSelect: EventHandler<OnNavItemSelectData> = useEventCallback((event, data) => {\n setSelectedValue(data.value);\n setSelectedCategoryValue(data.categoryValue ? data.categoryValue : '');\n onNavItemSelect?.(event, data);\n });\n\n // used for NavCategoryItems\n const onRequestNavCategoryItemToggle: EventHandler<OnNavItemSelectData> = useEventCallback((event, data) => {\n if (data.categoryValue !== undefined) {\n const nextOpenCategories = updateOpenCategories(data.categoryValue, openCategories ?? [], multiple);\n onNavCategoryItemToggle?.(event, data);\n setOpenCategories(nextOpenCategories);\n }\n });\n\n const registeredNavItems = React.useRef<Record<string, NavItemRegisterData>>({});\n\n const onRegister = React.useCallback((data: NavItemRegisterData) => {\n registeredNavItems.current[JSON.stringify(data.value)] = data;\n }, []);\n\n const onUnregister = React.useCallback((data: NavItemRegisterData) => {\n delete registeredNavItems.current[JSON.stringify(data.value)];\n }, []);\n\n const getRegisteredNavItems = React.useCallback(() => {\n return {\n selectedValue: currentSelectedValue.current,\n previousSelectedValue: previousSelectedValue.current,\n selectedCategoryValue: currentSelectedCategoryValue.current,\n previousSelectedCategoryValue: previousSelectedCategoryValue.current,\n registeredNavItems: registeredNavItems.current,\n };\n }, []);\n\n return {\n components: {\n root: 'div',\n },\n root: slot.always(\n getIntrinsicElementProps('div', {\n ref: useMergedRefs(ref, innerRef) as React.Ref<HTMLDivElement>,\n ...props,\n }),\n { elementType: 'div' },\n ),\n openCategories,\n selectedValue,\n selectedCategoryValue,\n onRegister,\n onUnregister,\n onSelect,\n getRegisteredNavItems,\n onRequestNavCategoryItemToggle,\n multiple,\n density,\n tabbable: false,\n };\n};\n"],"names":["React","useControllableState","useEventCallback","useMergedRefs","slot","getIntrinsicElementProps","initializeUncontrolledOpenCategories","defaultOpenCategories","multiple","undefined","Array","isArray","updateOpenCategories","value","previousOpenItems","includes","filter","i","useNav_unstable","props","ref","onNavItemSelect","onNavCategoryItemToggle","density","openCategories","controlledOpenCategoryItems","selectedCategoryValue","controlledSelectedCategoryValue","selectedValue","controlledSelectedValue","defaultSelectedValue","defaultSelectedCategoryValue","innerRef","useRef","setOpenCategories","state","defaultState","initialState","setSelectedCategoryValue","setSelectedValue","currentSelectedValue","previousSelectedValue","currentSelectedCategoryValue","previousSelectedCategoryValue","current","onSelect","event","data","categoryValue","onRequestNavCategoryItemToggle","nextOpenCategories","registeredNavItems","onRegister","useCallback","JSON","stringify","onUnregister","getRegisteredNavItems","components","root","always","elementType","tabbable"],"mappings":"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"}
package/lib/components/NavContext.js CHANGED
@@ -23,7 +23,10 @@ const navContextDefaultValue = {
23
23
  */ multiple: true,
24
24
  /**
25
25
  * Indicates the vertical density and density of the Nav.
26
- */ density: 'medium'
26
+ */ density: 'medium',
27
+ /**
28
+ * By default, the Nav is a single tab stop with only arrow key navigation
29
+ */ tabbable: false
27
30
  };
28
31
  const NavContext = React.createContext(undefined);
29
32
  export const NavProvider = NavContext.Provider;
package/lib/components/NavContext.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/NavContext.ts"],"sourcesContent":["import * as React from 'react';\nimport { NavContextValue } from './NavContext.types';\n\nconst navContextDefaultValue: NavContextValue = {\n selectedValue: undefined,\n selectedCategoryValue: undefined,\n onRegister: () => {\n /* noop */\n },\n onUnregister: () => {\n /* noop */\n },\n onSelect: () => {\n /* noop */\n },\n getRegisteredNavItems: () => {\n return {\n registeredNavItems: {},\n };\n },\n onRequestNavCategoryItemToggle() {\n /* noop */\n },\n /**\n * The list of opened panels by index\n */\n openCategories: [],\n\n /**\n * Indicates if Nav supports multiple open Categories at the same time.\n */\n multiple: true,\n\n /**\n * Indicates the vertical density and density of the Nav.\n */\n density: 'medium',\n};\n\nconst NavContext = React.createContext<NavContextValue | undefined>(undefined);\n\nexport const NavProvider = NavContext.Provider;\n\nexport const useNavContext_unstable = (): NavContextValue => React.useContext(NavContext) || navContextDefaultValue;\n"],"names":["React","navContextDefaultValue","selectedValue","undefined","selectedCategoryValue","onRegister","onUnregister","onSelect","getRegisteredNavItems","registeredNavItems","onRequestNavCategoryItemToggle","openCategories","multiple","density","NavContext","createContext","NavProvider","Provider","useNavContext_unstable","useContext"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAG/B,MAAMC,yBAA0C;IAC9CC,eAAeC;IACfC,uBAAuBD;IACvBE,YAAY;IACV,QAAQ,GACV;IACAC,cAAc;IACZ,QAAQ,GACV;IACAC,UAAU;IACR,QAAQ,GACV;IACAC,uBAAuB;QACrB,OAAO;YACLC,oBAAoB,CAAC;QACvB;IACF;IACAC;IACE,QAAQ,GACV;IACA;;GAEC,GACDC,gBAAgB,EAAE;IAElB;;GAEC,GACDC,UAAU;IAEV;;GAEC,GACDC,SAAS;AACX;AAEA,MAAMC,aAAad,MAAMe,aAAa,CAA8BZ;AAEpE,OAAO,MAAMa,cAAcF,WAAWG,QAAQ,CAAC;AAE/C,OAAO,MAAMC,yBAAyB,IAAuBlB,MAAMmB,UAAU,CAACL,eAAeb,uBAAuB"}
1
+ {"version":3,"sources":["../src/components/NavContext.ts"],"sourcesContent":["import * as React from 'react';\nimport { NavContextValue } from './NavContext.types';\n\nconst navContextDefaultValue: NavContextValue = {\n selectedValue: undefined,\n selectedCategoryValue: undefined,\n onRegister: () => {\n /* noop */\n },\n onUnregister: () => {\n /* noop */\n },\n onSelect: () => {\n /* noop */\n },\n getRegisteredNavItems: () => {\n return {\n registeredNavItems: {},\n };\n },\n onRequestNavCategoryItemToggle() {\n /* noop */\n },\n /**\n * The list of opened panels by index\n */\n openCategories: [],\n\n /**\n * Indicates if Nav supports multiple open Categories at the same time.\n */\n multiple: true,\n\n /**\n * Indicates the vertical density and density of the Nav.\n */\n density: 'medium',\n\n /**\n * By default, the Nav is a single tab stop with only arrow key navigation\n */\n tabbable: false,\n};\n\nconst NavContext = React.createContext<NavContextValue | undefined>(undefined);\n\nexport const NavProvider = NavContext.Provider;\n\nexport const useNavContext_unstable = (): NavContextValue => React.useContext(NavContext) || navContextDefaultValue;\n"],"names":["React","navContextDefaultValue","selectedValue","undefined","selectedCategoryValue","onRegister","onUnregister","onSelect","getRegisteredNavItems","registeredNavItems","onRequestNavCategoryItemToggle","openCategories","multiple","density","tabbable","NavContext","createContext","NavProvider","Provider","useNavContext_unstable","useContext"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAG/B,MAAMC,yBAA0C;IAC9CC,eAAeC;IACfC,uBAAuBD;IACvBE,YAAY;IACV,QAAQ,GACV;IACAC,cAAc;IACZ,QAAQ,GACV;IACAC,UAAU;IACR,QAAQ,GACV;IACAC,uBAAuB;QACrB,OAAO;YACLC,oBAAoB,CAAC;QACvB;IACF;IACAC;IACE,QAAQ,GACV;IACA;;GAEC,GACDC,gBAAgB,EAAE;IAElB;;GAEC,GACDC,UAAU;IAEV;;GAEC,GACDC,SAAS;IAET;;GAEC,GACDC,UAAU;AACZ;AAEA,MAAMC,aAAaf,MAAMgB,aAAa,CAA8Bb;AAEpE,OAAO,MAAMc,cAAcF,WAAWG,QAAQ,CAAC;AAE/C,OAAO,MAAMC,yBAAyB,IAAuBnB,MAAMoB,UAAU,CAACL,eAAed,uBAAuB"}
package/lib/components/NavContext.types.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/NavContext.types.ts"],"sourcesContent":["import * as React from 'react';\nimport { EventHandler } from '@fluentui/react-utilities';\n\nimport type { NavProps, OnNavItemSelectData } from './Nav/Nav.types';\n\nexport type NavContextValue = Pick<\n NavProps,\n 'onNavItemSelect' | 'selectedValue' | 'selectedCategoryValue' | 'density'\n> & {\n /** A callback to allow a navItem to register itself with the navItem list. */\n onRegister: RegisterNavItemEventHandler;\n\n /** A callback to allow a navItem to unregister itself with the navItem list. */\n onUnregister: RegisterNavItemEventHandler;\n /**\n * A callback to allow a navItem to select itself when pressed.\n */\n onSelect: EventHandler<OnNavItemSelectData>;\n /**\n * Gets the registered navItem data along with current and previous selected values.\n */\n getRegisteredNavItems: () => {\n selectedValue?: NavItemValue;\n selectedCategoryValue?: NavItemValue;\n previousSelectedValue?: NavItemValue;\n registeredNavItems: Record<string, NavItemRegisterData>;\n };\n /**\n * Callback used by NavCategoryItem to request a change on it's own opened state\n * Should be used to toggle NavCategoryItem's open state\n */\n onRequestNavCategoryItemToggle: EventHandler<OnNavItemSelectData>;\n\n /**\n * The list of opened panels by index\n */\n openCategories: NavItemValue[];\n\n /**\n * Indicates if Nav supports multiple open Categories at the same time.\n * @default true, indicating that multiple categories can be open at the same time.\n */\n multiple: boolean;\n};\n\n/**\n * Any value that identifies a specific Item.\n */\nexport type NavItemValue = string;\n\n/**\n * Context values used in rendering navItemList.\n */\nexport type NavContextValues = {\n /**\n * The context of the navItem list available to each navItem.\n */\n nav: NavContextValue;\n};\n\nexport type NavItemRegisterData = {\n /**\n * The value of the navItem.\n */\n value: NavItemValue;\n\n /**\n * The reference to the navItem HTML element.\n */\n ref: React.RefObject<HTMLElement | null>;\n};\n\nexport type RegisterNavItemEventHandler = (data: NavItemRegisterData) => void;\n"],"names":["React"],"mappings":"AAAA,YAAYA,WAAW,QAAQ"}
1
+ {"version":3,"sources":["../src/components/NavContext.types.ts"],"sourcesContent":["import * as React from 'react';\nimport { EventHandler } from '@fluentui/react-utilities';\n\nimport type { NavProps, OnNavItemSelectData } from './Nav/Nav.types';\n\nexport type NavContextValue = Pick<\n NavProps,\n 'onNavItemSelect' | 'selectedValue' | 'selectedCategoryValue' | 'density'\n> & {\n /** A callback to allow a navItem to register itself with the navItem list. */\n onRegister: RegisterNavItemEventHandler;\n\n /** A callback to allow a navItem to unregister itself with the navItem list. */\n onUnregister: RegisterNavItemEventHandler;\n /**\n * A callback to allow a navItem to select itself when pressed.\n */\n onSelect: EventHandler<OnNavItemSelectData>;\n /**\n * Gets the registered navItem data along with current and previous selected values.\n */\n getRegisteredNavItems: () => {\n selectedValue?: NavItemValue;\n selectedCategoryValue?: NavItemValue;\n previousSelectedValue?: NavItemValue;\n registeredNavItems: Record<string, NavItemRegisterData>;\n };\n /**\n * Callback used by NavCategoryItem to request a change on it's own opened state\n * Should be used to toggle NavCategoryItem's open state\n */\n onRequestNavCategoryItemToggle: EventHandler<OnNavItemSelectData>;\n\n /**\n * The list of opened panels by index\n */\n openCategories: NavItemValue[];\n\n /**\n * Indicates if Nav supports multiple open Categories at the same time.\n * @default true, indicating that multiple categories can be open at the same time.\n */\n multiple: boolean;\n\n /**\n * Setting this to true enables tab AND arrow navigation.\n * @default false\n */\n tabbable: boolean;\n};\n\n/**\n * Any value that identifies a specific Item.\n */\nexport type NavItemValue = string;\n\n/**\n * Context values used in rendering navItemList.\n */\nexport type NavContextValues = {\n /**\n * The context of the navItem list available to each navItem.\n */\n nav: NavContextValue;\n};\n\nexport type NavItemRegisterData = {\n /**\n * The value of the navItem.\n */\n value: NavItemValue;\n\n /**\n * The reference to the navItem HTML element.\n */\n ref: React.RefObject<HTMLElement | null>;\n};\n\nexport type RegisterNavItemEventHandler = (data: NavItemRegisterData) => void;\n"],"names":["React"],"mappings":"AAAA,YAAYA,WAAW,QAAQ"}
package/lib/components/NavDrawer/useNavDrawer.js CHANGED
@@ -1,6 +1,5 @@
1
1
  import * as React from 'react';
2
2
  import { Drawer } from '@fluentui/react-drawer';
3
- import { useArrowNavigationGroup } from '@fluentui/react-tabster';
4
3
  import { slot } from '@fluentui/react-utilities';
5
4
  import { useNav_unstable } from '../Nav/useNav';
6
5
  /**
@@ -12,18 +11,12 @@ import { useNav_unstable } from '../Nav/useNav';
12
11
  * @param props - props from this instance of NavDrawer
13
12
  * @param ref - reference to root HTMLDivElement of NavDrawer
14
13
  */ export const useNavDrawer_unstable = (props, ref)=>{
15
- const { tabbable = false, size = undefined } = props;
16
- const focusAttributes = useArrowNavigationGroup({
17
- axis: 'vertical',
18
- circular: true,
19
- tabbable
20
- });
21
- const navState = useNav_unstable({
22
- ...props
23
- }, ref);
14
+ const { size = undefined, tabbable = false } = props;
15
+ const navState = useNav_unstable(props, ref);
24
16
  return {
25
17
  ...navState,
26
18
  size,
19
+ tabbable,
27
20
  components: {
28
21
  // TODO: remove once React v18 slot API is modified
29
22
  // this is a problem with the lack of support for union types on React v18
@@ -34,8 +27,7 @@ import { useNav_unstable } from '../Nav/useNav';
34
27
  root: slot.always({
35
28
  ref,
36
29
  role: 'navigation',
37
- ...props,
38
- ...focusAttributes
30
+ ...props
39
31
  }, {
40
32
  // TODO: remove once React v18 slot API is modified
41
33
  // this is a problem with the lack of support for union types on React v18
package/lib/components/NavDrawer/useNavDrawer.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/NavDrawer/useNavDrawer.ts"],"sourcesContent":["import * as React from 'react';\nimport { Drawer, DrawerProps } from '@fluentui/react-drawer';\nimport { useArrowNavigationGroup } from '@fluentui/react-tabster';\nimport { RefAttributes, slot } from '@fluentui/react-utilities';\n\nimport { useNav_unstable } from '../Nav/useNav';\nimport type { NavDrawerProps, NavDrawerState } from './NavDrawer.types';\n\n/**\n * Create the state required to render NavDrawer.\n *\n * The returned state can be modified with hooks such as useNavDrawerStyles_unstable,\n * before being passed to renderNavDrawer_unstable.\n *\n * @param props - props from this instance of NavDrawer\n * @param ref - reference to root HTMLDivElement of NavDrawer\n */\nexport const useNavDrawer_unstable = (props: NavDrawerProps, ref: React.Ref<HTMLDivElement>): NavDrawerState => {\n const { tabbable = false, size = undefined } = props;\n\n const focusAttributes = useArrowNavigationGroup({\n axis: 'vertical',\n circular: true,\n tabbable,\n });\n\n const navState = useNav_unstable(\n {\n ...props,\n },\n ref,\n );\n\n return {\n ...navState,\n size,\n components: {\n // TODO: remove once React v18 slot API is modified\n // this is a problem with the lack of support for union types on React v18\n // ComponentState is using React.ComponentType which will try to infer propType\n // propTypes WeakValidator signature will break distributive unions making this type invalid\n root: Drawer as React.FC<DrawerProps>,\n },\n\n root: slot.always(\n { ref, role: 'navigation', ...props, ...focusAttributes },\n {\n // TODO: remove once React v18 slot API is modified\n // this is a problem with the lack of support for union types on React v18\n // ComponentState is using React.ComponentType which will try to infer propType\n // propTypes WeakValidator signature will break distributive unions making this type invalid\n elementType: Drawer as React.FC<DrawerProps & RefAttributes<HTMLDivElement>>,\n },\n ),\n };\n};\n"],"names":["React","Drawer","useArrowNavigationGroup","slot","useNav_unstable","useNavDrawer_unstable","props","ref","tabbable","size","undefined","focusAttributes","axis","circular","navState","components","root","always","role","elementType"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,MAAM,QAAqB,yBAAyB;AAC7D,SAASC,uBAAuB,QAAQ,0BAA0B;AAClE,SAAwBC,IAAI,QAAQ,4BAA4B;AAEhE,SAASC,eAAe,QAAQ,gBAAgB;AAGhD;;;;;;;;CAQC,GACD,OAAO,MAAMC,wBAAwB,CAACC,OAAuBC;IAC3D,MAAM,EAAEC,WAAW,KAAK,EAAEC,OAAOC,SAAS,EAAE,GAAGJ;IAE/C,MAAMK,kBAAkBT,wBAAwB;QAC9CU,MAAM;QACNC,UAAU;QACVL;IACF;IAEA,MAAMM,WAAWV,gBACf;QACE,GAAGE,KAAK;IACV,GACAC;IAGF,OAAO;QACL,GAAGO,QAAQ;QACXL;QACAM,YAAY;YACV,mDAAmD;YACnD,0EAA0E;YAC1E,+EAA+E;YAC/E,4FAA4F;YAC5FC,MAAMf;QACR;QAEAe,MAAMb,KAAKc,MAAM,CACf;YAAEV;YAAKW,MAAM;YAAc,GAAGZ,KAAK;YAAE,GAAGK,eAAe;QAAC,GACxD;YACE,mDAAmD;YACnD,0EAA0E;YAC1E,+EAA+E;YAC/E,4FAA4F;YAC5FQ,aAAalB;QACf;IAEJ;AACF,EAAE"}
1
+ {"version":3,"sources":["../src/components/NavDrawer/useNavDrawer.ts"],"sourcesContent":["import * as React from 'react';\nimport { Drawer, DrawerProps } from '@fluentui/react-drawer';\nimport { RefAttributes, slot } from '@fluentui/react-utilities';\n\nimport { useNav_unstable } from '../Nav/useNav';\nimport type { NavDrawerProps, NavDrawerState } from './NavDrawer.types';\n\n/**\n * Create the state required to render NavDrawer.\n *\n * The returned state can be modified with hooks such as useNavDrawerStyles_unstable,\n * before being passed to renderNavDrawer_unstable.\n *\n * @param props - props from this instance of NavDrawer\n * @param ref - reference to root HTMLDivElement of NavDrawer\n */\nexport const useNavDrawer_unstable = (props: NavDrawerProps, ref: React.Ref<HTMLDivElement>): NavDrawerState => {\n const { size = undefined, tabbable = false } = props;\n\n const navState = useNav_unstable(props, ref);\n\n return {\n ...navState,\n size,\n tabbable,\n components: {\n // TODO: remove once React v18 slot API is modified\n // this is a problem with the lack of support for union types on React v18\n // ComponentState is using React.ComponentType which will try to infer propType\n // propTypes WeakValidator signature will break distributive unions making this type invalid\n root: Drawer as React.FC<DrawerProps>,\n },\n\n root: slot.always(\n { ref, role: 'navigation', ...props },\n {\n // TODO: remove once React v18 slot API is modified\n // this is a problem with the lack of support for union types on React v18\n // ComponentState is using React.ComponentType which will try to infer propType\n // propTypes WeakValidator signature will break distributive unions making this type invalid\n elementType: Drawer as React.FC<DrawerProps & RefAttributes<HTMLDivElement>>,\n },\n ),\n };\n};\n"],"names":["React","Drawer","slot","useNav_unstable","useNavDrawer_unstable","props","ref","size","undefined","tabbable","navState","components","root","always","role","elementType"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,MAAM,QAAqB,yBAAyB;AAC7D,SAAwBC,IAAI,QAAQ,4BAA4B;AAEhE,SAASC,eAAe,QAAQ,gBAAgB;AAGhD;;;;;;;;CAQC,GACD,OAAO,MAAMC,wBAAwB,CAACC,OAAuBC;IAC3D,MAAM,EAAEC,OAAOC,SAAS,EAAEC,WAAW,KAAK,EAAE,GAAGJ;IAE/C,MAAMK,WAAWP,gBAAgBE,OAAOC;IAExC,OAAO;QACL,GAAGI,QAAQ;QACXH;QACAE;QACAE,YAAY;YACV,mDAAmD;YACnD,0EAA0E;YAC1E,+EAA+E;YAC/E,4FAA4F;YAC5FC,MAAMX;QACR;QAEAW,MAAMV,KAAKW,MAAM,CACf;YAAEP;YAAKQ,MAAM;YAAc,GAAGT,KAAK;QAAC,GACpC;YACE,mDAAmD;YACnD,0EAA0E;YAC1E,+EAA+E;YAC/E,4FAA4F;YAC5FU,aAAad;QACf;IAEJ;AACF,EAAE"}
package/lib/components/NavDrawerBody/useNavDrawerBody.js CHANGED
@@ -1,5 +1,7 @@
1
1
  import * as React from 'react';
2
+ import { useArrowNavigationGroup } from '@fluentui/react-tabster';
2
3
  import { useDrawerBody_unstable } from '@fluentui/react-drawer';
4
+ import { useNavContext_unstable } from '../NavContext';
3
5
  /**
4
6
  * Create the state required to render NavDrawerBody.
5
7
  *
@@ -9,5 +11,14 @@ import { useDrawerBody_unstable } from '@fluentui/react-drawer';
9
11
  * @param props - props from this instance of NavDrawerBody
10
12
  * @param ref - reference to root HTMLDivElement of NavDrawerBody
11
13
  */ export const useNavDrawerBody_unstable = (props, ref)=>{
12
- return useDrawerBody_unstable(props, ref);
14
+ const { tabbable } = useNavContext_unstable();
15
+ const focusAttributes = useArrowNavigationGroup({
16
+ axis: 'vertical',
17
+ circular: true,
18
+ tabbable
19
+ });
20
+ return useDrawerBody_unstable({
21
+ ...props,
22
+ ...focusAttributes
23
+ }, ref);
13
24
  };
package/lib/components/NavDrawerBody/useNavDrawerBody.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/NavDrawerBody/useNavDrawerBody.ts"],"sourcesContent":["import * as React from 'react';\nimport { useDrawerBody_unstable } from '@fluentui/react-drawer';\n\nimport type { NavDrawerBodyProps, NavDrawerBodyState } from './NavDrawerBody.types';\n/**\n * Create the state required to render NavDrawerBody.\n *\n * The returned state can be modified with hooks such as useNavDrawerBodyStyles_unstable,\n * before being passed to renderNavDrawerBody_unstable.\n *\n * @param props - props from this instance of NavDrawerBody\n * @param ref - reference to root HTMLDivElement of NavDrawerBody\n */\nexport const useNavDrawerBody_unstable = (\n props: NavDrawerBodyProps,\n ref: React.Ref<HTMLDivElement>,\n): NavDrawerBodyState => {\n return useDrawerBody_unstable(props, ref);\n};\n"],"names":["React","useDrawerBody_unstable","useNavDrawerBody_unstable","props","ref"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,sBAAsB,QAAQ,yBAAyB;AAGhE;;;;;;;;CAQC,GACD,OAAO,MAAMC,4BAA4B,CACvCC,OACAC;IAEA,OAAOH,uBAAuBE,OAAOC;AACvC,EAAE"}
1
+ {"version":3,"sources":["../src/components/NavDrawerBody/useNavDrawerBody.ts"],"sourcesContent":["import * as React from 'react';\nimport { useArrowNavigationGroup } from '@fluentui/react-tabster';\nimport { useDrawerBody_unstable } from '@fluentui/react-drawer';\n\nimport { useNavContext_unstable } from '../NavContext';\nimport type { NavDrawerBodyProps, NavDrawerBodyState } from './NavDrawerBody.types';\n/**\n * Create the state required to render NavDrawerBody.\n *\n * The returned state can be modified with hooks such as useNavDrawerBodyStyles_unstable,\n * before being passed to renderNavDrawerBody_unstable.\n *\n * @param props - props from this instance of NavDrawerBody\n * @param ref - reference to root HTMLDivElement of NavDrawerBody\n */\nexport const useNavDrawerBody_unstable = (\n props: NavDrawerBodyProps,\n ref: React.Ref<HTMLDivElement>,\n): NavDrawerBodyState => {\n const { tabbable } = useNavContext_unstable();\n const focusAttributes = useArrowNavigationGroup({\n axis: 'vertical',\n circular: true,\n tabbable,\n });\n\n return useDrawerBody_unstable({ ...props, ...focusAttributes }, ref);\n};\n"],"names":["React","useArrowNavigationGroup","useDrawerBody_unstable","useNavContext_unstable","useNavDrawerBody_unstable","props","ref","tabbable","focusAttributes","axis","circular"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,uBAAuB,QAAQ,0BAA0B;AAClE,SAASC,sBAAsB,QAAQ,yBAAyB;AAEhE,SAASC,sBAAsB,QAAQ,gBAAgB;AAEvD;;;;;;;;CAQC,GACD,OAAO,MAAMC,4BAA4B,CACvCC,OACAC;IAEA,MAAM,EAAEC,QAAQ,EAAE,GAAGJ;IACrB,MAAMK,kBAAkBP,wBAAwB;QAC9CQ,MAAM;QACNC,UAAU;QACVH;IACF;IAEA,OAAOL,uBAAuB;QAAE,GAAGG,KAAK;QAAE,GAAGG,eAAe;IAAC,GAAGF;AAClE,EAAE"}
package/lib/components/useNavContextValues.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import * as React from 'react';
2
2
  export function useNavContextValues_unstable(state) {
3
- const { selectedValue, selectedCategoryValue, onRegister, onUnregister, onSelect, getRegisteredNavItems, onRequestNavCategoryItemToggle, openCategories, multiple, density, onNavItemSelect } = state;
3
+ const { selectedValue, selectedCategoryValue, onRegister, onUnregister, onSelect, getRegisteredNavItems, onRequestNavCategoryItemToggle, openCategories, multiple, density, onNavItemSelect, tabbable } = state;
4
4
  const navContext = React.useMemo(()=>({
5
5
  selectedValue,
6
6
  selectedCategoryValue,
@@ -12,7 +12,8 @@ export function useNavContextValues_unstable(state) {
12
12
  openCategories,
13
13
  multiple,
14
14
  density,
15
- onNavItemSelect
15
+ onNavItemSelect,
16
+ tabbable
16
17
  }), [
17
18
  selectedValue,
18
19
  selectedCategoryValue,
@@ -24,7 +25,8 @@ export function useNavContextValues_unstable(state) {
24
25
  openCategories,
25
26
  multiple,
26
27
  density,
27
- onNavItemSelect
28
+ onNavItemSelect,
29
+ tabbable
28
30
  ]);
29
31
  return {
30
32
  nav: navContext
package/lib/components/useNavContextValues.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/useNavContextValues.tsx"],"sourcesContent":["import * as React from 'react';\nimport { NavContextValue, NavContextValues, NavState } from '../Nav';\n\nexport function useNavContextValues_unstable(state: NavState): NavContextValues {\n const {\n selectedValue,\n selectedCategoryValue,\n onRegister,\n onUnregister,\n onSelect,\n getRegisteredNavItems,\n onRequestNavCategoryItemToggle,\n openCategories,\n multiple,\n density,\n onNavItemSelect,\n } = state;\n\n const navContext = React.useMemo<NavContextValue>(\n () => ({\n selectedValue,\n selectedCategoryValue,\n onSelect,\n onRegister,\n onUnregister,\n getRegisteredNavItems,\n onRequestNavCategoryItemToggle,\n openCategories,\n multiple,\n density,\n onNavItemSelect,\n }),\n [\n selectedValue,\n selectedCategoryValue,\n onSelect,\n onRegister,\n onUnregister,\n getRegisteredNavItems,\n onRequestNavCategoryItemToggle,\n openCategories,\n multiple,\n density,\n onNavItemSelect,\n ],\n );\n\n return { nav: navContext };\n}\n"],"names":["React","useNavContextValues_unstable","state","selectedValue","selectedCategoryValue","onRegister","onUnregister","onSelect","getRegisteredNavItems","onRequestNavCategoryItemToggle","openCategories","multiple","density","onNavItemSelect","navContext","useMemo","nav"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAG/B,OAAO,SAASC,6BAA6BC,KAAe;IAC1D,MAAM,EACJC,aAAa,EACbC,qBAAqB,EACrBC,UAAU,EACVC,YAAY,EACZC,QAAQ,EACRC,qBAAqB,EACrBC,8BAA8B,EAC9BC,cAAc,EACdC,QAAQ,EACRC,OAAO,EACPC,eAAe,EAChB,GAAGX;IAEJ,MAAMY,aAAad,MAAMe,OAAO,CAC9B,IAAO,CAAA;YACLZ;YACAC;YACAG;YACAF;YACAC;YACAE;YACAC;YACAC;YACAC;YACAC;YACAC;QACF,CAAA,GACA;QACEV;QACAC;QACAG;QACAF;QACAC;QACAE;QACAC;QACAC;QACAC;QACAC;QACAC;KACD;IAGH,OAAO;QAAEG,KAAKF;IAAW;AAC3B"}
1
+ {"version":3,"sources":["../src/components/useNavContextValues.tsx"],"sourcesContent":["import * as React from 'react';\nimport { NavContextValue, NavContextValues, NavState } from '../Nav';\n\nexport function useNavContextValues_unstable(state: NavState): NavContextValues {\n const {\n selectedValue,\n selectedCategoryValue,\n onRegister,\n onUnregister,\n onSelect,\n getRegisteredNavItems,\n onRequestNavCategoryItemToggle,\n openCategories,\n multiple,\n density,\n onNavItemSelect,\n tabbable,\n } = state;\n\n const navContext = React.useMemo<NavContextValue>(\n () => ({\n selectedValue,\n selectedCategoryValue,\n onSelect,\n onRegister,\n onUnregister,\n getRegisteredNavItems,\n onRequestNavCategoryItemToggle,\n openCategories,\n multiple,\n density,\n onNavItemSelect,\n tabbable,\n }),\n [\n selectedValue,\n selectedCategoryValue,\n onSelect,\n onRegister,\n onUnregister,\n getRegisteredNavItems,\n onRequestNavCategoryItemToggle,\n openCategories,\n multiple,\n density,\n onNavItemSelect,\n tabbable,\n ],\n );\n\n return { nav: navContext };\n}\n"],"names":["React","useNavContextValues_unstable","state","selectedValue","selectedCategoryValue","onRegister","onUnregister","onSelect","getRegisteredNavItems","onRequestNavCategoryItemToggle","openCategories","multiple","density","onNavItemSelect","tabbable","navContext","useMemo","nav"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAG/B,OAAO,SAASC,6BAA6BC,KAAe;IAC1D,MAAM,EACJC,aAAa,EACbC,qBAAqB,EACrBC,UAAU,EACVC,YAAY,EACZC,QAAQ,EACRC,qBAAqB,EACrBC,8BAA8B,EAC9BC,cAAc,EACdC,QAAQ,EACRC,OAAO,EACPC,eAAe,EACfC,QAAQ,EACT,GAAGZ;IAEJ,MAAMa,aAAaf,MAAMgB,OAAO,CAC9B,IAAO,CAAA;YACLb;YACAC;YACAG;YACAF;YACAC;YACAE;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;QACF,CAAA,GACA;QACEX;QACAC;QACAG;QACAF;QACAC;QACAE;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;KACD;IAGH,OAAO;QAAEG,KAAKF;IAAW;AAC3B"}
package/lib-commonjs/components/Nav/useNav.js CHANGED
@@ -132,6 +132,7 @@ const useNav_unstable = (props, ref)=>{
132
132
  getRegisteredNavItems,
133
133
  onRequestNavCategoryItemToggle,
134
134
  multiple,
135
- density
135
+ density,
136
+ tabbable: false
136
137
  };
137
138
  };
package/lib-commonjs/components/Nav/useNav.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/Nav/useNav.ts"],"sourcesContent":["import * as React from 'react';\nimport {\n useControllableState,\n useEventCallback,\n useMergedRefs,\n slot,\n getIntrinsicElementProps,\n EventHandler,\n} from '@fluentui/react-utilities';\n\nimport type { NavProps, NavState, OnNavItemSelectData } from './Nav.types';\nimport type { NavItemRegisterData, NavItemValue } from '../NavContext.types';\n\n/**\n * Initial value for the uncontrolled case of the list of open indexes\n */\nfunction initializeUncontrolledOpenCategories({\n defaultOpenCategories,\n multiple,\n}: Pick<NavProps, 'defaultOpenCategories' | 'multiple'>): NavItemValue[] | undefined {\n if (defaultOpenCategories !== undefined) {\n if (Array.isArray(defaultOpenCategories)) {\n return multiple ? defaultOpenCategories : [defaultOpenCategories[0]];\n }\n return [defaultOpenCategories];\n }\n return undefined;\n}\n\n/**\n * Updates the list of open indexes based on an index that changes\n * @param value - the index that will change\n * @param previousOpenItems - list of current open indexes\n * @param multiple - if Nav supports open categories at the same time\n */\nconst updateOpenCategories = (value: NavItemValue, previousOpenItems: NavItemValue[], multiple: boolean) => {\n if (multiple) {\n if (previousOpenItems.includes(value)) {\n return previousOpenItems.filter(i => i !== value);\n } else {\n return [...previousOpenItems, value];\n }\n }\n\n return previousOpenItems[0] === value ? [] : [value];\n};\n\n/**\n * Create the state required to render Nav.\n *\n * The returned state can be modified with hooks such as useNavStyles,\n * before being passed to renderNav.\n *\n * @param props - props from this instance of Nav\n * @param ref - reference to root HTMLDivElement of Nav\n */\nexport const useNav_unstable = (props: NavProps, ref: React.Ref<HTMLDivElement>): NavState => {\n const {\n onNavItemSelect,\n onNavCategoryItemToggle,\n multiple = true,\n density = 'medium',\n openCategories: controlledOpenCategoryItems,\n selectedCategoryValue: controlledSelectedCategoryValue,\n selectedValue: controlledSelectedValue,\n defaultOpenCategories,\n defaultSelectedValue,\n defaultSelectedCategoryValue,\n } = props;\n\n const innerRef = React.useRef<HTMLElement>(null);\n\n const [openCategories, setOpenCategories] = useControllableState({\n state: controlledOpenCategoryItems,\n defaultState: initializeUncontrolledOpenCategories({ defaultOpenCategories, multiple }),\n initialState: [],\n });\n\n const [selectedCategoryValue, setSelectedCategoryValue] = useControllableState({\n state: controlledSelectedCategoryValue,\n defaultState: defaultSelectedCategoryValue,\n initialState: undefined,\n });\n\n const [selectedValue, setSelectedValue] = useControllableState({\n state: controlledSelectedValue,\n defaultState: defaultSelectedValue,\n initialState: undefined,\n });\n\n // considered usePrevious, but it is sensitive to re-renders\n // this could cause the previous to move to current in the case where the navItem list re-renders.\n // these refs avoid getRegisteredNavItems changing when selectedValue changes and causing\n // renders for navItems that have not changed.\n const currentSelectedValue = React.useRef<NavItemValue | undefined>(undefined);\n const previousSelectedValue = React.useRef<NavItemValue | undefined>(undefined);\n\n const currentSelectedCategoryValue = React.useRef<NavItemValue | undefined>(undefined);\n const previousSelectedCategoryValue = React.useRef<NavItemValue | undefined>(undefined);\n\n if (currentSelectedValue.current !== selectedValue) {\n previousSelectedValue.current = currentSelectedValue.current;\n currentSelectedValue.current = selectedValue;\n }\n\n if (currentSelectedCategoryValue.current !== selectedCategoryValue) {\n previousSelectedCategoryValue.current = currentSelectedCategoryValue.current;\n currentSelectedCategoryValue.current = selectedCategoryValue;\n }\n\n // used for NavItems and NavSubItems\n const onSelect: EventHandler<OnNavItemSelectData> = useEventCallback((event, data) => {\n setSelectedValue(data.value);\n setSelectedCategoryValue(data.categoryValue ? data.categoryValue : '');\n onNavItemSelect?.(event, data);\n });\n\n // used for NavCategoryItems\n const onRequestNavCategoryItemToggle: EventHandler<OnNavItemSelectData> = useEventCallback((event, data) => {\n if (data.categoryValue !== undefined) {\n const nextOpenCategories = updateOpenCategories(data.categoryValue, openCategories ?? [], multiple);\n onNavCategoryItemToggle?.(event, data);\n setOpenCategories(nextOpenCategories);\n }\n });\n\n const registeredNavItems = React.useRef<Record<string, NavItemRegisterData>>({});\n\n const onRegister = React.useCallback((data: NavItemRegisterData) => {\n registeredNavItems.current[JSON.stringify(data.value)] = data;\n }, []);\n\n const onUnregister = React.useCallback((data: NavItemRegisterData) => {\n delete registeredNavItems.current[JSON.stringify(data.value)];\n }, []);\n\n const getRegisteredNavItems = React.useCallback(() => {\n return {\n selectedValue: currentSelectedValue.current,\n previousSelectedValue: previousSelectedValue.current,\n selectedCategoryValue: currentSelectedCategoryValue.current,\n previousSelectedCategoryValue: previousSelectedCategoryValue.current,\n registeredNavItems: registeredNavItems.current,\n };\n }, []);\n\n return {\n components: {\n root: 'div',\n },\n root: slot.always(\n getIntrinsicElementProps('div', {\n ref: useMergedRefs(ref, innerRef) as React.Ref<HTMLDivElement>,\n ...props,\n }),\n { elementType: 'div' },\n ),\n openCategories,\n selectedValue,\n selectedCategoryValue,\n onRegister,\n onUnregister,\n onSelect,\n getRegisteredNavItems,\n onRequestNavCategoryItemToggle,\n multiple,\n density,\n };\n};\n"],"names":["React","useControllableState","useEventCallback","useMergedRefs","slot","getIntrinsicElementProps","initializeUncontrolledOpenCategories","defaultOpenCategories","multiple","undefined","Array","isArray","updateOpenCategories","value","previousOpenItems","includes","filter","i","useNav_unstable","props","ref","onNavItemSelect","onNavCategoryItemToggle","density","openCategories","controlledOpenCategoryItems","selectedCategoryValue","controlledSelectedCategoryValue","selectedValue","controlledSelectedValue","defaultSelectedValue","defaultSelectedCategoryValue","innerRef","useRef","setOpenCategories","state","defaultState","initialState","setSelectedCategoryValue","setSelectedValue","currentSelectedValue","previousSelectedValue","currentSelectedCategoryValue","previousSelectedCategoryValue","current","onSelect","event","data","categoryValue","onRequestNavCategoryItemToggle","nextOpenCategories","registeredNavItems","onRegister","useCallback","JSON","stringify","onUnregister","getRegisteredNavItems","components","root","always","elementType"],"mappings":"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"}
1
+ {"version":3,"sources":["../src/components/Nav/useNav.ts"],"sourcesContent":["import * as React from 'react';\nimport {\n useControllableState,\n useEventCallback,\n useMergedRefs,\n slot,\n getIntrinsicElementProps,\n EventHandler,\n} from '@fluentui/react-utilities';\n\nimport type { NavProps, NavState, OnNavItemSelectData } from './Nav.types';\nimport type { NavItemRegisterData, NavItemValue } from '../NavContext.types';\n\n/**\n * Initial value for the uncontrolled case of the list of open indexes\n */\nfunction initializeUncontrolledOpenCategories({\n defaultOpenCategories,\n multiple,\n}: Pick<NavProps, 'defaultOpenCategories' | 'multiple'>): NavItemValue[] | undefined {\n if (defaultOpenCategories !== undefined) {\n if (Array.isArray(defaultOpenCategories)) {\n return multiple ? defaultOpenCategories : [defaultOpenCategories[0]];\n }\n return [defaultOpenCategories];\n }\n return undefined;\n}\n\n/**\n * Updates the list of open indexes based on an index that changes\n * @param value - the index that will change\n * @param previousOpenItems - list of current open indexes\n * @param multiple - if Nav supports open categories at the same time\n */\nconst updateOpenCategories = (value: NavItemValue, previousOpenItems: NavItemValue[], multiple: boolean) => {\n if (multiple) {\n if (previousOpenItems.includes(value)) {\n return previousOpenItems.filter(i => i !== value);\n } else {\n return [...previousOpenItems, value];\n }\n }\n\n return previousOpenItems[0] === value ? [] : [value];\n};\n\n/**\n * Create the state required to render Nav.\n *\n * The returned state can be modified with hooks such as useNavStyles,\n * before being passed to renderNav.\n *\n * @param props - props from this instance of Nav\n * @param ref - reference to root HTMLDivElement of Nav\n */\nexport const useNav_unstable = (props: NavProps, ref: React.Ref<HTMLDivElement>): NavState => {\n const {\n onNavItemSelect,\n onNavCategoryItemToggle,\n multiple = true,\n density = 'medium',\n openCategories: controlledOpenCategoryItems,\n selectedCategoryValue: controlledSelectedCategoryValue,\n selectedValue: controlledSelectedValue,\n defaultOpenCategories,\n defaultSelectedValue,\n defaultSelectedCategoryValue,\n } = props;\n\n const innerRef = React.useRef<HTMLElement>(null);\n\n const [openCategories, setOpenCategories] = useControllableState({\n state: controlledOpenCategoryItems,\n defaultState: initializeUncontrolledOpenCategories({ defaultOpenCategories, multiple }),\n initialState: [],\n });\n\n const [selectedCategoryValue, setSelectedCategoryValue] = useControllableState({\n state: controlledSelectedCategoryValue,\n defaultState: defaultSelectedCategoryValue,\n initialState: undefined,\n });\n\n const [selectedValue, setSelectedValue] = useControllableState({\n state: controlledSelectedValue,\n defaultState: defaultSelectedValue,\n initialState: undefined,\n });\n\n // considered usePrevious, but it is sensitive to re-renders\n // this could cause the previous to move to current in the case where the navItem list re-renders.\n // these refs avoid getRegisteredNavItems changing when selectedValue changes and causing\n // renders for navItems that have not changed.\n const currentSelectedValue = React.useRef<NavItemValue | undefined>(undefined);\n const previousSelectedValue = React.useRef<NavItemValue | undefined>(undefined);\n\n const currentSelectedCategoryValue = React.useRef<NavItemValue | undefined>(undefined);\n const previousSelectedCategoryValue = React.useRef<NavItemValue | undefined>(undefined);\n\n if (currentSelectedValue.current !== selectedValue) {\n previousSelectedValue.current = currentSelectedValue.current;\n currentSelectedValue.current = selectedValue;\n }\n\n if (currentSelectedCategoryValue.current !== selectedCategoryValue) {\n previousSelectedCategoryValue.current = currentSelectedCategoryValue.current;\n currentSelectedCategoryValue.current = selectedCategoryValue;\n }\n\n // used for NavItems and NavSubItems\n const onSelect: EventHandler<OnNavItemSelectData> = useEventCallback((event, data) => {\n setSelectedValue(data.value);\n setSelectedCategoryValue(data.categoryValue ? data.categoryValue : '');\n onNavItemSelect?.(event, data);\n });\n\n // used for NavCategoryItems\n const onRequestNavCategoryItemToggle: EventHandler<OnNavItemSelectData> = useEventCallback((event, data) => {\n if (data.categoryValue !== undefined) {\n const nextOpenCategories = updateOpenCategories(data.categoryValue, openCategories ?? [], multiple);\n onNavCategoryItemToggle?.(event, data);\n setOpenCategories(nextOpenCategories);\n }\n });\n\n const registeredNavItems = React.useRef<Record<string, NavItemRegisterData>>({});\n\n const onRegister = React.useCallback((data: NavItemRegisterData) => {\n registeredNavItems.current[JSON.stringify(data.value)] = data;\n }, []);\n\n const onUnregister = React.useCallback((data: NavItemRegisterData) => {\n delete registeredNavItems.current[JSON.stringify(data.value)];\n }, []);\n\n const getRegisteredNavItems = React.useCallback(() => {\n return {\n selectedValue: currentSelectedValue.current,\n previousSelectedValue: previousSelectedValue.current,\n selectedCategoryValue: currentSelectedCategoryValue.current,\n previousSelectedCategoryValue: previousSelectedCategoryValue.current,\n registeredNavItems: registeredNavItems.current,\n };\n }, []);\n\n return {\n components: {\n root: 'div',\n },\n root: slot.always(\n getIntrinsicElementProps('div', {\n ref: useMergedRefs(ref, innerRef) as React.Ref<HTMLDivElement>,\n ...props,\n }),\n { elementType: 'div' },\n ),\n openCategories,\n selectedValue,\n selectedCategoryValue,\n onRegister,\n onUnregister,\n onSelect,\n getRegisteredNavItems,\n onRequestNavCategoryItemToggle,\n multiple,\n density,\n tabbable: false,\n };\n};\n"],"names":["React","useControllableState","useEventCallback","useMergedRefs","slot","getIntrinsicElementProps","initializeUncontrolledOpenCategories","defaultOpenCategories","multiple","undefined","Array","isArray","updateOpenCategories","value","previousOpenItems","includes","filter","i","useNav_unstable","props","ref","onNavItemSelect","onNavCategoryItemToggle","density","openCategories","controlledOpenCategoryItems","selectedCategoryValue","controlledSelectedCategoryValue","selectedValue","controlledSelectedValue","defaultSelectedValue","defaultSelectedCategoryValue","innerRef","useRef","setOpenCategories","state","defaultState","initialState","setSelectedCategoryValue","setSelectedValue","currentSelectedValue","previousSelectedValue","currentSelectedCategoryValue","previousSelectedCategoryValue","current","onSelect","event","data","categoryValue","onRequestNavCategoryItemToggle","nextOpenCategories","registeredNavItems","onRegister","useCallback","JSON","stringify","onUnregister","getRegisteredNavItems","components","root","always","elementType","tabbable"],"mappings":";;;;+BAwDakB;;;;;;;iEAxDU,QAAQ;gCAQxB,4BAA4B;AAKnC;;CAEC,GACD,SAASZ,qCAAqC,EAC5CC,qBAAqB,EACrBC,QAAQ,EAC6C;IACrD,IAAID,0BAA0BE,WAAW;QACvC,IAAIC,MAAMC,OAAO,CAACJ,wBAAwB;YACxC,OAAOC,WAAWD,wBAAwB;gBAACA,qBAAqB,CAAC,EAAE;aAAC;QACtE;QACA,OAAO;YAACA;SAAsB;IAChC;IACA,OAAOE;AACT;AAEA;;;;;CAKC,GACD,MAAMG,uBAAuB,CAACC,OAAqBC,mBAAmCN;IACpF,IAAIA,UAAU;QACZ,IAAIM,kBAAkBC,QAAQ,CAACF,QAAQ;YACrC,OAAOC,kBAAkBE,MAAM,CAACC,CAAAA,IAAKA,MAAMJ;QAC7C,OAAO;YACL,OAAO;mBAAIC;gBAAmBD;aAAM;QACtC;IACF;IAEA,OAAOC,iBAAiB,CAAC,EAAE,KAAKD,QAAQ,EAAE,GAAG;QAACA;KAAM;AACtD;AAWO,wBAAwB,CAACM,OAAiBC;IAC/C,MAAM,EACJC,eAAe,EACfC,uBAAuB,EACvBd,WAAW,IAAI,EACfe,UAAU,QAAQ,EAClBC,gBAAgBC,2BAA2B,EAC3CC,uBAAuBC,+BAA+B,EACtDC,eAAeC,uBAAuB,EACtCtB,qBAAqB,EACrBuB,oBAAoB,EACpBC,4BAA4B,EAC7B,GAAGZ;IAEJ,MAAMa,WAAWhC,OAAMiC,MAAM,CAAc;IAE3C,MAAM,CAACT,gBAAgBU,kBAAkB,OAAGjC,oCAAAA,EAAqB;QAC/DkC,OAAOV;QACPW,cAAc9B,qCAAqC;YAAEC;YAAuBC;QAAS;QACrF6B,cAAc,EAAE;IAClB;IAEA,MAAM,CAACX,uBAAuBY,yBAAyB,OAAGrC,oCAAAA,EAAqB;QAC7EkC,OAAOR;QACPS,cAAcL;QACdM,cAAc5B;IAChB;IAEA,MAAM,CAACmB,eAAeW,iBAAiB,GAAGtC,wCAAAA,EAAqB;QAC7DkC,OAAON;QACPO,cAAcN;QACdO,cAAc5B;IAChB;IAEA,4DAA4D;IAC5D,kGAAkG;IAClG,yFAAyF;IACzF,8CAA8C;IAC9C,MAAM+B,uBAAuBxC,OAAMiC,MAAM,CAA2BxB;IACpE,MAAMgC,wBAAwBzC,OAAMiC,MAAM,CAA2BxB;IAErE,MAAMiC,+BAA+B1C,OAAMiC,MAAM,CAA2BxB;IAC5E,MAAMkC,gCAAgC3C,OAAMiC,MAAM,CAA2BxB;IAE7E,IAAI+B,qBAAqBI,OAAO,KAAKhB,eAAe;QAClDa,sBAAsBG,OAAO,GAAGJ,qBAAqBI,OAAO;QAC5DJ,qBAAqBI,OAAO,GAAGhB;IACjC;IAEA,IAAIc,6BAA6BE,OAAO,KAAKlB,uBAAuB;QAClEiB,8BAA8BC,OAAO,GAAGF,6BAA6BE,OAAO;QAC5EF,6BAA6BE,OAAO,GAAGlB;IACzC;IAEA,oCAAoC;IACpC,MAAMmB,WAA8C3C,oCAAAA,EAAiB,CAAC4C,OAAOC;QAC3ER,iBAAiBQ,KAAKlC,KAAK;QAC3ByB,yBAAyBS,KAAKC,aAAa,GAAGD,KAAKC,aAAa,GAAG;QACnE3B,oBAAAA,QAAAA,oBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,gBAAkByB,OAAOC;IAC3B;IAEA,4BAA4B;IAC5B,MAAME,iCAAoE/C,oCAAAA,EAAiB,CAAC4C,OAAOC;QACjG,IAAIA,KAAKC,aAAa,KAAKvC,WAAW;YACpC,MAAMyC,qBAAqBtC,qBAAqBmC,KAAKC,aAAa,EAAExB,mBAAAA,QAAAA,mBAAAA,KAAAA,IAAAA,iBAAkB,EAAE,EAAEhB;YAC1Fc,4BAAAA,QAAAA,4BAAAA,KAAAA,IAAAA,KAAAA,IAAAA,wBAA0BwB,OAAOC;YACjCb,kBAAkBgB;QACpB;IACF;IAEA,MAAMC,qBAAqBnD,OAAMiC,MAAM,CAAsC,CAAC;IAE9E,MAAMmB,aAAapD,OAAMqD,WAAW,CAAC,CAACN;QACpCI,mBAAmBP,OAAO,CAACU,KAAKC,SAAS,CAACR,KAAKlC,KAAK,EAAE,GAAGkC;IAC3D,GAAG,EAAE;IAEL,MAAMS,eAAexD,OAAMqD,WAAW,CAAC,CAACN;QACtC,OAAOI,mBAAmBP,OAAO,CAACU,KAAKC,SAAS,CAACR,KAAKlC,KAAK,EAAE;IAC/D,GAAG,EAAE;IAEL,MAAM4C,wBAAwBzD,OAAMqD,WAAW,CAAC;QAC9C,OAAO;YACLzB,eAAeY,qBAAqBI,OAAO;YAC3CH,uBAAuBA,sBAAsBG,OAAO;YACpDlB,uBAAuBgB,6BAA6BE,OAAO;YAC3DD,+BAA+BA,8BAA8BC,OAAO;YACpEO,oBAAoBA,mBAAmBP,OAAO;QAChD;IACF,GAAG,EAAE;IAEL,OAAO;QACLc,YAAY;YACVC,MAAM;QACR;QACAA,MAAMvD,oBAAAA,CAAKwD,MAAM,KACfvD,wCAAAA,EAAyB,OAAO;YAC9Be,SAAKjB,6BAAAA,EAAciB,KAAKY;YACxB,GAAGb,KAAK;QACV,IACA;YAAE0C,aAAa;QAAM;QAEvBrC;QACAI;QACAF;QACA0B;QACAI;QACAX;QACAY;QACAR;QACAzC;QACAe;QACAuC,UAAU;IACZ;AACF,EAAE"}
package/lib-commonjs/components/NavContext.js CHANGED
@@ -42,7 +42,10 @@ const navContextDefaultValue = {
42
42
  */ multiple: true,
43
43
  /**
44
44
  * Indicates the vertical density and density of the Nav.
45
- */ density: 'medium'
45
+ */ density: 'medium',
46
+ /**
47
+ * By default, the Nav is a single tab stop with only arrow key navigation
48
+ */ tabbable: false
46
49
  };
47
50
  const NavContext = /*#__PURE__*/ _react.createContext(undefined);
48
51
  const NavProvider = NavContext.Provider;
package/lib-commonjs/components/NavContext.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/NavContext.ts"],"sourcesContent":["import * as React from 'react';\nimport { NavContextValue } from './NavContext.types';\n\nconst navContextDefaultValue: NavContextValue = {\n selectedValue: undefined,\n selectedCategoryValue: undefined,\n onRegister: () => {\n /* noop */\n },\n onUnregister: () => {\n /* noop */\n },\n onSelect: () => {\n /* noop */\n },\n getRegisteredNavItems: () => {\n return {\n registeredNavItems: {},\n };\n },\n onRequestNavCategoryItemToggle() {\n /* noop */\n },\n /**\n * The list of opened panels by index\n */\n openCategories: [],\n\n /**\n * Indicates if Nav supports multiple open Categories at the same time.\n */\n multiple: true,\n\n /**\n * Indicates the vertical density and density of the Nav.\n */\n density: 'medium',\n};\n\nconst NavContext = React.createContext<NavContextValue | undefined>(undefined);\n\nexport const NavProvider = NavContext.Provider;\n\nexport const useNavContext_unstable = (): NavContextValue => React.useContext(NavContext) || navContextDefaultValue;\n"],"names":["React","navContextDefaultValue","selectedValue","undefined","selectedCategoryValue","onRegister","onUnregister","onSelect","getRegisteredNavItems","registeredNavItems","onRequestNavCategoryItemToggle","openCategories","multiple","density","NavContext","createContext","NavProvider","Provider","useNavContext_unstable","useContext"],"mappings":";;;;;;;;;;;eAyCagB;;;0BAEAE;;;;;iEA3CU,QAAQ;AAG/B,MAAMjB,yBAA0C;IAC9CC,eAAeC;IACfC,uBAAuBD;IACvBE,YAAY;IACV,QAAQ,GACV;IACAC,cAAc;IACZ,QAAQ,GACV;IACAC,UAAU;IACR,QAAQ,GACV;IACAC,uBAAuB;QACrB,OAAO;YACLC,oBAAoB,CAAC;QACvB;IACF;IACAC;IACE,QAAQ,GACV;IACA;;GAEC,GACDC,gBAAgB,EAAE;IAElB;;GAEC,GACDC,UAAU;IAEV;;GAEC,GACDC,SAAS;AACX;AAEA,MAAMC,2BAAad,OAAMe,aAAa,CAA8BZ;AAE7D,MAAMa,cAAcF,WAAWG,QAAQ,CAAC;AAExC,MAAMC,yBAAyB,IAAuBlB,OAAMmB,UAAU,CAACL,eAAeb,uBAAuB"}
1
+ {"version":3,"sources":["../src/components/NavContext.ts"],"sourcesContent":["import * as React from 'react';\nimport { NavContextValue } from './NavContext.types';\n\nconst navContextDefaultValue: NavContextValue = {\n selectedValue: undefined,\n selectedCategoryValue: undefined,\n onRegister: () => {\n /* noop */\n },\n onUnregister: () => {\n /* noop */\n },\n onSelect: () => {\n /* noop */\n },\n getRegisteredNavItems: () => {\n return {\n registeredNavItems: {},\n };\n },\n onRequestNavCategoryItemToggle() {\n /* noop */\n },\n /**\n * The list of opened panels by index\n */\n openCategories: [],\n\n /**\n * Indicates if Nav supports multiple open Categories at the same time.\n */\n multiple: true,\n\n /**\n * Indicates the vertical density and density of the Nav.\n */\n density: 'medium',\n\n /**\n * By default, the Nav is a single tab stop with only arrow key navigation\n */\n tabbable: false,\n};\n\nconst NavContext = React.createContext<NavContextValue | undefined>(undefined);\n\nexport const NavProvider = NavContext.Provider;\n\nexport const useNavContext_unstable = (): NavContextValue => React.useContext(NavContext) || navContextDefaultValue;\n"],"names":["React","navContextDefaultValue","selectedValue","undefined","selectedCategoryValue","onRegister","onUnregister","onSelect","getRegisteredNavItems","registeredNavItems","onRequestNavCategoryItemToggle","openCategories","multiple","density","tabbable","NavContext","createContext","NavProvider","Provider","useNavContext_unstable","useContext"],"mappings":";;;;;;;;;;;IA8CaiB,WAAAA;;;0BAEAE;;;;;iEAhDU,QAAQ;AAG/B,MAAMlB,yBAA0C;IAC9CC,eAAeC;IACfC,uBAAuBD;IACvBE,YAAY;IACV,QAAQ,GACV;IACAC,cAAc;IACZ,QAAQ,GACV;IACAC,UAAU;IACR,QAAQ,GACV;IACAC,uBAAuB;QACrB,OAAO;YACLC,oBAAoB,CAAC;QACvB;IACF;IACAC;IACE,QAAQ,GACV;IACA;;GAEC,GACDC,gBAAgB,EAAE;IAElB;;GAEC,GACDC,UAAU;IAEV;;GAEC,GACDC,SAAS;IAET;;GAEC,GACDC,UAAU;AACZ;AAEA,MAAMC,2BAAaf,OAAMgB,aAAa,CAA8Bb;AAE7D,oBAAoBY,WAAWG,QAAQ,CAAC;AAExC,MAAMC,yBAAyB,IAAuBnB,OAAMoB,UAAU,CAACL,eAAed,uBAAuB"}
package/lib-commonjs/components/NavContext.types.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/NavContext.types.ts"],"sourcesContent":["import * as React from 'react';\nimport { EventHandler } from '@fluentui/react-utilities';\n\nimport type { NavProps, OnNavItemSelectData } from './Nav/Nav.types';\n\nexport type NavContextValue = Pick<\n NavProps,\n 'onNavItemSelect' | 'selectedValue' | 'selectedCategoryValue' | 'density'\n> & {\n /** A callback to allow a navItem to register itself with the navItem list. */\n onRegister: RegisterNavItemEventHandler;\n\n /** A callback to allow a navItem to unregister itself with the navItem list. */\n onUnregister: RegisterNavItemEventHandler;\n /**\n * A callback to allow a navItem to select itself when pressed.\n */\n onSelect: EventHandler<OnNavItemSelectData>;\n /**\n * Gets the registered navItem data along with current and previous selected values.\n */\n getRegisteredNavItems: () => {\n selectedValue?: NavItemValue;\n selectedCategoryValue?: NavItemValue;\n previousSelectedValue?: NavItemValue;\n registeredNavItems: Record<string, NavItemRegisterData>;\n };\n /**\n * Callback used by NavCategoryItem to request a change on it's own opened state\n * Should be used to toggle NavCategoryItem's open state\n */\n onRequestNavCategoryItemToggle: EventHandler<OnNavItemSelectData>;\n\n /**\n * The list of opened panels by index\n */\n openCategories: NavItemValue[];\n\n /**\n * Indicates if Nav supports multiple open Categories at the same time.\n * @default true, indicating that multiple categories can be open at the same time.\n */\n multiple: boolean;\n};\n\n/**\n * Any value that identifies a specific Item.\n */\nexport type NavItemValue = string;\n\n/**\n * Context values used in rendering navItemList.\n */\nexport type NavContextValues = {\n /**\n * The context of the navItem list available to each navItem.\n */\n nav: NavContextValue;\n};\n\nexport type NavItemRegisterData = {\n /**\n * The value of the navItem.\n */\n value: NavItemValue;\n\n /**\n * The reference to the navItem HTML element.\n */\n ref: React.RefObject<HTMLElement | null>;\n};\n\nexport type RegisterNavItemEventHandler = (data: NavItemRegisterData) => void;\n"],"names":["React"],"mappings":";;;;;iEAAuB,QAAQ"}
1
+ {"version":3,"sources":["../src/components/NavContext.types.ts"],"sourcesContent":["import * as React from 'react';\nimport { EventHandler } from '@fluentui/react-utilities';\n\nimport type { NavProps, OnNavItemSelectData } from './Nav/Nav.types';\n\nexport type NavContextValue = Pick<\n NavProps,\n 'onNavItemSelect' | 'selectedValue' | 'selectedCategoryValue' | 'density'\n> & {\n /** A callback to allow a navItem to register itself with the navItem list. */\n onRegister: RegisterNavItemEventHandler;\n\n /** A callback to allow a navItem to unregister itself with the navItem list. */\n onUnregister: RegisterNavItemEventHandler;\n /**\n * A callback to allow a navItem to select itself when pressed.\n */\n onSelect: EventHandler<OnNavItemSelectData>;\n /**\n * Gets the registered navItem data along with current and previous selected values.\n */\n getRegisteredNavItems: () => {\n selectedValue?: NavItemValue;\n selectedCategoryValue?: NavItemValue;\n previousSelectedValue?: NavItemValue;\n registeredNavItems: Record<string, NavItemRegisterData>;\n };\n /**\n * Callback used by NavCategoryItem to request a change on it's own opened state\n * Should be used to toggle NavCategoryItem's open state\n */\n onRequestNavCategoryItemToggle: EventHandler<OnNavItemSelectData>;\n\n /**\n * The list of opened panels by index\n */\n openCategories: NavItemValue[];\n\n /**\n * Indicates if Nav supports multiple open Categories at the same time.\n * @default true, indicating that multiple categories can be open at the same time.\n */\n multiple: boolean;\n\n /**\n * Setting this to true enables tab AND arrow navigation.\n * @default false\n */\n tabbable: boolean;\n};\n\n/**\n * Any value that identifies a specific Item.\n */\nexport type NavItemValue = string;\n\n/**\n * Context values used in rendering navItemList.\n */\nexport type NavContextValues = {\n /**\n * The context of the navItem list available to each navItem.\n */\n nav: NavContextValue;\n};\n\nexport type NavItemRegisterData = {\n /**\n * The value of the navItem.\n */\n value: NavItemValue;\n\n /**\n * The reference to the navItem HTML element.\n */\n ref: React.RefObject<HTMLElement | null>;\n};\n\nexport type RegisterNavItemEventHandler = (data: NavItemRegisterData) => void;\n"],"names":["React"],"mappings":";;;;;iEAAuB,QAAQ"}
package/lib-commonjs/components/NavDrawer/useNavDrawer.js CHANGED
@@ -11,22 +11,15 @@ Object.defineProperty(exports, "useNavDrawer_unstable", {
11
11
  const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
12
12
  const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
13
13
  const _reactdrawer = require("@fluentui/react-drawer");
14
- const _reacttabster = require("@fluentui/react-tabster");
15
14
  const _reactutilities = require("@fluentui/react-utilities");
16
15
  const _useNav = require("../Nav/useNav");
17
16
  const useNavDrawer_unstable = (props, ref)=>{
18
- const { tabbable = false, size = undefined } = props;
19
- const focusAttributes = (0, _reacttabster.useArrowNavigationGroup)({
20
- axis: 'vertical',
21
- circular: true,
22
- tabbable
23
- });
24
- const navState = (0, _useNav.useNav_unstable)({
25
- ...props
26
- }, ref);
17
+ const { size = undefined, tabbable = false } = props;
18
+ const navState = (0, _useNav.useNav_unstable)(props, ref);
27
19
  return {
28
20
  ...navState,
29
21
  size,
22
+ tabbable,
30
23
  components: {
31
24
  // TODO: remove once React v18 slot API is modified
32
25
  // this is a problem with the lack of support for union types on React v18
@@ -37,8 +30,7 @@ const useNavDrawer_unstable = (props, ref)=>{
37
30
  root: _reactutilities.slot.always({
38
31
  ref,
39
32
  role: 'navigation',
40
- ...props,
41
- ...focusAttributes
33
+ ...props
42
34
  }, {
43
35
  // TODO: remove once React v18 slot API is modified
44
36
  // this is a problem with the lack of support for union types on React v18
package/lib-commonjs/components/NavDrawer/useNavDrawer.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/NavDrawer/useNavDrawer.ts"],"sourcesContent":["import * as React from 'react';\nimport { Drawer, DrawerProps } from '@fluentui/react-drawer';\nimport { useArrowNavigationGroup } from '@fluentui/react-tabster';\nimport { RefAttributes, slot } from '@fluentui/react-utilities';\n\nimport { useNav_unstable } from '../Nav/useNav';\nimport type { NavDrawerProps, NavDrawerState } from './NavDrawer.types';\n\n/**\n * Create the state required to render NavDrawer.\n *\n * The returned state can be modified with hooks such as useNavDrawerStyles_unstable,\n * before being passed to renderNavDrawer_unstable.\n *\n * @param props - props from this instance of NavDrawer\n * @param ref - reference to root HTMLDivElement of NavDrawer\n */\nexport const useNavDrawer_unstable = (props: NavDrawerProps, ref: React.Ref<HTMLDivElement>): NavDrawerState => {\n const { tabbable = false, size = undefined } = props;\n\n const focusAttributes = useArrowNavigationGroup({\n axis: 'vertical',\n circular: true,\n tabbable,\n });\n\n const navState = useNav_unstable(\n {\n ...props,\n },\n ref,\n );\n\n return {\n ...navState,\n size,\n components: {\n // TODO: remove once React v18 slot API is modified\n // this is a problem with the lack of support for union types on React v18\n // ComponentState is using React.ComponentType which will try to infer propType\n // propTypes WeakValidator signature will break distributive unions making this type invalid\n root: Drawer as React.FC<DrawerProps>,\n },\n\n root: slot.always(\n { ref, role: 'navigation', ...props, ...focusAttributes },\n {\n // TODO: remove once React v18 slot API is modified\n // this is a problem with the lack of support for union types on React v18\n // ComponentState is using React.ComponentType which will try to infer propType\n // propTypes WeakValidator signature will break distributive unions making this type invalid\n elementType: Drawer as React.FC<DrawerProps & RefAttributes<HTMLDivElement>>,\n },\n ),\n };\n};\n"],"names":["React","Drawer","useArrowNavigationGroup","slot","useNav_unstable","useNavDrawer_unstable","props","ref","tabbable","size","undefined","focusAttributes","axis","circular","navState","components","root","always","role","elementType"],"mappings":";;;;+BAiBaK;;;;;;;iEAjBU,QAAQ;6BACK,yBAAyB;8BACrB,0BAA0B;gCAC9B,4BAA4B;wBAEhC,gBAAgB;AAYzC,8BAA8B,CAACC,OAAuBC;IAC3D,MAAM,EAAEC,WAAW,KAAK,EAAEC,OAAOC,SAAS,EAAE,GAAGJ;IAE/C,MAAMK,kBAAkBT,yCAAAA,EAAwB;QAC9CU,MAAM;QACNC,UAAU;QACVL;IACF;IAEA,MAAMM,eAAWV,uBAAAA,EACf;QACE,GAAGE,KAAK;IACV,GACAC;IAGF,OAAO;QACL,GAAGO,QAAQ;QACXL;QACAM,YAAY;YACV,mDAAmD;YACnD,0EAA0E;YAC1E,+EAA+E;YAC/E,4FAA4F;YAC5FC,MAAMf,mBAAAA;QACR;QAEAe,MAAMb,oBAAAA,CAAKc,MAAM,CACf;YAAEV;YAAKW,MAAM;YAAc,GAAGZ,KAAK;YAAE,GAAGK,eAAe;QAAC,GACxD;YACE,mDAAmD;YACnD,0EAA0E;YAC1E,+EAA+E;YAC/E,4FAA4F;YAC5FQ,aAAalB,mBAAAA;QACf;IAEJ;AACF,EAAE"}
1
+ {"version":3,"sources":["../src/components/NavDrawer/useNavDrawer.ts"],"sourcesContent":["import * as React from 'react';\nimport { Drawer, DrawerProps } from '@fluentui/react-drawer';\nimport { RefAttributes, slot } from '@fluentui/react-utilities';\n\nimport { useNav_unstable } from '../Nav/useNav';\nimport type { NavDrawerProps, NavDrawerState } from './NavDrawer.types';\n\n/**\n * Create the state required to render NavDrawer.\n *\n * The returned state can be modified with hooks such as useNavDrawerStyles_unstable,\n * before being passed to renderNavDrawer_unstable.\n *\n * @param props - props from this instance of NavDrawer\n * @param ref - reference to root HTMLDivElement of NavDrawer\n */\nexport const useNavDrawer_unstable = (props: NavDrawerProps, ref: React.Ref<HTMLDivElement>): NavDrawerState => {\n const { size = undefined, tabbable = false } = props;\n\n const navState = useNav_unstable(props, ref);\n\n return {\n ...navState,\n size,\n tabbable,\n components: {\n // TODO: remove once React v18 slot API is modified\n // this is a problem with the lack of support for union types on React v18\n // ComponentState is using React.ComponentType which will try to infer propType\n // propTypes WeakValidator signature will break distributive unions making this type invalid\n root: Drawer as React.FC<DrawerProps>,\n },\n\n root: slot.always(\n { ref, role: 'navigation', ...props },\n {\n // TODO: remove once React v18 slot API is modified\n // this is a problem with the lack of support for union types on React v18\n // ComponentState is using React.ComponentType which will try to infer propType\n // propTypes WeakValidator signature will break distributive unions making this type invalid\n elementType: Drawer as React.FC<DrawerProps & RefAttributes<HTMLDivElement>>,\n },\n ),\n };\n};\n"],"names":["React","Drawer","slot","useNav_unstable","useNavDrawer_unstable","props","ref","size","undefined","tabbable","navState","components","root","always","role","elementType"],"mappings":";;;;+BAgBaI;;;;;;;iEAhBU,QAAQ;6BACK,yBAAyB;gCACzB,4BAA4B;wBAEhC,gBAAgB;AAYzC,8BAA8B,CAACC,OAAuBC;IAC3D,MAAM,EAAEC,OAAOC,SAAS,EAAEC,WAAW,KAAK,EAAE,GAAGJ;IAE/C,MAAMK,eAAWP,uBAAAA,EAAgBE,OAAOC;IAExC,OAAO;QACL,GAAGI,QAAQ;QACXH;QACAE;QACAE,YAAY;YACV,mDAAmD;YACnD,0EAA0E;YAC1E,+EAA+E;YAC/E,4FAA4F;YAC5FC,MAAMX,mBAAAA;QACR;QAEAW,MAAMV,oBAAAA,CAAKW,MAAM,CACf;YAAEP;YAAKQ,MAAM;YAAc,GAAGT,KAAK;QAAC,GACpC;YACE,mDAAmD;YACnD,0EAA0E;YAC1E,+EAA+E;YAC/E,4FAA4F;YAC5FU,aAAad,mBAAAA;QACf;IAEJ;AACF,EAAE"}
package/lib-commonjs/components/NavDrawerBody/useNavDrawerBody.js CHANGED
@@ -10,7 +10,18 @@ Object.defineProperty(exports, "useNavDrawerBody_unstable", {
10
10
  });
11
11
  const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
12
12
  const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
13
+ const _reacttabster = require("@fluentui/react-tabster");
13
14
  const _reactdrawer = require("@fluentui/react-drawer");
15
+ const _NavContext = require("../NavContext");
14
16
  const useNavDrawerBody_unstable = (props, ref)=>{
15
- return (0, _reactdrawer.useDrawerBody_unstable)(props, ref);
17
+ const { tabbable } = (0, _NavContext.useNavContext_unstable)();
18
+ const focusAttributes = (0, _reacttabster.useArrowNavigationGroup)({
19
+ axis: 'vertical',
20
+ circular: true,
21
+ tabbable
22
+ });
23
+ return (0, _reactdrawer.useDrawerBody_unstable)({
24
+ ...props,
25
+ ...focusAttributes
26
+ }, ref);
16
27
  };
package/lib-commonjs/components/NavDrawerBody/useNavDrawerBody.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/NavDrawerBody/useNavDrawerBody.ts"],"sourcesContent":["import * as React from 'react';\nimport { useDrawerBody_unstable } from '@fluentui/react-drawer';\n\nimport type { NavDrawerBodyProps, NavDrawerBodyState } from './NavDrawerBody.types';\n/**\n * Create the state required to render NavDrawerBody.\n *\n * The returned state can be modified with hooks such as useNavDrawerBodyStyles_unstable,\n * before being passed to renderNavDrawerBody_unstable.\n *\n * @param props - props from this instance of NavDrawerBody\n * @param ref - reference to root HTMLDivElement of NavDrawerBody\n */\nexport const useNavDrawerBody_unstable = (\n props: NavDrawerBodyProps,\n ref: React.Ref<HTMLDivElement>,\n): NavDrawerBodyState => {\n return useDrawerBody_unstable(props, ref);\n};\n"],"names":["React","useDrawerBody_unstable","useNavDrawerBody_unstable","props","ref"],"mappings":";;;;;;;;;;;iEAAuB,QAAQ;6BACQ,yBAAyB;AAYzD,MAAME,4BAA4B,CACvCC,OACAC;IAEA,WAAOH,mCAAAA,EAAuBE,OAAOC;AACvC,EAAE"}
1
+ {"version":3,"sources":["../src/components/NavDrawerBody/useNavDrawerBody.ts"],"sourcesContent":["import * as React from 'react';\nimport { useArrowNavigationGroup } from '@fluentui/react-tabster';\nimport { useDrawerBody_unstable } from '@fluentui/react-drawer';\n\nimport { useNavContext_unstable } from '../NavContext';\nimport type { NavDrawerBodyProps, NavDrawerBodyState } from './NavDrawerBody.types';\n/**\n * Create the state required to render NavDrawerBody.\n *\n * The returned state can be modified with hooks such as useNavDrawerBodyStyles_unstable,\n * before being passed to renderNavDrawerBody_unstable.\n *\n * @param props - props from this instance of NavDrawerBody\n * @param ref - reference to root HTMLDivElement of NavDrawerBody\n */\nexport const useNavDrawerBody_unstable = (\n props: NavDrawerBodyProps,\n ref: React.Ref<HTMLDivElement>,\n): NavDrawerBodyState => {\n const { tabbable } = useNavContext_unstable();\n const focusAttributes = useArrowNavigationGroup({\n axis: 'vertical',\n circular: true,\n tabbable,\n });\n\n return useDrawerBody_unstable({ ...props, ...focusAttributes }, ref);\n};\n"],"names":["React","useArrowNavigationGroup","useDrawerBody_unstable","useNavContext_unstable","useNavDrawerBody_unstable","props","ref","tabbable","focusAttributes","axis","circular"],"mappings":";;;;+BAeaI;;;;;;;iEAfU,QAAQ;8BACS,0BAA0B;6BAC3B,yBAAyB;4BAEzB,gBAAgB;AAWhD,kCAAkC,CACvCC,OACAC;IAEA,MAAM,EAAEC,QAAQ,EAAE,OAAGJ,kCAAAA;IACrB,MAAMK,sBAAkBP,qCAAAA,EAAwB;QAC9CQ,MAAM;QACNC,UAAU;QACVH;IACF;IAEA,WAAOL,mCAAAA,EAAuB;QAAE,GAAGG,KAAK;QAAE,GAAGG,eAAe;IAAC,GAAGF;AAClE,EAAE"}
package/lib-commonjs/components/useNavContextValues.js CHANGED
@@ -11,7 +11,7 @@ Object.defineProperty(exports, "useNavContextValues_unstable", {
11
11
  const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
12
12
  const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
13
13
  function useNavContextValues_unstable(state) {
14
- const { selectedValue, selectedCategoryValue, onRegister, onUnregister, onSelect, getRegisteredNavItems, onRequestNavCategoryItemToggle, openCategories, multiple, density, onNavItemSelect } = state;
14
+ const { selectedValue, selectedCategoryValue, onRegister, onUnregister, onSelect, getRegisteredNavItems, onRequestNavCategoryItemToggle, openCategories, multiple, density, onNavItemSelect, tabbable } = state;
15
15
  const navContext = _react.useMemo(()=>({
16
16
  selectedValue,
17
17
  selectedCategoryValue,
@@ -23,7 +23,8 @@ function useNavContextValues_unstable(state) {
23
23
  openCategories,
24
24
  multiple,
25
25
  density,
26
- onNavItemSelect
26
+ onNavItemSelect,
27
+ tabbable
27
28
  }), [
28
29
  selectedValue,
29
30
  selectedCategoryValue,
@@ -35,7 +36,8 @@ function useNavContextValues_unstable(state) {
35
36
  openCategories,
36
37
  multiple,
37
38
  density,
38
- onNavItemSelect
39
+ onNavItemSelect,
40
+ tabbable
39
41
  ]);
40
42
  return {
41
43
  nav: navContext
package/lib-commonjs/components/useNavContextValues.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/useNavContextValues.tsx"],"sourcesContent":["import * as React from 'react';\nimport { NavContextValue, NavContextValues, NavState } from '../Nav';\n\nexport function useNavContextValues_unstable(state: NavState): NavContextValues {\n const {\n selectedValue,\n selectedCategoryValue,\n onRegister,\n onUnregister,\n onSelect,\n getRegisteredNavItems,\n onRequestNavCategoryItemToggle,\n openCategories,\n multiple,\n density,\n onNavItemSelect,\n } = state;\n\n const navContext = React.useMemo<NavContextValue>(\n () => ({\n selectedValue,\n selectedCategoryValue,\n onSelect,\n onRegister,\n onUnregister,\n getRegisteredNavItems,\n onRequestNavCategoryItemToggle,\n openCategories,\n multiple,\n density,\n onNavItemSelect,\n }),\n [\n selectedValue,\n selectedCategoryValue,\n onSelect,\n onRegister,\n onUnregister,\n getRegisteredNavItems,\n onRequestNavCategoryItemToggle,\n openCategories,\n multiple,\n density,\n onNavItemSelect,\n ],\n );\n\n return { nav: navContext };\n}\n"],"names":["React","useNavContextValues_unstable","state","selectedValue","selectedCategoryValue","onRegister","onUnregister","onSelect","getRegisteredNavItems","onRequestNavCategoryItemToggle","openCategories","multiple","density","onNavItemSelect","navContext","useMemo","nav"],"mappings":";;;;+BAGgBC;;;;;;;iEAHO,QAAQ;AAGxB,sCAAsCC,KAAe;IAC1D,MAAM,EACJC,aAAa,EACbC,qBAAqB,EACrBC,UAAU,EACVC,YAAY,EACZC,QAAQ,EACRC,qBAAqB,EACrBC,8BAA8B,EAC9BC,cAAc,EACdC,QAAQ,EACRC,OAAO,EACPC,eAAe,EAChB,GAAGX;IAEJ,MAAMY,aAAad,OAAMe,OAAO,CAC9B,IAAO;YACLZ;YACAC;YACAG;YACAF;YACAC;YACAE;YACAC;YACAC;YACAC;YACAC;YACAC;SACF,CAAA,EACA;QACEV;QACAC;QACAG;QACAF;QACAC;QACAE;QACAC;QACAC;QACAC;QACAC;QACAC;KACD;IAGH,OAAO;QAAEG,KAAKF;IAAW;AAC3B"}
1
+ {"version":3,"sources":["../src/components/useNavContextValues.tsx"],"sourcesContent":["import * as React from 'react';\nimport { NavContextValue, NavContextValues, NavState } from '../Nav';\n\nexport function useNavContextValues_unstable(state: NavState): NavContextValues {\n const {\n selectedValue,\n selectedCategoryValue,\n onRegister,\n onUnregister,\n onSelect,\n getRegisteredNavItems,\n onRequestNavCategoryItemToggle,\n openCategories,\n multiple,\n density,\n onNavItemSelect,\n tabbable,\n } = state;\n\n const navContext = React.useMemo<NavContextValue>(\n () => ({\n selectedValue,\n selectedCategoryValue,\n onSelect,\n onRegister,\n onUnregister,\n getRegisteredNavItems,\n onRequestNavCategoryItemToggle,\n openCategories,\n multiple,\n density,\n onNavItemSelect,\n tabbable,\n }),\n [\n selectedValue,\n selectedCategoryValue,\n onSelect,\n onRegister,\n onUnregister,\n getRegisteredNavItems,\n onRequestNavCategoryItemToggle,\n openCategories,\n multiple,\n density,\n onNavItemSelect,\n tabbable,\n ],\n );\n\n return { nav: navContext };\n}\n"],"names":["React","useNavContextValues_unstable","state","selectedValue","selectedCategoryValue","onRegister","onUnregister","onSelect","getRegisteredNavItems","onRequestNavCategoryItemToggle","openCategories","multiple","density","onNavItemSelect","tabbable","navContext","useMemo","nav"],"mappings":";;;;+BAGgBC;;;;;;;iEAHO,QAAQ;AAGxB,sCAAsCC,KAAe;IAC1D,MAAM,EACJC,aAAa,EACbC,qBAAqB,EACrBC,UAAU,EACVC,YAAY,EACZC,QAAQ,EACRC,qBAAqB,EACrBC,8BAA8B,EAC9BC,cAAc,EACdC,QAAQ,EACRC,OAAO,EACPC,eAAe,EACfC,QAAQ,EACT,GAAGZ;IAEJ,MAAMa,aAAaf,OAAMgB,OAAO,CAC9B,IAAO;YACLb;YACAC;YACAG;YACAF;YACAC;YACAE;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;SACF,CAAA,EACA;QACEX;QACAC;QACAG;QACAF;QACAC;QACAE;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;KACD;IAGH,OAAO;QAAEG,KAAKF;IAAW;AAC3B"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fluentui/react-nav",
3
- "version": "0.0.0-nightly-20250926-0406.1",
3
+ "version": "0.0.0-nightly-20250930-0405.1",
4
4
  "description": "New fluentui react package",
5
5
  "main": "lib-commonjs/index.js",
6
6
  "module": "lib/index.js",
@@ -13,24 +13,24 @@
13
13
  "license": "MIT",
14
14
  "devDependencies": {
15
15
  "@fluentui/eslint-plugin": "*",
16
- "@fluentui/react-conformance": "0.0.0-nightly-20250926-0406.1",
17
- "@fluentui/react-conformance-griffel": "0.0.0-nightly-20250926-0406.1",
16
+ "@fluentui/react-conformance": "0.0.0-nightly-20250930-0405.1",
17
+ "@fluentui/react-conformance-griffel": "0.0.0-nightly-20250930-0405.1",
18
18
  "@fluentui/scripts-api-extractor": "*"
19
19
  },
20
20
  "dependencies": {
21
- "@fluentui/react-aria": "0.0.0-nightly-20250926-0406.1",
22
- "@fluentui/react-button": "0.0.0-nightly-20250926-0406.1",
23
- "@fluentui/react-context-selector": "0.0.0-nightly-20250926-0406.1",
24
- "@fluentui/react-divider": "0.0.0-nightly-20250926-0406.1",
25
- "@fluentui/react-drawer": "0.0.0-nightly-20250926-0406.1",
21
+ "@fluentui/react-aria": "0.0.0-nightly-20250930-0405.1",
22
+ "@fluentui/react-button": "0.0.0-nightly-20250930-0405.1",
23
+ "@fluentui/react-context-selector": "0.0.0-nightly-20250930-0405.1",
24
+ "@fluentui/react-divider": "0.0.0-nightly-20250930-0405.1",
25
+ "@fluentui/react-drawer": "0.0.0-nightly-20250930-0405.1",
26
26
  "@fluentui/react-icons": "^2.0.245",
27
- "@fluentui/react-jsx-runtime": "0.0.0-nightly-20250926-0406.1",
28
- "@fluentui/react-motion": "0.0.0-nightly-20250926-0406.1",
29
- "@fluentui/react-shared-contexts": "0.0.0-nightly-20250926-0406.1",
30
- "@fluentui/react-tabster": "0.0.0-nightly-20250926-0406.1",
31
- "@fluentui/react-theme": "0.0.0-nightly-20250926-0406.1",
32
- "@fluentui/react-tooltip": "0.0.0-nightly-20250926-0406.1",
33
- "@fluentui/react-utilities": "0.0.0-nightly-20250926-0406.1",
27
+ "@fluentui/react-jsx-runtime": "0.0.0-nightly-20250930-0405.1",
28
+ "@fluentui/react-motion": "0.0.0-nightly-20250930-0405.1",
29
+ "@fluentui/react-shared-contexts": "0.0.0-nightly-20250930-0405.1",
30
+ "@fluentui/react-tabster": "0.0.0-nightly-20250930-0405.1",
31
+ "@fluentui/react-theme": "0.0.0-nightly-20250930-0405.1",
32
+ "@fluentui/react-tooltip": "0.0.0-nightly-20250930-0405.1",
33
+ "@fluentui/react-utilities": "0.0.0-nightly-20250930-0405.1",
34
34
  "@griffel/react": "^1.5.22",
35
35
  "@swc/helpers": "^0.5.1"
36
36
  },