npm - @cube-dev/ui-kit - Versions diffs - 0.168.1 → 0.169.0 - Mend

@cube-dev/ui-kit 0.168.1 → 0.169.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (679) hide show

package/dist/components/actions/ItemActionContext.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.168.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.169.0 | Cube Dev Team */
 import { createContext, useContext } from "react";
 import { jsx } from "react/jsx-runtime";

package/dist/components/actions/ItemButton/ItemButton.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.168.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.169.0 | Cube Dev Team */
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { mergeRefs } from "../../../utils/react/useCombinedRefs.js";
 import { useDismissParentPopover } from "../../../utils/react/usePopoverSync.js";

package/dist/components/actions/Link/Link.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.168.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.169.0 | Cube Dev Team */
 import { Button } from "../Button/Button.js";
 import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";

package/dist/components/actions/Menu/Menu.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.168.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.169.0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { _CollectionItem } from "../../CollectionItem.js";

package/dist/components/actions/Menu/MenuItem.js CHANGED Viewed

@@ -1,9 +1,9 @@
-/** @license MIT | @cube-dev/ui-kit v0.168.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.169.0 | Cube Dev Team */
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { filterCollectionItemProps } from "../../CollectionItem.js";
 import { _Item } from "../../content/Item/Item.js";
-import { RightIcon } from "../../../icons/RightIcon.js";
 import { useMenuContext } from "./context.js";
+import { RightIcon } from "../../../icons/RightIcon.js";
 import { SubmenuTriggerContext } from "./SubmenuTriggerContext.js";
 import { useContext, useRef } from "react";
 import { jsx } from "react/jsx-runtime";

package/dist/components/actions/Menu/MenuItem.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MenuItem.js","names":["Item","mergeProps"],"sources":["../../../../src/components/actions/Menu/MenuItem.tsx"],"sourcesContent":["import { Key, Node } from '@react-types/shared';\nimport { Styles } from '@tenphi/tasty';\nimport { KeyboardEvent, useContext, useRef } from 'react';\nimport { FocusRing, useMenuItem } from 'react-aria';\nimport { TreeState } from 'react-stately';\n\nimport { RightIcon } from '../../../icons';\nimport { mergeProps } from '../../../utils/react';\nimport { filterCollectionItemProps } from '../../CollectionItem';\nimport { Item } from '../../content/Item/Item';\n\nimport { useMenuContext } from './context';\nimport { SubmenuTriggerContext } from './SubmenuTriggerContext';\n\nexport type MenuSelectionType = 'checkbox' \| 'radio' \| 'checkmark';\n\nexport interface MenuItemProps<T> {\n item: Node<T>;\n state: TreeState<T>;\n styles?: Styles;\n isVirtualized?: boolean;\n isDisabled?: boolean;\n onAction?: (key: Key) => void;\n size?: 'small' \| 'medium' \| (string & {});\n}\n\n/** @private */\nexport function MenuItem<T>(props: MenuItemProps<T>) {\n const { item, state, styles, isVirtualized, onAction, size } = props;\n const { onClose, closeOnSelect } = useMenuContext();\n const { rendered, key, props: itemProps } = item;\n\n // Check if this item is wrapped in a SubmenuTriggerContext\n const submenuContext = useContext(SubmenuTriggerContext);\n\n // Filter out service props (react-stately and parent-handled props)\n // All remaining props are safe to pass to Item component\n const filteredItemProps = filterCollectionItemProps(itemProps);\n\n // Extract specific props that need special handling\n const { hotkeys, mods: itemMods, qa: itemQa } = filteredItemProps;\n\n const isSelectable = state.selectionManager.selectionMode !== 'none';\n const isDisabledKey =\n state.disabledKeys.has(key) \|\| submenuContext?.isDisabled;\n\n const ref = useRef<HTMLLIElement>(null);\n\n // Use the triggerRef from submenu context if present\n const elementRef = (submenuContext?.triggerRef ?? ref) as any;\n\n const {\n menuItemProps,\n labelProps,\n descriptionProps,\n keyboardShortcutProps,\n isFocused,\n isSelected,\n isPressed,\n isDisabled,\n } = useMenuItem(\n {\n isSelected: state.selectionManager.isSelected(key),\n isDisabled: isDisabledKey,\n 'aria-label': item['aria-label'],\n key,\n onClose: submenuContext ? undefined : onClose, // Don't close menu for submenu triggers\n closeOnSelect: submenuContext ? false : closeOnSelect, // Don't close on submenu trigger selection\n isVirtualized,\n onAction: submenuContext?.onAction \|\| onAction,\n },\n state,\n elementRef,\n );\n\n // Selection indicator will be handled by Item component\n const isVirtualFocused = state.selectionManager.focusedKey === key;\n\n const mods = {\n ...itemMods,\n focused: isFocused \|\| isVirtualFocused,\n pressed: isPressed,\n selected: isSelected,\n disabled: isDisabled,\n submenu: !!submenuContext,\n menuitem: true,\n };\n\n return (\n <FocusRing>\n <Item\n {...mergeProps(menuItemProps, filteredItemProps, {\n 'data-popover-trigger': true,\n qa: itemQa ? itemQa : `MenuItem-${key}`,\n mods,\n styles,\n 'data-size': size,\n as: 'li',\n labelProps,\n descriptionProps,\n keyboardShortcutProps,\n 'aria-haspopup': submenuContext ? 'menu' : undefined,\n 'aria-expanded': submenuContext?.isOpen,\n 'data-has-submenu': submenuContext ? true : undefined,\n onKeyDown: submenuContext?.onKeyDown\n ? (e: KeyboardEvent) => {\n // Call submenu handler first, if it prevents default, don't call the original\n submenuContext.onKeyDown?.(e);\n if (!e.defaultPrevented && menuItemProps.onKeyDown) {\n menuItemProps.onKeyDown(e);\n }\n }\n : menuItemProps.onKeyDown,\n onMouseEnter:\n submenuContext?.onMouseEnter \|\| menuItemProps.onMouseEnter,\n onMouseLeave:\n submenuContext?.onMouseLeave \|\| menuItemProps.onMouseLeave,\n })}\n ref={elementRef}\n disableActionsFocus={true}\n rightIcon={submenuContext ? <RightIcon /> : filteredItemProps.rightIcon}\n defaultTooltipPlacement=\"right\"\n isSelected={isSelectable ? isSelected : undefined}\n isDisabled={isDisabled}\n size={size === 'small' ? 'small' : 'medium'}\n >\n {rendered}\n </Item>\n </FocusRing>\n );\n}\n"],"mappings":";;;;;;;;;;;;;AA2BA,SAAgB,SAAY,OAAyB;CACnD,MAAM,EAAE,MAAM,OAAO,QAAQ,eAAe,UAAU,SAAS;CAC/D,MAAM,EAAE,SAAS,kBAAkB,gBAAgB;CACnD,MAAM,EAAE,UAAU,KAAK,OAAO,cAAc;CAG5C,MAAM,iBAAiB,WAAW,sBAAsB;CAIxD,MAAM,oBAAoB,0BAA0B,UAAU;CAG9D,MAAM,EAAE,SAAS,MAAM,UAAU,IAAI,WAAW;CAEhD,MAAM,eAAe,MAAM,iBAAiB,kBAAkB;CAC9D,MAAM,gBACJ,MAAM,aAAa,IAAI,IAAI,IAAI,gBAAgB;CAEjD,MAAM,MAAM,OAAsB,KAAK;CAGvC,MAAM,aAAc,gBAAgB,cAAc;CAElD,MAAM,EACJ,eACA,YACA,kBACA,uBACA,WACA,YACA,WACA,eACE,YACF;EACE,YAAY,MAAM,iBAAiB,WAAW,IAAI;EAClD,YAAY;EACZ,cAAc,KAAK;EACnB;EACA,SAAS,iBAAiB,SAAY;EACtC,eAAe,iBAAiB,QAAQ;EACxC;EACA,UAAU,gBAAgB,YAAY;EACvC,EACD,OACA,WACD;CAGD,MAAM,mBAAmB,MAAM,iBAAiB,eAAe;CAE/D,MAAM,OAAO;EACX,GAAG;EACH,SAAS,aAAa;EACtB,SAAS;EACT,UAAU;EACV,UAAU;EACV,SAAS,CAAC,CAAC;EACX,UAAU;EACX;AAED,QACE,oBAAC,uBACC,oBAACA;EACC,GAAIC,aAAW,eAAe,mBAAmB;GAC/C,wBAAwB;GACxB,IAAI,SAAS,SAAS,YAAY;GAClC;GACA;GACA,aAAa;GACb,IAAI;GACJ;GACA;GACA;GACA,iBAAiB,iBAAiB,SAAS;GAC3C,iBAAiB,gBAAgB;GACjC,oBAAoB,iBAAiB,OAAO;GAC5C,WAAW,gBAAgB,aACtB,MAAqB;AAEpB,mBAAe,YAAY,EAAE;AAC7B,QAAI,CAAC,EAAE,oBAAoB,cAAc,UACvC,eAAc,UAAU,EAAE;OAG9B,cAAc;GAClB,cACE,gBAAgB,gBAAgB,cAAc;GAChD,cACE,gBAAgB,gBAAgB,cAAc;GACjD,CAAC;EACF,KAAK;EACL,qBAAqB;EACrB,WAAW,iBAAiB,oBAAC,cAAY,GAAG,kBAAkB;EAC9D,yBAAwB;EACxB,YAAY,eAAe,aAAa;EAC5B;EACZ,MAAM,SAAS,UAAU,UAAU;YAElC;GACI,GACG"}
1	+ {"version":3,"file":"MenuItem.js","names":["Item","mergeProps"],"sources":["../../../../src/components/actions/Menu/MenuItem.tsx"],"sourcesContent":["import { Key, Node } from '@react-types/shared';\nimport { Styles } from '@tenphi/tasty';\nimport { KeyboardEvent, useContext, useRef } from 'react';\nimport { FocusRing, useMenuItem } from 'react-aria';\nimport { TreeState } from 'react-stately';\n\nimport { RightIcon } from '../../../icons/RightIcon';\nimport { mergeProps } from '../../../utils/react';\nimport { filterCollectionItemProps } from '../../CollectionItem';\nimport { Item } from '../../content/Item/Item';\n\nimport { useMenuContext } from './context';\nimport { SubmenuTriggerContext } from './SubmenuTriggerContext';\n\nexport type MenuSelectionType = 'checkbox' \| 'radio' \| 'checkmark';\n\nexport interface MenuItemProps<T> {\n item: Node<T>;\n state: TreeState<T>;\n styles?: Styles;\n isVirtualized?: boolean;\n isDisabled?: boolean;\n onAction?: (key: Key) => void;\n size?: 'small' \| 'medium' \| (string & {});\n}\n\n/** @private */\nexport function MenuItem<T>(props: MenuItemProps<T>) {\n const { item, state, styles, isVirtualized, onAction, size } = props;\n const { onClose, closeOnSelect } = useMenuContext();\n const { rendered, key, props: itemProps } = item;\n\n // Check if this item is wrapped in a SubmenuTriggerContext\n const submenuContext = useContext(SubmenuTriggerContext);\n\n // Filter out service props (react-stately and parent-handled props)\n // All remaining props are safe to pass to Item component\n const filteredItemProps = filterCollectionItemProps(itemProps);\n\n // Extract specific props that need special handling\n const { hotkeys, mods: itemMods, qa: itemQa } = filteredItemProps;\n\n const isSelectable = state.selectionManager.selectionMode !== 'none';\n const isDisabledKey =\n state.disabledKeys.has(key) \|\| submenuContext?.isDisabled;\n\n const ref = useRef<HTMLLIElement>(null);\n\n // Use the triggerRef from submenu context if present\n const elementRef = (submenuContext?.triggerRef ?? ref) as any;\n\n const {\n menuItemProps,\n labelProps,\n descriptionProps,\n keyboardShortcutProps,\n isFocused,\n isSelected,\n isPressed,\n isDisabled,\n } = useMenuItem(\n {\n isSelected: state.selectionManager.isSelected(key),\n isDisabled: isDisabledKey,\n 'aria-label': item['aria-label'],\n key,\n onClose: submenuContext ? undefined : onClose, // Don't close menu for submenu triggers\n closeOnSelect: submenuContext ? false : closeOnSelect, // Don't close on submenu trigger selection\n isVirtualized,\n onAction: submenuContext?.onAction \|\| onAction,\n },\n state,\n elementRef,\n );\n\n // Selection indicator will be handled by Item component\n const isVirtualFocused = state.selectionManager.focusedKey === key;\n\n const mods = {\n ...itemMods,\n focused: isFocused \|\| isVirtualFocused,\n pressed: isPressed,\n selected: isSelected,\n disabled: isDisabled,\n submenu: !!submenuContext,\n menuitem: true,\n };\n\n return (\n <FocusRing>\n <Item\n {...mergeProps(menuItemProps, filteredItemProps, {\n 'data-popover-trigger': true,\n qa: itemQa ? itemQa : `MenuItem-${key}`,\n mods,\n styles,\n 'data-size': size,\n as: 'li',\n labelProps,\n descriptionProps,\n keyboardShortcutProps,\n 'aria-haspopup': submenuContext ? 'menu' : undefined,\n 'aria-expanded': submenuContext?.isOpen,\n 'data-has-submenu': submenuContext ? true : undefined,\n onKeyDown: submenuContext?.onKeyDown\n ? (e: KeyboardEvent) => {\n // Call submenu handler first, if it prevents default, don't call the original\n submenuContext.onKeyDown?.(e);\n if (!e.defaultPrevented && menuItemProps.onKeyDown) {\n menuItemProps.onKeyDown(e);\n }\n }\n : menuItemProps.onKeyDown,\n onMouseEnter:\n submenuContext?.onMouseEnter \|\| menuItemProps.onMouseEnter,\n onMouseLeave:\n submenuContext?.onMouseLeave \|\| menuItemProps.onMouseLeave,\n })}\n ref={elementRef}\n disableActionsFocus={true}\n rightIcon={submenuContext ? <RightIcon /> : filteredItemProps.rightIcon}\n defaultTooltipPlacement=\"right\"\n isSelected={isSelectable ? isSelected : undefined}\n isDisabled={isDisabled}\n size={size === 'small' ? 'small' : 'medium'}\n >\n {rendered}\n </Item>\n </FocusRing>\n );\n}\n"],"mappings":";;;;;;;;;;;;;AA2BA,SAAgB,SAAY,OAAyB;CACnD,MAAM,EAAE,MAAM,OAAO,QAAQ,eAAe,UAAU,SAAS;CAC/D,MAAM,EAAE,SAAS,kBAAkB,gBAAgB;CACnD,MAAM,EAAE,UAAU,KAAK,OAAO,cAAc;CAG5C,MAAM,iBAAiB,WAAW,sBAAsB;CAIxD,MAAM,oBAAoB,0BAA0B,UAAU;CAG9D,MAAM,EAAE,SAAS,MAAM,UAAU,IAAI,WAAW;CAEhD,MAAM,eAAe,MAAM,iBAAiB,kBAAkB;CAC9D,MAAM,gBACJ,MAAM,aAAa,IAAI,IAAI,IAAI,gBAAgB;CAEjD,MAAM,MAAM,OAAsB,KAAK;CAGvC,MAAM,aAAc,gBAAgB,cAAc;CAElD,MAAM,EACJ,eACA,YACA,kBACA,uBACA,WACA,YACA,WACA,eACE,YACF;EACE,YAAY,MAAM,iBAAiB,WAAW,IAAI;EAClD,YAAY;EACZ,cAAc,KAAK;EACnB;EACA,SAAS,iBAAiB,SAAY;EACtC,eAAe,iBAAiB,QAAQ;EACxC;EACA,UAAU,gBAAgB,YAAY;EACvC,EACD,OACA,WACD;CAGD,MAAM,mBAAmB,MAAM,iBAAiB,eAAe;CAE/D,MAAM,OAAO;EACX,GAAG;EACH,SAAS,aAAa;EACtB,SAAS;EACT,UAAU;EACV,UAAU;EACV,SAAS,CAAC,CAAC;EACX,UAAU;EACX;AAED,QACE,oBAAC,uBACC,oBAACA;EACC,GAAIC,aAAW,eAAe,mBAAmB;GAC/C,wBAAwB;GACxB,IAAI,SAAS,SAAS,YAAY;GAClC;GACA;GACA,aAAa;GACb,IAAI;GACJ;GACA;GACA;GACA,iBAAiB,iBAAiB,SAAS;GAC3C,iBAAiB,gBAAgB;GACjC,oBAAoB,iBAAiB,OAAO;GAC5C,WAAW,gBAAgB,aACtB,MAAqB;AAEpB,mBAAe,YAAY,EAAE;AAC7B,QAAI,CAAC,EAAE,oBAAoB,cAAc,UACvC,eAAc,UAAU,EAAE;OAG9B,cAAc;GAClB,cACE,gBAAgB,gBAAgB,cAAc;GAChD,cACE,gBAAgB,gBAAgB,cAAc;GACjD,CAAC;EACF,KAAK;EACL,qBAAqB;EACrB,WAAW,iBAAiB,oBAAC,cAAY,GAAG,kBAAkB;EAC9D,yBAAwB;EACxB,YAAY,eAAe,aAAa;EAC5B;EACZ,MAAM,SAAS,UAAU,UAAU;YAElC;GACI,GACG"}

package/dist/components/actions/Menu/MenuSection.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.168.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.169.0 | Cube Dev Team */
 import { TooltipProvider } from "../../overlays/Tooltip/TooltipProvider.js";
 import { MenuItem } from "./MenuItem.js";
 import { StyledMenu, StyledSection, StyledSectionHeading } from "./styled.js";

package/dist/components/actions/Menu/MenuTrigger.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.168.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.169.0 | Cube Dev Team */
 import { SlotProvider } from "../../../utils/react/Slots.js";
 import { usePopoverSync } from "../../../utils/react/usePopoverSync.js";
 import { useEvent } from "../../../_internal/hooks/use-event.js";

package/dist/components/actions/Menu/SubMenuTrigger.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.168.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.169.0 | Cube Dev Team */
 import { usePopoverSync } from "../../../utils/react/usePopoverSync.js";
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { MenuContext, useMenuContext } from "./context.js";

package/dist/components/actions/Menu/SubmenuTriggerContext.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.168.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.169.0 | Cube Dev Team */
 import React from "react";
 //#region src/components/actions/Menu/SubmenuTriggerContext.tsx

package/dist/components/actions/Menu/context.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.168.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.169.0 | Cube Dev Team */
 import React, { useContext } from "react";
 //#region src/components/actions/Menu/context.ts

package/dist/components/actions/Menu/styled.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.168.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.169.0 | Cube Dev Team */
 import { DEFAULT_CLEAR_STYLES } from "../../../data/item-themes.js";
 import { Space } from "../../layout/Space.js";
 import { DEFAULT_BUTTON_STYLES } from "../Button/Button.js";

package/dist/components/actions/index.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.168.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.169.0 | Cube Dev Team */
 import { ItemActionProvider, useItemActionContext } from "./ItemActionContext.js";
 import { openLink, parseTo, performClickHandler, useAction } from "./use-action.js";
 import { ItemAction } from "./ItemAction/ItemAction.js";

package/dist/components/actions/use-action.js CHANGED Viewed

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

package/dist/components/actions/use-anchored-menu.js CHANGED Viewed

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

package/dist/components/actions/use-context-menu.js CHANGED Viewed

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

package/dist/components/content/ActiveZone/ActiveZone.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.168.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.169.0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useFocus as useFocus$1 } from "../../../utils/react/interactions.js";

package/dist/components/content/Alert/Alert.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.168.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.169.0 | Cube Dev Team */
 import themes_default from "../../../data/themes.js";
 import { useAlert } from "./use-alert.js";
 import { tasty } from "@tenphi/tasty";

package/dist/components/content/Alert/use-alert.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.168.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.169.0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { useDeprecationWarning } from "../../../_internal/hooks/use-deprecation-warning.js";
 import { CONTAINER_STYLES, TEXT_STYLES, filterBaseProps } from "@tenphi/tasty";

package/dist/components/content/Avatar/Avatar.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.168.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.169.0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { CONTAINER_STYLES, Element, filterBaseProps } from "@tenphi/tasty";
 import { forwardRef } from "react";

package/dist/components/content/Badge/Badge.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.168.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.169.0 | Cube Dev Team */
 import { _Item } from "../Item/Item.js";
 import themes_default from "../../../data/themes.js";
 import { tasty } from "@tenphi/tasty";

package/dist/components/content/Card/Card.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.168.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.169.0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { CONTAINER_STYLES, filterBaseProps, tasty } from "@tenphi/tasty";
 import { forwardRef } from "react";

package/dist/components/content/Content.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.168.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.169.0 | Cube Dev Team */
 import { extractStyles } from "../../utils/styles.js";
 import { useSlotProps } from "../../utils/react/Slots.js";
 import { CONTAINER_STYLES, TEXT_STYLES, filterBaseProps, tasty } from "@tenphi/tasty";

package/dist/components/content/CopyPasteBlock/CopyPasteBlock.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.168.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.169.0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { useTimer } from "../../../_internal/hooks/use-timer/use-timer.js";
 import { useI18n } from "../../../i18n/useI18n.js";

package/dist/components/content/CopyPasteBlock/CopyPasteBlock.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CopyPasteBlock.js","names":[],"sources":["../../../../src/components/content/CopyPasteBlock/CopyPasteBlock.tsx"],"sourcesContent":["import {\n POSITION_STYLES,\n PositionStyleProps,\n Styles,\n tasty,\n} from '@tenphi/tasty';\nimport copy from 'clipboard-copy';\nimport { ForwardedRef, forwardRef, ReactNode, useState } from 'react';\nimport { TextDropItem, useClipboard } from 'react-aria';\n\nimport { useTimer } from '../../../_internal';\nimport { useI18n } from '../../../i18n';\nimport { CopyIcon } from '../../../icons';\nimport { extractStyles } from '../../../utils/styles';\nimport { Button } from '../../actions';\nimport { useToast } from '../../overlays/Toast';\nimport { Card, CubeCardProps } from '../Card/Card';\n\nconst StyledBlock = tasty({\n styles: {\n display: 'grid',\n flow: 'column',\n placeContent: 'center space-between',\n placeItems: 'center stretch',\n gap: '1x',\n position: 'relative',\n width: 'max 100%',\n color: 'inherit',\n padding: '0 1.5x',\n // height: {\n // '': '4.5x',\n // '[data-size=\"small\"]': '3.5x',\n // '[data-size=\"large\"]': '5.5x',\n // },\n userSelect: 'none',\n\n Label: {\n whiteSpace: 'nowrap',\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n },\n },\n});\n\nconst CopyPasteBlockElement = tasty(Card, {\n qa: 'CopyPasteBlock',\n styles: {\n display: 'grid',\n fill: '#surface-2',\n radius: '1r',\n padding: {\n '': '0 1px',\n ':focus': '0',\n },\n color: {\n '': '#dark',\n error: '#danger-text',\n },\n border: {\n '': 'dashed #dark-03',\n ':focus': '2px dashed #primary-text',\n error: 'dashed #danger',\n },\n cursor: '$pointer',\n preset: {\n '': 't3',\n 'size=large': 't2',\n },\n height: {\n '': '5x',\n 'size=small': '4x',\n 'size=large': '6x',\n },\n boxSizing: 'border-box',\n\n Grid: {\n display: 'grid',\n flow: 'row',\n gridColumns: 'minmax(0, 1fr) min-content',\n placeContent: 'stretch',\n width: 'min 20x',\n radius: '1r',\n position: 'relative',\n },\n\n Shortcut: {\n display: 'inline',\n hide: {\n '': true,\n ':focus & !error': false,\n },\n },\n },\n});\n\nconst CopyButton = tasty(Button, {\n type: 'clear',\n icon: <CopyIcon />,\n styles: {\n placeSelf: 'stretch',\n border: '#clear',\n shadow: {\n '': '0 0 0 1ow #purple-03.0 inset',\n focused: '0 0 0 1ow #purple-03 inset',\n },\n radius: {\n '': '0 1r 1r 0',\n 'multiline \| has-scroll': '1r top-right',\n },\n height: 'auto',\n outline: false,\n },\n});\n\nexport interface CubeCopyPasteBlockProps\n extends Omit<CubeCardProps, 'onPaste' \| 'onCopy'>,\n PositionStyleProps {\n padding?: Styles['padding'];\n /** The code snippet /\n value?: string;\n placeholder?: ReactNode;\n /* The title of the snippet */\n title?: string;\n onPaste?: (text: string) => void \| Promise<void \| string>;\n onCopy?: () => void;\n size?: 'small' \| 'medium' \| 'large';\n}\n\nfunction CopyPasteBlock(\n allProps: CubeCopyPasteBlockProps,\n ref: ForwardedRef<HTMLDivElement>,\n) {\n const {\n value = '',\n onPaste,\n placeholder,\n title,\n size = 'medium',\n ...props\n } = allProps;\n const styles = extractStyles(props, POSITION_STYLES);\n\n const { t } = useI18n();\n const [error, setError] = useState<string \| null>(null);\n const toast = useToast();\n\n const { clipboardProps } = useClipboard({\n async onPaste(items) {\n let pasted = await Promise.all(\n items\n .filter(\n (item) => item.kind === 'text' && item.types.has('text/plain'),\n )\n .map((item) => (item as TextDropItem).getText('text/plain')),\n );\n try {\n await onPaste?.(pasted.join('\\n'));\n } catch (e) {\n setError(String(e));\n }\n },\n getItems() {\n return value\n ? [\n {\n 'text/plain': value,\n },\n ]\n : [];\n },\n onCopy() {\n if (value) {\n toast.success(\n t('copyPasteBlock.copied', '{{title}} copied', {\n title: title \|\| t('copyPasteBlock.defaultTitle', 'Text'),\n }),\n );\n }\n },\n });\n\n useTimer({\n delay: 1000,\n callback() {\n setError(null);\n },\n isDisabled: !error,\n });\n\n async function onCopy() {\n await copy(value);\n\n toast.success(\n t('copyPasteBlock.copied', '{{title}} copied', {\n title: title \|\| t('copyPasteBlock.defaultTitle', 'Text'),\n }),\n );\n }\n\n const pristineValue = value.replace(/\\n/, ' ');\n\n return (\n <CopyPasteBlockElement\n ref={ref}\n mods={{ error: !!error }}\n data-size={size}\n styles={styles}\n tabIndex=\"0\"\n {...props}\n {...clipboardProps}\n >\n <div data-element=\"Grid\">\n <StyledBlock\n data-size={size}\n mods={{\n placeholder: !!placeholder \|\| !value,\n }}\n >\n <div data-element=\"Label\">\n {error != null ? (\n error \|\| t('copyPasteBlock.invalidData', 'Invalid data')\n ) : value ? (\n pristineValue\n ) : (\n <>\n {placeholder\n ? placeholder\n : t('copyPasteBlock.selectAndPaste', 'Select and paste')}\n </>\n )}\n </div>\n <span data-element=\"Shortcut\">\n <kbd>Cmd</kbd> + <kbd>V</kbd>\n </span>\n </StyledBlock>\n {value && !error && (\n <CopyButton\n size={size}\n aria-label={t(\n 'copyPasteBlock.copyToClipboard',\n 'Copy {{title}} to clipboard',\n {\n title: title \|\| t('copyPasteBlock.defaultTitle', 'Text'),\n },\n )}\n onPress={onCopy}\n />\n )}\n </div>\n </CopyPasteBlockElement>\n );\n}\n\nconst _CopyPasteBlock = forwardRef(CopyPasteBlock);\n\n_CopyPasteBlock.displayName = 'CopyPasteBlock';\n\nexport { _CopyPasteBlock as CopyPasteBlock };\n"],"mappings":"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"}
1	+ {"version":3,"file":"CopyPasteBlock.js","names":[],"sources":["../../../../src/components/content/CopyPasteBlock/CopyPasteBlock.tsx"],"sourcesContent":["import {\n POSITION_STYLES,\n PositionStyleProps,\n Styles,\n tasty,\n} from '@tenphi/tasty';\nimport copy from 'clipboard-copy';\nimport { ForwardedRef, forwardRef, ReactNode, useState } from 'react';\nimport { TextDropItem, useClipboard } from 'react-aria';\n\nimport { useTimer } from '../../../_internal';\nimport { useI18n } from '../../../i18n';\nimport { CopyIcon } from '../../../icons/CopyIcon';\nimport { extractStyles } from '../../../utils/styles';\nimport { Button } from '../../actions';\nimport { useToast } from '../../overlays/Toast';\nimport { Card, CubeCardProps } from '../Card/Card';\n\nconst StyledBlock = tasty({\n styles: {\n display: 'grid',\n flow: 'column',\n placeContent: 'center space-between',\n placeItems: 'center stretch',\n gap: '1x',\n position: 'relative',\n width: 'max 100%',\n color: 'inherit',\n padding: '0 1.5x',\n // height: {\n // '': '4.5x',\n // '[data-size=\"small\"]': '3.5x',\n // '[data-size=\"large\"]': '5.5x',\n // },\n userSelect: 'none',\n\n Label: {\n whiteSpace: 'nowrap',\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n },\n },\n});\n\nconst CopyPasteBlockElement = tasty(Card, {\n qa: 'CopyPasteBlock',\n styles: {\n display: 'grid',\n fill: '#surface-2',\n radius: '1r',\n padding: {\n '': '0 1px',\n ':focus': '0',\n },\n color: {\n '': '#dark',\n error: '#danger-text',\n },\n border: {\n '': 'dashed #dark-03',\n ':focus': '2px dashed #primary-text',\n error: 'dashed #danger',\n },\n cursor: '$pointer',\n preset: {\n '': 't3',\n 'size=large': 't2',\n },\n height: {\n '': '5x',\n 'size=small': '4x',\n 'size=large': '6x',\n },\n boxSizing: 'border-box',\n\n Grid: {\n display: 'grid',\n flow: 'row',\n gridColumns: 'minmax(0, 1fr) min-content',\n placeContent: 'stretch',\n width: 'min 20x',\n radius: '1r',\n position: 'relative',\n },\n\n Shortcut: {\n display: 'inline',\n hide: {\n '': true,\n ':focus & !error': false,\n },\n },\n },\n});\n\nconst CopyButton = tasty(Button, {\n type: 'clear',\n icon: <CopyIcon />,\n styles: {\n placeSelf: 'stretch',\n border: '#clear',\n shadow: {\n '': '0 0 0 1ow #purple-03.0 inset',\n focused: '0 0 0 1ow #purple-03 inset',\n },\n radius: {\n '': '0 1r 1r 0',\n 'multiline \| has-scroll': '1r top-right',\n },\n height: 'auto',\n outline: false,\n },\n});\n\nexport interface CubeCopyPasteBlockProps\n extends Omit<CubeCardProps, 'onPaste' \| 'onCopy'>,\n PositionStyleProps {\n padding?: Styles['padding'];\n /** The code snippet /\n value?: string;\n placeholder?: ReactNode;\n /* The title of the snippet */\n title?: string;\n onPaste?: (text: string) => void \| Promise<void \| string>;\n onCopy?: () => void;\n size?: 'small' \| 'medium' \| 'large';\n}\n\nfunction CopyPasteBlock(\n allProps: CubeCopyPasteBlockProps,\n ref: ForwardedRef<HTMLDivElement>,\n) {\n const {\n value = '',\n onPaste,\n placeholder,\n title,\n size = 'medium',\n ...props\n } = allProps;\n const styles = extractStyles(props, POSITION_STYLES);\n\n const { t } = useI18n();\n const [error, setError] = useState<string \| null>(null);\n const toast = useToast();\n\n const { clipboardProps } = useClipboard({\n async onPaste(items) {\n let pasted = await Promise.all(\n items\n .filter(\n (item) => item.kind === 'text' && item.types.has('text/plain'),\n )\n .map((item) => (item as TextDropItem).getText('text/plain')),\n );\n try {\n await onPaste?.(pasted.join('\\n'));\n } catch (e) {\n setError(String(e));\n }\n },\n getItems() {\n return value\n ? [\n {\n 'text/plain': value,\n },\n ]\n : [];\n },\n onCopy() {\n if (value) {\n toast.success(\n t('copyPasteBlock.copied', '{{title}} copied', {\n title: title \|\| t('copyPasteBlock.defaultTitle', 'Text'),\n }),\n );\n }\n },\n });\n\n useTimer({\n delay: 1000,\n callback() {\n setError(null);\n },\n isDisabled: !error,\n });\n\n async function onCopy() {\n await copy(value);\n\n toast.success(\n t('copyPasteBlock.copied', '{{title}} copied', {\n title: title \|\| t('copyPasteBlock.defaultTitle', 'Text'),\n }),\n );\n }\n\n const pristineValue = value.replace(/\\n/, ' ');\n\n return (\n <CopyPasteBlockElement\n ref={ref}\n mods={{ error: !!error }}\n data-size={size}\n styles={styles}\n tabIndex=\"0\"\n {...props}\n {...clipboardProps}\n >\n <div data-element=\"Grid\">\n <StyledBlock\n data-size={size}\n mods={{\n placeholder: !!placeholder \|\| !value,\n }}\n >\n <div data-element=\"Label\">\n {error != null ? (\n error \|\| t('copyPasteBlock.invalidData', 'Invalid data')\n ) : value ? (\n pristineValue\n ) : (\n <>\n {placeholder\n ? placeholder\n : t('copyPasteBlock.selectAndPaste', 'Select and paste')}\n </>\n )}\n </div>\n <span data-element=\"Shortcut\">\n <kbd>Cmd</kbd> + <kbd>V</kbd>\n </span>\n </StyledBlock>\n {value && !error && (\n <CopyButton\n size={size}\n aria-label={t(\n 'copyPasteBlock.copyToClipboard',\n 'Copy {{title}} to clipboard',\n {\n title: title \|\| t('copyPasteBlock.defaultTitle', 'Text'),\n },\n )}\n onPress={onCopy}\n />\n )}\n </div>\n </CopyPasteBlockElement>\n );\n}\n\nconst _CopyPasteBlock = forwardRef(CopyPasteBlock);\n\n_CopyPasteBlock.displayName = 'CopyPasteBlock';\n\nexport { _CopyPasteBlock as CopyPasteBlock };\n"],"mappings":"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"}

package/dist/components/content/CopySnippet/CopySnippet.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.168.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.169.0 | Cube Dev Team */
 import { _Tooltip } from "../../overlays/Tooltip/Tooltip.js";
 import { TooltipTrigger } from "../../overlays/Tooltip/TooltipTrigger.js";
 import { useI18n } from "../../../i18n/useI18n.js";

package/dist/components/content/CopySnippet/CopySnippet.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CopySnippet.js","names":["PrismCode","Tooltip"],"sources":["../../../../src/components/content/CopySnippet/CopySnippet.tsx"],"sourcesContent":["import { tasty } from '@tenphi/tasty';\nimport copy from 'clipboard-copy';\nimport { ReactNode, useMemo, useState } from 'react';\n\nimport { useI18n } from '../../../i18n';\nimport { CopyIcon, EyeIcon, EyeInvisibleIcon } from '../../../icons';\nimport { Action, Button } from '../../actions';\nimport {\n CubePrismCodeProps,\n PrismCode,\n} from '../../content/PrismCode/PrismCode';\nimport { useToast } from '../../overlays/Toast';\nimport { Tooltip } from '../../overlays/Tooltip/Tooltip';\nimport { TooltipTrigger } from '../../overlays/Tooltip/TooltipTrigger';\nimport { Card, CubeCardProps } from '../Card/Card';\n\nconst ActionElement = tasty(Action, {\n styles: {\n display: 'block',\n cursor: 'default',\n width: '100%',\n },\n});\n\nconst StyledBlock = tasty({\n styles: {\n position: 'relative',\n overflow: {\n '': 'auto clip',\n multiline: 'auto',\n },\n width: 'initial auto 100%',\n height: {\n '': 'max 5x',\n multiline: 'auto',\n },\n boxSizing: 'border-box',\n whiteSpace: {\n '': 'initial',\n nowrap: 'nowrap',\n },\n scrollbar: 'styled',\n padding: '1.125x 1.5x',\n fade: {\n '': 'right 2x',\n multiline: false,\n },\n\n Code: {\n $: 'code',\n preset: {\n '': 's3',\n serif: 't3',\n },\n // `s3` carries `fontFamily: var(--font-mono)` but `t3` sets no family at\n // all, so the preset alone cannot express \"serif\". Left to the preset, the\n // `serif` variant would inherit the `<code>` element's UA monospace\n // default and render monospace anyway. Keep the family explicit:\n // `font: 'monospace'` for the default, `font: true` for the design\n // system's default (non-mono) stack under `serif`.\n font: {\n '': 'monospace',\n serif: true,\n },\n // The wrapping itself (`white-space` / `overflow-wrap` on the `<code>`)\n // is owned by `PrismCode` via its `isWrapped` prop, which this component\n // forwards.\n },\n },\n});\n\nconst ButtonContainer = tasty({\n styles: {\n position: 'relative',\n display: 'flex',\n flow: {\n '': 'row-reverse',\n multiline: 'column',\n },\n placeContent: 'start',\n\n '$button-size': {\n '': '5x',\n multiline: '4x',\n },\n\n '$first-button-radius': {\n '': '0 1r 1r 0',\n multiline: '0 1r 0 0',\n },\n\n '$last-button-radius': {\n '': '0',\n multiline: '0 0 0 1r',\n },\n\n '$first-and-last-button-radius': {\n '': '0 1r 1r 0',\n multiline: '0 1r 0 1r',\n },\n\n // Make sure there's a small gap between buttons and the content\n border: 'left #clear',\n },\n});\n\nconst CopySnippetElement = tasty(Card, {\n qa: 'CopySnippet',\n styles: {\n display: 'grid',\n gridRows: 'minmax(0, 1fr)',\n fill: '#surface-2',\n border: 0,\n padding: 0,\n preset: 'default',\n radius: '1r',\n overflow: 'hidden',\n height: 'max-content',\n\n Grid: {\n display: 'grid',\n flow: 'row',\n gridColumns: 'minmax(0, 1fr) auto',\n gridRows: 'minmax(0, 1fr)',\n width: 'min 20x',\n position: 'relative',\n },\n },\n});\n\nconst ActionButton = tasty(Button, {\n type: 'clear',\n styles: {\n width: '4x',\n padding: 0,\n placeSelf: 'stretch',\n border: '#clear',\n shadow: {\n '': 'inset 0 0 0 1ow #purple-03.0',\n focused: 'inset 0 0 0 1ow #purple-03',\n },\n outline: false,\n height: '$button-size',\n radius: {\n '': 0,\n ':last-child': '$last-button-radius',\n ':first-child': '$first-button-radius',\n ':first-child & :last-child': '$first-and-last-button-radius',\n },\n },\n});\n\nconst CopyButton = tasty(ActionButton, {\n icon: <CopyIcon />,\n});\n\nconst ShowButton = tasty(ActionButton, {});\n\nexport interface CubeCopySnippetProps extends CubeCardProps {\n /** The code snippet /\n code: string;\n /* The title of the snippet /\n title?: string;\n /* Whether the snippet is single-lined /\n nowrap?: boolean;\n /\n Soft-wrap long content onto multiple lines instead of scrolling it\n * horizontally. The block grows vertically to fit (so even a single long line\n * is fully readable rather than clamped), and unbreakable runs like URLs,\n * tokens and identifiers wrap too. Useful for error messages and logs.\n * Has no effect when `nowrap` is set. Note this is a different axis from\n * `nowrap`: `nowrap` collapses real newlines into one scrolling line, while\n * `isWrapped` breaks long lines that would otherwise scroll.\n /\n isWrapped?: boolean;\n /* The prefix for each line of code. Useful for bash snippets. /\n prefix?: string;\n /* The code language of the snippet /\n language?: CubePrismCodeProps['language'];\n /* Whether the snippet uses a serif font /\n serif?: boolean;\n /* Whether to show the tooltip with the full content */\n showTooltip?: boolean;\n hideText?: string[] \| string \| boolean;\n actions?: ReactNode;\n}\n\n// const HIDDEN_SYMBOL = '●';\nconst HIDDEN_SYMBOL = '•';\n\nfunction replaceSymbolsToHidden(str: string) {\n return HIDDEN_SYMBOL.repeat(str.length);\n}\n\nfunction CopySnippet(allProps: CubeCopySnippetProps) {\n const { t } = useI18n();\n\n const {\n code = '',\n title = t('copySnippet.title', 'Code example'),\n nowrap,\n isWrapped,\n prefix = '',\n language,\n serif,\n actions,\n showTooltip = false,\n hideText,\n ...props\n } = allProps;\n\n const toast = useToast();\n\n const [showHidden, setShowHidden] = useState(false);\n\n async function onCopy() {\n await copy(code);\n\n toast.success(t('copySnippet.copied', '{{title}} copied', { title }));\n }\n\n const pristineCode = code.replace(/\\n$/, '');\n\n const multiline = pristineCode.includes('\\n') && !nowrap;\n // `isWrapped` reuses the multiline block layout (auto height, no right fade,\n // copy button on top) so wrapped content grows vertically instead of being\n // clamped to the single-line height. `nowrap` (force one scrolling line) wins\n // over it.\n const shouldWrap = !!isWrapped && !nowrap;\n let formattedCode = pristineCode\n .replace(/\\r/g, '')\n .split(/\\n/g)\n .map((line) => `${prefix}${line}`)\n .join('\\n')\n .trim();\n\n if (!showHidden) {\n if (hideText === true) {\n formattedCode = replaceSymbolsToHidden(formattedCode);\n } else if (typeof hideText === 'string') {\n formattedCode = formattedCode.replaceAll(\n hideText,\n replaceSymbolsToHidden(hideText),\n );\n } else if (Array.isArray(hideText)) {\n hideText.forEach((text) => {\n formattedCode = formattedCode.replaceAll(\n text,\n replaceSymbolsToHidden(text),\n );\n });\n }\n }\n\n const mods = useMemo(() => {\n return {\n nowrap,\n multiline: multiline \|\| shouldWrap,\n serif,\n hidden: !!hideText,\n };\n }, [nowrap, multiline, shouldWrap, hideText, serif]);\n\n const Snippet = (\n <CopySnippetElement mods={mods} {...props}>\n <div data-element=\"Grid\">\n <StyledBlock mods={mods}>\n <PrismCode\n style={{ margin: 0, overflow: 'visible' }}\n code={formattedCode}\n language={language \|\| 'javascript'}\n isWrapped={shouldWrap}\n />\n </StyledBlock>\n <ButtonContainer mods={mods}>\n <CopyButton\n aria-label={t(\n 'copySnippet.copyToClipboard',\n 'Copy {{title}} to clipboard',\n { title },\n )}\n onPress={onCopy}\n />\n {hideText && (\n <ShowButton\n aria-label={t('copySnippet.showHiddenParts', 'Show hidden parts')}\n icon={showHidden ? <EyeInvisibleIcon /> : <EyeIcon />}\n onPress={() => setShowHidden(!showHidden)}\n />\n )}\n {actions}\n </ButtonContainer>\n </div>\n </CopySnippetElement>\n );\n\n if (showTooltip) {\n return (\n <TooltipTrigger>\n <ActionElement>{Snippet}</ActionElement>\n <Tooltip>{formattedCode}</Tooltip>\n </TooltipTrigger>\n );\n }\n\n return Snippet;\n}\n\nconst _CopySnippet = Object.assign(\n CopySnippet as typeof CopySnippet & {\n Button: typeof ActionButton;\n },\n {\n Button: ActionButton,\n },\n);\n\n(_CopySnippet as any).displayName = 'CopySnippet';\n\nexport { _CopySnippet as CopySnippet };\n"],"mappings":"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"}
1	+ {"version":3,"file":"CopySnippet.js","names":["PrismCode","Tooltip"],"sources":["../../../../src/components/content/CopySnippet/CopySnippet.tsx"],"sourcesContent":["import { tasty } from '@tenphi/tasty';\nimport copy from 'clipboard-copy';\nimport { ReactNode, useMemo, useState } from 'react';\n\nimport { useI18n } from '../../../i18n';\nimport { CopyIcon } from '../../../icons/CopyIcon';\nimport { EyeIcon } from '../../../icons/EyeIcon';\nimport { EyeInvisibleIcon } from '../../../icons/EyeInvisibleIcon';\nimport { Action, Button } from '../../actions';\nimport {\n CubePrismCodeProps,\n PrismCode,\n} from '../../content/PrismCode/PrismCode';\nimport { useToast } from '../../overlays/Toast';\nimport { Tooltip } from '../../overlays/Tooltip/Tooltip';\nimport { TooltipTrigger } from '../../overlays/Tooltip/TooltipTrigger';\nimport { Card, CubeCardProps } from '../Card/Card';\n\nconst ActionElement = tasty(Action, {\n styles: {\n display: 'block',\n cursor: 'default',\n width: '100%',\n },\n});\n\nconst StyledBlock = tasty({\n styles: {\n position: 'relative',\n overflow: {\n '': 'auto clip',\n multiline: 'auto',\n },\n width: 'initial auto 100%',\n height: {\n '': 'max 5x',\n multiline: 'auto',\n },\n boxSizing: 'border-box',\n whiteSpace: {\n '': 'initial',\n nowrap: 'nowrap',\n },\n scrollbar: 'styled',\n padding: '1.125x 1.5x',\n fade: {\n '': 'right 2x',\n multiline: false,\n },\n\n Code: {\n $: 'code',\n preset: {\n '': 's3',\n serif: 't3',\n },\n // `s3` carries `fontFamily: var(--font-mono)` but `t3` sets no family at\n // all, so the preset alone cannot express \"serif\". Left to the preset, the\n // `serif` variant would inherit the `<code>` element's UA monospace\n // default and render monospace anyway. Keep the family explicit:\n // `font: 'monospace'` for the default, `font: true` for the design\n // system's default (non-mono) stack under `serif`.\n font: {\n '': 'monospace',\n serif: true,\n },\n // The wrapping itself (`white-space` / `overflow-wrap` on the `<code>`)\n // is owned by `PrismCode` via its `isWrapped` prop, which this component\n // forwards.\n },\n },\n});\n\nconst ButtonContainer = tasty({\n styles: {\n position: 'relative',\n display: 'flex',\n flow: {\n '': 'row-reverse',\n multiline: 'column',\n },\n placeContent: 'start',\n\n '$button-size': {\n '': '5x',\n multiline: '4x',\n },\n\n '$first-button-radius': {\n '': '0 1r 1r 0',\n multiline: '0 1r 0 0',\n },\n\n '$last-button-radius': {\n '': '0',\n multiline: '0 0 0 1r',\n },\n\n '$first-and-last-button-radius': {\n '': '0 1r 1r 0',\n multiline: '0 1r 0 1r',\n },\n\n // Make sure there's a small gap between buttons and the content\n border: 'left #clear',\n },\n});\n\nconst CopySnippetElement = tasty(Card, {\n qa: 'CopySnippet',\n styles: {\n display: 'grid',\n gridRows: 'minmax(0, 1fr)',\n fill: '#surface-2',\n border: 0,\n padding: 0,\n preset: 'default',\n radius: '1r',\n overflow: 'hidden',\n height: 'max-content',\n\n Grid: {\n display: 'grid',\n flow: 'row',\n gridColumns: 'minmax(0, 1fr) auto',\n gridRows: 'minmax(0, 1fr)',\n width: 'min 20x',\n position: 'relative',\n },\n },\n});\n\nconst ActionButton = tasty(Button, {\n type: 'clear',\n styles: {\n width: '4x',\n padding: 0,\n placeSelf: 'stretch',\n border: '#clear',\n shadow: {\n '': 'inset 0 0 0 1ow #purple-03.0',\n focused: 'inset 0 0 0 1ow #purple-03',\n },\n outline: false,\n height: '$button-size',\n radius: {\n '': 0,\n ':last-child': '$last-button-radius',\n ':first-child': '$first-button-radius',\n ':first-child & :last-child': '$first-and-last-button-radius',\n },\n },\n});\n\nconst CopyButton = tasty(ActionButton, {\n icon: <CopyIcon />,\n});\n\nconst ShowButton = tasty(ActionButton, {});\n\nexport interface CubeCopySnippetProps extends CubeCardProps {\n /** The code snippet /\n code: string;\n /* The title of the snippet /\n title?: string;\n /* Whether the snippet is single-lined /\n nowrap?: boolean;\n /\n Soft-wrap long content onto multiple lines instead of scrolling it\n * horizontally. The block grows vertically to fit (so even a single long line\n * is fully readable rather than clamped), and unbreakable runs like URLs,\n * tokens and identifiers wrap too. Useful for error messages and logs.\n * Has no effect when `nowrap` is set. Note this is a different axis from\n * `nowrap`: `nowrap` collapses real newlines into one scrolling line, while\n * `isWrapped` breaks long lines that would otherwise scroll.\n /\n isWrapped?: boolean;\n /* The prefix for each line of code. Useful for bash snippets. /\n prefix?: string;\n /* The code language of the snippet /\n language?: CubePrismCodeProps['language'];\n /* Whether the snippet uses a serif font /\n serif?: boolean;\n /* Whether to show the tooltip with the full content */\n showTooltip?: boolean;\n hideText?: string[] \| string \| boolean;\n actions?: ReactNode;\n}\n\n// const HIDDEN_SYMBOL = '●';\nconst HIDDEN_SYMBOL = '•';\n\nfunction replaceSymbolsToHidden(str: string) {\n return HIDDEN_SYMBOL.repeat(str.length);\n}\n\nfunction CopySnippet(allProps: CubeCopySnippetProps) {\n const { t } = useI18n();\n\n const {\n code = '',\n title = t('copySnippet.title', 'Code example'),\n nowrap,\n isWrapped,\n prefix = '',\n language,\n serif,\n actions,\n showTooltip = false,\n hideText,\n ...props\n } = allProps;\n\n const toast = useToast();\n\n const [showHidden, setShowHidden] = useState(false);\n\n async function onCopy() {\n await copy(code);\n\n toast.success(t('copySnippet.copied', '{{title}} copied', { title }));\n }\n\n const pristineCode = code.replace(/\\n$/, '');\n\n const multiline = pristineCode.includes('\\n') && !nowrap;\n // `isWrapped` reuses the multiline block layout (auto height, no right fade,\n // copy button on top) so wrapped content grows vertically instead of being\n // clamped to the single-line height. `nowrap` (force one scrolling line) wins\n // over it.\n const shouldWrap = !!isWrapped && !nowrap;\n let formattedCode = pristineCode\n .replace(/\\r/g, '')\n .split(/\\n/g)\n .map((line) => `${prefix}${line}`)\n .join('\\n')\n .trim();\n\n if (!showHidden) {\n if (hideText === true) {\n formattedCode = replaceSymbolsToHidden(formattedCode);\n } else if (typeof hideText === 'string') {\n formattedCode = formattedCode.replaceAll(\n hideText,\n replaceSymbolsToHidden(hideText),\n );\n } else if (Array.isArray(hideText)) {\n hideText.forEach((text) => {\n formattedCode = formattedCode.replaceAll(\n text,\n replaceSymbolsToHidden(text),\n );\n });\n }\n }\n\n const mods = useMemo(() => {\n return {\n nowrap,\n multiline: multiline \|\| shouldWrap,\n serif,\n hidden: !!hideText,\n };\n }, [nowrap, multiline, shouldWrap, hideText, serif]);\n\n const Snippet = (\n <CopySnippetElement mods={mods} {...props}>\n <div data-element=\"Grid\">\n <StyledBlock mods={mods}>\n <PrismCode\n style={{ margin: 0, overflow: 'visible' }}\n code={formattedCode}\n language={language \|\| 'javascript'}\n isWrapped={shouldWrap}\n />\n </StyledBlock>\n <ButtonContainer mods={mods}>\n <CopyButton\n aria-label={t(\n 'copySnippet.copyToClipboard',\n 'Copy {{title}} to clipboard',\n { title },\n )}\n onPress={onCopy}\n />\n {hideText && (\n <ShowButton\n aria-label={t('copySnippet.showHiddenParts', 'Show hidden parts')}\n icon={showHidden ? <EyeInvisibleIcon /> : <EyeIcon />}\n onPress={() => setShowHidden(!showHidden)}\n />\n )}\n {actions}\n </ButtonContainer>\n </div>\n </CopySnippetElement>\n );\n\n if (showTooltip) {\n return (\n <TooltipTrigger>\n <ActionElement>{Snippet}</ActionElement>\n <Tooltip>{formattedCode}</Tooltip>\n </TooltipTrigger>\n );\n }\n\n return Snippet;\n}\n\nconst _CopySnippet = Object.assign(\n CopySnippet as typeof CopySnippet & {\n Button: typeof ActionButton;\n },\n {\n Button: ActionButton,\n },\n);\n\n(_CopySnippet as any).displayName = 'CopySnippet';\n\nexport { _CopySnippet as CopySnippet };\n"],"mappings":";;;;;;;;;;;;;;;;;;AAkBA,MAAM,gBAAgB,MAAM,QAAQ,EAClC,QAAQ;CACN,SAAS;CACT,QAAQ;CACR,OAAO;CACR,EACF,CAAC;AAEF,MAAM,cAAc,MAAM,EACxB,QAAQ;CACN,UAAU;CACV,UAAU;EACR,IAAI;EACJ,WAAW;EACZ;CACD,OAAO;CACP,QAAQ;EACN,IAAI;EACJ,WAAW;EACZ;CACD,WAAW;CACX,YAAY;EACV,IAAI;EACJ,QAAQ;EACT;CACD,WAAW;CACX,SAAS;CACT,MAAM;EACJ,IAAI;EACJ,WAAW;EACZ;CAED,MAAM;EACJ,GAAG;EACH,QAAQ;GACN,IAAI;GACJ,OAAO;GACR;EAOD,MAAM;GACJ,IAAI;GACJ,OAAO;GACR;EAIF;CACF,EACF,CAAC;AAEF,MAAM,kBAAkB,MAAM,EAC5B,QAAQ;CACN,UAAU;CACV,SAAS;CACT,MAAM;EACJ,IAAI;EACJ,WAAW;EACZ;CACD,cAAc;CAEd,gBAAgB;EACd,IAAI;EACJ,WAAW;EACZ;CAED,wBAAwB;EACtB,IAAI;EACJ,WAAW;EACZ;CAED,uBAAuB;EACrB,IAAI;EACJ,WAAW;EACZ;CAED,iCAAiC;EAC/B,IAAI;EACJ,WAAW;EACZ;CAGD,QAAQ;CACT,EACF,CAAC;AAEF,MAAM,qBAAqB,MAAM,MAAM;CACrC,IAAI;CACJ,QAAQ;EACN,SAAS;EACT,UAAU;EACV,MAAM;EACN,QAAQ;EACR,SAAS;EACT,QAAQ;EACR,QAAQ;EACR,UAAU;EACV,QAAQ;EAER,MAAM;GACJ,SAAS;GACT,MAAM;GACN,aAAa;GACb,UAAU;GACV,OAAO;GACP,UAAU;GACX;EACF;CACF,CAAC;AAEF,MAAM,eAAe,MAAM,QAAQ;CACjC,MAAM;CACN,QAAQ;EACN,OAAO;EACP,SAAS;EACT,WAAW;EACX,QAAQ;EACR,QAAQ;GACN,IAAI;GACJ,SAAS;GACV;EACD,SAAS;EACT,QAAQ;EACR,QAAQ;GACN,IAAI;GACJ,eAAe;GACf,gBAAgB;GAChB,8BAA8B;GAC/B;EACF;CACF,CAAC;AAEF,MAAM,aAAa,MAAM,cAAc,EACrC,MAAM,oBAAC,aAAW,EACnB,CAAC;AAEF,MAAM,aAAa,MAAM,cAAc,EAAE,CAAC;AAgC1C,MAAM,gBAAgB;AAEtB,SAAS,uBAAuB,KAAa;AAC3C,QAAO,cAAc,OAAO,IAAI,OAAO;;AAGzC,SAAS,YAAY,UAAgC;CACnD,MAAM,EAAE,MAAM,SAAS;CAEvB,MAAM,EACJ,OAAO,IACP,QAAQ,EAAE,qBAAqB,eAAe,EAC9C,QACA,WACA,SAAS,IACT,UACA,OACA,SACA,cAAc,OACd,UACA,GAAG,UACD;CAEJ,MAAM,QAAQ,UAAU;CAExB,MAAM,CAAC,YAAY,iBAAiB,SAAS,MAAM;CAEnD,eAAe,SAAS;AACtB,QAAM,KAAK,KAAK;AAEhB,QAAM,QAAQ,EAAE,sBAAsB,oBAAoB,EAAE,OAAO,CAAC,CAAC;;CAGvE,MAAM,eAAe,KAAK,QAAQ,OAAO,GAAG;CAE5C,MAAM,YAAY,aAAa,SAAS,KAAK,IAAI,CAAC;CAKlD,MAAM,aAAa,CAAC,CAAC,aAAa,CAAC;CACnC,IAAI,gBAAgB,aACjB,QAAQ,OAAO,GAAG,CAClB,MAAM,MAAM,CACZ,KAAK,SAAS,GAAG,SAAS,OAAO,CACjC,KAAK,KAAK,CACV,MAAM;AAET,KAAI,CAAC,YACH;MAAI,aAAa,KACf,iBAAgB,uBAAuB,cAAc;WAC5C,OAAO,aAAa,SAC7B,iBAAgB,cAAc,WAC5B,UACA,uBAAuB,SAAS,CACjC;WACQ,MAAM,QAAQ,SAAS,CAChC,UAAS,SAAS,SAAS;AACzB,mBAAgB,cAAc,WAC5B,MACA,uBAAuB,KAAK,CAC7B;IACD;;CAIN,MAAM,OAAO,cAAc;AACzB,SAAO;GACL;GACA,WAAW,aAAa;GACxB;GACA,QAAQ,CAAC,CAAC;GACX;IACA;EAAC;EAAQ;EAAW;EAAY;EAAU;EAAM,CAAC;CAEpD,MAAM,UACJ,oBAAC;EAAyB;EAAM,GAAI;YAClC,qBAAC;GAAI,gBAAa;cAChB,oBAAC;IAAkB;cACjB,oBAACA;KACC,OAAO;MAAE,QAAQ;MAAG,UAAU;MAAW;KACzC,MAAM;KACN,UAAU,YAAY;KACtB,WAAW;MACX;KACU,EACd,qBAAC;IAAsB;;KACrB,oBAAC;MACC,cAAY,EACV,+BACA,+BACA,EAAE,OAAO,CACV;MACD,SAAS;OACT;KACD,YACC,oBAAC;MACC,cAAY,EAAE,+BAA+B,oBAAoB;MACjE,MAAM,aAAa,oBAAC,qBAAmB,GAAG,oBAAC,YAAU;MACrD,eAAe,cAAc,CAAC,WAAW;OACzC;KAEH;;KACe;IACd;GACa;AAGvB,KAAI,YACF,QACE,qBAAC,6BACC,oBAAC,2BAAe,UAAwB,EACxC,oBAACC,sBAAS,gBAAwB,IACnB;AAIrB,QAAO;;AAGT,MAAM,eAAe,OAAO,OAC1B,aAGA,EACE,QAAQ,cACT,CACF;AAED,AAAC,aAAqB,cAAc"}

package/dist/components/content/Disclosure/Disclosure.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.168.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.169.0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeRefs } from "../../../utils/react/useCombinedRefs.js";
 import { DisplayTransition } from "../../helpers/DisplayTransition/DisplayTransition.js";

package/dist/components/content/Disclosure/Disclosure.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Disclosure.js","names":["ItemButton","useId"],"sources":["../../../../src/components/content/Disclosure/Disclosure.tsx"],"sourcesContent":["import {\n BaseProps,\n BasePropsWithoutChildren,\n OUTER_STYLES,\n OuterStyleProps,\n Styles,\n tasty,\n} from '@tenphi/tasty';\nimport {\n createContext,\n forwardRef,\n Key,\n ReactNode,\n RefObject,\n useContext,\n useMemo,\n useRef,\n} from 'react';\nimport { mergeProps, useDisclosure, useId } from 'react-aria';\nimport {\n DisclosureGroupState,\n DisclosureState,\n useDisclosureGroupState,\n useDisclosureState,\n} from 'react-stately';\n\nimport { RightIcon } from '../../../icons';\nimport { mergeRefs } from '../../../utils/react';\nimport { extractStyles } from '../../../utils/styles';\nimport { CubeItemButtonProps, ItemButton } from '../../actions/ItemButton';\nimport { DisplayTransition } from '../../helpers';\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport interface DisclosureStateContext {\n isExpanded: boolean;\n toggle: () => void;\n expand: () => void;\n collapse: () => void;\n}\n\ninterface DisclosureContextValue {\n state: DisclosureState;\n buttonProps: Record<string, unknown>;\n panelProps: Record<string, unknown>;\n panelRef: RefObject<HTMLDivElement \| null>;\n isDisabled: boolean;\n isExpanded: boolean;\n shape: 'default' \| 'card' \| 'sharp';\n transitionDuration?: number;\n triggerProps?: Partial<CubeItemButtonProps>;\n contentStyles?: Styles;\n}\n\ninterface DisclosureGroupContextValue {\n groupState: DisclosureGroupState;\n triggerProps?: Partial<CubeItemButtonProps>;\n contentStyles?: Styles;\n}\n\nexport interface CubeDisclosureProps\n extends BasePropsWithoutChildren,\n OuterStyleProps {\n /** Controls expanded state in controlled mode /\n isExpanded?: boolean;\n /* Initial expanded state in uncontrolled mode /\n defaultExpanded?: boolean;\n /* Callback fired when expanded state changes /\n onExpandedChange?: (isExpanded: boolean) => void;\n /* Disables trigger interactions and force-closes the content /\n isDisabled?: boolean;\n /* Render-prop alternative to achieve custom trigger markup /\n children?: ReactNode \| ((state: DisclosureStateContext) => ReactNode);\n /* Visual shape variant /\n shape?: 'default' \| 'card' \| 'sharp';\n /* Duration for DisplayTransition animation in milliseconds /\n transitionDuration?: number;\n}\n\nexport interface CubeDisclosureTriggerProps\n extends Omit<CubeItemButtonProps, 'onPress' \| 'isDisabled'> {\n /* Children content for the trigger /\n children?: ReactNode;\n}\n\nexport interface CubeDisclosureContentProps extends BaseProps {\n /* Children content for the panel /\n children?: ReactNode;\n}\n\nexport interface CubeDisclosureGroupProps extends BaseProps, OuterStyleProps {\n /* Allow more than one disclosure to be open /\n allowsMultipleExpanded?: boolean;\n /* Controlled expanded keys /\n expandedKeys?: Iterable<Key>;\n /* Uncontrolled default expanded keys /\n defaultExpandedKeys?: Iterable<Key>;\n /* Change handler providing the full expanded keys Set /\n onExpandedChange?: (keys: Set<Key>) => void;\n /* Disable all disclosures within group and force-close their content /\n isDisabled?: boolean;\n /* Props forwarded to all ItemButton triggers in the group /\n triggerProps?: Partial<CubeItemButtonProps>;\n /* Optional panel styles applied to all Content panels in the group /\n contentStyles?: Styles;\n children: ReactNode;\n}\n\nexport interface CubeDisclosureItemProps\n extends Omit<BasePropsWithoutChildren, 'id'>,\n OuterStyleProps {\n /* Unique identifier for the disclosure item in a group /\n id?: Key;\n /* Children content /\n children?: ReactNode;\n /* Disables trigger interactions and force-closes the content /\n isDisabled?: boolean;\n /* Controls expanded state in controlled mode /\n isExpanded?: boolean;\n /* Initial expanded state in uncontrolled mode /\n defaultExpanded?: boolean;\n /* Callback fired when expanded state changes /\n onExpandedChange?: (isExpanded: boolean) => void;\n /* Visual shape variant */\n shape?: 'default' \| 'card' \| 'sharp';\n}\n\n// ============================================================================\n// Contexts\n// ============================================================================\n\nconst DisclosureContext = createContext<DisclosureContextValue \| null>(null);\nconst DisclosureGroupContext =\n createContext<DisclosureGroupContextValue \| null>(null);\n\nfunction useDisclosureContext(): DisclosureContextValue {\n const context = useContext(DisclosureContext);\n\n if (!context) {\n throw new Error(\n 'Disclosure.Trigger and Disclosure.Content must be used within a Disclosure',\n );\n }\n\n return context;\n}\n\nfunction useDisclosureGroupContext(): DisclosureGroupContextValue \| null {\n return useContext(DisclosureGroupContext);\n}\n\n// ============================================================================\n// Styled Components\n// ============================================================================\n\nconst DisclosureRoot = tasty({\n qa: 'Disclosure',\n styles: {\n display: 'flex',\n flow: 'column',\n gap: 0,\n position: 'relative',\n // Flex and grid items get `min-width: auto`, which resolves to the\n // min-content width of the panel — so a disclosure holding a code block or\n // a table used to blow out of any flex/grid parent, and no amount of\n // `flexShrink` could pull it back. The panel is already clipped by the\n // wrapper's `overflow: hidden`, so opting out of that minimum is what lets\n // the disclosure take its width from the parent.\n width: 'min 0',\n border: {\n '': 'none',\n 'shape=card': '1bw solid #border',\n },\n radius: {\n '': '1r',\n 'shape=card': '1cr',\n 'shape=sharp': '0',\n },\n fill: {\n '': false,\n 'shape=card': '#surface',\n },\n },\n});\n\nconst ContentWrapperElement = tasty({\n qa: 'DisclosureContentWrapper',\n styles: {\n display: 'block',\n overflow: 'hidden',\n interpolateSize: 'allow-keywords',\n height: {\n '': 0,\n shown: 'max-content',\n },\n transition: 'height $disclosure-transition',\n },\n});\n\nconst ContentElement = tasty({\n qa: 'DisclosureContent',\n styles: {\n display: 'block',\n flow: 'column',\n // Always visible: `content-visibility: auto` while height animates\n // `0 → max-content` can leave the panel at 0px (children skipped for\n // layout, so max-content resolves to 0). Collapsed content is already\n // clipped via height:0 + overflow:hidden on the wrapper, and\n // DisplayTransition unmounts when fully closed.\n contentVisibility: 'visible',\n },\n});\n\nconst GroupRoot = tasty({\n qa: 'DisclosureGroup',\n styles: {\n display: 'flex',\n flow: 'column',\n gap: '0',\n },\n});\n\nconst TriggerIcon = tasty(RightIcon, {\n styles: {\n transition: 'rotate',\n rotate: {\n '': '0deg',\n expanded: '90deg',\n },\n },\n});\n\nconst StyledTrigger = tasty(ItemButton, {\n qa: 'DisclosureTrigger',\n type: 'header',\n 'data-popover-keep': true,\n styles: {\n radius: {\n '': '1r',\n // Card shape: the trigger sits inside the bordered root, so it follows\n // the root's inner radius and drops its bottom corners while open so the\n // header reads as one surface with the panel below it.\n 'shape=card': '(1cr - 1bw)',\n 'expanded & shape=card': '(1cr - 1bw) top',\n 'shape=sharp': '0',\n },\n border: '#clear',\n // `radius` on the disclosure timing so the corners un-round in step with\n // the panel opening, and follow `transitionDuration` when it is set.\n transition: 'theme, radius $disclosure-transition',\n },\n});\n\n// ============================================================================\n// Disclosure Component\n// ============================================================================\n\nconst DisclosureComponent = forwardRef<HTMLDivElement, CubeDisclosureProps>(\n function Disclosure(props, ref) {\n const {\n isExpanded: controlledIsExpanded,\n defaultExpanded,\n onExpandedChange,\n isDisabled = false,\n children,\n shape = 'default',\n transitionDuration,\n qa,\n mods,\n ...otherProps\n } = props;\n\n const groupContext = useDisclosureGroupContext();\n const panelRef = useRef<HTMLDivElement>(null);\n\n // When disabled, force expanded to false\n const effectiveIsExpanded = isDisabled ? false : controlledIsExpanded;\n\n const state = useDisclosureState({\n isExpanded: effectiveIsExpanded,\n defaultExpanded: isDisabled ? false : defaultExpanded,\n onExpandedChange: isDisabled ? undefined : onExpandedChange,\n });\n\n // When disabled, override state.isExpanded to false\n const isExpanded = isDisabled ? false : state.isExpanded;\n\n const { buttonProps, panelProps } = useDisclosure(\n {\n isExpanded,\n isDisabled,\n },\n state,\n panelRef,\n );\n\n const contextValue = useMemo<DisclosureContextValue>(\n () => ({\n state,\n buttonProps,\n panelProps,\n panelRef,\n isDisabled,\n isExpanded,\n shape,\n transitionDuration,\n triggerProps: groupContext?.triggerProps,\n contentStyles: groupContext?.contentStyles,\n }),\n [\n state,\n buttonProps,\n panelProps,\n isDisabled,\n isExpanded,\n shape,\n transitionDuration,\n groupContext?.triggerProps,\n groupContext?.contentStyles,\n ],\n );\n\n const stateContext = useMemo<DisclosureStateContext>(\n () => ({\n isExpanded,\n toggle: state.toggle,\n expand: state.expand,\n collapse: state.collapse,\n }),\n [isExpanded, state.toggle, state.expand, state.collapse],\n );\n\n const outerStyles = extractStyles(otherProps, OUTER_STYLES);\n\n const finalMods = useMemo(\n () => ({\n expanded: isExpanded,\n disabled: isDisabled,\n shape,\n ...mods,\n }),\n [isExpanded, isDisabled, shape, mods],\n );\n\n const content =\n typeof children === 'function' ? children(stateContext) : children;\n\n // Declared on the root rather than the panel so both animations driven by\n // it — the panel height and the trigger radius — share one duration.\n const tokens = useMemo(\n () =>\n transitionDuration != null\n ? { '$disclosure-transition': `${transitionDuration}ms` }\n : undefined,\n [transitionDuration],\n );\n\n return (\n <DisclosureContext.Provider value={contextValue}>\n <DisclosureRoot\n ref={ref}\n qa={qa}\n mods={finalMods}\n styles={outerStyles}\n tokens={tokens}\n >\n {content}\n </DisclosureRoot>\n </DisclosureContext.Provider>\n );\n },\n);\n\n// ============================================================================\n// Disclosure.Trigger Component\n// ============================================================================\n\nconst DisclosureTrigger = forwardRef<\n HTMLButtonElement,\n CubeDisclosureTriggerProps\n>(function DisclosureTrigger(props, ref) {\n const { children, icon, mods, ...otherProps } = props;\n const context = useDisclosureContext();\n const { buttonProps, isDisabled, isExpanded, shape, triggerProps } = context;\n\n const finalMods = useMemo(\n () => ({\n expanded: isExpanded,\n disabled: isDisabled,\n shape,\n selected: false,\n ...mods,\n }),\n [isExpanded, isDisabled, shape, mods],\n );\n\n // Default icon is a rotating chevron\n const defaultIcon = <TriggerIcon mods={{ expanded: isExpanded }} />;\n\n return (\n <StyledTrigger\n ref={ref}\n icon={icon ?? defaultIcon}\n isDisabled={isDisabled}\n isSelected={isExpanded}\n {...triggerProps}\n {...(mergeProps(otherProps, buttonProps as any) as any)}\n mods={finalMods}\n >\n {children}\n </StyledTrigger>\n );\n});\n\n// ============================================================================\n// Disclosure.Content Component\n// ============================================================================\n\nconst DisclosureContent = forwardRef<\n HTMLDivElement,\n CubeDisclosureContentProps\n>(function DisclosureContent(props, ref) {\n const { children, styles, mods, ...otherProps } = props;\n const context = useDisclosureContext();\n const {\n panelProps,\n panelRef,\n isExpanded,\n transitionDuration,\n contentStyles,\n } = context;\n\n const mergedStyles = useMemo<Styles>(\n () => ({\n ...contentStyles,\n ...styles,\n }),\n [contentStyles, styles],\n );\n\n // Filter out hidden attribute from panelProps since we manage visibility via CSS height animation\n const { hidden, ...filteredPanelProps } = panelProps as Record<\n string,\n unknown\n >;\n\n return (\n <DisplayTransition\n isShown={isExpanded}\n duration={transitionDuration}\n animateOnMount={false}\n >\n {({ phase, isShown, ref: transitionRef }) => (\n <ContentWrapperElement\n ref={transitionRef}\n mods={{ shown: isShown, phase }}\n >\n <ContentElement\n ref={mergeRefs(ref, panelRef)}\n mods={{ ...mods, shown: isShown }}\n styles={mergedStyles}\n {...filteredPanelProps}\n {...otherProps}\n >\n {children}\n </ContentElement>\n </ContentWrapperElement>\n )}\n </DisplayTransition>\n );\n});\n\n// ============================================================================\n// Disclosure.Group Component\n// ============================================================================\n\nconst DisclosureGroup = forwardRef<HTMLDivElement, CubeDisclosureGroupProps>(\n function DisclosureGroup(props, ref) {\n const {\n allowsMultipleExpanded = false,\n expandedKeys,\n defaultExpandedKeys,\n onExpandedChange,\n isDisabled = false,\n triggerProps,\n contentStyles,\n children,\n qa,\n mods,\n styles,\n ...otherProps\n } = props;\n\n const groupState = useDisclosureGroupState({\n allowsMultipleExpanded,\n expandedKeys,\n defaultExpandedKeys,\n onExpandedChange,\n isDisabled,\n });\n\n const contextValue = useMemo<DisclosureGroupContextValue>(\n () => ({\n groupState,\n triggerProps,\n contentStyles,\n }),\n [groupState, triggerProps, contentStyles],\n );\n\n const outerStyles = extractStyles(otherProps, OUTER_STYLES);\n\n const finalStyles = useMemo<Styles>(\n () => ({\n ...outerStyles,\n ...styles,\n }),\n [outerStyles, styles],\n );\n\n return (\n <DisclosureGroupContext.Provider value={contextValue}>\n <GroupRoot ref={ref} qa={qa} mods={mods} styles={finalStyles}>\n {children}\n </GroupRoot>\n </DisclosureGroupContext.Provider>\n );\n },\n);\n\n// ============================================================================\n// Disclosure.Item Component\n// ============================================================================\n\nconst DisclosureItem = forwardRef<HTMLDivElement, CubeDisclosureItemProps>(\n function DisclosureItem(props, ref) {\n const {\n id: providedId,\n children,\n isDisabled: itemDisabled = false,\n isExpanded: controlledIsExpanded,\n defaultExpanded,\n onExpandedChange,\n shape = 'default',\n qa,\n mods,\n styles,\n ...otherProps\n } = props;\n\n const defaultId = useId();\n const id = providedId ?? defaultId;\n\n const groupContext = useDisclosureGroupContext();\n const panelRef = useRef<HTMLDivElement>(null);\n\n // Determine if disabled from group or item\n const isDisabled =\n itemDisabled \|\| groupContext?.groupState?.isDisabled \|\| false;\n\n // Determine expanded state from group or local props\n const groupIsExpanded = groupContext\n ? groupContext.groupState.expandedKeys.has(id)\n : undefined;\n\n // When disabled, force expanded to false\n const effectiveIsExpanded = isDisabled\n ? false\n : groupIsExpanded ?? controlledIsExpanded;\n\n const state = useDisclosureState({\n isExpanded: effectiveIsExpanded,\n defaultExpanded: isDisabled ? false : defaultExpanded,\n onExpandedChange(expanded) {\n if (isDisabled) return;\n\n if (groupContext) {\n groupContext.groupState.toggleKey(id);\n }\n onExpandedChange?.(expanded);\n },\n });\n\n // When disabled, override state.isExpanded to false\n const isExpanded = isDisabled ? false : state.isExpanded;\n\n const { buttonProps, panelProps } = useDisclosure(\n {\n isExpanded,\n isDisabled,\n },\n state,\n panelRef,\n );\n\n const contextValue = useMemo<DisclosureContextValue>(\n () => ({\n state,\n buttonProps,\n panelProps,\n panelRef,\n isDisabled,\n isExpanded,\n shape,\n transitionDuration: undefined,\n triggerProps: groupContext?.triggerProps,\n contentStyles: groupContext?.contentStyles,\n }),\n [\n state,\n buttonProps,\n panelProps,\n isDisabled,\n isExpanded,\n shape,\n groupContext?.triggerProps,\n groupContext?.contentStyles,\n ],\n );\n\n const outerStyles = extractStyles(otherProps, OUTER_STYLES);\n\n const finalStyles = useMemo<Styles>(\n () => ({\n ...outerStyles,\n ...styles,\n }),\n [outerStyles, styles],\n );\n\n const finalMods = useMemo(\n () => ({\n expanded: isExpanded,\n disabled: isDisabled,\n shape,\n ...mods,\n }),\n [isExpanded, isDisabled, shape, mods],\n );\n\n return (\n <DisclosureContext.Provider value={contextValue}>\n <DisclosureRoot\n ref={ref}\n qa={qa}\n mods={finalMods}\n styles={finalStyles}\n data-key={id}\n >\n {children}\n </DisclosureRoot>\n </DisclosureContext.Provider>\n );\n },\n);\n\n// ============================================================================\n// Compound Component Export\n// ============================================================================\n\nconst _Disclosure = Object.assign(DisclosureComponent, {\n Trigger: DisclosureTrigger,\n Content: DisclosureContent,\n Group: DisclosureGroup,\n Item: DisclosureItem,\n});\n\nexport { _Disclosure as Disclosure };\nexport type {\n CubeDisclosureProps as DisclosureProps,\n CubeDisclosureTriggerProps as DisclosureTriggerProps,\n CubeDisclosureContentProps as DisclosureContentProps,\n CubeDisclosureGroupProps as DisclosureGroupProps,\n CubeDisclosureItemProps as DisclosureItemProps,\n};\n"],"mappings":"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"}
1	+ {"version":3,"file":"Disclosure.js","names":["ItemButton","useId"],"sources":["../../../../src/components/content/Disclosure/Disclosure.tsx"],"sourcesContent":["import {\n BaseProps,\n BasePropsWithoutChildren,\n OUTER_STYLES,\n OuterStyleProps,\n Styles,\n tasty,\n} from '@tenphi/tasty';\nimport {\n createContext,\n forwardRef,\n Key,\n ReactNode,\n RefObject,\n useContext,\n useMemo,\n useRef,\n} from 'react';\nimport { mergeProps, useDisclosure, useId } from 'react-aria';\nimport {\n DisclosureGroupState,\n DisclosureState,\n useDisclosureGroupState,\n useDisclosureState,\n} from 'react-stately';\n\nimport { RightIcon } from '../../../icons/RightIcon';\nimport { mergeRefs } from '../../../utils/react';\nimport { extractStyles } from '../../../utils/styles';\nimport { CubeItemButtonProps, ItemButton } from '../../actions/ItemButton';\nimport { DisplayTransition } from '../../helpers';\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport interface DisclosureStateContext {\n isExpanded: boolean;\n toggle: () => void;\n expand: () => void;\n collapse: () => void;\n}\n\ninterface DisclosureContextValue {\n state: DisclosureState;\n buttonProps: Record<string, unknown>;\n panelProps: Record<string, unknown>;\n panelRef: RefObject<HTMLDivElement \| null>;\n isDisabled: boolean;\n isExpanded: boolean;\n shape: 'default' \| 'card' \| 'sharp';\n transitionDuration?: number;\n triggerProps?: Partial<CubeItemButtonProps>;\n contentStyles?: Styles;\n}\n\ninterface DisclosureGroupContextValue {\n groupState: DisclosureGroupState;\n triggerProps?: Partial<CubeItemButtonProps>;\n contentStyles?: Styles;\n}\n\nexport interface CubeDisclosureProps\n extends BasePropsWithoutChildren,\n OuterStyleProps {\n /** Controls expanded state in controlled mode /\n isExpanded?: boolean;\n /* Initial expanded state in uncontrolled mode /\n defaultExpanded?: boolean;\n /* Callback fired when expanded state changes /\n onExpandedChange?: (isExpanded: boolean) => void;\n /* Disables trigger interactions and force-closes the content /\n isDisabled?: boolean;\n /* Render-prop alternative to achieve custom trigger markup /\n children?: ReactNode \| ((state: DisclosureStateContext) => ReactNode);\n /* Visual shape variant /\n shape?: 'default' \| 'card' \| 'sharp';\n /* Duration for DisplayTransition animation in milliseconds /\n transitionDuration?: number;\n}\n\nexport interface CubeDisclosureTriggerProps\n extends Omit<CubeItemButtonProps, 'onPress' \| 'isDisabled'> {\n /* Children content for the trigger /\n children?: ReactNode;\n}\n\nexport interface CubeDisclosureContentProps extends BaseProps {\n /* Children content for the panel /\n children?: ReactNode;\n}\n\nexport interface CubeDisclosureGroupProps extends BaseProps, OuterStyleProps {\n /* Allow more than one disclosure to be open /\n allowsMultipleExpanded?: boolean;\n /* Controlled expanded keys /\n expandedKeys?: Iterable<Key>;\n /* Uncontrolled default expanded keys /\n defaultExpandedKeys?: Iterable<Key>;\n /* Change handler providing the full expanded keys Set /\n onExpandedChange?: (keys: Set<Key>) => void;\n /* Disable all disclosures within group and force-close their content /\n isDisabled?: boolean;\n /* Props forwarded to all ItemButton triggers in the group /\n triggerProps?: Partial<CubeItemButtonProps>;\n /* Optional panel styles applied to all Content panels in the group /\n contentStyles?: Styles;\n children: ReactNode;\n}\n\nexport interface CubeDisclosureItemProps\n extends Omit<BasePropsWithoutChildren, 'id'>,\n OuterStyleProps {\n /* Unique identifier for the disclosure item in a group /\n id?: Key;\n /* Children content /\n children?: ReactNode;\n /* Disables trigger interactions and force-closes the content /\n isDisabled?: boolean;\n /* Controls expanded state in controlled mode /\n isExpanded?: boolean;\n /* Initial expanded state in uncontrolled mode /\n defaultExpanded?: boolean;\n /* Callback fired when expanded state changes /\n onExpandedChange?: (isExpanded: boolean) => void;\n /* Visual shape variant */\n shape?: 'default' \| 'card' \| 'sharp';\n}\n\n// ============================================================================\n// Contexts\n// ============================================================================\n\nconst DisclosureContext = createContext<DisclosureContextValue \| null>(null);\nconst DisclosureGroupContext =\n createContext<DisclosureGroupContextValue \| null>(null);\n\nfunction useDisclosureContext(): DisclosureContextValue {\n const context = useContext(DisclosureContext);\n\n if (!context) {\n throw new Error(\n 'Disclosure.Trigger and Disclosure.Content must be used within a Disclosure',\n );\n }\n\n return context;\n}\n\nfunction useDisclosureGroupContext(): DisclosureGroupContextValue \| null {\n return useContext(DisclosureGroupContext);\n}\n\n// ============================================================================\n// Styled Components\n// ============================================================================\n\nconst DisclosureRoot = tasty({\n qa: 'Disclosure',\n styles: {\n display: 'flex',\n flow: 'column',\n gap: 0,\n position: 'relative',\n // Flex and grid items get `min-width: auto`, which resolves to the\n // min-content width of the panel — so a disclosure holding a code block or\n // a table used to blow out of any flex/grid parent, and no amount of\n // `flexShrink` could pull it back. The panel is already clipped by the\n // wrapper's `overflow: hidden`, so opting out of that minimum is what lets\n // the disclosure take its width from the parent.\n width: 'min 0',\n border: {\n '': 'none',\n 'shape=card': '1bw solid #border',\n },\n radius: {\n '': '1r',\n 'shape=card': '1cr',\n 'shape=sharp': '0',\n },\n fill: {\n '': false,\n 'shape=card': '#surface',\n },\n },\n});\n\nconst ContentWrapperElement = tasty({\n qa: 'DisclosureContentWrapper',\n styles: {\n display: 'block',\n overflow: 'hidden',\n interpolateSize: 'allow-keywords',\n height: {\n '': 0,\n shown: 'max-content',\n },\n transition: 'height $disclosure-transition',\n },\n});\n\nconst ContentElement = tasty({\n qa: 'DisclosureContent',\n styles: {\n display: 'block',\n flow: 'column',\n // Always visible: `content-visibility: auto` while height animates\n // `0 → max-content` can leave the panel at 0px (children skipped for\n // layout, so max-content resolves to 0). Collapsed content is already\n // clipped via height:0 + overflow:hidden on the wrapper, and\n // DisplayTransition unmounts when fully closed.\n contentVisibility: 'visible',\n },\n});\n\nconst GroupRoot = tasty({\n qa: 'DisclosureGroup',\n styles: {\n display: 'flex',\n flow: 'column',\n gap: '0',\n },\n});\n\nconst TriggerIcon = tasty(RightIcon, {\n styles: {\n transition: 'rotate',\n rotate: {\n '': '0deg',\n expanded: '90deg',\n },\n },\n});\n\nconst StyledTrigger = tasty(ItemButton, {\n qa: 'DisclosureTrigger',\n type: 'header',\n 'data-popover-keep': true,\n styles: {\n radius: {\n '': '1r',\n // Card shape: the trigger sits inside the bordered root, so it follows\n // the root's inner radius and drops its bottom corners while open so the\n // header reads as one surface with the panel below it.\n 'shape=card': '(1cr - 1bw)',\n 'expanded & shape=card': '(1cr - 1bw) top',\n 'shape=sharp': '0',\n },\n border: '#clear',\n // `radius` on the disclosure timing so the corners un-round in step with\n // the panel opening, and follow `transitionDuration` when it is set.\n transition: 'theme, radius $disclosure-transition',\n },\n});\n\n// ============================================================================\n// Disclosure Component\n// ============================================================================\n\nconst DisclosureComponent = forwardRef<HTMLDivElement, CubeDisclosureProps>(\n function Disclosure(props, ref) {\n const {\n isExpanded: controlledIsExpanded,\n defaultExpanded,\n onExpandedChange,\n isDisabled = false,\n children,\n shape = 'default',\n transitionDuration,\n qa,\n mods,\n ...otherProps\n } = props;\n\n const groupContext = useDisclosureGroupContext();\n const panelRef = useRef<HTMLDivElement>(null);\n\n // When disabled, force expanded to false\n const effectiveIsExpanded = isDisabled ? false : controlledIsExpanded;\n\n const state = useDisclosureState({\n isExpanded: effectiveIsExpanded,\n defaultExpanded: isDisabled ? false : defaultExpanded,\n onExpandedChange: isDisabled ? undefined : onExpandedChange,\n });\n\n // When disabled, override state.isExpanded to false\n const isExpanded = isDisabled ? false : state.isExpanded;\n\n const { buttonProps, panelProps } = useDisclosure(\n {\n isExpanded,\n isDisabled,\n },\n state,\n panelRef,\n );\n\n const contextValue = useMemo<DisclosureContextValue>(\n () => ({\n state,\n buttonProps,\n panelProps,\n panelRef,\n isDisabled,\n isExpanded,\n shape,\n transitionDuration,\n triggerProps: groupContext?.triggerProps,\n contentStyles: groupContext?.contentStyles,\n }),\n [\n state,\n buttonProps,\n panelProps,\n isDisabled,\n isExpanded,\n shape,\n transitionDuration,\n groupContext?.triggerProps,\n groupContext?.contentStyles,\n ],\n );\n\n const stateContext = useMemo<DisclosureStateContext>(\n () => ({\n isExpanded,\n toggle: state.toggle,\n expand: state.expand,\n collapse: state.collapse,\n }),\n [isExpanded, state.toggle, state.expand, state.collapse],\n );\n\n const outerStyles = extractStyles(otherProps, OUTER_STYLES);\n\n const finalMods = useMemo(\n () => ({\n expanded: isExpanded,\n disabled: isDisabled,\n shape,\n ...mods,\n }),\n [isExpanded, isDisabled, shape, mods],\n );\n\n const content =\n typeof children === 'function' ? children(stateContext) : children;\n\n // Declared on the root rather than the panel so both animations driven by\n // it — the panel height and the trigger radius — share one duration.\n const tokens = useMemo(\n () =>\n transitionDuration != null\n ? { '$disclosure-transition': `${transitionDuration}ms` }\n : undefined,\n [transitionDuration],\n );\n\n return (\n <DisclosureContext.Provider value={contextValue}>\n <DisclosureRoot\n ref={ref}\n qa={qa}\n mods={finalMods}\n styles={outerStyles}\n tokens={tokens}\n >\n {content}\n </DisclosureRoot>\n </DisclosureContext.Provider>\n );\n },\n);\n\n// ============================================================================\n// Disclosure.Trigger Component\n// ============================================================================\n\nconst DisclosureTrigger = forwardRef<\n HTMLButtonElement,\n CubeDisclosureTriggerProps\n>(function DisclosureTrigger(props, ref) {\n const { children, icon, mods, ...otherProps } = props;\n const context = useDisclosureContext();\n const { buttonProps, isDisabled, isExpanded, shape, triggerProps } = context;\n\n const finalMods = useMemo(\n () => ({\n expanded: isExpanded,\n disabled: isDisabled,\n shape,\n selected: false,\n ...mods,\n }),\n [isExpanded, isDisabled, shape, mods],\n );\n\n // Default icon is a rotating chevron\n const defaultIcon = <TriggerIcon mods={{ expanded: isExpanded }} />;\n\n return (\n <StyledTrigger\n ref={ref}\n icon={icon ?? defaultIcon}\n isDisabled={isDisabled}\n isSelected={isExpanded}\n {...triggerProps}\n {...(mergeProps(otherProps, buttonProps as any) as any)}\n mods={finalMods}\n >\n {children}\n </StyledTrigger>\n );\n});\n\n// ============================================================================\n// Disclosure.Content Component\n// ============================================================================\n\nconst DisclosureContent = forwardRef<\n HTMLDivElement,\n CubeDisclosureContentProps\n>(function DisclosureContent(props, ref) {\n const { children, styles, mods, ...otherProps } = props;\n const context = useDisclosureContext();\n const {\n panelProps,\n panelRef,\n isExpanded,\n transitionDuration,\n contentStyles,\n } = context;\n\n const mergedStyles = useMemo<Styles>(\n () => ({\n ...contentStyles,\n ...styles,\n }),\n [contentStyles, styles],\n );\n\n // Filter out hidden attribute from panelProps since we manage visibility via CSS height animation\n const { hidden, ...filteredPanelProps } = panelProps as Record<\n string,\n unknown\n >;\n\n return (\n <DisplayTransition\n isShown={isExpanded}\n duration={transitionDuration}\n animateOnMount={false}\n >\n {({ phase, isShown, ref: transitionRef }) => (\n <ContentWrapperElement\n ref={transitionRef}\n mods={{ shown: isShown, phase }}\n >\n <ContentElement\n ref={mergeRefs(ref, panelRef)}\n mods={{ ...mods, shown: isShown }}\n styles={mergedStyles}\n {...filteredPanelProps}\n {...otherProps}\n >\n {children}\n </ContentElement>\n </ContentWrapperElement>\n )}\n </DisplayTransition>\n );\n});\n\n// ============================================================================\n// Disclosure.Group Component\n// ============================================================================\n\nconst DisclosureGroup = forwardRef<HTMLDivElement, CubeDisclosureGroupProps>(\n function DisclosureGroup(props, ref) {\n const {\n allowsMultipleExpanded = false,\n expandedKeys,\n defaultExpandedKeys,\n onExpandedChange,\n isDisabled = false,\n triggerProps,\n contentStyles,\n children,\n qa,\n mods,\n styles,\n ...otherProps\n } = props;\n\n const groupState = useDisclosureGroupState({\n allowsMultipleExpanded,\n expandedKeys,\n defaultExpandedKeys,\n onExpandedChange,\n isDisabled,\n });\n\n const contextValue = useMemo<DisclosureGroupContextValue>(\n () => ({\n groupState,\n triggerProps,\n contentStyles,\n }),\n [groupState, triggerProps, contentStyles],\n );\n\n const outerStyles = extractStyles(otherProps, OUTER_STYLES);\n\n const finalStyles = useMemo<Styles>(\n () => ({\n ...outerStyles,\n ...styles,\n }),\n [outerStyles, styles],\n );\n\n return (\n <DisclosureGroupContext.Provider value={contextValue}>\n <GroupRoot ref={ref} qa={qa} mods={mods} styles={finalStyles}>\n {children}\n </GroupRoot>\n </DisclosureGroupContext.Provider>\n );\n },\n);\n\n// ============================================================================\n// Disclosure.Item Component\n// ============================================================================\n\nconst DisclosureItem = forwardRef<HTMLDivElement, CubeDisclosureItemProps>(\n function DisclosureItem(props, ref) {\n const {\n id: providedId,\n children,\n isDisabled: itemDisabled = false,\n isExpanded: controlledIsExpanded,\n defaultExpanded,\n onExpandedChange,\n shape = 'default',\n qa,\n mods,\n styles,\n ...otherProps\n } = props;\n\n const defaultId = useId();\n const id = providedId ?? defaultId;\n\n const groupContext = useDisclosureGroupContext();\n const panelRef = useRef<HTMLDivElement>(null);\n\n // Determine if disabled from group or item\n const isDisabled =\n itemDisabled \|\| groupContext?.groupState?.isDisabled \|\| false;\n\n // Determine expanded state from group or local props\n const groupIsExpanded = groupContext\n ? groupContext.groupState.expandedKeys.has(id)\n : undefined;\n\n // When disabled, force expanded to false\n const effectiveIsExpanded = isDisabled\n ? false\n : groupIsExpanded ?? controlledIsExpanded;\n\n const state = useDisclosureState({\n isExpanded: effectiveIsExpanded,\n defaultExpanded: isDisabled ? false : defaultExpanded,\n onExpandedChange(expanded) {\n if (isDisabled) return;\n\n if (groupContext) {\n groupContext.groupState.toggleKey(id);\n }\n onExpandedChange?.(expanded);\n },\n });\n\n // When disabled, override state.isExpanded to false\n const isExpanded = isDisabled ? false : state.isExpanded;\n\n const { buttonProps, panelProps } = useDisclosure(\n {\n isExpanded,\n isDisabled,\n },\n state,\n panelRef,\n );\n\n const contextValue = useMemo<DisclosureContextValue>(\n () => ({\n state,\n buttonProps,\n panelProps,\n panelRef,\n isDisabled,\n isExpanded,\n shape,\n transitionDuration: undefined,\n triggerProps: groupContext?.triggerProps,\n contentStyles: groupContext?.contentStyles,\n }),\n [\n state,\n buttonProps,\n panelProps,\n isDisabled,\n isExpanded,\n shape,\n groupContext?.triggerProps,\n groupContext?.contentStyles,\n ],\n );\n\n const outerStyles = extractStyles(otherProps, OUTER_STYLES);\n\n const finalStyles = useMemo<Styles>(\n () => ({\n ...outerStyles,\n ...styles,\n }),\n [outerStyles, styles],\n );\n\n const finalMods = useMemo(\n () => ({\n expanded: isExpanded,\n disabled: isDisabled,\n shape,\n ...mods,\n }),\n [isExpanded, isDisabled, shape, mods],\n );\n\n return (\n <DisclosureContext.Provider value={contextValue}>\n <DisclosureRoot\n ref={ref}\n qa={qa}\n mods={finalMods}\n styles={finalStyles}\n data-key={id}\n >\n {children}\n </DisclosureRoot>\n </DisclosureContext.Provider>\n );\n },\n);\n\n// ============================================================================\n// Compound Component Export\n// ============================================================================\n\nconst _Disclosure = Object.assign(DisclosureComponent, {\n Trigger: DisclosureTrigger,\n Content: DisclosureContent,\n Group: DisclosureGroup,\n Item: DisclosureItem,\n});\n\nexport { _Disclosure as Disclosure };\nexport type {\n CubeDisclosureProps as DisclosureProps,\n CubeDisclosureTriggerProps as DisclosureTriggerProps,\n CubeDisclosureContentProps as DisclosureContentProps,\n CubeDisclosureGroupProps as DisclosureGroupProps,\n CubeDisclosureItemProps as DisclosureItemProps,\n};\n"],"mappings":"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"}

package/dist/components/content/Divider.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.168.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.169.0 | Cube Dev Team */
 import { useSlotProps } from "../../utils/react/Slots.js";
 import { useCombinedRefs } from "../../utils/react/useCombinedRefs.js";
 import { BASE_STYLES, COLOR_STYLES, OUTER_STYLES, filterBaseProps, tasty } from "@tenphi/tasty";

package/dist/components/content/Footer.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.168.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.169.0 | Cube Dev Team */
 import { extractStyles } from "../../utils/styles.js";
 import { useSlotProps } from "../../utils/react/Slots.js";
 import { CONTAINER_STYLES, TEXT_STYLES, filterBaseProps, tasty } from "@tenphi/tasty";

package/dist/components/content/Header.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.168.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.169.0 | Cube Dev Team */
 import { extractStyles } from "../../utils/styles.js";
 import { useSlotProps } from "../../utils/react/Slots.js";
 import { CONTAINER_STYLES, TEXT_STYLES, filterBaseProps, tasty } from "@tenphi/tasty";

package/dist/components/content/HotKeys/HotKeys.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.168.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.169.0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { _Text } from "../Text.js";
 import { useKeySymbols } from "../../../utils/react/useKeySymbols.js";

package/dist/components/content/InfoBadge/InfoBadge.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.168.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.169.0 | Cube Dev Team */
 import { ItemAction } from "../../actions/ItemAction/ItemAction.js";
 import { ItemBadge } from "../ItemBadge/ItemBadge.js";
 import { useI18n } from "../../../i18n/useI18n.js";

package/dist/components/content/InfoBadge/InfoBadge.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"InfoBadge.js","names":[],"sources":["../../../../src/components/content/InfoBadge/InfoBadge.tsx"],"sourcesContent":["import { FocusableRefValue } from '@react-types/shared';\nimport { BaseProps, mergeStyles, Styles, tasty } from '@tenphi/tasty';\nimport {\n ForwardedRef,\n forwardRef,\n isValidElement,\n KeyboardEvent,\n MouseEvent,\n PointerEvent,\n ReactNode,\n useCallback,\n useMemo,\n} from 'react';\n\nimport { useI18n } from '../../../i18n';\nimport { InfoCircleIcon } from '../../../icons/index';\nimport { CubeItemActionProps, ItemAction } from '../../actions/ItemAction';\nimport { CubeUseActionProps } from '../../actions/use-action';\nimport { CubeTooltipProviderProps } from '../../overlays/Tooltip/TooltipProvider';\nimport { ItemBadge } from '../ItemBadge';\n\nexport type CubeInfoBadgeTooltipConfig = Omit<\n CubeTooltipProviderProps,\n 'children'\n>;\n\nexport interface CubeInfoBadgeProps\n extends Omit<BaseProps, 'children'>,\n Partial<\n Pick<\n CubeUseActionProps,\n 'to' \| 'onPress' \| 'navigationOptions' \| 'target' \| 'label'\n >\n > {\n /*\n Tooltip content. Either the content itself or a configuration object\n * `{ title, ...tooltipProps }` for advanced setups (placement, delay, etc.).\n /\n tooltip: ReactNode \| CubeInfoBadgeTooltipConfig;\n /\n Text appended to the tooltip content. Defaults to a \"learn more\" hint when\n * the badge is interactive (`to` or `onPress` is provided). Pass `null` or an\n * empty string to opt out.\n /\n tooltipSuffix?: ReactNode;\n /* Icon to render. @default <InfoCircleIcon /> /\n icon?: ReactNode;\n /\n Size of the badge. Every size still contributes exactly one line to the\n * text around it, so the badge stays aligned with adjacent text.\n * @default \"medium\"\n /\n size?: 'small' \| 'medium' \| 'large';\n /* @default \"clear\" /\n type?: 'primary' \| 'outline' \| 'clear';\n /* @default \"default\" /\n theme?: 'default' \| 'danger' \| 'success';\n isLoading?: boolean;\n isDisabled?: boolean;\n styles?: Styles;\n}\n\nconst SIZES: Record<NonNullable<CubeInfoBadgeProps['size']>, string> = {\n small: '2x',\n medium: '2.5x',\n large: '3x',\n};\n\n/\n The info badge is a leaf element that is often placed inside a bigger click\n * target: a field `<label>`, a switch row, a table header, a list item. Neither\n * the tooltip nor the optional navigation should ever activate that container,\n * so the events that would do so are contained here.\n \n The guard sits above the badge, so the badge's own handlers (including\n * `usePress`, which fires `onPress` from the `click` event) run first and stay\n * intact. `preventDefault` on click is what stops an enclosing `<label>` from\n * forwarding activation to its control — `stopPropagation` alone can't.\n \n `pointerup` / `mouseup` are intentionally left alone: `usePress` finishes a\n * press through document-level listeners for those events.\n /\nconst GUARD_HANDLERS = {\n onClick: (event: MouseEvent) => {\n event.preventDefault();\n event.stopPropagation();\n },\n onPointerDown: (event: PointerEvent) => event.stopPropagation(),\n onMouseDown: (event: MouseEvent) => event.stopPropagation(),\n onKeyDown: (event: KeyboardEvent) => {\n if (event.key === 'Enter' \|\| event.key === ' ') {\n event.stopPropagation();\n }\n },\n onKeyUp: (event: KeyboardEvent) => {\n if (event.key === 'Enter' \|\| event.key === ' ') {\n event.stopPropagation();\n }\n },\n};\n\n/\n `display: contents` keeps the guard out of the layout entirely while staying\n * in the event path, so the badge remains a direct flex/grid/inline child of\n * whatever contains it.\n /\nconst GuardElement = tasty({\n as: 'span',\n styles: { display: 'contents' },\n});\n\n/\n Sizing the badge so it aligns with the text beside it.\n \n The box is a fixed square, but its margin box is padded (or trimmed, for\n * `large` in tight text) to exactly one line. An atomic inline's margin box is\n * what the line box measures, so `vertical-align: top` then lands the badge's\n * center on the line box center — where the adjacent text is optically\n * centered — at every size, in inline and block containers alike.\n \n `vertical-align: middle` can't do this: it aligns the box center with the\n * x-height midpoint, ~1.5px below the text center, and inflates the line box,\n * which pushes the badge down again inside a block container (a field's\n * `labelSuffix`, a paragraph).\n \n `preset: inherit` is what makes `1lh` mean the line the badge sits on. It\n * also keeps the glyph identical across render paths, since `ItemAction` pins\n * itself to the `t4` preset while `ItemBadge` inherits.\n /\nfunction sizeStyles(size: NonNullable<CubeInfoBadgeProps['size']>): Styles {\n const box = SIZES[size];\n\n return {\n preset: 'inherit',\n height: box,\n width: box,\n // Replaces the base first/last-child margin rules outright, so the badge\n // doesn't reserve an `Item` action row's side padding as an outer margin.\n margin: `((1lh - ${box}) / 2) 0`,\n verticalAlign: 'top',\n Icon: {\n height: box,\n width: box,\n '$icon-size': `(${box} - .25x)`,\n },\n };\n}\n\n// Soft → strong on interaction, mirroring the link styles: the badge reads as a\n// quiet brand-colored hint at rest and gains contrast once it's engaged.\n//\n// A state map with a `''` entry replaces the variant's map outright, so the\n// disabled color has to be restated here (`@inherit` can't reach the variant —\n// it isn't the parent map in this merge) or a disabled badge would keep the\n// brand tint and still read as interactive.\nconst INFO_STYLES: Styles = {\n color: {\n '': '#primary-text-soft',\n 'hovered \| focused': '#primary-text',\n pressed: '#primary-text',\n disabled: '#disabled-surface-text',\n },\n};\n\nfunction isTooltipConfig(\n value: ReactNode \| CubeInfoBadgeTooltipConfig,\n): value is CubeInfoBadgeTooltipConfig {\n return (\n typeof value === 'object' &&\n value !== null &&\n !isValidElement(value) &&\n !Array.isArray(value)\n );\n}\n\n/\n An informational icon with a tooltip. Renders as a plain badge by default and\n * upgrades to a link / button when `to` or `onPress` is provided.\n */\nexport const InfoBadge = forwardRef(function InfoBadge(\n allProps: CubeInfoBadgeProps,\n ref: ForwardedRef<HTMLElement>,\n) {\n const { t } = useI18n();\n\n const {\n tooltip,\n tooltipSuffix,\n icon = <InfoCircleIcon />,\n size = 'medium',\n type = 'clear',\n theme = 'default',\n to,\n onPress,\n navigationOptions,\n target,\n label,\n qa = 'InfoBadge',\n styles,\n ...rest\n } = allProps;\n\n const isInteractive = to != null \|\| onPress != null;\n\n const { title, tooltipProps } = useMemo(() => {\n if (isTooltipConfig(tooltip)) {\n const { title, ...tooltipProps } = tooltip;\n\n return { title, tooltipProps };\n }\n\n return { title: tooltip, tooltipProps: {} };\n }, [tooltip]);\n\n const suffix =\n tooltipSuffix === undefined\n ? isInteractive\n ? t('infoBadge.learnMore', 'Click to learn more.')\n : null\n : tooltipSuffix;\n\n const finalTooltip = useMemo(\n () => ({\n ...tooltipProps,\n title: suffix ? (\n <>\n {title} {suffix}\n </>\n ) : (\n title\n ),\n }),\n [tooltipProps, title, suffix],\n );\n\n // The accessible name is the tooltip text itself when it's plain text. Rich\n // tooltip content can't serve as a label, so fall back to a generic one.\n const ariaLabel =\n label ??\n rest['aria-label'] ??\n (typeof title === 'string'\n ? title\n : t('infoBadge.ariaLabel', 'More information'));\n\n const finalStyles = useMemo(\n () =>\n mergeStyles(\n sizeStyles(size),\n // Only the default look is brand-tinted; explicit themes and filled\n // types bring their own colors.\n theme === 'default' && type === 'clear' ? INFO_STYLES : null,\n styles,\n ),\n [size, theme, type, styles],\n );\n\n // `ItemAction` exposes a react-spectrum focusable ref; unwrap it so that `ref`\n // points at the DOM node whether or not the badge is interactive.\n const actionRef = useCallback(\n (value: FocusableRefValue<HTMLElement> \| null) => {\n const element = value ? value.UNSAFE_getDOMNode() : null;\n\n if (typeof ref === 'function') {\n ref(element);\n } else if (ref) {\n ref.current = element;\n }\n },\n [ref],\n );\n\n const sharedProps = {\n ...rest,\n qa,\n icon,\n type,\n theme,\n styles: finalStyles,\n 'aria-label': ariaLabel,\n tooltip: finalTooltip as CubeItemActionProps['tooltip'],\n };\n\n return (\n <GuardElement {...GUARD_HANDLERS}>\n {isInteractive ? (\n <ItemAction\n ref={actionRef}\n to={to}\n onPress={onPress}\n navigationOptions={navigationOptions}\n target={target}\n {...sharedProps}\n />\n ) : (\n <ItemBadge ref={ref as ForwardedRef<HTMLDivElement>} {...sharedProps} />\n )}\n </GuardElement>\n );\n});\n\nexport type { CubeInfoBadgeProps as InfoBadgeProps };\n"],"mappings":";;;;;;;;;;AA8DA,MAAM,QAAiE;CACrE,OAAO;CACP,QAAQ;CACR,OAAO;CACR;;;;;;;;;;;;;;;AAgBD,MAAM,iBAAiB;CACrB,UAAU,UAAsB;AAC9B,QAAM,gBAAgB;AACtB,QAAM,iBAAiB;;CAEzB,gBAAgB,UAAwB,MAAM,iBAAiB;CAC/D,cAAc,UAAsB,MAAM,iBAAiB;CAC3D,YAAY,UAAyB;AACnC,MAAI,MAAM,QAAQ,WAAW,MAAM,QAAQ,IACzC,OAAM,iBAAiB;;CAG3B,UAAU,UAAyB;AACjC,MAAI,MAAM,QAAQ,WAAW,MAAM,QAAQ,IACzC,OAAM,iBAAiB;;CAG5B;;;;;;AAOD,MAAM,eAAe,MAAM;CACzB,IAAI;CACJ,QAAQ,EAAE,SAAS,YAAY;CAChC,CAAC;;;;;;;;;;;;;;;;;;;AAoBF,SAAS,WAAW,MAAuD;CACzE,MAAM,MAAM,MAAM;AAElB,QAAO;EACL,QAAQ;EACR,QAAQ;EACR,OAAO;EAGP,QAAQ,WAAW,IAAI;EACvB,eAAe;EACf,MAAM;GACJ,QAAQ;GACR,OAAO;GACP,cAAc,IAAI,IAAI;GACvB;EACF;;AAUH,MAAM,cAAsB,EAC1B,OAAO;CACL,IAAI;CACJ,qBAAqB;CACrB,SAAS;CACT,UAAU;CACX,EACF;AAED,SAAS,gBACP,OACqC;AACrC,QACE,OAAO,UAAU,YACjB,UAAU,QACV,CAAC,eAAe,MAAM,IACtB,CAAC,MAAM,QAAQ,MAAM;;;;;;AAQzB,MAAa,YAAY,WAAW,SAAS,UAC3C,UACA,KACA;CACA,MAAM,EAAE,MAAM,SAAS;CAEvB,MAAM,EACJ,SACA,eACA,OAAO,oBAAC,mBAAiB,EACzB,OAAO,UACP,OAAO,SACP,QAAQ,WACR,IACA,SACA,mBACA,QACA,OACA,KAAK,aACL,QACA,GAAG,SACD;CAEJ,MAAM,gBAAgB,MAAM,QAAQ,WAAW;CAE/C,MAAM,EAAE,OAAO,iBAAiB,cAAc;AAC5C,MAAI,gBAAgB,QAAQ,EAAE;GAC5B,MAAM,EAAE,OAAO,GAAG,iBAAiB;AAEnC,UAAO;IAAE;IAAO;IAAc;;AAGhC,SAAO;GAAE,OAAO;GAAS,cAAc,EAAE;GAAE;IAC1C,CAAC,QAAQ,CAAC;CAEb,MAAM,SACJ,kBAAkB,SACd,gBACE,EAAE,uBAAuB,uBAAuB,GAChD,OACF;CAEN,MAAM,eAAe,eACZ;EACL,GAAG;EACH,OAAO,SACL;GACG;GAAM;GAAE;MACR,GAEH;EAEH,GACD;EAAC;EAAc;EAAO;EAAO,CAC9B;CAID,MAAM,YACJ,SACA,KAAK,kBACJ,OAAO,UAAU,WACd,QACA,EAAE,uBAAuB,mBAAmB;CAElD,MAAM,cAAc,cAEhB,YACE,WAAW,KAAK,EAGhB,UAAU,aAAa,SAAS,UAAU,cAAc,MACxD,OACD,EACH;EAAC;EAAM;EAAO;EAAM;EAAO,CAC5B;CAID,MAAM,YAAY,aACf,UAAiD;EAChD,MAAM,UAAU,QAAQ,MAAM,mBAAmB,GAAG;AAEpD,MAAI,OAAO,QAAQ,WACjB,KAAI,QAAQ;WACH,IACT,KAAI,UAAU;IAGlB,CAAC,IAAI,CACN;CAED,MAAM,cAAc;EAClB,GAAG;EACH;EACA;EACA;EACA;EACA,QAAQ;EACR,cAAc;EACd,SAAS;EACV;AAED,QACE,oBAAC;EAAa,GAAI;YACf,gBACC,oBAAC;GACC,KAAK;GACD;GACK;GACU;GACX;GACR,GAAI;IACJ,GAEF,oBAAC;GAAe;GAAqC,GAAI;IAAe;GAE7D;EAEjB"}
1	+ {"version":3,"file":"InfoBadge.js","names":[],"sources":["../../../../src/components/content/InfoBadge/InfoBadge.tsx"],"sourcesContent":["import { FocusableRefValue } from '@react-types/shared';\nimport { BaseProps, mergeStyles, Styles, tasty } from '@tenphi/tasty';\nimport {\n ForwardedRef,\n forwardRef,\n isValidElement,\n KeyboardEvent,\n MouseEvent,\n PointerEvent,\n ReactNode,\n useCallback,\n useMemo,\n} from 'react';\n\nimport { useI18n } from '../../../i18n';\nimport { InfoCircleIcon } from '../../../icons/InfoCircleIcon';\nimport { CubeItemActionProps, ItemAction } from '../../actions/ItemAction';\nimport { CubeUseActionProps } from '../../actions/use-action';\nimport { CubeTooltipProviderProps } from '../../overlays/Tooltip/TooltipProvider';\nimport { ItemBadge } from '../ItemBadge';\n\nexport type CubeInfoBadgeTooltipConfig = Omit<\n CubeTooltipProviderProps,\n 'children'\n>;\n\nexport interface CubeInfoBadgeProps\n extends Omit<BaseProps, 'children'>,\n Partial<\n Pick<\n CubeUseActionProps,\n 'to' \| 'onPress' \| 'navigationOptions' \| 'target' \| 'label'\n >\n > {\n /*\n Tooltip content. Either the content itself or a configuration object\n * `{ title, ...tooltipProps }` for advanced setups (placement, delay, etc.).\n /\n tooltip: ReactNode \| CubeInfoBadgeTooltipConfig;\n /\n Text appended to the tooltip content. Defaults to a \"learn more\" hint when\n * the badge is interactive (`to` or `onPress` is provided). Pass `null` or an\n * empty string to opt out.\n /\n tooltipSuffix?: ReactNode;\n /* Icon to render. @default <InfoCircleIcon /> /\n icon?: ReactNode;\n /\n Size of the badge. Every size still contributes exactly one line to the\n * text around it, so the badge stays aligned with adjacent text.\n * @default \"medium\"\n /\n size?: 'small' \| 'medium' \| 'large';\n /* @default \"clear\" /\n type?: 'primary' \| 'outline' \| 'clear';\n /* @default \"default\" /\n theme?: 'default' \| 'danger' \| 'success';\n isLoading?: boolean;\n isDisabled?: boolean;\n styles?: Styles;\n}\n\nconst SIZES: Record<NonNullable<CubeInfoBadgeProps['size']>, string> = {\n small: '2x',\n medium: '2.5x',\n large: '3x',\n};\n\n/\n The info badge is a leaf element that is often placed inside a bigger click\n * target: a field `<label>`, a switch row, a table header, a list item. Neither\n * the tooltip nor the optional navigation should ever activate that container,\n * so the events that would do so are contained here.\n \n The guard sits above the badge, so the badge's own handlers (including\n * `usePress`, which fires `onPress` from the `click` event) run first and stay\n * intact. `preventDefault` on click is what stops an enclosing `<label>` from\n * forwarding activation to its control — `stopPropagation` alone can't.\n \n `pointerup` / `mouseup` are intentionally left alone: `usePress` finishes a\n * press through document-level listeners for those events.\n /\nconst GUARD_HANDLERS = {\n onClick: (event: MouseEvent) => {\n event.preventDefault();\n event.stopPropagation();\n },\n onPointerDown: (event: PointerEvent) => event.stopPropagation(),\n onMouseDown: (event: MouseEvent) => event.stopPropagation(),\n onKeyDown: (event: KeyboardEvent) => {\n if (event.key === 'Enter' \|\| event.key === ' ') {\n event.stopPropagation();\n }\n },\n onKeyUp: (event: KeyboardEvent) => {\n if (event.key === 'Enter' \|\| event.key === ' ') {\n event.stopPropagation();\n }\n },\n};\n\n/\n `display: contents` keeps the guard out of the layout entirely while staying\n * in the event path, so the badge remains a direct flex/grid/inline child of\n * whatever contains it.\n /\nconst GuardElement = tasty({\n as: 'span',\n styles: { display: 'contents' },\n});\n\n/\n Sizing the badge so it aligns with the text beside it.\n \n The box is a fixed square, but its margin box is padded (or trimmed, for\n * `large` in tight text) to exactly one line. An atomic inline's margin box is\n * what the line box measures, so `vertical-align: top` then lands the badge's\n * center on the line box center — where the adjacent text is optically\n * centered — at every size, in inline and block containers alike.\n \n `vertical-align: middle` can't do this: it aligns the box center with the\n * x-height midpoint, ~1.5px below the text center, and inflates the line box,\n * which pushes the badge down again inside a block container (a field's\n * `labelSuffix`, a paragraph).\n \n `preset: inherit` is what makes `1lh` mean the line the badge sits on. It\n * also keeps the glyph identical across render paths, since `ItemAction` pins\n * itself to the `t4` preset while `ItemBadge` inherits.\n /\nfunction sizeStyles(size: NonNullable<CubeInfoBadgeProps['size']>): Styles {\n const box = SIZES[size];\n\n return {\n preset: 'inherit',\n height: box,\n width: box,\n // Replaces the base first/last-child margin rules outright, so the badge\n // doesn't reserve an `Item` action row's side padding as an outer margin.\n margin: `((1lh - ${box}) / 2) 0`,\n verticalAlign: 'top',\n Icon: {\n height: box,\n width: box,\n '$icon-size': `(${box} - .25x)`,\n },\n };\n}\n\n// Soft → strong on interaction, mirroring the link styles: the badge reads as a\n// quiet brand-colored hint at rest and gains contrast once it's engaged.\n//\n// A state map with a `''` entry replaces the variant's map outright, so the\n// disabled color has to be restated here (`@inherit` can't reach the variant —\n// it isn't the parent map in this merge) or a disabled badge would keep the\n// brand tint and still read as interactive.\nconst INFO_STYLES: Styles = {\n color: {\n '': '#primary-text-soft',\n 'hovered \| focused': '#primary-text',\n pressed: '#primary-text',\n disabled: '#disabled-surface-text',\n },\n};\n\nfunction isTooltipConfig(\n value: ReactNode \| CubeInfoBadgeTooltipConfig,\n): value is CubeInfoBadgeTooltipConfig {\n return (\n typeof value === 'object' &&\n value !== null &&\n !isValidElement(value) &&\n !Array.isArray(value)\n );\n}\n\n/\n An informational icon with a tooltip. Renders as a plain badge by default and\n * upgrades to a link / button when `to` or `onPress` is provided.\n */\nexport const InfoBadge = forwardRef(function InfoBadge(\n allProps: CubeInfoBadgeProps,\n ref: ForwardedRef<HTMLElement>,\n) {\n const { t } = useI18n();\n\n const {\n tooltip,\n tooltipSuffix,\n icon = <InfoCircleIcon />,\n size = 'medium',\n type = 'clear',\n theme = 'default',\n to,\n onPress,\n navigationOptions,\n target,\n label,\n qa = 'InfoBadge',\n styles,\n ...rest\n } = allProps;\n\n const isInteractive = to != null \|\| onPress != null;\n\n const { title, tooltipProps } = useMemo(() => {\n if (isTooltipConfig(tooltip)) {\n const { title, ...tooltipProps } = tooltip;\n\n return { title, tooltipProps };\n }\n\n return { title: tooltip, tooltipProps: {} };\n }, [tooltip]);\n\n const suffix =\n tooltipSuffix === undefined\n ? isInteractive\n ? t('infoBadge.learnMore', 'Click to learn more.')\n : null\n : tooltipSuffix;\n\n const finalTooltip = useMemo(\n () => ({\n ...tooltipProps,\n title: suffix ? (\n <>\n {title} {suffix}\n </>\n ) : (\n title\n ),\n }),\n [tooltipProps, title, suffix],\n );\n\n // The accessible name is the tooltip text itself when it's plain text. Rich\n // tooltip content can't serve as a label, so fall back to a generic one.\n const ariaLabel =\n label ??\n rest['aria-label'] ??\n (typeof title === 'string'\n ? title\n : t('infoBadge.ariaLabel', 'More information'));\n\n const finalStyles = useMemo(\n () =>\n mergeStyles(\n sizeStyles(size),\n // Only the default look is brand-tinted; explicit themes and filled\n // types bring their own colors.\n theme === 'default' && type === 'clear' ? INFO_STYLES : null,\n styles,\n ),\n [size, theme, type, styles],\n );\n\n // `ItemAction` exposes a react-spectrum focusable ref; unwrap it so that `ref`\n // points at the DOM node whether or not the badge is interactive.\n const actionRef = useCallback(\n (value: FocusableRefValue<HTMLElement> \| null) => {\n const element = value ? value.UNSAFE_getDOMNode() : null;\n\n if (typeof ref === 'function') {\n ref(element);\n } else if (ref) {\n ref.current = element;\n }\n },\n [ref],\n );\n\n const sharedProps = {\n ...rest,\n qa,\n icon,\n type,\n theme,\n styles: finalStyles,\n 'aria-label': ariaLabel,\n tooltip: finalTooltip as CubeItemActionProps['tooltip'],\n };\n\n return (\n <GuardElement {...GUARD_HANDLERS}>\n {isInteractive ? (\n <ItemAction\n ref={actionRef}\n to={to}\n onPress={onPress}\n navigationOptions={navigationOptions}\n target={target}\n {...sharedProps}\n />\n ) : (\n <ItemBadge ref={ref as ForwardedRef<HTMLDivElement>} {...sharedProps} />\n )}\n </GuardElement>\n );\n});\n\nexport type { CubeInfoBadgeProps as InfoBadgeProps };\n"],"mappings":";;;;;;;;;;AA8DA,MAAM,QAAiE;CACrE,OAAO;CACP,QAAQ;CACR,OAAO;CACR;;;;;;;;;;;;;;;AAgBD,MAAM,iBAAiB;CACrB,UAAU,UAAsB;AAC9B,QAAM,gBAAgB;AACtB,QAAM,iBAAiB;;CAEzB,gBAAgB,UAAwB,MAAM,iBAAiB;CAC/D,cAAc,UAAsB,MAAM,iBAAiB;CAC3D,YAAY,UAAyB;AACnC,MAAI,MAAM,QAAQ,WAAW,MAAM,QAAQ,IACzC,OAAM,iBAAiB;;CAG3B,UAAU,UAAyB;AACjC,MAAI,MAAM,QAAQ,WAAW,MAAM,QAAQ,IACzC,OAAM,iBAAiB;;CAG5B;;;;;;AAOD,MAAM,eAAe,MAAM;CACzB,IAAI;CACJ,QAAQ,EAAE,SAAS,YAAY;CAChC,CAAC;;;;;;;;;;;;;;;;;;;AAoBF,SAAS,WAAW,MAAuD;CACzE,MAAM,MAAM,MAAM;AAElB,QAAO;EACL,QAAQ;EACR,QAAQ;EACR,OAAO;EAGP,QAAQ,WAAW,IAAI;EACvB,eAAe;EACf,MAAM;GACJ,QAAQ;GACR,OAAO;GACP,cAAc,IAAI,IAAI;GACvB;EACF;;AAUH,MAAM,cAAsB,EAC1B,OAAO;CACL,IAAI;CACJ,qBAAqB;CACrB,SAAS;CACT,UAAU;CACX,EACF;AAED,SAAS,gBACP,OACqC;AACrC,QACE,OAAO,UAAU,YACjB,UAAU,QACV,CAAC,eAAe,MAAM,IACtB,CAAC,MAAM,QAAQ,MAAM;;;;;;AAQzB,MAAa,YAAY,WAAW,SAAS,UAC3C,UACA,KACA;CACA,MAAM,EAAE,MAAM,SAAS;CAEvB,MAAM,EACJ,SACA,eACA,OAAO,oBAAC,mBAAiB,EACzB,OAAO,UACP,OAAO,SACP,QAAQ,WACR,IACA,SACA,mBACA,QACA,OACA,KAAK,aACL,QACA,GAAG,SACD;CAEJ,MAAM,gBAAgB,MAAM,QAAQ,WAAW;CAE/C,MAAM,EAAE,OAAO,iBAAiB,cAAc;AAC5C,MAAI,gBAAgB,QAAQ,EAAE;GAC5B,MAAM,EAAE,OAAO,GAAG,iBAAiB;AAEnC,UAAO;IAAE;IAAO;IAAc;;AAGhC,SAAO;GAAE,OAAO;GAAS,cAAc,EAAE;GAAE;IAC1C,CAAC,QAAQ,CAAC;CAEb,MAAM,SACJ,kBAAkB,SACd,gBACE,EAAE,uBAAuB,uBAAuB,GAChD,OACF;CAEN,MAAM,eAAe,eACZ;EACL,GAAG;EACH,OAAO,SACL;GACG;GAAM;GAAE;MACR,GAEH;EAEH,GACD;EAAC;EAAc;EAAO;EAAO,CAC9B;CAID,MAAM,YACJ,SACA,KAAK,kBACJ,OAAO,UAAU,WACd,QACA,EAAE,uBAAuB,mBAAmB;CAElD,MAAM,cAAc,cAEhB,YACE,WAAW,KAAK,EAGhB,UAAU,aAAa,SAAS,UAAU,cAAc,MACxD,OACD,EACH;EAAC;EAAM;EAAO;EAAM;EAAO,CAC5B;CAID,MAAM,YAAY,aACf,UAAiD;EAChD,MAAM,UAAU,QAAQ,MAAM,mBAAmB,GAAG;AAEpD,MAAI,OAAO,QAAQ,WACjB,KAAI,QAAQ;WACH,IACT,KAAI,UAAU;IAGlB,CAAC,IAAI,CACN;CAED,MAAM,cAAc;EAClB,GAAG;EACH;EACA;EACA;EACA;EACA,QAAQ;EACR,cAAc;EACd,SAAS;EACV;AAED,QACE,oBAAC;EAAa,GAAI;YACf,gBACC,oBAAC;GACC,KAAK;GACD;GACK;GACU;GACX;GACR,GAAI;IACJ,GAEF,oBAAC;GAAe;GAAqC,GAAI;IAAe;GAE7D;EAEjB"}

package/dist/components/content/InlineInput/InlineInput.d.ts CHANGED Viewed

@@ -69,6 +69,11 @@ interface CubeInlineInputProps extends BaseProps, BlockStyleProps, OuterStylePro
   isStyled?: boolean;
   /** Placeholder text shown in the input when the draft is empty. */
   placeholder?: string;
+  /**
+   * What kind of autofill the browser may offer for the input, as the HTML `autocomplete` token
+   * (`email`, `off`, …). See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete).
+   */
+  autoComplete?: string;
   /** Custom render for display (non-editing) mode. Receives the currently-displayed value (including optimistic). */
   renderDisplay?: (value: string) => ReactNode;
   /** ARIA label for the input (used when no visible label is associated). */