@drivenets/design-system 0.16.0 → 0.17.0

package/src/components/ds-toast/ds-toast.figma.ts

@@ -26,9 +26,9 @@ createToast({
 	description: 'Description',${actionsLine}
 });`,
 	imports: [
-		"import { useToaster } from '@drivenets/design-system'",
-		"import { DsButtonV3 } from '@drivenets/design-system'",
+		"import { useToaster } from '@drivenets/design-system';",
+		"import { DsButtonV3 } from '@drivenets/design-system';",
 	],
 	id: 'ds-toast',
 	metadata: { nestable: false },
-};
+} satisfies figma.Template;

package/src/components/ds-toggle/ds-toggle.figma.ts

@@ -33,7 +33,7 @@ const attrs = [
 
 export default {
 	example: figma.code`<DsToggle ${attrs} />`,
-	imports: ["import { DsToggle } from '@drivenets/design-system'"],
+	imports: ["import { DsToggle } from '@drivenets/design-system';"],
 	id: 'ds-toggle',
 	metadata: { nestable: true },
-};
+} satisfies figma.Template;

package/src/components/ds-tooltip/ds-tooltip.figma.ts

@@ -10,7 +10,7 @@ const content = labelNode.type === 'TEXT' ? labelNode.textContent : 'Tooltip tex
 
 export default {
 	example: figma.code`<DsTooltip content="${content}">{/* trigger element */}</DsTooltip>`,
-	imports: ["import { DsTooltip } from '@drivenets/design-system'"],
+	imports: ["import { DsTooltip } from '@drivenets/design-system';"],
 	id: 'ds-tooltip',
 	metadata: { nestable: false },
-};
+} satisfies figma.Template;

package/src/components/ds-tree/ds-tree.module.scss

@@ -27,7 +27,7 @@ $transition-duration: 0.2s;
 		background: var(--background-action-hover-weak);
 	}
 
-	&[data-focus] {
+	&:focus-visible {
 		position: relative;
 		outline: none;
 		background: var(--background-action-hover-weak);
@@ -56,7 +56,7 @@ $transition-duration: 0.2s;
 	}
 
 	&:hover .itemAction,
-	&[data-focus-visible] .itemAction {
+	&:focus-within .itemAction {
 		opacity: 1;
 	}
 }

package/src/components/ds-tree/ds-tree.tsx

@@ -38,6 +38,9 @@ const DsTreeRoot = <T extends DsTreeNode = DsTreeNode>({
 	checkedValue,
 	defaultCheckedValue,
 	onCheckedChange,
+	focusedValue,
+	defaultFocusedValue,
+	onFocusChange,
 	typeahead = true,
 	lazyMount = true,
 	unmountOnExit,
@@ -56,6 +59,9 @@ const DsTreeRoot = <T extends DsTreeNode = DsTreeNode>({
 		checkedValue={checkedValue}
 		defaultCheckedValue={defaultCheckedValue}
 		onCheckedChange={onCheckedChange}
+		focusedValue={focusedValue}
+		defaultFocusedValue={defaultFocusedValue}
+		onFocusChange={onFocusChange}
 		typeahead={typeahead}
 		lazyMount={lazyMount}
 		unmountOnExit={unmountOnExit}

package/src/components/ds-tree/ds-tree.types.ts

@@ -115,6 +115,22 @@ export interface DsTreeRootProps<T extends DsTreeNode = DsTreeNode> extends DsTr
 	 */
 	onCheckedChange?: ArkTreeView.RootProps<T>['onCheckedChange'];
 
+	/**
+	 * Id of the node with keyboard focus (controlled). Use with `onFocusChange`.
+	 * When `null`, Ark treats the first node as focused for roving-tabindex purposes.
+	 */
+	focusedValue?: string | null;
+	/**
+	 * Id of the node focused initially when uncontrolled. When `null` (the Ark
+	 * default), the first node receives focus for roving-tabindex purposes.
+	 */
+	defaultFocusedValue?: string | null;
+	/**
+	 * Called when the focused node changes. Receives the Ark focus-change details
+	 * including the new `focusedValue` (or `null` when nothing is focused).
+	 */
+	onFocusChange?: ArkTreeView.RootProps<T>['onFocusChange'];
+
 	/**
 	 * Whether to enable typeahead navigation — typing characters focuses matching nodes.
 	 */

package/src/components/ds-typography/ds-typography.figma.ts

@@ -57,7 +57,7 @@ const colorProp = color === 'main' ? '' : figma.code` color="${color}"`;
 
 export default {
 	example: figma.code`<DsTypography variant="${variant}"${colorProp}>${text}</DsTypography>`,
-	imports: ["import { DsTypography } from '@drivenets/design-system'"],
+	imports: ["import { DsTypography } from '@drivenets/design-system';"],
 	id: 'ds-typography',
 	metadata: { nestable: true },
-};
+} satisfies figma.Template;

package/src/components/ds-user-card/ds-user-card.figma.ts

@@ -10,7 +10,7 @@ import figma from 'figma';
 
 export default {
 	example: figma.code`<DsUserCard name="Full Name" subtitle="subtitle" />`,
-	imports: ["import { DsUserCard } from '@drivenets/design-system'"],
+	imports: ["import { DsUserCard } from '@drivenets/design-system';"],
 	id: 'ds-user-card',
 	metadata: { nestable: true },
-};
+} satisfies figma.Template;

package/src/components/ds-vertical-tabs/ds-vertical-tabs.tsx

@@ -26,7 +26,13 @@ import styles from './ds-vertical-tabs.module.scss';
  * </DsVerticalTabs>
  * ```
  */
-const DsVerticalTabs = ({ value, onValueChange, className, style, children }: DsVerticalTabsRootProps) => {
+const DsVerticalTabsRoot = ({
+	value,
+	onValueChange,
+	className,
+	style,
+	children,
+}: DsVerticalTabsRootProps) => {
 	const handleValueChange = (details: { value: string | null }) => {
 		onValueChange?.(details.value);
 	};
@@ -77,10 +83,11 @@ DsVerticalTabsList.displayName = 'DsVerticalTabs.List';
 DsVerticalTabsTab.displayName = 'DsVerticalTabs.Tab';
 DsVerticalTabsContent.displayName = 'DsVerticalTabs.Content';
 
-DsVerticalTabs.List = DsVerticalTabsList;
-DsVerticalTabs.Tab = DsVerticalTabsTab;
-DsVerticalTabs.Content = DsVerticalTabsContent;
-
-DsVerticalTabs.displayName = 'DsVerticalTabs';
+const DsVerticalTabs = Object.assign(DsVerticalTabsRoot, {
+	displayName: 'DsVerticalTabs',
+	List: DsVerticalTabsList,
+	Tab: DsVerticalTabsTab,
+	Content: DsVerticalTabsContent,
+});
 
 export default DsVerticalTabs;

package/src/components/ds-workspace-layout/ds-workspace-layout.tsx

@@ -19,7 +19,7 @@ const DEFAULT_LOCALE = Object.freeze({
 	unpinButtonLabel: 'Unpin side menu',
 });
 
-const DsWorkspaceLayout = ({ className, fillParent = false, ...rest }: DsWorkspaceLayoutProps) => {
+const DsWorkspaceLayoutRoot = ({ className, fillParent = false, ...rest }: DsWorkspaceLayoutProps) => {
 	const [hasLeftSidePanel, setHasLeftSidePanel] = useState(false);
 
 	const registerLeftSidePanel = useCallback(() => setHasLeftSidePanel(true), []);
@@ -132,14 +132,15 @@ Body.displayName = 'DsWorkspaceLayout.Body';
 SideMenu.displayName = 'DsWorkspaceLayout.SideMenu';
 LeftPanel.displayName = 'DsWorkspaceLayout.LeftPanel';
 
-DsWorkspaceLayout.Header = Header;
-DsWorkspaceLayout.SubHeader = SubHeader;
-DsWorkspaceLayout.Content = Content;
-DsWorkspaceLayout.Footer = Footer;
-DsWorkspaceLayout.Body = Body;
-DsWorkspaceLayout.SideMenu = SideMenu;
-DsWorkspaceLayout.LeftPanel = LeftPanel;
-
-DsWorkspaceLayout.displayName = 'DsWorkspaceLayout';
+const DsWorkspaceLayout = Object.assign(DsWorkspaceLayoutRoot, {
+	displayName: 'DsWorkspaceLayout',
+	Header,
+	SubHeader,
+	Content,
+	Footer,
+	Body,
+	SideMenu,
+	LeftPanel,
+});
 
 export default DsWorkspaceLayout;