wip

Author: layershifter

docs/src/examples/components/List/Content/ListExampleContent.tsx

@@ -3,9 +3,15 @@ import { List } from '@fluentui/react'
 
 const ListExample = () => (
   <List>
-    <List.Item header="Program the sensor to the SAS alarm through the haptic SQL card!" />
-    <List.Item header="Use the online FTP application to input the multi-byte application!" />
-    <List.Item header="The GB pixel is down, navigate the virtual interface!" />
+    <List.Item
+      header="Program the sensor to the SAS alarm through the haptic SQL card!"
+      index={0}
+    />
+    <List.Item
+      header="Use the online FTP application to input the multi-byte application!"
+      index={1}
+    />
+    <List.Item header="The GB pixel is down, navigate the virtual interface!" index={2} />
   </List>
 )
 

docs/src/examples/components/List/Content/ListExampleContentMedia.tsx

@@ -6,14 +6,17 @@ const ListExample = () => (
     <List.Item
       content="Program the sensor to the SAS alarm through the haptic SQL card!"
       contentMedia="7:26:56 AM"
+      index={0}
     />
     <List.Item
       content="Use the online FTP application to input the multi-byte application!"
       contentMedia="11:30:17 PM"
+      index={1}
     />
     <List.Item
       content="The GB pixel is down, navigate the virtual interface!"
       contentMedia="5:22:40 PM"
+      index={2}
     />
   </List>
 )

docs/src/examples/components/List/Content/ListExampleEndMedia.tsx

@@ -9,16 +9,19 @@ const ListExample = () => (
       content="Program the sensor to the SAS alarm through the haptic SQL card!"
       endMedia={ellipsis}
       selectable
+      index={0}
     />
     <List.Item
       content="Use the online FTP application to input the multi-byte application!"
       endMedia={ellipsis}
       selectable
+      index={1}
     />
     <List.Item
       content="The GB pixel is down, navigate the virtual interface!"
       endMedia={ellipsis}
       selectable
+      index={2}
     />
   </List>
 )

docs/src/examples/components/List/Content/ListExampleHeader.tsx

@@ -3,9 +3,9 @@ import { List } from '@fluentui/react'
 
 const ListExample = () => (
   <List>
-    <List.Item header="Irving Kuhic" />
-    <List.Item header="Skyler Parks" />
-    <List.Item header="Dante Schneider" />
+    <List.Item header="Irving Kuhic" index={0} />
+    <List.Item header="Skyler Parks" index={1} />
+    <List.Item header="Dante Schneider" index={2} />
   </List>
 )
 

docs/src/examples/components/List/Content/ListExampleHeaderContent.tsx

@@ -6,14 +6,17 @@ const ListExample = () => (
     <List.Item
       header="Irving Kuhic"
       content="Program the sensor to the SAS alarm through the haptic SQL card!"
+      index={0}
     />
     <List.Item
       header="Skyler Parks"
       content="Use the online FTP application to input the multi-byte application!"
+      index={1}
     />
     <List.Item
       header="Dante Schneider"
       content="The GB pixel is down, navigate the virtual interface!"
+      index={2}
     />
   </List>
 )

docs/src/examples/components/List/Content/ListExampleHeaderMedia.tsx

@@ -3,9 +3,9 @@ import { List } from '@fluentui/react'
 
 const ListExample = () => (
   <List>
-    <List.Item header="Irving Kuhic" headerMedia="7:26:56 AM" />
-    <List.Item header="Skyler Parks" headerMedia="11:30:17 PM" />
-    <List.Item header="Dante Schneider" headerMedia="5:22:40 PM" />
+    <List.Item header="Irving Kuhic" headerMedia="7:26:56 AM" index={0} />
+    <List.Item header="Skyler Parks" headerMedia="11:30:17 PM" index={1} />
+    <List.Item header="Dante Schneider" headerMedia="5:22:40 PM" index={2} />
   </List>
 )
 

docs/src/examples/components/List/Content/ListExampleMedia.tsx

@@ -8,18 +8,21 @@ const ListExampleMedia = () => (
       header="Irving Kuhic"
       headerMedia="7:26:56 AM"
       content="Program the sensor to the SAS alarm through the haptic SQL card!"
+      index={0}
     />
     <List.Item
       media={<Image src="public/images/avatar/small/steve.jpg" avatar />}
       header="Skyler Parks"
       headerMedia="11:30:17 PM"
       content="Use the online FTP application to input the multi-byte application!"
+      index={1}
     />
     <List.Item
       media={<Image src="public/images/avatar/small/nom.jpg" avatar />}
       header="Dante Schneider"
       headerMedia="5:22:40 PM"
       content="The GB pixel is down, navigate the virtual interface!"
+      index={2}
     />
   </List>
 )

docs/src/examples/components/List/Performance/ListCommon.perf.tsx

@@ -1,4 +1,4 @@
-import { ContextList as List, Image } from '@fluentui/react'
+import { List, Image } from '@fluentui/react'
 import * as React from 'react'
 
 const avatars = {

docs/src/examples/components/List/Types/ListExample.tsx

@@ -12,18 +12,21 @@ const ListExampleSelectable = () => {
         header="Irving Kuhic"
         headerMedia="7:26:56 AM"
         content="Program the sensor to the SAS alarm through the haptic SQL card!"
+        index={0}
       />
       <List.Item
         media={<Image src="public/images/avatar/small/steve.jpg" avatar />}
         header="Skyler Parks"
         headerMedia="11:30:17 PM"
         content="Use the online FTP application to input the multi-byte application!"
+        index={1}
       />
       <List.Item
         media={<Image src="public/images/avatar/small/nom.jpg" avatar />}
         header="Dante Schneider"
         headerMedia="5:22:40 PM"
         content="The GB pixel is down, navigate the virtual interface!"
+        index={2}
       />
     </List>
   )

docs/src/examples/components/List/Types/ListExampleNavigable.tsx

@@ -9,20 +9,23 @@ const ListExampleNavigable = () => (
       headerMedia="7:26:56 AM"
       content="Program the sensor to the SAS alarm through the haptic SQL card!"
       navigable
+      index={0}
     />
     <List.Item
       media={<Image src="public/images/avatar/small/steve.jpg" avatar />}
       header="Skyler Parks"
       headerMedia="11:30:17 PM"
       content="Use the online FTP application to input the multi-byte application!"
       navigable
+      index={1}
     />
     <List.Item
       media={<Image src="public/images/avatar/small/nom.jpg" avatar />}
       header="Dante Schneider"
       headerMedia="5:22:40 PM"
       content="The GB pixel is down, navigate the virtual interface!"
       navigable
+      index={2}
     />
   </List>
 )

docs/src/examples/components/List/Types/ListExampleSelectable.tsx

@@ -7,18 +7,21 @@ const ListExampleSelectable = () => (
       media={<Image src="public/images/avatar/small/matt.jpg" avatar />}
       header="Irving Kuhic"
       headerMedia="7:26:56 AM"
+      index={0}
       content="Program the sensor to the SAS alarm through the haptic SQL card!"
     />
     <List.Item
       media={<Image src="public/images/avatar/small/steve.jpg" avatar />}
       header="Skyler Parks"
       headerMedia="11:30:17 PM"
+      index={1}
       content="Use the online FTP application to input the multi-byte application!"
     />
     <List.Item
       media={<Image src="public/images/avatar/small/nom.jpg" avatar />}
       header="Dante Schneider"
       headerMedia="5:22:40 PM"
+      index={2}
       content="The GB pixel is down, navigate the virtual interface!"
     />
   </List>

docs/src/examples/components/List/Variations/ListExampleTruncate.tsx

@@ -17,20 +17,23 @@ const ListExample = () => {
           headerMedia="7:26:56 AM"
           content="Program the sensor to the SAS alarm through the haptic SQL card!"
           contentMedia="!!"
+          index={0}
         />
         <List.Item
           media={<Image src="public/images/avatar/small/steve.jpg" avatar />}
           header="Skyler Parks - Super long title here"
           headerMedia="11:30:17 PM"
           content="Use the online FTP application to input the multi-byte application!"
           contentMedia="!!"
+          index={1}
         />
         <List.Item
           media={<Image src="public/images/avatar/small/nom.jpg" avatar />}
           header="Dante Schneider - Super long title here"
           headerMedia="5:22:40 PM"
           content="The GB pixel is down, navigate the virtual interface!"
           contentMedia="!!"
+          index={2}
         />
       </List>
     </div>

packages/accessibility/src/behaviors/index.ts

@@ -8,14 +8,23 @@ export { default as menuBehavior } from './Menu/menuBehavior'
 export { default as menuItemBehavior } from './Menu/menuItemBehavior'
 export { default as menuDividerBehavior } from './Menu/menuDividerBehavior'
 export { default as submenuBehavior } from './Menu/submenuBehavior'
+
+// List
+
 export { default as basicListBehavior } from './List/listBehavior'
 export { default as basicListItemBehavior } from './List/basicListItemBehavior'
+
 export { default as listBehavior } from './List/listBehavior'
+export * from './List/listBehavior'
 export { default as listItemBehavior } from './List/listItemBehavior'
+export * from './List/listItemBehavior'
+
 export { default as navigableListBehavior } from './List/navigableListBehavior'
 export { default as navigableListItemBehavior } from './List/navigableListItemBehavior'
+
 export { default as selectableListBehavior } from './List/selectableListBehavior'
 export { default as selectableListItemBehavior } from './List/selectableListItemBehavior'
+
 export { default as loaderBehavior } from './Loader/loaderBehavior'
 export { default as inputBehavior } from './Input/inputBehavior'
 export { default as iconBehavior } from './Icon/iconBehavior'

packages/react-bindings/src/hooks/useStateManager.ts

@@ -39,11 +39,8 @@ const useStateManager = <
   const latestManager = React.useRef<Manager<State, Actions> | null>(null)
 
   // Heads up! forceUpdate() is used only for triggering rerenders stateManager is SSOT()
-  const [, forceUpdate] = React.useState()
-  const syncState = React.useCallback(
-    (_prevState: State, nextState: State) => forceUpdate(nextState),
-    [],
-  )
+  const [, forceUpdate] = React.useReducer((c: number) => c + 1, 0) as [never, () => void]
+  const syncState = React.useCallback(() => forceUpdate(), [])
 
   // If manager exists, the current state will be used
   const initialState = latestManager.current

packages/react-context-selector/.gulp.js

@@ -0,0 +1 @@
+module.exports = require('../../.gulp')

packages/react-context-selector/README.md

@@ -0,0 +1,2 @@
+`@fluentui/react-context-selector`
+===

packages/react-context-selector/babel.config.js

@@ -0,0 +1 @@
+module.exports = api => require('@fluentui/internal-tooling/babel')(api)

packages/react-context-selector/gulpfile.ts

@@ -0,0 +1 @@
+import '../../gulpfile'

packages/react-context-selector/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "@fluentui/react-context-selector",
+  "description": "TODO",
+  "version": "0.43.0",
+  "author": "Oleksandr Fediashov <a@fedyashov.com>",
+  "bugs": "https://github.com/microsoft/fluent-ui-react/issues",
+  "dependencies": {
+    "@babel/runtime": "^7.1.2"
+  },
+  "devDependencies": {
+    "@fluentui/internal-tooling": "^0.43.0",
+    "lerna-alias": "^3.0.3-0"
+  },
+  "files": [
+    "dist"
+  ],
+  "homepage": "https://github.com/microsoft/fluent-ui-react/tree/master/packages/react-context-selector",
+  "jsnext:main": "dist/es/index.js",
+  "license": "MIT",
+  "main": "dist/commonjs/index.js",
+  "module": "dist/es/index.js",
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": "microsoft/fluent-ui-react.git",
+  "scripts": {
+    "build": "gulp bundle:package:no-umd",
+    "clean": "gulp bundle:package:clean"
+  },
+  "sideEffects": false,
+  "types": "dist/es/index.d.ts"
+}

packages/react-context-selector/src/createContext.ts

@@ -0,0 +1,59 @@
+import * as React from 'react'
+import { ContextListener, ContextValue, Context } from './types'
+
+export const SUBSCRIBE_CONTEXT_PROPERTY = 's'
+export const VALUE_CONTEXT_PROPERTY = 'v'
+
+const calculateChangedBits = () => 0
+
+const createProvider = <Value>(
+  Original: React.Provider<ContextValue<Value>>,
+): React.FC<React.ProviderProps<Value>> => props => {
+  const listeners = React.useRef<ContextListener<Value>[]>([])
+
+  // We call listeners in render intentionally. Listeners are not technically pure, but
+  // otherwise we can't get benefits from concurrent mode.
+  //
+  // We make sure to work with double or more invocation of listeners.
+  listeners.current.forEach(listener => listener(props.value))
+
+  const subscribe = React.useCallback((listener: ContextListener<Value>) => {
+    listeners.current.push(listener)
+
+    const unsubscribe = () => {
+      const index = listeners.current.indexOf(listener)
+      listeners.current.splice(index, 1)
+    }
+
+    return unsubscribe
+  }, [])
+
+  const value: ContextValue<Value> = {
+    [SUBSCRIBE_CONTEXT_PROPERTY]: subscribe,
+    [VALUE_CONTEXT_PROPERTY]: props.value,
+  }
+
+  return React.createElement(Original, { value }, props.children)
+}
+
+export const createContext = <Value>(defaultValue: Value): Context<Value> => {
+  const context = React.createContext<ContextValue<Value>>(
+    {
+      get [SUBSCRIBE_CONTEXT_PROPERTY](): any {
+        throw new Error(
+          process.env.NODE_ENV === 'production'
+            ? ''
+            : `Please use <Provider> from "@fluentui/react-bindings"`,
+        )
+      },
+      [VALUE_CONTEXT_PROPERTY]: defaultValue,
+    },
+    calculateChangedBits,
+  )
+  context.Provider = createProvider<Value>(context.Provider) as any
+
+  // We don't support Consumer API
+  delete context.Consumer
+
+  return context as any
+}

packages/react-context-selector/src/index.ts

@@ -0,0 +1,3 @@
+export { createContext } from './createContext'
+export { useContextSelector } from './useContextSelector'
+export * from './types'

packages/react-context-selector/src/types.ts

@@ -0,0 +1,15 @@
+import * as React from 'react'
+
+export type Context<Value> = React.Context<Value> & {
+  Provider: React.FC<React.ProviderProps<Value>>
+  Consumer: never
+}
+
+export type ContextListener<Value> = (value: Value) => void
+
+export type ContextSelector<Value, SelectedValue> = (value: Value) => SelectedValue
+
+export type ContextValue<Value> = {
+  s: (listener: ContextListener<Value>) => any
+  v: Value
+}