Combobox component (and Empty state)

lib/components/Command/CommandInput.tsx

@@ -0,0 +1,65 @@
+import { useEffect, useRef } from 'react';
+import { Combobox } from '@headlessui/react';
+import { cx } from '../common/utils';
+import { MagnifyingGlassIcon } from '../../icons/MagnifyingGlassIcon';
+
+interface ICommandInputProps {
+  placeholder?: string;
+  value?: string;
+  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  icon?: React.ReactNode;
+  className?: string;
+}
+
+export const CommandInput: React.FC<ICommandInputProps> = ({
+  placeholder = "Search...",
+  onChange,
+  icon = (
+    <MagnifyingGlassIcon
+      className="pointer-events-none absolute inset-y-0 left-2 h-full w-4 text-gray-400"
+      aria-hidden="true"
+    />
+  ),
+  className,
+  value,
+}) => {
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    if (inputRef.current) {
+      inputRef.current.focus();
+    }
+  }, []);
+
+  useEffect(() => {
+    const handleKeyUp = (event: KeyboardEvent) => {
+      if (event.key === "Escape") {
+        onChange({
+          target: { value: "" },
+        } as React.ChangeEvent<HTMLInputElement>);
+      }
+    };
+
+    window.addEventListener("keyup", handleKeyUp);
+
+    return () => {
+      window.removeEventListener("keyup", handleKeyUp);
+    };
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return (
+    <div className={cx("relative flex items-center", className ?? "")}>
+      {icon}
+      <Combobox.Input
+        as="input"
+        ref={inputRef}
+        autoComplete="off"
+        value={value ?? ""}
+        onChange={onChange}
+        placeholder={placeholder ?? "Search..."}
+        className="block w-full rounded-md border-0 py-1.5 pl-8 pr-14 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400  focus:ring-gray-300 sm:text-sm sm:leading-4"
+      />
+    </div>
+  );
+};

lib/components/Command/CommandList.tsx

@@ -0,0 +1,28 @@
+import { HTMLAttributes } from 'react';
+import { Combobox } from '@headlessui/react';
+import { cx } from '../common/utils';
+
+interface ICommandListProps extends Omit<HTMLAttributes<HTMLUListElement>, 'onCopy'> {
+  className?: string;
+  children?: React.ReactNode;
+  "data-testid"?: string;
+}
+
+export const CommandList: React.FC<ICommandListProps> = ({
+  children,
+  className,
+  "data-testid": dataTestId,
+  ...props
+}) => {
+  return (
+    <Combobox.Options
+      static
+      as="ul"
+      className={cx(className ?? "flex flex-col gap-1")}
+      data-testid={dataTestId}
+      {...props}
+    >
+      {children}
+    </Combobox.Options>
+  );
+};

lib/components/Command/CommandOption.tsx

@@ -0,0 +1,48 @@
+import { HTMLAttributes } from 'react';
+import { Combobox } from '@headlessui/react';
+import { cx } from '../common/utils';
+
+interface ICommandOptionProps extends HTMLAttributes<HTMLLIElement> {
+  value: string | (() => void);
+  disabled?: boolean;
+  activeClassName?: string;
+  children: React.ReactNode;
+  rightIcon?: React.ReactNode;
+  testId?: string;
+}
+
+export const CommandOption: React.FC<ICommandOptionProps> = ({
+  value,
+  activeClassName = "bg-gray-200",
+  children,
+  disabled,
+  rightIcon,
+  testId,
+  ...props
+}) => {
+  return (
+    <Combobox.Option
+      data-testid={testId}
+      value={value}
+      disabled={disabled}
+      {...props}
+    >
+      {({ active: isActive }) => (
+        <div
+          className={cx(
+            "flex w-full cursor-pointer items-center justify-between rounded-md px-2 py-1.5",
+            isActive
+              ? `hover:${activeClassName} ${activeClassName}`
+              : "bg-transparent hover:bg-gray-100",
+            disabled ? "cursor-not-allowed text-gray-400" : "text-gray-900",
+          )}
+        >
+          <p className={"line-clamp-1 w-full text-left sm:leading-4"}>
+            {children}
+          </p>
+          {rightIcon}
+        </div>
+      )}
+    </Combobox.Option>
+  );
+};

lib/components/Command/Lifecycle.tsx

@@ -0,0 +1,16 @@
+import { useEffect, useRef } from 'react';
+
+export const Lifecycle = ({ onUnmount }: { onUnmount?: () => void }) => {
+  const onUnmountRef = useRef(onUnmount);
+  useEffect(() => {
+    onUnmountRef.current = onUnmount;
+  }, [onUnmount]);
+
+  useEffect(() => {
+    return () => {
+      onUnmountRef.current?.();
+    };
+  }, []);
+
+  return null;
+};

lib/components/Command/index.tsx

@@ -0,0 +1,32 @@
+import { HTMLAttributes } from 'react';
+import { Combobox } from '@headlessui/react';
+import { cx } from '../common/utils';
+
+interface ICommandProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
+  className?: string;
+  children?: React.ReactNode;
+}
+
+export const Command: React.FC<ICommandProps> = ({
+  className,
+  children,
+  ...props
+}) => {
+  return (
+    <Combobox
+      as="div"
+      className={cx(
+        "absolute z-popover mt-1 max-h-60 w-[200px] overflow-y-auto overflow-x-hidden rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm",
+        className ?? "",
+      )}
+      {...props}
+    >
+      <div className="flex flex-col gap-2 px-2 py-1">{children}</div>
+    </Combobox>
+  );
+};
+
+export { CommandOption } from "./CommandOption";
+export { CommandList } from "./CommandList";
+export { CommandInput } from "./CommandInput";
+export { Lifecycle } from "./Lifecycle";

lib/components/EmptyState/index.tsx

@@ -1,4 +1,4 @@
-import { EventIcon } from '../../assets/EventIcon';
+import { EventIcon } from '../../icons/EventIcon';
 
 export interface EmptyStateProps {
   IconComponent?: React.ElementType;
@@ -23,6 +23,6 @@ export const EmptyState: React.FC<EmptyStateProps> = ({
         </p>
       </div>
     </div>
-  );
+  );  
 };
 

lib/components/Popover/index.tsx

@@ -0,0 +1,4 @@
+import { Popover } from '@headlessui/react';
+
+export { Popover };
+

lib/icons/MagnifyingGlassIcon.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { cx } from '../components/common/utils';
+
+interface MagnifyingGlassIconProps {
+  className?: string;
+}
+
+export const MagnifyingGlassIcon: React.FC<MagnifyingGlassIconProps> = ({ className = '' }) => {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" className={cx("w-4 h-4", className)}>
+      <path fillRule="evenodd" d="M9 3.5a5.5 5.5 0 1 0 0 11 5.5 5.5 0 0 0 0-11ZM2 9a7 7 0 1 1 12.452 4.391l3.328 3.329a.75.75 0 1 1-1.06 1.06l-3.329-3.328A7 7 0 0 1 2 9Z" clipRule="evenodd" />
+    </svg>
+  );
+}

lib/main.ts

@@ -15,4 +15,5 @@ export { defaultGridProps } from './components/Grid/constants'
 export { ChartTooltip, DefaultTooltip, ChartTooltipTitle, ChartTooltipValue, ChartTooltipFooter } from './components/ChartTooltip'
 export { EmptyState } from './components/EmptyState'
 export type { EmptyStateProps } from './components/EmptyState'
-
+export { Lifecycle, Command, CommandOption, CommandList, CommandInput } from './components/Command'
+export { Popover } from './components/Popover'

package.json

@@ -28,6 +28,7 @@
     "release-version": "npm version patch && git push && git push --tags"
   },
   "dependencies": {
+    "@headlessui/react": "^1.7.19",
     "recharts": "^2.12.5"
   },
   "devDependencies": {

src/stories/BarChart.stories.tsx

@@ -1,4 +1,3 @@
-import '../../lib/styles.css';
 import {
   BarChart,
   BarItem,