@economic/taco 1.1.8 → 1.1.9-alpha.2

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.
Files changed (84) hide show
  1. package/dist/components/Tour/Tour.d.ts +2 -0
  2. package/dist/esm/components/Badge/Badge.js +14 -14
  3. package/dist/esm/components/Badge/Badge.js.map +1 -1
  4. package/dist/esm/components/Calendar/Calendar.js +56 -71
  5. package/dist/esm/components/Calendar/Calendar.js.map +1 -1
  6. package/dist/esm/components/Card/Card.js +15 -12
  7. package/dist/esm/components/Card/Card.js.map +1 -1
  8. package/dist/esm/components/Checkbox/Checkbox.js +15 -18
  9. package/dist/esm/components/Checkbox/Checkbox.js.map +1 -1
  10. package/dist/esm/components/Combobox/Combobox.js +23 -25
  11. package/dist/esm/components/Combobox/Combobox.js.map +1 -1
  12. package/dist/esm/components/Datepicker/Datepicker.js +48 -52
  13. package/dist/esm/components/Datepicker/Datepicker.js.map +1 -1
  14. package/dist/esm/components/Dialog/Dialog.js +39 -58
  15. package/dist/esm/components/Dialog/Dialog.js.map +1 -1
  16. package/dist/esm/components/Field/Field.js +10 -12
  17. package/dist/esm/components/Field/Field.js.map +1 -1
  18. package/dist/esm/components/Form/Form.js +6 -8
  19. package/dist/esm/components/Form/Form.js.map +1 -1
  20. package/dist/esm/components/Group/Group.js +6 -8
  21. package/dist/esm/components/Group/Group.js.map +1 -1
  22. package/dist/esm/components/Hanger/Hanger.js +27 -35
  23. package/dist/esm/components/Hanger/Hanger.js.map +1 -1
  24. package/dist/esm/components/HoverCard/HoverCard.js +8 -9
  25. package/dist/esm/components/HoverCard/HoverCard.js.map +1 -1
  26. package/dist/esm/components/Icon/Icon.js +7 -8
  27. package/dist/esm/components/Icon/Icon.js.map +1 -1
  28. package/dist/esm/components/IconButton/IconButton.js +9 -11
  29. package/dist/esm/components/IconButton/IconButton.js.map +1 -1
  30. package/dist/esm/components/Input/Input.js +25 -25
  31. package/dist/esm/components/Input/Input.js.map +1 -1
  32. package/dist/esm/components/Listbox/Listbox.js +24 -25
  33. package/dist/esm/components/Listbox/Listbox.js.map +1 -1
  34. package/dist/esm/components/Menu/Menu.js +16 -34
  35. package/dist/esm/components/Menu/Menu.js.map +1 -1
  36. package/dist/esm/components/Navigation/Navigation.js +35 -44
  37. package/dist/esm/components/Navigation/Navigation.js.map +1 -1
  38. package/dist/esm/components/Pagination/Pagination.js +39 -56
  39. package/dist/esm/components/Pagination/Pagination.js.map +1 -1
  40. package/dist/esm/components/Popover/Popover.js +29 -34
  41. package/dist/esm/components/Popover/Popover.js.map +1 -1
  42. package/dist/esm/components/Progress/Progress.js +11 -15
  43. package/dist/esm/components/Progress/Progress.js.map +1 -1
  44. package/dist/esm/components/Provider/Provider.js +13 -18
  45. package/dist/esm/components/Provider/Provider.js.map +1 -1
  46. package/dist/esm/components/RadioGroup/RadioGroup.js +45 -57
  47. package/dist/esm/components/RadioGroup/RadioGroup.js.map +1 -1
  48. package/dist/esm/components/SearchInput/SearchInput.js +12 -11
  49. package/dist/esm/components/SearchInput/SearchInput.js.map +1 -1
  50. package/dist/esm/components/Select/Select.js +30 -31
  51. package/dist/esm/components/Select/Select.js.map +1 -1
  52. package/dist/esm/components/Spinner/Spinner.js +12 -19
  53. package/dist/esm/components/Spinner/Spinner.js.map +1 -1
  54. package/dist/esm/components/Switch/Switch.js +9 -10
  55. package/dist/esm/components/Switch/Switch.js.map +1 -1
  56. package/dist/esm/components/Tabs/Tabs.js +25 -27
  57. package/dist/esm/components/Tabs/Tabs.js.map +1 -1
  58. package/dist/esm/components/Textarea/Textarea.js +11 -9
  59. package/dist/esm/components/Textarea/Textarea.js.map +1 -1
  60. package/dist/esm/components/Toast/Toaster.js +88 -118
  61. package/dist/esm/components/Toast/Toaster.js.map +1 -1
  62. package/dist/esm/components/Tooltip/Tooltip.js +7 -8
  63. package/dist/esm/components/Tooltip/Tooltip.js.map +1 -1
  64. package/dist/esm/components/Tour/Tour.js +46 -50
  65. package/dist/esm/components/Tour/Tour.js.map +1 -1
  66. package/dist/esm/components/Treeview/Treeview.js +26 -36
  67. package/dist/esm/components/Treeview/Treeview.js.map +1 -1
  68. package/dist/esm/components/VisuallyHidden/VisuallyHidden.js +1 -1
  69. package/dist/esm/components/VisuallyHidden/VisuallyHidden.js.map +1 -1
  70. package/dist/esm/index.js +2 -0
  71. package/dist/esm/index.js.map +1 -1
  72. package/dist/esm/utils/hooks/useDropTarget.js +10 -7
  73. package/dist/esm/utils/hooks/useDropTarget.js.map +1 -1
  74. package/dist/esm/utils/hooks/useProxiedRef.js +3 -3
  75. package/dist/esm/utils/hooks/useProxiedRef.js.map +1 -1
  76. package/dist/index.d.ts +2 -0
  77. package/dist/taco.cjs.development.js +802 -951
  78. package/dist/taco.cjs.development.js.map +1 -1
  79. package/dist/taco.cjs.production.min.js +1 -1
  80. package/dist/taco.cjs.production.min.js.map +1 -1
  81. package/dist/utils/tailwind.d.ts +1 -1
  82. package/package.json +130 -131
  83. package/tailwind.config.js +9 -0
  84. package/types.json +7 -1
@@ -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
- var _excluded = ["placement"];
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
- var Content = /*#__PURE__*/forwardRef(function HoverCardContent(externalProps, ref) {
14
- var placement = externalProps.placement,
15
- props = _objectWithoutPropertiesLoose(externalProps, _excluded);
16
-
17
- var className = cn('bg-white rounded p-3 yt-shadow', props.className);
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
- var HoverCard = function HoverCard(props) {
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":";;;;;;AAMA,IAAMA,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,IAAMG,OAAO,gBAAGN,UAAA,CAAiB,SAASO,gBAAT,CAA0BC,aAA1B,EAAgEL,GAAhE;EAC7B,IAAQM,SAAR,GAAgCD,aAAhC,CAAQC,SAAR;MAAsBP,KAAtB,iCAAgCM,aAAhC;;EACA,IAAME,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;IASaI,SAAS,GAAG,SAAZA,SAAY,CAACX,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
+ {"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
- var _excluded = ["name"];
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
- var name = props.name,
12
- otherProps = _objectWithoutPropertiesLoose(props, _excluded);
13
-
14
- var Component = icons[name];
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
- var className = cn('inline-flex h-[1.715em] w-[1.715em] flex-shrink-0', props.className, {
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":";;;;;;;IAYaA,IAAI,gBAAGC,cAAK,CAACC,UAAN,CAAiB,SAASF,IAAT,CAAcG,KAAd,EAAgCC,GAAhC;;;EACjC,IAAQC,IAAR,GAAgCF,KAAhC,CAAQE,IAAR;MAAiBC,UAAjB,iCAAgCH,KAAhC;;EACA,IAAMI,SAAS,GAAGC,KAAK,CAACH,IAAD,CAAvB;;;EAEA,IAAMI,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
+ {"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
- var _excluded = ["icon", "rounded"];
8
- var IconButton = /*#__PURE__*/forwardRef(function IconButton(props, ref) {
9
- var icon = props.icon,
10
- _props$rounded = props.rounded,
11
- rounded = _props$rounded === void 0 ? false : _props$rounded,
12
- otherProps = _objectWithoutPropertiesLoose(props, _excluded);
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(_extends({}, otherProps, {
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
- }), className, ref);
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":";;;;;;;IAsCaA,UAAU,gBAAGC,UAAA,CAAiB,SAASD,UAAT,CAAoBE,KAApB,EAA4CC,GAA5C;EACvC,IAAQC,IAAR,GAAiDF,KAAjD,CAAQE,IAAR;uBAAiDF,KAAjD,CAAcG,OAAd;MAAcA,OAAd,+BAAwB,KAAxB;MAAkCC,UAAlC,iCAAiDJ,KAAjD;;EAEA,IAAMK,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,cACVP,UADU;IACEQ,QAAQ,EAAEb,aAAA,CAACc,IAAD;MAAMC,IAAI,EAAEZ;MAAMG,SAAS,EAAC;KAA5B,CADZ;IACsD,aAAa;MAClFA,SAFe,EAGfJ,GAHe,CAAnB;AAKH,CAzByB;;;;"}
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
- var _excluded = ["button", "icon", "highlighted", "invalid", "onKeyDown", "autoFocus"];
9
- var Input = /*#__PURE__*/forwardRef(function Input(props, ref) {
10
- var button = props.button,
11
- icon = props.icon,
12
- invalid = props.invalid,
13
- onKeyDown = props.onKeyDown,
14
- autoFocus = props.autoFocus,
15
- otherProps = _objectWithoutPropertiesLoose(props, _excluded);
16
-
17
- var inputRef = useProxiedRef(ref);
18
- var hasContainer = button || icon;
19
- var className = cn(getInputClasses(props), 'min-h-[theme(spacing.8)] pointer-events-all', {
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(function () {
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
- var handleKeyDown = function handleKeyDown(event) {
30
+ const handleKeyDown = event => {
31
31
  if (!event.shiftKey && (event.key === 'Home' || event.key === 'End')) {
32
32
  event.preventDefault();
33
- var position = event.key === 'End' ? event.currentTarget.value.length : 0;
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
- var input = createElement("input", Object.assign({}, otherProps, {
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
- var extra;
50
+ let extra;
51
51
 
52
52
  if (button) {
53
- var _cn;
54
-
55
- var disabled = button.props.disabled || otherProps.disabled;
56
- var buttonClassName = cn('items-center flex justify-center border absolute rounded-l-none rounded-r right-0 h-full focus:rounded focus:outline-none', (_cn = {}, _cn[getButtonStateClasses(invalid)] = !props.disabled, _cn), button.props.className);
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: disabled
59
+ disabled
60
60
  });
61
61
  } else if (icon) {
62
- var 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', {
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
- var containerClassName = cn('bg-white inline-flex relative rounded w-full', otherProps.className);
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"
@@ -1 +1 @@
1
- {"version":3,"file":"Input.js","sources":["../../../../src/components/Input/Input.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport cn from 'classnames';\r\nimport { Icon, IconName } from '../Icon/Icon';\r\nimport { useProxiedRef } from '../../utils/hooks/useProxiedRef';\r\nimport { getButtonStateClasses, getInputClasses } from './util';\r\n\r\nexport type InputProps = React.InputHTMLAttributes<HTMLInputElement> & {\r\n /** Shows a button within the input field */\r\n button?: React.ReactElement;\r\n /** Shows an icon within the input field */\r\n icon?: IconName | JSX.Element;\r\n /** Draws attention to the input by changing its style and making it visually prominent */\r\n highlighted?: boolean;\r\n /* Whether the input is in an invalid state */\r\n invalid?: boolean;\r\n};\r\n\r\nexport const Input = React.forwardRef(function Input(props: InputProps, ref: React.Ref<HTMLInputElement>) {\r\n const { button, icon, highlighted, invalid, onKeyDown, autoFocus, ...otherProps } = props;\r\n const inputRef = useProxiedRef<HTMLInputElement>(ref);\r\n const hasContainer = button || icon;\r\n const className = cn(\r\n getInputClasses(props),\r\n 'min-h-[theme(spacing.8)] pointer-events-all',\r\n {\r\n 'pr-8': !!hasContainer,\r\n },\r\n !hasContainer && otherProps.className\r\n );\r\n\r\n React.useEffect(() => {\r\n if (autoFocus && inputRef.current) {\r\n inputRef.current.focus();\r\n }\r\n }, []);\r\n\r\n // home and end keys only navigate to the start/end of input value if the input container does not scroll\r\n // if it has scroll height then the browser reverts to native scrolling behaviour only\r\n // so we manually override it to ensure _our_ desired behaviour remains intact\r\n const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\r\n if (!event.shiftKey && (event.key === 'Home' || event.key === 'End')) {\r\n event.preventDefault();\r\n const position = event.key === 'End' ? event.currentTarget.value.length : 0;\r\n event.currentTarget.setSelectionRange(position, position);\r\n }\r\n\r\n if (onKeyDown) {\r\n onKeyDown(event);\r\n }\r\n };\r\n\r\n const input = <input {...otherProps} className={className} data-taco=\"input\" onKeyDown={handleKeyDown} ref={inputRef} />;\r\n\r\n if (hasContainer) {\r\n let extra: any;\r\n\r\n if (button) {\r\n const disabled = button.props.disabled || otherProps.disabled;\r\n const buttonClassName = cn(\r\n 'items-center flex justify-center border absolute rounded-l-none rounded-r right-0 h-full focus:rounded focus:outline-none',\r\n {\r\n [getButtonStateClasses(invalid)]: !props.disabled,\r\n },\r\n button.props.className\r\n );\r\n extra = React.cloneElement(button, {\r\n className: buttonClassName,\r\n disabled,\r\n });\r\n } else if (icon) {\r\n const iconClassName = cn(\r\n 'items-center flex justify-center absolute pointer-events-none mr-1 p-px right-0 w-5 top-1/2 -translate-y-1/2',\r\n {\r\n 'text-grey-dark': props.disabled,\r\n 'text-grey-darkest': !props.disabled,\r\n }\r\n );\r\n extra =\r\n typeof icon === 'string' ? (\r\n <Icon className={iconClassName} name={icon} />\r\n ) : (\r\n React.cloneElement(icon, { className: cn(iconClassName, icon.props.className) })\r\n );\r\n }\r\n\r\n const containerClassName = cn('bg-white inline-flex relative rounded w-full', otherProps.className);\r\n\r\n return (\r\n <div className={containerClassName} data-taco=\"input-container\">\r\n {input}\r\n {extra}\r\n </div>\r\n );\r\n }\r\n\r\n return input;\r\n});\r\n"],"names":["Input","React","props","ref","button","icon","invalid","onKeyDown","autoFocus","otherProps","inputRef","useProxiedRef","hasContainer","className","cn","getInputClasses","current","focus","handleKeyDown","event","shiftKey","key","preventDefault","position","currentTarget","value","length","setSelectionRange","input","extra","disabled","buttonClassName","getButtonStateClasses","iconClassName","Icon","name","containerClassName"],"mappings":";;;;;;;;IAiBaA,KAAK,gBAAGC,UAAA,CAAiB,SAASD,KAAT,CAAeE,KAAf,EAAkCC,GAAlC;MAC1BC,MAAR,GAAoFF,KAApF,CAAQE,MAAR;MAAgBC,IAAhB,GAAoFH,KAApF,CAAgBG,IAAhB;MAAmCC,OAAnC,GAAoFJ,KAApF,CAAmCI,OAAnC;MAA4CC,SAA5C,GAAoFL,KAApF,CAA4CK,SAA5C;MAAuDC,SAAvD,GAAoFN,KAApF,CAAuDM,SAAvD;MAAqEC,UAArE,iCAAoFP,KAApF;;EACA,IAAMQ,QAAQ,GAAGC,aAAa,CAAmBR,GAAnB,CAA9B;EACA,IAAMS,YAAY,GAAGR,MAAM,IAAIC,IAA/B;EACA,IAAMQ,SAAS,GAAGC,EAAE,CAChBC,eAAe,CAACb,KAAD,CADC,EAEhB,6CAFgB,EAGhB;IACI,QAAQ,CAAC,CAACU;GAJE,EAMhB,CAACA,YAAD,IAAiBH,UAAU,CAACI,SANZ,CAApB;EASAZ,SAAA,CAAgB;IACZ,IAAIO,SAAS,IAAIE,QAAQ,CAACM,OAA1B,EAAmC;MAC/BN,QAAQ,CAACM,OAAT,CAAiBC,KAAjB;;GAFR,EAIG,EAJH;;;;EASA,IAAMC,aAAa,GAAG,SAAhBA,aAAgB,CAACC,KAAD;IAClB,IAAI,CAACA,KAAK,CAACC,QAAP,KAAoBD,KAAK,CAACE,GAAN,KAAc,MAAd,IAAwBF,KAAK,CAACE,GAAN,KAAc,KAA1D,CAAJ,EAAsE;MAClEF,KAAK,CAACG,cAAN;MACA,IAAMC,QAAQ,GAAGJ,KAAK,CAACE,GAAN,KAAc,KAAd,GAAsBF,KAAK,CAACK,aAAN,CAAoBC,KAApB,CAA0BC,MAAhD,GAAyD,CAA1E;MACAP,KAAK,CAACK,aAAN,CAAoBG,iBAApB,CAAsCJ,QAAtC,EAAgDA,QAAhD;;;IAGJ,IAAIhB,SAAJ,EAAe;MACXA,SAAS,CAACY,KAAD,CAAT;;GARR;;EAYA,IAAMS,KAAK,GAAG3B,aAAA,QAAA,oBAAWQ;IAAYI,SAAS,EAAEA;iBAAqB;IAAQN,SAAS,EAAEW;IAAef,GAAG,EAAEO;IAA9F,CAAd;;EAEA,IAAIE,YAAJ,EAAkB;IACd,IAAIiB,KAAJ;;IAEA,IAAIzB,MAAJ,EAAY;MAAA;;MACR,IAAM0B,QAAQ,GAAG1B,MAAM,CAACF,KAAP,CAAa4B,QAAb,IAAyBrB,UAAU,CAACqB,QAArD;MACA,IAAMC,eAAe,GAAGjB,EAAE,CACtB,2HADsB,iBAGjBkB,qBAAqB,CAAC1B,OAAD,CAHJ,IAGgB,CAACJ,KAAK,CAAC4B,QAHvB,QAKtB1B,MAAM,CAACF,KAAP,CAAaW,SALS,CAA1B;MAOAgB,KAAK,GAAG5B,YAAA,CAAmBG,MAAnB,EAA2B;QAC/BS,SAAS,EAAEkB,eADoB;QAE/BD,QAAQ,EAARA;OAFI,CAAR;KATJ,MAaO,IAAIzB,IAAJ,EAAU;MACb,IAAM4B,aAAa,GAAGnB,EAAE,CACpB,8GADoB,EAEpB;QACI,kBAAkBZ,KAAK,CAAC4B,QAD5B;QAEI,qBAAqB,CAAC5B,KAAK,CAAC4B;OAJZ,CAAxB;MAOAD,KAAK,GACD,OAAOxB,IAAP,KAAgB,QAAhB,GACIJ,aAAA,CAACiC,IAAD;QAAMrB,SAAS,EAAEoB;QAAeE,IAAI,EAAE9B;OAAtC,CADJ,GAGIJ,YAAA,CAAmBI,IAAnB,EAAyB;QAAEQ,SAAS,EAAEC,EAAE,CAACmB,aAAD,EAAgB5B,IAAI,CAACH,KAAL,CAAWW,SAA3B;OAAxC,CAJR;;;IAQJ,IAAMuB,kBAAkB,GAAGtB,EAAE,CAAC,8CAAD,EAAiDL,UAAU,CAACI,SAA5D,CAA7B;IAEA,OACIZ,aAAA,MAAA;MAAKY,SAAS,EAAEuB;mBAA8B;KAA9C,EACKR,KADL,EAEKC,KAFL,CADJ;;;EAQJ,OAAOD,KAAP;AACH,CA/EoB;;;;"}
1
+ {"version":3,"file":"Input.js","sources":["../../../../src/components/Input/Input.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport cn from 'classnames';\r\nimport { Icon, IconName } from '../Icon/Icon';\r\nimport { useProxiedRef } from '../../utils/hooks/useProxiedRef';\r\nimport { getButtonStateClasses, getInputClasses } from './util';\r\n\r\nexport type InputProps = React.InputHTMLAttributes<HTMLInputElement> & {\r\n /** Shows a button within the input field */\r\n button?: React.ReactElement;\r\n /** Shows an icon within the input field */\r\n icon?: IconName | JSX.Element;\r\n /** Draws attention to the input by changing its style and making it visually prominent */\r\n highlighted?: boolean;\r\n /* Whether the input is in an invalid state */\r\n invalid?: boolean;\r\n};\r\n\r\nexport const Input = React.forwardRef(function Input(props: InputProps, ref: React.Ref<HTMLInputElement>) {\r\n const { button, icon, highlighted, invalid, onKeyDown, autoFocus, ...otherProps } = props;\r\n const inputRef = useProxiedRef<HTMLInputElement>(ref);\r\n const hasContainer = button || icon;\r\n const className = cn(\r\n getInputClasses(props),\r\n 'min-h-[theme(spacing.8)] pointer-events-all',\r\n {\r\n 'pr-8': !!hasContainer,\r\n },\r\n !hasContainer && otherProps.className\r\n );\r\n\r\n React.useEffect(() => {\r\n if (autoFocus && inputRef.current) {\r\n inputRef.current.focus();\r\n }\r\n }, []);\r\n\r\n // home and end keys only navigate to the start/end of input value if the input container does not scroll\r\n // if it has scroll height then the browser reverts to native scrolling behaviour only\r\n // so we manually override it to ensure _our_ desired behaviour remains intact\r\n const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\r\n if (!event.shiftKey && (event.key === 'Home' || event.key === 'End')) {\r\n event.preventDefault();\r\n const position = event.key === 'End' ? event.currentTarget.value.length : 0;\r\n event.currentTarget.setSelectionRange(position, position);\r\n }\r\n\r\n if (onKeyDown) {\r\n onKeyDown(event);\r\n }\r\n };\r\n\r\n const input = <input {...otherProps} className={className} data-taco=\"input\" onKeyDown={handleKeyDown} ref={inputRef} />;\r\n\r\n if (hasContainer) {\r\n let extra: any;\r\n\r\n if (button) {\r\n const disabled = button.props.disabled || otherProps.disabled;\r\n const buttonClassName = cn(\r\n 'items-center flex justify-center border absolute rounded-l-none rounded-r right-0 h-full focus:rounded focus:outline-none',\r\n {\r\n [getButtonStateClasses(invalid)]: !props.disabled,\r\n },\r\n button.props.className\r\n );\r\n extra = React.cloneElement(button, {\r\n className: buttonClassName,\r\n disabled,\r\n });\r\n } else if (icon) {\r\n const iconClassName = cn(\r\n 'items-center flex justify-center absolute pointer-events-none mr-1 p-px right-0 w-5 top-1/2 -translate-y-1/2',\r\n {\r\n 'text-grey-dark': props.disabled,\r\n 'text-grey-darkest': !props.disabled,\r\n }\r\n );\r\n extra =\r\n typeof icon === 'string' ? (\r\n <Icon className={iconClassName} name={icon} />\r\n ) : (\r\n React.cloneElement(icon, { className: cn(iconClassName, icon.props.className) })\r\n );\r\n }\r\n\r\n const containerClassName = cn('bg-white inline-flex relative rounded w-full', otherProps.className);\r\n\r\n return (\r\n <div className={containerClassName} data-taco=\"input-container\">\r\n {input}\r\n {extra}\r\n </div>\r\n );\r\n }\r\n\r\n return input;\r\n});\r\n"],"names":["Input","React","props","ref","button","icon","highlighted","invalid","onKeyDown","autoFocus","otherProps","inputRef","useProxiedRef","hasContainer","className","cn","getInputClasses","current","focus","handleKeyDown","event","shiftKey","key","preventDefault","position","currentTarget","value","length","setSelectionRange","input","extra","disabled","buttonClassName","getButtonStateClasses","iconClassName","Icon","name","containerClassName"],"mappings":";;;;;;MAiBaA,KAAK,gBAAGC,UAAA,CAAiB,SAASD,KAAT,CAAeE,KAAf,EAAkCC,GAAlC;EAClC,MAAM;IAAEC,MAAF;IAAUC,IAAV;IAAgBC,WAAhB;IAA6BC,OAA7B;IAAsCC,SAAtC;IAAiDC,SAAjD;IAA4D,GAAGC;MAAeR,KAApF;EACA,MAAMS,QAAQ,GAAGC,aAAa,CAAmBT,GAAnB,CAA9B;EACA,MAAMU,YAAY,GAAGT,MAAM,IAAIC,IAA/B;EACA,MAAMS,SAAS,GAAGC,EAAE,CAChBC,eAAe,CAACd,KAAD,CADC,EAEhB,6CAFgB,EAGhB;IACI,QAAQ,CAAC,CAACW;GAJE,EAMhB,CAACA,YAAD,IAAiBH,UAAU,CAACI,SANZ,CAApB;EASAb,SAAA,CAAgB;IACZ,IAAIQ,SAAS,IAAIE,QAAQ,CAACM,OAA1B,EAAmC;MAC/BN,QAAQ,CAACM,OAAT,CAAiBC,KAAjB;;GAFR,EAIG,EAJH;;;;EASA,MAAMC,aAAa,GAAIC,KAAD;IAClB,IAAI,CAACA,KAAK,CAACC,QAAP,KAAoBD,KAAK,CAACE,GAAN,KAAc,MAAd,IAAwBF,KAAK,CAACE,GAAN,KAAc,KAA1D,CAAJ,EAAsE;MAClEF,KAAK,CAACG,cAAN;MACA,MAAMC,QAAQ,GAAGJ,KAAK,CAACE,GAAN,KAAc,KAAd,GAAsBF,KAAK,CAACK,aAAN,CAAoBC,KAApB,CAA0BC,MAAhD,GAAyD,CAA1E;MACAP,KAAK,CAACK,aAAN,CAAoBG,iBAApB,CAAsCJ,QAAtC,EAAgDA,QAAhD;;;IAGJ,IAAIhB,SAAJ,EAAe;MACXA,SAAS,CAACY,KAAD,CAAT;;GARR;;EAYA,MAAMS,KAAK,GAAG5B,aAAA,QAAA,oBAAWS;IAAYI,SAAS,EAAEA;iBAAqB;IAAQN,SAAS,EAAEW;IAAehB,GAAG,EAAEQ;IAA9F,CAAd;;EAEA,IAAIE,YAAJ,EAAkB;IACd,IAAIiB,KAAJ;;IAEA,IAAI1B,MAAJ,EAAY;MACR,MAAM2B,QAAQ,GAAG3B,MAAM,CAACF,KAAP,CAAa6B,QAAb,IAAyBrB,UAAU,CAACqB,QAArD;MACA,MAAMC,eAAe,GAAGjB,EAAE,CACtB,2HADsB,EAEtB;QACI,CAACkB,qBAAqB,CAAC1B,OAAD,CAAtB,GAAkC,CAACL,KAAK,CAAC6B;OAHvB,EAKtB3B,MAAM,CAACF,KAAP,CAAaY,SALS,CAA1B;MAOAgB,KAAK,GAAG7B,YAAA,CAAmBG,MAAnB,EAA2B;QAC/BU,SAAS,EAAEkB,eADoB;QAE/BD;OAFI,CAAR;KATJ,MAaO,IAAI1B,IAAJ,EAAU;MACb,MAAM6B,aAAa,GAAGnB,EAAE,CACpB,8GADoB,EAEpB;QACI,kBAAkBb,KAAK,CAAC6B,QAD5B;QAEI,qBAAqB,CAAC7B,KAAK,CAAC6B;OAJZ,CAAxB;MAOAD,KAAK,GACD,OAAOzB,IAAP,KAAgB,QAAhB,GACIJ,aAAA,CAACkC,IAAD;QAAMrB,SAAS,EAAEoB;QAAeE,IAAI,EAAE/B;OAAtC,CADJ,GAGIJ,YAAA,CAAmBI,IAAnB,EAAyB;QAAES,SAAS,EAAEC,EAAE,CAACmB,aAAD,EAAgB7B,IAAI,CAACH,KAAL,CAAWY,SAA3B;OAAxC,CAJR;;;IAQJ,MAAMuB,kBAAkB,GAAGtB,EAAE,CAAC,8CAAD,EAAiDL,UAAU,CAACI,SAA5D,CAA7B;IAEA,OACIb,aAAA,MAAA;MAAKa,SAAS,EAAEuB;mBAA8B;KAA9C,EACKR,KADL,EAEKC,KAFL,CADJ;;;EAQJ,OAAOD,KAAP;AACH,CA/EoB;;;;"}
@@ -1,53 +1,52 @@
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 { ScrollableList } from './ScrollableList.js';
5
4
  import { useListbox } from './useListbox.js';
6
5
  import { useMultiListbox } from './useMultiListbox.js';
7
6
 
8
- var _excluded = ["className"],
9
- _excluded2 = ["className"];
10
- var Listbox = /*#__PURE__*/forwardRef(function Listbox(props, ref) {
11
- var externalClassName = props.className,
12
- otherProps = _objectWithoutPropertiesLoose(props, _excluded);
13
-
14
- var _useListbox = useListbox(otherProps, ref),
15
- list = _useListbox.list,
16
- input = _useListbox.input;
17
-
18
- var className = cn('bg-white inline-flex relative w-full', externalClassName);
7
+ const Listbox = /*#__PURE__*/forwardRef(function Listbox(props, ref) {
8
+ const {
9
+ className: externalClassName,
10
+ ...otherProps
11
+ } = props;
12
+ const {
13
+ list,
14
+ input
15
+ } = useListbox(otherProps, ref);
16
+ const className = cn('bg-white inline-flex relative w-full', externalClassName);
19
17
  return createElement("span", {
20
18
  "data-taco": "listbox",
21
19
  className: className
22
20
  }, createElement(ScrollableList, Object.assign({}, list, {
23
- style: _extends({}, list.style, {
21
+ style: { ...list.style,
24
22
  maxHeight: 'calc(12rem + 2px)'
25
23
  /* (6 * option height) + listbox border */
26
24
 
27
- })
25
+ }
28
26
  })), createElement("input", Object.assign({}, input, {
29
27
  className: "hidden",
30
28
  type: "text"
31
29
  })));
32
30
  });
33
- var MultiListbox = /*#__PURE__*/forwardRef(function Listbox(props, ref) {
34
- var externalClassName = props.className,
35
- otherProps = _objectWithoutPropertiesLoose(props, _excluded2);
36
-
37
- var _useMultiListbox = useMultiListbox(otherProps, ref),
38
- list = _useMultiListbox.list,
39
- input = _useMultiListbox.input;
40
-
41
- var className = cn('bg-white inline-flex relative w-full', externalClassName);
31
+ const MultiListbox = /*#__PURE__*/forwardRef(function Listbox(props, ref) {
32
+ const {
33
+ className: externalClassName,
34
+ ...otherProps
35
+ } = props;
36
+ const {
37
+ list,
38
+ input
39
+ } = useMultiListbox(otherProps, ref);
40
+ const className = cn('bg-white inline-flex relative w-full', externalClassName);
42
41
  return createElement("span", {
43
42
  "data-taco": "listbox",
44
43
  className: className
45
44
  }, createElement(ScrollableList, Object.assign({}, list, {
46
- style: _extends({}, list.style, {
45
+ style: { ...list.style,
47
46
  maxHeight: 'calc(12rem + 2px + 2px)'
48
47
  /* (6 * option height) + listbox border + ALL_OPTIONS bottom border */
49
48
 
50
- })
49
+ }
51
50
  })), createElement("input", Object.assign({}, input, {
52
51
  className: "hidden",
53
52
  type: "text"
@@ -1 +1 @@
1
- {"version":3,"file":"Listbox.js","sources":["../../../../src/components/Listbox/Listbox.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport cn from 'classnames';\r\nimport { useListbox } from './useListbox';\r\nimport { useMultiListbox } from './useMultiListbox';\r\nimport { ScrollableList, ScrollableListItemValue, ScrollableListItem } from './ScrollableList';\r\n\r\nexport type ListboxItem = ScrollableListItem;\r\nexport type ListboxValue = ScrollableListItemValue;\r\n\r\nexport type ListboxTexts = {\r\n /**\r\n * Text displayed in the listbox if no data provided.\r\n * To read more about how to provide the text, see [Provider](component:provider) component\r\n */\r\n empty: string;\r\n /**\r\n * Text displayed in the listbox to indicate the data is loading.\r\n * Read more about how to provide the text in [Provider](component:provider) component\r\n */\r\n loading: string;\r\n /**\r\n * The first option displayed in a multiselect listbox that selects all available options.\r\n * Read more about how to provide the text in [Provider](component:provider) component\r\n */\r\n allOption: string;\r\n};\r\n\r\nexport type ListboxProps = Pick<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'onFocus'> &\r\n Omit<React.InputHTMLAttributes<HTMLElement>, 'defaultValue' | 'onChange' | 'value'> & {\r\n /** Data indicating the options in listbox */\r\n data?: ListboxItem[];\r\n /**\r\n * Initial value of the listbox.\r\n * This is used when listbox is mounted, if no value is provided.\r\n * *Note* that listbox is a controlled component, setting this will also trigger the `onChange` event\r\n */\r\n defaultValue?: ListboxValue;\r\n /** Set what value should have an empty option in listbox */\r\n emptyValue?: ListboxValue;\r\n /** Draws attention to the listbox by changing its style and making it visually prominent */\r\n highlighted?: boolean;\r\n /* Whether the input is in an invalid state */\r\n invalid?: boolean;\r\n /**\r\n * Shows a loading indicator with a text next to it.\r\n * Read more about how to provide the text in [Provider](component:provider) component\r\n */\r\n loading?: boolean;\r\n /**\r\n * Value of the listbox representing the selected item.\r\n * It needs to be an existing value from the provided data\r\n */\r\n value?: ListboxValue;\r\n };\r\n\r\nexport const Listbox = React.forwardRef(function Listbox(props: ListboxProps, ref: React.Ref<HTMLInputElement>) {\r\n const { className: externalClassName, ...otherProps } = props;\r\n const { list, input } = useListbox(otherProps, ref);\r\n const className = cn('bg-white inline-flex relative w-full', externalClassName);\r\n\r\n return (\r\n <span data-taco=\"listbox\" className={className}>\r\n <ScrollableList\r\n {...list}\r\n style={{ ...list.style, maxHeight: 'calc(12rem + 2px)' /* (6 * option height) + listbox border */ }}\r\n />\r\n <input {...input} className=\"hidden\" type=\"text\" />\r\n </span>\r\n );\r\n});\r\n\r\nexport const MultiListbox = React.forwardRef(function Listbox(props: ListboxProps, ref: React.Ref<HTMLInputElement>) {\r\n const { className: externalClassName, ...otherProps } = props;\r\n const { list, input } = useMultiListbox(otherProps, ref);\r\n const className = cn('bg-white inline-flex relative w-full', externalClassName);\r\n\r\n return (\r\n <span data-taco=\"listbox\" className={className}>\r\n <ScrollableList\r\n {...list}\r\n style={{\r\n ...list.style,\r\n maxHeight: 'calc(12rem + 2px + 2px)' /* (6 * option height) + listbox border + ALL_OPTIONS bottom border */,\r\n }}\r\n />\r\n <input {...input} className=\"hidden\" type=\"text\" />\r\n </span>\r\n );\r\n});\r\n"],"names":["Listbox","React","props","ref","externalClassName","className","otherProps","useListbox","list","input","cn","ScrollableList","style","maxHeight","type","MultiListbox","useMultiListbox"],"mappings":";;;;;;;;;IAuDaA,OAAO,gBAAGC,UAAA,CAAiB,SAASD,OAAT,CAAiBE,KAAjB,EAAsCC,GAAtC;EACpC,IAAmBC,iBAAnB,GAAwDF,KAAxD,CAAQG,SAAR;MAAyCC,UAAzC,iCAAwDJ,KAAxD;;EACA,kBAAwBK,UAAU,CAACD,UAAD,EAAaH,GAAb,CAAlC;MAAQK,IAAR,eAAQA,IAAR;MAAcC,KAAd,eAAcA,KAAd;;EACA,IAAMJ,SAAS,GAAGK,EAAE,CAAC,sCAAD,EAAyCN,iBAAzC,CAApB;EAEA,OACIH,aAAA,OAAA;iBAAgB;IAAUI,SAAS,EAAEA;GAArC,EACIJ,aAAA,CAACU,cAAD,oBACQH;IACJI,KAAK,eAAOJ,IAAI,CAACI,KAAZ;MAAmBC,SAAS,EAAE;;;;IAFvC,CADJ,EAKIZ,aAAA,QAAA,oBAAWQ;IAAOJ,SAAS,EAAC;IAASS,IAAI,EAAC;IAA1C,CALJ,CADJ;AASH,CAdsB;IAgBVC,YAAY,gBAAGd,UAAA,CAAiB,SAASD,OAAT,CAAiBE,KAAjB,EAAsCC,GAAtC;EACzC,IAAmBC,iBAAnB,GAAwDF,KAAxD,CAAQG,SAAR;MAAyCC,UAAzC,iCAAwDJ,KAAxD;;EACA,uBAAwBc,eAAe,CAACV,UAAD,EAAaH,GAAb,CAAvC;MAAQK,IAAR,oBAAQA,IAAR;MAAcC,KAAd,oBAAcA,KAAd;;EACA,IAAMJ,SAAS,GAAGK,EAAE,CAAC,sCAAD,EAAyCN,iBAAzC,CAApB;EAEA,OACIH,aAAA,OAAA;iBAAgB;IAAUI,SAAS,EAAEA;GAArC,EACIJ,aAAA,CAACU,cAAD,oBACQH;IACJI,KAAK,eACEJ,IAAI,CAACI,KADP;MAEDC,SAAS,EAAE;;;;IAJnB,CADJ,EAQIZ,aAAA,QAAA,oBAAWQ;IAAOJ,SAAS,EAAC;IAASS,IAAI,EAAC;IAA1C,CARJ,CADJ;AAYH,CAjB2B;;;;"}
1
+ {"version":3,"file":"Listbox.js","sources":["../../../../src/components/Listbox/Listbox.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport cn from 'classnames';\r\nimport { useListbox } from './useListbox';\r\nimport { useMultiListbox } from './useMultiListbox';\r\nimport { ScrollableList, ScrollableListItemValue, ScrollableListItem } from './ScrollableList';\r\n\r\nexport type ListboxItem = ScrollableListItem;\r\nexport type ListboxValue = ScrollableListItemValue;\r\n\r\nexport type ListboxTexts = {\r\n /**\r\n * Text displayed in the listbox if no data provided.\r\n * To read more about how to provide the text, see [Provider](component:provider) component\r\n */\r\n empty: string;\r\n /**\r\n * Text displayed in the listbox to indicate the data is loading.\r\n * Read more about how to provide the text in [Provider](component:provider) component\r\n */\r\n loading: string;\r\n /**\r\n * The first option displayed in a multiselect listbox that selects all available options.\r\n * Read more about how to provide the text in [Provider](component:provider) component\r\n */\r\n allOption: string;\r\n};\r\n\r\nexport type ListboxProps = Pick<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'onFocus'> &\r\n Omit<React.InputHTMLAttributes<HTMLElement>, 'defaultValue' | 'onChange' | 'value'> & {\r\n /** Data indicating the options in listbox */\r\n data?: ListboxItem[];\r\n /**\r\n * Initial value of the listbox.\r\n * This is used when listbox is mounted, if no value is provided.\r\n * *Note* that listbox is a controlled component, setting this will also trigger the `onChange` event\r\n */\r\n defaultValue?: ListboxValue;\r\n /** Set what value should have an empty option in listbox */\r\n emptyValue?: ListboxValue;\r\n /** Draws attention to the listbox by changing its style and making it visually prominent */\r\n highlighted?: boolean;\r\n /* Whether the input is in an invalid state */\r\n invalid?: boolean;\r\n /**\r\n * Shows a loading indicator with a text next to it.\r\n * Read more about how to provide the text in [Provider](component:provider) component\r\n */\r\n loading?: boolean;\r\n /**\r\n * Value of the listbox representing the selected item.\r\n * It needs to be an existing value from the provided data\r\n */\r\n value?: ListboxValue;\r\n };\r\n\r\nexport const Listbox = React.forwardRef(function Listbox(props: ListboxProps, ref: React.Ref<HTMLInputElement>) {\r\n const { className: externalClassName, ...otherProps } = props;\r\n const { list, input } = useListbox(otherProps, ref);\r\n const className = cn('bg-white inline-flex relative w-full', externalClassName);\r\n\r\n return (\r\n <span data-taco=\"listbox\" className={className}>\r\n <ScrollableList\r\n {...list}\r\n style={{ ...list.style, maxHeight: 'calc(12rem + 2px)' /* (6 * option height) + listbox border */ }}\r\n />\r\n <input {...input} className=\"hidden\" type=\"text\" />\r\n </span>\r\n );\r\n});\r\n\r\nexport const MultiListbox = React.forwardRef(function Listbox(props: ListboxProps, ref: React.Ref<HTMLInputElement>) {\r\n const { className: externalClassName, ...otherProps } = props;\r\n const { list, input } = useMultiListbox(otherProps, ref);\r\n const className = cn('bg-white inline-flex relative w-full', externalClassName);\r\n\r\n return (\r\n <span data-taco=\"listbox\" className={className}>\r\n <ScrollableList\r\n {...list}\r\n style={{\r\n ...list.style,\r\n maxHeight: 'calc(12rem + 2px + 2px)' /* (6 * option height) + listbox border + ALL_OPTIONS bottom border */,\r\n }}\r\n />\r\n <input {...input} className=\"hidden\" type=\"text\" />\r\n </span>\r\n );\r\n});\r\n"],"names":["Listbox","React","props","ref","className","externalClassName","otherProps","list","input","useListbox","cn","ScrollableList","style","maxHeight","type","MultiListbox","useMultiListbox"],"mappings":";;;;;;MAuDaA,OAAO,gBAAGC,UAAA,CAAiB,SAASD,OAAT,CAAiBE,KAAjB,EAAsCC,GAAtC;EACpC,MAAM;IAAEC,SAAS,EAAEC,iBAAb;IAAgC,GAAGC;MAAeJ,KAAxD;EACA,MAAM;IAAEK,IAAF;IAAQC;MAAUC,UAAU,CAACH,UAAD,EAAaH,GAAb,CAAlC;EACA,MAAMC,SAAS,GAAGM,EAAE,CAAC,sCAAD,EAAyCL,iBAAzC,CAApB;EAEA,OACIJ,aAAA,OAAA;iBAAgB;IAAUG,SAAS,EAAEA;GAArC,EACIH,aAAA,CAACU,cAAD,oBACQJ;IACJK,KAAK,EAAE,EAAE,GAAGL,IAAI,CAACK,KAAV;MAAiBC,SAAS,EAAE;;;;IAFvC,CADJ,EAKIZ,aAAA,QAAA,oBAAWO;IAAOJ,SAAS,EAAC;IAASU,IAAI,EAAC;IAA1C,CALJ,CADJ;AASH,CAdsB;MAgBVC,YAAY,gBAAGd,UAAA,CAAiB,SAASD,OAAT,CAAiBE,KAAjB,EAAsCC,GAAtC;EACzC,MAAM;IAAEC,SAAS,EAAEC,iBAAb;IAAgC,GAAGC;MAAeJ,KAAxD;EACA,MAAM;IAAEK,IAAF;IAAQC;MAAUQ,eAAe,CAACV,UAAD,EAAaH,GAAb,CAAvC;EACA,MAAMC,SAAS,GAAGM,EAAE,CAAC,sCAAD,EAAyCL,iBAAzC,CAApB;EAEA,OACIJ,aAAA,OAAA;iBAAgB;IAAUG,SAAS,EAAEA;GAArC,EACIH,aAAA,CAACU,cAAD,oBACQJ;IACJK,KAAK,EAAE,EACH,GAAGL,IAAI,CAACK,KADL;MAEHC,SAAS,EAAE;;;;IAJnB,CADJ,EAQIZ,aAAA,QAAA,oBAAWO;IAAOJ,SAAS,EAAC;IAASU,IAAI,EAAC;IAA1C,CARJ,CADJ;AAYH,CAjB2B;;;;"}
@@ -1,4 +1,3 @@
1
- import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose } from '../../_virtual/_rollupPluginBabelHelpers.js';
2
1
  import { useState, useMemo, createElement } from 'react';
3
2
  import { MenuContext } from './Context.js';
4
3
  import { Root } from '@radix-ui/react-dropdown-menu';
@@ -11,39 +10,22 @@ import { RadioGroup } from './components/RadioGroup.js';
11
10
  import { Separator } from './components/Separator.js';
12
11
  import { Header } from './components/Header.js';
13
12
 
14
- var _excluded = ["children", "trigger"];
15
- var Menu = function Menu(externalProps) {
16
- var children = externalProps.children,
17
- trigger = externalProps.trigger,
18
- props = _objectWithoutPropertiesLoose(externalProps, _excluded);
19
-
20
- var _React$useState = useState(false),
21
- open = _React$useState[0],
22
- setOpen = _React$useState[1];
23
-
24
- var _React$useState2 = useState(false),
25
- indented = _React$useState2[0],
26
- setIndented = _React$useState2[1];
27
-
28
- var _React$useState3 = useState(undefined),
29
- minWidth = _React$useState3[0],
30
- _setMinWidth = _React$useState3[1];
31
-
32
- var context = useMemo(function () {
33
- return {
34
- indented: indented,
35
- registerIndentation: function registerIndentation() {
36
- return setIndented(true);
37
- },
38
- minWidth: minWidth,
39
- setMinWidth: function setMinWidth(width) {
40
- return _setMinWidth(width);
41
- },
42
- close: function close() {
43
- return setOpen(false);
44
- }
45
- };
46
- }, [indented, minWidth]);
13
+ const Menu = externalProps => {
14
+ const {
15
+ children,
16
+ trigger,
17
+ ...props
18
+ } = externalProps;
19
+ const [open, setOpen] = useState(false);
20
+ const [indented, setIndented] = useState(false);
21
+ const [minWidth, setMinWidth] = useState(undefined);
22
+ const context = useMemo(() => ({
23
+ indented,
24
+ registerIndentation: () => setIndented(true),
25
+ minWidth,
26
+ setMinWidth: width => setMinWidth(width),
27
+ close: () => setOpen(false)
28
+ }), [indented, minWidth]);
47
29
  return createElement(MenuContext.Provider, {
48
30
  value: context
49
31
  }, createElement(Root, Object.assign({}, props, {
@@ -1 +1 @@
1
- {"version":3,"file":"Menu.js","sources":["../../../../src/components/Menu/Menu.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';\r\nimport { MenuContext } from './Context';\r\nimport { Content } from './components/Content';\r\nimport { Item } from './components/Item';\r\nimport { Link } from './components/Link';\r\nimport { Trigger } from './components/Trigger';\r\nimport { Checkbox } from './components/Checkbox';\r\nimport { RadioGroup } from './components/RadioGroup';\r\nimport { Separator } from './components/Separator';\r\nimport { Header } from './components/Header';\r\n\r\nexport type MenuProps = {\r\n children: React.ReactNode;\r\n id?: string;\r\n /** A trigger to be used for the menu, should not be set if `children` already contains a trigger */\r\n trigger?: JSX.Element;\r\n};\r\n\r\nexport const Menu = (externalProps: MenuProps): JSX.Element => {\r\n const { children, trigger, ...props } = externalProps;\r\n const [open, setOpen] = React.useState(false);\r\n const [indented, setIndented] = React.useState(false);\r\n const [minWidth, setMinWidth] = React.useState<number | undefined>(undefined);\r\n\r\n const context = React.useMemo(\r\n () => ({\r\n indented,\r\n registerIndentation: () => setIndented(true),\r\n minWidth,\r\n setMinWidth: (width: number) => setMinWidth(width),\r\n close: () => setOpen(false),\r\n }),\r\n [indented, minWidth]\r\n );\r\n\r\n return (\r\n <MenuContext.Provider value={context}>\r\n <DropdownMenuPrimitive.Root {...props} modal={false} open={open} onOpenChange={setOpen}>\r\n {trigger && <Trigger>{trigger}</Trigger>}\r\n {children}\r\n </DropdownMenuPrimitive.Root>\r\n </MenuContext.Provider>\r\n );\r\n};\r\nMenu.Trigger = Trigger;\r\nMenu.Content = Content;\r\nMenu.Item = Item;\r\nMenu.Link = Link;\r\nMenu.Checkbox = Checkbox;\r\nMenu.Separator = Separator;\r\nMenu.Header = Header;\r\nMenu.RadioGroup = RadioGroup;\r\n"],"names":["Menu","externalProps","children","trigger","props","React","open","setOpen","indented","setIndented","undefined","minWidth","setMinWidth","context","registerIndentation","width","close","MenuContext","Provider","value","DropdownMenuPrimitive","modal","onOpenChange","Trigger","Content","Item","Link","Checkbox","Separator","Header","RadioGroup"],"mappings":";;;;;;;;;;;;;;IAmBaA,IAAI,GAAG,SAAPA,IAAO,CAACC,aAAD;EAChB,IAAQC,QAAR,GAAwCD,aAAxC,CAAQC,QAAR;MAAkBC,OAAlB,GAAwCF,aAAxC,CAAkBE,OAAlB;MAA8BC,KAA9B,iCAAwCH,aAAxC;;EACA,sBAAwBI,QAAA,CAAe,KAAf,CAAxB;MAAOC,IAAP;MAAaC,OAAb;;EACA,uBAAgCF,QAAA,CAAe,KAAf,CAAhC;MAAOG,QAAP;MAAiBC,WAAjB;;EACA,uBAAgCJ,QAAA,CAAmCK,SAAnC,CAAhC;MAAOC,QAAP;MAAiBC,YAAjB;;EAEA,IAAMC,OAAO,GAAGR,OAAA,CACZ;IAAA,OAAO;MACHG,QAAQ,EAARA,QADG;MAEHM,mBAAmB,EAAE;QAAA,OAAML,WAAW,CAAC,IAAD,CAAjB;OAFlB;MAGHE,QAAQ,EAARA,QAHG;MAIHC,WAAW,EAAE,qBAACG,KAAD;QAAA,OAAmBH,YAAW,CAACG,KAAD,CAA9B;OAJV;MAKHC,KAAK,EAAE;QAAA,OAAMT,OAAO,CAAC,KAAD,CAAb;;KALX;GADY,EAQZ,CAACC,QAAD,EAAWG,QAAX,CARY,CAAhB;EAWA,OACIN,aAAA,CAACY,WAAW,CAACC,QAAb;IAAsBC,KAAK,EAAEN;GAA7B,EACIR,aAAA,CAACe,IAAD,oBAAgChB;IAAOiB,KAAK,EAAE;IAAOf,IAAI,EAAEA;IAAMgB,YAAY,EAAEf;IAA/E,EACKJ,OAAO,IAAIE,aAAA,CAACkB,OAAD,MAAA,EAAUpB,OAAV,CADhB,EAEKD,QAFL,CADJ,CADJ;AAQH;AACDF,IAAI,CAACuB,OAAL,GAAeA,OAAf;AACAvB,IAAI,CAACwB,OAAL,GAAeA,OAAf;AACAxB,IAAI,CAACyB,IAAL,GAAYA,IAAZ;AACAzB,IAAI,CAAC0B,IAAL,GAAYA,IAAZ;AACA1B,IAAI,CAAC2B,QAAL,GAAgBA,QAAhB;AACA3B,IAAI,CAAC4B,SAAL,GAAiBA,SAAjB;AACA5B,IAAI,CAAC6B,MAAL,GAAcA,MAAd;AACA7B,IAAI,CAAC8B,UAAL,GAAkBA,UAAlB;;;;"}
1
+ {"version":3,"file":"Menu.js","sources":["../../../../src/components/Menu/Menu.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';\r\nimport { MenuContext } from './Context';\r\nimport { Content } from './components/Content';\r\nimport { Item } from './components/Item';\r\nimport { Link } from './components/Link';\r\nimport { Trigger } from './components/Trigger';\r\nimport { Checkbox } from './components/Checkbox';\r\nimport { RadioGroup } from './components/RadioGroup';\r\nimport { Separator } from './components/Separator';\r\nimport { Header } from './components/Header';\r\n\r\nexport type MenuProps = {\r\n children: React.ReactNode;\r\n id?: string;\r\n /** A trigger to be used for the menu, should not be set if `children` already contains a trigger */\r\n trigger?: JSX.Element;\r\n};\r\n\r\nexport const Menu = (externalProps: MenuProps): JSX.Element => {\r\n const { children, trigger, ...props } = externalProps;\r\n const [open, setOpen] = React.useState(false);\r\n const [indented, setIndented] = React.useState(false);\r\n const [minWidth, setMinWidth] = React.useState<number | undefined>(undefined);\r\n\r\n const context = React.useMemo(\r\n () => ({\r\n indented,\r\n registerIndentation: () => setIndented(true),\r\n minWidth,\r\n setMinWidth: (width: number) => setMinWidth(width),\r\n close: () => setOpen(false),\r\n }),\r\n [indented, minWidth]\r\n );\r\n\r\n return (\r\n <MenuContext.Provider value={context}>\r\n <DropdownMenuPrimitive.Root {...props} modal={false} open={open} onOpenChange={setOpen}>\r\n {trigger && <Trigger>{trigger}</Trigger>}\r\n {children}\r\n </DropdownMenuPrimitive.Root>\r\n </MenuContext.Provider>\r\n );\r\n};\r\nMenu.Trigger = Trigger;\r\nMenu.Content = Content;\r\nMenu.Item = Item;\r\nMenu.Link = Link;\r\nMenu.Checkbox = Checkbox;\r\nMenu.Separator = Separator;\r\nMenu.Header = Header;\r\nMenu.RadioGroup = RadioGroup;\r\n"],"names":["Menu","externalProps","children","trigger","props","open","setOpen","React","indented","setIndented","minWidth","setMinWidth","undefined","context","registerIndentation","width","close","MenuContext","Provider","value","DropdownMenuPrimitive","modal","onOpenChange","Trigger","Content","Item","Link","Checkbox","Separator","Header","RadioGroup"],"mappings":";;;;;;;;;;;;MAmBaA,IAAI,GAAIC,aAAD;EAChB,MAAM;IAAEC,QAAF;IAAYC,OAAZ;IAAqB,GAAGC;MAAUH,aAAxC;EACA,MAAM,CAACI,IAAD,EAAOC,OAAP,IAAkBC,QAAA,CAAe,KAAf,CAAxB;EACA,MAAM,CAACC,QAAD,EAAWC,WAAX,IAA0BF,QAAA,CAAe,KAAf,CAAhC;EACA,MAAM,CAACG,QAAD,EAAWC,WAAX,IAA0BJ,QAAA,CAAmCK,SAAnC,CAAhC;EAEA,MAAMC,OAAO,GAAGN,OAAA,CACZ,OAAO;IACHC,QADG;IAEHM,mBAAmB,EAAE,MAAML,WAAW,CAAC,IAAD,CAFnC;IAGHC,QAHG;IAIHC,WAAW,EAAGI,KAAD,IAAmBJ,WAAW,CAACI,KAAD,CAJxC;IAKHC,KAAK,EAAE,MAAMV,OAAO,CAAC,KAAD;GALxB,CADY,EAQZ,CAACE,QAAD,EAAWE,QAAX,CARY,CAAhB;EAWA,OACIH,aAAA,CAACU,WAAW,CAACC,QAAb;IAAsBC,KAAK,EAAEN;GAA7B,EACIN,aAAA,CAACa,IAAD,oBAAgChB;IAAOiB,KAAK,EAAE;IAAOhB,IAAI,EAAEA;IAAMiB,YAAY,EAAEhB;IAA/E,EACKH,OAAO,IAAII,aAAA,CAACgB,OAAD,MAAA,EAAUpB,OAAV,CADhB,EAEKD,QAFL,CADJ,CADJ;AAQH;AACDF,IAAI,CAACuB,OAAL,GAAeA,OAAf;AACAvB,IAAI,CAACwB,OAAL,GAAeA,OAAf;AACAxB,IAAI,CAACyB,IAAL,GAAYA,IAAZ;AACAzB,IAAI,CAAC0B,IAAL,GAAYA,IAAZ;AACA1B,IAAI,CAAC2B,QAAL,GAAgBA,QAAhB;AACA3B,IAAI,CAAC4B,SAAL,GAAiBA,SAAjB;AACA5B,IAAI,CAAC6B,MAAL,GAAcA,MAAd;AACA7B,IAAI,CAAC8B,UAAL,GAAkBA,UAAlB;;;;"}
@@ -1,4 +1,3 @@
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 { Icon } from '../Icon/Icon.js';
@@ -6,25 +5,20 @@ import { useProxiedRef } from '../../utils/hooks/useProxiedRef.js';
6
5
  import { Treeview } from '../Treeview/Treeview.js';
7
6
  import { useDropTarget } from '../../utils/hooks/useDropTarget.js';
8
7
 
9
- var _excluded = ["active", "children", "onDrop", "postfix", "prefix", "role"],
10
- _excluded2 = ["children"];
11
- var Item = /*#__PURE__*/React__default.forwardRef(function Item(props, ref) {
12
- var active = props.active,
13
- children = props.children,
14
- onDrop = props.onDrop,
15
- postfix = props.postfix,
16
- prefix = props.prefix,
17
- role = props.role,
18
- otherProps = _objectWithoutPropertiesLoose(props, _excluded);
19
-
20
- var proxyRef = useProxiedRef(ref);
21
-
22
- var _useDropTarget = useDropTarget(onDrop),
23
- isDraggedOver = _useDropTarget[0],
24
- dropTargetProps = _useDropTarget[1];
25
-
26
- var isTreeitem = role === 'treeitem';
27
- var className = cn('yt-navigation__item cursor-pointer', {
8
+ const Item = /*#__PURE__*/React__default.forwardRef(function Item(props, ref) {
9
+ const {
10
+ active,
11
+ children,
12
+ onDrop,
13
+ postfix,
14
+ prefix,
15
+ role,
16
+ ...otherProps
17
+ } = props;
18
+ const proxyRef = useProxiedRef(ref);
19
+ const [isDraggedOver, dropTargetProps] = useDropTarget(onDrop);
20
+ const isTreeitem = role === 'treeitem';
21
+ const className = cn('yt-navigation__item cursor-pointer', {
28
22
  'w-full mb-px py-1 px-3 flex items-center hover:bg-grey-dark': isTreeitem,
29
23
  'bg-white w-full h-10 px-3 flex-shrink-0 flex items-center justify-between cursor-pointer': !isTreeitem,
30
24
  'yt-navigation__item--active': active && !isDraggedOver,
@@ -32,7 +26,7 @@ var Item = /*#__PURE__*/React__default.forwardRef(function Item(props, ref) {
32
26
  'yt-navigation__item--dropping bg-blue': isDraggedOver
33
27
  }, props.className);
34
28
 
35
- var handleClick = function handleClick(event) {
29
+ const handleClick = event => {
36
30
  if (event.target instanceof HTMLAnchorElement || event.target instanceof HTMLButtonElement) {
37
31
  return;
38
32
  }
@@ -55,19 +49,19 @@ var Item = /*#__PURE__*/React__default.forwardRef(function Item(props, ref) {
55
49
  className: "yt-navigation__item__postfix ml-1"
56
50
  }, postfix));
57
51
  });
58
- var Panel = /*#__PURE__*/React__default.forwardRef(function Panel(props, ref) {
52
+ const Panel = /*#__PURE__*/React__default.forwardRef(function Panel(props, ref) {
59
53
  return React__default.createElement("div", Object.assign({}, props, {
60
54
  className: cn('w-full bg-white p-3', props.className),
61
55
  ref: ref
62
56
  }));
63
57
  });
64
- var MenuGroup = /*#__PURE__*/React__default.forwardRef(function MenuGroup(props, ref) {
65
- var className = cn('flex-shrink-0 space-y-1 outline-none', {
58
+ const MenuGroup = /*#__PURE__*/React__default.forwardRef(function MenuGroup(props, ref) {
59
+ const className = cn('flex-shrink-0 space-y-1 outline-none', {
66
60
  'bg-white pb-2': props.fixed
67
61
  }, props.className);
68
62
 
69
- var title = function title(expanded) {
70
- var className = cn('bg-white h-10 pl-3 pr-1 flex items-center justify-between w-full', {
63
+ const title = expanded => {
64
+ const className = cn('bg-white h-10 pl-3 pr-1 flex items-center justify-between w-full', {
71
65
  'mb-1': expanded,
72
66
  'cursor-pointer hover:text-blue': !props.fixed
73
67
  });
@@ -84,16 +78,14 @@ var MenuGroup = /*#__PURE__*/React__default.forwardRef(function MenuGroup(props,
84
78
  ref: ref
85
79
  }));
86
80
  });
87
- var Menu = /*#__PURE__*/React__default.forwardRef(function Menu(props, ref) {
88
- var scrollableAreas = React__default.useMemo(function () {
89
- var scrollableAreas = [];
90
- React__default.Children.toArray(props.children).filter(function (child) {
91
- return !!child;
92
- }).map(function (child) {
81
+ const Menu = /*#__PURE__*/React__default.forwardRef(function Menu(props, ref) {
82
+ const scrollableAreas = React__default.useMemo(() => {
83
+ const scrollableAreas = [];
84
+ React__default.Children.toArray(props.children).filter(child => !!child).map(child => {
93
85
  if (child.props.fixed) {
94
86
  scrollableAreas.push(child);
95
87
  } else {
96
- var x = scrollableAreas[scrollableAreas.length - 1];
88
+ const x = scrollableAreas[scrollableAreas.length - 1];
97
89
 
98
90
  if (Array.isArray(x)) {
99
91
  x.push(child);
@@ -107,19 +99,18 @@ var Menu = /*#__PURE__*/React__default.forwardRef(function Menu(props, ref) {
107
99
  return React__default.createElement(Treeview, Object.assign({}, props, {
108
100
  className: cn('divide-grey-light flex flex-grow flex-col divide-y-2 overflow-y-auto', props.className),
109
101
  ref: ref
110
- }), scrollableAreas.map(function (area, i) {
111
- return Array.isArray(area) ? React__default.createElement("div", {
112
- className: "divide-grey-light flex h-0 flex-auto flex-shrink-0 flex-grow flex-col divide-y-2 overflow-y-auto",
113
- key: i
114
- }, area) : area;
115
- }));
102
+ }), scrollableAreas.map((area, i) => Array.isArray(area) ? React__default.createElement("div", {
103
+ className: "divide-grey-light flex h-0 flex-auto flex-shrink-0 flex-grow flex-col divide-y-2 overflow-y-auto",
104
+ key: i
105
+ }, area) : area));
116
106
  });
117
107
  Menu.Group = MenuGroup;
118
- var Navigation = /*#__PURE__*/React__default.forwardRef(function Navigation(props, ref) {
119
- var children = props.children,
120
- otherProps = _objectWithoutPropertiesLoose(props, _excluded2);
121
-
122
- var className = cn('h-full flex flex-col bg-grey-light divide-y-2 divide-grey-light', props.className);
108
+ const Navigation = /*#__PURE__*/React__default.forwardRef(function Navigation(props, ref) {
109
+ const {
110
+ children,
111
+ ...otherProps
112
+ } = props;
113
+ const className = cn('h-full flex flex-col bg-grey-light divide-y-2 divide-grey-light', props.className);
123
114
  return React__default.createElement("div", Object.assign({}, otherProps, {
124
115
  className: className,
125
116
  "data-taco": "navigation",