@elliemae/ds-pills 3.12.0-next.0 → 3.12.0-next.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/components/PillGroup.js.map +2 -2
- package/dist/cjs/deprecated/DropdownPill.js +3 -3
- package/dist/cjs/deprecated/DropdownPill.js.map +2 -2
- package/dist/cjs/deprecated/InputPill.js +3 -3
- package/dist/cjs/deprecated/InputPill.js.map +2 -2
- package/dist/cjs/deprecated/LabeledDropdownPills.js +6 -14
- package/dist/cjs/deprecated/LabeledDropdownPills.js.map +2 -2
- package/dist/cjs/deprecated/LabeledDropdownPillsTypes/LabeledDropdownCascadeMenuPill.js +3 -3
- package/dist/cjs/deprecated/LabeledDropdownPillsTypes/LabeledDropdownCascadeMenuPill.js.map +2 -2
- package/dist/cjs/deprecated/LabeledDropdownPillsTypes/LabeledDropdownMultiPill.js +3 -3
- package/dist/cjs/deprecated/LabeledDropdownPillsTypes/LabeledDropdownMultiPill.js.map +2 -2
- package/dist/cjs/deprecated/LabeledDropdownPillsTypes/LabeledDropdownSinglePill.js +3 -3
- package/dist/cjs/deprecated/LabeledDropdownPillsTypes/LabeledDropdownSinglePill.js.map +2 -2
- package/dist/cjs/deprecated/LabeledPills.js +13 -25
- package/dist/cjs/deprecated/LabeledPills.js.map +2 -2
- package/dist/cjs/deprecated/OverflowPill.js +2 -2
- package/dist/cjs/deprecated/OverflowPill.js.map +2 -2
- package/dist/cjs/deprecated/Pill.js +22 -30
- package/dist/cjs/deprecated/Pill.js.map +2 -2
- package/dist/cjs/deprecated/RemovablePill.js +2 -2
- package/dist/cjs/deprecated/RemovablePill.js.map +2 -2
- package/dist/cjs/index.d.js.map +1 -1
- package/dist/esm/components/PillGroup.js.map +2 -2
- package/dist/esm/deprecated/DropdownPill.js +3 -3
- package/dist/esm/deprecated/DropdownPill.js.map +2 -2
- package/dist/esm/deprecated/InputPill.js +3 -3
- package/dist/esm/deprecated/InputPill.js.map +2 -2
- package/dist/esm/deprecated/LabeledDropdownPills.js +6 -14
- package/dist/esm/deprecated/LabeledDropdownPills.js.map +2 -2
- package/dist/esm/deprecated/LabeledDropdownPillsTypes/LabeledDropdownCascadeMenuPill.js +3 -3
- package/dist/esm/deprecated/LabeledDropdownPillsTypes/LabeledDropdownCascadeMenuPill.js.map +2 -2
- package/dist/esm/deprecated/LabeledDropdownPillsTypes/LabeledDropdownMultiPill.js +3 -3
- package/dist/esm/deprecated/LabeledDropdownPillsTypes/LabeledDropdownMultiPill.js.map +2 -2
- package/dist/esm/deprecated/LabeledDropdownPillsTypes/LabeledDropdownSinglePill.js +3 -3
- package/dist/esm/deprecated/LabeledDropdownPillsTypes/LabeledDropdownSinglePill.js.map +2 -2
- package/dist/esm/deprecated/LabeledPills.js +13 -25
- package/dist/esm/deprecated/LabeledPills.js.map +2 -2
- package/dist/esm/deprecated/OverflowPill.js +2 -2
- package/dist/esm/deprecated/OverflowPill.js.map +2 -2
- package/dist/esm/deprecated/Pill.js +22 -30
- package/dist/esm/deprecated/Pill.js.map +2 -2
- package/dist/esm/deprecated/RemovablePill.js +2 -2
- package/dist/esm/deprecated/RemovablePill.js.map +2 -2
- package/package.json +14 -14
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/PillGroup.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable react/prop-types */\nimport React, { createContext, useCallback, useMemo
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["/* eslint-disable react/prop-types */\nimport type { WeakValidationMap } from 'react';\nimport React, { createContext, useCallback, useMemo } from 'react';\nimport { uid } from 'uid';\nimport {\n describe,\n useMemoMergePropsWithDefault,\n useValidateTypescriptPropTypes,\n useGetGlobalAttributes,\n} from '@elliemae/ds-utilities';\nimport type { DSPillGroupProps } from '../index.d';\nimport { DSPillGroupDefaultProps, DSPillGroupPropTypes } from '../props';\nimport { StyledPillGroup } from './styled';\n\nexport const DSPillGroupV2Context = createContext<{\n onKeyboardRemove: (pillUid: string) => void;\n onKeyboardNavigation: (pillUid: string, step: number, e: KeyboardEvent) => void;\n}>({\n onKeyboardRemove: () => null,\n onKeyboardNavigation: () => null,\n});\n\nconst DSPillGroupV2: React.ComponentType<DSPillGroupProps> = (props) => {\n const propsWithDefaults = useMemoMergePropsWithDefault(props, DSPillGroupDefaultProps);\n useValidateTypescriptPropTypes(propsWithDefaults, DSPillGroupPropTypes);\n\n const globalAttrs = useGetGlobalAttributes(propsWithDefaults);\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 const onKeyboardNavigation = useCallback(\n (pillUid: string, step: number, e: KeyboardEvent) => {\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 if (elems[pillIndex + step]) {\n e.stopPropagation();\n elems[pillIndex + step].focus();\n }\n }\n },\n [pillGroupUid],\n );\n\n return (\n <DSPillGroupV2Context.Provider value={{ onKeyboardRemove, onKeyboardNavigation }}>\n <StyledPillGroup\n {...globalAttrs}\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 as WeakValidationMap<unknown>;\nDSPillGroupV2.displayName = 'DSPillGroupV2';\nconst DSPillGroupV2WithSchema = describe(DSPillGroupV2);\nDSPillGroupV2WithSchema.propTypes = DSPillGroupPropTypes as WeakValidationMap<unknown>;\n\nexport { DSPillGroupV2, DSPillGroupV2WithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD6DjB;AA3DN,mBAA2D;AAC3D,iBAAoB;AACpB,0BAKO;AAEP,mBAA8D;AAC9D,oBAAgC;AAEzB,MAAM,2BAAuB,4BAGjC;AAAA,EACD,kBAAkB,MAAM;AAAA,EACxB,sBAAsB,MAAM;AAC9B,CAAC;AAED,MAAM,gBAAuD,CAAC,UAAU;AACtE,QAAM,wBAAoB,kDAA6B,OAAO,oCAAuB;AACrF,0DAA+B,mBAAmB,iCAAoB;AAEtE,QAAM,kBAAc,4CAAuB,iBAAiB;AAC5D,QAAM,mBAAe,sBAAQ,MAAM,qBAAiB,gBAAI,KAAK,CAAC,CAAC;AAC/D,QAAM,EAAE,UAAU,OAAO,SAAS,IAAI;AACtC,QAAM,uBAAmB;AAAA,IACvB,CAAC,YAAoB;AACnB,YAAM,QAAQ,CAAC,GAAG,SAAS,iBAAiB,IAAI,mCAAmC,CAAC;AAEpF,YAAM,YAAY,MAAM,UAAU,CAAC,SAAS,KAAK,OAAO,OAAO;AAE/D,UAAI,YAAY,GAAG;AACjB,cAAM,YAAY,GAAG,MAAM;AAAA,MAC7B,WAAW,YAAY,IAAI,MAAM,QAAQ;AACvC,cAAM,YAAY,GAAG,MAAM;AAAA,MAC7B;AAAA,IACF;AAAA,IACA,CAAC,YAAY;AAAA,EACf;AACA,QAAM,2BAAuB;AAAA,IAC3B,CAAC,SAAiB,MAAc,MAAqB;AACnD,YAAM,QAAQ,CAAC,GAAG,SAAS,iBAAiB,IAAI,mCAAmC,CAAC;AAEpF,YAAM,YAAY,MAAM,UAAU,CAAC,SAAS,KAAK,OAAO,OAAO;AAE/D,UAAI,aAAa,GAAG;AAClB,YAAI,MAAM,YAAY,OAAO;AAC3B,YAAE,gBAAgB;AAClB,gBAAM,YAAY,MAAM,MAAM;AAAA,QAChC;AAAA,MACF;AAAA,IACF;AAAA,IACA,CAAC,YAAY;AAAA,EACf;AAEA,SACE,4CAAC,qBAAqB,UAArB;AAAA,IAA8B,OAAO,EAAE,kBAAkB,qBAAqB;AAAA,IAC7E,sDAAC;AAAA,MACE,GAAG;AAAA,MACJ;AAAA,MACA,IAAI;AAAA,MACJ,MAAM,aAAAA,QAAM,SAAS,IAAI,UAAU,MAAM,MAAM;AAAA,MAC/C,QAAO;AAAA,MACP,KAAK;AAAA,MAEJ;AAAA,KACH;AAAA,GACF;AAEJ;AAEA,cAAc,YAAY;AAC1B,cAAc,cAAc;AAC5B,MAAM,8BAA0B,8BAAS,aAAa;AACtD,wBAAwB,YAAY;",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -36,7 +36,7 @@ var import_ds_dropdownmenu = require("@elliemae/ds-dropdownmenu");
|
|
|
36
36
|
var import_ds_icons = require("@elliemae/ds-icons");
|
|
37
37
|
var import_ds_shared = require("@elliemae/ds-shared");
|
|
38
38
|
var import_Pill = require("./Pill");
|
|
39
|
-
|
|
39
|
+
const DropdownPill = ({
|
|
40
40
|
containerProps = {},
|
|
41
41
|
label = "",
|
|
42
42
|
variant,
|
|
@@ -45,7 +45,7 @@ function DropdownPill({
|
|
|
45
45
|
maxWidth,
|
|
46
46
|
minWidth,
|
|
47
47
|
...dropdownProps
|
|
48
|
-
}) {
|
|
48
|
+
}) => {
|
|
49
49
|
const ref = (0, import_react.useRef)(null);
|
|
50
50
|
const [chevronEl, chevronRef] = (0, import_react.useState)();
|
|
51
51
|
const { focusFirst } = (0, import_ds_shared.useFocusGroupItem)(ref);
|
|
@@ -75,7 +75,7 @@ function DropdownPill({
|
|
|
75
75
|
variant
|
|
76
76
|
})
|
|
77
77
|
});
|
|
78
|
-
}
|
|
78
|
+
};
|
|
79
79
|
const props = {
|
|
80
80
|
containerProps: import_ds_utilities.PropTypes.object.description("props injected to component wrapper"),
|
|
81
81
|
label: import_ds_utilities.PropTypes.string.isRequired.description("pill text label"),
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/deprecated/DropdownPill.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React, { useRef, useState } from 'react';\nimport { PropTypes, describe } from '@elliemae/ds-utilities';\nimport { DSDropdownMenu } from '@elliemae/ds-dropdownmenu';\nimport { ChevronDown } from '@elliemae/ds-icons';\nimport { useFocusGroupItem } from '@elliemae/ds-shared';\nimport { Pill } from './Pill';\n\
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADuCT;AAvCd,mBAAwC;AACxC,0BAAoC;AACpC,6BAA+B;AAC/B,sBAA4B;AAC5B,uBAAkC;AAClC,kBAAqB;AAErB,
|
|
4
|
+
"sourcesContent": ["import React, { useRef, useState } from 'react';\nimport { PropTypes, describe } from '@elliemae/ds-utilities';\nimport { DSDropdownMenu } from '@elliemae/ds-dropdownmenu';\nimport { ChevronDown } from '@elliemae/ds-icons';\nimport { useFocusGroupItem } from '@elliemae/ds-shared';\nimport { Pill } from './Pill';\n\nconst DropdownPill = ({\n containerProps = {},\n label = '',\n variant,\n tabIndex = -1,\n closeMenuOnItemSelection = false,\n maxWidth,\n minWidth,\n ...dropdownProps\n}) => {\n const ref = useRef(null);\n const [chevronEl, chevronRef] = useState();\n const { focusFirst } = useFocusGroupItem(ref);\n return (\n <DSDropdownMenu\n {...dropdownProps}\n closeMenuOnItemSelection={closeMenuOnItemSelection}\n maxWidth={maxWidth}\n hideIfNotVisible\n menuProps={{ className: 'dropdown-pill-menu', zIndex: 100 }}\n minWidth={minWidth}\n onClose={focusFirst}\n referenceNode={chevronEl}\n triggerComponent={\n <Pill\n data-testid=\"dropdown-pill\"\n className=\"dropdown-pill\"\n containerProps={{ role: 'listbox', ...containerProps }}\n innerRef={ref}\n label={label}\n rightAddon={\n <div ref={chevronRef}>\n <ChevronDown className=\"dropdown-pill-chevron-down\" data-testid=\"dropdown-pill-button\" />\n </div>\n }\n tabIndex={tabIndex}\n variant={variant}\n />\n }\n />\n );\n};\n\nconst props = {\n /** props injected to component wrapper */\n containerProps: PropTypes.object.description('props injected to component wrapper'),\n /** labeled pill text label */\n label: PropTypes.string.isRequired.description('pill text label'),\n /** pill variant */\n variant: PropTypes.oneOf(['value', 'title']).description('pill variant'),\n /** html focus border */\n tabIndex: PropTypes.number.description('html focus order'),\n /** close menu on item selection */\n closeMenuOnItemSelection: PropTypes.bool.description('close menu on item selection'),\n /** pill max width */\n maxWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description('pill max width'),\n /** pill min width */\n minWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description('pill min width'),\n};\n\nDropdownPill.propTypes = props;\nDropdownPill.displayName = 'DropdownPill';\nconst DSDropdownPillWithSchema = describe(DropdownPill);\nDSDropdownPillWithSchema.propTypes = props;\n\nexport { DropdownPill, DSDropdownPillWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADuCT;AAvCd,mBAAwC;AACxC,0BAAoC;AACpC,6BAA+B;AAC/B,sBAA4B;AAC5B,uBAAkC;AAClC,kBAAqB;AAErB,MAAM,eAAe,CAAC;AAAA,EACpB,iBAAiB,CAAC;AAAA,EAClB,QAAQ;AAAA,EACR;AAAA,EACA,WAAW;AAAA,EACX,2BAA2B;AAAA,EAC3B;AAAA,EACA;AAAA,KACG;AACL,MAAM;AACJ,QAAM,UAAM,qBAAO,IAAI;AACvB,QAAM,CAAC,WAAW,UAAU,QAAI,uBAAS;AACzC,QAAM,EAAE,WAAW,QAAI,oCAAkB,GAAG;AAC5C,SACE,4CAAC;AAAA,IACE,GAAG;AAAA,IACJ;AAAA,IACA;AAAA,IACA,kBAAgB;AAAA,IAChB,WAAW,EAAE,WAAW,sBAAsB,QAAQ,IAAI;AAAA,IAC1D;AAAA,IACA,SAAS;AAAA,IACT,eAAe;AAAA,IACf,kBACE,4CAAC;AAAA,MACC,eAAY;AAAA,MACZ,WAAU;AAAA,MACV,gBAAgB,EAAE,MAAM,WAAW,GAAG,eAAe;AAAA,MACrD,UAAU;AAAA,MACV;AAAA,MACA,YACE,4CAAC;AAAA,QAAI,KAAK;AAAA,QACR,sDAAC;AAAA,UAAY,WAAU;AAAA,UAA6B,eAAY;AAAA,SAAuB;AAAA,OACzF;AAAA,MAEF;AAAA,MACA;AAAA,KACF;AAAA,GAEJ;AAEJ;AAEA,MAAM,QAAQ;AAAA,EAEZ,gBAAgB,8BAAU,OAAO,YAAY,qCAAqC;AAAA,EAElF,OAAO,8BAAU,OAAO,WAAW,YAAY,iBAAiB;AAAA,EAEhE,SAAS,8BAAU,MAAM,CAAC,SAAS,OAAO,CAAC,EAAE,YAAY,cAAc;AAAA,EAEvE,UAAU,8BAAU,OAAO,YAAY,kBAAkB;AAAA,EAEzD,0BAA0B,8BAAU,KAAK,YAAY,8BAA8B;AAAA,EAEnF,UAAU,8BAAU,UAAU,CAAC,8BAAU,QAAQ,8BAAU,MAAM,CAAC,EAAE,YAAY,gBAAgB;AAAA,EAEhG,UAAU,8BAAU,UAAU,CAAC,8BAAU,QAAQ,8BAAU,MAAM,CAAC,EAAE,YAAY,gBAAgB;AAClG;AAEA,aAAa,YAAY;AACzB,aAAa,cAAc;AAC3B,MAAM,+BAA2B,8BAAS,YAAY;AACtD,yBAAyB,YAAY;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -36,7 +36,7 @@ var import_Pill = require("./Pill");
|
|
|
36
36
|
const StyledInputPill = (0, import_ds_classnames.aggregatedClasses)(import_Pill.Pill)("input-pill", null, ({ value }) => ({
|
|
37
37
|
value
|
|
38
38
|
}));
|
|
39
|
-
|
|
39
|
+
const InputPill = ({
|
|
40
40
|
containerProps = {},
|
|
41
41
|
placeholder = "Enter Value",
|
|
42
42
|
onChange = () => {
|
|
@@ -45,7 +45,7 @@ function InputPill({
|
|
|
45
45
|
value,
|
|
46
46
|
type,
|
|
47
47
|
...otherProps
|
|
48
|
-
}) {
|
|
48
|
+
}) => {
|
|
49
49
|
let TypeOfInput = import_ds_form.DSInput;
|
|
50
50
|
switch (type) {
|
|
51
51
|
case "inputText":
|
|
@@ -75,5 +75,5 @@ function InputPill({
|
|
|
75
75
|
}),
|
|
76
76
|
tabIndex: -1
|
|
77
77
|
});
|
|
78
|
-
}
|
|
78
|
+
};
|
|
79
79
|
//# sourceMappingURL=InputPill.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/deprecated/InputPill.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React from 'react';\nimport { CloseXsmall } from '@elliemae/ds-icons';\nimport { aggregatedClasses } from '@elliemae/ds-classnames';\nimport { DSInput, DSInputMask } from '@elliemae/ds-form';\nimport { Pill } from './Pill';\n\nconst StyledInputPill = aggregatedClasses(Pill)('input-pill', null, ({ value }) => ({\n value,\n}));\n\nexport
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADuCf;AAtCR,sBAA4B;AAC5B,2BAAkC;AAClC,qBAAqC;AACrC,kBAAqB;AAErB,MAAM,sBAAkB,wCAAkB,gBAAI,EAAE,cAAc,MAAM,CAAC,EAAE,MAAM,OAAO;AAAA,EAClF;AACF,EAAE;AAEK,
|
|
4
|
+
"sourcesContent": ["import React from 'react';\nimport { CloseXsmall } from '@elliemae/ds-icons';\nimport { aggregatedClasses } from '@elliemae/ds-classnames';\nimport { DSInput, DSInputMask } from '@elliemae/ds-form';\nimport { Pill } from './Pill';\n\nconst StyledInputPill = aggregatedClasses(Pill)('input-pill', null, ({ value }) => ({\n value,\n}));\n\nexport const InputPill = ({\n containerProps = {},\n placeholder = 'Enter Value',\n onChange = () => {},\n onRemove,\n value,\n type,\n ...otherProps\n}) => {\n let TypeOfInput = DSInput;\n // TODO: implement the DSTimeInput, see how because it returns a moment()\n // TODO: implement the DSDateInput\n switch (type) {\n case 'inputText':\n TypeOfInput = DSInput;\n break;\n case 'inputMask':\n TypeOfInput = DSInputMask;\n break;\n default:\n break;\n }\n\n return (\n <StyledInputPill\n className=\"input-pill\"\n classProps={{ value }}\n containerProps={containerProps}\n label={\n <TypeOfInput\n data-testid=\"input-pill\"\n onChange={onChange}\n placeholder={placeholder}\n value={value}\n {...otherProps}\n />\n }\n rightAddon={\n value && <CloseXsmall className=\"remove-pill-button\" data-testid=\"remove-pill-button\" onClick={onRemove} />\n }\n tabIndex={-1}\n />\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADuCf;AAtCR,sBAA4B;AAC5B,2BAAkC;AAClC,qBAAqC;AACrC,kBAAqB;AAErB,MAAM,sBAAkB,wCAAkB,gBAAI,EAAE,cAAc,MAAM,CAAC,EAAE,MAAM,OAAO;AAAA,EAClF;AACF,EAAE;AAEK,MAAM,YAAY,CAAC;AAAA,EACxB,iBAAiB,CAAC;AAAA,EAClB,cAAc;AAAA,EACd,WAAW,MAAM;AAAA,EAAC;AAAA,EAClB;AAAA,EACA;AAAA,EACA;AAAA,KACG;AACL,MAAM;AACJ,MAAI,cAAc;AAGlB,UAAQ,MAAM;AAAA,IACZ,KAAK;AACH,oBAAc;AACd;AAAA,IACF,KAAK;AACH,oBAAc;AACd;AAAA,IACF;AACE;AAAA,EACJ;AAEA,SACE,4CAAC;AAAA,IACC,WAAU;AAAA,IACV,YAAY,EAAE,MAAM;AAAA,IACpB;AAAA,IACA,OACE,4CAAC;AAAA,MACC,eAAY;AAAA,MACZ;AAAA,MACA;AAAA,MACA;AAAA,MACC,GAAG;AAAA,KACN;AAAA,IAEF,YACE,SAAS,4CAAC;AAAA,MAAY,WAAU;AAAA,MAAqB,eAAY;AAAA,MAAqB,SAAS;AAAA,KAAU;AAAA,IAE3G,UAAU;AAAA,GACZ;AAEJ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -41,7 +41,7 @@ const DropdownPills = {
|
|
|
41
41
|
cascaded: import_LabeledDropdownCascadeMenuPill.LabeledDropdownCascadeMenuPill
|
|
42
42
|
};
|
|
43
43
|
const createDropdownPill = (type) => DropdownPills[type] || DropdownPills.single;
|
|
44
|
-
|
|
44
|
+
const LabeledDropdownPills = ({
|
|
45
45
|
label = "",
|
|
46
46
|
value,
|
|
47
47
|
type,
|
|
@@ -52,7 +52,7 @@ function LabeledDropdownPills({
|
|
|
52
52
|
minWidth,
|
|
53
53
|
fixed,
|
|
54
54
|
...menuProps
|
|
55
|
-
}) {
|
|
55
|
+
}) => {
|
|
56
56
|
const Component = createDropdownPill(type);
|
|
57
57
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_PillGroup.PillGroup, {
|
|
58
58
|
onFocusGroupSet,
|
|
@@ -67,22 +67,14 @@ function LabeledDropdownPills({
|
|
|
67
67
|
fixed
|
|
68
68
|
})
|
|
69
69
|
});
|
|
70
|
-
}
|
|
70
|
+
};
|
|
71
71
|
const props = {
|
|
72
|
-
type: import_ds_utilities.PropTypes.oneOf(["single", "multi", "cascaded"]).description(
|
|
73
|
-
"pill type"
|
|
74
|
-
),
|
|
72
|
+
type: import_ds_utilities.PropTypes.oneOf(["single", "multi", "cascaded"]).description("pill type"),
|
|
75
73
|
onFocusNextGroup: import_ds_utilities.PropTypes.func.description("focus next group callback"),
|
|
76
74
|
onFocusPreviousGroup: import_ds_utilities.PropTypes.func.description("focus prev group callback"),
|
|
77
75
|
onFocusGroupSet: import_ds_utilities.PropTypes.func.description("focus group set callback"),
|
|
78
|
-
maxWidth: import_ds_utilities.PropTypes.oneOfType([
|
|
79
|
-
|
|
80
|
-
import_ds_utilities.PropTypes.number
|
|
81
|
-
]).description("pill max width"),
|
|
82
|
-
minWidth: import_ds_utilities.PropTypes.oneOfType([
|
|
83
|
-
import_ds_utilities.PropTypes.string,
|
|
84
|
-
import_ds_utilities.PropTypes.number
|
|
85
|
-
]).description("pill min width"),
|
|
76
|
+
maxWidth: import_ds_utilities.PropTypes.oneOfType([import_ds_utilities.PropTypes.string, import_ds_utilities.PropTypes.number]).description("pill max width"),
|
|
77
|
+
minWidth: import_ds_utilities.PropTypes.oneOfType([import_ds_utilities.PropTypes.string, import_ds_utilities.PropTypes.number]).description("pill min width"),
|
|
86
78
|
fixed: import_ds_utilities.PropTypes.bool.description("fixed pill"),
|
|
87
79
|
label: import_ds_utilities.PropTypes.string.isRequired.description("pill label text"),
|
|
88
80
|
value: import_ds_utilities.PropTypes.oneOfType([
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/deprecated/LabeledDropdownPills.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable max-lines */\nimport React from 'react';\nimport { PropTypes, describe } from '@elliemae/ds-utilities';\nimport { PillGroup } from './PillGroup';\nimport { LabeledDropdownSinglePill } from './LabeledDropdownPillsTypes/LabeledDropdownSinglePill';\nimport { LabeledDropdownMultiPills } from './LabeledDropdownPillsTypes/LabeledDropdownMultiPill';\nimport { LabeledDropdownCascadeMenuPill } from './LabeledDropdownPillsTypes/LabeledDropdownCascadeMenuPill';\n\nconst DropdownPills = {\n single: LabeledDropdownSinglePill,\n multi: LabeledDropdownMultiPills,\n cascaded: LabeledDropdownCascadeMenuPill,\n};\n\nconst createDropdownPill = (type)
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["/* eslint-disable max-lines */\nimport React from 'react';\nimport { PropTypes, describe } from '@elliemae/ds-utilities';\nimport { PillGroup } from './PillGroup';\nimport { LabeledDropdownSinglePill } from './LabeledDropdownPillsTypes/LabeledDropdownSinglePill';\nimport { LabeledDropdownMultiPills } from './LabeledDropdownPillsTypes/LabeledDropdownMultiPill';\nimport { LabeledDropdownCascadeMenuPill } from './LabeledDropdownPillsTypes/LabeledDropdownCascadeMenuPill';\n\nconst DropdownPills = {\n single: LabeledDropdownSinglePill,\n multi: LabeledDropdownMultiPills,\n cascaded: LabeledDropdownCascadeMenuPill,\n};\n\nconst createDropdownPill = (type) => DropdownPills[type] || DropdownPills.single;\n\nconst LabeledDropdownPills = ({\n label = '',\n value,\n type,\n onFocusNextGroup,\n onFocusPreviousGroup,\n onFocusGroupSet,\n maxWidth,\n minWidth,\n fixed,\n ...menuProps\n}) => {\n const Component = createDropdownPill(type);\n\n return (\n <PillGroup\n onFocusGroupSet={onFocusGroupSet}\n onFocusNextGroup={onFocusNextGroup}\n onFocusPreviousGroup={onFocusPreviousGroup}\n >\n <Component {...menuProps} label={label} maxWidth={maxWidth} minWidth={minWidth} value={value} fixed={fixed} />\n </PillGroup>\n );\n};\n\nconst props = {\n /** pill type */\n type: PropTypes.oneOf(['single', 'multi', 'cascaded']).description('pill type'),\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 max width */\n maxWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description('pill max width'),\n /** pill min width */\n minWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description('pill min width'),\n /** fixed pill */\n fixed: PropTypes.bool.description('fixed pill'),\n /** pill label text */\n label: PropTypes.string.isRequired.description('pill label text'),\n /** pill value */\n value: PropTypes.oneOfType([\n PropTypes.arrayOf(\n PropTypes.shape({\n id: PropTypes.string,\n label: PropTypes.string,\n }),\n ),\n PropTypes.shape({\n id: PropTypes.string,\n label: PropTypes.string,\n }),\n ]).description('pill value'),\n};\n\nLabeledDropdownPills.propTypes = props;\nLabeledDropdownPills.displayName = 'LabeledDropdownPills';\nconst DSLabeledDropdownPillsWithSchema = describe(LabeledDropdownPills);\nDSLabeledDropdownPillsWithSchema.propTypes = props;\n\nexport { LabeledDropdownPills, DSLabeledDropdownPillsWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADoCjB;AAlCN,0BAAoC;AACpC,uBAA0B;AAC1B,uCAA0C;AAC1C,sCAA0C;AAC1C,4CAA+C;AAE/C,MAAM,gBAAgB;AAAA,EACpB,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,UAAU;AACZ;AAEA,MAAM,qBAAqB,CAAC,SAAS,cAAc,SAAS,cAAc;AAE1E,MAAM,uBAAuB,CAAC;AAAA,EAC5B,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,KACG;AACL,MAAM;AACJ,QAAM,YAAY,mBAAmB,IAAI;AAEzC,SACE,4CAAC;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,IAEA,sDAAC;AAAA,MAAW,GAAG;AAAA,MAAW;AAAA,MAAc;AAAA,MAAoB;AAAA,MAAoB;AAAA,MAAc;AAAA,KAAc;AAAA,GAC9G;AAEJ;AAEA,MAAM,QAAQ;AAAA,EAEZ,MAAM,8BAAU,MAAM,CAAC,UAAU,SAAS,UAAU,CAAC,EAAE,YAAY,WAAW;AAAA,EAE9E,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,MAAM,CAAC,EAAE,YAAY,gBAAgB;AAAA,EAEhG,UAAU,8BAAU,UAAU,CAAC,8BAAU,QAAQ,8BAAU,MAAM,CAAC,EAAE,YAAY,gBAAgB;AAAA,EAEhG,OAAO,8BAAU,KAAK,YAAY,YAAY;AAAA,EAE9C,OAAO,8BAAU,OAAO,WAAW,YAAY,iBAAiB;AAAA,EAEhE,OAAO,8BAAU,UAAU;AAAA,IACzB,8BAAU;AAAA,MACR,8BAAU,MAAM;AAAA,QACd,IAAI,8BAAU;AAAA,QACd,OAAO,8BAAU;AAAA,MACnB,CAAC;AAAA,IACH;AAAA,IACA,8BAAU,MAAM;AAAA,MACd,IAAI,8BAAU;AAAA,MACd,OAAO,8BAAU;AAAA,IACnB,CAAC;AAAA,EACH,CAAC,EAAE,YAAY,YAAY;AAC7B;AAEA,qBAAqB,YAAY;AACjC,qBAAqB,cAAc;AACnC,MAAM,uCAAmC,8BAAS,oBAAoB;AACtE,iCAAiC,YAAY;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -65,7 +65,7 @@ const getSubmenuOptionLabelById = (options, id) => {
|
|
|
65
65
|
const index = options.findIndex((option) => option.id === id);
|
|
66
66
|
return index ? options[index].label : "";
|
|
67
67
|
};
|
|
68
|
-
|
|
68
|
+
const LabeledDropdownCascadeMenuPill = ({
|
|
69
69
|
label,
|
|
70
70
|
options,
|
|
71
71
|
value: optionValue,
|
|
@@ -79,7 +79,7 @@ function LabeledDropdownCascadeMenuPill({
|
|
|
79
79
|
maxWidth,
|
|
80
80
|
minWidth,
|
|
81
81
|
...menuProps
|
|
82
|
-
}) {
|
|
82
|
+
}) => {
|
|
83
83
|
const selectionId = Object.keys(selection)[0];
|
|
84
84
|
const selectionValues = selection[selectionId] || "";
|
|
85
85
|
const dropdownLabel = Array.isArray(selectionValues) ? getSubmenuOptionLabelById(options, selectionId) : selectionValues;
|
|
@@ -127,6 +127,6 @@ function LabeledDropdownCascadeMenuPill({
|
|
|
127
127
|
}, option.id))
|
|
128
128
|
]
|
|
129
129
|
});
|
|
130
|
-
}
|
|
130
|
+
};
|
|
131
131
|
var LabeledDropdownCascadeMenuPill_default = LabeledDropdownCascadeMenuPill;
|
|
132
132
|
//# sourceMappingURL=LabeledDropdownCascadeMenuPill.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/deprecated/LabeledDropdownPillsTypes/LabeledDropdownCascadeMenuPill.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React from 'react';\nimport { isFunction, addOrRemove } from '@elliemae/ds-utilities';\nimport { PillGroup } from '../PillGroup';\nimport { RemovablePill } from '../RemovablePill';\nimport { DropdownPill } from '../DropdownPill';\n\nfunction renderMenuItems(options, factory) {\n return options.map((option, index) => {\n const ItemComponent = factory('radio');\n\n if (option.type === 'submenu') {\n const SubmenuComponent = factory('submenu');\n const ChildComponent = factory('selection-group');\n return (\n <SubmenuComponent {...option} key={option.id} item={option}>\n <ChildComponent\n {...option}\n id={option.id}\n item={option}\n items={option.items}\n itemValueAccessor={(item) => item}\n multi\n />\n </SubmenuComponent>\n );\n }\n\n return <ItemComponent {...option} key={option.id || index} item={option} />;\n });\n}\n\nconst getSubmenuOptionLabelById = (options, id) => {\n const index = options.findIndex((option) => option.id === id);\n return index ? options[index].label : '';\n};\n\
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADeb;AADF;AAbR,0BAAwC;AACxC,uBAA0B;AAC1B,2BAA8B;AAC9B,0BAA6B;AAE7B,SAAS,gBAAgB,SAAS,SAAS;AACzC,SAAO,QAAQ,IAAI,CAAC,QAAQ,UAAU;AACpC,UAAM,gBAAgB,QAAQ,OAAO;AAErC,QAAI,OAAO,SAAS,WAAW;AAC7B,YAAM,mBAAmB,QAAQ,SAAS;AAC1C,YAAM,iBAAiB,QAAQ,iBAAiB;AAChD,aACE,gDAAC;AAAA,QAAkB,GAAG;AAAA,QAAQ,KAAK,OAAO;AAAA,QAAI,MAAM;AAAA,SAClD,4CAAC;AAAA,QACE,GAAG;AAAA,QACJ,IAAI,OAAO;AAAA,QACX,MAAM;AAAA,QACN,OAAO,OAAO;AAAA,QACd,mBAAmB,CAAC,SAAS;AAAA,QAC7B,OAAK;AAAA,OACP,CACF;AAAA,IAEJ;AAEA,WAAO,gDAAC;AAAA,MAAe,GAAG;AAAA,MAAQ,KAAK,OAAO,MAAM;AAAA,MAAO,MAAM;AAAA,KAAQ;AAAA,EAC3E,CAAC;AACH;AAEA,MAAM,4BAA4B,CAAC,SAAS,OAAO;AACjD,QAAM,QAAQ,QAAQ,UAAU,CAAC,WAAW,OAAO,OAAO,EAAE;AAC5D,SAAO,QAAQ,QAAQ,OAAO,QAAQ;AACxC;AAEA,
|
|
4
|
+
"sourcesContent": ["import React from 'react';\nimport { isFunction, addOrRemove } from '@elliemae/ds-utilities';\nimport { PillGroup } from '../PillGroup';\nimport { RemovablePill } from '../RemovablePill';\nimport { DropdownPill } from '../DropdownPill';\n\nfunction renderMenuItems(options, factory) {\n return options.map((option, index) => {\n const ItemComponent = factory('radio');\n\n if (option.type === 'submenu') {\n const SubmenuComponent = factory('submenu');\n const ChildComponent = factory('selection-group');\n return (\n <SubmenuComponent {...option} key={option.id} item={option}>\n <ChildComponent\n {...option}\n id={option.id}\n item={option}\n items={option.items}\n itemValueAccessor={(item) => item}\n multi\n />\n </SubmenuComponent>\n );\n }\n\n return <ItemComponent {...option} key={option.id || index} item={option} />;\n });\n}\n\nconst getSubmenuOptionLabelById = (options, id) => {\n const index = options.findIndex((option) => option.id === id);\n return index ? options[index].label : '';\n};\n\nconst LabeledDropdownCascadeMenuPill = ({\n label,\n options,\n value: optionValue,\n onChange,\n onRemove,\n value: selection = {},\n placeholder = '---',\n onFocusNextGroup,\n onFocusPreviousGroup,\n onFocusGroupSet,\n maxWidth,\n minWidth,\n ...menuProps\n}) => {\n const selectionId = Object.keys(selection)[0];\n const selectionValues = selection[selectionId] || '';\n const dropdownLabel = Array.isArray(selectionValues)\n ? getSubmenuOptionLabelById(options, selectionId)\n : selectionValues;\n\n const handleSelectChange = ({ item, group }) => {\n if (isFunction(onChange)) {\n const nextSelection = group\n ? {\n [group.id]: addOrRemove([...(selection[group.id] || [])], item, (o) => o.id),\n }\n : {\n [item.id]: item.label,\n };\n onChange(nextSelection);\n }\n };\n\n const removeOption = (option) => {\n if (isFunction(onChange)) {\n const nextSelection = {\n [selectionId]: selectionValues.filter((val) => option.id !== val.id),\n };\n onChange(nextSelection);\n }\n onRemove(option);\n };\n\n return (\n <PillGroup\n onFocusGroupSet={onFocusGroupSet}\n onFocusNextGroup={onFocusNextGroup}\n onFocusPreviousGroup={onFocusPreviousGroup}\n >\n <DropdownPill\n {...menuProps}\n itemsRenderer={renderMenuItems}\n label={dropdownLabel || placeholder}\n maxWidth={maxWidth}\n minWidth={minWidth}\n onSelectChange={handleSelectChange}\n options={options}\n selection={{\n [selectionId]: Array.isArray(selectionValues) ? selectionValues.map((v) => v.id) : selectionValues,\n }}\n singleGroupSelection\n variant=\"title\"\n />\n {Array.isArray(selectionValues) &&\n selectionValues.map((option) => (\n <RemovablePill key={option.id} label={option.label} onRemove={() => removeOption(option)} />\n ))}\n </PillGroup>\n );\n};\n\nexport { LabeledDropdownCascadeMenuPill };\nexport default LabeledDropdownCascadeMenuPill;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -37,7 +37,7 @@ var import_RemovablePill = require("../RemovablePill");
|
|
|
37
37
|
var import_Pill = require("../Pill");
|
|
38
38
|
var import_OverflowPill = require("../OverflowPill");
|
|
39
39
|
var import_DropdownPill = require("../DropdownPill");
|
|
40
|
-
|
|
40
|
+
const LabeledDropdownMultiPills = ({
|
|
41
41
|
label,
|
|
42
42
|
options = [],
|
|
43
43
|
value = [],
|
|
@@ -47,7 +47,7 @@ function LabeledDropdownMultiPills({
|
|
|
47
47
|
maxWidth,
|
|
48
48
|
minWidth,
|
|
49
49
|
...menuProps
|
|
50
|
-
}) {
|
|
50
|
+
}) => {
|
|
51
51
|
const [totalDefaultOptions, setTotalDefaultOptions] = (0, import_react.useState)(0);
|
|
52
52
|
const [selectedOptions, setSelectedOptions] = (0, import_react.useState)(value);
|
|
53
53
|
const [allOptions, setAllOptions] = (0, import_react.useState)(options);
|
|
@@ -149,6 +149,6 @@ function LabeledDropdownMultiPills({
|
|
|
149
149
|
})
|
|
150
150
|
]
|
|
151
151
|
});
|
|
152
|
-
}
|
|
152
|
+
};
|
|
153
153
|
var LabeledDropdownMultiPill_default = LabeledDropdownMultiPills;
|
|
154
154
|
//# sourceMappingURL=LabeledDropdownMultiPill.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/deprecated/LabeledDropdownPillsTypes/LabeledDropdownMultiPill.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React, { useState, useEffect, useCallback } from 'react';\nimport { find } from 'lodash';\nimport { isFunction, addOrRemove } from '@elliemae/ds-utilities';\nimport { RemovablePill } from '../RemovablePill';\nimport { Pill } from '../Pill';\nimport { OverflowPill } from '../OverflowPill';\nimport { DropdownPill } from '../DropdownPill';\n\
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD6FnB;AA7FJ,mBAAwD;AACxD,oBAAqB;AACrB,0BAAwC;AACxC,2BAA8B;AAC9B,kBAAqB;AACrB,0BAA6B;AAC7B,0BAA6B;AAE7B,
|
|
4
|
+
"sourcesContent": ["import React, { useState, useEffect, useCallback } from 'react';\nimport { find } from 'lodash';\nimport { isFunction, addOrRemove } from '@elliemae/ds-utilities';\nimport { RemovablePill } from '../RemovablePill';\nimport { Pill } from '../Pill';\nimport { OverflowPill } from '../OverflowPill';\nimport { DropdownPill } from '../DropdownPill';\n\nconst LabeledDropdownMultiPills = ({\n label,\n options = [],\n value = [],\n onSelect = () => null,\n onRemove = () => null,\n onChange, // if this is defined, then it's calculating the next result onSelect or onRemove\n maxWidth,\n minWidth,\n ...menuProps\n}) => {\n const [totalDefaultOptions, setTotalDefaultOptions] = useState(0);\n const [selectedOptions, setSelectedOptions] = useState(value);\n const [allOptions, setAllOptions] = useState(options);\n const [overflowOptions, setOverflowOptions] = useState([]);\n\n const overflowQuantity = 3;\n\n useEffect(() => setSelectedOptions(value), [value]);\n\n useEffect(() => {\n const newOptions = allOptions.filter((option) => option.fixedItem);\n if (newOptions.length > 0) {\n setSelectedOptions(newOptions);\n }\n setTotalDefaultOptions(newOptions.length);\n }, []);\n\n useEffect(() => {\n if (totalDefaultOptions) {\n const newOptions = allOptions.map((opt) => {\n if (selectedOptions.length <= totalDefaultOptions && find(selectedOptions, { id: opt.id })) {\n return { ...opt, fixedItem: true };\n }\n return { ...opt, fixedItem: false };\n });\n\n setAllOptions(newOptions);\n }\n }, [onSelect, onRemove, selectedOptions]);\n\n useEffect(() => {\n if (selectedOptions.length > overflowQuantity) {\n const overflow = selectedOptions.filter((val, index) => index >= overflowQuantity);\n setOverflowOptions(overflow);\n }\n }, [selectedOptions]);\n\n const selectOption = useCallback(\n (option) => {\n if (!option.fixedItem) {\n if (isFunction(onChange)) {\n const nextValue = addOrRemove(selectedOptions, option, (item) => item.id);\n setSelectedOptions(nextValue);\n onChange(nextValue);\n }\n onSelect(option);\n }\n },\n [selectedOptions],\n );\n\n const removeOption = useCallback(\n (option) => {\n if (!option.fixedItem || selectedOptions.length > totalDefaultOptions) {\n if (isFunction(onChange)) {\n const nextValue = selectedOptions.filter((val) => option.id !== val.id);\n setSelectedOptions(nextValue);\n onChange(nextValue);\n }\n onRemove(option);\n }\n },\n [selectedOptions],\n );\n\n const typeOfPill = () => {\n if (selectedOptions.length > totalDefaultOptions) {\n return RemovablePill;\n }\n\n return Pill;\n };\n\n return (\n <>\n <DropdownPill\n {...menuProps}\n focusOnOpen={false}\n label={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: true,\n items: allOptions,\n },\n ]}\n selection={{\n 'multi-selection-views': selectedOptions ? selectedOptions.map((o) => o.id) : '',\n }}\n variant=\"title\"\n />\n {selectedOptions &&\n selectedOptions.map((option, index) => {\n const TypeOfPill = typeOfPill();\n if (index < overflowQuantity) {\n return <TypeOfPill key={option.id} label={option.label} onRemove={() => removeOption(option)} />;\n }\n return null;\n })}\n {selectedOptions && selectedOptions.length > overflowQuantity && (\n <OverflowPill label={`+ ${selectedOptions.length - overflowQuantity}`} options={overflowOptions} />\n )}\n </>\n );\n};\n\nexport { LabeledDropdownMultiPills };\nexport default LabeledDropdownMultiPills;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD6FnB;AA7FJ,mBAAwD;AACxD,oBAAqB;AACrB,0BAAwC;AACxC,2BAA8B;AAC9B,kBAAqB;AACrB,0BAA6B;AAC7B,0BAA6B;AAE7B,MAAM,4BAA4B,CAAC;AAAA,EACjC;AAAA,EACA,UAAU,CAAC;AAAA,EACX,QAAQ,CAAC;AAAA,EACT,WAAW,MAAM;AAAA,EACjB,WAAW,MAAM;AAAA,EACjB;AAAA,EACA;AAAA,EACA;AAAA,KACG;AACL,MAAM;AACJ,QAAM,CAAC,qBAAqB,sBAAsB,QAAI,uBAAS,CAAC;AAChE,QAAM,CAAC,iBAAiB,kBAAkB,QAAI,uBAAS,KAAK;AAC5D,QAAM,CAAC,YAAY,aAAa,QAAI,uBAAS,OAAO;AACpD,QAAM,CAAC,iBAAiB,kBAAkB,QAAI,uBAAS,CAAC,CAAC;AAEzD,QAAM,mBAAmB;AAEzB,8BAAU,MAAM,mBAAmB,KAAK,GAAG,CAAC,KAAK,CAAC;AAElD,8BAAU,MAAM;AACd,UAAM,aAAa,WAAW,OAAO,CAAC,WAAW,OAAO,SAAS;AACjE,QAAI,WAAW,SAAS,GAAG;AACzB,yBAAmB,UAAU;AAAA,IAC/B;AACA,2BAAuB,WAAW,MAAM;AAAA,EAC1C,GAAG,CAAC,CAAC;AAEL,8BAAU,MAAM;AACd,QAAI,qBAAqB;AACvB,YAAM,aAAa,WAAW,IAAI,CAAC,QAAQ;AACzC,YAAI,gBAAgB,UAAU,2BAAuB,oBAAK,iBAAiB,EAAE,IAAI,IAAI,GAAG,CAAC,GAAG;AAC1F,iBAAO,EAAE,GAAG,KAAK,WAAW,KAAK;AAAA,QACnC;AACA,eAAO,EAAE,GAAG,KAAK,WAAW,MAAM;AAAA,MACpC,CAAC;AAED,oBAAc,UAAU;AAAA,IAC1B;AAAA,EACF,GAAG,CAAC,UAAU,UAAU,eAAe,CAAC;AAExC,8BAAU,MAAM;AACd,QAAI,gBAAgB,SAAS,kBAAkB;AAC7C,YAAM,WAAW,gBAAgB,OAAO,CAAC,KAAK,UAAU,SAAS,gBAAgB;AACjF,yBAAmB,QAAQ;AAAA,IAC7B;AAAA,EACF,GAAG,CAAC,eAAe,CAAC;AAEpB,QAAM,mBAAe;AAAA,IACnB,CAAC,WAAW;AACV,UAAI,CAAC,OAAO,WAAW;AACrB,gBAAI,gCAAW,QAAQ,GAAG;AACxB,gBAAM,gBAAY,iCAAY,iBAAiB,QAAQ,CAAC,SAAS,KAAK,EAAE;AACxE,6BAAmB,SAAS;AAC5B,mBAAS,SAAS;AAAA,QACpB;AACA,iBAAS,MAAM;AAAA,MACjB;AAAA,IACF;AAAA,IACA,CAAC,eAAe;AAAA,EAClB;AAEA,QAAM,mBAAe;AAAA,IACnB,CAAC,WAAW;AACV,UAAI,CAAC,OAAO,aAAa,gBAAgB,SAAS,qBAAqB;AACrE,gBAAI,gCAAW,QAAQ,GAAG;AACxB,gBAAM,YAAY,gBAAgB,OAAO,CAAC,QAAQ,OAAO,OAAO,IAAI,EAAE;AACtE,6BAAmB,SAAS;AAC5B,mBAAS,SAAS;AAAA,QACpB;AACA,iBAAS,MAAM;AAAA,MACjB;AAAA,IACF;AAAA,IACA,CAAC,eAAe;AAAA,EAClB;AAEA,QAAM,aAAa,MAAM;AACvB,QAAI,gBAAgB,SAAS,qBAAqB;AAChD,aAAO;AAAA,IACT;AAEA,WAAO;AAAA,EACT;AAEA,SACE;AAAA,IACE;AAAA,kDAAC;AAAA,QACE,GAAG;AAAA,QACJ,aAAa;AAAA,QACb;AAAA,QACA;AAAA,QACA;AAAA,QACA,kBAAkB;AAAA,QAClB,SAAS;AAAA,UACP;AAAA,YACE,GAAG;AAAA,YACH,MAAM;AAAA,YACN,IAAI;AAAA,YACJ,OAAO;AAAA,YACP,OAAO;AAAA,UACT;AAAA,QACF;AAAA,QACA,WAAW;AAAA,UACT,yBAAyB,kBAAkB,gBAAgB,IAAI,CAAC,MAAM,EAAE,EAAE,IAAI;AAAA,QAChF;AAAA,QACA,SAAQ;AAAA,OACV;AAAA,MACC,mBACC,gBAAgB,IAAI,CAAC,QAAQ,UAAU;AACrC,cAAM,aAAa,WAAW;AAC9B,YAAI,QAAQ,kBAAkB;AAC5B,iBAAO,4CAAC;AAAA,YAA2B,OAAO,OAAO;AAAA,YAAO,UAAU,MAAM,aAAa,MAAM;AAAA,aAAnE,OAAO,EAA+D;AAAA,QAChG;AACA,eAAO;AAAA,MACT,CAAC;AAAA,MACF,mBAAmB,gBAAgB,SAAS,oBAC3C,4CAAC;AAAA,QAAa,OAAO,KAAK,gBAAgB,SAAS;AAAA,QAAoB,SAAS;AAAA,OAAiB;AAAA;AAAA,GAErG;AAEJ;AAGA,IAAO,mCAAQ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -38,7 +38,7 @@ var import_InputPill = require("../InputPill");
|
|
|
38
38
|
var import_Pill = require("../Pill");
|
|
39
39
|
var import_RemovablePill = require("../RemovablePill");
|
|
40
40
|
var import_utils = require("./utils");
|
|
41
|
-
|
|
41
|
+
const LabeledDropdownSinglePill = ({
|
|
42
42
|
label,
|
|
43
43
|
labelIsValue = false,
|
|
44
44
|
options,
|
|
@@ -49,7 +49,7 @@ function LabeledDropdownSinglePill({
|
|
|
49
49
|
minWidth,
|
|
50
50
|
fixed = false,
|
|
51
51
|
...menuProps
|
|
52
|
-
}) {
|
|
52
|
+
}) => {
|
|
53
53
|
const [optionValue, setOptionValue] = (0, import_react.useState)(value);
|
|
54
54
|
const prevOptions = (0, import_ds_utilities.usePrevious)(options);
|
|
55
55
|
const areOptionsEqual = (0, import_ds_utilities.useShouldRecalculate)((0, import_utils.hasOptionChanged)(prevOptions, options));
|
|
@@ -146,7 +146,7 @@ function LabeledDropdownSinglePill({
|
|
|
146
146
|
renderSelection()
|
|
147
147
|
]
|
|
148
148
|
});
|
|
149
|
-
}
|
|
149
|
+
};
|
|
150
150
|
LabeledDropdownSinglePill.propTypes = {
|
|
151
151
|
label: import_prop_types.default.string,
|
|
152
152
|
labelIsValue: import_prop_types.default.bool,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/deprecated/LabeledDropdownPillsTypes/LabeledDropdownSinglePill.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
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\
|
|
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,
|
|
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": "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",
|
|
6
6
|
"names": ["fixed", "PropTypes"]
|
|
7
7
|
}
|
|
@@ -34,37 +34,25 @@ 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
|
-
|
|
38
|
-
children,
|
|
39
|
-
label = "",
|
|
40
|
-
leftAddon,
|
|
37
|
+
const LabeledPills = ({ children, label = "", leftAddon, onFocusGroupSet, onFocusNextGroup, onFocusPreviousGroup }) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_PillGroup.PillGroup, {
|
|
41
38
|
onFocusGroupSet,
|
|
42
39
|
onFocusNextGroup,
|
|
43
|
-
onFocusPreviousGroup
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
"data-testid": "pill-title"
|
|
55
|
-
}),
|
|
56
|
-
children
|
|
57
|
-
]
|
|
58
|
-
});
|
|
59
|
-
}
|
|
40
|
+
onFocusPreviousGroup,
|
|
41
|
+
children: [
|
|
42
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Pill.Pill, {
|
|
43
|
+
label,
|
|
44
|
+
leftAddon,
|
|
45
|
+
variant: "title",
|
|
46
|
+
"data-testid": "pill-title"
|
|
47
|
+
}),
|
|
48
|
+
children
|
|
49
|
+
]
|
|
50
|
+
});
|
|
60
51
|
const props = {
|
|
61
52
|
label: import_ds_utilities.PropTypes.string.isRequired.description("pill text label"),
|
|
62
53
|
children: import_ds_utilities.PropTypes.arrayOf(
|
|
63
54
|
import_ds_utilities.PropTypes.shape({
|
|
64
|
-
type: import_ds_utilities.PropTypes.oneOf([
|
|
65
|
-
import_ds_utilities.PropTypes.instanceOf(import_Pill.Pill),
|
|
66
|
-
import_ds_utilities.PropTypes.instanceOf(import_RemovablePill.RemovablePill)
|
|
67
|
-
])
|
|
55
|
+
type: import_ds_utilities.PropTypes.oneOf([import_ds_utilities.PropTypes.instanceOf(import_Pill.Pill), import_ds_utilities.PropTypes.instanceOf(import_RemovablePill.RemovablePill)])
|
|
68
56
|
})
|
|
69
57
|
).isRequired.description("pill to add the label to"),
|
|
70
58
|
leftAddon: import_ds_utilities.PropTypes.node.description("addon component to left"),
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/deprecated/LabeledPills.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
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\
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
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,6CAAC;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,EAEA;AAAA,gDAAC;AAAA,MAAK;AAAA,MAAc;AAAA,MAAsB,SAAQ;AAAA,MAAQ,eAAY;AAAA,KAAa;AAAA,IAClF;AAAA;AAAA,CACH;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
|
}
|
|
@@ -35,7 +35,7 @@ var import_ds_utilities = require("@elliemae/ds-utilities");
|
|
|
35
35
|
var import_ds_shared = require("@elliemae/ds-shared");
|
|
36
36
|
var import_ds_tooltip = require("@elliemae/ds-tooltip");
|
|
37
37
|
var import_Pill = require("./Pill");
|
|
38
|
-
|
|
38
|
+
const OverflowPill = ({ containerProps = {}, label = "", options = [] }) => {
|
|
39
39
|
const ref = (0, import_react.useRef)(null);
|
|
40
40
|
const [tooltipIsOpen, setTooltipIsOpen] = (0, import_react.useState)(false);
|
|
41
41
|
const [tooltipText, setTooltipText] = (0, import_react.useState)("");
|
|
@@ -65,7 +65,7 @@ function OverflowPill({ containerProps = {}, label = "", options = [] }) {
|
|
|
65
65
|
onMouseLeave: () => setTooltipIsOpen(false)
|
|
66
66
|
})
|
|
67
67
|
});
|
|
68
|
-
}
|
|
68
|
+
};
|
|
69
69
|
const props = {
|
|
70
70
|
containerProps: import_ds_utilities.PropTypes.object.description("props to inject to pill wrapper"),
|
|
71
71
|
label: import_ds_utilities.PropTypes.string.isRequired.description("pill text label"),
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/deprecated/OverflowPill.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React, { useRef, useState, useEffect } from 'react';\nimport { PropTypes, describe } from '@elliemae/ds-utilities';\nimport { useFocusGroupItem } from '@elliemae/ds-shared';\nimport { DSTooltip } from '@elliemae/ds-tooltip';\nimport { Pill } from './Pill';\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,
|
|
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,4CAAC;AAAA,IACC,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,kBACE,4CAAC;AAAA,MACC,WAAU;AAAA,MACV;AAAA,MACA,UAAU;AAAA,MACV;AAAA,MACA,UAAU;AAAA,MACV,cAAc,MAAM,iBAAiB,IAAI;AAAA,MACzC,cAAc,MAAM,iBAAiB,KAAK;AAAA,KAC5C;AAAA,GAEJ;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
|
}
|
|
@@ -34,17 +34,13 @@ var import_jsx_runtime = require("react/jsx-runtime");
|
|
|
34
34
|
var import_ds_utilities = require("@elliemae/ds-utilities");
|
|
35
35
|
var import_ds_classnames = require("@elliemae/ds-classnames");
|
|
36
36
|
const pillBlockName = "pill";
|
|
37
|
-
const PillWrapper = (0, import_ds_classnames.aggregatedClasses)("div")(
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
[variant]: !!variant,
|
|
42
|
-
[size]: !!size
|
|
43
|
-
})
|
|
44
|
-
);
|
|
37
|
+
const PillWrapper = (0, import_ds_classnames.aggregatedClasses)("div")(pillBlockName, null, ({ size, variant }) => ({
|
|
38
|
+
[variant]: !!variant,
|
|
39
|
+
[size]: !!size
|
|
40
|
+
}));
|
|
45
41
|
const PillLabel = (0, import_ds_classnames.aggregatedClasses)("span")(pillBlockName, "label");
|
|
46
42
|
const PillAddon = (0, import_ds_classnames.aggregatedClasses)("div")(pillBlockName, "addon");
|
|
47
|
-
|
|
43
|
+
const Pill = ({
|
|
48
44
|
containerProps = {},
|
|
49
45
|
label = "",
|
|
50
46
|
leftAddon,
|
|
@@ -52,28 +48,24 @@ function Pill({
|
|
|
52
48
|
variant = "value",
|
|
53
49
|
size = "m",
|
|
54
50
|
...otherProps
|
|
55
|
-
}) {
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
leftAddon
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
rightAddon
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
});
|
|
72
|
-
}
|
|
51
|
+
}) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(PillWrapper, {
|
|
52
|
+
...containerProps,
|
|
53
|
+
classProps: { variant, size },
|
|
54
|
+
...otherProps,
|
|
55
|
+
children: [
|
|
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
|
+
});
|
|
73
67
|
const props = {
|
|
74
|
-
containerProps: import_ds_utilities.PropTypes.object.description(
|
|
75
|
-
"props to inject to pill wrapper"
|
|
76
|
-
),
|
|
68
|
+
containerProps: import_ds_utilities.PropTypes.object.description("props to inject to pill wrapper"),
|
|
77
69
|
label: import_ds_utilities.PropTypes.string.isRequired.description("pill text label"),
|
|
78
70
|
size: import_ds_utilities.PropTypes.oneOf(["m", "l"]).description("pill size"),
|
|
79
71
|
variant: import_ds_utilities.PropTypes.oneOf(["value", "title"]).description("pill variant"),
|