@economic/taco 2.40.0 → 2.40.1

package/dist/esm/packages/taco/src/components/Datepicker/useDatepicker.js

@@ -0,0 +1,87 @@
+import { useState, useEffect } from 'react';
+import { useMergedRef } from '../../hooks/useMergedRef.js';
+import { useLocalization } from '../Provider/Localization.js';
+import { setInputValueByRef } from '../../utils/input.js';
+import { isValid } from 'date-fns';
+import { format, parseFromCustomString } from '../../utils/date.js';
+
+const useDatepicker = ({
+  defaultValue: _,
+  calendar,
+  onBlur,
+  onChange,
+  value,
+  ...props
+}, ref) => {
+  const inputRef = useMergedRef(ref);
+  const {
+    formatting
+  } = useLocalization();
+  const [internalValue, setInternalValue] = useState(value && isValid(value) ? format(value, formatting.date) : '');
+  // update internal value if it changed 'externally'
+  useEffect(() => {
+    if (value && isValid(value)) {
+      const formattedValue = format(value, formatting.date);
+      if (formattedValue !== internalValue) {
+        setInternalValue(formattedValue);
+      }
+    } else {
+      setInternalValue('');
+    }
+  }, [value]);
+  // event handlers
+  const handleInputBlur = event => {
+    event.persist();
+    const valueAsDate = parseFromCustomString(event.target.value, 'dd.mm.yy', value === null || value === void 0 ? void 0 : value.getMonth(), value === null || value === void 0 ? void 0 : value.getFullYear());
+    const formattedValue = valueAsDate ? format(valueAsDate) || '' : '';
+    event.target.value = formattedValue;
+    if (onChange) {
+      event.detail = valueAsDate;
+      onChange(event);
+    } else {
+      // update the internal value to use the formatted date
+      setInternalValue(formattedValue);
+    }
+    if (onBlur) {
+      onBlur(event);
+    }
+  };
+  const handleInputChange = event => {
+    setInternalValue(event.target.value);
+  };
+  const handleChange = date => {
+    setInputValueByRef(inputRef.current, format(date, formatting.date), 'focusout');
+  };
+  const handleKeyDown = event => {
+    if (props.onKeyDown) {
+      props.onKeyDown(event);
+    }
+    if (!event.isPropagationStopped() && !event.isDefaultPrevented() && event.key === 'Enter') {
+      event.target.dispatchEvent(new Event('focusout', {
+        bubbles: true
+      }));
+    }
+  };
+  const inputProps = {
+    ...props,
+    autoComplete: 'off',
+    onBlur: handleInputBlur,
+    onChange: handleInputChange,
+    onKeyDown: handleKeyDown,
+    ref: inputRef,
+    type: 'text',
+    value: internalValue
+  };
+  const calendarProps = {
+    ...calendar,
+    onChange: handleChange,
+    value
+  };
+  return {
+    input: inputProps,
+    calendar: calendarProps
+  };
+};
+
+export { useDatepicker };
+//# sourceMappingURL=useDatepicker.js.map

package/dist/esm/packages/taco/src/components/Datepicker/useDatepicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDatepicker.js","sources":["../../../../../../../src/components/Datepicker/useDatepicker.tsx"],"sourcesContent":["import * as React from 'react';\nimport { parseFromCustomString, format } from '../../utils/date';\nimport { useLocalization } from '../Provider/Localization';\nimport { setInputValueByRef } from '../../utils/input';\nimport { useMergedRef } from '../../hooks/useMergedRef';\nimport { DatepickerProps } from './Datepicker';\nimport { CalendarProps } from '../Calendar/Calendar';\nimport { InputProps as BaseInputProps } from '../Input/Input';\nimport { isValid } from 'date-fns';\n\ntype InputProps = BaseInputProps & { ref: React.RefObject<HTMLInputElement> };\ntype useDatepicker = React.HTMLAttributes<HTMLDivElement> & {\n    calendar: CalendarProps;\n    input: InputProps;\n};\n\nexport const useDatepicker = (\n    { defaultValue: _, calendar, onBlur, onChange, value, ...props }: DatepickerProps,\n    ref: React.Ref<HTMLInputElement>\n): useDatepicker => {\n    const inputRef = useMergedRef<HTMLInputElement>(ref);\n    const { formatting } = useLocalization();\n    const [internalValue, setInternalValue] = React.useState(value && isValid(value) ? format(value, formatting.date) : '');\n\n    // update internal value if it changed 'externally'\n    React.useEffect(() => {\n        if (value && isValid(value)) {\n            const formattedValue = format(value, formatting.date);\n\n            if (formattedValue !== internalValue) {\n                setInternalValue(formattedValue);\n            }\n        } else {\n            setInternalValue('');\n        }\n    }, [value]);\n\n    // event handlers\n    const handleInputBlur = (event: React.FocusEvent<HTMLInputElement>): void => {\n        event.persist();\n\n        const valueAsDate = parseFromCustomString(event.target.value, 'dd.mm.yy', value?.getMonth(), value?.getFullYear());\n        const formattedValue = valueAsDate ? format(valueAsDate) || '' : '';\n\n        event.target.value = formattedValue;\n\n        if (onChange) {\n            (event as any).detail = valueAsDate;\n            onChange(event);\n        } else {\n            // update the internal value to use the formatted date\n            setInternalValue(formattedValue);\n        }\n\n        if (onBlur) {\n            onBlur(event);\n        }\n    };\n\n    const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>): void => {\n        setInternalValue(event.target.value);\n    };\n\n    const handleChange = date => {\n        setInputValueByRef(inputRef.current, format(date, formatting.date), 'focusout');\n    };\n\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n        if (props.onKeyDown) {\n            props.onKeyDown(event);\n        }\n\n        if (!event.isPropagationStopped() && !event.isDefaultPrevented() && event.key === 'Enter') {\n            event.target.dispatchEvent(new Event('focusout', { bubbles: true }));\n        }\n    };\n\n    const inputProps: InputProps = {\n        ...props,\n        autoComplete: 'off',\n        onBlur: handleInputBlur,\n        onChange: handleInputChange,\n        onKeyDown: handleKeyDown,\n        ref: inputRef,\n        type: 'text',\n        value: internalValue,\n    };\n\n    const calendarProps: CalendarProps = {\n        ...calendar,\n        onChange: handleChange,\n        value,\n    };\n\n    return {\n        input: inputProps,\n        calendar: calendarProps,\n    };\n};\n"],"names":["useDatepicker","defaultValue","_","calendar","onBlur","onChange","value","props","ref","inputRef","useMergedRef","formatting","useLocalization","internalValue","setInternalValue","React","isValid","format","date","formattedValue","handleInputBlur","event","persist","valueAsDate","parseFromCustomString","target","getMonth","getFullYear","detail","handleInputChange","handleChange","setInputValueByRef","current","handleKeyDown","onKeyDown","isPropagationStopped","isDefaultPrevented","key","dispatchEvent","Event","bubbles","inputProps","autoComplete","type","calendarProps","input"],"mappings":"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"}

package/dist/esm/packages/taco/src/components/Dialog/Context.js

@@ -0,0 +1,26 @@
+import { createContext, useContext } from 'react';
+
+/* eslint-disable @typescript-eslint/no-empty-function */
+const DialogContext = /*#__PURE__*/createContext({
+  closeOnEscape: true,
+  draggable: false,
+  drawer: {
+    open: false,
+    toggle: () => {}
+  },
+  elements: {
+    drawer: undefined,
+    extra: undefined
+  },
+  onClose: () => {},
+  props: {},
+  ref: null,
+  showCloseButton: true,
+  size: 'sm'
+});
+const useCurrentDialog = () => {
+  return useContext(DialogContext);
+};
+
+export { DialogContext, useCurrentDialog };
+//# sourceMappingURL=Context.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Context.js","sources":["../../../../../../../src/components/Dialog/Context.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-empty-function */\nimport * as React from 'react';\nimport { DialogSize } from './types';\n\nexport type DialogContext = {\n    closeOnEscape: boolean;\n    draggable: boolean;\n    drawer: {\n        open: boolean;\n        toggle: () => void;\n    };\n    elements: {\n        drawer?: React.ReactNode;\n        extra?: React.ReactNode;\n    };\n    onClose?: () => void;\n    props: Record<string, any>;\n    ref: React.Ref<HTMLElement>;\n    showCloseButton: boolean;\n    size: DialogSize;\n};\n\nexport const DialogContext = React.createContext<DialogContext>({\n    closeOnEscape: true,\n    draggable: false,\n    drawer: {\n        open: false,\n        toggle: () => {},\n    },\n    elements: {\n        drawer: undefined,\n        extra: undefined,\n    },\n    onClose: () => {},\n    props: {},\n    ref: null,\n    showCloseButton: true,\n    size: 'sm',\n});\n\nexport const useCurrentDialog = () => {\n    return React.useContext(DialogContext);\n};\n"],"names":["DialogContext","React","closeOnEscape","draggable","drawer","open","toggle","elements","undefined","extra","onClose","props","ref","showCloseButton","size","useCurrentDialog"],"mappings":";;AAAA;MAsBaA,aAAa,gBAAGC,aAAmB,CAAgB;EAC5DC,aAAa,EAAE,IAAI;EACnBC,SAAS,EAAE,KAAK;EAChBC,MAAM,EAAE;IACJC,IAAI,EAAE,KAAK;IACXC,MAAM,EAAEA;GACX;EACDC,QAAQ,EAAE;IACNH,MAAM,EAAEI,SAAS;IACjBC,KAAK,EAAED;GACV;EACDE,OAAO,EAAEA,QAAQ;EACjBC,KAAK,EAAE,EAAE;EACTC,GAAG,EAAE,IAAI;EACTC,eAAe,EAAE,IAAI;EACrBC,IAAI,EAAE;CACT;MAEYC,gBAAgB,GAAGA;EAC5B,OAAOd,UAAgB,CAACD,aAAa,CAAC;AAC1C;;;;"}

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

@@ -0,0 +1,77 @@
+import { forwardRef, useMemo, Children, useState, createElement } from 'react';
+import { Root } from '@radix-ui/react-dialog';
+import { DialogContext } from './Context.js';
+import { Trigger } from './components/Trigger.js';
+import { Content, Title, Footer, Close } from './components/Content.js';
+import { DialogDrawer } from './components/DialogDrawer.js';
+import { Extra } from './components/Extra.js';
+
+const useSeparatedChildren = initialChildren => {
+  return useMemo(() => {
+    const children = [];
+    let drawer;
+    let extra;
+    Children.toArray(initialChildren).forEach(child => {
+      var _child$type, _child$type2;
+      if (((_child$type = child.type) === null || _child$type === void 0 ? void 0 : _child$type.displayName) === DialogDrawer.displayName) {
+        drawer = child;
+      } else if (((_child$type2 = child.type) === null || _child$type2 === void 0 ? void 0 : _child$type2.displayName) === Extra.displayName) {
+        extra = child;
+      } else {
+        children.push(child);
+      }
+    });
+    return [children, drawer, extra];
+  }, [initialChildren]);
+};
+const Dialog = /*#__PURE__*/forwardRef(function Dialog(props, ref) {
+  const {
+    children: initialChildren,
+    closeOnEscape = true,
+    defaultOpen,
+    draggable = false,
+    onChange,
+    onClose,
+    open,
+    showCloseButton = true,
+    size = 'sm',
+    trigger,
+    ...otherProps
+  } = props;
+  const [children, drawer, extra] = useSeparatedChildren(initialChildren);
+  const [drawerOpen, setDrawerOpen] = useState(false);
+  const context = useMemo(() => ({
+    closeOnEscape,
+    draggable,
+    drawer: {
+      open: drawerOpen,
+      toggle: () => setDrawerOpen(isDrawerOpen => !isDrawerOpen)
+    },
+    elements: {
+      drawer,
+      extra
+    },
+    onClose,
+    props: otherProps,
+    showCloseButton,
+    size,
+    ref
+  }), [closeOnEscape, drawerOpen, draggable, drawer, extra, open, otherProps, showCloseButton]);
+  return /*#__PURE__*/createElement(DialogContext.Provider, {
+    value: context
+  }, /*#__PURE__*/createElement(Root, {
+    defaultOpen: defaultOpen,
+    open: open,
+    onOpenChange: onChange
+  }, trigger && /*#__PURE__*/createElement(Trigger, null, trigger), children));
+});
+Dialog.Trigger = Trigger;
+Dialog.Content = Content;
+Dialog.Title = Title;
+Dialog.Footer = Footer;
+Dialog.Extra = Extra;
+Dialog.Drawer = DialogDrawer;
+Dialog.Close = Close;
+
+export { Dialog };
+//# sourceMappingURL=Dialog.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Dialog.js","sources":["../../../../../../../src/components/Dialog/Dialog.tsx"],"sourcesContent":["import * as React from 'react';\nimport * as DialogPrimitive from '@radix-ui/react-dialog';\nimport './Dialog.css';\nimport { DialogTriggerProps, Trigger } from './components/Trigger';\nimport {\n    Content,\n    Title,\n    Footer,\n    Close,\n    DialogContentProps,\n    DialogContentRenderProps,\n    DialogContentDrawerRenderProps,\n    DialogTitleProps,\n    DialogFooterProps,\n    DialogCloseProps,\n} from './components/Content';\nimport { DialogDrawerProps, DialogDrawerRenderProps, DialogDrawer } from './components/DialogDrawer';\nimport { DialogExtraProps, Extra } from './components/Extra';\nimport { DialogContext } from './Context';\nimport { DialogSize } from './types';\n\nexport type {\n    DialogCloseProps,\n    DialogContentDrawerRenderProps,\n    DialogContentProps,\n    DialogContentRenderProps,\n    DialogDrawerProps,\n    DialogDrawerRenderProps,\n    DialogFooterProps,\n    DialogSize,\n    DialogTitleProps,\n};\n\nexport type DialogTexts = {\n    /**\n     * Aria-label for close icon button in dialog.\n     * To read more about how to provide the text, see [Provider](component:provider) component\n     */\n    close: string;\n    drag: string;\n};\n\nexport type DialogProps = {\n    children: React.ReactNode | React.ReactNode[];\n    /** When `true`, pressing escape will close the dialog */\n    closeOnEscape?: boolean;\n    /** Set whether the dialog is open by default or not  */\n    defaultOpen?: boolean;\n    /** Allows dragging the dialog around the screen (window constrained) */\n    draggable?: boolean;\n    /** Handler called when dialog closes by user interaction */\n    onClose?: () => void;\n    /** Called when the dialog opens or closes, must be used in conjunction with open  */\n    onChange?: (open: boolean) => void;\n    /** Control the open state of the dialog from outside the component  */\n    open?: boolean;\n    /** Shows the close icon button of the dialog */\n    showCloseButton?: boolean;\n    /** Size of the dialog. This is the recommended way to set a size for dialog component. */\n    size?: DialogSize;\n    /** A trigger to be used for the dialog, should not be set if `children` already contains a trigger */\n    trigger?: JSX.Element;\n};\n\nconst useSeparatedChildren = initialChildren => {\n    return React.useMemo(() => {\n        const children: any[] = [];\n        let drawer;\n        let extra;\n\n        React.Children.toArray(initialChildren).forEach((child: any) => {\n            if (child.type?.displayName === DialogDrawer.displayName) {\n                drawer = child;\n            } else if (child.type?.displayName === Extra.displayName) {\n                extra = child;\n            } else {\n                children.push(child);\n            }\n        });\n\n        return [children, drawer, extra];\n    }, [initialChildren]);\n};\n\nexport type ForwardedDialogWithStatics = React.ForwardRefExoticComponent<DialogProps & React.RefAttributes<HTMLElement>> & {\n    Trigger: React.ForwardRefExoticComponent<DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;\n    Content: React.ForwardRefExoticComponent<DialogContentProps & React.RefAttributes<HTMLDivElement>>;\n    Title: React.ForwardRefExoticComponent<DialogTitleProps & React.RefAttributes<HTMLHeadingElement>>;\n    Footer: React.ForwardRefExoticComponent<DialogFooterProps & React.RefAttributes<HTMLDivElement>>;\n    Extra: React.ForwardRefExoticComponent<DialogExtraProps & React.RefAttributes<HTMLDivElement>>;\n    Drawer: React.ForwardRefExoticComponent<DialogDrawerProps & React.RefAttributes<HTMLDivElement>>;\n    Close: React.ForwardRefExoticComponent<DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;\n};\n\nexport const Dialog = React.forwardRef(function Dialog(props: DialogProps, ref: React.Ref<HTMLElement>) {\n    const {\n        children: initialChildren,\n        closeOnEscape = true,\n        defaultOpen,\n        draggable = false,\n        onChange,\n        onClose,\n        open,\n        showCloseButton = true,\n        size = 'sm',\n        trigger,\n        ...otherProps\n    } = props;\n    const [children, drawer, extra] = useSeparatedChildren(initialChildren);\n    const [drawerOpen, setDrawerOpen] = React.useState(false);\n\n    const context = React.useMemo(\n        () => ({\n            closeOnEscape,\n            draggable,\n            drawer: {\n                open: drawerOpen,\n                toggle: () => setDrawerOpen(isDrawerOpen => !isDrawerOpen),\n            },\n            elements: {\n                drawer,\n                extra,\n            },\n            onClose,\n            props: otherProps,\n            showCloseButton,\n            size,\n            ref,\n        }),\n        [closeOnEscape, drawerOpen, draggable, drawer, extra, open, otherProps, showCloseButton]\n    );\n\n    return (\n        <DialogContext.Provider value={context}>\n            <DialogPrimitive.Root defaultOpen={defaultOpen} open={open} onOpenChange={onChange}>\n                {trigger && <Trigger>{trigger}</Trigger>}\n                {children}\n            </DialogPrimitive.Root>\n        </DialogContext.Provider>\n    );\n}) as ForwardedDialogWithStatics;\n\nDialog.Trigger = Trigger;\nDialog.Content = Content;\nDialog.Title = Title;\nDialog.Footer = Footer;\nDialog.Extra = Extra;\nDialog.Drawer = DialogDrawer;\nDialog.Close = Close;\n"],"names":["useSeparatedChildren","initialChildren","React","children","drawer","extra","toArray","forEach","child","_child$type","type","displayName","DialogDrawer","_child$type2","Extra","push","Dialog","props","ref","closeOnEscape","defaultOpen","draggable","onChange","onClose","open","showCloseButton","size","trigger","otherProps","drawerOpen","setDrawerOpen","context","toggle","isDrawerOpen","elements","DialogContext","Provider","value","DialogPrimitive","onOpenChange","Trigger","Content","Title","Footer","Drawer","Close"],"mappings":";;;;;;;;AAgEA,MAAMA,oBAAoB,GAAGC,eAAe;EACxC,OAAOC,OAAa,CAAC;IACjB,MAAMC,QAAQ,GAAU,EAAE;IAC1B,IAAIC,MAAM;IACV,IAAIC,KAAK;IAETH,QAAc,CAACI,OAAO,CAACL,eAAe,CAAC,CAACM,OAAO,CAAEC,KAAU;;MACvD,IAAI,EAAAC,WAAA,GAAAD,KAAK,CAACE,IAAI,cAAAD,WAAA,uBAAVA,WAAA,CAAYE,WAAW,MAAKC,YAAY,CAACD,WAAW,EAAE;QACtDP,MAAM,GAAGI,KAAK;OACjB,MAAM,IAAI,EAAAK,YAAA,GAAAL,KAAK,CAACE,IAAI,cAAAG,YAAA,uBAAVA,YAAA,CAAYF,WAAW,MAAKG,KAAK,CAACH,WAAW,EAAE;QACtDN,KAAK,GAAGG,KAAK;OAChB,MAAM;QACHL,QAAQ,CAACY,IAAI,CAACP,KAAK,CAAC;;KAE3B,CAAC;IAEF,OAAO,CAACL,QAAQ,EAAEC,MAAM,EAAEC,KAAK,CAAC;GACnC,EAAE,CAACJ,eAAe,CAAC,CAAC;AACzB,CAAC;MAYYe,MAAM,gBAAGd,UAAgB,CAAC,SAASc,MAAMA,CAACC,KAAkB,EAAEC,GAA2B;EAClG,MAAM;IACFf,QAAQ,EAAEF,eAAe;IACzBkB,aAAa,GAAG,IAAI;IACpBC,WAAW;IACXC,SAAS,GAAG,KAAK;IACjBC,QAAQ;IACRC,OAAO;IACPC,IAAI;IACJC,eAAe,GAAG,IAAI;IACtBC,IAAI,GAAG,IAAI;IACXC,OAAO;IACP,GAAGC;GACN,GAAGX,KAAK;EACT,MAAM,CAACd,QAAQ,EAAEC,MAAM,EAAEC,KAAK,CAAC,GAAGL,oBAAoB,CAACC,eAAe,CAAC;EACvE,MAAM,CAAC4B,UAAU,EAAEC,aAAa,CAAC,GAAG5B,QAAc,CAAC,KAAK,CAAC;EAEzD,MAAM6B,OAAO,GAAG7B,OAAa,CACzB,OAAO;IACHiB,aAAa;IACbE,SAAS;IACTjB,MAAM,EAAE;MACJoB,IAAI,EAAEK,UAAU;MAChBG,MAAM,EAAEA,MAAMF,aAAa,CAACG,YAAY,IAAI,CAACA,YAAY;KAC5D;IACDC,QAAQ,EAAE;MACN9B,MAAM;MACNC;KACH;IACDkB,OAAO;IACPN,KAAK,EAAEW,UAAU;IACjBH,eAAe;IACfC,IAAI;IACJR;GACH,CAAC,EACF,CAACC,aAAa,EAAEU,UAAU,EAAER,SAAS,EAAEjB,MAAM,EAAEC,KAAK,EAAEmB,IAAI,EAAEI,UAAU,EAAEH,eAAe,CAAC,CAC3F;EAED,oBACIvB,cAACiC,aAAa,CAACC,QAAQ;IAACC,KAAK,EAAEN;kBAC3B7B,cAACoC,IAAoB;IAAClB,WAAW,EAAEA,WAAW;IAAEI,IAAI,EAAEA,IAAI;IAAEe,YAAY,EAAEjB;KACrEK,OAAO,iBAAIzB,cAACsC,OAAO,QAAEb,OAAO,CAAW,EACvCxB,QAAQ,CACU,CACF;AAEjC,CAAC;AAEDa,MAAM,CAACwB,OAAO,GAAGA,OAAO;AACxBxB,MAAM,CAACyB,OAAO,GAAGA,OAAO;AACxBzB,MAAM,CAAC0B,KAAK,GAAGA,KAAK;AACpB1B,MAAM,CAAC2B,MAAM,GAAGA,MAAM;AACtB3B,MAAM,CAACF,KAAK,GAAGA,KAAK;AACpBE,MAAM,CAAC4B,MAAM,GAAGhC,YAAY;AAC5BI,MAAM,CAAC6B,KAAK,GAAGA,KAAK;;;;"}

package/dist/esm/packages/taco/src/components/Dialog/components/Content.js

@@ -0,0 +1,116 @@
+import { forwardRef, createElement } from 'react';
+import cn from 'clsx';
+import { Backdrop } from '../../Backdrop/Backdrop.js';
+import { getDialogPositionClassnames, getDialogSizeClassnames } from '../util.js';
+import { useMergedRef } from '../../../hooks/useMergedRef.js';
+import { IconButton } from '../../IconButton/IconButton.js';
+import { useLocalization } from '../../Provider/Localization.js';
+import { Title as Title$1, Close as Close$1, Portal, Overlay, Content as Content$1 } from '@radix-ui/react-dialog';
+import { useCurrentDialog } from '../Context.js';
+import { useDraggable } from '../../../utils/hooks/useDraggable.js';
+
+const Title = /*#__PURE__*/forwardRef(function DialogTitle(props, ref) {
+  const className = cn('text-center', props.className);
+  return /*#__PURE__*/createElement(Title$1, Object.assign({}, props, {
+    className: className,
+    ref: ref
+  }));
+});
+const Footer = /*#__PURE__*/forwardRef(function DialogFooter(props, ref) {
+  const className = cn('mt-8 flex justify-end', props.className);
+  return /*#__PURE__*/createElement("div", Object.assign({}, props, {
+    className: className,
+    ref: ref
+  }), props.children);
+});
+const Close = /*#__PURE__*/forwardRef(function DialogClose(props, ref) {
+  const dialog = useCurrentDialog();
+  return /*#__PURE__*/createElement(Close$1, Object.assign({
+    onClick: dialog.onClose
+  }, props, {
+    ref: ref,
+    asChild: true
+  }));
+});
+const RenderPropWrapper = /*#__PURE__*/forwardRef(function RenderPropWrapper({
+  children,
+  onClick,
+  renderProps
+}, ref) {
+  const close = () => {
+    onClick(new CustomEvent('close'));
+  };
+  return children({
+    close,
+    ref,
+    ...renderProps
+  });
+});
+const Content = /*#__PURE__*/forwardRef(function DialogContent(props, ref) {
+  const dialog = useCurrentDialog();
+  const internalRef = useMergedRef(ref);
+  const {
+    position,
+    dragging,
+    handleProps: dragHandleProps
+  } = useDraggable(internalRef);
+  const {
+    texts
+  } = useLocalization();
+  const className = cn('relative bg-white animate-[fade-in_150ms] rounded', getDialogPositionClassnames(), getDialogSizeClassnames(dialog.size), 'print:w-full print:h-full print:m-0 print:overflow-visible');
+  const containerClassName = cn('bg-white p-6 rounded relative z-10 shadow print:p-0 print:overflow-visible print:h-full', {
+    'rounded-b-none': !!dialog.elements.extra
+  }, props.className);
+  const handleEscapeKeyDown = event => {
+    if (!dialog.closeOnEscape) {
+      event.preventDefault();
+    } else if (dialog.onClose) {
+      dialog.onClose();
+    }
+  };
+  // the chosen behaviour in taco is that outside clicks do not close the dialog
+  const handleInteractOutside = event => event.preventDefault();
+  let output;
+  if (typeof props.children === 'function') {
+    output = /*#__PURE__*/createElement(Close, null, /*#__PURE__*/createElement(RenderPropWrapper, {
+      renderProps: {
+        drawer: dialog.drawer
+      }
+    }, props.children));
+  } else {
+    output = props.children;
+  }
+  return /*#__PURE__*/createElement(Portal, null, /*#__PURE__*/createElement(Overlay, {
+    asChild: true
+  }, /*#__PURE__*/createElement(Backdrop, null, /*#__PURE__*/createElement(Content$1, Object.assign({}, props, {
+    className: className,
+    onEscapeKeyDown: handleEscapeKeyDown,
+    onInteractOutside: handleInteractOutside,
+    ref: internalRef,
+    style: {
+      ...props.style,
+      left: dialog.draggable ? `${position.x}px` : undefined,
+      top: dialog.draggable ? `${position.y}px` : undefined
+    }
+  }), /*#__PURE__*/createElement("div", {
+    className: containerClassName,
+    "data-taco": "dialog"
+  }, output, dialog.draggable && (/*#__PURE__*/createElement("div", Object.assign({}, dragHandleProps, {
+    role: "button",
+    draggable: true,
+    "aria-grabbed": dragging,
+    "aria-label": texts.dialog.drag,
+    className: "yt-dialog__drag absolute-center-x bg-grey-100 top-1.5 h-3 w-24 cursor-move rounded text-center print:hidden"
+  }))), dialog.showCloseButton ? (/*#__PURE__*/createElement(Close$1, {
+    onClick: dialog.onClose,
+    asChild: true
+  }, /*#__PURE__*/createElement(IconButton, {
+    appearance: "discrete",
+    "aria-label": texts.dialog.close,
+    className: "absolute right-0 top-0 mr-2 mt-2 print:hidden",
+    icon: "close"
+  }))) : null), dialog.elements.drawer, dialog.elements.extra))));
+});
+
+export { Close, Content, Footer, Title };
+//# sourceMappingURL=Content.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Content.js","sources":["../../../../../../../../src/components/Dialog/components/Content.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport * as DialogPrimitive from '@radix-ui/react-dialog';\nimport { useMergedRef } from '../../../hooks/useMergedRef';\nimport { useDraggable } from '../../../utils/hooks/useDraggable';\nimport { DialogContext, useCurrentDialog } from '../Context';\nimport { useLocalization } from '../../Provider/Localization';\nimport { IconButton } from '../../IconButton/IconButton';\nimport { Backdrop } from '../../Backdrop/Backdrop';\nimport { getDialogPositionClassnames, getDialogSizeClassnames } from '../util';\n\nexport type DialogContentDrawerRenderProps = DialogContext['drawer'];\n\nexport type DialogContentRenderProps = {\n    close: () => void;\n    drawer?: DialogContentDrawerRenderProps;\n};\n\nexport type DialogTitleProps = React.HTMLAttributes<HTMLHeadingElement>;\nexport const Title = React.forwardRef(function DialogTitle(props: DialogTitleProps, ref: React.Ref<HTMLHeadingElement>) {\n    const className = cn('text-center', props.className);\n    return <DialogPrimitive.Title {...props} className={className} ref={ref} />;\n});\n\nexport type DialogFooterProps = React.HTMLAttributes<HTMLDivElement>;\nexport const Footer = React.forwardRef(function DialogFooter(props: DialogFooterProps, ref: React.Ref<HTMLDivElement>) {\n    const className = cn('mt-8 flex justify-end', props.className);\n    return (\n        <div {...props} className={className} ref={ref}>\n            {props.children}\n        </div>\n    );\n});\n\nexport type DialogCloseProps = React.HTMLAttributes<HTMLButtonElement>;\n\nexport const Close = React.forwardRef(function DialogClose(props: DialogCloseProps, ref: React.Ref<HTMLButtonElement>) {\n    const dialog = useCurrentDialog();\n\n    return <DialogPrimitive.Close onClick={dialog.onClose} {...props} ref={ref} asChild />;\n});\n\nconst RenderPropWrapper = React.forwardRef(function RenderPropWrapper({ children, onClick, renderProps }: any, ref) {\n    const close = () => {\n        onClick(new CustomEvent('close'));\n    };\n\n    return children({ close, ref, ...renderProps });\n});\n\nexport type DialogContentProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> & {\n    /** An accessible label to be announced when the dialog is opened */\n    'aria-label': string;\n    children: Omit<React.ReactNode, 'Function'> | ((props: DialogContentRenderProps) => JSX.Element);\n    onOpenAutoFocus?: DialogPrimitive.DialogContentProps['onOpenAutoFocus'];\n    onCloseAutoFocus?: DialogPrimitive.DialogContentProps['onCloseAutoFocus'];\n};\nexport const Content = React.forwardRef(function DialogContent(props: DialogContentProps, ref: React.Ref<HTMLDivElement>) {\n    const dialog = useCurrentDialog();\n    const internalRef = useMergedRef<HTMLDivElement>(ref);\n    const { position, dragging, handleProps: dragHandleProps } = useDraggable(internalRef);\n    const { texts } = useLocalization();\n\n    const className = cn(\n        'relative bg-white animate-[fade-in_150ms] rounded',\n        getDialogPositionClassnames(),\n        getDialogSizeClassnames(dialog.size),\n        'print:w-full print:h-full print:m-0 print:overflow-visible'\n    );\n\n    const containerClassName = cn(\n        'bg-white p-6 rounded relative z-10 shadow print:p-0 print:overflow-visible print:h-full',\n        {\n            'rounded-b-none': !!dialog.elements.extra,\n        },\n        props.className\n    );\n\n    const handleEscapeKeyDown = (event: KeyboardEvent) => {\n        if (!dialog.closeOnEscape) {\n            event.preventDefault();\n        } else if (dialog.onClose) {\n            dialog.onClose();\n        }\n    };\n\n    // the chosen behaviour in taco is that outside clicks do not close the dialog\n    const handleInteractOutside = event => event.preventDefault();\n\n    let output;\n\n    if (typeof props.children === 'function') {\n        output = (\n            <Close>\n                <RenderPropWrapper renderProps={{ drawer: dialog.drawer }}>{props.children}</RenderPropWrapper>\n            </Close>\n        );\n    } else {\n        output = props.children;\n    }\n\n    return (\n        <DialogPrimitive.Portal>\n            <DialogPrimitive.Overlay asChild>\n                <Backdrop>\n                    <DialogPrimitive.Content\n                        {...props}\n                        className={className}\n                        onEscapeKeyDown={handleEscapeKeyDown}\n                        onInteractOutside={handleInteractOutside}\n                        ref={internalRef}\n                        style={{\n                            ...props.style,\n                            left: dialog.draggable ? `${position.x}px` : undefined,\n                            top: dialog.draggable ? `${position.y}px` : undefined,\n                        }}>\n                        <div className={containerClassName} data-taco=\"dialog\">\n                            {output}\n                            {dialog.draggable && (\n                                <div\n                                    {...dragHandleProps}\n                                    role=\"button\"\n                                    draggable\n                                    aria-grabbed={dragging}\n                                    aria-label={texts.dialog.drag}\n                                    className=\"yt-dialog__drag absolute-center-x bg-grey-100 top-1.5 h-3 w-24 cursor-move rounded text-center print:hidden\"\n                                />\n                            )}\n                            {dialog.showCloseButton ? (\n                                <DialogPrimitive.Close onClick={dialog.onClose} asChild>\n                                    <IconButton\n                                        appearance=\"discrete\"\n                                        aria-label={texts.dialog.close}\n                                        className=\"absolute right-0 top-0 mr-2 mt-2 print:hidden\"\n                                        icon=\"close\"\n                                    />\n                                </DialogPrimitive.Close>\n                            ) : null}\n                        </div>\n                        {dialog.elements.drawer}\n                        {dialog.elements.extra}\n                    </DialogPrimitive.Content>\n                </Backdrop>\n            </DialogPrimitive.Overlay>\n        </DialogPrimitive.Portal>\n    );\n});\n"],"names":["Title","React","DialogTitle","props","ref","className","cn","DialogPrimitive","Footer","DialogFooter","children","Close","DialogClose","dialog","useCurrentDialog","onClick","onClose","asChild","RenderPropWrapper","renderProps","close","CustomEvent","Content","DialogContent","internalRef","useMergedRef","position","dragging","handleProps","dragHandleProps","useDraggable","texts","useLocalization","getDialogPositionClassnames","getDialogSizeClassnames","size","containerClassName","elements","extra","handleEscapeKeyDown","event","closeOnEscape","preventDefault","handleInteractOutside","output","drawer","Backdrop","onEscapeKeyDown","onInteractOutside","style","left","draggable","x","undefined","top","y","role","drag","showCloseButton","IconButton","appearance","icon"],"mappings":"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"}

package/dist/esm/packages/taco/src/components/Dialog/components/DialogDrawer.js

@@ -0,0 +1,41 @@
+import { forwardRef, createElement } from 'react';
+import cn from 'clsx';
+import { useCurrentDialog } from '../Context.js';
+import { motion } from 'framer-motion';
+
+const DialogDrawer = /*#__PURE__*/forwardRef(function DialogDrawer(props, ref) {
+  var _dialog$drawer, _dialog$drawer2;
+  const dialog = useCurrentDialog();
+  const className = cn('absolute top-0  -ml-[4px] hidden h-full w-full overflow-y-auto rounded-r bg-white p-6 text-left', props.className);
+  return /*#__PURE__*/createElement(motion.div, Object.assign({}, props, {
+    className: className,
+    "data-taco": "dialog-drawer",
+    "aria-hidden": !((_dialog$drawer = dialog.drawer) !== null && _dialog$drawer !== void 0 && _dialog$drawer.open),
+    variants: {
+      visible: {
+        left: '100%',
+        display: 'block',
+        transition: {
+          ease: 'easeOut',
+          duration: 0.2
+        }
+      },
+      hidden: {
+        left: '0%',
+        transition: {
+          ease: 'easeOut',
+          duration: 0.2
+        },
+        transitionEnd: {
+          display: 'none'
+        }
+      }
+    },
+    animate: (_dialog$drawer2 = dialog.drawer) !== null && _dialog$drawer2 !== void 0 && _dialog$drawer2.open ? 'visible' : 'hidden',
+    ref: ref
+  }), typeof props.children === 'function' ? props.children(dialog.drawer) : props.children);
+});
+DialogDrawer.displayName = 'DialogDrawer';
+
+export { DialogDrawer };
+//# sourceMappingURL=DialogDrawer.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DialogDrawer.js","sources":["../../../../../../../../src/components/Dialog/components/DialogDrawer.tsx"],"sourcesContent":["import * as React from 'react';\nimport { motion } from 'framer-motion';\nimport cn from 'clsx';\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 DialogDrawer = 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});\nDialogDrawer.displayName = 'DialogDrawer';\n\nexport { DialogDrawer };\n"],"names":["DialogDrawer","React","props","ref","dialog","useCurrentDialog","className","cn","motion","div","_dialog$drawer","drawer","open","variants","visible","left","display","transition","ease","duration","hidden","transitionEnd","animate","_dialog$drawer2","children","displayName"],"mappings":";;;;;MAcMA,YAAY,gBAAGC,UAAgB,CAAC,SAASD,YAAYA,CAACE,KAAwB,EAAEC,GAA8B;;EAChH,MAAMC,MAAM,GAAGC,gBAAgB,EAAE;EACjC,MAAMC,SAAS,GAAGC,EAAE,CAChB,iGAAiG,EACjGL,KAAK,CAACI,SAAS,CAClB;EAED,oBACIL,cAACO,MAAM,CAACC,GAAG,oBACHP,KAAK;IACTI,SAAS,EAAEA,SAAS;iBACV,eAAe;mBACZ,GAAAI,cAAA,GAACN,MAAM,CAACO,MAAM,cAAAD,cAAA,eAAbA,cAAA,CAAeE,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,CAAAC,eAAA,GAAAnB,MAAM,CAACO,MAAM,cAAAY,eAAA,eAAbA,eAAA,CAAeX,IAAI,GAAG,SAAS,GAAG,QAAQ;IACnDT,GAAG,EAAEA;MACJ,OAAOD,KAAK,CAACsB,QAAQ,KAAK,UAAU,GAAGtB,KAAK,CAACsB,QAAQ,CAACpB,MAAM,CAACO,MAAM,CAAC,GAAGT,KAAK,CAACsB,QAAQ,CAC7E;AAErB,CAAC;AACDxB,YAAY,CAACyB,WAAW,GAAG,cAAc;;;;"}

package/dist/esm/packages/taco/src/components/Dialog/components/Extra.js

@@ -0,0 +1,15 @@
+import { forwardRef, createElement } from 'react';
+import cn from 'clsx';
+
+const Extra = /*#__PURE__*/forwardRef(function DialogExtra(props, ref) {
+  const className = cn('wcag-grey-100 absolute top-full left-0 -mt-px w-full rounded-t-none rounded-b p-6 text-left', props.className);
+  return /*#__PURE__*/createElement("div", Object.assign({}, props, {
+    className: className,
+    "data-taco": "dialog-extra",
+    ref: ref
+  }));
+});
+Extra.displayName = 'DialogExtra';
+
+export { Extra };
+//# sourceMappingURL=Extra.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Extra.js","sources":["../../../../../../../../src/components/Dialog/components/Extra.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\n\nexport type DialogExtraProps = React.HTMLAttributes<HTMLDivElement>;\n\nconst Extra = React.forwardRef(function DialogExtra(props: DialogExtraProps, ref: React.Ref<HTMLDivElement>) {\n    const className = cn(\n        'wcag-grey-100 absolute top-full left-0 -mt-px w-full rounded-t-none rounded-b p-6 text-left',\n        props.className\n    );\n\n    return <div {...props} className={className} data-taco=\"dialog-extra\" ref={ref} />;\n});\nExtra.displayName = 'DialogExtra';\n\nexport { Extra };\n"],"names":["Extra","React","DialogExtra","props","ref","className","cn","displayName"],"mappings":";;;MAKMA,KAAK,gBAAGC,UAAgB,CAAC,SAASC,WAAWA,CAACC,KAAuB,EAAEC,GAA8B;EACvG,MAAMC,SAAS,GAAGC,EAAE,CAChB,6FAA6F,EAC7FH,KAAK,CAACE,SAAS,CAClB;EAED,oBAAOJ,uCAASE,KAAK;IAAEE,SAAS,EAAEA,SAAS;iBAAY,cAAc;IAACD,GAAG,EAAEA;KAAO;AACtF,CAAC;AACDJ,KAAK,CAACO,WAAW,GAAG,aAAa;;;;"}

package/dist/esm/packages/taco/src/components/Dialog/components/Trigger.js

@@ -0,0 +1,19 @@
+import { forwardRef, createElement } from 'react';
+import { mergeRefs } from '../../../utils/mergeRefs.js';
+import { Trigger as Trigger$1 } from '@radix-ui/react-dialog';
+import { useCurrentDialog } from '../Context.js';
+
+const Trigger = /*#__PURE__*/forwardRef(function DialogTrigger(props, externalRef) {
+  const {
+    ref: parentRef,
+    props: parentProps
+  } = useCurrentDialog();
+  const refCallback = mergeRefs([parentRef, externalRef]);
+  return /*#__PURE__*/createElement(Trigger$1, Object.assign({}, parentProps, props, {
+    ref: refCallback,
+    asChild: true
+  }));
+});
+
+export { Trigger };
+//# sourceMappingURL=Trigger.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Trigger.js","sources":["../../../../../../../../src/components/Dialog/components/Trigger.tsx"],"sourcesContent":["import * as React from 'react';\nimport * as DialogPrimitive from '@radix-ui/react-dialog';\nimport { useCurrentDialog } from '../Context';\nimport { mergeRefs } from '../../../utils/mergeRefs';\n\nexport type DialogTriggerProps = React.HTMLAttributes<HTMLButtonElement>;\n\nexport const Trigger = React.forwardRef(function DialogTrigger(\n    props: DialogTriggerProps,\n    externalRef: React.Ref<HTMLButtonElement>\n) {\n    const { ref: parentRef, props: parentProps } = useCurrentDialog();\n    const refCallback = mergeRefs([parentRef, externalRef]);\n\n    return <DialogPrimitive.Trigger {...parentProps} {...props} ref={refCallback} asChild />;\n});\n"],"names":["Trigger","React","DialogTrigger","props","externalRef","ref","parentRef","parentProps","useCurrentDialog","refCallback","mergeRefs","DialogPrimitive","asChild"],"mappings":";;;;;MAOaA,OAAO,gBAAGC,UAAgB,CAAC,SAASC,aAAaA,CAC1DC,KAAyB,EACzBC,WAAyC;EAEzC,MAAM;IAAEC,GAAG,EAAEC,SAAS;IAAEH,KAAK,EAAEI;GAAa,GAAGC,gBAAgB,EAAE;EACjE,MAAMC,WAAW,GAAGC,SAAS,CAAC,CAACJ,SAAS,EAAEF,WAAW,CAAC,CAAC;EAEvD,oBAAOH,cAACU,SAAuB,oBAAKJ,WAAW,EAAMJ,KAAK;IAAEE,GAAG,EAAEI,WAAW;IAAEG,OAAO;KAAG;AAC5F,CAAC;;;;"}

package/dist/esm/packages/taco/src/components/Dialog/util.js

@@ -0,0 +1,19 @@
+const getDialogSizeClassnames = size => {
+  switch (size) {
+    case 'dialog':
+      return 'w-128';
+    case 'xs':
+      return 'w-xs';
+    case 'sm':
+      return 'w-sm';
+    case 'md':
+      return 'w-md';
+    case 'lg':
+      return 'w-lg';
+  }
+};
+const getDialogPositionClassnames = () => 'mt-16 mx-auto';
+const getDialogStylingClassnames = () => 'bg-white rounded animate-[fade-in_150ms] shadow-[0_6px_9px_0_rgba(89,85,98,0.3),0_0_1px_0_rgba(89,85,98,0.2)]';
+
+export { getDialogPositionClassnames, getDialogSizeClassnames, getDialogStylingClassnames };
+//# sourceMappingURL=util.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"util.js","sources":["../../../../../../../src/components/Dialog/util.ts"],"sourcesContent":["import { DialogSize } from './types';\n\nexport const getDialogSizeClassnames = (size: DialogSize) => {\n    switch (size) {\n        case 'dialog':\n            return 'w-128';\n        case 'xs':\n            return 'w-xs';\n        case 'sm':\n            return 'w-sm';\n        case 'md':\n            return 'w-md';\n        case 'lg':\n            return 'w-lg';\n    }\n};\n\nexport const getDialogPositionClassnames = () => 'mt-16 mx-auto';\n\nexport const getDialogStylingClassnames = () =>\n    'bg-white rounded animate-[fade-in_150ms] shadow-[0_6px_9px_0_rgba(89,85,98,0.3),0_0_1px_0_rgba(89,85,98,0.2)]';\n"],"names":["getDialogSizeClassnames","size","getDialogPositionClassnames","getDialogStylingClassnames"],"mappings":"MAEaA,uBAAuB,GAAIC,IAAgB;EACpD,QAAQA,IAAI;IACR,KAAK,QAAQ;MACT,OAAO,OAAO;IAClB,KAAK,IAAI;MACL,OAAO,MAAM;IACjB,KAAK,IAAI;MACL,OAAO,MAAM;IACjB,KAAK,IAAI;MACL,OAAO,MAAM;IACjB,KAAK,IAAI;MACL,OAAO,MAAM;;AAEzB;MAEaC,2BAA2B,GAAGA,MAAM;MAEpCC,0BAA0B,GAAGA,MACtC;;;;"}

package/dist/esm/packages/taco/src/components/Drawer/Context.js

@@ -0,0 +1,20 @@
+import { createContext, useContext } from 'react';
+
+/* eslint-disable @typescript-eslint/no-empty-function */
+const DrawerContext = /*#__PURE__*/createContext({
+  closeOnEscape: true,
+  showCloseButton: true,
+  onClickBack: () => {},
+  onClose: () => {},
+  onResize: () => {},
+  props: {},
+  ref: null,
+  size: 'md',
+  variant: 'embedded'
+});
+const useCurrentDrawer = () => {
+  return useContext(DrawerContext);
+};
+
+export { DrawerContext, useCurrentDrawer };
+//# sourceMappingURL=Context.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Context.js","sources":["../../../../../../../src/components/Drawer/Context.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-empty-function */\nimport * as React from 'react';\nimport { DrawerSize, DrawerVariant } from './types';\n\nexport type DrawerContext = {\n    closeOnEscape: boolean;\n    showCloseButton: boolean;\n    onClickBack?: () => void;\n    onClose?: () => void;\n    onResize?: (delta: number) => void;\n    props: {};\n    ref: React.Ref<HTMLElement>;\n    size: DrawerSize;\n    open?: boolean;\n    setOpen?: (open: boolean) => void;\n    variant: DrawerVariant;\n    focusTrap?: boolean;\n    outlet?: HTMLElement;\n};\n\nexport const DrawerContext = React.createContext<DrawerContext>({\n    closeOnEscape: true,\n    showCloseButton: true,\n    onClickBack: () => {},\n    onClose: () => {},\n    onResize: () => {},\n    props: {},\n    ref: null,\n    size: 'md',\n    variant: 'embedded',\n});\n\nexport const useCurrentDrawer = () => {\n    return React.useContext(DrawerContext);\n};\n"],"names":["DrawerContext","React","closeOnEscape","showCloseButton","onClickBack","onClose","onResize","props","ref","size","variant","useCurrentDrawer"],"mappings":";;AAAA;MAoBaA,aAAa,gBAAGC,aAAmB,CAAgB;EAC5DC,aAAa,EAAE,IAAI;EACnBC,eAAe,EAAE,IAAI;EACrBC,WAAW,EAAEA,QAAQ;EACrBC,OAAO,EAAEA,QAAQ;EACjBC,QAAQ,EAAEA,QAAQ;EAClBC,KAAK,EAAE,EAAE;EACTC,GAAG,EAAE,IAAI;EACTC,IAAI,EAAE,IAAI;EACVC,OAAO,EAAE;CACZ;MAEYC,gBAAgB,GAAGA;EAC5B,OAAOV,UAAgB,CAACD,aAAa,CAAC;AAC1C;;;;"}

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

@@ -0,0 +1,109 @@
+import { forwardRef, useState, useMemo, useCallback, useEffect, createElement } from 'react';
+import cn from 'clsx';
+import { Root } from '@radix-ui/react-dialog';
+import { DrawerContext } from './Context.js';
+import { Content, InnerContent, Title, Footer, Close, Actions } from './components/Content.js';
+import { useControllableState } from '@radix-ui/react-use-controllable-state';
+import { Trigger } from './components/Trigger.js';
+
+const DEFAULT_OUTLET_NAME = 'default';
+const Outlet = /*#__PURE__*/forwardRef(function Outlet(props, ref) {
+  var _props$name;
+  const className = cn('h-full ml-auto overflow-hidden flex-shrink-0', props.className);
+  return /*#__PURE__*/createElement("div", Object.assign({}, props, {
+    className: className,
+    "data-taco": "drawer-outlet",
+    "data-taco-outlet-name": (_props$name = props.name) !== null && _props$name !== void 0 ? _props$name : DEFAULT_OUTLET_NAME,
+    ref: ref
+  }));
+});
+// drawerStack getting set by previous drawer instance, to be able to close previous instance, when new instance getting opened.
+let drawerStack;
+const Drawer = /*#__PURE__*/forwardRef(function Drawer(props, ref) {
+  const {
+    open: openProp,
+    defaultOpen: defaultOpenProp,
+    // if onChange is not provided, then replace it with empty function, needed for useControllableState
+    onChange = () => {
+      // do nothing.
+    },
+    variant = 'embedded',
+    className,
+    closeOnEscape = true,
+    onResize,
+    onClose,
+    onClickBack,
+    size = 'md',
+    trigger,
+    children,
+    focusTrap = props.focusTrap === undefined && props.variant === 'overlay' ? true : props.focusTrap,
+    showCloseButton = true,
+    outletName,
+    ...otherProps
+  } = props;
+  const [open, setOpen] = useControllableState({
+    prop: openProp,
+    defaultProp: defaultOpenProp,
+    onChange
+  });
+  const [outlet, setOutlet] = useState();
+  const context = useMemo(() => ({
+    closeOnEscape,
+    onClickBack,
+    onClose,
+    onResize,
+    props: otherProps,
+    size,
+    ref,
+    open,
+    setOpen,
+    variant,
+    focusTrap,
+    showCloseButton,
+    outlet
+  }), [closeOnEscape, open, setOpen, otherProps, variant, onResize, onClose, size, focusTrap, showCloseButton, outlet, onClickBack]);
+  // this prevents two drawers being open at once and used when one drawer getting opened before another one got closed.
+  const close = useCallback(() => {
+    setOpen(false);
+    onClose && onClose();
+  }, []);
+  useEffect(() => {
+    var _document$querySelect;
+    const outletSelector = `[data-taco="drawer-outlet"][data-taco-outlet-name="${outletName !== null && outletName !== void 0 ? outletName : DEFAULT_OUTLET_NAME}"]`;
+    const outletElement = (_document$querySelect = document.querySelector(outletSelector)) !== null && _document$querySelect !== void 0 ? _document$querySelect : document.body;
+    setOutlet(outletElement);
+  }, [outletName]);
+  useEffect(() => {
+    if (open) {
+      // if drawerStack is defined, this means that another drawer was opened before
+      if (drawerStack) {
+        drawerStack();
+      }
+      drawerStack = close;
+    } else {
+      // if drawerStack is equal to current close callback,
+      // this means that drawer getting closed completely instead of getting closed on re-open
+      if (drawerStack === close) {
+        drawerStack = undefined;
+      }
+    }
+  }, [open]);
+  return /*#__PURE__*/createElement(DrawerContext.Provider, {
+    value: context
+  }, /*#__PURE__*/createElement(Root, {
+    modal: variant === 'overlay' ? true : false,
+    open: open,
+    onOpenChange: setOpen
+  }, trigger && /*#__PURE__*/createElement(Trigger, null, trigger), children));
+});
+Drawer.Trigger = Trigger;
+Drawer.Content = Content;
+Drawer.InnerContent = InnerContent;
+Drawer.Title = Title;
+Drawer.Footer = Footer;
+Drawer.Close = Close;
+Drawer.Actions = Actions;
+Drawer.Outlet = Outlet;
+
+export { Drawer };
+//# sourceMappingURL=Drawer.js.map