playbook_ui 14.22.0.pre.alpha.PLAY2254datepickerdefaultdatenullvalueturbo8533 → 14.22.0.pre.alpha.customheaderat8564

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 567b391c419da9e3cf4d19032b27f7a6263ae4e1eaa405478f7d898346615a51
-  data.tar.gz: d84820b333cf1f164fdb1b4b36b117641704faef98f4536ee6642279a9299789
+  metadata.gz: ae6b3ef179ba514261a9c3f24c44b3609980ad8295193eca7bf5ea78599e3f32
+  data.tar.gz: 59f4da05e7dc18142518d658c9dcb6e02938972abce9ca14af52a725839bf150
 SHA512:
-  metadata.gz: e12362bbf552aca4ac900aac3ca3099977ba55ce61d3598c9a31dcb0e1e2747b8cba83ec688311b135c38ae8728d0be67c783a0d6d6f2987444cb01d7085ce18
-  data.tar.gz: e0e3390a30724e0c4538674a071f04f15b4bbb6c0787f9efac4d71b8d09a85812dac0c298cb2db3f82eeb02af958e980da4b44fcf3b9e9a1efd7847df7d80468
+  metadata.gz: e891d0c03d22b2b4d0ae5faeac636fb884e54619f00b236a6cba2988a4432880f305f1d894f06005c4aa45dfefd83a440bf13395d43303cb875d129a140b6d24
+  data.tar.gz: 72d84a27a4f5ec1c18d7f7b1da0d093336282250ebf56351639b7da26ee64593ae9ac79caa56a8a15df148e7091642afb56f390860a9a97c095c6e964128b178

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

@@ -87,7 +87,7 @@ export function useTableState({
       // Handle grouped columns
       if (column.columns && column.columns.length > 0) {
         return {
-          header: column.label || "",
+          header: column.header || column.label || "",
           columns: buildColumns(column.columns, false),
         };
       }
@@ -95,7 +95,7 @@ export function useTableState({
       // Define the base column structure
       const columnStructure = {
         ...columnHelper.accessor(column.accessor, {
-          header: column.label || "",
+          header: column.header ?? column.label ?? "",
         }),
       };
 

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

@@ -189,6 +189,11 @@
         box-sizing: border-box !important;
       }
     }
+    // Fixes for tooltip picking up th styling from Table kit
+    .pb_tooltip_kit {
+      font-weight: unset;
+      text-transform: unset;
+    }
   }
 
   .pb_advanced_table_body {

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_with_custom_header.jsx

@@ -0,0 +1,69 @@
+import React from "react"
+import AdvancedTable from '../../pb_advanced_table/_advanced_table'
+import Icon from "../../pb_icon/_icon"
+import Flex from "../../pb_flex/_flex"
+import Caption from "../../pb_caption/_caption"
+import Tooltip from "../../pb_tooltip/_tooltip"
+import MOCK_DATA from "./advanced_table_mock_data.json"
+
+const AdvancedTableWithCustomHeader = (props) => {
+  const columnDefinitions = [
+    {
+      accessor: "year",
+      label: "Year",
+      cellAccessors: ["quarter", "month", "day"],
+    },
+    {
+      accessor: "newEnrollments",
+      label: "New Enrollments",
+      header: () => (
+        <Flex alignItems="center" 
+            justifyContent="center"
+        >
+          <Caption marginRight="xs">New Enrollments</Caption>
+          <Tooltip placement="top" 
+              text="Whoa. I'm a Tooltip" 
+              zIndex={10}
+          >
+            <Icon cursor="pointer" 
+                icon="info"
+                size="xs" 
+            />
+          </Tooltip>
+        </Flex>
+      ),
+    },
+    {
+      accessor: "scheduledMeetings",
+      label: "Scheduled Meetings",
+    },
+    {
+      accessor: "attendanceRate",
+      label: "Attendance Rate",
+    },
+    {
+      accessor: "completedClasses",
+      label: "Completed Classes",
+    },
+    {
+      accessor: "classCompletionRate",
+      label: "Class Completion Rate",
+    },
+    {
+      accessor: "graduatedStudents",
+      label: "Graduated Students",
+    },
+  ];
+
+  return (
+    <div>
+      <AdvancedTable
+          columnDefinitions={columnDefinitions}
+          tableData={MOCK_DATA}
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default AdvancedTableWithCustomHeader

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_with_custom_header.md

@@ -0,0 +1 @@
+The optional `header` key/value pair can be used within `columnDefinitions` to render a custom header. This example shows an Icon and Tooltip being used but other kits can be used as well. 

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

@@ -40,6 +40,7 @@ examples:
   - advanced_table_inline_row_loading: Inline Row Loading
   - advanced_table_responsive: Responsive Tables
   - advanced_table_custom_cell: Custom Components for Cells
+  - advanced_table_with_custom_header: Custom Header Cell
   - advanced_table_pagination: Pagination
   - advanced_table_pagination_with_props: Pagination Props
   - advanced_table_column_headers: Multi-Header Columns

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

@@ -38,3 +38,4 @@ export { default as AdvancedTableRowStyling } from './_advanced_table_row_stylin
 export { default as AdvancedTableColumnStyling } from './_advanced_table_column_styling.jsx'
 export { default as AdvancedTableColumnStylingColumnHeaders } from './_advanced_table_column_styling_column_headers.jsx'
 export { default as AdvancedTableInfiniteScroll} from './_advanced_table_infinite_scroll.jsx'
+export {default as AdvancedTableWithCustomHeader} from './_advanced_table_with_custom_header.jsx'

data/app/pb_kits/playbook/pb_date_picker/date_picker_helper.ts

@@ -275,7 +275,7 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
         picker.monthsDropdownContainer.value = picker.currentMonth
 
         /* Reset date picker to default value on form.reset() */
-        if (defaultDate !== '' && defaultDate !== null && defaultDate !== undefined) {
+        if (defaultDate){
           picker.setDate(defaultDate)
           yearChangeHook(picker)
         }

data/dist/chunks/{_typeahead-BszXPiWi.js → _typeahead-B7FRYVtS.js}

@@ -1,4 +1,4 @@
-import{jsx as jsx$1,Fragment,jsxs}from"react/jsx-runtime";import*as React from"react";import React__default,{createContext,useReducer,useEffect,useMemo,useContext,createElement,useRef,forwardRef,useState,useLayoutEffect,useCallback,useImperativeHandle,Component,Fragment as Fragment$1}from"react";import{g as getDefaultExportFromCjs,v as filter,w as omit,s as noop$2,u as useCollapsible,x as createPopper,y as uniqueId,z as get,A as flip$2,B as offset$2,C as shift$2,E as arrow$3,F as computePosition$1,G as createCoords$1,H as round$1,I as max$1,J as min$1,K as rectToClientRect$1,k as getAllIcons,t as colors$1,L as highchartsTheme,M as merge,N as highchartsDarkTheme,O as getAugmentedNamespace,Q as typography,S as cloneDeep,n as isEmpty$1,T as isString}from"./lib-BUnAetLK.js";import*as ReactDOM from"react-dom";import ReactDOM__default,{createPortal}from"react-dom";import{TrixEditor}from"react-trix";import Trix from"trix";import require$$0 from"react-is";const initialState={items:[],dragData:{id:"",initialGroup:""},isDragging:"",activeContainer:""};const reducer=(state,action)=>{switch(action.type){case"SET_ITEMS":return{...state,items:action.payload};case"SET_DRAG_DATA":return{...state,dragData:action.payload};case"SET_IS_DRAGGING":return{...state,isDragging:action.payload};case"SET_ACTIVE_CONTAINER":return{...state,activeContainer:action.payload};case"CHANGE_CATEGORY":return{...state,items:state.items.map((item=>item.id===action.payload.itemId?{...item,container:action.payload.container}:item))};case"REORDER_ITEMS":{const{dragId:dragId,targetId:targetId}=action.payload;const newItems=[...state.items];const draggedItem=newItems.find((item=>item.id===dragId));const draggedIndex=newItems.indexOf(draggedItem);const targetIndex=newItems.findIndex((item=>item.id===targetId));newItems.splice(draggedIndex,1);newItems.splice(targetIndex,0,draggedItem);return{...state,items:newItems}}default:return state}};const DragContext=createContext({});const DraggableContext=()=>useContext(DragContext);const DraggableProvider=({children:children,initialItems:initialItems,onReorder:onReorder,onDragStart:onDragStart,onDragEnter:onDragEnter,onDragEnd:onDragEnd,onDrop:onDrop,onDragOver:onDragOver,dropZone:dropZone={type:"ghost",color:"neutral",direction:"vertical"}})=>{const[state,dispatch]=useReducer(reducer,initialState);let dropZoneType="ghost";let dropZoneColor="neutral";let dropZoneDirection="vertical";if(typeof dropZone==="string"){dropZoneType=dropZone}else{dropZoneType=dropZone.type||"ghost";dropZoneColor=dropZone.type==="line"?dropZone.color||"primary":dropZone.color||"neutral";if(dropZoneType==="line"){dropZoneDirection=dropZone.direction||"vertical"}}useEffect((()=>{dispatch({type:"SET_ITEMS",payload:initialItems})}),[initialItems]);useEffect((()=>{onReorder(state.items)}),[state.items]);const handleDragStart=(id,container)=>{dispatch({type:"SET_DRAG_DATA",payload:{id:id,initialGroup:container}});dispatch({type:"SET_IS_DRAGGING",payload:id});if(onDragStart)onDragStart(id,container)};const handleDragEnter=(id,container)=>{if(state.dragData.id!==id){dispatch({type:"REORDER_ITEMS",payload:{dragId:state.dragData.id,targetId:id}});dispatch({type:"SET_DRAG_DATA",payload:{id:state.dragData.id,initialGroup:container}})}if(onDragEnter)onDragEnter(id,container)};const handleDragEnd=()=>{dispatch({type:"SET_IS_DRAGGING",payload:""});dispatch({type:"SET_ACTIVE_CONTAINER",payload:""});if(onDragEnd)onDragEnd()};const changeCategory=(itemId,container)=>{dispatch({type:"CHANGE_CATEGORY",payload:{itemId:itemId,container:container}})};const handleDrop=container=>{dispatch({type:"SET_IS_DRAGGING",payload:""});dispatch({type:"SET_ACTIVE_CONTAINER",payload:""});changeCategory(state.dragData.id,container);if(onDrop)onDrop(container)};const handleDragOver=(e,container)=>{e.preventDefault();dispatch({type:"SET_ACTIVE_CONTAINER",payload:container});if(onDragOver)onDragOver(e,container)};const contextValue=useMemo((()=>({items:state.items,dragData:state.dragData,isDragging:state.isDragging,activeContainer:state.activeContainer,dropZone:dropZoneType,dropZoneColor:dropZoneColor,...dropZoneType==="line"?{direction:dropZoneDirection}:{},handleDragStart:handleDragStart,handleDragEnter:handleDragEnter,handleDragEnd:handleDragEnd,handleDrop:handleDrop,handleDragOver:handleDragOver})),[state,dropZoneType,dropZoneColor,dropZoneDirection]);return jsx$1(DragContext.Provider,{value:contextValue,children:children})};var classnames$1={exports:{}};
+import{jsx as jsx$1,Fragment,jsxs}from"react/jsx-runtime";import*as React from"react";import React__default,{createContext,useReducer,useEffect,useMemo,useContext,createElement,useRef,forwardRef,useState,useLayoutEffect,useCallback,useImperativeHandle,Component,Fragment as Fragment$1}from"react";import{g as getDefaultExportFromCjs,v as filter,w as omit,s as noop$2,u as useCollapsible,x as createPopper,y as uniqueId,z as get,A as flip$2,B as offset$2,C as shift$2,E as arrow$3,F as computePosition$1,G as createCoords$1,H as round$1,I as max$1,J as min$1,K as rectToClientRect$1,k as getAllIcons,t as colors$1,L as highchartsTheme,M as merge,N as highchartsDarkTheme,O as getAugmentedNamespace,Q as typography,S as cloneDeep,n as isEmpty$1,T as isString}from"./lib-Carqm8Ip.js";import*as ReactDOM from"react-dom";import ReactDOM__default,{createPortal}from"react-dom";import{TrixEditor}from"react-trix";import Trix from"trix";import require$$0 from"react-is";const initialState={items:[],dragData:{id:"",initialGroup:""},isDragging:"",activeContainer:""};const reducer=(state,action)=>{switch(action.type){case"SET_ITEMS":return{...state,items:action.payload};case"SET_DRAG_DATA":return{...state,dragData:action.payload};case"SET_IS_DRAGGING":return{...state,isDragging:action.payload};case"SET_ACTIVE_CONTAINER":return{...state,activeContainer:action.payload};case"CHANGE_CATEGORY":return{...state,items:state.items.map((item=>item.id===action.payload.itemId?{...item,container:action.payload.container}:item))};case"REORDER_ITEMS":{const{dragId:dragId,targetId:targetId}=action.payload;const newItems=[...state.items];const draggedItem=newItems.find((item=>item.id===dragId));const draggedIndex=newItems.indexOf(draggedItem);const targetIndex=newItems.findIndex((item=>item.id===targetId));newItems.splice(draggedIndex,1);newItems.splice(targetIndex,0,draggedItem);return{...state,items:newItems}}default:return state}};const DragContext=createContext({});const DraggableContext=()=>useContext(DragContext);const DraggableProvider=({children:children,initialItems:initialItems,onReorder:onReorder,onDragStart:onDragStart,onDragEnter:onDragEnter,onDragEnd:onDragEnd,onDrop:onDrop,onDragOver:onDragOver,dropZone:dropZone={type:"ghost",color:"neutral",direction:"vertical"}})=>{const[state,dispatch]=useReducer(reducer,initialState);let dropZoneType="ghost";let dropZoneColor="neutral";let dropZoneDirection="vertical";if(typeof dropZone==="string"){dropZoneType=dropZone}else{dropZoneType=dropZone.type||"ghost";dropZoneColor=dropZone.type==="line"?dropZone.color||"primary":dropZone.color||"neutral";if(dropZoneType==="line"){dropZoneDirection=dropZone.direction||"vertical"}}useEffect((()=>{dispatch({type:"SET_ITEMS",payload:initialItems})}),[initialItems]);useEffect((()=>{onReorder(state.items)}),[state.items]);const handleDragStart=(id,container)=>{dispatch({type:"SET_DRAG_DATA",payload:{id:id,initialGroup:container}});dispatch({type:"SET_IS_DRAGGING",payload:id});if(onDragStart)onDragStart(id,container)};const handleDragEnter=(id,container)=>{if(state.dragData.id!==id){dispatch({type:"REORDER_ITEMS",payload:{dragId:state.dragData.id,targetId:id}});dispatch({type:"SET_DRAG_DATA",payload:{id:state.dragData.id,initialGroup:container}})}if(onDragEnter)onDragEnter(id,container)};const handleDragEnd=()=>{dispatch({type:"SET_IS_DRAGGING",payload:""});dispatch({type:"SET_ACTIVE_CONTAINER",payload:""});if(onDragEnd)onDragEnd()};const changeCategory=(itemId,container)=>{dispatch({type:"CHANGE_CATEGORY",payload:{itemId:itemId,container:container}})};const handleDrop=container=>{dispatch({type:"SET_IS_DRAGGING",payload:""});dispatch({type:"SET_ACTIVE_CONTAINER",payload:""});changeCategory(state.dragData.id,container);if(onDrop)onDrop(container)};const handleDragOver=(e,container)=>{e.preventDefault();dispatch({type:"SET_ACTIVE_CONTAINER",payload:container});if(onDragOver)onDragOver(e,container)};const contextValue=useMemo((()=>({items:state.items,dragData:state.dragData,isDragging:state.isDragging,activeContainer:state.activeContainer,dropZone:dropZoneType,dropZoneColor:dropZoneColor,...dropZoneType==="line"?{direction:dropZoneDirection}:{},handleDragStart:handleDragStart,handleDragEnter:handleDragEnter,handleDragEnd:handleDragEnd,handleDrop:handleDrop,handleDragOver:handleDragOver})),[state,dropZoneType,dropZoneColor,dropZoneDirection]);return jsx$1(DragContext.Provider,{value:contextValue,children:children})};var classnames$1={exports:{}};
 /*!
 	Copyright (c) 2018 Jed Watson.
 	Licensed under the MIT License (MIT), see