@pixum/combobox 5.10.9 → 7.0.0-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.
Files changed (70) hide show
  1. package/CHANGELOG.md +741 -0
  2. package/lib/ComboBox.d.ts +4 -36
  3. package/lib/ComboBox.js +67 -240
  4. package/lib/ComboBox.js.map +1 -1
  5. package/lib/ComboboxOptions/Options.d.ts +1 -0
  6. package/lib/ComboboxOptions/Options.js +9 -12
  7. package/lib/ComboboxOptions/Options.js.map +1 -1
  8. package/lib/ComboboxOptions/OptionsGroup.d.ts +1 -0
  9. package/lib/ComboboxOptions/OptionsGroup.js +2 -2
  10. package/lib/ComboboxOptions/OptionsGroup.js.map +1 -1
  11. package/lib/ComboboxOptions/index.js +7 -4
  12. package/lib/ComboboxOptions/index.js.map +1 -1
  13. package/lib/helper/scrollOptionToViewport.js +3 -4
  14. package/lib/helper/scrollOptionToViewport.js.map +1 -1
  15. package/lib/helper/useIsDesktopScreenWidth.js.map +1 -1
  16. package/lib/index.d.ts +3 -4
  17. package/lib/index.js +3 -3
  18. package/lib/index.js.map +1 -1
  19. package/lib/styles.css +1 -1
  20. package/lib/types.d.ts +14 -196
  21. package/package.json +9 -8
  22. package/lib/ComboBox.module.css +0 -1
  23. package/lib/ComboBox.test.d.ts +0 -1
  24. package/lib/ComboBox.test.js +0 -32
  25. package/lib/ComboBox.test.js.map +0 -1
  26. package/lib/hooks/index.d.ts +0 -3
  27. package/lib/hooks/index.js +0 -4
  28. package/lib/hooks/index.js.map +0 -1
  29. package/lib/hooks/useComboBox.d.ts +0 -60
  30. package/lib/hooks/useComboBox.js +0 -226
  31. package/lib/hooks/useComboBox.js.map +0 -1
  32. package/lib/hooks/useComboBoxFocus.d.ts +0 -35
  33. package/lib/hooks/useComboBoxFocus.js +0 -49
  34. package/lib/hooks/useComboBoxFocus.js.map +0 -1
  35. package/lib/hooks/useIsDesktopScreenWidth.d.ts +0 -6
  36. package/lib/hooks/useIsDesktopScreenWidth.js +0 -46
  37. package/lib/hooks/useIsDesktopScreenWidth.js.map +0 -1
  38. package/lib/partials/ComboBoxNoResults.d.ts +0 -14
  39. package/lib/partials/ComboBoxNoResults.js +0 -18
  40. package/lib/partials/ComboBoxNoResults.js.map +0 -1
  41. package/lib/partials/ComboBoxOptions.d.ts +0 -21
  42. package/lib/partials/ComboBoxOptions.js +0 -33
  43. package/lib/partials/ComboBoxOptions.js.map +0 -1
  44. package/lib/partials/ComboBoxOptionsGroup.d.ts +0 -15
  45. package/lib/partials/ComboBoxOptionsGroup.js +0 -31
  46. package/lib/partials/ComboBoxOptionsGroup.js.map +0 -1
  47. package/lib/partials/ComboBoxOptionsItems.d.ts +0 -39
  48. package/lib/partials/ComboBoxOptionsItems.js +0 -56
  49. package/lib/partials/ComboBoxOptionsItems.js.map +0 -1
  50. package/lib/partials/ComboBoxOptionsSlot.d.ts +0 -35
  51. package/lib/partials/ComboBoxOptionsSlot.js +0 -47
  52. package/lib/partials/ComboBoxOptionsSlot.js.map +0 -1
  53. package/lib/partials/ComboBoxOptionsWithGrouping.d.ts +0 -26
  54. package/lib/partials/ComboBoxOptionsWithGrouping.js +0 -14
  55. package/lib/partials/ComboBoxOptionsWithGrouping.js.map +0 -1
  56. package/lib/partials/index.d.ts +0 -5
  57. package/lib/partials/index.js +0 -6
  58. package/lib/partials/index.js.map +0 -1
  59. package/lib/utils/calculateListMaxHeight.d.ts +0 -7
  60. package/lib/utils/calculateListMaxHeight.js +0 -14
  61. package/lib/utils/calculateListMaxHeight.js.map +0 -1
  62. package/lib/utils/index.d.ts +0 -1
  63. package/lib/utils/index.js +0 -2
  64. package/lib/utils/index.js.map +0 -1
  65. package/lib/utils/options.d.ts +0 -77
  66. package/lib/utils/options.js +0 -145
  67. package/lib/utils/options.js.map +0 -1
  68. package/lib/utils/scrollOptionToViewport.d.ts +0 -7
  69. package/lib/utils/scrollOptionToViewport.js +0 -26
  70. package/lib/utils/scrollOptionToViewport.js.map +0 -1
@@ -1,49 +0,0 @@
1
- 'use client';
2
- import { useCallback, useEffect, useRef } from 'react';
3
- /**
4
- * Bundles the focus choreography of the ComboBox:
5
- *
6
- * - opening moves the focus into the search field as soon as it mounts,
7
- * - closing moves it back to the trigger,
8
- * - the focus handler of the trigger can tell a returning focus from a real
9
- * user focus and therefore does not re-open the list it just closed.
10
- *
11
- * The search field is wired up with a callback ref, so both the popover and the
12
- * bottom sheet share one implementation and no polling is needed.
13
- *
14
- * @returns Refs and helpers for the focus handling
15
- */
16
- export function useComboBoxFocus() {
17
- const triggerRef = useRef(null);
18
- const returningFocus = useRef(false);
19
- const frameRef = useRef(null);
20
- useEffect(() => () => {
21
- if (frameRef.current !== null)
22
- cancelAnimationFrame(frameRef.current);
23
- }, []);
24
- const searchInputRef = useCallback((input) => {
25
- if (!input)
26
- return;
27
- input.focus();
28
- // One frame later, so Safari does not drop the selection again when
29
- // `readOnly` changes within the same render.
30
- requestAnimationFrame(() => {
31
- var _a;
32
- (_a = input.setSelectionRange) === null || _a === void 0 ? void 0 : _a.call(input, 0, input.value.length);
33
- });
34
- }, []);
35
- const returnFocusToTrigger = useCallback(() => {
36
- returningFocus.current = true;
37
- // Wait for the commit that unmounts the popover / bottom sheet, otherwise
38
- // the focus would end up on `<body>`.
39
- frameRef.current = requestAnimationFrame(() => {
40
- var _a;
41
- (_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
42
- // `focus()` dispatches synchronously, so the flag has served its purpose.
43
- returningFocus.current = false;
44
- });
45
- }, []);
46
- const isReturningFocus = useCallback(() => returningFocus.current, []);
47
- return { triggerRef, searchInputRef, returnFocusToTrigger, isReturningFocus };
48
- }
49
- //# sourceMappingURL=useComboBoxFocus.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"useComboBoxFocus.js","sourceRoot":"","sources":["../../src/hooks/useComboBoxFocus.ts"],"names":[],"mappings":"AAAA,YAAY,CAAA;AAEZ,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAA;AAwBtD;;;;;;;;;;;;GAYG;AACH,MAAM,UAAU,gBAAgB;IAC9B,MAAM,UAAU,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAA;IACjD,MAAM,cAAc,GAAG,MAAM,CAAC,KAAK,CAAC,CAAA;IACpC,MAAM,QAAQ,GAAG,MAAM,CAAgB,IAAI,CAAC,CAAA;IAE5C,SAAS,CACP,GAAG,EAAE,CAAC,GAAG,EAAE;QACT,IAAI,QAAQ,CAAC,OAAO,KAAK,IAAI;YAAE,oBAAoB,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAA;IACvE,CAAC,EACD,EAAE,CACH,CAAA;IAED,MAAM,cAAc,GAAG,WAAW,CAAC,CAAC,KAA8B,EAAE,EAAE;QACpE,IAAI,CAAC,KAAK;YAAE,OAAM;QAElB,KAAK,CAAC,KAAK,EAAE,CAAA;QAEb,oEAAoE;QACpE,6CAA6C;QAC7C,qBAAqB,CAAC,GAAG,EAAE;;YACzB,MAAA,KAAK,CAAC,iBAAiB,sDAAG,CAAC,EAAE,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,CAAA;QAClD,CAAC,CAAC,CAAA;IACJ,CAAC,EAAE,EAAE,CAAC,CAAA;IAEN,MAAM,oBAAoB,GAAG,WAAW,CAAC,GAAG,EAAE;QAC5C,cAAc,CAAC,OAAO,GAAG,IAAI,CAAA;QAE7B,0EAA0E;QAC1E,sCAAsC;QACtC,QAAQ,CAAC,OAAO,GAAG,qBAAqB,CAAC,GAAG,EAAE;;YAC5C,MAAA,UAAU,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAA;YAC3B,0EAA0E;YAC1E,cAAc,CAAC,OAAO,GAAG,KAAK,CAAA;QAChC,CAAC,CAAC,CAAA;IACJ,CAAC,EAAE,EAAE,CAAC,CAAA;IAEN,MAAM,gBAAgB,GAAG,WAAW,CAAC,GAAG,EAAE,CAAC,cAAc,CAAC,OAAO,EAAE,EAAE,CAAC,CAAA;IAEtE,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,oBAAoB,EAAE,gBAAgB,EAAE,CAAA;AAC/E,CAAC"}
@@ -1,6 +0,0 @@
1
- /**
2
- * Custom hook that detects whether the viewport width is desktop size (>= 960px).
3
- *
4
- * @returns True if the viewport width is 960px or greater, false otherwise
5
- */
6
- export declare function useIsDesktopScreenWidth(): boolean;
@@ -1,46 +0,0 @@
1
- 'use client';
2
- import { useSyncExternalStore } from 'react';
3
- const DESKTOP_MEDIA_QUERY = '(min-width: 960px)';
4
- /**
5
- * Subscribes to the MediaQueryList. Using `change` instead of `resize` means
6
- * there is only one re-render when the breakpoint is actually crossed.
7
- *
8
- * @param onStoreChange - Callback invoked when the breakpoint match changes
9
- * @returns An unsubscribe function that removes the listener
10
- */
11
- function subscribe(onStoreChange) {
12
- if (typeof window === 'undefined' || !window.matchMedia) {
13
- return () => { };
14
- }
15
- const mediaQueryList = window.matchMedia(DESKTOP_MEDIA_QUERY);
16
- mediaQueryList.addEventListener('change', onStoreChange);
17
- return () => mediaQueryList.removeEventListener('change', onStoreChange);
18
- }
19
- /**
20
- * Client snapshot: the current match state of the desktop breakpoint.
21
- *
22
- * @returns True if the desktop breakpoint currently matches, false otherwise
23
- */
24
- function getSnapshot() {
25
- if (typeof window === 'undefined' || !window.matchMedia)
26
- return false;
27
- return window.matchMedia(DESKTOP_MEDIA_QUERY).matches;
28
- }
29
- /**
30
- * Server snapshot: deliberately `false` (mobile first), so that the server
31
- * render and the first client render match deterministically.
32
- *
33
- * @returns Always false
34
- */
35
- function getServerSnapshot() {
36
- return false;
37
- }
38
- /**
39
- * Custom hook that detects whether the viewport width is desktop size (>= 960px).
40
- *
41
- * @returns True if the viewport width is 960px or greater, false otherwise
42
- */
43
- export function useIsDesktopScreenWidth() {
44
- return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
45
- }
46
- //# sourceMappingURL=useIsDesktopScreenWidth.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"useIsDesktopScreenWidth.js","sourceRoot":"","sources":["../../src/hooks/useIsDesktopScreenWidth.ts"],"names":[],"mappings":"AAAA,YAAY,CAAA;AAEZ,OAAO,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAA;AAE5C,MAAM,mBAAmB,GAAG,oBAAoB,CAAA;AAEhD;;;;;;GAMG;AACH,SAAS,SAAS,CAAC,aAAyB;IAC1C,IAAI,OAAO,MAAM,KAAK,WAAW,IAAI,CAAC,MAAM,CAAC,UAAU,EAAE,CAAC;QACxD,OAAO,GAAG,EAAE,GAAE,CAAC,CAAA;IACjB,CAAC;IAED,MAAM,cAAc,GAAG,MAAM,CAAC,UAAU,CAAC,mBAAmB,CAAC,CAAA;IAC7D,cAAc,CAAC,gBAAgB,CAAC,QAAQ,EAAE,aAAa,CAAC,CAAA;IAExD,OAAO,GAAG,EAAE,CAAC,cAAc,CAAC,mBAAmB,CAAC,QAAQ,EAAE,aAAa,CAAC,CAAA;AAC1E,CAAC;AAED;;;;GAIG;AACH,SAAS,WAAW;IAClB,IAAI,OAAO,MAAM,KAAK,WAAW,IAAI,CAAC,MAAM,CAAC,UAAU;QAAE,OAAO,KAAK,CAAA;IAErE,OAAO,MAAM,CAAC,UAAU,CAAC,mBAAmB,CAAC,CAAC,OAAO,CAAA;AACvD,CAAC;AAED;;;;;GAKG;AACH,SAAS,iBAAiB;IACxB,OAAO,KAAK,CAAA;AACd,CAAC;AAED;;;;GAIG;AACH,MAAM,UAAU,uBAAuB;IACrC,OAAO,oBAAoB,CAAC,SAAS,EAAE,WAAW,EAAE,iBAAiB,CAAC,CAAA;AACxE,CAAC"}
@@ -1,14 +0,0 @@
1
- export interface ComboBoxNoResultsProps {
2
- /** Message shown when no option matches the search. */
3
- text?: string;
4
- }
5
- /**
6
- * Empty state of the options list.
7
- *
8
- * `role="status"` makes screen readers announce the message when the list is
9
- * filtered down to nothing.
10
- *
11
- * @param props - The props for the ComboBoxNoResults component
12
- * @returns The no-results message
13
- */
14
- export declare function ComboBoxNoResults({ text }: ComboBoxNoResultsProps): import("react/jsx-runtime").JSX.Element | null;
@@ -1,18 +0,0 @@
1
- import { jsx as _jsx } from "react/jsx-runtime";
2
- import Text, { TEXT_VARIANT } from '@pixum/text';
3
- import styles from '../ComboBox.module.css';
4
- /**
5
- * Empty state of the options list.
6
- *
7
- * `role="status"` makes screen readers announce the message when the list is
8
- * filtered down to nothing.
9
- *
10
- * @param props - The props for the ComboBoxNoResults component
11
- * @returns The no-results message
12
- */
13
- export function ComboBoxNoResults({ text }) {
14
- if (!text)
15
- return null;
16
- return (_jsx(Text, { variant: TEXT_VARIANT.SUBHEADLINE, className: styles.noResults, children: text }));
17
- }
18
- //# sourceMappingURL=ComboBoxNoResults.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"ComboBoxNoResults.js","sourceRoot":"","sources":["../../src/partials/ComboBoxNoResults.tsx"],"names":[],"mappings":";AAAA,OAAO,IAAI,EAAE,EAAE,YAAY,EAAE,MAAM,aAAa,CAAA;AAChD,OAAO,MAAM,MAAM,wBAAwB,CAAA;AAO3C;;;;;;;;GAQG;AACH,MAAM,UAAU,iBAAiB,CAAC,EAAE,IAAI,EAA0B;IAChE,IAAI,CAAC,IAAI;QAAE,OAAO,IAAI,CAAA;IAEtB,OAAO,CACL,KAAC,IAAI,IAAC,OAAO,EAAE,YAAY,CAAC,WAAW,EAAE,SAAS,EAAE,MAAM,CAAC,SAAS,YACjE,IAAI,GACA,CACR,CAAA;AACH,CAAC"}
@@ -1,21 +0,0 @@
1
- import type { ComboBoxOptionsPanelProps } from '../types';
2
- /**
3
- * Renders the options panel of the ComboBox.
4
- *
5
- * The panel is split in two: the `Menu` provides the visible box, the element
6
- * inside it carries the `listbox` role and is the only part that scrolls. That
7
- * keeps `optionDetails` a real footer - it stays visible without
8
- * `position: sticky` and can no longer cover the active option - and it keeps
9
- * the listbox free of anything that is not an option or a group, as ARIA
10
- * requires.
11
- *
12
- * Flat and grouped options share one render path: the options arrive already
13
- * normalised, `groupOptions` only splits them into their visual groups again.
14
- * The listbox is not focusable - the focus stays in the input field, the active
15
- * option is announced through `aria-activedescendant`.
16
- *
17
- * @param props - The props for the ComboBoxOptions component
18
- * @returns The options panel
19
- */
20
- export declare function ComboBoxOptions({ options, listboxAriaProps, selectedValues, activeOptionId, leadingType, optionDetails, onOptionClick, }: ComboBoxOptionsPanelProps): import("react/jsx-runtime").JSX.Element;
21
- export default ComboBoxOptions;
@@ -1,33 +0,0 @@
1
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
- import Menu from '@pixum/menu';
3
- import Text, { TEXT_VARIANT } from '@pixum/text';
4
- import clsx from 'clsx';
5
- import { groupOptions } from '../utils';
6
- import { ComboBoxOptionsGroup } from './ComboBoxOptionsGroup';
7
- import styles from '../ComboBox.module.css';
8
- /**
9
- * Renders the options panel of the ComboBox.
10
- *
11
- * The panel is split in two: the `Menu` provides the visible box, the element
12
- * inside it carries the `listbox` role and is the only part that scrolls. That
13
- * keeps `optionDetails` a real footer - it stays visible without
14
- * `position: sticky` and can no longer cover the active option - and it keeps
15
- * the listbox free of anything that is not an option or a group, as ARIA
16
- * requires.
17
- *
18
- * Flat and grouped options share one render path: the options arrive already
19
- * normalised, `groupOptions` only splits them into their visual groups again.
20
- * The listbox is not focusable - the focus stays in the input field, the active
21
- * option is announced through `aria-activedescendant`.
22
- *
23
- * @param props - The props for the ComboBoxOptions component
24
- * @returns The options panel
25
- */
26
- export function ComboBoxOptions({ options, listboxAriaProps, selectedValues, activeOptionId, leadingType, optionDetails, onOptionClick, }) {
27
- return (_jsxs(Menu, { className: styles.panel, "data-tappable": "true", children: [_jsx("div", Object.assign({ className: clsx(styles.options, 'scrollable'), tabIndex: -1 }, listboxAriaProps, { children: groupOptions(options).map(group => {
28
- var _a;
29
- return (_jsx(ComboBoxOptionsGroup, { group: group.group, options: group.options, selectedValues: selectedValues, activeOptionId: activeOptionId, leadingType: leadingType, onOptionClick: onOptionClick }, `combobox__options-group-${(_a = group.group) !== null && _a !== void 0 ? _a : 'default'}`));
30
- }) })), optionDetails && (_jsx(Text, { variant: TEXT_VARIANT.CAPTION, className: styles.optionDetails, children: optionDetails }))] }));
31
- }
32
- export default ComboBoxOptions;
33
- //# sourceMappingURL=ComboBoxOptions.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"ComboBoxOptions.js","sourceRoot":"","sources":["../../src/partials/ComboBoxOptions.tsx"],"names":[],"mappings":";AAAA,OAAO,IAAI,MAAM,aAAa,CAAA;AAC9B,OAAO,IAAI,EAAE,EAAE,YAAY,EAAE,MAAM,aAAa,CAAA;AAChD,OAAO,IAAI,MAAM,MAAM,CAAA;AACvB,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AACvC,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAA;AAC7D,OAAO,MAAM,MAAM,wBAAwB,CAAA;AAG3C;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,UAAU,eAAe,CAAC,EAC9B,OAAO,EACP,gBAAgB,EAChB,cAAc,EACd,cAAc,EACd,WAAW,EACX,aAAa,EACb,aAAa,GACa;IAC1B,OAAO,CACL,MAAC,IAAI,IAAC,SAAS,EAAE,MAAM,CAAC,KAAK,mBAAgB,MAAM,aACjD,4BACE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,OAAO,EAAE,YAAY,CAAC,EAC7C,QAAQ,EAAE,CAAC,CAAC,IACR,gBAAgB,cAEnB,YAAY,CAAC,OAAO,CAAC,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE;;oBAAC,OAAA,CAClC,KAAC,oBAAoB,IAEnB,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,cAAc,EAAE,cAAc,EAC9B,cAAc,EAAE,cAAc,EAC9B,WAAW,EAAE,WAAW,EACxB,aAAa,EAAE,aAAa,IANvB,2BAA2B,MAAA,KAAK,CAAC,KAAK,mCAAI,SAAS,EAAE,CAO1D,CACH,CAAA;iBAAA,CAAC,IACE,EAEL,aAAa,IAAI,CAChB,KAAC,IAAI,IAAC,OAAO,EAAE,YAAY,CAAC,OAAO,EAAE,SAAS,EAAE,MAAM,CAAC,aAAa,YACjE,aAAa,GACT,CACR,IACI,CACR,CAAA;AACH,CAAC;AAED,eAAe,eAAe,CAAA"}
@@ -1,15 +0,0 @@
1
- import type { ComboBoxOptionsItemsProps } from './ComboBoxOptionsItems';
2
- export interface ComboBoxOptionsGroupProps extends ComboBoxOptionsItemsProps {
3
- /** Group headline. Without it the options are rendered without a header. */
4
- group?: string;
5
- }
6
- /**
7
- * Renders one group of options with an optional sticky headline.
8
- *
9
- * Flat lists use the same component with `group` left undefined, so there is
10
- * only one place that renders options.
11
- *
12
- * @param props - The props for the ComboBoxOptionsGroup component
13
- * @returns A group container with an optional header and its options
14
- */
15
- export declare function ComboBoxOptionsGroup({ group, ...itemProps }: ComboBoxOptionsGroupProps): import("react/jsx-runtime").JSX.Element;
@@ -1,31 +0,0 @@
1
- var __rest = (this && this.__rest) || function (s, e) {
2
- var t = {};
3
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
4
- t[p] = s[p];
5
- if (s != null && typeof Object.getOwnPropertySymbols === "function")
6
- for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
7
- if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
8
- t[p[i]] = s[p[i]];
9
- }
10
- return t;
11
- };
12
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
13
- import Text, { TEXT_VARIANT } from '@pixum/text';
14
- import { ComboBoxOptionsItems } from './ComboBoxOptionsItems';
15
- import styles from '../ComboBox.module.css';
16
- /**
17
- * Renders one group of options with an optional sticky headline.
18
- *
19
- * Flat lists use the same component with `group` left undefined, so there is
20
- * only one place that renders options.
21
- *
22
- * @param props - The props for the ComboBoxOptionsGroup component
23
- * @returns A group container with an optional header and its options
24
- */
25
- export function ComboBoxOptionsGroup(_a) {
26
- var { group } = _a, itemProps = __rest(_a, ["group"]);
27
- if (!group)
28
- return _jsx(ComboBoxOptionsItems, Object.assign({}, itemProps));
29
- return (_jsxs("div", { role: "group", "aria-label": group, children: [_jsx(Text, { variant: TEXT_VARIANT.HEADLINE, className: styles.stickyHeader, children: group }), _jsx(ComboBoxOptionsItems, Object.assign({}, itemProps))] }));
30
- }
31
- //# sourceMappingURL=ComboBoxOptionsGroup.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"ComboBoxOptionsGroup.js","sourceRoot":"","sources":["../../src/partials/ComboBoxOptionsGroup.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,IAAI,EAAE,EAAE,YAAY,EAAE,MAAM,aAAa,CAAA;AAChD,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAA;AAC7D,OAAO,MAAM,MAAM,wBAAwB,CAAA;AAQ3C;;;;;;;;GAQG;AACH,MAAM,UAAU,oBAAoB,CAAC,EAGT;QAHS,EACnC,KAAK,OAEqB,EADvB,SAAS,cAFuB,SAGpC,CADa;IAEZ,IAAI,CAAC,KAAK;QAAE,OAAO,KAAC,oBAAoB,oBAAK,SAAS,EAAI,CAAA;IAE1D,OAAO,CACL,eAAK,IAAI,EAAC,OAAO,gBAAa,KAAK,aACjC,KAAC,IAAI,IAAC,OAAO,EAAE,YAAY,CAAC,QAAQ,EAAE,SAAS,EAAE,MAAM,CAAC,YAAY,YACjE,KAAK,GACD,EACP,KAAC,oBAAoB,oBAAK,SAAS,EAAI,IACnC,CACP,CAAA;AACH,CAAC"}
@@ -1,39 +0,0 @@
1
- import { LeadingType } from '@pixum/menu-item';
2
- import type { ComboBoxOption } from '../types';
3
- export interface ComboBoxOptionsItemsProps {
4
- /** Normalised options to render. */
5
- options: ComboBoxOption[];
6
- /** Values that are currently selected. */
7
- selectedValues: string[];
8
- /** DOM id of the active option (`aria-activedescendant`). */
9
- activeOptionId?: string;
10
- /** Type of the leading element, e.g. a checkbox for multi select. */
11
- leadingType?: LeadingType;
12
- /** Called with the value of the clicked option. */
13
- onOptionClick: (value: string) => void;
14
- }
15
- /**
16
- * Renders the individual options.
17
- *
18
- * The options are deliberately not focusable: the focus stays in the input
19
- * field and the highlight is driven by `aria-activedescendant`. Checkbox
20
- * options are ordinary options with `aria-selected` - inside a listbox that is
21
- * the state screen readers announce, and it keeps mouse and keyboard selection
22
- * on exactly the same code path.
23
- *
24
- * An option is a `MenuItemProps` object, so everything except the ComboBox
25
- * specific `key` and `disabled` is spread onto the `MenuItem` unchanged.
26
- * Consumers that pass further MenuItem props keep working without the ComboBox
27
- * having to know about them; only `selected`, `tabIndex` and the keyboard
28
- * handling are owned by the ComboBox and therefore not overridable.
29
- *
30
- * Styling hooks: every option carries its state as a data attribute
31
- * (`data-selected`, `data-active`, `data-disabled`), so consumers can style
32
- * options without knowing the hashed module class names. The selection state is
33
- * left to `MenuItem` itself - the component does not add a `selected` class of
34
- * its own, which would be impossible to override from the outside.
35
- *
36
- * @param props - The props for the ComboBoxOptionsItems component
37
- * @returns A list of selectable options
38
- */
39
- export declare function ComboBoxOptionsItems({ options, selectedValues, activeOptionId, leadingType, onOptionClick, }: ComboBoxOptionsItemsProps): import("react/jsx-runtime").JSX.Element;
@@ -1,56 +0,0 @@
1
- import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
2
- import MenuItem, { LeadingType } from '@pixum/menu-item';
3
- import clsx from 'clsx';
4
- import { toMenuItemProps } from '../utils';
5
- import styles from '../ComboBox.module.css';
6
- /**
7
- * Renders the individual options.
8
- *
9
- * The options are deliberately not focusable: the focus stays in the input
10
- * field and the highlight is driven by `aria-activedescendant`. Checkbox
11
- * options are ordinary options with `aria-selected` - inside a listbox that is
12
- * the state screen readers announce, and it keeps mouse and keyboard selection
13
- * on exactly the same code path.
14
- *
15
- * An option is a `MenuItemProps` object, so everything except the ComboBox
16
- * specific `key` and `disabled` is spread onto the `MenuItem` unchanged.
17
- * Consumers that pass further MenuItem props keep working without the ComboBox
18
- * having to know about them; only `selected`, `tabIndex` and the keyboard
19
- * handling are owned by the ComboBox and therefore not overridable.
20
- *
21
- * Styling hooks: every option carries its state as a data attribute
22
- * (`data-selected`, `data-active`, `data-disabled`), so consumers can style
23
- * options without knowing the hashed module class names. The selection state is
24
- * left to `MenuItem` itself - the component does not add a `selected` class of
25
- * its own, which would be impossible to override from the outside.
26
- *
27
- * @param props - The props for the ComboBoxOptionsItems component
28
- * @returns A list of selectable options
29
- */
30
- export function ComboBoxOptionsItems({ options, selectedValues, activeOptionId, leadingType, onOptionClick, }) {
31
- const isCheckbox = leadingType === LeadingType.CheckBox;
32
- return (_jsx(_Fragment, { children: options.map(({ item, id, value, disabled }) => {
33
- var _a;
34
- const isSelected = selectedValues.includes(value);
35
- const isActive = id === activeOptionId;
36
- const menuItemProps = toMenuItemProps(item);
37
- return (_jsx("div", { id: id, className: clsx(styles.option, isCheckbox && styles.optionCheckbox, isActive && styles.optionActive), role: "option", "aria-selected": isSelected, "aria-disabled": disabled || undefined, "data-selected": isSelected, "data-active": isActive, "data-disabled": disabled || undefined, onMouseDown: event => {
38
- // Keeps the focus in the input field ...
39
- event.preventDefault();
40
- // ... and keeps the bottom sheet's drag handler out of it.
41
- event.stopPropagation();
42
- }, onPointerDown: event => event.stopPropagation(),
43
- // No preventDefault on touchstart, scrolling in the sheet must work.
44
- onTouchStart: event => event.stopPropagation(), onClickCapture: event => {
45
- event.stopPropagation();
46
- if (disabled)
47
- return;
48
- onOptionClick(value);
49
- }, children: _jsx(MenuItem, Object.assign({}, menuItemProps, { tabIndex: -1, disableKeyboardNav: true,
50
- // A leading type set on the ComboBox wins over the option's own
51
- // one: it is what makes multi select look like a checkbox list.
52
- leadingProps: leadingType
53
- ? Object.assign(Object.assign({}, menuItemProps.leadingProps), { name: value, type: leadingType }) : menuItemProps.leadingProps, selected: isSelected })) }, (_a = item.key) !== null && _a !== void 0 ? _a : `combobox-item-wrapper-${id}`));
54
- }) }));
55
- }
56
- //# sourceMappingURL=ComboBoxOptionsItems.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"ComboBoxOptionsItems.js","sourceRoot":"","sources":["../../src/partials/ComboBoxOptionsItems.tsx"],"names":[],"mappings":";AAAA,OAAO,QAAQ,EAAE,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAA;AACxD,OAAO,IAAI,MAAM,MAAM,CAAA;AACvB,OAAO,EAAE,eAAe,EAAE,MAAM,UAAU,CAAA;AAC1C,OAAO,MAAM,MAAM,wBAAwB,CAAA;AAgB3C;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,MAAM,UAAU,oBAAoB,CAAC,EACnC,OAAO,EACP,cAAc,EACd,cAAc,EACd,WAAW,EACX,aAAa,GACa;IAC1B,MAAM,UAAU,GAAG,WAAW,KAAK,WAAW,CAAC,QAAQ,CAAA;IAEvD,OAAO,CACL,4BACG,OAAO,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,EAAE;;YAC7C,MAAM,UAAU,GAAG,cAAc,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAA;YACjD,MAAM,QAAQ,GAAG,EAAE,KAAK,cAAc,CAAA;YACtC,MAAM,aAAa,GAAG,eAAe,CAAC,IAAI,CAAC,CAAA;YAE3C,OAAO,CACL,cAEE,EAAE,EAAE,EAAE,EACN,SAAS,EAAE,IAAI,CACb,MAAM,CAAC,MAAM,EACb,UAAU,IAAI,MAAM,CAAC,cAAc,EACnC,QAAQ,IAAI,MAAM,CAAC,YAAY,CAChC,EACD,IAAI,EAAC,QAAQ,mBACE,UAAU,mBACV,QAAQ,IAAI,SAAS,mBACrB,UAAU,iBACZ,QAAQ,mBACN,QAAQ,IAAI,SAAS,EACpC,WAAW,EAAE,KAAK,CAAC,EAAE;oBACnB,yCAAyC;oBACzC,KAAK,CAAC,cAAc,EAAE,CAAA;oBACtB,2DAA2D;oBAC3D,KAAK,CAAC,eAAe,EAAE,CAAA;gBACzB,CAAC,EACD,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,eAAe,EAAE;gBAC/C,qEAAqE;gBACrE,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,eAAe,EAAE,EAC9C,cAAc,EAAE,KAAK,CAAC,EAAE;oBACtB,KAAK,CAAC,eAAe,EAAE,CAAA;oBAEvB,IAAI,QAAQ;wBAAE,OAAM;oBAEpB,aAAa,CAAC,KAAK,CAAC,CAAA;gBACtB,CAAC,YAED,KAAC,QAAQ,oBACH,aAAa,IACjB,QAAQ,EAAE,CAAC,CAAC,EACZ,kBAAkB;oBAClB,gEAAgE;oBAChE,gEAAgE;oBAChE,YAAY,EACV,WAAW;wBACT,CAAC,iCACM,aAAa,CAAC,YAAY,KAC7B,IAAI,EAAE,KAAK,EACX,IAAI,EAAE,WAAW,IAErB,CAAC,CAAC,aAAa,CAAC,YAAY,EAEhC,QAAQ,EAAE,UAAU,IACpB,IA9CG,MAAA,IAAI,CAAC,GAAG,mCAAI,yBAAyB,EAAE,EAAE,CA+C1C,CACP,CAAA;QACH,CAAC,CAAC,GACD,CACJ,CAAA;AACH,CAAC"}
@@ -1,35 +0,0 @@
1
- import type { ElementType, HTMLAttributes, ReactNode } from 'react';
2
- export interface ComboBoxOptionsSlotProps extends HTMLAttributes<HTMLElement> {
3
- /** The content to render inside the options slot. */
4
- children: ReactNode;
5
- /** Element the slot renders as. */
6
- tag?: Extract<ElementType, 'div' | 'ul' | 'ol' | 'dl'>;
7
- }
8
- /**
9
- * Styled container for `optionsSlot` content.
10
- *
11
- * Applies the standard ComboBox dropdown appearance - background, border,
12
- * border radius, box shadow and top margin - so consumers do not have to
13
- * replicate it in every `optionsSlot` implementation. Every other prop
14
- * (`role`, `aria-*`, ...) is forwarded, because the slot content owns its own
15
- * accessibility semantics.
16
- *
17
- * A slot replaces the built-in options list and therefore also its keyboard
18
- * navigation: content rendered here has to bring its own key handling.
19
- *
20
- * ```tsx
21
- * import ComboBox, { ComboBoxOptionsSlot } from '@pixum/combobox'
22
- *
23
- * <ComboBox
24
- * optionsSlot={
25
- * <ComboBoxOptionsSlot role="listbox" aria-label="Pickup points">
26
- * <MyCustomOptionsList />
27
- * </ComboBoxOptionsSlot>
28
- * }
29
- * />
30
- * ```
31
- *
32
- * @param props - The props for the ComboBoxOptionsSlot component
33
- * @returns A styled wrapper matching the ComboBox dropdown look
34
- */
35
- export declare function ComboBoxOptionsSlot({ children, className, tag, ...rest }: ComboBoxOptionsSlotProps): import("react/jsx-runtime").JSX.Element;
@@ -1,47 +0,0 @@
1
- var __rest = (this && this.__rest) || function (s, e) {
2
- var t = {};
3
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
4
- t[p] = s[p];
5
- if (s != null && typeof Object.getOwnPropertySymbols === "function")
6
- for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
7
- if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
8
- t[p[i]] = s[p[i]];
9
- }
10
- return t;
11
- };
12
- import { jsx as _jsx } from "react/jsx-runtime";
13
- import Menu from '@pixum/menu';
14
- import clsx from 'clsx';
15
- import styles from '../ComboBox.module.css';
16
- /**
17
- * Styled container for `optionsSlot` content.
18
- *
19
- * Applies the standard ComboBox dropdown appearance - background, border,
20
- * border radius, box shadow and top margin - so consumers do not have to
21
- * replicate it in every `optionsSlot` implementation. Every other prop
22
- * (`role`, `aria-*`, ...) is forwarded, because the slot content owns its own
23
- * accessibility semantics.
24
- *
25
- * A slot replaces the built-in options list and therefore also its keyboard
26
- * navigation: content rendered here has to bring its own key handling.
27
- *
28
- * ```tsx
29
- * import ComboBox, { ComboBoxOptionsSlot } from '@pixum/combobox'
30
- *
31
- * <ComboBox
32
- * optionsSlot={
33
- * <ComboBoxOptionsSlot role="listbox" aria-label="Pickup points">
34
- * <MyCustomOptionsList />
35
- * </ComboBoxOptionsSlot>
36
- * }
37
- * />
38
- * ```
39
- *
40
- * @param props - The props for the ComboBoxOptionsSlot component
41
- * @returns A styled wrapper matching the ComboBox dropdown look
42
- */
43
- export function ComboBoxOptionsSlot(_a) {
44
- var { children, className, tag = 'ul' } = _a, rest = __rest(_a, ["children", "className", "tag"]);
45
- return (_jsx(Menu, Object.assign({ tag: tag, className: clsx(styles.optionsSlot, className) }, rest, { children: children })));
46
- }
47
- //# sourceMappingURL=ComboBoxOptionsSlot.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"ComboBoxOptionsSlot.js","sourceRoot":"","sources":["../../src/partials/ComboBoxOptionsSlot.tsx"],"names":[],"mappings":";;;;;;;;;;;;AACA,OAAO,IAAI,MAAM,aAAa,CAAA;AAC9B,OAAO,IAAI,MAAM,MAAM,CAAA;AACvB,OAAO,MAAM,MAAM,wBAAwB,CAAA;AAU3C;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,MAAM,UAAU,mBAAmB,CAAC,EAKT;QALS,EAClC,QAAQ,EACR,SAAS,EACT,GAAG,GAAG,IAAI,OAEe,EADtB,IAAI,cAJ2B,gCAKnC,CADQ;IAEP,OAAO,CACL,KAAC,IAAI,kBAAC,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,WAAW,EAAE,SAAS,CAAC,IAAM,IAAI,cACrE,QAAQ,IACJ,CACR,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: [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"}
@@ -1,5 +0,0 @@
1
- export * from './ComboBoxOptions';
2
- export * from './ComboBoxOptionsGroup';
3
- export * from './ComboBoxOptionsItems';
4
- export * from './ComboBoxOptionsSlot';
5
- export * from './ComboBoxNoResults';
@@ -1,6 +0,0 @@
1
- export * from './ComboBoxOptions';
2
- export * from './ComboBoxOptionsGroup';
3
- export * from './ComboBoxOptionsItems';
4
- export * from './ComboBoxOptionsSlot';
5
- export * from './ComboBoxNoResults';
6
- //# sourceMappingURL=index.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/partials/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAA;AACjC,cAAc,wBAAwB,CAAA;AACtC,cAAc,wBAAwB,CAAA;AACtC,cAAc,uBAAuB,CAAA;AACrC,cAAc,qBAAqB,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"}
@@ -1 +0,0 @@
1
- export * from './options';
@@ -1,2 +0,0 @@
1
- export * from './options';
2
- //# sourceMappingURL=index.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAA"}