@economic/taco 0.0.31-alpha.0 → 0.0.31-alpha.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (76) hide show
  1. package/dist/esm/_virtual/_rollupPluginBabelHelpers.js +19 -1
  2. package/dist/esm/_virtual/_rollupPluginBabelHelpers.js.map +1 -1
  3. package/dist/esm/components/Badge/Badge.js +14 -14
  4. package/dist/esm/components/Badge/Badge.js.map +1 -1
  5. package/dist/esm/components/Banner/Banner.js +5 -7
  6. package/dist/esm/components/Banner/Banner.js.map +1 -1
  7. package/dist/esm/components/Button/Button.js +13 -12
  8. package/dist/esm/components/Button/Button.js.map +1 -1
  9. package/dist/esm/components/Calendar/Calendar.js +71 -56
  10. package/dist/esm/components/Calendar/Calendar.js.map +1 -1
  11. package/dist/esm/components/Checkbox/Checkbox.js +18 -15
  12. package/dist/esm/components/Checkbox/Checkbox.js.map +1 -1
  13. package/dist/esm/components/Combobox/Combobox.js +25 -23
  14. package/dist/esm/components/Combobox/Combobox.js.map +1 -1
  15. package/dist/esm/components/Datepicker/Datepicker.js +52 -48
  16. package/dist/esm/components/Datepicker/Datepicker.js.map +1 -1
  17. package/dist/esm/components/Dialog/Dialog.js +58 -39
  18. package/dist/esm/components/Dialog/Dialog.js.map +1 -1
  19. package/dist/esm/components/Field/Field.js +12 -10
  20. package/dist/esm/components/Field/Field.js.map +1 -1
  21. package/dist/esm/components/Form/Form.js +8 -6
  22. package/dist/esm/components/Form/Form.js.map +1 -1
  23. package/dist/esm/components/Group/Group.js +8 -6
  24. package/dist/esm/components/Group/Group.js.map +1 -1
  25. package/dist/esm/components/Hanger/Hanger.js +33 -25
  26. package/dist/esm/components/Hanger/Hanger.js.map +1 -1
  27. package/dist/esm/components/Icon/Icon.js +8 -7
  28. package/dist/esm/components/Icon/Icon.js.map +1 -1
  29. package/dist/esm/components/IconButton/IconButton.js +11 -9
  30. package/dist/esm/components/IconButton/IconButton.js.map +1 -1
  31. package/dist/esm/components/Input/Input.js +24 -26
  32. package/dist/esm/components/Input/Input.js.map +1 -1
  33. package/dist/esm/components/Listbox/Listbox.js +25 -24
  34. package/dist/esm/components/Listbox/Listbox.js.map +1 -1
  35. package/dist/esm/components/Menu/Menu.js +43 -20
  36. package/dist/esm/components/Menu/Menu.js.map +1 -1
  37. package/dist/esm/components/Navigation/Navigation.js +44 -35
  38. package/dist/esm/components/Navigation/Navigation.js.map +1 -1
  39. package/dist/esm/components/Pagination/Pagination.js +56 -39
  40. package/dist/esm/components/Pagination/Pagination.js.map +1 -1
  41. package/dist/esm/components/Popover/Popover.js +34 -29
  42. package/dist/esm/components/Popover/Popover.js.map +1 -1
  43. package/dist/esm/components/Progress/Progress.js +15 -11
  44. package/dist/esm/components/Progress/Progress.js.map +1 -1
  45. package/dist/esm/components/Provider/Provider.js +18 -13
  46. package/dist/esm/components/Provider/Provider.js.map +1 -1
  47. package/dist/esm/components/RadioGroup/RadioGroup.js +57 -45
  48. package/dist/esm/components/RadioGroup/RadioGroup.js.map +1 -1
  49. package/dist/esm/components/SearchInput/SearchInput.js +11 -10
  50. package/dist/esm/components/SearchInput/SearchInput.js.map +1 -1
  51. package/dist/esm/components/Select/Select.js +31 -30
  52. package/dist/esm/components/Select/Select.js.map +1 -1
  53. package/dist/esm/components/Spinner/Spinner.js +19 -12
  54. package/dist/esm/components/Spinner/Spinner.js.map +1 -1
  55. package/dist/esm/components/Switch/Switch.js +10 -9
  56. package/dist/esm/components/Switch/Switch.js.map +1 -1
  57. package/dist/esm/components/Tabs/Tabs.js +27 -25
  58. package/dist/esm/components/Tabs/Tabs.js.map +1 -1
  59. package/dist/esm/components/Textarea/Textarea.js +9 -11
  60. package/dist/esm/components/Textarea/Textarea.js.map +1 -1
  61. package/dist/esm/components/Toast/Toaster.js +118 -88
  62. package/dist/esm/components/Toast/Toaster.js.map +1 -1
  63. package/dist/esm/components/Tooltip/Tooltip.js +8 -7
  64. package/dist/esm/components/Tooltip/Tooltip.js.map +1 -1
  65. package/dist/esm/components/Tour/Tour.js +50 -44
  66. package/dist/esm/components/Tour/Tour.js.map +1 -1
  67. package/dist/esm/components/Treeview/Treeview.js +36 -26
  68. package/dist/esm/components/Treeview/Treeview.js.map +1 -1
  69. package/dist/esm/components/VisuallyHidden/VisuallyHidden.js +1 -1
  70. package/dist/esm/components/VisuallyHidden/VisuallyHidden.js.map +1 -1
  71. package/dist/taco.cjs.development.js +1007 -813
  72. package/dist/taco.cjs.development.js.map +1 -1
  73. package/dist/taco.cjs.production.min.js +1 -1
  74. package/dist/taco.cjs.production.min.js.map +1 -1
  75. package/dist/utils/tailwind.d.ts +1 -1
  76. package/package.json +3 -3
@@ -1,3 +1,21 @@
1
+ function _extends() {
2
+ _extends = Object.assign || function (target) {
3
+ for (var i = 1; i < arguments.length; i++) {
4
+ var source = arguments[i];
5
+
6
+ for (var key in source) {
7
+ if (Object.prototype.hasOwnProperty.call(source, key)) {
8
+ target[key] = source[key];
9
+ }
10
+ }
11
+ }
12
+
13
+ return target;
14
+ };
15
+
16
+ return _extends.apply(this, arguments);
17
+ }
18
+
1
19
  function _objectWithoutPropertiesLoose(source, excluded) {
2
20
  if (source == null) return {};
3
21
  var target = {};
@@ -13,5 +31,5 @@ function _objectWithoutPropertiesLoose(source, excluded) {
13
31
  return target;
14
32
  }
15
33
 
16
- export { _objectWithoutPropertiesLoose as objectWithoutPropertiesLoose };
34
+ export { _extends as extends, _objectWithoutPropertiesLoose as objectWithoutPropertiesLoose };
17
35
  //# sourceMappingURL=_rollupPluginBabelHelpers.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"_rollupPluginBabelHelpers.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"_rollupPluginBabelHelpers.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
@@ -1,22 +1,22 @@
1
+ import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose } from '../../_virtual/_rollupPluginBabelHelpers.js';
1
2
  import { forwardRef, createElement } from 'react';
2
3
  import cn from 'classnames';
3
4
  import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden.js';
4
5
  import { getOutlineClasses, getStateClasses } from '../../utils/taillwind.js';
5
6
 
6
- const Badge = /*#__PURE__*/forwardRef(function Badge(props, ref) {
7
- const {
8
- children,
9
- compact = false,
10
- outline = false,
11
- state,
12
- ...otherProps
13
- } = props;
14
- const className = cn('rounded-full border font-bold text-xs uppercase overflow-hidden whitespace-nowrap inline-flex items-center justify-center h-5', {
15
- [getOutlineClasses(state)]: outline,
16
- [`border-transparent ${getStateClasses(state)}`]: !outline,
17
- 'h-2 w-2 min-w-0': compact,
18
- 'h-5 py-0 px-[0.354rem]': !compact
19
- }, props.className);
7
+ var _excluded = ["children", "compact", "outline", "state"];
8
+ var Badge = /*#__PURE__*/forwardRef(function Badge(props, ref) {
9
+ var _cn;
10
+
11
+ var children = props.children,
12
+ _props$compact = props.compact,
13
+ compact = _props$compact === void 0 ? false : _props$compact,
14
+ _props$outline = props.outline,
15
+ outline = _props$outline === void 0 ? false : _props$outline,
16
+ state = props.state,
17
+ otherProps = _objectWithoutPropertiesLoose(props, _excluded);
18
+
19
+ var className = cn('rounded-full border font-bold text-xs uppercase overflow-hidden whitespace-nowrap inline-flex items-center justify-center h-5', (_cn = {}, _cn[getOutlineClasses(state)] = outline, _cn["border-transparent " + getStateClasses(state)] = !outline, _cn['h-2 w-2 min-w-0'] = compact, _cn['h-5 py-0 px-[0.354rem]'] = !compact, _cn), props.className);
20
20
  return createElement("span", Object.assign({}, otherProps, {
21
21
  "aria-atomic": "true",
22
22
  "aria-live": "polite",
@@ -1 +1 @@
1
- {"version":3,"file":"Badge.js","sources":["../../../../src/components/Badge/Badge.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport cn from 'classnames';\r\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\r\nimport { State } from '../../types';\r\nimport { getStateClasses, getOutlineClasses } from '../../utils/taillwind';\r\nimport './Badge.css';\r\n\r\nexport type BadgeProps = React.HTMLAttributes<HTMLSpanElement> & {\r\n /** Content should be a numerical value or tag/status like text **/\r\n children: React.ReactNode;\r\n /** Show compact version **/\r\n compact?: boolean;\r\n /** Show outlined version **/\r\n outline?: boolean;\r\n /** State will change the style of the badge **/\r\n state?: State;\r\n};\r\n\r\nexport const Badge = React.forwardRef(function Badge(props: BadgeProps, ref: React.Ref<HTMLSpanElement>) {\r\n const { children, compact = false, outline = false, state, ...otherProps } = props;\r\n const className = cn(\r\n 'rounded-full border font-bold text-xs uppercase overflow-hidden whitespace-nowrap inline-flex items-center justify-center h-5',\r\n {\r\n [getOutlineClasses(state)]: outline,\r\n [`border-transparent ${getStateClasses(state)}`]: !outline,\r\n 'h-2 w-2 min-w-0': compact,\r\n 'h-5 py-0 px-[0.354rem]': !compact, // custom padding keeps single digits in a perfect circle\r\n },\r\n props.className\r\n );\r\n\r\n return (\r\n <span\r\n {...otherProps}\r\n aria-atomic=\"true\"\r\n aria-live=\"polite\"\r\n className={className}\r\n data-taco=\"badge\"\r\n ref={ref}\r\n role=\"status\"\r\n title={props['aria-label']}\r\n >\r\n {compact ? <VisuallyHidden>{children}</VisuallyHidden> : children}\r\n </span>\r\n );\r\n});\r\n"],"names":["Badge","React","props","ref","children","compact","outline","state","otherProps","className","cn","getOutlineClasses","getStateClasses","role","title","VisuallyHidden"],"mappings":";;;;;MAkBaA,KAAK,gBAAGC,UAAA,CAAiB,SAASD,KAAT,CAAeE,KAAf,EAAkCC,GAAlC;AAClC,QAAM;AAAEC,IAAAA,QAAF;AAAYC,IAAAA,OAAO,GAAG,KAAtB;AAA6BC,IAAAA,OAAO,GAAG,KAAvC;AAA8CC,IAAAA,KAA9C;AAAqD,OAAGC;AAAxD,MAAuEN,KAA7E;AACA,QAAMO,SAAS,GAAGC,EAAE,CAChB,+HADgB,EAEhB;AACI,KAACC,iBAAiB,CAACJ,KAAD,CAAlB,GAA4BD,OADhC;AAEI,2BAAuBM,eAAe,CAACL,KAAD,GAAtC,GAAkD,CAACD,OAFvD;AAGI,uBAAmBD,OAHvB;AAII,8BAA0B,CAACA;AAJ/B,GAFgB,EAQhBH,KAAK,CAACO,SARU,CAApB;AAWA,SACIR,aAAA,OAAA,oBACQO;mBACQ;iBACF;AACVC,IAAAA,SAAS,EAAEA;iBACD;AACVN,IAAAA,GAAG,EAAEA;AACLU,IAAAA,IAAI,EAAC;AACLC,IAAAA,KAAK,EAAEZ,KAAK,CAAC,YAAD;IARhB,EAUKG,OAAO,GAAGJ,aAAA,CAACc,cAAD,MAAA,EAAiBX,QAAjB,CAAH,GAAiDA,QAV7D,CADJ;AAcH,CA3BoB;;;;"}
1
+ {"version":3,"file":"Badge.js","sources":["../../../../src/components/Badge/Badge.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport cn from 'classnames';\r\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\r\nimport { State } from '../../types';\r\nimport { getStateClasses, getOutlineClasses } from '../../utils/taillwind';\r\nimport './Badge.css';\r\n\r\nexport type BadgeProps = React.HTMLAttributes<HTMLSpanElement> & {\r\n /** Content should be a numerical value or tag/status like text **/\r\n children: React.ReactNode;\r\n /** Show compact version **/\r\n compact?: boolean;\r\n /** Show outlined version **/\r\n outline?: boolean;\r\n /** State will change the style of the badge **/\r\n state?: State;\r\n};\r\n\r\nexport const Badge = React.forwardRef(function Badge(props: BadgeProps, ref: React.Ref<HTMLSpanElement>) {\r\n const { children, compact = false, outline = false, state, ...otherProps } = props;\r\n const className = cn(\r\n 'rounded-full border font-bold text-xs uppercase overflow-hidden whitespace-nowrap inline-flex items-center justify-center h-5',\r\n {\r\n [getOutlineClasses(state)]: outline,\r\n [`border-transparent ${getStateClasses(state)}`]: !outline,\r\n 'h-2 w-2 min-w-0': compact,\r\n 'h-5 py-0 px-[0.354rem]': !compact, // custom padding keeps single digits in a perfect circle\r\n },\r\n props.className\r\n );\r\n\r\n return (\r\n <span\r\n {...otherProps}\r\n aria-atomic=\"true\"\r\n aria-live=\"polite\"\r\n className={className}\r\n data-taco=\"badge\"\r\n ref={ref}\r\n role=\"status\"\r\n title={props['aria-label']}\r\n >\r\n {compact ? <VisuallyHidden>{children}</VisuallyHidden> : children}\r\n </span>\r\n );\r\n});\r\n"],"names":["Badge","React","props","ref","children","compact","outline","state","otherProps","className","cn","getOutlineClasses","getStateClasses","role","title","VisuallyHidden"],"mappings":";;;;;;;IAkBaA,KAAK,gBAAGC,UAAA,CAAiB,SAASD,KAAT,CAAeE,KAAf,EAAkCC,GAAlC;;;AAClC,MAAQC,QAAR,GAA6EF,KAA7E,CAAQE,QAAR;AAAA,uBAA6EF,KAA7E,CAAkBG,OAAlB;AAAA,MAAkBA,OAAlB,+BAA4B,KAA5B;AAAA,uBAA6EH,KAA7E,CAAmCI,OAAnC;AAAA,MAAmCA,OAAnC,+BAA6C,KAA7C;AAAA,MAAoDC,KAApD,GAA6EL,KAA7E,CAAoDK,KAApD;AAAA,MAA8DC,UAA9D,iCAA6EN,KAA7E;;AACA,MAAMO,SAAS,GAAGC,EAAE,CAChB,+HADgB,iBAGXC,iBAAiB,CAACJ,KAAD,CAHN,IAGgBD,OAHhB,8BAIWM,eAAe,CAACL,KAAD,CAJ1B,IAIsC,CAACD,OAJvC,MAKZ,iBALY,IAKOD,OALP,MAMZ,wBANY,IAMc,CAACA,OANf,QAQhBH,KAAK,CAACO,SARU,CAApB;AAWA,SACIR,aAAA,OAAA,oBACQO;mBACQ;iBACF;AACVC,IAAAA,SAAS,EAAEA;iBACD;AACVN,IAAAA,GAAG,EAAEA;AACLU,IAAAA,IAAI,EAAC;AACLC,IAAAA,KAAK,EAAEZ,KAAK,CAAC,YAAD;IARhB,EAUKG,OAAO,GAAGJ,aAAA,CAACc,cAAD,MAAA,EAAiBX,QAAjB,CAAH,GAAiDA,QAV7D,CADJ;AAcH,CA3BoB;;;;"}
@@ -3,13 +3,11 @@ import cn from 'classnames';
3
3
  import { getBannerIcon } from './util.js';
4
4
  import { IconButton } from '../IconButton/IconButton.js';
5
5
 
6
- const Banner = /*#__PURE__*/forwardRef(function Banner(props, ref) {
7
- const {
8
- children,
9
- state,
10
- onClose
11
- } = props;
12
- const className = cn('bg-white relative flex items-center px-4 h-12 shadow-lg z-10', props.className);
6
+ var Banner = /*#__PURE__*/forwardRef(function Banner(props, ref) {
7
+ var children = props.children,
8
+ state = props.state,
9
+ onClose = props.onClose;
10
+ var className = cn('bg-white relative flex items-center px-4 h-12 shadow-lg z-10', props.className);
13
11
  return createElement("div", {
14
12
  className: className,
15
13
  "data-taco": "banner",
@@ -1 +1 @@
1
- {"version":3,"file":"Banner.js","sources":["../../../../src/components/Banner/Banner.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport cn from 'classnames';\r\nimport { State } from '../../types';\r\nimport { getBannerIcon } from './util';\r\nimport { IconButton } from '../IconButton/IconButton';\r\n\r\nexport type BannerProps = React.HTMLAttributes<HTMLDivElement> & {\r\n /** Content can be any react element, for e.g. a `div` */\r\n children: React.ReactNode;\r\n /** State will change the icon displayed in banner */\r\n state: State;\r\n onClose?: () => void;\r\n};\r\n\r\nexport const Banner = React.forwardRef(function Banner(props: BannerProps, ref: React.Ref<HTMLDivElement>) {\r\n const { children, state, onClose } = props;\r\n const className = cn('bg-white relative flex items-center px-4 h-12 shadow-lg z-10', props.className);\r\n\r\n return (\r\n <div className={className} data-taco=\"banner\" ref={ref}>\r\n {getBannerIcon(state)}\r\n {children}\r\n {onClose ? <IconButton className=\"ml-auto -mr-2\" icon=\"close\" appearance=\"discrete\" onClick={onClose} /> : null}\r\n </div>\r\n );\r\n});\r\n"],"names":["Banner","React","props","ref","children","state","onClose","className","cn","getBannerIcon","IconButton","icon","appearance","onClick"],"mappings":";;;;;MAcaA,MAAM,gBAAGC,UAAA,CAAiB,SAASD,MAAT,CAAgBE,KAAhB,EAAoCC,GAApC;AACnC,QAAM;AAAEC,IAAAA,QAAF;AAAYC,IAAAA,KAAZ;AAAmBC,IAAAA;AAAnB,MAA+BJ,KAArC;AACA,QAAMK,SAAS,GAAGC,EAAE,CAAC,8DAAD,EAAiEN,KAAK,CAACK,SAAvE,CAApB;AAEA,SACIN,aAAA,MAAA;AAAKM,IAAAA,SAAS,EAAEA;iBAAqB;AAASJ,IAAAA,GAAG,EAAEA;GAAnD,EACKM,aAAa,CAACJ,KAAD,CADlB,EAEKD,QAFL,EAGKE,OAAO,GAAGL,aAAA,CAACS,UAAD;AAAYH,IAAAA,SAAS,EAAC;AAAgBI,IAAAA,IAAI,EAAC;AAAQC,IAAAA,UAAU,EAAC;AAAWC,IAAAA,OAAO,EAAEP;GAAlF,CAAH,GAAmG,IAH/G,CADJ;AAOH,CAXqB;;;;"}
1
+ {"version":3,"file":"Banner.js","sources":["../../../../src/components/Banner/Banner.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport cn from 'classnames';\r\nimport { State } from '../../types';\r\nimport { getBannerIcon } from './util';\r\nimport { IconButton } from '../IconButton/IconButton';\r\n\r\nexport type BannerProps = React.HTMLAttributes<HTMLDivElement> & {\r\n /** Content can be any react element, for e.g. a `div` */\r\n children: React.ReactNode;\r\n /** State will change the icon displayed in banner */\r\n state: State;\r\n onClose?: () => void;\r\n};\r\n\r\nexport const Banner = React.forwardRef(function Banner(props: BannerProps, ref: React.Ref<HTMLDivElement>) {\r\n const { children, state, onClose } = props;\r\n const className = cn('bg-white relative flex items-center px-4 h-12 shadow-lg z-10', props.className);\r\n\r\n return (\r\n <div className={className} data-taco=\"banner\" ref={ref}>\r\n {getBannerIcon(state)}\r\n {children}\r\n {onClose ? <IconButton className=\"ml-auto -mr-2\" icon=\"close\" appearance=\"discrete\" onClick={onClose} /> : null}\r\n </div>\r\n );\r\n});\r\n"],"names":["Banner","React","props","ref","children","state","onClose","className","cn","getBannerIcon","IconButton","icon","appearance","onClick"],"mappings":";;;;;IAcaA,MAAM,gBAAGC,UAAA,CAAiB,SAASD,MAAT,CAAgBE,KAAhB,EAAoCC,GAApC;AACnC,MAAQC,QAAR,GAAqCF,KAArC,CAAQE,QAAR;AAAA,MAAkBC,KAAlB,GAAqCH,KAArC,CAAkBG,KAAlB;AAAA,MAAyBC,OAAzB,GAAqCJ,KAArC,CAAyBI,OAAzB;AACA,MAAMC,SAAS,GAAGC,EAAE,CAAC,8DAAD,EAAiEN,KAAK,CAACK,SAAvE,CAApB;AAEA,SACIN,aAAA,MAAA;AAAKM,IAAAA,SAAS,EAAEA;iBAAqB;AAASJ,IAAAA,GAAG,EAAEA;GAAnD,EACKM,aAAa,CAACJ,KAAD,CADlB,EAEKD,QAFL,EAGKE,OAAO,GAAGL,aAAA,CAACS,UAAD;AAAYH,IAAAA,SAAS,EAAC;AAAgBI,IAAAA,IAAI,EAAC;AAAQC,IAAAA,UAAU,EAAC;AAAWC,IAAAA,OAAO,EAAEP;GAAlF,CAAH,GAAmG,IAH/G,CADJ;AAOH,CAXqB;;;;"}
@@ -1,34 +1,35 @@
1
+ import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
1
2
  import { forwardRef, createElement } from 'react';
2
3
  import cn from 'classnames';
3
4
  import { Icon } from '../Icon/Icon.js';
4
5
  import { getButtonClasses, getAppearanceClasses, createButton } from './util.js';
5
6
 
6
- const Button = /*#__PURE__*/forwardRef(function Button(props, ref) {
7
- const {
8
- fluid,
9
- ...otherProps
10
- } = props;
11
- const className = cn(getButtonClasses(), getAppearanceClasses(otherProps.appearance), 'rounded px-3', {
7
+ var _excluded = ["fluid"];
8
+ var Button = /*#__PURE__*/forwardRef(function Button(props, ref) {
9
+ var fluid = props.fluid,
10
+ otherProps = _objectWithoutPropertiesLoose(props, _excluded);
11
+
12
+ var className = cn(getButtonClasses(), getAppearanceClasses(otherProps.appearance), 'rounded px-3', {
12
13
  'cursor-not-allowed opacity-50': props.disabled,
13
14
  'focus:yt-focus active:focus:yt-focus': !props.disabled,
14
15
  'w-full': fluid
15
16
  }, props.className);
16
- let children = otherProps.children; // add a chevron icon to menu buttons
17
+ var children = otherProps.children; // add a chevron icon to menu buttons
17
18
 
18
19
  if (typeof otherProps.menu === 'function') {
19
- children = Array.isArray(children) ? [...children, createElement(Icon, {
20
+ children = Array.isArray(children) ? [].concat(children, [createElement(Icon, {
20
21
  key: "chevron-down",
21
22
  name: "chevron-down"
22
- })] : [children, createElement(Icon, {
23
+ })]) : [children, createElement(Icon, {
23
24
  key: "chevron-down",
24
25
  name: "chevron-down"
25
26
  })];
26
27
  }
27
28
 
28
- return createButton({ ...otherProps,
29
- children,
29
+ return createButton(_extends({}, otherProps, {
30
+ children: children,
30
31
  'data-taco': 'button'
31
- }, className, ref);
32
+ }), className, ref);
32
33
  });
33
34
 
34
35
  export { Button };
@@ -1 +1 @@
1
- {"version":3,"file":"Button.js","sources":["../../../../src/components/Button/Button.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport cn from 'classnames';\r\nimport { Appearance } from '../../types';\r\nimport * as ButtonPrimitive from '../../primitives/Button';\r\nimport { getAppearanceClasses, getButtonClasses, createButton } from './util';\r\nimport { HangerProps } from '../Hanger/Hanger';\r\nimport { MenuProps } from '../Menu/Menu';\r\nimport { DialogProps } from '../Dialog/Dialog';\r\nimport { PopoverProps } from '../Popover/Popover';\r\nimport './Button.css';\r\nimport { Icon } from '../Icon/Icon';\r\n\r\nexport type ButtonProps = ButtonPrimitive.ButtonProps & {\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 /** If fluid, button expands to the width of it's container */\r\n fluid?: boolean;\r\n /** Hanger component associated with the button. */\r\n hanger?: (props: Partial<HangerProps>) => JSX.Element;\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 /** A tooltip to show when hovering over the button */\r\n tooltip?: string;\r\n};\r\n\r\nexport const Button = React.forwardRef(function Button(\r\n props: ButtonProps,\r\n ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>\r\n) {\r\n const { fluid, ...otherProps } = props;\r\n const className = cn(\r\n getButtonClasses(),\r\n getAppearanceClasses(otherProps.appearance),\r\n 'rounded px-3',\r\n {\r\n 'cursor-not-allowed opacity-50': props.disabled,\r\n 'focus:yt-focus active:focus:yt-focus': !props.disabled,\r\n 'w-full': fluid,\r\n },\r\n props.className\r\n );\r\n\r\n let children = otherProps.children;\r\n\r\n // add a chevron icon to menu buttons\r\n if (typeof otherProps.menu === 'function') {\r\n children = Array.isArray(children)\r\n ? [...children, <Icon key=\"chevron-down\" name=\"chevron-down\" />]\r\n : [children, <Icon key=\"chevron-down\" name=\"chevron-down\" />];\r\n }\r\n\r\n return createButton({ ...otherProps, children, 'data-taco': 'button' }, className, ref);\r\n});\r\n"],"names":["Button","React","props","ref","fluid","otherProps","className","cn","getButtonClasses","getAppearanceClasses","appearance","disabled","children","menu","Array","isArray","Icon","key","name","createButton"],"mappings":";;;;;MAqCaA,MAAM,gBAAGC,UAAA,CAAiB,SAASD,MAAT,CACnCE,KADmC,EAEnCC,GAFmC;AAInC,QAAM;AAAEC,IAAAA,KAAF;AAAS,OAAGC;AAAZ,MAA2BH,KAAjC;AACA,QAAMI,SAAS,GAAGC,EAAE,CAChBC,gBAAgB,EADA,EAEhBC,oBAAoB,CAACJ,UAAU,CAACK,UAAZ,CAFJ,EAGhB,cAHgB,EAIhB;AACI,qCAAiCR,KAAK,CAACS,QAD3C;AAEI,4CAAwC,CAACT,KAAK,CAACS,QAFnD;AAGI,cAAUP;AAHd,GAJgB,EAShBF,KAAK,CAACI,SATU,CAApB;AAYA,MAAIM,QAAQ,GAAGP,UAAU,CAACO,QAA1B;;AAGA,MAAI,OAAOP,UAAU,CAACQ,IAAlB,KAA2B,UAA/B,EAA2C;AACvCD,IAAAA,QAAQ,GAAGE,KAAK,CAACC,OAAN,CAAcH,QAAd,IACL,CAAC,GAAGA,QAAJ,EAAcX,aAAA,CAACe,IAAD;AAAMC,MAAAA,GAAG,EAAC;AAAeC,MAAAA,IAAI,EAAC;KAA9B,CAAd,CADK,GAEL,CAACN,QAAD,EAAWX,aAAA,CAACe,IAAD;AAAMC,MAAAA,GAAG,EAAC;AAAeC,MAAAA,IAAI,EAAC;KAA9B,CAAX,CAFN;AAGH;;AAED,SAAOC,YAAY,CAAC,EAAE,GAAGd,UAAL;AAAiBO,IAAAA,QAAjB;AAA2B,iBAAa;AAAxC,GAAD,EAAqDN,SAArD,EAAgEH,GAAhE,CAAnB;AACH,CA3BqB;;;;"}
1
+ {"version":3,"file":"Button.js","sources":["../../../../src/components/Button/Button.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport cn from 'classnames';\r\nimport { Appearance } from '../../types';\r\nimport * as ButtonPrimitive from '../../primitives/Button';\r\nimport { getAppearanceClasses, getButtonClasses, createButton } from './util';\r\nimport { HangerProps } from '../Hanger/Hanger';\r\nimport { MenuProps } from '../Menu/Menu';\r\nimport { DialogProps } from '../Dialog/Dialog';\r\nimport { PopoverProps } from '../Popover/Popover';\r\nimport './Button.css';\r\nimport { Icon } from '../Icon/Icon';\r\n\r\nexport type ButtonProps = ButtonPrimitive.ButtonProps & {\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 /** If fluid, button expands to the width of it's container */\r\n fluid?: boolean;\r\n /** Hanger component associated with the button. */\r\n hanger?: (props: Partial<HangerProps>) => JSX.Element;\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 /** A tooltip to show when hovering over the button */\r\n tooltip?: string;\r\n};\r\n\r\nexport const Button = React.forwardRef(function Button(\r\n props: ButtonProps,\r\n ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>\r\n) {\r\n const { fluid, ...otherProps } = props;\r\n const className = cn(\r\n getButtonClasses(),\r\n getAppearanceClasses(otherProps.appearance),\r\n 'rounded px-3',\r\n {\r\n 'cursor-not-allowed opacity-50': props.disabled,\r\n 'focus:yt-focus active:focus:yt-focus': !props.disabled,\r\n 'w-full': fluid,\r\n },\r\n props.className\r\n );\r\n\r\n let children = otherProps.children;\r\n\r\n // add a chevron icon to menu buttons\r\n if (typeof otherProps.menu === 'function') {\r\n children = Array.isArray(children)\r\n ? [...children, <Icon key=\"chevron-down\" name=\"chevron-down\" />]\r\n : [children, <Icon key=\"chevron-down\" name=\"chevron-down\" />];\r\n }\r\n\r\n return createButton({ ...otherProps, children, 'data-taco': 'button' }, className, ref);\r\n});\r\n"],"names":["Button","React","props","ref","fluid","otherProps","className","cn","getButtonClasses","getAppearanceClasses","appearance","disabled","children","menu","Array","isArray","Icon","key","name","createButton"],"mappings":";;;;;;;IAqCaA,MAAM,gBAAGC,UAAA,CAAiB,SAASD,MAAT,CACnCE,KADmC,EAEnCC,GAFmC;AAInC,MAAQC,KAAR,GAAiCF,KAAjC,CAAQE,KAAR;AAAA,MAAkBC,UAAlB,iCAAiCH,KAAjC;;AACA,MAAMI,SAAS,GAAGC,EAAE,CAChBC,gBAAgB,EADA,EAEhBC,oBAAoB,CAACJ,UAAU,CAACK,UAAZ,CAFJ,EAGhB,cAHgB,EAIhB;AACI,qCAAiCR,KAAK,CAACS,QAD3C;AAEI,4CAAwC,CAACT,KAAK,CAACS,QAFnD;AAGI,cAAUP;AAHd,GAJgB,EAShBF,KAAK,CAACI,SATU,CAApB;AAYA,MAAIM,QAAQ,GAAGP,UAAU,CAACO,QAA1B;;AAGA,MAAI,OAAOP,UAAU,CAACQ,IAAlB,KAA2B,UAA/B,EAA2C;AACvCD,IAAAA,QAAQ,GAAGE,KAAK,CAACC,OAAN,CAAcH,QAAd,cACDA,QADC,GACSX,aAAA,CAACe,IAAD;AAAMC,MAAAA,GAAG,EAAC;AAAeC,MAAAA,IAAI,EAAC;KAA9B,CADT,KAEL,CAACN,QAAD,EAAWX,aAAA,CAACe,IAAD;AAAMC,MAAAA,GAAG,EAAC;AAAeC,MAAAA,IAAI,EAAC;KAA9B,CAAX,CAFN;AAGH;;AAED,SAAOC,YAAY,cAAMd,UAAN;AAAkBO,IAAAA,QAAQ,EAARA,QAAlB;AAA4B,iBAAa;AAAzC,MAAqDN,SAArD,EAAgEH,GAAhE,CAAnB;AACH,CA3BqB;;;;"}
@@ -1,40 +1,41 @@
1
+ import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose } from '../../_virtual/_rollupPluginBabelHelpers.js';
1
2
  import { forwardRef, useState, useEffect, createElement, memo } from 'react';
2
3
  import cn from 'classnames';
3
4
  import { IconButton } from '../IconButton/IconButton.js';
4
5
  import ReactDayPicker from 'react-day-picker';
5
6
  import { useLocalization } from '../Provider/Provider.js';
6
7
 
7
- const renderDay = (day, modifiers) => modifiers.disabled ? createElement("span", {
8
- className: "dot"
9
- }) : day.getDate();
8
+ var _excluded = ["onChange", "value"];
10
9
 
11
- const thisYear = /*#__PURE__*/new Date().getFullYear();
12
- const years = [];
10
+ var renderDay = function renderDay(day, modifiers) {
11
+ return modifiers.disabled ? createElement("span", {
12
+ className: "dot"
13
+ }) : day.getDate();
14
+ };
13
15
 
14
- for (let i = thisYear - 10; i <= thisYear + 10; i += 1) {
16
+ var thisYear = /*#__PURE__*/new Date().getFullYear();
17
+ var years = [];
18
+
19
+ for (var i = thisYear - 10; i <= thisYear + 10; i += 1) {
15
20
  years.push(i);
16
21
  }
17
22
 
18
- const Navbar = /*#__PURE__*/memo(({
19
- onMonthChange,
20
- onNextClick,
21
- onPreviousClick,
22
- value = new Date()
23
- }) => {
24
- const {
25
- texts: {
26
- calendar: {
27
- actions,
28
- months
29
- }
30
- }
31
- } = useLocalization();
23
+ var Navbar = /*#__PURE__*/memo(function (_ref) {
24
+ var onMonthChange = _ref.onMonthChange,
25
+ onNextClick = _ref.onNextClick,
26
+ onPreviousClick = _ref.onPreviousClick,
27
+ _ref$value = _ref.value,
28
+ value = _ref$value === void 0 ? new Date() : _ref$value;
32
29
 
33
- const handleChange = function handleChange(event) {
34
- const {
35
- year,
36
- month
37
- } = event.target.form;
30
+ var _useLocalization = useLocalization(),
31
+ _useLocalization$text = _useLocalization.texts.calendar,
32
+ actions = _useLocalization$text.actions,
33
+ months = _useLocalization$text.months;
34
+
35
+ var handleChange = function handleChange(event) {
36
+ var _event$target$form = event.target.form,
37
+ year = _event$target$form.year,
38
+ month = _event$target$form.month;
38
39
  onMonthChange(new Date(year.value, month.value));
39
40
  };
40
41
 
@@ -47,49 +48,59 @@ const Navbar = /*#__PURE__*/memo(({
47
48
  name: "month",
48
49
  onChange: handleChange,
49
50
  value: value.getMonth()
50
- }, months.map((month, i) => createElement("option", {
51
- key: month,
52
- value: i
53
- }, month))), createElement("select", {
51
+ }, months.map(function (month, i) {
52
+ return createElement("option", {
53
+ key: month,
54
+ value: i
55
+ }, month);
56
+ })), createElement("select", {
54
57
  className: "h-8 px-2",
55
58
  name: "year",
56
59
  onChange: handleChange,
57
60
  value: value.getFullYear()
58
- }, years.map(year => createElement("option", {
59
- key: year,
60
- value: year
61
- }, String(year))))), createElement("div", null, createElement(IconButton, {
61
+ }, years.map(function (year) {
62
+ return createElement("option", {
63
+ key: year,
64
+ value: year
65
+ }, String(year));
66
+ }))), createElement("div", null, createElement(IconButton, {
62
67
  appearance: "discrete",
63
68
  icon: "chevron-left",
64
69
  "aria-label": actions.previousMonth,
65
- onClick: () => onPreviousClick(),
70
+ onClick: function onClick() {
71
+ return onPreviousClick();
72
+ },
66
73
  rounded: true
67
74
  }), createElement(IconButton, {
68
75
  appearance: "discrete",
69
76
  icon: "chevron-right",
70
77
  "aria-label": actions.nextMonth,
71
- onClick: () => onNextClick(),
78
+ onClick: function onClick() {
79
+ return onNextClick();
80
+ },
72
81
  rounded: true
73
82
  })));
74
83
  });
75
- const Calendar = /*#__PURE__*/forwardRef(function Calendar(props, ref) {
76
- const {
77
- onChange: handleChange,
78
- value,
79
- ...otherProps
80
- } = props;
81
- const {
82
- locale,
83
- texts
84
- } = useLocalization();
85
- const [visibleMonth, setVisibleMonth] = useState(value !== null && value !== void 0 ? value : new Date());
86
- useEffect(() => {
84
+ var Calendar = /*#__PURE__*/forwardRef(function Calendar(props, ref) {
85
+ var handleChange = props.onChange,
86
+ value = props.value,
87
+ otherProps = _objectWithoutPropertiesLoose(props, _excluded);
88
+
89
+ var _useLocalization2 = useLocalization(),
90
+ locale = _useLocalization2.locale,
91
+ texts = _useLocalization2.texts;
92
+
93
+ var _React$useState = useState(value !== null && value !== void 0 ? value : new Date()),
94
+ visibleMonth = _React$useState[0],
95
+ setVisibleMonth = _React$useState[1];
96
+
97
+ useEffect(function () {
87
98
  if (visibleMonth !== value) {
88
99
  setVisibleMonth(value !== null && value !== void 0 ? value : new Date());
89
100
  }
90
101
  }, [value]);
91
102
 
92
- const handleDayClick = (date, modifiers, event) => {
103
+ var handleDayClick = function handleDayClick(date, modifiers, event) {
93
104
  if (modifiers.outside || modifiers.disabled) {
94
105
  return;
95
106
  }
@@ -97,8 +108,8 @@ const Calendar = /*#__PURE__*/forwardRef(function Calendar(props, ref) {
97
108
  handleChange(date, event);
98
109
  };
99
110
 
100
- const handleCalendarClickToday = () => {
101
- const today = new Date(); // set to midday to avoid UTC offset causing dates to be mismatched server side
111
+ var handleCalendarClickToday = function handleCalendarClickToday() {
112
+ var today = new Date(); // set to midday to avoid UTC offset causing dates to be mismatched server side
102
113
 
103
114
  today.setHours(12);
104
115
  today.setMinutes(0);
@@ -106,7 +117,7 @@ const Calendar = /*#__PURE__*/forwardRef(function Calendar(props, ref) {
106
117
  handleChange(today);
107
118
  };
108
119
 
109
- const className = cn('flex bg-white text-xs p-4', otherProps.className);
120
+ var className = cn('flex bg-white text-xs p-4', otherProps.className);
110
121
  return createElement("div", {
111
122
  "data-taco": "calendar"
112
123
  }, createElement(ReactDayPicker, Object.assign({}, otherProps, {
@@ -117,14 +128,18 @@ const Calendar = /*#__PURE__*/forwardRef(function Calendar(props, ref) {
117
128
  firstDayOfWeek: 1,
118
129
  months: texts.calendar.months,
119
130
  weekdaysShort: texts.calendar.weekdaysShort,
120
- navbarElement: navProps => createElement(Navbar, Object.assign({}, navProps, {
121
- onMonthChange: setVisibleMonth,
122
- value: visibleMonth
123
- })),
131
+ navbarElement: function navbarElement(navProps) {
132
+ return createElement(Navbar, Object.assign({}, navProps, {
133
+ onMonthChange: setVisibleMonth,
134
+ value: visibleMonth
135
+ }));
136
+ },
124
137
  onDayClick: handleDayClick,
125
138
  onMonthChange: setVisibleMonth,
126
139
  onTodayButtonClick: handleCalendarClickToday,
127
- captionElement: () => null,
140
+ captionElement: function captionElement() {
141
+ return null;
142
+ },
128
143
  todayButton: texts.calendar.actions.today,
129
144
  showOutsideDays: true,
130
145
  renderDay: renderDay,
@@ -1 +1 @@
1
- {"version":3,"file":"Calendar.js","sources":["../../../../src/components/Calendar/Calendar.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport cn from 'classnames';\r\nimport ReactDayPicker, { NavbarElementProps, DayModifiers } from 'react-day-picker';\r\nimport { useLocalization } from '../Provider/Provider';\r\nimport './Calendar.css';\r\nimport { IconButton } from '../IconButton/IconButton';\r\n\r\nexport type CalendarTextsActions = {\r\n /** Aria-label for previous month action button */\r\n previousMonth: string;\r\n /** Aria-label for next month action button */\r\n nextMonth: string;\r\n /** Aria-label for previous year action button */\r\n previousYear: string;\r\n /** Aria-label for next year action button */\r\n nextYear: string;\r\n /** Text displayed within today action button */\r\n today: string;\r\n};\r\n\r\nexport type CalendarTexts = {\r\n /** Text and aria-label for action buttons in Calendar */\r\n actions: CalendarTextsActions;\r\n /** Text abbreviation for months in Calendar's header, starting with January */\r\n months: string[];\r\n /** Text abbreviation for days in Calendar's header, starting with Sunday */\r\n weekdaysShort: string[];\r\n};\r\n\r\nconst renderDay = (day: Date, modifiers: DayModifiers): React.ReactNode =>\r\n modifiers.disabled ? <span className=\"dot\" /> : day.getDate();\r\n\r\n/** @internal */\r\ntype CustomNavbarElementProps = NavbarElementProps & {\r\n showYearControls?: boolean;\r\n onMonthChange: (month: Date) => void;\r\n value?: Date;\r\n};\r\n\r\nconst thisYear = new Date().getFullYear();\r\nconst years: number[] = [];\r\n\r\nfor (let i = thisYear - 10; i <= thisYear + 10; i += 1) {\r\n years.push(i);\r\n}\r\n\r\nconst Navbar = React.memo(\r\n ({ onMonthChange, onNextClick, onPreviousClick, value = new Date() }: CustomNavbarElementProps): JSX.Element => {\r\n const {\r\n texts: {\r\n calendar: { actions, months },\r\n },\r\n } = useLocalization();\r\n\r\n const handleChange = function handleChange(event) {\r\n const { year, month } = event.target.form;\r\n onMonthChange(new Date(year.value, month.value));\r\n };\r\n\r\n return (\r\n <div className=\"mb-2 flex items-center justify-between\">\r\n <form className=\"inline-flex space-x-1\">\r\n <select className=\"h-8 px-2\" name=\"month\" onChange={handleChange} value={value.getMonth()}>\r\n {months.map((month, i) => (\r\n <option key={month} value={i}>\r\n {month}\r\n </option>\r\n ))}\r\n </select>\r\n <select className=\"h-8 px-2\" name=\"year\" onChange={handleChange} value={value.getFullYear()}>\r\n {years.map(year => (\r\n <option key={year} value={year}>\r\n {String(year)}\r\n </option>\r\n ))}\r\n </select>\r\n </form>\r\n <div>\r\n <IconButton\r\n appearance=\"discrete\"\r\n icon=\"chevron-left\"\r\n aria-label={actions.previousMonth}\r\n onClick={() => onPreviousClick()}\r\n rounded\r\n />\r\n <IconButton\r\n appearance=\"discrete\"\r\n icon=\"chevron-right\"\r\n aria-label={actions.nextMonth}\r\n onClick={() => onNextClick()}\r\n rounded\r\n />\r\n </div>\r\n </div>\r\n );\r\n }\r\n);\r\n\r\nexport type CalendarProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'value'> & {\r\n /** Handler called when a day is clicked in calendar */\r\n onChange: (date: Date, event?: React.MouseEvent<HTMLDivElement>) => void;\r\n value?: Date;\r\n};\r\n\r\nexport const Calendar = React.forwardRef(function Calendar(props: CalendarProps, ref: React.Ref<ReactDayPicker>) {\r\n const { onChange: handleChange, value, ...otherProps } = props;\r\n const { locale, texts } = useLocalization();\r\n const [visibleMonth, setVisibleMonth] = React.useState(value ?? new Date());\r\n\r\n React.useEffect(() => {\r\n if (visibleMonth !== value) {\r\n setVisibleMonth(value ?? new Date());\r\n }\r\n }, [value]);\r\n\r\n const handleDayClick = (date, modifiers, event) => {\r\n if (modifiers.outside || modifiers.disabled) {\r\n return;\r\n }\r\n\r\n handleChange(date, event);\r\n };\r\n\r\n const handleCalendarClickToday = (): void => {\r\n const today = new Date();\r\n\r\n // set to midday to avoid UTC offset causing dates to be mismatched server side\r\n today.setHours(12);\r\n today.setMinutes(0);\r\n today.setSeconds(0);\r\n\r\n handleChange(today);\r\n };\r\n\r\n const className = cn('flex bg-white text-xs p-4', otherProps.className);\r\n\r\n return (\r\n <div data-taco=\"calendar\">\r\n <ReactDayPicker\r\n {...otherProps}\r\n className={className}\r\n month={visibleMonth}\r\n selectedDays={value}\r\n locale={locale.substring(0, 2)}\r\n firstDayOfWeek={1}\r\n months={texts.calendar.months}\r\n weekdaysShort={texts.calendar.weekdaysShort}\r\n navbarElement={navProps => <Navbar {...navProps} onMonthChange={setVisibleMonth} value={visibleMonth} />}\r\n onDayClick={handleDayClick}\r\n onMonthChange={setVisibleMonth}\r\n onTodayButtonClick={handleCalendarClickToday}\r\n captionElement={() => null}\r\n todayButton={texts.calendar.actions.today}\r\n showOutsideDays\r\n renderDay={renderDay}\r\n numberOfMonths={1}\r\n ref={ref}\r\n />\r\n </div>\r\n );\r\n});\r\n"],"names":["renderDay","day","modifiers","disabled","React","className","getDate","thisYear","Date","getFullYear","years","i","push","Navbar","onMonthChange","onNextClick","onPreviousClick","value","texts","calendar","actions","months","useLocalization","handleChange","event","year","month","target","form","name","onChange","getMonth","map","key","String","IconButton","appearance","icon","previousMonth","onClick","rounded","nextMonth","Calendar","props","ref","otherProps","locale","visibleMonth","setVisibleMonth","handleDayClick","date","outside","handleCalendarClickToday","today","setHours","setMinutes","setSeconds","cn","ReactDayPicker","selectedDays","substring","firstDayOfWeek","weekdaysShort","navbarElement","navProps","onDayClick","onTodayButtonClick","captionElement","todayButton","showOutsideDays","numberOfMonths"],"mappings":"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"}
1
+ {"version":3,"file":"Calendar.js","sources":["../../../../src/components/Calendar/Calendar.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport cn from 'classnames';\r\nimport ReactDayPicker, { NavbarElementProps, DayModifiers } from 'react-day-picker';\r\nimport { useLocalization } from '../Provider/Provider';\r\nimport './Calendar.css';\r\nimport { IconButton } from '../IconButton/IconButton';\r\n\r\nexport type CalendarTextsActions = {\r\n /** Aria-label for previous month action button */\r\n previousMonth: string;\r\n /** Aria-label for next month action button */\r\n nextMonth: string;\r\n /** Aria-label for previous year action button */\r\n previousYear: string;\r\n /** Aria-label for next year action button */\r\n nextYear: string;\r\n /** Text displayed within today action button */\r\n today: string;\r\n};\r\n\r\nexport type CalendarTexts = {\r\n /** Text and aria-label for action buttons in Calendar */\r\n actions: CalendarTextsActions;\r\n /** Text abbreviation for months in Calendar's header, starting with January */\r\n months: string[];\r\n /** Text abbreviation for days in Calendar's header, starting with Sunday */\r\n weekdaysShort: string[];\r\n};\r\n\r\nconst renderDay = (day: Date, modifiers: DayModifiers): React.ReactNode =>\r\n modifiers.disabled ? <span className=\"dot\" /> : day.getDate();\r\n\r\n/** @internal */\r\ntype CustomNavbarElementProps = NavbarElementProps & {\r\n showYearControls?: boolean;\r\n onMonthChange: (month: Date) => void;\r\n value?: Date;\r\n};\r\n\r\nconst thisYear = new Date().getFullYear();\r\nconst years: number[] = [];\r\n\r\nfor (let i = thisYear - 10; i <= thisYear + 10; i += 1) {\r\n years.push(i);\r\n}\r\n\r\nconst Navbar = React.memo(\r\n ({ onMonthChange, onNextClick, onPreviousClick, value = new Date() }: CustomNavbarElementProps): JSX.Element => {\r\n const {\r\n texts: {\r\n calendar: { actions, months },\r\n },\r\n } = useLocalization();\r\n\r\n const handleChange = function handleChange(event) {\r\n const { year, month } = event.target.form;\r\n onMonthChange(new Date(year.value, month.value));\r\n };\r\n\r\n return (\r\n <div className=\"mb-2 flex items-center justify-between\">\r\n <form className=\"inline-flex space-x-1\">\r\n <select className=\"h-8 px-2\" name=\"month\" onChange={handleChange} value={value.getMonth()}>\r\n {months.map((month, i) => (\r\n <option key={month} value={i}>\r\n {month}\r\n </option>\r\n ))}\r\n </select>\r\n <select className=\"h-8 px-2\" name=\"year\" onChange={handleChange} value={value.getFullYear()}>\r\n {years.map(year => (\r\n <option key={year} value={year}>\r\n {String(year)}\r\n </option>\r\n ))}\r\n </select>\r\n </form>\r\n <div>\r\n <IconButton\r\n appearance=\"discrete\"\r\n icon=\"chevron-left\"\r\n aria-label={actions.previousMonth}\r\n onClick={() => onPreviousClick()}\r\n rounded\r\n />\r\n <IconButton\r\n appearance=\"discrete\"\r\n icon=\"chevron-right\"\r\n aria-label={actions.nextMonth}\r\n onClick={() => onNextClick()}\r\n rounded\r\n />\r\n </div>\r\n </div>\r\n );\r\n }\r\n);\r\n\r\nexport type CalendarProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'value'> & {\r\n /** Handler called when a day is clicked in calendar */\r\n onChange: (date: Date, event?: React.MouseEvent<HTMLDivElement>) => void;\r\n value?: Date;\r\n};\r\n\r\nexport const Calendar = React.forwardRef(function Calendar(props: CalendarProps, ref: React.Ref<ReactDayPicker>) {\r\n const { onChange: handleChange, value, ...otherProps } = props;\r\n const { locale, texts } = useLocalization();\r\n const [visibleMonth, setVisibleMonth] = React.useState(value ?? new Date());\r\n\r\n React.useEffect(() => {\r\n if (visibleMonth !== value) {\r\n setVisibleMonth(value ?? new Date());\r\n }\r\n }, [value]);\r\n\r\n const handleDayClick = (date, modifiers, event) => {\r\n if (modifiers.outside || modifiers.disabled) {\r\n return;\r\n }\r\n\r\n handleChange(date, event);\r\n };\r\n\r\n const handleCalendarClickToday = (): void => {\r\n const today = new Date();\r\n\r\n // set to midday to avoid UTC offset causing dates to be mismatched server side\r\n today.setHours(12);\r\n today.setMinutes(0);\r\n today.setSeconds(0);\r\n\r\n handleChange(today);\r\n };\r\n\r\n const className = cn('flex bg-white text-xs p-4', otherProps.className);\r\n\r\n return (\r\n <div data-taco=\"calendar\">\r\n <ReactDayPicker\r\n {...otherProps}\r\n className={className}\r\n month={visibleMonth}\r\n selectedDays={value}\r\n locale={locale.substring(0, 2)}\r\n firstDayOfWeek={1}\r\n months={texts.calendar.months}\r\n weekdaysShort={texts.calendar.weekdaysShort}\r\n navbarElement={navProps => <Navbar {...navProps} onMonthChange={setVisibleMonth} value={visibleMonth} />}\r\n onDayClick={handleDayClick}\r\n onMonthChange={setVisibleMonth}\r\n onTodayButtonClick={handleCalendarClickToday}\r\n captionElement={() => null}\r\n todayButton={texts.calendar.actions.today}\r\n showOutsideDays\r\n renderDay={renderDay}\r\n numberOfMonths={1}\r\n ref={ref}\r\n />\r\n </div>\r\n );\r\n});\r\n"],"names":["renderDay","day","modifiers","disabled","React","className","getDate","thisYear","Date","getFullYear","years","i","push","Navbar","onMonthChange","onNextClick","onPreviousClick","value","useLocalization","texts","calendar","actions","months","handleChange","event","target","form","year","month","name","onChange","getMonth","map","key","String","IconButton","appearance","icon","previousMonth","onClick","rounded","nextMonth","Calendar","props","ref","otherProps","locale","visibleMonth","setVisibleMonth","handleDayClick","date","outside","handleCalendarClickToday","today","setHours","setMinutes","setSeconds","cn","ReactDayPicker","selectedDays","substring","firstDayOfWeek","weekdaysShort","navbarElement","navProps","onDayClick","onTodayButtonClick","captionElement","todayButton","showOutsideDays","numberOfMonths"],"mappings":"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"}
@@ -1,32 +1,35 @@
1
+ import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose } from '../../_virtual/_rollupPluginBabelHelpers.js';
1
2
  import { forwardRef, createElement } from 'react';
2
3
  import cn from 'classnames';
3
4
  import { Icon } from '../Icon/Icon.js';
4
5
  import { Root, Indicator } from '@radix-ui/react-checkbox';
5
6
 
6
- const Checkbox = /*#__PURE__*/forwardRef(function Checkbox(props, ref) {
7
- const {
8
- checked,
9
- highlighted,
10
- indeterminate,
11
- invalid,
12
- label,
13
- onChange,
14
- ...otherProps
15
- } = props;
16
- const className = cn('bg-white h-5 w-5 border rounded text-sm flex-shrink-0 self-start mt-[0.1rem]', {
7
+ var _excluded = ["checked", "highlighted", "indeterminate", "invalid", "label", "onChange"];
8
+ var Checkbox = /*#__PURE__*/forwardRef(function Checkbox(props, ref) {
9
+ var checked = props.checked,
10
+ highlighted = props.highlighted,
11
+ indeterminate = props.indeterminate,
12
+ invalid = props.invalid,
13
+ label = props.label,
14
+ onChange = props.onChange,
15
+ otherProps = _objectWithoutPropertiesLoose(props, _excluded);
16
+
17
+ var className = cn('bg-white h-5 w-5 border rounded text-sm flex-shrink-0 self-start mt-[0.1rem]', {
17
18
  'mr-2': !!label,
18
19
  'border-grey-dark text-blue focus:border-blue focus:yt-focus': !props.disabled && !invalid,
19
20
  'border-grey text-blue-light cursor-not-allowed': props.disabled,
20
21
  'bg-[rgba(255,255,0,0.2)] disabled:bg-[rgba(255,255,0,0.075)]': highlighted,
21
22
  'border-red text-red focus:border-red focus:yt-focus-red': invalid && !props.disabled
22
23
  });
23
- let handleChange;
24
+ var handleChange;
24
25
 
25
26
  if (onChange) {
26
- handleChange = checked => onChange(checked === 'indeterminate' ? false : checked);
27
+ handleChange = function handleChange(checked) {
28
+ return onChange(checked === 'indeterminate' ? false : checked);
29
+ };
27
30
  }
28
31
 
29
- const element = createElement(Root, Object.assign({}, otherProps, {
32
+ var element = createElement(Root, Object.assign({}, otherProps, {
30
33
  "data-taco": "checkbox",
31
34
  checked: indeterminate ? 'indeterminate' : checked,
32
35
  className: className,
@@ -40,7 +43,7 @@ const Checkbox = /*#__PURE__*/forwardRef(function Checkbox(props, ref) {
40
43
  })));
41
44
 
42
45
  if (label) {
43
- const labelClassName = cn('flex items-center cursor-pointer', {
46
+ var labelClassName = cn('flex items-center cursor-pointer', {
44
47
  'cursor-not-allowed text-grey-dark': props.disabled
45
48
  }, props.className);
46
49
  return createElement("label", {
@@ -1 +1 @@
1
- {"version":3,"file":"Checkbox.js","sources":["../../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport cn from 'classnames';\r\nimport * as CheckboxPrimitive from '@radix-ui/react-checkbox';\r\nimport { Icon } from '../Icon/Icon';\r\n\r\ntype CheckedState = boolean | 'indeterminate';\r\n\r\ntype CheckboxBaseProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'onChange'> & {\r\n /* Increases visual prominenance of the checkbox */\r\n highlighted?: boolean;\r\n /**\r\n * Indeterminate state should only be used with sub-checkboxes. The indeterminate state is shown if not all\r\n * sub-checkboxes are selected. This only affects the style, changing the icon in the checkbox.\r\n */\r\n indeterminate?: boolean;\r\n /* Whether the checkbox is in an invalid state */\r\n invalid?: boolean;\r\n /** Label for the checkbox */\r\n label?: React.ReactNode;\r\n /* Whether user input is required */\r\n required?: boolean;\r\n};\r\n\r\ninterface UncontrolledCheckboxProps extends CheckboxBaseProps {\r\n checked?: never;\r\n onChange?: never;\r\n /* The default checked state (uncontrolled) */\r\n defaultChecked?: boolean;\r\n}\r\n\r\ninterface ControlledCheckboxProps extends CheckboxBaseProps {\r\n defaultChecked?: never;\r\n /* The current checked state (controlled) */\r\n checked: boolean;\r\n /* Handler called when the checked state changes */\r\n onChange: (checked: boolean) => void;\r\n}\r\n\r\nexport type CheckboxProps = UncontrolledCheckboxProps | ControlledCheckboxProps;\r\n\r\nexport const Checkbox = React.forwardRef(function Checkbox(props: CheckboxProps, ref: React.Ref<HTMLButtonElement>) {\r\n const { checked, highlighted, indeterminate, invalid, label, onChange, ...otherProps } = props;\r\n\r\n const className = cn('bg-white h-5 w-5 border rounded text-sm flex-shrink-0 self-start mt-[0.1rem]', {\r\n 'mr-2': !!label,\r\n 'border-grey-dark text-blue focus:border-blue focus:yt-focus': !props.disabled && !invalid,\r\n 'border-grey text-blue-light cursor-not-allowed': props.disabled,\r\n 'bg-[rgba(255,255,0,0.2)] disabled:bg-[rgba(255,255,0,0.075)]': highlighted,\r\n 'border-red text-red focus:border-red focus:yt-focus-red': invalid && !props.disabled,\r\n });\r\n\r\n let handleChange: ((checked: CheckedState) => void) | undefined;\r\n\r\n if (onChange) {\r\n handleChange = (checked: CheckedState) => onChange(checked === 'indeterminate' ? false : checked);\r\n }\r\n\r\n const element = (\r\n <CheckboxPrimitive.Root\r\n {...otherProps}\r\n data-taco=\"checkbox\"\r\n checked={indeterminate ? 'indeterminate' : checked}\r\n className={className}\r\n onCheckedChange={handleChange}\r\n ref={ref}\r\n >\r\n <CheckboxPrimitive.Indicator className=\"flex h-full w-full\">\r\n <Icon name={indeterminate ? 'line' : 'tick'} className=\"!h-full !w-full\" />\r\n </CheckboxPrimitive.Indicator>\r\n </CheckboxPrimitive.Root>\r\n );\r\n\r\n if (label) {\r\n const labelClassName = cn(\r\n 'flex items-center cursor-pointer',\r\n {\r\n 'cursor-not-allowed text-grey-dark': props.disabled,\r\n },\r\n props.className\r\n );\r\n\r\n return (\r\n <label className={labelClassName}>\r\n {element}\r\n {label}\r\n </label>\r\n );\r\n }\r\n\r\n return element;\r\n});\r\n"],"names":["Checkbox","React","props","ref","checked","highlighted","indeterminate","invalid","label","onChange","otherProps","className","cn","disabled","handleChange","element","CheckboxPrimitive","onCheckedChange","Icon","name","labelClassName"],"mappings":";;;;;MAwCaA,QAAQ,gBAAGC,UAAA,CAAiB,SAASD,QAAT,CAAkBE,KAAlB,EAAwCC,GAAxC;AACrC,QAAM;AAAEC,IAAAA,OAAF;AAAWC,IAAAA,WAAX;AAAwBC,IAAAA,aAAxB;AAAuCC,IAAAA,OAAvC;AAAgDC,IAAAA,KAAhD;AAAuDC,IAAAA,QAAvD;AAAiE,OAAGC;AAApE,MAAmFR,KAAzF;AAEA,QAAMS,SAAS,GAAGC,EAAE,CAAC,8EAAD,EAAiF;AACjG,YAAQ,CAAC,CAACJ,KADuF;AAEjG,mEAA+D,CAACN,KAAK,CAACW,QAAP,IAAmB,CAACN,OAFc;AAGjG,sDAAkDL,KAAK,CAACW,QAHyC;AAIjG,oEAAgER,WAJiC;AAKjG,+DAA2DE,OAAO,IAAI,CAACL,KAAK,CAACW;AALoB,GAAjF,CAApB;AAQA,MAAIC,YAAJ;;AAEA,MAAIL,QAAJ,EAAc;AACVK,IAAAA,YAAY,GAAIV,OAAD,IAA2BK,QAAQ,CAACL,OAAO,KAAK,eAAZ,GAA8B,KAA9B,GAAsCA,OAAvC,CAAlD;AACH;;AAED,QAAMW,OAAO,GACTd,aAAA,CAACe,IAAD,oBACQN;iBACM;AACVN,IAAAA,OAAO,EAAEE,aAAa,GAAG,eAAH,GAAqBF;AAC3CO,IAAAA,SAAS,EAAEA;AACXM,IAAAA,eAAe,EAAEH;AACjBX,IAAAA,GAAG,EAAEA;IANT,EAQIF,aAAA,CAACe,SAAD;AAA6BL,IAAAA,SAAS,EAAC;GAAvC,EACIV,aAAA,CAACiB,IAAD;AAAMC,IAAAA,IAAI,EAAEb,aAAa,GAAG,MAAH,GAAY;AAAQK,IAAAA,SAAS,EAAC;GAAvD,CADJ,CARJ,CADJ;;AAeA,MAAIH,KAAJ,EAAW;AACP,UAAMY,cAAc,GAAGR,EAAE,CACrB,kCADqB,EAErB;AACI,2CAAqCV,KAAK,CAACW;AAD/C,KAFqB,EAKrBX,KAAK,CAACS,SALe,CAAzB;AAQA,WACIV,aAAA,QAAA;AAAOU,MAAAA,SAAS,EAAES;KAAlB,EACKL,OADL,EAEKP,KAFL,CADJ;AAMH;;AAED,SAAOO,OAAP;AACH,CAlDuB;;;;"}
1
+ {"version":3,"file":"Checkbox.js","sources":["../../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport cn from 'classnames';\r\nimport * as CheckboxPrimitive from '@radix-ui/react-checkbox';\r\nimport { Icon } from '../Icon/Icon';\r\n\r\ntype CheckedState = boolean | 'indeterminate';\r\n\r\ntype CheckboxBaseProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'onChange'> & {\r\n /* Increases visual prominenance of the checkbox */\r\n highlighted?: boolean;\r\n /**\r\n * Indeterminate state should only be used with sub-checkboxes. The indeterminate state is shown if not all\r\n * sub-checkboxes are selected. This only affects the style, changing the icon in the checkbox.\r\n */\r\n indeterminate?: boolean;\r\n /* Whether the checkbox is in an invalid state */\r\n invalid?: boolean;\r\n /** Label for the checkbox */\r\n label?: React.ReactNode;\r\n /* Whether user input is required */\r\n required?: boolean;\r\n};\r\n\r\ninterface UncontrolledCheckboxProps extends CheckboxBaseProps {\r\n checked?: never;\r\n onChange?: never;\r\n /* The default checked state (uncontrolled) */\r\n defaultChecked?: boolean;\r\n}\r\n\r\ninterface ControlledCheckboxProps extends CheckboxBaseProps {\r\n defaultChecked?: never;\r\n /* The current checked state (controlled) */\r\n checked: boolean;\r\n /* Handler called when the checked state changes */\r\n onChange: (checked: boolean) => void;\r\n}\r\n\r\nexport type CheckboxProps = UncontrolledCheckboxProps | ControlledCheckboxProps;\r\n\r\nexport const Checkbox = React.forwardRef(function Checkbox(props: CheckboxProps, ref: React.Ref<HTMLButtonElement>) {\r\n const { checked, highlighted, indeterminate, invalid, label, onChange, ...otherProps } = props;\r\n\r\n const className = cn('bg-white h-5 w-5 border rounded text-sm flex-shrink-0 self-start mt-[0.1rem]', {\r\n 'mr-2': !!label,\r\n 'border-grey-dark text-blue focus:border-blue focus:yt-focus': !props.disabled && !invalid,\r\n 'border-grey text-blue-light cursor-not-allowed': props.disabled,\r\n 'bg-[rgba(255,255,0,0.2)] disabled:bg-[rgba(255,255,0,0.075)]': highlighted,\r\n 'border-red text-red focus:border-red focus:yt-focus-red': invalid && !props.disabled,\r\n });\r\n\r\n let handleChange: ((checked: CheckedState) => void) | undefined;\r\n\r\n if (onChange) {\r\n handleChange = (checked: CheckedState) => onChange(checked === 'indeterminate' ? false : checked);\r\n }\r\n\r\n const element = (\r\n <CheckboxPrimitive.Root\r\n {...otherProps}\r\n data-taco=\"checkbox\"\r\n checked={indeterminate ? 'indeterminate' : checked}\r\n className={className}\r\n onCheckedChange={handleChange}\r\n ref={ref}\r\n >\r\n <CheckboxPrimitive.Indicator className=\"flex h-full w-full\">\r\n <Icon name={indeterminate ? 'line' : 'tick'} className=\"!h-full !w-full\" />\r\n </CheckboxPrimitive.Indicator>\r\n </CheckboxPrimitive.Root>\r\n );\r\n\r\n if (label) {\r\n const labelClassName = cn(\r\n 'flex items-center cursor-pointer',\r\n {\r\n 'cursor-not-allowed text-grey-dark': props.disabled,\r\n },\r\n props.className\r\n );\r\n\r\n return (\r\n <label className={labelClassName}>\r\n {element}\r\n {label}\r\n </label>\r\n );\r\n }\r\n\r\n return element;\r\n});\r\n"],"names":["Checkbox","React","props","ref","checked","highlighted","indeterminate","invalid","label","onChange","otherProps","className","cn","disabled","handleChange","element","CheckboxPrimitive","onCheckedChange","Icon","name","labelClassName"],"mappings":";;;;;;;IAwCaA,QAAQ,gBAAGC,UAAA,CAAiB,SAASD,QAAT,CAAkBE,KAAlB,EAAwCC,GAAxC;AACrC,MAAQC,OAAR,GAAyFF,KAAzF,CAAQE,OAAR;AAAA,MAAiBC,WAAjB,GAAyFH,KAAzF,CAAiBG,WAAjB;AAAA,MAA8BC,aAA9B,GAAyFJ,KAAzF,CAA8BI,aAA9B;AAAA,MAA6CC,OAA7C,GAAyFL,KAAzF,CAA6CK,OAA7C;AAAA,MAAsDC,KAAtD,GAAyFN,KAAzF,CAAsDM,KAAtD;AAAA,MAA6DC,QAA7D,GAAyFP,KAAzF,CAA6DO,QAA7D;AAAA,MAA0EC,UAA1E,iCAAyFR,KAAzF;;AAEA,MAAMS,SAAS,GAAGC,EAAE,CAAC,8EAAD,EAAiF;AACjG,YAAQ,CAAC,CAACJ,KADuF;AAEjG,mEAA+D,CAACN,KAAK,CAACW,QAAP,IAAmB,CAACN,OAFc;AAGjG,sDAAkDL,KAAK,CAACW,QAHyC;AAIjG,oEAAgER,WAJiC;AAKjG,+DAA2DE,OAAO,IAAI,CAACL,KAAK,CAACW;AALoB,GAAjF,CAApB;AAQA,MAAIC,YAAJ;;AAEA,MAAIL,QAAJ,EAAc;AACVK,IAAAA,YAAY,GAAG,sBAACV,OAAD;AAAA,aAA2BK,QAAQ,CAACL,OAAO,KAAK,eAAZ,GAA8B,KAA9B,GAAsCA,OAAvC,CAAnC;AAAA,KAAf;AACH;;AAED,MAAMW,OAAO,GACTd,aAAA,CAACe,IAAD,oBACQN;iBACM;AACVN,IAAAA,OAAO,EAAEE,aAAa,GAAG,eAAH,GAAqBF;AAC3CO,IAAAA,SAAS,EAAEA;AACXM,IAAAA,eAAe,EAAEH;AACjBX,IAAAA,GAAG,EAAEA;IANT,EAQIF,aAAA,CAACe,SAAD;AAA6BL,IAAAA,SAAS,EAAC;GAAvC,EACIV,aAAA,CAACiB,IAAD;AAAMC,IAAAA,IAAI,EAAEb,aAAa,GAAG,MAAH,GAAY;AAAQK,IAAAA,SAAS,EAAC;GAAvD,CADJ,CARJ,CADJ;;AAeA,MAAIH,KAAJ,EAAW;AACP,QAAMY,cAAc,GAAGR,EAAE,CACrB,kCADqB,EAErB;AACI,2CAAqCV,KAAK,CAACW;AAD/C,KAFqB,EAKrBX,KAAK,CAACS,SALe,CAAzB;AAQA,WACIV,aAAA,QAAA;AAAOU,MAAAA,SAAS,EAAES;KAAlB,EACKL,OADL,EAEKP,KAFL,CADJ;AAMH;;AAED,SAAOO,OAAP;AACH,CAlDuB;;;;"}
@@ -1,3 +1,4 @@
1
+ import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose } from '../../_virtual/_rollupPluginBabelHelpers.js';
1
2
  import { forwardRef, useRef, createElement } from 'react';
2
3
  import cn from 'classnames';
3
4
  import { IconButton } from '../IconButton/IconButton.js';
@@ -8,26 +9,27 @@ import { ScrollableList } from '../Listbox/ScrollableList.js';
8
9
  import { useCombobox } from './useCombobox.js';
9
10
  import { useBoundingClientRectListener } from '../../utils/hooks/useBoundingClientRectListener.js';
10
11
 
11
- const Combobox = /*#__PURE__*/forwardRef(function Combobox(props, ref) {
12
- const {
13
- className: externalClassName,
14
- dialog,
15
- style,
16
- ...otherProps
17
- } = props;
18
- const {
19
- combobox,
20
- button,
21
- input,
22
- popover,
23
- list
24
- } = useCombobox(otherProps, ref);
25
- const internalRef = useRef(null);
26
- const {
27
- texts
28
- } = useLocalization();
29
- const selectDimensions = useBoundingClientRectListener(internalRef);
30
- const className = cn('inline-flex relative', {
12
+ var _excluded = ["className", "dialog", "style"];
13
+ var Combobox = /*#__PURE__*/forwardRef(function Combobox(props, ref) {
14
+ var externalClassName = props.className,
15
+ dialog = props.dialog,
16
+ style = props.style,
17
+ otherProps = _objectWithoutPropertiesLoose(props, _excluded);
18
+
19
+ var _useCombobox = useCombobox(otherProps, ref),
20
+ combobox = _useCombobox.combobox,
21
+ button = _useCombobox.button,
22
+ input = _useCombobox.input,
23
+ popover = _useCombobox.popover,
24
+ list = _useCombobox.list;
25
+
26
+ var internalRef = useRef(null);
27
+
28
+ var _useLocalization = useLocalization(),
29
+ texts = _useLocalization.texts;
30
+
31
+ var selectDimensions = useBoundingClientRectListener(internalRef);
32
+ var className = cn('inline-flex relative', {
31
33
  'yt-combobox--inline': props.inline
32
34
  }, externalClassName);
33
35
  return createElement("span", {
@@ -46,7 +48,7 @@ const Combobox = /*#__PURE__*/forwardRef(function Combobox(props, ref) {
46
48
  appearance: "discrete",
47
49
  className: "!border-l-0 focus:!border-none focus:!shadow-none active:!border-none",
48
50
  icon: popover.open ? 'chevron-up' : 'chevron-down',
49
- onClick: () => {
51
+ onClick: function onClick() {
50
52
  var _input$ref$current;
51
53
 
52
54
  popover.onOpenChange(true);
@@ -57,7 +59,7 @@ const Combobox = /*#__PURE__*/forwardRef(function Combobox(props, ref) {
57
59
  icon: "list-search",
58
60
  disabled: props.readOnly || props.disabled,
59
61
  dialog: dialog,
60
- onFocus: event => {
62
+ onFocus: function onFocus(event) {
61
63
  var _input$ref$current2;
62
64
 
63
65
  // Prevents the default focus behaviour of showing the tooltip, on parent tooltip element
@@ -70,7 +72,7 @@ const Combobox = /*#__PURE__*/forwardRef(function Combobox(props, ref) {
70
72
  }) : undefined
71
73
  })))), createElement(Content, {
72
74
  align: "start",
73
- onOpenAutoFocus: event => {
75
+ onOpenAutoFocus: function onOpenAutoFocus(event) {
74
76
  event.preventDefault();
75
77
  },
76
78
  sideOffset: 4