@zonos/amino 5.3.15 → 5.3.16
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/all.d.ts
CHANGED
|
@@ -48,6 +48,7 @@ import './components/glow/GlowWrapper';
|
|
|
48
48
|
import './components/graph-matrix/GraphMatrix';
|
|
49
49
|
import './components/help-text/HelpText';
|
|
50
50
|
import './components/input/Input';
|
|
51
|
+
import './components/input/MultiInput';
|
|
51
52
|
import './components/input/SearchInput';
|
|
52
53
|
import './components/layout/Layout';
|
|
53
54
|
import './components/layout/NavigationGroup';
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
export type MultiInputProps = {
|
|
2
|
+
className?: string;
|
|
3
|
+
style?: React.CSSProperties;
|
|
4
|
+
tags: string[];
|
|
5
|
+
setHasValidationError?: (hasValidationError: boolean) => void;
|
|
6
|
+
setTags: (tags: string[]) => void;
|
|
7
|
+
tagValidation?: (tag: string) => boolean;
|
|
8
|
+
};
|
|
9
|
+
export declare const MultiInput: ({ className, setHasValidationError, setTags, style, tags, tagValidation, }: MultiInputProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";var e=require("../../_tslib-bd4862e8.js"),t=require("react/jsx-runtime"),n=require("react"),r=require("clsx"),u=require("../flex/Flex.js"),l=require("../tag/Tag.js"),a=require("../../style-inject.es-d4ddeae4.js");function i(e){return e&&e.__esModule?e:{default:e}}require("../../icons/RemoveIcon.js"),require("../../icons/icon-base/_IconBase.js"),require("../../styles/constants/theme.js");var o=i(r),s="Amino_MultiInput-module__tagInputWrapper--FTdAL",c="Amino_MultiInput-module__tagInput--cBsz8";a.styleInject(".Amino_MultiInput-module__tagInputWrapper--FTdAL.Amino_MultiInput-module__tagInputWrapper--FTdAL{border:1px solid #ccc;border-radius:4px;overflow-x:auto;padding:5px}.Amino_MultiInput-module__tagInputWrapper--FTdAL.Amino_MultiInput-module__tagInputWrapper--FTdAL .Amino_MultiInput-module__tagInput--cBsz8{border:none;flex:1 1 auto;flex-grow:1;font-size:var(--amino-font-size-base);font-weight:500;min-width:100px;min-width:50px;outline:none;padding:5px}");exports.MultiInput=function(r){var a=r.className,i=r.setHasValidationError,p=r.setTags,d=r.style,g=r.tags,_=r.tagValidation,f=e.__read(n.useState(""),2),m=f[0],h=f[1],x=n.useRef(null),I=e.__read(n.useState(null),2),A=I[0],v=I[1];n.useEffect((function(){if(i&&_){var e=g.some((function(e){return!_(e)}));i(e)}}),[g,_,i]);var j=function(e){p(g.filter((function(t,n){return n!==e})))};return t.jsxs(u.Flex,{alignItems:"center",className:o.default([a,s]),flexWrap:"wrap",gap:4,style:d,children:[g.map((function(e,n){var r=!(!_||_(e)),a=A===n,i=r?"error":"default";return t.jsx(u.Flex,{alignItems:"center",gap:0,children:t.jsx(l.Tag,{highlighted:a,intent:i,onClick:function(){return v(n)},onClose:function(){return j(n)},size:"lg",children:e})},e)})),t.jsx("input",{ref:x,className:c,onChange:function(e){h(e.target.value)},onFocus:function(){x.current&&(x.current.selectionStart=x.current.value.length,x.current.selectionEnd=x.current.value.length)},onKeyDown:function(t){var n;"Enter"!==t.key&&","!==t.key&&" "!==t.key||!m?"Backspace"===t.key?""===m&&g.length>0&&(null===A?v(g.length-1):(j(A),v(null))):"ArrowLeft"===t.key?null===A&&g.length>0?v(g.length-1):null!==A&&A>0&&v(A-1):"ArrowRight"===t.key&&null!==A&&A<g.length-1?v(A+1):v(null):(t.preventDefault(),(n=m.trim())&&(p(e.__spreadArray(e.__spreadArray([],e.__read(g),!1),[n],!1)),h("")))},placeholder:g.length?"":"Enter email",value:m})]})};
|
package/components/tag/Tag.d.ts
CHANGED
|
@@ -1,13 +1,16 @@
|
|
|
1
|
-
import type { ReactNode } from 'react';
|
|
1
|
+
import type { HTMLAttributes, ReactNode } from 'react';
|
|
2
2
|
import type { BaseProps } from "../../types/BaseProps";
|
|
3
3
|
type TagSize = 'base' | 'lg';
|
|
4
|
-
|
|
4
|
+
type TagIntent = 'default' | 'error';
|
|
5
|
+
export type TagProps = BaseProps & HTMLAttributes<HTMLDivElement> & {
|
|
5
6
|
children?: ReactNode | string;
|
|
7
|
+
highlighted?: boolean;
|
|
6
8
|
icon?: ReactNode;
|
|
7
9
|
iconRight?: boolean;
|
|
10
|
+
intent?: TagIntent;
|
|
8
11
|
size?: TagSize;
|
|
9
12
|
onClick?: () => void;
|
|
10
13
|
onClose: () => void;
|
|
11
14
|
};
|
|
12
|
-
export declare const Tag: ({ children, className, icon, iconRight, onClick, onClose, size, style, }: TagProps) => import("react/jsx-runtime").JSX.Element;
|
|
15
|
+
export declare const Tag: ({ children, className, highlighted, icon, iconRight, intent, onClick, onClose, size, style, }: TagProps) => import("react/jsx-runtime").JSX.Element;
|
|
13
16
|
export {};
|
package/components/tag/Tag.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";var e=require("react/jsx-runtime"),
|
|
1
|
+
"use strict";var e=require("react/jsx-runtime"),o=require("clsx"),a=require("../../icons/RemoveIcon.js"),i=require("../../style-inject.es-d4ddeae4.js");function r(e){return e&&e.__esModule?e:{default:e}}require("react"),require("../../icons/icon-base/_IconBase.js"),require("../../styles/constants/theme.js");var l=r(o),n={tagWrapper:"Amino_Tag-module__tagWrapper--5McNK",base:"Amino_Tag-module__base--z0-9-",highlight:"Amino_Tag-module__highlight--b9lSD",error:"Amino_Tag-module__error--JytAu",styledTagRight:"Amino_Tag-module__styledTagRight--5GHpr",styledTagLeft:"Amino_Tag-module__styledTagLeft--2XXDe",iconRight:"Amino_Tag-module__iconRight--LHvji",styledRemoveBtn:"Amino_Tag-module__styledRemoveBtn--nSh7A"};i.styleInject(".Amino_Tag-module__tagWrapper--5McNK{background-color:var(--amino-gray-50);border:1px solid var(--amino-gray-200);border-radius:var(--amino-radius-6);color:var(--amino-text-color);display:inline-flex}.Amino_Tag-module__tagWrapper--5McNK.Amino_Tag-module__base--z0-9-{height:20px}.Amino_Tag-module__tagWrapper--5McNK.Amino_Tag-module__highlight--b9lSD{background-color:var(--amino-blue-50);border:1px solid var(--amino-blue-600);color:var(--amino-blue-800)}.Amino_Tag-module__tagWrapper--5McNK.Amino_Tag-module__error--JytAu{background-color:var(--amino-red-50);border:1px solid var(--amino-red-200);color:var(--amino-red-800)}.Amino_Tag-module__tagWrapper--5McNK.Amino_Tag-module__error--JytAu.Amino_Tag-module__highlight--b9lSD{border:1px solid var(--amino-red-600)}.Amino_Tag-module__tagWrapper--5McNK:hover,.Amino_Tag-module__tagWrapper--5McNK:hover .Amino_Tag-module__styledTagRight--5GHpr{background-color:var(--amino-gray-100)}.Amino_Tag-module__tagWrapper--5McNK:hover.Amino_Tag-module__highlight--b9lSD,.Amino_Tag-module__tagWrapper--5McNK:hover.Amino_Tag-module__highlight--b9lSD .Amino_Tag-module__styledTagRight--5GHpr{background-color:var(--amino-blue-100)}.Amino_Tag-module__tagWrapper--5McNK:hover.Amino_Tag-module__error--JytAu,.Amino_Tag-module__tagWrapper--5McNK:hover.Amino_Tag-module__error--JytAu .Amino_Tag-module__styledTagRight--5GHpr{background-color:var(--amino-red-100)}.Amino_Tag-module__styledTagLeft--2XXDe{align-items:center;border-radius:var(--amino-radius-6) 0 0 var(--amino-radius-6);display:inline-flex;font-size:var(--amino-font-size-base);font-weight:400;font-weight:500;gap:4px;padding:4px 4px 4px 8px;text-align:center}.Amino_Tag-module__styledTagLeft--2XXDe:focus{outline:none}.Amino_Tag-module__styledTagLeft--2XXDe p{margin:0}.Amino_Tag-module__styledTagLeft--2XXDe.Amino_Tag-module__iconRight--LHvji svg{order:2}.Amino_Tag-module__base--z0-9- .Amino_Tag-module__styledTagLeft--2XXDe{padding:2px 4px}.Amino_Tag-module__styledTagRight--5GHpr{align-items:center;border-radius:var(--amino-radius-6);display:inline-flex;padding:4px 5px}.Amino_Tag-module__base--z0-9- .Amino_Tag-module__styledTagRight--5GHpr{padding:2px 3px}.Amino_Tag-module__styledRemoveBtn--nSh7A{display:flex}");exports.Tag=function(o){var i=o.children,r=o.className,_=o.highlighted,t=void 0!==_&&_,g=o.icon,d=o.iconRight,m=o.intent,s=void 0===m?"default":m,u=o.onClick,c=o.onClose,p=o.size,T=void 0===p?"base":p,h=o.style;return e.jsxs("div",{className:l.default(r,n.tagWrapper,"base"===T&&n.base,"default"!==s?n[s]:"",t&&n.highlight),style:h,children:[e.jsxs("button",{className:l.default(n.styledTagLeft,d&&n.iconRight),onClick:u,type:"button",children:[g,e.jsx("p",{children:i})]}),e.jsx("button",{className:n.styledTagRight,onClick:c,type:"button",children:e.jsx("div",{className:n.styledRemoveBtn,children:e.jsx(a.RemoveIcon,{size:14})})})]})};
|