@economic/taco 1.1.5-alpha.0 → 1.1.5-alpha.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/esm/components/Card/Card.js +14 -12
- package/dist/esm/components/Card/Card.js.map +1 -1
- package/dist/esm/components/Checkbox/Checkbox.js +15 -18
- package/dist/esm/components/Checkbox/Checkbox.js.map +1 -1
- package/dist/esm/components/Combobox/Combobox.js +23 -25
- package/dist/esm/components/Combobox/Combobox.js.map +1 -1
- package/dist/esm/components/Datepicker/Datepicker.js +48 -52
- package/dist/esm/components/Datepicker/Datepicker.js.map +1 -1
- package/dist/esm/components/Dialog/Dialog.js +39 -58
- package/dist/esm/components/Dialog/Dialog.js.map +1 -1
- package/dist/esm/components/Field/Field.js +10 -12
- package/dist/esm/components/Field/Field.js.map +1 -1
- package/dist/esm/components/Form/Form.js +6 -8
- package/dist/esm/components/Form/Form.js.map +1 -1
- package/dist/esm/components/Group/Group.js +6 -8
- package/dist/esm/components/Group/Group.js.map +1 -1
- package/dist/esm/components/Hanger/Hanger.js +27 -35
- package/dist/esm/components/Hanger/Hanger.js.map +1 -1
- package/dist/esm/components/HoverCard/HoverCard.js +8 -9
- package/dist/esm/components/HoverCard/HoverCard.js.map +1 -1
- package/dist/esm/components/Icon/Icon.js +7 -8
- package/dist/esm/components/Icon/Icon.js.map +1 -1
- package/dist/esm/components/IconButton/IconButton.js +9 -11
- package/dist/esm/components/IconButton/IconButton.js.map +1 -1
- package/dist/esm/components/Input/Input.js +25 -25
- package/dist/esm/components/Input/Input.js.map +1 -1
- package/dist/esm/components/Listbox/Listbox.js +24 -25
- package/dist/esm/components/Listbox/Listbox.js.map +1 -1
- package/dist/esm/components/Menu/Menu.js +16 -34
- package/dist/esm/components/Menu/Menu.js.map +1 -1
- package/dist/esm/components/Navigation/Navigation.js +35 -44
- package/dist/esm/components/Navigation/Navigation.js.map +1 -1
- package/dist/esm/components/Pagination/Pagination.js +39 -56
- package/dist/esm/components/Pagination/Pagination.js.map +1 -1
- package/dist/esm/components/Popover/Popover.js +29 -34
- package/dist/esm/components/Popover/Popover.js.map +1 -1
- package/dist/esm/components/Progress/Progress.js +11 -15
- package/dist/esm/components/Progress/Progress.js.map +1 -1
- package/dist/esm/components/Provider/Provider.js +13 -18
- package/dist/esm/components/Provider/Provider.js.map +1 -1
- package/dist/esm/components/RadioGroup/RadioGroup.js +45 -57
- package/dist/esm/components/RadioGroup/RadioGroup.js.map +1 -1
- package/dist/esm/components/SearchInput/SearchInput.js +11 -11
- package/dist/esm/components/SearchInput/SearchInput.js.map +1 -1
- package/dist/esm/components/Select/Select.js +30 -31
- package/dist/esm/components/Select/Select.js.map +1 -1
- package/dist/esm/components/Spinner/Spinner.js +12 -19
- package/dist/esm/components/Spinner/Spinner.js.map +1 -1
- package/dist/esm/components/Switch/Switch.js +9 -10
- package/dist/esm/components/Switch/Switch.js.map +1 -1
- package/dist/esm/components/Tabs/Tabs.js +25 -27
- package/dist/esm/components/Tabs/Tabs.js.map +1 -1
- package/dist/esm/components/Textarea/Textarea.js +11 -9
- package/dist/esm/components/Textarea/Textarea.js.map +1 -1
- package/dist/esm/components/Toast/Toaster.js +88 -118
- package/dist/esm/components/Toast/Toaster.js.map +1 -1
- package/dist/esm/components/Tooltip/Tooltip.js +7 -8
- package/dist/esm/components/Tooltip/Tooltip.js.map +1 -1
- package/dist/esm/components/Tour/Tour.js +44 -50
- package/dist/esm/components/Tour/Tour.js.map +1 -1
- package/dist/esm/components/Treeview/Treeview.js +26 -36
- package/dist/esm/components/Treeview/Treeview.js.map +1 -1
- package/dist/esm/components/VisuallyHidden/VisuallyHidden.js +1 -1
- package/dist/esm/components/VisuallyHidden/VisuallyHidden.js.map +1 -1
- package/dist/esm/index.js +1 -0
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/utils/hooks/useProxiedRef.js +3 -3
- package/dist/esm/utils/hooks/useProxiedRef.js.map +1 -1
- package/dist/index.d.ts +1 -0
- package/dist/taco.cjs.development.js +710 -850
- package/dist/taco.cjs.development.js.map +1 -1
- package/dist/taco.cjs.production.min.js +1 -1
- package/dist/taco.cjs.production.min.js.map +1 -1
- package/dist/utils/tailwind.d.ts +1 -1
- package/package.json +3 -3
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Dialog.js","sources":["../../../../src/components/Dialog/Dialog.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport * as DialogPrimitive from '@radix-ui/react-dialog';\r\nimport './Dialog.css';\r\nimport { DialogTriggerProps, Trigger } from './components/Trigger';\r\nimport {\r\n Content,\r\n Title,\r\n Footer,\r\n Close,\r\n DialogContentProps,\r\n DialogContentRenderProps,\r\n DialogContentDrawerRenderProps,\r\n DialogTitleProps,\r\n DialogFooterProps,\r\n DialogCloseProps,\r\n} from './components/Content';\r\nimport { DialogDrawerProps, DialogDrawerRenderProps, Drawer } from './components/Drawer';\r\nimport { DialogExtraProps, Extra } from './components/Extra';\r\nimport { DialogContext } from './Context';\r\nimport { DialogSize } from './types';\r\n\r\nexport {\r\n DialogCloseProps,\r\n DialogContentDrawerRenderProps,\r\n DialogContentProps,\r\n DialogContentRenderProps,\r\n DialogDrawerProps,\r\n DialogDrawerRenderProps,\r\n DialogFooterProps,\r\n DialogSize,\r\n DialogTitleProps,\r\n};\r\n\r\nexport type DialogTexts = {\r\n /**\r\n * Aria-label for close icon button in dialog.\r\n * To read more about how to provide the text, see [Provider](component:provider) component\r\n */\r\n close: string;\r\n drag: string;\r\n};\r\n\r\nexport type DialogProps = {\r\n children: React.ReactNode | React.ReactNode[];\r\n /** When `true`, pressing escape will close the dialog */\r\n closeOnEscape?: boolean;\r\n /** Set whether the dialog is open by default or not, use when not providing a trigger */\r\n defaultOpen?: boolean;\r\n /** Allows dragging the dialog around the screen (window constrained) */\r\n draggable?: boolean;\r\n /** Handler called when dialog closes by user interaction */\r\n onClose?: () => void;\r\n /** Called when the dialog opens or closes, must be used in conjunction with open */\r\n onChange?: (open: boolean) => void;\r\n /** Control the open state of the dialog from outside the component */\r\n open?: boolean;\r\n /** Shows the close icon button of the dialog */\r\n showCloseButton?: boolean;\r\n /** Size of the dialog. This is the recommended way to set a size for dialog component. */\r\n size?: DialogSize;\r\n /** A trigger to be used for the dialog, should not be set if `children` already contains a trigger */\r\n trigger?: JSX.Element;\r\n};\r\n\r\nconst useSeparatedChildren = initialChildren => {\r\n return React.useMemo(() => {\r\n const children: any[] = [];\r\n let drawer;\r\n let extra;\r\n\r\n React.Children.toArray(initialChildren).forEach((child: any) => {\r\n if (child.type?.displayName === Drawer.displayName) {\r\n drawer = child;\r\n } else if (child.type?.displayName === Extra.displayName) {\r\n extra = child;\r\n } else {\r\n children.push(child);\r\n }\r\n });\r\n\r\n return [children, drawer, extra];\r\n }, [initialChildren]);\r\n};\r\n\r\nexport type ForwardedDialogWithStatics = React.ForwardRefExoticComponent<DialogProps & React.RefAttributes<HTMLElement>> & {\r\n Trigger: React.ForwardRefExoticComponent<DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;\r\n Content: React.ForwardRefExoticComponent<DialogContentProps & React.RefAttributes<HTMLDivElement>>;\r\n Title: React.ForwardRefExoticComponent<DialogTitleProps & React.RefAttributes<HTMLHeadingElement>>;\r\n Footer: React.ForwardRefExoticComponent<DialogFooterProps & React.RefAttributes<HTMLDivElement>>;\r\n Extra: React.ForwardRefExoticComponent<DialogExtraProps & React.RefAttributes<HTMLDivElement>>;\r\n Drawer: React.ForwardRefExoticComponent<DialogDrawerProps & React.RefAttributes<HTMLDivElement>>;\r\n Close: React.ForwardRefExoticComponent<DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;\r\n};\r\n\r\nexport const Dialog = React.forwardRef(function Dialog(props: DialogProps, ref: React.Ref<HTMLElement>) {\r\n const {\r\n children: initialChildren,\r\n closeOnEscape = true,\r\n defaultOpen,\r\n draggable = false,\r\n onChange,\r\n onClose,\r\n open,\r\n showCloseButton = true,\r\n size = 'sm',\r\n trigger,\r\n ...otherProps\r\n } = props;\r\n const [children, drawer, extra] = useSeparatedChildren(initialChildren);\r\n const [drawerOpen, setDrawerOpen] = React.useState(false);\r\n\r\n const context = React.useMemo(\r\n () => ({\r\n closeOnEscape,\r\n draggable,\r\n drawer: {\r\n open: drawerOpen,\r\n toggle: () => setDrawerOpen(isDrawerOpen => !isDrawerOpen),\r\n },\r\n elements: {\r\n drawer,\r\n extra,\r\n },\r\n onClose,\r\n props: otherProps,\r\n showCloseButton,\r\n size,\r\n ref,\r\n }),\r\n [closeOnEscape, drawerOpen, draggable, drawer, extra, open, otherProps, showCloseButton]\r\n );\r\n\r\n return (\r\n <DialogContext.Provider value={context}>\r\n <DialogPrimitive.Root defaultOpen={defaultOpen} open={open} onOpenChange={onChange}>\r\n {trigger && <Trigger>{trigger}</Trigger>}\r\n {children}\r\n </DialogPrimitive.Root>\r\n </DialogContext.Provider>\r\n );\r\n}) as ForwardedDialogWithStatics;\r\n\r\nDialog.Trigger = Trigger;\r\nDialog.Content = Content;\r\nDialog.Title = Title;\r\nDialog.Footer = Footer;\r\nDialog.Extra = Extra;\r\nDialog.Drawer = Drawer;\r\nDialog.Close = Close;\r\n"],"names":["useSeparatedChildren","initialChildren","React","children","drawer","extra","toArray","forEach","child","type","displayName","Drawer","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","Close"],"mappings":"
|
1
|
+
{"version":3,"file":"Dialog.js","sources":["../../../../src/components/Dialog/Dialog.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport * as DialogPrimitive from '@radix-ui/react-dialog';\r\nimport './Dialog.css';\r\nimport { DialogTriggerProps, Trigger } from './components/Trigger';\r\nimport {\r\n Content,\r\n Title,\r\n Footer,\r\n Close,\r\n DialogContentProps,\r\n DialogContentRenderProps,\r\n DialogContentDrawerRenderProps,\r\n DialogTitleProps,\r\n DialogFooterProps,\r\n DialogCloseProps,\r\n} from './components/Content';\r\nimport { DialogDrawerProps, DialogDrawerRenderProps, Drawer } from './components/Drawer';\r\nimport { DialogExtraProps, Extra } from './components/Extra';\r\nimport { DialogContext } from './Context';\r\nimport { DialogSize } from './types';\r\n\r\nexport {\r\n DialogCloseProps,\r\n DialogContentDrawerRenderProps,\r\n DialogContentProps,\r\n DialogContentRenderProps,\r\n DialogDrawerProps,\r\n DialogDrawerRenderProps,\r\n DialogFooterProps,\r\n DialogSize,\r\n DialogTitleProps,\r\n};\r\n\r\nexport type DialogTexts = {\r\n /**\r\n * Aria-label for close icon button in dialog.\r\n * To read more about how to provide the text, see [Provider](component:provider) component\r\n */\r\n close: string;\r\n drag: string;\r\n};\r\n\r\nexport type DialogProps = {\r\n children: React.ReactNode | React.ReactNode[];\r\n /** When `true`, pressing escape will close the dialog */\r\n closeOnEscape?: boolean;\r\n /** Set whether the dialog is open by default or not, use when not providing a trigger */\r\n defaultOpen?: boolean;\r\n /** Allows dragging the dialog around the screen (window constrained) */\r\n draggable?: boolean;\r\n /** Handler called when dialog closes by user interaction */\r\n onClose?: () => void;\r\n /** Called when the dialog opens or closes, must be used in conjunction with open */\r\n onChange?: (open: boolean) => void;\r\n /** Control the open state of the dialog from outside the component */\r\n open?: boolean;\r\n /** Shows the close icon button of the dialog */\r\n showCloseButton?: boolean;\r\n /** Size of the dialog. This is the recommended way to set a size for dialog component. */\r\n size?: DialogSize;\r\n /** A trigger to be used for the dialog, should not be set if `children` already contains a trigger */\r\n trigger?: JSX.Element;\r\n};\r\n\r\nconst useSeparatedChildren = initialChildren => {\r\n return React.useMemo(() => {\r\n const children: any[] = [];\r\n let drawer;\r\n let extra;\r\n\r\n React.Children.toArray(initialChildren).forEach((child: any) => {\r\n if (child.type?.displayName === Drawer.displayName) {\r\n drawer = child;\r\n } else if (child.type?.displayName === Extra.displayName) {\r\n extra = child;\r\n } else {\r\n children.push(child);\r\n }\r\n });\r\n\r\n return [children, drawer, extra];\r\n }, [initialChildren]);\r\n};\r\n\r\nexport type ForwardedDialogWithStatics = React.ForwardRefExoticComponent<DialogProps & React.RefAttributes<HTMLElement>> & {\r\n Trigger: React.ForwardRefExoticComponent<DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;\r\n Content: React.ForwardRefExoticComponent<DialogContentProps & React.RefAttributes<HTMLDivElement>>;\r\n Title: React.ForwardRefExoticComponent<DialogTitleProps & React.RefAttributes<HTMLHeadingElement>>;\r\n Footer: React.ForwardRefExoticComponent<DialogFooterProps & React.RefAttributes<HTMLDivElement>>;\r\n Extra: React.ForwardRefExoticComponent<DialogExtraProps & React.RefAttributes<HTMLDivElement>>;\r\n Drawer: React.ForwardRefExoticComponent<DialogDrawerProps & React.RefAttributes<HTMLDivElement>>;\r\n Close: React.ForwardRefExoticComponent<DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;\r\n};\r\n\r\nexport const Dialog = React.forwardRef(function Dialog(props: DialogProps, ref: React.Ref<HTMLElement>) {\r\n const {\r\n children: initialChildren,\r\n closeOnEscape = true,\r\n defaultOpen,\r\n draggable = false,\r\n onChange,\r\n onClose,\r\n open,\r\n showCloseButton = true,\r\n size = 'sm',\r\n trigger,\r\n ...otherProps\r\n } = props;\r\n const [children, drawer, extra] = useSeparatedChildren(initialChildren);\r\n const [drawerOpen, setDrawerOpen] = React.useState(false);\r\n\r\n const context = React.useMemo(\r\n () => ({\r\n closeOnEscape,\r\n draggable,\r\n drawer: {\r\n open: drawerOpen,\r\n toggle: () => setDrawerOpen(isDrawerOpen => !isDrawerOpen),\r\n },\r\n elements: {\r\n drawer,\r\n extra,\r\n },\r\n onClose,\r\n props: otherProps,\r\n showCloseButton,\r\n size,\r\n ref,\r\n }),\r\n [closeOnEscape, drawerOpen, draggable, drawer, extra, open, otherProps, showCloseButton]\r\n );\r\n\r\n return (\r\n <DialogContext.Provider value={context}>\r\n <DialogPrimitive.Root defaultOpen={defaultOpen} open={open} onOpenChange={onChange}>\r\n {trigger && <Trigger>{trigger}</Trigger>}\r\n {children}\r\n </DialogPrimitive.Root>\r\n </DialogContext.Provider>\r\n );\r\n}) as ForwardedDialogWithStatics;\r\n\r\nDialog.Trigger = Trigger;\r\nDialog.Content = Content;\r\nDialog.Title = Title;\r\nDialog.Footer = Footer;\r\nDialog.Extra = Extra;\r\nDialog.Drawer = Drawer;\r\nDialog.Close = Close;\r\n"],"names":["useSeparatedChildren","initialChildren","React","children","drawer","extra","toArray","forEach","child","type","displayName","Drawer","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","Close"],"mappings":";;;;;;;;AAgEA,MAAMA,oBAAoB,GAAGC,eAAe;EACxC,OAAOC,OAAA,CAAc;IACjB,MAAMC,QAAQ,GAAU,EAAxB;IACA,IAAIC,MAAJ;IACA,IAAIC,KAAJ;IAEAH,QAAA,CAAeI,OAAf,CAAuBL,eAAvB,EAAwCM,OAAxC,CAAiDC,KAAD;;;MAC5C,IAAI,gBAAAA,KAAK,CAACC,IAAN,4DAAYC,WAAZ,MAA4BC,MAAM,CAACD,WAAvC,EAAoD;QAChDN,MAAM,GAAGI,KAAT;OADJ,MAEO,IAAI,iBAAAA,KAAK,CAACC,IAAN,8DAAYC,WAAZ,MAA4BE,KAAK,CAACF,WAAtC,EAAmD;QACtDL,KAAK,GAAGG,KAAR;OADG,MAEA;QACHL,QAAQ,CAACU,IAAT,CAAcL,KAAd;;KANR;IAUA,OAAO,CAACL,QAAD,EAAWC,MAAX,EAAmBC,KAAnB,CAAP;GAfG,EAgBJ,CAACJ,eAAD,CAhBI,CAAP;AAiBH,CAlBD;;MA8Baa,MAAM,gBAAGZ,UAAA,CAAiB,SAASY,MAAT,CAAgBC,KAAhB,EAAoCC,GAApC;EACnC,MAAM;IACFb,QAAQ,EAAEF,eADR;IAEFgB,aAAa,GAAG,IAFd;IAGFC,WAHE;IAIFC,SAAS,GAAG,KAJV;IAKFC,QALE;IAMFC,OANE;IAOFC,IAPE;IAQFC,eAAe,GAAG,IARhB;IASFC,IAAI,GAAG,IATL;IAUFC,OAVE;IAWF,GAAGC;MACHX,KAZJ;EAaA,MAAM,CAACZ,QAAD,EAAWC,MAAX,EAAmBC,KAAnB,IAA4BL,oBAAoB,CAACC,eAAD,CAAtD;EACA,MAAM,CAAC0B,UAAD,EAAaC,aAAb,IAA8B1B,QAAA,CAAe,KAAf,CAApC;EAEA,MAAM2B,OAAO,GAAG3B,OAAA,CACZ,OAAO;IACHe,aADG;IAEHE,SAFG;IAGHf,MAAM,EAAE;MACJkB,IAAI,EAAEK,UADF;MAEJG,MAAM,EAAE,MAAMF,aAAa,CAACG,YAAY,IAAI,CAACA,YAAlB;KAL5B;IAOHC,QAAQ,EAAE;MACN5B,MADM;MAENC;KATD;IAWHgB,OAXG;IAYHN,KAAK,EAAEW,UAZJ;IAaHH,eAbG;IAcHC,IAdG;IAeHR;GAfJ,CADY,EAkBZ,CAACC,aAAD,EAAgBU,UAAhB,EAA4BR,SAA5B,EAAuCf,MAAvC,EAA+CC,KAA/C,EAAsDiB,IAAtD,EAA4DI,UAA5D,EAAwEH,eAAxE,CAlBY,CAAhB;EAqBA,OACIrB,aAAA,CAAC+B,aAAa,CAACC,QAAf;IAAwBC,KAAK,EAAEN;GAA/B,EACI3B,aAAA,CAACkC,IAAD;IAAsBlB,WAAW,EAAEA;IAAaI,IAAI,EAAEA;IAAMe,YAAY,EAAEjB;GAA1E,EACKK,OAAO,IAAIvB,aAAA,CAACoC,OAAD,MAAA,EAAUb,OAAV,CADhB,EAEKtB,QAFL,CADJ,CADJ;AAQH,CA9CqB;AAgDtBW,MAAM,CAACwB,OAAP,GAAiBA,OAAjB;AACAxB,MAAM,CAACyB,OAAP,GAAiBA,OAAjB;AACAzB,MAAM,CAAC0B,KAAP,GAAeA,KAAf;AACA1B,MAAM,CAAC2B,MAAP,GAAgBA,MAAhB;AACA3B,MAAM,CAACF,KAAP,GAAeA,KAAf;AACAE,MAAM,CAACH,MAAP,GAAgBA,MAAhB;AACAG,MAAM,CAAC4B,KAAP,GAAeA,KAAf;;;;"}
|
@@ -1,20 +1,18 @@
|
|
1
|
-
import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose } from '../../_virtual/_rollupPluginBabelHelpers.js';
|
2
1
|
import { forwardRef, createElement } from 'react';
|
3
2
|
import cn from 'classnames';
|
4
3
|
|
5
|
-
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
var className = cn('flex flex-col font-bold text-xs leading-loose pb-4 min-h-[theme(spacing.18)]', {
|
4
|
+
const Field = /*#__PURE__*/forwardRef(function Field(props, ref) {
|
5
|
+
const {
|
6
|
+
disabled,
|
7
|
+
children,
|
8
|
+
invalid = false,
|
9
|
+
message,
|
10
|
+
...otherProps
|
11
|
+
} = props;
|
12
|
+
const className = cn('flex flex-col font-bold text-xs leading-loose pb-4 min-h-[theme(spacing.18)]', {
|
15
13
|
'text-grey-dark': disabled
|
16
14
|
}, props.className);
|
17
|
-
|
15
|
+
const messageClassName = cn('h-4 text-xs text-left leading-normal font-normal truncate -mb-4', {
|
18
16
|
'text-grey-darkest': !invalid,
|
19
17
|
'text-red': invalid,
|
20
18
|
'opacity-50': disabled
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Field.js","sources":["../../../../src/components/Field/Field.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport cn from 'classnames';\r\n\r\nimport './Field.css';\r\n\r\nexport type FieldProps = React.LabelHTMLAttributes<HTMLLabelElement> & {\r\n /** Content of the field */\r\n children: React.ReactNode;\r\n /**\tChanges the style to indicate the element is disabled */\r\n disabled?: boolean;\r\n /* Whether the input is in an invalid state */\r\n invalid?: boolean;\r\n /**\r\n * Text displayed below the children of Field.\r\n * Should be a short text that indicates feedback for user.\r\n */\r\n message?: string;\r\n};\r\n\r\nexport const Field = React.forwardRef(function Field(props: FieldProps, ref: React.Ref<HTMLLabelElement>) {\r\n const { disabled, children, invalid = false, message, ...otherProps } = props;\r\n const className = cn(\r\n 'flex flex-col font-bold text-xs leading-loose pb-4 min-h-[theme(spacing.18)]',\r\n {\r\n 'text-grey-dark': disabled,\r\n },\r\n props.className\r\n );\r\n const messageClassName = cn(\r\n 'h-4 text-xs text-left leading-normal font-normal truncate -mb-4',\r\n {\r\n 'text-grey-darkest': !invalid,\r\n 'text-red': invalid,\r\n 'opacity-50': disabled,\r\n },\r\n props.className\r\n );\r\n\r\n return (\r\n <label {...otherProps} className={className} data-taco=\"label\" ref={ref}>\r\n {children}\r\n {message && (\r\n <span className={messageClassName} role={invalid ? 'alert' : undefined}>\r\n {message}\r\n </span>\r\n )}\r\n </label>\r\n );\r\n});\r\n"],"names":["Field","React","props","ref","disabled","children","invalid","message","otherProps","className","cn","messageClassName","role","undefined"],"mappings":"
|
1
|
+
{"version":3,"file":"Field.js","sources":["../../../../src/components/Field/Field.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport cn from 'classnames';\r\n\r\nimport './Field.css';\r\n\r\nexport type FieldProps = React.LabelHTMLAttributes<HTMLLabelElement> & {\r\n /** Content of the field */\r\n children: React.ReactNode;\r\n /**\tChanges the style to indicate the element is disabled */\r\n disabled?: boolean;\r\n /* Whether the input is in an invalid state */\r\n invalid?: boolean;\r\n /**\r\n * Text displayed below the children of Field.\r\n * Should be a short text that indicates feedback for user.\r\n */\r\n message?: string;\r\n};\r\n\r\nexport const Field = React.forwardRef(function Field(props: FieldProps, ref: React.Ref<HTMLLabelElement>) {\r\n const { disabled, children, invalid = false, message, ...otherProps } = props;\r\n const className = cn(\r\n 'flex flex-col font-bold text-xs leading-loose pb-4 min-h-[theme(spacing.18)]',\r\n {\r\n 'text-grey-dark': disabled,\r\n },\r\n props.className\r\n );\r\n const messageClassName = cn(\r\n 'h-4 text-xs text-left leading-normal font-normal truncate -mb-4',\r\n {\r\n 'text-grey-darkest': !invalid,\r\n 'text-red': invalid,\r\n 'opacity-50': disabled,\r\n },\r\n props.className\r\n );\r\n\r\n return (\r\n <label {...otherProps} className={className} data-taco=\"label\" ref={ref}>\r\n {children}\r\n {message && (\r\n <span className={messageClassName} role={invalid ? 'alert' : undefined}>\r\n {message}\r\n </span>\r\n )}\r\n </label>\r\n );\r\n});\r\n"],"names":["Field","React","props","ref","disabled","children","invalid","message","otherProps","className","cn","messageClassName","role","undefined"],"mappings":";;;MAmBaA,KAAK,gBAAGC,UAAA,CAAiB,SAASD,KAAT,CAAeE,KAAf,EAAkCC,GAAlC;EAClC,MAAM;IAAEC,QAAF;IAAYC,QAAZ;IAAsBC,OAAO,GAAG,KAAhC;IAAuCC,OAAvC;IAAgD,GAAGC;MAAeN,KAAxE;EACA,MAAMO,SAAS,GAAGC,EAAE,CAChB,8EADgB,EAEhB;IACI,kBAAkBN;GAHN,EAKhBF,KAAK,CAACO,SALU,CAApB;EAOA,MAAME,gBAAgB,GAAGD,EAAE,CACvB,iEADuB,EAEvB;IACI,qBAAqB,CAACJ,OAD1B;IAEI,YAAYA,OAFhB;IAGI,cAAcF;GALK,EAOvBF,KAAK,CAACO,SAPiB,CAA3B;EAUA,OACIR,aAAA,QAAA,oBAAWO;IAAYC,SAAS,EAAEA;iBAAqB;IAAQN,GAAG,EAAEA;IAApE,EACKE,QADL,EAEKE,OAAO,IACJN,aAAA,OAAA;IAAMQ,SAAS,EAAEE;IAAkBC,IAAI,EAAEN,OAAO,GAAG,OAAH,GAAaO;GAA7D,EACKN,OADL,CAHR,CADJ;AAUH,CA7BoB;;;;"}
|
@@ -1,14 +1,12 @@
|
|
1
|
-
import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose } from '../../_virtual/_rollupPluginBabelHelpers.js';
|
2
1
|
import { forwardRef, createElement } from 'react';
|
3
2
|
import cn from 'classnames';
|
4
3
|
|
5
|
-
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
var className = cn('yt-form', {
|
4
|
+
const Form = /*#__PURE__*/forwardRef(function Form(props, ref) {
|
5
|
+
const {
|
6
|
+
horizontal = false,
|
7
|
+
...otherProps
|
8
|
+
} = props;
|
9
|
+
const className = cn('yt-form', {
|
12
10
|
'yt-form--horizontal flex flex-wrap': horizontal
|
13
11
|
}, props.className);
|
14
12
|
return createElement("form", Object.assign({}, otherProps, {
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Form.js","sources":["../../../../src/components/Form/Form.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport cn from 'classnames';\r\nimport './Form.css';\r\n\r\nexport type FormProps = React.FormHTMLAttributes<HTMLFormElement> & {\r\n /** Content should be composed of other Taco form elements */\r\n children: React.ReactNode;\r\n /** Display the form fields in a horizontal layout */\r\n horizontal?: boolean;\r\n};\r\n\r\nexport const Form = React.forwardRef(function Form(props: FormProps, ref: React.Ref<HTMLFormElement>) {\r\n const { horizontal = false, ...otherProps } = props;\r\n const className = cn(\r\n 'yt-form',\r\n {\r\n 'yt-form--horizontal flex flex-wrap': horizontal,\r\n },\r\n props.className\r\n );\r\n\r\n return <form {...otherProps} className={className} data-taco=\"form\" ref={ref} />;\r\n});\r\n"],"names":["Form","React","props","ref","horizontal","otherProps","className","cn"],"mappings":"
|
1
|
+
{"version":3,"file":"Form.js","sources":["../../../../src/components/Form/Form.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport cn from 'classnames';\r\nimport './Form.css';\r\n\r\nexport type FormProps = React.FormHTMLAttributes<HTMLFormElement> & {\r\n /** Content should be composed of other Taco form elements */\r\n children: React.ReactNode;\r\n /** Display the form fields in a horizontal layout */\r\n horizontal?: boolean;\r\n};\r\n\r\nexport const Form = React.forwardRef(function Form(props: FormProps, ref: React.Ref<HTMLFormElement>) {\r\n const { horizontal = false, ...otherProps } = props;\r\n const className = cn(\r\n 'yt-form',\r\n {\r\n 'yt-form--horizontal flex flex-wrap': horizontal,\r\n },\r\n props.className\r\n );\r\n\r\n return <form {...otherProps} className={className} data-taco=\"form\" ref={ref} />;\r\n});\r\n"],"names":["Form","React","props","ref","horizontal","otherProps","className","cn"],"mappings":";;;MAWaA,IAAI,gBAAGC,UAAA,CAAiB,SAASD,IAAT,CAAcE,KAAd,EAAgCC,GAAhC;EACjC,MAAM;IAAEC,UAAU,GAAG,KAAf;IAAsB,GAAGC;MAAeH,KAA9C;EACA,MAAMI,SAAS,GAAGC,EAAE,CAChB,SADgB,EAEhB;IACI,sCAAsCH;GAH1B,EAKhBF,KAAK,CAACI,SALU,CAApB;EAQA,OAAOL,aAAA,OAAA,oBAAUI;IAAYC,SAAS,EAAEA;iBAAqB;IAAOH,GAAG,EAAEA;IAAlE,CAAP;AACH,CAXmB;;;;"}
|
@@ -1,14 +1,12 @@
|
|
1
|
-
import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose } from '../../_virtual/_rollupPluginBabelHelpers.js';
|
2
1
|
import { forwardRef, createElement } from 'react';
|
3
2
|
import cn from 'classnames';
|
4
3
|
|
5
|
-
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
var className = cn('flex ', props.className);
|
4
|
+
const Group = /*#__PURE__*/forwardRef(function Group(props, ref) {
|
5
|
+
const {
|
6
|
+
as: Tag = 'span',
|
7
|
+
...otherProps
|
8
|
+
} = props;
|
9
|
+
const className = cn('flex ', props.className);
|
12
10
|
return createElement(Tag, Object.assign({}, otherProps, {
|
13
11
|
className: className,
|
14
12
|
"data-taco": "group",
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Group.js","sources":["../../../../src/components/Group/Group.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport cn from 'classnames';\r\nimport './Group.css';\r\n\r\nexport type GroupProps = React.HTMLAttributes<HTMLElement> & {\r\n /**\r\n * Change what html tag element will render.\r\n * Default value is `span`\r\n */\r\n as?: 'div' | 'span' | 'nav';\r\n /** Content should be composed of other Taco elements */\r\n children: React.ReactNode;\r\n};\r\n\r\nexport const Group = React.forwardRef(function Group(props: GroupProps, ref: React.Ref<HTMLDivElement>) {\r\n const { as: Tag = 'span', ...otherProps } = props;\r\n const className = cn('flex ', props.className);\r\n return <Tag {...otherProps} className={className} data-taco=\"group\" ref={ref} />;\r\n});\r\n"],"names":["Group","React","props","ref","as","Tag","otherProps","className","cn"],"mappings":"
|
1
|
+
{"version":3,"file":"Group.js","sources":["../../../../src/components/Group/Group.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport cn from 'classnames';\r\nimport './Group.css';\r\n\r\nexport type GroupProps = React.HTMLAttributes<HTMLElement> & {\r\n /**\r\n * Change what html tag element will render.\r\n * Default value is `span`\r\n */\r\n as?: 'div' | 'span' | 'nav';\r\n /** Content should be composed of other Taco elements */\r\n children: React.ReactNode;\r\n};\r\n\r\nexport const Group = React.forwardRef(function Group(props: GroupProps, ref: React.Ref<HTMLDivElement>) {\r\n const { as: Tag = 'span', ...otherProps } = props;\r\n const className = cn('flex ', props.className);\r\n return <Tag {...otherProps} className={className} data-taco=\"group\" ref={ref} />;\r\n});\r\n"],"names":["Group","React","props","ref","as","Tag","otherProps","className","cn"],"mappings":";;;MAcaA,KAAK,gBAAGC,UAAA,CAAiB,SAASD,KAAT,CAAeE,KAAf,EAAkCC,GAAlC;EAClC,MAAM;IAAEC,EAAE,EAAEC,GAAG,GAAG,MAAZ;IAAoB,GAAGC;MAAeJ,KAA5C;EACA,MAAMK,SAAS,GAAGC,EAAE,CAAC,OAAD,EAAUN,KAAK,CAACK,SAAhB,CAApB;EACA,OAAON,aAAA,CAACI,GAAD,oBAASC;IAAYC,SAAS,EAAEA;iBAAqB;IAAQJ,GAAG,EAAEA;IAAlE,CAAP;AACH,CAJoB;;;;"}
|
@@ -1,4 +1,3 @@
|
|
1
|
-
import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose } from '../../_virtual/_rollupPluginBabelHelpers.js';
|
2
1
|
import { forwardRef, createElement, useMemo, useState, useEffect, createContext, useContext, isValidElement } from 'react';
|
3
2
|
import cn from 'classnames';
|
4
3
|
import { IconButton } from '../IconButton/IconButton.js';
|
@@ -7,19 +6,18 @@ import { Root, Anchor as Anchor$1, Close } from '@radix-ui/react-popover';
|
|
7
6
|
import { UnstyledContent, UnstyledArrow } from '../Popover/Primitives.js';
|
8
7
|
import mergeRefs from '../../utils/mergeRefs.js';
|
9
8
|
|
10
|
-
|
11
|
-
var HangerContext = /*#__PURE__*/createContext({
|
9
|
+
const HangerContext = /*#__PURE__*/createContext({
|
12
10
|
props: {},
|
13
11
|
ref: null
|
14
12
|
});
|
15
|
-
|
13
|
+
const Anchor = /*#__PURE__*/forwardRef(function HangerAnchor(props, ref) {
|
16
14
|
var _props$children;
|
17
15
|
|
18
|
-
|
19
|
-
|
16
|
+
const context = useContext(HangerContext);
|
17
|
+
let children = props.children;
|
20
18
|
|
21
19
|
if (isValidElement(props.children) && typeof ((_props$children = props.children) === null || _props$children === void 0 ? void 0 : _props$children.type) === 'function') {
|
22
|
-
console.warn(
|
20
|
+
console.warn(`Hanger.Anchor requires its child to forwardRef so that it can attach to the dom element. Did you mean to wrap '${props.children.type.name}' in React.forwardRef()? Taco has wrapped '${props.children.type.name}' in a 'span' to maintain functionality, but this may cause unintended behaviour`);
|
23
21
|
children = createElement("span", null, props.children);
|
24
22
|
}
|
25
23
|
|
@@ -29,22 +27,21 @@ var Anchor = /*#__PURE__*/forwardRef(function HangerAnchor(props, ref) {
|
|
29
27
|
asChild: true
|
30
28
|
}));
|
31
29
|
});
|
32
|
-
|
33
|
-
|
30
|
+
const Title = /*#__PURE__*/forwardRef(function DialogTitle(props, ref) {
|
31
|
+
const className = cn('mb-1 text-base font-bold flex w-full', props.className);
|
34
32
|
return createElement("span", Object.assign({}, props, {
|
35
33
|
className: className,
|
36
34
|
ref: ref
|
37
35
|
}));
|
38
36
|
});
|
39
|
-
|
40
|
-
|
37
|
+
const Content = /*#__PURE__*/forwardRef(function HangerContent(props, ref) {
|
38
|
+
const context = useContext(HangerContext);
|
39
|
+
const {
|
40
|
+
texts
|
41
|
+
} = useLocalization();
|
42
|
+
const className = cn('wcag-blue border border-transparent rounded p-3 pr-12 yt-shadow z-[996] focus:border-transparent max-w-sm', props.className);
|
41
43
|
|
42
|
-
|
43
|
-
texts = _useLocalization.texts;
|
44
|
-
|
45
|
-
var className = cn('wcag-blue border border-transparent rounded p-3 pr-12 yt-shadow z-[996] focus:border-transparent max-w-sm', props.className);
|
46
|
-
|
47
|
-
var handleInteractOutside = function handleInteractOutside(event) {
|
44
|
+
const handleInteractOutside = event => {
|
48
45
|
event.preventDefault();
|
49
46
|
};
|
50
47
|
|
@@ -66,25 +63,20 @@ var Content = /*#__PURE__*/forwardRef(function HangerContent(props, ref) {
|
|
66
63
|
onClick: context.props.onClose
|
67
64
|
})));
|
68
65
|
});
|
69
|
-
|
70
|
-
|
71
|
-
|
72
|
-
|
73
|
-
|
74
|
-
|
75
|
-
|
76
|
-
|
77
|
-
|
78
|
-
|
79
|
-
|
80
|
-
};
|
81
|
-
}, [otherProps]); // we do this to ensure hangers are mounted after their containers, e.g. if the container is another portal
|
82
|
-
|
83
|
-
var _React$useState = useState(false),
|
84
|
-
open = _React$useState[0],
|
85
|
-
setOpen = _React$useState[1];
|
66
|
+
const Hanger = /*#__PURE__*/forwardRef(function Hanger(props, ref) {
|
67
|
+
const {
|
68
|
+
anchor,
|
69
|
+
children,
|
70
|
+
defaultOpen = true,
|
71
|
+
...otherProps
|
72
|
+
} = props;
|
73
|
+
const context = useMemo(() => ({
|
74
|
+
props: otherProps,
|
75
|
+
ref
|
76
|
+
}), [otherProps]); // we do this to ensure hangers are mounted after their containers, e.g. if the container is another portal
|
86
77
|
|
87
|
-
|
78
|
+
const [open, setOpen] = useState(false);
|
79
|
+
useEffect(() => {
|
88
80
|
if (defaultOpen) {
|
89
81
|
setOpen(defaultOpen);
|
90
82
|
}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Hanger.js","sources":["../../../../src/components/Hanger/Hanger.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport cn from 'classnames';\r\nimport * as PopoverPrimitive from '@radix-ui/react-popover';\r\nimport { IconButton } from '../IconButton/IconButton';\r\nimport { Placement } from '../..';\r\nimport { UnstyledArrow, UnstyledContent } from '../Popover/Primitives';\r\nimport { useLocalization } from '../Provider/Provider';\r\nimport './Hanger.css';\r\nimport mergeRefs from '../../utils/mergeRefs';\r\n\r\ntype HangerContextValue = {\r\n props: any;\r\n ref: React.Ref<HTMLElement>;\r\n};\r\nconst HangerContext = React.createContext<HangerContextValue>({\r\n props: {},\r\n ref: null,\r\n});\r\n\r\nexport type HangerTexts = {\r\n /** Aria-label for the close icon button of hanger */\r\n close: string;\r\n};\r\n\r\nexport type HangerAnchorProps = React.HTMLAttributes<HTMLDivElement>;\r\nconst Anchor = React.forwardRef(function HangerAnchor(props: HangerAnchorProps, ref: React.Ref<HTMLDivElement>) {\r\n const context = React.useContext(HangerContext);\r\n let children = props.children;\r\n\r\n if (React.isValidElement(props.children) && typeof props.children?.type === 'function') {\r\n console.warn(\r\n `Hanger.Anchor requires its child to forwardRef so that it can attach to the dom element. Did you mean to wrap '${props.children.type.name}' in React.forwardRef()? Taco has wrapped '${props.children.type.name}' in a 'span' to maintain functionality, but this may cause unintended behaviour`\r\n );\r\n children = <span>{props.children}</span>;\r\n }\r\n\r\n return (\r\n <PopoverPrimitive.Anchor {...context.props} {...props} children={children} ref={mergeRefs([context.ref, ref])} asChild />\r\n );\r\n});\r\n\r\nexport type HangerTitleProps = React.HTMLAttributes<HTMLHeadingElement>;\r\nexport const Title = React.forwardRef(function DialogTitle(props: HangerTitleProps, ref: React.Ref<HTMLHeadingElement>) {\r\n const className = cn('mb-1 text-base font-bold flex w-full', props.className);\r\n return <span {...props} className={className} ref={ref} />;\r\n});\r\n\r\nexport type HangerContentProps = React.HTMLAttributes<HTMLDivElement> & {\r\n /** Set the position of the Hanger relative to its achor. Default value is `bottom` */\r\n placement?: Placement;\r\n};\r\n\r\nconst Content = React.forwardRef(function HangerContent(props: HangerContentProps, ref: React.Ref<HTMLDivElement>) {\r\n const context = React.useContext(HangerContext);\r\n const { texts } = useLocalization();\r\n const className = cn(\r\n 'wcag-blue border border-transparent rounded p-3 pr-12 yt-shadow z-[996] focus:border-transparent max-w-sm',\r\n props.className\r\n );\r\n const handleInteractOutside = (event: CustomEvent): void => {\r\n event.preventDefault();\r\n };\r\n\r\n return (\r\n <UnstyledContent\r\n className={className}\r\n data-taco=\"hanger\"\r\n onInteractOutside={handleInteractOutside}\r\n placement={props.placement}\r\n ref={ref}\r\n >\r\n {props.children}\r\n <UnstyledArrow className=\"text-blue\" />\r\n <PopoverPrimitive.Close asChild>\r\n <IconButton\r\n appearance=\"primary\"\r\n aria-label={texts.hanger.close}\r\n className=\"absolute top-0 right-0 ml-2 mr-2 mt-2 text-white\"\r\n icon=\"close\"\r\n onClick={context.props.onClose}\r\n />\r\n </PopoverPrimitive.Close>\r\n </UnstyledContent>\r\n );\r\n});\r\n\r\nexport type HangerProps = React.PropsWithChildren<{\r\n /** An anchor to be used for the hanger, should not be set if `children` already contains an anchor */\r\n anchor?: JSX.Element;\r\n /**\r\n * Shows or hides hanger depending on the value\r\n * @defaultValue true\r\n */\r\n defaultOpen?: boolean;\r\n /** Handler called when user closes the hanger */\r\n onClose?: () => void;\r\n}>;\r\n\r\nexport type ForwardedHangerWithStatics = React.ForwardRefExoticComponent<HangerProps & React.RefAttributes<HTMLElement>> & {\r\n Anchor: React.ForwardRefExoticComponent<HangerAnchorProps>;\r\n Content: React.ForwardRefExoticComponent<HangerContentProps>;\r\n Title: React.ForwardRefExoticComponent<HangerTitleProps>;\r\n};\r\n\r\nexport const Hanger = React.forwardRef(function Hanger(props: HangerProps, ref: React.Ref<HTMLElement>) {\r\n const { anchor, children, defaultOpen = true, ...otherProps } = props;\r\n const context = React.useMemo(() => ({ props: otherProps, ref }), [otherProps]);\r\n\r\n // we do this to ensure hangers are mounted after their containers, e.g. if the container is another portal\r\n const [open, setOpen] = React.useState(false);\r\n React.useEffect(() => {\r\n if (defaultOpen) {\r\n setOpen(defaultOpen);\r\n }\r\n }, []);\r\n\r\n return (\r\n <HangerContext.Provider value={context}>\r\n <PopoverPrimitive.Root key={String(open)} defaultOpen={open}>\r\n {anchor && <Anchor>{anchor}</Anchor>}\r\n {children}\r\n </PopoverPrimitive.Root>\r\n </HangerContext.Provider>\r\n );\r\n}) as ForwardedHangerWithStatics;\r\nHanger.Anchor = Anchor;\r\nHanger.Content = Content;\r\nHanger.Title = Title;\r\n"],"names":["HangerContext","React","props","ref","Anchor","HangerAnchor","context","children","type","console","warn","name","PopoverPrimitive","mergeRefs","asChild","Title","DialogTitle","className","cn","Content","HangerContent","
|
1
|
+
{"version":3,"file":"Hanger.js","sources":["../../../../src/components/Hanger/Hanger.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport cn from 'classnames';\r\nimport * as PopoverPrimitive from '@radix-ui/react-popover';\r\nimport { IconButton } from '../IconButton/IconButton';\r\nimport { Placement } from '../..';\r\nimport { UnstyledArrow, UnstyledContent } from '../Popover/Primitives';\r\nimport { useLocalization } from '../Provider/Provider';\r\nimport './Hanger.css';\r\nimport mergeRefs from '../../utils/mergeRefs';\r\n\r\ntype HangerContextValue = {\r\n props: any;\r\n ref: React.Ref<HTMLElement>;\r\n};\r\nconst HangerContext = React.createContext<HangerContextValue>({\r\n props: {},\r\n ref: null,\r\n});\r\n\r\nexport type HangerTexts = {\r\n /** Aria-label for the close icon button of hanger */\r\n close: string;\r\n};\r\n\r\nexport type HangerAnchorProps = React.HTMLAttributes<HTMLDivElement>;\r\nconst Anchor = React.forwardRef(function HangerAnchor(props: HangerAnchorProps, ref: React.Ref<HTMLDivElement>) {\r\n const context = React.useContext(HangerContext);\r\n let children = props.children;\r\n\r\n if (React.isValidElement(props.children) && typeof props.children?.type === 'function') {\r\n console.warn(\r\n `Hanger.Anchor requires its child to forwardRef so that it can attach to the dom element. Did you mean to wrap '${props.children.type.name}' in React.forwardRef()? Taco has wrapped '${props.children.type.name}' in a 'span' to maintain functionality, but this may cause unintended behaviour`\r\n );\r\n children = <span>{props.children}</span>;\r\n }\r\n\r\n return (\r\n <PopoverPrimitive.Anchor {...context.props} {...props} children={children} ref={mergeRefs([context.ref, ref])} asChild />\r\n );\r\n});\r\n\r\nexport type HangerTitleProps = React.HTMLAttributes<HTMLHeadingElement>;\r\nexport const Title = React.forwardRef(function DialogTitle(props: HangerTitleProps, ref: React.Ref<HTMLHeadingElement>) {\r\n const className = cn('mb-1 text-base font-bold flex w-full', props.className);\r\n return <span {...props} className={className} ref={ref} />;\r\n});\r\n\r\nexport type HangerContentProps = React.HTMLAttributes<HTMLDivElement> & {\r\n /** Set the position of the Hanger relative to its achor. Default value is `bottom` */\r\n placement?: Placement;\r\n};\r\n\r\nconst Content = React.forwardRef(function HangerContent(props: HangerContentProps, ref: React.Ref<HTMLDivElement>) {\r\n const context = React.useContext(HangerContext);\r\n const { texts } = useLocalization();\r\n const className = cn(\r\n 'wcag-blue border border-transparent rounded p-3 pr-12 yt-shadow z-[996] focus:border-transparent max-w-sm',\r\n props.className\r\n );\r\n const handleInteractOutside = (event: CustomEvent): void => {\r\n event.preventDefault();\r\n };\r\n\r\n return (\r\n <UnstyledContent\r\n className={className}\r\n data-taco=\"hanger\"\r\n onInteractOutside={handleInteractOutside}\r\n placement={props.placement}\r\n ref={ref}\r\n >\r\n {props.children}\r\n <UnstyledArrow className=\"text-blue\" />\r\n <PopoverPrimitive.Close asChild>\r\n <IconButton\r\n appearance=\"primary\"\r\n aria-label={texts.hanger.close}\r\n className=\"absolute top-0 right-0 ml-2 mr-2 mt-2 text-white\"\r\n icon=\"close\"\r\n onClick={context.props.onClose}\r\n />\r\n </PopoverPrimitive.Close>\r\n </UnstyledContent>\r\n );\r\n});\r\n\r\nexport type HangerProps = React.PropsWithChildren<{\r\n /** An anchor to be used for the hanger, should not be set if `children` already contains an anchor */\r\n anchor?: JSX.Element;\r\n /**\r\n * Shows or hides hanger depending on the value\r\n * @defaultValue true\r\n */\r\n defaultOpen?: boolean;\r\n /** Handler called when user closes the hanger */\r\n onClose?: () => void;\r\n}>;\r\n\r\nexport type ForwardedHangerWithStatics = React.ForwardRefExoticComponent<HangerProps & React.RefAttributes<HTMLElement>> & {\r\n Anchor: React.ForwardRefExoticComponent<HangerAnchorProps>;\r\n Content: React.ForwardRefExoticComponent<HangerContentProps>;\r\n Title: React.ForwardRefExoticComponent<HangerTitleProps>;\r\n};\r\n\r\nexport const Hanger = React.forwardRef(function Hanger(props: HangerProps, ref: React.Ref<HTMLElement>) {\r\n const { anchor, children, defaultOpen = true, ...otherProps } = props;\r\n const context = React.useMemo(() => ({ props: otherProps, ref }), [otherProps]);\r\n\r\n // we do this to ensure hangers are mounted after their containers, e.g. if the container is another portal\r\n const [open, setOpen] = React.useState(false);\r\n React.useEffect(() => {\r\n if (defaultOpen) {\r\n setOpen(defaultOpen);\r\n }\r\n }, []);\r\n\r\n return (\r\n <HangerContext.Provider value={context}>\r\n <PopoverPrimitive.Root key={String(open)} defaultOpen={open}>\r\n {anchor && <Anchor>{anchor}</Anchor>}\r\n {children}\r\n </PopoverPrimitive.Root>\r\n </HangerContext.Provider>\r\n );\r\n}) as ForwardedHangerWithStatics;\r\nHanger.Anchor = Anchor;\r\nHanger.Content = Content;\r\nHanger.Title = Title;\r\n"],"names":["HangerContext","React","props","ref","Anchor","HangerAnchor","context","children","type","console","warn","name","PopoverPrimitive","mergeRefs","asChild","Title","DialogTitle","className","cn","Content","HangerContent","texts","useLocalization","handleInteractOutside","event","preventDefault","UnstyledContent","onInteractOutside","placement","UnstyledArrow","IconButton","appearance","hanger","close","icon","onClick","onClose","Hanger","anchor","defaultOpen","otherProps","open","setOpen","Provider","value","key","String"],"mappings":";;;;;;;;AAcA,MAAMA,aAAa,gBAAGC,aAAA,CAAwC;EAC1DC,KAAK,EAAE,EADmD;EAE1DC,GAAG,EAAE;AAFqD,CAAxC,CAAtB;AAWA,MAAMC,MAAM,gBAAGH,UAAA,CAAiB,SAASI,YAAT,CAAsBH,KAAtB,EAAgDC,GAAhD;;;EAC5B,MAAMG,OAAO,GAAGL,UAAA,CAAiBD,aAAjB,CAAhB;EACA,IAAIO,QAAQ,GAAGL,KAAK,CAACK,QAArB;;EAEA,IAAIN,cAAA,CAAqBC,KAAK,CAACK,QAA3B,KAAwC,2BAAOL,KAAK,CAACK,QAAb,oDAAO,gBAAgBC,IAAvB,MAAgC,UAA5E,EAAwF;IACpFC,OAAO,CAACC,IAAR,mHACsHR,KAAK,CAACK,QAAN,CAAeC,IAAf,CAAoBG,kDAAkDT,KAAK,CAACK,QAAN,CAAeC,IAAf,CAAoBG,sFADhN;IAGAJ,QAAQ,GAAGN,aAAA,OAAA,MAAA,EAAOC,KAAK,CAACK,QAAb,CAAX;;;EAGJ,OACIN,aAAA,CAACW,QAAD,oBAA6BN,OAAO,CAACJ,OAAWA;IAAOK,QAAQ,EAAEA;IAAUJ,GAAG,EAAEU,SAAS,CAAC,CAACP,OAAO,CAACH,GAAT,EAAcA,GAAd,CAAD;IAAsBW,OAAO;IAAtH,CADJ;AAGH,CAdc,CAAf;MAiBaC,KAAK,gBAAGd,UAAA,CAAiB,SAASe,WAAT,CAAqBd,KAArB,EAA8CC,GAA9C;EAClC,MAAMc,SAAS,GAAGC,EAAE,CAAC,sCAAD,EAAyChB,KAAK,CAACe,SAA/C,CAApB;EACA,OAAOhB,aAAA,OAAA,oBAAUC;IAAOe,SAAS,EAAEA;IAAWd,GAAG,EAAEA;IAA5C,CAAP;AACH,CAHoB;AAUrB,MAAMgB,OAAO,gBAAGlB,UAAA,CAAiB,SAASmB,aAAT,CAAuBlB,KAAvB,EAAkDC,GAAlD;EAC7B,MAAMG,OAAO,GAAGL,UAAA,CAAiBD,aAAjB,CAAhB;EACA,MAAM;IAAEqB;MAAUC,eAAe,EAAjC;EACA,MAAML,SAAS,GAAGC,EAAE,CAChB,2GADgB,EAEhBhB,KAAK,CAACe,SAFU,CAApB;;EAIA,MAAMM,qBAAqB,GAAIC,KAAD;IAC1BA,KAAK,CAACC,cAAN;GADJ;;EAIA,OACIxB,aAAA,CAACyB,eAAD;IACIT,SAAS,EAAEA;iBACD;IACVU,iBAAiB,EAAEJ;IACnBK,SAAS,EAAE1B,KAAK,CAAC0B;IACjBzB,GAAG,EAAEA;GALT,EAOKD,KAAK,CAACK,QAPX,EAQIN,aAAA,CAAC4B,aAAD;IAAeZ,SAAS,EAAC;GAAzB,CARJ,EASIhB,aAAA,CAACW,KAAD;IAAwBE,OAAO;GAA/B,EACIb,aAAA,CAAC6B,UAAD;IACIC,UAAU,EAAC;kBACCV,KAAK,CAACW,MAAN,CAAaC;IACzBhB,SAAS,EAAC;IACViB,IAAI,EAAC;IACLC,OAAO,EAAE7B,OAAO,CAACJ,KAAR,CAAckC;GAL3B,CADJ,CATJ,CADJ;AAqBH,CAhCe,CAAhB;MAoDaC,MAAM,gBAAGpC,UAAA,CAAiB,SAASoC,MAAT,CAAgBnC,KAAhB,EAAoCC,GAApC;EACnC,MAAM;IAAEmC,MAAF;IAAU/B,QAAV;IAAoBgC,WAAW,GAAG,IAAlC;IAAwC,GAAGC;MAAetC,KAAhE;EACA,MAAMI,OAAO,GAAGL,OAAA,CAAc,OAAO;IAAEC,KAAK,EAAEsC,UAAT;IAAqBrC;GAA5B,CAAd,EAAkD,CAACqC,UAAD,CAAlD,CAAhB;;EAGA,MAAM,CAACC,IAAD,EAAOC,OAAP,IAAkBzC,QAAA,CAAe,KAAf,CAAxB;EACAA,SAAA,CAAgB;IACZ,IAAIsC,WAAJ,EAAiB;MACbG,OAAO,CAACH,WAAD,CAAP;;GAFR,EAIG,EAJH;EAMA,OACItC,aAAA,CAACD,aAAa,CAAC2C,QAAf;IAAwBC,KAAK,EAAEtC;GAA/B,EACIL,aAAA,CAACW,IAAD;IAAuBiC,GAAG,EAAEC,MAAM,CAACL,IAAD;IAAQF,WAAW,EAAEE;GAAvD,EACKH,MAAM,IAAIrC,aAAA,CAACG,MAAD,MAAA,EAASkC,MAAT,CADf,EAEK/B,QAFL,CADJ,CADJ;AAQH,CApBqB;AAqBtB8B,MAAM,CAACjC,MAAP,GAAgBA,MAAhB;AACAiC,MAAM,CAAClB,OAAP,GAAiBA,OAAjB;AACAkB,MAAM,CAACtB,KAAP,GAAeA,KAAf;;;;"}
|
@@ -1,27 +1,26 @@
|
|
1
|
-
import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose } from '../../_virtual/_rollupPluginBabelHelpers.js';
|
2
1
|
import { createElement, forwardRef } from 'react';
|
3
2
|
import cn from 'classnames';
|
4
3
|
import { Root, Trigger as Trigger$1, Content as Content$1 } from '@radix-ui/react-hover-card';
|
5
4
|
|
6
|
-
|
7
|
-
var Trigger = /*#__PURE__*/forwardRef(function HoverCardTrigger(props, ref) {
|
5
|
+
const Trigger = /*#__PURE__*/forwardRef(function HoverCardTrigger(props, ref) {
|
8
6
|
return createElement(Trigger$1, Object.assign({}, props, {
|
9
7
|
asChild: true,
|
10
8
|
ref: ref
|
11
9
|
}));
|
12
10
|
});
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
11
|
+
const Content = /*#__PURE__*/forwardRef(function HoverCardContent(externalProps, ref) {
|
12
|
+
const {
|
13
|
+
placement,
|
14
|
+
...props
|
15
|
+
} = externalProps;
|
16
|
+
const className = cn('bg-white rounded p-3 yt-shadow', props.className);
|
18
17
|
return createElement(Content$1, Object.assign({}, props, {
|
19
18
|
className: className,
|
20
19
|
ref: ref,
|
21
20
|
side: placement
|
22
21
|
}));
|
23
22
|
});
|
24
|
-
|
23
|
+
const HoverCard = props => {
|
25
24
|
return createElement(Root, Object.assign({}, props, {
|
26
25
|
openDelay: 300
|
27
26
|
}));
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"HoverCard.js","sources":["../../../../src/components/HoverCard/HoverCard.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport cn from 'classnames';\r\nimport * as HoverCardPrimitive from '@radix-ui/react-hover-card';\r\nimport { Placement } from '../..';\r\n\r\nexport type HoverCardTriggerProps = React.HTMLAttributes<HTMLAnchorElement>;\r\nconst Trigger = React.forwardRef(function HoverCardTrigger(props: HoverCardTriggerProps, ref: React.Ref<HTMLAnchorElement>) {\r\n return <HoverCardPrimitive.Trigger {...props} asChild ref={ref} />;\r\n});\r\n\r\nexport type HoverCardContentProps = React.HTMLAttributes<HTMLDivElement> & {\r\n /** Set the position of the HoverCard relative to its trigger. Default value is `bottom` */\r\n placement?: Placement;\r\n};\r\nconst Content = React.forwardRef(function HoverCardContent(externalProps: HoverCardContentProps, ref: React.Ref<HTMLDivElement>) {\r\n const { placement, ...props } = externalProps;\r\n const className = cn('bg-white rounded p-3 yt-shadow', props.className);\r\n\r\n return <HoverCardPrimitive.Content {...props} className={className} ref={ref} side={placement} />;\r\n});\r\n\r\nexport type HoverCardProps = React.PropsWithChildren<{}>;\r\n\r\nexport const HoverCard = (props: HoverCardProps) => {\r\n return <HoverCardPrimitive.Root {...props} openDelay={300} />;\r\n};\r\nHoverCard.Trigger = Trigger;\r\nHoverCard.Content = Content;\r\n"],"names":["Trigger","React","HoverCardTrigger","props","ref","HoverCardPrimitive","asChild","Content","HoverCardContent","externalProps","placement","className","cn","side","HoverCard","openDelay"],"mappings":"
|
1
|
+
{"version":3,"file":"HoverCard.js","sources":["../../../../src/components/HoverCard/HoverCard.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport cn from 'classnames';\r\nimport * as HoverCardPrimitive from '@radix-ui/react-hover-card';\r\nimport { Placement } from '../..';\r\n\r\nexport type HoverCardTriggerProps = React.HTMLAttributes<HTMLAnchorElement>;\r\nconst Trigger = React.forwardRef(function HoverCardTrigger(props: HoverCardTriggerProps, ref: React.Ref<HTMLAnchorElement>) {\r\n return <HoverCardPrimitive.Trigger {...props} asChild ref={ref} />;\r\n});\r\n\r\nexport type HoverCardContentProps = React.HTMLAttributes<HTMLDivElement> & {\r\n /** Set the position of the HoverCard relative to its trigger. Default value is `bottom` */\r\n placement?: Placement;\r\n};\r\nconst Content = React.forwardRef(function HoverCardContent(externalProps: HoverCardContentProps, ref: React.Ref<HTMLDivElement>) {\r\n const { placement, ...props } = externalProps;\r\n const className = cn('bg-white rounded p-3 yt-shadow', props.className);\r\n\r\n return <HoverCardPrimitive.Content {...props} className={className} ref={ref} side={placement} />;\r\n});\r\n\r\nexport type HoverCardProps = React.PropsWithChildren<{}>;\r\n\r\nexport const HoverCard = (props: HoverCardProps) => {\r\n return <HoverCardPrimitive.Root {...props} openDelay={300} />;\r\n};\r\nHoverCard.Trigger = Trigger;\r\nHoverCard.Content = Content;\r\n"],"names":["Trigger","React","HoverCardTrigger","props","ref","HoverCardPrimitive","asChild","Content","HoverCardContent","externalProps","placement","className","cn","side","HoverCard","openDelay"],"mappings":";;;;AAMA,MAAMA,OAAO,gBAAGC,UAAA,CAAiB,SAASC,gBAAT,CAA0BC,KAA1B,EAAwDC,GAAxD;EAC7B,OAAOH,aAAA,CAACI,SAAD,oBAAgCF;IAAOG,OAAO;IAACF,GAAG,EAAEA;IAApD,CAAP;AACH,CAFe,CAAhB;AAQA,MAAMG,OAAO,gBAAGN,UAAA,CAAiB,SAASO,gBAAT,CAA0BC,aAA1B,EAAgEL,GAAhE;EAC7B,MAAM;IAAEM,SAAF;IAAa,GAAGP;MAAUM,aAAhC;EACA,MAAME,SAAS,GAAGC,EAAE,CAAC,gCAAD,EAAmCT,KAAK,CAACQ,SAAzC,CAApB;EAEA,OAAOV,aAAA,CAACI,SAAD,oBAAgCF;IAAOQ,SAAS,EAAEA;IAAWP,GAAG,EAAEA;IAAKS,IAAI,EAAEH;IAA7E,CAAP;AACH,CALe,CAAhB;MASaI,SAAS,GAAIX,KAAD;EACrB,OAAOF,aAAA,CAACI,IAAD,oBAA6BF;IAAOY,SAAS,EAAE;IAA/C,CAAP;AACH;AACDD,SAAS,CAACd,OAAV,GAAoBA,OAApB;AACAc,SAAS,CAACP,OAAV,GAAoBA,OAApB;;;;"}
|
@@ -1,20 +1,19 @@
|
|
1
|
-
import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose } from '../../_virtual/_rollupPluginBabelHelpers.js';
|
2
1
|
import React__default from 'react';
|
3
2
|
import cn from 'classnames';
|
4
3
|
import { icons } from './components/index.js';
|
5
4
|
export { icons } from './components/index.js';
|
6
5
|
|
7
|
-
|
8
|
-
var Icon = /*#__PURE__*/React__default.forwardRef(function Icon(props, ref) {
|
6
|
+
const Icon = /*#__PURE__*/React__default.forwardRef(function Icon(props, ref) {
|
9
7
|
var _props$className;
|
10
8
|
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
9
|
+
const {
|
10
|
+
name,
|
11
|
+
...otherProps
|
12
|
+
} = props;
|
13
|
+
const Component = icons[name];
|
15
14
|
/* 24x24 _at the base body font_ - must be em so that they scale with font size - tailwind spacing uses rem */
|
16
15
|
|
17
|
-
|
16
|
+
const className = cn('inline-flex h-[1.715em] w-[1.715em] flex-shrink-0', props.className, {
|
18
17
|
'p-[3px]': (_props$className = props.className) === null || _props$className === void 0 ? void 0 : _props$className.includes('rounded-full')
|
19
18
|
});
|
20
19
|
return Component ? React__default.createElement(Component, Object.assign({}, otherProps, {
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Icon.js","sources":["../../../../src/components/Icon/Icon.tsx"],"sourcesContent":["import React from 'react';\r\nimport cn from 'classnames';\r\nimport { IconName, icons } from './components/index';\r\n\r\nexport { icons } from './components/index';\r\nexport type { IconName } from './components/index';\r\n\r\nexport type IconProps = React.SVGAttributes<SVGSVGElement> & {\r\n /** Set what svg icon should be rendered */\r\n name: IconName; // this dynamic type causes the type extraction for props to fail\r\n};\r\n\r\nexport const Icon = React.forwardRef(function Icon(props: IconProps, ref: React.Ref<SVGSVGElement>) {\r\n const { name, ...otherProps } = props;\r\n const Component = icons[name];\r\n /* 24x24 _at the base body font_ - must be em so that they scale with font size - tailwind spacing uses rem */\r\n const className = cn('inline-flex h-[1.715em] w-[1.715em] flex-shrink-0', props.className, {\r\n 'p-[3px]': props.className?.includes('rounded-full'),\r\n });\r\n\r\n return Component ? (\r\n <Component {...otherProps} className={className} data-taco=\"icon\" focusable=\"false\" ref={ref} role=\"img\" />\r\n ) : null;\r\n});\r\n"],"names":["Icon","React","forwardRef","props","ref","name","otherProps","Component","icons","className","cn","includes","focusable","role"],"mappings":"
|
1
|
+
{"version":3,"file":"Icon.js","sources":["../../../../src/components/Icon/Icon.tsx"],"sourcesContent":["import React from 'react';\r\nimport cn from 'classnames';\r\nimport { IconName, icons } from './components/index';\r\n\r\nexport { icons } from './components/index';\r\nexport type { IconName } from './components/index';\r\n\r\nexport type IconProps = React.SVGAttributes<SVGSVGElement> & {\r\n /** Set what svg icon should be rendered */\r\n name: IconName; // this dynamic type causes the type extraction for props to fail\r\n};\r\n\r\nexport const Icon = React.forwardRef(function Icon(props: IconProps, ref: React.Ref<SVGSVGElement>) {\r\n const { name, ...otherProps } = props;\r\n const Component = icons[name];\r\n /* 24x24 _at the base body font_ - must be em so that they scale with font size - tailwind spacing uses rem */\r\n const className = cn('inline-flex h-[1.715em] w-[1.715em] flex-shrink-0', props.className, {\r\n 'p-[3px]': props.className?.includes('rounded-full'),\r\n });\r\n\r\n return Component ? (\r\n <Component {...otherProps} className={className} data-taco=\"icon\" focusable=\"false\" ref={ref} role=\"img\" />\r\n ) : null;\r\n});\r\n"],"names":["Icon","React","forwardRef","props","ref","name","otherProps","Component","icons","className","cn","includes","focusable","role"],"mappings":";;;;;MAYaA,IAAI,gBAAGC,cAAK,CAACC,UAAN,CAAiB,SAASF,IAAT,CAAcG,KAAd,EAAgCC,GAAhC;;;EACjC,MAAM;IAAEC,IAAF;IAAQ,GAAGC;MAAeH,KAAhC;EACA,MAAMI,SAAS,GAAGC,KAAK,CAACH,IAAD,CAAvB;;;EAEA,MAAMI,SAAS,GAAGC,EAAE,CAAC,mDAAD,EAAsDP,KAAK,CAACM,SAA5D,EAAuE;IACvF,+BAAWN,KAAK,CAACM,SAAjB,qDAAW,iBAAiBE,QAAjB,CAA0B,cAA1B;GADK,CAApB;EAIA,OAAOJ,SAAS,GACZN,4BAAA,CAACM,SAAD,oBAAeD;IAAYG,SAAS,EAAEA;iBAAqB;IAAOG,SAAS,EAAC;IAAQR,GAAG,EAAEA;IAAKS,IAAI,EAAC;IAAnG,CADY,GAEZ,IAFJ;AAGH,CAXmB;;;;"}
|
@@ -1,17 +1,15 @@
|
|
1
|
-
import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
|
2
1
|
import { forwardRef, createElement } from 'react';
|
3
2
|
import cn from 'classnames';
|
4
3
|
import { Icon } from '../Icon/Icon.js';
|
5
4
|
import { getButtonClasses, getAppearanceClasses, createButton } from '../Button/util.js';
|
6
5
|
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
var className = cn('w-8', getButtonClasses(), getAppearanceClasses(otherProps.appearance, true), {
|
6
|
+
const IconButton = /*#__PURE__*/forwardRef(function IconButton(props, ref) {
|
7
|
+
const {
|
8
|
+
icon,
|
9
|
+
rounded = false,
|
10
|
+
...otherProps
|
11
|
+
} = props;
|
12
|
+
const className = cn('w-8', getButtonClasses(), getAppearanceClasses(otherProps.appearance, true), {
|
15
13
|
'rounded-full': rounded,
|
16
14
|
rounded: !rounded,
|
17
15
|
'cursor-not-allowed opacity-50': props.disabled,
|
@@ -22,13 +20,13 @@ var IconButton = /*#__PURE__*/forwardRef(function IconButton(props, ref) {
|
|
22
20
|
return null;
|
23
21
|
}
|
24
22
|
|
25
|
-
return createButton(
|
23
|
+
return createButton({ ...otherProps,
|
26
24
|
children: createElement(Icon, {
|
27
25
|
name: icon,
|
28
26
|
className: "m-0 p-0"
|
29
27
|
}),
|
30
28
|
'data-taco': 'icon-button'
|
31
|
-
}
|
29
|
+
}, className, ref);
|
32
30
|
});
|
33
31
|
|
34
32
|
export { IconButton };
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"IconButton.js","sources":["../../../../src/components/IconButton/IconButton.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport cn from 'classnames';\r\nimport * as ButtonPrimitive from '../../primitives/Button';\r\nimport { Icon, IconName } from '../Icon/Icon';\r\nimport { getAppearanceClasses, getButtonClasses, createButton } from '../Button/util';\r\nimport { Appearance } from '../../types';\r\nimport { DialogProps, HangerProps, MenuProps, PopoverProps } from '../..';\r\n\r\nexport type IconButtonProps = Omit<ButtonPrimitive.ButtonProps, 'children'> & {\r\n /** Appearance will change the style of the button */\r\n appearance?: Appearance;\r\n /**\r\n * Dialog component associated with the button, clicking the button will open the dialog.\r\n * *Note* that `onClick` event on button won't be handled, as in this case, the purpose of\r\n * the button should be only to open the associated dialog when clicked.\r\n */\r\n dialog?: (props: Partial<DialogProps>) => JSX.Element;\r\n /** Hanger component associated with the button. */\r\n hanger?: (props: Partial<HangerProps>) => JSX.Element;\r\n /** Set which icon should be rendered within button */\r\n icon: IconName; // this dynamic type causes the type extraction for props to fail\r\n /** Menu component associated with the button. */\r\n menu?: (props: Partial<MenuProps>) => JSX.Element;\r\n /**\r\n * Popover component associated with the button, clicking the button will open the popover.\r\n * *Note* that `onClick` event on button won't be handled, as in this case, the purpose of\r\n * the button should be only to open the associated popover when clicked.\r\n */\r\n popover?: (props: Partial<PopoverProps>) => JSX.Element;\r\n /**\r\n * Set whether the button is rounded.\r\n * Default value is `false`\r\n */\r\n rounded?: boolean;\r\n /** A tooltip to show when hovering over the button */\r\n tooltip?: string;\r\n};\r\n\r\nexport const IconButton = React.forwardRef(function IconButton(props: IconButtonProps, ref: React.Ref<HTMLButtonElement>) {\r\n const { icon, rounded = false, ...otherProps } = props;\r\n\r\n const className = cn(\r\n 'w-8',\r\n getButtonClasses(),\r\n getAppearanceClasses(otherProps.appearance, true),\r\n {\r\n 'rounded-full': rounded,\r\n rounded: !rounded,\r\n 'cursor-not-allowed opacity-50': props.disabled,\r\n 'focus:yt-focus active:focus:yt-focus': !props.disabled,\r\n },\r\n props.className\r\n );\r\n\r\n if (!icon) {\r\n return null;\r\n }\r\n\r\n return createButton(\r\n { ...otherProps, children: <Icon name={icon} className=\"m-0 p-0\" />, 'data-taco': 'icon-button' },\r\n className,\r\n ref\r\n );\r\n});\r\n"],"names":["IconButton","React","props","ref","icon","rounded","otherProps","className","cn","getButtonClasses","getAppearanceClasses","appearance","disabled","createButton","children","Icon","name"],"mappings":"
|
1
|
+
{"version":3,"file":"IconButton.js","sources":["../../../../src/components/IconButton/IconButton.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport cn from 'classnames';\r\nimport * as ButtonPrimitive from '../../primitives/Button';\r\nimport { Icon, IconName } from '../Icon/Icon';\r\nimport { getAppearanceClasses, getButtonClasses, createButton } from '../Button/util';\r\nimport { Appearance } from '../../types';\r\nimport { DialogProps, HangerProps, MenuProps, PopoverProps } from '../..';\r\n\r\nexport type IconButtonProps = Omit<ButtonPrimitive.ButtonProps, 'children'> & {\r\n /** Appearance will change the style of the button */\r\n appearance?: Appearance;\r\n /**\r\n * Dialog component associated with the button, clicking the button will open the dialog.\r\n * *Note* that `onClick` event on button won't be handled, as in this case, the purpose of\r\n * the button should be only to open the associated dialog when clicked.\r\n */\r\n dialog?: (props: Partial<DialogProps>) => JSX.Element;\r\n /** Hanger component associated with the button. */\r\n hanger?: (props: Partial<HangerProps>) => JSX.Element;\r\n /** Set which icon should be rendered within button */\r\n icon: IconName; // this dynamic type causes the type extraction for props to fail\r\n /** Menu component associated with the button. */\r\n menu?: (props: Partial<MenuProps>) => JSX.Element;\r\n /**\r\n * Popover component associated with the button, clicking the button will open the popover.\r\n * *Note* that `onClick` event on button won't be handled, as in this case, the purpose of\r\n * the button should be only to open the associated popover when clicked.\r\n */\r\n popover?: (props: Partial<PopoverProps>) => JSX.Element;\r\n /**\r\n * Set whether the button is rounded.\r\n * Default value is `false`\r\n */\r\n rounded?: boolean;\r\n /** A tooltip to show when hovering over the button */\r\n tooltip?: string;\r\n};\r\n\r\nexport const IconButton = React.forwardRef(function IconButton(props: IconButtonProps, ref: React.Ref<HTMLButtonElement>) {\r\n const { icon, rounded = false, ...otherProps } = props;\r\n\r\n const className = cn(\r\n 'w-8',\r\n getButtonClasses(),\r\n getAppearanceClasses(otherProps.appearance, true),\r\n {\r\n 'rounded-full': rounded,\r\n rounded: !rounded,\r\n 'cursor-not-allowed opacity-50': props.disabled,\r\n 'focus:yt-focus active:focus:yt-focus': !props.disabled,\r\n },\r\n props.className\r\n );\r\n\r\n if (!icon) {\r\n return null;\r\n }\r\n\r\n return createButton(\r\n { ...otherProps, children: <Icon name={icon} className=\"m-0 p-0\" />, 'data-taco': 'icon-button' },\r\n className,\r\n ref\r\n );\r\n});\r\n"],"names":["IconButton","React","props","ref","icon","rounded","otherProps","className","cn","getButtonClasses","getAppearanceClasses","appearance","disabled","createButton","children","Icon","name"],"mappings":";;;;;MAsCaA,UAAU,gBAAGC,UAAA,CAAiB,SAASD,UAAT,CAAoBE,KAApB,EAA4CC,GAA5C;EACvC,MAAM;IAAEC,IAAF;IAAQC,OAAO,GAAG,KAAlB;IAAyB,GAAGC;MAAeJ,KAAjD;EAEA,MAAMK,SAAS,GAAGC,EAAE,CAChB,KADgB,EAEhBC,gBAAgB,EAFA,EAGhBC,oBAAoB,CAACJ,UAAU,CAACK,UAAZ,EAAwB,IAAxB,CAHJ,EAIhB;IACI,gBAAgBN,OADpB;IAEIA,OAAO,EAAE,CAACA,OAFd;IAGI,iCAAiCH,KAAK,CAACU,QAH3C;IAII,wCAAwC,CAACV,KAAK,CAACU;GARnC,EAUhBV,KAAK,CAACK,SAVU,CAApB;;EAaA,IAAI,CAACH,IAAL,EAAW;IACP,OAAO,IAAP;;;EAGJ,OAAOS,YAAY,CACf,EAAE,GAAGP,UAAL;IAAiBQ,QAAQ,EAAEb,aAAA,CAACc,IAAD;MAAMC,IAAI,EAAEZ;MAAMG,SAAS,EAAC;KAA5B,CAA3B;IAAqE,aAAa;GADnE,EAEfA,SAFe,EAGfJ,GAHe,CAAnB;AAKH,CAzByB;;;;"}
|
@@ -1,25 +1,25 @@
|
|
1
|
-
import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose } from '../../_virtual/_rollupPluginBabelHelpers.js';
|
2
1
|
import { forwardRef, useEffect, createElement, cloneElement } from 'react';
|
3
2
|
import cn from 'classnames';
|
4
3
|
import { Icon } from '../Icon/Icon.js';
|
5
4
|
import { useProxiedRef } from '../../utils/hooks/useProxiedRef.js';
|
6
5
|
import { getInputClasses, getButtonStateClasses } from './util.js';
|
7
6
|
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
7
|
+
const Input = /*#__PURE__*/forwardRef(function Input(props, ref) {
|
8
|
+
const {
|
9
|
+
button,
|
10
|
+
icon,
|
11
|
+
highlighted,
|
12
|
+
invalid,
|
13
|
+
onKeyDown,
|
14
|
+
autoFocus,
|
15
|
+
...otherProps
|
16
|
+
} = props;
|
17
|
+
const inputRef = useProxiedRef(ref);
|
18
|
+
const hasContainer = button || icon;
|
19
|
+
const className = cn(getInputClasses(props), 'min-h-[theme(spacing.8)] pointer-events-all', {
|
20
20
|
'pr-8': !!hasContainer
|
21
21
|
}, !hasContainer && otherProps.className);
|
22
|
-
useEffect(
|
22
|
+
useEffect(() => {
|
23
23
|
if (autoFocus && inputRef.current) {
|
24
24
|
inputRef.current.focus();
|
25
25
|
}
|
@@ -27,10 +27,10 @@ var Input = /*#__PURE__*/forwardRef(function Input(props, ref) {
|
|
27
27
|
// if it has scroll height then the browser reverts to native scrolling behaviour only
|
28
28
|
// so we manually override it to ensure _our_ desired behaviour remains intact
|
29
29
|
|
30
|
-
|
30
|
+
const handleKeyDown = event => {
|
31
31
|
if (!event.shiftKey && (event.key === 'Home' || event.key === 'End')) {
|
32
32
|
event.preventDefault();
|
33
|
-
|
33
|
+
const position = event.key === 'End' ? event.currentTarget.value.length : 0;
|
34
34
|
event.currentTarget.setSelectionRange(position, position);
|
35
35
|
}
|
36
36
|
|
@@ -39,7 +39,7 @@ var Input = /*#__PURE__*/forwardRef(function Input(props, ref) {
|
|
39
39
|
}
|
40
40
|
};
|
41
41
|
|
42
|
-
|
42
|
+
const input = createElement("input", Object.assign({}, otherProps, {
|
43
43
|
className: className,
|
44
44
|
"data-taco": "input",
|
45
45
|
onKeyDown: handleKeyDown,
|
@@ -47,19 +47,19 @@ var Input = /*#__PURE__*/forwardRef(function Input(props, ref) {
|
|
47
47
|
}));
|
48
48
|
|
49
49
|
if (hasContainer) {
|
50
|
-
|
50
|
+
let extra;
|
51
51
|
|
52
52
|
if (button) {
|
53
|
-
|
54
|
-
|
55
|
-
|
56
|
-
|
53
|
+
const disabled = button.props.disabled || otherProps.disabled;
|
54
|
+
const buttonClassName = cn('items-center flex justify-center border absolute rounded-l-none rounded-r right-0 h-full focus:rounded focus:outline-none', {
|
55
|
+
[getButtonStateClasses(invalid)]: !props.disabled
|
56
|
+
}, button.props.className);
|
57
57
|
extra = cloneElement(button, {
|
58
58
|
className: buttonClassName,
|
59
|
-
disabled
|
59
|
+
disabled
|
60
60
|
});
|
61
61
|
} else if (icon) {
|
62
|
-
|
62
|
+
const iconClassName = cn('items-center flex justify-center absolute pointer-events-none mr-1 p-px right-0 w-5 top-1/2 -translate-y-1/2', {
|
63
63
|
'text-grey-dark': props.disabled,
|
64
64
|
'text-grey-darkest': !props.disabled
|
65
65
|
});
|
@@ -71,7 +71,7 @@ var Input = /*#__PURE__*/forwardRef(function Input(props, ref) {
|
|
71
71
|
});
|
72
72
|
}
|
73
73
|
|
74
|
-
|
74
|
+
const containerClassName = cn('bg-white inline-flex relative rounded w-full', otherProps.className);
|
75
75
|
return createElement("div", {
|
76
76
|
className: containerClassName,
|
77
77
|
"data-taco": "input-container"
|