@pega/cosmos-react-core 6.1.0 → 6.1.1
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.
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Selection.d.ts","sourceRoot":"","sources":["../../../src/components/Badges/Selection.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,EAAE,UAAU,EAAwB,aAAa,EAAE,MAAM,OAAO,CAAC;AAIjF,OAAO,KAAK,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;
|
|
1
|
+
{"version":3,"file":"Selection.d.ts","sourceRoot":"","sources":["../../../src/components/Badges/Selection.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,EAAE,UAAU,EAAwB,aAAa,EAAE,MAAM,OAAO,CAAC;AAIjF,OAAO,KAAK,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAa5D,MAAM,WAAW,eAAgB,SAAQ,UAAU;IACjD,sFAAsF;IACtF,EAAE,EAAE,MAAM,CAAC;IACX,gCAAgC;IAChC,QAAQ,EAAE,MAAM,CAAC;IACjB,gGAAgG;IAChG,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,iHAAiH;IACjH,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,sDAAsD;IACtD,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;IACtC,gDAAgD;IAChD,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;CAC1C;AAED,eAAO,MAAM,gBAAgB,4GAgE5B,CAAC;;;;AAkEF,wBAA6D"}
|
|
@@ -1,27 +1,27 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { forwardRef } from 'react';
|
|
3
3
|
import styled, { css } from 'styled-components';
|
|
4
|
-
import { mix, transparentize } from 'polished';
|
|
4
|
+
import { mix, readableColor, transparentize } from 'polished';
|
|
5
5
|
import { tryCatch, withTestIds } from '../../utils';
|
|
6
6
|
import BareButton, { StyledBareButton } from '../Button/BareButton';
|
|
7
7
|
import Icon, { registerIcon, StyledIcon } from '../Icon';
|
|
8
8
|
import * as timesIcon from '../Icon/icons/times.icon';
|
|
9
9
|
import { useConsolidatedRef, useI18n, useTestIds } from '../../hooks';
|
|
10
10
|
import { defaultThemeProp } from '../../theme';
|
|
11
|
+
import { readableHue } from '../../styles';
|
|
11
12
|
import { getSelectableTestIds } from './Badges.test-ids';
|
|
12
13
|
registerIcon(timesIcon);
|
|
13
|
-
export const StyledSelectable = styled.button(({ theme: { base: { spacing, palette, 'border-radius': borderRadius }
|
|
14
|
-
const { foreground, background } = selectable.base;
|
|
14
|
+
export const StyledSelectable = styled.button(({ theme: { base: { spacing, palette, 'border-radius': borderRadius } } }) => {
|
|
15
15
|
const { dark, 'primary-background': primaryBackground, interactive } = palette;
|
|
16
|
-
const displayBackground = tryCatch(() => mix(0.15,
|
|
17
|
-
const hoverBorder = tryCatch(() => mix(0.3,
|
|
16
|
+
const displayBackground = tryCatch(() => mix(0.15, interactive, primaryBackground));
|
|
17
|
+
const hoverBorder = tryCatch(() => mix(0.3, interactive, primaryBackground));
|
|
18
18
|
const boxShadowColor = tryCatch(() => transparentize(0.45, dark));
|
|
19
19
|
const height = 1.125;
|
|
20
20
|
return css `
|
|
21
|
-
background: ${displayBackground};
|
|
21
|
+
background-color: ${displayBackground};
|
|
22
22
|
border: 0 solid transparent;
|
|
23
23
|
border-radius: calc(${height} * ${borderRadius});
|
|
24
|
-
color: ${
|
|
24
|
+
color: ${tryCatch(() => readableColor(displayBackground))};
|
|
25
25
|
cursor: default;
|
|
26
26
|
display: inline-flex;
|
|
27
27
|
font-size: 0.75rem;
|
|
@@ -37,27 +37,28 @@ export const StyledSelectable = styled.button(({ theme: { base: { spacing, palet
|
|
|
37
37
|
line-height: normal;
|
|
38
38
|
}
|
|
39
39
|
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
40
|
+
&hover,
|
|
41
|
+
&:focus,
|
|
42
|
+
[data-active-scope='true'] &[data-current='true'] {
|
|
43
|
+
color: ${tryCatch(() => readableHue(interactive, displayBackground))};
|
|
43
44
|
|
|
44
45
|
${StyledBareButton} {
|
|
45
|
-
color:
|
|
46
|
+
color: inherit;
|
|
46
47
|
}
|
|
47
48
|
}
|
|
48
49
|
|
|
50
|
+
&:hover {
|
|
51
|
+
box-shadow: inset 0 0 0 0.0625rem ${hoverBorder};
|
|
52
|
+
}
|
|
53
|
+
|
|
49
54
|
&:active {
|
|
50
|
-
box-shadow: inset 0 0 0 0.0625rem ${
|
|
55
|
+
box-shadow: inset 0 0 0 0.0625rem ${interactive};
|
|
51
56
|
}
|
|
52
57
|
|
|
53
58
|
&:focus {
|
|
54
59
|
color: ${interactive};
|
|
55
|
-
box-shadow: 0 0 0.5rem -0.125rem ${boxShadowColor}, inset 0 0 0 0.125rem ${
|
|
60
|
+
box-shadow: 0 0 0.5rem -0.125rem ${boxShadowColor}, inset 0 0 0 0.125rem ${interactive};
|
|
56
61
|
outline: none;
|
|
57
|
-
|
|
58
|
-
${StyledBareButton} {
|
|
59
|
-
color: ${interactive};
|
|
60
|
-
}
|
|
61
62
|
}
|
|
62
63
|
|
|
63
64
|
${StyledIcon} {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Selection.js","sourceRoot":"","sources":["../../../src/components/Badges/Selection.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAEnC,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,GAAG,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;
|
|
1
|
+
{"version":3,"file":"Selection.js","sourceRoot":"","sources":["../../../src/components/Badges/Selection.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef } from 'react';\nimport type { FC, MouseEvent, PropsWithoutRef, Ref, KeyboardEvent } from 'react';\nimport styled, { css } from 'styled-components';\nimport { mix, readableColor, transparentize } from 'polished';\n\nimport type { ForwardProps, TestIdProp } from '../../types';\nimport { tryCatch, withTestIds } from '../../utils';\nimport BareButton, { StyledBareButton } from '../Button/BareButton';\nimport Icon, { registerIcon, StyledIcon } from '../Icon';\nimport * as timesIcon from '../Icon/icons/times.icon';\nimport { useConsolidatedRef, useI18n, useTestIds } from '../../hooks';\nimport { defaultThemeProp } from '../../theme';\nimport { readableHue } from '../../styles';\n\nimport { getSelectableTestIds } from './Badges.test-ids';\n\nregisterIcon(timesIcon);\n\nexport interface SelectableProps extends TestIdProp {\n /** An id that is used by the onSelect and onRemove functions if they are provided. */\n id: string;\n /** The content of the Badge. */\n children: string;\n /** Takes an ID that represents the Badge. This function is called when the Badge is clicked. */\n onSelect?: (id: string) => void;\n /** Takes an ID that represents the Badge. This function is called when the Badge is closed by clicking the X. */\n onRemove?: (id: string) => void;\n /** Event handler called when the Badge is clicked. */\n onClick?: (event: MouseEvent) => void;\n /** Event handler fired on every keyup event. */\n onKeyUp?: (event: KeyboardEvent) => void;\n}\n\nexport const StyledSelectable = styled.button(\n ({\n theme: {\n base: { spacing, palette, 'border-radius': borderRadius }\n }\n }) => {\n const { dark, 'primary-background': primaryBackground, interactive } = palette;\n\n const displayBackground = tryCatch(() => mix(0.15, interactive, primaryBackground));\n const hoverBorder = tryCatch(() => mix(0.3, interactive, primaryBackground));\n const boxShadowColor = tryCatch(() => transparentize(0.45, dark));\n\n const height = 1.125;\n return css`\n background-color: ${displayBackground};\n border: 0 solid transparent;\n border-radius: calc(${height} * ${borderRadius});\n color: ${tryCatch(() => readableColor(displayBackground!))};\n cursor: default;\n display: inline-flex;\n font-size: 0.75rem;\n height: ${height}rem;\n padding: 0 ${spacing};\n max-width: 100%;\n line-height: 1;\n\n span {\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n line-height: normal;\n }\n\n &hover,\n &:focus,\n [data-active-scope='true'] &[data-current='true'] {\n color: ${tryCatch(() => readableHue(interactive, displayBackground!))};\n\n ${StyledBareButton} {\n color: inherit;\n }\n }\n\n &:hover {\n box-shadow: inset 0 0 0 0.0625rem ${hoverBorder};\n }\n\n &:active {\n box-shadow: inset 0 0 0 0.0625rem ${interactive};\n }\n\n &:focus {\n color: ${interactive};\n box-shadow: 0 0 0.5rem -0.125rem ${boxShadowColor}, inset 0 0 0 0.125rem ${interactive};\n outline: none;\n }\n\n ${StyledIcon} {\n margin-inline-start: ${spacing};\n height: 1em;\n width: 1em;\n }\n `;\n }\n);\n\nStyledSelectable.defaultProps = defaultThemeProp;\n\nconst Selectable: FC<SelectableProps & ForwardProps> = forwardRef(function Selectable(\n {\n testId,\n id,\n children,\n onSelect,\n onRemove,\n onClick,\n onKeyUp,\n ...restProps\n }: PropsWithoutRef<SelectableProps>,\n ref: Ref<HTMLButtonElement>\n) {\n const consolidatedRef = useConsolidatedRef(ref);\n const t = useI18n();\n const testIds = useTestIds(testId, getSelectableTestIds);\n\n const handleClick = (e: MouseEvent<HTMLButtonElement>) => {\n onClick?.(e);\n onSelect?.(id);\n };\n\n const handleCloseClick = (e: MouseEvent) => {\n e.preventDefault();\n e.stopPropagation();\n onRemove?.(id);\n };\n\n const handleKeyUp = (e: KeyboardEvent) => {\n onKeyUp?.(e);\n if (e.key === 'Enter') {\n onSelect?.(id);\n }\n\n if (e.key === 'Backspace' || e.key === 'Delete') {\n onRemove?.(id);\n }\n };\n\n return (\n <StyledSelectable\n data-testid={testIds.root}\n ref={consolidatedRef}\n onClick={handleClick}\n onKeyUp={handleKeyUp}\n {...restProps}\n >\n <span aria-hidden>{children}</span>\n {onRemove && (\n <BareButton\n data-testid={testIds.remove}\n tabIndex='-1'\n onClick={handleCloseClick}\n aria-label={t('remove_noun', [children])}\n >\n <Icon name='times' />\n </BareButton>\n )}\n </StyledSelectable>\n );\n});\n\nexport default withTestIds(Selectable, getSelectableTestIds);\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pega/cosmos-react-core",
|
|
3
|
-
"version": "6.1.
|
|
3
|
+
"version": "6.1.1",
|
|
4
4
|
"description": "Cosmos is a visual design system and UI component collection. Its goal is to empower application developers in their pursuit to create engaging and rewarding user experiences.",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|