@central-design-system/components 3.0.0-beta.22 → 3.0.0-beta.24

package/dist/components/CdsTree/interface.d.ts

@@ -1,8 +1,37 @@
+import { ITreeProps } from './composable';
 import type { CSSProperties, VNode } from 'vue';
+import type { TCdsIconsName } from '@central-design-system/icons';
 export declare namespace NTree {
     type TKey = string | number;
-    type TNodeElement = VNode<any>;
+    type TNodeElement = VNode<ITreeProps>;
     type TGetCheckDisabled<RecordType> = (record: RecordType) => boolean;
+    type TExpandAction = false | 'click' | 'doubleclick' | 'dblclick';
+    type TDraggableFn = (node: IDataNode) => boolean;
+    type TAllowDrop<TreeDataType extends IBasicDataNode = IDataNode> = (options: IAllowDropOptions<TreeDataType>) => boolean;
+    type TEventHandler = (...args: any[]) => void;
+    type TDragNodeEvent = {
+        key: TKey;
+        eventData: IEventDataNode;
+        eventKey: TKey;
+        selectHandle: HTMLSpanElement;
+        pos: string;
+    };
+    type TNodeMouseEventHandler = (event: MouseEvent, node: IEventDataNode) => void;
+    type TNodeMouseEventParams = {
+        event: MouseEvent;
+        node: IEventDataNode;
+    };
+    type TNodeDragEventParams = {
+        event: DragEvent;
+        node: IEventDataNode;
+    };
+    type TNodeDragEventHandler = (event: DragEvent, node: TDragNodeEvent | null, outsideTree?: boolean) => void;
+    type TIconType = any;
+    type DraggableFn = (node: IDataNode) => boolean;
+    type TDraggableConfig = {
+        icon?: TCdsIconsName | boolean;
+        nodeDraggable?: DraggableFn;
+    };
     interface IBasicDataNode {
         checkable?: boolean;
         selectable?: boolean;
@@ -10,7 +39,8 @@ export declare namespace NTree {
         disableCheckbox?: boolean;
         icon?: any;
         isLeaf?: boolean;
-        switcherIcon?: any;
+        switcherIcon?: TIconType;
+        /** Set style of TreeNode. This is not recommend if you don't have any force requirement */
         class?: string;
         style?: CSSProperties;
         slots?: Record<string, string>;
@@ -18,7 +48,7 @@ export declare namespace NTree {
     }
     interface IDataNode extends IBasicDataNode {
         children?: IDataNode[];
-        key: string | number;
+        key?: string | number;
         title?: any;
     }
     interface IEntity {
@@ -29,7 +59,7 @@ export declare namespace NTree {
         parent?: IEntity;
         children?: IEntity[];
     }
-    interface EventDataNode extends IDataNode {
+    interface IEventDataNode extends IDataNode {
         expanded?: boolean;
         selected?: boolean;
         checked: boolean;
@@ -54,7 +84,77 @@ export declare namespace NTree {
     }
     interface IFieldNames {
         title?: string;
+        /** @private Internal usage, safe to remove if no need */
+        _title?: string[];
         key?: string;
         children?: string;
     }
+    interface IAllowDropOptions<TreeDataType extends IBasicDataNode = IDataNode> {
+        dragNode: IEventDataNode;
+        dropNode: TreeDataType;
+        dropPosition: -1 | 0 | 1;
+    }
+    interface ICheckInfo {
+        event: 'check';
+        node: IEventDataNode;
+        checked: boolean;
+        nativeEvent: MouseEvent;
+        checkedNodes: IDataNode[];
+        checkedNodesPositions?: {
+            node: IDataNode;
+            pos: string;
+        }[];
+        halfCheckedKeys?: TKey[];
+    }
+    interface IFlattenNode {
+        parent: IFlattenNode | null;
+        children: IFlattenNode[] | null;
+        pos: string;
+        data: IDataNode;
+        title: any;
+        key: TKey;
+        isStart: boolean[];
+        isEnd: boolean[];
+    }
+    interface ITreeNodeRequiredProps<TreeDataType extends IBasicDataNode = IDataNode> {
+        expandedKeysSet: Set<TKey>;
+        selectedKeysSet: Set<TKey>;
+        loadedKeysSet: Set<TKey>;
+        loadingKeysSet: Set<TKey>;
+        checkedKeysSet: Set<TKey>;
+        halfCheckedKeysSet: Set<TKey>;
+        dragOverNodeKey: TKey | null;
+        dropPosition: number | null;
+        keyEntities: Record<TKey, IDataEntity<TreeDataType>>;
+    }
+    interface IDragState {
+        draggingNodeKey: TKey | null;
+        dragChildrenKeys: TKey[];
+        dropTargetKey: TKey | null;
+        dropPosition: IAllowDropOptions['dropPosition'] | null;
+        dropContainerKey: TKey | null;
+        dropLevelOffset: number | null;
+        dropTargetPos: string | null;
+        dropAllowed: boolean;
+        dragOverNodeKey: TKey | null;
+    }
+    interface ITreeNodeAttribute {
+        eventKey: string;
+        prefixCls: string;
+        class: string;
+        expanded: boolean;
+        selected: boolean;
+        checked: boolean;
+        halfChecked: boolean;
+        children: any;
+        title: any;
+        pos: string;
+        dragOver: boolean;
+        dragOverGapTop: boolean;
+        dragOverGapBottom: boolean;
+        isLeaf: boolean;
+        selectable: boolean;
+        disabled: boolean;
+        disableCheckbox: boolean;
+    }
 }

package/dist/components/CdsTree/utils/data.d.ts

@@ -1,4 +1,7 @@
+import { VueNode } from '../../../utils';
+import { ITreeNodeProps } from '../../../components/CdsTree/composable/treeNode';
 import { NTree } from '../interface';
+import { ITreeProps } from '../composable';
 declare type TExternalGetKey = GetKey<NTree.IDataNode> | string;
 interface IWrapper {
     posEntities: Record<string, any>;
@@ -16,6 +19,10 @@ export declare function convertDataToEntities(dataNodes: NTree.IDataNode[], { in
     posEntities: any;
     keyEntities: any;
 };
+/**
+ * Convert `children` of Tree into `treeData` structure.
+ */
+export declare function convertTreeToData(rootNodes: VueNode): NTree.IDataNode[];
 interface ITraverseConfig {
     childrenPropName?: string;
     externalGetKey?: TExternalGetKey;
@@ -30,7 +37,70 @@ export declare function traverseDataNodes(dataNodes: NTree.IDataNode[], callback
     level?: number;
     nodes: NTree.IDataNode[];
 }) => void, config?: ITraverseConfig | string): void;
+/**
+ * If user use `autoExpandParent` we should get the list of parent node
+ * @param keyList
+ * @param keyEntities
+ */
+export declare function conductExpandParent(keyList: NTree.TKey[], keyEntities: Record<NTree.TKey, NTree.IDataEntity>): NTree.TKey[];
+/**
+ * Flat nest tree data into flatten list. This is used for virtual list render.
+ * @param treeNodeList Origin data node list
+ * @param expandedKeys
+ * @param fieldNames
+ * need expanded keys, provides `true` means all expanded.
+ */
+export declare function flattenTreeData(treeNodeList: NTree.IDataNode[], expandedKeys: NTree.TKey[] | true, fieldNames: NTree.IFieldNames): NTree.IFlattenNode[];
 export declare function fillFieldNames(fieldNames?: NTree.IFieldNames): Required<NTree.IFieldNames>;
+/**
+ * Get TreeNode props with Tree props.
+ */
+export declare function getTreeNodeProps<TreeDataType extends NTree.IBasicDataNode = NTree.IDataNode>(key: NTree.TKey, { expandedKeysSet, selectedKeysSet, loadedKeysSet, loadingKeysSet, checkedKeysSet, halfCheckedKeysSet, dragOverNodeKey, dropPosition, keyEntities }: NTree.ITreeNodeRequiredProps<TreeDataType>): {
+    eventKey: NTree.TKey;
+    expanded: boolean;
+    selected: boolean;
+    loaded: boolean;
+    loading: boolean;
+    checked: boolean;
+    halfChecked: boolean;
+    pos: string;
+    parent: NTree.IDataEntity<TreeDataType> | undefined;
+    dragOver: boolean;
+    dragOverGapTop: boolean;
+    dragOverGapBottom: boolean;
+};
+export declare function calcDropPosition<TreeDataType extends NTree.IBasicDataNode = NTree.IDataNode>(event: MouseEvent, dragNode: NTree.TDragNodeEvent, targetNode: NTree.TDragNodeEvent, indent: number, startMousePosition: {
+    x: number;
+    y: number;
+}, allowDrop: NTree.TAllowDrop<TreeDataType>, flattenedNodes: NTree.IFlattenNode[], keyEntities: Record<NTree.TKey, NTree.IDataEntity<TreeDataType>>, expandKeysSet: Set<NTree.TKey>): Omit<NTree.IDragState, 'draggingNodeKey' | 'dragChildrenKeys'>;
+/**
+ * Return selectedKeys according with multiple prop
+ * @param selectedKeys
+ * @param props
+ * @returns [string]
+ */
+export declare function calcSelectedKeys(selectedKeys: NTree.TKey[], props: ITreeProps): NTree.TKey[] | undefined;
+/**
+ * Parse `checkedKeys` to { checkedKeys, halfCheckedKeys } style
+ */
+export declare function parseCheckedKeys(keys: NTree.TKey[] | {
+    checked: NTree.TKey[];
+    halfChecked: NTree.TKey[];
+}): {
+    checkedKeys: NTree.TKey[];
+    halfCheckedKeys: undefined;
+} | {
+    checkedKeys: NTree.TKey[];
+    halfCheckedKeys: NTree.TKey[];
+} | null;
+export declare function getDragChildrenKeys<TreeDataType extends NTree.IBasicDataNode = NTree.IDataNode>(dragNodeKey: NTree.TKey, keyEntities: Record<NTree.TKey, NTree.IDataEntity<TreeDataType>>): NTree.TKey[];
 export declare function getKey(key: NTree.TKey, pos: string): NTree.TKey;
 export declare function getPosition(level?: string | number, index?: number): string;
+export declare function isTreeNode(node: NTree.TNodeElement): any;
+export declare function arrDel(list: NTree.TKey[], value: NTree.TKey): NTree.TKey[];
+export declare function arrAdd(list: NTree.TKey[], value: NTree.TKey): NTree.TKey[];
+export declare function posToArr(pos: string): string[];
+export declare function isLastChild<TreeDataType extends NTree.IBasicDataNode = NTree.IDataNode>(treeNodeEntity?: NTree.IDataEntity<TreeDataType>): boolean;
+export declare function isFirstChild<TreeDataType extends NTree.IBasicDataNode = NTree.IDataNode>(treeNodeEntity?: NTree.IDataEntity<TreeDataType>): boolean;
+export declare function convertNodePropsToEventData(props: ITreeNodeProps & ReturnType<typeof getTreeNodeProps>): NTree.IEventDataNode;
 export {};

package/dist/components/CdsTree/utils/diff.d.ts

@@ -0,0 +1,6 @@
+import { NTree } from '../interface';
+export declare function findExpandedKeys(prev?: NTree.TKey[], next?: NTree.TKey[]): {
+    add: boolean;
+    key: NTree.TKey | null;
+};
+export declare function getExpandRange(shorter: NTree.IFlattenNode[], longer: NTree.IFlattenNode[], key: NTree.TKey): NTree.IFlattenNode[];

package/dist/components/CdsTree/utils/directory.d.ts

@@ -0,0 +1,9 @@
+import { NTree } from '../interface';
+export declare function calcRangeKeys({ treeData, expandedKeys, startKey, endKey, fieldNames }: {
+    treeData: NTree.IDataNode[];
+    expandedKeys: NTree.TKey[];
+    startKey?: NTree.TKey;
+    endKey?: NTree.TKey;
+    fieldNames?: NTree.IFieldNames;
+}): NTree.TKey[];
+export declare function convertDirectoryKeysToNodes(treeData: NTree.IDataNode[], keys: NTree.TKey[], fieldNames: NTree.IFieldNames): NTree.IDataNode[];

package/dist/components/CdsTree/utils/index.d.ts

@@ -1,2 +1,4 @@
 export * from './data';
 export * from './conduct';
+export * from './diff';
+export * from './directory';

package/dist/components/CdsUploader/CdsUploader.vue.d.ts

@@ -488,13 +488,13 @@ declare const _sfc_main: import("vue").DefineComponent<{
     "onUpdate:modelValue"?: ((fileList: NUploader.IUploadFile<any>[]) => any) | undefined;
     onChange?: ((info: NUploader.IUploadChangeParam<NUploader.IUploadFile<any>>) => any) | undefined;
     onRemove?: ((file: NUploader.IUploadFile<any>) => any) | undefined;
+    onDrop?: ((event: DragEvent) => any) | undefined;
     onDownload?: ((file: NUploader.IUploadFile<any>) => any) | undefined;
     onError?: ((error: NUploader.IUploadRequestError | ProgressEvent<EventTarget>, response: any, file: NUploader.IUploadFile<any>) => any) | undefined;
     onSuccess?: ((response: Record<string, unknown>, file: NUploader.IUploadFile<any>) => any) | undefined;
     onProgress?: ((event: {
         percent: number;
     } | undefined, file: NUploader.IUploadFile<any>) => any) | undefined;
-    onDrop?: ((event: DragEvent) => any) | undefined;
     onReject?: ((fileList: NUploader.IUploadFile<any>[]) => any) | undefined;
     onPreview?: ((file: NUploader.IUploadFile<any>) => any) | undefined;
 }, {

package/dist/components/index.d.ts

@@ -1,6 +1,6 @@
 /**
  * Automatically generated by CDS CLI
- * Generated on 9/18/2023, 8:34:41 AM
+ * Generated on 4/22/2024, 2:19:35 PM
  **/
 export { default as CdsAutocomplete } from './CdsAutocomplete/CdsAutocomplete.vue';
 export { default as CdsBadge } from './CdsBadge/CdsBadge.vue';
@@ -73,6 +73,9 @@ export { default as CdsToggle } from './CdsToggle/CdsToggle.vue';
 export { default as CdsToolbar } from './CdsToolbar/CdsToolbar.vue';
 export { default as CdsToolbarTitle } from './CdsToolbar/CdsToolbarTitle.vue';
 export { default as CdsTooltip } from './CdsTooltip/CdsTooltip.vue';
+export { default as CdsTree } from './CdsTree/CdsTree.vue';
+export { default as CdsTreeDirectory } from './CdsTree/CdsTreeDirectory.vue';
+export { default as CdsTreeNode } from './CdsTree/CdsTreeNode.vue';
 export { default as CdsUploader } from './CdsUploader/CdsUploader.vue';
 export * from './CdsAutocomplete';
 export * from './CdsBadge';
@@ -122,4 +125,5 @@ export * from './CdsTimePicker';
 export * from './CdsToggle';
 export * from './CdsToolbar';
 export * from './CdsTooltip';
+export * from './CdsTree';
 export * from './CdsUploader';

package/dist/composable/delay.d.ts

@@ -4,8 +4,9 @@ export interface IDelayProps {
     openDelay: number | string;
 }
 export interface IUseDelay {
-    runCloseDelay: () => Promise<boolean>;
-    runOpenDelay: () => Promise<boolean>;
+    clearDelay: () => void;
+    runCloseDelay: () => Promise<unknown>;
+    runOpenDelay: () => Promise<unknown>;
 }
 export declare const makeDelayProps: <Defaults extends {
     closeDelay?: unknown;

package/dist/composable/overlay.d.ts

@@ -22,6 +22,7 @@ export declare const makeOverlayProps: <Defaults extends {
     contentClasses?: unknown;
     contentProps?: unknown;
     noClickAnimation?: unknown;
+    opacity?: unknown;
 } = {}>(defaults?: Defaults | undefined) => import('../utils').AppendDefault<{
     /**
      * Указывает, к какому DOM элементу будет прикреплен компонент.
@@ -34,7 +35,7 @@ export declare const makeOverlayProps: <Defaults extends {
         default: boolean;
     };
     /**
-     * Указывает, что компонент будет прикреплен к родительскому элементу. Подразумевает absolute и attach
+     * Указывает, что компонент будет прикреплен к родительскому элементу. Подразумевает absolute и attach в true.
      */
     contained: {
         type: PropType<boolean>;
@@ -103,4 +104,11 @@ export declare const makeOverlayProps: <Defaults extends {
         type: PropType<boolean>;
         default: boolean;
     };
+    /**
+     * Прозрачность overlay компонента
+     */
+    opacity: {
+        type: PropType<string | number>;
+        default: undefined;
+    };
 }, Defaults>;

package/dist/composable/transition.d.ts

@@ -3,6 +3,8 @@ interface ITransitionProps extends TransitionProps {
     transition: string | boolean | (TransitionProps & {
         component?: Component;
     });
+    disabled?: boolean;
+    group?: boolean;
 }
 export declare const makeTransitionProps: <Defaults extends {
     transition?: unknown;

package/dist/create.d.ts

@@ -1,3 +1,4 @@
+import { ITeleportOptions } from './components/CdsOverlay/composable';
 import { ILocale, TAvailableLocale } from './locale';
 import type { IDisplayOptions, IThemeOptions } from './composable';
 import type { App } from 'vue';
@@ -11,6 +12,7 @@ export interface ICdsOptions {
     cssGrid?: boolean;
     ssr?: boolean;
     locale?: TAvailableLocale | ILocale;
+    teleport?: Partial<ITeleportOptions>;
 }
 interface NuxtApp {
     $nuxt?: {

package/dist/globals.d.ts

@@ -27,5 +27,12 @@ declare global {
     >;
   }
 
+  interface MouseEvent {
+    sourceCapabilities?: { firesTouchEvents: boolean };
+  }
+
+  function parseInt(s: string | number, radix?: number): number;
+  function parseFloat(string: string | number): number;
+
   export const __VUE_OPTIONS_API__: boolean | undefined;
 }

package/dist/transitions/collapseTransition.d.ts

@@ -0,0 +1,11 @@
+export declare const CdsTransitionCollapse: (name?: string, appear?: boolean) => {
+    name: string;
+    appear: boolean;
+    css: boolean;
+    onBeforeEnter: (node: HTMLDivElement) => void;
+    onEnter: (node: HTMLDivElement) => void;
+    onAfterEnter: (node: HTMLDivElement) => void;
+    onBeforeLeave: (node: HTMLDivElement) => void;
+    onLeave: (node: HTMLDivElement) => void;
+    onAfterLeave: (node: HTMLDivElement) => void;
+};

package/dist/transitions/index.d.ts

@@ -13,6 +13,7 @@ export declare const CdsTransitionExpandX: import("vue").DefineComponent<{
     mode: import("vue").Prop<"default" | "in-out" | "out-in", "default" | "in-out" | "out-in">;
 }>>, {}>;
 export { CdsTransitionModal } from './modalTransition';
+export { CdsTransitionCollapse } from './collapseTransition';
 export declare const CdsTransitionFade: import("vue").DefineComponent<{
     group: import("vue").PropType<boolean>;
     hideOnLeave: import("vue").PropType<boolean>;

package/dist/utils/dom/bindProps.d.ts

@@ -0,0 +1,2 @@
+export declare function bindProps(el: HTMLElement, props: Record<string, any>): void;
+export declare function unbindProps(el: HTMLElement, props: Record<string, any>): void;

package/dist/utils/dom/box.d.ts

@@ -24,3 +24,4 @@ export declare function getOverflow(a: Box, b: Box): {
         after: number;
     };
 };
+export declare function getTargetBox(target: HTMLElement | [x: number, y: number]): Box;

package/dist/utils/helpers.d.ts

@@ -1,3 +1,4 @@
+import { type VNode } from 'vue';
 import type { TItemKey } from '../composable';
 import type { ComponentPublicInstance, ComponentInternalInstance, ComputedGetter, InjectionKey, PropType, Ref, ToRefs, VNodeProps, VNodeChild, AllowedComponentProps, Component } from 'vue';
 export declare const preventedScrollClass = "cds-scroll-blocked";
@@ -139,6 +140,7 @@ export declare function destructComputed<T extends object>(getter: ComputedGette
  * @param val
  */
 export declare function includes(arr: readonly any[], val: any): boolean;
+export declare function eventName(propName: string): string;
 export declare function convertToUnit(str: number, unit?: string): string;
 export declare function convertToUnit(str: string | number | null | undefined, unit?: string): string | undefined;
 export declare function convertRemToPx(value: string): number;
@@ -150,10 +152,6 @@ export declare function convertRemToPx(value: string): number;
  */
 export declare function clamp(value: number, min?: number, max?: number): number;
 export declare function createRange(length: number, start?: number): number[];
-/**
- * Is value an like event
- * @param key
- */
 export declare const isOn: (key: string) => boolean;
 export declare const EventProp: PropType<(...args: any[]) => any>;
 export declare function isComponentInstance(obj: any): obj is ComponentPublicInstance;
@@ -161,7 +159,7 @@ export declare function isFixedPosition(el?: HTMLElement): boolean;
 export declare function padEnd(str: string, length: number, char?: string): string;
 export declare function padStart(string: number | string, targetLength: number, padString: string): string;
 export declare function pad(n: string | number, length?: number): string;
-export declare function refElement<T extends Record<string, any> | undefined>(obj: T): Exclude<T, ComponentPublicInstance> | HTMLElement;
+export declare function refElement(obj: ComponentPublicInstance<any> | HTMLElement): HTMLElement | undefined;
 export declare function omit<T extends object, K extends keyof T>(obj: T, fields: K[]): Omit<T, K>;
 export declare function findChildrenWithProvide(key: InjectionKey<any> | symbol, vnode?: VNodeChild | {
     [key: string]: any;
@@ -192,11 +190,15 @@ export declare function plurals(n: number, opts: string[]): string;
  * @param size
  */
 export declare function chunk(str: string, size?: number): string[];
+export declare function defer(timeout: number, cb: () => void): () => void;
+export declare function isValidElement(element: any): any;
 export declare function noop(): void;
 /**
  * Types
  */
 export declare type MaybeRef<T> = T | Ref<T>;
+declare type VNodeChildAtom = VNode | string | number | boolean | null | undefined | void;
+export declare type VueNode = VNodeChildAtom | VNodeChildAtom[] | JSX.Element;
 export declare type SelectItemKey = TItemKey;
 export declare type MaybePick<T extends object, U extends Extract<keyof T, string>> = Record<string, unknown> extends T ? Partial<Pick<T, U>> : Pick<T, U>;
 export declare type EventProp<T = (...args: any[]) => any> = T;

package/dist/utils/index.d.ts

@@ -6,6 +6,8 @@ export * from './use/eagerComputed';
 export * from './use/pickAttrs';
 export * from './use/cache';
 export * from './use/copyToClipboard';
+export * from './use/flattenChildren';
+export * from './use/listener';
 export * from './changeCase/noCase';
 export * from './changeCase/lowerCase';
 export * from './changeCase/pascalCase';
@@ -22,5 +24,6 @@ export * from './dom/wrapperRaf';
 export * from './dom/warn';
 export * from './dom/classNames';
 export * from './dom/hRender';
+export * from './dom/bindProps';
 export * from './colorsUtils';
 export { default as colors } from './colors';

package/dist/utils/use/flattenChildren.d.ts

@@ -0,0 +1,3 @@
+export declare function flattenChildren(children?: any[], filterEmpty?: boolean): any[];
+export declare function filterEmpty(children?: any[]): any[];
+export declare function isEmptyElement(c: Record<string, any>): boolean | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@central-design-system/components",
-  "version": "3.0.0-beta.22",
+  "version": "3.0.0-beta.24",
   "description": "Central Design System on the Vue 3.0 and TypeScript",
   "author": "magersoft",
   "license": "ISC",

package/src/scss/mixins/typo.scss

@@ -117,7 +117,6 @@
   font-size: var(--cds-font-body-size-s);
   line-height: var(--cds-font-height-helper);
   font-weight: var(--cds-font-weight-normal);
-  max-width: $max-width;
 }
 @mixin cds-font-description($max-width: 32rem) {
   font-family: var(--cds-font-family-sans);
@@ -132,6 +131,4 @@
   font-size: var(--cds-font-body-size-xs);
   line-height: var(--cds-font-height-helper);
   font-weight: var(--cds-font-weight-normal);
-  max-width: $max-width;
-  width: 75%;
 }

package/src/scss/modules/_transition.scss

@@ -10,6 +10,24 @@ $standard-duration: $cds-duration-fast + ms;
 $accent-duration: $cds-duration-normal + ms;
 
 @mixin transition-default() {
+  &-enter-active {
+    transition-duration: $standard-duration !important;
+    transition-timing-function: $standard-easing !important;
+  }
+
+  &-leave-active {
+    transition-duration: $standard-duration !important;
+    transition-timing-function: $standard-easing !important;
+  }
+
+  &-move {
+    transition-duration: 0.5s !important;
+    transition-property: transform !important;
+    transition-timing-function: $standard-easing !important;
+  }
+}
+
+@mixin transition-minimal() {
   &-enter-active {
     transition: $standard-duration $standard-easing;
   }
@@ -36,6 +54,19 @@ $accent-duration: $cds-duration-normal + ms;
 .fade-transition {
   @include transition-default();
 
+  &-enter-from, &-leave-to {
+    opacity: 0 !important;
+  }
+
+  &-enter-active,
+  &-leave-active {
+    transition-property: opacity !important;
+  }
+}
+
+.fade-transition-minimal {
+  @include transition-minimal();
+
   &-leave-active {
     position: absolute;
   }

package/src/scss/themes/index.ts

@@ -1,6 +1,6 @@
 /**
  * Automatically generated by CDS CLI
- * Generated on 4/12/2024, 7:42:06 AM
+ * Generated on 5/6/2024, 8:35:52 AM
  **/
 
 /**