playbook_ui 13.8.0.pre.alpha.PLAY962SingleSelect1256 → 13.8.0.pre.alpha.PLAY1016reactionbuttonemojibug1245

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: b8102315dc69078080e1f98874ceea21fcd821128990090d05be19a2e4b4cb17
-  data.tar.gz: b7927d75f3b7bdbebc9dddcd46ece644ace71c20ffd799e663ae22cfd17f6f40
+  metadata.gz: ffbc0de9897a5a39191f65def3ab36d7a9addfba0d1aadafaeafdd49e46cf125
+  data.tar.gz: 812f051276f0e616e9840dbcf2e974c2ac674edf2c40be72a3a104f8c201b652
 SHA512:
-  metadata.gz: b73def220f81c357ac0cdc409fa4503171f3bdad7b32d0f57585c30520b52ad605700c2c51db1172f03b3ef143d893f4a7ed1cf23e976dd497915281c0750175
-  data.tar.gz: 6c46e0f9e4933526ea0a26c340dd9cf5cd0d267c376750c71172891d2a3029040727530b54070064d22b1f31d0fa9c4ee30cd2c596a58148213c07ef1fb206b9
+  metadata.gz: 570df4d72fdec4376ef4e899e71513012e3653c8ec926b91029f143f3c439dba769fd2840cb6be745ad85dfc835a00a0a39f54c1ead9e576d8dea3443ecd03c4
+  data.tar.gz: f5740a5b50db2488cd4c932c00fd5b8324dad33bb6a67daf61a3d10e51b0e0c14fac249fd4d745b2c4dbb067b780111897fd561b9943e7047e2d1c95d97836df

data/app/pb_kits/playbook/pb_button/_button.tsx

@@ -40,7 +40,7 @@ type ButtonPropTypes = {
 
 const isValidEmoji = (emoji: string) => {
   // Using regular expression to check if the string is a valid emoji/emoji Unicode
-  const emojiRegex = /^(\p{Emoji}|\uFE0F)+$/u;
+  const emojiRegex = /^(\p{Emoji}|\uFE0F|\u200D|\u20E3)+$/u;
   return emojiRegex.test(emoji);
 };
 

data/app/pb_kits/playbook/pb_button/docs/_button_reaction.html.erb

@@ -1,5 +1,5 @@
 <%= pb_rails("button", props: { count: 153, highlight: false, icon: "&#127881;", classname: "count", id: "reaction-button-highlight", variant: "reaction" }) %>
-<%= pb_rails("button", props: { count: 5, icon: "😍", variant: "reaction", margin_left: "lg" }) %>
+<%= pb_rails("button", props: { count: 5, icon: "1️⃣", variant: "reaction", margin_left: "lg" }) %>
 <%= pb_rails("button", props: { variant: "reaction", margin_left: "lg" }) %>
 <%= pb_rails("button", props: { icon: "user", variant: "reaction", margin_left: "lg" }) %>
 

data/app/pb_kits/playbook/pb_button/docs/_button_reaction.jsx

@@ -19,7 +19,7 @@ return (
     />
     <Button
         count={5}
-        icon="😍"
+        icon="1️⃣"
         marginLeft='lg'
         tabIndex={0}
         variant="reaction"

data/app/pb_kits/playbook/pb_icon/_icon.tsx

@@ -106,7 +106,7 @@ const Icon = (props: IconProps) => {
 
   const isValidEmoji = (emoji: string) => {
     // Using regular expression to check if the string is a valid emoji/emoji Unicode
-    const emojiRegex = /^(\p{Emoji}|\uFE0F)+$/u;
+    const emojiRegex = /^(\p{Emoji}|\uFE0F|\u200D|\u20E3)+$/u;
     return emojiRegex.test(emoji);
   };
 

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

@@ -1,9 +1,22 @@
-// Function is going over formattedData and returning all objects that match the
-// ID of the clicked item from the dropdown
+//function to retrieve all ancestors of unchecked item and set checked to false
+export const getAncestorsOfUnchecked = (
+  data: { [key: string]: any }[],
+  item: { [key: string]: any }
+) => {
+  if (item.parent_id) {
+    const ancestor = filterFormattedDataById(data, item.parent_id);
+    ancestor[0].checked = false;
+    ancestor[0].parent_id && getAncestorsOfUnchecked(data, ancestor[0]);
+  }
+  return data;
+};
+
+//function is going over formattedData and returning all objects that match the
+//id of the clicked item from the dropdown
 export const filterFormattedDataById = (
   formattedData: { [key: string]: any }[],
   id: string
-): { [key: string]: any }[] => {
+) => {
   const matched: { [key: string]: any }[] = [];
   const recursiveSearch = (data: { [key: string]: any }[], term: string) => {
     for (const item of data) {
@@ -25,7 +38,7 @@ export const filterFormattedDataById = (
 export const findByFilter = (
   formattedData: { [key: string]: any }[],
   searchTerm: string
-): { [key: string]: any }[] => {
+) => {
   const matchedItems: { [key: string]: any }[] = [];
   const recursiveSearch = (data: { [key: string]: any }[], term: string) => {
     for (const item of data) {
@@ -43,20 +56,7 @@ export const findByFilter = (
   return matchedItems;
 };
 
-// Function to retrieve all ancestors of unchecked item and set checked to false
-export const getAncestorsOfUnchecked = (
-  data: { [key: string]: any }[],
-  item: { [key: string]: any }
-): { [key: string]: any }[] => {
-  if (item.parent_id) {
-    const ancestor = filterFormattedDataById(data, item.parent_id);
-    ancestor[0].checked = false;
-    ancestor[0].parent_id && getAncestorsOfUnchecked(data, ancestor[0]);
-  }
-  return data;
-};
-
-// Function to get all items with checked = true
+//function to get all items with checked = true
 export const getCheckedItems = (
   data: { [key: string]: any }[]
 ): { [key: string]: any }[] => {
@@ -76,9 +76,7 @@ export const getCheckedItems = (
   return checkedItems;
 };
 
-export const getDefaultCheckedItems = (
-  treeData: { [key: string]: any }[]
-): { [key: string]: any }[] => {
+export const getDefaultCheckedItems = (treeData: { [key: string]: any }[]) => {
   const checkedDefault: { [key: string]: any }[] = [];
 
   const traverseTree = (items: { [key: string]: any }[]) => {
@@ -120,7 +118,7 @@ export const getDefaultCheckedItems = (
 export const recursiveCheckParent = (
   item: { [key: string]: any },
   data: any
-): any => {
+) => {
   if (item.parent_id !== null) {
     const parent = filterFormattedDataById(data, item.parent_id);
     const allChildrenChecked = parent[0].children.every(
@@ -137,11 +135,8 @@ export const recursiveCheckParent = (
   return data;
 };
 
-export const getExpandedItems = (
-  treeData: { [key: string]: string }[],
-  selectedIds: string[]
-): any[] => {
-  const expandedItems: any[] = [];
+export const getExpandedItems = (treeData: { [key: string]: string }[], selectedIds: string[]) => {
+  let expandedItems: any[] = [];
 
   const traverse = (items: string | any[], ancestors: any[] = []) => {
     for (let i = 0; i < items.length; i++) {

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

@@ -30,11 +30,10 @@
       align-items: center;
       justify-content: space-between;
       .input_inner_container {
-        width: 100%;
+        max-width: 90%;
       }
 
       input {
-        width: 100%;
         border: none;
         font-family: $font_family_base;
         font-size: $font_base;