@cube-dev/ui-kit 0.181.0 → 0.183.0

package/dist/components/form/validation/ValidationIndicator.js.map

@@ -1 +1 @@
-{"version":3,"file":"ValidationIndicator.js","names":[],"sources":["../../../../src/components/form/validation/ValidationIndicator.tsx"],"sourcesContent":["import { ReactElement } from 'react';\n\nimport { LoadingIcon } from '../../../icons/LoadingIcon';\nimport { ValidationProps } from '../../../shared/index';\nimport { InvalidIcon } from '../../shared/InvalidIcon';\nimport { ValidIcon } from '../../shared/ValidIcon';\n\nimport { hasValidationState } from './resolve-validation-props';\n\nexport interface ValidationIndicatorProps extends ValidationProps {\n  isLoading?: boolean;\n}\n\n/** The validation icon for the current state, or `null` when there is nothing to show */\nexport function getValidationIcon({\n  isInvalid,\n  isValid,\n}: ValidationProps): ReactElement | null {\n  if (isInvalid) return InvalidIcon;\n  if (isValid) return ValidIcon;\n\n  return null;\n}\n\n/**\n * Whether an input needs to render the `data-element=\"State\"` block. The loading indicator replaces the\n * validation icon while the input is loading.\n */\nexport function hasValidationIndicator(props: ValidationIndicatorProps) {\n  return !!props.isLoading || hasValidationState(props);\n}\n\n/**\n * Renders the validation state of an input as a suffix: either the validation icon or, while loading, the\n * loading indicator.\n */\nexport function ValidationIndicator(props: ValidationIndicatorProps) {\n  const { isLoading } = props;\n\n  if (!hasValidationIndicator(props)) {\n    return null;\n  }\n\n  return (\n    <div data-element=\"State\">\n      {isLoading ? (\n        <LoadingIcon data-element=\"InputIcon\" />\n      ) : (\n        getValidationIcon(props)\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;AAcA,SAAgB,kBAAkB,EAChC,WACA,WACuC;AACvC,KAAI,UAAW,QAAO;AACtB,KAAI,QAAS,QAAO;AAEpB,QAAO;;;;;;AAOT,SAAgB,uBAAuB,OAAiC;AACtE,QAAO,CAAC,CAAC,MAAM,aAAa,mBAAmB,MAAM;;;;;;AAOvD,SAAgB,oBAAoB,OAAiC;CACnE,MAAM,EAAE,cAAc;AAEtB,KAAI,CAAC,uBAAuB,MAAM,CAChC,QAAO;AAGT,QACE,oBAAC;EAAI,gBAAa;YACf,YACC,oBAAC,eAAY,gBAAa,cAAc,GAExC,kBAAkB,MAAM;GAEtB"}
+{"version":3,"file":"ValidationIndicator.js","names":["ReactElement","LoadingIcon","ValidationProps","InvalidIcon","ValidIcon","hasValidationState","ValidationIndicatorProps","isLoading","getValidationIcon","isInvalid","isValid","hasValidationIndicator","props","ValidationIndicator","$","_c","t0","t1"],"sources":["../../../../src/components/form/validation/ValidationIndicator.tsx"],"sourcesContent":["import { ReactElement } from 'react';\n\nimport { LoadingIcon } from '../../../icons/LoadingIcon';\nimport { ValidationProps } from '../../../shared/index';\nimport { InvalidIcon } from '../../shared/InvalidIcon';\nimport { ValidIcon } from '../../shared/ValidIcon';\n\nimport { hasValidationState } from './resolve-validation-props';\n\nexport interface ValidationIndicatorProps extends ValidationProps {\n  isLoading?: boolean;\n}\n\n/** The validation icon for the current state, or `null` when there is nothing to show */\nexport function getValidationIcon({\n  isInvalid,\n  isValid,\n}: ValidationProps): ReactElement | null {\n  if (isInvalid) return InvalidIcon;\n  if (isValid) return ValidIcon;\n\n  return null;\n}\n\n/**\n * Whether an input needs to render the `data-element=\"State\"` block. The loading indicator replaces the\n * validation icon while the input is loading.\n */\nexport function hasValidationIndicator(props: ValidationIndicatorProps) {\n  return !!props.isLoading || hasValidationState(props);\n}\n\n/**\n * Renders the validation state of an input as a suffix: either the validation icon or, while loading, the\n * loading indicator.\n */\nexport function ValidationIndicator(props: ValidationIndicatorProps) {\n  const { isLoading } = props;\n\n  if (!hasValidationIndicator(props)) {\n    return null;\n  }\n\n  return (\n    <div data-element=\"State\">\n      {isLoading ? (\n        <LoadingIcon data-element=\"InputIcon\" />\n      ) : (\n        getValidationIcon(props)\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;AAcA,SAAgBQ,kBAAkB,EAChCC,WACAC,WACuC;AACvC,KAAID,UAAW,QAAON;AACtB,KAAIO,QAAS,QAAON;AAEpB,QAAO;;;;;;AAOT,SAAgBO,uBAAuBC,OAAiC;AACtE,QAAO,CAAC,CAACA,MAAML,aAAaF,mBAAmBO,MAAM;;;;;;AAOvD,SAAOC,oBAAAD,OAAA;CAAA,MAAAE,IAAAC,EAAA,EAAA;CACL,MAAA,EAAAR,cAAsBK;AAEtB,KAAI,CAACD,uBAAuBC,MAAM,CAAA,QACzB;CACR,IAAAI;AAAA,KAAAF,EAAA,OAAAP,aAAAO,EAAA,OAAAF,OAAA;AAIII,OAAAT,YACC,oBAAC,eAAyB,gBAAA,cAG3B,GADCC,kBAAkBI,MACnB;AAAAE,IAAA,KAAAP;AAAAO,IAAA,KAAAF;AAAAE,IAAA,KAAAE;OAAAA,MAAAF,EAAA;CAAA,IAAAG;AAAA,KAAAH,EAAA,OAAAE,IAAA;AALHC,OAAA,oBAAA;GAAkB,gBAAA;aACfD;IAKG;AAAAF,IAAA,KAAAE;AAAAF,IAAA,KAAAG;OAAAA,MAAAH,EAAA;AAAA,QANNG"}

package/dist/components/form/validation/resolve-validation-props.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.181.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.183.0 | Cube Dev Team */
 //#region src/components/form/validation/resolve-validation-props.ts
 /**
 * Normalizes the validation props of a field into a pair of booleans.

package/dist/components/form/validation/resolve-validation-props.js.map

@@ -1 +1 @@
-{"version":3,"file":"resolve-validation-props.js","names":[],"sources":["../../../../src/components/form/validation/resolve-validation-props.ts"],"sourcesContent":["import { ValidationProps, ValidationState } from '../../../shared/index';\n\nexport interface ResolvableValidationProps extends ValidationProps {\n  /** @deprecated Use `isInvalid` / `isValid` instead. */\n  validationState?: ValidationState;\n}\n\nexport interface ResolvedValidationProps {\n  isInvalid: boolean | undefined;\n  isValid: boolean | undefined;\n}\n\n/**\n * Normalizes the validation props of a field into a pair of booleans.\n *\n * When none of `isInvalid`, `isValid` and the deprecated `validationState` is provided, both flags stay\n * `undefined` so the caller can fall back to a derived state (form errors, `showValid`, …). As soon as any\n * of them is provided, both flags become definite booleans and no fallback applies.\n *\n * `isInvalid` always wins over `isValid`.\n */\nexport function resolveValidationProps(\n  props: ResolvableValidationProps,\n): ResolvedValidationProps {\n  const { isInvalid, isValid, validationState } = props;\n\n  if (\n    isInvalid === undefined &&\n    isValid === undefined &&\n    validationState === undefined\n  ) {\n    return { isInvalid: undefined, isValid: undefined };\n  }\n\n  const resolvedIsInvalid = isInvalid ?? validationState === 'invalid';\n\n  return {\n    isInvalid: resolvedIsInvalid,\n    isValid: resolvedIsInvalid ? false : isValid ?? validationState === 'valid',\n  };\n}\n\n/** Whether the field has a validation state worth rendering an indicator for */\nexport function hasValidationState({\n  isInvalid,\n  isValid,\n}: ValidationProps): boolean {\n  return !!isInvalid || !!isValid;\n}\n\n/** Tasty modifiers for the validation state. Use instead of hand-writing `invalid`/`valid` mods. */\nexport function getValidationMods({ isInvalid, isValid }: ValidationProps) {\n  return {\n    invalid: !!isInvalid,\n    valid: !!isValid && !isInvalid,\n  };\n}\n\n/**\n * Maps the validation state onto a theme name for triggers and items.\n *\n * By default only the invalid state is mapped, which keeps neutral triggers neutral while the suffix icon\n * communicates the valid state. Pass `includeValid` to also map the valid state onto `success`.\n */\nexport function getValidationTheme<T extends string | undefined>(\n  theme: T,\n  { isInvalid, isValid }: ValidationProps,\n  options: { includeValid?: boolean } = {},\n): T | 'danger' | 'success' {\n  if (isInvalid) return 'danger';\n  if (options.includeValid && isValid) return 'success';\n\n  return theme;\n}\n"],"mappings":";;;;;;;;;;;AAqBA,SAAgB,uBACd,OACyB;CACzB,MAAM,EAAE,WAAW,SAAS,oBAAoB;AAEhD,KACE,cAAc,UACd,YAAY,UACZ,oBAAoB,OAEpB,QAAO;EAAE,WAAW;EAAW,SAAS;EAAW;CAGrD,MAAM,oBAAoB,aAAa,oBAAoB;AAE3D,QAAO;EACL,WAAW;EACX,SAAS,oBAAoB,QAAQ,WAAW,oBAAoB;EACrE;;;AAIH,SAAgB,mBAAmB,EACjC,WACA,WAC2B;AAC3B,QAAO,CAAC,CAAC,aAAa,CAAC,CAAC;;;AAI1B,SAAgB,kBAAkB,EAAE,WAAW,WAA4B;AACzE,QAAO;EACL,SAAS,CAAC,CAAC;EACX,OAAO,CAAC,CAAC,WAAW,CAAC;EACtB;;;;;;;;AASH,SAAgB,mBACd,OACA,EAAE,WAAW,WACb,UAAsC,EAAE,EACd;AAC1B,KAAI,UAAW,QAAO;AACtB,KAAI,QAAQ,gBAAgB,QAAS,QAAO;AAE5C,QAAO"}
+{"version":3,"file":"resolve-validation-props.js","names":["ValidationProps","ValidationState","ResolvableValidationProps","validationState","ResolvedValidationProps","isInvalid","isValid","resolveValidationProps","props","undefined","resolvedIsInvalid","hasValidationState","getValidationMods","invalid","valid","getValidationTheme","theme","T","options","includeValid"],"sources":["../../../../src/components/form/validation/resolve-validation-props.ts"],"sourcesContent":["import { ValidationProps, ValidationState } from '../../../shared/index';\n\nexport interface ResolvableValidationProps extends ValidationProps {\n  /** @deprecated Use `isInvalid` / `isValid` instead. */\n  validationState?: ValidationState;\n}\n\nexport interface ResolvedValidationProps {\n  isInvalid: boolean | undefined;\n  isValid: boolean | undefined;\n}\n\n/**\n * Normalizes the validation props of a field into a pair of booleans.\n *\n * When none of `isInvalid`, `isValid` and the deprecated `validationState` is provided, both flags stay\n * `undefined` so the caller can fall back to a derived state (form errors, `showValid`, …). As soon as any\n * of them is provided, both flags become definite booleans and no fallback applies.\n *\n * `isInvalid` always wins over `isValid`.\n */\nexport function resolveValidationProps(\n  props: ResolvableValidationProps,\n): ResolvedValidationProps {\n  const { isInvalid, isValid, validationState } = props;\n\n  if (\n    isInvalid === undefined &&\n    isValid === undefined &&\n    validationState === undefined\n  ) {\n    return { isInvalid: undefined, isValid: undefined };\n  }\n\n  const resolvedIsInvalid = isInvalid ?? validationState === 'invalid';\n\n  return {\n    isInvalid: resolvedIsInvalid,\n    isValid: resolvedIsInvalid ? false : isValid ?? validationState === 'valid',\n  };\n}\n\n/** Whether the field has a validation state worth rendering an indicator for */\nexport function hasValidationState({\n  isInvalid,\n  isValid,\n}: ValidationProps): boolean {\n  return !!isInvalid || !!isValid;\n}\n\n/** Tasty modifiers for the validation state. Use instead of hand-writing `invalid`/`valid` mods. */\nexport function getValidationMods({ isInvalid, isValid }: ValidationProps) {\n  return {\n    invalid: !!isInvalid,\n    valid: !!isValid && !isInvalid,\n  };\n}\n\n/**\n * Maps the validation state onto a theme name for triggers and items.\n *\n * By default only the invalid state is mapped, which keeps neutral triggers neutral while the suffix icon\n * communicates the valid state. Pass `includeValid` to also map the valid state onto `success`.\n */\nexport function getValidationTheme<T extends string | undefined>(\n  theme: T,\n  { isInvalid, isValid }: ValidationProps,\n  options: { includeValid?: boolean } = {},\n): T | 'danger' | 'success' {\n  if (isInvalid) return 'danger';\n  if (options.includeValid && isValid) return 'success';\n\n  return theme;\n}\n"],"mappings":";;;;;;;;;;;AAqBA,SAAgBO,uBACdC,OACyB;CACzB,MAAM,EAAEH,WAAWC,SAASH,oBAAoBK;AAEhD,KACEH,cAAcI,UACdH,YAAYG,UACZN,oBAAoBM,OAEpB,QAAO;EAAEJ,WAAWI;EAAWH,SAASG;EAAW;CAGrD,MAAMC,oBAAoBL,aAAaF,oBAAoB;AAE3D,QAAO;EACLE,WAAWK;EACXJ,SAASI,oBAAoB,QAAQJ,WAAWH,oBAAoB;EACrE;;;AAIH,SAAgBQ,mBAAmB,EACjCN,WACAC,WAC2B;AAC3B,QAAO,CAAC,CAACD,aAAa,CAAC,CAACC;;;AAI1B,SAAgBM,kBAAkB,EAAEP,WAAWC,WAA4B;AACzE,QAAO;EACLO,SAAS,CAAC,CAACR;EACXS,OAAO,CAAC,CAACR,WAAW,CAACD;EACtB;;;;;;;;AASH,SAAgBU,mBACdC,OACA,EAAEX,WAAWC,WACbY,UAAsC,EAAE,EACd;AAC1B,KAAIb,UAAW,QAAO;AACtB,KAAIa,QAAQC,gBAAgBb,QAAS,QAAO;AAE5C,QAAOU"}

package/dist/components/form/validation/use-validation-props.js

@@ -1,6 +1,7 @@
-/** @license MIT | @cube-dev/ui-kit v0.181.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.183.0 | Cube Dev Team */
 import { useWarn } from "../../../_internal/hooks/use-warn.js";
 import { resolveValidationProps } from "./resolve-validation-props.js";
+import { c } from "react-compiler-runtime";
 
 //#region src/components/form/validation/use-validation-props.ts
 /**
@@ -12,16 +13,41 @@ import { resolveValidationProps } from "./resolve-validation-props.js";
 * check of an all-optional constraint.
 */
 function useValidationProps(props) {
-	useWarn(props.validationState !== void 0, {
-		key: "validation-state-deprecated",
-		args: ["The \"validationState\" property is deprecated. Use \"isInvalid\" and \"isValid\" instead."]
-	});
+	const $ = c(8);
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = {
+			key: "validation-state-deprecated",
+			args: ["The \"validationState\" property is deprecated. Use \"isInvalid\" and \"isValid\" instead."]
+		};
+		$[0] = t0;
+	} else t0 = $[0];
+	useWarn(props.validationState !== void 0, t0);
 	if (props.validationState === void 0 && props.isInvalid === void 0 && props.isValid === void 0) return props;
-	const { validationState: _validationState, ...rest } = props;
-	return {
-		...rest,
-		...resolveValidationProps(props)
-	};
+	let rest;
+	if ($[1] !== props) {
+		const { validationState: _validationState, ...t1 } = props;
+		rest = t1;
+		$[1] = props;
+		$[2] = rest;
+	} else rest = $[2];
+	let t1;
+	if ($[3] !== props) {
+		t1 = resolveValidationProps(props);
+		$[3] = props;
+		$[4] = t1;
+	} else t1 = $[4];
+	let t2;
+	if ($[5] !== rest || $[6] !== t1) {
+		t2 = {
+			...rest,
+			...t1
+		};
+		$[5] = rest;
+		$[6] = t1;
+		$[7] = t2;
+	} else t2 = $[7];
+	return t2;
 }
 
 //#endregion

package/dist/components/form/validation/use-validation-props.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-validation-props.js","names":[],"sources":["../../../../src/components/form/validation/use-validation-props.ts"],"sourcesContent":["import { useWarn } from '../../../_internal/index';\n\nimport {\n  ResolvableValidationProps,\n  resolveValidationProps,\n} from './resolve-validation-props';\n\n/**\n * Resolves `isInvalid` / `isValid` from the props and removes the deprecated `validationState` prop, so\n * component bodies only ever deal with booleans.\n *\n * The validation props are intersected into the parameter instead of constraining `T`, because prop types\n * built with `Omit` over a `Props` index signature expose no named properties and would fail the weak type\n * check of an all-optional constraint.\n */\nexport function useValidationProps<T>(props: T & ResolvableValidationProps): T {\n  useWarn(props.validationState !== undefined, {\n    key: 'validation-state-deprecated',\n    args: [\n      'The \"validationState\" property is deprecated. Use \"isInvalid\" and \"isValid\" instead.',\n    ],\n  });\n\n  if (\n    props.validationState === undefined &&\n    props.isInvalid === undefined &&\n    props.isValid === undefined\n  ) {\n    return props;\n  }\n\n  const { validationState: _validationState, ...rest } = props;\n\n  return { ...rest, ...resolveValidationProps(props) } as T;\n}\n"],"mappings":";;;;;;;;;;;;;AAeA,SAAgB,mBAAsB,OAAyC;AAC7E,SAAQ,MAAM,oBAAoB,QAAW;EAC3C,KAAK;EACL,MAAM,CACJ,6FACD;EACF,CAAC;AAEF,KACE,MAAM,oBAAoB,UAC1B,MAAM,cAAc,UACpB,MAAM,YAAY,OAElB,QAAO;CAGT,MAAM,EAAE,iBAAiB,kBAAkB,GAAG,SAAS;AAEvD,QAAO;EAAE,GAAG;EAAM,GAAG,uBAAuB,MAAM;EAAE"}
+{"version":3,"file":"use-validation-props.js","names":["useWarn","ResolvableValidationProps","resolveValidationProps","useValidationProps","props","$","_c","t0","Symbol","for","key","args","validationState","undefined","isInvalid","isValid","rest","_validationState","t1","t2","T"],"sources":["../../../../src/components/form/validation/use-validation-props.ts"],"sourcesContent":["import { useWarn } from '../../../_internal/index';\n\nimport {\n  ResolvableValidationProps,\n  resolveValidationProps,\n} from './resolve-validation-props';\n\n/**\n * Resolves `isInvalid` / `isValid` from the props and removes the deprecated `validationState` prop, so\n * component bodies only ever deal with booleans.\n *\n * The validation props are intersected into the parameter instead of constraining `T`, because prop types\n * built with `Omit` over a `Props` index signature expose no named properties and would fail the weak type\n * check of an all-optional constraint.\n */\nexport function useValidationProps<T>(props: T & ResolvableValidationProps): T {\n  useWarn(props.validationState !== undefined, {\n    key: 'validation-state-deprecated',\n    args: [\n      'The \"validationState\" property is deprecated. Use \"isInvalid\" and \"isValid\" instead.',\n    ],\n  });\n\n  if (\n    props.validationState === undefined &&\n    props.isInvalid === undefined &&\n    props.isValid === undefined\n  ) {\n    return props;\n  }\n\n  const { validationState: _validationState, ...rest } = props;\n\n  return { ...rest, ...resolveValidationProps(props) } as T;\n}\n"],"mappings":";;;;;;;;;;;;;;AAeA,SAAOG,mBAAAC,OAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAA,IAAAC;AAAA,KAAAF,EAAA,OAAAG,OAAAC,IAAA,4BAAA,EAAA;AACwCF,OAAA;GAAAG,KACtC;GAA6BC,MAC5B,CACJ,6FAAsF;GAEzF;AAAAN,IAAA,KAAAE;OAAAA,MAAAF,EAAA;AALDL,SAAQI,MAAKQ,oBAAqBC,QAAWN,GAK3C;AAEF,KACEH,MAAKQ,oBAAqBC,UAC1BT,MAAKU,cAAeD,UACpBT,MAAKW,YAAaF,OAAS,QAEpBT;CACR,IAAAY;AAAA,KAAAX,EAAA,OAAAD,OAAA;EAED,MAAA,EAAAQ,iBAAAK,kBAAA,GAAAC,OAAuDd;AAAvDY,SAAAE;AAA6Db,IAAA,KAAAD;AAAAC,IAAA,KAAAW;OAAAA,QAAAX,EAAA;CAAA,IAAAa;AAAA,KAAAb,EAAA,OAAAD,OAAA;AAExCc,OAAAhB,uBAAuBE,MAAM;AAAAC,IAAA,KAAAD;AAAAC,IAAA,KAAAa;OAAAA,MAAAb,EAAA;CAAA,IAAAc;AAAA,KAAAd,EAAA,OAAAW,QAAAX,EAAA,OAAAa,IAAA;AAA3CC,OAAA;GAAA,GAAKH;GAAI,GAAKE;GAA+B;AAAAb,IAAA,KAAAW;AAAAX,IAAA,KAAAa;AAAAb,IAAA,KAAAc;OAAAA,MAAAd,EAAA;AAAA,QAA7Cc"}

package/dist/components/form/wrapper.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.181.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.183.0 | Cube Dev Team */
 import { mergeProps } from "../../utils/react/mergeProps.js";
 import { FieldWrapper } from "./FieldWrapper/FieldWrapper.js";
 import { jsx } from "react/jsx-runtime";

package/dist/components/form/wrapper.js.map

@@ -1 +1 @@
-{"version":3,"file":"wrapper.js","names":[],"sources":["../../../src/components/form/wrapper.tsx"],"sourcesContent":["import { DOMRef, FocusableRef } from '@react-types/shared';\nimport { BaseProps } from '@tenphi/tasty';\nimport { ReactElement, RefObject } from 'react';\n\nimport { FieldBaseProps, FormBaseProps } from '../../shared/index';\nimport { mergeProps } from '../../utils/react/index';\n\nimport { FieldWrapper } from './FieldWrapper/index';\n\n// `children` is intentionally omitted: the input is passed as `component`, never through props.\ninterface WrapWithFieldProps\n  extends FieldBaseProps,\n    Omit<BaseProps, 'children'>,\n    FormBaseProps {}\n\n/**\n * Wraps an input with the field chrome (label, description, message) when it has a `label` or `forceField`.\n * Only the field wrapper props are forwarded, so callers can pass their whole props object as is.\n */\nexport function wrapWithField<T extends WrapWithFieldProps>(\n  component: ReactElement,\n  ref: RefObject<unknown> | FocusableRef<HTMLElement> | DOMRef<HTMLElement>,\n  props: T,\n) {\n  let {\n    forceField,\n    label,\n    extra,\n    labelPosition = 'top',\n    labelStyles,\n    isRequired,\n    isOptional,\n    isDisabled,\n    necessityIndicator,\n    message,\n    messageStyles,\n    description,\n    errorMessage,\n    isInvalid,\n    isValid,\n    labelProps,\n    fieldProps,\n    fieldStyles,\n    requiredMark = true,\n    tooltip,\n    isHidden,\n    labelSuffix,\n  } = props;\n\n  if (!label && !forceField) {\n    return component;\n  }\n\n  // Merge fieldStyles as shorthand for fieldProps.styles (fieldStyles takes priority)\n  const mergedFieldProps = fieldStyles\n    ? mergeProps(fieldProps, { styles: fieldStyles })\n    : fieldProps;\n\n  // Merge labelStyles as shorthand for labelProps.styles (labelStyles takes priority)\n  const mergedLabelProps = labelStyles\n    ? mergeProps(labelProps, { styles: labelStyles })\n    : labelProps;\n\n  // Remove id from fieldProps to avoid duplication (id should be on the input element, not the field wrapper)\n  const { id: _id, ...fieldPropsWithoutId } = (mergedFieldProps as any) || {};\n\n  return (\n    <FieldWrapper\n      {...{\n        label,\n        extra,\n        labelPosition,\n        isRequired,\n        isOptional,\n        isDisabled,\n        necessityIndicator,\n        labelProps: mergedLabelProps,\n        fieldProps: fieldPropsWithoutId,\n        message,\n        messageStyles,\n        description,\n        errorMessage,\n        isInvalid,\n        isValid,\n        requiredMark,\n        tooltip,\n        isHidden,\n        labelSuffix,\n        Component: component,\n        ref,\n      }}\n    />\n  );\n}\n"],"mappings":";;;;;;;;;;AAmBA,SAAgB,cACd,WACA,KACA,OACA;CACA,IAAI,EACF,YACA,OACA,OACA,gBAAgB,OAChB,aACA,YACA,YACA,YACA,oBACA,SACA,eACA,aACA,cACA,WACA,SACA,YACA,YACA,aACA,eAAe,MACf,SACA,UACA,gBACE;AAEJ,KAAI,CAAC,SAAS,CAAC,WACb,QAAO;CAIT,MAAM,mBAAmB,cACrB,WAAW,YAAY,EAAE,QAAQ,aAAa,CAAC,GAC/C;CAGJ,MAAM,mBAAmB,cACrB,WAAW,YAAY,EAAE,QAAQ,aAAa,CAAC,GAC/C;CAGJ,MAAM,EAAE,IAAI,KAAK,GAAG,wBAAyB,oBAA4B,EAAE;AAE3E,QACE,oBAAC;EAEG;EACA;EACA;EACA;EACA;EACA;EACA;EACA,YAAY;EACZ,YAAY;EACZ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,WAAW;EACX;GAEF"}
+{"version":3,"file":"wrapper.js","names":["DOMRef","FocusableRef","BaseProps","ReactElement","RefObject","FieldBaseProps","FormBaseProps","mergeProps","FieldWrapper","WrapWithFieldProps","Omit","wrapWithField","component","ref","HTMLElement","props","T","forceField","label","extra","labelPosition","labelStyles","isRequired","isOptional","isDisabled","necessityIndicator","message","messageStyles","description","errorMessage","isInvalid","isValid","labelProps","fieldProps","fieldStyles","requiredMark","tooltip","isHidden","labelSuffix","mergedFieldProps","styles","mergedLabelProps","id","_id","fieldPropsWithoutId","Component"],"sources":["../../../src/components/form/wrapper.tsx"],"sourcesContent":["import { DOMRef, FocusableRef } from '@react-types/shared';\nimport { BaseProps } from '@tenphi/tasty';\nimport { ReactElement, RefObject } from 'react';\n\nimport { FieldBaseProps, FormBaseProps } from '../../shared/index';\nimport { mergeProps } from '../../utils/react/index';\n\nimport { FieldWrapper } from './FieldWrapper/index';\n\n// `children` is intentionally omitted: the input is passed as `component`, never through props.\ninterface WrapWithFieldProps\n  extends FieldBaseProps,\n    Omit<BaseProps, 'children'>,\n    FormBaseProps {}\n\n/**\n * Wraps an input with the field chrome (label, description, message) when it has a `label` or `forceField`.\n * Only the field wrapper props are forwarded, so callers can pass their whole props object as is.\n */\nexport function wrapWithField<T extends WrapWithFieldProps>(\n  component: ReactElement,\n  ref: RefObject<unknown> | FocusableRef<HTMLElement> | DOMRef<HTMLElement>,\n  props: T,\n) {\n  let {\n    forceField,\n    label,\n    extra,\n    labelPosition = 'top',\n    labelStyles,\n    isRequired,\n    isOptional,\n    isDisabled,\n    necessityIndicator,\n    message,\n    messageStyles,\n    description,\n    errorMessage,\n    isInvalid,\n    isValid,\n    labelProps,\n    fieldProps,\n    fieldStyles,\n    requiredMark = true,\n    tooltip,\n    isHidden,\n    labelSuffix,\n  } = props;\n\n  if (!label && !forceField) {\n    return component;\n  }\n\n  // Merge fieldStyles as shorthand for fieldProps.styles (fieldStyles takes priority)\n  const mergedFieldProps = fieldStyles\n    ? mergeProps(fieldProps, { styles: fieldStyles })\n    : fieldProps;\n\n  // Merge labelStyles as shorthand for labelProps.styles (labelStyles takes priority)\n  const mergedLabelProps = labelStyles\n    ? mergeProps(labelProps, { styles: labelStyles })\n    : labelProps;\n\n  // Remove id from fieldProps to avoid duplication (id should be on the input element, not the field wrapper)\n  const { id: _id, ...fieldPropsWithoutId } = (mergedFieldProps as any) || {};\n\n  return (\n    <FieldWrapper\n      {...{\n        label,\n        extra,\n        labelPosition,\n        isRequired,\n        isOptional,\n        isDisabled,\n        necessityIndicator,\n        labelProps: mergedLabelProps,\n        fieldProps: fieldPropsWithoutId,\n        message,\n        messageStyles,\n        description,\n        errorMessage,\n        isInvalid,\n        isValid,\n        requiredMark,\n        tooltip,\n        isHidden,\n        labelSuffix,\n        Component: component,\n        ref,\n      }}\n    />\n  );\n}\n"],"mappings":";;;;;;;;;;AAmBA,SAAgBW,cACdC,WACAC,KACAE,OACA;CACA,IAAI,EACFE,YACAC,OACAC,OACAC,gBAAgB,OAChBC,aACAC,YACAC,YACAC,YACAC,oBACAC,SACAC,eACAC,aACAC,cACAC,WACAC,SACAC,YACAC,YACAC,aACAC,eAAe,MACfC,SACAC,UACAC,gBACEvB;AAEJ,KAAI,CAACG,SAAS,CAACD,WACb,QAAOL;CAIT,MAAM2B,mBAAmBL,cACrB3B,WAAW0B,YAAY,EAAEO,QAAQN,aAAa,CAAC,GAC/CD;CAGJ,MAAMQ,mBAAmBpB,cACrBd,WAAWyB,YAAY,EAAEQ,QAAQnB,aAAa,CAAC,GAC/CW;CAGJ,MAAM,EAAEU,IAAIC,KAAK,GAAGC,wBAAyBL,oBAA4B,EAAE;AAE3E,QACE,oBAAC;EAEGrB;EACAC;EACAC;EACAE;EACAC;EACAC;EACAC;EACAO,YAAYS;EACZR,YAAYW;EACZlB;EACAC;EACAC;EACAC;EACAC;EACAC;EACAI;EACAC;EACAC;EACAC;EACAO,WAAWjC;EACXC;GAEF"}

package/dist/components/helpers/DisplayTransition/DisplayTransition.js

@@ -1,16 +1,36 @@
-/** @license MIT | @cube-dev/ui-kit v0.181.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.183.0 | Cube Dev Team */
+import { c } from "react-compiler-runtime";
 import { useCallback, useLayoutEffect, useRef, useState } from "react";
 
 //#region src/components/helpers/DisplayTransition/DisplayTransition.tsx
 const AUTO_FALLBACK_DURATION = 500;
 function useEvent(fn) {
+	const $ = c(4);
 	const ref = useRef(fn);
-	useLayoutEffect(() => {
-		ref.current = fn;
-	}, [fn]);
-	return useCallback((...args) => {
-		return ref.current?.(...args);
-	}, []);
+	let t0;
+	let t1;
+	if ($[0] !== fn) {
+		t0 = () => {
+			ref.current = fn;
+		};
+		t1 = [fn];
+		$[0] = fn;
+		$[1] = t0;
+		$[2] = t1;
+	} else {
+		t0 = $[1];
+		t1 = $[2];
+	}
+	useLayoutEffect(t0, t1);
+	let t2;
+	if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = (...t3) => {
+			const args = t3;
+			return ref.current?.(...args);
+		};
+		$[3] = t2;
+	} else t2 = $[3];
+	return t2;
 }
 function DisplayTransition({ isShown: targetShown, duration, onRest, onPhaseChange, onToggle, exposeUnmounted = false, animateOnMount = true, respectReducedMotion = true, preserveContent = true, children }) {
 	const dur = respectReducedMotion && typeof window !== "undefined" && window.matchMedia?.("(prefers-reduced-motion: reduce)")?.matches ? 0 : duration;
@@ -62,43 +82,43 @@ function DisplayTransition({ isShown: targetShown, duration, onRest, onPhaseChan
 			eventListenersRef.current = null;
 		}
 	};
-	const afterDuration = (cb) => {
-		const flow = flowRef.current;
+	const afterDuration = (cb_0) => {
+		const flow_0 = flowRef.current;
 		if (dur === void 0) {
-			const element = elementRef.current;
+			const element_0 = elementRef.current;
 			cleanupEventListeners();
 			transitionStartedRef.current = false;
 			let completed = false;
 			const complete = () => {
-				if (completed || flowRef.current !== flow) return;
+				if (completed || flowRef.current !== flow_0) return;
 				completed = true;
 				clearTimer();
 				cleanupEventListeners();
-				cb();
+				cb_0();
 			};
-			if (!element) {
+			if (!element_0) {
 				clearTimer();
 				timerRef.current = setTimeout(() => {
-					if (flowRef.current !== flow) return;
+					if (flowRef.current !== flow_0) return;
 					timerRef.current = null;
 					complete();
 				}, AUTO_FALLBACK_DURATION);
 				return;
 			}
 			const onTransitionStart = (e) => {
-				if (e.target !== element) return;
-				if (flowRef.current !== flow) return;
+				if (e.target !== element_0) return;
+				if (flowRef.current !== flow_0) return;
 				transitionStartedRef.current = true;
 				clearTimer();
 			};
-			const onTransitionEnd = (e) => {
-				if (e.target !== element) return;
-				if (flowRef.current !== flow) return;
+			const onTransitionEnd = (e_0) => {
+				if (e_0.target !== element_0) return;
+				if (flowRef.current !== flow_0) return;
 				complete();
 			};
-			const onTransitionCancel = (e) => {
-				if (e.target !== element) return;
-				if (flowRef.current !== flow) return;
+			const onTransitionCancel = (e_1) => {
+				if (e_1.target !== element_0) return;
+				if (flowRef.current !== flow_0) return;
 				complete();
 			};
 			eventListenersRef.current = {
@@ -106,24 +126,24 @@ function DisplayTransition({ isShown: targetShown, duration, onRest, onPhaseChan
 				onTransitionEnd,
 				onTransitionCancel
 			};
-			element.addEventListener("transitionstart", onTransitionStart);
-			element.addEventListener("transitionend", onTransitionEnd);
-			element.addEventListener("transitioncancel", onTransitionCancel);
+			element_0.addEventListener("transitionstart", onTransitionStart);
+			element_0.addEventListener("transitionend", onTransitionEnd);
+			element_0.addEventListener("transitioncancel", onTransitionCancel);
 			timerRef.current = setTimeout(() => {
-				if (flowRef.current !== flow) return;
+				if (flowRef.current !== flow_0) return;
 				if (!transitionStartedRef.current) complete();
 			}, 150);
 			return;
 		}
 		if (dur <= 0) {
-			cb();
+			cb_0();
 			return;
 		}
 		clearTimer();
 		timerRef.current = setTimeout(() => {
-			if (flowRef.current !== flow) return;
+			if (flowRef.current !== flow_0) return;
 			timerRef.current = null;
-			cb();
+			cb_0();
 		}, dur);
 	};
 	const ensureEnterFlow = () => {

package/dist/components/helpers/DisplayTransition/DisplayTransition.js.map

@@ -1 +1 @@
-{"version":3,"file":"DisplayTransition.js","names":[],"sources":["../../../../src/components/helpers/DisplayTransition/DisplayTransition.tsx"],"sourcesContent":["import {\n  ReactNode,\n  RefCallback,\n  useCallback,\n  useLayoutEffect,\n  useRef,\n  useState,\n} from 'react';\n\nconst AUTO_FALLBACK_DURATION = 500;\n\ntype Phase = 'enter' | 'entered' | 'exit-pending' | 'exit' | 'unmounted';\nexport type ReportedPhase = 'enter' | 'entered' | 'exit' | 'unmounted';\n\nexport type DisplayTransitionProps = {\n  /** Desired visibility (driver). */\n  isShown: boolean;\n  /** Times enter->entered and exit->unmounted. 0 => immediate. If undefined, uses native transition events. */\n  duration?: number;\n  /** Fires after enter settles or after exit completes (unmount). */\n  onRest?: (transition: 'enter' | 'exit') => void;\n  /** Fires when phase changes. */\n  onPhaseChange?: (phase: ReportedPhase) => void;\n  /** Fires when isShown (derived from phase) changes. */\n  onToggle?: (isShown: boolean) => void;\n  /** Keep calling children during \"unmounted\" (you decide what to render). */\n  exposeUnmounted?: boolean;\n  /** If false and initially shown, start at \"entered\" (no first-mount animation/SSR pop). */\n  animateOnMount?: boolean;\n  /** Respect prefers-reduced-motion by collapsing duration to 0. */\n  respectReducedMotion?: boolean;\n  /** Preserve children content during exit transition. When true, uses stored children from when content was visible. @default true */\n  preserveContent?: boolean;\n  /** Render-prop gets { phase, isShown, ref }. Bind ref to the transitioned element for native event detection. */\n  children: (props: {\n    phase: ReportedPhase;\n    isShown: boolean;\n    ref: RefCallback<HTMLElement>;\n  }) => ReactNode;\n};\n\n// Stable callback to avoid stale closures\nfunction useEvent<T extends (...a: any[]) => any>(fn?: T) {\n  const ref = useRef(fn);\n  useLayoutEffect(() => {\n    ref.current = fn;\n  }, [fn]);\n  return useCallback((...args: Parameters<NonNullable<T>>) => {\n    return ref.current?.(...args);\n  }, []);\n}\n\nexport function DisplayTransition({\n  isShown: targetShown,\n  duration,\n  onRest,\n  onPhaseChange,\n  onToggle,\n  exposeUnmounted = false,\n  animateOnMount = true,\n  respectReducedMotion = true,\n  preserveContent = true,\n  children,\n}: DisplayTransitionProps) {\n  // Reduced motion → collapse timing\n  const prefersReduced =\n    respectReducedMotion &&\n    typeof window !== 'undefined' &&\n    window.matchMedia?.('(prefers-reduced-motion: reduce)')?.matches;\n  const dur = prefersReduced ? 0 : duration;\n\n  // Store children to preserve content during exit transitions\n  const storedChildrenRef = useRef<typeof children>(children);\n\n  // For native transition event detection\n  const elementRef = useRef<HTMLElement | null>(null);\n  const transitionStartedRef = useRef(false);\n  const eventListenersRef = useRef<{\n    onTransitionStart: (e: TransitionEvent) => void;\n    onTransitionEnd: (e: TransitionEvent) => void;\n    onTransitionCancel: (e: TransitionEvent) => void;\n  } | null>(null);\n\n  // Initial phase (optionally skip first-mount animation)\n  const [phase, setPhase] = useState<Phase>(\n    targetShown ? (animateOnMount ? 'enter' : 'entered') : 'unmounted',\n  );\n  const phaseRef = useRef(phase);\n  phaseRef.current = phase;\n\n  // Advance phase synchronously during render so the overlay element\n  // exists in the same commit. This lets useOverlayPosition (and similar\n  // hooks) find the element on their first layout-effect run.\n  if (targetShown && phase === 'unmounted') {\n    setPhase('enter');\n  }\n\n  const onRestEvent = useEvent(onRest);\n  const onPhaseChangeEvent = useEvent(onPhaseChange);\n  const onToggleEvent = useEvent(onToggle);\n\n  // Versioned scheduling (Strict Mode & rapid toggles safe)\n  const flowRef = useRef(0);\n  const rafRef = useRef<number | null>(null);\n  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  const cancelRAF = () => {\n    if (rafRef.current != null) {\n      cancelAnimationFrame(rafRef.current);\n      rafRef.current = null;\n    }\n  };\n  const clearTimer = () => {\n    if (timerRef.current != null) {\n      clearTimeout(timerRef.current);\n      timerRef.current = null;\n    }\n  };\n\n  // Double-rAF ensures at least one paint with \"enter\" before flipping to \"entered\".\n  const nextPaint = (cb: () => void) => {\n    cancelRAF();\n    const flow = flowRef.current;\n    rafRef.current = requestAnimationFrame(() => {\n      if (flowRef.current !== flow) return;\n      rafRef.current = requestAnimationFrame(() => {\n        if (flowRef.current !== flow) return;\n        rafRef.current = null;\n        cb();\n      });\n    });\n  };\n\n  const cleanupEventListeners = () => {\n    const element = elementRef.current;\n    const listeners = eventListenersRef.current;\n    if (element && listeners) {\n      element.removeEventListener(\n        'transitionstart',\n        listeners.onTransitionStart,\n      );\n      element.removeEventListener('transitionend', listeners.onTransitionEnd);\n      element.removeEventListener(\n        'transitioncancel',\n        listeners.onTransitionCancel,\n      );\n      eventListenersRef.current = null;\n    }\n  };\n\n  const afterDuration = (cb: () => void) => {\n    const flow = flowRef.current;\n\n    // If using native event detection\n    if (dur === undefined) {\n      const element = elementRef.current;\n\n      cleanupEventListeners();\n      transitionStartedRef.current = false;\n\n      let completed = false;\n      const complete = () => {\n        if (completed || flowRef.current !== flow) return;\n        completed = true;\n        clearTimer();\n        cleanupEventListeners();\n        cb();\n      };\n\n      if (!element) {\n        // No element to listen on - use fallback timer to avoid immediate completion\n        clearTimer();\n        timerRef.current = setTimeout(() => {\n          if (flowRef.current !== flow) return;\n          timerRef.current = null;\n          complete();\n        }, AUTO_FALLBACK_DURATION);\n\n        return;\n      }\n\n      const onTransitionStart = (e: TransitionEvent) => {\n        // Ignore bubbled events from children - only react to our own element's transitions\n        if (e.target !== element) return;\n        if (flowRef.current !== flow) return;\n        transitionStartedRef.current = true;\n        clearTimer(); // Cancel fallback timer once transition starts\n      };\n\n      const onTransitionEnd = (e: TransitionEvent) => {\n        // Ignore bubbled events from children - only react to our own element's transitions\n        if (e.target !== element) return;\n        if (flowRef.current !== flow) return;\n        complete();\n      };\n\n      const onTransitionCancel = (e: TransitionEvent) => {\n        // Ignore bubbled events from children - only react to our own element's transitions\n        if (e.target !== element) return;\n        if (flowRef.current !== flow) return;\n        complete();\n      };\n\n      eventListenersRef.current = {\n        onTransitionStart,\n        onTransitionEnd,\n        onTransitionCancel,\n      };\n\n      element.addEventListener('transitionstart', onTransitionStart);\n      element.addEventListener('transitionend', onTransitionEnd);\n      element.addEventListener('transitioncancel', onTransitionCancel);\n\n      // Fallback: if no transitionstart fires within 150ms, assume no transition\n      timerRef.current = setTimeout(() => {\n        if (flowRef.current !== flow) return;\n        if (!transitionStartedRef.current) {\n          complete();\n        }\n      }, 150);\n\n      return;\n    }\n\n    // If using explicit duration\n    if (dur <= 0) {\n      cb();\n      return;\n    }\n    clearTimer();\n    timerRef.current = setTimeout(() => {\n      if (flowRef.current !== flow) return;\n      timerRef.current = null;\n      cb();\n    }, dur);\n  };\n\n  const ensureEnterFlow = () => {\n    if (phaseRef.current !== 'enter') {\n      return;\n    }\n\n    // Element ref is only required for native transition event detection (duration === undefined).\n    // When using explicit duration, setTimeout handles timing so no element is needed.\n    if (dur === undefined && !elementRef.current) {\n      return;\n    }\n\n    // frame N: \"enter\" (hidden) → frame N+1: \"entered\" (shown) → after dur: onRest(\"enter\")\n    nextPaint(() => {\n      if (phaseRef.current !== 'enter') return;\n      setPhase('entered');\n      afterDuration(() => onRestEvent?.('enter'));\n    });\n  };\n\n  const ensureExitFlow = () => {\n    // \"exit\" (hidden) → after dur → \"unmounted\" → onRest(\"exit\")\n    afterDuration(() => {\n      setPhase('unmounted');\n      onRestEvent?.('exit');\n    });\n  };\n\n  // frame N: \"exit-pending\" (still shown) → frame N+1: \"exit\" (hidden) → ensureExitFlow.\n  // Idempotent and re-callable, mirroring ensureEnterFlow: whoever cancels the\n  // pending rAF is responsible for re-arming it.\n  const ensureExitPendingFlow = () => {\n    nextPaint(() => {\n      if (phaseRef.current !== 'exit-pending') return;\n      setPhase('exit');\n      ensureExitFlow();\n    });\n  };\n\n  useLayoutEffect(() => {\n    ++flowRef.current; // invalidate any pending work\n    const current = phaseRef.current;\n\n    if (targetShown) {\n      if (current === 'unmounted' || current === 'exit') {\n        setPhase('enter');\n        ensureEnterFlow();\n      } else if (current === 'enter') {\n        ensureEnterFlow();\n      } else if (current === 'exit-pending') {\n        // User toggled back before exit started, cancel and stay entered\n        cancelRAF();\n        clearTimer();\n        setPhase('entered');\n      } else {\n        // already \"entered\"\n        cancelRAF();\n        clearTimer();\n      }\n    } else {\n      if (current === 'unmounted') {\n        cancelRAF();\n        clearTimer();\n      } else if (current !== 'exit' && current !== 'exit-pending') {\n        // Set intermediate phase to trigger re-render, RAF will be scheduled from layout effect\n        setPhase('exit-pending');\n      } else if (current === 'exit') {\n        ensureExitFlow();\n      } else {\n        // Still \"exit-pending\": our own cleanup just cancelled the rAF the\n        // [phase] effect scheduled, and that effect will not re-run because\n        // `phase` did not change. Re-arm it here or the content stays visible\n        // forever while the driver reports hidden.\n        ensureExitPendingFlow();\n      }\n    }\n\n    return () => {\n      cancelRAF();\n      clearTimer();\n      cleanupEventListeners();\n    };\n  }, [targetShown, dur, onRestEvent]);\n\n  // Schedule RAF from layout effect for both enter and exit-pending to ensure symmetric timing\n  useLayoutEffect(() => {\n    if (phaseRef.current === 'enter') {\n      ensureEnterFlow();\n    } else if (phaseRef.current === 'exit-pending') {\n      // Schedule RAF for exit, mirroring the enter flow timing\n      ensureExitPendingFlow();\n    }\n    return cancelRAF;\n  }, [phase]);\n\n  // Map internal phase to reported phase (exit-pending is reported as 'entered')\n  const reportedPhase: ReportedPhase =\n    phase === 'exit-pending' ? 'entered' : phase;\n\n  // Call onPhaseChange when reported phase changes\n  const prevReportedPhaseRef = useRef(reportedPhase);\n  useLayoutEffect(() => {\n    if (prevReportedPhaseRef.current !== reportedPhase) {\n      prevReportedPhaseRef.current = reportedPhase;\n      onPhaseChangeEvent?.(reportedPhase);\n    }\n  }, [reportedPhase, onPhaseChangeEvent]);\n\n  // Render-time boolean (true only when visually shown)\n  const isShownNow = phase === 'entered' || phase === 'exit-pending';\n  const prevIsShownRef = useRef(isShownNow);\n\n  // Call onToggle when isShown changes\n  useLayoutEffect(() => {\n    if (prevIsShownRef.current !== isShownNow) {\n      prevIsShownRef.current = isShownNow;\n      onToggleEvent?.(isShownNow);\n    }\n  }, [isShownNow, onToggleEvent]);\n\n  // Ref callback to attach to transitioned element\n  // MUST be memoized so React doesn't re-call it on re-renders,\n  // which would cleanup event listeners mid-transition\n  const refCallback: RefCallback<HTMLElement> = useCallback((node) => {\n    if (node) {\n      elementRef.current = node;\n      // Don't call ensureEnterFlow() here - useLayoutEffect handles RAF scheduling\n      // to ensure symmetric timing with exit flow\n    } else {\n      cleanupEventListeners();\n      elementRef.current = null;\n    }\n  }, []);\n\n  // Update stored children only when showing (enter/entered phase and targetShown is true)\n  // This prevents overwriting during exit transitions, preserving content for the animation\n  const isShowingContent =\n    (phase === 'enter' || phase === 'entered') && targetShown;\n\n  if (isShowingContent) {\n    storedChildrenRef.current = children;\n  }\n\n  // When preserveContent is enabled, always use stored children:\n  // - During show: stored is updated above, so it equals current children\n  // - During hide: stored keeps the last shown content for the exit animation\n  const effectiveChildren = preserveContent\n    ? storedChildrenRef.current\n    : children;\n\n  if (phase === 'unmounted' && !exposeUnmounted) return null;\n  return effectiveChildren({\n    phase:\n      reportedPhase === 'enter' && duration !== undefined && !duration\n        ? 'entered'\n        : reportedPhase,\n    isShown: isShownNow,\n    ref: refCallback,\n  });\n}\n"],"mappings":"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"}
+{"version":3,"file":"DisplayTransition.js","names":["ReactNode","RefCallback","useCallback","useLayoutEffect","useRef","useState","AUTO_FALLBACK_DURATION","Phase","ReportedPhase","DisplayTransitionProps","isShown","duration","onRest","transition","onPhaseChange","phase","onToggle","exposeUnmounted","animateOnMount","respectReducedMotion","preserveContent","children","props","ref","HTMLElement","useEvent","fn","$","_c","t0","t1","current","t2","Symbol","for","t3","args","DisplayTransition","targetShown","prefersReduced","window","matchMedia","matches","dur","storedChildrenRef","elementRef","transitionStartedRef","eventListenersRef","onTransitionStart","e","TransitionEvent","onTransitionEnd","onTransitionCancel","setPhase","phaseRef","onRestEvent","onPhaseChangeEvent","onToggleEvent","flowRef","rafRef","timerRef","ReturnType","setTimeout","cancelRAF","cancelAnimationFrame","clearTimer","clearTimeout","nextPaint","cb","flow","requestAnimationFrame","cleanupEventListeners","element","listeners","removeEventListener","afterDuration","undefined","completed","complete","target","addEventListener","ensureEnterFlow","ensureExitFlow","ensureExitPendingFlow","reportedPhase","prevReportedPhaseRef","isShownNow","prevIsShownRef","refCallback","node","isShowingContent","effectiveChildren"],"sources":["../../../../src/components/helpers/DisplayTransition/DisplayTransition.tsx"],"sourcesContent":["import {\n  ReactNode,\n  RefCallback,\n  useCallback,\n  useLayoutEffect,\n  useRef,\n  useState,\n} from 'react';\n\nconst AUTO_FALLBACK_DURATION = 500;\n\ntype Phase = 'enter' | 'entered' | 'exit-pending' | 'exit' | 'unmounted';\nexport type ReportedPhase = 'enter' | 'entered' | 'exit' | 'unmounted';\n\nexport type DisplayTransitionProps = {\n  /** Desired visibility (driver). */\n  isShown: boolean;\n  /** Times enter->entered and exit->unmounted. 0 => immediate. If undefined, uses native transition events. */\n  duration?: number;\n  /** Fires after enter settles or after exit completes (unmount). */\n  onRest?: (transition: 'enter' | 'exit') => void;\n  /** Fires when phase changes. */\n  onPhaseChange?: (phase: ReportedPhase) => void;\n  /** Fires when isShown (derived from phase) changes. */\n  onToggle?: (isShown: boolean) => void;\n  /** Keep calling children during \"unmounted\" (you decide what to render). */\n  exposeUnmounted?: boolean;\n  /** If false and initially shown, start at \"entered\" (no first-mount animation/SSR pop). */\n  animateOnMount?: boolean;\n  /** Respect prefers-reduced-motion by collapsing duration to 0. */\n  respectReducedMotion?: boolean;\n  /** Preserve children content during exit transition. When true, uses stored children from when content was visible. @default true */\n  preserveContent?: boolean;\n  /** Render-prop gets { phase, isShown, ref }. Bind ref to the transitioned element for native event detection. */\n  children: (props: {\n    phase: ReportedPhase;\n    isShown: boolean;\n    ref: RefCallback<HTMLElement>;\n  }) => ReactNode;\n};\n\n// Stable callback to avoid stale closures\nfunction useEvent<T extends (...a: any[]) => any>(fn?: T) {\n  const ref = useRef(fn);\n  useLayoutEffect(() => {\n    ref.current = fn;\n  }, [fn]);\n  return useCallback((...args: Parameters<NonNullable<T>>) => {\n    return ref.current?.(...args);\n  }, []);\n}\n\nexport function DisplayTransition({\n  isShown: targetShown,\n  duration,\n  onRest,\n  onPhaseChange,\n  onToggle,\n  exposeUnmounted = false,\n  animateOnMount = true,\n  respectReducedMotion = true,\n  preserveContent = true,\n  children,\n}: DisplayTransitionProps) {\n  // Reduced motion → collapse timing\n  const prefersReduced =\n    respectReducedMotion &&\n    typeof window !== 'undefined' &&\n    window.matchMedia?.('(prefers-reduced-motion: reduce)')?.matches;\n  const dur = prefersReduced ? 0 : duration;\n\n  // Store children to preserve content during exit transitions\n  const storedChildrenRef = useRef<typeof children>(children);\n\n  // For native transition event detection\n  const elementRef = useRef<HTMLElement | null>(null);\n  const transitionStartedRef = useRef(false);\n  const eventListenersRef = useRef<{\n    onTransitionStart: (e: TransitionEvent) => void;\n    onTransitionEnd: (e: TransitionEvent) => void;\n    onTransitionCancel: (e: TransitionEvent) => void;\n  } | null>(null);\n\n  // Initial phase (optionally skip first-mount animation)\n  const [phase, setPhase] = useState<Phase>(\n    targetShown ? (animateOnMount ? 'enter' : 'entered') : 'unmounted',\n  );\n  const phaseRef = useRef(phase);\n  phaseRef.current = phase;\n\n  // Advance phase synchronously during render so the overlay element\n  // exists in the same commit. This lets useOverlayPosition (and similar\n  // hooks) find the element on their first layout-effect run.\n  if (targetShown && phase === 'unmounted') {\n    setPhase('enter');\n  }\n\n  const onRestEvent = useEvent(onRest);\n  const onPhaseChangeEvent = useEvent(onPhaseChange);\n  const onToggleEvent = useEvent(onToggle);\n\n  // Versioned scheduling (Strict Mode & rapid toggles safe)\n  const flowRef = useRef(0);\n  const rafRef = useRef<number | null>(null);\n  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  const cancelRAF = () => {\n    if (rafRef.current != null) {\n      cancelAnimationFrame(rafRef.current);\n      rafRef.current = null;\n    }\n  };\n  const clearTimer = () => {\n    if (timerRef.current != null) {\n      clearTimeout(timerRef.current);\n      timerRef.current = null;\n    }\n  };\n\n  // Double-rAF ensures at least one paint with \"enter\" before flipping to \"entered\".\n  const nextPaint = (cb: () => void) => {\n    cancelRAF();\n    const flow = flowRef.current;\n    rafRef.current = requestAnimationFrame(() => {\n      if (flowRef.current !== flow) return;\n      rafRef.current = requestAnimationFrame(() => {\n        if (flowRef.current !== flow) return;\n        rafRef.current = null;\n        cb();\n      });\n    });\n  };\n\n  const cleanupEventListeners = () => {\n    const element = elementRef.current;\n    const listeners = eventListenersRef.current;\n    if (element && listeners) {\n      element.removeEventListener(\n        'transitionstart',\n        listeners.onTransitionStart,\n      );\n      element.removeEventListener('transitionend', listeners.onTransitionEnd);\n      element.removeEventListener(\n        'transitioncancel',\n        listeners.onTransitionCancel,\n      );\n      eventListenersRef.current = null;\n    }\n  };\n\n  const afterDuration = (cb: () => void) => {\n    const flow = flowRef.current;\n\n    // If using native event detection\n    if (dur === undefined) {\n      const element = elementRef.current;\n\n      cleanupEventListeners();\n      transitionStartedRef.current = false;\n\n      let completed = false;\n      const complete = () => {\n        if (completed || flowRef.current !== flow) return;\n        completed = true;\n        clearTimer();\n        cleanupEventListeners();\n        cb();\n      };\n\n      if (!element) {\n        // No element to listen on - use fallback timer to avoid immediate completion\n        clearTimer();\n        timerRef.current = setTimeout(() => {\n          if (flowRef.current !== flow) return;\n          timerRef.current = null;\n          complete();\n        }, AUTO_FALLBACK_DURATION);\n\n        return;\n      }\n\n      const onTransitionStart = (e: TransitionEvent) => {\n        // Ignore bubbled events from children - only react to our own element's transitions\n        if (e.target !== element) return;\n        if (flowRef.current !== flow) return;\n        transitionStartedRef.current = true;\n        clearTimer(); // Cancel fallback timer once transition starts\n      };\n\n      const onTransitionEnd = (e: TransitionEvent) => {\n        // Ignore bubbled events from children - only react to our own element's transitions\n        if (e.target !== element) return;\n        if (flowRef.current !== flow) return;\n        complete();\n      };\n\n      const onTransitionCancel = (e: TransitionEvent) => {\n        // Ignore bubbled events from children - only react to our own element's transitions\n        if (e.target !== element) return;\n        if (flowRef.current !== flow) return;\n        complete();\n      };\n\n      eventListenersRef.current = {\n        onTransitionStart,\n        onTransitionEnd,\n        onTransitionCancel,\n      };\n\n      element.addEventListener('transitionstart', onTransitionStart);\n      element.addEventListener('transitionend', onTransitionEnd);\n      element.addEventListener('transitioncancel', onTransitionCancel);\n\n      // Fallback: if no transitionstart fires within 150ms, assume no transition\n      timerRef.current = setTimeout(() => {\n        if (flowRef.current !== flow) return;\n        if (!transitionStartedRef.current) {\n          complete();\n        }\n      }, 150);\n\n      return;\n    }\n\n    // If using explicit duration\n    if (dur <= 0) {\n      cb();\n      return;\n    }\n    clearTimer();\n    timerRef.current = setTimeout(() => {\n      if (flowRef.current !== flow) return;\n      timerRef.current = null;\n      cb();\n    }, dur);\n  };\n\n  const ensureEnterFlow = () => {\n    if (phaseRef.current !== 'enter') {\n      return;\n    }\n\n    // Element ref is only required for native transition event detection (duration === undefined).\n    // When using explicit duration, setTimeout handles timing so no element is needed.\n    if (dur === undefined && !elementRef.current) {\n      return;\n    }\n\n    // frame N: \"enter\" (hidden) → frame N+1: \"entered\" (shown) → after dur: onRest(\"enter\")\n    nextPaint(() => {\n      if (phaseRef.current !== 'enter') return;\n      setPhase('entered');\n      afterDuration(() => onRestEvent?.('enter'));\n    });\n  };\n\n  const ensureExitFlow = () => {\n    // \"exit\" (hidden) → after dur → \"unmounted\" → onRest(\"exit\")\n    afterDuration(() => {\n      setPhase('unmounted');\n      onRestEvent?.('exit');\n    });\n  };\n\n  // frame N: \"exit-pending\" (still shown) → frame N+1: \"exit\" (hidden) → ensureExitFlow.\n  // Idempotent and re-callable, mirroring ensureEnterFlow: whoever cancels the\n  // pending rAF is responsible for re-arming it.\n  const ensureExitPendingFlow = () => {\n    nextPaint(() => {\n      if (phaseRef.current !== 'exit-pending') return;\n      setPhase('exit');\n      ensureExitFlow();\n    });\n  };\n\n  useLayoutEffect(() => {\n    ++flowRef.current; // invalidate any pending work\n    const current = phaseRef.current;\n\n    if (targetShown) {\n      if (current === 'unmounted' || current === 'exit') {\n        setPhase('enter');\n        ensureEnterFlow();\n      } else if (current === 'enter') {\n        ensureEnterFlow();\n      } else if (current === 'exit-pending') {\n        // User toggled back before exit started, cancel and stay entered\n        cancelRAF();\n        clearTimer();\n        setPhase('entered');\n      } else {\n        // already \"entered\"\n        cancelRAF();\n        clearTimer();\n      }\n    } else {\n      if (current === 'unmounted') {\n        cancelRAF();\n        clearTimer();\n      } else if (current !== 'exit' && current !== 'exit-pending') {\n        // Set intermediate phase to trigger re-render, RAF will be scheduled from layout effect\n        setPhase('exit-pending');\n      } else if (current === 'exit') {\n        ensureExitFlow();\n      } else {\n        // Still \"exit-pending\": our own cleanup just cancelled the rAF the\n        // [phase] effect scheduled, and that effect will not re-run because\n        // `phase` did not change. Re-arm it here or the content stays visible\n        // forever while the driver reports hidden.\n        ensureExitPendingFlow();\n      }\n    }\n\n    return () => {\n      cancelRAF();\n      clearTimer();\n      cleanupEventListeners();\n    };\n  }, [targetShown, dur, onRestEvent]);\n\n  // Schedule RAF from layout effect for both enter and exit-pending to ensure symmetric timing\n  useLayoutEffect(() => {\n    if (phaseRef.current === 'enter') {\n      ensureEnterFlow();\n    } else if (phaseRef.current === 'exit-pending') {\n      // Schedule RAF for exit, mirroring the enter flow timing\n      ensureExitPendingFlow();\n    }\n    return cancelRAF;\n  }, [phase]);\n\n  // Map internal phase to reported phase (exit-pending is reported as 'entered')\n  const reportedPhase: ReportedPhase =\n    phase === 'exit-pending' ? 'entered' : phase;\n\n  // Call onPhaseChange when reported phase changes\n  const prevReportedPhaseRef = useRef(reportedPhase);\n  useLayoutEffect(() => {\n    if (prevReportedPhaseRef.current !== reportedPhase) {\n      prevReportedPhaseRef.current = reportedPhase;\n      onPhaseChangeEvent?.(reportedPhase);\n    }\n  }, [reportedPhase, onPhaseChangeEvent]);\n\n  // Render-time boolean (true only when visually shown)\n  const isShownNow = phase === 'entered' || phase === 'exit-pending';\n  const prevIsShownRef = useRef(isShownNow);\n\n  // Call onToggle when isShown changes\n  useLayoutEffect(() => {\n    if (prevIsShownRef.current !== isShownNow) {\n      prevIsShownRef.current = isShownNow;\n      onToggleEvent?.(isShownNow);\n    }\n  }, [isShownNow, onToggleEvent]);\n\n  // Ref callback to attach to transitioned element\n  // MUST be memoized so React doesn't re-call it on re-renders,\n  // which would cleanup event listeners mid-transition\n  const refCallback: RefCallback<HTMLElement> = useCallback((node) => {\n    if (node) {\n      elementRef.current = node;\n      // Don't call ensureEnterFlow() here - useLayoutEffect handles RAF scheduling\n      // to ensure symmetric timing with exit flow\n    } else {\n      cleanupEventListeners();\n      elementRef.current = null;\n    }\n  }, []);\n\n  // Update stored children only when showing (enter/entered phase and targetShown is true)\n  // This prevents overwriting during exit transitions, preserving content for the animation\n  const isShowingContent =\n    (phase === 'enter' || phase === 'entered') && targetShown;\n\n  if (isShowingContent) {\n    storedChildrenRef.current = children;\n  }\n\n  // When preserveContent is enabled, always use stored children:\n  // - During show: stored is updated above, so it equals current children\n  // - During hide: stored keeps the last shown content for the exit animation\n  const effectiveChildren = preserveContent\n    ? storedChildrenRef.current\n    : children;\n\n  if (phase === 'unmounted' && !exposeUnmounted) return null;\n  return effectiveChildren({\n    phase:\n      reportedPhase === 'enter' && duration !== undefined && !duration\n        ? 'entered'\n        : reportedPhase,\n    isShown: isShownNow,\n    ref: refCallback,\n  });\n}\n"],"mappings":"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"}

package/dist/components/helpers/IconSwitch/IconSwitch.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.181.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.183.0 | Cube Dev Team */
 import { DisplayTransition } from "../DisplayTransition/DisplayTransition.js";
 import { tasty } from "@tenphi/tasty";
 import { isValidElement, useCallback, useLayoutEffect, useRef, useState } from "react";
@@ -88,20 +88,20 @@ function IconSwitch(props) {
 		prevChildrenRef.current = children;
 	}, [children, effectiveKey]);
 	const handleExitComplete = useCallback((exitedKey) => {
-		setIcons((prev) => prev.filter((icon) => icon.key !== exitedKey));
+		setIcons((prev_0) => prev_0.filter((icon) => icon.key !== exitedKey));
 	}, []);
 	const latestKey = icons[icons.length - 1]?.key;
 	const isKeyChangePending = effectiveKey !== prevEffectiveKeyRef.current;
 	const isNullishChangePending = isNullishContent(children) !== isNullishContent(prevChildrenRef.current);
 	const isTransitionPending = isKeyChangePending || isNullishChangePending;
-	const content = icons.map((icon) => {
-		const isActive = icon.key === latestKey;
-		const displayContent = isActive && !isTransitionPending ? children : icon.content;
+	const content = icons.map((icon_0) => {
+		const isActive = icon_0.key === latestKey;
+		const displayContent = isActive && !isTransitionPending ? children : icon_0.content;
 		return /* @__PURE__ */ jsx(DisplayTransition, {
 			isShown: isActive,
-			animateOnMount: icon.key !== 0,
+			animateOnMount: icon_0.key !== 0,
 			onRest: (transition) => {
-				if (transition === "exit") handleExitComplete(icon.key);
+				if (transition === "exit") handleExitComplete(icon_0.key);
 			},
 			children: ({ isShown, phase, ref }) => /* @__PURE__ */ jsx(IconSlotElement, {
 				ref,
@@ -111,7 +111,7 @@ function IconSwitch(props) {
 				},
 				children: displayContent
 			})
-		}, icon.key);
+		}, icon_0.key);
 	});
 	if (noWrapper) return /* @__PURE__ */ jsx(Fragment$1, { children: content });
 	return /* @__PURE__ */ jsx(IconSwitchElement, {

package/dist/components/helpers/IconSwitch/IconSwitch.js.map

@@ -1 +1 @@
-{"version":3,"file":"IconSwitch.js","names":[],"sources":["../../../../src/components/helpers/IconSwitch/IconSwitch.tsx"],"sourcesContent":["import { BaseProps, tasty } from '@tenphi/tasty';\nimport {\n  isValidElement,\n  ReactNode,\n  useCallback,\n  useLayoutEffect,\n  useRef,\n  useState,\n} from 'react';\n\nimport { DisplayTransition } from '../DisplayTransition/DisplayTransition';\n\nexport interface CubeIconSwitchProps extends BaseProps {\n  /** The icon to display */\n  children: ReactNode;\n  /** Override the default key derivation for detecting icon changes */\n  contentKey?: string | number;\n  /** When true, renders without wrapper element, expecting parent to provide grid context */\n  noWrapper?: boolean;\n}\n\ninterface IconEntry {\n  key: number;\n  content: ReactNode;\n}\n\nfunction isNullishContent(node: ReactNode) {\n  // React treats `null`, `undefined`, and `false` as \"render nothing\"\n  return node == null || node === false;\n}\n\nconst typeIds = new WeakMap<object, number>();\nlet lastTypeId = 0;\n\nfunction getTypeId(type: object) {\n  const existing = typeIds.get(type);\n  if (existing != null) return existing;\n  const next = (lastTypeId += 1);\n  typeIds.set(type, next);\n  return next;\n}\n\n/**\n * Best-effort key derivation for icon switching when `contentKey` is not provided.\n * The goal is to:\n * - Transition when icon component type changes\n * - Not transition when only props change for the same icon type (self-animating icons)\n * - Transition when toggling to/from nullish content\n */\nfunction deriveContentKey(children: ReactNode): string {\n  if (isNullishContent(children)) return 'nullish';\n  if (!isValidElement(children)) return `non-element:${typeof children}`;\n\n  const { type, key } = children;\n  const keyPart = key == null ? '' : `:${String(key)}`;\n\n  if (typeof type === 'string') return `host:${type}${keyPart}`;\n  if (typeof type === 'function') return `fn:${getTypeId(type)}${keyPart}`;\n  if (typeof type === 'object' && type != null)\n    return `obj:${getTypeId(type)}${keyPart}`;\n  if (typeof type === 'symbol') return `sym:${String(type)}${keyPart}`;\n\n  return `unknown${keyPart}`;\n}\n\nconst IconSwitchElement = tasty({\n  styles: {\n    display: 'grid',\n    placeItems: 'center',\n  },\n});\n\nconst IconSlotElement = tasty({\n  styles: {\n    gridArea: '1 / 1',\n    display: 'grid',\n    placeItems: 'center',\n    placeSelf: 'stretch',\n    opacity: {\n      '': 0,\n      entered: 1,\n    },\n    transition: {\n      '': 'theme $transition ease-out',\n      'exit | entered': 'theme $transition ease-in',\n    },\n  },\n});\n\n/**\n * A component that cross-fades between icons when children change.\n * Useful for animated icon transitions in buttons, items, etc.\n *\n * When `contentKey` changes, a transition is triggered.\n * When only `children` changes (same `contentKey`), content is updated in-place\n * without transition, allowing self-animating icons (like DirectionIcon) to work.\n */\nexport function IconSwitch(props: CubeIconSwitchProps) {\n  const { children, contentKey, noWrapper, ...rest } = props;\n\n  const keyCounterRef = useRef(0);\n  const effectiveKey = contentKey ?? deriveContentKey(children);\n  const prevEffectiveKeyRef = useRef<string | number>(effectiveKey);\n  const prevChildrenRef = useRef<ReactNode>(children);\n\n  const [icons, setIcons] = useState<IconEntry[]>(() => [\n    { key: keyCounterRef.current, content: children },\n  ]);\n\n  useLayoutEffect(() => {\n    const prevKey = prevEffectiveKeyRef.current;\n    const prevChildren = prevChildrenRef.current;\n\n    const hasKeyChanged = effectiveKey !== prevKey;\n    const hasNullishToggled =\n      isNullishContent(children) !== isNullishContent(prevChildren);\n\n    // Transition rules:\n    // - If key changed -> transition (add new icon entry)\n    // - If we toggled nullish <-> non-nullish -> transition (even if key did not change)\n    // - Otherwise -> no state update (children reference changes are handled at render time)\n    if (hasKeyChanged || hasNullishToggled) {\n      keyCounterRef.current += 1;\n      const newEntry: IconEntry = {\n        key: keyCounterRef.current,\n        content: children,\n      };\n      setIcons((prev) => [...prev, newEntry]);\n    }\n\n    prevEffectiveKeyRef.current = effectiveKey;\n    prevChildrenRef.current = children;\n  }, [children, effectiveKey]);\n\n  const handleExitComplete = useCallback((exitedKey: number) => {\n    setIcons((prev) => prev.filter((icon) => icon.key !== exitedKey));\n  }, []);\n\n  const latestKey = icons[icons.length - 1]?.key;\n\n  // Detect if we're in an intermediate render (transition pending but effect hasn't added new entry yet).\n  // In this state, we must use stored content to avoid flashing the new icon before the transition.\n  const isKeyChangePending = effectiveKey !== prevEffectiveKeyRef.current;\n  const isNullishChangePending =\n    isNullishContent(children) !== isNullishContent(prevChildrenRef.current);\n  const isTransitionPending = isKeyChangePending || isNullishChangePending;\n\n  const content = icons.map((icon) => {\n    const isActive = icon.key === latestKey;\n    // Use current children for active icon ONLY when no transition is pending.\n    // During intermediate renders (before effect adds new entry), use stored content.\n    // For exiting icons, always use stored content to preserve appearance during fade-out.\n    const displayContent =\n      isActive && !isTransitionPending ? children : icon.content;\n\n    return (\n      <DisplayTransition\n        key={icon.key}\n        isShown={isActive}\n        animateOnMount={icon.key !== 0}\n        onRest={(transition) => {\n          if (transition === 'exit') {\n            handleExitComplete(icon.key);\n          }\n        }}\n      >\n        {({ isShown, phase, ref }) => (\n          <IconSlotElement\n            ref={ref}\n            mods={{\n              entered: isShown,\n              phase,\n            }}\n          >\n            {displayContent}\n          </IconSlotElement>\n        )}\n      </DisplayTransition>\n    );\n  });\n\n  if (noWrapper) {\n    return <>{content}</>;\n  }\n\n  return <IconSwitchElement {...rest}>{content}</IconSwitchElement>;\n}\n\nexport type { CubeIconSwitchProps as IconSwitchProps };\n"],"mappings":"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"}
+{"version":3,"file":"IconSwitch.js","names":["BaseProps","tasty","isValidElement","ReactNode","useCallback","useLayoutEffect","useRef","useState","DisplayTransition","CubeIconSwitchProps","children","contentKey","noWrapper","IconEntry","key","content","isNullishContent","node","typeIds","WeakMap","lastTypeId","getTypeId","type","existing","get","next","set","deriveContentKey","keyPart","String","IconSwitchElement","styles","display","placeItems","IconSlotElement","gridArea","placeSelf","opacity","entered","transition","IconSwitch","props","rest","keyCounterRef","effectiveKey","prevEffectiveKeyRef","prevChildrenRef","icons","setIcons","current","prevKey","prevChildren","hasKeyChanged","hasNullishToggled","newEntry","prev","handleExitComplete","exitedKey","filter","icon","latestKey","length","isKeyChangePending","isNullishChangePending","isTransitionPending","map","isActive","displayContent","isShown","phase","ref","IconSwitchProps"],"sources":["../../../../src/components/helpers/IconSwitch/IconSwitch.tsx"],"sourcesContent":["import { BaseProps, tasty } from '@tenphi/tasty';\nimport {\n  isValidElement,\n  ReactNode,\n  useCallback,\n  useLayoutEffect,\n  useRef,\n  useState,\n} from 'react';\n\nimport { DisplayTransition } from '../DisplayTransition/DisplayTransition';\n\nexport interface CubeIconSwitchProps extends BaseProps {\n  /** The icon to display */\n  children: ReactNode;\n  /** Override the default key derivation for detecting icon changes */\n  contentKey?: string | number;\n  /** When true, renders without wrapper element, expecting parent to provide grid context */\n  noWrapper?: boolean;\n}\n\ninterface IconEntry {\n  key: number;\n  content: ReactNode;\n}\n\nfunction isNullishContent(node: ReactNode) {\n  // React treats `null`, `undefined`, and `false` as \"render nothing\"\n  return node == null || node === false;\n}\n\nconst typeIds = new WeakMap<object, number>();\nlet lastTypeId = 0;\n\nfunction getTypeId(type: object) {\n  const existing = typeIds.get(type);\n  if (existing != null) return existing;\n  const next = (lastTypeId += 1);\n  typeIds.set(type, next);\n  return next;\n}\n\n/**\n * Best-effort key derivation for icon switching when `contentKey` is not provided.\n * The goal is to:\n * - Transition when icon component type changes\n * - Not transition when only props change for the same icon type (self-animating icons)\n * - Transition when toggling to/from nullish content\n */\nfunction deriveContentKey(children: ReactNode): string {\n  if (isNullishContent(children)) return 'nullish';\n  if (!isValidElement(children)) return `non-element:${typeof children}`;\n\n  const { type, key } = children;\n  const keyPart = key == null ? '' : `:${String(key)}`;\n\n  if (typeof type === 'string') return `host:${type}${keyPart}`;\n  if (typeof type === 'function') return `fn:${getTypeId(type)}${keyPart}`;\n  if (typeof type === 'object' && type != null)\n    return `obj:${getTypeId(type)}${keyPart}`;\n  if (typeof type === 'symbol') return `sym:${String(type)}${keyPart}`;\n\n  return `unknown${keyPart}`;\n}\n\nconst IconSwitchElement = tasty({\n  styles: {\n    display: 'grid',\n    placeItems: 'center',\n  },\n});\n\nconst IconSlotElement = tasty({\n  styles: {\n    gridArea: '1 / 1',\n    display: 'grid',\n    placeItems: 'center',\n    placeSelf: 'stretch',\n    opacity: {\n      '': 0,\n      entered: 1,\n    },\n    transition: {\n      '': 'theme $transition ease-out',\n      'exit | entered': 'theme $transition ease-in',\n    },\n  },\n});\n\n/**\n * A component that cross-fades between icons when children change.\n * Useful for animated icon transitions in buttons, items, etc.\n *\n * When `contentKey` changes, a transition is triggered.\n * When only `children` changes (same `contentKey`), content is updated in-place\n * without transition, allowing self-animating icons (like DirectionIcon) to work.\n */\nexport function IconSwitch(props: CubeIconSwitchProps) {\n  const { children, contentKey, noWrapper, ...rest } = props;\n\n  const keyCounterRef = useRef(0);\n  const effectiveKey = contentKey ?? deriveContentKey(children);\n  const prevEffectiveKeyRef = useRef<string | number>(effectiveKey);\n  const prevChildrenRef = useRef<ReactNode>(children);\n\n  const [icons, setIcons] = useState<IconEntry[]>(() => [\n    { key: keyCounterRef.current, content: children },\n  ]);\n\n  useLayoutEffect(() => {\n    const prevKey = prevEffectiveKeyRef.current;\n    const prevChildren = prevChildrenRef.current;\n\n    const hasKeyChanged = effectiveKey !== prevKey;\n    const hasNullishToggled =\n      isNullishContent(children) !== isNullishContent(prevChildren);\n\n    // Transition rules:\n    // - If key changed -> transition (add new icon entry)\n    // - If we toggled nullish <-> non-nullish -> transition (even if key did not change)\n    // - Otherwise -> no state update (children reference changes are handled at render time)\n    if (hasKeyChanged || hasNullishToggled) {\n      keyCounterRef.current += 1;\n      const newEntry: IconEntry = {\n        key: keyCounterRef.current,\n        content: children,\n      };\n      setIcons((prev) => [...prev, newEntry]);\n    }\n\n    prevEffectiveKeyRef.current = effectiveKey;\n    prevChildrenRef.current = children;\n  }, [children, effectiveKey]);\n\n  const handleExitComplete = useCallback((exitedKey: number) => {\n    setIcons((prev) => prev.filter((icon) => icon.key !== exitedKey));\n  }, []);\n\n  const latestKey = icons[icons.length - 1]?.key;\n\n  // Detect if we're in an intermediate render (transition pending but effect hasn't added new entry yet).\n  // In this state, we must use stored content to avoid flashing the new icon before the transition.\n  const isKeyChangePending = effectiveKey !== prevEffectiveKeyRef.current;\n  const isNullishChangePending =\n    isNullishContent(children) !== isNullishContent(prevChildrenRef.current);\n  const isTransitionPending = isKeyChangePending || isNullishChangePending;\n\n  const content = icons.map((icon) => {\n    const isActive = icon.key === latestKey;\n    // Use current children for active icon ONLY when no transition is pending.\n    // During intermediate renders (before effect adds new entry), use stored content.\n    // For exiting icons, always use stored content to preserve appearance during fade-out.\n    const displayContent =\n      isActive && !isTransitionPending ? children : icon.content;\n\n    return (\n      <DisplayTransition\n        key={icon.key}\n        isShown={isActive}\n        animateOnMount={icon.key !== 0}\n        onRest={(transition) => {\n          if (transition === 'exit') {\n            handleExitComplete(icon.key);\n          }\n        }}\n      >\n        {({ isShown, phase, ref }) => (\n          <IconSlotElement\n            ref={ref}\n            mods={{\n              entered: isShown,\n              phase,\n            }}\n          >\n            {displayContent}\n          </IconSlotElement>\n        )}\n      </DisplayTransition>\n    );\n  });\n\n  if (noWrapper) {\n    return <>{content}</>;\n  }\n\n  return <IconSwitchElement {...rest}>{content}</IconSwitchElement>;\n}\n\nexport type { CubeIconSwitchProps as IconSwitchProps };\n"],"mappings":"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"}

package/dist/components/layout/Board/Board.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.181.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.183.0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useCombinedRefs } from "../../../utils/react/useCombinedRefs.js";
@@ -15,6 +15,7 @@ import { useBoardLayout } from "./use-board-layout.js";
 import { useBoardSelectModifierKey } from "./use-board-select-modifier-key.js";
 import { useBoardSelection } from "./use-board-selection.js";
 import { WidgetHost } from "./WidgetHost.js";
+import { c } from "react-compiler-runtime";
 import { CONTAINER_STYLES, filterBaseProps, mergeStyles, tasty } from "@tenphi/tasty";
 import { forwardRef, useEffect, useId, useMemo, useRef, useState, useSyncExternalStore } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -738,14 +739,31 @@ const BoardInnerForwarded = forwardRef(BoardInner);
 * `BoardProvider` to enable dragging widgets between them.
 */
 const Board = forwardRef(function Board(props, ref) {
-	if (useBoardRegistry()) return /* @__PURE__ */ jsx(BoardInnerForwarded, {
-		...props,
-		ref
-	});
-	return /* @__PURE__ */ jsx(BoardProvider, { children: /* @__PURE__ */ jsx(BoardInnerForwarded, {
-		...props,
-		ref
-	}) });
+	const $ = c(6);
+	if (useBoardRegistry()) {
+		let t0;
+		if ($[0] !== props || $[1] !== ref) {
+			t0 = /* @__PURE__ */ jsx(BoardInnerForwarded, {
+				...props,
+				ref
+			});
+			$[0] = props;
+			$[1] = ref;
+			$[2] = t0;
+		} else t0 = $[2];
+		return t0;
+	}
+	let t0;
+	if ($[3] !== props || $[4] !== ref) {
+		t0 = /* @__PURE__ */ jsx(BoardProvider, { children: /* @__PURE__ */ jsx(BoardInnerForwarded, {
+			...props,
+			ref
+		}) });
+		$[3] = props;
+		$[4] = ref;
+		$[5] = t0;
+	} else t0 = $[5];
+	return t0;
 });
 
 //#endregion