@allxsmith/bestax-bulma 5.67.7 → 5.67.9

package/dist/types/components/DataTable.d.ts

@@ -61,7 +61,8 @@ export interface DataTableProps<TRow> extends DataTableStateOptions<TRow>, Omit<
     /**
      * Shows a page of skeleton rows under the header in place of the rows,
      * and marks the table busy. For data on its way, as from a server with
-     * `manual`.
+     * `manual`. A skeleton row is as tall as a row of one line of text, so rows
+     * of text replace it without the table changing height.
      */
     loading?: boolean;
     /**

package/dist/types/form/ColorInput.d.ts

@@ -16,7 +16,10 @@ import { ColorInputBaseProps } from './ColorInputBase.js';
  * name on that `Field`.
  *
  * @helperProps Helper props go on the `.colorinput` `<div>`, with
- * `className`. The other attributes go on the text `<input>`.
+ * `className`, except that the background helpers go on the text `<input>`,
+ * and the text helpers on both, since Bulma's `.input` sets its own
+ * background and font, and the popover inside the `<div>` takes the text
+ * ones. The other attributes go on the `<input>`.
  * @extraProp {string} [name] - Form field name. The field submits the text it shows, the value in `format`, or nothing when it's empty.
  * @extraProp {boolean} [required=false] - Marks the field required, so an empty one fails the form's constraint validation.
  * @extraProp {React.Ref<HTMLInputElement>} [ref] - Forwarded to the text `<input>`.

package/dist/types/form/ColorInputBase.d.ts

@@ -8,7 +8,10 @@ import { type PickerPosition } from './_pickerInternals/pickerTypes.js';
  * only.
  *
  * @helperProps Helper props go on the `.colorinput` `<div>`, with
- * `className`. The other attributes go on the text `<input>`.
+ * `className`, except that the background helpers go on the text `<input>`,
+ * and the text helpers on both, since Bulma's `.input` sets its own
+ * background and font, and the popover inside the `<div>` takes the text
+ * ones. The other attributes go on the `<input>`.
  * @extraProp {string} [name] - Form field name. The field submits the text it shows, the value in `format`, or nothing when it's empty.
  * @extraProp {boolean} [required=false] - Marks the field required, so an empty one fails the form's constraint validation.
  * @extraProp {React.Ref<HTMLInputElement>} [ref] - Forwarded to the text `<input>`.

package/dist/types/form/DateInputBase.d.ts

@@ -5,6 +5,13 @@ import { DateFormatOption } from './_pickerInternals/formatters.js';
 /**
  * Props for the raw DateInput base. Use the higher-level `DateInput` for
  * Field/Control composition; `DateInputBase` is the input + popover only.
+ *
+ * @helperProps Helper props go on the `.dateinput-container` `<div>`, with
+ * `className` and the other attributes, except that the background helpers
+ * go on the `<input>`, and the text helpers on both, since Bulma's `.input`
+ * sets its own background and font, and the popover inside the `<div>`
+ * takes the text ones. Inline they all go on the `<div>`, and on the native
+ * mobile input, on the `<input>`.
  */
 export interface DateInputBaseProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'value' | 'defaultValue' | 'onChange' | 'size' | 'color' | 'min' | 'max' | 'type' | 'popover'>, Omit<BulmaClassesProps, 'color'> {
     /** Controlled selected date. */

package/dist/types/form/DateRangeInputBase.d.ts

@@ -7,6 +7,13 @@ export type { DateRangeValue };
  * Props for the raw DateRangeInput base. Use the higher-level
  * `DateRangeInput` for Field/Control composition; `DateRangeInputBase` is the
  * two inputs and the popover only.
+ *
+ * @helperProps Helper props go on the root `.daterangeinput` `<div>`, with
+ * `className` and the other attributes, except that the background helpers
+ * go on the `.input` `<div>` that draws the field around the two `<input>`s,
+ * since Bulma's `.input` sets its own background. The text helpers go on the
+ * root and on both `<input>`s too, which take no alignment or case from
+ * around them. Inline they all go on the root.
  */
 export interface DateRangeInputBaseProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'defaultValue' | 'onChange' | 'color' | 'placeholder' | 'popover'>, Omit<BulmaClassesProps, 'color'> {
     /**

package/dist/types/form/DateTimeInputBase.d.ts

@@ -6,6 +6,13 @@ import { DateFormatOption } from './_pickerInternals/formatters.js';
  * Props for the raw DateTimeInput base. Use the higher-level `DateTimeInput`
  * for Field/Control composition. Combines the prop set of `DateInputBaseProps`
  * and `TimeInputBaseProps`.
+ *
+ * @helperProps Helper props go on the `.datetimeinput-container` `<div>`, with
+ * `className` and the other attributes, except that the background helpers
+ * go on the `<input>`, and the text helpers on both, since Bulma's `.input`
+ * sets its own background and font, and the popover inside the `<div>`
+ * takes the text ones. Inline they all go on the `<div>`, and on the native
+ * mobile input, on the `<input>`.
  */
 export interface DateTimeInputBaseProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'value' | 'defaultValue' | 'onChange' | 'size' | 'color' | 'min' | 'max' | 'type' | 'popover'>, Omit<BulmaClassesProps, 'color'> {
     /** Controlled selected date-time. */

package/dist/types/form/PasswordInput.d.ts

@@ -16,7 +16,9 @@ import { PasswordInputBaseProps } from './PasswordInputBase.js';
  *
  * @helperProps Helper props go on the `.password-input-container` `<div>`, with
  * `className` and `style`, so they move and size the field and its toggle
- * together. The other attributes go on the `<input>`.
+ * together, except that the background and text helpers go on the
+ * `<input>`, since Bulma's `.input` sets its own background and font. The
+ * other attributes go on the `<input>` too.
  * @extraProp {string} [autoComplete="current-password"] - Tells the browser and password managers this is an existing password. Pass `"new-password"` where the user makes one up, on a sign-up or change-password form.
  * @extraProp {boolean} [spellCheck=false] - Off, so a browser's spellcheck never sees the password once it shows.
  * @extraProp {string} [autoCorrect="off"] - Off, so a phone's keyboard doesn't change what's typed.

package/dist/types/form/PasswordInputBase.d.ts

@@ -34,7 +34,9 @@ export interface PasswordInputLabels {
  *
  * @helperProps Helper props go on the `.password-input-container` `<div>`, with
  * `className` and `style`, so they move and size the field and its toggle
- * together. The other attributes go on the `<input>`.
+ * together, except that the background and text helpers go on the
+ * `<input>`, since Bulma's `.input` sets its own background and font. The
+ * other attributes go on the `<input>` too.
  * @extraProp {string} [autoComplete="current-password"] - Tells the browser and password managers this is an existing password. Pass `"new-password"` where the user makes one up, on a sign-up or change-password form.
  * @extraProp {boolean} [spellCheck=false] - Off, so a browser's spellcheck never sees the password once it shows.
  * @extraProp {string} [autoCorrect="off"] - Off, so a phone's keyboard doesn't change what's typed.

package/dist/types/form/TimeInputBase.d.ts

@@ -5,6 +5,13 @@ import { DateFormatOption } from './_pickerInternals/formatters.js';
 /**
  * Props for the raw TimeInput base. Use the higher-level `TimeInput` for
  * Field/Control composition; `TimeInputBase` is the input + popover only.
+ *
+ * @helperProps Helper props go on the `.timeinput-container` `<div>`, with
+ * `className` and the other attributes, except that the background helpers
+ * go on the `<input>`, and the text helpers on both, since Bulma's `.input`
+ * sets its own background and font, and the popover inside the `<div>`
+ * takes the text ones. Inline they all go on the `<div>`, and on the native
+ * mobile input, on the `<input>`.
  */
 export interface TimeInputBaseProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'value' | 'defaultValue' | 'onChange' | 'size' | 'color' | 'min' | 'max' | 'type' | 'popover'>, Omit<BulmaClassesProps, 'color'> {
     /** Controlled selected time (date portion is preserved). */

package/dist/types/helpers/useFieldHelperClasses.d.ts

@@ -0,0 +1,26 @@
+import { BulmaClassesProps } from './useBulmaClasses.js';
+/**
+ * Splits the helper props of a field drawn by an `.input` inside a wrapper
+ * of the component's own, such as a picker's container, into the classes
+ * each element needs.
+ *
+ * Bulma's `.input` sets its own background, font weight, alignment, case
+ * and family, so the background and text helpers style nothing in the field
+ * from the wrapper. They come back apart from the rest, for the component to
+ * put on the field and its inputs. The text helpers can stay on the wrapper
+ * as well, where something inside it, such as a popover, takes them.
+ *
+ * @function useFieldHelperClasses
+ * @param props - The component's remaining props, helper props among them.
+ * @returns `backgroundClasses` and `textClasses` from the background and
+ * text helpers, `otherClasses` from the rest, `bulmaHelperClasses` from all
+ * of them, for an element that takes them all, and `rest`, the props that
+ * aren't helper props.
+ */
+export declare const useFieldHelperClasses: <T extends object>(props: BulmaClassesProps & T) => {
+    bulmaHelperClasses: string;
+    backgroundClasses: string;
+    textClasses: string;
+    otherClasses: string;
+    rest: Omit<T, keyof BulmaClassesProps>;
+};

package/dist/types-cjs/components/DataTable.d.ts

@@ -61,7 +61,8 @@ export interface DataTableProps<TRow> extends DataTableStateOptions<TRow>, Omit<
     /**
      * Shows a page of skeleton rows under the header in place of the rows,
      * and marks the table busy. For data on its way, as from a server with
-     * `manual`.
+     * `manual`. A skeleton row is as tall as a row of one line of text, so rows
+     * of text replace it without the table changing height.
      */
     loading?: boolean;
     /**

package/dist/types-cjs/form/ColorInput.d.ts

@@ -16,7 +16,10 @@ import { ColorInputBaseProps } from './ColorInputBase.js';
  * name on that `Field`.
  *
  * @helperProps Helper props go on the `.colorinput` `<div>`, with
- * `className`. The other attributes go on the text `<input>`.
+ * `className`, except that the background helpers go on the text `<input>`,
+ * and the text helpers on both, since Bulma's `.input` sets its own
+ * background and font, and the popover inside the `<div>` takes the text
+ * ones. The other attributes go on the `<input>`.
  * @extraProp {string} [name] - Form field name. The field submits the text it shows, the value in `format`, or nothing when it's empty.
  * @extraProp {boolean} [required=false] - Marks the field required, so an empty one fails the form's constraint validation.
  * @extraProp {React.Ref<HTMLInputElement>} [ref] - Forwarded to the text `<input>`.

package/dist/types-cjs/form/ColorInputBase.d.ts

@@ -8,7 +8,10 @@ import { type PickerPosition } from './_pickerInternals/pickerTypes.js';
  * only.
  *
  * @helperProps Helper props go on the `.colorinput` `<div>`, with
- * `className`. The other attributes go on the text `<input>`.
+ * `className`, except that the background helpers go on the text `<input>`,
+ * and the text helpers on both, since Bulma's `.input` sets its own
+ * background and font, and the popover inside the `<div>` takes the text
+ * ones. The other attributes go on the `<input>`.
  * @extraProp {string} [name] - Form field name. The field submits the text it shows, the value in `format`, or nothing when it's empty.
  * @extraProp {boolean} [required=false] - Marks the field required, so an empty one fails the form's constraint validation.
  * @extraProp {React.Ref<HTMLInputElement>} [ref] - Forwarded to the text `<input>`.

package/dist/types-cjs/form/DateInputBase.d.ts

@@ -5,6 +5,13 @@ import { DateFormatOption } from './_pickerInternals/formatters.js';
 /**
  * Props for the raw DateInput base. Use the higher-level `DateInput` for
  * Field/Control composition; `DateInputBase` is the input + popover only.
+ *
+ * @helperProps Helper props go on the `.dateinput-container` `<div>`, with
+ * `className` and the other attributes, except that the background helpers
+ * go on the `<input>`, and the text helpers on both, since Bulma's `.input`
+ * sets its own background and font, and the popover inside the `<div>`
+ * takes the text ones. Inline they all go on the `<div>`, and on the native
+ * mobile input, on the `<input>`.
  */
 export interface DateInputBaseProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'value' | 'defaultValue' | 'onChange' | 'size' | 'color' | 'min' | 'max' | 'type' | 'popover'>, Omit<BulmaClassesProps, 'color'> {
     /** Controlled selected date. */

package/dist/types-cjs/form/DateRangeInputBase.d.ts

@@ -7,6 +7,13 @@ export type { DateRangeValue };
  * Props for the raw DateRangeInput base. Use the higher-level
  * `DateRangeInput` for Field/Control composition; `DateRangeInputBase` is the
  * two inputs and the popover only.
+ *
+ * @helperProps Helper props go on the root `.daterangeinput` `<div>`, with
+ * `className` and the other attributes, except that the background helpers
+ * go on the `.input` `<div>` that draws the field around the two `<input>`s,
+ * since Bulma's `.input` sets its own background. The text helpers go on the
+ * root and on both `<input>`s too, which take no alignment or case from
+ * around them. Inline they all go on the root.
  */
 export interface DateRangeInputBaseProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'defaultValue' | 'onChange' | 'color' | 'placeholder' | 'popover'>, Omit<BulmaClassesProps, 'color'> {
     /**

package/dist/types-cjs/form/DateTimeInputBase.d.ts

@@ -6,6 +6,13 @@ import { DateFormatOption } from './_pickerInternals/formatters.js';
  * Props for the raw DateTimeInput base. Use the higher-level `DateTimeInput`
  * for Field/Control composition. Combines the prop set of `DateInputBaseProps`
  * and `TimeInputBaseProps`.
+ *
+ * @helperProps Helper props go on the `.datetimeinput-container` `<div>`, with
+ * `className` and the other attributes, except that the background helpers
+ * go on the `<input>`, and the text helpers on both, since Bulma's `.input`
+ * sets its own background and font, and the popover inside the `<div>`
+ * takes the text ones. Inline they all go on the `<div>`, and on the native
+ * mobile input, on the `<input>`.
  */
 export interface DateTimeInputBaseProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'value' | 'defaultValue' | 'onChange' | 'size' | 'color' | 'min' | 'max' | 'type' | 'popover'>, Omit<BulmaClassesProps, 'color'> {
     /** Controlled selected date-time. */

package/dist/types-cjs/form/PasswordInput.d.ts

@@ -16,7 +16,9 @@ import { PasswordInputBaseProps } from './PasswordInputBase.js';
  *
  * @helperProps Helper props go on the `.password-input-container` `<div>`, with
  * `className` and `style`, so they move and size the field and its toggle
- * together. The other attributes go on the `<input>`.
+ * together, except that the background and text helpers go on the
+ * `<input>`, since Bulma's `.input` sets its own background and font. The
+ * other attributes go on the `<input>` too.
  * @extraProp {string} [autoComplete="current-password"] - Tells the browser and password managers this is an existing password. Pass `"new-password"` where the user makes one up, on a sign-up or change-password form.
  * @extraProp {boolean} [spellCheck=false] - Off, so a browser's spellcheck never sees the password once it shows.
  * @extraProp {string} [autoCorrect="off"] - Off, so a phone's keyboard doesn't change what's typed.

package/dist/types-cjs/form/PasswordInputBase.d.ts

@@ -34,7 +34,9 @@ export interface PasswordInputLabels {
  *
  * @helperProps Helper props go on the `.password-input-container` `<div>`, with
  * `className` and `style`, so they move and size the field and its toggle
- * together. The other attributes go on the `<input>`.
+ * together, except that the background and text helpers go on the
+ * `<input>`, since Bulma's `.input` sets its own background and font. The
+ * other attributes go on the `<input>` too.
  * @extraProp {string} [autoComplete="current-password"] - Tells the browser and password managers this is an existing password. Pass `"new-password"` where the user makes one up, on a sign-up or change-password form.
  * @extraProp {boolean} [spellCheck=false] - Off, so a browser's spellcheck never sees the password once it shows.
  * @extraProp {string} [autoCorrect="off"] - Off, so a phone's keyboard doesn't change what's typed.

package/dist/types-cjs/form/TimeInputBase.d.ts

@@ -5,6 +5,13 @@ import { DateFormatOption } from './_pickerInternals/formatters.js';
 /**
  * Props for the raw TimeInput base. Use the higher-level `TimeInput` for
  * Field/Control composition; `TimeInputBase` is the input + popover only.
+ *
+ * @helperProps Helper props go on the `.timeinput-container` `<div>`, with
+ * `className` and the other attributes, except that the background helpers
+ * go on the `<input>`, and the text helpers on both, since Bulma's `.input`
+ * sets its own background and font, and the popover inside the `<div>`
+ * takes the text ones. Inline they all go on the `<div>`, and on the native
+ * mobile input, on the `<input>`.
  */
 export interface TimeInputBaseProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'value' | 'defaultValue' | 'onChange' | 'size' | 'color' | 'min' | 'max' | 'type' | 'popover'>, Omit<BulmaClassesProps, 'color'> {
     /** Controlled selected time (date portion is preserved). */

package/dist/types-cjs/helpers/useFieldHelperClasses.d.ts

@@ -0,0 +1,26 @@
+import { BulmaClassesProps } from './useBulmaClasses.js';
+/**
+ * Splits the helper props of a field drawn by an `.input` inside a wrapper
+ * of the component's own, such as a picker's container, into the classes
+ * each element needs.
+ *
+ * Bulma's `.input` sets its own background, font weight, alignment, case
+ * and family, so the background and text helpers style nothing in the field
+ * from the wrapper. They come back apart from the rest, for the component to
+ * put on the field and its inputs. The text helpers can stay on the wrapper
+ * as well, where something inside it, such as a popover, takes them.
+ *
+ * @function useFieldHelperClasses
+ * @param props - The component's remaining props, helper props among them.
+ * @returns `backgroundClasses` and `textClasses` from the background and
+ * text helpers, `otherClasses` from the rest, `bulmaHelperClasses` from all
+ * of them, for an element that takes them all, and `rest`, the props that
+ * aren't helper props.
+ */
+export declare const useFieldHelperClasses: <T extends object>(props: BulmaClassesProps & T) => {
+    bulmaHelperClasses: string;
+    backgroundClasses: string;
+    textClasses: string;
+    otherClasses: string;
+    rest: Omit<T, keyof BulmaClassesProps>;
+};