playbook_ui 12.18.0.pre.alpha.PLAY785typeaheadts608 → 12.18.0.pre.alpha.PLAY785typeaheadts632

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 78d2755a123ca0414a32cc2b2478f058f5b4fa57f431a34deded1a42618236a0
-  data.tar.gz: 3845495b122b5c728092f04bddc3f56d967951dff2cc270c3477dd73f9dc6643
+  metadata.gz: ebfd5fbf4ef024e0e8d72e0571709edfb8738488a45893fe4cb0ae7ffb43910a
+  data.tar.gz: 8dcb7aea81f460389a352c31d6d78ba8ef9525b6220c83979e0865aa2a4a6f38
 SHA512:
-  metadata.gz: 26a7ab5c67dc6b6fabfbe2ce30db19a419f25e305e4ccadd4ea73e29e4e0f46b544db0569d52e94897aee2e732231d050af975902057a2bdea6ac38c5376d798
-  data.tar.gz: 4e0ddb8732d7c7d7dcf2126d95d8a3aaf032e17b9c3b397a48e46a39e838721194848de455afa8583cc09b1415fadf670178bb931c4e0bb82ee635c31fb89999
+  metadata.gz: 0b7e9a390686d87fff0212071df2a3a44a468266e28e3d8ab24f968a15775edd01132a74839b3af58e71add8eb6884a3c02999f6198110e75fbfbf5f2bbf7519
+  data.tar.gz: 228b4952c368979aacac5e591c5b2b1c91339a6bae8b1731fef3872a7f5f6833d9763d7743772b86f83ccd3f902154355f1a1f662fd41624af4a0989575ca45c

data/app/pb_kits/playbook/pb_table/index.ts

@@ -11,8 +11,12 @@ export default class PbTable extends PbEnhancedElement {
     // Each Table
     [].forEach.call(tables, (table: HTMLTableElement) => {
       // Header Titles
-      var headers = [].map.call(table.querySelectorAll('th'), (header: Element) => {
-        return header.textContent.replace(/\r?\n|\r/, '')
+      let headers: string[] = [];
+      [].forEach.call(table.querySelectorAll('th'), (header: HTMLTableCellElement) => {
+        let colSpan = header.colSpan
+        for (let i = 0; i < colSpan; i++) {
+          headers.push(header.textContent.replace(/\r?\n|\r/, ''));
+        }
       });
 
       // for each row in tbody

data/app/pb_kits/playbook/pb_tooltip/_tooltip.tsx

@@ -6,7 +6,7 @@ import {
   offset, 
   Placement, 
   safePolygon, 
-  shift, 
+  shift,
   useFloating, 
   useHover, 
   useInteractions,
@@ -17,9 +17,6 @@ import { GlobalProps, globalProps } from "../utilities/globalProps"
 import { buildAriaProps, buildDataProps } from "../utilities/props"
 import Flex from "../pb_flex/_flex"
 
-
-
-
 type TooltipProps = {
   aria?: { [key: string]: string },
   className?: string | string[],
@@ -29,8 +26,8 @@ type TooltipProps = {
   icon?: string,
   interaction?: boolean,
   placement?: Placement,
+  position?: "absolute" | "fixed";
   text: string,
-  zIndex?: Pick<GlobalProps, "ZIndex">,
 } & GlobalProps
 
 const Tooltip = (props: TooltipProps): React.ReactElement => {
@@ -43,6 +40,7 @@ const Tooltip = (props: TooltipProps): React.ReactElement => {
     icon = null,
     interaction = false,
     placement: preferredPlacement = "top",
+    position = "absolute",
     text,
     zIndex,
     ...rest
@@ -50,24 +48,26 @@ const Tooltip = (props: TooltipProps): React.ReactElement => {
 
   const dataProps: { [key: string]: any } = buildDataProps(data)
   const ariaProps: { [key: string]: any } = buildAriaProps(aria)
-
+  
   const css = classnames(
     globalProps({...rest}),
     className,
   )
   const [open, setOpen] = useState(false)
   const arrowRef = useRef(null)
-  const {
 
+
+  const {
     context,
     floating,
-    middlewareData: { arrow: { x: arrowX, y: arrowY } = {} },
+    middlewareData: { arrow: { x: arrowX, y: arrowY } = {},  },
     placement,
     reference,
     strategy,
     x,
     y,
   } = useFloating({
+    strategy: position,
     middleware: [
       arrow({
         element: arrowRef,
@@ -87,6 +87,7 @@ const Tooltip = (props: TooltipProps): React.ReactElement => {
     placement: preferredPlacement
   })
 
+
   const { getFloatingProps } = useInteractions([
     useHover(context, {
       delay,
@@ -142,7 +143,7 @@ const Tooltip = (props: TooltipProps): React.ReactElement => {
               className="arrow_bg"
               ref={arrowRef}
               style={{
-                position: strategy,
+                position: "absolute",
                 left: arrowX != null ? `${arrowX}px` : "",
                 top: arrowY != null ? `${arrowY}px` : "",
                 [staticSide]: "-5px",
@@ -154,4 +155,4 @@ const Tooltip = (props: TooltipProps): React.ReactElement => {
   )
 }
 
-export default Tooltip
+export default Tooltip

data/app/pb_kits/playbook/pb_tooltip/tooltip.test.jsx

@@ -65,3 +65,32 @@ test("closes on mouseleave", async () => {
 
   cleanup();
 });
+
+test("has default position absolute", async () => {
+  render(<TooltipTest />);
+
+  fireEvent.mouseEnter(screen.getByRole("tooltip_trigger"));
+  await waitFor(() => {
+    expect(screen.queryByRole("tooltip")).toHaveStyle({"position": "absolute"});
+    cleanup();
+  })
+
+  cleanup();
+});
+
+test("has position fixed", async () => {
+  render(
+    <Tooltip
+        data={{ testid: "fixed-position-test" }}
+        position="fixed"
+    />
+  );
+
+  fireEvent.mouseEnter(screen.getByRole("tooltip_trigger"));
+  await waitFor(() => {
+    expect(screen.queryByRole("tooltip")).toHaveStyle({"position": "fixed"});
+    cleanup();
+  })
+
+  cleanup();
+});

data/app/pb_kits/playbook/pb_typeahead/_typeahead.tsx

@@ -78,6 +78,7 @@ const Typeahead = ({
       Control,
       ClearIndicator,
       IndicatorsContainer,
+      IndicatorSeparator: null as null,
       MenuList,
       MultiValue,
       Option,
@@ -95,6 +96,7 @@ const Typeahead = ({
     isSearchable: true,
     name,
     multiKit: '',
+    onCreateOption: null as null,
     plusIcon: false,
     onMultiValueClick: (_option: SelectValueType) => { },
     ...props,

data/app/pb_kits/playbook/tokens/_colors.scss

@@ -68,7 +68,7 @@ $background_colors: (
 
 /* Card colors ------------------*/
 $card_light:          $white !default;
-$card_dark:           rgba($white, $opacity_1) !default;
+$card_dark:           mix(white, $bg_dark, 10%)  !default;
 $card_colors: (
   card_light:         $card_light,
   card_dark:          $card_dark
@@ -109,16 +109,18 @@ $focus_input_colors: (
 
 /* Border colors ----------------------*/
 $border_light:        #E4E8F0 !default;
-$border_dark:         rgba($white, $opacity_1) !default;
+$border_dark:         mix(white, $bg_dark, 20%) !default;
 $border_colors: (
   border_light:       $border_light,
   border_dark:        $border_dark
 );
 
 /* Shadow colors ----------------------*/
-$shadow:        rgba(#3C6AAC, $opacity_2) !default;
+$shadow:             rgba(#3C6AAC, $opacity_2) !default;
+$shadow_dark:        $bg_dark !default;
 $shadow_colors: (
   shadow:       $shadow,
+  shadow_dark:       $shadow_dark,
 );
 
 /* Text colors ------------------------*/

data/lib/playbook/version.rb

@@ -2,5 +2,5 @@
 
 module Playbook
   PREVIOUS_VERSION = "12.18.0"
-  VERSION = "12.18.0.pre.alpha.PLAY785typeaheadts608"
+  VERSION = "12.18.0.pre.alpha.PLAY785typeaheadts632"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 12.18.0.pre.alpha.PLAY785typeaheadts608
+  version: 12.18.0.pre.alpha.PLAY785typeaheadts632
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2023-05-04 00:00:00.000000000 Z
+date: 2023-05-09 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack