@mirohq/design-system-chip 0.1.16 → 0.2.0-button-api-changes.0
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/main.js +9 -1
- package/dist/main.js.map +1 -1
- package/dist/module.js +9 -1
- package/dist/module.js.map +1 -1
- package/package.json +5 -5
package/dist/main.js
CHANGED
|
@@ -42,7 +42,15 @@ const ImageSlot = StyledImageSlot;
|
|
|
42
42
|
const Chip = React__default["default"].forwardRef(
|
|
43
43
|
({ children, removable = true, onRemove, removeAriaLabel, ...restProps }, forwardRef) => /* @__PURE__ */ jsxRuntime.jsxs(StyledChip, { ...restProps, ref: forwardRef, children: [
|
|
44
44
|
children,
|
|
45
|
-
removable && /* @__PURE__ */ jsxRuntime.jsx(
|
|
45
|
+
removable && /* @__PURE__ */ jsxRuntime.jsx(
|
|
46
|
+
StyledChipButton,
|
|
47
|
+
{
|
|
48
|
+
type: "button",
|
|
49
|
+
onClick: onRemove,
|
|
50
|
+
"aria-label": removeAriaLabel,
|
|
51
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(designSystemIcons.IconCross, { size: "small", weight: "thin" })
|
|
52
|
+
}
|
|
53
|
+
)
|
|
46
54
|
] })
|
|
47
55
|
);
|
|
48
56
|
Chip.ImageSlot = ImageSlot;
|
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\nexport const StyledChip = styled(Primitive.div, {\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 whiteSpace: 'nowrap',\n backgroundColor: '$background-neutrals-subtle',\n color: '$text-neutrals',\n})\n\nexport const StyledChipButton = styled(BaseButton, {\n color: '$icon-neutrals-inactive',\n\n ...focus.css({\n boxShadow: '$focus-small-outline',\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 order: -1,\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 { ElementRef, ForwardRefExoticComponent } from 'react'\nimport { IconCross } from '@mirohq/design-system-icons'\n\nimport { StyledChip, StyledChipButton } from './chip.styled'\nimport type { StyledChipProps } from './chip.styled'\nimport { ImageSlot } from './partials/image-slot'\n\ninterface RemovableProps {\n /**\n * Event handler called when the chip's remove button is clicked.\n */\n onRemove: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void\n\n /**\n * Remove button label to make the button recognizable by the screen readers.\n */\n removeAriaLabel: string\n}\n\nexport type ChipProps = (StyledChipProps & {\n /**\n * Show a button to remove the Chip\n * @default true\n */\n removable?: boolean\n}) &\n (\n | RemovableProps\n | { removable: false; removeAriaLabel?: never; onRemove?: never }\n )\n\nexport const Chip = React.forwardRef<ElementRef<typeof StyledChip>, ChipProps>(\n (\n { children, removable = true, onRemove, removeAriaLabel, ...restProps },\n forwardRef\n ) => (\n <StyledChip {...restProps} ref={forwardRef}>\n {children}\n {removable && (\n <StyledChipButton
|
|
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\nexport const StyledChip = styled(Primitive.div, {\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 whiteSpace: 'nowrap',\n backgroundColor: '$background-neutrals-subtle',\n color: '$text-neutrals',\n})\n\nexport const StyledChipButton = styled(BaseButton, {\n color: '$icon-neutrals-inactive',\n\n ...focus.css({\n boxShadow: '$focus-small-outline',\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 order: -1,\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 { ElementRef, ForwardRefExoticComponent } from 'react'\nimport { IconCross } from '@mirohq/design-system-icons'\n\nimport { StyledChip, StyledChipButton } from './chip.styled'\nimport type { StyledChipProps } from './chip.styled'\nimport { ImageSlot } from './partials/image-slot'\n\ninterface RemovableProps {\n /**\n * Event handler called when the chip's remove button is clicked.\n */\n onRemove: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void\n\n /**\n * Remove button label to make the button recognizable by the screen readers.\n */\n removeAriaLabel: string\n}\n\nexport type ChipProps = (StyledChipProps & {\n /**\n * Show a button to remove the Chip\n * @default true\n */\n removable?: boolean\n}) &\n (\n | RemovableProps\n | { removable: false; removeAriaLabel?: never; onRemove?: never }\n )\n\nexport const Chip = React.forwardRef<ElementRef<typeof StyledChip>, ChipProps>(\n (\n { children, removable = true, onRemove, removeAriaLabel, ...restProps },\n forwardRef\n ) => (\n <StyledChip {...restProps} ref={forwardRef}>\n {children}\n {removable && (\n <StyledChipButton\n type='button'\n onClick={onRemove}\n aria-label={removeAriaLabel}\n >\n <IconCross size='small' weight='thin' />\n </StyledChipButton>\n )}\n </StyledChip>\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","React","jsxs","jsx","IconCross"],"mappings":";;;;;;;;;;;;;;;;AAMa,MAAA,UAAA,GAAaA,2BAAO,CAAAC,+BAAA,CAAU,GAAK,EAAA;AAAA,EAC9C,QAAU,EAAA,MAAA;AAAA,EACV,UAAY,EAAA,GAAA;AAAA,EACZ,OAAS,EAAA,UAAA;AAAA,EACT,YAAc,EAAA,QAAA;AAAA,EACd,OAAS,EAAA,aAAA;AAAA,EACT,UAAY,EAAA,QAAA;AAAA,EACZ,GAAK,EAAA,KAAA;AAAA,EACL,UAAY,EAAA,QAAA;AAAA,EACZ,eAAiB,EAAA,6BAAA;AAAA,EACjB,KAAO,EAAA,gBAAA;AACT,CAAC,CAAA,CAAA;AAEY,MAAA,gBAAA,GAAmBD,4BAAOE,iCAAY,EAAA;AAAA,EACjD,KAAO,EAAA,yBAAA;AAAA,EAEP,GAAGC,yBAAM,GAAI,CAAA;AAAA,IACX,SAAW,EAAA,sBAAA;AAAA,GACZ,CAAA;AACH,CAAC,CAAA;;ACrBY,MAAA,eAAA,GAAkBH,2BAAO,CAAAC,+BAAA,CAAU,IAAM,EAAA;AAAA,EACpD,KAAO,EAAA,CAAA,CAAA;AACT,CAAC,CAAA;;ACDM,MAAM,SAAY,GAAA,eAAA;;AC2BlB,MAAM,OAAOG,yBAAM,CAAA,UAAA;AAAA,EACxB,CACE,EAAE,QAAA,EAAU,SAAY,GAAA,IAAA,EAAM,UAAU,eAAiB,EAAA,GAAG,SAAU,EAAA,EACtE,+BAECC,eAAA,CAAA,UAAA,EAAA,EAAY,GAAG,SAAA,EAAW,KAAK,UAC7B,EAAA,QAAA,EAAA;AAAA,IAAA,QAAA;AAAA,IACA,SACC,oBAAAC,cAAA;AAAA,MAAC,gBAAA;AAAA,MAAA;AAAA,QACC,IAAK,EAAA,QAAA;AAAA,QACL,OAAS,EAAA,QAAA;AAAA,QACT,YAAY,EAAA,eAAA;AAAA,QAEZ,QAAC,kBAAAA,cAAA,CAAAC,2BAAA,EAAA,EAAU,IAAK,EAAA,OAAA,EAAQ,QAAO,MAAO,EAAA,CAAA;AAAA,OAAA;AAAA,KACxC;AAAA,GAEJ,EAAA,CAAA;AAEJ,EAAA;AAMA,IAAA,CAAK,SAAY,GAAA,SAAA;;;;"}
|
package/dist/module.js
CHANGED
|
@@ -34,7 +34,15 @@ const ImageSlot = StyledImageSlot;
|
|
|
34
34
|
const Chip = React.forwardRef(
|
|
35
35
|
({ children, removable = true, onRemove, removeAriaLabel, ...restProps }, forwardRef) => /* @__PURE__ */ jsxs(StyledChip, { ...restProps, ref: forwardRef, children: [
|
|
36
36
|
children,
|
|
37
|
-
removable && /* @__PURE__ */ jsx(
|
|
37
|
+
removable && /* @__PURE__ */ jsx(
|
|
38
|
+
StyledChipButton,
|
|
39
|
+
{
|
|
40
|
+
type: "button",
|
|
41
|
+
onClick: onRemove,
|
|
42
|
+
"aria-label": removeAriaLabel,
|
|
43
|
+
children: /* @__PURE__ */ jsx(IconCross, { size: "small", weight: "thin" })
|
|
44
|
+
}
|
|
45
|
+
)
|
|
38
46
|
] })
|
|
39
47
|
);
|
|
40
48
|
Chip.ImageSlot = ImageSlot;
|
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\nexport const StyledChip = styled(Primitive.div, {\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 whiteSpace: 'nowrap',\n backgroundColor: '$background-neutrals-subtle',\n color: '$text-neutrals',\n})\n\nexport const StyledChipButton = styled(BaseButton, {\n color: '$icon-neutrals-inactive',\n\n ...focus.css({\n boxShadow: '$focus-small-outline',\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 order: -1,\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 { ElementRef, ForwardRefExoticComponent } from 'react'\nimport { IconCross } from '@mirohq/design-system-icons'\n\nimport { StyledChip, StyledChipButton } from './chip.styled'\nimport type { StyledChipProps } from './chip.styled'\nimport { ImageSlot } from './partials/image-slot'\n\ninterface RemovableProps {\n /**\n * Event handler called when the chip's remove button is clicked.\n */\n onRemove: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void\n\n /**\n * Remove button label to make the button recognizable by the screen readers.\n */\n removeAriaLabel: string\n}\n\nexport type ChipProps = (StyledChipProps & {\n /**\n * Show a button to remove the Chip\n * @default true\n */\n removable?: boolean\n}) &\n (\n | RemovableProps\n | { removable: false; removeAriaLabel?: never; onRemove?: never }\n )\n\nexport const Chip = React.forwardRef<ElementRef<typeof StyledChip>, ChipProps>(\n (\n { children, removable = true, onRemove, removeAriaLabel, ...restProps },\n forwardRef\n ) => (\n <StyledChip {...restProps} ref={forwardRef}>\n {children}\n {removable && (\n <StyledChipButton
|
|
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\nexport const StyledChip = styled(Primitive.div, {\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 whiteSpace: 'nowrap',\n backgroundColor: '$background-neutrals-subtle',\n color: '$text-neutrals',\n})\n\nexport const StyledChipButton = styled(BaseButton, {\n color: '$icon-neutrals-inactive',\n\n ...focus.css({\n boxShadow: '$focus-small-outline',\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 order: -1,\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 { ElementRef, ForwardRefExoticComponent } from 'react'\nimport { IconCross } from '@mirohq/design-system-icons'\n\nimport { StyledChip, StyledChipButton } from './chip.styled'\nimport type { StyledChipProps } from './chip.styled'\nimport { ImageSlot } from './partials/image-slot'\n\ninterface RemovableProps {\n /**\n * Event handler called when the chip's remove button is clicked.\n */\n onRemove: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void\n\n /**\n * Remove button label to make the button recognizable by the screen readers.\n */\n removeAriaLabel: string\n}\n\nexport type ChipProps = (StyledChipProps & {\n /**\n * Show a button to remove the Chip\n * @default true\n */\n removable?: boolean\n}) &\n (\n | RemovableProps\n | { removable: false; removeAriaLabel?: never; onRemove?: never }\n )\n\nexport const Chip = React.forwardRef<ElementRef<typeof StyledChip>, ChipProps>(\n (\n { children, removable = true, onRemove, removeAriaLabel, ...restProps },\n forwardRef\n ) => (\n <StyledChip {...restProps} ref={forwardRef}>\n {children}\n {removable && (\n <StyledChipButton\n type='button'\n onClick={onRemove}\n aria-label={removeAriaLabel}\n >\n <IconCross size='small' weight='thin' />\n </StyledChipButton>\n )}\n </StyledChip>\n )\n) as ForwardRefExoticComponent<ChipProps> & Partials\n\nexport interface Partials {\n ImageSlot: typeof ImageSlot\n}\n\nChip.ImageSlot = ImageSlot\n"],"names":[],"mappings":";;;;;;;;AAMa,MAAA,UAAA,GAAa,MAAO,CAAA,SAAA,CAAU,GAAK,EAAA;AAAA,EAC9C,QAAU,EAAA,MAAA;AAAA,EACV,UAAY,EAAA,GAAA;AAAA,EACZ,OAAS,EAAA,UAAA;AAAA,EACT,YAAc,EAAA,QAAA;AAAA,EACd,OAAS,EAAA,aAAA;AAAA,EACT,UAAY,EAAA,QAAA;AAAA,EACZ,GAAK,EAAA,KAAA;AAAA,EACL,UAAY,EAAA,QAAA;AAAA,EACZ,eAAiB,EAAA,6BAAA;AAAA,EACjB,KAAO,EAAA,gBAAA;AACT,CAAC,CAAA,CAAA;AAEY,MAAA,gBAAA,GAAmB,OAAO,UAAY,EAAA;AAAA,EACjD,KAAO,EAAA,yBAAA;AAAA,EAEP,GAAG,MAAM,GAAI,CAAA;AAAA,IACX,SAAW,EAAA,sBAAA;AAAA,GACZ,CAAA;AACH,CAAC,CAAA;;ACrBY,MAAA,eAAA,GAAkB,MAAO,CAAA,SAAA,CAAU,IAAM,EAAA;AAAA,EACpD,KAAO,EAAA,CAAA,CAAA;AACT,CAAC,CAAA;;ACDM,MAAM,SAAY,GAAA,eAAA;;AC2BlB,MAAM,OAAO,KAAM,CAAA,UAAA;AAAA,EACxB,CACE,EAAE,QAAA,EAAU,SAAY,GAAA,IAAA,EAAM,UAAU,eAAiB,EAAA,GAAG,SAAU,EAAA,EACtE,+BAEC,IAAA,CAAA,UAAA,EAAA,EAAY,GAAG,SAAA,EAAW,KAAK,UAC7B,EAAA,QAAA,EAAA;AAAA,IAAA,QAAA;AAAA,IACA,SACC,oBAAA,GAAA;AAAA,MAAC,gBAAA;AAAA,MAAA;AAAA,QACC,IAAK,EAAA,QAAA;AAAA,QACL,OAAS,EAAA,QAAA;AAAA,QACT,YAAY,EAAA,eAAA;AAAA,QAEZ,QAAC,kBAAA,GAAA,CAAA,SAAA,EAAA,EAAU,IAAK,EAAA,OAAA,EAAQ,QAAO,MAAO,EAAA,CAAA;AAAA,OAAA;AAAA,KACxC;AAAA,GAEJ,EAAA,CAAA;AAEJ,EAAA;AAMA,IAAA,CAAK,SAAY,GAAA,SAAA;;;;"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mirohq/design-system-chip",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.2.0-button-api-changes.0",
|
|
4
4
|
"description": "",
|
|
5
5
|
"author": "Miro",
|
|
6
6
|
"source": "src/index.ts",
|
|
@@ -26,11 +26,11 @@
|
|
|
26
26
|
"react": "^16.14 || ^17 || ^18"
|
|
27
27
|
},
|
|
28
28
|
"dependencies": {
|
|
29
|
-
"@mirohq/design-system-base-button": "^0.4.
|
|
30
|
-
"@mirohq/design-system-icons": "^0.
|
|
29
|
+
"@mirohq/design-system-base-button": "^0.4.56",
|
|
30
|
+
"@mirohq/design-system-icons": "^0.52.0-button-api-changes.0",
|
|
31
|
+
"@mirohq/design-system-stitches": "^2.6.19",
|
|
31
32
|
"@mirohq/design-system-primitive": "^1.1.2",
|
|
32
|
-
"@mirohq/design-system-
|
|
33
|
-
"@mirohq/design-system-styles": "^1.2.20"
|
|
33
|
+
"@mirohq/design-system-styles": "^1.2.19"
|
|
34
34
|
},
|
|
35
35
|
"scripts": {
|
|
36
36
|
"build": "rollup -c ../../../rollup.config.js",
|