@elliemae/ds-form-layout-autocomplete 3.16.0-next.2 → 3.16.0-next.4
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/Autocomplete.js +2 -2
- package/dist/cjs/Autocomplete.js.map +2 -2
- package/dist/cjs/config/useAutocomplete.js +3 -3
- package/dist/cjs/config/useAutocomplete.js.map +2 -2
- package/dist/cjs/package.json +7 -0
- package/dist/cjs/react-desc-prop-types.js +5 -5
- package/dist/cjs/react-desc-prop-types.js.map +2 -2
- package/dist/esm/Autocomplete.js +1 -1
- package/dist/esm/Autocomplete.js.map +1 -1
- package/dist/esm/config/useAutocomplete.js +1 -1
- package/dist/esm/config/useAutocomplete.js.map +2 -2
- package/dist/esm/package.json +7 -0
- package/dist/esm/react-desc-prop-types.js +1 -1
- package/dist/esm/react-desc-prop-types.js.map +1 -1
- package/dist/types/Autocomplete.d.ts +1 -1
- package/dist/types/react-desc-prop-types.d.ts +4 -4
- package/package.json +8 -7
package/dist/cjs/Autocomplete.js
CHANGED
|
@@ -30,7 +30,7 @@ __export(Autocomplete_exports, {
|
|
|
30
30
|
module.exports = __toCommonJS(Autocomplete_exports);
|
|
31
31
|
var React = __toESM(require("react"));
|
|
32
32
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
33
|
-
var
|
|
33
|
+
var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
|
|
34
34
|
var import_useAutocomplete = require("./config/useAutocomplete");
|
|
35
35
|
var import_container = require("./parts/container");
|
|
36
36
|
var import_AutocompleteCTX = require("./AutocompleteCTX");
|
|
@@ -42,6 +42,6 @@ const DSAutocomplete = (props) => {
|
|
|
42
42
|
};
|
|
43
43
|
DSAutocomplete.propTypes = import_react_desc_prop_types.propTypes;
|
|
44
44
|
DSAutocomplete.displayName = import_DSAutocompleteDefinitions.DSAutocompleteName;
|
|
45
|
-
const DSAutocompleteWithSchema = (0,
|
|
45
|
+
const DSAutocompleteWithSchema = (0, import_ds_props_helpers.describe)(DSAutocomplete);
|
|
46
46
|
DSAutocompleteWithSchema.propTypes = import_react_desc_prop_types.propTypes;
|
|
47
47
|
//# sourceMappingURL=Autocomplete.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/Autocomplete.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import type { WeakValidationMap } from 'react';\nimport React from 'react';\nimport { describe } from '@elliemae/ds-
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADcjB;AAZN,
|
|
4
|
+
"sourcesContent": ["import type { WeakValidationMap } from 'react';\nimport React from 'react';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { useAutocomplete } from './config/useAutocomplete';\nimport { Container } from './parts/container';\nimport { AutocompleteContext } from './AutocompleteCTX';\nimport type { DSAutocompleteT } from './react-desc-prop-types';\nimport { propTypes } from './react-desc-prop-types';\nimport { DSAutocompleteName } from './DSAutocompleteDefinitions';\n\nconst DSAutocomplete: React.ComponentType<DSAutocompleteT.Props> = (props) => {\n const ctx = useAutocomplete(props);\n return (\n <AutocompleteContext.Provider value={ctx}>\n <Container />\n </AutocompleteContext.Provider>\n );\n};\nDSAutocomplete.propTypes = propTypes as WeakValidationMap<unknown>;\nDSAutocomplete.displayName = DSAutocompleteName;\nconst DSAutocompleteWithSchema = describe(DSAutocomplete);\nDSAutocompleteWithSchema.propTypes = propTypes as WeakValidationMap<unknown>;\n\nexport { DSAutocomplete, DSAutocompleteWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADcjB;AAZN,8BAAyB;AACzB,6BAAgC;AAChC,uBAA0B;AAC1B,6BAAoC;AAEpC,mCAA0B;AAC1B,uCAAmC;AAEnC,MAAM,iBAA6D,CAAC,UAAU;AAC5E,QAAM,UAAM,wCAAgB,KAAK;AACjC,SACE,4CAAC,2CAAoB,UAApB,EAA6B,OAAO,KACnC,sDAAC,8BAAU,GACb;AAEJ;AACA,eAAe,YAAY;AAC3B,eAAe,cAAc;AAC7B,MAAM,+BAA2B,kCAAS,cAAc;AACxD,yBAAyB,YAAY;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -29,7 +29,7 @@ __export(useAutocomplete_exports, {
|
|
|
29
29
|
module.exports = __toCommonJS(useAutocomplete_exports);
|
|
30
30
|
var React = __toESM(require("react"));
|
|
31
31
|
var import_react = require("react");
|
|
32
|
-
var
|
|
32
|
+
var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
|
|
33
33
|
var import_react_virtual = require("react-virtual");
|
|
34
34
|
var import_react_desc_prop_types = require("../react-desc-prop-types");
|
|
35
35
|
var import_AutocompleteCTX = require("../AutocompleteCTX");
|
|
@@ -40,8 +40,8 @@ const useAutocomplete = (props) => {
|
|
|
40
40
|
...import_AutocompleteCTX.defaultProps,
|
|
41
41
|
innerRef: (0, import_react.useRef)(null)
|
|
42
42
|
};
|
|
43
|
-
const propsWithDefault = (0,
|
|
44
|
-
(0,
|
|
43
|
+
const propsWithDefault = (0, import_ds_props_helpers.useMemoMergePropsWithDefault)(props, defaultPropsWithInnerRef);
|
|
44
|
+
(0, import_ds_props_helpers.useValidateTypescriptPropTypes)(propsWithDefault, import_react_desc_prop_types.propTypes, import_DSAutocompleteDefinitions.DSAutocompleteName);
|
|
45
45
|
const [showPopover, setShowPopover] = (0, import_react.useState)(false);
|
|
46
46
|
const [referenceElement, setReferenceElement] = (0, import_react.useState)(null);
|
|
47
47
|
const [focusOptionIdx, setCurrentOption] = (0, import_react.useState)("");
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/config/useAutocomplete.ts", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable max-lines */\n/* eslint-disable import/prefer-default-export */\n/* eslint-disable complexity */\n/* eslint-disable max-statements */\nimport { useMemo, useState, useEffect, useRef, useCallback } from 'react';\nimport { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADIvB,mBAAkE;AAClE,
|
|
4
|
+
"sourcesContent": ["/* eslint-disable max-lines */\n/* eslint-disable import/prefer-default-export */\n/* eslint-disable complexity */\n/* eslint-disable max-statements */\nimport { useMemo, useState, useEffect, useRef, useCallback } from 'react';\nimport { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';\nimport { useVirtual } from 'react-virtual';\nimport type { DSAutocompleteT } from '../react-desc-prop-types';\nimport { propTypes } from '../react-desc-prop-types';\nimport type { DSAutoCompleteInternalsT } from '../sharedTypes';\nimport { defaultProps } from '../AutocompleteCTX';\nimport { getFirstOption } from '../utils/listHelper';\nimport { DSAutocompleteName } from '../DSAutocompleteDefinitions';\n\nexport const useAutocomplete = (props: DSAutocompleteT.Props): DSAutoCompleteInternalsT.AutocompleteContext => {\n const defaultPropsWithInnerRef = {\n ...defaultProps,\n innerRef: useRef(null),\n };\n const propsWithDefault = useMemoMergePropsWithDefault(props, defaultPropsWithInnerRef);\n useValidateTypescriptPropTypes(propsWithDefault, propTypes, DSAutocompleteName);\n const [showPopover, setShowPopover] = useState<boolean>(false);\n const [referenceElement, setReferenceElement] = useState<HTMLElement | null>(null);\n\n const [focusOptionIdx, setCurrentOption] = useState<string>('');\n\n const inputRef = useRef<HTMLInputElement>(null);\n const listRef = useRef<HTMLDivElement>(null);\n\n const { options, filter } = propsWithDefault;\n\n // ===========================================================================\n // Virtualization setup\n // ===========================================================================\n\n const virtualListHelpers: ReturnType<typeof useVirtual> = useVirtual({\n size: options.length,\n parentRef: listRef,\n overscan: 15,\n paddingStart: 0,\n });\n\n // ===========================================================================\n // Scroll into view function\n // ===========================================================================\n const scrollOptionIntoView = useCallback(\n (dsId: string, opts = { align: 'center' }) => {\n virtualListHelpers.scrollToIndex(\n options.findIndex((opt) => opt.dsId === dsId),\n opts,\n );\n },\n [options, virtualListHelpers],\n );\n\n useEffect(() => {\n if (filter.length === 0 || options.length === 0) {\n setShowPopover(false);\n }\n }, [filter, options.length, setShowPopover]);\n\n useEffect(() => {\n setCurrentOption(getFirstOption(options));\n }, [options, showPopover]);\n\n const ctx = useMemo(\n () => ({\n props: { ...propsWithDefault },\n virtualListHelpers,\n showPopover,\n referenceElement,\n inputRef,\n listRef,\n focusOptionIdx,\n setCurrentOption,\n scrollOptionIntoView,\n setReferenceElement,\n setShowPopover,\n }),\n [\n scrollOptionIntoView,\n propsWithDefault,\n virtualListHelpers,\n focusOptionIdx,\n showPopover,\n referenceElement,\n inputRef,\n listRef,\n ],\n );\n\n return ctx;\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADIvB,mBAAkE;AAClE,8BAA6E;AAC7E,2BAA2B;AAE3B,mCAA0B;AAE1B,6BAA6B;AAC7B,wBAA+B;AAC/B,uCAAmC;AAE5B,MAAM,kBAAkB,CAAC,UAA+E;AAC7G,QAAM,2BAA2B;AAAA,IAC/B,GAAG;AAAA,IACH,cAAU,qBAAO,IAAI;AAAA,EACvB;AACA,QAAM,uBAAmB,sDAA6B,OAAO,wBAAwB;AACrF,8DAA+B,kBAAkB,wCAAW,mDAAkB;AAC9E,QAAM,CAAC,aAAa,cAAc,QAAI,uBAAkB,KAAK;AAC7D,QAAM,CAAC,kBAAkB,mBAAmB,QAAI,uBAA6B,IAAI;AAEjF,QAAM,CAAC,gBAAgB,gBAAgB,QAAI,uBAAiB,EAAE;AAE9D,QAAM,eAAW,qBAAyB,IAAI;AAC9C,QAAM,cAAU,qBAAuB,IAAI;AAE3C,QAAM,EAAE,SAAS,OAAO,IAAI;AAM5B,QAAM,yBAAoD,iCAAW;AAAA,IACnE,MAAM,QAAQ;AAAA,IACd,WAAW;AAAA,IACX,UAAU;AAAA,IACV,cAAc;AAAA,EAChB,CAAC;AAKD,QAAM,2BAAuB;AAAA,IAC3B,CAAC,MAAc,OAAO,EAAE,OAAO,SAAS,MAAM;AAC5C,yBAAmB;AAAA,QACjB,QAAQ,UAAU,CAAC,QAAQ,IAAI,SAAS,IAAI;AAAA,QAC5C;AAAA,MACF;AAAA,IACF;AAAA,IACA,CAAC,SAAS,kBAAkB;AAAA,EAC9B;AAEA,8BAAU,MAAM;AACd,QAAI,OAAO,WAAW,KAAK,QAAQ,WAAW,GAAG;AAC/C,qBAAe,KAAK;AAAA,IACtB;AAAA,EACF,GAAG,CAAC,QAAQ,QAAQ,QAAQ,cAAc,CAAC;AAE3C,8BAAU,MAAM;AACd,yBAAiB,kCAAe,OAAO,CAAC;AAAA,EAC1C,GAAG,CAAC,SAAS,WAAW,CAAC;AAEzB,QAAM,UAAM;AAAA,IACV,OAAO;AAAA,MACL,OAAO,EAAE,GAAG,iBAAiB;AAAA,MAC7B;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,SAAO;AACT;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -28,11 +28,11 @@ __export(react_desc_prop_types_exports, {
|
|
|
28
28
|
});
|
|
29
29
|
module.exports = __toCommonJS(react_desc_prop_types_exports);
|
|
30
30
|
var React = __toESM(require("react"));
|
|
31
|
-
var
|
|
31
|
+
var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
|
|
32
32
|
const propTypes = {
|
|
33
|
-
options:
|
|
34
|
-
filter:
|
|
35
|
-
onSelect:
|
|
36
|
-
children:
|
|
33
|
+
options: import_ds_props_helpers.PropTypes.oneOfType([import_ds_props_helpers.PropTypes.array, import_ds_props_helpers.PropTypes.object]).isRequired.description("List of options").defaultValue([]),
|
|
34
|
+
filter: import_ds_props_helpers.PropTypes.string.isRequired.description("String value to filter the options").defaultValue(""),
|
|
35
|
+
onSelect: import_ds_props_helpers.PropTypes.func.isRequired.description("function triggered when an option is selected it will send the options selected").defaultValue(""),
|
|
36
|
+
children: import_ds_props_helpers.PropTypes.node.isRequired.description("React component to apply autocomplete functionality").defaultValue("")
|
|
37
37
|
};
|
|
38
38
|
//# sourceMappingURL=react-desc-prop-types.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/react-desc-prop-types.ts", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable @typescript-eslint/no-unused-vars */\n/* eslint-disable no-unused-vars */\nimport type React from 'react';\nimport { PropTypes } from '@elliemae/ds-
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADGvB,
|
|
4
|
+
"sourcesContent": ["/* eslint-disable @typescript-eslint/no-unused-vars */\n/* eslint-disable no-unused-vars */\nimport type React from 'react';\nimport { PropTypes } from '@elliemae/ds-props-helpers';\n\nexport declare namespace DSAutocompleteT {\n export interface CommonItemOptions {\n dsId: string;\n disabled?: boolean;\n render?: React.ComponentType<unknown>;\n }\n export interface ItemSeparatorOptions extends CommonItemOptions {\n type: 'separator';\n }\n\n export interface ItemSectionOptions extends CommonItemOptions {\n type: 'section';\n label: string;\n }\n\n export interface ItemOption extends CommonItemOptions {\n value: string;\n label: string;\n type: 'option';\n }\n\n export type OptionTypes = ItemOption | ItemSectionOptions | ItemSeparatorOptions;\n\n export type SelectedOptionsT = ItemOption[] | ItemOption | null;\n\n export interface RequiredProps {\n options: OptionTypes[];\n children: React.ReactChild;\n filter: string;\n onSelect: (suggestedValue: string | number, e: React.KeyboardEvent<HTMLInputElement>) => void;\n }\n export interface DefaultProps {\n startPlacementPreference: string;\n placementOrderPreference: string[];\n withoutPortal: boolean;\n zIndex: number;\n }\n\n export interface Props extends Partial<DefaultProps>, RequiredProps {}\n\n export interface InternalProps extends DefaultProps, RequiredProps {}\n}\n\nexport const propTypes = {\n options: PropTypes.oneOfType([PropTypes.array, PropTypes.object])\n .isRequired.description('List of options')\n .defaultValue([]),\n filter: PropTypes.string.isRequired.description('String value to filter the options').defaultValue(''),\n onSelect: PropTypes.func.isRequired\n .description('function triggered when an option is selected it will send the options selected')\n .defaultValue(''),\n children: PropTypes.node.isRequired\n .description('React component to apply autocomplete functionality')\n .defaultValue(''),\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADGvB,8BAA0B;AA6CnB,MAAM,YAAY;AAAA,EACvB,SAAS,kCAAU,UAAU,CAAC,kCAAU,OAAO,kCAAU,MAAM,CAAC,EAC7D,WAAW,YAAY,iBAAiB,EACxC,aAAa,CAAC,CAAC;AAAA,EAClB,QAAQ,kCAAU,OAAO,WAAW,YAAY,oCAAoC,EAAE,aAAa,EAAE;AAAA,EACrG,UAAU,kCAAU,KAAK,WACtB,YAAY,iFAAiF,EAC7F,aAAa,EAAE;AAAA,EAClB,UAAU,kCAAU,KAAK,WACtB,YAAY,qDAAqD,EACjE,aAAa,EAAE;AACpB;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/Autocomplete.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import { jsx } from "react/jsx-runtime";
|
|
3
|
-
import { describe } from "@elliemae/ds-
|
|
3
|
+
import { describe } from "@elliemae/ds-props-helpers";
|
|
4
4
|
import { useAutocomplete } from "./config/useAutocomplete";
|
|
5
5
|
import { Container } from "./parts/container";
|
|
6
6
|
import { AutocompleteContext } from "./AutocompleteCTX";
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/Autocomplete.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { WeakValidationMap } from 'react';\nimport React from 'react';\nimport { describe } from '@elliemae/ds-
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { WeakValidationMap } from 'react';\nimport React from 'react';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { useAutocomplete } from './config/useAutocomplete';\nimport { Container } from './parts/container';\nimport { AutocompleteContext } from './AutocompleteCTX';\nimport type { DSAutocompleteT } from './react-desc-prop-types';\nimport { propTypes } from './react-desc-prop-types';\nimport { DSAutocompleteName } from './DSAutocompleteDefinitions';\n\nconst DSAutocomplete: React.ComponentType<DSAutocompleteT.Props> = (props) => {\n const ctx = useAutocomplete(props);\n return (\n <AutocompleteContext.Provider value={ctx}>\n <Container />\n </AutocompleteContext.Provider>\n );\n};\nDSAutocomplete.propTypes = propTypes as WeakValidationMap<unknown>;\nDSAutocomplete.displayName = DSAutocompleteName;\nconst DSAutocompleteWithSchema = describe(DSAutocomplete);\nDSAutocompleteWithSchema.propTypes = propTypes as WeakValidationMap<unknown>;\n\nexport { DSAutocomplete, DSAutocompleteWithSchema };\n"],
|
|
5
5
|
"mappings": "AAAA,YAAY,WAAW;ACcjB;AAZN,SAAS,gBAAgB;AACzB,SAAS,uBAAuB;AAChC,SAAS,iBAAiB;AAC1B,SAAS,2BAA2B;AAEpC,SAAS,iBAAiB;AAC1B,SAAS,0BAA0B;AAEnC,MAAM,iBAA6D,CAAC,UAAU;AAC5E,QAAM,MAAM,gBAAgB,KAAK;AACjC,SACE,oBAAC,oBAAoB,UAApB,EAA6B,OAAO,KACnC,8BAAC,aAAU,GACb;AAEJ;AACA,eAAe,YAAY;AAC3B,eAAe,cAAc;AAC7B,MAAM,2BAA2B,SAAS,cAAc;AACxD,yBAAyB,YAAY;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import { useMemo, useState, useEffect, useRef, useCallback } from "react";
|
|
3
|
-
import { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from "@elliemae/ds-
|
|
3
|
+
import { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from "@elliemae/ds-props-helpers";
|
|
4
4
|
import { useVirtual } from "react-virtual";
|
|
5
5
|
import { propTypes } from "../react-desc-prop-types";
|
|
6
6
|
import { defaultProps } from "../AutocompleteCTX";
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/config/useAutocomplete.ts"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\n/* eslint-disable import/prefer-default-export */\n/* eslint-disable complexity */\n/* eslint-disable max-statements */\nimport { useMemo, useState, useEffect, useRef, useCallback } from 'react';\nimport { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACIvB,SAAS,SAAS,UAAU,WAAW,QAAQ,mBAAmB;AAClE,SAAS,8BAA8B,sCAAsC;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\n/* eslint-disable import/prefer-default-export */\n/* eslint-disable complexity */\n/* eslint-disable max-statements */\nimport { useMemo, useState, useEffect, useRef, useCallback } from 'react';\nimport { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';\nimport { useVirtual } from 'react-virtual';\nimport type { DSAutocompleteT } from '../react-desc-prop-types';\nimport { propTypes } from '../react-desc-prop-types';\nimport type { DSAutoCompleteInternalsT } from '../sharedTypes';\nimport { defaultProps } from '../AutocompleteCTX';\nimport { getFirstOption } from '../utils/listHelper';\nimport { DSAutocompleteName } from '../DSAutocompleteDefinitions';\n\nexport const useAutocomplete = (props: DSAutocompleteT.Props): DSAutoCompleteInternalsT.AutocompleteContext => {\n const defaultPropsWithInnerRef = {\n ...defaultProps,\n innerRef: useRef(null),\n };\n const propsWithDefault = useMemoMergePropsWithDefault(props, defaultPropsWithInnerRef);\n useValidateTypescriptPropTypes(propsWithDefault, propTypes, DSAutocompleteName);\n const [showPopover, setShowPopover] = useState<boolean>(false);\n const [referenceElement, setReferenceElement] = useState<HTMLElement | null>(null);\n\n const [focusOptionIdx, setCurrentOption] = useState<string>('');\n\n const inputRef = useRef<HTMLInputElement>(null);\n const listRef = useRef<HTMLDivElement>(null);\n\n const { options, filter } = propsWithDefault;\n\n // ===========================================================================\n // Virtualization setup\n // ===========================================================================\n\n const virtualListHelpers: ReturnType<typeof useVirtual> = useVirtual({\n size: options.length,\n parentRef: listRef,\n overscan: 15,\n paddingStart: 0,\n });\n\n // ===========================================================================\n // Scroll into view function\n // ===========================================================================\n const scrollOptionIntoView = useCallback(\n (dsId: string, opts = { align: 'center' }) => {\n virtualListHelpers.scrollToIndex(\n options.findIndex((opt) => opt.dsId === dsId),\n opts,\n );\n },\n [options, virtualListHelpers],\n );\n\n useEffect(() => {\n if (filter.length === 0 || options.length === 0) {\n setShowPopover(false);\n }\n }, [filter, options.length, setShowPopover]);\n\n useEffect(() => {\n setCurrentOption(getFirstOption(options));\n }, [options, showPopover]);\n\n const ctx = useMemo(\n () => ({\n props: { ...propsWithDefault },\n virtualListHelpers,\n showPopover,\n referenceElement,\n inputRef,\n listRef,\n focusOptionIdx,\n setCurrentOption,\n scrollOptionIntoView,\n setReferenceElement,\n setShowPopover,\n }),\n [\n scrollOptionIntoView,\n propsWithDefault,\n virtualListHelpers,\n focusOptionIdx,\n showPopover,\n referenceElement,\n inputRef,\n listRef,\n ],\n );\n\n return ctx;\n};\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACIvB,SAAS,SAAS,UAAU,WAAW,QAAQ,mBAAmB;AAClE,SAAS,8BAA8B,sCAAsC;AAC7E,SAAS,kBAAkB;AAE3B,SAAS,iBAAiB;AAE1B,SAAS,oBAAoB;AAC7B,SAAS,sBAAsB;AAC/B,SAAS,0BAA0B;AAE5B,MAAM,kBAAkB,CAAC,UAA+E;AAC7G,QAAM,2BAA2B;AAAA,IAC/B,GAAG;AAAA,IACH,UAAU,OAAO,IAAI;AAAA,EACvB;AACA,QAAM,mBAAmB,6BAA6B,OAAO,wBAAwB;AACrF,iCAA+B,kBAAkB,WAAW,kBAAkB;AAC9E,QAAM,CAAC,aAAa,cAAc,IAAI,SAAkB,KAAK;AAC7D,QAAM,CAAC,kBAAkB,mBAAmB,IAAI,SAA6B,IAAI;AAEjF,QAAM,CAAC,gBAAgB,gBAAgB,IAAI,SAAiB,EAAE;AAE9D,QAAM,WAAW,OAAyB,IAAI;AAC9C,QAAM,UAAU,OAAuB,IAAI;AAE3C,QAAM,EAAE,SAAS,OAAO,IAAI;AAM5B,QAAM,qBAAoD,WAAW;AAAA,IACnE,MAAM,QAAQ;AAAA,IACd,WAAW;AAAA,IACX,UAAU;AAAA,IACV,cAAc;AAAA,EAChB,CAAC;AAKD,QAAM,uBAAuB;AAAA,IAC3B,CAAC,MAAc,OAAO,EAAE,OAAO,SAAS,MAAM;AAC5C,yBAAmB;AAAA,QACjB,QAAQ,UAAU,CAAC,QAAQ,IAAI,SAAS,IAAI;AAAA,QAC5C;AAAA,MACF;AAAA,IACF;AAAA,IACA,CAAC,SAAS,kBAAkB;AAAA,EAC9B;AAEA,YAAU,MAAM;AACd,QAAI,OAAO,WAAW,KAAK,QAAQ,WAAW,GAAG;AAC/C,qBAAe,KAAK;AAAA,IACtB;AAAA,EACF,GAAG,CAAC,QAAQ,QAAQ,QAAQ,cAAc,CAAC;AAE3C,YAAU,MAAM;AACd,qBAAiB,eAAe,OAAO,CAAC;AAAA,EAC1C,GAAG,CAAC,SAAS,WAAW,CAAC;AAEzB,QAAM,MAAM;AAAA,IACV,OAAO;AAAA,MACL,OAAO,EAAE,GAAG,iBAAiB;AAAA,MAC7B;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,SAAO;AACT;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
-
import { PropTypes } from "@elliemae/ds-
|
|
2
|
+
import { PropTypes } from "@elliemae/ds-props-helpers";
|
|
3
3
|
const propTypes = {
|
|
4
4
|
options: PropTypes.oneOfType([PropTypes.array, PropTypes.object]).isRequired.description("List of options").defaultValue([]),
|
|
5
5
|
filter: PropTypes.string.isRequired.description("String value to filter the options").defaultValue(""),
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/react-desc-prop-types.ts"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unused-vars */\n/* eslint-disable no-unused-vars */\nimport type React from 'react';\nimport { PropTypes } from '@elliemae/ds-
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unused-vars */\n/* eslint-disable no-unused-vars */\nimport type React from 'react';\nimport { PropTypes } from '@elliemae/ds-props-helpers';\n\nexport declare namespace DSAutocompleteT {\n export interface CommonItemOptions {\n dsId: string;\n disabled?: boolean;\n render?: React.ComponentType<unknown>;\n }\n export interface ItemSeparatorOptions extends CommonItemOptions {\n type: 'separator';\n }\n\n export interface ItemSectionOptions extends CommonItemOptions {\n type: 'section';\n label: string;\n }\n\n export interface ItemOption extends CommonItemOptions {\n value: string;\n label: string;\n type: 'option';\n }\n\n export type OptionTypes = ItemOption | ItemSectionOptions | ItemSeparatorOptions;\n\n export type SelectedOptionsT = ItemOption[] | ItemOption | null;\n\n export interface RequiredProps {\n options: OptionTypes[];\n children: React.ReactChild;\n filter: string;\n onSelect: (suggestedValue: string | number, e: React.KeyboardEvent<HTMLInputElement>) => void;\n }\n export interface DefaultProps {\n startPlacementPreference: string;\n placementOrderPreference: string[];\n withoutPortal: boolean;\n zIndex: number;\n }\n\n export interface Props extends Partial<DefaultProps>, RequiredProps {}\n\n export interface InternalProps extends DefaultProps, RequiredProps {}\n}\n\nexport const propTypes = {\n options: PropTypes.oneOfType([PropTypes.array, PropTypes.object])\n .isRequired.description('List of options')\n .defaultValue([]),\n filter: PropTypes.string.isRequired.description('String value to filter the options').defaultValue(''),\n onSelect: PropTypes.func.isRequired\n .description('function triggered when an option is selected it will send the options selected')\n .defaultValue(''),\n children: PropTypes.node.isRequired\n .description('React component to apply autocomplete functionality')\n .defaultValue(''),\n};\n"],
|
|
5
5
|
"mappings": "AAAA,YAAY,WAAW;ACGvB,SAAS,iBAAiB;AA6CnB,MAAM,YAAY;AAAA,EACvB,SAAS,UAAU,UAAU,CAAC,UAAU,OAAO,UAAU,MAAM,CAAC,EAC7D,WAAW,YAAY,iBAAiB,EACxC,aAAa,CAAC,CAAC;AAAA,EAClB,QAAQ,UAAU,OAAO,WAAW,YAAY,oCAAoC,EAAE,aAAa,EAAE;AAAA,EACrG,UAAU,UAAU,KAAK,WACtB,YAAY,iFAAiF,EAC7F,aAAa,EAAE;AAAA,EAClB,UAAU,UAAU,KAAK,WACtB,YAAY,qDAAqD,EACjE,aAAa,EAAE;AACpB;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import type { DSAutocompleteT } from './react-desc-prop-types';
|
|
3
3
|
declare const DSAutocomplete: React.ComponentType<DSAutocompleteT.Props>;
|
|
4
|
-
declare const DSAutocompleteWithSchema: import("@elliemae/ds-
|
|
4
|
+
declare const DSAutocompleteWithSchema: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").DocumentedReactComponent<DSAutocompleteT.Props>;
|
|
5
5
|
export { DSAutocomplete, DSAutocompleteWithSchema };
|
|
@@ -37,8 +37,8 @@ export declare namespace DSAutocompleteT {
|
|
|
37
37
|
}
|
|
38
38
|
}
|
|
39
39
|
export declare const propTypes: {
|
|
40
|
-
options: import("@elliemae/ds-
|
|
41
|
-
filter: import("@elliemae/ds-
|
|
42
|
-
onSelect: import("@elliemae/ds-
|
|
43
|
-
children: import("@elliemae/ds-
|
|
40
|
+
options: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
|
|
41
|
+
filter: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
|
|
42
|
+
onSelect: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
|
|
43
|
+
children: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
|
|
44
44
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-form-layout-autocomplete",
|
|
3
|
-
"version": "3.16.0-next.
|
|
3
|
+
"version": "3.16.0-next.4",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Form Layout - Autocomplete",
|
|
6
6
|
"files": [
|
|
@@ -37,10 +37,11 @@
|
|
|
37
37
|
"dependencies": {
|
|
38
38
|
"react-virtual": "~2.10.4",
|
|
39
39
|
"styled-components": "~5.3.6",
|
|
40
|
-
"@elliemae/ds-menu-items": "3.16.0-next.
|
|
41
|
-
"@elliemae/ds-popperjs": "3.16.0-next.
|
|
42
|
-
"@elliemae/ds-
|
|
43
|
-
"@elliemae/ds-
|
|
40
|
+
"@elliemae/ds-menu-items": "3.16.0-next.4",
|
|
41
|
+
"@elliemae/ds-popperjs": "3.16.0-next.4",
|
|
42
|
+
"@elliemae/ds-props-helpers": "3.16.0-next.4",
|
|
43
|
+
"@elliemae/ds-system": "3.16.0-next.4",
|
|
44
|
+
"@elliemae/ds-utilities": "3.16.0-next.4"
|
|
44
45
|
},
|
|
45
46
|
"devDependencies": {
|
|
46
47
|
"@elliemae/pui-theme": "~2.6.0",
|
|
@@ -50,7 +51,7 @@
|
|
|
50
51
|
"@testing-library/user-event": "~13.5.0",
|
|
51
52
|
"styled-components": "~5.3.6",
|
|
52
53
|
"styled-system": "~5.1.5",
|
|
53
|
-
"@elliemae/ds-form-input-text": "3.16.0-next.
|
|
54
|
+
"@elliemae/ds-form-input-text": "3.16.0-next.4"
|
|
54
55
|
},
|
|
55
56
|
"peerDependencies": {
|
|
56
57
|
"@elliemae/pui-theme": "~2.6.0",
|
|
@@ -70,7 +71,7 @@
|
|
|
70
71
|
"eslint:fix": "eslint --ext='.js,.jsx,.test.js,.ts,.tsx' --fix --config='../../.eslintrc.js' src/",
|
|
71
72
|
"dts": "node ../../scripts/dts.mjs",
|
|
72
73
|
"build": "cross-env NODE_ENV=production node ../../scripts/build/build.mjs",
|
|
73
|
-
"dev:build": "pnpm --filter {.}... build
|
|
74
|
+
"dev:build": "pnpm --filter {.}... build",
|
|
74
75
|
"dev:install": "pnpm --filter {.}... i --no-lockfile && pnpm run dev:build",
|
|
75
76
|
"checkDeps": "npx -yes ../ds-codemods check-missing-packages --projectFolderPath=\"./\" --ignorePackagesGlobPattern=\"\" --ignoreFilesGlobPattern=\"**/test-ables/*,**/tests/*\""
|
|
76
77
|
}
|