playbook_ui 14.12.0.pre.alpha.PBNTR834advtablemaxHeightstickyheader5932 → 14.12.0.pre.alpha.PBNTR8335887

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.
Files changed (49) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss +1 -52
  3. data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx +0 -3
  4. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props.jsx +0 -1
  5. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_react.md +1 -3
  6. data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +0 -1
  7. data/app/pb_kits/playbook/pb_advanced_table/docs/index.js +1 -2
  8. data/app/pb_kits/playbook/pb_copy_button/_copy_button.scss +1 -2
  9. data/app/pb_kits/playbook/pb_copy_button/docs/example.yml +3 -3
  10. data/app/pb_kits/playbook/pb_home_address_street/_home_address_street.tsx +11 -7
  11. data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_formatting.html.erb +11 -0
  12. data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_formatting.jsx +22 -0
  13. data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_formatting_rails.md +1 -0
  14. data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_formatting_react.md +1 -0
  15. data/app/pb_kits/playbook/pb_home_address_street/docs/example.yml +2 -0
  16. data/app/pb_kits/playbook/pb_home_address_street/docs/index.js +1 -0
  17. data/app/pb_kits/playbook/pb_home_address_street/home_address_street.rb +11 -2
  18. data/app/pb_kits/playbook/pb_link/_link.tsx +0 -18
  19. data/app/pb_kits/playbook/pb_link/docs/example.yml +3 -5
  20. data/app/pb_kits/playbook/pb_link/docs/index.js +1 -2
  21. data/app/pb_kits/playbook/pb_link/link.html.erb +1 -1
  22. data/app/pb_kits/playbook/pb_link/link.rb +0 -6
  23. data/app/pb_kits/playbook/pb_link/link.test.jsx +0 -30
  24. data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_tooltip.html.erb +6 -6
  25. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_default.html.erb +1 -1
  26. data/app/pb_kits/playbook/pb_tooltip/index.js +27 -45
  27. data/app/pb_kits/playbook/pb_tooltip/tooltip.rb +1 -5
  28. data/dist/chunks/{_typeahead-CkemExmL.js → _typeahead-W0hatdPs.js} +1 -1
  29. data/dist/chunks/_weekday_stacked-Be4uzzgn.js +45 -0
  30. data/dist/chunks/{lib-DjpLC8uO.js → lib-kMuhBuU7.js} +1 -1
  31. data/dist/chunks/{pb_form_validation-S56UaHZl.js → pb_form_validation-DBJ0wZuS.js} +1 -1
  32. data/dist/chunks/vendor.js +1 -1
  33. data/dist/menu.yml +2 -2
  34. data/dist/playbook-doc.js +1 -1
  35. data/dist/playbook-rails-react-bindings.js +1 -1
  36. data/dist/playbook-rails.js +1 -1
  37. data/dist/playbook.css +1 -1
  38. data/lib/playbook/version.rb +1 -1
  39. metadata +10 -15
  40. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header.jsx +0 -55
  41. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header_react.md +0 -3
  42. data/app/pb_kits/playbook/pb_copy_button/copy_button.html.erb +0 -15
  43. data/app/pb_kits/playbook/pb_copy_button/copy_button.rb +0 -28
  44. data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_default.html.erb +0 -2
  45. data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_from.html.erb +0 -5
  46. data/app/pb_kits/playbook/pb_copy_button/index.js +0 -47
  47. data/app/pb_kits/playbook/pb_link/docs/_link_target.html.erb +0 -15
  48. data/app/pb_kits/playbook/pb_link/docs/_link_target.jsx +0 -29
  49. data/dist/chunks/_weekday_stacked-DiNLeUtf.js +0 -45
@@ -1,4 +1,5 @@
1
1
  import PbEnhancedElement from '../pb_enhanced_element'
2
+
2
3
  import {
3
4
  createPopperLite as createPopper,
4
5
  flip,
@@ -16,34 +17,27 @@ export default class PbTooltip extends PbEnhancedElement {
16
17
 
17
18
  connect() {
18
19
  this.triggerElements.forEach((trigger) => {
19
- const method = this.triggerMethod
20
-
21
- if (method === 'click') {
22
- trigger.addEventListener('click', () => {
20
+ trigger.addEventListener('mouseenter', () => {
21
+ this.mouseenterTimeout = setTimeout(() => {
23
22
  this.showTooltip(trigger)
24
- })
25
- } else {
26
- trigger.addEventListener('mouseenter', () => {
27
- this.mouseenterTimeout = setTimeout(() => {
28
- this.showTooltip(trigger)
29
- this.checkCloseTooltip(trigger)
30
- }, TOOLTIP_TIMEOUT)
31
-
32
- trigger.addEventListener('mouseleave', () => {
33
- clearTimeout(this.mouseenterTimeout)
34
- setTimeout(() => {
35
- this.hideTooltip()
36
- }, 0)
37
- }, { once: true })
38
- })
39
-
40
- this.tooltip.addEventListener('mouseenter', () => {
23
+ this.checkCloseTooltip(trigger)
24
+ }, TOOLTIP_TIMEOUT)
25
+
26
+ trigger.addEventListener('mouseleave', () => {
41
27
  clearTimeout(this.mouseenterTimeout)
42
- })
43
- this.tooltip.addEventListener('mouseleave', () => {
44
- this.hideTooltip()
45
- })
46
- }
28
+
29
+ setTimeout(() => {
30
+ this.hideTooltip()
31
+ }, 0)
32
+ }, { once: true })
33
+ })
34
+ })
35
+
36
+ this.tooltip.addEventListener('mouseenter', () => {
37
+ clearTimeout(this.mouseenterTimeout)
38
+ })
39
+ this.tooltip.addEventListener('mouseleave', () => {
40
+ this.hideTooltip()
47
41
  })
48
42
  }
49
43
 
@@ -60,7 +54,7 @@ export default class PbTooltip extends PbEnhancedElement {
60
54
  }
61
55
 
62
56
  showTooltip(trigger) {
63
- if (this.shouldShowTooltip === 'false') return
57
+ if (this.shouldShowTooltip === "false") return
64
58
 
65
59
  this.popper = createPopper(trigger, this.tooltip, {
66
60
  placement: this.position,
@@ -84,13 +78,6 @@ export default class PbTooltip extends PbEnhancedElement {
84
78
  ],
85
79
  })
86
80
  this.tooltip.classList.add('show')
87
-
88
- if (this.triggerMethod === 'click') {
89
- clearTimeout(this.autoHideTimeout)
90
- this.autoHideTimeout = setTimeout(() => {
91
- this.hideTooltip()
92
- }, 1000)
93
- }
94
81
  }
95
82
 
96
83
  hideTooltip() {
@@ -107,26 +94,25 @@ export default class PbTooltip extends PbEnhancedElement {
107
94
  let triggerEl
108
95
 
109
96
  if (this.triggerElementId) {
110
- triggerEl = document.querySelector(`#${this.triggerElementId}`)
97
+ triggerEl = document.querySelector(`#${this.triggerElementId}`) //deprecated
111
98
  } else {
112
99
  const selectorIsId = this.triggerElementSelector.indexOf('#') > -1
113
- triggerEl = selectorIsId
114
- ? document.querySelector(`${this.triggerElementSelector}`)
115
- : document.querySelectorAll(`${this.triggerElementSelector}`)
100
+ triggerEl = selectorIsId ? document.querySelector(`${this.triggerElementSelector}`) :
101
+ document.querySelectorAll(`${this.triggerElementSelector}`)
116
102
  }
117
103
 
118
104
  if (!triggerEl) {
105
+ /* eslint no-console: ["error", { allow: ["warn", "error"] }] */
119
106
  console.error('Tooltip Kit: an invalid or unavailable DOM reference was provided!')
120
107
  return []
121
108
  }
122
109
 
123
110
  if (!triggerEl.length) triggerEl = [triggerEl]
124
- return (this._triggerElements = this._triggerElements || triggerEl)
111
+ return this._triggerElements = (this._triggerElements || triggerEl)
125
112
  }
126
113
 
127
114
  get tooltip() {
128
- return (this._tooltip =
129
- this._tooltip || this.element.querySelector(`#${this.tooltipId}`))
115
+ return this._tooltip = (this._tooltip || this.element.querySelector(`#${this.tooltipId}`))
130
116
  }
131
117
 
132
118
  get position() {
@@ -148,8 +134,4 @@ export default class PbTooltip extends PbEnhancedElement {
148
134
  get shouldShowTooltip() {
149
135
  return this.element.dataset.pbTooltipShowTooltip
150
136
  }
151
-
152
- get triggerMethod() {
153
- return this.element.dataset.pbTooltipTriggerMethod || 'hover'
154
- }
155
137
  }
@@ -9,9 +9,6 @@ module Playbook
9
9
  prop :tooltip_id
10
10
  prop :dark, type: Playbook::Props::Boolean,
11
11
  default: false
12
- prop :trigger_method, type: Playbook::Props::Enum,
13
- values: %w[hover click],
14
- default: "hover"
15
12
 
16
13
  def classname
17
14
  generate_classname("pb_tooltip_kit", dark_class)
@@ -24,8 +21,7 @@ module Playbook
24
21
  pb_tooltip_trigger_element_selector: trigger_element_selector,
25
22
  pb_tooltip_trigger_element_id: trigger_element_id,
26
23
  pb_tooltip_tooltip_id: tooltip_id,
27
- pb_tooltip_show_tooltip: true,
28
- pb_tooltip_trigger_method: trigger_method
24
+ pb_tooltip_show_tooltip: true
29
25
  )
30
26
  end
31
27
 
@@ -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,useEffect,useMemo,useContext,useRef,createElement,useState,useLayoutEffect,forwardRef,useCallback,useImperativeHandle,Component,Fragment as Fragment$1}from"react";import{r as getDefaultExportFromCjs,x as filter,y as omit,u as useCollapsible,z as get,j as getAllIcons,q as commonjsGlobal,w as colors$1,t as highchartsTheme,A as merge,s as highchartsDarkTheme,B as getAugmentedNamespace,C as createPopper,E as uniqueId,F as typography,G as cloneDeep,H as isString}from"./lib-DjpLC8uO.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 Object.assign(Object.assign({},state),{items:action.payload});case"SET_DRAG_DATA":return Object.assign(Object.assign({},state),{dragData:action.payload});case"SET_IS_DRAGGING":return Object.assign(Object.assign({},state),{isDragging:action.payload});case"SET_ACTIVE_CONTAINER":return Object.assign(Object.assign({},state),{activeContainer:action.payload});case"CHANGE_CATEGORY":return Object.assign(Object.assign({},state),{items:state.items.map((item=>item.id===action.payload.itemId?Object.assign(Object.assign({},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 Object.assign(Object.assign({},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})=>{const[state,dispatch]=useReducer(reducer,initialState);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,handleDragStart:handleDragStart,handleDragEnter:handleDragEnter,handleDragEnd:handleDragEnd,handleDrop:handleDrop,handleDragOver:handleDragOver})),[state]);return jsx$1(DragContext.Provider,Object.assign({value:contextValue},{children:children}),void 0)};var classnames$1={exports:{}};
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,useRef,createElement,useState,useLayoutEffect,forwardRef,useCallback,useImperativeHandle,Component,Fragment as Fragment$1}from"react";import{r as getDefaultExportFromCjs,x as filter,y as omit,u as useCollapsible,z as get,j as getAllIcons,q as commonjsGlobal,w as colors$1,t as highchartsTheme,A as merge,s as highchartsDarkTheme,B as getAugmentedNamespace,C as createPopper,E as uniqueId,F as typography,G as cloneDeep,H as isString}from"./lib-kMuhBuU7.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 Object.assign(Object.assign({},state),{items:action.payload});case"SET_DRAG_DATA":return Object.assign(Object.assign({},state),{dragData:action.payload});case"SET_IS_DRAGGING":return Object.assign(Object.assign({},state),{isDragging:action.payload});case"SET_ACTIVE_CONTAINER":return Object.assign(Object.assign({},state),{activeContainer:action.payload});case"CHANGE_CATEGORY":return Object.assign(Object.assign({},state),{items:state.items.map((item=>item.id===action.payload.itemId?Object.assign(Object.assign({},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 Object.assign(Object.assign({},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})=>{const[state,dispatch]=useReducer(reducer,initialState);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,handleDragStart:handleDragStart,handleDragEnter:handleDragEnter,handleDragEnd:handleDragEnd,handleDrop:handleDrop,handleDragOver:handleDragOver})),[state]);return jsx$1(DragContext.Provider,Object.assign({value:contextValue},{children:children}),void 0)};var classnames$1={exports:{}};
2
2
  /*!
3
3
  Copyright (c) 2018 Jed Watson.
4
4
  Licensed under the MIT License (MIT), see