@empoleon/spotlight/esm/SpotlightRoot.mjs.map

Command center components for react and Empoleon

{"version":3,"file":"SpotlightRoot.mjs","sources":["../src/SpotlightRoot.tsx"],"sourcesContent":["import { createEffect, JSX, on, splitProps } from 'solid-js';\nimport {\n  factory,\n  Factory,\n  getDefaultZIndex,\n  Modal,\n  ModalProps,\n  ModalStylesNames,\n  rem,\n  resolveClassNames,\n  resolveStyles,\n  StylesApiProps,\n  useEmpoleonTheme,\n  useProps,\n  useStyles,\n} from '@empoleon/core';\nimport { useHotkeys } from '@empoleon/hooks';\nimport { getHotkeys } from './get-hotkeys';\nimport { SpotlightProvider } from './Spotlight.context';\nimport { spotlightActions, SpotlightStore, spotlightStore, useSpotlight } from './spotlight.store';\nimport classes from './Spotlight.module.css';\n\nexport type SpotlightRootStylesNames =\n  | ModalStylesNames\n  | 'search'\n  | 'actionsList'\n  | 'action'\n  | 'empty'\n  | 'footer'\n  | 'actionBody'\n  | 'actionLabel'\n  | 'actionDescription'\n  | 'actionSection'\n  | 'actionsGroup';\n\nexport interface SpotlightRootProps\n  extends StylesApiProps<SpotlightRootFactory>,\n    Omit<\n      ModalProps,\n      | 'styles'\n      | 'classNames'\n      | 'vars'\n      | 'variant'\n      | 'opened'\n      | 'onClose'\n      | 'closeButtonProps'\n      | 'withCloseButton'\n    > {\n  /** Spotlight store, can be used to create multiple instances of spotlight */\n  store?: SpotlightStore;\n\n  /** Controlled Spotlight search query */\n  query?: string;\n\n  /** Called when query changes */\n  onQueryChange?: (query: string) => void;\n\n  /** Determines whether the search query should be cleared when the spotlight is closed, `true` by default */\n  clearQueryOnClose?: boolean;\n\n  /** Keyboard shortcut or a list of shortcuts to trigger spotlight, `'mod + K'` by default */\n  shortcut?: string | string[] | null;\n\n  /** A list of tags which when focused will be ignored by shortcut, `['input', 'textarea', 'select']` by default */\n  tagsToIgnore?: string[];\n\n  /** Determines whether shortcut should trigger based in contentEditable, `false` by default */\n  triggerOnContentEditable?: boolean;\n\n  /** If set, spotlight will not be rendered */\n  disabled?: boolean;\n\n  /** Called when spotlight opens */\n  onSpotlightOpen?: () => void;\n\n  /** Called when spotlight closes */\n  onSpotlightClose?: () => void;\n\n  /** Forces opened state, useful for tests */\n  forceOpened?: boolean;\n\n  /** Determines whether spotlight should be closed when one of the actions is triggered, `true` by default */\n  closeOnActionTrigger?: boolean;\n\n  /** Spotlight content max-height. Ignored unless `scrollable` prop is set. `400` by default */\n  maxHeight?: JSX.CSSProperties['max-height'];\n\n  /** Determines whether the actions list should be scrollable. If not set, `maxHeight` is ignored, `false` by default */\n  scrollable?: boolean;\n}\n\nexport type SpotlightRootFactory = Factory<{\n  props: SpotlightRootProps;\n  ref: HTMLDivElement;\n  stylesNames: SpotlightRootStylesNames;\n  compound: true;\n}>;\n\nconst defaultProps: Partial<SpotlightRootProps> = {\n  size: 600,\n  yOffset: '80px',\n  zIndex: getDefaultZIndex('max'),\n  overlayProps: { backgroundOpacity: 0.35, blur: 7 },\n  transitionProps: { duration: 200, transition: 'pop' },\n  store: spotlightStore,\n  clearQueryOnClose: true,\n  closeOnActionTrigger: true,\n  shortcut: 'mod + K',\n  maxHeight: '400px',\n  scrollable: false,\n};\n\nexport const SpotlightRoot = factory<SpotlightRootFactory>(_props => {\n  const props = useProps('SpotlightRoot', defaultProps, _props);\n  const [local, others] = splitProps(props, [\n    'classNames',\n    'className',\n    'style',\n    'styles',\n    'unstyled',\n    'vars',\n    'store',\n    'children',\n    'query',\n    'onQueryChange',\n    'transitionProps',\n    'clearQueryOnClose',\n    'shortcut',\n    'tagsToIgnore',\n    'triggerOnContentEditable',\n    'disabled',\n    'onSpotlightOpen',\n    'onSpotlightClose',\n    'forceOpened',\n    'closeOnActionTrigger',\n    'maxHeight',\n    'scrollable',\n    'ref'\n  ]);\n\n  const theme = useEmpoleonTheme();\n  const spotlightState = useSpotlight(local.store!);\n  const opened = () => spotlightState().opened;\n  const storeQuery = () => spotlightState().query;\n  const _query = () => local.query || storeQuery();\n  const setQuery = (q: string) => {\n    local.onQueryChange?.(q);\n    spotlightActions.setQuery(q, local.store!);\n  };\n\n  const getStyles = useStyles<SpotlightRootFactory>({\n    name: 'Spotlight',\n    classes,\n    props,\n    className: local.className,\n    style: local.style,\n    classNames: local.classNames,\n    styles: local.styles,\n    unstyled: local.unstyled,\n  });\n\n  useHotkeys(getHotkeys(local.shortcut, local.store!), local.tagsToIgnore, local.triggerOnContentEditable);\n\n  createEffect(on(opened, (isOpened) => {\n    isOpened ? local.onSpotlightOpen?.() : local.onSpotlightClose?.();\n  }));\n\n  return (\n    <SpotlightProvider\n      value={{\n        getStyles,\n        query: _query(),\n        setQuery,\n        store: local.store!,\n        closeOnActionTrigger: local.closeOnActionTrigger,\n      }}\n    >\n      <Modal\n        ref={local.ref}\n        {...others}\n        withCloseButton={false}\n        opened={opened() || !!local.forceOpened}\n        padding={0}\n        onClose={() => spotlightActions.close(local.store!)}\n        className={local.className}\n        style={local.style}\n        classNames={resolveClassNames({\n          theme,\n          classNames: [classes, local.classNames],\n          props,\n          stylesCtx: undefined,\n        })}\n        styles={resolveStyles({ theme, styles: local.styles, props, stylesCtx: undefined })}\n        transitionProps={{\n          ...local.transitionProps,\n          onExited: () => {\n            local.clearQueryOnClose && setQuery('');\n            spotlightActions.clearSpotlightState({ clearQuery: local.clearQueryOnClose }, local.store!);\n            local.transitionProps?.onExited?.();\n          },\n        }}\n        __vars={{ '--spotlight-max-height': local.scrollable ? rem(local.maxHeight) : undefined }}\n        __staticSelector=\"Spotlight\"\n        data-scrollable={local.scrollable || undefined}\n      >\n        {local.children}\n      </Modal>\n    </SpotlightProvider>\n  );\n});\n\nSpotlightRoot.classes = classes;\nSpotlightRoot.displayName = '@empoleon/spotlight/SpotlightRoot';\n"],"names":["defaultProps","size","yOffset","zIndex","getDefaultZIndex","overlayProps","backgroundOpacity","blur","transitionProps","duration","transition","store","spotlightStore","clearQueryOnClose","closeOnActionTrigger","shortcut","maxHeight","scrollable","SpotlightRoot","factory","_props","props","useProps","local","others","splitProps","theme","useEmpoleonTheme","spotlightState","useSpotlight","opened","storeQuery","query","_query","setQuery","q","onQueryChange","spotlightActions","getStyles","useStyles","name","classes","className","style","classNames","styles","unstyled","useHotkeys","getHotkeys","tagsToIgnore","triggerOnContentEditable","createEffect","on","isOpened","onSpotlightOpen","onSpotlightClose","_$createComponent","SpotlightProvider","value","children","Modal","_$mergeProps","ref","r$","_ref$","withCloseButton","forceOpened","padding","onClose","close","resolveClassNames","stylesCtx","resolveStyles","onExited","clearSpotlightState","clearQuery","__vars","rem","__staticSelector","data-scrollable","displayName"],"mappings":"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"}