@economic/taco 1.24.0 → 1.25.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@economic/taco",
-    "version": "1.24.0",
+    "version": "1.25.0",
     "description": "> TODO: description",
     "author": "Matt Daly <matthew.daly@visma.com>",
     "homepage": "https://github.com/e-conomic/taco#readme",
@@ -82,6 +82,7 @@
         "@babel/preset-react": "^7.18.6",
         "@babel/preset-typescript": "^7.18.6",
         "@svgr/cli": "^5.5.0",
+        "@tailwindcss/line-clamp": "^0.4.2",
         "@testing-library/dom": "^7.31.0",
         "@testing-library/jest-dom": "^5.16.5",
         "@testing-library/react": "^11.1.0",
@@ -131,5 +132,5 @@
             "not ie < 11"
         ]
     },
-    "gitHead": "9c1d9b9fe0dc50f97201f045097bc92ef5027125"
+    "gitHead": "e41b539b50bb7fdf9ca82dc51224bcb7ce8ef7d7"
 }

package/tailwind.config.js

@@ -41,6 +41,7 @@ module.exports = {
     plugins: [
         require('./plugins/tailwindcss-aria-attributes'),
         require('./plugins/tailwindcss-group-peer'),
+        require('@tailwindcss/line-clamp'),
         plugin(function ({ addUtilities, theme }) {
             // ideally we would do this using the @layer utilities directive, but
             // that causes issues in tools like tailwind where the typescript is loaded before the css

package/types.json

@@ -221,6 +221,93 @@
                 }
             ]
         },
+        "DrawerContext": {
+            "props": [
+                {
+                    "name": "closeOnEscape",
+                    "optional": false,
+                    "type": "boolean"
+                },
+                {
+                    "name": "focusTrap",
+                    "optional": true,
+                    "type": "boolean"
+                },
+                {
+                    "name": "onClose",
+                    "optional": true,
+                    "type": {
+                        "returnValue": "void"
+                    }
+                },
+                {
+                    "name": "onResize",
+                    "optional": true,
+                    "type": {
+                        "arguments": {
+                            "delta": "number"
+                        },
+                        "returnValue": "void"
+                    }
+                },
+                {
+                    "name": "open",
+                    "optional": true,
+                    "type": "boolean"
+                },
+                {
+                    "name": "outlet",
+                    "optional": true,
+                    "type": "HTMLElement"
+                },
+                {
+                    "name": "props",
+                    "optional": false,
+                    "type": {
+                        "type": "reflection",
+                        "declaration": {
+                            "id": 1325,
+                            "name": "__type",
+                            "kind": 65536,
+                            "kindString": "Type literal",
+                            "flags": {
+                                "isExported": true
+                            }
+                        }
+                    }
+                },
+                {
+                    "name": "ref",
+                    "optional": false,
+                    "type": "React.Ref<HTMLElement>"
+                },
+                {
+                    "name": "setOpen",
+                    "optional": true,
+                    "type": {
+                        "arguments": {
+                            "open": "boolean"
+                        },
+                        "returnValue": "void"
+                    }
+                },
+                {
+                    "name": "showCloseButton",
+                    "optional": false,
+                    "type": "boolean"
+                },
+                {
+                    "name": "size",
+                    "optional": false,
+                    "type": "DrawerSize"
+                },
+                {
+                    "name": "variant",
+                    "optional": false,
+                    "type": "DrawerVariant"
+                }
+            ]
+        },
         "LayoutContextValue": {
             "props": [
                 {
@@ -478,6 +565,59 @@
         },
         "DialogFooterProps": "HTMLAttributes<HTMLDivElement>",
         "DialogTitleProps": "HTMLAttributes<HTMLHeadingElement>",
+        "DrawerCloseProps": "HTMLAttributes<HTMLButtonElement>",
+        "DrawerContentProps": {
+            "intersections": [
+                "Omit<HTMLAttributes<HTMLDivElement>, 'children'>"
+            ],
+            "props": [
+                {
+                    "description": "An accessible label to be announced when the side drawer is opened",
+                    "name": "aria-label",
+                    "optional": false,
+                    "type": "string"
+                },
+                {
+                    "name": "children",
+                    "optional": false,
+                    "type": [
+                        "Omit<React.ReactNode, 'Function'>",
+                        {
+                            "arguments": {
+                                "props": "DrawerContentRenderProps"
+                            },
+                            "returnValue": "Element"
+                        }
+                    ]
+                }
+            ]
+        },
+        "DrawerContentRenderProps": {
+            "props": [
+                {
+                    "name": "close",
+                    "optional": false,
+                    "type": {
+                        "returnValue": "void"
+                    }
+                }
+            ]
+        },
+        "DrawerFooterProps": "HTMLAttributes<HTMLDivElement>",
+        "DrawerInnerContentProps": {
+            "intersections": [
+                "HTMLAttributes<HTMLDivElement>"
+            ],
+            "props": [
+                {
+                    "description": "Consumer might want to use innerContent component to apply default paddings, but want to implement custom scrolling behaviour,\ndefault value - true",
+                    "name": "isScrollable",
+                    "optional": true,
+                    "type": "boolean"
+                }
+            ]
+        },
+        "DrawerTitleProps": "HTMLAttributes<HTMLHeadingElement>",
         "LayoutContentProps": "HTMLAttributes<HTMLDivElement>",
         "MenuContentProps": {
             "intersections": [
@@ -512,6 +652,7 @@
     "Trigger": {
         "AlertDialogTriggerProps": "HTMLAttributes<HTMLButtonElement>",
         "DialogTriggerProps": "HTMLAttributes<HTMLButtonElement>",
+        "DrawerTriggerProps": "HTMLAttributes<HTMLButtonElement>",
         "MenuTriggerProps": {
             "intersections": [
                 "Omit<HTMLAttributes<HTMLButtonElement>, 'children'>"
@@ -1142,7 +1283,7 @@
             "'lg'"
         ]
     },
-    "Drawer": {
+    "DialogDrawer": {
         "DialogDrawerProps": {
             "intersections": [
                 "Omit<HTMLAttributes<HTMLDivElement>, 'onAnimationStart' | 'onDragStart' | 'onDragEnd' | 'onDrag'>"
@@ -1178,6 +1319,176 @@
     "Extra": {
         "DialogExtraProps": "HTMLAttributes<HTMLDivElement>"
     },
+    "Drawer": {
+        "DrawerProps": {
+            "intersections": [
+                "Omit<DialogProps, 'draggable' | 'size'>"
+            ],
+            "props": [
+                {
+                    "name": "children",
+                    "optional": false,
+                    "type": [
+                        "React.ReactNode",
+                        "React.ReactNode[]"
+                    ]
+                },
+                {
+                    "description": "className for children container, needed for embedded version, in cases where we might need to control children height",
+                    "name": "className",
+                    "optional": true,
+                    "type": "string"
+                },
+                {
+                    "description": "When `true`, pressing escape will close the drawer",
+                    "name": "closeOnEscape",
+                    "optional": true,
+                    "type": "boolean"
+                },
+                {
+                    "description": "Set whether the drawer is open by default or not, use when not providing a trigger",
+                    "name": "defaultOpen",
+                    "optional": true,
+                    "type": "boolean"
+                },
+                {
+                    "description": "When 'true' preventing focus from leaving drawer content",
+                    "name": "focusTrap",
+                    "optional": true,
+                    "type": "boolean"
+                },
+                {
+                    "description": "Called when the drawer opens or closes, must be used in conjunction with open",
+                    "name": "onChange",
+                    "optional": true,
+                    "type": {
+                        "arguments": {
+                            "open": [
+                                "boolean",
+                                "undefined"
+                            ]
+                        },
+                        "returnValue": "void"
+                    }
+                },
+                {
+                    "description": "Handler called when drawer closes by user interaction",
+                    "name": "onClose",
+                    "optional": true,
+                    "type": {
+                        "returnValue": "void"
+                    }
+                },
+                {
+                    "description": "Triggers when resizing, can be throttled or debounced for better performances",
+                    "name": "onResize",
+                    "optional": true,
+                    "type": {
+                        "arguments": {
+                            "delta": "number"
+                        },
+                        "returnValue": "void"
+                    }
+                },
+                {
+                    "description": "Control the open state of the drawer from outside the component",
+                    "name": "open",
+                    "optional": true,
+                    "type": "boolean"
+                },
+                {
+                    "description": "When 'true' renders close button in topr right cornenr of drawer content",
+                    "name": "showCloseButton",
+                    "optional": true,
+                    "type": "boolean"
+                },
+                {
+                    "description": "Size of the drawer. This is the recommended way to set a size for drawer component.",
+                    "name": "size",
+                    "optional": true,
+                    "type": "DrawerSize"
+                },
+                {
+                    "description": "A trigger to be used for the drawer, should not be set if `children` already contains a trigger",
+                    "name": "trigger",
+                    "optional": true,
+                    "type": "JSX.Element"
+                },
+                {
+                    "description": "Rendering variant of the drawer",
+                    "name": "variant",
+                    "optional": true,
+                    "type": "DrawerVariant"
+                }
+            ]
+        },
+        "DrawerTexts": {
+            "props": [
+                {
+                    "description": "Aria-label for close icon button in drawer.",
+                    "name": "close",
+                    "optional": false,
+                    "type": "string"
+                }
+            ]
+        },
+        "ForwardedDrawerWithStatics": {
+            "intersections": [
+                "ForwardRefExoticComponent<DrawerProps & RefAttributes<HTMLElement>>"
+            ],
+            "props": [
+                {
+                    "name": "Actions",
+                    "optional": false,
+                    "type": "ForwardRefExoticComponent<GroupProps & RefAttributes<HTMLDivElement>>"
+                },
+                {
+                    "name": "Close",
+                    "optional": false,
+                    "type": "ForwardRefExoticComponent<DrawerCloseProps & RefAttributes<HTMLButtonElement>>"
+                },
+                {
+                    "name": "Content",
+                    "optional": false,
+                    "type": "ForwardRefExoticComponent<DrawerContentProps & RefAttributes<HTMLDivElement>>"
+                },
+                {
+                    "name": "Footer",
+                    "optional": false,
+                    "type": "ForwardRefExoticComponent<DrawerFooterProps & RefAttributes<HTMLDivElement>>"
+                },
+                {
+                    "name": "InnerContent",
+                    "optional": false,
+                    "type": "ForwardRefExoticComponent<DrawerInnerContentProps & RefAttributes<HTMLDivElement>>"
+                },
+                {
+                    "name": "Outlet",
+                    "optional": false,
+                    "type": "ForwardRefExoticComponent<OutletProps & RefAttributes<HTMLDivElement>>"
+                },
+                {
+                    "name": "Title",
+                    "optional": false,
+                    "type": "ForwardRefExoticComponent<DrawerTitleProps & RefAttributes<HTMLHeadingElement>>"
+                },
+                {
+                    "name": "Trigger",
+                    "optional": false,
+                    "type": "ForwardRefExoticComponent<DrawerTriggerProps & RefAttributes<HTMLButtonElement>>"
+                }
+            ]
+        },
+        "OutletProps": "HTMLAttributes<HTMLDivElement>",
+        "DrawerSize": [
+            "'md'",
+            "'lg'"
+        ],
+        "DrawerVariant": [
+            "'overlay'",
+            "'embedded'"
+        ]
+    },
     "Field": {
         "FieldProps": {
             "intersections": [
@@ -2978,6 +3289,12 @@
                     "optional": false,
                     "type": "DialogTexts"
                 },
+                {
+                    "description": "Localized texts and aria-labels for [Drawer](component:drawer) component",
+                    "name": "drawer",
+                    "optional": false,
+                    "type": "DrawerTexts"
+                },
                 {
                     "description": "Localized texts and aria-labels for [Hanger](component:hanger) component",
                     "name": "hanger",
@@ -3486,7 +3803,7 @@
                 {
                     "type": "reflection",
                     "declaration": {
-                        "id": 3102,
+                        "id": 3248,
                         "name": "__type",
                         "kind": 65536,
                         "kindString": "Type literal",
@@ -3686,7 +4003,7 @@
                     "constraint": {
                         "type": "reflection",
                         "declaration": {
-                            "id": 1837,
+                            "id": 1988,
                             "name": "__type",
                             "kind": 65536,
                             "kindString": "Type literal",

package/dist/components/Dialog/components/Drawer.d.ts

@@ -1,10 +0,0 @@
-import * as React from 'react';
-import { DialogContext } from '../Context';
-export declare type DialogDrawerRenderProps = DialogContext['drawer'];
-export declare type DialogDrawerProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'onAnimationStart' | 'onDragStart' | 'onDragEnd' | 'onDrag'> & {
-    children: Omit<React.ReactNode, 'Function'> | ((props: DialogDrawerRenderProps) => React.ReactNode);
-};
-declare const Drawer: React.ForwardRefExoticComponent<Pick<React.HTMLAttributes<HTMLDivElement>, "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "nonce" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDragCapture" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & {
-    children: Pick<React.ReactNode, never> | ((props: DialogDrawerRenderProps) => React.ReactNode);
-} & React.RefAttributes<HTMLDivElement>>;
-export { Drawer };

package/dist/esm/packages/taco/src/components/Dialog/components/Drawer.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Drawer.js","sources":["../../../../../../../../src/components/Dialog/components/Drawer.tsx"],"sourcesContent":["import * as React from 'react';\nimport { motion } from 'framer-motion';\nimport cn from 'classnames';\nimport { DialogContext, useCurrentDialog } from '../Context';\n\nexport type DialogDrawerRenderProps = DialogContext['drawer'];\n\nexport type DialogDrawerProps = Omit<\n    React.HTMLAttributes<HTMLDivElement>,\n    'onAnimationStart' | 'onDragStart' | 'onDragEnd' | 'onDrag'\n> & {\n    children: Omit<React.ReactNode, 'Function'> | ((props: DialogDrawerRenderProps) => React.ReactNode);\n};\n\nconst Drawer = React.forwardRef(function DialogDrawer(props: DialogDrawerProps, ref: React.Ref<HTMLDivElement>) {\n    const dialog = useCurrentDialog();\n    const className = cn(\n        'absolute top-0  -ml-[4px] hidden h-full w-full overflow-y-auto rounded-r bg-white p-6 text-left',\n        props.className\n    );\n\n    return (\n        <motion.div\n            {...props}\n            className={className}\n            data-taco=\"dialog-drawer\"\n            aria-hidden={!dialog.drawer?.open}\n            variants={{\n                visible: {\n                    left: '100%',\n                    display: 'block',\n                    transition: { ease: 'easeOut', duration: 0.2 },\n                },\n                hidden: {\n                    left: '0%',\n                    transition: { ease: 'easeOut', duration: 0.2 },\n                    transitionEnd: {\n                        display: 'none',\n                    },\n                },\n            }}\n            animate={dialog.drawer?.open ? 'visible' : 'hidden'}\n            ref={ref}>\n            {typeof props.children === 'function' ? props.children(dialog.drawer) : props.children}\n        </motion.div>\n    );\n});\nDrawer.displayName = 'DialogDrawer';\n\nexport { Drawer };\n"],"names":["Drawer","React","DialogDrawer","props","ref","dialog","useCurrentDialog","className","cn","motion","div","drawer","open","variants","visible","left","display","transition","ease","duration","hidden","transitionEnd","animate","children","displayName"],"mappings":";;;;;MAcMA,MAAM,gBAAGC,UAAgB,CAAC,SAASC,YAAY,CAACC,KAAwB,EAAEC,GAA8B;;EAC1G,MAAMC,MAAM,GAAGC,gBAAgB,EAAE;EACjC,MAAMC,SAAS,GAAGC,EAAE,CAChB,iGAAiG,EACjGL,KAAK,CAACI,SAAS,CAClB;EAED,oBACIN,cAACQ,MAAM,CAACC,GAAG,oBACHP,KAAK;IACTI,SAAS,EAAEA,SAAS;iBACV,eAAe;mBACZ,oBAACF,MAAM,CAACM,MAAM,2CAAb,eAAeC,IAAI;IACjCC,QAAQ,EAAE;MACNC,OAAO,EAAE;QACLC,IAAI,EAAE,MAAM;QACZC,OAAO,EAAE,OAAO;QAChBC,UAAU,EAAE;UAAEC,IAAI,EAAE,SAAS;UAAEC,QAAQ,EAAE;;OAC5C;MACDC,MAAM,EAAE;QACJL,IAAI,EAAE,IAAI;QACVE,UAAU,EAAE;UAAEC,IAAI,EAAE,SAAS;UAAEC,QAAQ,EAAE;SAAK;QAC9CE,aAAa,EAAE;UACXL,OAAO,EAAE;;;KAGpB;IACDM,OAAO,EAAE,mBAAAjB,MAAM,CAACM,MAAM,4CAAb,gBAAeC,IAAI,GAAG,SAAS,GAAG,QAAQ;IACnDR,GAAG,EAAEA;MACJ,OAAOD,KAAK,CAACoB,QAAQ,KAAK,UAAU,GAAGpB,KAAK,CAACoB,QAAQ,CAAClB,MAAM,CAACM,MAAM,CAAC,GAAGR,KAAK,CAACoB,QAAQ,CAC7E;AAErB,CAAC;AACDvB,MAAM,CAACwB,WAAW,GAAG,cAAc;;;;"}