playbook_ui 14.17.0.pre.rc.1 → 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/Utilities/types.ts +1 -1
- data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss +429 -137
- data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx +97 -3
- data/app/pb_kits/playbook/pb_advanced_table/advanced_table.rb +6 -1
- data/app/pb_kits/playbook/pb_advanced_table/advanced_table.test.jsx +20 -7
- 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_fullscreen.jsx +90 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_fullscreen.md +3 -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 +11 -4
- data/app/pb_kits/playbook/pb_advanced_table/docs/index.js +7 -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_collapsible/__snapshots__/collapsible.test.js.snap +14 -7
- data/app/pb_kits/playbook/pb_contact/contact.test.js +7 -7
- 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_date_range_inline/date_range_inline.test.js +2 -2
- data/app/pb_kits/playbook/pb_date_range_stacked/date_range_stacked.test.js +1 -1
- 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/context/index.tsx +58 -17
- 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 +71 -3
- 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/docs/_dropdown_with_autocomplete.jsx +6 -6
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete_and_custom_display.jsx +6 -6
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display.jsx +6 -6
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display_rails.html.erb +8 -8
- data/app/pb_kits/playbook/pb_dropdown/dropdown.test.jsx +3 -3
- 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 +45 -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_icon/icon.test.js +9 -9
- data/app/pb_kits/playbook/pb_icon_circle/icon_circle.test.js +1 -1
- data/app/pb_kits/playbook/pb_icon_stat_value/icon_stat_value.test.js +1 -1
- data/app/pb_kits/playbook/pb_icon_value/icon_value.test.js +1 -1
- data/app/pb_kits/playbook/pb_label_value/label_value.test.js +1 -1
- data/app/pb_kits/playbook/pb_layout/_layout.scss +127 -0
- data/app/pb_kits/playbook/pb_layout/_layout.tsx +47 -7
- data/app/pb_kits/playbook/pb_layout/docs/_layout_bracket.jsx +394 -0
- data/app/pb_kits/playbook/pb_layout/docs/_layout_bracket.md +5 -0
- data/app/pb_kits/playbook/pb_layout/docs/example.yml +1 -0
- data/app/pb_kits/playbook/pb_layout/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_layout/layout.test.js +4 -0
- data/app/pb_kits/playbook/pb_layout/subcomponents/_game.tsx +121 -0
- data/app/pb_kits/playbook/pb_layout/subcomponents/_participant.tsx +79 -0
- data/app/pb_kits/playbook/pb_layout/subcomponents/_round.tsx +74 -0
- 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_link/link.test.jsx +2 -2
- data/app/pb_kits/playbook/pb_nav/_nav_item.test.js +5 -3
- 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_section_separator/docs/_section_separator_vertical.md +1 -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_stat_change/stat_change.test.js +8 -4
- 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/styles/_striped.scss +3 -3
- 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_tooltip/tooltip.html.erb +2 -5
- 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/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_highlight.jsx +4 -4
- data/app/pb_kits/playbook/pb_typeahead/typeahead.html.erb +2 -5
- data/app/pb_kits/playbook/pb_user/user.html.erb +1 -6
- data/app/pb_kits/playbook/pb_user_badge/user_badge.html.erb +1 -6
- data/dist/chunks/_typeahead-D8CsVBZO.js +22 -0
- data/dist/chunks/_weekday_stacked-D3oLTSkH.js +45 -0
- data/dist/chunks/lib-BmTAc7Nc.js +29 -0
- data/dist/chunks/{pb_form_validation-BvNy9Bd6.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/kit_base.rb +4 -4
- data/lib/playbook/version.rb +2 -2
- metadata +98 -20
- 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-Djo6qCne.js +0 -22
- data/dist/chunks/_weekday_stacked-DIIHW0OV.js +0 -45
- data/dist/chunks/lib-BGzBzFZX.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
@@ -60,123 +60,120 @@ const DraggableDropZones = (props) => {
|
|
60
60
|
|
61
61
|
return (
|
62
62
|
<>
|
63
|
-
|
64
|
-
|
65
|
-
|
66
|
-
|
67
|
-
|
68
|
-
|
69
|
-
|
70
|
-
|
71
|
-
|
72
|
-
|
73
|
-
marginBottom="xs"
|
74
|
-
textAlign="center"
|
75
|
-
>
|
76
|
-
{"Shadow"}
|
77
|
-
</Caption>
|
78
|
-
<Draggable.Container
|
79
|
-
htmlOptions={{style:{ width: "200px"}}}
|
80
|
-
{...props}
|
81
|
-
>
|
82
|
-
{initialShadowState.map(({ id, text }) => (
|
83
|
-
<Card dragId={id}
|
84
|
-
draggableItem
|
85
|
-
key={id}
|
63
|
+
<Flex justify="between"
|
64
|
+
{...props}
|
65
|
+
>
|
66
|
+
<FlexItem marginRight="xl">
|
67
|
+
<DraggableProvider
|
68
|
+
dropZone={{type: "shadow"}}
|
69
|
+
initialItems={dataShadow}
|
70
|
+
onReorder={(items) => setInitialShadowState(items)}
|
71
|
+
>
|
72
|
+
<Caption
|
86
73
|
marginBottom="xs"
|
87
|
-
|
74
|
+
text="Shadow"
|
75
|
+
textAlign="center"
|
76
|
+
/>
|
77
|
+
<Draggable.Container
|
78
|
+
htmlOptions={{style:{ width: "200px"}}}
|
88
79
|
{...props}
|
89
80
|
>
|
90
|
-
|
91
|
-
|
81
|
+
{initialShadowState.map(({ id, text }) => (
|
82
|
+
<Card dragId={id}
|
83
|
+
draggableItem
|
84
|
+
key={id}
|
85
|
+
marginBottom="xs"
|
86
|
+
padding="xs"
|
87
|
+
{...props}
|
92
88
|
>
|
93
|
-
<
|
94
|
-
|
95
|
-
|
96
|
-
|
97
|
-
|
98
|
-
|
99
|
-
|
100
|
-
|
101
|
-
|
102
|
-
|
103
|
-
|
104
|
-
|
105
|
-
|
106
|
-
|
107
|
-
|
108
|
-
|
109
|
-
|
110
|
-
|
111
|
-
|
112
|
-
|
113
|
-
{"Outline"}
|
114
|
-
</Caption>
|
115
|
-
<Draggable.Container
|
116
|
-
htmlOptions={{style:{ width: "200px"}}}
|
117
|
-
{...props}
|
118
|
-
>
|
119
|
-
{initialOutlineState.map(({ id, text }) => (
|
120
|
-
<Card
|
121
|
-
dragId={id}
|
122
|
-
draggableItem
|
123
|
-
key={id}
|
89
|
+
<Flex alignItems="stretch"
|
90
|
+
flexDirection="column"
|
91
|
+
>
|
92
|
+
<Body
|
93
|
+
text={text}
|
94
|
+
{...props}
|
95
|
+
/>
|
96
|
+
</Flex>
|
97
|
+
</Card>
|
98
|
+
))}
|
99
|
+
</Draggable.Container>
|
100
|
+
</DraggableProvider>
|
101
|
+
</FlexItem>
|
102
|
+
<FlexItem marginRight="xl">
|
103
|
+
<DraggableProvider
|
104
|
+
dropZone={{type: "outline"}}
|
105
|
+
initialItems={dataOutline}
|
106
|
+
onReorder={(items) => setInitialOutlineState(items)}
|
107
|
+
>
|
108
|
+
<Caption
|
124
109
|
marginBottom="xs"
|
125
|
-
|
110
|
+
text="Outline"
|
111
|
+
textAlign="center"
|
112
|
+
/>
|
113
|
+
<Draggable.Container
|
114
|
+
htmlOptions={{style:{ width: "200px"}}}
|
126
115
|
{...props}
|
127
116
|
>
|
128
|
-
|
129
|
-
|
130
|
-
|
117
|
+
{initialOutlineState.map(({ id, text }) => (
|
118
|
+
<Card
|
119
|
+
dragId={id}
|
120
|
+
draggableItem
|
121
|
+
key={id}
|
122
|
+
marginBottom="xs"
|
123
|
+
padding="xs"
|
124
|
+
{...props}
|
131
125
|
>
|
132
|
-
<
|
133
|
-
|
134
|
-
|
135
|
-
|
136
|
-
|
137
|
-
|
138
|
-
|
139
|
-
|
140
|
-
|
141
|
-
|
142
|
-
|
143
|
-
|
144
|
-
|
145
|
-
|
146
|
-
|
147
|
-
|
148
|
-
|
149
|
-
|
150
|
-
|
151
|
-
|
152
|
-
|
153
|
-
</Caption>
|
154
|
-
<Draggable.Container
|
155
|
-
htmlOptions={{style:{ width: "200px"}}}
|
156
|
-
{...props}
|
157
|
-
>
|
158
|
-
{initialLineState.map(({ id, text }) => (
|
159
|
-
<Card dragId={id}
|
160
|
-
draggableItem
|
161
|
-
key={id}
|
126
|
+
<Flex
|
127
|
+
alignItems="stretch"
|
128
|
+
flexDirection="column"
|
129
|
+
>
|
130
|
+
<Body
|
131
|
+
text={text}
|
132
|
+
{...props}
|
133
|
+
/>
|
134
|
+
</Flex>
|
135
|
+
</Card>
|
136
|
+
))}
|
137
|
+
</Draggable.Container>
|
138
|
+
</DraggableProvider>
|
139
|
+
</FlexItem>
|
140
|
+
<FlexItem>
|
141
|
+
<DraggableProvider
|
142
|
+
dropZone={{type: "line"}}
|
143
|
+
initialItems={dataLine}
|
144
|
+
onReorder={(items) => setInitialLineState(items)}
|
145
|
+
>
|
146
|
+
<Caption
|
162
147
|
marginBottom="xs"
|
163
|
-
|
148
|
+
text="Line"
|
149
|
+
textAlign="center"
|
150
|
+
/>
|
151
|
+
<Draggable.Container
|
152
|
+
htmlOptions={{style:{ width: "200px"}}}
|
164
153
|
{...props}
|
165
154
|
>
|
166
|
-
|
167
|
-
|
155
|
+
{initialLineState.map(({ id, text }) => (
|
156
|
+
<Card dragId={id}
|
157
|
+
draggableItem
|
158
|
+
key={id}
|
159
|
+
marginBottom="xs"
|
160
|
+
padding="xs"
|
161
|
+
{...props}
|
168
162
|
>
|
169
|
-
<
|
170
|
-
|
171
|
-
|
172
|
-
|
173
|
-
|
174
|
-
|
175
|
-
|
176
|
-
|
177
|
-
|
178
|
-
|
179
|
-
|
163
|
+
<Flex alignItems="stretch"
|
164
|
+
flexDirection="column"
|
165
|
+
>
|
166
|
+
<Body
|
167
|
+
text={text}
|
168
|
+
{...props}
|
169
|
+
/>
|
170
|
+
</Flex>
|
171
|
+
</Card>
|
172
|
+
))}
|
173
|
+
</Draggable.Container>
|
174
|
+
</DraggableProvider>
|
175
|
+
</FlexItem>
|
176
|
+
</Flex>
|
180
177
|
</>
|
181
178
|
);
|
182
179
|
};
|
@@ -0,0 +1,55 @@
|
|
1
|
+
<% initial_items = [
|
2
|
+
{
|
3
|
+
id: "141",
|
4
|
+
url: "https://unsplash.it/500/400/?image=633",
|
5
|
+
},
|
6
|
+
{
|
7
|
+
id: "142",
|
8
|
+
url: "https://unsplash.it/500/400/?image=634",
|
9
|
+
},
|
10
|
+
{
|
11
|
+
id: "143",
|
12
|
+
url: "https://unsplash.it/500/400/?image=637",
|
13
|
+
},
|
14
|
+
] %>
|
15
|
+
|
16
|
+
<% next_init_items = [
|
17
|
+
{
|
18
|
+
id: "151",
|
19
|
+
url: "https://unsplash.it/500/400/?image=633",
|
20
|
+
},
|
21
|
+
{
|
22
|
+
id: "152",
|
23
|
+
url: "https://unsplash.it/500/400/?image=634",
|
24
|
+
},
|
25
|
+
{
|
26
|
+
id: "153",
|
27
|
+
url: "https://unsplash.it/500/400/?image=637",
|
28
|
+
},
|
29
|
+
] %>
|
30
|
+
|
31
|
+
<%= pb_rails("draggable", props: {initial_items: initial_items, drop_zone_type: "shadow", drop_zone_color: "primary"}) do %>
|
32
|
+
<%= pb_rails("draggable/draggable_container") do %>
|
33
|
+
<%= pb_rails("flex", props: { gap: "sm" }) do %>
|
34
|
+
<% initial_items.each do |item| %>
|
35
|
+
<%= pb_rails("draggable/draggable_item", props:{drag_id: item[:id]}) do %>
|
36
|
+
<%= pb_rails("image", props: { alt: item[:id], size: "md", url: item[:url] }) %>
|
37
|
+
<% end %>
|
38
|
+
<% end %>
|
39
|
+
<% end %>
|
40
|
+
<% end %>
|
41
|
+
<% end %>
|
42
|
+
|
43
|
+
<br/>
|
44
|
+
|
45
|
+
<%= pb_rails("draggable", props: {initial_items: next_init_items, drop_zone_type: "outline", drop_zone_color: "purple"}) do %>
|
46
|
+
<%= pb_rails("draggable/draggable_container") do %>
|
47
|
+
<%= pb_rails("flex", props: { gap: "sm" }) do %>
|
48
|
+
<% initial_items.each do |item| %>
|
49
|
+
<%= pb_rails("draggable/draggable_item", props:{drag_id: item[:id]}) do %>
|
50
|
+
<%= pb_rails("image", props: { alt: item[:id], size: "md", url: item[:url] }) %>
|
51
|
+
<% end %>
|
52
|
+
<% end %>
|
53
|
+
<% end %>
|
54
|
+
<% end %>
|
55
|
+
<% end %>
|
@@ -6,6 +6,8 @@ import Caption from '../../pb_caption/_caption'
|
|
6
6
|
import Draggable from '../../pb_draggable/_draggable'
|
7
7
|
import { DraggableProvider } from '../../pb_draggable/context'
|
8
8
|
|
9
|
+
|
10
|
+
|
9
11
|
// Initial items to be dragged
|
10
12
|
const dataPrimary = [
|
11
13
|
{
|
@@ -42,54 +44,54 @@ const DraggableDropZonesColors = (props) => {
|
|
42
44
|
|
43
45
|
return (
|
44
46
|
<>
|
45
|
-
|
46
|
-
|
47
|
-
|
48
|
-
|
49
|
-
|
50
|
-
|
51
|
-
|
52
|
-
|
53
|
-
|
54
|
-
|
55
|
-
|
56
|
-
|
57
|
-
|
58
|
-
|
59
|
-
|
60
|
-
|
61
|
-
|
62
|
-
|
63
|
-
|
64
|
-
|
65
|
-
|
66
|
-
|
67
|
-
|
68
|
-
|
69
|
-
|
70
|
-
|
71
|
-
|
72
|
-
|
73
|
-
|
74
|
-
|
75
|
-
|
76
|
-
|
77
|
-
|
78
|
-
|
79
|
-
|
80
|
-
|
81
|
-
|
82
|
-
|
83
|
-
|
84
|
-
|
85
|
-
|
86
|
-
|
87
|
-
|
88
|
-
|
89
|
-
|
90
|
-
|
91
|
-
|
92
|
-
|
47
|
+
<Caption marginBottom="xs"
|
48
|
+
text="Primary"
|
49
|
+
/>
|
50
|
+
<DraggableProvider
|
51
|
+
dropZone={{type: "shadow", color: "primary"}}
|
52
|
+
initialItems={dataPrimary}
|
53
|
+
onReorder={(items) => setInitialPrimaryState(items)}
|
54
|
+
>
|
55
|
+
<Draggable.Container {...props}>
|
56
|
+
<Flex>
|
57
|
+
{initialPrimaryState.map(({ id, url }) => (
|
58
|
+
<Draggable.Item dragId={id}
|
59
|
+
key={id}
|
60
|
+
marginRight="sm"
|
61
|
+
>
|
62
|
+
<Image alt={id}
|
63
|
+
size="md"
|
64
|
+
url={url}
|
65
|
+
/>
|
66
|
+
</Draggable.Item>
|
67
|
+
))}
|
68
|
+
</Flex>
|
69
|
+
</Draggable.Container>
|
70
|
+
</DraggableProvider>
|
71
|
+
<Caption marginBottom="xs"
|
72
|
+
text="Purple"
|
73
|
+
/>
|
74
|
+
<DraggableProvider
|
75
|
+
dropZone={{type: "outline", color: "purple"}}
|
76
|
+
initialItems={dataPurple}
|
77
|
+
onReorder={(items) => setInitialPurpleState(items)}
|
78
|
+
>
|
79
|
+
<Draggable.Container {...props}>
|
80
|
+
<Flex>
|
81
|
+
{initialPurpleState.map(({ id, url }) => (
|
82
|
+
<Draggable.Item dragId={id}
|
83
|
+
key={id}
|
84
|
+
marginRight="sm"
|
85
|
+
>
|
86
|
+
<Image alt={id}
|
87
|
+
size="md"
|
88
|
+
url={url}
|
89
|
+
/>
|
90
|
+
</Draggable.Item>
|
91
|
+
))}
|
92
|
+
</Flex>
|
93
|
+
</Draggable.Container>
|
94
|
+
</DraggableProvider>
|
93
95
|
</>
|
94
96
|
);
|
95
97
|
};
|
@@ -0,0 +1 @@
|
|
1
|
+
The default `color` for Draggable kit drop zones is "neutral", with "primary" or "purple" as additional options.
|
@@ -0,0 +1 @@
|
|
1
|
+
The default `color` for Draggable kit drop zones is "neutral", with "primary" or "purple" as additional options. When `type` is set to "line", the default color is "primary" and "purple" is the only other option.
|
@@ -0,0 +1,110 @@
|
|
1
|
+
import React, { useState } from "react";
|
2
|
+
import Flex from '../../pb_flex/_flex'
|
3
|
+
import Caption from '../../pb_caption/_caption'
|
4
|
+
import Draggable from '../_draggable'
|
5
|
+
import { DraggableProvider } from '../context'
|
6
|
+
import Image from '../../pb_image/_image'
|
7
|
+
|
8
|
+
|
9
|
+
|
10
|
+
const dataLineVertical = [
|
11
|
+
{
|
12
|
+
id: "211",
|
13
|
+
url: "https://unsplash.it/500/400/?image=633",
|
14
|
+
},
|
15
|
+
{
|
16
|
+
id: "212",
|
17
|
+
url: "https://unsplash.it/500/400/?image=634",
|
18
|
+
},
|
19
|
+
{
|
20
|
+
id: "213",
|
21
|
+
url: "https://unsplash.it/500/400/?image=637",
|
22
|
+
},
|
23
|
+
];
|
24
|
+
|
25
|
+
const dataLineHorizontal = [
|
26
|
+
{
|
27
|
+
id: "2111",
|
28
|
+
url: "https://unsplash.it/500/400/?image=633",
|
29
|
+
},
|
30
|
+
{
|
31
|
+
id: "2122",
|
32
|
+
url: "https://unsplash.it/500/400/?image=634",
|
33
|
+
},
|
34
|
+
{
|
35
|
+
id: "2133",
|
36
|
+
url: "https://unsplash.it/500/400/?image=637",
|
37
|
+
},
|
38
|
+
];
|
39
|
+
|
40
|
+
const DraggableDropZones = (props) => {
|
41
|
+
const [initialLineVerticalState, setInitialLineVerticalState] = useState(dataLineVertical);
|
42
|
+
const [initialLineHorizontalState, setInitialLineHorizontalState] = useState(dataLineHorizontal);
|
43
|
+
|
44
|
+
return (
|
45
|
+
<>
|
46
|
+
<Caption marginBottom="xs"
|
47
|
+
marginTop="xl"
|
48
|
+
text="Vertical"
|
49
|
+
/>
|
50
|
+
<DraggableProvider
|
51
|
+
dropZone={{ type: "line", color: "purple" }}
|
52
|
+
initialItems={dataLineVertical}
|
53
|
+
onReorder={(items) => setInitialLineVerticalState(items)}
|
54
|
+
>
|
55
|
+
<Draggable.Container {...props}>
|
56
|
+
<Flex flexDirection="column"
|
57
|
+
height="367px"
|
58
|
+
>
|
59
|
+
{initialLineVerticalState.map(({ id, url }) => (
|
60
|
+
<Draggable.Item dragId={id}
|
61
|
+
key={id}
|
62
|
+
marginBottom="sm"
|
63
|
+
>
|
64
|
+
<Image alt={id}
|
65
|
+
size="md"
|
66
|
+
url={url}
|
67
|
+
/>
|
68
|
+
</Draggable.Item>
|
69
|
+
))}
|
70
|
+
</Flex>
|
71
|
+
</Draggable.Container>
|
72
|
+
</DraggableProvider>
|
73
|
+
<Caption marginBottom="xs"
|
74
|
+
marginTop="xl"
|
75
|
+
text="Horizontal"
|
76
|
+
/>
|
77
|
+
<Flex>
|
78
|
+
<DraggableProvider
|
79
|
+
dropZone={{ type: "line", direction: "horizontal" }}
|
80
|
+
initialItems={dataLineHorizontal}
|
81
|
+
onReorder={(items) => setInitialLineHorizontalState(items)}
|
82
|
+
>
|
83
|
+
<Draggable.Container
|
84
|
+
htmlOptions={{style:{ width: "285px"}}}
|
85
|
+
{...props}
|
86
|
+
>
|
87
|
+
<Flex alignItems="stretch"
|
88
|
+
flexDirection="row"
|
89
|
+
height="110px"
|
90
|
+
>
|
91
|
+
{initialLineHorizontalState.map(({ id, url }) => (
|
92
|
+
<Draggable.Item dragId={id}
|
93
|
+
key={id}
|
94
|
+
marginRight="sm"
|
95
|
+
>
|
96
|
+
<Image alt={id}
|
97
|
+
size="md"
|
98
|
+
url={url}
|
99
|
+
/>
|
100
|
+
</Draggable.Item>
|
101
|
+
))}
|
102
|
+
</Flex>
|
103
|
+
</Draggable.Container>
|
104
|
+
</DraggableProvider>
|
105
|
+
</Flex>
|
106
|
+
</>
|
107
|
+
);
|
108
|
+
};
|
109
|
+
|
110
|
+
export default DraggableDropZones;
|
@@ -0,0 +1,5 @@
|
|
1
|
+
When using the "line" style, make sure to set the appropriate `direction` attribute within the `dropZone` prop based on the orientation of your draggable view. By default, this is set to "vertical," but it can also be adjusted to "horizontal." Note that the direction attribute only applies to the "line" style and does not affect other drop zone styles. The default `color` for "line" is "primary" and "purple" is the only alternative color option.
|
2
|
+
|
3
|
+
The length of the line is calculated based off of the width (for "vertical") or height (for "horizontal") of the parent container holding the draggable items.
|
4
|
+
|
5
|
+
Additionally, if the parent container of the `DraggableProvider`/`DraggableContainer` (or a subcontainer within) does not have a set height (for "vertical") or width (for "horizontal"), like the [Draggable Drop Zones doc example](https://playbook.powerapp.cloud/kits/draggable/react#draggable-drop-zones) does, elements on the page may jump up (for "vertical") or to the left (for "horizontal") when an item is actively being dragged. To prevent this, give a parent element a fixed height (for "vertical") or width (for "horizontal") as demonstrated in this doc example.
|
@@ -0,0 +1,5 @@
|
|
1
|
+
The Draggable kit lets you customize the style of drop zones that appear when dragging an item.
|
2
|
+
|
3
|
+
By default, drop zones are in the "ghost" style, but you can also choose from "shadow," "outline," and "line."
|
4
|
+
|
5
|
+
When using the "line" type, make sure to set the appropriate `direction` attribute within the `dropZone` prop based on the orientation of your draggable view. By default, this is set to "vertical," but it can also be adjusted to "horizontal." Note that the direction attribute only applies to the "line" type and does not affect other drop zone styles. For more on the "line" style in particular, check out the [Draggable Drop Zones Line doc example](https://playbook.powerapp.cloud/kits/draggable/react#draggable-drop-zones-line).
|
@@ -0,0 +1,42 @@
|
|
1
|
+
<% initial_items = [
|
2
|
+
{
|
3
|
+
id: "100",
|
4
|
+
url: "https://unsplash.it/500/400/?image=638",
|
5
|
+
},
|
6
|
+
{
|
7
|
+
id: "200",
|
8
|
+
url: "https://unsplash.it/500/400/?image=639",
|
9
|
+
},
|
10
|
+
{
|
11
|
+
id: "300",
|
12
|
+
url: "https://unsplash.it/500/400/?image=640",
|
13
|
+
},
|
14
|
+
] %>
|
15
|
+
|
16
|
+
<%= pb_rails("draggable", props: {initial_items: initial_items}) do %>
|
17
|
+
<%= pb_rails("draggable/draggable_container") do %>
|
18
|
+
<%= pb_rails("flex") do %>
|
19
|
+
<% initial_items.each do |item| %>
|
20
|
+
<%= pb_rails("draggable/draggable_item", props:{drag_id: item[:id]}) do %>
|
21
|
+
<%= pb_rails("image", props: { alt: item[:id], size: "md", url: item[:url], margin: "xs" }) %>
|
22
|
+
<% end %>
|
23
|
+
<% end %>
|
24
|
+
<% end %>
|
25
|
+
<% end %>
|
26
|
+
<% end %>
|
27
|
+
|
28
|
+
<script>
|
29
|
+
const itemIds = ["item_100", "item_200", "item_300"];
|
30
|
+
|
31
|
+
itemIds.forEach((id) => {
|
32
|
+
const element = document.getElementById(id);
|
33
|
+
if (element) {
|
34
|
+
element.addEventListener("dragstart", (event) => {
|
35
|
+
console.log(`${id} drag start!`);
|
36
|
+
});
|
37
|
+
element.addEventListener("dragend", (event) => {
|
38
|
+
console.log(`${id} drag end!`);
|
39
|
+
});
|
40
|
+
}
|
41
|
+
});
|
42
|
+
</script>
|
@@ -0,0 +1 @@
|
|
1
|
+
You can add drag event listeners for `drag`, `dragend`, `dragenter`, `dragleave`, `dragover`, `dragstart`, and `drop`.
|
@@ -1,7 +1,7 @@
|
|
1
1
|
import React, { useState } from "react";
|
2
2
|
|
3
3
|
import Flex from '../../pb_flex/_flex'
|
4
|
-
import { DraggableProvider } from '
|
4
|
+
import { DraggableProvider } from '../context'
|
5
5
|
import Avatar from '../../pb_avatar/_avatar'
|
6
6
|
import Body from '../../pb_body/_body'
|
7
7
|
import Table from '../../pb_table/_table'
|
@@ -2,4 +2,6 @@ The draggable kit can also be used in conjunction with the table kit to create d
|
|
2
2
|
|
3
3
|
- Wrap the Table with the `DraggableProvider` and manage state as shown.
|
4
4
|
- use the `draggableContainer` prop on the Table.Body to designate it as the Draggable Container
|
5
|
-
- use the `draggableItem` prop on the Table.Row to designate it as the Draggable Item. Make sure to also pass id to the `dragId` prop here.
|
5
|
+
- use the `draggableItem` prop on the Table.Row to designate it as the Draggable Item. Make sure to also pass id to the `dragId` prop here.
|
6
|
+
|
7
|
+
We recommending using the default `dropZone type` with the Table kit.
|
@@ -4,14 +4,19 @@ examples:
|
|
4
4
|
- draggable_with_list: Draggable with List Kit
|
5
5
|
- draggable_with_selectable_list: Draggable with SelectableList Kit
|
6
6
|
- draggable_with_cards: Draggable with Cards
|
7
|
-
-
|
7
|
+
- draggable_with_table: Draggable with Table
|
8
8
|
- draggable_multiple_containers: Dragging Across Multiple Containers
|
9
|
+
- draggable_drop_zones: Draggable Drop Zones
|
10
|
+
- draggable_drop_zones_colors: Draggable Drop Zones Colors
|
11
|
+
- draggable_drop_zones_line: Draggable Drop Zones Line
|
9
12
|
|
10
13
|
rails:
|
11
|
-
-
|
12
|
-
-
|
13
|
-
-
|
14
|
-
-
|
14
|
+
- draggable_default: Default
|
15
|
+
- draggable_with_list: Draggable with List Kit
|
16
|
+
- draggable_with_selectable_list: Draggable with SelectableList Kit
|
17
|
+
- draggable_with_cards: Draggable with Cards
|
15
18
|
- draggable_with_table: Draggable with Table
|
16
|
-
-
|
17
|
-
|
19
|
+
- draggable_multiple_containers: Dragging Across Multiple Containers
|
20
|
+
- draggable_drop_zones: Draggable Drop Zones
|
21
|
+
- draggable_drop_zones_colors: Draggable Drop Zones Colors
|
22
|
+
- draggable_event_listeners: Draggable Event Listeners
|
@@ -3,4 +3,7 @@ export { default as DraggableWithCards } from './_draggable_with_cards.jsx'
|
|
3
3
|
export { default as DraggableWithList } from './_draggable_with_list.jsx'
|
4
4
|
export { default as DraggableWithSelectableList } from './_draggable_with_selectable_list.jsx'
|
5
5
|
export { default as DraggableMultipleContainers } from './_draggable_multiple_containers.jsx'
|
6
|
-
export { default as
|
6
|
+
export { default as DraggableWithTable } from './_draggable_with_table.jsx'
|
7
|
+
export { default as DraggableDropZones } from './_draggable_drop_zones.jsx'
|
8
|
+
export { default as DraggableDropZonesColors } from './_draggable_drop_zones_colors.jsx'
|
9
|
+
export { default as DraggableDropZonesLine } from './_draggable_drop_zones_line.jsx'
|
@@ -5,9 +5,17 @@ module Playbook
|
|
5
5
|
class Draggable < ::Playbook::KitBase
|
6
6
|
prop :initial_items, type: Playbook::Props::Array,
|
7
7
|
default: []
|
8
|
+
prop :drop_zone_type, type: Playbook::Props::Enum,
|
9
|
+
values: %w[ghost shadow outline line],
|
10
|
+
default: "ghost"
|
11
|
+
prop :drop_zone_color, type: Playbook::Props::Enum,
|
12
|
+
values: %w[neutral primary purple],
|
13
|
+
default: "neutral"
|
8
14
|
|
9
15
|
def data
|
10
|
-
Hash(prop(:data)).merge(pb_draggable: true
|
16
|
+
Hash(prop(:data)).merge(pb_draggable: true,
|
17
|
+
drop_zone_type: drop_zone_type,
|
18
|
+
drop_zone_color: drop_zone_color)
|
11
19
|
end
|
12
20
|
|
13
21
|
def classname
|