@pixum/combobox 5.10.9 → 5.10.10
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/package.json +2 -2
- package/lib/ComboBox.test.d.ts +0 -1
- package/lib/ComboBox.test.js +0 -32
- package/lib/ComboBox.test.js.map +0 -1
- package/lib/ComboboxOptions/Options.d.ts +0 -11
- package/lib/ComboboxOptions/Options.js +0 -19
- package/lib/ComboboxOptions/Options.js.map +0 -1
- package/lib/ComboboxOptions/OptionsGroup.d.ts +0 -12
- package/lib/ComboboxOptions/OptionsGroup.js +0 -8
- package/lib/ComboboxOptions/OptionsGroup.js.map +0 -1
- package/lib/ComboboxOptions/index.d.ts +0 -4
- package/lib/ComboboxOptions/index.js +0 -19
- package/lib/ComboboxOptions/index.js.map +0 -1
- package/lib/helper/calculateListMaxHeight.d.ts +0 -1
- package/lib/helper/calculateListMaxHeight.js +0 -8
- package/lib/helper/calculateListMaxHeight.js.map +0 -1
- package/lib/helper/scrollOptionToViewport.d.ts +0 -1
- package/lib/helper/scrollOptionToViewport.js +0 -19
- package/lib/helper/scrollOptionToViewport.js.map +0 -1
- package/lib/helper/useIsDesktopScreenWidth.d.ts +0 -2
- package/lib/helper/useIsDesktopScreenWidth.js +0 -20
- package/lib/helper/useIsDesktopScreenWidth.js.map +0 -1
- package/lib/partials/ComboBoxOptionsWithGrouping.d.ts +0 -26
- package/lib/partials/ComboBoxOptionsWithGrouping.js +0 -14
- package/lib/partials/ComboBoxOptionsWithGrouping.js.map +0 -1
- package/lib/styles.css +0 -1
- package/lib/utils/calculateListMaxHeight.d.ts +0 -7
- package/lib/utils/calculateListMaxHeight.js +0 -14
- package/lib/utils/calculateListMaxHeight.js.map +0 -1
- package/lib/utils/scrollOptionToViewport.d.ts +0 -7
- package/lib/utils/scrollOptionToViewport.js +0 -26
- package/lib/utils/scrollOptionToViewport.js.map +0 -1
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pixum/combobox",
|
|
3
|
-
"version": "5.10.
|
|
3
|
+
"version": "5.10.10",
|
|
4
4
|
"main": "lib/index.js",
|
|
5
5
|
"module": "lib/index.js",
|
|
6
6
|
"license": "UNLICENSED",
|
|
@@ -18,5 +18,5 @@
|
|
|
18
18
|
"sideEffects": [
|
|
19
19
|
"*.css"
|
|
20
20
|
],
|
|
21
|
-
"gitHead": "
|
|
21
|
+
"gitHead": "dae2c956a38bdc5d82f53b79f99ab148ab0a6420"
|
|
22
22
|
}
|
package/lib/ComboBox.test.d.ts
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
package/lib/ComboBox.test.js
DELETED
|
@@ -1,32 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import { fireEvent, render } from '@testing-library/react';
|
|
3
|
-
import { ComboBox } from './ComboBox';
|
|
4
|
-
// jsdom sets window.innerWidth to 0, so useIsDesktopScreenWidth returns false.
|
|
5
|
-
// When !isDesktop, showSelectField is always true — SelectInput always renders.
|
|
6
|
-
const baseProps = {
|
|
7
|
-
isOpen: false,
|
|
8
|
-
setIsOpen: jest.fn(),
|
|
9
|
-
options: [],
|
|
10
|
-
label: 'Test',
|
|
11
|
-
};
|
|
12
|
-
describe('ComboBox disabled', () => {
|
|
13
|
-
it('does not fire onClick when disabled', () => {
|
|
14
|
-
const onClick = jest.fn();
|
|
15
|
-
const { container } = render(_jsx(ComboBox, Object.assign({}, baseProps, { disabled: true, onClick: onClick })));
|
|
16
|
-
fireEvent.click(container.querySelector('.input-inner-container'));
|
|
17
|
-
expect(onClick).not.toHaveBeenCalled();
|
|
18
|
-
});
|
|
19
|
-
it('passes disabled to the trigger input', () => {
|
|
20
|
-
const { container } = render(_jsx(ComboBox, Object.assign({}, baseProps, { disabled: true, value: "some option" })));
|
|
21
|
-
expect(container.querySelector('input')).toBeDisabled();
|
|
22
|
-
});
|
|
23
|
-
});
|
|
24
|
-
describe('ComboBox enabled', () => {
|
|
25
|
-
it('fires onClick when not disabled', () => {
|
|
26
|
-
const onClick = jest.fn();
|
|
27
|
-
const { container } = render(_jsx(ComboBox, Object.assign({}, baseProps, { onClick: onClick })));
|
|
28
|
-
fireEvent.click(container.querySelector('.input-inner-container'));
|
|
29
|
-
expect(onClick).toHaveBeenCalledTimes(1);
|
|
30
|
-
});
|
|
31
|
-
});
|
|
32
|
-
//# sourceMappingURL=ComboBox.test.js.map
|
package/lib/ComboBox.test.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"ComboBox.test.js","sourceRoot":"","sources":["../src/ComboBox.test.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAA;AAC1D,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AAGrC,+EAA+E;AAC/E,gFAAgF;AAEhF,MAAM,SAAS,GAAG;IAChB,MAAM,EAAE,KAAK;IACb,SAAS,EAAE,IAAI,CAAC,EAAE,EAAE;IACpB,OAAO,EAAE,EAA+B;IACxC,KAAK,EAAE,MAAM;CACd,CAAA;AAED,QAAQ,CAAC,mBAAmB,EAAE,GAAG,EAAE;IACjC,EAAE,CAAC,qCAAqC,EAAE,GAAG,EAAE;QAC7C,MAAM,OAAO,GAAG,IAAI,CAAC,EAAE,EAAE,CAAA;QACzB,MAAM,EAAE,SAAS,EAAE,GAAG,MAAM,CAC1B,KAAC,QAAQ,oBAAK,SAAS,IAAE,QAAQ,QAAC,OAAO,EAAE,OAAO,IAAI,CACvD,CAAA;QACD,SAAS,CAAC,KAAK,CAAC,SAAS,CAAC,aAAa,CAAC,wBAAwB,CAAE,CAAC,CAAA;QACnE,MAAM,CAAC,OAAO,CAAC,CAAC,GAAG,CAAC,gBAAgB,EAAE,CAAA;IACxC,CAAC,CAAC,CAAA;IAEF,EAAE,CAAC,sCAAsC,EAAE,GAAG,EAAE;QAC9C,MAAM,EAAE,SAAS,EAAE,GAAG,MAAM,CAC1B,KAAC,QAAQ,oBAAK,SAAS,IAAE,QAAQ,QAAC,KAAK,EAAC,aAAa,IAAG,CACzD,CAAA;QACD,MAAM,CAAC,SAAS,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,CAAC,YAAY,EAAE,CAAA;IACzD,CAAC,CAAC,CAAA;AACJ,CAAC,CAAC,CAAA;AAEF,QAAQ,CAAC,kBAAkB,EAAE,GAAG,EAAE;IAChC,EAAE,CAAC,iCAAiC,EAAE,GAAG,EAAE;QACzC,MAAM,OAAO,GAAG,IAAI,CAAC,EAAE,EAAE,CAAA;QACzB,MAAM,EAAE,SAAS,EAAE,GAAG,MAAM,CAC1B,KAAC,QAAQ,oBAAK,SAAS,IAAE,OAAO,EAAE,OAAO,IAAI,CAC9C,CAAA;QACD,SAAS,CAAC,KAAK,CAAC,SAAS,CAAC,aAAa,CAAC,wBAAwB,CAAE,CAAC,CAAA;QACnE,MAAM,CAAC,OAAO,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,CAAA;IAC1C,CAAC,CAAC,CAAA;AACJ,CAAC,CAAC,CAAA"}
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
import { LeadingType } from '@pixum/menu-item';
|
|
2
|
-
import React from 'react';
|
|
3
|
-
import { ComboBoxOptionProps } from '../types';
|
|
4
|
-
interface OptionsProps {
|
|
5
|
-
items: ComboBoxOptionProps[];
|
|
6
|
-
selectedOption?: string;
|
|
7
|
-
onClick?: (value: string) => void;
|
|
8
|
-
leadingType?: LeadingType;
|
|
9
|
-
}
|
|
10
|
-
declare const Options: React.FC<OptionsProps>;
|
|
11
|
-
export default Options;
|
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
import MenuItem from '@pixum/menu-item';
|
|
2
|
-
import clsx from 'clsx';
|
|
3
|
-
import React from 'react';
|
|
4
|
-
const Options = ({ items, selectedOption, onClick, leadingType, }) => (React.createElement(React.Fragment, null, items.map((item) => {
|
|
5
|
-
var _a;
|
|
6
|
-
const itemText = item.text;
|
|
7
|
-
const isSelected = selectedOption === ((item === null || item === void 0 ? void 0 : item.label) || itemText);
|
|
8
|
-
return (React.createElement("div", { key: `combobox-item-wrapper-${itemText}`, className: "combobox__option-wrapper", role: "button", tabIndex: 0, onPointerDown: (e) => e.stopPropagation(), onTouchStart: (e) => e.stopPropagation(), onMouseDown: (e) => e.stopPropagation(), onClickCapture: (e) => {
|
|
9
|
-
e.stopPropagation();
|
|
10
|
-
onClick === null || onClick === void 0 ? void 0 : onClick(itemText);
|
|
11
|
-
} },
|
|
12
|
-
React.createElement(MenuItem, { tabIndex: -1, className: clsx(isSelected && 'selected'), onMouseEnter: item.onMouseEnter, leadingProps: leadingType
|
|
13
|
-
? { name: itemText, type: leadingType }
|
|
14
|
-
: undefined, selected: selectedOption === itemText, text: itemText, subtext: item.subtext, subItemProps: {
|
|
15
|
-
text: (_a = item.subItemProps) === null || _a === void 0 ? void 0 : _a.text,
|
|
16
|
-
} })));
|
|
17
|
-
})));
|
|
18
|
-
export default Options;
|
|
19
|
-
//# sourceMappingURL=Options.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Options.js","sourceRoot":"","sources":["../../src/ComboboxOptions/Options.tsx"],"names":[],"mappings":"AAAA,OAAO,QAAwC,MAAM,kBAAkB,CAAA;AACvE,OAAO,IAAI,MAAM,MAAM,CAAA;AACvB,OAAO,KAAK,MAAM,OAAO,CAAA;AAUzB,MAAM,OAAO,GAA2B,CAAC,EACvC,KAAK,EACL,cAAc,EACd,OAAO,EACP,WAAW,GACZ,EAAE,EAAE,CAAC,CACJ,0CACG,KAAK,CAAC,GAAG,CAAC,CAAC,IAAmB,EAAE,EAAE;;IACjC,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAA;IAC1B,MAAM,UAAU,GAAG,cAAc,KAAK,CAAC,CAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,KAAK,KAAI,QAAQ,CAAC,CAAA;IAE/D,OAAO,CACL,6BACE,GAAG,EAAE,yBAAyB,QAAQ,EAAE,EACxC,SAAS,EAAC,0BAA0B,EACpC,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,CAAC,EACX,aAAa,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,eAAe,EAAE,EACzC,YAAY,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,eAAe,EAAE,EACxC,WAAW,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,eAAe,EAAE,EACvC,cAAc,EAAE,CAAC,CAAC,EAAE,EAAE;YACpB,CAAC,CAAC,eAAe,EAAE,CAAA;YACnB,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAG,QAAQ,CAAC,CAAA;QACrB,CAAC;QAED,oBAAC,QAAQ,IACP,QAAQ,EAAE,CAAC,CAAC,EACZ,SAAS,EAAE,IAAI,CAAC,UAAU,IAAI,UAAU,CAAC,EACzC,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,YAAY,EACV,WAAW;gBACT,CAAC,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,WAAW,EAAE;gBACvC,CAAC,CAAC,SAAS,EAEf,QAAQ,EAAE,cAAc,KAAK,QAAQ,EACrC,IAAI,EAAE,QAAQ,EACd,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,YAAY,EAAE;gBACZ,IAAI,EAAE,MAAA,IAAI,CAAC,YAAY,0CAAE,IAAI;aAC9B,GACD,CACE,CACP,CAAA;AACH,CAAC,CAAC,CACD,CACJ,CAAA;AAED,eAAe,OAAO,CAAA"}
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
import { LeadingType } from '@pixum/menu-item';
|
|
2
|
-
import React from 'react';
|
|
3
|
-
import { ComboBoxOptionProps } from '../types';
|
|
4
|
-
interface OptionsGroupProps {
|
|
5
|
-
group: string;
|
|
6
|
-
items: ComboBoxOptionProps[];
|
|
7
|
-
selectedOption?: string;
|
|
8
|
-
onClick?: (value: string) => void;
|
|
9
|
-
leadingType?: LeadingType;
|
|
10
|
-
}
|
|
11
|
-
declare const OptionsGroup: React.FC<OptionsGroupProps>;
|
|
12
|
-
export default OptionsGroup;
|
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
import Text, { TextVariant } from '@pixum/text';
|
|
2
|
-
import React from 'react';
|
|
3
|
-
import Options from './Options';
|
|
4
|
-
const OptionsGroup = ({ group, items, selectedOption, onClick, leadingType, }) => (React.createElement("div", { className: "combobox__options-group", key: `combobox__options-group-${group}` },
|
|
5
|
-
React.createElement(Text, { variant: TextVariant.HEADLINE, className: "combobox__sticky-header" }, group),
|
|
6
|
-
React.createElement(Options, { items: items, selectedOption: selectedOption, onClick: onClick, leadingType: leadingType })));
|
|
7
|
-
export default OptionsGroup;
|
|
8
|
-
//# sourceMappingURL=OptionsGroup.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"OptionsGroup.js","sourceRoot":"","sources":["../../src/ComboboxOptions/OptionsGroup.tsx"],"names":[],"mappings":"AACA,OAAO,IAAI,EAAE,EAAE,WAAW,EAAE,MAAM,aAAa,CAAA;AAC/C,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,OAAO,MAAM,WAAW,CAAA;AAW/B,MAAM,YAAY,GAAgC,CAAC,EACjD,KAAK,EACL,KAAK,EACL,cAAc,EACd,OAAO,EACP,WAAW,GACZ,EAAE,EAAE,CAAC,CACJ,6BACE,SAAS,EAAC,yBAAyB,EACnC,GAAG,EAAE,2BAA2B,KAAK,EAAE;IAEvC,oBAAC,IAAI,IAAC,OAAO,EAAE,WAAW,CAAC,QAAQ,EAAE,SAAS,EAAC,yBAAyB,IACrE,KAAK,CACD;IACP,oBAAC,OAAO,IACN,KAAK,EAAE,KAAK,EACZ,cAAc,EAAE,cAAc,EAC9B,OAAO,EAAE,OAAO,EAChB,WAAW,EAAE,WAAW,GACxB,CACE,CACP,CAAA;AAED,eAAe,YAAY,CAAA"}
|
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
import React, { useEffect } from 'react';
|
|
2
|
-
import Menu from '@pixum/menu';
|
|
3
|
-
import { scrollOptionToViewport } from '../helper/scrollOptionToViewport';
|
|
4
|
-
import OptionsGroup from './OptionsGroup';
|
|
5
|
-
import Options from './Options';
|
|
6
|
-
import useIsDesktopScreenWidth from '../helper/useIsDesktopScreenWidth';
|
|
7
|
-
const ComboBoxOptions = ({ options, onClick, selectedOption, leadingType, optionDetails, }) => {
|
|
8
|
-
const isDesktop = useIsDesktopScreenWidth();
|
|
9
|
-
const optionsWithoutGroup = Array.isArray(options);
|
|
10
|
-
const optionsWithGroup = Object.entries(options);
|
|
11
|
-
useEffect(() => {
|
|
12
|
-
scrollOptionToViewport(isDesktop);
|
|
13
|
-
}, [isDesktop]);
|
|
14
|
-
return (React.createElement(Menu, { className: "combobox__options scrollable", "data-tappable": "true" },
|
|
15
|
-
optionsWithoutGroup ? (React.createElement(Options, { items: options, selectedOption: selectedOption, onClick: onClick, leadingType: leadingType })) : (React.createElement(React.Fragment, null, optionsWithGroup.map(([group, items]) => (React.createElement(OptionsGroup, { group: group, items: items, selectedOption: selectedOption, onClick: onClick, leadingType: leadingType }))))),
|
|
16
|
-
optionDetails && (React.createElement("div", { className: "combobox__option-details text--caption" }, optionDetails))));
|
|
17
|
-
};
|
|
18
|
-
export default ComboBoxOptions;
|
|
19
|
-
//# sourceMappingURL=index.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/ComboboxOptions/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACxC,OAAO,IAAI,MAAM,aAAa,CAAA;AAC9B,OAAO,EAAE,sBAAsB,EAAE,MAAM,kCAAkC,CAAA;AAEzE,OAAO,YAAY,MAAM,gBAAgB,CAAA;AACzC,OAAO,OAAO,MAAM,WAAW,CAAA;AAC/B,OAAO,uBAAuB,MAAM,mCAAmC,CAAA;AAEvE,MAAM,eAAe,GAAmC,CAAC,EACvD,OAAO,EACP,OAAO,EACP,cAAc,EACd,WAAW,EACX,aAAa,GACd,EAAE,EAAE;IACH,MAAM,SAAS,GAAG,uBAAuB,EAAE,CAAA;IAC3C,MAAM,mBAAmB,GAAG,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,CAAA;IAClD,MAAM,gBAAgB,GAAG,MAAM,CAAC,OAAO,CAAC,OAAO,CAAC,CAAA;IAEhD,SAAS,CAAC,GAAG,EAAE;QACb,sBAAsB,CAAC,SAAS,CAAC,CAAA;IACnC,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAA;IAEf,OAAO,CACL,oBAAC,IAAI,IACH,SAAS,EAAC,8BAA8B,mBAC1B,MAAM;QAEnB,mBAAmB,CAAC,CAAC,CAAC,CACrB,oBAAC,OAAO,IACN,KAAK,EAAE,OAAO,EACd,cAAc,EAAE,cAAc,EAC9B,OAAO,EAAE,OAAO,EAChB,WAAW,EAAE,WAAW,GACxB,CACH,CAAC,CAAC,CAAC,CACF,0CACG,gBAAgB,CAAC,GAAG,CAAC,CAAC,CAAC,KAAK,EAAE,KAAK,CAAC,EAAE,EAAE,CAAC,CACxC,oBAAC,YAAY,IACX,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,KAAK,EACZ,cAAc,EAAE,cAAc,EAC9B,OAAO,EAAE,OAAO,EAChB,WAAW,EAAE,WAAW,GACxB,CACH,CAAC,CACD,CACJ;QACA,aAAa,IAAI,CAChB,6BAAK,SAAS,EAAC,wCAAwC,IACpD,aAAa,CACV,CACP,CACI,CACR,CAAA;AACH,CAAC,CAAA;AAED,eAAe,eAAe,CAAA"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export declare const calculateListMaxHeight: () => number;
|
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
export const calculateListMaxHeight = () => {
|
|
2
|
-
const windowHeight = window.innerHeight;
|
|
3
|
-
const headerHeight = 50;
|
|
4
|
-
const inputFieldHeight = 35;
|
|
5
|
-
const maxListHeight = windowHeight - headerHeight - inputFieldHeight;
|
|
6
|
-
return maxListHeight;
|
|
7
|
-
};
|
|
8
|
-
//# sourceMappingURL=calculateListMaxHeight.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"calculateListMaxHeight.js","sourceRoot":"","sources":["../../src/helper/calculateListMaxHeight.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,sBAAsB,GAAG,GAAG,EAAE;IACvC,MAAM,YAAY,GAAG,MAAM,CAAC,WAAW,CAAA;IACvC,MAAM,YAAY,GAAG,EAAE,CAAA;IACvB,MAAM,gBAAgB,GAAG,EAAE,CAAA;IAC3B,MAAM,aAAa,GAAG,YAAY,GAAG,YAAY,GAAG,gBAAgB,CAAA;IAErE,OAAO,aAAa,CAAA;AAEvB,CAAC,CAAA"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export declare const scrollOptionToViewport: (isDesktop: boolean) => void;
|
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
export const scrollOptionToViewport = (isDesktop) => {
|
|
2
|
-
const comboboxOptions = isDesktop
|
|
3
|
-
? document.querySelector('.menu')
|
|
4
|
-
: document.querySelector('.combobox__options');
|
|
5
|
-
const selectedItem = document.querySelector('.menu-item.selected');
|
|
6
|
-
if (selectedItem && comboboxOptions) {
|
|
7
|
-
let comboboxOptionsGroup = selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.parentElement;
|
|
8
|
-
if (comboboxOptionsGroup) {
|
|
9
|
-
const stickyHeader = comboboxOptionsGroup === null || comboboxOptionsGroup === void 0 ? void 0 : comboboxOptionsGroup.querySelector('.sticky-header');
|
|
10
|
-
const stickyHeaderOffset = stickyHeader === null || stickyHeader === void 0 ? void 0 : stickyHeader.offsetTop;
|
|
11
|
-
comboboxOptions === null || comboboxOptions === void 0 ? void 0 : comboboxOptions.scrollTo({ top: stickyHeaderOffset });
|
|
12
|
-
}
|
|
13
|
-
else {
|
|
14
|
-
const selectedItemOffset = selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.offsetTop;
|
|
15
|
-
comboboxOptions === null || comboboxOptions === void 0 ? void 0 : comboboxOptions.scrollTo({ top: selectedItemOffset });
|
|
16
|
-
}
|
|
17
|
-
}
|
|
18
|
-
};
|
|
19
|
-
//# sourceMappingURL=scrollOptionToViewport.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"scrollOptionToViewport.js","sourceRoot":"","sources":["../../src/helper/scrollOptionToViewport.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,sBAAsB,GAAG,CAAC,SAAkB,EAAE,EAAE;IAC3D,MAAM,eAAe,GAAG,SAAS;QAC/B,CAAC,CAAE,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAiB;QAClD,CAAC,CAAE,QAAQ,CAAC,aAAa,CAAC,oBAAoB,CAAiB,CAAA;IACjE,MAAM,YAAY,GAAG,QAAQ,CAAC,aAAa,CACzC,qBAAqB,CACP,CAAA;IAEhB,IAAI,YAAY,IAAI,eAAe,EAAE,CAAC;QACpC,IAAI,oBAAoB,GAAG,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,aAAa,CAAA;QAEtD,IAAI,oBAAoB,EAAE,CAAC;YACzB,MAAM,YAAY,GAAG,oBAAoB,aAApB,oBAAoB,uBAApB,oBAAoB,CAAE,aAAa,CACtD,gBAAgB,CACF,CAAA;YAChB,MAAM,kBAAkB,GAAG,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,SAAS,CAAA;YAElD,eAAe,aAAf,eAAe,uBAAf,eAAe,CAAE,QAAQ,CAAC,EAAE,GAAG,EAAE,kBAAkB,EAAE,CAAC,CAAA;QACxD,CAAC;aAAM,CAAC;YACN,MAAM,kBAAkB,GAAG,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,SAAS,CAAA;YAElD,eAAe,aAAf,eAAe,uBAAf,eAAe,CAAE,QAAQ,CAAC,EAAE,GAAG,EAAE,kBAAkB,EAAE,CAAC,CAAA;QACxD,CAAC;IACH,CAAC;AACH,CAAC,CAAA"}
|
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
import { useState, useEffect } from 'react';
|
|
2
|
-
const useIsDesktopScreenWidth = () => {
|
|
3
|
-
const hasWindowObject = typeof window !== 'undefined';
|
|
4
|
-
if (hasWindowObject) {
|
|
5
|
-
const [screenWidth, setScreenWidth] = useState(window.innerWidth);
|
|
6
|
-
useEffect(() => {
|
|
7
|
-
const handleResize = () => {
|
|
8
|
-
setScreenWidth(window.innerWidth);
|
|
9
|
-
};
|
|
10
|
-
window.addEventListener('resize', handleResize);
|
|
11
|
-
return () => {
|
|
12
|
-
window.removeEventListener('resize', handleResize);
|
|
13
|
-
};
|
|
14
|
-
}, []);
|
|
15
|
-
return screenWidth > 960;
|
|
16
|
-
}
|
|
17
|
-
return false;
|
|
18
|
-
};
|
|
19
|
-
export default useIsDesktopScreenWidth;
|
|
20
|
-
//# sourceMappingURL=useIsDesktopScreenWidth.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"useIsDesktopScreenWidth.js","sourceRoot":"","sources":["../../src/helper/useIsDesktopScreenWidth.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAE3C,MAAM,uBAAuB,GAAG,GAAG,EAAE;IACnC,MAAM,eAAe,GAAG,OAAO,MAAM,KAAK,WAAW,CAAA;IAErD,IAAI,eAAe,EAAE,CAAC;QACpB,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,MAAM,CAAC,UAAU,CAAC,CAAA;QAEjE,SAAS,CAAC,GAAG,EAAE;YACb,MAAM,YAAY,GAAG,GAAG,EAAE;gBACxB,cAAc,CAAC,MAAM,CAAC,UAAU,CAAC,CAAA;YACnC,CAAC,CAAA;YAED,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAA;YAE/C,OAAO,GAAG,EAAE;gBACV,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAA;YACpD,CAAC,CAAA;QACH,CAAC,EAAE,EAAE,CAAC,CAAA;QAEN,OAAO,WAAW,GAAG,GAAG,CAAA;IAC1B,CAAC;IAED,OAAO,KAAK,CAAA;AACd,CAAC,CAAA;AAED,eAAe,uBAAuB,CAAA"}
|
|
@@ -1,26 +0,0 @@
|
|
|
1
|
-
import { LeadingType } from '@pixum/menu-item';
|
|
2
|
-
import type { ComboBoxOptionItemProps } from '../types';
|
|
3
|
-
/**
|
|
4
|
-
* Props for the ComboBoxOptionsWithGrouping component
|
|
5
|
-
*/
|
|
6
|
-
interface ComboBoxOptionsWithGroupingProps {
|
|
7
|
-
/** Group name/header text */
|
|
8
|
-
group: string;
|
|
9
|
-
/** Array of option items in this group */
|
|
10
|
-
items: ComboBoxOptionItemProps[];
|
|
11
|
-
/** Currently selected option value */
|
|
12
|
-
selectedOption?: string;
|
|
13
|
-
/** Callback fired when an option is clicked */
|
|
14
|
-
onClick?: (value: string) => void;
|
|
15
|
-
/** Type of leading element to display (icon, avatar, etc.) */
|
|
16
|
-
leadingType?: LeadingType;
|
|
17
|
-
}
|
|
18
|
-
/**
|
|
19
|
-
* ComboBoxOptionsWithGrouping component that renders a group of options with a header.
|
|
20
|
-
* Used to display categorized/grouped options in the combobox.
|
|
21
|
-
*
|
|
22
|
-
* @param props - The props for the ComboBoxOptionsWithGrouping component
|
|
23
|
-
* @returns A group container with a sticky header and option items
|
|
24
|
-
*/
|
|
25
|
-
export declare function ComboxBoxOptionsWithGrouping({ group, items, selectedOption, onClick, leadingType, }: ComboBoxOptionsWithGroupingProps): import("react/jsx-runtime").JSX.Element;
|
|
26
|
-
export {};
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import Text, { TextVariant } from '@pixum/text';
|
|
3
|
-
import { ComboBoxOptionsItems } from './ComboBoxOptionsItems';
|
|
4
|
-
/**
|
|
5
|
-
* ComboBoxOptionsWithGrouping component that renders a group of options with a header.
|
|
6
|
-
* Used to display categorized/grouped options in the combobox.
|
|
7
|
-
*
|
|
8
|
-
* @param props - The props for the ComboBoxOptionsWithGrouping component
|
|
9
|
-
* @returns A group container with a sticky header and option items
|
|
10
|
-
*/
|
|
11
|
-
export function ComboxBoxOptionsWithGrouping({ group, items, selectedOption, onClick, leadingType, }) {
|
|
12
|
-
return (_jsxs("div", { className: "combobox__options-group", children: [group && (_jsx(Text, { variant: TextVariant.HEADLINE, className: "combobox__sticky-header", children: group })), _jsx(ComboBoxOptionsItems, { items: items, selectedOption: selectedOption, onClick: onClick, leadingType: leadingType })] }, `combobox__options-group-${group}`));
|
|
13
|
-
}
|
|
14
|
-
//# sourceMappingURL=ComboBoxOptionsWithGrouping.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"ComboBoxOptionsWithGrouping.js","sourceRoot":"","sources":["../../src/partials/ComboBoxOptionsWithGrouping.tsx"],"names":[],"mappings":";AACA,OAAO,IAAI,EAAE,EAAE,WAAW,EAAE,MAAM,aAAa,CAAA;AAE/C,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAA;AAkB7D;;;;;;GAMG;AACH,MAAM,UAAU,4BAA4B,CAAC,EAC3C,KAAK,EACL,KAAK,EACL,cAAc,EACd,OAAO,EACP,WAAW,GACsB;IACjC,OAAO,CACL,eACE,SAAS,EAAC,yBAAyB,aAGlC,KAAK,IAAI,CACR,KAAC,IAAI,IACH,OAAO,EAAE,WAAW,CAAC,QAAQ,EAC7B,SAAS,EAAC,yBAAyB,YAElC,KAAK,GACD,CACR,EACD,KAAC,oBAAoB,IACnB,KAAK,EAAE,KAAK,EACZ,cAAc,EAAE,cAAc,EAC9B,OAAO,EAAE,OAAO,EAChB,WAAW,EAAE,WAAW,GACxB,KAfG,2BAA2B,KAAK,EAAE,CAgBnC,CACP,CAAA;AACH,CAAC"}
|
package/lib/styles.css
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
.combobox{position:relative;width:100%}.combobox .combobox--headline[class*=text--]+*{margin-top:var(--spacing)}.combobox .combobox--header,.combobox .combobox__options,.combobox .combobox__options-slot,.combobox__bottom-sheet .combobox__options,.combobox__bottom-sheet .combobox__options-slot{position:relative}.combobox__bottom-sheet .combobox--header{align-items:flex-start;height:auto;margin:var(--spacing-5) auto var(--spacing-2);padding:0 var(--spacing-2);width:100%}.combobox .combobox__options,.combobox .combobox__options-slot,.combobox__bottom-sheet .combobox__options,.combobox__bottom-sheet .combobox__options-slot{display:flex;flex-direction:column;max-height:none;overflow:scroll;width:100%}.combobox__bottom-sheet ul.combobox__options-slot{margin:0;padding:0}.combobox .combobox__option-wrapper,.combobox__bottom-sheet .combobox__option-wrapper{touch-action:manipulation;-webkit-tap-highlight-color:transparent;cursor:pointer;-webkit-user-select:none;user-select:none}.combobox .combobox__options .combobox__sticky-header,.combobox__bottom-sheet .combobox__options .combobox__sticky-header{background-color:var(--color-surface);border-bottom:1px solid var(--color-dim);padding:var(--spacing-1_25) var(--spacing-2);position:-webkit-sticky;position:sticky;top:0}.combobox__options .text--caption{color:var(--color-on-secondary)}.combobox .combobox__options .item-header,.combobox__bottom-sheet .combobox__options .item-header{display:flex;justify-content:space-between}.combobox .combobox__options .combobox__option-details,.combobox__bottom-sheet .combobox__options .combobox__option-details{background-color:var(--color-surface);bottom:0;padding-left:var(--spacing);padding-right:var(--spacing);position:-webkit-sticky;position:sticky}.combobox .combobox--no-results-text,.combobox__bottom-sheet .combobox--no-results-text{padding:var(--spacing-2) var(--spacing);text-align:center}@media screen and (min-width:960px){.combobox .combobox__options,.combobox .combobox__options-slot{border-radius:12px;margin-top:var(--spacing);max-height:330px;overflow:auto;position:absolute}}.combobox ul.combobox__options-slot{list-style:none;padding:0}.combobox .combobox__options-slot{margin-top:var(--spacing)}
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Calculates the maximum height for the options list based on viewport height.
|
|
3
|
-
* Subtracts the header and input field heights from the window height.
|
|
4
|
-
*
|
|
5
|
-
* @returns The maximum height in pixels for the options list
|
|
6
|
-
*/
|
|
7
|
-
export declare function calculateListMaxHeight(): number;
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Calculates the maximum height for the options list based on viewport height.
|
|
3
|
-
* Subtracts the header and input field heights from the window height.
|
|
4
|
-
*
|
|
5
|
-
* @returns The maximum height in pixels for the options list
|
|
6
|
-
*/
|
|
7
|
-
export function calculateListMaxHeight() {
|
|
8
|
-
const windowHeight = window.innerHeight;
|
|
9
|
-
const headerHeight = 50;
|
|
10
|
-
const inputFieldHeight = 35;
|
|
11
|
-
const maxListHeight = windowHeight - headerHeight - inputFieldHeight;
|
|
12
|
-
return maxListHeight;
|
|
13
|
-
}
|
|
14
|
-
//# sourceMappingURL=calculateListMaxHeight.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"calculateListMaxHeight.js","sourceRoot":"","sources":["../../src/utils/calculateListMaxHeight.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,MAAM,UAAU,sBAAsB;IAClC,MAAM,YAAY,GAAG,MAAM,CAAC,WAAW,CAAA;IACvC,MAAM,YAAY,GAAG,EAAE,CAAA;IACvB,MAAM,gBAAgB,GAAG,EAAE,CAAA;IAC3B,MAAM,aAAa,GAAG,YAAY,GAAG,YAAY,GAAG,gBAAgB,CAAA;IAErE,OAAO,aAAa,CAAA;AACvB,CAAC"}
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Scrolls the selected option into view within the options container.
|
|
3
|
-
* Handles both desktop dropdown and mobile bottom sheet layouts.
|
|
4
|
-
*
|
|
5
|
-
* @param isDesktop - Whether the viewport is desktop size
|
|
6
|
-
*/
|
|
7
|
-
export declare function scrollOptionToViewport(isDesktop: boolean): void;
|
|
@@ -1,26 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Scrolls the selected option into view within the options container.
|
|
3
|
-
* Handles both desktop dropdown and mobile bottom sheet layouts.
|
|
4
|
-
*
|
|
5
|
-
* @param isDesktop - Whether the viewport is desktop size
|
|
6
|
-
*/
|
|
7
|
-
export function scrollOptionToViewport(isDesktop) {
|
|
8
|
-
const comboboxOptions = isDesktop
|
|
9
|
-
? document.querySelector('.menu')
|
|
10
|
-
: document.querySelector('.menu.combobox__options');
|
|
11
|
-
const selectedItem = comboboxOptions.querySelector('.menu-item.selected');
|
|
12
|
-
if (selectedItem && comboboxOptions) {
|
|
13
|
-
let comboboxOptionWrapper = selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.parentElement;
|
|
14
|
-
let comboboxOptionsGroup = comboboxOptionWrapper === null || comboboxOptionWrapper === void 0 ? void 0 : comboboxOptionWrapper.parentElement;
|
|
15
|
-
if (comboboxOptionsGroup) {
|
|
16
|
-
const stickyHeader = comboboxOptionsGroup === null || comboboxOptionsGroup === void 0 ? void 0 : comboboxOptionsGroup.querySelector('.combobox__sticky-header');
|
|
17
|
-
const stickyHeaderOffset = stickyHeader === null || stickyHeader === void 0 ? void 0 : stickyHeader.offsetTop;
|
|
18
|
-
comboboxOptions === null || comboboxOptions === void 0 ? void 0 : comboboxOptions.scrollTo({ top: stickyHeaderOffset, behavior: 'smooth' });
|
|
19
|
-
}
|
|
20
|
-
else {
|
|
21
|
-
const selectedItemOffset = selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.offsetTop;
|
|
22
|
-
comboboxOptions === null || comboboxOptions === void 0 ? void 0 : comboboxOptions.scrollTo({ top: selectedItemOffset, behavior: 'smooth' });
|
|
23
|
-
}
|
|
24
|
-
}
|
|
25
|
-
}
|
|
26
|
-
//# sourceMappingURL=scrollOptionToViewport.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"scrollOptionToViewport.js","sourceRoot":"","sources":["../../src/utils/scrollOptionToViewport.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,MAAM,UAAU,sBAAsB,CAAC,SAAkB;IACvD,MAAM,eAAe,GAAG,SAAS;QAC/B,CAAC,CAAE,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAiB;QAClD,CAAC,CAAE,QAAQ,CAAC,aAAa,CAAC,yBAAyB,CAAiB,CAAA;IAEtE,MAAM,YAAY,GAAG,eAAe,CAAC,aAAa,CAChD,qBAAqB,CACP,CAAA;IAEhB,IAAI,YAAY,IAAI,eAAe,EAAE,CAAC;QACpC,IAAI,qBAAqB,GAAG,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,aAAa,CAAA;QACvD,IAAI,oBAAoB,GAAG,qBAAqB,aAArB,qBAAqB,uBAArB,qBAAqB,CAAE,aAAa,CAAA;QAE/D,IAAI,oBAAoB,EAAE,CAAC;YACzB,MAAM,YAAY,GAAG,oBAAoB,aAApB,oBAAoB,uBAApB,oBAAoB,CAAE,aAAa,CACtD,0BAA0B,CACZ,CAAA;YAEhB,MAAM,kBAAkB,GAAG,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,SAAS,CAAA;YAElD,eAAe,aAAf,eAAe,uBAAf,eAAe,CAAE,QAAQ,CAAC,EAAE,GAAG,EAAE,kBAAkB,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC,CAAA;QAC5E,CAAC;aAAM,CAAC;YACN,MAAM,kBAAkB,GAAG,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,SAAS,CAAA;YAElD,eAAe,aAAf,eAAe,uBAAf,eAAe,CAAE,QAAQ,CAAC,EAAE,GAAG,EAAE,kBAAkB,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC,CAAA;QAC5E,CAAC;IACH,CAAC;AACH,CAAC"}
|