@transferwise/components 40.9.1-beta-ad72bda3df.0 → 40.9.1-beta-85fea4b90e.2
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.
- package/build/es/no-polyfill/common/focusBoundary/FocusBoundary.js +1 -1
- package/build/es/no-polyfill/common/panel/Panel.js +7 -7
- package/build/es/no-polyfill/select/Select.js +13 -7
- package/build/es/no-polyfill/select/index.js +1 -1
- package/build/es/no-polyfill/typeahead/typeaheadOption/TypeaheadOption.js +1 -1
- package/build/es/polyfill/common/focusBoundary/FocusBoundary.js +1 -1
- package/build/es/polyfill/common/panel/Panel.js +7 -7
- package/build/es/polyfill/select/Select.js +13 -7
- package/build/es/polyfill/select/index.js +1 -1
- package/build/es/polyfill/typeahead/typeaheadOption/TypeaheadOption.js +1 -1
- package/build/main.css +1 -1
- package/build/styles/drawer/Drawer.css +1 -1
- package/build/styles/main.css +1 -1
- package/build/styles/modal/Modal.css +1 -1
- package/build/styles/moneyInput/MoneyInput.css +1 -1
- package/build/styles/select/Select.css +1 -1
- package/build/styles/typeahead/typeaheadOption/TypeaheadOption.css +1 -1
- package/build/types/common/panel/Panel.d.ts +2 -3
- package/build/types/index.d.ts +0 -1
- package/build/types/select/Select.d.ts +93 -67
- package/build/types/select/index.d.ts +2 -2
- package/build/types/select/option/index.d.ts +0 -1
- package/build/umd/no-polyfill/main.js +1 -1
- package/build/umd/polyfill/main.js +1 -1
- package/package.json +3 -3
- package/scripts/generate-type-declarations.js +1 -0
- package/build/es/no-polyfill/select/Select.story.js +0 -1
- package/build/es/polyfill/select/Select.story.js +0 -1
- package/build/types/select/Select.story.d.ts +0 -11
|
@@ -1 +1 @@
|
|
|
1
|
-
import{isKey,isUndefined}from"@transferwise/neptune-validation";import PropTypes from"prop-types";import{useEffect,useRef}from"react";import{useConditionalListener}from"../hooks";import{Key}from"../key";import{getFocusableElements,resetFocus}from"./utils";import{jsx as _jsx}from"react/jsx-runtime";var TAB=Key.TAB,FocusBoundary=function(a){var b=a.children,c=useRef(),d=isUndefined(document)?void 0:document,e={};return useEffect(function(){c.current.focus(),e=getFocusableElements(c.current)},[]),useConditionalListener({eventType:"keydown",callback:function callback(a){isKey({keyType:TAB,event:a})&&resetFocus({event:a,focusableEls:e})},attachListener:!0,parent:d}),/*#__PURE__*/_jsx("span",{ref:c,tabIndex:-1,className:"np-focus-boundary outline-none",children:b})};FocusBoundary.propTypes={children:PropTypes.node};export default FocusBoundary;
|
|
1
|
+
import{isKey,isUndefined}from"@transferwise/neptune-validation";import PropTypes from"prop-types";import{useEffect,useRef}from"react";import{useConditionalListener}from"../hooks";import{Key}from"../key";import{getFocusableElements,resetFocus}from"./utils";import{jsx as _jsx}from"react/jsx-runtime";var TAB=Key.TAB,FocusBoundary=function(a){var b=a.children,c=useRef(),d=isUndefined(document)?void 0:document,e={};return useEffect(function(){c.current.focus(),e=getFocusableElements(c.current)},[]),useConditionalListener({eventType:"keydown",callback:function callback(a){return isKey({keyType:TAB,event:a})&&resetFocus({event:a,focusableEls:e})},attachListener:!0,parent:d}),/*#__PURE__*/_jsx("span",{ref:c,tabIndex:-1,className:"np-focus-boundary outline-none",children:b})};FocusBoundary.propTypes={children:PropTypes.node};export default FocusBoundary;
|
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import _defineProperty from"@babel/runtime/helpers/defineProperty";var _fallbackPlacements;function ownKeys(a,b){var c=Object.keys(a);if(Object.getOwnPropertySymbols){var d=Object.getOwnPropertySymbols(a);b&&(d=d.filter(function(b){return Object.getOwnPropertyDescriptor(a,b).enumerable})),c.push.apply(c,d)}return c}function _objectSpread(a){for(var b,c=1;c<arguments.length;c++)b=null==arguments[c]?{}:arguments[c],c%2?ownKeys(Object(b),!0).forEach(function(c){_defineProperty(a,c,b[c])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(b)):ownKeys(Object(b)).forEach(function(c){Object.defineProperty(a,c,Object.getOwnPropertyDescriptor(b,c))});return a}import classnames from"classnames";import{useState,forwardRef,useEffect}from"react";import{usePopper}from"react-popper";import{Position}from"..";import Dimmer from"../../dimmer";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";var POPOVER_OFFSET=[0,16],fallbackPlacements=(_fallbackPlacements={},_defineProperty(_fallbackPlacements,Position.TOP,[Position.BOTTOM,Position.RIGHT,Position.LEFT]),_defineProperty(_fallbackPlacements,Position.BOTTOM,[Position.TOP,Position.RIGHT,Position.LEFT]),_defineProperty(_fallbackPlacements,Position.LEFT,[Position.RIGHT,Position.TOP,Position.BOTTOM]),_defineProperty(_fallbackPlacements,Position.RIGHT,[Position.LEFT,Position.TOP,Position.BOTTOM]),_fallbackPlacements),Panel=/*#__PURE__*/forwardRef(function(a,b){var c=a.arrow,d=void 0!==c&&c,e=a.children,f=a.
|
|
2
|
-
}}}),
|
|
1
|
+
import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";import _defineProperty from"@babel/runtime/helpers/defineProperty";var _fallbackPlacements,_excluded=["arrow","children","open","onClose","position","anchorRef"];function ownKeys(a,b){var c=Object.keys(a);if(Object.getOwnPropertySymbols){var d=Object.getOwnPropertySymbols(a);b&&(d=d.filter(function(b){return Object.getOwnPropertyDescriptor(a,b).enumerable})),c.push.apply(c,d)}return c}function _objectSpread(a){for(var b,c=1;c<arguments.length;c++)b=null==arguments[c]?{}:arguments[c],c%2?ownKeys(Object(b),!0).forEach(function(c){_defineProperty(a,c,b[c])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(b)):ownKeys(Object(b)).forEach(function(c){Object.defineProperty(a,c,Object.getOwnPropertyDescriptor(b,c))});return a}import classnames from"classnames";import{useState,forwardRef,useEffect}from"react";import{usePopper}from"react-popper";import{Position}from"..";import Dimmer from"../../dimmer";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";var POPOVER_OFFSET=[0,16],fallbackPlacements=(_fallbackPlacements={},_defineProperty(_fallbackPlacements,Position.TOP,[Position.BOTTOM,Position.RIGHT,Position.LEFT]),_defineProperty(_fallbackPlacements,Position.BOTTOM,[Position.TOP,Position.RIGHT,Position.LEFT]),_defineProperty(_fallbackPlacements,Position.LEFT,[Position.RIGHT,Position.TOP,Position.BOTTOM]),_defineProperty(_fallbackPlacements,Position.RIGHT,[Position.LEFT,Position.TOP,Position.BOTTOM]),_fallbackPlacements),Panel=/*#__PURE__*/forwardRef(function(a,b){var c=a.arrow,d=void 0!==c&&c,e=a.children,f=a.open,g=void 0!==f&&f,h=a.onClose,i=a.position,j=void 0===i?Position.TOP:i,k=a.anchorRef,l=_objectWithoutProperties(a,_excluded),m=useState(null),n=_slicedToArray(m,2),o=n[0],p=n[1],q=useState(null),r=_slicedToArray(q,2),s=r[0],t=r[1],u=[];d&&(u.push({name:"arrow",options:{element:o,options:{padding:8// 8px from the edges of the popper
|
|
2
|
+
}}}),u.push({name:"offset",options:{offset:POPOVER_OFFSET}})),fallbackPlacements[j]&&u.push({name:"flip",options:{fallbackPlacements:fallbackPlacements[j]}});var v=usePopper(k.current,s,{placement:j,modifiers:u}),w=v.styles,x=v.attributes,y=v.forceUpdate;// If the trigger is not visible when the position is calculated, it will be incorrect. Because this can happen repeatedly (on resize for example),
|
|
3
3
|
// it is most simple just to always position before opening
|
|
4
|
-
return useEffect(function(){
|
|
5
|
-
ref:
|
|
6
|
-
,style:_objectSpread({},
|
|
7
|
-
ref:
|
|
8
|
-
,style:
|
|
4
|
+
return useEffect(function(){g&&y&&y()},[g]),/*#__PURE__*/_jsx(Dimmer,{open:g,transparent:!0,fadeContentOnEnter:!0,fadeContentOnExit:!0,onClose:h,children:/*#__PURE__*/_jsx("div",_objectSpread(_objectSpread(_objectSpread({// @ts-expect-error Popper requirement
|
|
5
|
+
ref:t// eslint-disable-next-line react/forbid-dom-props
|
|
6
|
+
,style:_objectSpread({},w.popper)},x.popper),{},{className:classnames("np-panel",{"np-panel--open":g},l.className)},l),{},{children:/*#__PURE__*/_jsxs("div",{ref:b,className:classnames("np-panel__content"),children:[e,d&&/*#__PURE__*/_jsx("div",{// @ts-expect-error Popper requirement
|
|
7
|
+
ref:p,className:classnames("np-panel__arrow")// eslint-disable-next-line react/forbid-dom-props
|
|
8
|
+
,style:w.arrow})]})}))})});// By default the flip positioning explores only the opposite alternative. So if left is passed and there's no enough space
|
|
9
9
|
// the right one gets chosen. If there's no space on both sides popover goes back to the initially chosen one left.
|
|
10
10
|
// This mapping forces popover to try the four available positions before going back to the initial chosen one.
|
|
11
11
|
export default Panel;
|
|
@@ -1,10 +1,16 @@
|
|
|
1
|
-
import _defineProperty from"@babel/runtime/helpers/defineProperty";import _slicedToArray from"@babel/runtime/helpers/slicedToArray";function ownKeys(a,b){var c=Object.keys(a);if(Object.getOwnPropertySymbols){var d=Object.getOwnPropertySymbols(a);b&&(d=d.filter(function(b){return Object.getOwnPropertyDescriptor(a,b).enumerable})),c.push.apply(c,d)}return c}function _objectSpread(a){for(var b,c=1;c<arguments.length;c++)b=null==arguments[c]?{}:arguments[c],c%2?ownKeys(Object(b),!0).forEach(function(c){_defineProperty(a,c,b[c])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(b)):ownKeys(Object(b)).forEach(function(c){Object.defineProperty(a,c,Object.getOwnPropertyDescriptor(b,c))});return a}import classNames from"classnames";import{useState,useEffect,useRef}from"react";import{useIntl}from"react-intl";import Button from"../button";import Chevron from"../chevron";import{Position,Size}from"../common";import BottomSheet from"../common/bottomSheet";import{stopPropagation}from"../common/domHelpers";import{useLayout}from"../common/hooks";import KeyCodes from"../common/keyCodes";import Panel from"../common/panel";import Drawer from"../drawer";import messages from"./Select.messages";import Option from"./option";import SearchBox from"./searchBox";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";var DEFAULT_SEARCH_VALUE="",DEFAULT_OPTIONS_PAGE_SIZE=100,includesString=function(a,b){return a.toLowerCase().includes(b.toLowerCase())};function defaultFilterFunction(a,b){if(isPlaceholderOption(a))return!0;var c=a
|
|
2
|
-
* Type of options that can be selected (and searched)
|
|
3
|
-
* currently it's data options {@link SelectDataOptionType}
|
|
4
|
-
* and placeholder option {@link SelectPlaceholderOptionType}
|
|
5
|
-
*/function isActionableOption(a){return isPlaceholderOption(a)||null!==a&&"value"in a}function isHeaderOption(a){return null!==a&&"header"in a}function isSparatorOption(a){return null!==a&&"separator"in a}/**
|
|
1
|
+
import _defineProperty from"@babel/runtime/helpers/defineProperty";import _slicedToArray from"@babel/runtime/helpers/slicedToArray";function ownKeys(a,b){var c=Object.keys(a);if(Object.getOwnPropertySymbols){var d=Object.getOwnPropertySymbols(a);b&&(d=d.filter(function(b){return Object.getOwnPropertyDescriptor(a,b).enumerable})),c.push.apply(c,d)}return c}function _objectSpread(a){for(var b,c=1;c<arguments.length;c++)b=null==arguments[c]?{}:arguments[c],c%2?ownKeys(Object(b),!0).forEach(function(c){_defineProperty(a,c,b[c])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(b)):ownKeys(Object(b)).forEach(function(c){Object.defineProperty(a,c,Object.getOwnPropertyDescriptor(b,c))});return a}import classNames from"classnames";import PropTypes from"prop-types";import{useState,useEffect,useRef}from"react";import{useIntl}from"react-intl";import Button from"../button";import Chevron from"../chevron";import{Position,Size}from"../common";import BottomSheet from"../common/bottomSheet";import{stopPropagation}from"../common/domHelpers";import{useLayout}from"../common/hooks";import KeyCodes from"../common/keyCodes";import Panel from"../common/panel";import Drawer from"../drawer";import messages from"./Select.messages";import Option from"./option";import SearchBox from"./searchBox";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";var DEFAULT_SEARCH_VALUE="",DEFAULT_OPTIONS_PAGE_SIZE=100,includesString=function(a,b){return a.toLowerCase().includes(b.toLowerCase())};function defaultFilterFunction(a,b){if(isPlaceholderOption(a))return!0;var c=a.label,d=a.note,e=a.secondary,f=a.currency,g=a.searchStrings;return!!c&&includesString(c,b)||!!d&&includesString(d,b)||!!e&&includesString(e,b)||!!f&&includesString(f,b)||!!g&&g.some(function(a){return includesString(a,b)})}function isActionableOption(a){return isPlaceholderOption(a)||null!==a&&"value"in a}function isHeaderOption(a){return null!==a&&"header"in a}function isSparatorOption(a){return null!==a&&"separator"in a}/**
|
|
6
2
|
* No option or placeholder option is selected
|
|
7
|
-
*/var DEFAULT_SELECTED_OPTION=null;function isPlaceholderOption(a){return a===DEFAULT_SELECTED_OPTION||"placeholder"in a}export default function Select(a){function b(){if(null!==ba){var a=na().filter(isActionableOption);e(a[ba])}}function c(a){var b=na().filter(isActionableOption),c=b.reduce(function(a,b,c){return null===a?k(A,b)?c:null:a},null),d=null===da.current||void 0===da.current?-1:da.current,e=d;null===d&&null===c&&ca(0),null===d&&null!==c&&(e=c);var f=e+a,g=Math.max(Math.min(0,b.length-1),f);ca(g)}function d(a){return function(b){stopPropagation(b),e(a)}}function e(a){D(isPlaceholderOption(a)?DEFAULT_SELECTED_OPTION:a),pa()}
|
|
3
|
+
*/var DEFAULT_SELECTED_OPTION=null;function isPlaceholderOption(a){return a===DEFAULT_SELECTED_OPTION||"placeholder"in a}export default function Select(a){function b(){if(null!==ba){var a=na().filter(isActionableOption);e(a[ba])}}function c(a){var b=na().filter(isActionableOption),c=b.reduce(function(a,b,c){return null===a?k(A,b)?c:null:a},null),d=null===da.current||void 0===da.current?-1:da.current,e=d;null===d&&null===c&&ca(0),null===d&&null!==c&&(e=c);var f=e+a,g=Math.max(Math.min(0,b.length-1),f);ca(g)}function d(a){return function(b){stopPropagation(b),e(a)}}function e(a){D(isPlaceholderOption(a)?DEFAULT_SELECTED_OPTION:a),pa()}// eslint-disable-next-line react/prop-types
|
|
4
|
+
function f(a){var b=a.className,c=classNames(T("np-dropdown-menu"),_defineProperty({},T("np-dropdown-menu-".concat(v)),!ma),T(b));return/*#__PURE__*/_jsxs("ul",{className:c,"aria-labelledby":o,children:[!q&&!ka&&null!==n&&/*#__PURE__*/_jsx(h,{}),ka&&/*#__PURE__*/_jsx(SearchBox,{ref:ia,classNames:N,value:J||Z,placeholder:L||S(messages.searchPlaceholder),onChange:oa,onClick:stopPropagation}),na().slice(0,ga).map(qa),ga<na().length&&/*#__PURE__*/_jsx(g,{})]})}function g(){function a(a){stopPropagation(a),ha(ga+DEFAULT_OPTIONS_PAGE_SIZE)}return/*#__PURE__*/ (/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */_jsx("li",{className:classNames(T("clickable"),T("border-bottom"),T("show-more")),onClick:a,onKeyPress:a,children:/*#__PURE__*/_jsx("a",{children:"..."})}))}function h(){var a={placeholder:n};return/*#__PURE__*/ (/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */_jsx("li",{className:classNames(T("clickable"),T("border-bottom")),onClick:d(a),onKeyPress:d(a),children:/*#__PURE__*/_jsx("a",{children:n})}))}// eslint-disable-next-line react/prop-types
|
|
5
|
+
function i(a){var b=a.key;return/*#__PURE__*/_jsx("li",{className:T("np-separator")},b)}// eslint-disable-next-line react/prop-types
|
|
6
|
+
function j(a){var b=a.key,c=a.children;return/*#__PURE__*/_jsx("li",{className:T("np-dropdown-header"),onClick:stopPropagation,onKeyPress:stopPropagation,children:c},b)}function k(a,b){return isPlaceholderOption(a)&&isPlaceholderOption(b)||(null===a||void 0===a?void 0:a.value)===(null===b||void 0===b?void 0:b.value)}function l(a){return na().reduce(function(b,c,d){return d<a&&isActionableOption(c)?b+1:b},0)}var m=a.placeholder,n=void 0===m?DEFAULT_SELECTED_OPTION:m,o=a.id,p=a.required,q=void 0!==p&&p,r=a.disabled,t=a.inverse,u=a.dropdownWidth,v=void 0===u?Size.MEDIUM:u,w=a.size,x=void 0===w?Size.MEDIUM:w,y=a.block,z=a.selected,A=void 0===z?DEFAULT_SELECTED_OPTION:z,B=a.search,C=void 0!==B&&B,D=a.onChange,E=a.onFocus,F=a.onBlur,G=a.options,H=a.onSearchChange,I=a.searchValue,J=void 0===I?DEFAULT_SEARCH_VALUE:I,K=a.searchPlaceholder,L=void 0===K?void 0:K,M=a.classNames,N=void 0===M?{}:M,O=a.dropdownUp,P=a.buttonProps,Q=void 0===P?{}:P,R=useIntl(),S=R.formatMessage,T=function(a){return N[a]||a},s=useState(!1),U=_slicedToArray(s,2),V=U[0],W=U[1],X=useState(DEFAULT_SEARCH_VALUE),Y=_slicedToArray(X,2),Z=Y[0],$=Y[1],_=useState(null),aa=_slicedToArray(_,2),ba=aa[0],ca=aa[1],da=useRef(),ea=useState(DEFAULT_OPTIONS_PAGE_SIZE),fa=_slicedToArray(ea,2),ga=fa[0],ha=fa[1],ia=useRef(null),ja=useRef(null),ka=!!H||!!C,la=useLayout(),ma=la.isMobile,na=function(){return C&&Z?G.filter(function(a){return isActionableOption(a)&&!isPlaceholderOption(a)}).filter(function(a){return"function"==typeof C?C(a,Z):defaultFilterFunction(a,Z)}):G},oa=function(a){ha(DEFAULT_OPTIONS_PAGE_SIZE),$(a.target.value),H&&H(a.target.value)};useEffect(function(){if(da.current=ba,V){var a,b=!!(null!==(a=window)&&void 0!==a&&a.matchMedia("(pointer: coarse)").matches);b||!ka||!ia.current||ia.current.focus()}},[V,Z,ka,ba]);var pa=function(){W(!1),ca(null)},qa=function(a,b){var c,e=a;if(isSparatorOption(e)&&null!==e&&void 0!==e&&e.separator)return/*#__PURE__*/_jsx(i,{},b);var f=a;if(isHeaderOption(f)&&f.header)return/*#__PURE__*/_jsx(j,{children:f.header},b);var g=k(A,a),h=a,m=!h.disabled&&ba===l(b),n=classNames(T("np-dropdown-item"),h.disabled?[T("disabled")]:T("clickable"),(c={},_defineProperty(c,T("active"),g),_defineProperty(c,T("np-dropdown-item--focused"),m),c)),o=h.disabled?stopPropagation:d(h);return/*#__PURE__*/ (/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */_jsx("li",{className:n,onClick:o,onKeyPress:o,children:/*#__PURE__*/_jsx("a",{disabled:h.disabled,children:/*#__PURE__*/_jsx(Option,_objectSpread(_objectSpread({},h),{},{classNames:N}))})},b))},ra=!!G.length;return V&&(""!==J||""!==Z)&&(ra&&null===ba&&ca(0),!ra&&null!==ba&&ca(null)),/*#__PURE__*/_jsxs("div",{// eslint-disable-line jsx-a11y/no-static-element-interactions
|
|
8
7
|
ref:ja,className:classNames(T("np-select")),onKeyDown:function handleKeyDown(a){switch(a.keyCode){case KeyCodes.UP:case KeyCodes.DOWN:V?c(a.keyCode===KeyCodes.UP?-1:1):W(!0),stopPropagation(a);break;case KeyCodes.SPACE:a.target!==ia.current&&(V?b():W(!0),stopPropagation(a));break;case KeyCodes.ENTER:V?b():W(!0),stopPropagation(a);break;case KeyCodes.ESCAPE:pa(),stopPropagation(a);break;case KeyCodes.TAB:V&&b();break;default:}},onTouchMove:function handleTouchStart(a){a.currentTarget===a.target&&V&&pa()},onFocus:function handleOnFocus(a){E&&E(a)},onBlur:function handleOnBlur(a){var b=a.nativeEvent;if(b){var c=b.relatedTarget,d=a.currentTarget;if(d&&c&&d.contains(c))return}F&&F(a)},children:[/*#__PURE__*/_jsxs(Button,_objectSpread(_objectSpread({id:o,block:void 0===y||y,size:x,htmlType:"button",className:classNames(T("np-dropdown-toggle"),void 0!==t&&t?T("np-dropdown-toggle-navy"):null)// reset Button's styles
|
|
9
8
|
,type:null,priority:null,disabled:void 0!==r&&r,"aria-expanded":V,onClick:function handleOnClick(){W(!0)}},Q),{},{children:[A?/*#__PURE__*/_jsx(Option,_objectSpread(_objectSpread({},A),{},{classNames:N,selected:!0})):/*#__PURE__*/_jsx("span",{className:T("form-control-placeholder"),children:n}),/*#__PURE__*/_jsx(Chevron// disabled={disabled}
|
|
10
|
-
,{className:classNames(T("tw-icon"),T("tw-chevron-up-icon"),T("tw-chevron"),T("bottom"),T("np-select-chevron"))})]})),ma?ka?/*#__PURE__*/_jsx(Drawer,{open:V,headerTitle:L||S(messages.searchPlaceholder),onClose:pa,children:/*#__PURE__*/_jsx(f,{})}):/*#__PURE__*/_jsx(BottomSheet,{open:V,onClose:pa,children:/*#__PURE__*/_jsx(f,{})}):/*#__PURE__*/_jsx(Panel,{open:V,anchorRef:ja,position:void 0!==O&&O?Position.TOP:Position.BOTTOM,onClose:pa,children:/*#__PURE__*/_jsx(f,{})})]})}
|
|
9
|
+
,{className:classNames(T("tw-icon"),T("tw-chevron-up-icon"),T("tw-chevron"),T("bottom"),T("np-select-chevron"))})]})),ma?ka?/*#__PURE__*/_jsx(Drawer,{open:V,headerTitle:L||S(messages.searchPlaceholder),onClose:pa,children:/*#__PURE__*/_jsx(f,{})}):/*#__PURE__*/_jsx(BottomSheet,{open:V,onClose:pa,children:/*#__PURE__*/_jsx(f,{className:"p-a-1"})}):/*#__PURE__*/_jsx(Panel,{open:V,anchorRef:ja,position:void 0!==O&&O?Position.TOP:Position.BOTTOM,onClose:pa,children:/*#__PURE__*/_jsx(f,{className:"p-a-1"})})]})}Select.propTypes={placeholder:PropTypes.string,id:PropTypes.string,required:PropTypes.bool,disabled:PropTypes.bool,inverse:PropTypes.bool,dropdownRight:PropTypes.oneOf(["xs","sm","md","lg","xl"]),dropdownWidth:PropTypes.oneOf(["sm","md","lg"]),size:PropTypes.oneOf(["sm","md","lg"]),block:PropTypes.bool,selected:PropTypes.shape({value:PropTypes.any.isRequired,label:PropTypes.node,icon:PropTypes.node,currency:PropTypes.string,note:PropTypes.node,secondary:PropTypes.node}),/**
|
|
10
|
+
* Search toggle
|
|
11
|
+
* if `true` default search functionality being enabled (not case sensitive search in option labels & currency props)
|
|
12
|
+
* if `function` you can define your own search function to implement custom search experience. This search function used while filtering the options array. The custom search function takes two parameters. First is the option the second is the keyword.
|
|
13
|
+
*/search:PropTypes.oneOfType([PropTypes.bool,PropTypes.func]),onChange:PropTypes.func.isRequired,onFocus:PropTypes.func,onBlur:PropTypes.func,options:PropTypes.arrayOf(PropTypes.shape({value:PropTypes.any,label:PropTypes.node,header:PropTypes.node,icon:PropTypes.node,currency:PropTypes.string,note:PropTypes.node,secondary:PropTypes.node,separator:PropTypes.bool,disabled:PropTypes.bool,searchStrings:PropTypes.arrayOf(PropTypes.string)})).isRequired,/**
|
|
14
|
+
* To have full control of your search value and response use `onSearchChange` function combined with `searchValue` and custom filtering on the options array.
|
|
15
|
+
* DO NOT USE TOGETHER WITH `search` PROPERTY
|
|
16
|
+
*/onSearchChange:PropTypes.func,searchValue:PropTypes.string,searchPlaceholder:PropTypes.string,classNames:PropTypes.objectOf(PropTypes.string),dropdownUp:PropTypes.bool,buttonProps:PropTypes.object},Select.defaultProps={id:void 0,placeholder:void 0,size:"md",dropdownRight:null,dropdownWidth:null,inverse:!1,required:!1,disabled:!1,block:!0,selected:null,onFocus:null,onBlur:null,onSearchChange:void 0,search:!1,searchValue:"",searchPlaceholder:void 0,classNames:{},dropdownUp:!1,buttonProps:{}};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
|
|
1
|
+
import Select from"./Select";export default Select;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
/* eslint-disable jsx-a11y/anchor-is-valid */import classNames from"classnames";import PropTypes from"prop-types";import hightlight from"../util/highlight";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";var Option=function(a){var b=a.option,c=a.selected,d=a.onClick,e=a.query,f=b.label,g=b.note,h=b.secondary;return/*#__PURE__*/_jsx("li",{role:"option","aria-selected":"false",className:classNames("typeahead__option
|
|
1
|
+
/* eslint-disable jsx-a11y/anchor-is-valid */import classNames from"classnames";import PropTypes from"prop-types";import hightlight from"../util/highlight";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";var Option=function(a){var b=a.option,c=a.selected,d=a.onClick,e=a.query,f=b.label,g=b.note,h=b.secondary;return/*#__PURE__*/_jsx("li",{role:"option","aria-selected":"false",className:classNames("typeahead__option tw-dropdown-item clickable",{"tw-dropdown-item--focused":c}),children:/*#__PURE__*/_jsxs("a",{className:"dropdown-item",href:"#",onClick:d,children:[/*#__PURE__*/_jsx("span",{children:hightlight(f,e)}),g&&/*#__PURE__*/_jsx("span",{className:"body-2 m-l-1",children:g}),h&&/*#__PURE__*/_jsx("span",{className:"body-2 text-ellipsis",children:h})]})})};Option.propTypes={option:PropTypes.shape({label:PropTypes.string.isRequired,note:PropTypes.string,secondary:PropTypes.string}).isRequired,query:PropTypes.string,selected:PropTypes.bool,onClick:PropTypes.func},Option.defaultProps={selected:!1,query:"",onClick:function onClick(){}};export default Option;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{isKey,isUndefined}from"@transferwise/neptune-validation";import PropTypes from"prop-types";import{useEffect,useRef}from"react";import{useConditionalListener}from"../hooks";import{Key}from"../key";import{getFocusableElements,resetFocus}from"./utils";import{jsx as _jsx}from"react/jsx-runtime";var TAB=Key.TAB,FocusBoundary=function(a){var b=a.children,c=useRef(),d=isUndefined(document)?void 0:document,e={};return useEffect(function(){c.current.focus(),e=getFocusableElements(c.current)},[]),useConditionalListener({eventType:"keydown",callback:function callback(a){isKey({keyType:TAB,event:a})&&resetFocus({event:a,focusableEls:e})},attachListener:!0,parent:d}),/*#__PURE__*/_jsx("span",{ref:c,tabIndex:-1,className:"np-focus-boundary outline-none",children:b})};FocusBoundary.propTypes={children:PropTypes.node};export default FocusBoundary;
|
|
1
|
+
import{isKey,isUndefined}from"@transferwise/neptune-validation";import PropTypes from"prop-types";import{useEffect,useRef}from"react";import{useConditionalListener}from"../hooks";import{Key}from"../key";import{getFocusableElements,resetFocus}from"./utils";import{jsx as _jsx}from"react/jsx-runtime";var TAB=Key.TAB,FocusBoundary=function(a){var b=a.children,c=useRef(),d=isUndefined(document)?void 0:document,e={};return useEffect(function(){c.current.focus(),e=getFocusableElements(c.current)},[]),useConditionalListener({eventType:"keydown",callback:function callback(a){return isKey({keyType:TAB,event:a})&&resetFocus({event:a,focusableEls:e})},attachListener:!0,parent:d}),/*#__PURE__*/_jsx("span",{ref:c,tabIndex:-1,className:"np-focus-boundary outline-none",children:b})};FocusBoundary.propTypes={children:PropTypes.node};export default FocusBoundary;
|
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import _defineProperty from"@babel/runtime/helpers/defineProperty";
|
|
2
|
-
}}}),
|
|
1
|
+
import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";import _defineProperty from"@babel/runtime/helpers/defineProperty";import"core-js/modules/es.object.keys.js";import"core-js/modules/es.symbol.js";import"core-js/modules/es.array.filter.js";import"core-js/modules/es.object.get-own-property-descriptor.js";import"core-js/modules/web.dom-collections.for-each.js";import"core-js/modules/es.object.get-own-property-descriptors.js";var _fallbackPlacements,_excluded=["arrow","children","open","onClose","position","anchorRef"];function ownKeys(a,b){var c=Object.keys(a);if(Object.getOwnPropertySymbols){var d=Object.getOwnPropertySymbols(a);b&&(d=d.filter(function(b){return Object.getOwnPropertyDescriptor(a,b).enumerable})),c.push.apply(c,d)}return c}function _objectSpread(a){for(var b,c=1;c<arguments.length;c++)b=null==arguments[c]?{}:arguments[c],c%2?ownKeys(Object(b),!0).forEach(function(c){_defineProperty(a,c,b[c])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(b)):ownKeys(Object(b)).forEach(function(c){Object.defineProperty(a,c,Object.getOwnPropertyDescriptor(b,c))});return a}import classnames from"classnames";import{useState,forwardRef,useEffect}from"react";import{usePopper}from"react-popper";import{Position}from"..";import Dimmer from"../../dimmer";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";var POPOVER_OFFSET=[0,16],fallbackPlacements=(_fallbackPlacements={},_defineProperty(_fallbackPlacements,Position.TOP,[Position.BOTTOM,Position.RIGHT,Position.LEFT]),_defineProperty(_fallbackPlacements,Position.BOTTOM,[Position.TOP,Position.RIGHT,Position.LEFT]),_defineProperty(_fallbackPlacements,Position.LEFT,[Position.RIGHT,Position.TOP,Position.BOTTOM]),_defineProperty(_fallbackPlacements,Position.RIGHT,[Position.LEFT,Position.TOP,Position.BOTTOM]),_fallbackPlacements),Panel=/*#__PURE__*/forwardRef(function(a,b){var c=a.arrow,d=void 0!==c&&c,e=a.children,f=a.open,g=void 0!==f&&f,h=a.onClose,i=a.position,j=void 0===i?Position.TOP:i,k=a.anchorRef,l=_objectWithoutProperties(a,_excluded),m=useState(null),n=_slicedToArray(m,2),o=n[0],p=n[1],q=useState(null),r=_slicedToArray(q,2),s=r[0],t=r[1],u=[];d&&(u.push({name:"arrow",options:{element:o,options:{padding:8// 8px from the edges of the popper
|
|
2
|
+
}}}),u.push({name:"offset",options:{offset:POPOVER_OFFSET}})),fallbackPlacements[j]&&u.push({name:"flip",options:{fallbackPlacements:fallbackPlacements[j]}});var v=usePopper(k.current,s,{placement:j,modifiers:u}),w=v.styles,x=v.attributes,y=v.forceUpdate;// If the trigger is not visible when the position is calculated, it will be incorrect. Because this can happen repeatedly (on resize for example),
|
|
3
3
|
// it is most simple just to always position before opening
|
|
4
|
-
return useEffect(function(){
|
|
5
|
-
ref:
|
|
6
|
-
,style:_objectSpread({},
|
|
7
|
-
ref:
|
|
8
|
-
,style:
|
|
4
|
+
return useEffect(function(){g&&y&&y()},[g]),/*#__PURE__*/_jsx(Dimmer,{open:g,transparent:!0,fadeContentOnEnter:!0,fadeContentOnExit:!0,onClose:h,children:/*#__PURE__*/_jsx("div",_objectSpread(_objectSpread(_objectSpread({// @ts-expect-error Popper requirement
|
|
5
|
+
ref:t// eslint-disable-next-line react/forbid-dom-props
|
|
6
|
+
,style:_objectSpread({},w.popper)},x.popper),{},{className:classnames("np-panel",{"np-panel--open":g},l.className)},l),{},{children:/*#__PURE__*/_jsxs("div",{ref:b,className:classnames("np-panel__content"),children:[e,d&&/*#__PURE__*/_jsx("div",{// @ts-expect-error Popper requirement
|
|
7
|
+
ref:p,className:classnames("np-panel__arrow")// eslint-disable-next-line react/forbid-dom-props
|
|
8
|
+
,style:w.arrow})]})}))})});// By default the flip positioning explores only the opposite alternative. So if left is passed and there's no enough space
|
|
9
9
|
// the right one gets chosen. If there's no space on both sides popover goes back to the initially chosen one left.
|
|
10
10
|
// This mapping forces popover to try the four available positions before going back to the initial chosen one.
|
|
11
11
|
export default Panel;
|
|
@@ -1,10 +1,16 @@
|
|
|
1
|
-
import _defineProperty from"@babel/runtime/helpers/defineProperty";import _slicedToArray from"@babel/runtime/helpers/slicedToArray";function ownKeys(a,b){var c=Object.keys(a);if(Object.getOwnPropertySymbols){var d=Object.getOwnPropertySymbols(a);b&&(d=d.filter(function(b){return Object.getOwnPropertyDescriptor(a,b).enumerable})),c.push.apply(c,d)}return c}function _objectSpread(a){for(var b,c=1;c<arguments.length;c++)b=null==arguments[c]?{}:arguments[c],c%2?ownKeys(Object(b),!0).forEach(function(c){_defineProperty(a,c,b[c])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(b)):ownKeys(Object(b)).forEach(function(c){Object.defineProperty(a,c,Object.getOwnPropertyDescriptor(b,c))});return a}import"core-js/modules/es.array.includes.js";import"core-js/modules/es.string.includes.js";import"core-js/modules/es.regexp.exec.js";import"core-js/modules/es.string.search.js";import"core-js/modules/es.array.filter.js";import"core-js/modules/es.array.reduce.js";import"core-js/modules/es.array.map.js";import"core-js/modules/es.array.slice.js";import"core-js/modules/es.object.keys.js";import"core-js/modules/es.symbol.js";import"core-js/modules/es.object.get-own-property-descriptor.js";import"core-js/modules/web.dom-collections.for-each.js";import"core-js/modules/es.object.get-own-property-descriptors.js";import classNames from"classnames";import{useState,useEffect,useRef}from"react";import{useIntl}from"react-intl";import Button from"../button";import Chevron from"../chevron";import{Position,Size}from"../common";import BottomSheet from"../common/bottomSheet";import{stopPropagation}from"../common/domHelpers";import{useLayout}from"../common/hooks";import KeyCodes from"../common/keyCodes";import Panel from"../common/panel";import Drawer from"../drawer";import messages from"./Select.messages";import Option from"./option";import SearchBox from"./searchBox";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";var DEFAULT_SEARCH_VALUE="",DEFAULT_OPTIONS_PAGE_SIZE=100,includesString=function(a,b){return a.toLowerCase().includes(b.toLowerCase())};function defaultFilterFunction(a,b){if(isPlaceholderOption(a))return!0;var c=a
|
|
2
|
-
* Type of options that can be selected (and searched)
|
|
3
|
-
* currently it's data options {@link SelectDataOptionType}
|
|
4
|
-
* and placeholder option {@link SelectPlaceholderOptionType}
|
|
5
|
-
*/function isActionableOption(a){return isPlaceholderOption(a)||null!==a&&"value"in a}function isHeaderOption(a){return null!==a&&"header"in a}function isSparatorOption(a){return null!==a&&"separator"in a}/**
|
|
1
|
+
import _defineProperty from"@babel/runtime/helpers/defineProperty";import _slicedToArray from"@babel/runtime/helpers/slicedToArray";function ownKeys(a,b){var c=Object.keys(a);if(Object.getOwnPropertySymbols){var d=Object.getOwnPropertySymbols(a);b&&(d=d.filter(function(b){return Object.getOwnPropertyDescriptor(a,b).enumerable})),c.push.apply(c,d)}return c}function _objectSpread(a){for(var b,c=1;c<arguments.length;c++)b=null==arguments[c]?{}:arguments[c],c%2?ownKeys(Object(b),!0).forEach(function(c){_defineProperty(a,c,b[c])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(b)):ownKeys(Object(b)).forEach(function(c){Object.defineProperty(a,c,Object.getOwnPropertyDescriptor(b,c))});return a}import"core-js/modules/es.array.includes.js";import"core-js/modules/es.string.includes.js";import"core-js/modules/es.regexp.exec.js";import"core-js/modules/es.string.search.js";import"core-js/modules/es.array.filter.js";import"core-js/modules/es.array.reduce.js";import"core-js/modules/es.array.map.js";import"core-js/modules/es.array.slice.js";import"core-js/modules/es.object.keys.js";import"core-js/modules/es.symbol.js";import"core-js/modules/es.object.get-own-property-descriptor.js";import"core-js/modules/web.dom-collections.for-each.js";import"core-js/modules/es.object.get-own-property-descriptors.js";import classNames from"classnames";import PropTypes from"prop-types";import{useState,useEffect,useRef}from"react";import{useIntl}from"react-intl";import Button from"../button";import Chevron from"../chevron";import{Position,Size}from"../common";import BottomSheet from"../common/bottomSheet";import{stopPropagation}from"../common/domHelpers";import{useLayout}from"../common/hooks";import KeyCodes from"../common/keyCodes";import Panel from"../common/panel";import Drawer from"../drawer";import messages from"./Select.messages";import Option from"./option";import SearchBox from"./searchBox";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";var DEFAULT_SEARCH_VALUE="",DEFAULT_OPTIONS_PAGE_SIZE=100,includesString=function(a,b){return a.toLowerCase().includes(b.toLowerCase())};function defaultFilterFunction(a,b){if(isPlaceholderOption(a))return!0;var c=a.label,d=a.note,e=a.secondary,f=a.currency,g=a.searchStrings;return!!c&&includesString(c,b)||!!d&&includesString(d,b)||!!e&&includesString(e,b)||!!f&&includesString(f,b)||!!g&&g.some(function(a){return includesString(a,b)})}function isActionableOption(a){return isPlaceholderOption(a)||null!==a&&"value"in a}function isHeaderOption(a){return null!==a&&"header"in a}function isSparatorOption(a){return null!==a&&"separator"in a}/**
|
|
6
2
|
* No option or placeholder option is selected
|
|
7
|
-
*/var DEFAULT_SELECTED_OPTION=null;function isPlaceholderOption(a){return a===DEFAULT_SELECTED_OPTION||"placeholder"in a}export default function Select(a){function b(){if(null!==ba){var a=na().filter(isActionableOption);e(a[ba])}}function c(a){var b=na().filter(isActionableOption),c=b.reduce(function(a,b,c){return null===a?k(A,b)?c:null:a},null),d=null===da.current||void 0===da.current?-1:da.current,e=d;null===d&&null===c&&ca(0),null===d&&null!==c&&(e=c);var f=e+a,g=Math.max(Math.min(0,b.length-1),f);ca(g)}function d(a){return function(b){stopPropagation(b),e(a)}}function e(a){D(isPlaceholderOption(a)?DEFAULT_SELECTED_OPTION:a),pa()}
|
|
3
|
+
*/var DEFAULT_SELECTED_OPTION=null;function isPlaceholderOption(a){return a===DEFAULT_SELECTED_OPTION||"placeholder"in a}export default function Select(a){function b(){if(null!==ba){var a=na().filter(isActionableOption);e(a[ba])}}function c(a){var b=na().filter(isActionableOption),c=b.reduce(function(a,b,c){return null===a?k(A,b)?c:null:a},null),d=null===da.current||void 0===da.current?-1:da.current,e=d;null===d&&null===c&&ca(0),null===d&&null!==c&&(e=c);var f=e+a,g=Math.max(Math.min(0,b.length-1),f);ca(g)}function d(a){return function(b){stopPropagation(b),e(a)}}function e(a){D(isPlaceholderOption(a)?DEFAULT_SELECTED_OPTION:a),pa()}// eslint-disable-next-line react/prop-types
|
|
4
|
+
function f(a){var b=a.className,c=classNames(T("np-dropdown-menu"),_defineProperty({},T("np-dropdown-menu-".concat(v)),!ma),T(b));return/*#__PURE__*/_jsxs("ul",{className:c,"aria-labelledby":o,children:[!q&&!ka&&null!==n&&/*#__PURE__*/_jsx(h,{}),ka&&/*#__PURE__*/_jsx(SearchBox,{ref:ia,classNames:N,value:J||Z,placeholder:L||S(messages.searchPlaceholder),onChange:oa,onClick:stopPropagation}),na().slice(0,ga).map(qa),ga<na().length&&/*#__PURE__*/_jsx(g,{})]})}function g(){function a(a){stopPropagation(a),ha(ga+DEFAULT_OPTIONS_PAGE_SIZE)}return/*#__PURE__*/ (/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */_jsx("li",{className:classNames(T("clickable"),T("border-bottom"),T("show-more")),onClick:a,onKeyPress:a,children:/*#__PURE__*/_jsx("a",{children:"..."})}))}function h(){var a={placeholder:n};return/*#__PURE__*/ (/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */_jsx("li",{className:classNames(T("clickable"),T("border-bottom")),onClick:d(a),onKeyPress:d(a),children:/*#__PURE__*/_jsx("a",{children:n})}))}// eslint-disable-next-line react/prop-types
|
|
5
|
+
function i(a){var b=a.key;return/*#__PURE__*/_jsx("li",{className:T("np-separator")},b)}// eslint-disable-next-line react/prop-types
|
|
6
|
+
function j(a){var b=a.key,c=a.children;return/*#__PURE__*/_jsx("li",{className:T("np-dropdown-header"),onClick:stopPropagation,onKeyPress:stopPropagation,children:c},b)}function k(a,b){return isPlaceholderOption(a)&&isPlaceholderOption(b)||(null===a||void 0===a?void 0:a.value)===(null===b||void 0===b?void 0:b.value)}function l(a){return na().reduce(function(b,c,d){return d<a&&isActionableOption(c)?b+1:b},0)}var m=a.placeholder,n=void 0===m?DEFAULT_SELECTED_OPTION:m,o=a.id,p=a.required,q=void 0!==p&&p,r=a.disabled,t=a.inverse,u=a.dropdownWidth,v=void 0===u?Size.MEDIUM:u,w=a.size,x=void 0===w?Size.MEDIUM:w,y=a.block,z=a.selected,A=void 0===z?DEFAULT_SELECTED_OPTION:z,B=a.search,C=void 0!==B&&B,D=a.onChange,E=a.onFocus,F=a.onBlur,G=a.options,H=a.onSearchChange,I=a.searchValue,J=void 0===I?DEFAULT_SEARCH_VALUE:I,K=a.searchPlaceholder,L=void 0===K?void 0:K,M=a.classNames,N=void 0===M?{}:M,O=a.dropdownUp,P=a.buttonProps,Q=void 0===P?{}:P,R=useIntl(),S=R.formatMessage,T=function(a){return N[a]||a},s=useState(!1),U=_slicedToArray(s,2),V=U[0],W=U[1],X=useState(DEFAULT_SEARCH_VALUE),Y=_slicedToArray(X,2),Z=Y[0],$=Y[1],_=useState(null),aa=_slicedToArray(_,2),ba=aa[0],ca=aa[1],da=useRef(),ea=useState(DEFAULT_OPTIONS_PAGE_SIZE),fa=_slicedToArray(ea,2),ga=fa[0],ha=fa[1],ia=useRef(null),ja=useRef(null),ka=!!H||!!C,la=useLayout(),ma=la.isMobile,na=function(){return C&&Z?G.filter(function(a){return isActionableOption(a)&&!isPlaceholderOption(a)}).filter(function(a){return"function"==typeof C?C(a,Z):defaultFilterFunction(a,Z)}):G},oa=function(a){ha(DEFAULT_OPTIONS_PAGE_SIZE),$(a.target.value),H&&H(a.target.value)};useEffect(function(){if(da.current=ba,V){var a,b=!!(null!==(a=window)&&void 0!==a&&a.matchMedia("(pointer: coarse)").matches);b||!ka||!ia.current||ia.current.focus()}},[V,Z,ka,ba]);var pa=function(){W(!1),ca(null)},qa=function(a,b){var c,e=a;if(isSparatorOption(e)&&null!==e&&void 0!==e&&e.separator)return/*#__PURE__*/_jsx(i,{},b);var f=a;if(isHeaderOption(f)&&f.header)return/*#__PURE__*/_jsx(j,{children:f.header},b);var g=k(A,a),h=a,m=!h.disabled&&ba===l(b),n=classNames(T("np-dropdown-item"),h.disabled?[T("disabled")]:T("clickable"),(c={},_defineProperty(c,T("active"),g),_defineProperty(c,T("np-dropdown-item--focused"),m),c)),o=h.disabled?stopPropagation:d(h);return/*#__PURE__*/ (/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */_jsx("li",{className:n,onClick:o,onKeyPress:o,children:/*#__PURE__*/_jsx("a",{disabled:h.disabled,children:/*#__PURE__*/_jsx(Option,_objectSpread(_objectSpread({},h),{},{classNames:N}))})},b))},ra=!!G.length;return V&&(""!==J||""!==Z)&&(ra&&null===ba&&ca(0),!ra&&null!==ba&&ca(null)),/*#__PURE__*/_jsxs("div",{// eslint-disable-line jsx-a11y/no-static-element-interactions
|
|
8
7
|
ref:ja,className:classNames(T("np-select")),onKeyDown:function handleKeyDown(a){switch(a.keyCode){case KeyCodes.UP:case KeyCodes.DOWN:V?c(a.keyCode===KeyCodes.UP?-1:1):W(!0),stopPropagation(a);break;case KeyCodes.SPACE:a.target!==ia.current&&(V?b():W(!0),stopPropagation(a));break;case KeyCodes.ENTER:V?b():W(!0),stopPropagation(a);break;case KeyCodes.ESCAPE:pa(),stopPropagation(a);break;case KeyCodes.TAB:V&&b();break;default:}},onTouchMove:function handleTouchStart(a){a.currentTarget===a.target&&V&&pa()},onFocus:function handleOnFocus(a){E&&E(a)},onBlur:function handleOnBlur(a){var b=a.nativeEvent;if(b){var c=b.relatedTarget,d=a.currentTarget;if(d&&c&&d.contains(c))return}F&&F(a)},children:[/*#__PURE__*/_jsxs(Button,_objectSpread(_objectSpread({id:o,block:void 0===y||y,size:x,htmlType:"button",className:classNames(T("np-dropdown-toggle"),void 0!==t&&t?T("np-dropdown-toggle-navy"):null)// reset Button's styles
|
|
9
8
|
,type:null,priority:null,disabled:void 0!==r&&r,"aria-expanded":V,onClick:function handleOnClick(){W(!0)}},Q),{},{children:[A?/*#__PURE__*/_jsx(Option,_objectSpread(_objectSpread({},A),{},{classNames:N,selected:!0})):/*#__PURE__*/_jsx("span",{className:T("form-control-placeholder"),children:n}),/*#__PURE__*/_jsx(Chevron// disabled={disabled}
|
|
10
|
-
,{className:classNames(T("tw-icon"),T("tw-chevron-up-icon"),T("tw-chevron"),T("bottom"),T("np-select-chevron"))})]})),ma?ka?/*#__PURE__*/_jsx(Drawer,{open:V,headerTitle:L||S(messages.searchPlaceholder),onClose:pa,children:/*#__PURE__*/_jsx(f,{})}):/*#__PURE__*/_jsx(BottomSheet,{open:V,onClose:pa,children:/*#__PURE__*/_jsx(f,{})}):/*#__PURE__*/_jsx(Panel,{open:V,anchorRef:ja,position:void 0!==O&&O?Position.TOP:Position.BOTTOM,onClose:pa,children:/*#__PURE__*/_jsx(f,{})})]})}
|
|
9
|
+
,{className:classNames(T("tw-icon"),T("tw-chevron-up-icon"),T("tw-chevron"),T("bottom"),T("np-select-chevron"))})]})),ma?ka?/*#__PURE__*/_jsx(Drawer,{open:V,headerTitle:L||S(messages.searchPlaceholder),onClose:pa,children:/*#__PURE__*/_jsx(f,{})}):/*#__PURE__*/_jsx(BottomSheet,{open:V,onClose:pa,children:/*#__PURE__*/_jsx(f,{className:"p-a-1"})}):/*#__PURE__*/_jsx(Panel,{open:V,anchorRef:ja,position:void 0!==O&&O?Position.TOP:Position.BOTTOM,onClose:pa,children:/*#__PURE__*/_jsx(f,{className:"p-a-1"})})]})}Select.propTypes={placeholder:PropTypes.string,id:PropTypes.string,required:PropTypes.bool,disabled:PropTypes.bool,inverse:PropTypes.bool,dropdownRight:PropTypes.oneOf(["xs","sm","md","lg","xl"]),dropdownWidth:PropTypes.oneOf(["sm","md","lg"]),size:PropTypes.oneOf(["sm","md","lg"]),block:PropTypes.bool,selected:PropTypes.shape({value:PropTypes.any.isRequired,label:PropTypes.node,icon:PropTypes.node,currency:PropTypes.string,note:PropTypes.node,secondary:PropTypes.node}),/**
|
|
10
|
+
* Search toggle
|
|
11
|
+
* if `true` default search functionality being enabled (not case sensitive search in option labels & currency props)
|
|
12
|
+
* if `function` you can define your own search function to implement custom search experience. This search function used while filtering the options array. The custom search function takes two parameters. First is the option the second is the keyword.
|
|
13
|
+
*/search:PropTypes.oneOfType([PropTypes.bool,PropTypes.func]),onChange:PropTypes.func.isRequired,onFocus:PropTypes.func,onBlur:PropTypes.func,options:PropTypes.arrayOf(PropTypes.shape({value:PropTypes.any,label:PropTypes.node,header:PropTypes.node,icon:PropTypes.node,currency:PropTypes.string,note:PropTypes.node,secondary:PropTypes.node,separator:PropTypes.bool,disabled:PropTypes.bool,searchStrings:PropTypes.arrayOf(PropTypes.string)})).isRequired,/**
|
|
14
|
+
* To have full control of your search value and response use `onSearchChange` function combined with `searchValue` and custom filtering on the options array.
|
|
15
|
+
* DO NOT USE TOGETHER WITH `search` PROPERTY
|
|
16
|
+
*/onSearchChange:PropTypes.func,searchValue:PropTypes.string,searchPlaceholder:PropTypes.string,classNames:PropTypes.objectOf(PropTypes.string),dropdownUp:PropTypes.bool,buttonProps:PropTypes.object},Select.defaultProps={id:void 0,placeholder:void 0,size:"md",dropdownRight:null,dropdownWidth:null,inverse:!1,required:!1,disabled:!1,block:!0,selected:null,onFocus:null,onBlur:null,onSearchChange:void 0,search:!1,searchValue:"",searchPlaceholder:void 0,classNames:{},dropdownUp:!1,buttonProps:{}};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
|
|
1
|
+
import Select from"./Select";export default Select;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
/* eslint-disable jsx-a11y/anchor-is-valid */import classNames from"classnames";import PropTypes from"prop-types";import hightlight from"../util/highlight";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";var Option=function(a){var b=a.option,c=a.selected,d=a.onClick,e=a.query,f=b.label,g=b.note,h=b.secondary;return/*#__PURE__*/_jsx("li",{role:"option","aria-selected":"false",className:classNames("typeahead__option
|
|
1
|
+
/* eslint-disable jsx-a11y/anchor-is-valid */import classNames from"classnames";import PropTypes from"prop-types";import hightlight from"../util/highlight";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";var Option=function(a){var b=a.option,c=a.selected,d=a.onClick,e=a.query,f=b.label,g=b.note,h=b.secondary;return/*#__PURE__*/_jsx("li",{role:"option","aria-selected":"false",className:classNames("typeahead__option tw-dropdown-item clickable",{"tw-dropdown-item--focused":c}),children:/*#__PURE__*/_jsxs("a",{className:"dropdown-item",href:"#",onClick:d,children:[/*#__PURE__*/_jsx("span",{children:hightlight(f,e)}),g&&/*#__PURE__*/_jsx("span",{className:"body-2 m-l-1",children:g}),h&&/*#__PURE__*/_jsx("span",{className:"body-2 text-ellipsis",children:h})]})})};Option.propTypes={option:PropTypes.shape({label:PropTypes.string.isRequired,note:PropTypes.string,secondary:PropTypes.string}).isRequired,query:PropTypes.string,selected:PropTypes.bool,onClick:PropTypes.func},Option.defaultProps={selected:!1,query:"",onClick:function onClick(){}};export default Option;
|