@khanacademy/wonder-blocks-core 10.0.0 → 11.0.1

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @khanacademy/wonder-blocks-core
 
+## 11.0.1
+
+### Patch Changes
+
+-   11a0f5c6: No functional changes. Adding prepublishOnly script.
+
+## 11.0.0
+
+### Major Changes
+
+-   d23c9c5f: Delete the custom identifier generation API
+
 ## 10.0.0
 
 ### Major Changes

package/dist/es/index.js

@@ -1,7 +1,7 @@
 import _extends from '@babel/runtime/helpers/extends';
 import _objectWithoutPropertiesLoose from '@babel/runtime/helpers/objectWithoutPropertiesLoose';
 import * as React from 'react';
-import { useId, useContext as useContext$1, useRef, useEffect as useEffect$1 } from 'react';
+import { useId, useEffect as useEffect$1, useContext as useContext$1 } from 'react';
 import { StyleSheet, css } from 'aphrodite';
 
 function flatten(list) {
@@ -248,95 +248,6 @@ class InitialFallback extends React.Component {
   }
 }
 
-class UniqueIDFactory {
-  constructor(scope) {
-    this._uniqueFactoryName = void 0;
-    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) {
-    return typeof value === "string" ? !/\s/.test(value) : false;
-  }
-}
-UniqueIDFactory._factoryUniquenessCounter = 0;
-
-class SsrIDFactory {
-  get(id) {
-    return id;
-  }
-}
-SsrIDFactory.Default = new SsrIDFactory();
-var SsrIDFactory$1 = SsrIDFactory.Default;
-
-class UniqueIDProvider extends React.Component {
-  constructor(...args) {
-    super(...args);
-    this._idFactory = void 0;
-  }
-  _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.createElement(InitialFallback, {
-      fallback: () => this._performRender(true)
-    }, () => this._performRender(false));
-  }
-}
-
-class IDProvider extends React.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.createElement(UniqueIDProvider, {
-        scope: scope,
-        mockOnFirstRender: true
-      }, ids => this.renderChildren(ids));
-    }
-  }
-}
-IDProvider.defaultId = "wb-id";
-
 let serverSide = false;
 var Server = {
   isServerSide: () => serverSide,
@@ -353,38 +264,6 @@ const Id = ({
   return React.createElement(React.Fragment, null, children(id != null ? id : generatedId));
 };
 
-const useRenderState = () => {
-  const rawRenderState = useContext$1(RenderStateContext);
-  if (rawRenderState === RenderStateInternal.Standard) {
-    return RenderState.Standard;
-  } else {
-    return RenderState.Initial;
-  }
-};
-
-const useUniqueIdWithMock = scope => {
-  const renderState = useRenderState();
-  const idFactory = useRef(null);
-  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 = useRef(null);
-  if (renderState === RenderState.Initial) {
-    return null;
-  }
-  if (!idFactory.current) {
-    idFactory.current = new UniqueIDFactory(scope);
-  }
-  return idFactory.current;
-};
-
 const useForceUpdate = () => {
   const [, setUpdateState] = React.useState({});
   const forceUpdate = React.useCallback(() => {
@@ -434,6 +313,15 @@ const usePreHydrationEffect = effect => {
   effectCallRef.current(effect, []);
 };
 
+const useRenderState = () => {
+  const rawRenderState = useContext$1(RenderStateContext);
+  if (rawRenderState === RenderStateInternal.Standard) {
+    return RenderState.Standard;
+  } else {
+    return RenderState.Initial;
+  }
+};
+
 const {
   useEffect,
   useState,
@@ -460,4 +348,4 @@ const RenderStateRoot = ({
   }, children);
 };
 
-export { IDProvider, Id, InitialFallback, RenderState, RenderStateRoot, Server, Text, UniqueIDProvider, View, addStyle, useForceUpdate, useIsMounted, useLatestRef, useOnMountEffect, useOnline, usePreHydrationEffect, useRenderState, useUniqueIdWithMock, useUniqueIdWithoutMock };
+export { Id, InitialFallback, RenderState, RenderStateRoot, Server, Text, View, addStyle, useForceUpdate, useIsMounted, useLatestRef, useOnMountEffect, useOnline, usePreHydrationEffect, useRenderState };

package/dist/index.d.ts

@@ -1,13 +1,9 @@
-import type { AriaProps, IIdentifierFactory, StyleType, PropsFor } from "./util/types";
 export { default as Text } from "./components/text";
 export { default as View } from "./components/view";
 export { default as InitialFallback } from "./components/initial-fallback";
-export { default as IDProvider } from "./components/id-provider";
-export { default as UniqueIDProvider } from "./components/unique-id-provider";
 export { default as addStyle } from "./util/add-style";
 export { default as Server } from "./util/server";
 export { Id } from "./components/id";
-export { useUniqueIdWithMock, useUniqueIdWithoutMock, } from "./hooks/use-unique-id";
 export { useForceUpdate } from "./hooks/use-force-update";
 export { useIsMounted } from "./hooks/use-is-mounted";
 export { useLatestRef } from "./hooks/use-latest-ref";
@@ -18,4 +14,4 @@ export { useRenderState } from "./hooks/use-render-state";
 export { RenderStateRoot } from "./components/render-state-root";
 export { RenderState } from "./components/render-state-context";
 export type { AriaRole, AriaAttributes } from "./util/aria-types";
-export type { AriaProps, IIdentifierFactory, StyleType, PropsFor };
+export type { AriaProps, StyleType, PropsFor } from "./util/types";

package/dist/index.js

@@ -275,95 +275,6 @@ class InitialFallback extends React__namespace.Component {
   }
 }
 
-class UniqueIDFactory {
-  constructor(scope) {
-    this._uniqueFactoryName = void 0;
-    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) {
-    return typeof value === "string" ? !/\s/.test(value) : false;
-  }
-}
-UniqueIDFactory._factoryUniquenessCounter = 0;
-
-class SsrIDFactory {
-  get(id) {
-    return id;
-  }
-}
-SsrIDFactory.Default = new SsrIDFactory();
-var SsrIDFactory$1 = SsrIDFactory.Default;
-
-class UniqueIDProvider extends React__namespace.Component {
-  constructor(...args) {
-    super(...args);
-    this._idFactory = void 0;
-  }
-  _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(InitialFallback, {
-      fallback: () => 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,
@@ -380,38 +291,6 @@ const Id = ({
   return React__namespace.createElement(React__namespace.Fragment, null, children(id != null ? id : generatedId));
 };
 
-const useRenderState = () => {
-  const rawRenderState = React.useContext(RenderStateContext);
-  if (rawRenderState === RenderStateInternal.Standard) {
-    return RenderState.Standard;
-  } else {
-    return RenderState.Initial;
-  }
-};
-
-const useUniqueIdWithMock = scope => {
-  const renderState = useRenderState();
-  const idFactory = React.useRef(null);
-  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.Initial) {
-    return null;
-  }
-  if (!idFactory.current) {
-    idFactory.current = new UniqueIDFactory(scope);
-  }
-  return idFactory.current;
-};
-
 const useForceUpdate = () => {
   const [, setUpdateState] = React__namespace.useState({});
   const forceUpdate = React__namespace.useCallback(() => {
@@ -461,6 +340,15 @@ const usePreHydrationEffect = effect => {
   effectCallRef.current(effect, []);
 };
 
+const useRenderState = () => {
+  const rawRenderState = React.useContext(RenderStateContext);
+  if (rawRenderState === RenderStateInternal.Standard) {
+    return RenderState.Standard;
+  } else {
+    return RenderState.Initial;
+  }
+};
+
 const {
   useEffect,
   useState,
@@ -487,14 +375,12 @@ const RenderStateRoot = ({
   }, children);
 };
 
-exports.IDProvider = IDProvider;
 exports.Id = Id;
 exports.InitialFallback = InitialFallback;
 exports.RenderState = RenderState;
 exports.RenderStateRoot = RenderStateRoot;
 exports.Server = Server;
 exports.Text = Text;
-exports.UniqueIDProvider = UniqueIDProvider;
 exports.View = View;
 exports.addStyle = addStyle;
 exports.useForceUpdate = useForceUpdate;
@@ -504,5 +390,3 @@ exports.useOnMountEffect = useOnMountEffect;
 exports.useOnline = useOnline;
 exports.usePreHydrationEffect = usePreHydrationEffect;
 exports.useRenderState = useRenderState;
-exports.useUniqueIdWithMock = useUniqueIdWithMock;
-exports.useUniqueIdWithoutMock = useUniqueIdWithoutMock;

package/dist/util/types.d.ts

@@ -78,12 +78,4 @@ export type TextViewSharedProps = {
     "data-modal-launcher-portal"?: boolean;
     "data-placement"?: string;
 } & AriaProps & EventHandlers;
-/**
- * Interface implemented by types that can provide identifiers.
- * @deprecated Use `useId` for your ID needs. If you are in a class-based
- * component and cannot use hooks, then use the `Id` component.
- */
-export interface IIdentifierFactory {
-    get(id: string): string;
-}
 export * from "./types.propsfor";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-core",
-  "version": "10.0.0",
+  "version": "11.0.1",
   "design": "v1",
   "publishConfig": {
     "access": "public"
@@ -10,7 +10,8 @@
   "module": "dist/es/index.js",
   "types": "dist/index.d.ts",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "prepublishOnly": "../../utils/publish/package-pre-publish-check.sh"
   },
   "dependencies": {
     "@babel/runtime": "^7.18.6"
@@ -24,7 +25,7 @@
   },
   "devDependencies": {
     "@khanacademy/wb-dev-build-settings": "^2.0.0",
-    "@khanacademy/wonder-blocks-testing-core": "^2.0.0"
+    "@khanacademy/wonder-blocks-testing-core": "^2.0.1"
   },
   "author": "",
   "license": "MIT"

package/dist/components/id-provider.d.ts

@@ -1,60 +0,0 @@
-import * as React from "react";
-import type { IIdentifierFactory } from "../util/types";
-type Props = {
-    /**
-     * Use the children-as-function pattern to pass a uniqueId string for
-     * use anywhere within children. This provides a way of adding a unique identifier
-     * to a given component for a11y purposes.
-     */
-    children: (uniqueId: string) => React.ReactNode;
-    /**
-     * Scope for the unique identifier
-     */
-    scope: string;
-    /**
-     * An optional id parameter for the title. If one is
-     * not provided, a unique id will be generated.
-     */
-    id?: string;
-    /**
-     * Test ID used for e2e testing.
-     */
-    testId?: string;
-};
-/**
- * @deprecated This component is deprecated and will be removed in an
- * upcoming release. Migrate existing code to use `useId` or the `Id` component.
- *
- * This is a wrapper that returns an identifier. If the `id` prop is set, the
- * component will return the same id to be consumed by its children. Otherwise,
- * a unique id will be provided. This is beneficial for accessibility purposes,
- * among other things.
- *
- * The main difference with `UniqueIDProvider` is that `IDProvider` has a single
- * responsibility, to return an identifier that can by used by the children that
- * are rendered internally.
- *
- * This way, the wrapped component will receive this custom ID and will use it
- * to connect different elements.
- *
- * e.g. It uses the same generated id to connect a Dialog with its main title,
- * or form label with the associated input element, etc.
- *
- * ## Usage
- *
- * ```jsx
- * import {IDProvider} from "@khanacademy/wonder-blocks-core";
- *
- * <IDProvider scope="field">
- *  {(uniqueId) => (
- *     Unique ID: {uniqueId}
- *  )}
- * </IDProvider>
- * ```
- */
-export default class IDProvider extends React.Component<Props> {
-    static defaultId: string;
-    renderChildren(ids?: IIdentifierFactory): React.ReactNode;
-    render(): React.ReactNode;
-}
-export {};

package/dist/components/unique-id-provider.d.ts

@@ -1,72 +0,0 @@
-import * as React from "react";
-import type { IIdentifierFactory } from "../util/types";
-type Props = {
-    /**
-     * A render prop that takes an instance of IIdentifierFactory and returns
-     * the content to be rendered.
-     *
-     * If mockOnFirstRender is false, this is only called after
-     * the initial render has occurred -- it will be blank for the
-     * the first render -- and will always be called with the same
-     * IIdentifierFactory instance.
-     *
-     * If mockOnFirstRender is true, this is called once with
-     * a mock IIdentifierFactory for the initial render, and then a unique ID
-     * factory thereafter.
-     *
-     * Full type with `IIdentifierFactory` definition inlined is:
-     *
-     * `{get(id: string): string} => React.Node`
-     */
-    children: (arg1: IIdentifierFactory) => React.ReactNode;
-    /**
-     * If mockOnFirstRender is false, children is only called
-     * after the initial render has occurred.
-     * If mockOnFirstRender is true, children is called once with
-     * a mock IIdentifierFactory for the initial render, and then a unique ID
-     * factory thereafter.
-     */
-    mockOnFirstRender: boolean;
-    /**
-     * If this prop is specified, any identifiers provided will contain the
-     * given scope. This can be useful for making easily readable identifiers.
-     */
-    readonly scope?: string;
-};
-/**
- * @deprecated This component is deprecated and will be removed in an
- * upcoming release. Migrate existing code to use `useId` or the `Id` component.
- *
- * The `UniqueIDProvider` component is how Wonder Blocks components obtain
- * unique identifiers. This component ensures that server-side rendering and
- * initial client rendering match while allowing the provision of unique
- * identifiers for the client.
- *
- * In all but the first render, the children are rendered with the same
- * `IIdentifierFactory` instance, ensuring that the same calls will return the
- * same identifiers.
- *
- * The `get` method of the identifier factory ensures that the same identifier
- * is returned for like requests, but also that all identifiers provided are
- * unique. Therefore, `get("test")` will always equal `get("test")`, and
- * `get("test2")` will always equal `get("test2")`, but `get("test")` will
- * never equal `get("test2")`.
- *
- * ## Usage
- *
- * ```jsx
- * import {UniqueIDProvider} from "@khanacademy/wonder-blocks-core";
- *
- * <UniqueIDProvider mockOnFirstRender={false} scope="field">
- *  {(ids) => (
- *     <>The id returned for "my-identifier": {ids.get("my-identifier")}</>
- *  )}
- * </UniqueIDProvider>
- * ```
- */
-export default class UniqueIDProvider extends React.Component<Props> {
-    _idFactory: IIdentifierFactory;
-    _performRender(firstRender: boolean): React.ReactNode;
-    render(): React.ReactNode;
-}
-export {};

package/dist/hooks/use-unique-id.d.ts

@@ -1,24 +0,0 @@
-import type { IIdentifierFactory } from "../util/types";
-/**
- * @deprecated Use `useId` for your ID needs. If you are in a class-based
- * component and cannot use hooks, then use the `Id` component.
- *
- * Returns a unique identifier factory.  If the parent component hasn't
- * been mounted yet, the global SsrIDFactory will be returned until the
- * component becomes mounted.
- *
- * @param {string} [scope] optional string to prefix generated ids with.
- * @returns {IIdentifierFactory}
- */
-export declare const useUniqueIdWithMock: (scope?: string) => IIdentifierFactory;
-/**
- * @deprecated Use `useId` for your ID needs. If you are in a class-based
- * component and cannot use hooks, then use the `Id` component.
- *
- * Returns a unique identifier factory.  If the parent component hasn't
- * been mounted yet, null will be returned.
- *
- * @param {string} [scope] optional string to prefix generated ids with.
- * @returns {?IIdentifierFactory}
- */
-export declare const useUniqueIdWithoutMock: (scope?: string) => IIdentifierFactory | null | undefined;

package/dist/util/ssr-id-factory.d.ts

@@ -1,3 +0,0 @@
-import type { IIdentifierFactory } from "./types";
-declare const _default: IIdentifierFactory;
-export default _default;

package/dist/util/unique-id-factory.d.ts

@@ -1,44 +0,0 @@
-import type { IIdentifierFactory } from "./types";
-/**
- * This is NOT for direct use. Instead, see the UniqueIDProvider component.
- *
- * Implements IIdentifierFactory to provide unique identifiers.
- *
- * @deprecated Use `useId` for your ID needs. If you are in a class-based
- * component and cannot use hooks, then use the `Id` component.
- */
-export default class UniqueIDFactory implements IIdentifierFactory {
-    _uniqueFactoryName: string;
-    static _factoryUniquenessCounter: number;
-    /**
-     * Creates a UniqueIDFactory instance.
-     *
-     * @param {string} scope An optional case-insensitive scope for the
-     * factory. This will be used as part of the identifier. Useful for
-     * providing context to the identifiers, which can be useful in
-     * differentiating elements when debugging the DOM. This must contain only
-     * hyphen and alphanumeric characters.
-     */
-    constructor(scope?: string);
-    /**
-     * This method verifies that a string contains valid characters for an
-     * identifier. It does not assert that a string IS a valid identifier (for
-     * example, that it doesn't start with numbers). We don't need to do that
-     * here because all identifiers are prefixed to avoid needing that check.
-     *
-     * According to this post:
-     * https://stackoverflow.com/questions/70579/html-valid-id-attribute-values/31773673#31773673
-     * The only characters that are not allowed in an id are whitespace characters.
-     */
-    _hasValidIdChars(value?: string | null): boolean;
-    /**
-     * Provides a unique identifier with the given key.
-     *
-     * @param {string} key The case-insensitive key of the identifier.
-     *
-     * @returns {string} A unique identifier that will remain the same for this
-     * key in this factory. This must contain only hyphen and alphanumeric
-     * characters.
-     */
-    get: (key: string) => string;
-}