@elliemae/ds-pills 3.0.0-alpha.3 → 3.0.0-next.3
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/cjs/components/styled.js +5 -3
- package/dist/cjs/components/styled.js.map +2 -2
- package/dist/cjs/components/types/RemovablePill.js +3 -3
- package/dist/cjs/components/types/RemovablePill.js.map +2 -2
- package/dist/cjs/components/types/ValuePill.js +2 -1
- package/dist/cjs/components/types/ValuePill.js.map +2 -2
- package/dist/cjs/index.d.js.map +1 -1
- package/dist/cjs/props.js +1 -0
- package/dist/cjs/props.js.map +2 -2
- package/dist/esm/components/styled.js +5 -3
- package/dist/esm/components/styled.js.map +2 -2
- package/dist/esm/components/types/RemovablePill.js +3 -3
- package/dist/esm/components/types/RemovablePill.js.map +2 -2
- package/dist/esm/components/types/ValuePill.js +2 -1
- package/dist/esm/components/types/ValuePill.js.map +2 -2
- package/dist/esm/props.js +1 -0
- package/dist/esm/props.js.map +2 -2
- package/package.json +15 -15
|
@@ -50,7 +50,7 @@ const borderOutside = (color, size = 1, zIndex = 2, borderRadius = "12px") => im
|
|
|
50
50
|
left: 0px;
|
|
51
51
|
right: 0px;
|
|
52
52
|
bottom: 0px;
|
|
53
|
-
border: ${size}px solid ${color};
|
|
53
|
+
border: ${size}px solid ${({ disabled, theme }) => disabled ? theme.colors.neutral[400] : color};
|
|
54
54
|
border-top-left-radius: ${borderRadius};
|
|
55
55
|
border-top-right-radius: ${borderRadius};
|
|
56
56
|
border-bottom-left-radius: ${borderRadius};
|
|
@@ -66,7 +66,7 @@ const commonPillWrapperCss = import_ds_system.css`
|
|
|
66
66
|
|
|
67
67
|
width: fit-content;
|
|
68
68
|
|
|
69
|
-
background-color: ${(
|
|
69
|
+
background-color: ${({ theme, disabled }) => disabled ? theme.colors.neutral["080"] : theme.colors.brand[200]};
|
|
70
70
|
|
|
71
71
|
outline: none;
|
|
72
72
|
|
|
@@ -77,7 +77,9 @@ const commonPillWrapperCss = import_ds_system.css`
|
|
|
77
77
|
|
|
78
78
|
font-size: 13px;
|
|
79
79
|
line-height: 1;
|
|
80
|
-
|
|
80
|
+
user-select: ${({ disabled }) => disabled ? "none" : "auto"};
|
|
81
|
+
cursor: ${({ disabled }) => disabled ? "not-allowed" : "default"};
|
|
82
|
+
color: ${({ theme, disabled }) => disabled ? theme.colors.neutral["400"] : theme.colors.brand["800"]};
|
|
81
83
|
${(props) => borderOutside(props.theme.colors.brand[300])};
|
|
82
84
|
`;
|
|
83
85
|
const StyledLabelPillWrapper = (0, import_styled_components.default)(import_ds_grid.Grid)`
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/styled.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable max-lines */\nimport styled from 'styled-components';\nimport { css } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSButtonV2 } from '@elliemae/ds-button';\n\n// =============================================================================\n// Common CSS\n// =============================================================================\n\nconst borderOutside = (color: string, size = 1, zIndex = 2, borderRadius = '12px') => css`\n :after {\n content: ' ';\n position: absolute;\n top: 0px;\n left: 0px;\n right: 0px;\n bottom: 0px;\n border: ${size}px solid ${color};\n border-top-left-radius: ${borderRadius};\n border-top-right-radius: ${borderRadius};\n border-bottom-left-radius: ${borderRadius};\n border-bottom-right-radius: ${borderRadius};\n pointer-events: none;\n z-index: ${zIndex};\n }\n`;\n\nconst commonPillWrapperCss = css<{ size: 'm' | 's' }>`\n height: ${(props) => (props?.size === 'm' ? '24px' : '18px')};\n\n position: relative;\n\n width: fit-content;\n\n background-color: ${(
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,+BAAmB;AACnB,uBAAoB;AACpB,qBAAqB;AACrB,uBAA2B;AAM3B,MAAM,gBAAgB,CAAC,OAAe,OAAO,GAAG,SAAS,GAAG,eAAe,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cAQxE,gBAAgB;AAAA,
|
|
4
|
+
"sourcesContent": ["/* eslint-disable max-lines */\nimport styled from 'styled-components';\nimport { css } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSButtonV2 } from '@elliemae/ds-button';\n\n// =============================================================================\n// Common CSS\n// =============================================================================\n\nconst borderOutside = (color: string, size = 1, zIndex = 2, borderRadius = '12px') => css`\n :after {\n content: ' ';\n position: absolute;\n top: 0px;\n left: 0px;\n right: 0px;\n bottom: 0px;\n border: ${size}px solid ${({ disabled, theme }) => (disabled ? theme.colors.neutral[400] : color)};\n border-top-left-radius: ${borderRadius};\n border-top-right-radius: ${borderRadius};\n border-bottom-left-radius: ${borderRadius};\n border-bottom-right-radius: ${borderRadius};\n pointer-events: none;\n z-index: ${zIndex};\n }\n`;\n\nconst commonPillWrapperCss = css<{ size: 'm' | 's' }>`\n height: ${(props) => (props?.size === 'm' ? '24px' : '18px')};\n\n position: relative;\n\n width: fit-content;\n\n background-color: ${({ theme, disabled }) => (disabled ? theme.colors.neutral['080'] : theme.colors.brand[200])};\n\n outline: none;\n\n white-space: nowrap;\n\n padding: 0px 12px 0 12px;\n border-radius: 12px;\n\n font-size: 13px;\n line-height: 1;\n user-select: ${({ disabled }) => (disabled ? 'none' : 'auto')};\n cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'default')};\n color: ${({ theme, disabled }) => (disabled ? theme.colors.neutral['400'] : theme.colors.brand['800'])};\n ${(props) => borderOutside(props.theme.colors.brand[300])};\n`;\n\n// =============================================================================\n// Pills wrappers\n// =============================================================================\n\nexport const StyledLabelPillWrapper = styled(Grid)`\n ${commonPillWrapperCss}\n\n font-weight: ${(props) => props.theme.fontWeights.semibold};\n padding-left: ${(props) => (props.hasIcon ? '0px !important' : '12px')};\n`;\n\nexport const StyledValuePillWrapper = styled(Grid)`\n ${commonPillWrapperCss}\n\n font-weight: ${(props) => props.theme.fontWeights.regular};\n padding-left: ${(props) => (props.hasIcon ? '0px !important' : '12px')};\n`;\n\nexport const StyledInputPillWrapper = styled(Grid)<{ value: string; inputWidth: number; inputHasFocus: boolean }>`\n ${commonPillWrapperCss}\n\n background: ${(props) => props.theme.colors.neutral['000']};\n padding: 0;\n\n ${({ value, theme }) => borderOutside(value === '' ? theme.colors.neutral[400] : theme.colors.brand[500])}\n\n :focus-within {\n ${(props) => (props.inputHasFocus ? borderOutside(props.theme.colors.brand[700], 2) : '')}\n }\n\n :active {\n ${(props) => (props.inputHasFocus ? borderOutside(props.theme.colors.brand[500]) : '')}\n }\n\n & .em-ds-input {\n outline: none !important;\n border: none !important;\n box-shadow: none !important;\n border-radius: 0 !important;\n height: 100%;\n background: transparent;\n width: ${(props) => `${props.inputWidth + (props.value === '' ? 24 : 0)}px`};\n padding: 0;\n margin: 0 0 0 8px;\n }\n\n & .em-ds-input__tooltip-ref {\n height: 100%;\n }\n`;\n\nexport const StyledDropdownPillWrapper = styled(Grid)`\n ${commonPillWrapperCss}\n font-weight: ${(props) => props.theme.fontWeights.semibold};\n\n padding: 0 0 0 12px;\n`;\n\nexport const StyledReadonlyPillWrapper = styled(Grid)<{ hasIconRight: boolean; hasIconLeft: boolean }>`\n ${commonPillWrapperCss}\n font-weight: ${(props) => props.theme.fontWeights.semibold};\n padding-right: ${(props) => (props.hasIconRight ? '0 !important' : '12px')};\n padding-left: ${(props) => (props.hasIconLeft ? '0 !important' : '12px')};\n`;\n\nexport const StyledRemovablePillWrapper = styled(Grid)`\n ${commonPillWrapperCss}\n font-weight: ${(props) => props.theme.fontWeights.regular};\n padding: 0 0 0 12px;\n`;\n\n// =============================================================================\n// Pill group\n// =============================================================================\n\nexport const StyledPillGroup = styled(Grid)`\n width: ${({ width }) => width};\n\n // Pill edges\n & .ds-pill-wrapper {\n &:not(:first-of-type) {\n &,\n :after,\n :before,\n .ds-pill-tooltip-value:after {\n border-top-left-radius: 0px;\n border-bottom-left-radius: 0px;\n }\n }\n &:not(:last-of-type) {\n &,\n :after,\n :before,\n .ds-pill-tooltip-value:after {\n border-top-right-radius: 0px;\n border-bottom-right-radius: 0px;\n }\n }\n }\n\n // Pill paddings to the left / right\n & .ds-pill-wrapper-label,\n & .ds-pill-wrapper-value,\n & .ds-pill-wrapper-readonly {\n &:not(:first-of-type) {\n padding-left: 8px;\n }\n &:not(:last-of-type) {\n padding-right: 8px;\n }\n }\n\n & .ds-pill-wrapper-removable:not(:first-of-type) {\n padding-left: 8px;\n }\n\n & .ds-pill-wrapper-dropdown:not(:first-of-type) {\n padding-left: 8px;\n }\n\n & .ds-pill-wrapper {\n :not(:first-of-type) {\n .ds-pill-button-left {\n border-radius: 0px;\n }\n .ds-pill-button-only {\n border-top-left-radius: 0px;\n border-bottom-left-radius: 0px;\n }\n }\n :not(:last-of-type) {\n .ds-pill-button-right {\n border-radius: 0px;\n }\n .ds-pill-button-only {\n border-top-right-radius: 0px;\n border-bottom-right-radius: 0px;\n }\n }\n }\n`;\n\n// =============================================================================\n// Extra stuff\n// =============================================================================\n\nexport const StyledSpanWithTooltip = styled.span`\n outline: none;\n :focus {\n ${(props) => borderOutside(props.theme.colors.brand[700], 2, 3)}\n }\n`;\n\nexport const StyledPillButton = styled(DSButtonV2)<{ width: string; height: string }>`\n display: grid;\n place-items: center;\n\n position: relative;\n\n padding: 0;\n width: ${(props) => props.width};\n height: ${(props) => props.height};\n\n border-radius: 12px;\n\n :focus {\n ${(props) => borderOutside(props.theme.colors.brand[700], 2, 3, 'inherit')}\n }\n\n cursor: pointer;\n`;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -37,7 +37,7 @@ var import_ds_truncated_tooltip_text = require("@elliemae/ds-truncated-tooltip-t
|
|
|
37
37
|
var import_styled = require("../styled");
|
|
38
38
|
var import_PillGroup = require("../PillGroup");
|
|
39
39
|
var import_PillButton = require("../PillButton");
|
|
40
|
-
const RemovablePill = import_react.default.memo(({ label, size, labelTruncated, onRemove, innerRef, ariaLabel, tabIndex }) => {
|
|
40
|
+
const RemovablePill = import_react.default.memo(({ label, size, disabled, labelTruncated, onRemove, innerRef, ariaLabel, tabIndex }) => {
|
|
41
41
|
const { onKeyboardRemove, onKeyboardNavigation } = (0, import_react.useContext)(import_PillGroup.DSPillGroupV2Context);
|
|
42
42
|
const pillUid = (0, import_react.useMemo)(() => `ds-pill-${(0, import_uid.uid)()}`, []);
|
|
43
43
|
const TextComponent = labelTruncated ? ({ children }) => /* @__PURE__ */ import_react.default.createElement(import_ds_truncated_tooltip_text.SimpleTruncatedTooltipText, {
|
|
@@ -70,7 +70,7 @@ const RemovablePill = import_react.default.memo(({ label, size, labelTruncated,
|
|
|
70
70
|
className: "ds-pill-wrapper ds-pill-wrapper-removable",
|
|
71
71
|
"data-testid": "ds-pill-wrapper",
|
|
72
72
|
"aria-label": ariaLabel || label
|
|
73
|
-
}, /* @__PURE__ */ import_react.default.createElement(TextComponent, null, label), /* @__PURE__ */ import_react.default.createElement(import_PillButton.DSPillButton, {
|
|
73
|
+
}, /* @__PURE__ */ import_react.default.createElement(TextComponent, null, label), /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, !disabled ? /* @__PURE__ */ import_react.default.createElement(import_PillButton.DSPillButton, {
|
|
74
74
|
className: "ds-pill-focus-point",
|
|
75
75
|
id: pillUid,
|
|
76
76
|
"data-testid": "ds-pill-close-icon",
|
|
@@ -84,7 +84,7 @@ const RemovablePill = import_react.default.memo(({ label, size, labelTruncated,
|
|
|
84
84
|
width: size === "s" ? 18 : 22.65,
|
|
85
85
|
height: size === "s" ? 18 : 22.65,
|
|
86
86
|
color: ["brand-primary", "700"]
|
|
87
|
-
})));
|
|
87
|
+
})) : null));
|
|
88
88
|
});
|
|
89
89
|
module.exports = __toCommonJS(RemovablePill_exports);
|
|
90
90
|
//# sourceMappingURL=RemovablePill.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/components/types/RemovablePill.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable react/prop-types */\nimport React, { useCallback, useContext, useMemo } from 'react';\nimport { uid } from 'uid';\nimport { CloseXsmall } from '@elliemae/ds-icons';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport type { DSPillProps } from '../../index.d';\nimport { StyledRemovablePillWrapper } from '../styled';\nimport { DSPillGroupV2Context } from '../PillGroup';\nimport { DSPillButton } from '../PillButton';\n\nexport const RemovablePill = React.memo<DSPillProps>(\n ({ label, size, labelTruncated, onRemove, innerRef, ariaLabel, tabIndex }) => {\n const { onKeyboardRemove, onKeyboardNavigation } = useContext(DSPillGroupV2Context);\n const pillUid = useMemo(() => `ds-pill-${uid()}`, []);\n\n const TextComponent = labelTruncated\n ? ({ children }) => <SimpleTruncatedTooltipText value={children} />\n : React.Fragment;\n\n const onKeyDown = useCallback(\n (e: KeyboardEvent) => {\n if (['Enter', 'Space'].includes(e.code)) {\n e.preventDefault();\n if (onKeyboardRemove) onKeyboardRemove(pillUid);\n onRemove(e);\n }\n if (e.code === 'ArrowLeft') {\n e.preventDefault();\n if (onKeyboardNavigation) onKeyboardNavigation(pillUid, -1, e);\n }\n if (e.code === 'ArrowRight') {\n e.preventDefault();\n if (onKeyboardNavigation) onKeyboardNavigation(pillUid, 1, e);\n }\n },\n [onKeyboardRemove, onRemove, onKeyboardNavigation, pillUid],\n );\n\n return (\n <StyledRemovablePillWrapper\n size={size}\n cols={['auto', '24px']}\n gutter=\"2px\"\n alignItems=\"center\"\n justifyItems=\"center\"\n className=\"ds-pill-wrapper ds-pill-wrapper-removable\"\n data-testid=\"ds-pill-wrapper\"\n aria-label={ariaLabel || label}\n >\n <TextComponent>{label}</TextComponent>\n <DSPillButton\n
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAAwD;AACxD,iBAAoB;AACpB,sBAA4B;AAC5B,uCAA2C;AAE3C,oBAA2C;AAC3C,uBAAqC;AACrC,wBAA6B;AAEtB,MAAM,gBAAgB,qBAAM,KACjC,CAAC,EAAE,OAAO,MAAM,gBAAgB,UAAU,UAAU,WAAW,eAAe;
|
|
4
|
+
"sourcesContent": ["/* eslint-disable react/prop-types */\nimport React, { useCallback, useContext, useMemo } from 'react';\nimport { uid } from 'uid';\nimport { CloseXsmall } from '@elliemae/ds-icons';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport type { DSPillProps } from '../../index.d';\nimport { StyledRemovablePillWrapper } from '../styled';\nimport { DSPillGroupV2Context } from '../PillGroup';\nimport { DSPillButton } from '../PillButton';\n\nexport const RemovablePill = React.memo<DSPillProps>(\n ({ label, size, disabled, labelTruncated, onRemove, innerRef, ariaLabel, tabIndex }) => {\n const { onKeyboardRemove, onKeyboardNavigation } = useContext(DSPillGroupV2Context);\n const pillUid = useMemo(() => `ds-pill-${uid()}`, []);\n\n const TextComponent = labelTruncated\n ? ({ children }) => <SimpleTruncatedTooltipText value={children} />\n : React.Fragment;\n\n const onKeyDown = useCallback(\n (e: KeyboardEvent) => {\n if (['Enter', 'Space'].includes(e.code)) {\n e.preventDefault();\n if (onKeyboardRemove) onKeyboardRemove(pillUid);\n onRemove(e);\n }\n if (e.code === 'ArrowLeft') {\n e.preventDefault();\n if (onKeyboardNavigation) onKeyboardNavigation(pillUid, -1, e);\n }\n if (e.code === 'ArrowRight') {\n e.preventDefault();\n if (onKeyboardNavigation) onKeyboardNavigation(pillUid, 1, e);\n }\n },\n [onKeyboardRemove, onRemove, onKeyboardNavigation, pillUid],\n );\n\n return (\n <StyledRemovablePillWrapper\n size={size}\n cols={['auto', '24px']}\n gutter=\"2px\"\n alignItems=\"center\"\n justifyItems=\"center\"\n className=\"ds-pill-wrapper ds-pill-wrapper-removable\"\n data-testid=\"ds-pill-wrapper\"\n aria-label={ariaLabel || label}\n >\n <TextComponent>{label}</TextComponent>\n <>\n {!disabled ? (\n <DSPillButton\n className=\"ds-pill-focus-point\"\n id={pillUid}\n data-testid=\"ds-pill-close-icon\"\n innerRef={innerRef}\n onClick={onRemove}\n onKeyDown={onKeyDown}\n aria-label={`Remove ${label}`}\n type=\"right\"\n tabIndex={tabIndex}\n >\n <CloseXsmall\n width={size === 's' ? 18 : 22.65}\n height={size === 's' ? 18 : 22.65}\n color={['brand-primary', '700']}\n />\n </DSPillButton>\n ) : null}\n </>\n </StyledRemovablePillWrapper>\n );\n },\n);\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAAwD;AACxD,iBAAoB;AACpB,sBAA4B;AAC5B,uCAA2C;AAE3C,oBAA2C;AAC3C,uBAAqC;AACrC,wBAA6B;AAEtB,MAAM,gBAAgB,qBAAM,KACjC,CAAC,EAAE,OAAO,MAAM,UAAU,gBAAgB,UAAU,UAAU,WAAW,eAAe;AACtF,QAAM,EAAE,kBAAkB,yBAAyB,6BAAW;AAC9D,QAAM,UAAU,0BAAQ,MAAM,WAAW,yBAAS;AAElD,QAAM,gBAAgB,iBAClB,CAAC,EAAE,eAAe,mDAAC,6DAAD;AAAA,IAA4B,OAAO;AAAA,OACrD,qBAAM;AAEV,QAAM,YAAY,8BAChB,CAAC,MAAqB;AACpB,QAAI,CAAC,SAAS,SAAS,SAAS,EAAE,OAAO;AACvC,QAAE;AACF,UAAI;AAAkB,yBAAiB;AACvC,eAAS;AAAA;AAEX,QAAI,EAAE,SAAS,aAAa;AAC1B,QAAE;AACF,UAAI;AAAsB,6BAAqB,SAAS,IAAI;AAAA;AAE9D,QAAI,EAAE,SAAS,cAAc;AAC3B,QAAE;AACF,UAAI;AAAsB,6BAAqB,SAAS,GAAG;AAAA;AAAA,KAG/D,CAAC,kBAAkB,UAAU,sBAAsB;AAGrD,SACE,mDAAC,0CAAD;AAAA,IACE;AAAA,IACA,MAAM,CAAC,QAAQ;AAAA,IACf,QAAO;AAAA,IACP,YAAW;AAAA,IACX,cAAa;AAAA,IACb,WAAU;AAAA,IACV,eAAY;AAAA,IACZ,cAAY,aAAa;AAAA,KAEzB,mDAAC,eAAD,MAAgB,QAChB,wFACG,CAAC,WACA,mDAAC,gCAAD;AAAA,IACE,WAAU;AAAA,IACV,IAAI;AAAA,IACJ,eAAY;AAAA,IACZ;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA,cAAY,UAAU;AAAA,IACtB,MAAK;AAAA,IACL;AAAA,KAEA,mDAAC,6BAAD;AAAA,IACE,OAAO,SAAS,MAAM,KAAK;AAAA,IAC3B,QAAQ,SAAS,MAAM,KAAK;AAAA,IAC5B,OAAO,CAAC,iBAAiB;AAAA,QAG3B;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -34,11 +34,12 @@ var import_react = __toESM(require("react"));
|
|
|
34
34
|
var import_ds_tooltip = require("@elliemae/ds-tooltip");
|
|
35
35
|
var import_ds_truncated_tooltip_text = require("@elliemae/ds-truncated-tooltip-text");
|
|
36
36
|
var import_styled = require("../styled");
|
|
37
|
-
const ValuePill = import_react.default.memo(({ label, size, labelTruncated, tooltipValue, iconLeft, ariaLabel }) => {
|
|
37
|
+
const ValuePill = import_react.default.memo(({ label, size, labelTruncated, disabled, tooltipValue, iconLeft, ariaLabel }) => {
|
|
38
38
|
const TextComponent = labelTruncated ? ({ children }) => /* @__PURE__ */ import_react.default.createElement(import_ds_truncated_tooltip_text.SimpleTruncatedTooltipText, {
|
|
39
39
|
value: children
|
|
40
40
|
}) : import_react.default.Fragment;
|
|
41
41
|
return /* @__PURE__ */ import_react.default.createElement(import_styled.StyledValuePillWrapper, {
|
|
42
|
+
disabled,
|
|
42
43
|
size,
|
|
43
44
|
alignItems: "center",
|
|
44
45
|
className: "ds-pill-wrapper ds-pill-wrapper-value",
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/components/types/ValuePill.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable react/prop-types */\nimport React from 'react';\nimport { DSTooltipV2 } from '@elliemae/ds-tooltip';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport type { DSPillProps } from '../../index.d';\nimport { StyledSpanWithTooltip, StyledValuePillWrapper } from '../styled';\n\nexport const ValuePill = React.memo<DSPillProps>(\n ({ label, size, labelTruncated, tooltipValue, iconLeft, ariaLabel }) => {\n const TextComponent = labelTruncated\n ? ({ children }) => <SimpleTruncatedTooltipText value={children} />\n : React.Fragment;\n\n return (\n <StyledValuePillWrapper\n size={size}\n alignItems=\"center\"\n className=\"ds-pill-wrapper ds-pill-wrapper-value\"\n data-testid=\"ds-pill-wrapper\"\n aria-label={ariaLabel || label}\n cols={[iconLeft && 'min-content', 'auto'].filter((notFalse) => notFalse)}\n gutter=\"xxxs\"\n hasIcon={iconLeft !== null}\n >\n {iconLeft}\n {tooltipValue !== '' ? (\n <DSTooltipV2\n title={tooltipValue}\n triggerComponent={\n <StyledSpanWithTooltip className=\"ds-pill-tooltip-value\" tabIndex={0}>\n {label}\n </StyledSpanWithTooltip>\n }\n />\n ) : (\n <TextComponent>{label}</TextComponent>\n )}\n </StyledValuePillWrapper>\n );\n },\n);\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAAkB;AAClB,wBAA4B;AAC5B,uCAA2C;AAE3C,oBAA8D;AAEvD,MAAM,YAAY,qBAAM,KAC7B,CAAC,EAAE,OAAO,MAAM,gBAAgB,cAAc,UAAU,gBAAgB;
|
|
4
|
+
"sourcesContent": ["/* eslint-disable react/prop-types */\nimport React from 'react';\nimport { DSTooltipV2 } from '@elliemae/ds-tooltip';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport type { DSPillProps } from '../../index.d';\nimport { StyledSpanWithTooltip, StyledValuePillWrapper } from '../styled';\n\nexport const ValuePill = React.memo<DSPillProps>(\n ({ label, size, labelTruncated, disabled, tooltipValue, iconLeft, ariaLabel }) => {\n const TextComponent = labelTruncated\n ? ({ children }) => <SimpleTruncatedTooltipText value={children} />\n : React.Fragment;\n\n return (\n <StyledValuePillWrapper\n disabled={disabled}\n size={size}\n alignItems=\"center\"\n className=\"ds-pill-wrapper ds-pill-wrapper-value\"\n data-testid=\"ds-pill-wrapper\"\n aria-label={ariaLabel || label}\n cols={[iconLeft && 'min-content', 'auto'].filter((notFalse) => notFalse)}\n gutter=\"xxxs\"\n hasIcon={iconLeft !== null}\n >\n {iconLeft}\n {tooltipValue !== '' ? (\n <DSTooltipV2\n title={tooltipValue}\n triggerComponent={\n <StyledSpanWithTooltip className=\"ds-pill-tooltip-value\" tabIndex={0}>\n {label}\n </StyledSpanWithTooltip>\n }\n />\n ) : (\n <TextComponent>{label}</TextComponent>\n )}\n </StyledValuePillWrapper>\n );\n },\n);\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAAkB;AAClB,wBAA4B;AAC5B,uCAA2C;AAE3C,oBAA8D;AAEvD,MAAM,YAAY,qBAAM,KAC7B,CAAC,EAAE,OAAO,MAAM,gBAAgB,UAAU,cAAc,UAAU,gBAAgB;AAChF,QAAM,gBAAgB,iBAClB,CAAC,EAAE,eAAe,mDAAC,6DAAD;AAAA,IAA4B,OAAO;AAAA,OACrD,qBAAM;AAEV,SACE,mDAAC,sCAAD;AAAA,IACE;AAAA,IACA;AAAA,IACA,YAAW;AAAA,IACX,WAAU;AAAA,IACV,eAAY;AAAA,IACZ,cAAY,aAAa;AAAA,IACzB,MAAM,CAAC,YAAY,eAAe,QAAQ,OAAO,CAAC,aAAa;AAAA,IAC/D,QAAO;AAAA,IACP,SAAS,aAAa;AAAA,KAErB,UACA,iBAAiB,KAChB,mDAAC,+BAAD;AAAA,IACE,OAAO;AAAA,IACP,kBACE,mDAAC,qCAAD;AAAA,MAAuB,WAAU;AAAA,MAAwB,UAAU;AAAA,OAChE;AAAA,OAKP,mDAAC,eAAD,MAAgB;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/cjs/index.d.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/index.d.ts", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React from 'react';\nimport type { DSDropdownMenuProps } from '@elliemae/ds-dropdownmenu';\n\nexport interface DSPillProps {\n label: string;\n type: 'label' | 'value' | 'input' | 'dropdown' | 'removable' | 'readonly';\n innerRef?: React.MutableRefObject<HTMLElement> | ((_ref: HTMLElement) => void);\n ariaLabel?: string;\n labelTruncated?: boolean;\n size: 'm' | 's';\n // ---------------------------------------------------------------------------\n // Value props\n // ---------------------------------------------------------------------------\n tooltipValue?: string;\n // ---------------------------------------------------------------------------\n // Readonly props\n // ---------------------------------------------------------------------------\n iconLeft?: JSX.Element;\n iconRight?: JSX.Element;\n // ---------------------------------------------------------------------------\n // Removable props\n // ---------------------------------------------------------------------------\n onRemove?: (e: React.KeyboardEvent & React.MouseEvent) => void;\n // ---------------------------------------------------------------------------\n // Input props\n // ---------------------------------------------------------------------------\n inputPlaceholder?: string;\n onInputChange?: (e: React.ChangeEvent, newValue: string) => void;\n onInputClear?: (e: React.KeyboardEvent & React.MouseEvent) => void;\n inputWidth?: number;\n inputRender?: React.ComponentType<any>;\n // ---------------------------------------------------------------------------\n // Dropdown props\n // ---------------------------------------------------------------------------\n dropdownProps?: DSDropdownMenuProps;\n onDropdownClick?: (e: React.KeyboardEvent & React.MouseEvent) => void;\n tabIndex?: number;\n}\n\nexport interface DSLabeledDropdownPillProps {\n label: string;\n value?: { id: string; label: string }[];\n onValuesChange?: (values: DSLabeledDropdownPillProps['values']) => void;\n type: 'label-is-value' | 'single-value' | 'multi-value' | 'input-value' | 'required-value';\n dropdownOptions?: any[];\n}\n\nexport interface DSPillGroupProps {\n width?: string;\n innerRef?: React.MutableRefObject<HTMLElement> | ((_ref: HTMLElement) => void);\n}\n", "import * as React from 'react';\nexport { React };\n"],
|
|
4
|
+
"sourcesContent": ["import React from 'react';\nimport type { DSDropdownMenuProps } from '@elliemae/ds-dropdownmenu';\n\nexport interface DSPillProps {\n label: string;\n type: 'label' | 'value' | 'input' | 'dropdown' | 'removable' | 'readonly';\n innerRef?: React.MutableRefObject<HTMLElement> | ((_ref: HTMLElement) => void);\n ariaLabel?: string;\n labelTruncated?: boolean;\n size: 'm' | 's';\n // ---------------------------------------------------------------------------\n // Value props\n // ---------------------------------------------------------------------------\n tooltipValue?: string;\n // ---------------------------------------------------------------------------\n // Readonly props\n // ---------------------------------------------------------------------------\n iconLeft?: JSX.Element;\n iconRight?: JSX.Element;\n // ---------------------------------------------------------------------------\n // Removable props\n // ---------------------------------------------------------------------------\n onRemove?: (e: React.KeyboardEvent & React.MouseEvent) => void;\n // ---------------------------------------------------------------------------\n // Input props\n // ---------------------------------------------------------------------------\n inputPlaceholder?: string;\n onInputChange?: (e: React.ChangeEvent, newValue: string) => void;\n onInputClear?: (e: React.KeyboardEvent & React.MouseEvent) => void;\n inputWidth?: number;\n inputRender?: React.ComponentType<any>;\n // ---------------------------------------------------------------------------\n // Dropdown props\n // ---------------------------------------------------------------------------\n dropdownProps?: DSDropdownMenuProps;\n onDropdownClick?: (e: React.KeyboardEvent & React.MouseEvent) => void;\n tabIndex?: number;\n disabled?: boolean;\n}\n\nexport interface DSLabeledDropdownPillProps {\n label: string;\n value?: { id: string; label: string }[];\n onValuesChange?: (values: DSLabeledDropdownPillProps['values']) => void;\n type: 'label-is-value' | 'single-value' | 'multi-value' | 'input-value' | 'required-value';\n dropdownOptions?: any[];\n}\n\nexport interface DSPillGroupProps {\n width?: string;\n innerRef?: React.MutableRefObject<HTMLElement> | ((_ref: HTMLElement) => void);\n}\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
5
|
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;ACAA,YAAuB;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/cjs/props.js
CHANGED
package/dist/cjs/props.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/props.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable @typescript-eslint/explicit-module-boundary-types */\nimport { PropTypes } from 'react-desc';\nimport { DSInput } from '@elliemae/ds-form';\n\nconst pillTypes = PropTypes.oneOf(['label', 'value', 'input', 'dropdown', 'removable', 'readonly']);\n\nexport const DSPillV2PropTypes = {\n label: PropTypes.string.description('Label to show in the pill').isRequired,\n type: pillTypes.description('The type of pill that you want to render').isRequired,\n innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func])\n .description('Reference to the focuseable internal element of each pill (remove icons, inputs, dropdown, etc.)')\n .defaultValue(() => null),\n size: PropTypes.oneOf(['s', 'm']).description('Vertical pill size').defaultValue('m'),\n ariaLabel: PropTypes.string\n .description('Aria label for the pill. If not provided we will use the label')\n .defaultValue(''),\n labelTruncated: PropTypes.bool.description('Whether to truncate the pills label').defaultValue(true),\n tooltipValue: PropTypes.string.description('String to show as a tooltip in the value pill').defaultValue(''),\n iconLeft: PropTypes.node.description('A component to show int the left of a readonly pill').defaultValue(null),\n iconRight: PropTypes.node.description('A component to show in the right of a readonly pill').defaultValue(null),\n onRemove: PropTypes.func\n .description('Callback triggered when removing a pill with the close icon')\n .defaultValue(() => null),\n inputPlaceholder: PropTypes.string.description('Placeholder for the input pill').defaultValue(''),\n onInputChange: PropTypes.func\n .description('Callback triggered when user provides input to the input pill')\n .defaultValue(() => null),\n onInputClear: PropTypes.func\n .description('Callback triggered when the user clears an input pill')\n .defaultValue(() => null),\n inputWidth: PropTypes.number.description('Width in pixels for the input tag in the input pill').defaultValue(150),\n dropdownProps: PropTypes.object.description('Properties that will be used for the dropdown-menu').defaultValue({}),\n onDropdownClick: PropTypes.func\n .description('Callback when dropdown button is clicked or pressed')\n .defaultValue(() => null),\n};\n\nexport const DSPillButtonPropTypes = {\n type: PropTypes.oneOf(['only', 'left', 'right'])\n .description('The position in which this button will be placed. Only used for css styling internally')\n .defaultValue('right'),\n width: PropTypes.string.description('Width of the button').defaultValue('100%'),\n height: PropTypes.string.description('Height of the button').defaultValue('100%'),\n};\n\nexport const DSPillGroupPropTypes = {\n width: PropTypes.string.description('Width of the group').defaultValue('fit-content'),\n innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func])\n .description('Reference to the pill group wrapper')\n .defaultValue(() => null),\n};\n\nexport const DSPillV2DefaultProps = {\n innerRef: () => null,\n ariaLabel: '',\n size: 'm',\n labelTruncated: true,\n tooltipValue: '',\n iconLeft: null,\n iconRight: null,\n onRemove: () => null,\n inputPlaceholder: '',\n onInputChange: () => null,\n onInputClear: () => null,\n inputWidth: 72,\n inputRender: DSInput,\n dropdownProps: {},\n onDropdownClick: () => null,\n tabIndex: 0,\n};\n\nexport const DSPillButtonDefaultProps = {\n type: 'right',\n width: '100%',\n height: '100%',\n};\n\nexport const DSPillGroupDefaultProps = {\n width: 'fit-content',\n innerRef: () => null,\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,wBAA0B;AAC1B,qBAAwB;AAExB,MAAM,YAAY,4BAAU,MAAM,CAAC,SAAS,SAAS,SAAS,YAAY,aAAa;AAEhF,MAAM,oBAAoB;AAAA,EAC/B,OAAO,4BAAU,OAAO,YAAY,6BAA6B;AAAA,EACjE,MAAM,UAAU,YAAY,4CAA4C;AAAA,EACxE,UAAU,4BAAU,UAAU,CAAC,4BAAU,QAAQ,4BAAU,OACxD,YAAY,oGACZ,aAAa,MAAM;AAAA,EACtB,MAAM,4BAAU,MAAM,CAAC,KAAK,MAAM,YAAY,sBAAsB,aAAa;AAAA,EACjF,WAAW,4BAAU,OAClB,YAAY,kEACZ,aAAa;AAAA,EAChB,gBAAgB,4BAAU,KAAK,YAAY,uCAAuC,aAAa;AAAA,EAC/F,cAAc,4BAAU,OAAO,YAAY,iDAAiD,aAAa;AAAA,EACzG,UAAU,4BAAU,KAAK,YAAY,uDAAuD,aAAa;AAAA,EACzG,WAAW,4BAAU,KAAK,YAAY,uDAAuD,aAAa;AAAA,EAC1G,UAAU,4BAAU,KACjB,YAAY,+DACZ,aAAa,MAAM;AAAA,EACtB,kBAAkB,4BAAU,OAAO,YAAY,kCAAkC,aAAa;AAAA,EAC9F,eAAe,4BAAU,KACtB,YAAY,iEACZ,aAAa,MAAM;AAAA,EACtB,cAAc,4BAAU,KACrB,YAAY,yDACZ,aAAa,MAAM;AAAA,EACtB,YAAY,4BAAU,OAAO,YAAY,uDAAuD,aAAa;AAAA,EAC7G,eAAe,4BAAU,OAAO,YAAY,sDAAsD,aAAa;AAAA,EAC/G,iBAAiB,4BAAU,KACxB,YAAY,uDACZ,aAAa,MAAM;AAAA;AAGjB,MAAM,wBAAwB;AAAA,EACnC,MAAM,4BAAU,MAAM,CAAC,QAAQ,QAAQ,UACpC,YAAY,0FACZ,aAAa;AAAA,EAChB,OAAO,4BAAU,OAAO,YAAY,uBAAuB,aAAa;AAAA,EACxE,QAAQ,4BAAU,OAAO,YAAY,wBAAwB,aAAa;AAAA;AAGrE,MAAM,uBAAuB;AAAA,EAClC,OAAO,4BAAU,OAAO,YAAY,sBAAsB,aAAa;AAAA,EACvE,UAAU,4BAAU,UAAU,CAAC,4BAAU,QAAQ,4BAAU,OACxD,YAAY,uCACZ,aAAa,MAAM;AAAA;AAGjB,MAAM,uBAAuB;AAAA,EAClC,UAAU,MAAM;AAAA,EAChB,WAAW;AAAA,EACX,MAAM;AAAA,EACN,gBAAgB;AAAA,EAChB,cAAc;AAAA,EACd,UAAU;AAAA,EACV,WAAW;AAAA,EACX,UAAU,MAAM;AAAA,EAChB,kBAAkB;AAAA,EAClB,eAAe,MAAM;AAAA,EACrB,cAAc,MAAM;AAAA,EACpB,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,eAAe;AAAA,EACf,iBAAiB,MAAM;AAAA,EACvB,UAAU;AAAA;AAGL,MAAM,2BAA2B;AAAA,EACtC,MAAM;AAAA,EACN,OAAO;AAAA,EACP,QAAQ;AAAA;AAGH,MAAM,0BAA0B;AAAA,EACrC,OAAO;AAAA,EACP,UAAU,MAAM;AAAA;",
|
|
4
|
+
"sourcesContent": ["/* eslint-disable @typescript-eslint/explicit-module-boundary-types */\nimport { PropTypes } from 'react-desc';\nimport { DSInput } from '@elliemae/ds-form';\n\nconst pillTypes = PropTypes.oneOf(['label', 'value', 'input', 'dropdown', 'removable', 'readonly']);\n\nexport const DSPillV2PropTypes = {\n label: PropTypes.string.description('Label to show in the pill').isRequired,\n type: pillTypes.description('The type of pill that you want to render').isRequired,\n innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func])\n .description('Reference to the focuseable internal element of each pill (remove icons, inputs, dropdown, etc.)')\n .defaultValue(() => null),\n size: PropTypes.oneOf(['s', 'm']).description('Vertical pill size').defaultValue('m'),\n ariaLabel: PropTypes.string\n .description('Aria label for the pill. If not provided we will use the label')\n .defaultValue(''),\n labelTruncated: PropTypes.bool.description('Whether to truncate the pills label').defaultValue(true),\n tooltipValue: PropTypes.string.description('String to show as a tooltip in the value pill').defaultValue(''),\n iconLeft: PropTypes.node.description('A component to show int the left of a readonly pill').defaultValue(null),\n iconRight: PropTypes.node.description('A component to show in the right of a readonly pill').defaultValue(null),\n onRemove: PropTypes.func\n .description('Callback triggered when removing a pill with the close icon')\n .defaultValue(() => null),\n inputPlaceholder: PropTypes.string.description('Placeholder for the input pill').defaultValue(''),\n onInputChange: PropTypes.func\n .description('Callback triggered when user provides input to the input pill')\n .defaultValue(() => null),\n onInputClear: PropTypes.func\n .description('Callback triggered when the user clears an input pill')\n .defaultValue(() => null),\n inputWidth: PropTypes.number.description('Width in pixels for the input tag in the input pill').defaultValue(150),\n dropdownProps: PropTypes.object.description('Properties that will be used for the dropdown-menu').defaultValue({}),\n onDropdownClick: PropTypes.func\n .description('Callback when dropdown button is clicked or pressed')\n .defaultValue(() => null),\n};\n\nexport const DSPillButtonPropTypes = {\n type: PropTypes.oneOf(['only', 'left', 'right'])\n .description('The position in which this button will be placed. Only used for css styling internally')\n .defaultValue('right'),\n width: PropTypes.string.description('Width of the button').defaultValue('100%'),\n height: PropTypes.string.description('Height of the button').defaultValue('100%'),\n};\n\nexport const DSPillGroupPropTypes = {\n width: PropTypes.string.description('Width of the group').defaultValue('fit-content'),\n innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func])\n .description('Reference to the pill group wrapper')\n .defaultValue(() => null),\n};\n\nexport const DSPillV2DefaultProps = {\n innerRef: () => null,\n disabled: false,\n ariaLabel: '',\n size: 'm',\n labelTruncated: true,\n tooltipValue: '',\n iconLeft: null,\n iconRight: null,\n onRemove: () => null,\n inputPlaceholder: '',\n onInputChange: () => null,\n onInputClear: () => null,\n inputWidth: 72,\n inputRender: DSInput,\n dropdownProps: {},\n onDropdownClick: () => null,\n tabIndex: 0,\n};\n\nexport const DSPillButtonDefaultProps = {\n type: 'right',\n width: '100%',\n height: '100%',\n};\n\nexport const DSPillGroupDefaultProps = {\n width: 'fit-content',\n innerRef: () => null,\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,wBAA0B;AAC1B,qBAAwB;AAExB,MAAM,YAAY,4BAAU,MAAM,CAAC,SAAS,SAAS,SAAS,YAAY,aAAa;AAEhF,MAAM,oBAAoB;AAAA,EAC/B,OAAO,4BAAU,OAAO,YAAY,6BAA6B;AAAA,EACjE,MAAM,UAAU,YAAY,4CAA4C;AAAA,EACxE,UAAU,4BAAU,UAAU,CAAC,4BAAU,QAAQ,4BAAU,OACxD,YAAY,oGACZ,aAAa,MAAM;AAAA,EACtB,MAAM,4BAAU,MAAM,CAAC,KAAK,MAAM,YAAY,sBAAsB,aAAa;AAAA,EACjF,WAAW,4BAAU,OAClB,YAAY,kEACZ,aAAa;AAAA,EAChB,gBAAgB,4BAAU,KAAK,YAAY,uCAAuC,aAAa;AAAA,EAC/F,cAAc,4BAAU,OAAO,YAAY,iDAAiD,aAAa;AAAA,EACzG,UAAU,4BAAU,KAAK,YAAY,uDAAuD,aAAa;AAAA,EACzG,WAAW,4BAAU,KAAK,YAAY,uDAAuD,aAAa;AAAA,EAC1G,UAAU,4BAAU,KACjB,YAAY,+DACZ,aAAa,MAAM;AAAA,EACtB,kBAAkB,4BAAU,OAAO,YAAY,kCAAkC,aAAa;AAAA,EAC9F,eAAe,4BAAU,KACtB,YAAY,iEACZ,aAAa,MAAM;AAAA,EACtB,cAAc,4BAAU,KACrB,YAAY,yDACZ,aAAa,MAAM;AAAA,EACtB,YAAY,4BAAU,OAAO,YAAY,uDAAuD,aAAa;AAAA,EAC7G,eAAe,4BAAU,OAAO,YAAY,sDAAsD,aAAa;AAAA,EAC/G,iBAAiB,4BAAU,KACxB,YAAY,uDACZ,aAAa,MAAM;AAAA;AAGjB,MAAM,wBAAwB;AAAA,EACnC,MAAM,4BAAU,MAAM,CAAC,QAAQ,QAAQ,UACpC,YAAY,0FACZ,aAAa;AAAA,EAChB,OAAO,4BAAU,OAAO,YAAY,uBAAuB,aAAa;AAAA,EACxE,QAAQ,4BAAU,OAAO,YAAY,wBAAwB,aAAa;AAAA;AAGrE,MAAM,uBAAuB;AAAA,EAClC,OAAO,4BAAU,OAAO,YAAY,sBAAsB,aAAa;AAAA,EACvE,UAAU,4BAAU,UAAU,CAAC,4BAAU,QAAQ,4BAAU,OACxD,YAAY,uCACZ,aAAa,MAAM;AAAA;AAGjB,MAAM,uBAAuB;AAAA,EAClC,UAAU,MAAM;AAAA,EAChB,UAAU;AAAA,EACV,WAAW;AAAA,EACX,MAAM;AAAA,EACN,gBAAgB;AAAA,EAChB,cAAc;AAAA,EACd,UAAU;AAAA,EACV,WAAW;AAAA,EACX,UAAU,MAAM;AAAA,EAChB,kBAAkB;AAAA,EAClB,eAAe,MAAM;AAAA,EACrB,cAAc,MAAM;AAAA,EACpB,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,eAAe;AAAA,EACf,iBAAiB,MAAM;AAAA,EACvB,UAAU;AAAA;AAGL,MAAM,2BAA2B;AAAA,EACtC,MAAM;AAAA,EACN,OAAO;AAAA,EACP,QAAQ;AAAA;AAGH,MAAM,0BAA0B;AAAA,EACrC,OAAO;AAAA,EACP,UAAU,MAAM;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -11,7 +11,7 @@ const borderOutside = (color, size = 1, zIndex = 2, borderRadius = "12px") => cs
|
|
|
11
11
|
left: 0px;
|
|
12
12
|
right: 0px;
|
|
13
13
|
bottom: 0px;
|
|
14
|
-
border: ${size}px solid ${color};
|
|
14
|
+
border: ${size}px solid ${({ disabled, theme }) => disabled ? theme.colors.neutral[400] : color};
|
|
15
15
|
border-top-left-radius: ${borderRadius};
|
|
16
16
|
border-top-right-radius: ${borderRadius};
|
|
17
17
|
border-bottom-left-radius: ${borderRadius};
|
|
@@ -27,7 +27,7 @@ const commonPillWrapperCss = css`
|
|
|
27
27
|
|
|
28
28
|
width: fit-content;
|
|
29
29
|
|
|
30
|
-
background-color: ${(
|
|
30
|
+
background-color: ${({ theme, disabled }) => disabled ? theme.colors.neutral["080"] : theme.colors.brand[200]};
|
|
31
31
|
|
|
32
32
|
outline: none;
|
|
33
33
|
|
|
@@ -38,7 +38,9 @@ const commonPillWrapperCss = css`
|
|
|
38
38
|
|
|
39
39
|
font-size: 13px;
|
|
40
40
|
line-height: 1;
|
|
41
|
-
|
|
41
|
+
user-select: ${({ disabled }) => disabled ? "none" : "auto"};
|
|
42
|
+
cursor: ${({ disabled }) => disabled ? "not-allowed" : "default"};
|
|
43
|
+
color: ${({ theme, disabled }) => disabled ? theme.colors.neutral["400"] : theme.colors.brand["800"]};
|
|
42
44
|
${(props) => borderOutside(props.theme.colors.brand[300])};
|
|
43
45
|
`;
|
|
44
46
|
const StyledLabelPillWrapper = styled(Grid)`
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/components/styled.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport styled from 'styled-components';\nimport { css } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSButtonV2 } from '@elliemae/ds-button';\n\n// =============================================================================\n// Common CSS\n// =============================================================================\n\nconst borderOutside = (color: string, size = 1, zIndex = 2, borderRadius = '12px') => css`\n :after {\n content: ' ';\n position: absolute;\n top: 0px;\n left: 0px;\n right: 0px;\n bottom: 0px;\n border: ${size}px solid ${color};\n border-top-left-radius: ${borderRadius};\n border-top-right-radius: ${borderRadius};\n border-bottom-left-radius: ${borderRadius};\n border-bottom-right-radius: ${borderRadius};\n pointer-events: none;\n z-index: ${zIndex};\n }\n`;\n\nconst commonPillWrapperCss = css<{ size: 'm' | 's' }>`\n height: ${(props) => (props?.size === 'm' ? '24px' : '18px')};\n\n position: relative;\n\n width: fit-content;\n\n background-color: ${(
|
|
5
|
-
"mappings": "AAAA;ACCA;AACA;AACA;AACA;AAMA,MAAM,gBAAgB,CAAC,OAAe,OAAO,GAAG,SAAS,GAAG,eAAe,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cAQxE,gBAAgB;AAAA,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport styled from 'styled-components';\nimport { css } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSButtonV2 } from '@elliemae/ds-button';\n\n// =============================================================================\n// Common CSS\n// =============================================================================\n\nconst borderOutside = (color: string, size = 1, zIndex = 2, borderRadius = '12px') => css`\n :after {\n content: ' ';\n position: absolute;\n top: 0px;\n left: 0px;\n right: 0px;\n bottom: 0px;\n border: ${size}px solid ${({ disabled, theme }) => (disabled ? theme.colors.neutral[400] : color)};\n border-top-left-radius: ${borderRadius};\n border-top-right-radius: ${borderRadius};\n border-bottom-left-radius: ${borderRadius};\n border-bottom-right-radius: ${borderRadius};\n pointer-events: none;\n z-index: ${zIndex};\n }\n`;\n\nconst commonPillWrapperCss = css<{ size: 'm' | 's' }>`\n height: ${(props) => (props?.size === 'm' ? '24px' : '18px')};\n\n position: relative;\n\n width: fit-content;\n\n background-color: ${({ theme, disabled }) => (disabled ? theme.colors.neutral['080'] : theme.colors.brand[200])};\n\n outline: none;\n\n white-space: nowrap;\n\n padding: 0px 12px 0 12px;\n border-radius: 12px;\n\n font-size: 13px;\n line-height: 1;\n user-select: ${({ disabled }) => (disabled ? 'none' : 'auto')};\n cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'default')};\n color: ${({ theme, disabled }) => (disabled ? theme.colors.neutral['400'] : theme.colors.brand['800'])};\n ${(props) => borderOutside(props.theme.colors.brand[300])};\n`;\n\n// =============================================================================\n// Pills wrappers\n// =============================================================================\n\nexport const StyledLabelPillWrapper = styled(Grid)`\n ${commonPillWrapperCss}\n\n font-weight: ${(props) => props.theme.fontWeights.semibold};\n padding-left: ${(props) => (props.hasIcon ? '0px !important' : '12px')};\n`;\n\nexport const StyledValuePillWrapper = styled(Grid)`\n ${commonPillWrapperCss}\n\n font-weight: ${(props) => props.theme.fontWeights.regular};\n padding-left: ${(props) => (props.hasIcon ? '0px !important' : '12px')};\n`;\n\nexport const StyledInputPillWrapper = styled(Grid)<{ value: string; inputWidth: number; inputHasFocus: boolean }>`\n ${commonPillWrapperCss}\n\n background: ${(props) => props.theme.colors.neutral['000']};\n padding: 0;\n\n ${({ value, theme }) => borderOutside(value === '' ? theme.colors.neutral[400] : theme.colors.brand[500])}\n\n :focus-within {\n ${(props) => (props.inputHasFocus ? borderOutside(props.theme.colors.brand[700], 2) : '')}\n }\n\n :active {\n ${(props) => (props.inputHasFocus ? borderOutside(props.theme.colors.brand[500]) : '')}\n }\n\n & .em-ds-input {\n outline: none !important;\n border: none !important;\n box-shadow: none !important;\n border-radius: 0 !important;\n height: 100%;\n background: transparent;\n width: ${(props) => `${props.inputWidth + (props.value === '' ? 24 : 0)}px`};\n padding: 0;\n margin: 0 0 0 8px;\n }\n\n & .em-ds-input__tooltip-ref {\n height: 100%;\n }\n`;\n\nexport const StyledDropdownPillWrapper = styled(Grid)`\n ${commonPillWrapperCss}\n font-weight: ${(props) => props.theme.fontWeights.semibold};\n\n padding: 0 0 0 12px;\n`;\n\nexport const StyledReadonlyPillWrapper = styled(Grid)<{ hasIconRight: boolean; hasIconLeft: boolean }>`\n ${commonPillWrapperCss}\n font-weight: ${(props) => props.theme.fontWeights.semibold};\n padding-right: ${(props) => (props.hasIconRight ? '0 !important' : '12px')};\n padding-left: ${(props) => (props.hasIconLeft ? '0 !important' : '12px')};\n`;\n\nexport const StyledRemovablePillWrapper = styled(Grid)`\n ${commonPillWrapperCss}\n font-weight: ${(props) => props.theme.fontWeights.regular};\n padding: 0 0 0 12px;\n`;\n\n// =============================================================================\n// Pill group\n// =============================================================================\n\nexport const StyledPillGroup = styled(Grid)`\n width: ${({ width }) => width};\n\n // Pill edges\n & .ds-pill-wrapper {\n &:not(:first-of-type) {\n &,\n :after,\n :before,\n .ds-pill-tooltip-value:after {\n border-top-left-radius: 0px;\n border-bottom-left-radius: 0px;\n }\n }\n &:not(:last-of-type) {\n &,\n :after,\n :before,\n .ds-pill-tooltip-value:after {\n border-top-right-radius: 0px;\n border-bottom-right-radius: 0px;\n }\n }\n }\n\n // Pill paddings to the left / right\n & .ds-pill-wrapper-label,\n & .ds-pill-wrapper-value,\n & .ds-pill-wrapper-readonly {\n &:not(:first-of-type) {\n padding-left: 8px;\n }\n &:not(:last-of-type) {\n padding-right: 8px;\n }\n }\n\n & .ds-pill-wrapper-removable:not(:first-of-type) {\n padding-left: 8px;\n }\n\n & .ds-pill-wrapper-dropdown:not(:first-of-type) {\n padding-left: 8px;\n }\n\n & .ds-pill-wrapper {\n :not(:first-of-type) {\n .ds-pill-button-left {\n border-radius: 0px;\n }\n .ds-pill-button-only {\n border-top-left-radius: 0px;\n border-bottom-left-radius: 0px;\n }\n }\n :not(:last-of-type) {\n .ds-pill-button-right {\n border-radius: 0px;\n }\n .ds-pill-button-only {\n border-top-right-radius: 0px;\n border-bottom-right-radius: 0px;\n }\n }\n }\n`;\n\n// =============================================================================\n// Extra stuff\n// =============================================================================\n\nexport const StyledSpanWithTooltip = styled.span`\n outline: none;\n :focus {\n ${(props) => borderOutside(props.theme.colors.brand[700], 2, 3)}\n }\n`;\n\nexport const StyledPillButton = styled(DSButtonV2)<{ width: string; height: string }>`\n display: grid;\n place-items: center;\n\n position: relative;\n\n padding: 0;\n width: ${(props) => props.width};\n height: ${(props) => props.height};\n\n border-radius: 12px;\n\n :focus {\n ${(props) => borderOutside(props.theme.colors.brand[700], 2, 3, 'inherit')}\n }\n\n cursor: pointer;\n`;\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -6,7 +6,7 @@ import { SimpleTruncatedTooltipText } from "@elliemae/ds-truncated-tooltip-text"
|
|
|
6
6
|
import { StyledRemovablePillWrapper } from "../styled";
|
|
7
7
|
import { DSPillGroupV2Context } from "../PillGroup";
|
|
8
8
|
import { DSPillButton } from "../PillButton";
|
|
9
|
-
const RemovablePill = React2.memo(({ label, size, labelTruncated, onRemove, innerRef, ariaLabel, tabIndex }) => {
|
|
9
|
+
const RemovablePill = React2.memo(({ label, size, disabled, labelTruncated, onRemove, innerRef, ariaLabel, tabIndex }) => {
|
|
10
10
|
const { onKeyboardRemove, onKeyboardNavigation } = useContext(DSPillGroupV2Context);
|
|
11
11
|
const pillUid = useMemo(() => `ds-pill-${uid()}`, []);
|
|
12
12
|
const TextComponent = labelTruncated ? ({ children }) => /* @__PURE__ */ React2.createElement(SimpleTruncatedTooltipText, {
|
|
@@ -39,7 +39,7 @@ const RemovablePill = React2.memo(({ label, size, labelTruncated, onRemove, inne
|
|
|
39
39
|
className: "ds-pill-wrapper ds-pill-wrapper-removable",
|
|
40
40
|
"data-testid": "ds-pill-wrapper",
|
|
41
41
|
"aria-label": ariaLabel || label
|
|
42
|
-
}, /* @__PURE__ */ React2.createElement(TextComponent, null, label), /* @__PURE__ */ React2.createElement(DSPillButton, {
|
|
42
|
+
}, /* @__PURE__ */ React2.createElement(TextComponent, null, label), /* @__PURE__ */ React2.createElement(React2.Fragment, null, !disabled ? /* @__PURE__ */ React2.createElement(DSPillButton, {
|
|
43
43
|
className: "ds-pill-focus-point",
|
|
44
44
|
id: pillUid,
|
|
45
45
|
"data-testid": "ds-pill-close-icon",
|
|
@@ -53,7 +53,7 @@ const RemovablePill = React2.memo(({ label, size, labelTruncated, onRemove, inne
|
|
|
53
53
|
width: size === "s" ? 18 : 22.65,
|
|
54
54
|
height: size === "s" ? 18 : 22.65,
|
|
55
55
|
color: ["brand-primary", "700"]
|
|
56
|
-
})));
|
|
56
|
+
})) : null));
|
|
57
57
|
});
|
|
58
58
|
export {
|
|
59
59
|
RemovablePill
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/components/types/RemovablePill.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/prop-types */\nimport React, { useCallback, useContext, useMemo } from 'react';\nimport { uid } from 'uid';\nimport { CloseXsmall } from '@elliemae/ds-icons';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport type { DSPillProps } from '../../index.d';\nimport { StyledRemovablePillWrapper } from '../styled';\nimport { DSPillGroupV2Context } from '../PillGroup';\nimport { DSPillButton } from '../PillButton';\n\nexport const RemovablePill = React.memo<DSPillProps>(\n ({ label, size, labelTruncated, onRemove, innerRef, ariaLabel, tabIndex }) => {\n const { onKeyboardRemove, onKeyboardNavigation } = useContext(DSPillGroupV2Context);\n const pillUid = useMemo(() => `ds-pill-${uid()}`, []);\n\n const TextComponent = labelTruncated\n ? ({ children }) => <SimpleTruncatedTooltipText value={children} />\n : React.Fragment;\n\n const onKeyDown = useCallback(\n (e: KeyboardEvent) => {\n if (['Enter', 'Space'].includes(e.code)) {\n e.preventDefault();\n if (onKeyboardRemove) onKeyboardRemove(pillUid);\n onRemove(e);\n }\n if (e.code === 'ArrowLeft') {\n e.preventDefault();\n if (onKeyboardNavigation) onKeyboardNavigation(pillUid, -1, e);\n }\n if (e.code === 'ArrowRight') {\n e.preventDefault();\n if (onKeyboardNavigation) onKeyboardNavigation(pillUid, 1, e);\n }\n },\n [onKeyboardRemove, onRemove, onKeyboardNavigation, pillUid],\n );\n\n return (\n <StyledRemovablePillWrapper\n size={size}\n cols={['auto', '24px']}\n gutter=\"2px\"\n alignItems=\"center\"\n justifyItems=\"center\"\n className=\"ds-pill-wrapper ds-pill-wrapper-removable\"\n data-testid=\"ds-pill-wrapper\"\n aria-label={ariaLabel || label}\n >\n <TextComponent>{label}</TextComponent>\n <DSPillButton\n
|
|
5
|
-
"mappings": "AAAA;ACCA;AACA;AACA;AACA;AAEA;AACA;AACA;AAEO,MAAM,gBAAgB,OAAM,KACjC,CAAC,EAAE,OAAO,MAAM,gBAAgB,UAAU,UAAU,WAAW,eAAe;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/prop-types */\nimport React, { useCallback, useContext, useMemo } from 'react';\nimport { uid } from 'uid';\nimport { CloseXsmall } from '@elliemae/ds-icons';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport type { DSPillProps } from '../../index.d';\nimport { StyledRemovablePillWrapper } from '../styled';\nimport { DSPillGroupV2Context } from '../PillGroup';\nimport { DSPillButton } from '../PillButton';\n\nexport const RemovablePill = React.memo<DSPillProps>(\n ({ label, size, disabled, labelTruncated, onRemove, innerRef, ariaLabel, tabIndex }) => {\n const { onKeyboardRemove, onKeyboardNavigation } = useContext(DSPillGroupV2Context);\n const pillUid = useMemo(() => `ds-pill-${uid()}`, []);\n\n const TextComponent = labelTruncated\n ? ({ children }) => <SimpleTruncatedTooltipText value={children} />\n : React.Fragment;\n\n const onKeyDown = useCallback(\n (e: KeyboardEvent) => {\n if (['Enter', 'Space'].includes(e.code)) {\n e.preventDefault();\n if (onKeyboardRemove) onKeyboardRemove(pillUid);\n onRemove(e);\n }\n if (e.code === 'ArrowLeft') {\n e.preventDefault();\n if (onKeyboardNavigation) onKeyboardNavigation(pillUid, -1, e);\n }\n if (e.code === 'ArrowRight') {\n e.preventDefault();\n if (onKeyboardNavigation) onKeyboardNavigation(pillUid, 1, e);\n }\n },\n [onKeyboardRemove, onRemove, onKeyboardNavigation, pillUid],\n );\n\n return (\n <StyledRemovablePillWrapper\n size={size}\n cols={['auto', '24px']}\n gutter=\"2px\"\n alignItems=\"center\"\n justifyItems=\"center\"\n className=\"ds-pill-wrapper ds-pill-wrapper-removable\"\n data-testid=\"ds-pill-wrapper\"\n aria-label={ariaLabel || label}\n >\n <TextComponent>{label}</TextComponent>\n <>\n {!disabled ? (\n <DSPillButton\n className=\"ds-pill-focus-point\"\n id={pillUid}\n data-testid=\"ds-pill-close-icon\"\n innerRef={innerRef}\n onClick={onRemove}\n onKeyDown={onKeyDown}\n aria-label={`Remove ${label}`}\n type=\"right\"\n tabIndex={tabIndex}\n >\n <CloseXsmall\n width={size === 's' ? 18 : 22.65}\n height={size === 's' ? 18 : 22.65}\n color={['brand-primary', '700']}\n />\n </DSPillButton>\n ) : null}\n </>\n </StyledRemovablePillWrapper>\n );\n },\n);\n"],
|
|
5
|
+
"mappings": "AAAA;ACCA;AACA;AACA;AACA;AAEA;AACA;AACA;AAEO,MAAM,gBAAgB,OAAM,KACjC,CAAC,EAAE,OAAO,MAAM,UAAU,gBAAgB,UAAU,UAAU,WAAW,eAAe;AACtF,QAAM,EAAE,kBAAkB,yBAAyB,WAAW;AAC9D,QAAM,UAAU,QAAQ,MAAM,WAAW,SAAS;AAElD,QAAM,gBAAgB,iBAClB,CAAC,EAAE,eAAe,qCAAC,4BAAD;AAAA,IAA4B,OAAO;AAAA,OACrD,OAAM;AAEV,QAAM,YAAY,YAChB,CAAC,MAAqB;AACpB,QAAI,CAAC,SAAS,SAAS,SAAS,EAAE,OAAO;AACvC,QAAE;AACF,UAAI;AAAkB,yBAAiB;AACvC,eAAS;AAAA;AAEX,QAAI,EAAE,SAAS,aAAa;AAC1B,QAAE;AACF,UAAI;AAAsB,6BAAqB,SAAS,IAAI;AAAA;AAE9D,QAAI,EAAE,SAAS,cAAc;AAC3B,QAAE;AACF,UAAI;AAAsB,6BAAqB,SAAS,GAAG;AAAA;AAAA,KAG/D,CAAC,kBAAkB,UAAU,sBAAsB;AAGrD,SACE,qCAAC,4BAAD;AAAA,IACE;AAAA,IACA,MAAM,CAAC,QAAQ;AAAA,IACf,QAAO;AAAA,IACP,YAAW;AAAA,IACX,cAAa;AAAA,IACb,WAAU;AAAA,IACV,eAAY;AAAA,IACZ,cAAY,aAAa;AAAA,KAEzB,qCAAC,eAAD,MAAgB,QAChB,4DACG,CAAC,WACA,qCAAC,cAAD;AAAA,IACE,WAAU;AAAA,IACV,IAAI;AAAA,IACJ,eAAY;AAAA,IACZ;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA,cAAY,UAAU;AAAA,IACtB,MAAK;AAAA,IACL;AAAA,KAEA,qCAAC,aAAD;AAAA,IACE,OAAO,SAAS,MAAM,KAAK;AAAA,IAC3B,QAAQ,SAAS,MAAM,KAAK;AAAA,IAC5B,OAAO,CAAC,iBAAiB;AAAA,QAG3B;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -3,11 +3,12 @@ import React2 from "react";
|
|
|
3
3
|
import { DSTooltipV2 } from "@elliemae/ds-tooltip";
|
|
4
4
|
import { SimpleTruncatedTooltipText } from "@elliemae/ds-truncated-tooltip-text";
|
|
5
5
|
import { StyledSpanWithTooltip, StyledValuePillWrapper } from "../styled";
|
|
6
|
-
const ValuePill = React2.memo(({ label, size, labelTruncated, tooltipValue, iconLeft, ariaLabel }) => {
|
|
6
|
+
const ValuePill = React2.memo(({ label, size, labelTruncated, disabled, tooltipValue, iconLeft, ariaLabel }) => {
|
|
7
7
|
const TextComponent = labelTruncated ? ({ children }) => /* @__PURE__ */ React2.createElement(SimpleTruncatedTooltipText, {
|
|
8
8
|
value: children
|
|
9
9
|
}) : React2.Fragment;
|
|
10
10
|
return /* @__PURE__ */ React2.createElement(StyledValuePillWrapper, {
|
|
11
|
+
disabled,
|
|
11
12
|
size,
|
|
12
13
|
alignItems: "center",
|
|
13
14
|
className: "ds-pill-wrapper ds-pill-wrapper-value",
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/components/types/ValuePill.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/prop-types */\nimport React from 'react';\nimport { DSTooltipV2 } from '@elliemae/ds-tooltip';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport type { DSPillProps } from '../../index.d';\nimport { StyledSpanWithTooltip, StyledValuePillWrapper } from '../styled';\n\nexport const ValuePill = React.memo<DSPillProps>(\n ({ label, size, labelTruncated, tooltipValue, iconLeft, ariaLabel }) => {\n const TextComponent = labelTruncated\n ? ({ children }) => <SimpleTruncatedTooltipText value={children} />\n : React.Fragment;\n\n return (\n <StyledValuePillWrapper\n size={size}\n alignItems=\"center\"\n className=\"ds-pill-wrapper ds-pill-wrapper-value\"\n data-testid=\"ds-pill-wrapper\"\n aria-label={ariaLabel || label}\n cols={[iconLeft && 'min-content', 'auto'].filter((notFalse) => notFalse)}\n gutter=\"xxxs\"\n hasIcon={iconLeft !== null}\n >\n {iconLeft}\n {tooltipValue !== '' ? (\n <DSTooltipV2\n title={tooltipValue}\n triggerComponent={\n <StyledSpanWithTooltip className=\"ds-pill-tooltip-value\" tabIndex={0}>\n {label}\n </StyledSpanWithTooltip>\n }\n />\n ) : (\n <TextComponent>{label}</TextComponent>\n )}\n </StyledValuePillWrapper>\n );\n },\n);\n"],
|
|
5
|
-
"mappings": "AAAA;ACCA;AACA;AACA;AAEA;AAEO,MAAM,YAAY,OAAM,KAC7B,CAAC,EAAE,OAAO,MAAM,gBAAgB,cAAc,UAAU,gBAAgB;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/prop-types */\nimport React from 'react';\nimport { DSTooltipV2 } from '@elliemae/ds-tooltip';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport type { DSPillProps } from '../../index.d';\nimport { StyledSpanWithTooltip, StyledValuePillWrapper } from '../styled';\n\nexport const ValuePill = React.memo<DSPillProps>(\n ({ label, size, labelTruncated, disabled, tooltipValue, iconLeft, ariaLabel }) => {\n const TextComponent = labelTruncated\n ? ({ children }) => <SimpleTruncatedTooltipText value={children} />\n : React.Fragment;\n\n return (\n <StyledValuePillWrapper\n disabled={disabled}\n size={size}\n alignItems=\"center\"\n className=\"ds-pill-wrapper ds-pill-wrapper-value\"\n data-testid=\"ds-pill-wrapper\"\n aria-label={ariaLabel || label}\n cols={[iconLeft && 'min-content', 'auto'].filter((notFalse) => notFalse)}\n gutter=\"xxxs\"\n hasIcon={iconLeft !== null}\n >\n {iconLeft}\n {tooltipValue !== '' ? (\n <DSTooltipV2\n title={tooltipValue}\n triggerComponent={\n <StyledSpanWithTooltip className=\"ds-pill-tooltip-value\" tabIndex={0}>\n {label}\n </StyledSpanWithTooltip>\n }\n />\n ) : (\n <TextComponent>{label}</TextComponent>\n )}\n </StyledValuePillWrapper>\n );\n },\n);\n"],
|
|
5
|
+
"mappings": "AAAA;ACCA;AACA;AACA;AAEA;AAEO,MAAM,YAAY,OAAM,KAC7B,CAAC,EAAE,OAAO,MAAM,gBAAgB,UAAU,cAAc,UAAU,gBAAgB;AAChF,QAAM,gBAAgB,iBAClB,CAAC,EAAE,eAAe,qCAAC,4BAAD;AAAA,IAA4B,OAAO;AAAA,OACrD,OAAM;AAEV,SACE,qCAAC,wBAAD;AAAA,IACE;AAAA,IACA;AAAA,IACA,YAAW;AAAA,IACX,WAAU;AAAA,IACV,eAAY;AAAA,IACZ,cAAY,aAAa;AAAA,IACzB,MAAM,CAAC,YAAY,eAAe,QAAQ,OAAO,CAAC,aAAa;AAAA,IAC/D,QAAO;AAAA,IACP,SAAS,aAAa;AAAA,KAErB,UACA,iBAAiB,KAChB,qCAAC,aAAD;AAAA,IACE,OAAO;AAAA,IACP,kBACE,qCAAC,uBAAD;AAAA,MAAuB,WAAU;AAAA,MAAwB,UAAU;AAAA,OAChE;AAAA,OAKP,qCAAC,eAAD,MAAgB;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/props.js
CHANGED
package/dist/esm/props.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/props.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/explicit-module-boundary-types */\nimport { PropTypes } from 'react-desc';\nimport { DSInput } from '@elliemae/ds-form';\n\nconst pillTypes = PropTypes.oneOf(['label', 'value', 'input', 'dropdown', 'removable', 'readonly']);\n\nexport const DSPillV2PropTypes = {\n label: PropTypes.string.description('Label to show in the pill').isRequired,\n type: pillTypes.description('The type of pill that you want to render').isRequired,\n innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func])\n .description('Reference to the focuseable internal element of each pill (remove icons, inputs, dropdown, etc.)')\n .defaultValue(() => null),\n size: PropTypes.oneOf(['s', 'm']).description('Vertical pill size').defaultValue('m'),\n ariaLabel: PropTypes.string\n .description('Aria label for the pill. If not provided we will use the label')\n .defaultValue(''),\n labelTruncated: PropTypes.bool.description('Whether to truncate the pills label').defaultValue(true),\n tooltipValue: PropTypes.string.description('String to show as a tooltip in the value pill').defaultValue(''),\n iconLeft: PropTypes.node.description('A component to show int the left of a readonly pill').defaultValue(null),\n iconRight: PropTypes.node.description('A component to show in the right of a readonly pill').defaultValue(null),\n onRemove: PropTypes.func\n .description('Callback triggered when removing a pill with the close icon')\n .defaultValue(() => null),\n inputPlaceholder: PropTypes.string.description('Placeholder for the input pill').defaultValue(''),\n onInputChange: PropTypes.func\n .description('Callback triggered when user provides input to the input pill')\n .defaultValue(() => null),\n onInputClear: PropTypes.func\n .description('Callback triggered when the user clears an input pill')\n .defaultValue(() => null),\n inputWidth: PropTypes.number.description('Width in pixels for the input tag in the input pill').defaultValue(150),\n dropdownProps: PropTypes.object.description('Properties that will be used for the dropdown-menu').defaultValue({}),\n onDropdownClick: PropTypes.func\n .description('Callback when dropdown button is clicked or pressed')\n .defaultValue(() => null),\n};\n\nexport const DSPillButtonPropTypes = {\n type: PropTypes.oneOf(['only', 'left', 'right'])\n .description('The position in which this button will be placed. Only used for css styling internally')\n .defaultValue('right'),\n width: PropTypes.string.description('Width of the button').defaultValue('100%'),\n height: PropTypes.string.description('Height of the button').defaultValue('100%'),\n};\n\nexport const DSPillGroupPropTypes = {\n width: PropTypes.string.description('Width of the group').defaultValue('fit-content'),\n innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func])\n .description('Reference to the pill group wrapper')\n .defaultValue(() => null),\n};\n\nexport const DSPillV2DefaultProps = {\n innerRef: () => null,\n ariaLabel: '',\n size: 'm',\n labelTruncated: true,\n tooltipValue: '',\n iconLeft: null,\n iconRight: null,\n onRemove: () => null,\n inputPlaceholder: '',\n onInputChange: () => null,\n onInputClear: () => null,\n inputWidth: 72,\n inputRender: DSInput,\n dropdownProps: {},\n onDropdownClick: () => null,\n tabIndex: 0,\n};\n\nexport const DSPillButtonDefaultProps = {\n type: 'right',\n width: '100%',\n height: '100%',\n};\n\nexport const DSPillGroupDefaultProps = {\n width: 'fit-content',\n innerRef: () => null,\n};\n"],
|
|
5
|
-
"mappings": "AAAA;ACCA;AACA;AAEA,MAAM,YAAY,UAAU,MAAM,CAAC,SAAS,SAAS,SAAS,YAAY,aAAa;AAEhF,MAAM,oBAAoB;AAAA,EAC/B,OAAO,UAAU,OAAO,YAAY,6BAA6B;AAAA,EACjE,MAAM,UAAU,YAAY,4CAA4C;AAAA,EACxE,UAAU,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,OACxD,YAAY,oGACZ,aAAa,MAAM;AAAA,EACtB,MAAM,UAAU,MAAM,CAAC,KAAK,MAAM,YAAY,sBAAsB,aAAa;AAAA,EACjF,WAAW,UAAU,OAClB,YAAY,kEACZ,aAAa;AAAA,EAChB,gBAAgB,UAAU,KAAK,YAAY,uCAAuC,aAAa;AAAA,EAC/F,cAAc,UAAU,OAAO,YAAY,iDAAiD,aAAa;AAAA,EACzG,UAAU,UAAU,KAAK,YAAY,uDAAuD,aAAa;AAAA,EACzG,WAAW,UAAU,KAAK,YAAY,uDAAuD,aAAa;AAAA,EAC1G,UAAU,UAAU,KACjB,YAAY,+DACZ,aAAa,MAAM;AAAA,EACtB,kBAAkB,UAAU,OAAO,YAAY,kCAAkC,aAAa;AAAA,EAC9F,eAAe,UAAU,KACtB,YAAY,iEACZ,aAAa,MAAM;AAAA,EACtB,cAAc,UAAU,KACrB,YAAY,yDACZ,aAAa,MAAM;AAAA,EACtB,YAAY,UAAU,OAAO,YAAY,uDAAuD,aAAa;AAAA,EAC7G,eAAe,UAAU,OAAO,YAAY,sDAAsD,aAAa;AAAA,EAC/G,iBAAiB,UAAU,KACxB,YAAY,uDACZ,aAAa,MAAM;AAAA;AAGjB,MAAM,wBAAwB;AAAA,EACnC,MAAM,UAAU,MAAM,CAAC,QAAQ,QAAQ,UACpC,YAAY,0FACZ,aAAa;AAAA,EAChB,OAAO,UAAU,OAAO,YAAY,uBAAuB,aAAa;AAAA,EACxE,QAAQ,UAAU,OAAO,YAAY,wBAAwB,aAAa;AAAA;AAGrE,MAAM,uBAAuB;AAAA,EAClC,OAAO,UAAU,OAAO,YAAY,sBAAsB,aAAa;AAAA,EACvE,UAAU,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,OACxD,YAAY,uCACZ,aAAa,MAAM;AAAA;AAGjB,MAAM,uBAAuB;AAAA,EAClC,UAAU,MAAM;AAAA,EAChB,WAAW;AAAA,EACX,MAAM;AAAA,EACN,gBAAgB;AAAA,EAChB,cAAc;AAAA,EACd,UAAU;AAAA,EACV,WAAW;AAAA,EACX,UAAU,MAAM;AAAA,EAChB,kBAAkB;AAAA,EAClB,eAAe,MAAM;AAAA,EACrB,cAAc,MAAM;AAAA,EACpB,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,eAAe;AAAA,EACf,iBAAiB,MAAM;AAAA,EACvB,UAAU;AAAA;AAGL,MAAM,2BAA2B;AAAA,EACtC,MAAM;AAAA,EACN,OAAO;AAAA,EACP,QAAQ;AAAA;AAGH,MAAM,0BAA0B;AAAA,EACrC,OAAO;AAAA,EACP,UAAU,MAAM;AAAA;",
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/explicit-module-boundary-types */\nimport { PropTypes } from 'react-desc';\nimport { DSInput } from '@elliemae/ds-form';\n\nconst pillTypes = PropTypes.oneOf(['label', 'value', 'input', 'dropdown', 'removable', 'readonly']);\n\nexport const DSPillV2PropTypes = {\n label: PropTypes.string.description('Label to show in the pill').isRequired,\n type: pillTypes.description('The type of pill that you want to render').isRequired,\n innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func])\n .description('Reference to the focuseable internal element of each pill (remove icons, inputs, dropdown, etc.)')\n .defaultValue(() => null),\n size: PropTypes.oneOf(['s', 'm']).description('Vertical pill size').defaultValue('m'),\n ariaLabel: PropTypes.string\n .description('Aria label for the pill. If not provided we will use the label')\n .defaultValue(''),\n labelTruncated: PropTypes.bool.description('Whether to truncate the pills label').defaultValue(true),\n tooltipValue: PropTypes.string.description('String to show as a tooltip in the value pill').defaultValue(''),\n iconLeft: PropTypes.node.description('A component to show int the left of a readonly pill').defaultValue(null),\n iconRight: PropTypes.node.description('A component to show in the right of a readonly pill').defaultValue(null),\n onRemove: PropTypes.func\n .description('Callback triggered when removing a pill with the close icon')\n .defaultValue(() => null),\n inputPlaceholder: PropTypes.string.description('Placeholder for the input pill').defaultValue(''),\n onInputChange: PropTypes.func\n .description('Callback triggered when user provides input to the input pill')\n .defaultValue(() => null),\n onInputClear: PropTypes.func\n .description('Callback triggered when the user clears an input pill')\n .defaultValue(() => null),\n inputWidth: PropTypes.number.description('Width in pixels for the input tag in the input pill').defaultValue(150),\n dropdownProps: PropTypes.object.description('Properties that will be used for the dropdown-menu').defaultValue({}),\n onDropdownClick: PropTypes.func\n .description('Callback when dropdown button is clicked or pressed')\n .defaultValue(() => null),\n};\n\nexport const DSPillButtonPropTypes = {\n type: PropTypes.oneOf(['only', 'left', 'right'])\n .description('The position in which this button will be placed. Only used for css styling internally')\n .defaultValue('right'),\n width: PropTypes.string.description('Width of the button').defaultValue('100%'),\n height: PropTypes.string.description('Height of the button').defaultValue('100%'),\n};\n\nexport const DSPillGroupPropTypes = {\n width: PropTypes.string.description('Width of the group').defaultValue('fit-content'),\n innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func])\n .description('Reference to the pill group wrapper')\n .defaultValue(() => null),\n};\n\nexport const DSPillV2DefaultProps = {\n innerRef: () => null,\n disabled: false,\n ariaLabel: '',\n size: 'm',\n labelTruncated: true,\n tooltipValue: '',\n iconLeft: null,\n iconRight: null,\n onRemove: () => null,\n inputPlaceholder: '',\n onInputChange: () => null,\n onInputClear: () => null,\n inputWidth: 72,\n inputRender: DSInput,\n dropdownProps: {},\n onDropdownClick: () => null,\n tabIndex: 0,\n};\n\nexport const DSPillButtonDefaultProps = {\n type: 'right',\n width: '100%',\n height: '100%',\n};\n\nexport const DSPillGroupDefaultProps = {\n width: 'fit-content',\n innerRef: () => null,\n};\n"],
|
|
5
|
+
"mappings": "AAAA;ACCA;AACA;AAEA,MAAM,YAAY,UAAU,MAAM,CAAC,SAAS,SAAS,SAAS,YAAY,aAAa;AAEhF,MAAM,oBAAoB;AAAA,EAC/B,OAAO,UAAU,OAAO,YAAY,6BAA6B;AAAA,EACjE,MAAM,UAAU,YAAY,4CAA4C;AAAA,EACxE,UAAU,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,OACxD,YAAY,oGACZ,aAAa,MAAM;AAAA,EACtB,MAAM,UAAU,MAAM,CAAC,KAAK,MAAM,YAAY,sBAAsB,aAAa;AAAA,EACjF,WAAW,UAAU,OAClB,YAAY,kEACZ,aAAa;AAAA,EAChB,gBAAgB,UAAU,KAAK,YAAY,uCAAuC,aAAa;AAAA,EAC/F,cAAc,UAAU,OAAO,YAAY,iDAAiD,aAAa;AAAA,EACzG,UAAU,UAAU,KAAK,YAAY,uDAAuD,aAAa;AAAA,EACzG,WAAW,UAAU,KAAK,YAAY,uDAAuD,aAAa;AAAA,EAC1G,UAAU,UAAU,KACjB,YAAY,+DACZ,aAAa,MAAM;AAAA,EACtB,kBAAkB,UAAU,OAAO,YAAY,kCAAkC,aAAa;AAAA,EAC9F,eAAe,UAAU,KACtB,YAAY,iEACZ,aAAa,MAAM;AAAA,EACtB,cAAc,UAAU,KACrB,YAAY,yDACZ,aAAa,MAAM;AAAA,EACtB,YAAY,UAAU,OAAO,YAAY,uDAAuD,aAAa;AAAA,EAC7G,eAAe,UAAU,OAAO,YAAY,sDAAsD,aAAa;AAAA,EAC/G,iBAAiB,UAAU,KACxB,YAAY,uDACZ,aAAa,MAAM;AAAA;AAGjB,MAAM,wBAAwB;AAAA,EACnC,MAAM,UAAU,MAAM,CAAC,QAAQ,QAAQ,UACpC,YAAY,0FACZ,aAAa;AAAA,EAChB,OAAO,UAAU,OAAO,YAAY,uBAAuB,aAAa;AAAA,EACxE,QAAQ,UAAU,OAAO,YAAY,wBAAwB,aAAa;AAAA;AAGrE,MAAM,uBAAuB;AAAA,EAClC,OAAO,UAAU,OAAO,YAAY,sBAAsB,aAAa;AAAA,EACvE,UAAU,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,OACxD,YAAY,uCACZ,aAAa,MAAM;AAAA;AAGjB,MAAM,uBAAuB;AAAA,EAClC,UAAU,MAAM;AAAA,EAChB,UAAU;AAAA,EACV,WAAW;AAAA,EACX,MAAM;AAAA,EACN,gBAAgB;AAAA,EAChB,cAAc;AAAA,EACd,UAAU;AAAA,EACV,WAAW;AAAA,EACX,UAAU,MAAM;AAAA,EAChB,kBAAkB;AAAA,EAClB,eAAe,MAAM;AAAA,EACrB,cAAc,MAAM;AAAA,EACpB,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,eAAe;AAAA,EACf,iBAAiB,MAAM;AAAA,EACvB,UAAU;AAAA;AAGL,MAAM,2BAA2B;AAAA,EACtC,MAAM;AAAA,EACN,OAAO;AAAA,EACP,QAAQ;AAAA;AAGH,MAAM,0BAA0B;AAAA,EACrC,OAAO;AAAA,EACP,UAAU,MAAM;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-pills",
|
|
3
|
-
"version": "3.0.0-
|
|
3
|
+
"version": "3.0.0-next.3",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Pills",
|
|
6
6
|
"files": [
|
|
@@ -147,20 +147,20 @@
|
|
|
147
147
|
"indent": 4
|
|
148
148
|
},
|
|
149
149
|
"dependencies": {
|
|
150
|
-
"@elliemae/ds-button": "3.0.0-
|
|
151
|
-
"@elliemae/ds-classnames": "3.0.0-
|
|
152
|
-
"@elliemae/ds-dropdownmenu": "3.0.0-
|
|
153
|
-
"@elliemae/ds-form": "3.0.0-
|
|
154
|
-
"@elliemae/ds-grid": "3.0.0-
|
|
155
|
-
"@elliemae/ds-icons": "3.0.0-
|
|
156
|
-
"@elliemae/ds-modal": "3.0.0-
|
|
157
|
-
"@elliemae/ds-popover": "3.0.0-
|
|
158
|
-
"@elliemae/ds-props-helpers": "3.0.0-
|
|
159
|
-
"@elliemae/ds-shared": "3.0.0-
|
|
160
|
-
"@elliemae/ds-system": "3.0.0-
|
|
161
|
-
"@elliemae/ds-tooltip": "3.0.0-
|
|
162
|
-
"@elliemae/ds-truncated-tooltip-text": "3.0.0-
|
|
163
|
-
"@elliemae/ds-utilities": "3.0.0-
|
|
150
|
+
"@elliemae/ds-button": "3.0.0-next.3",
|
|
151
|
+
"@elliemae/ds-classnames": "3.0.0-next.3",
|
|
152
|
+
"@elliemae/ds-dropdownmenu": "3.0.0-next.3",
|
|
153
|
+
"@elliemae/ds-form": "3.0.0-next.3",
|
|
154
|
+
"@elliemae/ds-grid": "3.0.0-next.3",
|
|
155
|
+
"@elliemae/ds-icons": "3.0.0-next.3",
|
|
156
|
+
"@elliemae/ds-modal": "3.0.0-next.3",
|
|
157
|
+
"@elliemae/ds-popover": "3.0.0-next.3",
|
|
158
|
+
"@elliemae/ds-props-helpers": "3.0.0-next.3",
|
|
159
|
+
"@elliemae/ds-shared": "3.0.0-next.3",
|
|
160
|
+
"@elliemae/ds-system": "3.0.0-next.3",
|
|
161
|
+
"@elliemae/ds-tooltip": "3.0.0-next.3",
|
|
162
|
+
"@elliemae/ds-truncated-tooltip-text": "3.0.0-next.3",
|
|
163
|
+
"@elliemae/ds-utilities": "3.0.0-next.3",
|
|
164
164
|
"prop-types": "~15.7.2",
|
|
165
165
|
"react-desc": "~4.1.3",
|
|
166
166
|
"uid": "~2.0.0"
|