playbook_ui 14.12.0.pre.alpha.PLAY1865reactdatepickerreinitializingbug5732 → 14.12.0.pre.alpha.PLAY1888initializeOncereactdatepickerslowdown5956

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: f4b2ad0e481643abe338553036ee4fb39c7c7ebe3e388e9486acb5a27cc565e7
-  data.tar.gz: 5c17ee40aba4bace77b6354bac9f417cfd7fb3e8bd3cc9029e9f11142b0808ca
+  metadata.gz: 7ce26ea4ae1198511f9c6a804ac3eec019188d988ddb66b30f1a6ceabfc9e589
+  data.tar.gz: 0f2e7f4cf50aab69444666dff81daf2732ec181f117ae90208a59c987367f8d9
 SHA512:
-  metadata.gz: 0633f4de5953b60ab7e9f0543bfe25de05b99e2e7378478c4c5858e17f61d271fb63ff8b73f2fe9f991c0c9848ea6bb0cf40cb1c9bba790cfff95d4f84fa9fe6
-  data.tar.gz: fa388b6846808f7e7a0b78c3822ad741b4f8302bdbff50c92527bf6af5a90ec002c3cade3a6ae96d24f85c23b19d26a53713321f52402d46b68d9a0e234ac044
+  metadata.gz: 1efdf76471fd6db0e49fd5b9f39dc27089b7ad8d60c6429a4cfcaf9fe0fd743461d1b208a0cbf038ef6275c632b93601afca00de6d24a890c12fedaf25eb2929
+  data.tar.gz: b445830027fd9114880207b3cc33c1fb3df745ef23a2d84b078306a38d57eb319a21e8f6537448e4636698f2806d236425a89577eb99cd8de7242d7fb3559394

data/app/pb_kits/playbook/pb_advanced_table/Components/TableHeaderCell.tsx

@@ -39,8 +39,15 @@ export const TableHeaderCell = ({
   sortIcon,
   table
 }: TableHeaderCellProps) => {
-  const { sortControl, responsive, selectableRows, hasAnySubRows, showActionsBar, inlineRowLoading } =
-    useContext(AdvancedTableContext);
+  const {
+    sortControl,
+    responsive,
+    selectableRows,
+    hasAnySubRows,
+    showActionsBar,
+    inlineRowLoading,
+    isActionBarVisible,
+  } = useContext(AdvancedTableContext);
 
   type justifyTypes = "none" | "center" | "start" | "end" | "between" | "around" | "evenly"
   
@@ -65,7 +72,7 @@ export const TableHeaderCell = ({
  
 const cellClassName = classnames(
   "table-header-cells",
-  `${showActionsBar && "header-cells-with-actions"}`,
+  `${showActionsBar && isActionBarVisible && "header-cells-with-actions"}`,
   `${isChrome() ? "chrome-styles" : ""}`,
   `${enableSorting ? "table-header-cells-active" : ""}`,
   { "pinned-left": responsive === "scroll" && isPinnedLeft },

data/app/pb_kits/playbook/pb_advanced_table/Utilities/ActionBarAnimationHelper.ts

@@ -0,0 +1,26 @@
+export const showActionBar = (elem: HTMLElement) => {
+  elem.style.display = "block";
+  const height = elem.scrollHeight + "px";
+  elem.style.height = height;
+  elem.classList.add("is-visible");
+  elem.style.overflow = "hidden";
+
+  window.setTimeout(() => {
+    if (elem.classList.contains("is-visible")) {
+      elem.style.height = "";
+      elem.style.overflow = "visible";
+    }
+  }, 300);
+};
+
+export const hideActionBar = (elem: HTMLElement) => {
+  elem.style.height = elem.scrollHeight + "px";
+  elem.offsetHeight;
+  window.setTimeout(() => {
+    elem.style.height = "0";
+    elem.style.overflow = "hidden";
+  }, 10);
+  window.setTimeout(() => {
+    elem.classList.remove("is-visible");
+  }, 300);
+};

data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss

@@ -31,12 +31,12 @@
     width: 100%;
   }
 
-  .row-selection-actions-card {
-    border-bottom-right-radius: 0px !important;
-    border-bottom-left-radius: 0px !important;
-    border-bottom-color: transparent;
-  }
-
+    .row-selection-actions-card {
+      border-bottom-right-radius: 0px !important;
+      border-bottom-left-radius: 0px !important;
+      border-bottom-color: transparent;
+      transition: height 300ms ease;
+    }
   .table-header-cells:first-child {
     min-width: 180px;
   }
@@ -89,7 +89,6 @@
     }
   }
 
-
   .table-header-cells-active:first-child {
     color: $primary !important;
   }
@@ -179,7 +178,7 @@
   }
 
   // Responsive Styles
-  @media only screen and (max-width: $screen-xl-min) {  
+  @media only screen and (max-width: $screen-xl-min) {
     &[class*="advanced-table-responsive-scroll"] {
       border-radius: 4px;
       box-shadow: 1px 0 0 0px $border_light,
@@ -215,7 +214,7 @@
       .bg-white td:first-child {
           background-color: $white;
       }
-      
+
     }
   }
   @media only screen and (min-width: $screen-xl-min) {
@@ -306,4 +305,4 @@
       }
     }
   }
-}
+}

data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useCallback } from "react"
+import React, { useState, useEffect, useCallback, useRef } from "react"
 import classnames from "classnames"
 
 import { GenericObject } from "../types"
@@ -27,6 +27,7 @@ import FlexItem from "../pb_flex/_flex_item"
 import AdvancedTableContext from "./Context/AdvancedTableContext"
 
 import { updateExpandAndCollapseState } from "./Utilities/ExpansionControlHelpers"
+import { showActionBar, hideActionBar } from "./Utilities/ActionBarAnimationHelper"
 
 import { CustomCell } from "./Components/CustomCell"
 import { TableHeader } from "./SubKits/TableHeader"
@@ -295,6 +296,20 @@ const AdvancedTable = (props: AdvancedTableProps) => {
   const onPageChange = (page: number) => {
     table.setPageIndex(page - 1)
   }
+//When to show the actions bar as a whole
+  const isActionBarVisible = selectableRows && showActionsBar && selectedRowsLength > 0
+
+  //Ref and useEffect for animating the actions bar
+  const cardRef = useRef(null);
+  useEffect(() => {
+    if (cardRef.current) {
+      if (isActionBarVisible) {
+        showActionBar(cardRef.current);
+      } else {
+        hideActionBar(cardRef.current);
+      }
+    }
+  }, [isActionBarVisible]);
 
   return (
     <div {...ariaProps} 
@@ -311,6 +326,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
             expandedControl,
             handleExpandOrCollapse,
             inlineRowLoading,
+            isActionBarVisible,
             loading,
             responsive,
             setExpanded,
@@ -333,27 +349,24 @@ const AdvancedTable = (props: AdvancedTableProps) => {
                   total={table.getPageCount()}
                   />
           }
-          {
-            selectableRows && showActionsBar && (
-              <Card className="row-selection-actions-card"
-                  padding="xs"
+          <Card
+              borderNone={!isActionBarVisible}
+              className={`${isActionBarVisible && "show-action-card row-selection-actions-card"}`}
+              htmlOptions={{ ref: cardRef as any }}
+              padding={`${isActionBarVisible ? "xs" : "none"}`}
+          >
+            <Flex alignItems="center" 
+                justify="between"
+            >
+              <Caption color="light" 
+                  paddingLeft="xs" 
+                  size="xs"
               >
-                <Flex alignItems="center"
-                    justify="between"
-                >
-                    <Caption color="light"
-                        paddingLeft="xs"
-                        size="xs"
-                    >
-                      {selectedRowsLength} Selected
-                    </Caption>
-                    <FlexItem>
-                    {actions}
-                    </FlexItem>
-                </Flex>
-              </Card>
-            )
-          }
+                {selectedRowsLength} Selected
+              </Caption>
+              <FlexItem>{actions}</FlexItem>
+            </Flex>
+          </Card>
           <Table
               className={`${loading ? "content-loading" : ""}`}
               dark={dark}

data/app/pb_kits/playbook/pb_advanced_table/index.js

@@ -133,15 +133,18 @@ export default class PbAdvancedTable extends PbEnhancedElement {
     if (!elements.length) return;
 
     const isVisible = elements[0].classList.contains("is-visible");
-    if (isVisible) {
-      this.hideElement(elements);
-      this.displayDownArrow();
-    } else {
-      this.showElement(elements);
-      this.displayUpArrow();
+
+    isVisible ? this.hideElement(elements) : this.showElement(elements);
+    isVisible ? this.displayDownArrow() : this.displayUpArrow();
+
+    const row = this.element.closest("tr");
+    if (row) {
+      row.classList.toggle("bg-silver", !isVisible);
+      row.classList.toggle("bg-white", isVisible);
     }
   }
 
+
   displayDownArrow() {
     this.element.querySelector(DOWN_ARROW_SELECTOR).style.display =
       "inline-block";

data/app/pb_kits/playbook/pb_advanced_table/table_row.html.erb

@@ -14,10 +14,13 @@
                     <div style="padding-left: <%= depth * 1.25 %>em">
                         <%= pb_rails("flex", props:{align: "center", column_gap: "xs"}) do %>
                             <% if index.zero? && object.row[:children].present? %>
-                                <button id="<%= "#{object.id}_#{object.row.object_id}" %>" class="gray-icon expand-toggle-icon" data-advanced-table="true" >
-                                    <%= pb_rails("icon", props: { id: "advanced-table_open_icon", icon: "circle-play", cursor: "pointer" }) %> 
-                                    <%= pb_rails("icon", props: { id: "advanced-table_close_icon", display: "none", icon: "circle-play", cursor: "pointer", rotation: 90 }) %>
-                                </button>
+                              <button
+                                id="<%= "#{object.id}_#{object.row.object_id}" %>"
+                                class="gray-icon expand-toggle-icon"
+                                data-advanced-table="true">
+                                <%= pb_rails("icon", props: { id: "advanced-table_open_icon", icon: "circle-play", cursor: "pointer" }) %>
+                                <%= pb_rails("icon", props: { id: "advanced-table_close_icon", display: "none", icon: "circle-play", cursor: "pointer", rotation: 90 }) %>
+                              </button>
                             <% end %>
                             <%= pb_rails("flex/flex_item", props:{padding_left: index.zero? && object.row[:children].present? ? "none" : "xs"}) do %>
                                 <% if column[:custom_renderer].present? %>
@@ -42,4 +45,4 @@
                 <% end %>
             <% end %>
         <% end %>
-<% end %>
+<% end %>

data/app/pb_kits/playbook/pb_avatar/_avatar.scss

@@ -27,6 +27,9 @@ $avatar-sizes: (
       flex-basis: $size;
 
       & > [class^=pb_flex_kit] {
+        [class^=pb_card_kit] {
+          padding: 2px;
+        }
         [class^=pb_card_kit].overlay_bottom_center,
         [class^=pb_card_kit].overlay_top_center {
           left: 50%;
@@ -52,6 +55,10 @@ $avatar-sizes: (
         flex-grow: 0;
         flex-basis: $size;
 
+        .dark & {
+          background: $text_dk_light;
+        }
+
         &::before {
           content: attr(data-initials);
           width: 100%;
@@ -78,9 +85,11 @@ $avatar-sizes: (
       }
     }
   }
+
   &.dark {
     [class^=pb_card_kit] {
       position: absolute;
+      padding: 2px;
     }
   }
 }

data/app/pb_kits/playbook/pb_avatar/_avatar.tsx

@@ -23,8 +23,8 @@ export type AvatarProps = {
     variant?: string,
     icon?: string
   },
-  data?: {[key: string]: string},
   dark?: boolean,
+  data?: {[key: string]: string},
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
   imageAlt?: string,
@@ -71,13 +71,13 @@ const Avatar = (props: AvatarProps): React.ReactElement => {
 
   const canShowImage = imageUrl && !error
 
-  const onlineStatusSize = 
+  const onlineStatusSize =
     ['xxs', 'xs'].includes(size) ? 'sm' :
       ['sm', 'md'].includes(size) ? 'md' :
         ['lg', 'xl'].includes(size) ? 'lg' :
           'sm';
 
-  const onlineStatusPositionProps = (["xxs", "xs", "sm"].includes(size)) ? 
+  const onlineStatusPositionProps = (["xxs", "xs", "sm"].includes(size)) ?
     {
       top: { inset: true, value: "0" },
       right: { inset: false, value: "xxs" }
@@ -96,10 +96,10 @@ const Avatar = (props: AvatarProps): React.ReactElement => {
         id={id}
     >
       {componentOverlay ? (
-        <Flex display="display_inline_block" 
+        <Flex display="display_inline_block"
             position="relative"
         >
-          <div className="avatar_wrapper" 
+          <div className="avatar_wrapper"
               data-initials={initials}
           >
             {canShowImage && (
@@ -115,12 +115,14 @@ const Avatar = (props: AvatarProps): React.ReactElement => {
              <Card
                  borderNone
                  borderRadius="rounded"
+                 dark={dark}
                  padding="none"
                  position="absolute"
                  {...getPlacementProps(componentOverlay.placement, size)}
              >
-    
+
             <Badge
+                dark={dark}
                 rounded
                 text={componentOverlay.text}
                 variant={componentOverlay.variant as "error" | "info" | "neutral" | "primary" | "success" | "warning" | "notification"}
@@ -131,11 +133,13 @@ const Avatar = (props: AvatarProps): React.ReactElement => {
             <Card
                 borderNone
                 borderRadius="rounded"
+                dark={dark}
                 htmlOptions={{style: {padding:"2px"}}}
                 position="absolute"
                 {...getPlacementProps(componentOverlay.placement, size)}
             >
               <IconCircle
+                  dark={dark}
                   icon={componentOverlay.icon}
                   size="xxs"
                   variant={componentOverlay.variant as "default" | "royal" | "blue" | "purple" | "teal" | "red" | "yellow" | "orange" | "green"}
@@ -145,7 +149,7 @@ const Avatar = (props: AvatarProps): React.ReactElement => {
         </Flex>
       ) : (
         <>
-          <div className="avatar_wrapper" 
+          <div className="avatar_wrapper"
               data-initials={initials}
           >
             {canShowImage && (

data/app/pb_kits/playbook/pb_avatar/avatar.html.erb

@@ -1,22 +1,22 @@
 
 <%= object.pb_content_tag(:div, data: object.data.merge(initials: object.initials)) do %>
   <% if object.component_overlay && object.component_overlay[:component] == "icon_circle" %>
-    <%= pb_rails("flex", props: {display: "display_inline_block", position: "relative" }) do %>
+    <%= pb_rails("flex", props: { display: "display_inline_block", position: "relative" }) do %>
       <%= content_tag(:div, data: { initials: object.initials }, class: "avatar_wrapper") do %>
         <%= pb_rails("image", props: { alt: object.alt_text, url: object.image_url, on_error: object.handle_img_error }) if object.image_url.present? %>
       <% end %>
-      <%= pb_rails("card", props: { border_none: true, border_radius: "rounded", html_options: { style: "padding: 2px" }, position: "absolute" }.merge(specific_placement_style)) do %>
+      <%= pb_rails("card", props: { border_none: true, border_radius: "rounded", dark: object.dark, position: "absolute" }.merge(specific_placement_style)) do %>
         
-        <%= pb_rails("icon_circle", props: { size: "xxs", icon: object.component_overlay[:icon], variant: object.component_overlay[:variant] }) %>
+        <%= pb_rails("icon_circle", props: { dark: object.dark, size: "xxs", icon: object.component_overlay[:icon], variant: object.component_overlay[:variant] }) %>
       <% end %>  
   <% end %>
   <% elsif object.component_overlay && object.component_overlay[:component] == "badge" %>
-  <%= pb_rails("flex", props: {display: "display_inline_block", position: "relative" }) do %>
+  <%= pb_rails("flex", props: { display: "display_inline_block", position: "relative" }) do %>
     <%= content_tag(:div, data: { initials: object.initials }, class: "avatar_wrapper") do %>
       <%= pb_rails("image", props: { alt: object.alt_text, url: object.image_url, on_error: object.handle_img_error }) if object.image_url.present? %>
     <% end %>
-    <%= pb_rails("card", props: { border_none: true, border_radius: "rounded", padding: "none", position: "absolute" }.merge(specific_placement_style)) do %>
-    <%= pb_rails("badge", props: { rounded: true, text: object.component_overlay[:text], variant: object.component_overlay[:variant] }) %>
+    <%= pb_rails("card", props: { border_none: true, border_radius: "rounded", dark: object.dark, padding: "none", position: "absolute" }.merge(specific_placement_style)) do %>
+    <%= pb_rails("badge", props: { dark: object.dark, rounded: true, text: object.component_overlay[:text], variant: object.component_overlay[:variant] }) %>
     <% end %>
     <% end %>
   <% else %>
@@ -26,4 +26,3 @@
     <%= pb_rails("online_status", props: object.online_status_props) if object.status %>
   <% end %>
 <% end %>
-

data/app/pb_kits/playbook/pb_avatar/docs/_avatar_badge_component_overlay.jsx

@@ -1,18 +1,19 @@
 import React from "react";
 import { Avatar } from 'playbook-ui'
 
-const AvatarBadgeComponentOverlay = () => {
+const AvatarBadgeComponentOverlay = (props) => {
     return (
         <div>
             <Avatar
                 componentOverlay={{
                     component: "badge",
                     placement: "bottom-right",
-                    text: "12"
+                    text: "12",
                 }}
                 imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
                 marginBottom="sm"
                 size="sm"
+                {...props}
             />
 
             <Avatar
@@ -24,6 +25,8 @@ const AvatarBadgeComponentOverlay = () => {
                 imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
                 marginBottom="sm"
                 size="md"
+                {...props}
+
             />
 
             <Avatar
@@ -36,6 +39,8 @@ const AvatarBadgeComponentOverlay = () => {
                 imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
                 marginBottom="sm"
                 size="lg"
+                {...props}
+
             />
 
             <Avatar
@@ -48,7 +53,8 @@ const AvatarBadgeComponentOverlay = () => {
                 imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
                 marginBottom="sm"
                 size="xl"
-            /> 
+                {...props}
+            />
         </div>
     )
 }

data/app/pb_kits/playbook/pb_avatar/docs/_avatar_circle_icon_component_overlay.jsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { Avatar } from 'playbook-ui'
 
-const AvatarCircleIconComponentOverlay = () => {
+const AvatarCircleIconComponentOverlay = (props) => {
     return (
         <div>
         <Avatar
@@ -14,6 +14,7 @@ const AvatarCircleIconComponentOverlay = () => {
             imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
             marginBottom="sm"
             size="sm"
+            {...props}
         />
 
         <Avatar
@@ -26,6 +27,7 @@ const AvatarCircleIconComponentOverlay = () => {
             imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
             marginBottom="sm"
             size="md"
+            {...props}
         />
 
         <Avatar
@@ -38,6 +40,7 @@ const AvatarCircleIconComponentOverlay = () => {
             imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
             marginBottom="sm"
             size="lg"
+            {...props}
         />
 
         <Avatar
@@ -50,7 +53,8 @@ const AvatarCircleIconComponentOverlay = () => {
             imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
             marginBottom="sm"
             size="xl"
-        /> 
+            {...props}
+        />
     </div>
     )
 }

data/app/pb_kits/playbook/pb_button/button.rb

@@ -65,7 +65,7 @@ module Playbook
       end
 
       def tag
-        link ? "a" : "button"
+        link && !disabled ? "a" : "button"
       end
 
       def valid_emoji(icon)

data/app/pb_kits/playbook/pb_copy_button/_copy_button.scss

@@ -1,3 +1,4 @@
 .pb_copy_button_kit {
-
+  width: fit-content;
+  height: fit-content;
 }

data/app/pb_kits/playbook/pb_copy_button/copy_button.html.erb

@@ -0,0 +1,15 @@
+<%= pb_content_tag do %>
+    <%= pb_rails("button", props: { icon: "copy" }) do %>
+      <%= object.text %>
+    <% end %>
+  <% if object.id %> 
+  <%= pb_rails("tooltip", props: {
+      trigger_element_selector: "##{object.id}",
+      position: object.tooltip_position,
+      tooltip_id: "#{object.id}_tooltip",
+      trigger_method: "click"
+    }) do %>
+        <%= object.tooltip_text %> 
+    <% end %>
+  <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_copy_button/copy_button.rb

@@ -0,0 +1,28 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbCopyButton
+    class CopyButton < ::Playbook::KitBase
+      prop :text
+      prop :tooltip_position,
+           type: Playbook::Props::Enum,
+           values: %w[top right bottom left],
+           default: "top"
+      prop :tooltip_text, type: Playbook::Props::String,
+                          default: "Copied!"
+      prop :value
+      prop :from
+
+      def classname
+        generate_classname("pb_copy_button_kit")
+      end
+
+      def data
+        Hash(values[:data]).merge(
+          "copy-value": value,
+          "from": from
+        )
+      end
+    end
+  end
+end

data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_default.html.erb

@@ -0,0 +1,2 @@
+<%= pb_rails("copy_button", props: { id: "default-copy-button", text: "Copy Text", value: "Playbook makes it easy to support bleeding edge, or legacy systems. Use Playbook’s 200+ components and end-to-end design language to create simple, intuitive and beautiful experiences with ease." } ) %>
+<%= pb_rails("textarea", props: { margin_top: "xs", placeholder: "Copy and paste here" }) %>

data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_from.html.erb

@@ -0,0 +1,5 @@
+<%= pb_rails("body", props: { id: "body", text: "Copy this body text!"}) %>
+<%= pb_rails("copy_button", props: { text: "Copy Body text", from: "body", id: "copy-body-button" }) %>
+<%= pb_rails("text_input", props: { margin_top: "xs", placeholder: "Copy and paste here" }) %>
+<%= pb_rails("copy_button", props: { text: "Copy Text Input", from: "copy-input", id: "copy-input-button" }) %>
+<%= pb_rails("text_input", props: { margin_top: "xs", id: "copy-input" , value: "Copy and paste here" }) %>

data/app/pb_kits/playbook/pb_copy_button/docs/example.yml

@@ -1,8 +1,8 @@
 examples:
-  
+  rails:
+  - copy_button_default: Default
+  - copy_button_from: Copy From
   
   react:
   - copy_button_default: Default
   - copy_button_from: Copy From
-  
-  

data/app/pb_kits/playbook/pb_copy_button/index.js

@@ -0,0 +1,47 @@
+import PbEnhancedElement from "../pb_enhanced_element"
+
+export default class PbCopyButton extends PbEnhancedElement {
+  static get selector() {
+    return '.pb_copy_button_kit'
+  }
+
+  connect() {
+    this.handleClick = this.handleClick.bind(this)
+    this.button = this.element.querySelector('button')
+    if (this.button) {
+      this.button.addEventListener('click', this.handleClick)
+    }
+  }
+
+  disconnect() {
+    if (this.button) {
+      this.button.removeEventListener('click', this.handleClick)
+    }
+  }
+
+  handleClick() {
+    const fromId = this.element.getAttribute('data-from')
+    if (fromId) {
+      const fromElement = document.querySelector(`#${fromId}`)
+      if (fromElement) {
+        let contentToCopy = ''
+        if (fromElement.tagName.toLowerCase() === 'input') {
+          contentToCopy = fromElement.value
+        } else {
+          contentToCopy = fromElement.innerText
+        }
+        navigator.clipboard.writeText(contentToCopy)
+          .catch(err => console.error('Failed to copy text', err))
+        return
+      }
+    }
+
+    const textToCopy = this.element.getAttribute('data-copy-value')
+    if (textToCopy) {
+      navigator.clipboard.writeText(textToCopy)
+        .catch(err => console.error('Failed to copy text', err))
+    } else {
+      console.warn('No data-copy-value attribute found or data-from element')
+    }
+  }
+}