@awsui/components-react/split-panel/side.js

On July 19th, 2022, we launched [Cloudscape Design System](https://cloudscape.design). Cloudscape is an evolution of AWS-UI. It consists of user interface guidelines, front-end components, design resources, and development tools for building intuitive, en

// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
// SPDX-License-Identifier: Apache-2.0
import React from 'react';
import clsx from 'clsx';
import { useAppLayoutToolbarDesignEnabled } from '../app-layout/utils/feature-flags';
import InternalButton from '../button/internal';
import { useSplitPanelContext } from '../internal/context/split-panel-context';
import { useVisualRefresh } from '../internal/hooks/use-visual-mode';
import sharedStyles from '../app-layout/resize/styles.css.js';
import styles from './styles.css.js';
import testUtilStyles from './test-classes/styles.css.js';
export function SplitPanelContentSide({ style, baseProps, splitPanelRef, toggleRef, header, children, resizeHandle, isOpen, cappedSize, openButtonAriaLabel, panelHeaderId, onToggle, }) {
    const { topOffset, bottomOffset, animationDisabled } = useSplitPanelContext();
    const isRefresh = useVisualRefresh();
    const isToolbar = useAppLayoutToolbarDesignEnabled();
    return (React.createElement("div", Object.assign({}, baseProps, { className: clsx(baseProps.className, styles.drawer, styles['position-side'], testUtilStyles.root, {
            [sharedStyles['with-motion-horizontal']]: !animationDisabled,
            [testUtilStyles['open-position-side']]: isOpen,
            [styles['drawer-closed']]: !isOpen,
            [styles['with-toolbar']]: isToolbar,
            [styles.refresh]: isRefresh,
        }), style: Object.assign({ width: isOpen ? cappedSize : isRefresh ? '0px' : undefined, maxWidth: isRefresh ? '100%' : undefined }, style), ref: splitPanelRef }),
        React.createElement("div", { className: styles['drawer-content-side'], style: {
                top: topOffset,
                bottom: bottomOffset,
            }, onClick: () => !isOpen && onToggle(), "aria-labelledby": panelHeaderId, role: "region" },
            isOpen ? (React.createElement("div", { className: clsx(styles['slider-wrapper-side'], isToolbar && styles['with-toolbar']) }, resizeHandle)) : (React.createElement(InternalButton, { className: clsx(testUtilStyles['open-button'], styles['open-button-side']), iconName: "angle-left", variant: "icon", formAction: "none", ariaLabel: openButtonAriaLabel, ariaExpanded: isOpen, 
                //toggleRef should only be assigned when there is no other trigger-buttons
                ref: isRefresh || isToolbar ? null : toggleRef })),
            React.createElement("div", { className: clsx(styles['content-side'], isToolbar && styles['with-toolbar']), "aria-hidden": !isOpen, style: { width: isToolbar ? cappedSize : '0px' } },
                React.createElement("div", { className: styles['pane-header-wrapper-side'] }, header),
                React.createElement("div", { className: styles['pane-content-wrapper-side'] }, children)))));
}
//# sourceMappingURL=side.js.map