@cube-dev/ui-kit 0.0.0-canary-34ce1a4 → 0.0.0-canary-7dc6906

package/dist/utils/react/RenderCache.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-34ce1a4 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-7dc6906 | Cube Dev Team */
 import { useRef } from "react";
 import { Fragment as Fragment$1, jsx } from "react/jsx-runtime";
 

package/dist/utils/react/Slots.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-34ce1a4 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-7dc6906 | Cube Dev Team */
 import { mergeProps } from "./mergeProps.js";
 import { Children, cloneElement, createContext, useContext, useMemo } from "react";
 import { jsx } from "react/jsx-runtime";

package/dist/utils/react/chain.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-34ce1a4 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-7dc6906 | Cube Dev Team */
 //#region src/utils/react/chain.ts
 /**
 * Calls all functions in the order they were chained with the same arguments.

package/dist/utils/react/disabledProps.d.ts

@@ -0,0 +1,49 @@
+
+import { Props } from "../../props.js";
+
+//#region src/utils/react/disabledProps.d.ts
+interface DisabledElementOptions {
+  /** Whether the component is disabled. */
+  isDisabled?: boolean;
+  /**
+   * Whether the element has to keep receiving pointer and focus events while
+   * disabled. Set it when the element hosts a tooltip: the tooltip is there to
+   * explain why the element is unavailable, so hover has to reach it.
+   */
+  keepEvents?: boolean;
+  /** The tag the component renders. */
+  as?: string;
+}
+interface DisabledElementProps {
+  /** Whether the element has to carry the native `disabled` attribute. */
+  isNativelyDisabled: boolean;
+  /**
+   * Whether the element is disabled through `aria-disabled` only and therefore
+   * has to be kept inert by hand.
+   */
+  isInert: boolean;
+  /** Props that mark the element disabled and inert. Spread them last. */
+  inertProps: Props;
+}
+/**
+ * Decides how the disabled state reaches the DOM.
+ *
+ * The native `disabled` attribute is the strongest option, but it also makes
+ * the browser swallow the events the element needs to open a tooltip. When
+ * such an element has to stay hoverable, it is marked `aria-disabled` instead
+ * and kept inert by blocking activation — the outcome a user sees is the same,
+ * except the tooltip now opens and screen readers still announce the state.
+ */
+declare function getDisabledElementProps({
+  isDisabled,
+  keepEvents,
+  as
+}: DisabledElementOptions): DisabledElementProps;
+/**
+ * Removes the handlers that would activate an element which is disabled
+ * without the native attribute.
+ */
+declare function omitActivationEventProps<T extends Props>(props: T): T;
+//#endregion
+export { DisabledElementOptions, DisabledElementProps, getDisabledElementProps, omitActivationEventProps };
+//# sourceMappingURL=disabledProps.d.ts.map

package/dist/utils/react/disabledProps.js

@@ -0,0 +1,82 @@
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-7dc6906 | Cube Dev Team */
+//#region src/utils/react/disabledProps.ts
+/**
+* Tags where `disabled` is a real HTML attribute. Browsers refuse to dispatch
+* mouse events on those elements while the attribute is set, so nothing that
+* listens for hover — a tooltip trigger above all — ever hears from them.
+* On every other tag the attribute is invalid markup that does nothing.
+*/
+const FORM_CONTROL_TAGS = new Set([
+	"button",
+	"input",
+	"select",
+	"textarea",
+	"fieldset",
+	"option",
+	"optgroup"
+]);
+/**
+* Handlers that can activate an element. They are dropped while the element is
+* disabled through `aria-disabled` alone, so it stays as inert as a natively
+* disabled one.
+*/
+const ACTIVATION_EVENT_PROPS = [
+	"onClick",
+	"onDoubleClick",
+	"onMouseDown",
+	"onMouseUp",
+	"onPointerDown",
+	"onPointerUp",
+	"onTouchStart",
+	"onTouchEnd",
+	"onKeyDown",
+	"onKeyUp",
+	"onKeyPress"
+];
+function preventActivation(event) {
+	event.preventDefault();
+}
+const INERT_PROPS = {
+	"aria-disabled": true,
+	onClick: preventActivation
+};
+const EMPTY_PROPS = {};
+/**
+* Decides how the disabled state reaches the DOM.
+*
+* The native `disabled` attribute is the strongest option, but it also makes
+* the browser swallow the events the element needs to open a tooltip. When
+* such an element has to stay hoverable, it is marked `aria-disabled` instead
+* and kept inert by blocking activation — the outcome a user sees is the same,
+* except the tooltip now opens and screen readers still announce the state.
+*/
+function getDisabledElementProps({ isDisabled, keepEvents, as = "div" }) {
+	if (!isDisabled) return {
+		isNativelyDisabled: false,
+		isInert: false,
+		inertProps: EMPTY_PROPS
+	};
+	if (FORM_CONTROL_TAGS.has(as) && !keepEvents) return {
+		isNativelyDisabled: true,
+		isInert: false,
+		inertProps: EMPTY_PROPS
+	};
+	return {
+		isNativelyDisabled: false,
+		isInert: true,
+		inertProps: INERT_PROPS
+	};
+}
+/**
+* Removes the handlers that would activate an element which is disabled
+* without the native attribute.
+*/
+function omitActivationEventProps(props) {
+	const result = { ...props };
+	for (const prop of ACTIVATION_EVENT_PROPS) delete result[prop];
+	return result;
+}
+
+//#endregion
+export { getDisabledElementProps, omitActivationEventProps };
+//# sourceMappingURL=disabledProps.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"disabledProps.js","names":[],"sources":["../../../src/utils/react/disabledProps.ts"],"sourcesContent":["import type { SyntheticEvent } from 'react';\nimport type { Props } from '../../props';\n\n/**\n * Tags where `disabled` is a real HTML attribute. Browsers refuse to dispatch\n * mouse events on those elements while the attribute is set, so nothing that\n * listens for hover — a tooltip trigger above all — ever hears from them.\n * On every other tag the attribute is invalid markup that does nothing.\n */\nconst FORM_CONTROL_TAGS = new Set([\n  'button',\n  'input',\n  'select',\n  'textarea',\n  'fieldset',\n  'option',\n  'optgroup',\n]);\n\n/**\n * Handlers that can activate an element. They are dropped while the element is\n * disabled through `aria-disabled` alone, so it stays as inert as a natively\n * disabled one.\n */\nconst ACTIVATION_EVENT_PROPS = [\n  'onClick',\n  'onDoubleClick',\n  'onMouseDown',\n  'onMouseUp',\n  'onPointerDown',\n  'onPointerUp',\n  'onTouchStart',\n  'onTouchEnd',\n  'onKeyDown',\n  'onKeyUp',\n  'onKeyPress',\n] as const;\n\nfunction preventActivation(event: SyntheticEvent) {\n  // Without the native attribute a click (or Enter/Space, which the browser\n  // turns into a click) still runs the default action and would submit the\n  // surrounding form.\n  event.preventDefault();\n}\n\nconst INERT_PROPS: Props = {\n  'aria-disabled': true,\n  onClick: preventActivation,\n};\n\nconst EMPTY_PROPS: Props = {};\n\nexport interface DisabledElementOptions {\n  /** Whether the component is disabled. */\n  isDisabled?: boolean;\n  /**\n   * Whether the element has to keep receiving pointer and focus events while\n   * disabled. Set it when the element hosts a tooltip: the tooltip is there to\n   * explain why the element is unavailable, so hover has to reach it.\n   */\n  keepEvents?: boolean;\n  /** The tag the component renders. */\n  as?: string;\n}\n\nexport interface DisabledElementProps {\n  /** Whether the element has to carry the native `disabled` attribute. */\n  isNativelyDisabled: boolean;\n  /**\n   * Whether the element is disabled through `aria-disabled` only and therefore\n   * has to be kept inert by hand.\n   */\n  isInert: boolean;\n  /** Props that mark the element disabled and inert. Spread them last. */\n  inertProps: Props;\n}\n\n/**\n * Decides how the disabled state reaches the DOM.\n *\n * The native `disabled` attribute is the strongest option, but it also makes\n * the browser swallow the events the element needs to open a tooltip. When\n * such an element has to stay hoverable, it is marked `aria-disabled` instead\n * and kept inert by blocking activation — the outcome a user sees is the same,\n * except the tooltip now opens and screen readers still announce the state.\n */\nexport function getDisabledElementProps({\n  isDisabled,\n  keepEvents,\n  as = 'div',\n}: DisabledElementOptions): DisabledElementProps {\n  if (!isDisabled) {\n    return {\n      isNativelyDisabled: false,\n      isInert: false,\n      inertProps: EMPTY_PROPS,\n    };\n  }\n\n  // The attribute only means something on form controls, and there it can be\n  // kept whenever nothing depends on the element's events.\n  if (FORM_CONTROL_TAGS.has(as) && !keepEvents) {\n    return {\n      isNativelyDisabled: true,\n      isInert: false,\n      inertProps: EMPTY_PROPS,\n    };\n  }\n\n  return { isNativelyDisabled: false, isInert: true, inertProps: INERT_PROPS };\n}\n\n/**\n * Removes the handlers that would activate an element which is disabled\n * without the native attribute.\n */\nexport function omitActivationEventProps<T extends Props>(props: T): T {\n  const result = { ...props };\n\n  for (const prop of ACTIVATION_EVENT_PROPS) {\n    delete result[prop];\n  }\n\n  return result;\n}\n"],"mappings":";;;;;;;;AASA,MAAM,oBAAoB,IAAI,IAAI;CAChC;CACA;CACA;CACA;CACA;CACA;CACA;CACD,CAAC;;;;;;AAOF,MAAM,yBAAyB;CAC7B;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD;AAED,SAAS,kBAAkB,OAAuB;AAIhD,OAAM,gBAAgB;;AAGxB,MAAM,cAAqB;CACzB,iBAAiB;CACjB,SAAS;CACV;AAED,MAAM,cAAqB,EAAE;;;;;;;;;;AAoC7B,SAAgB,wBAAwB,EACtC,YACA,YACA,KAAK,SAC0C;AAC/C,KAAI,CAAC,WACH,QAAO;EACL,oBAAoB;EACpB,SAAS;EACT,YAAY;EACb;AAKH,KAAI,kBAAkB,IAAI,GAAG,IAAI,CAAC,WAChC,QAAO;EACL,oBAAoB;EACpB,SAAS;EACT,YAAY;EACb;AAGH,QAAO;EAAE,oBAAoB;EAAO,SAAS;EAAM,YAAY;EAAa;;;;;;AAO9E,SAAgB,yBAA0C,OAAa;CACrE,MAAM,SAAS,EAAE,GAAG,OAAO;AAE3B,MAAK,MAAM,QAAQ,uBACjB,QAAO,OAAO;AAGhB,QAAO"}

package/dist/utils/react/forwardRefWithGenerics.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-34ce1a4 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-7dc6906 | Cube Dev Team */
 //#region src/utils/react/forwardRefWithGenerics.tsx
 /**
 * A helper for creating forwardRef components with generic types.

package/dist/utils/react/index.d.ts

@@ -1,5 +1,6 @@
 
 import { chain } from "./chain.js";
+import { DisabledElementOptions, DisabledElementProps, getDisabledElementProps, omitActivationEventProps } from "./disabledProps.js";
 import { forwardRefWithGenerics } from "./forwardRefWithGenerics.js";
 import { isTextOnly } from "./isTextOnly.js";
 import { mergeProps } from "./mergeProps.js";

package/dist/utils/react/index.js

@@ -1,5 +1,6 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-34ce1a4 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-7dc6906 | Cube Dev Team */
 import { chain } from "./chain.js";
+import { getDisabledElementProps, omitActivationEventProps } from "./disabledProps.js";
 import { forwardRefWithGenerics } from "./forwardRefWithGenerics.js";
 import { isTextOnly } from "./isTextOnly.js";
 import { useLayoutEffect } from "./useLayoutEffect.js";

package/dist/utils/react/interactions.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-34ce1a4 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-7dc6906 | Cube Dev Team */
 import { useState } from "react";
 import { useFocus, useFocusVisible } from "react-aria";
 

package/dist/utils/react/isTextOnly.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-34ce1a4 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-7dc6906 | 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.0.0-canary-34ce1a4 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-7dc6906 | 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.0.0-canary-34ce1a4 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-7dc6906 | 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.0.0-canary-34ce1a4 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-7dc6906 | 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/resolveIcon.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-34ce1a4 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-7dc6906 | 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.0.0-canary-34ce1a4 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-7dc6906 | Cube Dev Team */
 import { useEvent } from "../../_internal/hooks/use-event.js";
 import { useSyncExternalStore } from "react";
 

package/dist/utils/react/useBufferedValue.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-34ce1a4 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-7dc6906 | 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.0.0-canary-34ce1a4 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-7dc6906 | Cube Dev Team */
 import { useEffect, useRef } from "react";
 
 //#region src/utils/react/useCombinedRefs.ts

package/dist/utils/react/useControlledFocusVisible.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-34ce1a4 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-7dc6906 | Cube Dev Team */
 import { createSharedStore } from "./sharedStore.js";
 import { useEffect } from "react";
 import { useFocusVisible } from "react-aria";

package/dist/utils/react/useEventBus.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-34ce1a4 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-7dc6906 | Cube Dev Team */
 import React, { createContext, useCallback, useContext, useEffect, useMemo, useRef } from "react";
 
 //#region src/utils/react/useEventBus.ts

package/dist/utils/react/useId.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-34ce1a4 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-7dc6906 | Cube Dev Team */
 import { useLayoutEffect as useLayoutEffect$1 } from "./useLayoutEffect.js";
 import { useEffect, useRef, useState } from "react";
 import { useSSRSafeId } from "@react-aria/ssr";

package/dist/utils/react/useIsDarwin.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-34ce1a4 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-7dc6906 | Cube Dev Team */
 import { useEffect, useState } from "react";
 
 //#region src/utils/react/useIsDarwin.ts

package/dist/utils/react/useKeySymbols.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-34ce1a4 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-7dc6906 | Cube Dev Team */
 import { useIsDarwin } from "./useIsDarwin.js";
 import { useMemo } from "react";
 

package/dist/utils/react/useLayoutEffect.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-34ce1a4 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-7dc6906 | 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.0.0-canary-34ce1a4 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-7dc6906 | Cube Dev Team */
 import { useEvent } from "../../_internal/hooks/use-event.js";
 import { useCallback, useSyncExternalStore } from "react";
 

package/dist/utils/react/useMergeStyles.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-34ce1a4 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-7dc6906 | Cube Dev Team */
 import { mergeStyles } from "@tenphi/tasty";
 import { useMemo } from "react";
 

package/dist/utils/react/usePopoverSync.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-34ce1a4 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-7dc6906 | Cube Dev Team */
 import { EventBusContext, useEventBus } from "./useEventBus.js";
 import { useCallback, useContext, useEffect, useRef } from "react";
 

package/dist/utils/react/useQaProps.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-34ce1a4 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-7dc6906 | Cube Dev Team */
 //#region src/utils/react/useQaProps.ts
 /**
 * Processes QA props.

package/dist/utils/react/useViewportSize.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-34ce1a4 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-7dc6906 | Cube Dev Team */
 import { useEffect, useState } from "react";
 
 //#region src/utils/react/useViewportSize.ts

package/dist/utils/react/wrapNodeIfPlain.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-34ce1a4 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-7dc6906 | Cube Dev Team */
 import { isValidElement } from "react";
 import { isFragment } from "react-is";
 

package/dist/utils/selection.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-34ce1a4 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-7dc6906 | 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.0.0-canary-34ce1a4 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-7dc6906 | Cube Dev Team */
 //#region src/utils/styles.ts
 /**
 * Split properties into style and non-style properties.

package/dist/utils/tree.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-34ce1a4 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-7dc6906 | 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.0.0-canary-34ce1a4 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-7dc6906 | Cube Dev Team */
 //#region src/utils/warnings.ts
 const SUGGESTED_PROP_MAP = {
 	disabled: "isDisabled",

package/dist/version.js

@@ -1,6 +1,6 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-34ce1a4 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-7dc6906 | Cube Dev Team */
 //#region src/version.ts
-const VERSION = "0.0.0-canary-34ce1a4";
+const VERSION = "0.0.0-canary-7dc6906";
 const TASTY_VERSION = "3.0.1";
 if (typeof window !== "undefined") {
 	const version = VERSION;

package/docs/components/actions/Button.md

@@ -179,8 +179,23 @@ import { IconPlus } from '@tabler/icons-react';
 <Button tooltip={true} width="100px">
   This text will be truncated
 </Button>;
+
+{
+  /* Explain why the button is unavailable */
+}
+<Button isDisabled tooltip="Not enough permissions">
+  Delete
+</Button>;
 ```
 
+A disabled button keeps showing its tooltip. Browsers stop dispatching mouse
+events on elements carrying the native `disabled` attribute, so a button that
+has a tooltip is marked with `aria-disabled` instead and kept inert: `onPress`
+never fires and clicks (including the ones Enter and Space produce) do nothing.
+Such a button also stays in the tab order, so keyboard users can focus it and
+read the tooltip. Buttons rendered as links (`to`) are always marked this way,
+since `disabled` is not a valid attribute on an anchor.
+
 ### Custom Size
 
 ```jsx
@@ -212,6 +227,8 @@ import { IconPlus } from '@tabler/icons-react';
 
 - `aria-label`, `aria-labelledby` – Accessible name.
 - `aria-pressed` – Managed automatically when `isSelected` is used.
+- `aria-disabled` – Announces the disabled state whenever the native `disabled`
+  attribute cannot be used: on links, and on buttons that carry a tooltip.
 - Additional ARIA attributes supported by React Aria's `useButton`.
 
 ## Behaviour Inside Popovers

package/docs/components/content/Item.md

@@ -388,8 +388,15 @@ By default, Item shows an auto tooltip when content overflows.
 >
   This shows custom tooltip only when text overflows
 </Item>
+
+{/* Explain why the item is unavailable */}
+<Item isDisabled tooltip="Available on the Enterprise plan">
+  Row-level security
+</Item>
 ```
 
+A disabled item keeps showing its tooltip — that is usually where the reason for being unavailable is written. Browsers stop dispatching mouse events on elements carrying the native `disabled` attribute, so an item that has a tooltip is marked with `aria-disabled` instead and kept inert: activation handlers are dropped and clicks (including the ones Enter and Space produce) do nothing.
+
 ## Accessibility
 
 ### Keyboard Navigation
@@ -408,7 +415,7 @@ By default, Item shows an auto tooltip when content overflows.
 ### ARIA Properties
 
 - `aria-label` - Provides accessible label when no visible label exists
-- `aria-disabled` - Indicates disabled state
+- `aria-disabled` - Indicates disabled state. The native `disabled` attribute is only added on top of it when the item renders as a form control (`as="button"`, for instance) and has no tooltip to keep hoverable
 - `aria-selected` - Indicates selection state when applicable
 - `tabIndex` - Controls focus behavior
 

package/docs/components/data/DataTable.md

@@ -61,8 +61,7 @@ and everything it knows about the query, in Cloud.
 
 - **`shape`** `'plain' | 'card'` (default: `'plain'`)
 - **`size`** `SizeName` (default: `'small'`) — An analytical grid packs more rows than a list.
-- **`rowSize`** `'small' | 'medium' | 'large'` — Row height as a named step: 28px / 32px / 40px. Rows only; the header keeps answering to `size`. Unset, the height comes from `size`.
-- **`rowHeight`** `number` — An exact height, when none of the named steps is the answer. Wins over both `rowSize` and `size`.
+- **`rowHeight`** `number` — Overrides the height implied by `size`.
 - **`headerHeight`** `number`
 - **`isStriped`** `boolean` (default: `true`) — Banding is what makes a wide row readable across.
 - **`isHeaderHidden`** `boolean`
@@ -110,20 +109,6 @@ and everything it knows about the query, in Cloud.
 - **`columnWidths`** `Record<string, number>`
 - **`defaultColumnWidths`** `Record<string, number>`
 - **`onColumnResize`** `(columnKey: string, width: number, all: Record<string, number>) => void`
-- **`isColumnReorderable`** `boolean` (default: `false`) — Drag column headers sideways to reorder them.
-- **`columnOrder`** `string[]` — Controlled order, as column keys. Works with or without dragging.
-- **`defaultColumnOrder`** `string[]`
-- **`onColumnOrderChange`** `(order: string[]) => void` — The full key list, including hidden and pinned columns.
-
-Per column, on `CubeDataTableColumn`: `isReorderable`, `color` and `colorScope` —
-see [Column Colors](#column-colors) for the last two.
-
-#### Column menu
-
-- **`columnContextMenu`** `boolean | 'context-only'` (default: `true`) — Where a column's `header.menu` is exposed.
-- **`onColumnMenuAction`** `(action: string, columnKey: string) => void` — The pressed key, as written.
-- **`columnMenuTriggerProps`** `Record<string, any>`
-- **`columnMenuProps`** `Record<string, any>`
 
 #### Virtualization
 
@@ -134,7 +119,7 @@ see [Column Colors](#column-colors) for the last two.
 #### Other
 
 - **`getRowProps`** `(ctx: CubeTableRowContext<T>) => Record<string, any>` — Per-row mods, styles and height.
-- **`storageKey`** `string` — Persists page size, column widths and column order.
+- **`storageKey`** `string` — Persists page size and column widths.
 - **`ariaLabel`** `string`
 
 #### `dataType`
@@ -301,113 +286,12 @@ succeeds.
 
 ### States
 
-### Sorting Affordance
-
-A sortable header shows nothing at rest. Hover it — or focus it from the keyboard
-— and the sort arrow fades in at 40%, pointing the way a press would sort it
-(ascending, for a column that is currently unsorted). Press it and the arrow goes
-solid and stays that way with the pointer gone, which is what separates a hint
-from a state.
-
-The arrow keeps its slot throughout, so none of this shifts the label. A
-non-sortable column has no arrow at all — the hint is not a reason to render one.
-
-### Column Menu
-
-A column exposes a menu through `header.menu`, opened from a `⋮` trigger in the
-header, by right-click, or with `Shift`+`F10`. The contents are opaque — the grid
-mounts the node and reports the pressed key back through `onColumnMenuAction`,
-which is what keeps Cube vocabulary out of the kit.
-
-Sorting is the exception, because it is the one thing the table itself can do.
-`columnSortMenu()` returns `sort-asc` / `sort-desc` / `clear-sort` items that the
-table labels from the current locale, disables when they would do nothing, and
-applies before telling the consumer. Everything else is yours:
-
-```tsx
-import { columnSortMenu, Menu } from '@cube-dev/ui-kit';
-
-const columns = [
-  {
-    key: 'revenue',
-    title: 'Revenue',
-    isSortable: true,
-    header: {
-      menu: (
-        <>
-          {columnSortMenu()}
-          <Menu.Item key="pin">Pin column</Menu.Item>
-        </>
-      ),
-    },
-  },
-];
-
-<DataTable
-  columns={columns}
-  onColumnMenuAction={(action, columnKey) => {
-    if (action === 'pin') pinColumn(columnKey);
-  }}
-/>;
-```
-
-Pressing the trigger never sorts the column: the header's `Item` swallows the
-click, which is why it sits *inside* the `<th>` rather than being it.
-
-### Column Reordering
-
-`isColumnReorderable` lets a user drag a header sideways, or move the focused
-column with `Alt`+`←` / `→`. Clicking still sorts and the resize handle still
-resizes.
-
-Structural and pinned columns stay put — `pin` is already the ordering authority
-for a pinned column — and a single column opts out with `isReorderable: false`.
-`columnOrder` works on its own too, so a column manager elsewhere in the page can
-drive the order without any dragging.
-
-A stale order is safe: keys for columns that no longer exist are ignored, and a
-column missing from the list lands after the neighbour it had in `columns`
-rather than being swept to the end.
-
-### Column Colors
-
-`column.color` tints a whole column — header, cells and pinned totals. It takes a
-palette theme name, any CSS color, a `{ hue, saturation }` seed, or a
-`{ fill, text }` pair for full manual control.
-
-Every form but the last is *derived*: only the hue and saturation are kept, and
-the tone ramp plus an AA/AAA text floor are re-solved for light, dark and
-high-contrast. A column cannot end up unreadable in a scheme nobody checked.
-
-```tsx
-const columns = [
-  { key: 'orders', title: 'Orders', color: 'note' },
-  { key: 'revenue', title: 'Revenue', color: 'success' },
-  { key: 'conversion', title: 'Conversion', color: '#0ea5e9' },
-  // Header only, cells left neutral.
-  { key: 'region', title: 'Region', color: 'danger', colorScope: ['header'] },
-];
-```
-
-Row banding survives inside a tinted column: the tint carries its own band one
-tone step away, so the stripe still reads down the column instead of being
-painted over.
-
-Under the hood each distinct color becomes a small adaptive theme named by a hash
-of its config, registered once per document — so ten columns sharing a color cost
-one set of tokens. That machinery is public as `useColorTheme` if you want it
-elsewhere.
-
 ## Accessibility
 
 The table is a `role="grid"` with document-absolute `aria-rowindex` /
 `aria-colindex`, and `aria-rowcount` counts pinned rows. Every sorted column
 carries `aria-sort`, not just the first.
 
-A header cell takes a tab stop when it is interactive — sortable, carrying a
-menu, or reorderable. `Shift`+`F10` opens the column menu from the keyboard, and
-`Alt`+`←` / `→` moves a reorderable column, so neither needs a pointer.
-
 ## Related Components
 
 - ItemTable — a list of things to act on.