@transferwise/components 41.5.2-next-253e6dc0e2.87 → 41.5.2-next-8f4a4f63cd.87

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.
@@ -1 +1 @@
1
- import _defineProperty from"@babel/runtime/helpers/defineProperty";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 Body from"../body/Body";import{Typography}from"../common";import CloseButton from"../common/closeButton/CloseButton";import{useTheme}from"../common/hooks";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";var Chip=function(a){var b=a.label,c=a.value,d=a.onRemove,e=a.onClick,f=a.onKeyPress,g=a.className,h=void 0===g?void 0:g,i=a["aria-label"],j=a["aria-checked"],k=a.role,l=a.closeButton,m=e||f,n=m?"button":void 0,o=m?0:-1,p=useTheme(),q=p.isThemeModern;return/*#__PURE__*/_jsxs("div",_objectSpread(_objectSpread({role:null!==k&&void 0!==k?k:n,tabIndex:o,"aria-label":i,"aria-checked":j,className:classNames("np-chip","d-flex","align-items-center","justify-content-between",h)},m&&{onClick:e,onKeyPress:f}),{},{children:[/*#__PURE__*/_jsx(Body,{"aria-hidden":!!d,type:Typography.BODY_DEFAULT_BOLD,children:b}),d?/*#__PURE__*/_jsx(CloseButton/* @ts-expect-error remove when CloseButton will be written on TS */,{className:"btn-unstyled m-l-1","aria-label":l&&l["aria-label"],size:16,filled:q,onClick:d}):null]}),c)};export default Chip;
1
+ import _defineProperty from"@babel/runtime/helpers/defineProperty";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 Body from"../body/Body";import{Typography}from"../common";import CloseButton from"../common/closeButton/CloseButton";import{useTheme}from"../common/hooks";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";var Chip=function(a){var b=a.label,c=a.value,d=a.onRemove,e=a.onClick,f=a.onKeyPress,g=a.className,h=void 0===g?void 0:g,i=a["aria-label"],j=a["aria-checked"],k=a.role,l=a.closeButton,m=e||f,n=m?"button":void 0,o=m?0:-1,p=useTheme(),q=p.isThemeModern;return/*#__PURE__*/_jsxs("div",_objectSpread(_objectSpread({role:null!==k&&void 0!==k?k:n,tabIndex:o,"aria-label":i,"aria-checked":j,className:classNames("np-chip","d-flex","align-items-center","justify-content-between",h)},m&&{onClick:e,onKeyPress:f}),{},{children:[/*#__PURE__*/_jsx(Body,{"aria-hidden":!!d,type:Typography.BODY_DEFAULT_BOLD,children:b}),d?/*#__PURE__*/_jsx(CloseButton/* @ts-expect-error remove when CloseButton will be written on TS */,{className:q?"btn-unstyled":"btn-unstyled m-l-1","aria-label":l&&l["aria-label"],size:16,filled:q,onClick:d}):null]}),c)};export default Chip;
@@ -1 +1 @@
1
- import{Cross,CrossCircleFill}from"@transferwise/icons";import classNames from"classnames";import PropTypes from"prop-types";import{forwardRef}from"react";import{useIntl}from"react-intl";import messages from"./CloseButton.messages";import{jsx as _jsx}from"react/jsx-runtime";export var CloseButton=/*#__PURE__*/forwardRef(function(a,b){var c=useIntl(),d=a.onClick,e=a.size,f=a.filled,g=a.className,h=a["aria-label"]||c.formatMessage(messages.ariaLabel),i=f?CrossCircleFill:Cross;return/*#__PURE__*/_jsx("button",{ref:b,type:"button",className:classNames("np-close-button","close btn-link","text-no-decoration",{"np-close-button--large":e===CloseButton.Size.LARGE},g),"aria-label":h,onClick:d,children:/*#__PURE__*/_jsx(i,{size:e})})});CloseButton.Size={SMALL:16,LARGE:24},CloseButton.propTypes={onClick:PropTypes.func.isRequired,className:PropTypes.string,size:PropTypes.oneOf(Object.values(CloseButton.Size)),filled:PropTypes.bool,"aria-label":PropTypes.string},CloseButton.defaultProps={className:null,size:CloseButton.Size.LARGE,filled:!1,"aria-label":void 0};export default CloseButton;
1
+ import{Cross,CrossCircleFill}from"@transferwise/icons";import classNames from"classnames";import PropTypes from"prop-types";import{forwardRef}from"react";import{useIntl}from"react-intl";import{useTheme}from"../hooks";import messages from"./CloseButton.messages";import{jsx as _jsx}from"react/jsx-runtime";export var CloseButton=/*#__PURE__*/forwardRef(function(a,b){var c=useTheme(),d=c.isThemeModern,e=useIntl(),f=a.onClick,g=a.size,h=a.filled,i=a.className,j=a["aria-label"]||e.formatMessage(messages.ariaLabel),k=h?CrossCircleFill:Cross;return/*#__PURE__*/_jsx("button",{ref:b,type:"button",className:classNames("np-close-button","close btn-link","text-no-decoration",{"np-close-button--large":g===CloseButton.Size.LARGE},i),"aria-label":j,onClick:f,children:/*#__PURE__*/_jsx(k,{size:g})})});CloseButton.Size={SMALL:16,LARGE:24},CloseButton.propTypes={onClick:PropTypes.func.isRequired,className:PropTypes.string,size:PropTypes.oneOf(Object.values(CloseButton.Size)),filled:PropTypes.bool,"aria-label":PropTypes.string},CloseButton.defaultProps={className:null,size:CloseButton.Size.LARGE,filled:!1,"aria-label":void 0};export default CloseButton;
@@ -1 +1 @@
1
- import classNames from"classnames";import PropTypes from"prop-types";import{Position,Typography}from"../common";import CloseButton from"../common/closeButton";import{useLayout,useTheme}from"../common/hooks";import Dimmer from"../dimmer";import SlidingPanel from"../slidingPanel";import Title from"../title";import{logActionRequiredIf}from"../utilities";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";var Drawer=function(a){var b=a.children,c=a.className,d=a.footerContent,e=a.headerTitle,f=a.onClose,g=a.open,h=a.position;logActionRequiredIf("Drawer now expects `onClose`, and will soon make this prop required. Please update your usage to provide it.",!f);var i=useLayout(),j=i.isMobile,k=useTheme(),l=k.theme,m=k.isThemeModern;return/*#__PURE__*/_jsx(Dimmer,{open:g,onClose:f,children:/*#__PURE__*/_jsx(SlidingPanel,{open:g,position:j?Position.BOTTOM:h,children:/*#__PURE__*/_jsxs("div",{className:classNames("np-drawer","np-theme-".concat(l),c),children:[/*#__PURE__*/_jsxs("div",{className:classNames("np-drawer-header",{"np-drawer-header--withborder":e}),children:[/*#__PURE__*/_jsx(CloseButton,{onClick:f}),e&&/*#__PURE__*/_jsx(Title,{type:m?Typography.TITLE_BODY:Typography.TITLE_SUBSECTION,className:"m-l-2",children:e})]}),b&&/*#__PURE__*/_jsx("div",{className:classNames("np-drawer-content"),children:b}),d&&/*#__PURE__*/_jsx("div",{className:classNames("np-drawer-footer"),children:d})]})})})};Drawer.propTypes={/** The content to appear in the drawer body. */children:PropTypes.node,className:PropTypes.string,/** The content to appear in the drawer footer. */footerContent:PropTypes.node,/** The content to appear in the drawer header. */headerTitle:PropTypes.node,/** The action to perform on close click. */onClose:PropTypes.func,/** The status of Drawer either open or not. */open:PropTypes.bool,/** The placement of Drawer on the screen either left or right. On mobile it will default to bottom. */position:PropTypes.oneOf(["left","right","bottom"])},Drawer.defaultProps={children:null,className:void 0,footerContent:null,headerTitle:null,onClose:null,open:!1,position:Position.RIGHT};export default Drawer;
1
+ import classNames from"classnames";import PropTypes from"prop-types";import{Position,Typography}from"../common";import CloseButton from"../common/closeButton";import{useLayout,useTheme}from"../common/hooks";import Dimmer from"../dimmer";import SlidingPanel from"../slidingPanel";import Title from"../title";import{logActionRequiredIf}from"../utilities";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";var Drawer=function(a){var b=a.children,c=a.className,d=a.footerContent,e=a.headerTitle,f=a.onClose,g=a.open,h=a.position;logActionRequiredIf("Drawer now expects `onClose`, and will soon make this prop required. Please update your usage to provide it.",!f);var i=useLayout(),j=i.isMobile,k=useTheme(),l=k.theme,m=k.isThemeModern;return/*#__PURE__*/_jsx(Dimmer,{open:g,onClose:f,children:/*#__PURE__*/_jsx(SlidingPanel,{open:g,position:j?Position.BOTTOM:h,children:/*#__PURE__*/_jsxs("div",{className:classNames("np-drawer","np-theme-".concat(l),c),children:[/*#__PURE__*/_jsxs("div",{className:classNames("np-drawer-header",{"np-drawer-header--withborder":e}),children:[!m&&/*#__PURE__*/_jsx(CloseButton,{onClick:f}),e&&/*#__PURE__*/_jsx(Title,{type:m?Typography.TITLE_BODY:Typography.TITLE_SUBSECTION,className:m?"":"m-l-2",children:e}),m&&/*#__PURE__*/_jsx(CloseButton,{onClick:f})]}),b&&/*#__PURE__*/_jsx("div",{className:classNames("np-drawer-content"),children:b}),d&&/*#__PURE__*/_jsx("div",{className:classNames("np-drawer-footer"),children:d})]})})})};Drawer.propTypes={/** The content to appear in the drawer body. */children:PropTypes.node,className:PropTypes.string,/** The content to appear in the drawer footer. */footerContent:PropTypes.node,/** The content to appear in the drawer header. */headerTitle:PropTypes.node,/** The action to perform on close click. */onClose:PropTypes.func,/** The status of Drawer either open or not. */open:PropTypes.bool,/** The placement of Drawer on the screen either left or right. On mobile it will default to bottom. */position:PropTypes.oneOf(["left","right","bottom"])},Drawer.defaultProps={children:null,className:void 0,footerContent:null,headerTitle:null,onClose:null,open:!1,position:Position.RIGHT};export default Drawer;
@@ -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,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
+ 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}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__*/_jsx(_Fragment,{children:/*#__PURE__*/_jsx("p",{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,11 +1,11 @@
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 classNames from"classnames";import PropTypes from"prop-types";import{useState,useEffect,useRef,useMemo}from"react";import{useIntl}from"react-intl";import Body from"../body";import Button from"../button";import Chevron from"../chevron";import{Position,getSimpleRandomId}from"../common";import BottomSheet from"../common/bottomSheet";import{stopPropagation}from"../common/domHelpers";import{useLayout,useTheme}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!==V){var a=la().filter(isActionableOption);0<a.length&&e(a[V])}}function c(a){var b=la().filter(isActionableOption),c=b.reduce(function(a,b,c){return null===a?k(v,b)?c:null:a},null),d=null===X.current||void 0===X.current?-1:X.current,e=d;null===d&&null===c&&W(0),null===d&&null!==c&&(e=c);var f=e+a,g=Math.max(Math.min(0,b.length-1),f);W(g)}function d(a){return function(b){stopPropagation(b),e(a)}}function e(a){x(isPlaceholderOption(a)?DEFAULT_SELECTED_OPTION:a),na()}function f(){var a,b=0<arguments.length&&void 0!==arguments[0]?arguments[0]:{},c=b.className,d=classNames(L("np-dropdown-menu"),(a={},_defineProperty(a,L("np-dropdown-menu-desktop"),!ka),_defineProperty(a,L("np-dropdown-menu-".concat(r)),!ka&&!fa),a),L(c)),e=la();return/*#__PURE__*/_jsxs("ul",_objectSpread(_objectSpread({ref:da,id:ia,role:"listbox",tabIndex:"-1",className:d},G),{},{children:[!o&&!ea&&null!==m&&/*#__PURE__*/_jsx(h,{}),ea&&/*#__PURE__*/_jsx(SearchBox,{ref:aa,classNames:E,value:C||R,placeholder:D||K(messages.searchPlaceholder),onChange:ma,onClick:stopPropagation}),e.slice(0,$).map(oa),$<e.length&&/*#__PURE__*/_jsx(g,{})]}))}function g(){function a(a){stopPropagation(a),_($+DEFAULT_OPTIONS_PAGE_SIZE)}return/*#__PURE__*/ (/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */_jsx("li",{className:classNames(L("clickable"),L("border-bottom"),L("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(L("clickable"),L("border-bottom")),onClick:d(a),onKeyPress:d(a),children:/*#__PURE__*/_jsx("a",{children:m})}))}// eslint-disable-next-line react/prop-types
4
- function i(a){var b=a.index;return/*#__PURE__*/_jsx("li",{className:L("np-separator"),"aria-hidden":!0},b)}// eslint-disable-next-line react/prop-types
5
- function j(a){var b=a.index,c=a.children;return/*#__PURE__*/_jsx("li",{className:classNames(L("np-dropdown-header"),L("np-text-title-group")),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 la().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=useTheme(),J=useIntl(),K=J.formatMessage,L=function(a){return E[a]||a},s=useState(!1),M=_slicedToArray(s,2),N=M[0],O=M[1],P=useState(DEFAULT_SEARCH_VALUE),Q=_slicedToArray(P,2),R=Q[0],S=Q[1],T=useState(null),U=_slicedToArray(T,2),V=U[0],W=U[1],X=useRef(),Y=useState(DEFAULT_OPTIONS_PAGE_SIZE),Z=_slicedToArray(Y,2),$=Z[0],_=Z[1],aa=useRef(null),ba=useRef(null),ca=useRef(null),da=useRef(null),ea=!!B||!!w,fa=null===r,ga=useMemo(function(){return getSimpleRandomId("np-select-")},[]),ha=n||ga,ia="".concat(ha,"-listbox"),ja=useLayout(),ka=ja.isMobile,la=function(){return w&&R?A.filter(function(a){return isActionableOption(a)&&!isPlaceholderOption(a)}).filter(function(a){return"function"==typeof w?w(a,R):defaultFilterFunction(a,R)}):A},ma=function(a){_(DEFAULT_OPTIONS_PAGE_SIZE),S(a.target.value),B&&B(a.target.value)};useEffect(function(){X.current=V,N&&(!ka||""!==R)&&(ea&&!!aa.current&&aa.current.focus(),!ea&&da.current&&da.current.focus())},[N,R,ea,ka,V]);var na=function(){O(!1),W(null),ca.current&&ca.current.focus()},oa=function(a,b){var c,e=a;if(isSparatorOption(e)&&null!==e&&void 0!==e&&e.separator)return/*#__PURE__*/_jsx(i,{index:b});var f=a;if(isHeaderOption(f)&&f.header)return/*#__PURE__*/_jsx(j,{index:b,children:f.header});var g=k(v,a),h=a,m=!h.disabled&&V===l(b),n=classNames(L("np-dropdown-item"),h.disabled?[L("disabled")]:L("clickable"),(c={},_defineProperty(c,L("active"),g),_defineProperty(c,L("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))},pa=!!A.length;return N&&(""!==C||""!==R)&&(pa&&null===V&&W(0),!pa&&null!==V&&W(null)),/*#__PURE__*/_jsxs("div",{// eslint-disable-line jsx-a11y/no-static-element-interactions
6
- ref:ba,className:classNames(L("np-select"),u?L("btn-block"):null,L("btn-group")),onKeyDown:function handleKeyDown(a){switch(a.keyCode){case KeyCodes.UP:case KeyCodes.DOWN:N?c(a.keyCode===KeyCodes.UP?-1:1):O(!0),stopPropagation(a);break;case KeyCodes.SPACE:a.target!==aa.current&&(N?b():O(!0),stopPropagation(a));break;case KeyCodes.ENTER:N?b():O(!0),stopPropagation(a);break;case KeyCodes.ESCAPE:na(),stopPropagation(a);break;case KeyCodes.TAB:N&&b();break;default:}},onTouchMove:function handleTouchStart(a){a.currentTarget===a.target&&N&&na()},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:ca,id:ha,block:u,size:t,htmlType:"button",className:classNames(L("np-dropdown-toggle"),L("np-text-body-large"),"string"==typeof E&&-1!==E.search("form-control")?L("form-control"):null,q?L("np-dropdown-toggle-navy"):null)// reset Button's styles
7
- ,type:null,priority:null,disabled:p,role:"combobox","aria-controls":ia,"aria-expanded":N,"aria-autocomplete":"none",onClick:function handleOnClick(){O(!0)}},H),{},{children:[v?/*#__PURE__*/_jsx(Option,_objectSpread(_objectSpread({},v),{},{classNames:E,selected:!0})):/*#__PURE__*/_jsx(Body,{className:L("form-control-placeholder"),children:m}),/*#__PURE__*/_jsx(Chevron// disabled={disabled}
8
- ,{className:classNames(L("tw-icon"),L("tw-chevron-up-icon"),L("tw-chevron"),L("bottom"),L("np-select-chevron"))})]})),ka?ea?/*#__PURE__*/_jsx(Drawer,{className:I.className,open:N,headerTitle:D||K(messages.searchPlaceholder),onClose:na,children:f()}):/*#__PURE__*/_jsx(BottomSheet,{open:N,onClose:na,children:f({className:"p-a-1"})}):/*#__PURE__*/_jsx(Panel,{className:I.className,open:N,flip:!1,altAxis:!0,anchorRef:ba,anchorWidth:fa,position:F?Position.TOP:Position.BOTTOM,onClose:na,children: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}),/**
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!==X){var a=na().filter(isActionableOption);0<a.length&&e(a[X])}}function c(a){var b=na().filter(isActionableOption),c=b.reduce(function(a,b,c){return null===a?k(v,b)?c:null:a},null),d=null===Z.current||void 0===Z.current?-1:Z.current,e=d;null===d&&null===c&&Y(0),null===d&&null!==c&&(e=c);var f=e+a,g=Math.max(Math.min(0,b.length-1),f);Y(g)}function d(a){return function(b){stopPropagation(b),e(a)}}function e(a){x(isPlaceholderOption(a)?DEFAULT_SELECTED_OPTION:a),pa()}function f(){var a,b=0<arguments.length&&void 0!==arguments[0]?arguments[0]:{},c=b.className,d=classNames(N("np-dropdown-menu"),(a={},_defineProperty(a,N("np-dropdown-menu-desktop"),!ma),_defineProperty(a,N("np-dropdown-menu-".concat(r)),!ma&&!ha),a),N(c)),e=na();return/*#__PURE__*/_jsxs("ul",_objectSpread(_objectSpread({ref:fa,id:ka,role:"listbox",tabIndex:"-1",className:d},G),{},{children:[!o&&!ga&&null!==m&&/*#__PURE__*/_jsx(h,{}),ga&&/*#__PURE__*/_jsx(SearchBox,{ref:ca,classNames:E,value:C||T,placeholder:D||M(messages.searchPlaceholder),onChange:oa,onClick:stopPropagation}),e.slice(0,aa).map(qa),aa<e.length&&/*#__PURE__*/_jsx(g,{})]}))}function g(){function a(a){stopPropagation(a),ba(aa+DEFAULT_OPTIONS_PAGE_SIZE)}return/*#__PURE__*/ (/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */_jsx("li",{className:classNames(N("clickable"),N("border-bottom"),N("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(N("clickable"),N("border-bottom")),onClick:d(a),onKeyPress:d(a),children:/*#__PURE__*/_jsx("a",{children:m})}))}// eslint-disable-next-line react/prop-types
4
+ function i(a){var b=a.index;return/*#__PURE__*/_jsx("li",{className:N("np-separator"),"aria-hidden":!0},b)}// eslint-disable-next-line react/prop-types
5
+ function j(a){var b=a.index,c=a.children;return/*#__PURE__*/_jsx("li",{className:classNames(N("np-dropdown-header"),N("np-text-title-group")),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 na().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=useTheme(),J=I.theme,K=I.isThemeModern,L=useIntl(),M=L.formatMessage,N=function(a){return E[a]||a},s=useState(!1),O=_slicedToArray(s,2),P=O[0],Q=O[1],R=useState(DEFAULT_SEARCH_VALUE),S=_slicedToArray(R,2),T=S[0],U=S[1],V=useState(null),W=_slicedToArray(V,2),X=W[0],Y=W[1],Z=useRef(),$=useState(DEFAULT_OPTIONS_PAGE_SIZE),_=_slicedToArray($,2),aa=_[0],ba=_[1],ca=useRef(null),da=useRef(null),ea=useRef(null),fa=useRef(null),ga=!!B||!!w,ha=null===r,ia=useMemo(function(){return getSimpleRandomId("np-select-")},[]),ja=n||ia,ka="".concat(ja,"-listbox"),la=useLayout(),ma=la.isMobile,na=function(){return w&&T?A.filter(function(a){return isActionableOption(a)&&!isPlaceholderOption(a)}).filter(function(a){return"function"==typeof w?w(a,T):defaultFilterFunction(a,T)}):A},oa=function(a){ba(DEFAULT_OPTIONS_PAGE_SIZE),U(a.target.value),B&&B(a.target.value)};useEffect(function(){Z.current=X,P&&(!ma||""!==T)&&(ga&&!!ca.current&&ca.current.focus(),!ga&&fa.current&&fa.current.focus())},[P,T,ga,ma,X]);var pa=function(){Q(!1),Y(null),ea.current&&ea.current.focus()},qa=function(a,b){var c,e=a;if(isSparatorOption(e)&&null!==e&&void 0!==e&&e.separator)return/*#__PURE__*/_jsx(i,{index:b});var f=a;if(isHeaderOption(f)&&f.header)return/*#__PURE__*/_jsx(j,{index:b,children:f.header});var g=k(v,a),h=a,m=!h.disabled&&X===l(b),n=classNames(N("np-dropdown-item"),h.disabled?[N("disabled")]:N("clickable"),(c={},_defineProperty(c,N("active"),g),_defineProperty(c,N("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))},ra=!!A.length;return P&&(""!==C||""!==T)&&(ra&&null===X&&Y(0),!ra&&null!==X&&Y(null)),/*#__PURE__*/_jsxs("div",{// eslint-disable-line jsx-a11y/no-static-element-interactions
6
+ ref:da,className:classNames(N("np-select"),u?N("btn-block"):null,N("btn-group")),onKeyDown:function handleKeyDown(a){switch(a.keyCode){case KeyCodes.UP:case KeyCodes.DOWN:P?c(a.keyCode===KeyCodes.UP?-1:1):Q(!0),stopPropagation(a);break;case KeyCodes.SPACE:a.target!==ca.current&&(P?b():Q(!0),stopPropagation(a));break;case KeyCodes.ENTER:P?b():Q(!0),stopPropagation(a);break;case KeyCodes.ESCAPE:pa(),stopPropagation(a);break;case KeyCodes.TAB:P&&b();break;default:}},onTouchMove:function handleTouchStart(a){a.currentTarget===a.target&&P&&pa()},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:ea,id:ja,block:u,size:t,htmlType:"button",className:classNames(N("np-dropdown-toggle"),N("np-text-body-large"),"string"==typeof E&&-1!==E.search("form-control")?N("form-control"):null,q?N("np-dropdown-toggle-navy"):null)// reset Button's styles
7
+ ,type:null,priority:null,disabled:p,role:"combobox","aria-controls":ka,"aria-expanded":P,"aria-autocomplete":"none",onClick:function handleOnClick(){Q(!0)}},H),{},{children:[v?/*#__PURE__*/_jsx(Option,_objectSpread(_objectSpread({},v),{},{classNames:E,selected:!0})):/*#__PURE__*/_jsx(Body,{className:N("form-control-placeholder"),children:m}),/*#__PURE__*/_jsx(Chevron// disabled={disabled}
8
+ ,{className:classNames(N("tw-icon"),N("tw-chevron-up-icon"),N("tw-chevron"),N("bottom"),N("np-select-chevron"))})]})),ma?ga?/*#__PURE__*/_jsx(Drawer,{open:P,headerTitle:D||M(messages.searchPlaceholder),onClose:pa,children:f()}):/*#__PURE__*/_jsx(BottomSheet,{open:P,onClose:pa,children:f({className:"p-a-1"})}):/*#__PURE__*/_jsx(Panel,{open:P,flip:!1,altAxis:!0,anchorRef:da,anchorWidth:ha,position:F?Position.TOP:Position.BOTTOM,onClose:pa,children: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}),/**
9
9
  * Search toggle
10
10
  * if `true` default search functionality being enabled (not case sensitive search in option labels & currency props)
11
11
  * 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.
@@ -1 +1 @@
1
- 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";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 Body from"../body/Body";import{Typography}from"../common";import CloseButton from"../common/closeButton/CloseButton";import{useTheme}from"../common/hooks";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";var Chip=function(a){var b=a.label,c=a.value,d=a.onRemove,e=a.onClick,f=a.onKeyPress,g=a.className,h=void 0===g?void 0:g,i=a["aria-label"],j=a["aria-checked"],k=a.role,l=a.closeButton,m=e||f,n=m?"button":void 0,o=m?0:-1,p=useTheme(),q=p.isThemeModern;return/*#__PURE__*/_jsxs("div",_objectSpread(_objectSpread({role:null!==k&&void 0!==k?k:n,tabIndex:o,"aria-label":i,"aria-checked":j,className:classNames("np-chip","d-flex","align-items-center","justify-content-between",h)},m&&{onClick:e,onKeyPress:f}),{},{children:[/*#__PURE__*/_jsx(Body,{"aria-hidden":!!d,type:Typography.BODY_DEFAULT_BOLD,children:b}),d?/*#__PURE__*/_jsx(CloseButton/* @ts-expect-error remove when CloseButton will be written on TS */,{className:"btn-unstyled m-l-1","aria-label":l&&l["aria-label"],size:16,filled:q,onClick:d}):null]}),c)};export default Chip;
1
+ 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";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 Body from"../body/Body";import{Typography}from"../common";import CloseButton from"../common/closeButton/CloseButton";import{useTheme}from"../common/hooks";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";var Chip=function(a){var b=a.label,c=a.value,d=a.onRemove,e=a.onClick,f=a.onKeyPress,g=a.className,h=void 0===g?void 0:g,i=a["aria-label"],j=a["aria-checked"],k=a.role,l=a.closeButton,m=e||f,n=m?"button":void 0,o=m?0:-1,p=useTheme(),q=p.isThemeModern;return/*#__PURE__*/_jsxs("div",_objectSpread(_objectSpread({role:null!==k&&void 0!==k?k:n,tabIndex:o,"aria-label":i,"aria-checked":j,className:classNames("np-chip","d-flex","align-items-center","justify-content-between",h)},m&&{onClick:e,onKeyPress:f}),{},{children:[/*#__PURE__*/_jsx(Body,{"aria-hidden":!!d,type:Typography.BODY_DEFAULT_BOLD,children:b}),d?/*#__PURE__*/_jsx(CloseButton/* @ts-expect-error remove when CloseButton will be written on TS */,{className:q?"btn-unstyled":"btn-unstyled m-l-1","aria-label":l&&l["aria-label"],size:16,filled:q,onClick:d}):null]}),c)};export default Chip;
@@ -1 +1 @@
1
- import"core-js/modules/es.object.values.js";import{Cross,CrossCircleFill}from"@transferwise/icons";import classNames from"classnames";import PropTypes from"prop-types";import{forwardRef}from"react";import{useIntl}from"react-intl";import messages from"./CloseButton.messages";import{jsx as _jsx}from"react/jsx-runtime";export var CloseButton=/*#__PURE__*/forwardRef(function(a,b){var c=useIntl(),d=a.onClick,e=a.size,f=a.filled,g=a.className,h=a["aria-label"]||c.formatMessage(messages.ariaLabel),i=f?CrossCircleFill:Cross;return/*#__PURE__*/_jsx("button",{ref:b,type:"button",className:classNames("np-close-button","close btn-link","text-no-decoration",{"np-close-button--large":e===CloseButton.Size.LARGE},g),"aria-label":h,onClick:d,children:/*#__PURE__*/_jsx(i,{size:e})})});CloseButton.Size={SMALL:16,LARGE:24},CloseButton.propTypes={onClick:PropTypes.func.isRequired,className:PropTypes.string,size:PropTypes.oneOf(Object.values(CloseButton.Size)),filled:PropTypes.bool,"aria-label":PropTypes.string},CloseButton.defaultProps={className:null,size:CloseButton.Size.LARGE,filled:!1,"aria-label":void 0};export default CloseButton;
1
+ import"core-js/modules/es.object.values.js";import{Cross,CrossCircleFill}from"@transferwise/icons";import classNames from"classnames";import PropTypes from"prop-types";import{forwardRef}from"react";import{useIntl}from"react-intl";import{useTheme}from"../hooks";import messages from"./CloseButton.messages";import{jsx as _jsx}from"react/jsx-runtime";export var CloseButton=/*#__PURE__*/forwardRef(function(a,b){var c=useTheme(),d=c.isThemeModern,e=useIntl(),f=a.onClick,g=a.size,h=a.filled,i=a.className,j=a["aria-label"]||e.formatMessage(messages.ariaLabel),k=h?CrossCircleFill:Cross;return/*#__PURE__*/_jsx("button",{ref:b,type:"button",className:classNames("np-close-button","close btn-link","text-no-decoration",{"np-close-button--large":g===CloseButton.Size.LARGE},i),"aria-label":j,onClick:f,children:/*#__PURE__*/_jsx(k,{size:g})})});CloseButton.Size={SMALL:16,LARGE:24},CloseButton.propTypes={onClick:PropTypes.func.isRequired,className:PropTypes.string,size:PropTypes.oneOf(Object.values(CloseButton.Size)),filled:PropTypes.bool,"aria-label":PropTypes.string},CloseButton.defaultProps={className:null,size:CloseButton.Size.LARGE,filled:!1,"aria-label":void 0};export default CloseButton;
@@ -1 +1 @@
1
- import classNames from"classnames";import PropTypes from"prop-types";import{Position,Typography}from"../common";import CloseButton from"../common/closeButton";import{useLayout,useTheme}from"../common/hooks";import Dimmer from"../dimmer";import SlidingPanel from"../slidingPanel";import Title from"../title";import{logActionRequiredIf}from"../utilities";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";var Drawer=function(a){var b=a.children,c=a.className,d=a.footerContent,e=a.headerTitle,f=a.onClose,g=a.open,h=a.position;logActionRequiredIf("Drawer now expects `onClose`, and will soon make this prop required. Please update your usage to provide it.",!f);var i=useLayout(),j=i.isMobile,k=useTheme(),l=k.theme,m=k.isThemeModern;return/*#__PURE__*/_jsx(Dimmer,{open:g,onClose:f,children:/*#__PURE__*/_jsx(SlidingPanel,{open:g,position:j?Position.BOTTOM:h,children:/*#__PURE__*/_jsxs("div",{className:classNames("np-drawer","np-theme-".concat(l),c),children:[/*#__PURE__*/_jsxs("div",{className:classNames("np-drawer-header",{"np-drawer-header--withborder":e}),children:[/*#__PURE__*/_jsx(CloseButton,{onClick:f}),e&&/*#__PURE__*/_jsx(Title,{type:m?Typography.TITLE_BODY:Typography.TITLE_SUBSECTION,className:"m-l-2",children:e})]}),b&&/*#__PURE__*/_jsx("div",{className:classNames("np-drawer-content"),children:b}),d&&/*#__PURE__*/_jsx("div",{className:classNames("np-drawer-footer"),children:d})]})})})};Drawer.propTypes={/** The content to appear in the drawer body. */children:PropTypes.node,className:PropTypes.string,/** The content to appear in the drawer footer. */footerContent:PropTypes.node,/** The content to appear in the drawer header. */headerTitle:PropTypes.node,/** The action to perform on close click. */onClose:PropTypes.func,/** The status of Drawer either open or not. */open:PropTypes.bool,/** The placement of Drawer on the screen either left or right. On mobile it will default to bottom. */position:PropTypes.oneOf(["left","right","bottom"])},Drawer.defaultProps={children:null,className:void 0,footerContent:null,headerTitle:null,onClose:null,open:!1,position:Position.RIGHT};export default Drawer;
1
+ import classNames from"classnames";import PropTypes from"prop-types";import{Position,Typography}from"../common";import CloseButton from"../common/closeButton";import{useLayout,useTheme}from"../common/hooks";import Dimmer from"../dimmer";import SlidingPanel from"../slidingPanel";import Title from"../title";import{logActionRequiredIf}from"../utilities";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";var Drawer=function(a){var b=a.children,c=a.className,d=a.footerContent,e=a.headerTitle,f=a.onClose,g=a.open,h=a.position;logActionRequiredIf("Drawer now expects `onClose`, and will soon make this prop required. Please update your usage to provide it.",!f);var i=useLayout(),j=i.isMobile,k=useTheme(),l=k.theme,m=k.isThemeModern;return/*#__PURE__*/_jsx(Dimmer,{open:g,onClose:f,children:/*#__PURE__*/_jsx(SlidingPanel,{open:g,position:j?Position.BOTTOM:h,children:/*#__PURE__*/_jsxs("div",{className:classNames("np-drawer","np-theme-".concat(l),c),children:[/*#__PURE__*/_jsxs("div",{className:classNames("np-drawer-header",{"np-drawer-header--withborder":e}),children:[!m&&/*#__PURE__*/_jsx(CloseButton,{onClick:f}),e&&/*#__PURE__*/_jsx(Title,{type:m?Typography.TITLE_BODY:Typography.TITLE_SUBSECTION,className:m?"":"m-l-2",children:e}),m&&/*#__PURE__*/_jsx(CloseButton,{onClick:f})]}),b&&/*#__PURE__*/_jsx("div",{className:classNames("np-drawer-content"),children:b}),d&&/*#__PURE__*/_jsx("div",{className:classNames("np-drawer-footer"),children:d})]})})})};Drawer.propTypes={/** The content to appear in the drawer body. */children:PropTypes.node,className:PropTypes.string,/** The content to appear in the drawer footer. */footerContent:PropTypes.node,/** The content to appear in the drawer header. */headerTitle:PropTypes.node,/** The action to perform on close click. */onClose:PropTypes.func,/** The status of Drawer either open or not. */open:PropTypes.bool,/** The placement of Drawer on the screen either left or right. On mobile it will default to bottom. */position:PropTypes.oneOf(["left","right","bottom"])},Drawer.defaultProps={children:null,className:void 0,footerContent:null,headerTitle:null,onClose:null,open:!1,position:Position.RIGHT};export default Drawer;
@@ -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,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
+ 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}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__*/_jsx(_Fragment,{children:/*#__PURE__*/_jsx("p",{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,11 +1,11 @@
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"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,useMemo}from"react";import{useIntl}from"react-intl";import Body from"../body";import Button from"../button";import Chevron from"../chevron";import{Position,getSimpleRandomId}from"../common";import BottomSheet from"../common/bottomSheet";import{stopPropagation}from"../common/domHelpers";import{useLayout,useTheme}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!==V){var a=la().filter(isActionableOption);0<a.length&&e(a[V])}}function c(a){var b=la().filter(isActionableOption),c=b.reduce(function(a,b,c){return null===a?k(v,b)?c:null:a},null),d=null===X.current||void 0===X.current?-1:X.current,e=d;null===d&&null===c&&W(0),null===d&&null!==c&&(e=c);var f=e+a,g=Math.max(Math.min(0,b.length-1),f);W(g)}function d(a){return function(b){stopPropagation(b),e(a)}}function e(a){x(isPlaceholderOption(a)?DEFAULT_SELECTED_OPTION:a),na()}function f(){var a,b=0<arguments.length&&void 0!==arguments[0]?arguments[0]:{},c=b.className,d=classNames(L("np-dropdown-menu"),(a={},_defineProperty(a,L("np-dropdown-menu-desktop"),!ka),_defineProperty(a,L("np-dropdown-menu-".concat(r)),!ka&&!fa),a),L(c)),e=la();return/*#__PURE__*/_jsxs("ul",_objectSpread(_objectSpread({ref:da,id:ia,role:"listbox",tabIndex:"-1",className:d},G),{},{children:[!o&&!ea&&null!==m&&/*#__PURE__*/_jsx(h,{}),ea&&/*#__PURE__*/_jsx(SearchBox,{ref:aa,classNames:E,value:C||R,placeholder:D||K(messages.searchPlaceholder),onChange:ma,onClick:stopPropagation}),e.slice(0,$).map(oa),$<e.length&&/*#__PURE__*/_jsx(g,{})]}))}function g(){function a(a){stopPropagation(a),_($+DEFAULT_OPTIONS_PAGE_SIZE)}return/*#__PURE__*/ (/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */_jsx("li",{className:classNames(L("clickable"),L("border-bottom"),L("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(L("clickable"),L("border-bottom")),onClick:d(a),onKeyPress:d(a),children:/*#__PURE__*/_jsx("a",{children:m})}))}// eslint-disable-next-line react/prop-types
4
- function i(a){var b=a.index;return/*#__PURE__*/_jsx("li",{className:L("np-separator"),"aria-hidden":!0},b)}// eslint-disable-next-line react/prop-types
5
- function j(a){var b=a.index,c=a.children;return/*#__PURE__*/_jsx("li",{className:classNames(L("np-dropdown-header"),L("np-text-title-group")),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 la().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=useTheme(),J=useIntl(),K=J.formatMessage,L=function(a){return E[a]||a},s=useState(!1),M=_slicedToArray(s,2),N=M[0],O=M[1],P=useState(DEFAULT_SEARCH_VALUE),Q=_slicedToArray(P,2),R=Q[0],S=Q[1],T=useState(null),U=_slicedToArray(T,2),V=U[0],W=U[1],X=useRef(),Y=useState(DEFAULT_OPTIONS_PAGE_SIZE),Z=_slicedToArray(Y,2),$=Z[0],_=Z[1],aa=useRef(null),ba=useRef(null),ca=useRef(null),da=useRef(null),ea=!!B||!!w,fa=null===r,ga=useMemo(function(){return getSimpleRandomId("np-select-")},[]),ha=n||ga,ia="".concat(ha,"-listbox"),ja=useLayout(),ka=ja.isMobile,la=function(){return w&&R?A.filter(function(a){return isActionableOption(a)&&!isPlaceholderOption(a)}).filter(function(a){return"function"==typeof w?w(a,R):defaultFilterFunction(a,R)}):A},ma=function(a){_(DEFAULT_OPTIONS_PAGE_SIZE),S(a.target.value),B&&B(a.target.value)};useEffect(function(){X.current=V,N&&(!ka||""!==R)&&(ea&&!!aa.current&&aa.current.focus(),!ea&&da.current&&da.current.focus())},[N,R,ea,ka,V]);var na=function(){O(!1),W(null),ca.current&&ca.current.focus()},oa=function(a,b){var c,e=a;if(isSparatorOption(e)&&null!==e&&void 0!==e&&e.separator)return/*#__PURE__*/_jsx(i,{index:b});var f=a;if(isHeaderOption(f)&&f.header)return/*#__PURE__*/_jsx(j,{index:b,children:f.header});var g=k(v,a),h=a,m=!h.disabled&&V===l(b),n=classNames(L("np-dropdown-item"),h.disabled?[L("disabled")]:L("clickable"),(c={},_defineProperty(c,L("active"),g),_defineProperty(c,L("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))},pa=!!A.length;return N&&(""!==C||""!==R)&&(pa&&null===V&&W(0),!pa&&null!==V&&W(null)),/*#__PURE__*/_jsxs("div",{// eslint-disable-line jsx-a11y/no-static-element-interactions
6
- ref:ba,className:classNames(L("np-select"),u?L("btn-block"):null,L("btn-group")),onKeyDown:function handleKeyDown(a){switch(a.keyCode){case KeyCodes.UP:case KeyCodes.DOWN:N?c(a.keyCode===KeyCodes.UP?-1:1):O(!0),stopPropagation(a);break;case KeyCodes.SPACE:a.target!==aa.current&&(N?b():O(!0),stopPropagation(a));break;case KeyCodes.ENTER:N?b():O(!0),stopPropagation(a);break;case KeyCodes.ESCAPE:na(),stopPropagation(a);break;case KeyCodes.TAB:N&&b();break;default:}},onTouchMove:function handleTouchStart(a){a.currentTarget===a.target&&N&&na()},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:ca,id:ha,block:u,size:t,htmlType:"button",className:classNames(L("np-dropdown-toggle"),L("np-text-body-large"),"string"==typeof E&&-1!==E.search("form-control")?L("form-control"):null,q?L("np-dropdown-toggle-navy"):null)// reset Button's styles
7
- ,type:null,priority:null,disabled:p,role:"combobox","aria-controls":ia,"aria-expanded":N,"aria-autocomplete":"none",onClick:function handleOnClick(){O(!0)}},H),{},{children:[v?/*#__PURE__*/_jsx(Option,_objectSpread(_objectSpread({},v),{},{classNames:E,selected:!0})):/*#__PURE__*/_jsx(Body,{className:L("form-control-placeholder"),children:m}),/*#__PURE__*/_jsx(Chevron// disabled={disabled}
8
- ,{className:classNames(L("tw-icon"),L("tw-chevron-up-icon"),L("tw-chevron"),L("bottom"),L("np-select-chevron"))})]})),ka?ea?/*#__PURE__*/_jsx(Drawer,{className:I.className,open:N,headerTitle:D||K(messages.searchPlaceholder),onClose:na,children:f()}):/*#__PURE__*/_jsx(BottomSheet,{open:N,onClose:na,children:f({className:"p-a-1"})}):/*#__PURE__*/_jsx(Panel,{className:I.className,open:N,flip:!1,altAxis:!0,anchorRef:ba,anchorWidth:fa,position:F?Position.TOP:Position.BOTTOM,onClose:na,children: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}),/**
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!==X){var a=na().filter(isActionableOption);0<a.length&&e(a[X])}}function c(a){var b=na().filter(isActionableOption),c=b.reduce(function(a,b,c){return null===a?k(v,b)?c:null:a},null),d=null===Z.current||void 0===Z.current?-1:Z.current,e=d;null===d&&null===c&&Y(0),null===d&&null!==c&&(e=c);var f=e+a,g=Math.max(Math.min(0,b.length-1),f);Y(g)}function d(a){return function(b){stopPropagation(b),e(a)}}function e(a){x(isPlaceholderOption(a)?DEFAULT_SELECTED_OPTION:a),pa()}function f(){var a,b=0<arguments.length&&void 0!==arguments[0]?arguments[0]:{},c=b.className,d=classNames(N("np-dropdown-menu"),(a={},_defineProperty(a,N("np-dropdown-menu-desktop"),!ma),_defineProperty(a,N("np-dropdown-menu-".concat(r)),!ma&&!ha),a),N(c)),e=na();return/*#__PURE__*/_jsxs("ul",_objectSpread(_objectSpread({ref:fa,id:ka,role:"listbox",tabIndex:"-1",className:d},G),{},{children:[!o&&!ga&&null!==m&&/*#__PURE__*/_jsx(h,{}),ga&&/*#__PURE__*/_jsx(SearchBox,{ref:ca,classNames:E,value:C||T,placeholder:D||M(messages.searchPlaceholder),onChange:oa,onClick:stopPropagation}),e.slice(0,aa).map(qa),aa<e.length&&/*#__PURE__*/_jsx(g,{})]}))}function g(){function a(a){stopPropagation(a),ba(aa+DEFAULT_OPTIONS_PAGE_SIZE)}return/*#__PURE__*/ (/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */_jsx("li",{className:classNames(N("clickable"),N("border-bottom"),N("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(N("clickable"),N("border-bottom")),onClick:d(a),onKeyPress:d(a),children:/*#__PURE__*/_jsx("a",{children:m})}))}// eslint-disable-next-line react/prop-types
4
+ function i(a){var b=a.index;return/*#__PURE__*/_jsx("li",{className:N("np-separator"),"aria-hidden":!0},b)}// eslint-disable-next-line react/prop-types
5
+ function j(a){var b=a.index,c=a.children;return/*#__PURE__*/_jsx("li",{className:classNames(N("np-dropdown-header"),N("np-text-title-group")),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 na().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=useTheme(),J=I.theme,K=I.isThemeModern,L=useIntl(),M=L.formatMessage,N=function(a){return E[a]||a},s=useState(!1),O=_slicedToArray(s,2),P=O[0],Q=O[1],R=useState(DEFAULT_SEARCH_VALUE),S=_slicedToArray(R,2),T=S[0],U=S[1],V=useState(null),W=_slicedToArray(V,2),X=W[0],Y=W[1],Z=useRef(),$=useState(DEFAULT_OPTIONS_PAGE_SIZE),_=_slicedToArray($,2),aa=_[0],ba=_[1],ca=useRef(null),da=useRef(null),ea=useRef(null),fa=useRef(null),ga=!!B||!!w,ha=null===r,ia=useMemo(function(){return getSimpleRandomId("np-select-")},[]),ja=n||ia,ka="".concat(ja,"-listbox"),la=useLayout(),ma=la.isMobile,na=function(){return w&&T?A.filter(function(a){return isActionableOption(a)&&!isPlaceholderOption(a)}).filter(function(a){return"function"==typeof w?w(a,T):defaultFilterFunction(a,T)}):A},oa=function(a){ba(DEFAULT_OPTIONS_PAGE_SIZE),U(a.target.value),B&&B(a.target.value)};useEffect(function(){Z.current=X,P&&(!ma||""!==T)&&(ga&&!!ca.current&&ca.current.focus(),!ga&&fa.current&&fa.current.focus())},[P,T,ga,ma,X]);var pa=function(){Q(!1),Y(null),ea.current&&ea.current.focus()},qa=function(a,b){var c,e=a;if(isSparatorOption(e)&&null!==e&&void 0!==e&&e.separator)return/*#__PURE__*/_jsx(i,{index:b});var f=a;if(isHeaderOption(f)&&f.header)return/*#__PURE__*/_jsx(j,{index:b,children:f.header});var g=k(v,a),h=a,m=!h.disabled&&X===l(b),n=classNames(N("np-dropdown-item"),h.disabled?[N("disabled")]:N("clickable"),(c={},_defineProperty(c,N("active"),g),_defineProperty(c,N("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))},ra=!!A.length;return P&&(""!==C||""!==T)&&(ra&&null===X&&Y(0),!ra&&null!==X&&Y(null)),/*#__PURE__*/_jsxs("div",{// eslint-disable-line jsx-a11y/no-static-element-interactions
6
+ ref:da,className:classNames(N("np-select"),u?N("btn-block"):null,N("btn-group")),onKeyDown:function handleKeyDown(a){switch(a.keyCode){case KeyCodes.UP:case KeyCodes.DOWN:P?c(a.keyCode===KeyCodes.UP?-1:1):Q(!0),stopPropagation(a);break;case KeyCodes.SPACE:a.target!==ca.current&&(P?b():Q(!0),stopPropagation(a));break;case KeyCodes.ENTER:P?b():Q(!0),stopPropagation(a);break;case KeyCodes.ESCAPE:pa(),stopPropagation(a);break;case KeyCodes.TAB:P&&b();break;default:}},onTouchMove:function handleTouchStart(a){a.currentTarget===a.target&&P&&pa()},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:ea,id:ja,block:u,size:t,htmlType:"button",className:classNames(N("np-dropdown-toggle"),N("np-text-body-large"),"string"==typeof E&&-1!==E.search("form-control")?N("form-control"):null,q?N("np-dropdown-toggle-navy"):null)// reset Button's styles
7
+ ,type:null,priority:null,disabled:p,role:"combobox","aria-controls":ka,"aria-expanded":P,"aria-autocomplete":"none",onClick:function handleOnClick(){Q(!0)}},H),{},{children:[v?/*#__PURE__*/_jsx(Option,_objectSpread(_objectSpread({},v),{},{classNames:E,selected:!0})):/*#__PURE__*/_jsx(Body,{className:N("form-control-placeholder"),children:m}),/*#__PURE__*/_jsx(Chevron// disabled={disabled}
8
+ ,{className:classNames(N("tw-icon"),N("tw-chevron-up-icon"),N("tw-chevron"),N("bottom"),N("np-select-chevron"))})]})),ma?ga?/*#__PURE__*/_jsx(Drawer,{open:P,headerTitle:D||M(messages.searchPlaceholder),onClose:pa,children:f()}):/*#__PURE__*/_jsx(BottomSheet,{open:P,onClose:pa,children:f({className:"p-a-1"})}):/*#__PURE__*/_jsx(Panel,{open:P,flip:!1,altAxis:!0,anchorRef:da,anchorWidth:ha,position:F?Position.TOP:Position.BOTTOM,onClose:pa,children: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}),/**
9
9
  * Search toggle
10
10
  * if `true` default search functionality being enabled (not case sensitive search in option labels & currency props)
11
11
  * 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.