@saas-ui/command-bar/dist/index.mjs.map

Chakra UI CommandBar Component

{"version":3,"sources":["../src/command-bar.tsx","../src/command-bar-context.ts","../src/index.ts"],"sourcesContent":["import * as React from 'react'\n\nimport {\n  chakra,\n  forwardRef,\n  HTMLChakraProps,\n  ThemingProps,\n  useMultiStyleConfig,\n  Modal,\n  ModalContent,\n  ModalOverlay,\n  ModalProps,\n  ModalContentProps,\n  useTheme,\n} from '@chakra-ui/react'\nimport {\n  CommandBarProvider,\n  CommandBarStylesProvider,\n  useCommandBarContext,\n  useCommandBarStyles,\n} from './command-bar-context'\nimport { cx } from '@chakra-ui/utils'\nimport { useCommandBar, CommandBarOptions } from './command-bar-context'\n\nimport {\n  CommandRoot,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandLoading,\n  CommandSeparator,\n} from 'cmdk'\n\nimport { commandBarTheme } from './command-bar-theme'\n\nfunction cmdkFactory<P extends object>(\n  Component: React.ForwardRefExoticComponent<P>,\n  key: string\n) {\n  const StyledComponent = chakra(Component)\n  return forwardRef<any, typeof StyledComponent>((props, ref) => {\n    const styles = useCommandBarStyles()\n\n    const componentStyles = {\n      ...styles[key],\n    }\n\n    return (\n      <StyledComponent\n        ref={ref}\n        {...props}\n        __css={componentStyles}\n        className={cx(`sui-command-bar__${key}`, props.className)}\n      />\n    )\n  })\n}\n\nconst StyledCommand = chakra(CommandRoot)\nconst StyledInput = chakra(CommandInput)\nconst StyledItem = chakra(CommandItem)\n\nexport const CommandBarList = cmdkFactory(CommandList, 'list')\nexport const CommandBarLoading = cmdkFactory(CommandLoading, 'loading')\nexport const CommandBarEmpty = cmdkFactory(CommandEmpty, 'empty')\n\nexport const CommandBarSeparator = cmdkFactory(CommandSeparator, 'separator')\nexport const CommandBarGroup = cmdkFactory(CommandGroup, 'group')\n\nexport interface CommandBarProps\n  extends CommandBarOptions,\n    ThemingProps<'SuiCommandBar'> {\n  children: React.ReactNode\n}\n\nexport const CommandBar: React.FC<CommandBarProps> = (props) => {\n  const theme = useTheme()\n\n  const styleConfig = theme.components['SuiCommandBar'] ?? commandBarTheme\n\n  const styles = useMultiStyleConfig('SuiCommandBar', {\n    styleConfig,\n    ...props,\n  })\n\n  const context = useCommandBar(props)\n\n  return (\n    <CommandBarProvider value={context}>\n      <CommandBarStylesProvider value={styles}>\n        {props.children}\n      </CommandBarStylesProvider>\n    </CommandBarProvider>\n  )\n}\n\nCommandBar.displayName = 'CommandBar'\n\nexport const CommandBarContent = forwardRef<HTMLChakraProps<'div'>, 'div'>(\n  (props, ref) => {\n    const styles = useCommandBarStyles()\n\n    const containerStyles = {\n      ...styles.container,\n    }\n\n    const { getCommandProps } = useCommandBarContext()\n\n    return (\n      <StyledCommand\n        ref={ref}\n        {...props}\n        {...getCommandProps(props)}\n        __css={containerStyles}\n        className={cx('sui-command-bar', props.className)}\n      />\n    )\n  }\n)\n\nCommandBarContent.displayName = 'CommandBarContent'\n\nexport interface CommandBarInputProps\n  extends Omit<HTMLChakraProps<'input'>, 'onChange'> {\n  value?: string\n  onChange?(value: string): void\n}\n\nexport const CommandBarInput = forwardRef<CommandBarInputProps, 'input'>(\n  (props, ref) => {\n    const { onChange, value, ...rest } = props\n    const styles = useCommandBarStyles()\n\n    const inputStyles = {\n      ...styles.input,\n    }\n\n    return (\n      <StyledInput\n        ref={ref}\n        value={value}\n        onValueChange={onChange}\n        {...rest}\n        __css={inputStyles}\n        className={cx('sui-command-bar__input', props.className)}\n      />\n    )\n  }\n)\n\nCommandBarInput.displayName = 'CommandBarInput'\n\nexport interface CommandBarItemProps\n  extends Omit<HTMLChakraProps<'div'>, 'onSelect' | 'value'> {\n  onSelect?(value: string): void\n  isDisabled?: boolean\n  value?: string\n}\n\nexport const CommandBarItem = forwardRef<CommandBarItemProps, 'div'>(\n  (props, ref) => {\n    const styles = useCommandBarStyles()\n\n    const itemStyles = {\n      ...styles.item,\n    }\n\n    const { getItemProps } = useCommandBarContext()\n\n    return (\n      <StyledItem\n        ref={ref}\n        {...getItemProps(props)}\n        __css={itemStyles}\n        className={cx('sui-command-bar__item', props.className)}\n      />\n    )\n  }\n)\n\nCommandBarItem.displayName = 'CommandBarItem'\n\nexport interface CommandBarDialogProps\n  extends Omit<ModalProps, 'variant' | 'isOpen' | 'onClose'> {\n  closeOnSelect?: boolean\n  contentProps?: ModalContentProps\n  overlay?: boolean\n}\n\nexport const CommandBarDialog = forwardRef<CommandBarDialogProps, 'div'>(\n  (props, ref) => {\n    const { children, contentProps, overlay, ...rest } = props\n\n    const { getDialogProps } = useCommandBarContext()\n\n    return (\n      <Modal scrollBehavior=\"inside\" {...getDialogProps(rest)}>\n        {overlay && <CommandBarOverlay />}\n        <ModalContent ref={ref} bg=\"transparent\" {...contentProps}>\n          {children}\n        </ModalContent>\n      </Modal>\n    )\n  }\n)\n\nCommandBarDialog.displayName = 'CommandBarDialog'\n\nconst CommandBarOverlay = ModalOverlay\n","import {\n  SystemStyleObjectRecord,\n  ThemingProps,\n  useDisclosure,\n} from '@chakra-ui/react'\n\nimport { callAllHandlers, createContext } from '@chakra-ui/utils'\nimport { useCallback } from 'react'\n\nexport interface CommandBarOptions {\n  shouldFilter?: boolean\n  onFilter?(string: string, search: string): number\n  value?: string\n  onChange?(search: string): void\n  onSelect?(value: string): void\n  isOpen?: boolean\n  onClose?(): void\n  closeOnSelect?: boolean\n  size?: ThemingProps<'SuiCommandBar'>['size']\n}\n\nexport const [CommandBarStylesProvider, useCommandBarStyles] =\n  createContext<SystemStyleObjectRecord>({\n    name: 'CommandBarStylesProvider',\n  })\n\nexport const [CommandBarProvider, useCommandBarContext] =\n  createContext<CommandBarContext>({\n    name: 'CommandBarProvider',\n  })\n\nexport type CommandBarContext = ReturnType<typeof useCommandBar>\n\nexport const useCommandBar = (props: CommandBarOptions) => {\n  const {\n    shouldFilter = true,\n    onFilter,\n    value,\n    onChange,\n    onSelect,\n    isOpen: isOpenProp,\n    onClose: onCloseProp,\n    closeOnSelect,\n    size,\n  } = props\n\n  const { isOpen, onClose } = useDisclosure({\n    isOpen: isOpenProp,\n    onClose: onCloseProp,\n  })\n\n  const getCommandProps = useCallback(\n    (props: any) => {\n      return {\n        shouldFilter,\n        filter: onFilter,\n        value,\n        onValueChange: onChange,\n        ...props,\n      }\n    },\n    [shouldFilter, onFilter, value, onChange]\n  )\n\n  const getItemProps = useCallback(\n    (props: any) => {\n      const { isDisabled, onSelect: onSelectProp, ...rest } = props\n      return {\n        ...rest,\n        disabled: isDisabled,\n        onSelect: callAllHandlers(onSelectProp, onSelect, () => {\n          if (closeOnSelect) {\n            onClose()\n          }\n        }),\n      }\n    },\n    [onSelect, closeOnSelect, onClose]\n  )\n\n  const getDialogProps = useCallback(\n    (props?: any) => {\n      return {\n        isOpen,\n        onClose: callAllHandlers(props?.onClose, onClose),\n        size,\n        ...props,\n      }\n    },\n    [isOpen, onClose]\n  )\n\n  return {\n    getCommandProps,\n    getItemProps,\n    getDialogProps,\n  }\n}\n","export {\n  CommandBar,\n  CommandBarDialog,\n  CommandBarItem,\n  CommandBarGroup,\n  CommandBarSeparator,\n  CommandBarEmpty,\n  CommandBarInput,\n  CommandBarList,\n  CommandBarLoading,\n  CommandBarContent,\n} from './command-bar'\n\nexport type {\n  CommandBarProps,\n  CommandBarDialogProps,\n  CommandBarItemProps,\n  CommandBarInputProps,\n} from './command-bar'\n\nexport {\n  useCommandBarContext,\n  useCommandBarStyles,\n  useCommandBar,\n} from './command-bar-context'\n\nexport type {\n  CommandBarContext,\n  CommandBarOptions,\n} from './command-bar-context'\n\nexport { useCommandState } from 'cmdk'\n"],"mappings":"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","names":["props"]}