design-system-next 2.15.3 → 2.15.5

package/dist/package.json.d.ts

@@ -1,7 +1,7 @@
 declare const _default: {
   "name": "design-system-next",
   "private": false,
-  "version": "2.15.3",
+  "version": "2.15.5",
   "main": "./dist/design-system-next.umd.js",
   "module": "./dist/design-system-next.es.js",
   "repository": {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "design-system-next",
   "private": false,
-  "version": "2.15.3",
+  "version": "2.15.5",
   "main": "./dist/design-system-next.umd.js",
   "module": "./dist/design-system-next.es.js",
   "repository": {

package/src/components/calendar/calendar.ts

@@ -65,7 +65,7 @@ export const calendarPropTypes = {
   },
   emptyStateButtonText: {
     type: String,
-    default: 'Add Employee',
+    default: '',
   },
   hideAddButton: {
     type: Boolean,

package/src/components/select/select-ladderized/select-ladderized.vue

@@ -16,7 +16,7 @@
       :popper-triggers="props.popperTriggers"
       :auto-hide="props.autoHide"
       :disabled="isLadderizedSelectPopperDisabled"
-      :container="`#${props.id}`"
+      :container="`#ladderized-select-popper-${props.id}`"
       :strategy="
         props.popperStrategy === 'fixed' || props.popperStrategy === 'absolute' ? props.popperStrategy : 'absolute'
       "
@@ -60,7 +60,7 @@
         </div>
 
         <!-- This div used to poppulate popper menu -->
-        <div :id="props.id" :style="{ width: props.popperWidth }"></div>
+        <div :id="`ladderized-select-popper-${props.id}`" :style="{ width: props.popperWidth }"></div>
       </div>
 
       <template #popper>

package/src/components/select/select-multiple/select-multiple.vue

@@ -16,7 +16,7 @@
       :popper-triggers="props.popperTriggers"
       :auto-hide="props.autoHide"
       :disabled="isMultiSelectPopperDisabled"
-      :container="`#${props.id}`"
+      :container="`#multi-select-${props.id}`"
       :strategy="
         props.popperStrategy === 'fixed' || props.popperStrategy === 'absolute' ? props.popperStrategy : 'absolute'
       "
@@ -118,7 +118,7 @@
 
         <!-- This div used to poppulate popper menu -->
         <div
-          :id="props.id"
+          :id="`multi-select-${props.id}`"
           :style="{
             width: props.popperWidth,
           }"
@@ -181,4 +181,8 @@ const {
   handleChippedRemoveItem,
   handleClear,
 } = useMultiSelect(props, emit);
+
+defineExpose({
+  handleClear,
+});
 </script>

package/src/components/select/select.vue

@@ -16,7 +16,7 @@
       :popper-triggers="props.popperTriggers"
       :auto-hide="props.autoHide"
       :disabled="isSelectPopperDisabled"
-      :container="`#${props.id}`"
+      :container="`#select-popper-${props.id}`"
       :strategy="
         props.popperStrategy === 'fixed' || props.popperStrategy === 'absolute' ? props.popperStrategy : 'absolute'
       "
@@ -27,7 +27,7 @@
       }"
     >
       <div ref="selectRef">
-        <div @click="!props.searchable? selectPopperState = !selectPopperState: null">
+        <div @click="!props.searchable ? (selectPopperState = !selectPopperState) : null">
           <spr-input
             :id="`input-${props.id}`"
             v-model="inputText"
@@ -44,7 +44,7 @@
             :disabled="props.disabled"
             :error="props.error"
             @keyup="handleSearch"
-            @click="props.searchable ? selectPopperState = true : null"
+            @click="props.searchable ? (selectPopperState = true) : null"
           >
             <template #icon>
               <div class="spr-flex spr-cursor-pointer spr-items-center">
@@ -57,12 +57,12 @@
                 <Icon icon="ph:caret-down" />
               </div>
             </template>
-  
+
             <template #helperMessage>
               <slot name="helperMessage" />
             </template>
           </spr-input>
-  
+
           <!-- Hidden Select for QA automation -->
           <select
             v-if="selectOptions && selectOptions.length"
@@ -80,7 +80,7 @@
 
         <!-- This div used to poppulate popper menu -->
         <div
-          :id="props.id"
+          :id="`select-popper-${props.id}`"
           :style="{
             width: props.popperWidth,
           }"
@@ -180,4 +180,8 @@ const {
   handleSearch,
   handleClear,
 } = useSelect(props, emit);
+
+defineExpose({
+  handleClear,
+});
 </script>

package/src/components/select/use-select.ts

@@ -302,6 +302,7 @@ export const useSelect = (props: SelectPropTypes, emit: SetupContext<SelectEmitT
 
   const handleClear = () => {
     emit('update:modelValue', '');
+    emit('search-string', '');
 
     inputText.value = '';
   };