@openedx/paragon 21.7.1 → 22.0.0-alpha.16

package/dist/Carousel/index.scss

@@ -1,2 +1,168 @@
-@import "variables";
-@import "~bootstrap/scss/carousel";
+.carousel {
+  position: relative;
+}
+
+.carousel.pointer-event {
+  touch-action: pan-y;
+}
+
+.carousel-inner {
+  position: relative;
+  width: 100%;
+  overflow: hidden;
+
+  @include clearfix();
+}
+
+.carousel-item {
+  position: relative;
+  display: none;
+  float: left;
+  width: 100%;
+  margin-right: -100%;
+  backface-visibility: hidden;
+  transition: var(--pgn-transition-carousel-base);
+}
+
+.carousel-item.active,
+.carousel-item-next,
+.carousel-item-prev {
+  display: block;
+}
+
+.carousel-item-next:not(.carousel-item-left),
+.active.carousel-item-right {
+  transform: translateX(100%);
+}
+
+.carousel-item-prev:not(.carousel-item-right),
+.active.carousel-item-left {
+  transform: translateX(-100%);
+}
+
+.carousel-fade {
+  .carousel-item {
+    opacity: 0;
+    transition-property: opacity;
+    transform: none;
+  }
+
+  .carousel-item.active,
+  .carousel-item-next.carousel-item-left,
+  .carousel-item-prev.carousel-item-right {
+    z-index: 1;
+    opacity: 1;
+  }
+
+  .active.carousel-item-left,
+  .active.carousel-item-right {
+    z-index: 0;
+    opacity: 0;
+    transition: opacity 0s var(--pgn-transition-carousel-base);
+  }
+}
+
+.carousel-control-prev,
+.carousel-control-next {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--pgn-size-carousel-control-width-base);
+  padding: 0;
+  color: var(--pgn-color-carousel-control-base);
+  text-align: center;
+  background: none;
+  border: 0;
+  opacity: var(--pgn-other-carousel-control-opacity-base);
+  transition: var(--pgn-transition-carousel-control);
+
+  @include hover-focus() {
+    color: var(--pgn-carousel-control-color);
+    text-decoration: none;
+    outline: 0;
+    opacity: var(--pgn-other-carousel-control-opacity-hover);
+  }
+}
+
+.carousel-control-prev {
+  left: 0;
+
+  @if $enable-gradients {
+    background-image: linear-gradient(90deg, rgba(var(--pgn-color-black), .25), rgba(var(--pgn-color-black), .001));
+  }
+}
+
+.carousel-control-next {
+  right: 0;
+
+  @if $enable-gradients {
+    background-image: linear-gradient(270deg, rgba(var(--pgn-color-black), .25), rgba(var(--pgn-color-black), .001));
+  }
+}
+
+.carousel-control-prev-icon,
+.carousel-control-next-icon {
+  display: inline-block;
+  width: var(--pgn-size-carousel-control-width-icon);
+  height: var(--pgn-size-carousel-control-width-icon);
+  background: 50% / 100% 100% no-repeat;
+}
+
+.carousel-control-prev-icon {
+  background-image: var(--pgn-content-carousel-control-bg-prev-icon);
+}
+
+.carousel-control-next-icon {
+  background-image: var(--pgn-content-carousel-control-bg-next-icon);
+}
+
+.carousel-indicators {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 15;
+  display: flex;
+  justify-content: center;
+  padding-left: 0;
+  margin-right: var(--pgn-size-carousel-control-width-base);
+  margin-left: var(--pgn-size-carousel-control-width-base);
+  list-style: none;
+
+  li {
+    box-sizing: content-box;
+    flex: 0 1 auto;
+    width: var(--pgn-size-carousel-indicator-width);
+    height: var(--pgn-size-carousel-indicator-height-base);
+    margin-right: var(--pgn-spacing-carousel-indicator-spacer);
+    margin-left: var(--pgn-spacing-carousel-indicator-spacer);
+    text-indent: -999px;
+    cursor: pointer;
+    background-color: var(--pgn-color-carousel-indicator-active-bg);
+    background-clip: padding-box;
+    border-top: var(--pgn-size-carousel-indicator-height-area-hit) solid transparent;
+    border-bottom: var(--pgn-size-carousel-indicator-height-area-hit) solid transparent;
+    opacity: .5;
+    transition: var(--pgn-transition-carousel-indicator);
+  }
+
+  .active {
+    opacity: 1;
+  }
+}
+
+.carousel-caption {
+  position: absolute;
+  right: calc((calc(100% - var(--pgn-size-carousel-caption-width))) * .5);
+  bottom: 20px;
+  left: calc((calc(100% - var(--pgn-size-carousel-caption-width))) * .5);
+  z-index: 10;
+  padding-top: 20px;
+  padding-bottom: 20px;
+  color: var(--pgn-color-carousel-caption);
+  text-align: center;
+}

package/dist/Chip/index.scss

@@ -1,15 +1,13 @@
-@import "variables";
-
 .pgn__chip {
-  background: $light-500;
-  border-radius: $chip-border-radius;
+  background: var(--pgn-chip-bg, var(--pgn-color-light-500));
+  border-radius: var(--pgn-size-chip-border-radius);
   display: inline-flex;
-  margin: $chip-margin;
+  margin: var(--pgn-spacing-chip-margin);
   box-sizing: border-box;
 
   .pgn__chip__label {
-    font-size: $font-size-sm;
-    padding: $chip-padding-y $chip-padding-x;
+    font-size: var(--pgn-typography-font-size-sm);
+    padding: var(--pgn-spacing-chip-padding-y) var(--pgn-spacing-chip-padding-x);
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
@@ -17,20 +15,20 @@
     cursor: default;
 
     &.p-before {
-      padding-left: $chip-padding-to-icon;
+      padding-left: var(--pgn-spacing-chip-padding-to-icon);
 
       [dir="rtl"] & {
-        padding-left: $chip-padding-x;
-        padding-right: $chip-padding-to-icon;
+        padding-left: var(--pgn-spacing-chip-padding-x);
+        padding-right: var(--pgn-spacing-chip-padding-to-icon);
       }
     }
 
     &.p-after {
-      padding-right: $chip-padding-to-icon;
+      padding-right: var(--pgn-spacing-chip-padding-to-icon);
 
       [dir="rtl"] & {
-        padding-right: $chip-padding-x;
-        padding-left: $chip-padding-to-icon;
+        padding-right: var(--pgn-spacing-chip-padding-x);
+        padding-left: var(--pgn-spacing-chip-padding-to-icon);
       }
     }
   }
@@ -39,59 +37,53 @@
   .pgn__chip__icon-after {
     align-items: center;
     display: flex;
-    padding-left: $chip-icon-padding;
-    padding-right: $chip-icon-padding;
+    padding-left: var(--pgn-spacing-chip-padding-icon);
+    padding-right: var(--pgn-spacing-chip-padding-icon);
     box-sizing: border-box;
     cursor: default;
 
     .pgn__icon {
-      width: $chip-icon-size;
-      height: $chip-icon-size;
+      width: var(--pgn-size-chip-icon);
+      height: var(--pgn-size-chip-icon);
     }
 
     &.active:hover,
     &.active:focus {
       cursor: pointer;
-      background: $black;
+      background: var(--pgn-color-black);
 
       * {
-        color: $white;
-        fill: $white;
+        color: var(--pgn-color-white);
+        fill: var(--pgn-color-white);
       }
     }
   }
 
   .pgn__chip__icon-before {
-    border-radius: $chip-border-radius 0 0 $chip-border-radius;
+    border-radius: var(--pgn-size-chip-border-radius) 0 0 var(--pgn-size-chip-border-radius);
 
     [dir="rtl"] & {
-      border-radius: 0 $chip-border-radius $chip-border-radius 0;
+      border-radius: 0 var(--pgn-size-chip-border-radius) var(--pgn-size-chip-border-radius) 0;
     }
   }
 
   .pgn__chip__icon-after {
-    border-radius: 0 $chip-border-radius $chip-border-radius 0;
+    border-radius: 0 var(--pgn-size-chip-border-radius) var(--pgn-size-chip-border-radius) 0;
 
     [dir="rtl"] & {
-      border-radius: $chip-border-radius 0 0 $chip-border-radius;
+      border-radius: var(--pgn-size-chip-border-radius) 0 0 var(--pgn-size-chip-border-radius);
     }
   }
 
-  @each $color, $styles in $chip-theme-variants {
-    &.pgn__chip-#{$color} {
-      background: map-get($styles, "background");
-
-      * {
-        color: map-get($styles, "color");
-        fill: map-get($styles, "color");
-      }
-    }
+  * {
+    color: var(--pgn-chip-color, inherit);
+    fill: var(--pgn-chip-color, inherit);
   }
 
   &.disabled,
   &:disabled {
     cursor: default;
-    opacity: $chip-disable-opacity;
+    opacity: var(--pgn-other-chip-opacity-disabled);
     pointer-events: none;
 
     &::before {
@@ -99,3 +91,13 @@
     }
   }
 }
+
+.pgn__chip-light {
+  --pgn-chip-color: var(--pgn-color-chip-text-light);
+  --pgn-chip-bg: var(--pgn-color-chip-bg-light);
+}
+
+.pgn__chip-dark {
+  --pgn-chip-color: var(--pgn-color-chip-text-dark);
+  --pgn-chip-bg: var(--pgn-color-chip-bg-dark);
+}

package/dist/ChipCarousel/index.scss

@@ -1,5 +1,3 @@
-@import "variables";
-
 .pgn__chip-carousel {
   position: relative;
 
@@ -19,7 +17,7 @@
   .pgn__chip-carousel__left-control {
     position: absolute;
     z-index: 2;
-    top: $chip-carousel-controls-top-offset;
+    top: calc(var(--pgn-spacing-chip-carousel-controls-top-offset) * -1);
   }
 
   .pgn__chip-carousel__right-control {

package/dist/CloseButton/index.scss

@@ -1,2 +1,31 @@
-@import "variables";
-@import "~bootstrap/scss/close";
+.close {
+  float: right;
+  font-weight: var(--pgn-typography-close-button-font-weight);
+  line-height: 1;
+  color: var(--pgn-color-close-button);
+  text-shadow: var(--pgn-elevation-close-button-text-shadow);
+  opacity: .5;
+
+  @include font-size(var(--pgn-typography-close-button-font-size));
+
+  @include hover() {
+    color: var(--pgn-color-close-button);
+    text-decoration: none;
+  }
+
+  &:not(:disabled):not(.disabled) {
+    @include hover-focus() {
+      opacity: .75;
+    }
+  }
+}
+
+button.close {
+  padding: 0;
+  background-color: transparent;
+  border: 0;
+}
+
+a.close.disabled {
+  pointer-events: none;
+}

package/dist/Code/index.scss

@@ -1,2 +1,47 @@
-@import "variables";
-@import "~bootstrap/scss/code";
+code {
+  color: var(--pgn-color-code-base);
+  word-wrap: break-word;
+
+  @include font-size(var(--pgn-typography-code-font-size));
+
+  a > & {
+    color: inherit;
+  }
+}
+
+kbd {
+  padding: var(--pgn-spacing-code-kbd-padding-y) var(--pgn-spacing-code-kbd-padding-x);
+  color: var(--pgn-color-code-kbd-base);
+  background-color: var(--pgn-color-code-kbd-bg);
+  box-shadow: var(--pgn-elevation-code-kbd-box-shadow);
+
+  @include font-size(var(--pgn-typography-code-kbd-font-size));
+  @include border-radius(var(--pgn-size-border-radius-sm));
+
+  kbd {
+    padding: 0;
+    font-weight: var(--pgn-typography-code-kbd-nested-font-weight);
+    box-shadow: none;
+
+    @include font-size(100%);
+  }
+}
+
+pre {
+  display: block;
+  color: var(--pgn-color-code-pre);
+
+  @include font-size(var(--pgn-typography-code-font-size));
+
+  code {
+    @include font-size(inherit);
+
+    color: inherit;
+    word-break: normal;
+  }
+}
+
+.pre-scrollable {
+  max-height: var(--pgn-size-code-pre-scrollable-max-height);
+  overflow-y: scroll;
+}

package/dist/Collapsible/index.scss

@@ -1,5 +1,3 @@
-@import "variables";
-
 .collapsible-card {
   // stylelint-disable-next-line
   @extend .card;
@@ -7,9 +5,9 @@
   border-radius: 0;
 
   .collapsible-trigger {
-    padding: $collapsible-card-spacer-y $collapsible-card-spacer-x;
-    border-radius: $card-inner-border-radius;
-    border-bottom: $card-border-width solid transparent;
+    padding: var(--pgn-spacing-collapsible-card-spacer-y-base) var(--pgn-spacing-collapsible-card-spacer-x-base);
+    border-radius: calc(var(--pgn-size-card-border-radius-base) - var(--pgn-size-card-border-width));
+    border-bottom: var(--pgn-size-card-border-width) solid transparent;
     transition: border-color 100ms ease 150ms;
     cursor: pointer;
     display: flex;
@@ -23,8 +21,10 @@
     }
 
     &[aria-expanded="true"] {
-      border-radius: $card-inner-border-radius $card-inner-border-radius 0 0;
-      border-color: $card-border-color;
+      border-radius:
+        calc(var(--pgn-size-card-border-radius-base) - var(--pgn-size-card-border-width))
+        calc(var(--pgn-size-card-border-radius-base) - var(--pgn-size-card-border-width)) 0 0;
+      border-color: var(--pgn-color-card-border-base);
       transition: none;
       text-align: start;
     }
@@ -34,8 +34,8 @@
     // stylelint-disable-next-line
     @extend .card-body;
 
-    padding: $collapsible-card-spacer-y $collapsible-card-spacer-x;
-    padding-left: $collapsible-card-body-spacer-left;
+    padding: var(--pgn-spacing-collapsible-card-spacer-y-base) var(--pgn-spacing-collapsible-card-spacer-x-base);
+    padding-left: var(--pgn-spacing-collapsible-card-spacer-left-body);
     text-align: start;
 
     & > *:last-child {
@@ -44,7 +44,7 @@
   }
 
   .collapsible-icon {
-    margin-inline-start: $collapsible-card-spacer-icon;
+    margin-inline-start: var(--pgn-spacing-collapsible-card-spacer-icon);
   }
 }
 
@@ -53,11 +53,11 @@
   @extend .collapsible-card;
 
   .collapsible-trigger {
-    padding: $collapsible-card-spacer-y-lg $collapsible-card-spacer-x-lg;
+    padding: var(--pgn-spacing-collapsible-card-spacer-y-lg) var(--pgn-spacing-collapsible-card-spacer-x-lg);
   }
 
   .collapsible-body {
-    padding: $collapsible-card-spacer-y-lg $collapsible-card-spacer-x-lg;
+    padding: var(--pgn-spacing-collapsible-card-spacer-y-lg) var(--pgn-spacing-collapsible-card-spacer-x-lg);
   }
 }
 
@@ -68,11 +68,11 @@
     align-items: center;
     text-decoration: underline;
     color: theme-color("primary", "default");
-    padding: $collapsible-basic-spacer-y $collapsible-basic-spacer-x;
+    padding: var(--pgn-spacing-collapsible-card-spacer-basic-y) var(--pgn-spacing-collapsible-card-spacer-basic-x);
   }
 
   .collapsible-body {
-    padding: $collapsible-basic-spacer-y $collapsible-basic-spacer-x;
+    padding: var(--pgn-spacing-collapsible-card-spacer-basic-y) var(--pgn-spacing-collapsible-card-spacer-basic-x);
     text-align: start;
 
     &.collapsing {
@@ -81,6 +81,6 @@
   }
 
   .collapsible-icon {
-    margin-left: $collapsible-basic-spacer-icon;
+    margin-left: var(--pgn-spacing-collapsible-card-spacer-basic-icon);
   }
 }

package/dist/ColorPicker/index.scss

@@ -1,7 +1,5 @@
-@import "variables";
-
 .pgn__color-picker {
-  box-shadow: 0 0 3px 1px $gray-300;
+  box-shadow: 0 0 3px 1px var(--pgn-color-gray-300);
   border: none;
   background:
     linear-gradient(to bottom right,
@@ -15,20 +13,20 @@
   );
 
   &.pgn__color-picker-sm {
-    height: $picker-size-sm;
-    width: $picker-size-sm;
+    height: var(--pgn-size-color-picker-sm);
+    width: var(--pgn-size-color-picker-sm);
   }
 
   &.pgn__color-picker-md {
-    height: $picker-size-md;
-    width: $picker-size-md;
+    height: var(--pgn-size-color-picker-md);
+    width: var(--pgn-size-color-picker-md);
   }
 }
 
 .pgn__color-modal {
-  background: $white;
+  background: var(--pgn-color-white);
   padding-bottom: .1rem;
-  margin-bottom: 1rem;
+  margin-bottom: var(--pgn-spacing-spacer-base);
 }
 
 .pgn__color-error {
@@ -39,7 +37,7 @@
 
 .pgn__hex-label {
   font-weight: bold;
-  font-size: $h5-mobile-font-size;
+  font-size: var(--pgn-typography-font-size-mobile-h5);
   padding: .5rem;
   margin-bottom: 0 !important;
 }
@@ -55,7 +53,7 @@
   }
 
   .pgn__hex-field {
-    @media (min-width: map-get($grid-breakpoints, "sm")) {
+    @media (--pgn-size-breakpoint-min-width-sm) {
       margin-inline-end: 0;
     }
   }

package/dist/DataTable/CollapsibleButtonGroup.js

@@ -77,11 +77,11 @@ function CollapsibleButtonGroup(_ref) {
     placement: "bottom-end",
     isOpen: isOverflowMenuOpen
   }, /*#__PURE__*/React.createElement("div", {
-    className: "pgn__datatable__overflow-actions-menu"
+    className: "pgn__data-table__overflow-actions-menu"
   }, /*#__PURE__*/React.createElement(Stack, {
     gap: 2
   }, dropdownActions.map(cloneAction))))), /*#__PURE__*/React.createElement("div", {
-    className: "pgn__datatable__visible-actions"
+    className: "pgn__data-table__visible-actions"
   }, visibleActions.map(cloneAction)));
 }
 CollapsibleButtonGroup.defaultProps = {

package/dist/DataTable/CollapsibleButtonGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"CollapsibleButtonGroup.js","names":["React","useContext","useMemo","useState","PropTypes","MoreVert","useToggle","useWindowSize","DataTableContext","Icon","IconButton","breakpoints","ModalPopup","Stack","Button","ACTION_OVERFLOW_BUTTON_TEXT","SMALL_SCREEN_ACTION_OVERFLOW_BUTTON_TEXT","CollapsibleButtonGroup","_ref","className","actions","rest","_objectWithoutProperties","_excluded","isOverflowMenuOpen","openOverflowMenu","closeOverflowMenu","overflowMenuTarget","setOverflowMenuTarget","controlledTableSelections","isEntireTableSelected","selectedFlatRows","rows","width","selectedRows","visibleActions","dropdownActions","small","minWidth","firstTwoActions","splice","extraActions","slice","reverse","cloneAction","action","index","cloneElement","component","_objectSpread","key","as","args","createElement","_extends","length","Fragment","variant","iconAs","src","alt","id","ref","onClick","positionRef","onClose","placement","isOpen","gap","map","defaultProps","propTypes","string","arrayOf","shape","oneOfType","func","element","isRequired"],"sources":["../../src/DataTable/CollapsibleButtonGroup.jsx"],"sourcesContent":["import React, { useContext, useMemo, useState } from 'react';\nimport PropTypes from 'prop-types';\n\nimport { MoreVert } from '../../icons';\nimport useToggle from '../hooks/useToggle';\nimport useWindowSize from '../hooks/useWindowSize';\nimport DataTableContext from './DataTableContext';\nimport Icon from '../Icon';\nimport IconButton from '../IconButton';\nimport breakpoints from '../utils/breakpoints';\nimport ModalPopup from '../Modal/ModalPopup';\nimport Stack from '../Stack';\nimport Button from '../Button';\n\nexport const ACTION_OVERFLOW_BUTTON_TEXT = 'More actions';\nexport const SMALL_SCREEN_ACTION_OVERFLOW_BUTTON_TEXT = 'Actions';\n\nfunction CollapsibleButtonGroup({\n  className,\n  actions,\n  ...rest\n}) {\n  const [isOverflowMenuOpen, openOverflowMenu, closeOverflowMenu] = useToggle(false);\n  const [overflowMenuTarget, setOverflowMenuTarget] = useState(null);\n  const {\n    controlledTableSelections: [{ isEntireTableSelected }],\n    selectedFlatRows,\n    rows,\n  } = useContext(DataTableContext);\n  const { width } = useWindowSize();\n  const selectedRows = selectedFlatRows || rows;\n\n  const [visibleActions, dropdownActions] = useMemo(() => {\n    if (width < breakpoints.small.minWidth) {\n      // On a small screen, all actions will be in the overflow menu\n      return [[], [...actions]];\n    }\n    // The first two actions will be displayed as buttons, the rest will go in an overflow menu\n    const firstTwoActions = [...actions].splice(0, 2);\n    const extraActions = [...actions].slice(2);\n\n    /*  Reversing the array because to the user it makes sense to put the primary button first,\n        but we want it on the right */\n    return [firstTwoActions.reverse(), extraActions];\n  }, [actions, width]);\n\n  if (!isEntireTableSelected && !selectedRows) {\n    return null;\n  }\n\n  const cloneAction = (action, index) => React.cloneElement(\n    action.component,\n    {\n      // eslint-disable-next-line react/no-array-index-key\n      key: `${action}${index}`,\n      as: Button, // for backwards compatibility this is needed\n      ...action.args,\n    },\n  );\n\n  return (\n    <div className={className} {...rest}>\n      {dropdownActions.length > 0 && (\n        <>\n          <IconButton\n            variant=\"secondary\"\n            iconAs={Icon}\n            src={MoreVert}\n            alt={width > breakpoints.small.minWidth\n              ? ACTION_OVERFLOW_BUTTON_TEXT : SMALL_SCREEN_ACTION_OVERFLOW_BUTTON_TEXT}\n            id=\"actions-dropdown\"\n            ref={setOverflowMenuTarget}\n            onClick={openOverflowMenu}\n          />\n          <ModalPopup\n            positionRef={overflowMenuTarget}\n            onClose={closeOverflowMenu}\n            placement=\"bottom-end\"\n            isOpen={isOverflowMenuOpen}\n          >\n            <div className=\"pgn__datatable__overflow-actions-menu\">\n              <Stack gap={2}>\n                {dropdownActions.map(cloneAction)}\n              </Stack>\n            </div>\n          </ModalPopup>\n        </>\n      )}\n      <div className=\"pgn__datatable__visible-actions\">\n        {visibleActions.map(cloneAction)}\n      </div>\n    </div>\n  );\n}\n\nCollapsibleButtonGroup.defaultProps = {\n  className: null,\n};\n\nCollapsibleButtonGroup.propTypes = {\n  /** Class names for the div wrapping the button components */\n  className: PropTypes.string,\n  /** Array of action objects, containing a component and their callback args */\n  actions: PropTypes.arrayOf(PropTypes.shape({\n    component: PropTypes.oneOfType([PropTypes.func, PropTypes.element]).isRequired,\n    args: PropTypes.shape({}),\n  })).isRequired,\n};\n\nexport default CollapsibleButtonGroup;\n"],"mappings":"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"}
+{"version":3,"file":"CollapsibleButtonGroup.js","names":["React","useContext","useMemo","useState","PropTypes","MoreVert","useToggle","useWindowSize","DataTableContext","Icon","IconButton","breakpoints","ModalPopup","Stack","Button","ACTION_OVERFLOW_BUTTON_TEXT","SMALL_SCREEN_ACTION_OVERFLOW_BUTTON_TEXT","CollapsibleButtonGroup","_ref","className","actions","rest","_objectWithoutProperties","_excluded","isOverflowMenuOpen","openOverflowMenu","closeOverflowMenu","overflowMenuTarget","setOverflowMenuTarget","controlledTableSelections","isEntireTableSelected","selectedFlatRows","rows","width","selectedRows","visibleActions","dropdownActions","small","minWidth","firstTwoActions","splice","extraActions","slice","reverse","cloneAction","action","index","cloneElement","component","_objectSpread","key","as","args","createElement","_extends","length","Fragment","variant","iconAs","src","alt","id","ref","onClick","positionRef","onClose","placement","isOpen","gap","map","defaultProps","propTypes","string","arrayOf","shape","oneOfType","func","element","isRequired"],"sources":["../../src/DataTable/CollapsibleButtonGroup.jsx"],"sourcesContent":["import React, { useContext, useMemo, useState } from 'react';\nimport PropTypes from 'prop-types';\n\nimport { MoreVert } from '../../icons';\nimport useToggle from '../hooks/useToggle';\nimport useWindowSize from '../hooks/useWindowSize';\nimport DataTableContext from './DataTableContext';\nimport Icon from '../Icon';\nimport IconButton from '../IconButton';\nimport breakpoints from '../utils/breakpoints';\nimport ModalPopup from '../Modal/ModalPopup';\nimport Stack from '../Stack';\nimport Button from '../Button';\n\nexport const ACTION_OVERFLOW_BUTTON_TEXT = 'More actions';\nexport const SMALL_SCREEN_ACTION_OVERFLOW_BUTTON_TEXT = 'Actions';\n\nfunction CollapsibleButtonGroup({\n  className,\n  actions,\n  ...rest\n}) {\n  const [isOverflowMenuOpen, openOverflowMenu, closeOverflowMenu] = useToggle(false);\n  const [overflowMenuTarget, setOverflowMenuTarget] = useState(null);\n  const {\n    controlledTableSelections: [{ isEntireTableSelected }],\n    selectedFlatRows,\n    rows,\n  } = useContext(DataTableContext);\n  const { width } = useWindowSize();\n  const selectedRows = selectedFlatRows || rows;\n\n  const [visibleActions, dropdownActions] = useMemo(() => {\n    if (width < breakpoints.small.minWidth) {\n      // On a small screen, all actions will be in the overflow menu\n      return [[], [...actions]];\n    }\n    // The first two actions will be displayed as buttons, the rest will go in an overflow menu\n    const firstTwoActions = [...actions].splice(0, 2);\n    const extraActions = [...actions].slice(2);\n\n    /*  Reversing the array because to the user it makes sense to put the primary button first,\n        but we want it on the right */\n    return [firstTwoActions.reverse(), extraActions];\n  }, [actions, width]);\n\n  if (!isEntireTableSelected && !selectedRows) {\n    return null;\n  }\n\n  const cloneAction = (action, index) => React.cloneElement(\n    action.component,\n    {\n      // eslint-disable-next-line react/no-array-index-key\n      key: `${action}${index}`,\n      as: Button, // for backwards compatibility this is needed\n      ...action.args,\n    },\n  );\n\n  return (\n    <div className={className} {...rest}>\n      {dropdownActions.length > 0 && (\n        <>\n          <IconButton\n            variant=\"secondary\"\n            iconAs={Icon}\n            src={MoreVert}\n            alt={width > breakpoints.small.minWidth\n              ? ACTION_OVERFLOW_BUTTON_TEXT : SMALL_SCREEN_ACTION_OVERFLOW_BUTTON_TEXT}\n            id=\"actions-dropdown\"\n            ref={setOverflowMenuTarget}\n            onClick={openOverflowMenu}\n          />\n          <ModalPopup\n            positionRef={overflowMenuTarget}\n            onClose={closeOverflowMenu}\n            placement=\"bottom-end\"\n            isOpen={isOverflowMenuOpen}\n          >\n            <div className=\"pgn__data-table__overflow-actions-menu\">\n              <Stack gap={2}>\n                {dropdownActions.map(cloneAction)}\n              </Stack>\n            </div>\n          </ModalPopup>\n        </>\n      )}\n      <div className=\"pgn__data-table__visible-actions\">\n        {visibleActions.map(cloneAction)}\n      </div>\n    </div>\n  );\n}\n\nCollapsibleButtonGroup.defaultProps = {\n  className: null,\n};\n\nCollapsibleButtonGroup.propTypes = {\n  /** Class names for the div wrapping the button components */\n  className: PropTypes.string,\n  /** Array of action objects, containing a component and their callback args */\n  actions: PropTypes.arrayOf(PropTypes.shape({\n    component: PropTypes.oneOfType([PropTypes.func, PropTypes.element]).isRequired,\n    args: PropTypes.shape({}),\n  })).isRequired,\n};\n\nexport default CollapsibleButtonGroup;\n"],"mappings":"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"}

package/dist/DataTable/filters/TextFilter.js

@@ -1,7 +1,6 @@
 import React, { useRef } from 'react';
 import PropTypes from 'prop-types';
-import Form, { FormLabel } from '../../Form';
-import Input from '../../Input';
+import Form, { FormLabel, FormControl } from '../../Form';
 import { newId } from '../../utils';
 const formatHeaderForLabel = header => {
   if (typeof header === 'function') {
@@ -27,7 +26,7 @@ function TextFilter(_ref) {
   return /*#__PURE__*/React.createElement(Form.Group, null, /*#__PURE__*/React.createElement(FormLabel, {
     id: ariaLabel.current,
     className: "sr-only"
-  }, inputText), /*#__PURE__*/React.createElement(Input, {
+  }, inputText), /*#__PURE__*/React.createElement(FormControl, {
     "aria-labelledby": ariaLabel.current,
     value: filterValue || '',
     type: "text",

package/dist/DataTable/filters/TextFilter.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextFilter.js","names":["React","useRef","PropTypes","Form","FormLabel","Input","newId","formatHeaderForLabel","header","toLowerCase","TextFilter","_ref","column","filterValue","setFilter","Header","getHeaderProps","ariaLabel","key","formattedHeader","inputText","isValidElement","createElement","Group","id","current","className","value","type","onChange","e","target","undefined","placeholder","propTypes","shape","func","isRequired","oneOfType","node","string"],"sources":["../../../src/DataTable/filters/TextFilter.jsx"],"sourcesContent":["import React, { useRef } from 'react';\nimport PropTypes from 'prop-types';\nimport Form, { FormLabel } from '../../Form';\nimport Input from '../../Input';\nimport { newId } from '../../utils';\n\nconst formatHeaderForLabel = (header) => {\n  if (typeof header === 'function') {\n    return header();\n  }\n  if (typeof header === 'string') {\n    return header.toLowerCase();\n  }\n  return header;\n};\n\nfunction TextFilter({\n  column: {\n    filterValue, setFilter, Header, getHeaderProps,\n  },\n}) {\n  const ariaLabel = useRef(newId(`text-filter-label-${getHeaderProps().key}-`));\n  const formattedHeader = formatHeaderForLabel(Header);\n  const inputText = React.isValidElement(formattedHeader) ? formattedHeader : `Search ${formattedHeader}`;\n  return (\n    <Form.Group>\n      <FormLabel id={ariaLabel.current} className=\"sr-only\">{inputText}</FormLabel>\n      <Input\n        aria-labelledby={ariaLabel.current}\n        value={filterValue || ''}\n        type=\"text\"\n        onChange={e => {\n          setFilter(e.target.value || undefined); // Set undefined to remove the filter entirely\n        }}\n        placeholder={inputText}\n      />\n    </Form.Group>\n  );\n}\n\nTextFilter.propTypes = {\n  /**\n   * Specifies a column object.\n   *\n   * `setFilter`: Function to set the filter value.\n   *\n   * `Header`: Column header used for labels and placeholders.\n   *\n   * `getHeaderProps`: Generates a key unique to the column being filtered.\n   *\n   * `filterValue`: Value for the filter input.\n   */\n  column: PropTypes.shape({\n    setFilter: PropTypes.func.isRequired,\n    Header: PropTypes.oneOfType([PropTypes.func, PropTypes.node]).isRequired,\n    getHeaderProps: PropTypes.func.isRequired,\n    filterValue: PropTypes.string,\n  }).isRequired,\n};\n\nexport default TextFilter;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,MAAM,QAAQ,OAAO;AACrC,OAAOC,SAAS,MAAM,YAAY;AAClC,OAAOC,IAAI,IAAIC,SAAS,QAAQ,YAAY;AAC5C,OAAOC,KAAK,MAAM,aAAa;AAC/B,SAASC,KAAK,QAAQ,aAAa;AAEnC,MAAMC,oBAAoB,GAAIC,MAAM,IAAK;EACvC,IAAI,OAAOA,MAAM,KAAK,UAAU,EAAE;IAChC,OAAOA,MAAM,CAAC,CAAC;EACjB;EACA,IAAI,OAAOA,MAAM,KAAK,QAAQ,EAAE;IAC9B,OAAOA,MAAM,CAACC,WAAW,CAAC,CAAC;EAC7B;EACA,OAAOD,MAAM;AACf,CAAC;AAED,SAASE,UAAUA,CAAAC,IAAA,EAIhB;EAAA,IAJiB;IAClBC,MAAM,EAAE;MACNC,WAAW;MAAEC,SAAS;MAAEC,MAAM;MAAEC;IAClC;EACF,CAAC,GAAAL,IAAA;EACC,MAAMM,SAAS,GAAGhB,MAAM,CAACK,KAAK,CAAE,qBAAoBU,cAAc,CAAC,CAAC,CAACE,GAAI,GAAE,CAAC,CAAC;EAC7E,MAAMC,eAAe,GAAGZ,oBAAoB,CAACQ,MAAM,CAAC;EACpD,MAAMK,SAAS,GAAG,aAAApB,KAAK,CAACqB,cAAc,CAACF,eAAe,CAAC,GAAGA,eAAe,GAAI,UAASA,eAAgB,EAAC;EACvG,oBACEnB,KAAA,CAAAsB,aAAA,CAACnB,IAAI,CAACoB,KAAK,qBACTvB,KAAA,CAAAsB,aAAA,CAAClB,SAAS;IAACoB,EAAE,EAAEP,SAAS,CAACQ,OAAQ;IAACC,SAAS,EAAC;EAAS,GAAEN,SAAqB,CAAC,eAC7EpB,KAAA,CAAAsB,aAAA,CAACjB,KAAK;IACJ,mBAAiBY,SAAS,CAACQ,OAAQ;IACnCE,KAAK,EAAEd,WAAW,IAAI,EAAG;IACzBe,IAAI,EAAC,MAAM;IACXC,QAAQ,EAAEC,CAAC,IAAI;MACbhB,SAAS,CAACgB,CAAC,CAACC,MAAM,CAACJ,KAAK,IAAIK,SAAS,CAAC,CAAC,CAAC;IAC1C,CAAE;;IACFC,WAAW,EAAEb;EAAU,CACxB,CACS,CAAC;AAEjB;AAEAV,UAAU,CAACwB,SAAS,GAAG;EACrB;AACF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;EACEtB,MAAM,EAAEV,SAAS,CAACiC,KAAK,CAAC;IACtBrB,SAAS,EAAEZ,SAAS,CAACkC,IAAI,CAACC,UAAU;IACpCtB,MAAM,EAAEb,SAAS,CAACoC,SAAS,CAAC,CAACpC,SAAS,CAACkC,IAAI,EAAElC,SAAS,CAACqC,IAAI,CAAC,CAAC,CAACF,UAAU;IACxErB,cAAc,EAAEd,SAAS,CAACkC,IAAI,CAACC,UAAU;IACzCxB,WAAW,EAAEX,SAAS,CAACsC;EACzB,CAAC,CAAC,CAACH;AACL,CAAC;AAED,eAAe3B,UAAU"}
+{"version":3,"file":"TextFilter.js","names":["React","useRef","PropTypes","Form","FormLabel","FormControl","newId","formatHeaderForLabel","header","toLowerCase","TextFilter","_ref","column","filterValue","setFilter","Header","getHeaderProps","ariaLabel","key","formattedHeader","inputText","isValidElement","createElement","Group","id","current","className","value","type","onChange","e","target","undefined","placeholder","propTypes","shape","func","isRequired","oneOfType","node","string"],"sources":["../../../src/DataTable/filters/TextFilter.jsx"],"sourcesContent":["import React, { useRef } from 'react';\nimport PropTypes from 'prop-types';\nimport Form, { FormLabel, FormControl } from '../../Form';\nimport { newId } from '../../utils';\n\nconst formatHeaderForLabel = (header) => {\n  if (typeof header === 'function') {\n    return header();\n  }\n  if (typeof header === 'string') {\n    return header.toLowerCase();\n  }\n  return header;\n};\n\nfunction TextFilter({\n  column: {\n    filterValue, setFilter, Header, getHeaderProps,\n  },\n}) {\n  const ariaLabel = useRef(newId(`text-filter-label-${getHeaderProps().key}-`));\n  const formattedHeader = formatHeaderForLabel(Header);\n  const inputText = React.isValidElement(formattedHeader) ? formattedHeader : `Search ${formattedHeader}`;\n  return (\n    <Form.Group>\n      <FormLabel id={ariaLabel.current} className=\"sr-only\">{inputText}</FormLabel>\n      <FormControl\n        aria-labelledby={ariaLabel.current}\n        value={filterValue || ''}\n        type=\"text\"\n        onChange={e => {\n          setFilter(e.target.value || undefined); // Set undefined to remove the filter entirely\n        }}\n        placeholder={inputText}\n      />\n    </Form.Group>\n  );\n}\n\nTextFilter.propTypes = {\n  /**\n   * Specifies a column object.\n   *\n   * `setFilter`: Function to set the filter value.\n   *\n   * `Header`: Column header used for labels and placeholders.\n   *\n   * `getHeaderProps`: Generates a key unique to the column being filtered.\n   *\n   * `filterValue`: Value for the filter input.\n   */\n  column: PropTypes.shape({\n    setFilter: PropTypes.func.isRequired,\n    Header: PropTypes.oneOfType([PropTypes.func, PropTypes.node]).isRequired,\n    getHeaderProps: PropTypes.func.isRequired,\n    filterValue: PropTypes.string,\n  }).isRequired,\n};\n\nexport default TextFilter;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,MAAM,QAAQ,OAAO;AACrC,OAAOC,SAAS,MAAM,YAAY;AAClC,OAAOC,IAAI,IAAIC,SAAS,EAAEC,WAAW,QAAQ,YAAY;AACzD,SAASC,KAAK,QAAQ,aAAa;AAEnC,MAAMC,oBAAoB,GAAIC,MAAM,IAAK;EACvC,IAAI,OAAOA,MAAM,KAAK,UAAU,EAAE;IAChC,OAAOA,MAAM,CAAC,CAAC;EACjB;EACA,IAAI,OAAOA,MAAM,KAAK,QAAQ,EAAE;IAC9B,OAAOA,MAAM,CAACC,WAAW,CAAC,CAAC;EAC7B;EACA,OAAOD,MAAM;AACf,CAAC;AAED,SAASE,UAAUA,CAAAC,IAAA,EAIhB;EAAA,IAJiB;IAClBC,MAAM,EAAE;MACNC,WAAW;MAAEC,SAAS;MAAEC,MAAM;MAAEC;IAClC;EACF,CAAC,GAAAL,IAAA;EACC,MAAMM,SAAS,GAAGhB,MAAM,CAACK,KAAK,CAAE,qBAAoBU,cAAc,CAAC,CAAC,CAACE,GAAI,GAAE,CAAC,CAAC;EAC7E,MAAMC,eAAe,GAAGZ,oBAAoB,CAACQ,MAAM,CAAC;EACpD,MAAMK,SAAS,GAAG,aAAApB,KAAK,CAACqB,cAAc,CAACF,eAAe,CAAC,GAAGA,eAAe,GAAI,UAASA,eAAgB,EAAC;EACvG,oBACEnB,KAAA,CAAAsB,aAAA,CAACnB,IAAI,CAACoB,KAAK,qBACTvB,KAAA,CAAAsB,aAAA,CAAClB,SAAS;IAACoB,EAAE,EAAEP,SAAS,CAACQ,OAAQ;IAACC,SAAS,EAAC;EAAS,GAAEN,SAAqB,CAAC,eAC7EpB,KAAA,CAAAsB,aAAA,CAACjB,WAAW;IACV,mBAAiBY,SAAS,CAACQ,OAAQ;IACnCE,KAAK,EAAEd,WAAW,IAAI,EAAG;IACzBe,IAAI,EAAC,MAAM;IACXC,QAAQ,EAAEC,CAAC,IAAI;MACbhB,SAAS,CAACgB,CAAC,CAACC,MAAM,CAACJ,KAAK,IAAIK,SAAS,CAAC,CAAC,CAAC;IAC1C,CAAE;;IACFC,WAAW,EAAEb;EAAU,CACxB,CACS,CAAC;AAEjB;AAEAV,UAAU,CAACwB,SAAS,GAAG;EACrB;AACF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;EACEtB,MAAM,EAAEV,SAAS,CAACiC,KAAK,CAAC;IACtBrB,SAAS,EAAEZ,SAAS,CAACkC,IAAI,CAACC,UAAU;IACpCtB,MAAM,EAAEb,SAAS,CAACoC,SAAS,CAAC,CAACpC,SAAS,CAACkC,IAAI,EAAElC,SAAS,CAACqC,IAAI,CAAC,CAAC,CAACF,UAAU;IACxErB,cAAc,EAAEd,SAAS,CAACkC,IAAI,CAACC,UAAU;IACzCxB,WAAW,EAAEX,SAAS,CAACsC;EACzB,CAAC,CAAC,CAACH;AACL,CAAC;AAED,eAAe3B,UAAU"}