Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
@reach/combobox
Advanced tools
@reach/combobox - npm Package Compare versions
Comparing version 0.8.5 to 0.8.6
@@ -188,14 +188,8 @@ 'use strict'; | ||
| var ComboboxDescendantContext = | ||
| /*#__PURE__*/ | ||
| descendants.createDescendantContext("ComboboxDescendantContext"); | ||
| var ComboboxContext = | ||
| /*#__PURE__*/ | ||
| utils.createNamedContext("ComboboxContext", {}); // Allows us to put the option's value on context so that ComboboxOptionText | ||
| var ComboboxDescendantContext = /*#__PURE__*/descendants.createDescendantContext("ComboboxDescendantContext"); | ||
| var ComboboxContext = /*#__PURE__*/utils.createNamedContext("ComboboxContext", {}); // Allows us to put the option's value on context so that ComboboxOptionText | ||
| // can work it's highlight text magic no matter what else is rendered around | ||
| // it. | ||
| var OptionContext = | ||
| /*#__PURE__*/ | ||
| utils.createNamedContext("OptionContext", {}); //////////////////////////////////////////////////////////////////////////////// | ||
| var OptionContext = /*#__PURE__*/utils.createNamedContext("OptionContext", {}); //////////////////////////////////////////////////////////////////////////////// | ||
@@ -208,5 +202,3 @@ /** | ||
| var Combobox = | ||
| /*#__PURE__*/ | ||
| utils.forwardRefWithAs(function Combobox(_ref, forwardedRef) { | ||
| var Combobox = /*#__PURE__*/utils.forwardRefWithAs(function Combobox(_ref, forwardedRef) { | ||
| var onSelect = _ref.onSelect, | ||
@@ -304,5 +296,3 @@ _ref$openOnFocus = _ref.openOnFocus, | ||
| var ComboboxInput = | ||
| /*#__PURE__*/ | ||
| utils.forwardRefWithAs(function ComboboxInput(_ref2, forwardedRef) { | ||
| var ComboboxInput = /*#__PURE__*/utils.forwardRefWithAs(function ComboboxInput(_ref2, forwardedRef) { | ||
| var _ref2$as = _ref2.as, | ||
@@ -356,4 +346,3 @@ Comp = _ref2$as === void 0 ? "input" : _ref2$as, | ||
| }, [autocomplete, autocompletePropRef]); | ||
| var handleValueChange = function handleValueChange(value) { | ||
| var handleValueChange = React.useCallback(function (value) { | ||
| if (value.trim() === "") { | ||
@@ -370,15 +359,15 @@ transition(CLEAR); | ||
| } | ||
| }; // If they are controlling the value we still need to do our transitions, so | ||
| // we have this derived state to emulate onChange of the input as we receive | ||
| // new `value`s ...[*] | ||
| }, [initialControlledValue, transition]); | ||
| React.useEffect(function () { | ||
| // If they are controlling the value we still need to do our transitions, | ||
| // so we have this derived state to emulate onChange of the input as we | ||
| // receive new `value`s ...[*] | ||
| if (isControlled && controlledValue !== value && ( // https://github.com/reach/reach-ui/issues/481 | ||
| controlledValue.trim() === "" ? (value || "").trim() !== "" : true)) { | ||
| handleValueChange(controlledValue); | ||
| } | ||
| }, [controlledValue, handleValueChange, isControlled, value]); // [*]... and when controlled, we don't trigger handleValueChange as the | ||
| // user types, instead the developer controls it with the normal input | ||
| // onChange prop | ||
| if (isControlled && controlledValue !== value && ( // https://github.com/reach/reach-ui/issues/481 | ||
| controlledValue.trim() === "" ? (value || "").trim() !== "" : true)) { | ||
| handleValueChange(controlledValue); | ||
| } // [*]... and when controlled, we don't trigger handleValueChange as the user | ||
| // types, instead the developer controls it with the normal input onChange | ||
| // prop | ||
| function handleChange(event) { | ||
@@ -445,5 +434,3 @@ var value = event.target.value; | ||
| var ComboboxPopover = | ||
| /*#__PURE__*/ | ||
| React.forwardRef(function ComboboxPopover(_ref3, forwardedRef) { | ||
| var ComboboxPopover = /*#__PURE__*/React.forwardRef(function ComboboxPopover(_ref3, forwardedRef) { | ||
| var children = _ref3.children, | ||
@@ -501,5 +488,3 @@ _ref3$portal = _ref3.portal, | ||
| var ComboboxList = | ||
| /*#__PURE__*/ | ||
| utils.forwardRefWithAs(function ComboboxList(_ref4, forwardedRef) { | ||
| var ComboboxList = /*#__PURE__*/utils.forwardRefWithAs(function ComboboxList(_ref4, forwardedRef) { | ||
| var _ref4$persistSelectio = _ref4.persistSelection, | ||
@@ -540,5 +525,3 @@ persistSelection = _ref4$persistSelectio === void 0 ? false : _ref4$persistSelectio, | ||
| var ComboboxOption = | ||
| /*#__PURE__*/ | ||
| React.forwardRef(function ComboboxOption(_ref5, forwardedRef) { | ||
| var ComboboxOption = /*#__PURE__*/React.forwardRef(function ComboboxOption(_ref5, forwardedRef) { | ||
| var children = _ref5.children, | ||
@@ -647,5 +630,3 @@ value = _ref5.value, | ||
| var ComboboxButton = | ||
| /*#__PURE__*/ | ||
| utils.forwardRefWithAs(function ComboboxButton(_ref6, forwardedRef) { | ||
| var ComboboxButton = /*#__PURE__*/utils.forwardRefWithAs(function ComboboxButton(_ref6, forwardedRef) { | ||
| var _ref6$as = _ref6.as, | ||
@@ -652,0 +633,0 @@ Comp = _ref6$as === void 0 ? "button" : _ref6$as, |
@@ -1,2 +0,2 @@ | ||
| "use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react"),n=e(t);require("prop-types");var r,o,a,u,i,l=require("@reach/utils"),c=require("@reach/descendants"),s=require("highlight-words-core"),v=e(require("escape-regexp")),E=require("@reach/auto-id"),f=require("@reach/popover"),T=e(f);function d(){return(d=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e}).apply(this,arguments)}function p(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r<a.length;r++)t.indexOf(n=a[r])>=0||(o[n]=e[n]);return o}var I="IDLE",C={initial:I,states:(i={},i.IDLE={on:(r={},r.BLUR=I,r.CLEAR=I,r.CHANGE="SUGGESTING",r.INITIAL_CHANGE=I,r.FOCUS="SUGGESTING",r.NAVIGATE="NAVIGATING",r.OPEN_WITH_BUTTON="SUGGESTING",r)},i.SUGGESTING={on:(o={},o.CHANGE="SUGGESTING",o.FOCUS="SUGGESTING",o.NAVIGATE="NAVIGATING",o.CLEAR=I,o.ESCAPE=I,o.BLUR=I,o.SELECT_WITH_CLICK=I,o.INTERACT="INTERACTING",o.CLOSE_WITH_BUTTON=I,o)},i.NAVIGATING={on:(a={},a.CHANGE="SUGGESTING",a.FOCUS="SUGGESTING",a.CLEAR=I,a.BLUR=I,a.ESCAPE=I,a.NAVIGATE="NAVIGATING",a.SELECT_WITH_CLICK=I,a.SELECT_WITH_KEYBOARD=I,a.CLOSE_WITH_BUTTON=I,a.INTERACT="INTERACTING",a)},i.INTERACTING={on:(u={},u.CHANGE="SUGGESTING",u.FOCUS="SUGGESTING",u.BLUR=I,u.ESCAPE=I,u.NAVIGATE="NAVIGATING",u.CLOSE_WITH_BUTTON=I,u.SELECT_WITH_CLICK=I,u)},i)},A=function(e,t){var n=d({},e,{lastEventType:t.type});switch(t.type){case"CHANGE":case"INITIAL_CHANGE":return d({},n,{navigationValue:null,value:t.value});case"NAVIGATE":case"OPEN_WITH_BUTTON":return d({},n,{navigationValue:b(n,t)});case"CLEAR":return d({},n,{value:"",navigationValue:null});case"BLUR":case"ESCAPE":return d({},n,{navigationValue:null});case"SELECT_WITH_CLICK":return d({},n,{value:t.value,navigationValue:null});case"SELECT_WITH_KEYBOARD":return d({},n,{value:e.navigationValue,navigationValue:null});case"CLOSE_WITH_BUTTON":return d({},n,{navigationValue:null});case"INTERACT":return n;case"FOCUS":return d({},n,{navigationValue:b(n,t)});default:return n}},N=["SUGGESTING","NAVIGATING","INTERACTING"],G=function(e){return N.includes(e)};function b(e,t){return t.value?t.value:t.persistSelection?e.value:null}var h=c.createDescendantContext("ComboboxDescendantContext"),S=l.createNamedContext("ComboboxContext",{}),x=l.createNamedContext("OptionContext",{}),R=l.forwardRefWithAs((function(e,r){var o=e.onSelect,a=e.openOnFocus,u=void 0!==a&&a,i=e.children,s=e.as,v=void 0===s?"div":s,f=p(e,["onSelect","openOnFocus","children","as"]),T=c.useDescendants(),I=T[0],N=T[1],b=t.useRef(),x=t.useRef(),R=t.useRef(),g=t.useRef(),m=t.useRef(),O=function(e,n,r){var o=t.useState(e.initial),a=o[0],u=o[1],i=t.useReducer(n,{value:"",navigationValue:null}),l=i[1];return[a,i[0],function(t,n){void 0===n&&(n={});var r=e.states[a],o=r&&r.on[t];if(o)return l(d({type:t,state:a,nextState:a},n)),void u(o)}]}(C,A),_=O[0],L=O[1],V=O[2];!function(e,t){l.useIsomorphicLayoutEffect((function(){"NAVIGATE"!==e&&"ESCAPE"!==e&&"SELECT_WITH_CLICK"!==e&&"OPEN_WITH_BUTTON"!==e||t.current.focus()}),[t,e])}(L.lastEventType,b);var w=E.useId(f.id),U=w?l.makeId("listbox",w):"listbox",H={autocompletePropRef:g,buttonRef:R,data:L,inputRef:b,isVisible:G(_),listboxId:U,onSelect:o||l.noop,openOnFocus:u,persistSelectionRef:m,popoverRef:x,state:_,transition:V};return t.useEffect((function(){return l.checkStyles("combobox")}),[]),n.createElement(c.DescendantProvider,{context:h,items:I,set:N},n.createElement(S.Provider,{value:H},n.createElement(v,Object.assign({"aria-haspopup":"listbox","aria-owns":U,"aria-expanded":H.isVisible},f,{"data-reach-combobox":"",ref:r,role:"combobox"}),i)))})),g=l.forwardRefWithAs((function(e,r){var o=e.as,a=void 0===o?"input":o,u=e.selectOnClick,i=void 0!==u&&u,c=e.autocomplete,s=void 0===c||c,v=e.onClick,E=e.onChange,f=e.onKeyDown,T=e.onBlur,d=e.onFocus,I=e.value,C=p(e,["as","selectOnClick","autocomplete","onClick","onChange","onKeyDown","onBlur","onFocus","value"]),A=t.useRef(I).current,N=t.useRef(!1);l.useUpdateEffect((function(){N.current=!0}),[I]);var G=t.useContext(S),b=G.data,h=b.navigationValue,x=b.value,R=b.lastEventType,g=G.inputRef,m=G.state,O=G.transition,_=G.listboxId,L=G.autocompletePropRef,V=G.openOnFocus,y=l.useForkedRef(g,r),D=t.useRef(!1),k=w(),B=U(),W=null!=I;l.useIsomorphicLayoutEffect((function(){L.current=s}),[s,L]);var P=function(e){""===e.trim()?O("CLEAR"):O(e!==A||N.current?"CHANGE":"INITIAL_CHANGE",{value:e})};!W||I===x||""===I.trim()&&""===(x||"").trim()||P(I);var F=!s||"NAVIGATING"!==m&&"INTERACTING"!==m?I||x:h||I||x;return n.createElement(a,Object.assign({"aria-activedescendant":h?String(H(h)):void 0,"aria-autocomplete":"both","aria-controls":_},C,{"data-reach-combobox-input":"",ref:y,onBlur:l.wrapEvent(T,B),onChange:l.wrapEvent(E,(function(e){W||P(e.target.value)})),onClick:l.wrapEvent(v,(function(){D.current&&(D.current=!1,g.current.select())})),onFocus:l.wrapEvent(d,(function(){i&&(D.current=!0),V&&"SELECT_WITH_CLICK"!==R&&O("FOCUS")})),onKeyDown:l.wrapEvent(f,k),value:F||""}))})),m=t.forwardRef((function(e,r){var o=e.children,a=e.portal,u=void 0===a||a,i=e.onKeyDown,c=e.onBlur,s=p(e,["children","portal","onKeyDown","onBlur"]),v=t.useContext(S),E=v.inputRef,d=v.isVisible,I=l.useForkedRef(v.popoverRef,r),C=w(),A=U(),N={"data-reach-combobox-popover":"",onKeyDown:l.wrapEvent(i,C),onBlur:l.wrapEvent(c,A),hidden:!d,tabIndex:-1,children:o};return u?n.createElement(T,Object.assign({},s,{ref:I,position:f.positionMatchWidth,targetRef:E},N)):n.createElement("div",Object.assign({ref:I},s,N))})),O=l.forwardRefWithAs((function(e,r){var o=e.persistSelection,a=void 0!==o&&o,u=e.as,i=void 0===u?"ul":u,l=p(e,["persistSelection","as"]),c=t.useContext(S),s=c.listboxId;return a&&(c.persistSelectionRef.current=!0),n.createElement(i,Object.assign({},l,{ref:r,"data-reach-combobox-list":"",role:"listbox",id:s}))})),_=t.forwardRef((function(e,r){var o=e.children,a=e.value,u=e.onClick,i=p(e,["children","value","onClick"]),s=t.useContext(S),v=s.onSelect,E=s.data.navigationValue,f=s.transition,T=t.useRef(null),d=l.useForkedRef(r,T),I=c.useDescendant({context:h,element:T.current,value:a}),C=E===a;return n.createElement(x.Provider,{value:{value:a,index:I}},n.createElement("li",Object.assign({"aria-selected":C},i,{"data-reach-combobox-option":"",ref:d,id:String(H(a)),role:"option","data-highlighted":C?"":void 0,tabIndex:-1,onClick:l.wrapEvent(u,(function(){v&&v(a),f("SELECT_WITH_CLICK",{value:a})})),children:o||n.createElement(L,null)})))}));function L(){var e=t.useContext(x).value,r=t.useContext(S).data.value,o=t.useMemo((function(){return s.findAll({searchWords:v(r||"").split(/\s+/),textToHighlight:e})}),[r,e]);return n.createElement(n.Fragment,null,o.length?o.map((function(t,r){var o=e.slice(t.start,t.end);return n.createElement("span",{key:r,"data-user-value":!!t.highlight||void 0,"data-suggested-value":!t.highlight||void 0},o)})):e)}var V=l.forwardRefWithAs((function(e,r){var o=e.as,a=void 0===o?"button":o,u=e.onClick,i=e.onKeyDown,c=p(e,["as","onClick","onKeyDown"]),s=t.useContext(S),v=s.transition,E=s.state,f=s.listboxId,T=s.isVisible,d=l.useForkedRef(s.buttonRef,r),C=w();return n.createElement(a,Object.assign({"aria-controls":f,"aria-haspopup":"listbox","aria-expanded":T},c,{"data-reach-combobox-button":"",ref:d,onClick:l.wrapEvent(u,(function(){v(E===I?"OPEN_WITH_BUTTON":"CLOSE_WITH_BUTTON")})),onKeyDown:l.wrapEvent(i,C)}))}));function w(){var e=t.useContext(S),n=e.data.navigationValue,r=e.onSelect,o=e.state,a=e.transition,u=e.autocompletePropRef,i=e.persistSelectionRef,l=t.useContext(h).descendants;return function(e){var t=l.findIndex((function(e){return e.value===n}));function c(){return l[0]}function s(){return l[l.length-1]}switch(e.key){case"ArrowDown":if(e.preventDefault(),!l||!l.length)return;if(o===I)a("NAVIGATE",{persistSelection:i.current});else{var v=t===l.length-1?u.current?null:c():l[(t+1)%l.length];a("NAVIGATE",{value:v?v.value:null})}break;case"ArrowUp":if(e.preventDefault(),!l||0===l.length)return;if(o===I)a("NAVIGATE");else{var E=0===t?u.current?null:s():-1===t?s():l[(t-1+l.length)%l.length];a("NAVIGATE",{value:E?E.value:null})}break;case"Home":case"PageUp":if(e.preventDefault(),!l||0===l.length)return;o===I?a("NAVIGATE"):a("NAVIGATE",{value:c().value});break;case"End":case"PageDown":if(e.preventDefault(),!l||0===l.length)return;o===I?a("NAVIGATE"):a("NAVIGATE",{value:s().value});break;case"Escape":o!==I&&a("ESCAPE");break;case"Enter":"NAVIGATING"===o&&null!==n&&(e.preventDefault(),r&&r(n),a("SELECT_WITH_KEYBOARD"))}}}function U(){var e=t.useContext(S),n=e.state,r=e.transition,o=e.popoverRef,a=e.inputRef,u=e.buttonRef;return function(){var e=l.getOwnerDocument(a.current)||document;requestAnimationFrame((function(){e.activeElement!==a.current&&e.activeElement!==u.current&&o.current&&(o.current.contains(e.activeElement)?"INTERACTING"!==n&&r("INTERACT"):r("BLUR"))}))}}var H=function(e){var t=0;if(0===e.length)return t;for(var n=0;n<e.length;n++)t=(t<<5)-t+e.charCodeAt(n),t&=t;return t};exports.Combobox=R,exports.ComboboxButton=V,exports.ComboboxInput=g,exports.ComboboxList=O,exports.ComboboxOption=_,exports.ComboboxOptionText=L,exports.ComboboxPopover=m; | ||
| "use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react"),n=e(t);require("prop-types");var r,o,a,u,i,l=require("@reach/utils"),c=require("@reach/descendants"),s=require("highlight-words-core"),E=e(require("escape-regexp")),v=require("@reach/auto-id"),f=require("@reach/popover"),T=e(f);function d(){return(d=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e}).apply(this,arguments)}function p(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r<a.length;r++)t.indexOf(n=a[r])>=0||(o[n]=e[n]);return o}var C="IDLE",I={initial:C,states:(i={},i.IDLE={on:(r={},r.BLUR=C,r.CLEAR=C,r.CHANGE="SUGGESTING",r.INITIAL_CHANGE=C,r.FOCUS="SUGGESTING",r.NAVIGATE="NAVIGATING",r.OPEN_WITH_BUTTON="SUGGESTING",r)},i.SUGGESTING={on:(o={},o.CHANGE="SUGGESTING",o.FOCUS="SUGGESTING",o.NAVIGATE="NAVIGATING",o.CLEAR=C,o.ESCAPE=C,o.BLUR=C,o.SELECT_WITH_CLICK=C,o.INTERACT="INTERACTING",o.CLOSE_WITH_BUTTON=C,o)},i.NAVIGATING={on:(a={},a.CHANGE="SUGGESTING",a.FOCUS="SUGGESTING",a.CLEAR=C,a.BLUR=C,a.ESCAPE=C,a.NAVIGATE="NAVIGATING",a.SELECT_WITH_CLICK=C,a.SELECT_WITH_KEYBOARD=C,a.CLOSE_WITH_BUTTON=C,a.INTERACT="INTERACTING",a)},i.INTERACTING={on:(u={},u.CHANGE="SUGGESTING",u.FOCUS="SUGGESTING",u.BLUR=C,u.ESCAPE=C,u.NAVIGATE="NAVIGATING",u.CLOSE_WITH_BUTTON=C,u.SELECT_WITH_CLICK=C,u)},i)},A=function(e,t){var n=d({},e,{lastEventType:t.type});switch(t.type){case"CHANGE":case"INITIAL_CHANGE":return d({},n,{navigationValue:null,value:t.value});case"NAVIGATE":case"OPEN_WITH_BUTTON":return d({},n,{navigationValue:b(n,t)});case"CLEAR":return d({},n,{value:"",navigationValue:null});case"BLUR":case"ESCAPE":return d({},n,{navigationValue:null});case"SELECT_WITH_CLICK":return d({},n,{value:t.value,navigationValue:null});case"SELECT_WITH_KEYBOARD":return d({},n,{value:e.navigationValue,navigationValue:null});case"CLOSE_WITH_BUTTON":return d({},n,{navigationValue:null});case"INTERACT":return n;case"FOCUS":return d({},n,{navigationValue:b(n,t)});default:return n}},N=["SUGGESTING","NAVIGATING","INTERACTING"],G=function(e){return N.includes(e)};function b(e,t){return t.value?t.value:t.persistSelection?e.value:null}var h=c.createDescendantContext("ComboboxDescendantContext"),S=l.createNamedContext("ComboboxContext",{}),x=l.createNamedContext("OptionContext",{}),R=l.forwardRefWithAs((function(e,r){var o=e.onSelect,a=e.openOnFocus,u=void 0!==a&&a,i=e.children,s=e.as,E=void 0===s?"div":s,f=p(e,["onSelect","openOnFocus","children","as"]),T=c.useDescendants(),C=T[0],N=T[1],b=t.useRef(),x=t.useRef(),R=t.useRef(),g=t.useRef(),m=t.useRef(),O=function(e,n,r){var o=t.useState(e.initial),a=o[0],u=o[1],i=t.useReducer(n,{value:"",navigationValue:null}),l=i[1];return[a,i[0],function(t,n){void 0===n&&(n={});var r=e.states[a],o=r&&r.on[t];if(o)return l(d({type:t,state:a,nextState:a},n)),void u(o)}]}(I,A),_=O[0],L=O[1],V=O[2];!function(e,t){l.useIsomorphicLayoutEffect((function(){"NAVIGATE"!==e&&"ESCAPE"!==e&&"SELECT_WITH_CLICK"!==e&&"OPEN_WITH_BUTTON"!==e||t.current.focus()}),[t,e])}(L.lastEventType,b);var w=v.useId(f.id),U=w?l.makeId("listbox",w):"listbox",H={autocompletePropRef:g,buttonRef:R,data:L,inputRef:b,isVisible:G(_),listboxId:U,onSelect:o||l.noop,openOnFocus:u,persistSelectionRef:m,popoverRef:x,state:_,transition:V};return t.useEffect((function(){return l.checkStyles("combobox")}),[]),n.createElement(c.DescendantProvider,{context:h,items:C,set:N},n.createElement(S.Provider,{value:H},n.createElement(E,Object.assign({"aria-haspopup":"listbox","aria-owns":U,"aria-expanded":H.isVisible},f,{"data-reach-combobox":"",ref:r,role:"combobox"}),i)))})),g=l.forwardRefWithAs((function(e,r){var o=e.as,a=void 0===o?"input":o,u=e.selectOnClick,i=void 0!==u&&u,c=e.autocomplete,s=void 0===c||c,E=e.onClick,v=e.onChange,f=e.onKeyDown,T=e.onBlur,d=e.onFocus,C=e.value,I=p(e,["as","selectOnClick","autocomplete","onClick","onChange","onKeyDown","onBlur","onFocus","value"]),A=t.useRef(C).current,N=t.useRef(!1);l.useUpdateEffect((function(){N.current=!0}),[C]);var G=t.useContext(S),b=G.data,h=b.navigationValue,x=b.value,R=b.lastEventType,g=G.inputRef,m=G.state,O=G.transition,_=G.listboxId,L=G.autocompletePropRef,V=G.openOnFocus,y=l.useForkedRef(g,r),D=t.useRef(!1),k=w(),B=U(),W=null!=C;l.useIsomorphicLayoutEffect((function(){L.current=s}),[s,L]);var P=t.useCallback((function(e){""===e.trim()?O("CLEAR"):O(e!==A||N.current?"CHANGE":"INITIAL_CHANGE",{value:e})}),[A,O]);t.useEffect((function(){!W||C===x||""===C.trim()&&""===(x||"").trim()||P(C)}),[C,P,W,x]);var F=!s||"NAVIGATING"!==m&&"INTERACTING"!==m?C||x:h||C||x;return n.createElement(a,Object.assign({"aria-activedescendant":h?String(H(h)):void 0,"aria-autocomplete":"both","aria-controls":_},I,{"data-reach-combobox-input":"",ref:y,onBlur:l.wrapEvent(T,B),onChange:l.wrapEvent(v,(function(e){W||P(e.target.value)})),onClick:l.wrapEvent(E,(function(){D.current&&(D.current=!1,g.current.select())})),onFocus:l.wrapEvent(d,(function(){i&&(D.current=!0),V&&"SELECT_WITH_CLICK"!==R&&O("FOCUS")})),onKeyDown:l.wrapEvent(f,k),value:F||""}))})),m=t.forwardRef((function(e,r){var o=e.children,a=e.portal,u=void 0===a||a,i=e.onKeyDown,c=e.onBlur,s=p(e,["children","portal","onKeyDown","onBlur"]),E=t.useContext(S),v=E.inputRef,d=E.isVisible,C=l.useForkedRef(E.popoverRef,r),I=w(),A=U(),N={"data-reach-combobox-popover":"",onKeyDown:l.wrapEvent(i,I),onBlur:l.wrapEvent(c,A),hidden:!d,tabIndex:-1,children:o};return u?n.createElement(T,Object.assign({},s,{ref:C,position:f.positionMatchWidth,targetRef:v},N)):n.createElement("div",Object.assign({ref:C},s,N))})),O=l.forwardRefWithAs((function(e,r){var o=e.persistSelection,a=void 0!==o&&o,u=e.as,i=void 0===u?"ul":u,l=p(e,["persistSelection","as"]),c=t.useContext(S),s=c.listboxId;return a&&(c.persistSelectionRef.current=!0),n.createElement(i,Object.assign({},l,{ref:r,"data-reach-combobox-list":"",role:"listbox",id:s}))})),_=t.forwardRef((function(e,r){var o=e.children,a=e.value,u=e.onClick,i=p(e,["children","value","onClick"]),s=t.useContext(S),E=s.onSelect,v=s.data.navigationValue,f=s.transition,T=t.useRef(null),d=l.useForkedRef(r,T),C=c.useDescendant({context:h,element:T.current,value:a}),I=v===a;return n.createElement(x.Provider,{value:{value:a,index:C}},n.createElement("li",Object.assign({"aria-selected":I},i,{"data-reach-combobox-option":"",ref:d,id:String(H(a)),role:"option","data-highlighted":I?"":void 0,tabIndex:-1,onClick:l.wrapEvent(u,(function(){E&&E(a),f("SELECT_WITH_CLICK",{value:a})})),children:o||n.createElement(L,null)})))}));function L(){var e=t.useContext(x).value,r=t.useContext(S).data.value,o=t.useMemo((function(){return s.findAll({searchWords:E(r||"").split(/\s+/),textToHighlight:e})}),[r,e]);return n.createElement(n.Fragment,null,o.length?o.map((function(t,r){var o=e.slice(t.start,t.end);return n.createElement("span",{key:r,"data-user-value":!!t.highlight||void 0,"data-suggested-value":!t.highlight||void 0},o)})):e)}var V=l.forwardRefWithAs((function(e,r){var o=e.as,a=void 0===o?"button":o,u=e.onClick,i=e.onKeyDown,c=p(e,["as","onClick","onKeyDown"]),s=t.useContext(S),E=s.transition,v=s.state,f=s.listboxId,T=s.isVisible,d=l.useForkedRef(s.buttonRef,r),I=w();return n.createElement(a,Object.assign({"aria-controls":f,"aria-haspopup":"listbox","aria-expanded":T},c,{"data-reach-combobox-button":"",ref:d,onClick:l.wrapEvent(u,(function(){E(v===C?"OPEN_WITH_BUTTON":"CLOSE_WITH_BUTTON")})),onKeyDown:l.wrapEvent(i,I)}))}));function w(){var e=t.useContext(S),n=e.data.navigationValue,r=e.onSelect,o=e.state,a=e.transition,u=e.autocompletePropRef,i=e.persistSelectionRef,l=t.useContext(h).descendants;return function(e){var t=l.findIndex((function(e){return e.value===n}));function c(){return l[0]}function s(){return l[l.length-1]}switch(e.key){case"ArrowDown":if(e.preventDefault(),!l||!l.length)return;if(o===C)a("NAVIGATE",{persistSelection:i.current});else{var E=t===l.length-1?u.current?null:c():l[(t+1)%l.length];a("NAVIGATE",{value:E?E.value:null})}break;case"ArrowUp":if(e.preventDefault(),!l||0===l.length)return;if(o===C)a("NAVIGATE");else{var v=0===t?u.current?null:s():-1===t?s():l[(t-1+l.length)%l.length];a("NAVIGATE",{value:v?v.value:null})}break;case"Home":case"PageUp":if(e.preventDefault(),!l||0===l.length)return;o===C?a("NAVIGATE"):a("NAVIGATE",{value:c().value});break;case"End":case"PageDown":if(e.preventDefault(),!l||0===l.length)return;o===C?a("NAVIGATE"):a("NAVIGATE",{value:s().value});break;case"Escape":o!==C&&a("ESCAPE");break;case"Enter":"NAVIGATING"===o&&null!==n&&(e.preventDefault(),r&&r(n),a("SELECT_WITH_KEYBOARD"))}}}function U(){var e=t.useContext(S),n=e.state,r=e.transition,o=e.popoverRef,a=e.inputRef,u=e.buttonRef;return function(){var e=l.getOwnerDocument(a.current)||document;requestAnimationFrame((function(){e.activeElement!==a.current&&e.activeElement!==u.current&&o.current&&(o.current.contains(e.activeElement)?"INTERACTING"!==n&&r("INTERACT"):r("BLUR"))}))}}var H=function(e){var t=0;if(0===e.length)return t;for(var n=0;n<e.length;n++)t=(t<<5)-t+e.charCodeAt(n),t&=t;return t};exports.Combobox=R,exports.ComboboxButton=V,exports.ComboboxInput=g,exports.ComboboxList=O,exports.ComboboxOption=_,exports.ComboboxOptionText=L,exports.ComboboxPopover=m; | ||
| //# sourceMappingURL=combobox.cjs.production.min.js.map |
@@ -1,2 +0,2 @@ | ||
| import React, { useRef, useEffect, useContext, forwardRef, useMemo, useState, useReducer } from 'react'; | ||
| import React, { useRef, useEffect, useContext, useCallback, forwardRef, useMemo, useState, useReducer } from 'react'; | ||
| import PropTypes from 'prop-types'; | ||
@@ -180,14 +180,8 @@ import { forwardRefWithAs, makeId, checkStyles, useUpdateEffect, useForkedRef, getOwnerDocument, useIsomorphicLayoutEffect, wrapEvent, createNamedContext, noop } from '@reach/utils'; | ||
| var ComboboxDescendantContext = | ||
| /*#__PURE__*/ | ||
| createDescendantContext("ComboboxDescendantContext"); | ||
| var ComboboxContext = | ||
| /*#__PURE__*/ | ||
| createNamedContext("ComboboxContext", {}); // Allows us to put the option's value on context so that ComboboxOptionText | ||
| var ComboboxDescendantContext = /*#__PURE__*/createDescendantContext("ComboboxDescendantContext"); | ||
| var ComboboxContext = /*#__PURE__*/createNamedContext("ComboboxContext", {}); // Allows us to put the option's value on context so that ComboboxOptionText | ||
| // can work it's highlight text magic no matter what else is rendered around | ||
| // it. | ||
| var OptionContext = | ||
| /*#__PURE__*/ | ||
| createNamedContext("OptionContext", {}); //////////////////////////////////////////////////////////////////////////////// | ||
| var OptionContext = /*#__PURE__*/createNamedContext("OptionContext", {}); //////////////////////////////////////////////////////////////////////////////// | ||
@@ -200,5 +194,3 @@ /** | ||
| var Combobox = | ||
| /*#__PURE__*/ | ||
| forwardRefWithAs(function Combobox(_ref, forwardedRef) { | ||
| var Combobox = /*#__PURE__*/forwardRefWithAs(function Combobox(_ref, forwardedRef) { | ||
| var onSelect = _ref.onSelect, | ||
@@ -296,5 +288,3 @@ _ref$openOnFocus = _ref.openOnFocus, | ||
| var ComboboxInput = | ||
| /*#__PURE__*/ | ||
| forwardRefWithAs(function ComboboxInput(_ref2, forwardedRef) { | ||
| var ComboboxInput = /*#__PURE__*/forwardRefWithAs(function ComboboxInput(_ref2, forwardedRef) { | ||
| var _ref2$as = _ref2.as, | ||
@@ -348,4 +338,3 @@ Comp = _ref2$as === void 0 ? "input" : _ref2$as, | ||
| }, [autocomplete, autocompletePropRef]); | ||
| var handleValueChange = function handleValueChange(value) { | ||
| var handleValueChange = useCallback(function (value) { | ||
| if (value.trim() === "") { | ||
@@ -362,15 +351,15 @@ transition(CLEAR); | ||
| } | ||
| }; // If they are controlling the value we still need to do our transitions, so | ||
| // we have this derived state to emulate onChange of the input as we receive | ||
| // new `value`s ...[*] | ||
| }, [initialControlledValue, transition]); | ||
| useEffect(function () { | ||
| // If they are controlling the value we still need to do our transitions, | ||
| // so we have this derived state to emulate onChange of the input as we | ||
| // receive new `value`s ...[*] | ||
| if (isControlled && controlledValue !== value && ( // https://github.com/reach/reach-ui/issues/481 | ||
| controlledValue.trim() === "" ? (value || "").trim() !== "" : true)) { | ||
| handleValueChange(controlledValue); | ||
| } | ||
| }, [controlledValue, handleValueChange, isControlled, value]); // [*]... and when controlled, we don't trigger handleValueChange as the | ||
| // user types, instead the developer controls it with the normal input | ||
| // onChange prop | ||
| if (isControlled && controlledValue !== value && ( // https://github.com/reach/reach-ui/issues/481 | ||
| controlledValue.trim() === "" ? (value || "").trim() !== "" : true)) { | ||
| handleValueChange(controlledValue); | ||
| } // [*]... and when controlled, we don't trigger handleValueChange as the user | ||
| // types, instead the developer controls it with the normal input onChange | ||
| // prop | ||
| function handleChange(event) { | ||
@@ -437,5 +426,3 @@ var value = event.target.value; | ||
| var ComboboxPopover = | ||
| /*#__PURE__*/ | ||
| forwardRef(function ComboboxPopover(_ref3, forwardedRef) { | ||
| var ComboboxPopover = /*#__PURE__*/forwardRef(function ComboboxPopover(_ref3, forwardedRef) { | ||
| var children = _ref3.children, | ||
@@ -493,5 +480,3 @@ _ref3$portal = _ref3.portal, | ||
| var ComboboxList = | ||
| /*#__PURE__*/ | ||
| forwardRefWithAs(function ComboboxList(_ref4, forwardedRef) { | ||
| var ComboboxList = /*#__PURE__*/forwardRefWithAs(function ComboboxList(_ref4, forwardedRef) { | ||
| var _ref4$persistSelectio = _ref4.persistSelection, | ||
@@ -532,5 +517,3 @@ persistSelection = _ref4$persistSelectio === void 0 ? false : _ref4$persistSelectio, | ||
| var ComboboxOption = | ||
| /*#__PURE__*/ | ||
| forwardRef(function ComboboxOption(_ref5, forwardedRef) { | ||
| var ComboboxOption = /*#__PURE__*/forwardRef(function ComboboxOption(_ref5, forwardedRef) { | ||
| var children = _ref5.children, | ||
@@ -639,5 +622,3 @@ value = _ref5.value, | ||
| var ComboboxButton = | ||
| /*#__PURE__*/ | ||
| forwardRefWithAs(function ComboboxButton(_ref6, forwardedRef) { | ||
| var ComboboxButton = /*#__PURE__*/forwardRefWithAs(function ComboboxButton(_ref6, forwardedRef) { | ||
| var _ref6$as = _ref6.as, | ||
@@ -644,0 +625,0 @@ Comp = _ref6$as === void 0 ? "button" : _ref6$as, |
@@ -103,10 +103,2 @@ /** | ||
| export declare const ComboboxPopover: React.ForwardRefExoticComponent<ComboboxPopoverProps & Partial<PopoverProps> & React.RefAttributes<HTMLDivElement>>; | ||
| export declare type __ComboboxPopoverProps = { | ||
| targetRef?: any; | ||
| positionMatchWidth?: { | ||
| width: string; | ||
| left: number; | ||
| top: string; | ||
| }; | ||
| }; | ||
| /** | ||
@@ -113,0 +105,0 @@ * @see Docs https://reacttraining.com/reach-ui/combobox#comboboxpopover-props |
| { | ||
| "name": "@reach/combobox", | ||
| "version": "0.8.5", | ||
| "version": "0.8.6", | ||
| "description": "Accessible React Combobox (Autocomplete).", | ||
@@ -18,7 +18,7 @@ "author": "React Training <hello@reacttraining.com>", | ||
| "dependencies": { | ||
| "@reach/auto-id": "^0.8.5", | ||
| "@reach/descendants": "^0.8.5", | ||
| "@reach/popover": "^0.8.5", | ||
| "@reach/portal": "^0.8.5", | ||
| "@reach/utils": "^0.8.5", | ||
| "@reach/auto-id": "^0.8.6", | ||
| "@reach/descendants": "^0.8.6", | ||
| "@reach/popover": "^0.8.6", | ||
| "@reach/portal": "^0.8.6", | ||
| "@reach/utils": "^0.8.6", | ||
| "escape-regexp": "0.0.1", | ||
@@ -41,3 +41,3 @@ "highlight-words-core": "1.2.2", | ||
| ], | ||
| "gitHead": "ac419cf63d0827016ca448bf95482bcd4c5f879e" | ||
| "gitHead": "0c71a018a11055b17815f0fb127cdcd981cd760e" | ||
| } |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by0.3%
241388
Worsened metrics
- Lines of code
- decreased by-1.92%
1892
Dependency changes
Updated@reach/auto-id@^0.8.6
Updated@reach/descendants@^0.8.6
Updated@reach/popover@^0.8.6
Updated@reach/portal@^0.8.6
Updated@reach/utils@^0.8.6