@progressiveui/react 1.22.0

package/src/index.ts

@@ -0,0 +1,185 @@
+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,
+  MainNavigationExternal,
+  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

@@ -0,0 +1,44 @@
+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

@@ -0,0 +1,21 @@
+/**
+ * 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

@@ -0,0 +1,352 @@
+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

@@ -0,0 +1,54 @@
+// 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;