From 91e945f43bab6debcb0efb59f47111d1aba7a132 Mon Sep 17 00:00:00 2001
From: Kevin Prudente <kprudente@mparticle.com>
Date: Fri, 12 Apr 2024 17:38:32 -0400
Subject: [PATCH] feat(queryitem): adding onchange and converting error danger
 zone text

---
 src/components/data-entry/QueryItem/Qualifier.tsx  | 9 +++++----
 src/components/data-entry/QueryItem/query-item.css | 5 -----
 src/components/index.ts                            | 1 +
 3 files changed, 6 insertions(+), 9 deletions(-)

diff --git a/src/components/data-entry/QueryItem/Qualifier.tsx b/src/components/data-entry/QueryItem/Qualifier.tsx
index 475924b70..6ac774695 100644
--- a/src/components/data-entry/QueryItem/Qualifier.tsx
+++ b/src/components/data-entry/QueryItem/Qualifier.tsx
@@ -1,6 +1,7 @@
 import './query-item.css'
-import { CheckIcon } from 'src/components/icons'
 import type { DefaultOptionType } from 'antd/es/select'
+import { CheckIcon } from 'src/components/icons'
+import { Typography } from 'src/components/general/Typography/Typography'
 import { type ISelectProps, Select } from 'src/components'
 
 export type IQueryItemQualifierOption = DefaultOptionType
@@ -9,15 +10,15 @@ export interface IQueryItemQualifierProps {
   options: IQueryItemQualifierOption[]
   disabled?: boolean
   errorMessage?: string
+  onChange: (value: IQueryItemQualifierOption) => void
 }
 
 export const Qualifier = (props: IQueryItemQualifierProps) => {
   const selectProps: ISelectProps = {
     defaultValue: props.options?.length ? props.options[0].value : undefined,
-    disabled: props.disabled,
-    options: props.options,
     menuItemSelectedIcon: node =>
       node.isSelected ? <CheckIcon className="query-item-qualifier__item-selected-icon" /> : null,
+    onChange: props.onChange,
     placement: 'bottomLeft',
     popupMatchSelectWidth: false,
     status: props.errorMessage ? 'error' : undefined,
@@ -27,7 +28,7 @@ export const Qualifier = (props: IQueryItemQualifierProps) => {
   return (
     <>
       <Select className="query-item query-item-qualifier__select" {...selectProps}></Select>
-      {props.errorMessage && <span className="query-item__error">{props.errorMessage}</span>}
+      {props.errorMessage && <Typography.Text type="danger">{props.errorMessage}</Typography.Text>}
     </>
   )
 }
diff --git a/src/components/data-entry/QueryItem/query-item.css b/src/components/data-entry/QueryItem/query-item.css
index c315cc45b..dbd71c705 100644
--- a/src/components/data-entry/QueryItem/query-item.css
+++ b/src/components/data-entry/QueryItem/query-item.css
@@ -38,11 +38,6 @@
   }
 }
 
-.query-item__error {
-  font-family: var(--font-family);
-  color: var(--color-error);
-}
-
 /**
  * QueryItem.Action
  */
diff --git a/src/components/index.ts b/src/components/index.ts
index f4b656081..71f4444d6 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -19,6 +19,7 @@ export { AutoComplete, type IAutoCompleteProps } from './data-entry/AutoComplete
 export { TimePicker, type ITimePickerProps } from './data-entry/TimePicker/TimePicker'
 export { Transfer, type ITransferProps } from './data-entry/Transfer/Transfer'
 export { QueryItem } from './data-entry/QueryItem/QueryItem'
+export type { IQueryItemQualifierOption } from './data-entry/QueryItem/Qualifier'
 export { Collapse, type ICollapseProps } from './data-display/Collapse/Collapse'
 export { Timeline, type ITimelineProps } from './data-display/Timeline/Timeline'
 export { Calendar, type ICalendarProps } from './data-display/Calendar/Calendar'