@datarobot/design-system 28.2.2

package/cjs/embedded-steps/embedded-steps.d.ts

@@ -0,0 +1,20 @@
+import { StepStyleType } from './types';
+import './embedded-steps.less';
+export type EmbeddedStepsSteps = {
+    stepName: string;
+    stepKey: string;
+    stepStyle?: StepStyleType;
+    markCompleted?: Array<string>;
+};
+export type EmbeddedStepsProps = {
+    steps: Array<EmbeddedStepsSteps>;
+    currentStepKey?: string;
+    onClick?: (stepKey?: string) => void;
+    isDisabled?: boolean;
+    className?: string;
+};
+/** Conveys progress through numbers of steps
+ * [CAPITALIZATION] Use sentence case for each step
+ * @deprecated The component is deprecated, use Stepper instead
+ */
+export declare const EmbeddedSteps: ({ steps, currentStepKey, onClick, isDisabled, className, }: EmbeddedStepsProps) => import("react/jsx-runtime").JSX.Element;

package/cjs/embedded-steps/embedded-steps.js

@@ -0,0 +1,49 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.EmbeddedSteps = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _embeddedStep = require("./embedded-step");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/** Conveys progress through numbers of steps
+ * [CAPITALIZATION] Use sentence case for each step
+ * @deprecated The component is deprecated, use Stepper instead
+ */
+const EmbeddedSteps = ({
+  steps,
+  currentStepKey,
+  onClick = () => {},
+  isDisabled,
+  className
+}) => {
+  const currentStepIndex = steps.findIndex(step => step.stepKey === currentStepKey);
+  const currentStep = steps.find(step => step.stepKey === currentStepKey);
+  function isCompleted(step, index) {
+    if (!currentStep) {
+      return true;
+    }
+    return currentStep.markCompleted ? currentStep.markCompleted.includes(step.stepKey) : index < currentStepIndex;
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: (0, _classnames.default)('embedded-steps', {
+      disabled: isDisabled
+    }, className),
+    "test-id": "embedded-steps",
+    children: steps.map((step, index) => {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_embeddedStep.EmbeddedStep, {
+        name: step.stepName,
+        stepKey: step.stepKey,
+        active: index === currentStepIndex,
+        completed: isCompleted(step, index),
+        styling: step.stepStyle,
+        onClick: () => !isDisabled && onClick(step.stepKey),
+        isDisabled: isDisabled
+      }, step.stepName);
+    })
+  });
+};
+exports.EmbeddedSteps = EmbeddedSteps;

package/cjs/embedded-steps/index.d.ts

@@ -0,0 +1,4 @@
+export { EmbeddedSteps } from './embedded-steps';
+export type { EmbeddedStepsProps, EmbeddedStepsSteps } from './embedded-steps';
+export { StepStyles } from './types';
+export type { StepStyleType } from './types';

package/cjs/embedded-steps/index.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "EmbeddedSteps", {
+  enumerable: true,
+  get: function () {
+    return _embeddedSteps.EmbeddedSteps;
+  }
+});
+Object.defineProperty(exports, "StepStyles", {
+  enumerable: true,
+  get: function () {
+    return _types.StepStyles;
+  }
+});
+var _embeddedSteps = require("./embedded-steps");
+var _types = require("./types");

package/cjs/embedded-steps/step-dot.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import './embedded-steps.less';
+export type StepDotProps = {
+    stepKey: string;
+    activated: boolean;
+    completed: boolean;
+    onClick?: (event: React.MouseEvent | React.KeyboardEvent<Element>) => void;
+    isDisabled?: boolean;
+    ariaLabel?: string;
+};
+export declare const StepDot: ({ stepKey, activated, completed, onClick, isDisabled, ariaLabel, }: StepDotProps) => import("react/jsx-runtime").JSX.Element;

package/cjs/embedded-steps/step-dot.js

@@ -0,0 +1,55 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StepDot = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _faCircle = require("@fortawesome/free-solid-svg-icons/faCircle");
+var _faCircle2 = require("@fortawesome/free-regular-svg-icons/faCircle");
+var _hooks = require("../hooks");
+var _fontAwesomeIcon = require("../font-awesome-icon");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const StepDot = ({
+  stepKey,
+  activated,
+  completed,
+  onClick,
+  isDisabled,
+  ariaLabel
+}) => {
+  const attrs = (0, _hooks.useNonNativeButtonAttrs)({
+    isDisabled,
+    onKeyDown: onClick,
+    onClick
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+    className: "fa-layers fa-2x dot-layer",
+    ...attrs,
+    "aria-label": ariaLabel,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_fontAwesomeIcon.FontAwesomeIcon, {
+      icon: _faCircle.faCircle,
+      className: "outside-circle",
+      "test-id": `StepDot-${stepKey}`
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_fontAwesomeIcon.FontAwesomeIcon, {
+      icon: _faCircle.faCircle,
+      className: (0, _classnames.default)('inner-circle', {
+        hidden: !completed && !activated
+      }, {
+        active: activated
+      }, {
+        completed
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_fontAwesomeIcon.FontAwesomeIcon, {
+      icon: _faCircle2.faCircle,
+      className: (0, _classnames.default)('ring', {
+        active: activated
+      }, {
+        completed
+      })
+    })]
+  });
+};
+exports.StepDot = StepDot;

package/cjs/embedded-steps/types.d.ts

@@ -0,0 +1,7 @@
+import { ValueOf } from '../types';
+export declare const StepStyles: {
+    readonly RECTANGLE: "rectangle";
+    readonly DOTTED: "dotted";
+    readonly NONE: "none";
+};
+export type StepStyleType = ValueOf<typeof StepStyles>;

package/cjs/embedded-steps/types.js

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StepStyles = void 0;
+const StepStyles = exports.StepStyles = {
+  RECTANGLE: 'rectangle',
+  DOTTED: 'dotted',
+  NONE: 'none'
+};

package/cjs/empty-state/empty-state.d.ts

@@ -0,0 +1,51 @@
+import { ReactNode } from 'react';
+import { IconLookup } from '@fortawesome/fontawesome-svg-core';
+import { TooltipPlacementsType } from '../tooltip/tooltip';
+import { AccentType } from '../button';
+import './empty-state.less';
+type ActionParams = {
+    onActionBtnClick: () => void;
+    onActionBtnText: string;
+    onActionBtnIcon?: IconLookup | null;
+    onActionBtnType?: AccentType;
+    onActionButtonDisabled?: boolean;
+    onActionButtonTooltipText?: string;
+    onActionButtonTooltipPlacement?: TooltipPlacementsType;
+    onActionBtnIsLoading?: boolean;
+    onActionBtnLoadingText?: string;
+    fullWidth?: boolean;
+};
+export type EmptyStateProps = {
+    /** Source attr value */
+    imageSrc?: string;
+    /** Use image's original size or use a predefined default size. */
+    originalImageSize?: boolean;
+    /** Title of the empty state */
+    title: ReactNode;
+    /** Sub text for details to be rendered under title */
+    description?: ReactNode;
+    /** Action button text and click handler (object, or array of objects if you want several buttons) */
+    actionParams?: ActionParams[] | ActionParams;
+    testId?: string;
+    /** Text of image alt attr */
+    altText?: string;
+    /** Custom classname for empty state */
+    className?: string;
+    /** Custom content to be rendered at the top */
+    customContentTop?: ReactNode;
+    /** Custom content to be rendered at the bottom */
+    customContentBottom?: ReactNode;
+};
+/** EmptyState displays a missing content container with title, description
+ * and action button, that helps you to get going without wondering what to do next
+ * [CAPITALIZATION] Use sentence case for title, description and buttons
+ * @midnight-gray-supported
+ * @alpine-light-supported
+ * */
+declare const EmptyState: ({ imageSrc, title, description, actionParams, originalImageSize, testId, altText, className, customContentTop, customContentBottom, }: EmptyStateProps) => import("react/jsx-runtime").JSX.Element;
+export declare const EMPTY_STATE_BUTTON_TYPES: {
+    PRIMARY: "primary";
+    SECONDARY: "secondary";
+    COMMAND: "command";
+};
+export default EmptyState;

package/cjs/empty-state/empty-state.js

@@ -0,0 +1,97 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.EMPTY_STATE_BUTTON_TYPES = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _button = require("../button");
+var _useTranslation = require("../hooks/use-translation");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function checkForMultiplePrimaryButtons(actionParamsProp) {
+  let primaryButtonsCount = 0;
+  actionParamsProp.forEach(item => {
+    // we need to check whether onActionBtnType is primary or undefined as undefined will default to primary
+    if (item?.onActionBtnType === _button.ACCENT_TYPES.PRIMARY || !item?.onActionBtnType) {
+      primaryButtonsCount++;
+    }
+  });
+  // if number of primary buttons is more than 1 - raise the error
+  if (primaryButtonsCount > 1) {
+    return new Error(`More then one primary buttons passed. Check onActionBtnType prop.`);
+  }
+}
+/** EmptyState displays a missing content container with title, description
+ * and action button, that helps you to get going without wondering what to do next
+ * [CAPITALIZATION] Use sentence case for title, description and buttons
+ * @midnight-gray-supported
+ * @alpine-light-supported
+ * */
+const EmptyState = ({
+  imageSrc,
+  title,
+  description,
+  actionParams = [],
+  originalImageSize = false,
+  testId = 'empty-state',
+  altText,
+  className = '',
+  customContentTop,
+  customContentBottom
+}) => {
+  const {
+    t
+  } = (0, _useTranslation.useTranslation)();
+  const actionParamsProps = Array.isArray(actionParams) ? actionParams : [actionParams];
+  if (actionParamsProps.length) {
+    checkForMultiplePrimaryButtons(actionParamsProps);
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    "aria-live": "polite",
+    "test-id": testId,
+    className: (0, _classnames.default)('empty-state', className),
+    children: [imageSrc && /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+      "test-id": "empty-state-img",
+      className: originalImageSize ? 'original-image-size' : undefined,
+      src: imageSrc,
+      alt: altText ?? t('Empty state')
+    }), customContentTop, title && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      "test-id": "empty-state-title",
+      className: "empty-state-title",
+      children: title
+    }), description && /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+      "test-id": "empty-state-description",
+      className: "empty-state-description",
+      children: description
+    }), actionParams && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "empty-state-action-buttons-container",
+      children: actionParamsProps.map(actionParamItem => {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.Button, {
+          testId: "empty-state-action-btn",
+          onClick: actionParamItem.onActionBtnClick,
+          accentType: actionParamItem.onActionBtnType,
+          className: "empty-state-action-btn",
+          isDisabled: actionParamItem.onActionButtonDisabled,
+          tooltipText: actionParamItem.onActionButtonTooltipText,
+          tooltipPlacement: actionParamItem.onActionButtonTooltipPlacement || 'bottom',
+          leftIcon: actionParamItem.onActionBtnIcon,
+          isLoading: actionParamItem.onActionBtnIsLoading,
+          loadingText: actionParamItem.onActionBtnLoadingText,
+          fullWidth: actionParamItem.fullWidth,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+            "test-id": "empty-state-action-btn-text",
+            children: actionParamItem.onActionBtnText
+          })
+        }, actionParamItem.onActionBtnText);
+      })
+    }), customContentBottom]
+  });
+};
+const EMPTY_STATE_BUTTON_TYPES = exports.EMPTY_STATE_BUTTON_TYPES = {
+  PRIMARY: _button.ACCENT_TYPES.PRIMARY,
+  SECONDARY: _button.ACCENT_TYPES.SECONDARY,
+  COMMAND: _button.ACCENT_TYPES.COMMAND
+};
+var _default = exports.default = EmptyState;

package/cjs/empty-state/index.d.ts

@@ -0,0 +1,2 @@
+export type { EmptyStateProps } from './empty-state';
+export { default as EmptyState, EMPTY_STATE_BUTTON_TYPES } from './empty-state';

package/cjs/empty-state/index.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "EMPTY_STATE_BUTTON_TYPES", {
+  enumerable: true,
+  get: function () {
+    return _emptyState.EMPTY_STATE_BUTTON_TYPES;
+  }
+});
+Object.defineProperty(exports, "EmptyState", {
+  enumerable: true,
+  get: function () {
+    return _emptyState.default;
+  }
+});
+var _emptyState = _interopRequireWildcard(require("./empty-state"));
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }

package/cjs/error-boundary/error-boundary-body.d.ts

@@ -0,0 +1,5 @@
+type ErrorBoundaryBodyProps = {
+    defaultFallbackText?: string;
+};
+export default function ErrorBoundaryBody({ defaultFallbackText, }: ErrorBoundaryBodyProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/cjs/error-boundary/error-boundary-body.js

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = ErrorBoundaryBody;
+var _react = _interopRequireDefault(require("react"));
+var _message = require("../message");
+var _useTranslation = require("../hooks/use-translation");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function ErrorBoundaryBody({
+  defaultFallbackText
+}) {
+  const {
+    t
+  } = (0, _useTranslation.useTranslation)();
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_message.Message, {
+    type: _message.MESSAGE_TYPES.ERROR,
+    testId: "error-boundary-default-fallback",
+    children: defaultFallbackText || t('We encountered an unexpected error and cannot proceed. Try again or contact Support for assistance.')
+  });
+}

package/cjs/error-boundary/error-boundary.d.ts

@@ -0,0 +1,25 @@
+import React, { Component, ErrorInfo } from 'react';
+import './error-boundary.less';
+export type ErrorBoundaryProps = {
+    children: React.ReactElement;
+    fallback?: React.ReactElement;
+    defaultFallbackText?: string;
+    onCatch?: (error: Error, errorInfo: ErrorInfo) => void;
+};
+type ErrorBoundaryState = {
+    hasError: boolean;
+};
+/**
+ * ErrorBoundary is a class component that should wrap Suspense tags to catch errors thrown.
+ * It is a simple class component that implements the componentDidCatch and
+ * static getDerivedStateFromError methods, and renders a fallback when it encounters an error.
+ */
+export default class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
+    constructor(props: ErrorBoundaryProps);
+    static getDerivedStateFromError(): {
+        hasError: boolean;
+    };
+    componentDidCatch(error: Error, errorInfo: ErrorInfo): void;
+    render(): import("react/jsx-runtime").JSX.Element;
+}
+export {};

package/cjs/error-boundary/error-boundary.js

@@ -0,0 +1,55 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _errorBoundaryBody = _interopRequireDefault(require("./error-boundary-body"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+/**
+ * ErrorBoundary is a class component that should wrap Suspense tags to catch errors thrown.
+ * It is a simple class component that implements the componentDidCatch and
+ * static getDerivedStateFromError methods, and renders a fallback when it encounters an error.
+ */
+class ErrorBoundary extends _react.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      hasError: false
+    };
+  }
+  static getDerivedStateFromError() {
+    return {
+      hasError: true
+    };
+  }
+  componentDidCatch(error, errorInfo) {
+    const {
+      onCatch
+    } = this.props;
+    if (onCatch) {
+      onCatch(error, errorInfo);
+    }
+  }
+  render() {
+    if (this.state.hasError) {
+      const {
+        fallback
+      } = this.props;
+      if (fallback) {
+        return fallback;
+      }
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "error-boundary-message-container",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_errorBoundaryBody.default, {
+          defaultFallbackText: this.props.defaultFallbackText
+        })
+      });
+    }
+    return this.props.children;
+  }
+}
+exports.default = ErrorBoundary;

package/cjs/error-boundary/index.d.ts

@@ -0,0 +1,2 @@
+export type { ErrorBoundaryProps } from './error-boundary';
+export { default as ErrorBoundary } from './error-boundary';

package/cjs/error-boundary/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "ErrorBoundary", {
+  enumerable: true,
+  get: function () {
+    return _errorBoundary.default;
+  }
+});
+var _errorBoundary = _interopRequireDefault(require("./error-boundary"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/cjs/export-button/export-button.d.ts

@@ -0,0 +1,8 @@
+import { ButtonProps } from '../button';
+type ExportButtonProps = ButtonProps & {
+    onExport: () => void;
+    exportText?: string;
+};
+/** An export action indicator. */
+export declare const ExportButton: ({ onExport, isDisabled, testId, tooltipText, exportText, tooltipDocsLink, tooltipPlacement, }: ExportButtonProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/cjs/export-button/export-button.js

@@ -0,0 +1,43 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ExportButton = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _faArrowFromBottom = require("@fortawesome/pro-solid-svg-icons/faArrowFromBottom");
+var _button = require("../button");
+var _useTranslation = require("../hooks/use-translation");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/** An export action indicator. */
+const ExportButton = ({
+  onExport,
+  isDisabled = false,
+  testId = 'export-modal-open-button',
+  tooltipText,
+  exportText,
+  tooltipDocsLink = null,
+  tooltipPlacement
+}) => {
+  const {
+    t
+  } = (0, _useTranslation.useTranslation)();
+  const exportTextWithDefault = typeof exportText === 'undefined' ? t('Export') : exportText;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.Button, {
+    accentType: exportTextWithDefault ? _button.ACCENT_TYPES.COMMAND : _button.ACCENT_TYPES.GHOST,
+    onClick: onExport,
+    isDisabled: isDisabled,
+    className: "graph-export-button",
+    leftIcon: _faArrowFromBottom.faArrowFromBottom,
+    testId: testId,
+    "aria-label": exportText || t('Export'),
+    tooltipText: tooltipText ?? t('Download information related to this visualization'),
+    tooltipPlacement: tooltipPlacement,
+    tooltipDocsLink: tooltipDocsLink,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      children: exportTextWithDefault
+    })
+  });
+};
+exports.ExportButton = ExportButton;

package/cjs/export-button/index.d.ts

@@ -0,0 +1 @@
+export { ExportButton } from './export-button';

package/cjs/export-button/index.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "ExportButton", {
+  enumerable: true,
+  get: function () {
+    return _exportButton.ExportButton;
+  }
+});
+var _exportButton = require("./export-button");

package/cjs/file-tree/compareUtils.d.ts

@@ -0,0 +1,3 @@
+import { FileTreeType } from '.';
+export declare function compareByName(nodes: FileTreeType): FileTreeType;
+export declare function compareByNameAndType(nodes: FileTreeType): FileTreeType;

package/cjs/file-tree/compareUtils.js

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.compareByName = compareByName;
+exports.compareByNameAndType = compareByNameAndType;
+var _ = require(".");
+function sortByComparator(nodes, compareFunction) {
+  nodes.sort(compareFunction);
+  nodes.forEach(node => {
+    if (node.content) {
+      sortByComparator(node.content, compareFunction);
+    }
+  });
+  return nodes;
+}
+function compareByName(nodes) {
+  return sortByComparator(nodes, (a, b) => a.name.localeCompare(b.name));
+}
+function compareByNameAndType(nodes) {
+  return sortByComparator(nodes, (a, b) => {
+    if (a.type !== b.type) {
+      return a.type === _.FILE_TYPE.FOLDER ? -1 : 1;
+    }
+    return a.name.localeCompare(b.name);
+  });
+}