@elliemae/ds-pills 3.12.0-rc.2 → 3.12.0-rc.21
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/DSPillDefinitions.js +36 -0
- package/dist/cjs/DSPillDefinitions.js.map +7 -0
- package/dist/cjs/components/Pill.js +4 -5
- package/dist/cjs/components/Pill.js.map +2 -2
- package/dist/cjs/components/PillButton.js +4 -8
- package/dist/cjs/components/PillButton.js.map +2 -2
- package/dist/cjs/components/PillGroup.js +8 -7
- package/dist/cjs/components/PillGroup.js.map +2 -2
- package/dist/cjs/components/types/DropdownPill.js +51 -50
- package/dist/cjs/components/types/DropdownPill.js.map +1 -1
- package/dist/cjs/components/types/InputPill.js +42 -36
- package/dist/cjs/components/types/InputPill.js.map +1 -1
- package/dist/cjs/components/types/LabelPill.js +18 -19
- package/dist/cjs/components/types/LabelPill.js.map +1 -1
- package/dist/cjs/components/types/ReadOnlyPill.js +20 -21
- package/dist/cjs/components/types/ReadOnlyPill.js.map +1 -1
- package/dist/cjs/components/types/RemovablePill.js +39 -36
- package/dist/cjs/components/types/RemovablePill.js.map +1 -1
- package/dist/cjs/components/types/ValuePill.js +19 -27
- package/dist/cjs/components/types/ValuePill.js.map +1 -1
- package/dist/cjs/deprecated/DropdownPill.js +26 -26
- package/dist/cjs/deprecated/DropdownPill.js.map +1 -1
- package/dist/cjs/deprecated/InputPill.js +20 -18
- package/dist/cjs/deprecated/InputPill.js.map +1 -1
- package/dist/cjs/deprecated/LabeledDropdownPills.js +9 -13
- package/dist/cjs/deprecated/LabeledDropdownPills.js.map +1 -1
- package/dist/cjs/deprecated/LabeledDropdownPillsTypes/LabeledDropdownCascadeMenuPill.js +40 -42
- package/dist/cjs/deprecated/LabeledDropdownPillsTypes/LabeledDropdownCascadeMenuPill.js.map +1 -1
- package/dist/cjs/deprecated/LabeledDropdownPillsTypes/LabeledDropdownMultiPill.js +15 -20
- package/dist/cjs/deprecated/LabeledDropdownPillsTypes/LabeledDropdownMultiPill.js.map +1 -1
- package/dist/cjs/deprecated/LabeledDropdownPillsTypes/LabeledDropdownSinglePill.js +20 -17
- package/dist/cjs/deprecated/LabeledDropdownPillsTypes/LabeledDropdownSinglePill.js.map +1 -1
- package/dist/cjs/deprecated/LabeledPills.js +12 -14
- package/dist/cjs/deprecated/LabeledPills.js.map +1 -1
- package/dist/cjs/deprecated/OverflowPill.js +20 -14
- package/dist/cjs/deprecated/OverflowPill.js.map +1 -1
- package/dist/cjs/deprecated/Pill.js +5 -16
- package/dist/cjs/deprecated/Pill.js.map +1 -1
- package/dist/cjs/deprecated/PillGroup.js +13 -13
- package/dist/cjs/deprecated/PillGroup.js.map +1 -1
- package/dist/cjs/deprecated/ReadOnlyPill.js +34 -24
- package/dist/cjs/deprecated/ReadOnlyPill.js.map +1 -1
- package/dist/cjs/deprecated/RemovablePill.js +21 -23
- package/dist/cjs/deprecated/RemovablePill.js.map +1 -1
- package/dist/esm/DSPillDefinitions.js +10 -0
- package/dist/esm/DSPillDefinitions.js.map +7 -0
- package/dist/esm/components/Pill.js +4 -5
- package/dist/esm/components/Pill.js.map +2 -2
- package/dist/esm/components/PillButton.js +4 -8
- package/dist/esm/components/PillButton.js.map +2 -2
- package/dist/esm/components/PillGroup.js +8 -7
- package/dist/esm/components/PillGroup.js.map +2 -2
- package/dist/esm/components/types/DropdownPill.js +51 -50
- package/dist/esm/components/types/DropdownPill.js.map +1 -1
- package/dist/esm/components/types/InputPill.js +42 -36
- package/dist/esm/components/types/InputPill.js.map +1 -1
- package/dist/esm/components/types/LabelPill.js +18 -19
- package/dist/esm/components/types/LabelPill.js.map +1 -1
- package/dist/esm/components/types/ReadOnlyPill.js +20 -21
- package/dist/esm/components/types/ReadOnlyPill.js.map +1 -1
- package/dist/esm/components/types/RemovablePill.js +39 -36
- package/dist/esm/components/types/RemovablePill.js.map +1 -1
- package/dist/esm/components/types/ValuePill.js +19 -27
- package/dist/esm/components/types/ValuePill.js.map +1 -1
- package/dist/esm/deprecated/DropdownPill.js +26 -26
- package/dist/esm/deprecated/DropdownPill.js.map +1 -1
- package/dist/esm/deprecated/InputPill.js +20 -18
- package/dist/esm/deprecated/InputPill.js.map +1 -1
- package/dist/esm/deprecated/LabeledDropdownPills.js +9 -13
- package/dist/esm/deprecated/LabeledDropdownPills.js.map +1 -1
- package/dist/esm/deprecated/LabeledDropdownPillsTypes/LabeledDropdownCascadeMenuPill.js +40 -42
- package/dist/esm/deprecated/LabeledDropdownPillsTypes/LabeledDropdownCascadeMenuPill.js.map +1 -1
- package/dist/esm/deprecated/LabeledDropdownPillsTypes/LabeledDropdownMultiPill.js +15 -20
- package/dist/esm/deprecated/LabeledDropdownPillsTypes/LabeledDropdownMultiPill.js.map +1 -1
- package/dist/esm/deprecated/LabeledDropdownPillsTypes/LabeledDropdownSinglePill.js +20 -17
- package/dist/esm/deprecated/LabeledDropdownPillsTypes/LabeledDropdownSinglePill.js.map +1 -1
- package/dist/esm/deprecated/LabeledPills.js +12 -14
- package/dist/esm/deprecated/LabeledPills.js.map +1 -1
- package/dist/esm/deprecated/OverflowPill.js +20 -14
- package/dist/esm/deprecated/OverflowPill.js.map +1 -1
- package/dist/esm/deprecated/Pill.js +5 -16
- package/dist/esm/deprecated/Pill.js.map +1 -1
- package/dist/esm/deprecated/PillGroup.js +13 -13
- package/dist/esm/deprecated/PillGroup.js.map +1 -1
- package/dist/esm/deprecated/ReadOnlyPill.js +34 -24
- package/dist/esm/deprecated/ReadOnlyPill.js.map +1 -1
- package/dist/esm/deprecated/RemovablePill.js +21 -23
- package/dist/esm/deprecated/RemovablePill.js.map +1 -1
- package/package.json +15 -15
|
@@ -103,26 +103,29 @@ const LabeledDropdownSinglePill = ({
|
|
|
103
103
|
} else {
|
|
104
104
|
SelectedPill = import_RemovablePill.RemovablePill;
|
|
105
105
|
}
|
|
106
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
106
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
107
|
+
SelectedPill,
|
|
108
|
+
{
|
|
109
|
+
label: option.label,
|
|
110
|
+
onChange: onChangeInputValue,
|
|
111
|
+
onRemove: (e) => removeOption(option, e),
|
|
112
|
+
value: input,
|
|
113
|
+
...otherProps
|
|
114
|
+
},
|
|
115
|
+
option.id
|
|
116
|
+
);
|
|
113
117
|
};
|
|
114
118
|
const renderSelection = () => {
|
|
115
119
|
if (!labelIsValue) {
|
|
116
120
|
if (optionValue)
|
|
117
121
|
return renderPill(optionValue, fixed);
|
|
118
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Pill.Pill, {
|
|
119
|
-
label: "-"
|
|
120
|
-
});
|
|
122
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Pill.Pill, { label: "-" });
|
|
121
123
|
}
|
|
122
124
|
};
|
|
123
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
|
|
124
|
-
|
|
125
|
-
|
|
125
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
|
|
126
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
127
|
+
import_DropdownPill.DropdownPill,
|
|
128
|
+
{
|
|
126
129
|
...menuProps,
|
|
127
130
|
label: !labelIsValue ? label : optionValue?.label,
|
|
128
131
|
maxWidth,
|
|
@@ -142,10 +145,10 @@ const LabeledDropdownSinglePill = ({
|
|
|
142
145
|
"multi-selection-views": optionValue ? [optionValue?.id] : ""
|
|
143
146
|
},
|
|
144
147
|
variant: "title"
|
|
145
|
-
}
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
});
|
|
148
|
+
}
|
|
149
|
+
),
|
|
150
|
+
renderSelection()
|
|
151
|
+
] });
|
|
149
152
|
};
|
|
150
153
|
LabeledDropdownSinglePill.propTypes = {
|
|
151
154
|
label: import_prop_types.default.string,
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/deprecated/LabeledDropdownPillsTypes/LabeledDropdownSinglePill.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["/* eslint-disable mdx/no-unused-expressions */\n/* eslint-disable no-shadow */\n/* eslint-disable no-unused-expressions */\n/* eslint-disable max-lines */\nimport React, { useCallback, useState, useEffect, useLayoutEffect } from 'react';\nimport PropTypes from 'prop-types';\nimport { isFunction, isString, useShouldRecalculate, usePrevious } from '@elliemae/ds-utilities';\nimport { DropdownPill } from '../DropdownPill';\nimport { InputPill } from '../InputPill';\nimport { Pill } from '../Pill';\nimport { RemovablePill } from '../RemovablePill';\nimport { hasOptionChanged } from './utils';\n\nconst LabeledDropdownSinglePill = ({\n label,\n labelIsValue = false,\n options,\n value,\n onSelect = () => null,\n onChange,\n maxWidth,\n minWidth,\n fixed = false,\n ...menuProps\n}) => {\n const [optionValue, setOptionValue] = useState(value);\n const prevOptions = usePrevious(options);\n const areOptionsEqual = useShouldRecalculate(hasOptionChanged(prevOptions, options));\n\n useEffect(() => setOptionValue(value), [value]);\n\n useEffect(() => {\n const selectedValue = options.find((option) => option.selected);\n\n if (selectedValue) {\n setOptionValue(selectedValue);\n } else if (!selectedValue) {\n setOptionValue(options[0]);\n }\n }, [areOptionsEqual]);\n\n useLayoutEffect(() => {\n if (optionValue) {\n const selectedValue = options.find((option) => option.id === optionValue.id);\n setOptionValue(selectedValue);\n }\n }, [options]);\n\n const selectOption = useCallback(\n (option) => {\n if (isFunction(onChange)) {\n onChange(option);\n }\n setOptionValue(option);\n onSelect(option);\n },\n [onChange, onSelect],\n );\n\n const onChangeInputValue = useCallback(\n ({ target: { value: inputValue } }) => {\n const { onChangeInput } = optionValue;\n\n onChangeInput && onChangeInput(inputValue);\n },\n [optionValue],\n );\n\n const removeOption = (removedOption) => {\n const { onRemove } = menuProps;\n const { onChangeInput } = optionValue;\n setOptionValue(null);\n onChangeInput && onChangeInput('');\n const newOption = { ...removedOption, input: '' };\n onRemove && onRemove(newOption, removedOption);\n };\n\n const renderPill = (option, fixed) => {\n const { input, onChangeInput, ...otherProps } = option;\n let SelectedPill;\n if (isString(input)) {\n SelectedPill = InputPill;\n } else if (fixed) {\n SelectedPill = Pill;\n } else {\n SelectedPill = RemovablePill;\n }\n\n return (\n <SelectedPill\n key={option.id}\n label={option.label}\n onChange={onChangeInputValue}\n onRemove={(e) => removeOption(option, e)}\n value={input}\n {...otherProps}\n />\n );\n };\n\n const renderSelection = () => {\n if (!labelIsValue) {\n if (optionValue) return renderPill(optionValue, fixed);\n return <Pill label=\"-\" />;\n }\n };\n\n return (\n <>\n <DropdownPill\n {...menuProps}\n label={!labelIsValue ? label : optionValue?.label}\n maxWidth={maxWidth}\n minWidth={minWidth}\n onSelectMenuItem={selectOption}\n options={[\n {\n ...menuProps,\n type: 'SelectionGroup',\n id: 'multi-selection-views',\n multi: false,\n items: options,\n closeOnClick: true,\n },\n ]}\n selection={{\n 'multi-selection-views': optionValue ? [optionValue?.id] : '',\n }}\n variant=\"title\"\n />\n {renderSelection()}\n </>\n );\n};\n\nLabeledDropdownSinglePill.propTypes = {\n label: PropTypes.string,\n labelIsValue: PropTypes.bool,\n options: PropTypes.array,\n value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n onSelect: PropTypes.func,\n onChange: PropTypes.func,\n maxWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n minWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n fixed: PropTypes.bool,\n};\n\nexport { LabeledDropdownSinglePill };\nexport default LabeledDropdownSinglePill;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADyFjB;AArFN,mBAAyE;AACzE,wBAAsB;AACtB,0BAAwE;AACxE,0BAA6B;AAC7B,uBAA0B;AAC1B,kBAAqB;AACrB,2BAA8B;AAC9B,mBAAiC;AAEjC,MAAM,4BAA4B,CAAC;AAAA,EACjC;AAAA,EACA,eAAe;AAAA,EACf;AAAA,EACA;AAAA,EACA,WAAW,MAAM;AAAA,EACjB;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,KACL;AACL,MAAM;AACJ,QAAM,CAAC,aAAa,cAAc,QAAI,uBAAS,KAAK;AACpD,QAAM,kBAAc,iCAAY,OAAO;AACvC,QAAM,sBAAkB,8CAAqB,+BAAiB,aAAa,OAAO,CAAC;AAEnF,8BAAU,MAAM,eAAe,KAAK,GAAG,CAAC,KAAK,CAAC;AAE9C,8BAAU,MAAM;AACd,UAAM,gBAAgB,QAAQ,KAAK,CAAC,WAAW,OAAO,QAAQ;AAE9D,QAAI,eAAe;AACjB,qBAAe,aAAa;AAAA,IAC9B,WAAW,CAAC,eAAe;AACzB,qBAAe,QAAQ,EAAE;AAAA,IAC3B;AAAA,EACF,GAAG,CAAC,eAAe,CAAC;AAEpB,oCAAgB,MAAM;AACpB,QAAI,aAAa;AACf,YAAM,gBAAgB,QAAQ,KAAK,CAAC,WAAW,OAAO,OAAO,YAAY,EAAE;AAC3E,qBAAe,aAAa;AAAA,IAC9B;AAAA,EACF,GAAG,CAAC,OAAO,CAAC;AAEZ,QAAM,mBAAe;AAAA,IACnB,CAAC,WAAW;AACV,cAAI,gCAAW,QAAQ,GAAG;AACxB,iBAAS,MAAM;AAAA,MACjB;AACA,qBAAe,MAAM;AACrB,eAAS,MAAM;AAAA,IACjB;AAAA,IACA,CAAC,UAAU,QAAQ;AAAA,EACrB;AAEA,QAAM,yBAAqB;AAAA,IACzB,CAAC,EAAE,QAAQ,EAAE,OAAO,WAAW,EAAE,MAAM;AACrC,YAAM,EAAE,cAAc,IAAI;AAE1B,uBAAiB,cAAc,UAAU;AAAA,IAC3C;AAAA,IACA,CAAC,WAAW;AAAA,EACd;AAEA,QAAM,eAAe,CAAC,kBAAkB;AACtC,UAAM,EAAE,SAAS,IAAI;AACrB,UAAM,EAAE,cAAc,IAAI;AAC1B,mBAAe,IAAI;AACnB,qBAAiB,cAAc,EAAE;AACjC,UAAM,YAAY,EAAE,GAAG,eAAe,OAAO,GAAG;AAChD,gBAAY,SAAS,WAAW,aAAa;AAAA,EAC/C;AAEA,QAAM,aAAa,CAAC,QAAQA,WAAU;AACpC,UAAM,EAAE,OAAO,kBAAkB,WAAW,IAAI;AAChD,QAAI;AACJ,YAAI,8BAAS,KAAK,GAAG;AACnB,qBAAe;AAAA,IACjB,WAAWA,QAAO;AAChB,qBAAe;AAAA,IACjB,OAAO;AACL,qBAAe;AAAA,IACjB;AAEA,WACE,
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["fixed", "PropTypes"]
|
|
7
7
|
}
|
|
@@ -34,20 +34,18 @@ var import_ds_utilities = require("@elliemae/ds-utilities");
|
|
|
34
34
|
var import_PillGroup = require("./PillGroup");
|
|
35
35
|
var import_RemovablePill = require("./RemovablePill");
|
|
36
36
|
var import_Pill = require("./Pill");
|
|
37
|
-
const LabeledPills = ({ children, label = "", leftAddon, onFocusGroupSet, onFocusNextGroup, onFocusPreviousGroup }) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
leftAddon,
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
]
|
|
50
|
-
});
|
|
37
|
+
const LabeledPills = ({ children, label = "", leftAddon, onFocusGroupSet, onFocusNextGroup, onFocusPreviousGroup }) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
38
|
+
import_PillGroup.PillGroup,
|
|
39
|
+
{
|
|
40
|
+
onFocusGroupSet,
|
|
41
|
+
onFocusNextGroup,
|
|
42
|
+
onFocusPreviousGroup,
|
|
43
|
+
children: [
|
|
44
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Pill.Pill, { label, leftAddon, variant: "title", "data-testid": "pill-title" }),
|
|
45
|
+
children
|
|
46
|
+
]
|
|
47
|
+
}
|
|
48
|
+
);
|
|
51
49
|
const props = {
|
|
52
50
|
label: import_ds_utilities.PropTypes.string.isRequired.description("pill text label"),
|
|
53
51
|
children: import_ds_utilities.PropTypes.arrayOf(
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/deprecated/LabeledPills.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["import React from 'react';\nimport { PropTypes, describe } from '@elliemae/ds-utilities';\nimport { PillGroup } from './PillGroup';\nimport { RemovablePill } from './RemovablePill';\nimport { Pill } from './Pill';\n\nconst LabeledPills = ({ children, label = '', leftAddon, onFocusGroupSet, onFocusNextGroup, onFocusPreviousGroup }) => (\n <PillGroup\n onFocusGroupSet={onFocusGroupSet}\n onFocusNextGroup={onFocusNextGroup}\n onFocusPreviousGroup={onFocusPreviousGroup}\n >\n <Pill label={label} leftAddon={leftAddon} variant=\"title\" data-testid=\"pill-title\" />\n {children}\n </PillGroup>\n);\n\nconst props = {\n /** labeled pill text label */\n label: PropTypes.string.isRequired.description('pill text label'),\n /** pill to add the label to */\n children: PropTypes.arrayOf(\n PropTypes.shape({\n type: PropTypes.oneOf([PropTypes.instanceOf(Pill), PropTypes.instanceOf(RemovablePill)]),\n }),\n ).isRequired.description('pill to add the label to'),\n /** addon component to left */\n leftAddon: PropTypes.node.description('addon component to left'),\n /** focus next group callback */\n onFocusNextGroup: PropTypes.func.description('focus next group callback'),\n /** focus prev group callback */\n onFocusPreviousGroup: PropTypes.func.description('focus prev group callback'),\n /** focus group set callback */\n onFocusGroupSet: PropTypes.func.description('focus group set callback'),\n};\n\nLabeledPills.propTypes = props;\nLabeledPills.displayName = 'LabeledPills';\nconst DSLabeledPillsWithSchema = describe(LabeledPills);\nDSLabeledPillsWithSchema.propTypes = props;\n\nexport { LabeledPills, DSLabeledPillsWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADOrB;AANF,0BAAoC;AACpC,uBAA0B;AAC1B,2BAA8B;AAC9B,kBAAqB;AAErB,MAAM,eAAe,CAAC,EAAE,UAAU,QAAQ,IAAI,WAAW,iBAAiB,kBAAkB,qBAAqB,MAC/G
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADOrB;AANF,0BAAoC;AACpC,uBAA0B;AAC1B,2BAA8B;AAC9B,kBAAqB;AAErB,MAAM,eAAe,CAAC,EAAE,UAAU,QAAQ,IAAI,WAAW,iBAAiB,kBAAkB,qBAAqB,MAC/G;AAAA,EAAC;AAAA;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,IAEA;AAAA,kDAAC,oBAAK,OAAc,WAAsB,SAAQ,SAAQ,eAAY,cAAa;AAAA,MAClF;AAAA;AAAA;AACH;AAGF,MAAM,QAAQ;AAAA,EAEZ,OAAO,8BAAU,OAAO,WAAW,YAAY,iBAAiB;AAAA,EAEhE,UAAU,8BAAU;AAAA,IAClB,8BAAU,MAAM;AAAA,MACd,MAAM,8BAAU,MAAM,CAAC,8BAAU,WAAW,gBAAI,GAAG,8BAAU,WAAW,kCAAa,CAAC,CAAC;AAAA,IACzF,CAAC;AAAA,EACH,EAAE,WAAW,YAAY,0BAA0B;AAAA,EAEnD,WAAW,8BAAU,KAAK,YAAY,yBAAyB;AAAA,EAE/D,kBAAkB,8BAAU,KAAK,YAAY,2BAA2B;AAAA,EAExE,sBAAsB,8BAAU,KAAK,YAAY,2BAA2B;AAAA,EAE5E,iBAAiB,8BAAU,KAAK,YAAY,0BAA0B;AACxE;AAEA,aAAa,YAAY;AACzB,aAAa,cAAc;AAC3B,MAAM,+BAA2B,8BAAS,YAAY;AACtD,yBAAyB,YAAY;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -51,20 +51,26 @@ const OverflowPill = ({ containerProps = {}, label = "", options = [] }) => {
|
|
|
51
51
|
setTooltipText(text);
|
|
52
52
|
}, [options]);
|
|
53
53
|
(0, import_ds_shared.useFocusGroupItem)(ref);
|
|
54
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
54
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
55
|
+
import_ds_tooltip.DSTooltip,
|
|
56
|
+
{
|
|
57
|
+
isOpen: tooltipIsOpen,
|
|
58
|
+
title: tooltipText,
|
|
59
|
+
zIndex: 11,
|
|
60
|
+
triggerComponent: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
61
|
+
import_Pill.Pill,
|
|
62
|
+
{
|
|
63
|
+
className: "overflow-pill",
|
|
64
|
+
containerProps,
|
|
65
|
+
innerRef: ref,
|
|
66
|
+
label,
|
|
67
|
+
tabIndex: -1,
|
|
68
|
+
onMouseEnter: () => setTooltipIsOpen(true),
|
|
69
|
+
onMouseLeave: () => setTooltipIsOpen(false)
|
|
70
|
+
}
|
|
71
|
+
)
|
|
72
|
+
}
|
|
73
|
+
);
|
|
68
74
|
};
|
|
69
75
|
const props = {
|
|
70
76
|
containerProps: import_ds_utilities.PropTypes.object.description("props to inject to pill wrapper"),
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/deprecated/OverflowPill.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["import React, { useRef, useState, useEffect } from 'react';\nimport { PropTypes, describe } from '@elliemae/ds-utilities';\nimport { useFocusGroupItem } from '@elliemae/ds-shared';\nimport { DSTooltip } from '@elliemae/ds-tooltip';\nimport { Pill } from './Pill';\n\nconst OverflowPill = ({ containerProps = {}, label = '', options = [] }) => {\n const ref = useRef(null);\n const [tooltipIsOpen, setTooltipIsOpen] = useState(false);\n const [tooltipText, setTooltipText] = useState('');\n\n useEffect(() => {\n let text = '';\n options.forEach((option) => {\n if (!tooltipText || option === options[0]) {\n text = `${option.label}`;\n } else {\n text = text.concat(`, ${option.label}`);\n }\n });\n setTooltipText(text);\n }, [options]);\n\n useFocusGroupItem(ref);\n\n return (\n <DSTooltip\n isOpen={tooltipIsOpen}\n title={tooltipText}\n zIndex={11}\n triggerComponent={\n <Pill\n className=\"overflow-pill\"\n containerProps={containerProps}\n innerRef={ref}\n label={label}\n tabIndex={-1}\n onMouseEnter={() => setTooltipIsOpen(true)}\n onMouseLeave={() => setTooltipIsOpen(false)}\n />\n }\n />\n );\n};\n\nconst props = {\n /** props to inject to pill wrapper */\n containerProps: PropTypes.object.description('props to inject to pill wrapper'),\n /** pill text label */\n label: PropTypes.string.isRequired.description('pill text label'),\n /** overflow pills options */\n options: PropTypes.array.description('overflow pills options'),\n};\n\nOverflowPill.propTypes = props;\nOverflowPill.displayName = 'OverflowPill';\nconst DSOverflowPillWithSchema = describe(OverflowPill);\nDSOverflowPillWithSchema.propTypes = props;\n\nexport { OverflowPill, DSOverflowPillWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD+Bf;AA/BR,mBAAmD;AACnD,0BAAoC;AACpC,uBAAkC;AAClC,wBAA0B;AAC1B,kBAAqB;AAErB,MAAM,eAAe,CAAC,EAAE,iBAAiB,CAAC,GAAG,QAAQ,IAAI,UAAU,CAAC,EAAE,MAAM;AAC1E,QAAM,UAAM,qBAAO,IAAI;AACvB,QAAM,CAAC,eAAe,gBAAgB,QAAI,uBAAS,KAAK;AACxD,QAAM,CAAC,aAAa,cAAc,QAAI,uBAAS,EAAE;AAEjD,8BAAU,MAAM;AACd,QAAI,OAAO;AACX,YAAQ,QAAQ,CAAC,WAAW;AAC1B,UAAI,CAAC,eAAe,WAAW,QAAQ,IAAI;AACzC,eAAO,GAAG,OAAO;AAAA,MACnB,OAAO;AACL,eAAO,KAAK,OAAO,KAAK,OAAO,OAAO;AAAA,MACxC;AAAA,IACF,CAAC;AACD,mBAAe,IAAI;AAAA,EACrB,GAAG,CAAC,OAAO,CAAC;AAEZ,0CAAkB,GAAG;AAErB,SACE,
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD+Bf;AA/BR,mBAAmD;AACnD,0BAAoC;AACpC,uBAAkC;AAClC,wBAA0B;AAC1B,kBAAqB;AAErB,MAAM,eAAe,CAAC,EAAE,iBAAiB,CAAC,GAAG,QAAQ,IAAI,UAAU,CAAC,EAAE,MAAM;AAC1E,QAAM,UAAM,qBAAO,IAAI;AACvB,QAAM,CAAC,eAAe,gBAAgB,QAAI,uBAAS,KAAK;AACxD,QAAM,CAAC,aAAa,cAAc,QAAI,uBAAS,EAAE;AAEjD,8BAAU,MAAM;AACd,QAAI,OAAO;AACX,YAAQ,QAAQ,CAAC,WAAW;AAC1B,UAAI,CAAC,eAAe,WAAW,QAAQ,IAAI;AACzC,eAAO,GAAG,OAAO;AAAA,MACnB,OAAO;AACL,eAAO,KAAK,OAAO,KAAK,OAAO,OAAO;AAAA,MACxC;AAAA,IACF,CAAC;AACD,mBAAe,IAAI;AAAA,EACrB,GAAG,CAAC,OAAO,CAAC;AAEZ,0CAAkB,GAAG;AAErB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,kBACE;AAAA,QAAC;AAAA;AAAA,UACC,WAAU;AAAA,UACV;AAAA,UACA,UAAU;AAAA,UACV;AAAA,UACA,UAAU;AAAA,UACV,cAAc,MAAM,iBAAiB,IAAI;AAAA,UACzC,cAAc,MAAM,iBAAiB,KAAK;AAAA;AAAA,MAC5C;AAAA;AAAA,EAEJ;AAEJ;AAEA,MAAM,QAAQ;AAAA,EAEZ,gBAAgB,8BAAU,OAAO,YAAY,iCAAiC;AAAA,EAE9E,OAAO,8BAAU,OAAO,WAAW,YAAY,iBAAiB;AAAA,EAEhE,SAAS,8BAAU,MAAM,YAAY,wBAAwB;AAC/D;AAEA,aAAa,YAAY;AACzB,aAAa,cAAc;AAC3B,MAAM,+BAA2B,8BAAS,YAAY;AACtD,yBAAyB,YAAY;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -48,22 +48,11 @@ const Pill = ({
|
|
|
48
48
|
variant = "value",
|
|
49
49
|
size = "m",
|
|
50
50
|
...otherProps
|
|
51
|
-
}) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(PillWrapper, {
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
leftAddon && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PillAddon, {
|
|
57
|
-
children: leftAddon
|
|
58
|
-
}),
|
|
59
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(PillLabel, {
|
|
60
|
-
children: label
|
|
61
|
-
}),
|
|
62
|
-
rightAddon && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PillAddon, {
|
|
63
|
-
children: rightAddon
|
|
64
|
-
})
|
|
65
|
-
]
|
|
66
|
-
});
|
|
51
|
+
}) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(PillWrapper, { ...containerProps, classProps: { variant, size }, ...otherProps, children: [
|
|
52
|
+
leftAddon && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PillAddon, { children: leftAddon }),
|
|
53
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(PillLabel, { children: label }),
|
|
54
|
+
rightAddon && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PillAddon, { children: rightAddon })
|
|
55
|
+
] });
|
|
67
56
|
const props = {
|
|
68
57
|
containerProps: import_ds_utilities.PropTypes.object.description("props to inject to pill wrapper"),
|
|
69
58
|
label: import_ds_utilities.PropTypes.string.isRequired.description("pill text label"),
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/deprecated/Pill.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["import React from 'react';\nimport { PropTypes, describe } from '@elliemae/ds-utilities';\nimport { aggregatedClasses } from '@elliemae/ds-classnames';\n\nconst pillBlockName = 'pill';\n\nconst PillWrapper = aggregatedClasses('div')(pillBlockName, null, ({ size, variant }) => ({\n [variant]: !!variant,\n [size]: !!size,\n}));\nconst PillLabel = aggregatedClasses('span')(pillBlockName, 'label');\nconst PillAddon = aggregatedClasses('div')(pillBlockName, 'addon');\n\nconst Pill = ({\n containerProps = {},\n label = '',\n leftAddon,\n rightAddon,\n variant = 'value',\n size = 'm',\n ...otherProps\n}) => (\n <PillWrapper {...containerProps} classProps={{ variant, size }} {...otherProps}>\n {leftAddon && <PillAddon>{leftAddon}</PillAddon>}\n <PillLabel>{label}</PillLabel>\n {rightAddon && <PillAddon>{rightAddon}</PillAddon>}\n </PillWrapper>\n);\n\nconst props = {\n /** props to inject to pill wrapper */\n containerProps: PropTypes.object.description('props to inject to pill wrapper'),\n /** pill text label */\n label: PropTypes.string.isRequired.description('pill text label'),\n /** pill size */\n size: PropTypes.oneOf(['m', 'l']).description('pill size'),\n /** pill variant */\n variant: PropTypes.oneOf(['value', 'title']).description('pill variant'),\n /** addon component to left */\n leftAddon: PropTypes.node.description('addon component to left'),\n /** addon component to right */\n rightAddon: PropTypes.node.description('addon component to right'),\n};\n\nPill.propTypes = props;\nPill.displayName = 'Pill';\nconst DSPillWithSchema = describe(Pill);\nDSPillWithSchema.propTypes = props;\n\nexport { Pill, DSPillWithSchema };\nexport default Pill;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADsBrB;AArBF,0BAAoC;AACpC,2BAAkC;AAElC,MAAM,gBAAgB;AAEtB,MAAM,kBAAc,wCAAkB,KAAK,EAAE,eAAe,MAAM,CAAC,EAAE,MAAM,QAAQ,OAAO;AAAA,EACxF,CAAC,UAAU,CAAC,CAAC;AAAA,EACb,CAAC,OAAO,CAAC,CAAC;AACZ,EAAE;AACF,MAAM,gBAAY,wCAAkB,MAAM,EAAE,eAAe,OAAO;AAClE,MAAM,gBAAY,wCAAkB,KAAK,EAAE,eAAe,OAAO;AAEjE,MAAM,OAAO,CAAC;AAAA,EACZ,iBAAiB,CAAC;AAAA,EAClB,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV,OAAO;AAAA,KACJ;AACL,MACE,6CAAC
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADsBrB;AArBF,0BAAoC;AACpC,2BAAkC;AAElC,MAAM,gBAAgB;AAEtB,MAAM,kBAAc,wCAAkB,KAAK,EAAE,eAAe,MAAM,CAAC,EAAE,MAAM,QAAQ,OAAO;AAAA,EACxF,CAAC,UAAU,CAAC,CAAC;AAAA,EACb,CAAC,OAAO,CAAC,CAAC;AACZ,EAAE;AACF,MAAM,gBAAY,wCAAkB,MAAM,EAAE,eAAe,OAAO;AAClE,MAAM,gBAAY,wCAAkB,KAAK,EAAE,eAAe,OAAO;AAEjE,MAAM,OAAO,CAAC;AAAA,EACZ,iBAAiB,CAAC;AAAA,EAClB,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV,OAAO;AAAA,KACJ;AACL,MACE,6CAAC,eAAa,GAAG,gBAAgB,YAAY,EAAE,SAAS,KAAK,GAAI,GAAG,YACjE;AAAA,eAAa,4CAAC,aAAW,qBAAU;AAAA,EACpC,4CAAC,aAAW,iBAAM;AAAA,EACjB,cAAc,4CAAC,aAAW,sBAAW;AAAA,GACxC;AAGF,MAAM,QAAQ;AAAA,EAEZ,gBAAgB,8BAAU,OAAO,YAAY,iCAAiC;AAAA,EAE9E,OAAO,8BAAU,OAAO,WAAW,YAAY,iBAAiB;AAAA,EAEhE,MAAM,8BAAU,MAAM,CAAC,KAAK,GAAG,CAAC,EAAE,YAAY,WAAW;AAAA,EAEzD,SAAS,8BAAU,MAAM,CAAC,SAAS,OAAO,CAAC,EAAE,YAAY,cAAc;AAAA,EAEvE,WAAW,8BAAU,KAAK,YAAY,yBAAyB;AAAA,EAE/D,YAAY,8BAAU,KAAK,YAAY,0BAA0B;AACnE;AAEA,KAAK,YAAY;AACjB,KAAK,cAAc;AACnB,MAAM,uBAAmB,8BAAS,IAAI;AACtC,iBAAiB,YAAY;AAG7B,IAAO,eAAQ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -36,19 +36,19 @@ var import_ds_classnames = require("@elliemae/ds-classnames");
|
|
|
36
36
|
var import_ds_shared = require("@elliemae/ds-shared");
|
|
37
37
|
const pillGroupBlockName = "pill-group";
|
|
38
38
|
const Container = (0, import_ds_classnames.aggregatedClasses)("div")(pillGroupBlockName);
|
|
39
|
-
const PillGroup = ({ containerProps = {}, onFocusNextGroup, onFocusPreviousGroup, onFocusGroupSet, children }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
children
|
|
50
|
-
}
|
|
51
|
-
|
|
39
|
+
const PillGroup = ({ containerProps = {}, onFocusNextGroup, onFocusPreviousGroup, onFocusGroupSet, children }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
40
|
+
import_ds_shared.FocusGroupProvider,
|
|
41
|
+
{
|
|
42
|
+
keyBindings: {
|
|
43
|
+
Tab: "next"
|
|
44
|
+
},
|
|
45
|
+
onFocusGroupSet,
|
|
46
|
+
onFocusNextGroup,
|
|
47
|
+
onFocusPreviousGroup,
|
|
48
|
+
orientation: "horizontal",
|
|
49
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Container, { ...containerProps, children })
|
|
50
|
+
}
|
|
51
|
+
);
|
|
52
52
|
const props = {
|
|
53
53
|
containerProps: import_ds_utilities.PropTypes.object.description("props injected to component wrapper"),
|
|
54
54
|
onFocusNextGroup: import_ds_utilities.PropTypes.func.description("focus next group callback"),
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/deprecated/PillGroup.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["import React from 'react';\nimport { describe, PropTypes } from '@elliemae/ds-utilities';\nimport { aggregatedClasses } from '@elliemae/ds-classnames';\nimport { FocusGroupProvider } from '@elliemae/ds-shared';\n\nconst pillGroupBlockName = 'pill-group';\n\nexport const Container = aggregatedClasses('div')(pillGroupBlockName);\n\nconst PillGroup = ({ containerProps = {}, onFocusNextGroup, onFocusPreviousGroup, onFocusGroupSet, children }) => (\n <FocusGroupProvider\n keyBindings={{\n Tab: 'next',\n }}\n onFocusGroupSet={onFocusGroupSet}\n onFocusNextGroup={onFocusNextGroup}\n onFocusPreviousGroup={onFocusPreviousGroup}\n orientation=\"horizontal\"\n >\n <Container {...containerProps}>{children}</Container>\n </FocusGroupProvider>\n);\n\nconst props = {\n /** props injected to component wrapper */\n containerProps: PropTypes.object.description('props injected to component wrapper'),\n /** focus next group callback */\n onFocusNextGroup: PropTypes.func.description('focus next group callback'),\n /** focus prev group callback */\n onFocusPreviousGroup: PropTypes.func.description('focus prev group callback'),\n /** focus group set callback */\n onFocusGroupSet: PropTypes.func.description('focus group set callback'),\n /** pill components */\n children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired.description(\n 'pill components',\n ),\n};\n\nPillGroup.propTypes = props;\nPillGroup.displayName = 'PillGroup';\nconst DSPillGroupWithSchema = describe(PillGroup);\nDSPillGroupWithSchema.propTypes = props;\n\nexport { PillGroup, DSPillGroupWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADmBnB;AAlBJ,0BAAoC;AACpC,2BAAkC;AAClC,uBAAmC;AAEnC,MAAM,qBAAqB;AAEpB,MAAM,gBAAY,wCAAkB,KAAK,EAAE,kBAAkB;AAEpE,MAAM,YAAY,CAAC,EAAE,iBAAiB,CAAC,GAAG,kBAAkB,sBAAsB,iBAAiB,SAAS,MAC1G,
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADmBnB;AAlBJ,0BAAoC;AACpC,2BAAkC;AAClC,uBAAmC;AAEnC,MAAM,qBAAqB;AAEpB,MAAM,gBAAY,wCAAkB,KAAK,EAAE,kBAAkB;AAEpE,MAAM,YAAY,CAAC,EAAE,iBAAiB,CAAC,GAAG,kBAAkB,sBAAsB,iBAAiB,SAAS,MAC1G;AAAA,EAAC;AAAA;AAAA,IACC,aAAa;AAAA,MACX,KAAK;AAAA,IACP;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,aAAY;AAAA,IAEZ,sDAAC,aAAW,GAAG,gBAAiB,UAAS;AAAA;AAC3C;AAGF,MAAM,QAAQ;AAAA,EAEZ,gBAAgB,8BAAU,OAAO,YAAY,qCAAqC;AAAA,EAElF,kBAAkB,8BAAU,KAAK,YAAY,2BAA2B;AAAA,EAExE,sBAAsB,8BAAU,KAAK,YAAY,2BAA2B;AAAA,EAE5E,iBAAiB,8BAAU,KAAK,YAAY,0BAA0B;AAAA,EAEtE,UAAU,8BAAU,UAAU,CAAC,8BAAU,QAAQ,8BAAU,IAAI,GAAG,8BAAU,IAAI,CAAC,EAAE,WAAW;AAAA,IAC5F;AAAA,EACF;AACF;AAEA,UAAU,YAAY;AACtB,UAAU,cAAc;AACxB,MAAM,4BAAwB,8BAAS,SAAS;AAChD,sBAAsB,YAAY;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -50,34 +50,44 @@ const ReadOnlyPill = ({
|
|
|
50
50
|
const toggle = () => {
|
|
51
51
|
setIsModalOpen(!isModalOpen);
|
|
52
52
|
};
|
|
53
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
|
|
54
|
-
|
|
55
|
-
|
|
53
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
|
|
54
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
55
|
+
import_Pill.Pill,
|
|
56
|
+
{
|
|
56
57
|
"data-testid": "read-only-pill",
|
|
57
58
|
className: "removable-pill",
|
|
58
59
|
containerProps,
|
|
59
60
|
innerRef: ref,
|
|
60
61
|
label,
|
|
61
62
|
leftAddon,
|
|
62
|
-
rightAddon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
63
|
+
rightAddon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
64
|
+
import_ds_popover.DSPopover,
|
|
65
|
+
{
|
|
66
|
+
isOpen: tooltipText && isTooltipOpen,
|
|
67
|
+
content: tooltipText,
|
|
68
|
+
placement: "top",
|
|
69
|
+
showArrow: true,
|
|
70
|
+
renderTrigger: ({ ref: ref2 }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
71
|
+
import_ds_icons.InfoCircleSmall,
|
|
72
|
+
{
|
|
73
|
+
role: "button",
|
|
74
|
+
"data-testid": "read-only-info-btn",
|
|
75
|
+
className: "remove-pill-button",
|
|
76
|
+
onClick: toggle,
|
|
77
|
+
onMouseEnter: () => setIsTooltipOpen(true),
|
|
78
|
+
onMouseLeave: () => setIsTooltipOpen(false),
|
|
79
|
+
color: ["brand-primary", "600"],
|
|
80
|
+
innerRef: ref2
|
|
81
|
+
}
|
|
82
|
+
)
|
|
83
|
+
}
|
|
84
|
+
),
|
|
78
85
|
tabIndex: -1
|
|
79
|
-
}
|
|
80
|
-
|
|
86
|
+
}
|
|
87
|
+
),
|
|
88
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
89
|
+
import_ds_modal.DSModal,
|
|
90
|
+
{
|
|
81
91
|
isOpen: isModalOpen,
|
|
82
92
|
showClose: true,
|
|
83
93
|
shouldCloseOnOverlayClick: true,
|
|
@@ -86,9 +96,9 @@ const ReadOnlyPill = ({
|
|
|
86
96
|
onClose: toggle,
|
|
87
97
|
version: 2,
|
|
88
98
|
children: modalContent
|
|
89
|
-
}
|
|
90
|
-
|
|
91
|
-
});
|
|
99
|
+
}
|
|
100
|
+
)
|
|
101
|
+
] });
|
|
92
102
|
};
|
|
93
103
|
const props = {
|
|
94
104
|
containerProps: import_ds_utilities.PropTypes.object.description("props injected to component wrapper"),
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/deprecated/ReadOnlyPill.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["import React, { useRef, useState } from 'react';\nimport { PropTypes, describe } from '@elliemae/ds-utilities';\nimport { InfoCircleSmall } from '@elliemae/ds-icons';\nimport { DSModal, MODAL_TYPE_V2 } from '@elliemae/ds-modal';\nimport { DSPopover } from '@elliemae/ds-popover';\nimport { Pill } from './Pill';\n\nconst ReadOnlyPill = ({\n containerProps = {},\n modalContent = '',\n label = '',\n leftAddon,\n modalTitle = '',\n tooltipText = '',\n}) => {\n const ref = useRef(null);\n const [isModalOpen, setIsModalOpen] = useState(false);\n const [isTooltipOpen, setIsTooltipOpen] = useState(false);\n\n const toggle = () => {\n setIsModalOpen(!isModalOpen);\n };\n\n return (\n <>\n <Pill\n data-testid=\"read-only-pill\"\n className=\"removable-pill\"\n containerProps={containerProps}\n innerRef={ref}\n label={label}\n leftAddon={leftAddon}\n rightAddon={\n <DSPopover\n isOpen={tooltipText && isTooltipOpen}\n content={tooltipText}\n placement=\"top\"\n showArrow\n renderTrigger={({ ref }) => (\n <InfoCircleSmall\n role=\"button\"\n data-testid=\"read-only-info-btn\"\n className=\"remove-pill-button\"\n onClick={toggle}\n onMouseEnter={() => setIsTooltipOpen(true)}\n onMouseLeave={() => setIsTooltipOpen(false)}\n color={['brand-primary', '600']}\n innerRef={ref}\n />\n )}\n />\n }\n tabIndex={-1}\n />\n <DSModal\n isOpen={isModalOpen}\n showClose\n shouldCloseOnOverlayClick\n modalTitle={modalTitle}\n modalType={MODAL_TYPE_V2.INFORMATION}\n onClose={toggle}\n version={2}\n >\n {modalContent}\n </DSModal>\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 /** addon component to left */\n leftAddon: PropTypes.node.description('addon component to left'),\n /** read only pill modal content */\n modalContent: PropTypes.string.description('read only pill modal content'),\n /** read only pill modal title */\n modalTitle: PropTypes.string.description('read only pill modal title'),\n tooltipText: PropTypes.string.description('text to display in tooltip'),\n};\n\nReadOnlyPill.propTypes = props;\nReadOnlyPill.displayName = 'ReadOnlyPill';\nconst DSReadOnlyPillWithSchema = describe(ReadOnlyPill);\nDSReadOnlyPillWithSchema.propTypes = props;\n\nexport { ReadOnlyPill, DSReadOnlyPillWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADwBnB;AAxBJ,mBAAwC;AACxC,0BAAoC;AACpC,sBAAgC;AAChC,sBAAuC;AACvC,wBAA0B;AAC1B,kBAAqB;AAErB,MAAM,eAAe,CAAC;AAAA,EACpB,iBAAiB,CAAC;AAAA,EAClB,eAAe;AAAA,EACf,QAAQ;AAAA,EACR;AAAA,EACA,aAAa;AAAA,EACb,cAAc;AAChB,MAAM;AACJ,QAAM,UAAM,qBAAO,IAAI;AACvB,QAAM,CAAC,aAAa,cAAc,QAAI,uBAAS,KAAK;AACpD,QAAM,CAAC,eAAe,gBAAgB,QAAI,uBAAS,KAAK;AAExD,QAAM,SAAS,MAAM;AACnB,mBAAe,CAAC,WAAW;AAAA,EAC7B;AAEA,SACE;AAAA
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADwBnB;AAxBJ,mBAAwC;AACxC,0BAAoC;AACpC,sBAAgC;AAChC,sBAAuC;AACvC,wBAA0B;AAC1B,kBAAqB;AAErB,MAAM,eAAe,CAAC;AAAA,EACpB,iBAAiB,CAAC;AAAA,EAClB,eAAe;AAAA,EACf,QAAQ;AAAA,EACR;AAAA,EACA,aAAa;AAAA,EACb,cAAc;AAChB,MAAM;AACJ,QAAM,UAAM,qBAAO,IAAI;AACvB,QAAM,CAAC,aAAa,cAAc,QAAI,uBAAS,KAAK;AACpD,QAAM,CAAC,eAAe,gBAAgB,QAAI,uBAAS,KAAK;AAExD,QAAM,SAAS,MAAM;AACnB,mBAAe,CAAC,WAAW;AAAA,EAC7B;AAEA,SACE,4EACE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,eAAY;AAAA,QACZ,WAAU;AAAA,QACV;AAAA,QACA,UAAU;AAAA,QACV;AAAA,QACA;AAAA,QACA,YACE;AAAA,UAAC;AAAA;AAAA,YACC,QAAQ,eAAe;AAAA,YACvB,SAAS;AAAA,YACT,WAAU;AAAA,YACV,WAAS;AAAA,YACT,eAAe,CAAC,EAAE,KAAAA,KAAI,MACpB;AAAA,cAAC;AAAA;AAAA,gBACC,MAAK;AAAA,gBACL,eAAY;AAAA,gBACZ,WAAU;AAAA,gBACV,SAAS;AAAA,gBACT,cAAc,MAAM,iBAAiB,IAAI;AAAA,gBACzC,cAAc,MAAM,iBAAiB,KAAK;AAAA,gBAC1C,OAAO,CAAC,iBAAiB,KAAK;AAAA,gBAC9B,UAAUA;AAAA;AAAA,YACZ;AAAA;AAAA,QAEJ;AAAA,QAEF,UAAU;AAAA;AAAA,IACZ;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,QAAQ;AAAA,QACR,WAAS;AAAA,QACT,2BAAyB;AAAA,QACzB;AAAA,QACA,WAAW,8BAAc;AAAA,QACzB,SAAS;AAAA,QACT,SAAS;AAAA,QAER;AAAA;AAAA,IACH;AAAA,KACF;AAEJ;AAEA,MAAM,QAAQ;AAAA,EAEZ,gBAAgB,8BAAU,OAAO,YAAY,qCAAqC;AAAA,EAElF,OAAO,8BAAU,OAAO,WAAW,YAAY,iBAAiB;AAAA,EAEhE,WAAW,8BAAU,KAAK,YAAY,yBAAyB;AAAA,EAE/D,cAAc,8BAAU,OAAO,YAAY,8BAA8B;AAAA,EAEzE,YAAY,8BAAU,OAAO,YAAY,4BAA4B;AAAA,EACrE,aAAa,8BAAU,OAAO,YAAY,4BAA4B;AACxE;AAEA,aAAa,YAAY;AACzB,aAAa,cAAc;AAC3B,MAAM,+BAA2B,8BAAS,YAAY;AACtD,yBAAyB,YAAY;",
|
|
6
6
|
"names": ["ref"]
|
|
7
7
|
}
|
|
@@ -38,29 +38,27 @@ var import_Pill = require("./Pill");
|
|
|
38
38
|
const RemovablePill = ({ containerProps = {}, label = "", onRemove, size = "m", leftAddon }) => {
|
|
39
39
|
const ref = (0, import_react.useRef)(null);
|
|
40
40
|
const { focusPrevious } = (0, import_ds_shared.useFocusGroupItem)(ref);
|
|
41
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
if ((0, import_ds_utilities.isFunction)(
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
"data-testid": "remove-pill-button",
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
tabIndex: -1
|
|
63
|
-
});
|
|
41
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
42
|
+
import_Pill.Pill,
|
|
43
|
+
{
|
|
44
|
+
className: "removable-pill",
|
|
45
|
+
"data-testid": "removable-pill",
|
|
46
|
+
containerProps,
|
|
47
|
+
innerRef: ref,
|
|
48
|
+
size,
|
|
49
|
+
label,
|
|
50
|
+
leftAddon,
|
|
51
|
+
onKeyDown: (e) => {
|
|
52
|
+
if (e.key === "Backspace" && (0, import_ds_utilities.isFunction)(onRemove)) {
|
|
53
|
+
onRemove();
|
|
54
|
+
if ((0, import_ds_utilities.isFunction)(focusPrevious))
|
|
55
|
+
focusPrevious();
|
|
56
|
+
}
|
|
57
|
+
},
|
|
58
|
+
rightAddon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.CloseXsmall, { role: "button", "data-testid": "remove-pill-button", className: "remove-pill-button", onClick: onRemove }),
|
|
59
|
+
tabIndex: -1
|
|
60
|
+
}
|
|
61
|
+
);
|
|
64
62
|
};
|
|
65
63
|
const props = {
|
|
66
64
|
containerProps: import_ds_utilities.PropTypes.object.description("props injected to component wrapper"),
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/deprecated/RemovablePill.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["import React, { useRef } from 'react';\nimport { PropTypes, describe, isFunction } from '@elliemae/ds-utilities';\nimport { CloseXsmall } from '@elliemae/ds-icons';\nimport { useFocusGroupItem } from '@elliemae/ds-shared';\nimport { Pill } from './Pill';\n\nconst RemovablePill = ({ containerProps = {}, label = '', onRemove, size = 'm', leftAddon }) => {\n const ref = useRef(null);\n const { focusPrevious } = useFocusGroupItem(ref);\n return (\n <Pill\n className=\"removable-pill\"\n data-testid=\"removable-pill\"\n containerProps={containerProps}\n innerRef={ref}\n size={size}\n label={label}\n leftAddon={leftAddon}\n onKeyDown={(e) => {\n if (e.key === 'Backspace' && isFunction(onRemove)) {\n onRemove();\n if (isFunction(focusPrevious)) focusPrevious();\n }\n }}\n rightAddon={\n <CloseXsmall role=\"button\" data-testid=\"remove-pill-button\" className=\"remove-pill-button\" onClick={onRemove} />\n }\n tabIndex={-1}\n />\n );\n};\n\nconst props = {\n /** props injected to component wrapper */\n containerProps: PropTypes.object.description('props injected to component wrapper'),\n /** labeled pill text label */\n label: PropTypes.string.isRequired.description('pill text label'),\n /** remove click callback */\n onRemove: PropTypes.func.description('remove click callback'),\n /** pill size */\n size: PropTypes.oneOf(['m', 'l']).description('pill size'),\n /** addon component to left */\n leftAddon: PropTypes.node.description('addon component to left'),\n};\n\nRemovablePill.propTypes = props;\nRemovablePill.displayName = 'RemovablePill';\nconst DSRemovablePillWithSchema = describe(RemovablePill);\nDSRemovablePillWithSchema.propTypes = props;\n\nexport { RemovablePill, DSRemovablePillWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADyBf;AAzBR,mBAA8B;AAC9B,0BAAgD;AAChD,sBAA4B;AAC5B,uBAAkC;AAClC,kBAAqB;AAErB,MAAM,gBAAgB,CAAC,EAAE,iBAAiB,CAAC,GAAG,QAAQ,IAAI,UAAU,OAAO,KAAK,UAAU,MAAM;AAC9F,QAAM,UAAM,qBAAO,IAAI;AACvB,QAAM,EAAE,cAAc,QAAI,oCAAkB,GAAG;AAC/C,SACE,
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADyBf;AAzBR,mBAA8B;AAC9B,0BAAgD;AAChD,sBAA4B;AAC5B,uBAAkC;AAClC,kBAAqB;AAErB,MAAM,gBAAgB,CAAC,EAAE,iBAAiB,CAAC,GAAG,QAAQ,IAAI,UAAU,OAAO,KAAK,UAAU,MAAM;AAC9F,QAAM,UAAM,qBAAO,IAAI;AACvB,QAAM,EAAE,cAAc,QAAI,oCAAkB,GAAG;AAC/C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAU;AAAA,MACV,eAAY;AAAA,MACZ;AAAA,MACA,UAAU;AAAA,MACV;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW,CAAC,MAAM;AAChB,YAAI,EAAE,QAAQ,mBAAe,gCAAW,QAAQ,GAAG;AACjD,mBAAS;AACT,kBAAI,gCAAW,aAAa;AAAG,0BAAc;AAAA,QAC/C;AAAA,MACF;AAAA,MACA,YACE,4CAAC,+BAAY,MAAK,UAAS,eAAY,sBAAqB,WAAU,sBAAqB,SAAS,UAAU;AAAA,MAEhH,UAAU;AAAA;AAAA,EACZ;AAEJ;AAEA,MAAM,QAAQ;AAAA,EAEZ,gBAAgB,8BAAU,OAAO,YAAY,qCAAqC;AAAA,EAElF,OAAO,8BAAU,OAAO,WAAW,YAAY,iBAAiB;AAAA,EAEhE,UAAU,8BAAU,KAAK,YAAY,uBAAuB;AAAA,EAE5D,MAAM,8BAAU,MAAM,CAAC,KAAK,GAAG,CAAC,EAAE,YAAY,WAAW;AAAA,EAEzD,WAAW,8BAAU,KAAK,YAAY,yBAAyB;AACjE;AAEA,cAAc,YAAY;AAC1B,cAAc,cAAc;AAC5B,MAAM,gCAA4B,8BAAS,aAAa;AACxD,0BAA0B,YAAY;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
const DSPillName = "DSPill";
|
|
3
|
+
const DSPillButtonName = "DSPillButton";
|
|
4
|
+
const DSPillGroupName = "DSPillGroup";
|
|
5
|
+
export {
|
|
6
|
+
DSPillButtonName,
|
|
7
|
+
DSPillGroupName,
|
|
8
|
+
DSPillName
|
|
9
|
+
};
|
|
10
|
+
//# sourceMappingURL=DSPillDefinitions.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/DSPillDefinitions.tsx"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export const DSPillName = 'DSPill';\n\nexport const DSPillButtonName = 'DSPillButton';\n\nexport const DSPillGroupName = 'DSPillGroup';\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAhB,MAAM,aAAa;AAEnB,MAAM,mBAAmB;AAEzB,MAAM,kBAAkB;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -3,6 +3,7 @@ import { jsx } from "react/jsx-runtime";
|
|
|
3
3
|
import { describe, useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from "@elliemae/ds-utilities";
|
|
4
4
|
import { DSPillV2DefaultProps, DSPillV2PropTypes } from "../props";
|
|
5
5
|
import { DropdownPill, LabelPill, ValuePill, InputPill, ReadOnlyPill, RemovablePill } from "./types";
|
|
6
|
+
import { DSPillName } from "../DSPillDefinitions";
|
|
6
7
|
const pillComponentGetter = {
|
|
7
8
|
dropdown: DropdownPill,
|
|
8
9
|
input: InputPill,
|
|
@@ -13,15 +14,13 @@ const pillComponentGetter = {
|
|
|
13
14
|
};
|
|
14
15
|
const DSPillV2 = (props) => {
|
|
15
16
|
const propsWithDefaults = useMemoMergePropsWithDefault(props, DSPillV2DefaultProps);
|
|
16
|
-
useValidateTypescriptPropTypes(propsWithDefaults, DSPillV2PropTypes);
|
|
17
|
+
useValidateTypescriptPropTypes(propsWithDefaults, DSPillV2PropTypes, DSPillName);
|
|
17
18
|
const { type } = propsWithDefaults;
|
|
18
19
|
const PillComponent = pillComponentGetter[type];
|
|
19
|
-
return /* @__PURE__ */ jsx(PillComponent, {
|
|
20
|
-
...propsWithDefaults
|
|
21
|
-
});
|
|
20
|
+
return /* @__PURE__ */ jsx(PillComponent, { ...propsWithDefaults });
|
|
22
21
|
};
|
|
23
22
|
DSPillV2.propTypes = DSPillV2PropTypes;
|
|
24
|
-
DSPillV2.displayName =
|
|
23
|
+
DSPillV2.displayName = DSPillName;
|
|
25
24
|
const DSPillV2WithSchema = describe(DSPillV2).description("Pill");
|
|
26
25
|
DSPillV2WithSchema.propTypes = DSPillV2PropTypes;
|
|
27
26
|
export {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
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, useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-utilities';\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;\nDSPillV2.displayName =
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/prop-types */\nimport React from 'react';\nimport { describe, useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-utilities';\nimport type { DSPillProps } from '../index.d';\nimport { DSPillV2DefaultProps, DSPillV2PropTypes } from '../props';\nimport { DropdownPill, LabelPill, ValuePill, InputPill, ReadOnlyPill, RemovablePill } from './types';\nimport { DSPillName } from '../DSPillDefinitions';\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, DSPillName);\n const { type } = propsWithDefaults;\n const PillComponent = pillComponentGetter[type];\n\n return <PillComponent {...propsWithDefaults} />;\n};\n\nDSPillV2.propTypes = DSPillV2PropTypes;\nDSPillV2.displayName = DSPillName;\nconst DSPillV2WithSchema = describe(DSPillV2).description('Pill');\nDSPillV2WithSchema.propTypes = DSPillV2PropTypes;\n\nexport { DSPillV2, DSPillV2WithSchema };\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACuBd;AArBT,SAAS,UAAU,8BAA8B,sCAAsC;AAEvF,SAAS,sBAAsB,yBAAyB;AACxD,SAAS,cAAc,WAAW,WAAW,WAAW,cAAc,qBAAqB;AAC3F,SAAS,kBAAkB;AAE3B,MAAM,sBAAwE;AAAA,EAC5E,UAAU;AAAA,EACV,OAAO;AAAA,EACP,OAAO;AAAA,EACP,UAAU;AAAA,EACV,WAAW;AAAA,EACX,OAAO;AACT;AAEA,MAAM,WAA6C,CAAC,UAAU;AAC5D,QAAM,oBAAoB,6BAA6B,OAAO,oBAAoB;AAClF,iCAA+B,mBAAmB,mBAAmB,UAAU;AAC/E,QAAM,EAAE,KAAK,IAAI;AACjB,QAAM,gBAAgB,oBAAoB;AAE1C,SAAO,oBAAC,iBAAe,GAAG,mBAAmB;AAC/C;AAEA,SAAS,YAAY;AACrB,SAAS,cAAc;AACvB,MAAM,qBAAqB,SAAS,QAAQ,EAAE,YAAY,MAAM;AAChE,mBAAmB,YAAY;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -3,6 +3,7 @@ import { jsx } from "react/jsx-runtime";
|
|
|
3
3
|
import { describe, useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from "@elliemae/ds-utilities";
|
|
4
4
|
import { StyledPillButton } from "./styled";
|
|
5
5
|
import { DSPillButtonDefaultProps, DSPillButtonPropTypes } from "../props";
|
|
6
|
+
import { DSPillButtonName } from "../DSPillDefinitions";
|
|
6
7
|
const typeToClassName = {
|
|
7
8
|
only: "ds-pill-button-only",
|
|
8
9
|
left: "ds-pill-button-left",
|
|
@@ -10,17 +11,12 @@ const typeToClassName = {
|
|
|
10
11
|
};
|
|
11
12
|
const DSPillButton = (props) => {
|
|
12
13
|
const propsWithDefaults = useMemoMergePropsWithDefault(props, DSPillButtonDefaultProps);
|
|
13
|
-
useValidateTypescriptPropTypes(propsWithDefaults, DSPillButtonPropTypes);
|
|
14
|
+
useValidateTypescriptPropTypes(propsWithDefaults, DSPillButtonPropTypes, DSPillButtonName);
|
|
14
15
|
const { type, children, ...rest } = propsWithDefaults;
|
|
15
|
-
return /* @__PURE__ */ jsx(StyledPillButton, {
|
|
16
|
-
...rest,
|
|
17
|
-
buttonType: "raw",
|
|
18
|
-
className: `${typeToClassName[type]} ${rest.className}`,
|
|
19
|
-
children
|
|
20
|
-
});
|
|
16
|
+
return /* @__PURE__ */ jsx(StyledPillButton, { ...rest, buttonType: "raw", className: `${typeToClassName[type]} ${rest.className}`, children });
|
|
21
17
|
};
|
|
22
18
|
DSPillButton.propTypes = DSPillButtonPropTypes;
|
|
23
|
-
DSPillButton.displayName =
|
|
19
|
+
DSPillButton.displayName = DSPillButtonName;
|
|
24
20
|
const DSPillButtonWithSchema = describe(DSPillButton).description("Pill button");
|
|
25
21
|
DSPillButtonWithSchema.propTypes = DSPillButtonPropTypes;
|
|
26
22
|
export {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
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 type { DSButtonPropsT } from '@elliemae/ds-button';\nimport { describe, useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-utilities';\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;\nDSPillButton.displayName =
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/prop-types */\nimport React from 'react';\nimport type { DSButtonPropsT } from '@elliemae/ds-button';\nimport { describe, useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-utilities';\nimport { StyledPillButton } from './styled';\nimport { DSPillButtonDefaultProps, DSPillButtonPropTypes } from '../props';\nimport { DSPillButtonName } from '../DSPillDefinitions';\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, DSPillButtonName);\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;\nDSPillButton.displayName = DSPillButtonName;\nconst DSPillButtonWithSchema = describe(DSPillButton).description('Pill button');\nDSPillButtonWithSchema.propTypes = DSPillButtonPropTypes;\n\nexport { DSPillButton, DSPillButtonWithSchema };\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACqBnB;AAlBJ,SAAS,UAAU,8BAA8B,sCAAsC;AACvF,SAAS,wBAAwB;AACjC,SAAS,0BAA0B,6BAA6B;AAChE,SAAS,wBAAwB;AAEjC,MAAM,kBAAkB;AAAA,EACtB,MAAM;AAAA,EACN,MAAM;AAAA,EACN,OAAO;AACT;AAEA,MAAM,eAAoD,CAAC,UAAU;AACnE,QAAM,oBAAoB,6BAA6B,OAAO,wBAAwB;AACtF,iCAA+B,mBAAmB,uBAAuB,gBAAgB;AAEzF,QAAM,EAAE,MAAM,aAAa,KAAK,IAAI;AAEpC,SACE,oBAAC,oBAAkB,GAAG,MAAM,YAAW,OAAM,WAAW,GAAG,gBAAgB,SAAS,KAAK,aACtF,UACH;AAEJ;AAEA,aAAa,YAAY;AACzB,aAAa,cAAc;AAC3B,MAAM,yBAAyB,SAAS,YAAY,EAAE,YAAY,aAAa;AAC/E,uBAAuB,YAAY;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|