@patternfly/react-core 5.0.0-alpha.4 → 5.0.0-alpha.41

package/src/helpers/Popper/DeprecatedPopperTypes.ts

@@ -1,180 +0,0 @@
-/* eslint-disable @typescript-eslint/ban-types */
-/* eslint-disable @typescript-eslint/no-namespace */
-/**
- * Added types from tippy.js and popper.js to preserve backwards compatibility
- * Can remove in next breaking change release
- */
-
-/**
- * This kind of namespace declaration is not necessary, but is kept here for backwards-compatibility with
- * popper.js 1.x. It can be removed in 2.x so that the default export is simply the Popper class
- * and all the types / interfaces are top-level named exports.
- */
-declare namespace Popper {
-  export type Position = 'top' | 'right' | 'bottom' | 'left';
-
-  export type Placement =
-    | 'auto-start'
-    | 'auto'
-    | 'auto-end'
-    | 'top-start'
-    | 'top'
-    | 'top-end'
-    | 'right-start'
-    | 'right'
-    | 'right-end'
-    | 'bottom-end'
-    | 'bottom'
-    | 'bottom-start'
-    | 'left-end'
-    | 'left'
-    | 'left-start';
-
-  export type Boundary = 'scrollParent' | 'viewport' | 'window';
-
-  export type Behavior = 'flip' | 'clockwise' | 'counterclockwise';
-
-  export type ModifierFn = (data: Data, options: Object) => Data;
-
-  export interface Attributes {
-    'x-out-of-boundaries': '' | false;
-    'x-placement': Placement;
-  }
-
-  export interface Padding {
-    top?: number;
-    bottom?: number;
-    left?: number;
-    right?: number;
-  }
-
-  export interface BaseModifier {
-    order?: number;
-    enabled?: boolean;
-    fn?: ModifierFn;
-  }
-
-  export interface Modifiers {
-    shift?: BaseModifier;
-    offset?: BaseModifier & {
-      offset?: number | string;
-    };
-    preventOverflow?: BaseModifier & {
-      priority?: Position[];
-      padding?: number | Padding;
-      boundariesElement?: Boundary | Element;
-      escapeWithReference?: boolean;
-    };
-    keepTogether?: BaseModifier;
-    arrow?: BaseModifier & {
-      element?: string | Element;
-    };
-    flip?: BaseModifier & {
-      behavior?: Behavior | Position[];
-      padding?: number | Padding;
-      boundariesElement?: Boundary | Element;
-      flipVariations?: boolean;
-      flipVariationsByContent?: boolean;
-    };
-    inner?: BaseModifier;
-    hide?: BaseModifier;
-    applyStyle?: BaseModifier & {
-      onLoad?: Function;
-      gpuAcceleration?: boolean;
-    };
-    computeStyle?: BaseModifier & {
-      gpuAcceleration?: boolean;
-      x?: 'bottom' | 'top';
-      y?: 'left' | 'right';
-    };
-
-    [name: string]: (BaseModifier & Record<string, any>) | undefined;
-  }
-
-  export interface Offset {
-    top: number;
-    left: number;
-    width: number;
-    height: number;
-  }
-
-  export interface Data {
-    instance: Popper;
-    placement: Placement;
-    originalPlacement: Placement;
-    flipped: boolean;
-    hide: boolean;
-    arrowElement: Element;
-    styles: CSSStyleDeclaration;
-    arrowStyles: CSSStyleDeclaration;
-    attributes: Attributes;
-    boundaries: Object;
-    offsets: {
-      popper: Offset;
-      reference: Offset;
-      arrow: {
-        top: number;
-        left: number;
-      };
-    };
-  }
-
-  export interface PopperOptions {
-    placement?: Placement;
-    positionFixed?: boolean;
-    eventsEnabled?: boolean;
-    modifiers?: Modifiers;
-    removeOnDestroy?: boolean;
-
-    onCreate?(data: Data): void;
-
-    onUpdate?(data: Data): void;
-  }
-
-  export interface ReferenceObject {
-    clientHeight: number;
-    clientWidth: number;
-    referenceNode?: Node;
-
-    getBoundingClientRect(): ClientRect;
-  }
-}
-
-// Re-export types in the Popper namespace so that they can be accessed as top-level named exports.
-// These re-exports should be removed in 2.x when the "declare namespace Popper" syntax is removed.
-export type Padding = Popper.Padding;
-export type Position = Popper.Position;
-export type Placement = Popper.Placement;
-export type Boundary = Popper.Boundary;
-export type Behavior = Popper.Behavior;
-export type ModifierFn = Popper.ModifierFn;
-export type BaseModifier = Popper.BaseModifier;
-export type Modifiers = Popper.Modifiers;
-export type Offset = Popper.Offset;
-export type Data = Popper.Data;
-export type PopperOptions = Popper.PopperOptions;
-export type ReferenceObject = Popper.ReferenceObject;
-
-declare class Popper {
-  static modifiers: (BaseModifier & { name: string })[];
-  static placements: Placement[];
-  static Defaults: PopperOptions;
-
-  options: PopperOptions;
-  popper: Element;
-  reference: Element | ReferenceObject;
-
-  constructor(reference: Element | ReferenceObject, popper: Element, options?: PopperOptions);
-
-  destroy(): void;
-
-  update(): void;
-
-  scheduleUpdate(): void;
-
-  enableEventListeners(): void;
-
-  disableEventListeners(): void;
-}
-
-export default Popper;

package/src/helpers/Popper/DeprecatedTippyTypes.ts

@@ -1,284 +0,0 @@
-/* eslint-disable @typescript-eslint/prefer-function-type */
-/**
- * Added types from tippy.js and popper.js to preserve backwards compatibility
- * Can remove in next breaking change release
- */
-
-import Popper from './DeprecatedPopperTypes';
-
-export type BasePlacement = 'top' | 'bottom' | 'left' | 'right';
-
-export type Placement = Popper.Placement;
-
-export type Boundary = Popper.Boundary | HTMLElement;
-
-export type Content = string | Element | ((ref: Element) => Element | string);
-
-export type SingleTarget = Element;
-
-export type MultipleTargets = string | Element[] | NodeList;
-
-export type Targets = SingleTarget | MultipleTargets;
-
-export interface ReferenceElement<TProps = Props> extends Element {
-  _tippy?: Instance<TProps>;
-}
-
-export interface PopperElement<TProps = Props> extends HTMLDivElement {
-  _tippy?: Instance<TProps>;
-}
-
-export interface PopperInstance extends Popper {
-  // Undo the static so we can mutate values inside for `tippyDistance`
-  modifiers: Popper.BaseModifier[];
-}
-
-export interface LifecycleHooks<TProps = Props> {
-  onAfterUpdate(instance: Instance<TProps>, partialProps: Partial<TProps>): void;
-  onBeforeUpdate(instance: Instance<TProps>, partialProps: Partial<TProps>): void;
-  onCreate(instance: Instance<TProps>): void;
-  onDestroy(instance: Instance<TProps>): void;
-  onHidden(instance: Instance<TProps>): void;
-  onHide(instance: Instance<TProps>): void | false;
-  onMount(instance: Instance<TProps>): void;
-  onShow(instance: Instance<TProps>): void | false;
-  onShown(instance: Instance<TProps>): void;
-  onTrigger(instance: Instance<TProps>, event: Event): void;
-  onUntrigger(instance: Instance<TProps>, event: Event): void;
-}
-
-export interface Props extends LifecycleHooks {
-  allowHTML: boolean;
-  animateFill: boolean;
-  animation: string;
-  appendTo: 'parent' | Element | ((ref: Element) => Element);
-  aria: 'describedby' | 'labelledby' | null;
-  arrow: boolean | string | SVGElement;
-  boundary: Boundary;
-  content: Content;
-  delay: number | [number | null, number | null];
-  distance: number | string;
-  duration: number | [number | null, number | null];
-  flip: boolean;
-  flipBehavior: 'flip' | Placement[];
-  flipOnUpdate: boolean;
-  followCursor: boolean | 'horizontal' | 'vertical' | 'initial';
-  hideOnClick: boolean | 'toggle';
-  ignoreAttributes: boolean;
-  inertia: boolean;
-  inlinePositioning: boolean;
-  interactive: boolean;
-  interactiveBorder: number;
-  interactiveDebounce: number;
-  lazy: boolean;
-  maxWidth: number | string;
-  multiple: boolean;
-  offset: number | string;
-  placement: Placement;
-  plugins: Plugin[];
-  popperOptions: Popper.PopperOptions;
-  role: string;
-  showOnCreate: boolean;
-  sticky: boolean | 'reference' | 'popper';
-  theme: string;
-  touch: boolean | 'hold' | ['hold', number];
-  trigger: string;
-  triggerTarget: Element | Element[] | null;
-  updateDuration: number;
-  zIndex: number;
-}
-
-export interface DefaultProps extends Props {
-  delay: number | [number, number];
-  duration: number | [number, number];
-}
-
-export interface Instance<TProps = Props> {
-  clearDelayTimeouts(): void;
-  destroy(): void;
-  disable(): void;
-  enable(): void;
-  hide(duration?: number): void;
-  id: number;
-  plugins: Plugin<TProps>[];
-  popper: PopperElement<TProps>;
-  popperChildren: PopperChildren;
-  popperInstance: PopperInstance | null;
-  props: TProps;
-  reference: ReferenceElement<TProps>;
-  setContent(content: Content): void;
-  setProps(partialProps: Partial<TProps>): void;
-  show(duration?: number): void;
-  state: {
-    currentPlacement: Placement | null;
-    isEnabled: boolean;
-    isVisible: boolean;
-    isDestroyed: boolean;
-    isMounted: boolean;
-    isShown: boolean;
-  };
-}
-
-export interface PopperChildren {
-  tooltip: HTMLDivElement;
-  content: HTMLDivElement;
-  arrow: HTMLDivElement | null;
-}
-
-export interface TippyStatics {
-  readonly currentInput: { isTouch: boolean };
-  readonly defaultProps: DefaultProps;
-  readonly version: string;
-  setDefaultProps(partialProps: Partial<DefaultProps>): void;
-}
-
-export interface Tippy<TProps = Props> extends TippyStatics {
-  (
-    targets: SingleTarget,
-    optionalProps?: Partial<TProps>,
-    /** @deprecated use Props.plugins */
-    plugins?: Plugin<TProps>[]
-  ): Instance<TProps>;
-}
-
-export interface Tippy<TProps = Props> extends TippyStatics {
-  (
-    targets: MultipleTargets,
-    optionalProps?: Partial<TProps>,
-    /** @deprecated use Props.plugins */
-    plugins?: Plugin<TProps>[]
-  ): Instance<TProps>[];
-}
-
-declare const tippy: Tippy;
-
-// =============================================================================
-// Addon types
-// =============================================================================
-export interface DelegateInstance<TProps = Props> extends Instance<TProps> {
-  destroy(shouldDestroyTargetInstances?: boolean): void;
-}
-
-export interface Delegate<TProps = Props> {
-  (
-    targets: SingleTarget,
-    props: Partial<TProps> & { target: string },
-    /** @deprecated use Props.plugins */
-    plugins?: Plugin<TProps>[]
-  ): DelegateInstance<TProps>;
-}
-
-export interface Delegate<TProps = Props> {
-  (
-    targets: MultipleTargets,
-    props: Partial<TProps> & { target: string },
-    /** @deprecated use Props.plugins */
-    plugins?: Plugin<TProps>[]
-  ): DelegateInstance<TProps>[];
-}
-
-export type CreateSingleton<TProps = Props> = (
-  tippyInstances: Instance<TProps | Props>[],
-  optionalProps?: Partial<TProps>,
-  /** @deprecated use Props.plugins */
-  plugins?: Plugin<TProps>[]
-) => Instance<TProps>;
-
-declare const delegate: Delegate;
-declare const createSingleton: CreateSingleton;
-
-// =============================================================================
-// Plugin types
-// =============================================================================
-export interface Plugin<TProps = Props> {
-  name?: string;
-  defaultValue?: any;
-  fn(instance: Instance<TProps>): Partial<LifecycleHooks<TProps>>;
-}
-
-export interface AnimateFillInstance extends Instance {
-  popperChildren: PopperChildren & {
-    backdrop: HTMLDivElement | null;
-  };
-}
-
-export interface AnimateFill extends Plugin {
-  name: 'animateFill';
-  defaultValue: false;
-  fn(instance: AnimateFillInstance): Partial<LifecycleHooks>;
-}
-
-export interface FollowCursor extends Plugin {
-  name: 'followCursor';
-  defaultValue: false;
-}
-
-export interface InlinePositioning extends Plugin {
-  name: 'inlinePositioning';
-  defaultValue: false;
-}
-
-export interface Sticky extends Plugin {
-  name: 'sticky';
-  defaultValue: false;
-}
-
-declare const animateFill: AnimateFill;
-declare const followCursor: FollowCursor;
-declare const inlinePositioning: InlinePositioning;
-declare const sticky: Sticky;
-
-// =============================================================================
-// Misc types
-// =============================================================================
-export interface HideAllOptions {
-  duration?: number;
-  exclude?: Instance | ReferenceElement;
-}
-
-export type HideAll = (options?: HideAllOptions) => void;
-
-declare const hideAll: HideAll;
-declare const roundArrow: string;
-
-// =============================================================================
-// Deprecated types - these will be removed in the next major
-// =============================================================================
-/**
- * @deprecated use tippy.setDefaultProps({plugins: [...]});
- */
-export type CreateTippyWithPlugins = (outerPlugins: Plugin[]) => Tippy;
-declare const createTippyWithPlugins: CreateTippyWithPlugins;
-
-/** @deprecated */
-export interface AnimateFillProps {
-  animateFill: Props['animateFill'];
-}
-
-/** @deprecated */
-export interface FollowCursorProps {
-  followCursor: Props['followCursor'];
-}
-
-/** @deprecated */
-export interface InlinePositioningProps {
-  inlinePositioning: Props['inlinePositioning'];
-}
-
-/** @deprecated */
-export interface StickyProps {
-  sticky: Props['sticky'];
-}
-
-export default tippy;
-export {
-  hideAll,
-  createTippyWithPlugins,
-  delegate,
-  createSingleton,
-  animateFill,
-  followCursor,
-  inlinePositioning,
-  sticky,
-  roundArrow
-};

package/src/next/components/Wizard/examples/WizardKitchenSink.tsx

@@ -1,236 +0,0 @@
-import React from 'react';
-
-import {
-  FormGroup,
-  TextInput,
-  Drawer,
-  DrawerContent,
-  Button,
-  Flex,
-  DrawerPanelContent,
-  DrawerColorVariant,
-  DrawerHead,
-  DrawerActions,
-  DrawerCloseButton,
-  Checkbox
-} from '@patternfly/react-core';
-import {
-  Wizard,
-  WizardStep,
-  WizardBody,
-  WizardFooter,
-  useWizardContext,
-  WizardHeader,
-  WizardFooterWrapper,
-  WizardNavStepFunction,
-  WizardNavStepData
-} from '@patternfly/react-core/next';
-
-const StepId = {
-  StepOne: 'sink-step-1',
-  StepTwo: 'sink-step-2',
-  StepTwoSubOne: 'sink-step-2-1',
-  StepTwoSubTwo: 'sink-step-2-2',
-  StepThree: 'sink-step-3',
-  StepFour: 'sink-step-4',
-  ReviewStep: 'sink-review-step'
-};
-
-interface SomeContextProps {
-  isToggleStepChecked: boolean;
-  errorMessage: string | undefined;
-  setIsToggleStepChecked(isHidden: boolean): void;
-  setErrorMessage(error: string | undefined): void;
-}
-type SomeContextRenderProps = Pick<SomeContextProps, 'isToggleStepChecked' | 'errorMessage'>;
-interface SomeContextProviderProps {
-  children: (context: SomeContextRenderProps) => React.ReactElement;
-}
-
-const SomeContext = React.createContext({} as SomeContextProps);
-
-const SomeContextProvider = ({ children }: SomeContextProviderProps) => {
-  const [isToggleStepChecked, setIsToggleStepChecked] = React.useState(false);
-  const [errorMessage, setErrorMessage] = React.useState<string>();
-
-  return (
-    <SomeContext.Provider value={{ isToggleStepChecked, errorMessage, setIsToggleStepChecked, setErrorMessage }}>
-      {children({ isToggleStepChecked, errorMessage })}
-    </SomeContext.Provider>
-  );
-};
-
-const CustomWizardFooter = () => {
-  const { activeStep, onNext, onBack, onClose } = useWizardContext();
-
-  return (
-    <WizardFooter
-      activeStep={activeStep}
-      onNext={onNext}
-      onBack={onBack}
-      onClose={onClose}
-      isBackDisabled={activeStep.index === 1}
-    />
-  );
-};
-
-const StepContentWithDrawer = () => {
-  const [isDrawerExpanded, setIsDrawerExpanded] = React.useState(false);
-
-  return (
-    <Drawer isInline isExpanded={isDrawerExpanded}>
-      <DrawerContent
-        panelContent={
-          <DrawerPanelContent widths={{ default: 'width_33' }} colorVariant={DrawerColorVariant.light200}>
-            <DrawerHead>
-              <span tabIndex={isDrawerExpanded ? 0 : -1}>drawer content</span>
-              <DrawerActions>
-                <DrawerCloseButton onClick={() => setIsDrawerExpanded(false)} />
-              </DrawerActions>
-            </DrawerHead>
-          </DrawerPanelContent>
-        }
-      >
-        <WizardBody>
-          <Flex direction={{ default: 'column' }}>
-            {!isDrawerExpanded && (
-              <Button isInline variant="link" onClick={() => setIsDrawerExpanded(prevExpanded => !prevExpanded)}>
-                Open drawer
-              </Button>
-            )}
-
-            <FormGroup fieldId="some-text-input" label="Text input label">
-              <TextInput aria-label="Some Text Input Label" />
-            </FormGroup>
-          </Flex>
-        </WizardBody>
-      </DrawerContent>
-    </Drawer>
-  );
-};
-
-const CustomStepThreeFooter = () => {
-  const { onNext: goToNextStep, onBack, onClose } = useWizardContext();
-  const [isLoading, setIsLoading] = React.useState(false);
-
-  async function onNext(goToStep: () => void) {
-    setIsLoading(true);
-    await new Promise(resolve => setTimeout(resolve, 2000));
-    setIsLoading(false);
-
-    goToStep();
-  }
-
-  return (
-    <WizardFooterWrapper>
-      <Button variant="primary" onClick={() => onNext(goToNextStep)} isLoading={isLoading} isDisabled={isLoading}>
-        Async Next
-      </Button>
-      <Button variant="secondary" onClick={onBack} isDisabled={isLoading}>
-        Back
-      </Button>
-      <Button variant="link" onClick={onClose} isDisabled={isLoading}>
-        Cancel
-      </Button>
-    </WizardFooterWrapper>
-  );
-};
-
-const StepContentWithActions = () => {
-  const { isToggleStepChecked, errorMessage, setIsToggleStepChecked, setErrorMessage } = React.useContext(SomeContext);
-
-  return (
-    <>
-      <Checkbox
-        label="Give this step an error status"
-        isChecked={!!errorMessage}
-        onChange={checked => setErrorMessage(checked ? 'Some error message' : undefined)}
-        id="toggle-error-checkbox"
-        name="Toggle Error Checkbox"
-      />
-      <Checkbox
-        label="Toggle visibility of the next step"
-        isChecked={isToggleStepChecked}
-        onChange={checked => setIsToggleStepChecked(checked)}
-        id="toggle-hide-step-checkbox"
-        name="Toggle Hide Step Checkbox"
-      />
-    </>
-  );
-};
-
-export const WizardKitchenSink: React.FunctionComponent = () => {
-  const onNext: WizardNavStepFunction = (_currentStep: WizardNavStepData, _previousStep: WizardNavStepData) => {};
-  const [isSubmitting, setIsSubmitting] = React.useState(false);
-
-  async function onSubmit(): Promise<void> {
-    setIsSubmitting(true);
-
-    await new Promise(resolve => setTimeout(resolve, 5000));
-
-    setIsSubmitting(false);
-    alert('50 points to Gryffindor!');
-  }
-
-  return (
-    <SomeContextProvider>
-      {({ isToggleStepChecked, errorMessage }) => (
-        <Wizard
-          height={400}
-          header={<WizardHeader title="You're a wizard, Harry" closeButtonAriaLabel="Close header" />}
-          footer={<CustomWizardFooter />}
-          onNext={onNext}
-          isStepVisitRequired
-        >
-          <WizardStep id={StepId.StepOne} name="Step 1" body={null} status="error">
-            <StepContentWithDrawer />
-          </WizardStep>
-          <WizardStep
-            id={StepId.StepTwo}
-            name="Step 2"
-            steps={[
-              <WizardStep
-                status={errorMessage ? 'error' : 'default'}
-                id={StepId.StepTwoSubOne}
-                key={StepId.StepTwoSubOne}
-                name="Substep 1"
-              >
-                <StepContentWithActions />
-              </WizardStep>,
-              <WizardStep
-                id={StepId.StepTwoSubTwo}
-                key={StepId.StepTwoSubTwo}
-                name="Substep 2"
-                isHidden={isToggleStepChecked}
-              >
-                Substep 2 content
-              </WizardStep>
-            ]}
-          />
-          <WizardStep
-            id={StepId.StepThree}
-            name="Step 3"
-            navItem={{
-              content: <span style={{ color: 'var(--pf-global--default-color--200)' }}>Custom item</span>
-            }}
-            footer={<CustomStepThreeFooter />}
-          >
-            Step 3 content w/ custom async footer
-          </WizardStep>
-          <WizardStep
-            id={StepId.ReviewStep}
-            name="Review"
-            footer={{
-              nextButtonText: 'Submit',
-              onNext: onSubmit,
-              isNextDisabled: isSubmitting,
-              isBackDisabled: isSubmitting
-            }}
-          >
-            {isSubmitting ? 'Calculating wizard score...' : 'Review step content'}
-          </WizardStep>
-        </Wizard>
-      )}
-    </SomeContextProvider>
-  );
-};