@progressiveui/react 2.0.3 → 2.0.5

package/src/index.ts

@@ -1,184 +0,0 @@
-export { Accordion, AccordionItem } from "./components/Accordion";
-
-export { AuthLayout, BackgroundContent } from "./components/AuthLayout";
-export {
-  BannerNavigation,
-  BannerNavigationItem,
-  BannerNavigationWithContent,
-} from "./components/BannerNavigation";
-
-export { default as Avatar } from "./components/Avatar";
-//export { default as Blockquote } from './components/Blockquote';
-export { default as Breadcrumb } from "./components/Breadcrumb";
-export { default as BreadcrumbItem } from "./components/BreadcrumbItem";
-export { default as BreadcrumbHome } from "./components/BreadcrumbHome";
-export { default as Button } from "./components/Button";
-
-export { buttonKinds, notificationtypes } from "./prop-types/types";
-export { default as Empty } from "./components/Empty";
-export { Hero, HeroExternal } from "./components/Hero";
-export { Card, CardExternal } from "./components/Card";
-
-export {
-  DatePicker,
-  DateRangePicker,
-  DatePickerInput,
-  DateRangePickerInput,
-} from "./components/DatePicker";
-
-export { default as Checkbox } from "./components/Checkbox";
-export { default as Credits } from "./components/Credits";
-export { default as ContentSwitcher } from "./components/ContentSwitcher";
-export {
-  ContextMenu,
-  ContextMenuGroup,
-  ContextMenuItem,
-} from "./components/ContextMenu";
-/*export {
-  SingleDatePickerInput,
-  DateRangePickerInput,
-} from './components/DatePicker';*/
-
-//export * from './FileUploader.Skeleton';
-/*export {
-  FeatureFlags,
-  FeatureFlagContext,
-  useFeatureFlags,
-  useFeatureFlag,
-} from './components/FeatureFlags';
-*/
-export {
-  Footer,
-  FooterExternal,
-  FooterMetaLink,
-  LinksColumn,
-} from "./components/Footer";
-
-export { default as Form } from "./components/Form";
-//export { default as FormControls } from './components/FormControls';
-//export { default as FormError } from './components/FormError';
-export { default as FormGroup } from "./components/FormGroup";
-export { default as FormHint } from "./components/FormHint";
-export { default as FormItem } from "./components/FormItem";
-export { default as FormLabel } from "./components/FormLabel";
-//export { default as FormWizard } from './components/FormWizard';
-//export { default as Icon } from './components/Icon/index.ts.legacy';
-export { default as InfoBar } from "./components/InfoBar";
-export { default as Link } from "./components/Link";
-export { default as Loading } from "./components/Loading";
-export {
-  default as Input,
-  useInput,
-  Label,
-  InlineErrorMessage,
-  Helper,
-  AddonBefore,
-  AddonAfter,
-} from "./components/Input";
-export { default as InlineLoading } from "./components/InlineLoading";
-export { List, ListItem } from "./components/List";
-export {
-  MainNavigation,
-  MainNavigationContext,
-  useMainNavigation,
-} from "./components/MainNavigation";
-export { default as MainNavigationItem } from "./components/MainNavigationItem";
-export {
-  SubNavigation,
-  SubNavigationHeader,
-  SubNavigationTitle,
-  SubNavigationLink,
-  SubNavigationFilter,
-  SubNavigationContent,
-  SubNavigationList,
-  SubNavigationGroup,
-  SubNavigationItem,
-} from "./components/SubNavigation";
-export { default as mdxComponents } from "./components/MdxComponents";
-export { default as Modal, ModalFooter } from "./components/Modal";
-export { default as ModalWrapper } from "./components/ModalWrapper";
-export {
-  Module,
-  ModuleBody,
-  ModuleHeader,
-  ModuleFooter,
-} from "./components/Module";
-// export notificationStyle from './components/Notification/Notification.legacy';
-export {
-  ToastNotification,
-  // InlineNotification,
-  NotificationActionButton,
-  NotificationButton,
-  NotificationTextDetails,
-  Callout,
-} from "./components/Notification";
-
-// Legacy export for backwards compatibility
-export { Callout as BlockNotification } from "./components/Notification";
-export { default as NumberInput } from "./components/NumberInput";
-export { default as Pagination } from "./components/Pagination";
-export { default as RadioButton } from "./components/RadioButton";
-export { default as InputGroup } from "./components/InputGroup";
-// export { default as RadioButtonGroup } from "./components/RadioButtonGroup";
-export { default as ReadMore } from "./components/ReadMore";
-//export { default as ReduxFormWrapper } from './components/ReduxFormWrapper';
-export { default as Search } from "./components/Search";
-export {
-  SecondaryNavigation,
-  SecondaryNavigationTitle,
-} from "./components/SecondaryNavigation";
-export { default as StepNavigation } from "./components/StepNavigation";
-export { default as StepNavigationItem } from "./components/StepNavigationItem";
-export { default as Select } from "./components/Select";
-export { default as SelectItem } from "./components/SelectItem";
-export { default as SelectItemGroup } from "./components/SelectItemGroup";
-export {
-  Sidebar,
-  SidebarHeader,
-  SidebarScroll,
-  SidebarContentHeader,
-  SidebarContentBody,
-  SidebarBackButton,
-} from "./components/Sidebar";
-//export { default as Switch } from './components/Switch';
-export { default as Slider } from "./components/Slider";
-export { default as Story } from "./components/Story";
-export { default as Item } from "./components/Item";
-export { default as Table, TableSorting } from "./components/Table";
-export { default as TablePagination } from "./components/TablePagination";
-export { default as Tab, useTab } from "./components/Tab";
-export { default as TabContent } from "./components/TabContent";
-export { default as Tabs } from "./components/Tabs";
-export { default as Tag } from "./components/Tag";
-export { default as Text } from "./components/Text";
-export { default as TextArea } from "./components/TextArea";
-export { default as TextInput } from "./components/TextInput";
-export {
-  default as Tooltip,
-  tooltipStyle,
-  tooltipStyleDark,
-} from "./components/Tooltip";
-export { default as Toggle } from "./components/Toggle";
-export { default as User } from "./components/User";
-export { default as Unit } from "./components/Unit";
-export { default as Value } from "./components/Value";
-export { default as Wrapper, pageWidths } from "./components/Wrapper";
-//export { default as Grid } from './components/Grid';
-//export { default as Col } from './components/Col';
-
-// export { default as useDetectPrint } from './internal/useDetectPrint.js.legacy';
-export { uniqueId } from "./tools/uniqueId";
-export {
-  WFPCoreProvider,
-  WFPCoreContext,
-  withWFPCoreSettings,
-  useTheme,
-  defaultWFPContext,
-} from "./components/WFPCoreSettings";
-
-//export { default as SkeletonText } from "./components/SkeletonText";
-
-export { default as colors } from "./globals/data/colors";
-
-export { useMediaQuery } from "./hooks/useMediaQuery";
-export { useIsomorphicLayoutEffect } from "./hooks/useIsomorphicLayoutEffect";

package/src/indexStories.ts

@@ -1,44 +0,0 @@
-export * as Accordion from "./components/Accordion/Accordion.stories.tsx";
-export * as Avatar from "./components/Avatar/Avatar.stories.tsx";
-export * as BannerNavigation from "./components/BannerNavigation/BannerNavigation.stories.tsx";
-export * as Breadcrumb from "./components/Breadcrumb/Breadcrumb.stories.tsx";
-export * as Button from "./components/Button/Button.stories.tsx";
-export * as Card from "./components/Card/Card.stories.tsx";
-export * as Checkbox from "./components/Checkbox/Checkbox.stories.tsx";
-export * as ContentSwitcher from "./components/ContentSwitcher/ContentSwitcher.stories.tsx";
-export * as Credits from "./components/Credits/Credits.stories.tsx";
-export * as DatePicker from "./components/DatePicker/DatePicker.stories.tsx";
-export * as Empty from "./components/Empty/Empty.stories.tsx";
-export * as Footer from "./components/Footer/Footer.stories.tsx";
-export * as Form from "./components/Form/Form.stories.tsx";
-export * as FormLabel from "./components/FormLabel/FormLabel.stories.tsx";
-export * as InfoBar from "./components/InfoBar/InfoBar.stories.tsx";
-export * as InlineLoading from "./components/InlineLoading/InlineLoading.stories.tsx";
-export * as Input from "./components/Input/Input.stories.tsx";
-export * as Item from "./components/Item/Item.stories.tsx";
-export * as Link from "./components/Link/Link.stories.tsx";
-export * as List from "./components/List/List.stories.tsx";
-export * as Loading from "./components/Loading/Loading.stories.tsx";
-export * as MainNavigation from "./components/MainNavigation/MainNavigation.stories.tsx";
-export * as Modal from "./components/Modal/Modal.stories.tsx";
-export * as ModalWrapper from "./components/ModalWrapper/ModalWrapper.stories.tsx";
-export * as Module from "./components/Module/Module.stories.tsx";
-export * as Notification from "./components/Notification/Notification.stories.tsx";
-export * as NumberInput from "./components/NumberInput/NumberInput.stories.tsx";
-export * as Pagination from "./components/Pagination/Pagination.stories.tsx";
-export * as RadioButton from "./components/RadioButton/RadioButton.stories.tsx";
-export * as ReadMore from "./components/ReadMore/ReadMore.stories.tsx";
-export * as Search from "./components/Search/Search.stories.tsx";
-export * as SecondaryNavigation from "./components/SecondaryNavigation/SecondaryNavigation.stories.tsx";
-export * as Select from "./components/Select/Select.stories.tsx";
-export * as Slider from "./components/Slider/Slider.stories.tsx";
-export * as StepNavigation from "./components/StepNavigation/StepNavigation.stories.tsx";
-export * as Story from "./components/Story/Story.stories.tsx";
-export * as Tabs from "./components/Tabs/Tabs.stories.tsx";
-export * as TextArea from "./components/TextArea/TextArea.stories.tsx";
-export * as TextInput from "./components/TextInput/TextInput.stories.tsx";
-export * as Text from "./components/Text/Text.stories.tsx";
-export * as Tooltip from "./components/Tooltip/Tooltip.stories.tsx";
-export * as Toggle from "./components/Toggle/Toggle.stories.tsx";
-export * as User from "./components/User/User.stories.tsx";
-export * as Wrapper from "./components/Wrapper/Wrapper.stories.tsx";

package/src/internal/FeatureFlags.js

@@ -1,21 +0,0 @@
-/**
- * This file contains the list of the default values of compile-time feature flags.
- *
- * Build toolchain can replace variable here and/or the references
- * in order to apply non-default values to those feature flags.
- *
- * @example Render `foo` if `aFeatureFlag` is `true`, render `bar` otherwise.
- * import { aFeatureFlag } from '/path/to/FeatureFlags';
- * ...
- * const MyComponent = props => (<div {...props}>{aFeatureFlag ? 'foo' : 'bar'}</div>);
- */
-
-/**
- * Next gen of Carbon component design.
- */
-export const componentsX = false;
-
-/**
- * Support for prop -> state sync of `<Slider>` value.
- */
-export const sliderValuePropSync = false;

package/src/internal/FloatingMenu.js

@@ -1,352 +0,0 @@
-import warning from 'warning';
-import PropTypes from 'prop-types';
-import React from 'react';
-import ReactDOM from 'react-dom';
-import window from 'window-or-global';
-
-/**
- * The structure for the position of floating menu.
- * @typedef {Object} FloatingMenu~position
- * @property {number} left The left position.
- * @property {number} top The top position.
- * @property {number} right The right position.
- * @property {number} bottom The bottom position.
- */
-
-/**
- * The structure for the size of floating menu.
- * @typedef {Object} FloatingMenu~size
- * @property {number} width The width.
- * @property {number} height The height.
- */
-
-/**
- * The structure for the position offset of floating menu.
- * @typedef {Object} FloatingMenu~offset
- * @property {number} top The top position.
- * @property {number} left The left position.
- */
-
-export const DIRECTION_LEFT = 'left';
-export const DIRECTION_TOP = 'top';
-export const DIRECTION_RIGHT = 'right';
-export const DIRECTION_BOTTOM = 'bottom';
-
-const hasCreatePortal = typeof ReactDOM.createPortal === 'function';
-
-/**
- * @param {FloatingMenu~offset} [oldMenuOffset={}] The old value.
- * @param {FloatingMenu~offset} [menuOffset={}] The new value.
- * @returns `true` if the parent component wants to change in the adjustment of the floating menu position.
- * @private
- */
-const hasChangeInOffset = (oldMenuOffset = {}, menuOffset = {}) => {
-  if (typeof oldMenuOffset !== typeof menuOffset) {
-    return true;
-  } else if (
-    Object(menuOffset) === menuOffset &&
-    typeof menuOffset !== 'function'
-  ) {
-    return (
-      oldMenuOffset.top !== menuOffset.top ||
-      oldMenuOffset.left !== menuOffset.left
-    );
-  }
-  return oldMenuOffset !== menuOffset;
-};
-
-/**
- * @param {Object} params The parameters.
- * @param {FloatingMenu~size} params.menuSize The size of the menu.
- * @param {FloatingMenu~position} params.refPosition The position of the triggering element.
- * @param {FloatingMenu~offset} [params.offset={ left: 0, top: 0 }] The position offset of the menu.
- * @param {string} [params.direction=bottom] The menu direction.
- * @param {number} [params.scrollY=0] The scroll position of the viewport.
- * @returns {FloatingMenu~offset} The position of the menu, relative to the top-left corner of the viewport.
- * @private
- */
-const getFloatingPosition = ({
-  menuSize,
-  refPosition,
-  offset = {},
-  direction = DIRECTION_BOTTOM,
-  scrollY = 0,
-}) => {
-  const {
-    left: refLeft = 0,
-    top: refTop = 0,
-    right: refRight = 0,
-    bottom: refBottom = 0,
-  } = refPosition;
-
-  const { width, height } = menuSize;
-  const { top = 0, left = 0 } = offset;
-  const refCenterHorizontal = (refLeft + refRight) / 2;
-  const refCenterVertical = (refTop + refBottom) / 2;
-
-  return {
-    [DIRECTION_LEFT]: () => ({
-      left: refLeft - width - left,
-      top: refCenterVertical - height / 2 + scrollY + top,
-    }),
-    [DIRECTION_TOP]: () => ({
-      left: refCenterHorizontal - width / 2 + left,
-      top: refTop - height + scrollY - top,
-    }),
-    [DIRECTION_RIGHT]: () => ({
-      left: refRight + left,
-      top: refCenterVertical - height / 2 + scrollY + top,
-    }),
-    [DIRECTION_BOTTOM]: () => ({
-      left: refCenterHorizontal - width / 2 + left,
-      top: refBottom + scrollY + top,
-    }),
-  }[direction]();
-};
-
-/**
- * A menu that is detached from the triggering element.
- * Useful when the container of the triggering element cannot have `overflow:visible` style, etc.
- */
-class FloatingMenu extends React.Component {
-  static propTypes = {
-    /**
-     * Contents to put into the floating menu.
-     */
-    children: PropTypes.object,
-
-    /**
-     * The position in the viewport of the trigger button.
-     */
-    menuPosition: PropTypes.shape({
-      top: PropTypes.number,
-      right: PropTypes.number,
-      bottom: PropTypes.number,
-      left: PropTypes.number,
-    }),
-
-    /**
-     * Where to put the tooltip, relative to the trigger button.
-     */
-    menuDirection: PropTypes.oneOf([
-      DIRECTION_LEFT,
-      DIRECTION_TOP,
-      DIRECTION_RIGHT,
-      DIRECTION_BOTTOM,
-    ]),
-
-    /**
-     * The adjustment of the floating menu position, considering the position of dropdown arrow, etc.
-     */
-    menuOffset: PropTypes.oneOfType([
-      PropTypes.shape({
-        top: PropTypes.number,
-        left: PropTypes.number,
-      }),
-      PropTypes.func,
-    ]),
-
-    /**
-     * The additional styles to put to the floating menu.
-     */
-    styles: PropTypes.object,
-
-    /**
-     * The callback called when the menu body has been mounted to/will be unmounted from the DOM.
-     */
-    menuRef: PropTypes.func,
-  };
-
-  static defaultProps = {
-    menuPosition: {},
-    menuOffset: {},
-    menuDirection: DIRECTION_BOTTOM,
-  };
-
-  state = {
-    /**
-     * The position of the menu, relative to the top-left corner of the viewport.
-     * @type {FloatingMenu~offset}
-     */
-    floatingPosition: undefined,
-  };
-
-  /**
-   * The cached refernce to the menu container.
-   * Only used if React portal API is not available.
-   * @type {Element}
-   * @private
-   */
-  _menuContainer = null;
-
-  /**
-   * The cached refernce to the menu body.
-   * @type {Element}
-   * @private
-   */
-  _menuBody = null;
-
-  constructor(props) {
-    super(props);
-    if (typeof document !== 'undefined' && hasCreatePortal) {
-      this.el = document.createElement('div');
-    }
-  }
-
-  /**
-   * Calculates the position in the viewport of floating menu,
-   * once this component is mounted or updated upon change in the following props:
-   *
-   * * `menuPosition` (The position in the viewport of the trigger button)
-   * * `menuOffset` (The adjustment that should be applied to the calculated floating menu's position)
-   * * `menuDirection` (Where the floating menu menu should be placed relative to the trigger button)
-   *
-   * @private
-   */
-  _updateMenuSize = (prevProps = {}) => {
-    const menuBody = this._menuBody;
-    warning(
-      menuBody,
-      'The DOM node for menu body for calculating its position is not available. Skipping...'
-    );
-    if (!menuBody) {
-      return;
-    }
-
-    const {
-      menuPosition: oldRefPosition = {},
-      menuOffset: oldMenuOffset = {},
-      menuDirection: oldMenuDirection,
-    } = prevProps;
-    const {
-      menuPosition: refPosition = {},
-      menuOffset = {},
-      menuDirection,
-    } = this.props;
-
-    if (
-      oldRefPosition.top !== refPosition.top ||
-      oldRefPosition.right !== refPosition.right ||
-      oldRefPosition.bottom !== refPosition.bottom ||
-      oldRefPosition.left !== refPosition.left ||
-      hasChangeInOffset(oldMenuOffset, menuOffset) ||
-      oldMenuDirection !== menuDirection
-    ) {
-      const menuSize = menuBody.getBoundingClientRect();
-      const offset =
-        typeof menuOffset !== 'function'
-          ? menuOffset
-          : menuOffset(menuBody, menuDirection);
-      // Skips if either in the following condition:
-      // a) Menu body has `display:none`
-      // b) `menuOffset` as a callback returns `undefined` (The callback saw that it couldn't calculate the value)
-      if ((menuSize.width > 0 && menuSize.height > 0) || !offset) {
-        this.setState({
-          floatingPosition: getFloatingPosition({
-            menuSize,
-            refPosition,
-            direction: menuDirection,
-            offset,
-            scrollY: window.scrollY,
-          }),
-        });
-      }
-    }
-  };
-
-  componentDidUpdate(prevProps) {
-    if (!hasCreatePortal) {
-      ReactDOM.render(this._getChildrenWithProps(), this._menuContainer);
-    } else {
-      this._updateMenuSize(prevProps);
-    }
-  }
-
-  componentDidMount() {
-    const { menuRef } = this.props;
-    if (!hasCreatePortal) {
-      this._menuContainer = document.createElement('div');
-      document.body.appendChild(this._menuContainer);
-      const style = {
-        display: 'block',
-        opacity: 0,
-      };
-      const childrenWithProps = React.cloneElement(this.props.children, {
-        style,
-      });
-      ReactDOM.render(childrenWithProps, this._menuContainer, () => {
-        this._menuBody = this._menuContainer.firstChild;
-        this._updateMenuSize();
-        ReactDOM.render(
-          this._getChildrenWithProps(),
-          this._menuContainer,
-          () => {
-            menuRef && menuRef(this._menuBody);
-          }
-        );
-      });
-    } else {
-      if (this.el && this.el.firstChild) {
-        this._menuBody = this.el.firstChild;
-        document.body.appendChild(this._menuBody);
-        menuRef && menuRef(this._menuBody);
-      }
-      this._updateMenuSize();
-    }
-  }
-
-  componentWillUnmount() {
-    const { menuRef } = this.props;
-    menuRef && menuRef(null);
-    if (!hasCreatePortal) {
-      const menuContainer = this._menuContainer;
-      ReactDOM.unmountComponentAtNode(menuContainer);
-      if (menuContainer && menuContainer.parentNode) {
-        menuContainer.parentNode.removeChild(menuContainer);
-      }
-      this._menuContainer = null;
-    } else if (this._menuBody) {
-      // Moves the menu body back to the portal container so that React unmount code does not crash
-      this.el.appendChild(this._menuBody);
-    }
-  }
-
-  /**
-   * @returns The child nodes, with styles containing the floating menu position.
-   * @private
-   */
-  _getChildrenWithProps = () => {
-    const { styles, children } = this.props;
-    const { floatingPosition: pos } = this.state;
-    // If no pos available, we need to hide the element (offscreen to the left)
-    // This is done so we can measure the content before positioning it correctly.
-    const positioningStyle = pos
-      ? {
-          left: `${pos.left}px`,
-          top: `${pos.top}px`,
-          right: 'auto',
-        }
-      : {
-          left: `${window.innerWidth}px`,
-          top: '0px',
-        };
-    return React.cloneElement(children, {
-      style: {
-        ...styles,
-        ...positioningStyle,
-        position: 'absolute',
-        margin: 0,
-        opacity: 1,
-      },
-    });
-  };
-
-  render() {
-    if (typeof document !== 'undefined' && hasCreatePortal) {
-      return ReactDOM.createPortal(this._getChildrenWithProps(), this.el);
-    }
-    return null;
-  }
-}
-
-export default FloatingMenu;

package/src/internal/OptimizedResize.js

@@ -1,54 +0,0 @@
-// mdn resize function
-import window from 'window-or-global';
-
-const OptimizedResize = (function optimizedResize() {
-  const callbacks = [];
-  let running = false;
-
-  // run the actual callbacks
-  function runCallbacks() {
-    callbacks.forEach(callback => {
-      callback();
-    });
-
-    running = false;
-  }
-
-  // fired on resize event
-  function resize() {
-    if (!running) {
-      running = true;
-      window.requestAnimationFrame(runCallbacks);
-    }
-  }
-
-  // adds callback to loop
-  function addCallback(callback) {
-    if (callback) {
-      const index = callbacks.indexOf(callback);
-      if (index < 0) {
-        callbacks.push(callback);
-      }
-    }
-  }
-
-  return {
-    // public method to add additional callback
-    add: callback => {
-      if (!callbacks.length) {
-        window.addEventListener('resize', resize);
-      }
-      addCallback(callback);
-      return {
-        release() {
-          const index = callbacks.indexOf(callback);
-          if (index >= 0) {
-            callbacks.splice(index, 1);
-          }
-        },
-      };
-    },
-  };
-})();
-
-export default OptimizedResize;