@economic/taco 1.1.13-alpha.0 → 1.3.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/components/Group/Group.d.ts +11 -1
- package/dist/components/Icon/components/ChevronLeftSolid.d.ts +3 -0
- package/dist/components/Icon/components/ChevronRightSolid.d.ts +3 -0
- package/dist/components/Icon/components/index.d.ts +1 -1
- package/dist/components/Input/Input.d.ts +1 -1
- package/dist/components/Menu/Menu.d.ts +2 -2
- package/dist/components/Menu/components/Item.d.ts +1 -1
- package/dist/components/Menu/components/Link.d.ts +1 -1
- package/dist/components/Toast/Toast.d.ts +2 -2
- package/dist/components/Toast/Toaster.d.ts +2 -2
- package/dist/esm/components/Accordion/Accordion.js +31 -34
- package/dist/esm/components/Accordion/Accordion.js.map +1 -1
- package/dist/esm/components/Backdrop/Backdrop.js +2 -2
- package/dist/esm/components/Backdrop/Backdrop.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/Banner/util.js +1 -1
- package/dist/esm/components/Banner/util.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 +18 -23
- 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/Card/Card.js +13 -12
- package/dist/esm/components/Card/Card.js.map +1 -1
- package/dist/esm/components/Checkbox/Checkbox.js +15 -18
- package/dist/esm/components/Checkbox/Checkbox.js.map +1 -1
- package/dist/esm/components/Combobox/Combobox.js +23 -25
- package/dist/esm/components/Combobox/Combobox.js.map +1 -1
- package/dist/esm/components/Combobox/useCombobox.js +78 -99
- package/dist/esm/components/Combobox/useCombobox.js.map +1 -1
- package/dist/esm/components/Datepicker/Datepicker.js +48 -52
- package/dist/esm/components/Datepicker/Datepicker.js.map +1 -1
- package/dist/esm/components/Datepicker/useDatepicker.js +27 -34
- package/dist/esm/components/Datepicker/useDatepicker.js.map +1 -1
- package/dist/esm/components/Dialog/Context.js +4 -4
- package/dist/esm/components/Dialog/Context.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/Dialog/components/Content.js +39 -44
- package/dist/esm/components/Dialog/components/Content.js.map +1 -1
- package/dist/esm/components/Dialog/components/Drawer.js +3 -3
- package/dist/esm/components/Dialog/components/Drawer.js.map +1 -1
- package/dist/esm/components/Dialog/components/Extra.js +2 -2
- package/dist/esm/components/Dialog/components/Extra.js.map +1 -1
- package/dist/esm/components/Dialog/components/Trigger.js +2 -2
- package/dist/esm/components/Dialog/components/Trigger.js.map +1 -1
- package/dist/esm/components/Field/Field.js +10 -12
- package/dist/esm/components/Field/Field.js.map +1 -1
- package/dist/esm/components/Form/Form.js +6 -8
- package/dist/esm/components/Form/Form.js.map +1 -1
- package/dist/esm/components/Group/Group.js +9 -8
- package/dist/esm/components/Group/Group.js.map +1 -1
- package/dist/esm/components/Hanger/Hanger.js +27 -35
- package/dist/esm/components/Hanger/Hanger.js.map +1 -1
- package/dist/esm/components/HoverCard/HoverCard.js +8 -9
- package/dist/esm/components/HoverCard/HoverCard.js.map +1 -1
- package/dist/esm/components/Icon/Icon.js +7 -8
- package/dist/esm/components/Icon/Icon.js.map +1 -1
- package/dist/esm/components/Icon/components/ChevronLeftSolid.js +20 -0
- package/dist/esm/components/Icon/components/ChevronLeftSolid.js.map +1 -0
- package/dist/esm/components/Icon/components/ChevronRightSolid.js +20 -0
- package/dist/esm/components/Icon/components/ChevronRightSolid.js.map +1 -0
- package/dist/esm/components/Icon/components/index.js +8 -4
- package/dist/esm/components/Icon/components/index.js.map +1 -1
- package/dist/esm/components/IconButton/IconButton.js +9 -11
- package/dist/esm/components/IconButton/IconButton.js.map +1 -1
- package/dist/esm/components/Input/Input.js +25 -25
- package/dist/esm/components/Input/Input.js.map +1 -1
- package/dist/esm/components/Input/util.js +2 -2
- package/dist/esm/components/Input/util.js.map +1 -1
- package/dist/esm/components/Listbox/Listbox.js +24 -25
- package/dist/esm/components/Listbox/Listbox.js.map +1 -1
- package/dist/esm/components/Listbox/ScrollableList.js +65 -84
- package/dist/esm/components/Listbox/ScrollableList.js.map +1 -1
- package/dist/esm/components/Listbox/useListbox.js +53 -61
- package/dist/esm/components/Listbox/useListbox.js.map +1 -1
- package/dist/esm/components/Listbox/useMultiListbox.js +69 -96
- package/dist/esm/components/Listbox/useMultiListbox.js.map +1 -1
- package/dist/esm/components/Listbox/useTypeahead.js +10 -9
- package/dist/esm/components/Listbox/useTypeahead.js.map +1 -1
- package/dist/esm/components/Listbox/util.js +48 -85
- package/dist/esm/components/Listbox/util.js.map +1 -1
- package/dist/esm/components/Menu/Context.js +2 -2
- package/dist/esm/components/Menu/Context.js.map +1 -1
- package/dist/esm/components/Menu/Menu.js +16 -34
- package/dist/esm/components/Menu/Menu.js.map +1 -1
- package/dist/esm/components/Menu/components/Checkbox.js +9 -10
- package/dist/esm/components/Menu/components/Checkbox.js.map +1 -1
- package/dist/esm/components/Menu/components/Content.js +9 -11
- package/dist/esm/components/Menu/components/Content.js.map +1 -1
- package/dist/esm/components/Menu/components/Header.js +3 -3
- package/dist/esm/components/Menu/components/Header.js.map +1 -1
- package/dist/esm/components/Menu/components/Item.js +30 -31
- package/dist/esm/components/Menu/components/Item.js.map +1 -1
- package/dist/esm/components/Menu/components/Link.js +10 -11
- package/dist/esm/components/Menu/components/Link.js.map +1 -1
- package/dist/esm/components/Menu/components/RadioGroup.js +17 -19
- package/dist/esm/components/Menu/components/RadioGroup.js.map +1 -1
- package/dist/esm/components/Menu/components/Separator.js +1 -1
- package/dist/esm/components/Menu/components/Separator.js.map +1 -1
- package/dist/esm/components/Menu/components/Trigger.js +4 -4
- package/dist/esm/components/Menu/components/Trigger.js.map +1 -1
- package/dist/esm/components/Navigation/Navigation.js +35 -44
- package/dist/esm/components/Navigation/Navigation.js.map +1 -1
- package/dist/esm/components/Pagination/PageNumbers.js +23 -28
- package/dist/esm/components/Pagination/PageNumbers.js.map +1 -1
- package/dist/esm/components/Pagination/Pagination.js +39 -56
- package/dist/esm/components/Pagination/Pagination.js.map +1 -1
- package/dist/esm/components/Pagination/usePagination.js +7 -21
- package/dist/esm/components/Pagination/usePagination.js.map +1 -1
- package/dist/esm/components/Pagination/usePaginationShortcuts.js +13 -14
- package/dist/esm/components/Pagination/usePaginationShortcuts.js.map +1 -1
- package/dist/esm/components/Popover/Popover.js +29 -34
- package/dist/esm/components/Popover/Popover.js.map +1 -1
- package/dist/esm/components/Popover/Primitives.js +7 -8
- package/dist/esm/components/Popover/Primitives.js.map +1 -1
- package/dist/esm/components/Progress/Progress.js +11 -15
- package/dist/esm/components/Progress/Progress.js.map +1 -1
- package/dist/esm/components/Provider/Provider.js +13 -18
- package/dist/esm/components/Provider/Provider.js.map +1 -1
- package/dist/esm/components/RadioGroup/RadioGroup.js +45 -57
- package/dist/esm/components/RadioGroup/RadioGroup.js.map +1 -1
- package/dist/esm/components/SearchInput/SearchInput.js +10 -12
- package/dist/esm/components/SearchInput/SearchInput.js.map +1 -1
- package/dist/esm/components/Select/Select.js +30 -31
- package/dist/esm/components/Select/Select.js.map +1 -1
- package/dist/esm/components/Select/useSelect.js +69 -88
- package/dist/esm/components/Select/useSelect.js.map +1 -1
- package/dist/esm/components/Spinner/Spinner.js +12 -19
- package/dist/esm/components/Spinner/Spinner.js.map +1 -1
- package/dist/esm/components/Switch/Switch.js +9 -10
- package/dist/esm/components/Switch/Switch.js.map +1 -1
- package/dist/esm/components/Table/components/BaseTable.js +23 -30
- package/dist/esm/components/Table/components/BaseTable.js.map +1 -1
- package/dist/esm/components/Table/components/PaginatedTable.js +3 -7
- package/dist/esm/components/Table/components/PaginatedTable.js.map +1 -1
- package/dist/esm/components/Table/components/Table.js +18 -25
- package/dist/esm/components/Table/components/Table.js.map +1 -1
- package/dist/esm/components/Table/components/WindowedTable.js +89 -109
- package/dist/esm/components/Table/components/WindowedTable.js.map +1 -1
- package/dist/esm/components/Table/hooks/plugins/useRowActions.js +123 -148
- package/dist/esm/components/Table/hooks/plugins/useRowActions.js.map +1 -1
- package/dist/esm/components/Table/hooks/plugins/useRowDraggable.js +57 -61
- package/dist/esm/components/Table/hooks/plugins/useRowDraggable.js.map +1 -1
- package/dist/esm/components/Table/hooks/plugins/useRowEditing.js +39 -36
- package/dist/esm/components/Table/hooks/plugins/useRowEditing.js.map +1 -1
- package/dist/esm/components/Table/hooks/plugins/useRowSelect.js +79 -89
- package/dist/esm/components/Table/hooks/plugins/useRowSelect.js.map +1 -1
- package/dist/esm/components/Table/hooks/useRowCreation.js +29 -64
- package/dist/esm/components/Table/hooks/useRowCreation.js.map +1 -1
- package/dist/esm/components/Table/hooks/useTable.js +123 -141
- package/dist/esm/components/Table/hooks/useTable.js.map +1 -1
- package/dist/esm/components/Table/hooks/useTableKeyboardNavigation.js +23 -27
- package/dist/esm/components/Table/hooks/useTableKeyboardNavigation.js.map +1 -1
- package/dist/esm/components/Table/util/renderColumn.js +10 -10
- package/dist/esm/components/Table/util/renderColumn.js.map +1 -1
- package/dist/esm/components/Table/util/renderRow.js +37 -46
- package/dist/esm/components/Table/util/renderRow.js.map +1 -1
- package/dist/esm/components/Table/util/rowIndexPath.js +14 -16
- package/dist/esm/components/Table/util/rowIndexPath.js.map +1 -1
- package/dist/esm/components/Table/util/sortTypes.js +23 -31
- package/dist/esm/components/Table/util/sortTypes.js.map +1 -1
- package/dist/esm/components/Table/util.js +29 -41
- package/dist/esm/components/Table/util.js.map +1 -1
- package/dist/esm/components/Tabs/Tabs.js +25 -27
- package/dist/esm/components/Tabs/Tabs.js.map +1 -1
- package/dist/esm/components/Textarea/Textarea.js +11 -9
- package/dist/esm/components/Textarea/Textarea.js.map +1 -1
- package/dist/esm/components/Toast/Toast.js +27 -23
- package/dist/esm/components/Toast/Toast.js.map +1 -1
- package/dist/esm/components/Toast/Toaster.js +88 -118
- package/dist/esm/components/Toast/Toaster.js.map +1 -1
- package/dist/esm/components/Toast/util.js +2 -2
- package/dist/esm/components/Toast/util.js.map +1 -1
- package/dist/esm/components/Tooltip/Tooltip.js +7 -8
- package/dist/esm/components/Tooltip/Tooltip.js.map +1 -1
- package/dist/esm/components/Tour/Tour.js +46 -53
- package/dist/esm/components/Tour/Tour.js.map +1 -1
- package/dist/esm/components/Treeview/Treeview.js +26 -36
- package/dist/esm/components/Treeview/Treeview.js.map +1 -1
- package/dist/esm/components/VisuallyHidden/VisuallyHidden.js +1 -1
- package/dist/esm/components/VisuallyHidden/VisuallyHidden.js.map +1 -1
- package/dist/esm/index.css +1 -9
- package/dist/esm/index.js +1 -1
- package/dist/esm/primitives/Button.js +9 -13
- package/dist/esm/primitives/Button.js.map +1 -1
- package/dist/esm/utils/date.js +20 -40
- package/dist/esm/utils/date.js.map +1 -1
- package/dist/esm/utils/hooks/useBoundingClientRectListener.js +12 -20
- package/dist/esm/utils/hooks/useBoundingClientRectListener.js.map +1 -1
- package/dist/esm/utils/hooks/useDraggable.js +16 -17
- package/dist/esm/utils/hooks/useDraggable.js.map +1 -1
- package/dist/esm/utils/hooks/useDropTarget.js +7 -10
- package/dist/esm/utils/hooks/useDropTarget.js.map +1 -1
- package/dist/esm/utils/hooks/useListKeyboardNavigation.js +15 -30
- package/dist/esm/utils/hooks/useListKeyboardNavigation.js.map +1 -1
- package/dist/esm/utils/hooks/useListScrollTo.js +9 -9
- package/dist/esm/utils/hooks/useListScrollTo.js.map +1 -1
- package/dist/esm/utils/hooks/useOnClickOutside.js +6 -8
- package/dist/esm/utils/hooks/useOnClickOutside.js.map +1 -1
- package/dist/esm/utils/hooks/useProxiedRef.js +3 -3
- package/dist/esm/utils/hooks/useProxiedRef.js.map +1 -1
- package/dist/esm/utils/hooks/useTimer.js +9 -17
- package/dist/esm/utils/hooks/useTimer.js.map +1 -1
- package/dist/esm/utils/input.js +8 -12
- package/dist/esm/utils/input.js.map +1 -1
- package/dist/esm/utils/mergeRefs.js +2 -2
- package/dist/esm/utils/mergeRefs.js.map +1 -1
- package/dist/esm/utils/taillwind.js +2 -2
- package/dist/esm/utils/taillwind.js.map +1 -1
- package/dist/index.css +1 -9
- package/dist/taco.cjs.development.js +2368 -2883
- 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/hooks/useListKeyboardNavigation.d.ts +1 -1
- package/package.json +4 -5
- package/types.json +13 -4
- package/dist/esm/_virtual/_rollupPluginBabelHelpers.js +0 -34
- package/dist/esm/_virtual/_rollupPluginBabelHelpers.js.map +0 -1
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Badge.js","sources":["../../../../src/components/Badge/Badge.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport { State } from '../../types';\nimport { getStateClasses, getOutlineClasses } from '../../utils/taillwind';\nimport './Badge.css';\n\nexport type BadgeProps = React.HTMLAttributes<HTMLSpanElement> & {\n /** Content should be a numerical value or tag/status like text **/\n children: React.ReactNode;\n /** Show compact version **/\n compact?: boolean;\n /** Show outlined version **/\n outline?: boolean;\n /** State will change the style of the badge **/\n state?: State;\n};\n\nexport const Badge = React.forwardRef(function Badge(props: BadgeProps, ref: React.Ref<HTMLSpanElement>) {\n const { children, compact = false, outline = false, state, ...otherProps } = props;\n const className = cn(\n 'rounded-full border font-bold text-xs uppercase overflow-hidden whitespace-nowrap inline-flex items-center justify-center
|
1
|
+
{"version":3,"file":"Badge.js","sources":["../../../../src/components/Badge/Badge.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport { State } from '../../types';\nimport { getStateClasses, getOutlineClasses } from '../../utils/taillwind';\nimport './Badge.css';\n\nexport type BadgeProps = React.HTMLAttributes<HTMLSpanElement> & {\n /** Content should be a numerical value or tag/status like text **/\n children: React.ReactNode;\n /** Show compact version **/\n compact?: boolean;\n /** Show outlined version **/\n outline?: boolean;\n /** State will change the style of the badge **/\n state?: State;\n};\n\nexport const Badge = React.forwardRef(function Badge(props: BadgeProps, ref: React.Ref<HTMLSpanElement>) {\n const { children, compact = false, outline = false, state, ...otherProps } = props;\n const className = cn(\n 'rounded-full border font-bold text-xs uppercase overflow-hidden whitespace-nowrap inline-flex items-center justify-center',\n {\n [getOutlineClasses(state)]: outline,\n [`border-transparent ${getStateClasses(state)}`]: !outline,\n 'h-2 w-2 min-w-0': compact,\n 'h-5 py-0 px-1.5': !compact, // custom padding keeps single digits in a perfect circle\n },\n props.className\n );\n\n return (\n <span\n {...otherProps}\n aria-atomic=\"true\"\n aria-live=\"polite\"\n className={className}\n data-taco=\"badge\"\n ref={ref}\n role=\"status\"\n title={props['aria-label']}\n >\n {compact ? <VisuallyHidden>{children}</VisuallyHidden> : children}\n </span>\n );\n});\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;EAClC,MAAM;IAAEC,QAAF;IAAYC,OAAO,GAAG,KAAtB;IAA6BC,OAAO,GAAG,KAAvC;IAA8CC,KAA9C;IAAqD,GAAGC;MAAeN,KAA7E;EACA,MAAMO,SAAS,GAAGC,EAAE,CAChB,2HADgB,EAEhB;IACI,CAACC,iBAAiB,CAACJ,KAAD,CAAlB,GAA4BD,OADhC;IAEI,uBAAuBM,eAAe,CAACL,KAAD,GAAtC,GAAkD,CAACD,OAFvD;IAGI,mBAAmBD,OAHvB;IAII,mBAAmB,CAACA;GANR,EAQhBH,KAAK,CAACO,SARU,CAApB;EAWA,OACIR,aAAA,OAAA,oBACQO;mBACQ;iBACF;IACVC,SAAS,EAAEA;iBACD;IACVN,GAAG,EAAEA;IACLU,IAAI,EAAC;IACLC,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 gap-2 py-2 px-4 leading-6 shadow-md 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';\nimport cn from 'classnames';\nimport { State } from '../../types';\nimport { getBannerIcon } from './util';\nimport { IconButton } from '../IconButton/IconButton';\n\nexport type BannerProps = React.HTMLAttributes<HTMLDivElement> & {\n /** Content can be any react element, for e.g. a `div` */\n children: React.ReactNode;\n /** State will change the icon displayed in banner */\n state: State;\n onClose?: () => void;\n};\n\nexport const Banner = React.forwardRef(function Banner(props: BannerProps, ref: React.Ref<HTMLDivElement>) {\n const { children, state, onClose } = props;\n const className = cn('bg-white relative flex items-center gap-2 py-2 px-4 leading-6 shadow-md z-10', props.className);\n\n return (\n <div className={className} data-taco=\"banner\" ref={ref}>\n {getBannerIcon(state)}\n {children}\n {onClose ? (\n <IconButton className=\"ml-auto -mr-2 self-start\" icon=\"close\" appearance=\"discrete\" onClick={onClose} />\n ) : null}\n </div>\n );\n});\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';\nimport cn from 'classnames';\nimport { State } from '../../types';\nimport { getBannerIcon } from './util';\nimport { IconButton } from '../IconButton/IconButton';\n\nexport type BannerProps = React.HTMLAttributes<HTMLDivElement> & {\n /** Content can be any react element, for e.g. a `div` */\n children: React.ReactNode;\n /** State will change the icon displayed in banner */\n state: State;\n onClose?: () => void;\n};\n\nexport const Banner = React.forwardRef(function Banner(props: BannerProps, ref: React.Ref<HTMLDivElement>) {\n const { children, state, onClose } = props;\n const className = cn('bg-white relative flex items-center gap-2 py-2 px-4 leading-6 shadow-md z-10', props.className);\n\n return (\n <div className={className} data-taco=\"banner\" ref={ref}>\n {getBannerIcon(state)}\n {children}\n {onClose ? (\n <IconButton className=\"ml-auto -mr-2 self-start\" icon=\"close\" appearance=\"discrete\" onClick={onClose} />\n ) : null}\n </div>\n );\n});\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;EACnC,MAAM;IAAEC,QAAF;IAAYC,KAAZ;IAAmBC;MAAYJ,KAArC;EACA,MAAMK,SAAS,GAAGC,EAAE,CAAC,8EAAD,EAAiFN,KAAK,CAACK,SAAvF,CAApB;EAEA,OACIN,aAAA,MAAA;IAAKM,SAAS,EAAEA;iBAAqB;IAASJ,GAAG,EAAEA;GAAnD,EACKM,aAAa,CAACJ,KAAD,CADlB,EAEKD,QAFL,EAGKE,OAAO,GACJL,aAAA,CAACS,UAAD;IAAYH,SAAS,EAAC;IAA2BI,IAAI,EAAC;IAAQC,UAAU,EAAC;IAAWC,OAAO,EAAEP;GAA7F,CADI,GAEJ,IALR,CADJ;AASH,CAbqB;;;;"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"util.js","sources":["../../../../src/components/Banner/util.tsx"],"sourcesContent":["import React from 'react';\nimport { Icon } from '../Icon/Icon';\nimport { State } from '../../types';\n\nexport const getBannerIcon = (type: State): JSX.Element | null => {\n switch (type) {\n case 'success':\n return <Icon name=\"tick\" className=\"yt-green-solid mt-1 self-start rounded-full\" />;\n\n case 'error':\n return <Icon name=\"warning\" className=\"yt-red-solid mt-1 self-start rounded-full\" />;\n\n case 'warning':\n return <Icon name=\"warning\" className=\"yt-yellow-solid mt-1 self-start rounded-full\" />;\n\n case 'information':\n return <Icon name=\"info\" className=\"yt-blue-solid mt-1 self-start rounded-full\" />;\n\n default:\n return null;\n }\n};\n"],"names":["getBannerIcon","type","React","Icon","name","className"],"mappings":";;;
|
1
|
+
{"version":3,"file":"util.js","sources":["../../../../src/components/Banner/util.tsx"],"sourcesContent":["import React from 'react';\nimport { Icon } from '../Icon/Icon';\nimport { State } from '../../types';\n\nexport const getBannerIcon = (type: State): JSX.Element | null => {\n switch (type) {\n case 'success':\n return <Icon name=\"tick\" className=\"yt-green-solid mt-1 self-start rounded-full\" />;\n\n case 'error':\n return <Icon name=\"warning\" className=\"yt-red-solid mt-1 self-start rounded-full\" />;\n\n case 'warning':\n return <Icon name=\"warning\" className=\"yt-yellow-solid mt-1 self-start rounded-full\" />;\n\n case 'information':\n return <Icon name=\"info\" className=\"yt-blue-solid mt-1 self-start rounded-full\" />;\n\n default:\n return null;\n }\n};\n"],"names":["getBannerIcon","type","React","Icon","name","className"],"mappings":";;;MAIaA,aAAa,GAAIC,IAAD;EACzB,QAAQA,IAAR;IACI,KAAK,SAAL;MACI,OAAOC,4BAAA,CAACC,IAAD;QAAMC,IAAI,EAAC;QAAOC,SAAS,EAAC;OAA5B,CAAP;;IAEJ,KAAK,OAAL;MACI,OAAOH,4BAAA,CAACC,IAAD;QAAMC,IAAI,EAAC;QAAUC,SAAS,EAAC;OAA/B,CAAP;;IAEJ,KAAK,SAAL;MACI,OAAOH,4BAAA,CAACC,IAAD;QAAMC,IAAI,EAAC;QAAUC,SAAS,EAAC;OAA/B,CAAP;;IAEJ,KAAK,aAAL;MACI,OAAOH,4BAAA,CAACC,IAAD;QAAMC,IAAI,EAAC;QAAOC,SAAS,EAAC;OAA5B,CAAP;;IAEJ;MACI,OAAO,IAAP;;AAEX;;;;"}
|
@@ -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';\nimport cn from 'classnames';\nimport { Appearance } from '../../types';\nimport * as ButtonPrimitive from '../../primitives/Button';\nimport { getAppearanceClasses, getButtonClasses, createButton } from './util';\nimport { HangerProps } from '../Hanger/Hanger';\nimport { MenuProps } from '../Menu/Menu';\nimport { DialogProps } from '../Dialog/Dialog';\nimport { PopoverProps } from '../Popover/Popover';\nimport './Button.css';\nimport { Icon } from '../Icon/Icon';\n\nexport type ButtonProps = ButtonPrimitive.ButtonProps & {\n /** Appearance will change the style of the button */\n appearance?: Appearance;\n /**\n * Dialog component associated with the button, clicking the button will open the dialog.\n * *Note* that `onClick` event on button won't be handled, as in this case, the purpose of\n * the button should be only to open the associated dialog when clicked.\n */\n dialog?: (props: Partial<DialogProps>) => JSX.Element;\n /** If fluid, button expands to the width of it's container */\n fluid?: boolean;\n /** Hanger component associated with the button. */\n hanger?: (props: Partial<HangerProps>) => JSX.Element;\n /** Menu component associated with the button. */\n menu?: (props: Partial<MenuProps>) => JSX.Element;\n /**\n * Popover component associated with the button, clicking the button will open the popover.\n * *Note* that `onClick` event on button won't be handled, as in this case, the purpose of\n * the button should be only to open the associated popover when clicked.\n */\n popover?: (props: Partial<PopoverProps>) => JSX.Element;\n /** A tooltip to show when hovering over the button */\n tooltip?: string;\n};\n\nexport const Button = React.forwardRef(function Button(\n props: ButtonProps,\n ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>\n) {\n const { fluid, ...otherProps } = props;\n const className = cn(\n getButtonClasses(),\n getAppearanceClasses(otherProps.appearance),\n 'rounded px-3',\n {\n 'cursor-not-allowed opacity-50': props.disabled,\n 'focus:yt-focus active:focus:yt-focus': !props.disabled,\n 'w-full': fluid,\n },\n props.className\n );\n\n let children = otherProps.children;\n\n // add a chevron icon to menu buttons\n if (typeof otherProps.menu === 'function') {\n children = Array.isArray(children)\n ? [...children, <Icon key=\"chevron-down\" name=\"chevron-down\" />]\n : [children, <Icon key=\"chevron-down\" name=\"chevron-down\" />];\n }\n\n return createButton({ ...otherProps, children, 'data-taco': 'button' }, className, ref);\n});\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';\nimport cn from 'classnames';\nimport { Appearance } from '../../types';\nimport * as ButtonPrimitive from '../../primitives/Button';\nimport { getAppearanceClasses, getButtonClasses, createButton } from './util';\nimport { HangerProps } from '../Hanger/Hanger';\nimport { MenuProps } from '../Menu/Menu';\nimport { DialogProps } from '../Dialog/Dialog';\nimport { PopoverProps } from '../Popover/Popover';\nimport './Button.css';\nimport { Icon } from '../Icon/Icon';\n\nexport type ButtonProps = ButtonPrimitive.ButtonProps & {\n /** Appearance will change the style of the button */\n appearance?: Appearance;\n /**\n * Dialog component associated with the button, clicking the button will open the dialog.\n * *Note* that `onClick` event on button won't be handled, as in this case, the purpose of\n * the button should be only to open the associated dialog when clicked.\n */\n dialog?: (props: Partial<DialogProps>) => JSX.Element;\n /** If fluid, button expands to the width of it's container */\n fluid?: boolean;\n /** Hanger component associated with the button. */\n hanger?: (props: Partial<HangerProps>) => JSX.Element;\n /** Menu component associated with the button. */\n menu?: (props: Partial<MenuProps>) => JSX.Element;\n /**\n * Popover component associated with the button, clicking the button will open the popover.\n * *Note* that `onClick` event on button won't be handled, as in this case, the purpose of\n * the button should be only to open the associated popover when clicked.\n */\n popover?: (props: Partial<PopoverProps>) => JSX.Element;\n /** A tooltip to show when hovering over the button */\n tooltip?: string;\n};\n\nexport const Button = React.forwardRef(function Button(\n props: ButtonProps,\n ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>\n) {\n const { fluid, ...otherProps } = props;\n const className = cn(\n getButtonClasses(),\n getAppearanceClasses(otherProps.appearance),\n 'rounded px-3',\n {\n 'cursor-not-allowed opacity-50': props.disabled,\n 'focus:yt-focus active:focus:yt-focus': !props.disabled,\n 'w-full': fluid,\n },\n props.className\n );\n\n let children = otherProps.children;\n\n // add a chevron icon to menu buttons\n if (typeof otherProps.menu === 'function') {\n children = Array.isArray(children)\n ? [...children, <Icon key=\"chevron-down\" name=\"chevron-down\" />]\n : [children, <Icon key=\"chevron-down\" name=\"chevron-down\" />];\n }\n\n return createButton({ ...otherProps, children, 'data-taco': 'button' }, className, ref);\n});\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;EAInC,MAAM;IAAEC,KAAF;IAAS,GAAGC;MAAeH,KAAjC;EACA,MAAMI,SAAS,GAAGC,EAAE,CAChBC,gBAAgB,EADA,EAEhBC,oBAAoB,CAACJ,UAAU,CAACK,UAAZ,CAFJ,EAGhB,cAHgB,EAIhB;IACI,iCAAiCR,KAAK,CAACS,QAD3C;IAEI,wCAAwC,CAACT,KAAK,CAACS,QAFnD;IAGI,UAAUP;GAPE,EAShBF,KAAK,CAACI,SATU,CAApB;EAYA,IAAIM,QAAQ,GAAGP,UAAU,CAACO,QAA1B;;EAGA,IAAI,OAAOP,UAAU,CAACQ,IAAlB,KAA2B,UAA/B,EAA2C;IACvCD,QAAQ,GAAGE,KAAK,CAACC,OAAN,CAAcH,QAAd,IACL,CAAC,GAAGA,QAAJ,EAAcX,aAAA,CAACe,IAAD;MAAMC,GAAG,EAAC;MAAeC,IAAI,EAAC;KAA9B,CAAd,CADK,GAEL,CAACN,QAAD,EAAWX,aAAA,CAACe,IAAD;MAAMC,GAAG,EAAC;MAAeC,IAAI,EAAC;KAA9B,CAAX,CAFN;;;EAKJ,OAAOC,YAAY,CAAC,EAAE,GAAGd,UAAL;IAAiBO,QAAjB;IAA2B,aAAa;GAAzC,EAAqDN,SAArD,EAAgEH,GAAhE,CAAnB;AACH,CA3BqB;;;;"}
|
@@ -1,49 +1,44 @@
|
|
1
|
-
import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose } from '../../_virtual/_rollupPluginBabelHelpers.js';
|
2
1
|
import React__default from 'react';
|
3
2
|
import { Button } from '../../primitives/Button.js';
|
4
3
|
import { Tooltip } from '../Tooltip/Tooltip.js';
|
5
4
|
|
6
|
-
|
7
|
-
var getButtonClasses = function getButtonClasses() {
|
5
|
+
const getButtonClasses = () => {
|
8
6
|
return 'min-h-[theme(spacing.8)] min-w-[theme(spacing.8)] gap-1 h-max leading-5 inline-flex items-center justify-center';
|
9
7
|
};
|
10
|
-
|
11
|
-
if (icon === void 0) {
|
12
|
-
icon = false;
|
13
|
-
}
|
14
|
-
|
8
|
+
const getAppearanceClasses = (value, icon = false) => {
|
15
9
|
switch (value) {
|
16
10
|
case 'primary':
|
17
|
-
return
|
11
|
+
return `yt-blue-solid focus:bg-blue focus:text-white focus:yt-focus active:bg-blue-dark active:text-white hover:bg-blue-light hover:text-white hover:focus:bg-blue-light hover:focus:border-blue-light hover:focus:text-white disabled:hover:yt-blue-solid disabled:hover:hover:border-blue`;
|
18
12
|
|
19
13
|
case 'danger':
|
20
|
-
return
|
14
|
+
return `yt-red-solid 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`;
|
21
15
|
|
22
16
|
case 'ghost':
|
23
|
-
return
|
17
|
+
return `bg-white shadow-[inset_0_0_0_1px_theme(colors.blue.DEFAULT)] text-blue focus:bg-transparent focus:text-blue active:bg-blue-lightest focus:!shadow-[inset_0_0_0_1px_theme(colors.blue.DEFAULT),0_0_0_2px_rgba(0,99,255,0.25)] active:text-blue-dark hover:bg-blue-lightest hover:shadow-[inset_0_0_0_1px_theme(colors.blue.light)] hover:text-blue-light hover:focus:bg-blue-lightest hover:focus:!shadow-[inset_0_0_0_1px_theme(colors.blue.light),0_0_0_2px_rgba(0,99,255,0.25)] hover:focus:text-blue-light`;
|
24
18
|
|
25
19
|
case 'discrete':
|
26
20
|
{
|
27
21
|
if (icon) {
|
28
|
-
return
|
22
|
+
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:text-black `;
|
29
23
|
}
|
30
24
|
|
31
|
-
return
|
25
|
+
return `yt-transparent focus:text-blue focus:yt-focus active:text-blue-dark hover:text-blue-light hover:focus:text-blue-light disabled:hover:yt-transparent`;
|
32
26
|
}
|
33
27
|
|
34
28
|
default:
|
35
|
-
return
|
29
|
+
return `yt-grey-solid 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`;
|
36
30
|
}
|
37
31
|
};
|
38
|
-
|
39
|
-
|
40
|
-
|
41
|
-
|
42
|
-
|
43
|
-
|
44
|
-
|
45
|
-
|
46
|
-
|
32
|
+
const createButton = (props, className, ref) => {
|
33
|
+
const {
|
34
|
+
dialog,
|
35
|
+
hanger,
|
36
|
+
menu,
|
37
|
+
popover,
|
38
|
+
tooltip,
|
39
|
+
...otherProps
|
40
|
+
} = props;
|
41
|
+
let button = React__default.createElement(Button, Object.assign({}, otherProps, {
|
47
42
|
className: className,
|
48
43
|
ref: ref
|
49
44
|
}));
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"util.js","sources":["../../../../src/components/Button/util.tsx"],"sourcesContent":["import React from 'react';\nimport { Appearance } from '../../types';\nimport * as ButtonPrimitive from '../../primitives/Button';\nimport { Tooltip } from '../Tooltip/Tooltip';\n\nexport const getButtonClasses = () => {\n return 'min-h-[theme(spacing.8)] min-w-[theme(spacing.8)] gap-1 h-max leading-5 inline-flex items-center justify-center';\n};\n\nexport const getAppearanceClasses = (value: Appearance | undefined, icon = false): string => {\n switch (value) {\n case 'primary':\n return `yt-blue-solid focus:bg-blue focus:text-white focus:yt-focus active:bg-blue-dark active:text-white hover:bg-blue-light hover:text-white hover:focus:bg-blue-light hover:focus:border-blue-light hover:focus:text-white disabled:hover:yt-blue-solid disabled:hover:hover:border-blue`;\n\n case 'danger':\n return `yt-red-solid 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`;\n\n case 'ghost':\n return `bg-white shadow-[inset_0_0_0_1px_theme(colors.blue.DEFAULT)] text-blue focus:bg-transparent focus:text-blue active:bg-blue-lightest focus:!shadow-[inset_0_0_0_1px_theme(colors.blue.DEFAULT),0_0_0_2px_rgba(0,99,255,0.25)] active:text-blue-dark hover:bg-blue-lightest hover:shadow-[inset_0_0_0_1px_theme(colors.blue.light)] hover:text-blue-light hover:focus:bg-blue-lightest hover:focus:!shadow-[inset_0_0_0_1px_theme(colors.blue.light),0_0_0_2px_rgba(0,99,255,0.25)] hover:focus:text-blue-light`;\n\n case 'discrete': {\n if (icon) {\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:text-black `;\n }\n\n return `yt-transparent focus:text-blue focus:yt-focus active:text-blue-dark hover:text-blue-light hover:focus:text-blue-light disabled:hover:yt-transparent`;\n }\n\n default:\n return `yt-grey-solid 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`;\n }\n};\n\nexport const createButton = (\n props: any,\n className: string,\n ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>\n): JSX.Element => {\n const { dialog, hanger, menu, popover, tooltip, ...otherProps } = props;\n\n let button = <ButtonPrimitive.Button {...otherProps} className={className} ref={ref} />;\n\n if (typeof dialog === 'function') {\n button = dialog({ trigger: button });\n } else if (typeof menu === 'function') {\n button = menu({ trigger: button, appearance: otherProps.appearance });\n } else if (typeof popover === 'function') {\n button = popover({ trigger: button });\n }\n\n if (typeof hanger === 'function') {\n button = hanger({ anchor: button });\n }\n\n if (tooltip) {\n button = <Tooltip title={tooltip}>{button}</Tooltip>;\n }\n\n return button;\n};\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":"
|
1
|
+
{"version":3,"file":"util.js","sources":["../../../../src/components/Button/util.tsx"],"sourcesContent":["import React from 'react';\nimport { Appearance } from '../../types';\nimport * as ButtonPrimitive from '../../primitives/Button';\nimport { Tooltip } from '../Tooltip/Tooltip';\n\nexport const getButtonClasses = () => {\n return 'min-h-[theme(spacing.8)] min-w-[theme(spacing.8)] gap-1 h-max leading-5 inline-flex items-center justify-center';\n};\n\nexport const getAppearanceClasses = (value: Appearance | undefined, icon = false): string => {\n switch (value) {\n case 'primary':\n return `yt-blue-solid focus:bg-blue focus:text-white focus:yt-focus active:bg-blue-dark active:text-white hover:bg-blue-light hover:text-white hover:focus:bg-blue-light hover:focus:border-blue-light hover:focus:text-white disabled:hover:yt-blue-solid disabled:hover:hover:border-blue`;\n\n case 'danger':\n return `yt-red-solid 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`;\n\n case 'ghost':\n return `bg-white shadow-[inset_0_0_0_1px_theme(colors.blue.DEFAULT)] text-blue focus:bg-transparent focus:text-blue active:bg-blue-lightest focus:!shadow-[inset_0_0_0_1px_theme(colors.blue.DEFAULT),0_0_0_2px_rgba(0,99,255,0.25)] active:text-blue-dark hover:bg-blue-lightest hover:shadow-[inset_0_0_0_1px_theme(colors.blue.light)] hover:text-blue-light hover:focus:bg-blue-lightest hover:focus:!shadow-[inset_0_0_0_1px_theme(colors.blue.light),0_0_0_2px_rgba(0,99,255,0.25)] hover:focus:text-blue-light`;\n\n case 'discrete': {\n if (icon) {\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:text-black `;\n }\n\n return `yt-transparent focus:text-blue focus:yt-focus active:text-blue-dark hover:text-blue-light hover:focus:text-blue-light disabled:hover:yt-transparent`;\n }\n\n default:\n return `yt-grey-solid 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`;\n }\n};\n\nexport const createButton = (\n props: any,\n className: string,\n ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>\n): JSX.Element => {\n const { dialog, hanger, menu, popover, tooltip, ...otherProps } = props;\n\n let button = <ButtonPrimitive.Button {...otherProps} className={className} ref={ref} />;\n\n if (typeof dialog === 'function') {\n button = dialog({ trigger: button });\n } else if (typeof menu === 'function') {\n button = menu({ trigger: button, appearance: otherProps.appearance });\n } else if (typeof popover === 'function') {\n button = popover({ trigger: button });\n }\n\n if (typeof hanger === 'function') {\n button = hanger({ anchor: button });\n }\n\n if (tooltip) {\n button = <Tooltip title={tooltip}>{button}</Tooltip>;\n }\n\n return button;\n};\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;EAC5B,OAAO,iHAAP;AACH;MAEYC,oBAAoB,GAAG,CAACC,KAAD,EAAgCC,IAAI,GAAG,KAAvC;EAChC,QAAQD,KAAR;IACI,KAAK,SAAL;MACI,4RAAA;;IAEJ,KAAK,QAAL;MACI,2NAAA;;IAEJ,KAAK,OAAL;MACI,sfAAA;;IAEJ,KAAK,UAAL;MAAiB;QACb,IAAIC,IAAJ,EAAU;UACN,wLAAA;;;QAGJ,4JAAA;;;IAGJ;MACI,0NAAA;;AAEX;MAEYC,YAAY,GAAG,CACxBC,KADwB,EAExBC,SAFwB,EAGxBC,GAHwB;EAKxB,MAAM;IAAEC,MAAF;IAAUC,MAAV;IAAkBC,IAAlB;IAAwBC,OAAxB;IAAiCC,OAAjC;IAA0C,GAAGC;MAAeR,KAAlE;EAEA,IAAIS,MAAM,GAAGC,4BAAA,CAACC,MAAD,oBAA4BH;IAAYP,SAAS,EAAEA;IAAWC,GAAG,EAAEA;IAAnE,CAAb;;EAEA,IAAI,OAAOC,MAAP,KAAkB,UAAtB,EAAkC;IAC9BM,MAAM,GAAGN,MAAM,CAAC;MAAES,OAAO,EAAEH;KAAZ,CAAf;GADJ,MAEO,IAAI,OAAOJ,IAAP,KAAgB,UAApB,EAAgC;IACnCI,MAAM,GAAGJ,IAAI,CAAC;MAAEO,OAAO,EAAEH,MAAX;MAAmBI,UAAU,EAAEL,UAAU,CAACK;KAA3C,CAAb;GADG,MAEA,IAAI,OAAOP,OAAP,KAAmB,UAAvB,EAAmC;IACtCG,MAAM,GAAGH,OAAO,CAAC;MAAEM,OAAO,EAAEH;KAAZ,CAAhB;;;EAGJ,IAAI,OAAOL,MAAP,KAAkB,UAAtB,EAAkC;IAC9BK,MAAM,GAAGL,MAAM,CAAC;MAAEU,MAAM,EAAEL;KAAX,CAAf;;;EAGJ,IAAIF,OAAJ,EAAa;IACTE,MAAM,GAAGC,4BAAA,CAACK,OAAD;MAASC,KAAK,EAAET;KAAhB,EAA0BE,MAA1B,CAAT;;;EAGJ,OAAOA,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';\nimport cn from 'classnames';\nimport ReactDayPicker, { NavbarElementProps, DayModifiers } from 'react-day-picker';\nimport { useLocalization } from '../Provider/Provider';\nimport './Calendar.css';\nimport { IconButton } from '../IconButton/IconButton';\n\nexport type CalendarTextsActions = {\n /** Aria-label for previous month action button */\n previousMonth: string;\n /** Aria-label for next month action button */\n nextMonth: string;\n /** Aria-label for previous year action button */\n previousYear: string;\n /** Aria-label for next year action button */\n nextYear: string;\n /** Text displayed within today action button */\n today: string;\n};\n\nexport type CalendarTexts = {\n /** Text and aria-label for action buttons in Calendar */\n actions: CalendarTextsActions;\n /** Text abbreviation for months in Calendar's header, starting with January */\n months: string[];\n /** Text abbreviation for days in Calendar's header, starting with Sunday */\n weekdaysShort: string[];\n};\n\nconst renderDay = (day: Date, modifiers: DayModifiers): React.ReactNode =>\n modifiers.disabled ? <span className=\"dot\" /> : day.getDate();\n\n/** @internal */\ntype CustomNavbarElementProps = NavbarElementProps & {\n showYearControls?: boolean;\n onMonthChange: (month: Date) => void;\n value?: Date;\n};\n\nconst thisYear = new Date().getFullYear();\nconst years: number[] = [];\n\nfor (let i = thisYear - 10; i <= thisYear + 10; i += 1) {\n years.push(i);\n}\n\nconst Navbar = React.memo(\n ({ onMonthChange, onNextClick, onPreviousClick, value = new Date() }: CustomNavbarElementProps): JSX.Element => {\n const {\n texts: {\n calendar: { actions, months },\n },\n } = useLocalization();\n\n const handleChange = function handleChange(event) {\n const { year, month } = event.target.form;\n onMonthChange(new Date(year.value, month.value));\n };\n\n return (\n <div className=\"mb-2 flex items-center justify-between\">\n <form className=\"inline-flex space-x-1\">\n <select className=\"h-8 px-2\" name=\"month\" onChange={handleChange} value={value.getMonth()}>\n {months.map((month, i) => (\n <option key={month} value={i}>\n {month}\n </option>\n ))}\n </select>\n <select className=\"h-8 px-2\" name=\"year\" onChange={handleChange} value={value.getFullYear()}>\n {years.map(year => (\n <option key={year} value={year}>\n {String(year)}\n </option>\n ))}\n </select>\n </form>\n <div>\n <IconButton\n appearance=\"discrete\"\n icon=\"chevron-left\"\n aria-label={actions.previousMonth}\n onClick={() => onPreviousClick()}\n rounded\n />\n <IconButton\n appearance=\"discrete\"\n icon=\"chevron-right\"\n aria-label={actions.nextMonth}\n onClick={() => onNextClick()}\n rounded\n />\n </div>\n </div>\n );\n }\n);\n\nexport type CalendarProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'value'> & {\n /** Handler called when a day is clicked in calendar */\n onChange: (date: Date, event?: React.MouseEvent<HTMLDivElement>) => void;\n value?: Date;\n};\n\nexport const Calendar = React.forwardRef(function Calendar(props: CalendarProps, ref: React.Ref<ReactDayPicker>) {\n const { onChange: handleChange, value, ...otherProps } = props;\n const { locale, texts } = useLocalization();\n const [visibleMonth, setVisibleMonth] = React.useState(value ?? new Date());\n\n React.useEffect(() => {\n if (visibleMonth !== value) {\n setVisibleMonth(value ?? new Date());\n }\n }, [value]);\n\n const handleDayClick = (date, modifiers, event) => {\n if (modifiers.outside || modifiers.disabled) {\n return;\n }\n\n handleChange(date, event);\n };\n\n const handleCalendarClickToday = (): void => {\n const today = new Date();\n\n // set to midday to avoid UTC offset causing dates to be mismatched server side\n today.setHours(12);\n today.setMinutes(0);\n today.setSeconds(0);\n\n handleChange(today);\n };\n\n const className = cn('flex bg-white text-xs p-4', otherProps.className);\n\n return (\n <div data-taco=\"calendar\">\n <ReactDayPicker\n {...otherProps}\n className={className}\n month={visibleMonth}\n selectedDays={value}\n locale={locale.substring(0, 2)}\n firstDayOfWeek={1}\n months={texts.calendar.months}\n weekdaysShort={texts.calendar.weekdaysShort}\n navbarElement={navProps => <Navbar {...navProps} onMonthChange={setVisibleMonth} value={visibleMonth} />}\n onDayClick={handleDayClick}\n onMonthChange={setVisibleMonth}\n onTodayButtonClick={handleCalendarClickToday}\n captionElement={() => null}\n todayButton={texts.calendar.actions.today}\n showOutsideDays\n renderDay={renderDay}\n numberOfMonths={1}\n ref={ref}\n />\n </div>\n );\n});\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';\nimport cn from 'classnames';\nimport ReactDayPicker, { NavbarElementProps, DayModifiers } from 'react-day-picker';\nimport { useLocalization } from '../Provider/Provider';\nimport './Calendar.css';\nimport { IconButton } from '../IconButton/IconButton';\n\nexport type CalendarTextsActions = {\n /** Aria-label for previous month action button */\n previousMonth: string;\n /** Aria-label for next month action button */\n nextMonth: string;\n /** Aria-label for previous year action button */\n previousYear: string;\n /** Aria-label for next year action button */\n nextYear: string;\n /** Text displayed within today action button */\n today: string;\n};\n\nexport type CalendarTexts = {\n /** Text and aria-label for action buttons in Calendar */\n actions: CalendarTextsActions;\n /** Text abbreviation for months in Calendar's header, starting with January */\n months: string[];\n /** Text abbreviation for days in Calendar's header, starting with Sunday */\n weekdaysShort: string[];\n};\n\nconst renderDay = (day: Date, modifiers: DayModifiers): React.ReactNode =>\n modifiers.disabled ? <span className=\"dot\" /> : day.getDate();\n\n/** @internal */\ntype CustomNavbarElementProps = NavbarElementProps & {\n showYearControls?: boolean;\n onMonthChange: (month: Date) => void;\n value?: Date;\n};\n\nconst thisYear = new Date().getFullYear();\nconst years: number[] = [];\n\nfor (let i = thisYear - 10; i <= thisYear + 10; i += 1) {\n years.push(i);\n}\n\nconst Navbar = React.memo(\n ({ onMonthChange, onNextClick, onPreviousClick, value = new Date() }: CustomNavbarElementProps): JSX.Element => {\n const {\n texts: {\n calendar: { actions, months },\n },\n } = useLocalization();\n\n const handleChange = function handleChange(event) {\n const { year, month } = event.target.form;\n onMonthChange(new Date(year.value, month.value));\n };\n\n return (\n <div className=\"mb-2 flex items-center justify-between\">\n <form className=\"inline-flex space-x-1\">\n <select className=\"h-8 px-2\" name=\"month\" onChange={handleChange} value={value.getMonth()}>\n {months.map((month, i) => (\n <option key={month} value={i}>\n {month}\n </option>\n ))}\n </select>\n <select className=\"h-8 px-2\" name=\"year\" onChange={handleChange} value={value.getFullYear()}>\n {years.map(year => (\n <option key={year} value={year}>\n {String(year)}\n </option>\n ))}\n </select>\n </form>\n <div>\n <IconButton\n appearance=\"discrete\"\n icon=\"chevron-left\"\n aria-label={actions.previousMonth}\n onClick={() => onPreviousClick()}\n rounded\n />\n <IconButton\n appearance=\"discrete\"\n icon=\"chevron-right\"\n aria-label={actions.nextMonth}\n onClick={() => onNextClick()}\n rounded\n />\n </div>\n </div>\n );\n }\n);\n\nexport type CalendarProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'value'> & {\n /** Handler called when a day is clicked in calendar */\n onChange: (date: Date, event?: React.MouseEvent<HTMLDivElement>) => void;\n value?: Date;\n};\n\nexport const Calendar = React.forwardRef(function Calendar(props: CalendarProps, ref: React.Ref<ReactDayPicker>) {\n const { onChange: handleChange, value, ...otherProps } = props;\n const { locale, texts } = useLocalization();\n const [visibleMonth, setVisibleMonth] = React.useState(value ?? new Date());\n\n React.useEffect(() => {\n if (visibleMonth !== value) {\n setVisibleMonth(value ?? new Date());\n }\n }, [value]);\n\n const handleDayClick = (date, modifiers, event) => {\n if (modifiers.outside || modifiers.disabled) {\n return;\n }\n\n handleChange(date, event);\n };\n\n const handleCalendarClickToday = (): void => {\n const today = new Date();\n\n // set to midday to avoid UTC offset causing dates to be mismatched server side\n today.setHours(12);\n today.setMinutes(0);\n today.setSeconds(0);\n\n handleChange(today);\n };\n\n const className = cn('flex bg-white text-xs p-4', otherProps.className);\n\n return (\n <div data-taco=\"calendar\">\n <ReactDayPicker\n {...otherProps}\n className={className}\n month={visibleMonth}\n selectedDays={value}\n locale={locale.substring(0, 2)}\n firstDayOfWeek={1}\n months={texts.calendar.months}\n weekdaysShort={texts.calendar.weekdaysShort}\n navbarElement={navProps => <Navbar {...navProps} onMonthChange={setVisibleMonth} value={visibleMonth} />}\n onDayClick={handleDayClick}\n onMonthChange={setVisibleMonth}\n onTodayButtonClick={handleCalendarClickToday}\n captionElement={() => null}\n todayButton={texts.calendar.actions.today}\n showOutsideDays\n renderDay={renderDay}\n numberOfMonths={1}\n ref={ref}\n />\n </div>\n );\n});\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,4 +1,3 @@
|
|
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/components/index.js';
|
@@ -54,12 +53,12 @@ import '../Switch/Switch.js';
|
|
54
53
|
import '../Tour/Tour.js';
|
55
54
|
import '../../utils/hooks/useOnClickOutside.js';
|
56
55
|
|
57
|
-
|
58
|
-
|
59
|
-
|
60
|
-
|
61
|
-
|
62
|
-
|
56
|
+
const Content = /*#__PURE__*/forwardRef(function CardContent(externalProps, ref) {
|
57
|
+
const {
|
58
|
+
noPadding,
|
59
|
+
...props
|
60
|
+
} = externalProps;
|
61
|
+
const className = cn('flex-grow overflow-auto', {
|
63
62
|
'mx-4 mb-4': !noPadding
|
64
63
|
}, props.className);
|
65
64
|
return createElement("div", Object.assign({}, props, {
|
@@ -67,11 +66,13 @@ var Content = /*#__PURE__*/forwardRef(function CardContent(externalProps, ref) {
|
|
67
66
|
ref: ref
|
68
67
|
}));
|
69
68
|
});
|
70
|
-
|
71
|
-
|
72
|
-
|
73
|
-
|
74
|
-
|
69
|
+
const Card = /*#__PURE__*/forwardRef(function Card(props, ref) {
|
70
|
+
const {
|
71
|
+
title,
|
72
|
+
menu,
|
73
|
+
children
|
74
|
+
} = props;
|
75
|
+
const className = cn('bg-white flex flex-col rounded-xl shadow-[0px_0px_1px_rgba(0,0,0,0.1),0px_6px_18px_rgba(47,51,68,0.2)]', props.className);
|
75
76
|
return createElement("div", {
|
76
77
|
className: className,
|
77
78
|
"data-taco": "card",
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Card.js","sources":["../../../../src/components/Card/Card.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\n\nimport { MenuProps, IconButton } from '../..';\n\nexport type CardContentProps = React.HTMLAttributes<HTMLDivElement> & {\n noPadding?: boolean;\n};\n\nconst Content = React.forwardRef<HTMLDivElement, CardContentProps>(function CardContent(externalProps, ref) {\n const { noPadding, ...props } = externalProps;\n const className = cn(\n 'flex-grow overflow-auto',\n {\n 'mx-4 mb-4': !noPadding,\n },\n props.className\n );\n return <div {...props} className={className} ref={ref} />;\n});\n\nexport type CardProps = React.HTMLAttributes<HTMLDivElement> & {\n /** Title of the Card */\n title: string | React.ReactElement;\n /** Menu component associated with the Card */\n menu?: (props: Partial<MenuProps>) => JSX.Element;\n};\n\nexport const Card = React.forwardRef<HTMLDivElement, CardProps>(function Card(props, ref) {\n const { title, menu, children } = props;\n const className = cn(\n 'bg-white flex flex-col rounded-xl shadow-[0px_0px_1px_rgba(0,0,0,0.1),0px_6px_18px_rgba(47,51,68,0.2)]',\n props.className\n );\n\n return (\n <div className={className} data-taco=\"card\" ref={ref}>\n <div className=\"mx-4 mt-4 mb-2 flex\">\n {title && <h4 className=\"mb-0 flex-grow text-left\">{title}</h4>}\n {menu ? <IconButton icon=\"ellipsis-horizontal\" appearance=\"discrete\" menu={menu} className=\"-mt-[4px]\" /> : null}\n </div>\n {children}\n </div>\n );\n}) as React.ForwardRefExoticComponent<CardProps> & {\n Content: React.ForwardRefExoticComponent<CardContentProps>;\n};\nCard.Content = Content;\n"],"names":["Content","React","CardContent","externalProps","ref","noPadding","props","className","cn","Card","title","menu","children","IconButton","icon","appearance"],"mappings":"
|
1
|
+
{"version":3,"file":"Card.js","sources":["../../../../src/components/Card/Card.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\n\nimport { MenuProps, IconButton } from '../..';\n\nexport type CardContentProps = React.HTMLAttributes<HTMLDivElement> & {\n noPadding?: boolean;\n};\n\nconst Content = React.forwardRef<HTMLDivElement, CardContentProps>(function CardContent(externalProps, ref) {\n const { noPadding, ...props } = externalProps;\n const className = cn(\n 'flex-grow overflow-auto',\n {\n 'mx-4 mb-4': !noPadding,\n },\n props.className\n );\n return <div {...props} className={className} ref={ref} />;\n});\n\nexport type CardProps = React.HTMLAttributes<HTMLDivElement> & {\n /** Title of the Card */\n title: string | React.ReactElement;\n /** Menu component associated with the Card */\n menu?: (props: Partial<MenuProps>) => JSX.Element;\n};\n\nexport const Card = React.forwardRef<HTMLDivElement, CardProps>(function Card(props, ref) {\n const { title, menu, children } = props;\n const className = cn(\n 'bg-white flex flex-col rounded-xl shadow-[0px_0px_1px_rgba(0,0,0,0.1),0px_6px_18px_rgba(47,51,68,0.2)]',\n props.className\n );\n\n return (\n <div className={className} data-taco=\"card\" ref={ref}>\n <div className=\"mx-4 mt-4 mb-2 flex\">\n {title && <h4 className=\"mb-0 flex-grow text-left\">{title}</h4>}\n {menu ? <IconButton icon=\"ellipsis-horizontal\" appearance=\"discrete\" menu={menu} className=\"-mt-[4px]\" /> : null}\n </div>\n {children}\n </div>\n );\n}) as React.ForwardRefExoticComponent<CardProps> & {\n Content: React.ForwardRefExoticComponent<CardContentProps>;\n};\nCard.Content = Content;\n"],"names":["Content","React","CardContent","externalProps","ref","noPadding","props","className","cn","Card","title","menu","children","IconButton","icon","appearance"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AASA,MAAMA,OAAO,gBAAGC,UAAA,CAAmD,SAASC,WAAT,CAAqBC,aAArB,EAAoCC,GAApC;EAC/D,MAAM;IAAEC,SAAF;IAAa,GAAGC;MAAUH,aAAhC;EACA,MAAMI,SAAS,GAAGC,EAAE,CAChB,yBADgB,EAEhB;IACI,aAAa,CAACH;GAHF,EAKhBC,KAAK,CAACC,SALU,CAApB;EAOA,OAAON,aAAA,MAAA,oBAASK;IAAOC,SAAS,EAAEA;IAAWH,GAAG,EAAEA;IAA3C,CAAP;AACH,CAVe,CAAhB;MAmBaK,IAAI,gBAAGR,UAAA,CAA4C,SAASQ,IAAT,CAAcH,KAAd,EAAqBF,GAArB;EAC5D,MAAM;IAAEM,KAAF;IAASC,IAAT;IAAeC;MAAaN,KAAlC;EACA,MAAMC,SAAS,GAAGC,EAAE,CAChB,wGADgB,EAEhBF,KAAK,CAACC,SAFU,CAApB;EAKA,OACIN,aAAA,MAAA;IAAKM,SAAS,EAAEA;iBAAqB;IAAOH,GAAG,EAAEA;GAAjD,EACIH,aAAA,MAAA;IAAKM,SAAS,EAAC;GAAf,EACKG,KAAK,IAAIT,aAAA,KAAA;IAAIM,SAAS,EAAC;GAAd,EAA0CG,KAA1C,CADd,EAEKC,IAAI,GAAGV,aAAA,CAACY,UAAD;IAAYC,IAAI,EAAC;IAAsBC,UAAU,EAAC;IAAWJ,IAAI,EAAEA;IAAMJ,SAAS,EAAC;GAAnF,CAAH,GAAuG,IAFhH,CADJ,EAKKK,QALL,CADJ;AASH,CAhBmB;AAmBpBH,IAAI,CAACT,OAAL,GAAeA,OAAf;;;;"}
|
@@ -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] focus:yt-focus', //hover:shadow-[0_0_0_1px_rgba(235,235,235,1)]
|
18
17
|
props.className, {
|
19
18
|
'border-grey-dark text-blue hover:text-blue-light focus:border-blue focus:hover:border-blue-light': !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 hover:text-red-light hover:border-red-light focus:border-red focus:hover:border-red-light': 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 gap-2', {
|
47
44
|
'cursor-not-allowed text-grey-dark': props.disabled
|
48
45
|
}, props.className);
|
49
46
|
return createElement("label", {
|