@datarobot/design-system 28.2.2

package/esm/simple-table/simple-table.js

@@ -0,0 +1,135 @@
+import React, { useRef, useContext } from 'react';
+import classNames from 'classnames';
+import { useTableKeyboardNavigation, TableKeyboardNavigationContext, getCellId } from '../hooks/use-table-keyboard-navigation';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+function HeaderCell({
+  column,
+  columnIndex
+}) {
+  const cellRef = useRef(null);
+  const keyboardNavigationContext = useContext(TableKeyboardNavigationContext);
+  keyboardNavigationContext?.registerCell({
+    cellRef,
+    cellRowIndex: -1,
+    cellColumnIndex: columnIndex
+  });
+  const isCurrentCellFocused = keyboardNavigationContext?.focusedCell === getCellId({
+    cellRowIndex: -1,
+    cellColumnIndex: columnIndex
+  });
+  const a11yProps = {
+    role: 'columnheader',
+    tabIndex: columnIndex === 0 && !keyboardNavigationContext?.focusedCell || isCurrentCellFocused ? 0 : -1,
+    onFocus: columnIndex === 0 && !keyboardNavigationContext?.focusedCell ? () => keyboardNavigationContext?.setFocusedCell(`-1-${columnIndex}`) : undefined
+  };
+  const columnDef = column;
+  if (columnDef?.label) {
+    return /*#__PURE__*/_jsx("th", {
+      ref: cellRef,
+      "test-id": columnDef.testId,
+      className: columnDef.className,
+      "aria-hidden": !columnDef.label,
+      ...a11yProps,
+      children: columnDef.label
+    });
+  }
+  if (typeof column === 'function') {
+    const thValue = column();
+    return /*#__PURE__*/_jsx("th", {
+      "aria-hidden": !thValue,
+      ref: cellRef,
+      ...a11yProps,
+      children: /*#__PURE__*/React.cloneElement(thValue, {
+        className: `${thValue.props.className || ''} th-header`.trim()
+      })
+    });
+  }
+  return /*#__PURE__*/_jsx("th", {
+    "aria-hidden": !column,
+    ref: cellRef,
+    ...a11yProps,
+    children: column
+  });
+}
+function BodyCell({
+  rowIndex,
+  columnIndex,
+  columnDef,
+  children
+}) {
+  const cellRef = useRef(null);
+  const keyboardNavigationContext = useContext(TableKeyboardNavigationContext);
+  keyboardNavigationContext?.registerCell({
+    cellRef,
+    cellRowIndex: rowIndex,
+    cellColumnIndex: columnIndex
+  });
+  const isCurrentCellFocused = keyboardNavigationContext?.focusedCell === getCellId({
+    cellRowIndex: rowIndex,
+    cellColumnIndex: columnIndex
+  });
+  return /*#__PURE__*/_jsx("td", {
+    ref: cellRef,
+    className: columnDef?.className,
+    "test-id": columnDef?.testId,
+    role: "gridcell",
+    tabIndex: isCurrentCellFocused ? 0 : -1,
+    children: children
+  }, `tbody-td-${rowIndex}-${columnIndex}`);
+}
+
+/** A simplified table version for cases where we do not need complex
+ *  interfaces Table component provides
+ *  @midnight-gray-supported
+ *  @alpine-light-supported
+ */
+export const SimpleTable = ({
+  columns,
+  data,
+  className,
+  testId,
+  sublevel,
+  tableAriaLabel
+}) => {
+  const tableRef = useRef(null);
+  const keyboardNavigationContext = useTableKeyboardNavigation({
+    tableRef,
+    columnsCount: columns.length,
+    rowsCount: data.length
+  });
+  return /*#__PURE__*/_jsx(TableKeyboardNavigationContext.Provider, {
+    value: keyboardNavigationContext,
+    children: /*#__PURE__*/_jsxs("table", {
+      className: classNames('simple-table', className, {
+        sublevel
+      }),
+      "test-id": testId,
+      ref: tableRef,
+      role: "grid",
+      onKeyDown: keyboardNavigationContext.onTableKeyDownHandler,
+      "aria-label": tableAriaLabel,
+      children: [/*#__PURE__*/_jsx("thead", {
+        children: /*#__PURE__*/_jsx("tr", {
+          children: columns.map((column, columnIndex) => /*#__PURE__*/_jsx(HeaderCell, {
+            column: column,
+            columnIndex: columnIndex
+          }, `thead-tr-${columnIndex}`))
+        })
+      }), /*#__PURE__*/_jsx("tbody", {
+        children: data.map((row, rowIndex) => /*#__PURE__*/_jsx("tr", {
+          role: "row",
+          children: row.map((item, columnIndex) => {
+            const isColumnObject = columns[columnIndex]?.label;
+            const columnDef = isColumnObject ? columns[columnIndex] : undefined;
+            return /*#__PURE__*/_jsx(BodyCell, {
+              rowIndex: rowIndex,
+              columnIndex: columnIndex,
+              columnDef: columnDef,
+              children: typeof item === 'function' ? item() : item
+            }, `tbody-td-${rowIndex}-${columnIndex}`);
+          })
+        }, `tbody-tr-${rowIndex}`))
+      })]
+    })
+  });
+};

package/esm/skeleton/index.d.ts

@@ -0,0 +1,3 @@
+import { Skeleton, SkeletonProps, SKELETON_TYPES } from './skeleton';
+export type { SkeletonProps };
+export { Skeleton, SKELETON_TYPES };

package/esm/skeleton/index.js

@@ -0,0 +1,2 @@
+import { Skeleton, SKELETON_TYPES } from './skeleton';
+export { Skeleton, SKELETON_TYPES };

package/esm/skeleton/skeleton.d.ts

@@ -0,0 +1,22 @@
+import './skeleton.less';
+export declare enum SKELETON_TYPES {
+    CIRCULAR = "circular",
+    RECTANGULAR = "rectangular",
+    ROUNDED = "rounded",
+    TEXT = "text"
+}
+export type SkeletonProps = {
+    className?: string;
+    type?: SKELETON_TYPES;
+    height?: string | number;
+    width?: string | number;
+    textType?: string;
+    testId?: string;
+};
+/**
+ * Skeleton Loading
+ * @midnight-gray-supported
+ * @uxr-only-supported
+ * @alpine-light-supported
+ */
+export declare const Skeleton: ({ className, type, height, width, textType, testId, }: SkeletonProps) => import("react/jsx-runtime").JSX.Element;

package/esm/skeleton/skeleton.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import classNames from 'classnames';
+import { jsx as _jsx } from "react/jsx-runtime";
+export let SKELETON_TYPES = /*#__PURE__*/function (SKELETON_TYPES) {
+  SKELETON_TYPES["CIRCULAR"] = "circular";
+  SKELETON_TYPES["RECTANGULAR"] = "rectangular";
+  SKELETON_TYPES["ROUNDED"] = "rounded";
+  SKELETON_TYPES["TEXT"] = "text";
+  return SKELETON_TYPES;
+}({});
+/**
+ * Skeleton Loading
+ * @midnight-gray-supported
+ * @uxr-only-supported
+ * @alpine-light-supported
+ */
+export const Skeleton = ({
+  className,
+  type,
+  height,
+  width,
+  textType,
+  testId
+}) => /*#__PURE__*/_jsx("span", {
+  // eslint-disable-next-line react/forbid-dom-props
+  style: {
+    width,
+    height
+  },
+  className: classNames('skeleton-loading', type, className, textType),
+  "test-id": testId
+});

package/esm/smooth-transition-loader/index.d.ts

@@ -0,0 +1,2 @@
+export { SmoothTransitionLoader, wrapperClassName, hiddenWrapperClassName, } from './smooth-transition-loader';
+export type { SmoothTransitionLoaderProps } from './smooth-transition-loader';

package/esm/smooth-transition-loader/index.js

@@ -0,0 +1 @@
+export { SmoothTransitionLoader, wrapperClassName, hiddenWrapperClassName } from './smooth-transition-loader';

package/esm/smooth-transition-loader/smooth-transition-loader.d.ts

@@ -0,0 +1,16 @@
+import { ReactNode } from 'react';
+import './smooth-transition-loader.less';
+export declare const wrapperClassName = "smooth-transition-content";
+export declare const hiddenWrapperClassName = "smooth-transition-content-hidden";
+export type SmoothTransitionLoaderProps = {
+    children: ReactNode;
+    isLoading: boolean;
+    loadingMessage?: string;
+    loaderTestId?: string;
+    wrapperTestId?: string;
+};
+/** The component designed to render loading state for charts
+ * @midnight-gray-supported
+ * @alpine-light-supported
+ */
+export declare function SmoothTransitionLoader({ children, isLoading, loadingMessage, loaderTestId, wrapperTestId, }: SmoothTransitionLoaderProps): import("react/jsx-runtime").JSX.Element;

package/esm/smooth-transition-loader/smooth-transition-loader.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import { Message, MESSAGE_TYPES } from '../message';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+export const wrapperClassName = 'smooth-transition-content';
+export const hiddenWrapperClassName = 'smooth-transition-content-hidden';
+/** The component designed to render loading state for charts
+ * @midnight-gray-supported
+ * @alpine-light-supported
+ */
+export function SmoothTransitionLoader({
+  children,
+  isLoading,
+  loadingMessage = 'Initializing Data',
+  loaderTestId = 'smooth-transition-prerender-loader',
+  wrapperTestId = 'smooth-transition-prerender-wrapper'
+}) {
+  const loader = /*#__PURE__*/_jsx("div", {
+    className: "smooth-transition-prerender-loader",
+    "test-id": loaderTestId,
+    children: /*#__PURE__*/_jsx(Message, {
+      type: MESSAGE_TYPES.IN_PROGRESS,
+      isCentered: true,
+      children: loadingMessage
+    })
+  });
+  if (!children) {
+    return loader;
+  }
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [isLoading && loader, /*#__PURE__*/_jsx("div", {
+      "test-id": wrapperTestId,
+      className: isLoading ? hiddenWrapperClassName : wrapperClassName,
+      children: children
+    })]
+  });
+}

package/esm/split-button/index.d.ts

@@ -0,0 +1,3 @@
+import SplitButton, { SplitButtonProps } from './split-button';
+export type { SplitButtonProps };
+export { SplitButton };

package/esm/split-button/index.js

@@ -0,0 +1,2 @@
+import SplitButton from './split-button';
+export { SplitButton };

package/esm/split-button/split-button.d.ts

@@ -0,0 +1,30 @@
+import { MouseEvent } from 'react';
+import { DropdownPlacementTypes, DropdownProps } from '../dropdown';
+import { DropdownMenuOption, DropdownMenuProps } from '../dropdown-menu';
+import { AccentType, ButtonProps } from '../button';
+import './split-button.less';
+export type SplitButtonProps = {
+    className?: string;
+    options: DropdownMenuOption[];
+    buttonTestId?: string;
+    buttonAccentType?: AccentType;
+    isDisabled?: boolean;
+    contentTestId?: string;
+    triggerButtonTestId?: string;
+    label: string;
+    buttonProps?: Partial<ButtonProps>;
+    triggerButtonProps?: Partial<ButtonProps>;
+    dropdownProps?: Partial<DropdownProps>;
+    dropdownMenuContentProps?: Partial<DropdownMenuProps>;
+    placement?: DropdownPlacementTypes;
+    onDropdownSelect: (option: DropdownMenuOption) => void;
+    isMultiLevel?: boolean;
+    onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
+    hideDropdown?: boolean;
+};
+/**
+  @midnight-gray-supported
+  @alpine-light-supported
+ */
+declare function SplitButton({ options, label, onDropdownSelect, className, buttonTestId, triggerButtonTestId, contentTestId, isDisabled, placement, buttonProps, triggerButtonProps, dropdownMenuContentProps, dropdownProps, buttonAccentType, isMultiLevel, onClick, hideDropdown, }: SplitButtonProps): import("react/jsx-runtime").JSX.Element;
+export default SplitButton;

package/esm/split-button/split-button.js

@@ -0,0 +1,74 @@
+import React, { useState } from 'react';
+import classNames from 'classnames';
+import { faChevronDown } from '@fortawesome/free-solid-svg-icons/faChevronDown';
+import { FontAwesomeIcon } from '../font-awesome-icon';
+import { useTranslation } from '../hooks/use-translation';
+import { DROPDOWN_PLACEMENT_TYPES } from '../dropdown';
+import { DropdownMenu } from '../dropdown-menu';
+import { Button, ACCENT_TYPES } from '../button';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+  @midnight-gray-supported
+  @alpine-light-supported
+ */
+function SplitButton({
+  options,
+  label,
+  onDropdownSelect,
+  className,
+  buttonTestId,
+  triggerButtonTestId,
+  contentTestId = 'contentTestId',
+  isDisabled = false,
+  placement = DROPDOWN_PLACEMENT_TYPES.BOTTOM_START,
+  buttonProps = {},
+  triggerButtonProps = {},
+  dropdownMenuContentProps = {},
+  dropdownProps = {},
+  buttonAccentType = ACCENT_TYPES.PRIMARY,
+  isMultiLevel = false,
+  onClick,
+  hideDropdown = false
+}) {
+  const [isOpen, setIsOpen] = useState(false);
+  const {
+    t
+  } = useTranslation();
+  return /*#__PURE__*/_jsxs("div", {
+    className: classNames('split-button-container', {
+      'is-secondary': buttonAccentType === ACCENT_TYPES.SECONDARY
+    }, className),
+    children: [/*#__PURE__*/_jsx(Button, {
+      testId: buttonTestId,
+      id: buttonTestId,
+      onClick: onClick,
+      isDisabled: isDisabled || buttonProps.isDisabled,
+      accentType: buttonAccentType,
+      ...buttonProps,
+      className: classNames(buttonProps.className, 'split-button-main'),
+      children: label
+    }), !hideDropdown && /*#__PURE__*/_jsx(DropdownMenu, {
+      isMultiLevel: isMultiLevel,
+      options: options,
+      placement: placement,
+      contentTestId: contentTestId,
+      dropdownProps: dropdownProps,
+      dropdownMenuContentProps: dropdownMenuContentProps,
+      footerOption: dropdownMenuContentProps.footerOption,
+      triggerHideChevron: true,
+      triggerTestId: triggerButtonTestId,
+      isDisabled: isDisabled || triggerButtonProps.isDisabled,
+      triggerAriaLabelText: t('Addition actions'),
+      triggerAccentType: buttonAccentType,
+      triggerClassName: classNames(triggerButtonProps.className, 'split-button-trigger', isOpen && 'expanded'),
+      onClose: () => setIsOpen(false),
+      onOpen: () => setIsOpen(true),
+      triggerDynamicContentWrapperClassName: "",
+      triggerDynamicContent: () => /*#__PURE__*/_jsx(FontAwesomeIcon, {
+        icon: faChevronDown
+      }),
+      onSelect: onDropdownSelect
+    })]
+  });
+}
+export default SplitButton;

package/esm/splitter/index.d.ts

@@ -0,0 +1,4 @@
+export { default as Pane } from './pane';
+export { default as Splitter } from './splitter';
+export type { PaneProps } from './pane';
+export type { SplitterProps } from './splitter';

package/esm/splitter/index.js

@@ -0,0 +1,2 @@
+export { default as Pane } from './pane';
+export { default as Splitter } from './splitter';

package/esm/splitter/pane.d.ts

@@ -0,0 +1,9 @@
+import { ReactElement } from 'react';
+export type PaneProps = {
+    horizontal?: boolean;
+    primary: boolean;
+    size: number | null;
+    children: ReactElement | Array<ReactElement>;
+};
+declare const Pane: ({ horizontal, primary, size, children, }: PaneProps) => import("react/jsx-runtime").JSX.Element;
+export default Pane;

package/esm/splitter/pane.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import classnames from 'classnames';
+import { jsx as _jsx } from "react/jsx-runtime";
+const Pane = ({
+  horizontal = false,
+  primary = false,
+  size = 0,
+  children = []
+}) => {
+  const paneSize = size;
+  const style = {};
+  if (!primary) {
+    if (horizontal) {
+      style.height = `${paneSize}px`;
+    } else {
+      style.width = `${paneSize}px`;
+    }
+  }
+  return /*#__PURE__*/_jsx("div", {
+    className: classnames('layout-pane', {
+      'layout-pane-primary': primary
+    })
+    /* eslint-disable-next-line react/forbid-dom-props */,
+    style: style,
+    children: children
+  });
+};
+export default Pane;

package/esm/splitter/splitter.d.ts

@@ -0,0 +1,51 @@
+import { Component, ReactElement } from 'react';
+import './splitter.less';
+export type SplitterProps = {
+    horizontal?: boolean;
+    isDisabled?: boolean;
+    children: Array<ReactElement>;
+    secondPaneSize: number;
+    className?: string;
+    usePercentSize?: boolean;
+    onManualResize?: (value: null | number) => void;
+};
+type SplitterState = {
+    secondPaneSize: number;
+    resizing: boolean;
+};
+type PaneDetailsType = {
+    [key: string]: number;
+};
+/**
+ *
+ * @midnight-gray-supported
+ * @alpine-light-supported
+ */
+declare class Splitter extends Component<SplitterProps, SplitterState> {
+    static defaultProps: {
+        horizontal: boolean;
+        isDisabled: boolean;
+        children: never[];
+        usePercentSize: boolean;
+        onManualResize: () => void;
+    };
+    private containerRef?;
+    private splitterRef?;
+    constructor(props: SplitterProps);
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    componentDidUpdate(prevProps: SplitterProps): void;
+    setSecondPaneSize(): void | null;
+    clearSelection(): void;
+    getsecondPaneSize(containerRect: DOMRect, splitterRect: DOMRect | {
+        width: number;
+        height: number;
+    }, clientPosition: PaneDetailsType, offsetMouse: boolean): number;
+    onMouseMove(e: MouseEvent): void;
+    onMouseDown(): void;
+    onMouseUp(): void;
+    getPanes(): import("react/jsx-runtime").JSX.Element[];
+    getPaneSizeInPercentage(): number | null;
+    render(): import("react/jsx-runtime").JSX.Element;
+}
+export default Splitter;

package/esm/splitter/splitter.js

@@ -0,0 +1,206 @@
+import React, { Component } from 'react';
+import classnames from 'classnames';
+import Pane from './pane';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+const DEFAULT_SPLITTER_SIZE = 4;
+
+/**
+ *
+ * @midnight-gray-supported
+ * @alpine-light-supported
+ */
+class Splitter extends Component {
+  static defaultProps = {
+    horizontal: false,
+    isDisabled: false,
+    children: [],
+    usePercentSize: false,
+    onManualResize: () => {}
+  };
+  constructor(props) {
+    super(props);
+    this.state = {
+      secondPaneSize: 0,
+      resizing: false
+    };
+    this.onMouseMove = this.onMouseMove.bind(this);
+    this.onMouseUp = this.onMouseUp.bind(this);
+    this.onMouseDown = this.onMouseDown.bind(this);
+    this.getPanes = this.getPanes.bind(this);
+  }
+  componentDidMount() {
+    if (this.props.children.length > 2) {
+      throw new Error('Splitter component cannot contain more than 2 children');
+    }
+    document.addEventListener('mouseup', this.onMouseUp);
+    document.addEventListener('mousemove', this.onMouseMove);
+    this.setSecondPaneSize();
+  }
+  componentWillUnmount() {
+    document.removeEventListener('mouseup', this.onMouseUp);
+    document.removeEventListener('mousemove', this.onMouseMove);
+  }
+  componentDidUpdate(prevProps) {
+    if (prevProps.secondPaneSize !== this.props.secondPaneSize) {
+      this.setSecondPaneSize();
+    }
+  }
+  setSecondPaneSize() {
+    if (this.props.secondPaneSize) {
+      if (this.props.usePercentSize) {
+        const parentEl = this.containerRef;
+        const parentElSize = this.props.horizontal ? parentEl?.offsetHeight : parentEl?.offsetWidth;
+        // Convert the percent value to a decimal to calculate pixel value.
+        const secondPanelPercent = this.props.secondPaneSize / 100;
+        return parentElSize ? this.setState({
+          secondPaneSize: parentElSize * secondPanelPercent
+        }) : null;
+      }
+      return this.setState({
+        secondPaneSize: this.props.secondPaneSize
+      });
+    }
+    const containerRect = this.containerRef?.getBoundingClientRect();
+    const splitterRect = this.splitterRef ? this.splitterRef.getBoundingClientRect() : {
+      width: DEFAULT_SPLITTER_SIZE,
+      height: DEFAULT_SPLITTER_SIZE
+    };
+    let secondPaneSize;
+    if (containerRect && splitterRect) {
+      secondPaneSize = this.getsecondPaneSize(containerRect, splitterRect, {
+        left: containerRect.left + (containerRect.width - splitterRect.width) / 2,
+        top: containerRect.top + (containerRect.height - splitterRect.height) / 2
+      }, false);
+      this.setState({
+        secondPaneSize
+      });
+    }
+  }
+
+  // To avoid the selection of text while moving splitter
+  clearSelection() {
+    const doc = document;
+    if (doc.body.createTextRange) {
+      const range = doc.body.createTextRange();
+      range.collapse();
+      range.select();
+    } else if (window.getSelection) {
+      if (window.getSelection()?.empty) {
+        window.getSelection()?.empty();
+      } else if (window.getSelection()?.removeAllRanges) {
+        window.getSelection()?.removeAllRanges();
+      }
+    } else if (doc.selection) {
+      doc.selection.empty();
+    }
+  }
+  getsecondPaneSize(containerRect, splitterRect, clientPosition, offsetMouse) {
+    const totalSize = this.props.horizontal ? containerRect.height : containerRect.width;
+    const splitterSize = this.props.horizontal ? splitterRect.height : splitterRect.width;
+    let offset = this.props.horizontal ? clientPosition.top - containerRect.top : clientPosition.left - containerRect.left;
+    if (offsetMouse) {
+      offset -= splitterSize / 2;
+    }
+    if (offset < 0) {
+      offset = 0;
+    } else if (offset > totalSize - splitterSize) {
+      offset = totalSize - splitterSize;
+    }
+    const secondPaneSize = totalSize - splitterSize - offset;
+    return secondPaneSize;
+  }
+  onMouseMove(e) {
+    if (this.state.resizing) {
+      const {
+        onManualResize,
+        usePercentSize
+      } = this.props;
+      const containerRect = this.containerRef?.getBoundingClientRect();
+      const splitterRect = this.splitterRef?.getBoundingClientRect();
+      let secondPaneSize;
+      if (containerRect && splitterRect) {
+        secondPaneSize = this.getsecondPaneSize(containerRect, splitterRect, {
+          left: e.clientX,
+          top: e.clientY
+        }, true);
+        this.clearSelection();
+        if (onManualResize) {
+          if (usePercentSize) {
+            onManualResize(this.getPaneSizeInPercentage());
+          } else {
+            onManualResize(secondPaneSize);
+          }
+        }
+        this.setState({
+          secondPaneSize
+        });
+      }
+    }
+  }
+  onMouseDown() {
+    if (!this.props.isDisabled) {
+      this.clearSelection();
+      this.setState({
+        resizing: true
+      });
+    }
+  }
+  onMouseUp() {
+    // in order to not to set state while not dragging
+    // we need to check prevState
+    this.setState(prevState => prevState.resizing ? {
+      resizing: false
+    } : null);
+  }
+
+  // Wrap children in containers and setting default sizes
+  getPanes() {
+    const children = this.props.children;
+    if (children.length === 0) {
+      children.push(/*#__PURE__*/_jsx("div", {}));
+    }
+    return children.map((child, i) => {
+      const primary = i === 0;
+      const size = primary ? null : this.state.secondPaneSize;
+      return /*#__PURE__*/_jsx(Pane, {
+        horizontal: this.props.horizontal,
+        primary: primary,
+        size: size,
+        children: child
+      }, i);
+    });
+  }
+  getPaneSizeInPercentage() {
+    const parentEl = this.containerRef;
+    const parentElSize = this.props.horizontal ? parentEl?.offsetHeight : parentEl?.offsetWidth;
+    return parentElSize ? Math.round(this.state.secondPaneSize / parentElSize * 100) : null;
+  }
+  render() {
+    const panes = this.getPanes();
+    return /*#__PURE__*/_jsxs("div", {
+      "test-id": "splitter-layout",
+      className: classnames('splitter-layout', this.props.className, {
+        'splitter-layout-horizontal': this.props.horizontal
+      }),
+      ref: r => {
+        this.containerRef = r;
+      },
+      children: [panes[0], panes.length > 1 && /*#__PURE__*/_jsxs(_Fragment, {
+        children: [/*#__PURE__*/_jsx("div", {
+          "test-id": "splitter-handler",
+          role: "separator",
+          className: classnames('layout-splitter', {
+            'splitter-handler-horizontal': this.props.horizontal,
+            'splitter-handler-vertical': !this.props.horizontal,
+            'splitter-disabled': this.props.isDisabled
+          }),
+          ref: r => {
+            this.splitterRef = r;
+          },
+          onMouseDown: this.onMouseDown
+        }), panes[1]]
+      })]
+    });
+  }
+}
+export default Splitter;