@elliemae/ds-pills 2.3.0-alpha.8 → 2.3.0-next.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/cjs/components/Pill.js +53 -0
- package/cjs/components/PillButton.js +56 -0
- package/cjs/components/PillGroup.js +64 -0
- package/cjs/components/index.js +17 -0
- package/cjs/components/styled.js +85 -0
- package/cjs/components/types/DropdownPill.js +86 -0
- package/cjs/components/types/InputPill.js +74 -0
- package/cjs/components/types/LabelPill.js +46 -0
- package/cjs/components/types/ReadOnlyPill.js +50 -0
- package/cjs/components/types/RemovablePill.js +72 -0
- package/cjs/components/types/ValuePill.js +54 -0
- package/cjs/components/types/index.js +19 -0
- package/cjs/deprecated/DropdownPill.js +113 -0
- package/cjs/deprecated/InputPill.js +84 -0
- package/cjs/deprecated/LabeledDropdownPills.js +106 -0
- package/cjs/deprecated/LabeledDropdownPillsTypes/LabeledDropdownCascadeMenuPill.js +134 -0
- package/cjs/deprecated/LabeledDropdownPillsTypes/LabeledDropdownMultiPill.js +153 -0
- package/cjs/deprecated/LabeledDropdownPillsTypes/LabeledDropdownSinglePill.js +162 -0
- package/cjs/deprecated/LabeledDropdownPillsTypes/utils.js +20 -0
- package/cjs/deprecated/LabeledPills.js +62 -0
- package/cjs/deprecated/OverflowPill.js +73 -0
- package/cjs/deprecated/Pill.js +88 -0
- package/cjs/deprecated/PillGroup.js +72 -0
- package/cjs/deprecated/ReadOnlyPill.js +101 -0
- package/cjs/deprecated/RemovablePill.js +74 -0
- package/cjs/deprecated/index.js +33 -0
- package/cjs/index.d.js +2 -0
- package/cjs/index.js +43 -0
- package/cjs/props.js +69 -0
- package/cjs/utils.js +28 -0
- package/esm/components/Pill.js +44 -0
- package/esm/components/PillButton.js +46 -0
- package/esm/components/PillGroup.js +53 -0
- package/esm/components/index.js +3 -0
- package/esm/components/styled.js +67 -0
- package/esm/components/types/DropdownPill.js +76 -0
- package/esm/components/types/InputPill.js +65 -0
- package/esm/components/types/LabelPill.js +37 -0
- package/esm/components/types/ReadOnlyPill.js +41 -0
- package/esm/components/types/RemovablePill.js +63 -0
- package/esm/components/types/ValuePill.js +45 -0
- package/esm/components/types/index.js +6 -0
- package/esm/deprecated/DropdownPill.js +100 -0
- package/esm/deprecated/InputPill.js +74 -0
- package/esm/deprecated/LabeledDropdownPills.js +95 -0
- package/esm/deprecated/LabeledDropdownPillsTypes/LabeledDropdownCascadeMenuPill.js +126 -0
- package/esm/deprecated/LabeledDropdownPillsTypes/LabeledDropdownMultiPill.js +145 -0
- package/esm/deprecated/LabeledDropdownPillsTypes/LabeledDropdownSinglePill.js +154 -0
- package/esm/deprecated/LabeledDropdownPillsTypes/utils.js +16 -0
- package/esm/deprecated/LabeledPills.js +53 -0
- package/esm/deprecated/OverflowPill.js +62 -0
- package/esm/deprecated/Pill.js +76 -0
- package/esm/deprecated/PillGroup.js +60 -0
- package/esm/deprecated/ReadOnlyPill.js +90 -0
- package/esm/deprecated/RemovablePill.js +64 -0
- package/esm/deprecated/index.js +8 -0
- package/esm/index.d.js +1 -0
- package/esm/index.js +11 -0
- package/esm/props.js +60 -0
- package/esm/utils.js +24 -0
- package/package.json +86 -88
- package/types/components/Pill.d.ts +5 -0
- package/types/components/PillButton.d.ts +5 -0
- package/types/components/PillGroup.d.ts +13 -0
- package/types/components/index.d.ts +3 -0
- package/types/components/styled.d.ts +24 -0
- package/types/components/types/DropdownPill.d.ts +3 -0
- package/types/components/types/InputPill.d.ts +3 -0
- package/types/components/types/LabelPill.d.ts +3 -0
- package/types/components/types/ReadOnlyPill.d.ts +3 -0
- package/types/components/types/RemovablePill.d.ts +3 -0
- package/types/components/types/ValuePill.d.ts +3 -0
- package/types/components/types/index.d.ts +6 -0
- package/types/deprecated/DropdownPill.d.ts +66 -0
- package/types/deprecated/InputPill.d.ts +10 -0
- package/types/deprecated/LabeledDropdownPills.d.ts +82 -0
- package/types/deprecated/LabeledDropdownPillsTypes/LabeledDropdownCascadeMenuPill.d.ts +15 -0
- package/types/deprecated/LabeledDropdownPillsTypes/LabeledDropdownMultiPill.d.ts +13 -0
- package/types/deprecated/LabeledDropdownPillsTypes/LabeledDropdownSinglePill.d.ts +28 -0
- package/types/deprecated/LabeledDropdownPillsTypes/utils.d.ts +1 -0
- package/types/deprecated/LabeledPills.d.ts +52 -0
- package/types/deprecated/OverflowPill.d.ts +33 -0
- package/types/deprecated/Pill.d.ts +59 -0
- package/types/deprecated/PillGroup.d.ts +50 -0
- package/types/deprecated/ReadOnlyPill.d.ts +56 -0
- package/types/deprecated/RemovablePill.d.ts +49 -0
- package/types/deprecated/index.d.ts +9 -0
- package/types/index.d.ts +3 -0
- package/types/props.d.ts +92 -0
- package/types/tests/DSPill.test.d.ts +1 -0
- package/types/tests/DSPillGroup.test.d.ts +1 -0
- package/types/tests/events/DSPill.events.keyboard.test.d.ts +1 -0
- package/types/tests/events/DSPill.events.test.d.ts +1 -0
- package/types/tests/events/DSPillGroup.events.keyboard.test.d.ts +1 -0
- package/types/tests/events/DSPillGroup.events.test.d.ts +1 -0
- package/types/utils.d.ts +4 -0
- package/dist/cjs/components/Pill.js +0 -60
- package/dist/cjs/components/Pill.js.map +0 -7
- package/dist/cjs/components/PillButton.js +0 -58
- package/dist/cjs/components/PillButton.js.map +0 -7
- package/dist/cjs/components/PillGroup.js +0 -72
- package/dist/cjs/components/PillGroup.js.map +0 -7
- package/dist/cjs/components/index.js +0 -30
- package/dist/cjs/components/index.js.map +0 -7
- package/dist/cjs/components/styled.js +0 -235
- package/dist/cjs/components/styled.js.map +0 -7
- package/dist/cjs/components/types/DropdownPill.js +0 -88
- package/dist/cjs/components/types/DropdownPill.js.map +0 -7
- package/dist/cjs/components/types/InputPill.js +0 -84
- package/dist/cjs/components/types/InputPill.js.map +0 -7
- package/dist/cjs/components/types/LabelPill.js +0 -52
- package/dist/cjs/components/types/LabelPill.js.map +0 -7
- package/dist/cjs/components/types/ReadOnlyPill.js +0 -55
- package/dist/cjs/components/types/ReadOnlyPill.js.map +0 -7
- package/dist/cjs/components/types/RemovablePill.js +0 -79
- package/dist/cjs/components/types/RemovablePill.js.map +0 -7
- package/dist/cjs/components/types/ValuePill.js +0 -59
- package/dist/cjs/components/types/ValuePill.js.map +0 -7
- package/dist/cjs/components/types/index.js +0 -33
- package/dist/cjs/components/types/index.js.map +0 -7
- package/dist/cjs/deprecated/DropdownPill.js +0 -92
- package/dist/cjs/deprecated/DropdownPill.js.map +0 -7
- package/dist/cjs/deprecated/InputPill.js +0 -82
- package/dist/cjs/deprecated/InputPill.js.map +0 -7
- package/dist/cjs/deprecated/LabeledDropdownPills.js +0 -102
- package/dist/cjs/deprecated/LabeledDropdownPills.js.map +0 -7
- package/dist/cjs/deprecated/LabeledDropdownPillsTypes/LabeledDropdownCascadeMenuPill.js +0 -131
- package/dist/cjs/deprecated/LabeledDropdownPillsTypes/LabeledDropdownCascadeMenuPill.js.map +0 -7
- package/dist/cjs/deprecated/LabeledDropdownPillsTypes/LabeledDropdownMultiPill.js +0 -145
- package/dist/cjs/deprecated/LabeledDropdownPillsTypes/LabeledDropdownMultiPill.js.map +0 -7
- package/dist/cjs/deprecated/LabeledDropdownPillsTypes/LabeledDropdownSinglePill.js +0 -154
- package/dist/cjs/deprecated/LabeledDropdownPillsTypes/LabeledDropdownSinglePill.js.map +0 -7
- package/dist/cjs/deprecated/LabeledDropdownPillsTypes/utils.js +0 -44
- package/dist/cjs/deprecated/LabeledDropdownPillsTypes/utils.js.map +0 -7
- package/dist/cjs/deprecated/LabeledPills.js +0 -75
- package/dist/cjs/deprecated/LabeledPills.js.map +0 -7
- package/dist/cjs/deprecated/OverflowPill.js +0 -79
- package/dist/cjs/deprecated/OverflowPill.js.map +0 -7
- package/dist/cjs/deprecated/Pill.js +0 -73
- package/dist/cjs/deprecated/Pill.js.map +0 -7
- package/dist/cjs/deprecated/PillGroup.js +0 -72
- package/dist/cjs/deprecated/PillGroup.js.map +0 -7
- package/dist/cjs/deprecated/ReadOnlyPill.js +0 -100
- package/dist/cjs/deprecated/ReadOnlyPill.js.map +0 -7
- package/dist/cjs/deprecated/RemovablePill.js +0 -78
- package/dist/cjs/deprecated/RemovablePill.js.map +0 -7
- package/dist/cjs/deprecated/index.js +0 -43
- package/dist/cjs/deprecated/index.js.map +0 -7
- package/dist/cjs/index.d.js +0 -27
- package/dist/cjs/index.d.js.map +0 -7
- package/dist/cjs/index.js +0 -37
- package/dist/cjs/index.js.map +0 -7
- package/dist/cjs/props.js +0 -95
- package/dist/cjs/props.js.map +0 -7
- package/dist/cjs/utils.js +0 -46
- package/dist/cjs/utils.js.map +0 -7
- package/dist/esm/components/Pill.js +0 -31
- package/dist/esm/components/Pill.js.map +0 -7
- package/dist/esm/components/PillButton.js +0 -29
- package/dist/esm/components/PillButton.js.map +0 -7
- package/dist/esm/components/PillGroup.js +0 -43
- package/dist/esm/components/PillGroup.js.map +0 -7
- package/dist/esm/components/index.js +0 -5
- package/dist/esm/components/index.js.map +0 -7
- package/dist/esm/components/styled.js +0 -206
- package/dist/esm/components/styled.js.map +0 -7
- package/dist/esm/components/types/DropdownPill.js +0 -59
- package/dist/esm/components/types/DropdownPill.js.map +0 -7
- package/dist/esm/components/types/InputPill.js +0 -55
- package/dist/esm/components/types/InputPill.js.map +0 -7
- package/dist/esm/components/types/LabelPill.js +0 -23
- package/dist/esm/components/types/LabelPill.js.map +0 -7
- package/dist/esm/components/types/ReadOnlyPill.js +0 -26
- package/dist/esm/components/types/ReadOnlyPill.js.map +0 -7
- package/dist/esm/components/types/RemovablePill.js +0 -50
- package/dist/esm/components/types/RemovablePill.js.map +0 -7
- package/dist/esm/components/types/ValuePill.js +0 -30
- package/dist/esm/components/types/ValuePill.js.map +0 -7
- package/dist/esm/components/types/index.js +0 -8
- package/dist/esm/components/types/index.js.map +0 -7
- package/dist/esm/deprecated/DropdownPill.js +0 -63
- package/dist/esm/deprecated/DropdownPill.js.map +0 -7
- package/dist/esm/deprecated/InputPill.js +0 -53
- package/dist/esm/deprecated/InputPill.js.map +0 -7
- package/dist/esm/deprecated/LabeledDropdownPills.js +0 -73
- package/dist/esm/deprecated/LabeledDropdownPills.js.map +0 -7
- package/dist/esm/deprecated/LabeledDropdownPillsTypes/LabeledDropdownCascadeMenuPill.js +0 -102
- package/dist/esm/deprecated/LabeledDropdownPillsTypes/LabeledDropdownCascadeMenuPill.js.map +0 -7
- package/dist/esm/deprecated/LabeledDropdownPillsTypes/LabeledDropdownMultiPill.js +0 -116
- package/dist/esm/deprecated/LabeledDropdownPillsTypes/LabeledDropdownMultiPill.js.map +0 -7
- package/dist/esm/deprecated/LabeledDropdownPillsTypes/LabeledDropdownSinglePill.js +0 -125
- package/dist/esm/deprecated/LabeledDropdownPillsTypes/LabeledDropdownSinglePill.js.map +0 -7
- package/dist/esm/deprecated/LabeledDropdownPillsTypes/utils.js +0 -15
- package/dist/esm/deprecated/LabeledDropdownPillsTypes/utils.js.map +0 -7
- package/dist/esm/deprecated/LabeledPills.js +0 -46
- package/dist/esm/deprecated/LabeledPills.js.map +0 -7
- package/dist/esm/deprecated/OverflowPill.js +0 -50
- package/dist/esm/deprecated/OverflowPill.js.map +0 -7
- package/dist/esm/deprecated/Pill.js +0 -44
- package/dist/esm/deprecated/Pill.js.map +0 -7
- package/dist/esm/deprecated/PillGroup.js +0 -43
- package/dist/esm/deprecated/PillGroup.js.map +0 -7
- package/dist/esm/deprecated/ReadOnlyPill.js +0 -71
- package/dist/esm/deprecated/ReadOnlyPill.js.map +0 -7
- package/dist/esm/deprecated/RemovablePill.js +0 -49
- package/dist/esm/deprecated/RemovablePill.js.map +0 -7
- package/dist/esm/deprecated/index.js +0 -14
- package/dist/esm/deprecated/index.js.map +0 -7
- package/dist/esm/index.d.js +0 -2
- package/dist/esm/index.d.js.map +0 -7
- package/dist/esm/index.js +0 -8
- package/dist/esm/index.js.map +0 -7
- package/dist/esm/props.js +0 -66
- package/dist/esm/props.js.map +0 -7
- package/dist/esm/utils.js +0 -17
- package/dist/esm/utils.js.map +0 -7
package/dist/cjs/props.js
DELETED
|
@@ -1,95 +0,0 @@
|
|
|
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 props_exports = {};
|
|
29
|
-
__export(props_exports, {
|
|
30
|
-
DSPillButtonDefaultProps: () => DSPillButtonDefaultProps,
|
|
31
|
-
DSPillButtonPropTypes: () => DSPillButtonPropTypes,
|
|
32
|
-
DSPillGroupDefaultProps: () => DSPillGroupDefaultProps,
|
|
33
|
-
DSPillGroupPropTypes: () => DSPillGroupPropTypes,
|
|
34
|
-
DSPillV2DefaultProps: () => DSPillV2DefaultProps,
|
|
35
|
-
DSPillV2PropTypes: () => DSPillV2PropTypes
|
|
36
|
-
});
|
|
37
|
-
var React = __toESM(require("react"));
|
|
38
|
-
var import_react_desc = require("react-desc");
|
|
39
|
-
var import_ds_form = require("@elliemae/ds-form");
|
|
40
|
-
const pillTypes = import_react_desc.PropTypes.oneOf(["label", "value", "input", "dropdown", "removable", "readonly"]);
|
|
41
|
-
const DSPillV2PropTypes = {
|
|
42
|
-
label: import_react_desc.PropTypes.string.description("Label to show in the pill").isRequired,
|
|
43
|
-
type: pillTypes.description("The type of pill that you want to render").isRequired,
|
|
44
|
-
innerRef: import_react_desc.PropTypes.oneOfType([import_react_desc.PropTypes.object, import_react_desc.PropTypes.func]).description("Reference to the focuseable internal element of each pill (remove icons, inputs, dropdown, etc.)").defaultValue(() => null),
|
|
45
|
-
size: import_react_desc.PropTypes.oneOf(["s", "m"]).description("Vertical pill size").defaultValue("m"),
|
|
46
|
-
ariaLabel: import_react_desc.PropTypes.string.description("Aria label for the pill. If not provided we will use the label").defaultValue(""),
|
|
47
|
-
labelTruncated: import_react_desc.PropTypes.bool.description("Whether to truncate the pills label").defaultValue(true),
|
|
48
|
-
tooltipValue: import_react_desc.PropTypes.string.description("String to show as a tooltip in the value pill").defaultValue(""),
|
|
49
|
-
iconLeft: import_react_desc.PropTypes.node.description("A component to show int the left of a readonly pill").defaultValue(null),
|
|
50
|
-
iconRight: import_react_desc.PropTypes.node.description("A component to show in the right of a readonly pill").defaultValue(null),
|
|
51
|
-
onRemove: import_react_desc.PropTypes.func.description("Callback triggered when removing a pill with the close icon").defaultValue(() => null),
|
|
52
|
-
inputPlaceholder: import_react_desc.PropTypes.string.description("Placeholder for the input pill").defaultValue(""),
|
|
53
|
-
onInputChange: import_react_desc.PropTypes.func.description("Callback triggered when user provides input to the input pill").defaultValue(() => null),
|
|
54
|
-
onInputClear: import_react_desc.PropTypes.func.description("Callback triggered when the user clears an input pill").defaultValue(() => null),
|
|
55
|
-
inputWidth: import_react_desc.PropTypes.number.description("Width in pixels for the input tag in the input pill").defaultValue(150),
|
|
56
|
-
dropdownProps: import_react_desc.PropTypes.object.description("Properties that will be used for the dropdown-menu").defaultValue({}),
|
|
57
|
-
onDropdownClick: import_react_desc.PropTypes.func.description("Callback when dropdown button is clicked or pressed").defaultValue(() => null)
|
|
58
|
-
};
|
|
59
|
-
const DSPillButtonPropTypes = {
|
|
60
|
-
type: import_react_desc.PropTypes.oneOf(["only", "left", "right"]).description("The position in which this button will be placed. Only used for css styling internally").defaultValue("right"),
|
|
61
|
-
width: import_react_desc.PropTypes.string.description("Width of the button").defaultValue("100%"),
|
|
62
|
-
height: import_react_desc.PropTypes.string.description("Height of the button").defaultValue("100%")
|
|
63
|
-
};
|
|
64
|
-
const DSPillGroupPropTypes = {
|
|
65
|
-
width: import_react_desc.PropTypes.string.description("Width of the group").defaultValue("fit-content"),
|
|
66
|
-
innerRef: import_react_desc.PropTypes.oneOfType([import_react_desc.PropTypes.object, import_react_desc.PropTypes.func]).description("Reference to the pill group wrapper").defaultValue(() => null)
|
|
67
|
-
};
|
|
68
|
-
const DSPillV2DefaultProps = {
|
|
69
|
-
innerRef: () => null,
|
|
70
|
-
ariaLabel: "",
|
|
71
|
-
size: "m",
|
|
72
|
-
labelTruncated: true,
|
|
73
|
-
tooltipValue: "",
|
|
74
|
-
iconLeft: null,
|
|
75
|
-
iconRight: null,
|
|
76
|
-
onRemove: () => null,
|
|
77
|
-
inputPlaceholder: "",
|
|
78
|
-
onInputChange: () => null,
|
|
79
|
-
onInputClear: () => null,
|
|
80
|
-
inputWidth: 72,
|
|
81
|
-
inputRender: import_ds_form.DSInput,
|
|
82
|
-
dropdownProps: {},
|
|
83
|
-
onDropdownClick: () => null
|
|
84
|
-
};
|
|
85
|
-
const DSPillButtonDefaultProps = {
|
|
86
|
-
type: "right",
|
|
87
|
-
width: "100%",
|
|
88
|
-
height: "100%"
|
|
89
|
-
};
|
|
90
|
-
const DSPillGroupDefaultProps = {
|
|
91
|
-
width: "fit-content",
|
|
92
|
-
innerRef: () => null
|
|
93
|
-
};
|
|
94
|
-
module.exports = __toCommonJS(props_exports);
|
|
95
|
-
//# sourceMappingURL=props.js.map
|
package/dist/cjs/props.js.map
DELETED
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../src/props.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable @typescript-eslint/explicit-module-boundary-types */\nimport { PropTypes } from 'react-desc';\nimport { DSInput } from '@elliemae/ds-form';\n\nconst pillTypes = PropTypes.oneOf(['label', 'value', 'input', 'dropdown', 'removable', 'readonly']);\n\nexport const DSPillV2PropTypes = {\n label: PropTypes.string.description('Label to show in the pill').isRequired,\n type: pillTypes.description('The type of pill that you want to render').isRequired,\n innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func])\n .description('Reference to the focuseable internal element of each pill (remove icons, inputs, dropdown, etc.)')\n .defaultValue(() => null),\n size: PropTypes.oneOf(['s', 'm']).description('Vertical pill size').defaultValue('m'),\n ariaLabel: PropTypes.string\n .description('Aria label for the pill. If not provided we will use the label')\n .defaultValue(''),\n labelTruncated: PropTypes.bool.description('Whether to truncate the pills label').defaultValue(true),\n tooltipValue: PropTypes.string.description('String to show as a tooltip in the value pill').defaultValue(''),\n iconLeft: PropTypes.node.description('A component to show int the left of a readonly pill').defaultValue(null),\n iconRight: PropTypes.node.description('A component to show in the right of a readonly pill').defaultValue(null),\n onRemove: PropTypes.func\n .description('Callback triggered when removing a pill with the close icon')\n .defaultValue(() => null),\n inputPlaceholder: PropTypes.string.description('Placeholder for the input pill').defaultValue(''),\n onInputChange: PropTypes.func\n .description('Callback triggered when user provides input to the input pill')\n .defaultValue(() => null),\n onInputClear: PropTypes.func\n .description('Callback triggered when the user clears an input pill')\n .defaultValue(() => null),\n inputWidth: PropTypes.number.description('Width in pixels for the input tag in the input pill').defaultValue(150),\n dropdownProps: PropTypes.object.description('Properties that will be used for the dropdown-menu').defaultValue({}),\n onDropdownClick: PropTypes.func\n .description('Callback when dropdown button is clicked or pressed')\n .defaultValue(() => null),\n};\n\nexport const DSPillButtonPropTypes = {\n type: PropTypes.oneOf(['only', 'left', 'right'])\n .description('The position in which this button will be placed. Only used for css styling internally')\n .defaultValue('right'),\n width: PropTypes.string.description('Width of the button').defaultValue('100%'),\n height: PropTypes.string.description('Height of the button').defaultValue('100%'),\n};\n\nexport const DSPillGroupPropTypes = {\n width: PropTypes.string.description('Width of the group').defaultValue('fit-content'),\n innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func])\n .description('Reference to the pill group wrapper')\n .defaultValue(() => null),\n};\n\nexport const DSPillV2DefaultProps = {\n innerRef: () => null,\n ariaLabel: '',\n size: 'm',\n labelTruncated: true,\n tooltipValue: '',\n iconLeft: null,\n iconRight: null,\n onRemove: () => null,\n inputPlaceholder: '',\n onInputChange: () => null,\n onInputClear: () => null,\n inputWidth: 72,\n inputRender: DSInput,\n dropdownProps: {},\n onDropdownClick: () => null,\n};\n\nexport const DSPillButtonDefaultProps = {\n type: 'right',\n width: '100%',\n height: '100%',\n};\n\nexport const DSPillGroupDefaultProps = {\n width: 'fit-content',\n innerRef: () => null,\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,wBAA0B;AAC1B,qBAAwB;AAExB,MAAM,YAAY,4BAAU,MAAM,CAAC,SAAS,SAAS,SAAS,YAAY,aAAa;AAEhF,MAAM,oBAAoB;AAAA,EAC/B,OAAO,4BAAU,OAAO,YAAY,6BAA6B;AAAA,EACjE,MAAM,UAAU,YAAY,4CAA4C;AAAA,EACxE,UAAU,4BAAU,UAAU,CAAC,4BAAU,QAAQ,4BAAU,OACxD,YAAY,oGACZ,aAAa,MAAM;AAAA,EACtB,MAAM,4BAAU,MAAM,CAAC,KAAK,MAAM,YAAY,sBAAsB,aAAa;AAAA,EACjF,WAAW,4BAAU,OAClB,YAAY,kEACZ,aAAa;AAAA,EAChB,gBAAgB,4BAAU,KAAK,YAAY,uCAAuC,aAAa;AAAA,EAC/F,cAAc,4BAAU,OAAO,YAAY,iDAAiD,aAAa;AAAA,EACzG,UAAU,4BAAU,KAAK,YAAY,uDAAuD,aAAa;AAAA,EACzG,WAAW,4BAAU,KAAK,YAAY,uDAAuD,aAAa;AAAA,EAC1G,UAAU,4BAAU,KACjB,YAAY,+DACZ,aAAa,MAAM;AAAA,EACtB,kBAAkB,4BAAU,OAAO,YAAY,kCAAkC,aAAa;AAAA,EAC9F,eAAe,4BAAU,KACtB,YAAY,iEACZ,aAAa,MAAM;AAAA,EACtB,cAAc,4BAAU,KACrB,YAAY,yDACZ,aAAa,MAAM;AAAA,EACtB,YAAY,4BAAU,OAAO,YAAY,uDAAuD,aAAa;AAAA,EAC7G,eAAe,4BAAU,OAAO,YAAY,sDAAsD,aAAa;AAAA,EAC/G,iBAAiB,4BAAU,KACxB,YAAY,uDACZ,aAAa,MAAM;AAAA;AAGjB,MAAM,wBAAwB;AAAA,EACnC,MAAM,4BAAU,MAAM,CAAC,QAAQ,QAAQ,UACpC,YAAY,0FACZ,aAAa;AAAA,EAChB,OAAO,4BAAU,OAAO,YAAY,uBAAuB,aAAa;AAAA,EACxE,QAAQ,4BAAU,OAAO,YAAY,wBAAwB,aAAa;AAAA;AAGrE,MAAM,uBAAuB;AAAA,EAClC,OAAO,4BAAU,OAAO,YAAY,sBAAsB,aAAa;AAAA,EACvE,UAAU,4BAAU,UAAU,CAAC,4BAAU,QAAQ,4BAAU,OACxD,YAAY,uCACZ,aAAa,MAAM;AAAA;AAGjB,MAAM,uBAAuB;AAAA,EAClC,UAAU,MAAM;AAAA,EAChB,WAAW;AAAA,EACX,MAAM;AAAA,EACN,gBAAgB;AAAA,EAChB,cAAc;AAAA,EACd,UAAU;AAAA,EACV,WAAW;AAAA,EACX,UAAU,MAAM;AAAA,EAChB,kBAAkB;AAAA,EAClB,eAAe,MAAM;AAAA,EACrB,cAAc,MAAM;AAAA,EACpB,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,eAAe;AAAA,EACf,iBAAiB,MAAM;AAAA;AAGlB,MAAM,2BAA2B;AAAA,EACtC,MAAM;AAAA,EACN,OAAO;AAAA,EACP,QAAQ;AAAA;AAGH,MAAM,0BAA0B;AAAA,EACrC,OAAO;AAAA,EACP,UAAU,MAAM;AAAA;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
package/dist/cjs/utils.js
DELETED
|
@@ -1,46 +0,0 @@
|
|
|
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 utils_exports = {};
|
|
29
|
-
__export(utils_exports, {
|
|
30
|
-
setMultipleRefs: () => setMultipleRefs
|
|
31
|
-
});
|
|
32
|
-
var React = __toESM(require("react"));
|
|
33
|
-
const setMultipleRefs = (...refs) => (_ref) => {
|
|
34
|
-
refs.forEach((ref) => {
|
|
35
|
-
if (!ref || !_ref)
|
|
36
|
-
return;
|
|
37
|
-
if (typeof ref === "function") {
|
|
38
|
-
ref(_ref);
|
|
39
|
-
return;
|
|
40
|
-
}
|
|
41
|
-
if (ref)
|
|
42
|
-
ref.current = _ref;
|
|
43
|
-
});
|
|
44
|
-
};
|
|
45
|
-
module.exports = __toCommonJS(utils_exports);
|
|
46
|
-
//# sourceMappingURL=utils.js.map
|
package/dist/cjs/utils.js.map
DELETED
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../src/utils.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["type refInterfaceType = React.MutableRefObject<HTMLElement> | ((_ref: HTMLElement) => void);\n\nexport const setMultipleRefs =\n (...refs: refInterfaceType[]) =>\n (_ref: HTMLElement): void => {\n refs.forEach((ref) => {\n if (!ref || !_ref) return;\n if (typeof ref === 'function') {\n ref(_ref);\n return;\n }\n if (ref) ref.current = _ref;\n });\n };\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEhB,MAAM,kBACX,IAAI,SACJ,CAAC,SAA4B;AAC3B,OAAK,QAAQ,CAAC,QAAQ;AACpB,QAAI,CAAC,OAAO,CAAC;AAAM;AACnB,QAAI,OAAO,QAAQ,YAAY;AAC7B,UAAI;AACJ;AAAA;AAEF,QAAI;AAAK,UAAI,UAAU;AAAA;AAAA;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
|
@@ -1,31 +0,0 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
import React2 from "react";
|
|
3
|
-
import { describe } from "react-desc";
|
|
4
|
-
import { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from "@elliemae/ds-props-helpers";
|
|
5
|
-
import { DSPillV2DefaultProps, DSPillV2PropTypes } from "../props";
|
|
6
|
-
import { DropdownPill, LabelPill, ValuePill, InputPill, ReadOnlyPill, RemovablePill } from "./types";
|
|
7
|
-
const pillComponentGetter = {
|
|
8
|
-
dropdown: DropdownPill,
|
|
9
|
-
input: InputPill,
|
|
10
|
-
label: LabelPill,
|
|
11
|
-
readonly: ReadOnlyPill,
|
|
12
|
-
removable: RemovablePill,
|
|
13
|
-
value: ValuePill
|
|
14
|
-
};
|
|
15
|
-
const DSPillV2 = (props) => {
|
|
16
|
-
const propsWithDefaults = useMemoMergePropsWithDefault(props, DSPillV2DefaultProps);
|
|
17
|
-
useValidateTypescriptPropTypes(propsWithDefaults, DSPillV2PropTypes);
|
|
18
|
-
const { type } = propsWithDefaults;
|
|
19
|
-
const PillComponent = pillComponentGetter[type];
|
|
20
|
-
return /* @__PURE__ */ React2.createElement(PillComponent, {
|
|
21
|
-
...propsWithDefaults
|
|
22
|
-
});
|
|
23
|
-
};
|
|
24
|
-
DSPillV2.propTypes = DSPillV2PropTypes;
|
|
25
|
-
const DSPillV2WithSchema = describe(DSPillV2).description("Pill");
|
|
26
|
-
DSPillV2WithSchema.propTypes = DSPillV2PropTypes;
|
|
27
|
-
export {
|
|
28
|
-
DSPillV2,
|
|
29
|
-
DSPillV2WithSchema
|
|
30
|
-
};
|
|
31
|
-
//# sourceMappingURL=Pill.js.map
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/components/Pill.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/prop-types */\nimport React from 'react';\nimport { describe } from 'react-desc';\nimport { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';\nimport type { DSPillProps } from '../index.d';\nimport { DSPillV2DefaultProps, DSPillV2PropTypes } from '../props';\nimport { DropdownPill, LabelPill, ValuePill, InputPill, ReadOnlyPill, RemovablePill } from './types';\n\nconst pillComponentGetter: Record<string, React.ComponentType<DSPillProps>> = {\n dropdown: DropdownPill,\n input: InputPill,\n label: LabelPill,\n readonly: ReadOnlyPill,\n removable: RemovablePill,\n value: ValuePill,\n};\n\nconst DSPillV2: React.ComponentType<DSPillProps> = (props) => {\n const propsWithDefaults = useMemoMergePropsWithDefault(props, DSPillV2DefaultProps);\n useValidateTypescriptPropTypes(propsWithDefaults, DSPillV2PropTypes);\n const { type } = propsWithDefaults;\n const PillComponent = pillComponentGetter[type];\n\n return <PillComponent {...propsWithDefaults} />;\n};\n\nDSPillV2.propTypes = DSPillV2PropTypes;\nconst DSPillV2WithSchema = describe(DSPillV2).description('Pill');\nDSPillV2WithSchema.propTypes = DSPillV2PropTypes;\n\nexport { DSPillV2, DSPillV2WithSchema };\n"],
|
|
5
|
-
"mappings": "AAAA;ACCA;AACA;AACA;AAEA;AACA;AAEA,MAAM,sBAAwE;AAAA,EAC5E,UAAU;AAAA,EACV,OAAO;AAAA,EACP,OAAO;AAAA,EACP,UAAU;AAAA,EACV,WAAW;AAAA,EACX,OAAO;AAAA;AAGT,MAAM,WAA6C,CAAC,UAAU;AAC5D,QAAM,oBAAoB,6BAA6B,OAAO;AAC9D,iCAA+B,mBAAmB;AAClD,QAAM,EAAE,SAAS;AACjB,QAAM,gBAAgB,oBAAoB;AAE1C,SAAO,qCAAC,eAAD;AAAA,OAAmB;AAAA;AAAA;AAG5B,SAAS,YAAY;AACrB,MAAM,qBAAqB,SAAS,UAAU,YAAY;AAC1D,mBAAmB,YAAY;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
|
@@ -1,29 +0,0 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
import React2 from "react";
|
|
3
|
-
import { describe } from "react-desc";
|
|
4
|
-
import { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from "@elliemae/ds-props-helpers";
|
|
5
|
-
import { StyledPillButton } from "./styled";
|
|
6
|
-
import { DSPillButtonDefaultProps, DSPillButtonPropTypes } from "../props";
|
|
7
|
-
const typeToClassName = {
|
|
8
|
-
only: "ds-pill-button-only",
|
|
9
|
-
left: "ds-pill-button-left",
|
|
10
|
-
right: "ds-pill-button-right"
|
|
11
|
-
};
|
|
12
|
-
const DSPillButton = (props) => {
|
|
13
|
-
const propsWithDefaults = useMemoMergePropsWithDefault(props, DSPillButtonDefaultProps);
|
|
14
|
-
useValidateTypescriptPropTypes(propsWithDefaults, DSPillButtonPropTypes);
|
|
15
|
-
const { type, children, ...rest } = propsWithDefaults;
|
|
16
|
-
return /* @__PURE__ */ React2.createElement(StyledPillButton, {
|
|
17
|
-
...rest,
|
|
18
|
-
buttonType: "raw",
|
|
19
|
-
className: `${typeToClassName[type]} ${rest.className}`
|
|
20
|
-
}, children);
|
|
21
|
-
};
|
|
22
|
-
DSPillButton.propTypes = DSPillButtonPropTypes;
|
|
23
|
-
const DSPillButtonWithSchema = describe(DSPillButton).description("Pill button");
|
|
24
|
-
DSPillButtonWithSchema.propTypes = DSPillButtonPropTypes;
|
|
25
|
-
export {
|
|
26
|
-
DSPillButton,
|
|
27
|
-
DSPillButtonWithSchema
|
|
28
|
-
};
|
|
29
|
-
//# sourceMappingURL=PillButton.js.map
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/components/PillButton.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/prop-types */\nimport React from 'react';\nimport { describe } from 'react-desc';\nimport { DSButtonPropsT } from '@elliemae/ds-button';\nimport { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';\nimport { StyledPillButton } from './styled';\nimport { DSPillButtonDefaultProps, DSPillButtonPropTypes } from '../props';\n\nconst typeToClassName = {\n only: 'ds-pill-button-only',\n left: 'ds-pill-button-left',\n right: 'ds-pill-button-right',\n};\n\nconst DSPillButton: React.ComponentType<DSButtonPropsT> = (props) => {\n const propsWithDefaults = useMemoMergePropsWithDefault(props, DSPillButtonDefaultProps);\n useValidateTypescriptPropTypes(propsWithDefaults, DSPillButtonPropTypes);\n\n const { type, children, ...rest } = propsWithDefaults;\n\n return (\n <StyledPillButton {...rest} buttonType=\"raw\" className={`${typeToClassName[type]} ${rest.className}`}>\n {children}\n </StyledPillButton>\n );\n};\n\nDSPillButton.propTypes = DSPillButtonPropTypes;\nconst DSPillButtonWithSchema = describe(DSPillButton).description('Pill button');\nDSPillButtonWithSchema.propTypes = DSPillButtonPropTypes;\n\nexport { DSPillButton, DSPillButtonWithSchema };\n"],
|
|
5
|
-
"mappings": "AAAA;ACCA;AACA;AAEA;AACA;AACA;AAEA,MAAM,kBAAkB;AAAA,EACtB,MAAM;AAAA,EACN,MAAM;AAAA,EACN,OAAO;AAAA;AAGT,MAAM,eAAoD,CAAC,UAAU;AACnE,QAAM,oBAAoB,6BAA6B,OAAO;AAC9D,iCAA+B,mBAAmB;AAElD,QAAM,EAAE,MAAM,aAAa,SAAS;AAEpC,SACE,qCAAC,kBAAD;AAAA,OAAsB;AAAA,IAAM,YAAW;AAAA,IAAM,WAAW,GAAG,gBAAgB,SAAS,KAAK;AAAA,KACtF;AAAA;AAKP,aAAa,YAAY;AACzB,MAAM,yBAAyB,SAAS,cAAc,YAAY;AAClE,uBAAuB,YAAY;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
|
@@ -1,43 +0,0 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
import React2, { createContext, useCallback, useMemo } from "react";
|
|
3
|
-
import { describe } from "react-desc";
|
|
4
|
-
import { uid } from "uid";
|
|
5
|
-
import { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from "@elliemae/ds-props-helpers";
|
|
6
|
-
import { DSPillGroupDefaultProps, DSPillGroupPropTypes } from "../props";
|
|
7
|
-
import { StyledPillGroup } from "./styled";
|
|
8
|
-
const DSPillGroupV2Context = createContext({
|
|
9
|
-
onKeyboardRemove: () => null
|
|
10
|
-
});
|
|
11
|
-
const DSPillGroupV2 = (props) => {
|
|
12
|
-
const propsWithDefaults = useMemoMergePropsWithDefault(props, DSPillGroupDefaultProps);
|
|
13
|
-
useValidateTypescriptPropTypes(propsWithDefaults, DSPillGroupPropTypes);
|
|
14
|
-
const pillGroupUid = useMemo(() => `ds-pill-group-${uid()}`, []);
|
|
15
|
-
const { children, width, innerRef } = propsWithDefaults;
|
|
16
|
-
const onKeyboardRemove = useCallback((pillUid) => {
|
|
17
|
-
const elems = [...document.querySelectorAll(`#${pillGroupUid} .ds-pill-focus-point`)];
|
|
18
|
-
const pillIndex = elems.findIndex((elem) => elem.id === pillUid);
|
|
19
|
-
if (pillIndex > 0) {
|
|
20
|
-
elems[pillIndex - 1].focus();
|
|
21
|
-
} else if (pillIndex + 1 < elems.length) {
|
|
22
|
-
elems[pillIndex + 1].focus();
|
|
23
|
-
}
|
|
24
|
-
}, [pillGroupUid]);
|
|
25
|
-
return /* @__PURE__ */ React2.createElement(DSPillGroupV2Context.Provider, {
|
|
26
|
-
value: { onKeyboardRemove }
|
|
27
|
-
}, /* @__PURE__ */ React2.createElement(StyledPillGroup, {
|
|
28
|
-
width,
|
|
29
|
-
id: pillGroupUid,
|
|
30
|
-
cols: React2.Children.map(children, () => "auto"),
|
|
31
|
-
gutter: "2px",
|
|
32
|
-
ref: innerRef
|
|
33
|
-
}, children));
|
|
34
|
-
};
|
|
35
|
-
DSPillGroupV2.propTypes = DSPillGroupPropTypes;
|
|
36
|
-
const DSPillGroupV2WithSchema = describe(DSPillGroupV2);
|
|
37
|
-
DSPillGroupV2WithSchema.propTypes = DSPillGroupPropTypes;
|
|
38
|
-
export {
|
|
39
|
-
DSPillGroupV2,
|
|
40
|
-
DSPillGroupV2Context,
|
|
41
|
-
DSPillGroupV2WithSchema
|
|
42
|
-
};
|
|
43
|
-
//# sourceMappingURL=PillGroup.js.map
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/components/PillGroup.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/prop-types */\nimport React, { createContext, useCallback, useMemo } from 'react';\nimport { describe } from 'react-desc';\nimport { uid } from 'uid';\nimport { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';\nimport { DSPillGroupProps } from '../index.d';\nimport { DSPillGroupDefaultProps, DSPillGroupPropTypes } from '../props';\nimport { StyledPillGroup } from './styled';\n\nexport const DSPillGroupV2Context = createContext<{ onKeyboardRemove: (pillUid: string) => void }>({\n onKeyboardRemove: () => null,\n});\n\nconst DSPillGroupV2: React.ComponentType<DSPillGroupProps> = (props) => {\n const propsWithDefaults = useMemoMergePropsWithDefault(props, DSPillGroupDefaultProps);\n useValidateTypescriptPropTypes(propsWithDefaults, DSPillGroupPropTypes);\n\n const pillGroupUid = useMemo(() => `ds-pill-group-${uid()}`, []);\n const { children, width, innerRef } = propsWithDefaults;\n const onKeyboardRemove = useCallback(\n (pillUid: string) => {\n const elems = [...document.querySelectorAll(`#${pillGroupUid} .ds-pill-focus-point`)] as HTMLElement[];\n\n const pillIndex = elems.findIndex((elem) => elem.id === pillUid);\n\n if (pillIndex > 0) {\n elems[pillIndex - 1].focus();\n } else if (pillIndex + 1 < elems.length) {\n elems[pillIndex + 1].focus();\n }\n },\n [pillGroupUid],\n );\n\n return (\n <DSPillGroupV2Context.Provider value={{ onKeyboardRemove }}>\n <StyledPillGroup\n width={width}\n id={pillGroupUid}\n cols={React.Children.map(children, () => 'auto')}\n gutter=\"2px\"\n ref={innerRef}\n >\n {children}\n </StyledPillGroup>\n </DSPillGroupV2Context.Provider>\n );\n};\n\nDSPillGroupV2.propTypes = DSPillGroupPropTypes;\nconst DSPillGroupV2WithSchema = describe(DSPillGroupV2);\nDSPillGroupV2WithSchema.propTypes = DSPillGroupPropTypes;\n\nexport { DSPillGroupV2, DSPillGroupV2WithSchema };\n"],
|
|
5
|
-
"mappings": "AAAA;ACCA;AACA;AACA;AACA;AAEA;AACA;AAEO,MAAM,uBAAuB,cAA+D;AAAA,EACjG,kBAAkB,MAAM;AAAA;AAG1B,MAAM,gBAAuD,CAAC,UAAU;AACtE,QAAM,oBAAoB,6BAA6B,OAAO;AAC9D,iCAA+B,mBAAmB;AAElD,QAAM,eAAe,QAAQ,MAAM,iBAAiB,SAAS;AAC7D,QAAM,EAAE,UAAU,OAAO,aAAa;AACtC,QAAM,mBAAmB,YACvB,CAAC,YAAoB;AACnB,UAAM,QAAQ,CAAC,GAAG,SAAS,iBAAiB,IAAI;AAEhD,UAAM,YAAY,MAAM,UAAU,CAAC,SAAS,KAAK,OAAO;AAExD,QAAI,YAAY,GAAG;AACjB,YAAM,YAAY,GAAG;AAAA,eACZ,YAAY,IAAI,MAAM,QAAQ;AACvC,YAAM,YAAY,GAAG;AAAA;AAAA,KAGzB,CAAC;AAGH,SACE,qCAAC,qBAAqB,UAAtB;AAAA,IAA+B,OAAO,EAAE;AAAA,KACtC,qCAAC,iBAAD;AAAA,IACE;AAAA,IACA,IAAI;AAAA,IACJ,MAAM,OAAM,SAAS,IAAI,UAAU,MAAM;AAAA,IACzC,QAAO;AAAA,IACP,KAAK;AAAA,KAEJ;AAAA;AAMT,cAAc,YAAY;AAC1B,MAAM,0BAA0B,SAAS;AACzC,wBAAwB,YAAY;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/components/index.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export * from './Pill';\nexport * from './PillGroup';\nexport * from './PillButton';\n"],
|
|
5
|
-
"mappings": "AAAA;ACAA;AACA;AACA;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
|
@@ -1,206 +0,0 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
import styled from "styled-components";
|
|
3
|
-
import { css } from "@elliemae/ds-system";
|
|
4
|
-
import { Grid } from "@elliemae/ds-grid";
|
|
5
|
-
import { DSButtonV2 } from "@elliemae/ds-button";
|
|
6
|
-
const borderOutside = (color, size = 1, zIndex = 2, borderRadius = "12px") => css`
|
|
7
|
-
:after {
|
|
8
|
-
content: ' ';
|
|
9
|
-
position: absolute;
|
|
10
|
-
top: 0px;
|
|
11
|
-
left: 0px;
|
|
12
|
-
right: 0px;
|
|
13
|
-
bottom: 0px;
|
|
14
|
-
border: ${size}px solid ${color};
|
|
15
|
-
border-top-left-radius: ${borderRadius};
|
|
16
|
-
border-top-right-radius: ${borderRadius};
|
|
17
|
-
border-bottom-left-radius: ${borderRadius};
|
|
18
|
-
border-bottom-right-radius: ${borderRadius};
|
|
19
|
-
pointer-events: none;
|
|
20
|
-
z-index: ${zIndex};
|
|
21
|
-
}
|
|
22
|
-
`;
|
|
23
|
-
const commonPillWrapperCss = css`
|
|
24
|
-
height: ${(props) => props?.size === "m" ? "24px" : "18px"};
|
|
25
|
-
|
|
26
|
-
position: relative;
|
|
27
|
-
|
|
28
|
-
width: fit-content;
|
|
29
|
-
|
|
30
|
-
background-color: ${(props) => props.theme.colors.brand[200]};
|
|
31
|
-
|
|
32
|
-
outline: none;
|
|
33
|
-
|
|
34
|
-
white-space: nowrap;
|
|
35
|
-
|
|
36
|
-
padding: 0px 12px 0 12px;
|
|
37
|
-
border-radius: 12px;
|
|
38
|
-
|
|
39
|
-
font-size: 13px;
|
|
40
|
-
line-height: 1;
|
|
41
|
-
color: ${(props) => props.theme.colors.brand[800]};
|
|
42
|
-
${(props) => borderOutside(props.theme.colors.brand[300])};
|
|
43
|
-
`;
|
|
44
|
-
const StyledLabelPillWrapper = styled(Grid)`
|
|
45
|
-
${commonPillWrapperCss}
|
|
46
|
-
|
|
47
|
-
font-weight: ${(props) => props.theme.fontWeights.semibold};
|
|
48
|
-
padding-left: ${(props) => props.hasIcon ? "0px !important" : "12px"};
|
|
49
|
-
`;
|
|
50
|
-
const StyledValuePillWrapper = styled(Grid)`
|
|
51
|
-
${commonPillWrapperCss}
|
|
52
|
-
|
|
53
|
-
font-weight: ${(props) => props.theme.fontWeights.regular};
|
|
54
|
-
padding-left: ${(props) => props.hasIcon ? "0px !important" : "12px"};
|
|
55
|
-
`;
|
|
56
|
-
const StyledInputPillWrapper = styled(Grid)`
|
|
57
|
-
${commonPillWrapperCss}
|
|
58
|
-
|
|
59
|
-
background: ${(props) => props.theme.colors.neutral["000"]};
|
|
60
|
-
padding: 0;
|
|
61
|
-
|
|
62
|
-
${({ value, theme }) => borderOutside(value === "" ? theme.colors.neutral[400] : theme.colors.brand[500])}
|
|
63
|
-
|
|
64
|
-
:focus-within {
|
|
65
|
-
${(props) => props.inputHasFocus ? borderOutside(props.theme.colors.brand[700], 2) : ""}
|
|
66
|
-
}
|
|
67
|
-
|
|
68
|
-
:active {
|
|
69
|
-
${(props) => props.inputHasFocus ? borderOutside(props.theme.colors.brand[500]) : ""}
|
|
70
|
-
}
|
|
71
|
-
|
|
72
|
-
& .em-ds-input {
|
|
73
|
-
outline: none !important;
|
|
74
|
-
border: none !important;
|
|
75
|
-
box-shadow: none !important;
|
|
76
|
-
border-radius: 0 !important;
|
|
77
|
-
height: 100%;
|
|
78
|
-
background: transparent;
|
|
79
|
-
width: ${(props) => `${props.inputWidth + (props.value === "" ? 24 : 0)}px`};
|
|
80
|
-
padding: 0;
|
|
81
|
-
margin: 0 0 0 8px;
|
|
82
|
-
}
|
|
83
|
-
|
|
84
|
-
& .em-ds-input__tooltip-ref {
|
|
85
|
-
height: 100%;
|
|
86
|
-
}
|
|
87
|
-
`;
|
|
88
|
-
const StyledDropdownPillWrapper = styled(Grid)`
|
|
89
|
-
${commonPillWrapperCss}
|
|
90
|
-
font-weight: ${(props) => props.theme.fontWeights.semibold};
|
|
91
|
-
|
|
92
|
-
padding: 0 0 0 12px;
|
|
93
|
-
`;
|
|
94
|
-
const StyledReadonlyPillWrapper = styled(Grid)`
|
|
95
|
-
${commonPillWrapperCss}
|
|
96
|
-
font-weight: ${(props) => props.theme.fontWeights.semibold};
|
|
97
|
-
padding-right: ${(props) => props.hasIconRight ? "0 !important" : "12px"};
|
|
98
|
-
padding-left: ${(props) => props.hasIconLeft ? "0 !important" : "12px"};
|
|
99
|
-
`;
|
|
100
|
-
const StyledRemovablePillWrapper = styled(Grid)`
|
|
101
|
-
${commonPillWrapperCss}
|
|
102
|
-
font-weight: ${(props) => props.theme.fontWeights.regular};
|
|
103
|
-
padding: 0 0 0 12px;
|
|
104
|
-
`;
|
|
105
|
-
const StyledPillGroup = styled(Grid)`
|
|
106
|
-
width: ${({ width }) => width};
|
|
107
|
-
|
|
108
|
-
// Pill edges
|
|
109
|
-
& .ds-pill-wrapper {
|
|
110
|
-
&:not(:first-of-type) {
|
|
111
|
-
&,
|
|
112
|
-
:after,
|
|
113
|
-
:before,
|
|
114
|
-
.ds-pill-tooltip-value:after {
|
|
115
|
-
border-top-left-radius: 0px;
|
|
116
|
-
border-bottom-left-radius: 0px;
|
|
117
|
-
}
|
|
118
|
-
}
|
|
119
|
-
&:not(:last-of-type) {
|
|
120
|
-
&,
|
|
121
|
-
:after,
|
|
122
|
-
:before,
|
|
123
|
-
.ds-pill-tooltip-value:after {
|
|
124
|
-
border-top-right-radius: 0px;
|
|
125
|
-
border-bottom-right-radius: 0px;
|
|
126
|
-
}
|
|
127
|
-
}
|
|
128
|
-
}
|
|
129
|
-
|
|
130
|
-
// Pill paddings to the left / right
|
|
131
|
-
& .ds-pill-wrapper-label,
|
|
132
|
-
& .ds-pill-wrapper-value,
|
|
133
|
-
& .ds-pill-wrapper-readonly {
|
|
134
|
-
&:not(:first-of-type) {
|
|
135
|
-
padding-left: 8px;
|
|
136
|
-
}
|
|
137
|
-
&:not(:last-of-type) {
|
|
138
|
-
padding-right: 8px;
|
|
139
|
-
}
|
|
140
|
-
}
|
|
141
|
-
|
|
142
|
-
& .ds-pill-wrapper-removable:not(:first-of-type) {
|
|
143
|
-
padding-left: 8px;
|
|
144
|
-
}
|
|
145
|
-
|
|
146
|
-
& .ds-pill-wrapper-dropdown:not(:first-of-type) {
|
|
147
|
-
padding-left: 8px;
|
|
148
|
-
}
|
|
149
|
-
|
|
150
|
-
& .ds-pill-wrapper {
|
|
151
|
-
:not(:first-of-type) {
|
|
152
|
-
.ds-pill-button-left {
|
|
153
|
-
border-radius: 0px;
|
|
154
|
-
}
|
|
155
|
-
.ds-pill-button-only {
|
|
156
|
-
border-top-left-radius: 0px;
|
|
157
|
-
border-bottom-left-radius: 0px;
|
|
158
|
-
}
|
|
159
|
-
}
|
|
160
|
-
:not(:last-of-type) {
|
|
161
|
-
.ds-pill-button-right {
|
|
162
|
-
border-radius: 0px;
|
|
163
|
-
}
|
|
164
|
-
.ds-pill-button-only {
|
|
165
|
-
border-top-right-radius: 0px;
|
|
166
|
-
border-bottom-right-radius: 0px;
|
|
167
|
-
}
|
|
168
|
-
}
|
|
169
|
-
}
|
|
170
|
-
`;
|
|
171
|
-
const StyledSpanWithTooltip = styled.span`
|
|
172
|
-
outline: none;
|
|
173
|
-
:focus {
|
|
174
|
-
${(props) => borderOutside(props.theme.colors.brand[700], 2, 3)}
|
|
175
|
-
}
|
|
176
|
-
`;
|
|
177
|
-
const StyledPillButton = styled(DSButtonV2)`
|
|
178
|
-
display: grid;
|
|
179
|
-
place-items: center;
|
|
180
|
-
|
|
181
|
-
position: relative;
|
|
182
|
-
|
|
183
|
-
padding: 0;
|
|
184
|
-
width: ${(props) => props.width};
|
|
185
|
-
height: ${(props) => props.height};
|
|
186
|
-
|
|
187
|
-
border-radius: 12px;
|
|
188
|
-
|
|
189
|
-
:focus {
|
|
190
|
-
${(props) => borderOutside(props.theme.colors.brand[700], 2, 3, "inherit")}
|
|
191
|
-
}
|
|
192
|
-
|
|
193
|
-
cursor: pointer;
|
|
194
|
-
`;
|
|
195
|
-
export {
|
|
196
|
-
StyledDropdownPillWrapper,
|
|
197
|
-
StyledInputPillWrapper,
|
|
198
|
-
StyledLabelPillWrapper,
|
|
199
|
-
StyledPillButton,
|
|
200
|
-
StyledPillGroup,
|
|
201
|
-
StyledReadonlyPillWrapper,
|
|
202
|
-
StyledRemovablePillWrapper,
|
|
203
|
-
StyledSpanWithTooltip,
|
|
204
|
-
StyledValuePillWrapper
|
|
205
|
-
};
|
|
206
|
-
//# sourceMappingURL=styled.js.map
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/components/styled.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport styled from 'styled-components';\nimport { css } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSButtonV2 } from '@elliemae/ds-button';\n\n// =============================================================================\n// Common CSS\n// =============================================================================\n\nconst borderOutside = (color: string, size = 1, zIndex = 2, borderRadius = '12px') => css`\n :after {\n content: ' ';\n position: absolute;\n top: 0px;\n left: 0px;\n right: 0px;\n bottom: 0px;\n border: ${size}px solid ${color};\n border-top-left-radius: ${borderRadius};\n border-top-right-radius: ${borderRadius};\n border-bottom-left-radius: ${borderRadius};\n border-bottom-right-radius: ${borderRadius};\n pointer-events: none;\n z-index: ${zIndex};\n }\n`;\n\nconst commonPillWrapperCss = css<{ size: 'm' | 's' }>`\n height: ${(props) => (props?.size === 'm' ? '24px' : '18px')};\n\n position: relative;\n\n width: fit-content;\n\n background-color: ${(props) => props.theme.colors.brand[200]};\n\n outline: none;\n\n white-space: nowrap;\n\n padding: 0px 12px 0 12px;\n border-radius: 12px;\n\n font-size: 13px;\n line-height: 1;\n color: ${(props) => props.theme.colors.brand[800]};\n ${(props) => borderOutside(props.theme.colors.brand[300])};\n`;\n\n// =============================================================================\n// Pills wrappers\n// =============================================================================\n\nexport const StyledLabelPillWrapper = styled(Grid)`\n ${commonPillWrapperCss}\n\n font-weight: ${(props) => props.theme.fontWeights.semibold};\n padding-left: ${(props) => (props.hasIcon ? '0px !important' : '12px')};\n`;\n\nexport const StyledValuePillWrapper = styled(Grid)`\n ${commonPillWrapperCss}\n\n font-weight: ${(props) => props.theme.fontWeights.regular};\n padding-left: ${(props) => (props.hasIcon ? '0px !important' : '12px')};\n`;\n\nexport const StyledInputPillWrapper = styled(Grid)<{ value: string; inputWidth: number; inputHasFocus: boolean }>`\n ${commonPillWrapperCss}\n\n background: ${(props) => props.theme.colors.neutral['000']};\n padding: 0;\n\n ${({ value, theme }) => borderOutside(value === '' ? theme.colors.neutral[400] : theme.colors.brand[500])}\n\n :focus-within {\n ${(props) => (props.inputHasFocus ? borderOutside(props.theme.colors.brand[700], 2) : '')}\n }\n\n :active {\n ${(props) => (props.inputHasFocus ? borderOutside(props.theme.colors.brand[500]) : '')}\n }\n\n & .em-ds-input {\n outline: none !important;\n border: none !important;\n box-shadow: none !important;\n border-radius: 0 !important;\n height: 100%;\n background: transparent;\n width: ${(props) => `${props.inputWidth + (props.value === '' ? 24 : 0)}px`};\n padding: 0;\n margin: 0 0 0 8px;\n }\n\n & .em-ds-input__tooltip-ref {\n height: 100%;\n }\n`;\n\nexport const StyledDropdownPillWrapper = styled(Grid)`\n ${commonPillWrapperCss}\n font-weight: ${(props) => props.theme.fontWeights.semibold};\n\n padding: 0 0 0 12px;\n`;\n\nexport const StyledReadonlyPillWrapper = styled(Grid)<{ hasIconRight: boolean; hasIconLeft: boolean }>`\n ${commonPillWrapperCss}\n font-weight: ${(props) => props.theme.fontWeights.semibold};\n padding-right: ${(props) => (props.hasIconRight ? '0 !important' : '12px')};\n padding-left: ${(props) => (props.hasIconLeft ? '0 !important' : '12px')};\n`;\n\nexport const StyledRemovablePillWrapper = styled(Grid)`\n ${commonPillWrapperCss}\n font-weight: ${(props) => props.theme.fontWeights.regular};\n padding: 0 0 0 12px;\n`;\n\n// =============================================================================\n// Pill group\n// =============================================================================\n\nexport const StyledPillGroup = styled(Grid)`\n width: ${({ width }) => width};\n\n // Pill edges\n & .ds-pill-wrapper {\n &:not(:first-of-type) {\n &,\n :after,\n :before,\n .ds-pill-tooltip-value:after {\n border-top-left-radius: 0px;\n border-bottom-left-radius: 0px;\n }\n }\n &:not(:last-of-type) {\n &,\n :after,\n :before,\n .ds-pill-tooltip-value:after {\n border-top-right-radius: 0px;\n border-bottom-right-radius: 0px;\n }\n }\n }\n\n // Pill paddings to the left / right\n & .ds-pill-wrapper-label,\n & .ds-pill-wrapper-value,\n & .ds-pill-wrapper-readonly {\n &:not(:first-of-type) {\n padding-left: 8px;\n }\n &:not(:last-of-type) {\n padding-right: 8px;\n }\n }\n\n & .ds-pill-wrapper-removable:not(:first-of-type) {\n padding-left: 8px;\n }\n\n & .ds-pill-wrapper-dropdown:not(:first-of-type) {\n padding-left: 8px;\n }\n\n & .ds-pill-wrapper {\n :not(:first-of-type) {\n .ds-pill-button-left {\n border-radius: 0px;\n }\n .ds-pill-button-only {\n border-top-left-radius: 0px;\n border-bottom-left-radius: 0px;\n }\n }\n :not(:last-of-type) {\n .ds-pill-button-right {\n border-radius: 0px;\n }\n .ds-pill-button-only {\n border-top-right-radius: 0px;\n border-bottom-right-radius: 0px;\n }\n }\n }\n`;\n\n// =============================================================================\n// Extra stuff\n// =============================================================================\n\nexport const StyledSpanWithTooltip = styled.span`\n outline: none;\n :focus {\n ${(props) => borderOutside(props.theme.colors.brand[700], 2, 3)}\n }\n`;\n\nexport const StyledPillButton = styled(DSButtonV2)<{ width: string; height: string }>`\n display: grid;\n place-items: center;\n\n position: relative;\n\n padding: 0;\n width: ${(props) => props.width};\n height: ${(props) => props.height};\n\n border-radius: 12px;\n\n :focus {\n ${(props) => borderOutside(props.theme.colors.brand[700], 2, 3, 'inherit')}\n }\n\n cursor: pointer;\n`;\n"],
|
|
5
|
-
"mappings": "AAAA;ACCA;AACA;AACA;AACA;AAMA,MAAM,gBAAgB,CAAC,OAAe,OAAO,GAAG,SAAS,GAAG,eAAe,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cAQxE,gBAAgB;AAAA,8BACA;AAAA,+BACC;AAAA,iCACE;AAAA,kCACC;AAAA;AAAA,eAEnB;AAAA;AAAA;AAIf,MAAM,uBAAuB;AAAA,YACjB,CAAC,UAAW,OAAO,SAAS,MAAM,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAMjC,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAW/C,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM;AAAA,IAC3C,CAAC,UAAU,cAAc,MAAM,MAAM,OAAO,MAAM;AAAA;AAO/C,MAAM,yBAAyB,OAAO;AAAA,IACzC;AAAA;AAAA,iBAEa,CAAC,UAAU,MAAM,MAAM,YAAY;AAAA,kBAClC,CAAC,UAAW,MAAM,UAAU,mBAAmB;AAAA;AAG1D,MAAM,yBAAyB,OAAO;AAAA,IACzC;AAAA;AAAA,iBAEa,CAAC,UAAU,MAAM,MAAM,YAAY;AAAA,kBAClC,CAAC,UAAW,MAAM,UAAU,mBAAmB;AAAA;AAG1D,MAAM,yBAAyB,OAAO;AAAA,IACzC;AAAA;AAAA,gBAEY,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA,IAGlD,CAAC,EAAE,OAAO,YAAY,cAAc,UAAU,KAAK,MAAM,OAAO,QAAQ,OAAO,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA,MAGhG,CAAC,UAAW,MAAM,gBAAgB,cAAc,MAAM,MAAM,OAAO,MAAM,MAAM,KAAK;AAAA;AAAA;AAAA;AAAA,MAIpF,CAAC,UAAW,MAAM,gBAAgB,cAAc,MAAM,MAAM,OAAO,MAAM,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAU1E,CAAC,UAAU,GAAG,MAAM,aAAc,OAAM,UAAU,KAAK,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAUlE,MAAM,4BAA4B,OAAO;AAAA,IAC5C;AAAA,iBACa,CAAC,UAAU,MAAM,MAAM,YAAY;AAAA;AAAA;AAAA;AAK7C,MAAM,4BAA4B,OAAO;AAAA,IAC5C;AAAA,iBACa,CAAC,UAAU,MAAM,MAAM,YAAY;AAAA,mBACjC,CAAC,UAAW,MAAM,eAAe,iBAAiB;AAAA,kBACnD,CAAC,UAAW,MAAM,cAAc,iBAAiB;AAAA;AAG5D,MAAM,6BAA6B,OAAO;AAAA,IAC7C;AAAA,iBACa,CAAC,UAAU,MAAM,MAAM,YAAY;AAAA;AAAA;AAQ7C,MAAM,kBAAkB,OAAO;AAAA,WAC3B,CAAC,EAAE,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAsEnB,MAAM,wBAAwB,OAAO;AAAA;AAAA;AAAA,MAGtC,CAAC,UAAU,cAAc,MAAM,MAAM,OAAO,MAAM,MAAM,GAAG;AAAA;AAAA;AAI1D,MAAM,mBAAmB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAO5B,CAAC,UAAU,MAAM;AAAA,YAChB,CAAC,UAAU,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA,MAKvB,CAAC,UAAU,cAAc,MAAM,MAAM,OAAO,MAAM,MAAM,GAAG,GAAG;AAAA;AAAA;AAAA;AAAA;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
|
@@ -1,59 +0,0 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
import React2, { useMemo, useRef } from "react";
|
|
3
|
-
import { DSDropdownMenuV2 } from "@elliemae/ds-dropdownmenu";
|
|
4
|
-
import { uid } from "uid";
|
|
5
|
-
import { ChevronSmallDown } from "@elliemae/ds-icons";
|
|
6
|
-
import { SimpleTruncatedTooltipText } from "@elliemae/ds-truncated-tooltip-text";
|
|
7
|
-
import { StyledDropdownPillWrapper } from "../styled";
|
|
8
|
-
import { setMultipleRefs } from "../../utils";
|
|
9
|
-
import { DSPillButton } from "../PillButton";
|
|
10
|
-
const DropdownPill = React2.memo(({ label, size, labelTruncated, dropdownProps, innerRef, ariaLabel, onDropdownClick }) => {
|
|
11
|
-
const chevronRef = useRef(null);
|
|
12
|
-
const pillUid = useMemo(() => `ds-pill-${uid()}`, []);
|
|
13
|
-
const TextComponent = labelTruncated ? ({ children }) => /* @__PURE__ */ React2.createElement(SimpleTruncatedTooltipText, {
|
|
14
|
-
value: children
|
|
15
|
-
}) : React2.Fragment;
|
|
16
|
-
return /* @__PURE__ */ React2.createElement(StyledDropdownPillWrapper, {
|
|
17
|
-
size,
|
|
18
|
-
id: pillUid,
|
|
19
|
-
className: "ds-pill-wrapper ds-pill-wrapper-dropdown",
|
|
20
|
-
"data-testid": "ds-pill-wrapper",
|
|
21
|
-
cols: ["auto", "24px"],
|
|
22
|
-
gutter: "2px",
|
|
23
|
-
alignItems: "center",
|
|
24
|
-
justifyItems: "center"
|
|
25
|
-
}, /* @__PURE__ */ React2.createElement(TextComponent, null, label), /* @__PURE__ */ React2.createElement(DSDropdownMenuV2, {
|
|
26
|
-
placementOrderPreference: [
|
|
27
|
-
"bottom-start",
|
|
28
|
-
"bottom",
|
|
29
|
-
"bottom-end",
|
|
30
|
-
"right-end",
|
|
31
|
-
"top-start",
|
|
32
|
-
"top",
|
|
33
|
-
"top-end"
|
|
34
|
-
],
|
|
35
|
-
...dropdownProps,
|
|
36
|
-
onClickOutside: (e) => {
|
|
37
|
-
if (e.code === "Escape")
|
|
38
|
-
chevronRef.current.focus();
|
|
39
|
-
if (dropdownProps.onClickOutside)
|
|
40
|
-
dropdownProps.onClickOutside(e);
|
|
41
|
-
},
|
|
42
|
-
wrapperStyles: { w: "100%", h: "100%" }
|
|
43
|
-
}, /* @__PURE__ */ React2.createElement(DSPillButton, {
|
|
44
|
-
className: "ds-pill-focus-point",
|
|
45
|
-
"data-testid": "ds-pill-dropdown-chevron",
|
|
46
|
-
innerRef: setMultipleRefs(chevronRef, innerRef),
|
|
47
|
-
"aria-label": ariaLabel || label,
|
|
48
|
-
type: "right",
|
|
49
|
-
onClick: onDropdownClick
|
|
50
|
-
}, /* @__PURE__ */ React2.createElement(ChevronSmallDown, {
|
|
51
|
-
color: ["brand-primary", "800"],
|
|
52
|
-
width: 20,
|
|
53
|
-
height: 20
|
|
54
|
-
}))));
|
|
55
|
-
});
|
|
56
|
-
export {
|
|
57
|
-
DropdownPill
|
|
58
|
-
};
|
|
59
|
-
//# sourceMappingURL=DropdownPill.js.map
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 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 } 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;ACCA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AAEO,MAAM,eAAe,OAAM,KAChC,CAAC,EAAE,OAAO,MAAM,gBAAgB,eAAe,UAAU,WAAW,sBAAsB;AACxF,QAAM,aAAa,OAAO;AAE1B,QAAM,UAAU,QAAQ,MAAM,WAAW,SAAS;AAElD,QAAM,gBAAgB,iBAClB,CAAC,EAAE,eAAe,qCAAC,4BAAD;AAAA,IAA4B,OAAO;AAAA,OACrD,OAAM;AAEV,SACE,qCAAC,2BAAD;AAAA,IACE;AAAA,IACA,IAAI;AAAA,IACJ,WAAU;AAAA,IACV,eAAY;AAAA,IACZ,MAAM,CAAC,QAAQ;AAAA,IACf,QAAO;AAAA,IACP,YAAW;AAAA,IACX,cAAa;AAAA,KAEb,qCAAC,eAAD,MAAgB,QAChB,qCAAC,kBAAD;AAAA,IACE,0BAA0B;AAAA,MACxB;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,OAEE;AAAA,IACJ,gBAAgB,CAAC,MAAM;AACrB,UAAI,EAAE,SAAS;AAAU,mBAAW,QAAQ;AAC5C,UAAI,cAAc;AAAgB,sBAAc,eAAe;AAAA;AAAA,IAEjE,eAAe,EAAE,GAAG,QAAQ,GAAG;AAAA,KAE/B,qCAAC,cAAD;AAAA,IACE,WAAU;AAAA,IACV,eAAY;AAAA,IACZ,UAAU,gBAAgB,YAAY;AAAA,IACtC,cAAY,aAAa;AAAA,IACzB,MAAK;AAAA,IACL,SAAS;AAAA,KAET,qCAAC,kBAAD;AAAA,IAAkB,OAAO,CAAC,iBAAiB;AAAA,IAAQ,OAAO;AAAA,IAAI,QAAQ;AAAA;AAAA;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|