playbook_ui 14.12.0.pre.alpha.play1887homeaddressfix5910 → 14.12.0.pre.alpha.playrailsinputmaskissue5933

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: f334463a8c895b5718c4265377f2c1a031eb85ab2107c42b20bb126aa1a8db7b
-  data.tar.gz: 58c22a6fe27363f7dcbd5c189c10c225730fd4cec1676dabe044ecd9be51f4d2
+  metadata.gz: 5d0b37aeb1934fcd42145b3b00c5ccdb1d0d202320271ffb3f6cce025a8842c1
+  data.tar.gz: d4947bdab12110f001ddb7a4dccd6cb76632f77c5d834aa7ceb4c2ca3f090de9
 SHA512:
-  metadata.gz: bafe3f9038a558afdee04a9e66544653dc4f0ae651663d1843c6cfb9d2cd9165822a4c24aeeba845ecf708f155c7d6b69cebcab421f0bd213501544b0e8eb654
-  data.tar.gz: e18f1d32c6be05479b91f897076a680501a35818b8d9acf4ea5ca44fa29392875d436ac65eff3db9f27fa01516345982be900d4fcfcf5218b1ad8732567a4aa9
+  metadata.gz: ed89b4908906b35935f6dc4a95243dbcecc890b73cad32d5e91420d9ccaf762a4ab38fecb391b0c4c72af07d04222066a38b7e8a2c31881da1038457c91861b6
+  data.tar.gz: 07a73fd48069b741436c35ed29821d438f1f2114ff1d90eda9626ca2d6632fbf6a0c997eefe8398e0b37b1935fc929c45160e2a959574b7b4f400fd9195e7229

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;
   }

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_home_address_street/_home_address_street.tsx

@@ -18,7 +18,6 @@ type HomeAddressStreetProps = {
   className?: string,
   data?: { [key: string]: string },
   dark?: boolean,
-  preserveCase?: boolean,
   emphasis: "street" | "city" | "none",
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   homeId: string,
@@ -44,7 +43,6 @@ const HomeAddressStreet = (props: HomeAddressStreetProps): React.ReactElement =>
     htmlOptions = {},
     homeId,
     homeUrl,
-    preserveCase = false,
     target,
     newWindow,
     houseStyle,
@@ -79,8 +77,6 @@ const HomeAddressStreet = (props: HomeAddressStreetProps): React.ReactElement =>
     return null
   }
 
-  const formatStreetAdr = (address: string): string => preserveCase ? address : titleize(address)
-
   return (
     <div
         className={classes(className, dark)}
@@ -95,7 +91,7 @@ const HomeAddressStreet = (props: HomeAddressStreetProps): React.ReactElement =>
               dark={dark}
               size={4}
           >
-            {joinPresent([formatStreetAdr(address), houseStyle], ' · ')}
+            {joinPresent([titleize(address), houseStyle], ' · ')}
           </Title>
           <Title
               className="pb_home_address_street_address"
@@ -105,14 +101,14 @@ const HomeAddressStreet = (props: HomeAddressStreetProps): React.ReactElement =>
             {titleize(addressCont)}
           </Title>
           <Body color="light">
-            {`${titleize(city)}, ${state.toUpperCase()} ${zipcode}`}
+            {`${titleize(city)}, ${state} ${zipcode}`}
           </Body>
         </div>
       }
       {emphasis == 'city' &&
         <div>
           <Body color="light">
-            {joinPresent([formatStreetAdr(address), houseStyle], ' · ')}
+            {joinPresent([titleize(address), houseStyle], ' · ')}
           </Body>
           <Body color="light">{titleize(addressCont)}</Body>
           <div>
@@ -122,7 +118,7 @@ const HomeAddressStreet = (props: HomeAddressStreetProps): React.ReactElement =>
                 size={4}
                 tag="span"
             >
-              {`${titleize(city)}, ${state.toUpperCase()}`}
+              {`${titleize(city)}, ${state}`}
             </Title>
             <Body
                 color="light"
@@ -136,15 +132,15 @@ const HomeAddressStreet = (props: HomeAddressStreetProps): React.ReactElement =>
       {emphasis == 'none' &&
         <div>
           <Body dark={dark}>
-            {joinPresent([formatStreetAdr(address), houseStyle], ' · ')}
+            {joinPresent([titleize(address), houseStyle], ' · ')}
           </Body>
-          <Body dark={dark}>{formatStreetAdr(addressCont)}</Body>
+          <Body dark={dark}>{titleize(addressCont)}</Body>
           <div>
             <Body
                 color="light"
                 dark={dark}
               >
-            {`${titleize(city)}, ${state.toUpperCase()} ${zipcode}`}
+            {`${titleize(city)}, ${state} ${zipcode}`}
           </Body>
           </div>
         </div>

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

@@ -5,14 +5,12 @@ examples:
   - home_address_street_emphasis: Emphasis
   - home_address_street_modified: Modified
   - home_address_street_link: Link
-  - home_address_street_formatting: Formatting
 
   react:
   - home_address_street_default: Default
   - home_address_street_emphasis: Emphasis
   - home_address_street_modified: Modified
   - home_address_street_link: Link
-  - home_address_street_formatting: Formatting
 
   swift:
   - home_address_street_default_swift: Default

data/app/pb_kits/playbook/pb_home_address_street/docs/index.js

@@ -2,4 +2,3 @@ export { default as HomeAddressStreetDefault } from './_home_address_street_defa
 export { default as HomeAddressStreetEmphasis } from './_home_address_street_emphasis.jsx'
 export { default as HomeAddressStreetModified } from './_home_address_street_modified.jsx'
 export { default as HomeAddressStreetLink } from './_home_address_street_link.jsx'
-export { default as HomeAddressStreetFormatting } from './_home_address_street_formatting.jsx'

data/app/pb_kits/playbook/pb_home_address_street/home_address_street.rb

@@ -18,7 +18,6 @@ module Playbook
       prop :state
       prop :zipcode
       prop :territory
-      prop :preserve_case, default: false
       prop :dark, type: Playbook::Props::Boolean, default: false
 
       def classname
@@ -30,7 +29,7 @@ module Playbook
       end
 
       def city_state
-        [city&.titleize, state&.upcase].join(", ")
+        [city&.titleize, state].join(", ")
       end
 
       def zip
@@ -38,7 +37,7 @@ module Playbook
       end
 
       def address_house_style
-        [format_street_address, house_style].join(separator)
+        [address&.titleize, house_style].join(separator)
       end
 
       def address_house_style2
@@ -49,16 +48,6 @@ module Playbook
         house_style ? " \u00b7 " : ""
       end
 
-      def format_street_address
-        preserve_case ? address : custom_titleize(address)
-      end
-
-      def custom_titleize(str)
-        return "" if str.nil?
-
-        str.split(" ").map(&:capitalize).join(" ")
-      end
-
       def city_emphasis_props
         {
           address_house_style: address_house_style,

data/app/pb_kits/playbook/pb_text_input/docs/_text_input_mask.html.erb

@@ -38,7 +38,7 @@
     margin_bottom: "md",
     name: "currency_name",
     id: "example-currency",
-    placeholder: "$0.00",
+    value: "$99.99",
   }) %>
 
 <style>

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

@@ -1,102 +1,71 @@
-export default class PbTextInput {
-  static start() {
-    const inputElements = document.querySelectorAll('[data-pb-input-mask="true"]');
-
-    inputElements.forEach((inputElement) => {
-      inputElement.addEventListener("input", (event) => {
-        const maskType = inputElement.getAttribute("mask");
-        const cursorPosition = inputElement.selectionStart;
-
-        let rawValue = event.target.value;
-        let formattedValue = rawValue;
-
-        // Apply formatting based on the mask type
-        switch (maskType) {
-          case "currency":
-            formattedValue = formatCurrency(rawValue);
-            break;
-          case "ssn":
-            formattedValue = formatSSN(rawValue);
-            break;
-          case "postal_code":
-            formattedValue = formatPostalCode(rawValue);
-            break;
-          case "zip_code":
-            formattedValue = formatZipCode(rawValue);
-            break;
-        }
-
-        // Update the sanitized input field in the same wrapper
-        const sanitizedInput = inputElement
-          .closest(".text_input_wrapper")
-          ?.querySelector('[data="sanitized-pb-input"]');
-
-        if (sanitizedInput) {
-          switch (maskType) {
-            case "ssn":
-              sanitizedInput.value = sanitizeSSN(formattedValue);
-              break;
-            case "currency":
-              sanitizedInput.value = sanitizeCurrency(formattedValue);
-              break;
-            default:
-              sanitizedInput.value = formattedValue; 
-          }
-        }
-
-        inputElement.value = formattedValue;
-        setCursorPosition(inputElement, cursorPosition, rawValue, formattedValue);
-      });
-    });
+import PbEnhancedElement from "../pb_enhanced_element"
+import { INPUTMASKS } from "./inputMask"
 
+export default class PbTextInput extends PbEnhancedElement {
+  static get selector() {
+    return '[data-pb-input-mask="true"]';
   }
-}
-
-function formatCurrency(value) {
-  const numericValue = value.replace(/[^0-9]/g, "").slice(0, 15);
-
-  if (!numericValue) return "";
-
-  const dollars = parseFloat((parseInt(numericValue) / 100).toFixed(2));
-  if (dollars === 0) return "";
 
-  return new Intl.NumberFormat("en-US", {
-    style: "currency",
-    currency: "USD",
-    maximumFractionDigits: 2,
-  }).format(dollars);
-}
-
-function formatSSN(value) {
-  const cleaned = value.replace(/\D/g, "").slice(0, 9);
-  return cleaned
-    .replace(/(\d{5})(?=\d)/, "$1-")
-    .replace(/(\d{3})(?=\d)/, "$1-");
-}
+  connect() {
+    this.handleInput = this.handleInput.bind(this);
+    this.element.addEventListener("input", this.handleInput);
+    this.handleInput(); 
+  }
 
-function formatZipCode(value) {
-  return value.replace(/\D/g, "").slice(0, 5);
-}
+  disconnect() {
+    this.element.removeEventListener("input", this.handleInput);
+  }
 
-function formatPostalCode(value) {
-  const cleaned = value.replace(/\D/g, "").slice(0, 9);
-  return cleaned.replace(/(\d{5})(?=\d)/, "$1-");
+  handleInput() {
+    const maskType = this.element.getAttribute("mask");
+    const cursorPosition = this.element.selectionStart;
+    const rawValue = this.element.value;
+    let formattedValue = rawValue;
+
+    const maskKey = {
+      currency: 'currency',
+      ssn: 'ssn',
+      postal_code: 'postalCode',
+      zip_code: 'zipCode',
+    }[maskType];
+
+    if (maskKey && INPUTMASKS[maskKey]) {
+      formattedValue = INPUTMASKS[maskKey].format(rawValue);
+    }
+
+    const sanitizedInput = this.element
+      .closest(".text_input_wrapper")
+      ?.querySelector('[data="sanitized-pb-input"]');
+
+    if (sanitizedInput) {
+      switch (maskType) {
+        case "ssn":
+          sanitizedInput.value = sanitizeSSN(formattedValue);
+          break;
+        case "currency":
+          sanitizedInput.value = sanitizeCurrency(formattedValue);
+          break;
+        default:
+          sanitizedInput.value = formattedValue;
+      }
+    }
+
+    this.element.value = formattedValue;
+    setCursorPosition(this.element, cursorPosition, rawValue, formattedValue);
+  }
 }
 
 function sanitizeSSN(input) {
-  return input.replace(/\D/g, ""); 
+  return input.replace(/\D/g, "");
 }
 
 function sanitizeCurrency(input) {
-  return input.replace(/[$,]/g, ""); 
+  return input.replace(/[$,]/g, "");
 }
 
-// function to set cursor position
 function setCursorPosition(inputElement, cursorPosition, rawValue, formattedValue) {
   const difference = formattedValue.length - rawValue.length;
-
   const newPosition = Math.max(0, cursorPosition + difference);
-
   requestAnimationFrame(() => {
     inputElement.setSelectionRange(newPosition, newPosition);
   });