playbook_ui 14.17.0 → 14.18.0.pre.alpha.PLAY2037selectinlinecareterror7490
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/Components/RegularTableView.tsx +23 -3
- data/app/pb_kits/playbook/pb_advanced_table/Components/TableHeaderCell.tsx +67 -3
- data/app/pb_kits/playbook/pb_advanced_table/Hooks/useTableActions.ts +1 -2
- data/app/pb_kits/playbook/pb_advanced_table/Utilities/ExpansionControlHelpers.tsx +29 -19
- data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss +365 -143
- data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx +14 -1
- data/app/pb_kits/playbook/pb_advanced_table/advanced_table.rb +6 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_border_color.jsx +80 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_border_color.md +3 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_border_color_rails.html.erb +58 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_border_color_rails.md +3 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_expand_by_depth.jsx +66 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_expand_by_depth.md +10 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_columns.jsx +58 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_columns.md +6 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_columns_and_header.jsx +64 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_columns_and_header.md +8 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_header.jsx +55 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_header.md +3 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_header_rails.html.erb +33 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_header_rails.md +3 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props.html.erb +1 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props.jsx +1 -2
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_rails.md +2 -2
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_react.md +1 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header_rails.md +6 -2
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header_react.md +6 -2
- data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +10 -4
- data/app/pb_kits/playbook/pb_advanced_table/docs/index.js +6 -1
- data/app/pb_kits/playbook/pb_advanced_table/index.js +7 -0
- data/app/pb_kits/playbook/pb_advanced_table/scss_partials/advanced_table_sticky_mixin.scss +97 -0
- data/app/pb_kits/playbook/pb_advanced_table/table_row.html.erb +1 -1
- data/app/pb_kits/playbook/pb_background/_background.scss +26 -0
- data/app/pb_kits/playbook/pb_background/_background.tsx +5 -3
- data/app/pb_kits/playbook/pb_background/background.test.js +5 -0
- data/app/pb_kits/playbook/pb_background/docs/_background_overlay.jsx +35 -0
- data/app/pb_kits/playbook/pb_background/docs/_background_overlay.md +1 -0
- data/app/pb_kits/playbook/pb_background/docs/example.yml +1 -0
- data/app/pb_kits/playbook/pb_background/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_circle_chart/_circle_chart.tsx +1 -1
- data/app/pb_kits/playbook/pb_circle_chart/circleChart.test.js +2 -2
- data/app/pb_kits/playbook/pb_circle_chart/circleChartTheme.ts +53 -0
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_block.html.erb +2 -2
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_block.jsx +1 -1
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_colors.html.erb +1 -1
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_colors.jsx +1 -1
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_custom_tooltip.html.erb +1 -1
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_custom_tooltip.jsx +1 -1
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_default.html.erb +1 -1
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_default.jsx +1 -1
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_legend_position.html.erb +1 -1
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_legend_position.jsx +1 -1
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_live_data.jsx +2 -2
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_pb_styles.jsx +38 -0
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_pb_styles.md +1 -0
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_rounded.html.erb +1 -1
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_rounded.jsx +1 -1
- data/app/pb_kits/playbook/pb_circle_chart/docs/example.yml +2 -3
- data/app/pb_kits/playbook/pb_circle_chart/docs/index.js +2 -1
- data/app/pb_kits/playbook/pb_circle_icon_button/_circle_icon_button.scss +39 -1
- data/app/pb_kits/playbook/pb_circle_icon_button/_circle_icon_button.tsx +4 -0
- data/app/pb_kits/playbook/pb_circle_icon_button/circle_icon_button.rb +9 -1
- data/app/pb_kits/playbook/pb_circle_icon_button/circle_icon_button.test.js +14 -0
- data/app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_size.html.erb +28 -0
- data/app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_size.jsx +42 -0
- data/app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_size.md +1 -0
- data/app/pb_kits/playbook/pb_circle_icon_button/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_circle_icon_button/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_copy_button/_copy_button.tsx +19 -45
- data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_hook.jsx +54 -0
- data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_hook.md +3 -0
- data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_hook_rails.html.erb +14 -0
- data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_hook_rails.md +3 -0
- data/app/pb_kits/playbook/pb_copy_button/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_copy_button/docs/index.js +2 -1
- data/app/pb_kits/playbook/pb_copy_button/index.js +46 -20
- data/app/pb_kits/playbook/pb_copy_button/usePBCopy.ts +45 -0
- data/app/pb_kits/playbook/pb_date_picker/_date_picker.tsx +12 -0
- data/app/pb_kits/playbook/pb_date_picker/date_picker.rb +12 -0
- data/app/pb_kits/playbook/pb_date_picker/date_picker_helper.ts +50 -1
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_error.html.erb +2 -2
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_error.jsx +4 -1
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_rails.md +4 -0
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_range_limit.md +1 -1
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_react.md +5 -1
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range_pattern.jsx +34 -0
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range_pattern.md +14 -0
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range_pattern_rails.html.erb +20 -0
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range_pattern_rails.md +14 -0
- data/app/pb_kits/playbook/pb_date_picker/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_date_picker/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_date_picker/plugins/quickPick.tsx +10 -0
- data/app/pb_kits/playbook/pb_dialog/dialog.html.erb +10 -1
- data/app/pb_kits/playbook/pb_dialog/dialog.rb +2 -0
- data/app/pb_kits/playbook/pb_dialog/docs/_dialog_turbo_frames.html.erb +117 -0
- data/app/pb_kits/playbook/pb_dialog/docs/_dialog_turbo_frames_rails.md +9 -0
- data/app/pb_kits/playbook/pb_dialog/docs/example.yml +1 -0
- data/app/pb_kits/playbook/pb_dialog/index.js +106 -14
- data/app/pb_kits/playbook/pb_draggable/_draggable.scss +43 -20
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones.html.erb +43 -0
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones.jsx +102 -105
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_colors.html.erb +55 -0
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_colors.jsx +50 -48
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_colors_rails.md +1 -0
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_colors_react.md +1 -0
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_line.jsx +110 -0
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_line.md +5 -0
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_react.md +5 -0
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_event_listeners.html.erb +42 -0
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_event_listeners.md +1 -0
- data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_with_table_react.jsx → _draggable_with_table.jsx} +1 -1
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_table_react.md +3 -1
- data/app/pb_kits/playbook/pb_draggable/docs/example.yml +12 -7
- data/app/pb_kits/playbook/pb_draggable/docs/index.js +4 -1
- data/app/pb_kits/playbook/pb_draggable/draggable.rb +9 -1
- data/app/pb_kits/playbook/pb_draggable/draggable.test.jsx +68 -0
- data/app/pb_kits/playbook/pb_draggable/index.js +139 -142
- data/app/pb_kits/playbook/pb_draggable/subcomponents/DraggableContainer.tsx +4 -3
- data/app/pb_kits/playbook/pb_dropdown/_dropdown.tsx +1 -1
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_error.html.erb +5 -2
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_error.jsx +4 -1
- data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownOption.tsx +1 -1
- data/app/pb_kits/playbook/pb_filter/docs/_filter_within_turbo_frames.html.erb +41 -0
- data/app/pb_kits/playbook/pb_filter/docs/_filter_within_turbo_frames.md +1 -0
- data/app/pb_kits/playbook/pb_filter/docs/example.yml +1 -0
- data/app/pb_kits/playbook/pb_form_group/_error_state_mixin.scss +22 -18
- data/app/pb_kits/playbook/pb_form_group/_form_group.scss +23 -3
- data/app/pb_kits/playbook/pb_form_group/docs/_form_group_select.html.erb +15 -5
- data/app/pb_kits/playbook/pb_form_group/docs/_form_group_select.jsx +39 -6
- data/app/pb_kits/playbook/pb_gauge/docs/_gauge_pb_styles.jsx +30 -0
- data/app/pb_kits/playbook/pb_gauge/docs/_gauge_pb_styles.md +1 -0
- data/app/pb_kits/playbook/pb_gauge/docs/example.yml +1 -0
- data/app/pb_kits/playbook/pb_gauge/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_gauge/gaugeTheme.ts +85 -0
- data/app/pb_kits/playbook/pb_layout/_layout.scss +70 -1
- data/app/pb_kits/playbook/pb_layout/_layout.tsx +29 -2
- data/app/pb_kits/playbook/pb_layout/docs/_layout_bracket.jsx +322 -118
- data/app/pb_kits/playbook/pb_layout/docs/_layout_bracket.md +1 -1
- data/app/pb_kits/playbook/pb_layout/subcomponents/_game.tsx +74 -43
- data/app/pb_kits/playbook/pb_layout/subcomponents/_participant.tsx +79 -0
- data/app/pb_kits/playbook/pb_layout/subcomponents/_round.tsx +21 -4
- data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_pb_styles.jsx +52 -0
- data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_pb_styles.md +1 -0
- data/app/pb_kits/playbook/pb_line_graph/docs/example.yml +1 -0
- data/app/pb_kits/playbook/pb_line_graph/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_line_graph/lineGraphTheme.ts +110 -0
- data/app/pb_kits/playbook/pb_overlay/_overlay.scss +83 -22
- data/app/pb_kits/playbook/pb_overlay/_overlay.tsx +39 -7
- data/app/pb_kits/playbook/pb_overlay/docs/_overlay_color.jsx +63 -0
- data/app/pb_kits/playbook/pb_overlay/docs/_overlay_color.md +3 -0
- data/app/pb_kits/playbook/pb_overlay/docs/_overlay_default.md +1 -7
- data/app/pb_kits/playbook/pb_overlay/docs/_overlay_fullscreen_background.jsx +49 -0
- data/app/pb_kits/playbook/pb_overlay/docs/_overlay_fullscreen_background.md +1 -0
- data/app/pb_kits/playbook/pb_overlay/docs/_overlay_fullscreen_opacity.jsx +81 -0
- data/app/pb_kits/playbook/pb_overlay/docs/_overlay_fullscreen_opacity.md +1 -0
- data/app/pb_kits/playbook/pb_overlay/docs/_overlay_gradient_opacity.jsx +39 -0
- data/app/pb_kits/playbook/pb_overlay/docs/_overlay_gradient_opacity.md +1 -0
- data/app/pb_kits/playbook/pb_overlay/docs/_overlay_layout.jsx +40 -0
- data/app/pb_kits/playbook/pb_overlay/docs/_overlay_layout.md +5 -0
- data/app/pb_kits/playbook/pb_overlay/docs/example.yml +5 -0
- data/app/pb_kits/playbook/pb_overlay/docs/index.js +5 -0
- data/app/pb_kits/playbook/pb_overlay/overlay.test.jsx +39 -1
- data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.scss +13 -0
- data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.tsx +3 -1
- data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_country_search.html.erb +10 -0
- data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_country_search.jsx +20 -0
- data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_country_search.md +1 -0
- data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_validation.jsx +8 -1
- data/app/pb_kits/playbook/pb_phone_number_input/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_phone_number_input/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_phone_number_input/phone_number_input.rb +3 -0
- data/app/pb_kits/playbook/pb_phone_number_input/phone_number_input.test.js +19 -0
- data/app/pb_kits/playbook/pb_popover/docs/_popover_append_to.html.erb +46 -0
- data/app/pb_kits/playbook/pb_popover/docs/_popover_append_to.md +1 -0
- data/app/pb_kits/playbook/pb_popover/docs/example.yml +1 -0
- data/app/pb_kits/playbook/pb_popover/index.ts +13 -1
- data/app/pb_kits/playbook/pb_popover/popover.rb +2 -0
- data/app/pb_kits/playbook/pb_select/_select.scss +10 -0
- data/app/pb_kits/playbook/pb_select/docs/_select_error.html.erb +1 -1
- data/app/pb_kits/playbook/pb_select/docs/_select_error.jsx +7 -2
- data/app/pb_kits/playbook/pb_table/_table.tsx +2 -2
- data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_rows.md +3 -1
- data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_rows_rails.md +3 -1
- data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_table.md +3 -1
- data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_table_rails.md +3 -1
- data/app/pb_kits/playbook/pb_table/docs/_table_with_header_style_borderless.html.erb +34 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_with_header_style_borderless_rails.md +1 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_with_header_style_floating.html.erb +36 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_with_header_style_floating_rails.md +1 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_with_header_style_floating_react.md +1 -1
- data/app/pb_kits/playbook/pb_table/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_table/styles/_collapsible.scss +1 -1
- data/app/pb_kits/playbook/pb_table/styles/_headers.scss +19 -7
- data/app/pb_kits/playbook/pb_table/table.rb +13 -1
- data/app/pb_kits/playbook/pb_table/table_header.rb +13 -1
- data/app/pb_kits/playbook/pb_text_input/_text_input.tsx +13 -5
- data/app/pb_kits/playbook/pb_text_input/docs/_text_input_error.html.erb +1 -1
- data/app/pb_kits/playbook/pb_text_input/docs/_text_input_error.jsx +9 -1
- data/app/pb_kits/playbook/pb_text_input/docs/_text_input_sanitize.jsx +94 -0
- data/app/pb_kits/playbook/pb_text_input/docs/_text_input_sanitize.md +1 -0
- data/app/pb_kits/playbook/pb_text_input/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_text_input/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_text_input/inputMask.ts +8 -1
- data/app/pb_kits/playbook/pb_textarea/docs/_textarea_error.html.erb +5 -1
- data/app/pb_kits/playbook/pb_textarea/docs/_textarea_error.jsx +7 -1
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_error_state.html.erb +8 -1
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_error_state.jsx +6 -2
- data/dist/chunks/_typeahead-D8CsVBZO.js +22 -0
- data/dist/chunks/_weekday_stacked-D3oLTSkH.js +45 -0
- data/dist/chunks/lazysizes-B7xYodB-.js +1 -0
- data/dist/chunks/lib-BmTAc7Nc.js +29 -0
- data/dist/chunks/{pb_form_validation-BiHyZedy.js → pb_form_validation-BWjy4bFn.js} +1 -1
- data/dist/chunks/vendor.js +1 -1
- data/dist/menu.yml +2 -2
- data/dist/playbook-doc.js +19 -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 +2 -2
- metadata +92 -21
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones.md +0 -5
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_colors.md +0 -1
- data/dist/chunks/_typeahead-CPM091Hj.js +0 -22
- data/dist/chunks/_weekday_stacked-BzIANIYX.js +0 -45
- data/dist/chunks/lazysizes-DHz07jlL.js +0 -1
- data/dist/chunks/lib-Bg2KFzpz.js +0 -29
- /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_default_rails.html.erb → _draggable_default.html.erb} +0 -0
- /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_default.md → _draggable_default_react.md} +0 -0
- /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_multiple_containers_rails.html.erb → _draggable_multiple_containers.html.erb} +0 -0
- /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_multiple_containers.md → _draggable_multiple_containers_react.md} +0 -0
- /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_with_cards_rails.html.erb → _draggable_with_cards.html.erb} +0 -0
- /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_with_cards.md → _draggable_with_cards_react.md} +0 -0
- /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_with_list_rails.html.erb → _draggable_with_list.html.erb} +0 -0
- /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_with_list.md → _draggable_with_list_react.md} +0 -0
- /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_with_selectable_list_rails.html.erb → _draggable_with_selectable_list.html.erb} +0 -0
- /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_with_selectable_list.md → _draggable_with_selectable_list_react.md} +0 -0
- /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_with_table.md → _draggable_with_table_rails.md} +0 -0
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: c1e18bde3ae663443a8f2abd729409a4dd3606b200f20af8e682deefcb536628
|
4
|
+
data.tar.gz: 15b2591ea63aafe61e85edace6dede5fb518b1be8c7ef38e2dac80f28398a171
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 65433f86291b38b3f92b055c59da8f29a9aba259175f5e70be216a9696e0a54d2ac1500db582214db292f5257de8bbfe2d094c7c601b115906da2a4c2b2a1c82
|
7
|
+
data.tar.gz: 69557c4012871a0641ef15d9652950ae1e872c6babe475a1035f6a975ec5033b452fe09b4713e0711a7aabbaf1c785bccfba7d5c7e92cd933001ebf78c0b2cb6
|
@@ -1,4 +1,4 @@
|
|
1
|
-
import React, { useContext } from "react"
|
1
|
+
import React, { useContext, useEffect } from "react"
|
2
2
|
import classnames from "classnames"
|
3
3
|
import { flexRender, Row, Cell } from "@tanstack/react-table"
|
4
4
|
|
@@ -32,9 +32,21 @@ export const RegularTableView = ({
|
|
32
32
|
table,
|
33
33
|
selectableRows,
|
34
34
|
hasAnySubRows,
|
35
|
-
|
35
|
+
stickyLeftColumn
|
36
36
|
} = useContext(AdvancedTableContext)
|
37
37
|
|
38
|
+
|
39
|
+
useEffect(() => {
|
40
|
+
if (stickyLeftColumn && Array.isArray(stickyLeftColumn)) {
|
41
|
+
stickyLeftColumn.forEach((columnId) => {
|
42
|
+
const column = table.getColumn(columnId);
|
43
|
+
if (column && column.getCanPin()) {
|
44
|
+
column.pin('left');
|
45
|
+
}
|
46
|
+
});
|
47
|
+
}
|
48
|
+
},[stickyLeftColumn, table]);
|
49
|
+
|
38
50
|
const columnPinning = table.getState().columnPinning || { left: [] };
|
39
51
|
const columnDefinitions = table.options.meta?.columnDefinitions || [];
|
40
52
|
|
@@ -82,7 +94,7 @@ export const RegularTableView = ({
|
|
82
94
|
{row.getVisibleCells().map((cell: Cell<GenericObject, unknown>, i: number) => {
|
83
95
|
const isPinnedLeft = columnPinning.left.includes(cell.column.id);
|
84
96
|
const isLastCell = cell.column.parent?.columns?.at(-1)?.id === cell.column.id;
|
85
|
-
|
97
|
+
const { column } = cell;
|
86
98
|
return (
|
87
99
|
<td
|
88
100
|
align="right"
|
@@ -90,9 +102,17 @@ export const RegularTableView = ({
|
|
90
102
|
`${cell.id}-cell position_relative`,
|
91
103
|
isChrome() ? "chrome-styles" : "",
|
92
104
|
isPinnedLeft && 'pinned-left',
|
105
|
+
stickyLeftColumn && stickyLeftColumn.length > 0 && isPinnedLeft && 'sticky-left',
|
93
106
|
isLastCell && 'last-cell',
|
94
107
|
)}
|
95
108
|
key={`${cell.id}-data`}
|
109
|
+
style={{
|
110
|
+
left: isPinnedLeft
|
111
|
+
? i === 1 //Accounting for set min-width for first column
|
112
|
+
? '180px'
|
113
|
+
: `${column.getStart("left")}px`
|
114
|
+
: undefined,
|
115
|
+
}}
|
96
116
|
>
|
97
117
|
{collapsibleTrail && i === 0 && row.depth > 0 && renderCollapsibleTrail(row.depth)}
|
98
118
|
<span id={`${cell.id}-span`}>
|
@@ -1,6 +1,6 @@
|
|
1
1
|
import React, { useContext } from "react"
|
2
2
|
import classnames from "classnames"
|
3
|
-
import { flexRender, Header, Table } from "@tanstack/react-table"
|
3
|
+
import { flexRender, Header, Table, RowModel } from "@tanstack/react-table"
|
4
4
|
|
5
5
|
import { GenericObject } from "../../types"
|
6
6
|
|
@@ -8,9 +8,16 @@ import { GlobalProps } from "../../utilities/globalProps"
|
|
8
8
|
|
9
9
|
import Flex from "../../pb_flex/_flex"
|
10
10
|
import Checkbox from "../../pb_checkbox/_checkbox"
|
11
|
+
import Dropdown from "../../pb_dropdown/_dropdown"
|
12
|
+
import DropdownTrigger from "../../pb_dropdown/subcomponents/DropdownTrigger"
|
13
|
+
import DropdownOption from "../../pb_dropdown/subcomponents/DropdownOption"
|
14
|
+
import DropdownContainer from "../../pb_dropdown/subcomponents/DropdownContainer"
|
15
|
+
import Icon from "../../pb_icon/_icon"
|
11
16
|
|
12
17
|
import { SortIconButton } from "./SortIconButton"
|
13
18
|
import { ToggleIconButton } from "./ToggleIconButton"
|
19
|
+
import { displayIcon } from "../Utilities/IconHelpers"
|
20
|
+
import { updateExpandAndCollapseState } from "../Utilities/ExpansionControlHelpers"
|
14
21
|
|
15
22
|
import { isChrome } from "../Utilities/BrowserCheck"
|
16
23
|
|
@@ -40,11 +47,17 @@ export const TableHeaderCell = ({
|
|
40
47
|
table
|
41
48
|
}: TableHeaderCellProps) => {
|
42
49
|
const {
|
50
|
+
expanded,
|
51
|
+
setExpanded,
|
52
|
+
expandByDepth,
|
53
|
+
onExpandByDepthClick,
|
54
|
+
toggleExpansionIcon,
|
43
55
|
sortControl,
|
44
56
|
responsive,
|
45
57
|
selectableRows,
|
46
58
|
hasAnySubRows,
|
47
59
|
showActionsBar,
|
60
|
+
stickyLeftColumn,
|
48
61
|
inlineRowLoading,
|
49
62
|
isActionBarVisible,
|
50
63
|
} = useContext(AdvancedTableContext);
|
@@ -76,7 +89,9 @@ const cellClassName = classnames(
|
|
76
89
|
`${isChrome() ? "chrome-styles" : ""}`,
|
77
90
|
`${enableSorting ? "table-header-cells-active" : ""}`,
|
78
91
|
{ "pinned-left": responsive === "scroll" && isPinnedLeft },
|
79
|
-
isLastHeaderCell ? "last-header-cell" : ""
|
92
|
+
isLastHeaderCell ? "last-header-cell" : "",
|
93
|
+
stickyLeftColumn && stickyLeftColumn.length > 0 && isPinnedLeft ? 'sticky-left' : "",
|
94
|
+
|
80
95
|
);
|
81
96
|
|
82
97
|
const cellId = `${loading ?
|
@@ -104,6 +119,21 @@ const isToggleExpansionEnabled =
|
|
104
119
|
justifyHeader = isLeafColumn ? "end" : "center";
|
105
120
|
}
|
106
121
|
|
122
|
+
const handleExpandDepth = (depth: number) => {
|
123
|
+
if (onExpandByDepthClick) {
|
124
|
+
const flatRows = table?.getRowModel().flatRows
|
125
|
+
onExpandByDepthClick(depth, flatRows)
|
126
|
+
}
|
127
|
+
const updated = updateExpandAndCollapseState(
|
128
|
+
table.getRowModel(),
|
129
|
+
expanded,
|
130
|
+
undefined,
|
131
|
+
depth
|
132
|
+
)
|
133
|
+
setExpanded(updated)
|
134
|
+
}
|
135
|
+
|
136
|
+
|
107
137
|
return (
|
108
138
|
<th
|
109
139
|
align="right"
|
@@ -111,6 +141,13 @@ const isToggleExpansionEnabled =
|
|
111
141
|
colSpan={header?.colSpan}
|
112
142
|
id={cellId}
|
113
143
|
key={`${header?.id}-header`}
|
144
|
+
style={{
|
145
|
+
left: isPinnedLeft
|
146
|
+
? header?.index === 1 //Accounting for set min-width for first column
|
147
|
+
? '180px'
|
148
|
+
: `${header?.column.getStart("left")}px`
|
149
|
+
: undefined,
|
150
|
+
}}
|
114
151
|
>
|
115
152
|
{header?.isPlaceholder ? null : headerChildren && header?.index === 0 ? (
|
116
153
|
<Flex alignItems="center">
|
@@ -133,9 +170,36 @@ const isToggleExpansionEnabled =
|
|
133
170
|
/>
|
134
171
|
)
|
135
172
|
}
|
136
|
-
{isToggleExpansionEnabled && hasAnySubRows && (
|
173
|
+
{isToggleExpansionEnabled && hasAnySubRows && !expandByDepth && (
|
137
174
|
<ToggleIconButton onClick={handleExpandOrCollapse} />
|
138
175
|
)}
|
176
|
+
{isToggleExpansionEnabled && hasAnySubRows && expandByDepth && (
|
177
|
+
<Dropdown className="expand-by-depth-dropdown-wrapper"
|
178
|
+
options={expandByDepth}
|
179
|
+
>
|
180
|
+
<DropdownTrigger className="gray-icon toggle-all-icon">
|
181
|
+
<Icon icon={displayIcon(toggleExpansionIcon)[0]} />
|
182
|
+
</DropdownTrigger>
|
183
|
+
<DropdownContainer className="expand-by-depth-dropdown">
|
184
|
+
{expandByDepth.map((option:{ [key: string]: any }, index: number) => (
|
185
|
+
<DropdownOption
|
186
|
+
key={index}
|
187
|
+
option={option}
|
188
|
+
padding="none"
|
189
|
+
>
|
190
|
+
<Flex
|
191
|
+
alignItems="center"
|
192
|
+
htmlOptions={{onClick: () => {handleExpandDepth(option.depth)} }}
|
193
|
+
paddingX="sm"
|
194
|
+
paddingY="xs"
|
195
|
+
>
|
196
|
+
{option.label}
|
197
|
+
</Flex>
|
198
|
+
</DropdownOption>
|
199
|
+
))}
|
200
|
+
</DropdownContainer>
|
201
|
+
</Dropdown>
|
202
|
+
)}
|
139
203
|
|
140
204
|
{isToggleExpansionEnabledLoading &&(
|
141
205
|
<div className="loading-toggle-icon header-toggle-icon" />
|
@@ -22,10 +22,9 @@ export function useTableActions({
|
|
22
22
|
// Handle expand/collapse
|
23
23
|
const handleExpandOrCollapse = useCallback(async (row: Row<GenericObject>) => {
|
24
24
|
onToggleExpansionClick && onToggleExpansionClick(row);
|
25
|
-
|
26
25
|
const expandedState = expanded;
|
27
26
|
const targetParent = row?.parentId;
|
28
|
-
const updatedRows = await updateExpandAndCollapseState(table.getRowModel(), expandedState, targetParent);
|
27
|
+
const updatedRows = await updateExpandAndCollapseState(table.getRowModel(), expandedState, targetParent, undefined);
|
29
28
|
setExpanded(updatedRows);
|
30
29
|
}, [expanded, setExpanded, onToggleExpansionClick, table]);
|
31
30
|
|
@@ -1,4 +1,4 @@
|
|
1
|
-
import { RowModel } from "@tanstack/react-table"
|
1
|
+
import { RowModel, Row } from "@tanstack/react-table"
|
2
2
|
import { ExpandedStateObject } from "./types"
|
3
3
|
import { GenericObject } from "../../types"
|
4
4
|
|
@@ -14,30 +14,40 @@ const filterExpandableRows = (expandedState: Record<string, boolean>) => {
|
|
14
14
|
export const updateExpandAndCollapseState = (
|
15
15
|
tableRows: RowModel<GenericObject>,
|
16
16
|
expanded: Record<string, boolean>,
|
17
|
-
targetParent
|
17
|
+
targetParent?: string,
|
18
|
+
targetDepth?: number,
|
18
19
|
) => {
|
19
20
|
const updateExpandedRows: Record<string, boolean> = {};
|
20
|
-
const rows = tableRows.rows;
|
21
|
+
const rows = targetDepth !== undefined ? tableRows.flatRows : tableRows.rows;
|
21
22
|
|
22
|
-
|
23
|
-
const areRowsExpanded = new Set<boolean>();
|
23
|
+
const rowsToToggle: Row<GenericObject>[] = [];
|
24
24
|
|
25
25
|
for (const row of rows) {
|
26
|
-
const shouldBeUpdated =
|
27
|
-
|
26
|
+
const shouldBeUpdated =
|
27
|
+
targetDepth !== undefined
|
28
|
+
? row.depth <= targetDepth
|
29
|
+
: targetParent === undefined
|
30
|
+
? row.depth === 0
|
31
|
+
: targetParent === row.parentId;
|
32
|
+
|
28
33
|
if (shouldBeUpdated) {
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
|
33
|
-
|
34
|
-
|
35
|
-
|
36
|
-
|
37
|
-
|
38
|
-
|
39
|
-
|
40
|
-
|
34
|
+
rowsToToggle.push(row);
|
35
|
+
}
|
36
|
+
}
|
37
|
+
|
38
|
+
// Check if we are expanding or collapsing
|
39
|
+
const anyCollapsed = rowsToToggle.some((row) => !row.getIsExpanded());
|
40
|
+
const isExpandAction = anyCollapsed;
|
41
|
+
|
42
|
+
|
43
|
+
for (const row of rowsToToggle) {
|
44
|
+
const shouldUpdate =
|
45
|
+
isExpandAction || targetDepth === undefined
|
46
|
+
? true
|
47
|
+
: row.depth === targetDepth;
|
48
|
+
|
49
|
+
if (shouldUpdate) {
|
50
|
+
updateExpandedRows[row.id] = isExpandAction;
|
41
51
|
}
|
42
52
|
}
|
43
53
|
|