@economic/taco 1.0.0 → 1.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/esm/components/Button/util.js +4 -4
- package/dist/esm/components/Button/util.js.map +1 -1
- package/dist/esm/components/Table/hooks/plugins/useRowSelect.js +3 -4
- package/dist/esm/components/Table/hooks/plugins/useRowSelect.js.map +1 -1
- package/dist/esm/components/Table/util/renderColumn.js +2 -1
- package/dist/esm/components/Table/util/renderColumn.js.map +1 -1
- package/dist/taco.cjs.development.js +9 -9
- 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/package.json +2 -2
|
@@ -14,18 +14,18 @@ var getAppearanceClasses = function getAppearanceClasses(value, icon) {
|
|
|
14
14
|
|
|
15
15
|
switch (value) {
|
|
16
16
|
case 'primary':
|
|
17
|
-
return "yt-blue-solid border-blue focus:bg-blue focus:text-white focus:yt-focus active:bg-blue-dark active:text-white
|
|
17
|
+
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 disabled:hover:hover:border-blue";
|
|
18
18
|
|
|
19
19
|
case 'danger':
|
|
20
|
-
return "yt-red-solid border-red focus:bg-red focus:text-white focus:yt-focus-red active:bg-red-dark active:text-white
|
|
20
|
+
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";
|
|
21
21
|
|
|
22
22
|
case 'ghost':
|
|
23
|
-
return "yt-blue-inverted focus:bg-transparent focus:text-blue focus:yt-focus active:bg-blue-lightest active:border-blue active:text-blue-dark
|
|
23
|
+
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";
|
|
24
24
|
|
|
25
25
|
case 'discrete':
|
|
26
26
|
{
|
|
27
27
|
if (icon) {
|
|
28
|
-
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:
|
|
28
|
+
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
29
|
}
|
|
30
30
|
|
|
31
31
|
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";
|
|
@@ -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 border';\n};\n\nexport const getAppearanceClasses = (value: Appearance | undefined, icon = false): string => {\n switch (value) {\n case 'primary':\n return `yt-blue-solid border-blue focus:bg-blue focus:text-white focus:yt-focus active:bg-blue-dark active:text-white
|
|
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 border';\n};\n\nexport const getAppearanceClasses = (value: Appearance | undefined, icon = false): string => {\n switch (value) {\n case 'primary':\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 disabled:hover:hover:border-blue`;\n\n case 'danger':\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`;\n\n case 'ghost':\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`;\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 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`;\n }\n\n default:\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`;\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":";;;;;;IAKaA,gBAAgB,GAAG,SAAnBA,gBAAmB;AAC5B,SAAO,wHAAP;AACH;IAEYC,oBAAoB,GAAG,SAAvBA,oBAAuB,CAACC,KAAD,EAAgCC,IAAhC;MAAgCA;AAAAA,IAAAA,OAAO;;;AACvE,UAAQD,KAAR;AACI,SAAK,SAAL;AACI;;AAEJ,SAAK,QAAL;AACI;;AAEJ,SAAK,OAAL;AACI;;AAEJ,SAAK,UAAL;AAAiB;AACb,YAAIC,IAAJ,EAAU;AACN;AACH;;AAED;AACH;;AAED;AACI;AAnBR;AAqBH;IAEYC,YAAY,GAAG,SAAfA,YAAe,CACxBC,KADwB,EAExBC,SAFwB,EAGxBC,GAHwB;AAKxB,MAAQC,MAAR,GAAkEH,KAAlE,CAAQG,MAAR;AAAA,MAAgBC,MAAhB,GAAkEJ,KAAlE,CAAgBI,MAAhB;AAAA,MAAwBC,IAAxB,GAAkEL,KAAlE,CAAwBK,IAAxB;AAAA,MAA8BC,OAA9B,GAAkEN,KAAlE,CAA8BM,OAA9B;AAAA,MAAuCC,OAAvC,GAAkEP,KAAlE,CAAuCO,OAAvC;AAAA,MAAmDC,UAAnD,iCAAkER,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;;;;"}
|
|
@@ -63,8 +63,7 @@ var useRowSelect = function useRowSelect(onSelectedRows) {
|
|
|
63
63
|
};
|
|
64
64
|
|
|
65
65
|
return React__default.createElement(Checkbox, Object.assign({}, props, {
|
|
66
|
-
onChange: onChange
|
|
67
|
-
className: "mt-px"
|
|
66
|
+
onChange: onChange
|
|
68
67
|
}));
|
|
69
68
|
},
|
|
70
69
|
Cell: function Cell(_ref2) {
|
|
@@ -96,7 +95,7 @@ var useRowSelect = function useRowSelect(onSelectedRows) {
|
|
|
96
95
|
};
|
|
97
96
|
|
|
98
97
|
return React__default.createElement(Checkbox, Object.assign({}, props, {
|
|
99
|
-
className: "mt-
|
|
98
|
+
className: "mt-2.5",
|
|
100
99
|
onClick: onClick,
|
|
101
100
|
// this is necessary to remove console spam from eslint
|
|
102
101
|
onChange: function onChange() {
|
|
@@ -105,7 +104,7 @@ var useRowSelect = function useRowSelect(onSelectedRows) {
|
|
|
105
104
|
}));
|
|
106
105
|
},
|
|
107
106
|
flex: '0 0 36px',
|
|
108
|
-
className: 'flex-col justify-start !
|
|
107
|
+
className: 'flex-col justify-start !py-0'
|
|
109
108
|
}].concat(columns);
|
|
110
109
|
});
|
|
111
110
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useRowSelect.js","sources":["../../../../../../src/components/Table/hooks/plugins/useRowSelect.tsx"],"sourcesContent":["// this wraps react-table's internal useRowSelect hook\nimport React from 'react';\nimport { useRowSelect as useBaseRowSelect, Row, PluginHook } from 'react-table';\nimport { Checkbox } from '../../../Checkbox/Checkbox';\nimport { SelectedRowsHandler } from '../../types';\n\nconst toggleBetween = (fromRowIndex: number, toRowIndex: number): [number, number] => {\n const fromIndex = toRowIndex < fromRowIndex ? toRowIndex : fromRowIndex;\n const toIndex = toRowIndex > fromRowIndex ? toRowIndex : fromRowIndex;\n\n return [fromIndex, toIndex];\n};\n\n// react-table calls \"index paths\" row ids. we named them indexPaths to reduce confusion with natural ids\n// the selection hook usess react-table's row selection, so this hok references row.id - it is the index path\n\nexport const useRowSelect = (onSelectedRows: SelectedRowsHandler | undefined): PluginHook<{}> => {\n const plugin = (hooks: any): void => {\n // eslint-disable-next-line react-hooks/rules-of-hooks\n useBaseRowSelect(hooks);\n\n if (onSelectedRows) {\n const toggleRowSelected = (indexPath: string, checked: boolean): void =>\n onSelectedRows(state => {\n const nextState = { ...state };\n\n if (checked) {\n nextState[indexPath] = true;\n } else {\n delete nextState[indexPath];\n }\n\n return nextState;\n });\n\n const prepareRow = (row: any) => {\n row.toggleRowSelected = () => toggleRowSelected(row.id, !row.isSelected);\n };\n\n hooks.prepareRow.push(prepareRow);\n\n // eslint-disable-next-line react-hooks/rules-of-hooks\n const lastSelectedSortedIndex = React.useRef();\n\n hooks.visibleColumns.push((columns: any) => [\n {\n id: 'selection',\n Header: ({ getToggleAllRowsSelectedProps, rows }: any) => {\n const { onChange: _, ...props } = getToggleAllRowsSelectedProps();\n\n const onChange = (checked): void => {\n if (checked) {\n // this intentionally only selects top level rows - sub rows add too much complexity\n onSelectedRows(Object.assign({}, Array(rows.length).fill(true)));\n } else {\n onSelectedRows({});\n }\n };\n\n return <Checkbox {...props} onChange={onChange}
|
|
1
|
+
{"version":3,"file":"useRowSelect.js","sources":["../../../../../../src/components/Table/hooks/plugins/useRowSelect.tsx"],"sourcesContent":["// this wraps react-table's internal useRowSelect hook\nimport React from 'react';\nimport { useRowSelect as useBaseRowSelect, Row, PluginHook } from 'react-table';\nimport { Checkbox } from '../../../Checkbox/Checkbox';\nimport { SelectedRowsHandler } from '../../types';\n\nconst toggleBetween = (fromRowIndex: number, toRowIndex: number): [number, number] => {\n const fromIndex = toRowIndex < fromRowIndex ? toRowIndex : fromRowIndex;\n const toIndex = toRowIndex > fromRowIndex ? toRowIndex : fromRowIndex;\n\n return [fromIndex, toIndex];\n};\n\n// react-table calls \"index paths\" row ids. we named them indexPaths to reduce confusion with natural ids\n// the selection hook usess react-table's row selection, so this hok references row.id - it is the index path\n\nexport const useRowSelect = (onSelectedRows: SelectedRowsHandler | undefined): PluginHook<{}> => {\n const plugin = (hooks: any): void => {\n // eslint-disable-next-line react-hooks/rules-of-hooks\n useBaseRowSelect(hooks);\n\n if (onSelectedRows) {\n const toggleRowSelected = (indexPath: string, checked: boolean): void =>\n onSelectedRows(state => {\n const nextState = { ...state };\n\n if (checked) {\n nextState[indexPath] = true;\n } else {\n delete nextState[indexPath];\n }\n\n return nextState;\n });\n\n const prepareRow = (row: any) => {\n row.toggleRowSelected = () => toggleRowSelected(row.id, !row.isSelected);\n };\n\n hooks.prepareRow.push(prepareRow);\n\n // eslint-disable-next-line react-hooks/rules-of-hooks\n const lastSelectedSortedIndex = React.useRef();\n\n hooks.visibleColumns.push((columns: any) => [\n {\n id: 'selection',\n Header: ({ getToggleAllRowsSelectedProps, rows }: any) => {\n const { onChange: _, ...props } = getToggleAllRowsSelectedProps();\n\n const onChange = (checked): void => {\n if (checked) {\n // this intentionally only selects top level rows - sub rows add too much complexity\n onSelectedRows(Object.assign({}, Array(rows.length).fill(true)));\n } else {\n onSelectedRows({});\n }\n };\n\n return <Checkbox {...props} onChange={onChange} />;\n },\n Cell: ({ row, rows }: any) => {\n const { onChange: _, ...props } = row.getToggleRowSelectedProps();\n // row.index refers to the index in the original data, not the current index\n const sortedIndex = rows.findIndex((r: Row) => r.index === row.index);\n\n const onClick = (event: React.MouseEvent): void => {\n if (event.shiftKey) {\n const [fromIndex, toIndex] = toggleBetween(lastSelectedSortedIndex.current || 0, sortedIndex);\n\n for (let i = fromIndex; i <= toIndex; i++) {\n toggleRowSelected(rows[i].id, true);\n }\n } else {\n toggleRowSelected(row.id, !props.checked);\n }\n\n lastSelectedSortedIndex.current = sortedIndex;\n };\n\n return (\n <Checkbox\n {...props}\n className=\"mt-2.5\"\n onClick={onClick}\n // this is necessary to remove console spam from eslint\n onChange={() => false}\n />\n );\n },\n flex: '0 0 36px',\n className: 'flex-col justify-start !py-0',\n },\n ...columns,\n ]);\n }\n };\n plugin.pluginName = 'useRowSelect';\n return plugin;\n};\n"],"names":["toggleBetween","fromRowIndex","toRowIndex","fromIndex","toIndex","useRowSelect","onSelectedRows","plugin","hooks","useBaseRowSelect","toggleRowSelected","indexPath","checked","state","nextState","prepareRow","row","id","isSelected","push","lastSelectedSortedIndex","React","useRef","visibleColumns","columns","Header","getToggleAllRowsSelectedProps","rows","props","onChange","Object","assign","Array","length","fill","Checkbox","Cell","getToggleRowSelectedProps","sortedIndex","findIndex","r","index","onClick","event","shiftKey","current","i","className","flex","pluginName"],"mappings":"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"}
|
|
@@ -31,7 +31,8 @@ var Column = function Column(_ref) {
|
|
|
31
31
|
}), React__default.createElement("span", {
|
|
32
32
|
className: "truncate"
|
|
33
33
|
}, cell.render('Header')), cell.isSorted ? React__default.createElement(Icon, {
|
|
34
|
-
name: cell.isSortedDesc ? 'chevron-down-solid' : 'chevron-up-solid'
|
|
34
|
+
name: cell.isSortedDesc ? 'chevron-down-solid' : 'chevron-up-solid',
|
|
35
|
+
className: "-mt-0.5"
|
|
35
36
|
}) : null);
|
|
36
37
|
};
|
|
37
38
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"renderColumn.js","sources":["../../../../../src/components/Table/util/renderColumn.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { Icon } from '../../Icon/Icon';\n\nexport const Column = ({ cell }: any): any => {\n const props = {\n ...cell.getHeaderProps(),\n ...(cell.getSortByToggleProps && cell.getSortByToggleProps({ title: undefined })),\n className: cn('yt-table__cell flex flex-1 truncate p-2 align-middle text-grey-darkest hover:text-black', cell.className, {\n 'yt-table__cell__group': !!cell.columns,\n 'cursor-pointer': !cell.disableSorting,\n 'justify-start text-left': cell.align === 'left',\n 'justify-end text-right': cell.align === 'right',\n 'justify-center text-center': cell.align === 'center' || !cell.align,\n }),\n style: { ...cell.style, flex: cell.flex },\n };\n\n if (cell.isSorted) {\n props['aria-sort'] = cell.isSortedDesc ? 'descending' : 'ascending';\n }\n\n return (\n <div {...props} key={cell.id} data-taco=\"table-column\">\n <span className=\"truncate\">{cell.render('Header')}</span>\n {cell.isSorted ? <Icon name={cell.isSortedDesc ? 'chevron-down-solid' : 'chevron-up-solid'}
|
|
1
|
+
{"version":3,"file":"renderColumn.js","sources":["../../../../../src/components/Table/util/renderColumn.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { Icon } from '../../Icon/Icon';\n\nexport const Column = ({ cell }: any): any => {\n const props = {\n ...cell.getHeaderProps(),\n ...(cell.getSortByToggleProps && cell.getSortByToggleProps({ title: undefined })),\n className: cn('yt-table__cell flex flex-1 truncate p-2 align-middle text-grey-darkest hover:text-black', cell.className, {\n 'yt-table__cell__group': !!cell.columns,\n 'cursor-pointer': !cell.disableSorting,\n 'justify-start text-left': cell.align === 'left',\n 'justify-end text-right': cell.align === 'right',\n 'justify-center text-center': cell.align === 'center' || !cell.align,\n }),\n style: { ...cell.style, flex: cell.flex },\n };\n\n if (cell.isSorted) {\n props['aria-sort'] = cell.isSortedDesc ? 'descending' : 'ascending';\n }\n\n return (\n <div {...props} key={cell.id} data-taco=\"table-column\">\n <span className=\"truncate\">{cell.render('Header')}</span>\n {cell.isSorted ? (\n <Icon name={cell.isSortedDesc ? 'chevron-down-solid' : 'chevron-up-solid'} className=\"-mt-0.5\" />\n ) : null}\n </div>\n );\n};\n"],"names":["Column","cell","props","getHeaderProps","getSortByToggleProps","title","undefined","className","cn","columns","disableSorting","align","style","flex","isSorted","isSortedDesc","React","key","id","render","Icon","name"],"mappings":";;;;;IAIaA,MAAM,GAAG,SAATA,MAAS;MAAGC,YAAAA;;AACrB,MAAMC,KAAK,gBACJD,IAAI,CAACE,cAAL,EADI,EAEHF,IAAI,CAACG,oBAAL,IAA6BH,IAAI,CAACG,oBAAL,CAA0B;AAAEC,IAAAA,KAAK,EAAEC;AAAT,GAA1B,CAF1B;AAGPC,IAAAA,SAAS,EAAEC,EAAE,CAAC,yFAAD,EAA4FP,IAAI,CAACM,SAAjG,EAA4G;AACrH,+BAAyB,CAAC,CAACN,IAAI,CAACQ,OADqF;AAErH,wBAAkB,CAACR,IAAI,CAACS,cAF6F;AAGrH,iCAA2BT,IAAI,CAACU,KAAL,KAAe,MAH2E;AAIrH,gCAA0BV,IAAI,CAACU,KAAL,KAAe,OAJ4E;AAKrH,oCAA8BV,IAAI,CAACU,KAAL,KAAe,QAAf,IAA2B,CAACV,IAAI,CAACU;AALsD,KAA5G,CAHN;AAUPC,IAAAA,KAAK,eAAOX,IAAI,CAACW,KAAZ;AAAmBC,MAAAA,IAAI,EAAEZ,IAAI,CAACY;AAA9B;AAVE,IAAX;;AAaA,MAAIZ,IAAI,CAACa,QAAT,EAAmB;AACfZ,IAAAA,KAAK,CAAC,WAAD,CAAL,GAAqBD,IAAI,CAACc,YAAL,GAAoB,YAApB,GAAmC,WAAxD;AACH;;AAED,SACIC,4BAAA,MAAA,oBAASd;AAAOe,IAAAA,GAAG,EAAEhB,IAAI,CAACiB;iBAAc;IAAxC,EACIF,4BAAA,OAAA;AAAMT,IAAAA,SAAS,EAAC;GAAhB,EAA4BN,IAAI,CAACkB,MAAL,CAAY,QAAZ,CAA5B,CADJ,EAEKlB,IAAI,CAACa,QAAL,GACGE,4BAAA,CAACI,IAAD;AAAMC,IAAAA,IAAI,EAAEpB,IAAI,CAACc,YAAL,GAAoB,oBAApB,GAA2C;AAAoBR,IAAAA,SAAS,EAAC;GAArF,CADH,GAEG,IAJR,CADJ;AAQH;;;;"}
|
|
@@ -3412,18 +3412,18 @@ var getAppearanceClasses = function getAppearanceClasses(value, icon) {
|
|
|
3412
3412
|
|
|
3413
3413
|
switch (value) {
|
|
3414
3414
|
case 'primary':
|
|
3415
|
-
return "yt-blue-solid border-blue focus:bg-blue focus:text-white focus:yt-focus active:bg-blue-dark active:text-white
|
|
3415
|
+
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 disabled:hover:hover:border-blue";
|
|
3416
3416
|
|
|
3417
3417
|
case 'danger':
|
|
3418
|
-
return "yt-red-solid border-red focus:bg-red focus:text-white focus:yt-focus-red active:bg-red-dark active:text-white
|
|
3418
|
+
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";
|
|
3419
3419
|
|
|
3420
3420
|
case 'ghost':
|
|
3421
|
-
return "yt-blue-inverted focus:bg-transparent focus:text-blue focus:yt-focus active:bg-blue-lightest active:border-blue active:text-blue-dark
|
|
3421
|
+
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";
|
|
3422
3422
|
|
|
3423
3423
|
case 'discrete':
|
|
3424
3424
|
{
|
|
3425
3425
|
if (icon) {
|
|
3426
|
-
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:
|
|
3426
|
+
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 ";
|
|
3427
3427
|
}
|
|
3428
3428
|
|
|
3429
3429
|
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";
|
|
@@ -8504,8 +8504,7 @@ var useRowSelect = function useRowSelect(onSelectedRows) {
|
|
|
8504
8504
|
};
|
|
8505
8505
|
|
|
8506
8506
|
return React__default.createElement(Checkbox, Object.assign({}, props, {
|
|
8507
|
-
onChange: onChange
|
|
8508
|
-
className: "mt-px"
|
|
8507
|
+
onChange: onChange
|
|
8509
8508
|
}));
|
|
8510
8509
|
},
|
|
8511
8510
|
Cell: function Cell(_ref2) {
|
|
@@ -8537,7 +8536,7 @@ var useRowSelect = function useRowSelect(onSelectedRows) {
|
|
|
8537
8536
|
};
|
|
8538
8537
|
|
|
8539
8538
|
return React__default.createElement(Checkbox, Object.assign({}, props, {
|
|
8540
|
-
className: "mt-
|
|
8539
|
+
className: "mt-2.5",
|
|
8541
8540
|
onClick: onClick,
|
|
8542
8541
|
// this is necessary to remove console spam from eslint
|
|
8543
8542
|
onChange: function onChange() {
|
|
@@ -8546,7 +8545,7 @@ var useRowSelect = function useRowSelect(onSelectedRows) {
|
|
|
8546
8545
|
}));
|
|
8547
8546
|
},
|
|
8548
8547
|
flex: '0 0 36px',
|
|
8549
|
-
className: 'flex-col justify-start !
|
|
8548
|
+
className: 'flex-col justify-start !py-0'
|
|
8550
8549
|
}].concat(columns);
|
|
8551
8550
|
});
|
|
8552
8551
|
}
|
|
@@ -9164,7 +9163,8 @@ var Column = function Column(_ref) {
|
|
|
9164
9163
|
}), React__default.createElement("span", {
|
|
9165
9164
|
className: "truncate"
|
|
9166
9165
|
}, cell.render('Header')), cell.isSorted ? React__default.createElement(Icon, {
|
|
9167
|
-
name: cell.isSortedDesc ? 'chevron-down-solid' : 'chevron-up-solid'
|
|
9166
|
+
name: cell.isSortedDesc ? 'chevron-down-solid' : 'chevron-up-solid',
|
|
9167
|
+
className: "-mt-0.5"
|
|
9168
9168
|
}) : null);
|
|
9169
9169
|
};
|
|
9170
9170
|
|