@cube-dev/ui-kit 0.121.6 → 0.122.0

package/dist/components/form/Form/Form.js

@@ -1,9 +1,10 @@
-/** @license MIT | @cube-dev/ui-kit v0.121.6 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.122.0 | Cube Dev Team */
+import { extractStyles } from "../../../utils/styles.js";
 import { useCombinedRefs } from "../../../utils/react/useCombinedRefs.js";
 import { Provider, useProviderProps } from "../../../provider.js";
 import { timeout } from "../../../utils/promise.js";
 import { useForm } from "./use-form.js";
-import { CONTAINER_STYLES, extractStyles, filterBaseProps, tasty } from "@tenphi/tasty";
+import { CONTAINER_STYLES, filterBaseProps, tasty } from "@tenphi/tasty";
 import { createContext, forwardRef, useContext, useRef } from "react";
 import { jsx } from "react/jsx-runtime";
 import { useDOMRef } from "@react-spectrum/utils";

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

@@ -1 +1 @@
-{"version":3,"file":"Form.js","names":[],"sources":["../../../../src/components/form/Form/Form.tsx"],"sourcesContent":["import { useDOMRef } from '@react-spectrum/utils';\nimport { DOMRef } from '@react-types/shared';\nimport {\n  BaseProps,\n  CONTAINER_STYLES,\n  ContainerStyleProps,\n  extractStyles,\n  filterBaseProps,\n  Styles,\n  tasty,\n} from '@tenphi/tasty';\nimport {\n  createContext,\n  FormHTMLAttributes,\n  forwardRef,\n  ReactElement,\n  ReactNode,\n  useContext,\n  useRef,\n} from 'react';\n\nimport { Provider, useProviderProps } from '../../../provider';\nimport { FormBaseProps } from '../../../shared/index';\nimport { timeout } from '../../../utils/promise';\nimport { useCombinedRefs } from '../../../utils/react/index';\n\nimport { FieldTypes } from './types';\nimport { CubeFormData, CubeFormInstance, useForm } from './use-form';\n\nexport const FormContext = createContext({});\n\nconst FormElement = tasty({\n  as: 'form',\n  qa: 'Form',\n  styles: {\n    display: {\n      '': 'block',\n      horizontal: 'flex',\n    },\n    flow: {\n      '': 'column',\n      horizontal: 'row',\n    },\n    placeItems: {\n      '': 'initial',\n      horizontal: 'center',\n    },\n    gap: '2x',\n    '$label-width': '25x',\n  },\n});\n\nexport function useFormProps(props) {\n  const ctx = useContext(FormContext);\n\n  return { ...ctx, ...props };\n}\n\nconst formPropNames = new Set([\n  'action',\n  'autoComplete',\n  'encType',\n  'method',\n  'target',\n]);\n\nexport interface CubeFormProps<T extends FieldTypes = FieldTypes>\n  extends FormBaseProps,\n    BaseProps,\n    ContainerStyleProps,\n    Pick<\n      FormHTMLAttributes<HTMLFormElement>,\n      'action' | 'autoComplete' | 'encType' | 'method' | 'target'\n    > {\n  /** Form name */\n  name?: string;\n  /** Default field values */\n  defaultValues?: Partial<T>;\n  /** Trigger when any value of the Field is changed */\n  onValuesChange?: CubeFormInstance<T>['onValuesChange'];\n  /** Trigger on form submit and success */\n  onSubmit?: CubeFormInstance<T>['onSubmit'];\n  /** Trigger on form submit and failed */\n  onSubmitFailed?: (any?) => void | Promise<any>;\n  /** Set form instance created by useForm */\n  form?: CubeFormInstance<T, CubeFormData<T>>;\n  /** The size of the side area with labels. Only for `labelPosition=\"side\"` */\n  labelWidth?: Styles['width'];\n  orientation?: 'vertical' | 'horizontal';\n}\n\nfunction Form<T extends FieldTypes>(\n  props: CubeFormProps<T>,\n  ref: DOMRef<HTMLFormElement>,\n) {\n  props = useProviderProps(props);\n  let {\n    qa,\n    name,\n    children,\n    labelPosition,\n    orientation,\n    necessityIndicator,\n    isDisabled,\n    isReadOnly,\n    validationState,\n    labelStyles,\n    validateTrigger,\n    showValid,\n    defaultValues,\n    onValuesChange,\n    requiredMark = true,\n    form,\n    labelWidth,\n    onSubmit,\n    onSubmitFailed,\n    ...otherProps\n  } = props;\n  const defaultValuesRef = useRef(defaultValues);\n  const firstRunRef = useRef(true);\n  const isHorizontal = orientation === 'horizontal';\n\n  if (!orientation) {\n    orientation = 'vertical';\n  }\n\n  if (!labelPosition) {\n    labelPosition = isHorizontal ? 'side' : 'top';\n  }\n\n  if (!labelWidth) {\n    labelWidth = isHorizontal ? 'auto' : undefined;\n  }\n\n  ref = useCombinedRefs(ref);\n\n  let onSubmitCallback;\n\n  if ((onSubmit || onSubmitFailed) && !otherProps.action) {\n    onSubmitCallback = async (e) => {\n      if (e && e?.preventDefault) {\n        e && e?.preventDefault && e?.preventDefault();\n        e && e?.stopPropagation && e?.stopPropagation();\n\n        if (e.nativeEvent) {\n          const evt = e.nativeEvent;\n\n          if (\n            evt.submitter &&\n            evt.submitter.getAttribute('type') !== 'submit'\n          ) {\n            return;\n          }\n        }\n      }\n\n      if (!form || form.isSubmitting) return;\n\n      form.submitError = null;\n      form.setSubmitting(true);\n\n      try {\n        try {\n          await form.validateFields();\n        } catch (e) {\n          form?.setSubmitting(false);\n\n          return;\n        }\n\n        await timeout();\n        await onSubmit?.(form.getFormData());\n      } catch (e) {\n        await timeout();\n\n        // errors are shown\n        form.submitError = e as ReactNode;\n        // transfer errors to the callback\n        onSubmitFailed?.(e);\n\n        if (e instanceof Error) {\n          throw e;\n        }\n      } finally {\n        form?.setSubmitting(false);\n      }\n\n      // output data from form directly\n      // onSubmit(Object.fromEntries(new FormData(e.target).entries()));\n    };\n  }\n\n  [form] = useForm<T>(form, ref && ref.current, {\n    onSubmit: onSubmitCallback,\n    onValuesChange,\n  });\n\n  let styles = extractStyles(otherProps, CONTAINER_STYLES);\n\n  if (labelWidth) {\n    styles['$label-width'] = labelWidth;\n  }\n\n  let domRef = useDOMRef(ref as any);\n\n  let ctx = {\n    labelPosition,\n    labelStyles,\n    orientation,\n    necessityIndicator,\n    validateTrigger,\n    requiredMark,\n    showValid,\n    form,\n    submitError: form.submitError,\n    idPrefix: name,\n  };\n\n  if (firstRunRef.current && form) {\n    if (defaultValues) {\n      form.setInitialFieldsValue(defaultValues);\n      form.resetFields(undefined, true);\n      firstRunRef.current = false;\n    }\n  }\n\n  if (defaultValuesRef.current !== defaultValues) {\n    form?.setInitialFieldsValue(defaultValues ?? {});\n    defaultValuesRef.current = defaultValues;\n  }\n\n  return (\n    <FormElement\n      {...filterBaseProps(otherProps, { propNames: formPropNames })}\n      ref={domRef}\n      noValidate\n      qa={qa}\n      styles={styles}\n      mods={{\n        'has-sider': labelPosition === 'side',\n        'has-split': labelPosition === 'split',\n        horizontal: isHorizontal,\n      }}\n      onSubmit={onSubmitCallback}\n    >\n      <FormContext.Provider value={ctx}>\n        <Provider\n          insideForm={true}\n          isDisabled={isDisabled}\n          isReadOnly={isReadOnly}\n          validationState={validationState}\n        >\n          {children}\n        </Provider>\n      </FormContext.Provider>\n    </FormElement>\n  );\n}\n\n/**\n * Forms allow users to enter data that can be submitted while providing alignment and styling for form fields.\n */\nconst _Form = forwardRef(Form) as unknown as <T extends FieldTypes>(\n  props: CubeFormProps<T> & { ref?: DOMRef<HTMLFormElement> },\n) => ReactElement;\n\n(_Form as any).displayName = 'Form';\n\nexport { _Form as Form };\n"],"mappings":"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"}
+{"version":3,"file":"Form.js","names":[],"sources":["../../../../src/components/form/Form/Form.tsx"],"sourcesContent":["import { useDOMRef } from '@react-spectrum/utils';\nimport { DOMRef } from '@react-types/shared';\nimport {\n  BaseProps,\n  CONTAINER_STYLES,\n  ContainerStyleProps,\n  filterBaseProps,\n  Styles,\n  tasty,\n} from '@tenphi/tasty';\nimport {\n  createContext,\n  FormHTMLAttributes,\n  forwardRef,\n  ReactElement,\n  ReactNode,\n  useContext,\n  useRef,\n} from 'react';\n\nimport { Provider, useProviderProps } from '../../../provider';\nimport { FormBaseProps } from '../../../shared/index';\nimport { timeout } from '../../../utils/promise';\nimport { useCombinedRefs } from '../../../utils/react/index';\nimport { extractStyles } from '../../../utils/styles';\n\nimport { FieldTypes } from './types';\nimport { CubeFormData, CubeFormInstance, useForm } from './use-form';\n\nexport const FormContext = createContext({});\n\nconst FormElement = tasty({\n  as: 'form',\n  qa: 'Form',\n  styles: {\n    display: {\n      '': 'block',\n      horizontal: 'flex',\n    },\n    flow: {\n      '': 'column',\n      horizontal: 'row',\n    },\n    placeItems: {\n      '': 'initial',\n      horizontal: 'center',\n    },\n    gap: '2x',\n    '$label-width': '25x',\n  },\n});\n\nexport function useFormProps(props) {\n  const ctx = useContext(FormContext);\n\n  return { ...ctx, ...props };\n}\n\nconst formPropNames = new Set([\n  'action',\n  'autoComplete',\n  'encType',\n  'method',\n  'target',\n]);\n\nexport interface CubeFormProps<T extends FieldTypes = FieldTypes>\n  extends FormBaseProps,\n    BaseProps,\n    ContainerStyleProps,\n    Pick<\n      FormHTMLAttributes<HTMLFormElement>,\n      'action' | 'autoComplete' | 'encType' | 'method' | 'target'\n    > {\n  /** Form name */\n  name?: string;\n  /** Default field values */\n  defaultValues?: Partial<T>;\n  /** Trigger when any value of the Field is changed */\n  onValuesChange?: CubeFormInstance<T>['onValuesChange'];\n  /** Trigger on form submit and success */\n  onSubmit?: CubeFormInstance<T>['onSubmit'];\n  /** Trigger on form submit and failed */\n  onSubmitFailed?: (any?) => void | Promise<any>;\n  /** Set form instance created by useForm */\n  form?: CubeFormInstance<T, CubeFormData<T>>;\n  /** The size of the side area with labels. Only for `labelPosition=\"side\"` */\n  labelWidth?: Styles['width'];\n  orientation?: 'vertical' | 'horizontal';\n}\n\nfunction Form<T extends FieldTypes>(\n  props: CubeFormProps<T>,\n  ref: DOMRef<HTMLFormElement>,\n) {\n  props = useProviderProps(props);\n  let {\n    qa,\n    name,\n    children,\n    labelPosition,\n    orientation,\n    necessityIndicator,\n    isDisabled,\n    isReadOnly,\n    validationState,\n    labelStyles,\n    validateTrigger,\n    showValid,\n    defaultValues,\n    onValuesChange,\n    requiredMark = true,\n    form,\n    labelWidth,\n    onSubmit,\n    onSubmitFailed,\n    ...otherProps\n  } = props;\n  const defaultValuesRef = useRef(defaultValues);\n  const firstRunRef = useRef(true);\n  const isHorizontal = orientation === 'horizontal';\n\n  if (!orientation) {\n    orientation = 'vertical';\n  }\n\n  if (!labelPosition) {\n    labelPosition = isHorizontal ? 'side' : 'top';\n  }\n\n  if (!labelWidth) {\n    labelWidth = isHorizontal ? 'auto' : undefined;\n  }\n\n  ref = useCombinedRefs(ref);\n\n  let onSubmitCallback;\n\n  if ((onSubmit || onSubmitFailed) && !otherProps.action) {\n    onSubmitCallback = async (e) => {\n      if (e && e?.preventDefault) {\n        e && e?.preventDefault && e?.preventDefault();\n        e && e?.stopPropagation && e?.stopPropagation();\n\n        if (e.nativeEvent) {\n          const evt = e.nativeEvent;\n\n          if (\n            evt.submitter &&\n            evt.submitter.getAttribute('type') !== 'submit'\n          ) {\n            return;\n          }\n        }\n      }\n\n      if (!form || form.isSubmitting) return;\n\n      form.submitError = null;\n      form.setSubmitting(true);\n\n      try {\n        try {\n          await form.validateFields();\n        } catch (e) {\n          form?.setSubmitting(false);\n\n          return;\n        }\n\n        await timeout();\n        await onSubmit?.(form.getFormData());\n      } catch (e) {\n        await timeout();\n\n        // errors are shown\n        form.submitError = e as ReactNode;\n        // transfer errors to the callback\n        onSubmitFailed?.(e);\n\n        if (e instanceof Error) {\n          throw e;\n        }\n      } finally {\n        form?.setSubmitting(false);\n      }\n\n      // output data from form directly\n      // onSubmit(Object.fromEntries(new FormData(e.target).entries()));\n    };\n  }\n\n  [form] = useForm<T>(form, ref && ref.current, {\n    onSubmit: onSubmitCallback,\n    onValuesChange,\n  });\n\n  let styles = extractStyles(otherProps, CONTAINER_STYLES);\n\n  if (labelWidth) {\n    styles['$label-width'] = labelWidth;\n  }\n\n  let domRef = useDOMRef(ref as any);\n\n  let ctx = {\n    labelPosition,\n    labelStyles,\n    orientation,\n    necessityIndicator,\n    validateTrigger,\n    requiredMark,\n    showValid,\n    form,\n    submitError: form.submitError,\n    idPrefix: name,\n  };\n\n  if (firstRunRef.current && form) {\n    if (defaultValues) {\n      form.setInitialFieldsValue(defaultValues);\n      form.resetFields(undefined, true);\n      firstRunRef.current = false;\n    }\n  }\n\n  if (defaultValuesRef.current !== defaultValues) {\n    form?.setInitialFieldsValue(defaultValues ?? {});\n    defaultValuesRef.current = defaultValues;\n  }\n\n  return (\n    <FormElement\n      {...filterBaseProps(otherProps, { propNames: formPropNames })}\n      ref={domRef}\n      noValidate\n      qa={qa}\n      styles={styles}\n      mods={{\n        'has-sider': labelPosition === 'side',\n        'has-split': labelPosition === 'split',\n        horizontal: isHorizontal,\n      }}\n      onSubmit={onSubmitCallback}\n    >\n      <FormContext.Provider value={ctx}>\n        <Provider\n          insideForm={true}\n          isDisabled={isDisabled}\n          isReadOnly={isReadOnly}\n          validationState={validationState}\n        >\n          {children}\n        </Provider>\n      </FormContext.Provider>\n    </FormElement>\n  );\n}\n\n/**\n * Forms allow users to enter data that can be submitted while providing alignment and styling for form fields.\n */\nconst _Form = forwardRef(Form) as unknown as <T extends FieldTypes>(\n  props: CubeFormProps<T> & { ref?: DOMRef<HTMLFormElement> },\n) => ReactElement;\n\n(_Form as any).displayName = 'Form';\n\nexport { _Form as Form };\n"],"mappings":"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"}

package/dist/components/form/Form/ResetButton/ResetButton.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.121.6 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.122.0 | Cube Dev Team */
 import { mergeProps } from "../../../../utils/react/mergeProps.js";
 import { useEvent } from "../../../../_internal/hooks/use-event.js";
 import { useProviderProps } from "../../../../provider.js";

package/dist/components/form/Form/SubmitButton/SubmitButton.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.121.6 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.122.0 | Cube Dev Team */
 import { useProviderProps } from "../../../../provider.js";
 import { Button } from "../../../actions/Button/Button.js";
 import { useFormProps } from "../Form.js";

package/dist/components/form/Form/SubmitError.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.121.6 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.122.0 | Cube Dev Team */
 import { FormContext } from "./Form.js";
 import { Alert } from "../../content/Alert/Alert.js";
 import { forwardRef, isValidElement, useContext } from "react";

package/dist/components/form/Form/index.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.121.6 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.122.0 | Cube Dev Team */
 import { useForm } from "./use-form.js";
 import { FormContext, _Form, useFormProps } from "./Form.js";
 import { useField } from "./use-field/use-field.js";

package/dist/components/form/Form/use-field/use-field-props.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.121.6 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.122.0 | Cube Dev Team */
 import { mergeProps } from "../../../../utils/react/mergeProps.js";
 import { useEvent } from "../../../../_internal/hooks/use-event.js";
 import { warn } from "../../../../utils/warnings.js";

package/dist/components/form/Form/use-field/use-field.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.121.6 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.122.0 | Cube Dev Team */
 import { useEvent } from "../../../../_internal/hooks/use-event.js";
 import { useIsFirstRender } from "../../../../_internal/hooks/use-is-first-render.js";
 import { delayValidationRule } from "../validation.js";

package/dist/components/form/Form/use-form.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.121.6 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.122.0 | Cube Dev Team */
 import { applyRules } from "./validation.js";
 import { dotize } from "@tenphi/tasty";
 import { useRef, useState } from "react";

package/dist/components/form/Form/validation.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.121.6 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.122.0 | Cube Dev Team */
 import { validate } from "email-validator";
 import validUrl from "valid-url";
 

package/dist/components/form/Label.js

@@ -1,6 +1,7 @@
-/** @license MIT | @cube-dev/ui-kit v0.121.6 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.122.0 | Cube Dev Team */
+import { extractStyles } from "../../utils/styles.js";
 import { useProviderProps } from "../../provider.js";
-import { CONTAINER_STYLES, extractStyles, filterBaseProps, tasty } from "@tenphi/tasty";
+import { CONTAINER_STYLES, filterBaseProps, tasty } from "@tenphi/tasty";
 import { forwardRef } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { useDOMRef } from "@react-spectrum/utils";

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

@@ -1 +1 @@
-{"version":3,"file":"Label.js","names":[],"sources":["../../../src/components/form/Label.tsx"],"sourcesContent":["import { useDOMRef } from '@react-spectrum/utils';\nimport {\n  BaseProps,\n  CONTAINER_STYLES,\n  ContainerStyleProps,\n  extractStyles,\n  filterBaseProps,\n  Styles,\n  tasty,\n} from '@tenphi/tasty';\nimport { forwardRef } from 'react';\n\nimport { useProviderProps } from '../../provider';\nimport {\n  LabelPosition,\n  NecessityIndicator,\n  ValidationState,\n} from '../../shared/index';\n\nconst REQUIRED_ICON = (\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    version=\"1.1\"\n    x=\"0px\"\n    y=\"0px\"\n    viewBox=\"0 0 100 125\"\n    style={{\n      // @ts-ignore\n      enableBackground: 'new 0 0 100 100',\n      width: '.8em',\n      height: '.8em',\n      transform: 'rotate(-5deg)',\n    }}\n  >\n    <switch>\n      <g>\n        <polygon\n          fill=\"currentColor\"\n          points=\"97.5,47.5 90.5,26.1 61.3,35.6 61.3,4.8 38.7,4.8 38.7,35.6 9.5,26.1 2.5,47.5 31.8,57 13.7,82 31.9,95.2     50,70.3 68.1,95.2 86.3,82 68.2,57\"\n        />\n      </g>\n    </switch>\n  </svg>\n);\n\nconst INTL_MESSAGES = {\n  '(required)': '(required)',\n  '(optional)': '(optional)',\n};\n\nexport const INLINE_LABEL_STYLES: Styles = {\n  preset: 't3',\n  color: {\n    '': '#dark-02',\n    invalid: '#danger-text',\n  },\n} as const;\n\nexport const LABEL_STYLES: Styles = {\n  display: 'block',\n  preset: {\n    '': 't3m',\n    'size=small': 't4',\n  },\n  color: {\n    '': '#dark',\n    invalid: '#danger-text',\n  },\n  width: {\n    '': 'initial',\n    side: '($label-width, initial)',\n    split: 'initial',\n  },\n};\n\nconst LabelElement = tasty({\n  as: 'label',\n  qa: 'Label',\n  styles: LABEL_STYLES,\n});\n\nexport interface CubeLabelProps extends BaseProps, ContainerStyleProps {\n  labelPosition?: LabelPosition;\n  necessityIndicator?: NecessityIndicator;\n  isRequired?: boolean;\n  includeNecessityIndicatorInAccessibilityName?: boolean;\n  htmlFor?: string;\n  for?: string;\n  validationState?: ValidationState;\n  size?: 'medium' | 'small';\n}\n\nfunction Label(props: CubeLabelProps, ref) {\n  props = useProviderProps<CubeLabelProps>(props);\n\n  let {\n    as,\n    qa,\n    children,\n    labelPosition = 'top',\n    isRequired,\n    necessityIndicator = isRequired != null ? 'icon' : null,\n    includeNecessityIndicatorInAccessibilityName = false,\n    htmlFor,\n    isDisabled,\n    validationState,\n    size = 'medium',\n    for: labelFor,\n    ...otherProps\n  } = props;\n\n  let domRef = useDOMRef(ref);\n\n  const styles = extractStyles(otherProps, CONTAINER_STYLES);\n\n  let formatMessage = (message) => INTL_MESSAGES[message];\n  let necessityLabel = isRequired\n    ? formatMessage('(required)')\n    : formatMessage('(optional)');\n  let icon = (\n    <span\n      aria-label={\n        includeNecessityIndicatorInAccessibilityName\n          ? formatMessage('(required)')\n          : undefined\n      }\n    >\n      {REQUIRED_ICON}\n    </span>\n  );\n\n  return (\n    <LabelElement\n      {...filterBaseProps(otherProps)}\n      ref={domRef}\n      styles={styles}\n      htmlFor={labelFor || htmlFor}\n      data-size={size}\n      mods={{\n        side: labelPosition === 'side',\n        disabled: isDisabled,\n        invalid: validationState === 'invalid',\n        valid: validationState === 'valid',\n      }}\n    >\n      {typeof children !== 'string' ? (\n        children\n      ) : (\n        <>\n          {children}\n          {(necessityIndicator === 'label' ||\n            (necessityIndicator === 'icon' && isRequired)) &&\n            ' \\u200b'}\n          {/* necessityLabel is hidden to screen readers if the field is required because\n           * aria-required is set on the field in that case. That will already be announced,\n           * so no need to duplicate it here. If optional, we do want it to be announced here. */}\n          {necessityIndicator === 'label' && (\n            <span\n              aria-hidden={\n                !includeNecessityIndicatorInAccessibilityName\n                  ? isRequired\n                  : undefined\n              }\n            >\n              {necessityLabel}\n            </span>\n          )}\n          {necessityIndicator === 'icon' && isRequired && icon}\n        </>\n      )}\n    </LabelElement>\n  );\n}\n\nlet _Label = forwardRef(Label);\n\n_Label.displayName = 'Label';\n\nexport { _Label as Label };\n"],"mappings":";;;;;;;;AAmBA,MAAM,gBACJ,oBAAC;CACC,OAAM;CACN,SAAQ;CACR,GAAE;CACF,GAAE;CACF,SAAQ;CACR,OAAO;EAEL,kBAAkB;EAClB,OAAO;EACP,QAAQ;EACR,WAAW;EACZ;WAED,oBAAC,sBACC,oBAAC,iBACC,oBAAC;EACC,MAAK;EACL,QAAO;GACP,GACA,GACG;EACL;AAGR,MAAM,gBAAgB;CACpB,cAAc;CACd,cAAc;CACf;AAED,MAAa,sBAA8B;CACzC,QAAQ;CACR,OAAO;EACL,IAAI;EACJ,SAAS;EACV;CACF;AAED,MAAa,eAAuB;CAClC,SAAS;CACT,QAAQ;EACN,IAAI;EACJ,cAAc;EACf;CACD,OAAO;EACL,IAAI;EACJ,SAAS;EACV;CACD,OAAO;EACL,IAAI;EACJ,MAAM;EACN,OAAO;EACR;CACF;AAED,MAAM,eAAe,MAAM;CACzB,IAAI;CACJ,IAAI;CACJ,QAAQ;CACT,CAAC;AAaF,SAAS,MAAM,OAAuB,KAAK;AACzC,SAAQ,iBAAiC,MAAM;CAE/C,IAAI,EACF,IACA,IACA,UACA,gBAAgB,OAChB,YACA,qBAAqB,cAAc,OAAO,SAAS,MACnD,+CAA+C,OAC/C,SACA,YACA,iBACA,OAAO,UACP,KAAK,UACL,GAAG,eACD;CAEJ,IAAI,SAAS,UAAU,IAAI;CAE3B,MAAM,SAAS,cAAc,YAAY,iBAAiB;CAE1D,IAAI,iBAAiB,YAAY,cAAc;CAC/C,IAAI,iBAAiB,aACjB,cAAc,aAAa,GAC3B,cAAc,aAAa;CAC/B,IAAI,OACF,oBAAC;EACC,cACE,+CACI,cAAc,aAAa,GAC3B;YAGL;GACI;AAGT,QACE,oBAAC;EACC,GAAI,gBAAgB,WAAW;EAC/B,KAAK;EACG;EACR,SAAS,YAAY;EACrB,aAAW;EACX,MAAM;GACJ,MAAM,kBAAkB;GACxB,UAAU;GACV,SAAS,oBAAoB;GAC7B,OAAO,oBAAoB;GAC5B;YAEA,OAAO,aAAa,WACnB,WAEA;GACG;IACC,uBAAuB,WACtB,uBAAuB,UAAU,eAClC;GAID,uBAAuB,WACtB,oBAAC;IACC,eACE,CAAC,+CACG,aACA;cAGL;KACI;GAER,uBAAuB,UAAU,cAAc;MAC/C;GAEQ;;AAInB,IAAI,SAAS,WAAW,MAAM;AAE9B,OAAO,cAAc"}
+{"version":3,"file":"Label.js","names":[],"sources":["../../../src/components/form/Label.tsx"],"sourcesContent":["import { useDOMRef } from '@react-spectrum/utils';\nimport {\n  BaseProps,\n  CONTAINER_STYLES,\n  ContainerStyleProps,\n  filterBaseProps,\n  Styles,\n  tasty,\n} from '@tenphi/tasty';\nimport { forwardRef } from 'react';\n\nimport { useProviderProps } from '../../provider';\nimport {\n  LabelPosition,\n  NecessityIndicator,\n  ValidationState,\n} from '../../shared/index';\nimport { extractStyles } from '../../utils/styles';\n\nconst REQUIRED_ICON = (\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    version=\"1.1\"\n    x=\"0px\"\n    y=\"0px\"\n    viewBox=\"0 0 100 125\"\n    style={{\n      // @ts-ignore\n      enableBackground: 'new 0 0 100 100',\n      width: '.8em',\n      height: '.8em',\n      transform: 'rotate(-5deg)',\n    }}\n  >\n    <switch>\n      <g>\n        <polygon\n          fill=\"currentColor\"\n          points=\"97.5,47.5 90.5,26.1 61.3,35.6 61.3,4.8 38.7,4.8 38.7,35.6 9.5,26.1 2.5,47.5 31.8,57 13.7,82 31.9,95.2     50,70.3 68.1,95.2 86.3,82 68.2,57\"\n        />\n      </g>\n    </switch>\n  </svg>\n);\n\nconst INTL_MESSAGES = {\n  '(required)': '(required)',\n  '(optional)': '(optional)',\n};\n\nexport const INLINE_LABEL_STYLES: Styles = {\n  preset: 't3',\n  color: {\n    '': '#dark-02',\n    invalid: '#danger-text',\n  },\n} as const;\n\nexport const LABEL_STYLES: Styles = {\n  display: 'block',\n  preset: {\n    '': 't3m',\n    'size=small': 't4',\n  },\n  color: {\n    '': '#dark',\n    invalid: '#danger-text',\n  },\n  width: {\n    '': 'initial',\n    side: '($label-width, initial)',\n    split: 'initial',\n  },\n};\n\nconst LabelElement = tasty({\n  as: 'label',\n  qa: 'Label',\n  styles: LABEL_STYLES,\n});\n\nexport interface CubeLabelProps extends BaseProps, ContainerStyleProps {\n  labelPosition?: LabelPosition;\n  necessityIndicator?: NecessityIndicator;\n  isRequired?: boolean;\n  includeNecessityIndicatorInAccessibilityName?: boolean;\n  htmlFor?: string;\n  for?: string;\n  validationState?: ValidationState;\n  size?: 'medium' | 'small';\n}\n\nfunction Label(props: CubeLabelProps, ref) {\n  props = useProviderProps<CubeLabelProps>(props);\n\n  let {\n    as,\n    qa,\n    children,\n    labelPosition = 'top',\n    isRequired,\n    necessityIndicator = isRequired != null ? 'icon' : null,\n    includeNecessityIndicatorInAccessibilityName = false,\n    htmlFor,\n    isDisabled,\n    validationState,\n    size = 'medium',\n    for: labelFor,\n    ...otherProps\n  } = props;\n\n  let domRef = useDOMRef(ref);\n\n  const styles = extractStyles(otherProps, CONTAINER_STYLES);\n\n  let formatMessage = (message) => INTL_MESSAGES[message];\n  let necessityLabel = isRequired\n    ? formatMessage('(required)')\n    : formatMessage('(optional)');\n  let icon = (\n    <span\n      aria-label={\n        includeNecessityIndicatorInAccessibilityName\n          ? formatMessage('(required)')\n          : undefined\n      }\n    >\n      {REQUIRED_ICON}\n    </span>\n  );\n\n  return (\n    <LabelElement\n      {...filterBaseProps(otherProps)}\n      ref={domRef}\n      styles={styles}\n      htmlFor={labelFor || htmlFor}\n      data-size={size}\n      mods={{\n        side: labelPosition === 'side',\n        disabled: isDisabled,\n        invalid: validationState === 'invalid',\n        valid: validationState === 'valid',\n      }}\n    >\n      {typeof children !== 'string' ? (\n        children\n      ) : (\n        <>\n          {children}\n          {(necessityIndicator === 'label' ||\n            (necessityIndicator === 'icon' && isRequired)) &&\n            ' \\u200b'}\n          {/* necessityLabel is hidden to screen readers if the field is required because\n           * aria-required is set on the field in that case. That will already be announced,\n           * so no need to duplicate it here. If optional, we do want it to be announced here. */}\n          {necessityIndicator === 'label' && (\n            <span\n              aria-hidden={\n                !includeNecessityIndicatorInAccessibilityName\n                  ? isRequired\n                  : undefined\n              }\n            >\n              {necessityLabel}\n            </span>\n          )}\n          {necessityIndicator === 'icon' && isRequired && icon}\n        </>\n      )}\n    </LabelElement>\n  );\n}\n\nlet _Label = forwardRef(Label);\n\n_Label.displayName = 'Label';\n\nexport { _Label as Label };\n"],"mappings":";;;;;;;;;AAmBA,MAAM,gBACJ,oBAAC;CACC,OAAM;CACN,SAAQ;CACR,GAAE;CACF,GAAE;CACF,SAAQ;CACR,OAAO;EAEL,kBAAkB;EAClB,OAAO;EACP,QAAQ;EACR,WAAW;EACZ;WAED,oBAAC,sBACC,oBAAC,iBACC,oBAAC;EACC,MAAK;EACL,QAAO;GACP,GACA,GACG;EACL;AAGR,MAAM,gBAAgB;CACpB,cAAc;CACd,cAAc;CACf;AAED,MAAa,sBAA8B;CACzC,QAAQ;CACR,OAAO;EACL,IAAI;EACJ,SAAS;EACV;CACF;AAED,MAAa,eAAuB;CAClC,SAAS;CACT,QAAQ;EACN,IAAI;EACJ,cAAc;EACf;CACD,OAAO;EACL,IAAI;EACJ,SAAS;EACV;CACD,OAAO;EACL,IAAI;EACJ,MAAM;EACN,OAAO;EACR;CACF;AAED,MAAM,eAAe,MAAM;CACzB,IAAI;CACJ,IAAI;CACJ,QAAQ;CACT,CAAC;AAaF,SAAS,MAAM,OAAuB,KAAK;AACzC,SAAQ,iBAAiC,MAAM;CAE/C,IAAI,EACF,IACA,IACA,UACA,gBAAgB,OAChB,YACA,qBAAqB,cAAc,OAAO,SAAS,MACnD,+CAA+C,OAC/C,SACA,YACA,iBACA,OAAO,UACP,KAAK,UACL,GAAG,eACD;CAEJ,IAAI,SAAS,UAAU,IAAI;CAE3B,MAAM,SAAS,cAAc,YAAY,iBAAiB;CAE1D,IAAI,iBAAiB,YAAY,cAAc;CAC/C,IAAI,iBAAiB,aACjB,cAAc,aAAa,GAC3B,cAAc,aAAa;CAC/B,IAAI,OACF,oBAAC;EACC,cACE,+CACI,cAAc,aAAa,GAC3B;YAGL;GACI;AAGT,QACE,oBAAC;EACC,GAAI,gBAAgB,WAAW;EAC/B,KAAK;EACG;EACR,SAAS,YAAY;EACrB,aAAW;EACX,MAAM;GACJ,MAAM,kBAAkB;GACxB,UAAU;GACV,SAAS,oBAAoB;GAC7B,OAAO,oBAAoB;GAC5B;YAEA,OAAO,aAAa,WACnB,WAEA;GACG;IACC,uBAAuB,WACtB,uBAAuB,UAAU,eAClC;GAID,uBAAuB,WACtB,oBAAC;IACC,eACE,CAAC,+CACG,aACA;cAGL;KACI;GAER,uBAAuB,UAAU,cAAc;MAC/C;GAEQ;;AAInB,IAAI,SAAS,WAAW,MAAM;AAE9B,OAAO,cAAc"}

package/dist/components/form/wrapper.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.121.6 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.122.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/helpers/DisplayTransition/DisplayTransition.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.121.6 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.122.0 | Cube Dev Team */
 import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
 
 //#region src/components/helpers/DisplayTransition/DisplayTransition.tsx

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.121.6 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.122.0 | Cube Dev Team */
 import { DisplayTransition } from "../DisplayTransition/DisplayTransition.js";
 import { tasty } from "@tenphi/tasty";
 import { isValidElement, useCallback, useLayoutEffect, useRef, useState } from "react";

package/dist/components/layout/Flex.js

@@ -1,5 +1,6 @@
-/** @license MIT | @cube-dev/ui-kit v0.121.6 | Cube Dev Team */
-import { CONTAINER_STYLES, extractStyles, filterBaseProps, tasty } from "@tenphi/tasty";
+/** @license MIT | @cube-dev/ui-kit v0.122.0 | Cube Dev Team */
+import { extractStyles } from "../../utils/styles.js";
+import { CONTAINER_STYLES, filterBaseProps, tasty } from "@tenphi/tasty";
 import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
 

package/dist/components/layout/Flex.js.map

@@ -1 +1 @@
-{"version":3,"file":"Flex.js","names":[],"sources":["../../../src/components/layout/Flex.tsx"],"sourcesContent":["import {\n  AllBaseProps,\n  CONTAINER_STYLES,\n  ContainerStyleProps,\n  extractStyles,\n  filterBaseProps,\n  tasty,\n} from '@tenphi/tasty';\nimport { forwardRef } from 'react';\n\nconst FlexElement = tasty({\n  styles: {\n    display: 'flex',\n    flow: 'row',\n  },\n});\n\nexport interface CubeFlexProps extends AllBaseProps, ContainerStyleProps {}\n\nexport const Flex = forwardRef(function Flex(props: CubeFlexProps, ref) {\n  const styles = extractStyles(props, CONTAINER_STYLES);\n\n  return (\n    <FlexElement\n      {...filterBaseProps(props, { eventProps: true })}\n      ref={ref}\n      styles={styles}\n    />\n  );\n});\n"],"mappings":";;;;;;AAUA,MAAM,cAAc,MAAM,EACxB,QAAQ;CACN,SAAS;CACT,MAAM;CACP,EACF,CAAC;AAIF,MAAa,OAAO,WAAW,SAAS,KAAK,OAAsB,KAAK;CACtE,MAAM,SAAS,cAAc,OAAO,iBAAiB;AAErD,QACE,oBAAC;EACC,GAAI,gBAAgB,OAAO,EAAE,YAAY,MAAM,CAAC;EAC3C;EACG;GACR;EAEJ"}
+{"version":3,"file":"Flex.js","names":[],"sources":["../../../src/components/layout/Flex.tsx"],"sourcesContent":["import {\n  AllBaseProps,\n  CONTAINER_STYLES,\n  ContainerStyleProps,\n  filterBaseProps,\n  tasty,\n} from '@tenphi/tasty';\nimport { forwardRef } from 'react';\n\nimport { extractStyles } from '../../utils/styles';\n\nconst FlexElement = tasty({\n  styles: {\n    display: 'flex',\n    flow: 'row',\n  },\n});\n\nexport interface CubeFlexProps extends AllBaseProps, ContainerStyleProps {}\n\nexport const Flex = forwardRef(function Flex(props: CubeFlexProps, ref) {\n  const styles = extractStyles(props, CONTAINER_STYLES);\n\n  return (\n    <FlexElement\n      {...filterBaseProps(props, { eventProps: true })}\n      ref={ref}\n      styles={styles}\n    />\n  );\n});\n"],"mappings":";;;;;;;AAWA,MAAM,cAAc,MAAM,EACxB,QAAQ;CACN,SAAS;CACT,MAAM;CACP,EACF,CAAC;AAIF,MAAa,OAAO,WAAW,SAAS,KAAK,OAAsB,KAAK;CACtE,MAAM,SAAS,cAAc,OAAO,iBAAiB;AAErD,QACE,oBAAC;EACC,GAAI,gBAAgB,OAAO,EAAE,YAAY,MAAM,CAAC;EAC3C;EACG;GACR;EAEJ"}

package/dist/components/layout/Flow.js

@@ -1,5 +1,6 @@
-/** @license MIT | @cube-dev/ui-kit v0.121.6 | Cube Dev Team */
-import { CONTAINER_STYLES, extractStyles, filterBaseProps, tasty } from "@tenphi/tasty";
+/** @license MIT | @cube-dev/ui-kit v0.122.0 | Cube Dev Team */
+import { extractStyles } from "../../utils/styles.js";
+import { CONTAINER_STYLES, filterBaseProps, tasty } from "@tenphi/tasty";
 import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
 

package/dist/components/layout/Flow.js.map

@@ -1 +1 @@
-{"version":3,"file":"Flow.js","names":[],"sources":["../../../src/components/layout/Flow.tsx"],"sourcesContent":["import {\n  AllBaseProps,\n  CONTAINER_STYLES,\n  ContainerStyleProps,\n  extractStyles,\n  filterBaseProps,\n  tasty,\n} from '@tenphi/tasty';\nimport { forwardRef } from 'react';\n\nconst FlowElement = tasty({\n  styles: {\n    display: 'block',\n    flow: 'column',\n  },\n});\n\nconst STYLE_PROPS = CONTAINER_STYLES;\n\nexport interface CubeFlowProps extends AllBaseProps, ContainerStyleProps {}\n\nexport const Flow = forwardRef(function Flow(props: CubeFlowProps, ref) {\n  const styles = extractStyles(props, STYLE_PROPS);\n\n  return (\n    <FlowElement\n      {...filterBaseProps(props, { eventProps: true })}\n      ref={ref}\n      styles={styles}\n    />\n  );\n});\n"],"mappings":";;;;;;AAUA,MAAM,cAAc,MAAM,EACxB,QAAQ;CACN,SAAS;CACT,MAAM;CACP,EACF,CAAC;AAEF,MAAM,cAAc;AAIpB,MAAa,OAAO,WAAW,SAAS,KAAK,OAAsB,KAAK;CACtE,MAAM,SAAS,cAAc,OAAO,YAAY;AAEhD,QACE,oBAAC;EACC,GAAI,gBAAgB,OAAO,EAAE,YAAY,MAAM,CAAC;EAC3C;EACG;GACR;EAEJ"}
+{"version":3,"file":"Flow.js","names":[],"sources":["../../../src/components/layout/Flow.tsx"],"sourcesContent":["import {\n  AllBaseProps,\n  CONTAINER_STYLES,\n  ContainerStyleProps,\n  filterBaseProps,\n  tasty,\n} from '@tenphi/tasty';\nimport { forwardRef } from 'react';\n\nimport { extractStyles } from '../../utils/styles';\n\nconst FlowElement = tasty({\n  styles: {\n    display: 'block',\n    flow: 'column',\n  },\n});\n\nconst STYLE_PROPS = CONTAINER_STYLES;\n\nexport interface CubeFlowProps extends AllBaseProps, ContainerStyleProps {}\n\nexport const Flow = forwardRef(function Flow(props: CubeFlowProps, ref) {\n  const styles = extractStyles(props, STYLE_PROPS);\n\n  return (\n    <FlowElement\n      {...filterBaseProps(props, { eventProps: true })}\n      ref={ref}\n      styles={styles}\n    />\n  );\n});\n"],"mappings":";;;;;;;AAWA,MAAM,cAAc,MAAM,EACxB,QAAQ;CACN,SAAS;CACT,MAAM;CACP,EACF,CAAC;AAEF,MAAM,cAAc;AAIpB,MAAa,OAAO,WAAW,SAAS,KAAK,OAAsB,KAAK;CACtE,MAAM,SAAS,cAAc,OAAO,YAAY;AAEhD,QACE,oBAAC;EACC,GAAI,gBAAgB,OAAO,EAAE,YAAY,MAAM,CAAC;EAC3C;EACG;GACR;EAEJ"}

package/dist/components/layout/Grid.js

@@ -1,5 +1,6 @@
-/** @license MIT | @cube-dev/ui-kit v0.121.6 | Cube Dev Team */
-import { CONTAINER_STYLES, extractStyles, filterBaseProps, tasty } from "@tenphi/tasty";
+/** @license MIT | @cube-dev/ui-kit v0.122.0 | Cube Dev Team */
+import { extractStyles } from "../../utils/styles.js";
+import { CONTAINER_STYLES, filterBaseProps, tasty } from "@tenphi/tasty";
 import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
 

package/dist/components/layout/Grid.js.map

@@ -1 +1 @@
-{"version":3,"file":"Grid.js","names":[],"sources":["../../../src/components/layout/Grid.tsx"],"sourcesContent":["import {\n  AllBaseProps,\n  CONTAINER_STYLES,\n  ContainerStyleProps,\n  extractStyles,\n  filterBaseProps,\n  ShortGridStyles,\n  tasty,\n} from '@tenphi/tasty';\nimport { forwardRef } from 'react';\n\nconst GridElement = tasty({\n  styles: {\n    display: 'grid',\n    flow: 'row',\n  },\n});\n\nexport interface CubeGridProps\n  extends Omit<AllBaseProps, 'rows'>,\n    ContainerStyleProps,\n    ShortGridStyles {}\n\nconst PROP_MAP = {\n  template: 'gridTemplate',\n  columns: 'gridColumns',\n  rows: 'gridRows',\n  areas: 'gridAreas',\n} as const;\n\nexport const Grid = forwardRef(function Grid(props: CubeGridProps, ref) {\n  const styles = extractStyles(props, CONTAINER_STYLES, undefined, PROP_MAP);\n\n  return (\n    <GridElement\n      {...filterBaseProps(props, { eventProps: true })}\n      ref={ref}\n      styles={styles}\n    />\n  );\n});\n"],"mappings":";;;;;;AAWA,MAAM,cAAc,MAAM,EACxB,QAAQ;CACN,SAAS;CACT,MAAM;CACP,EACF,CAAC;AAOF,MAAM,WAAW;CACf,UAAU;CACV,SAAS;CACT,MAAM;CACN,OAAO;CACR;AAED,MAAa,OAAO,WAAW,SAAS,KAAK,OAAsB,KAAK;CACtE,MAAM,SAAS,cAAc,OAAO,kBAAkB,QAAW,SAAS;AAE1E,QACE,oBAAC;EACC,GAAI,gBAAgB,OAAO,EAAE,YAAY,MAAM,CAAC;EAC3C;EACG;GACR;EAEJ"}
+{"version":3,"file":"Grid.js","names":[],"sources":["../../../src/components/layout/Grid.tsx"],"sourcesContent":["import {\n  AllBaseProps,\n  CONTAINER_STYLES,\n  ContainerStyleProps,\n  filterBaseProps,\n  ShortGridStyles,\n  tasty,\n} from '@tenphi/tasty';\nimport { forwardRef } from 'react';\n\nimport { extractStyles } from '../../utils/styles';\n\nconst GridElement = tasty({\n  styles: {\n    display: 'grid',\n    flow: 'row',\n  },\n});\n\nexport interface CubeGridProps\n  extends Omit<AllBaseProps, 'rows'>,\n    ContainerStyleProps,\n    ShortGridStyles {}\n\nconst PROP_MAP = {\n  template: 'gridTemplate',\n  columns: 'gridColumns',\n  rows: 'gridRows',\n  areas: 'gridAreas',\n} as const;\n\nexport const Grid = forwardRef(function Grid(props: CubeGridProps, ref) {\n  const styles = extractStyles(props, CONTAINER_STYLES, undefined, PROP_MAP);\n\n  return (\n    <GridElement\n      {...filterBaseProps(props, { eventProps: true })}\n      ref={ref}\n      styles={styles}\n    />\n  );\n});\n"],"mappings":";;;;;;;AAYA,MAAM,cAAc,MAAM,EACxB,QAAQ;CACN,SAAS;CACT,MAAM;CACP,EACF,CAAC;AAOF,MAAM,WAAW;CACf,UAAU;CACV,SAAS;CACT,MAAM;CACN,OAAO;CACR;AAED,MAAa,OAAO,WAAW,SAAS,KAAK,OAAsB,KAAK;CACtE,MAAM,SAAS,cAAc,OAAO,kBAAkB,QAAW,SAAS;AAE1E,QACE,oBAAC;EACC,GAAI,gBAAgB,OAAO,EAAE,YAAY,MAAM,CAAC;EAC3C;EACG;GACR;EAEJ"}

package/dist/components/layout/Panel.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.121.6 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.122.0 | Cube Dev Team */
 import { BASE_STYLES, BLOCK_STYLES, COLOR_STYLES, DIMENSION_STYLES, OUTER_STYLES, tasty } from "@tenphi/tasty";
 import { forwardRef, useMemo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/components/layout/Prefix.js

@@ -1,7 +1,8 @@
-/** @license MIT | @cube-dev/ui-kit v0.121.6 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.122.0 | Cube Dev Team */
+import { extractStyles } from "../../utils/styles.js";
 import { useLayoutEffect as useLayoutEffect$1 } from "../../utils/react/useLayoutEffect.js";
 import { useCombinedRefs } from "../../utils/react/useCombinedRefs.js";
-import { CONTAINER_STYLES, extractStyles, filterBaseProps, parseStyle, tasty } from "@tenphi/tasty";
+import { CONTAINER_STYLES, filterBaseProps, parseStyle, tasty } from "@tenphi/tasty";
 import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
 

package/dist/components/layout/Prefix.js.map

@@ -1 +1 @@
-{"version":3,"file":"Prefix.js","names":[],"sources":["../../../src/components/layout/Prefix.tsx"],"sourcesContent":["import {\n  BaseProps,\n  CONTAINER_STYLES,\n  ContainerStyleProps,\n  extractStyles,\n  filterBaseProps,\n  parseStyle,\n  tasty,\n} from '@tenphi/tasty';\nimport { CSSProperties, forwardRef } from 'react';\n\nimport { useCombinedRefs, useLayoutEffect } from '../../utils/react';\n\nconst PrefixElement = tasty({\n  element: 'Prefix',\n  styles: {\n    position: 'absolute',\n    display: 'grid',\n    placeContent: 'stretch',\n    placeItems: 'center',\n    flow: 'column',\n    gap: 0,\n    left: '$prefix-gap',\n    top: '$prefix-gap',\n    bottom: '$prefix-gap',\n    color: '#dark-02',\n    height: '(100% - (2 * $prefix-gap))',\n  },\n});\n\nexport interface CubePrefixProps extends BaseProps, ContainerStyleProps {\n  onWidthChange?: Function;\n  outerGap?: CSSProperties['gap'];\n}\n\nexport const Prefix = forwardRef<HTMLDivElement, CubePrefixProps>(\n  function Prefix(allProps, outerRef) {\n    let { onWidthChange, outerGap = '1bw', children, ...props } = allProps;\n\n    const styles = extractStyles(props, CONTAINER_STYLES);\n    const ref = useCombinedRefs(outerRef);\n\n    useLayoutEffect(() => {\n      if (ref?.current && onWidthChange) {\n        onWidthChange(ref.current.offsetWidth);\n      }\n    }, [children, ref, onWidthChange]);\n\n    return (\n      <PrefixElement\n        {...filterBaseProps(props, { eventProps: true })}\n        ref={ref}\n        styles={styles}\n        style={{\n          // @ts-ignore\n          '--prefix-gap': parseStyle(outerGap).output,\n        }}\n      >\n        {children}\n      </PrefixElement>\n    );\n  },\n);\n"],"mappings":";;;;;;;;AAaA,MAAM,gBAAgB,MAAM;CAC1B,SAAS;CACT,QAAQ;EACN,UAAU;EACV,SAAS;EACT,cAAc;EACd,YAAY;EACZ,MAAM;EACN,KAAK;EACL,MAAM;EACN,KAAK;EACL,QAAQ;EACR,OAAO;EACP,QAAQ;EACT;CACF,CAAC;AAOF,MAAa,SAAS,WACpB,SAAS,OAAO,UAAU,UAAU;CAClC,IAAI,EAAE,eAAe,WAAW,OAAO,UAAU,GAAG,UAAU;CAE9D,MAAM,SAAS,cAAc,OAAO,iBAAiB;CACrD,MAAM,MAAM,gBAAgB,SAAS;AAErC,yBAAsB;AACpB,MAAI,KAAK,WAAW,cAClB,eAAc,IAAI,QAAQ,YAAY;IAEvC;EAAC;EAAU;EAAK;EAAc,CAAC;AAElC,QACE,oBAAC;EACC,GAAI,gBAAgB,OAAO,EAAE,YAAY,MAAM,CAAC;EAC3C;EACG;EACR,OAAO,EAEL,gBAAgB,WAAW,SAAS,CAAC,QACtC;EAEA;GACa;EAGrB"}
+{"version":3,"file":"Prefix.js","names":[],"sources":["../../../src/components/layout/Prefix.tsx"],"sourcesContent":["import {\n  BaseProps,\n  CONTAINER_STYLES,\n  ContainerStyleProps,\n  filterBaseProps,\n  parseStyle,\n  tasty,\n} from '@tenphi/tasty';\nimport { CSSProperties, forwardRef } from 'react';\n\nimport { useCombinedRefs, useLayoutEffect } from '../../utils/react';\nimport { extractStyles } from '../../utils/styles';\n\nconst PrefixElement = tasty({\n  element: 'Prefix',\n  styles: {\n    position: 'absolute',\n    display: 'grid',\n    placeContent: 'stretch',\n    placeItems: 'center',\n    flow: 'column',\n    gap: 0,\n    left: '$prefix-gap',\n    top: '$prefix-gap',\n    bottom: '$prefix-gap',\n    color: '#dark-02',\n    height: '(100% - (2 * $prefix-gap))',\n  },\n});\n\nexport interface CubePrefixProps extends BaseProps, ContainerStyleProps {\n  onWidthChange?: Function;\n  outerGap?: CSSProperties['gap'];\n}\n\nexport const Prefix = forwardRef<HTMLDivElement, CubePrefixProps>(\n  function Prefix(allProps, outerRef) {\n    let { onWidthChange, outerGap = '1bw', children, ...props } = allProps;\n\n    const styles = extractStyles(props, CONTAINER_STYLES);\n    const ref = useCombinedRefs(outerRef);\n\n    useLayoutEffect(() => {\n      if (ref?.current && onWidthChange) {\n        onWidthChange(ref.current.offsetWidth);\n      }\n    }, [children, ref, onWidthChange]);\n\n    return (\n      <PrefixElement\n        {...filterBaseProps(props, { eventProps: true })}\n        ref={ref}\n        styles={styles}\n        style={{\n          // @ts-ignore\n          '--prefix-gap': parseStyle(outerGap).output,\n        }}\n      >\n        {children}\n      </PrefixElement>\n    );\n  },\n);\n"],"mappings":";;;;;;;;;AAaA,MAAM,gBAAgB,MAAM;CAC1B,SAAS;CACT,QAAQ;EACN,UAAU;EACV,SAAS;EACT,cAAc;EACd,YAAY;EACZ,MAAM;EACN,KAAK;EACL,MAAM;EACN,KAAK;EACL,QAAQ;EACR,OAAO;EACP,QAAQ;EACT;CACF,CAAC;AAOF,MAAa,SAAS,WACpB,SAAS,OAAO,UAAU,UAAU;CAClC,IAAI,EAAE,eAAe,WAAW,OAAO,UAAU,GAAG,UAAU;CAE9D,MAAM,SAAS,cAAc,OAAO,iBAAiB;CACrD,MAAM,MAAM,gBAAgB,SAAS;AAErC,yBAAsB;AACpB,MAAI,KAAK,WAAW,cAClB,eAAc,IAAI,QAAQ,YAAY;IAEvC;EAAC;EAAU;EAAK;EAAc,CAAC;AAElC,QACE,oBAAC;EACC,GAAI,gBAAgB,OAAO,EAAE,YAAY,MAAM,CAAC;EAC3C;EACG;EACR,OAAO,EAEL,gBAAgB,WAAW,SAAS,CAAC,QACtC;EAEA;GACa;EAGrB"}

package/dist/components/layout/ResizablePanel.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.121.6 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.122.0 | Cube Dev Team */
 import { mergeProps as mergeProps$1 } from "../../utils/react/mergeProps.js";
 import { useCombinedRefs } from "../../utils/react/useCombinedRefs.js";
 import { useEvent } from "../../_internal/hooks/use-event.js";

package/dist/components/layout/Space.js

@@ -1,5 +1,6 @@
-/** @license MIT | @cube-dev/ui-kit v0.121.6 | Cube Dev Team */
-import { CONTAINER_STYLES, extractStyles, filterBaseProps, tasty } from "@tenphi/tasty";
+/** @license MIT | @cube-dev/ui-kit v0.122.0 | Cube Dev Team */
+import { extractStyles } from "../../utils/styles.js";
+import { CONTAINER_STYLES, filterBaseProps, tasty } from "@tenphi/tasty";
 import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
 

package/dist/components/layout/Space.js.map

@@ -1 +1 @@
-{"version":3,"file":"Space.js","names":[],"sources":["../../../src/components/layout/Space.tsx"],"sourcesContent":["import {\n  AllBaseProps,\n  CONTAINER_STYLES,\n  ContainerStyleProps,\n  extractStyles,\n  filterBaseProps,\n  tasty,\n} from '@tenphi/tasty';\nimport { forwardRef } from 'react';\n\nconst SpaceElement = tasty({\n  styles: {\n    display: 'flex',\n    gap: true,\n    flow: {\n      '': 'row',\n      vertical: 'column',\n    },\n    placeItems: {\n      '': 'center stretch',\n      vertical: 'stretch',\n    },\n  },\n});\n\nexport interface CubeSpaceProps extends AllBaseProps, ContainerStyleProps {\n  direction?: 'vertical' | 'horizontal';\n}\n\nexport const Space = forwardRef(function Space(props: CubeSpaceProps, ref) {\n  const { mods, direction, ...otherProps } = props;\n  const styles = extractStyles(otherProps, CONTAINER_STYLES);\n\n  return (\n    <SpaceElement\n      {...filterBaseProps(otherProps, { eventProps: true })}\n      ref={ref}\n      mods={{\n        vertical:\n          direction === 'vertical' ||\n          otherProps.flow === 'column' ||\n          styles.flow === 'column',\n        ...mods,\n      }}\n      styles={styles}\n    />\n  );\n});\n"],"mappings":";;;;;;AAUA,MAAM,eAAe,MAAM,EACzB,QAAQ;CACN,SAAS;CACT,KAAK;CACL,MAAM;EACJ,IAAI;EACJ,UAAU;EACX;CACD,YAAY;EACV,IAAI;EACJ,UAAU;EACX;CACF,EACF,CAAC;AAMF,MAAa,QAAQ,WAAW,SAAS,MAAM,OAAuB,KAAK;CACzE,MAAM,EAAE,MAAM,WAAW,GAAG,eAAe;CAC3C,MAAM,SAAS,cAAc,YAAY,iBAAiB;AAE1D,QACE,oBAAC;EACC,GAAI,gBAAgB,YAAY,EAAE,YAAY,MAAM,CAAC;EAChD;EACL,MAAM;GACJ,UACE,cAAc,cACd,WAAW,SAAS,YACpB,OAAO,SAAS;GAClB,GAAG;GACJ;EACO;GACR;EAEJ"}
+{"version":3,"file":"Space.js","names":[],"sources":["../../../src/components/layout/Space.tsx"],"sourcesContent":["import {\n  AllBaseProps,\n  CONTAINER_STYLES,\n  ContainerStyleProps,\n  filterBaseProps,\n  tasty,\n} from '@tenphi/tasty';\nimport { forwardRef } from 'react';\n\nimport { extractStyles } from '../../utils/styles';\n\nconst SpaceElement = tasty({\n  styles: {\n    display: 'flex',\n    gap: true,\n    flow: {\n      '': 'row',\n      vertical: 'column',\n    },\n    placeItems: {\n      '': 'center stretch',\n      vertical: 'stretch',\n    },\n  },\n});\n\nexport interface CubeSpaceProps extends AllBaseProps, ContainerStyleProps {\n  direction?: 'vertical' | 'horizontal';\n}\n\nexport const Space = forwardRef(function Space(props: CubeSpaceProps, ref) {\n  const { mods, direction, ...otherProps } = props;\n  const styles = extractStyles(otherProps, CONTAINER_STYLES);\n\n  return (\n    <SpaceElement\n      {...filterBaseProps(otherProps, { eventProps: true })}\n      ref={ref}\n      mods={{\n        vertical:\n          direction === 'vertical' ||\n          otherProps.flow === 'column' ||\n          styles.flow === 'column',\n        ...mods,\n      }}\n      styles={styles}\n    />\n  );\n});\n"],"mappings":";;;;;;;AAWA,MAAM,eAAe,MAAM,EACzB,QAAQ;CACN,SAAS;CACT,KAAK;CACL,MAAM;EACJ,IAAI;EACJ,UAAU;EACX;CACD,YAAY;EACV,IAAI;EACJ,UAAU;EACX;CACF,EACF,CAAC;AAMF,MAAa,QAAQ,WAAW,SAAS,MAAM,OAAuB,KAAK;CACzE,MAAM,EAAE,MAAM,WAAW,GAAG,eAAe;CAC3C,MAAM,SAAS,cAAc,YAAY,iBAAiB;AAE1D,QACE,oBAAC;EACC,GAAI,gBAAgB,YAAY,EAAE,YAAY,MAAM,CAAC;EAChD;EACL,MAAM;GACJ,UACE,cAAc,cACd,WAAW,SAAS,YACpB,OAAO,SAAS;GAClB,GAAG;GACJ;EACO;GACR;EAEJ"}

package/dist/components/layout/Suffix.js

@@ -1,6 +1,7 @@
-/** @license MIT | @cube-dev/ui-kit v0.121.6 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.122.0 | Cube Dev Team */
+import { extractStyles } from "../../utils/styles.js";
 import { useCombinedRefs } from "../../utils/react/useCombinedRefs.js";
-import { CONTAINER_STYLES, extractStyles, filterBaseProps, parseStyle, tasty } from "@tenphi/tasty";
+import { CONTAINER_STYLES, filterBaseProps, parseStyle, tasty } from "@tenphi/tasty";
 import { forwardRef, useEffect } from "react";
 import { jsx } from "react/jsx-runtime";
 

package/dist/components/layout/Suffix.js.map

@@ -1 +1 @@
-{"version":3,"file":"Suffix.js","names":[],"sources":["../../../src/components/layout/Suffix.tsx"],"sourcesContent":["import {\n  BaseProps,\n  CONTAINER_STYLES,\n  ContainerStyleProps,\n  extractStyles,\n  filterBaseProps,\n  parseStyle,\n  tasty,\n} from '@tenphi/tasty';\nimport { CSSProperties, forwardRef, useEffect } from 'react';\n\nimport { useCombinedRefs } from '../../utils/react';\n\nconst SuffixElement = tasty({\n  element: 'Suffix',\n  styles: {\n    position: 'absolute',\n    display: 'grid',\n    placeContent: 'stretch',\n    placeItems: 'center',\n    flow: 'column',\n    gap: 0,\n    right: '$suffix-gap',\n    top: '$suffix-gap',\n    bottom: '$suffix-gap',\n    color: '#dark-02',\n    height: '(100% - (2 * $suffix-gap))',\n  },\n});\n\nexport interface CubeSuffixProps extends BaseProps, ContainerStyleProps {\n  onWidthChange?: Function;\n  outerGap?: CSSProperties['gap'];\n}\n\nexport const Suffix = forwardRef<HTMLDivElement, CubeSuffixProps>(\n  function Suffix(allProps, outerRef) {\n    let { onWidthChange, outerGap = '1bw', children, ...props } = allProps;\n    const styles = extractStyles(props, CONTAINER_STYLES);\n    const ref = useCombinedRefs(outerRef);\n\n    useEffect(() => {\n      if (ref && ref.current && onWidthChange) {\n        onWidthChange(ref.current.offsetWidth);\n      }\n    }, [children, ref, onWidthChange]);\n\n    return (\n      <SuffixElement\n        {...filterBaseProps(props, { eventProps: true })}\n        ref={ref}\n        styles={styles}\n        style={{\n          '--suffix-gap': parseStyle(outerGap).output,\n        }}\n      >\n        {children}\n      </SuffixElement>\n    );\n  },\n);\n"],"mappings":";;;;;;;AAaA,MAAM,gBAAgB,MAAM;CAC1B,SAAS;CACT,QAAQ;EACN,UAAU;EACV,SAAS;EACT,cAAc;EACd,YAAY;EACZ,MAAM;EACN,KAAK;EACL,OAAO;EACP,KAAK;EACL,QAAQ;EACR,OAAO;EACP,QAAQ;EACT;CACF,CAAC;AAOF,MAAa,SAAS,WACpB,SAAS,OAAO,UAAU,UAAU;CAClC,IAAI,EAAE,eAAe,WAAW,OAAO,UAAU,GAAG,UAAU;CAC9D,MAAM,SAAS,cAAc,OAAO,iBAAiB;CACrD,MAAM,MAAM,gBAAgB,SAAS;AAErC,iBAAgB;AACd,MAAI,OAAO,IAAI,WAAW,cACxB,eAAc,IAAI,QAAQ,YAAY;IAEvC;EAAC;EAAU;EAAK;EAAc,CAAC;AAElC,QACE,oBAAC;EACC,GAAI,gBAAgB,OAAO,EAAE,YAAY,MAAM,CAAC;EAC3C;EACG;EACR,OAAO,EACL,gBAAgB,WAAW,SAAS,CAAC,QACtC;EAEA;GACa;EAGrB"}
+{"version":3,"file":"Suffix.js","names":[],"sources":["../../../src/components/layout/Suffix.tsx"],"sourcesContent":["import {\n  BaseProps,\n  CONTAINER_STYLES,\n  ContainerStyleProps,\n  filterBaseProps,\n  parseStyle,\n  tasty,\n} from '@tenphi/tasty';\nimport { CSSProperties, forwardRef, useEffect } from 'react';\n\nimport { useCombinedRefs } from '../../utils/react';\nimport { extractStyles } from '../../utils/styles';\n\nconst SuffixElement = tasty({\n  element: 'Suffix',\n  styles: {\n    position: 'absolute',\n    display: 'grid',\n    placeContent: 'stretch',\n    placeItems: 'center',\n    flow: 'column',\n    gap: 0,\n    right: '$suffix-gap',\n    top: '$suffix-gap',\n    bottom: '$suffix-gap',\n    color: '#dark-02',\n    height: '(100% - (2 * $suffix-gap))',\n  },\n});\n\nexport interface CubeSuffixProps extends BaseProps, ContainerStyleProps {\n  onWidthChange?: Function;\n  outerGap?: CSSProperties['gap'];\n}\n\nexport const Suffix = forwardRef<HTMLDivElement, CubeSuffixProps>(\n  function Suffix(allProps, outerRef) {\n    let { onWidthChange, outerGap = '1bw', children, ...props } = allProps;\n    const styles = extractStyles(props, CONTAINER_STYLES);\n    const ref = useCombinedRefs(outerRef);\n\n    useEffect(() => {\n      if (ref && ref.current && onWidthChange) {\n        onWidthChange(ref.current.offsetWidth);\n      }\n    }, [children, ref, onWidthChange]);\n\n    return (\n      <SuffixElement\n        {...filterBaseProps(props, { eventProps: true })}\n        ref={ref}\n        styles={styles}\n        style={{\n          '--suffix-gap': parseStyle(outerGap).output,\n        }}\n      >\n        {children}\n      </SuffixElement>\n    );\n  },\n);\n"],"mappings":";;;;;;;;AAaA,MAAM,gBAAgB,MAAM;CAC1B,SAAS;CACT,QAAQ;EACN,UAAU;EACV,SAAS;EACT,cAAc;EACd,YAAY;EACZ,MAAM;EACN,KAAK;EACL,OAAO;EACP,KAAK;EACL,QAAQ;EACR,OAAO;EACP,QAAQ;EACT;CACF,CAAC;AAOF,MAAa,SAAS,WACpB,SAAS,OAAO,UAAU,UAAU;CAClC,IAAI,EAAE,eAAe,WAAW,OAAO,UAAU,GAAG,UAAU;CAC9D,MAAM,SAAS,cAAc,OAAO,iBAAiB;CACrD,MAAM,MAAM,gBAAgB,SAAS;AAErC,iBAAgB;AACd,MAAI,OAAO,IAAI,WAAW,cACxB,eAAc,IAAI,QAAQ,YAAY;IAEvC;EAAC;EAAU;EAAK;EAAc,CAAC;AAElC,QACE,oBAAC;EACC,GAAI,gBAAgB,OAAO,EAAE,YAAY,MAAM,CAAC;EAC3C;EACG;EACR,OAAO,EACL,gBAAgB,WAAW,SAAS,CAAC,QACtC;EAEA;GACa;EAGrB"}

package/dist/components/navigation/Tabs/DraggableTabList.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.121.6 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.122.0 | Cube Dev Team */
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { useCallback, useMemo } from "react";
 import { ListDropTargetDelegate, ListKeyboardDelegate, useDraggableCollection, useDroppableCollection } from "react-aria";

package/dist/components/navigation/Tabs/EditableTitle.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.121.6 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.122.0 | Cube Dev Team */
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { EditableTitleInputElement, HiddenMeasure } from "./styled.js";
 import { useLayoutEffect, useRef, useState } from "react";

package/dist/components/navigation/Tabs/TabButton.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.121.6 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.122.0 | Cube Dev Team */
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { ItemActionProvider } from "../../actions/ItemActionContext.js";
@@ -120,7 +120,9 @@ function TabButton({ item, tabData, isLastTab }) {
 	};
 	const effectiveContextMenu = tabData.contextMenu ?? parentContextMenu ?? false;
 	const effectiveType = tabData.type ?? type ?? "default";
-	const showDeleteButton = isDeletable && isMenuEmpty(effectiveMenu);
+	const contextMenuEnabled = effectiveContextMenu === true || effectiveContextMenu === "context-only";
+	const contextMenuOnly = effectiveContextMenu === "context-only";
+	const showDeleteButton = isDeletable && (isMenuEmpty(effectiveMenu) || contextMenuOnly);
 	const processedMenu = effectiveMenu && !isMenuEmpty(effectiveMenu) ? processMenuItems(effectiveMenu, effectiveIsEditable, isDeletable) : null;
 	const itemKeyStr = String(item.key);
 	const handleDelete = useEvent(() => {
@@ -155,6 +157,16 @@ function TabButton({ item, tabData, isLastTab }) {
 		tabData.onAction?.(normalizedAction);
 		parentOnAction?.(normalizedAction, itemKeyStr);
 	});
+	const menuElement = processedMenu ? /* @__PURE__ */ jsx(__Menu, {
+		...effectiveMenuProps,
+		onAction: handleMenuAction,
+		children: processedMenu
+	}) : null;
+	const contextMenu = useContextMenu(__Menu, { placement: "bottom start" }, {
+		...effectiveMenuProps,
+		onAction: handleMenuAction,
+		children: processedMenu
+	});
 	const handleKeyDown = useEvent((e) => {
 		if (suppressFocusVisible) setSuppressFocusVisible(false);
 		if (e.key === "F2" && effectiveIsEditable && !isDisabled) {
@@ -165,7 +177,8 @@ function TabButton({ item, tabData, isLastTab }) {
 		if (e.key === "F10" && e.shiftKey && processedMenu) {
 			e.preventDefault();
 			e.stopPropagation();
-			setIsMenuOpen(true);
+			if (contextMenuOnly) contextMenu.open();
+			else setIsMenuOpen(true);
 		}
 		if ((e.key === "Delete" || e.key === "Backspace") && isDeletable && !isEditing) {
 			e.preventDefault();
@@ -201,17 +214,7 @@ function TabButton({ item, tabData, isLastTab }) {
 			inline: "nearest"
 		});
 	}, [isActive]);
-	const menuElement = processedMenu ? /* @__PURE__ */ jsx(__Menu, {
-		...effectiveMenuProps,
-		onAction: handleMenuAction,
-		children: processedMenu
-	}) : null;
-	const contextMenu = useContextMenu(__Menu, { placement: "bottom start" }, {
-		...effectiveMenuProps,
-		onAction: handleMenuAction,
-		children: processedMenu
-	});
-	const menuAction = menuElement ? /* @__PURE__ */ jsxs(_MenuTrigger, {
+	const menuAction = menuElement && !contextMenuOnly ? /* @__PURE__ */ jsxs(_MenuTrigger, {
 		isOpen: isMenuOpen,
 		onOpenChange: setIsMenuOpen,
 		children: [/* @__PURE__ */ jsx(ItemAction, {
@@ -249,7 +252,7 @@ function TabButton({ item, tabData, isLastTab }) {
 		onCancel: handleCancelEditing
 	}) : tabData.title;
 	const { title: _title, content: _content, key: _key, isDisabled: _isDisabled, prerender: _prerender, keepMounted: _keepMounted, size: _size, type: _type, actions: _actions, autoHideActions: _autoHideActions, isEditable: _isEditable, onTitleChange: _onTitleChange, menu: _menu, menuTriggerProps: _menuTriggerProps, menuProps: _menuProps, contextMenu: _contextMenu, onAction: _onAction, qa, qaVal, styles, ...itemStyleProps } = tabData;
-	const effectiveContainerRef = effectiveContextMenu && processedMenu ? contextMenu.targetRef : containerRef;
+	const effectiveContainerRef = contextMenuEnabled && processedMenu ? contextMenu.targetRef : containerRef;
 	const ariaProps = processedMenu ? { "aria-haspopup": "menu" } : {};
 	const containerMods = {
 		...mods,
@@ -302,7 +305,7 @@ function TabButton({ item, tabData, isLastTab }) {
 					children: actions
 				})
 			}),
-			effectiveContextMenu && processedMenu && contextMenu.rendered,
+			contextMenuEnabled && processedMenu && contextMenu.rendered,
 			isDraggable && dropState && isLastTab && /* @__PURE__ */ jsx(TabDropIndicator, {
 				target: {
 					type: "item",

package/dist/components/navigation/Tabs/TabButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabButton.js","names":["Menu","MenuTrigger","mergeProps"],"sources":["../../../../src/components/navigation/Tabs/TabButton.tsx"],"sourcesContent":["import {\n  Children,\n  cloneElement,\n  isValidElement,\n  ReactElement,\n  ReactNode,\n  useEffect,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport {\n  useDraggableItem,\n  useFocus,\n  useFocusVisible,\n  useHover,\n  useTab,\n} from 'react-aria';\n\nimport { useEvent } from '../../../_internal/hooks';\nimport { CloseIcon, MoreIcon } from '../../../icons';\nimport { mergeProps } from '../../../utils/react';\nimport { CubeItemActionProps, ItemAction } from '../../actions/ItemAction';\nimport { ItemActionProvider } from '../../actions/ItemActionContext';\nimport { CubeMenuProps, Menu, MenuTrigger } from '../../actions/Menu';\nimport { useContextMenu } from '../../actions/use-context-menu';\n\nimport { EditableTitle } from './EditableTitle';\nimport { TabContainer, TabElement } from './styled';\nimport { TabDropIndicator } from './TabDropIndicator';\nimport { useTabsContext } from './TabsContext';\nimport { ParsedTab, RADIO_SIZE_MAP } from './types';\n\nimport type { Key, Node } from '@react-types/shared';\nimport type { KeyboardEvent, MouseEvent, PointerEvent } from 'react';\nimport type { DraggableCollectionState } from 'react-stately';\n\n// =============================================================================\n// Event handlers for actions to prevent event propagation to tab button\n// =============================================================================\n\nconst ACTIONS_EVENT_HANDLERS = {\n  onClick: (e: MouseEvent) => e.stopPropagation(),\n  onPointerDown: (e: PointerEvent) => e.stopPropagation(),\n  onPointerUp: (e: PointerEvent) => e.stopPropagation(),\n  onMouseDown: (e: MouseEvent) => e.stopPropagation(),\n  onMouseUp: (e: MouseEvent) => e.stopPropagation(),\n  onKeyDown: (e: KeyboardEvent) => {\n    if (e.key === 'Enter' || e.key === ' ') {\n      e.stopPropagation();\n    }\n  },\n};\n\n// =============================================================================\n// Menu Processing Utilities\n// =============================================================================\n\ninterface MenuItemLikeProps {\n  children?: ReactNode;\n  isDisabled?: boolean;\n  theme?: string;\n}\n\n/**\n * Extracts the raw key from a React element, stripping the \".$\" prefix\n * that React adds via Children.map/toArray.\n */\nfunction getRawKey(element: ReactElement): string | null {\n  if (element.key == null) return null;\n  const keyStr = String(element.key);\n  return keyStr.startsWith('.$') ? keyStr.slice(2) : keyStr;\n}\n\n/**\n * Process menu items for predefined action keys (rename, delete).\n * Auto-adds labels and disables items when requirements aren't met.\n */\nfunction processMenuItems(\n  children: ReactNode,\n  effectiveIsEditable: boolean,\n  isDeletable: boolean,\n): ReactNode {\n  return Children.toArray(children).map((child) => {\n    if (!isValidElement(child)) return child;\n\n    const childKey = getRawKey(child);\n    const childProps = child.props as MenuItemLikeProps;\n\n    // Handle predefined action keys\n    if (childKey === 'rename') {\n      return cloneElement(child as ReactElement<MenuItemLikeProps>, {\n        children: childProps.children ?? 'Rename',\n        isDisabled: childProps.isDisabled ?? !effectiveIsEditable,\n      });\n    }\n    if (childKey === 'delete') {\n      return cloneElement(child as ReactElement<MenuItemLikeProps>, {\n        children: childProps.children ?? 'Delete',\n        theme: childProps.theme ?? 'danger',\n        isDisabled: childProps.isDisabled ?? !isDeletable,\n      });\n    }\n\n    // Recursively process Menu.Section children\n    if (childProps.children && typeof childProps.children !== 'string') {\n      return cloneElement(child as ReactElement<MenuItemLikeProps>, {\n        children: processMenuItems(\n          childProps.children,\n          effectiveIsEditable,\n          isDeletable,\n        ),\n      });\n    }\n\n    return child;\n  });\n}\n\n/**\n * Check if menu children is empty (null, undefined, or empty fragment)\n */\nfunction isMenuEmpty(menu: ReactNode): boolean {\n  if (menu === null || menu === undefined) return true;\n  const children = Children.toArray(menu);\n  return children.length === 0;\n}\n\n// =============================================================================\n// TabButton Props\n// =============================================================================\n\nexport interface TabButtonProps {\n  /** React Aria collection item */\n  item: Node<object>;\n  /** Parsed tab data */\n  tabData: ParsedTab;\n  /** Whether this is the last tab (for drop indicator) */\n  isLastTab?: boolean;\n}\n\n// =============================================================================\n// TabButton Component\n// =============================================================================\n\n/**\n * Individual tab button component.\n *\n * Uses TabsContext to access shared props, dramatically reducing prop drilling.\n * Handles:\n * - Tab selection and keyboard navigation\n * - Inline title editing\n * - Menu and context menu\n * - Drag-and-drop reordering\n * - Focus and hover states\n */\nexport function TabButton({ item, tabData, isLastTab }: TabButtonProps) {\n  // Get shared context\n  const {\n    state,\n    type,\n    size,\n    autoHideActions: parentAutoHideActions,\n    isEditable: parentIsEditable,\n    menu: parentMenu,\n    menuTriggerProps: parentMenuTriggerProps,\n    menuProps: parentMenuProps,\n    contextMenu: parentContextMenu,\n    onAction: parentOnAction,\n    onDelete,\n    dragState,\n    dropState,\n    editingKey,\n    editValue,\n    setEditValue,\n    startEditing,\n    submitEditing,\n    cancelEditing,\n  } = useTabsContext();\n\n  const ref = useRef<HTMLButtonElement>(null);\n  const containerRef = useRef<HTMLDivElement>(null);\n  const actionsRef = useRef<HTMLDivElement>(null);\n  const { tabProps } = useTab({ key: item.key }, state, ref);\n\n  // Measure actions width for proper space allocation in Item\n  const [actionsWidth, setActionsWidth] = useState(0);\n\n  // Drag-and-drop support - only enable when both states are provided\n  const isDraggable = !!dragState && !!dropState;\n\n  // useDraggableItem must be called unconditionally (Rules of Hooks)\n  // When dragState is undefined, we pass a minimal mock state to satisfy the hook\n  const mockDragState = useMemo(\n    () =>\n      ({\n        collection: state.collection,\n        selectionManager: state.selectionManager,\n        isDragging: () => false,\n        getKeysForDrag: () => new Set<Key>(),\n        isDisabled: false,\n        startDrag: () => {},\n        endDrag: () => {},\n      }) as DraggableCollectionState,\n    [state.collection, state.selectionManager],\n  );\n\n  const dragResult = useDraggableItem(\n    { key: item.key },\n    dragState ?? mockDragState,\n  );\n  const effectiveDragProps = isDraggable ? dragResult.dragProps : {};\n  const isDragging = isDraggable && dragResult.isDragging;\n\n  // Controlled state for menu trigger (enables keyboard opening with Shift+F10)\n  const [isMenuOpen, setIsMenuOpen] = useState(false);\n\n  // Hover, focus, and focus-visible state handling\n  const { hoverProps, isHovered } = useHover({});\n  const [isFocused, setIsFocused] = useState(false);\n  const { focusProps } = useFocus({ onFocusChange: setIsFocused });\n  const { isFocusVisible } = useFocusVisible();\n\n  // Suppress focus-visible when restoring focus after editing\n  const [suppressFocusVisible, setSuppressFocusVisible] = useState(false);\n  const effectiveFocusVisible = isFocusVisible && !suppressFocusVisible;\n\n  const isActive = state.selectedKey === item.key;\n  const isDisabled = state.disabledKeys.has(item.key);\n  const isDeletable = !!onDelete;\n  const isEditing = editingKey === item.key;\n\n  // Compute effective values - Tab-level overrides Tabs-level\n  const effectiveIsEditable = tabData.isEditable ?? parentIsEditable ?? false;\n  const effectiveMenu =\n    tabData.menu === null ? null : tabData.menu ?? parentMenu;\n  const effectiveMenuTriggerProps: Partial<CubeItemActionProps> = {\n    ...parentMenuTriggerProps,\n    ...tabData.menuTriggerProps,\n  };\n  const effectiveMenuProps: Partial<CubeMenuProps<object>> = {\n    ...parentMenuProps,\n    ...tabData.menuProps,\n  };\n  const effectiveContextMenu =\n    tabData.contextMenu ?? parentContextMenu ?? false;\n  const effectiveType = tabData.type ?? type ?? 'default';\n\n  // Delete button shown only if onDelete is set AND no menu\n  const showDeleteButton = isDeletable && isMenuEmpty(effectiveMenu);\n\n  // Process menu items for auto-labels and disabled states\n  const processedMenu =\n    effectiveMenu && !isMenuEmpty(effectiveMenu)\n      ? processMenuItems(effectiveMenu, effectiveIsEditable, isDeletable)\n      : null;\n\n  const itemKeyStr = String(item.key);\n\n  const handleDelete = useEvent(() => {\n    onDelete?.(itemKeyStr);\n  });\n\n  const handleStartEditing = useEvent(() => {\n    if (!effectiveIsEditable || isDisabled) return;\n\n    const titleText =\n      typeof tabData.title === 'string' ? tabData.title : itemKeyStr;\n\n    startEditing(itemKeyStr, titleText);\n  });\n\n  const handleSubmitEditing = useEvent(() => {\n    submitEditing(itemKeyStr, editValue, tabData.onTitleChange);\n    // Suppress focus-visible and restore focus to the tab button after editing\n    setSuppressFocusVisible(true);\n    requestAnimationFrame(() => {\n      ref.current?.focus();\n    });\n  });\n\n  const handleCancelEditing = useEvent(() => {\n    cancelEditing();\n    // Suppress focus-visible and restore focus to the tab button after editing\n    setSuppressFocusVisible(true);\n    requestAnimationFrame(() => {\n      ref.current?.focus();\n    });\n  });\n\n  const handleEditValueChange = useEvent((value: string) => {\n    setEditValue(value);\n  });\n\n  // Handle menu actions - predefined actions first, then callbacks\n  const handleMenuAction = useEvent((action: Key) => {\n    // Strip the \".$\" prefix that React adds via Children.toArray/map\n    const actionStr = String(action);\n    const normalizedAction = actionStr.startsWith('.$')\n      ? actionStr.slice(2)\n      : actionStr;\n\n    // Handle predefined actions first (only if requirements are met)\n    if (normalizedAction === 'rename' && effectiveIsEditable) {\n      handleStartEditing();\n    }\n    if (normalizedAction === 'delete' && isDeletable) {\n      onDelete?.(itemKeyStr);\n    }\n    // Call Tab-level onAction first (with normalized action)\n    tabData.onAction?.(normalizedAction);\n    // Then call Tabs-level onAction with tab key (with normalized action)\n    parentOnAction?.(normalizedAction, itemKeyStr);\n  });\n\n  // Keyboard handler for accessibility shortcuts (WAI-ARIA Tabs Pattern)\n  const handleKeyDown = useEvent((e: KeyboardEvent) => {\n    // Reset focus-visible suppression on any keyboard interaction\n    if (suppressFocusVisible) {\n      setSuppressFocusVisible(false);\n    }\n\n    // F2 to start editing (standard rename shortcut)\n    if (e.key === 'F2' && effectiveIsEditable && !isDisabled) {\n      e.preventDefault();\n      e.stopPropagation();\n      handleStartEditing();\n    }\n\n    // Shift+F10 opens the menu (standard context menu shortcut)\n    if (e.key === 'F10' && e.shiftKey && processedMenu) {\n      e.preventDefault();\n      e.stopPropagation();\n      setIsMenuOpen(true);\n    }\n\n    // Delete key for direct tab deletion (ARIA Tabs pattern optional feature)\n    // Skip when editing to allow normal text editing operations\n    if (\n      (e.key === 'Delete' || e.key === 'Backspace') &&\n      isDeletable &&\n      !isEditing\n    ) {\n      e.preventDefault();\n      onDelete?.(itemKeyStr);\n    }\n  });\n\n  const mods = useMemo(\n    () => ({\n      type: effectiveType,\n      active: isActive,\n      deletable: isDeletable,\n      disabled: isDisabled,\n      editing: isEditing,\n      hovered: isHovered,\n      focused: isFocused,\n      'focus-visible': effectiveFocusVisible,\n      draggable: isDraggable,\n      dragging: isDragging,\n    }),\n    [\n      effectiveType,\n      isActive,\n      isDeletable,\n      isDisabled,\n      isEditing,\n      isHovered,\n      isFocused,\n      effectiveFocusVisible,\n      isDraggable,\n      isDragging,\n    ],\n  );\n\n  // Scroll active tab into view\n  useEffect(() => {\n    if (ref.current && isActive) {\n      ref.current.scrollIntoView?.({ block: 'nearest', inline: 'nearest' });\n    }\n  }, [isActive]);\n\n  // Build menu element\n  const menuElement = processedMenu ? (\n    <Menu {...effectiveMenuProps} onAction={handleMenuAction}>\n      {processedMenu}\n    </Menu>\n  ) : null;\n\n  // Use the useContextMenu hook for context menu handling\n  const contextMenu = useContextMenu<HTMLDivElement, CubeMenuProps<object>>(\n    Menu,\n    { placement: 'bottom start' },\n    {\n      ...effectiveMenuProps,\n      onAction: handleMenuAction,\n      children: processedMenu,\n    },\n  );\n\n  // Build menu trigger action with controlled state for keyboard accessibility\n  const menuAction = menuElement ? (\n    <MenuTrigger isOpen={isMenuOpen} onOpenChange={setIsMenuOpen}>\n      <ItemAction\n        tabIndex={-1}\n        icon={<MoreIcon />}\n        {...effectiveMenuTriggerProps}\n      />\n      {menuElement}\n    </MenuTrigger>\n  ) : null;\n\n  // Build delete button (only shown when no menu)\n  const deleteAction = showDeleteButton ? (\n    <ItemAction\n      tabIndex={-1}\n      icon={<CloseIcon />}\n      tooltip=\"Close\"\n      onPress={handleDelete}\n    />\n  ) : null;\n\n  // Order: custom actions → menu trigger → delete button\n  const actions =\n    tabData.actions || menuAction || deleteAction ? (\n      <>\n        {tabData.actions}\n        {menuAction}\n        {deleteAction}\n      </>\n    ) : undefined;\n\n  // Measure actions width to pass to Item for proper space allocation\n  useLayoutEffect(() => {\n    if (actions && actionsRef.current) {\n      setActionsWidth(Math.round(actionsRef.current.offsetWidth));\n    }\n  }, [actions]);\n\n  // Determine effective size\n  const effectiveSize = tabData.size ?? size ?? 'medium';\n  const itemSize =\n    effectiveType === 'radio'\n      ? RADIO_SIZE_MAP[effectiveSize === 'large' ? 'large' : 'medium']\n      : effectiveSize;\n\n  // Determine Item type prop\n  const itemType =\n    effectiveType === 'default' ? (isActive ? 'clear' : 'neutral') : 'neutral';\n\n  // Determine shape - file type uses sharp edges\n  const isFileType = effectiveType === 'file';\n  const itemShape = isFileType ? 'sharp' : undefined;\n\n  // Determine autoHideActions - tab-level overrides parent-level\n  const effectiveAutoHideActions =\n    tabData.autoHideActions ?? parentAutoHideActions;\n\n  // Render title with editing support if editable\n  const titleContent = effectiveIsEditable ? (\n    <EditableTitle\n      title={tabData.title}\n      isEditing={isEditing}\n      editValue={isEditing ? editValue : ''}\n      onEditValueChange={handleEditValueChange}\n      onStartEditing={handleStartEditing}\n      onSubmit={handleSubmitEditing}\n      onCancel={handleCancelEditing}\n    />\n  ) : (\n    tabData.title\n  );\n\n  // Extract tab-specific props and pass through the rest (style props) to the Item\n  const {\n    title: _title,\n    content: _content,\n    key: _key,\n    isDisabled: _isDisabled,\n    prerender: _prerender,\n    keepMounted: _keepMounted,\n    size: _size,\n    type: _type,\n    actions: _actions,\n    autoHideActions: _autoHideActions,\n    isEditable: _isEditable,\n    onTitleChange: _onTitleChange,\n    menu: _menu,\n    menuTriggerProps: _menuTriggerProps,\n    menuProps: _menuProps,\n    contextMenu: _contextMenu,\n    onAction: _onAction,\n    qa,\n    qaVal,\n    styles,\n    ...itemStyleProps\n  } = tabData;\n\n  // Use the hook's targetRef when context menu is enabled\n  const effectiveContainerRef =\n    effectiveContextMenu && processedMenu\n      ? contextMenu.targetRef\n      : containerRef;\n\n  // ARIA: indicate popup menu presence\n  const ariaProps = processedMenu ? { 'aria-haspopup': 'menu' as const } : {};\n\n  // Mods for TabContainer\n  const containerMods = {\n    ...mods,\n    'auto-hide-actions': effectiveAutoHideActions,\n  };\n\n  return (\n    <TabContainer\n      ref={effectiveContainerRef}\n      data-size={itemSize}\n      mods={containerMods}\n      tokens={{ '$actions-width': `${actionsWidth}px` }}\n      {...effectiveDragProps}\n    >\n      {/* Drop indicator before this tab */}\n      {isDraggable && dropState && (\n        <TabDropIndicator\n          target={{ type: 'item', key: item.key, dropPosition: 'before' }}\n          dropState={dropState}\n          position=\"before\"\n        />\n      )}\n      <TabElement\n        preserveActionsSpace\n        autoHideActions={effectiveAutoHideActions}\n        as=\"button\"\n        {...mergeProps(tabProps, hoverProps, focusProps, {\n          onKeyDown: handleKeyDown,\n        })}\n        {...ariaProps}\n        {...itemStyleProps}\n        ref={ref}\n        qa={qa ?? `Tab-${String(item.key)}`}\n        qaVal={qaVal}\n        styles={styles}\n        mods={mods}\n        isSelected={isActive}\n        isDisabled={isDisabled}\n        size={itemSize}\n        type={itemType}\n        shape={itemShape}\n        actions={actions ? true : undefined}\n      >\n        {titleContent}\n      </TabElement>\n      {/* Actions rendered outside the button for accessibility */}\n      {actions && (\n        <div\n          ref={actionsRef}\n          data-element=\"Actions\"\n          {...ACTIONS_EVENT_HANDLERS}\n        >\n          <ItemActionProvider\n            type={itemType}\n            theme=\"default\"\n            isDisabled={isDisabled}\n          >\n            {actions}\n          </ItemActionProvider>\n        </div>\n      )}\n      {effectiveContextMenu && processedMenu && contextMenu.rendered}\n      {/* Drop indicator after the last tab */}\n      {isDraggable && dropState && isLastTab && (\n        <TabDropIndicator\n          target={{ type: 'item', key: item.key, dropPosition: 'after' }}\n          dropState={dropState}\n          position=\"after\"\n        />\n      )}\n    </TabContainer>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"TabButton.js","names":["Menu","MenuTrigger","mergeProps"],"sources":["../../../../src/components/navigation/Tabs/TabButton.tsx"],"sourcesContent":["import {\n  Children,\n  cloneElement,\n  isValidElement,\n  ReactElement,\n  ReactNode,\n  useEffect,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport {\n  useDraggableItem,\n  useFocus,\n  useFocusVisible,\n  useHover,\n  useTab,\n} from 'react-aria';\n\nimport { useEvent } from '../../../_internal/hooks';\nimport { CloseIcon, MoreIcon } from '../../../icons';\nimport { mergeProps } from '../../../utils/react';\nimport { CubeItemActionProps, ItemAction } from '../../actions/ItemAction';\nimport { ItemActionProvider } from '../../actions/ItemActionContext';\nimport { CubeMenuProps, Menu, MenuTrigger } from '../../actions/Menu';\nimport { useContextMenu } from '../../actions/use-context-menu';\n\nimport { EditableTitle } from './EditableTitle';\nimport { TabContainer, TabElement } from './styled';\nimport { TabDropIndicator } from './TabDropIndicator';\nimport { useTabsContext } from './TabsContext';\nimport { ParsedTab, RADIO_SIZE_MAP } from './types';\n\nimport type { Key, Node } from '@react-types/shared';\nimport type { KeyboardEvent, MouseEvent, PointerEvent } from 'react';\nimport type { DraggableCollectionState } from 'react-stately';\n\n// =============================================================================\n// Event handlers for actions to prevent event propagation to tab button\n// =============================================================================\n\nconst ACTIONS_EVENT_HANDLERS = {\n  onClick: (e: MouseEvent) => e.stopPropagation(),\n  onPointerDown: (e: PointerEvent) => e.stopPropagation(),\n  onPointerUp: (e: PointerEvent) => e.stopPropagation(),\n  onMouseDown: (e: MouseEvent) => e.stopPropagation(),\n  onMouseUp: (e: MouseEvent) => e.stopPropagation(),\n  onKeyDown: (e: KeyboardEvent) => {\n    if (e.key === 'Enter' || e.key === ' ') {\n      e.stopPropagation();\n    }\n  },\n};\n\n// =============================================================================\n// Menu Processing Utilities\n// =============================================================================\n\ninterface MenuItemLikeProps {\n  children?: ReactNode;\n  isDisabled?: boolean;\n  theme?: string;\n}\n\n/**\n * Extracts the raw key from a React element, stripping the \".$\" prefix\n * that React adds via Children.map/toArray.\n */\nfunction getRawKey(element: ReactElement): string | null {\n  if (element.key == null) return null;\n  const keyStr = String(element.key);\n  return keyStr.startsWith('.$') ? keyStr.slice(2) : keyStr;\n}\n\n/**\n * Process menu items for predefined action keys (rename, delete).\n * Auto-adds labels and disables items when requirements aren't met.\n */\nfunction processMenuItems(\n  children: ReactNode,\n  effectiveIsEditable: boolean,\n  isDeletable: boolean,\n): ReactNode {\n  return Children.toArray(children).map((child) => {\n    if (!isValidElement(child)) return child;\n\n    const childKey = getRawKey(child);\n    const childProps = child.props as MenuItemLikeProps;\n\n    // Handle predefined action keys\n    if (childKey === 'rename') {\n      return cloneElement(child as ReactElement<MenuItemLikeProps>, {\n        children: childProps.children ?? 'Rename',\n        isDisabled: childProps.isDisabled ?? !effectiveIsEditable,\n      });\n    }\n    if (childKey === 'delete') {\n      return cloneElement(child as ReactElement<MenuItemLikeProps>, {\n        children: childProps.children ?? 'Delete',\n        theme: childProps.theme ?? 'danger',\n        isDisabled: childProps.isDisabled ?? !isDeletable,\n      });\n    }\n\n    // Recursively process Menu.Section children\n    if (childProps.children && typeof childProps.children !== 'string') {\n      return cloneElement(child as ReactElement<MenuItemLikeProps>, {\n        children: processMenuItems(\n          childProps.children,\n          effectiveIsEditable,\n          isDeletable,\n        ),\n      });\n    }\n\n    return child;\n  });\n}\n\n/**\n * Check if menu children is empty (null, undefined, or empty fragment)\n */\nfunction isMenuEmpty(menu: ReactNode): boolean {\n  if (menu === null || menu === undefined) return true;\n  const children = Children.toArray(menu);\n  return children.length === 0;\n}\n\n// =============================================================================\n// TabButton Props\n// =============================================================================\n\nexport interface TabButtonProps {\n  /** React Aria collection item */\n  item: Node<object>;\n  /** Parsed tab data */\n  tabData: ParsedTab;\n  /** Whether this is the last tab (for drop indicator) */\n  isLastTab?: boolean;\n}\n\n// =============================================================================\n// TabButton Component\n// =============================================================================\n\n/**\n * Individual tab button component.\n *\n * Uses TabsContext to access shared props, dramatically reducing prop drilling.\n * Handles:\n * - Tab selection and keyboard navigation\n * - Inline title editing\n * - Menu and context menu\n * - Drag-and-drop reordering\n * - Focus and hover states\n */\nexport function TabButton({ item, tabData, isLastTab }: TabButtonProps) {\n  // Get shared context\n  const {\n    state,\n    type,\n    size,\n    autoHideActions: parentAutoHideActions,\n    isEditable: parentIsEditable,\n    menu: parentMenu,\n    menuTriggerProps: parentMenuTriggerProps,\n    menuProps: parentMenuProps,\n    contextMenu: parentContextMenu,\n    onAction: parentOnAction,\n    onDelete,\n    dragState,\n    dropState,\n    editingKey,\n    editValue,\n    setEditValue,\n    startEditing,\n    submitEditing,\n    cancelEditing,\n  } = useTabsContext();\n\n  const ref = useRef<HTMLButtonElement>(null);\n  const containerRef = useRef<HTMLDivElement>(null);\n  const actionsRef = useRef<HTMLDivElement>(null);\n  const { tabProps } = useTab({ key: item.key }, state, ref);\n\n  // Measure actions width for proper space allocation in Item\n  const [actionsWidth, setActionsWidth] = useState(0);\n\n  // Drag-and-drop support - only enable when both states are provided\n  const isDraggable = !!dragState && !!dropState;\n\n  // useDraggableItem must be called unconditionally (Rules of Hooks)\n  // When dragState is undefined, we pass a minimal mock state to satisfy the hook\n  const mockDragState = useMemo(\n    () =>\n      ({\n        collection: state.collection,\n        selectionManager: state.selectionManager,\n        isDragging: () => false,\n        getKeysForDrag: () => new Set<Key>(),\n        isDisabled: false,\n        startDrag: () => {},\n        endDrag: () => {},\n      }) as DraggableCollectionState,\n    [state.collection, state.selectionManager],\n  );\n\n  const dragResult = useDraggableItem(\n    { key: item.key },\n    dragState ?? mockDragState,\n  );\n  const effectiveDragProps = isDraggable ? dragResult.dragProps : {};\n  const isDragging = isDraggable && dragResult.isDragging;\n\n  // Controlled state for menu trigger (enables keyboard opening with Shift+F10)\n  const [isMenuOpen, setIsMenuOpen] = useState(false);\n\n  // Hover, focus, and focus-visible state handling\n  const { hoverProps, isHovered } = useHover({});\n  const [isFocused, setIsFocused] = useState(false);\n  const { focusProps } = useFocus({ onFocusChange: setIsFocused });\n  const { isFocusVisible } = useFocusVisible();\n\n  // Suppress focus-visible when restoring focus after editing\n  const [suppressFocusVisible, setSuppressFocusVisible] = useState(false);\n  const effectiveFocusVisible = isFocusVisible && !suppressFocusVisible;\n\n  const isActive = state.selectedKey === item.key;\n  const isDisabled = state.disabledKeys.has(item.key);\n  const isDeletable = !!onDelete;\n  const isEditing = editingKey === item.key;\n\n  // Compute effective values - Tab-level overrides Tabs-level\n  const effectiveIsEditable = tabData.isEditable ?? parentIsEditable ?? false;\n  const effectiveMenu =\n    tabData.menu === null ? null : tabData.menu ?? parentMenu;\n  const effectiveMenuTriggerProps: Partial<CubeItemActionProps> = {\n    ...parentMenuTriggerProps,\n    ...tabData.menuTriggerProps,\n  };\n  const effectiveMenuProps: Partial<CubeMenuProps<object>> = {\n    ...parentMenuProps,\n    ...tabData.menuProps,\n  };\n  const effectiveContextMenu =\n    tabData.contextMenu ?? parentContextMenu ?? false;\n  const effectiveType = tabData.type ?? type ?? 'default';\n\n  const contextMenuEnabled =\n    effectiveContextMenu === true || effectiveContextMenu === 'context-only';\n  const contextMenuOnly = effectiveContextMenu === 'context-only';\n\n  // Inline close when no menu, or context-only (no overflow trigger)\n  const showDeleteButton =\n    isDeletable && (isMenuEmpty(effectiveMenu) || contextMenuOnly);\n\n  // Process menu items for auto-labels and disabled states\n  const processedMenu =\n    effectiveMenu && !isMenuEmpty(effectiveMenu)\n      ? processMenuItems(effectiveMenu, effectiveIsEditable, isDeletable)\n      : null;\n\n  const itemKeyStr = String(item.key);\n\n  const handleDelete = useEvent(() => {\n    onDelete?.(itemKeyStr);\n  });\n\n  const handleStartEditing = useEvent(() => {\n    if (!effectiveIsEditable || isDisabled) return;\n\n    const titleText =\n      typeof tabData.title === 'string' ? tabData.title : itemKeyStr;\n\n    startEditing(itemKeyStr, titleText);\n  });\n\n  const handleSubmitEditing = useEvent(() => {\n    submitEditing(itemKeyStr, editValue, tabData.onTitleChange);\n    // Suppress focus-visible and restore focus to the tab button after editing\n    setSuppressFocusVisible(true);\n    requestAnimationFrame(() => {\n      ref.current?.focus();\n    });\n  });\n\n  const handleCancelEditing = useEvent(() => {\n    cancelEditing();\n    // Suppress focus-visible and restore focus to the tab button after editing\n    setSuppressFocusVisible(true);\n    requestAnimationFrame(() => {\n      ref.current?.focus();\n    });\n  });\n\n  const handleEditValueChange = useEvent((value: string) => {\n    setEditValue(value);\n  });\n\n  // Handle menu actions - predefined actions first, then callbacks\n  const handleMenuAction = useEvent((action: Key) => {\n    // Strip the \".$\" prefix that React adds via Children.toArray/map\n    const actionStr = String(action);\n    const normalizedAction = actionStr.startsWith('.$')\n      ? actionStr.slice(2)\n      : actionStr;\n\n    // Handle predefined actions first (only if requirements are met)\n    if (normalizedAction === 'rename' && effectiveIsEditable) {\n      handleStartEditing();\n    }\n    if (normalizedAction === 'delete' && isDeletable) {\n      onDelete?.(itemKeyStr);\n    }\n    // Call Tab-level onAction first (with normalized action)\n    tabData.onAction?.(normalizedAction);\n    // Then call Tabs-level onAction with tab key (with normalized action)\n    parentOnAction?.(normalizedAction, itemKeyStr);\n  });\n\n  const menuElement = processedMenu ? (\n    <Menu {...effectiveMenuProps} onAction={handleMenuAction}>\n      {processedMenu}\n    </Menu>\n  ) : null;\n\n  const contextMenu = useContextMenu<HTMLDivElement, CubeMenuProps<object>>(\n    Menu,\n    { placement: 'bottom start' },\n    {\n      ...effectiveMenuProps,\n      onAction: handleMenuAction,\n      children: processedMenu,\n    },\n  );\n\n  // Keyboard handler for accessibility shortcuts (WAI-ARIA Tabs Pattern)\n  const handleKeyDown = useEvent((e: KeyboardEvent) => {\n    // Reset focus-visible suppression on any keyboard interaction\n    if (suppressFocusVisible) {\n      setSuppressFocusVisible(false);\n    }\n\n    // F2 to start editing (standard rename shortcut)\n    if (e.key === 'F2' && effectiveIsEditable && !isDisabled) {\n      e.preventDefault();\n      e.stopPropagation();\n      handleStartEditing();\n    }\n\n    // Shift+F10 opens the menu (standard context menu shortcut)\n    if (e.key === 'F10' && e.shiftKey && processedMenu) {\n      e.preventDefault();\n      e.stopPropagation();\n      if (contextMenuOnly) {\n        contextMenu.open();\n      } else {\n        setIsMenuOpen(true);\n      }\n    }\n\n    // Delete key for direct tab deletion (ARIA Tabs pattern optional feature)\n    // Skip when editing to allow normal text editing operations\n    if (\n      (e.key === 'Delete' || e.key === 'Backspace') &&\n      isDeletable &&\n      !isEditing\n    ) {\n      e.preventDefault();\n      onDelete?.(itemKeyStr);\n    }\n  });\n\n  const mods = useMemo(\n    () => ({\n      type: effectiveType,\n      active: isActive,\n      deletable: isDeletable,\n      disabled: isDisabled,\n      editing: isEditing,\n      hovered: isHovered,\n      focused: isFocused,\n      'focus-visible': effectiveFocusVisible,\n      draggable: isDraggable,\n      dragging: isDragging,\n    }),\n    [\n      effectiveType,\n      isActive,\n      isDeletable,\n      isDisabled,\n      isEditing,\n      isHovered,\n      isFocused,\n      effectiveFocusVisible,\n      isDraggable,\n      isDragging,\n    ],\n  );\n\n  // Scroll active tab into view\n  useEffect(() => {\n    if (ref.current && isActive) {\n      ref.current.scrollIntoView?.({ block: 'nearest', inline: 'nearest' });\n    }\n  }, [isActive]);\n\n  // Overflow trigger (hidden in context-only mode)\n  const menuAction =\n    menuElement && !contextMenuOnly ? (\n      <MenuTrigger isOpen={isMenuOpen} onOpenChange={setIsMenuOpen}>\n        <ItemAction\n          tabIndex={-1}\n          icon={<MoreIcon />}\n          {...effectiveMenuTriggerProps}\n        />\n        {menuElement}\n      </MenuTrigger>\n    ) : null;\n\n  // Build delete button (only shown when no menu)\n  const deleteAction = showDeleteButton ? (\n    <ItemAction\n      tabIndex={-1}\n      icon={<CloseIcon />}\n      tooltip=\"Close\"\n      onPress={handleDelete}\n    />\n  ) : null;\n\n  // Order: custom actions → menu trigger → delete button\n  const actions =\n    tabData.actions || menuAction || deleteAction ? (\n      <>\n        {tabData.actions}\n        {menuAction}\n        {deleteAction}\n      </>\n    ) : undefined;\n\n  // Measure actions width to pass to Item for proper space allocation\n  useLayoutEffect(() => {\n    if (actions && actionsRef.current) {\n      setActionsWidth(Math.round(actionsRef.current.offsetWidth));\n    }\n  }, [actions]);\n\n  // Determine effective size\n  const effectiveSize = tabData.size ?? size ?? 'medium';\n  const itemSize =\n    effectiveType === 'radio'\n      ? RADIO_SIZE_MAP[effectiveSize === 'large' ? 'large' : 'medium']\n      : effectiveSize;\n\n  // Determine Item type prop\n  const itemType =\n    effectiveType === 'default' ? (isActive ? 'clear' : 'neutral') : 'neutral';\n\n  // Determine shape - file type uses sharp edges\n  const isFileType = effectiveType === 'file';\n  const itemShape = isFileType ? 'sharp' : undefined;\n\n  // Determine autoHideActions - tab-level overrides parent-level\n  const effectiveAutoHideActions =\n    tabData.autoHideActions ?? parentAutoHideActions;\n\n  // Render title with editing support if editable\n  const titleContent = effectiveIsEditable ? (\n    <EditableTitle\n      title={tabData.title}\n      isEditing={isEditing}\n      editValue={isEditing ? editValue : ''}\n      onEditValueChange={handleEditValueChange}\n      onStartEditing={handleStartEditing}\n      onSubmit={handleSubmitEditing}\n      onCancel={handleCancelEditing}\n    />\n  ) : (\n    tabData.title\n  );\n\n  // Extract tab-specific props and pass through the rest (style props) to the Item\n  const {\n    title: _title,\n    content: _content,\n    key: _key,\n    isDisabled: _isDisabled,\n    prerender: _prerender,\n    keepMounted: _keepMounted,\n    size: _size,\n    type: _type,\n    actions: _actions,\n    autoHideActions: _autoHideActions,\n    isEditable: _isEditable,\n    onTitleChange: _onTitleChange,\n    menu: _menu,\n    menuTriggerProps: _menuTriggerProps,\n    menuProps: _menuProps,\n    contextMenu: _contextMenu,\n    onAction: _onAction,\n    qa,\n    qaVal,\n    styles,\n    ...itemStyleProps\n  } = tabData;\n\n  // Use the hook's targetRef when context menu is enabled\n  const effectiveContainerRef =\n    contextMenuEnabled && processedMenu ? contextMenu.targetRef : containerRef;\n\n  // ARIA: indicate popup menu presence\n  const ariaProps = processedMenu ? { 'aria-haspopup': 'menu' as const } : {};\n\n  // Mods for TabContainer\n  const containerMods = {\n    ...mods,\n    'auto-hide-actions': effectiveAutoHideActions,\n  };\n\n  return (\n    <TabContainer\n      ref={effectiveContainerRef}\n      data-size={itemSize}\n      mods={containerMods}\n      tokens={{ '$actions-width': `${actionsWidth}px` }}\n      {...effectiveDragProps}\n    >\n      {/* Drop indicator before this tab */}\n      {isDraggable && dropState && (\n        <TabDropIndicator\n          target={{ type: 'item', key: item.key, dropPosition: 'before' }}\n          dropState={dropState}\n          position=\"before\"\n        />\n      )}\n      <TabElement\n        preserveActionsSpace\n        autoHideActions={effectiveAutoHideActions}\n        as=\"button\"\n        {...mergeProps(tabProps, hoverProps, focusProps, {\n          onKeyDown: handleKeyDown,\n        })}\n        {...ariaProps}\n        {...itemStyleProps}\n        ref={ref}\n        qa={qa ?? `Tab-${String(item.key)}`}\n        qaVal={qaVal}\n        styles={styles}\n        mods={mods}\n        isSelected={isActive}\n        isDisabled={isDisabled}\n        size={itemSize}\n        type={itemType}\n        shape={itemShape}\n        actions={actions ? true : undefined}\n      >\n        {titleContent}\n      </TabElement>\n      {/* Actions rendered outside the button for accessibility */}\n      {actions && (\n        <div\n          ref={actionsRef}\n          data-element=\"Actions\"\n          {...ACTIONS_EVENT_HANDLERS}\n        >\n          <ItemActionProvider\n            type={itemType}\n            theme=\"default\"\n            isDisabled={isDisabled}\n          >\n            {actions}\n          </ItemActionProvider>\n        </div>\n      )}\n      {contextMenuEnabled && processedMenu && contextMenu.rendered}\n      {/* Drop indicator after the last tab */}\n      {isDraggable && dropState && isLastTab && (\n        <TabDropIndicator\n          target={{ type: 'item', key: item.key, dropPosition: 'after' }}\n          dropState={dropState}\n          position=\"after\"\n        />\n      )}\n    </TabContainer>\n  );\n}\n"],"mappings":"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"}

package/dist/components/navigation/Tabs/TabDropIndicator.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.121.6 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.122.0 | Cube Dev Team */
 import { DropIndicatorElement } from "./styled.js";
 import { useEffect, useRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";

package/dist/components/navigation/Tabs/TabPanel.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.121.6 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.122.0 | Cube Dev Team */
 import { TabPanelElement } from "./styled.js";
 import { useEffect, useMemo, useRef } from "react";
 import { Fragment as Fragment$1, jsx } from "react/jsx-runtime";

package/dist/components/navigation/Tabs/TabPicker.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.121.6 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.122.0 | Cube Dev Team */
 import { ItemAction } from "../../actions/ItemAction/ItemAction.js";
 import { CloseIcon } from "../../../icons/CloseIcon.js";
 import { MoreIcon } from "../../../icons/MoreIcon.js";