@elliemae/ds-pills 2.2.1 → 2.3.0-alpha.4
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/cjs/components/Pill.js +56 -49
- package/cjs/components/Pill.js.map +7 -0
- package/cjs/components/PillButton.js +54 -52
- package/cjs/components/PillButton.js.map +7 -0
- package/cjs/components/PillGroup.js +61 -53
- package/cjs/components/PillGroup.js.map +7 -0
- package/cjs/components/index.js +30 -17
- package/cjs/components/index.js.map +7 -0
- package/cjs/components/styled.js +228 -78
- package/cjs/components/styled.js.map +7 -0
- package/cjs/components/types/DropdownPill.js +79 -77
- package/cjs/components/types/DropdownPill.js.map +7 -0
- package/cjs/components/types/InputPill.js +58 -48
- package/cjs/components/types/InputPill.js.map +7 -0
- package/cjs/components/types/LabelPill.js +44 -38
- package/cjs/components/types/LabelPill.js.map +7 -0
- package/cjs/components/types/ReadOnlyPill.js +48 -43
- package/cjs/components/types/ReadOnlyPill.js.map +7 -0
- package/cjs/components/types/RemovablePill.js +60 -53
- package/cjs/components/types/RemovablePill.js.map +7 -0
- package/cjs/components/types/ValuePill.js +48 -43
- package/cjs/components/types/ValuePill.js.map +7 -0
- package/cjs/components/types/index.js +33 -19
- package/cjs/components/types/index.js.map +7 -0
- package/cjs/deprecated/DropdownPill.js +80 -101
- package/cjs/deprecated/DropdownPill.js.map +7 -0
- package/cjs/deprecated/InputPill.js +67 -69
- package/cjs/deprecated/InputPill.js.map +7 -0
- package/cjs/deprecated/LabeledDropdownPills.js +92 -96
- package/cjs/deprecated/LabeledDropdownPills.js.map +7 -0
- package/cjs/deprecated/LabeledDropdownPillsTypes/LabeledDropdownCascadeMenuPill.js +91 -94
- package/cjs/deprecated/LabeledDropdownPillsTypes/LabeledDropdownCascadeMenuPill.js.map +7 -0
- package/cjs/deprecated/LabeledDropdownPillsTypes/LabeledDropdownMultiPill.js +106 -114
- package/cjs/deprecated/LabeledDropdownPillsTypes/LabeledDropdownMultiPill.js.map +7 -0
- package/cjs/deprecated/LabeledDropdownPillsTypes/LabeledDropdownSinglePill.js +119 -127
- package/cjs/deprecated/LabeledDropdownPillsTypes/LabeledDropdownSinglePill.js.map +7 -0
- package/cjs/deprecated/LabeledDropdownPillsTypes/utils.js +39 -15
- package/cjs/deprecated/LabeledDropdownPillsTypes/utils.js.map +7 -0
- package/cjs/deprecated/LabeledPills.js +65 -52
- package/cjs/deprecated/LabeledPills.js.map +7 -0
- package/cjs/deprecated/OverflowPill.js +59 -53
- package/cjs/deprecated/OverflowPill.js.map +7 -0
- package/cjs/deprecated/Pill.js +67 -82
- package/cjs/deprecated/Pill.js.map +7 -0
- package/cjs/deprecated/PillGroup.js +68 -68
- package/cjs/deprecated/PillGroup.js.map +7 -0
- package/cjs/deprecated/ReadOnlyPill.js +93 -94
- package/cjs/deprecated/ReadOnlyPill.js.map +7 -0
- package/cjs/deprecated/RemovablePill.js +61 -57
- package/cjs/deprecated/RemovablePill.js.map +7 -0
- package/cjs/deprecated/index.js +43 -33
- package/cjs/deprecated/index.js.map +7 -0
- package/cjs/index.d.js +27 -2
- package/cjs/index.d.js.map +7 -0
- package/cjs/index.js +37 -43
- package/cjs/index.js.map +7 -0
- package/cjs/props.js +72 -46
- package/cjs/props.js.map +7 -0
- package/cjs/utils.js +43 -25
- package/cjs/utils.js.map +7 -0
- package/esm/components/Pill.js +18 -31
- package/esm/components/Pill.js.map +7 -0
- package/esm/components/PillButton.js +22 -39
- package/esm/components/PillButton.js.map +7 -0
- package/esm/components/PillGroup.js +28 -38
- package/esm/components/PillGroup.js.map +7 -0
- package/esm/components/index.js +5 -3
- package/esm/components/index.js.map +7 -0
- package/esm/components/styled.js +205 -66
- package/esm/components/styled.js.map +7 -0
- package/esm/components/types/DropdownPill.js +50 -67
- package/esm/components/types/DropdownPill.js.map +7 -0
- package/esm/components/types/InputPill.js +25 -35
- package/esm/components/types/InputPill.js.map +7 -0
- package/esm/components/types/LabelPill.js +15 -29
- package/esm/components/types/LabelPill.js.map +7 -0
- package/esm/components/types/ReadOnlyPill.js +19 -34
- package/esm/components/types/ReadOnlyPill.js.map +7 -0
- package/esm/components/types/RemovablePill.js +31 -44
- package/esm/components/types/RemovablePill.js.map +7 -0
- package/esm/components/types/ValuePill.js +19 -34
- package/esm/components/types/ValuePill.js.map +7 -0
- package/esm/components/types/index.js +8 -6
- package/esm/components/types/index.js.map +7 -0
- package/esm/deprecated/DropdownPill.js +49 -86
- package/esm/deprecated/DropdownPill.js.map +7 -0
- package/esm/deprecated/InputPill.js +38 -59
- package/esm/deprecated/InputPill.js.map +7 -0
- package/esm/deprecated/LabeledDropdownPills.js +59 -81
- package/esm/deprecated/LabeledDropdownPills.js.map +7 -0
- package/esm/deprecated/LabeledDropdownPillsTypes/LabeledDropdownCascadeMenuPill.js +60 -84
- package/esm/deprecated/LabeledDropdownPillsTypes/LabeledDropdownCascadeMenuPill.js.map +7 -0
- package/esm/deprecated/LabeledDropdownPillsTypes/LabeledDropdownMultiPill.js +65 -94
- package/esm/deprecated/LabeledDropdownPillsTypes/LabeledDropdownMultiPill.js.map +7 -0
- package/esm/deprecated/LabeledDropdownPillsTypes/LabeledDropdownSinglePill.js +79 -108
- package/esm/deprecated/LabeledDropdownPillsTypes/LabeledDropdownSinglePill.js.map +7 -0
- package/esm/deprecated/LabeledDropdownPillsTypes/utils.js +9 -10
- package/esm/deprecated/LabeledDropdownPillsTypes/utils.js.map +7 -0
- package/esm/deprecated/LabeledPills.js +34 -41
- package/esm/deprecated/LabeledPills.js.map +7 -0
- package/esm/deprecated/OverflowPill.js +25 -37
- package/esm/deprecated/OverflowPill.js.map +7 -0
- package/esm/deprecated/Pill.js +39 -71
- package/esm/deprecated/Pill.js.map +7 -0
- package/esm/deprecated/PillGroup.js +39 -56
- package/esm/deprecated/PillGroup.js.map +7 -0
- package/esm/deprecated/ReadOnlyPill.js +60 -79
- package/esm/deprecated/ReadOnlyPill.js.map +7 -0
- package/esm/deprecated/RemovablePill.js +30 -45
- package/esm/deprecated/RemovablePill.js.map +7 -0
- package/esm/deprecated/index.js +14 -8
- package/esm/deprecated/index.js.map +7 -0
- package/esm/index.d.js +2 -1
- package/esm/index.d.js.map +7 -0
- package/esm/index.js +8 -11
- package/esm/index.js.map +7 -0
- package/esm/props.js +42 -36
- package/esm/props.js.map +7 -0
- package/esm/utils.js +16 -23
- package/esm/utils.js.map +7 -0
- package/package.json +15 -15
- package/types/deprecated/LabeledDropdownPills.d.ts +1 -1
- package/types/deprecated/LabeledDropdownPillsTypes/LabeledDropdownCascadeMenuPill.d.ts +3 -1
- package/types/deprecated/LabeledDropdownPillsTypes/LabeledDropdownMultiPill.d.ts +3 -1
- package/types/deprecated/LabeledDropdownPillsTypes/LabeledDropdownSinglePill.d.ts +1 -0
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 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;AACtE,QAAM,gBAAgB,iBAClB,CAAC,EAAE,eAAe,mDAAC,6DAAD;AAAA,IAA4B,OAAO;AAAA,OACrD,qBAAM;AAEV,SACE,mDAAC,sCAAD;AAAA,IACE;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
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -1,19 +1,33 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
var
|
|
6
|
-
var
|
|
7
|
-
var
|
|
8
|
-
var
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
1
|
+
var __create = Object.create;
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
6
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
7
|
+
var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
|
|
8
|
+
var __reExport = (target, module2, copyDefault, desc) => {
|
|
9
|
+
if (module2 && typeof module2 === "object" || typeof module2 === "function") {
|
|
10
|
+
for (let key of __getOwnPropNames(module2))
|
|
11
|
+
if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
|
|
12
|
+
__defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
|
|
13
|
+
}
|
|
14
|
+
return target;
|
|
15
|
+
};
|
|
16
|
+
var __toESM = (module2, isNodeMode) => {
|
|
17
|
+
return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
|
|
18
|
+
};
|
|
19
|
+
var __toCommonJS = /* @__PURE__ */ ((cache) => {
|
|
20
|
+
return (module2, temp) => {
|
|
21
|
+
return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
|
|
22
|
+
};
|
|
23
|
+
})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
|
|
24
|
+
var types_exports = {};
|
|
25
|
+
var React = __toESM(require("react"));
|
|
26
|
+
__reExport(types_exports, require("./DropdownPill"));
|
|
27
|
+
__reExport(types_exports, require("./InputPill"));
|
|
28
|
+
__reExport(types_exports, require("./LabelPill"));
|
|
29
|
+
__reExport(types_exports, require("./ReadOnlyPill"));
|
|
30
|
+
__reExport(types_exports, require("./RemovablePill"));
|
|
31
|
+
__reExport(types_exports, require("./ValuePill"));
|
|
32
|
+
module.exports = __toCommonJS(types_exports);
|
|
33
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../src/components/types/index.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
+
"sourcesContent": ["export * from './DropdownPill';\nexport * from './InputPill';\nexport * from './LabelPill';\nexport * from './ReadOnlyPill';\nexport * from './RemovablePill';\nexport * from './ValuePill';\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;ACAA,YAAuB;ADAvB,0BAAc;AACd,0BAAc;AACd,0BAAc;AACd,0BAAc;AACd,0BAAc;AACd,0BAAc;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -1,113 +1,92 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
var
|
|
6
|
-
var
|
|
7
|
-
var
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
var
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
var
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
1
|
+
var __create = Object.create;
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
6
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
7
|
+
var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
|
|
8
|
+
var __export = (target, all) => {
|
|
9
|
+
for (var name in all)
|
|
10
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
11
|
+
};
|
|
12
|
+
var __reExport = (target, module2, copyDefault, desc) => {
|
|
13
|
+
if (module2 && typeof module2 === "object" || typeof module2 === "function") {
|
|
14
|
+
for (let key of __getOwnPropNames(module2))
|
|
15
|
+
if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
|
|
16
|
+
__defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
|
|
17
|
+
}
|
|
18
|
+
return target;
|
|
19
|
+
};
|
|
20
|
+
var __toESM = (module2, isNodeMode) => {
|
|
21
|
+
return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
|
|
22
|
+
};
|
|
23
|
+
var __toCommonJS = /* @__PURE__ */ ((cache) => {
|
|
24
|
+
return (module2, temp) => {
|
|
25
|
+
return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
|
|
26
|
+
};
|
|
27
|
+
})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
|
|
28
|
+
var DropdownPill_exports = {};
|
|
29
|
+
__export(DropdownPill_exports, {
|
|
30
|
+
DSDropdownPillWithSchema: () => DSDropdownPillWithSchema,
|
|
31
|
+
DropdownPill: () => DropdownPill
|
|
32
|
+
});
|
|
33
|
+
var React = __toESM(require("react"));
|
|
34
|
+
var import_react = __toESM(require("react"));
|
|
35
|
+
var import_react_desc = require("react-desc");
|
|
36
|
+
var import_ds_dropdownmenu = require("@elliemae/ds-dropdownmenu");
|
|
37
|
+
var import_ds_icons = require("@elliemae/ds-icons");
|
|
38
|
+
var import_useFocusGroupItem = require("@elliemae/ds-shared/FocusGroup/useFocusGroupItem");
|
|
39
|
+
var import_Pill = require("./Pill");
|
|
40
|
+
function DropdownPill({
|
|
41
|
+
containerProps = {},
|
|
42
|
+
label = "",
|
|
43
|
+
variant,
|
|
44
|
+
tabIndex = -1,
|
|
45
|
+
closeMenuOnItemSelection = false,
|
|
46
|
+
maxWidth,
|
|
47
|
+
minWidth,
|
|
48
|
+
...dropdownProps
|
|
49
|
+
}) {
|
|
50
|
+
const ref = (0, import_react.useRef)(null);
|
|
51
|
+
const [chevronEl, chevronRef] = (0, import_react.useState)();
|
|
52
|
+
const { focusFirst } = (0, import_useFocusGroupItem.useFocusGroupItem)(ref);
|
|
53
|
+
return /* @__PURE__ */ import_react.default.createElement(import_ds_dropdownmenu.DSDropdownMenu, {
|
|
54
|
+
...dropdownProps,
|
|
55
|
+
closeMenuOnItemSelection,
|
|
45
56
|
maxWidth,
|
|
46
|
-
minWidth
|
|
47
|
-
} = _ref,
|
|
48
|
-
dropdownProps = _objectWithoutProperties__default["default"](_ref, _excluded);
|
|
49
|
-
|
|
50
|
-
const ref = React.useRef(null);
|
|
51
|
-
const [chevronEl, chevronRef] = React.useState();
|
|
52
|
-
const {
|
|
53
|
-
focusFirst
|
|
54
|
-
} = useFocusGroupItem__default["default"](ref);
|
|
55
|
-
return /*#__PURE__*/jsxRuntime.jsx(DSDropdownMenu__default["default"], _objectSpread(_objectSpread({}, dropdownProps), {}, {
|
|
56
|
-
closeMenuOnItemSelection: closeMenuOnItemSelection,
|
|
57
|
-
maxWidth: maxWidth,
|
|
58
57
|
hideIfNotVisible: true,
|
|
59
|
-
menuProps: {
|
|
60
|
-
|
|
61
|
-
zIndex: 100
|
|
62
|
-
},
|
|
63
|
-
minWidth: minWidth,
|
|
58
|
+
menuProps: { className: "dropdown-pill-menu", zIndex: 100 },
|
|
59
|
+
minWidth,
|
|
64
60
|
onClose: focusFirst,
|
|
65
61
|
referenceNode: chevronEl,
|
|
66
|
-
triggerComponent:
|
|
62
|
+
triggerComponent: /* @__PURE__ */ import_react.default.createElement(import_Pill.Pill, {
|
|
67
63
|
"data-testid": "dropdown-pill",
|
|
68
64
|
className: "dropdown-pill",
|
|
69
|
-
containerProps:
|
|
70
|
-
role: 'listbox'
|
|
71
|
-
}, containerProps),
|
|
65
|
+
containerProps: { role: "listbox", ...containerProps },
|
|
72
66
|
innerRef: ref,
|
|
73
|
-
label
|
|
74
|
-
rightAddon:
|
|
75
|
-
ref: chevronRef
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
variant: variant
|
|
67
|
+
label,
|
|
68
|
+
rightAddon: /* @__PURE__ */ import_react.default.createElement("div", {
|
|
69
|
+
ref: chevronRef
|
|
70
|
+
}, /* @__PURE__ */ import_react.default.createElement(import_ds_icons.ChevronDown, {
|
|
71
|
+
className: "dropdown-pill-chevron-down",
|
|
72
|
+
"data-testid": "dropdown-pill-button"
|
|
73
|
+
})),
|
|
74
|
+
tabIndex,
|
|
75
|
+
variant
|
|
83
76
|
})
|
|
84
|
-
})
|
|
77
|
+
});
|
|
85
78
|
}
|
|
86
|
-
|
|
87
79
|
const props = {
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
variant: reactDesc.PropTypes.oneOf(['value', 'title']).description('pill variant'),
|
|
96
|
-
|
|
97
|
-
/** html focus border */
|
|
98
|
-
tabIndex: reactDesc.PropTypes.number.description('html focus order'),
|
|
99
|
-
|
|
100
|
-
/** close menu on item selection */
|
|
101
|
-
closeMenuOnItemSelection: reactDesc.PropTypes.bool.description('close menu on item selection'),
|
|
102
|
-
|
|
103
|
-
/** pill max width */
|
|
104
|
-
maxWidth: reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.string, reactDesc.PropTypes.number]).description('pill max width'),
|
|
105
|
-
|
|
106
|
-
/** pill min width */
|
|
107
|
-
minWidth: reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.string, reactDesc.PropTypes.number]).description('pill min width')
|
|
80
|
+
containerProps: import_react_desc.PropTypes.object.description("props injected to component wrapper"),
|
|
81
|
+
label: import_react_desc.PropTypes.string.isRequired.description("pill text label"),
|
|
82
|
+
variant: import_react_desc.PropTypes.oneOf(["value", "title"]).description("pill variant"),
|
|
83
|
+
tabIndex: import_react_desc.PropTypes.number.description("html focus order"),
|
|
84
|
+
closeMenuOnItemSelection: import_react_desc.PropTypes.bool.description("close menu on item selection"),
|
|
85
|
+
maxWidth: import_react_desc.PropTypes.oneOfType([import_react_desc.PropTypes.string, import_react_desc.PropTypes.number]).description("pill max width"),
|
|
86
|
+
minWidth: import_react_desc.PropTypes.oneOfType([import_react_desc.PropTypes.string, import_react_desc.PropTypes.number]).description("pill min width")
|
|
108
87
|
};
|
|
109
|
-
|
|
88
|
+
DropdownPill.propTypes = props;
|
|
89
|
+
const DSDropdownPillWithSchema = (0, import_react_desc.describe)(DropdownPill);
|
|
110
90
|
DSDropdownPillWithSchema.propTypes = props;
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
exports.DropdownPill = DropdownPill;
|
|
91
|
+
module.exports = __toCommonJS(DropdownPill_exports);
|
|
92
|
+
//# sourceMappingURL=DropdownPill.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 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/FocusGroup/useFocusGroupItem';\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,+BAAkC;AAClC,kBAAqB;AAErB,sBAAsB;AAAA,EACpB,iBAAiB;AAAA,EACjB,QAAQ;AAAA,EACR;AAAA,EACA,WAAW;AAAA,EACX,2BAA2B;AAAA,EAC3B;AAAA,EACA;AAAA,KACG;AAAA,GACF;AACD,QAAM,MAAM,yBAAO;AACnB,QAAM,CAAC,WAAW,cAAc;AAChC,QAAM,EAAE,eAAe,gDAAkB;AACzC,SACE,mDAAC,uCAAD;AAAA,OACM;AAAA,IACJ;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,EAAE,MAAM,cAAc;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
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -1,78 +1,76 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
var
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
var
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
const _excluded = ["containerProps", "placeholder", "onChange", "onRemove", "value", "type"];
|
|
27
|
-
|
|
28
|
-
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
29
|
-
|
|
30
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
31
|
-
const StyledInputPill = dsClassnames.aggregatedClasses(Pill.Pill)('input-pill', null, _ref => {
|
|
32
|
-
let {
|
|
33
|
-
value
|
|
34
|
-
} = _ref;
|
|
35
|
-
return {
|
|
36
|
-
value
|
|
1
|
+
var __create = Object.create;
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
6
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
7
|
+
var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
|
|
8
|
+
var __export = (target, all) => {
|
|
9
|
+
for (var name in all)
|
|
10
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
11
|
+
};
|
|
12
|
+
var __reExport = (target, module2, copyDefault, desc) => {
|
|
13
|
+
if (module2 && typeof module2 === "object" || typeof module2 === "function") {
|
|
14
|
+
for (let key of __getOwnPropNames(module2))
|
|
15
|
+
if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
|
|
16
|
+
__defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
|
|
17
|
+
}
|
|
18
|
+
return target;
|
|
19
|
+
};
|
|
20
|
+
var __toESM = (module2, isNodeMode) => {
|
|
21
|
+
return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
|
|
22
|
+
};
|
|
23
|
+
var __toCommonJS = /* @__PURE__ */ ((cache) => {
|
|
24
|
+
return (module2, temp) => {
|
|
25
|
+
return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
|
|
37
26
|
};
|
|
27
|
+
})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
|
|
28
|
+
var InputPill_exports = {};
|
|
29
|
+
__export(InputPill_exports, {
|
|
30
|
+
InputPill: () => InputPill
|
|
38
31
|
});
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
32
|
+
var React = __toESM(require("react"));
|
|
33
|
+
var import_react = __toESM(require("react"));
|
|
34
|
+
var import_ds_icons = require("@elliemae/ds-icons");
|
|
35
|
+
var import_ds_classnames = require("@elliemae/ds-classnames");
|
|
36
|
+
var import_ds_form = require("@elliemae/ds-form");
|
|
37
|
+
var import_Pill = require("./Pill");
|
|
38
|
+
const StyledInputPill = (0, import_ds_classnames.aggregatedClasses)(import_Pill.Pill)("input-pill", null, ({ value }) => ({
|
|
39
|
+
value
|
|
40
|
+
}));
|
|
41
|
+
function InputPill({
|
|
42
|
+
containerProps = {},
|
|
43
|
+
placeholder = "Enter Value",
|
|
44
|
+
onChange = () => {
|
|
45
|
+
},
|
|
46
|
+
onRemove,
|
|
47
|
+
value,
|
|
48
|
+
type,
|
|
49
|
+
...otherProps
|
|
50
|
+
}) {
|
|
51
|
+
let TypeOfInput = import_ds_form.DSInput;
|
|
53
52
|
switch (type) {
|
|
54
|
-
case
|
|
55
|
-
TypeOfInput =
|
|
53
|
+
case "inputText":
|
|
54
|
+
TypeOfInput = import_ds_form.DSInput;
|
|
55
|
+
break;
|
|
56
|
+
case "inputMask":
|
|
57
|
+
TypeOfInput = import_ds_form.DSInputMask;
|
|
56
58
|
break;
|
|
57
|
-
|
|
58
|
-
case 'inputMask':
|
|
59
|
-
TypeOfInput = dsForm.DSInputMask;
|
|
59
|
+
default:
|
|
60
60
|
break;
|
|
61
61
|
}
|
|
62
|
-
|
|
63
|
-
return /*#__PURE__*/_jsx__default["default"](StyledInputPill, {
|
|
62
|
+
return /* @__PURE__ */ import_react.default.createElement(StyledInputPill, {
|
|
64
63
|
className: "input-pill",
|
|
65
|
-
classProps: {
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
containerProps: containerProps,
|
|
69
|
-
label: /*#__PURE__*/jsxRuntime.jsx(TypeOfInput, _objectSpread({
|
|
64
|
+
classProps: { value },
|
|
65
|
+
containerProps,
|
|
66
|
+
label: /* @__PURE__ */ import_react.default.createElement(TypeOfInput, {
|
|
70
67
|
"data-testid": "input-pill",
|
|
71
|
-
onChange
|
|
72
|
-
placeholder
|
|
73
|
-
value
|
|
74
|
-
|
|
75
|
-
|
|
68
|
+
onChange,
|
|
69
|
+
placeholder,
|
|
70
|
+
value,
|
|
71
|
+
...otherProps
|
|
72
|
+
}),
|
|
73
|
+
rightAddon: value && /* @__PURE__ */ import_react.default.createElement(import_ds_icons.CloseXsmall, {
|
|
76
74
|
className: "remove-pill-button",
|
|
77
75
|
"data-testid": "remove-pill-button",
|
|
78
76
|
onClick: onRemove
|
|
@@ -80,5 +78,5 @@ function InputPill(_ref2) {
|
|
|
80
78
|
tabIndex: -1
|
|
81
79
|
});
|
|
82
80
|
}
|
|
83
|
-
|
|
84
|
-
|
|
81
|
+
module.exports = __toCommonJS(InputPill_exports);
|
|
82
|
+
//# sourceMappingURL=InputPill.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../src/deprecated/InputPill.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
+
"sourcesContent": ["import React from 'react';\nimport { CloseXsmall } from '@elliemae/ds-icons';\nimport { aggregatedClasses } from '@elliemae/ds-classnames';\nimport { DSInput, DSInputMask } from '@elliemae/ds-form';\nimport { Pill } from './Pill';\n\nconst StyledInputPill = aggregatedClasses(Pill)('input-pill', null, ({ value }) => ({\n value,\n}));\n\nexport function InputPill({\n containerProps = {},\n placeholder = 'Enter Value',\n onChange = () => {},\n onRemove,\n value,\n type,\n ...otherProps\n}) {\n let TypeOfInput = DSInput;\n // TODO: implement the DSTimeInput, see how because it returns a moment()\n // TODO: implement the DSDateInput\n switch (type) {\n case 'inputText':\n TypeOfInput = DSInput;\n break;\n case 'inputMask':\n TypeOfInput = DSInputMask;\n break;\n default:\n break;\n }\n\n return (\n <StyledInputPill\n className=\"input-pill\"\n classProps={{ value }}\n containerProps={containerProps}\n label={\n <TypeOfInput\n data-testid=\"input-pill\"\n onChange={onChange}\n placeholder={placeholder}\n value={value}\n {...otherProps}\n />\n }\n rightAddon={\n value && <CloseXsmall className=\"remove-pill-button\" data-testid=\"remove-pill-button\" onClick={onRemove} />\n }\n tabIndex={-1}\n />\n );\n}\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAClB,sBAA4B;AAC5B,2BAAkC;AAClC,qBAAqC;AACrC,kBAAqB;AAErB,MAAM,kBAAkB,4CAAkB,kBAAM,cAAc,MAAM,CAAC,EAAE,YAAa;AAAA,EAClF;AAAA;AAGK,mBAAmB;AAAA,EACxB,iBAAiB;AAAA,EACjB,cAAc;AAAA,EACd,WAAW,MAAM;AAAA;AAAA,EACjB;AAAA,EACA;AAAA,EACA;AAAA,KACG;AAAA,GACF;AACD,MAAI,cAAc;AAGlB,UAAQ;AAAA,SACD;AACH,oBAAc;AACd;AAAA,SACG;AACH,oBAAc;AACd;AAAA;AAEA;AAAA;AAGJ,SACE,mDAAC,iBAAD;AAAA,IACE,WAAU;AAAA,IACV,YAAY,EAAE;AAAA,IACd;AAAA,IACA,OACE,mDAAC,aAAD;AAAA,MACE,eAAY;AAAA,MACZ;AAAA,MACA;AAAA,MACA;AAAA,SACI;AAAA;AAAA,IAGR,YACE,SAAS,mDAAC,6BAAD;AAAA,MAAa,WAAU;AAAA,MAAqB,eAAY;AAAA,MAAqB,SAAS;AAAA;AAAA,IAEjG,UAAU;AAAA;AAAA;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|