@elliemae/ds-form-layout-autocomplete 3.70.0-next.33 → 3.70.0-next.35
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.
|
@@ -35,27 +35,25 @@ var React = __toESM(require("react"));
|
|
|
35
35
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
36
36
|
var import_react = __toESM(require("react"));
|
|
37
37
|
var import_ds_system = require("@elliemae/ds-system");
|
|
38
|
+
var import_ds_typography = require("@elliemae/ds-typography");
|
|
38
39
|
var import_ds_menu_items = require("@elliemae/ds-menu-items");
|
|
39
40
|
var import_AutocompleteDataTestids = require("../AutocompleteDataTestids.js");
|
|
40
41
|
const StyledSectionWrapper = (0, import_ds_system.styled)("section")`
|
|
41
42
|
list-style: none;
|
|
42
|
-
min-height:
|
|
43
|
+
min-height: 32px;
|
|
43
44
|
display: grid;
|
|
44
45
|
align-items: center;
|
|
45
46
|
`;
|
|
46
|
-
const StyledSectionLabel = (0, import_ds_system.styled)(
|
|
47
|
+
const StyledSectionLabel = (0, import_ds_system.styled)(import_ds_typography.DSTypography)`
|
|
47
48
|
display: flex;
|
|
48
49
|
align-items: center;
|
|
49
|
-
padding:
|
|
50
|
-
min-height: 24px;
|
|
51
|
-
font-size: 1rem;
|
|
52
|
-
color: neutral-500;
|
|
50
|
+
padding: 8px 16px;
|
|
53
51
|
`;
|
|
54
52
|
const Section = import_react.default.memo((props) => {
|
|
55
53
|
const { label, wrapperStyles, focusOptionIdx, innerRef, options, handleClick } = props;
|
|
56
54
|
const id = `${label.replace(/ /g, "")}-section`;
|
|
57
55
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(StyledSectionWrapper, { role: "group", "aria-labelledby": id, style: wrapperStyles, innerRef, children: [
|
|
58
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledSectionLabel, { id, role: "presentation", children: label }),
|
|
56
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledSectionLabel, { variant: "b3-strong", component: "header", id, role: "presentation", children: label }),
|
|
59
57
|
options?.map((option) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
60
58
|
import_ds_menu_items.DSMenuItemsAction,
|
|
61
59
|
{
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/parts/Section.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { DSMenuItemsAction } from '@elliemae/ds-menu-items';\nimport { AutocompleteDataTestid } from '../AutocompleteDataTestids.js';\nimport type { DSAutocompleteT } from '../react-desc-prop-types.js';\n\ninterface SectionProps {\n label: string;\n wrapperStyles: React.CSSProperties;\n innerRef: (instance: HTMLDivElement | null) => void;\n options: DSAutocompleteT.ItemOption[];\n handleClick: (option: DSAutocompleteT.ItemOption, e: React.MouseEvent<HTMLInputElement>) => void;\n focusOptionIdx: string;\n}\n\nconst StyledSectionWrapper = styled('section')`\n list-style: none;\n min-height:
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["import React from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { DSTypography } from '@elliemae/ds-typography';\nimport { DSMenuItemsAction } from '@elliemae/ds-menu-items';\nimport { AutocompleteDataTestid } from '../AutocompleteDataTestids.js';\nimport type { DSAutocompleteT } from '../react-desc-prop-types.js';\n\ninterface SectionProps {\n label: string;\n wrapperStyles: React.CSSProperties;\n innerRef: (instance: HTMLDivElement | null) => void;\n options: DSAutocompleteT.ItemOption[];\n handleClick: (option: DSAutocompleteT.ItemOption, e: React.MouseEvent<HTMLInputElement>) => void;\n focusOptionIdx: string;\n}\n\nconst StyledSectionWrapper = styled('section')`\n list-style: none;\n min-height: 32px;\n display: grid;\n align-items: center;\n`;\n\n/**\n * Group-label styling aligned with its siblings (PUI-18609 / PUI-15487): b3-strong typography,\n * 32px row (8px+8px padding + b3-strong line-height, mirrored by the wrapper min-height above).\n *\n * This is one of four independent reimplementations of the section/group-label row\n * (ds-menu-items-commons, ds-form-combobox, ds-menu-button being the others). The duplication \u2014\n * and the fact that these styled calls remain slot-less here \u2014 is tracked in\n * KNOWN_INTENTIONAL_DEVIATIONS.md.\n */\nconst StyledSectionLabel = styled(DSTypography)`\n display: flex;\n align-items: center;\n padding: 8px 16px;\n`;\n\nexport const Section = React.memo((props: SectionProps) => {\n const { label, wrapperStyles, focusOptionIdx, innerRef, options, handleClick } = props;\n const id = `${label.replace(/ /g, '')}-section`;\n return (\n <StyledSectionWrapper role=\"group\" aria-labelledby={id} style={wrapperStyles} innerRef={innerRef}>\n <StyledSectionLabel variant=\"b3-strong\" component=\"header\" id={id} role=\"presentation\">\n {label}\n </StyledSectionLabel>\n {options?.map((option) => (\n <DSMenuItemsAction\n as=\"div\"\n key={option.dsId}\n dsId={option.dsId}\n id={option.dsId}\n label={option.label}\n data-testid={AutocompleteDataTestid.OPTION}\n disabled={option.disabled}\n onClick={(e: React.MouseEvent<HTMLInputElement>) => handleClick(option, e)}\n isActive={option.dsId === focusOptionIdx}\n aria-selected=\"false\"\n />\n ))}\n </StyledSectionWrapper>\n );\n});\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD0CnB;AA1CJ,mBAAkB;AAClB,uBAAuB;AACvB,2BAA6B;AAC7B,2BAAkC;AAClC,qCAAuC;AAYvC,MAAM,2BAAuB,yBAAO,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAgB7C,MAAM,yBAAqB,yBAAO,iCAAY;AAAA;AAAA;AAAA;AAAA;AAMvC,MAAM,UAAU,aAAAA,QAAM,KAAK,CAAC,UAAwB;AACzD,QAAM,EAAE,OAAO,eAAe,gBAAgB,UAAU,SAAS,YAAY,IAAI;AACjF,QAAM,KAAK,GAAG,MAAM,QAAQ,MAAM,EAAE,CAAC;AACrC,SACE,6CAAC,wBAAqB,MAAK,SAAQ,mBAAiB,IAAI,OAAO,eAAe,UAC5E;AAAA,gDAAC,sBAAmB,SAAQ,aAAY,WAAU,UAAS,IAAQ,MAAK,gBACrE,iBACH;AAAA,IACC,SAAS,IAAI,CAAC,WACb;AAAA,MAAC;AAAA;AAAA,QACC,IAAG;AAAA,QAEH,MAAM,OAAO;AAAA,QACb,IAAI,OAAO;AAAA,QACX,OAAO,OAAO;AAAA,QACd,eAAa,sDAAuB;AAAA,QACpC,UAAU,OAAO;AAAA,QACjB,SAAS,CAAC,MAA0C,YAAY,QAAQ,CAAC;AAAA,QACzE,UAAU,OAAO,SAAS;AAAA,QAC1B,iBAAc;AAAA;AAAA,MART,OAAO;AAAA,IASd,CACD;AAAA,KACH;AAEJ,CAAC;",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -2,27 +2,25 @@ import * as React from "react";
|
|
|
2
2
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
3
3
|
import React2 from "react";
|
|
4
4
|
import { styled } from "@elliemae/ds-system";
|
|
5
|
+
import { DSTypography } from "@elliemae/ds-typography";
|
|
5
6
|
import { DSMenuItemsAction } from "@elliemae/ds-menu-items";
|
|
6
7
|
import { AutocompleteDataTestid } from "../AutocompleteDataTestids.js";
|
|
7
8
|
const StyledSectionWrapper = styled("section")`
|
|
8
9
|
list-style: none;
|
|
9
|
-
min-height:
|
|
10
|
+
min-height: 32px;
|
|
10
11
|
display: grid;
|
|
11
12
|
align-items: center;
|
|
12
13
|
`;
|
|
13
|
-
const StyledSectionLabel = styled(
|
|
14
|
+
const StyledSectionLabel = styled(DSTypography)`
|
|
14
15
|
display: flex;
|
|
15
16
|
align-items: center;
|
|
16
|
-
padding:
|
|
17
|
-
min-height: 24px;
|
|
18
|
-
font-size: 1rem;
|
|
19
|
-
color: neutral-500;
|
|
17
|
+
padding: 8px 16px;
|
|
20
18
|
`;
|
|
21
19
|
const Section = React2.memo((props) => {
|
|
22
20
|
const { label, wrapperStyles, focusOptionIdx, innerRef, options, handleClick } = props;
|
|
23
21
|
const id = `${label.replace(/ /g, "")}-section`;
|
|
24
22
|
return /* @__PURE__ */ jsxs(StyledSectionWrapper, { role: "group", "aria-labelledby": id, style: wrapperStyles, innerRef, children: [
|
|
25
|
-
/* @__PURE__ */ jsx(StyledSectionLabel, { id, role: "presentation", children: label }),
|
|
23
|
+
/* @__PURE__ */ jsx(StyledSectionLabel, { variant: "b3-strong", component: "header", id, role: "presentation", children: label }),
|
|
26
24
|
options?.map((option) => /* @__PURE__ */ jsx(
|
|
27
25
|
DSMenuItemsAction,
|
|
28
26
|
{
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/Section.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { DSMenuItemsAction } from '@elliemae/ds-menu-items';\nimport { AutocompleteDataTestid } from '../AutocompleteDataTestids.js';\nimport type { DSAutocompleteT } from '../react-desc-prop-types.js';\n\ninterface SectionProps {\n label: string;\n wrapperStyles: React.CSSProperties;\n innerRef: (instance: HTMLDivElement | null) => void;\n options: DSAutocompleteT.ItemOption[];\n handleClick: (option: DSAutocompleteT.ItemOption, e: React.MouseEvent<HTMLInputElement>) => void;\n focusOptionIdx: string;\n}\n\nconst StyledSectionWrapper = styled('section')`\n list-style: none;\n min-height:
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { DSTypography } from '@elliemae/ds-typography';\nimport { DSMenuItemsAction } from '@elliemae/ds-menu-items';\nimport { AutocompleteDataTestid } from '../AutocompleteDataTestids.js';\nimport type { DSAutocompleteT } from '../react-desc-prop-types.js';\n\ninterface SectionProps {\n label: string;\n wrapperStyles: React.CSSProperties;\n innerRef: (instance: HTMLDivElement | null) => void;\n options: DSAutocompleteT.ItemOption[];\n handleClick: (option: DSAutocompleteT.ItemOption, e: React.MouseEvent<HTMLInputElement>) => void;\n focusOptionIdx: string;\n}\n\nconst StyledSectionWrapper = styled('section')`\n list-style: none;\n min-height: 32px;\n display: grid;\n align-items: center;\n`;\n\n/**\n * Group-label styling aligned with its siblings (PUI-18609 / PUI-15487): b3-strong typography,\n * 32px row (8px+8px padding + b3-strong line-height, mirrored by the wrapper min-height above).\n *\n * This is one of four independent reimplementations of the section/group-label row\n * (ds-menu-items-commons, ds-form-combobox, ds-menu-button being the others). The duplication \u2014\n * and the fact that these styled calls remain slot-less here \u2014 is tracked in\n * KNOWN_INTENTIONAL_DEVIATIONS.md.\n */\nconst StyledSectionLabel = styled(DSTypography)`\n display: flex;\n align-items: center;\n padding: 8px 16px;\n`;\n\nexport const Section = React.memo((props: SectionProps) => {\n const { label, wrapperStyles, focusOptionIdx, innerRef, options, handleClick } = props;\n const id = `${label.replace(/ /g, '')}-section`;\n return (\n <StyledSectionWrapper role=\"group\" aria-labelledby={id} style={wrapperStyles} innerRef={innerRef}>\n <StyledSectionLabel variant=\"b3-strong\" component=\"header\" id={id} role=\"presentation\">\n {label}\n </StyledSectionLabel>\n {options?.map((option) => (\n <DSMenuItemsAction\n as=\"div\"\n key={option.dsId}\n dsId={option.dsId}\n id={option.dsId}\n label={option.label}\n data-testid={AutocompleteDataTestid.OPTION}\n disabled={option.disabled}\n onClick={(e: React.MouseEvent<HTMLInputElement>) => handleClick(option, e)}\n isActive={option.dsId === focusOptionIdx}\n aria-selected=\"false\"\n />\n ))}\n </StyledSectionWrapper>\n );\n});\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;AC0CnB,SACE,KADF;AA1CJ,OAAOA,YAAW;AAClB,SAAS,cAAc;AACvB,SAAS,oBAAoB;AAC7B,SAAS,yBAAyB;AAClC,SAAS,8BAA8B;AAYvC,MAAM,uBAAuB,OAAO,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAgB7C,MAAM,qBAAqB,OAAO,YAAY;AAAA;AAAA;AAAA;AAAA;AAMvC,MAAM,UAAUA,OAAM,KAAK,CAAC,UAAwB;AACzD,QAAM,EAAE,OAAO,eAAe,gBAAgB,UAAU,SAAS,YAAY,IAAI;AACjF,QAAM,KAAK,GAAG,MAAM,QAAQ,MAAM,EAAE,CAAC;AACrC,SACE,qBAAC,wBAAqB,MAAK,SAAQ,mBAAiB,IAAI,OAAO,eAAe,UAC5E;AAAA,wBAAC,sBAAmB,SAAQ,aAAY,WAAU,UAAS,IAAQ,MAAK,gBACrE,iBACH;AAAA,IACC,SAAS,IAAI,CAAC,WACb;AAAA,MAAC;AAAA;AAAA,QACC,IAAG;AAAA,QAEH,MAAM,OAAO;AAAA,QACb,IAAI,OAAO;AAAA,QACX,OAAO,OAAO;AAAA,QACd,eAAa,uBAAuB;AAAA,QACpC,UAAU,OAAO;AAAA,QACjB,SAAS,CAAC,MAA0C,YAAY,QAAQ,CAAC;AAAA,QACzE,UAAU,OAAO,SAAS;AAAA,QAC1B,iBAAc;AAAA;AAAA,MART,OAAO;AAAA,IASd,CACD;AAAA,KACH;AAEJ,CAAC;",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-form-layout-autocomplete",
|
|
3
|
-
"version": "3.70.0-next.
|
|
3
|
+
"version": "3.70.0-next.35",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Form Layout - Autocomplete",
|
|
6
6
|
"files": [
|
|
@@ -38,21 +38,22 @@
|
|
|
38
38
|
"dependencies": {
|
|
39
39
|
"react-virtual": "~2.10.4",
|
|
40
40
|
"uid": "^2.0.2",
|
|
41
|
-
"@elliemae/ds-floating-context": "3.70.0-next.
|
|
42
|
-
"@elliemae/ds-
|
|
43
|
-
"@elliemae/ds-
|
|
44
|
-
"@elliemae/ds-
|
|
45
|
-
"@elliemae/ds-props-helpers": "3.70.0-next.
|
|
46
|
-
"@elliemae/ds-
|
|
41
|
+
"@elliemae/ds-floating-context": "3.70.0-next.35",
|
|
42
|
+
"@elliemae/ds-form-input-text": "3.70.0-next.35",
|
|
43
|
+
"@elliemae/ds-grid": "3.70.0-next.35",
|
|
44
|
+
"@elliemae/ds-menu-items": "3.70.0-next.35",
|
|
45
|
+
"@elliemae/ds-props-helpers": "3.70.0-next.35",
|
|
46
|
+
"@elliemae/ds-typography": "3.70.0-next.35",
|
|
47
|
+
"@elliemae/ds-system": "3.70.0-next.35"
|
|
47
48
|
},
|
|
48
49
|
"devDependencies": {
|
|
49
50
|
"@elliemae/pui-theme": "~2.13.0",
|
|
50
51
|
"jest": "^30.0.0",
|
|
51
52
|
"styled-components": "~5.3.9",
|
|
52
53
|
"styled-system": "^5.1.5",
|
|
53
|
-
"@elliemae/ds-
|
|
54
|
-
"@elliemae/ds-
|
|
55
|
-
"@elliemae/ds-test-utils": "3.70.0-next.
|
|
54
|
+
"@elliemae/ds-form-input-text": "3.70.0-next.35",
|
|
55
|
+
"@elliemae/ds-monorepo-devops": "3.70.0-next.35",
|
|
56
|
+
"@elliemae/ds-test-utils": "3.70.0-next.35"
|
|
56
57
|
},
|
|
57
58
|
"peerDependencies": {
|
|
58
59
|
"@elliemae/pui-theme": "~2.13.0",
|