@loadsmart/loadsmart-ui 6.0.7 → 6.0.9

package/dist/testing/index.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../DragDropFile.context-c7cd1441.js"),t=require("@testing-library/react"),i=require("../toArray-b56541b4.js"),n=require("@testing-library/user-event"),r=require("../miranda-compatibility.theme-97e29e8e.js"),o=require("react");function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}require("@loadsmart/miranda-tokens");var c=a(n),d=a(o);function l(e){return e.parentNode.parentNode.parentNode.parentNode}function u(i){return e.__awaiter(this,void 0,void 0,(function*(){const n=l(i);t.queries.queryByRole(n,"menu")||(yield t.act((()=>e.__awaiter(this,void 0,void 0,(function*(){t.fireEvent.click(i),expect(yield t.queries.findByRole(n,"menu")).toBeInTheDocument()})))))}))}function s(i){return e.__awaiter(this,void 0,void 0,(function*(){const n=l(i);t.queries.queryByRole(n,"menu")&&(yield t.act((()=>e.__awaiter(this,void 0,void 0,(function*(){t.fireEvent.click(t.queries.getByText(n,"Close")),yield t.waitForElementToBeRemoved((()=>t.queries.queryByRole(n,"menu")))})))))}))}const f={getContainer:l,expand:u,collapse:s,pick:function(i,n){return e.__awaiter(this,void 0,void 0,(function*(){const r=l(n);yield u(n),yield t.act((()=>e.__awaiter(this,void 0,void 0,(function*(){n.focus();const e=t.queries.getByLabelText(r,i);e&&"false"==e.getAttribute("aria-checked")&&t.fireEvent.click(e)})))),yield s(n)}))},clear:function(i){return e.__awaiter(this,void 0,void 0,(function*(){const n=l(i);yield t.act((()=>e.__awaiter(this,void 0,void 0,(function*(){const e=t.queries.getByLabelText(n,"Clear selection");t.fireEvent.click(e)})))),yield s(i)}))},getSelectedDates:function(i){return e.__awaiter(this,void 0,void 0,(function*(){const e=l(i);yield u(i);const n=t.queries.queryAllByRole(e,"checkbox",{checked:!0});return yield s(i),n}))}};function v(t){return e.__awaiter(this,void 0,void 0,(function*(){yield f.expand(t)}))}function y(t){return e.__awaiter(this,void 0,void 0,(function*(){yield f.collapse(t)}))}const p={getContainer:f.getContainer,expand:v,collapse:y,pick:function(i,n){return e.__awaiter(this,void 0,void 0,(function*(){const e=f.getContainer(n);yield v(n);const[r,o]=i;if(null!=r){const i=t.queries.getByTestId(e,"input-date-range-start");yield f.pick(r,i)}if(null!=o){const i=t.queries.getByTestId(e,"input-date-range-end");yield f.pick(o,i)}yield y(n)}))},clear:function(t){return e.__awaiter(this,void 0,void 0,(function*(){yield f.clear(t)}))},getSelectedDates:function(t){return e.__awaiter(this,void 0,void 0,(function*(){return f.getSelectedDates(t)}))}},_=e=>e.parentNode,h={dragOver:e=>{const i=_(e),n=t.createEvent.dragOver(i);t.fireEvent(i,n)},dragLeave:e=>{const i=_(e),n=t.createEvent.dragLeave(i);t.fireEvent(i,n)},dropFiles:(e,n)=>{const r=_(e),o=t.createEvent.drop(r);Object.defineProperty(o,"dataTransfer",{value:{files:i.toArray(n)}}),t.fireEvent(r,o)}};function g(e){return e.parentNode.parentNode.parentNode}function w(e){return e.parentNode.parentNode.nextSibling}function x(e){return e.parentNode.nextSibling.nextSibling}function B(e){return e.parentNode}function q(e){return 3==g(e).children.length}function b(i){return e.__awaiter(this,void 0,void 0,(function*(){const e=B(i);t.within(e).queryByTestId("select-trigger-loading")&&(yield t.waitForElementToBeRemoved((()=>t.within(e).queryByTestId("select-trigger-loading")),{timeout:2500}))}))}function m(i){return e.__awaiter(this,void 0,void 0,(function*(){if(yield b(i),q(i))return;const n=x(i);yield t.waitFor((()=>{expect(n).toBeEnabled()})),c.default.click(n),yield t.waitFor((()=>e.__awaiter(this,void 0,void 0,(function*(){expect(yield t.within(g(i)).findByRole("listbox")).toBeInTheDocument()}))))}))}function k(i){return e.__awaiter(this,void 0,void 0,(function*(){if(!q(i))return;const e=x(i);c.default.click(e),yield t.waitFor((()=>{expect(t.within(g(i)).queryByRole("listbox")).not.toBeInTheDocument()}))}))}const E={select:function(i,n){return e.__awaiter(this,void 0,void 0,(function*(){yield m(n);const e=w(n),r=yield t.within(e).findByLabelText(i);r&&"false"==r.getAttribute("aria-selected")&&c.default.click(r),yield k(n)}))},unselect:function(i,n){return e.__awaiter(this,void 0,void 0,(function*(){yield m(n);const e=w(n),r=yield t.within(e).findByLabelText(i);r&&"true"==r.getAttribute("aria-selected")&&c.default.click(r),yield k(n)}))},clear:function(i){return e.__awaiter(this,void 0,void 0,(function*(){yield b(i);const e=B(i),n=t.within(e).getByTestId("select-trigger-clear");t.act((()=>{n&&c.default.click(n)}))}))},search:function(i,n){return e.__awaiter(this,void 0,void 0,(function*(){const e=g(n);c.default.type(n,i),yield t.within(e).findAllByRole("option",void 0,{timeout:2500})}))},expand:m,collapse:k,getOptions:function(i){return e.__awaiter(this,void 0,void 0,(function*(){yield m(i);const e=w(i),n=t.within(e).queryAllByRole("option");return yield k(i),n}))},getSelectedOptions:function(i){return e.__awaiter(this,void 0,void 0,(function*(){yield m(i);const e=w(i);let n=[];try{n=yield t.within(e).findAllByRole("option",{selected:!0})}catch(e){n=[]}return yield k(i),n}))},isMenuExpanded:q};const D={fileList:[],onFilesAdded:jest.fn(),onRetryUpload:jest.fn(),onRemoveFile:jest.fn()};exports.DatePickerEvent=f,exports.DateRangePickerEvent=p,exports.DragDropFileEvent=h,exports.SelectEvent=E,exports.getInterpolatedStyles=function(e){return i.toArray(e).map((e=>{for(;r.isFunction(e);)e=e({theme:r.alice});return e})).join("")},exports.renderWithDragDropFileProvider=(i,n)=>{const r=Object.assign(Object.assign({},D),n);return t.render((o=i,d.default.createElement(e.DragDropFileContext.Provider,{value:r},o)));var o};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../DragDropFile.context-c7cd1441.js"),t=require("@testing-library/react"),i=require("../toArray-b56541b4.js"),n=require("@testing-library/user-event"),r=require("../miranda-compatibility.theme-ec2c3370.js"),o=require("react");function c(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}require("@loadsmart/miranda-tokens");var a=c(n),d=c(o);function l(e){return e.parentNode.parentNode.parentNode.parentNode}function u(i){return e.__awaiter(this,void 0,void 0,(function*(){const n=l(i);t.queries.queryByRole(n,"menu")||(yield t.act((()=>e.__awaiter(this,void 0,void 0,(function*(){t.fireEvent.click(i),expect(yield t.queries.findByRole(n,"menu")).toBeInTheDocument()})))))}))}function s(i){return e.__awaiter(this,void 0,void 0,(function*(){const n=l(i);t.queries.queryByRole(n,"menu")&&(yield t.act((()=>e.__awaiter(this,void 0,void 0,(function*(){t.fireEvent.click(t.queries.getByText(n,"Close")),yield t.waitForElementToBeRemoved((()=>t.queries.queryByRole(n,"menu")))})))))}))}const f={getContainer:l,expand:u,collapse:s,pick:function(i,n){return e.__awaiter(this,void 0,void 0,(function*(){const r=l(n);yield u(n),yield t.act((()=>e.__awaiter(this,void 0,void 0,(function*(){n.focus();const e=t.queries.getByLabelText(r,i);e&&"false"==e.getAttribute("aria-checked")&&t.fireEvent.click(e)})))),yield s(n)}))},clear:function(i){return e.__awaiter(this,void 0,void 0,(function*(){const n=l(i);yield t.act((()=>e.__awaiter(this,void 0,void 0,(function*(){const e=t.queries.getByLabelText(n,"Clear selection");t.fireEvent.click(e)})))),yield s(i)}))},getSelectedDates:function(i){return e.__awaiter(this,void 0,void 0,(function*(){const e=l(i);yield u(i);const n=t.queries.queryAllByRole(e,"checkbox",{checked:!0});return yield s(i),n}))}};function v(t){return e.__awaiter(this,void 0,void 0,(function*(){yield f.expand(t)}))}function y(t){return e.__awaiter(this,void 0,void 0,(function*(){yield f.collapse(t)}))}const p={getContainer:f.getContainer,expand:v,collapse:y,pick:function(i,n){return e.__awaiter(this,void 0,void 0,(function*(){const e=f.getContainer(n);yield v(n);const[r,o]=i;if(null!=r){const i=t.queries.getByTestId(e,"input-date-range-start");yield f.pick(r,i)}if(null!=o){const i=t.queries.getByTestId(e,"input-date-range-end");yield f.pick(o,i)}yield y(n)}))},clear:function(t){return e.__awaiter(this,void 0,void 0,(function*(){yield f.clear(t)}))},getSelectedDates:function(t){return e.__awaiter(this,void 0,void 0,(function*(){return f.getSelectedDates(t)}))}},_=e=>e.parentNode,h={dragOver:e=>{const i=_(e),n=t.createEvent.dragOver(i);t.fireEvent(i,n)},dragLeave:e=>{const i=_(e),n=t.createEvent.dragLeave(i);t.fireEvent(i,n)},dropFiles:(e,n)=>{const r=_(e),o=t.createEvent.drop(r);Object.defineProperty(o,"dataTransfer",{value:{files:i.toArray(n)}}),t.fireEvent(r,o)}};function g(e){return e.parentNode.parentNode.parentNode}function w(e){return e.parentNode.parentNode.nextSibling}function x(e){return e.parentNode.nextSibling.nextSibling}function B(e){return e.parentNode}function q(e){return 3==g(e).children.length}function b(i){return e.__awaiter(this,void 0,void 0,(function*(){const e=B(i);t.within(e).queryByTestId("select-trigger-loading")&&(yield t.waitForElementToBeRemoved((()=>t.within(e).queryByTestId("select-trigger-loading")),{timeout:2500}))}))}function m(i){return e.__awaiter(this,void 0,void 0,(function*(){if(yield b(i),q(i))return;const n=x(i);yield t.waitFor((()=>{expect(n).toBeEnabled()})),a.default.click(n),yield t.waitFor((()=>e.__awaiter(this,void 0,void 0,(function*(){expect(yield t.within(g(i)).findByRole("listbox")).toBeInTheDocument()}))))}))}function k(i){return e.__awaiter(this,void 0,void 0,(function*(){if(!q(i))return;const e=x(i);a.default.click(e),yield t.waitFor((()=>{expect(t.within(g(i)).queryByRole("listbox")).not.toBeInTheDocument()}))}))}const E={select:function(i,n){return e.__awaiter(this,void 0,void 0,(function*(){yield m(n);const e=w(n),r=yield t.within(e).findByLabelText(i);r&&"false"==r.getAttribute("aria-selected")&&a.default.click(r),yield k(n)}))},unselect:function(i,n){return e.__awaiter(this,void 0,void 0,(function*(){yield m(n);const e=w(n),r=yield t.within(e).findByLabelText(i);r&&"true"==r.getAttribute("aria-selected")&&a.default.click(r),yield k(n)}))},clear:function(i){return e.__awaiter(this,void 0,void 0,(function*(){yield b(i);const e=B(i),n=t.within(e).getByTestId("select-trigger-clear");t.act((()=>{n&&a.default.click(n)}))}))},search:function(i,n){return e.__awaiter(this,void 0,void 0,(function*(){const e=g(n);a.default.type(n,i),yield t.within(e).findAllByRole("option",void 0,{timeout:2500})}))},expand:m,collapse:k,getOptions:function(i){return e.__awaiter(this,void 0,void 0,(function*(){yield m(i);const e=w(i),n=t.within(e).queryAllByRole("option");return yield k(i),n}))},getSelectedOptions:function(i){return e.__awaiter(this,void 0,void 0,(function*(){yield m(i);const e=w(i);let n=[];try{n=yield t.within(e).findAllByRole("option",{selected:!0})}catch(e){n=[]}return yield k(i),n}))},isMenuExpanded:q};const D={fileList:[],onFilesAdded:jest.fn(),onRetryUpload:jest.fn(),onRemoveFile:jest.fn()};exports.DatePickerEvent=f,exports.DateRangePickerEvent=p,exports.DragDropFileEvent=h,exports.SelectEvent=E,exports.getInterpolatedStyles=function(e){return i.toArray(e).map((e=>{for(;r.isFunction(e);)e=e({theme:r.alice});return e})).join("")},exports.renderWithDragDropFileProvider=(i,n)=>{const r=Object.assign(Object.assign({},D),n);return t.render((o=i,d.default.createElement(e.DragDropFileContext.Provider,{value:r},o)));var o};
 //# sourceMappingURL=index.js.map

package/dist/theming/index.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../miranda-compatibility.theme-97e29e8e.js");require("@loadsmart/miranda-tokens");var t=Object.freeze({__proto__:null,Alice:e.alice,Loadsmart:e.loadsmart,Miranda:e.mirandaCompatibility});function r(t,r){const i=e.isFunction(t)?t(r):t;return r.theme[i]}exports.Themes=t,exports.getToken=function(e,t){return void 0===t?t=>r(e,t):r(e,t)};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../miranda-compatibility.theme-ec2c3370.js");require("@loadsmart/miranda-tokens");var t=Object.freeze({__proto__:null,Alice:e.alice,Loadsmart:e.loadsmart,Miranda:e.mirandaCompatibility});function r(t,r){const i=e.isFunction(t)?t(r):t;return r.theme[i]}exports.Themes=t,exports.getToken=function(e,t){return void 0===t?t=>r(e,t):r(e,t)};
 //# sourceMappingURL=index.js.map

package/dist/theming/themes/alice.theme.d.ts

@@ -677,6 +677,8 @@ declare const alice: {
     'toggle-group-single-padding': string;
     'dropdown-trigger-expanded-color': string | number;
     'dropdown-trigger-height': string | number;
+    'dropdown-trigger-small-height': string | number;
+    'dropdown-trigger-large-height': string | number;
     'height-small': string;
     'height-default': string;
     'height-large': string;

package/dist/theming/themes/loadsmart.theme.d.ts

@@ -659,6 +659,8 @@ declare const loadsmart: {
     'toggle-group-single-padding': string;
     'dropdown-trigger-expanded-color': string | number;
     'dropdown-trigger-height': string | number;
+    'dropdown-trigger-small-height': string | number;
+    'dropdown-trigger-large-height': string | number;
     'height-small': string;
     'height-default': string;
     'height-large': string;

package/dist/theming/themes/miranda-compatibility.theme.d.ts

@@ -668,6 +668,8 @@ declare const mirandaCompatibility: {
     'toggle-group-single-padding': string;
     'dropdown-trigger-expanded-color': string;
     'dropdown-trigger-height': string | number;
+    'dropdown-trigger-small-height': string | number;
+    'dropdown-trigger-large-height': string | number;
     'height-small': string;
     'height-default': string;
     'height-large': string;

package/dist/tools/index.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../prop-5c502a5a.js");require("../toArray-b56541b4.js"),require("../miranda-compatibility.theme-97e29e8e.js"),require("@loadsmart/miranda-tokens"),require("../theming/index.js"),exports.conditional=e.conditional,exports.prop=e.prop,exports.whenProps=e.whenProps;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../prop-9e9ff08a.js");require("../toArray-b56541b4.js"),require("../miranda-compatibility.theme-ec2c3370.js"),require("@loadsmart/miranda-tokens"),require("../theming/index.js"),exports.conditional=e.conditional,exports.prop=e.prop,exports.whenProps=e.whenProps;
 //# sourceMappingURL=index.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@loadsmart/loadsmart-ui",
-	"version": "6.0.7",
+	"version": "6.0.9",
 	"description": "Miranda UI, a React UI library",
 	"main": "dist",
 	"files": [

package/src/components/Dropdown/Dropdown.stories.tsx

@@ -8,10 +8,10 @@ import { TextField } from 'components/TextField'
 import Dropdown from './Dropdown'
 import DropdownContext from './Dropdown.context'
 
-import type { DropdownProps, DropdownMenuProps, DropdownTriggerProps } from './Dropdown.types'
+import type { DropdownProps, DropdownTriggerProps } from './Dropdown.types'
 import { Popover } from 'components/Popover'
 
-export default {
+const meta: Meta = {
   title: 'Components/Dropdown',
   component: Dropdown,
   argTypes: {
@@ -20,11 +20,19 @@ export default {
         disable: true,
       },
     },
+    scale: {
+      control: {
+        type: 'select',
+      },
+      options: ['small', 'default', 'large'],
+    },
   },
-} as Meta
+}
+
+export default meta
 
 export type DropdownStoryProps = DropdownProps & {
-  align?: DropdownMenuProps['align']
+  scale: DropdownTriggerProps['scale']
   outlined?: DropdownTriggerProps['outlined']
 }
 
@@ -34,7 +42,9 @@ export const Playground: Story<DropdownStoryProps> = (args) => {
   return (
     <div className="flex flex-col">
       <Dropdown {...args}>
-        <Dropdown.Trigger outlined={args.outlined}>Actions</Dropdown.Trigger>
+        <Dropdown.Trigger outlined={args.outlined} scale={args.scale}>
+          Actions
+        </Dropdown.Trigger>
         <Dropdown.Menu>
           {ACTIONS.map(({ label, value }) => (
             <Dropdown.Item
@@ -56,12 +66,11 @@ export const Playground: Story<DropdownStoryProps> = (args) => {
   )
 }
 
-Playground.bind({})
-
 Playground.args = {
   disabled: false,
   align: 'start',
   outlined: true,
+  scale: 'default',
 }
 
 export const WithSections: Story<DropdownStoryProps> = (args) => {

package/src/components/Dropdown/DropdownTrigger.tsx

@@ -12,9 +12,9 @@ import conditional, { whenProps } from 'tools/conditional'
 import disableable from 'styles/disableable'
 import DropdownContext from './Dropdown.context'
 import focusable from 'styles/focusable'
-import font from 'styles/font'
 import hoverable from 'styles/hoverable'
 import transition from 'styles/transition'
+import typography from 'styles/typography'
 
 import type { ButtonHTMLAttributes, HTMLAttributes, MouseEvent } from 'react'
 import type { DropdownTriggerProps, DropdownContextReturn } from './Dropdown.types'
@@ -30,6 +30,7 @@ type DropdownTriggerWrapperProps = {
   disabled: boolean
   scheme: ColorScheme
   $outlined: boolean
+  $scale: DropdownTriggerProps['scale']
 }
 
 type TriggerButtonProps = ButtonProps & {
@@ -142,10 +143,13 @@ const TriggerButton = styled(
 const DropdownTriggerWrapper = styled.div<DropdownTriggerWrapperProps>`
   ${transition()}
 
-  ${font({
-    height: 'font-height-3',
-    weight: 'font-weight-medium',
-  })}
+  ${typography(
+    conditional({
+      'button-md': whenProps({ $scale: 'default' }),
+      'button-sm': whenProps({ $scale: 'small' }),
+      'button-lg': whenProps({ $scale: 'large' }),
+    })
+  )}
 
   display: flex;
   justify-content: flex-start;
@@ -164,7 +168,12 @@ const DropdownTriggerWrapper = styled.div<DropdownTriggerWrapperProps>`
 
   color: ${token('color-neutral-darker')};
 
-  height: ${token('dropdown-trigger-height')};
+  height: ${conditional({
+    'dropdown-trigger-height': whenProps({ $scale: 'default' }),
+    'dropdown-trigger-small-height': whenProps({ $scale: 'small' }),
+    'dropdown-trigger-large-height': whenProps({ $scale: 'large' }),
+  })};
+
   box-sizing: border-box;
 
   flex: 1;
@@ -305,6 +314,7 @@ export interface GenericDropdownTriggerProps extends HTMLAttributes<HTMLDivEleme
   disabled?: boolean
   scheme?: ColorScheme
   outlined?: boolean
+  scale?: DropdownTriggerProps['scale']
 }
 
 export function GenericDropdownTrigger(props: GenericDropdownTriggerProps): JSX.Element {
@@ -315,7 +325,7 @@ export function GenericDropdownTrigger(props: GenericDropdownTriggerProps): JSX.
     throw new Error('DropdownTrigger must be inside a DropdownContext')
   }
 
-  const { children, className, scheme = 'light', outlined = true, ...others } = props
+  const { children, className, scheme = 'light', outlined = true, scale, ...others } = props
   const { disabled } = context
 
   return (
@@ -332,6 +342,7 @@ export function GenericDropdownTrigger(props: GenericDropdownTriggerProps): JSX.
       )}
       disabled={disabled}
       scheme={scheme}
+      $scale={scale}
       $outlined={outlined}
     >
       {children}
@@ -344,7 +355,7 @@ function DropdownTrigger(props: DropdownTriggerProps): JSX.Element {
 
   return (
     <Popover.Reference>
-      <GenericDropdownTrigger className={className} outlined={props.outlined}>
+      <GenericDropdownTrigger className={className} outlined={props.outlined} scale={props.scale}>
         <DropdownTriggerButton {...others} data-text={children}>
           {children}
         </DropdownTriggerButton>

package/src/components/Select/Select.test.tsx

@@ -191,6 +191,7 @@ describe('Select', () => {
 
         expect(onBlur).toHaveBeenNthCalledWith(1, new MouseEvent('mousedown'))
         expect(onBlur).toHaveBeenNthCalledWith(2, new KeyboardEvent('keyup'))
+        expect(selectEvent.isMenuExpanded(selectInput)).toBe(false)
       })
 
       it('shrinks when an option is selected', async () => {
@@ -314,6 +315,7 @@ describe('Select', () => {
 
         expect(await selectEvent.getSelectedOptions(searchInput)).toHaveLength(0)
         expect(searchInput).toHaveDisplayValue('')
+        expect(selectEvent.isMenuExpanded(searchInput)).toBe(false)
       })
 
       it('removes the clear button', async () => {

package/src/components/Select/useSelect.ts

@@ -30,6 +30,7 @@ import type {
   SelectDatasourceFunction,
   SelectProps,
   SelectStatus,
+  SelectValue,
   useSelectReturn,
 } from './Select.types'
 
@@ -223,7 +224,7 @@ function useSelect(props: SelectProps): useSelectReturn {
     multiple,
     adapters,
     onChange: useCallback(
-      function handleSelectionChange(selected) {
+      function handleSelectionChange(selected: SelectValue) {
         onChange?.({ target: { id, name, value: getValue(selected, multiple) } })
       },
       [id, multiple, name, onChange]
@@ -303,13 +304,14 @@ function useSelect(props: SelectProps): useSelectReturn {
         toggle: dropdown.toggle,
         expanded: dropdown.expanded,
         onBlur(event?: MouseEvent | TouchEvent | KeyboardEvent) {
+          setQueryTyped(false)
+
           if (!multiple) {
             setQuery(getDisplayValue(adapters, selectable.selected, multiple))
           } else {
             setQuery('')
           }
           options.reset()
-
           onBlur?.(event)
         },
         expandDisabled,
@@ -338,10 +340,11 @@ function useSelect(props: SelectProps): useSelectReturn {
         },
         value: query,
         onChange(e: ChangeEvent<HTMLInputElement>) {
-          onQueryChange?.(e)
+          const sanitizedValue = e.target.value.replace(/\s+/, '')
 
+          setQueryTyped(sanitizedValue !== '')
+          onQueryChange?.(e)
           setQuery(e.target.value)
-          setQueryTyped(true)
         },
         onFocus: TriggerOnFocusHandler,
       }
@@ -353,10 +356,10 @@ function useSelect(props: SelectProps): useSelectReturn {
     function getClearProps() {
       return {
         onClick() {
+          setQueryTyped(false)
           setQuery('')
           selectable.clear()
           options.reset()
-
           triggerRef.current?.focus()
         },
       }

package/src/theming/themes/alice.theme.ts

@@ -947,6 +947,8 @@ const alice = {
   // dropdown
   'dropdown-trigger-expanded-color': color('accent'),
   'dropdown-trigger-height': height('default'),
+  'dropdown-trigger-small-height': height('small'),
+  'dropdown-trigger-large-height': height('large'),
 }
 
 export default alice

package/src/theming/themes/loadsmart.theme.ts

@@ -943,6 +943,8 @@ const loadsmart = {
   // dropdown
   'dropdown-trigger-expanded-color': color('accent'),
   'dropdown-trigger-height': height('default'),
+  'dropdown-trigger-small-height': height('small'),
+  'dropdown-trigger-large-height': height('large'),
 }
 
 export default loadsmart

package/src/theming/themes/miranda-compatibility.theme.ts

@@ -897,6 +897,8 @@ const mirandaCompatibility = {
   // dropdown
   'dropdown-trigger-expanded-color': toCSSValue('color-primary-60'),
   'dropdown-trigger-height': height('default'),
+  'dropdown-trigger-small-height': height('small'),
+  'dropdown-trigger-large-height': height('large'),
 }
 
 export default mirandaCompatibility