@zendeskgarden/container-selection
Advanced tools
Comparing version 0.2.0 to 0.2.1
@@ -6,2 +6,10 @@ # Change Log | ||
## [0.2.1](https://github.com/zendeskgarden/react-containers/compare/@zendeskgarden/container-selection@0.2.0...@zendeskgarden/container-selection@0.2.1) (2019-03-13) | ||
**Note:** Version bump only for package @zendeskgarden/container-selection | ||
# [0.2.0](https://github.com/zendeskgarden/react-containers/compare/@zendeskgarden/container-selection@0.1.2...@zendeskgarden/container-selection@0.2.0) (2019-03-12) | ||
@@ -8,0 +16,0 @@ |
@@ -6,3 +6,3 @@ /*! | ||
*/ | ||
!function(e,t){for(var r in t)e[r]=t[r]}(exports,function(e){var t={};function r(n){if(t[n])return t[n].exports;var o=t[n]={i:n,l:!1,exports:{}};return e[n].call(o.exports,o,o.exports,r),o.l=!0,o.exports}return r.m=e,r.c=t,r.d=function(e,t,n){r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)r.d(n,o,function(t){return e[t]}.bind(null,o));return n},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="",r(r.s=2)}([function(e,t){e.exports=require("prop-types")},function(e,t){e.exports=require("react")},function(e,t,r){"use strict";r.r(t);var n=r(1);function o(){for(var e=arguments.length,t=new Array(e),r=0;r<e;r++)t[r]=arguments[r];return function(e){for(var r=arguments.length,n=new Array(r>1?r-1:0),o=1;o<r;o++)n[o-1]=arguments[o];return t.some(function(t){return t&&t.apply(void 0,[e].concat(n)),e&&e.defaultPrevented})}}function u(){for(var e=arguments.length,t=new Array(e),r=0;r<e;r++)t[r]=arguments[r];for(var n=0;n<t.length;n++){var o=t[n];if(void 0!==o)return o}}var i={ALT:18,BACKSPACE:8,COMMA:188,DELETE:46,DOWN:40,END:35,ENTER:13,ESCAPE:27,HOME:36,LEFT:37,NUMPAD_ADD:107,NUMPAD_DECIMAL:110,NUMPAD_DIVIDE:111,NUMPAD_ENTER:108,NUMPAD_MULTIPLY:106,NUMPAD_SUBTRACT:109,PAGE_DOWN:34,PAGE_UP:33,PERIOD:190,RIGHT:39,SHIFT:16,SPACE:32,TAB:9,UP:38},c={HORIZONTAL:"horizontal",VERTICAL:"vertical",BOTH:"both"},l={FOCUS:"FOCUS",INCREMENT:"INCREMENT",DECREMENT:"DECREMENT",HOME:"HOME",END:"END",MOUSE_SELECT:"MOUSE_SELECT",KEYBOARD_SELECT:"KEYBOARD_SELECT",EXIT_WIDGET:"EXIT_WIDGET"};function f(e,t){if(null==e)return{};var r,n,o=function(e,t){if(null==e)return{};var r,n,o={},u=Object.keys(e);for(n=0;n<u.length;n++)r=u[n],t.indexOf(r)>=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var u=Object.getOwnPropertySymbols(e);for(n=0;n<u.length;n++)r=u[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}function a(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var r=[],n=!0,o=!1,u=void 0;try{for(var i,c=e[Symbol.iterator]();!(n=(i=c.next()).done)&&(r.push(i.value),!t||r.length!==t);n=!0);}catch(e){o=!0,u=e}finally{try{n||null==c.return||c.return()}finally{if(o)throw u}}return r}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance")}()}function s(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{},n=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(r).filter(function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable}))),n.forEach(function(t){d(e,t,r[t])})}return e}function d(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function E(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},t=e.direction,r=void 0===t?c.HORIZONTAL:t,E=e.defaultFocusedIndex,p=void 0===E?0:E,y=e.rtl,m=e.selectedItem,v=e.focusedItem,O=e.onSelect,I=e.onFocus,T=[],b=[],C=a(Object(n.useReducer)(function(e,t){return function(e,t,r){var n=r.focusedItem,o=r.selectedItem,i=r.onFocus,c=r.onSelect,f=u(n,e.focusedItem),a=u(o,e.selectedItem),d=void 0===f?t.items.indexOf(a):t.items.indexOf(f);switch(t.type){case l.FOCUS:return i?(i(t.payload),e):s({},e,{focusedItem:t.payload});case l.INCREMENT:var E=t.items[(d+1)%t.items.length];return i?(i(E),e):s({},e,{focusedItem:E});case l.DECREMENT:var p=t.items[(d+t.items.length-1)%t.items.length];return i?(i(p),e):s({},e,{focusedItem:p});case l.HOME:return i?(i(t.items[0]),e):s({},e,{focusedItem:t.items[0]});case l.END:return i?(i(t.items[t.items.length-1]),e):s({},e,{focusedItem:t.items[t.items.length-1]});case l.MOUSE_SELECT:var y=!1,m=!1;if(c&&(c(t.payload),y=!0),i&&(i(void 0),m=!0),m&&y)return e;var v=s({},e);return y||(v.selectedItem=t.payload),m||(v.focusedItem=void 0),v;case l.KEYBOARD_SELECT:return c?(c(t.payload),e):s({},e,{selectedItem:t.payload});case l.EXIT_WIDGET:return i?(i(void 0),e):s({},e,{focusedItem:void 0});default:return e}}(e,t,{onSelect:O,onFocus:I,selectedItem:m,focusedItem:v})},{selectedItem:m,focusedItem:v}),2),D=C[0],S=C[1],A=u(v,D.focusedItem),g=u(m,D.selectedItem);Object(n.useEffect)(function(){if(void 0!==A){var e=b.indexOf(A);T[e]&&T[e].current.focus()}},[A]);return{focusedItem:A,selectedItem:g,getItemProps:function(){var e,t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},n=t.selectedAriaKey,u=void 0===n?"aria-selected":n,a=t.role,E=void 0===a?"option":a,m=t.onFocus,v=t.onKeyDown,O=t.onClick,I=t.item,C=t.focusRef,N=f(t,["selectedAriaKey","role","onFocus","onKeyDown","onClick","item","focusRef"]);if(void 0===I)throw new Error('Accessibility Error: You must provide an "item" option to "getItemProps()"');if(void 0===C)throw new Error('Accessibility Error: You must provide a "focusRef" option to "getItemProps()"');T.push(C),b.push(I);var P=g===I,h=(void 0===A?P:A===I)||void 0===D.selectedItem&&void 0===D.focusedItem&&b.indexOf(I)===p?0:-1,M=r===c.VERTICAL||r===c.BOTH,R=r===c.HORIZONTAL||r===c.BOTH;return s((d(e={role:E,tabIndex:h},u,P),d(e,"onFocus",o(m,function(){S({type:l.FOCUS,payload:I,items:b})})),d(e,"onBlur",function(e){0===e.target.tabIndex&&S({type:l.EXIT_WIDGET,items:b})}),d(e,"onClick",o(O,function(){S({type:l.MOUSE_SELECT,payload:I,items:b})})),d(e,"onKeyDown",o(v,function(e){e.keyCode===i.UP&&M||e.keyCode===i.LEFT&&R?(S(y?{type:l.INCREMENT,items:b}:{type:l.DECREMENT,items:b}),e.preventDefault()):e.keyCode===i.DOWN&&M||e.keyCode===i.RIGHT&&R?(S(y?{type:l.DECREMENT,items:b}:{type:l.INCREMENT,items:b}),e.preventDefault()):e.keyCode===i.HOME?(S({type:l.HOME,items:b}),e.preventDefault()):e.keyCode===i.END?(S({type:l.END,items:b}),e.preventDefault()):e.keyCode!==i.SPACE&&e.keyCode!==i.ENTER||(S({type:l.KEYBOARD_SELECT,payload:I,items:b}),e.preventDefault())})),e),N)},getContainerProps:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},t=e.role;return s({role:void 0===t?"listbox":t},f(e,["role"]))}}}var p=r(0),y=r.n(p);function m(e,t){if(null==e)return{};var r,n,o=function(e,t){if(null==e)return{};var r,n,o={},u=Object.keys(e);for(n=0;n<u.length;n++)r=u[n],t.indexOf(r)>=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var u=Object.getOwnPropertySymbols(e);for(n=0;n<u.length;n++)r=u[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}function v(e){var t=e.children,r=e.render;return(void 0===r?t:r)(E(m(e,["children","render"])))}v.propTypes={children:y.a.func,render:y.a.func,rtl:y.a.bool,direction:y.a.oneOf([c.HORIZONTAL,c.VERTICAL,c.BOTH]),defaultFocusedIndex:y.a.number,focusedItem:y.a.any,selectedItem:y.a.any,onSelect:y.a.func,onFocus:y.a.func},r.d(t,"useSelection",function(){return E}),r.d(t,"SelectionContainer",function(){return v}),r.d(t,"composeEventHandlers",function(){return o}),r.d(t,"KEY_CODES",function(){return i})}])); | ||
!function(e,t){for(var r in t)e[r]=t[r]}(exports,function(e){var t={};function r(n){if(t[n])return t[n].exports;var o=t[n]={i:n,l:!1,exports:{}};return e[n].call(o.exports,o,o.exports,r),o.l=!0,o.exports}return r.m=e,r.c=t,r.d=function(e,t,n){r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)r.d(n,o,function(t){return e[t]}.bind(null,o));return n},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="",r(r.s=2)}([function(e,t){e.exports=require("prop-types")},function(e,t){e.exports=require("react")},function(e,t,r){"use strict";r.r(t);var n=r(1);function o(){for(var e=arguments.length,t=new Array(e),r=0;r<e;r++)t[r]=arguments[r];return function(e){for(var r=arguments.length,n=new Array(r>1?r-1:0),o=1;o<r;o++)n[o-1]=arguments[o];return t.some(function(t){return t&&t.apply(void 0,[e].concat(n)),e&&e.defaultPrevented})}}function u(){for(var e=arguments.length,t=new Array(e),r=0;r<e;r++)t[r]=arguments[r];for(var n=0;n<t.length;n++){var o=t[n];if(void 0!==o)return o}}var i={ALT:18,BACKSPACE:8,COMMA:188,DELETE:46,DOWN:40,END:35,ENTER:13,ESCAPE:27,HOME:36,LEFT:37,NUMPAD_ADD:107,NUMPAD_DECIMAL:110,NUMPAD_DIVIDE:111,NUMPAD_ENTER:108,NUMPAD_MULTIPLY:106,NUMPAD_SUBTRACT:109,PAGE_DOWN:34,PAGE_UP:33,PERIOD:190,RIGHT:39,SHIFT:16,SPACE:32,TAB:9,UP:38},c={HORIZONTAL:"horizontal",VERTICAL:"vertical",BOTH:"both"},l={FOCUS:"FOCUS",INCREMENT:"INCREMENT",DECREMENT:"DECREMENT",HOME:"HOME",END:"END",MOUSE_SELECT:"MOUSE_SELECT",KEYBOARD_SELECT:"KEYBOARD_SELECT",EXIT_WIDGET:"EXIT_WIDGET"};function f(e,t){if(null==e)return{};var r,n,o=function(e,t){if(null==e)return{};var r,n,o={},u=Object.keys(e);for(n=0;n<u.length;n++)r=u[n],t.indexOf(r)>=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var u=Object.getOwnPropertySymbols(e);for(n=0;n<u.length;n++)r=u[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}function a(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var r=[],n=!0,o=!1,u=void 0;try{for(var i,c=e[Symbol.iterator]();!(n=(i=c.next()).done)&&(r.push(i.value),!t||r.length!==t);n=!0);}catch(e){o=!0,u=e}finally{try{n||null==c.return||c.return()}finally{if(o)throw u}}return r}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance")}()}function s(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{},n=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(r).filter(function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable}))),n.forEach(function(t){d(e,t,r[t])})}return e}function d(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function E(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},t=e.direction,r=void 0===t?c.HORIZONTAL:t,E=e.defaultFocusedIndex,p=void 0===E?0:E,y=e.rtl,m=e.selectedItem,v=e.focusedItem,O=e.onSelect,I=e.onFocus,T=[],b=[],C=a(Object(n.useReducer)(function(e,t){return function(e,t,r){var n=r.focusedItem,o=r.selectedItem,i=r.onFocus,c=r.onSelect,f=u(n,e.focusedItem),a=u(o,e.selectedItem),d=void 0===f?t.items.indexOf(a):t.items.indexOf(f);switch(t.type){case l.FOCUS:return i?(i(t.payload),e):s({},e,{focusedItem:t.payload});case l.INCREMENT:var E=t.items[(d+1)%t.items.length];return i?(i(E),e):s({},e,{focusedItem:E});case l.DECREMENT:var p=t.items[(d+t.items.length-1)%t.items.length];return i?(i(p),e):s({},e,{focusedItem:p});case l.HOME:return i?(i(t.items[0]),e):s({},e,{focusedItem:t.items[0]});case l.END:return i?(i(t.items[t.items.length-1]),e):s({},e,{focusedItem:t.items[t.items.length-1]});case l.MOUSE_SELECT:var y=!1,m=!1;if(c&&(c(t.payload),y=!0),i&&(i(void 0),m=!0),m&&y)return e;var v=s({},e);return y||(v.selectedItem=t.payload),m||(v.focusedItem=void 0),v;case l.KEYBOARD_SELECT:return c?(c(t.payload),e):s({},e,{selectedItem:t.payload});case l.EXIT_WIDGET:return i?(i(void 0),e):s({},e,{focusedItem:void 0});default:return e}}(e,t,{onSelect:O,onFocus:I,selectedItem:m,focusedItem:v})},{selectedItem:m,focusedItem:v}),2),D=C[0],S=C[1],A=u(v,D.focusedItem),g=u(m,D.selectedItem);Object(n.useEffect)(function(){if(void 0!==A){var e=b.indexOf(A);T[e]&&T[e].current.focus()}},[A,b,T]);return{focusedItem:A,selectedItem:g,getItemProps:function(){var e,t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},n=t.selectedAriaKey,u=void 0===n?"aria-selected":n,a=t.role,E=void 0===a?"option":a,m=t.onFocus,v=t.onKeyDown,O=t.onClick,I=t.item,C=t.focusRef,N=f(t,["selectedAriaKey","role","onFocus","onKeyDown","onClick","item","focusRef"]);if(void 0===I)throw new Error('Accessibility Error: You must provide an "item" option to "getItemProps()"');if(void 0===C)throw new Error('Accessibility Error: You must provide a "focusRef" option to "getItemProps()"');T.push(C),b.push(I);var P=g===I,h=(void 0===A?P:A===I)||void 0===D.selectedItem&&void 0===D.focusedItem&&b.indexOf(I)===p?0:-1,M=r===c.VERTICAL||r===c.BOTH,R=r===c.HORIZONTAL||r===c.BOTH;return s((d(e={role:E,tabIndex:h},u,P),d(e,"onFocus",o(m,function(){S({type:l.FOCUS,payload:I,items:b})})),d(e,"onBlur",function(e){0===e.target.tabIndex&&S({type:l.EXIT_WIDGET,items:b})}),d(e,"onClick",o(O,function(){S({type:l.MOUSE_SELECT,payload:I,items:b})})),d(e,"onKeyDown",o(v,function(e){e.keyCode===i.UP&&M||e.keyCode===i.LEFT&&R?(S(y?{type:l.INCREMENT,items:b}:{type:l.DECREMENT,items:b}),e.preventDefault()):e.keyCode===i.DOWN&&M||e.keyCode===i.RIGHT&&R?(S(y?{type:l.DECREMENT,items:b}:{type:l.INCREMENT,items:b}),e.preventDefault()):e.keyCode===i.HOME?(S({type:l.HOME,items:b}),e.preventDefault()):e.keyCode===i.END?(S({type:l.END,items:b}),e.preventDefault()):e.keyCode!==i.SPACE&&e.keyCode!==i.ENTER||(S({type:l.KEYBOARD_SELECT,payload:I,items:b}),e.preventDefault())})),e),N)},getContainerProps:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},t=e.role;return s({role:void 0===t?"listbox":t},f(e,["role"]))}}}var p=r(0),y=r.n(p);function m(e,t){if(null==e)return{};var r,n,o=function(e,t){if(null==e)return{};var r,n,o={},u=Object.keys(e);for(n=0;n<u.length;n++)r=u[n],t.indexOf(r)>=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var u=Object.getOwnPropertySymbols(e);for(n=0;n<u.length;n++)r=u[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}function v(e){var t=e.children,r=e.render;return(void 0===r?t:r)(E(m(e,["children","render"])))}v.propTypes={children:y.a.func,render:y.a.func,rtl:y.a.bool,direction:y.a.oneOf([c.HORIZONTAL,c.VERTICAL,c.BOTH]),defaultFocusedIndex:y.a.number,focusedItem:y.a.any,selectedItem:y.a.any,onSelect:y.a.func,onFocus:y.a.func},r.d(t,"useSelection",function(){return E}),r.d(t,"SelectionContainer",function(){return v}),r.d(t,"composeEventHandlers",function(){return o}),r.d(t,"KEY_CODES",function(){return i})}])); | ||
//# sourceMappingURL=index.js.map |
@@ -11,3 +11,3 @@ { | ||
}, | ||
"version": "0.2.0", | ||
"version": "0.2.1", | ||
"main": "./dist/index.js", | ||
@@ -38,3 +38,3 @@ "files": [ | ||
"zendeskgarden:src": "src/index.js", | ||
"gitHead": "966ebb60d64ec18cc97a9e3115bc5f4dd6515c28" | ||
"gitHead": "89568686ec26b70715636d66d9b5ccf53d545554" | ||
} |
@@ -16,20 +16,24 @@ # @zendeskgarden/container-selection [![npm version](https://img.shields.io/npm/v/@zendeskgarden/container-selection.svg?style=flat-square)](https://www.npmjs.com/package/@zendeskgarden/container-selection) | ||
### SelectionContainer | ||
### useSelection | ||
SelectionContainer is a render-prop around the `useSelection` hook which manages an items focus | ||
state including keyboard controls, aria attributes and RTL support. It uses the | ||
The `useSelection` hook which manages an items focus state including keyboard controls, | ||
aria attributes and RTL support. It uses the | ||
[roving tab index strategy](https://www.w3.org/TR/wai-aria-practices/#kbd_roving_tabindex). | ||
```jsx static | ||
import { SelectionContainer } from '@zendeskgarden/container-selection'; | ||
import { useSelection } from '@zendeskgarden/container-selection'; | ||
const items = ['Item 1', 'Item 2', 'Item 3']; | ||
<SelectionContainer direction="vertical"> | ||
{({ selectedItem, focusedItem, getContainerProps, getItemProps }) => ( | ||
const Selection = ({ direction }) => { | ||
const { focusedItem, selectedItem, getContainerProps, getItemProps } = useSelection({ | ||
direction | ||
}); | ||
return ( | ||
<ul {...getContainerProps()}> | ||
{items.map(item => { | ||
const ref = React.createRef(); | ||
const isSelected = item === selectedItem; | ||
const isFocused = item === focusedItem; | ||
const isSelected = selectedItem === item; | ||
const isFocused = focusedItem === item; | ||
@@ -46,4 +50,4 @@ return ( | ||
{item} | ||
{isSelected && <span> - Selected</span>} | ||
{isFocused && <span> - Focused</span>} | ||
{isSelected && <div>[Selected]</div>} | ||
{isFocused && <div>(Focused)</div>} | ||
</li> | ||
@@ -53,24 +57,20 @@ ); | ||
</ul> | ||
)} | ||
</SelectionContainer>; | ||
); | ||
}; | ||
``` | ||
### useSelection | ||
### SelectionContainer | ||
```jsx static | ||
import { useSelection } from '@zendeskgarden/container-selection'; | ||
import { SelectionContainer } from '@zendeskgarden/container-selection'; | ||
const items = ['Item 1', 'Item 2', 'Item 3']; | ||
const Selection = ({ direction }) => { | ||
const { focusedItem, selectedItem, getContainerProps, getItemProps } = useSelection({ | ||
direction | ||
}); | ||
return ( | ||
<SelectionContainer direction="vertical"> | ||
{({ selectedItem, focusedItem, getContainerProps, getItemProps }) => ( | ||
<ul {...getContainerProps()}> | ||
{items.map(item => { | ||
const ref = React.createRef(); | ||
const isSelected = selectedItem === item; | ||
const isFocused = focusedItem === item; | ||
const isSelected = item === selectedItem; | ||
const isFocused = item === focusedItem; | ||
@@ -87,4 +87,4 @@ return ( | ||
{item} | ||
{isSelected && <div>[Selected]</div>} | ||
{isFocused && <div>(Focused)</div>} | ||
{isSelected && <span> - Selected</span>} | ||
{isFocused && <span> - Focused</span>} | ||
</li> | ||
@@ -94,4 +94,4 @@ ); | ||
</ul> | ||
); | ||
}; | ||
)} | ||
</SelectionContainer>; | ||
``` |
Sorry, the diff of this file is not supported yet
46182