@khanacademy/wonder-blocks-core 4.6.1 → 4.6.2

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @khanacademy/wonder-blocks-core
 
+## 4.6.2
+
+### Patch Changes
+
+-   496119f2: Cleanup WB interdependencies
+
 ## 4.6.1
 
 ## 4.6.0

package/dist/index.js

@@ -0,0 +1,550 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _extends = require('@babel/runtime/helpers/extends');
+var _objectWithoutPropertiesLoose = require('@babel/runtime/helpers/objectWithoutPropertiesLoose');
+var React = require('react');
+var aphrodite = require('aphrodite');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+function _interopNamespace(e) {
+    if (e && e.__esModule) return e;
+    var n = Object.create(null);
+    if (e) {
+        Object.keys(e).forEach(function (k) {
+            if (k !== 'default') {
+                var d = Object.getOwnPropertyDescriptor(e, k);
+                Object.defineProperty(n, k, d.get ? d : {
+                    enumerable: true,
+                    get: function () { return e[k]; }
+                });
+            }
+        });
+    }
+    n["default"] = e;
+    return Object.freeze(n);
+}
+
+var _extends__default = /*#__PURE__*/_interopDefaultLegacy(_extends);
+var _objectWithoutPropertiesLoose__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutPropertiesLoose);
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+function flatten(list) {
+  const result = [];
+
+  if (!list) {
+    return result;
+  } else if (Array.isArray(list)) {
+    for (const item of list) {
+      result.push.apply(result, flatten(item));
+    }
+  } else {
+    result.push(list);
+  }
+
+  return result;
+}
+
+function processStyleList(style) {
+  const stylesheetStyles = [];
+  const inlineStyles = [];
+
+  if (!style) {
+    return {
+      style: {},
+      className: ""
+    };
+  }
+
+  const shouldInlineStyles = typeof global !== "undefined" && global.SNAPSHOT_INLINE_APHRODITE;
+  flatten(style).forEach(child => {
+    const _definition = child._definition;
+
+    if (_definition != null) {
+      if (shouldInlineStyles) {
+        const def = {};
+
+        for (const [key, value] of Object.entries(_definition)) {
+          def[key.replace(/-[a-z]/g, match => match[1].toUpperCase())] = value;
+        }
+
+        inlineStyles.push(def);
+      } else {
+        stylesheetStyles.push(child);
+      }
+    } else {
+      inlineStyles.push(child);
+    }
+  });
+  const inlineStylesObject = Object.assign.apply(Object, [{}].concat(inlineStyles));
+
+  if (inlineStyles.length > 0 && !shouldInlineStyles) {
+    const inlineStylesStyleSheet = aphrodite.StyleSheet.create({
+      inlineStyles: inlineStylesObject
+    });
+    stylesheetStyles.push(inlineStylesStyleSheet.inlineStyles);
+  }
+
+  return {
+    style: shouldInlineStyles ? inlineStylesObject : {},
+    className: aphrodite.css.apply(void 0, stylesheetStyles)
+  };
+}
+
+const _excluded$2 = ["children", "style", "tag", "testId"];
+const isHeaderRegex = /^h[1-6]$/;
+const styles$1 = aphrodite.StyleSheet.create({
+  text: {
+    WebkitFontSmoothing: "antialiased",
+    MozOsxFontSmoothing: "grayscale"
+  },
+  header: {
+    marginTop: 0,
+    marginBottom: 0
+  }
+});
+class Text extends React__namespace.Component {
+  render() {
+    const _this$props = this.props,
+          {
+      children,
+      style,
+      tag: Tag,
+      testId
+    } = _this$props,
+          otherProps = _objectWithoutPropertiesLoose__default["default"](_this$props, _excluded$2);
+
+    const isHeader = isHeaderRegex.test(Tag);
+    const styleAttributes = processStyleList([styles$1.text, isHeader && styles$1.header, style]);
+    return React__namespace.createElement(Tag, _extends__default["default"]({}, otherProps, {
+      style: styleAttributes.style,
+      className: styleAttributes.className,
+      "data-test-id": testId
+    }), children);
+  }
+
+}
+Text.defaultProps = {
+  tag: "span"
+};
+
+const _excluded$1 = ["className", "style"];
+function addStyle(Component, defaultStyle) {
+  function StyleComponent(props) {
+    const {
+      className,
+      style
+    } = props,
+          tmpOtherProps = _objectWithoutPropertiesLoose__default["default"](props, _excluded$1);
+
+    const otherProps = tmpOtherProps;
+    const reset = typeof Component === "string" ? overrides[Component] : null;
+    const {
+      className: aphroditeClassName,
+      style: inlineStyles
+    } = processStyleList([reset, defaultStyle, style]);
+    return React__namespace.createElement(Component, _extends__default["default"]({}, otherProps, {
+      className: [aphroditeClassName, className].filter(Boolean).join(" "),
+      style: inlineStyles
+    }));
+  }
+
+  return StyleComponent;
+}
+const overrides = aphrodite.StyleSheet.create({
+  button: {
+    margin: 0,
+    "::-moz-focus-inner": {
+      border: 0
+    }
+  }
+});
+
+const _excluded = ["testId", "tag"];
+const styles = aphrodite.StyleSheet.create({
+  default: {
+    alignItems: "stretch",
+    borderWidth: 0,
+    borderStyle: "solid",
+    boxSizing: "border-box",
+    display: "flex",
+    flexDirection: "column",
+    margin: 0,
+    padding: 0,
+    position: "relative",
+    zIndex: 0,
+    minHeight: 0,
+    minWidth: 0
+  }
+});
+const StyledDiv = addStyle("div", styles.default);
+const StyledArticle = addStyle("article", styles.default);
+const StyledAside = addStyle("aside", styles.default);
+const StyledNav = addStyle("nav", styles.default);
+const StyledSection = addStyle("section", styles.default);
+class View extends React__namespace.Component {
+  render() {
+    const _this$props = this.props,
+          {
+      testId,
+      tag
+    } = _this$props,
+          restProps = _objectWithoutPropertiesLoose__default["default"](_this$props, _excluded);
+
+    const props = _extends__default["default"]({}, restProps, {
+      "data-test-id": testId
+    });
+
+    switch (tag) {
+      case "article":
+        return React__namespace.createElement(StyledArticle, props);
+
+      case "aside":
+        return React__namespace.createElement(StyledAside, props);
+
+      case "nav":
+        return React__namespace.createElement(StyledNav, props);
+
+      case "section":
+        return React__namespace.createElement(StyledSection, props);
+
+      case "div":
+        return React__namespace.createElement(StyledDiv, props);
+
+      default:
+        throw Error(`${tag} is not an allowed value for the 'tag' prop`);
+    }
+  }
+
+}
+View.defaultProps = {
+  tag: "div"
+};
+
+const RenderState = require("flow-enums-runtime")({
+  Root: "root",
+  Initial: "initial",
+  Standard: "standard"
+});
+const RenderStateContext = React__namespace.createContext(RenderState.Root);
+
+class WithSSRPlaceholder extends React__namespace.Component {
+  constructor(...args) {
+    super(...args);
+    this.state = {
+      mounted: false
+    };
+    this._isTheRootComponent = false;
+  }
+
+  componentDidMount() {
+    if (this._isTheRootComponent) {
+      this.setState({
+        mounted: true
+      });
+    }
+  }
+
+  _renderAsRootComponent() {
+    const {
+      mounted
+    } = this.state;
+    const {
+      children,
+      placeholder
+    } = this.props;
+    this._isTheRootComponent = true;
+
+    if (mounted) {
+      return React__namespace.createElement(RenderStateContext.Provider, {
+        value: RenderState.Standard
+      }, children());
+    }
+
+    if (placeholder) {
+      return React__namespace.createElement(RenderStateContext.Provider, {
+        value: RenderState.Initial
+      }, placeholder());
+    }
+
+    return null;
+  }
+
+  _maybeRender(renderState) {
+    const {
+      children,
+      placeholder
+    } = this.props;
+
+    switch (renderState) {
+      case RenderState.Root:
+        return this._renderAsRootComponent();
+
+      case RenderState.Initial:
+        if (placeholder) {
+          return placeholder();
+        }
+
+        return null;
+
+      case RenderState.Standard:
+        return children();
+    }
+
+    {
+      var _JSON$stringify;
+
+      console.log(`We got a render state we don't understand: "${(_JSON$stringify = JSON.stringify(renderState)) != null ? _JSON$stringify : ""}"`);
+      return this._maybeRender(RenderState.Root);
+    }
+  }
+
+  render() {
+    return React__namespace.createElement(RenderStateContext.Consumer, null, value => this._maybeRender(value));
+  }
+
+}
+
+class UniqueIDFactory {
+  constructor(scope) {
+    this.get = key => {
+      const normalizedKey = key.toLowerCase();
+
+      if (!this._hasValidIdChars(key)) {
+        throw new Error(`Invalid identifier key: ${key}`);
+      }
+
+      return `${this._uniqueFactoryName}-${normalizedKey}`;
+    };
+
+    scope = typeof scope === "string" ? scope : "";
+    const normalizedScope = scope.toLowerCase();
+
+    if (!this._hasValidIdChars(normalizedScope)) {
+      throw new Error(`Invalid factory scope: ${scope}`);
+    }
+
+    this._uniqueFactoryName = `uid-${normalizedScope}-${UniqueIDFactory._factoryUniquenessCounter++}`;
+  }
+
+  _hasValidIdChars(value) {
+    if (typeof value !== "string") {
+      return false;
+    }
+
+    const invalidCharsReplaced = value.replace(/[^\d\w-]/g, "-");
+    return value === invalidCharsReplaced;
+  }
+
+}
+UniqueIDFactory._factoryUniquenessCounter = 0;
+
+class SsrIDFactory {
+  get(id) {
+    return id;
+  }
+
+}
+
+SsrIDFactory.Default = new SsrIDFactory();
+var SsrIDFactory$1 = SsrIDFactory.Default;
+
+class UniqueIDProvider extends React__namespace.Component {
+  _performRender(firstRender) {
+    const {
+      children,
+      mockOnFirstRender,
+      scope
+    } = this.props;
+
+    if (firstRender) {
+      if (mockOnFirstRender) {
+        return children(SsrIDFactory$1);
+      }
+
+      return null;
+    }
+
+    if (!this._idFactory) {
+      this._idFactory = new UniqueIDFactory(scope);
+    }
+
+    return children(this._idFactory);
+  }
+
+  render() {
+    return React__namespace.createElement(WithSSRPlaceholder, {
+      placeholder: () => this._performRender(true)
+    }, () => this._performRender(false));
+  }
+
+}
+
+class IDProvider extends React__namespace.Component {
+  renderChildren(ids) {
+    const {
+      id,
+      children
+    } = this.props;
+    const uniqueId = ids ? ids.get(IDProvider.defaultId) : id;
+
+    if (!uniqueId) {
+      throw new Error("Did not get an identifier factory nor a id prop");
+    }
+
+    return children(uniqueId);
+  }
+
+  render() {
+    const {
+      id,
+      scope
+    } = this.props;
+
+    if (id) {
+      return this.renderChildren();
+    } else {
+      return React__namespace.createElement(UniqueIDProvider, {
+        scope: scope,
+        mockOnFirstRender: true
+      }, ids => this.renderChildren(ids));
+    }
+  }
+
+}
+IDProvider.defaultId = "wb-id";
+
+let serverSide = false;
+var server = {
+  isServerSide: () => serverSide,
+  setServerSide: () => {
+    serverSide = true;
+  }
+};
+
+const useRenderState = () => React.useContext(RenderStateContext);
+
+const useUniqueIdWithMock = scope => {
+  const renderState = useRenderState();
+  const idFactory = React.useRef(null);
+
+  if (renderState === RenderState.Root) {
+    throw new Error("Components using useUniqueIdWithMock() should be descendants of <RenderStateRoot>");
+  }
+
+  if (renderState === RenderState.Initial) {
+    return SsrIDFactory$1;
+  }
+
+  if (!idFactory.current) {
+    idFactory.current = new UniqueIDFactory(scope);
+  }
+
+  return idFactory.current;
+};
+const useUniqueIdWithoutMock = scope => {
+  const renderState = useRenderState();
+  const idFactory = React.useRef(null);
+
+  if (renderState === RenderState.Root) {
+    throw new Error("Components using useUniqueIdWithoutMock() should be descendants of <RenderStateRoot>");
+  }
+
+  if (renderState === RenderState.Initial) {
+    return null;
+  }
+
+  if (!idFactory.current) {
+    idFactory.current = new UniqueIDFactory(scope);
+  }
+
+  return idFactory.current;
+};
+
+const useForceUpdate = () => {
+  const [, setState] = React__namespace.useState(false);
+  const forceUpdate = React__namespace.useCallback(() => setState(state => !state), []);
+  return forceUpdate;
+};
+
+const useOnMountEffect = callback => {
+  React__namespace.useEffect(callback, []);
+};
+
+const useIsMounted = () => {
+  const isMounted = React__namespace.useRef(false);
+  useOnMountEffect(() => {
+    isMounted.current = true;
+    return () => {
+      isMounted.current = false;
+    };
+  });
+  return React__namespace.useCallback(() => isMounted.current, []);
+};
+
+const useOnline = () => {
+  const forceUpdate = useForceUpdate();
+  React.useEffect(() => {
+    const handleChange = () => forceUpdate();
+
+    window.addEventListener("online", handleChange);
+    window.addEventListener("offline", handleChange);
+    return () => {
+      window.removeEventListener("online", handleChange);
+      window.removeEventListener("offline", handleChange);
+    };
+  }, [forceUpdate]);
+  return navigator.onLine;
+};
+
+const {
+  useEffect,
+  useState
+} = React__namespace;
+
+const RenderStateRoot = ({
+  children,
+  throwIfNested
+}) => {
+  const [firstRender, setFirstRender] = useState(true);
+  const renderState = useRenderState();
+  useEffect(() => {
+    setFirstRender(false);
+  }, []);
+
+  if (renderState !== RenderState.Root) {
+    if (throwIfNested) {
+      throw new Error("There's already a <RenderStateRoot> above this instance in " + "the render tree.  This instance should be removed.");
+    }
+
+    return children;
+  }
+
+  const value = firstRender ? RenderState.Initial : RenderState.Standard;
+  return React__namespace.createElement(RenderStateContext.Provider, {
+    value: value
+  }, children);
+};
+
+RenderStateRoot.defaultProps = {
+  throwIfNested: true
+};
+
+exports.IDProvider = IDProvider;
+exports.RenderState = RenderState;
+exports.RenderStateRoot = RenderStateRoot;
+exports.Server = server;
+exports.Text = Text;
+exports.UniqueIDProvider = UniqueIDProvider;
+exports.View = View;
+exports.WithSSRPlaceholder = WithSSRPlaceholder;
+exports.addStyle = addStyle;
+exports.useForceUpdate = useForceUpdate;
+exports.useIsMounted = useIsMounted;
+exports.useOnMountEffect = useOnMountEffect;
+exports.useOnline = useOnline;
+exports.useRenderState = useRenderState;
+exports.useUniqueIdWithMock = useUniqueIdWithMock;
+exports.useUniqueIdWithoutMock = useUniqueIdWithoutMock;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-core",
-  "version": "4.6.1",
+  "version": "4.6.2",
   "design": "v1",
   "publishConfig": {
     "access": "public"
@@ -13,8 +13,7 @@
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "dependencies": {
-    "@babel/runtime": "^7.18.6",
-    "@khanacademy/wonder-blocks-spacing": "^3.0.5"
+    "@babel/runtime": "^7.18.6"
   },
   "peerDependencies": {
     "aphrodite": "^1.2.5",
@@ -25,7 +24,7 @@
     "react-router-dom": "5.3.0"
   },
   "devDependencies": {
-    "wb-dev-build-settings": "^0.6.0"
+    "wb-dev-build-settings": "^0.7.0"
   },
   "author": "",
   "license": "MIT"