@cube-dev/ui-kit 0.190.5 → 0.190.6

package/dist/utils/react/forwardRefWithGenerics.js.map

@@ -1 +1 @@
-{"version":3,"file":"forwardRefWithGenerics.js","names":["DOMRef","ReactElement","forwardRefWithGenerics","Record","HTMLElement","component","props","TProps","ref","TElement","ComponentWithRef","otherProps"],"sources":["../../../src/utils/react/forwardRefWithGenerics.tsx"],"sourcesContent":["import { DOMRef } from '@react-types/shared';\nimport { ReactElement } from 'react';\n\n/**\n * A helper for creating forwardRef components with generic types.\n * This solves the issue where React's forwardRef doesn't work well with generic components,\n * especially when props include required children from CollectionBase<T> or similar types.\n *\n * @example\n * ```tsx\n * function MySelect<T extends object>(\n *   props: MySelectProps<T>,\n *   ref: DOMRef<HTMLDivElement>\n * ) {\n *   // component implementation\n *   return <div ref={ref}>...</div>;\n * }\n *\n * const MySelectWithRef = forwardRefWithGenerics(MySelect);\n *\n * // Usage:\n * <MySelectWithRef<ItemType> items={items} ref={myRef} />\n * ```\n */\nexport function forwardRefWithGenerics<\n  TProps extends Record<string, any>,\n  TElement extends HTMLElement = HTMLElement,\n>(\n  component: <T extends object>(\n    props: TProps,\n    ref: DOMRef<TElement>,\n  ) => ReactElement,\n) {\n  return function ComponentWithRef<T extends object>(\n    props: TProps & { ref?: DOMRef<TElement> },\n  ) {\n    const { ref = null, ...otherProps } = props;\n    return component(otherProps as TProps, ref);\n  };\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAwBA,SAAgBE,uBAIdG,WAIA;AACA,QAAO,SAASK,iBACdJ,OACA;EACA,MAAM,EAAEE,MAAM,MAAM,GAAGG,eAAeL;AACtC,SAAOD,UAAUM,YAAsBH,IAAI"}
+{"version":3,"file":"forwardRefWithGenerics.js","names":["DOMRef","ReactElement","forwardRefWithGenerics","Record","HTMLElement","component","props","TProps","ref","TElement","ComponentWithRef","otherProps"],"sources":["../../../src/utils/react/forwardRefWithGenerics.tsx"],"sourcesContent":["import { DOMRef } from '@react-types/shared';\nimport { ReactElement } from 'react';\n\n/**\n * @deprecated Use `forwardRef` with a cast that restores the generic, as\n * `Select`, `ComboBox` and `Picker` do. This helper returns a plain function\n * component that reads `ref` from its props, and React 18 never passes `ref`\n * to one, so the ref is dropped there. Its returned `<T>` is unused too, so\n * the component's props lose their item generic.\n */\nexport function forwardRefWithGenerics<\n  TProps extends Record<string, any>,\n  TElement extends HTMLElement = HTMLElement,\n>(\n  component: <T extends object>(\n    props: TProps,\n    ref: DOMRef<TElement>,\n  ) => ReactElement,\n) {\n  return function ComponentWithRef<T extends object>(\n    props: TProps & { ref?: DOMRef<TElement> },\n  ) {\n    const { ref = null, ...otherProps } = props;\n    return component(otherProps as TProps, ref);\n  };\n}\n"],"mappings":";;;;;;;;;AAUA,SAAgBE,uBAIdG,WAIA;AACA,QAAO,SAASK,iBACdJ,OACA;EACA,MAAM,EAAEE,MAAM,MAAM,GAAGG,eAAeL;AACtC,SAAOD,UAAUM,YAAsBH,IAAI"}

package/dist/utils/react/index.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.190.5 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.190.6 | Cube Dev Team */
 import { chain } from "./chain.js";
 import { getDisabledElementProps, omitActivationEventProps } from "./disabledProps.js";
 import { forwardRefWithGenerics } from "./forwardRefWithGenerics.js";

package/dist/utils/react/interactions.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.190.5 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.190.6 | Cube Dev Team */
 import { useLayoutEffect as useLayoutEffect$1 } from "./useLayoutEffect.js";
 import { c } from "react-compiler-runtime";
 import { useRef, useState } from "react";

package/dist/utils/react/isTextOnly.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.190.5 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.190.6 | Cube Dev Team */
 import { Children, isValidElement } from "react";
 
 //#region src/utils/react/isTextOnly.ts

package/dist/utils/react/mapProps.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.190.5 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.190.6 | Cube Dev Team */
 //#region src/utils/react/mapProps.ts
 /** Converts AriaButtonProps to CubeButtonProps */
 function ariaToCubeButtonProps(props) {

package/dist/utils/react/mergeProps.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.190.5 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.190.6 | Cube Dev Team */
 import { chain } from "./chain.js";
 import { mergeIds } from "./useId.js";
 import { mergeStyles } from "@tenphi/tasty";

package/dist/utils/react/nullableValue.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.190.5 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.190.6 | Cube Dev Team */
 //#region src/utils/react/nullableValue.ts
 function castNullableStringValue(props) {
 	return castNullableField(props, ["value", "defaultValue"], "string", (v) => String(v));

package/dist/utils/react/programmaticFocus.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.190.5 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.190.6 | Cube Dev Team */
 //#region src/utils/react/programmaticFocus.ts
 /**
 * Telling focus the user moved from focus a component moved for them.

package/dist/utils/react/resolveIcon.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.190.5 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.190.6 | Cube Dev Team */
 //#region src/utils/react/resolveIcon.ts
 /**
 * Resolves a dynamic icon prop to its content and slot state.

package/dist/utils/react/sharedStore.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.190.5 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.190.6 | Cube Dev Team */
 import { useEvent } from "../../_internal/hooks/use-event.js";
 import { isDevEnv } from "../is-dev-env.js";
 import { c } from "react-compiler-runtime";

package/dist/utils/react/useBufferedValue.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.190.5 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.190.6 | Cube Dev Team */
 import { useLayoutEffect as useLayoutEffect$1 } from "./useLayoutEffect.js";
 import { useCallback, useRef, useState } from "react";
 

package/dist/utils/react/useCombinedRefs.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.190.5 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.190.6 | Cube Dev Team */
 import { c } from "react-compiler-runtime";
 import { useEffect, useRef } from "react";
 

package/dist/utils/react/useControlledFocusVisible.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.190.5 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.190.6 | Cube Dev Team */
 import { createSharedStore } from "./sharedStore.js";
 import { c } from "react-compiler-runtime";
 import { useEffect } from "react";

package/dist/utils/react/useEventBus.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.190.5 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.190.6 | Cube Dev Team */
 import { c } from "react-compiler-runtime";
 import React, { createContext, useCallback, useContext, useEffect, useMemo, useRef } from "react";
 

package/dist/utils/react/useId.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.190.5 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.190.6 | Cube Dev Team */
 import { useLayoutEffect as useLayoutEffect$1 } from "./useLayoutEffect.js";
 import { c } from "react-compiler-runtime";
 import { useEffect, useRef, useState } from "react";

package/dist/utils/react/useIsDarwin.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.190.5 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.190.6 | Cube Dev Team */
 import { c } from "react-compiler-runtime";
 import { useEffect, useState } from "react";
 

package/dist/utils/react/useKeySymbols.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.190.5 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.190.6 | Cube Dev Team */
 import { useIsDarwin } from "./useIsDarwin.js";
 import { c } from "react-compiler-runtime";
 

package/dist/utils/react/useLayoutEffect.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.190.5 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.190.6 | Cube Dev Team */
 import * as React$1 from "react";
 
 //#region src/utils/react/useLayoutEffect.tsx

package/dist/utils/react/useLocalStorage.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.190.5 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.190.6 | Cube Dev Team */
 import { useEvent } from "../../_internal/hooks/use-event.js";
 import { c } from "react-compiler-runtime";
 import { useSyncExternalStore } from "react";

package/dist/utils/react/useMergeStyles.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.190.5 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.190.6 | Cube Dev Team */
 import { mergeStyles } from "@tenphi/tasty";
 import { useMemo } from "react";
 

package/dist/utils/react/useOverlayEscapeGuard.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.190.5 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.190.6 | Cube Dev Team */
 import { useEvent } from "../../_internal/hooks/use-event.js";
 import { c } from "react-compiler-runtime";
 

package/dist/utils/react/usePopoverSync.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.190.5 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.190.6 | Cube Dev Team */
 import { EventBusContext, useEventBus } from "./useEventBus.js";
 import { c } from "react-compiler-runtime";
 import { useContext, useEffect, useRef } from "react";

package/dist/utils/react/useQaProps.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.190.5 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.190.6 | Cube Dev Team */
 //#region src/utils/react/useQaProps.ts
 /**
 * Processes QA props.

package/dist/utils/react/useScheme.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.190.5 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.190.6 | Cube Dev Team */
 import { useSyncExternalStore } from "react";
 
 //#region src/utils/react/useScheme.ts

package/dist/utils/react/useViewportSize.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.190.5 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.190.6 | Cube Dev Team */
 import { c } from "react-compiler-runtime";
 import { useEffect, useState } from "react";
 

package/dist/utils/react/wrapNodeIfPlain.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.190.5 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.190.6 | Cube Dev Team */
 import { Fragment, isValidElement } from "react";
 
 //#region src/utils/react/wrapNodeIfPlain.ts

package/dist/utils/selection.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.190.5 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.190.6 | Cube Dev Team */
 //#region src/utils/selection.ts
 /**
 * Deduplicate/toggle keys in a selection: if a key appears twice it is

package/dist/utils/styles.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.190.5 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.190.6 | Cube Dev Team */
 import { isSelector, mergeStyles } from "@tenphi/tasty";
 
 //#region src/utils/styles.ts

package/dist/utils/tree.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.190.5 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.190.6 | Cube Dev Team */
 //#region src/utils/tree.ts
 function toFlatTree(tree, includingFolders) {
 	return tree.reduce((result, node) => {

package/dist/utils/warnings.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.190.5 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.190.6 | Cube Dev Team */
 import { isDevEnvOrTest } from "./is-dev-env.js";
 
 //#region src/utils/warnings.ts

package/dist/version.js

@@ -1,6 +1,6 @@
-/** @license MIT | @cube-dev/ui-kit v0.190.5 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.190.6 | Cube Dev Team */
 //#region src/version.ts
-const VERSION = "0.190.5";
+const VERSION = "0.190.6";
 const TASTY_VERSION = "3.9.9";
 if (typeof window !== "undefined") {
 	const version = VERSION;

package/docs/FieldProperties.md

@@ -58,7 +58,7 @@ For modern forms, follow the [use-case guide](./components/form/ModernForm.md).
 
 ## State
 
-- **`isDisabled`** `boolean` (default: `false`) — Whether the field is disabled and non-interactive.
+- **`isDisabled`** `boolean` (default: `false`) — Whether the field is disabled and non-interactive. A field also takes it from an enclosing `<Provider isDisabled>` or `<Form isDisabled>`. Buttons don't, apart from `Form.Submit` and `Form.Reset`: see [Button](./components/actions/Button.md).
 - **`isReadOnly`** `boolean` (default: `false`) — Whether the field can be focused but not changed.
 - **`isLoading`** `boolean` (default: `false`) — Whether to show a loading spinner and disable interactions.
 - **`isHidden`** `boolean` (default: `false`) — Whether the field is hidden.

package/docs/components/actions/Button.md

@@ -24,6 +24,7 @@ A versatile action component that triggers commands and navigates users.
 - **`label`** `string` — **Deprecated.** Use `children` for visible text and `aria-label` for the accessible name of an icon-only button
 - **`tooltip`** `string | boolean | object` — Tooltip content. Use a string for simple text, `true` for auto tooltip on overflow, or an object with `{ title, auto, placement, ...tooltipProps }`
 - **`defaultTooltipPlacement`** `Placement` (default: `top`) — Default placement for the button's tooltip
+- **`isDisabled`** `boolean` (default: `false`) — Disables the button. Unlike fields, a button doesn't inherit this from `<Provider isDisabled>` or `<Form isDisabled>`, so actions such as Cancel stay live in a disabled form; pass it to each button you want disabled. Of the buttons, only `Form.Submit` and `Form.Reset` inherit it. `ItemButton` behaves like `Button`, and `ItemAction` inherits only its parent item's disabled state
 - **`isLoading`** `boolean` (default: `false`) — Show loading spinner and disable interactions
 - **`isSelected`** `boolean` (default: `false`) — Marks the button as pressed / selected (toggle)
 - **`to`** `string` — Destination URL or route; prefix with `!` to open in new tab, `@` to bypass router

package/docs/components/content/Disclosure.md

@@ -21,12 +21,19 @@ An accessible collapsible container that reveals or hides additional content. Bu
 - **`onExpandedChange`** `(isExpanded: boolean) => void` — Callback fired when expanded state changes
 - **`isDisabled`** `boolean` (default: `false`) — Disables trigger interactions and force-closes the content
 - **`shape`** `'default' | 'card' | 'sharp'` (default: `default`) — Visual shape variant: default (no styling), card (border/radius), sharp (radius 0)
-- **`transitionDuration`** `number` — Duration for DisplayTransition animation in milliseconds. When undefined, uses default CSS transition timing
+- **`transitionDuration`** `number` — Duration for DisplayTransition animation in milliseconds. When undefined, uses default CSS transition timing. It sets the `$disclosure-transition` token, which wins over the same key in `tokens`
 - **`children`** `ReactNode | ((state: DisclosureStateContext) => ReactNode)` — Disclosure.Trigger and Disclosure.Content components
 
 ### Base Properties
 
-Supports [Base properties](../../BaseProperties.md)
+Supports [Base properties](../../BaseProperties.md). `Disclosure`, `Disclosure.Group` and `Disclosure.Item` forward DOM attributes (`id`, `className`, `style`, `aria-*`, `data-*`), `theme`, `tokens` and event handlers to their root. The exception is `id` on `Disclosure.Item`, which is the item's group key, not its DOM `id` (see Disclosure.Item below). Hover props from `useHover` can go straight on the disclosure:
+
+```jsx
+<Disclosure {...hoverProps}>
+  <Disclosure.Trigger>Query</Disclosure.Trigger>
+  <Disclosure.Content>…</Disclosure.Content>
+</Disclosure>
+```
 
 ## Compound Components
 
@@ -44,7 +51,7 @@ Container for multiple disclosure items that coordinates their expanded states.
 
 ### Disclosure.Item
 
-Individual disclosure within a group. Must have a unique `id` prop when used inside `Disclosure.Group`.
+Individual disclosure within a group. Must have a unique `id` prop when used inside `Disclosure.Group`. That `id` is the item's key in the group's `expandedKeys`, so it isn't rendered as the DOM `id`.
 
 ## Styling
 

package/docs/components/content/Placeholder.md

@@ -46,3 +46,17 @@ These properties allow direct style application without using the `styles` prop:
 
 <Placeholder isStatic width="100%" />
 ```
+
+## Detecting Loading Placeholders
+
+Every Placeholder, including the ones inside `Skeleton`, renders a `data-loading-placeholder` attribute. Use it to find content that is still loading, for example in a performance observer or an end-to-end test:
+
+```js
+document.querySelectorAll('[data-loading-placeholder]');
+```
+
+The attribute doesn't depend on the locale, and a `qa` or `aria-label` prop doesn't replace it. Don't match the `aria-label`: it is translated, so an English selector misses every other locale. `[data-placeholder]` doesn't work either: pickers and table rows use it for their own empty state.
+
+## Accessibility
+
+Placeholder renders a `region` landmark labelled with the localized "Content is loading" text, so screen-reader users can find content that is still loading. The region has no content, so don't rely on it to announce the loading state: add a status message where one is needed.

package/docs/components/content/Skeleton.md

@@ -2,6 +2,8 @@
 
 A skeleton loading indicator with preset layouts. Composes `Placeholder` components to mimic content structure.
 
+Each of those placeholders carries `data-loading-placeholder`, the locale-independent way to detect loading content (see [Placeholder](./Placeholder.md#detecting-loading-placeholders)).
+
 ## When to Use
 
 - Loading states for complex layouts

package/docs/components/form/Form.md

@@ -60,6 +60,7 @@ These properties are inherited by all input components within the form:
 - **`labelStyles`** `Styles` — Styles applied to field labels
 - **`requiredMark`** `boolean` (default: `true`) — Whether to show required field indicators
 - **`necessityIndicator`** `'icon' | 'label' | null` (default: `icon`) — Type of necessity indicator. `null` suppresses it
+- **`isDisabled`** `boolean` — Disables every field in the form, plus `Form.Submit` and `Form.Reset`. Other buttons don't inherit it: see [Button](../actions/Button.md)
 - **`isReadOnly`** `boolean` (default: `false`) — Whether fields are read-only by default
 - **`isInvalid`** `boolean` — Invalid state for all fields
 - **`isValid`** `boolean` — Valid state for all fields

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cube-dev/ui-kit",
-  "version": "0.190.5",
+  "version": "0.190.6",
   "type": "module",
   "description": "UIKit for Cube Projects",
   "repository": {