playbook_ui 14.20.0.pre.alpha.PLAY2178advancedtablerowpinning7983 → 14.20.0.pre.alpha.PLAY2214checkboxhiddeninput8052
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/pb_advanced_table/index.js +2 -0
- data/app/pb_kits/playbook/pb_checkbox/checkbox.html.erb +4 -11
- data/app/pb_kits/playbook/pb_checkbox/checkbox.rb +28 -7
- data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_custom.html.erb +1 -0
- data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_custom_rails.md +1 -0
- data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_form.html.erb +22 -0
- data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_form.md +5 -0
- data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_indeterminate.html.erb +2 -48
- data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_indeterminate_rails.md +1 -0
- data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_options.html.erb +1 -0
- data/app/pb_kits/playbook/pb_checkbox/docs/example.yml +1 -0
- data/app/pb_kits/playbook/pb_checkbox/index.js +56 -0
- data/app/pb_kits/playbook/pb_draggable/context/index.tsx +17 -58
- data/app/pb_kits/playbook/pb_dropdown/_dropdown.tsx +12 -3
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_close_on_select.jsx +42 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_close_on_select.md +1 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/index.js +2 -1
- data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownOption.tsx +14 -10
- data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownTrigger.tsx +26 -15
- data/app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.html.erb +1 -1
- data/app/pb_kits/playbook/pb_popover/index.ts +9 -4
- data/app/pb_kits/playbook/pb_table/docs/_table_with_selectable_rows.html.erb +3 -51
- data/app/pb_kits/playbook/pb_table/styles/_mobile_collapse.scss +1 -1
- data/dist/chunks/{_typeahead-CRW6dJbW.js → _typeahead-CoOpeYom.js} +1 -1
- data/dist/chunks/{_weekday_stacked-KnBjAMoL.js → _weekday_stacked-BppvLxTS.js} +2 -2
- data/dist/chunks/{lib-D5R1BjUn.js → lib-D7Va7yqa.js} +1 -1
- data/dist/chunks/{pb_form_validation-BZ2AVAi_.js → pb_form_validation-DSkdRDMf.js} +1 -1
- data/dist/chunks/vendor.js +1 -1
- data/dist/menu.yml +1 -1
- data/dist/playbook-doc.js +1 -1
- data/dist/playbook-rails-react-bindings.js +1 -1
- data/dist/playbook-rails.js +1 -1
- data/dist/playbook.css +1 -1
- data/lib/playbook/version.rb +1 -1
- metadata +13 -6
|
@@ -44,6 +44,7 @@ const DropdownTrigger = (props: DropdownTriggerProps) => {
|
|
|
44
44
|
|
|
45
45
|
const {
|
|
46
46
|
autocomplete,
|
|
47
|
+
closeOnSelection,
|
|
47
48
|
filterItem,
|
|
48
49
|
handleBackspace,
|
|
49
50
|
handleChange,
|
|
@@ -54,6 +55,7 @@ const DropdownTrigger = (props: DropdownTriggerProps) => {
|
|
|
54
55
|
isInputFocused,
|
|
55
56
|
multiSelect,
|
|
56
57
|
selected,
|
|
58
|
+
setIsDropDownClosed,
|
|
57
59
|
setIsInputFocused,
|
|
58
60
|
toggleDropdown,
|
|
59
61
|
} = useContext(DropdownContext);
|
|
@@ -103,11 +105,26 @@ const DropdownTrigger = (props: DropdownTriggerProps) => {
|
|
|
103
105
|
? placeholder
|
|
104
106
|
: "Select...";
|
|
105
107
|
|
|
108
|
+
// Click handler that respects closeOnSelection
|
|
109
|
+
const handleInputClick = (e: React.MouseEvent) => {
|
|
110
|
+
e.stopPropagation(); // keep the wrapper's handler from firing
|
|
111
|
+
if (isDropDownClosed) {
|
|
112
|
+
// Always open if closed
|
|
113
|
+
setIsDropDownClosed(false);
|
|
114
|
+
} else if (!closeOnSelection) {
|
|
115
|
+
// Keep open if closeOnSelection is false
|
|
116
|
+
return;
|
|
117
|
+
} else {
|
|
118
|
+
// Default behavior - toggle
|
|
119
|
+
toggleDropdown();
|
|
120
|
+
}
|
|
121
|
+
};
|
|
122
|
+
|
|
106
123
|
return (
|
|
107
|
-
<div {...ariaProps}
|
|
108
|
-
{...dataProps}
|
|
124
|
+
<div {...ariaProps}
|
|
125
|
+
{...dataProps}
|
|
109
126
|
{...htmlProps}
|
|
110
|
-
className={classes}
|
|
127
|
+
className={classes}
|
|
111
128
|
id={id}
|
|
112
129
|
>
|
|
113
130
|
{
|
|
@@ -145,7 +162,7 @@ const DropdownTrigger = (props: DropdownTriggerProps) => {
|
|
|
145
162
|
{customDisplay ? (
|
|
146
163
|
<Flex align="center">
|
|
147
164
|
{customDisplay}
|
|
148
|
-
<Body dark={dark}
|
|
165
|
+
<Body dark={dark}
|
|
149
166
|
paddingLeft={`${joinedLabels ? "xs" : "none"}`}
|
|
150
167
|
>
|
|
151
168
|
{customDisplayPlaceholder}
|
|
@@ -164,10 +181,7 @@ const DropdownTrigger = (props: DropdownTriggerProps) => {
|
|
|
164
181
|
<input
|
|
165
182
|
className="dropdown_input"
|
|
166
183
|
onChange={handleChange}
|
|
167
|
-
onClick={
|
|
168
|
-
e.stopPropagation();// keep the wrapper’s handler from firing
|
|
169
|
-
toggleDropdown();
|
|
170
|
-
}}
|
|
184
|
+
onClick={handleInputClick}
|
|
171
185
|
onFocus={() => setIsInputFocused(true)}
|
|
172
186
|
onKeyDown={(e) => {
|
|
173
187
|
handleKeyDown(e);
|
|
@@ -186,8 +200,8 @@ const DropdownTrigger = (props: DropdownTriggerProps) => {
|
|
|
186
200
|
)}
|
|
187
201
|
</>
|
|
188
202
|
) : (
|
|
189
|
-
<Body dark={dark}
|
|
190
|
-
text={defaultDisplayPlaceholder}
|
|
203
|
+
<Body dark={dark}
|
|
204
|
+
text={defaultDisplayPlaceholder}
|
|
191
205
|
/>
|
|
192
206
|
)
|
|
193
207
|
)}
|
|
@@ -195,10 +209,7 @@ const DropdownTrigger = (props: DropdownTriggerProps) => {
|
|
|
195
209
|
<input
|
|
196
210
|
className="dropdown_input"
|
|
197
211
|
onChange={handleChange}
|
|
198
|
-
onClick={
|
|
199
|
-
e.stopPropagation();// keep the wrapper’s handler from firing
|
|
200
|
-
toggleDropdown();
|
|
201
|
-
}}
|
|
212
|
+
onClick={handleInputClick}
|
|
202
213
|
onFocus={() => setIsInputFocused(true)}
|
|
203
214
|
onKeyDown={handleKeyDown}
|
|
204
215
|
placeholder={
|
|
@@ -223,7 +234,7 @@ const DropdownTrigger = (props: DropdownTriggerProps) => {
|
|
|
223
234
|
onClick: (e: Event) => {e.stopPropagation();handleWrapperClick()}
|
|
224
235
|
}}
|
|
225
236
|
key={`${isDropDownClosed ? "chevron-down" : "chevron-up"}`}
|
|
226
|
-
>
|
|
237
|
+
>
|
|
227
238
|
{
|
|
228
239
|
selectedArray.length > 0 && (
|
|
229
240
|
<div onClick={(e)=>{e.stopPropagation();handleBackspace()}}>
|
|
@@ -101,7 +101,7 @@
|
|
|
101
101
|
<%= form.dropdown_field :example_dropdown_validation_multi, props: { label: true, options: example_dropdown_options, multi_select: true, required: true } %>
|
|
102
102
|
<%= form.select :example_select_validation, [ ["Yes", 1], ["No", 2] ], props: { label: true, blank_selection: "Select One...", required: true, validation_message: "Please, select an option." } %>
|
|
103
103
|
<%= form.collection_select :example_collection_select_validation, example_collection, :value, :name, props: { label: true, blank_selection: "Select One...", required: true } %>
|
|
104
|
-
<%= form.check_box :
|
|
104
|
+
<%= form.check_box :example_checkbox_validation, props: { text: "Example Checkbox Validation", label: true, required: true }, checked_value: "1", unchecked_value: "0" %>
|
|
105
105
|
<%= form.date_picker :example_date_picker_2, props: { label: true, required: true, validation_message: "Please, select a date.", allow_input: true } %>
|
|
106
106
|
<%= form.star_rating_field :example_star_rating_validation, props: { variant: "interactive", label: true, required: true } %>
|
|
107
107
|
<%= form.time_zone_select_field :example_time_zone_select, ActiveSupport::TimeZone.us_zones, { default: "Eastern Time (US & Canada)" }, props: { label: true, blank_selection: "Select a Time Zone...", required: true } %>
|
|
@@ -13,19 +13,24 @@ export default class PbPopover extends PbEnhancedElement {
|
|
|
13
13
|
}
|
|
14
14
|
|
|
15
15
|
moveTooltip() {
|
|
16
|
-
let container: HTMLElement | null;
|
|
16
|
+
let container: HTMLElement | null = document.querySelector('body');
|
|
17
17
|
|
|
18
18
|
if (this.appendTo === "parent") {
|
|
19
|
-
container = this.element.parentElement
|
|
19
|
+
container = this.element.parentElement && this.element.parentElement
|
|
20
20
|
} else if (this.appendTo) {
|
|
21
|
-
container = document.querySelector(this.appendTo)
|
|
21
|
+
container = document.querySelector(this.appendTo)
|
|
22
22
|
}
|
|
23
23
|
|
|
24
|
-
|
|
24
|
+
container.appendChild(this.tooltip);
|
|
25
25
|
}
|
|
26
26
|
|
|
27
27
|
connect() {
|
|
28
|
+
if (!this.triggerElement || !this.tooltip) {
|
|
29
|
+
console.warn('Popover requires both trigger and tooltip elements to be defined.')
|
|
30
|
+
return
|
|
31
|
+
}
|
|
28
32
|
this.moveTooltip()
|
|
33
|
+
|
|
29
34
|
this.popper = createPopper (this.triggerElement, this.tooltip, {
|
|
30
35
|
placement: this.position as Placement,
|
|
31
36
|
strategy: 'fixed',
|
|
@@ -18,7 +18,7 @@
|
|
|
18
18
|
checked: true,
|
|
19
19
|
value: "checkbox-value",
|
|
20
20
|
name: "main-checkbox-selectable",
|
|
21
|
-
|
|
21
|
+
indeterminate_main: true,
|
|
22
22
|
id: "checkbox-selectable"
|
|
23
23
|
}) %>
|
|
24
24
|
<% end %>
|
|
@@ -33,7 +33,7 @@
|
|
|
33
33
|
<% checkboxes.each_with_index do |checkbox, index| %>
|
|
34
34
|
<%= pb_rails("table/table_row") do %>
|
|
35
35
|
<%= pb_rails("table/table_cell") do %>
|
|
36
|
-
<%= 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" }) %>
|
|
36
|
+
<%= 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" }) %>
|
|
37
37
|
<% end %>
|
|
38
38
|
<%= pb_rails("table/table_cell") do %>
|
|
39
39
|
<%= pb_rails("image", props: { alt: "picture of a misty forest", size: "xs", url: "https://unsplash.it/500/400/?image=634" }) %>
|
|
@@ -45,52 +45,4 @@
|
|
|
45
45
|
<% end %>
|
|
46
46
|
<% end %>
|
|
47
47
|
<% end %>
|
|
48
|
-
<% end %>
|
|
49
|
-
|
|
50
|
-
<script>
|
|
51
|
-
document.addEventListener('DOMContentLoaded', function() {
|
|
52
|
-
const mainCheckboxWrapper = document.getElementById('checkbox-selectable');
|
|
53
|
-
const mainCheckbox = document.getElementsByName("main-checkbox-selectable")[0];
|
|
54
|
-
const childCheckboxes = document.querySelectorAll('input[type="checkbox"][id$="selectable-checkbox"]');
|
|
55
|
-
const deleteButton = document.getElementById('delete-button');
|
|
56
|
-
|
|
57
|
-
const updateDeleteButton = () => {
|
|
58
|
-
const anyChecked = Array.from(childCheckboxes).some(checkbox => checkbox.checked);
|
|
59
|
-
deleteButton.style.display = anyChecked ? 'block' : 'none';
|
|
60
|
-
};
|
|
61
|
-
|
|
62
|
-
const updateMainCheckbox = () => {
|
|
63
|
-
// Count the number of checked child checkboxes
|
|
64
|
-
const checkedCount = Array.from(childCheckboxes).filter(cb => cb.checked).length;
|
|
65
|
-
// Determine if the main checkbox should be in an indeterminate state
|
|
66
|
-
const indeterminate = checkedCount > 0 && checkedCount < childCheckboxes.length;
|
|
67
|
-
|
|
68
|
-
// Set the main checkbox states
|
|
69
|
-
mainCheckbox.indeterminate = indeterminate;
|
|
70
|
-
mainCheckbox.checked = checkedCount > 0;
|
|
71
|
-
|
|
72
|
-
// Determine the icon class to add and remove based on the number of checked checkboxes
|
|
73
|
-
const iconClassToAdd = checkedCount === 0 ? 'pb_checkbox_checkmark' : 'pb_checkbox_indeterminate';
|
|
74
|
-
const iconClassToRemove = checkedCount === 0 ? 'pb_checkbox_indeterminate' : 'pb_checkbox_checkmark';
|
|
75
|
-
|
|
76
|
-
// Add and remove the icon class to the main checkbox wrapper
|
|
77
|
-
mainCheckboxWrapper.querySelector('[data-pb-checkbox-icon-span]').classList.add(iconClassToAdd);
|
|
78
|
-
mainCheckboxWrapper.querySelector('[data-pb-checkbox-icon-span]').classList.remove(iconClassToRemove);
|
|
79
|
-
|
|
80
|
-
// Toggle the visibility of the checkbox icon based on the indeterminate state
|
|
81
|
-
mainCheckboxWrapper.getElementsByClassName("indeterminate_icon")[0].classList.toggle('hidden', !indeterminate);
|
|
82
|
-
mainCheckboxWrapper.getElementsByClassName("check_icon")[0].classList.toggle('hidden', indeterminate);
|
|
83
|
-
|
|
84
|
-
updateDeleteButton();
|
|
85
|
-
};
|
|
86
|
-
|
|
87
|
-
mainCheckbox.addEventListener('change', function() {
|
|
88
|
-
childCheckboxes.forEach(cb => cb.checked = this.checked);
|
|
89
|
-
updateMainCheckbox();
|
|
90
|
-
});
|
|
91
|
-
|
|
92
|
-
childCheckboxes.forEach(cb => {
|
|
93
|
-
cb.addEventListener('change', updateMainCheckbox);
|
|
94
|
-
});
|
|
95
|
-
});
|
|
96
|
-
</script>
|
|
48
|
+
<% end %>
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
@import "../../pb_caption/caption_mixin";
|
|
4
4
|
|
|
5
5
|
@media only screen and (max-width: $screen-xs-max) {
|
|
6
|
-
[class^=pb_table] {
|
|
6
|
+
[class^=pb_table]:not(.table-responsive-scroll) {
|
|
7
7
|
&.table-sm.table-collapse-sm,
|
|
8
8
|
&.table-md.table-collapse-sm,
|
|
9
9
|
&.table-lg.table-collapse-sm {
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{jsx as jsx$1,Fragment,jsxs}from"react/jsx-runtime";import*as React from"react";import React__default,{createContext,useReducer,
|
|
1
|
+
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:{}};
|
|
2
2
|
/*!
|
|
3
3
|
Copyright (c) 2018 Jed Watson.
|
|
4
4
|
Licensed under the MIT License (MIT), see
|