@elliemae/ds-pills 3.0.0-next.13 → 3.0.0-next.17
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/deprecated/DropdownPill.js +2 -2
- package/dist/cjs/deprecated/DropdownPill.js.map +2 -2
- package/dist/cjs/deprecated/OverflowPill.js +2 -2
- package/dist/cjs/deprecated/OverflowPill.js.map +2 -2
- package/dist/cjs/deprecated/PillGroup.js +3 -12
- package/dist/cjs/deprecated/PillGroup.js.map +2 -2
- package/dist/cjs/deprecated/RemovablePill.js +2 -2
- package/dist/cjs/deprecated/RemovablePill.js.map +2 -2
- package/dist/esm/deprecated/DropdownPill.js +1 -1
- package/dist/esm/deprecated/DropdownPill.js.map +1 -1
- package/dist/esm/deprecated/OverflowPill.js +1 -1
- package/dist/esm/deprecated/OverflowPill.js.map +2 -2
- package/dist/esm/deprecated/PillGroup.js +3 -12
- package/dist/esm/deprecated/PillGroup.js.map +2 -2
- package/dist/esm/deprecated/RemovablePill.js +1 -1
- package/dist/esm/deprecated/RemovablePill.js.map +1 -1
- package/package.json +15 -15
|
@@ -64,7 +64,7 @@ var import_react = __toESM(require("react"));
|
|
|
64
64
|
var import_react_desc = require("react-desc");
|
|
65
65
|
var import_ds_dropdownmenu = require("@elliemae/ds-dropdownmenu");
|
|
66
66
|
var import_ds_icons = require("@elliemae/ds-icons");
|
|
67
|
-
var
|
|
67
|
+
var import_ds_shared = require("@elliemae/ds-shared");
|
|
68
68
|
var import_Pill = require("./Pill");
|
|
69
69
|
function DropdownPill(_a) {
|
|
70
70
|
var _b = _a, {
|
|
@@ -86,7 +86,7 @@ function DropdownPill(_a) {
|
|
|
86
86
|
]);
|
|
87
87
|
const ref = (0, import_react.useRef)(null);
|
|
88
88
|
const [chevronEl, chevronRef] = (0, import_react.useState)();
|
|
89
|
-
const { focusFirst } = (0,
|
|
89
|
+
const { focusFirst } = (0, import_ds_shared.useFocusGroupItem)(ref);
|
|
90
90
|
return /* @__PURE__ */ import_react.default.createElement(import_ds_dropdownmenu.DSDropdownMenu, __spreadProps(__spreadValues({}, dropdownProps), {
|
|
91
91
|
closeMenuOnItemSelection,
|
|
92
92
|
maxWidth,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/deprecated/DropdownPill.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React, { useRef, useState } from 'react';\nimport { PropTypes, describe } from 'react-desc';\nimport { DSDropdownMenu } from '@elliemae/ds-dropdownmenu';\nimport { ChevronDown } from '@elliemae/ds-icons';\nimport { useFocusGroupItem } from '@elliemae/ds-shared
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAwC;AACxC,wBAAoC;AACpC,6BAA+B;AAC/B,sBAA4B;AAC5B
|
|
4
|
+
"sourcesContent": ["import React, { useRef, useState } from 'react';\nimport { PropTypes, describe } from 'react-desc';\nimport { DSDropdownMenu } from '@elliemae/ds-dropdownmenu';\nimport { ChevronDown } from '@elliemae/ds-icons';\nimport { useFocusGroupItem } from '@elliemae/ds-shared';\nimport { Pill } from './Pill';\n\nfunction DropdownPill({\n containerProps = {},\n label = '',\n variant,\n tabIndex = -1,\n closeMenuOnItemSelection = false,\n maxWidth,\n minWidth,\n ...dropdownProps\n}) {\n const ref = useRef(null);\n const [chevronEl, chevronRef] = useState();\n const { focusFirst } = useFocusGroupItem(ref);\n return (\n <DSDropdownMenu\n {...dropdownProps}\n closeMenuOnItemSelection={closeMenuOnItemSelection}\n maxWidth={maxWidth}\n hideIfNotVisible\n menuProps={{ className: 'dropdown-pill-menu', zIndex: 100 }}\n minWidth={minWidth}\n onClose={focusFirst}\n referenceNode={chevronEl}\n triggerComponent={\n <Pill\n data-testid=\"dropdown-pill\"\n className=\"dropdown-pill\"\n containerProps={{ role: 'listbox', ...containerProps }}\n innerRef={ref}\n label={label}\n rightAddon={\n <div ref={chevronRef}>\n <ChevronDown className=\"dropdown-pill-chevron-down\" data-testid=\"dropdown-pill-button\" />\n </div>\n }\n tabIndex={tabIndex}\n variant={variant}\n />\n }\n />\n );\n}\n\nconst props = {\n /** props injected to component wrapper */\n containerProps: PropTypes.object.description('props injected to component wrapper'),\n /** labeled pill text label */\n label: PropTypes.string.isRequired.description('pill text label'),\n /** pill variant */\n variant: PropTypes.oneOf(['value', 'title']).description('pill variant'),\n /** html focus border */\n tabIndex: PropTypes.number.description('html focus order'),\n /** close menu on item selection */\n closeMenuOnItemSelection: PropTypes.bool.description('close menu on item selection'),\n /** pill max width */\n maxWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description('pill max width'),\n /** pill min width */\n minWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description('pill min width'),\n};\n\nDropdownPill.propTypes = props;\nconst DSDropdownPillWithSchema = describe(DropdownPill);\nDSDropdownPillWithSchema.propTypes = props;\n\nexport { DropdownPill, DSDropdownPillWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAwC;AACxC,wBAAoC;AACpC,6BAA+B;AAC/B,sBAA4B;AAC5B,uBAAkC;AAClC,kBAAqB;AAErB,sBAAsB,IASnB;AATmB,eACpB;AAAA,qBAAiB;AAAA,IACjB,QAAQ;AAAA,IACR;AAAA,IACA,WAAW;AAAA,IACX,2BAA2B;AAAA,IAC3B;AAAA,IACA;AAAA,MAPoB,IAQjB,0BARiB,IAQjB;AAAA,IAPH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAGA,QAAM,MAAM,yBAAO;AACnB,QAAM,CAAC,WAAW,cAAc;AAChC,QAAM,EAAE,eAAe,wCAAkB;AACzC,SACE,mDAAC,uCAAD,iCACM,gBADN;AAAA,IAEE;AAAA,IACA;AAAA,IACA,kBAAgB;AAAA,IAChB,WAAW,EAAE,WAAW,sBAAsB,QAAQ;AAAA,IACtD;AAAA,IACA,SAAS;AAAA,IACT,eAAe;AAAA,IACf,kBACE,mDAAC,kBAAD;AAAA,MACE,eAAY;AAAA,MACZ,WAAU;AAAA,MACV,gBAAgB,iBAAE,MAAM,aAAc;AAAA,MACtC,UAAU;AAAA,MACV;AAAA,MACA,YACE,mDAAC,OAAD;AAAA,QAAK,KAAK;AAAA,SACR,mDAAC,6BAAD;AAAA,QAAa,WAAU;AAAA,QAA6B,eAAY;AAAA;AAAA,MAGpE;AAAA,MACA;AAAA;AAAA;AAAA;AAOV,MAAM,QAAQ;AAAA,EAEZ,gBAAgB,4BAAU,OAAO,YAAY;AAAA,EAE7C,OAAO,4BAAU,OAAO,WAAW,YAAY;AAAA,EAE/C,SAAS,4BAAU,MAAM,CAAC,SAAS,UAAU,YAAY;AAAA,EAEzD,UAAU,4BAAU,OAAO,YAAY;AAAA,EAEvC,0BAA0B,4BAAU,KAAK,YAAY;AAAA,EAErD,UAAU,4BAAU,UAAU,CAAC,4BAAU,QAAQ,4BAAU,SAAS,YAAY;AAAA,EAEhF,UAAU,4BAAU,UAAU,CAAC,4BAAU,QAAQ,4BAAU,SAAS,YAAY;AAAA;AAGlF,aAAa,YAAY;AACzB,MAAM,2BAA2B,gCAAS;AAC1C,yBAAyB,YAAY;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -33,7 +33,7 @@ __export(OverflowPill_exports, {
|
|
|
33
33
|
var React = __toESM(require("react"));
|
|
34
34
|
var import_react = __toESM(require("react"));
|
|
35
35
|
var import_react_desc = require("react-desc");
|
|
36
|
-
var
|
|
36
|
+
var import_ds_shared = require("@elliemae/ds-shared");
|
|
37
37
|
var import_ds_tooltip = require("@elliemae/ds-tooltip");
|
|
38
38
|
var import_Pill = require("./Pill");
|
|
39
39
|
function OverflowPill({ containerProps = {}, label = "", options = [] }) {
|
|
@@ -51,7 +51,7 @@ function OverflowPill({ containerProps = {}, label = "", options = [] }) {
|
|
|
51
51
|
});
|
|
52
52
|
setTooltipText(text);
|
|
53
53
|
}, [options]);
|
|
54
|
-
(0,
|
|
54
|
+
(0, import_ds_shared.useFocusGroupItem)(ref);
|
|
55
55
|
return /* @__PURE__ */ import_react.default.createElement(import_ds_tooltip.DSTooltip, {
|
|
56
56
|
isOpen: tooltipIsOpen,
|
|
57
57
|
title: tooltipText,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/deprecated/OverflowPill.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React, { useRef, useState, useEffect } from 'react';\nimport { PropTypes, describe } from 'react-desc';\nimport { useFocusGroupItem } from '@elliemae/ds-shared
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAmD;AACnD,wBAAoC;AACpC
|
|
4
|
+
"sourcesContent": ["import React, { useRef, useState, useEffect } from 'react';\nimport { PropTypes, describe } from 'react-desc';\nimport { useFocusGroupItem } from '@elliemae/ds-shared';\nimport { DSTooltip } from '@elliemae/ds-tooltip';\nimport { Pill } from './Pill';\n\nfunction OverflowPill({ containerProps = {}, label = '', options = [] }) {\n const ref = useRef(null);\n const [tooltipIsOpen, setTooltipIsOpen] = useState(false);\n const [tooltipText, setTooltipText] = useState('');\n\n useEffect(() => {\n let text = '';\n options.forEach((option) => {\n if (!tooltipText || option === options[0]) {\n text = `${option.label}`;\n } else {\n text = text.concat(`, ${option.label}`);\n }\n });\n setTooltipText(text);\n }, [options]);\n\n useFocusGroupItem(ref);\n\n return (\n <DSTooltip\n isOpen={tooltipIsOpen}\n title={tooltipText}\n zIndex={11}\n triggerComponent={\n <Pill\n className=\"overflow-pill\"\n containerProps={containerProps}\n innerRef={ref}\n label={label}\n tabIndex={-1}\n onMouseEnter={() => setTooltipIsOpen(true)}\n onMouseLeave={() => setTooltipIsOpen(false)}\n />\n }\n />\n );\n}\n\nconst props = {\n /** props to inject to pill wrapper */\n containerProps: PropTypes.object.description('props to inject to pill wrapper'),\n /** pill text label */\n label: PropTypes.string.isRequired.description('pill text label'),\n /** overflow pills options */\n options: PropTypes.array.description('overflow pills options'),\n};\n\nOverflowPill.propTypes = props;\nconst DSOverflowPillWithSchema = describe(OverflowPill);\nDSOverflowPillWithSchema.propTypes = props;\n\nexport { OverflowPill, DSOverflowPillWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAmD;AACnD,wBAAoC;AACpC,uBAAkC;AAClC,wBAA0B;AAC1B,kBAAqB;AAErB,sBAAsB,EAAE,iBAAiB,IAAI,QAAQ,IAAI,UAAU,MAAM;AACvE,QAAM,MAAM,yBAAO;AACnB,QAAM,CAAC,eAAe,oBAAoB,2BAAS;AACnD,QAAM,CAAC,aAAa,kBAAkB,2BAAS;AAE/C,8BAAU,MAAM;AACd,QAAI,OAAO;AACX,YAAQ,QAAQ,CAAC,WAAW;AAC1B,UAAI,CAAC,eAAe,WAAW,QAAQ,IAAI;AACzC,eAAO,GAAG,OAAO;AAAA,aACZ;AACL,eAAO,KAAK,OAAO,KAAK,OAAO;AAAA;AAAA;AAGnC,mBAAe;AAAA,KACd,CAAC;AAEJ,0CAAkB;AAElB,SACE,mDAAC,6BAAD;AAAA,IACE,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,kBACE,mDAAC,kBAAD;AAAA,MACE,WAAU;AAAA,MACV;AAAA,MACA,UAAU;AAAA,MACV;AAAA,MACA,UAAU;AAAA,MACV,cAAc,MAAM,iBAAiB;AAAA,MACrC,cAAc,MAAM,iBAAiB;AAAA;AAAA;AAAA;AAO/C,MAAM,QAAQ;AAAA,EAEZ,gBAAgB,4BAAU,OAAO,YAAY;AAAA,EAE7C,OAAO,4BAAU,OAAO,WAAW,YAAY;AAAA,EAE/C,SAAS,4BAAU,MAAM,YAAY;AAAA;AAGvC,aAAa,YAAY;AACzB,MAAM,2BAA2B,gCAAS;AAC1C,yBAAyB,YAAY;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -49,16 +49,10 @@ var React = __toESM(require("react"));
|
|
|
49
49
|
var import_react = __toESM(require("react"));
|
|
50
50
|
var import_react_desc = require("react-desc");
|
|
51
51
|
var import_ds_classnames = require("@elliemae/ds-classnames");
|
|
52
|
-
var
|
|
52
|
+
var import_ds_shared = require("@elliemae/ds-shared");
|
|
53
53
|
const pillGroupBlockName = "pill-group";
|
|
54
54
|
const Container = (0, import_ds_classnames.aggregatedClasses)("div")(pillGroupBlockName);
|
|
55
|
-
const PillGroup = ({
|
|
56
|
-
containerProps = {},
|
|
57
|
-
onFocusNextGroup,
|
|
58
|
-
onFocusPreviousGroup,
|
|
59
|
-
onFocusGroupSet,
|
|
60
|
-
children
|
|
61
|
-
}) => /* @__PURE__ */ import_react.default.createElement(import_FocusGroupManager.FocusGroupProvider, {
|
|
55
|
+
const PillGroup = ({ containerProps = {}, onFocusNextGroup, onFocusPreviousGroup, onFocusGroupSet, children }) => /* @__PURE__ */ import_react.default.createElement(import_ds_shared.FocusGroupProvider, {
|
|
62
56
|
keyBindings: {
|
|
63
57
|
Tab: "next"
|
|
64
58
|
},
|
|
@@ -72,10 +66,7 @@ const props = {
|
|
|
72
66
|
onFocusNextGroup: import_react_desc.PropTypes.func.description("focus next group callback"),
|
|
73
67
|
onFocusPreviousGroup: import_react_desc.PropTypes.func.description("focus prev group callback"),
|
|
74
68
|
onFocusGroupSet: import_react_desc.PropTypes.func.description("focus group set callback"),
|
|
75
|
-
children: import_react_desc.PropTypes.oneOfType([
|
|
76
|
-
import_react_desc.PropTypes.arrayOf(import_react_desc.PropTypes.node),
|
|
77
|
-
import_react_desc.PropTypes.node
|
|
78
|
-
]).isRequired.description("pill components")
|
|
69
|
+
children: import_react_desc.PropTypes.oneOfType([import_react_desc.PropTypes.arrayOf(import_react_desc.PropTypes.node), import_react_desc.PropTypes.node]).isRequired.description("pill components")
|
|
79
70
|
};
|
|
80
71
|
PillGroup.propTypes = props;
|
|
81
72
|
const DSPillGroupWithSchema = (0, import_react_desc.describe)(PillGroup);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/deprecated/PillGroup.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React from 'react';\nimport { describe, PropTypes } from 'react-desc';\nimport { aggregatedClasses } from '@elliemae/ds-classnames';\nimport { FocusGroupProvider } from '@elliemae/ds-shared
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAClB,wBAAoC;AACpC,2BAAkC;AAClC
|
|
4
|
+
"sourcesContent": ["import React from 'react';\nimport { describe, PropTypes } from 'react-desc';\nimport { aggregatedClasses } from '@elliemae/ds-classnames';\nimport { FocusGroupProvider } from '@elliemae/ds-shared';\n\nconst pillGroupBlockName = 'pill-group';\n\nexport const Container = aggregatedClasses('div')(pillGroupBlockName);\n\nconst PillGroup = ({ containerProps = {}, onFocusNextGroup, onFocusPreviousGroup, onFocusGroupSet, children }) => (\n <FocusGroupProvider\n keyBindings={{\n Tab: 'next',\n }}\n onFocusGroupSet={onFocusGroupSet}\n onFocusNextGroup={onFocusNextGroup}\n onFocusPreviousGroup={onFocusPreviousGroup}\n orientation=\"horizontal\"\n >\n <Container {...containerProps}>{children}</Container>\n </FocusGroupProvider>\n);\n\nconst props = {\n /** props injected to component wrapper */\n containerProps: PropTypes.object.description('props injected to component wrapper'),\n /** focus next group callback */\n onFocusNextGroup: PropTypes.func.description('focus next group callback'),\n /** focus prev group callback */\n onFocusPreviousGroup: PropTypes.func.description('focus prev group callback'),\n /** focus group set callback */\n onFocusGroupSet: PropTypes.func.description('focus group set callback'),\n /** pill components */\n children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired.description(\n 'pill components',\n ),\n};\n\nPillGroup.propTypes = props;\n\nconst DSPillGroupWithSchema = describe(PillGroup);\nDSPillGroupWithSchema.propTypes = props;\n\nexport { PillGroup, DSPillGroupWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAClB,wBAAoC;AACpC,2BAAkC;AAClC,uBAAmC;AAEnC,MAAM,qBAAqB;AAEpB,MAAM,YAAY,4CAAkB,OAAO;AAElD,MAAM,YAAY,CAAC,EAAE,iBAAiB,IAAI,kBAAkB,sBAAsB,iBAAiB,eACjG,mDAAC,qCAAD;AAAA,EACE,aAAa;AAAA,IACX,KAAK;AAAA;AAAA,EAEP;AAAA,EACA;AAAA,EACA;AAAA,EACA,aAAY;AAAA,GAEZ,mDAAC,WAAD,mBAAe,iBAAiB;AAIpC,MAAM,QAAQ;AAAA,EAEZ,gBAAgB,4BAAU,OAAO,YAAY;AAAA,EAE7C,kBAAkB,4BAAU,KAAK,YAAY;AAAA,EAE7C,sBAAsB,4BAAU,KAAK,YAAY;AAAA,EAEjD,iBAAiB,4BAAU,KAAK,YAAY;AAAA,EAE5C,UAAU,4BAAU,UAAU,CAAC,4BAAU,QAAQ,4BAAU,OAAO,4BAAU,OAAO,WAAW,YAC5F;AAAA;AAIJ,UAAU,YAAY;AAEtB,MAAM,wBAAwB,gCAAS;AACvC,sBAAsB,YAAY;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -35,11 +35,11 @@ var import_react = __toESM(require("react"));
|
|
|
35
35
|
var import_react_desc = require("react-desc");
|
|
36
36
|
var import_ds_utilities = require("@elliemae/ds-utilities");
|
|
37
37
|
var import_ds_icons = require("@elliemae/ds-icons");
|
|
38
|
-
var
|
|
38
|
+
var import_ds_shared = require("@elliemae/ds-shared");
|
|
39
39
|
var import_Pill = require("./Pill");
|
|
40
40
|
function RemovablePill({ containerProps = {}, label = "", onRemove, size = "m", leftAddon }) {
|
|
41
41
|
const ref = (0, import_react.useRef)(null);
|
|
42
|
-
const { focusPrevious } = (0,
|
|
42
|
+
const { focusPrevious } = (0, import_ds_shared.useFocusGroupItem)(ref);
|
|
43
43
|
return /* @__PURE__ */ import_react.default.createElement(import_Pill.Pill, {
|
|
44
44
|
className: "removable-pill",
|
|
45
45
|
"data-testid": "removable-pill",
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/deprecated/RemovablePill.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React, { useRef } from 'react';\nimport { PropTypes, describe } from 'react-desc';\nimport { isFunction } from '@elliemae/ds-utilities';\nimport { CloseXsmall } from '@elliemae/ds-icons';\nimport { useFocusGroupItem } from '@elliemae/ds-shared
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAA8B;AAC9B,wBAAoC;AACpC,0BAA2B;AAC3B,sBAA4B;AAC5B
|
|
4
|
+
"sourcesContent": ["import React, { useRef } from 'react';\nimport { PropTypes, describe } from 'react-desc';\nimport { isFunction } from '@elliemae/ds-utilities';\nimport { CloseXsmall } from '@elliemae/ds-icons';\nimport { useFocusGroupItem } from '@elliemae/ds-shared';\nimport { Pill } from './Pill';\n\nfunction RemovablePill({ containerProps = {}, label = '', onRemove, size = 'm', leftAddon }) {\n const ref = useRef(null);\n const { focusPrevious } = useFocusGroupItem(ref);\n return (\n <Pill\n className=\"removable-pill\"\n data-testid=\"removable-pill\"\n containerProps={containerProps}\n innerRef={ref}\n size={size}\n label={label}\n leftAddon={leftAddon}\n onKeyDown={(e) => {\n if (e.key === 'Backspace' && isFunction(onRemove)) {\n onRemove();\n if (isFunction(focusPrevious)) focusPrevious();\n }\n }}\n rightAddon={\n <CloseXsmall role=\"button\" data-testid=\"remove-pill-button\" className=\"remove-pill-button\" onClick={onRemove} />\n }\n tabIndex={-1}\n />\n );\n}\n\nconst props = {\n /** props injected to component wrapper */\n containerProps: PropTypes.object.description('props injected to component wrapper'),\n /** labeled pill text label */\n label: PropTypes.string.isRequired.description('pill text label'),\n /** remove click callback */\n onRemove: PropTypes.func.description('remove click callback'),\n /** pill size */\n size: PropTypes.oneOf(['m', 'l']).description('pill size'),\n /** addon component to left */\n leftAddon: PropTypes.node.description('addon component to left'),\n};\n\nRemovablePill.propTypes = props;\nconst DSRemovablePillWithSchema = describe(RemovablePill);\nDSRemovablePillWithSchema.propTypes = props;\n\nexport { RemovablePill, DSRemovablePillWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAA8B;AAC9B,wBAAoC;AACpC,0BAA2B;AAC3B,sBAA4B;AAC5B,uBAAkC;AAClC,kBAAqB;AAErB,uBAAuB,EAAE,iBAAiB,IAAI,QAAQ,IAAI,UAAU,OAAO,KAAK,aAAa;AAC3F,QAAM,MAAM,yBAAO;AACnB,QAAM,EAAE,kBAAkB,wCAAkB;AAC5C,SACE,mDAAC,kBAAD;AAAA,IACE,WAAU;AAAA,IACV,eAAY;AAAA,IACZ;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW,CAAC,MAAM;AAChB,UAAI,EAAE,QAAQ,eAAe,oCAAW,WAAW;AACjD;AACA,YAAI,oCAAW;AAAgB;AAAA;AAAA;AAAA,IAGnC,YACE,mDAAC,6BAAD;AAAA,MAAa,MAAK;AAAA,MAAS,eAAY;AAAA,MAAqB,WAAU;AAAA,MAAqB,SAAS;AAAA;AAAA,IAEtG,UAAU;AAAA;AAAA;AAKhB,MAAM,QAAQ;AAAA,EAEZ,gBAAgB,4BAAU,OAAO,YAAY;AAAA,EAE7C,OAAO,4BAAU,OAAO,WAAW,YAAY;AAAA,EAE/C,UAAU,4BAAU,KAAK,YAAY;AAAA,EAErC,MAAM,4BAAU,MAAM,CAAC,KAAK,MAAM,YAAY;AAAA,EAE9C,WAAW,4BAAU,KAAK,YAAY;AAAA;AAGxC,cAAc,YAAY;AAC1B,MAAM,4BAA4B,gCAAS;AAC3C,0BAA0B,YAAY;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -34,7 +34,7 @@ import React2, { useRef, useState } from "react";
|
|
|
34
34
|
import { PropTypes, describe } from "react-desc";
|
|
35
35
|
import { DSDropdownMenu } from "@elliemae/ds-dropdownmenu";
|
|
36
36
|
import { ChevronDown } from "@elliemae/ds-icons";
|
|
37
|
-
import { useFocusGroupItem } from "@elliemae/ds-shared
|
|
37
|
+
import { useFocusGroupItem } from "@elliemae/ds-shared";
|
|
38
38
|
import { Pill } from "./Pill";
|
|
39
39
|
function DropdownPill(_a) {
|
|
40
40
|
var _b = _a, {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/deprecated/DropdownPill.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useRef, useState } from 'react';\nimport { PropTypes, describe } from 'react-desc';\nimport { DSDropdownMenu } from '@elliemae/ds-dropdownmenu';\nimport { ChevronDown } from '@elliemae/ds-icons';\nimport { useFocusGroupItem } from '@elliemae/ds-shared
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useRef, useState } from 'react';\nimport { PropTypes, describe } from 'react-desc';\nimport { DSDropdownMenu } from '@elliemae/ds-dropdownmenu';\nimport { ChevronDown } from '@elliemae/ds-icons';\nimport { useFocusGroupItem } from '@elliemae/ds-shared';\nimport { Pill } from './Pill';\n\nfunction DropdownPill({\n containerProps = {},\n label = '',\n variant,\n tabIndex = -1,\n closeMenuOnItemSelection = false,\n maxWidth,\n minWidth,\n ...dropdownProps\n}) {\n const ref = useRef(null);\n const [chevronEl, chevronRef] = useState();\n const { focusFirst } = useFocusGroupItem(ref);\n return (\n <DSDropdownMenu\n {...dropdownProps}\n closeMenuOnItemSelection={closeMenuOnItemSelection}\n maxWidth={maxWidth}\n hideIfNotVisible\n menuProps={{ className: 'dropdown-pill-menu', zIndex: 100 }}\n minWidth={minWidth}\n onClose={focusFirst}\n referenceNode={chevronEl}\n triggerComponent={\n <Pill\n data-testid=\"dropdown-pill\"\n className=\"dropdown-pill\"\n containerProps={{ role: 'listbox', ...containerProps }}\n innerRef={ref}\n label={label}\n rightAddon={\n <div ref={chevronRef}>\n <ChevronDown className=\"dropdown-pill-chevron-down\" data-testid=\"dropdown-pill-button\" />\n </div>\n }\n tabIndex={tabIndex}\n variant={variant}\n />\n }\n />\n );\n}\n\nconst props = {\n /** props injected to component wrapper */\n containerProps: PropTypes.object.description('props injected to component wrapper'),\n /** labeled pill text label */\n label: PropTypes.string.isRequired.description('pill text label'),\n /** pill variant */\n variant: PropTypes.oneOf(['value', 'title']).description('pill variant'),\n /** html focus border */\n tabIndex: PropTypes.number.description('html focus order'),\n /** close menu on item selection */\n closeMenuOnItemSelection: PropTypes.bool.description('close menu on item selection'),\n /** pill max width */\n maxWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description('pill max width'),\n /** pill min width */\n minWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description('pill min width'),\n};\n\nDropdownPill.propTypes = props;\nconst DSDropdownPillWithSchema = describe(DropdownPill);\nDSDropdownPillWithSchema.propTypes = props;\n\nexport { DropdownPill, DSDropdownPillWithSchema };\n"],
|
|
5
5
|
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;ACAA;AACA;AACA;AACA;AACA;AACA;AAEA,sBAAsB,IASnB;AATmB,eACpB;AAAA,qBAAiB;AAAA,IACjB,QAAQ;AAAA,IACR;AAAA,IACA,WAAW;AAAA,IACX,2BAA2B;AAAA,IAC3B;AAAA,IACA;AAAA,MAPoB,IAQjB,0BARiB,IAQjB;AAAA,IAPH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAGA,QAAM,MAAM,OAAO;AACnB,QAAM,CAAC,WAAW,cAAc;AAChC,QAAM,EAAE,eAAe,kBAAkB;AACzC,SACE,qCAAC,gBAAD,iCACM,gBADN;AAAA,IAEE;AAAA,IACA;AAAA,IACA,kBAAgB;AAAA,IAChB,WAAW,EAAE,WAAW,sBAAsB,QAAQ;AAAA,IACtD;AAAA,IACA,SAAS;AAAA,IACT,eAAe;AAAA,IACf,kBACE,qCAAC,MAAD;AAAA,MACE,eAAY;AAAA,MACZ,WAAU;AAAA,MACV,gBAAgB,iBAAE,MAAM,aAAc;AAAA,MACtC,UAAU;AAAA,MACV;AAAA,MACA,YACE,qCAAC,OAAD;AAAA,QAAK,KAAK;AAAA,SACR,qCAAC,aAAD;AAAA,QAAa,WAAU;AAAA,QAA6B,eAAY;AAAA;AAAA,MAGpE;AAAA,MACA;AAAA;AAAA;AAAA;AAOV,MAAM,QAAQ;AAAA,EAEZ,gBAAgB,UAAU,OAAO,YAAY;AAAA,EAE7C,OAAO,UAAU,OAAO,WAAW,YAAY;AAAA,EAE/C,SAAS,UAAU,MAAM,CAAC,SAAS,UAAU,YAAY;AAAA,EAEzD,UAAU,UAAU,OAAO,YAAY;AAAA,EAEvC,0BAA0B,UAAU,KAAK,YAAY;AAAA,EAErD,UAAU,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,SAAS,YAAY;AAAA,EAEhF,UAAU,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,SAAS,YAAY;AAAA;AAGlF,aAAa,YAAY;AACzB,MAAM,2BAA2B,SAAS;AAC1C,yBAAyB,YAAY;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import React2, { useRef, useState, useEffect } from "react";
|
|
3
3
|
import { PropTypes, describe } from "react-desc";
|
|
4
|
-
import { useFocusGroupItem } from "@elliemae/ds-shared
|
|
4
|
+
import { useFocusGroupItem } from "@elliemae/ds-shared";
|
|
5
5
|
import { DSTooltip } from "@elliemae/ds-tooltip";
|
|
6
6
|
import { Pill } from "./Pill";
|
|
7
7
|
function OverflowPill({ containerProps = {}, label = "", options = [] }) {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/deprecated/OverflowPill.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useRef, useState, useEffect } from 'react';\nimport { PropTypes, describe } from 'react-desc';\nimport { useFocusGroupItem } from '@elliemae/ds-shared
|
|
5
|
-
"mappings": "AAAA;ACAA;AACA;AACA;AACA;AACA;AAEA,sBAAsB,EAAE,iBAAiB,IAAI,QAAQ,IAAI,UAAU,MAAM;AACvE,QAAM,MAAM,OAAO;AACnB,QAAM,CAAC,eAAe,oBAAoB,SAAS;AACnD,QAAM,CAAC,aAAa,kBAAkB,SAAS;AAE/C,YAAU,MAAM;AACd,QAAI,OAAO;AACX,YAAQ,QAAQ,CAAC,WAAW;AAC1B,UAAI,CAAC,eAAe,WAAW,QAAQ,IAAI;AACzC,eAAO,GAAG,OAAO;AAAA,aACZ;AACL,eAAO,KAAK,OAAO,KAAK,OAAO;AAAA;AAAA;AAGnC,mBAAe;AAAA,KACd,CAAC;AAEJ,oBAAkB;AAElB,SACE,qCAAC,WAAD;AAAA,IACE,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,kBACE,qCAAC,MAAD;AAAA,MACE,WAAU;AAAA,MACV;AAAA,MACA,UAAU;AAAA,MACV;AAAA,MACA,UAAU;AAAA,MACV,cAAc,MAAM,iBAAiB;AAAA,MACrC,cAAc,MAAM,iBAAiB;AAAA;AAAA;AAAA;AAO/C,MAAM,QAAQ;AAAA,EAEZ,gBAAgB,UAAU,OAAO,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useRef, useState, useEffect } from 'react';\nimport { PropTypes, describe } from 'react-desc';\nimport { useFocusGroupItem } from '@elliemae/ds-shared';\nimport { DSTooltip } from '@elliemae/ds-tooltip';\nimport { Pill } from './Pill';\n\nfunction OverflowPill({ containerProps = {}, label = '', options = [] }) {\n const ref = useRef(null);\n const [tooltipIsOpen, setTooltipIsOpen] = useState(false);\n const [tooltipText, setTooltipText] = useState('');\n\n useEffect(() => {\n let text = '';\n options.forEach((option) => {\n if (!tooltipText || option === options[0]) {\n text = `${option.label}`;\n } else {\n text = text.concat(`, ${option.label}`);\n }\n });\n setTooltipText(text);\n }, [options]);\n\n useFocusGroupItem(ref);\n\n return (\n <DSTooltip\n isOpen={tooltipIsOpen}\n title={tooltipText}\n zIndex={11}\n triggerComponent={\n <Pill\n className=\"overflow-pill\"\n containerProps={containerProps}\n innerRef={ref}\n label={label}\n tabIndex={-1}\n onMouseEnter={() => setTooltipIsOpen(true)}\n onMouseLeave={() => setTooltipIsOpen(false)}\n />\n }\n />\n );\n}\n\nconst props = {\n /** props to inject to pill wrapper */\n containerProps: PropTypes.object.description('props to inject to pill wrapper'),\n /** pill text label */\n label: PropTypes.string.isRequired.description('pill text label'),\n /** overflow pills options */\n options: PropTypes.array.description('overflow pills options'),\n};\n\nOverflowPill.propTypes = props;\nconst DSOverflowPillWithSchema = describe(OverflowPill);\nDSOverflowPillWithSchema.propTypes = props;\n\nexport { OverflowPill, DSOverflowPillWithSchema };\n"],
|
|
5
|
+
"mappings": "AAAA;ACAA;AACA;AACA;AACA;AACA;AAEA,sBAAsB,EAAE,iBAAiB,IAAI,QAAQ,IAAI,UAAU,MAAM;AACvE,QAAM,MAAM,OAAO;AACnB,QAAM,CAAC,eAAe,oBAAoB,SAAS;AACnD,QAAM,CAAC,aAAa,kBAAkB,SAAS;AAE/C,YAAU,MAAM;AACd,QAAI,OAAO;AACX,YAAQ,QAAQ,CAAC,WAAW;AAC1B,UAAI,CAAC,eAAe,WAAW,QAAQ,IAAI;AACzC,eAAO,GAAG,OAAO;AAAA,aACZ;AACL,eAAO,KAAK,OAAO,KAAK,OAAO;AAAA;AAAA;AAGnC,mBAAe;AAAA,KACd,CAAC;AAEJ,oBAAkB;AAElB,SACE,qCAAC,WAAD;AAAA,IACE,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,kBACE,qCAAC,MAAD;AAAA,MACE,WAAU;AAAA,MACV;AAAA,MACA,UAAU;AAAA,MACV;AAAA,MACA,UAAU;AAAA,MACV,cAAc,MAAM,iBAAiB;AAAA,MACrC,cAAc,MAAM,iBAAiB;AAAA;AAAA;AAAA;AAO/C,MAAM,QAAQ;AAAA,EAEZ,gBAAgB,UAAU,OAAO,YAAY;AAAA,EAE7C,OAAO,UAAU,OAAO,WAAW,YAAY;AAAA,EAE/C,SAAS,UAAU,MAAM,YAAY;AAAA;AAGvC,aAAa,YAAY;AACzB,MAAM,2BAA2B,SAAS;AAC1C,yBAAyB,YAAY;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -18,16 +18,10 @@ import * as React from "react";
|
|
|
18
18
|
import React2 from "react";
|
|
19
19
|
import { describe, PropTypes } from "react-desc";
|
|
20
20
|
import { aggregatedClasses } from "@elliemae/ds-classnames";
|
|
21
|
-
import { FocusGroupProvider } from "@elliemae/ds-shared
|
|
21
|
+
import { FocusGroupProvider } from "@elliemae/ds-shared";
|
|
22
22
|
const pillGroupBlockName = "pill-group";
|
|
23
23
|
const Container = aggregatedClasses("div")(pillGroupBlockName);
|
|
24
|
-
const PillGroup = ({
|
|
25
|
-
containerProps = {},
|
|
26
|
-
onFocusNextGroup,
|
|
27
|
-
onFocusPreviousGroup,
|
|
28
|
-
onFocusGroupSet,
|
|
29
|
-
children
|
|
30
|
-
}) => /* @__PURE__ */ React2.createElement(FocusGroupProvider, {
|
|
24
|
+
const PillGroup = ({ containerProps = {}, onFocusNextGroup, onFocusPreviousGroup, onFocusGroupSet, children }) => /* @__PURE__ */ React2.createElement(FocusGroupProvider, {
|
|
31
25
|
keyBindings: {
|
|
32
26
|
Tab: "next"
|
|
33
27
|
},
|
|
@@ -41,10 +35,7 @@ const props = {
|
|
|
41
35
|
onFocusNextGroup: PropTypes.func.description("focus next group callback"),
|
|
42
36
|
onFocusPreviousGroup: PropTypes.func.description("focus prev group callback"),
|
|
43
37
|
onFocusGroupSet: PropTypes.func.description("focus group set callback"),
|
|
44
|
-
children: PropTypes.oneOfType([
|
|
45
|
-
PropTypes.arrayOf(PropTypes.node),
|
|
46
|
-
PropTypes.node
|
|
47
|
-
]).isRequired.description("pill components")
|
|
38
|
+
children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired.description("pill components")
|
|
48
39
|
};
|
|
49
40
|
PillGroup.propTypes = props;
|
|
50
41
|
const DSPillGroupWithSchema = describe(PillGroup);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/deprecated/PillGroup.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { describe, PropTypes } from 'react-desc';\nimport { aggregatedClasses } from '@elliemae/ds-classnames';\nimport { FocusGroupProvider } from '@elliemae/ds-shared
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;AAAA;ACAA;AACA;AACA;AACA;AAEA,MAAM,qBAAqB;AAEpB,MAAM,YAAY,kBAAkB,OAAO;AAElD,MAAM,YAAY,CAAC
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { describe, PropTypes } from 'react-desc';\nimport { aggregatedClasses } from '@elliemae/ds-classnames';\nimport { FocusGroupProvider } from '@elliemae/ds-shared';\n\nconst pillGroupBlockName = 'pill-group';\n\nexport const Container = aggregatedClasses('div')(pillGroupBlockName);\n\nconst PillGroup = ({ containerProps = {}, onFocusNextGroup, onFocusPreviousGroup, onFocusGroupSet, children }) => (\n <FocusGroupProvider\n keyBindings={{\n Tab: 'next',\n }}\n onFocusGroupSet={onFocusGroupSet}\n onFocusNextGroup={onFocusNextGroup}\n onFocusPreviousGroup={onFocusPreviousGroup}\n orientation=\"horizontal\"\n >\n <Container {...containerProps}>{children}</Container>\n </FocusGroupProvider>\n);\n\nconst props = {\n /** props injected to component wrapper */\n containerProps: PropTypes.object.description('props injected to component wrapper'),\n /** focus next group callback */\n onFocusNextGroup: PropTypes.func.description('focus next group callback'),\n /** focus prev group callback */\n onFocusPreviousGroup: PropTypes.func.description('focus prev group callback'),\n /** focus group set callback */\n onFocusGroupSet: PropTypes.func.description('focus group set callback'),\n /** pill components */\n children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired.description(\n 'pill components',\n ),\n};\n\nPillGroup.propTypes = props;\n\nconst DSPillGroupWithSchema = describe(PillGroup);\nDSPillGroupWithSchema.propTypes = props;\n\nexport { PillGroup, DSPillGroupWithSchema };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;AAAA;ACAA;AACA;AACA;AACA;AAEA,MAAM,qBAAqB;AAEpB,MAAM,YAAY,kBAAkB,OAAO;AAElD,MAAM,YAAY,CAAC,EAAE,iBAAiB,IAAI,kBAAkB,sBAAsB,iBAAiB,eACjG,qCAAC,oBAAD;AAAA,EACE,aAAa;AAAA,IACX,KAAK;AAAA;AAAA,EAEP;AAAA,EACA;AAAA,EACA;AAAA,EACA,aAAY;AAAA,GAEZ,qCAAC,WAAD,mBAAe,iBAAiB;AAIpC,MAAM,QAAQ;AAAA,EAEZ,gBAAgB,UAAU,OAAO,YAAY;AAAA,EAE7C,kBAAkB,UAAU,KAAK,YAAY;AAAA,EAE7C,sBAAsB,UAAU,KAAK,YAAY;AAAA,EAEjD,iBAAiB,UAAU,KAAK,YAAY;AAAA,EAE5C,UAAU,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,OAAO,UAAU,OAAO,WAAW,YAC5F;AAAA;AAIJ,UAAU,YAAY;AAEtB,MAAM,wBAAwB,SAAS;AACvC,sBAAsB,YAAY;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -3,7 +3,7 @@ import React2, { useRef } from "react";
|
|
|
3
3
|
import { PropTypes, describe } from "react-desc";
|
|
4
4
|
import { isFunction } from "@elliemae/ds-utilities";
|
|
5
5
|
import { CloseXsmall } from "@elliemae/ds-icons";
|
|
6
|
-
import { useFocusGroupItem } from "@elliemae/ds-shared
|
|
6
|
+
import { useFocusGroupItem } from "@elliemae/ds-shared";
|
|
7
7
|
import { Pill } from "./Pill";
|
|
8
8
|
function RemovablePill({ containerProps = {}, label = "", onRemove, size = "m", leftAddon }) {
|
|
9
9
|
const ref = useRef(null);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/deprecated/RemovablePill.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useRef } from 'react';\nimport { PropTypes, describe } from 'react-desc';\nimport { isFunction } from '@elliemae/ds-utilities';\nimport { CloseXsmall } from '@elliemae/ds-icons';\nimport { useFocusGroupItem } from '@elliemae/ds-shared
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useRef } from 'react';\nimport { PropTypes, describe } from 'react-desc';\nimport { isFunction } from '@elliemae/ds-utilities';\nimport { CloseXsmall } from '@elliemae/ds-icons';\nimport { useFocusGroupItem } from '@elliemae/ds-shared';\nimport { Pill } from './Pill';\n\nfunction RemovablePill({ containerProps = {}, label = '', onRemove, size = 'm', leftAddon }) {\n const ref = useRef(null);\n const { focusPrevious } = useFocusGroupItem(ref);\n return (\n <Pill\n className=\"removable-pill\"\n data-testid=\"removable-pill\"\n containerProps={containerProps}\n innerRef={ref}\n size={size}\n label={label}\n leftAddon={leftAddon}\n onKeyDown={(e) => {\n if (e.key === 'Backspace' && isFunction(onRemove)) {\n onRemove();\n if (isFunction(focusPrevious)) focusPrevious();\n }\n }}\n rightAddon={\n <CloseXsmall role=\"button\" data-testid=\"remove-pill-button\" className=\"remove-pill-button\" onClick={onRemove} />\n }\n tabIndex={-1}\n />\n );\n}\n\nconst props = {\n /** props injected to component wrapper */\n containerProps: PropTypes.object.description('props injected to component wrapper'),\n /** labeled pill text label */\n label: PropTypes.string.isRequired.description('pill text label'),\n /** remove click callback */\n onRemove: PropTypes.func.description('remove click callback'),\n /** pill size */\n size: PropTypes.oneOf(['m', 'l']).description('pill size'),\n /** addon component to left */\n leftAddon: PropTypes.node.description('addon component to left'),\n};\n\nRemovablePill.propTypes = props;\nconst DSRemovablePillWithSchema = describe(RemovablePill);\nDSRemovablePillWithSchema.propTypes = props;\n\nexport { RemovablePill, DSRemovablePillWithSchema };\n"],
|
|
5
5
|
"mappings": "AAAA;ACAA;AACA;AACA;AACA;AACA;AACA;AAEA,uBAAuB,EAAE,iBAAiB,IAAI,QAAQ,IAAI,UAAU,OAAO,KAAK,aAAa;AAC3F,QAAM,MAAM,OAAO;AACnB,QAAM,EAAE,kBAAkB,kBAAkB;AAC5C,SACE,qCAAC,MAAD;AAAA,IACE,WAAU;AAAA,IACV,eAAY;AAAA,IACZ;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW,CAAC,MAAM;AAChB,UAAI,EAAE,QAAQ,eAAe,WAAW,WAAW;AACjD;AACA,YAAI,WAAW;AAAgB;AAAA;AAAA;AAAA,IAGnC,YACE,qCAAC,aAAD;AAAA,MAAa,MAAK;AAAA,MAAS,eAAY;AAAA,MAAqB,WAAU;AAAA,MAAqB,SAAS;AAAA;AAAA,IAEtG,UAAU;AAAA;AAAA;AAKhB,MAAM,QAAQ;AAAA,EAEZ,gBAAgB,UAAU,OAAO,YAAY;AAAA,EAE7C,OAAO,UAAU,OAAO,WAAW,YAAY;AAAA,EAE/C,UAAU,UAAU,KAAK,YAAY;AAAA,EAErC,MAAM,UAAU,MAAM,CAAC,KAAK,MAAM,YAAY;AAAA,EAE9C,WAAW,UAAU,KAAK,YAAY;AAAA;AAGxC,cAAc,YAAY;AAC1B,MAAM,4BAA4B,SAAS;AAC3C,0BAA0B,YAAY;",
|
|
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-next.
|
|
3
|
+
"version": "3.0.0-next.17",
|
|
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-next.
|
|
151
|
-
"@elliemae/ds-classnames": "3.0.0-next.
|
|
152
|
-
"@elliemae/ds-dropdownmenu": "3.0.0-next.
|
|
153
|
-
"@elliemae/ds-form": "3.0.0-next.
|
|
154
|
-
"@elliemae/ds-grid": "3.0.0-next.
|
|
155
|
-
"@elliemae/ds-icons": "3.0.0-next.
|
|
156
|
-
"@elliemae/ds-modal": "3.0.0-next.
|
|
157
|
-
"@elliemae/ds-popover": "3.0.0-next.
|
|
158
|
-
"@elliemae/ds-props-helpers": "3.0.0-next.
|
|
159
|
-
"@elliemae/ds-shared": "3.0.0-next.
|
|
160
|
-
"@elliemae/ds-system": "3.0.0-next.
|
|
161
|
-
"@elliemae/ds-tooltip": "3.0.0-next.
|
|
162
|
-
"@elliemae/ds-truncated-tooltip-text": "3.0.0-next.
|
|
163
|
-
"@elliemae/ds-utilities": "3.0.0-next.
|
|
150
|
+
"@elliemae/ds-button": "3.0.0-next.17",
|
|
151
|
+
"@elliemae/ds-classnames": "3.0.0-next.17",
|
|
152
|
+
"@elliemae/ds-dropdownmenu": "3.0.0-next.17",
|
|
153
|
+
"@elliemae/ds-form": "3.0.0-next.17",
|
|
154
|
+
"@elliemae/ds-grid": "3.0.0-next.17",
|
|
155
|
+
"@elliemae/ds-icons": "3.0.0-next.17",
|
|
156
|
+
"@elliemae/ds-modal": "3.0.0-next.17",
|
|
157
|
+
"@elliemae/ds-popover": "3.0.0-next.17",
|
|
158
|
+
"@elliemae/ds-props-helpers": "3.0.0-next.17",
|
|
159
|
+
"@elliemae/ds-shared": "3.0.0-next.17",
|
|
160
|
+
"@elliemae/ds-system": "3.0.0-next.17",
|
|
161
|
+
"@elliemae/ds-tooltip": "3.0.0-next.17",
|
|
162
|
+
"@elliemae/ds-truncated-tooltip-text": "3.0.0-next.17",
|
|
163
|
+
"@elliemae/ds-utilities": "3.0.0-next.17",
|
|
164
164
|
"prop-types": "~15.8.1",
|
|
165
165
|
"react-desc": "~4.1.3",
|
|
166
166
|
"uid": "~2.0.0"
|