@economic/taco 1.0.6 → 1.0.7

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 (38) hide show
  1. package/dist/esm/components/Checkbox/Checkbox.js +15 -18
  2. package/dist/esm/components/Checkbox/Checkbox.js.map +1 -1
  3. package/dist/esm/components/Combobox/Combobox.js +23 -25
  4. package/dist/esm/components/Combobox/Combobox.js.map +1 -1
  5. package/dist/esm/components/Datepicker/Datepicker.js +48 -52
  6. package/dist/esm/components/Datepicker/Datepicker.js.map +1 -1
  7. package/dist/esm/components/Dialog/Dialog.js +39 -58
  8. package/dist/esm/components/Dialog/Dialog.js.map +1 -1
  9. package/dist/esm/components/Field/Field.js +10 -12
  10. package/dist/esm/components/Field/Field.js.map +1 -1
  11. package/dist/esm/components/Form/Form.js +6 -8
  12. package/dist/esm/components/Form/Form.js.map +1 -1
  13. package/dist/esm/components/Group/Group.js +6 -8
  14. package/dist/esm/components/Group/Group.js.map +1 -1
  15. package/dist/esm/components/Hanger/Hanger.js +27 -35
  16. package/dist/esm/components/Hanger/Hanger.js.map +1 -1
  17. package/dist/esm/components/HoverCard/HoverCard.js +8 -9
  18. package/dist/esm/components/HoverCard/HoverCard.js.map +1 -1
  19. package/dist/esm/components/Icon/Icon.js +7 -8
  20. package/dist/esm/components/Icon/Icon.js.map +1 -1
  21. package/dist/esm/components/IconButton/IconButton.js +9 -11
  22. package/dist/esm/components/IconButton/IconButton.js.map +1 -1
  23. package/dist/esm/components/Input/Input.js +25 -25
  24. package/dist/esm/components/Input/Input.js.map +1 -1
  25. package/dist/esm/components/Listbox/Listbox.js +24 -25
  26. package/dist/esm/components/Listbox/Listbox.js.map +1 -1
  27. package/dist/esm/components/Menu/Menu.js +20 -43
  28. package/dist/esm/components/Menu/Menu.js.map +1 -1
  29. package/dist/esm/components/RadioGroup/RadioGroup.js +6 -5
  30. package/dist/esm/components/RadioGroup/RadioGroup.js.map +1 -1
  31. package/dist/esm/components/SearchInput/SearchInput.js +10 -11
  32. package/dist/esm/components/SearchInput/SearchInput.js.map +1 -1
  33. package/dist/taco.cjs.development.js +291 -346
  34. package/dist/taco.cjs.development.js.map +1 -1
  35. package/dist/taco.cjs.production.min.js +1 -1
  36. package/dist/taco.cjs.production.min.js.map +1 -1
  37. package/dist/utils/tailwind.d.ts +1 -1
  38. package/package.json +3 -3
@@ -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
- var _excluded = ["horizontal"];
6
- var Form = /*#__PURE__*/forwardRef(function Form(props, ref) {
7
- var _props$horizontal = props.horizontal,
8
- horizontal = _props$horizontal === void 0 ? false : _props$horizontal,
9
- otherProps = _objectWithoutPropertiesLoose(props, _excluded);
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":";;;;;IAWaA,IAAI,gBAAGC,UAAA,CAAiB,SAASD,IAAT,CAAcE,KAAd,EAAgCC,GAAhC;AACjC,0BAA8CD,KAA9C,CAAQE,UAAR;AAAA,MAAQA,UAAR,kCAAqB,KAArB;AAAA,MAA+BC,UAA/B,iCAA8CH,KAA9C;;AACA,MAAMI,SAAS,GAAGC,EAAE,CAChB,SADgB,EAEhB;AACI,0CAAsCH;AAD1C,GAFgB,EAKhBF,KAAK,CAACI,SALU,CAApB;AAQA,SAAOL,aAAA,OAAA,oBAAUI;AAAYC,IAAAA,SAAS,EAAEA;iBAAqB;AAAOH,IAAAA,GAAG,EAAEA;IAAlE,CAAP;AACH,CAXmB;;;;"}
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;AACjC,QAAM;AAAEC,IAAAA,UAAU,GAAG,KAAf;AAAsB,OAAGC;AAAzB,MAAwCH,KAA9C;AACA,QAAMI,SAAS,GAAGC,EAAE,CAChB,SADgB,EAEhB;AACI,0CAAsCH;AAD1C,GAFgB,EAKhBF,KAAK,CAACI,SALU,CAApB;AAQA,SAAOL,aAAA,OAAA,oBAAUI;AAAYC,IAAAA,SAAS,EAAEA;iBAAqB;AAAOH,IAAAA,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
- var _excluded = ["as"];
6
- var Group = /*#__PURE__*/forwardRef(function Group(props, ref) {
7
- var _props$as = props.as,
8
- Tag = _props$as === void 0 ? 'span' : _props$as,
9
- otherProps = _objectWithoutPropertiesLoose(props, _excluded);
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":";;;;;IAcaA,KAAK,gBAAGC,UAAA,CAAiB,SAASD,KAAT,CAAeE,KAAf,EAAkCC,GAAlC;AAClC,kBAA4CD,KAA5C,CAAQE,EAAR;AAAA,MAAYC,GAAZ,0BAAkB,MAAlB;AAAA,MAA6BC,UAA7B,iCAA4CJ,KAA5C;;AACA,MAAMK,SAAS,GAAGC,EAAE,CAAC,OAAD,EAAUN,KAAK,CAACK,SAAhB,CAApB;AACA,SAAON,aAAA,CAACI,GAAD,oBAASC;AAAYC,IAAAA,SAAS,EAAEA;iBAAqB;AAAQJ,IAAAA,GAAG,EAAEA;IAAlE,CAAP;AACH,CAJoB;;;;"}
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;AAClC,QAAM;AAAEC,IAAAA,EAAE,EAAEC,GAAG,GAAG,MAAZ;AAAoB,OAAGC;AAAvB,MAAsCJ,KAA5C;AACA,QAAMK,SAAS,GAAGC,EAAE,CAAC,OAAD,EAAUN,KAAK,CAACK,SAAhB,CAApB;AACA,SAAON,aAAA,CAACI,GAAD,oBAASC;AAAYC,IAAAA,SAAS,EAAEA;iBAAqB;AAAQJ,IAAAA,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
- var _excluded = ["anchor", "children", "defaultOpen"];
11
- var HangerContext = /*#__PURE__*/createContext({
9
+ const HangerContext = /*#__PURE__*/createContext({
12
10
  props: {},
13
11
  ref: null
14
12
  });
15
- var Anchor = /*#__PURE__*/forwardRef(function HangerAnchor(props, ref) {
13
+ const Anchor = /*#__PURE__*/forwardRef(function HangerAnchor(props, ref) {
16
14
  var _props$children;
17
15
 
18
- var context = useContext(HangerContext);
19
- var children = props.children;
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("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");
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
- var Title = /*#__PURE__*/forwardRef(function DialogTitle(props, ref) {
33
- var className = cn('mb-1 text-base font-bold flex w-full', props.className);
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
- var Content = /*#__PURE__*/forwardRef(function HangerContent(props, ref) {
40
- var context = useContext(HangerContext);
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
- var _useLocalization = useLocalization(),
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
- var Hanger = /*#__PURE__*/forwardRef(function Hanger(props, ref) {
70
- var anchor = props.anchor,
71
- children = props.children,
72
- _props$defaultOpen = props.defaultOpen,
73
- defaultOpen = _props$defaultOpen === void 0 ? true : _props$defaultOpen,
74
- otherProps = _objectWithoutPropertiesLoose(props, _excluded);
75
-
76
- var context = useMemo(function () {
77
- return {
78
- props: otherProps,
79
- ref: ref
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
- useEffect(function () {
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","useLocalization","texts","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":"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"}
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":"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"}
@@ -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;AAC7B,SAAOH,aAAA,CAACI,SAAD,oBAAgCF;AAAOG,IAAAA,OAAO;AAACF,IAAAA,GAAG,EAAEA;IAApD,CAAP;AACH,CAFe,CAAhB;AAQA,IAAMG,OAAO,gBAAGN,UAAA,CAAiB,SAASO,gBAAT,CAA0BC,aAA1B,EAAgEL,GAAhE;AAC7B,MAAQM,SAAR,GAAgCD,aAAhC,CAAQC,SAAR;AAAA,MAAsBP,KAAtB,iCAAgCM,aAAhC;;AACA,MAAME,SAAS,GAAGC,EAAE,CAAC,gCAAD,EAAmCT,KAAK,CAACQ,SAAzC,CAApB;AAEA,SAAOV,aAAA,CAACI,SAAD,oBAAgCF;AAAOQ,IAAAA,SAAS,EAAEA;AAAWP,IAAAA,GAAG,EAAEA;AAAKS,IAAAA,IAAI,EAAEH;IAA7E,CAAP;AACH,CALe,CAAhB;IASaI,SAAS,GAAG,SAAZA,SAAY,CAACX,KAAD;AACrB,SAAOF,aAAA,CAACI,IAAD,oBAA6BF;AAAOY,IAAAA,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;AAC7B,SAAOH,aAAA,CAACI,SAAD,oBAAgCF;AAAOG,IAAAA,OAAO;AAACF,IAAAA,GAAG,EAAEA;IAApD,CAAP;AACH,CAFe,CAAhB;AAQA,MAAMG,OAAO,gBAAGN,UAAA,CAAiB,SAASO,gBAAT,CAA0BC,aAA1B,EAAgEL,GAAhE;AAC7B,QAAM;AAAEM,IAAAA,SAAF;AAAa,OAAGP;AAAhB,MAA0BM,aAAhC;AACA,QAAME,SAAS,GAAGC,EAAE,CAAC,gCAAD,EAAmCT,KAAK,CAACQ,SAAzC,CAApB;AAEA,SAAOV,aAAA,CAACI,SAAD,oBAAgCF;AAAOQ,IAAAA,SAAS,EAAEA;AAAWP,IAAAA,GAAG,EAAEA;AAAKS,IAAAA,IAAI,EAAEH;IAA7E,CAAP;AACH,CALe,CAAhB;MASaI,SAAS,GAAIX,KAAD;AACrB,SAAOF,aAAA,CAACI,IAAD,oBAA6BF;AAAOY,IAAAA,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;;;AACjC,MAAQC,IAAR,GAAgCF,KAAhC,CAAQE,IAAR;AAAA,MAAiBC,UAAjB,iCAAgCH,KAAhC;;AACA,MAAMI,SAAS,GAAGC,KAAK,CAACH,IAAD,CAAvB;AACA;;AACA,MAAMI,SAAS,GAAGC,EAAE,CAAC,mDAAD,EAAsDP,KAAK,CAACM,SAA5D,EAAuE;AACvF,mCAAWN,KAAK,CAACM,SAAjB,qDAAW,iBAAiBE,QAAjB,CAA0B,cAA1B;AAD4E,GAAvE,CAApB;AAIA,SAAOJ,SAAS,GACZN,4BAAA,CAACM,SAAD,oBAAeD;AAAYG,IAAAA,SAAS,EAAEA;iBAAqB;AAAOG,IAAAA,SAAS,EAAC;AAAQR,IAAAA,GAAG,EAAEA;AAAKS,IAAAA,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;;;AACjC,QAAM;AAAEC,IAAAA,IAAF;AAAQ,OAAGC;AAAX,MAA0BH,KAAhC;AACA,QAAMI,SAAS,GAAGC,KAAK,CAACH,IAAD,CAAvB;AACA;;AACA,QAAMI,SAAS,GAAGC,EAAE,CAAC,mDAAD,EAAsDP,KAAK,CAACM,SAA5D,EAAuE;AACvF,mCAAWN,KAAK,CAACM,SAAjB,qDAAW,iBAAiBE,QAAjB,CAA0B,cAA1B;AAD4E,GAAvE,CAApB;AAIA,SAAOJ,SAAS,GACZN,4BAAA,CAACM,SAAD,oBAAeD;AAAYG,IAAAA,SAAS,EAAEA;iBAAqB;AAAOG,IAAAA,SAAS,EAAC;AAAQR,IAAAA,GAAG,EAAEA;AAAKS,IAAAA,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;AACvC,MAAQC,IAAR,GAAiDF,KAAjD,CAAQE,IAAR;AAAA,uBAAiDF,KAAjD,CAAcG,OAAd;AAAA,MAAcA,OAAd,+BAAwB,KAAxB;AAAA,MAAkCC,UAAlC,iCAAiDJ,KAAjD;;AAEA,MAAMK,SAAS,GAAGC,EAAE,CAChB,KADgB,EAEhBC,gBAAgB,EAFA,EAGhBC,oBAAoB,CAACJ,UAAU,CAACK,UAAZ,EAAwB,IAAxB,CAHJ,EAIhB;AACI,oBAAgBN,OADpB;AAEIA,IAAAA,OAAO,EAAE,CAACA,OAFd;AAGI,qCAAiCH,KAAK,CAACU,QAH3C;AAII,4CAAwC,CAACV,KAAK,CAACU;AAJnD,GAJgB,EAUhBV,KAAK,CAACK,SAVU,CAApB;;AAaA,MAAI,CAACH,IAAL,EAAW;AACP,WAAO,IAAP;AACH;;AAED,SAAOS,YAAY,cACVP,UADU;AACEQ,IAAAA,QAAQ,EAAEb,aAAA,CAACc,IAAD;AAAMC,MAAAA,IAAI,EAAEZ;AAAMG,MAAAA,SAAS,EAAC;KAA5B,CADZ;AACsD,iBAAa;AADnE,MAEfA,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;AACvC,QAAM;AAAEC,IAAAA,IAAF;AAAQC,IAAAA,OAAO,GAAG,KAAlB;AAAyB,OAAGC;AAA5B,MAA2CJ,KAAjD;AAEA,QAAMK,SAAS,GAAGC,EAAE,CAChB,KADgB,EAEhBC,gBAAgB,EAFA,EAGhBC,oBAAoB,CAACJ,UAAU,CAACK,UAAZ,EAAwB,IAAxB,CAHJ,EAIhB;AACI,oBAAgBN,OADpB;AAEIA,IAAAA,OAAO,EAAE,CAACA,OAFd;AAGI,qCAAiCH,KAAK,CAACU,QAH3C;AAII,4CAAwC,CAACV,KAAK,CAACU;AAJnD,GAJgB,EAUhBV,KAAK,CAACK,SAVU,CAApB;;AAaA,MAAI,CAACH,IAAL,EAAW;AACP,WAAO,IAAP;AACH;;AAED,SAAOS,YAAY,CACf,EAAE,GAAGP,UAAL;AAAiBQ,IAAAA,QAAQ,EAAEb,aAAA,CAACc,IAAD;AAAMC,MAAAA,IAAI,EAAEZ;AAAMG,MAAAA,SAAS,EAAC;KAA5B,CAA3B;AAAqE,iBAAa;AAAlF,GADe,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":"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"}
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":"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"}
@@ -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"