playbook_ui_docs 15.8.0.pre.rc.0 → 16.0.0.pre.alpha.fixiconsvgdataattrspropagation13513

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: a1da1d6d1ef24651b4b2d68d7d6fb4d24418a93237ede041deab2386aad9590e
-  data.tar.gz: 8bc4c34d0ed65dc094b8cf3e187a99af9a0f947df3eafd56973a9b2781a8486a
+  metadata.gz: 8bbf557f52e4d4578fdbf8302eaacd37df4e14e819bf2a704ceb1adba8c5b580
+  data.tar.gz: 37ac9fd11f5e28aef15f7d37605f0a88fc3db7742a4edde7ddb66f90e7b350c2
 SHA512:
-  metadata.gz: b518dbb81c1684003780e9e096dccbc0bc428511d31e0a8a74dc2847a33ab84cc8283a84ae76731bfe34a622e7da2e03fe081fa421c966320734399a4ea9d902
-  data.tar.gz: 685a9397116fbd96752f7294021be526cbcea9c12cb174f5a9579797bd28e50a08b0ce90b4947550318b2d64d153867274ad367adcdbb9154666d02fa3248d8b
+  metadata.gz: 9281f9b6106bbc8d58ef97c060fc96c453f816bae1143647b327c8e81ad534729af9f62eb12110ec3acc13c44b0a2188644a5d28530fe19d4b14355dfec83f9d
+  data.tar.gz: 8435b416dc226929bbd1febe7dce3f312b701e79ffc9f3aa7caea9e00745d6146e3296742cb4c9bb93fd1e56c917802185347cbcc85613cdc95c40846f800651

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_quickpick_custom.jsx

@@ -0,0 +1,56 @@
+import React from "react"
+import Dropdown from "../_dropdown"
+
+const DropdownQuickpickCustom = (props) => (
+  <div>
+    <Dropdown
+        customQuickPickDates={{
+          dates: [
+            // Allow Playbook to handle the logic...
+            {
+              label: "Last 15 months",
+              value: {
+                timePeriod: "months",
+                amount: 15,
+              },
+            },
+            // Or, be explicit with an exact date range for more control...
+            {
+              label: "First Week of June 2022",
+              value: ["06/01/2022", "06/07/2022"],
+            },
+          ],
+        }}
+        label="Date Range"
+        marginBottom="sm"
+        onSelect={(selectedItem) => console.log(selectedItem)}
+        variant="quickpick"
+        {...props}
+    />
+    <Dropdown
+        customQuickPickDates={{
+          dates: [
+            {
+              label: "Last 15 months",
+              value: {
+                timePeriod: "months",
+                amount: 15,
+              },
+            },
+            {
+              label: "First Week of June 2022",
+              value: ["06/01/2022", "06/07/2022"],
+            },
+          ],
+          override: false,
+        }}
+        label="Date Range - Append to Defaults"
+        onSelect={(selectedItem) => console.log(selectedItem)}
+        variant="quickpick"
+        {...props}
+    />
+  </div>
+)
+
+export default DropdownQuickpickCustom
+

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_quickpick_custom.md

@@ -0,0 +1,10 @@
+The `customQuickPickDates` prop allows for defining custom quick pick date options for the dropdown. The prop accepts an object with two properties: `dates` and `override`.
+
+**The `dates` property** accepts an array of objects. Each object has `label` and `value` properties. The `label` is what will be displayed in the dropdown menu. The `value` property defines the date range that will be selected, and can be:
+- An array of two date strings representing a specific range (e.g., `["06/01/2022", "06/07/2022"]`)
+- An object with `timePeriod` and `amount` properties for dynamic date calculations:
+  - The `timePeriod` property accepts `"days"`, `"weeks"`, `"months"`, `"quarters"`, or `"years"`, representing past time periods calculated from today.
+  - The `amount` property accepts any number.
+
+**The `override` property** is a boolean that controls whether custom dates replace or append to the default quick pick options. Default is `true` (replaces defaults). Set to `false` to append your custom dates to the default quick pick options.
+

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_quickpick_custom_rails.html.erb

@@ -0,0 +1,64 @@
+<%= pb_rails("dropdown", props: {
+  custom_quick_pick_dates: {
+    dates: [
+      # Allow Playbook to handle the logic...
+      {
+        label: "Last 15 months",
+        value: {
+          time_period: "months",
+          amount: 15
+        }
+      },
+      # Or, be explicit with an exact date range for more control...
+      {
+        label: "First Week of June 2022",
+        value: ["06/01/2022", "06/07/2022"]
+      }
+    ]
+  },
+  id: "date-range-quickpick-custom",
+  label: "Date Range",
+  margin_bottom: "sm",
+  variant: "quickpick"
+}) %>
+
+<%= pb_rails("dropdown", props: {
+  custom_quick_pick_dates: {
+    override: false,
+    dates: [
+      {
+        label: "Last 15 months",
+        value: {
+          time_period: "months",
+          amount: 15
+        }
+      },
+      {
+        label: "First Week of June 2022",
+        value: ["06/01/2022", "06/07/2022"]
+      }
+    ]
+  },
+  id: "date-range-quickpick-custom-append-to-defaults",
+  label: "Date Range - Append to Defaults",
+  variant: "quickpick"
+}) %>
+
+<script>
+  const dropdown1 = document.getElementById("date-range-quickpick-custom");
+  if (dropdown1) {
+    dropdown1.addEventListener("pb:dropdown:selected", (e) => {
+      const option = e.detail;
+      console.log("Selected option:", option);
+    });
+  }
+
+  const dropdown2 = document.getElementById("date-range-quickpick-custom-append-to-defaults");
+  if (dropdown2) {
+    dropdown2.addEventListener("pb:dropdown:selected", (e) => {
+      const option = e.detail;
+      console.log("Selected option:", option);
+    });
+  }
+</script>
+

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_quickpick_custom_rails.md

@@ -0,0 +1,10 @@
+The `custom_quick_pick_dates` prop allows for defining custom quick pick date options for the dropdown. The prop accepts an object with two properties: `dates` and `override`.
+
+**The `dates` property** accepts an array of objects. Each object has `label` and `value` properties. The `label` is what will be displayed in the dropdown menu. The `value` property defines the date range that will be selected, and can be:
+- An array of two date strings representing a specific range (e.g., `["06/01/2022", "06/07/2022"]`)
+- An object with `time_period` and `amount` properties for dynamic date calculations:
+  - The `time_period` property accepts `"days"`, `"weeks"`, `"months"`, `"quarters"`, or `"years"`, representing past time periods calculated from today.
+  - The `amount` property accepts any number.
+
+**The `override` property** is a boolean that controls whether custom dates replace or append to the default quick pick options. Default is `true` (replaces defaults). Set to `false` to append your custom dates to the default quick pick options.
+

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

@@ -25,6 +25,7 @@ examples:
   - dropdown_quickpick_rails: Quick Pick Variant
   - dropdown_quickpick_range_end_rails: Quick Pick Variant (Range Ends Today)
   - dropdown_quickpick_default_dates: Quick Pick Variant (Default Dates)
+  - dropdown_quickpick_custom_rails: Quick Pick Variant (Custom Quick Pick Dates)
   - dropdown_quickpick_with_date_pickers_rails: Quick Pick with Date Pickers
   - dropdown_quickpick_with_date_pickers_default_rails: Quick Pick with Date Pickers (Default Value)
 
@@ -57,6 +58,7 @@ examples:
   - dropdown_quickpick: Quick Pick Variant
   - dropdown_quickpick_range_end: Quick Pick Variant (Range Ends Today)
   - dropdown_quickpick_default_dates: Quick Pick Variant (Default Dates)
+  - dropdown_quickpick_custom: Quick Pick Variant (Custom Quick Pick Dates)
   - dropdown_quickpick_with_date_pickers: Quick Pick Variant with Date Pickers
 
 

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

@@ -26,4 +26,5 @@ export {default as DropdownWithCustomActiveStyleOptions} from './_dropdown_with_
 export { default as DropdownQuickpick } from './_dropdown_quickpick.jsx'
 export { default as DropdownQuickpickRangeEnd } from './_dropdown_quickpick_range_end.jsx'
 export { default as DropdownQuickpickDefaultDates } from './_dropdown_quickpick_default_dates.jsx'
-export { default as DropdownQuickpickWithDatePickers } from './_dropdown_quickpick_with_date_pickers.jsx'
+export { default as DropdownQuickpickWithDatePickers } from './_dropdown_quickpick_with_date_pickers.jsx'
+export { default as DropdownQuickpickCustom } from './_dropdown_quickpick_custom.jsx'

data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled_options.md

@@ -1 +1 @@
-individual items can also be disabled by including the `disabled:true` within the object on the treeData for the `returnAllSelected`/`return_all_selected` variant. As noted above, this variant will return data on all checked nodes from the dropdown, irrespective of whether it is a parent or child node.
+Individual items can also be disabled by including the `disabled:true` within the object on the treeData for the `returnAllSelected`/`return_all_selected` variant. As noted above, this variant will return data on all checked nodes from the dropdown, irrespective of whether it is a parent or child node.

data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_single_disabled.html.erb

@@ -0,0 +1,135 @@
+<% treeData = [
+  {
+    label: "HQ",
+    value: "hQ",
+    id: "hq2",
+  },
+  {
+    label: "Philadelphia",
+    value: "philadelphia",
+    id: "phl2",
+    disabled: true,
+    children: [
+      {
+        label: "Marketing & Sales PHL",
+        value: "marketingAndSalesPhl",
+        id: "marketingPHL2",
+      },
+      {
+        label: "Installation Office PHL",
+        value: "installationOfficePhl",
+        id: "installationPHL2",
+      },
+      {
+        label: "Warehouse PHL",
+        value: "warehousePhl",
+        id: "warehousePHL2",
+      },
+    ]
+  },
+  {
+    label: "New Jersey",
+    value: "newJersey",
+    id: "nj2",
+    children: [
+      {
+        label: "New Jersey",
+        value: "newJersey",
+        id: "nj12",
+        children: [
+          {
+            label: "Marketing & Sales NJ",
+            value: "marketingAndSalesNj",
+            id: "marketingNJ2",
+            disabled: true,
+          },
+          {
+            label: "Installation Office NJ",
+            value: "installationOfficeNj",
+            id: "installationNJ2",
+          },
+          {
+            label: "Warehouse NJ",
+            value: "warehouseNj",
+            id: "warehouseNJ2",
+          },
+        ],
+      },
+      {
+        label: "Princeton",
+        value: "princeton",
+        id: "princeton2",
+        children: [
+          {
+            label: "Marketing & Sales Princeton",
+            value: "marketingAndSalesPrinceton",
+            id: "marketingPR2",
+          },
+          {
+            label: "Installation Office Princeton",
+            value: "installationOfficePrinceton",
+            id: "installationPR2",
+            disabled: true,
+          },
+          {
+            label: "Warehouse Princeton",
+            value: "warehousePrinceton",
+            id: "warehousePR2",
+          },
+        ]
+      },
+    ]
+  },
+  {
+    label: "Maryland",
+    value: "maryland",
+    id: "MD2",
+    children: [
+      {
+        label: "Marketing & Sales MD",
+        value: "marketingAndSalesMd",
+        id: "marketingMD2",
+      },
+      {
+        label: "Installation Office MD",
+        value: "installationOfficeMd",
+        id: "installationMD2",
+      },
+      {
+        label: "Warehouse MD",
+        value: "warehouseMd",
+        id: "warehouseMD2",
+      },
+    ]
+  },
+  {
+    label: "Connecticut",
+    value: "connecticut",
+    id: "CT2",
+    children: [
+      {
+        label: "Marketing & Sales CT",
+        value: "marketingAndSalesCt",
+        id: "marketingCT2",
+      },
+      {
+        label: "Installation Office CT",
+        value: "installationOfficeCt",
+        id: "installationCT2",
+      },
+      {
+        label: "Warehouse CT",
+        value: "warehouseCt",
+        id: "warehouseCT2",
+      },
+    ]
+  },
+] %>
+
+<%= pb_rails("multi_level_select", props: {
+    id: "multi-level-select-single-disabled-rails",
+    name: "single_disabled",
+    tree_data: treeData,
+    input_name: "Power",
+    variant: "single"
+}) %>

data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_single_disabled.jsx

@@ -0,0 +1,147 @@
+import React from "react";
+import MultiLevelSelect from "../_multi_level_select";
+
+const treeData = [
+  {
+    label: "HQ",
+    value: "hQ",
+    id: "hq2",
+  },
+  {
+    label: "Philadelphia",
+    value: "philadelphia",
+    id: "phl2",
+    disabled: true,
+    children: [
+      {
+        label: "Marketing & Sales PHL",
+        value: "marketingAndSalesPhl",
+        id: "marketingPHL2",
+      },
+      {
+        label: "Installation Office PHL",
+        value: "installationOfficePhl",
+        id: "installationPHL2",
+      },
+      {
+        label: "Warehouse PHL",
+        value: "warehousePhl",
+        id: "warehousePHL2",
+      },
+    ]
+  },
+  {
+    label: "New Jersey",
+    value: "newJersey",
+    id: "nj2",
+    children: [
+      {
+        label: "New Jersey",
+        value: "newJersey",
+        id: "nj12",
+        children: [
+          {
+            label: "Marketing & Sales NJ",
+            value: "marketingAndSalesNj",
+            id: "marketingNJ2",
+            disabled: true,
+          },
+          {
+            label: "Installation Office NJ",
+            value: "installationOfficeNj",
+            id: "installationNJ2",
+          },
+          {
+            label: "Warehouse NJ",
+            value: "warehouseNj",
+            id: "warehouseNJ2",
+          },
+        ],
+      },
+      {
+        label: "Princeton",
+        value: "princeton",
+        id: "princeton2",
+        children: [
+          {
+            label: "Marketing & Sales Princeton",
+            value: "marketingAndSalesPrinceton",
+            id: "marketingPR2",
+          },
+          {
+            label: "Installation Office Princeton",
+            value: "installationOfficePrinceton",
+            id: "installationPR2",
+            disabled: true,
+          },
+          {
+            label: "Warehouse Princeton",
+            value: "warehousePrinceton",
+            id: "warehousePR2",
+          },
+        ]
+      },
+    ]
+  },
+  {
+    label: "Maryland",
+    value: "maryland",
+    id: "MD2",
+    children: [
+      {
+        label: "Marketing & Sales MD",
+        value: "marketingAndSalesMd",
+        id: "marketingMD2",
+      },
+      {
+        label: "Installation Office MD",
+        value: "installationOfficeMd",
+        id: "installationMD2",
+      },
+      {
+        label: "Warehouse MD",
+        value: "warehouseMd",
+        id: "warehouseMD2",
+      },
+    ]
+  },
+  {
+    label: "Connecticut",
+    value: "connecticut",
+    id: "CT2",
+    children: [
+      {
+        label: "Marketing & Sales CT",
+        value: "marketingAndSalesCt",
+        id: "marketingCT2",
+      },
+      {
+        label: "Installation Office CT",
+        value: "installationOfficeCt",
+        id: "installationCT2",
+      },
+      {
+        label: "Warehouse CT",
+        value: "warehouseCt",
+        id: "warehouseCT2",
+      },
+    ]
+  },
+];
+
+const MultiLevelSelectSingleDisabled = (props) => {
+  return (
+    <div>
+      <MultiLevelSelect
+          id="multiselect-single-disabled"
+          inputName="Power"
+          onSelect={(selectedNode) => console.log("Selected Node", selectedNode)}
+          treeData={treeData}
+          variant="single"
+          {...props}
+      />
+    </div>
+  )
+};
+
+export default MultiLevelSelectSingleDisabled;

data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_single_disabled.md

@@ -0,0 +1 @@
+Individual items can be disabled by including `disabled: true` within the object on the treeData for the `single` variant. Disabled options are visibly disabled in the dropdown UI and cannot be selected via mouse click or keyboard navigation. When a parent node is disabled, all of its children are automatically disabled as well.

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

@@ -15,6 +15,7 @@ examples:
   - multi_level_select_disabled_options: Disabled Options (Return All Selected)
   - multi_level_select_disabled_options_parent_default: Disabled Parent Option (Default)
   - multi_level_select_disabled_options_parent: Disabled Parent Option (Return All Selected)
+  - multi_level_select_single_disabled: Disabled Options (Single Select)
 
   react:
   - multi_level_select_default: Default
@@ -33,3 +34,4 @@ examples:
   - multi_level_select_disabled_options: Disabled Options (Return All Selected)
   - multi_level_select_disabled_options_parent_default: Disabled Parent Option (Default)
   - multi_level_select_disabled_options_parent: Disabled Parent Option (Return All Selected)
+  - multi_level_select_single_disabled: Disabled Options (Single Select)

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

@@ -14,3 +14,4 @@ export { default as MultiLevelSelectDisabledOptionsParent } from './_multi_level
 export { default as MultiLevelSelectDisabledOptionsParentDefault } from './_multi_level_select_disabled_options_parent_default.jsx'
 export { default as MultiLevelSelectDisabledOptionsDefault } from './_multi_level_select_disabled_options_default.jsx'
 export { default as MultiLevelSelectLabel } from './_multi_level_select_label.jsx'
+export { default as MultiLevelSelectSingleDisabled } from './_multi_level_select_single_disabled.jsx'

data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_description.md

@@ -2,4 +2,9 @@
 
 This kit is a wrapper around the Highcharts library. It applies styling and default settings but does NOT ship Highcharts. Once 'highcharts' and 'highcharts-react-official are installed into your repo, any prop or functionality provided by Highcharts can be used with this kit without requiring specific props from Playbook. The doc examples below showcase a few common usecases but are not a comprehensive list of all the functionalities possible. 
 
-See the [highcharts API docs](https://api.highcharts.com/highcharts/) for a comprehensive look at what is possible.
+See the [highcharts API docs](https://api.highcharts.com/highcharts/) for a comprehensive look at what is possible.
+
+**NOTE**: All chart kits are available through a separate entrypoint to keep Highcharts optional. Import them using:
+```javascript
+import { PbBarGraph } from 'playbook-ui/charts'
+```

data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_description.md

@@ -2,4 +2,9 @@
 
 This kit is a wrapper around the Highcharts library. It applies styling and default settings but does NOT ship Highcharts. Once 'highcharts' and 'highcharts-react-official are installed into your repo, any prop or functionality provided by Highcharts can be used with this kit without requiring specific props from Playbook. The doc examples below showcase a few common usecases but are not a comprehensive list of all the functionalities possible. 
 
-See the [highcharts API docs](https://api.highcharts.com/highcharts/) for a comprehensive look at what is possible.
+See the [highcharts API docs](https://api.highcharts.com/highcharts/) for a comprehensive look at what is possible.
+
+**NOTE**: All chart kits are available through a separate entrypoint to keep Highcharts optional. Import them using:
+```javascript
+import { PbCircleChart } from 'playbook-ui/charts'
+```

data/app/pb_kits/playbook/pb_pb_gauge_chart/docs/_description.md

@@ -2,4 +2,9 @@
 
 This kit is a wrapper around the Highcharts library. It applies styling and default settings but does NOT ship Highcharts. Once 'highcharts' and 'highcharts-react-official are installed into your repo, any prop or functionality provided by Highcharts can be used with this kit without requiring specific props from Playbook. The doc examples below showcase a few common usecases but are not a comprehensive list of all the functionalities possible. 
 
-See the [highcharts API docs](https://api.highcharts.com/highcharts/) for a comprehensive look at what is possible.
+See the [highcharts API docs](https://api.highcharts.com/highcharts/) for a comprehensive look at what is possible.
+
+**NOTE**: All chart kits are available through a separate entrypoint to keep Highcharts optional. Import them using:
+```javascript
+import { PbGaugeChart } from 'playbook-ui/charts'
+```

data/app/pb_kits/playbook/pb_pb_line_graph/docs/_description.md

@@ -2,4 +2,9 @@
 
 This kit is a wrapper around the Highcharts library. It applies styling and default settings but does NOT ship Highcharts. Once 'highcharts' and 'highcharts-react-official are installed into your repo, any prop or functionality provided by Highcharts can be used with this kit without requiring specific props from Playbook. The doc examples below showcase a few common usecases but are not a comprehensive list of all the functionalities possible. 
 
-See the [highcharts API docs](https://api.highcharts.com/highcharts/) for a comprehensive look at what is possible.
+See the [highcharts API docs](https://api.highcharts.com/highcharts/) for a comprehensive look at what is possible.
+
+**NOTE**: All chart kits are available through a separate entrypoint to keep Highcharts optional. Import them using:
+```javascript
+import { PbLineGraph } from 'playbook-ui/charts'
+```

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_height.jsx

@@ -0,0 +1,71 @@
+import React from 'react'
+import RichTextEditor from '../_rich_text_editor'
+import { useEditor, EditorContent } from "@tiptap/react"
+import StarterKit from "@tiptap/starter-kit"
+import Link from '@tiptap/extension-link'
+import { Caption } from "playbook-ui"
+
+
+const RichTextEditorAdvancedHeight = (props) => {
+
+  const editor = useEditor({
+    extensions: [
+      StarterKit,
+      Link
+    ],
+    content: "Add your text here. You can format your text, add links, quotes, and bullets."
+  })
+
+  const editor2 = useEditor({
+    extensions: [
+      StarterKit,
+      Link
+    ],
+    content: "Add your text here. You can format your text, add links, quotes, and bullets."
+  })
+
+  const editor3 = useEditor({
+    extensions: [
+      StarterKit,
+      Link
+    ],
+    content: "Add your text here. You can format your text, add links, quotes, and bullets."
+  })
+
+  return (
+    <div>
+      <Caption>sm</Caption>
+      <RichTextEditor
+          advancedEditor={editor}
+          inputHeight="sm"
+          {...props}
+      >
+        <EditorContent editor={editor} />
+      </RichTextEditor>
+
+      <br />
+
+      <Caption>md</Caption>
+      <RichTextEditor
+          advancedEditor={editor2}
+          inputHeight="md"
+          {...props}
+      >
+        <EditorContent editor={editor2} />
+      </RichTextEditor>
+
+      <br />
+
+      <Caption>lg</Caption>
+      <RichTextEditor
+          advancedEditor={editor3}
+          inputHeight="lg"
+          {...props}
+      >
+        <EditorContent editor={editor3} />
+      </RichTextEditor>
+    </div>
+  )
+}
+
+export default RichTextEditorAdvancedHeight

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_height.md

@@ -0,0 +1 @@
+Use the `inputHeight` prop to keep the text area a specific height. If the text exceeds the text area, it will automatically add a scrollbar to maintain the fixed height.