@zonos/amino 5.1.107 → 5.1.108
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/components/card/Card.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";var a=require("../../_tslib-bd4862e8.js"),r=require("react/jsx-runtime"),e=require("clsx"),i=require("../stack/HStack.js"),n=require("../text/Text.js"),o=require("../../styles/constants/theme.js"),
|
|
1
|
+
"use strict";var a=require("../../_tslib-bd4862e8.js"),r=require("react/jsx-runtime"),e=require("clsx"),i=require("../stack/HStack.js"),n=require("../text/Text.js"),o=require("../../styles/constants/theme.js"),t=require("../../style-inject.es-d4ddeae4.js");function d(a){return a&&a.__esModule?a:{default:a}}require("../stack/Stack.js");var c=d(e),s="Amino_Card-module__card--DJCwk",m="Amino_Card-module__cardHeader--UBcny",l="Amino_Card-module__cardFooter--Ea-tJ";t.styleInject(".Amino_Card-module__card--DJCwk{background:var(--amino-gray-0);border:var(--amino-border);border-radius:var(--amino-radius-6);padding:var(--amino-card-padding-spacing)}.Amino_Card-module__cardHeader--UBcny{align-items:center;border-bottom:var(--amino-border);display:flex;height:65px;line-height:65px;margin:var(--amino-card-margin);margin-bottom:var(--amino-card-margin-bottom);padding:var(--amino-card-padding-spacing);-webkit-user-select:none;user-select:none}.Amino_Card-module__cardHeader--UBcny h5{flex:1;margin-bottom:0}.Amino_Card-module__cardFooter--Ea-tJ{align-items:center;background:var(--amino-surface-color-secondary);border-bottom-left-radius:var(--amino-radius-8);border-bottom-right-radius:var(--amino-radius-8);border-top:var(--amino-border);display:flex;height:var(--amino-card-footer-height);justify-content:space-between;margin:var(--amino-card-margin);margin-top:var(--amino-card-margin-top);padding:var(--amino-card-padding-spacing)}");exports.Card=function(e){var t=e.actions,d=e.children,g=e.className,u=e.footerActions,p=e.footerContent,_=e.footerHeight,h=e.label,v=e.spacing,b=e.style;return r.jsxs("div",{className:c.default(g,s),style:a.__assign(a.__assign({},b),{"--amino-card-footer-height":_?"".concat(_,"px"):"","--amino-card-margin":v?"calc(".concat(v," * -1)"):o.theme.spaceNegative24,"--amino-card-margin-bottom":v||o.theme.space24,"--amino-card-margin-top":v||o.theme.space24,"--amino-card-padding-spacing":v||o.theme.space24}),children:[h&&r.jsxs("div",{className:m,children:[r.jsx(n.Text,{type:"subheader",children:h}),r.jsx(i.HStack,{spacing:8,children:t})]}),d,(u||p)&&r.jsxs("div",{className:l,children:[r.jsx("div",{children:p}),r.jsx(i.HStack,{spacing:8,children:u})]})]})};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { type ReactNode } from 'react';
|
|
2
2
|
import type { BaseProps } from "../../types/BaseProps";
|
|
3
|
-
export type
|
|
4
|
-
code:
|
|
3
|
+
export type CountryMultiSelectExpandedOption<CountryCode extends string = string> = {
|
|
4
|
+
code: CountryCode;
|
|
5
5
|
disabled?: boolean;
|
|
6
6
|
/**
|
|
7
7
|
* Key to group by
|
|
@@ -15,9 +15,13 @@ export type ICountryMultiSelectExpandedOption<TCountryCode extends string = stri
|
|
|
15
15
|
*/
|
|
16
16
|
rightDecorator?: () => ReactNode;
|
|
17
17
|
};
|
|
18
|
-
export type CountryMultiSelectExpandedProps<
|
|
18
|
+
export type CountryMultiSelectExpandedProps<CountryCode extends string = string> = BaseProps & {
|
|
19
19
|
actions?: ReactNode;
|
|
20
|
-
countries:
|
|
20
|
+
countries: CountryMultiSelectExpandedOption<CountryCode>[];
|
|
21
|
+
/**
|
|
22
|
+
* @default false
|
|
23
|
+
*/
|
|
24
|
+
disabled?: boolean;
|
|
21
25
|
/**
|
|
22
26
|
* @default 380
|
|
23
27
|
*/
|
|
@@ -27,15 +31,12 @@ export type CountryMultiSelectExpandedProps<TCountryCode extends string = string
|
|
|
27
31
|
* @default false
|
|
28
32
|
*/
|
|
29
33
|
noHeader?: boolean;
|
|
30
|
-
selectedCountries:
|
|
34
|
+
selectedCountries: CountryMultiSelectExpandedOption<CountryCode>[];
|
|
31
35
|
/**
|
|
32
36
|
* No search bar
|
|
33
37
|
* @default false
|
|
34
38
|
*/
|
|
35
39
|
withoutSearch?: boolean;
|
|
36
|
-
onChange: (countries:
|
|
40
|
+
onChange: (countries: CountryMultiSelectExpandedOption<CountryCode>[]) => void;
|
|
37
41
|
};
|
|
38
|
-
|
|
39
|
-
* Use the country flags with `flagType: 'amino'` otherwise the flags are slow to load when re-rendering
|
|
40
|
-
*/
|
|
41
|
-
export declare const CountryMultiSelectExpanded: <TCountryCode extends string = string>({ actions, className, countries, maxHeight, noHeader, onChange, selectedCountries, style, withoutSearch, }: CountryMultiSelectExpandedProps<TCountryCode>) => import("react/jsx-runtime").JSX.Element;
|
|
42
|
+
export declare const CountryMultiSelectExpanded: <CountryCode extends string = string>({ actions, className, countries, disabled, maxHeight, noHeader, onChange, selectedCountries, style, withoutSearch, }: CountryMultiSelectExpandedProps<CountryCode>) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";var e=require("../../_tslib-bd4862e8.js"),n=require("react/jsx-runtime"),t=require("react"),
|
|
1
|
+
"use strict";var e=require("../../_tslib-bd4862e8.js"),n=require("react/jsx-runtime"),t=require("react"),o=require("clsx"),r=require("lodash/groupBy"),l=require("../checkbox/Checkbox.js"),i=require("../collapse/Collapse.js"),d=require("../divider/Divider.js"),a=require("../text/Text.js"),u=require("../../icons/ChevronDownIcon.js"),c=require("../../icons/SearchIcon.js"),s=require("../../utils/getFuzzySearch.js"),p=require("../../style-inject.es-d4ddeae4.js");function m(e){return e&&e.__esModule?e:{default:e}}require("framer-motion"),require("../../icons/CheckmarkIcon.js"),require("../../icons/icon-base/_IconBase.js"),require("../../styles/constants/theme.js"),require("../../utils/getTestId.js"),require("@mui/material/Collapse"),require("fuse.js");var _=m(o),x=m(r),y="Amino_CountryMultiSelectExpanded-module__wrapper--LzApA",h="Amino_CountryMultiSelectExpanded-module__disabled--uDoTU",C="Amino_CountryMultiSelectExpanded-module__header--I3SHr",f="Amino_CountryMultiSelectExpanded-module__componentWrapper--F2CCN",b="Amino_CountryMultiSelectExpanded-module__componentHeaderWrapper--4Tbun",A="Amino_CountryMultiSelectExpanded-module__searchInput--AifLd",S="Amino_CountryMultiSelectExpanded-module__headerActions--KMJ-r",g="Amino_CountryMultiSelectExpanded-module__selectionWrapper--G9Zup",j="Amino_CountryMultiSelectExpanded-module__noCountriesWrapper--mxTCi",M="Amino_CountryMultiSelectExpanded-module__checkboxWrapper--WOHj-",v="Amino_CountryMultiSelectExpanded-module__hoverWrapper--T8yP-",E="Amino_CountryMultiSelectExpanded-module__groupWrapper--HI-rz",W="Amino_CountryMultiSelectExpanded-module__collapseButton--Ea8Gn",k="Amino_CountryMultiSelectExpanded-module__collapseIcon--maZm7",N="Amino_CountryMultiSelectExpanded-module__collapsed--uBLGX",q="Amino_CountryMultiSelectExpanded-module__countriesWrapper--r2bn4",I="Amino_CountryMultiSelectExpanded-module__checkboxCountry--yhWO-",w="Amino_CountryMultiSelectExpanded-module__checkboxLabelWrapper--H-c8z";p.styleInject(".Amino_CountryMultiSelectExpanded-module__wrapper--LzApA{display:flex;flex-direction:column;gap:12px}.Amino_CountryMultiSelectExpanded-module__wrapper--LzApA.Amino_CountryMultiSelectExpanded-module__disabled--uDoTU{cursor:not-allowed;opacity:.5}.Amino_CountryMultiSelectExpanded-module__wrapper--LzApA.Amino_CountryMultiSelectExpanded-module__disabled--uDoTU>*{pointer-events:none}.Amino_CountryMultiSelectExpanded-module__header--I3SHr{display:flex;justify-content:space-between}.Amino_CountryMultiSelectExpanded-module__componentWrapper--F2CCN{border:var(--amino-border);border-radius:12px;display:flex;flex-direction:column;gap:4px;padding:8px}.Amino_CountryMultiSelectExpanded-module__componentHeaderWrapper--4Tbun{align-items:center;display:flex;gap:8px;justify-content:space-between}.Amino_CountryMultiSelectExpanded-module__searchInput--AifLd{align-items:center;display:flex;gap:8px;padding:8px 4px}.Amino_CountryMultiSelectExpanded-module__searchInput--AifLd>input{flex-grow:1;padding:0 4px}.Amino_CountryMultiSelectExpanded-module__searchInput--AifLd>input:focus{outline:none}.Amino_CountryMultiSelectExpanded-module__headerActions--KMJ-r{padding:4px 0}.Amino_CountryMultiSelectExpanded-module__selectionWrapper--G9Zup{display:flex;flex-direction:column;gap:2px;overflow-y:auto}.Amino_CountryMultiSelectExpanded-module__noCountriesWrapper--mxTCi{padding:8px}.Amino_CountryMultiSelectExpanded-module__checkboxWrapper--WOHj-{display:flex;flex-direction:column;padding:8px;width:100%}.Amino_CountryMultiSelectExpanded-module__hoverWrapper--T8yP-{border-radius:6px}.Amino_CountryMultiSelectExpanded-module__hoverWrapper--T8yP-:hover{background-color:var(--amino-hover-color)}.Amino_CountryMultiSelectExpanded-module__groupWrapper--HI-rz{align-items:center;display:flex;gap:8px;justify-content:space-between;padding:8px;width:100%}.Amino_CountryMultiSelectExpanded-module__collapseButton--Ea8Gn{align-items:center;cursor:pointer;display:flex;flex-grow:1;gap:8px;justify-content:flex-end}.Amino_CountryMultiSelectExpanded-module__collapseButton--Ea8Gn:focus{outline:none}.Amino_CountryMultiSelectExpanded-module__collapseIcon--maZm7{transition:var(--amino-transition)}.Amino_CountryMultiSelectExpanded-module__collapseIcon--maZm7.Amino_CountryMultiSelectExpanded-module__collapsed--uBLGX{transform:rotate(180deg)}.Amino_CountryMultiSelectExpanded-module__countriesWrapper--r2bn4{grid-gap:8px;display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));padding-left:24px}.Amino_CountryMultiSelectExpanded-module__checkboxCountry--yhWO->div{align-items:center}.Amino_CountryMultiSelectExpanded-module__checkboxCountry--yhWO- div[class*=Amino_Checkbox]{gap:var(--amino-space-8)}.Amino_CountryMultiSelectExpanded-module__checkboxLabelWrapper--H-c8z{align-items:center;display:flex;justify-content:space-between;width:100%}.Amino_CountryMultiSelectExpanded-module__checkboxLabelWrapper--H-c8z>div{align-items:center;display:flex;gap:4px}");exports.CountryMultiSelectExpanded=function(o){var r=o.actions,p=o.className,m=o.countries,z=o.disabled,T=void 0!==z&&z,H=o.maxHeight,L=void 0===H?380:H,D=o.noHeader,B=void 0!==D&&D,G=o.onChange,O=o.selectedCountries,F=o.style,Z=o.withoutSearch,P=void 0!==Z&&Z,U=e.__read(t.useState(""),2),J=U[0],K=U[1],X=e.__read(t.useState([]),2),R=X[0],Q=X[1],V=t.useCallback((function(e){return s.getFuzzySearch({array:m,options:{keys:["label","code","group"],threshold:.1}}).fuzzySearch.search(e)}),[m]),Y=t.useMemo((function(){return""===J?m:V(J).map((function(e){return e.item}))}),[m,V,J]),$=t.useMemo((function(){var n=Object.entries(x.default(Y,"group")).map((function(n){var t=e.__read(n,2),o=t[0];return{countries:t[1],label:o}}));return n.sort((function(e,n){return e.label.localeCompare(n.label)}))}),[Y]),ee=t.useMemo((function(){return m.filter((function(e){return!e.disabled})).length===O.length}),[m,O.length]);if(!m.length)return n.jsx("div",{className:_.default(p),children:n.jsx(a.Text,{color:"textColorSecondary",children:"No countries"})});return n.jsxs("div",{className:_.default(y,p,T&&h),style:F,children:[!B&&n.jsxs("div",{className:C,children:[n.jsx(a.Text,{type:"bold-label",children:"Countries and Regions"}),n.jsxs(a.Text,{color:"textColorSecondary",type:"label",children:[O.length," of ",m.length," selected"]})]}),n.jsxs("div",{className:f,children:[n.jsxs("div",{className:b,children:[!P&&n.jsxs("label",{className:A,htmlFor:"country-multi-select-search",children:[n.jsx(c.SearchIcon,{size:24}),n.jsx("input",{autoComplete:"off",id:"country-multi-select-search",onChange:function(e){return K(e.target.value)},placeholder:"Search...",type:"text",value:J})]}),r&&n.jsx("div",{className:S,children:r})]}),(!!r||!P)&&n.jsx(d.Divider,{noMargin:!0}),Y.length?n.jsxs("div",{className:g,style:{maxHeight:"".concat(L,"px")},children:[n.jsx("div",{className:M,children:n.jsx(l.Checkbox,{checked:ee,label:"Select all",onChange:function(e){G(e?m.filter((function(e){return!e.disabled})):[])}})}),$.map((function(t){var o=t.countries.every((function(e){return e.disabled||O.some((function(n){return n.code===e.code}))})),r=t.countries.filter((function(e){return O.some((function(n){return n.code===e.code}))})).length,d=!R.includes(t.label);return n.jsxs("div",{children:[n.jsxs("div",{className:_.default(E,v),children:[n.jsx(l.Checkbox,{checked:o,label:t.label,onChange:function(n){if(n){var o=e.__spreadArray(e.__spreadArray([],e.__read(O),!1),e.__read(t.countries.filter((function(e){return!e.disabled}))),!1);G(o)}else o=O.filter((function(e){return!e.disabled&&!t.countries.some((function(n){return n.code===e.code}))})),G(o)}}),n.jsxs("button",{className:W,onClick:function(){R.includes(t.label)?Q(R.filter((function(e){return e!==t.label}))):Q(e.__spreadArray(e.__spreadArray([],e.__read(R),!1),[t.label],!1))},type:"button",children:[n.jsxs(a.Text,{color:"textColorSecondary",children:[r,"/",t.countries.length]}),n.jsx(u.ChevronDownIcon,{className:_.default(k,d&&N),size:24})]})]}),n.jsx(i.Collapse,{collapsed:d,children:n.jsx("div",{className:q,children:t.countries.map((function(t){var o;return n.jsx(l.Checkbox,{checked:O.some((function(e){return e.code===t.code})),className:_.default(M,I,!t.disabled&&v),disabled:t.disabled,icon:t.icon,label:t.label,labelComponent:n.jsxs("div",{className:w,style:{opacity:t.disabled?.5:1},children:[n.jsxs("div",{children:[t.icon,t.label]}),null===(o=t.rightDecorator)||void 0===o?void 0:o.call(t)]}),onChange:function(n){G(n?e.__spreadArray(e.__spreadArray([],e.__read(O),!1),[t],!1):O.filter((function(e){return e.code!==t.code})))}},t.code)}))})})]},t.label)}))]}):n.jsx("div",{className:j,children:n.jsx(a.Text,{color:"textColorSecondary",children:"No countries"})})]})]})};
|