@elliemae/ds-pills 3.12.0-rc.0 → 3.12.0-rc.2
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/types/DropdownPill.js +1 -10
- package/dist/cjs/components/types/DropdownPill.js.map +2 -2
- package/dist/cjs/components/types/InputPill.js +1 -1
- package/dist/cjs/components/types/InputPill.js.map +2 -2
- package/dist/cjs/components/types/RemovablePill.js +9 -20
- package/dist/cjs/components/types/RemovablePill.js.map +2 -2
- package/dist/esm/components/types/DropdownPill.js +2 -11
- package/dist/esm/components/types/DropdownPill.js.map +2 -2
- package/dist/esm/components/types/InputPill.js +1 -1
- package/dist/esm/components/types/InputPill.js.map +2 -2
- package/dist/esm/components/types/RemovablePill.js +10 -21
- package/dist/esm/components/types/RemovablePill.js.map +2 -2
- package/package.json +16 -16
|
@@ -44,15 +44,6 @@ const DropdownPill = import_react.default.memo(
|
|
|
44
44
|
const TextComponent = labelTruncated ? ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_truncated_tooltip_text.SimpleTruncatedTooltipText, {
|
|
45
45
|
value: children
|
|
46
46
|
}) : import_react.default.Fragment;
|
|
47
|
-
const handleOnClick = (0, import_react.useCallback)(
|
|
48
|
-
(e, ...args) => {
|
|
49
|
-
if (e.type === "click") {
|
|
50
|
-
e.preventDefault();
|
|
51
|
-
onDropdownClick(e, ...args);
|
|
52
|
-
}
|
|
53
|
-
},
|
|
54
|
-
[onDropdownClick]
|
|
55
|
-
);
|
|
56
47
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styled.StyledDropdownPillWrapper, {
|
|
57
48
|
size,
|
|
58
49
|
id: pillUid,
|
|
@@ -90,7 +81,7 @@ const DropdownPill = import_react.default.memo(
|
|
|
90
81
|
innerRef: (0, import_utils.setMultipleRefs)(chevronRef, innerRef),
|
|
91
82
|
"aria-label": ariaLabel || label,
|
|
92
83
|
type: "right",
|
|
93
|
-
onClick:
|
|
84
|
+
onClick: onDropdownClick,
|
|
94
85
|
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.ChevronSmallDown, {
|
|
95
86
|
color: ["brand-primary", "800"],
|
|
96
87
|
width: 20,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/components/types/DropdownPill.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable react/prop-types */\nimport React, { useMemo, useRef, useCallback } from 'react';\nimport { DSDropdownMenuV2 } from '@elliemae/ds-dropdownmenu';\nimport { uid } from 'uid';\nimport { ChevronSmallDown } from '@elliemae/ds-icons';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport { StyledDropdownPillWrapper } from '../styled';\nimport type { DSPillProps } from '../../index.d';\nimport { setMultipleRefs } from '../../utils';\nimport { DSPillButton } from '../PillButton';\n\nexport const DropdownPill = React.memo<DSPillProps>(\n ({ label, size, labelTruncated, dropdownProps, innerRef, ariaLabel, onDropdownClick }) => {\n const chevronRef = useRef(null);\n\n const pillUid = useMemo(() => `ds-pill-${uid()}`, []);\n\n const TextComponent = labelTruncated\n ? ({ children }) => <SimpleTruncatedTooltipText value={children} />\n : React.Fragment;\n
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADkBG;AAjB1B,mBAAoD;AACpD,6BAAiC;AACjC,iBAAoB;AACpB,sBAAiC;AACjC,uCAA2C;AAC3C,oBAA0C;AAE1C,mBAAgC;AAChC,wBAA6B;AAEtB,MAAM,eAAe,aAAAA,QAAM;AAAA,EAChC,CAAC,EAAE,OAAO,MAAM,gBAAgB,eAAe,UAAU,WAAW,gBAAgB,MAAM;AACxF,UAAM,iBAAa,qBAAO,IAAI;AAE9B,UAAM,cAAU,sBAAQ,MAAM,eAAW,gBAAI,KAAK,CAAC,CAAC;AAEpD,UAAM,gBAAgB,iBAClB,CAAC,EAAE,SAAS,MAAM,4CAAC;AAAA,MAA2B,OAAO;AAAA,KAAU,IAC/D,aAAAA,QAAM;
|
|
4
|
+
"sourcesContent": ["/* eslint-disable react/prop-types */\nimport React, { useMemo, useRef, useCallback } from 'react';\nimport { DSDropdownMenuV2 } from '@elliemae/ds-dropdownmenu';\nimport { uid } from 'uid';\nimport { ChevronSmallDown } from '@elliemae/ds-icons';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport { StyledDropdownPillWrapper } from '../styled';\nimport type { DSPillProps } from '../../index.d';\nimport { setMultipleRefs } from '../../utils';\nimport { DSPillButton } from '../PillButton';\n\nexport const DropdownPill = React.memo<DSPillProps>(\n ({ label, size, labelTruncated, dropdownProps, innerRef, ariaLabel, onDropdownClick }) => {\n const chevronRef = useRef(null);\n\n const pillUid = useMemo(() => `ds-pill-${uid()}`, []);\n\n const TextComponent = labelTruncated\n ? ({ children }) => <SimpleTruncatedTooltipText value={children} />\n : React.Fragment;\n\n return (\n <StyledDropdownPillWrapper\n size={size}\n id={pillUid}\n className=\"ds-pill-wrapper ds-pill-wrapper-dropdown\"\n data-testid=\"ds-pill-wrapper\"\n cols={['auto', '24px']}\n gutter=\"2px\"\n alignItems=\"center\"\n justifyItems=\"center\"\n >\n <TextComponent>{label}</TextComponent>\n <DSDropdownMenuV2\n placementOrderPreference={[\n 'bottom-start',\n 'bottom',\n 'bottom-end',\n 'right-end',\n 'top-start',\n 'top',\n 'top-end',\n ]}\n {...dropdownProps}\n onClickOutside={(e) => {\n if (e.code === 'Escape') chevronRef.current.focus();\n if (dropdownProps.onClickOutside) dropdownProps.onClickOutside(e);\n }}\n wrapperStyles={{ w: '100%', h: '100%' }}\n >\n <DSPillButton\n className=\"ds-pill-focus-point\"\n data-testid=\"ds-pill-dropdown-chevron\"\n innerRef={setMultipleRefs(chevronRef, innerRef)}\n aria-label={ariaLabel || label}\n type=\"right\"\n onClick={onDropdownClick}\n >\n <ChevronSmallDown color={['brand-primary', '800']} width={20} height={20} />\n </DSPillButton>\n </DSDropdownMenuV2>\n </StyledDropdownPillWrapper>\n );\n },\n);\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADkBG;AAjB1B,mBAAoD;AACpD,6BAAiC;AACjC,iBAAoB;AACpB,sBAAiC;AACjC,uCAA2C;AAC3C,oBAA0C;AAE1C,mBAAgC;AAChC,wBAA6B;AAEtB,MAAM,eAAe,aAAAA,QAAM;AAAA,EAChC,CAAC,EAAE,OAAO,MAAM,gBAAgB,eAAe,UAAU,WAAW,gBAAgB,MAAM;AACxF,UAAM,iBAAa,qBAAO,IAAI;AAE9B,UAAM,cAAU,sBAAQ,MAAM,eAAW,gBAAI,KAAK,CAAC,CAAC;AAEpD,UAAM,gBAAgB,iBAClB,CAAC,EAAE,SAAS,MAAM,4CAAC;AAAA,MAA2B,OAAO;AAAA,KAAU,IAC/D,aAAAA,QAAM;AAEV,WACE,6CAAC;AAAA,MACC;AAAA,MACA,IAAI;AAAA,MACJ,WAAU;AAAA,MACV,eAAY;AAAA,MACZ,MAAM,CAAC,QAAQ,MAAM;AAAA,MACrB,QAAO;AAAA,MACP,YAAW;AAAA,MACX,cAAa;AAAA,MAEb;AAAA,oDAAC;AAAA,UAAe;AAAA,SAAM;AAAA,QACtB,4CAAC;AAAA,UACC,0BAA0B;AAAA,YACxB;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,UACF;AAAA,UACC,GAAG;AAAA,UACJ,gBAAgB,CAAC,MAAM;AACrB,gBAAI,EAAE,SAAS;AAAU,yBAAW,QAAQ,MAAM;AAClD,gBAAI,cAAc;AAAgB,4BAAc,eAAe,CAAC;AAAA,UAClE;AAAA,UACA,eAAe,EAAE,GAAG,QAAQ,GAAG,OAAO;AAAA,UAEtC,sDAAC;AAAA,YACC,WAAU;AAAA,YACV,eAAY;AAAA,YACZ,cAAU,8BAAgB,YAAY,QAAQ;AAAA,YAC9C,cAAY,aAAa;AAAA,YACzB,MAAK;AAAA,YACL,SAAS;AAAA,YAET,sDAAC;AAAA,cAAiB,OAAO,CAAC,iBAAiB,KAAK;AAAA,cAAG,OAAO;AAAA,cAAI,QAAQ;AAAA,aAAI;AAAA,WAC5E;AAAA,SACF;AAAA;AAAA,KACF;AAAA,EAEJ;AACF;",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -53,7 +53,7 @@ const InputPill = import_react.default.memo(
|
|
|
53
53
|
const pillUid = (0, import_react.useMemo)(() => inputId ?? `ds-pill-${(0, import_uid.uid)()}`, []);
|
|
54
54
|
const onCloseIconClick = (0, import_react.useCallback)(
|
|
55
55
|
(e) => {
|
|
56
|
-
if (
|
|
56
|
+
if ([void 0, "Enter", "Space"].includes(e.code)) {
|
|
57
57
|
e.preventDefault();
|
|
58
58
|
onInputClear(e);
|
|
59
59
|
ref.current.focus();
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/components/types/InputPill.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable react/prop-types */\nimport React, { useCallback, useMemo, useRef, useState } from 'react';\nimport { uid } from 'uid';\nimport { CloseXsmall } from '@elliemae/ds-icons';\nimport type { DSPillProps } from '../../index.d';\nimport { StyledInputPillWrapper } from '../styled';\nimport { setMultipleRefs } from '../../utils';\nimport { DSPillButton } from '../PillButton';\n\nexport const InputPill = React.memo<DSPillProps>(\n ({\n label,\n size,\n inputPlaceholder,\n inputWidth,\n inputRender,\n onInputChange,\n onInputClear,\n innerRef,\n hasError,\n inputId,\n }) => {\n const ref = useRef<HTMLElement>(null);\n\n const InputComponent = useMemo(() => inputRender, [inputRender]);\n\n const pillUid = useMemo(() => inputId ?? `ds-pill-${uid()}`, []);\n\n const onCloseIconClick: React.MouseEventHandler & React.KeyboardEventHandler = useCallback(\n (e) => {\n if (
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD0CjB;AAzCN,mBAA8D;AAC9D,iBAAoB;AACpB,sBAA4B;AAE5B,oBAAuC;AACvC,mBAAgC;AAChC,wBAA6B;AAEtB,MAAM,YAAY,aAAAA,QAAM;AAAA,EAC7B,CAAC;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,MAAM;AACJ,UAAM,UAAM,qBAAoB,IAAI;AAEpC,UAAM,qBAAiB,sBAAQ,MAAM,aAAa,CAAC,WAAW,CAAC;AAE/D,UAAM,cAAU,sBAAQ,MAAM,WAAW,eAAW,gBAAI,KAAK,CAAC,CAAC;AAE/D,UAAM,uBAAyE;AAAA,MAC7E,CAAC,MAAM;AACL,YAAI,EAAE,SAAS,
|
|
4
|
+
"sourcesContent": ["/* eslint-disable react/prop-types */\nimport React, { useCallback, useMemo, useRef, useState } from 'react';\nimport { uid } from 'uid';\nimport { CloseXsmall } from '@elliemae/ds-icons';\nimport type { DSPillProps } from '../../index.d';\nimport { StyledInputPillWrapper } from '../styled';\nimport { setMultipleRefs } from '../../utils';\nimport { DSPillButton } from '../PillButton';\n\nexport const InputPill = React.memo<DSPillProps>(\n ({\n label,\n size,\n inputPlaceholder,\n inputWidth,\n inputRender,\n onInputChange,\n onInputClear,\n innerRef,\n hasError,\n inputId,\n }) => {\n const ref = useRef<HTMLElement>(null);\n\n const InputComponent = useMemo(() => inputRender, [inputRender]);\n\n const pillUid = useMemo(() => inputId ?? `ds-pill-${uid()}`, []);\n\n const onCloseIconClick: React.MouseEventHandler & React.KeyboardEventHandler = useCallback(\n (e) => {\n if ([undefined, 'Enter', 'Space'].includes(e.code)) {\n e.preventDefault();\n onInputClear(e);\n ref.current.focus();\n }\n },\n [onInputClear],\n );\n\n const [inputHasFocus, setInputHasFocus] = useState(false);\n\n return (\n <StyledInputPillWrapper\n size={size}\n className=\"ds-pill-wrapper\"\n data-testid=\"ds-pill-wrapper\"\n cols={label === '' ? ['auto'] : ['auto', '24px']}\n inputWidth={inputWidth}\n value={label}\n inputHasFocus={inputHasFocus}\n hasError={hasError}\n >\n <InputComponent\n id={pillUid}\n className=\"ds-pill-focus-point\"\n data-testid=\"ds-pill-input\"\n innerRef={setMultipleRefs(ref, innerRef)}\n value={label}\n onChange={onInputChange}\n placeholder={inputPlaceholder}\n onFocus={() => setInputHasFocus(true)}\n onBlur={() => setInputHasFocus(false)}\n disableTooltip={false}\n />\n {label !== '' && (\n <DSPillButton\n id={pillUid}\n data-testid=\"ds-pill-clear-icon\"\n innerRef={innerRef}\n onClick={onCloseIconClick}\n // onKeyDown={onCloseIconClick} // button v2 now triggers click on key down already\n aria-label=\"Clear input\"\n type=\"right\"\n >\n <CloseXsmall size=\"s\" color={['brand-primary', '700']} />\n </DSPillButton>\n )}\n </StyledInputPillWrapper>\n );\n },\n);\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD0CjB;AAzCN,mBAA8D;AAC9D,iBAAoB;AACpB,sBAA4B;AAE5B,oBAAuC;AACvC,mBAAgC;AAChC,wBAA6B;AAEtB,MAAM,YAAY,aAAAA,QAAM;AAAA,EAC7B,CAAC;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,MAAM;AACJ,UAAM,UAAM,qBAAoB,IAAI;AAEpC,UAAM,qBAAiB,sBAAQ,MAAM,aAAa,CAAC,WAAW,CAAC;AAE/D,UAAM,cAAU,sBAAQ,MAAM,WAAW,eAAW,gBAAI,KAAK,CAAC,CAAC;AAE/D,UAAM,uBAAyE;AAAA,MAC7E,CAAC,MAAM;AACL,YAAI,CAAC,QAAW,SAAS,OAAO,EAAE,SAAS,EAAE,IAAI,GAAG;AAClD,YAAE,eAAe;AACjB,uBAAa,CAAC;AACd,cAAI,QAAQ,MAAM;AAAA,QACpB;AAAA,MACF;AAAA,MACA,CAAC,YAAY;AAAA,IACf;AAEA,UAAM,CAAC,eAAe,gBAAgB,QAAI,uBAAS,KAAK;AAExD,WACE,6CAAC;AAAA,MACC;AAAA,MACA,WAAU;AAAA,MACV,eAAY;AAAA,MACZ,MAAM,UAAU,KAAK,CAAC,MAAM,IAAI,CAAC,QAAQ,MAAM;AAAA,MAC/C;AAAA,MACA,OAAO;AAAA,MACP;AAAA,MACA;AAAA,MAEA;AAAA,oDAAC;AAAA,UACC,IAAI;AAAA,UACJ,WAAU;AAAA,UACV,eAAY;AAAA,UACZ,cAAU,8BAAgB,KAAK,QAAQ;AAAA,UACvC,OAAO;AAAA,UACP,UAAU;AAAA,UACV,aAAa;AAAA,UACb,SAAS,MAAM,iBAAiB,IAAI;AAAA,UACpC,QAAQ,MAAM,iBAAiB,KAAK;AAAA,UACpC,gBAAgB;AAAA,SAClB;AAAA,QACC,UAAU,MACT,4CAAC;AAAA,UACC,IAAI;AAAA,UACJ,eAAY;AAAA,UACZ;AAAA,UACA,SAAS;AAAA,UAET,cAAW;AAAA,UACX,MAAK;AAAA,UAEL,sDAAC;AAAA,YAAY,MAAK;AAAA,YAAI,OAAO,CAAC,iBAAiB,KAAK;AAAA,WAAG;AAAA,SACzD;AAAA;AAAA,KAEJ;AAAA,EAEJ;AACF;",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -36,18 +36,20 @@ var import_ds_truncated_tooltip_text = require("@elliemae/ds-truncated-tooltip-t
|
|
|
36
36
|
var import_styled = require("../styled");
|
|
37
37
|
var import_PillGroup = require("../PillGroup");
|
|
38
38
|
var import_PillButton = require("../PillButton");
|
|
39
|
-
const noopKeyboardRemove = (_pillUid) => {
|
|
40
|
-
};
|
|
41
39
|
const RemovablePill = import_react.default.memo(
|
|
42
40
|
({ label, size, disabled, labelTruncated, onRemove, innerRef, ariaLabel, tabIndex }) => {
|
|
43
41
|
const { onKeyboardRemove, onKeyboardNavigation } = (0, import_react.useContext)(import_PillGroup.DSPillGroupV2Context);
|
|
44
42
|
const pillUid = (0, import_react.useMemo)(() => `ds-pill-${(0, import_uid.uid)()}`, []);
|
|
45
|
-
const postponedKeyboardRemove = (0, import_react.useRef)(noopKeyboardRemove);
|
|
46
43
|
const TextComponent = labelTruncated ? ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_truncated_tooltip_text.SimpleTruncatedTooltipText, {
|
|
47
44
|
value: children
|
|
48
45
|
}) : import_react.default.Fragment;
|
|
49
|
-
const
|
|
46
|
+
const onKeyDown = (0, import_react.useCallback)(
|
|
50
47
|
(e) => {
|
|
48
|
+
if (["Enter", "Space"].includes(e.code)) {
|
|
49
|
+
e.preventDefault();
|
|
50
|
+
if (onKeyboardRemove)
|
|
51
|
+
onKeyboardRemove(pillUid);
|
|
52
|
+
}
|
|
51
53
|
if (e.code === "ArrowLeft") {
|
|
52
54
|
e.preventDefault();
|
|
53
55
|
if (onKeyboardNavigation)
|
|
@@ -59,20 +61,7 @@ const RemovablePill = import_react.default.memo(
|
|
|
59
61
|
onKeyboardNavigation(pillUid, 1, e);
|
|
60
62
|
}
|
|
61
63
|
},
|
|
62
|
-
[onKeyboardNavigation, pillUid]
|
|
63
|
-
);
|
|
64
|
-
const handleOnClick = (0, import_react.useCallback)(
|
|
65
|
-
(e) => {
|
|
66
|
-
if (e.type === "keydown") {
|
|
67
|
-
postponedKeyboardRemove.current = onKeyboardRemove;
|
|
68
|
-
}
|
|
69
|
-
if (e.type === "click") {
|
|
70
|
-
onRemove(e);
|
|
71
|
-
postponedKeyboardRemove.current(pillUid);
|
|
72
|
-
postponedKeyboardRemove.current = noopKeyboardRemove;
|
|
73
|
-
}
|
|
74
|
-
},
|
|
75
|
-
[onKeyboardRemove, onRemove, pillUid]
|
|
64
|
+
[onKeyboardRemove, onRemove, onKeyboardNavigation, pillUid]
|
|
76
65
|
);
|
|
77
66
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styled.StyledRemovablePillWrapper, {
|
|
78
67
|
size,
|
|
@@ -93,8 +82,8 @@ const RemovablePill = import_react.default.memo(
|
|
|
93
82
|
id: pillUid,
|
|
94
83
|
"data-testid": "ds-pill-close-icon",
|
|
95
84
|
innerRef,
|
|
96
|
-
onClick:
|
|
97
|
-
onKeyDown
|
|
85
|
+
onClick: onRemove,
|
|
86
|
+
onKeyDown,
|
|
98
87
|
"aria-label": `Remove ${label}`,
|
|
99
88
|
type: "right",
|
|
100
89
|
tabIndex,
|
|
@@ -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
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
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 }\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;AAAA;ACAA,YAAuB;ADgBG;AAf1B,mBAAwD;AACxD,iBAAoB;AACpB,sBAA4B;AAC5B,uCAA2C;AAE3C,oBAA2C;AAC3C,uBAAqC;AACrC,wBAA6B;AAEtB,MAAM,gBAAgB,aAAAA,QAAM;AAAA,EACjC,CAAC,EAAE,OAAO,MAAM,UAAU,gBAAgB,UAAU,UAAU,WAAW,SAAS,MAAM;AACtF,UAAM,EAAE,kBAAkB,qBAAqB,QAAI,yBAAW,qCAAoB;AAClF,UAAM,cAAU,sBAAQ,MAAM,eAAW,gBAAI,KAAK,CAAC,CAAC;AAEpD,UAAM,gBAAgB,iBAClB,CAAC,EAAE,SAAS,MAAM,4CAAC;AAAA,MAA2B,OAAO;AAAA,KAAU,IAC/D,aAAAA,QAAM;AAEV,UAAM,gBAAY;AAAA,MAChB,CAAC,MAAqB;AACpB,YAAI,CAAC,SAAS,OAAO,EAAE,SAAS,EAAE,IAAI,GAAG;AACvC,YAAE,eAAe;AACjB,cAAI;AAAkB,6BAAiB,OAAO;AAAA,QAChD;AACA,YAAI,EAAE,SAAS,aAAa;AAC1B,YAAE,eAAe;AACjB,cAAI;AAAsB,iCAAqB,SAAS,IAAI,CAAC;AAAA,QAC/D;AACA,YAAI,EAAE,SAAS,cAAc;AAC3B,YAAE,eAAe;AACjB,cAAI;AAAsB,iCAAqB,SAAS,GAAG,CAAC;AAAA,QAC9D;AAAA,MACF;AAAA,MACA,CAAC,kBAAkB,UAAU,sBAAsB,OAAO;AAAA,IAC5D;AAEA,WACE,6CAAC;AAAA,MACC;AAAA,MACA,MAAM,CAAC,QAAQ,MAAM;AAAA,MACrB,QAAO;AAAA,MACP,YAAW;AAAA,MACX,cAAa;AAAA,MACb,WAAU;AAAA,MACV,eAAY;AAAA,MACZ,cAAY,aAAa;AAAA,MAEzB;AAAA,oDAAC;AAAA,UAAe;AAAA,SAAM;AAAA,QACtB;AAAA,UACG,WAAC,WACA,4CAAC;AAAA,YACC,WAAU;AAAA,YACV,IAAI;AAAA,YACJ,eAAY;AAAA,YACZ;AAAA,YACA,SAAS;AAAA,YACT;AAAA,YACA,cAAY,UAAU;AAAA,YACtB,MAAK;AAAA,YACL;AAAA,YAEA,sDAAC;AAAA,cACC,OAAO,SAAS,MAAM,KAAK;AAAA,cAC3B,QAAQ,SAAS,MAAM,KAAK;AAAA,cAC5B,OAAO,CAAC,iBAAiB,KAAK;AAAA,aAChC;AAAA,WACF,IACE;AAAA,SACN;AAAA;AAAA,KACF;AAAA,EAEJ;AACF;",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
3
|
-
import React2, { useMemo, useRef
|
|
3
|
+
import React2, { useMemo, useRef } from "react";
|
|
4
4
|
import { DSDropdownMenuV2 } from "@elliemae/ds-dropdownmenu";
|
|
5
5
|
import { uid } from "uid";
|
|
6
6
|
import { ChevronSmallDown } from "@elliemae/ds-icons";
|
|
@@ -15,15 +15,6 @@ const DropdownPill = React2.memo(
|
|
|
15
15
|
const TextComponent = labelTruncated ? ({ children }) => /* @__PURE__ */ jsx(SimpleTruncatedTooltipText, {
|
|
16
16
|
value: children
|
|
17
17
|
}) : React2.Fragment;
|
|
18
|
-
const handleOnClick = useCallback(
|
|
19
|
-
(e, ...args) => {
|
|
20
|
-
if (e.type === "click") {
|
|
21
|
-
e.preventDefault();
|
|
22
|
-
onDropdownClick(e, ...args);
|
|
23
|
-
}
|
|
24
|
-
},
|
|
25
|
-
[onDropdownClick]
|
|
26
|
-
);
|
|
27
18
|
return /* @__PURE__ */ jsxs(StyledDropdownPillWrapper, {
|
|
28
19
|
size,
|
|
29
20
|
id: pillUid,
|
|
@@ -61,7 +52,7 @@ const DropdownPill = React2.memo(
|
|
|
61
52
|
innerRef: setMultipleRefs(chevronRef, innerRef),
|
|
62
53
|
"aria-label": ariaLabel || label,
|
|
63
54
|
type: "right",
|
|
64
|
-
onClick:
|
|
55
|
+
onClick: onDropdownClick,
|
|
65
56
|
children: /* @__PURE__ */ jsx(ChevronSmallDown, {
|
|
66
57
|
color: ["brand-primary", "800"],
|
|
67
58
|
width: 20,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/components/types/DropdownPill.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/prop-types */\nimport React, { useMemo, useRef, useCallback } from 'react';\nimport { DSDropdownMenuV2 } from '@elliemae/ds-dropdownmenu';\nimport { uid } from 'uid';\nimport { ChevronSmallDown } from '@elliemae/ds-icons';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport { StyledDropdownPillWrapper } from '../styled';\nimport type { DSPillProps } from '../../index.d';\nimport { setMultipleRefs } from '../../utils';\nimport { DSPillButton } from '../PillButton';\n\nexport const DropdownPill = React.memo<DSPillProps>(\n ({ label, size, labelTruncated, dropdownProps, innerRef, ariaLabel, onDropdownClick }) => {\n const chevronRef = useRef(null);\n\n const pillUid = useMemo(() => `ds-pill-${uid()}`, []);\n\n const TextComponent = labelTruncated\n ? ({ children }) => <SimpleTruncatedTooltipText value={children} />\n : React.Fragment;\n
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACkBG,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/prop-types */\nimport React, { useMemo, useRef, useCallback } from 'react';\nimport { DSDropdownMenuV2 } from '@elliemae/ds-dropdownmenu';\nimport { uid } from 'uid';\nimport { ChevronSmallDown } from '@elliemae/ds-icons';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport { StyledDropdownPillWrapper } from '../styled';\nimport type { DSPillProps } from '../../index.d';\nimport { setMultipleRefs } from '../../utils';\nimport { DSPillButton } from '../PillButton';\n\nexport const DropdownPill = React.memo<DSPillProps>(\n ({ label, size, labelTruncated, dropdownProps, innerRef, ariaLabel, onDropdownClick }) => {\n const chevronRef = useRef(null);\n\n const pillUid = useMemo(() => `ds-pill-${uid()}`, []);\n\n const TextComponent = labelTruncated\n ? ({ children }) => <SimpleTruncatedTooltipText value={children} />\n : React.Fragment;\n\n return (\n <StyledDropdownPillWrapper\n size={size}\n id={pillUid}\n className=\"ds-pill-wrapper ds-pill-wrapper-dropdown\"\n data-testid=\"ds-pill-wrapper\"\n cols={['auto', '24px']}\n gutter=\"2px\"\n alignItems=\"center\"\n justifyItems=\"center\"\n >\n <TextComponent>{label}</TextComponent>\n <DSDropdownMenuV2\n placementOrderPreference={[\n 'bottom-start',\n 'bottom',\n 'bottom-end',\n 'right-end',\n 'top-start',\n 'top',\n 'top-end',\n ]}\n {...dropdownProps}\n onClickOutside={(e) => {\n if (e.code === 'Escape') chevronRef.current.focus();\n if (dropdownProps.onClickOutside) dropdownProps.onClickOutside(e);\n }}\n wrapperStyles={{ w: '100%', h: '100%' }}\n >\n <DSPillButton\n className=\"ds-pill-focus-point\"\n data-testid=\"ds-pill-dropdown-chevron\"\n innerRef={setMultipleRefs(chevronRef, innerRef)}\n aria-label={ariaLabel || label}\n type=\"right\"\n onClick={onDropdownClick}\n >\n <ChevronSmallDown color={['brand-primary', '800']} width={20} height={20} />\n </DSPillButton>\n </DSDropdownMenuV2>\n </StyledDropdownPillWrapper>\n );\n },\n);\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACkBG,cAIpB,YAJoB;AAjB1B,OAAOA,UAAS,SAAS,cAA2B;AACpD,SAAS,wBAAwB;AACjC,SAAS,WAAW;AACpB,SAAS,wBAAwB;AACjC,SAAS,kCAAkC;AAC3C,SAAS,iCAAiC;AAE1C,SAAS,uBAAuB;AAChC,SAAS,oBAAoB;AAEtB,MAAM,eAAeA,OAAM;AAAA,EAChC,CAAC,EAAE,OAAO,MAAM,gBAAgB,eAAe,UAAU,WAAW,gBAAgB,MAAM;AACxF,UAAM,aAAa,OAAO,IAAI;AAE9B,UAAM,UAAU,QAAQ,MAAM,WAAW,IAAI,KAAK,CAAC,CAAC;AAEpD,UAAM,gBAAgB,iBAClB,CAAC,EAAE,SAAS,MAAM,oBAAC;AAAA,MAA2B,OAAO;AAAA,KAAU,IAC/DA,OAAM;AAEV,WACE,qBAAC;AAAA,MACC;AAAA,MACA,IAAI;AAAA,MACJ,WAAU;AAAA,MACV,eAAY;AAAA,MACZ,MAAM,CAAC,QAAQ,MAAM;AAAA,MACrB,QAAO;AAAA,MACP,YAAW;AAAA,MACX,cAAa;AAAA,MAEb;AAAA,4BAAC;AAAA,UAAe;AAAA,SAAM;AAAA,QACtB,oBAAC;AAAA,UACC,0BAA0B;AAAA,YACxB;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,UACF;AAAA,UACC,GAAG;AAAA,UACJ,gBAAgB,CAAC,MAAM;AACrB,gBAAI,EAAE,SAAS;AAAU,yBAAW,QAAQ,MAAM;AAClD,gBAAI,cAAc;AAAgB,4BAAc,eAAe,CAAC;AAAA,UAClE;AAAA,UACA,eAAe,EAAE,GAAG,QAAQ,GAAG,OAAO;AAAA,UAEtC,8BAAC;AAAA,YACC,WAAU;AAAA,YACV,eAAY;AAAA,YACZ,UAAU,gBAAgB,YAAY,QAAQ;AAAA,YAC9C,cAAY,aAAa;AAAA,YACzB,MAAK;AAAA,YACL,SAAS;AAAA,YAET,8BAAC;AAAA,cAAiB,OAAO,CAAC,iBAAiB,KAAK;AAAA,cAAG,OAAO;AAAA,cAAI,QAAQ;AAAA,aAAI;AAAA,WAC5E;AAAA,SACF;AAAA;AAAA,KACF;AAAA,EAEJ;AACF;",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -24,7 +24,7 @@ const InputPill = React2.memo(
|
|
|
24
24
|
const pillUid = useMemo(() => inputId ?? `ds-pill-${uid()}`, []);
|
|
25
25
|
const onCloseIconClick = useCallback(
|
|
26
26
|
(e) => {
|
|
27
|
-
if (
|
|
27
|
+
if ([void 0, "Enter", "Space"].includes(e.code)) {
|
|
28
28
|
e.preventDefault();
|
|
29
29
|
onInputClear(e);
|
|
30
30
|
ref.current.focus();
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/components/types/InputPill.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/prop-types */\nimport React, { useCallback, useMemo, useRef, useState } from 'react';\nimport { uid } from 'uid';\nimport { CloseXsmall } from '@elliemae/ds-icons';\nimport type { DSPillProps } from '../../index.d';\nimport { StyledInputPillWrapper } from '../styled';\nimport { setMultipleRefs } from '../../utils';\nimport { DSPillButton } from '../PillButton';\n\nexport const InputPill = React.memo<DSPillProps>(\n ({\n label,\n size,\n inputPlaceholder,\n inputWidth,\n inputRender,\n onInputChange,\n onInputClear,\n innerRef,\n hasError,\n inputId,\n }) => {\n const ref = useRef<HTMLElement>(null);\n\n const InputComponent = useMemo(() => inputRender, [inputRender]);\n\n const pillUid = useMemo(() => inputId ?? `ds-pill-${uid()}`, []);\n\n const onCloseIconClick: React.MouseEventHandler & React.KeyboardEventHandler = useCallback(\n (e) => {\n if (
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;AC0CjB,SAUE,KAVF;AAzCN,OAAOA,UAAS,aAAa,SAAS,QAAQ,gBAAgB;AAC9D,SAAS,WAAW;AACpB,SAAS,mBAAmB;AAE5B,SAAS,8BAA8B;AACvC,SAAS,uBAAuB;AAChC,SAAS,oBAAoB;AAEtB,MAAM,YAAYA,OAAM;AAAA,EAC7B,CAAC;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,MAAM;AACJ,UAAM,MAAM,OAAoB,IAAI;AAEpC,UAAM,iBAAiB,QAAQ,MAAM,aAAa,CAAC,WAAW,CAAC;AAE/D,UAAM,UAAU,QAAQ,MAAM,WAAW,WAAW,IAAI,KAAK,CAAC,CAAC;AAE/D,UAAM,mBAAyE;AAAA,MAC7E,CAAC,MAAM;AACL,YAAI,EAAE,SAAS,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/prop-types */\nimport React, { useCallback, useMemo, useRef, useState } from 'react';\nimport { uid } from 'uid';\nimport { CloseXsmall } from '@elliemae/ds-icons';\nimport type { DSPillProps } from '../../index.d';\nimport { StyledInputPillWrapper } from '../styled';\nimport { setMultipleRefs } from '../../utils';\nimport { DSPillButton } from '../PillButton';\n\nexport const InputPill = React.memo<DSPillProps>(\n ({\n label,\n size,\n inputPlaceholder,\n inputWidth,\n inputRender,\n onInputChange,\n onInputClear,\n innerRef,\n hasError,\n inputId,\n }) => {\n const ref = useRef<HTMLElement>(null);\n\n const InputComponent = useMemo(() => inputRender, [inputRender]);\n\n const pillUid = useMemo(() => inputId ?? `ds-pill-${uid()}`, []);\n\n const onCloseIconClick: React.MouseEventHandler & React.KeyboardEventHandler = useCallback(\n (e) => {\n if ([undefined, 'Enter', 'Space'].includes(e.code)) {\n e.preventDefault();\n onInputClear(e);\n ref.current.focus();\n }\n },\n [onInputClear],\n );\n\n const [inputHasFocus, setInputHasFocus] = useState(false);\n\n return (\n <StyledInputPillWrapper\n size={size}\n className=\"ds-pill-wrapper\"\n data-testid=\"ds-pill-wrapper\"\n cols={label === '' ? ['auto'] : ['auto', '24px']}\n inputWidth={inputWidth}\n value={label}\n inputHasFocus={inputHasFocus}\n hasError={hasError}\n >\n <InputComponent\n id={pillUid}\n className=\"ds-pill-focus-point\"\n data-testid=\"ds-pill-input\"\n innerRef={setMultipleRefs(ref, innerRef)}\n value={label}\n onChange={onInputChange}\n placeholder={inputPlaceholder}\n onFocus={() => setInputHasFocus(true)}\n onBlur={() => setInputHasFocus(false)}\n disableTooltip={false}\n />\n {label !== '' && (\n <DSPillButton\n id={pillUid}\n data-testid=\"ds-pill-clear-icon\"\n innerRef={innerRef}\n onClick={onCloseIconClick}\n // onKeyDown={onCloseIconClick} // button v2 now triggers click on key down already\n aria-label=\"Clear input\"\n type=\"right\"\n >\n <CloseXsmall size=\"s\" color={['brand-primary', '700']} />\n </DSPillButton>\n )}\n </StyledInputPillWrapper>\n );\n },\n);\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;AC0CjB,SAUE,KAVF;AAzCN,OAAOA,UAAS,aAAa,SAAS,QAAQ,gBAAgB;AAC9D,SAAS,WAAW;AACpB,SAAS,mBAAmB;AAE5B,SAAS,8BAA8B;AACvC,SAAS,uBAAuB;AAChC,SAAS,oBAAoB;AAEtB,MAAM,YAAYA,OAAM;AAAA,EAC7B,CAAC;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,MAAM;AACJ,UAAM,MAAM,OAAoB,IAAI;AAEpC,UAAM,iBAAiB,QAAQ,MAAM,aAAa,CAAC,WAAW,CAAC;AAE/D,UAAM,UAAU,QAAQ,MAAM,WAAW,WAAW,IAAI,KAAK,CAAC,CAAC;AAE/D,UAAM,mBAAyE;AAAA,MAC7E,CAAC,MAAM;AACL,YAAI,CAAC,QAAW,SAAS,OAAO,EAAE,SAAS,EAAE,IAAI,GAAG;AAClD,YAAE,eAAe;AACjB,uBAAa,CAAC;AACd,cAAI,QAAQ,MAAM;AAAA,QACpB;AAAA,MACF;AAAA,MACA,CAAC,YAAY;AAAA,IACf;AAEA,UAAM,CAAC,eAAe,gBAAgB,IAAI,SAAS,KAAK;AAExD,WACE,qBAAC;AAAA,MACC;AAAA,MACA,WAAU;AAAA,MACV,eAAY;AAAA,MACZ,MAAM,UAAU,KAAK,CAAC,MAAM,IAAI,CAAC,QAAQ,MAAM;AAAA,MAC/C;AAAA,MACA,OAAO;AAAA,MACP;AAAA,MACA;AAAA,MAEA;AAAA,4BAAC;AAAA,UACC,IAAI;AAAA,UACJ,WAAU;AAAA,UACV,eAAY;AAAA,UACZ,UAAU,gBAAgB,KAAK,QAAQ;AAAA,UACvC,OAAO;AAAA,UACP,UAAU;AAAA,UACV,aAAa;AAAA,UACb,SAAS,MAAM,iBAAiB,IAAI;AAAA,UACpC,QAAQ,MAAM,iBAAiB,KAAK;AAAA,UACpC,gBAAgB;AAAA,SAClB;AAAA,QACC,UAAU,MACT,oBAAC;AAAA,UACC,IAAI;AAAA,UACJ,eAAY;AAAA,UACZ;AAAA,UACA,SAAS;AAAA,UAET,cAAW;AAAA,UACX,MAAK;AAAA,UAEL,8BAAC;AAAA,YAAY,MAAK;AAAA,YAAI,OAAO,CAAC,iBAAiB,KAAK;AAAA,WAAG;AAAA,SACzD;AAAA;AAAA,KAEJ;AAAA,EAEJ;AACF;",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -1,24 +1,26 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
3
|
-
import React2, { useCallback, useContext, useMemo
|
|
3
|
+
import React2, { useCallback, useContext, useMemo } from "react";
|
|
4
4
|
import { uid } from "uid";
|
|
5
5
|
import { CloseXsmall } from "@elliemae/ds-icons";
|
|
6
6
|
import { SimpleTruncatedTooltipText } from "@elliemae/ds-truncated-tooltip-text";
|
|
7
7
|
import { StyledRemovablePillWrapper } from "../styled";
|
|
8
8
|
import { DSPillGroupV2Context } from "../PillGroup";
|
|
9
9
|
import { DSPillButton } from "../PillButton";
|
|
10
|
-
const noopKeyboardRemove = (_pillUid) => {
|
|
11
|
-
};
|
|
12
10
|
const RemovablePill = React2.memo(
|
|
13
11
|
({ label, size, disabled, labelTruncated, onRemove, innerRef, ariaLabel, tabIndex }) => {
|
|
14
12
|
const { onKeyboardRemove, onKeyboardNavigation } = useContext(DSPillGroupV2Context);
|
|
15
13
|
const pillUid = useMemo(() => `ds-pill-${uid()}`, []);
|
|
16
|
-
const postponedKeyboardRemove = useRef(noopKeyboardRemove);
|
|
17
14
|
const TextComponent = labelTruncated ? ({ children }) => /* @__PURE__ */ jsx(SimpleTruncatedTooltipText, {
|
|
18
15
|
value: children
|
|
19
16
|
}) : React2.Fragment;
|
|
20
|
-
const
|
|
17
|
+
const onKeyDown = useCallback(
|
|
21
18
|
(e) => {
|
|
19
|
+
if (["Enter", "Space"].includes(e.code)) {
|
|
20
|
+
e.preventDefault();
|
|
21
|
+
if (onKeyboardRemove)
|
|
22
|
+
onKeyboardRemove(pillUid);
|
|
23
|
+
}
|
|
22
24
|
if (e.code === "ArrowLeft") {
|
|
23
25
|
e.preventDefault();
|
|
24
26
|
if (onKeyboardNavigation)
|
|
@@ -30,20 +32,7 @@ const RemovablePill = React2.memo(
|
|
|
30
32
|
onKeyboardNavigation(pillUid, 1, e);
|
|
31
33
|
}
|
|
32
34
|
},
|
|
33
|
-
[onKeyboardNavigation, pillUid]
|
|
34
|
-
);
|
|
35
|
-
const handleOnClick = useCallback(
|
|
36
|
-
(e) => {
|
|
37
|
-
if (e.type === "keydown") {
|
|
38
|
-
postponedKeyboardRemove.current = onKeyboardRemove;
|
|
39
|
-
}
|
|
40
|
-
if (e.type === "click") {
|
|
41
|
-
onRemove(e);
|
|
42
|
-
postponedKeyboardRemove.current(pillUid);
|
|
43
|
-
postponedKeyboardRemove.current = noopKeyboardRemove;
|
|
44
|
-
}
|
|
45
|
-
},
|
|
46
|
-
[onKeyboardRemove, onRemove, pillUid]
|
|
35
|
+
[onKeyboardRemove, onRemove, onKeyboardNavigation, pillUid]
|
|
47
36
|
);
|
|
48
37
|
return /* @__PURE__ */ jsxs(StyledRemovablePillWrapper, {
|
|
49
38
|
size,
|
|
@@ -64,8 +53,8 @@ const RemovablePill = React2.memo(
|
|
|
64
53
|
id: pillUid,
|
|
65
54
|
"data-testid": "ds-pill-close-icon",
|
|
66
55
|
innerRef,
|
|
67
|
-
onClick:
|
|
68
|
-
onKeyDown
|
|
56
|
+
onClick: onRemove,
|
|
57
|
+
onKeyDown,
|
|
69
58
|
"aria-label": `Remove ${label}`,
|
|
70
59
|
type: "right",
|
|
71
60
|
tabIndex,
|
|
@@ -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
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
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 }\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,YAAY,WAAW;ACgBG,SAiClB,UAjCkB,KAsBpB,YAtBoB;AAf1B,OAAOA,UAAS,aAAa,YAAY,eAAe;AACxD,SAAS,WAAW;AACpB,SAAS,mBAAmB;AAC5B,SAAS,kCAAkC;AAE3C,SAAS,kCAAkC;AAC3C,SAAS,4BAA4B;AACrC,SAAS,oBAAoB;AAEtB,MAAM,gBAAgBA,OAAM;AAAA,EACjC,CAAC,EAAE,OAAO,MAAM,UAAU,gBAAgB,UAAU,UAAU,WAAW,SAAS,MAAM;AACtF,UAAM,EAAE,kBAAkB,qBAAqB,IAAI,WAAW,oBAAoB;AAClF,UAAM,UAAU,QAAQ,MAAM,WAAW,IAAI,KAAK,CAAC,CAAC;AAEpD,UAAM,gBAAgB,iBAClB,CAAC,EAAE,SAAS,MAAM,oBAAC;AAAA,MAA2B,OAAO;AAAA,KAAU,IAC/DA,OAAM;AAEV,UAAM,YAAY;AAAA,MAChB,CAAC,MAAqB;AACpB,YAAI,CAAC,SAAS,OAAO,EAAE,SAAS,EAAE,IAAI,GAAG;AACvC,YAAE,eAAe;AACjB,cAAI;AAAkB,6BAAiB,OAAO;AAAA,QAChD;AACA,YAAI,EAAE,SAAS,aAAa;AAC1B,YAAE,eAAe;AACjB,cAAI;AAAsB,iCAAqB,SAAS,IAAI,CAAC;AAAA,QAC/D;AACA,YAAI,EAAE,SAAS,cAAc;AAC3B,YAAE,eAAe;AACjB,cAAI;AAAsB,iCAAqB,SAAS,GAAG,CAAC;AAAA,QAC9D;AAAA,MACF;AAAA,MACA,CAAC,kBAAkB,UAAU,sBAAsB,OAAO;AAAA,IAC5D;AAEA,WACE,qBAAC;AAAA,MACC;AAAA,MACA,MAAM,CAAC,QAAQ,MAAM;AAAA,MACrB,QAAO;AAAA,MACP,YAAW;AAAA,MACX,cAAa;AAAA,MACb,WAAU;AAAA,MACV,eAAY;AAAA,MACZ,cAAY,aAAa;AAAA,MAEzB;AAAA,4BAAC;AAAA,UAAe;AAAA,SAAM;AAAA,QACtB;AAAA,UACG,WAAC,WACA,oBAAC;AAAA,YACC,WAAU;AAAA,YACV,IAAI;AAAA,YACJ,eAAY;AAAA,YACZ;AAAA,YACA,SAAS;AAAA,YACT;AAAA,YACA,cAAY,UAAU;AAAA,YACtB,MAAK;AAAA,YACL;AAAA,YAEA,8BAAC;AAAA,cACC,OAAO,SAAS,MAAM,KAAK;AAAA,cAC3B,QAAQ,SAAS,MAAM,KAAK;AAAA,cAC5B,OAAO,CAAC,iBAAiB,KAAK;AAAA,aAChC;AAAA,WACF,IACE;AAAA,SACN;AAAA;AAAA,KACF;AAAA,EAEJ;AACF;",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-pills",
|
|
3
|
-
"version": "3.12.0-rc.
|
|
3
|
+
"version": "3.12.0-rc.2",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Pills",
|
|
6
6
|
"files": [
|
|
@@ -147,32 +147,32 @@
|
|
|
147
147
|
"indent": 4
|
|
148
148
|
},
|
|
149
149
|
"dependencies": {
|
|
150
|
-
"@elliemae/ds-button": "3.12.0-rc.
|
|
151
|
-
"@elliemae/ds-classnames": "3.12.0-rc.
|
|
152
|
-
"@elliemae/ds-dropdownmenu": "3.12.0-rc.
|
|
153
|
-
"@elliemae/ds-form": "3.12.0-rc.
|
|
154
|
-
"@elliemae/ds-grid": "3.12.0-rc.
|
|
155
|
-
"@elliemae/ds-icons": "3.12.0-rc.
|
|
156
|
-
"@elliemae/ds-modal": "3.12.0-rc.
|
|
157
|
-
"@elliemae/ds-popover": "3.12.0-rc.
|
|
158
|
-
"@elliemae/ds-shared": "3.12.0-rc.
|
|
159
|
-
"@elliemae/ds-system": "3.12.0-rc.
|
|
160
|
-
"@elliemae/ds-tooltip": "3.12.0-rc.
|
|
161
|
-
"@elliemae/ds-truncated-tooltip-text": "3.12.0-rc.
|
|
162
|
-
"@elliemae/ds-utilities": "3.12.0-rc.
|
|
150
|
+
"@elliemae/ds-button": "3.12.0-rc.2",
|
|
151
|
+
"@elliemae/ds-classnames": "3.12.0-rc.2",
|
|
152
|
+
"@elliemae/ds-dropdownmenu": "3.12.0-rc.2",
|
|
153
|
+
"@elliemae/ds-form": "3.12.0-rc.2",
|
|
154
|
+
"@elliemae/ds-grid": "3.12.0-rc.2",
|
|
155
|
+
"@elliemae/ds-icons": "3.12.0-rc.2",
|
|
156
|
+
"@elliemae/ds-modal": "3.12.0-rc.2",
|
|
157
|
+
"@elliemae/ds-popover": "3.12.0-rc.2",
|
|
158
|
+
"@elliemae/ds-shared": "3.12.0-rc.2",
|
|
159
|
+
"@elliemae/ds-system": "3.12.0-rc.2",
|
|
160
|
+
"@elliemae/ds-tooltip": "3.12.0-rc.2",
|
|
161
|
+
"@elliemae/ds-truncated-tooltip-text": "3.12.0-rc.2",
|
|
162
|
+
"@elliemae/ds-utilities": "3.12.0-rc.2",
|
|
163
163
|
"prop-types": "~15.8.1",
|
|
164
164
|
"uid": "~2.0.0"
|
|
165
165
|
},
|
|
166
166
|
"devDependencies": {
|
|
167
167
|
"@testing-library/react": "~12.1.3",
|
|
168
168
|
"@testing-library/user-event": "~13.5.0",
|
|
169
|
-
"styled-components": "~5.3.
|
|
169
|
+
"styled-components": "~5.3.6"
|
|
170
170
|
},
|
|
171
171
|
"peerDependencies": {
|
|
172
172
|
"lodash": "^4.17.21",
|
|
173
173
|
"react": "^17.0.2",
|
|
174
174
|
"react-dom": "^17.0.2",
|
|
175
|
-
"styled-components": "
|
|
175
|
+
"styled-components": "~5.3.6"
|
|
176
176
|
},
|
|
177
177
|
"publishConfig": {
|
|
178
178
|
"access": "public",
|