@mantine/spotlight

Version:

Command center components for react and Mantine

1 lines • 5.99 kB

Source Map (JSON)

{"version":3,"file":"SpotlightAction.mjs","names":["classes"],"sources":["../src/SpotlightAction.tsx"],"sourcesContent":["import {\n Box,\n BoxProps,\n CompoundStylesApiProps,\n ElementProps,\n factory,\n Factory,\n Highlight,\n MantineColor,\n UnstyledButton,\n useProps,\n} from '@mantine/core';\nimport { useSpotlightContext } from './Spotlight.context';\nimport { spotlightActions } from './spotlight.store';\nimport classes from './Spotlight.module.css';\n\nexport type SpotlightActionStylesNames =\n | 'action'\n | 'actionLabel'\n | 'actionDescription'\n | 'actionSection'\n | 'actionBody';\n\nexport interface SpotlightActionProps\n extends BoxProps, CompoundStylesApiProps<SpotlightActionFactory>, ElementProps<'button'> {\n /** Action label, pass string to use in default filter */\n label?: string;\n\n /** Action description, pass string to use in default filter */\n description?: string;\n\n /** Section displayed on the left side of the label, for example, icon */\n leftSection?: React.ReactNode;\n\n /** Section displayed on the right side of the label, for example, hotkey */\n rightSection?: React.ReactNode;\n\n /** Children override default action elements, if passed, label, description and sections are hidden */\n children?: React.ReactNode;\n\n /** Determines whether left and right sections should have dimmed styles @default true */\n dimmedSections?: boolean;\n\n /** Determines whether search query should be highlighted in action label @default false */\n highlightQuery?: boolean;\n\n /** Key of `theme.colors` of any valid CSS color that will be used to highlight search query @default 'yellow' */\n highlightColor?: MantineColor;\n\n /** Determines whether the spotlight should be closed when action is triggered, overrides `closeOnActionTrigger` prop set on `Spotlight` */\n closeSpotlightOnTrigger?: boolean;\n\n /** Keywords that are used for default filtering, not displayed anywhere, can be a string: \"react,router,javascript\" or an array: ['react', 'router', 'javascript'] */\n keywords?: string | string[];\n}\n\nexport type SpotlightActionFactory = Factory<{\n props: SpotlightActionProps;\n ref: HTMLButtonElement;\n stylesNames: SpotlightActionStylesNames;\n compound: true;\n}>;\n\nconst defaultProps = {\n dimmedSections: true,\n highlightQuery: false,\n} satisfies Partial<SpotlightActionProps>;\n\nexport const SpotlightAction = factory<SpotlightActionFactory>((_props) => {\n const props = useProps('SpotlightAction', defaultProps, _props);\n const {\n className,\n style,\n classNames,\n styles,\n id,\n description,\n label,\n leftSection,\n rightSection,\n children,\n dimmedSections,\n highlightQuery,\n highlightColor,\n closeSpotlightOnTrigger,\n onClick,\n onMouseDown,\n keywords,\n vars,\n ...others\n } = props;\n\n const ctx = useSpotlightContext();\n\n const stylesApi = { classNames, styles };\n\n const labelNode =\n highlightQuery && typeof label === 'string' ? (\n <Highlight\n component=\"span\"\n highlight={ctx.query}\n color={highlightColor}\n {...ctx.getStyles('actionLabel', stylesApi)}\n >\n {label}\n </Highlight>\n ) : (\n {label}\n );\n\n return (\n <UnstyledButton\n data-action\n {...ctx.getStyles('action', { className, style, ...stylesApi })}\n {...others}\n onMouseDown={(event) => {\n event.preventDefault();\n onMouseDown?.(event);\n }}\n onClick={(event) => {\n onClick?.(event);\n if (closeSpotlightOnTrigger ?? ctx.closeOnActionTrigger) {\n spotlightActions.close(ctx.store);\n }\n }}\n tabIndex={-1}\n >\n {children || (\n <>\n {leftSection && (\n <Box\n component=\"span\"\n mod={{ position: 'left', dimmed: dimmedSections }}\n {...ctx.getStyles('actionSection', stylesApi)}\n >\n {leftSection}\n </Box>\n )}\n\n \n {labelNode}\n {description}\n \n\n {rightSection && (\n <Box\n component=\"span\"\n mod={{ position: 'right', dimmed: dimmedSections }}\n {...ctx.getStyles('actionSection', stylesApi)}\n >\n {rightSection}\n </Box>\n )}\n </>\n )}\n </UnstyledButton>\n );\n});\n\nSpotlightAction.classes = classes;\nSpotlightAction.displayName = '@mantine/spotlight/SpotlightAction';\n"],"mappings":";;;;;;;AA+DA,MAAM,eAAe;CACnB,gBAAgB;CAChB,gBAAgB;AAClB;AAEA,MAAa,kBAAkB,SAAiC,WAAW;CAEzE,MAAM,EACJ,WACA,OACA,YACA,QACA,IACA,aACA,OACA,aACA,cACA,UACA,gBACA,gBACA,gBACA,yBACA,SACA,aACA,UACA,MACA,GAAG,WApBS,SAAS,mBAAmB,cAAc,MAqBhD;CAER,MAAM,MAAM,oBAAoB;CAEhC,MAAM,YAAY;EAAE;EAAY;CAAO;CAEvC,MAAM,YACJ,kBAAkB,OAAO,UAAU,WACjC,oBAAC,WAAD;EACE,WAAU;EACV,WAAW,IAAI;EACf,OAAO;EACP,GAAI,IAAI,UAAU,eAAe,SAAS;YAEzC;CACQ,CAAA,IAEX,oBAAC,QAAD;EAAM,GAAI,IAAI,UAAU,eAAe,SAAS;YAAI;CAAY,CAAA;CAGpE,OACE,oBAAC,gBAAD;EACE,eAAA;EACA,GAAI,IAAI,UAAU,UAAU;GAAE;GAAW;GAAO,GAAG;EAAU,CAAC;EAC9D,GAAI;EACJ,cAAc,UAAU;GACtB,MAAM,eAAe;GACrB,cAAc,KAAK;EACrB;EACA,UAAU,UAAU;GAClB,UAAU,KAAK;GACf,IAAI,2BAA2B,IAAI,sBACjC,iBAAiB,MAAM,IAAI,KAAK;EAEpC;EACA,UAAU;YAET,YACC,qBAAA,UAAA,EAAA,UAAA;GACG,eACC,oBAAC,KAAD;IACE,WAAU;IACV,KAAK;KAAE,UAAU;KAAQ,QAAQ;IAAe;IAChD,GAAI,IAAI,UAAU,iBAAiB,SAAS;cAE3C;GACE,CAAA;GAGP,qBAAC,QAAD;IAAM,GAAI,IAAI,UAAU,cAAc,SAAS;cAA/C,CACG,WACD,oBAAC,QAAD;KAAM,GAAI,IAAI,UAAU,qBAAqB,SAAS;eAAI;IAAkB,CAAA,CACxE;;GAEL,gBACC,oBAAC,KAAD;IACE,WAAU;IACV,KAAK;KAAE,UAAU;KAAS,QAAQ;IAAe;IACjD,GAAI,IAAI,UAAU,iBAAiB,SAAS;cAE3C;GACE,CAAA;EAEP,EAAA,CAAA;CAEU,CAAA;AAEpB,CAAC;AAED,gBAAgB,UAAUA;AAC1B,gBAAgB,cAAc"}