@mattermost/compass-ui 0.1.0-alpha.7 → 0.1.0-alpha.8
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/dist/components/button/Button.cjs +1 -1
- package/dist/components/button/Button.cjs.map +1 -1
- package/dist/components/button/Button.d.ts +6 -4
- package/dist/components/button/Button.d.ts.map +1 -1
- package/dist/components/button/Button.js +27 -25
- package/dist/components/button/Button.js.map +1 -1
- package/dist/components/button/Button.module.css +1 -1
- package/dist/components/button/Button.module.scss.cjs +1 -1
- package/dist/components/button/Button.module.scss.js +13 -13
- package/dist/components/chip/Chip.cjs +1 -1
- package/dist/components/chip/Chip.cjs.map +1 -1
- package/dist/components/chip/Chip.d.ts +4 -2
- package/dist/components/chip/Chip.d.ts.map +1 -1
- package/dist/components/chip/Chip.js +66 -66
- package/dist/components/chip/Chip.js.map +1 -1
- package/dist/components/chip/Chip.module.css +1 -1
- package/dist/components/chip/Chip.module.scss.cjs +1 -1
- package/dist/components/chip/Chip.module.scss.js +12 -12
- package/dist/components/icon-button/IconButton.cjs +1 -1
- package/dist/components/icon-button/IconButton.cjs.map +1 -1
- package/dist/components/icon-button/IconButton.d.ts +3 -1
- package/dist/components/icon-button/IconButton.d.ts.map +1 -1
- package/dist/components/icon-button/IconButton.js +37 -35
- package/dist/components/icon-button/IconButton.js.map +1 -1
- package/dist/components/spinner/Spinner.cjs +1 -1
- package/dist/components/spinner/Spinner.cjs.map +1 -1
- package/dist/components/spinner/Spinner.d.ts +1 -1
- package/dist/components/spinner/Spinner.d.ts.map +1 -1
- package/dist/components/spinner/Spinner.js +17 -17
- package/dist/components/spinner/Spinner.js.map +1 -1
- package/dist/index.css +2 -2
- package/package.json +1 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("react/jsx-runtime"),n=require("react"),z=require("../spinner/Spinner.cjs"),d=require("../../utils/string.cjs"),e=require("./Button.module.scss.cjs"),E={"x-small":"12",small:"12",medium:"16",large:"20"};function N({appearance:a="default",className:m="",destructive:b=!1,emphasis:u="primary",children:f,leadingIcon:o,loading:s=!1,size:i="medium",trailingIcon:r,disabled:_,type:p="button",...j}){const l=E[i],v=e.default[`button--emphasis-${d.toKebab(u)}`],h=e.default[`button--size-${d.toKebab(i)}`],x=a==="inverted"?e.default["button--appearance-inverted"]:"",C=b?e.default["button--destructive"]:"",S=[e.default.button,v,h,x,C,m].filter(Boolean).join(" "),c=u!=="link",q=s||c&&n.isValidElement(o);return t.jsxs("button",{className:S,type:p,disabled:_||s,...j,children:[q?t.jsx("span",{className:e.default["button__icon-slot"],"aria-hidden":!0,children:s?t.jsx(z.default,{size:l,inverted:a==="inverted"}):n.cloneElement(o,{size:l})}):null,t.jsx("span",{className:e.default.button__label,children:f}),c&&!s&&n.isValidElement(r)?t.jsx("span",{className:e.default["button__icon-slot"],"aria-hidden":!0,children:n.cloneElement(r,{size:l})}):null]})}exports.default=N;
|
|
2
2
|
//# sourceMappingURL=Button.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.cjs","sources":["../../../src/components/button/Button.tsx"],"sourcesContent":["import
|
|
1
|
+
{"version":3,"file":"Button.cjs","sources":["../../../src/components/button/Button.tsx"],"sourcesContent":["import React, { type ButtonHTMLAttributes, type ReactNode } from 'react';\nimport type { IconSize } from '@/components/icon/Icon';\nimport Spinner from '@/components/spinner/Spinner';\nimport type { SpinnerSize } from '@/components/spinner/Spinner';\nimport { toKebab } from '@/utils/string';\nimport styles from './Button.module.scss';\n\nexport type ButtonEmphasis =\n | 'primary'\n | 'secondary'\n | 'tertiary'\n | 'quaternary'\n | 'link';\n\nexport type ButtonSize = 'x-small' | 'small' | 'medium' | 'large';\n\nexport type ButtonAppearance = 'default' | 'inverted';\n\nexport interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n /** default | inverted (for use on dark backgrounds). Maps to Figma \"Style\". */\n appearance?: ButtonAppearance;\n /** Optional CSS class name. */\n className?: string;\n /** Button label. */\n children: React.ReactNode;\n /** When true, uses destructive (danger) styling. */\n destructive?: boolean;\n /** Visual emphasis. Default: primary. */\n emphasis?: ButtonEmphasis;\n /** Leading icon — pass `<Icon glyph={<YourIcon />} />`. Button injects the correct size. */\n leadingIcon?: ReactNode;\n /** When true, shows a Spinner in the leading slot and disables the button. */\n loading?: boolean;\n /** Size variant. Default: medium. */\n size?: ButtonSize;\n /** Trailing icon — pass `<Icon glyph={<YourIcon />} />`. Button injects the correct size. */\n trailingIcon?: ReactNode;\n}\n\nconst SIZE_ICON_MAP: Record<ButtonSize, IconSize> = {\n 'x-small': '12',\n small: '12',\n medium: '16',\n large: '20',\n};\n\n/**\n * Buttons let people take actions or make decisions with a single tap or click — saving a\n * form, sending a message, confirming a dialog. Compass ships several button variants, each\n * with the same anatomy and rhythm so they feel like members of the same family.\n */\nexport default function Button({\n appearance = 'default',\n className = '',\n destructive = false,\n emphasis = 'primary',\n children,\n leadingIcon,\n loading = false,\n size = 'medium',\n trailingIcon,\n disabled,\n type = 'button',\n ...rest\n}: ButtonProps) {\n const iconSize = SIZE_ICON_MAP[size];\n const emphasisClass = styles[`button--emphasis-${toKebab(emphasis)}`];\n const sizeClass = styles[`button--size-${toKebab(size)}`];\n const appearanceClass =\n appearance === 'inverted' ? styles['button--appearance-inverted'] : '';\n const destructiveClass = destructive ? styles['button--destructive'] : '';\n\n const rootClass = [\n styles.button,\n emphasisClass,\n sizeClass,\n appearanceClass,\n destructiveClass,\n className,\n ]\n .filter(Boolean)\n .join(' ');\n\n const supportsIcons = emphasis !== 'link';\n const showLeadingSlot = loading || (supportsIcons && React.isValidElement(leadingIcon));\n\n return (\n <button className={rootClass} type={type} disabled={disabled || loading} {...rest}>\n {showLeadingSlot ? (\n <span className={styles['button__icon-slot']} aria-hidden>\n {loading\n ? <Spinner size={iconSize as SpinnerSize} inverted={appearance === 'inverted'} />\n : React.cloneElement(leadingIcon as React.ReactElement<{ size?: string }>, { size: iconSize })}\n </span>\n ) : null}\n <span className={styles['button__label']}>{children}</span>\n {supportsIcons && !loading && React.isValidElement(trailingIcon) ? (\n <span className={styles['button__icon-slot']} aria-hidden>\n {React.cloneElement(trailingIcon as React.ReactElement<{ size?: string }>, { size: iconSize })}\n </span>\n ) : null}\n </button>\n );\n}\n"],"names":["SIZE_ICON_MAP","Button","appearance","className","destructive","emphasis","children","leadingIcon","loading","size","trailingIcon","disabled","type","rest","iconSize","emphasisClass","styles","toKebab","sizeClass","appearanceClass","destructiveClass","rootClass","supportsIcons","showLeadingSlot","React","jsxs","jsx","Spinner"],"mappings":"kRAuCMA,EAA8C,CAClD,UAAW,KACX,MAAO,KACP,OAAQ,KACR,MAAO,IACT,EAOA,SAAwBC,EAAO,CAC7B,WAAAC,EAAa,UACb,UAAAC,EAAY,GACZ,YAAAC,EAAc,GACd,SAAAC,EAAW,UACX,SAAAC,EACA,YAAAC,EACA,QAAAC,EAAU,GACV,KAAAC,EAAO,SACP,aAAAC,EACA,SAAAC,EACA,KAAAC,EAAO,SACP,GAAGC,CACL,EAAgB,CACd,MAAMC,EAAWd,EAAcS,CAAI,EAC7BM,EAAgBC,EAAAA,QAAO,oBAAoBC,EAAAA,QAAQZ,CAAQ,CAAC,EAAE,EAC9Da,EAAYF,EAAAA,QAAO,gBAAgBC,EAAAA,QAAQR,CAAI,CAAC,EAAE,EAClDU,EACJjB,IAAe,WAAac,EAAAA,QAAO,6BAA6B,EAAI,GAChEI,EAAmBhB,EAAcY,UAAO,qBAAqB,EAAI,GAEjEK,EAAY,CAChBL,EAAAA,QAAO,OACPD,EACAG,EACAC,EACAC,EACAjB,CAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG,EAELmB,EAAgBjB,IAAa,OAC7BkB,EAAkBf,GAAYc,GAAiBE,EAAM,eAAejB,CAAW,EAErF,OACEkB,OAAC,UAAO,UAAWJ,EAAW,KAAAT,EAAY,SAAUD,GAAYH,EAAU,GAAGK,EAC1E,SAAA,CAAAU,EACCG,EAAAA,IAAC,OAAA,CAAK,UAAWV,EAAAA,QAAO,mBAAmB,EAAG,cAAW,GACtD,SAAAR,EACGkB,EAAAA,IAACC,EAAAA,QAAA,CAAQ,KAAMb,EAAyB,SAAUZ,IAAe,UAAA,CAAY,EAC7EsB,EAAM,aAAajB,EAAsD,CAAE,KAAMO,CAAA,CAAU,CAAA,CACjG,EACE,WACH,OAAA,CAAK,UAAWE,EAAAA,QAAO,cAAmB,SAAAV,EAAS,EACnDgB,GAAiB,CAACd,GAAWgB,EAAM,eAAed,CAAY,EAC7DgB,EAAAA,IAAC,OAAA,CAAK,UAAWV,UAAO,mBAAmB,EAAG,cAAW,GACtD,SAAAQ,EAAM,aAAad,EAAuD,CAAE,KAAMI,EAAU,CAAA,CAC/F,EACE,IAAA,EACN,CAEJ"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { ButtonHTMLAttributes, ReactNode } from 'react';
|
|
1
|
+
import { default as React, ButtonHTMLAttributes, ReactNode } from 'react';
|
|
2
2
|
export type ButtonEmphasis = 'primary' | 'secondary' | 'tertiary' | 'quaternary' | 'link';
|
|
3
3
|
export type ButtonSize = 'x-small' | 'small' | 'medium' | 'large';
|
|
4
4
|
export type ButtonAppearance = 'default' | 'inverted';
|
|
@@ -13,11 +13,13 @@ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
|
|
|
13
13
|
destructive?: boolean;
|
|
14
14
|
/** Visual emphasis. Default: primary. */
|
|
15
15
|
emphasis?: ButtonEmphasis;
|
|
16
|
-
/** Leading icon
|
|
16
|
+
/** Leading icon — pass `<Icon glyph={<YourIcon />} />`. Button injects the correct size. */
|
|
17
17
|
leadingIcon?: ReactNode;
|
|
18
|
+
/** When true, shows a Spinner in the leading slot and disables the button. */
|
|
19
|
+
loading?: boolean;
|
|
18
20
|
/** Size variant. Default: medium. */
|
|
19
21
|
size?: ButtonSize;
|
|
20
|
-
/** Trailing icon
|
|
22
|
+
/** Trailing icon — pass `<Icon glyph={<YourIcon />} />`. Button injects the correct size. */
|
|
21
23
|
trailingIcon?: ReactNode;
|
|
22
24
|
}
|
|
23
25
|
/**
|
|
@@ -25,5 +27,5 @@ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
|
|
|
25
27
|
* form, sending a message, confirming a dialog. Compass ships several button variants, each
|
|
26
28
|
* with the same anatomy and rhythm so they feel like members of the same family.
|
|
27
29
|
*/
|
|
28
|
-
export default function Button({ appearance, className, destructive, emphasis, children, leadingIcon, size, trailingIcon, disabled, type, ...rest }: ButtonProps): import("react/jsx-runtime").JSX.Element;
|
|
30
|
+
export default function Button({ appearance, className, destructive, emphasis, children, leadingIcon, loading, size, trailingIcon, disabled, type, ...rest }: ButtonProps): import("react/jsx-runtime").JSX.Element;
|
|
29
31
|
//# sourceMappingURL=Button.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/components/button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/components/button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,KAAK,oBAAoB,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAOzE,MAAM,MAAM,cAAc,GACtB,SAAS,GACT,WAAW,GACX,UAAU,GACV,YAAY,GACZ,MAAM,CAAC;AAEX,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAElE,MAAM,MAAM,gBAAgB,GAAG,SAAS,GAAG,UAAU,CAAC;AAEtD,MAAM,WAAW,WAAY,SAAQ,oBAAoB,CAAC,iBAAiB,CAAC;IAC1E,+EAA+E;IAC/E,UAAU,CAAC,EAAE,gBAAgB,CAAC;IAC9B,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oBAAoB;IACpB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,oDAAoD;IACpD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,yCAAyC;IACzC,QAAQ,CAAC,EAAE,cAAc,CAAC;IAC1B,4FAA4F;IAC5F,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,8EAA8E;IAC9E,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,qCAAqC;IACrC,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,6FAA6F;IAC7F,YAAY,CAAC,EAAE,SAAS,CAAC;CAC1B;AASD;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,EAC7B,UAAsB,EACtB,SAAc,EACd,WAAmB,EACnB,QAAoB,EACpB,QAAQ,EACR,WAAW,EACX,OAAe,EACf,IAAe,EACf,YAAY,EACZ,QAAQ,EACR,IAAe,EACf,GAAG,IAAI,EACR,EAAE,WAAW,2CAuCb"}
|
|
@@ -1,41 +1,43 @@
|
|
|
1
|
-
import { jsxs as
|
|
2
|
-
import
|
|
3
|
-
import
|
|
1
|
+
import { jsxs as S, jsx as s } from "react/jsx-runtime";
|
|
2
|
+
import n from "react";
|
|
3
|
+
import j from "../spinner/Spinner.js";
|
|
4
|
+
import { toKebab as u } from "../../utils/string.js";
|
|
4
5
|
import t from "./Button.module.scss.js";
|
|
5
|
-
const
|
|
6
|
+
const y = {
|
|
6
7
|
"x-small": "12",
|
|
7
|
-
small: "
|
|
8
|
+
small: "12",
|
|
8
9
|
medium: "16",
|
|
9
10
|
large: "20"
|
|
10
11
|
};
|
|
11
|
-
function
|
|
12
|
-
appearance:
|
|
13
|
-
className:
|
|
12
|
+
function A({
|
|
13
|
+
appearance: l = "default",
|
|
14
|
+
className: d = "",
|
|
14
15
|
destructive: p = !1,
|
|
15
|
-
emphasis:
|
|
16
|
+
emphasis: a = "primary",
|
|
16
17
|
children: b,
|
|
17
|
-
leadingIcon:
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
18
|
+
leadingIcon: i,
|
|
19
|
+
loading: e = !1,
|
|
20
|
+
size: r = "medium",
|
|
21
|
+
trailingIcon: m,
|
|
22
|
+
disabled: f,
|
|
23
|
+
type: _ = "button",
|
|
24
|
+
...h
|
|
23
25
|
}) {
|
|
24
|
-
const
|
|
26
|
+
const o = y[r], v = t[`button--emphasis-${u(a)}`], C = t[`button--size-${u(r)}`], z = l === "inverted" ? t["button--appearance-inverted"] : "", E = p ? t["button--destructive"] : "", N = [
|
|
25
27
|
t.button,
|
|
26
|
-
h,
|
|
27
|
-
C,
|
|
28
|
-
N,
|
|
29
28
|
v,
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
29
|
+
C,
|
|
30
|
+
z,
|
|
31
|
+
E,
|
|
32
|
+
d
|
|
33
|
+
].filter(Boolean).join(" "), c = a !== "link", x = e || c && n.isValidElement(i);
|
|
34
|
+
return /* @__PURE__ */ S("button", { className: N, type: _, disabled: f || e, ...h, children: [
|
|
35
|
+
x ? /* @__PURE__ */ s("span", { className: t["button__icon-slot"], "aria-hidden": !0, children: e ? /* @__PURE__ */ s(j, { size: o, inverted: l === "inverted" }) : n.cloneElement(i, { size: o }) }) : null,
|
|
34
36
|
/* @__PURE__ */ s("span", { className: t.button__label, children: b }),
|
|
35
|
-
|
|
37
|
+
c && !e && n.isValidElement(m) ? /* @__PURE__ */ s("span", { className: t["button__icon-slot"], "aria-hidden": !0, children: n.cloneElement(m, { size: o }) }) : null
|
|
36
38
|
] });
|
|
37
39
|
}
|
|
38
40
|
export {
|
|
39
|
-
|
|
41
|
+
A as default
|
|
40
42
|
};
|
|
41
43
|
//# sourceMappingURL=Button.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.js","sources":["../../../src/components/button/Button.tsx"],"sourcesContent":["import
|
|
1
|
+
{"version":3,"file":"Button.js","sources":["../../../src/components/button/Button.tsx"],"sourcesContent":["import React, { type ButtonHTMLAttributes, type ReactNode } from 'react';\nimport type { IconSize } from '@/components/icon/Icon';\nimport Spinner from '@/components/spinner/Spinner';\nimport type { SpinnerSize } from '@/components/spinner/Spinner';\nimport { toKebab } from '@/utils/string';\nimport styles from './Button.module.scss';\n\nexport type ButtonEmphasis =\n | 'primary'\n | 'secondary'\n | 'tertiary'\n | 'quaternary'\n | 'link';\n\nexport type ButtonSize = 'x-small' | 'small' | 'medium' | 'large';\n\nexport type ButtonAppearance = 'default' | 'inverted';\n\nexport interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n /** default | inverted (for use on dark backgrounds). Maps to Figma \"Style\". */\n appearance?: ButtonAppearance;\n /** Optional CSS class name. */\n className?: string;\n /** Button label. */\n children: React.ReactNode;\n /** When true, uses destructive (danger) styling. */\n destructive?: boolean;\n /** Visual emphasis. Default: primary. */\n emphasis?: ButtonEmphasis;\n /** Leading icon — pass `<Icon glyph={<YourIcon />} />`. Button injects the correct size. */\n leadingIcon?: ReactNode;\n /** When true, shows a Spinner in the leading slot and disables the button. */\n loading?: boolean;\n /** Size variant. Default: medium. */\n size?: ButtonSize;\n /** Trailing icon — pass `<Icon glyph={<YourIcon />} />`. Button injects the correct size. */\n trailingIcon?: ReactNode;\n}\n\nconst SIZE_ICON_MAP: Record<ButtonSize, IconSize> = {\n 'x-small': '12',\n small: '12',\n medium: '16',\n large: '20',\n};\n\n/**\n * Buttons let people take actions or make decisions with a single tap or click — saving a\n * form, sending a message, confirming a dialog. Compass ships several button variants, each\n * with the same anatomy and rhythm so they feel like members of the same family.\n */\nexport default function Button({\n appearance = 'default',\n className = '',\n destructive = false,\n emphasis = 'primary',\n children,\n leadingIcon,\n loading = false,\n size = 'medium',\n trailingIcon,\n disabled,\n type = 'button',\n ...rest\n}: ButtonProps) {\n const iconSize = SIZE_ICON_MAP[size];\n const emphasisClass = styles[`button--emphasis-${toKebab(emphasis)}`];\n const sizeClass = styles[`button--size-${toKebab(size)}`];\n const appearanceClass =\n appearance === 'inverted' ? styles['button--appearance-inverted'] : '';\n const destructiveClass = destructive ? styles['button--destructive'] : '';\n\n const rootClass = [\n styles.button,\n emphasisClass,\n sizeClass,\n appearanceClass,\n destructiveClass,\n className,\n ]\n .filter(Boolean)\n .join(' ');\n\n const supportsIcons = emphasis !== 'link';\n const showLeadingSlot = loading || (supportsIcons && React.isValidElement(leadingIcon));\n\n return (\n <button className={rootClass} type={type} disabled={disabled || loading} {...rest}>\n {showLeadingSlot ? (\n <span className={styles['button__icon-slot']} aria-hidden>\n {loading\n ? <Spinner size={iconSize as SpinnerSize} inverted={appearance === 'inverted'} />\n : React.cloneElement(leadingIcon as React.ReactElement<{ size?: string }>, { size: iconSize })}\n </span>\n ) : null}\n <span className={styles['button__label']}>{children}</span>\n {supportsIcons && !loading && React.isValidElement(trailingIcon) ? (\n <span className={styles['button__icon-slot']} aria-hidden>\n {React.cloneElement(trailingIcon as React.ReactElement<{ size?: string }>, { size: iconSize })}\n </span>\n ) : null}\n </button>\n );\n}\n"],"names":["SIZE_ICON_MAP","Button","appearance","className","destructive","emphasis","children","leadingIcon","loading","size","trailingIcon","disabled","type","rest","iconSize","emphasisClass","styles","toKebab","sizeClass","appearanceClass","destructiveClass","rootClass","supportsIcons","showLeadingSlot","React","jsxs","jsx","Spinner"],"mappings":";;;;;AAuCA,MAAMA,IAA8C;AAAA,EAClD,WAAW;AAAA,EACX,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,OAAO;AACT;AAOA,SAAwBC,EAAO;AAAA,EAC7B,YAAAC,IAAa;AAAA,EACb,WAAAC,IAAY;AAAA,EACZ,aAAAC,IAAc;AAAA,EACd,UAAAC,IAAW;AAAA,EACX,UAAAC;AAAA,EACA,aAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,MAAAC,IAAO;AAAA,EACP,cAAAC;AAAA,EACA,UAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,GAAGC;AACL,GAAgB;AACd,QAAMC,IAAWd,EAAcS,CAAI,GAC7BM,IAAgBC,EAAO,oBAAoBC,EAAQZ,CAAQ,CAAC,EAAE,GAC9Da,IAAYF,EAAO,gBAAgBC,EAAQR,CAAI,CAAC,EAAE,GAClDU,IACJjB,MAAe,aAAac,EAAO,6BAA6B,IAAI,IAChEI,IAAmBhB,IAAcY,EAAO,qBAAqB,IAAI,IAEjEK,IAAY;AAAA,IAChBL,EAAO;AAAA,IACPD;AAAA,IACAG;AAAA,IACAC;AAAA,IACAC;AAAA,IACAjB;AAAA,EAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG,GAELmB,IAAgBjB,MAAa,QAC7BkB,IAAkBf,KAAYc,KAAiBE,EAAM,eAAejB,CAAW;AAErF,SACE,gBAAAkB,EAAC,YAAO,WAAWJ,GAAW,MAAAT,GAAY,UAAUD,KAAYH,GAAU,GAAGK,GAC1E,UAAA;AAAA,IAAAU,IACC,gBAAAG,EAAC,QAAA,EAAK,WAAWV,EAAO,mBAAmB,GAAG,eAAW,IACtD,UAAAR,IACG,gBAAAkB,EAACC,GAAA,EAAQ,MAAMb,GAAyB,UAAUZ,MAAe,WAAA,CAAY,IAC7EsB,EAAM,aAAajB,GAAsD,EAAE,MAAMO,EAAA,CAAU,EAAA,CACjG,IACE;AAAA,sBACH,QAAA,EAAK,WAAWE,EAAO,eAAmB,UAAAV,GAAS;AAAA,IACnDgB,KAAiB,CAACd,KAAWgB,EAAM,eAAed,CAAY,IAC7D,gBAAAgB,EAAC,QAAA,EAAK,WAAWV,EAAO,mBAAmB,GAAG,eAAW,IACtD,UAAAQ,EAAM,aAAad,GAAuD,EAAE,MAAMI,GAAU,EAAA,CAC/F,IACE;AAAA,EAAA,GACN;AAEJ;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
._button_doayp_2{display:inline-flex;align-items:center;justify-content:center;gap:var(--spacing-xs);font-family:var(--font-family-body);font-weight:var(--font-weight-semibold);border-radius:var(--radius-s);border:0;white-space:nowrap;cursor:pointer;transition:background-color var(--duration-quick) var(--ease-transition),color var(--duration-quick) var(--ease-transition),box-shadow var(--duration-quick) var(--ease-transition),outline-color var(--duration-quick) var(--ease-transition),outline-offset var(--duration-quick) var(--ease-transition);outline:2px solid color-mix(in srgb,var(--focus-ring-color) 0%,transparent);outline-offset:0}._button_doayp_2:focus-visible{outline-color:var(--focus-ring-color);outline-offset:3px}._button_doayp_2:disabled{cursor:not-allowed}._button__label_doayp_24{line-height:1}._button__icon-slot_doayp_27{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}._button--size-x-small_doayp_33{padding:var(--spacing-xxxs) var(--spacing-m)}._button--size-x-small_doayp_33 ._button__label_doayp_24{font-size:var(--font-size-75);line-height:var(--line-height-75)}._button--size-small_doayp_40{padding:var(--spacing-xs) var(--spacing-l)}._button--size-small_doayp_40 ._button__label_doayp_24{font-size:var(--font-size-75);line-height:var(--line-height-75)}._button--size-medium_doayp_47{padding:var(--spacing-s) var(--spacing-xl)}._button--size-medium_doayp_47 ._button__label_doayp_24{font-size:var(--font-size-100);line-height:var(--line-height-100)}._button--size-large_doayp_54{padding:var(--spacing-m) var(--spacing-xxl)}._button--size-large_doayp_54 ._button__label_doayp_24{font-size:var(--font-size-200);line-height:var(--line-height-200)}._button--emphasis-primary_doayp_61{background-color:var(--button-bg);color:var(--button-color)}._button--emphasis-primary_doayp_61:hover:not(:disabled){background-color:color-mix(in srgb,black 8%,var(--button-bg))}._button--emphasis-primary_doayp_61:active:not(:disabled){background-color:color-mix(in srgb,black 16%,var(--button-bg))}._button--emphasis-primary_doayp_61:disabled{background-color:rgba(var(--center-channel-color-rgb),.08);color:rgba(var(--center-channel-color-rgb),.32)}._button--emphasis-secondary_doayp_75{--focus-ring-color: var(--link-color);background-color:transparent;color:var(--link-color);box-shadow:inset 0 0 0 1px var(--link-color)}._button--emphasis-secondary_doayp_75:hover:not(:disabled){background-color:rgba(var(--link-color-rgb),.08)}._button--emphasis-secondary_doayp_75:active:not(:disabled){background-color:rgba(var(--link-color-rgb),.16)}._button--emphasis-secondary_doayp_75:disabled{box-shadow:inset 0 0 0 1px rgba(var(--center-channel-color-rgb),.32);color:rgba(var(--center-channel-color-rgb),.32)}._button--emphasis-tertiary_doayp_91{background-color:rgba(var(--link-color-rgb),.08);color:var(--link-color)}._button--emphasis-tertiary_doayp_91:hover:not(:disabled){background-color:rgba(var(--link-color-rgb),.12)}._button--emphasis-tertiary_doayp_91:active:not(:disabled){background-color:rgba(var(--link-color-rgb),.16)}._button--emphasis-tertiary_doayp_91:disabled{background-color:rgba(var(--center-channel-color-rgb),.08);color:rgba(var(--center-channel-color-rgb),.32)}._button--emphasis-quaternary_doayp_105{background-color:transparent;color:var(--link-color)}._button--emphasis-quaternary_doayp_105:hover:not(:disabled){background-color:rgba(var(--link-color-rgb),.08)}._button--emphasis-quaternary_doayp_105:active:not(:disabled){background-color:rgba(var(--link-color-rgb),.12)}._button--emphasis-quaternary_doayp_105:disabled{color:rgba(var(--center-channel-color-rgb),.32)}._button--emphasis-link_doayp_118{--focus-ring-color: var(--link-color);padding:0;background-color:transparent;color:var(--link-color)}._button--emphasis-link_doayp_118:hover:not(:disabled) ._button__label_doayp_24{text-decoration:underline}._button--emphasis-link_doayp_118:disabled{color:rgba(var(--center-channel-color-rgb),.32)}._button--destructive_doayp_130{--focus-ring-color: var(--error-text, var(--color-danger))}._button--destructive_doayp_130._button--emphasis-primary_doayp_61{background-color:var(--error-text, var(--color-danger));color:var(--button-color)}._button--destructive_doayp_130._button--emphasis-primary_doayp_61:hover:not(:disabled){background-color:color-mix(in srgb,black 8%,var(--error-text, var(--color-danger)))}._button--destructive_doayp_130._button--emphasis-primary_doayp_61:active:not(:disabled){background-color:color-mix(in srgb,black 16%,var(--error-text, var(--color-danger)))}._button--destructive_doayp_130._button--emphasis-primary_doayp_61:disabled{background-color:rgba(var(--center-channel-color-rgb),.08);color:rgba(var(--center-channel-color-rgb),.32)}._button--destructive_doayp_130._button--emphasis-secondary_doayp_75{color:var(--error-text, var(--color-danger));box-shadow:inset 0 0 0 1px var(--error-text, var(--color-danger))}._button--destructive_doayp_130._button--emphasis-secondary_doayp_75:hover:not(:disabled){background-color:rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.08)}._button--destructive_doayp_130._button--emphasis-secondary_doayp_75:active:not(:disabled){background-color:rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.16)}._button--destructive_doayp_130._button--emphasis-secondary_doayp_75:disabled{box-shadow:inset 0 0 0 1px rgba(var(--center-channel-color-rgb),.32);color:rgba(var(--center-channel-color-rgb),.32)}._button--destructive_doayp_130._button--emphasis-tertiary_doayp_91{background-color:rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.08);color:var(--error-text, var(--color-danger))}._button--destructive_doayp_130._button--emphasis-tertiary_doayp_91:hover:not(:disabled){background-color:rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.12)}._button--destructive_doayp_130._button--emphasis-tertiary_doayp_91:active:not(:disabled){background-color:rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.16)}._button--destructive_doayp_130._button--emphasis-tertiary_doayp_91:disabled{background-color:rgba(var(--center-channel-color-rgb),.08);color:rgba(var(--center-channel-color-rgb),.32)}._button--destructive_doayp_130._button--emphasis-quaternary_doayp_105{color:var(--error-text, var(--color-danger))}._button--destructive_doayp_130._button--emphasis-quaternary_doayp_105:hover:not(:disabled){background-color:rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.08)}._button--destructive_doayp_130._button--emphasis-quaternary_doayp_105:active:not(:disabled){background-color:rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.16)}._button--destructive_doayp_130._button--emphasis-quaternary_doayp_105:disabled{color:rgba(var(--center-channel-color-rgb),.32)}._button--destructive_doayp_130._button--emphasis-link_doayp_118{color:var(--error-text, var(--color-danger))}._button--destructive_doayp_130._button--emphasis-link_doayp_118:disabled{color:rgba(var(--center-channel-color-rgb),.32)}._button--appearance-inverted_doayp_193._button--emphasis-primary_doayp_61{background-color:var(--sidebar-text);color:var(--sidebar-bg)}._button--appearance-inverted_doayp_193._button--emphasis-primary_doayp_61:hover:not(:disabled){background-color:rgba(var(--sidebar-text-rgb),.92)}._button--appearance-inverted_doayp_193._button--emphasis-primary_doayp_61:active:not(:disabled){background-color:rgba(var(--sidebar-text-rgb),.88)}._button--appearance-inverted_doayp_193._button--emphasis-primary_doayp_61:disabled{background-color:rgba(var(--sidebar-text-rgb),.08);color:rgba(var(--sidebar-text-rgb),.32)}._button--appearance-inverted_doayp_193._button--emphasis-secondary_doayp_75{color:var(--sidebar-text);box-shadow:inset 0 0 0 1px var(--sidebar-text)}._button--appearance-inverted_doayp_193._button--emphasis-secondary_doayp_75:hover:not(:disabled){background-color:rgba(var(--sidebar-text-rgb),.12)}._button--appearance-inverted_doayp_193._button--emphasis-secondary_doayp_75:active:not(:disabled){background-color:rgba(var(--sidebar-text-rgb),.2)}._button--appearance-inverted_doayp_193._button--emphasis-secondary_doayp_75:disabled{box-shadow:inset 0 0 0 1px rgba(var(--center-channel-color-rgb),.32);color:rgba(var(--center-channel-color-rgb),.32)}._button--appearance-inverted_doayp_193._button--emphasis-tertiary_doayp_91{background-color:rgba(var(--sidebar-text-rgb),.08);color:var(--sidebar-text)}._button--appearance-inverted_doayp_193._button--emphasis-tertiary_doayp_91:hover:not(:disabled){background-color:rgba(var(--sidebar-text-rgb),.12)}._button--appearance-inverted_doayp_193._button--emphasis-tertiary_doayp_91:active:not(:disabled){background-color:rgba(var(--sidebar-text-rgb),.16)}._button--appearance-inverted_doayp_193._button--emphasis-tertiary_doayp_91:disabled{background-color:rgba(var(--sidebar-text-rgb),.08);color:rgba(var(--sidebar-text-rgb),.32)}._button--appearance-inverted_doayp_193._button--emphasis-quaternary_doayp_105{color:var(--sidebar-text)}._button--appearance-inverted_doayp_193._button--emphasis-quaternary_doayp_105:hover:not(:disabled){background-color:rgba(var(--sidebar-text-rgb),.12)}._button--appearance-inverted_doayp_193._button--emphasis-quaternary_doayp_105:active:not(:disabled){background-color:rgba(var(--sidebar-text-rgb),.2)}._button--appearance-inverted_doayp_193._button--emphasis-quaternary_doayp_105:disabled{color:rgba(var(--sidebar-text-rgb),.32)}._button--appearance-inverted_doayp_193._button--emphasis-link_doayp_118{color:var(--sidebar-text)}._button--appearance-inverted_doayp_193._button--emphasis-link_doayp_118:disabled{color:rgba(var(--sidebar-text-rgb),.32)}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./Button.module.css');const t="
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./Button.module.css');const t="_button_doayp_2",o="_button__label_doayp_24",e={button:t,button__label:o,"button__icon-slot":"_button__icon-slot_doayp_27","button--size-x-small":"_button--size-x-small_doayp_33","button--size-small":"_button--size-small_doayp_40","button--size-medium":"_button--size-medium_doayp_47","button--size-large":"_button--size-large_doayp_54","button--emphasis-primary":"_button--emphasis-primary_doayp_61","button--emphasis-secondary":"_button--emphasis-secondary_doayp_75","button--emphasis-tertiary":"_button--emphasis-tertiary_doayp_91","button--emphasis-quaternary":"_button--emphasis-quaternary_doayp_105","button--emphasis-link":"_button--emphasis-link_doayp_118","button--destructive":"_button--destructive_doayp_130","button--appearance-inverted":"_button--appearance-inverted_doayp_193"};exports.button=t;exports.button__label=o;exports.default=e;
|
|
2
2
|
//# sourceMappingURL=Button.module.scss.cjs.map
|
|
@@ -1,18 +1,18 @@
|
|
|
1
|
-
import './Button.module.css';const t = "
|
|
1
|
+
import './Button.module.css';const t = "_button_doayp_2", o = "_button__label_doayp_24", _ = {
|
|
2
2
|
button: t,
|
|
3
3
|
button__label: o,
|
|
4
|
-
"button__icon-slot": "_button__icon-
|
|
5
|
-
"button--size-x-small": "_button--size-x-
|
|
6
|
-
"button--size-small": "_button--size-
|
|
7
|
-
"button--size-medium": "_button--size-
|
|
8
|
-
"button--size-large": "_button--size-
|
|
9
|
-
"button--emphasis-primary": "_button--emphasis-
|
|
10
|
-
"button--emphasis-secondary": "_button--emphasis-
|
|
11
|
-
"button--emphasis-tertiary": "_button--emphasis-
|
|
12
|
-
"button--emphasis-quaternary": "_button--emphasis-
|
|
13
|
-
"button--emphasis-link": "_button--emphasis-
|
|
14
|
-
"button--destructive": "_button--
|
|
15
|
-
"button--appearance-inverted": "_button--appearance-
|
|
4
|
+
"button__icon-slot": "_button__icon-slot_doayp_27",
|
|
5
|
+
"button--size-x-small": "_button--size-x-small_doayp_33",
|
|
6
|
+
"button--size-small": "_button--size-small_doayp_40",
|
|
7
|
+
"button--size-medium": "_button--size-medium_doayp_47",
|
|
8
|
+
"button--size-large": "_button--size-large_doayp_54",
|
|
9
|
+
"button--emphasis-primary": "_button--emphasis-primary_doayp_61",
|
|
10
|
+
"button--emphasis-secondary": "_button--emphasis-secondary_doayp_75",
|
|
11
|
+
"button--emphasis-tertiary": "_button--emphasis-tertiary_doayp_91",
|
|
12
|
+
"button--emphasis-quaternary": "_button--emphasis-quaternary_doayp_105",
|
|
13
|
+
"button--emphasis-link": "_button--emphasis-link_doayp_118",
|
|
14
|
+
"button--destructive": "_button--destructive_doayp_130",
|
|
15
|
+
"button--appearance-inverted": "_button--appearance-inverted_doayp_193"
|
|
16
16
|
};
|
|
17
17
|
export {
|
|
18
18
|
t as button,
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("react/jsx-runtime"),q=require("react"),__M=require("@mattermost/compass-icons/components/close-circle.js"),M=__M?.default??__M,A=require("../icon/Icon.cjs"),I=require("../user-avatar/UserAvatar.cjs"),D=require("../../utils/string.cjs"),y=require("./ChipGroup.cjs"),a=require("./Chip.module.scss.cjs"),k={small:"10",medium:"12",large:"16"},w={small:"12",medium:"16",large:"20"};function T(t){return typeof t=="string"||typeof t=="number"?String(t).trim():Array.isArray(t)?t.map(T).filter(Boolean).join(" "):""}function L(t){var r;const s=(b,h)=>{let n=b;for(;n;){if(n instanceof HTMLElement&&n.dataset.chip!=null||n instanceof HTMLInputElement||n instanceof HTMLTextAreaElement)return n;n=h==="next"?n.nextElementSibling:n.previousElementSibling}return null},l=t.parentElement,c=l==null?void 0:l.nextElementSibling,f=c instanceof HTMLInputElement||c instanceof HTMLTextAreaElement?c:null;return s(t.nextElementSibling,"next")??s(t.previousElementSibling,"previous")??f??(l==null?void 0:l.querySelector("input, textarea"))??((r=l==null?void 0:l.parentElement)==null?void 0:r.querySelector("input, textarea"))??null}function N({children:t,size:s="medium",compact:l=!1,leadingIcon:c,leadingAvatar:f,onRemove:r,error:b=!1,colored:h=!1,className:n="",...i}){const x=q.useContext(y.ChipGroupContext),g=k[s],S=w[s],p=T(t),_=i["aria-label"]??(r!=null&&p!==""?`${p}. Press Delete to remove.`:p!==""?p:void 0),m=r!=null,C=e=>{const d=e.currentTarget.closest("[data-chip]"),u=d instanceof HTMLElement?L(d):null,j=e.currentTarget;r==null||r(e),window.setTimeout(()=>{j.isConnected||u==null||u.isConnected&&(u.dataset.chip!=null?y.activateChip(u):u.focus({focusVisible:!0}))},0)},E=[a.default.chip,a.default[`chip--size-${D.toKebab(s)}`],l&&a.default["chip--compact"],b&&a.default["chip--error"],h&&a.default["chip--colored"],n].filter(Boolean).join(" "),v=e=>{var d,u;(d=i.onKeyDown)==null||d.call(i,e),!(x||!m||e.defaultPrevented)&&(e.key==="Delete"||e.key==="Backspace"||e.key==="Enter"||e.key===" ")&&(e.preventDefault(),(u=e.currentTarget.querySelector("[data-chip-remove]"))==null||u.click())};return o.jsxs("div",{className:E,...i,role:m?"button":i.role,tabIndex:m?x?-1:0:i.tabIndex,"aria-label":m?_:i["aria-label"],"data-chip":"",onKeyDown:v,children:[f!=null?o.jsx("span",{className:a.default["chip__avatar-slot"],children:o.jsx(I.default,{src:f.src,alt:f.alt,size:S})}):c!=null?o.jsx("span",{className:a.default["chip__icon-slot"],"aria-hidden":!0,children:o.jsx(A.default,{glyph:c,size:g})}):null,o.jsx("span",{className:a.default.chip__label,children:t}),r!=null?o.jsx("button",{type:"button",className:a.default.chip__remove,"data-chip-remove":"",tabIndex:-1,"aria-hidden":!0,onMouseDown:e=>{e.preventDefault()},onClick:C,children:o.jsx(M,{size:Number(g),"aria-hidden":!0})}):null]})}exports.default=N;
|
|
2
2
|
//# sourceMappingURL=Chip.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Chip.cjs","sources":["../../../src/components/chip/Chip.tsx"],"sourcesContent":["import { useContext, type HTMLAttributes, type KeyboardEvent, type MouseEvent, type ReactNode } from 'react';\nimport CloseCircleIcon from '@mattermost/compass-icons/components/close-circle';\nimport Icon from '@/components/icon/Icon';\nimport type { IconSize } from '@/components/icon/Icon';\nimport UserAvatar from '@/components/user-avatar/UserAvatar';\nimport type { UserAvatarSize } from '@/components/user-avatar/UserAvatar';\nimport { toKebab } from '@/utils/string';\nimport { activateChip, ChipGroupContext } from './ChipGroup';\nimport styles from './Chip.module.scss';\n\nexport type ChipSize = 'small' | 'medium' | '
|
|
1
|
+
{"version":3,"file":"Chip.cjs","sources":["../../../src/components/chip/Chip.tsx"],"sourcesContent":["import { useContext, type HTMLAttributes, type KeyboardEvent, type MouseEvent, type ReactNode } from 'react';\nimport CloseCircleIcon from '@mattermost/compass-icons/components/close-circle';\nimport Icon from '@/components/icon/Icon';\nimport type { IconSize } from '@/components/icon/Icon';\nimport UserAvatar from '@/components/user-avatar/UserAvatar';\nimport type { UserAvatarSize } from '@/components/user-avatar/UserAvatar';\nimport { toKebab } from '@/utils/string';\nimport { activateChip, ChipGroupContext } from './ChipGroup';\nimport styles from './Chip.module.scss';\n\nexport type ChipSize = 'small' | 'medium' | 'large';\n\nexport interface ChipProps extends Omit<\n HTMLAttributes<HTMLDivElement>,\n 'children'\n> {\n /** Chip label. */\n children: ReactNode;\n /** Visual size. Default: Medium. */\n size?: ChipSize;\n /** Reduces vertical and horizontal padding. */\n compact?: boolean;\n /** Leading icon from @mattermost/compass-icons. */\n leadingIcon?: ReactNode;\n /** Leading avatar. Overrides leading-icon when both are provided. */\n leadingAvatar?: { src: string; alt: string };\n /** When provided, shows the remove (×) control and calls this on click. */\n onRemove?: (e: MouseEvent<HTMLButtonElement>) => void;\n /** Shows an error border. */\n error?: boolean;\n /** Adds a colored background overlay. */\n colored?: boolean;\n className?: string;\n}\n\nconst ICON_SIZE_MAP: Record<ChipSize, IconSize> = {\n small: '10',\n medium: '12',\n large: '16',\n};\n\nconst AVATAR_SIZE_MAP: Record<ChipSize, UserAvatarSize> = {\n small: '12',\n medium: '16',\n large: '20',\n};\n\nfunction labelTextFromChildren(children: ReactNode): string {\n if (typeof children === 'string' || typeof children === 'number') {\n return String(children).trim();\n }\n if (Array.isArray(children)) {\n return children.map(labelTextFromChildren).filter(Boolean).join(' ');\n }\n return '';\n}\n\nfunction focusTargetAfterRemove(chipEl: HTMLElement): HTMLElement | null {\n const scan = (\n start: Element | null,\n direction: 'next' | 'previous',\n ): HTMLElement | null => {\n let el: Element | null = start;\n while (el) {\n if (el instanceof HTMLElement && el.dataset.chip != null) {\n return el;\n }\n if (\n el instanceof HTMLInputElement ||\n el instanceof HTMLTextAreaElement\n ) {\n return el;\n }\n el =\n direction === 'next' ? el.nextElementSibling : el.previousElementSibling;\n }\n return null;\n };\n\n const parent = chipEl.parentElement;\n const afterGroup = parent?.nextElementSibling;\n const groupSiblingInput =\n afterGroup instanceof HTMLInputElement ||\n afterGroup instanceof HTMLTextAreaElement\n ? afterGroup\n : null;\n\n return (\n scan(chipEl.nextElementSibling, 'next') ??\n scan(chipEl.previousElementSibling, 'previous') ??\n groupSiblingInput ??\n parent?.querySelector('input, textarea') ??\n parent?.parentElement?.querySelector('input, textarea') ??\n null\n );\n}\n\n/**\n * Chips are compact, self-contained tokens that represent a selection — a person added to an\n * invite, a filter applied to a search, a chosen value in a tokenizing input. Each Chip\n * stands on its own and is removable or selectable, depending on context.\n */\nexport default function Chip({\n children,\n size = 'medium',\n compact = false,\n leadingIcon,\n leadingAvatar,\n onRemove,\n error = false,\n colored = false,\n className = '',\n ...rest\n}: ChipProps) {\n const grouped = useContext(ChipGroupContext);\n const iconSize = ICON_SIZE_MAP[size];\n const avatarSize = AVATAR_SIZE_MAP[size];\n const labelText = labelTextFromChildren(children);\n const groupedAriaLabel =\n rest['aria-label'] ??\n (onRemove != null && labelText !== ''\n ? `${labelText}. Press Delete to remove.`\n : labelText !== ''\n ? labelText\n : undefined);\n const removable = onRemove != null;\n\n const handleRemove = (e: MouseEvent<HTMLButtonElement>) => {\n const chipEl = e.currentTarget.closest('[data-chip]');\n const nextFocus =\n chipEl instanceof HTMLElement ? focusTargetAfterRemove(chipEl) : null;\n const removeButton = e.currentTarget;\n onRemove?.(e);\n window.setTimeout(() => {\n if (removeButton.isConnected || nextFocus == null) return;\n if (!nextFocus.isConnected) return;\n if (nextFocus.dataset.chip != null) {\n activateChip(nextFocus);\n } else {\n nextFocus.focus({ focusVisible: true } as FocusOptions);\n }\n }, 0);\n };\n\n const rootClass = [\n styles.chip,\n styles[`chip--size-${toKebab(size)}`],\n compact && styles['chip--compact'],\n error && styles['chip--error'],\n colored && styles['chip--colored'],\n className,\n ]\n .filter(Boolean)\n .join(' ');\n\n const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {\n rest.onKeyDown?.(e);\n if (grouped || !removable || e.defaultPrevented) return;\n if (\n e.key === 'Delete' ||\n e.key === 'Backspace' ||\n e.key === 'Enter' ||\n e.key === ' '\n ) {\n e.preventDefault();\n e.currentTarget\n .querySelector<HTMLButtonElement>('[data-chip-remove]')\n ?.click();\n }\n };\n\n return (\n <div\n className={rootClass}\n {...rest}\n role={removable ? 'button' : rest.role}\n tabIndex={removable ? (grouped ? -1 : 0) : rest.tabIndex}\n aria-label={removable ? groupedAriaLabel : rest['aria-label']}\n data-chip=\"\"\n onKeyDown={handleKeyDown}\n >\n {leadingAvatar != null ? (\n <span className={styles['chip__avatar-slot']}>\n <UserAvatar\n src={leadingAvatar.src}\n alt={leadingAvatar.alt}\n size={avatarSize}\n />\n </span>\n ) : leadingIcon != null ? (\n <span className={styles['chip__icon-slot']} aria-hidden>\n <Icon glyph={leadingIcon} size={iconSize} />\n </span>\n ) : null}\n <span className={styles['chip__label']}>{children}</span>\n {onRemove != null ? (\n <button\n type=\"button\"\n className={styles['chip__remove']}\n data-chip-remove=\"\"\n tabIndex={-1}\n aria-hidden\n onMouseDown={(e) => {\n e.preventDefault();\n }}\n onClick={handleRemove}\n >\n <CloseCircleIcon size={Number(iconSize)} aria-hidden />\n </button>\n ) : null}\n </div>\n );\n}\n"],"names":["ICON_SIZE_MAP","AVATAR_SIZE_MAP","labelTextFromChildren","children","focusTargetAfterRemove","chipEl","scan","start","direction","el","parent","afterGroup","groupSiblingInput","_a","Chip","size","compact","leadingIcon","leadingAvatar","onRemove","error","colored","className","rest","grouped","useContext","ChipGroupContext","iconSize","avatarSize","labelText","groupedAriaLabel","removable","handleRemove","nextFocus","removeButton","activateChip","rootClass","styles","toKebab","handleKeyDown","_b","jsxs","jsx","UserAvatar","Icon","CloseCircleIcon"],"mappings":"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"}
|
|
@@ -1,10 +1,12 @@
|
|
|
1
1
|
import { HTMLAttributes, MouseEvent, ReactNode } from 'react';
|
|
2
|
-
export type ChipSize = 'small' | 'medium' | '
|
|
2
|
+
export type ChipSize = 'small' | 'medium' | 'large';
|
|
3
3
|
export interface ChipProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
|
|
4
4
|
/** Chip label. */
|
|
5
5
|
children: ReactNode;
|
|
6
6
|
/** Visual size. Default: Medium. */
|
|
7
7
|
size?: ChipSize;
|
|
8
|
+
/** Reduces vertical and horizontal padding. */
|
|
9
|
+
compact?: boolean;
|
|
8
10
|
/** Leading icon from @mattermost/compass-icons. */
|
|
9
11
|
leadingIcon?: ReactNode;
|
|
10
12
|
/** Leading avatar. Overrides leading-icon when both are provided. */
|
|
@@ -25,5 +27,5 @@ export interface ChipProps extends Omit<HTMLAttributes<HTMLDivElement>, 'childre
|
|
|
25
27
|
* invite, a filter applied to a search, a chosen value in a tokenizing input. Each Chip
|
|
26
28
|
* stands on its own and is removable or selectable, depending on context.
|
|
27
29
|
*/
|
|
28
|
-
export default function Chip({ children, size, leadingIcon, leadingAvatar, onRemove, error, colored, className, ...rest }: ChipProps): import("react/jsx-runtime").JSX.Element;
|
|
30
|
+
export default function Chip({ children, size, compact, leadingIcon, leadingAvatar, onRemove, error, colored, className, ...rest }: ChipProps): import("react/jsx-runtime").JSX.Element;
|
|
29
31
|
//# sourceMappingURL=Chip.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Chip.d.ts","sourceRoot":"","sources":["../../../src/components/chip/Chip.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,cAAc,EAAsB,KAAK,UAAU,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAU7G,MAAM,MAAM,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,
|
|
1
|
+
{"version":3,"file":"Chip.d.ts","sourceRoot":"","sources":["../../../src/components/chip/Chip.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,cAAc,EAAsB,KAAK,UAAU,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAU7G,MAAM,MAAM,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEpD,MAAM,WAAW,SAAU,SAAQ,IAAI,CACrC,cAAc,CAAC,cAAc,CAAC,EAC9B,UAAU,CACX;IACC,kBAAkB;IAClB,QAAQ,EAAE,SAAS,CAAC;IACpB,oCAAoC;IACpC,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,+CAA+C;IAC/C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,mDAAmD;IACnD,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,qEAAqE;IACrE,aAAa,CAAC,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAA;KAAE,CAAC;IAC7C,2EAA2E;IAC3E,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IACtD,6BAA6B;IAC7B,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,yCAAyC;IACzC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAgED;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,IAAI,CAAC,EAC3B,QAAQ,EACR,IAAe,EACf,OAAe,EACf,WAAW,EACX,aAAa,EACb,QAAQ,EACR,KAAa,EACb,OAAe,EACf,SAAc,EACd,GAAG,IAAI,EACR,EAAE,SAAS,2CAmGX"}
|
|
@@ -1,97 +1,97 @@
|
|
|
1
|
-
import { jsxs as
|
|
2
|
-
import { useContext as
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
import
|
|
6
|
-
import { toKebab as
|
|
7
|
-
import { ChipGroupContext as
|
|
8
|
-
import
|
|
9
|
-
const
|
|
1
|
+
import { jsxs as A, jsx as c } from "react/jsx-runtime";
|
|
2
|
+
import { useContext as I } from "react";
|
|
3
|
+
import __M from "@mattermost/compass-icons/components/close-circle.js";const M=__M&&__M.default?__M.default:__M;
|
|
4
|
+
import D from "../icon/Icon.js";
|
|
5
|
+
import k from "../user-avatar/UserAvatar.js";
|
|
6
|
+
import { toKebab as w } from "../../utils/string.js";
|
|
7
|
+
import { ChipGroupContext as L, activateChip as N } from "./ChipGroup.js";
|
|
8
|
+
import o from "./Chip.module.scss.js";
|
|
9
|
+
const H = {
|
|
10
10
|
small: "10",
|
|
11
11
|
medium: "12",
|
|
12
|
-
"medium-compact": "12",
|
|
13
12
|
large: "16"
|
|
14
|
-
},
|
|
13
|
+
}, j = {
|
|
15
14
|
small: "12",
|
|
16
15
|
medium: "16",
|
|
17
|
-
"medium-compact": "16",
|
|
18
16
|
large: "20"
|
|
19
17
|
};
|
|
20
|
-
function
|
|
21
|
-
return typeof
|
|
18
|
+
function T(t) {
|
|
19
|
+
return typeof t == "string" || typeof t == "number" ? String(t).trim() : Array.isArray(t) ? t.map(T).filter(Boolean).join(" ") : "";
|
|
22
20
|
}
|
|
23
|
-
function
|
|
24
|
-
var
|
|
25
|
-
const
|
|
26
|
-
let
|
|
27
|
-
for (;
|
|
28
|
-
if (
|
|
29
|
-
return
|
|
30
|
-
|
|
21
|
+
function z(t) {
|
|
22
|
+
var r;
|
|
23
|
+
const s = (b, h) => {
|
|
24
|
+
let n = b;
|
|
25
|
+
for (; n; ) {
|
|
26
|
+
if (n instanceof HTMLElement && n.dataset.chip != null || n instanceof HTMLInputElement || n instanceof HTMLTextAreaElement)
|
|
27
|
+
return n;
|
|
28
|
+
n = h === "next" ? n.nextElementSibling : n.previousElementSibling;
|
|
31
29
|
}
|
|
32
30
|
return null;
|
|
33
|
-
}, l =
|
|
34
|
-
return
|
|
31
|
+
}, l = t.parentElement, u = l == null ? void 0 : l.nextElementSibling, m = u instanceof HTMLInputElement || u instanceof HTMLTextAreaElement ? u : null;
|
|
32
|
+
return s(t.nextElementSibling, "next") ?? s(t.previousElementSibling, "previous") ?? m ?? (l == null ? void 0 : l.querySelector("input, textarea")) ?? ((r = l == null ? void 0 : l.parentElement) == null ? void 0 : r.querySelector("input, textarea")) ?? null;
|
|
35
33
|
}
|
|
36
|
-
function
|
|
37
|
-
children:
|
|
38
|
-
size:
|
|
39
|
-
|
|
40
|
-
|
|
34
|
+
function $({
|
|
35
|
+
children: t,
|
|
36
|
+
size: s = "medium",
|
|
37
|
+
compact: l = !1,
|
|
38
|
+
leadingIcon: u,
|
|
39
|
+
leadingAvatar: m,
|
|
41
40
|
onRemove: r,
|
|
42
|
-
error:
|
|
43
|
-
colored:
|
|
44
|
-
className:
|
|
45
|
-
...
|
|
41
|
+
error: b = !1,
|
|
42
|
+
colored: h = !1,
|
|
43
|
+
className: n = "",
|
|
44
|
+
...i
|
|
46
45
|
}) {
|
|
47
|
-
const
|
|
48
|
-
const
|
|
49
|
-
r == null || r(
|
|
50
|
-
|
|
46
|
+
const x = I(L), y = H[s], g = j[s], f = T(t), E = i["aria-label"] ?? (r != null && f !== "" ? `${f}. Press Delete to remove.` : f !== "" ? f : void 0), d = r != null, S = (e) => {
|
|
47
|
+
const p = e.currentTarget.closest("[data-chip]"), a = p instanceof HTMLElement ? z(p) : null, v = e.currentTarget;
|
|
48
|
+
r == null || r(e), window.setTimeout(() => {
|
|
49
|
+
v.isConnected || a == null || a.isConnected && (a.dataset.chip != null ? N(a) : a.focus({ focusVisible: !0 }));
|
|
51
50
|
}, 0);
|
|
52
|
-
},
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
51
|
+
}, C = [
|
|
52
|
+
o.chip,
|
|
53
|
+
o[`chip--size-${w(s)}`],
|
|
54
|
+
l && o["chip--compact"],
|
|
55
|
+
b && o["chip--error"],
|
|
56
|
+
h && o["chip--colored"],
|
|
57
|
+
n
|
|
58
|
+
].filter(Boolean).join(" "), _ = (e) => {
|
|
59
|
+
var p, a;
|
|
60
|
+
(p = i.onKeyDown) == null || p.call(i, e), !(x || !d || e.defaultPrevented) && (e.key === "Delete" || e.key === "Backspace" || e.key === "Enter" || e.key === " ") && (e.preventDefault(), (a = e.currentTarget.querySelector("[data-chip-remove]")) == null || a.click());
|
|
61
61
|
};
|
|
62
|
-
return /* @__PURE__ */
|
|
62
|
+
return /* @__PURE__ */ A(
|
|
63
63
|
"div",
|
|
64
64
|
{
|
|
65
|
-
className:
|
|
66
|
-
...
|
|
67
|
-
role:
|
|
68
|
-
tabIndex:
|
|
69
|
-
"aria-label":
|
|
65
|
+
className: C,
|
|
66
|
+
...i,
|
|
67
|
+
role: d ? "button" : i.role,
|
|
68
|
+
tabIndex: d ? x ? -1 : 0 : i.tabIndex,
|
|
69
|
+
"aria-label": d ? E : i["aria-label"],
|
|
70
70
|
"data-chip": "",
|
|
71
|
-
onKeyDown:
|
|
71
|
+
onKeyDown: _,
|
|
72
72
|
children: [
|
|
73
|
-
|
|
74
|
-
|
|
73
|
+
m != null ? /* @__PURE__ */ c("span", { className: o["chip__avatar-slot"], children: /* @__PURE__ */ c(
|
|
74
|
+
k,
|
|
75
75
|
{
|
|
76
|
-
src:
|
|
77
|
-
alt:
|
|
78
|
-
size:
|
|
76
|
+
src: m.src,
|
|
77
|
+
alt: m.alt,
|
|
78
|
+
size: g
|
|
79
79
|
}
|
|
80
|
-
) }) :
|
|
81
|
-
/* @__PURE__ */ c("span", { className:
|
|
80
|
+
) }) : u != null ? /* @__PURE__ */ c("span", { className: o["chip__icon-slot"], "aria-hidden": !0, children: /* @__PURE__ */ c(D, { glyph: u, size: y }) }) : null,
|
|
81
|
+
/* @__PURE__ */ c("span", { className: o.chip__label, children: t }),
|
|
82
82
|
r != null ? /* @__PURE__ */ c(
|
|
83
83
|
"button",
|
|
84
84
|
{
|
|
85
85
|
type: "button",
|
|
86
|
-
className:
|
|
86
|
+
className: o.chip__remove,
|
|
87
87
|
"data-chip-remove": "",
|
|
88
88
|
tabIndex: -1,
|
|
89
89
|
"aria-hidden": !0,
|
|
90
|
-
onMouseDown: (
|
|
91
|
-
|
|
90
|
+
onMouseDown: (e) => {
|
|
91
|
+
e.preventDefault();
|
|
92
92
|
},
|
|
93
|
-
onClick:
|
|
94
|
-
children: /* @__PURE__ */ c(
|
|
93
|
+
onClick: S,
|
|
94
|
+
children: /* @__PURE__ */ c(M, { size: Number(y), "aria-hidden": !0 })
|
|
95
95
|
}
|
|
96
96
|
) : null
|
|
97
97
|
]
|
|
@@ -99,6 +99,6 @@ function Z({
|
|
|
99
99
|
);
|
|
100
100
|
}
|
|
101
101
|
export {
|
|
102
|
-
|
|
102
|
+
$ as default
|
|
103
103
|
};
|
|
104
104
|
//# sourceMappingURL=Chip.js.map
|