playbook_ui 16.9.0 → 16.10.0.pre.alpha.PLAY3053advancedtablebottompinnedrowsreact17469

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header.jsx

@@ -1,21 +1,13 @@
 import React from "react"
 import AdvancedTable from '../../pb_advanced_table/_advanced_table'
-
-const tableData = Array.from({ length: 15 }, (_, index) => ({
-  year: String(2020 + index),
-  newEnrollments: String(20 + index),
-  scheduledMeetings: String(10 + index),
-  attendanceRate: `${50 + index}%`,
-  completedClasses: String(3 + index),
-  classCompletionRate: `${30 + index}%`,
-  graduatedStudents: String(19 + index),
-}))
+import MOCK_DATA from "./advanced_table_mock_data.json"
 
 const AdvancedTableTablePropsStickyHeader = (props) => {
   const columnDefinitions = [
     {
       accessor: "year",
       label: "Year",
+      cellAccessors: ["quarter", "month", "day"],
     },
     {
       accessor: "newEnrollments",
@@ -44,18 +36,17 @@ const AdvancedTableTablePropsStickyHeader = (props) => {
   ]
 
   const tableProps = {
-    sticky: true
+    sticky: true,
   }
 
   return (
-    <div style={{ maxHeight: "320px", overflowY: "auto" }}>
-      <AdvancedTable
-          columnDefinitions={columnDefinitions}
-          tableData={tableData}
-          tableProps={tableProps}
-          {...props}
-      />
-    </div>
+    <AdvancedTable
+        columnDefinitions={columnDefinitions}
+        maxHeight="xs"
+        tableData={MOCK_DATA}
+        tableProps={tableProps}
+        {...props}
+    />
   )
 }
 

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header_rails.md

@@ -2,10 +2,6 @@ Create a sticky header that works for responsive Advanced Tables by setting `sti
 
 **NOTE**: This behavior requires a `max_height` to work. The header is sticky within the table container, allowing for it to work along with the first column stickiness of a responsive table on smaller screen sizes.
 
-Scroll inside the table preview to see the header stick.
-
-This example builds flat table data inline for the docs preview. For typical `table_data` setup, see [Default (Required Props)](/kits/advanced_table/default/rails#advanced_table_beta).
-
 Expand the table above to see this in action.
 
 A sticky header on a nonresponsive table is demonstrated in the ["Sticky Header"](https://playbook.powerapp.cloud/kits/advanced_table#sticky-header) doc example above.

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header_react.md

@@ -1,9 +1,7 @@
-Create a sticky header that works for responsive Advanced Tables by setting `sticky: true` via `tableProps` and wrapping the table in a scroll container (or using `maxHeight`).
+Create a sticky header that works for responsive Advanced Tables by setting `sticky: true` via `tableProps` and giving the AdvancedTable a `maxHeight` using our [Max Height](https://playbook.powerapp.cloud/global_props/max_height) global prop. 
 
-**NOTE**: The header is sticky within the table scroll area. The live example uses flat rows so you can scroll inside the preview without expanding subrows.
+**NOTE**: This behavior requires a `maxHeight` to work. The header is sticky within the table container, allowing for it to work along with the first column stickiness of a responsive table on smaller screen sizes.
 
-This example builds flat table data inline for the docs preview. For typical `tableData` setup, see [Default (Required Props)](/kits/advanced_table/default/react#advanced_table_default).
-
-Expand the table above to see responsive behavior in action.
+Expand the table above to see this in action.
 
 A sticky header on a nonresponsive table is demonstrated in the ["Sticky Header"](https://playbook.powerapp.cloud/kits/advanced_table/react#sticky-header) doc example above.

data/app/pb_kits/playbook/pb_advanced_table/docs/_playground.json

@@ -28,7 +28,8 @@
         "rowId": "1",
         "backgroundColor": "#0056CF",
         "fontColor": "#FFFFFF",
-        "expandButtonColor": "#FFFFFF"
+        "expandButtonColor": "#FFFFFF",
+        "fontWeight": "bold"
       }
     ],
     "expandByDepth": [
@@ -233,11 +234,6 @@
         "customSort": true
       }
     },
-    "fullScreenControl": {
-      "requires": {
-        "allowFullScreen": true
-      }
-    },
     "enableSortingRemoval": {
       "requires": {
         "enableSorting": true
@@ -2954,9 +2950,7 @@
   },
   "hiddenProps": [
     "sortControl",
-    "fullScreenControl",
     "expandedControl",
-    "allowFullScreen",
     "pagination",
     "paginationProps"
   ],

data/app/pb_kits/playbook/pb_advanced_table/docs/_playground.overrides.json

@@ -73,9 +73,7 @@
   },
   "hiddenProps": [
     "sortControl",
-    "fullScreenControl",
     "expandedControl",
-    "allowFullScreen",
     "pagination",
     "paginationProps"
   ],
@@ -106,7 +104,7 @@
     "tableProps": {
       "container": false
     },
-    "rowStyling": [{ "rowId": "1", "backgroundColor": "#0056CF", "fontColor": "#FFFFFF", "expandButtonColor": "#FFFFFF" }],
+    "rowStyling": [{ "rowId": "1", "backgroundColor": "#0056CF", "fontColor": "#FFFFFF", "expandButtonColor": "#FFFFFF", "fontWeight": "bold" }],
     "expandByDepth": [
       {
         "depth": 0,
@@ -291,11 +289,6 @@
         "customSort": true
       }
     },
-    "fullScreenControl": {
-      "requires": {
-        "allowFullScreen": true
-      }
-    },
     "enableSortingRemoval": {
       "requires": {
         "enableSorting": true

data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml

@@ -89,5 +89,4 @@ examples:
   - advanced_table_column_styling_background_multi: Column Styling Background Color with Multiple Headers
   - advanced_table_padding_control: Padding Control using Column Styling
   - advanced_table_column_border_color: Column Group Border Color
-  - advanced_table_fullscreen: Fullscreen
   - advanced_table_infinite_scroll: Infinite Scroll

data/app/pb_kits/playbook/pb_advanced_table/docs/index.js

@@ -23,7 +23,6 @@ export { default as AdvancedTableTablePropsStickyHeader } from './_advanced_tabl
 export { default as AdvancedTableColumnHeadersCustomCell } from './_advanced_table_column_headers_custom_cell.jsx'
 export { default as AdvancedTableColumnHeadersVerticalBorder } from './_advanced_table_column_headers_vertical_border.jsx'
 export { default as AdvancedTableInlineEditing } from './_advanced_table_inline_editing.jsx'
-export { default as AdvancedTableFullscreen } from './_advanced_table_fullscreen.jsx'
 export { default as AdvancedTableStickyColumns } from './_advanced_table_sticky_columns.jsx'
 export { default as AdvancedTableStickyHeader } from './_advanced_table_sticky_header.jsx'
 export { default as AdvancedTableStickyColumnsAndHeader } from './_advanced_table_sticky_columns_and_header.jsx'

data/app/pb_kits/playbook/pb_advanced_table/index.js

@@ -1,6 +1,11 @@
 import PbEnhancedElement from "../pb_enhanced_element";
 import { updateSelectionActionBar } from "./advanced_table_action_bar";
 import { setArrowVisibility, toggleVisibility } from "../utilities/domHelpers";
+import {
+  updateStickyActionBarHeight as measureStickyActionBarHeight,
+  updateStickyHeaderRowHeights as measureStickyHeaderRowHeights,
+  updateStickyLayoutHeights,
+} from "./Utilities/StickyLayoutHelper";
 
 const ADVANCED_TABLE_SELECTOR = "[data-advanced-table]";
 const DOWN_ARROW_SELECTOR = "#advanced-table_open_icon";
@@ -196,7 +201,7 @@ export default class PbAdvancedTable extends PbEnhancedElement {
     if (table.dataset.pbAdvancedTableInitialized) return;
     table.dataset.pbAdvancedTableInitialized = "true";
 
-    // Measure header height so pinned rows don't overlap when header wraps (e.g. mobile)
+    // Measure header/action bar height so sticky offsets stay accurate.
     if (mainTable) {
       PbAdvancedTable.updateStickyHeaderRowHeights(mainTable);
       const resizeObserver = new ResizeObserver(() => {
@@ -204,6 +209,12 @@ export default class PbAdvancedTable extends PbEnhancedElement {
         PbAdvancedTable.updatePinnedRowsStickyTops(mainTable);
       });
       resizeObserver.observe(table);
+
+      const actionBar = mainTable.querySelector(".row-selection-actions-card");
+      if (actionBar) {
+        resizeObserver.observe(actionBar);
+      }
+
       mainTable._advancedTableHeaderResizeObserver = resizeObserver;
     }
 
@@ -337,32 +348,11 @@ export default class PbAdvancedTable extends PbEnhancedElement {
    * multi-row sticky headers use the correct offset. Re-run when header wraps (e.g. mobile).
    */
   static updateStickyHeaderRowHeights(advancedTableWrapper) {
-    if (!advancedTableWrapper) return;
-    const table = advancedTableWrapper.querySelector("table.pb_table");
-    const thead = table?.querySelector("thead");
-    if (!thead) return;
-
-    const rows = Array.from(thead.querySelectorAll("tr"));
-    let totalHeight = 0;
-    rows.forEach((tr, index) => {
-      const h = tr.offsetHeight;
-      if (index === 0) {
-        advancedTableWrapper.style.setProperty(
-          "--advanced-table-header-row-0-height",
-          `${h}px`
-        );
-      } else if (index === 1) {
-        advancedTableWrapper.style.setProperty(
-          "--advanced-table-header-row-1-height",
-          `${h}px`
-        );
-      }
-      totalHeight += h;
-    });
-    advancedTableWrapper.style.setProperty(
-      "--advanced-table-header-height",
-      `${totalHeight}px`
-    );
+    measureStickyHeaderRowHeights(advancedTableWrapper);
+  }
+
+  static updateStickyActionBarHeight(advancedTableWrapper) {
+    return measureStickyActionBarHeight(advancedTableWrapper);
   }
 
   /**
@@ -378,7 +368,8 @@ export default class PbAdvancedTable extends PbEnhancedElement {
       (tr) => tr.style.display !== "none" && tr.offsetParent !== null
     );
 
-    const headerOffset = "var(--advanced-table-header-height, 44px)";
+    const headerOffset =
+      "calc(var(--advanced-table-header-height, 44px) + var(--advanced-table-action-bar-height, 0px))";
     visibleRows.forEach((tr, index) => {
       tr.style.top = `calc(${headerOffset} + 2.5em * ${index})`;
     });
@@ -589,7 +580,7 @@ window.expandAllSubRows = (element, rowDepth) => {
 // Fix header height and pinned row sticky tops on load (header wrap + collapsed rows)
 function updateAllAdvancedTableStickyHeights() {
   document.querySelectorAll(".pb_advanced_table").forEach((wrapper) => {
-    PbAdvancedTable.updateStickyHeaderRowHeights(wrapper);
+    updateStickyLayoutHeights(wrapper);
     PbAdvancedTable.updatePinnedRowsStickyTops(wrapper);
   });
 }

data/app/pb_kits/playbook/pb_advanced_table/kit.schema.json

@@ -274,18 +274,6 @@
         "react"
       ]
     },
-    "allowFullScreen": {
-      "type": "boolean",
-      "platforms": [
-        "react"
-      ]
-    },
-    "fullScreenControl": {
-      "type": "function",
-      "platforms": [
-        "react"
-      ]
-    },
     "enableSorting": {
       "type": "boolean",
       "platforms": [

data/app/pb_kits/playbook/pb_advanced_table/table_body.rb

@@ -230,7 +230,7 @@ module Playbook
 
       # Build inline style for sticky pinned row (matches React). Pass via html_options so the tr gets the attribute.
       def build_pinned_row_style(pinned_index, background: "white")
-        header_offset = "var(--advanced-table-header-height, 44px)"
+        header_offset = "calc(var(--advanced-table-header-height, 44px) + var(--advanced-table-action-bar-height, 0px))"
         row_offset = "calc(2.5em * #{pinned_index})"
         "position: sticky; top: calc(#{header_offset} + #{row_offset}); z-index: 3; background: #{background};"
       end

data/app/pb_kits/playbook/pb_advanced_table/table_row.html.erb

@@ -3,6 +3,7 @@
   button_color = row_style&.[](:expand_button_color)
   bg_color = row_style&.[](:background_color)
   font_color = row_style&.[](:font_color)
+  font_weight = row_style&.[](:font_weight)
   tr_options = (object.html_options || {}).stringify_keys
   tr_options["class"] = [tr_options["class"], object.classname].reject(&:blank?).join(" ")
 %>
@@ -14,7 +15,7 @@
     <% end %>
     <% object.column_definitions.each_with_index do |column, index| %>
         <% next unless column[:accessor].present? %>
-        <% component_info = object.cell_component_info(column, index, bg_color, font_color) %>
+        <% component_info = object.cell_component_info(column, index, bg_color, font_color, font_weight) %>
         <%= pb_rails(component_info[:name], props: component_info[:props]) do %>
             <%= pb_rails("flex", props:{ align: "center", justify: object.justify_for(column, index), classname: object.loading ? "loading-cell" : "" }) do %>
                 <% if collapsible_trail && index.zero? %>

data/app/pb_kits/playbook/pb_advanced_table/table_row.rb

@@ -107,9 +107,10 @@ module Playbook
       end
 
       # Uses a regular table/table_cell component if there is no custom background color; if there is a cell_background_color uses a background component with tag "td"
-      def cell_component_info(column, index, bg_color, font_color)
+      def cell_component_info(column, index, bg_color, font_color, font_weight = nil)
         column_font_color = cell_font_color(column)
         effective_font_color = column_font_color || font_color
+        effective_font_weight = font_weight_value(font_weight)
 
         if has_custom_background_color?(column)
           custom_bg_color = cell_background_color(column)
@@ -119,11 +120,15 @@ module Playbook
             tag: "td",
             classname: td_classname(column, index),
           }
-          component_props[:html_options] = { style: { color: effective_font_color } } if effective_font_color.present?
+          style_hash = {}
+          style_hash[:color] = effective_font_color if effective_font_color.present?
+          style_hash[:"font-weight"] = effective_font_weight if effective_font_weight.present?
+          component_props[:html_options] = { style: style_hash } if style_hash.present?
         else
           component_name = "table/table_cell"
           style_hash = { "background-color": bg_color }
           style_hash[:color] = effective_font_color if effective_font_color.present?
+          style_hash[:"font-weight"] = effective_font_weight if effective_font_weight.present?
           component_props = {
             html_options: {
               style: style_hash,
@@ -216,6 +221,15 @@ module Playbook
         end
       end
 
+      def font_weight_value(font_weight)
+        case font_weight.to_s
+        when "bold"
+          "700"
+        when "regular"
+          "400"
+        end
+      end
+
     private
 
       def custom_renderer_value(column, index)

data/app/pb_kits/playbook/pb_badge/kit.schema.json

@@ -20,7 +20,7 @@
       ]
     },
     "removeOnClick": {
-      "type": "ReactNode",
+      "type": "function",
       "platforms": [
         "react"
       ]

data/app/pb_kits/playbook/pb_button_toolbar/kit.schema.json

@@ -8,7 +8,7 @@
   ],
   "props": {
     "onClick": {
-      "type": "ReactNode",
+      "type": "function",
       "platforms": [
         "react"
       ]

data/app/pb_kits/playbook/pb_card/card.rb

@@ -15,7 +15,7 @@ module Playbook
                            values: %w[xs sm md lg xl none rounded],
                            default: "md"
       prop :background, type: Playbook::Props::Enum,
-                        values: %w[white light dark product_1_background product_1_highlight product_2_background product_2_highlight product_3_background product_3_highlight product_4_background product_4_highlight product_5_background product_5_highlight product_6_background product_6_highlight product_7_background product_7_highlight product_8_background product_8_highlight product_9_background product_9_highlight product_10_background product_10_highlight windows siding doors solar roofing gutters insulation none success_subtle warning_subtle error_subtle info_subtle neutral_subtle],
+                        values: %w[white light dark product_1_background product_1_highlight product_2_background product_2_highlight product_3_background product_3_highlight product_4_background product_4_highlight product_5_background product_5_highlight product_6_background product_6_highlight product_7_background product_7_highlight product_8_background product_8_highlight product_9_background product_9_highlight product_10_background product_10_highlight product_11_background product_11_highlight windows siding doors solar roofing gutters insulation none success_subtle warning_subtle error_subtle info_subtle neutral_subtle],
                         default: "none"
       prop :drag_id, type: Playbook::Props::String
       prop :draggable_item, type: Playbook::Props::Boolean,

data/app/pb_kits/playbook/pb_card/kit.schema.json

@@ -37,6 +37,8 @@
         "product_9_highlight",
         "product_10_background",
         "product_10_highlight",
+        "product_11_background",
+        "product_11_highlight",
         "windows",
         "siding",
         "doors",

data/app/pb_kits/playbook/pb_checkbox/kit.schema.json

@@ -51,7 +51,7 @@
       ]
     },
     "onChange": {
-      "type": "ReactNode",
+      "type": "function",
       "platforms": [
         "react"
       ]
@@ -106,7 +106,7 @@
       "platforms": [
         "rails"
       ],
-      "type": "string"
+      "type": "GenericObject"
     },
     "required": {
       "platforms": [

data/app/pb_kits/playbook/pb_circle_icon_button/kit.schema.json

@@ -44,7 +44,7 @@
       "default": false
     },
     "onClick": {
-      "type": "ReactNode",
+      "type": "function",
       "platforms": [
         "react"
       ]
@@ -106,7 +106,7 @@
       "platforms": [
         "rails"
       ],
-      "type": "string"
+      "type": "GenericObject"
     }
   },
   "globalProps": true,

data/app/pb_kits/playbook/pb_date_picker/_date_picker.scss

@@ -80,3 +80,9 @@
     content: none;
   }
 }
+
+.pb_date_picker_floating_shell {
+  margin: 0;
+  padding: 0;
+  pointer-events: auto;
+}

data/app/pb_kits/playbook/pb_date_picker/_date_picker.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react'
+import React, { useContext, useEffect } from 'react'
 import classnames from 'classnames'
 
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
@@ -6,6 +6,7 @@ import { deprecatedProps, globalProps, GlobalProps } from '../utilities/globalPr
 import { getAllIcons } from "../utilities/icons/allicons"
 import { camelToSnakeCase } from '../utilities/text'
 
+import { DialogContext } from '../pb_dialog/_dialog_context'
 import datePickerHelper from './date_picker_helper'
 import Icon from '../pb_icon/_icon'
 import Caption from '../pb_caption/_caption'
@@ -87,6 +88,7 @@ type DatePickerProps = {
   thisRangesEndToday?: boolean,
   timeFormat?: string,
   type?: string,
+  yearAscending?: boolean,
   yearRange?: number[],
   controlsStartId?: string,
     controlsEndId?: string,
@@ -140,6 +142,7 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
     showTimezone = false,
     staticPosition = true,
     thisRangesEndToday = false,
+    yearAscending = false,
     yearRange = [1900, 2100],
     controlsStartId,
     controlsEndId,
@@ -147,6 +150,8 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
     syncEndWith,
   } = props
 
+  const dialogCtx = useContext(DialogContext)
+
   const ariaProps = buildAriaProps(aria)
   const normalizedDefaultDate = normalizeDefaultDate(defaultDate)
   const filterResetDefaultSerialized = serializeDefaultDateForFilterReset(normalizedDefaultDate)
@@ -184,6 +189,7 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
       format,
       hideIcon,
       inLine,
+      inline: inLine,
       maxDate,
       minDate,
       mode,
@@ -199,14 +205,25 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
       showTimezone,
       staticPosition,
       thisRangesEndToday,
+      yearAscending,
       yearRange,
       controlsStartId,
       controlsEndId,
       syncStartWith,
       syncEndWith,
       required: false,
+      dialogPortalTarget: dialogCtx?.selectMenuPortalTarget ?? null,
     }, scrollContainer)
-  }, initializeOnce ? [] : undefined)
+
+    return () => {
+      const input = document.getElementById(String(pickerId)) as
+        | (HTMLElement & { _flatpickr?: { destroy: () => void }; _pbDatePickerOpenUnsub?: () => void })
+        | null
+      input?._pbDatePickerOpenUnsub?.()
+      delete input?._pbDatePickerOpenUnsub
+      input?._flatpickr?.destroy()
+    }
+  }, initializeOnce ? [initializeOnce, dialogCtx?.selectMenuPortalTarget, pickerId] : undefined)
 
   const filteredProps = {...props}
   if (filteredProps.marginBottom === undefined) {

data/app/pb_kits/playbook/pb_date_picker/date_picker.html.erb

@@ -96,22 +96,73 @@
         })
       }
 
+      const disconnectPopoverWatch = (input) => {
+        if (!input) return
+
+        if (input._pbDatePickerPopoverObserver) {
+          input._pbDatePickerPopoverObserver.disconnect()
+          delete input._pbDatePickerPopoverObserver
+        }
+
+        delete input.dataset.pbDatePickerPopoverWatch
+      }
+
       const loadDatePicker = () => {
         const input = document.getElementById("<%= object.picker_id %>")
 
-        if (!input || input._flatpickr) return true
+        if (!input || input._flatpickr) {
+          disconnectPopoverWatch(input)
+          return true
+        }
         if (typeof window.datePickerHelper !== "function") return false
 
+        const popoverTooltip = input.closest(".pb_popover_tooltip")
+        if (popoverTooltip && !popoverTooltip.classList.contains("show")) {
+          return false
+        }
+
         window.datePickerHelper(<%= object.date_picker_config %>, "<%= object.scroll_container %>")
         initQuickPickChangeListener(input)
+        disconnectPopoverWatch(input)
 
         return true
       }
 
+      const watchPopoverVisibility = () => {
+        const input = document.getElementById("<%= object.picker_id %>")
+        if (!input || input.dataset.pbDatePickerPopoverWatch) return
+
+        const popoverTooltip = input.closest(".pb_popover_tooltip")
+        if (!popoverTooltip) return
+
+        input.dataset.pbDatePickerPopoverWatch = "true"
+        const tryInitWhenVisible = () => {
+          if (!input.isConnected || !popoverTooltip.isConnected) {
+            disconnectPopoverWatch(input)
+            return
+          }
+
+          if (popoverTooltip.classList.contains("show")) {
+            loadDatePicker()
+          }
+        }
+
+        const observer = new MutationObserver(tryInitWhenVisible)
+        input._pbDatePickerPopoverObserver = observer
+        observer.observe(popoverTooltip, { attributes: true, attributeFilter: ["class"] })
+        tryInitWhenVisible()
+      }
+
       let attempts = 0
       const retryLoad = () => {
         if (loadDatePicker()) return
 
+        const input = document.getElementById("<%= object.picker_id %>")
+        if (input?.closest(".pb_popover_tooltip")) {
+          watchPopoverVisibility()
+          return
+        }
+
         if (attempts++ < 20) {
           setTimeout(retryLoad, 100)
         }
@@ -134,6 +185,12 @@
       if (<%= !object.custom_event_type.empty? %>) {
         window.addEventListener("<%= object.custom_event_type %>", retryLoad)
       }
+
+      document.addEventListener("turbo:before-cache", () => {
+        const input = document.getElementById("<%= object.picker_id %>")
+        disconnectPopoverWatch(input)
+        input?._flatpickr?.destroy()
+      })
     })()
   <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_date_picker/date_picker.rb

@@ -89,6 +89,8 @@ module Playbook
                            default: ""
       prop :cursor, type: Playbook::Props::String,
                     default: "pointer"
+      prop :year_ascending, type: Playbook::Props::Boolean,
+                            default: false
 
       def classname
         default_margin_bottom = margin_bottom.present? ? "" : " mb_sm"
@@ -122,6 +124,7 @@ module Playbook
           staticPosition: static_position,
           thisRangesEndToday: this_ranges_end_today,
           yearRange: year_range,
+          yearAscending: year_ascending,
           controlsStartId: controls_start_id,
           controlsEndId: controls_end_id,
           syncStartWith: sync_start_with,