playbook_ui 12.31.0.pre.alpha.datepickerdisableddatefix931 → 12.31.0.pre.alpha.multilevelnopillsdesigns941

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 654d556d34f5a4d85545aff221a0ad40d54b0f09c6f5a26d74dbd99b346ce57d
-  data.tar.gz: 3ae3d76e2d79224c105d7b8c53c7f7c9033cda03505d55cc4222262926e9a580
+  metadata.gz: 6338c934943b1c56fef912cfbe032aa415b7288be0d44b23df01b858c4a12c0c
+  data.tar.gz: 55f1ac8191a65068030e682e8f7d50e337ce6c74c07ad160c5dd61b795d88bbb
 SHA512:
-  metadata.gz: 1e0ed9fa251b5130bcdfc146ea0e1144b2273424c5f8171fc12b573ada98fbf2ca743d7467602d6d904b65c16fb8976ed51133461bb6497cff4dc038823100b4
-  data.tar.gz: a8dcf56f0adeed47b1e403318feec0a711f9d45dbc6617e26bdb19533fe055552a61bfeb05663141b49d28810f12f3e62397f8177ffa07e6510533a5972f1b5b
+  metadata.gz: 309bd3c9d0885a98a6a280aa7182bcc7617d83cc7f788a435649c832d1188b972c22c4382530c0e30d02c680daa648ce9d0cfb65ee3b2b510ee42a5492440ded
+  data.tar.gz: 1f8e1b6f661fa9554fa85e9c75a2f5145745179361392a86eddbc8c11a1c8c165e82d8a9040b34daca088e0b73155e8b984c78d12d85a9df2fc3fb7beaf2a0bf

data/app/pb_kits/playbook/pb_date_picker/date_picker_helper.ts

@@ -71,42 +71,13 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
     }
   }
   const disabledParser = () => {
-    const disabledArray=[]
-     
-    disableDate && disableDate.length > 0 && disabledArray.push(...disableDate)
-    disableRange && disableRange.length > 0 && disabledArray.push(...disableRange)
-    disableWeekdays && disableWeekdays.length > 0 && disabledArray.push(...disabledWeekDays())
-
-    return disabledArray
-  }
-
-  const disabledWeekDays = () => {
-    return (
-      [
-        (date:any) => {
-          const weekdayObj: {
-            [day: string]: number
-          } = {
-            Sunday: 0,
-            Monday: 1,
-            Tuesday: 2,
-            Wednesday: 3,
-            Thursday: 4,
-            Friday: 5,
-            Saturday: 6,
-          }
-          return (
-            date.getDay() === weekdayObj[disableWeekdays[0]] ||
-            date.getDay() === weekdayObj[disableWeekdays[1]] ||
-            date.getDay() === weekdayObj[disableWeekdays[2]] ||
-            date.getDay() === weekdayObj[disableWeekdays[3]] ||
-            date.getDay() === weekdayObj[disableWeekdays[4]] ||
-            date.getDay() === weekdayObj[disableWeekdays[5]] ||
-            date.getDay() === weekdayObj[disableWeekdays[6]]
-          )
-        },
-      ]
-    )
+    if (disableDate && disableDate.length > 0) {
+      return disableDate
+    } else if (disableRange && disableRange.length > 0) {
+      return disableRange
+    } else {
+      return []
+    }
   }
   const calendarResizer = () => {
     const cal = document.querySelector(`#cal-${pickerId}.open`) as HTMLElement
@@ -156,7 +127,30 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
     disableMobile: true,
     dateFormat: getDateFormat(),
     defaultDate: defaultDateGetter(),
-    disable: disabledParser(),
+    disable: disableWeekdays && disableWeekdays.length > 0 ? [
+      (date) => {
+        const weekdayObj: {
+          [day: string]: number
+        } = {
+          Sunday: 0,
+          Monday: 1,
+          Tuesday: 2,
+          Wednesday: 3,
+          Thursday: 4,
+          Friday: 5,
+          Saturday: 6,
+        }
+        return (
+          date.getDay() === weekdayObj[disableWeekdays[0]] ||
+          date.getDay() === weekdayObj[disableWeekdays[1]] ||
+          date.getDay() === weekdayObj[disableWeekdays[2]] ||
+          date.getDay() === weekdayObj[disableWeekdays[3]] ||
+          date.getDay() === weekdayObj[disableWeekdays[4]] ||
+          date.getDay() === weekdayObj[disableWeekdays[5]] ||
+          date.getDay() === weekdayObj[disableWeekdays[6]]
+        )
+      },
+    ] : disabledParser(),
     enableTime,
     locale: {
       rangeSeparator: ' to '

data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.scss

@@ -36,6 +36,7 @@
       input {
         border: none;
         font-family: $font_family_base;
+        font-size: $font_base;
         &:focus {
           outline: none;
         }

data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx

@@ -6,6 +6,7 @@ import Checkbox from "../pb_checkbox/_checkbox"
 import Icon from "../pb_icon/_icon"
 import FormPill from "../pb_form_pill/_form_pill"
 import CircleIconButton from "../pb_circle_icon_button/_circle_icon_button"
+import Body from "../pb_body/_body"
 import { cloneDeep } from "lodash"
 
 import {
@@ -250,6 +251,15 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
     }
   }
 
+  const itemsSelectedLength = () => {
+    let items
+    if (returnAllSelected && returnedArray && returnedArray.length) {
+      items = returnedArray.length
+    } else if (!returnAllSelected && defaultReturn && defaultReturn.length) {
+      items = defaultReturn.length
+    }
+    return items
+  }
   //rendering formattedData to UI based on typeahead
   const renderNestedOptions = (items: { [key: string]: any }[]) => {
     return (
@@ -310,7 +320,7 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
     <div {...ariaProps} {...dataProps} className={classes} id={id}>
       <div ref={dropdownRef} className='wrapper'>
         <div className='input_wrapper' onClick={handleInputWrapperClick}>
-          <div className='input_inner_container'>
+          <div className='input_inner_container' style={{display: `${inputDisplay === "none" && "flex"}`}}>
             {returnedArray.length !== 0 && returnAllSelected
               ? returnedArray.map((item) => (
                   <input type='hidden' name={`${name}[]`} value={item.id} />
@@ -339,6 +349,11 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
               ))
               : null
             }
+            {
+              inputDisplay === "none" && itemsSelectedLength() && (
+                <Body paddingRight="xs">{`${itemsSelectedLength()} ${itemsSelectedLength() === 1 ? 'item' : 'items'} selected`}</Body>
+              )
+            }
             {returnedArray.length !== 0 && returnAllSelected && inputDisplay === "pills" && <br />}
             {defaultReturn.length !== 0 && !returnAllSelected && inputDisplay === "pills" && <br />}
             <input
@@ -346,7 +361,7 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
               onChange={(e) => {
                 setFilterItem(e.target.value)
               }}
-              placeholder='Start typing...'
+              placeholder={inputDisplay === "none" && itemsSelectedLength() ? "" : "Start typing..."}
               value={filterItem}
               onClick={() => setIsClosed(false)}
             />