@datarobot/design-system 28.8.4 → 28.9.0

package/js/bundle/index.d.ts

@@ -175,7 +175,7 @@ export { DropdownMenu, DropdownMenuContent, DropdownItem, DropdownTrigger, Dropd
 export type { EditableTextProps, EditableTextControlledProps, EditModeProps, TextModeProps, };
 export { EditableText, EditableTextControlled };
 
-export { FileTreeFileComponent, FileTreeFolderComponent, FileTree, FileTreeItem, FileTreeItemContent, FileTreeItemActions, FILE_TYPE, fileTreeAdapter, cleanUpPath, compareUtils, };
+export { FileTreeFileComponent, FileTreeFolderComponent, FileTree, FileTreeItem, FileTreeItemContent, FileTreeItemActions, FILE_TYPE, fileTreeAdapter, cleanUpPath, compareUtils, FileTreeLoading, };
 export type { FileTreeItemContentComponent, FileTreeFileComponentProps, FileTreeFolderComponentProps, FileTreeItemProps, FileTreeProps, FileTreeItemActionsActions, FileTreeItemActionsProps, FileTreeItemContentType, FileTreeItemContentProps, FileNodeType, FileTreeType, };
 
 export { UploadFileStatusMessage };
@@ -2627,12 +2627,20 @@ export type FileTreeProps = {
             * Optional row size prop that dictates action button size.
             */
         rowSize?: ButtonSizeType;
+        /**
+            * Shows skeleton isLoading state when true
+            */
+        isLoading?: boolean;
+        /**
+            * Optional loading pattern to use for skeleton loading state. It's an array of levels to render. Default is [0, 1, 1, 2, 0]
+            */
+        loadingPattern?: number[];
 };
 /** Displays a browsable file tree navigation component
         @midnight-gray-supported
         @alpine-light-supported
     */
-export const FileTree: ({ fileTree, folderComponentProps, fileComponentProps, rootClass, fileTestId, folderTestId, rowSize, FileComponent, FolderComponent, ItemContentComponent, rootTestId, branchTestId, itemTestId, disabled, sortingStrategy, }: FileTreeProps) => import("react/jsx-runtime").JSX.Element | null;
+export const FileTree: ({ fileTree, folderComponentProps, fileComponentProps, rootClass, fileTestId, folderTestId, rowSize, FileComponent, FolderComponent, ItemContentComponent, rootTestId, branchTestId, itemTestId, disabled, sortingStrategy, isLoading, loadingPattern, }: FileTreeProps) => import("react/jsx-runtime").JSX.Element | null;
 
 type AddPathType = {
     customProps: Partial<FileTreeItemContentType>;
@@ -2759,6 +2767,15 @@ export type FileTreeItemContentProps = {
 const FileTreeItemContent: ({ defaultIcon, item, children, disabled, testId, truncateWithTooltip, }: FileTreeItemContentProps) => import("react/jsx-runtime").JSX.Element;
 export default FileTreeItemContent;
 
+type FileTreeLoadingProps = {
+    loadingPattern: number[];
+    rootClass?: string;
+    rootTestId?: string;
+    branchTestId?: string;
+};
+export function FileTreeLoading({ loadingPattern, rootClass, rootTestId, branchTestId, }: FileTreeLoadingProps): import("react/jsx-runtime").JSX.Element;
+export {};
+
 export function compareByName(nodes: FileTreeType): FileTreeType;
 export function compareByNameAndType(nodes: FileTreeType): FileTreeType;
 
@@ -5795,7 +5812,6 @@ export type TableReactPropsType<TData, TMeta> = {
     * New configurable table that uses [@tanstack/react-table](https://tanstack.com/table) under the hood.
     * Also check the full page table demo [Here](/Controlled Table)
     * @midnight-gray-supported
-    * @uxr-only-supported
     * @alpine-light-supported
     */
 export default function TableReact<IData, IMeta>({ tableContainerTestId, width: defaultWidth, state, handlers, settings, components, classes, ...props }: TableReactPropsType<IData, IMeta>): import("react/jsx-runtime").JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@datarobot/design-system",
-  "version": "28.8.4",
+  "version": "28.9.0",
   "description": "DataRobot react components library",
   "scripts": {
     "build": "node ../../tools/build-lib.js",

package/styles/index.css

@@ -775,6 +775,48 @@
   --table-selected-item-bg-color: var(--accent-secondary);
   --table-checkbox-column-flex-grow: 1;
   /*#endregion */
+  /*#region React-Table component */
+  --react-table-s-row-height: 1.75rem;
+  --react-table-m-row-height: 3rem;
+  --react-table-l-row-height: 4.25rem;
+  --react-table-flexible-row-height: 3.75rem;
+  --react-table-nested-header-height: 2.25rem;
+  --react-table-flexible-top-bottom-padding: 0.75rem;
+  --react-table-nested-top-bottom-padding: 0.5rem;
+  --react-table-top-bottom-padding: 0.25rem;
+  --react-table-row-border: #252B2F;
+  --react-table-cell-background: #0F1315;
+  --react-table-pinned-border-color: #252B2F;
+  --react-table-pinned-border-box-shadow: 0.0625rem 0px 0px 0px rgba(17, 21, 25, 0.02), 0.1875rem 0px 0px 0px rgba(17, 21, 25, 0.04), 0.3125rem 0px 0px 0px rgba(17, 21, 25, 0.06), 0.4375rem 0px 0px 0px rgba(17, 21, 25, 0.08), 0.5625rem 0px 0px 0px rgba(17, 21, 25, 0.1), 0.6875rem 0px 0px 0px rgba(17, 21, 25, 0.12);
+  --react-table-actions-column-border: -0.0625rem 0px 0px 0px rgba(17, 21, 25, 0.02), -0.1875rem 0px 0px 0px rgba(17, 21, 25, 0.04), -0.3125rem 0px 0px 0px rgba(17, 21, 25, 0.06), -0.4375rem 0px 0px 0px rgba(17, 21, 25, 0.08), -0.5625rem 0px 0px 0px rgba(17, 21, 25, 0.1), -0.6875rem 0px 0px 0px rgba(17, 21, 25, 0.12);
+  --react-table-header-text-color: #C4C8C9;
+  --react-table-header-hover-text-color: #E2E2E3;
+  --react-table-header-border: #252B2F;
+  --react-table-header-border-color: var(--base-border-color);
+  --react-table-header-hover-border-color: #ff8326;
+  --react-table-header-cell-menu-item-padding: 0.25rem 1rem;
+  --react-table-hover-color: #252B2F;
+  --react-table-selected-color: #252B2F;
+  --react-table-selected-border: #53585B;
+  --react-table-selected-border-color: #3ca3e8;
+  --react-table-sort-icon-color: #3ca3e8;
+  --react-table-footer-background: #0F1315;
+  --react-table-footer-border: 0.0625rem solid #252B2F;
+  --react-table-footer-bottom-border: var(--react-table-footer-border);
+  --react-table-footer-side-border: unset;
+  --react-table-not-active-setting-color: #81868A;
+  --react-table-settings-group-border-color: #53585B;
+  --react-table-settings-drag-handler-color: #81868A;
+  --react-table-settings-drag-handler-hover-color: #B1B6B9;
+  --react-table-container-border: transparent;
+  --react-table-container-background: #0F1315;
+  --react-table-expanded-background: #181D20;
+  --react-table-expanded-container-shadow: 0 0.75rem 2rem -0.125rem rgba(17, 21, 25, 0.58);
+  --react-table-expanded-row-shadow: 0px -0.75rem 2rem rgba(17, 21, 25, 0.58);
+  --react-table-container-border: #252B2F;
+  --react-table-container-border-radius: 0.5rem;
+  --react-table-disabled-click-row-color: #81868A;
+  /*#endregion */
   /*#region Tabs component */
   --tabgroup-container-background: transparent;
   --tabgroup-container-border: none;
@@ -8475,6 +8517,78 @@ td.rdtYear {
   background-color: var(--file-tree-action-button-hover-color);
 }
 
+/*!**********************************************************************************************************************************************************************************************************************************************!*\
+  !*** css ../../node_modules/css-loader/dist/cjs.js!../../node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!../../node_modules/less-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./src/components/skeleton/skeleton.less ***!
+  \**********************************************************************************************************************************************************************************************************************************************/
+.skeleton-loading {
+  position: relative;
+  display: block;
+  height: 1.5rem;
+  width: 100%;
+  background-color: var(--skeleton-background);
+  overflow: hidden;
+}
+.skeleton-loading:after {
+  content: '';
+  position: absolute;
+  background: linear-gradient(90deg, transparent, var(--skeleton-animation-background), transparent);
+  transform: translateX(-100%) translateZ(0);
+  animation: 3s linear 0.5s infinite normal none running animationWave;
+  inset: 0px;
+}
+.skeleton-loading.circular {
+  height: 2rem;
+  width: 2rem;
+  margin: 0 auto;
+  border-radius: 50%;
+}
+.skeleton-loading.rounded {
+  border-radius: 0.25rem;
+}
+.skeleton-loading.text {
+  border-radius: 0.5rem;
+}
+.skeleton-loading.text.heading-01 {
+  height: 3rem;
+}
+.skeleton-loading.text.heading-02 {
+  height: 2.25rem;
+}
+.skeleton-loading.text.heading-03 {
+  height: 1.75rem;
+}
+.skeleton-loading.text.heading-04 {
+  height: 1.5rem;
+}
+.skeleton-loading.text.heading-05 {
+  height: 1.25rem;
+}
+.skeleton-loading.text.anchor,
+.skeleton-loading.text.mn-label,
+.skeleton-loading.text.code {
+  height: 1.25rem;
+}
+.skeleton-loading.text.heading-06,
+.skeleton-loading.text.body-secondary,
+.skeleton-loading.text.body {
+  height: 1.25rem;
+}
+.skeleton-loading.text.caption-01,
+.skeleton-loading.text.uppercased {
+  height: 1rem;
+}
+@keyframes animationWave {
+  0% {
+    transform: translateX(-100%);
+  }
+  50% {
+    transform: translateX(100%);
+  }
+  100% {
+    transform: translateX(100%);
+  }
+}
+
 /*!******************************************************************************************************************************************************************************************************************************************************!*\
   !*** css ../../node_modules/css-loader/dist/cjs.js!../../node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!../../node_modules/less-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./src/components/progress-bar/progress-bar.less ***!
   \******************************************************************************************************************************************************************************************************************************************************/
@@ -10588,78 +10702,6 @@ code.hljs {
   margin-bottom: 0.5rem;
 }
 
-/*!**********************************************************************************************************************************************************************************************************************************************!*\
-  !*** css ../../node_modules/css-loader/dist/cjs.js!../../node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!../../node_modules/less-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./src/components/skeleton/skeleton.less ***!
-  \**********************************************************************************************************************************************************************************************************************************************/
-.skeleton-loading {
-  position: relative;
-  display: block;
-  height: 1.5rem;
-  width: 100%;
-  background-color: var(--skeleton-background);
-  overflow: hidden;
-}
-.skeleton-loading:after {
-  content: '';
-  position: absolute;
-  background: linear-gradient(90deg, transparent, var(--skeleton-animation-background), transparent);
-  transform: translateX(-100%) translateZ(0);
-  animation: 3s linear 0.5s infinite normal none running animationWave;
-  inset: 0px;
-}
-.skeleton-loading.circular {
-  height: 2rem;
-  width: 2rem;
-  margin: 0 auto;
-  border-radius: 50%;
-}
-.skeleton-loading.rounded {
-  border-radius: 0.25rem;
-}
-.skeleton-loading.text {
-  border-radius: 0.5rem;
-}
-.skeleton-loading.text.heading-01 {
-  height: 3rem;
-}
-.skeleton-loading.text.heading-02 {
-  height: 2.25rem;
-}
-.skeleton-loading.text.heading-03 {
-  height: 1.75rem;
-}
-.skeleton-loading.text.heading-04 {
-  height: 1.5rem;
-}
-.skeleton-loading.text.heading-05 {
-  height: 1.25rem;
-}
-.skeleton-loading.text.anchor,
-.skeleton-loading.text.mn-label,
-.skeleton-loading.text.code {
-  height: 1.25rem;
-}
-.skeleton-loading.text.heading-06,
-.skeleton-loading.text.body-secondary,
-.skeleton-loading.text.body {
-  height: 1.25rem;
-}
-.skeleton-loading.text.caption-01,
-.skeleton-loading.text.uppercased {
-  height: 1rem;
-}
-@keyframes animationWave {
-  0% {
-    transform: translateX(-100%);
-  }
-  50% {
-    transform: translateX(100%);
-  }
-  100% {
-    transform: translateX(100%);
-  }
-}
-
 /*!**********************************************************************************************************************************************************************************************************************************************************!*\
   !*** css ../../node_modules/css-loader/dist/cjs.js!../../node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!../../node_modules/less-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./src/components/pagination-new/pagination-new.less ***!
   \**********************************************************************************************************************************************************************************************************************************************************/