@progressiveui/react 1.22.0

package/src/internal/RfFormJest.js

@@ -0,0 +1,45 @@
+import React, { Component } from 'react';
+import { reduxForm } from 'redux-form';
+import { connect } from 'react-redux';
+import { load as loadAccount } from './loadDefaultData';
+
+class FormEl extends Component {
+  render() {
+    const { handleSubmit } = this.props;
+
+    return (
+      <form onSubmit={handleSubmit} className="wfp-form--stacked">
+        {this.props.children}
+      </form>
+    );
+  }
+}
+
+let Form = reduxForm({
+  form: 'SimpleForm', //Form name is same
+  enableReinitialize: true,
+})(FormEl);
+
+// You have to connect() to any reducers that you wish to connect to yourself
+Form = connect(
+  state => ({
+    initialValues: state.account.data, // pull initial values from account reducer
+  }),
+  { load: loadAccount } // bind account loading action creator
+)(Form);
+
+class RfFormWrapper extends Component {
+  onSubmit(submit) {
+    alert('Submitted: ' + JSON.stringify(submit));
+  }
+
+  render() {
+    return (
+      <Form onSubmit={this.onSubmit} {...this.props}>
+        {this.props.children}
+      </Form>
+    );
+  }
+}
+
+export default RfFormWrapper;

package/src/internal/RfFormWrapper.js

@@ -0,0 +1,86 @@
+import React, { Component } from 'react';
+import { reduxForm } from 'redux-form';
+import { connect } from 'react-redux';
+//import { Values } from 'redux-form-website-template';
+import Button from '../components/Button';
+import Blockquote from '../components/Blockquote';
+import FormLabel from '../components/FormLabel/RfFormLabel';
+import { load as loadAccount } from './loadDefaultData';
+
+class FormEl extends Component {
+  render() {
+    const {
+      handleSubmit,
+      pristine,
+      reset,
+      sampleData,
+      submitting,
+    } = this.props;
+
+    const data = sampleData
+      ? sampleData
+      : {
+          // used to populate "account" reducer when "Load" is clicked
+          input: 13,
+        };
+
+    return (
+      <form onSubmit={handleSubmit} className="wfp-form--stacked">
+        {this.props.children}
+        <div>
+          <br />
+          <FormLabel>Form Debug Controls</FormLabel>
+          <br />
+          <Button type="submit" disabled={pristine || submitting}>
+            Submit
+          </Button>
+          &nbsp;
+          <Button
+            type="button"
+            kind="secondary"
+            disabled={pristine || submitting}
+            onClick={reset}>
+            Clear Values
+          </Button>
+          &nbsp;
+          <Button
+            type="button"
+            kind="secondary"
+            onClick={() => this.props.load(data)}>
+            Load Sample Data
+          </Button>
+          <Blockquote>{/*<Values form="SimpleForm" />*/}</Blockquote>
+        </div>
+      </form>
+    );
+  }
+}
+
+let Form = reduxForm({
+  form: 'SimpleForm', //Form name is same
+  enableReinitialize: true,
+})(FormEl);
+
+// You have to connect() to any reducers that you wish to connect to yourself
+Form = connect(
+  state => ({
+    initialValues: state.account.data, // pull initial values from account reducer
+  }),
+  { load: loadAccount } // bind account loading action creator
+)(Form);
+
+class RfFormWrapper extends Component {
+  onSubmit(submit) {
+    alert('Submitted: ' + JSON.stringify(submit));
+  }
+
+  render() {
+    return (
+      <Form onSubmit={this.onSubmit} {...this.props}>
+        {this.props.children}
+      </Form>
+    );
+  }
+}
+
+export default RfFormWrapper;

package/src/internal/configureStore.js

@@ -0,0 +1,13 @@
+import { createStore, combineReducers } from 'redux';
+import { reducer as reduxFormReducer } from 'redux-form';
+import account from './loadDefaultData';
+
+const reducer = combineReducers({
+  account,
+  form: reduxFormReducer, // mounted under "form"
+});
+const store = (window.__REDUX_DEVTOOLS_EXTENSION__
+  ? window.__REDUX_DEVTOOLS_EXTENSION__()(createStore)
+  : createStore)(reducer);
+
+export default store;

package/src/internal/loadDefaultData.js

@@ -0,0 +1,20 @@
+// Quack! This is a duck. https://github.com/erikras/ducks-modular-redux
+const LOAD = 'redux-form-examples/account/LOAD';
+
+const reducer = (state = {}, action) => {
+  switch (action.type) {
+    case LOAD:
+      return {
+        data: action.data,
+      };
+    default:
+      return state;
+  }
+};
+
+/**
+ * Simulates data loaded into this reducer from somewhere
+ */
+export const load = data => ({ type: LOAD, data });
+
+export default reducer;

package/src/internal/useDetectPrint.js.legacy

@@ -0,0 +1,20 @@
+import { useState, useEffect } from 'react';
+
+function useDetectPrint() {
+  const [isPrinting, toggleStatus] = useState(false);
+
+  useEffect(() => {
+    const printMq =
+      typeof window !== 'undefined' &&
+      window.matchMedia &&
+      window.matchMedia('print');
+    const mqEvent = (mqList) => toggleStatus(!!mqList.matches);
+
+    printMq.addListener(mqEvent);
+    return () => printMq.removeListener(mqEvent);
+  });
+
+  return isPrinting;
+}
+
+export default useDetectPrint;

package/src/internal/withTests.js

@@ -0,0 +1,7 @@
+import results from '../../jest-test-results.json';
+import { withTests } from '@storybook/addon-jest';
+
+export default withTests({
+  results,
+  filesExt: '-test.js',
+});

package/src/prop-types/types.ts

@@ -0,0 +1,32 @@
+import { oneOf } from "prop-types";
+
+// TODO: remove legacy
+export const ButtonTypes = {
+  buttonKind: oneOf([
+    "primary",
+    "secondary",
+    "accent",
+    "danger",
+    "ghost",
+    "inverse--primary",
+    "inverse",
+    "danger--primary",
+    "tertiary",
+    "navigation",
+  ]),
+};
+
+export const buttonKinds = [
+  "primary",
+  "secondary",
+  "tertiary",
+  "accent",
+  "danger--primary",
+  "danger",
+  "ghost",
+  "inverse--primary",
+  "inverse",
+  "navigation",
+];
+
+export const notificationtypes = ["info", "success", "warning", "error"];

package/src/tools/__tests__/uniqueId.test.ts

@@ -0,0 +1,16 @@
+import uniqueId from "../uniqueId";
+
+describe("uniqueId", () => {
+  it("increments unique id as expected", () => {
+    const uniqueIdOne = uniqueId();
+    const uniqueIdTwo = uniqueId();
+
+    expect(uniqueIdOne).toEqual("id1");
+    expect(uniqueIdTwo).toEqual("id2");
+  });
+
+  it("accepts a custom prefix", () => {
+    const uniqueIdThree = uniqueId("customPrefix");
+    expect(uniqueIdThree).toEqual("customPrefix3");
+  });
+});

package/src/tools/mergeRefs.js

@@ -0,0 +1,23 @@
+/**
+ * Copyright IBM Corp. 2016, 2018
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * @param {...Ref<Element>} refs List of React refs to merge.
+ * @returns {Ref<Element>} Merged React ref.
+ */
+const mergeRefs = (...refs) => el => {
+  refs.forEach(ref => {
+    // https://github.com/facebook/react/issues/13029#issuecomment-410002316
+    if (typeof ref === 'function') {
+      ref(el);
+    } else if (Object(ref) === ref) {
+      ref.current = el;
+    }
+  });
+};
+
+export default mergeRefs;

package/src/tools/setupGetInstanceId.js

@@ -0,0 +1,10 @@
+/**
+ * Generic utility to initialize a method that will return a unique instance id
+ * for a component.
+ */
+export default function setupGetInstanceId() {
+  let instanceId = 0;
+  return function getInstanceId() {
+    return ++instanceId;
+  };
+}

package/src/tools/uniqueId.ts

@@ -0,0 +1,8 @@
+let lastId = 0;
+
+export function uniqueId(prefix = 'id') {
+  lastId++;
+  return `${prefix}${lastId}`;
+}
+
+export default uniqueId;

package/src/tools/withState.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+export default class WithState extends React.PureComponent {
+  static propTypes = {
+    initialState: PropTypes.object,
+  };
+
+  UNSAFE_componentWillMount() {
+    this.setState(this.props.initialState);
+  }
+
+  boundSetState = (...args) => this.setState(...args);
+
+  render() {
+    return this.props.children({
+      state: this.state,
+      setState: this.boundSetState,
+    });
+  }
+}

package/src/tools/wrapComponent.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+
+const wrapComponent = ({ name, className, type }) => {
+  const Component = props => {
+    const componentClass = cx(className, props.className);
+    return React.createElement(type, {
+      ...props,
+      // Prevent Weird quirk where `cx` will evaluate to an empty string, '',
+      // and so we have empty `class` attributes in the resulting markup
+      // eslint-disable-next-line no-extra-boolean-cast
+      className: !!componentClass ? componentClass : undefined,
+    });
+  };
+  Component.displayName = name;
+  Component.propTypes = {
+    className: PropTypes.string,
+  };
+  return Component;
+};
+
+export default wrapComponent;

package/src/utils/index.d.ts

@@ -0,0 +1,138 @@
+declare type ScreenSize = "full" | "lg" | "md" | "sm";
+
+declare type StatusKind = "info" | "error" | "warning" | "success";
+
+declare type ButtonKind =
+  | "primary"
+  | "secondary"
+  // | 'accent'
+  | "danger"
+  | "ghost";
+// | 'inverse--primary'
+// | 'inverse'
+// | 'danger--primary'
+// | 'danger--secondary'
+// | 'tertiary'
+// | 'navigation';
+
+declare type InputModes =
+  | "none"
+  | "text"
+  | "tel"
+  | "url"
+  | "email"
+  | "numeric"
+  | "decimal"
+  | "search"
+  | "password"
+  | undefined;
+
+declare interface IIcon {
+  name?: string;
+  tags?: string;
+  styles?: string;
+  width?: string;
+  height?: string;
+  viewBox: string;
+  svgData: React.ReactSVG | React.ReactSVGElement;
+}
+
+declare type CardKind = "simple-card" | "overlay";
+
+declare type HeroKind =
+  | "landscape"
+  | "landscape-light"
+  | "emergencies"
+  | "split"
+  | "hero"
+  | "splash"
+  | "splash-image"
+  | "splash-compact"
+  | "related";
+
+declare type NotificationType = "toast" | "inline";
+declare type NotificationKind =
+  | "error"
+  | "success"
+  | "warning"
+  | "warning-alt"
+  | "info";
+
+declare type TagType = "info" | "error" | "success" | "warning" | "custom";
+
+declare type TextKind =
+  | "h1"
+  | "h2"
+  | "h3"
+  | "h4"
+  | "h5"
+  | "h6"
+  | "title"
+  | "subtitle"
+  | "bold"
+  | "strong"
+  | "inline-highlight"
+  | "a"
+  | "p"
+  | "i"
+  | "caption"
+  | "code";
+
+declare type Spacing =
+  | "3xs"
+  | "2xs"
+  | "xs"
+  | "md"
+  | "lg"
+  | "xl"
+  | "2xl"
+  | "3xl"
+  | "4xl";
+
+declare type Placement =
+  | "top"
+  | "top-start"
+  | "top-end"
+  | "right"
+  | "right-start"
+  | "right-end"
+  | "bottom"
+  | "bottom-start"
+  | "bottom-end"
+  | "left"
+  | "left-start"
+  | "left-end";
+
+declare type UnitType =
+  | "none"
+  | "usd"
+  | "partners"
+  | "beneficiaries"
+  | "households"
+  | "months"
+  | "mt"
+  | "metricTons"
+  | "kg"
+  | "num"
+  | "yearMonth"
+  | "level"
+  | "people"
+  | "countries"
+  | "percentage";
+
+export {
+  ScreenSize,
+  StatusKind,
+  IIcon,
+  ButtonKind,
+  InputModes,
+  CardKind,
+  HeroKind,
+  NotificationType,
+  NotificationKind,
+  TagType,
+  TextKind,
+  Spacing,
+  Placement,
+  UnitType,
+};

package/umd/dist/components/Accordion/__tests__/utils.d.ts

@@ -0,0 +1,12 @@
+import React, { Ref, ReactElement } from "react";
+import { render as nonStrictRender, RenderOptions, RenderResult } from "@testing-library/react";
+import { AccordionProps, AccordionItemProps } from "..";
+export { nonStrictRender };
+export declare const render: (ui: ReactElement, options?: Omit<RenderOptions, "queries">) => RenderResult;
+export declare const getAccordion: ({ ref, item1Ref, props, item1Props, item2Props, }?: {
+    ref?: React.Ref<HTMLDivElement> | undefined;
+    item1Ref?: React.Ref<HTMLDivElement> | undefined;
+    props?: AccordionProps | undefined;
+    item1Props?: AccordionItemProps | undefined;
+    item2Props?: AccordionItemProps | undefined;
+}) => import("react/jsx-runtime").JSX.Element;

package/umd/dist/components/Accordion/components/Accordion.d.ts

@@ -0,0 +1,7 @@
+import * as React from "react";
+import { AccordionProviderOptions } from "../utils/constants";
+import { ControlledAccordionProps } from "./ControlledAccordion";
+interface AccordionProps extends AccordionProviderOptions, Omit<ControlledAccordionProps, "providerValue"> {
+}
+declare const Accordion: React.ForwardRefExoticComponent<AccordionProps & React.RefAttributes<HTMLDivElement>>;
+export { Accordion, AccordionProps };

package/umd/dist/components/Accordion/components/AccordionItem.d.ts

@@ -0,0 +1,46 @@
+import * as React from "react";
+import { TransitionState } from "react-transition-state";
+import { ElementProps, ItemState, ItemStateOptions } from "../utils/constants";
+interface ItemElementProps<E extends HTMLElement> extends ElementProps<E, TransitionState> {
+    ref?: React.ForwardedRef<E>;
+}
+type NodeOrFunc = React.ReactNode | ((props: ItemState) => React.ReactNode);
+interface AccordionItemProps extends ItemStateOptions, ElementProps<HTMLDivElement, TransitionState> {
+    /**
+     * Either a React node or a function that returns a React node.
+     * This property defines the content of the accordion item's header.
+     */
+    header?: NodeOrFunc;
+    /**
+     * Can be either a React node or a function that returns a React node.
+     * This property defines the main content of the accordion item.
+     */
+    children?: NodeOrFunc;
+    /**
+     * Specifies the HTML tag to be used for the heading element of the accordion item.
+     * It can be any of the heading tags from 'h1' to 'h6'.
+     */
+    headingTag?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+    /**
+     * Properties to be passed to the heading element of the accordion item.
+     * It extends from `ItemElementProps` which includes standard HTML attributes and a ref.
+     */
+    headingProps?: ItemElementProps<HTMLHeadingElement>;
+    /**
+     * Properties to be passed to the button element within the accordion item.
+     * It extends from `ItemElementProps` which includes standard HTML attributes and a ref.
+     */
+    buttonProps?: ItemElementProps<HTMLButtonElement>;
+    /**
+     * Properties to be passed to the content container element of the accordion item.
+     * It extends from `ItemElementProps` which includes standard HTML attributes and a ref.
+     */
+    contentProps?: ItemElementProps<HTMLDivElement>;
+    /**
+     * Properties to be passed to the panel element inside the content container of the accordion item.
+     * It extends from `ItemElementProps` which includes standard HTML attributes and a ref.
+     */
+    panelProps?: ItemElementProps<HTMLDivElement>;
+}
+declare const AccordionItem: React.ForwardRefExoticComponent<AccordionItemProps & React.RefAttributes<HTMLDivElement>>;
+export { AccordionItem, AccordionItemProps };

package/umd/dist/components/Accordion/components/AccordionProvider.d.ts

@@ -0,0 +1,7 @@
+import * as React from "react";
+import { AccordionProviderValue } from "../utils/constants";
+declare const AccordionProvider: (props: {
+    value: AccordionProviderValue;
+    children?: React.ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
+export { AccordionProvider };

package/umd/dist/components/Accordion/components/ControlledAccordion.d.ts

@@ -0,0 +1,8 @@
+import * as React from "react";
+import { AccordionProviderValue, ElementProps } from "../utils/constants";
+interface ControlledAccordionProps extends ElementProps<HTMLDivElement> {
+    providerValue: AccordionProviderValue;
+    children?: React.ReactNode;
+}
+declare const ControlledAccordion: React.ForwardRefExoticComponent<ControlledAccordionProps & React.RefAttributes<HTMLDivElement>>;
+export { ControlledAccordion, ControlledAccordionProps };

package/umd/dist/components/Accordion/components/withAccordionItem.d.ts

@@ -0,0 +1,11 @@
+import * as React from "react";
+import { ItemState, ItemStateOptions } from "../utils/constants";
+interface ItemStateProps<E extends Element, T = E> extends ItemState {
+    itemRef: React.RefObject<E>;
+    forwardedRef: React.ForwardedRef<T>;
+}
+declare const withAccordionItem: {
+    <P extends ItemStateOptions, E extends Element, T = E>(WrappedItem: any): React.ForwardRefExoticComponent<React.PropsWithoutRef<P> & React.RefAttributes<T>>;
+    displayName: string;
+};
+export { withAccordionItem, ItemStateProps };

package/umd/dist/components/Accordion/hooks/useAccordion.d.ts

@@ -0,0 +1,5 @@
+import { HTMLAttributes } from 'react';
+declare const useAccordion: () => {
+    accordionProps: HTMLAttributes<Element>;
+};
+export { useAccordion };

package/umd/dist/components/Accordion/hooks/useAccordionContext.d.ts

@@ -0,0 +1,5 @@
+import { TransitionState } from 'react-transition-state';
+import { AccordionProviderValue, ItemKey } from '../utils/constants';
+declare const getItemState: (providerValue: AccordionProviderValue, key: ItemKey, itemInitialEntered?: boolean) => TransitionState;
+declare const useAccordionContext: () => AccordionProviderValue;
+export { useAccordionContext, getItemState };

package/umd/dist/components/Accordion/hooks/useAccordionItem.d.ts

@@ -0,0 +1,7 @@
+import { HTMLAttributes, ButtonHTMLAttributes } from "react";
+import { ItemState } from "../utils/constants";
+declare const useAccordionItem: ({ state, toggle, disabled }: ItemState) => {
+    buttonProps: ButtonHTMLAttributes<Element>;
+    panelProps: HTMLAttributes<Element>;
+};
+export { useAccordionItem };

package/umd/dist/components/Accordion/hooks/useAccordionItemEffect.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import { ItemStateOptions } from '../utils/constants';
+declare const useAccordionItemEffect: <E extends Element>({ itemKey, initialEntered, disabled, }?: ItemStateOptions) => {
+    itemRef: import("react").RefObject<HTMLInputElement>;
+    state: Readonly<{
+        status: import("react-transition-state").TransitionStatus;
+        isMounted: boolean;
+        isEnter: boolean;
+        isResolved: boolean;
+    }>;
+    toggle: (toEnter?: boolean) => void;
+};
+export { useAccordionItemEffect };

package/umd/dist/components/Accordion/hooks/useAccordionProvider.d.ts

@@ -0,0 +1,3 @@
+import { AccordionProviderOptions, AccordionProviderValue } from '../utils/constants';
+declare const useAccordionProvider: (options?: AccordionProviderOptions) => AccordionProviderValue;
+export { useAccordionProvider };

package/umd/dist/components/Accordion/hooks/useAccordionState.d.ts

@@ -0,0 +1,14 @@
+import { ItemKey } from '../utils/constants';
+declare const useAccordionState: () => {
+    getItemState: (key: ItemKey, { initialEntered }?: {
+        initialEntered?: boolean | undefined;
+    }) => Readonly<{
+        status: import("react-transition-state").TransitionStatus;
+        isMounted: boolean;
+        isEnter: boolean;
+        isResolved: boolean;
+    }>;
+    toggle: (key: ItemKey, toEnter?: boolean | undefined) => void;
+    toggleAll: (toEnter?: boolean | undefined) => void;
+};
+export { useAccordionState };

package/umd/dist/components/Accordion/hooks/useHeightTransition.d.ts

@@ -0,0 +1,4 @@
+import { CSSProperties } from 'react';
+import { TransitionState } from 'react-transition-state';
+declare const useHeightTransition: <E extends Element>({ status, isResolved, }: TransitionState) => readonly [CSSProperties, import("react").RefObject<HTMLInputElement>];
+export { useHeightTransition };

package/umd/dist/components/Accordion/hooks/useId.d.ts

@@ -0,0 +1,3 @@
+import { useId } from 'react';
+declare const _useId: typeof useId;
+export { _useId as useId };

package/umd/dist/components/Accordion/hooks/useMergeRef.d.ts

@@ -0,0 +1,4 @@
+import { RefCallback, MutableRefObject } from 'react';
+type Ref<T> = RefCallback<T> | MutableRefObject<T | null>;
+declare function useMergeRef<T>(refA?: Ref<T> | null, refB?: Ref<T> | null): Ref<T> | null | undefined;
+export { useMergeRef };