@allxsmith/bestax-bulma 5.67.7 → 5.67.8

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 (50) hide show
  1. package/dist/bestax.css +1 -1
  2. package/dist/bestax.css.map +1 -1
  3. package/dist/esm/form/ColorInput.js.map +1 -1
  4. package/dist/esm/form/ColorInputBase.js +6 -3
  5. package/dist/esm/form/ColorInputBase.js.map +1 -1
  6. package/dist/esm/form/DateInputBase.js +6 -3
  7. package/dist/esm/form/DateInputBase.js.map +1 -1
  8. package/dist/esm/form/DateRangeInputBase.js +9 -5
  9. package/dist/esm/form/DateRangeInputBase.js.map +1 -1
  10. package/dist/esm/form/DateTimeInputBase.js +6 -3
  11. package/dist/esm/form/DateTimeInputBase.js.map +1 -1
  12. package/dist/esm/form/PasswordInput.js.map +1 -1
  13. package/dist/esm/form/PasswordInputBase.js +7 -5
  14. package/dist/esm/form/PasswordInputBase.js.map +1 -1
  15. package/dist/esm/form/TimeInputBase.js +6 -3
  16. package/dist/esm/form/TimeInputBase.js.map +1 -1
  17. package/dist/esm/helpers/useFieldHelperClasses.js +60 -0
  18. package/dist/esm/helpers/useFieldHelperClasses.js.map +1 -0
  19. package/dist/extras.css +1 -1
  20. package/dist/extras.css.map +1 -1
  21. package/dist/index.cjs +88 -16
  22. package/dist/index.cjs.map +1 -1
  23. package/dist/types/form/ColorInput.d.ts +4 -1
  24. package/dist/types/form/ColorInputBase.d.ts +4 -1
  25. package/dist/types/form/DateInputBase.d.ts +7 -0
  26. package/dist/types/form/DateRangeInputBase.d.ts +7 -0
  27. package/dist/types/form/DateTimeInputBase.d.ts +7 -0
  28. package/dist/types/form/PasswordInput.d.ts +3 -1
  29. package/dist/types/form/PasswordInputBase.d.ts +3 -1
  30. package/dist/types/form/TimeInputBase.d.ts +7 -0
  31. package/dist/types/helpers/useFieldHelperClasses.d.ts +26 -0
  32. package/dist/types-cjs/form/ColorInput.d.ts +4 -1
  33. package/dist/types-cjs/form/ColorInputBase.d.ts +4 -1
  34. package/dist/types-cjs/form/DateInputBase.d.ts +7 -0
  35. package/dist/types-cjs/form/DateRangeInputBase.d.ts +7 -0
  36. package/dist/types-cjs/form/DateTimeInputBase.d.ts +7 -0
  37. package/dist/types-cjs/form/PasswordInput.d.ts +3 -1
  38. package/dist/types-cjs/form/PasswordInputBase.d.ts +3 -1
  39. package/dist/types-cjs/form/TimeInputBase.d.ts +7 -0
  40. package/dist/types-cjs/helpers/useFieldHelperClasses.d.ts +26 -0
  41. package/dist/versions/bestax-no-dark-mode.css +1 -1
  42. package/dist/versions/bestax-no-dark-mode.css.map +1 -1
  43. package/dist/versions/bestax-no-helpers-prefixed.css +1 -1
  44. package/dist/versions/bestax-no-helpers-prefixed.css.map +1 -1
  45. package/dist/versions/bestax-no-helpers.css +1 -1
  46. package/dist/versions/bestax-no-helpers.css.map +1 -1
  47. package/dist/versions/bestax-prefixed.css +1 -1
  48. package/dist/versions/bestax-prefixed.css.map +1 -1
  49. package/package.json +1 -1
  50. package/src/scss/form/_field.scss +16 -1
@@ -16,7 +16,10 @@ import { ColorInputBaseProps } from './ColorInputBase.js';
16
16
  * name on that `Field`.
17
17
  *
18
18
  * @helperProps Helper props go on the `.colorinput` `<div>`, with
19
- * `className`. The other attributes go on the text `<input>`.
19
+ * `className`, except that the background helpers go on the text `<input>`,
20
+ * and the text helpers on both, since Bulma's `.input` sets its own
21
+ * background and font, and the popover inside the `<div>` takes the text
22
+ * ones. The other attributes go on the `<input>`.
20
23
  * @extraProp {string} [name] - Form field name. The field submits the text it shows, the value in `format`, or nothing when it's empty.
21
24
  * @extraProp {boolean} [required=false] - Marks the field required, so an empty one fails the form's constraint validation.
22
25
  * @extraProp {React.Ref<HTMLInputElement>} [ref] - Forwarded to the text `<input>`.
@@ -8,7 +8,10 @@ import { type PickerPosition } from './_pickerInternals/pickerTypes.js';
8
8
  * only.
9
9
  *
10
10
  * @helperProps Helper props go on the `.colorinput` `<div>`, with
11
- * `className`. The other attributes go on the text `<input>`.
11
+ * `className`, except that the background helpers go on the text `<input>`,
12
+ * and the text helpers on both, since Bulma's `.input` sets its own
13
+ * background and font, and the popover inside the `<div>` takes the text
14
+ * ones. The other attributes go on the `<input>`.
12
15
  * @extraProp {string} [name] - Form field name. The field submits the text it shows, the value in `format`, or nothing when it's empty.
13
16
  * @extraProp {boolean} [required=false] - Marks the field required, so an empty one fails the form's constraint validation.
14
17
  * @extraProp {React.Ref<HTMLInputElement>} [ref] - Forwarded to the text `<input>`.
@@ -5,6 +5,13 @@ import { DateFormatOption } from './_pickerInternals/formatters.js';
5
5
  /**
6
6
  * Props for the raw DateInput base. Use the higher-level `DateInput` for
7
7
  * Field/Control composition; `DateInputBase` is the input + popover only.
8
+ *
9
+ * @helperProps Helper props go on the `.dateinput-container` `<div>`, with
10
+ * `className` and the other attributes, except that the background helpers
11
+ * go on the `<input>`, and the text helpers on both, since Bulma's `.input`
12
+ * sets its own background and font, and the popover inside the `<div>`
13
+ * takes the text ones. Inline they all go on the `<div>`, and on the native
14
+ * mobile input, on the `<input>`.
8
15
  */
9
16
  export interface DateInputBaseProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'value' | 'defaultValue' | 'onChange' | 'size' | 'color' | 'min' | 'max' | 'type' | 'popover'>, Omit<BulmaClassesProps, 'color'> {
10
17
  /** Controlled selected date. */
@@ -7,6 +7,13 @@ export type { DateRangeValue };
7
7
  * Props for the raw DateRangeInput base. Use the higher-level
8
8
  * `DateRangeInput` for Field/Control composition; `DateRangeInputBase` is the
9
9
  * two inputs and the popover only.
10
+ *
11
+ * @helperProps Helper props go on the root `.daterangeinput` `<div>`, with
12
+ * `className` and the other attributes, except that the background helpers
13
+ * go on the `.input` `<div>` that draws the field around the two `<input>`s,
14
+ * since Bulma's `.input` sets its own background. The text helpers go on the
15
+ * root and on both `<input>`s too, which take no alignment or case from
16
+ * around them. Inline they all go on the root.
10
17
  */
11
18
  export interface DateRangeInputBaseProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'defaultValue' | 'onChange' | 'color' | 'placeholder' | 'popover'>, Omit<BulmaClassesProps, 'color'> {
12
19
  /**
@@ -6,6 +6,13 @@ import { DateFormatOption } from './_pickerInternals/formatters.js';
6
6
  * Props for the raw DateTimeInput base. Use the higher-level `DateTimeInput`
7
7
  * for Field/Control composition. Combines the prop set of `DateInputBaseProps`
8
8
  * and `TimeInputBaseProps`.
9
+ *
10
+ * @helperProps Helper props go on the `.datetimeinput-container` `<div>`, with
11
+ * `className` and the other attributes, except that the background helpers
12
+ * go on the `<input>`, and the text helpers on both, since Bulma's `.input`
13
+ * sets its own background and font, and the popover inside the `<div>`
14
+ * takes the text ones. Inline they all go on the `<div>`, and on the native
15
+ * mobile input, on the `<input>`.
9
16
  */
10
17
  export interface DateTimeInputBaseProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'value' | 'defaultValue' | 'onChange' | 'size' | 'color' | 'min' | 'max' | 'type' | 'popover'>, Omit<BulmaClassesProps, 'color'> {
11
18
  /** Controlled selected date-time. */
@@ -16,7 +16,9 @@ import { PasswordInputBaseProps } from './PasswordInputBase.js';
16
16
  *
17
17
  * @helperProps Helper props go on the `.password-input-container` `<div>`, with
18
18
  * `className` and `style`, so they move and size the field and its toggle
19
- * together. The other attributes go on the `<input>`.
19
+ * together, except that the background and text helpers go on the
20
+ * `<input>`, since Bulma's `.input` sets its own background and font. The
21
+ * other attributes go on the `<input>` too.
20
22
  * @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.
21
23
  * @extraProp {boolean} [spellCheck=false] - Off, so a browser's spellcheck never sees the password once it shows.
22
24
  * @extraProp {string} [autoCorrect="off"] - Off, so a phone's keyboard doesn't change what's typed.
@@ -34,7 +34,9 @@ export interface PasswordInputLabels {
34
34
  *
35
35
  * @helperProps Helper props go on the `.password-input-container` `<div>`, with
36
36
  * `className` and `style`, so they move and size the field and its toggle
37
- * together. The other attributes go on the `<input>`.
37
+ * together, except that the background and text helpers go on the
38
+ * `<input>`, since Bulma's `.input` sets its own background and font. The
39
+ * other attributes go on the `<input>` too.
38
40
  * @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.
39
41
  * @extraProp {boolean} [spellCheck=false] - Off, so a browser's spellcheck never sees the password once it shows.
40
42
  * @extraProp {string} [autoCorrect="off"] - Off, so a phone's keyboard doesn't change what's typed.
@@ -5,6 +5,13 @@ import { DateFormatOption } from './_pickerInternals/formatters.js';
5
5
  /**
6
6
  * Props for the raw TimeInput base. Use the higher-level `TimeInput` for
7
7
  * Field/Control composition; `TimeInputBase` is the input + popover only.
8
+ *
9
+ * @helperProps Helper props go on the `.timeinput-container` `<div>`, with
10
+ * `className` and the other attributes, except that the background helpers
11
+ * go on the `<input>`, and the text helpers on both, since Bulma's `.input`
12
+ * sets its own background and font, and the popover inside the `<div>`
13
+ * takes the text ones. Inline they all go on the `<div>`, and on the native
14
+ * mobile input, on the `<input>`.
8
15
  */
9
16
  export interface TimeInputBaseProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'value' | 'defaultValue' | 'onChange' | 'size' | 'color' | 'min' | 'max' | 'type' | 'popover'>, Omit<BulmaClassesProps, 'color'> {
10
17
  /** Controlled selected time (date portion is preserved). */
@@ -0,0 +1,26 @@
1
+ import { BulmaClassesProps } from './useBulmaClasses.js';
2
+ /**
3
+ * Splits the helper props of a field drawn by an `.input` inside a wrapper
4
+ * of the component's own, such as a picker's container, into the classes
5
+ * each element needs.
6
+ *
7
+ * Bulma's `.input` sets its own background, font weight, alignment, case
8
+ * and family, so the background and text helpers style nothing in the field
9
+ * from the wrapper. They come back apart from the rest, for the component to
10
+ * put on the field and its inputs. The text helpers can stay on the wrapper
11
+ * as well, where something inside it, such as a popover, takes them.
12
+ *
13
+ * @function useFieldHelperClasses
14
+ * @param props - The component's remaining props, helper props among them.
15
+ * @returns `backgroundClasses` and `textClasses` from the background and
16
+ * text helpers, `otherClasses` from the rest, `bulmaHelperClasses` from all
17
+ * of them, for an element that takes them all, and `rest`, the props that
18
+ * aren't helper props.
19
+ */
20
+ export declare const useFieldHelperClasses: <T extends object>(props: BulmaClassesProps & T) => {
21
+ bulmaHelperClasses: string;
22
+ backgroundClasses: string;
23
+ textClasses: string;
24
+ otherClasses: string;
25
+ rest: Omit<T, keyof BulmaClassesProps>;
26
+ };
@@ -16,7 +16,10 @@ import { ColorInputBaseProps } from './ColorInputBase.js';
16
16
  * name on that `Field`.
17
17
  *
18
18
  * @helperProps Helper props go on the `.colorinput` `<div>`, with
19
- * `className`. The other attributes go on the text `<input>`.
19
+ * `className`, except that the background helpers go on the text `<input>`,
20
+ * and the text helpers on both, since Bulma's `.input` sets its own
21
+ * background and font, and the popover inside the `<div>` takes the text
22
+ * ones. The other attributes go on the `<input>`.
20
23
  * @extraProp {string} [name] - Form field name. The field submits the text it shows, the value in `format`, or nothing when it's empty.
21
24
  * @extraProp {boolean} [required=false] - Marks the field required, so an empty one fails the form's constraint validation.
22
25
  * @extraProp {React.Ref<HTMLInputElement>} [ref] - Forwarded to the text `<input>`.
@@ -8,7 +8,10 @@ import { type PickerPosition } from './_pickerInternals/pickerTypes.js';
8
8
  * only.
9
9
  *
10
10
  * @helperProps Helper props go on the `.colorinput` `<div>`, with
11
- * `className`. The other attributes go on the text `<input>`.
11
+ * `className`, except that the background helpers go on the text `<input>`,
12
+ * and the text helpers on both, since Bulma's `.input` sets its own
13
+ * background and font, and the popover inside the `<div>` takes the text
14
+ * ones. The other attributes go on the `<input>`.
12
15
  * @extraProp {string} [name] - Form field name. The field submits the text it shows, the value in `format`, or nothing when it's empty.
13
16
  * @extraProp {boolean} [required=false] - Marks the field required, so an empty one fails the form's constraint validation.
14
17
  * @extraProp {React.Ref<HTMLInputElement>} [ref] - Forwarded to the text `<input>`.
@@ -5,6 +5,13 @@ import { DateFormatOption } from './_pickerInternals/formatters.js';
5
5
  /**
6
6
  * Props for the raw DateInput base. Use the higher-level `DateInput` for
7
7
  * Field/Control composition; `DateInputBase` is the input + popover only.
8
+ *
9
+ * @helperProps Helper props go on the `.dateinput-container` `<div>`, with
10
+ * `className` and the other attributes, except that the background helpers
11
+ * go on the `<input>`, and the text helpers on both, since Bulma's `.input`
12
+ * sets its own background and font, and the popover inside the `<div>`
13
+ * takes the text ones. Inline they all go on the `<div>`, and on the native
14
+ * mobile input, on the `<input>`.
8
15
  */
9
16
  export interface DateInputBaseProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'value' | 'defaultValue' | 'onChange' | 'size' | 'color' | 'min' | 'max' | 'type' | 'popover'>, Omit<BulmaClassesProps, 'color'> {
10
17
  /** Controlled selected date. */
@@ -7,6 +7,13 @@ export type { DateRangeValue };
7
7
  * Props for the raw DateRangeInput base. Use the higher-level
8
8
  * `DateRangeInput` for Field/Control composition; `DateRangeInputBase` is the
9
9
  * two inputs and the popover only.
10
+ *
11
+ * @helperProps Helper props go on the root `.daterangeinput` `<div>`, with
12
+ * `className` and the other attributes, except that the background helpers
13
+ * go on the `.input` `<div>` that draws the field around the two `<input>`s,
14
+ * since Bulma's `.input` sets its own background. The text helpers go on the
15
+ * root and on both `<input>`s too, which take no alignment or case from
16
+ * around them. Inline they all go on the root.
10
17
  */
11
18
  export interface DateRangeInputBaseProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'defaultValue' | 'onChange' | 'color' | 'placeholder' | 'popover'>, Omit<BulmaClassesProps, 'color'> {
12
19
  /**
@@ -6,6 +6,13 @@ import { DateFormatOption } from './_pickerInternals/formatters.js';
6
6
  * Props for the raw DateTimeInput base. Use the higher-level `DateTimeInput`
7
7
  * for Field/Control composition. Combines the prop set of `DateInputBaseProps`
8
8
  * and `TimeInputBaseProps`.
9
+ *
10
+ * @helperProps Helper props go on the `.datetimeinput-container` `<div>`, with
11
+ * `className` and the other attributes, except that the background helpers
12
+ * go on the `<input>`, and the text helpers on both, since Bulma's `.input`
13
+ * sets its own background and font, and the popover inside the `<div>`
14
+ * takes the text ones. Inline they all go on the `<div>`, and on the native
15
+ * mobile input, on the `<input>`.
9
16
  */
10
17
  export interface DateTimeInputBaseProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'value' | 'defaultValue' | 'onChange' | 'size' | 'color' | 'min' | 'max' | 'type' | 'popover'>, Omit<BulmaClassesProps, 'color'> {
11
18
  /** Controlled selected date-time. */
@@ -16,7 +16,9 @@ import { PasswordInputBaseProps } from './PasswordInputBase.js';
16
16
  *
17
17
  * @helperProps Helper props go on the `.password-input-container` `<div>`, with
18
18
  * `className` and `style`, so they move and size the field and its toggle
19
- * together. The other attributes go on the `<input>`.
19
+ * together, except that the background and text helpers go on the
20
+ * `<input>`, since Bulma's `.input` sets its own background and font. The
21
+ * other attributes go on the `<input>` too.
20
22
  * @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.
21
23
  * @extraProp {boolean} [spellCheck=false] - Off, so a browser's spellcheck never sees the password once it shows.
22
24
  * @extraProp {string} [autoCorrect="off"] - Off, so a phone's keyboard doesn't change what's typed.
@@ -34,7 +34,9 @@ export interface PasswordInputLabels {
34
34
  *
35
35
  * @helperProps Helper props go on the `.password-input-container` `<div>`, with
36
36
  * `className` and `style`, so they move and size the field and its toggle
37
- * together. The other attributes go on the `<input>`.
37
+ * together, except that the background and text helpers go on the
38
+ * `<input>`, since Bulma's `.input` sets its own background and font. The
39
+ * other attributes go on the `<input>` too.
38
40
  * @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.
39
41
  * @extraProp {boolean} [spellCheck=false] - Off, so a browser's spellcheck never sees the password once it shows.
40
42
  * @extraProp {string} [autoCorrect="off"] - Off, so a phone's keyboard doesn't change what's typed.
@@ -5,6 +5,13 @@ import { DateFormatOption } from './_pickerInternals/formatters.js';
5
5
  /**
6
6
  * Props for the raw TimeInput base. Use the higher-level `TimeInput` for
7
7
  * Field/Control composition; `TimeInputBase` is the input + popover only.
8
+ *
9
+ * @helperProps Helper props go on the `.timeinput-container` `<div>`, with
10
+ * `className` and the other attributes, except that the background helpers
11
+ * go on the `<input>`, and the text helpers on both, since Bulma's `.input`
12
+ * sets its own background and font, and the popover inside the `<div>`
13
+ * takes the text ones. Inline they all go on the `<div>`, and on the native
14
+ * mobile input, on the `<input>`.
8
15
  */
9
16
  export interface TimeInputBaseProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'value' | 'defaultValue' | 'onChange' | 'size' | 'color' | 'min' | 'max' | 'type' | 'popover'>, Omit<BulmaClassesProps, 'color'> {
10
17
  /** Controlled selected time (date portion is preserved). */
@@ -0,0 +1,26 @@
1
+ import { BulmaClassesProps } from './useBulmaClasses.js';
2
+ /**
3
+ * Splits the helper props of a field drawn by an `.input` inside a wrapper
4
+ * of the component's own, such as a picker's container, into the classes
5
+ * each element needs.
6
+ *
7
+ * Bulma's `.input` sets its own background, font weight, alignment, case
8
+ * and family, so the background and text helpers style nothing in the field
9
+ * from the wrapper. They come back apart from the rest, for the component to
10
+ * put on the field and its inputs. The text helpers can stay on the wrapper
11
+ * as well, where something inside it, such as a popover, takes them.
12
+ *
13
+ * @function useFieldHelperClasses
14
+ * @param props - The component's remaining props, helper props among them.
15
+ * @returns `backgroundClasses` and `textClasses` from the background and
16
+ * text helpers, `otherClasses` from the rest, `bulmaHelperClasses` from all
17
+ * of them, for an element that takes them all, and `rest`, the props that
18
+ * aren't helper props.
19
+ */
20
+ export declare const useFieldHelperClasses: <T extends object>(props: BulmaClassesProps & T) => {
21
+ bulmaHelperClasses: string;
22
+ backgroundClasses: string;
23
+ textClasses: string;
24
+ otherClasses: string;
25
+ rest: Omit<T, keyof BulmaClassesProps>;
26
+ };