@elliemae/ds-pills 3.0.0-alpha.0 → 3.0.0-alpha.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/Pill.js +15 -3
- package/dist/cjs/components/Pill.js.map +1 -1
- package/dist/cjs/components/PillButton.js +32 -4
- package/dist/cjs/components/PillButton.js.map +1 -1
- package/dist/cjs/components/PillGroup.js +34 -6
- package/dist/cjs/components/PillGroup.js.map +2 -2
- package/dist/cjs/components/types/DropdownPill.js +21 -4
- package/dist/cjs/components/types/DropdownPill.js.map +1 -1
- package/dist/cjs/components/types/RemovablePill.js +17 -6
- package/dist/cjs/components/types/RemovablePill.js.map +2 -2
- package/dist/cjs/deprecated/DropdownPill.js +50 -14
- package/dist/cjs/deprecated/DropdownPill.js.map +1 -1
- package/dist/cjs/deprecated/InputPill.js +46 -14
- package/dist/cjs/deprecated/InputPill.js.map +1 -1
- package/dist/cjs/deprecated/LabeledDropdownPills.js +53 -15
- package/dist/cjs/deprecated/LabeledDropdownPills.js.map +1 -1
- package/dist/cjs/deprecated/LabeledDropdownPillsTypes/LabeledDropdownCascadeMenuPill.js +64 -26
- package/dist/cjs/deprecated/LabeledDropdownPillsTypes/LabeledDropdownCascadeMenuPill.js.map +1 -1
- package/dist/cjs/deprecated/LabeledDropdownPillsTypes/LabeledDropdownMultiPill.js +55 -19
- package/dist/cjs/deprecated/LabeledDropdownPillsTypes/LabeledDropdownMultiPill.js.map +1 -1
- package/dist/cjs/deprecated/LabeledDropdownPillsTypes/LabeledDropdownSinglePill.js +60 -24
- package/dist/cjs/deprecated/LabeledDropdownPillsTypes/LabeledDropdownSinglePill.js.map +1 -1
- package/dist/cjs/deprecated/Pill.js +48 -14
- package/dist/cjs/deprecated/Pill.js.map +1 -1
- package/dist/cjs/deprecated/PillGroup.js +15 -3
- package/dist/cjs/deprecated/PillGroup.js.map +1 -1
- package/dist/cjs/index.d.js.map +1 -1
- package/dist/cjs/props.js +2 -1
- package/dist/cjs/props.js.map +2 -2
- package/dist/esm/components/Pill.js +17 -3
- package/dist/esm/components/Pill.js.map +1 -1
- package/dist/esm/components/PillButton.js +34 -4
- package/dist/esm/components/PillButton.js.map +1 -1
- package/dist/esm/components/PillGroup.js +41 -6
- package/dist/esm/components/PillGroup.js.map +2 -2
- package/dist/esm/components/types/DropdownPill.js +23 -4
- package/dist/esm/components/types/DropdownPill.js.map +1 -1
- package/dist/esm/components/types/RemovablePill.js +17 -6
- package/dist/esm/components/types/RemovablePill.js.map +2 -2
- package/dist/esm/deprecated/DropdownPill.js +52 -14
- package/dist/esm/deprecated/DropdownPill.js.map +1 -1
- package/dist/esm/deprecated/InputPill.js +48 -14
- package/dist/esm/deprecated/InputPill.js.map +1 -1
- package/dist/esm/deprecated/LabeledDropdownPills.js +55 -15
- package/dist/esm/deprecated/LabeledDropdownPills.js.map +1 -1
- package/dist/esm/deprecated/LabeledDropdownPillsTypes/LabeledDropdownCascadeMenuPill.js +66 -26
- package/dist/esm/deprecated/LabeledDropdownPillsTypes/LabeledDropdownCascadeMenuPill.js.map +1 -1
- package/dist/esm/deprecated/LabeledDropdownPillsTypes/LabeledDropdownMultiPill.js +57 -19
- package/dist/esm/deprecated/LabeledDropdownPillsTypes/LabeledDropdownMultiPill.js.map +1 -1
- package/dist/esm/deprecated/LabeledDropdownPillsTypes/LabeledDropdownSinglePill.js +62 -24
- package/dist/esm/deprecated/LabeledDropdownPillsTypes/LabeledDropdownSinglePill.js.map +1 -1
- package/dist/esm/deprecated/Pill.js +50 -14
- package/dist/esm/deprecated/Pill.js.map +1 -1
- package/dist/esm/deprecated/PillGroup.js +17 -3
- package/dist/esm/deprecated/PillGroup.js.map +1 -1
- package/dist/esm/props.js +2 -1
- package/dist/esm/props.js.map +2 -2
- package/package.json +16 -15
- package/dist/types/components/Pill.d.ts +0 -5
- package/dist/types/components/PillButton.d.ts +0 -5
- package/dist/types/components/PillGroup.d.ts +0 -13
- package/dist/types/components/index.d.ts +0 -3
- package/dist/types/components/styled.d.ts +0 -24
- package/dist/types/components/types/DropdownPill.d.ts +0 -3
- package/dist/types/components/types/InputPill.d.ts +0 -3
- package/dist/types/components/types/LabelPill.d.ts +0 -3
- package/dist/types/components/types/ReadOnlyPill.d.ts +0 -3
- package/dist/types/components/types/RemovablePill.d.ts +0 -3
- package/dist/types/components/types/ValuePill.d.ts +0 -3
- package/dist/types/components/types/index.d.ts +0 -6
- package/dist/types/deprecated/DropdownPill.d.ts +0 -66
- package/dist/types/deprecated/InputPill.d.ts +0 -10
- package/dist/types/deprecated/LabeledDropdownPills.d.ts +0 -82
- package/dist/types/deprecated/LabeledDropdownPillsTypes/LabeledDropdownCascadeMenuPill.d.ts +0 -17
- package/dist/types/deprecated/LabeledDropdownPillsTypes/LabeledDropdownMultiPill.d.ts +0 -15
- package/dist/types/deprecated/LabeledDropdownPillsTypes/LabeledDropdownSinglePill.d.ts +0 -29
- package/dist/types/deprecated/LabeledDropdownPillsTypes/utils.d.ts +0 -1
- package/dist/types/deprecated/LabeledPills.d.ts +0 -52
- package/dist/types/deprecated/OverflowPill.d.ts +0 -33
- package/dist/types/deprecated/Pill.d.ts +0 -59
- package/dist/types/deprecated/PillGroup.d.ts +0 -50
- package/dist/types/deprecated/ReadOnlyPill.d.ts +0 -56
- package/dist/types/deprecated/RemovablePill.d.ts +0 -49
- package/dist/types/deprecated/index.d.ts +0 -9
- package/dist/types/index.d.ts +0 -3
- package/dist/types/props.d.ts +0 -92
- package/dist/types/tests/DSPill.test.d.ts +0 -1
- package/dist/types/tests/DSPillGroup.test.d.ts +0 -1
- package/dist/types/tests/events/DSPill.events.keyboard.test.d.ts +0 -1
- package/dist/types/tests/events/DSPill.events.test.d.ts +0 -1
- package/dist/types/tests/events/DSPillGroup.events.keyboard.test.d.ts +0 -1
- package/dist/types/tests/events/DSPillGroup.events.test.d.ts +0 -1
- package/dist/types/utils.d.ts +0 -4
|
@@ -2,8 +2,22 @@ var __create = Object.create;
|
|
|
2
2
|
var __defProp = Object.defineProperty;
|
|
3
3
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
4
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
5
6
|
var __getProtoOf = Object.getPrototypeOf;
|
|
6
7
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
8
|
+
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
9
|
+
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
10
|
+
var __spreadValues = (a, b) => {
|
|
11
|
+
for (var prop in b || (b = {}))
|
|
12
|
+
if (__hasOwnProp.call(b, prop))
|
|
13
|
+
__defNormalProp(a, prop, b[prop]);
|
|
14
|
+
if (__getOwnPropSymbols)
|
|
15
|
+
for (var prop of __getOwnPropSymbols(b)) {
|
|
16
|
+
if (__propIsEnum.call(b, prop))
|
|
17
|
+
__defNormalProp(a, prop, b[prop]);
|
|
18
|
+
}
|
|
19
|
+
return a;
|
|
20
|
+
};
|
|
7
21
|
var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
|
|
8
22
|
var __export = (target, all) => {
|
|
9
23
|
for (var name in all)
|
|
@@ -49,9 +63,7 @@ const DSPillV2 = (props) => {
|
|
|
49
63
|
(0, import_ds_props_helpers.useValidateTypescriptPropTypes)(propsWithDefaults, import_props.DSPillV2PropTypes);
|
|
50
64
|
const { type } = propsWithDefaults;
|
|
51
65
|
const PillComponent = pillComponentGetter[type];
|
|
52
|
-
return /* @__PURE__ */ import_react.default.createElement(PillComponent, {
|
|
53
|
-
...propsWithDefaults
|
|
54
|
-
});
|
|
66
|
+
return /* @__PURE__ */ import_react.default.createElement(PillComponent, __spreadValues({}, propsWithDefaults));
|
|
55
67
|
};
|
|
56
68
|
DSPillV2.propTypes = import_props.DSPillV2PropTypes;
|
|
57
69
|
const DSPillV2WithSchema = (0, import_react_desc.describe)(DSPillV2).description("Pill");
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/Pill.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["/* eslint-disable react/prop-types */\nimport React from 'react';\nimport { describe } from 'react-desc';\nimport { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';\nimport type { DSPillProps } from '../index.d';\nimport { DSPillV2DefaultProps, DSPillV2PropTypes } from '../props';\nimport { DropdownPill, LabelPill, ValuePill, InputPill, ReadOnlyPill, RemovablePill } from './types';\n\nconst pillComponentGetter: Record<string, React.ComponentType<DSPillProps>> = {\n dropdown: DropdownPill,\n input: InputPill,\n label: LabelPill,\n readonly: ReadOnlyPill,\n removable: RemovablePill,\n value: ValuePill,\n};\n\nconst DSPillV2: React.ComponentType<DSPillProps> = (props) => {\n const propsWithDefaults = useMemoMergePropsWithDefault(props, DSPillV2DefaultProps);\n useValidateTypescriptPropTypes(propsWithDefaults, DSPillV2PropTypes);\n const { type } = propsWithDefaults;\n const PillComponent = pillComponentGetter[type];\n\n return <PillComponent {...propsWithDefaults} />;\n};\n\nDSPillV2.propTypes = DSPillV2PropTypes;\nconst DSPillV2WithSchema = describe(DSPillV2).description('Pill');\nDSPillV2WithSchema.propTypes = DSPillV2PropTypes;\n\nexport { DSPillV2, DSPillV2WithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAAkB;AAClB,wBAAyB;AACzB,8BAA6E;AAE7E,mBAAwD;AACxD,mBAA2F;AAE3F,MAAM,sBAAwE;AAAA,EAC5E,UAAU;AAAA,EACV,OAAO;AAAA,EACP,OAAO;AAAA,EACP,UAAU;AAAA,EACV,WAAW;AAAA,EACX,OAAO;AAAA;AAGT,MAAM,WAA6C,CAAC,UAAU;AAC5D,QAAM,oBAAoB,0DAA6B,OAAO;AAC9D,8DAA+B,mBAAmB;AAClD,QAAM,EAAE,SAAS;AACjB,QAAM,gBAAgB,oBAAoB;AAE1C,SAAO,mDAAC,eAAD,mBAAmB;AAAA;AAG5B,SAAS,YAAY;AACrB,MAAM,qBAAqB,gCAAS,UAAU,YAAY;AAC1D,mBAAmB,YAAY;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,10 +1,39 @@
|
|
|
1
1
|
var __create = Object.create;
|
|
2
2
|
var __defProp = Object.defineProperty;
|
|
3
|
+
var __defProps = Object.defineProperties;
|
|
3
4
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
+
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
4
6
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
7
|
+
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
5
8
|
var __getProtoOf = Object.getPrototypeOf;
|
|
6
9
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
10
|
+
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
11
|
+
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
12
|
+
var __spreadValues = (a, b) => {
|
|
13
|
+
for (var prop in b || (b = {}))
|
|
14
|
+
if (__hasOwnProp.call(b, prop))
|
|
15
|
+
__defNormalProp(a, prop, b[prop]);
|
|
16
|
+
if (__getOwnPropSymbols)
|
|
17
|
+
for (var prop of __getOwnPropSymbols(b)) {
|
|
18
|
+
if (__propIsEnum.call(b, prop))
|
|
19
|
+
__defNormalProp(a, prop, b[prop]);
|
|
20
|
+
}
|
|
21
|
+
return a;
|
|
22
|
+
};
|
|
23
|
+
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
7
24
|
var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
|
|
25
|
+
var __objRest = (source, exclude) => {
|
|
26
|
+
var target = {};
|
|
27
|
+
for (var prop in source)
|
|
28
|
+
if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
29
|
+
target[prop] = source[prop];
|
|
30
|
+
if (source != null && __getOwnPropSymbols)
|
|
31
|
+
for (var prop of __getOwnPropSymbols(source)) {
|
|
32
|
+
if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
|
|
33
|
+
target[prop] = source[prop];
|
|
34
|
+
}
|
|
35
|
+
return target;
|
|
36
|
+
};
|
|
8
37
|
var __export = (target, all) => {
|
|
9
38
|
for (var name in all)
|
|
10
39
|
__defProp(target, name, { get: all[name], enumerable: true });
|
|
@@ -44,12 +73,11 @@ const typeToClassName = {
|
|
|
44
73
|
const DSPillButton = (props) => {
|
|
45
74
|
const propsWithDefaults = (0, import_ds_props_helpers.useMemoMergePropsWithDefault)(props, import_props.DSPillButtonDefaultProps);
|
|
46
75
|
(0, import_ds_props_helpers.useValidateTypescriptPropTypes)(propsWithDefaults, import_props.DSPillButtonPropTypes);
|
|
47
|
-
const { type, children,
|
|
48
|
-
return /* @__PURE__ */ import_react.default.createElement(import_styled.StyledPillButton, {
|
|
49
|
-
...rest,
|
|
76
|
+
const _a = propsWithDefaults, { type, children } = _a, rest = __objRest(_a, ["type", "children"]);
|
|
77
|
+
return /* @__PURE__ */ import_react.default.createElement(import_styled.StyledPillButton, __spreadProps(__spreadValues({}, rest), {
|
|
50
78
|
buttonType: "raw",
|
|
51
79
|
className: `${typeToClassName[type]} ${rest.className}`
|
|
52
|
-
}, children);
|
|
80
|
+
}), children);
|
|
53
81
|
};
|
|
54
82
|
DSPillButton.propTypes = import_props.DSPillButtonPropTypes;
|
|
55
83
|
const DSPillButtonWithSchema = (0, import_react_desc.describe)(DSPillButton).description("Pill button");
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/PillButton.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["/* eslint-disable react/prop-types */\nimport React from 'react';\nimport { describe } from 'react-desc';\nimport { DSButtonPropsT } from '@elliemae/ds-button';\nimport { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';\nimport { StyledPillButton } from './styled';\nimport { DSPillButtonDefaultProps, DSPillButtonPropTypes } from '../props';\n\nconst typeToClassName = {\n only: 'ds-pill-button-only',\n left: 'ds-pill-button-left',\n right: 'ds-pill-button-right',\n};\n\nconst DSPillButton: React.ComponentType<DSButtonPropsT> = (props) => {\n const propsWithDefaults = useMemoMergePropsWithDefault(props, DSPillButtonDefaultProps);\n useValidateTypescriptPropTypes(propsWithDefaults, DSPillButtonPropTypes);\n\n const { type, children, ...rest } = propsWithDefaults;\n\n return (\n <StyledPillButton {...rest} buttonType=\"raw\" className={`${typeToClassName[type]} ${rest.className}`}>\n {children}\n </StyledPillButton>\n );\n};\n\nDSPillButton.propTypes = DSPillButtonPropTypes;\nconst DSPillButtonWithSchema = describe(DSPillButton).description('Pill button');\nDSPillButtonWithSchema.propTypes = DSPillButtonPropTypes;\n\nexport { DSPillButton, DSPillButtonWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAAkB;AAClB,wBAAyB;AAEzB,8BAA6E;AAC7E,oBAAiC;AACjC,mBAAgE;AAEhE,MAAM,kBAAkB;AAAA,EACtB,MAAM;AAAA,EACN,MAAM;AAAA,EACN,OAAO;AAAA;AAGT,MAAM,eAAoD,CAAC,UAAU;AACnE,QAAM,oBAAoB,0DAA6B,OAAO;AAC9D,8DAA+B,mBAAmB;AAElD,QAAoC,wBAA5B,QAAM,aAAsB,IAAT,iBAAS,IAAT,CAAnB,QAAM;AAEd,SACE,mDAAC,gCAAD,iCAAsB,OAAtB;AAAA,IAA4B,YAAW;AAAA,IAAM,WAAW,GAAG,gBAAgB,SAAS,KAAK;AAAA,MACtF;AAAA;AAKP,aAAa,YAAY;AACzB,MAAM,yBAAyB,gCAAS,cAAc,YAAY;AAClE,uBAAuB,YAAY;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,9 +1,26 @@
|
|
|
1
1
|
var __create = Object.create;
|
|
2
2
|
var __defProp = Object.defineProperty;
|
|
3
|
+
var __defProps = Object.defineProperties;
|
|
3
4
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
+
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
4
6
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
7
|
+
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
5
8
|
var __getProtoOf = Object.getPrototypeOf;
|
|
6
9
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
10
|
+
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
11
|
+
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
12
|
+
var __spreadValues = (a, b) => {
|
|
13
|
+
for (var prop in b || (b = {}))
|
|
14
|
+
if (__hasOwnProp.call(b, prop))
|
|
15
|
+
__defNormalProp(a, prop, b[prop]);
|
|
16
|
+
if (__getOwnPropSymbols)
|
|
17
|
+
for (var prop of __getOwnPropSymbols(b)) {
|
|
18
|
+
if (__propIsEnum.call(b, prop))
|
|
19
|
+
__defNormalProp(a, prop, b[prop]);
|
|
20
|
+
}
|
|
21
|
+
return a;
|
|
22
|
+
};
|
|
23
|
+
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
7
24
|
var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
|
|
8
25
|
var __export = (target, all) => {
|
|
9
26
|
for (var name in all)
|
|
@@ -33,17 +50,18 @@ __export(PillGroup_exports, {
|
|
|
33
50
|
});
|
|
34
51
|
var React = __toESM(require("react"));
|
|
35
52
|
var import_react = __toESM(require("react"));
|
|
36
|
-
var import_react_desc = require("react-desc");
|
|
37
53
|
var import_uid = require("uid");
|
|
38
54
|
var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
|
|
39
55
|
var import_props = require("../props");
|
|
40
56
|
var import_styled = require("./styled");
|
|
41
57
|
const DSPillGroupV2Context = (0, import_react.createContext)({
|
|
42
|
-
onKeyboardRemove: () => null
|
|
58
|
+
onKeyboardRemove: () => null,
|
|
59
|
+
onKeyboardNavigation: () => null
|
|
43
60
|
});
|
|
44
61
|
const DSPillGroupV2 = (props) => {
|
|
45
62
|
const propsWithDefaults = (0, import_ds_props_helpers.useMemoMergePropsWithDefault)(props, import_props.DSPillGroupDefaultProps);
|
|
46
63
|
(0, import_ds_props_helpers.useValidateTypescriptPropTypes)(propsWithDefaults, import_props.DSPillGroupPropTypes);
|
|
64
|
+
const globalAttrs = (0, import_ds_props_helpers.useGetGlobalAttributes)(propsWithDefaults);
|
|
47
65
|
const pillGroupUid = (0, import_react.useMemo)(() => `ds-pill-group-${(0, import_uid.uid)()}`, []);
|
|
48
66
|
const { children, width, innerRef } = propsWithDefaults;
|
|
49
67
|
const onKeyboardRemove = (0, import_react.useCallback)((pillUid) => {
|
|
@@ -55,18 +73,28 @@ const DSPillGroupV2 = (props) => {
|
|
|
55
73
|
elems[pillIndex + 1].focus();
|
|
56
74
|
}
|
|
57
75
|
}, [pillGroupUid]);
|
|
76
|
+
const onKeyboardNavigation = (0, import_react.useCallback)((pillUid, step, e) => {
|
|
77
|
+
const elems = [...document.querySelectorAll(`#${pillGroupUid} .ds-pill-focus-point`)];
|
|
78
|
+
const pillIndex = elems.findIndex((elem) => elem.id === pillUid);
|
|
79
|
+
if (pillIndex >= 0) {
|
|
80
|
+
if (elems[pillIndex + step]) {
|
|
81
|
+
e.stopPropagation();
|
|
82
|
+
elems[pillIndex + step].focus();
|
|
83
|
+
}
|
|
84
|
+
}
|
|
85
|
+
}, [pillGroupUid]);
|
|
58
86
|
return /* @__PURE__ */ import_react.default.createElement(DSPillGroupV2Context.Provider, {
|
|
59
|
-
value: { onKeyboardRemove }
|
|
60
|
-
}, /* @__PURE__ */ import_react.default.createElement(import_styled.StyledPillGroup, {
|
|
87
|
+
value: { onKeyboardRemove, onKeyboardNavigation }
|
|
88
|
+
}, /* @__PURE__ */ import_react.default.createElement(import_styled.StyledPillGroup, __spreadProps(__spreadValues({}, globalAttrs), {
|
|
61
89
|
width,
|
|
62
90
|
id: pillGroupUid,
|
|
63
91
|
cols: import_react.default.Children.map(children, () => "auto"),
|
|
64
92
|
gutter: "2px",
|
|
65
93
|
ref: innerRef
|
|
66
|
-
}, children));
|
|
94
|
+
}), children));
|
|
67
95
|
};
|
|
68
96
|
DSPillGroupV2.propTypes = import_props.DSPillGroupPropTypes;
|
|
69
|
-
const DSPillGroupV2WithSchema = (0,
|
|
97
|
+
const DSPillGroupV2WithSchema = (0, import_ds_props_helpers.describe)(DSPillGroupV2);
|
|
70
98
|
DSPillGroupV2WithSchema.propTypes = import_props.DSPillGroupPropTypes;
|
|
71
99
|
module.exports = __toCommonJS(PillGroup_exports);
|
|
72
100
|
//# sourceMappingURL=PillGroup.js.map
|
|
@@ -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": "
|
|
4
|
+
"sourcesContent": ["/* eslint-disable react/prop-types */\nimport React, { createContext, useCallback, useMemo, WeakValidationMap } from 'react';\nimport { uid } from 'uid';\nimport {\n describe,\n useMemoMergePropsWithDefault,\n useValidateTypescriptPropTypes,\n useGetGlobalAttributes,\n} from '@elliemae/ds-props-helpers';\nimport { 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>;\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;ACAA,YAAuB;ADCvB,mBAA8E;AAC9E,iBAAoB;AACpB,8BAKO;AAEP,mBAA8D;AAC9D,oBAAgC;AAEzB,MAAM,uBAAuB,gCAGjC;AAAA,EACD,kBAAkB,MAAM;AAAA,EACxB,sBAAsB,MAAM;AAAA;AAG9B,MAAM,gBAAuD,CAAC,UAAU;AACtE,QAAM,oBAAoB,0DAA6B,OAAO;AAC9D,8DAA+B,mBAAmB;AAElD,QAAM,cAAc,oDAAuB;AAC3C,QAAM,eAAe,0BAAQ,MAAM,iBAAiB,yBAAS;AAC7D,QAAM,EAAE,UAAU,OAAO,aAAa;AACtC,QAAM,mBAAmB,8BACvB,CAAC,YAAoB;AACnB,UAAM,QAAQ,CAAC,GAAG,SAAS,iBAAiB,IAAI;AAEhD,UAAM,YAAY,MAAM,UAAU,CAAC,SAAS,KAAK,OAAO;AAExD,QAAI,YAAY,GAAG;AACjB,YAAM,YAAY,GAAG;AAAA,eACZ,YAAY,IAAI,MAAM,QAAQ;AACvC,YAAM,YAAY,GAAG;AAAA;AAAA,KAGzB,CAAC;AAEH,QAAM,uBAAuB,8BAC3B,CAAC,SAAiB,MAAc,MAAqB;AACnD,UAAM,QAAQ,CAAC,GAAG,SAAS,iBAAiB,IAAI;AAEhD,UAAM,YAAY,MAAM,UAAU,CAAC,SAAS,KAAK,OAAO;AAExD,QAAI,aAAa,GAAG;AAClB,UAAI,MAAM,YAAY,OAAO;AAC3B,UAAE;AACF,cAAM,YAAY,MAAM;AAAA;AAAA;AAAA,KAI9B,CAAC;AAGH,SACE,mDAAC,qBAAqB,UAAtB;AAAA,IAA+B,OAAO,EAAE,kBAAkB;AAAA,KACxD,mDAAC,+BAAD,iCACM,cADN;AAAA,IAEE;AAAA,IACA,IAAI;AAAA,IACJ,MAAM,qBAAM,SAAS,IAAI,UAAU,MAAM;AAAA,IACzC,QAAO;AAAA,IACP,KAAK;AAAA,MAEJ;AAAA;AAMT,cAAc,YAAY;AAC1B,MAAM,0BAA0B,sCAAS;AACzC,wBAAwB,YAAY;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,9 +1,26 @@
|
|
|
1
1
|
var __create = Object.create;
|
|
2
2
|
var __defProp = Object.defineProperty;
|
|
3
|
+
var __defProps = Object.defineProperties;
|
|
3
4
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
+
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
4
6
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
7
|
+
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
5
8
|
var __getProtoOf = Object.getPrototypeOf;
|
|
6
9
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
10
|
+
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
11
|
+
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
12
|
+
var __spreadValues = (a, b) => {
|
|
13
|
+
for (var prop in b || (b = {}))
|
|
14
|
+
if (__hasOwnProp.call(b, prop))
|
|
15
|
+
__defNormalProp(a, prop, b[prop]);
|
|
16
|
+
if (__getOwnPropSymbols)
|
|
17
|
+
for (var prop of __getOwnPropSymbols(b)) {
|
|
18
|
+
if (__propIsEnum.call(b, prop))
|
|
19
|
+
__defNormalProp(a, prop, b[prop]);
|
|
20
|
+
}
|
|
21
|
+
return a;
|
|
22
|
+
};
|
|
23
|
+
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
7
24
|
var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
|
|
8
25
|
var __export = (target, all) => {
|
|
9
26
|
for (var name in all)
|
|
@@ -53,7 +70,7 @@ const DropdownPill = import_react.default.memo(({ label, size, labelTruncated, d
|
|
|
53
70
|
gutter: "2px",
|
|
54
71
|
alignItems: "center",
|
|
55
72
|
justifyItems: "center"
|
|
56
|
-
}, /* @__PURE__ */ import_react.default.createElement(TextComponent, null, label), /* @__PURE__ */ import_react.default.createElement(import_ds_dropdownmenu.DSDropdownMenuV2, {
|
|
73
|
+
}, /* @__PURE__ */ import_react.default.createElement(TextComponent, null, label), /* @__PURE__ */ import_react.default.createElement(import_ds_dropdownmenu.DSDropdownMenuV2, __spreadProps(__spreadValues({
|
|
57
74
|
placementOrderPreference: [
|
|
58
75
|
"bottom-start",
|
|
59
76
|
"bottom",
|
|
@@ -62,8 +79,8 @@ const DropdownPill = import_react.default.memo(({ label, size, labelTruncated, d
|
|
|
62
79
|
"top-start",
|
|
63
80
|
"top",
|
|
64
81
|
"top-end"
|
|
65
|
-
]
|
|
66
|
-
|
|
82
|
+
]
|
|
83
|
+
}, dropdownProps), {
|
|
67
84
|
onClickOutside: (e) => {
|
|
68
85
|
if (e.code === "Escape")
|
|
69
86
|
chevronRef.current.focus();
|
|
@@ -71,7 +88,7 @@ const DropdownPill = import_react.default.memo(({ label, size, labelTruncated, d
|
|
|
71
88
|
dropdownProps.onClickOutside(e);
|
|
72
89
|
},
|
|
73
90
|
wrapperStyles: { w: "100%", h: "100%" }
|
|
74
|
-
}, /* @__PURE__ */ import_react.default.createElement(import_PillButton.DSPillButton, {
|
|
91
|
+
}), /* @__PURE__ */ import_react.default.createElement(import_PillButton.DSPillButton, {
|
|
75
92
|
className: "ds-pill-focus-point",
|
|
76
93
|
"data-testid": "ds-pill-dropdown-chevron",
|
|
77
94
|
innerRef: (0, import_utils.setMultipleRefs)(chevronRef, innerRef),
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/components/types/DropdownPill.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["/* eslint-disable react/prop-types */\nimport React, { useMemo, useRef } from 'react';\nimport { DSDropdownMenuV2 } from '@elliemae/ds-dropdownmenu';\nimport { uid } from 'uid';\nimport { ChevronSmallDown } from '@elliemae/ds-icons';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport { StyledDropdownPillWrapper } from '../styled';\nimport type { DSPillProps } from '../../index.d';\nimport { setMultipleRefs } from '../../utils';\nimport { DSPillButton } from '../PillButton';\n\nexport const DropdownPill = React.memo<DSPillProps>(\n ({ label, size, labelTruncated, dropdownProps, innerRef, ariaLabel, onDropdownClick }) => {\n const chevronRef = useRef(null);\n\n const pillUid = useMemo(() => `ds-pill-${uid()}`, []);\n\n const TextComponent = labelTruncated\n ? ({ children }) => <SimpleTruncatedTooltipText value={children} />\n : React.Fragment;\n\n return (\n <StyledDropdownPillWrapper\n size={size}\n id={pillUid}\n className=\"ds-pill-wrapper ds-pill-wrapper-dropdown\"\n data-testid=\"ds-pill-wrapper\"\n cols={['auto', '24px']}\n gutter=\"2px\"\n alignItems=\"center\"\n justifyItems=\"center\"\n >\n <TextComponent>{label}</TextComponent>\n <DSDropdownMenuV2\n placementOrderPreference={[\n 'bottom-start',\n 'bottom',\n 'bottom-end',\n 'right-end',\n 'top-start',\n 'top',\n 'top-end',\n ]}\n {...dropdownProps}\n onClickOutside={(e) => {\n if (e.code === 'Escape') chevronRef.current.focus();\n if (dropdownProps.onClickOutside) dropdownProps.onClickOutside(e);\n }}\n wrapperStyles={{ w: '100%', h: '100%' }}\n >\n <DSPillButton\n className=\"ds-pill-focus-point\"\n data-testid=\"ds-pill-dropdown-chevron\"\n innerRef={setMultipleRefs(chevronRef, innerRef)}\n aria-label={ariaLabel || label}\n type=\"right\"\n onClick={onDropdownClick}\n >\n <ChevronSmallDown color={['brand-primary', '800']} width={20} height={20} />\n </DSPillButton>\n </DSDropdownMenuV2>\n </StyledDropdownPillWrapper>\n );\n },\n);\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAAuC;AACvC,6BAAiC;AACjC,iBAAoB;AACpB,sBAAiC;AACjC,uCAA2C;AAC3C,oBAA0C;AAE1C,mBAAgC;AAChC,wBAA6B;AAEtB,MAAM,eAAe,qBAAM,KAChC,CAAC,EAAE,OAAO,MAAM,gBAAgB,eAAe,UAAU,WAAW,sBAAsB;AACxF,QAAM,aAAa,yBAAO;AAE1B,QAAM,UAAU,0BAAQ,MAAM,WAAW,yBAAS;AAElD,QAAM,gBAAgB,iBAClB,CAAC,EAAE,eAAe,mDAAC,6DAAD;AAAA,IAA4B,OAAO;AAAA,OACrD,qBAAM;AAEV,SACE,mDAAC,yCAAD;AAAA,IACE;AAAA,IACA,IAAI;AAAA,IACJ,WAAU;AAAA,IACV,eAAY;AAAA,IACZ,MAAM,CAAC,QAAQ;AAAA,IACf,QAAO;AAAA,IACP,YAAW;AAAA,IACX,cAAa;AAAA,KAEb,mDAAC,eAAD,MAAgB,QAChB,mDAAC,yCAAD;AAAA,IACE,0BAA0B;AAAA,MACxB;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,KAEE,gBAVN;AAAA,IAWE,gBAAgB,CAAC,MAAM;AACrB,UAAI,EAAE,SAAS;AAAU,mBAAW,QAAQ;AAC5C,UAAI,cAAc;AAAgB,sBAAc,eAAe;AAAA;AAAA,IAEjE,eAAe,EAAE,GAAG,QAAQ,GAAG;AAAA,MAE/B,mDAAC,gCAAD;AAAA,IACE,WAAU;AAAA,IACV,eAAY;AAAA,IACZ,UAAU,kCAAgB,YAAY;AAAA,IACtC,cAAY,aAAa;AAAA,IACzB,MAAK;AAAA,IACL,SAAS;AAAA,KAET,mDAAC,kCAAD;AAAA,IAAkB,OAAO,CAAC,iBAAiB;AAAA,IAAQ,OAAO;AAAA,IAAI,QAAQ;AAAA;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -37,8 +37,8 @@ var import_ds_truncated_tooltip_text = require("@elliemae/ds-truncated-tooltip-t
|
|
|
37
37
|
var import_styled = require("../styled");
|
|
38
38
|
var import_PillGroup = require("../PillGroup");
|
|
39
39
|
var import_PillButton = require("../PillButton");
|
|
40
|
-
const RemovablePill = import_react.default.memo(({ label, size, labelTruncated, onRemove, innerRef, ariaLabel }) => {
|
|
41
|
-
const { onKeyboardRemove } = (0, import_react.useContext)(import_PillGroup.DSPillGroupV2Context);
|
|
40
|
+
const RemovablePill = import_react.default.memo(({ label, size, labelTruncated, onRemove, innerRef, ariaLabel, tabIndex }) => {
|
|
41
|
+
const { onKeyboardRemove, onKeyboardNavigation } = (0, import_react.useContext)(import_PillGroup.DSPillGroupV2Context);
|
|
42
42
|
const pillUid = (0, import_react.useMemo)(() => `ds-pill-${(0, import_uid.uid)()}`, []);
|
|
43
43
|
const TextComponent = labelTruncated ? ({ children }) => /* @__PURE__ */ import_react.default.createElement(import_ds_truncated_tooltip_text.SimpleTruncatedTooltipText, {
|
|
44
44
|
value: children
|
|
@@ -50,7 +50,17 @@ const RemovablePill = import_react.default.memo(({ label, size, labelTruncated,
|
|
|
50
50
|
onKeyboardRemove(pillUid);
|
|
51
51
|
onRemove(e);
|
|
52
52
|
}
|
|
53
|
-
|
|
53
|
+
if (e.code === "ArrowLeft") {
|
|
54
|
+
e.preventDefault();
|
|
55
|
+
if (onKeyboardNavigation)
|
|
56
|
+
onKeyboardNavigation(pillUid, -1, e);
|
|
57
|
+
}
|
|
58
|
+
if (e.code === "ArrowRight") {
|
|
59
|
+
e.preventDefault();
|
|
60
|
+
if (onKeyboardNavigation)
|
|
61
|
+
onKeyboardNavigation(pillUid, 1, e);
|
|
62
|
+
}
|
|
63
|
+
}, [onKeyboardRemove, onRemove, onKeyboardNavigation, pillUid]);
|
|
54
64
|
return /* @__PURE__ */ import_react.default.createElement(import_styled.StyledRemovablePillWrapper, {
|
|
55
65
|
size,
|
|
56
66
|
cols: ["auto", "24px"],
|
|
@@ -68,10 +78,11 @@ const RemovablePill = import_react.default.memo(({ label, size, labelTruncated,
|
|
|
68
78
|
onClick: onRemove,
|
|
69
79
|
onKeyDown,
|
|
70
80
|
"aria-label": `Remove ${label}`,
|
|
71
|
-
type: "right"
|
|
81
|
+
type: "right",
|
|
82
|
+
tabIndex
|
|
72
83
|
}, /* @__PURE__ */ import_react.default.createElement(import_ds_icons.CloseXsmall, {
|
|
73
|
-
width: 22.65,
|
|
74
|
-
height: 22.65,
|
|
84
|
+
width: size === "s" ? 18 : 22.65,
|
|
85
|
+
height: size === "s" ? 18 : 22.65,
|
|
75
86
|
color: ["brand-primary", "700"]
|
|
76
87
|
})));
|
|
77
88
|
});
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/components/types/RemovablePill.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable react/prop-types */\nimport React, { useCallback, useContext, useMemo } from 'react';\nimport { uid } from 'uid';\nimport { CloseXsmall } from '@elliemae/ds-icons';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport type { DSPillProps } from '../../index.d';\nimport { StyledRemovablePillWrapper } from '../styled';\nimport { DSPillGroupV2Context } from '../PillGroup';\nimport { DSPillButton } from '../PillButton';\n\nexport const RemovablePill = React.memo<DSPillProps>(\n ({ label, size, labelTruncated, onRemove, innerRef, ariaLabel }) => {\n const { onKeyboardRemove } = useContext(DSPillGroupV2Context);\n const pillUid = useMemo(() => `ds-pill-${uid()}`, []);\n\n const TextComponent = labelTruncated\n ? ({ children }) => <SimpleTruncatedTooltipText value={children} />\n : React.Fragment;\n\n const onKeyDown
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAAwD;AACxD,iBAAoB;AACpB,sBAA4B;AAC5B,uCAA2C;AAE3C,oBAA2C;AAC3C,uBAAqC;AACrC,wBAA6B;AAEtB,MAAM,gBAAgB,qBAAM,KACjC,CAAC,EAAE,OAAO,MAAM,gBAAgB,UAAU,UAAU,
|
|
4
|
+
"sourcesContent": ["/* eslint-disable react/prop-types */\nimport React, { useCallback, useContext, useMemo } from 'react';\nimport { uid } from 'uid';\nimport { CloseXsmall } from '@elliemae/ds-icons';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport type { DSPillProps } from '../../index.d';\nimport { StyledRemovablePillWrapper } from '../styled';\nimport { DSPillGroupV2Context } from '../PillGroup';\nimport { DSPillButton } from '../PillButton';\n\nexport const RemovablePill = React.memo<DSPillProps>(\n ({ label, size, labelTruncated, onRemove, innerRef, ariaLabel, tabIndex }) => {\n const { onKeyboardRemove, onKeyboardNavigation } = useContext(DSPillGroupV2Context);\n const pillUid = useMemo(() => `ds-pill-${uid()}`, []);\n\n const TextComponent = labelTruncated\n ? ({ children }) => <SimpleTruncatedTooltipText value={children} />\n : React.Fragment;\n\n const onKeyDown = useCallback(\n (e: KeyboardEvent) => {\n if (['Enter', 'Space'].includes(e.code)) {\n e.preventDefault();\n if (onKeyboardRemove) onKeyboardRemove(pillUid);\n onRemove(e);\n }\n if (e.code === 'ArrowLeft') {\n e.preventDefault();\n if (onKeyboardNavigation) onKeyboardNavigation(pillUid, -1, e);\n }\n if (e.code === 'ArrowRight') {\n e.preventDefault();\n if (onKeyboardNavigation) onKeyboardNavigation(pillUid, 1, e);\n }\n },\n [onKeyboardRemove, onRemove, onKeyboardNavigation, pillUid],\n );\n\n return (\n <StyledRemovablePillWrapper\n size={size}\n cols={['auto', '24px']}\n gutter=\"2px\"\n alignItems=\"center\"\n justifyItems=\"center\"\n className=\"ds-pill-wrapper ds-pill-wrapper-removable\"\n data-testid=\"ds-pill-wrapper\"\n aria-label={ariaLabel || label}\n >\n <TextComponent>{label}</TextComponent>\n <DSPillButton\n className=\"ds-pill-focus-point\"\n id={pillUid}\n data-testid=\"ds-pill-close-icon\"\n innerRef={innerRef}\n onClick={onRemove}\n onKeyDown={onKeyDown}\n aria-label={`Remove ${label}`}\n type=\"right\"\n tabIndex={tabIndex}\n >\n <CloseXsmall\n width={size === 's' ? 18 : 22.65}\n height={size === 's' ? 18 : 22.65}\n color={['brand-primary', '700']}\n />\n </DSPillButton>\n </StyledRemovablePillWrapper>\n );\n },\n);\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAAwD;AACxD,iBAAoB;AACpB,sBAA4B;AAC5B,uCAA2C;AAE3C,oBAA2C;AAC3C,uBAAqC;AACrC,wBAA6B;AAEtB,MAAM,gBAAgB,qBAAM,KACjC,CAAC,EAAE,OAAO,MAAM,gBAAgB,UAAU,UAAU,WAAW,eAAe;AAC5E,QAAM,EAAE,kBAAkB,yBAAyB,6BAAW;AAC9D,QAAM,UAAU,0BAAQ,MAAM,WAAW,yBAAS;AAElD,QAAM,gBAAgB,iBAClB,CAAC,EAAE,eAAe,mDAAC,6DAAD;AAAA,IAA4B,OAAO;AAAA,OACrD,qBAAM;AAEV,QAAM,YAAY,8BAChB,CAAC,MAAqB;AACpB,QAAI,CAAC,SAAS,SAAS,SAAS,EAAE,OAAO;AACvC,QAAE;AACF,UAAI;AAAkB,yBAAiB;AACvC,eAAS;AAAA;AAEX,QAAI,EAAE,SAAS,aAAa;AAC1B,QAAE;AACF,UAAI;AAAsB,6BAAqB,SAAS,IAAI;AAAA;AAE9D,QAAI,EAAE,SAAS,cAAc;AAC3B,QAAE;AACF,UAAI;AAAsB,6BAAqB,SAAS,GAAG;AAAA;AAAA,KAG/D,CAAC,kBAAkB,UAAU,sBAAsB;AAGrD,SACE,mDAAC,0CAAD;AAAA,IACE;AAAA,IACA,MAAM,CAAC,QAAQ;AAAA,IACf,QAAO;AAAA,IACP,YAAW;AAAA,IACX,cAAa;AAAA,IACb,WAAU;AAAA,IACV,eAAY;AAAA,IACZ,cAAY,aAAa;AAAA,KAEzB,mDAAC,eAAD,MAAgB,QAChB,mDAAC,gCAAD;AAAA,IACE,WAAU;AAAA,IACV,IAAI;AAAA,IACJ,eAAY;AAAA,IACZ;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA,cAAY,UAAU;AAAA,IACtB,MAAK;AAAA,IACL;AAAA,KAEA,mDAAC,6BAAD;AAAA,IACE,OAAO,SAAS,MAAM,KAAK;AAAA,IAC3B,QAAQ,SAAS,MAAM,KAAK;AAAA,IAC5B,OAAO,CAAC,iBAAiB;AAAA;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,10 +1,39 @@
|
|
|
1
1
|
var __create = Object.create;
|
|
2
2
|
var __defProp = Object.defineProperty;
|
|
3
|
+
var __defProps = Object.defineProperties;
|
|
3
4
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
+
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
4
6
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
7
|
+
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
5
8
|
var __getProtoOf = Object.getPrototypeOf;
|
|
6
9
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
10
|
+
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
11
|
+
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
12
|
+
var __spreadValues = (a, b) => {
|
|
13
|
+
for (var prop in b || (b = {}))
|
|
14
|
+
if (__hasOwnProp.call(b, prop))
|
|
15
|
+
__defNormalProp(a, prop, b[prop]);
|
|
16
|
+
if (__getOwnPropSymbols)
|
|
17
|
+
for (var prop of __getOwnPropSymbols(b)) {
|
|
18
|
+
if (__propIsEnum.call(b, prop))
|
|
19
|
+
__defNormalProp(a, prop, b[prop]);
|
|
20
|
+
}
|
|
21
|
+
return a;
|
|
22
|
+
};
|
|
23
|
+
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
7
24
|
var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
|
|
25
|
+
var __objRest = (source, exclude) => {
|
|
26
|
+
var target = {};
|
|
27
|
+
for (var prop in source)
|
|
28
|
+
if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
29
|
+
target[prop] = source[prop];
|
|
30
|
+
if (source != null && __getOwnPropSymbols)
|
|
31
|
+
for (var prop of __getOwnPropSymbols(source)) {
|
|
32
|
+
if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
|
|
33
|
+
target[prop] = source[prop];
|
|
34
|
+
}
|
|
35
|
+
return target;
|
|
36
|
+
};
|
|
8
37
|
var __export = (target, all) => {
|
|
9
38
|
for (var name in all)
|
|
10
39
|
__defProp(target, name, { get: all[name], enumerable: true });
|
|
@@ -37,21 +66,28 @@ var import_ds_dropdownmenu = require("@elliemae/ds-dropdownmenu");
|
|
|
37
66
|
var import_ds_icons = require("@elliemae/ds-icons");
|
|
38
67
|
var import_useFocusGroupItem = require("@elliemae/ds-shared/FocusGroup/useFocusGroupItem");
|
|
39
68
|
var import_Pill = require("./Pill");
|
|
40
|
-
function DropdownPill({
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
}
|
|
69
|
+
function DropdownPill(_a) {
|
|
70
|
+
var _b = _a, {
|
|
71
|
+
containerProps = {},
|
|
72
|
+
label = "",
|
|
73
|
+
variant,
|
|
74
|
+
tabIndex = -1,
|
|
75
|
+
closeMenuOnItemSelection = false,
|
|
76
|
+
maxWidth,
|
|
77
|
+
minWidth
|
|
78
|
+
} = _b, dropdownProps = __objRest(_b, [
|
|
79
|
+
"containerProps",
|
|
80
|
+
"label",
|
|
81
|
+
"variant",
|
|
82
|
+
"tabIndex",
|
|
83
|
+
"closeMenuOnItemSelection",
|
|
84
|
+
"maxWidth",
|
|
85
|
+
"minWidth"
|
|
86
|
+
]);
|
|
50
87
|
const ref = (0, import_react.useRef)(null);
|
|
51
88
|
const [chevronEl, chevronRef] = (0, import_react.useState)();
|
|
52
89
|
const { focusFirst } = (0, import_useFocusGroupItem.useFocusGroupItem)(ref);
|
|
53
|
-
return /* @__PURE__ */ import_react.default.createElement(import_ds_dropdownmenu.DSDropdownMenu, {
|
|
54
|
-
...dropdownProps,
|
|
90
|
+
return /* @__PURE__ */ import_react.default.createElement(import_ds_dropdownmenu.DSDropdownMenu, __spreadProps(__spreadValues({}, dropdownProps), {
|
|
55
91
|
closeMenuOnItemSelection,
|
|
56
92
|
maxWidth,
|
|
57
93
|
hideIfNotVisible: true,
|
|
@@ -62,7 +98,7 @@ function DropdownPill({
|
|
|
62
98
|
triggerComponent: /* @__PURE__ */ import_react.default.createElement(import_Pill.Pill, {
|
|
63
99
|
"data-testid": "dropdown-pill",
|
|
64
100
|
className: "dropdown-pill",
|
|
65
|
-
containerProps: { role: "listbox",
|
|
101
|
+
containerProps: __spreadValues({ role: "listbox" }, containerProps),
|
|
66
102
|
innerRef: ref,
|
|
67
103
|
label,
|
|
68
104
|
rightAddon: /* @__PURE__ */ import_react.default.createElement("div", {
|
|
@@ -74,7 +110,7 @@ function DropdownPill({
|
|
|
74
110
|
tabIndex,
|
|
75
111
|
variant
|
|
76
112
|
})
|
|
77
|
-
});
|
|
113
|
+
}));
|
|
78
114
|
}
|
|
79
115
|
const props = {
|
|
80
116
|
containerProps: import_react_desc.PropTypes.object.description("props injected to component wrapper"),
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/deprecated/DropdownPill.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["import React, { useRef, useState } from 'react';\nimport { PropTypes, describe } from 'react-desc';\nimport { DSDropdownMenu } from '@elliemae/ds-dropdownmenu';\nimport { ChevronDown } from '@elliemae/ds-icons';\nimport { useFocusGroupItem } from '@elliemae/ds-shared/FocusGroup/useFocusGroupItem';\nimport { Pill } from './Pill';\n\nfunction DropdownPill({\n containerProps = {},\n label = '',\n variant,\n tabIndex = -1,\n closeMenuOnItemSelection = false,\n maxWidth,\n minWidth,\n ...dropdownProps\n}) {\n const ref = useRef(null);\n const [chevronEl, chevronRef] = useState();\n const { focusFirst } = useFocusGroupItem(ref);\n return (\n <DSDropdownMenu\n {...dropdownProps}\n closeMenuOnItemSelection={closeMenuOnItemSelection}\n maxWidth={maxWidth}\n hideIfNotVisible\n menuProps={{ className: 'dropdown-pill-menu', zIndex: 100 }}\n minWidth={minWidth}\n onClose={focusFirst}\n referenceNode={chevronEl}\n triggerComponent={\n <Pill\n data-testid=\"dropdown-pill\"\n className=\"dropdown-pill\"\n containerProps={{ role: 'listbox', ...containerProps }}\n innerRef={ref}\n label={label}\n rightAddon={\n <div ref={chevronRef}>\n <ChevronDown className=\"dropdown-pill-chevron-down\" data-testid=\"dropdown-pill-button\" />\n </div>\n }\n tabIndex={tabIndex}\n variant={variant}\n />\n }\n />\n );\n}\n\nconst props = {\n /** props injected to component wrapper */\n containerProps: PropTypes.object.description('props injected to component wrapper'),\n /** labeled pill text label */\n label: PropTypes.string.isRequired.description('pill text label'),\n /** pill variant */\n variant: PropTypes.oneOf(['value', 'title']).description('pill variant'),\n /** html focus border */\n tabIndex: PropTypes.number.description('html focus order'),\n /** close menu on item selection */\n closeMenuOnItemSelection: PropTypes.bool.description('close menu on item selection'),\n /** pill max width */\n maxWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description('pill max width'),\n /** pill min width */\n minWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description('pill min width'),\n};\n\nDropdownPill.propTypes = props;\nconst DSDropdownPillWithSchema = describe(DropdownPill);\nDSDropdownPillWithSchema.propTypes = props;\n\nexport { DropdownPill, DSDropdownPillWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAwC;AACxC,wBAAoC;AACpC,6BAA+B;AAC/B,sBAA4B;AAC5B,+BAAkC;AAClC,kBAAqB;AAErB,sBAAsB,IASnB;AATmB,eACpB;AAAA,qBAAiB;AAAA,IACjB,QAAQ;AAAA,IACR;AAAA,IACA,WAAW;AAAA,IACX,2BAA2B;AAAA,IAC3B;AAAA,IACA;AAAA,MAPoB,IAQjB,0BARiB,IAQjB;AAAA,IAPH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAGA,QAAM,MAAM,yBAAO;AACnB,QAAM,CAAC,WAAW,cAAc;AAChC,QAAM,EAAE,eAAe,gDAAkB;AACzC,SACE,mDAAC,uCAAD,iCACM,gBADN;AAAA,IAEE;AAAA,IACA;AAAA,IACA,kBAAgB;AAAA,IAChB,WAAW,EAAE,WAAW,sBAAsB,QAAQ;AAAA,IACtD;AAAA,IACA,SAAS;AAAA,IACT,eAAe;AAAA,IACf,kBACE,mDAAC,kBAAD;AAAA,MACE,eAAY;AAAA,MACZ,WAAU;AAAA,MACV,gBAAgB,iBAAE,MAAM,aAAc;AAAA,MACtC,UAAU;AAAA,MACV;AAAA,MACA,YACE,mDAAC,OAAD;AAAA,QAAK,KAAK;AAAA,SACR,mDAAC,6BAAD;AAAA,QAAa,WAAU;AAAA,QAA6B,eAAY;AAAA;AAAA,MAGpE;AAAA,MACA;AAAA;AAAA;AAAA;AAOV,MAAM,QAAQ;AAAA,EAEZ,gBAAgB,4BAAU,OAAO,YAAY;AAAA,EAE7C,OAAO,4BAAU,OAAO,WAAW,YAAY;AAAA,EAE/C,SAAS,4BAAU,MAAM,CAAC,SAAS,UAAU,YAAY;AAAA,EAEzD,UAAU,4BAAU,OAAO,YAAY;AAAA,EAEvC,0BAA0B,4BAAU,KAAK,YAAY;AAAA,EAErD,UAAU,4BAAU,UAAU,CAAC,4BAAU,QAAQ,4BAAU,SAAS,YAAY;AAAA,EAEhF,UAAU,4BAAU,UAAU,CAAC,4BAAU,QAAQ,4BAAU,SAAS,YAAY;AAAA;AAGlF,aAAa,YAAY;AACzB,MAAM,2BAA2B,gCAAS;AAC1C,yBAAyB,YAAY;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -2,9 +2,35 @@ var __create = Object.create;
|
|
|
2
2
|
var __defProp = Object.defineProperty;
|
|
3
3
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
4
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
5
6
|
var __getProtoOf = Object.getPrototypeOf;
|
|
6
7
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
8
|
+
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
9
|
+
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
10
|
+
var __spreadValues = (a, b) => {
|
|
11
|
+
for (var prop in b || (b = {}))
|
|
12
|
+
if (__hasOwnProp.call(b, prop))
|
|
13
|
+
__defNormalProp(a, prop, b[prop]);
|
|
14
|
+
if (__getOwnPropSymbols)
|
|
15
|
+
for (var prop of __getOwnPropSymbols(b)) {
|
|
16
|
+
if (__propIsEnum.call(b, prop))
|
|
17
|
+
__defNormalProp(a, prop, b[prop]);
|
|
18
|
+
}
|
|
19
|
+
return a;
|
|
20
|
+
};
|
|
7
21
|
var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
|
|
22
|
+
var __objRest = (source, exclude) => {
|
|
23
|
+
var target = {};
|
|
24
|
+
for (var prop in source)
|
|
25
|
+
if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
26
|
+
target[prop] = source[prop];
|
|
27
|
+
if (source != null && __getOwnPropSymbols)
|
|
28
|
+
for (var prop of __getOwnPropSymbols(source)) {
|
|
29
|
+
if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
|
|
30
|
+
target[prop] = source[prop];
|
|
31
|
+
}
|
|
32
|
+
return target;
|
|
33
|
+
};
|
|
8
34
|
var __export = (target, all) => {
|
|
9
35
|
for (var name in all)
|
|
10
36
|
__defProp(target, name, { get: all[name], enumerable: true });
|
|
@@ -38,16 +64,23 @@ var import_Pill = require("./Pill");
|
|
|
38
64
|
const StyledInputPill = (0, import_ds_classnames.aggregatedClasses)(import_Pill.Pill)("input-pill", null, ({ value }) => ({
|
|
39
65
|
value
|
|
40
66
|
}));
|
|
41
|
-
function InputPill({
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
}
|
|
67
|
+
function InputPill(_a) {
|
|
68
|
+
var _b = _a, {
|
|
69
|
+
containerProps = {},
|
|
70
|
+
placeholder = "Enter Value",
|
|
71
|
+
onChange = () => {
|
|
72
|
+
},
|
|
73
|
+
onRemove,
|
|
74
|
+
value,
|
|
75
|
+
type
|
|
76
|
+
} = _b, otherProps = __objRest(_b, [
|
|
77
|
+
"containerProps",
|
|
78
|
+
"placeholder",
|
|
79
|
+
"onChange",
|
|
80
|
+
"onRemove",
|
|
81
|
+
"value",
|
|
82
|
+
"type"
|
|
83
|
+
]);
|
|
51
84
|
let TypeOfInput = import_ds_form.DSInput;
|
|
52
85
|
switch (type) {
|
|
53
86
|
case "inputText":
|
|
@@ -63,13 +96,12 @@ function InputPill({
|
|
|
63
96
|
className: "input-pill",
|
|
64
97
|
classProps: { value },
|
|
65
98
|
containerProps,
|
|
66
|
-
label: /* @__PURE__ */ import_react.default.createElement(TypeOfInput, {
|
|
99
|
+
label: /* @__PURE__ */ import_react.default.createElement(TypeOfInput, __spreadValues({
|
|
67
100
|
"data-testid": "input-pill",
|
|
68
101
|
onChange,
|
|
69
102
|
placeholder,
|
|
70
|
-
value
|
|
71
|
-
|
|
72
|
-
}),
|
|
103
|
+
value
|
|
104
|
+
}, otherProps)),
|
|
73
105
|
rightAddon: value && /* @__PURE__ */ import_react.default.createElement(import_ds_icons.CloseXsmall, {
|
|
74
106
|
className: "remove-pill-button",
|
|
75
107
|
"data-testid": "remove-pill-button",
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/deprecated/InputPill.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["import React from 'react';\nimport { CloseXsmall } from '@elliemae/ds-icons';\nimport { aggregatedClasses } from '@elliemae/ds-classnames';\nimport { DSInput, DSInputMask } from '@elliemae/ds-form';\nimport { Pill } from './Pill';\n\nconst StyledInputPill = aggregatedClasses(Pill)('input-pill', null, ({ value }) => ({\n value,\n}));\n\nexport function InputPill({\n containerProps = {},\n placeholder = 'Enter Value',\n onChange = () => {},\n onRemove,\n value,\n type,\n ...otherProps\n}) {\n let TypeOfInput = DSInput;\n // TODO: implement the DSTimeInput, see how because it returns a moment()\n // TODO: implement the DSDateInput\n switch (type) {\n case 'inputText':\n TypeOfInput = DSInput;\n break;\n case 'inputMask':\n TypeOfInput = DSInputMask;\n break;\n default:\n break;\n }\n\n return (\n <StyledInputPill\n className=\"input-pill\"\n classProps={{ value }}\n containerProps={containerProps}\n label={\n <TypeOfInput\n data-testid=\"input-pill\"\n onChange={onChange}\n placeholder={placeholder}\n value={value}\n {...otherProps}\n />\n }\n rightAddon={\n value && <CloseXsmall className=\"remove-pill-button\" data-testid=\"remove-pill-button\" onClick={onRemove} />\n }\n tabIndex={-1}\n />\n );\n}\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAClB,sBAA4B;AAC5B,2BAAkC;AAClC,qBAAqC;AACrC,kBAAqB;AAErB,MAAM,kBAAkB,4CAAkB,kBAAM,cAAc,MAAM,CAAC,EAAE,YAAa;AAAA,EAClF;AAAA;AAGK,mBAAmB,IAQvB;AARuB,eACxB;AAAA,qBAAiB;AAAA,IACjB,cAAc;AAAA,IACd,WAAW,MAAM;AAAA;AAAA,IACjB;AAAA,IACA;AAAA,IACA;AAAA,MANwB,IAOrB,uBAPqB,IAOrB;AAAA,IANH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAGA,MAAI,cAAc;AAGlB,UAAQ;AAAA,SACD;AACH,oBAAc;AACd;AAAA,SACG;AACH,oBAAc;AACd;AAAA;AAEA;AAAA;AAGJ,SACE,mDAAC,iBAAD;AAAA,IACE,WAAU;AAAA,IACV,YAAY,EAAE;AAAA,IACd;AAAA,IACA,OACE,mDAAC,aAAD;AAAA,MACE,eAAY;AAAA,MACZ;AAAA,MACA;AAAA,MACA;AAAA,OACI;AAAA,IAGR,YACE,SAAS,mDAAC,6BAAD;AAAA,MAAa,WAAU;AAAA,MAAqB,eAAY;AAAA,MAAqB,SAAS;AAAA;AAAA,IAEjG,UAAU;AAAA;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|