@thecb/components 7.0.1-beta.1 → 7.0.2-beta.1

package/dist/index.d.ts

@@ -301,6 +301,21 @@ interface CollapsibleSectionProps {
 declare const CollapsibleSection: React.FC<Expand<CollapsibleSectionProps> &
   React.HTMLAttributes<HTMLElement>>;
 
+interface CopyableProps {
+  text: string;
+  initialPopoverContent?: string;
+  copiedPopoverContent?: string;
+  copiedPopoverContentDuration?: number;
+  withPopover?: boolean;
+  popoverID?: number;
+  popoverMinWidth?: string;
+  onCopy?: () => void;
+  extraStyles?: string;
+}
+
+declare const Copyable: React.FC<Expand<CopyableProps> &
+  React.HTMLAttributes<HTMLElement>>;
+
 interface EditableTableProps {
   title?: string;
   renderItem?: (items: any[]) => JSX.Element;
@@ -334,6 +349,30 @@ interface FooterWithSubfooterProps {
 declare const FooterWithSubfooter: React.FC<Expand<FooterWithSubfooterProps> &
   React.HTMLAttributes<HTMLElement>>;
 
+interface PopoverProps {
+  triggerText?: string | JSX.Element;
+  content?: string | JSX.Element;
+  hasIcon?: boolean;
+  iconHelpText?: string; // for screen-readers, required if using an icon for trigger
+  popoverID?: number;
+  popoverFocus?: boolean;
+  extraStyles?: string;
+  textExtraStyles?: string;
+  minWidth?: string;
+  maxWidth?: string;
+  height?: string;
+  position?: { top: string; right: string; bottom: string; left: string };
+  arrowPosition?: {
+    arrowTop: string;
+    arrowRight: string;
+    arrowBottom: string;
+    arrowLeft: string;
+  };
+}
+
+declare const Popover: React.FC<Expand<PopoverProps> &
+  React.HTMLAttributes<HTMLElement>>;
+
 interface DefaultPageTemplateProps {
   content: JSX.Element;
   header?: JSX.Element;
@@ -348,5 +387,5 @@ interface DefaultPageTemplateProps {
 declare const DefaultPageTemplate: React.FC<Expand<DefaultPageTemplateProps> &
   React.HTMLAttributes<HTMLElement>>;
 
-export { Box, BoxProps, ButtonWithAction, ButtonWithActionProps, ButtonWithLink, ButtonWithLinkProps, Card, CardProps, Center, CenterProps, Cluster, ClusterProps, CollapsibleSection, CollapsibleSectionProps, Cover, CoverProps, DefaultPageTemplate, DefaultPageTemplateProps, EditableTable, EditableTableProps, ExternalLink, ExternalLinkProps, FooterWithSubfooter, FooterWithSubfooterProps, InternalLink, InternalLinkProps, NavFooter, NavFooterProps, NavHeader, NavHeaderProps, NavTabs, NavTabsProps, Paragraph, ParagraphProps, Stack, StackProps, Switcher, SwitcherProps, TableListItem, TableListItemProps, Text, TextProps, Title, TitleProps };
+export { Box, BoxProps, ButtonWithAction, ButtonWithActionProps, ButtonWithLink, ButtonWithLinkProps, Card, CardProps, Center, CenterProps, Cluster, ClusterProps, CollapsibleSection, CollapsibleSectionProps, Copyable, CopyableProps, Cover, CoverProps, DefaultPageTemplate, DefaultPageTemplateProps, EditableTable, EditableTableProps, ExternalLink, ExternalLinkProps, FooterWithSubfooter, FooterWithSubfooterProps, InternalLink, InternalLinkProps, NavFooter, NavFooterProps, NavHeader, NavHeaderProps, NavTabs, NavTabsProps, Paragraph, ParagraphProps, Popover, PopoverProps, Stack, StackProps, Switcher, SwitcherProps, TableListItem, TableListItemProps, Text, TextProps, Title, TitleProps };
 //# sourceMappingURL=index.d.ts.map

package/dist/index.esm.js

@@ -22866,7 +22866,7 @@ var Popover = function Popover(_ref) {
     tabIndex: popoverFocus && popoverOpen ? "0" : "-1",
     minWidth: minWidth,
     maxWidth: maxWidth,
-    extraStyles: "\n          display: ".concat(popoverOpen ? "block" : "none", "; \n          position: absolute; \n          top: ").concat(top, "; \n          right: ").concat(right, "; \n          bottom: ").concat(bottom, "; \n          left: ").concat(left, ";\n          height: ").concat(height, "\n          ")
+    extraStyles: "\n          display: ".concat(popoverOpen ? "block" : "none", "; \n          position: absolute; \n          top: ").concat(top, "; \n          right: ").concat(right, "; \n          bottom: ").concat(bottom, "; \n          left: ").concat(left, ";\n          height: ").concat(height, ";\n          ")
   }, /*#__PURE__*/React.createElement(Paragraph$1, null, content), /*#__PURE__*/React.createElement(Box, {
     padding: "0",
     extraStyles: "position: absolute; content: \"\"; width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-top: 8px solid rgba(255, 255, 255, 0.85); filter: drop-shadow(2px 8px 14px black); bottom: ".concat(arrowBottom, "; right: ").concat(arrowRight, "; top: ").concat(arrowTop, "; left: ").concat(arrowLeft, ";")
@@ -37531,6 +37531,135 @@ var CollapsibleSection = function CollapsibleSection(_ref) {
 
 var CollapsibleSection$1 = themeComponent(CollapsibleSection, "CollapsibleSection", fallbackValues$z);
 
+var ClipboardIcon = function ClipboardIcon(_ref) {
+  var themeValues = _ref.themeValues;
+  return /*#__PURE__*/React.createElement("svg", {
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React.createElement("mask", {
+    id: "mask0_1104_623",
+    style: {
+      maskType: "alpha"
+    },
+    maskUnits: "userSpaceOnUse",
+    x: "4",
+    y: "2",
+    width: "16",
+    height: "18"
+  }, /*#__PURE__*/React.createElement("path", {
+    "fill-rule": "evenodd",
+    "clip-rule": "evenodd",
+    d: "M9.83929 3.43753H14.1607V5.59825H9.83929L9.83929 3.43753ZM8.75893 3.43753C8.75893 2.84087 9.24262 2.35718 9.83929 2.35718H14.1607C14.7574 2.35718 15.2411 2.84087 15.2411 3.43753V5.59825C15.2411 6.19491 14.7574 6.67861 14.1607 6.67861H9.83929C9.24262 6.67861 8.75893 6.19491 8.75893 5.59825V3.43753ZM6.59821 3.70762H7.94866V5.32816H6.59821C6.29988 5.32816 6.05804 5.57001 6.05804 5.86834V17.4822C6.05804 17.7805 6.29988 18.0224 6.59821 18.0224H17.4018C17.7001 18.0224 17.942 17.7805 17.942 17.4822V5.86834C17.942 5.57001 17.7001 5.32816 17.4018 5.32816H16.0513V3.70762H17.4018C18.5951 3.70762 19.5625 4.67501 19.5625 5.86834V17.4822C19.5625 18.6755 18.5951 19.6429 17.4018 19.6429H6.59821C5.40488 19.6429 4.4375 18.6755 4.4375 17.4822V5.86834C4.4375 4.67501 5.40488 3.70762 6.59821 3.70762Z",
+    fill: themeValues.singleIconColor
+  })), /*#__PURE__*/React.createElement("g", {
+    mask: "url(#mask0_1104_623)"
+  }, /*#__PURE__*/React.createElement("rect", {
+    width: "24",
+    height: "24",
+    fill: themeValues.singleIconColor
+  })));
+};
+
+var ClipboardIcon$1 = themeComponent(ClipboardIcon, "Icons", fallbackValues$2, "primary");
+
+/*
+This component will render `text` and a clipboard icon. When hovered, a popover with content `initialPopoverContent` will be displayed.
+When clicked, `text` will be copied to the clipboard, the popover content will change to `copiedPopoverContent` for `copiedPopoverContentDuration` milliseconds,
+and the `onCopy` callback will be executed.
+*/
+
+var CopyableText = function CopyableText(_ref) {
+  var text = _ref.text,
+      onClick = _ref.onClick;
+  return /*#__PURE__*/React.createElement(ButtonWithAction, {
+    "data-testid": "copyable-trigger",
+    contentOverride: true,
+    action: onClick,
+    variant: "ghost",
+    extraStyles: "padding: 0; margin: 0; min-height: initial; min-width: initial"
+  }, /*#__PURE__*/React.createElement(Stack, {
+    direction: "row",
+    childGap: "0.25rem"
+  }, /*#__PURE__*/React.createElement(Text$1, null, text), /*#__PURE__*/React.createElement(ClipboardIcon$1, null)));
+};
+
+var Copyable = function Copyable(_ref2) {
+  var text = _ref2.text,
+      onCopy = _ref2.onCopy,
+      _ref2$initialPopoverC = _ref2.initialPopoverContent,
+      initialPopoverContent = _ref2$initialPopoverC === void 0 ? "Click to copy to clipboard" : _ref2$initialPopoverC,
+      _ref2$copiedPopoverCo = _ref2.copiedPopoverContent,
+      copiedPopoverContent = _ref2$copiedPopoverCo === void 0 ? "Copied!" : _ref2$copiedPopoverCo,
+      _ref2$withPopover = _ref2.withPopover,
+      withPopover = _ref2$withPopover === void 0 ? true : _ref2$withPopover,
+      _ref2$popoverMinWidth = _ref2.popoverMinWidth,
+      popoverMinWidth = _ref2$popoverMinWidth === void 0 ? "210px" : _ref2$popoverMinWidth,
+      _ref2$copiedPopoverCo2 = _ref2.copiedPopoverContentDuration,
+      copiedPopoverContentDuration = _ref2$copiedPopoverCo2 === void 0 ? 1000 : _ref2$copiedPopoverCo2,
+      _ref2$popoverID = _ref2.popoverID,
+      popoverID = _ref2$popoverID === void 0 ? 0 : _ref2$popoverID,
+      extraStyles = _ref2.extraStyles;
+  var popoverPosition = {
+    top: "-65px",
+    right: "auto",
+    bottom: "auto",
+    left: "50%"
+  };
+  var popoverArrowPosition = {
+    arrowTop: "auto",
+    arrowRight: "auto",
+    arrowBottom: "-8px",
+    arrowLeft: "calc(50% - 4px)" // Popover arrow is 8px wide. This places the middle of the arrow in the middle of the popover.
+
+  };
+
+  var _useState = useState(initialPopoverContent),
+      _useState2 = _slicedToArray(_useState, 2),
+      popoverContent = _useState2[0],
+      setPopoverContent = _useState2[1];
+
+  var _useState3 = useState(undefined),
+      _useState4 = _slicedToArray(_useState3, 2),
+      timer = _useState4[0],
+      setTimer = _useState4[1];
+
+  var onClick = function onClick() {
+    setPopoverContent(copiedPopoverContent);
+    navigator.clipboard.writeText(text)["catch"](function (e) {
+      return console.error(e);
+    });
+    onCopy === null || onCopy === void 0 ? void 0 : onCopy();
+
+    if (timer) {
+      clearTimeout(timer);
+    }
+
+    setTimer(setTimeout(function () {
+      setPopoverContent(initialPopoverContent);
+      setTimer(undefined);
+    }, copiedPopoverContentDuration));
+  };
+
+  return withPopover ? /*#__PURE__*/React.createElement(Popover$1, {
+    minWidth: popoverMinWidth,
+    position: popoverPosition,
+    arrowPosition: popoverArrowPosition,
+    popoverID: popoverID,
+    extraStyles: "> button#btnPopover".concat(popoverID, " { margin: 0 }; #Disclosed").concat(popoverID, " { transform: translateX(-50%); }; ").concat(extraStyles),
+    triggerText: CopyableText({
+      text: text,
+      onClick: onClick
+    }),
+    content: popoverContent
+  }) : CopyableText({
+    text: text,
+    onClick: onClick
+  });
+};
+
 var EditNameForm = function EditNameForm(_ref) {
   var fields = _ref.fields,
       actions = _ref.actions,
@@ -46697,5 +46826,5 @@ var SidebarStackContent = function SidebarStackContent(_ref) {
 
 var SidebarStackContent$1 = withWindowSize(themeComponent(SidebarStackContent, "Global", fallbackValues$M));
 
-export { AccountNumberImage, AccountsAddIcon$1 as AccountsAddIcon, AccountsIcon$1 as AccountsIcon, AccountsIconSmall$1 as AccountsIconSmall, AchReturnIcon, AddObligation$1 as AddObligation, AddressForm, Alert$1 as Alert, AllocatedIcon, AmountCallout$1 as AmountCallout, AutopayOnIcon, BankIcon, Box, BoxWithShadow$1 as BoxWithShadow, Breadcrumbs as Breadcrumb, ButtonWithAction, ButtonWithLink, CalendarIcon, Card$1 as Card, CarrotIcon$1 as CarrotIcon, CashIcon, Center, CenterSingle$1 as CenterSingle, CenterStack$1 as CenterStack, ChangePasswordForm, ChargebackIcon, ChargebackReversalIcon, CheckIcon, Checkbox$1 as Checkbox, CheckboxList$1 as CheckboxList, CheckmarkIcon, ChevronIcon$1 as ChevronIcon, Cluster, CollapsibleSection$1 as CollapsibleSection, CountryDropdown, Cover, CustomerSearchIcon, DefaultPageTemplate, Detail$1 as Detail, DisplayBox$1 as DisplayBox, DisplayCard, Dropdown$1 as Dropdown, DuplicateIcon, EditNameForm, EditableList, EditableTable, EmailForm, EmptyCartIcon$1 as EmptyCartIcon, ErroredIcon, ExternalLink, ExternalLinkIcon, FailedIcon, FooterWithSubfooter$1 as FooterWithSubfooter, ForgotPasswordForm, ForgotPasswordIcon$1 as ForgotPasswordIcon, FormContainer$1 as FormContainer, FormFooterPanel$1 as FormFooterPanel, FormInput$1 as FormInput, FormInputColumn, FormInputRow, FormSelect$1 as FormSelect, FormattedAddress$1 as FormattedAddress, FormattedCreditCard$1 as FormattedCreditCard, Frame, GenericCard, GenericCardLarge, GoToEmailIcon$1 as GoToEmailIcon, Grid, HamburgerButton, Heading$1 as Heading, HighlightTabRow$1 as HighlightTabRow, IconAdd, IconQuitLarge, Imposter, InternalLink, InternalUserInfoForm, Jumbo$1 as Jumbo, LabeledAmount$1 as LabeledAmount, LineItem$1 as LineItem, Loading, LoadingLine, LoginForm, Modal$1 as Modal, Module$1 as Module, Motion, NavFooter, NavHeader, NavMenuDesktop$1 as NavMenuDesktop, NavMenuMobile$1 as NavMenuMobile, NavTabs, NoCustomerResultsIcon, NoPaymentResultsIcon, NotFoundIcon, Obligation, iconsMap as ObligationIcons, Pagination, Paragraph$1 as Paragraph, PartialAmountForm, PasswordRequirements, PaymentButtonBar, PaymentDetails$1 as PaymentDetails, PaymentFormACH, PaymentFormCard$1 as PaymentFormCard, PaymentIcon, PaymentMethodAddIcon$1 as PaymentMethodAddIcon, PaymentMethodIcon$1 as PaymentMethodIcon, PaymentSearchIcon, PaymentsIconSmall$1 as PaymentsIconSmall, PendingIcon, PeriscopeDashboardIframe, PeriscopeFailedIcon, PhoneForm, Placeholder$1 as Placeholder, Popover$1 as Popover, ProcessingFee$1 as ProcessingFee, ProfileIcon$1 as ProfileIcon, ProfileIconSmall$1 as ProfileIconSmall, PropertiesAddIcon$1 as PropertiesAddIcon, PropertiesIconSmall$1 as PropertiesIconSmall, RadioButton$2 as RadioButton, RadioSection$1 as RadioSection, Reel, RefundIcon, RegistrationForm, RejectedIcon, RejectedVelocityIcon, ResetConfirmationForm$1 as ResetConfirmationForm, ResetPasswordForm, ResetPasswordIcon, ResetPasswordSuccess, RoutingNumberImage, SearchIcon, SearchableSelect$1 as SearchableSelect, SettingsIconSmall$1 as SettingsIconSmall, ShoppingCartIcon, Sidebar, SidebarSingleContent$1 as SidebarSingleContent, SidebarStackContent$1 as SidebarStackContent, SolidDivider$1 as SolidDivider, Spinner$2 as Spinner, Stack, FormStateDropdown as StateProvinceDropdown, StatusUnknownIcon, SuccessfulIcon, Switcher, TabSidebar$1 as TabSidebar, TableListItem, Tabs$1 as Tabs, TermsAndConditions, TermsAndConditionsModal$1 as TermsAndConditionsModal, Text$1 as Text, Timeout$1 as Timeout, TimeoutImage, Title$1 as Title, ToggleSwitch$1 as ToggleSwitch, TrashIcon$1 as TrashIcon, TypeaheadInput, VerifiedEmailIcon$1 as VerifiedEmailIcon, VoidedIcon, WalletIcon$1 as WalletIcon, WarningIconXS, WelcomeModule$1 as WelcomeModule, WorkflowTile, cardRegistry, index$5 as constants, createPartialAmountFormState, index$4 as util, withWindowSize };
+export { AccountNumberImage, AccountsAddIcon$1 as AccountsAddIcon, AccountsIcon$1 as AccountsIcon, AccountsIconSmall$1 as AccountsIconSmall, AchReturnIcon, AddObligation$1 as AddObligation, AddressForm, Alert$1 as Alert, AllocatedIcon, AmountCallout$1 as AmountCallout, AutopayOnIcon, BankIcon, Box, BoxWithShadow$1 as BoxWithShadow, Breadcrumbs as Breadcrumb, ButtonWithAction, ButtonWithLink, CalendarIcon, Card$1 as Card, CarrotIcon$1 as CarrotIcon, CashIcon, Center, CenterSingle$1 as CenterSingle, CenterStack$1 as CenterStack, ChangePasswordForm, ChargebackIcon, ChargebackReversalIcon, CheckIcon, Checkbox$1 as Checkbox, CheckboxList$1 as CheckboxList, CheckmarkIcon, ChevronIcon$1 as ChevronIcon, Cluster, CollapsibleSection$1 as CollapsibleSection, Copyable, CountryDropdown, Cover, CustomerSearchIcon, DefaultPageTemplate, Detail$1 as Detail, DisplayBox$1 as DisplayBox, DisplayCard, Dropdown$1 as Dropdown, DuplicateIcon, EditNameForm, EditableList, EditableTable, EmailForm, EmptyCartIcon$1 as EmptyCartIcon, ErroredIcon, ExternalLink, ExternalLinkIcon, FailedIcon, FooterWithSubfooter$1 as FooterWithSubfooter, ForgotPasswordForm, ForgotPasswordIcon$1 as ForgotPasswordIcon, FormContainer$1 as FormContainer, FormFooterPanel$1 as FormFooterPanel, FormInput$1 as FormInput, FormInputColumn, FormInputRow, FormSelect$1 as FormSelect, FormattedAddress$1 as FormattedAddress, FormattedCreditCard$1 as FormattedCreditCard, Frame, GenericCard, GenericCardLarge, GoToEmailIcon$1 as GoToEmailIcon, Grid, HamburgerButton, Heading$1 as Heading, HighlightTabRow$1 as HighlightTabRow, IconAdd, IconQuitLarge, Imposter, InternalLink, InternalUserInfoForm, Jumbo$1 as Jumbo, LabeledAmount$1 as LabeledAmount, LineItem$1 as LineItem, Loading, LoadingLine, LoginForm, Modal$1 as Modal, Module$1 as Module, Motion, NavFooter, NavHeader, NavMenuDesktop$1 as NavMenuDesktop, NavMenuMobile$1 as NavMenuMobile, NavTabs, NoCustomerResultsIcon, NoPaymentResultsIcon, NotFoundIcon, Obligation, iconsMap as ObligationIcons, Pagination, Paragraph$1 as Paragraph, PartialAmountForm, PasswordRequirements, PaymentButtonBar, PaymentDetails$1 as PaymentDetails, PaymentFormACH, PaymentFormCard$1 as PaymentFormCard, PaymentIcon, PaymentMethodAddIcon$1 as PaymentMethodAddIcon, PaymentMethodIcon$1 as PaymentMethodIcon, PaymentSearchIcon, PaymentsIconSmall$1 as PaymentsIconSmall, PendingIcon, PeriscopeDashboardIframe, PeriscopeFailedIcon, PhoneForm, Placeholder$1 as Placeholder, Popover$1 as Popover, ProcessingFee$1 as ProcessingFee, ProfileIcon$1 as ProfileIcon, ProfileIconSmall$1 as ProfileIconSmall, PropertiesAddIcon$1 as PropertiesAddIcon, PropertiesIconSmall$1 as PropertiesIconSmall, RadioButton$2 as RadioButton, RadioSection$1 as RadioSection, Reel, RefundIcon, RegistrationForm, RejectedIcon, RejectedVelocityIcon, ResetConfirmationForm$1 as ResetConfirmationForm, ResetPasswordForm, ResetPasswordIcon, ResetPasswordSuccess, RoutingNumberImage, SearchIcon, SearchableSelect$1 as SearchableSelect, SettingsIconSmall$1 as SettingsIconSmall, ShoppingCartIcon, Sidebar, SidebarSingleContent$1 as SidebarSingleContent, SidebarStackContent$1 as SidebarStackContent, SolidDivider$1 as SolidDivider, Spinner$2 as Spinner, Stack, FormStateDropdown as StateProvinceDropdown, StatusUnknownIcon, SuccessfulIcon, Switcher, TabSidebar$1 as TabSidebar, TableListItem, Tabs$1 as Tabs, TermsAndConditions, TermsAndConditionsModal$1 as TermsAndConditionsModal, Text$1 as Text, Timeout$1 as Timeout, TimeoutImage, Title$1 as Title, ToggleSwitch$1 as ToggleSwitch, TrashIcon$1 as TrashIcon, TypeaheadInput, VerifiedEmailIcon$1 as VerifiedEmailIcon, VoidedIcon, WalletIcon$1 as WalletIcon, WarningIconXS, WelcomeModule$1 as WelcomeModule, WorkflowTile, cardRegistry, index$5 as constants, createPartialAmountFormState, index$4 as util, withWindowSize };
 //# sourceMappingURL=index.esm.js.map