box-ui-elements 23.4.0-beta.6 → 23.4.0-beta.7

package/src/components/context-menu/ContextMenuWithSubmenuExample.tsx

@@ -0,0 +1,61 @@
+import * as React from 'react';
+
+import { Menu, SubmenuItem, MenuItem } from '../menu';
+import ContextMenu from './ContextMenu';
+
+class ContextMenuWithSubmenuExample extends React.Component {
+    state = {
+        rightBoundaryElement: undefined,
+        bottomBoundaryElement: undefined,
+    };
+
+    render() {
+        return (
+            <ContextMenu>
+                <div
+                    ref={ref => {
+                        if (!this.state.rightBoundaryElement) {
+                            this.setState({
+                                rightBoundaryElement: ref,
+                            });
+                        }
+                    }}
+                    className="context-menu-example-target"
+                    style={{
+                        height: 200,
+                    }}
+                >
+                    Target Component - right click me
+                </div>
+                <Menu
+                    setRef={(ref: React.RefObject<HTMLDivElement>) => {
+                        if (!this.state.bottomBoundaryElement) {
+                            this.setState({
+                                bottomBoundaryElement: ref,
+                            });
+                        }
+                    }}
+                >
+                    <MenuItem>View Profile</MenuItem>
+                    <MenuItem>View Profile</MenuItem>
+                    {this.state.rightBoundaryElement && (
+                        <SubmenuItem
+                            bottomBoundaryElement={this.state.bottomBoundaryElement}
+                            rightBoundaryElement={this.state.rightBoundaryElement}
+                        >
+                            Submenu
+                            <Menu>
+                                <MenuItem>View Profile</MenuItem>
+                                <MenuItem>View Profile</MenuItem>
+                                <MenuItem>View Profile</MenuItem>
+                            </Menu>
+                        </SubmenuItem>
+                    )}
+                    <MenuItem>Help</MenuItem>
+                </Menu>
+            </ContextMenu>
+        );
+    }
+}
+
+export default ContextMenuWithSubmenuExample;

package/src/components/progress-bar/README.md

@@ -6,14 +6,4 @@ Renders a progress bar similar to the ones used on Youtube.
 <ProgressBar
     progress={ 75 }
 />
-```
-**Demo**
-```
-// @NOTE: As recommended by styleguidist, if you need a more complex demo
-// it’s often a good idea to define it in a separate JavaScript file and require
-// it in Markdown
-
-const ProgressBarExamples = require('examples').ProgressBarExamples;
-
-<ProgressBarExamples />
-```
+```

package/src/components/selector-dropdown/SelectorDropdown.stories.js

@@ -1,11 +1,11 @@
 // @flow
 import * as React from 'react';
 
-import SelectorDropdownExamples from '../../../examples/src/SelectorDropdownExamples';
+import SelectorDropdownExample from './SelectorDropdownExample';
 import SelectorDropdown from './SelectorDropdown';
 import notes from './SelectorDropdown.stories.md';
 
-export const basic = () => <SelectorDropdownExamples />;
+export const basic = () => <SelectorDropdownExample />;
 
 export default {
     title: 'Components/SelectorDropdown',

package/src/components/selector-dropdown/SelectorDropdownExample.tsx

@@ -0,0 +1,140 @@
+import React, { Children, Component } from 'react';
+
+import DatalistItem from '../datalist-item';
+import SelectorDropdown from './SelectorDropdown';
+import TextInput, { TextInputProps } from '../text-input';
+
+interface InputContainerProps extends Omit<TextInputProps, 'onInput'> {
+    inputProps?: Partial<TextInputProps>;
+    onInput: (event: React.ChangeEvent<HTMLInputElement>) => void;
+}
+
+const InputContainer: React.FC<InputContainerProps> = ({ inputProps = {}, ...rest }) => (
+    <TextInput {...inputProps} {...rest} />
+);
+
+interface SelectorDropdownContainerProps {
+    initialItems: string[];
+    placeholder: string;
+    title: string;
+}
+
+interface SelectorDropdownContainerState {
+    filterText: string;
+    items: string[];
+    showTitle: boolean;
+    remainOpen: boolean;
+}
+
+class SelectorDropdownContainer extends Component<SelectorDropdownContainerProps, SelectorDropdownContainerState> {
+    constructor(props: SelectorDropdownContainerProps) {
+        super(props);
+        this.state = {
+            filterText: '',
+            items: props.initialItems,
+            showTitle: false,
+            remainOpen: false,
+        };
+    }
+
+    handleShowTitle = () => {
+        this.setState({ showTitle: !this.state.showTitle });
+    };
+
+    handleRemainOpen = () => {
+        this.setState({ remainOpen: !this.state.remainOpen });
+    };
+
+    handleUserInput = (event: React.ChangeEvent<HTMLInputElement>) => {
+        this.filterByItem(event.target.value);
+    };
+
+    handleItemSelection = (i: number) => {
+        this.setState({ filterText: this.state.items[i] });
+    };
+
+    filterByItem(item: string) {
+        this.setState({ filterText: item });
+        this.filterItems(item);
+    }
+
+    filterItems(filterText: string) {
+        const { initialItems } = this.props;
+        const filterTextLowerCase = filterText.toLowerCase();
+        const items = initialItems.filter(item => item.toLowerCase().includes(filterTextLowerCase));
+        this.setState({ items });
+    }
+
+    render() {
+        const { placeholder, title } = this.props;
+        const { filterText, items, showTitle, remainOpen } = this.state;
+        const dropdownTitle = <div>This is a Title</div>;
+
+        return (
+            <div style={{ paddingBottom: '330px' }}>
+                <label htmlFor="title-check">
+                    <input
+                        type="checkbox"
+                        name="title-check"
+                        id="title-check"
+                        checked={showTitle}
+                        onChange={this.handleShowTitle}
+                    />
+                    <span style={{ paddingLeft: '4px' }}>Add title to overlay</span>
+                </label>
+                <br />
+                <label htmlFor="remain-open-check">
+                    <input
+                        type="checkbox"
+                        name="remain-open-check"
+                        id="remain-open-check"
+                        checked={remainOpen}
+                        onChange={this.handleRemainOpen}
+                    />
+                    <span style={{ paddingLeft: '4px' }}>Overlay should remain open</span>
+                </label>
+                <hr />
+                <SelectorDropdown
+                    isAlwaysOpen={remainOpen}
+                    onSelect={this.handleItemSelection}
+                    selector={
+                        <InputContainer
+                            label={title}
+                            name="selectorDropdownInput"
+                            onInput={this.handleUserInput}
+                            placeholder={placeholder}
+                            type="text"
+                            value={filterText}
+                        />
+                    }
+                    title={showTitle ? dropdownTitle : undefined}
+                >
+                    {Children.map(items, item => (
+                        <DatalistItem key={item}>{item}</DatalistItem>
+                    ))}
+                </SelectorDropdown>
+            </div>
+        );
+    }
+}
+
+const SelectorDropdownExample: React.FC = () => (
+    <SelectorDropdownContainer
+        initialItems={[
+            'Illmatic',
+            'The Marshall Mathers LP',
+            'All Eyez on Me',
+            'Ready To Die',
+            'Enter the Wu-Tang',
+            'The Eminem Show',
+            'The Chronic',
+            'Straight Outta Compton',
+            'Reasonable Doubt',
+            'Super long name that should be truncated, we should see the dots at the very end, adding some more text here, should truncate at any second now, please truncate soon',
+        ]}
+        placeholder="Select an album"
+        title="Album"
+    />
+);
+
+export default SelectorDropdownExample;

package/src/elements/content-sidebar/BoxAISidebarContent.tsx

@@ -6,7 +6,7 @@ import * as React from 'react';
 import flow from 'lodash/flow';
 import { useIntl } from 'react-intl';
 import classNames from 'classnames';
-import { BoxAiAgentSelectorWithApi, useAgents } from '@box/box-ai-agent-selector';
+import { BoxAiAgentSelectorWithApi, useAgents, type AgentType } from '@box/box-ai-agent-selector';
 import { IconButton, Tooltip } from '@box/blueprint-web';
 import { ArrowsExpand } from '@box/blueprint-web-assets/icons/Fill';
 import {
@@ -34,11 +34,17 @@ const MARK_NAME_JS_READY: string = `${ORIGIN_BOXAI_SIDEBAR}_${EVENT_JS_READY}`;
 
 mark(MARK_NAME_JS_READY);
 
-function BoxAISidebarContent(props: ApiWrapperWithInjectedProps & { shouldShowLandingPage: boolean }) {
+function BoxAISidebarContent(
+    props: ApiWrapperWithInjectedProps & {
+        onSelectedAgentCallback: (selectedAgent: AgentType) => void;
+        shouldShowLandingPage: boolean;
+    },
+) {
     const {
         createSession,
         encodedSession,
         onClearAction,
+        onSelectedAgentCallback,
         getAIStudioAgents,
         hasRequestInProgress,
         hostAppName,
@@ -155,6 +161,11 @@ function BoxAISidebarContent(props: ApiWrapperWithInjectedProps & { shouldShowLa
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [encodedSession]);
 
+    React.useEffect(() => {
+        onSelectedAgentCallback?.(selectedAgent);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [selectedAgent?.id]);
+
     const renderBoxAISidebarTitle = () => {
         return (
             <div className="bcs-BoxAISidebar-title-part">

package/src/elements/content-sidebar/__tests__/BoxAISidebar.test.tsx

@@ -4,11 +4,15 @@ import { render, screen } from '../../../test-utils/testing-library';
 import BoxAISidebar, { BoxAISidebarProps } from '../BoxAISidebar';
 
 let MockBoxAiAgentSelectorWithApi: jest.Mock;
+let mockUseAgents: jest.Mock;
+
 jest.mock('@box/box-ai-agent-selector', () => {
     MockBoxAiAgentSelectorWithApi = jest.fn();
+    mockUseAgents = jest.fn();
     return {
         ...jest.requireActual('@box/box-ai-agent-selector'),
         BoxAiAgentSelectorWithApi: MockBoxAiAgentSelectorWithApi,
+        useAgents: mockUseAgents,
     };
 });
 
@@ -39,6 +43,7 @@ jest.mock('@box/box-ai-content-answers', () => ({
             onClearAction={mockOnClearAction}
             onCloseModal={jest.fn()}
             onSelectAgent={jest.fn()}
+            onSelectedAgentCallback={props.onSelectedAgentCallback}
             onSuggestedQuestionsFetched={props.onSuggestedQuestionsFetched}
             onAgentEditorToggle={jest.fn()}
             questions={props.restoredQuestions}
@@ -145,6 +150,12 @@ describe('elements/content-sidebar/BoxAISidebar', () => {
 
     beforeEach(() => {
         MockBoxAiAgentSelectorWithApi.mockImplementation(() => <div data-testid="sidebar-agent-selector" />);
+        mockUseAgents.mockReturnValue({
+            agents: [],
+            selectedAgent: { id: '1', config: {}, name: 'Test Agent' },
+            setSelectedAgent: jest.fn(),
+            requestState: 'success',
+        });
     });
 
     afterEach(() => {
@@ -465,4 +476,14 @@ describe('elements/content-sidebar/BoxAISidebar', () => {
 
         expect(mockProps.onUserInteraction).toHaveBeenCalled();
     });
+
+    test('Should call onSelectedAgentCallback on agent selected change', async () => {
+        const mockOnSelectedAgentCallback = jest.fn();
+
+        await renderComponent({
+            onSelectedAgentCallback: mockOnSelectedAgentCallback,
+        });
+
+        expect(mockOnSelectedAgentCallback).toHaveBeenCalled();
+    });
 });

package/types.ts

@@ -1,2 +1 @@
 export * from './src/types';
-export * from './examples/types';