@economic/taco 0.0.30-alpha.0 → 0.0.31-alpha.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/esm/_virtual/_rollupPluginBabelHelpers.js +1 -19
- package/dist/esm/_virtual/_rollupPluginBabelHelpers.js.map +1 -1
- package/dist/esm/components/Badge/Badge.js +14 -14
- package/dist/esm/components/Badge/Badge.js.map +1 -1
- package/dist/esm/components/Banner/Banner.js +7 -5
- package/dist/esm/components/Banner/Banner.js.map +1 -1
- package/dist/esm/components/Button/Button.js +12 -13
- package/dist/esm/components/Button/Button.js.map +1 -1
- package/dist/esm/components/Button/util.js +1 -1
- package/dist/esm/components/Button/util.js.map +1 -1
- package/dist/esm/components/Calendar/Calendar.js +56 -71
- package/dist/esm/components/Calendar/Calendar.js.map +1 -1
- package/dist/esm/components/Checkbox/Checkbox.js +15 -18
- package/dist/esm/components/Checkbox/Checkbox.js.map +1 -1
- package/dist/esm/components/Combobox/Combobox.js +23 -25
- package/dist/esm/components/Combobox/Combobox.js.map +1 -1
- package/dist/esm/components/Dialog/Dialog.js +39 -58
- package/dist/esm/components/Dialog/Dialog.js.map +1 -1
- package/dist/esm/components/Field/Field.js +10 -12
- package/dist/esm/components/Field/Field.js.map +1 -1
- package/dist/esm/components/Menu/components/Item.js +5 -5
- package/dist/esm/components/Menu/components/Item.js.map +1 -1
- package/dist/esm/index.css +8 -5
- package/dist/index.css +8 -5
- package/dist/taco.cjs.development.js +213 -281
- package/dist/taco.cjs.development.js.map +1 -1
- package/dist/taco.cjs.production.min.js +1 -1
- package/dist/taco.cjs.production.min.js.map +1 -1
- package/dist/utils/tailwind.d.ts +1 -1
- package/package.json +2 -2
@@ -1,21 +1,3 @@
|
|
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
|
-
|
19
1
|
function _objectWithoutPropertiesLoose(source, excluded) {
|
20
2
|
if (source == null) return {};
|
21
3
|
var target = {};
|
@@ -31,5 +13,5 @@ function _objectWithoutPropertiesLoose(source, excluded) {
|
|
31
13
|
return target;
|
32
14
|
}
|
33
15
|
|
34
|
-
export {
|
16
|
+
export { _objectWithoutPropertiesLoose as objectWithoutPropertiesLoose };
|
35
17
|
//# 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';
|
2
1
|
import { forwardRef, createElement } from 'react';
|
3
2
|
import cn from 'classnames';
|
4
3
|
import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden.js';
|
5
4
|
import { getOutlineClasses, getStateClasses } from '../../utils/taillwind.js';
|
6
5
|
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
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);
|
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":"
|
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;;;;"}
|
@@ -3,11 +3,13 @@ import cn from 'classnames';
|
|
3
3
|
import { getBannerIcon } from './util.js';
|
4
4
|
import { IconButton } from '../IconButton/IconButton.js';
|
5
5
|
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
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);
|
11
13
|
return createElement("div", {
|
12
14
|
className: className,
|
13
15
|
"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":";;;;;
|
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,35 +1,34 @@
|
|
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 './util.js';
|
6
5
|
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
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', {
|
13
12
|
'cursor-not-allowed opacity-50': props.disabled,
|
14
13
|
'focus:yt-focus active:focus:yt-focus': !props.disabled,
|
15
14
|
'w-full': fluid
|
16
15
|
}, props.className);
|
17
|
-
|
16
|
+
let children = otherProps.children; // add a chevron icon to menu buttons
|
18
17
|
|
19
18
|
if (typeof otherProps.menu === 'function') {
|
20
|
-
children = Array.isArray(children) ? [
|
19
|
+
children = Array.isArray(children) ? [...children, createElement(Icon, {
|
21
20
|
key: "chevron-down",
|
22
21
|
name: "chevron-down"
|
23
|
-
})]
|
22
|
+
})] : [children, createElement(Icon, {
|
24
23
|
key: "chevron-down",
|
25
24
|
name: "chevron-down"
|
26
25
|
})];
|
27
26
|
}
|
28
27
|
|
29
|
-
return createButton(
|
30
|
-
children
|
28
|
+
return createButton({ ...otherProps,
|
29
|
+
children,
|
31
30
|
'data-taco': 'button'
|
32
|
-
}
|
31
|
+
}, className, ref);
|
33
32
|
});
|
34
33
|
|
35
34
|
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":"
|
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;;;;"}
|
@@ -3,7 +3,7 @@ import { Button } from '../../primitives/Button.js';
|
|
3
3
|
import { Tooltip } from '../Tooltip/Tooltip.js';
|
4
4
|
|
5
5
|
const getButtonClasses = () => {
|
6
|
-
return 'min-h-[theme(spacing.8)] min-w-[theme(spacing.8)] h-max
|
6
|
+
return 'min-h-[theme(spacing.8)] min-w-[theme(spacing.8)] h-max inline-flex items-center justify-center border';
|
7
7
|
};
|
8
8
|
const getAppearanceClasses = (value, icon = false) => {
|
9
9
|
switch (value) {
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"util.js","sources":["../../../../src/components/Button/util.tsx"],"sourcesContent":["import React from 'react';\r\nimport { Appearance } from '../../types';\r\nimport * as ButtonPrimitive from '../../primitives/Button';\r\nimport { Tooltip } from '../Tooltip/Tooltip';\r\n\r\nexport const getButtonClasses = () => {\r\n return 'min-h-[theme(spacing.8)] min-w-[theme(spacing.8)] h-max
|
1
|
+
{"version":3,"file":"util.js","sources":["../../../../src/components/Button/util.tsx"],"sourcesContent":["import React from 'react';\r\nimport { Appearance } from '../../types';\r\nimport * as ButtonPrimitive from '../../primitives/Button';\r\nimport { Tooltip } from '../Tooltip/Tooltip';\r\n\r\nexport const getButtonClasses = () => {\r\n return 'min-h-[theme(spacing.8)] min-w-[theme(spacing.8)] h-max inline-flex items-center justify-center border';\r\n};\r\n\r\nexport const getAppearanceClasses = (value: Appearance | undefined, icon = false): string => {\r\n switch (value) {\r\n case 'primary':\r\n return `yt-blue-solid border-blue focus:bg-blue focus:text-white focus:yt-focus active:bg-blue-dark active:text-white hover:bg-blue-light hover:border-blue-light hover:text-white hover:focus:bg-blue-light hover:focus:border-blue-light hover:focus:text-white disabled:hover:yt-blue-solid`;\r\n\r\n case 'danger':\r\n return `yt-red-solid border-red focus:bg-red focus:text-white focus:yt-focus-red active:bg-red-dark active:text-white hover:bg-red-light hover:text-white hover:focus:bg-red-light hover:focus:text-white disabled:hover:yt-red-solid`;\r\n\r\n case 'ghost':\r\n return `yt-blue-inverted focus:bg-transparent focus:text-blue focus:yt-focus active:bg-blue-lightest active:border-blue active:text-blue-dark hover:bg-blue-lightest hover:border-blue-light hover:text-blue-light hover:focus:bg-blue-lightest hover:focus:border-blue-light hover:focus:text-blue-light disabled:hover:yt-blue-inverted`;\r\n\r\n case 'discrete': {\r\n if (icon) {\r\n return `bg-transparent text-black border-transparent focus:text-black focus:yt-focus active:text-black hover:text-grey-darkest hover:focus:text-grey-darkest disabled:hover:yt-transparent`;\r\n }\r\n\r\n return `yt-transparent border-transparent focus:text-blue focus:yt-focus active:text-blue-dark hover:text-blue-light hover:focus:text-blue-light disabled:hover:yt-transparent`;\r\n }\r\n\r\n default:\r\n return `yt-grey-solid border-grey focus:bg-grey focus:yt-focus active:bg-grey-dark active:text-black hover:bg-grey-light hover:text-grey-darkest hover:focus:bg-grey-light hover:focus:text-grey-darkest disabled:hover:yt-grey-solid`;\r\n }\r\n};\r\n\r\nexport const createButton = (\r\n props: any,\r\n className: string,\r\n ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>\r\n): JSX.Element => {\r\n const { dialog, hanger, menu, popover, tooltip, ...otherProps } = props;\r\n\r\n let button = <ButtonPrimitive.Button {...otherProps} className={className} ref={ref} />;\r\n\r\n if (typeof dialog === 'function') {\r\n button = dialog({ trigger: button });\r\n } else if (typeof menu === 'function') {\r\n button = menu({ trigger: button, appearance: otherProps.appearance });\r\n } else if (typeof popover === 'function') {\r\n button = popover({ trigger: button });\r\n }\r\n\r\n if (typeof hanger === 'function') {\r\n button = hanger({ anchor: button });\r\n }\r\n\r\n if (tooltip) {\r\n button = <Tooltip title={tooltip}>{button}</Tooltip>;\r\n }\r\n\r\n return button;\r\n};\r\n"],"names":["getButtonClasses","getAppearanceClasses","value","icon","createButton","props","className","ref","dialog","hanger","menu","popover","tooltip","otherProps","button","React","ButtonPrimitive","trigger","appearance","anchor","Tooltip","title"],"mappings":";;;;MAKaA,gBAAgB,GAAG;AAC5B,SAAO,wGAAP;AACH;MAEYC,oBAAoB,GAAG,CAACC,KAAD,EAAgCC,IAAI,GAAG,KAAvC;AAChC,UAAQD,KAAR;AACI,SAAK,SAAL;AACI,sSAAA;;AAEJ,SAAK,QAAL;AACI,6OAAA;;AAEJ,SAAK,OAAL;AACI,iVAAA;;AAEJ,SAAK,UAAL;AAAiB;AACb,YAAIC,IAAJ,EAAU;AACN,qMAAA;AACH;;AAED,uLAAA;AACH;;AAED;AACI,4OAAA;AAnBR;AAqBH;MAEYC,YAAY,GAAG,CACxBC,KADwB,EAExBC,SAFwB,EAGxBC,GAHwB;AAKxB,QAAM;AAAEC,IAAAA,MAAF;AAAUC,IAAAA,MAAV;AAAkBC,IAAAA,IAAlB;AAAwBC,IAAAA,OAAxB;AAAiCC,IAAAA,OAAjC;AAA0C,OAAGC;AAA7C,MAA4DR,KAAlE;AAEA,MAAIS,MAAM,GAAGC,4BAAA,CAACC,MAAD,oBAA4BH;AAAYP,IAAAA,SAAS,EAAEA;AAAWC,IAAAA,GAAG,EAAEA;IAAnE,CAAb;;AAEA,MAAI,OAAOC,MAAP,KAAkB,UAAtB,EAAkC;AAC9BM,IAAAA,MAAM,GAAGN,MAAM,CAAC;AAAES,MAAAA,OAAO,EAAEH;AAAX,KAAD,CAAf;AACH,GAFD,MAEO,IAAI,OAAOJ,IAAP,KAAgB,UAApB,EAAgC;AACnCI,IAAAA,MAAM,GAAGJ,IAAI,CAAC;AAAEO,MAAAA,OAAO,EAAEH,MAAX;AAAmBI,MAAAA,UAAU,EAAEL,UAAU,CAACK;AAA1C,KAAD,CAAb;AACH,GAFM,MAEA,IAAI,OAAOP,OAAP,KAAmB,UAAvB,EAAmC;AACtCG,IAAAA,MAAM,GAAGH,OAAO,CAAC;AAAEM,MAAAA,OAAO,EAAEH;AAAX,KAAD,CAAhB;AACH;;AAED,MAAI,OAAOL,MAAP,KAAkB,UAAtB,EAAkC;AAC9BK,IAAAA,MAAM,GAAGL,MAAM,CAAC;AAAEU,MAAAA,MAAM,EAAEL;AAAV,KAAD,CAAf;AACH;;AAED,MAAIF,OAAJ,EAAa;AACTE,IAAAA,MAAM,GAAGC,4BAAA,CAACK,OAAD;AAASC,MAAAA,KAAK,EAAET;KAAhB,EAA0BE,MAA1B,CAAT;AACH;;AAED,SAAOA,MAAP;AACH;;;;"}
|
@@ -1,41 +1,40 @@
|
|
1
|
-
import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose } from '../../_virtual/_rollupPluginBabelHelpers.js';
|
2
1
|
import { forwardRef, useState, useEffect, createElement, memo } from 'react';
|
3
2
|
import cn from 'classnames';
|
4
3
|
import { IconButton } from '../IconButton/IconButton.js';
|
5
4
|
import ReactDayPicker from 'react-day-picker';
|
6
5
|
import { useLocalization } from '../Provider/Provider.js';
|
7
6
|
|
8
|
-
|
7
|
+
const renderDay = (day, modifiers) => modifiers.disabled ? createElement("span", {
|
8
|
+
className: "dot"
|
9
|
+
}) : day.getDate();
|
9
10
|
|
10
|
-
|
11
|
-
|
12
|
-
className: "dot"
|
13
|
-
}) : day.getDate();
|
14
|
-
};
|
11
|
+
const thisYear = /*#__PURE__*/new Date().getFullYear();
|
12
|
+
const years = [];
|
15
13
|
|
16
|
-
|
17
|
-
var years = [];
|
18
|
-
|
19
|
-
for (var i = thisYear - 10; i <= thisYear + 10; i += 1) {
|
14
|
+
for (let i = thisYear - 10; i <= thisYear + 10; i += 1) {
|
20
15
|
years.push(i);
|
21
16
|
}
|
22
17
|
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
|
33
|
-
|
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();
|
34
32
|
|
35
|
-
|
36
|
-
|
37
|
-
|
38
|
-
|
33
|
+
const handleChange = function handleChange(event) {
|
34
|
+
const {
|
35
|
+
year,
|
36
|
+
month
|
37
|
+
} = event.target.form;
|
39
38
|
onMonthChange(new Date(year.value, month.value));
|
40
39
|
};
|
41
40
|
|
@@ -48,59 +47,49 @@ var Navbar = /*#__PURE__*/memo(function (_ref) {
|
|
48
47
|
name: "month",
|
49
48
|
onChange: handleChange,
|
50
49
|
value: value.getMonth()
|
51
|
-
}, months.map(
|
52
|
-
|
53
|
-
|
54
|
-
|
55
|
-
}, month);
|
56
|
-
})), createElement("select", {
|
50
|
+
}, months.map((month, i) => createElement("option", {
|
51
|
+
key: month,
|
52
|
+
value: i
|
53
|
+
}, month))), createElement("select", {
|
57
54
|
className: "h-8 px-2",
|
58
55
|
name: "year",
|
59
56
|
onChange: handleChange,
|
60
57
|
value: value.getFullYear()
|
61
|
-
}, years.map(
|
62
|
-
|
63
|
-
|
64
|
-
|
65
|
-
}, String(year));
|
66
|
-
}))), createElement("div", null, createElement(IconButton, {
|
58
|
+
}, years.map(year => createElement("option", {
|
59
|
+
key: year,
|
60
|
+
value: year
|
61
|
+
}, String(year))))), createElement("div", null, createElement(IconButton, {
|
67
62
|
appearance: "discrete",
|
68
63
|
icon: "chevron-left",
|
69
64
|
"aria-label": actions.previousMonth,
|
70
|
-
onClick:
|
71
|
-
return onPreviousClick();
|
72
|
-
},
|
65
|
+
onClick: () => onPreviousClick(),
|
73
66
|
rounded: true
|
74
67
|
}), createElement(IconButton, {
|
75
68
|
appearance: "discrete",
|
76
69
|
icon: "chevron-right",
|
77
70
|
"aria-label": actions.nextMonth,
|
78
|
-
onClick:
|
79
|
-
return onNextClick();
|
80
|
-
},
|
71
|
+
onClick: () => onNextClick(),
|
81
72
|
rounded: true
|
82
73
|
})));
|
83
74
|
});
|
84
|
-
|
85
|
-
|
86
|
-
|
87
|
-
|
88
|
-
|
89
|
-
|
90
|
-
|
91
|
-
|
92
|
-
|
93
|
-
|
94
|
-
|
95
|
-
|
96
|
-
|
97
|
-
useEffect(function () {
|
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(() => {
|
98
87
|
if (visibleMonth !== value) {
|
99
88
|
setVisibleMonth(value !== null && value !== void 0 ? value : new Date());
|
100
89
|
}
|
101
90
|
}, [value]);
|
102
91
|
|
103
|
-
|
92
|
+
const handleDayClick = (date, modifiers, event) => {
|
104
93
|
if (modifiers.outside || modifiers.disabled) {
|
105
94
|
return;
|
106
95
|
}
|
@@ -108,8 +97,8 @@ var Calendar = /*#__PURE__*/forwardRef(function Calendar(props, ref) {
|
|
108
97
|
handleChange(date, event);
|
109
98
|
};
|
110
99
|
|
111
|
-
|
112
|
-
|
100
|
+
const handleCalendarClickToday = () => {
|
101
|
+
const today = new Date(); // set to midday to avoid UTC offset causing dates to be mismatched server side
|
113
102
|
|
114
103
|
today.setHours(12);
|
115
104
|
today.setMinutes(0);
|
@@ -117,7 +106,7 @@ var Calendar = /*#__PURE__*/forwardRef(function Calendar(props, ref) {
|
|
117
106
|
handleChange(today);
|
118
107
|
};
|
119
108
|
|
120
|
-
|
109
|
+
const className = cn('flex bg-white text-xs p-4', otherProps.className);
|
121
110
|
return createElement("div", {
|
122
111
|
"data-taco": "calendar"
|
123
112
|
}, createElement(ReactDayPicker, Object.assign({}, otherProps, {
|
@@ -128,18 +117,14 @@ var Calendar = /*#__PURE__*/forwardRef(function Calendar(props, ref) {
|
|
128
117
|
firstDayOfWeek: 1,
|
129
118
|
months: texts.calendar.months,
|
130
119
|
weekdaysShort: texts.calendar.weekdaysShort,
|
131
|
-
navbarElement:
|
132
|
-
|
133
|
-
|
134
|
-
|
135
|
-
}));
|
136
|
-
},
|
120
|
+
navbarElement: navProps => createElement(Navbar, Object.assign({}, navProps, {
|
121
|
+
onMonthChange: setVisibleMonth,
|
122
|
+
value: visibleMonth
|
123
|
+
})),
|
137
124
|
onDayClick: handleDayClick,
|
138
125
|
onMonthChange: setVisibleMonth,
|
139
126
|
onTodayButtonClick: handleCalendarClickToday,
|
140
|
-
captionElement:
|
141
|
-
return null;
|
142
|
-
},
|
127
|
+
captionElement: () => null,
|
143
128
|
todayButton: texts.calendar.actions.today,
|
144
129
|
showOutsideDays: true,
|
145
130
|
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","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
|
+
{"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,35 +1,32 @@
|
|
1
|
-
import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose } 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 { Root, Indicator } from '@radix-ui/react-checkbox';
|
6
5
|
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
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]', {
|
18
17
|
'mr-2': !!label,
|
19
18
|
'border-grey-dark text-blue focus:border-blue focus:yt-focus': !props.disabled && !invalid,
|
20
19
|
'border-grey text-blue-light cursor-not-allowed': props.disabled,
|
21
20
|
'bg-[rgba(255,255,0,0.2)] disabled:bg-[rgba(255,255,0,0.075)]': highlighted,
|
22
21
|
'border-red text-red focus:border-red focus:yt-focus-red': invalid && !props.disabled
|
23
22
|
});
|
24
|
-
|
23
|
+
let handleChange;
|
25
24
|
|
26
25
|
if (onChange) {
|
27
|
-
handleChange =
|
28
|
-
return onChange(checked === 'indeterminate' ? false : checked);
|
29
|
-
};
|
26
|
+
handleChange = checked => onChange(checked === 'indeterminate' ? false : checked);
|
30
27
|
}
|
31
28
|
|
32
|
-
|
29
|
+
const element = createElement(Root, Object.assign({}, otherProps, {
|
33
30
|
"data-taco": "checkbox",
|
34
31
|
checked: indeterminate ? 'indeterminate' : checked,
|
35
32
|
className: className,
|
@@ -43,7 +40,7 @@ var Checkbox = /*#__PURE__*/forwardRef(function Checkbox(props, ref) {
|
|
43
40
|
})));
|
44
41
|
|
45
42
|
if (label) {
|
46
|
-
|
43
|
+
const labelClassName = cn('flex items-center cursor-pointer', {
|
47
44
|
'cursor-not-allowed text-grey-dark': props.disabled
|
48
45
|
}, props.className);
|
49
46
|
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":"
|
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;;;;"}
|