react-align 2.0.5 → 2.2.0

package/dist/react-align.cjs.production.min.js

@@ -1,2 +0,0 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t,n,r,i,o,a,l,s,c,d,h,u,p,g,v,f,m,y,w,x=require("react"),b=(e=x)&&"object"==typeof e&&"default"in e?e.default:e,E=require("react-beautiful-dnd"),O=x.createContext({editing:!1,isDragging:!1}),j=function(){return x.useContext(O)};function M(){return(M=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e}).apply(this,arguments)}function C(){return(C=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e}).apply(this,arguments)}function z(){return(z=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e}).apply(this,arguments)}function k(){return(k=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e}).apply(this,arguments)}function V(){return(V=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e}).apply(this,arguments)}function D(){return(D=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e}).apply(this,arguments)}function H(){return(H=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e}).apply(this,arguments)}function P(){return(P=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e}).apply(this,arguments)}function N(){return(N=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e}).apply(this,arguments)}function L(){return(L=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e}).apply(this,arguments)}function R(){return(R=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e}).apply(this,arguments)}function S(){return(S=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e}).apply(this,arguments)}!function(e,t){void 0===t&&(t={});var n=t.insertAt;if("undefined"!=typeof document){var r=document.head||document.getElementsByTagName("head")[0],i=document.createElement("style");i.type="text/css","top"===n&&r.firstChild?r.insertBefore(i,r.firstChild):r.appendChild(i),i.styleSheet?i.styleSheet.cssText=e:i.appendChild(document.createTextNode(e))}}(".wrapper{height:100%}.section,.wrapper{display:flex;justify-content:space-between}.section{flex-direction:column}.area{border:0 solid transparent;border-radius:8px;box-sizing:border-box;display:flex;position:relative}.area-transition-in{transition:all .3s ease-in-out,min-height .5s ease-in-out .2s,min-width .5s ease-in-out .2s}.area-transition-out{transition:all .3s ease-in-out .4s,min-height .5s ease-in-out .2s,min-width .5s ease-in-out .2s}.item{border:0 solid transparent;border-radius:6px;margin:6px;position:relative}.stretch{flex:auto}.middle{flex-grow:0;flex:auto}.just-centered{justify-content:center}.just-end{justify-content:flex-end}.end{align-items:flex-end}.hide{display:none}.overlay{background:rgba(0,0,0,.6);box-sizing:border-box;height:100%;left:0;position:absolute;top:0;width:100%}.overlay-buttons{box-sizing:border-box;display:flex;justify-content:space-between;padding:6px}");var W={horizontalExtend:function(e){return x.createElement("svg",C({width:24,height:24,fill:"none",xmlns:"http://www.w3.org/2000/svg"},e),t||(t=x.createElement("path",{d:"M1 20.25V3.75M23 20.25V3.75M12 12h8.5M17.5 9l3 3-3 3M12 12H4M7 15l-3-3 3-3",stroke:"currentColor",strokeWidth:1.5,strokeLinecap:"round",strokeLinejoin:"round"})))},horizontalNormal:function(e){return x.createElement("svg",z({width:24,height:24,fill:"none",xmlns:"http://www.w3.org/2000/svg"},e),n||(n=x.createElement("path",{d:"M1 12h5M3 9l3 3-3 3M23 12h-5M21 15l-3-3 3-3",stroke:"currentColor",strokeWidth:1.5,strokeLinecap:"round",strokeLinejoin:"round"})),r||(r=x.createElement("rect",{x:8.75,y:2.75,width:6.5,height:18.5,rx:1.25,stroke:"currentColor",strokeWidth:1.5})))},verticalExtend:function(e){return x.createElement("svg",k({width:24,height:24,fill:"none",xmlns:"http://www.w3.org/2000/svg"},e),i||(i=x.createElement("path",{d:"M3.75 1h16.5M3.75 23h16.5M12 12v8.5M15 17.5l-3 3-3-3M12 12V4M9 7l3-3 3 3",stroke:"currentColor",strokeWidth:1.5,strokeLinecap:"round",strokeLinejoin:"round"})))},verticalNormal:function(e){return x.createElement("svg",V({width:24,height:24,fill:"none",xmlns:"http://www.w3.org/2000/svg"},e),o||(o=x.createElement("path",{d:"M12 1v5M15 3l-3 3-3-3M12 23v-5M9 21l3-3 3 3",stroke:"currentColor",strokeWidth:1.5,strokeLinecap:"round",strokeLinejoin:"round"})),a||(a=x.createElement("rect",{x:21.25,y:8.75,width:6.5,height:18.5,rx:1.25,transform:"rotate(90 21.25 8.75)",stroke:"currentColor",strokeWidth:1.5})))},moveArrows:function(e){return x.createElement("svg",D({width:24,height:24,fill:"none",xmlns:"http://www.w3.org/2000/svg"},e),l||(l=x.createElement("path",{d:"M14.651 19.098L12 21.749l-2.652-2.651M12 15v6.75M9.348 4.902L12 2.25l2.651 2.652M12 9V2.25M4.902 14.65L2.25 12l2.652-2.652M9 12H2.25M19.098 9.348l2.652 2.651-2.652 2.652M15 12h6.75",stroke:"currentColor",strokeWidth:1.5,strokeLinecap:"round",strokeLinejoin:"round"})))},alignStart:function(e){return x.createElement("svg",H({width:24,height:24,fill:"none",xmlns:"http://www.w3.org/2000/svg"},e),s||(s=x.createElement("rect",{width:24,height:24,rx:4,fill:"#000",fillOpacity:.5})),c||(c=x.createElement("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M5 5h14v14H5V5zM4 4h16v16H4V4zm2 6a1 1 0 012 0v4a1 1 0 11-2 0v-4zm3 0a1 1 0 012 0v4a1 1 0 11-2 0v-4zm4-1a1 1 0 00-1 1v4a1 1 0 102 0v-4a1 1 0 00-1-1z",fill:"currentColor"})))},alignCenter:function(e){return x.createElement("svg",P({width:24,height:24,fill:"none",xmlns:"http://www.w3.org/2000/svg"},e),d||(d=x.createElement("rect",{width:24,height:24,rx:4,fill:"#000",fillOpacity:.5})),h||(h=x.createElement("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M19 19H5V5h14v14zm1 1H4V4h16v16zm-4-6a1 1 0 11-2 0v-4a1 1 0 112 0v4zm-3 0a1 1 0 11-2 0v-4a1 1 0 112 0v4zm-4 1a1 1 0 001-1v-4a1 1 0 10-2 0v4a1 1 0 001 1z",fill:"currentColor"})))},alignEnd:function(e){return x.createElement("svg",N({width:24,height:24,fill:"none",xmlns:"http://www.w3.org/2000/svg"},e),u||(u=x.createElement("rect",{width:24,height:24,rx:4,fill:"#000",fillOpacity:.5})),p||(p=x.createElement("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M19 19H5V5h14v14zm1 1H4V4h16v16zm-2-6a1 1 0 11-2 0v-4a1 1 0 112 0v4zm-3 0a1 1 0 11-2 0v-4a1 1 0 112 0v4zm-4 1a1 1 0 001-1v-4a1 1 0 10-2 0v4a1 1 0 001 1z",fill:"currentColor"})))},alignStartV:function(e){return x.createElement("svg",L({width:24,height:24,fill:"none",xmlns:"http://www.w3.org/2000/svg"},e),g||(g=x.createElement("rect",{y:24,width:24,height:24,rx:4,transform:"rotate(-90 0 24)",fill:"#000",fillOpacity:.5})),v||(v=x.createElement("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M19 5v14H5V5h14zm1-1v16H4V4h16zm-6 2a1 1 0 110 2h-4a1 1 0 110-2h4zm0 3a1 1 0 110 2h-4a1 1 0 110-2h4zm1 4a1 1 0 00-1-1h-4a1 1 0 100 2h4a1 1 0 001-1z",fill:"currentColor"})))},alignCenterV:function(e){return x.createElement("svg",R({width:24,height:24,fill:"none",xmlns:"http://www.w3.org/2000/svg"},e),f||(f=x.createElement("rect",{y:24,width:24,height:24,rx:4,transform:"rotate(-90 0 24)",fill:"#000",fillOpacity:.5})),m||(m=x.createElement("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M19 5v14H5V5h14zm1-1v16H4V4h16zm-6 4a1 1 0 110 2h-4a1 1 0 110-2h4zm0 3a1 1 0 110 2h-4a1 1 0 110-2h4zm1 4a1 1 0 00-1-1h-4a1 1 0 100 2h4a1 1 0 001-1z",fill:"currentColor"})))},alignEndV:function(e){return x.createElement("svg",S({width:24,height:24,fill:"none",xmlns:"http://www.w3.org/2000/svg"},e),y||(y=x.createElement("rect",{y:24,width:24,height:24,rx:4,transform:"rotate(-90 0 24)",fill:"#000",fillOpacity:.5})),w||(w=x.createElement("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M5 19V5h14v14H5zm-1 1V4h16v16H4zm6-2a1 1 0 110-2h4a1 1 0 110 2h-4zm0-3a1 1 0 110-2h4a1 1 0 110 2h-4zm-1-4a1 1 0 001 1h4a1 1 0 100-2h-4a1 1 0 00-1 1z",fill:"currentColor"})))}},I=function(e){return b.createElement(W[e.name],{className:e.className,onClick:e.onClick})},A=["start","centered","end"];exports.GridArea=function(e){var t=e.id,n=e.className,r=e.vertical,i=e.stretch,o=e.end,a=e.disabled,l=e.align,s=e.onAlignChange,c=e.children,d=e.style,h=e.editorStyle,u=e.iconColor,p=void 0===u?"#FFFFFF":u,g=j(),v=g.editing,f=g.onAlignChange,m=x.useCallback((function(){var e=A[(l?A.indexOf(l)+1:0)%A.length];null==s||s(e),null==f||f(t,e)}),[l,s,f,t]),y=x.useMemo((function(){return{position:"absolute",left:r?o?0:void 0:"50%",right:r?o?void 0:0:"50%",bottom:r||o?r?"50%":void 0:0,top:r?"50%":o?0:void 0,opacity:!a&&v&&l?1:0,pointerEvents:!a&&v&&l?"auto":"none",transition:"all 0.5s ease-in-out"}}),[r,o,a,v,l]),w=x.useMemo((function(){return b.Children.map(c,(function(e){return b.cloneElement(e,{end:o,vertical:r})}))}),[c,o,r]);return b.createElement(E.Droppable,{droppableId:t,direction:r?"vertical":"horizontal",isDropDisabled:a},(function(e,t){return b.createElement("div",Object.assign({ref:e.innerRef},e.droppableProps,{className:[n,"area",i&&"stretch",o&&"end","centered"===l?"just-centered":"end"===l?"just-end":"start",v?"area-transition-in":"area-transition-out"].filter(Boolean).join(" "),style:M({flexDirection:r?"column":"row",minHeight:b.Children.count(c)||v?"26px":"0px",minWidth:b.Children.count(c)||v?"46px":"0px",opacity:t.isDraggingOver?.8:1},v?h:d)}),w,e.placeholder,b.createElement("div",{style:y},b.createElement("div",{onClick:m,style:{cursor:"pointer",color:p}},b.createElement(I,{name:"centered"===l?r?"alignCenterV":"alignCenter":"end"===l?r?"alignEndV":"alignEnd":r?"alignStartV":"alignStart"}))))}))},exports.GridItem=function(e){var t=e.className,n=e.children,r=e.id,i=e.index,o=e.extendable,a=void 0!==o&&o,l=e.extended,s=void 0!==l&&l,c=e.disabled,d=void 0!==c&&c,h=e.style,u=e.editorStyle,p=e.iconColor,g=void 0===p?"rgb(255, 255, 255)":p,v=function(e,t){if(null==e)return{};var n,r,i={},o=Object.keys(e);for(r=0;r<o.length;r++)t.indexOf(n=o[r])>=0||(i[n]=e[n]);return i}(e,["className","children","id","index","extendable","extended","disabled","style","editorStyle","iconColor"]).vertical,f=j(),m=f.editing,y=f.isDragging,w=f.onExtend,O=x.useState(!1),C=O[0],z=O[1],k=x.useCallback((function(){a&&(z(!1),null==w||w(r,!s))}),[a,w,s,r]),V=x.useMemo((function(){return{alignItems:"start",float:"left",color:g}}),[g]),D=x.useMemo((function(){return{id:r,editing:m,isDragging:y,isHovered:C,extended:s,extendable:a,disabled:d,index:i}}),[d,m,a,s,r,i,y,C]);return b.createElement(E.Draggable,{draggableId:r,index:i,isDragDisabled:d},(function(e,r){return b.createElement("div",Object.assign({ref:e.innerRef},e.draggableProps,{className:t+" item",style:M({flex:s&&!r.isDragging?"auto":void 0,opacity:r.isDragging?.5:1},m?u:h,e.draggableProps.style)}),b.createElement("div",{style:{display:"inline-block",position:"relative",minHeight:C&&!d?"35px":void 0,width:!v&&s?"100%":void 0,minWidth:C&&!d?a?"70px":"35px":void 0,height:v&&s?"100%":void 0},onMouseEnter:function(){return z(!0)},onMouseLeave:function(){return z(!1)}},"function"==typeof n?n(D):n,b.createElement("div",{className:"overlay",style:{display:d||!m||!C||!r.isDragging&&y?"none":"block"}},b.createElement("div",{className:"overlay-buttons",style:V},b.createElement("div",Object.assign({},e.dragHandleProps),b.createElement(I,{name:"moveArrows"})),a&&b.createElement("div",{style:{cursor:"pointer",marginLeft:"8px"},onClick:k},b.createElement(I,{name:v?"verticalExtend":"horizontalExtend"}))))))}))},exports.GridSection=function(e){var t=e.className,n=e.children,r=e.horizontal,i=e.stretch,o=e.fixedWidth,a=e.fixedHeight,l=e.style,s=e.editorStyle,c=j();return b.createElement("div",{className:"section "+t+" "+(r?"horizontal":"")+" "+(i?"stretch":""),style:M({},c.editing?s:l,"number"==typeof a?{height:a+"px"}:{},"number"==typeof o?{width:o+"px"}:{})},n)},exports.GridWrapper=function(e){var t=e.className,n=e.children,r=e.editing,i=e.vertical,o=e.stretch,a=e.style,l=e.editorStyle,s=e.onMove,c=e.onAlignChange,d=e.onExtend,h=x.useState(!1),u=h[0],p=h[1],g=x.useCallback((function(){p(!0)}),[]),v=x.useCallback((function(e,t){p(!1),!e.destination||"DROP"!==e.reason||e.destination.droppableId===e.source.droppableId&&e.destination.index===e.source.index||null==s||s(e.draggableId,e.destination.droppableId,e.destination.index,e.source.droppableId,e.source.index)}),[s]);return b.createElement("div",{className:"wrapper "+t+" "+(i&&"vertical")+" "+(o&&"stretch"),style:r?l:a},b.createElement(E.DragDropContext,{onDragStart:g,onDragEnd:v},b.createElement(O.Provider,{value:{editing:!!r,onAlignChange:c,onExtend:d,isDragging:u}},n)))},exports.Icon=I;
-//# sourceMappingURL=react-align.cjs.production.min.js.map

package/dist/react-align.cjs.production.min.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"react-align.cjs.production.min.js","sources":["../src/context.tsx","../node_modules/style-inject/dist/style-inject.es.js","../src/Icon/icons.ts","../src/Icon/index.tsx","../src/GridArea.tsx","../src/GridItem.tsx","../src/GridSection.tsx","../src/GridWrapper.tsx"],"sourcesContent":["import { createContext, useContext } from 'react';\nimport { Alignment } from '.';\n\nexport const Context = createContext<{\n  editing: boolean;\n  isDragging: boolean;\n  onAlignChange?: (areaId: string, align: Alignment) => void;\n  onExtend?: (id: string, extended: boolean) => void;\n}>({ editing: false, isDragging: false });\nexport const useAlignContext = () => useContext(Context);\n","function styleInject(css, ref) {\n  if ( ref === void 0 ) ref = {};\n  var insertAt = ref.insertAt;\n\n  if (!css || typeof document === 'undefined') { return; }\n\n  var head = document.head || document.getElementsByTagName('head')[0];\n  var style = document.createElement('style');\n  style.type = 'text/css';\n\n  if (insertAt === 'top') {\n    if (head.firstChild) {\n      head.insertBefore(style, head.firstChild);\n    } else {\n      head.appendChild(style);\n    }\n  } else {\n    head.appendChild(style);\n  }\n\n  if (style.styleSheet) {\n    style.styleSheet.cssText = css;\n  } else {\n    style.appendChild(document.createTextNode(css));\n  }\n}\n\nexport default styleInject;\n","import HorizontalExtend from './Icons/horizontalExtend.svg';\nimport HorizontalNormal from './Icons/horizontalNormal.svg';\nimport VerticalExtend from './Icons/verticalExtend.svg';\nimport VerticalNormal from './Icons/verticalNormal.svg';\nimport MoveArrows from './Icons/moveArrows.svg';\nimport AlignStart from './Icons/alignStart.svg';\nimport AlignCenter from './Icons/alignCenter.svg';\nimport AlignEnd from './Icons/alignEnd.svg';\nimport AlignStartV from './Icons/alignStartV.svg';\nimport AlignCenterV from './Icons/alignCenterV.svg';\nimport AlignEndV from './Icons/alignEndV.svg';\n\nexport default {\n  horizontalExtend: HorizontalExtend,\n  horizontalNormal: HorizontalNormal,\n  verticalExtend: VerticalExtend,\n  verticalNormal: VerticalNormal,\n  moveArrows: MoveArrows,\n  alignStart: AlignStart,\n  alignCenter: AlignCenter,\n  alignEnd: AlignEnd,\n  alignStartV: AlignStartV,\n  alignCenterV: AlignCenterV,\n  alignEndV: AlignEndV,\n};\n","import React from 'react';\n\nimport Icons from './icons';\n\nexport type Icons = keyof typeof Icons;\n\nexport type IconProps = {\n  className?: string;\n  name: string | Icons;\n  onClick?: () => void;\n};\n\nconst Icon: React.FC<IconProps> = ({ className, name, onClick }) => {\n  const LocalIconComponent = Icons[name as Icons];\n  return <LocalIconComponent className={className} onClick={onClick} />;\n};\n\nexport default Icon;\n","import React, {\n  CSSProperties,\n  PropsWithChildren,\n  useCallback,\n  useMemo,\n} from 'react';\nimport { Droppable } from 'react-beautiful-dnd';\n\nimport { useAlignContext } from './context';\nimport Icon from './Icon';\nimport './grid.css';\n\nexport type Alignment = 'start' | 'centered' | 'end';\n\nexport type AreaProps = {\n  id: string;\n  className?: string;\n  vertical?: boolean;\n  stretch?: boolean;\n  end?: boolean;\n  align?: Alignment;\n  disabled?: boolean;\n  /** Extra customizable parts only for the really picky */\n  style?: CSSProperties;\n  editorStyle?: CSSProperties;\n  iconColor?: string;\n  onAlignChange?: (alignment: Alignment) => void;\n};\n\nconst alignments = ['start', 'centered', 'end'] as const;\n\nexport default function GridArea({\n  id,\n  className,\n  vertical,\n  stretch,\n  end,\n  disabled,\n  align,\n  onAlignChange,\n  children,\n  // Picky stuff\n  style,\n  editorStyle,\n  iconColor = '#FFFFFF',\n}: PropsWithChildren<AreaProps>) {\n  const { editing: enabled, onAlignChange: onAlignChange2 } = useAlignContext();\n\n  const handleAlignChange = useCallback(() => {\n    const a =\n      alignments[\n        (align ? alignments.indexOf(align) + 1 : 0) % alignments.length\n      ];\n    onAlignChange?.(a);\n    onAlignChange2?.(id, a);\n  }, [align, onAlignChange, onAlignChange2, id]);\n\n  const buttonStyle: CSSProperties = useMemo(\n    () => ({\n      position: 'absolute',\n      left: vertical ? (end ? 0 : undefined) : '50%',\n      right: vertical ? (!end ? 0 : undefined) : '50%',\n      bottom: !vertical && !end ? 0 : vertical ? '50%' : undefined,\n      top: vertical ? '50%' : end ? 0 : undefined,\n      opacity: !disabled && enabled && align ? 1 : 0,\n      pointerEvents: !disabled && enabled && align ? 'auto' : 'none',\n      transition: 'all 0.5s ease-in-out',\n    }),\n    [vertical, end, disabled, enabled, align]\n  );\n\n  // Rebuilds the GridItem children to receive their parent GridArea's 'end' and 'vertical' values.\n  // Used to know where to align the overlay buttons (end) and how to extend the GridItems (vertical).\n  const childrenWithParentProps = useMemo(\n    () =>\n      React.Children.map(children, child =>\n        React.cloneElement(child as React.ReactElement<any>, {\n          end,\n          vertical,\n        })\n      ),\n    [children, end, vertical]\n  );\n\n  return (\n    <Droppable\n      droppableId={id}\n      direction={vertical ? 'vertical' : 'horizontal'}\n      isDropDisabled={disabled}\n    >\n      {(provided, snapshot) => (\n        <div\n          ref={provided.innerRef}\n          {...provided.droppableProps}\n          className={[\n            className,\n            'area',\n            stretch && 'stretch',\n            end && 'end',\n            align === 'centered'\n              ? 'just-centered'\n              : align === 'end'\n              ? 'just-end'\n              : 'start',\n            enabled ? 'area-transition-in' : 'area-transition-out',\n          ]\n            .filter(Boolean)\n            .join(' ')}\n          style={{\n            flexDirection: vertical ? 'column' : 'row',\n            minHeight:\n              !React.Children.count(children) && !enabled ? '0px' : '26px',\n            minWidth:\n              !React.Children.count(children) && !enabled ? '0px' : '46px',\n            opacity: snapshot.isDraggingOver ? 0.8 : 1,\n            ...(enabled ? editorStyle : style),\n          }}\n        >\n          {childrenWithParentProps}\n          {provided.placeholder}\n          <div style={buttonStyle}>\n            <div\n              onClick={handleAlignChange}\n              style={{\n                cursor: 'pointer',\n                color: iconColor,\n              }}\n            >\n              <Icon\n                name={\n                  align === 'centered'\n                    ? vertical\n                      ? 'alignCenterV'\n                      : 'alignCenter'\n                    : align === 'end'\n                    ? vertical\n                      ? 'alignEndV'\n                      : 'alignEnd'\n                    : vertical\n                    ? 'alignStartV'\n                    : 'alignStart'\n                }\n              />\n            </div>\n          </div>\n        </div>\n      )}\n    </Droppable>\n  );\n}\n","import React, {\n  useMemo,\n  CSSProperties,\n  useState,\n  useCallback,\n  ReactNode,\n} from 'react';\nimport { Draggable } from 'react-beautiful-dnd';\n\nimport { useAlignContext } from './context';\nimport Icon from './Icon';\nimport './grid.css';\n\nexport type ItemProps = {\n  className?: string;\n  id: string;\n  index: number;\n  extendable?: boolean;\n  extended?: boolean;\n  disabled?: boolean;\n  onExtend?: (extended: boolean) => void;\n  children?:\n    | ReactNode\n    | ((context: {\n        id: string;\n        editing: boolean;\n        isDragging: boolean;\n        isHovered: boolean;\n        extended: boolean;\n        extendable: boolean;\n        disabled: boolean;\n        index: number;\n      }) => ReactNode);\n  /** Extra customizable parts only for the really picky */\n  style?: CSSProperties;\n  editorStyle?: CSSProperties;\n  iconColor?: string;\n};\n\nexport default function GridItem({\n  className,\n  children,\n  id,\n  index,\n  extendable = false,\n  extended = false,\n  disabled = false,\n  // Picky stuff.\n  style,\n  editorStyle,\n  iconColor = 'rgb(255, 255, 255)',\n  ...props\n}: ItemProps) {\n  const { vertical } = props as {\n    end?: boolean;\n    vertical?: boolean;\n  };\n  const { editing, isDragging, onExtend } = useAlignContext();\n  const [isHovered, setHovered] = useState(false);\n  const handleExtend = useCallback(() => {\n    if (!extendable) return;\n    setHovered(false);\n    onExtend?.(id, !extended);\n  }, [extendable, onExtend, extended, id]);\n\n  const buttonStyles: CSSProperties = useMemo(\n    () => ({\n      alignItems: 'start',\n      float: 'left',\n      color: iconColor,\n    }),\n    [iconColor]\n  );\n\n  const ctx = useMemo(\n    () => ({\n      id,\n      editing,\n      isDragging,\n      isHovered,\n      extended,\n      extendable,\n      disabled,\n      index,\n    }),\n    [disabled, editing, extendable, extended, id, index, isDragging, isHovered]\n  );\n\n  return (\n    <Draggable draggableId={id} index={index} isDragDisabled={disabled}>\n      {(provided, snapshot) => (\n        <div\n          ref={provided.innerRef}\n          {...provided.draggableProps}\n          className={`${className} item`}\n          style={{\n            flex: extended && !snapshot.isDragging ? 'auto' : undefined,\n            opacity: snapshot.isDragging ? 0.5 : 1,\n            ...(editing ? editorStyle : style),\n            ...provided.draggableProps.style,\n          }}\n        >\n          <div\n            style={{\n              display: 'inline-block',\n              position: 'relative',\n              minHeight: isHovered && !disabled ? '35px' : undefined,\n              width: !vertical && extended ? '100%' : undefined,\n              minWidth:\n                isHovered && !disabled\n                  ? extendable\n                    ? '70px'\n                    : '35px'\n                  : undefined,\n              height: vertical && extended ? '100%' : undefined,\n            }}\n            onMouseEnter={() => setHovered(true)}\n            onMouseLeave={() => setHovered(false)}\n          >\n            {typeof children === 'function' ? children(ctx) : children}\n            <div\n              className=\"overlay\"\n              style={{\n                display:\n                  !disabled &&\n                  editing &&\n                  isHovered &&\n                  (snapshot.isDragging || !isDragging)\n                    ? 'block'\n                    : 'none',\n              }}\n            >\n              <div className=\"overlay-buttons\" style={buttonStyles}>\n                <div {...provided.dragHandleProps}>\n                  <Icon name=\"moveArrows\" />\n                </div>\n                {extendable && (\n                  <div\n                    style={{ cursor: 'pointer', marginLeft: '8px' }}\n                    onClick={handleExtend}\n                  >\n                    <Icon\n                      name={vertical ? 'verticalExtend' : 'horizontalExtend'}\n                    />\n                  </div>\n                )}\n              </div>\n            </div>\n          </div>\n        </div>\n      )}\n    </Draggable>\n  );\n}\n","import React, { CSSProperties, ReactNode } from 'react';\n\nimport { useAlignContext } from './context';\nimport './grid.css';\n\nexport type GridSectionProps = {\n  className?: string;\n  children?: ReactNode;\n  horizontal?: boolean;\n  stretch?: boolean;\n  fixedWidth?: number;\n  fixedHeight?: number;\n  /** Extra customizable parts only for the really picky */\n  style?: CSSProperties;\n  editorStyle?: CSSProperties;\n};\n\nconst GridSection: React.FC<GridSectionProps> = ({\n  className,\n  children,\n  horizontal,\n  stretch,\n  fixedWidth,\n  fixedHeight,\n  style,\n  editorStyle,\n}) => {\n  const { editing: enabled } = useAlignContext();\n\n  return (\n    <div\n      className={`section ${className} ${horizontal ? 'horizontal' : ''} ${\n        stretch ? 'stretch' : ''\n      }`}\n      style={{\n        ...(enabled ? editorStyle : style),\n        ...(typeof fixedHeight === 'number'\n          ? {\n              height: fixedHeight + 'px',\n            }\n          : {}),\n        ...(typeof fixedWidth === 'number'\n          ? {\n              width: fixedWidth + 'px',\n            }\n          : {}),\n      }}\n    >\n      {children}\n    </div>\n  );\n};\n\nexport default GridSection;\n","import React, { CSSProperties, ReactNode, useCallback, useState } from 'react';\nimport {\n  DragDropContext,\n  DropResult,\n  ResponderProvided,\n} from 'react-beautiful-dnd';\n\nimport { Context } from './context';\nimport { Alignment } from './GridArea';\nimport './grid.css';\n\nexport type GridWrapperProps = {\n  className?: string;\n  children?: ReactNode;\n  editing?: boolean;\n  vertical?: boolean;\n  stretch?: boolean;\n  /** Extra customizable parts only for the really picky */\n  style?: CSSProperties;\n  editorStyle?: CSSProperties;\n  onMove?: (\n    id: string,\n    destAreaId: string,\n    destIndex: number,\n    prevAreaId: string,\n    prevIndex: number\n  ) => void;\n  onAlignChange?: (areaId: string, align: Alignment) => void;\n  onExtend?: (id: string, extended: boolean) => void;\n};\n\nconst GridWrapper: React.FC<GridWrapperProps> = ({\n  className,\n  children,\n  editing,\n  vertical,\n  stretch,\n  style,\n  editorStyle,\n  onMove,\n  onAlignChange,\n  onExtend,\n}) => {\n  const [isDragging, setDragging] = useState(false);\n\n  const handleDragStart = useCallback(() => {\n    setDragging(true);\n  }, []);\n\n  const handleDragEnd = useCallback(\n    (result: DropResult, _provided: ResponderProvided) => {\n      setDragging(false);\n      if (\n        !result.destination ||\n        result.reason !== 'DROP' ||\n        (result.destination.droppableId === result.source.droppableId &&\n          result.destination.index === result.source.index)\n      )\n        return;\n      onMove?.(\n        result.draggableId,\n        result.destination.droppableId,\n        result.destination.index,\n        result.source.droppableId,\n        result.source.index\n      );\n    },\n    [onMove]\n  );\n\n  return (\n    <div\n      className={`wrapper ${className} ${vertical && 'vertical'} ${stretch &&\n        'stretch'}`}\n      style={editing ? editorStyle : style}\n    >\n      <DragDropContext onDragStart={handleDragStart} onDragEnd={handleDragEnd}>\n        <Context.Provider\n          value={{ editing: !!editing, onAlignChange, onExtend, isDragging }}\n        >\n          {children}\n        </Context.Provider>\n      </DragDropContext>\n    </div>\n  );\n};\n\nexport default GridWrapper;\n"],"names":["Context","createContext","editing","isDragging","useAlignContext","useContext","css","ref","insertAt","document","head","getElementsByTagName","style","createElement","type","firstChild","insertBefore","appendChild","styleSheet","cssText","createTextNode","horizontalExtend","horizontalNormal","verticalExtend","verticalNormal","moveArrows","alignStart","alignCenter","alignEnd","alignStartV","alignCenterV","alignEndV","Icon","React","Icons","name","className","onClick","alignments","id","vertical","stretch","end","disabled","align","onAlignChange","children","editorStyle","iconColor","enabled","onAlignChange2","handleAlignChange","useCallback","a","indexOf","length","buttonStyle","useMemo","position","left","undefined","right","bottom","top","opacity","pointerEvents","transition","childrenWithParentProps","Children","map","child","cloneElement","Droppable","droppableId","direction","isDropDisabled","provided","snapshot","innerRef","droppableProps","filter","Boolean","join","flexDirection","minHeight","count","minWidth","isDraggingOver","placeholder","cursor","color","index","extendable","extended","onExtend","useState","isHovered","setHovered","handleExtend","buttonStyles","alignItems","ctx","Draggable","draggableId","isDragDisabled","draggableProps","flex","display","width","height","onMouseEnter","onMouseLeave","dragHandleProps","marginLeft","horizontal","fixedWidth","fixedHeight","onMove","setDragging","handleDragStart","handleDragEnd","result","_provided","destination","reason","source","DragDropContext","onDragStart","onDragEnd","Provider","value"],"mappings":"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"}