@khanacademy/wonder-blocks-cell 2.2.14 → 2.2.16

package/dist/index.js

@@ -2,10 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _objectWithoutPropertiesLoose = require('@babel/runtime/helpers/objectWithoutPropertiesLoose');
 var React = require('react');
 var wonderBlocksTypography = require('@khanacademy/wonder-blocks-typography');
-var _extends = require('@babel/runtime/helpers/extends');
 var aphrodite = require('aphrodite');
 var Clickable = require('@khanacademy/wonder-blocks-clickable');
 var wonderBlocksCore = require('@khanacademy/wonder-blocks-core');
@@ -16,30 +14,56 @@ var Spacing = require('@khanacademy/wonder-blocks-spacing');
 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]; }
-                });
-            }
+  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);
+      }
+    });
+  }
+  n["default"] = e;
+  return Object.freeze(n);
 }
 
-var _objectWithoutPropertiesLoose__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutPropertiesLoose);
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
-var _extends__default = /*#__PURE__*/_interopDefaultLegacy(_extends);
 var Clickable__default = /*#__PURE__*/_interopDefaultLegacy(Clickable);
 var Color__default = /*#__PURE__*/_interopDefaultLegacy(Color);
 var Spacing__default = /*#__PURE__*/_interopDefaultLegacy(Spacing);
 
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue;
+    target[key] = source[key];
+  }
+  return target;
+}
+
+function _extends() {
+  _extends = Object.assign ? Object.assign.bind() : function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+    return target;
+  };
+  return _extends.apply(this, arguments);
+}
+
 const CellMeasurements = {
   cellMinHeight: Spacing__default["default"].xxLarge_48,
   cellPadding: {
@@ -56,10 +80,8 @@ const getHorizontalRuleStyles = horizontalRule => {
   switch (horizontalRule) {
     case "inset":
       return [styles$2.horizontalRule, styles$2.horizontalRuleInset];
-
     case "full-width":
       return styles$2.horizontalRule;
-
     case "none":
       return {};
   }
@@ -92,14 +114,12 @@ const LeftAccessory = ({
   if (!leftAccessory) {
     return null;
   }
-
   return React__namespace.createElement(React__namespace.Fragment, null, React__namespace.createElement(wonderBlocksCore.View, {
-    style: [styles$1.accessory, disabled && styles$1.accessoryDisabled, _extends__default["default"]({}, leftAccessoryStyle)]
+    style: [styles$1.accessory, disabled && styles$1.accessoryDisabled, _extends({}, leftAccessoryStyle)]
   }, leftAccessory), React__namespace.createElement(wonderBlocksLayout.Strut, {
     size: CellMeasurements.accessoryHorizontalSpacing
   }));
 };
-
 const RightAccessory = ({
   rightAccessory,
   rightAccessoryStyle,
@@ -109,14 +129,12 @@ const RightAccessory = ({
   if (!rightAccessory) {
     return null;
   }
-
   return React__namespace.createElement(React__namespace.Fragment, null, React__namespace.createElement(wonderBlocksLayout.Strut, {
     size: CellMeasurements.accessoryHorizontalSpacing
   }), React__namespace.createElement(wonderBlocksCore.View, {
-    style: [styles$1.accessory, styles$1.accessoryRight, disabled && styles$1.accessoryDisabled, _extends__default["default"]({}, rightAccessoryStyle), active && styles$1.accessoryActive]
+    style: [styles$1.accessory, styles$1.accessoryRight, disabled && styles$1.accessoryDisabled, _extends({}, rightAccessoryStyle), active && styles$1.accessoryActive]
   }, rightAccessory));
 };
-
 const CellCore = props => {
   const {
     active,
@@ -135,7 +153,6 @@ const CellCore = props => {
     innerStyle,
     target
   } = props;
-
   const renderCell = eventState => {
     const horizontalRuleStyles = getHorizontalRuleStyles(horizontalRule);
     return React__namespace.createElement(wonderBlocksCore.View, {
@@ -157,7 +174,6 @@ const CellCore = props => {
       disabled: disabled
     })));
   };
-
   if (onClick || href) {
     return React__namespace.createElement(Clickable__default["default"], {
       disabled: disabled,
@@ -168,10 +184,8 @@ const CellCore = props => {
       target: target
     }, eventState => renderCell(eventState));
   }
-
   return renderCell();
 };
-
 const styles$1 = aphrodite.StyleSheet.create({
   wrapper: {
     background: Color__default["default"].white,
@@ -235,18 +249,15 @@ const styles$1 = aphrodite.StyleSheet.create({
 });
 
 const _excluded$1 = ["title"];
-
-function CompactCell(props) {
+const CompactCell = function CompactCell(props) {
   const {
-    title
-  } = props,
-        coreProps = _objectWithoutPropertiesLoose__default["default"](props, _excluded$1);
-
+      title
+    } = props,
+    coreProps = _objectWithoutPropertiesLoose(props, _excluded$1);
   return React__namespace.createElement(CellCore, coreProps, typeof title === "string" ? React__namespace.createElement(wonderBlocksTypography.LabelMedium, null, title) : title);
-}
+};
 
 const _excluded = ["title", "subtitle1", "subtitle2"];
-
 const Subtitle = ({
   subtitle,
   disabled
@@ -254,25 +265,21 @@ const Subtitle = ({
   if (!subtitle) {
     return null;
   }
-
   if (typeof subtitle === "string") {
     return React__namespace.createElement(wonderBlocksTypography.LabelSmall, {
       style: !disabled && styles.subtitle
     }, subtitle);
   }
-
   return subtitle;
 };
-
-function DetailCell(props) {
+const DetailCell = function DetailCell(props) {
   const {
-    title,
-    subtitle1,
-    subtitle2
-  } = props,
-        coreProps = _objectWithoutPropertiesLoose__default["default"](props, _excluded);
-
-  return React__namespace.createElement(CellCore, _extends__default["default"]({}, coreProps, {
+      title,
+      subtitle1,
+      subtitle2
+    } = props,
+    coreProps = _objectWithoutPropertiesLoose(props, _excluded);
+  return React__namespace.createElement(CellCore, _extends({}, coreProps, {
     innerStyle: styles.innerWrapper
   }), React__namespace.createElement(Subtitle, {
     subtitle: subtitle1,
@@ -285,8 +292,7 @@ function DetailCell(props) {
     subtitle: subtitle2,
     disabled: coreProps.disabled
   }));
-}
-
+};
 const styles = aphrodite.StyleSheet.create({
   subtitle: {
     color: Color__default["default"].offBlack64

package/dist/index.js.flow

@@ -1,2 +1,10 @@
-// @flow
-export * from "../src/index.js";
+/**
+ * Flowtype definitions for index
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.21.0
+ * @flow
+ */
+
+import CompactCell from "./components/compact-cell";
+import DetailCell from "./components/detail-cell";
+declare export { CompactCell, DetailCell };

package/dist/util/types.d.ts

@@ -0,0 +1,122 @@
+import * as React from "react";
+import type { StyleType } from "@khanacademy/wonder-blocks-core";
+import type { Typography } from "@khanacademy/wonder-blocks-typography";
+/**
+ * A set of values that can be used to configure the horizontal rule appearance.
+ */
+export type HorizontalRuleVariant = "full-width" | "inset" | "none";
+/**
+ * An element or component that represents an accessory within a cell.
+ */
+type Accessory = React.ReactNode;
+/**
+ * A subset of CSS Properties to allow overriding some of the default styles set
+ * on the accessory wrapper (loosely based on StyleType).
+ */
+export type AccessoryStyle = {
+    /**
+     * A subset of valid Spacing values.
+     */
+    minWidth?: 16 | 24 | 32 | 48;
+    /**
+     * To vertically align the accessory.
+     */
+    alignSelf?: "flex-start" | "flex-end" | "center";
+    /**
+     * To horizontally align the accessory.
+     */
+    alignItems?: "flex-start" | "flex-end" | "center";
+};
+/**
+ * A union that allows using  plain text or WB Typography elements.
+ */
+export type TypographyText = string | React.ReactElement<React.ComponentProps<Typography>>;
+/**
+ * Common properties for all cells.
+ */
+export type CellProps = {
+    /**
+     * The title / main content of the cell. You can either provide a string or
+     * a Typography component. If a string is provided, typography defaults to
+     * LabelLarge.
+     */
+    title: TypographyText;
+    /**
+     * If provided, this adds a left accessory to the cell. Left
+     * Accessories can be defined using WB components such as Icon,
+     * IconButton, or it can even be used for a custom node/component if
+     * needed. What ever is passed in will occupy the "LeftAccessory” area
+     * of the Cell.
+     */
+    leftAccessory?: Accessory;
+    /**
+     * Optional custom styles applied to the leftAccessory wrapper. For
+     * example, it can be used to set a custom minWidth or a custom
+     * alignment.
+     *
+     * NOTE: leftAccessoryStyle can only be used if leftAccessory is set.
+     */
+    leftAccessoryStyle?: AccessoryStyle;
+    /**
+     * If provided, this adds a right accessory to the cell. Right
+     * Accessories can be defined using WB components such as Icon,
+     * IconButton, or it can even be used for a custom node/component if
+     * needed. What ever is passed in will occupy the “RightAccessory”
+     * area of the Cell.
+     */
+    rightAccessory?: Accessory;
+    /**
+     * Optional custom styles applied to the rightAccessory wrapper. For
+     * example, it can be used to set a custom minWidth or a custom
+     * alignment.
+     *
+     * NOTE: rightAccessoryStyle can only be used if rightAccessory is
+     * set.
+     */
+    rightAccessoryStyle?: AccessoryStyle;
+    /**
+     * Adds a horizontal rule at the bottom of the cell that can be used to
+     * separate cells within groups such as lists. Defaults to `inset`.
+     */
+    horizontalRule?: HorizontalRuleVariant;
+    /**
+     * Optional custom styles applied to the cell container.
+     */
+    style?: StyleType;
+    /**
+     * Optional test ID for e2e testing.
+     */
+    testId?: string;
+    /**
+     * Called when the cell is clicked.
+     *
+     * If not provided, the Cell can’t be hovered and/or pressed (highlighted on
+     * hover).
+     */
+    onClick?: (e: React.SyntheticEvent) => unknown;
+    /**
+     * Whether the cell is active (or currently selected).
+     */
+    active?: boolean;
+    /**
+     * Whether the cell is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Used to announce the cell's content to screen readers.
+     */
+    ["aria-label"]?: string;
+    /**
+     * Optinal href which Cell should direct to, uses client-side routing
+     * by default if react-router is present.
+     */
+    href?: string;
+    /**
+     * A target destination window for a link to open in. Should only be used
+     * when `href` is specified.
+     *
+     * TODO(WB-1262): only allow this prop when `href` is also set.t
+     */
+    target?: "_blank";
+};
+export {};

package/dist/util/types.js.flow

@@ -0,0 +1,148 @@
+/**
+ * Flowtype definitions for types
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.21.0
+ * @flow
+ */
+
+import * as React from "react";
+import type { StyleType } from "@khanacademy/wonder-blocks-core";
+import type { Typography } from "@khanacademy/wonder-blocks-typography";
+
+/**
+ * A set of values that can be used to configure the horizontal rule appearance.
+ */
+export type HorizontalRuleVariant = "full-width" | "inset" | "none";
+/**
+ * An element or component that represents an accessory within a cell.
+ */
+declare type Accessory = React.Node;
+/**
+ * A subset of CSS Properties to allow overriding some of the default styles set
+ * on the accessory wrapper (loosely based on StyleType).
+ */
+export type AccessoryStyle = {
+  /**
+   * A subset of valid Spacing values.
+   */
+  minWidth?: 16 | 24 | 32 | 48,
+
+  /**
+   * To vertically align the accessory.
+   */
+  alignSelf?: "flex-start" | "flex-end" | "center",
+
+  /**
+   * To horizontally align the accessory.
+   */
+  alignItems?: "flex-start" | "flex-end" | "center",
+  ...
+};
+/**
+ * A union that allows using  plain text or WB Typography elements.
+ */
+export type TypographyText =
+  | string
+  | React.Element<React.ComponentProps<Typography>>;
+/**
+ * Common properties for all cells.
+ */
+export type CellProps = {
+  /**
+   * The title / main content of the cell. You can either provide a string or
+   * a Typography component. If a string is provided, typography defaults to
+   * LabelLarge.
+   */
+  title: TypographyText,
+
+  /**
+   * If provided, this adds a left accessory to the cell. Left
+   * Accessories can be defined using WB components such as Icon,
+   * IconButton, or it can even be used for a custom node/component if
+   * needed. What ever is passed in will occupy the "LeftAccessory” area
+   * of the Cell.
+   */
+  leftAccessory?: Accessory,
+
+  /**
+   * Optional custom styles applied to the leftAccessory wrapper. For
+   * example, it can be used to set a custom minWidth or a custom
+   * alignment.
+   *
+   * NOTE: leftAccessoryStyle can only be used if leftAccessory is set.
+   */
+  leftAccessoryStyle?: AccessoryStyle,
+
+  /**
+   * If provided, this adds a right accessory to the cell. Right
+   * Accessories can be defined using WB components such as Icon,
+   * IconButton, or it can even be used for a custom node/component if
+   * needed. What ever is passed in will occupy the “RightAccessory”
+   * area of the Cell.
+   */
+  rightAccessory?: Accessory,
+
+  /**
+   * Optional custom styles applied to the rightAccessory wrapper. For
+   * example, it can be used to set a custom minWidth or a custom
+   * alignment.
+   *
+   * NOTE: rightAccessoryStyle can only be used if rightAccessory is
+   * set.
+   */
+  rightAccessoryStyle?: AccessoryStyle,
+
+  /**
+   * Adds a horizontal rule at the bottom of the cell that can be used to
+   * separate cells within groups such as lists. Defaults to `inset`.
+   */
+  horizontalRule?: HorizontalRuleVariant,
+
+  /**
+   * Optional custom styles applied to the cell container.
+   */
+  style?: StyleType,
+
+  /**
+   * Optional test ID for e2e testing.
+   */
+  testId?: string,
+
+  /**
+   * Called when the cell is clicked.
+   *
+   * If not provided, the Cell can’t be hovered and/or pressed (highlighted on
+   * hover).
+   */
+  onClick?: (e: React.SyntheticEvent<>) => mixed,
+
+  /**
+   * Whether the cell is active (or currently selected).
+   */
+  active?: boolean,
+
+  /**
+   * Whether the cell is disabled.
+   */
+  disabled?: boolean,
+
+  /**
+   * Used to announce the cell's content to screen readers.
+   */
+  "aria-label": string | void,
+
+  /**
+   * Optinal href which Cell should direct to, uses client-side routing
+   * by default if react-router is present.
+   */
+  href?: string,
+
+  /**
+   * A target destination window for a link to open in. Should only be used
+   * when `href` is specified.
+   *
+   * TODO(WB-1262): only allow this prop when `href` is also set.t
+   */
+  target?: "_blank",
+  ...
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-cell",
-  "version": "2.2.14",
+  "version": "2.2.16",
   "design": "v1",
   "publishConfig": {
     "access": "public"
@@ -8,25 +8,25 @@
   "description": "",
   "main": "dist/index.js",
   "module": "dist/es/index.js",
-  "source": "src/index.js",
+  "types": "dist/index.d.ts",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "dependencies": {
     "@babel/runtime": "^7.18.6",
-    "@khanacademy/wonder-blocks-clickable": "^2.4.4",
-    "@khanacademy/wonder-blocks-color": "^1.2.0",
-    "@khanacademy/wonder-blocks-core": "^4.6.2",
-    "@khanacademy/wonder-blocks-layout": "^1.4.15",
-    "@khanacademy/wonder-blocks-spacing": "^3.0.5",
-    "@khanacademy/wonder-blocks-typography": "^1.1.37"
+    "@khanacademy/wonder-blocks-clickable": "^2.4.6",
+    "@khanacademy/wonder-blocks-color": "^1.2.2",
+    "@khanacademy/wonder-blocks-core": "^4.8.0",
+    "@khanacademy/wonder-blocks-layout": "^1.4.17",
+    "@khanacademy/wonder-blocks-spacing": "^3.0.6",
+    "@khanacademy/wonder-blocks-typography": "^1.1.39"
   },
   "peerDependencies": {
     "aphrodite": "^1.2.5",
     "react": "16.14.0"
   },
   "devDependencies": {
-    "wb-dev-build-settings": "^0.7.0"
+    "wb-dev-build-settings": "^0.7.2"
   },
   "author": "",
   "license": "MIT"

package/src/components/__tests__/{compact-cell.test.js → compact-cell.test.tsx}

@@ -1,11 +1,10 @@
-// @flow
 import * as React from "react";
 import {render, screen} from "@testing-library/react";
 
 import Icon, {icons} from "@khanacademy/wonder-blocks-icon";
 import {HeadingMedium} from "@khanacademy/wonder-blocks-typography";
 
-import CompactCell from "../compact-cell.js";
+import CompactCell from "../compact-cell";
 
 describe("CompactCell", () => {
     it("should render the default CompactCell component", () => {

package/src/components/__tests__/{detail-cell.test.js → detail-cell.test.tsx}

@@ -1,10 +1,9 @@
-// @flow
 import * as React from "react";
 import {render, screen} from "@testing-library/react";
 
 import {HeadingMedium} from "@khanacademy/wonder-blocks-typography";
 
-import DetailCell from "../detail-cell.js";
+import DetailCell from "../detail-cell";
 
 describe("DetailCell", () => {
     it("should render the default DetailCell component", () => {

package/src/components/{compact-cell.js → compact-cell.tsx}

@@ -1,11 +1,10 @@
-// @flow
 import * as React from "react";
 
 import {LabelMedium} from "@khanacademy/wonder-blocks-typography";
 
-import CellCore from "./internal/cell-core.js";
+import CellCore from "./internal/cell-core";
 
-import type {CellProps} from "../util/types.js";
+import type {CellProps} from "../util/types";
 
 /**
  * `CompactCell` is the simplest form of the Cell. It is a compacted-height Cell
@@ -25,7 +24,7 @@ import type {CellProps} from "../util/types.js";
  * />
  * ```
  */
-function CompactCell(props: CellProps): React.Node {
+const CompactCell: React.FC<CellProps> = function (props): React.ReactElement {
     const {title, ...coreProps} = props;
 
     return (
@@ -37,6 +36,6 @@ function CompactCell(props: CellProps): React.Node {
             )}
         </CellCore>
     );
-}
+};
 
 export default CompactCell;

package/src/components/{detail-cell.js → detail-cell.tsx}

@@ -1,4 +1,3 @@
-// @flow
 import * as React from "react";
 import {StyleSheet} from "aphrodite";
 
@@ -7,22 +6,26 @@ import {Strut} from "@khanacademy/wonder-blocks-layout";
 import Spacing from "@khanacademy/wonder-blocks-spacing";
 import {LabelSmall, LabelMedium} from "@khanacademy/wonder-blocks-typography";
 
-import CellCore from "./internal/cell-core.js";
-import {CellMeasurements} from "./internal/common.js";
+import CellCore from "./internal/cell-core";
+import {CellMeasurements} from "./internal/common";
 
-import type {CellProps, TypographyText} from "../util/types.js";
+import type {CellProps, TypographyText} from "../util/types";
 
-type SubtitleProps = {|
-    subtitle?: TypographyText,
+type SubtitleProps = {
+    subtitle?: TypographyText;
     /**
      * If true, the subtitle will use the alpha color defined in the parent
      * component/element.
      */
-    disabled?: boolean,
-|};
+    disabled?: boolean;
+};
 
-const Subtitle = ({subtitle, disabled}: SubtitleProps): React.Node => {
+const Subtitle: React.FC<SubtitleProps> = ({
+    subtitle,
+    disabled,
+}): React.ReactElement => {
     if (!subtitle) {
+        // @ts-expect-error [FEI-5019] - TS2322 - Type 'null' is not assignable to type 'ReactElement<any, string | JSXElementConstructor<any>>'.
         return null;
     }
 
@@ -37,23 +40,20 @@ const Subtitle = ({subtitle, disabled}: SubtitleProps): React.Node => {
     return subtitle;
 };
 
-type DetailCellProps = {|
-    ...CellProps,
-
+type DetailCellProps = CellProps & {
     /**
      * You can either provide a string or a custom node Typography element (or
      * nothing at all). Both a string or a custom node Typography element will
      * occupy the “Subtitle1” area of the Cell.
      */
-    subtitle1?: TypographyText,
-
+    subtitle1?: TypographyText;
     /**
      * You can either provide a string or a custom node Typography element (or
      * nothing at all). Both a string or a custom node Typography element will
      * occupy the “Subtitle2” area of the Cell.
      */
-    subtitle2?: TypographyText,
-|};
+    subtitle2?: TypographyText;
+};
 
 /**
  * This is a variant of CompactCell that allows adding subtitles, before and
@@ -76,7 +76,9 @@ type DetailCellProps = {|
  * />
  * ```
  */
-function DetailCell(props: DetailCellProps): React.Node {
+const DetailCell: React.FC<DetailCellProps> = function (
+    props,
+): React.ReactElement {
     const {title, subtitle1, subtitle2, ...coreProps} = props;
 
     return (
@@ -93,7 +95,7 @@ function DetailCell(props: DetailCellProps): React.Node {
             <Subtitle subtitle={subtitle2} disabled={coreProps.disabled} />
         </CellCore>
     );
-}
+};
 
 const styles = StyleSheet.create({
     subtitle: {