@openedx/paragon 22.0.0-alpha.23 → 22.0.0

package/src/ValidationFormGroup/index.jsx

@@ -0,0 +1,114 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import Input from '../Input';
+import { FormControl } from '../Form';
+
+const propTypes = {
+  /** Id of the form input that the validation is for */
+  for: PropTypes.string.isRequired,
+  /** Additional classnames for this component */
+  className: PropTypes.string,
+  /** Determines if invalid styles / message will be shown */
+  invalid: PropTypes.bool,
+  /** Determines if invalid styles / message will be shown */
+  valid: PropTypes.bool,
+  /** Message to display on valid input */
+  validMessage: PropTypes.node,
+  /** Message to display on invalid input */
+  invalidMessage: PropTypes.node,
+  /** Help text for the form input */
+  helpText: PropTypes.node,
+  /** Specifies contents of the component. */
+  children: PropTypes.node,
+};
+
+const defaultProps = {
+  invalid: undefined,
+  valid: undefined,
+  validMessage: undefined,
+  invalidMessage: undefined,
+  helpText: undefined,
+  children: undefined,
+  className: undefined,
+};
+
+function ValidationFormGroup(props) {
+  const {
+    className,
+    invalidMessage,
+    invalid,
+    valid,
+    validMessage,
+    helpText,
+    for: id,
+    children,
+  } = props;
+
+  const renderChildren = () => React.Children.map(children, (child) => {
+    // Any non-user input element should pass through unmodified
+    if (['input', 'textarea', 'select', Input, FormControl].indexOf(child.type) === -1) { return child; }
+
+    // Add validation class names and describedby values to input element
+    return React.cloneElement(child, {
+      className: classNames(child.props.className, {
+        'is-invalid': invalid,
+        'is-valid': valid,
+      }),
+      // This is a non-standard use of the classNames package, but it's exactly the same use case.
+      'aria-describedby': classNames(child.props['aria-describedby'], {
+        [`${id}-help-text`]: Boolean(helpText),
+        [`${id}-invalid-feedback`]: invalid && invalidMessage,
+        [`${id}-valid-feedback`]: valid && validMessage,
+      }),
+    });
+  });
+
+  const renderHelpText = (text) => {
+    if (!text) { return null; }
+    return <small id={`${id}-help-text`} className="form-text text-muted">{text}</small>;
+  };
+
+  /**
+   * The red text conveys semantic emphasis using color and font weight. For WCAG 2.1, the
+   * semantics need to be exposed programmatically as well. To do this, we use <strong/>
+   * elements and attach the formatting classes to them.
+   */
+  const renderInvalidFeedback = (message) => {
+    if (!message) { return null; }
+    return (
+      <strong
+        id={`${id}-invalid-feedback`}
+        className="invalid-feedback"
+      >
+        {message}
+      </strong>
+    );
+  };
+
+  const renderValidFeedback = (message) => {
+    if (!message) { return null; }
+    return (
+      <div
+        className="valid-feedback"
+        id={`${id}-valid-feedback`}
+      >
+        {message}
+      </div>
+    );
+  };
+
+  return (
+    <div className={classNames('form-group', className)} data-testid="validation-form-group">
+      {renderChildren()}
+      {renderHelpText(helpText)}
+      {renderInvalidFeedback(invalidMessage)}
+      {renderValidFeedback(validMessage)}
+    </div>
+  );
+}
+
+ValidationFormGroup.propTypes = propTypes;
+ValidationFormGroup.defaultProps = defaultProps;
+
+export default ValidationFormGroup;

package/src/ValidationMessage/index.scss

@@ -1,5 +1,5 @@
 .form-control.is-invalid ~ .invalid-feedback-nodanger {
-  color: var(--pgn-color-body-base);
+  color: $body-color;
 }
 
 .fa-icon-spacing {

package/src/hooks/tests/useIndexOfLastVisibleChild.test.jsx

@@ -12,12 +12,12 @@ window.ResizeObserver = window.ResizeObserver
   }));
 
 function TestComponent() {
-  const containerElementRef = React.useRef(null);
+  const [containerElementRef, setContainerElementRef] = React.useState(null);
   const overflowElementRef = React.useRef(null);
-  const indexOfLastVisibleChild = useIndexOfLastVisibleChild(containerElementRef.current, overflowElementRef.current);
+  const indexOfLastVisibleChild = useIndexOfLastVisibleChild(containerElementRef, overflowElementRef.current);
 
   return (
-    <div ref={containerElementRef} style={{ display: 'flex' }}>
+    <div ref={setContainerElementRef} style={{ display: 'flex' }}>
       <div style={{ width: '250px' }} className="element">Element 1</div>
       <div style={{ width: '250px' }} className="element">Element 2</div>
       <div style={{ width: '250px' }} className="element">Element 3</div>

package/src/hooks/useIndexOfLastVisibleChild.jsx

@@ -1,7 +1,5 @@
 import { useLayoutEffect, useState } from 'react';
 
-import useWindowSize from './useWindowSize';
-
 /**
  * This hook will find the index of the last child of a containing element
  * that fits within its bounding rectangle. This is done by summing the widths
@@ -10,48 +8,48 @@ import useWindowSize from './useWindowSize';
  * @param {Element} containerElementRef - container element
  * @param {Element} overflowElementRef - overflow element
  *
- * The hook returns an array containing:
- * [indexOfLastVisibleChild, containerElementRef, overflowElementRef]
- *
- * indexOfLastVisibleChild - the index of the last visible child
- * containerElementRef - a ref to be added to the containing html node
- * overflowElementRef - a ref to be added to an html node inside the container
- *    that is likely to be used to contain a "More" type dropdown or other
- *    mechanism to reveal hidden children. The width of this element is always
- *    included when determining which children will fit or not. Usage of this ref
- *    is optional.
+ * The hook returns the index of the last visible child.
  */
 const useIndexOfLastVisibleChild = (containerElementRef, overflowElementRef) => {
   const [indexOfLastVisibleChild, setIndexOfLastVisibleChild] = useState(-1);
-  const windowSize = useWindowSize();
 
   useLayoutEffect(() => {
-    if (!containerElementRef) {
-      return;
+    function updateLastVisibleChildIndex() {
+      // Get array of child nodes from NodeList form
+      const childNodesArr = Array.prototype.slice.call(containerElementRef.children);
+      const { nextIndexOfLastVisibleChild } = childNodesArr
+        // filter out the overflow element
+        .filter(childNode => childNode !== overflowElementRef)
+        // sum the widths to find the last visible element's index
+        .reduce((acc, childNode, index) => {
+          acc.sumWidth += childNode.getBoundingClientRect().width;
+          if (acc.sumWidth <= containerElementRef.getBoundingClientRect().width) {
+            acc.nextIndexOfLastVisibleChild = index;
+          }
+          return acc;
+        }, {
+          // Include the overflow element's width to begin with. Doing this means
+          // sometimes we'll show a dropdown with one item in it when it would fit,
+          // but allowing this case dramatically simplifies the calculations we need
+          // to do above.
+          sumWidth: overflowElementRef ? overflowElementRef.getBoundingClientRect().width : 0,
+          nextIndexOfLastVisibleChild: -1,
+        });
+
+      setIndexOfLastVisibleChild(nextIndexOfLastVisibleChild);
+    }
+
+    if (containerElementRef) {
+      updateLastVisibleChildIndex();
+
+      const resizeObserver = new ResizeObserver(() => updateLastVisibleChildIndex());
+      resizeObserver.observe(containerElementRef);
+
+      return () => resizeObserver.disconnect();
     }
-    // Get array of child nodes from NodeList form
-    const childNodesArr = Array.prototype.slice.call(containerElementRef.children);
-    const { nextIndexOfLastVisibleChild } = childNodesArr
-      // filter out the overflow element
-      .filter(childNode => childNode !== overflowElementRef)
-      // sum the widths to find the last visible element's index
-      .reduce((acc, childNode, index) => {
-        acc.sumWidth += childNode.getBoundingClientRect().width;
-        if (acc.sumWidth <= containerElementRef.getBoundingClientRect().width) {
-          acc.nextIndexOfLastVisibleChild = index;
-        }
-        return acc;
-      }, {
-        // Include the overflow element's width to begin with. Doing this means
-        // sometimes we'll show a dropdown with one item in it when it would fit,
-        // but allowing this case dramatically simplifies the calculations we need
-        // to do above.
-        sumWidth: overflowElementRef ? overflowElementRef.getBoundingClientRect().width : 0,
-        nextIndexOfLastVisibleChild: -1,
-      });
-
-    setIndexOfLastVisibleChild(nextIndexOfLastVisibleChild);
-  }, [windowSize, containerElementRef, overflowElementRef]);
+
+    return undefined;
+  }, [containerElementRef, overflowElementRef]);
 
   return indexOfLastVisibleChild;
 };

package/src/hooks/useIndexOfLastVisibleChild.mdx

@@ -25,10 +25,10 @@ of the children until they exceed the width of the container.
     pointerEvents: 'none',
     visibility: 'hidden',
   };
-  const containerElementRef = React.useRef(null);
+  const [containerElementRef, setContainerElementRef] = React.useState(null);
   const overflowElementRef = React.useRef(null);
   const indexOfLastVisibleChild = useIndexOfLastVisibleChild(
-    containerElementRef.current,
+    containerElementRef,
     overflowElementRef.current,
   );
   const elements = ['Element 1', 'Element 2', 'Element 3', 'Element 4', 'Element 5', 'Element 6', 'Element 7'];
@@ -71,7 +71,7 @@ of the children until they exceed the width of the container.
   }, [indexOfLastVisibleChild]);
 
   return (
-    <div className="d-flex" ref={containerElementRef}>
+    <div className="d-flex" ref={setContainerElementRef}>
       {children}
     </div>
   )

package/src/i18n/messages/ar.json

@@ -28,5 +28,6 @@
   "pgn.FormAutosuggest.iconButtonClosed": "إغلاق قائمة الخيارات",
   "pgn.FormAutosuggest.iconButtonOpened": "فتح قائمة الخيارات",
   "pgn.Toast.closeLabel": "إغلاق ",
-  "pgn.ProductTour.Checkpoint.position-text": "Top of step {step}"
+  "pgn.ProductTour.Checkpoint.top-position-text": "Top of step {step}",
+  "pgn.ProductTour.Checkpoint.bottom-position-text": "Bottom of step {step}"
 }

package/src/i18n/messages/ca.json

@@ -28,5 +28,6 @@
   "pgn.FormAutosuggest.iconButtonClosed": "Close the options menu",
   "pgn.FormAutosuggest.iconButtonOpened": "Open the options menu",
   "pgn.Toast.closeLabel": "Close",
-  "pgn.ProductTour.Checkpoint.position-text": "Top of step {step}"
+  "pgn.ProductTour.Checkpoint.top-position-text": "Top of step {step}",
+  "pgn.ProductTour.Checkpoint.bottom-position-text": "Bottom of step {step}"
 }

package/src/i18n/messages/es_419.json

@@ -28,5 +28,6 @@
   "pgn.FormAutosuggest.iconButtonClosed": "Cerrar el menú de opciones",
   "pgn.FormAutosuggest.iconButtonOpened": "Abre el menú de opciones",
   "pgn.Toast.closeLabel": "Cerrar",
-  "pgn.ProductTour.Checkpoint.position-text": "Top of step {step}"
+  "pgn.ProductTour.Checkpoint.top-position-text": "Top of step {step}",
+  "pgn.ProductTour.Checkpoint.bottom-position-text": "Bottom of step {step}"
 }

package/src/i18n/messages/es_AR.json

@@ -28,5 +28,6 @@
   "pgn.FormAutosuggest.iconButtonClosed": "Cerrar el menú de opciones",
   "pgn.FormAutosuggest.iconButtonOpened": "Abre el menú de opciones",
   "pgn.Toast.closeLabel": "Cerrar",
-  "pgn.ProductTour.Checkpoint.position-text": "Top of step {step}"
+  "pgn.ProductTour.Checkpoint.top-position-text": "Top of step {step}",
+  "pgn.ProductTour.Checkpoint.bottom-position-text": "Bottom of step {step}"
 }

package/src/i18n/messages/es_ES.json

@@ -28,5 +28,6 @@
   "pgn.FormAutosuggest.iconButtonClosed": "Cerrar el menú de opciones",
   "pgn.FormAutosuggest.iconButtonOpened": "Abre el menú de opciones",
   "pgn.Toast.closeLabel": "Cerrar",
-  "pgn.ProductTour.Checkpoint.position-text": "Top of step {step}"
+  "pgn.ProductTour.Checkpoint.top-position-text": "Top of step {step}",
+  "pgn.ProductTour.Checkpoint.bottom-position-text": "Bottom of step {step}"
 }

package/src/i18n/messages/fr.json

@@ -28,5 +28,6 @@
   "pgn.FormAutosuggest.iconButtonClosed": "Close the options menu",
   "pgn.FormAutosuggest.iconButtonOpened": "Open the options menu",
   "pgn.Toast.closeLabel": "Close",
-  "pgn.ProductTour.Checkpoint.position-text": "Top of step {step}"
+  "pgn.ProductTour.Checkpoint.top-position-text": "Top of step {step}",
+  "pgn.ProductTour.Checkpoint.bottom-position-text": "Bottom of step {step}"
 }

package/src/i18n/messages/he.json

@@ -28,5 +28,6 @@
   "pgn.FormAutosuggest.iconButtonClosed": "Close the options menu",
   "pgn.FormAutosuggest.iconButtonOpened": "Open the options menu",
   "pgn.Toast.closeLabel": "Close",
-  "pgn.ProductTour.Checkpoint.position-text": "Top of step {step}"
+  "pgn.ProductTour.Checkpoint.top-position-text": "Top of step {step}",
+  "pgn.ProductTour.Checkpoint.bottom-position-text": "Bottom of step {step}"
 }

package/src/i18n/messages/id.json

@@ -28,5 +28,6 @@
   "pgn.FormAutosuggest.iconButtonClosed": "Close the options menu",
   "pgn.FormAutosuggest.iconButtonOpened": "Open the options menu",
   "pgn.Toast.closeLabel": "Close",
-  "pgn.ProductTour.Checkpoint.position-text": "Top of step {step}"
+  "pgn.ProductTour.Checkpoint.top-position-text": "Top of step {step}",
+  "pgn.ProductTour.Checkpoint.bottom-position-text": "Bottom of step {step}"
 }

package/src/i18n/messages/it_IT.json

@@ -28,5 +28,6 @@
   "pgn.FormAutosuggest.iconButtonClosed": "Close the options menu",
   "pgn.FormAutosuggest.iconButtonOpened": "Open the options menu",
   "pgn.Toast.closeLabel": "Chiudi",
-  "pgn.ProductTour.Checkpoint.position-text": "Top of step {step}"
+  "pgn.ProductTour.Checkpoint.top-position-text": "Top of step {step}",
+  "pgn.ProductTour.Checkpoint.bottom-position-text": "Bottom of step {step}"
 }

package/src/i18n/messages/ko_KR.json

@@ -28,5 +28,6 @@
   "pgn.FormAutosuggest.iconButtonClosed": "Close the options menu",
   "pgn.FormAutosuggest.iconButtonOpened": "Open the options menu",
   "pgn.Toast.closeLabel": "Close",
-  "pgn.ProductTour.Checkpoint.position-text": "Top of step {step}"
+  "pgn.ProductTour.Checkpoint.top-position-text": "Top of step {step}",
+  "pgn.ProductTour.Checkpoint.bottom-position-text": "Bottom of step {step}"
 }

package/src/i18n/messages/pl.json

@@ -28,5 +28,6 @@
   "pgn.FormAutosuggest.iconButtonClosed": "Close the options menu",
   "pgn.FormAutosuggest.iconButtonOpened": "Open the options menu",
   "pgn.Toast.closeLabel": "Zamknij",
-  "pgn.ProductTour.Checkpoint.position-text": "Top of step {step}"
+  "pgn.ProductTour.Checkpoint.top-position-text": "Top of step {step}",
+  "pgn.ProductTour.Checkpoint.bottom-position-text": "Bottom of step {step}"
 }

package/src/i18n/messages/pt_BR.json

@@ -28,5 +28,6 @@
   "pgn.FormAutosuggest.iconButtonClosed": "Close the options menu",
   "pgn.FormAutosuggest.iconButtonOpened": "Open the options menu",
   "pgn.Toast.closeLabel": "Close",
-  "pgn.ProductTour.Checkpoint.position-text": "Top of step {step}"
+  "pgn.ProductTour.Checkpoint.top-position-text": "Top of step {step}",
+  "pgn.ProductTour.Checkpoint.bottom-position-text": "Bottom of step {step}"
 }

package/src/i18n/messages/pt_PT.json

@@ -28,5 +28,6 @@
   "pgn.FormAutosuggest.iconButtonClosed": "Fechar o menu de opções",
   "pgn.FormAutosuggest.iconButtonOpened": "Abrir o menu de opções",
   "pgn.Toast.closeLabel": "Fechar",
-  "pgn.ProductTour.Checkpoint.position-text": "Top of step {step}"
+  "pgn.ProductTour.Checkpoint.top-position-text": "Top of step {step}",
+  "pgn.ProductTour.Checkpoint.bottom-position-text": "Bottom of step {step}"
 }

package/src/i18n/messages/ru.json

@@ -28,5 +28,6 @@
   "pgn.FormAutosuggest.iconButtonClosed": "Close the options menu",
   "pgn.FormAutosuggest.iconButtonOpened": "Open the options menu",
   "pgn.Toast.closeLabel": "Close",
-  "pgn.ProductTour.Checkpoint.position-text": "Top of step {step}"
+  "pgn.ProductTour.Checkpoint.top-position-text": "Top of step {step}",
+  "pgn.ProductTour.Checkpoint.bottom-position-text": "Bottom of step {step}"
 }

package/src/i18n/messages/th.json

@@ -28,5 +28,6 @@
   "pgn.FormAutosuggest.iconButtonClosed": "Close the options menu",
   "pgn.FormAutosuggest.iconButtonOpened": "Open the options menu",
   "pgn.Toast.closeLabel": "Close",
-  "pgn.ProductTour.Checkpoint.position-text": "Top of step {step}"
+  "pgn.ProductTour.Checkpoint.top-position-text": "Top of step {step}",
+  "pgn.ProductTour.Checkpoint.bottom-position-text": "Bottom of step {step}"
 }

package/src/i18n/messages/tr_TR.json

@@ -28,5 +28,6 @@
   "pgn.FormAutosuggest.iconButtonClosed": "Seçenekler menüsünü kapat",
   "pgn.FormAutosuggest.iconButtonOpened": "Seçenekler menüsünü aç",
   "pgn.Toast.closeLabel": "Kapat",
-  "pgn.ProductTour.Checkpoint.position-text": "Top of step {step}"
+  "pgn.ProductTour.Checkpoint.top-position-text": "Top of step {step}",
+  "pgn.ProductTour.Checkpoint.bottom-position-text": "Bottom of step {step}"
 }

package/src/i18n/messages/uk.json

@@ -28,5 +28,6 @@
   "pgn.FormAutosuggest.iconButtonClosed": "Close the options menu",
   "pgn.FormAutosuggest.iconButtonOpened": "Open the options menu",
   "pgn.Toast.closeLabel": "Close",
-  "pgn.ProductTour.Checkpoint.position-text": "Top of step {step}"
+  "pgn.ProductTour.Checkpoint.top-position-text": "Top of step {step}",
+  "pgn.ProductTour.Checkpoint.bottom-position-text": "Bottom of step {step}"
 }

package/src/i18n/messages/zh_CN.json

@@ -28,5 +28,6 @@
   "pgn.FormAutosuggest.iconButtonClosed": "Close the options menu",
   "pgn.FormAutosuggest.iconButtonOpened": "Open the options menu",
   "pgn.Toast.closeLabel": "Close",
-  "pgn.ProductTour.Checkpoint.position-text": "Top of step {step}"
+  "pgn.ProductTour.Checkpoint.top-position-text": "Top of step {step}",
+  "pgn.ProductTour.Checkpoint.bottom-position-text": "Bottom of step {step}"
 }

package/src/index.js

@@ -20,6 +20,8 @@ export {
 export {
   default as Carousel, CarouselItem, CAROUSEL_NEXT_LABEL_TEXT, CAROUSEL_PREV_LABEL_TEXT,
 } from './Carousel';
+export { default as CheckBox } from './CheckBox';
+export { default as CheckBoxGroup } from './CheckBoxGroup';
 export { default as Chip, CHIP_PGN_CLASS } from './Chip';
 export { default as ChipCarousel } from './ChipCarousel';
 export { default as CloseButton } from './CloseButton';
@@ -35,6 +37,7 @@ export {
   SplitButton,
 } from './Dropdown';
 export { default as Fade } from './Fade';
+export { default as Fieldset } from './Fieldset';
 export {
   default as Form,
   RadioControl,
@@ -61,12 +64,18 @@ export { default as Hyperlink, HYPER_LINK_EXTERNAL_LINK_ALT_TEXT, HYPER_LINK_EXT
 export { default as Icon } from './Icon';
 export { default as IconButton, IconButtonWithTooltip } from './IconButton';
 export { default as IconButtonToggle } from './IconButtonToggle';
+export { default as Input } from './Input';
+export { default as InputSelect } from './InputSelect';
+export { default as InputText } from './InputText';
 export { default as Image, Figure } from './Image';
+export { default as ListBox } from './ListBox';
+export { default as ListBoxOption } from './ListBoxOption';
 export { default as MailtoLink, MAIL_TO_LINK_EXTERNAL_LINK_ALTERNATIVE_TEXT, MAIL_TO_LINK_EXTERNAL_LINK_TITLE } from './MailtoLink';
 export { default as Media } from './Media';
 export { default as Menu } from './Menu';
 export { default as MenuItem } from './Menu/MenuItem';
 export { default as SelectMenu, SELECT_MENU_DEFAULT_MESSAGE } from './Menu/SelectMenu';
+export { default as Modal } from './Modal';
 export { default as ModalCloseButton } from './Modal/ModalCloseButton';
 export { default as FullscreenModal, FULLSCREEN_MODAL_CLOSE_LABEL } from './Modal/FullscreenModal';
 export { default as MarketingModal } from './Modal/MarketingModal';
@@ -101,6 +110,7 @@ export {
 export { default as Popover, PopoverTitle, PopoverContent } from './Popover';
 export { default as ProgressBar } from './ProgressBar';
 export { default as ProductTour } from './ProductTour';
+export { default as RadioButtonGroup, RadioButton } from './RadioButtonGroup';
 export { default as ResponsiveEmbed } from './ResponsiveEmbed';
 export {
   default as SearchField,
@@ -113,6 +123,8 @@ export { default as Sheet } from './Sheet';
 export { default as Spinner } from './Spinner';
 export { default as Stepper } from './Stepper';
 export { default as StatefulButton } from './StatefulButton';
+export { default as StatusAlert } from './StatusAlert';
+export { default as Table } from './Table';
 export {
   default as Tabs,
   Tab,
@@ -120,8 +132,10 @@ export {
   TabContent,
   TabPane,
 } from './Tabs';
+export { default as TextArea } from './TextArea';
 export { default as Toast, TOAST_CLOSE_LABEL_TEXT, TOAST_DELAY } from './Toast';
 export { default as Tooltip } from './Tooltip';
+export { default as ValidationFormGroup } from './ValidationFormGroup';
 export { default as TransitionReplace } from './TransitionReplace';
 export { default as ValidationMessage } from './ValidationMessage';
 export { default as DataTable } from './DataTable';

package/src/index.scss

@@ -14,6 +14,7 @@
 @import "./ChipCarousel";
 @import "./Code";
 @import "./Dropdown";
+@import "./Fieldset";
 @import "./Figure";
 @import "./Form";
 @import "./Hyperlink";
@@ -28,6 +29,7 @@
 @import "./Pagination";
 @import "./Popover";
 @import "./ProgressBar";
+@import "./OverflowScroll";
 @import "./SearchField";
 @import "./Scrollable";
 @import "./Sheet";
@@ -35,10 +37,12 @@
 @import "./Spinner";
 @import "./Stepper";
 @import "./StatefulButton";
+@import "./Table";
 @import "./Tooltip";
 @import "./DataTable";
 @import "./TransitionReplace";
 @import "./ValidationMessage";
+@import "./Tabs/deprecated/Tabs";
 @import "./IconButton";
 @import "./IconButtonToggle";
 @import "./Toast";

package/src/utils/breakpoints.js

@@ -1,4 +1,4 @@
-import breakpointSizes from '../../styles/scss/core/_exports.module.scss';
+import breakpointSizes from '../../scss/core/_exports.module.scss';
 
 const {
   sm, md, lg, xl, xxl,

package/src/utils/propTypes/utils.js

@@ -22,6 +22,16 @@ export const customPropTypeRequirement = (targetType, conditionFn, filterString)
   }
 );
 
+/**
+ * Checks if all specified properties are defined in the `props` object.
+ *
+ * @param {Object} props - The object in which the properties are checked.
+ * @param {string[]} otherPropNames - An array of strings representing the property names to be checked.
+ * @returns {boolean} `true` if all properties are defined and not equal to `undefined`, `false` otherwise.
+ */
+export const isEveryPropDefined = (props, otherPropNames) => otherPropNames
+  .every(propName => props[propName] !== undefined);
+
 /**
  * Returns a PropType entry with the given propType that is required if otherPropName
  * is truthy.
@@ -34,8 +44,13 @@ export const customPropTypeRequirement = (targetType, conditionFn, filterString)
 export const requiredWhen = (propType, otherPropName) => (
   customPropTypeRequirement(
     propType,
-    (props) => props[otherPropName] === true,
-    `${otherPropName} is truthy`,
+    (props) => {
+      if (Array.isArray(otherPropName)) {
+        return isEveryPropDefined(props, otherPropName);
+      }
+      return props[otherPropName] === true;
+    },
+    `${otherPropName} ${Array.isArray(otherPropName) ? 'are defined' : 'is truthy'}`,
   )
 );
 

package/dist/Annotation/_mixins.scss

@@ -1,104 +0,0 @@
-@mixin annotation-triangle($triangle-color, $triangle-direction) {
-  content: "";
-  height: 0;
-  width: 0;
-  position: absolute;
-  border: solid transparent;
-
-  @if $triangle-direction == top {
-    border-bottom-color: $triangle-color;
-    border-width: 0 var(--pgn-size-annotation-arrow-border-width) var(--pgn-size-annotation-arrow-border-width);
-    right: 0;
-    left: 0;
-    top: calc(var(--pgn-size-annotation-arrow-border-width) * -1);
-    margin: 0 auto;
-  }
-
-  @else if $triangle-direction == right {
-    border-left-color: $triangle-color;
-    border-width:
-      var(--pgn-size-annotation-arrow-border-width) 0 var(--pgn-size-annotation-arrow-border-width)
-      var(--pgn-size-annotation-arrow-border-width);
-    top: 0;
-    bottom: 0;
-    right: calc(var(--pgn-size-annotation-arrow-border-width) * -1);
-    margin: auto 0;
-  }
-
-  @else if $triangle-direction == bottom {
-    border-top-color: $triangle-color;
-    border-width: var(--pgn-size-annotation-arrow-border-width) var(--pgn-size-annotation-arrow-border-width) 0;
-    right: 0;
-    left: 0;
-    bottom: calc(var(--pgn-size-annotation-arrow-border-width) * -1);
-    margin: 0 auto;
-  }
-
-  @else if $triangle-direction == left {
-    border-right-color: $triangle-color;
-    border-width:
-      var(--pgn-size-annotation-arrow-border-width) var(--pgn-size-annotation-arrow-border-width)
-      var(--pgn-size-annotation-arrow-border-width) 0;
-    top: 0;
-    bottom: 0;
-    left: calc(var(--pgn-size-annotation-arrow-border-width) * -1);
-    margin: auto 0;
-  }
-
-  @else {
-    @error "Unknown direction #{$triangle-direction}.";
-  }
-}
-
-@mixin annotation-variant($bg-color, $text-color, $direction) {
-  background-color: $bg-color;
-  color: $text-color;
-
-  // set additional margin to arrow side of the Annotation
-  margin-#{$direction}:
-    calc(
-      var(--pgn-size-annotation-arrow-border-width) + var(--pgn-spacing-annotation-arrow-side-margin)
-    );
-
-  [dir="rtl"] & {
-    @if $direction == left {
-      margin-left: 0;
-      margin-right:
-        calc(
-          var(--pgn-size-annotation-arrow-border-width) + var(--pgn-spacing-annotation-arrow-side-margin)
-        );
-    }
-
-    @else if $direction == right {
-      margin-right: 0;
-      margin-left:
-        calc(
-          var(--pgn-size-annotation-arrow-border-width) + var(--pgn-spacing-annotation-arrow-side-margin)
-        );
-    }
-  }
-
-  &::after {
-    @include annotation-triangle($bg-color, $direction);
-
-    [dir="rtl"] & {
-      @if $direction == left {
-        left: initial;
-        right: calc(var(--pgn-size-annotation-arrow-border-width) * -1);
-        border-width:
-          var(--pgn-size-annotation-arrow-border-width) 0 var(--pgn-size-annotation-arrow-border-width)
-          var(--pgn-size-annotation-arrow-border-width);
-        border-left-color: $bg-color;
-      }
-
-      @else if $direction == right {
-        right: initial;
-        left: calc(var(--pgn-size-annotation-arrow-border-width) * -1);
-        border-width:
-          var(--pgn-size-annotation-arrow-border-width) var(--pgn-size-annotation-arrow-border-width)
-          var(--pgn-size-annotation-arrow-border-width) 0;
-        border-right-color: $bg-color;
-      }
-    }
-  }
-}