@indico-data/design-system 2.27.0 → 2.28.0

package/lib/src/components/floatUI/FloatUI.d.ts

@@ -0,0 +1,2 @@
+import { FloatUIProps } from './types';
+export declare function FloatUI({ children, ariaLabel, isOpen: controlledIsOpen, setIsOpen: controlledSetIsOpen, floatingOptions, }: FloatUIProps): import("react/jsx-runtime").JSX.Element;

package/lib/src/components/floatUI/FloatUI.stories.d.ts

@@ -0,0 +1,8 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { FloatUI } from './FloatUI';
+import { FloatUIProps } from './types';
+declare const meta: Meta<typeof FloatUI>;
+export default meta;
+type Story = StoryObj<FloatUIProps>;
+export declare const Uncontrolled: Story;
+export declare const Controlled: Story;

package/lib/src/components/floatUI/index.d.ts

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

package/lib/src/components/floatUI/types.d.ts

@@ -0,0 +1,9 @@
+import { ReactElement } from 'react';
+import { UseFloatingOptions } from '@floating-ui/react-dom';
+export type FloatUIProps = {
+    children: [ReactElement, ReactElement];
+    ariaLabel: string;
+    floatingOptions?: UseFloatingOptions;
+    isOpen?: boolean;
+    setIsOpen?: React.Dispatch<React.SetStateAction<boolean>>;
+};

package/lib/src/components/index.d.ts

@@ -12,5 +12,5 @@ export { Select } from './forms/select';
 export { Form } from './forms/form';
 export { Skeleton } from './skeleton';
 export { Card } from './card';
-export { Popper } from './popper';
+export { FloatUI } from './floatUI';
 export { Menu } from './menu';

package/lib/src/index.d.ts

@@ -1,4 +1,5 @@
 import './styles/index.scss';
+export * from '@floating-ui/react-dom';
 export { GlobalStyles } from './legacy/styles/globals/index';
 export { ANIMATION, BREAKPOINT, COLORS, MATH, MEDIA_QUERIES, MARGINS, PADDINGS, SPACING, TYPOGRAPHY, } from './legacy/tokens';
 export { AbstractRadio, AbstractRadioGroup, Accordion, BarSpinner, BorderSelect, Button as LegacyButton, CirclePulse, CircleSpinner, ConfirmModal, DatePicker, EditableInput, IconButton, ListTable, LoadingAwareContainer, LoadingList, ModalBase, MultiCombobox, NoInputDatePicker, NumberInput, Pagination, PercentageRing, Radio, RadioGroup, RandomLoadingMessage, SearchInput, Section, SectionBlock, SectionBody, SectionHeader, SectionTable, Select, Shrug, SingleCombobox, TextInput, TextTruncate, Toggle, Tooltip, } from './legacy/components';
@@ -17,6 +18,6 @@ export { Select as SelectInput } from './components/forms/select';
 export { Form } from './components/forms/form';
 export { Skeleton } from './components/skeleton';
 export { Card } from './components/card';
-export { Popper } from './components/popper';
+export { FloatUI } from './components/floatUI';
 export { Menu } from './components/menu';
 export { Pill } from './components/pill';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@indico-data/design-system",
-  "version": "2.27.0",
+  "version": "2.28.0",
   "description": "",
   "author": "",
   "main": "lib/index.js",

package/src/components/floatUI/FloatUI.mdx

@@ -0,0 +1,84 @@
+import { Canvas, Meta, Controls } from '@storybook/blocks';
+import * as FloatUIStories from './FloatUI.stories';
+
+<Meta title="Components/FloatUI" of={FloatUIStories} />
+
+# FloatUI
+
+The FloatUI component is used to display content relative to another element. It can be used for tooltips, dropdowns, and other floating elements. FloatUI is positioned using the [floating-ui](https://floating-ui.com/) library.
+
+<Canvas of={FloatUIStories.Uncontrolled} />
+
+### The following props are available for the FloatUI component:
+
+<Controls of={FloatUIStories.Uncontrolled} />
+
+## Controlling the FloatUI
+
+FloatUI can be used in two modes:
+
+- **Uncontrolled Mode:** FloatUI manages its own state, toggling visibility when the trigger is clicked.
+- **Controlled Mode:** The parent component controls visibility by passing `isOpen` and `setIsOpen` props
+
+### Example: Controlled `FloatUI`
+
+```tsx
+import React, { useState } from 'react';
+import { FloatUI } from '@/components/FloatUI';
+import { Button } from '@/components/Button';
+import { Menu } from '@/components/Menu';
+import { Icon } from '@/components/Icon';
+
+const ControlledExample = () => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [selectedAction, setSelectedAction] = useState<string | null>(null);
+
+  const handleToggle = () => setIsOpen(!isOpen);
+
+  const handleActionClick = (action: string) => {
+    setSelectedAction(action);
+    setIsOpen(false);
+  };
+
+  return (
+    <div>
+      <FloatUI ariaLabel="Controlled Example FloatUI" isOpen={isOpen} setIsOpen={setIsOpen}>
+        <Button iconName="kabob" ariaLabel="Toggle FloatUI" onClick={handleToggle}>
+          Actions
+        </Button>
+        <Menu>
+          <Button
+            ariaLabel="Refresh Data"
+            iconName="retrain"
+            onClick={() => handleActionClick('Refresh Data')}
+          >
+            Refresh Data
+          </Button>
+          <Button
+            ariaLabel="Configure Fields"
+            iconName="edit"
+            onClick={() => handleActionClick('Configure Fields')}
+          >
+            Configure Fields
+          </Button>
+          <Button
+            ariaLabel="Delete Library"
+            iconName="trash"
+            onClick={() => handleActionClick('Delete Library')}
+          >
+            Delete Library
+          </Button>
+        </Menu>
+      </FloatUI>
+
+      {selectedAction && (
+        <div style={{ marginTop: '16px' }}>
+          <Icon name="info" /> You selected: <strong>{selectedAction}</strong>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default ControlledExample;
+```

package/src/components/floatUI/FloatUI.stories.tsx

@@ -0,0 +1,157 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { useState } from 'react';
+import { FloatUI } from './FloatUI';
+import { Button } from '../button';
+import { Menu } from '../menu';
+import { FloatUIProps } from './types';
+
+const meta: Meta<typeof FloatUI> = {
+  title: 'Components/FloatUI',
+  component: FloatUI,
+  argTypes: {
+    children: {
+      control: 'object',
+      description:
+        'An array of exactly two elements: the first element is the trigger that opens the FloatUI, and the second element is the content displayed within the FloatUI.',
+      table: {
+        category: 'Props',
+        type: {
+          summary: '[trigger: ReactElement, content: ReactElement]',
+        },
+      },
+    },
+    ariaLabel: {
+      control: 'text',
+      description: 'Sets the aria-label attribute for the FloatUI.',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'string',
+        },
+      },
+    },
+    floatingOptions: {
+      control: 'object',
+      description:
+        'Options for configuring the floating UI behavior. For more, see the [floating-ui docs](https://floating-ui.com/docs/useFloating#options).',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'UseFloatingOptions',
+        },
+      },
+    },
+    isOpen: {
+      control: false,
+      description: 'Controls the visibility of the FloatUI (for controlled mode).',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'boolean',
+        },
+      },
+    },
+    setIsOpen: {
+      control: false,
+      description: 'Function to toggle the visibility of the FloatUI (for controlled mode).',
+      table: {
+        category: 'Props',
+        type: {
+          summary: '(isOpen: boolean) => void',
+        },
+      },
+    },
+  },
+  decorators: [
+    (Story: React.ComponentType) => (
+      <div
+        style={{
+          height: '160px',
+        }}
+      >
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+
+type Story = StoryObj<FloatUIProps>;
+
+export const Uncontrolled: Story = {
+  render: (args) => (
+    <FloatUI {...args} ariaLabel="Example FloatUI">
+      <Button iconName="kabob" ariaLabel="Toggle FloatUI" />
+      <Menu>
+        <Button
+          data-testid="refresh-library"
+          ariaLabel="Refresh Data"
+          iconName="retrain"
+          onClick={() => console.log('Refresh Data')}
+        >
+          Refresh Data
+        </Button>
+        <Button
+          data-testid="configure-fields"
+          ariaLabel="Configure Fields"
+          iconName="edit"
+          onClick={() => console.log('Configure Fields')}
+        >
+          Configure Fields
+        </Button>
+        <Button
+          data-testid="delete-library"
+          ariaLabel="Delete Library"
+          iconName="trash"
+          onClick={() => console.log('Delete Library')}
+        >
+          Delete Library
+        </Button>
+      </Menu>
+    </FloatUI>
+  ),
+};
+
+export const Controlled: Story = {
+  render: (args) => {
+    const [isOpen, setIsOpen] = useState(false);
+
+    return (
+      <FloatUI
+        {...args}
+        ariaLabel="Controlled Example FloatUI"
+        isOpen={isOpen}
+        setIsOpen={setIsOpen}
+      >
+        <Button iconName="kabob" ariaLabel="Toggle FloatUI" />
+        <Menu>
+          <Button
+            data-testid="refresh-library"
+            ariaLabel="Refresh Data"
+            iconName="retrain"
+            onClick={() => console.log('Refresh Data')}
+          >
+            Refresh Data
+          </Button>
+          <Button
+            data-testid="configure-fields"
+            ariaLabel="Configure Fields"
+            iconName="edit"
+            onClick={() => console.log('Configure Fields')}
+          >
+            Configure Fields
+          </Button>
+          <Button
+            data-testid="delete-library"
+            ariaLabel="Delete Library"
+            iconName="trash"
+            onClick={() => console.log('Delete Library')}
+          >
+            Delete Library
+          </Button>
+        </Menu>
+      </FloatUI>
+    );
+  },
+};

package/src/components/floatUI/FloatUI.test.tsx

@@ -0,0 +1,129 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import { FloatUI } from './FloatUI';
+import { Menu } from '../menu';
+import { Button } from '../button';
+
+describe('FloatUI Component', () => {
+  it('does not display FloatUI content initially when rendered in uncontrolled mode', () => {
+    render(
+      <FloatUI ariaLabel="Example FloatUI">
+        <Button ariaLabel="Toggle FloatUI">Toggle</Button>
+        <div>FloatUI Content</div>
+      </FloatUI>,
+    );
+    expect(screen.queryByText('FloatUI Content')).not.toBeInTheDocument();
+  });
+
+  it('displays the FloatUI content when the trigger is clicked in uncontrolled mode', () => {
+    render(
+      <FloatUI ariaLabel="Example FloatUI">
+        <Button ariaLabel="Toggle FloatUI">Toggle</Button>
+        <div>FloatUI Content</div>
+      </FloatUI>,
+    );
+
+    // Open the FloatUI
+    fireEvent.click(screen.getByText('Toggle'));
+    expect(screen.getByText('FloatUI Content')).toBeInTheDocument();
+  });
+
+  it('closes the FloatUI when clicked outside in uncontrolled mode', () => {
+    render(
+      <div>
+        <div data-testid="outside">Outside Element</div>
+        <FloatUI ariaLabel="Example FloatUI">
+          <Button ariaLabel="Toggle FloatUI">Toggle</Button>
+          <div>FloatUI Content</div>
+        </FloatUI>
+      </div>,
+    );
+
+    // Open the FloatUI
+    fireEvent.click(screen.getByText('Toggle'));
+
+    fireEvent.mouseDown(screen.getByTestId('outside'));
+    expect(screen.queryByText('FloatUI Content')).not.toBeInTheDocument();
+  });
+
+  it('renders the correct children inside the FloatUI when open in uncontrolled mode', () => {
+    render(
+      <FloatUI ariaLabel="Example FloatUI">
+        <Button ariaLabel="Toggle FloatUI">Toggle</Button>
+        <Menu>
+          <Button ariaLabel="Refresh Data" iconName="retrain">
+            Refresh Data
+          </Button>
+          <Button ariaLabel="Configure Fields" iconName="edit">
+            Configure Fields
+          </Button>
+          <Button ariaLabel="Delete Library" iconName="trash">
+            Delete Library
+          </Button>
+        </Menu>
+      </FloatUI>,
+    );
+
+    fireEvent.click(screen.getByText('Toggle'));
+
+    expect(screen.getByText('Refresh Data')).toBeInTheDocument();
+    expect(screen.getByText('Configure Fields')).toBeInTheDocument();
+    expect(screen.getByText('Delete Library')).toBeInTheDocument();
+  });
+
+  it('toggles the FloatUI open and closed when the trigger is clicked in uncontrolled mode', () => {
+    render(
+      <FloatUI ariaLabel="Example FloatUI">
+        <Button ariaLabel="Toggle FloatUI">Toggle</Button>
+        <div>FloatUI Content</div>
+      </FloatUI>,
+    );
+
+    fireEvent.click(screen.getByText('Toggle'));
+    expect(screen.getByText('FloatUI Content')).toBeInTheDocument();
+
+    fireEvent.click(screen.getByText('Toggle'));
+    expect(screen.queryByText('FloatUI Content')).not.toBeInTheDocument();
+  });
+
+  it('does not display FloatUI content initially when rendered in controlled mode', () => {
+    const controlledIsOpen = false;
+    const setIsOpen = jest.fn();
+
+    render(
+      <FloatUI ariaLabel="Example FloatUI" isOpen={controlledIsOpen} setIsOpen={setIsOpen}>
+        <Button ariaLabel="Toggle FloatUI">Toggle</Button>
+        <div>FloatUI Content</div>
+      </FloatUI>,
+    );
+    expect(screen.queryByText('FloatUI Content')).not.toBeInTheDocument();
+  });
+
+  it('displays the FloatUI content when controlled isOpen is true', () => {
+    const controlledIsOpen = true;
+    const setIsOpen = jest.fn();
+
+    render(
+      <FloatUI ariaLabel="Example FloatUI" isOpen={controlledIsOpen} setIsOpen={setIsOpen}>
+        <Button ariaLabel="Toggle FloatUI">Toggle</Button>
+        <div>FloatUI Content</div>
+      </FloatUI>,
+    );
+
+    expect(screen.getByText('FloatUI Content')).toBeInTheDocument();
+  });
+
+  it('calls setIsOpen when the trigger is clicked in controlled mode', () => {
+    const controlledIsOpen = false;
+    const setIsOpen = jest.fn();
+
+    render(
+      <FloatUI ariaLabel="Example FloatUI" isOpen={controlledIsOpen} setIsOpen={setIsOpen}>
+        <Button ariaLabel="Toggle FloatUI">Toggle</Button>
+        <div>FloatUI Content</div>
+      </FloatUI>,
+    );
+
+    fireEvent.click(screen.getByText('Toggle'));
+    expect(setIsOpen).toHaveBeenCalledWith(true);
+  });
+});

package/src/components/floatUI/FloatUI.tsx

@@ -0,0 +1,82 @@
+import React, { useState, useRef, isValidElement, ReactNode } from 'react';
+import {
+  useFloating,
+  UseFloatingOptions,
+  offset,
+  flip,
+  shift,
+  Placement,
+} from '@floating-ui/react-dom';
+import { useClickOutside } from '@/hooks/useClickOutside';
+import { FloatUIProps } from './types';
+
+const defaultOptions: UseFloatingOptions = {
+  placement: 'bottom-start' as Placement,
+  middleware: [offset(5), flip(), shift()],
+};
+
+export function FloatUI({
+  children,
+  ariaLabel,
+  isOpen: controlledIsOpen,
+  setIsOpen: controlledSetIsOpen,
+  floatingOptions = defaultOptions,
+}: FloatUIProps) {
+  const [internalIsOpen, setInternalIsOpen] = useState(false);
+
+  // Determine whether the component is controlled or uncontrolled
+  const isControlled = controlledIsOpen !== undefined && controlledSetIsOpen !== undefined;
+  const isOpen = isControlled ? controlledIsOpen : internalIsOpen;
+  const setIsOpen = isControlled ? controlledSetIsOpen! : setInternalIsOpen;
+
+  const floatUIContentRef = useRef() as React.MutableRefObject<HTMLDivElement>;
+  const referenceElementRef = useRef<HTMLDivElement | null>(null);
+
+  const childrenArray = React.Children.toArray(children);
+  if (childrenArray.length !== 2) {
+    throw new Error(
+      'FloatUI requires exactly two children: a trigger element and a content element.',
+    );
+  }
+
+  const [trigger, content] = childrenArray;
+
+  if (!isValidElement(trigger) || !isValidElement(content)) {
+    throw new Error('Both children of FloatUI must be valid React elements.');
+  }
+
+  const { x, y, strategy, refs } = useFloating({
+    elements: {
+      reference: referenceElementRef.current,
+    },
+    ...floatingOptions,
+  });
+
+  useClickOutside(floatUIContentRef, () => setIsOpen(false));
+
+  return (
+    <div>
+      <div ref={referenceElementRef} onClick={() => setIsOpen(!isOpen)}>
+        {trigger}
+      </div>
+      {isOpen && (
+        <div
+          // Used to position the floating element relative to the reference element
+          ref={refs.setFloating}
+          style={{
+            position: strategy,
+            top: y ?? 0,
+            left: x ?? 0,
+          }}
+          role="dialog"
+          aria-label={ariaLabel}
+          className="floatui-container"
+        >
+          <div ref={floatUIContentRef} className="floatui-content">
+            {content}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/floatUI/index.ts

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

package/src/components/floatUI/styles/FloatUI.scss

@@ -0,0 +1,11 @@
+@import './variables.scss';
+
+.floatui-container {
+  z-index: 99;
+}
+
+.floatui-content {
+  border-radius: var(--pf-floatui-border-radius);
+  border: 1px solid var(--pf-floatui-border-color);
+  background: var(--pf-floatui-background-color);
+}

package/src/components/floatUI/styles/_variables.scss

@@ -0,0 +1,14 @@
+// Common Variables
+:root,
+:root [data-theme='light'],
+:root [data-theme='dark'] {
+  --pf-floatui-background-color: var(--pf-white-color);
+  --pf-floatui-border-color: var(--pf-gray-color-900);
+  --pf-floatui-border-radius: var(--pf-rounded);
+}
+
+// Dark Theme Specific Variables
+:root [data-theme='dark'] {
+  --pf-floatui-background-color: var(--pf-primary-color-600);
+  --pf-floatui-border-color: var(--pf-gray-color);
+}

package/src/components/floatUI/types.ts

@@ -0,0 +1,10 @@
+import { ReactElement } from 'react';
+import { UseFloatingOptions } from '@floating-ui/react-dom';
+
+export type FloatUIProps = {
+  children: [ReactElement, ReactElement];
+  ariaLabel: string;
+  floatingOptions?: UseFloatingOptions;
+  isOpen?: boolean;
+  setIsOpen?: React.Dispatch<React.SetStateAction<boolean>>;
+};

package/src/components/index.ts

@@ -12,5 +12,5 @@ export { Select } from './forms/select';
 export { Form } from './forms/form';
 export { Skeleton } from './skeleton';
 export { Card } from './card';
-export { Popper } from './popper';
+export { FloatUI } from './floatUI';
 export { Menu } from './menu';

package/src/index.ts

@@ -1,5 +1,8 @@
 import './styles/index.scss';
 
+// This is so consumers of the DS can import floating ui functions/hooks/types from the DS rather than the (peer dependency) floating-ui package
+export * from '@floating-ui/react-dom';
+
 export { GlobalStyles } from './legacy/styles/globals/index';
 
 export {
@@ -71,6 +74,6 @@ export { Select as SelectInput } from './components/forms/select';
 export { Form } from './components/forms/form';
 export { Skeleton } from './components/skeleton';
 export { Card } from './components/card';
-export { Popper } from './components/popper';
+export { FloatUI } from './components/floatUI';
 export { Menu } from './components/menu';
 export { Pill } from './components/pill';

package/src/styles/index.scss

@@ -17,7 +17,7 @@
 @import '../components/skeleton/styles/Skeleton.scss';
 @import '../components/card/styles/Card.scss';
 @import '../components/menu/styles/Menu.scss';
-@import '../components/popper/styles/Popper.scss';
+@import '../components/floatUI/styles/FloatUI.scss';
 @import '../legacy/components/inputs/NoInputDatePicker/NoInputDatePicker.scss';
 @import '../components/pill/styles/Pill.scss';
 @import 'typography';

package/lib/src/components/popper/Popper.d.ts

@@ -1,12 +0,0 @@
-import React from 'react';
-import { Placement } from '@floating-ui/react-dom';
-export type PopperProps = {
-    children: React.ReactNode;
-    referenceElement: HTMLElement | null;
-    isOpen: boolean;
-    onClose: () => void;
-    ariaLabel: string;
-    placement?: Placement;
-    offsetValue?: number;
-};
-export declare function Popper({ children, referenceElement, isOpen, onClose, ariaLabel, placement, offsetValue, }: PopperProps): import("react/jsx-runtime").JSX.Element | null;

package/lib/src/components/popper/Popper.stories.d.ts

@@ -1,6 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { Popper, PopperProps } from './Popper';
-declare const meta: Meta<typeof Popper>;
-export default meta;
-type Story = StoryObj<PopperProps>;
-export declare const Default: Story;

package/lib/src/components/popper/index.d.ts

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