@epam/ai-dial-ui-kit 0.3.0-rc.5 → 0.3.0-rc.50

package/dist/src/components/Textarea/Textarea.d.ts

@@ -4,9 +4,11 @@ export interface DialTextareaProps {
     placeholder?: string;
     textareaId: string;
     cssClass?: string;
+    containerCssClass?: string;
     disabled?: boolean;
     invalid?: boolean;
     readonly?: boolean;
+    disableTooltip?: boolean;
     onChange?: (value: string) => void;
 }
 /**
@@ -27,8 +29,10 @@ export interface DialTextareaProps {
  * @param [onChange] - Callback function called when the textarea value changes
  * @param [placeholder] - Placeholder text displayed when textarea is empty
  * @param [cssClass=""] - Additional CSS classes to apply to the textarea element
+ * @param [containerCssClass=""] - Additional CSS classes to apply to the container div
  * @param [disabled=false] - Whether the textarea is disabled
  * @param [readonly=false] - Whether the textarea is read-only (no user input allowed)
  * @param [invalid=false] - Whether the textarea has validation errors (applies error styling)
+ * @param [disableTooltip] - Whether to disable the tooltip that shows the full value on hover
  */
 export declare const DialTextarea: FC<DialTextareaProps>;

package/dist/src/components/Tooltip/TooltipContext.d.ts

@@ -28,10 +28,10 @@ export declare const useTooltipContext: () => {
         floating: HTMLElement | null;
     } & import('@floating-ui/react').ExtendedElements<import('@floating-ui/react').ReferenceType>;
     context: {
-        x: number;
-        y: number;
         placement: Placement;
         strategy: import('@floating-ui/utils').Strategy;
+        x: number;
+        y: number;
         middlewareData: import('@floating-ui/core').MiddlewareData;
         isPositioned: boolean;
         update: () => void;
@@ -75,10 +75,10 @@ export declare const useTooltip: ({ initialOpen, placement, isTriggerClickable,
         floating: HTMLElement | null;
     } & import('@floating-ui/react').ExtendedElements<import('@floating-ui/react').ReferenceType>;
     context: {
-        x: number;
-        y: number;
         placement: Placement;
         strategy: import('@floating-ui/utils').Strategy;
+        x: number;
+        y: number;
         middlewareData: import('@floating-ui/core').MiddlewareData;
         isPositioned: boolean;
         update: () => void;

package/dist/src/hooks/use-is-tablet-screen.d.ts

@@ -0,0 +1,15 @@
+/**
+ * A React hook that determines whether the current window size matches a tablet screen width.
+ *
+ * It initializes based on the current screen size using `isMediumScreen()` and updates its value
+ * whenever the window is resized.
+ *
+ * @returns {boolean} `true` if the viewport width matches the tablet breakpoint, otherwise `false`.
+ *
+ * @example
+ * const isTablet = useIsTabletScreen();
+ * if (isTablet) {
+ *   console.log('Tablet layout active');
+ * }
+ */
+export declare const useIsTabletScreen: () => boolean;

package/dist/src/index.d.ts

@@ -11,8 +11,20 @@ export { DialNoDataContent } from './components/NoDataContent/NoDataContent';
 export { DialCollapsibleSidebar } from './components/CollapsibleSidebar/CollapsibleSidebar';
 export { DialLabelledText } from './components/LabelledText/LabelledText';
 export { DialTag } from './components/Tag/Tag';
+export { DialEllipsisTooltip } from './components/EllipsisTooltip/EllipsisTooltip';
+export { DialDraggableItem } from './components/DraggableItem/DraggableItem';
+export { DialFileIcon } from './components/FileIcon/FileIcon';
+export { DialFormItem } from './components/FormItem/FormItem';
+export { DialSharedEntityIndicator } from './components/SharedEntityIndicator/SharedEntityIndicator';
+export { DialFileName } from './components/FileName/FileName';
+export { DialFolderName } from './components/FolderName/FolderName';
+export { DialTabs } from './components/Tabs/Tabs';
+export { DialTab } from './components/Tab/Tab';
+export { DialBreadcrumb } from './components/Breadcrumb/Breadcrumb';
+export { DialBreadcrumbItem } from './components/Breadcrumb/BreadcrumbItem';
 export { DialButton } from './components/Button/Button';
 export { DialCloseButton } from './components/CloseButton/CloseButton';
+export { DialRemoveButton } from './components/RemoveButton/RemoveButton';
 export { DialTextarea } from './components/Textarea/Textarea';
 export { DialTextAreaField } from './components/TextAreaField/TextAreaField';
 export { DialTooltip } from './components/Tooltip/Tooltip';
@@ -20,7 +32,9 @@ export { DialSwitch } from './components/Switch/Switch';
 export { DialPopup } from './components/Popup/Popup';
 export { DialConfirmationPopup } from './components/ConfirmationPopup/ConfirmationPopup';
 export { DialRadioGroupPopupField } from './components/RadioGroupPopupField/RadioGroupPopupField';
+export { DialFormPopup } from './components/FormPopup/FormPopup';
 export { DialInput } from './components/Input/Input';
+export type { DialInputProps } from './components/Input/Input';
 export { DialNumberInputField } from './components/InputField/InputField';
 export { DialTextInputField } from './components/InputField/InputField';
 export { DialPasswordInputField } from './components/PasswordInput/PasswordInputField';
@@ -30,6 +44,9 @@ export { DialInputPopup } from './components/InputPopup/InputPopup';
 export { DialAutocompleteInput } from './components/AutocompleteInput/AutocompleteInput';
 export { DialAutocompleteInputValue } from './components/AutocompleteInput/AutocompleteInputValue';
 export { DialTagInput } from './components/TagInput/TagInput';
+export { DialSelect } from './components/Select/Select';
+export { DialSelectField } from './components/SelectField/SelectField';
+export { DialLoadFileAreaField } from './components/LoadFileArea/LoadFileAreaField';
 export { DialDropdown } from './components/Dropdown/Dropdown';
 export { AlertVariant } from './types/alert';
 export { ButtonVariant } from './types/button';
@@ -39,6 +56,13 @@ export { ConfirmationPopupVariant } from './types/confirmation-popup';
 export { DropdownType } from './types/dropdown';
 export { SearchSize } from './types/search';
 export { TagVariant } from './types/tag';
+export { TabOrientation } from './types/tab';
+export type { DialBreadcrumbPathItem } from './models/breadcrumb';
+export { FormItemOrientation } from './types/form-item';
 export { StepStatus } from './models/step';
 export type { Step } from './models/step';
 export type { RadioButtonWithContent } from './models/radio';
+export type { SelectOption } from './models/select';
+export type { TabModel } from './models/tab';
+export type { DropdownItem } from './models/dropdown';
+export { mergeClasses } from './utils/merge-classes';

package/dist/src/models/breadcrumb.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode, MouseEvent } from 'react';
+export interface DialBreadcrumbPathItem {
+    title: ReactNode;
+    href?: string;
+    onClick?: (e: MouseEvent<HTMLAnchorElement>) => void;
+    disabled?: boolean;
+    cssClass?: string;
+    iconBefore?: ReactNode;
+}

package/dist/src/models/field-control-props.d.ts

@@ -6,6 +6,7 @@ export interface FieldControlProps {
 export interface InputBaseProps {
     elementId: string;
     value?: string | number | null;
+    defaultValue?: string | number;
     placeholder?: string;
     disabled?: boolean;
     readonly?: boolean;

package/dist/src/models/select.d.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from 'react';
+export interface SelectOption {
+    value: string;
+    label: string;
+    disabled?: boolean;
+    icon?: ReactNode;
+}

package/dist/src/models/tab.d.ts

@@ -0,0 +1,4 @@
+export interface TabModel {
+    id: string;
+    name: string;
+}

package/dist/src/types/form-item.d.ts

@@ -0,0 +1,4 @@
+export declare enum FormItemOrientation {
+    Vertical = "vertical",
+    Horizontal = "horizontal"
+}

package/dist/src/types/tab.d.ts

@@ -0,0 +1,4 @@
+export declare enum TabOrientation {
+    Horizontal = "horizontal",
+    Vertical = "vertical"
+}

package/dist/src/utils/merge-classes.d.ts

@@ -0,0 +1,3 @@
+import { default as classNames } from 'classnames';
+/** Merge class names (classnames → tailwind-merge). */
+export declare function mergeClasses(...inputs: Parameters<typeof classNames>): string;

package/dist/src/utils/mobile.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Checks if the current viewport width is within the "medium" (tablet) screen range.
+ *
+ * Specifically, it returns `true` if the window width is less than 1024 pixels.
+ * Safely handles server-side rendering by verifying that `window` is defined.
+ *
+ * @returns {boolean} `true` if the viewport width is less than 1024px, otherwise `false`.
+ *
+ * @example
+ * if (isMediumScreen()) {
+ *   console.log('Tablet or smaller screen detected');
+ * }
+ */
+export declare const isMediumScreen: () => boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@epam/ai-dial-ui-kit",
-  "version": "0.3.0-rc.5",
+  "version": "0.3.0-rc.50",
   "type": "module",
   "license": "Apache-2.0",
   "description": "A modern UI kit for building AI DIAL interfaces with React",
@@ -37,9 +37,9 @@
     "format": "prettier --check .",
     "format-fix": "prettier --write .",
     "preview": "vite preview",
-    "storybook": "concurrently 'npm run storybook:css' 'storybook dev -p 6006'",
+    "storybook": "concurrently \"npm run storybook:css\" \"storybook dev -p 6006\"",
     "storybook:css": "tailwindcss -w -i ./src/styles/tailwind-entry.scss -o ./src/index.css",
-    "build-storybook": "concurrently 'npm run build-storybook:css' 'storybook build'",
+    "build-storybook": "concurrently \"npm run build-storybook:css\" \"storybook build\"",
     "build-storybook:css": "tailwindcss -m -i ./src/styles/tailwind-entry.scss -o ./src/index.css",
     "prepare": "husky",
     "publish": "node tools/publish-lib.mjs",
@@ -56,6 +56,11 @@
   "overrides": {
     "esbuild": "0.25.9"
   },
+  "dependencies": {
+    "react-dnd": "^16.0.1",
+    "react-dnd-html5-backend": "^16.0.1",
+    "tailwind-merge": "^3.3.1"
+  },
   "peerDependencies": {
     "@floating-ui/react": "^0.27.15",
     "@monaco-editor/react": "^4.7.0",
@@ -70,10 +75,10 @@
     "@eslint/compat": "^1.3.1",
     "@eslint/eslintrc": "^3.3.1",
     "@eslint/js": "^9.31.0",
-    "@storybook/addon-a11y": "^9.1.10",
-    "@storybook/addon-docs": "^9.1.10",
-    "@storybook/addon-vitest": "^9.1.10",
-    "@storybook/react-vite": "^9.1.10",
+    "@storybook/addon-a11y": "^9.1.13",
+    "@storybook/addon-docs": "^9.1.13",
+    "@storybook/addon-vitest": "^9.1.13",
+    "@storybook/react-vite": "^9.1.13",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/react": "^16.3.0",
     "@types/jsdom": "^21.1.7",
@@ -92,7 +97,7 @@
     "eslint-plugin-react": "7.37.5",
     "eslint-plugin-react-hooks": "^5.2.0",
     "eslint-plugin-react-refresh": "^0.4.20",
-    "eslint-plugin-storybook": "^9.1.10",
+    "eslint-plugin-storybook": "^9.1.13",
     "eslint-plugin-tailwindcss": "^3.18.2",
     "globals": "^16.3.0",
     "husky": "^9.1.7",
@@ -103,8 +108,8 @@
     "prettier": "3.6.2",
     "sass": "^1.89.2",
     "sass-embedded": "^1.89.2",
-    "storybook": "^9.1.10",
-    "storybook-addon-pseudo-states": "^9.1.10",
+    "storybook": "^9.1.13",
+    "storybook-addon-pseudo-states": "^9.1.13",
     "tailwindcss": "^3.4.17",
     "typescript": "~5.8.3",
     "typescript-eslint": "^8.35.1",