@allxsmith/bestax-bulma 5.48.0 → 5.49.0

package/dist/index.esm.js

@@ -118,6 +118,7 @@ export { Hero, HeroBody, HeroFoot, HeroHead } from './esm/layout/Hero.js';
 export { Level, LevelItem, LevelLeft, LevelRight } from './esm/layout/Level.js';
 export { Media, MediaContent, MediaLeft, MediaRight } from './esm/layout/Media.js';
 export { Section } from './esm/layout/Section.js';
+export { Splitter, SplitterPane } from './esm/layout/Splitter.js';
 export { useColorClasses, useColorStyles } from './esm/helpers/useColorClasses.js';
 export { useFlexboxClasses } from './esm/helpers/useFlexboxClasses.js';
 export { useOtherClasses } from './esm/helpers/useOtherClasses.js';

package/dist/index.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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

@@ -0,0 +1,62 @@
+/** What one pane may be: its limits in percent, and whether it can shut. */
+export interface PaneBounds {
+    min: number;
+    max: number;
+    collapsible: boolean;
+}
+/** A limit as written: a percentage, or a CSS length in px, rem or %. */
+export type SplitterLimit = number | string;
+/**
+ * A limit in percent of `length` pixels. A number or a `%` is already one. A
+ * `px` or `rem` length needs the length the panes share, and without it
+ * there's no answer yet, so it's `null`. Anything else is `null` too.
+ */
+export declare function limitToPercent(limit: SplitterLimit | undefined, length: number | null, remPx: number): number | null;
+/**
+ * The sizes panes start at: each its `defaultSize`, and the ones without
+ * one sharing what's left equally. When they all have one, or those that do
+ * take more than 100, the given ones are scaled to fit.
+ */
+export declare function defaultSizes(defaults: (number | undefined)[]): number[];
+/**
+ * Moves each pane into its limits, taking what it needs from the nearest
+ * panes with room to give, or giving what it has too much of to the nearest
+ * with room to take. A shut pane stays shut. Limits that can't all hold are
+ * met as far as they can be.
+ */
+export declare function fitSizes(sizes: number[], bounds: PaneBounds[]): number[];
+/** Whether two layouts are the same, to within rounding. */
+export declare const sameSizes: (a: number[], b: number[]) => boolean;
+/**
+ * The pane a handle speaks for: the one before it, unless only the one after
+ * it can shut, so that Enter shuts the pane you'd expect.
+ */
+export declare const primaryOf: (handle: number, bounds: PaneBounds[]) => number;
+/**
+ * How far the pane before handle `a`'s line can go, between the two panes
+ * beside it: `low` to `high` while both stay open, and `shut` and `full`
+ * when one of them can close.
+ */
+export declare function pairRange(sizes: number[], a: number, bounds: PaneBounds[]): {
+    total: number;
+    low: number;
+    high: number;
+    shut: boolean;
+    full: boolean;
+};
+/**
+ * The layout with the line of handle `a` moved so the pane before it is
+ * `target`, within both panes' limits. A collapsible pane dragged below half
+ * its minimum shuts, and one that's shut opens at its minimum once dragged
+ * past that point.
+ */
+export declare function resizePair(sizes: number[], a: number, target: number, bounds: PaneBounds[]): number[];
+/**
+ * The aria value range of a handle's primary pane: zero at the bottom when
+ * it can shut, everything the pair holds at the top when the other pane can.
+ */
+export declare function primaryRange(sizes: number[], a: number, primary: number, bounds: PaneBounds[]): {
+    now: number;
+    min: number;
+    max: number;
+};

package/dist/types/index.d.ts

@@ -136,3 +136,4 @@ export * from './layout/Hero.js';
 export * from './layout/Level.js';
 export * from './layout/Media.js';
 export * from './layout/Section.js';
+export * from './layout/Splitter.js';

package/dist/types/layout/Splitter.d.ts

@@ -0,0 +1,125 @@
+import React from 'react';
+import { BulmaClassesProps, validColors } from '../helpers/useBulmaClasses.js';
+import { SplitterLimit } from '../helpers/splitterLayout.js';
+/** The way the panes run: side by side, or one above the other. */
+export type SplitterOrientation = 'horizontal' | 'vertical';
+/**
+ * Props for Splitter.Pane, one of the panes. The helper props, the other
+ * attributes and the `ref` land on its `<div>`.
+ *
+ * @extraProp {React.Ref<HTMLDivElement>} [ref] - Ref forwarded to the pane's `<div>`.
+ * @extraProp {string} [id] - The pane's id, which its handle's `aria-controls` points at. The splitter makes one when there's none.
+ */
+export interface SplitterPaneProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'color'>, Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {
+    /** Additional CSS classes to apply. */
+    className?: string;
+    /**
+     * What the pane is, such as "Files". It names the handle that speaks for
+     * this pane, which is announced as "Files, separator, 25". That's the
+     * handle after it, or the one before it when only this pane, of the two
+     * beside that handle, can collapse. A development build warns when a
+     * handle's pane has none.
+     */
+    label?: string;
+    /**
+     * Its starting size, in percent of the room the panes share. Panes without
+     * one share what's left equally, and a total over 100 is scaled down.
+     */
+    defaultSize?: number;
+    /**
+     * The smallest it can be dragged: a percentage, or a CSS length in `px` or
+     * `rem` such as `"12rem"`. A length applies once the splitter has measured
+     * itself in the browser, so the server renders the default size.
+     */
+    minSize?: SplitterLimit;
+    /** The largest it can be dragged, in the same units as `minSize`. */
+    maxSize?: SplitterLimit;
+    /**
+     * Lets it collapse: dragging it below half its `minSize` shuts it, and
+     * Enter on its handle shuts it and brings it back at the size it had. It
+     * collapses only when the pane across its handle can take its room within
+     * that pane's `maxSize`, since a handle moves only the two panes beside it.
+     * A collapsed pane stays mounted, hidden, so it keeps its state.
+     */
+    collapsible?: boolean;
+    /**
+     * Whether it's collapsed, for a `collapsible` pane. With it, the state is
+     * yours: a drag, a key or a double-click that would collapse it or bring
+     * it back calls `onCollapsedChange` and leaves it as it is, and it changes
+     * when `collapsed` does.
+     */
+    collapsed?: boolean;
+    /** Whether a `collapsible` pane starts collapsed. */
+    defaultCollapsed?: boolean;
+    /**
+     * Called when a drag, a key or a double-click collapses it or brings it
+     * back, or, with `collapsed`, would. Not called for a change you made with
+     * `collapsed`.
+     */
+    onCollapsedChange?: (collapsed: boolean) => void;
+    /** What's in it. Content that scrolls belongs in a `ScrollArea`, so a keyboard can reach it. */
+    children?: React.ReactNode;
+    /** Text color helper. */
+    textColor?: (typeof validColors)[number] | 'inherit' | 'current';
+    /** Background color helper. */
+    bgColor?: (typeof validColors)[number] | 'inherit' | 'current';
+}
+/**
+ * Props for the Splitter component. The helper props, the other attributes
+ * and the `ref` land on the root `<div>`.
+ *
+ * @extraProp {React.Ref<HTMLDivElement>} [ref] - Ref forwarded to the root `<div>`.
+ */
+export interface SplitterProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'color'>, Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {
+    /** Additional CSS classes to apply. */
+    className?: string;
+    /**
+     * `Splitter.Pane`s, two or more, each a direct child, with Fragments
+     * opened up. A handle goes between each pair. Changing which panes there
+     * are puts every pane back to its default size.
+     */
+    children?: React.ReactNode;
+    /**
+     * The way the panes run: side by side (`horizontal`) or one above the
+     * other (`vertical`).
+     */
+    orientation?: SplitterOrientation;
+    /**
+     * The splitter's height. A number is pixels, and a string any CSS length.
+     * A vertical splitter needs a height to split.
+     */
+    height?: number | string;
+    /**
+     * Each pane's size, in percent, in order, adding up to 100. With it, the
+     * sizes are yours: update them from `onSizesChange`. Without it, each
+     * pane starts at its `defaultSize`.
+     */
+    sizes?: number[];
+    /**
+     * Called with every pane's size, in percent, whenever they change: on
+     * each step of a drag or a key, on a collapse and on a reset.
+     */
+    onSizesChange?: (sizes: number[]) => void;
+    /**
+     * How far an arrow key moves a handle, in percent. Shift moves ten times
+     * as far.
+     */
+    step?: number;
+    /** Text color helper. */
+    textColor?: (typeof validColors)[number] | 'inherit' | 'current';
+    /** Background color helper. */
+    bgColor?: (typeof validColors)[number] | 'inherit' | 'current';
+}
+/**
+ * One pane of a Splitter, sized by the splitter around it.
+ *
+ * @function
+ * @param {SplitterPaneProps} props - Props for Splitter.Pane.
+ * @param {React.Ref<HTMLDivElement>} ref - Forwarded ref to the pane's `<div>`.
+ * @returns {JSX.Element} The rendered pane.
+ */
+export declare const SplitterPane: React.ForwardRefExoticComponent<SplitterPaneProps & React.RefAttributes<HTMLDivElement>>;
+export declare const Splitter: React.ForwardRefExoticComponent<SplitterProps & React.RefAttributes<HTMLDivElement>> & {
+    Pane: React.ForwardRefExoticComponent<SplitterPaneProps & React.RefAttributes<HTMLDivElement>>;
+};
+export default Splitter;

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

@@ -0,0 +1,62 @@
+/** What one pane may be: its limits in percent, and whether it can shut. */
+export interface PaneBounds {
+    min: number;
+    max: number;
+    collapsible: boolean;
+}
+/** A limit as written: a percentage, or a CSS length in px, rem or %. */
+export type SplitterLimit = number | string;
+/**
+ * A limit in percent of `length` pixels. A number or a `%` is already one. A
+ * `px` or `rem` length needs the length the panes share, and without it
+ * there's no answer yet, so it's `null`. Anything else is `null` too.
+ */
+export declare function limitToPercent(limit: SplitterLimit | undefined, length: number | null, remPx: number): number | null;
+/**
+ * The sizes panes start at: each its `defaultSize`, and the ones without
+ * one sharing what's left equally. When they all have one, or those that do
+ * take more than 100, the given ones are scaled to fit.
+ */
+export declare function defaultSizes(defaults: (number | undefined)[]): number[];
+/**
+ * Moves each pane into its limits, taking what it needs from the nearest
+ * panes with room to give, or giving what it has too much of to the nearest
+ * with room to take. A shut pane stays shut. Limits that can't all hold are
+ * met as far as they can be.
+ */
+export declare function fitSizes(sizes: number[], bounds: PaneBounds[]): number[];
+/** Whether two layouts are the same, to within rounding. */
+export declare const sameSizes: (a: number[], b: number[]) => boolean;
+/**
+ * The pane a handle speaks for: the one before it, unless only the one after
+ * it can shut, so that Enter shuts the pane you'd expect.
+ */
+export declare const primaryOf: (handle: number, bounds: PaneBounds[]) => number;
+/**
+ * How far the pane before handle `a`'s line can go, between the two panes
+ * beside it: `low` to `high` while both stay open, and `shut` and `full`
+ * when one of them can close.
+ */
+export declare function pairRange(sizes: number[], a: number, bounds: PaneBounds[]): {
+    total: number;
+    low: number;
+    high: number;
+    shut: boolean;
+    full: boolean;
+};
+/**
+ * The layout with the line of handle `a` moved so the pane before it is
+ * `target`, within both panes' limits. A collapsible pane dragged below half
+ * its minimum shuts, and one that's shut opens at its minimum once dragged
+ * past that point.
+ */
+export declare function resizePair(sizes: number[], a: number, target: number, bounds: PaneBounds[]): number[];
+/**
+ * The aria value range of a handle's primary pane: zero at the bottom when
+ * it can shut, everything the pair holds at the top when the other pane can.
+ */
+export declare function primaryRange(sizes: number[], a: number, primary: number, bounds: PaneBounds[]): {
+    now: number;
+    min: number;
+    max: number;
+};

package/dist/types-cjs/index.d.ts

@@ -136,3 +136,4 @@ export * from './layout/Hero.js';
 export * from './layout/Level.js';
 export * from './layout/Media.js';
 export * from './layout/Section.js';
+export * from './layout/Splitter.js';

package/dist/types-cjs/layout/Splitter.d.ts

@@ -0,0 +1,125 @@
+import React from 'react';
+import { BulmaClassesProps, validColors } from '../helpers/useBulmaClasses.js';
+import { SplitterLimit } from '../helpers/splitterLayout.js';
+/** The way the panes run: side by side, or one above the other. */
+export type SplitterOrientation = 'horizontal' | 'vertical';
+/**
+ * Props for Splitter.Pane, one of the panes. The helper props, the other
+ * attributes and the `ref` land on its `<div>`.
+ *
+ * @extraProp {React.Ref<HTMLDivElement>} [ref] - Ref forwarded to the pane's `<div>`.
+ * @extraProp {string} [id] - The pane's id, which its handle's `aria-controls` points at. The splitter makes one when there's none.
+ */
+export interface SplitterPaneProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'color'>, Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {
+    /** Additional CSS classes to apply. */
+    className?: string;
+    /**
+     * What the pane is, such as "Files". It names the handle that speaks for
+     * this pane, which is announced as "Files, separator, 25". That's the
+     * handle after it, or the one before it when only this pane, of the two
+     * beside that handle, can collapse. A development build warns when a
+     * handle's pane has none.
+     */
+    label?: string;
+    /**
+     * Its starting size, in percent of the room the panes share. Panes without
+     * one share what's left equally, and a total over 100 is scaled down.
+     */
+    defaultSize?: number;
+    /**
+     * The smallest it can be dragged: a percentage, or a CSS length in `px` or
+     * `rem` such as `"12rem"`. A length applies once the splitter has measured
+     * itself in the browser, so the server renders the default size.
+     */
+    minSize?: SplitterLimit;
+    /** The largest it can be dragged, in the same units as `minSize`. */
+    maxSize?: SplitterLimit;
+    /**
+     * Lets it collapse: dragging it below half its `minSize` shuts it, and
+     * Enter on its handle shuts it and brings it back at the size it had. It
+     * collapses only when the pane across its handle can take its room within
+     * that pane's `maxSize`, since a handle moves only the two panes beside it.
+     * A collapsed pane stays mounted, hidden, so it keeps its state.
+     */
+    collapsible?: boolean;
+    /**
+     * Whether it's collapsed, for a `collapsible` pane. With it, the state is
+     * yours: a drag, a key or a double-click that would collapse it or bring
+     * it back calls `onCollapsedChange` and leaves it as it is, and it changes
+     * when `collapsed` does.
+     */
+    collapsed?: boolean;
+    /** Whether a `collapsible` pane starts collapsed. */
+    defaultCollapsed?: boolean;
+    /**
+     * Called when a drag, a key or a double-click collapses it or brings it
+     * back, or, with `collapsed`, would. Not called for a change you made with
+     * `collapsed`.
+     */
+    onCollapsedChange?: (collapsed: boolean) => void;
+    /** What's in it. Content that scrolls belongs in a `ScrollArea`, so a keyboard can reach it. */
+    children?: React.ReactNode;
+    /** Text color helper. */
+    textColor?: (typeof validColors)[number] | 'inherit' | 'current';
+    /** Background color helper. */
+    bgColor?: (typeof validColors)[number] | 'inherit' | 'current';
+}
+/**
+ * Props for the Splitter component. The helper props, the other attributes
+ * and the `ref` land on the root `<div>`.
+ *
+ * @extraProp {React.Ref<HTMLDivElement>} [ref] - Ref forwarded to the root `<div>`.
+ */
+export interface SplitterProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'color'>, Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {
+    /** Additional CSS classes to apply. */
+    className?: string;
+    /**
+     * `Splitter.Pane`s, two or more, each a direct child, with Fragments
+     * opened up. A handle goes between each pair. Changing which panes there
+     * are puts every pane back to its default size.
+     */
+    children?: React.ReactNode;
+    /**
+     * The way the panes run: side by side (`horizontal`) or one above the
+     * other (`vertical`).
+     */
+    orientation?: SplitterOrientation;
+    /**
+     * The splitter's height. A number is pixels, and a string any CSS length.
+     * A vertical splitter needs a height to split.
+     */
+    height?: number | string;
+    /**
+     * Each pane's size, in percent, in order, adding up to 100. With it, the
+     * sizes are yours: update them from `onSizesChange`. Without it, each
+     * pane starts at its `defaultSize`.
+     */
+    sizes?: number[];
+    /**
+     * Called with every pane's size, in percent, whenever they change: on
+     * each step of a drag or a key, on a collapse and on a reset.
+     */
+    onSizesChange?: (sizes: number[]) => void;
+    /**
+     * How far an arrow key moves a handle, in percent. Shift moves ten times
+     * as far.
+     */
+    step?: number;
+    /** Text color helper. */
+    textColor?: (typeof validColors)[number] | 'inherit' | 'current';
+    /** Background color helper. */
+    bgColor?: (typeof validColors)[number] | 'inherit' | 'current';
+}
+/**
+ * One pane of a Splitter, sized by the splitter around it.
+ *
+ * @function
+ * @param {SplitterPaneProps} props - Props for Splitter.Pane.
+ * @param {React.Ref<HTMLDivElement>} ref - Forwarded ref to the pane's `<div>`.
+ * @returns {JSX.Element} The rendered pane.
+ */
+export declare const SplitterPane: React.ForwardRefExoticComponent<SplitterPaneProps & React.RefAttributes<HTMLDivElement>>;
+export declare const Splitter: React.ForwardRefExoticComponent<SplitterProps & React.RefAttributes<HTMLDivElement>> & {
+    Pane: React.ForwardRefExoticComponent<SplitterPaneProps & React.RefAttributes<HTMLDivElement>>;
+};
+export default Splitter;