@transferwise/components 40.12.2 → 40.12.3-beta-fd8151296a.0
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/panel/Panel.js +5 -5
- package/build/es/no-polyfill/modal/Modal.story.js +1 -1
- package/build/es/no-polyfill/select/Select.js +7 -7
- package/build/es/polyfill/common/panel/Panel.js +5 -5
- package/build/es/polyfill/modal/Modal.story.js +1 -1
- package/build/es/polyfill/select/Select.js +7 -7
- package/build/main.css +1 -1
- package/build/styles/main.css +1 -1
- package/build/styles/select/Select.css +1 -1
- package/build/types/common/panel/Panel.d.ts +2 -0
- package/build/types/common/responsivePanel/ResponsivePanel.d.ts +1 -0
- package/build/umd/no-polyfill/main.js +1 -1
- package/build/umd/polyfill/main.js +1 -1
- package/package.json +2 -2
|
@@ -1,9 +1,9 @@
|
|
|
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","flip","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,
|
|
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","flip","children","open","onClose","position","anchorRef","anchorWidth"];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,d=a.arrow,e=void 0!==d&&d,f=a.flip,g=a.children,h=a.open,i=void 0!==h&&h,j=a.onClose,k=a.position,l=void 0===k?Position.BOTTOM:k,m=a.anchorRef,n=a.anchorWidth,o=_objectWithoutProperties(a,_excluded),p=useState(null),q=_slicedToArray(p,2),r=q[0],s=q[1],t=useState(null),u=_slicedToArray(t,2),v=u[0],w=u[1],x=[];e&&(x.push({name:"arrow",options:{element:r,options:{padding:8// 8px from the edges of the popper
|
|
2
|
+
}}}),x.push({name:"offset",options:{offset:POPOVER_OFFSET}})),(!(void 0!==f)||f)&&fallbackPlacements[l]&&x.push({name:"flip",options:{fallbackPlacements:fallbackPlacements[l]}});var y=usePopper(m.current,v,{placement:l,modifiers:x}),z=y.styles,A=y.attributes,B=y.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
|
-
|
|
5
|
-
,style:_objectSpread({},
|
|
6
|
-
,style:
|
|
4
|
+
useEffect(function(){i&&B&&B()},[i]);var C=_objectSpread({},void 0!==n&&n?{width:null===(c=m.current)||void 0===c?void 0:c.clientWidth}:void 0);return/*#__PURE__*/_jsx(Dimmer,{open:i,transparent:!0,fadeContentOnEnter:!0,fadeContentOnExit:!0,onClose:j,children:/*#__PURE__*/_jsx("div",_objectSpread(_objectSpread(_objectSpread({},o),{},{ref:w// eslint-disable-next-line react/forbid-dom-props
|
|
5
|
+
,style:_objectSpread({},z.popper)},A.popper),{},{className:classnames("np-panel",{"np-panel--open":i},o.className),children:/*#__PURE__*/_jsxs("div",{ref:b/* eslint-disable-next-line react/forbid-dom-props */,style:C,className:classnames("np-panel__content"),children:[g,e&&/*#__PURE__*/_jsx("div",{ref:s,className:classnames("np-panel__arrow")// eslint-disable-next-line react/forbid-dom-props
|
|
6
|
+
,style:z.arrow})]})}))})});// By default the flip positioning explores only the opposite alternative. So if left is passed and there's no enough space
|
|
7
7
|
// the right one gets chosen. If there's no space on both sides popover goes back to the initially chosen one left.
|
|
8
8
|
// This mapping forces popover to try the four available positions before going back to the initial chosen one.
|
|
9
9
|
export default Panel;
|
|
@@ -1 +1 @@
|
|
|
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{select,text}from"@storybook/addon-knobs";import{useState}from"react";import{Button,Modal,DateInput}from"..";import{Size,Scroll,Position}from"../common";import{jsx as _jsx}from"react/jsx-runtime";import{Fragment as _Fragment}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";export default{component:Modal,title:"Modal"};var Template=function(a){var b=select("size",[Size.SMALL,Size.MEDIUM,Size.LARGE,Size.EXTRA_LARGE],Size.MEDIUM),
|
|
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{select,text}from"@storybook/addon-knobs";import{useState}from"react";import{Button,Modal,DateInput,DateLookup,Select}from"..";import{Size,Scroll,Position}from"../common";import{jsx as _jsx}from"react/jsx-runtime";import{Fragment as _Fragment}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";export default{component:Modal,title:"Modal"};var Template=function(a){var b=useState({value:-1,label:"A thing"}),c=_slicedToArray(b,2),d=c[0],e=c[1],f=select("size",[Size.SMALL,Size.MEDIUM,Size.LARGE,Size.EXTRA_LARGE],Size.MEDIUM),g=useState(!1),h=_slicedToArray(g,2),i=h[0],j=h[1],k=text("title","title"),l=text("class",""),m=select("position",[Position.TOP,Position.CENTER],Position.CENTER),n=select("scroll",[Scroll.CONTENT,Scroll.VIEWPORT],Scroll.CONTENT);return/*#__PURE__*/_jsxs(_Fragment,{children:[/*#__PURE__*/_jsx(Button,{onClick:function onClick(){return j(!0)},children:"Open Modal"}),/*#__PURE__*/_jsx(Modal,_objectSpread({body:/*#__PURE__*/_jsxs(_Fragment,{children:[/*#__PURE__*/_jsx(DateInput,{value:new Date,onChange:console&&console.log}),/*#__PURE__*/_jsx(DateLookup,{label:"Some date",clearable:!0}),/*#__PURE__*/_jsx(Select,{id:"basic-button",buttonProps:{"aria-label":"Basic button"},dropdownProps:{"aria-label":"Options for basic button"},placeholder:"placeholder",block:!0,selected:d,dropdownWidth:null,search:!0,searchPlaceholder:"Search placeholder",options:[{header:"Basic"},{value:-1,label:"A thing"},{value:0,label:"A thing",note:"with a note"},{value:1,label:"Another thing",secondary:"with secondary text this time"},{value:-2,label:"One more thing",note:"with a note",secondary:"and with secondary text"},{value:2,label:"A disabled thing",disabled:!0},{separator:!0},{header:"Icons"},{header:"Currencies"},{value:5,label:"British pound",currency:"gbp"},{value:6,label:"Euro",currency:"eur"},{separator:!0},{value:7,label:"Something else"},{header:"Options with searchable alternatives"},{value:8,label:"A thing with searchable alternatives",searchStrings:["abbreviation","acronym","nickname"]}],onChange:function onChange(a){return e(a)}}),/*#__PURE__*/_jsx("p",{className:"m-t-4",children:a.children})]}),open:i,position:m,size:f,title:k,className:l,scroll:n,footer:/*#__PURE__*/_jsx(Button,{block:!0,onClick:function onClick(){return alert("clicked")},children:"Action"}),onClose:function onClose(){return j(!1)}},a))]})};export var Basic=function(){return/*#__PURE__*/_jsx(Template,{children:"I am baby actually poke kickstarter, street art jean shorts bespoke chambray activated charcoal ramps marfa shoreditch tumeric tumblr. Mixtape cred palo santo, cliche lyft marfa ethical waistcoat poke jean shorts. Scenester readymade selvage disrupt pok pok. La croix stumptown try-hard chartreuse. I am baby actually poke kickstarter, street art jean shorts bespoke chambray activated charcoal ramps marfa shoreditch tumeric, I am baby actually poke kickstarter, street art jean shorts bespoke chambray activated charcoal ramps marfa shoreditch tumeric tumblr. Mixtape cred palo santo, cliche lyft marfa ethical waistcoat poke jean shorts. Scenester readymade selvage disrupt pok pok."})};export var WithLongText=function(){return/*#__PURE__*/_jsx(Template,{children:"I am baby actually poke kickstarter, street art jean shorts bespoke chambray activated charcoal ramps marfa shoreditch tumeric tumblr. Mixtape cred palo santo, cliche lyft marfa ethical waistcoat poke jean shorts. Scenester readymade selvage disrupt pok pok. La croix stumptown try-hard chartreuse. I am baby actually poke kickstarter, street art jean shorts bespoke chambray activated charcoal ramps marfa shoreditch tumeric, I am baby actually poke kickstarter, street art jean shorts bespoke chambray activated charcoal ramps marfa shoreditch tumeric tumblr. Mixtape cred palo santo, cliche lyft marfa ethical waistcoat poke jean shorts. Scenester readymade selvage disrupt pok pok. I am baby actually poke kickstarter, street art jean shorts bespoke chambray activated charcoal ramps marfa shoreditch tumeric tumblr. Mixtape cred palo santo, cliche lyft marfa ethical waistcoat poke jean shorts. Scenester readymade selvage disrupt pok pok. La croix stumptown try-hard chartreuse. I am baby actually poke kickstarter, street art jean shorts bespoke chambray activated charcoal ramps marfa shoreditch tumeric, I am baby actually poke kickstarter, street art jean shorts bespoke chambray activated charcoal ramps marfa shoreditch tumeric tumblr. Mixtape cred palo santo, cliche lyft marfa ethical waistcoat poke jean shorts. Scenester readymade selvage disrupt pok pok. I am baby actually poke kickstarter, street art jean shorts bespoke chambray activated charcoal ramps marfa shoreditch tumeric tumblr. Mixtape cred palo santo, cliche lyft marfa ethical waistcoat poke jean shorts. Scenester readymade selvage disrupt pok pok. La croix stumptown try-hard chartreuse. I am baby actually poke kickstarter, street art jean shorts bespoke chambray activated charcoal ramps marfa shoreditch tumeric, I am baby actually poke kickstarter, street art jean shorts bespoke chambray activated charcoal ramps marfa shoreditch tumeric tumblr. Mixtape cred palo santo, cliche lyft marfa ethical waistcoat poke jean shorts. Scenester readymade selvage disrupt pok pok."})};
|
|
@@ -1,16 +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 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
|
|
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}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!a.header&&!a.separator&&!a.disabled}function isHeaderOption(a){return null!==a&&"header"in a}function isSparatorOption(a){return null!==a&&"separator"in a}/**
|
|
2
2
|
* No option or placeholder option is selected
|
|
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!==U){var a=
|
|
4
|
-
function f(a){var b,c=a.className,d=classNames(K("np-dropdown-menu"),(b={},_defineProperty(b,K("np-dropdown-menu-desktop"),!
|
|
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!==U){var a=ha().filter(isActionableOption);e(a[U])}}function c(a){var b=ha().filter(isActionableOption),c=b.reduce(function(a,b,c){return null===a?k(v,b)?c:null:a},null),d=null===W.current||void 0===W.current?-1:W.current,e=d;null===d&&null===c&&V(0),null===d&&null!==c&&(e=c);var f=e+a,g=Math.max(Math.min(0,b.length-1),f);V(g)}function d(a){return function(b){stopPropagation(b),e(a)}}function e(a){x(isPlaceholderOption(a)?DEFAULT_SELECTED_OPTION:a),ja()}// eslint-disable-next-line react/prop-types
|
|
4
|
+
function f(a){var b,c=a.className,d=classNames(K("np-dropdown-menu"),(b={},_defineProperty(b,K("np-dropdown-menu-desktop"),!ga),_defineProperty(b,K("np-dropdown-menu-".concat(r)),!ga&&!ea),b),K(c));return/*#__PURE__*/_jsxs("ul",_objectSpread(_objectSpread({ref:ca,id:"".concat(n,"-listbox"),role:"listbox",tabIndex:"-1",className:d},G),{},{children:[!o&&!da&&null!==m&&/*#__PURE__*/_jsx(h,{}),da&&/*#__PURE__*/_jsx(SearchBox,{ref:_,classNames:E,value:C||Q,placeholder:D||J(messages.searchPlaceholder),onChange:ia,onClick:stopPropagation}),ha().slice(0,Z).map(ka),Z<ha().length&&/*#__PURE__*/_jsx(g,{})]}))}function g(){function a(a){stopPropagation(a),$(Z+DEFAULT_OPTIONS_PAGE_SIZE)}return/*#__PURE__*/ (/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */_jsx("li",{className:classNames(K("clickable"),K("border-bottom"),K("show-more")),onClick:a,onKeyPress:a,children:/*#__PURE__*/_jsx("a",{children:"..."})}))}function h(){var a={placeholder:m};return/*#__PURE__*/ (/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */_jsx("li",{className:classNames(K("clickable"),K("border-bottom")),onClick:d(a),onKeyPress:d(a),children:/*#__PURE__*/_jsx("a",{children:m})}))}// eslint-disable-next-line react/prop-types
|
|
5
5
|
function i(a){var b=a.key;return/*#__PURE__*/_jsx("li",{className:K("np-separator"),"aria-hidden":!0},b)}// eslint-disable-next-line react/prop-types
|
|
6
|
-
function j(a){var b=a.key,c=a.children;return/*#__PURE__*/_jsx("li",{className:K("np-dropdown-header"),onClick:stopPropagation,onKeyPress:stopPropagation,children:c},b)}function k(a,b){return(null===a||void 0===a?void 0:a.value)===(null===b||void 0===b?void 0:b.value)}function l(a){return
|
|
7
|
-
ref:aa,className:classNames(K("np-select"),u?K("btn-block"):null,K("btn-group")),onKeyDown:function handleKeyDown(a){switch(a.keyCode){case KeyCodes.UP:case KeyCodes.DOWN:M?c(a.keyCode===KeyCodes.UP?-1:1):N(!0),stopPropagation(a);break;case KeyCodes.SPACE:a.target!==_.current&&(M?b():N(!0),stopPropagation(a));break;case KeyCodes.ENTER:M?b():N(!0),stopPropagation(a);break;case KeyCodes.ESCAPE:
|
|
6
|
+
function j(a){var b=a.key,c=a.children;return/*#__PURE__*/_jsx("li",{className:K("np-dropdown-header"),onClick:stopPropagation,onKeyPress:stopPropagation,children:c},b)}function k(a,b){return(null===a||void 0===a?void 0:a.value)===(null===b||void 0===b?void 0:b.value)}function l(a){return ha().reduce(function(b,c,d){return d<a&&isActionableOption(c)?b+1:b},0)}var m=a.placeholder,n=a.id,o=a.required,p=a.disabled,q=a.inverse,r=a.dropdownWidth,t=a.size,u=a.block,v=a.selected,w=a.search,x=a.onChange,y=a.onFocus,z=a.onBlur,A=a.options,B=a.onSearchChange,C=a.searchValue,D=a.searchPlaceholder,E=a.classNames,F=a.dropdownUp,G=a.dropdownProps,H=a.buttonProps,I=useIntl(),J=I.formatMessage,K=function(a){return E[a]||a},s=useState(!1),L=_slicedToArray(s,2),M=L[0],N=L[1],O=useState(DEFAULT_SEARCH_VALUE),P=_slicedToArray(O,2),Q=P[0],R=P[1],S=useState(null),T=_slicedToArray(S,2),U=T[0],V=T[1],W=useRef(),X=useState(DEFAULT_OPTIONS_PAGE_SIZE),Y=_slicedToArray(X,2),Z=Y[0],$=Y[1],_=useRef(null),aa=useRef(null),ba=useRef(null),ca=useRef(null),da=!!B||!!w,ea=null===r,fa=useLayout(),ga=fa.isMobile,ha=function(){return w&&Q?A.filter(function(a){return isActionableOption(a)&&!isPlaceholderOption(a)}).filter(function(a){return"function"==typeof w?w(a,Q):defaultFilterFunction(a,Q)}):A},ia=function(a){$(DEFAULT_OPTIONS_PAGE_SIZE),R(a.target.value),B&&B(a.target.value)};useEffect(function(){W.current=U,M&&(!ga||""!==Q)&&(da&&!!_.current&&_.current.focus(),!da&&ca.current&&ca.current.focus())},[M,Q,da,ga,U]);var ja=function(){N(!1),V(null),ba.current&&ba.current.focus()},ka=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(v,a),h=a,m=!h.disabled&&U===l(b),n=classNames(K("np-dropdown-item"),h.disabled?[K("disabled")]:K("clickable"),(c={},_defineProperty(c,K("active"),g),_defineProperty(c,K("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",{"aria-selected":g,"aria-disabled":a.disabled,role:"option",tabIndex:"-1",className:n,onClick:o,onKeyPress:o,children:/*#__PURE__*/_jsx("a",{disabled:h.disabled,children:/*#__PURE__*/_jsx(Option,_objectSpread(_objectSpread({},h),{},{classNames:E}))})},b))},la=!!A.length;return M&&(""!==C||""!==Q)&&(la&&null===U&&V(0),!la&&null!==U&&V(null)),/*#__PURE__*/_jsxs("div",{// eslint-disable-line jsx-a11y/no-static-element-interactions
|
|
7
|
+
ref:aa,className:classNames(K("np-select"),u?K("btn-block"):null,K("btn-group")),onKeyDown:function handleKeyDown(a){switch(a.keyCode){case KeyCodes.UP:case KeyCodes.DOWN:M?c(a.keyCode===KeyCodes.UP?-1:1):N(!0),stopPropagation(a);break;case KeyCodes.SPACE:a.target!==_.current&&(M?b():N(!0),stopPropagation(a));break;case KeyCodes.ENTER:M?b():N(!0),stopPropagation(a);break;case KeyCodes.ESCAPE:ja(),stopPropagation(a);break;case KeyCodes.TAB:M&&b();break;default:}},onTouchMove:function handleTouchStart(a){a.currentTarget===a.target&&M&&ja()},onFocus:function handleOnFocus(a){y&&y(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}z&&z(a)},children:[/*#__PURE__*/_jsxs(Button,_objectSpread(_objectSpread({ref:ba,id:n,block:u,size:t,htmlType:"button",className:classNames(K("np-dropdown-toggle"),q?K("np-dropdown-toggle-navy"):null)// reset Button's styles
|
|
8
8
|
,type:null,priority:null,disabled:p,role:"combobox","aria-controls":"".concat(n,"-listbox"),"aria-expanded":M,"aria-autocomplete":"none",onClick:function handleOnClick(){N(!0)}},H),{},{children:[v?/*#__PURE__*/_jsx(Option,_objectSpread(_objectSpread({},v),{},{classNames:E,selected:!0})):/*#__PURE__*/_jsx("span",{className:K("form-control-placeholder"),children:m}),/*#__PURE__*/_jsx(Chevron// disabled={disabled}
|
|
9
|
-
,{className:classNames(K("tw-icon"),K("tw-chevron-up-icon"),K("tw-chevron"),K("bottom"),K("np-select-chevron"))})]})),
|
|
9
|
+
,{className:classNames(K("tw-icon"),K("tw-chevron-up-icon"),K("tw-chevron"),K("bottom"),K("np-select-chevron"))})]})),ga?da?/*#__PURE__*/_jsx(Drawer,{open:M,headerTitle:D||J(messages.searchPlaceholder),onClose:ja,children:/*#__PURE__*/_jsx(f,{})}):/*#__PURE__*/_jsx(BottomSheet,{open:M,onClose:ja,children:/*#__PURE__*/_jsx(f,{className:"p-a-1"})}):/*#__PURE__*/_jsx(Panel,{open:M,flip:!1,anchorRef:aa,anchorWidth:ea,position:F?Position.TOP:Position.BOTTOM,onClose:ja,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
10
|
* Search toggle
|
|
11
11
|
* if `true` default search functionality being enabled (not case sensitive search in option labels & currency props)
|
|
12
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
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
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
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,dropdownProps:PropTypes.object},Select.defaultProps={id:void 0,placeholder:void 0,size:"md",dropdownRight:null,dropdownWidth:
|
|
16
|
+
*/onSearchChange:PropTypes.func,searchValue:PropTypes.string,searchPlaceholder:PropTypes.string,classNames:PropTypes.objectOf(PropTypes.string),dropdownUp:PropTypes.bool,buttonProps:PropTypes.object,dropdownProps: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:{},dropdownProps:{}};
|
|
@@ -1,9 +1,9 @@
|
|
|
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.to-string.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","flip","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,
|
|
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.to-string.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","flip","children","open","onClose","position","anchorRef","anchorWidth"];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,d=a.arrow,e=void 0!==d&&d,f=a.flip,g=a.children,h=a.open,i=void 0!==h&&h,j=a.onClose,k=a.position,l=void 0===k?Position.BOTTOM:k,m=a.anchorRef,n=a.anchorWidth,o=_objectWithoutProperties(a,_excluded),p=useState(null),q=_slicedToArray(p,2),r=q[0],s=q[1],t=useState(null),u=_slicedToArray(t,2),v=u[0],w=u[1],x=[];e&&(x.push({name:"arrow",options:{element:r,options:{padding:8// 8px from the edges of the popper
|
|
2
|
+
}}}),x.push({name:"offset",options:{offset:POPOVER_OFFSET}})),(!(void 0!==f)||f)&&fallbackPlacements[l]&&x.push({name:"flip",options:{fallbackPlacements:fallbackPlacements[l]}});var y=usePopper(m.current,v,{placement:l,modifiers:x}),z=y.styles,A=y.attributes,B=y.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
|
-
|
|
5
|
-
,style:_objectSpread({},
|
|
6
|
-
,style:
|
|
4
|
+
useEffect(function(){i&&B&&B()},[i]);var C=_objectSpread({},void 0!==n&&n?{width:null===(c=m.current)||void 0===c?void 0:c.clientWidth}:void 0);return/*#__PURE__*/_jsx(Dimmer,{open:i,transparent:!0,fadeContentOnEnter:!0,fadeContentOnExit:!0,onClose:j,children:/*#__PURE__*/_jsx("div",_objectSpread(_objectSpread(_objectSpread({},o),{},{ref:w// eslint-disable-next-line react/forbid-dom-props
|
|
5
|
+
,style:_objectSpread({},z.popper)},A.popper),{},{className:classnames("np-panel",{"np-panel--open":i},o.className),children:/*#__PURE__*/_jsxs("div",{ref:b/* eslint-disable-next-line react/forbid-dom-props */,style:C,className:classnames("np-panel__content"),children:[g,e&&/*#__PURE__*/_jsx("div",{ref:s,className:classnames("np-panel__arrow")// eslint-disable-next-line react/forbid-dom-props
|
|
6
|
+
,style:z.arrow})]})}))})});// By default the flip positioning explores only the opposite alternative. So if left is passed and there's no enough space
|
|
7
7
|
// the right one gets chosen. If there's no space on both sides popover goes back to the initially chosen one left.
|
|
8
8
|
// This mapping forces popover to try the four available positions before going back to the initial chosen one.
|
|
9
9
|
export default Panel;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import _defineProperty from"@babel/runtime/helpers/defineProperty";import _slicedToArray from"@babel/runtime/helpers/slicedToArray";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.to-string.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";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{select,text}from"@storybook/addon-knobs";import{useState}from"react";import{Button,Modal,DateInput}from"..";import{Size,Scroll,Position}from"../common";import{jsx as _jsx}from"react/jsx-runtime";import{Fragment as _Fragment}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";export default{component:Modal,title:"Modal"};var Template=function(a){var b=select("size",[Size.SMALL,Size.MEDIUM,Size.LARGE,Size.EXTRA_LARGE],Size.MEDIUM),
|
|
1
|
+
import _defineProperty from"@babel/runtime/helpers/defineProperty";import _slicedToArray from"@babel/runtime/helpers/slicedToArray";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.to-string.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";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{select,text}from"@storybook/addon-knobs";import{useState}from"react";import{Button,Modal,DateInput,DateLookup,Select}from"..";import{Size,Scroll,Position}from"../common";import{jsx as _jsx}from"react/jsx-runtime";import{Fragment as _Fragment}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";export default{component:Modal,title:"Modal"};var Template=function(a){var b=useState({value:-1,label:"A thing"}),c=_slicedToArray(b,2),d=c[0],e=c[1],f=select("size",[Size.SMALL,Size.MEDIUM,Size.LARGE,Size.EXTRA_LARGE],Size.MEDIUM),g=useState(!1),h=_slicedToArray(g,2),i=h[0],j=h[1],k=text("title","title"),l=text("class",""),m=select("position",[Position.TOP,Position.CENTER],Position.CENTER),n=select("scroll",[Scroll.CONTENT,Scroll.VIEWPORT],Scroll.CONTENT);return/*#__PURE__*/_jsxs(_Fragment,{children:[/*#__PURE__*/_jsx(Button,{onClick:function onClick(){return j(!0)},children:"Open Modal"}),/*#__PURE__*/_jsx(Modal,_objectSpread({body:/*#__PURE__*/_jsxs(_Fragment,{children:[/*#__PURE__*/_jsx(DateInput,{value:new Date,onChange:console&&console.log}),/*#__PURE__*/_jsx(DateLookup,{label:"Some date",clearable:!0}),/*#__PURE__*/_jsx(Select,{id:"basic-button",buttonProps:{"aria-label":"Basic button"},dropdownProps:{"aria-label":"Options for basic button"},placeholder:"placeholder",block:!0,selected:d,dropdownWidth:null,search:!0,searchPlaceholder:"Search placeholder",options:[{header:"Basic"},{value:-1,label:"A thing"},{value:0,label:"A thing",note:"with a note"},{value:1,label:"Another thing",secondary:"with secondary text this time"},{value:-2,label:"One more thing",note:"with a note",secondary:"and with secondary text"},{value:2,label:"A disabled thing",disabled:!0},{separator:!0},{header:"Icons"},{header:"Currencies"},{value:5,label:"British pound",currency:"gbp"},{value:6,label:"Euro",currency:"eur"},{separator:!0},{value:7,label:"Something else"},{header:"Options with searchable alternatives"},{value:8,label:"A thing with searchable alternatives",searchStrings:["abbreviation","acronym","nickname"]}],onChange:function onChange(a){return e(a)}}),/*#__PURE__*/_jsx("p",{className:"m-t-4",children:a.children})]}),open:i,position:m,size:f,title:k,className:l,scroll:n,footer:/*#__PURE__*/_jsx(Button,{block:!0,onClick:function onClick(){return alert("clicked")},children:"Action"}),onClose:function onClose(){return j(!1)}},a))]})};export var Basic=function(){return/*#__PURE__*/_jsx(Template,{children:"I am baby actually poke kickstarter, street art jean shorts bespoke chambray activated charcoal ramps marfa shoreditch tumeric tumblr. Mixtape cred palo santo, cliche lyft marfa ethical waistcoat poke jean shorts. Scenester readymade selvage disrupt pok pok. La croix stumptown try-hard chartreuse. I am baby actually poke kickstarter, street art jean shorts bespoke chambray activated charcoal ramps marfa shoreditch tumeric, I am baby actually poke kickstarter, street art jean shorts bespoke chambray activated charcoal ramps marfa shoreditch tumeric tumblr. Mixtape cred palo santo, cliche lyft marfa ethical waistcoat poke jean shorts. Scenester readymade selvage disrupt pok pok."})};export var WithLongText=function(){return/*#__PURE__*/_jsx(Template,{children:"I am baby actually poke kickstarter, street art jean shorts bespoke chambray activated charcoal ramps marfa shoreditch tumeric tumblr. Mixtape cred palo santo, cliche lyft marfa ethical waistcoat poke jean shorts. Scenester readymade selvage disrupt pok pok. La croix stumptown try-hard chartreuse. I am baby actually poke kickstarter, street art jean shorts bespoke chambray activated charcoal ramps marfa shoreditch tumeric, I am baby actually poke kickstarter, street art jean shorts bespoke chambray activated charcoal ramps marfa shoreditch tumeric tumblr. Mixtape cred palo santo, cliche lyft marfa ethical waistcoat poke jean shorts. Scenester readymade selvage disrupt pok pok. I am baby actually poke kickstarter, street art jean shorts bespoke chambray activated charcoal ramps marfa shoreditch tumeric tumblr. Mixtape cred palo santo, cliche lyft marfa ethical waistcoat poke jean shorts. Scenester readymade selvage disrupt pok pok. La croix stumptown try-hard chartreuse. I am baby actually poke kickstarter, street art jean shorts bespoke chambray activated charcoal ramps marfa shoreditch tumeric, I am baby actually poke kickstarter, street art jean shorts bespoke chambray activated charcoal ramps marfa shoreditch tumeric tumblr. Mixtape cred palo santo, cliche lyft marfa ethical waistcoat poke jean shorts. Scenester readymade selvage disrupt pok pok. I am baby actually poke kickstarter, street art jean shorts bespoke chambray activated charcoal ramps marfa shoreditch tumeric tumblr. Mixtape cred palo santo, cliche lyft marfa ethical waistcoat poke jean shorts. Scenester readymade selvage disrupt pok pok. La croix stumptown try-hard chartreuse. I am baby actually poke kickstarter, street art jean shorts bespoke chambray activated charcoal ramps marfa shoreditch tumeric, I am baby actually poke kickstarter, street art jean shorts bespoke chambray activated charcoal ramps marfa shoreditch tumeric tumblr. Mixtape cred palo santo, cliche lyft marfa ethical waistcoat poke jean shorts. Scenester readymade selvage disrupt pok pok."})};
|
|
@@ -1,16 +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.object.to-string.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
|
|
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.object.to-string.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}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!a.header&&!a.separator&&!a.disabled}function isHeaderOption(a){return null!==a&&"header"in a}function isSparatorOption(a){return null!==a&&"separator"in a}/**
|
|
2
2
|
* No option or placeholder option is selected
|
|
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!==U){var a=
|
|
4
|
-
function f(a){var b,c=a.className,d=classNames(K("np-dropdown-menu"),(b={},_defineProperty(b,K("np-dropdown-menu-desktop"),!
|
|
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!==U){var a=ha().filter(isActionableOption);e(a[U])}}function c(a){var b=ha().filter(isActionableOption),c=b.reduce(function(a,b,c){return null===a?k(v,b)?c:null:a},null),d=null===W.current||void 0===W.current?-1:W.current,e=d;null===d&&null===c&&V(0),null===d&&null!==c&&(e=c);var f=e+a,g=Math.max(Math.min(0,b.length-1),f);V(g)}function d(a){return function(b){stopPropagation(b),e(a)}}function e(a){x(isPlaceholderOption(a)?DEFAULT_SELECTED_OPTION:a),ja()}// eslint-disable-next-line react/prop-types
|
|
4
|
+
function f(a){var b,c=a.className,d=classNames(K("np-dropdown-menu"),(b={},_defineProperty(b,K("np-dropdown-menu-desktop"),!ga),_defineProperty(b,K("np-dropdown-menu-".concat(r)),!ga&&!ea),b),K(c));return/*#__PURE__*/_jsxs("ul",_objectSpread(_objectSpread({ref:ca,id:"".concat(n,"-listbox"),role:"listbox",tabIndex:"-1",className:d},G),{},{children:[!o&&!da&&null!==m&&/*#__PURE__*/_jsx(h,{}),da&&/*#__PURE__*/_jsx(SearchBox,{ref:_,classNames:E,value:C||Q,placeholder:D||J(messages.searchPlaceholder),onChange:ia,onClick:stopPropagation}),ha().slice(0,Z).map(ka),Z<ha().length&&/*#__PURE__*/_jsx(g,{})]}))}function g(){function a(a){stopPropagation(a),$(Z+DEFAULT_OPTIONS_PAGE_SIZE)}return/*#__PURE__*/ (/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */_jsx("li",{className:classNames(K("clickable"),K("border-bottom"),K("show-more")),onClick:a,onKeyPress:a,children:/*#__PURE__*/_jsx("a",{children:"..."})}))}function h(){var a={placeholder:m};return/*#__PURE__*/ (/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */_jsx("li",{className:classNames(K("clickable"),K("border-bottom")),onClick:d(a),onKeyPress:d(a),children:/*#__PURE__*/_jsx("a",{children:m})}))}// eslint-disable-next-line react/prop-types
|
|
5
5
|
function i(a){var b=a.key;return/*#__PURE__*/_jsx("li",{className:K("np-separator"),"aria-hidden":!0},b)}// eslint-disable-next-line react/prop-types
|
|
6
|
-
function j(a){var b=a.key,c=a.children;return/*#__PURE__*/_jsx("li",{className:K("np-dropdown-header"),onClick:stopPropagation,onKeyPress:stopPropagation,children:c},b)}function k(a,b){return(null===a||void 0===a?void 0:a.value)===(null===b||void 0===b?void 0:b.value)}function l(a){return
|
|
7
|
-
ref:aa,className:classNames(K("np-select"),u?K("btn-block"):null,K("btn-group")),onKeyDown:function handleKeyDown(a){switch(a.keyCode){case KeyCodes.UP:case KeyCodes.DOWN:M?c(a.keyCode===KeyCodes.UP?-1:1):N(!0),stopPropagation(a);break;case KeyCodes.SPACE:a.target!==_.current&&(M?b():N(!0),stopPropagation(a));break;case KeyCodes.ENTER:M?b():N(!0),stopPropagation(a);break;case KeyCodes.ESCAPE:
|
|
6
|
+
function j(a){var b=a.key,c=a.children;return/*#__PURE__*/_jsx("li",{className:K("np-dropdown-header"),onClick:stopPropagation,onKeyPress:stopPropagation,children:c},b)}function k(a,b){return(null===a||void 0===a?void 0:a.value)===(null===b||void 0===b?void 0:b.value)}function l(a){return ha().reduce(function(b,c,d){return d<a&&isActionableOption(c)?b+1:b},0)}var m=a.placeholder,n=a.id,o=a.required,p=a.disabled,q=a.inverse,r=a.dropdownWidth,t=a.size,u=a.block,v=a.selected,w=a.search,x=a.onChange,y=a.onFocus,z=a.onBlur,A=a.options,B=a.onSearchChange,C=a.searchValue,D=a.searchPlaceholder,E=a.classNames,F=a.dropdownUp,G=a.dropdownProps,H=a.buttonProps,I=useIntl(),J=I.formatMessage,K=function(a){return E[a]||a},s=useState(!1),L=_slicedToArray(s,2),M=L[0],N=L[1],O=useState(DEFAULT_SEARCH_VALUE),P=_slicedToArray(O,2),Q=P[0],R=P[1],S=useState(null),T=_slicedToArray(S,2),U=T[0],V=T[1],W=useRef(),X=useState(DEFAULT_OPTIONS_PAGE_SIZE),Y=_slicedToArray(X,2),Z=Y[0],$=Y[1],_=useRef(null),aa=useRef(null),ba=useRef(null),ca=useRef(null),da=!!B||!!w,ea=null===r,fa=useLayout(),ga=fa.isMobile,ha=function(){return w&&Q?A.filter(function(a){return isActionableOption(a)&&!isPlaceholderOption(a)}).filter(function(a){return"function"==typeof w?w(a,Q):defaultFilterFunction(a,Q)}):A},ia=function(a){$(DEFAULT_OPTIONS_PAGE_SIZE),R(a.target.value),B&&B(a.target.value)};useEffect(function(){W.current=U,M&&(!ga||""!==Q)&&(da&&!!_.current&&_.current.focus(),!da&&ca.current&&ca.current.focus())},[M,Q,da,ga,U]);var ja=function(){N(!1),V(null),ba.current&&ba.current.focus()},ka=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(v,a),h=a,m=!h.disabled&&U===l(b),n=classNames(K("np-dropdown-item"),h.disabled?[K("disabled")]:K("clickable"),(c={},_defineProperty(c,K("active"),g),_defineProperty(c,K("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",{"aria-selected":g,"aria-disabled":a.disabled,role:"option",tabIndex:"-1",className:n,onClick:o,onKeyPress:o,children:/*#__PURE__*/_jsx("a",{disabled:h.disabled,children:/*#__PURE__*/_jsx(Option,_objectSpread(_objectSpread({},h),{},{classNames:E}))})},b))},la=!!A.length;return M&&(""!==C||""!==Q)&&(la&&null===U&&V(0),!la&&null!==U&&V(null)),/*#__PURE__*/_jsxs("div",{// eslint-disable-line jsx-a11y/no-static-element-interactions
|
|
7
|
+
ref:aa,className:classNames(K("np-select"),u?K("btn-block"):null,K("btn-group")),onKeyDown:function handleKeyDown(a){switch(a.keyCode){case KeyCodes.UP:case KeyCodes.DOWN:M?c(a.keyCode===KeyCodes.UP?-1:1):N(!0),stopPropagation(a);break;case KeyCodes.SPACE:a.target!==_.current&&(M?b():N(!0),stopPropagation(a));break;case KeyCodes.ENTER:M?b():N(!0),stopPropagation(a);break;case KeyCodes.ESCAPE:ja(),stopPropagation(a);break;case KeyCodes.TAB:M&&b();break;default:}},onTouchMove:function handleTouchStart(a){a.currentTarget===a.target&&M&&ja()},onFocus:function handleOnFocus(a){y&&y(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}z&&z(a)},children:[/*#__PURE__*/_jsxs(Button,_objectSpread(_objectSpread({ref:ba,id:n,block:u,size:t,htmlType:"button",className:classNames(K("np-dropdown-toggle"),q?K("np-dropdown-toggle-navy"):null)// reset Button's styles
|
|
8
8
|
,type:null,priority:null,disabled:p,role:"combobox","aria-controls":"".concat(n,"-listbox"),"aria-expanded":M,"aria-autocomplete":"none",onClick:function handleOnClick(){N(!0)}},H),{},{children:[v?/*#__PURE__*/_jsx(Option,_objectSpread(_objectSpread({},v),{},{classNames:E,selected:!0})):/*#__PURE__*/_jsx("span",{className:K("form-control-placeholder"),children:m}),/*#__PURE__*/_jsx(Chevron// disabled={disabled}
|
|
9
|
-
,{className:classNames(K("tw-icon"),K("tw-chevron-up-icon"),K("tw-chevron"),K("bottom"),K("np-select-chevron"))})]})),
|
|
9
|
+
,{className:classNames(K("tw-icon"),K("tw-chevron-up-icon"),K("tw-chevron"),K("bottom"),K("np-select-chevron"))})]})),ga?da?/*#__PURE__*/_jsx(Drawer,{open:M,headerTitle:D||J(messages.searchPlaceholder),onClose:ja,children:/*#__PURE__*/_jsx(f,{})}):/*#__PURE__*/_jsx(BottomSheet,{open:M,onClose:ja,children:/*#__PURE__*/_jsx(f,{className:"p-a-1"})}):/*#__PURE__*/_jsx(Panel,{open:M,flip:!1,anchorRef:aa,anchorWidth:ea,position:F?Position.TOP:Position.BOTTOM,onClose:ja,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
10
|
* Search toggle
|
|
11
11
|
* if `true` default search functionality being enabled (not case sensitive search in option labels & currency props)
|
|
12
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
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
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
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,dropdownProps:PropTypes.object},Select.defaultProps={id:void 0,placeholder:void 0,size:"md",dropdownRight:null,dropdownWidth:
|
|
16
|
+
*/onSearchChange:PropTypes.func,searchValue:PropTypes.string,searchPlaceholder:PropTypes.string,classNames:PropTypes.objectOf(PropTypes.string),dropdownUp:PropTypes.bool,buttonProps:PropTypes.object,dropdownProps: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:{},dropdownProps:{}};
|