carbon-react 154.4.1 → 154.4.3

package/esm/components/flat-table/flat-table-row/__internal__/flat-table-row-draggable.component.js

@@ -1,63 +1 @@
-import React from "react";
-import { useDrop, useDrag } from "react-dnd";
-export const FlatTableRowDraggable = ({
-  children,
-  id,
-  findItem,
-  moveItem,
-  rowRef
-}) => {
-  const originalIndex = Number(findItem?.(id).index);
-  const [{
-    isDragging
-  }, drag] = useDrag({
-    type: "flatTableRow",
-    item: {
-      id,
-      originalIndex
-    },
-    collect: monitor => ({
-      isDragging: monitor.isDragging()
-    }),
-    end: (dropResult, monitor) => {
-      const {
-        id: droppedId,
-        originalIndex: oIndex
-      } = monitor.getItem();
-      const didDrop = monitor.didDrop();
-      if (!didDrop) {
-        moveItem?.(droppedId, Number(oIndex));
-      }
-    }
-  });
-  const [, drop] = useDrop({
-    accept: "flatTableRow",
-    canDrop: () => false,
-    hover(item) {
-      if (item?.id !== id && findItem) {
-        const {
-          index: overIndex
-        } = findItem(id);
-        moveItem?.(item?.id, Number(overIndex));
-      }
-    }
-  });
-  return /*#__PURE__*/React.cloneElement(children, {
-    key: originalIndex,
-    id,
-    isDragging,
-    ref: node => {
-      drag(drop(node));
-      /* istanbul ignore else */
-      if (rowRef) {
-        if (typeof rowRef === "function") {
-          rowRef(node);
-        } else {
-          rowRef.current = node;
-        }
-      }
-    }
-  });
-};
-FlatTableRowDraggable.displayName = "FlatTableRowDraggable";
-export default FlatTableRowDraggable;
+import e from"react";import{useDrag as i,useDrop as n}from"react-dnd";const r=({children:r,id:l,findItem:o,moveItem:t,rowRef:a})=>{const d=Number(null==o?void 0:o(l).index),[{isDragging:g},c]=i({type:"flatTableRow",item:{id:l,originalIndex:d},collect:e=>({isDragging:e.isDragging()}),end:(e,i)=>{const{id:n,originalIndex:r}=i.getItem();i.didDrop()||null==t||t(n,Number(r))}}),[,m]=n({accept:"flatTableRow",canDrop:()=>!1,hover(e){if((null==e?void 0:e.id)!==l&&o){const{index:i}=o(l);null==t||t(null==e?void 0:e.id,Number(i))}}});return e.cloneElement(r,{key:d,id:l,isDragging:g,ref:e=>{c(m(e)),a&&("function"==typeof a?a(e):a.current=e)}})};r.displayName="FlatTableRowDraggable";export{r as FlatTableRowDraggable,r as default};

package/esm/components/flat-table/flat-table-row/__internal__/flat-table-row.context.js

@@ -1,6 +1 @@
-import { createContext } from "react";
-export default /*#__PURE__*/createContext({
-  firstCellId: "",
-  leftPositions: {},
-  rightPositions: {}
-});
+import{createContext as t}from"react";var i=t({firstCellId:"",leftPositions:{},rightPositions:{}});export{i as default};

package/esm/components/flat-table/flat-table-row/__internal__/sub-row-provider.js

@@ -1,28 +1 @@
-import React, { createContext, useCallback, useState } from "react";
-export const SubRowContext = /*#__PURE__*/createContext({
-  isSubRow: false,
-  firstRowId: "",
-  addRow: () => {},
-  removeRow: () => {}
-});
-const SubRowProvider = ({
-  children
-}) => {
-  const [rowIds, setRowIds] = useState([]);
-  const addRow = useCallback(id => {
-    setRowIds(p => [...p, id]);
-  }, []);
-  const removeRow = useCallback(id => {
-    setRowIds(p => p.filter(rowId => rowId !== id));
-  }, []);
-  return /*#__PURE__*/React.createElement(SubRowContext.Provider, {
-    value: {
-      isSubRow: true,
-      firstRowId: rowIds[0],
-      addRow,
-      removeRow
-    }
-  }, children);
-};
-SubRowProvider.displayName = "SubRowProvider";
-export default SubRowProvider;
+import{jsx as r}from"react/jsx-runtime";import{createContext as o,useState as e,useCallback as i}from"react";const t=o({isSubRow:!1,firstRowId:"",addRow:()=>{},removeRow:()=>{}}),d=({children:o})=>{const[d,a]=e([]),s=i((r=>{a((o=>[...o,r]))}),[]),w=i((r=>{a((o=>o.filter((o=>o!==r))))}),[]);return r(t.Provider,{value:{isSubRow:!0,firstRowId:d[0],addRow:s,removeRow:w},children:o})};d.displayName="SubRowProvider";export{t as SubRowContext,d as default};

package/esm/components/flat-table/flat-table-row/flat-table-row.component.js

@@ -1,216 +1 @@
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import React, { useContext, useEffect, useMemo, useRef, useState, useLayoutEffect } from "react";
-import invariant from "invariant";
-import Event from "../../../__internal__/utils/helpers/events";
-import StyledFlatTableRow from "./flat-table-row.style";
-import DrawerSidebarContext from "../../drawer/__internal__/drawer-sidebar.context";
-import FlatTableRowHeader from "../flat-table-row-header";
-import FlatTableRowDraggable from "./__internal__/flat-table-row-draggable.component";
-import { useStrictFlatTableContext } from "../__internal__/strict-flat-table.context";
-import guid from "../../../__internal__/utils/helpers/guid";
-import FlatTableRowContext from "./__internal__/flat-table-row.context";
-import SubRowProvider, { SubRowContext } from "./__internal__/sub-row-provider";
-import { buildPositionMap } from "../__internal__";
-import FlatTableHeadContext from "../flat-table-head/__internal__/flat-table-head.context";
-export const FlatTableRow = /*#__PURE__*/React.forwardRef(({
-  children,
-  onClick,
-  expandable,
-  expandableArea = "wholeRow",
-  expanded = false,
-  highlighted,
-  selected,
-  subRows,
-  bgColor,
-  horizontalBorderColor,
-  horizontalBorderSize = "small",
-  id,
-  draggable,
-  findItem,
-  moveItem,
-  "data-element": dataElement,
-  "data-role": dataRole,
-  ...rest
-}, ref) => {
-  const internalId = useRef(id ? String(id) : guid());
-  const [isExpanded, setIsExpanded] = useState(expanded);
-  let rowRef = useRef(null);
-  if (ref) {
-    rowRef = ref;
-  }
-  const firstColumnExpandable = expandableArea === "firstColumn";
-  const [leftPositions, setLeftPositions] = useState({});
-  const [rightPositions, setRightPositions] = useState({});
-  const [firstCellIndex, setFirstCellIndex] = useState(0);
-  const [lhsRowHeaderIndex, setLhsRowHeaderIndex] = useState(-1);
-  const [rhsRowHeaderIndex, setRhsRowHeaderIndex] = useState(-1);
-  const [firstCellId, setFirstCellId] = useState(null);
-  const [cellsArray, setCellsArray] = useState([]);
-  const [tabIndex, setTabIndex] = useState(-1);
-  let interactiveRowProps = {};
-  useLayoutEffect(() => {
-    const checkForPositionUpdates = (updated, current) => {
-      const updatedKeys = Object.keys(updated);
-      const currentKeys = Object.keys(current);
-      if (updatedKeys.length !== currentKeys.length) {
-        return true;
-      }
-      return updatedKeys.some(key => updated[key] !== current[key]);
-    };
-    const cells = rowRef.current?.querySelectorAll("th, td");
-    const cellArray = Array.from(cells || []);
-    setCellsArray(cellArray);
-    const firstIndex = cellArray.findIndex(cell => cell.getAttribute("data-component") !== "flat-table-checkbox");
-    const lhsIndex = cellArray.findIndex(cell => cell.getAttribute("data-sticky-align") === "left");
-    const rhsIndex = cellArray.findIndex(cell => cell.getAttribute("data-sticky-align") === "right");
-    setLhsRowHeaderIndex(lhsIndex);
-    setRhsRowHeaderIndex(rhsIndex);
-    if (firstIndex !== -1) {
-      setFirstCellIndex(firstIndex);
-      setFirstCellId(cellArray[firstIndex].getAttribute("id"));
-    } else {
-      setFirstCellIndex(0);
-    }
-    if (lhsIndex !== -1) {
-      const updatedLeftPositions = buildPositionMap(cellArray.slice(0, lhsRowHeaderIndex + 1), "offsetWidth");
-      if (checkForPositionUpdates(updatedLeftPositions, leftPositions)) {
-        setLeftPositions(updatedLeftPositions);
-      }
-    }
-    if (rhsIndex !== -1) {
-      const updatedRightPositions = buildPositionMap(cellArray.slice(rhsRowHeaderIndex, cellArray.length).reverse(), "offsetWidth");
-      if (checkForPositionUpdates(updatedRightPositions, rightPositions)) {
-        setRightPositions(updatedRightPositions);
-      }
-    }
-  }, [children, leftPositions, lhsRowHeaderIndex, rhsRowHeaderIndex, rightPositions]);
-  const noStickyColumnsOverlap = useMemo(() => {
-    const hasLhsColumn = lhsRowHeaderIndex !== -1;
-    const hasRhsColumn = rhsRowHeaderIndex !== -1;
-    if (!hasLhsColumn || !hasRhsColumn) return true;
-    return lhsRowHeaderIndex < rhsRowHeaderIndex;
-  }, [lhsRowHeaderIndex, rhsRowHeaderIndex]);
-  !noStickyColumnsOverlap ? process.env.NODE_ENV !== "production" ? invariant(false, `Do not render a right hand side \`${FlatTableRowHeader.displayName}\` before left hand side \`${FlatTableRowHeader.displayName}\``) : invariant(false) : void 0;
-  const {
-    colorTheme,
-    size,
-    getTabStopElementId
-  } = useStrictFlatTableContext();
-  const {
-    isInSidebar
-  } = useContext(DrawerSidebarContext);
-  const {
-    stickyOffsets
-  } = useContext(FlatTableHeadContext);
-  const toggleExpanded = () => setIsExpanded(!isExpanded);
-  function onKeyDown(ev) {
-    const isEnterOrSpaceKey = Event.isEnterKey(ev) || Event.isSpaceKey(ev);
-    if (expandable && !firstColumnExpandable && document.activeElement === rowRef.current && isEnterOrSpaceKey) {
-      ev.preventDefault();
-      toggleExpanded();
-    }
-    if (isEnterOrSpaceKey && onClick) {
-      onClick(ev);
-    }
-  }
-  function handleClick(ev) {
-    if (onClick) {
-      onClick(ev);
-    }
-    if (expandable && !firstColumnExpandable) {
-      toggleExpanded();
-    }
-  }
-  if (onClick || expandable) {
-    interactiveRowProps = {
-      isRowInteractive: !firstColumnExpandable,
-      tabIndex: firstColumnExpandable ? undefined : tabIndex,
-      onKeyDown,
-      isFirstColumnInteractive: firstColumnExpandable,
-      isExpanded
-    };
-  }
-  function handleCellKeyDown(ev) {
-    const isEnterOrSpaceKey = Event.isEnterKey(ev) || Event.isSpaceKey(ev);
-
-    /* istanbul ignore else */
-    if (isEnterOrSpaceKey) {
-      ev.preventDefault();
-      toggleExpanded();
-    }
-  }
-  useEffect(() => {
-    setIsExpanded(expanded);
-  }, [expanded]);
-  useEffect(() => {
-    setTabIndex(getTabStopElementId() === internalId.current ? 0 : -1);
-  }, [getTabStopElementId]);
-  const {
-    isSubRow,
-    firstRowId,
-    addRow,
-    removeRow
-  } = useContext(SubRowContext);
-  useEffect(() => {
-    const rowId = internalId.current;
-    addRow(rowId);
-    return () => {
-      removeRow(rowId);
-    };
-  }, [addRow, removeRow]);
-  const isFirstSubRow = firstRowId === internalId.current;
-  const getDataElement = () => {
-    if (dataElement) return dataElement;
-    return isSubRow ? "flat-table-sub-row" : "flat-table-row";
-  };
-  const rowComponent = () => /*#__PURE__*/React.createElement(StyledFlatTableRow, _extends({
-    isInSidebar: isInSidebar,
-    expandable: expandable,
-    isSubRow: isSubRow,
-    isFirstSubRow: isFirstSubRow,
-    "data-element": getDataElement(),
-    "data-role": dataRole,
-    highlighted: highlighted,
-    selected: selected,
-    onClick: handleClick,
-    firstCellIndex: firstCellIndex,
-    ref: rowRef,
-    lhsRowHeaderIndex: lhsRowHeaderIndex,
-    rhsRowHeaderIndex: rhsRowHeaderIndex,
-    colorTheme: colorTheme,
-    size: size,
-    stickyOffset: stickyOffsets[internalId.current],
-    bgColor: bgColor,
-    horizontalBorderColor: horizontalBorderColor,
-    horizontalBorderSize: horizontalBorderSize,
-    draggable: draggable,
-    totalChildren: cellsArray.length,
-    id: internalId.current,
-    "data-selected": selected && expandableArea === "wholeRow",
-    "data-highlighted": highlighted && expandableArea === "wholeRow",
-    rowHeight: rowRef?.current?.offsetHeight
-  }, interactiveRowProps, rest, {
-    "data-component": "flat-table-row"
-  }), /*#__PURE__*/React.createElement(FlatTableRowContext.Provider, {
-    value: {
-      firstCellId,
-      expandable,
-      leftPositions,
-      rightPositions,
-      firstColumnExpandable,
-      onKeyDown: handleCellKeyDown,
-      onClick: () => toggleExpanded(),
-      highlighted,
-      selected
-    }
-  }, children));
-  const draggableComponent = () => /*#__PURE__*/React.createElement(FlatTableRowDraggable, {
-    id: internalId.current,
-    moveItem: moveItem,
-    findItem: findItem,
-    rowRef: rowRef
-  }, rowComponent());
-  return /*#__PURE__*/React.createElement(React.Fragment, null, draggable ? draggableComponent() : rowComponent(), isExpanded && subRows && /*#__PURE__*/React.createElement(SubRowProvider, null, subRows));
-});
-FlatTableRow.displayName = "FlatTableRow";
-export default FlatTableRow;
+import{jsxs as e,Fragment as t,jsx as r}from"react/jsx-runtime";import o,{useRef as n,useState as i,useLayoutEffect as l,useMemo as a,useContext as d,useEffect as s}from"react";import c from"invariant";import f from"../../../__internal__/utils/helpers/events/events.js";import b from"./flat-table-row.style.js";import u from"../../drawer/__internal__/drawer-sidebar.context.js";import{FlatTableRowHeader as m}from"../flat-table-row-header/flat-table-row-header.component.js";import{FlatTableRowDraggable as p}from"./__internal__/flat-table-row-draggable.component.js";import{useStrictFlatTableContext as h}from"../__internal__/strict-flat-table.context.js";import g from"../../../__internal__/utils/helpers/guid/index.js";import w from"./__internal__/flat-table-row.context.js";import y,{SubRowContext as _}from"./__internal__/sub-row-provider.js";import O from"../__internal__/build-position-map.js";import j from"../flat-table-head/__internal__/flat-table-head.context.js";function v(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}const x=o.forwardRef(((o,x)=>{var{children:I,onClick:S,expandable:R,expandableArea:C="wholeRow",expanded:P=!1,highlighted:k,selected:z,subRows:D,bgColor:E,horizontalBorderColor:A,horizontalBorderSize:B="small",id:K,draggable:H,findItem:T,moveItem:F,"data-element":N,"data-role":W}=o,$=function(e,t){if(null==e)return{};var r,o,n=function(e,t){if(null==e)return{};var r,o,n={},i=Object.keys(e);for(o=0;o<i.length;o++)r=i[o],t.indexOf(r)>=0||(n[r]=e[r]);return n}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(o=0;o<i.length;o++)r=i[o],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(n[r]=e[r])}return n}(o,["children","onClick","expandable","expandableArea","expanded","highlighted","selected","subRows","bgColor","horizontalBorderColor","horizontalBorderSize","id","draggable","findItem","moveItem","data-element","data-role"]);const q=n(K?String(K):g()),[G,J]=i(P);let L=n(null);x&&(L=x);const M="firstColumn"===C,[Q,U]=i({}),[V,X]=i({}),[Y,Z]=i(0),[ee,te]=i(-1),[re,oe]=i(-1),[ne,ie]=i(null),[le,ae]=i([]),[de,se]=i(-1);let ce={};l((()=>{var e;const t=(e,t)=>{const r=Object.keys(e),o=Object.keys(t);return r.length!==o.length||r.some((r=>e[r]!==t[r]))},r=null===(e=L.current)||void 0===e?void 0:e.querySelectorAll("th, td"),o=Array.from(r||[]);ae(o);const n=o.findIndex((e=>"flat-table-checkbox"!==e.getAttribute("data-component"))),i=o.findIndex((e=>"left"===e.getAttribute("data-sticky-align"))),l=o.findIndex((e=>"right"===e.getAttribute("data-sticky-align")));if(te(i),oe(l),-1!==n?(Z(n),ie(o[n].getAttribute("id"))):Z(0),-1!==i){const e=O(o.slice(0,ee+1),"offsetWidth");t(e,Q)&&U(e)}if(-1!==l){const e=O(o.slice(re,o.length).reverse(),"offsetWidth");t(e,V)&&X(e)}}),[I,Q,ee,re,V]);const fe=a((()=>!(-1!==ee)||!(-1!==re)||ee<re),[ee,re]);c(fe,`Do not render a right hand side \`${m.displayName}\` before left hand side \`${m.displayName}\``);const{colorTheme:be,size:ue,getTabStopElementId:me}=h(),{isInSidebar:pe}=d(u),{stickyOffsets:he}=d(j),ge=()=>J(!G);function we(e){S&&S(e),R&&!M&&ge()}function ye(e){(f.isEnterKey(e)||f.isSpaceKey(e))&&(e.preventDefault(),ge())}(S||R)&&(ce={isRowInteractive:!M,tabIndex:M?void 0:de,onKeyDown:function(e){const t=f.isEnterKey(e)||f.isSpaceKey(e);R&&!M&&document.activeElement===L.current&&t&&(e.preventDefault(),ge()),t&&S&&S(e)},isFirstColumnInteractive:M,isExpanded:G}),s((()=>{J(P)}),[P]),s((()=>{se(me()===q.current?0:-1)}),[me]);const{isSubRow:_e,firstRowId:Oe,addRow:je,removeRow:ve}=d(_);s((()=>{const e=q.current;return je(e),()=>{ve(e)}}),[je,ve]);const xe=Oe===q.current,Ie=()=>{var e,t,o;return r(b,(t=function(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{},o=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(o=o.concat(Object.getOwnPropertySymbols(r).filter((function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable})))),o.forEach((function(t){v(e,t,r[t])}))}return e}({isInSidebar:pe,expandable:R,isSubRow:_e,isFirstSubRow:xe,"data-element":N||(_e?"flat-table-sub-row":"flat-table-row"),"data-role":W,highlighted:k,selected:z,onClick:we,firstCellIndex:Y,ref:L,lhsRowHeaderIndex:ee,rhsRowHeaderIndex:re,colorTheme:be,size:ue,stickyOffset:he[q.current],bgColor:E,horizontalBorderColor:A,horizontalBorderSize:B,draggable:H,totalChildren:le.length,id:q.current,"data-selected":z&&"wholeRow"===C,"data-highlighted":k&&"wholeRow"===C,rowHeight:null==L||null===(e=L.current)||void 0===e?void 0:e.offsetHeight},ce,$),o=null!=(o={"data-component":"flat-table-row",children:r(w.Provider,{value:{firstCellId:ne,expandable:R,leftPositions:Q,rightPositions:V,firstColumnExpandable:M,onKeyDown:ye,onClick:()=>ge(),highlighted:k,selected:z},children:I})})?o:{},Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(o)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t.push.apply(t,r)}return t}(Object(o)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(o,e))})),t))};return e(t,{children:[H?r(p,{id:q.current,moveItem:F,findItem:T,rowRef:L,children:Ie()}):Ie(),G&&D&&r(y,{children:D})]})}));x.displayName="FlatTableRow";export{x as FlatTableRow,x as default};