@autoguru/overdrive 4.54.0 → 4.55.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/BulletList/Bullet.css.d.ts +1 -1
- package/dist/components/DataTable/DataTable.css.d.ts +3 -0
- package/dist/components/DataTable/DataTable.css.d.ts.map +1 -0
- package/dist/components/DataTable/DataTable.css.js +55 -0
- package/dist/components/DataTable/DataTable.d.ts +23 -0
- package/dist/components/DataTable/DataTable.d.ts.map +1 -0
- package/dist/components/DataTable/DataTable.js +48 -0
- package/dist/components/DataTable/index.d.ts +2 -0
- package/dist/components/DataTable/index.d.ts.map +1 -0
- package/dist/components/DataTable/index.js +1 -0
- package/dist/components/EditableText/EditableText.css.d.ts.map +1 -1
- package/dist/components/EditableText/EditableText.css.js +0 -1
- package/dist/components/OverdriveProvider/OverdriveProvider.d.ts +10 -1
- package/dist/components/OverdriveProvider/OverdriveProvider.d.ts.map +1 -1
- package/dist/components/OverdriveProvider/OverdriveProvider.js +41 -5
- package/dist/components/ScrollPane/ScrollPane.css.d.ts +0 -1
- package/dist/components/ScrollPane/ScrollPane.css.d.ts.map +1 -1
- package/dist/components/ScrollPane/ScrollPane.css.js +8 -19
- package/dist/components/ScrollPane/ScrollPane.d.ts +2 -1
- package/dist/components/ScrollPane/ScrollPane.d.ts.map +1 -1
- package/dist/components/ScrollPane/ScrollPane.js +5 -5
- package/dist/components/Table/Table.d.ts +1 -1
- package/dist/components/Table/Table.d.ts.map +1 -1
- package/dist/components/Table/Table.js +1 -0
- package/dist/components/Table/TableCell.d.ts +1 -1
- package/dist/components/Table/TableCell.d.ts.map +1 -1
- package/dist/components/Table/TableCell.js +2 -4
- package/dist/components/Table/TableHeadCell.css.d.ts.map +1 -1
- package/dist/components/Table/TableHeadCell.css.js +11 -16
- package/dist/components/Table/TableHeadCell.d.ts +3 -3
- package/dist/components/Table/TableHeadCell.d.ts.map +1 -1
- package/dist/components/Table/TableHeadCell.js +5 -9
- package/dist/components/Table/TableRow.css.d.ts +3 -0
- package/dist/components/Table/TableRow.css.d.ts.map +1 -0
- package/dist/components/Table/TableRow.css.js +29 -0
- package/dist/components/Table/TableRow.d.ts +22 -2
- package/dist/components/Table/TableRow.d.ts.map +1 -1
- package/dist/components/Table/TableRow.js +28 -8
- package/dist/components/Table/TableRowGroup.d.ts +1 -1
- package/dist/components/Table/TableRowGroup.d.ts.map +1 -1
- package/dist/components/Table/TableRowGroup.js +1 -0
- package/dist/components/index.d.ts +3 -2
- package/dist/components/index.d.ts.map +1 -1
- package/dist/components/index.js +1 -0
- package/dist/styles/sprinkles.css.d.ts +7 -7
- package/package.json +5 -5
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"DataTable.css.d.ts","sourceRoot":"","sources":["../../../lib/components/DataTable/DataTable.css.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,eAAe,QAO1B,CAAC;AAEH,eAAO,MAAM,YAAY,QAAY,CAAC"}
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
import * as __vanilla_filescope__ from '@vanilla-extract/css/fileScope';
|
|
2
|
+
__vanilla_filescope__.setFileScope("lib/components/DataTable/DataTable.css.ts", "@autoguru/overdrive");
|
|
3
|
+
import { globalStyle, keyframes, style } from '@vanilla-extract/css';
|
|
4
|
+
import { overdriveTokens as vars } from "../../themes/theme.css.js";
|
|
5
|
+
export const scrollContainer = style({
|
|
6
|
+
selectors: {
|
|
7
|
+
['&:focus-visible']: {
|
|
8
|
+
outline: `2px solid ${vars.colours.intent.primary.background.standard}`,
|
|
9
|
+
outlineOffset: '-2px'
|
|
10
|
+
}
|
|
11
|
+
}
|
|
12
|
+
}, "scrollContainer");
|
|
13
|
+
export const innerWrapper = style({}, "innerWrapper");
|
|
14
|
+
|
|
15
|
+
/*
|
|
16
|
+
* Scroll-driven sticky header background. The background only appears
|
|
17
|
+
* once the user scrolls, driven by animation-timeline: scroll().
|
|
18
|
+
* The animation completes in the first 1px of scroll so the effect
|
|
19
|
+
* snaps in immediately when content passes under the header.
|
|
20
|
+
*
|
|
21
|
+
* Guarded behind @supports because browsers without animation-timeline
|
|
22
|
+
* support would otherwise treat the `animation` shorthand as a 0s
|
|
23
|
+
* time-based animation and, combined with `animation-fill-mode: both`,
|
|
24
|
+
* apply the end-state background immediately on render.
|
|
25
|
+
*/
|
|
26
|
+
const stickyReveal = keyframes({
|
|
27
|
+
from: {
|
|
28
|
+
backgroundColor: 'transparent'
|
|
29
|
+
},
|
|
30
|
+
to: {
|
|
31
|
+
backgroundColor: vars.colours.background.body
|
|
32
|
+
}
|
|
33
|
+
}, "stickyReveal");
|
|
34
|
+
globalStyle(`${scrollContainer} [role="columnheader"]`, {
|
|
35
|
+
'@supports': {
|
|
36
|
+
'(animation-timeline: scroll())': {
|
|
37
|
+
animation: `${stickyReveal} linear both`,
|
|
38
|
+
animationRange: '0px 1px',
|
|
39
|
+
animationTimeline: 'scroll()'
|
|
40
|
+
}
|
|
41
|
+
}
|
|
42
|
+
});
|
|
43
|
+
|
|
44
|
+
/*
|
|
45
|
+
* Constrain the TableCell ::before hover pseudo-elements within DataTable.
|
|
46
|
+
* Without this, left/right: -1000% inflates scrollWidth to ~7400px inside
|
|
47
|
+
* the overflowX:auto scroll container. Pinning to 0 keeps the hover
|
|
48
|
+
* background within each cell instead of spanning the full row — a
|
|
49
|
+
* necessary trade-off to prevent phantom horizontal scroll.
|
|
50
|
+
*/
|
|
51
|
+
globalStyle(`${innerWrapper} [role="gridcell"]::before`, {
|
|
52
|
+
left: 0,
|
|
53
|
+
right: 0
|
|
54
|
+
});
|
|
55
|
+
__vanilla_filescope__.endFileScope();
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import type { ReactNode } from 'react';
|
|
2
|
+
import * as React from 'react';
|
|
3
|
+
import { type TableProps } from '../Table/Table';
|
|
4
|
+
export interface DataTableProps extends Omit<TableProps, 'ref'> {
|
|
5
|
+
/** Minimum width before horizontal scroll activates. CSS value, e.g. '800px'. */
|
|
6
|
+
minWidth?: string;
|
|
7
|
+
/** Maximum height before vertical scroll activates. Required for stickyHead to work. */
|
|
8
|
+
maxHeight?: string;
|
|
9
|
+
/** Accessible label for the scrollable region. */
|
|
10
|
+
'aria-label'?: string;
|
|
11
|
+
children: ReactNode | ReactNode[];
|
|
12
|
+
}
|
|
13
|
+
/**
|
|
14
|
+
* A responsive data table wrapper that enables horizontal scrolling on narrow
|
|
15
|
+
* containers. Composes the existing `Table` component inside a scrollable
|
|
16
|
+
* region with keyboard-accessible overflow.
|
|
17
|
+
*
|
|
18
|
+
* When using `stickyHead`, set `maxHeight` so the DataTable itself is the
|
|
19
|
+
* vertical scroll container — this ensures sticky headers resolve against
|
|
20
|
+
* the correct scroll ancestor.
|
|
21
|
+
*/
|
|
22
|
+
export declare const DataTable: React.ForwardRefExoticComponent<DataTableProps & React.RefAttributes<HTMLDivElement>>;
|
|
23
|
+
//# sourceMappingURL=DataTable.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"DataTable.d.ts","sourceRoot":"","sources":["../../../lib/components/DataTable/DataTable.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,EAAS,KAAK,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAIxD,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,UAAU,EAAE,KAAK,CAAC;IAC9D,iFAAiF;IACjF,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB,wFAAwF;IACxF,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,kDAAkD;IAClD,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB,QAAQ,EAAE,SAAS,GAAG,SAAS,EAAE,CAAC;CAClC;AAED;;;;;;;;GAQG;AACH,eAAO,MAAM,SAAS,uFAoCrB,CAAC"}
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { forwardRef } from 'react';
|
|
3
|
+
import { Box } from "../Box/Box.js";
|
|
4
|
+
import { ScrollPane } from "../ScrollPane/ScrollPane.js";
|
|
5
|
+
import { Table } from "../Table/Table.js";
|
|
6
|
+
import * as styles from "./DataTable.css.js";
|
|
7
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
8
|
+
/**
|
|
9
|
+
* A responsive data table wrapper that enables horizontal scrolling on narrow
|
|
10
|
+
* containers. Composes the existing `Table` component inside a scrollable
|
|
11
|
+
* region with keyboard-accessible overflow.
|
|
12
|
+
*
|
|
13
|
+
* When using `stickyHead`, set `maxHeight` so the DataTable itself is the
|
|
14
|
+
* vertical scroll container — this ensures sticky headers resolve against
|
|
15
|
+
* the correct scroll ancestor.
|
|
16
|
+
*/
|
|
17
|
+
export const DataTable = /*#__PURE__*/forwardRef(({
|
|
18
|
+
minWidth,
|
|
19
|
+
maxHeight,
|
|
20
|
+
'aria-label': ariaLabel = 'Data table',
|
|
21
|
+
children,
|
|
22
|
+
columnTemplate,
|
|
23
|
+
padding,
|
|
24
|
+
stickyHead
|
|
25
|
+
}, ref) => /*#__PURE__*/_jsx(ScrollPane, {
|
|
26
|
+
ref: ref,
|
|
27
|
+
role: "region",
|
|
28
|
+
"aria-label": ariaLabel,
|
|
29
|
+
tabIndex: 0,
|
|
30
|
+
style: maxHeight ? {
|
|
31
|
+
maxHeight
|
|
32
|
+
} : undefined,
|
|
33
|
+
className: styles.scrollContainer,
|
|
34
|
+
odComponent: "data-table",
|
|
35
|
+
children: /*#__PURE__*/_jsx(Box, {
|
|
36
|
+
className: styles.innerWrapper,
|
|
37
|
+
style: minWidth ? {
|
|
38
|
+
minWidth
|
|
39
|
+
} : undefined,
|
|
40
|
+
children: /*#__PURE__*/_jsx(Table, {
|
|
41
|
+
columnTemplate: columnTemplate,
|
|
42
|
+
padding: padding,
|
|
43
|
+
stickyHead: stickyHead,
|
|
44
|
+
children: children
|
|
45
|
+
})
|
|
46
|
+
})
|
|
47
|
+
}));
|
|
48
|
+
DataTable.displayName = 'DataTable';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../lib/components/DataTable/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,aAAa,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { DataTable } from "./DataTable.js";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"EditableText.css.d.ts","sourceRoot":"","sources":["../../../lib/components/EditableText/EditableText.css.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,IAAI,QAUf,CAAC;AAEH,eAAO,MAAM,KAAK,
|
|
1
|
+
{"version":3,"file":"EditableText.css.d.ts","sourceRoot":"","sources":["../../../lib/components/EditableText/EditableText.css.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,IAAI,QAUf,CAAC;AAEH,eAAO,MAAM,KAAK,QAkBhB,CAAC;AAEH,eAAO,MAAM,IAAI,QAMf,CAAC;AAEH,eAAO,MAAM,UAAU,QAOrB,CAAC"}
|
|
@@ -18,6 +18,15 @@ export interface ProviderProps {
|
|
|
18
18
|
colorOverrides?: Partial<ColorOverrides>;
|
|
19
19
|
/** Reference to an HTML element where portals should be mounted */
|
|
20
20
|
portalMountPoint?: PortalMountPoint;
|
|
21
|
+
/**
|
|
22
|
+
* BCP47 locale string for React Aria components (DateInput, Calendar, etc.).
|
|
23
|
+
* Controls date segment ordering, number formatting, and text direction.
|
|
24
|
+
*
|
|
25
|
+
* @example "en-AU" for Australian English (DD/MM/YYYY)
|
|
26
|
+
* @example "de-DE" for German
|
|
27
|
+
* @default Falls back to browser's navigator.language
|
|
28
|
+
*/
|
|
29
|
+
locale?: string;
|
|
21
30
|
children?: React.ReactNode;
|
|
22
31
|
}
|
|
23
32
|
export interface ProviderContext extends Pick<ProviderProps, 'colorOverrides' | 'portalMountPoint'> {
|
|
@@ -28,7 +37,7 @@ export interface ProviderContext extends Pick<ProviderProps, 'colorOverrides' |
|
|
|
28
37
|
}
|
|
29
38
|
export declare const useTheme: () => ProviderContext;
|
|
30
39
|
export declare const useRuntimeTokens: () => RuntimeTokens;
|
|
31
|
-
export declare const Provider: ({ breakpoints, children, colorOverrides, noBodyLevelTheming, portalMountPoint, theme, }: ProviderProps) => React.JSX.Element;
|
|
40
|
+
export declare const Provider: ({ breakpoints, children, colorOverrides, locale, noBodyLevelTheming, portalMountPoint, theme, }: ProviderProps) => React.JSX.Element;
|
|
32
41
|
export declare const OverdriveProvider: React.NamedExoticComponent<ProviderProps>;
|
|
33
42
|
export {};
|
|
34
43
|
//# sourceMappingURL=OverdriveProvider.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"OverdriveProvider.d.ts","sourceRoot":"","sources":["../../../lib/components/OverdriveProvider/OverdriveProvider.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"OverdriveProvider.d.ts","sourceRoot":"","sources":["../../../lib/components/OverdriveProvider/OverdriveProvider.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAE5D,OAAO,KAAwD,MAAM,OAAO,CAAC;AAE7E,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAChD,OAAO,SAAS,MAAM,mBAAmB,CAAC;AAC1C,OAAO,EAAqB,KAAK,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAC/E,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAGzD,OAAO,EAAqB,KAAK,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAE7E,KAAK,aAAa,GAAG,OAAO,eAAe,CAAC;AAC5C,KAAK,gBAAgB,GAAG,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;AAqC5D,MAAM,WAAW,aAAa;IAC7B,6DAA6D;IAC7D,KAAK,CAAC,EAAE,OAAO,SAAS,CAAC;IACzB,+CAA+C;IAC/C,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,kEAAkE;IAClE,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,sDAAsD;IACtD,cAAc,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,CAAC;IACzC,mEAAmE;IACnE,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;IACpC;;;;;;;OAOG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,MAAM,WAAW,eAChB,SAAQ,IAAI,CAAC,aAAa,EAAE,gBAAgB,GAAG,kBAAkB,CAAC;IAClE,UAAU,EAAE,CAAC,OAAO,SAAS,CAAC,CAAC,UAAU,CAAC,CAAC;IAC3C,SAAS,EAAE,MAAM,CAAC;IAClB,cAAc,EAAE,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;IACpD,IAAI,EAAE,aAAa,CAAC;CACpB;AAMD,eAAO,MAAM,QAAQ,uBAIpB,CAAC;AAEF,eAAO,MAAM,gBAAgB,QAAO,aAInC,CAAC;AAUF,eAAO,MAAM,QAAQ,GAAI,iGAQtB,aAAa,sBA6Df,CAAC;AAEF,eAAO,MAAM,iBAAiB,2CAK7B,CAAC"}
|
|
@@ -2,6 +2,7 @@ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
|
|
|
2
2
|
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
3
3
|
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
4
4
|
import { invariant } from '@autoguru/utilities';
|
|
5
|
+
import { I18nProvider as ReactAriaI18nProvider } from '@react-aria/i18n';
|
|
5
6
|
import { isEqual } from 'es-toolkit';
|
|
6
7
|
import React, { createContext, useContext, useEffect, useMemo } from 'react';
|
|
7
8
|
import baseTheme from "../../themes/base/index.js";
|
|
@@ -9,6 +10,36 @@ import { makeRuntimeTokens } from "../../themes/makeTheme.js";
|
|
|
9
10
|
import { isBrowser } from "../../utils/index.js";
|
|
10
11
|
import { useColorOverrides } from "./useColorOverrides.js";
|
|
11
12
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
13
|
+
/**
|
|
14
|
+
* Maps 2-letter language codes to full BCP47 locale codes.
|
|
15
|
+
* English defaults to Australian locale (DD/MM/YYYY format).
|
|
16
|
+
*/
|
|
17
|
+
const LANGUAGE_TO_LOCALE = {
|
|
18
|
+
en: 'en-AU',
|
|
19
|
+
de: 'de-DE',
|
|
20
|
+
fr: 'fr-FR',
|
|
21
|
+
es: 'es-ES',
|
|
22
|
+
it: 'it-IT',
|
|
23
|
+
nl: 'nl-NL',
|
|
24
|
+
pl: 'pl-PL',
|
|
25
|
+
sv: 'sv-SE',
|
|
26
|
+
ja: 'ja-JP'
|
|
27
|
+
};
|
|
28
|
+
|
|
29
|
+
/**
|
|
30
|
+
* Resolves the locale for React Aria components.
|
|
31
|
+
* Priority: explicit prop > i18next language (mapped to full locale) > undefined (React Aria browser default)
|
|
32
|
+
*/
|
|
33
|
+
function resolveLocale(localeProp) {
|
|
34
|
+
var _i18next;
|
|
35
|
+
if (localeProp) return localeProp;
|
|
36
|
+
if (!isBrowser) return undefined;
|
|
37
|
+
const i18nextLang = (_i18next = window.i18next) === null || _i18next === void 0 ? void 0 : _i18next.language;
|
|
38
|
+
if (i18nextLang) {
|
|
39
|
+
return LANGUAGE_TO_LOCALE[i18nextLang] || i18nextLang;
|
|
40
|
+
}
|
|
41
|
+
return undefined;
|
|
42
|
+
}
|
|
12
43
|
const OverdriveContext = /*#__PURE__*/createContext(null);
|
|
13
44
|
const RuntimeTokensContext = /*#__PURE__*/createContext(null);
|
|
14
45
|
const msgInvariantError = "You haven't used an `<OverdriveProvider>`.";
|
|
@@ -29,6 +60,7 @@ export const Provider = ({
|
|
|
29
60
|
breakpoints,
|
|
30
61
|
children,
|
|
31
62
|
colorOverrides,
|
|
63
|
+
locale,
|
|
32
64
|
noBodyLevelTheming = false,
|
|
33
65
|
portalMountPoint,
|
|
34
66
|
theme = baseTheme
|
|
@@ -60,15 +92,19 @@ export const Provider = ({
|
|
|
60
92
|
portalMountPoint.current = null;
|
|
61
93
|
}
|
|
62
94
|
}, [portalMountPoint]);
|
|
95
|
+
const resolvedLocale = resolveLocale(locale);
|
|
63
96
|
return /*#__PURE__*/_jsx(OverdriveContext.Provider, {
|
|
64
97
|
value: themeValues,
|
|
65
98
|
children: /*#__PURE__*/_jsx(RuntimeTokensContext.Provider, {
|
|
66
99
|
value: runtimeTokens,
|
|
67
|
-
children: /*#__PURE__*/_jsx(
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
100
|
+
children: /*#__PURE__*/_jsx(ReactAriaI18nProvider, {
|
|
101
|
+
locale: resolvedLocale,
|
|
102
|
+
children: /*#__PURE__*/_jsx("div", {
|
|
103
|
+
className: theme.themeRef,
|
|
104
|
+
style: styles,
|
|
105
|
+
"data-od-component": "provider",
|
|
106
|
+
children: children
|
|
107
|
+
})
|
|
72
108
|
})
|
|
73
109
|
})
|
|
74
110
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ScrollPane.css.d.ts","sourceRoot":"","sources":["../../../lib/components/ScrollPane/ScrollPane.css.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,IAAI,
|
|
1
|
+
{"version":3,"file":"ScrollPane.css.d.ts","sourceRoot":"","sources":["../../../lib/components/ScrollPane/ScrollPane.css.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,IAAI,QA0Bf,CAAC"}
|
|
@@ -3,41 +3,30 @@ __vanilla_filescope__.setFileScope("lib/components/ScrollPane/ScrollPane.css.ts"
|
|
|
3
3
|
import { style } from '@vanilla-extract/css';
|
|
4
4
|
import { overdriveTokens as vars } from "../../themes/theme.css.js";
|
|
5
5
|
export const root = style({
|
|
6
|
+
scrollbarColor: `${vars.colours.gamut.gray300} transparent`,
|
|
7
|
+
scrollbarWidth: 'thin',
|
|
6
8
|
'::-webkit-scrollbar': {
|
|
7
9
|
backgroundColor: 'transparent',
|
|
10
|
+
height: 6,
|
|
8
11
|
width: 6
|
|
9
12
|
},
|
|
10
13
|
'::-webkit-scrollbar-corner': {
|
|
11
14
|
background: 'transparent'
|
|
12
15
|
},
|
|
16
|
+
'::-webkit-scrollbar-track': {
|
|
17
|
+
backgroundColor: 'transparent'
|
|
18
|
+
},
|
|
13
19
|
'::-webkit-scrollbar-thumb': {
|
|
14
20
|
backgroundColor: vars.colours.gamut.gray300,
|
|
15
|
-
|
|
16
|
-
},
|
|
17
|
-
'::-webkit-scrollbar-track': {
|
|
18
|
-
backgroundColor: vars.colours.gamut.gray100,
|
|
19
|
-
border: `1px solid ${vars.colours.gamut.gray200}`,
|
|
20
|
-
position: 'absolute'
|
|
21
|
+
borderRadius: '999px'
|
|
21
22
|
},
|
|
22
23
|
'::-webkit-scrollbar-button': {
|
|
23
24
|
display: 'none'
|
|
24
25
|
},
|
|
25
26
|
selectors: {
|
|
26
|
-
['&::-webkit-scrollbar-track:hover']: {
|
|
27
|
-
backgroundColor: vars.colours.gamut.gray300
|
|
28
|
-
},
|
|
29
27
|
['&::-webkit-scrollbar-thumb:hover']: {
|
|
30
|
-
backgroundColor: vars.colours.gamut.gray400
|
|
31
|
-
border: `1px solid ${vars.colours.gamut.gray400}`
|
|
28
|
+
backgroundColor: vars.colours.gamut.gray400
|
|
32
29
|
}
|
|
33
30
|
}
|
|
34
31
|
}, "root");
|
|
35
|
-
export const rounded = style({
|
|
36
|
-
'::-webkit-scrollbar-thumb': {
|
|
37
|
-
borderRadius: vars.border.radius['sm']
|
|
38
|
-
},
|
|
39
|
-
'::-webkit-scrollbar-track': {
|
|
40
|
-
borderRadius: `0 ${vars.border.radius['sm']} ${vars.border.radius['sm']} 0`
|
|
41
|
-
}
|
|
42
|
-
}, "rounded");
|
|
43
32
|
__vanilla_filescope__.endFileScope();
|
|
@@ -5,8 +5,9 @@ export interface ScrollPaneProps extends Omit<ComponentProps<typeof Box>, 'overf
|
|
|
5
5
|
bottomGap?: keyof Tokens['space'];
|
|
6
6
|
serverVhFallback?: number;
|
|
7
7
|
includeMobile?: boolean;
|
|
8
|
-
rounded?: boolean;
|
|
9
8
|
className?: string;
|
|
9
|
+
/** @deprecated No-op. Thumb is pill-rounded by default. Will be removed in the next major. */
|
|
10
|
+
rounded?: boolean;
|
|
10
11
|
}
|
|
11
12
|
export declare const ScrollPane: React.ForwardRefExoticComponent<Omit<ScrollPaneProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
12
13
|
//# sourceMappingURL=ScrollPane.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ScrollPane.d.ts","sourceRoot":"","sources":["../../../lib/components/ScrollPane/ScrollPane.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,KAAK,cAAc,EAAc,MAAM,OAAO,CAAC;AAE/D,OAAO,KAAK,EAAE,WAAW,IAAI,MAAM,EAAE,MAAM,cAAc,CAAC;AAC1D,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAC;AAI7B,MAAM,WAAW,eAChB,SAAQ,IAAI,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,EAAE,UAAU,CAAC;IACpD,SAAS,CAAC,EAAE,MAAM,MAAM,CAAC,OAAO,CAAC,CAAC;IAClC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,
|
|
1
|
+
{"version":3,"file":"ScrollPane.d.ts","sourceRoot":"","sources":["../../../lib/components/ScrollPane/ScrollPane.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,KAAK,cAAc,EAAc,MAAM,OAAO,CAAC;AAE/D,OAAO,KAAK,EAAE,WAAW,IAAI,MAAM,EAAE,MAAM,cAAc,CAAC;AAC1D,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAC;AAI7B,MAAM,WAAW,eAChB,SAAQ,IAAI,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,EAAE,UAAU,CAAC;IACpD,SAAS,CAAC,EAAE,MAAM,MAAM,CAAC,OAAO,CAAC,CAAC;IAClC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,8FAA8F;IAC9F,OAAO,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,eAAO,MAAM,UAAU,qGAWtB,CAAC"}
|
|
@@ -8,18 +8,18 @@ import React, { forwardRef } from 'react';
|
|
|
8
8
|
import { Box } from "../Box/index.js";
|
|
9
9
|
import * as styles from "./ScrollPane.css.js";
|
|
10
10
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
11
|
-
export const ScrollPane = /*#__PURE__*/forwardRef(
|
|
11
|
+
export const ScrollPane = /*#__PURE__*/forwardRef(
|
|
12
|
+
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
13
|
+
(_ref, ref) => {
|
|
12
14
|
let {
|
|
13
15
|
className = '',
|
|
14
|
-
rounded
|
|
16
|
+
rounded: _rounded
|
|
15
17
|
} = _ref,
|
|
16
18
|
rest = _objectWithoutProperties(_ref, _excluded);
|
|
17
19
|
return /*#__PURE__*/_jsx(Box, _objectSpread({
|
|
18
20
|
ref: ref,
|
|
19
21
|
overflow: "auto",
|
|
20
|
-
className: clsx(className, styles.root,
|
|
21
|
-
[styles.rounded]: rounded
|
|
22
|
-
}),
|
|
22
|
+
className: clsx(className, styles.root),
|
|
23
23
|
odComponent: "scroll-pane"
|
|
24
24
|
}, rest));
|
|
25
25
|
});
|
|
@@ -5,5 +5,5 @@ export interface TableProps extends Partial<TableContext> {
|
|
|
5
5
|
columnTemplate: string;
|
|
6
6
|
children: ReactNode | ReactNode[];
|
|
7
7
|
}
|
|
8
|
-
export declare const Table: React.ForwardRefExoticComponent<TableProps & React.RefAttributes<
|
|
8
|
+
export declare const Table: React.ForwardRefExoticComponent<TableProps & React.RefAttributes<HTMLTableElement>>;
|
|
9
9
|
//# sourceMappingURL=Table.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../../lib/components/Table/Table.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAG9C,MAAM,WAAW,UAAW,SAAQ,OAAO,CAAC,YAAY,CAAC;IACxD,cAAc,EAAE,MAAM,CAAC;IAEvB,QAAQ,EAAE,SAAS,GAAG,SAAS,EAAE,CAAC;CAClC;AAQD,eAAO,MAAM,KAAK,
|
|
1
|
+
{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../../lib/components/Table/Table.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAG9C,MAAM,WAAW,UAAW,SAAQ,OAAO,CAAC,YAAY,CAAC;IACxD,cAAc,EAAE,MAAM,CAAC;IAEvB,QAAQ,EAAE,SAAS,GAAG,SAAS,EAAE,CAAC;CAClC;AAQD,eAAO,MAAM,KAAK,qFAgBjB,CAAC"}
|
|
@@ -8,5 +8,5 @@ export interface TableCellProps extends Partial<Pick<AriaAttributes, 'aria-label
|
|
|
8
8
|
padding?: keyof Tokens['space'];
|
|
9
9
|
children?: ReactNode | null;
|
|
10
10
|
}
|
|
11
|
-
export declare const TableCell: React.ForwardRefExoticComponent<TableCellProps & React.RefAttributes<
|
|
11
|
+
export declare const TableCell: React.ForwardRefExoticComponent<TableCellProps & React.RefAttributes<HTMLTableCellElement>>;
|
|
12
12
|
//# sourceMappingURL=TableCell.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TableCell.d.ts","sourceRoot":"","sources":["../../../lib/components/Table/TableCell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,cAAc,EAAc,MAAM,OAAO,CAAC;AAEnD,OAAO,EAAE,WAAW,IAAI,MAAM,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAQ7C,MAAM,WAAW,cAChB,SAAQ,OAAO,CAAC,IAAI,CAAC,cAAc,EAAE,YAAY,CAAC,CAAC;IACnD,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,MAAM,CAAC,OAAO,CAAC,CAAC;IAEhC,QAAQ,CAAC,EAAE,SAAS,GAAG,IAAI,CAAC;CAC5B;AAED,eAAO,MAAM,SAAS,
|
|
1
|
+
{"version":3,"file":"TableCell.d.ts","sourceRoot":"","sources":["../../../lib/components/Table/TableCell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,cAAc,EAAc,MAAM,OAAO,CAAC;AAEnD,OAAO,EAAE,WAAW,IAAI,MAAM,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAQ7C,MAAM,WAAW,cAChB,SAAQ,OAAO,CAAC,IAAI,CAAC,cAAc,EAAE,YAAY,CAAC,CAAC;IACnD,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,MAAM,CAAC,OAAO,CAAC,CAAC;IAEhC,QAAQ,CAAC,EAAE,SAAS,GAAG,IAAI,CAAC;CAC5B;AAED,eAAO,MAAM,SAAS,6FAuCrB,CAAC"}
|
|
@@ -16,11 +16,9 @@ export const TableCell = /*#__PURE__*/forwardRef(({
|
|
|
16
16
|
const tableContext = useTableContext();
|
|
17
17
|
const padding = (_ref = incomingPadding !== null && incomingPadding !== void 0 ? incomingPadding : tableContext === null || tableContext === void 0 ? void 0 : tableContext.padding) !== null && _ref !== void 0 ? _ref : 'none';
|
|
18
18
|
return /*#__PURE__*/_jsx(Box, {
|
|
19
|
+
as: "td",
|
|
19
20
|
ref: ref,
|
|
20
|
-
role: "gridcell"
|
|
21
|
-
// TODO: look into use of `scope` prop on non table headinging cells
|
|
22
|
-
// scope="row"
|
|
23
|
-
,
|
|
21
|
+
role: "gridcell",
|
|
24
22
|
display: "flex",
|
|
25
23
|
alignItems: "center",
|
|
26
24
|
position: "relative",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TableHeadCell.css.d.ts","sourceRoot":"","sources":["../../../lib/components/Table/TableHeadCell.css.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,YAAY,QAAgC,CAAC;AAE1D,eAAO,MAAM,IAAI,QAMf,CAAC;AASH,eAAO,MAAM,MAAM;;;;;
|
|
1
|
+
{"version":3,"file":"TableHeadCell.css.d.ts","sourceRoot":"","sources":["../../../lib/components/Table/TableHeadCell.css.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,YAAY,QAAgC,CAAC;AAE1D,eAAO,MAAM,IAAI,QAMf,CAAC;AASH,eAAO,MAAM,MAAM;;;;;CA4BlB,CAAC;AAEF,eAAO,MAAM,MAAM,QAIjB,CAAC"}
|
|
@@ -18,34 +18,29 @@ export const text = style({
|
|
|
18
18
|
const sorterRoot = style({
|
|
19
19
|
transformOrigin: 'center',
|
|
20
20
|
transitionDuration: '0.3s',
|
|
21
|
-
transitionProperty: 'transform',
|
|
22
|
-
willChange: 'transform'
|
|
21
|
+
transitionProperty: 'transform, opacity, color',
|
|
22
|
+
willChange: 'transform, opacity'
|
|
23
23
|
}, "sorterRoot");
|
|
24
24
|
export const sorter = _objectSpread({
|
|
25
25
|
root: [sorterRoot, style({
|
|
26
|
-
color: vars.typography.colour.
|
|
27
|
-
transitionTimingFunction: vars.animation.easing.standard
|
|
28
|
-
selectors: {
|
|
29
|
-
[`${sorterButton}:hover &`]: {
|
|
30
|
-
color: vars.typography.colour.dark
|
|
31
|
-
}
|
|
32
|
-
}
|
|
26
|
+
color: vars.typography.colour.dark,
|
|
27
|
+
transitionTimingFunction: vars.animation.easing.standard
|
|
33
28
|
}, "sorter_root")]
|
|
34
29
|
}, styleVariants({
|
|
35
30
|
asc: {
|
|
36
|
-
|
|
31
|
+
opacity: '1',
|
|
32
|
+
transform: 'rotateX(0)'
|
|
37
33
|
},
|
|
38
34
|
desc: {
|
|
39
|
-
|
|
35
|
+
opacity: '1',
|
|
36
|
+
transform: 'rotateX(180deg)'
|
|
40
37
|
},
|
|
41
38
|
none: {
|
|
42
|
-
opacity: '0',
|
|
43
|
-
transform: '
|
|
44
|
-
transitionProperty: 'transform, opacity',
|
|
39
|
+
opacity: '0.5',
|
|
40
|
+
transform: 'rotateX(0)',
|
|
45
41
|
selectors: {
|
|
46
42
|
[`${sorterButton}:hover &`]: {
|
|
47
|
-
opacity: '
|
|
48
|
-
transform: 'translateY(0px) rotateX(0)'
|
|
43
|
+
opacity: '1'
|
|
49
44
|
}
|
|
50
45
|
}
|
|
51
46
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import type { AriaAttributes } from 'react';
|
|
1
|
+
import type { AriaAttributes, MouseEventHandler, ReactNode } from 'react';
|
|
2
2
|
import * as React from 'react';
|
|
3
3
|
import { Alignment } from '../../utils';
|
|
4
4
|
import { type BoxProps } from '../Box/Box';
|
|
@@ -6,8 +6,8 @@ type Sort = 'asc' | 'desc' | 'none';
|
|
|
6
6
|
export interface TableHeadCellProps extends Partial<Pick<AriaAttributes, 'aria-label'>>, Pick<BoxProps, 'padding'> {
|
|
7
7
|
align?: Alignment;
|
|
8
8
|
sort?: Sort;
|
|
9
|
-
onSort?:
|
|
10
|
-
children?:
|
|
9
|
+
onSort?: MouseEventHandler<HTMLTableCellElement>;
|
|
10
|
+
children?: ReactNode;
|
|
11
11
|
}
|
|
12
12
|
export declare const TableHeadCell: React.ForwardRefExoticComponent<TableHeadCellProps & React.RefAttributes<HTMLTableCellElement>>;
|
|
13
13
|
export {};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TableHeadCell.d.ts","sourceRoot":"","sources":["../../../lib/components/Table/TableHeadCell.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"TableHeadCell.d.ts","sourceRoot":"","sources":["../../../lib/components/Table/TableHeadCell.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAC1E,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAE,SAAS,EAA4B,MAAM,aAAa,CAAC;AAClE,OAAO,EAAO,KAAK,QAAQ,EAAE,MAAM,YAAY,CAAC;AAQhD,KAAK,IAAI,GAAG,KAAK,GAAG,MAAM,GAAG,MAAM,CAAC;AAEpC,MAAM,WAAW,kBAChB,SAAQ,OAAO,CAAC,IAAI,CAAC,cAAc,EAAE,YAAY,CAAC,CAAC,EAClD,IAAI,CAAC,QAAQ,EAAE,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,MAAM,CAAC,EAAE,iBAAiB,CAAC,oBAAoB,CAAC,CAAC;IAEjD,QAAQ,CAAC,EAAE,SAAS,CAAC;CACrB;AAUD,eAAO,MAAM,aAAa,iGAqGzB,CAAC"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { SortIcon } from '@autoguru/icons';
|
|
2
2
|
import clsx from 'clsx';
|
|
3
3
|
import * as React from 'react';
|
|
4
4
|
import { forwardRef, useCallback } from 'react';
|
|
@@ -7,7 +7,6 @@ import { Box } from "../Box/Box.js";
|
|
|
7
7
|
import { inline } from "../Flex/flex.js";
|
|
8
8
|
import { Icon } from "../Icon/Icon.js";
|
|
9
9
|
import { Text } from "../Text/Text.js";
|
|
10
|
-
import { VisuallyHidden } from "../VisuallyHidden/VisuallyHidden.js";
|
|
11
10
|
import * as styles from "./TableHeadCell.css.js";
|
|
12
11
|
import { useTableContext } from "./context.js";
|
|
13
12
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
@@ -34,7 +33,7 @@ export const TableHeadCell = /*#__PURE__*/forwardRef(({
|
|
|
34
33
|
}, [onSort]);
|
|
35
34
|
const shouldSort = typeof sort === 'string';
|
|
36
35
|
const sorter = /*#__PURE__*/_jsx(Icon, {
|
|
37
|
-
icon:
|
|
36
|
+
icon: SortIcon,
|
|
38
37
|
size: "small",
|
|
39
38
|
className: clsx([styles.sorter.root, styles.sorter[sort !== null && sort !== void 0 ? sort : 'none']])
|
|
40
39
|
});
|
|
@@ -44,16 +43,13 @@ export const TableHeadCell = /*#__PURE__*/forwardRef(({
|
|
|
44
43
|
align: alignmentToFlexAlignment(align),
|
|
45
44
|
justify: 'center'
|
|
46
45
|
}),
|
|
47
|
-
children: [align === 'right' && shouldSort ? sorter : null, /*#__PURE__*/
|
|
46
|
+
children: [align === 'right' && shouldSort ? sorter : null, /*#__PURE__*/_jsx(Text, {
|
|
48
47
|
strong: true,
|
|
49
48
|
size: "3",
|
|
50
49
|
as: "span",
|
|
51
50
|
align: align,
|
|
52
51
|
className: styles.text,
|
|
53
|
-
children:
|
|
54
|
-
as: "span",
|
|
55
|
-
children: [' ', "sorted ", sortToAria(sort)]
|
|
56
|
-
}) : null]
|
|
52
|
+
children: children
|
|
57
53
|
}), (align === 'left' || align === 'center') && shouldSort ? sorter : null]
|
|
58
54
|
});
|
|
59
55
|
return /*#__PURE__*/_jsx(Box, {
|
|
@@ -73,10 +69,10 @@ export const TableHeadCell = /*#__PURE__*/forwardRef(({
|
|
|
73
69
|
onClick: sort ? sortClickHandler : undefined,
|
|
74
70
|
children: sort ? /*#__PURE__*/_jsx(Box, {
|
|
75
71
|
as: "button",
|
|
72
|
+
type: "button",
|
|
76
73
|
display: "block",
|
|
77
74
|
width: "full",
|
|
78
75
|
padding: padding,
|
|
79
|
-
tabIndex: -1,
|
|
80
76
|
className: styles.sorterButton,
|
|
81
77
|
children: child
|
|
82
78
|
}) : child
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"TableRow.css.d.ts","sourceRoot":"","sources":["../../../lib/components/Table/TableRow.css.ts"],"names":[],"mappings":"AAaA,eAAO,MAAM,YAAY,oBAAc,CAAC;AAaxC,eAAO,MAAM,WAAW,QAAY,CAAC"}
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import * as __vanilla_filescope__ from '@vanilla-extract/css/fileScope';
|
|
2
|
+
__vanilla_filescope__.setFileScope("lib/components/Table/TableRow.css.ts", "@autoguru/overdrive");
|
|
3
|
+
import { createVar, globalStyle, keyframes, style } from '@vanilla-extract/css';
|
|
4
|
+
import { overdriveTokens as vars } from "../../themes/theme.css.js";
|
|
5
|
+
/*
|
|
6
|
+
* Staggered row-entrance animation — slide-up with fade.
|
|
7
|
+
*
|
|
8
|
+
* Opt in by passing `staggerIndex={i}` to a <TableRow>; that applies
|
|
9
|
+
* the `rowEntering` class and sets the `--staggerIndex` CSS variable.
|
|
10
|
+
* TableRow uses `display: contents` so we can't animate the row box
|
|
11
|
+
* itself — the global selector targets the row's gridcell children.
|
|
12
|
+
*/
|
|
13
|
+
export const staggerIndex = createVar("staggerIndex");
|
|
14
|
+
const slideUp = keyframes({
|
|
15
|
+
from: {
|
|
16
|
+
opacity: 0,
|
|
17
|
+
transform: 'translateY(12px)'
|
|
18
|
+
},
|
|
19
|
+
to: {
|
|
20
|
+
opacity: 1,
|
|
21
|
+
transform: 'translateY(0)'
|
|
22
|
+
}
|
|
23
|
+
}, "slideUp");
|
|
24
|
+
export const rowEntering = style({}, "rowEntering");
|
|
25
|
+
globalStyle(`${rowEntering} > [role="gridcell"]`, {
|
|
26
|
+
animation: `${slideUp} 300ms ${vars.animation.easing.decelerate} both`,
|
|
27
|
+
animationDelay: `calc(${staggerIndex} * 50ms)`
|
|
28
|
+
});
|
|
29
|
+
__vanilla_filescope__.endFileScope();
|
|
@@ -1,8 +1,28 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { MouseEventHandler, ReactNode } from 'react';
|
|
3
3
|
export interface TableRowProps {
|
|
4
|
-
|
|
4
|
+
/** Click handler fired when any part of the row is clicked. */
|
|
5
|
+
onClick?: MouseEventHandler<HTMLTableRowElement>;
|
|
6
|
+
/**
|
|
7
|
+
* Opt-in entrance animation. When set to a number, the row's cells
|
|
8
|
+
* animate in with a staggered slide-up-and-fade (translateY 12px → 0,
|
|
9
|
+
* opacity 0 → 1, 300 ms with the decelerate easing token).
|
|
10
|
+
*
|
|
11
|
+
* Pass the row's index within the list (0, 1, 2, …) so each row waits
|
|
12
|
+
* `staggerIndex * 50 ms` before animating — producing a cascade.
|
|
13
|
+
* Omit the prop to disable the animation entirely.
|
|
14
|
+
*
|
|
15
|
+
* @example
|
|
16
|
+
* {rows.map((row, i) => (
|
|
17
|
+
* <TableRow key={row.id} staggerIndex={i}>…</TableRow>
|
|
18
|
+
* ))}
|
|
19
|
+
*/
|
|
20
|
+
staggerIndex?: number;
|
|
21
|
+
/** Custom className applied to the underlying `<tr>` element. */
|
|
22
|
+
className?: string;
|
|
23
|
+
/** Inline style applied to the underlying `<tr>` element. */
|
|
24
|
+
style?: React.CSSProperties;
|
|
5
25
|
children: ReactNode | ReactNode[];
|
|
6
26
|
}
|
|
7
|
-
export declare const TableRow: React.ForwardRefExoticComponent<TableRowProps & React.RefAttributes<
|
|
27
|
+
export declare const TableRow: React.ForwardRefExoticComponent<TableRowProps & React.RefAttributes<HTMLTableRowElement>>;
|
|
8
28
|
//# sourceMappingURL=TableRow.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TableRow.d.ts","sourceRoot":"","sources":["../../../lib/components/Table/TableRow.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"TableRow.d.ts","sourceRoot":"","sources":["../../../lib/components/Table/TableRow.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAc,iBAAiB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AASjE,MAAM,WAAW,aAAa;IAC7B,+DAA+D;IAC/D,OAAO,CAAC,EAAE,iBAAiB,CAAC,mBAAmB,CAAC,CAAC;IAEjD;;;;;;;;;;;;;OAaG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB,iEAAiE;IACjE,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,6DAA6D;IAC7D,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAE5B,QAAQ,EAAE,SAAS,GAAG,SAAS,EAAE,CAAC;CAClC;AAED,eAAO,MAAM,QAAQ,2FA4BpB,CAAC"}
|
|
@@ -1,15 +1,35 @@
|
|
|
1
|
+
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
|
|
2
|
+
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
3
|
+
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
4
|
+
import { assignInlineVars } from '@vanilla-extract/dynamic';
|
|
5
|
+
import clsx from 'clsx';
|
|
1
6
|
import * as React from 'react';
|
|
2
7
|
import { forwardRef } from 'react';
|
|
3
8
|
import { Box } from "../Box/Box.js";
|
|
9
|
+
import { rowEntering, staggerIndex as staggerIndexVar } from "./TableRow.css.js";
|
|
4
10
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
5
11
|
export const TableRow = /*#__PURE__*/forwardRef(({
|
|
6
12
|
children,
|
|
7
|
-
onClick
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
13
|
+
onClick,
|
|
14
|
+
className,
|
|
15
|
+
style,
|
|
16
|
+
staggerIndex
|
|
17
|
+
}, ref) => {
|
|
18
|
+
const shouldAnimate = typeof staggerIndex === 'number';
|
|
19
|
+
const mergedStyle = shouldAnimate ? _objectSpread(_objectSpread({}, style), assignInlineVars({
|
|
20
|
+
[staggerIndexVar]: String(staggerIndex)
|
|
21
|
+
})) : style;
|
|
22
|
+
return /*#__PURE__*/_jsx(Box, {
|
|
23
|
+
as: "tr",
|
|
24
|
+
ref: ref,
|
|
25
|
+
display: "contents",
|
|
26
|
+
role: "row",
|
|
27
|
+
onClick: onClick,
|
|
28
|
+
className: clsx(className, {
|
|
29
|
+
[rowEntering]: shouldAnimate
|
|
30
|
+
}),
|
|
31
|
+
style: mergedStyle,
|
|
32
|
+
children: children
|
|
33
|
+
});
|
|
34
|
+
});
|
|
15
35
|
TableRow.displayName = 'TableRow';
|
|
@@ -3,5 +3,5 @@ import { ReactNode } from 'react';
|
|
|
3
3
|
export interface TableRowGroupProps {
|
|
4
4
|
children: ReactNode | ReactNode[];
|
|
5
5
|
}
|
|
6
|
-
export declare const TableRowGroup: React.ForwardRefExoticComponent<TableRowGroupProps & React.RefAttributes<
|
|
6
|
+
export declare const TableRowGroup: React.ForwardRefExoticComponent<TableRowGroupProps & React.RefAttributes<HTMLTableSectionElement>>;
|
|
7
7
|
//# sourceMappingURL=TableRowGroup.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TableRowGroup.d.ts","sourceRoot":"","sources":["../../../lib/components/Table/TableRowGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAc,SAAS,EAAE,MAAM,OAAO,CAAC;AAI9C,MAAM,WAAW,kBAAkB;IAClC,QAAQ,EAAE,SAAS,GAAG,SAAS,EAAE,CAAC;CAClC;AAED,eAAO,MAAM,aAAa,
|
|
1
|
+
{"version":3,"file":"TableRowGroup.d.ts","sourceRoot":"","sources":["../../../lib/components/Table/TableRowGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAc,SAAS,EAAE,MAAM,OAAO,CAAC;AAI9C,MAAM,WAAW,kBAAkB;IAClC,QAAQ,EAAE,SAAS,GAAG,SAAS,EAAE,CAAC;CAClC;AAED,eAAO,MAAM,aAAa,oGAOxB,CAAC"}
|
|
@@ -3,7 +3,7 @@ export { Alert } from './Alert';
|
|
|
3
3
|
export { Anchor } from './Anchor';
|
|
4
4
|
export { AutoSuggest, type AutoSuggestValue, type AutoSuggestItemRenderer, } from './AutoSuggest';
|
|
5
5
|
export { Badge } from './Badge';
|
|
6
|
-
export { Box, type BoxProps, useBox, type UseBoxProps
|
|
6
|
+
export { Box, type BoxProps, useBox, type UseBoxProps } from './Box';
|
|
7
7
|
export { BulletList, Bullet } from './BulletList';
|
|
8
8
|
export { BulletText } from './BulletText';
|
|
9
9
|
export { Button } from './Button';
|
|
@@ -14,6 +14,7 @@ export { Columns, Column } from './Columns';
|
|
|
14
14
|
export { DateInput } from './DateInput';
|
|
15
15
|
export { DatePicker } from './DatePicker';
|
|
16
16
|
export { DateTimeField, type DateTimeFieldProps, DateField, type DateFieldProps, TimeField, type TimeFieldProps, type CommonSelectorProps, } from './DateTimeField';
|
|
17
|
+
export { DataTable, type DataTableProps } from './DataTable';
|
|
17
18
|
export { DividerLine } from './DividerLine';
|
|
18
19
|
export { DropDown, DropDownOption } from './DropDown';
|
|
19
20
|
export { EditableText } from './EditableText';
|
|
@@ -50,7 +51,7 @@ export { ScrollPane } from './ScrollPane';
|
|
|
50
51
|
export { SearchBar, type SearchBarProps } from './SearchBar';
|
|
51
52
|
export { Section } from './Section';
|
|
52
53
|
export { SelectInput } from './SelectInput';
|
|
53
|
-
export { SimplePagination, EPageChangeDirection
|
|
54
|
+
export { SimplePagination, EPageChangeDirection } from './SimplePagination';
|
|
54
55
|
export { Slider, type SliderProps } from './Slider';
|
|
55
56
|
export { SliderProgress } from './SliderProgress';
|
|
56
57
|
export { Stack } from './Stack';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../lib/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EACN,WAAW,EACX,KAAK,gBAAgB,EACrB,KAAK,uBAAuB,GAC5B,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../lib/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EACN,WAAW,EACX,KAAK,gBAAgB,EACrB,KAAK,uBAAuB,GAC5B,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAE,GAAG,EAAE,KAAK,QAAQ,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,MAAM,OAAO,CAAC;AACrE,OAAO,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AAClD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,MAAM,YAAY,CAAC;AAC1D,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AAC5C,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EACN,aAAa,EACb,KAAK,kBAAkB,EACvB,SAAS,EACT,KAAK,cAAc,EACnB,SAAS,EACT,KAAK,cAAc,EACnB,KAAK,mBAAmB,GACxB,MAAM,iBAAiB,CAAC;AACzB,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,aAAa,CAAC;AAC7D,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AACtD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EACN,UAAU,EACV,KAAK,wBAAwB,EAC7B,SAAS,EACT,KAAK,uBAAuB,EAC5B,KAAK,kBAAkB,EACvB,MAAM,EACN,KAAK,GACL,MAAM,QAAQ,CAAC;AAChB,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EACN,sBAAsB,EACtB,yBAAyB,GACzB,MAAM,0BAA0B,CAAC;AAClC,OAAO,EAAE,IAAI,EAAE,KAAK,MAAM,EAAE,KAAK,SAAS,EAAE,MAAM,QAAQ,CAAC;AAC3D,OAAO,EAAE,KAAK,EAAE,mBAAmB,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AACrE,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,uBAAuB,EAAE,MAAM,2BAA2B,CAAC;AACpE,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EACN,gBAAgB,EAChB,KAAK,uBAAuB,EAC5B,KAAK,qBAAqB,GAC1B,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAC3C,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EACN,UAAU,EACV,KAAK,eAAe,EACpB,KAAK,UAAU,GACf,MAAM,cAAc,CAAC;AACtB,OAAO,EACN,UAAU,EACV,iBAAiB,EACjB,KAAK,eAAe,GACpB,MAAM,cAAc,CAAC;AACtB,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,eAAe,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC/D,OAAO,EACN,iBAAiB,EACjB,gBAAgB,EAChB,QAAQ,EACR,aAAa,EACb,qBAAqB,EACrB,qBAAqB,EACrB,aAAa,GACb,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,oBAAoB,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAChE,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAC5C,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,aAAa,CAAC;AAC7D,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,gBAAgB,EAAE,oBAAoB,EAAE,MAAM,oBAAoB,CAAC;AAC5E,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,MAAM,UAAU,CAAC;AACpD,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAE,aAAa,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AACpE,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAC3D,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EACN,KAAK,EACL,SAAS,EACT,aAAa,EACb,QAAQ,EACR,aAAa,GACb,MAAM,SAAS,CAAC;AACjB,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAC/D,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,WAAW,CAAC;AACpD,OAAO,EACN,aAAa,EACb,YAAY,EACZ,KAAK,kBAAkB,GACvB,MAAM,iBAAiB,CAAC;AACzB,OAAO,EACN,OAAO,EACP,KAAK,YAAY,EACjB,UAAU,EACV,KAAK,eAAe,EACpB,KAAK,WAAW,GAChB,MAAM,WAAW,CAAC;AACnB,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC"}
|
package/dist/components/index.js
CHANGED
|
@@ -14,6 +14,7 @@ export { Columns, Column } from "./Columns/index.js";
|
|
|
14
14
|
export { DateInput } from "./DateInput/index.js";
|
|
15
15
|
export { DatePicker } from "./DatePicker/index.js";
|
|
16
16
|
export { DateTimeField, DateField, TimeField } from "./DateTimeField/index.js";
|
|
17
|
+
export { DataTable } from "./DataTable/index.js";
|
|
17
18
|
export { DividerLine } from "./DividerLine/index.js";
|
|
18
19
|
export { DropDown, DropDownOption } from "./DropDown/index.js";
|
|
19
20
|
export { EditableText } from "./EditableText/index.js";
|
|
@@ -50,12 +50,12 @@ export declare const sprinkles: ((props: {
|
|
|
50
50
|
borderStyleRight?: "none" | "solid" | undefined;
|
|
51
51
|
borderStyleTop?: "none" | "solid" | undefined;
|
|
52
52
|
} & {
|
|
53
|
-
display?: ("none" | "flex" | "grid" | "block" | "
|
|
54
|
-
mobile?: "none" | "flex" | "grid" | "block" | "
|
|
55
|
-
tablet?: "none" | "flex" | "grid" | "block" | "
|
|
56
|
-
desktop?: "none" | "flex" | "grid" | "block" | "
|
|
57
|
-
largeDesktop?: "none" | "flex" | "grid" | "block" | "
|
|
58
|
-
} | undefined) | import("@vanilla-extract/sprinkles").ResponsiveArray<1 | 2 | 3 | 4, "none" | "flex" | "grid" | "block" | "
|
|
53
|
+
display?: ("none" | "flex" | "grid" | "block" | "inline" | "inline-block" | "inline-flex" | "contents" | "inlineBlock" | "inlineFlex" | {
|
|
54
|
+
mobile?: "none" | "flex" | "grid" | "block" | "inline" | "inline-block" | "inline-flex" | "contents" | "inlineBlock" | "inlineFlex" | undefined;
|
|
55
|
+
tablet?: "none" | "flex" | "grid" | "block" | "inline" | "inline-block" | "inline-flex" | "contents" | "inlineBlock" | "inlineFlex" | undefined;
|
|
56
|
+
desktop?: "none" | "flex" | "grid" | "block" | "inline" | "inline-block" | "inline-flex" | "contents" | "inlineBlock" | "inlineFlex" | undefined;
|
|
57
|
+
largeDesktop?: "none" | "flex" | "grid" | "block" | "inline" | "inline-block" | "inline-flex" | "contents" | "inlineBlock" | "inlineFlex" | undefined;
|
|
58
|
+
} | undefined) | import("@vanilla-extract/sprinkles").ResponsiveArray<1 | 2 | 3 | 4, "none" | "flex" | "grid" | "block" | "inline" | "inline-block" | "inline-flex" | "contents" | "inlineBlock" | "inlineFlex" | null>;
|
|
59
59
|
overflow?: ("auto" | "hidden" | "visible" | {
|
|
60
60
|
mobile?: "auto" | "hidden" | "visible" | undefined;
|
|
61
61
|
tablet?: "auto" | "hidden" | "visible" | undefined;
|
|
@@ -477,7 +477,7 @@ export declare const sprinkles: ((props: {
|
|
|
477
477
|
largeDesktop?: "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "none" | "auto" | undefined;
|
|
478
478
|
} | undefined) | import("@vanilla-extract/sprinkles").ResponsiveArray<1 | 2 | 3 | 4, "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "none" | "auto" | null>;
|
|
479
479
|
}) => string) & {
|
|
480
|
-
properties: Set<"colour" | "backgroundColour" | "color" | "width" | "size" | "fontSize" | "lineHeight" | "fontWeight" | "opacity" | "alignContent" | "alignItems" | "alignSelf" | "backgroundColor" | "borderBottomColor" | "borderBottomStyle" | "borderBottomWidth" | "borderLeftColor" | "borderLeftStyle" | "borderLeftWidth" | "borderRightColor" | "borderRightStyle" | "borderRightWidth" | "borderTopColor" | "borderTopStyle" | "borderTopWidth" | "boxShadow" | "columnGap" | "display" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "height" | "justifyContent" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxWidth" | "minWidth" | "order" | "overflowX" | "overflowY" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "pointerEvents" | "position" | "rowGap" | "textAlign" | "textTransform" | "
|
|
480
|
+
properties: Set<"colour" | "backgroundColour" | "color" | "width" | "size" | "fontSize" | "lineHeight" | "fontWeight" | "opacity" | "alignContent" | "alignItems" | "alignSelf" | "backgroundColor" | "borderBottomColor" | "borderBottomStyle" | "borderBottomWidth" | "borderLeftColor" | "borderLeftStyle" | "borderLeftWidth" | "borderRightColor" | "borderRightStyle" | "borderRightWidth" | "borderTopColor" | "borderTopStyle" | "borderTopWidth" | "boxShadow" | "columnGap" | "display" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "height" | "justifyContent" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxWidth" | "minWidth" | "order" | "overflowX" | "overflowY" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "pointerEvents" | "position" | "rowGap" | "textAlign" | "textTransform" | "userSelect" | "wordBreak" | "borderColor" | "borderRadius" | "borderStyle" | "borderWidth" | "gap" | "margin" | "overflow" | "padding" | "placeItems" | "textWrap" | "text" | "p" | "borderBottomColour" | "borderLeftColour" | "borderRightColour" | "borderTopColour" | "useVar" | "bg" | "fg" | "borderColorX" | "borderColorY" | "borderColour" | "borderColourX" | "borderColourY" | "borderStyleBottom" | "borderStyleLeft" | "borderStyleRight" | "borderStyleTop" | "gridColumns" | "borderWidthX" | "borderWidthY" | "borderWidthBottom" | "borderWidthLeft" | "borderWidthRight" | "borderWidthTop" | "paddingX" | "px" | "paddingY" | "py" | "pt" | "pr" | "pb" | "pl" | "m" | "marginX" | "mx" | "marginY" | "my" | "mt" | "mr" | "mb" | "ml">;
|
|
481
481
|
};
|
|
482
482
|
export type Sprinkles = Parameters<typeof sprinkles>[0];
|
|
483
483
|
/**
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@autoguru/overdrive",
|
|
3
|
-
"version": "4.
|
|
3
|
+
"version": "4.55.0",
|
|
4
4
|
"description": "Overdrive is a product component library, and design system for AutoGuru.",
|
|
5
5
|
"types": "dist/index.d.ts",
|
|
6
6
|
"main": "dist/index.js",
|
|
@@ -123,7 +123,7 @@
|
|
|
123
123
|
"@antebudimir/eslint-plugin-vanilla-extract": "^1.12.0",
|
|
124
124
|
"@autoguru/babel-preset": "3.2.0",
|
|
125
125
|
"@autoguru/eslint-plugin": "2.0.0",
|
|
126
|
-
"@autoguru/icons": "1.8.
|
|
126
|
+
"@autoguru/icons": "1.8.22",
|
|
127
127
|
"@autoguru/tsconfig": "1.3.1",
|
|
128
128
|
"@autoguru/utilities": "^1.3.3",
|
|
129
129
|
"@babel/cli": "7.28.3",
|
|
@@ -144,7 +144,7 @@
|
|
|
144
144
|
"@babel/runtime-corejs3": "7.28.4",
|
|
145
145
|
"@changesets/cli": "2.29.7",
|
|
146
146
|
"@chromatic-com/storybook": "4.1.1",
|
|
147
|
-
"@internationalized/date": "3.
|
|
147
|
+
"@internationalized/date": "3.12.1",
|
|
148
148
|
"@octokit/rest": "22.0.0",
|
|
149
149
|
"@popperjs/core": "2.11.8",
|
|
150
150
|
"@react-stately/toggle": "3.9.2",
|
|
@@ -209,7 +209,7 @@
|
|
|
209
209
|
"react-intersection-observer": "9.16.0",
|
|
210
210
|
"react-keyed-flatten-children": "5.0.1",
|
|
211
211
|
"react-markdown": "^9.0.0",
|
|
212
|
-
"react-stately": "3.
|
|
212
|
+
"react-stately": "3.46.0",
|
|
213
213
|
"react-swipeable": "7.0.2",
|
|
214
214
|
"remark-gfm": "^4.0.0",
|
|
215
215
|
"rollup-plugin-visualizer": "6.0.5",
|
|
@@ -252,7 +252,7 @@
|
|
|
252
252
|
}
|
|
253
253
|
},
|
|
254
254
|
"volta": {
|
|
255
|
-
"node": "22.
|
|
255
|
+
"node": "22.22.2",
|
|
256
256
|
"yarn": "4.10.3"
|
|
257
257
|
},
|
|
258
258
|
"packageManager": "yarn@4.10.3"
|