RubyGems - playbook_ui - Versions diffs - 14.16.0.pre.rc.1 → 14.16.0.pre.rc.2 - Mend

playbook_ui 14.16.0.pre.rc.1 → 14.16.0.pre.rc.2

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.

Files changed (23) hide show

checksums.yaml CHANGED Viewed

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 408cff49bb1a860fa5e13e4f3b2cbbb1fade96335721b0da125445509e65985f
-  data.tar.gz: 3fa1f1bd792a316d5754ebbf30dd68093cb9620155a5c0c95a56d79449e9ef09
+  metadata.gz: fc69e93cece79df8fd641811b1a7d242f94dabc472120df1374dfbc339110fcb
+  data.tar.gz: 537d163c93f51d7233e3f2467a5700393fa403c1eecc7d70f1bc0147b7d667e8
 SHA512:
-  metadata.gz: b5ef34e782ea21f845646ce545e0a5b724de93037c86c1150eafb4e27e09f9a2d35d1f738128dd865b47c62d8d32422c29f1973ded6fa0afd553a46bebe4a2d6
-  data.tar.gz: 7061aea824206762a1515325f50d488fa72415d2b29cccd32366cc24b01b9f09187169c73a59391c9c29fe440d7171d3bf9eadf635f1268c20bb2de66cc15dc4
+  metadata.gz: 7821e4c44cf09248ef485c33983e1bba957c1587747cb2b15164bec1c66fc8ff7f146ec72f33f48c628a4db0467c72d3e029b12903471f2c5c0960d2162d57d5
+  data.tar.gz: fa17044e17bf79f8833515f1c93890d379fe64a26833f9df0a15636cc99a0a701bb7a26d52937dce556d802cc1b6dfb8a7e319bfed66d2b101b9de623869c740

data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss CHANGED Viewed

@@ -161,6 +161,13 @@
         }
       }
     }
+    td {
+      [class^=pb_text_input_kit] .text_input_wrapper input {
+        padding: 0 $space_xxs;
+        font-size: 14px;
+        text-align: right;
+      }
+    }
   }
   .table-header-cells-active:first-child {

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_editing.jsx ADDED Viewed

@@ -0,0 +1,102 @@
+import React, { useState } from "react";
+import { AdvancedTable, TextInput, Body } from "playbook-ui";
+import MOCK_DATA from "./advanced_table_mock_data.json";
+const AdvancedTableInlineEditing = (props) => {
+  const [editedValues, setEditedValues] = useState({});
+  const EditableCell = ({ rowId, originalValue, onSave }) => {
+    const [localValue, setLocalValue] = useState(originalValue);
+    const handleChange = (e) => setLocalValue(e.target.value);
+    const handleBlur = () => {
+      originalValue !== localValue && onSave(rowId, localValue);
+    };
+    return (
+      <TextInput inline
+          marginBottom="none"
+          {...props}
+      >
+        <input
+            onBlur={handleBlur}
+            onChange={handleChange}
+            onKeyDown={(e) => e.key === 'Enter' && handleBlur()}
+            value={localValue}
+        />
+      </TextInput>
+    );
+  };
+  const columnDefinitions = [
+    {
+      accessor: "year",
+      label: "Year",
+      cellAccessors: ["quarter", "month", "day"],
+    },
+    {
+      accessor: "newEnrollments",
+      label: "New Enrollments",
+    },
+    {
+      accessor: "scheduledMeetings",
+      label: "Scheduled Meetings",
+      editable: true,
+      customRenderer: (row) => {
+        return (
+          <EditableCell
+              onSave={(id, val) => {
+                setEditedValues((prev) => ({ ...prev, [id]: val }));
+              }}
+              originalValue={
+                editedValues[row.id] ?? row.original.scheduledMeetings
+              }
+              rowId={row.id}
+          />
+        );
+      },
+    },
+    {
+      accessor: "attendanceRate",
+      label: "Attendance Rate",
+    },
+    {
+      accessor: "completedClasses",
+      label: "Completed Classes",
+    },
+    {
+      accessor: "classCompletionRate",
+      label: "Class Completion Rate",
+    },
+    {
+      accessor: "graduatedStudents",
+      label: "Graduated Students",
+    },
+  ];
+  return (
+    <div className="App">
+      <AdvancedTable
+          columnDefinitions={columnDefinitions}
+          tableData={MOCK_DATA}
+          {...props}
+      />
+      {
+        editedValues && Object.keys(editedValues).length > 0 && (
+          <>
+            <Body
+                marginTop="md"
+                {...props}
+            >
+              Edited Values by Row Id:
+            </Body>
+            <pre style={{color: 'white'}}>{JSON.stringify(editedValues, null, 2)}</pre>
+          </>
+        )
+      }
+    </div>
+  );
+};
+export default AdvancedTableInlineEditing;

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_editing.md ADDED Viewed

@@ -0,0 +1,4 @@
+Inline Cell Editing can be achieved with a combination of our `TextInput` kit and the `customRenderer` method available through columnDefinitions.
+Hover over any cell within the 'Scheduled Meetings' column to see the TextInput and type in to change values. Values can be saved by clicking away from the TextInput or by hitting 'Enter'.
+See the code snippet below to see how this was achieved. Devs must manage state themselves as shown.

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

@@ -36,4 +36,5 @@ examples:
   - advanced_table_selectable_rows: Selectable Rows
   - advanced_table_selectable_rows_no_subrows: Selectable Rows (No Subrows)
   - advanced_table_selectable_rows_actions: Selectable Rows (With Actions)
-  - advanced_table_selectable_rows_header: Selectable Rows (No Actions Bar)
+  - advanced_table_selectable_rows_header: Selectable Rows (No Actions Bar)
+  - advanced_table_inline_editing: Inline Cell Editing

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

@@ -20,4 +20,5 @@ export { default as AdvancedTableNoSubrows } from './_advanced_table_no_subrows.
 export { default as AdvancedTableSelectableRowsHeader } from './_advanced_table_selectable_rows_header.jsx'
 export { default as AdvancedTableSelectableRowsActions } from './_advanced_table_selectable_rows_actions.jsx'
 export { default as AdvancedTableTablePropsStickyHeader } from './_advanced_table_table_props_sticky_header.jsx'
-export { default as AdvancedTableColumnHeadersCustomCell } from './_advanced_table_column_headers_custom_cell.jsx'
+export { default as AdvancedTableColumnHeadersCustomCell } from './_advanced_table_column_headers_custom_cell.jsx'
+export { default as AdvancedTableInlineEditing } from './_advanced_table_inline_editing.jsx'

data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx CHANGED Viewed

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef } from "react";
+import React, { useState, useEffect, useRef, forwardRef } from "react";
 import classnames from "classnames";
 import { globalProps, GlobalProps } from "../utilities/globalProps";
 import {
@@ -23,6 +23,13 @@ import {
   getExpandedItems,
 } from "./_helper_functions";
+interface MultiLevelSelectComponent
+  extends React.ForwardRefExoticComponent<
+    MultiLevelSelectProps & React.RefAttributes<HTMLInputElement>
+  > {
+  Options: typeof MultiLevelSelectOptions;
+}
 type MultiLevelSelectProps = {
   aria?: { [key: string]: string }
   className?: string
@@ -35,6 +42,7 @@ type MultiLevelSelectProps = {
   name?: string
   returnAllSelected?: boolean
   treeData?: { [key: string]: string; }[] | any
+  onChange?: (event: { target: { name?: string; value: any } }) => void
   onSelect?: (prop: { [key: string]: any }) => void
   selectedIds?: string[] | any
   variant?: "multi" | "single"
@@ -42,7 +50,7 @@ type MultiLevelSelectProps = {
   pillColor?: "primary" | "neutral" | "success" | "warning" | "error" | "info" | "data_1" | "data_2" | "data_3" | "data_4" | "data_5" | "data_6" | "data_7" | "data_8" | "windows" | "siding" | "roofing" | "doors" | "gutters" | "solar" | "insulation" | "accessories",
 } & GlobalProps
-const MultiLevelSelect = (props: MultiLevelSelectProps) => {
+const MultiLevelSelect = forwardRef<HTMLInputElement, MultiLevelSelectProps>((props) => {
   const {
     aria = {},
     className,
@@ -55,6 +63,7 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
     name,
     returnAllSelected = false,
     treeData,
+    onChange = () => null,
     onSelect = () => null,
     selectedIds,
     variant = "multi",
@@ -287,8 +296,10 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
     // Logic for removing items from returnArray or defaultReturn when pills clicked
     if (returnAllSelected) {
       onSelect(getCheckedItems(updatedTree));
+      onChange({ target: { name, value: getCheckedItems(updatedTree) } });
     } else {
       onSelect(getDefaultCheckedItems(updatedTree));
+      onChange({ target: { name, value: getDefaultCheckedItems(updatedTree) } });
     }
   };
@@ -314,8 +325,10 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
     const updatedTree = changeItem(filtered[0], check);
     if (returnAllSelected) {
       onSelect(getCheckedItems(updatedTree));
+      onChange({ target: { name, value: getCheckedItems(updatedTree) } });
     } else {
       onSelect(getDefaultCheckedItems(updatedTree));
+      onChange({ target: { name, value: getDefaultCheckedItems(updatedTree) } });
     }
   };
@@ -348,6 +361,7 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
     setIsDropdownClosed(true);
     onSelect(selectedItem);
+    onChange({ target: { name, value: selectedItem } });
   };
   // Single select: reset the tree state upon typing
@@ -389,12 +403,12 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
   // Rendering formattedData to UI based on typeahead
   const renderNestedOptions = (items: { [key: string]: string; }[] | any ) => {
     const hasOptionsChild = React.Children.toArray(props.children).some(
-      (child: any) => child.type === MultiLevelSelect.Options
+      (child) => React.isValidElement(child) && child.type === MultiLevelSelect.Options
     );
     if (hasOptionsChild) {
       return React.Children.map(props.children, (child) => {
-        if (child.type === MultiLevelSelect.Options) {
+        if (React.isValidElement(child) && child.type === MultiLevelSelect.Options) {
           return React.cloneElement(child, { items });
         }
         return null;
@@ -459,6 +473,18 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
                     ))
                   : null}
+                {!returnAllSelected
+                  ? defaultReturn.map((item) => (
+                      <input
+                          disabled={disabled}
+                          key={item.id}
+                          name={`${name}[]`}
+                          type="hidden"
+                          value={item.id}
+                      />
+                    ))
+                  : null}
                 {returnAllSelected &&
                 returnedArray.length !== 0 &&
                 inputDisplay === "pills"
@@ -547,8 +573,9 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
       </MultiLevelSelectContext.Provider>
     </div>
   );
-};
+}) as MultiLevelSelectComponent;
+MultiLevelSelect.displayName = "MultiLevelSelect";
 MultiLevelSelect.Options = MultiLevelSelectOptions;
 export default MultiLevelSelect;

data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_react_hook.jsx ADDED Viewed

@@ -0,0 +1,91 @@
+import React from "react"
+import MultiLevelSelect from "../_multi_level_select"
+import { useForm } from "react-hook-form"
+const treeData = [
+  {
+    label: "Power Home Remodeling",
+    value: "Power Home Remodeling",
+    id: "powerhome1",
+    expanded: true,
+    children: [
+      {
+        label: "People",
+        value: "People",
+        id: "people1",
+        expanded: true,
+        children: [
+          {
+            label: "Talent Acquisition",
+            value: "Talent Acquisition",
+            id: "talent1",
+          },
+          {
+            label: "Business Affairs",
+            value: "Business Affairs",
+            id: "business1",
+            children: [
+              {
+                label: "Initiatives",
+                value: "Initiatives",
+                id: "initiative1",
+              },
+              {
+                label: "Learning & Development",
+                value: "Learning & Development",
+                id: "development1",
+              },
+            ],
+          },
+          {
+            label: "People Experience",
+            value: "People Experience",
+            id: "experience1",
+          },
+        ],
+      },
+      {
+        label: "Contact Center",
+        value: "Contact Center",
+        id: "contact1",
+        children: [
+          {
+            label: "Appointment Management",
+            value: "Appointment Management",
+            id: "appointment1",
+          },
+          {
+            label: "Customer Service",
+            value: "Customer Service",
+            id: "customer1",
+          },
+          {
+            label: "Energy",
+            value: "Energy",
+            id: "energy1",
+          },
+        ],
+      },
+    ],
+  },
+]
+const MultiLevelSelectReactHook = (props) => {
+  const { register, watch } = useForm()
+  const selectedItems = watch("departments")
+  selectedItems && console.log("Selected Items", selectedItems)
+  return (
+    <div>
+      <MultiLevelSelect
+          id="multiselect-default"
+          marginBottom="md"
+          treeData={treeData}
+          {...register("departments")}
+          {...props}
+      />
+    </div>
+  )
+}
+export default MultiLevelSelectReactHook

data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_react_hook.md ADDED Viewed

	@@ -0,0 +1 @@
1	+ You can pass `react-hook-form` props to the MultiLevelSelect kit. Check your console to see the full data selected from this example.

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

@@ -12,6 +12,7 @@ examples:
   react:
   - multi_level_select_default: Default
+  - multi_level_select_react_hook: React Hook
   - multi_level_select_single: Single Select
   - multi_level_select_single_children_only: Single Select w/ Hidden Radios
   - multi_level_select_return_all_selected: Return All Selected

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

@@ -7,3 +7,4 @@ export { default as MultiLevelSelectColor } from './_multi_level_select_color.js
 export { default as MultiLevelSelectWithChildren } from './_multi_level_select_with_children.jsx'
 export { default as MultiLevelSelectWithChildrenWithRadios } from './_multi_level_select_with_children_with_radios.jsx'
 export { default as MultiLevelSelectDisabled } from './_multi_level_select_disabled.jsx'
+export { default as MultiLevelSelectReactHook  } from './_multi_level_select_react_hook.jsx'

data/app/pb_kits/playbook/pb_multi_level_select/multi_level_select.rb CHANGED Viewed

@@ -40,7 +40,7 @@ module Playbook
           treeData: tree_data,
           returnAllSelected: return_all_selected,
           selectedIds: selected_ids,
-          input_name: input_name,
+          inputName: input_name,
           variant: variant,
           pillColor: pill_color,
           wrapped: wrapped,