@pixum/combobox 5.0.2 → 5.0.3-alpha.0
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/CHANGELOG.md +722 -0
- package/lib/ComboBox.d.ts +5 -11
- package/lib/ComboBox.js +76 -99
- package/lib/ComboBox.js.map +1 -1
- package/lib/ComboboxOptions/Options.d.ts +12 -11
- package/lib/ComboboxOptions/Options.js +15 -18
- package/lib/ComboboxOptions/Options.js.map +1 -1
- package/lib/ComboboxOptions/OptionsGroup.d.ts +13 -12
- package/lib/ComboboxOptions/OptionsGroup.js +7 -7
- package/lib/ComboboxOptions/OptionsGroup.js.map +1 -1
- package/lib/ComboboxOptions/index.d.ts +4 -4
- package/lib/ComboboxOptions/index.js +21 -18
- package/lib/ComboboxOptions/index.js.map +1 -1
- package/lib/helper/calculateListMaxHeight.d.ts +1 -1
- package/lib/helper/calculateListMaxHeight.js +7 -7
- package/lib/helper/scrollOptionToViewport.d.ts +1 -1
- package/lib/helper/scrollOptionToViewport.js +17 -18
- package/lib/helper/scrollOptionToViewport.js.map +1 -1
- package/lib/helper/useIsDesktopScreenWidth.d.ts +2 -2
- package/lib/helper/useIsDesktopScreenWidth.js +19 -19
- package/lib/helper/useIsDesktopScreenWidth.js.map +1 -1
- package/lib/index.d.ts +3 -3
- package/lib/index.js +3 -3
- package/lib/index.js.map +1 -1
- package/lib/styles.css +1 -1
- package/lib/types.d.ts +34 -70
- package/lib/types.js +1 -1
- package/package.json +9 -11
- package/lib/hooks/index.d.ts +0 -1
- package/lib/hooks/index.js +0 -2
- package/lib/hooks/index.js.map +0 -1
- package/lib/hooks/useIsDesktopScreenWidth.d.ts +0 -1
- package/lib/hooks/useIsDesktopScreenWidth.js +0 -36
- package/lib/hooks/useIsDesktopScreenWidth.js.map +0 -1
- package/lib/partials/ComboBoxOptions.d.ts +0 -10
- package/lib/partials/ComboBoxOptions.js +0 -25
- package/lib/partials/ComboBoxOptions.js.map +0 -1
- package/lib/partials/ComboBoxOptionsItems.d.ts +0 -24
- package/lib/partials/ComboBoxOptionsItems.js +0 -24
- package/lib/partials/ComboBoxOptionsItems.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/partials/index.d.ts +0 -3
- package/lib/partials/index.js +0 -4
- package/lib/partials/index.js.map +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/index.d.ts +0 -2
- package/lib/utils/index.js +0 -3
- package/lib/utils/index.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/lib/types.d.ts
CHANGED
|
@@ -1,70 +1,34 @@
|
|
|
1
|
-
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
/** Whether the dropdown/bottom sheet is currently open */
|
|
36
|
-
isOpen: boolean;
|
|
37
|
-
/** State setter function to control open/close state */
|
|
38
|
-
setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
|
|
39
|
-
/** Callback fired when the search input value changes */
|
|
40
|
-
onChange?: (value: string) => void;
|
|
41
|
-
/** Callback fired when an option item is clicked */
|
|
42
|
-
onOptionItemClick?: (value: string) => void;
|
|
43
|
-
/** Callback fired when user clicks outside the component */
|
|
44
|
-
onOutsideClick?: () => void;
|
|
45
|
-
/** Callback fired when the input field is clicked */
|
|
46
|
-
onClick?: () => void;
|
|
47
|
-
/** Callback fired when the bottom sheet is closed */
|
|
48
|
-
onSheetClose?: () => void;
|
|
49
|
-
/** Placeholder text for the input field */
|
|
50
|
-
placeholder?: string;
|
|
51
|
-
/** Search pattern/regex for input validation */
|
|
52
|
-
searchPattern?: string;
|
|
53
|
-
/** Current value of the combobox */
|
|
54
|
-
value?: string;
|
|
55
|
-
/** Text to display when no results are found */
|
|
56
|
-
noResultsText?: string;
|
|
57
|
-
/** Input mode for mobile keyboards (text, numeric, etc.) */
|
|
58
|
-
inputMode?: InputModesType;
|
|
59
|
-
/** Whether to show the search input field */
|
|
60
|
-
withSearch?: boolean;
|
|
61
|
-
/** Theme configuration for the component */
|
|
62
|
-
theme?: ThemeType;
|
|
63
|
-
}
|
|
64
|
-
/**
|
|
65
|
-
* Props for individual ComboBox option items
|
|
66
|
-
*/
|
|
67
|
-
export interface ComboBoxOptionItemProps extends MenuItemProps {
|
|
68
|
-
/** Unique key for the option item */
|
|
69
|
-
key?: string;
|
|
70
|
-
}
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { LeadingType, MenuItemProps } from '@pixum/menu-item';
|
|
3
|
+
import { InputMode } from '@pixum/user-input';
|
|
4
|
+
interface ComboBoxOptionsProps {
|
|
5
|
+
options: Record<string, ComboBoxOptionProps[]> | ComboBoxOptionProps[];
|
|
6
|
+
selectedOption?: string;
|
|
7
|
+
onClick?: (value: string) => void;
|
|
8
|
+
leadingType?: LeadingType;
|
|
9
|
+
optionDetails?: React.ReactNode;
|
|
10
|
+
}
|
|
11
|
+
interface ComboBoxProps extends ComboBoxOptionsProps {
|
|
12
|
+
className?: string;
|
|
13
|
+
headline?: string;
|
|
14
|
+
helperText?: string;
|
|
15
|
+
id?: string;
|
|
16
|
+
label?: string;
|
|
17
|
+
isOpen: boolean;
|
|
18
|
+
setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
|
|
19
|
+
onChange?: (value: string) => void;
|
|
20
|
+
onOptionItemClick?: (value: string) => void;
|
|
21
|
+
onOutsideClick?: () => void;
|
|
22
|
+
onClick?: () => void;
|
|
23
|
+
onSheetClose?: () => void;
|
|
24
|
+
placeholder?: string;
|
|
25
|
+
searchPattern?: string;
|
|
26
|
+
value?: string;
|
|
27
|
+
noResultsText?: string;
|
|
28
|
+
inputMode?: InputMode;
|
|
29
|
+
withSearch?: boolean;
|
|
30
|
+
}
|
|
31
|
+
interface ComboBoxOptionProps extends MenuItemProps {
|
|
32
|
+
key?: string;
|
|
33
|
+
}
|
|
34
|
+
export { ComboBoxProps, ComboBoxOptionProps, ComboBoxOptionsProps };
|
package/lib/types.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export {};
|
|
1
|
+
export {};
|
|
2
2
|
//# sourceMappingURL=types.js.map
|
package/package.json
CHANGED
|
@@ -1,19 +1,17 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pixum/combobox",
|
|
3
|
-
"version": "5.0.
|
|
3
|
+
"version": "5.0.3-alpha.0",
|
|
4
4
|
"main": "lib/index.js",
|
|
5
5
|
"module": "lib/index.js",
|
|
6
6
|
"license": "UNLICENSED",
|
|
7
7
|
"peerDependencies": {
|
|
8
|
-
"@pixum/bottom-sheet": "
|
|
9
|
-
"@pixum/button": "
|
|
10
|
-
"@pixum/menu": "
|
|
11
|
-
"@pixum/menu-item": "
|
|
12
|
-
"@pixum/svg-icon": "
|
|
13
|
-
"@pixum/text": "2.
|
|
14
|
-
"@pixum/
|
|
15
|
-
"@pixum/user-input": "3.0.15",
|
|
16
|
-
"@pixum/web-input": "1.0.22-alpha.55+c18371c75"
|
|
8
|
+
"@pixum/bottom-sheet": "^1.4.0",
|
|
9
|
+
"@pixum/button": "^1.15.0",
|
|
10
|
+
"@pixum/menu": "^2.1.0",
|
|
11
|
+
"@pixum/menu-item": "^0.11.0",
|
|
12
|
+
"@pixum/svg-icon": "^1.23.0",
|
|
13
|
+
"@pixum/text": "^1.2.2",
|
|
14
|
+
"@pixum/user-input": "^0.12.2"
|
|
17
15
|
},
|
|
18
16
|
"files": [
|
|
19
17
|
"lib"
|
|
@@ -21,5 +19,5 @@
|
|
|
21
19
|
"sideEffects": [
|
|
22
20
|
"*.css"
|
|
23
21
|
],
|
|
24
|
-
"gitHead": "
|
|
22
|
+
"gitHead": "cb2e81c32dc7a7a7757619d0b097b478077c5eb4"
|
|
25
23
|
}
|
package/lib/hooks/index.d.ts
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from './useIsDesktopScreenWidth';
|
package/lib/hooks/index.js
DELETED
package/lib/hooks/index.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,2BAA2B,CAAA"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export declare function useIsDesktopScreenWidth(): boolean;
|
|
@@ -1,36 +0,0 @@
|
|
|
1
|
-
import { useState, useEffect } from 'react';
|
|
2
|
-
/**
|
|
3
|
-
* Custom hook that detects whether the viewport width is desktop size (>= 960px).
|
|
4
|
-
* Listens to window resize events to update the state dynamically.
|
|
5
|
-
*
|
|
6
|
-
* @returns True if the viewport width is 960px or greater, false otherwise
|
|
7
|
-
*/
|
|
8
|
-
function isBrowser() {
|
|
9
|
-
return typeof window !== 'undefined';
|
|
10
|
-
}
|
|
11
|
-
/**
|
|
12
|
-
* Checks if the current viewport width is desktop size (>= 960px).
|
|
13
|
-
*
|
|
14
|
-
* @returns True if the viewport is desktop size, false otherwise or in non-browser environments
|
|
15
|
-
*/
|
|
16
|
-
function isInitialScreenDesktop() {
|
|
17
|
-
if (isBrowser()) {
|
|
18
|
-
return window.innerWidth >= 960;
|
|
19
|
-
}
|
|
20
|
-
return false;
|
|
21
|
-
}
|
|
22
|
-
export function useIsDesktopScreenWidth() {
|
|
23
|
-
const [isDesktop, setIsDesktop] = useState(isInitialScreenDesktop);
|
|
24
|
-
useEffect(() => {
|
|
25
|
-
const checkScreenSize = () => {
|
|
26
|
-
setIsDesktop(window.innerWidth >= 960);
|
|
27
|
-
};
|
|
28
|
-
checkScreenSize();
|
|
29
|
-
window.addEventListener('resize', checkScreenSize);
|
|
30
|
-
return () => {
|
|
31
|
-
window.removeEventListener('resize', checkScreenSize);
|
|
32
|
-
};
|
|
33
|
-
}, []);
|
|
34
|
-
return isDesktop;
|
|
35
|
-
}
|
|
36
|
-
//# sourceMappingURL=useIsDesktopScreenWidth.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"useIsDesktopScreenWidth.js","sourceRoot":"","sources":["../../src/hooks/useIsDesktopScreenWidth.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAE3C;;;;;GAKG;AAEH,SAAS,SAAS;IAChB,OAAO,OAAO,MAAM,KAAK,WAAW,CAAA;AACtC,CAAC;AAED;;;;GAIG;AACH,SAAS,sBAAsB;IAC7B,IAAI,SAAS,EAAE,EAAE,CAAC;QAChB,OAAO,MAAM,CAAC,UAAU,IAAI,GAAG,CAAA;IACjC,CAAC;IAED,OAAO,KAAK,CAAA;AACd,CAAC;AAED,MAAM,UAAU,uBAAuB;IACrC,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAU,sBAAsB,CAAC,CAAA;IAE3E,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,eAAe,GAAG,GAAG,EAAE;YAC3B,YAAY,CAAC,MAAM,CAAC,UAAU,IAAI,GAAG,CAAC,CAAA;QACxC,CAAC,CAAA;QAED,eAAe,EAAE,CAAA;QACjB,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,eAAe,CAAC,CAAA;QAElD,OAAO,GAAG,EAAE;YACV,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,eAAe,CAAC,CAAA;QACvD,CAAC,CAAA;IACH,CAAC,EAAE,EAAE,CAAC,CAAA;IAEN,OAAO,SAAS,CAAA;AAClB,CAAC"}
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
import type { ComboBoxOptionsProps } from '../types';
|
|
2
|
-
/**
|
|
3
|
-
* ComboBoxOptions component that renders a list of options in a menu.
|
|
4
|
-
* Handles both grouped and ungrouped options and automatically scrolls to the selected option.
|
|
5
|
-
*
|
|
6
|
-
* @param props - The props for the ComboBoxOptions component
|
|
7
|
-
* @returns A menu containing the combobox options
|
|
8
|
-
*/
|
|
9
|
-
export declare function ComboBoxOptions({ options, onClick, selectedOption, leadingType, optionDetails, }: ComboBoxOptionsProps): import("react/jsx-runtime").JSX.Element;
|
|
10
|
-
export default ComboBoxOptions;
|
|
@@ -1,25 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { useEffect } from 'react';
|
|
3
|
-
import Menu from '@pixum/menu';
|
|
4
|
-
import { scrollOptionToViewport } from '../utils';
|
|
5
|
-
import { useIsDesktopScreenWidth } from '../hooks';
|
|
6
|
-
import { ComboxBoxOptionsWithGrouping } from './ComboBoxOptionsWithGrouping';
|
|
7
|
-
import { ComboBoxOptionsItems } from './ComboBoxOptionsItems';
|
|
8
|
-
/**
|
|
9
|
-
* ComboBoxOptions component that renders a list of options in a menu.
|
|
10
|
-
* Handles both grouped and ungrouped options and automatically scrolls to the selected option.
|
|
11
|
-
*
|
|
12
|
-
* @param props - The props for the ComboBoxOptions component
|
|
13
|
-
* @returns A menu containing the combobox options
|
|
14
|
-
*/
|
|
15
|
-
export function ComboBoxOptions({ options, onClick, selectedOption, leadingType, optionDetails, }) {
|
|
16
|
-
const isDesktop = useIsDesktopScreenWidth();
|
|
17
|
-
const optionsWithoutGroup = Array.isArray(options);
|
|
18
|
-
const optionsWithGroup = Object.entries(options);
|
|
19
|
-
useEffect(() => {
|
|
20
|
-
scrollOptionToViewport(isDesktop);
|
|
21
|
-
}, [isDesktop]);
|
|
22
|
-
return (_jsxs(Menu, { className: "combobox__options scrollable", "data-tappable": "true", children: [optionsWithoutGroup ? (_jsx(ComboBoxOptionsItems, { items: options, selectedOption: selectedOption, onClick: onClick, leadingType: leadingType })) : (_jsx(_Fragment, { children: optionsWithGroup.map(([group, items]) => (_jsx(ComboxBoxOptionsWithGrouping, { group: group, items: items, selectedOption: selectedOption, onClick: onClick, leadingType: leadingType }))) })), optionDetails && (_jsx("div", { className: "combobox__option-details text--caption", children: optionDetails }))] }));
|
|
23
|
-
}
|
|
24
|
-
export default ComboBoxOptions;
|
|
25
|
-
//# sourceMappingURL=ComboBoxOptions.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"ComboBoxOptions.js","sourceRoot":"","sources":["../../src/partials/ComboBoxOptions.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACjC,OAAO,IAAI,MAAM,aAAa,CAAA;AAC9B,OAAO,EAAE,sBAAsB,EAAE,MAAM,UAAU,CAAA;AACjD,OAAO,EAAE,uBAAuB,EAAE,MAAM,UAAU,CAAA;AAElD,OAAO,EAAE,4BAA4B,EAAE,MAAM,+BAA+B,CAAA;AAC5E,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAA;AAE7D;;;;;;GAMG;AACH,MAAM,UAAU,eAAe,CAAC,EAC9B,OAAO,EACP,OAAO,EACP,cAAc,EACd,WAAW,EACX,aAAa,GACQ;IACrB,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,MAAC,IAAI,IAAC,SAAS,EAAC,8BAA8B,mBAAe,MAAM,aAChE,mBAAmB,CAAC,CAAC,CAAC,CACrB,KAAC,oBAAoB,IACnB,KAAK,EAAE,OAAO,EACd,cAAc,EAAE,cAAc,EAC9B,OAAO,EAAE,OAAO,EAChB,WAAW,EAAE,WAAW,GACxB,CACH,CAAC,CAAC,CAAC,CACF,4BACG,gBAAgB,CAAC,GAAG,CAAC,CAAC,CAAC,KAAK,EAAE,KAAK,CAAC,EAAE,EAAE,CAAC,CACxC,KAAC,4BAA4B,IAC3B,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,KAAK,EACZ,cAAc,EAAE,cAAc,EAC9B,OAAO,EAAE,OAAO,EAChB,WAAW,EAAE,WAAW,GACxB,CACH,CAAC,GACD,CACJ,EACA,aAAa,IAAI,CAChB,cAAK,SAAS,EAAC,wCAAwC,YACpD,aAAa,GACV,CACP,IACI,CACR,CAAA;AACH,CAAC;AAED,eAAe,eAAe,CAAA"}
|
|
@@ -1,24 +0,0 @@
|
|
|
1
|
-
import { LeadingType } from '@pixum/menu-item';
|
|
2
|
-
import type { ComboBoxOptionItemProps } from '../types';
|
|
3
|
-
/**
|
|
4
|
-
* Props for the ComboBoxOptionsItems component
|
|
5
|
-
*/
|
|
6
|
-
interface ComboBoxOptionsItemsProps {
|
|
7
|
-
/** Array of option items to display */
|
|
8
|
-
items: ComboBoxOptionItemProps[];
|
|
9
|
-
/** Currently selected option value */
|
|
10
|
-
selectedOption?: string;
|
|
11
|
-
/** Callback fired when an option is clicked */
|
|
12
|
-
onClick?: (value: string) => void;
|
|
13
|
-
/** Type of leading element to display (icon, avatar, etc.) */
|
|
14
|
-
leadingType?: LeadingType;
|
|
15
|
-
}
|
|
16
|
-
/**
|
|
17
|
-
* ComboBoxOptionsItems component that renders individual menu items.
|
|
18
|
-
* Handles click events and displays selected state for each option.
|
|
19
|
-
*
|
|
20
|
-
* @param props - The props for the ComboBoxOptionsItems component
|
|
21
|
-
* @returns A list of clickable menu items
|
|
22
|
-
*/
|
|
23
|
-
export declare function ComboBoxOptionsItems({ items, selectedOption, onClick, leadingType, }: ComboBoxOptionsItemsProps): import("react/jsx-runtime").JSX.Element;
|
|
24
|
-
export {};
|
|
@@ -1,24 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
|
-
import MenuItem from '@pixum/menu-item';
|
|
3
|
-
import clsx from 'clsx';
|
|
4
|
-
/**
|
|
5
|
-
* ComboBoxOptionsItems component that renders individual menu items.
|
|
6
|
-
* Handles click events and displays selected state for each option.
|
|
7
|
-
*
|
|
8
|
-
* @param props - The props for the ComboBoxOptionsItems component
|
|
9
|
-
* @returns A list of clickable menu items
|
|
10
|
-
*/
|
|
11
|
-
export function ComboBoxOptionsItems({ items, selectedOption, onClick, leadingType, }) {
|
|
12
|
-
return (_jsx(_Fragment, { children: items.map((item) => {
|
|
13
|
-
var _a;
|
|
14
|
-
const itemText = item.text;
|
|
15
|
-
const isSelected = selectedOption === ((item === null || item === void 0 ? void 0 : item.label) || itemText);
|
|
16
|
-
return (_jsx("div", { className: "combobox__option-wrapper", role: "button", tabIndex: 0, onPointerDown: e => e.stopPropagation(), onTouchStart: e => e.stopPropagation(), onMouseDown: e => e.stopPropagation(), onClickCapture: e => {
|
|
17
|
-
e.stopPropagation();
|
|
18
|
-
onClick === null || onClick === void 0 ? void 0 : onClick(itemText);
|
|
19
|
-
}, children: _jsx(MenuItem, { tabIndex: -1, className: clsx(isSelected && 'selected'), onMouseEnter: item.onMouseEnter, leadingProps: leadingType ? { name: itemText, type: leadingType } : undefined, selected: selectedOption === itemText, text: itemText, subtext: item.subtext, subItemProps: {
|
|
20
|
-
text: (_a = item.subItemProps) === null || _a === void 0 ? void 0 : _a.text,
|
|
21
|
-
} }) }, `combobox-item-wrapper-${itemText}`));
|
|
22
|
-
}) }));
|
|
23
|
-
}
|
|
24
|
-
//# sourceMappingURL=ComboBoxOptionsItems.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"ComboBoxOptionsItems.js","sourceRoot":"","sources":["../../src/partials/ComboBoxOptionsItems.tsx"],"names":[],"mappings":";AAAA,OAAO,QAA6C,MAAM,kBAAkB,CAAA;AAC5E,OAAO,IAAI,MAAM,MAAM,CAAA;AAiBvB;;;;;;GAMG;AACH,MAAM,UAAU,oBAAoB,CAAC,EACnC,KAAK,EACL,cAAc,EACd,OAAO,EACP,WAAW,GACe;IAC1B,OAAO,CACL,4BACG,KAAK,CAAC,GAAG,CAAC,CAAC,IAAmB,EAAE,EAAE;;YACjC,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAA;YAC1B,MAAM,UAAU,GAAG,cAAc,KAAK,CAAC,CAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,KAAK,KAAI,QAAQ,CAAC,CAAA;YAE/D,OAAO,CACL,cAEE,SAAS,EAAC,0BAA0B,EACpC,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,CAAC,EACX,aAAa,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,eAAe,EAAE,EACvC,YAAY,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,eAAe,EAAE,EACtC,WAAW,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,eAAe,EAAE,EACrC,cAAc,EAAE,CAAC,CAAC,EAAE;oBAClB,CAAC,CAAC,eAAe,EAAE,CAAA;oBACnB,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAG,QAAQ,CAAC,CAAA;gBACrB,CAAC,YAED,KAAC,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,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,WAAW,EAAE,CAAC,CAAC,CAAC,SAAS,EAEjE,QAAQ,EAAE,cAAc,KAAK,QAAQ,EACrC,IAAI,EAAE,QAAQ,EACd,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,YAAY,EAAE;wBACZ,IAAI,EAAE,MAAA,IAAI,CAAC,YAAY,0CAAE,IAAI;qBAC9B,GACD,IAzBG,yBAAyB,QAAQ,EAAE,CA0BpC,CACP,CAAA;QACH,CAAC,CAAC,GACD,CACJ,CAAA;AACH,CAAC"}
|
|
@@ -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: [_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,aAGnC,KAAC,IAAI,IAAC,OAAO,EAAE,WAAW,CAAC,QAAQ,EAAE,SAAS,EAAC,yBAAyB,YACrE,KAAK,GACD,EACP,KAAC,oBAAoB,IACnB,KAAK,EAAE,KAAK,EACZ,cAAc,EAAE,cAAc,EAC9B,OAAO,EAAE,OAAO,EAChB,WAAW,EAAE,WAAW,GACxB,KAVG,2BAA2B,KAAK,EAAE,CAWnC,CACP,CAAA;AACH,CAAC"}
|
package/lib/partials/index.d.ts
DELETED
package/lib/partials/index.js
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/partials/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAA;AACjC,cAAc,+BAA+B,CAAA;AAC7C,cAAc,wBAAwB,CAAA"}
|
|
@@ -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"}
|
package/lib/utils/index.d.ts
DELETED
package/lib/utils/index.js
DELETED
package/lib/utils/index.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,0BAA0B,CAAA;AACxC,cAAc,0BAA0B,CAAA"}
|
|
@@ -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 });
|
|
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 });
|
|
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,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"}
|