@msviderok/base-ui-solid 1.0.0-beta.1

package/esm/checkbox-group/CheckboxGroup.js

@@ -0,0 +1,96 @@
+import { batch, mergeProps as solidMergeProps } from 'solid-js';
+import { PARENT_CHECKBOX } from "../checkbox/root/CheckboxRoot.js";
+import { useFieldControlValidation } from "../field/control/useFieldControlValidation.js";
+import { useFieldRootContext } from "../field/root/FieldRootContext.js";
+import { useField } from "../field/useField.js";
+import { fieldValidityMapping } from "../field/utils/constants.js";
+import { splitComponentProps } from "../solid-helpers.js";
+import { useBaseUiId } from "../utils/useBaseUiId.js";
+import { useControlled } from "../utils/useControlled.js";
+import { useRenderElement } from "../utils/useRenderElement.js";
+import { CheckboxGroupContext } from "./CheckboxGroupContext.js";
+import { useCheckboxGroupParent } from "./useCheckboxGroupParent.js";
+
+/**
+ * Provides a shared state to a series of checkboxes.
+ *
+ * Documentation: [Base UI Checkbox Group](https://base-ui.com/react/components/checkbox-group)
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+export function CheckboxGroup(componentProps) {
+  const [, local, elementProps] = splitComponentProps(componentProps, ['allValues', 'defaultValue', 'disabled', 'id', 'onValueChange', 'render', 'value']);
+  const {
+    disabled: fieldDisabled,
+    labelId,
+    name: fieldName,
+    state: fieldState
+  } = useFieldRootContext();
+  const disabled = () => fieldDisabled() || (local.disabled ?? false);
+  const fieldControlValidation = useFieldControlValidation();
+  const [value, setValueUnwrapped] = useControlled({
+    controlled: () => local.value,
+    default: () => local.defaultValue,
+    name: 'CheckboxGroup',
+    state: 'value'
+  });
+  const setValue = (v, event) => {
+    batch(() => {
+      setValueUnwrapped(v);
+      local.onValueChange?.(v, event);
+    });
+  };
+  const parent = useCheckboxGroupParent({
+    allValues: () => local.allValues,
+    value: () => local.value,
+    onValueChange: (...args) => {
+      local.onValueChange?.(...args);
+    }
+  });
+  const id = useBaseUiId(() => local.id);
+  let controlRef = null;
+  const registerControlRef = element => {
+    if (controlRef == null && element != null && !element.hasAttribute(PARENT_CHECKBOX)) {
+      controlRef = element;
+    }
+  };
+  useField({
+    enabled: () => !!fieldName(),
+    id,
+    commitValidation: fieldControlValidation.commitValidation,
+    value,
+    controlRef: () => controlRef,
+    name: fieldName,
+    getValue: value
+  });
+  const contextValue = {
+    allValues: () => local.allValues,
+    value,
+    defaultValue: () => local.defaultValue,
+    setValue,
+    parent,
+    disabled,
+    fieldControlValidation,
+    registerControlRef
+  };
+  const state = solidMergeProps(fieldState, {
+    get disabled() {
+      return disabled();
+    }
+  });
+  const element = useRenderElement('div', componentProps, {
+    state,
+    customStyleHookMapping: fieldValidityMapping,
+    props: [{
+      get role() {
+        return 'group';
+      },
+      get 'aria-labelledby'() {
+        return labelId();
+      }
+    }, elementProps]
+  });
+  return /*#__PURE__*/_jsx(CheckboxGroupContext.Provider, {
+    value: contextValue,
+    children: element()
+  });
+}

package/esm/checkbox-group/CheckboxGroupContext.d.ts

@@ -0,0 +1,16 @@
+import { type Accessor } from 'solid-js';
+import { useFieldControlValidation } from "../field/control/useFieldControlValidation.js";
+import { useCheckboxGroupParent } from "./useCheckboxGroupParent.js";
+export interface CheckboxGroupContext {
+  value: Accessor<string[] | undefined>;
+  defaultValue: Accessor<string[] | undefined>;
+  setValue: (value: string[], event: Event) => void;
+  allValues: Accessor<string[] | undefined>;
+  parent: useCheckboxGroupParent.ReturnValue;
+  disabled: Accessor<boolean>;
+  fieldControlValidation: useFieldControlValidation.ReturnValue;
+  registerControlRef: (element: HTMLButtonElement | null | undefined) => void;
+}
+export declare const CheckboxGroupContext: import("solid-js").Context<CheckboxGroupContext | undefined>;
+export declare function useCheckboxGroupContext(optional: false): CheckboxGroupContext;
+export declare function useCheckboxGroupContext(optional?: true): CheckboxGroupContext | undefined;

package/esm/checkbox-group/CheckboxGroupContext.js

@@ -0,0 +1,9 @@
+import { createContext, useContext } from 'solid-js';
+export const CheckboxGroupContext = createContext();
+export function useCheckboxGroupContext(optional = true) {
+  const context = useContext(CheckboxGroupContext);
+  if (context === undefined && !optional) {
+    throw new Error('Base UI: CheckboxGroupContext is missing. CheckboxGroup parts must be placed within <CheckboxGroup>.');
+  }
+  return context;
+}

package/esm/checkbox-group/CheckboxGroupDataAttributes.d.ts

@@ -0,0 +1,6 @@
+export declare enum CheckboxGroupDataAttributes {
+  /**
+   * Present when the checkbox group is disabled.
+   */
+  disabled = "data-disabled",
+}

package/esm/checkbox-group/CheckboxGroupDataAttributes.js

@@ -0,0 +1,7 @@
+export let CheckboxGroupDataAttributes = /*#__PURE__*/function (CheckboxGroupDataAttributes) {
+  /**
+   * Present when the checkbox group is disabled.
+   */
+  CheckboxGroupDataAttributes["disabled"] = "data-disabled";
+  return CheckboxGroupDataAttributes;
+}({});

package/esm/checkbox-group/index.d.ts

@@ -0,0 +1 @@
+export { CheckboxGroup } from "./CheckboxGroup.js";

package/esm/checkbox-group/index.js

@@ -0,0 +1 @@
+export { CheckboxGroup } from "./CheckboxGroup.js";

package/esm/checkbox-group/index.parts.d.ts

@@ -0,0 +1 @@
+export { CheckboxGroup } from "./CheckboxGroup.js";

package/esm/checkbox-group/index.parts.js

@@ -0,0 +1 @@
+export { CheckboxGroup } from "./CheckboxGroup.js";

package/esm/checkbox-group/useCheckboxGroupParent.d.ts

@@ -0,0 +1,27 @@
+import { type Accessor } from 'solid-js';
+export declare function useCheckboxGroupParent(params: useCheckboxGroupParent.Parameters): useCheckboxGroupParent.ReturnValue;
+export declare namespace useCheckboxGroupParent {
+  interface Parameters {
+    allValues?: Accessor<string[] | undefined>;
+    value?: Accessor<string[] | undefined>;
+    onValueChange?: (value: string[], event: Event) => void;
+  }
+  interface ReturnValue {
+    id: Accessor<string | undefined>;
+    indeterminate: Accessor<boolean>;
+    disabledStatesRef: Map<string, boolean>;
+    getParentProps: () => {
+      id: string | undefined;
+      indeterminate: boolean;
+      checked: boolean;
+      'aria-controls': string;
+      onCheckedChange: (checked: boolean, event: Event) => void;
+    };
+    getChildProps: (name: string) => {
+      name: string;
+      id: string;
+      checked: boolean;
+      onCheckedChange: (checked: boolean, event: Event) => void;
+    };
+  }
+}

package/esm/checkbox-group/useCheckboxGroupParent.js

@@ -0,0 +1,89 @@
+import { batch, createSignal } from 'solid-js';
+import { useBaseUiId } from "../utils/useBaseUiId.js";
+const EMPTY = [];
+export function useCheckboxGroupParent(params) {
+  const allValues = () => params.allValues?.() ?? EMPTY;
+  const value = () => params.value?.() ?? EMPTY;
+  let uncontrolledStateRef = value();
+  const disabledStatesRef = new Map();
+  const [status, setStatus] = createSignal('mixed');
+  const id = useBaseUiId();
+  const checked = () => value().length === allValues().length;
+  const indeterminate = () => value().length !== allValues().length && value().length > 0;
+  const getParentProps = () => ({
+    get id() {
+      return id();
+    },
+    get indeterminate() {
+      return indeterminate();
+    },
+    get checked() {
+      return checked();
+    },
+    get 'aria-controls'() {
+      return allValues().map(v => `${id()}-${v}`).join(' ');
+    },
+    onCheckedChange(_, event) {
+      batch(() => {
+        const uncontrolledState = uncontrolledStateRef;
+
+        // None except the disabled ones that are checked, which can't be changed.
+        const none = allValues().filter(v => disabledStatesRef.get(v) && uncontrolledState.includes(v));
+        // "All" that are valid:
+        // - any that aren't disabled
+        // - disabled ones that are checked
+        const all = allValues().filter(v => !disabledStatesRef.get(v) || disabledStatesRef.get(v) && uncontrolledState.includes(v));
+        const allOnOrOff = uncontrolledState.length === all.length || uncontrolledState.length === 0;
+        if (allOnOrOff) {
+          if (value().length === all.length) {
+            params.onValueChange?.(none, event);
+          } else {
+            params.onValueChange?.(all, event);
+          }
+          return;
+        }
+        if (status() === 'mixed') {
+          params.onValueChange?.(all, event);
+          setStatus('on');
+        } else if (status() === 'on') {
+          params.onValueChange?.(none, event);
+          setStatus('off');
+        } else if (status() === 'off') {
+          params.onValueChange?.(uncontrolledState, event);
+          setStatus('mixed');
+        }
+      });
+    }
+  });
+  const getChildProps = name => ({
+    get name() {
+      return name;
+    },
+    get id() {
+      return `${id()}-${name}`;
+    },
+    get checked() {
+      return value().includes(name);
+    },
+    onCheckedChange(nextChecked, event) {
+      batch(() => {
+        const newValue = value().slice();
+        if (nextChecked) {
+          newValue.push(name);
+        } else {
+          newValue.splice(newValue.indexOf(name), 1);
+        }
+        uncontrolledStateRef = newValue;
+        params.onValueChange?.(newValue, event);
+        setStatus('mixed');
+      });
+    }
+  });
+  return {
+    id,
+    indeterminate,
+    getParentProps,
+    getChildProps,
+    disabledStatesRef
+  };
+}

package/esm/collapsible/index.d.ts

@@ -0,0 +1 @@
+export * as Collapsible from "./index.parts.js";

package/esm/collapsible/index.js

@@ -0,0 +1 @@
+export * as Collapsible from "./index.parts.js";

package/esm/collapsible/index.parts.d.ts

@@ -0,0 +1,3 @@
+export { CollapsibleRoot as Root } from "./root/CollapsibleRoot.js";
+export { CollapsibleTrigger as Trigger } from "./trigger/CollapsibleTrigger.js";
+export { CollapsiblePanel as Panel } from "./panel/CollapsiblePanel.js";

package/esm/collapsible/index.parts.js

@@ -0,0 +1,3 @@
+export { CollapsibleRoot as Root } from "./root/CollapsibleRoot.js";
+export { CollapsibleTrigger as Trigger } from "./trigger/CollapsibleTrigger.js";
+export { CollapsiblePanel as Panel } from "./panel/CollapsiblePanel.js";

package/esm/collapsible/panel/CollapsiblePanel.d.ts

@@ -0,0 +1,29 @@
+import { BaseUIComponentProps } from "../../utils/types.js";
+import type { CollapsibleRoot } from "../root/CollapsibleRoot.js";
+/**
+ * A panel with the collapsible contents.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Collapsible](https://base-ui.com/react/components/collapsible)
+ */
+export declare function CollapsiblePanel(componentProps: CollapsiblePanel.Props): import("solid-js").JSX.Element;
+export declare namespace CollapsiblePanel {
+  interface State extends CollapsibleRoot.State {}
+  interface Props extends BaseUIComponentProps<'div', CollapsibleRoot.State> {
+    /**
+     * Allows the browser’s built-in page search to find and expand the panel contents.
+     *
+     * Overrides the `keepMounted` prop and uses `hidden="until-found"`
+     * to hide the element without removing it from the DOM.
+     *
+     * @default false
+     */
+    hiddenUntilFound?: boolean;
+    /**
+     * Whether to keep the element in the DOM while the panel is hidden.
+     * This prop is ignored when `hiddenUntilFound` is used.
+     * @default false
+     */
+    keepMounted?: boolean;
+  }
+}

package/esm/collapsible/panel/CollapsiblePanel.js

@@ -0,0 +1,112 @@
+import { createEffect, createMemo, Show } from 'solid-js';
+import { splitComponentProps } from "../../solid-helpers.js";
+import { useOpenChangeComplete } from "../../utils/useOpenChangeComplete.js";
+import { useRenderElement } from "../../utils/useRenderElement.js";
+import { warn } from "../../utils/warn.js";
+import { useCollapsibleRootContext } from "../root/CollapsibleRootContext.js";
+import { collapsibleStyleHookMapping } from "../root/styleHooks.js";
+import { CollapsiblePanelCssVars } from "./CollapsiblePanelCssVars.js";
+import { useCollapsiblePanel } from "./useCollapsiblePanel.js";
+
+/**
+ * A panel with the collapsible contents.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Collapsible](https://base-ui.com/react/components/collapsible)
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+export function CollapsiblePanel(componentProps) {
+  const [, local, elementProps] = splitComponentProps(componentProps, ['hiddenUntilFound', 'keepMounted', 'id']);
+  const hiddenUntilFound = () => local.hiddenUntilFound ?? false;
+  const keepMounted = () => local.keepMounted ?? false;
+  if (process.env.NODE_ENV !== 'production') {
+    createEffect(() => {
+      if (hiddenUntilFound() && keepMounted() === false) {
+        warn('The `keepMounted={false}` prop on a Collapsible will be ignored when using `hiddenUntilFound` since it requires the Panel to remain mounted even when closed.');
+      }
+    });
+  }
+  const {
+    animationType,
+    setAnimationType,
+    height,
+    setHiddenUntilFound,
+    setKeepMounted,
+    panelId,
+    mounted,
+    onOpenChange,
+    open,
+    refs,
+    runOnceAnimationsFinish,
+    setDimensions,
+    setMounted,
+    setOpen,
+    setVisible,
+    transitionDimension,
+    setTransitionDimension,
+    visible,
+    width,
+    state
+  } = useCollapsibleRootContext();
+  createEffect(() => {
+    setHiddenUntilFound(hiddenUntilFound());
+  });
+  createEffect(() => {
+    setKeepMounted(keepMounted());
+  });
+  const panel = useCollapsiblePanel({
+    animationType,
+    setAnimationType,
+    height,
+    hiddenUntilFound,
+    id: () => local.id ?? panelId(),
+    keepMounted,
+    mounted,
+    onOpenChange,
+    open,
+    refs,
+    runOnceAnimationsFinish,
+    setDimensions,
+    setMounted,
+    setOpen,
+    setVisible,
+    transitionDimension,
+    setTransitionDimension,
+    visible,
+    width
+  });
+  useOpenChangeComplete({
+    open,
+    ref: () => refs.panelRef,
+    onComplete() {
+      if (!open()) {
+        return;
+      }
+      setDimensions({
+        height: undefined,
+        width: undefined
+      });
+    }
+  });
+  const shouldRender = createMemo(() => keepMounted() || hiddenUntilFound() || !keepMounted() && mounted());
+  const element = useRenderElement('div', componentProps, {
+    state,
+    ref: el => {
+      refs.panelRef = el;
+      panel.ref(el);
+    },
+    props: [panel.props, {
+      get style() {
+        return {
+          [CollapsiblePanelCssVars.collapsiblePanelHeight]: height() === undefined ? 'auto' : `${height()}px`,
+          [CollapsiblePanelCssVars.collapsiblePanelWidth]: width() === undefined ? 'auto' : `${width()}px`
+        };
+      }
+    }, elementProps],
+    customStyleHookMapping: collapsibleStyleHookMapping
+  });
+  return /*#__PURE__*/_jsx(Show, {
+    when: shouldRender(),
+    children: element()
+  });
+}

package/esm/collapsible/panel/CollapsiblePanelCssVars.d.ts

@@ -0,0 +1,12 @@
+export declare enum CollapsiblePanelCssVars {
+  /**
+   * The collapsible panel's height.
+   * @type {number}
+   */
+  collapsiblePanelHeight = "--collapsible-panel-height",
+  /**
+   * The collapsible panel's width.
+   * @type {number}
+   */
+  collapsiblePanelWidth = "--collapsible-panel-width",
+}

package/esm/collapsible/panel/CollapsiblePanelCssVars.js

@@ -0,0 +1,13 @@
+export let CollapsiblePanelCssVars = /*#__PURE__*/function (CollapsiblePanelCssVars) {
+  /**
+   * The collapsible panel's height.
+   * @type {number}
+   */
+  CollapsiblePanelCssVars["collapsiblePanelHeight"] = "--collapsible-panel-height";
+  /**
+   * The collapsible panel's width.
+   * @type {number}
+   */
+  CollapsiblePanelCssVars["collapsiblePanelWidth"] = "--collapsible-panel-width";
+  return CollapsiblePanelCssVars;
+}({});

package/esm/collapsible/panel/CollapsiblePanelDataAttributes.d.ts

@@ -0,0 +1,18 @@
+export declare enum CollapsiblePanelDataAttributes {
+  /**
+   * Present when the collapsible panel is open.
+   */
+  open = "data-open",
+  /**
+   * Present when the collapsible panel is closed.
+   */
+  closed = "data-closed",
+  /**
+   * Present when the panel is animating in.
+   */
+  startingStyle = "data-starting-style",
+  /**
+   * Present when the panel is animating out.
+   */
+  endingStyle = "data-ending-style",
+}

package/esm/collapsible/panel/CollapsiblePanelDataAttributes.js

@@ -0,0 +1,20 @@
+import { TransitionStatusDataAttributes } from "../../utils/styleHookMapping.js";
+export let CollapsiblePanelDataAttributes = function (CollapsiblePanelDataAttributes) {
+  /**
+   * Present when the collapsible panel is open.
+   */
+  CollapsiblePanelDataAttributes["open"] = "data-open";
+  /**
+   * Present when the collapsible panel is closed.
+   */
+  CollapsiblePanelDataAttributes["closed"] = "data-closed";
+  /**
+   * Present when the panel is animating in.
+   */
+  CollapsiblePanelDataAttributes[CollapsiblePanelDataAttributes["startingStyle"] = TransitionStatusDataAttributes.startingStyle] = "startingStyle";
+  /**
+   * Present when the panel is animating out.
+   */
+  CollapsiblePanelDataAttributes[CollapsiblePanelDataAttributes["endingStyle"] = TransitionStatusDataAttributes.endingStyle] = "endingStyle";
+  return CollapsiblePanelDataAttributes;
+}({});

package/esm/collapsible/panel/useCollapsiblePanel.d.ts

@@ -0,0 +1,68 @@
+import { Setter, type Accessor, type JSX } from 'solid-js';
+import { type MaybeAccessor } from "../../solid-helpers.js";
+import { HTMLProps } from "../../utils/types.js";
+import type { AnimationType, Dimensions } from "../root/useCollapsibleRoot.js";
+export declare function useCollapsiblePanel<T extends HTMLElement>(parameters: useCollapsiblePanel.Parameters<T>): useCollapsiblePanel.ReturnValue<T>;
+export declare namespace useCollapsiblePanel {
+  interface Parameters<T extends HTMLElement> {
+    animationType: Accessor<AnimationType>;
+    setAnimationType: Setter<AnimationType>;
+    /**
+     * The height of the panel.
+     */
+    height: MaybeAccessor<number | undefined>;
+    /**
+     * Allows the browser’s built-in page search to find and expand the panel contents.
+     *
+     * Overrides the `keepMounted` prop and uses `hidden="until-found"`
+     * to hide the element without removing it from the DOM.
+     */
+    hiddenUntilFound: MaybeAccessor<boolean>;
+    /**
+     * The `id` attribute of the panel.
+     */
+    id: MaybeAccessor<JSX.HTMLAttributes<Element>['id']>;
+    /**
+     * Whether to keep the element in the DOM while the panel is closed.
+     * This prop is ignored when `hiddenUntilFound` is used.
+     */
+    keepMounted: MaybeAccessor<boolean>;
+    /**
+     * Whether the collapsible panel is currently mounted.
+     */
+    mounted: MaybeAccessor<boolean>;
+    onOpenChange: (open: boolean) => void;
+    /**
+     * Whether the collapsible panel is currently open.
+     */
+    open: MaybeAccessor<boolean>;
+    refs: {
+      abortControllerRef: AbortController | null;
+      panelRef: T | null | undefined;
+    };
+    runOnceAnimationsFinish: (fnToExecute: () => void, signal?: AbortSignal | null) => void;
+    setDimensions: (nextDimensions: Dimensions) => void;
+    setMounted: (nextMounted: boolean) => void;
+    setOpen: (nextOpen: boolean) => void;
+    setVisible: (nextVisible: boolean) => void;
+    transitionDimension: Accessor<'height' | 'width' | null>;
+    setTransitionDimension: Setter<'height' | 'width' | null>;
+    /**
+     * The visible state of the panel used to determine the `[hidden]` attribute
+     * only when CSS keyframe animations are used.
+     */
+    visible: MaybeAccessor<boolean>;
+    /**
+     * The width of the panel.
+     */
+    width: MaybeAccessor<number | undefined>;
+  }
+  interface ReturnValue<T extends HTMLElement> {
+    ref: (el: T) => void;
+    /**
+     * TODO: provide better explanation
+     * Ref should be ommited as Solid handles refs differently than React.
+     */
+    props: HTMLProps;
+  }
+}