@pixum/combobox 5.3.2-alpha.183 → 5.3.2-alpha.40
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/lib/ComboBox.d.ts +1 -2
- package/lib/ComboBox.js +2 -5
- package/lib/ComboBox.js.map +1 -1
- package/lib/index.d.ts +0 -1
- package/lib/index.js +0 -1
- package/lib/index.js.map +1 -1
- package/lib/partials/index.d.ts +0 -1
- package/lib/partials/index.js +0 -1
- package/lib/partials/index.js.map +1 -1
- package/lib/styles.css +1 -1
- package/lib/types.d.ts +0 -8
- package/package.json +2 -2
- package/lib/ComboBox.test.d.ts +0 -1
- package/lib/ComboBox.test.js +0 -33
- package/lib/ComboBox.test.js.map +0 -1
- package/lib/partials/ComboBoxOptionsSlot.d.ts +0 -34
- package/lib/partials/ComboBoxOptionsSlot.js +0 -32
- package/lib/partials/ComboBoxOptionsSlot.js.map +0 -1
- package/lib/partials/ComboBoxSlotContainer.d.ts +0 -29
- package/lib/partials/ComboBoxSlotContainer.js +0 -30
- package/lib/partials/ComboBoxSlotContainer.js.map +0 -1
package/lib/ComboBox.d.ts
CHANGED
|
@@ -6,7 +6,6 @@ import './styles.css';
|
|
|
6
6
|
* Supports both flat and grouped options, search functionality, and keyboard navigation.
|
|
7
7
|
*
|
|
8
8
|
* @param props - The props for the ComboBox component
|
|
9
|
-
* @param props.disabled - Whether the combobox is disabled
|
|
10
9
|
* @returns A responsive combobox component with search and selection capabilities
|
|
11
10
|
*/
|
|
12
|
-
export declare function ComboBox({ className, name, headline, label, searchPattern, isOpen, options, placeholder, value, inputMode, noResultsText, leadingType, optionDetails, withSearch, theme,
|
|
11
|
+
export declare function ComboBox({ className, name, headline, label, searchPattern, isOpen, options, placeholder, value, inputMode, noResultsText, leadingType, optionDetails, withSearch, theme, setIsOpen, onClick, onChange, onOutsideClick, onOptionItemClick, onSheetClose, }: ComboBoxProps): import("react/jsx-runtime").JSX.Element;
|
package/lib/ComboBox.js
CHANGED
|
@@ -16,10 +16,9 @@ import './styles.css';
|
|
|
16
16
|
* Supports both flat and grouped options, search functionality, and keyboard navigation.
|
|
17
17
|
*
|
|
18
18
|
* @param props - The props for the ComboBox component
|
|
19
|
-
* @param props.disabled - Whether the combobox is disabled
|
|
20
19
|
* @returns A responsive combobox component with search and selection capabilities
|
|
21
20
|
*/
|
|
22
|
-
export function ComboBox({ className = '', name, headline, label, searchPattern = '', isOpen, options, placeholder, value, inputMode, noResultsText, leadingType, optionDetails, withSearch = true, theme = DEFAULT_THEME,
|
|
21
|
+
export function ComboBox({ className = '', name, headline, label, searchPattern = '', isOpen, options, placeholder, value, inputMode, noResultsText, leadingType, optionDetails, withSearch = true, theme = DEFAULT_THEME, setIsOpen, onClick, onChange, onOutsideClick, onOptionItemClick, onSheetClose, }) {
|
|
23
22
|
const comboBoxRef = useRef(null);
|
|
24
23
|
const bottomSheetRef = useRef(null);
|
|
25
24
|
const [searchQuery, setSearchQuery] = useState('');
|
|
@@ -88,8 +87,6 @@ export function ComboBox({ className = '', name, headline, label, searchPattern
|
|
|
88
87
|
* Handles click on the input field
|
|
89
88
|
*/
|
|
90
89
|
const handleOnClick = () => {
|
|
91
|
-
if (disabled)
|
|
92
|
-
return;
|
|
93
90
|
onClick === null || onClick === void 0 ? void 0 : onClick();
|
|
94
91
|
};
|
|
95
92
|
/**
|
|
@@ -106,6 +103,6 @@ export function ComboBox({ className = '', name, headline, label, searchPattern
|
|
|
106
103
|
const removePlaceholder = () => {
|
|
107
104
|
setPlaceholder('');
|
|
108
105
|
};
|
|
109
|
-
return (_jsxs(ThemeProvider, { theme: theme, children: [showSelectField && (_jsx(SelectInput, { className: clsx(isOpen && 'active', className), name: name, label: label, value: value,
|
|
106
|
+
return (_jsxs(ThemeProvider, { theme: theme, children: [showSelectField && (_jsx(SelectInput, { className: clsx(isOpen && 'active', className), name: name, label: label, value: value, onClick: handleOnClick, disableTrailingIconButton: true, readOnly: true })), isDesktop && isOpen && (_jsxs("div", { className: "combobox", ref: comboBoxRef, children: [withSearch && (_jsx(SearchInput, { name: name, value: searchQuery, pattern: searchPattern, label: label, onChange: handleChange, onClear: handleClearInput, displayLeadingIcon: isOpen, isCompact: true, inputMode: inputMode, autoFocus: true })), optionsExist ? (_jsx(ComboBoxOptions, { options: options, onClick: handleOptionItemClick, selectedOption: value, leadingType: leadingType })) : (_jsx(NoResultsTextComponent, {})), _jsx("div", {})] })), !isDesktop && isOpen && (_jsxs(BottomSheet, { className: "combobox__bottom-sheet", open: isOpen, onClose: clearAndClose, ref: bottomSheetRef, children: [_jsxs("div", { className: "combobox--header", children: [_jsx(Text, { variant: TextVariant.HEADLINE, className: "combobox--headline", children: headline }), withSearch && (_jsx(SearchInput, { name: name, value: searchQuery, pattern: searchPattern, onChange: handleChange, onClear: handleClearInput, onFocus: removePlaceholder, placeholder: inputPlaceholder, isCompact: true, inputMode: inputMode, displayLeadingIcon: isOpen }))] }), _jsx("div", { className: "combobox__options", children: optionsExist ? (_jsx(ComboBoxOptions, { options: options, onClick: handleOptionItemClick, selectedOption: value, leadingType: leadingType, optionDetails: optionDetails })) : (_jsx(NoResultsTextComponent, {})) })] }))] }));
|
|
110
107
|
}
|
|
111
108
|
//# sourceMappingURL=ComboBox.js.map
|
package/lib/ComboBox.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ComboBox.js","sourceRoot":"","sources":["../src/ComboBox.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ,OAAO,EAIL,SAAS,EACT,MAAM,EACN,QAAQ,GACT,MAAM,OAAO,CAAA;AACd,OAAO,WAAW,MAAM,qBAAqB,CAAA;AAC7C,OAAO,IAAI,EAAE,EAAE,WAAW,EAAE,MAAM,aAAa,CAAA;AAC/C,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAA;AAChD,OAAO,EAAE,eAAe,EAAE,MAAM,YAAY,CAAA;AAC5C,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAA;AAE3D,OAAO,EAAE,uBAAuB,EAAE,MAAM,SAAS,CAAA;AACjD,OAAO,IAAI,MAAM,MAAM,CAAA;AACvB,OAAO,aAAa,EAAE,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAA;AACpE,OAAO,cAAc,CAAA;AAErB
|
|
1
|
+
{"version":3,"file":"ComboBox.js","sourceRoot":"","sources":["../src/ComboBox.tsx"],"names":[],"mappings":"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"}
|
package/lib/index.d.ts
CHANGED
package/lib/index.js
CHANGED
package/lib/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AACrC,eAAe,QAAQ,CAAA;AACvB,cAAc,SAAS,CAAA
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AACrC,eAAe,QAAQ,CAAA;AACvB,cAAc,SAAS,CAAA"}
|
package/lib/partials/index.d.ts
CHANGED
package/lib/partials/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
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
|
+
{"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"}
|
package/lib/styles.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.combobox{position:relative;width:100%}.combobox .combobox--headline[class*=text--]+*{margin-top:var(--spacing)}.combobox .combobox--header,.combobox .combobox__options,.
|
|
1
|
+
.combobox{position:relative;width:100%}.combobox .combobox--headline[class*=text--]+*{margin-top:var(--spacing)}.combobox .combobox--header,.combobox .combobox__options,.combobox__bottom-sheet .combobox__options{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__bottom-sheet .combobox__options{display:flex;flex-direction:column;max-height:none;overflow:scroll;width:100%}.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{border-radius:12px;margin-top:var(--spacing);max-height:330px;overflow:auto;position:absolute}}
|
package/lib/types.d.ts
CHANGED
|
@@ -58,16 +58,8 @@ export interface ComboBoxProps extends ComboBoxOptionsProps {
|
|
|
58
58
|
inputMode?: InputModesType;
|
|
59
59
|
/** Whether to show the search input field */
|
|
60
60
|
withSearch?: boolean;
|
|
61
|
-
/** Whether the combobox is disabled */
|
|
62
|
-
disabled?: boolean;
|
|
63
|
-
/** Show disabled style + horizontal shimmer animation while content is loading */
|
|
64
|
-
loading?: boolean;
|
|
65
61
|
/** Theme configuration for the component */
|
|
66
62
|
theme?: ThemeType;
|
|
67
|
-
/** Custom slot that replaces the standard options/no-results block */
|
|
68
|
-
optionsSlot?: React.ReactNode;
|
|
69
|
-
/** Icon element displayed at the leading (left) side of the trigger input */
|
|
70
|
-
leadingIcon?: React.ReactNode;
|
|
71
63
|
}
|
|
72
64
|
/**
|
|
73
65
|
* Props for individual ComboBox option items
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pixum/combobox",
|
|
3
|
-
"version": "5.3.2-alpha.
|
|
3
|
+
"version": "5.3.2-alpha.40+d69ecab9",
|
|
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": "d69ecab9f843cf4213c046440dc4b4a2006d22f8"
|
|
22
22
|
}
|
package/lib/ComboBox.test.d.ts
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
package/lib/ComboBox.test.js
DELETED
|
@@ -1,33 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
/// <reference types="@testing-library/jest-dom" />
|
|
3
|
-
import { fireEvent, render } from '@testing-library/react';
|
|
4
|
-
import { ComboBox } from './ComboBox';
|
|
5
|
-
// jsdom sets window.innerWidth to 0, so useIsDesktopScreenWidth returns false.
|
|
6
|
-
// When !isDesktop, showSelectField is always true — SelectInput always renders.
|
|
7
|
-
const baseProps = {
|
|
8
|
-
isOpen: false,
|
|
9
|
-
setIsOpen: jest.fn(),
|
|
10
|
-
options: [],
|
|
11
|
-
label: 'Test',
|
|
12
|
-
};
|
|
13
|
-
describe('ComboBox disabled', () => {
|
|
14
|
-
it('does not fire onClick when disabled', () => {
|
|
15
|
-
const onClick = jest.fn();
|
|
16
|
-
const { container } = render(_jsx(ComboBox, Object.assign({}, baseProps, { disabled: true, onClick: onClick })));
|
|
17
|
-
fireEvent.click(container.querySelector('.input-inner-container'));
|
|
18
|
-
expect(onClick).not.toHaveBeenCalled();
|
|
19
|
-
});
|
|
20
|
-
it('passes disabled to the trigger input', () => {
|
|
21
|
-
const { container } = render(_jsx(ComboBox, Object.assign({}, baseProps, { disabled: true, value: "some option" })));
|
|
22
|
-
expect(container.querySelector('input')).toBeDisabled();
|
|
23
|
-
});
|
|
24
|
-
});
|
|
25
|
-
describe('ComboBox enabled', () => {
|
|
26
|
-
it('fires onClick when not disabled', () => {
|
|
27
|
-
const onClick = jest.fn();
|
|
28
|
-
const { container } = render(_jsx(ComboBox, Object.assign({}, baseProps, { onClick: onClick })));
|
|
29
|
-
fireEvent.click(container.querySelector('.input-inner-container'));
|
|
30
|
-
expect(onClick).toHaveBeenCalledTimes(1);
|
|
31
|
-
});
|
|
32
|
-
});
|
|
33
|
-
//# 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,mDAAmD;AACnD,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,34 +0,0 @@
|
|
|
1
|
-
import type { ReactNode } from 'react';
|
|
2
|
-
import '../styles.css';
|
|
3
|
-
export interface ComboBoxOptionsSlotProps {
|
|
4
|
-
/** The content to render inside the options slot */
|
|
5
|
-
children: ReactNode;
|
|
6
|
-
className?: string;
|
|
7
|
-
role?: string;
|
|
8
|
-
tag?: 'div' | 'ul' | 'ol' | 'dl';
|
|
9
|
-
}
|
|
10
|
-
/**
|
|
11
|
-
* Styled container for optionsSlot content.
|
|
12
|
-
*
|
|
13
|
-
* Applies the standard ComboBox dropdown appearance — white background,
|
|
14
|
-
* border, border-radius, box-shadow and top margin — so consumers don't
|
|
15
|
-
* have to replicate it in every optionsSlot implementation.
|
|
16
|
-
*
|
|
17
|
-
* Use it as the outermost wrapper of your optionsSlot:
|
|
18
|
-
*
|
|
19
|
-
* ```tsx
|
|
20
|
-
* import ComboBox, { ComboBoxOptionsSlot } from '@pixum/combobox'
|
|
21
|
-
*
|
|
22
|
-
* <ComboBox
|
|
23
|
-
* optionsSlot={
|
|
24
|
-
* <ComboBoxOptionsSlot>
|
|
25
|
-
* <MyCustomOptionsList />
|
|
26
|
-
* </ComboBoxOptionsSlot>
|
|
27
|
-
* }
|
|
28
|
-
* />
|
|
29
|
-
* ```
|
|
30
|
-
*
|
|
31
|
-
* @param children - The slot content to render inside the container
|
|
32
|
-
* @returns A styled wrapper div matching the ComboBox dropdown look
|
|
33
|
-
*/
|
|
34
|
-
export declare function ComboBoxOptionsSlot({ children, className, role, tag, }: ComboBoxOptionsSlotProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,32 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import '../styles.css';
|
|
3
|
-
import Menu from '@pixum/menu';
|
|
4
|
-
import clsx from 'clsx';
|
|
5
|
-
/**
|
|
6
|
-
* Styled container for optionsSlot content.
|
|
7
|
-
*
|
|
8
|
-
* Applies the standard ComboBox dropdown appearance — white background,
|
|
9
|
-
* border, border-radius, box-shadow and top margin — so consumers don't
|
|
10
|
-
* have to replicate it in every optionsSlot implementation.
|
|
11
|
-
*
|
|
12
|
-
* Use it as the outermost wrapper of your optionsSlot:
|
|
13
|
-
*
|
|
14
|
-
* ```tsx
|
|
15
|
-
* import ComboBox, { ComboBoxOptionsSlot } from '@pixum/combobox'
|
|
16
|
-
*
|
|
17
|
-
* <ComboBox
|
|
18
|
-
* optionsSlot={
|
|
19
|
-
* <ComboBoxOptionsSlot>
|
|
20
|
-
* <MyCustomOptionsList />
|
|
21
|
-
* </ComboBoxOptionsSlot>
|
|
22
|
-
* }
|
|
23
|
-
* />
|
|
24
|
-
* ```
|
|
25
|
-
*
|
|
26
|
-
* @param children - The slot content to render inside the container
|
|
27
|
-
* @returns A styled wrapper div matching the ComboBox dropdown look
|
|
28
|
-
*/
|
|
29
|
-
export function ComboBoxOptionsSlot({ children, className = '', role = '', tag = 'ul', }) {
|
|
30
|
-
return (_jsx(Menu, { tag: tag, className: clsx(className, 'combobox__options-slot'), role: role, children: children }));
|
|
31
|
-
}
|
|
32
|
-
//# sourceMappingURL=ComboBoxOptionsSlot.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"ComboBoxOptionsSlot.js","sourceRoot":"","sources":["../../src/partials/ComboBoxOptionsSlot.tsx"],"names":[],"mappings":";AACA,OAAO,eAAe,CAAA;AACtB,OAAO,IAAI,MAAM,aAAa,CAAA;AAC9B,OAAO,IAAI,MAAM,MAAM,CAAA;AASvB;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,MAAM,UAAU,mBAAmB,CAAC,EAClC,QAAQ,EACR,SAAS,GAAG,EAAE,EACd,IAAI,GAAG,EAAE,EACT,GAAG,GAAG,IAAI,GACe;IACzB,OAAO,CACL,KAAC,IAAI,IACH,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAI,CAAC,SAAS,EAAE,wBAAwB,CAAC,EACpD,IAAI,EAAE,IAAI,YAET,QAAQ,GACJ,CACR,CAAA;AACH,CAAC"}
|
|
@@ -1,29 +0,0 @@
|
|
|
1
|
-
import type { ReactNode } from 'react';
|
|
2
|
-
import '../styles.css';
|
|
3
|
-
/**
|
|
4
|
-
* Styled container for optionsSlot content.
|
|
5
|
-
*
|
|
6
|
-
* Applies the standard ComboBox dropdown appearance — white background,
|
|
7
|
-
* border, border-radius, box-shadow and top margin — so consumers don't
|
|
8
|
-
* have to replicate it in every optionsSlot implementation.
|
|
9
|
-
*
|
|
10
|
-
* Use it as the outermost wrapper of your optionsSlot:
|
|
11
|
-
*
|
|
12
|
-
* ```tsx
|
|
13
|
-
* import ComboBox, { ComboBoxSlotContainer } from '@pixum/combobox'
|
|
14
|
-
*
|
|
15
|
-
* <ComboBox
|
|
16
|
-
* optionsSlot={
|
|
17
|
-
* <ComboBoxSlotContainer>
|
|
18
|
-
* <MyCustomOptionsList />
|
|
19
|
-
* </ComboBoxSlotContainer>
|
|
20
|
-
* }
|
|
21
|
-
* />
|
|
22
|
-
* ```
|
|
23
|
-
*
|
|
24
|
-
* @param children - The slot content to render inside the container
|
|
25
|
-
* @returns A styled wrapper div matching the ComboBox dropdown look
|
|
26
|
-
*/
|
|
27
|
-
export declare function ComboBoxSlotContainer({ children }: {
|
|
28
|
-
children: ReactNode;
|
|
29
|
-
}): import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,30 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import '../styles.css';
|
|
3
|
-
/**
|
|
4
|
-
* Styled container for optionsSlot content.
|
|
5
|
-
*
|
|
6
|
-
* Applies the standard ComboBox dropdown appearance — white background,
|
|
7
|
-
* border, border-radius, box-shadow and top margin — so consumers don't
|
|
8
|
-
* have to replicate it in every optionsSlot implementation.
|
|
9
|
-
*
|
|
10
|
-
* Use it as the outermost wrapper of your optionsSlot:
|
|
11
|
-
*
|
|
12
|
-
* ```tsx
|
|
13
|
-
* import ComboBox, { ComboBoxSlotContainer } from '@pixum/combobox'
|
|
14
|
-
*
|
|
15
|
-
* <ComboBox
|
|
16
|
-
* optionsSlot={
|
|
17
|
-
* <ComboBoxSlotContainer>
|
|
18
|
-
* <MyCustomOptionsList />
|
|
19
|
-
* </ComboBoxSlotContainer>
|
|
20
|
-
* }
|
|
21
|
-
* />
|
|
22
|
-
* ```
|
|
23
|
-
*
|
|
24
|
-
* @param children - The slot content to render inside the container
|
|
25
|
-
* @returns A styled wrapper div matching the ComboBox dropdown look
|
|
26
|
-
*/
|
|
27
|
-
export function ComboBoxSlotContainer({ children }) {
|
|
28
|
-
return _jsx("div", { className: "combobox__slot-container", children: children });
|
|
29
|
-
}
|
|
30
|
-
//# sourceMappingURL=ComboBoxSlotContainer.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"ComboBoxSlotContainer.js","sourceRoot":"","sources":["../../src/partials/ComboBoxSlotContainer.tsx"],"names":[],"mappings":";AACA,OAAO,eAAe,CAAA;AAEtB;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,MAAM,UAAU,qBAAqB,CAAC,EAAE,QAAQ,EAA2B;IACzE,OAAO,cAAK,SAAS,EAAC,0BAA0B,YAAE,QAAQ,GAAO,CAAA;AACnE,CAAC"}
|