use placeholder mode

hazelcast · Nov 9, 2023 · 83bd37a · 83bd37a
1 parent 826ff76
commit 83bd37a
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 6 deletions.
diff --git a/packages/ui/__stories__/CheckableSelectField.stories.tsx b/packages/ui/__stories__/CheckableSelectField.stories.tsx
@@ -78,7 +78,8 @@ WithoutLabel.args = {
 
 export const WithPermanentPlaceholder = Template.bind({})
 WithPermanentPlaceholder.args = {
-  permanentPlaceholder: 'Permanent placeholder',
+  placeholderMode: 'permanent',
+  placeholder: 'Permanent placeholder',
 }
 
 export const WithLongTextOptions = Template.bind({})

diff --git a/packages/ui/src/Select/CheckableSelectField.tsx b/packages/ui/src/Select/CheckableSelectField.tsx
@@ -21,7 +21,6 @@ export type CheckableSelectFieldCoreStaticProps<V> = {
   onChange: (newValue: V[]) => void
   allSelectedLabel?: string
   noneSelectedLabel?: string
-  permanentPlaceholder?: string
 }
 
 export type CheckableSelectFieldExtraProps<V> = {
@@ -31,6 +30,7 @@ export type CheckableSelectFieldExtraProps<V> = {
   showAriaLabel?: boolean
   helperText?: HelpProps['helperText']
   className?: string
+  placeholderMode?: 'normal' | 'permanent'
   placeholder?: string
   disabled?: boolean
   required?: boolean
@@ -61,6 +61,7 @@ export const CheckableSelectField = <V extends string | number = number>(props:
     value,
     size = 'small',
     placeholder = 'Search',
+    placeholderMode = 'normal',
     label,
     showAriaLabel,
     disabled,
@@ -74,7 +75,6 @@ export const CheckableSelectField = <V extends string | number = number>(props:
     'data-test': dataTest,
     allSelectedLabel = 'All selected',
     noneSelectedLabel = 'None selected',
-    permanentPlaceholder,
     noOptionsMessage = 'No options',
     id: rootId,
   } = props
@@ -101,8 +101,8 @@ export const CheckableSelectField = <V extends string | number = number>(props:
   }, [options, searchValue])
 
   const getValueLabel = () => {
-    if (permanentPlaceholder) {
-      return permanentPlaceholder
+    if (placeholderMode === 'permanent') {
+      return placeholder
     }
     if (value.length === 0) {
       return noneSelectedLabel
@@ -129,7 +129,7 @@ export const CheckableSelectField = <V extends string | number = number>(props:
         showAriaLabel={showAriaLabel}
         helperText={helperText}
         className={cls(className, styles.opener, {
-          [styles.withPermanentPlaceholder]: !!permanentPlaceholder,
+          [styles.withPermanentPlaceholder]: placeholderMode === 'permanent',
         })}
         error={error}
         onBlur={onBlur}