@allxsmith/bestax-bulma 5.66.2 → 5.67.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 (73) hide show
  1. package/dist/bestax.css +1 -1
  2. package/dist/bestax.css.map +1 -1
  3. package/dist/esm/components/Command.js.map +1 -1
  4. package/dist/esm/components/HoverCard.js.map +1 -1
  5. package/dist/esm/components/Loading.js +3 -3
  6. package/dist/esm/components/Loading.js.map +1 -1
  7. package/dist/esm/components/Modal.js.map +1 -1
  8. package/dist/esm/components/Popover.js.map +1 -1
  9. package/dist/esm/components/Sidebar.js +21 -29
  10. package/dist/esm/components/Sidebar.js.map +1 -1
  11. package/dist/esm/components/Toast.js +6 -8
  12. package/dist/esm/components/Toast.js.map +1 -1
  13. package/dist/esm/elements/IconButton.js.map +1 -1
  14. package/dist/esm/form/Combobox.js.map +1 -1
  15. package/dist/esm/form/DateInputBase.js.map +1 -1
  16. package/dist/esm/form/DateRangeInputBase.js.map +1 -1
  17. package/dist/esm/form/DateTimeInputBase.js.map +1 -1
  18. package/dist/esm/form/TreeSelect.js.map +1 -1
  19. package/dist/esm/form/_pickerInternals/Calendar.js +12 -5
  20. package/dist/esm/form/_pickerInternals/Calendar.js.map +1 -1
  21. package/dist/esm/form/_pickerInternals/PickerPopover.js +6 -2
  22. package/dist/esm/form/_pickerInternals/PickerPopover.js.map +1 -1
  23. package/dist/esm/helpers/scrollLock.js +47 -11
  24. package/dist/esm/helpers/scrollLock.js.map +1 -1
  25. package/dist/esm/helpers/useAnchoredPosition.js +35 -11
  26. package/dist/esm/helpers/useAnchoredPosition.js.map +1 -1
  27. package/dist/esm/layout/Level.js +2 -2
  28. package/dist/esm/layout/Level.js.map +1 -1
  29. package/dist/extras.css +1 -1
  30. package/dist/extras.css.map +1 -1
  31. package/dist/index.cjs +128 -65
  32. package/dist/index.cjs.map +1 -1
  33. package/dist/types/components/Command.d.ts +5 -5
  34. package/dist/types/components/HoverCard.d.ts +2 -4
  35. package/dist/types/components/Modal.d.ts +6 -3
  36. package/dist/types/components/Popover.d.ts +1 -3
  37. package/dist/types/components/Sidebar.d.ts +6 -2
  38. package/dist/types/components/Toast.d.ts +3 -1
  39. package/dist/types/elements/IconButton.d.ts +2 -5
  40. package/dist/types/form/Combobox.d.ts +13 -13
  41. package/dist/types/form/DateInputBase.d.ts +8 -1
  42. package/dist/types/form/DateRangeInputBase.d.ts +5 -0
  43. package/dist/types/form/DateTimeInputBase.d.ts +8 -1
  44. package/dist/types/form/TreeSelect.d.ts +4 -4
  45. package/dist/types/helpers/scrollLock.d.ts +4 -4
  46. package/dist/types/helpers/useAnchoredPosition.d.ts +14 -12
  47. package/dist/types/layout/Level.d.ts +10 -0
  48. package/dist/types-cjs/components/Command.d.ts +5 -5
  49. package/dist/types-cjs/components/HoverCard.d.ts +2 -4
  50. package/dist/types-cjs/components/Modal.d.ts +6 -3
  51. package/dist/types-cjs/components/Popover.d.ts +1 -3
  52. package/dist/types-cjs/components/Sidebar.d.ts +6 -2
  53. package/dist/types-cjs/components/Toast.d.ts +3 -1
  54. package/dist/types-cjs/elements/IconButton.d.ts +2 -5
  55. package/dist/types-cjs/form/Combobox.d.ts +13 -13
  56. package/dist/types-cjs/form/DateInputBase.d.ts +8 -1
  57. package/dist/types-cjs/form/DateRangeInputBase.d.ts +5 -0
  58. package/dist/types-cjs/form/DateTimeInputBase.d.ts +8 -1
  59. package/dist/types-cjs/form/TreeSelect.d.ts +4 -4
  60. package/dist/types-cjs/helpers/scrollLock.d.ts +4 -4
  61. package/dist/types-cjs/helpers/useAnchoredPosition.d.ts +14 -12
  62. package/dist/types-cjs/layout/Level.d.ts +10 -0
  63. package/dist/versions/bestax-no-dark-mode.css +1 -1
  64. package/dist/versions/bestax-no-dark-mode.css.map +1 -1
  65. package/dist/versions/bestax-no-helpers-prefixed.css +1 -1
  66. package/dist/versions/bestax-no-helpers-prefixed.css.map +1 -1
  67. package/dist/versions/bestax-no-helpers.css +1 -1
  68. package/dist/versions/bestax-no-helpers.css.map +1 -1
  69. package/dist/versions/bestax-prefixed.css +1 -1
  70. package/dist/versions/bestax-prefixed.css.map +1 -1
  71. package/package.json +1 -1
  72. package/src/scss/components/_loading.scss +17 -3
  73. package/src/scss/form/_radio.scss +5 -2
@@ -95,7 +95,7 @@ export interface CommandActionsProps extends CommandBaseProps {
95
95
  * @defaultValue 'No results'
96
96
  */
97
97
  empty?: React.ReactNode;
98
- /** @internal With `actions`, the Command renders its own parts. */
98
+ /** With `actions`, the Command renders its own parts. */
99
99
  children?: never;
100
100
  }
101
101
  /** Props for a Command built from parts. */
@@ -108,13 +108,13 @@ export interface CommandPartsProps extends CommandBaseProps {
108
108
  * with a warning in development.
109
109
  */
110
110
  children?: React.ReactNode;
111
- /** @internal Built from parts, the app renders the items. */
111
+ /** Built from parts, the app renders the items. */
112
112
  actions?: never;
113
- /** @internal Built from parts, the app filters. */
113
+ /** Built from parts, the app filters. */
114
114
  filter?: never;
115
- /** @internal Built from parts, `Command.Input` takes the placeholder. */
115
+ /** Built from parts, `Command.Input` takes the placeholder. */
116
116
  placeholder?: never;
117
- /** @internal Built from parts, `Command.Empty` is the empty message. */
117
+ /** Built from parts, `Command.Empty` is the empty message. */
118
118
  empty?: never;
119
119
  }
120
120
  /**
@@ -90,10 +90,8 @@ export interface HoverCardProps extends Omit<React.HTMLAttributes<HTMLSpanElemen
90
90
  * it only after the rest of the page, and focus leaving the trigger on the
91
91
  * way closes it, so keyboard users can open it, read it and close it with
92
92
  * Escape, and whatever it links to has to be reachable from the page as
93
- * well. It is measured against the trigger when it opens and on resize and
94
- * scroll, so it doesn't follow content that changes size while it is open.
95
- * Theming variables set on an ancestor of the trigger reach it only when its
96
- * container is inside that ancestor.
93
+ * well. Theming variables set on an ancestor of the trigger reach it only
94
+ * when its container is inside that ancestor.
97
95
  * @defaultValue false
98
96
  */
99
97
  appendToBody?: boolean;
@@ -48,9 +48,12 @@ export interface ModalProps extends Omit<React.HTMLAttributes<HTMLDivElement>, '
48
48
  */
49
49
  closeOnEscape?: boolean;
50
50
  /**
51
- * Lock body scroll while the modal is active. Ref-counted and shared with
52
- * `Dialog`, `Sidebar` and `Loading`, so whichever overlay closes first does
53
- * not unlock the page underneath one that is still open.
51
+ * Lock page scroll while the modal is active, padding the page by the room
52
+ * its scrollbar took so the content stays put. An element fixed to the
53
+ * window's right edge, such as a `fixed` Navbar, isn't padded, and moves by
54
+ * the scrollbar's width while the page is locked. Ref-counted and shared
55
+ * with `Dialog`, `Sidebar` and `Loading`, so whichever overlay closes first
56
+ * does not unlock the page underneath one that is still open.
54
57
  * @defaultValue true
55
58
  */
56
59
  lockScroll?: boolean;
@@ -61,9 +61,7 @@ export interface PopoverProps extends Omit<React.HTMLAttributes<HTMLDivElement>,
61
61
  * `ConfigProvider` sets, `document.body` by default, fixed to the viewport,
62
62
  * so an ancestor's `overflow`, `transform` or stacking context can't clip
63
63
  * it. The panel then shows from the commit after hydration, never in server
64
- * markup. It is measured against the trigger when it opens and on resize
65
- * and scroll, so it doesn't follow content that changes size while it is
66
- * open. Theming variables set on an ancestor of the trigger reach it only
64
+ * markup. Theming variables set on an ancestor of the trigger reach it only
67
65
  * when its container is inside that ancestor.
68
66
  * @defaultValue false
69
67
  */
@@ -33,7 +33,7 @@ export interface SidebarProps extends Omit<React.HTMLAttributes<HTMLElement>, 'c
33
33
  fullWidth?: boolean;
34
34
  /**
35
35
  * Show an overlay behind the sidebar, which makes it modal: it gets
36
- * `aria-modal="true"`, locks body scroll, and keeps Tab and Shift+Tab
36
+ * `aria-modal="true"`, locks page scroll, and keeps Tab and Shift+Tab
37
37
  * inside it while it is the topmost modal overlay. A Modal or Dialog opened
38
38
  * over it, even one rendered inside it, holds Tab until it closes. Without
39
39
  * an overlay the sidebar isn't modal and holds no Tab: on the page, Tab
@@ -60,7 +60,11 @@ export interface SidebarProps extends Omit<React.HTMLAttributes<HTMLElement>, 'c
60
60
  canCancel?: boolean;
61
61
  /** Content to display in the sidebar. */
62
62
  children?: React.ReactNode;
63
- /** Renders inline instead of using a portal. */
63
+ /**
64
+ * Renders inline instead of using a portal. Without it, the sidebar renders
65
+ * inline on the server and while hydrating, moving into the portal once the
66
+ * client takes over, so hydration matches.
67
+ */
64
68
  inline?: boolean;
65
69
  }
66
70
  /**
@@ -57,7 +57,9 @@ export interface ToastProps extends Omit<React.HTMLAttributes<HTMLDivElement>, '
57
57
  */
58
58
  container?: string | HTMLElement;
59
59
  /**
60
- * Renders inline instead of using a portal. Through `toast.show()`, a toast
60
+ * Renders inline instead of using a portal. Without it, a toast renders
61
+ * inline on the server and while hydrating, moving into the portal once the
62
+ * client takes over, so hydration matches. Through `toast.show()`, a toast
61
63
  * already renders inline in `ToastContainer`'s stack for its position, and
62
64
  * `inline` keeps one with a `container` in that stack too.
63
65
  */
@@ -39,7 +39,7 @@ export interface IconButtonLabelledBy {
39
39
  /** The id of the element whose text names the button, in place of `aria-label`. */
40
40
  'aria-labelledby': string;
41
41
  /**
42
- * @internal Not with `aria-labelledby`, which already names the button.
42
+ * Not with `aria-labelledby`, which already names the button.
43
43
  * Declared so the two can't be passed together.
44
44
  */
45
45
  'aria-label'?: undefined;
@@ -54,10 +54,7 @@ export interface IconButtonLabel {
54
54
  * development.
55
55
  */
56
56
  'aria-label': string;
57
- /**
58
- * @internal Not with `aria-label`. Declared so the two can't be passed
59
- * together.
60
- */
57
+ /** Not with `aria-label`. Declared so the two can't be passed together. */
61
58
  'aria-labelledby'?: undefined;
62
59
  }
63
60
  /**
@@ -165,7 +165,7 @@ interface ComboboxDataBaseProps extends ComboboxBaseProps {
165
165
  * `Combobox.Input`.
166
166
  */
167
167
  'aria-labelledby'?: string;
168
- /** @internal With `data`, the Combobox renders its own parts. */
168
+ /** With `data`, the Combobox renders its own parts. */
169
169
  children?: never;
170
170
  }
171
171
  /** Props for a Combobox given `data`, with one value. */
@@ -205,7 +205,7 @@ export interface ComboboxSingleDataProps extends ComboboxDataBaseProps {
205
205
  * `multiple` the array.
206
206
  */
207
207
  onChange?: (value: string | null) => void;
208
- /** @internal With one value there are no tags to name. */
208
+ /** With one value there are no tags to name. */
209
209
  ariaCloseLabel?: never;
210
210
  }
211
211
  /** Props for a Combobox given `data`, with several values. */
@@ -253,27 +253,27 @@ export interface ComboboxPartsProps extends ComboboxBaseProps {
253
253
  * @defaultValue false
254
254
  */
255
255
  multiple?: boolean;
256
- /** @internal Built from parts, there's no `data`. */
256
+ /** Built from parts, there's no `data`. */
257
257
  data?: never;
258
- /** @internal Built from parts, the app keeps the value. */
258
+ /** Built from parts, the app keeps the value. */
259
259
  value?: never;
260
- /** @internal Built from parts, the app keeps the value. */
260
+ /** Built from parts, the app keeps the value. */
261
261
  defaultValue?: never;
262
- /** @internal Built from parts, `onSelect` reports a pick. */
262
+ /** Built from parts, `onSelect` reports a pick. */
263
263
  onChange?: never;
264
- /** @internal Built from parts, `Combobox.Input` takes the placeholder. */
264
+ /** Built from parts, `Combobox.Input` takes the placeholder. */
265
265
  placeholder?: never;
266
- /** @internal Built from parts, the app posts the value. */
266
+ /** Built from parts, the app posts the value. */
267
267
  name?: never;
268
- /** @internal Built from parts, `Combobox.Empty` is the empty message. */
268
+ /** Built from parts, `Combobox.Empty` is the empty message. */
269
269
  empty?: never;
270
- /** @internal Built from parts, `Combobox.Item` renders its own content. */
270
+ /** Built from parts, `Combobox.Item` renders its own content. */
271
271
  itemTemplate?: never;
272
- /** @internal Built from parts, `Combobox.Input` takes `disabled`. */
272
+ /** Built from parts, `Combobox.Input` takes `disabled`. */
273
273
  disabled?: never;
274
- /** @internal Built from parts, `Combobox.Input` takes `required`. */
274
+ /** Built from parts, `Combobox.Input` takes `required`. */
275
275
  required?: never;
276
- /** @internal Built from parts, the app posts the value. */
276
+ /** Built from parts, the app posts the value. */
277
277
  form?: never;
278
278
  }
279
279
  /**
@@ -78,7 +78,14 @@ export interface DateInputBaseProps extends Omit<React.InputHTMLAttributes<HTMLI
78
78
  * the two can differ.
79
79
  */
80
80
  locale?: string;
81
- /** Render the calendar inline (no popover). */
81
+ /**
82
+ * Render the calendar inline (no popover).
83
+ * On a server-rendered page it marks today once the page hydrates, by
84
+ * the browser's clock rather than the server's. With no `value` or
85
+ * `defaultValue` it opens on the month the clock reads, and around the end
86
+ * of a month the server's clock and the browser's can read different
87
+ * months, so give it a date both render the same.
88
+ */
82
89
  inline?: boolean;
83
90
  /**
84
91
  * Use `<input type="date">` on coarse-pointer + small-viewport devices. At
@@ -65,6 +65,11 @@ export interface DateRangeInputBaseProps extends Omit<React.HTMLAttributes<HTMLD
65
65
  /**
66
66
  * Render the calendar inline, with no inputs and no popover. The hidden
67
67
  * form inputs still carry the range.
68
+ * On a server-rendered page it marks today once the page hydrates, by
69
+ * the browser's clock rather than the server's. With no `value` or
70
+ * `defaultValue` it opens on the month the clock reads, and around the end
71
+ * of a month the server's clock and the browser's can read different
72
+ * months, so give it a date both render the same.
68
73
  */
69
74
  inline?: boolean;
70
75
  /**
@@ -59,7 +59,14 @@ export interface DateTimeInputBaseProps extends Omit<React.InputHTMLAttributes<H
59
59
  * the two can differ.
60
60
  */
61
61
  locale?: string;
62
- /** Render the panel inline (no popover). */
62
+ /**
63
+ * Render the panel inline (no popover).
64
+ * On a server-rendered page it marks today once the page hydrates, by
65
+ * the browser's clock rather than the server's. With no `value` or
66
+ * `defaultValue` it opens on the month the clock reads, and around the end
67
+ * of a month the server's clock and the browser's can read different
68
+ * months, so give it a date both render the same.
69
+ */
63
70
  inline?: boolean;
64
71
  /** Use `<input type="datetime-local">` on coarse-pointer devices. */
65
72
  mobileNative?: boolean | 'auto';
@@ -209,9 +209,9 @@ export interface TreeSelectSingleProps extends TreeSelectBaseProps {
209
209
  * @defaultValue true
210
210
  */
211
211
  closeOnSelect?: boolean;
212
- /** @internal Read with the checkbox modes only. */
212
+ /** Read with the checkbox modes only. */
213
213
  checkedStrategy?: never;
214
- /** @internal Read with the checkbox modes only. */
214
+ /** Read with the checkbox modes only. */
215
215
  ariaCloseLabel?: never;
216
216
  }
217
217
  /** Props for a TreeSelect with a box on every item. */
@@ -253,9 +253,9 @@ export interface TreeSelectCheckboxProps extends TreeSelectBaseProps {
253
253
  checkedStrategy?: TreeSelectCheckedStrategy;
254
254
  /** Names each tag's button, in place of "Remove" and the item's label, as on Combobox. */
255
255
  ariaCloseLabel?: string;
256
- /** @internal Read with `'single'` only. */
256
+ /** Read with `'single'` only. */
257
257
  parentsSelectable?: never;
258
- /** @internal Read with `'single'` only: the panel stays open while boxes are checked. */
258
+ /** Read with `'single'` only: the panel stays open while boxes are checked. */
259
259
  closeOnSelect?: never;
260
260
  }
261
261
  /**
@@ -1,9 +1,9 @@
1
1
  /**
2
- * Locks (and ref-counted-ly unlocks) `document.body` scrolling while `active`
3
- * is true. Safe to call from multiple components at once — the body scroll
4
- * is only restored once every active caller has released its lock.
2
+ * Locks (and ref-counted-ly unlocks) the page's scrolling while `active` is
3
+ * true. Safe to call from multiple components at once: the page is only
4
+ * given back once every active caller has released its lock.
5
5
  *
6
6
  * @function useScrollLock
7
- * @param active - Whether this caller wants the body scroll locked.
7
+ * @param active - Whether this caller wants the page's scrolling locked.
8
8
  */
9
9
  export declare function useScrollLock(active: boolean): void;
@@ -62,11 +62,11 @@ export interface UseAnchoredPositionOptions {
62
62
  */
63
63
  matchWidth?: boolean;
64
64
  /**
65
- * Measures again after each render of the component holding the hook, for
66
- * a panel whose content changes while it's open, as a filtered list's
67
- * does. A fixed panel above its anchor is placed from its height, and
68
- * `auto` reads the height too, so a measurement taken when it opened goes
69
- * stale as the content changes.
65
+ * Measures again after each render of the component holding the hook,
66
+ * before the panel paints, for a panel whose content that component
67
+ * changes while it's open, as a filtered list's does. A change in size is
68
+ * followed without it too, but a frame later, so a panel above its anchor
69
+ * would show for a frame where its old height put it.
70
70
  * @defaultValue false
71
71
  */
72
72
  followContent?: boolean;
@@ -80,14 +80,16 @@ export declare function marginGap(panel: HTMLElement): number;
80
80
  /**
81
81
  * Places a floating panel against its anchor: resolves `auto` to a corner
82
82
  * and, for a panel fixed to the viewport, works out its coordinates. It
83
- * measures again on resize and on any scroll of the anchor's window (an
84
- * iframe's, when the anchor renders into one), so a fixed panel follows its
85
- * anchor, and with `followContent` after each render too. A measurement that
86
- * changes nothing doesn't render again.
83
+ * measures again on resize, on any scroll of the anchor's window (an
84
+ * iframe's, when the anchor renders into one), and when the panel or the
85
+ * anchor changes size, so a fixed panel follows its anchor and its own
86
+ * content. Those measure once in the next frame, however many arrive before
87
+ * it. With `followContent` it also measures after each render. A
88
+ * measurement that changes nothing doesn't render again.
87
89
  *
88
- * Measuring happens in a layout effect, so the panel is placed before it
89
- * paints. It needs both elements on the page while `active` is on, and
90
- * keeps the last placement when either is missing.
90
+ * The first measurement happens in a layout effect, so the panel is placed
91
+ * before it paints. It needs both elements on the page while `active` is
92
+ * on, and keeps the last placement when either is missing.
91
93
  *
92
94
  * @function useAnchoredPosition
93
95
  * @param anchorRef - The element the panel opens from.
@@ -5,6 +5,16 @@ import { BulmaClassesProps, validColors } from '../helpers/useBulmaClasses.js';
5
5
  * Props for the Level component.
6
6
  */
7
7
  export interface LevelProps extends React.HTMLAttributes<HTMLElement>, Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {
8
+ /**
9
+ * HTML element to render (default: `nav`, as in Bulma's markup). A `nav` is
10
+ * a `navigation` landmark, so keep it for a row of links. A row that is not
11
+ * navigation, such as figures or a toolbar, takes `div`, which is no
12
+ * landmark. `header` suits a level that opens a section and `footer` one
13
+ * that closes it. A `header` is a `banner` landmark, and a `footer` a
14
+ * `contentinfo` one, only when no `section`, `article`, `aside`, `nav` or
15
+ * `main` is around it.
16
+ */
17
+ as?: 'nav' | 'div' | 'header' | 'footer';
8
18
  /** Keeps the level horizontal on mobile (Bulma `is-mobile`). Without it
9
19
  * the level stacks vertically below tablet. */
10
20
  isMobile?: boolean;
@@ -95,7 +95,7 @@ export interface CommandActionsProps extends CommandBaseProps {
95
95
  * @defaultValue 'No results'
96
96
  */
97
97
  empty?: React.ReactNode;
98
- /** @internal With `actions`, the Command renders its own parts. */
98
+ /** With `actions`, the Command renders its own parts. */
99
99
  children?: never;
100
100
  }
101
101
  /** Props for a Command built from parts. */
@@ -108,13 +108,13 @@ export interface CommandPartsProps extends CommandBaseProps {
108
108
  * with a warning in development.
109
109
  */
110
110
  children?: React.ReactNode;
111
- /** @internal Built from parts, the app renders the items. */
111
+ /** Built from parts, the app renders the items. */
112
112
  actions?: never;
113
- /** @internal Built from parts, the app filters. */
113
+ /** Built from parts, the app filters. */
114
114
  filter?: never;
115
- /** @internal Built from parts, `Command.Input` takes the placeholder. */
115
+ /** Built from parts, `Command.Input` takes the placeholder. */
116
116
  placeholder?: never;
117
- /** @internal Built from parts, `Command.Empty` is the empty message. */
117
+ /** Built from parts, `Command.Empty` is the empty message. */
118
118
  empty?: never;
119
119
  }
120
120
  /**
@@ -90,10 +90,8 @@ export interface HoverCardProps extends Omit<React.HTMLAttributes<HTMLSpanElemen
90
90
  * it only after the rest of the page, and focus leaving the trigger on the
91
91
  * way closes it, so keyboard users can open it, read it and close it with
92
92
  * Escape, and whatever it links to has to be reachable from the page as
93
- * well. It is measured against the trigger when it opens and on resize and
94
- * scroll, so it doesn't follow content that changes size while it is open.
95
- * Theming variables set on an ancestor of the trigger reach it only when its
96
- * container is inside that ancestor.
93
+ * well. Theming variables set on an ancestor of the trigger reach it only
94
+ * when its container is inside that ancestor.
97
95
  * @defaultValue false
98
96
  */
99
97
  appendToBody?: boolean;
@@ -48,9 +48,12 @@ export interface ModalProps extends Omit<React.HTMLAttributes<HTMLDivElement>, '
48
48
  */
49
49
  closeOnEscape?: boolean;
50
50
  /**
51
- * Lock body scroll while the modal is active. Ref-counted and shared with
52
- * `Dialog`, `Sidebar` and `Loading`, so whichever overlay closes first does
53
- * not unlock the page underneath one that is still open.
51
+ * Lock page scroll while the modal is active, padding the page by the room
52
+ * its scrollbar took so the content stays put. An element fixed to the
53
+ * window's right edge, such as a `fixed` Navbar, isn't padded, and moves by
54
+ * the scrollbar's width while the page is locked. Ref-counted and shared
55
+ * with `Dialog`, `Sidebar` and `Loading`, so whichever overlay closes first
56
+ * does not unlock the page underneath one that is still open.
54
57
  * @defaultValue true
55
58
  */
56
59
  lockScroll?: boolean;
@@ -61,9 +61,7 @@ export interface PopoverProps extends Omit<React.HTMLAttributes<HTMLDivElement>,
61
61
  * `ConfigProvider` sets, `document.body` by default, fixed to the viewport,
62
62
  * so an ancestor's `overflow`, `transform` or stacking context can't clip
63
63
  * it. The panel then shows from the commit after hydration, never in server
64
- * markup. It is measured against the trigger when it opens and on resize
65
- * and scroll, so it doesn't follow content that changes size while it is
66
- * open. Theming variables set on an ancestor of the trigger reach it only
64
+ * markup. Theming variables set on an ancestor of the trigger reach it only
67
65
  * when its container is inside that ancestor.
68
66
  * @defaultValue false
69
67
  */
@@ -33,7 +33,7 @@ export interface SidebarProps extends Omit<React.HTMLAttributes<HTMLElement>, 'c
33
33
  fullWidth?: boolean;
34
34
  /**
35
35
  * Show an overlay behind the sidebar, which makes it modal: it gets
36
- * `aria-modal="true"`, locks body scroll, and keeps Tab and Shift+Tab
36
+ * `aria-modal="true"`, locks page scroll, and keeps Tab and Shift+Tab
37
37
  * inside it while it is the topmost modal overlay. A Modal or Dialog opened
38
38
  * over it, even one rendered inside it, holds Tab until it closes. Without
39
39
  * an overlay the sidebar isn't modal and holds no Tab: on the page, Tab
@@ -60,7 +60,11 @@ export interface SidebarProps extends Omit<React.HTMLAttributes<HTMLElement>, 'c
60
60
  canCancel?: boolean;
61
61
  /** Content to display in the sidebar. */
62
62
  children?: React.ReactNode;
63
- /** Renders inline instead of using a portal. */
63
+ /**
64
+ * Renders inline instead of using a portal. Without it, the sidebar renders
65
+ * inline on the server and while hydrating, moving into the portal once the
66
+ * client takes over, so hydration matches.
67
+ */
64
68
  inline?: boolean;
65
69
  }
66
70
  /**
@@ -57,7 +57,9 @@ export interface ToastProps extends Omit<React.HTMLAttributes<HTMLDivElement>, '
57
57
  */
58
58
  container?: string | HTMLElement;
59
59
  /**
60
- * Renders inline instead of using a portal. Through `toast.show()`, a toast
60
+ * Renders inline instead of using a portal. Without it, a toast renders
61
+ * inline on the server and while hydrating, moving into the portal once the
62
+ * client takes over, so hydration matches. Through `toast.show()`, a toast
61
63
  * already renders inline in `ToastContainer`'s stack for its position, and
62
64
  * `inline` keeps one with a `container` in that stack too.
63
65
  */
@@ -39,7 +39,7 @@ export interface IconButtonLabelledBy {
39
39
  /** The id of the element whose text names the button, in place of `aria-label`. */
40
40
  'aria-labelledby': string;
41
41
  /**
42
- * @internal Not with `aria-labelledby`, which already names the button.
42
+ * Not with `aria-labelledby`, which already names the button.
43
43
  * Declared so the two can't be passed together.
44
44
  */
45
45
  'aria-label'?: undefined;
@@ -54,10 +54,7 @@ export interface IconButtonLabel {
54
54
  * development.
55
55
  */
56
56
  'aria-label': string;
57
- /**
58
- * @internal Not with `aria-label`. Declared so the two can't be passed
59
- * together.
60
- */
57
+ /** Not with `aria-label`. Declared so the two can't be passed together. */
61
58
  'aria-labelledby'?: undefined;
62
59
  }
63
60
  /**
@@ -165,7 +165,7 @@ interface ComboboxDataBaseProps extends ComboboxBaseProps {
165
165
  * `Combobox.Input`.
166
166
  */
167
167
  'aria-labelledby'?: string;
168
- /** @internal With `data`, the Combobox renders its own parts. */
168
+ /** With `data`, the Combobox renders its own parts. */
169
169
  children?: never;
170
170
  }
171
171
  /** Props for a Combobox given `data`, with one value. */
@@ -205,7 +205,7 @@ export interface ComboboxSingleDataProps extends ComboboxDataBaseProps {
205
205
  * `multiple` the array.
206
206
  */
207
207
  onChange?: (value: string | null) => void;
208
- /** @internal With one value there are no tags to name. */
208
+ /** With one value there are no tags to name. */
209
209
  ariaCloseLabel?: never;
210
210
  }
211
211
  /** Props for a Combobox given `data`, with several values. */
@@ -253,27 +253,27 @@ export interface ComboboxPartsProps extends ComboboxBaseProps {
253
253
  * @defaultValue false
254
254
  */
255
255
  multiple?: boolean;
256
- /** @internal Built from parts, there's no `data`. */
256
+ /** Built from parts, there's no `data`. */
257
257
  data?: never;
258
- /** @internal Built from parts, the app keeps the value. */
258
+ /** Built from parts, the app keeps the value. */
259
259
  value?: never;
260
- /** @internal Built from parts, the app keeps the value. */
260
+ /** Built from parts, the app keeps the value. */
261
261
  defaultValue?: never;
262
- /** @internal Built from parts, `onSelect` reports a pick. */
262
+ /** Built from parts, `onSelect` reports a pick. */
263
263
  onChange?: never;
264
- /** @internal Built from parts, `Combobox.Input` takes the placeholder. */
264
+ /** Built from parts, `Combobox.Input` takes the placeholder. */
265
265
  placeholder?: never;
266
- /** @internal Built from parts, the app posts the value. */
266
+ /** Built from parts, the app posts the value. */
267
267
  name?: never;
268
- /** @internal Built from parts, `Combobox.Empty` is the empty message. */
268
+ /** Built from parts, `Combobox.Empty` is the empty message. */
269
269
  empty?: never;
270
- /** @internal Built from parts, `Combobox.Item` renders its own content. */
270
+ /** Built from parts, `Combobox.Item` renders its own content. */
271
271
  itemTemplate?: never;
272
- /** @internal Built from parts, `Combobox.Input` takes `disabled`. */
272
+ /** Built from parts, `Combobox.Input` takes `disabled`. */
273
273
  disabled?: never;
274
- /** @internal Built from parts, `Combobox.Input` takes `required`. */
274
+ /** Built from parts, `Combobox.Input` takes `required`. */
275
275
  required?: never;
276
- /** @internal Built from parts, the app posts the value. */
276
+ /** Built from parts, the app posts the value. */
277
277
  form?: never;
278
278
  }
279
279
  /**
@@ -78,7 +78,14 @@ export interface DateInputBaseProps extends Omit<React.InputHTMLAttributes<HTMLI
78
78
  * the two can differ.
79
79
  */
80
80
  locale?: string;
81
- /** Render the calendar inline (no popover). */
81
+ /**
82
+ * Render the calendar inline (no popover).
83
+ * On a server-rendered page it marks today once the page hydrates, by
84
+ * the browser's clock rather than the server's. With no `value` or
85
+ * `defaultValue` it opens on the month the clock reads, and around the end
86
+ * of a month the server's clock and the browser's can read different
87
+ * months, so give it a date both render the same.
88
+ */
82
89
  inline?: boolean;
83
90
  /**
84
91
  * Use `<input type="date">` on coarse-pointer + small-viewport devices. At
@@ -65,6 +65,11 @@ export interface DateRangeInputBaseProps extends Omit<React.HTMLAttributes<HTMLD
65
65
  /**
66
66
  * Render the calendar inline, with no inputs and no popover. The hidden
67
67
  * form inputs still carry the range.
68
+ * On a server-rendered page it marks today once the page hydrates, by
69
+ * the browser's clock rather than the server's. With no `value` or
70
+ * `defaultValue` it opens on the month the clock reads, and around the end
71
+ * of a month the server's clock and the browser's can read different
72
+ * months, so give it a date both render the same.
68
73
  */
69
74
  inline?: boolean;
70
75
  /**
@@ -59,7 +59,14 @@ export interface DateTimeInputBaseProps extends Omit<React.InputHTMLAttributes<H
59
59
  * the two can differ.
60
60
  */
61
61
  locale?: string;
62
- /** Render the panel inline (no popover). */
62
+ /**
63
+ * Render the panel inline (no popover).
64
+ * On a server-rendered page it marks today once the page hydrates, by
65
+ * the browser's clock rather than the server's. With no `value` or
66
+ * `defaultValue` it opens on the month the clock reads, and around the end
67
+ * of a month the server's clock and the browser's can read different
68
+ * months, so give it a date both render the same.
69
+ */
63
70
  inline?: boolean;
64
71
  /** Use `<input type="datetime-local">` on coarse-pointer devices. */
65
72
  mobileNative?: boolean | 'auto';
@@ -209,9 +209,9 @@ export interface TreeSelectSingleProps extends TreeSelectBaseProps {
209
209
  * @defaultValue true
210
210
  */
211
211
  closeOnSelect?: boolean;
212
- /** @internal Read with the checkbox modes only. */
212
+ /** Read with the checkbox modes only. */
213
213
  checkedStrategy?: never;
214
- /** @internal Read with the checkbox modes only. */
214
+ /** Read with the checkbox modes only. */
215
215
  ariaCloseLabel?: never;
216
216
  }
217
217
  /** Props for a TreeSelect with a box on every item. */
@@ -253,9 +253,9 @@ export interface TreeSelectCheckboxProps extends TreeSelectBaseProps {
253
253
  checkedStrategy?: TreeSelectCheckedStrategy;
254
254
  /** Names each tag's button, in place of "Remove" and the item's label, as on Combobox. */
255
255
  ariaCloseLabel?: string;
256
- /** @internal Read with `'single'` only. */
256
+ /** Read with `'single'` only. */
257
257
  parentsSelectable?: never;
258
- /** @internal Read with `'single'` only: the panel stays open while boxes are checked. */
258
+ /** Read with `'single'` only: the panel stays open while boxes are checked. */
259
259
  closeOnSelect?: never;
260
260
  }
261
261
  /**
@@ -1,9 +1,9 @@
1
1
  /**
2
- * Locks (and ref-counted-ly unlocks) `document.body` scrolling while `active`
3
- * is true. Safe to call from multiple components at once — the body scroll
4
- * is only restored once every active caller has released its lock.
2
+ * Locks (and ref-counted-ly unlocks) the page's scrolling while `active` is
3
+ * true. Safe to call from multiple components at once: the page is only
4
+ * given back once every active caller has released its lock.
5
5
  *
6
6
  * @function useScrollLock
7
- * @param active - Whether this caller wants the body scroll locked.
7
+ * @param active - Whether this caller wants the page's scrolling locked.
8
8
  */
9
9
  export declare function useScrollLock(active: boolean): void;