playbook_ui 14.20.0.pre.alpha.PLAY2140upgraderailsdependency8086 → 14.20.0.pre.alpha.PLAY2170checkboxrailsindeterminatelogicinkitPOC7980

data/app/pb_kits/playbook/pb_table/docs/_table_with_selectable_rows.html.erb

@@ -18,7 +18,7 @@
                     checked: true,
                     value: "checkbox-value",
                     name: "main-checkbox-selectable",
-                    indeterminate_main: true,
+                    indeterminate: true,
                     id: "checkbox-selectable"
                 }) %>
             <% end %>
@@ -33,7 +33,7 @@
         <% checkboxes.each_with_index do |checkbox, index| %>
             <%= pb_rails("table/table_row") do %>
                 <%= pb_rails("table/table_cell") do %>
-                    <%= pb_rails("checkbox", props: { checked: checkbox[:checked], id: "#{checkbox[:id]}-selectable-checkbox", name: "#{checkbox[:id]}-selectable-checkbox", on_change: "updateCheckboxes(#{index})", value: "check-box value", indeterminate_parent: "checkbox-selectable" }) %>
+                    <%= pb_rails("checkbox", props: { checked: checkbox[:checked], id: "#{checkbox[:id]}-selectable-checkbox", name: "#{checkbox[:id]}-selectable-checkbox", on_change: "updateCheckboxes(#{index})", value: "check-box value" }) %>
                 <% end %>
                 <%= pb_rails("table/table_cell") do %>
                     <%= pb_rails("image", props: { alt: "picture of a misty forest", size: "xs", url: "https://unsplash.it/500/400/?image=634" }) %>
@@ -45,4 +45,52 @@
             <% end %>
         <% end %>
     <% end %>
-<% end %>
+<% end %>
+
+<script>
+    document.addEventListener('DOMContentLoaded', function() {
+        const mainCheckboxWrapper = document.getElementById('checkbox-selectable');
+        const mainCheckbox = document.getElementsByName("main-checkbox-selectable")[0];
+        const childCheckboxes = document.querySelectorAll('input[type="checkbox"][id$="selectable-checkbox"]');
+        const deleteButton = document.getElementById('delete-button');
+
+        const updateDeleteButton = () => {
+            const anyChecked = Array.from(childCheckboxes).some(checkbox => checkbox.checked);
+            deleteButton.style.display = anyChecked ? 'block' : 'none';
+        };
+    
+        const updateMainCheckbox = () => {
+          // Count the number of checked child checkboxes
+          const checkedCount = Array.from(childCheckboxes).filter(cb => cb.checked).length;
+          // Determine if the main checkbox should be in an indeterminate state
+          const indeterminate = checkedCount > 0 && checkedCount < childCheckboxes.length;
+          
+          // Set the main checkbox states
+          mainCheckbox.indeterminate = indeterminate;
+          mainCheckbox.checked = checkedCount > 0;
+    
+          // Determine the icon class to add and remove based on the number of checked checkboxes
+          const iconClassToAdd = checkedCount === 0 ? 'pb_checkbox_checkmark' : 'pb_checkbox_indeterminate';
+          const iconClassToRemove = checkedCount === 0 ? 'pb_checkbox_indeterminate' : 'pb_checkbox_checkmark';
+          
+          // Add and remove the icon class to the main checkbox wrapper
+          mainCheckboxWrapper.querySelector('[data-pb-checkbox-icon-span]').classList.add(iconClassToAdd);
+          mainCheckboxWrapper.querySelector('[data-pb-checkbox-icon-span]').classList.remove(iconClassToRemove);
+          
+          // Toggle the visibility of the checkbox icon based on the indeterminate state
+          mainCheckboxWrapper.getElementsByClassName("indeterminate_icon")[0].classList.toggle('hidden', !indeterminate);
+          mainCheckboxWrapper.getElementsByClassName("check_icon")[0].classList.toggle('hidden', indeterminate);
+
+          updateDeleteButton();
+        };
+    
+        mainCheckbox.addEventListener('change', function() {
+          childCheckboxes.forEach(cb => cb.checked = this.checked);
+          updateMainCheckbox();
+        });
+    
+        childCheckboxes.forEach(cb => {
+          cb.addEventListener('change', updateMainCheckbox);
+        });
+    });
+</script>

data/app/pb_kits/playbook/pb_table/styles/_mobile_collapse.scss

@@ -3,7 +3,7 @@
 @import "../../pb_caption/caption_mixin";
 
 @media only screen and (max-width: $screen-xs-max) {
-  [class^=pb_table]:not(.table-responsive-scroll) {
+  [class^=pb_table] {
     &.table-sm.table-collapse-sm,
     &.table-md.table-collapse-sm,
     &.table-lg.table-collapse-sm {

data/dist/chunks/{_typeahead-CoOpeYom.js → _typeahead-CRW6dJbW.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{t as getDefaultExportFromCjs,w as filter,x as omit,r as noop$2,u as useCollapsible,y as createPopper,z as uniqueId,A as get,B as offset$2,C as shift$2,E as flip$2,F as computePosition$1,G as arrow$3,H as createCoords$1,I as round$1,J as max$1,K as min$1,L as rectToClientRect$1,j as getAllIcons,v as commonjsGlobal,s as colors$1,M as highchartsTheme,N as merge,O as highchartsDarkTheme,Q as getAugmentedNamespace,S as typography,T as cloneDeep,m as isEmpty$1,U as isString}from"./lib-D7Va7yqa.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,useRef,useState,useEffect,useMemo,useContext,createElement,forwardRef,useLayoutEffect,useCallback,useImperativeHandle,Component,Fragment as Fragment$1}from"react";import{t as getDefaultExportFromCjs,w as filter,x as omit,r as noop$2,u as useCollapsible,y as createPopper,z as uniqueId,A as get,B as offset$2,C as shift$2,E as flip$2,F as computePosition$1,G as arrow$3,H as createCoords$1,I as round$1,J as max$1,K as min$1,L as rectToClientRect$1,j as getAllIcons,v as commonjsGlobal,s as colors$1,M as highchartsTheme,N as merge,O as highchartsDarkTheme,Q as getAugmentedNamespace,S as typography,T as cloneDeep,m as isEmpty$1,U as isString}from"./lib-D5R1BjUn.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 targetItem=newItems.find((item=>item.id===targetId));if(!draggedItem||!targetItem||draggedItem.container!==targetItem.container){return state}if(dragId===targetId){return state}const draggedIndex=newItems.findIndex((item=>item.id===dragId));const targetIndex=newItems.findIndex((item=>item.id===targetId));if(draggedIndex===-1||targetIndex===-1){return state}newItems.splice(draggedIndex,1);newItems.splice(targetIndex,0,draggedItem);return{...state,items:newItems}}default:return state}};const DragContext=createContext({});const DraggableContext=()=>{const context=useContext(DragContext);if(context===void 0){throw new Error("DraggableContext must be used within a DraggableProvider")}return context};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);const initialItemsRef=useRef(initialItems);const[isDragging,setIsDragging]=useState(false);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});initialItemsRef.current=initialItems}),[initialItems]);useEffect((()=>{if(onReorder){onReorder(state.items)}}),[state.items,onReorder]);const handleDragStart=(id,container)=>{setIsDragging(true);dispatch({type:"SET_DRAG_DATA",payload:{id:id,initialGroup:container}});dispatch({type:"SET_IS_DRAGGING",payload:id});dispatch({type:"SET_ACTIVE_CONTAINER",payload:container});if(onDragStart)onDragStart(id,container)};const handleDragEnter=(id,container)=>{if(!isDragging||container!==state.activeContainer)return;if(state.dragData.id===id)return;const draggedItem=state.items.find((item=>item.id===state.dragData.id));const targetItem=state.items.find((item=>item.id===id));if(!draggedItem||!targetItem||draggedItem.container!==targetItem.container){return}dispatch({type:"REORDER_ITEMS",payload:{dragId:state.dragData.id,targetId:id}});if(onDragEnter)onDragEnter(id,container)};const handleDragEnd=()=>{setIsDragging(false);dispatch({type:"SET_IS_DRAGGING",payload:""});dispatch({type:"SET_ACTIVE_CONTAINER",payload:""});if(onDragEnd)onDragEnd()};const handleDrop=container=>{const draggedItem=state.items.find((item=>item.id===state.dragData.id));if(draggedItem&&draggedItem.container!==container){dispatch({type:"CHANGE_CATEGORY",payload:{itemId:state.dragData.id,container:container}})}dispatch({type:"SET_IS_DRAGGING",payload:""});dispatch({type:"SET_ACTIVE_CONTAINER",payload:""});setIsDragging(false);if(onDrop)onDrop(container)};const handleDragOver=(e,container)=>{e.preventDefault();e.stopPropagation();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,handleDragStart,handleDragEnter,handleDragEnd,handleDrop,handleDragOver]);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