@progressiveui/react 2.0.3 → 2.0.4

package/src/globals/js/mixins/init-component-by-search.js

@@ -1,41 +0,0 @@
-export default function(ToMix) {
-  /**
-   * Mix-in class to instantiate components by searching for their root elements.
-   * @class InitComponentBySearch
-   */
-  class InitComponentBySearch extends ToMix {
-    /**
-     * Instantiates component in the given node.
-     * If the given element indicates that it's an component of this class, instantiates it.
-     * Otherwise, instantiates components by searching for components in the given node.
-     * @param {Node} target The DOM node to instantiate components in. Should be a document or an element.
-     * @param {Object} [options] The component options.
-     * @param {boolean} [options.selectorInit] The CSS selector to find components.
-     */
-    static init(target = document, options = {}) {
-      const effectiveOptions = Object.assign(
-        Object.create(this.options),
-        options
-      );
-      if (
-        target.nodeType !== Node.ELEMENT_NODE &&
-        target.nodeType !== Node.DOCUMENT_NODE
-      ) {
-        throw new TypeError(
-          'DOM document or DOM element should be given to search for and initialize this widget.'
-        );
-      }
-      if (
-        target.nodeType === Node.ELEMENT_NODE &&
-        target.matches(effectiveOptions.selectorInit)
-      ) {
-        this.create(target, options);
-      } else {
-        [...target.querySelectorAll(effectiveOptions.selectorInit)].forEach(
-          element => this.create(element, options)
-        );
-      }
-    }
-  }
-  return InitComponentBySearch;
-}

package/src/globals/js/mixins/track-blur.js

@@ -1,45 +0,0 @@
-import on from '../misc/on';
-import handles from './handles';
-
-function trackBlur(ToMix) {
-  class TrackBlur extends ToMix {
-    /**
-     * Mix-in class to add an handler for losing focus.
-     * @extends Handles
-     * @param {HTMLElement} element The element working as this component.
-     * @param {Object} [options] The component options.
-     */
-    constructor(element, options) {
-      super(element, options);
-      const hasFocusin = 'onfocusin' in window;
-      const focusinEventName = hasFocusin ? 'focusin' : 'focus';
-      this.manage(
-        on(
-          this.element.ownerDocument,
-          focusinEventName,
-          event => {
-            if (!this.element.contains(event.target)) {
-              this.handleBlur(event);
-            }
-          },
-          !hasFocusin
-        )
-      );
-    }
-
-    /**
-     * The method called when this component loses focus.
-     * @abstract
-     */
-    handleBlur() {
-      throw new Error(
-        'Components inheriting TrackBlur mix-in must implement handleBlur() method.'
-      );
-    }
-  }
-
-  return TrackBlur;
-}
-
-const exports = [handles, trackBlur];
-export default exports;

package/src/globals/js/settings.tsx

@@ -1,49 +0,0 @@
-/**
- * Settings.
- * @exports CarbonComponents.settings
- * @type Object
- * @property {boolean} [disableAutoInit]
- *   Disables automatic instantiation of components.
- *   By default (`CarbonComponents.disableAutoInit` is `false`),
- *   carbon-components attempts to instantiate components automatically
- *   by searching for elements with `data-component-name` (e.g. `data-loading`) attribute
- *   or upon DOM events (e.g. clicking) on such elements.
- *   See each components' static `.init()` methods for details.
- * @property {string} [prefix=bx]
- *   Brand prefix. Should be in sync with `$prefix` Sass variable in carbon-components/src/globals/scss/_vars.scss.
- * // @todo given that the default value is so long, is it appropriate to put in the JSDoc?
- * @property {string} [selectorTabbable]
- *   A selector selecting tabbable/focusable nodes.
- *   By default selectorTabbable references links, areas, inputs, buttons, selects, textareas,
- *   iframes, objects, embeds, or elements explicitly using tabindex or contenteditable attributes
- *   as long as the element is not `disabled` or the `tabindex="-1"`.
- * @property {string} [selectorFocusable]
- *   CSS selector that selects major nodes that are click focusable
- *   This property is identical to selectorTabbable with the exception of
- *   the `:not([tabindex='-1'])` pseudo class
- */
-const settings = {
-  prefix: "wfp",
-  initialized: false,
-  selectorTabbable: `
-    a[href], area[href], input:not([disabled]):not([tabindex='-1']),
-    button:not([disabled]):not([tabindex='-1']),select:not([disabled]):not([tabindex='-1']),
-    textarea:not([disabled]):not([tabindex='-1']),
-    iframe, object, embed, *[tabindex]:not([tabindex='-1']), *[contenteditable=true]
-  `,
-  selectorFocusable: `
-    a[href], area[href], input:not([disabled]),
-    button:not([disabled]),select:not([disabled]),
-    textarea:not([disabled]),
-    iframe, object, embed, *[tabindex], *[contenteditable=true]
-  `,
-  theme: `light`,
-  actualTheme: `light`,
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-empty-function
-  setTheme: (theme: string) => {
-    console.warn("setTheme not initialized");
-  },
-};
-
-export default settings;
-//module.exports = settings;

package/src/globals/js/watch.js

@@ -1,95 +0,0 @@
-import * as components from './components';
-
-const forEach = Array.prototype.forEach;
-
-const createAndReleaseComponentsUponDOMMutation = (
-  records,
-  componentClasses,
-  componentClassesForWatchInit,
-  options
-) => {
-  records.forEach(record => {
-    forEach.call(record.addedNodes, node => {
-      if (node.nodeType === Node.ELEMENT_NODE) {
-        componentClassesForWatchInit.forEach(Clz => {
-          Clz.init(node, options);
-        });
-      }
-    });
-    forEach.call(record.removedNodes, node => {
-      if (node.nodeType === Node.ELEMENT_NODE) {
-        componentClasses.forEach(Clz => {
-          if (node.matches(Clz.options.selectorInit)) {
-            const instance = Clz.components.get(node);
-            if (instance) {
-              instance.release();
-            }
-          } else {
-            forEach.call(
-              node.querySelectorAll(Clz.options.selectorInit),
-              element => {
-                const instance = Clz.components.get(element);
-                if (instance) {
-                  instance.release();
-                }
-              }
-            );
-          }
-        });
-      }
-    });
-  });
-};
-
-/**
- * Automatically instantiates/destroys components in the given element, by watching for DOM additions/removals.
- * @param {Node} target The DOM node to instantiate components in. Should be a document or an element.
- * @param {Object} [options] The component options.
- * @returns {Handle} The handle to stop watching.
- */
-export default function(target = document, options = {}) {
-  if (
-    target.nodeType !== Node.ELEMENT_NODE &&
-    target.nodeType !== Node.DOCUMENT_NODE
-  ) {
-    throw new TypeError(
-      'DOM document or DOM element should be given to watch for DOM node to create/release components.'
-    );
-  }
-
-  const componentClasses = Object.keys(components)
-    .map(key => components[key])
-    .filter(component => typeof component.init === 'function');
-
-  const handles = componentClasses
-    .map(Clz => Clz.init(target, options))
-    .filter(Boolean);
-
-  const componentClassesForWatchInit = componentClasses.filter(
-    Clz => !Clz.forLazyInit
-  );
-
-  let observer = new MutationObserver(records => {
-    createAndReleaseComponentsUponDOMMutation(
-      records,
-      componentClasses,
-      componentClassesForWatchInit,
-      options
-    );
-  });
-  observer.observe(target, {
-    childList: true,
-    subtree: true,
-  });
-  return {
-    release() {
-      for (let handle = handles.pop(); handle; handle = handles.pop()) {
-        handle.release();
-      }
-      if (observer) {
-        observer.disconnect();
-        observer = null;
-      }
-    },
-  };
-}

package/src/globals/scss/styles.scss

@@ -1,146 +0,0 @@
-//-------------------------
-// 🌍 Global
-//-------------------------
-
-$css--font-face: true !default;
-$css--arabic-font-face: false !default;
-$css--helpers: true !default;
-$css--body: true !default;
-//$css--use-experimental-grid: false !default;
-//$css--use-experimental-grid-fallback: false !default;
-$css--use-layer: true !default;
-$css--reset: true !default;
-$css--typography: true !default;
-$css--variables: true !default;
-
-@use "sass:math";
-//@use '../../../../styles/scss/components/button/button';
-//@import '~@progressiveui/styles/scss/components/button/button';
-//@import '~carbon-components/src/components/button/button';
-
-@import "colors";
-@import "vars";
-@import "_theme-tokens";
-@import "mixins";
-@import "layout";
-@import "layer";
-@import "rtl";
-@import "spacing";
-@import "typography";
-@import "./vendor/@un/import-once/scss/import-once";
-@import "css--reset";
-@import "css--font-face";
-@import "css--helpers";
-@import "css--body";
-@import "css--typography";
-
-@import "text-gradient";
-//@import '../grid/grid';
-
-//-------------------------
-// ☠️  Manage deprecations
-//-------------------------
-
-/**
- * We flag this variable as true if someone uses the globals/scss/styles.scss
- * entry-point. This allows us to collect all the messages and display them at
- * the end of the file instead of bringing it up per-component.
- *
- * If a consumer instead gets the components by importing the partial directly,
- * this variable _will not_ be set to true, so the deprecation message will be
- * displayed after the @import.
- */
-$deprecations--entry: true;
-// Collect all deprecation reasons into this list throughout the import cycle.
-$deprecations--reasons: ();
-// This message will be prepended to any deprecation notice
-$deprecations--message: "Deprecated code was found, this code will be removed before the next release of the UI Kit.";
-
-//-------------------------
-// 🍕 Components
-//-------------------------
-
-//@import '~carbon-components/src/components/button/button';
-
-// @import '../../components/Wrapper/wrapper.scss';
-// @import '../../components/Credits/credits.scss';
-// @import '../../components/DatePicker/date-picker.scss';
-// @import '../../components/FormControls/form-controls.scss';
-// @import '../../components/FormWizard/form-wizard.scss';
-// @import '../../components/FormError/form-error';
-// @import '../../components/FileUploader/file-uploader';
-// @import '../../components/InfoBar/info-bar';
-// @import '../../components/Input/input';
-// @import '../../components/Checkbox/checkbox.scss';
-// @import '../../components/RadioButton/radio-button';
-// @import '../../components/Toggle/toggle.scss';
-// @import '../../components/Search/search.scss';
-// @import '../../components/Select/select.scss';
-// @import '../../components/ReactDropzone/react-dropzone.scss';
-// @import '../../components/ReactSelect/react-select.scss';
-// @import '../../components/TextInput/text-input.scss';
-// @import '../../components/TextArea/text-area.scss';
-// @import '../../components/NumberInput/number-input.scss';
-// @import '../../components/Empty/empty.scss';
-// @import '../../components/Form/form.scss';
-// @import '../../components/FormGroup/form-group.scss';
-// @import '../../components/FormHint/form-hint.scss';
-//@import '../../components/Link/link';
-//@import '../../components/Button/button.scss';
-
-// @import '../../components/ContextMenu/context-menu.scss';
-// @import '../../components/Hero/hero';
-// @import '../../components/Card/card';
-// @import '../../components/ContentSwitcher/content-switcher';
-// @import '../../components/List/list';
-// @import '../../components/Item/item.scss';
-// @import '../../components/Loading/loading'; TODO - look into it more
-// @import '../../components/Modal/modal';
-// @import '../../components/Module/module';
-// @import '../../components/Notification/notification';
-// @import '../../components/User/user';
-// @import '../../components/Value/value';
-// @import '../../components/InlineLoading/inline-loading';
-// @import '../../components/StepNavigation/step-navigation';
-// @import '../../components/StepNavigationItem/step-navigation-item';
-@import "../../components/SkeletonText/skeleton";
-
-// @import '../../components/Tooltip/tooltip';
-// @import '../../components/Tabs/tabs'; //TODO reuse ours or inherit from carbon
-// @import '../../components/Tag/tag';
-
-// @import '../../components/Pagination/pagination';
-// @import '../../components/ReadMore/read-more';
-// @import '../../components/Story/story';
-// @import '../../components/Text/text.scss';
-// @import '../../components/Breadcrumb/breadcrumb.scss';
-// @import '../../components/Blockquote/blockquote.scss';
-// @import '../../components/Table/table.scss';
-// @import '../../components/Slider/slider.scss';
-// @import '../../components/Unit/unit.scss';
-
-// @import '../../components/Sidebar/sidebar.scss';
-// @import '../../components/AuthLayout/auth-layout.scss';
-//-------------------------------------
-
-// 🙈 Page Elements
-//-------------------------------------
-// @import '../../components/BannerNavigation/banner-navigation';
-// @import '../../components/MainNavigation/main-navigation';
-// @import '../../components/SubNavigation/sub-navigation';
-// @import '../../components/SecondaryNavigation/secondary-navigation';
-// @import '../../components/Footer/footer';
-// @import '../../components/AnchorNavigation/anchor-navigation';
-/*@import '../../components/fab/fab'; */
-
-// Cycle through all the deprecation reasons, if any exist, that have been
-// accumulated through the @import process.
-@if (length($deprecations--reasons) > 0) {
-  $deprecations--message: "";
-
-  @each $reason in $deprecations--reasons {
-    $deprecations--message: "#{$deprecations--message} REASON: #{$reason}";
-  }
-
-  @warn $deprecations--message;
-}

package/src/hooks/togglable.js

@@ -1,12 +0,0 @@
-import { useState } from 'react';
-
-/**
- * useTogglable(): hook used to open/close boolean state.
- */
-export const useTogglable = () => {
-  const [isOpen, setState] = useState(false);
-  const open = () => setState(true);
-  const close = () => setState(false);
-
-  return { isOpen, open, close };
-};

package/src/hooks/useHeightTransition.ts

@@ -1,33 +0,0 @@
-/* eslint-disable @typescript-eslint/no-non-null-assertion */
-
-import { CSSProperties, useState, useRef } from "react";
-import { TransitionState } from "react-transition-state";
-import { useLayoutEffect } from "../components/Accordion/utils/useIsomorphicLayoutEffect";
-
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-const useHeightTransition = <E extends Element>({
-  status,
-  isResolved,
-}: TransitionState) => {
-  const [height, setHeight] = useState<number>();
-  const elementRef = useRef<HTMLInputElement>(null);
-
-  useLayoutEffect(() => {
-    (status === "preEnter" || status === "preExit") &&
-      setHeight(elementRef.current!.getBoundingClientRect().height);
-  }, [status]);
-
-  const style: CSSProperties = {
-    height:
-      status === "preEnter" || status === "exiting"
-        ? 0
-        : status === "entering" || status === "preExit"
-        ? height
-        : undefined,
-    overflow: isResolved ? undefined : "hidden",
-  };
-
-  return [style, elementRef] as const;
-};
-
-export { useHeightTransition };

package/src/hooks/useId.ts

@@ -1,14 +0,0 @@
-import { useState, useEffect, useId } from "react";
-import { ACCORDION_PREFIX } from "../components/Accordion/utils/constants";
-
-let current = 0;
-
-const useIdShim = () => {
-  const [id, setId] = useState<number>();
-  useEffect(() => setId(++current), []);
-  return (id && `${ACCORDION_PREFIX}-${id}`) as string | undefined;
-};
-
-const _useId = useId || useIdShim;
-
-export { _useId as useId };

package/src/hooks/useIsomorphicLayoutEffect.tsx

@@ -1,14 +0,0 @@
-import { useEffect, useLayoutEffect } from "react";
-
-/**
- * Custom hook for using either `useLayoutEffect` or `useEffect` based on the environment (client-side or server-side).
- * @param {Function} effect - The effect function to be executed.
- * @param {Array<any>} [dependencies] - An array of dependencies for the effect (optional).
- * @see [Documentation](https://usehooks-ts.com/react-hook/use-isomorphic-layout-effect)
- * @example
- * useIsomorphicLayoutEffect(() => {
- *   // Code to be executed during the layout phase on the client side
- * }, [dependency1, dependency2]);
- */
-export const useIsomorphicLayoutEffect =
-  typeof window !== "undefined" ? useLayoutEffect : useEffect;

package/src/hooks/useMediaQuery.tsx

@@ -1,79 +0,0 @@
-import { useState } from "react";
-
-import { useIsomorphicLayoutEffect } from "./useIsomorphicLayoutEffect";
-
-type UseMediaQueryOptions = {
-  defaultValue?: boolean;
-  initializeWithValue?: boolean;
-};
-
-const IS_SERVER = typeof window === "undefined";
-
-/**
- * Custom hook for tracking the state of a media query.
- * @param {string} query - The media query to track.
- * @param {boolean | ?UseMediaQueryOptions} [options] - The default value to return if the hook is being run on the server (default is `false`).
- * @param {?boolean} [options.defaultValue] - The default value to return if the hook is being run on the server (default is `false`).
- * @param {?boolean} [options.initializeWithValue] - If `true` (default), the hook will initialize reading the media query. In SSR, you should set it to `false`, returning `options.defaultValue` or `false` initially.
- * @returns {boolean} The current state of the media query (true if the query matches, false otherwise).
- * @see [Documentation](https://usehooks-ts.com/react-hook/use-media-query)
- * @see [MDN Match Media](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia)
- * @example
- * const isSmallScreen = useMediaQuery('(max-width: 600px)');
- * // Use `isSmallScreen` to conditionally apply styles or logic based on the screen size.
- */
-export function useMediaQuery(
-  query: string,
-  options?: boolean | UseMediaQueryOptions
-): boolean {
-  // TODO: Refactor this code after the deprecated signature has been removed.
-  const defaultValue =
-    typeof options === "boolean" ? options : options?.defaultValue ?? false;
-  const initializeWithValue =
-    typeof options === "boolean"
-      ? undefined
-      : options?.initializeWithValue ?? undefined;
-
-  const getMatches = (query: string): boolean => {
-    if (IS_SERVER) {
-      return defaultValue;
-    }
-    return window.matchMedia(query).matches;
-  };
-
-  const [matches, setMatches] = useState<boolean>(() => {
-    if (initializeWithValue) {
-      return getMatches(query);
-    }
-    return defaultValue;
-  });
-
-  /** Handles the change event of the media query. */
-  function handleChange() {
-    setMatches(getMatches(query));
-  }
-
-  useIsomorphicLayoutEffect(() => {
-    const matchMedia = window.matchMedia(query);
-
-    // Triggered at the first client-side load and if query changes
-    handleChange();
-
-    // Use deprecated `addListener` and `removeListener` to support Safari < 14 (#135)
-    if (matchMedia.addListener) {
-      matchMedia.addListener(handleChange);
-    } else {
-      matchMedia.addEventListener("change", handleChange);
-    }
-
-    return () => {
-      if (matchMedia.removeListener) {
-        matchMedia.removeListener(handleChange);
-      } else {
-        matchMedia.removeEventListener("change", handleChange);
-      }
-    };
-  }, [query]);
-
-  return matches;
-}

package/src/hooks/useMergeRef.ts

@@ -1,24 +0,0 @@
-import { useMemo, RefCallback, MutableRefObject } from 'react';
-
-// Adapted from material-ui
-// https://github.com/mui-org/material-ui/blob/f996027d00e7e4bff3fc040786c1706f9c6c3f82/packages/material-ui-utils/src/useForkRef.ts
-
-type Ref<T> = RefCallback<T> | MutableRefObject<T | null>;
-
-function setRef<T>(ref: Ref<T>, instance: T) {
-  typeof ref === 'function' ? ref(instance) : (ref.current = instance);
-}
-
-function useMergeRef<T>(refA?: Ref<T> | null, refB?: Ref<T> | null) {
-  return useMemo(() => {
-    if (!refA) return refB;
-    if (!refB) return refA;
-
-    return (instance: T | null) => {
-      setRef(refA, instance);
-      setRef(refB, instance);
-    };
-  }, [refA, refB]);
-}
-
-export { useMergeRef };

package/src/hooks/useSettings.tsx

@@ -1,20 +0,0 @@
-import { useContext } from "react";
-
-import { defaultWFPContext } from "../components/WFPCoreSettings/defaults";
-import {
-  AppContextInterface,
-  WFPCoreContext,
-} from "../components/WFPCoreSettings/WFPCoreProvider";
-
-export default function useSettings(): AppContextInterface {
-  const settings = useContext(WFPCoreContext);
-  /* if (settings?.initialized === false) {
-    console.warn("useSettings: WFPCoreContext not initialized");
-  } */
-
-  if (settings === undefined) {
-    return defaultWFPContext;
-  }
-
-  return settings;
-}

package/src/hooks/useWizard.js

@@ -1,77 +0,0 @@
-import React, { useState } from 'react';
-import PropTypes from 'prop-types';
-
-const useWizard = ({ content, contentProp, submitCallback }) => {
-  const [page, setPage] = useState(0);
-
-  const currentContent = content && (
-    <div className="wfp--form-long">
-      {React.cloneElement(content[page].content, contentProp || {})}
-    </div>
-  );
-
-  const handleTabClick = (value) => {
-    setPage(value);
-  };
-
-  const next = () => {
-    setPage(page + 1);
-  };
-
-  // this is to handle content not provided
-  const isLastPage = page === (content?.length || 0) - 1;
-
-  const handleFormSubmit = (data) => {
-    if (isLastPage) {
-      submitCallback & submitCallback(data);
-    } else {
-      next();
-    }
-  };
-
-  const previous = () => {
-    setPage(Math.max(page - 1, 0));
-  };
-
-  return {
-    page,
-    currentContent,
-    previous,
-    handleTabClick,
-    handleFormSubmit,
-    isLastPage,
-  };
-};
-
-useWizard.propTypes = {
-  /**
-     * Content should be an array of wizard content e.g 
-     * content={[
-     * {
-        label: "Name and last name",
-        content: <StepOne />
-      },
-      {
-        label: "Contact data",
-        content: <StepTwo />
-      },
-    ]}
-    */
-  content: PropTypes.arrayOf(
-    PropTypes.shape({
-      content: PropTypes.node,
-    })
-  ),
-
-  /**
-   * Custom props for each content
-   */
-  contentProp: PropTypes.object,
-
-  /**
-   * Callback function after submit
-   */
-  submitCallback: PropTypes.func,
-};
-
-export default useWizard;