@pixum/combobox 5.10.10 → 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 (65) 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 +12 -0
  6. package/lib/ComboboxOptions/Options.js +16 -0
  7. package/lib/ComboboxOptions/Options.js.map +1 -0
  8. package/lib/ComboboxOptions/OptionsGroup.d.ts +13 -0
  9. package/lib/ComboboxOptions/OptionsGroup.js +8 -0
  10. package/lib/ComboboxOptions/OptionsGroup.js.map +1 -0
  11. package/lib/ComboboxOptions/index.d.ts +4 -0
  12. package/lib/ComboboxOptions/index.js +22 -0
  13. package/lib/ComboboxOptions/index.js.map +1 -0
  14. package/lib/helper/calculateListMaxHeight.d.ts +1 -0
  15. package/lib/helper/calculateListMaxHeight.js +8 -0
  16. package/lib/helper/calculateListMaxHeight.js.map +1 -0
  17. package/lib/helper/scrollOptionToViewport.d.ts +1 -0
  18. package/lib/helper/scrollOptionToViewport.js +18 -0
  19. package/lib/helper/scrollOptionToViewport.js.map +1 -0
  20. package/lib/helper/useIsDesktopScreenWidth.d.ts +2 -0
  21. package/lib/helper/useIsDesktopScreenWidth.js +20 -0
  22. package/lib/helper/useIsDesktopScreenWidth.js.map +1 -0
  23. package/lib/index.d.ts +3 -4
  24. package/lib/index.js +3 -3
  25. package/lib/index.js.map +1 -1
  26. package/lib/styles.css +1 -0
  27. package/lib/types.d.ts +14 -196
  28. package/package.json +9 -8
  29. package/lib/ComboBox.module.css +0 -1
  30. package/lib/hooks/index.d.ts +0 -3
  31. package/lib/hooks/index.js +0 -4
  32. package/lib/hooks/index.js.map +0 -1
  33. package/lib/hooks/useComboBox.d.ts +0 -60
  34. package/lib/hooks/useComboBox.js +0 -226
  35. package/lib/hooks/useComboBox.js.map +0 -1
  36. package/lib/hooks/useComboBoxFocus.d.ts +0 -35
  37. package/lib/hooks/useComboBoxFocus.js +0 -49
  38. package/lib/hooks/useComboBoxFocus.js.map +0 -1
  39. package/lib/hooks/useIsDesktopScreenWidth.d.ts +0 -6
  40. package/lib/hooks/useIsDesktopScreenWidth.js +0 -46
  41. package/lib/hooks/useIsDesktopScreenWidth.js.map +0 -1
  42. package/lib/partials/ComboBoxNoResults.d.ts +0 -14
  43. package/lib/partials/ComboBoxNoResults.js +0 -18
  44. package/lib/partials/ComboBoxNoResults.js.map +0 -1
  45. package/lib/partials/ComboBoxOptions.d.ts +0 -21
  46. package/lib/partials/ComboBoxOptions.js +0 -33
  47. package/lib/partials/ComboBoxOptions.js.map +0 -1
  48. package/lib/partials/ComboBoxOptionsGroup.d.ts +0 -15
  49. package/lib/partials/ComboBoxOptionsGroup.js +0 -31
  50. package/lib/partials/ComboBoxOptionsGroup.js.map +0 -1
  51. package/lib/partials/ComboBoxOptionsItems.d.ts +0 -39
  52. package/lib/partials/ComboBoxOptionsItems.js +0 -56
  53. package/lib/partials/ComboBoxOptionsItems.js.map +0 -1
  54. package/lib/partials/ComboBoxOptionsSlot.d.ts +0 -35
  55. package/lib/partials/ComboBoxOptionsSlot.js +0 -47
  56. package/lib/partials/ComboBoxOptionsSlot.js.map +0 -1
  57. package/lib/partials/index.d.ts +0 -5
  58. package/lib/partials/index.js +0 -6
  59. package/lib/partials/index.js.map +0 -1
  60. package/lib/utils/index.d.ts +0 -1
  61. package/lib/utils/index.js +0 -2
  62. package/lib/utils/index.js.map +0 -1
  63. package/lib/utils/options.d.ts +0 -77
  64. package/lib/utils/options.js +0 -145
  65. package/lib/utils/options.js.map +0 -1
package/lib/hooks/useComboBoxFocus.js DELETED
@@ -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
package/lib/hooks/useComboBoxFocus.js.map DELETED
@@ -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"}
package/lib/hooks/useIsDesktopScreenWidth.d.ts DELETED
@@ -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;
package/lib/hooks/useIsDesktopScreenWidth.js DELETED
@@ -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
package/lib/hooks/useIsDesktopScreenWidth.js.map DELETED
@@ -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"}
package/lib/partials/ComboBoxNoResults.d.ts DELETED
@@ -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;
package/lib/partials/ComboBoxNoResults.js DELETED
@@ -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
package/lib/partials/ComboBoxNoResults.js.map DELETED
@@ -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"}
package/lib/partials/ComboBoxOptions.d.ts DELETED
@@ -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;
package/lib/partials/ComboBoxOptions.js DELETED
@@ -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
package/lib/partials/ComboBoxOptions.js.map DELETED
@@ -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"}
package/lib/partials/ComboBoxOptionsGroup.d.ts DELETED
@@ -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;
package/lib/partials/ComboBoxOptionsGroup.js DELETED
@@ -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
package/lib/partials/ComboBoxOptionsGroup.js.map DELETED
@@ -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"}
package/lib/partials/ComboBoxOptionsItems.d.ts DELETED
@@ -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;
package/lib/partials/ComboBoxOptionsItems.js DELETED
@@ -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
package/lib/partials/ComboBoxOptionsItems.js.map DELETED
@@ -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"}
package/lib/partials/ComboBoxOptionsSlot.d.ts DELETED
@@ -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;
package/lib/partials/ComboBoxOptionsSlot.js DELETED
@@ -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
package/lib/partials/ComboBoxOptionsSlot.js.map DELETED
@@ -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"}
package/lib/partials/index.d.ts DELETED
@@ -1,5 +0,0 @@
1
- export * from './ComboBoxOptions';
2
- export * from './ComboBoxOptionsGroup';
3
- export * from './ComboBoxOptionsItems';
4
- export * from './ComboBoxOptionsSlot';
5
- export * from './ComboBoxNoResults';
package/lib/partials/index.js DELETED
@@ -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
package/lib/partials/index.js.map DELETED
@@ -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"}
package/lib/utils/index.d.ts DELETED
@@ -1 +0,0 @@
1
- export * from './options';
package/lib/utils/index.js DELETED
@@ -1,2 +0,0 @@
1
- export * from './options';
2
- //# sourceMappingURL=index.js.map
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,WAAW,CAAA"}
package/lib/utils/options.d.ts DELETED
@@ -1,77 +0,0 @@
1
- import type { MenuItemProps } from '@pixum/menu-item';
2
- import type { ComboBoxOption, ComboBoxOptionGroup, ComboBoxOptionItemProps, ComboBoxOptionsInput } from '../types';
3
- /**
4
- * Resolves the stable value of an option.
5
- *
6
- * `MenuItemProps` does not guarantee a plain string `text`, so the value is
7
- * resolved in three steps: the visible label first - that is the value existing
8
- * consumers pass in as `value` and get back from `onOptionItemClick` -, then
9
- * the explicit `key`, and finally the render index as a last resort so that
10
- * options without a label still get a unique value.
11
- *
12
- * @param item - The option as handed in by the consumer
13
- * @param index - Position of the option in render order
14
- * @returns The stable value of the option
15
- */
16
- export declare function resolveOptionValue(item: ComboBoxOptionItemProps, index: number): string;
17
- /**
18
- * Returns the label of an option for the trigger field.
19
- *
20
- * Falls back to the resolved value when the option renders a custom node
21
- * instead of a plain string.
22
- *
23
- * @param option - A normalised option
24
- * @returns The label to display in the trigger field
25
- */
26
- export declare function getOptionLabel(option: ComboBoxOption): string;
27
- /**
28
- * Strips the ComboBox specific props from an option so the rest can be spread
29
- * onto the `MenuItem`.
30
- *
31
- * `key` is a reserved React prop and `disabled` is handled by the option
32
- * wrapper (`aria-disabled` plus the click guard); everything else belongs to
33
- * `MenuItem` and is forwarded untouched.
34
- *
35
- * @param item - The option as handed in by the consumer
36
- * @returns The props meant for the `MenuItem`
37
- */
38
- export declare function toMenuItemProps({ key, disabled, ...menuItemProps }: ComboBoxOptionItemProps): MenuItemProps;
39
- /**
40
- * Normalises flat and grouped options into one list in render order.
41
- *
42
- * The index of an entry is identical for both input shapes and is therefore
43
- * used as the option DOM id that `aria-activedescendant` points at. Doing this
44
- * once removes the offset arithmetic that grouped rendering used to need.
45
- *
46
- * @param options - Flat or grouped options as passed in by the consumer
47
- * @param listboxId - Id of the listbox, used as prefix for the option ids
48
- * @returns The normalised options in render order
49
- */
50
- export declare function normaliseOptions(options: ComboBoxOptionsInput, listboxId: string): ComboBoxOption[];
51
- /**
52
- * Splits normalised options back into their render groups while keeping the
53
- * global indices intact, so that the list can be rendered with a single code
54
- * path for flat and grouped options.
55
- *
56
- * @param options - Normalised options in render order
57
- * @returns One entry per consecutive group
58
- */
59
- export declare function groupOptions(options: ComboBoxOption[]): ComboBoxOptionGroup[];
60
- /**
61
- * Normalises the `value` prop to an array, so that single and multi select
62
- * share the same selection logic.
63
- *
64
- * @param value - Selected value(s) or `undefined`
65
- * @returns The selected values as an array
66
- */
67
- export declare function toValueArray(value: string | string[] | undefined): string[];
68
- /**
69
- * Finds the first option that can be activated, starting at `start` and moving
70
- * by `delta` with wrap-around. Disabled options are skipped.
71
- *
72
- * @param options - Normalised options
73
- * @param start - Index to start from; use `-1` to start before the first option
74
- * @param delta - Step width, negative values move backwards
75
- * @returns The index of the next enabled option, or `null` when there is none
76
- */
77
- export declare function findEnabledIndex(options: ComboBoxOption[], start: number, delta: number): number | null;