OLYSENSE Design System

Command is React only and utilizes cmdk under the hood. There is no Web Component alternative.

Use the OdsCommand component to render a command menu within a popover.

import {
  OdsCommand,
  OdsCommandInput,
  OdsCommandList,
  OdsCommandEmpty,
  OdsCommandGroup,
  OdsCommandItem,
  OdsCommandSeparator
} from '@ods/components/react-alt';

const Example = () => {
  return (
    <OdsCommand label="OdsCommand Menu">
      <OdsCommandInput placeholder='Search commands..' />
      <OdsCommandList>
        <OdsCommandEmpty>No results found.</OdsCommandEmpty>

        <OdsCommandGroup heading="Procedures">
          <OdsCommandItem><span>Add new procedure</span></OdsCommandItem>
          <OdsCommandItem><span>Edit procedure</span></OdsCommandItem>
          <OdsCommandItem disabled><span>Delete procedure</span></OdsCommandItem>
        </OdsCommandGroup>

        <OdsCommandSeparator />

        <OdsCommandGroup heading="Settings">
          <OdsCommandItem><span>Manage your profile</span></OdsCommandItem>
          <OdsCommandItem><span>Manage system settings</span></OdsCommandItem>
        </OdsCommandGroup>
      </OdsCommandList>
    </OdsCommand>
  )
}

export default Example;

Use the OdsCommandDialog component to render the command menu within a dialog.

import * as React from "react"
import {
  OdsCommandDialog,
  OdsCommandInput,
  OdsCommandList,
  OdsCommandGroup,
  OdsCommandSeparator,
  OdsCommandEmpty,
  OdsCommandItem
} from '@ods/components/react-alt';

type CommandItem = {
  group?: string;
  label: string;
  disabled?: boolean;
}

const commandItems: CommandItem[] = [
  { label: "Add new procedure", group: "Procedures" },
  { label: "Edit procedure", group: "Procedures" },
  { label: "Delete procedure", group: "Procedures", disabled: true },
  { label: "Manage your profile", group: "Settings" },
  { label: "Manage system settings", group: "Settings" }
]

const Example = () => {
  const [open, setOpen] = React.useState(false)
  React.useEffect(() => {
    const down = (e: KeyboardEvent) => {
      if (e.key === "j" && (e.metaKey || e.ctrlKey)) {
        e.preventDefault()
        setOpen((open) => !open)
      }
    }
    document.addEventListener("keydown", down)
    return () => document.removeEventListener("keydown", down)
  }, [])

  return (
    <>
      <p>
        Press{" "} <span>⌘</span>J
      </p>
      <OdsCommandDialog label="OdsCommand Menu" open={open}>
        <OdsCommandInput placeholder='Search procedures actions..' />
        <OdsCommandList>
          <OdsCommandEmpty>No results found.</OdsCommandEmpty>

          <OdsCommandGroup heading="Procedures">
            {commandItems.filter(item => item.group === "Procedures").map((item, index) => (
              <OdsCommandItem
                key={index}
                disabled={item.disabled}
                onSelect={() => {
                  setOpen(false)
                }}>
                <span>{item.label}</span>
              </OdsCommandItem>
            ))}
          </OdsCommandGroup>

          <OdsCommandSeparator />

          <OdsCommandGroup heading="Settings">
            {commandItems.filter(item => item.group === "Settings").map((item, index) => (
              <OdsCommandItem
                key={index}
                disabled={item.disabled}
                onSelect={() => {
                  setOpen(false)
                }}>
                <span>{item.label}</span>
              </OdsCommandItem>
            ))}
          </OdsCommandGroup>

        </OdsCommandList>
      </OdsCommandDialog>
    </>
  )
}

export default Example;

Importing

The Command is built off of the cmdk library. Please reference its documentation for more information on the available props.

Usage

This section includes guidelines for designers and developers about the usage of this component in different contexts.

Command

Examples

Basic

Dialog

Importing

Properties

Usage