@mirohq/design-system-chip 1.2.61-reactdismissablelayer.0 → 1.3.0-filter-chip.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/main.js +109 -16
- package/dist/main.js.map +1 -1
- package/dist/module.js +110 -17
- package/dist/module.js.map +1 -1
- package/dist/types.d.ts +16 -10
- package/package.json +5 -4
package/dist/main.js
CHANGED
|
@@ -3,12 +3,13 @@
|
|
|
3
3
|
var jsxRuntime = require('react/jsx-runtime');
|
|
4
4
|
var React = require('react');
|
|
5
5
|
var designSystemIcons = require('@mirohq/design-system-icons');
|
|
6
|
+
var designSystemSpinner = require('@mirohq/design-system-spinner');
|
|
6
7
|
var designSystemStitches = require('@mirohq/design-system-stitches');
|
|
7
8
|
var designSystemPrimitive = require('@mirohq/design-system-primitive');
|
|
8
9
|
var designSystemBaseButton = require('@mirohq/design-system-base-button');
|
|
9
10
|
var designSystemStyles = require('@mirohq/design-system-styles');
|
|
10
11
|
|
|
11
|
-
const
|
|
12
|
+
const chipStyles = {
|
|
12
13
|
fontSize: "$150",
|
|
13
14
|
lineHeight: 1.3,
|
|
14
15
|
padding: "$50 $100",
|
|
@@ -18,19 +19,58 @@ const StyledChip = designSystemStitches.styled(designSystemPrimitive.Primitive.d
|
|
|
18
19
|
gap: "$50",
|
|
19
20
|
backgroundColor: "$chip-background",
|
|
20
21
|
color: "$chip-text",
|
|
21
|
-
maxWidth: "100%"
|
|
22
|
+
maxWidth: "100%"
|
|
23
|
+
};
|
|
24
|
+
const disabledAppearance = {
|
|
25
|
+
backgroundColor: "$chip-background-disabled"
|
|
26
|
+
};
|
|
27
|
+
const StyledChip = designSystemStitches.styled(designSystemPrimitive.Primitive.div, {
|
|
28
|
+
...chipStyles,
|
|
22
29
|
variants: {
|
|
23
30
|
disabled: {
|
|
24
|
-
true:
|
|
25
|
-
backgroundColor: "$chip-background-disabled"
|
|
26
|
-
}
|
|
31
|
+
true: disabledAppearance
|
|
27
32
|
}
|
|
28
33
|
}
|
|
29
34
|
});
|
|
35
|
+
const StyledPressableChip = designSystemStitches.styled(designSystemBaseButton.BaseButton, {
|
|
36
|
+
...chipStyles,
|
|
37
|
+
position: "relative",
|
|
38
|
+
...designSystemStyles.focus.css({
|
|
39
|
+
boxShadow: "$focus"
|
|
40
|
+
}),
|
|
41
|
+
// Attribute selector so `disabled` reaches BaseButton / usePress (a stitches
|
|
42
|
+
// `disabled` variant would consume the prop and leave the button enabled).
|
|
43
|
+
"&[disabled]": disabledAppearance,
|
|
44
|
+
// Loading stays visually idle — only the wait cursor signals it. Don't reuse
|
|
45
|
+
// the disabled mute; that made loading look broken.
|
|
46
|
+
'&[aria-busy="true"]': {
|
|
47
|
+
cursor: "wait",
|
|
48
|
+
pointerEvents: "none"
|
|
49
|
+
}
|
|
50
|
+
});
|
|
30
51
|
const StyledChipContent = designSystemStitches.styled(designSystemPrimitive.Primitive.div, {
|
|
31
52
|
overflow: "hidden",
|
|
32
53
|
whiteSpace: "nowrap",
|
|
33
|
-
textOverflow: "ellipsis"
|
|
54
|
+
textOverflow: "ellipsis",
|
|
55
|
+
variants: {
|
|
56
|
+
loading: {
|
|
57
|
+
true: {
|
|
58
|
+
opacity: 0
|
|
59
|
+
}
|
|
60
|
+
}
|
|
61
|
+
}
|
|
62
|
+
});
|
|
63
|
+
const StyledSpinnerBox = designSystemStitches.styled(designSystemPrimitive.Primitive.div, {
|
|
64
|
+
display: "flex",
|
|
65
|
+
alignItems: "center",
|
|
66
|
+
justifyContent: "center",
|
|
67
|
+
position: "absolute",
|
|
68
|
+
top: 0,
|
|
69
|
+
left: 0,
|
|
70
|
+
bottom: 0,
|
|
71
|
+
right: 0,
|
|
72
|
+
margin: "auto",
|
|
73
|
+
zIndex: 1
|
|
34
74
|
});
|
|
35
75
|
const StyledChipButton = designSystemStitches.styled(designSystemBaseButton.BaseButton, {
|
|
36
76
|
color: "$icon-secondary",
|
|
@@ -45,19 +85,72 @@ const StyledImageSlot = designSystemStitches.styled(designSystemPrimitive.Primit
|
|
|
45
85
|
|
|
46
86
|
const ImageSlot = StyledImageSlot;
|
|
47
87
|
|
|
88
|
+
const hasPressEvent = (props) => {
|
|
89
|
+
if ("onClick" in props && props.onClick != null) return true;
|
|
90
|
+
if ("onPress" in props && props.onPress != null) return true;
|
|
91
|
+
return false;
|
|
92
|
+
};
|
|
48
93
|
const Chip = React.forwardRef(
|
|
49
|
-
(
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
94
|
+
(props, forwardRef) => {
|
|
95
|
+
const {
|
|
96
|
+
children,
|
|
97
|
+
removable = true,
|
|
98
|
+
onRemove,
|
|
99
|
+
removeAriaLabel,
|
|
100
|
+
loading = false,
|
|
101
|
+
...restProps
|
|
102
|
+
} = props;
|
|
103
|
+
const pressable = hasPressEvent(restProps);
|
|
104
|
+
const isLoading = pressable && loading;
|
|
105
|
+
const content = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
106
|
+
isLoading && /* @__PURE__ */ jsxRuntime.jsx(
|
|
107
|
+
StyledSpinnerBox,
|
|
108
|
+
{
|
|
109
|
+
"aria-hidden": true,
|
|
110
|
+
"data-testid": process.env.NODE_ENV === "test" ? "chip-spinner" : void 0,
|
|
111
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(designSystemSpinner.Spinner, { size: "small" })
|
|
112
|
+
}
|
|
113
|
+
),
|
|
114
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
115
|
+
StyledChipContent,
|
|
116
|
+
{
|
|
117
|
+
"data-chip-content": "",
|
|
118
|
+
loading: isLoading || void 0,
|
|
119
|
+
children
|
|
120
|
+
}
|
|
121
|
+
),
|
|
122
|
+
!pressable && removable && /* @__PURE__ */ jsxRuntime.jsx(
|
|
123
|
+
StyledChipButton,
|
|
124
|
+
{
|
|
125
|
+
type: "button",
|
|
126
|
+
onClick: onRemove,
|
|
127
|
+
"aria-label": removeAriaLabel,
|
|
128
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(designSystemIcons.IconCross, { size: "small" })
|
|
129
|
+
}
|
|
130
|
+
)
|
|
131
|
+
] });
|
|
132
|
+
if (pressable) {
|
|
133
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
134
|
+
StyledPressableChip,
|
|
135
|
+
{
|
|
136
|
+
type: "button",
|
|
137
|
+
...restProps,
|
|
138
|
+
ref: forwardRef,
|
|
139
|
+
"aria-busy": isLoading || void 0,
|
|
140
|
+
"aria-disabled": isLoading || void 0,
|
|
141
|
+
children: content
|
|
142
|
+
}
|
|
143
|
+
);
|
|
144
|
+
}
|
|
145
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
146
|
+
StyledChip,
|
|
53
147
|
{
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
children: /* @__PURE__ */ jsxRuntime.jsx(designSystemIcons.IconCross, { size: "small" })
|
|
148
|
+
...restProps,
|
|
149
|
+
ref: forwardRef,
|
|
150
|
+
children: content
|
|
58
151
|
}
|
|
59
|
-
)
|
|
60
|
-
|
|
152
|
+
);
|
|
153
|
+
}
|
|
61
154
|
);
|
|
62
155
|
Chip.ImageSlot = ImageSlot;
|
|
63
156
|
|
package/dist/main.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"main.js","sources":["../src/chip.styled.tsx","../src/partials/image-icon.styled.tsx","../src/partials/image-slot.tsx","../src/chip.tsx"],"sourcesContent":["import { styled } from '@mirohq/design-system-stitches'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { BaseButton } from '@mirohq/design-system-base-button'\nimport { focus } from '@mirohq/design-system-styles'\n\
|
|
1
|
+
{"version":3,"file":"main.js","sources":["../src/chip.styled.tsx","../src/partials/image-icon.styled.tsx","../src/partials/image-slot.tsx","../src/chip.tsx"],"sourcesContent":["import { styled } from '@mirohq/design-system-stitches'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { BaseButton } from '@mirohq/design-system-base-button'\nimport { focus } from '@mirohq/design-system-styles'\n\nconst chipStyles = {\n fontSize: '$150',\n lineHeight: 1.3,\n padding: '$50 $100',\n borderRadius: '$round',\n display: 'inline-flex',\n alignItems: 'center',\n gap: '$50',\n backgroundColor: '$chip-background',\n color: '$chip-text',\n maxWidth: '100%',\n}\n\nconst disabledAppearance = {\n backgroundColor: '$chip-background-disabled',\n}\n\nexport const StyledChip = styled(Primitive.div, {\n ...chipStyles,\n variants: {\n disabled: {\n true: disabledAppearance,\n },\n },\n})\n\nexport const StyledPressableChip = styled(BaseButton, {\n ...chipStyles,\n position: 'relative',\n ...focus.css({\n boxShadow: '$focus',\n }),\n // Attribute selector so `disabled` reaches BaseButton / usePress (a stitches\n // `disabled` variant would consume the prop and leave the button enabled).\n '&[disabled]': disabledAppearance,\n // Loading stays visually idle — only the wait cursor signals it. Don't reuse\n // the disabled mute; that made loading look broken.\n '&[aria-busy=\"true\"]': {\n cursor: 'wait',\n pointerEvents: 'none',\n },\n})\n\nexport const StyledChipContent = styled(Primitive.div, {\n overflow: 'hidden',\n whiteSpace: 'nowrap',\n textOverflow: 'ellipsis',\n variants: {\n loading: {\n true: {\n opacity: 0,\n },\n },\n },\n})\n\nexport const StyledSpinnerBox = styled(Primitive.div, {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n position: 'absolute',\n top: 0,\n left: 0,\n bottom: 0,\n right: 0,\n margin: 'auto',\n zIndex: 1,\n})\n\nexport const StyledChipButton = styled(BaseButton, {\n color: '$icon-secondary',\n ...focus.css({\n boxShadow: '$focus',\n }),\n})\n\nexport type StyledChipProps = StrictComponentProps<typeof StyledChip>\n","import type { StrictComponentProps } from '@mirohq/design-system-stitches'\nimport { styled } from '@mirohq/design-system-stitches'\nimport { Primitive } from '@mirohq/design-system-primitive'\n\nexport const StyledImageSlot = styled(Primitive.span, {\n paddingInline: '$50',\n})\n\nexport type StyledImageSlotProps = StrictComponentProps<typeof StyledImageSlot>\n","import type { StyledImageSlotProps } from './image-icon.styled'\nimport { StyledImageSlot } from './image-icon.styled'\n\nexport interface ImageSlotProps extends StyledImageSlotProps {}\n\nexport const ImageSlot = StyledImageSlot\n","import React from 'react'\nimport type {\n ElementRef,\n ForwardRefExoticComponent,\n RefAttributes,\n} from 'react'\nimport type { BaseButtonProps } from '@mirohq/design-system-base-button'\nimport { IconCross } from '@mirohq/design-system-icons'\nimport { Spinner } from '@mirohq/design-system-spinner'\n\nimport {\n StyledChip,\n StyledChipButton,\n StyledChipContent,\n StyledPressableChip,\n StyledSpinnerBox,\n} from './chip.styled'\nimport type { StyledChipProps } from './chip.styled'\nimport { ImageSlot } from './partials/image-slot'\n\nexport type ChipProps = Omit<StyledChipProps, 'ref'> &\n Pick<BaseButtonProps, 'onPress'> &\n RefAttributes<HTMLDivElement | HTMLButtonElement> & {\n /**\n * Show a button to remove the Chip\n * @default true\n */\n removable?: boolean\n /**\n * Show a spinner overlay and keep the chip non-interactive without the\n * disabled look. Pressable only.\n * @default false\n */\n loading?: boolean\n } & (\n | {\n /**\n * Event handler called when the chip's remove button is clicked.\n */\n onRemove: (\n event: React.MouseEvent<HTMLButtonElement, MouseEvent>\n ) => void\n /**\n * Remove button label to make the button recognizable by the screen readers.\n */\n removeAriaLabel: string\n }\n | { removable: false; removeAriaLabel?: never; onRemove?: never }\n )\n\nconst hasPressEvent = (props: object): boolean => {\n if ('onClick' in props && props.onClick != null) return true\n if ('onPress' in props && props.onPress != null) return true\n\n return false\n}\n\nexport const Chip = React.forwardRef<ElementRef<'div' | 'button'>, ChipProps>(\n (props, forwardRef) => {\n const {\n children,\n removable = true,\n onRemove,\n removeAriaLabel,\n loading = false,\n ...restProps\n } = props\n\n const pressable = hasPressEvent(restProps)\n const isLoading = pressable && loading\n\n const content = (\n <>\n {isLoading && (\n <StyledSpinnerBox\n aria-hidden\n data-testid={\n process.env.NODE_ENV === 'test' ? 'chip-spinner' : undefined\n }\n >\n <Spinner size='small' />\n </StyledSpinnerBox>\n )}\n <StyledChipContent\n data-chip-content=''\n loading={isLoading || undefined}\n >\n {children}\n </StyledChipContent>\n {!pressable && removable && (\n <StyledChipButton\n type='button'\n onClick={onRemove}\n aria-label={removeAriaLabel}\n >\n <IconCross size='small' />\n </StyledChipButton>\n )}\n </>\n )\n\n if (pressable) {\n return (\n <StyledPressableChip\n type='button'\n {...(restProps as BaseButtonProps)}\n ref={forwardRef as React.Ref<ElementRef<typeof StyledPressableChip>>}\n aria-busy={isLoading || undefined}\n aria-disabled={isLoading || undefined}\n >\n {content}\n </StyledPressableChip>\n )\n }\n\n return (\n <StyledChip\n {...(restProps as StyledChipProps)}\n ref={forwardRef as React.Ref<ElementRef<typeof StyledChip>>}\n >\n {content}\n </StyledChip>\n )\n }\n) as ForwardRefExoticComponent<ChipProps> & Partials\n\nexport interface Partials {\n ImageSlot: typeof ImageSlot\n}\n\nChip.ImageSlot = ImageSlot\n"],"names":["styled","Primitive","BaseButton","focus","jsxs","Fragment","jsx","Spinner","IconCross"],"mappings":"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"}
|
package/dist/module.js
CHANGED
|
@@ -1,12 +1,13 @@
|
|
|
1
|
-
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
1
|
+
import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
|
|
2
2
|
import React from 'react';
|
|
3
3
|
import { IconCross } from '@mirohq/design-system-icons';
|
|
4
|
+
import { Spinner } from '@mirohq/design-system-spinner';
|
|
4
5
|
import { styled } from '@mirohq/design-system-stitches';
|
|
5
6
|
import { Primitive } from '@mirohq/design-system-primitive';
|
|
6
7
|
import { BaseButton } from '@mirohq/design-system-base-button';
|
|
7
8
|
import { focus } from '@mirohq/design-system-styles';
|
|
8
9
|
|
|
9
|
-
const
|
|
10
|
+
const chipStyles = {
|
|
10
11
|
fontSize: "$150",
|
|
11
12
|
lineHeight: 1.3,
|
|
12
13
|
padding: "$50 $100",
|
|
@@ -16,19 +17,58 @@ const StyledChip = styled(Primitive.div, {
|
|
|
16
17
|
gap: "$50",
|
|
17
18
|
backgroundColor: "$chip-background",
|
|
18
19
|
color: "$chip-text",
|
|
19
|
-
maxWidth: "100%"
|
|
20
|
+
maxWidth: "100%"
|
|
21
|
+
};
|
|
22
|
+
const disabledAppearance = {
|
|
23
|
+
backgroundColor: "$chip-background-disabled"
|
|
24
|
+
};
|
|
25
|
+
const StyledChip = styled(Primitive.div, {
|
|
26
|
+
...chipStyles,
|
|
20
27
|
variants: {
|
|
21
28
|
disabled: {
|
|
22
|
-
true:
|
|
23
|
-
backgroundColor: "$chip-background-disabled"
|
|
24
|
-
}
|
|
29
|
+
true: disabledAppearance
|
|
25
30
|
}
|
|
26
31
|
}
|
|
27
32
|
});
|
|
33
|
+
const StyledPressableChip = styled(BaseButton, {
|
|
34
|
+
...chipStyles,
|
|
35
|
+
position: "relative",
|
|
36
|
+
...focus.css({
|
|
37
|
+
boxShadow: "$focus"
|
|
38
|
+
}),
|
|
39
|
+
// Attribute selector so `disabled` reaches BaseButton / usePress (a stitches
|
|
40
|
+
// `disabled` variant would consume the prop and leave the button enabled).
|
|
41
|
+
"&[disabled]": disabledAppearance,
|
|
42
|
+
// Loading stays visually idle — only the wait cursor signals it. Don't reuse
|
|
43
|
+
// the disabled mute; that made loading look broken.
|
|
44
|
+
'&[aria-busy="true"]': {
|
|
45
|
+
cursor: "wait",
|
|
46
|
+
pointerEvents: "none"
|
|
47
|
+
}
|
|
48
|
+
});
|
|
28
49
|
const StyledChipContent = styled(Primitive.div, {
|
|
29
50
|
overflow: "hidden",
|
|
30
51
|
whiteSpace: "nowrap",
|
|
31
|
-
textOverflow: "ellipsis"
|
|
52
|
+
textOverflow: "ellipsis",
|
|
53
|
+
variants: {
|
|
54
|
+
loading: {
|
|
55
|
+
true: {
|
|
56
|
+
opacity: 0
|
|
57
|
+
}
|
|
58
|
+
}
|
|
59
|
+
}
|
|
60
|
+
});
|
|
61
|
+
const StyledSpinnerBox = styled(Primitive.div, {
|
|
62
|
+
display: "flex",
|
|
63
|
+
alignItems: "center",
|
|
64
|
+
justifyContent: "center",
|
|
65
|
+
position: "absolute",
|
|
66
|
+
top: 0,
|
|
67
|
+
left: 0,
|
|
68
|
+
bottom: 0,
|
|
69
|
+
right: 0,
|
|
70
|
+
margin: "auto",
|
|
71
|
+
zIndex: 1
|
|
32
72
|
});
|
|
33
73
|
const StyledChipButton = styled(BaseButton, {
|
|
34
74
|
color: "$icon-secondary",
|
|
@@ -43,19 +83,72 @@ const StyledImageSlot = styled(Primitive.span, {
|
|
|
43
83
|
|
|
44
84
|
const ImageSlot = StyledImageSlot;
|
|
45
85
|
|
|
86
|
+
const hasPressEvent = (props) => {
|
|
87
|
+
if ("onClick" in props && props.onClick != null) return true;
|
|
88
|
+
if ("onPress" in props && props.onPress != null) return true;
|
|
89
|
+
return false;
|
|
90
|
+
};
|
|
46
91
|
const Chip = React.forwardRef(
|
|
47
|
-
(
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
92
|
+
(props, forwardRef) => {
|
|
93
|
+
const {
|
|
94
|
+
children,
|
|
95
|
+
removable = true,
|
|
96
|
+
onRemove,
|
|
97
|
+
removeAriaLabel,
|
|
98
|
+
loading = false,
|
|
99
|
+
...restProps
|
|
100
|
+
} = props;
|
|
101
|
+
const pressable = hasPressEvent(restProps);
|
|
102
|
+
const isLoading = pressable && loading;
|
|
103
|
+
const content = /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
104
|
+
isLoading && /* @__PURE__ */ jsx(
|
|
105
|
+
StyledSpinnerBox,
|
|
106
|
+
{
|
|
107
|
+
"aria-hidden": true,
|
|
108
|
+
"data-testid": process.env.NODE_ENV === "test" ? "chip-spinner" : void 0,
|
|
109
|
+
children: /* @__PURE__ */ jsx(Spinner, { size: "small" })
|
|
110
|
+
}
|
|
111
|
+
),
|
|
112
|
+
/* @__PURE__ */ jsx(
|
|
113
|
+
StyledChipContent,
|
|
114
|
+
{
|
|
115
|
+
"data-chip-content": "",
|
|
116
|
+
loading: isLoading || void 0,
|
|
117
|
+
children
|
|
118
|
+
}
|
|
119
|
+
),
|
|
120
|
+
!pressable && removable && /* @__PURE__ */ jsx(
|
|
121
|
+
StyledChipButton,
|
|
122
|
+
{
|
|
123
|
+
type: "button",
|
|
124
|
+
onClick: onRemove,
|
|
125
|
+
"aria-label": removeAriaLabel,
|
|
126
|
+
children: /* @__PURE__ */ jsx(IconCross, { size: "small" })
|
|
127
|
+
}
|
|
128
|
+
)
|
|
129
|
+
] });
|
|
130
|
+
if (pressable) {
|
|
131
|
+
return /* @__PURE__ */ jsx(
|
|
132
|
+
StyledPressableChip,
|
|
133
|
+
{
|
|
134
|
+
type: "button",
|
|
135
|
+
...restProps,
|
|
136
|
+
ref: forwardRef,
|
|
137
|
+
"aria-busy": isLoading || void 0,
|
|
138
|
+
"aria-disabled": isLoading || void 0,
|
|
139
|
+
children: content
|
|
140
|
+
}
|
|
141
|
+
);
|
|
142
|
+
}
|
|
143
|
+
return /* @__PURE__ */ jsx(
|
|
144
|
+
StyledChip,
|
|
51
145
|
{
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
children: /* @__PURE__ */ jsx(IconCross, { size: "small" })
|
|
146
|
+
...restProps,
|
|
147
|
+
ref: forwardRef,
|
|
148
|
+
children: content
|
|
56
149
|
}
|
|
57
|
-
)
|
|
58
|
-
|
|
150
|
+
);
|
|
151
|
+
}
|
|
59
152
|
);
|
|
60
153
|
Chip.ImageSlot = ImageSlot;
|
|
61
154
|
|
package/dist/module.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"module.js","sources":["../src/chip.styled.tsx","../src/partials/image-icon.styled.tsx","../src/partials/image-slot.tsx","../src/chip.tsx"],"sourcesContent":["import { styled } from '@mirohq/design-system-stitches'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { BaseButton } from '@mirohq/design-system-base-button'\nimport { focus } from '@mirohq/design-system-styles'\n\
|
|
1
|
+
{"version":3,"file":"module.js","sources":["../src/chip.styled.tsx","../src/partials/image-icon.styled.tsx","../src/partials/image-slot.tsx","../src/chip.tsx"],"sourcesContent":["import { styled } from '@mirohq/design-system-stitches'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { BaseButton } from '@mirohq/design-system-base-button'\nimport { focus } from '@mirohq/design-system-styles'\n\nconst chipStyles = {\n fontSize: '$150',\n lineHeight: 1.3,\n padding: '$50 $100',\n borderRadius: '$round',\n display: 'inline-flex',\n alignItems: 'center',\n gap: '$50',\n backgroundColor: '$chip-background',\n color: '$chip-text',\n maxWidth: '100%',\n}\n\nconst disabledAppearance = {\n backgroundColor: '$chip-background-disabled',\n}\n\nexport const StyledChip = styled(Primitive.div, {\n ...chipStyles,\n variants: {\n disabled: {\n true: disabledAppearance,\n },\n },\n})\n\nexport const StyledPressableChip = styled(BaseButton, {\n ...chipStyles,\n position: 'relative',\n ...focus.css({\n boxShadow: '$focus',\n }),\n // Attribute selector so `disabled` reaches BaseButton / usePress (a stitches\n // `disabled` variant would consume the prop and leave the button enabled).\n '&[disabled]': disabledAppearance,\n // Loading stays visually idle — only the wait cursor signals it. Don't reuse\n // the disabled mute; that made loading look broken.\n '&[aria-busy=\"true\"]': {\n cursor: 'wait',\n pointerEvents: 'none',\n },\n})\n\nexport const StyledChipContent = styled(Primitive.div, {\n overflow: 'hidden',\n whiteSpace: 'nowrap',\n textOverflow: 'ellipsis',\n variants: {\n loading: {\n true: {\n opacity: 0,\n },\n },\n },\n})\n\nexport const StyledSpinnerBox = styled(Primitive.div, {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n position: 'absolute',\n top: 0,\n left: 0,\n bottom: 0,\n right: 0,\n margin: 'auto',\n zIndex: 1,\n})\n\nexport const StyledChipButton = styled(BaseButton, {\n color: '$icon-secondary',\n ...focus.css({\n boxShadow: '$focus',\n }),\n})\n\nexport type StyledChipProps = StrictComponentProps<typeof StyledChip>\n","import type { StrictComponentProps } from '@mirohq/design-system-stitches'\nimport { styled } from '@mirohq/design-system-stitches'\nimport { Primitive } from '@mirohq/design-system-primitive'\n\nexport const StyledImageSlot = styled(Primitive.span, {\n paddingInline: '$50',\n})\n\nexport type StyledImageSlotProps = StrictComponentProps<typeof StyledImageSlot>\n","import type { StyledImageSlotProps } from './image-icon.styled'\nimport { StyledImageSlot } from './image-icon.styled'\n\nexport interface ImageSlotProps extends StyledImageSlotProps {}\n\nexport const ImageSlot = StyledImageSlot\n","import React from 'react'\nimport type {\n ElementRef,\n ForwardRefExoticComponent,\n RefAttributes,\n} from 'react'\nimport type { BaseButtonProps } from '@mirohq/design-system-base-button'\nimport { IconCross } from '@mirohq/design-system-icons'\nimport { Spinner } from '@mirohq/design-system-spinner'\n\nimport {\n StyledChip,\n StyledChipButton,\n StyledChipContent,\n StyledPressableChip,\n StyledSpinnerBox,\n} from './chip.styled'\nimport type { StyledChipProps } from './chip.styled'\nimport { ImageSlot } from './partials/image-slot'\n\nexport type ChipProps = Omit<StyledChipProps, 'ref'> &\n Pick<BaseButtonProps, 'onPress'> &\n RefAttributes<HTMLDivElement | HTMLButtonElement> & {\n /**\n * Show a button to remove the Chip\n * @default true\n */\n removable?: boolean\n /**\n * Show a spinner overlay and keep the chip non-interactive without the\n * disabled look. Pressable only.\n * @default false\n */\n loading?: boolean\n } & (\n | {\n /**\n * Event handler called when the chip's remove button is clicked.\n */\n onRemove: (\n event: React.MouseEvent<HTMLButtonElement, MouseEvent>\n ) => void\n /**\n * Remove button label to make the button recognizable by the screen readers.\n */\n removeAriaLabel: string\n }\n | { removable: false; removeAriaLabel?: never; onRemove?: never }\n )\n\nconst hasPressEvent = (props: object): boolean => {\n if ('onClick' in props && props.onClick != null) return true\n if ('onPress' in props && props.onPress != null) return true\n\n return false\n}\n\nexport const Chip = React.forwardRef<ElementRef<'div' | 'button'>, ChipProps>(\n (props, forwardRef) => {\n const {\n children,\n removable = true,\n onRemove,\n removeAriaLabel,\n loading = false,\n ...restProps\n } = props\n\n const pressable = hasPressEvent(restProps)\n const isLoading = pressable && loading\n\n const content = (\n <>\n {isLoading && (\n <StyledSpinnerBox\n aria-hidden\n data-testid={\n process.env.NODE_ENV === 'test' ? 'chip-spinner' : undefined\n }\n >\n <Spinner size='small' />\n </StyledSpinnerBox>\n )}\n <StyledChipContent\n data-chip-content=''\n loading={isLoading || undefined}\n >\n {children}\n </StyledChipContent>\n {!pressable && removable && (\n <StyledChipButton\n type='button'\n onClick={onRemove}\n aria-label={removeAriaLabel}\n >\n <IconCross size='small' />\n </StyledChipButton>\n )}\n </>\n )\n\n if (pressable) {\n return (\n <StyledPressableChip\n type='button'\n {...(restProps as BaseButtonProps)}\n ref={forwardRef as React.Ref<ElementRef<typeof StyledPressableChip>>}\n aria-busy={isLoading || undefined}\n aria-disabled={isLoading || undefined}\n >\n {content}\n </StyledPressableChip>\n )\n }\n\n return (\n <StyledChip\n {...(restProps as StyledChipProps)}\n ref={forwardRef as React.Ref<ElementRef<typeof StyledChip>>}\n >\n {content}\n </StyledChip>\n )\n }\n) as ForwardRefExoticComponent<ChipProps> & Partials\n\nexport interface Partials {\n ImageSlot: typeof ImageSlot\n}\n\nChip.ImageSlot = ImageSlot\n"],"names":[],"mappings":"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"}
|
package/dist/types.d.ts
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import * as react from 'react';
|
|
2
|
-
import react__default, { ForwardRefExoticComponent } from 'react';
|
|
2
|
+
import react__default, { ForwardRefExoticComponent, RefAttributes } from 'react';
|
|
3
|
+
import { BaseButtonProps } from '@mirohq/design-system-base-button';
|
|
3
4
|
import * as _mirohq_design_system_stitches from '@mirohq/design-system-stitches';
|
|
4
5
|
import { StrictComponentProps } from '@mirohq/design-system-stitches';
|
|
5
6
|
import * as _mirohq_design_system_primitive from '@mirohq/design-system-primitive';
|
|
@@ -39,7 +40,19 @@ interface ImageSlotProps extends StyledImageSlotProps {
|
|
|
39
40
|
}
|
|
40
41
|
declare const ImageSlot: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<react.ForwardRefExoticComponent<_mirohq_design_system_components_primitive.PrimitiveProps<"span">>>, never> & TransformProps<{}, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react.RefAttributes<HTMLSpanElement>> & _mirohq_design_system_stitches.StitchesInternals<react.ForwardRefExoticComponent<_mirohq_design_system_components_primitive.PrimitiveProps<"span">>, {}, {}>;
|
|
41
42
|
|
|
42
|
-
|
|
43
|
+
type ChipProps = Omit<StyledChipProps, 'ref'> & Pick<BaseButtonProps, 'onPress'> & RefAttributes<HTMLDivElement | HTMLButtonElement> & {
|
|
44
|
+
/**
|
|
45
|
+
* Show a button to remove the Chip
|
|
46
|
+
* @default true
|
|
47
|
+
*/
|
|
48
|
+
removable?: boolean;
|
|
49
|
+
/**
|
|
50
|
+
* Show a spinner overlay and keep the chip non-interactive without the
|
|
51
|
+
* disabled look. Pressable only.
|
|
52
|
+
* @default false
|
|
53
|
+
*/
|
|
54
|
+
loading?: boolean;
|
|
55
|
+
} & ({
|
|
43
56
|
/**
|
|
44
57
|
* Event handler called when the chip's remove button is clicked.
|
|
45
58
|
*/
|
|
@@ -48,14 +61,7 @@ interface RemovableProps {
|
|
|
48
61
|
* Remove button label to make the button recognizable by the screen readers.
|
|
49
62
|
*/
|
|
50
63
|
removeAriaLabel: string;
|
|
51
|
-
}
|
|
52
|
-
type ChipProps = (StyledChipProps & {
|
|
53
|
-
/**
|
|
54
|
-
* Show a button to remove the Chip
|
|
55
|
-
* @default true
|
|
56
|
-
*/
|
|
57
|
-
removable?: boolean;
|
|
58
|
-
}) & (RemovableProps | {
|
|
64
|
+
} | {
|
|
59
65
|
removable: false;
|
|
60
66
|
removeAriaLabel?: never;
|
|
61
67
|
onRemove?: never;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mirohq/design-system-chip",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.3.0-filter-chip.0",
|
|
4
4
|
"description": "",
|
|
5
5
|
"author": "Miro",
|
|
6
6
|
"source": "src/index.ts",
|
|
@@ -26,10 +26,11 @@
|
|
|
26
26
|
"react": "^16.14 || ^17 || ^18 || ^19"
|
|
27
27
|
},
|
|
28
28
|
"dependencies": {
|
|
29
|
-
"@mirohq/design-system-
|
|
30
|
-
"@mirohq/design-system-
|
|
29
|
+
"@mirohq/design-system-icons": "^1.46.0",
|
|
30
|
+
"@mirohq/design-system-base-button": "^1.2.36",
|
|
31
|
+
"@mirohq/design-system-primitive": "^2.2.1",
|
|
31
32
|
"@mirohq/design-system-stitches": "^3.3.32",
|
|
32
|
-
"@mirohq/design-system-
|
|
33
|
+
"@mirohq/design-system-spinner": "^2.2.34",
|
|
33
34
|
"@mirohq/design-system-styles": "^3.2.32"
|
|
34
35
|
},
|
|
35
36
|
"scripts": {
|