playbook_ui 14.19.0.pre.alpha.PLAY21297675 → 14.19.0.pre.alpha.play2125phonenumberinputcountrysearcherrorstylefix7698

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 93df013c8d48a5c077ccdb15133ab4682b05d667db94eba9bdd6e8accba7d472
-  data.tar.gz: '085bc5dffd842ea4fc4fe35f8579b517523ad0e02f6b9692fe33faecbf6b9284'
+  metadata.gz: 1087cef4c8be18ff187168d62201d957f55e663176cf11a4ba16496a79d20044
+  data.tar.gz: e57d9d4c52674fefff6c0377e9edec29727731f1f4d48dc9427ec8dd3a7b5dc1
 SHA512:
-  metadata.gz: 463d71189c32e8500ca647672d4202ffbfb23e0d73c068eaf50a0779752a0f91d9151bcfce121cc3050066a1a0897eb13b86b05328630aa6f5e3ee80baa50586
-  data.tar.gz: 00d153cdde95a0761c7515b5fb5de2dff87d10cb7f7e1e16e2f092bee31f1110ed713c6c3599fb57fb11bc347800f6bb1510798990904ad84629580d42a427e4
+  metadata.gz: 1a8f404939c101bdc6b972905f2a6717000d838d71266ab3047b9b02555abbd15de4bdd0202c3b1d08662110616d93ea603f66f55207efa5d37a7e1de651ae1b
+  data.tar.gz: e48a40d41c3b0fd0dba7ff67c29b163e87890a92831b9a1ad23aba0fd264ea17a0a70d4a699dcc2891e6d8cbcd78386237cee66e1e1f463c41a024f632f59276

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

@@ -93,17 +93,7 @@ export const RegularTableView = ({
 
               {row.getVisibleCells().map((cell: Cell<GenericObject, unknown>, i: number) => {
                 const isPinnedLeft = columnPinning.left.includes(cell.column.id);
-                const isLastCell = (() => {
-                  const parent = cell.column.parent;
-                    if (!parent) {
-                      const last = row.getVisibleCells().at(-1);
-                      return last?.column.id === cell.column.id;
-                    }
-                  
-                    const visibleSiblings = parent.columns.filter(col => col.getIsVisible());
-                    return visibleSiblings.at(-1)?.id === cell.column.id;
-                   })();
-
+                const isLastCell = cell.column.parent?.columns?.at(-1)?.id === cell.column.id;
                 const { column } = cell;
                 return (
                   <td

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

@@ -1,112 +1,25 @@
-import React, { useEffect, useRef, useContext } from "react";
-
-import AdvancedTableContext from "../Context/AdvancedTableContext";
-import { buildVisibilityTree } from "../Utilities/VisibilityTree";
-
+import React, { useEffect, useRef } from "react";
 import Card from "../../pb_card/_card";
 import Caption from "../../pb_caption/_caption";
 import Flex from "../../pb_flex/_flex";
 import FlexItem from "../../pb_flex/_flex_item";
-import Dropdown from "../../pb_dropdown/_dropdown";
-import DropdownContainer from "../../pb_dropdown/subcomponents/DropdownContainer";
-import DropdownTrigger from "../../pb_dropdown/subcomponents/DropdownTrigger";
-import Icon from "../../pb_icon/_icon";
-import Checkbox from "../../pb_checkbox/_checkbox";
-import SectionSeparator from "../../pb_section_separator/_section_separator";
-import Tooltip from "../../pb_tooltip/_tooltip";
-
-import {
-  showActionBar,
-  hideActionBar,
-} from "../Utilities/ActionBarAnimationHelper";
-import { GenericObject } from "../../types";
+import { showActionBar, hideActionBar } from "../Utilities/ActionBarAnimationHelper";
 
 interface TableActionBarProps {
-  isVisible: boolean | GenericObject | undefined;
+  isVisible: boolean;
   selectedCount: number;
   actions?: React.ReactNode[] | React.ReactNode;
-  type?: string;
-}
-
-interface VisibilityNode {
-  id?: string | undefined;
-  label?: string | undefined;
-  children?: VisibilityNode[];
 }
 
 const TableActionBar: React.FC<TableActionBarProps> = ({
   isVisible,
   selectedCount,
-  actions,
-  type = "row-selection",
+  actions
 }) => {
   const cardRef = useRef(null);
-  const { table, columnVisibilityControl, columnDefinitions } =
-    useContext(AdvancedTableContext);
-
-  // ----------- Column visibility logic -----------
-  const includeIds = columnVisibilityControl?.includeIds;
-  const firstLeafId = table.getAllLeafColumns()[0]?.id;
-  // Get the first leaf column ID to exclude it from the visibility tree
-  // This is to avoid showing the first column in the dropdown
-  // as toggling it's visibility breaks the expanded row functionality
-  const tree = buildVisibilityTree(columnDefinitions, includeIds).filter(node => node.id !== firstLeafId);
-
-  const renderLeaf = (id: string, label: string) => {
-    const col   = table.getColumn(id);
-    const show  = col.getIsVisible();
-
-    return (
-      <Checkbox
-          checked={show}
-          key={id}
-          onChange={() => col.toggleVisibility()}
-          paddingBottom="xs"
-          text={label}
-      />
-    );
-  };
-
-  const gatherLeafIds = (node: VisibilityNode): string[] =>
-    node.children && node.children.length
-      ? node.children.flatMap(gatherLeafIds)
-      : node.id
-      ? [node.id]
-      : [];
-
-  const renderGroup = (node: VisibilityNode ) => {
-     const leaves = gatherLeafIds(node);
-    const visibleArray   = leaves.map((id) => table.getColumn(id).getIsVisible());
-    const allOn    = visibleArray.every(Boolean);
-    const someOn   = visibleArray.some(Boolean);
-
-    return (
-      <>
-        <Checkbox
-            checked={allOn}
-            indeterminate={!allOn && someOn}
-            onChange={() =>
-              leaves.forEach((id) =>
-                table.getColumn(id).toggleVisibility(!allOn),
-              )
-            }
-            paddingBottom="xs"
-            text={node.label}
-        />
-        <Flex flexDirection="column" 
-            paddingLeft="lg"
-        >
-          {node?.children?.map((child) =>
-            child.children ? renderGroup(child) : renderLeaf(child.id, child.label),
-          )}
-        </Flex>
-      </>
-    );
-  };
-// ------------ End of column visibility logic --------
 
   useEffect(() => {
-    if (cardRef.current && type === "row-selection") {
+    if (cardRef.current) {
       if (isVisible) {
         showActionBar(cardRef.current);
       } else {
@@ -118,68 +31,22 @@ const TableActionBar: React.FC<TableActionBarProps> = ({
   return (
     <Card
         borderNone={!isVisible}
-        className={`${
-          isVisible && "show-action-card row-selection-actions-card"
-        }`}
+        className={`${isVisible && "show-action-card row-selection-actions-card"}`}
         htmlOptions={{ ref: cardRef as any }}
         padding={`${isVisible ? "xs" : "none"}`}
     >
       <Flex
           alignItems="center"
-          justify={type === "row-selection" ? "between" : "end"}
+          justify="between"
       >
-        {type === "row-selection" ? (
-          <>
-            <Caption color="light" 
-                paddingLeft="xs" 
-                size="xs"
-            >
-              {selectedCount} Selected
-            </Caption>
-            <FlexItem>{actions}</FlexItem>
-          </>
-        ) : (
-          <Dropdown
-              className="column-visibility-dropdown-wrapper"
-              options={columnDefinitions}
-          >
-            <DropdownTrigger>
-            <Tooltip 
-                placement='top' 
-                text="Column Configuration" 
-                zIndex={10}
-            >
-                <Icon 
-                    color="primary" 
-                    cursor="pointer" 
-                    icon="sliders-h" 
-                />
-            </Tooltip>
-            </DropdownTrigger>
-            <DropdownContainer
-                className="column-visibility-dropdown"
-                paddingTop="sm"
-            >
-              <>
-              <Caption 
-                  paddingBottom="sm" 
-                  text="Columns Config"
-                  textAlign="center" 
-              />
-              <SectionSeparator paddingBottom="xs" />
-              {tree.map((node: VisibilityNode) => (
-                <Flex cursor="pointer" 
-                    flexDirection="column" 
-                    key={node.id}
-                    paddingX="xs"
-                >
-                  {node.children ? renderGroup(node) : renderLeaf(node.id, node.label)}
-                </Flex>
-              ))}
-              </>
-            </DropdownContainer>
-          </Dropdown>
-        )}
+        <Caption
+            color="light"
+            paddingLeft="xs"
+            size="xs"
+        >
+          {selectedCount} Selected
+        </Caption>
+        <FlexItem>{actions}</FlexItem>
       </Flex>
     </Card>
   );

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

@@ -79,26 +79,9 @@ export const TableHeaderCell = ({
   header?.column.getLeafColumns().length === 1 &&
   header?.column.getLeafColumns()[0].id === header.column.id
 
-  const columnHasVisibleLeaf = (col: any): boolean =>
-    col.getIsVisible?.() ||
-    (Array.isArray(col.columns) &&
-      col.columns.some((child: any) => columnHasVisibleLeaf(child)));
-      
-   // Check on column position in stack + visibility to add the vertical border 
-  const isLastHeaderCell = (() => {
-    if (!header) return false;
-  
-    if (header.colSpan > 1 && header.column.parent !== undefined) return true;
-  
-    const parent = header.column.parent;
-  
-    if (!parent) {
-      const topHeaders = table?.getHeaderGroups()[0].headers.filter((h: any) => columnHasVisibleLeaf(h.column));
-      return topHeaders?.at(-1)?.id === header.id;
-    }
-    const visibleSiblings = parent.columns.filter(columnHasVisibleLeaf);
-    return visibleSiblings.at(-1) === header.column;
-  })();
+  const isLastHeaderCell =
+    header?.column.parent?.columns.at(-1) === header?.column ||
+    (header?.colSpan > 1 && header?.column.parent !== undefined);
  
 const cellClassName = classnames(
   "table-header-cells",

data/app/pb_kits/playbook/pb_advanced_table/Hooks/useTableState.ts

@@ -26,8 +26,6 @@ interface UseTableStateProps {
   virtualizedRows?: boolean;
   tableOptions?: GenericObject;
   onRowSelectionChange?: (arg: RowSelectionState) => void;
-  columnVisibilityControl?: GenericObject;
-
 }
 
 export function useTableState({
@@ -42,19 +40,16 @@ export function useTableState({
   pagination = false,
   paginationProps,
   virtualizedRows = false,
-  tableOptions,
-  columnVisibilityControl
+  tableOptions
 }: UseTableStateProps) {
   // Create a local state for expanded and setExpanded if expandedControl not used
   const [localExpanded, setLocalExpanded] = useState({});
   const [loadingStateRowCount, setLoadingStateRowCount] = useState(initialLoadingRowsCount);
   const [rowSelection, setRowSelection] = useState<RowSelectionState>({});
-  const [localColumnVisibility, setLocalColumnVisibility] = useState({});
+
   // Determine whether to use the prop or the local state
   const expanded = expandedControl ? expandedControl.value : localExpanded;
   const setExpanded = expandedControl ? expandedControl.onChange : setLocalExpanded;
-  const columnVisibility = (columnVisibilityControl && columnVisibilityControl.value) ? columnVisibilityControl.value : localColumnVisibility;
-  const setColumnVisibility = (columnVisibilityControl && columnVisibilityControl.onChange) ? columnVisibilityControl.onChange : setLocalColumnVisibility;
 
   // Virtualized data handling (chunked loading)
   const fetchSize = 20; // Number of rows per "page"
@@ -109,21 +104,17 @@ export function useTableState({
   }]), [columnDefinitions, sortControl]);
 
   // Custom state based on features enabled
-  const customState = useCallback(() => ({
-    state: {
-      expanded,
-      ...(sortControl     && { sorting }),
-      ...(selectableRows  && { rowSelection }),
-      ...(columnVisibility && { columnVisibility }),
-    },
-  }), [
-    expanded,
-    sortControl,
-    sorting,
-    selectableRows,
-    rowSelection,
-    columnVisibility,
-  ]);
+  const customState = useCallback(() => {
+    if (sortControl && selectableRows) {
+      return { state: { expanded, sorting, rowSelection } };
+    } else if (sortControl) {
+      return { state: { expanded, sorting } };
+    } else if (selectableRows) {
+      return { state: { expanded, rowSelection } };
+    } else {
+      return { state: { expanded } };
+    }
+  }, [expanded, rowSelection, sortControl, selectableRows, sorting]);
 
   // Pagination configuration
   const paginationInitializer = useMemo(() => {
@@ -154,7 +145,6 @@ export function useTableState({
     sortDescFirst: true,
     onRowSelectionChange: setRowSelection,
     getRowId: selectableRows ? row => row.id : undefined,
-    onColumnVisibilityChange: setColumnVisibility,
     meta: {
       columnDefinitions
     },

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

@@ -53,15 +53,6 @@
     width: 100%;
   }
 
-  .column-visibility-dropdown-wrapper {
-    position: unset !important;
-  }
-  .column-visibility-dropdown {
-    width: unset !important;
-    right: $space_xxs;
-    text-align: left;
-  }
-
   // Virtualized table styles
   .virtualized-table-row {
     display: table !important;

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

@@ -35,7 +35,6 @@ type AdvancedTableProps = {
   className?: string
   columnDefinitions: GenericObject[]
   columnGroupBorderColor?: "text_lt_default" | "text_lt_light" | "text_lt_lighter" | "text_dk_default" | "text_dk_light" | "text_dk_lighter"
-  columnVisibilityControl?: GenericObject
   dark?: boolean
   data?: { [key: string]: string }
   enableToggleExpansion?: "all" | "header" | "none"
@@ -74,7 +73,6 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     className,
     columnDefinitions,
     columnGroupBorderColor,
-    columnVisibilityControl,
     dark = false,
     data = {},
     enableToggleExpansion = "header",
@@ -134,8 +132,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     paginationProps,
     virtualizedRows,
     tableOptions,
-    onRowSelectionChange,
-    columnVisibilityControl,
+    onRowSelectionChange
   });
 
   // Initialize table actions
@@ -255,7 +252,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     : {};
 
   // Visibility flag for action bar
-  const isActionBarVisible = (selectableRows && showActionsBar && selectedRowsLength > 0) || columnVisibilityControl;
+  const isActionBarVisible = selectableRows && showActionsBar && selectedRowsLength > 0;
 
   return (
     <>
@@ -289,7 +286,6 @@ const AdvancedTable = (props: AdvancedTableProps) => {
         <AdvancedTableProvider
             columnDefinitions={columnDefinitions}
             columnGroupBorderColor={columnGroupBorderColor}
-            columnVisibilityControl={columnVisibilityControl}
             enableToggleExpansion={enableToggleExpansion}
             enableVirtualization={virtualizedRows}
             expandByDepth={expandByDepth}
@@ -320,7 +316,6 @@ const AdvancedTable = (props: AdvancedTableProps) => {
                 actions={actions}
                 isVisible={isActionBarVisible}
                 selectedCount={selectedRowsLength}
-                type={columnVisibilityControl ? "column-visibility" : "row-selection"}
             />
 
             {/* Main Table */}

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

@@ -47,7 +47,3 @@ examples:
   - advanced_table_selectable_rows_header: Selectable Rows (No Actions Bar)
   - advanced_table_inline_editing: Inline Cell Editing
   - advanced_table_fullscreen: Fullscreen
-  - advanced_table_column_visibility: Column Visibility Control
-  - advanced_table_column_visibility_with_state: Column Visibility Control With State
-  - advanced_table_column_visibility_custom: Column Visibility Control with Custom Dropdown
-  - advanced_table_column_visibility_multi: Column Visibility Control with Multi-Header Columns

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

@@ -27,8 +27,4 @@ export { default as AdvancedTableStickyColumns } from './_advanced_table_sticky_
 export { default as AdvancedTableStickyHeader } from './_advanced_table_sticky_header.jsx'
 export { default as AdvancedTableStickyColumnsAndHeader } from './_advanced_table_sticky_columns_and_header.jsx'
 export { default as AdvancedTableExpandByDepth } from './_advanced_table_expand_by_depth.jsx'
-export { default as AdvancedTableColumnBorderColor} from './_advanced_table_column_border_color.jsx'
-export { default as AdvancedTableColumnVisibility } from './_advanced_table_column_visibility.jsx'
-export { default as AdvancedTableColumnVisibilityCustom } from './_advanced_table_column_visibility_custom.jsx'
-export { default as AdvancedTableColumnVisibilityMulti } from './_advanced_table_column_visibility_multi.jsx'
-export { default as AdvancedTableColumnVisibilityWithState } from './_advanced_table_column_visibility_with_state.jsx'
+export { default as AdvancedTableColumnBorderColor} from './_advanced_table_column_border_color.jsx'

data/app/pb_kits/playbook/pb_advanced_table/scss_partials/advanced_table_sticky_mixin.scss

@@ -77,7 +77,6 @@
     top: 0;
     left: 0;
     border-radius: unset;
-    z-index: 5;
   }
 
   .checkbox-cell {

data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownContainer.tsx

@@ -6,7 +6,7 @@ import {
   buildDataProps,
   buildHtmlProps
 } from "../../utilities/props";
-import { globalProps, GlobalProps } from "../../utilities/globalProps";
+import { globalProps } from "../../utilities/globalProps";
 
 import DropdownContext from "../context";
 
@@ -24,7 +24,7 @@ type DropdownContainerProps = {
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string;
   searchbar?: boolean;
-} & GlobalProps;
+};
 
 const DropdownContainer = (props: DropdownContainerProps) => {
   const {

data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.scss

@@ -42,7 +42,7 @@ $flag-min-resolution: 192dpi;
   .iti__country-list {
     min-width: $dropdown-min-width;
   }
-  // iti-spacer-horizontal's default is 8px, or $space_xs 
+  // iti-spacer-horizontal's default is 8px, or $space_xs
   .iti__country-list .iti__flag, .iti__country-name {
     margin-right: $space_xs;
   }
@@ -60,7 +60,7 @@ $flag-min-resolution: 192dpi;
     color: $focus_input_light;
   }
 
-  .dropdown_open {
+  .dropdown_open:not(.error) {
     .text_input {
       border-color: $primary !important;
     }
@@ -76,7 +76,7 @@ $flag-min-resolution: 192dpi;
   }
 
   .iti__divider {
-    border-bottom: 1px solid $border_light !important;  
+    border-bottom: 1px solid $border_light !important;
   }
 
   .iti__selected-country-primary {
@@ -96,7 +96,7 @@ $flag-min-resolution: 192dpi;
     justify-content: center;
     align-items: center;
     border-width: 0;
-    border-radius: $space_xxs; 
+    border-radius: $space_xxs;
 
     &[aria-expanded="true"] {
       color: $primary_action;
@@ -199,7 +199,7 @@ $flag-min-resolution: 192dpi;
   }
 
   .iti__dropdown-content {
-    border-radius: $space_xs; 
+    border-radius: $space_xs;
     border: 1px solid $border_light !important;
     position: absolute;
     top: 100%;
@@ -228,13 +228,13 @@ $flag-min-resolution: 192dpi;
     }
 
     .iti__dropdown-content {
-      border-radius: $space_xs; 
+      border-radius: $space_xs;
       border: 1px solid $border_dark !important;
       .iti__search-input {
         background-color: $bg_dark_card;
         &:hover {
           background-color: $bg_dark_card;
-        }      
+        }
         &:active,
         &:focus {
           background-color: $card_dark;
@@ -243,7 +243,7 @@ $flag-min-resolution: 192dpi;
     }
 
     .iti__divider {
-      border-bottom: 1px solid $border_dark !important;  
+      border-bottom: 1px solid $border_dark !important;
     }
 
     .iti__country-list {
@@ -278,7 +278,7 @@ $flag-min-resolution: 192dpi;
       color: $white;
     }
   }
-  
+
   @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: $flag-min-resolution) {
     .iti__flag {
       background-image: url("https://unpkg.com/intl-tel-input@24.6.0/build/img/flags@2x.png");

data/app/pb_kits/playbook/pb_section_separator/_section_separator.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import classnames from 'classnames'
 
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
-import { globalProps, globalInlineProps, GlobalProps } from '../utilities/globalProps'
+import { globalProps, globalInlineProps } from '../utilities/globalProps'
 
 import Caption from '../pb_caption/_caption'
 
@@ -19,7 +19,7 @@ type SectionSeparatorProps = {
   orientation?: "horizontal" | "vertical",
   text?: string,
   variant?: "card" | "background",
-} & GlobalProps
+}
 
 const SectionSeparator = (props: SectionSeparatorProps): React.ReactElement => {
   const {

data/app/pb_kits/playbook/pb_text_input/_text_input.scss

@@ -71,7 +71,8 @@
     }
     &.error {
       .text_input_wrapper {
-        input,
+        // The `:not` here prevents error styling from affecting the country search input in the Phone Number Input Kit.
+        input:not(.iti__search-input),
         .text_input {
           border-color: $error_dark;
         }
@@ -102,7 +103,8 @@
       [class*="pb_body_kit"] {
         margin-top: $space_xs / 2;
       }
-      input,
+      // The `:not` here prevents error styling from affecting the country search input in the Phone Number Input Kit.
+      input:not(.iti__search-input),
       .text_input {
         border-color: $error;
       }