playbook_ui 14.17.0.pre.alpha.play2065passphrasewithselect7295 → 14.17.0.pre.alpha.playcdntest7233

data/lib/playbook/version.rb

@@ -2,5 +2,5 @@
 
 module Playbook
   PREVIOUS_VERSION = "14.17.0"
-  VERSION = "14.17.0.pre.alpha.play2065passphrasewithselect7295"
+  VERSION = "14.17.0.pre.alpha.playcdntest7233"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 14.17.0.pre.alpha.play2065passphrasewithselect7295
+  version: 14.17.0.pre.alpha.playcdntest7233
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2025-04-21 00:00:00.000000000 Z
+date: 2025-04-16 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -344,14 +344,6 @@ files:
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort.md
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort_control.jsx
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort_control.md
-- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_columns.jsx
-- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_columns.md
-- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_columns_and_header.jsx
-- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_columns_and_header.md
-- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_header.jsx
-- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_header.md
-- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_header_rails.html.erb
-- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_header_rails.md
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_subrow_headers.jsx
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_subrow_headers.md
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_options.jsx
@@ -376,7 +368,6 @@ files:
 - app/pb_kits/playbook/pb_advanced_table/scss_partials/_chrome_styles.scss
 - app/pb_kits/playbook/pb_advanced_table/scss_partials/_loading.scss
 - app/pb_kits/playbook/pb_advanced_table/scss_partials/_pseudo_states.scss
-- app/pb_kits/playbook/pb_advanced_table/scss_partials/advanced_table_sticky_mixin.scss
 - app/pb_kits/playbook/pb_advanced_table/table_body.html.erb
 - app/pb_kits/playbook/pb_advanced_table/table_body.rb
 - app/pb_kits/playbook/pb_advanced_table/table_header.html.erb
@@ -833,12 +824,9 @@ files:
 - app/pb_kits/playbook/pb_copy_button/docs/_copy_button_from.html.erb
 - app/pb_kits/playbook/pb_copy_button/docs/_copy_button_from.jsx
 - app/pb_kits/playbook/pb_copy_button/docs/_copy_button_from.md
-- app/pb_kits/playbook/pb_copy_button/docs/_copy_button_hook.jsx
-- app/pb_kits/playbook/pb_copy_button/docs/_copy_button_hook.md
 - app/pb_kits/playbook/pb_copy_button/docs/example.yml
 - app/pb_kits/playbook/pb_copy_button/docs/index.js
 - app/pb_kits/playbook/pb_copy_button/index.js
-- app/pb_kits/playbook/pb_copy_button/usePBCopy.ts
 - app/pb_kits/playbook/pb_currency/_currency.scss
 - app/pb_kits/playbook/pb_currency/_currency.tsx
 - app/pb_kits/playbook/pb_currency/currency.html.erb
@@ -1849,7 +1837,6 @@ files:
 - app/pb_kits/playbook/pb_layout/sidebar.html.erb
 - app/pb_kits/playbook/pb_layout/sidebar.rb
 - app/pb_kits/playbook/pb_layout/subcomponents/_game.tsx
-- app/pb_kits/playbook/pb_layout/subcomponents/_participant.tsx
 - app/pb_kits/playbook/pb_layout/subcomponents/_round.tsx
 - app/pb_kits/playbook/pb_legend/_legend.scss
 - app/pb_kits/playbook/pb_legend/_legend.tsx
@@ -2208,19 +2195,13 @@ files:
 - app/pb_kits/playbook/pb_online_status/online_status.test.js
 - app/pb_kits/playbook/pb_overlay/_overlay.scss
 - app/pb_kits/playbook/pb_overlay/_overlay.tsx
-- app/pb_kits/playbook/pb_overlay/docs/_overlay_color.jsx
-- app/pb_kits/playbook/pb_overlay/docs/_overlay_color.md
 - app/pb_kits/playbook/pb_overlay/docs/_overlay_default.html.erb
 - app/pb_kits/playbook/pb_overlay/docs/_overlay_default.jsx
 - app/pb_kits/playbook/pb_overlay/docs/_overlay_default.md
-- app/pb_kits/playbook/pb_overlay/docs/_overlay_gradient_opacity.jsx
-- app/pb_kits/playbook/pb_overlay/docs/_overlay_gradient_opacity.md
 - app/pb_kits/playbook/pb_overlay/docs/_overlay_hide_scroll_bar.html.erb
 - app/pb_kits/playbook/pb_overlay/docs/_overlay_hide_scroll_bar.jsx
 - app/pb_kits/playbook/pb_overlay/docs/_overlay_hide_scroll_bar_rails.md
 - app/pb_kits/playbook/pb_overlay/docs/_overlay_hide_scroll_bar_react.md
-- app/pb_kits/playbook/pb_overlay/docs/_overlay_layout.jsx
-- app/pb_kits/playbook/pb_overlay/docs/_overlay_layout.md
 - app/pb_kits/playbook/pb_overlay/docs/_overlay_multi_directional.html.erb
 - app/pb_kits/playbook/pb_overlay/docs/_overlay_multi_directional.jsx
 - app/pb_kits/playbook/pb_overlay/docs/_overlay_multi_directional.md
@@ -3494,11 +3475,11 @@ files:
 - app/pb_kits/playbook/utilities/test/globalProps/truncate.test.js
 - app/pb_kits/playbook/utilities/text.ts
 - app/pb_kits/playbook/utilities/validEmojiChecker.ts
-- dist/chunks/_typeahead-CHd0V9EL.js
-- dist/chunks/_weekday_stacked-BatiLk3-.js
+- dist/chunks/_typeahead-C2GOKWtm.js
+- dist/chunks/_weekday_stacked-CFGTPT0O.js
 - dist/chunks/lazysizes-B7xYodB-.js
-- dist/chunks/lib-BV_AF_eh.js
-- dist/chunks/pb_form_validation-nsvkJU2J.js
+- dist/chunks/lib-BGzBzFZX.js
+- dist/chunks/pb_form_validation-BvNy9Bd6.js
 - dist/chunks/vendor.js
 - dist/menu.yml
 - dist/playbook-doc.js

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

@@ -1,58 +0,0 @@
-import React from "react"
-import AdvancedTable from '../../pb_advanced_table/_advanced_table'
-import MOCK_DATA from "./advanced_table_mock_data.json"
-
-const AdvancedTableStickyColumns = (props) => {
-  const columnDefinitions = [
-    {
-      accessor: "year",
-      label: "Year",
-      id: "year",
-      cellAccessors: ["quarter", "month", "day"],
-    },
-    {
-      accessor: "newEnrollments",
-      label: "New Enrollments",
-      id: "newEnrollments",
-    },
-    {
-      accessor: "scheduledMeetings",
-      label: "Scheduled Meetings",
-      id: "scheduledMeetings",
-    },
-    {
-      accessor: "attendanceRate",
-      label: "Attendance Rate",
-      id: "attendanceRate",
-    },
-    {
-      accessor: "completedClasses",
-      label: "Completed Classes",
-      id: "completedClasses",
-    },
-    {
-      accessor: "classCompletionRate",
-      label: "Class Completion Rate",
-      id: "classCompletionRate",
-    },
-    {
-      accessor: "graduatedStudents",
-      label: "Graduated Students",
-      id: "graduatedStudents",
-    },
-  ]
-
-  return (
-    <div>
-      <AdvancedTable
-          columnDefinitions={columnDefinitions}
-          responsive="none"
-          stickyLeftColumn={["year"]}
-          tableData={MOCK_DATA}
-          {...props}
-      />
-    </div>
-  )
-}
-
-export default AdvancedTableStickyColumns

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

@@ -1,6 +0,0 @@
-To render sticky columns for the Advanced Table, you can use the `stickyLeftColumn` prop. This prop expects an array of the column ids you want to be sticky.
-
-To achieve this:
-- Make sure to provide an id for each column via columnDefinitions as shown below. Id can be any string. 
-- One or multiple columns can be made sticky, it is recommended to set the ids within `stickyLeftColumn` in the order in which the columns are rendered.
-- It is recommended to set `responsive` to none when using `stickyLeftColumn` since responsive just makes the first column sticky and the slightly different styling for `responsive` and `stickyLeftColumn` may override each other in unexpected ways.

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

@@ -1,64 +0,0 @@
-import React from "react"
-import AdvancedTable from '../../pb_advanced_table/_advanced_table'
-import MOCK_DATA from "./advanced_table_mock_data.json"
-
-const AdvancedTableStickyColumnsAndHeader = (props) => {
-  const columnDefinitions = [
-    {
-      accessor: "year",
-      label: "Year",
-      id: "year",
-      cellAccessors: ["quarter", "month", "day"],
-    },
-    {
-      accessor: "newEnrollments",
-      label: "New Enrollments",
-      id: "newEnrollments",
-    },
-    {
-      accessor: "scheduledMeetings",
-      label: "Scheduled Meetings",
-      id: "scheduledMeetings",
-    },
-    {
-      accessor: "attendanceRate",
-      label: "Attendance Rate",
-      id: "attendanceRate",
-    },
-    {
-      accessor: "completedClasses",
-      label: "Completed Classes",
-      id: "completedClasses",
-    },
-    {
-      accessor: "classCompletionRate",
-      label: "Class Completion Rate",
-      id: "classCompletionRate",
-    },
-    {
-      accessor: "graduatedStudents",
-      label: "Graduated Students",
-      id: "graduatedStudents",
-    },
-  ]
-
-  const tableProps = {
-    sticky: true
-  }
-
-  return (
-    <div>
-      <AdvancedTable
-          columnDefinitions={columnDefinitions}
-          maxHeight="xs"
-          responsive="none"
-          stickyLeftColumn={["year"]}
-          tableData={MOCK_DATA}
-          tableProps={tableProps}
-          {...props}
-      />
-    </div>
-  )
-}
-
-export default AdvancedTableStickyColumnsAndHeader

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

@@ -1,8 +0,0 @@
-To achieve a sticky header AND sticky columns together, in addition to the `stickyLeftColumn` logic outlined above, you can:
-
-- Set `sticky: true` via `tableProps`
-- Give the AdvancedTable a `maxHeight` using our [Max Height](https://playbook.powerapp.cloud/visual_guidelines/max_height) global prop. 
-
-**NOTE**: This behavior requires a `maxHeight` to work. The header is sticky within the table container, allowing for it to work along with the column stickiness.
-
-Expand the table above to see this in action.

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

@@ -1,55 +0,0 @@
-import React from "react"
-import AdvancedTable from '../../pb_advanced_table/_advanced_table'
-import MOCK_DATA from "./advanced_table_mock_data.json"
-
-const AdvancedTableStickyHeader = (props) => {
-  const columnDefinitions = [
-    {
-      accessor: "year",
-      label: "Year",
-      cellAccessors: ["quarter", "month", "day"],
-    },
-    {
-      accessor: "newEnrollments",
-      label: "New Enrollments",
-    },
-    {
-      accessor: "scheduledMeetings",
-      label: "Scheduled Meetings",
-    },
-    {
-      accessor: "attendanceRate",
-      label: "Attendance Rate",
-    },
-    {
-      accessor: "completedClasses",
-      label: "Completed Classes",
-    },
-    {
-      accessor: "classCompletionRate",
-      label: "Class Completion Rate",
-    },
-    {
-      accessor: "graduatedStudents",
-      label: "Graduated Students",
-    },
-  ]
-
-  const tableProps = {
-    sticky: true
-  }
-
-  return (
-    <div>
-      <AdvancedTable
-          columnDefinitions={columnDefinitions}
-          responsive="none"
-          tableData={MOCK_DATA}
-          tableProps={tableProps}
-          {...props}
-      />
-    </div>
-  )
-}
-
-export default AdvancedTableStickyHeader

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

@@ -1,3 +0,0 @@
-The `TableProps` prop can also be used to render a sticky header for the Advanced Table.
-
-This doc example showcases how to set a sticky header for a nonresponsive table (see the `responsive` prop set to "none"). To achieve sticky header AND responsive functionality, see the "Sticky Header for Responsive Table" doc example below.

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_header_rails.html.erb

@@ -1,33 +0,0 @@
-<% column_definitions = [
-    {
-      accessor: "year",
-      label: "Year",
-      cellAccessors: ["quarter", "month", "day"],
-    },
-    {
-      accessor: "newEnrollments",
-      label: "New Enrollments",
-    },
-    {
-      accessor: "scheduledMeetings",
-      label: "Scheduled Meetings",
-    },
-    {
-      accessor: "attendanceRate",
-      label: "Attendance Rate",
-    },
-    {
-      accessor: "completedClasses",
-      label: "Completed Classes",
-    },
-    {
-      accessor: "classCompletionRate",
-      label: "Class Completion Rate",
-    },
-    {
-      accessor: "graduatedStudents",
-      label: "Graduated Students",
-    }
-] %>
-
-<%= pb_rails("advanced_table", props: { id: "sticky_header_table", table_data: @table_data, column_definitions: column_definitions, responsive: "none", table_props: { sticky: true }}) %>

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

@@ -1,3 +0,0 @@
-The `table_props` prop can also be used to render a sticky header for the Advanced Table.
-
-This doc example showcases how to set a sticky header for a nonresponsive table (see the `responsive` prop set to "none"). To achieve sticky header AND responsive functionality, see the "[Sticky Header for Responsive Table](https://playbook.powerapp.cloud/kits/advanced_table/react#sticky-header-for-responsive-table)" doc example below.

data/app/pb_kits/playbook/pb_advanced_table/scss_partials/advanced_table_sticky_mixin.scss

@@ -1,97 +0,0 @@
-@mixin advanced-table-sticky-mixin(
-  $border-color,
-  $bg-main,
-  $bg-secondary,
-  $highlight: $info_subtle
-) {
-  border-radius: 4px;
-  box-shadow: 1px 0 0 0px $border-color, -1px 0 0 0px $border-color;
-  display: block;
-  [class^="pb_table"].table-sm.table-card thead tr th:first-child,
-  [class^="pb_table"].table-sm:not(.no-hover).table-card
-    tbody
-    tr
-    td:first-child {
-    border-left-width: 0px !important;
-  }
-  [class^="pb_table"].table-sm.table-card thead tr th:last-child,
-  [class^="pb_table"].table-sm:not(.no-hover).table-card
-    tbody
-    tr
-    td:last-child {
-    border-right-width: 0px;
-  }
-  [class^="pb_table"].table-sm.table-card tbody tr:last-child td:first-child,
-  [class^="pb_table"].table-sm.table-card tbody tr:last-child td:last-child {
-    border-radius: 0 0 0 0;
-  }
-  .table-header-cells:first-child,
-  td:first-child,
-  .pb_table_td:first-child,
-  .checkbox-cell.checkbox-cell-header:first-child,
-  .table-header-cells.sticky-left,
-  [class*="pinned-left"] {
-    background-color: $bg-main;
-    box-shadow: $shadow_deep !important;
-    position: sticky !important;
-    left: 0;
-    z-index: 2;
-  }
-
-  .bg-silver {
-    td:first-child,
-    .sticky-left {
-      background-color: $bg-secondary;
-    }
-  }
-  .bg-row-selection {
-    td:first-child,
-    .sticky-left {
-      background-color: $highlight;
-    }
-  }
-
-  .bg-white {
-    td:first-child,
-    .sticky-left {
-      background-color: $bg-main;
-    }
-  }
-
-  .virtualized-table-row {
-    &.bg-silver td:first-child {
-      background-color: $bg-secondary;
-    }
-    &.bg-white td:first-child {
-      background-color: $bg-main;
-    }
-    &.bg-row-selection td:first-child {
-      background-color: $highlight;
-    }
-  }
-
-  .row-selection-actions-card {
-    border-right-width: 0px;
-    border-left-width: 0px;
-    position: sticky;
-    top: 0;
-    left: 0;
-    border-radius: unset;
-  }
-
-  .checkbox-cell {
-    display: table-cell !important;
-  }
-
-  .sticky-header {
-    thead {
-      th:first-child {
-        box-shadow: 1px 0 10px -2px $border-color !important;
-      }
-    }
-
-    .pb_advanced_table_header {
-      box-shadow: none !important;
-    }
-  }
-}

data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_hook.jsx

@@ -1,54 +0,0 @@
-import React, { useEffect, useState } from 'react'
-import usePBCopy from '../../pb_copy_button/usePBCopy'
-import Body from '../../pb_body/_body'
-import Textarea from '../../pb_textarea/_textarea'
-import Tooltip from '../../pb_tooltip/_tooltip'
-
-const CopyButtonHook = ({...props}) => {
-  // This is how you can use the copy button hook to copy text to the clipboard
-  // eslint-disable-next-line no-unused-vars
-  const [copied, copyToClipboard] = usePBCopy({ from: 'hookbody' })
-  // I added a tooltip so it looks better in the ui
-  const [showTooltip, setShowTooltip] = useState(false)
-
-  const handleCopy = () => {
-    copyToClipboard()
-    setShowTooltip(true)
-    setTimeout(() => setShowTooltip(false), 1500)
-  }
-
-  useEffect(() => {
-    const el = document.getElementById('hookbody')
-    if (!el) return
-
-    el.addEventListener('click', handleCopy)
-    return () => {
-      el.removeEventListener('click', handleCopy)
-    }
-  }, [copyToClipboard])
-
-  return (
-    <div>
-      <Tooltip
-          delay={{ close: 1000 }}
-          forceOpenTooltip={showTooltip}
-          placement="top"
-          showTooltip={false}
-          text="Copied!"
-      >
-        <Body
-            cursor="pointer"
-            id="hookbody"
-            text="I'm a custom copy hook! Click this body to copy this text!"
-        />
-      </Tooltip>
-
-      <Textarea
-          {...props}
-          placeholder="Paste here"
-      />
-    </div>
-  )
-}
-
-export default CopyButtonHook

data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_hook.md

@@ -1,3 +0,0 @@
-We provide a `usePBCopy` hook that you can import to your project. This hook will return a function that you can call to copy the text to the clipboard.
-
-`usePBCopy({ from: 'your_id' })` will grab the `innerText` from `your_id` element, or `value` if it is an input element.

data/app/pb_kits/playbook/pb_copy_button/usePBCopy.ts

@@ -1,45 +0,0 @@
-import { useState, useRef, useEffect } from 'react'
-
-type UsePBCopyProps = {
-  value?: string
-  from?: string
-  timeout?: number
-}
-
-export default function usePBCopy({
-  value = '',
-  from = '',
-  timeout = 0,
-}: UsePBCopyProps) {
-  const [copied, setCopied] = useState(false)
-  const timerRef = useRef<number>()
-
-  const copy = () => {
-    if (!value && !from) return
-
-    if (value) {
-      navigator.clipboard.writeText(value)
-    } else {
-      const el = document.getElementById(from)
-      let text = el?.innerText
-      if (el instanceof HTMLTextAreaElement || el instanceof HTMLInputElement) {
-        text = el.value
-      }
-      if (text) navigator.clipboard.writeText(text)
-    }
-
-    setCopied(true)
-    window.clearTimeout(timerRef.current)
-    timerRef.current = window.setTimeout(() => {
-      setCopied(false)
-    }, timeout)
-  }
-
-  useEffect(() => {
-    return () => {
-      window.clearTimeout(timerRef.current)
-    }
-  }, [])
-
-  return [copied, copy] as const
-}

data/app/pb_kits/playbook/pb_layout/subcomponents/_participant.tsx

@@ -1,79 +0,0 @@
-import React from 'react'
-import classnames from 'classnames'
-
-import { buildCss } from '../../utilities/props'
-import { GlobalProps, globalProps, globalInlineProps } from '../../utilities/globalProps'
-
-import Avatar from "../../pb_avatar/_avatar";
-import Body from "../../pb_body/_body";
-import Flex from "../../pb_flex/_flex";
-import Badge from "../../pb_badge/_badge";
-import Detail from "../../pb_detail/_detail";
-import Background from "../../pb_background/_background";
-
-type LayoutParticipantProps = {
-  className?: string,
-  name?: string,
-  territory?: string,
-  points?: string,
-  rank?: string,
-  avatar?: string,
-  winner?: boolean,
-  self?: boolean,
-} & GlobalProps
-
-export const Participant = (props: LayoutParticipantProps) => {
-  const { className, name = 'To be determined...', territory = '', points, rank, avatar, winner, self, hasLastWinnerAndSelf } = props
-  const dynamicInlineProps = globalInlineProps(props)
-  const isLastWinnerAndSelf = hasLastWinnerAndSelf && self && winner
-  const classes = classnames(buildCss('layout_participant', winner ? 'winner' : '', self ? 'self' : '', isLastWinnerAndSelf ? 'last' : ''), globalProps(props), className)
-  return (
-    <Background
-        backgroundColor={winner ? "success_subtle" : "white"}
-        className={classes}
-        padding="xs"
-        style={dynamicInlineProps}
-    >
-      <Flex justify="between">
-        <Avatar
-            imageUrl={avatar}
-            marginRight="sm"
-            name={name}
-            size="sm"
-        />
-        <Body flexGrow={1}>
-          <Flex justify="between">
-            <Body
-                color={winner && !isLastWinnerAndSelf ? "success" : "default"}
-                truncate={1}
-            >
-              {winner ? <strong>{name}{self ? ' (You)' : ''}</strong> : name + (self && !isLastWinnerAndSelf ? ' (You)' : '')}
-            </Body>
-            <Body
-                color={winner && !isLastWinnerAndSelf ? "success" : "light"}
-                display="flex"
-            >
-              {points && (<>
-                <strong>{points}</strong>
-                <Detail
-                    color={winner && !isLastWinnerAndSelf ? "success" : "light"}
-                    text="pts"
-                />
-              </>)}
-            </Body>
-          </Flex>
-          <Body color="light">
-            {territory}
-            &nbsp;
-            <Badge
-                text={rank}
-                variant={winner && !isLastWinnerAndSelf ? "success" : self ? "notification" : "neutral"}
-            />
-          </Body>
-        </Body>
-      </Flex>
-    </Background>
-  )
-}
-
-export default Participant