playbook_ui 13.11.1 → 13.12.0.pre.alpha.PLAY1081exporttypes1608

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

@@ -54,6 +54,8 @@ export default class PbTooltip extends PbEnhancedElement {
   }
 
   showTooltip(trigger) {
+    if (this.shouldShowTooltip === "false") return
+
     this.popper = createPopper(trigger, this.tooltip, {
       placement: this.position,
       modifiers: [
@@ -127,4 +129,8 @@ export default class PbTooltip extends PbEnhancedElement {
   get triggerElementSelector() {
     return this.element.dataset.pbTooltipTriggerElementSelector
   }
+
+  get shouldShowTooltip() {
+    return this.element.dataset.pbTooltipShowTooltip
+  }
 }

data/app/pb_kits/playbook/pb_tooltip/tooltip.rb

@@ -20,7 +20,8 @@ module Playbook
           pb_tooltip_position: position,
           pb_tooltip_trigger_element_selector: trigger_element_selector,
           pb_tooltip_trigger_element_id: trigger_element_id,
-          pb_tooltip_tooltip_id: tooltip_id
+          pb_tooltip_tooltip_id: tooltip_id,
+          pb_tooltip_show_tooltip: true
         )
       end
 

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

@@ -92,5 +92,39 @@ test("has position fixed", async () => {
     cleanup();
   })
 
+  cleanup();
+});
+
+test("display tooltip with showTooltip set to true", async () => {
+  render(
+    <Tooltip
+        data={{ testid: "fixed-position-test" }}
+        showTooltip
+    />
+  );
+
+  fireEvent.mouseEnter(screen.getByRole("tooltip_trigger"));
+  await waitFor(() => {
+    expect(screen.queryByRole("tooltip")).toBeInTheDocument();
+    cleanup();
+  })
+
+  cleanup();
+});
+
+test("doesn't display tooltip with showTooltip set to false", async () => {
+  render(
+    <Tooltip
+        data={{ testid: "fixed-position-test" }}
+        showTooltip={false}
+    />
+  );
+
+  fireEvent.mouseEnter(screen.getByRole("tooltip_trigger"));
+  await waitFor(() => {
+    expect(screen.queryByRole("tooltip")).not.toBeInTheDocument();
+    cleanup();
+  })
+
   cleanup();
 });

data/app/pb_kits/playbook/pb_treemap_chart/_treemap_chart.d.ts

@@ -0,0 +1,27 @@
+declare type TreemapChartProps = {
+    chartData: {
+        name: string;
+        parent?: string | number;
+        value: number;
+        color?: string;
+        id?: string | number;
+    }[];
+    className?: string;
+    colors: string[];
+    dark?: boolean;
+    drillable: boolean;
+    grouped: boolean;
+    height?: string;
+    id: number | string;
+    title?: string;
+    tooltipHtml: string;
+    type?: string;
+    aria?: {
+        [key: string]: string;
+    };
+    data?: {
+        [key: string]: string;
+    };
+};
+declare const TreemapChart: ({ aria, data, chartData, colors, dark, drillable, grouped, height, id, title, tooltipHtml, type, ...props }: TreemapChartProps) => JSX.Element;
+export default TreemapChart;

data/app/pb_kits/playbook/pb_typeahead/_typeahead.d.ts

@@ -0,0 +1,35 @@
+import { Noop } from '../types';
+/**
+ * @typedef {object} Props
+ * @prop {boolean} async - whether Typeahead should fetch data from
+ * a remote location to populate the options
+ * @prop {string} label - the text for the optional typeahead input label
+ */
+declare type TypeaheadProps = {
+    async?: boolean;
+    className?: string;
+    components?: object;
+    createable?: boolean;
+    dark?: boolean;
+    data?: {
+        [key: string]: string;
+    };
+    error?: string;
+    id?: string;
+    label?: string;
+    loadOptions?: string | Noop;
+    getOptionLabel?: string | (() => any);
+    getOptionValue?: string | (() => any);
+    name?: string;
+};
+export declare type SelectValueType = {
+    label: string;
+    value: string;
+    imageUrl?: string;
+};
+/**
+ * @constant {React.ReactComponent} Typeahead
+ * @param {TypeaheadProps} props - props as described at https://react-select.com/props
+ */
+declare const Typeahead: ({ async, className, components, createable, error, data, getOptionLabel, getOptionValue, id, loadOptions, ...props }: TypeaheadProps) => JSX.Element;
+export default Typeahead;

data/app/pb_kits/playbook/pb_typeahead/components/ClearIndicator.d.ts

@@ -0,0 +1,2 @@
+declare const ClearContainer: (props: any) => JSX.Element;
+export default ClearContainer;

data/app/pb_kits/playbook/pb_typeahead/components/Control.d.ts

@@ -0,0 +1,5 @@
+declare type Props = {
+    selectProps: any;
+};
+declare const TypeaheadControl: (props: Props) => JSX.Element;
+export default TypeaheadControl;

data/app/pb_kits/playbook/pb_typeahead/components/IndicatorsContainer.d.ts

@@ -0,0 +1,2 @@
+declare const IndicatorsContainer: (props: any) => JSX.Element;
+export default IndicatorsContainer;

data/app/pb_kits/playbook/pb_typeahead/components/MenuList.d.ts

@@ -0,0 +1,2 @@
+declare const MenuList: (props: any) => JSX.Element;
+export default MenuList;

data/app/pb_kits/playbook/pb_typeahead/components/MultiValue.d.ts

@@ -0,0 +1,9 @@
+import { SelectValueType } from '../_typeahead';
+declare type Props = {
+    data: SelectValueType;
+    multiValueTemplate: any;
+    removeProps: any;
+    selectProps: any;
+};
+declare const MultiValue: (props: Props) => JSX.Element;
+export default MultiValue;

data/app/pb_kits/playbook/pb_typeahead/components/Option.d.ts

@@ -0,0 +1,2 @@
+declare const Option: (props: any) => JSX.Element;
+export default Option;

data/app/pb_kits/playbook/pb_typeahead/components/Placeholder.d.ts

@@ -0,0 +1,2 @@
+declare const Placeholder: (props: any) => JSX.Element;
+export default Placeholder;

data/app/pb_kits/playbook/pb_typeahead/components/ValueContainer.d.ts

@@ -0,0 +1,2 @@
+declare const ValueContainer: (props: any) => JSX.Element;
+export default ValueContainer;

data/app/pb_kits/playbook/pb_typeahead/index.d.ts

@@ -0,0 +1,39 @@
+import PbEnhancedElement from '../pb_enhanced_element';
+export default class PbTypeahead extends PbEnhancedElement {
+    _searchInput: HTMLInputElement;
+    _resultsElement: HTMLElement;
+    _debouncedSearch: Function;
+    _resultsLoadingIndicator: HTMLElement;
+    _resultOptionTemplate: HTMLElement;
+    _resultsOptionCache: Map<string, Array<DocumentFragment>>;
+    _searchContext: string;
+    static get selector(): string;
+    connect(): void;
+    handleKeydown(event: KeyboardEvent): void;
+    search(): void;
+    resultsCacheUpdate(searchTerm: string, searchContext: string, results: Array<DocumentFragment>): void;
+    resultsCacheClear(): void;
+    get debouncedSearch(): any;
+    showResults(): void;
+    optionSelected(event: MouseEvent): void;
+    clearResults(): void;
+    newResultOption(content: DocumentFragment): Element;
+    focusPreviousOption(): void;
+    focusNextOption(): void;
+    get resultOptionItems(): Element[];
+    get currentSelectedResultOptionItem(): Element;
+    get searchInput(): HTMLInputElement;
+    get searchTerm(): string;
+    get searchContext(): string;
+    set searchContext(value: string);
+    get searchTermAndContext(): string;
+    cacheKeyFor(searchTerm: string, searchContext: string): string;
+    searchInputClear(): void;
+    get searchTermMinimumLength(): string;
+    get searchDebounceTimeout(): string;
+    get resultsElement(): HTMLElement;
+    get resultOptionTemplate(): HTMLElement;
+    get resultsOptionCache(): Map<any, any>;
+    get resultsLoadingIndicator(): HTMLElement;
+    toggleResultsLoadingIndicator(visible: boolean): void;
+}

data/app/pb_kits/playbook/pb_user/_user.d.ts

@@ -0,0 +1,23 @@
+import { GlobalProps } from '../utilities/globalProps';
+declare type UserProps = {
+    align?: "left" | "center" | "right";
+    aria?: {
+        [key: string]: string;
+    };
+    avatar?: boolean;
+    avatarUrl?: string;
+    className?: string;
+    dark?: boolean;
+    data?: {
+        [key: string]: string;
+    };
+    id?: string;
+    name?: string;
+    orientation?: "horizontal" | "vertical";
+    size?: "sm" | "md" | "lg";
+    subtitle?: string | Array<Node> | Node;
+    territory?: string;
+    title?: string;
+} & GlobalProps;
+declare const User: (props: UserProps) => JSX.Element;
+export default User;

data/app/pb_kits/playbook/pb_user_badge/_user_badge.d.ts

@@ -0,0 +1,14 @@
+declare type UserBadgeProps = {
+    aria?: {
+        [key: string]: string;
+    };
+    badge?: "million-dollar" | "veteran";
+    className?: string;
+    data?: {
+        [key: string]: string;
+    };
+    id?: string;
+    size?: "sm" | "md" | "lg";
+};
+declare const UserBadge: (props: UserBadgeProps) => JSX.Element;
+export default UserBadge;

data/app/pb_kits/playbook/pb_user_badge/badges/million-dollar.d.ts

@@ -0,0 +1,2 @@
+declare const MillionDollar: () => JSX.Element;
+export default MillionDollar;

data/app/pb_kits/playbook/pb_user_badge/badges/veteran.d.ts

@@ -0,0 +1,2 @@
+declare const Veteran: () => JSX.Element;
+export default Veteran;

data/app/pb_kits/playbook/pb_walkthrough/_walkthrough.d.ts

@@ -0,0 +1,41 @@
+declare type WalkthroughProps = {
+    aria?: {
+        [key: string]: string;
+    };
+    callback?: () => void;
+    className?: string;
+    continuous?: boolean;
+    data?: {
+        [key: string]: string;
+    };
+    id?: string;
+    run?: boolean;
+    steps?: [];
+    stepIndex?: number;
+    debug?: boolean;
+    disableCloseOnEsc?: boolean;
+    disableOverlay?: boolean;
+    disableOverlayClose?: boolean;
+    disableScrolling?: boolean;
+    floaterProps?: object;
+    hideBackButton?: boolean;
+    hideCloseButton?: boolean;
+    showProgress?: boolean;
+    showSkipButton?: boolean;
+    spotlightClicks?: boolean;
+    spotlightPadding?: number;
+    styles?: {
+        options: {
+            beaconSize?: number;
+            arrowColor?: string;
+            backgroundColor?: string;
+            primaryColor?: string;
+            overlayColor?: string;
+            spotlightShadow?: string;
+            width?: number;
+            zIndex?: number;
+        };
+    };
+};
+declare const Walkthrough: (props: WalkthroughProps) => JSX.Element;
+export default Walkthrough;

data/app/pb_kits/playbook/pb_weekday_stacked/_weekday_stacked.d.ts

@@ -0,0 +1,15 @@
+declare type WeekdayStackedProps = {
+    align?: "left" | "center" | "right";
+    aria?: {
+        [key: string]: string;
+    };
+    className?: string;
+    dark?: boolean;
+    data?: object;
+    date: Date;
+    id?: string;
+    variant?: "day_only" | "month_day" | "expanded";
+    compact?: boolean;
+};
+declare const WeekdayStacked: (props: WeekdayStackedProps) => JSX.Element;
+export default WeekdayStacked;

data/app/pb_kits/playbook/playbook-doc.js

@@ -104,7 +104,7 @@ import * as UserBadge from 'pb_user_badge/docs'
 import * as Walkthrough from 'pb_walkthrough/docs'
 import * as WeekdayStacked from 'pb_weekday_stacked/docs'
 
-WebpackerReact.setup({
+WebpackerReact.registerComponents({
   ...Avatar,
   ...AvatarActionButton,
   ...Background,

data/app/pb_kits/playbook/utilities/globalProps.d.ts

@@ -0,0 +1,113 @@
+import { Binary, Display, DisplaySizes, None, Sizes } from '../types';
+declare type Alignment = "start" | "end" | "center";
+declare type AlignContent = {
+    alignContent?: Alignment & Space;
+};
+declare type AlignItems = {
+    alignItems?: Alignment & ("flexStart" | "flexEnd" | "stretch" | "baseline");
+};
+declare type AlignSelf = {
+    alignSelf?: Alignment & ("auto" | "stretch" | "baseline");
+};
+declare type AllSizes = None | Sizes | "auto" | "initial" | "inherit";
+declare type BorderRadius = {
+    borderRadius?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "rounded";
+};
+declare type Cursor = {
+    cursor?: "auto" | "default" | "none" | "contextMenu" | "help" | "pointer" | "progress" | "wait" | "cell" | "crosshair" | "text" | "verticalText" | "alias" | "copy" | "move" | "noDrop" | "notAllowed" | "grab" | "grabbing" | "eResize" | "nResize" | "neResize" | "nwResize" | "sResize" | "seResize" | "swResize" | "wResize" | "ewResize" | "nsResize" | "neswResize" | "nwseResize" | "colResize" | "rowResize" | "allScroll" | "zoomIn" | "zoomOut";
+};
+declare type Dark = {
+    dark?: boolean;
+};
+declare type Flex = {
+    flex?: "auto" | "initial" | "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "none";
+};
+declare type FlexDirection = {
+    flexDirection?: "row" | "column" | "rowReverse" | "columnReverse";
+};
+declare type FlexGrow = {
+    flexGrow?: Binary;
+};
+declare type FlexShrink = {
+    flexShrink?: Binary;
+};
+declare type FlexWrap = {
+    flexWrap?: "wrap" | "nowrap" | "wrapReverse";
+};
+declare type JustifyContent = {
+    justifyContent?: Alignment & Space;
+};
+declare type JustifySelf = {
+    justifySelf?: Alignment & ("auto" | "stretch");
+};
+declare type LineHeight = {
+    lineHeight?: "loosest" | "looser" | "loose" | "normal" | "tight" | "tighter" | "tightest";
+};
+declare type Margin = {
+    marginRight?: AllSizes;
+    marginLeft?: AllSizes;
+    marginTop?: AllSizes;
+    marginBottom?: AllSizes;
+    marginX?: AllSizes;
+    marginY?: AllSizes;
+    margin?: AllSizes;
+    break?: string;
+    default?: string;
+};
+declare type MaxWidth = {
+    maxWidth?: Sizes;
+};
+declare type NumberSpacing = {
+    numberSpacing?: "tabular";
+};
+declare type Order = {
+    order?: None | "first" | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+};
+declare type Padding = {
+    paddingRight?: AllSizes;
+    paddingLeft?: AllSizes;
+    paddingTop?: AllSizes;
+    paddingBottom?: AllSizes;
+    paddingX?: AllSizes;
+    paddingY?: AllSizes;
+    padding?: AllSizes;
+    break?: string;
+    default?: string;
+};
+declare type Position = {
+    position?: "relative" | "absolute" | "fixed" | "sticky" | "static";
+};
+declare type Shadow = {
+    shadow?: "none" | "deep" | "deeper" | "deepest";
+};
+declare type Space = "spaceBetween" | "spaceAround" | "spaceEvenly";
+declare type TextAlign = {
+    textAlign?: "start" | "end" | "left" | "right" | "center" | "justify" | "justifyAll" | "matchParent";
+};
+declare type OverflowTypes = "scroll" | "visible" | "hidden" | "auto";
+declare type Overflow = {
+    overflowX?: OverflowTypes;
+    overflowY?: OverflowTypes;
+    overflow?: OverflowTypes;
+};
+declare type ZIndexType = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10;
+declare type ZIndexResponsiveType = {
+    [key: string]: ZIndexType;
+};
+declare type ZIndex = {
+    zIndex?: ZIndexType;
+} | ZIndexResponsiveType;
+export declare type GlobalProps = AlignContent & AlignItems & AlignSelf & BorderRadius & Cursor & Dark & Display & DisplaySizes & Flex & FlexDirection & FlexGrow & FlexShrink & FlexWrap & JustifyContent & JustifySelf & LineHeight & Margin & MaxWidth & NumberSpacing & Order & Overflow & Padding & Position & Shadow & TextAlign & ZIndex & {
+    hover?: string;
+};
+declare type DefaultProps = {
+    [key: string]: string;
+} | Record<string, unknown>;
+export declare const globalProps: (props: GlobalProps, defaultProps?: DefaultProps) => string;
+export declare const deprecatedProps: () => void;
+export declare const domSafeProps: (props: {
+    [key: string]: string;
+}) => {
+    [key: string]: string;
+};
+export {};

data/app/pb_kits/playbook/utilities/object.d.ts

@@ -0,0 +1 @@
+export declare const isEmpty: (obj: Record<string, unknown>) => boolean;

data/app/pb_kits/playbook/utilities/props.d.ts

@@ -0,0 +1,38 @@
+/**
+ * Represent a "No-Operation" function that can be used as a sensible
+ * default to event handlers in the absence of a value.
+ *
+ * @returns {() => {}} the noop function.
+ */
+export declare const noop: () => void;
+/**
+ * Maps a given aria object into HTML valid aria attribtues and their values.
+ *
+ * @param {Object} aria the object containing the aria prop values.
+ * @returns {Object} an object holding the HTML valid aria props and their values.
+ */
+export declare const buildAriaProps: (aria: {
+    [key: string]: string;
+}) => {
+    [key: string]: string;
+};
+/**
+ * Maps a given data object into HTML valid data attribtues and their values.
+ *
+ * @param {Object} data the object containing the data prop values.
+ * @returns {Object} an object holding the HTML valid data props and their values.
+ */
+export declare const buildDataProps: (data: {
+    [key: string]: any;
+}) => {
+    [key: string]: any;
+};
+/**
+ * Builds a Playbook valid root className off of the incoming css rules.
+ *
+ * @param {Object} rules a 'classnames' compliant rules object, used to derive the root className.
+ * @returns {String} the derived root className value.
+ */
+export declare const buildCss: (...rules: (string | {
+    [x: string]: string | boolean;
+})[]) => string;

data/app/pb_kits/playbook/utilities/text.d.ts

@@ -0,0 +1,3 @@
+export declare const titleize: (sentence: string) => string;
+export declare const joinPresent: (array: string[], separator: string) => string;
+export declare const camelToSnakeCase: (word: string) => string;

data/app/pb_kits/playbook/utilities/validEmojiChecker.d.ts

@@ -0,0 +1 @@
+export declare const isValidEmoji: (emoji: string) => boolean;