@tale-ui/react 0.0.3

package/combobox/collection/GroupCollectionContext.js

@@ -0,0 +1,29 @@
+"use strict";
+'use client';
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GroupCollectionProvider = GroupCollectionProvider;
+exports.useGroupCollectionContext = useGroupCollectionContext;
+var React = _interopRequireWildcard(require("react"));
+var _jsxRuntime = require("react/jsx-runtime");
+const GroupCollectionContext = /*#__PURE__*/React.createContext(null);
+if (process.env.NODE_ENV !== "production") GroupCollectionContext.displayName = "GroupCollectionContext";
+function useGroupCollectionContext() {
+  return React.useContext(GroupCollectionContext);
+}
+function GroupCollectionProvider(props) {
+  const {
+    children,
+    items
+  } = props;
+  const contextValue = React.useMemo(() => ({
+    items
+  }), [items]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(GroupCollectionContext.Provider, {
+    value: contextValue,
+    children: children
+  });
+}

package/combobox/empty/ComboboxEmpty.d.ts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { TaleUIComponentProps } from "../../utils/types.js";
+/**
+ * Renders its children only when the list is empty.
+ * Requires the `items` prop on the root component.
+ * Announces changes politely to screen readers.
+ * Renders a `<div>` element.
+ */
+export declare const ComboboxEmpty: React.ForwardRefExoticComponent<Omit<ComboboxEmptyProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export interface ComboboxEmptyState {}
+export interface ComboboxEmptyProps extends TaleUIComponentProps<'div', ComboboxEmpty.State> {}
+export declare namespace ComboboxEmpty {
+  type State = ComboboxEmptyState;
+  type Props = ComboboxEmptyProps;
+}

package/combobox/empty/ComboboxEmpty.js

@@ -0,0 +1,40 @@
+"use strict";
+'use client';
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ComboboxEmpty = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _useRenderElement = require("../../utils/useRenderElement");
+var _ComboboxRootContext = require("../root/ComboboxRootContext");
+/**
+ * Renders its children only when the list is empty.
+ * Requires the `items` prop on the root component.
+ * Announces changes politely to screen readers.
+ * Renders a `<div>` element.
+ */
+const ComboboxEmpty = exports.ComboboxEmpty = /*#__PURE__*/React.forwardRef(function ComboboxEmpty(componentProps, forwardedRef) {
+  const {
+    render,
+    className,
+    children: childrenProp,
+    ...elementProps
+  } = componentProps;
+  const {
+    filteredItems
+  } = (0, _ComboboxRootContext.useComboboxDerivedItemsContext)();
+  const store = (0, _ComboboxRootContext.useComboboxRootContext)();
+  const children = filteredItems.length === 0 ? childrenProp : null;
+  return (0, _useRenderElement.useRenderElement)('div', componentProps, {
+    ref: [forwardedRef, store.state.emptyRef],
+    props: [{
+      children,
+      role: 'status',
+      'aria-live': 'polite',
+      'aria-atomic': true
+    }, elementProps]
+  });
+});
+if (process.env.NODE_ENV !== "production") ComboboxEmpty.displayName = "ComboboxEmpty";

package/combobox/group/ComboboxGroup.d.ts

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { TaleUIComponentProps } from "../../utils/types.js";
+/**
+ * Groups related items with the corresponding label.
+ * Renders a `<div>` element.
+ */
+export declare const ComboboxGroup: React.ForwardRefExoticComponent<Omit<ComboboxGroupProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export interface ComboboxGroupState {}
+export interface ComboboxGroupProps extends TaleUIComponentProps<'div', ComboboxGroup.State> {
+  /**
+   * Items to be rendered within this group.
+   * When provided, child `Collection` components will use these items.
+   */
+  items?: readonly any[] | undefined;
+}
+export declare namespace ComboboxGroup {
+  type State = ComboboxGroupState;
+  type Props = ComboboxGroupProps;
+}

package/combobox/group/ComboboxGroup.js

@@ -0,0 +1,50 @@
+"use strict";
+'use client';
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ComboboxGroup = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _useRenderElement = require("../../utils/useRenderElement");
+var _ComboboxGroupContext = require("./ComboboxGroupContext");
+var _GroupCollectionContext = require("../collection/GroupCollectionContext");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * Groups related items with the corresponding label.
+ * Renders a `<div>` element.
+ */
+const ComboboxGroup = exports.ComboboxGroup = /*#__PURE__*/React.forwardRef(function ComboboxGroup(componentProps, forwardedRef) {
+  const {
+    render,
+    className,
+    items,
+    ...elementProps
+  } = componentProps;
+  const [labelId, setLabelId] = React.useState();
+  const contextValue = React.useMemo(() => ({
+    labelId,
+    setLabelId,
+    items
+  }), [labelId, setLabelId, items]);
+  const element = (0, _useRenderElement.useRenderElement)('div', componentProps, {
+    ref: forwardedRef,
+    props: [{
+      role: 'group',
+      'aria-labelledby': labelId
+    }, elementProps]
+  });
+  const wrappedElement = /*#__PURE__*/(0, _jsxRuntime.jsx)(_ComboboxGroupContext.ComboboxGroupContext.Provider, {
+    value: contextValue,
+    children: element
+  });
+  if (items) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_GroupCollectionContext.GroupCollectionProvider, {
+      items: items,
+      children: wrappedElement
+    });
+  }
+  return wrappedElement;
+});
+if (process.env.NODE_ENV !== "production") ComboboxGroup.displayName = "ComboboxGroup";

package/combobox/group/ComboboxGroupContext.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+export interface ComboboxGroupContext {
+  labelId: string | undefined;
+  setLabelId: React.Dispatch<React.SetStateAction<string | undefined>>;
+  /**
+   * Optional list of items that belong to this group. Used by nested
+   * collections to render group-specific items.
+   */
+  items?: readonly any[] | undefined;
+}
+export declare const ComboboxGroupContext: React.Context<ComboboxGroupContext | undefined>;
+export declare function useComboboxGroupContext(): ComboboxGroupContext;

package/combobox/group/ComboboxGroupContext.js

@@ -0,0 +1,19 @@
+"use strict";
+'use client';
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ComboboxGroupContext = void 0;
+exports.useComboboxGroupContext = useComboboxGroupContext;
+var React = _interopRequireWildcard(require("react"));
+const ComboboxGroupContext = exports.ComboboxGroupContext = /*#__PURE__*/React.createContext(undefined);
+if (process.env.NODE_ENV !== "production") ComboboxGroupContext.displayName = "ComboboxGroupContext";
+function useComboboxGroupContext() {
+  const context = React.useContext(ComboboxGroupContext);
+  if (context === undefined) {
+    throw /* FIXME (minify-errors-in-prod): Unminified error message in production build! */new Error('Tale UI: ComboboxGroupContext is missing. ComboboxGroup parts must be placed within <Combobox.Group>.');
+  }
+  return context;
+}

package/combobox/group-label/ComboboxGroupLabel.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { TaleUIComponentProps } from "../../utils/types.js";
+/**
+ * An accessible label that is automatically associated with its parent group.
+ * Renders a `<div>` element.
+ */
+export declare const ComboboxGroupLabel: React.ForwardRefExoticComponent<Omit<ComboboxGroupLabelProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export interface ComboboxGroupLabelState {}
+export interface ComboboxGroupLabelProps extends TaleUIComponentProps<'div', ComboboxGroupLabel.State> {}
+export declare namespace ComboboxGroupLabel {
+  type State = ComboboxGroupLabelState;
+  type Props = ComboboxGroupLabelProps;
+}

package/combobox/group-label/ComboboxGroupLabel.js

@@ -0,0 +1,43 @@
+"use strict";
+'use client';
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ComboboxGroupLabel = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _useIsoLayoutEffect = require("@tale-ui/utils/useIsoLayoutEffect");
+var _useTaleUiId = require("../../utils/useTaleUiId");
+var _ComboboxGroupContext = require("../group/ComboboxGroupContext");
+var _useRenderElement = require("../../utils/useRenderElement");
+/**
+ * An accessible label that is automatically associated with its parent group.
+ * Renders a `<div>` element.
+ */
+const ComboboxGroupLabel = exports.ComboboxGroupLabel = /*#__PURE__*/React.forwardRef(function ComboboxGroupLabel(componentProps, forwardedRef) {
+  const {
+    render,
+    className,
+    id: idProp,
+    ...elementProps
+  } = componentProps;
+  const {
+    setLabelId
+  } = (0, _ComboboxGroupContext.useComboboxGroupContext)();
+  const id = (0, _useTaleUiId.useTaleUiId)(idProp);
+  (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
+    setLabelId(id);
+    return () => {
+      setLabelId(undefined);
+    };
+  }, [id, setLabelId]);
+  const element = (0, _useRenderElement.useRenderElement)('div', componentProps, {
+    ref: forwardedRef,
+    props: [{
+      id
+    }, elementProps]
+  });
+  return element;
+});
+if (process.env.NODE_ENV !== "production") ComboboxGroupLabel.displayName = "ComboboxGroupLabel";

package/combobox/icon/ComboboxIcon.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import type { TaleUIComponentProps } from "../../utils/types.js";
+/**
+ * An icon that indicates that the trigger button opens the popup.
+ * Renders a `<span>` element.
+ */
+export declare const ComboboxIcon: React.ForwardRefExoticComponent<Omit<ComboboxIconProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+export interface ComboboxIconState {}
+export interface ComboboxIconProps extends TaleUIComponentProps<'span', ComboboxIcon.State> {}
+export declare namespace ComboboxIcon {
+  type State = ComboboxIconState;
+  type Props = ComboboxIconProps;
+}

package/combobox/icon/ComboboxIcon.js

@@ -0,0 +1,30 @@
+"use strict";
+'use client';
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ComboboxIcon = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _useRenderElement = require("../../utils/useRenderElement");
+/**
+ * An icon that indicates that the trigger button opens the popup.
+ * Renders a `<span>` element.
+ */
+const ComboboxIcon = exports.ComboboxIcon = /*#__PURE__*/React.forwardRef(function ComboboxIcon(componentProps, forwardedRef) {
+  const {
+    className,
+    render,
+    ...elementProps
+  } = componentProps;
+  const element = (0, _useRenderElement.useRenderElement)('span', componentProps, {
+    ref: forwardedRef,
+    props: [{
+      'aria-hidden': true,
+      children: '▼'
+    }, elementProps]
+  });
+  return element;
+});
+if (process.env.NODE_ENV !== "production") ComboboxIcon.displayName = "ComboboxIcon";

package/combobox/index.d.ts

@@ -0,0 +1,25 @@
+export * as Combobox from "./index.parts.js";
+export type * from "./root/ComboboxRoot.js";
+export type * from "./trigger/ComboboxTrigger.js";
+export type * from "./input/ComboboxInput.js";
+export type * from "./popup/ComboboxPopup.js";
+export type * from "./positioner/ComboboxPositioner.js";
+export type * from "./list/ComboboxList.js";
+export type * from "./item/ComboboxItem.js";
+export type * from "./item-indicator/ComboboxItemIndicator.js";
+export type * from "./value/ComboboxValue.js";
+export type * from "./icon/ComboboxIcon.js";
+export type * from "./arrow/ComboboxArrow.js";
+export type * from "./backdrop/ComboboxBackdrop.js";
+export type * from "./portal/ComboboxPortal.js";
+export type * from "./empty/ComboboxEmpty.js";
+export type * from "./group/ComboboxGroup.js";
+export type * from "./group-label/ComboboxGroupLabel.js";
+export type * from "./row/ComboboxRow.js";
+export type * from "./chips/ComboboxChips.js";
+export type * from "./chip/ComboboxChip.js";
+export type * from "./chip-remove/ComboboxChipRemove.js";
+export type * from "./clear/ComboboxClear.js";
+export type * from "./status/ComboboxStatus.js";
+export type * from "./collection/ComboboxCollection.js";
+export type { Filter as ComboboxFilter, UseComboboxFilterOptions as ComboboxFilterOptions } from "./root/utils/useFilter.js";

package/combobox/index.js

@@ -0,0 +1,9 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Combobox = void 0;
+var _Combobox = _interopRequireWildcard(require("./index.parts"));
+exports.Combobox = _Combobox;

package/combobox/index.parts.d.ts

@@ -0,0 +1,26 @@
+export { ComboboxRoot as Root } from "./root/ComboboxRoot.js";
+export { ComboboxValue as Value } from "./value/ComboboxValue.js";
+export { ComboboxInput as Input } from "./input/ComboboxInput.js";
+export { ComboboxTrigger as Trigger } from "./trigger/ComboboxTrigger.js";
+export { ComboboxList as List } from "./list/ComboboxList.js";
+export { ComboboxStatus as Status } from "./status/ComboboxStatus.js";
+export { ComboboxPortal as Portal } from "./portal/ComboboxPortal.js";
+export { ComboboxBackdrop as Backdrop } from "./backdrop/ComboboxBackdrop.js";
+export { ComboboxPositioner as Positioner } from "./positioner/ComboboxPositioner.js";
+export { ComboboxPopup as Popup } from "./popup/ComboboxPopup.js";
+export { ComboboxArrow as Arrow } from "./arrow/ComboboxArrow.js";
+export { ComboboxIcon as Icon } from "./icon/ComboboxIcon.js";
+export { ComboboxGroup as Group } from "./group/ComboboxGroup.js";
+export { ComboboxGroupLabel as GroupLabel } from "./group-label/ComboboxGroupLabel.js";
+export { ComboboxItem as Item } from "./item/ComboboxItem.js";
+export { ComboboxItemIndicator as ItemIndicator } from "./item-indicator/ComboboxItemIndicator.js";
+export { ComboboxChips as Chips } from "./chips/ComboboxChips.js";
+export { ComboboxChip as Chip } from "./chip/ComboboxChip.js";
+export { ComboboxChipRemove as ChipRemove } from "./chip-remove/ComboboxChipRemove.js";
+export { ComboboxRow as Row } from "./row/ComboboxRow.js";
+export { ComboboxCollection as Collection } from "./collection/ComboboxCollection.js";
+export { ComboboxEmpty as Empty } from "./empty/ComboboxEmpty.js";
+export { ComboboxClear as Clear } from "./clear/ComboboxClear.js";
+export { Separator } from "../separator/index.js";
+export { useComboboxFilter as useFilter } from "./root/utils/useFilter.js";
+export { useFilteredItems } from "./root/utils/useFilteredItems.js";

package/combobox/index.parts.js

@@ -0,0 +1,187 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Arrow", {
+  enumerable: true,
+  get: function () {
+    return _ComboboxArrow.ComboboxArrow;
+  }
+});
+Object.defineProperty(exports, "Backdrop", {
+  enumerable: true,
+  get: function () {
+    return _ComboboxBackdrop.ComboboxBackdrop;
+  }
+});
+Object.defineProperty(exports, "Chip", {
+  enumerable: true,
+  get: function () {
+    return _ComboboxChip.ComboboxChip;
+  }
+});
+Object.defineProperty(exports, "ChipRemove", {
+  enumerable: true,
+  get: function () {
+    return _ComboboxChipRemove.ComboboxChipRemove;
+  }
+});
+Object.defineProperty(exports, "Chips", {
+  enumerable: true,
+  get: function () {
+    return _ComboboxChips.ComboboxChips;
+  }
+});
+Object.defineProperty(exports, "Clear", {
+  enumerable: true,
+  get: function () {
+    return _ComboboxClear.ComboboxClear;
+  }
+});
+Object.defineProperty(exports, "Collection", {
+  enumerable: true,
+  get: function () {
+    return _ComboboxCollection.ComboboxCollection;
+  }
+});
+Object.defineProperty(exports, "Empty", {
+  enumerable: true,
+  get: function () {
+    return _ComboboxEmpty.ComboboxEmpty;
+  }
+});
+Object.defineProperty(exports, "Group", {
+  enumerable: true,
+  get: function () {
+    return _ComboboxGroup.ComboboxGroup;
+  }
+});
+Object.defineProperty(exports, "GroupLabel", {
+  enumerable: true,
+  get: function () {
+    return _ComboboxGroupLabel.ComboboxGroupLabel;
+  }
+});
+Object.defineProperty(exports, "Icon", {
+  enumerable: true,
+  get: function () {
+    return _ComboboxIcon.ComboboxIcon;
+  }
+});
+Object.defineProperty(exports, "Input", {
+  enumerable: true,
+  get: function () {
+    return _ComboboxInput.ComboboxInput;
+  }
+});
+Object.defineProperty(exports, "Item", {
+  enumerable: true,
+  get: function () {
+    return _ComboboxItem.ComboboxItem;
+  }
+});
+Object.defineProperty(exports, "ItemIndicator", {
+  enumerable: true,
+  get: function () {
+    return _ComboboxItemIndicator.ComboboxItemIndicator;
+  }
+});
+Object.defineProperty(exports, "List", {
+  enumerable: true,
+  get: function () {
+    return _ComboboxList.ComboboxList;
+  }
+});
+Object.defineProperty(exports, "Popup", {
+  enumerable: true,
+  get: function () {
+    return _ComboboxPopup.ComboboxPopup;
+  }
+});
+Object.defineProperty(exports, "Portal", {
+  enumerable: true,
+  get: function () {
+    return _ComboboxPortal.ComboboxPortal;
+  }
+});
+Object.defineProperty(exports, "Positioner", {
+  enumerable: true,
+  get: function () {
+    return _ComboboxPositioner.ComboboxPositioner;
+  }
+});
+Object.defineProperty(exports, "Root", {
+  enumerable: true,
+  get: function () {
+    return _ComboboxRoot.ComboboxRoot;
+  }
+});
+Object.defineProperty(exports, "Row", {
+  enumerable: true,
+  get: function () {
+    return _ComboboxRow.ComboboxRow;
+  }
+});
+Object.defineProperty(exports, "Separator", {
+  enumerable: true,
+  get: function () {
+    return _separator.Separator;
+  }
+});
+Object.defineProperty(exports, "Status", {
+  enumerable: true,
+  get: function () {
+    return _ComboboxStatus.ComboboxStatus;
+  }
+});
+Object.defineProperty(exports, "Trigger", {
+  enumerable: true,
+  get: function () {
+    return _ComboboxTrigger.ComboboxTrigger;
+  }
+});
+Object.defineProperty(exports, "Value", {
+  enumerable: true,
+  get: function () {
+    return _ComboboxValue.ComboboxValue;
+  }
+});
+Object.defineProperty(exports, "useFilter", {
+  enumerable: true,
+  get: function () {
+    return _useFilter.useComboboxFilter;
+  }
+});
+Object.defineProperty(exports, "useFilteredItems", {
+  enumerable: true,
+  get: function () {
+    return _useFilteredItems.useFilteredItems;
+  }
+});
+var _ComboboxRoot = require("./root/ComboboxRoot");
+var _ComboboxValue = require("./value/ComboboxValue");
+var _ComboboxInput = require("./input/ComboboxInput");
+var _ComboboxTrigger = require("./trigger/ComboboxTrigger");
+var _ComboboxList = require("./list/ComboboxList");
+var _ComboboxStatus = require("./status/ComboboxStatus");
+var _ComboboxPortal = require("./portal/ComboboxPortal");
+var _ComboboxBackdrop = require("./backdrop/ComboboxBackdrop");
+var _ComboboxPositioner = require("./positioner/ComboboxPositioner");
+var _ComboboxPopup = require("./popup/ComboboxPopup");
+var _ComboboxArrow = require("./arrow/ComboboxArrow");
+var _ComboboxIcon = require("./icon/ComboboxIcon");
+var _ComboboxGroup = require("./group/ComboboxGroup");
+var _ComboboxGroupLabel = require("./group-label/ComboboxGroupLabel");
+var _ComboboxItem = require("./item/ComboboxItem");
+var _ComboboxItemIndicator = require("./item-indicator/ComboboxItemIndicator");
+var _ComboboxChips = require("./chips/ComboboxChips");
+var _ComboboxChip = require("./chip/ComboboxChip");
+var _ComboboxChipRemove = require("./chip-remove/ComboboxChipRemove");
+var _ComboboxRow = require("./row/ComboboxRow");
+var _ComboboxCollection = require("./collection/ComboboxCollection");
+var _ComboboxEmpty = require("./empty/ComboboxEmpty");
+var _ComboboxClear = require("./clear/ComboboxClear");
+var _separator = require("../separator");
+var _useFilter = require("./root/utils/useFilter");
+var _useFilteredItems = require("./root/utils/useFilteredItems");

package/combobox/input/ComboboxInput.d.ts

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import { TaleUIComponentProps } from "../../utils/types.js";
+import type { FieldRoot } from "../../field/root/FieldRoot.js";
+import type { Side } from "../../utils/useAnchorPositioning.js";
+/**
+ * A text input to search for items in the list.
+ * Renders an `<input>` element.
+ */
+export declare const ComboboxInput: React.ForwardRefExoticComponent<Omit<ComboboxInputProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+export interface ComboboxInputState extends FieldRoot.State {
+  /**
+   * Whether the corresponding popup is open.
+   */
+  open: boolean;
+  /**
+   * Indicates which side the corresponding popup is positioned relative to its anchor.
+   */
+  popupSide: Side | null;
+  /**
+   * Present when the corresponding items list is empty.
+   */
+  listEmpty: boolean;
+  /**
+   * Whether the component should ignore user edits.
+   */
+  readOnly: boolean;
+}
+export interface ComboboxInputProps extends TaleUIComponentProps<'input', ComboboxInput.State> {
+  /**
+   * Whether the component should ignore user interaction.
+   * @default false
+   */
+  disabled?: boolean | undefined;
+}
+export declare namespace ComboboxInput {
+  type State = ComboboxInputState;
+  type Props = ComboboxInputProps;
+}