playbook_ui 16.9.0.pre.rc.4 → 16.9.0.pre.rc.5
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_date_picker/_date_picker.tsx +42 -2
- data/app/pb_kits/playbook/pb_date_picker/date_picker.html.erb +8 -5
- data/app/pb_kits/playbook/pb_date_picker/date_picker.rb +12 -0
- data/app/pb_kits/playbook/pb_date_picker/date_picker.test.js +60 -0
- data/app/pb_kits/playbook/pb_date_picker/date_picker_helper.ts +3 -1
- data/app/pb_kits/playbook/pb_filter/docs/_filter_default.html.erb +5 -1
- data/app/pb_kits/playbook/pb_message/_message.scss +1 -1
- data/dist/chunks/{_pb_line_graph-BgsTI0CL.js → _pb_line_graph-BdDqs3Vu.js} +1 -1
- data/dist/chunks/{_typeahead-DKlUinmj.js → _typeahead-Djm-BgYt.js} +1 -1
- data/dist/chunks/{globalProps-DOB47YGB.js → globalProps-DF0MuVPf.js} +1 -1
- data/dist/chunks/{lib-BzglXly2.js → lib-DsBJM_F3.js} +1 -1
- data/dist/chunks/vendor.js +2 -2
- 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 +6 -6
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: adeedc26a2ee35f2ab942bc05847b895ae447e44a5ce1a4139bcb6d1d6c1019e
|
|
4
|
+
data.tar.gz: 06fb82dcff9a7784ff14251800f4e1ff974cf2c50c5a6804c8b0636e42495b17
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: d3e9d5227d3e95900d9d322e6cf30ff87faf8d7593adb1028c630468bd45947f116951fd6e6e96b83522f7946375ed63ce8d8145af2b594ba648e368a7112e74
|
|
7
|
+
data.tar.gz: 030a1e8e1cd51e0f23728f03d471b371cc066c6530f42aa7d71a207225d449405f2e045540102dcbdee59df1ab60f79d3b928eeed01cad47a26bb8fdd8e505cd
|
|
@@ -12,6 +12,41 @@ import Caption from '../pb_caption/_caption'
|
|
|
12
12
|
import Body from '../pb_body/_body'
|
|
13
13
|
import colors from "../tokens/exports/_colors.module.scss"
|
|
14
14
|
|
|
15
|
+
function isValidDateInstance(value: Date): boolean {
|
|
16
|
+
return !Number.isNaN(value.getTime())
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
function normalizeDefaultDate<T>(defaultDate: T): T {
|
|
20
|
+
if (defaultDate instanceof Date) {
|
|
21
|
+
return (isValidDateInstance(defaultDate) ? defaultDate : '') as unknown as T
|
|
22
|
+
}
|
|
23
|
+
if (Array.isArray(defaultDate)) {
|
|
24
|
+
const normalized = defaultDate.filter(
|
|
25
|
+
(d) => !(d instanceof Date) || isValidDateInstance(d)
|
|
26
|
+
)
|
|
27
|
+
return (normalized.length ? normalized : '') as unknown as T
|
|
28
|
+
}
|
|
29
|
+
return defaultDate
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
function serializeDefaultDateForFilterReset(defaultDate: unknown): string | undefined {
|
|
33
|
+
if (defaultDate === '' || defaultDate == null) return undefined
|
|
34
|
+
if (Array.isArray(defaultDate)) {
|
|
35
|
+
const parts = defaultDate.map((d) => {
|
|
36
|
+
if (d == null || d === '') return ''
|
|
37
|
+
if (d instanceof Date) {
|
|
38
|
+
return isValidDateInstance(d) ? d.toISOString() : ''
|
|
39
|
+
}
|
|
40
|
+
return String(d)
|
|
41
|
+
}).filter(Boolean)
|
|
42
|
+
return parts.length ? parts.join(',') : undefined
|
|
43
|
+
}
|
|
44
|
+
if (defaultDate instanceof Date) {
|
|
45
|
+
return isValidDateInstance(defaultDate) ? defaultDate.toISOString() : undefined
|
|
46
|
+
}
|
|
47
|
+
return String(defaultDate)
|
|
48
|
+
}
|
|
49
|
+
|
|
15
50
|
type DatePickerProps = {
|
|
16
51
|
allowInput?: boolean,
|
|
17
52
|
aria?: { [key: string]: string },
|
|
@@ -113,7 +148,12 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
|
|
|
113
148
|
} = props
|
|
114
149
|
|
|
115
150
|
const ariaProps = buildAriaProps(aria)
|
|
116
|
-
const
|
|
151
|
+
const normalizedDefaultDate = normalizeDefaultDate(defaultDate)
|
|
152
|
+
const filterResetDefaultSerialized = serializeDefaultDateForFilterReset(normalizedDefaultDate)
|
|
153
|
+
const dataProps = buildDataProps({
|
|
154
|
+
...data,
|
|
155
|
+
...(filterResetDefaultSerialized ? { 'default-value': filterResetDefaultSerialized } : {}),
|
|
156
|
+
})
|
|
117
157
|
const htmlProps = buildHtmlProps(htmlOptions)
|
|
118
158
|
const inputAriaProps = buildAriaProps(inputAria)
|
|
119
159
|
const inputDataProps = buildDataProps(inputData)
|
|
@@ -136,7 +176,7 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
|
|
|
136
176
|
datePickerHelper({
|
|
137
177
|
allowInput,
|
|
138
178
|
customQuickPickDates,
|
|
139
|
-
defaultDate,
|
|
179
|
+
defaultDate: normalizedDefaultDate,
|
|
140
180
|
disableDate,
|
|
141
181
|
disableRange,
|
|
142
182
|
disableWeekdays,
|
|
@@ -1,8 +1,11 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
1
|
+
<% date_picker_root_attrs = {
|
|
2
|
+
class: object.classname + object.error_class,
|
|
3
|
+
'data-pb-date-picker' => true,
|
|
4
|
+
'data-validation-message' => object.validation_message,
|
|
5
|
+
}
|
|
6
|
+
date_picker_root_attrs['data-default-value'] = object.serialized_default_date_for_dom if object.serialized_default_date_for_dom.present?
|
|
7
|
+
%>
|
|
8
|
+
<%= pb_content_tag(:div, date_picker_root_attrs) do %>
|
|
6
9
|
<div class="input_wrapper">
|
|
7
10
|
<% if !object.hide_label && object.label %>
|
|
8
11
|
<label for="<%= object.picker_id %>">
|
|
@@ -145,6 +145,18 @@ module Playbook
|
|
|
145
145
|
def angle_down_path
|
|
146
146
|
"app/pb_kits/playbook/utilities/icons/angle-down.svg"
|
|
147
147
|
end
|
|
148
|
+
|
|
149
|
+
# Serialized business default for opt-in smart filter reset (Nitro / data-default-value).
|
|
150
|
+
def serialized_default_date_for_dom
|
|
151
|
+
case default_date
|
|
152
|
+
when nil, ""
|
|
153
|
+
nil
|
|
154
|
+
when Array
|
|
155
|
+
default_date.compact_blank.map(&:to_s).join(",")
|
|
156
|
+
else
|
|
157
|
+
default_date.to_s.presence
|
|
158
|
+
end
|
|
159
|
+
end
|
|
148
160
|
end
|
|
149
161
|
end
|
|
150
162
|
end
|
|
@@ -40,6 +40,66 @@ describe('DatePicker Kit', () => {
|
|
|
40
40
|
expect(kit).toHaveClass('pb_date_picker_kit mb_sm')
|
|
41
41
|
})
|
|
42
42
|
|
|
43
|
+
test('exposes data-default-value on kit root when defaultDate is set', () => {
|
|
44
|
+
const testId = 'datepicker-def-attr'
|
|
45
|
+
render(
|
|
46
|
+
<DatePicker
|
|
47
|
+
data={{ testid: testId }}
|
|
48
|
+
defaultDate={DEFAULT_DATE}
|
|
49
|
+
pickerId="date-picker-def-attr"
|
|
50
|
+
/>
|
|
51
|
+
)
|
|
52
|
+
const kit = screen.getByTestId(testId)
|
|
53
|
+
expect(kit).toHaveAttribute('data-default-value', DEFAULT_DATE.toISOString())
|
|
54
|
+
})
|
|
55
|
+
|
|
56
|
+
test('omits data-default-value when defaultDate is empty', () => {
|
|
57
|
+
const testId = 'datepicker-no-def-attr'
|
|
58
|
+
render(
|
|
59
|
+
<DatePicker
|
|
60
|
+
data={{ testid: testId }}
|
|
61
|
+
defaultDate=""
|
|
62
|
+
pickerId="date-picker-no-def-attr"
|
|
63
|
+
/>
|
|
64
|
+
)
|
|
65
|
+
const kit = screen.getByTestId(testId)
|
|
66
|
+
expect(kit).not.toHaveAttribute('data-default-value')
|
|
67
|
+
})
|
|
68
|
+
|
|
69
|
+
test('renders without error when defaultDate is an invalid Date', () => {
|
|
70
|
+
const testId = 'datepicker-invalid-date'
|
|
71
|
+
const invalidDate = new Date('UndefinedT00:00')
|
|
72
|
+
|
|
73
|
+
expect(() => {
|
|
74
|
+
render(
|
|
75
|
+
<DatePicker
|
|
76
|
+
data={{ testid: testId }}
|
|
77
|
+
defaultDate={invalidDate}
|
|
78
|
+
pickerId="date-picker-invalid-date"
|
|
79
|
+
/>
|
|
80
|
+
)
|
|
81
|
+
}).not.toThrow()
|
|
82
|
+
|
|
83
|
+
const kit = screen.getByTestId(testId)
|
|
84
|
+
expect(kit).not.toHaveAttribute('data-default-value')
|
|
85
|
+
})
|
|
86
|
+
|
|
87
|
+
test('omits data-default-value when defaultDate is constructed from undefined', () => {
|
|
88
|
+
const testId = 'datepicker-undefined-date'
|
|
89
|
+
const invalidDate = new Date(undefined + 'T00:00')
|
|
90
|
+
|
|
91
|
+
render(
|
|
92
|
+
<DatePicker
|
|
93
|
+
data={{ testid: testId }}
|
|
94
|
+
defaultDate={invalidDate}
|
|
95
|
+
pickerId="date-picker-undefined-date"
|
|
96
|
+
/>
|
|
97
|
+
)
|
|
98
|
+
|
|
99
|
+
const kit = screen.getByTestId(testId)
|
|
100
|
+
expect(kit).not.toHaveAttribute('data-default-value')
|
|
101
|
+
})
|
|
102
|
+
|
|
43
103
|
test('inLine alone adds inline-date-picker class and inline control icons, not the calendar icon', () => {
|
|
44
104
|
const testId = 'datepicker-inline-only'
|
|
45
105
|
render(
|
|
@@ -278,7 +278,9 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
|
|
|
278
278
|
// Default Date + Min/Max Date Initialization Helper Functions section ----/
|
|
279
279
|
const toDateObject = (dateValue: any): Date | null => {
|
|
280
280
|
if (!dateValue) return null
|
|
281
|
-
if (dateValue instanceof Date)
|
|
281
|
+
if (dateValue instanceof Date) {
|
|
282
|
+
return isNaN(dateValue.getTime()) ? null : dateValue
|
|
283
|
+
}
|
|
282
284
|
if (typeof dateValue === 'string') {
|
|
283
285
|
const parsed = new Date(dateValue)
|
|
284
286
|
return isNaN(parsed.getTime()) ? null : parsed
|
|
@@ -28,7 +28,11 @@
|
|
|
28
28
|
<%= pb_rails("form", props: { form_system_options: { scope: :example, method: :get } }) do |form| %>
|
|
29
29
|
<%= form.text_field :example_text_field, props: { label: true } %>
|
|
30
30
|
<%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true } %>
|
|
31
|
-
|
|
31
|
+
<%= pb_rails("date_picker", props: {
|
|
32
|
+
label: "Start date",
|
|
33
|
+
name: "start_date",
|
|
34
|
+
picker_id: "filter-default",
|
|
35
|
+
}) %>
|
|
32
36
|
<%= form.actions do |action| %>
|
|
33
37
|
<%= action.submit props: {
|
|
34
38
|
text: "Apply",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsx}from"react/jsx-runtime";import{useMemo}from"react";import{b as buildAriaProps,a as buildDataProps,c as buildHtmlProps,d as classnames,e as buildCss,g as globalProps}from"./globalProps-
|
|
1
|
+
import{jsx}from"react/jsx-runtime";import{useMemo}from"react";import{b as buildAriaProps,a as buildDataProps,c as buildHtmlProps,d as classnames,e as buildCss,g as globalProps}from"./globalProps-DF0MuVPf.js";import Highcharts from"highcharts";import HighchartsReact from"highcharts-react-official";import{t as typography,c as colors}from"./lib-DsBJM_F3.js";import highchartsMore from"highcharts/highcharts-more";import solidGauge from"highcharts/modules/solid-gauge";const barGraphTheme={title:{text:"",style:{color:colors.text_lt_default,fontFamily:typography.font_family_base,fontWeight:typography.bold,fontSize:typography.heading_3}},subtitle:{text:"",style:{fontFamily:typography.font_family_base,color:colors.text_lt_light,fontWeight:typography.regular,fontSize:typography.text_base}},chart:{type:"column"},tooltip:{backgroundColor:{linearGradient:{x1:0,y1:0,x2:0,y2:1},stops:[[0,colors.bg_dark],[1,colors.bg_dark]]},style:{fontFamily:typography.font_family_base,color:colors.text_dk_default,fontWeight:typography.regular,fontSize:typography.text_smaller}},colors:[colors.data_1,colors.data_2,colors.data_3,colors.data_4,colors.data_5,colors.data_6,colors.data_7],credits:{enabled:false},legend:{enabled:false,itemStyle:{color:colors.text_lt_light,fill:colors.text_lt_light,fontSize:typography.text_smaller}},xAxis:{gridLineWidth:0,lineColor:colors.border_light,tickColor:colors.border_light,labels:{style:{fontFamily:typography.font_family_base,color:colors.text_lt_lighter,fontWeight:typography.bold,fontSize:typography.text_smaller}},title:{style:{color:colors.text_lt_default,fontFamily:typography.font_family_base,fontWeight:typography.regular,fontSize:typography.heading_4}}},yAxis:{alternateGridColor:void 0,minorTickInterval:null,gridLineColor:colors.border_light,minorGridLineColor:colors.border_light,lineWidth:0,tickWidth:0,labels:{style:{fontFamily:typography.font_family_base,color:colors.text_lt_lighter,fontWeight:typography.bold,fontSize:typography.text_smaller}},title:{style:{fontFamily:typography.font_family_base,color:colors.text_lt_lighter,fontWeight:typography.bold,fontSize:typography.text_smaller}}}};const PbBarGraph=props=>{const{aria:aria={},data:data={},id:id,htmlOptions:htmlOptions={},options:options,className:className}=props;const ariaProps=buildAriaProps(aria);const dataProps=buildDataProps(data);const htmlProps=buildHtmlProps(htmlOptions);const classes=classnames(buildCss("pb_pb_bar_graph"),globalProps(props),className);const mergedOptions=useMemo((()=>{if(!options||typeof options!=="object"){console.error("❌ Invalid options passed to <PbBarGraph />",options);return{}}return Highcharts.merge({},barGraphTheme,options)}),[options]);return jsx("div",{children:jsx(HighchartsReact,{containerProps:{className:classnames(classes),id:id,...ariaProps,...dataProps,...htmlProps},highcharts:Highcharts,options:mergedOptions})})};const pbCircleChartTheme={title:{text:"",style:{color:colors.text_lt_default,fontFamily:typography.font_family_base,fontWeight:typography.bold,fontSize:typography.heading_3}},chart:{type:"pie"},tooltip:{backgroundColor:{linearGradient:{x1:0,y1:0,x2:0,y2:1},stops:[[0,colors.bg_dark],[1,colors.bg_dark]]},pointFormat:'<span style="font-weight: bold; color:{point.color};">●</span>{point.name}: <b>{point.y}</b>',followPointer:true,shadow:false,borderWidth:0,borderRadius:10,style:{fontFamily:typography.font_family_base,color:colors.text_dk_default,fontWeight:typography.regular,fontSize:typography.text_smaller}},plotOptions:{pie:{dataLabels:{enabled:false,connectorShape:"straight",connectorWidth:3,format:"<div>{point.name}</div>",style:{fontFamily:typography.font_family_base,fontSize:typography.text_smaller,color:colors.text_lt_light,fontWeight:typography.regular,textOutline:"2px $white"}},innerSize:"50%",borderColor:"",borderWidth:null,colors:[colors.data_1,colors.data_2,colors.data_3,colors.data_4,colors.data_5,colors.data_6,colors.data_7]}},legend:{layout:"horizontal",align:"center",verticalAlign:"bottom",itemStyle:{fontFamily:typography.font_family_base,color:colors.text_lt_light,fontWeight:typography.regular,fontSize:typography.text_smaller},itemHoverStyle:{color:colors.text_lt_default},itemHiddenStyle:{color:colors.text_lt_lighter}},credits:{enabled:false}};const PbCircleChart=props=>{const{aria:aria={},className:className,data:data={},id:id,htmlOptions:htmlOptions={},options:options}=props;const ariaProps=buildAriaProps(aria);const dataProps=buildDataProps(data);const htmlProps=buildHtmlProps(htmlOptions);const classes=classnames(buildCss("pb_pb_circle_chart"),globalProps(props),className);const mergedOptions=useMemo((()=>{if(!options||typeof options!=="object"){console.error("❌ Invalid options passed to <PbCircleChart />",options);return{}}return Highcharts.merge({},pbCircleChartTheme,options)}),[options]);return jsx("div",{children:jsx(HighchartsReact,{containerProps:{className:classnames(classes),id:id,...ariaProps,...dataProps,...htmlProps},highcharts:Highcharts,options:mergedOptions})})};const pbGaugeGraphTheme={title:{text:"",style:{fontFamily:typography.font_family_base,fontSize:typography.text_larger}},chart:{type:"solidgauge",events:{render(){this.container;const arc=this.container.querySelector("path.gauge-pane");if(arc)arc.setAttribute("stroke-linejoin","round")}}},pane:{size:"90%",startAngle:-100,endAngle:100,background:[{borderWidth:20,innerRadius:"90%",outerRadius:"90%",shape:"arc",className:"gauge-pane",borderColor:colors.border_light,borderRadius:"50%"}]},tooltip:{backgroundColor:{linearGradient:{x1:0,y1:0,x2:0,y2:1},stops:[[0,colors.bg_dark],[1,colors.bg_dark]]},pointFormat:'<span style="font-weight: bold; color:{point.color};">●</span>{point.name}: <b>{point.y}</b>',followPointer:true,shadow:false,borderWidth:0,borderRadius:10,style:{fontFamily:typography.font_family_base,color:colors.text_dk_default,fontWeight:typography.regular,fontSize:typography.text_smaller}},yAxis:{min:0,max:100,lineWidth:0,tickPositions:[]},plotOptions:{solidgauge:{borderColor:colors.data_1,borderWidth:20,color:colors.data_1,radius:90,innerRadius:"90%",y:-26,dataLabels:{borderWidth:0,color:colors.text_lt_default,enabled:true,format:'<span class="fix">{y:,f}</span>',style:{fontFamily:typography.font_family_base,fontWeight:typography.regular,fontSize:typography.heading_2},y:-26}}},credits:{enabled:false}};const PbGaugeChart=props=>{const{aria:aria={},className:className,data:data={},htmlOptions:htmlOptions={},id:id,ref:ref,options:options={}}=props;const ariaProps=buildAriaProps(aria);const dataProps=buildDataProps(data);const htmlProps=buildHtmlProps(htmlOptions);const classes=classnames(buildCss("pb_pb_gauge_chart"),globalProps(props),className);const mergedOptions=useMemo((()=>{if(!options||typeof options!=="object"){console.error("❌ Invalid options passed to <PbLineGraph />",options);return{}}return Highcharts.merge({},pbGaugeGraphTheme,options)}),[options]);highchartsMore(Highcharts);solidGauge(Highcharts);return jsx("div",{children:jsx(HighchartsReact,{containerProps:{className:classnames(classes),id:id,ref:ref,...ariaProps,...dataProps,...htmlProps},highcharts:Highcharts,options:mergedOptions})})};const pbLineGraphTheme={title:{text:"",style:{color:colors.text_lt_default,fontFamily:typography.font_family_base,fontWeight:typography.bold,fontSize:typography.heading_3}},subtitle:{text:"",style:{fontFamily:typography.font_family_base,color:colors.text_lt_light,fontWeight:typography.regular,fontSize:typography.text_base}},chart:{type:"line"},tooltip:{backgroundColor:{linearGradient:{x1:0,y1:0,x2:0,y2:1},stops:[[0,colors.bg_dark],[1,colors.bg_dark]]},followPointer:true,shadow:false,borderWidth:0,borderRadius:10,style:{fontFamily:typography.font_family_base,color:colors.text_dk_default,fontWeight:typography.regular,fontSize:typography.text_smaller}},plotOptions:{line:{dataLabels:{enabled:false}}},credits:{enabled:false},legend:{enabled:false,itemStyle:{fontFamily:typography.font_family_base,color:colors.text_lt_light,fontWeight:typography.regular,fontSize:typography.text_smaller},itemHoverStyle:{color:colors.text_lt_default},itemHiddenStyle:{color:colors.text_lt_lighter}},colors:[colors.data_1,colors.data_2,colors.data_3,colors.data_4,colors.data_5,colors.data_6,colors.data_7],xAxis:{gridLineWidth:0,lineColor:colors.border_light,tickColor:colors.border_light,labels:{style:{fontFamily:typography.font_family_base,color:colors.text_lt_lighter,fontWeight:typography.bold,fontSize:typography.text_smaller}},title:{style:{color:colors.text_lt_default,fontFamily:typography.font_family_base,fontWeight:typography.regular,fontSize:typography.heading_4}}},yAxis:{alternateGridColor:void 0,minorTickInterval:null,gridLineColor:colors.border_light,minorGridLineColor:colors.border_light,lineWidth:0,tickWidth:0,tickPixelInterval:50,labels:{style:{fontFamily:typography.font_family_base,color:colors.text_lt_lighter,fontWeight:typography.bold,fontSize:typography.text_smaller}},title:{style:{fontFamily:typography.font_family_base,color:colors.text_lt_lighter,fontWeight:typography.bold,fontSize:typography.text_smaller}}}};const PbLineGraph=props=>{const{aria:aria={},className:className,data:data={},id:id,htmlOptions:htmlOptions={},options:options}=props;const ariaProps=buildAriaProps(aria);const dataProps=buildDataProps(data);const htmlProps=buildHtmlProps(htmlOptions);const classes=classnames(buildCss("pb_pb_line_graph"),globalProps(props),className);const mergedOptions=useMemo((()=>{if(!options||typeof options!=="object"){console.error("❌ Invalid options passed to <PbLineGraph />",options);return{}}return Highcharts.merge({},pbLineGraphTheme,options)}),[options]);return jsx("div",{children:jsx(HighchartsReact,{containerProps:{className:classnames(classes),id:id,...ariaProps,...dataProps,...htmlProps},highcharts:Highcharts,options:mergedOptions})})};export{PbBarGraph as P,PbCircleChart as a,PbGaugeChart as b,PbLineGraph as c};
|