@coveord/plasma-mantine 59.7.0 → 59.7.2
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/.turbo/turbo-build.log +3 -3
- package/.turbo/turbo-test.log +88 -94
- package/dist/.tsbuildinfo +1 -1
- package/dist/cjs/components/DateRangePicker/DateRangePicker.d.ts +1 -1
- package/dist/cjs/components/DateRangePicker/DateRangePicker.d.ts.map +1 -1
- package/dist/cjs/components/DateRangePicker/DateRangePicker.js +2 -2
- package/dist/cjs/components/DateRangePicker/DateRangePicker.js.map +1 -1
- package/dist/cjs/components/DateRangePicker/EditableDateRangePicker.d.ts +1 -1
- package/dist/cjs/components/DateRangePicker/EditableDateRangePicker.d.ts.map +1 -1
- package/dist/cjs/components/DateRangePicker/EditableDateRangePicker.js.map +1 -1
- package/dist/cjs/components/RadioCard/RadioCard.js +1 -1
- package/dist/cjs/components/RadioCard/RadioCard.js.map +1 -1
- package/dist/cjs/components/Table/Table.d.ts +46 -0
- package/dist/cjs/components/Table/Table.d.ts.map +1 -1
- package/dist/cjs/components/Table/Table.js +48 -17
- package/dist/cjs/components/Table/Table.js.map +1 -1
- package/dist/cjs/components/Table/table-columns-selector/TableColumnsSelector.js +1 -1
- package/dist/cjs/components/Table/table-columns-selector/TableColumnsSelector.js.map +1 -1
- package/dist/cjs/theme/Plasmantine.d.ts.map +1 -1
- package/dist/cjs/theme/Plasmantine.js +24 -4
- package/dist/cjs/theme/Plasmantine.js.map +1 -1
- package/dist/cjs/theme/Theme.d.ts.map +1 -1
- package/dist/cjs/theme/Theme.js +1 -9
- package/dist/cjs/theme/Theme.js.map +1 -1
- package/dist/esm/components/DateRangePicker/DateRangePicker.d.ts +1 -1
- package/dist/esm/components/DateRangePicker/DateRangePicker.d.ts.map +1 -1
- package/dist/esm/components/DateRangePicker/DateRangePicker.js +2 -2
- package/dist/esm/components/DateRangePicker/DateRangePicker.js.map +1 -1
- package/dist/esm/components/DateRangePicker/EditableDateRangePicker.d.ts +1 -1
- package/dist/esm/components/DateRangePicker/EditableDateRangePicker.d.ts.map +1 -1
- package/dist/esm/components/DateRangePicker/EditableDateRangePicker.js.map +1 -1
- package/dist/esm/components/RadioCard/RadioCard.js +1 -1
- package/dist/esm/components/RadioCard/RadioCard.js.map +1 -1
- package/dist/esm/components/Table/Table.d.ts +46 -0
- package/dist/esm/components/Table/Table.d.ts.map +1 -1
- package/dist/esm/components/Table/Table.js +48 -17
- package/dist/esm/components/Table/Table.js.map +1 -1
- package/dist/esm/components/Table/table-columns-selector/TableColumnsSelector.js +1 -1
- package/dist/esm/components/Table/table-columns-selector/TableColumnsSelector.js.map +1 -1
- package/dist/esm/theme/Plasmantine.d.ts.map +1 -1
- package/dist/esm/theme/Plasmantine.js +22 -3
- package/dist/esm/theme/Plasmantine.js.map +1 -1
- package/dist/esm/theme/Theme.d.ts.map +1 -1
- package/dist/esm/theme/Theme.js +1 -9
- package/dist/esm/theme/Theme.js.map +1 -1
- package/package.json +1 -1
- package/src/__tests__/Utils.tsx +1 -17
- package/src/components/DateRangePicker/DateRangePicker.tsx +2 -2
- package/src/components/DateRangePicker/EditableDateRangePicker.tsx +1 -1
- package/src/components/DateRangePicker/__tests__/DateRangePicker.spec.tsx +2 -2
- package/src/components/DateRangePicker/__tests__/DateRangePickerPopoverCalendar.spec.tsx +2 -2
- package/src/components/RadioCard/RadioCard.tsx +1 -1
- package/src/components/Table/Table.tsx +54 -6
- package/src/components/Table/__tests__/Table.spec.tsx +36 -0
- package/src/components/Table/table-columns-selector/TableColumnsSelector.tsx +1 -1
- package/src/theme/Plasmantine.tsx +21 -3
- package/src/theme/Theme.tsx +0 -4
- package/src/theme/__tests__/Plasmantine.spec.tsx +48 -0
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { BoxProps, Factory, PopoverProps, StylesApiProps } from '@mantine/core';
|
|
2
2
|
import { DatesRangeValue } from '@mantine/dates';
|
|
3
3
|
import dayjs from 'dayjs';
|
|
4
|
-
import { DateRangePickerInlineCalendarProps } from './DateRangePickerInlineCalendar';
|
|
4
|
+
import { DateRangePickerInlineCalendarProps } from './DateRangePickerInlineCalendar.js';
|
|
5
5
|
export type DateRangePickerStylesNames = 'input';
|
|
6
6
|
export interface DateRangePickerProps extends BoxProps, Pick<DateRangePickerInlineCalendarProps, 'presets' | 'rangeCalendarProps' | 'startProps' | 'endProps'>, Pick<PopoverProps, 'opened' | 'defaultOpened'>, StylesApiProps<DateRangePickerFactory> {
|
|
7
7
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DateRangePicker.d.ts","sourceRoot":"","sources":["../../../../src/components/DateRangePicker/DateRangePicker.tsx"],"names":[],"mappings":"AACA,OAAO,EACH,QAAQ,EAER,OAAO,EAGP,YAAY,EACZ,cAAc,EAGjB,MAAM,eAAe,CAAC;AACvB,OAAO,EAAC,eAAe,EAAkB,MAAM,gBAAgB,CAAC;AAEhE,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAgC,kCAAkC,EAAC,MAAM,
|
|
1
|
+
{"version":3,"file":"DateRangePicker.d.ts","sourceRoot":"","sources":["../../../../src/components/DateRangePicker/DateRangePicker.tsx"],"names":[],"mappings":"AACA,OAAO,EACH,QAAQ,EAER,OAAO,EAGP,YAAY,EACZ,cAAc,EAGjB,MAAM,eAAe,CAAC;AACvB,OAAO,EAAC,eAAe,EAAkB,MAAM,gBAAgB,CAAC;AAEhE,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAgC,kCAAkC,EAAC,MAAM,oCAAoC,CAAC;AAgBrH,MAAM,MAAM,0BAA0B,GAAG,OAAO,CAAC;AAEjD,MAAM,WAAW,oBACb,SACI,QAAQ,EACR,IAAI,CAAC,kCAAkC,EAAE,SAAS,GAAG,oBAAoB,GAAG,YAAY,GAAG,UAAU,CAAC,EACtG,IAAI,CAAC,YAAY,EAAE,QAAQ,GAAG,eAAe,CAAC,EAC9C,cAAc,CAAC,sBAAsB,CAAC;IAC1C;;OAEG;IACH,OAAO,CAAC,IAAI,IAAI,CAAC;IACjB;;OAEG;IACH,QAAQ,CAAC,IAAI,IAAI,CAAC;IAClB;;OAEG;IACH,QAAQ,CAAC,CAAC,KAAK,EAAE,eAAe,CAAC,MAAM,CAAC,GAAG,IAAI,CAAC;IAChD;;OAEG;IACH,cAAc,CAAC,CAAC,MAAM,EAAE,OAAO,GAAG,IAAI,CAAC;IACvC;;;;OAIG;IACH,SAAS,CAAC,EAAE,CAAC,IAAI,EAAE,KAAK,CAAC,UAAU,KAAK,MAAM,CAAC;IAC/C;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,YAAY,CAAC,EAAE,eAAe,CAAC,MAAM,CAAC,CAAC;IACvC;;OAEG;IACH,KAAK,CAAC,EAAE,eAAe,CAAC,MAAM,CAAC,CAAC;IAChC;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,MAAM,sBAAsB,GAAG,OAAO,CAAC;IACzC,KAAK,EAAE,oBAAoB,CAAC;IAC5B,GAAG,EAAE,iBAAiB,CAAC;IACvB,WAAW,EAAE,0BAA0B,CAAC;CAC3C,CAAC,CAAC;AAOH,eAAO,MAAM,eAAe;WAVjB,oBAAoB;SACtB,iBAAiB;iBACT,0BAA0B;EA+GzC,CAAC"}
|
|
@@ -18,9 +18,9 @@ var _plasmareacticons = require("@coveord/plasma-react-icons");
|
|
|
18
18
|
var _core = require("@mantine/core");
|
|
19
19
|
var _hooks = require("@mantine/hooks");
|
|
20
20
|
var _dayjs = /*#__PURE__*/ _interop_require_default._(require("dayjs"));
|
|
21
|
-
var _useurlsyncedstate = require("../../hooks/use-url-synced-state");
|
|
21
|
+
var _useurlsyncedstate = require("../../hooks/use-url-synced-state.js");
|
|
22
22
|
var _DateRangemodulecss = /*#__PURE__*/ _interop_require_default._(require("./DateRange.module.css"));
|
|
23
|
-
var _DateRangePickerInlineCalendar = require("./DateRangePickerInlineCalendar");
|
|
23
|
+
var _DateRangePickerInlineCalendar = require("./DateRangePickerInlineCalendar.js");
|
|
24
24
|
var serialization = function serialization(input) {
|
|
25
25
|
return Object.freeze(input);
|
|
26
26
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/DateRangePicker/DateRangePicker.tsx"],"sourcesContent":["import {IconCalendar} from '@coveord/plasma-react-icons';\nimport {\n BoxProps,\n factory,\n Factory,\n InputBase,\n Popover,\n PopoverProps,\n StylesApiProps,\n useProps,\n useStyles,\n} from '@mantine/core';\nimport {DatesRangeValue, DateStringValue} from '@mantine/dates';\nimport {useUncontrolled} from '@mantine/hooks';\nimport dayjs from 'dayjs';\nimport {useUrlSyncedState, UseUrlSyncedStateOptions} from '../../hooks/use-url-synced-state';\nimport classes from './DateRange.module.css';\nimport {DateRangePickerInlineCalendar, DateRangePickerInlineCalendarProps} from './DateRangePickerInlineCalendar';\n\nconst serialization = (input: Pick<UseUrlSyncedStateOptions<DatesRangeValue<string>>, 'serializer' | 'deserializer'>) =>\n Object.freeze(input);\n\nconst DATE_RANGE_SERIALIZATION = serialization({\n serializer: ([from, to]) => [\n ['from', from ? new Date(from).toISOString() : '', true],\n ['to', to ? new Date(to).toISOString() : '', true],\n ],\n deserializer: (params, initial) => [\n params.get('from') ? params.get('from') : initial[0],\n params.get('to') ? params.get('to') : initial[1],\n ],\n});\n\nexport type DateRangePickerStylesNames = 'input';\n\nexport interface DateRangePickerProps\n extends\n BoxProps,\n Pick<DateRangePickerInlineCalendarProps, 'presets' | 'rangeCalendarProps' | 'startProps' | 'endProps'>,\n Pick<PopoverProps, 'opened' | 'defaultOpened'>,\n StylesApiProps<DateRangePickerFactory> {\n /**\n * Called when the target input is clicked\n */\n onClick?(): void;\n /**\n * Function called when the cancel button is clicked.\n */\n onCancel?(): void;\n /**\n * Function called when the date range value changes.\n */\n onChange?(dates: DatesRangeValue<string>): void;\n /**\n * Called when the popover opened state changes.\n */\n onOpenedChange?(opened: boolean): void;\n /**\n * Optional formatter function to format the date value.\n * Receives the date prop and should return a string.\n * @default (time) => dayjs(time).format('MMM D, YYYY')\n */\n formatter?: (time: dayjs.ConfigType) => string;\n /**\n * The placeholder label to display when no date range is selected.\n *\n * @default \"Select date range\"\n */\n placeholder?: string;\n /**\n * Default value for uncontrolled input\n */\n defaultValue?: DatesRangeValue<string>;\n /**\n * Value for controlled input\n */\n value?: DatesRangeValue<string>;\n /**\n * Sync the selected dates to URL query parameters\n */\n syncWithUrl?: boolean;\n /**\n * Error message to display.\n */\n error?: string;\n}\n\nexport type DateRangePickerFactory = Factory<{\n props: DateRangePickerProps;\n ref: HTMLButtonElement;\n stylesNames: DateRangePickerStylesNames;\n}>;\n\nconst defaultProps: Partial<DateRangePickerProps> = {\n placeholder: 'Select date range',\n formatter: (time) => dayjs(time).format('MMM D, YYYY'),\n};\n\nexport const DateRangePicker = factory<DateRangePickerFactory>((props: DateRangePickerProps, ref) => {\n const {\n defaultValue,\n value,\n opened,\n defaultOpened,\n onOpenedChange,\n onClick,\n onCancel,\n onChange,\n presets,\n startProps,\n endProps,\n rangeCalendarProps,\n formatter,\n placeholder,\n syncWithUrl,\n error,\n className,\n classNames,\n style,\n styles,\n vars,\n unstyled,\n ...others\n } = useProps('PlasmaDateRangePicker', defaultProps as Partial<DateRangePickerProps>, props);\n\n const getStyles = useStyles<DateRangePickerFactory>({\n name: 'DateRangePicker',\n classes,\n props,\n className,\n classNames,\n style,\n styles,\n unstyled,\n vars,\n });\n const stylesApiProps = {classNames, styles};\n\n const [_opened, setOpened] = useUncontrolled({\n value: opened,\n defaultValue: defaultOpened,\n finalValue: false,\n onChange: onOpenedChange,\n });\n\n const [dateRange, setDateRange] = useUrlSyncedState<DatesRangeValue<string>>({\n ...DATE_RANGE_SERIALIZATION,\n initialState: defaultValue !== undefined ? defaultValue : [null, null],\n sync: !!syncWithUrl,\n });\n\n const handleApply = (dates: DatesRangeValue<string>) => {\n if (value === undefined) {\n setDateRange(dates);\n }\n onChange?.(dates);\n setOpened(false);\n };\n\n const handleClick = () => {\n setOpened(true);\n onClick?.();\n };\n\n const handleCancel = () => {\n setOpened(false);\n onCancel?.();\n };\n\n const _value = value ?? dateRange;\n const formattedRange = `${formatter(_value[0])} - ${formatter(_value[1])}`;\n const dateRangeInitialized = _value.every((date: DateStringValue) => typeof date === 'string' && date !== '');\n\n return (\n <Popover opened={_opened} onChange={setOpened}>\n <Popover.Target>\n <InputBase\n ref={ref}\n component=\"button\"\n leftSection={<IconCalendar height={16} />}\n onClick={handleClick}\n error={error}\n {...getStyles('input', {className, style, ...stylesApiProps})}\n {...others}\n >\n {dateRangeInitialized ? formattedRange : placeholder}\n </InputBase>\n </Popover.Target>\n <Popover.Dropdown p={0}>\n <DateRangePickerInlineCalendar\n initialRange={_value}\n onApply={handleApply}\n onCancel={handleCancel}\n presets={presets}\n rangeCalendarProps={rangeCalendarProps}\n startProps={startProps}\n endProps={endProps}\n />\n </Popover.Dropdown>\n </Popover>\n );\n});\n"],"names":["DateRangePicker","serialization","input","Object","freeze","DATE_RANGE_SERIALIZATION","serializer","from","to","Date","toISOString","deserializer","params","initial","get","defaultProps","placeholder","formatter","time","dayjs","format","factory","props","ref","useProps","defaultValue","value","opened","defaultOpened","onOpenedChange","onClick","onCancel","onChange","presets","startProps","endProps","rangeCalendarProps","syncWithUrl","error","className","classNames","style","styles","vars","unstyled","others","getStyles","useStyles","name","classes","stylesApiProps","useUncontrolled","finalValue","_opened","setOpened","useUrlSyncedState","initialState","undefined","sync","dateRange","setDateRange","handleApply","dates","handleClick","handleCancel","_value","formattedRange","dateRangeInitialized","every","date","Popover","Target","InputBase","component","leftSection","IconCalendar","height","Dropdown","p","DateRangePickerInlineCalendar","initialRange","onApply"],"mappings":"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"}
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/DateRangePicker/DateRangePicker.tsx"],"sourcesContent":["import {IconCalendar} from '@coveord/plasma-react-icons';\nimport {\n BoxProps,\n factory,\n Factory,\n InputBase,\n Popover,\n PopoverProps,\n StylesApiProps,\n useProps,\n useStyles,\n} from '@mantine/core';\nimport {DatesRangeValue, DateStringValue} from '@mantine/dates';\nimport {useUncontrolled} from '@mantine/hooks';\nimport dayjs from 'dayjs';\nimport {useUrlSyncedState, UseUrlSyncedStateOptions} from '../../hooks/use-url-synced-state.js';\nimport classes from './DateRange.module.css';\nimport {DateRangePickerInlineCalendar, DateRangePickerInlineCalendarProps} from './DateRangePickerInlineCalendar.js';\n\nconst serialization = (input: Pick<UseUrlSyncedStateOptions<DatesRangeValue<string>>, 'serializer' | 'deserializer'>) =>\n Object.freeze(input);\n\nconst DATE_RANGE_SERIALIZATION = serialization({\n serializer: ([from, to]) => [\n ['from', from ? new Date(from).toISOString() : '', true],\n ['to', to ? new Date(to).toISOString() : '', true],\n ],\n deserializer: (params, initial) => [\n params.get('from') ? params.get('from') : initial[0],\n params.get('to') ? params.get('to') : initial[1],\n ],\n});\n\nexport type DateRangePickerStylesNames = 'input';\n\nexport interface DateRangePickerProps\n extends\n BoxProps,\n Pick<DateRangePickerInlineCalendarProps, 'presets' | 'rangeCalendarProps' | 'startProps' | 'endProps'>,\n Pick<PopoverProps, 'opened' | 'defaultOpened'>,\n StylesApiProps<DateRangePickerFactory> {\n /**\n * Called when the target input is clicked\n */\n onClick?(): void;\n /**\n * Function called when the cancel button is clicked.\n */\n onCancel?(): void;\n /**\n * Function called when the date range value changes.\n */\n onChange?(dates: DatesRangeValue<string>): void;\n /**\n * Called when the popover opened state changes.\n */\n onOpenedChange?(opened: boolean): void;\n /**\n * Optional formatter function to format the date value.\n * Receives the date prop and should return a string.\n * @default (time) => dayjs(time).format('MMM D, YYYY')\n */\n formatter?: (time: dayjs.ConfigType) => string;\n /**\n * The placeholder label to display when no date range is selected.\n *\n * @default \"Select date range\"\n */\n placeholder?: string;\n /**\n * Default value for uncontrolled input\n */\n defaultValue?: DatesRangeValue<string>;\n /**\n * Value for controlled input\n */\n value?: DatesRangeValue<string>;\n /**\n * Sync the selected dates to URL query parameters\n */\n syncWithUrl?: boolean;\n /**\n * Error message to display.\n */\n error?: string;\n}\n\nexport type DateRangePickerFactory = Factory<{\n props: DateRangePickerProps;\n ref: HTMLButtonElement;\n stylesNames: DateRangePickerStylesNames;\n}>;\n\nconst defaultProps: Partial<DateRangePickerProps> = {\n placeholder: 'Select date range',\n formatter: (time) => dayjs(time).format('MMM D, YYYY'),\n};\n\nexport const DateRangePicker = factory<DateRangePickerFactory>((props: DateRangePickerProps, ref) => {\n const {\n defaultValue,\n value,\n opened,\n defaultOpened,\n onOpenedChange,\n onClick,\n onCancel,\n onChange,\n presets,\n startProps,\n endProps,\n rangeCalendarProps,\n formatter,\n placeholder,\n syncWithUrl,\n error,\n className,\n classNames,\n style,\n styles,\n vars,\n unstyled,\n ...others\n } = useProps('PlasmaDateRangePicker', defaultProps as Partial<DateRangePickerProps>, props);\n\n const getStyles = useStyles<DateRangePickerFactory>({\n name: 'DateRangePicker',\n classes,\n props,\n className,\n classNames,\n style,\n styles,\n unstyled,\n vars,\n });\n const stylesApiProps = {classNames, styles};\n\n const [_opened, setOpened] = useUncontrolled({\n value: opened,\n defaultValue: defaultOpened,\n finalValue: false,\n onChange: onOpenedChange,\n });\n\n const [dateRange, setDateRange] = useUrlSyncedState<DatesRangeValue<string>>({\n ...DATE_RANGE_SERIALIZATION,\n initialState: defaultValue !== undefined ? defaultValue : [null, null],\n sync: !!syncWithUrl,\n });\n\n const handleApply = (dates: DatesRangeValue<string>) => {\n if (value === undefined) {\n setDateRange(dates);\n }\n onChange?.(dates);\n setOpened(false);\n };\n\n const handleClick = () => {\n setOpened(true);\n onClick?.();\n };\n\n const handleCancel = () => {\n setOpened(false);\n onCancel?.();\n };\n\n const _value = value ?? dateRange;\n const formattedRange = `${formatter(_value[0])} - ${formatter(_value[1])}`;\n const dateRangeInitialized = _value.every((date: DateStringValue) => typeof date === 'string' && date !== '');\n\n return (\n <Popover opened={_opened} onChange={setOpened}>\n <Popover.Target>\n <InputBase\n ref={ref}\n component=\"button\"\n leftSection={<IconCalendar height={16} />}\n onClick={handleClick}\n error={error}\n {...getStyles('input', {className, style, ...stylesApiProps})}\n {...others}\n >\n {dateRangeInitialized ? formattedRange : placeholder}\n </InputBase>\n </Popover.Target>\n <Popover.Dropdown p={0}>\n <DateRangePickerInlineCalendar\n initialRange={_value}\n onApply={handleApply}\n onCancel={handleCancel}\n presets={presets}\n rangeCalendarProps={rangeCalendarProps}\n startProps={startProps}\n endProps={endProps}\n />\n </Popover.Dropdown>\n </Popover>\n );\n});\n"],"names":["DateRangePicker","serialization","input","Object","freeze","DATE_RANGE_SERIALIZATION","serializer","from","to","Date","toISOString","deserializer","params","initial","get","defaultProps","placeholder","formatter","time","dayjs","format","factory","props","ref","useProps","defaultValue","value","opened","defaultOpened","onOpenedChange","onClick","onCancel","onChange","presets","startProps","endProps","rangeCalendarProps","syncWithUrl","error","className","classNames","style","styles","vars","unstyled","others","getStyles","useStyles","name","classes","stylesApiProps","useUncontrolled","finalValue","_opened","setOpened","useUrlSyncedState","initialState","undefined","sync","dateRange","setDateRange","handleApply","dates","handleClick","handleCancel","_value","formattedRange","dateRangeInitialized","every","date","Popover","Target","InputBase","component","leftSection","IconCalendar","height","Dropdown","p","DateRangePickerInlineCalendar","initialRange","onApply"],"mappings":"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"}
|
|
@@ -13,5 +13,5 @@ export interface EditableDateRangePickerProps {
|
|
|
13
13
|
endProps?: Omit<Partial<DatePickerProps>, 'value' | 'onChange' | 'onFocus'>;
|
|
14
14
|
}
|
|
15
15
|
export declare const EditableDateRangePicker: ({ value, onChange, onFocus, startProps, endProps, }: EditableDateRangePickerProps) => import("react/jsx-runtime").JSX.Element;
|
|
16
|
-
export type { DateRangePickerPreset } from './DateRangePickerPresetSelect';
|
|
16
|
+
export type { DateRangePickerPreset } from './DateRangePickerPresetSelect.js';
|
|
17
17
|
//# sourceMappingURL=EditableDateRangePicker.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"EditableDateRangePicker.d.ts","sourceRoot":"","sources":["../../../../src/components/DateRangePicker/EditableDateRangePicker.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,eAAe,EAAE,eAAe,EAAE,KAAK,eAAe,EAAC,MAAM,gBAAgB,CAAC;AAGjG,MAAM,WAAW,4BAA4B;IACzC,KAAK,EAAE,eAAe,CAAC,eAAe,GAAG,IAAI,CAAC,CAAC;IAC/C,QAAQ,CAAC,CAAC,KAAK,EAAE,eAAe,CAAC,eAAe,CAAC,GAAG,IAAI,GAAG,IAAI,CAAC;IAChE,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;OAEG;IACH,UAAU,CAAC,EAAE,IAAI,CAAC,OAAO,CAAC,eAAe,CAAC,EAAE,OAAO,GAAG,UAAU,GAAG,SAAS,CAAC,CAAC;IAC9E;;OAEG;IACH,QAAQ,CAAC,EAAE,IAAI,CAAC,OAAO,CAAC,eAAe,CAAC,EAAE,OAAO,GAAG,UAAU,GAAG,SAAS,CAAC,CAAC;CAC/E;AAED,eAAO,MAAM,uBAAuB,GAAI,qDAMrC,4BAA4B,4CA8B9B,CAAC;AACF,YAAY,EAAC,qBAAqB,EAAC,MAAM
|
|
1
|
+
{"version":3,"file":"EditableDateRangePicker.d.ts","sourceRoot":"","sources":["../../../../src/components/DateRangePicker/EditableDateRangePicker.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,eAAe,EAAE,eAAe,EAAE,KAAK,eAAe,EAAC,MAAM,gBAAgB,CAAC;AAGjG,MAAM,WAAW,4BAA4B;IACzC,KAAK,EAAE,eAAe,CAAC,eAAe,GAAG,IAAI,CAAC,CAAC;IAC/C,QAAQ,CAAC,CAAC,KAAK,EAAE,eAAe,CAAC,eAAe,CAAC,GAAG,IAAI,GAAG,IAAI,CAAC;IAChE,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;OAEG;IACH,UAAU,CAAC,EAAE,IAAI,CAAC,OAAO,CAAC,eAAe,CAAC,EAAE,OAAO,GAAG,UAAU,GAAG,SAAS,CAAC,CAAC;IAC9E;;OAEG;IACH,QAAQ,CAAC,EAAE,IAAI,CAAC,OAAO,CAAC,eAAe,CAAC,EAAE,OAAO,GAAG,UAAU,GAAG,SAAS,CAAC,CAAC;CAC/E;AAED,eAAO,MAAM,uBAAuB,GAAI,qDAMrC,4BAA4B,4CA8B9B,CAAC;AACF,YAAY,EAAC,qBAAqB,EAAC,MAAM,kCAAkC,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/DateRangePicker/EditableDateRangePicker.tsx"],"sourcesContent":["import {DateInput, DatePickerProps, DateStringValue, type DatesRangeValue} from '@mantine/dates';\nimport dayjs from 'dayjs';\n\nexport interface EditableDateRangePickerProps {\n value: DatesRangeValue<DateStringValue | null>;\n onChange?(value: DatesRangeValue<DateStringValue> | null): void;\n onFocus?: () => void;\n /**\n * Props for the start input\n */\n startProps?: Omit<Partial<DatePickerProps>, 'value' | 'onChange' | 'onFocus'>;\n /**\n * Props for the end input\n */\n endProps?: Omit<Partial<DatePickerProps>, 'value' | 'onChange' | 'onFocus'>;\n}\n\nexport const EditableDateRangePicker = ({\n value,\n onChange,\n onFocus,\n startProps = {},\n endProps = {},\n}: EditableDateRangePickerProps) => {\n const onChangeStart = (date: DateStringValue | null) => {\n onChange?.([dayjs(date).startOf('day').toISOString(), value?.[1]]);\n };\n const onChangeEnd = (date: DateStringValue | null) => {\n onChange?.([value?.[0], dayjs(date).endOf('day').toISOString()]);\n };\n\n return (\n <>\n <DateInput\n clearable={false}\n label=\"Start\"\n value={value?.[0]}\n onChange={onChangeStart}\n onFocus={onFocus}\n popoverProps={{styles: {dropdown: {display: 'none'}}}}\n {...startProps}\n />\n <DateInput\n clearable={false}\n label=\"End\"\n value={value?.[1]}\n onChange={onChangeEnd}\n onFocus={onFocus}\n popoverProps={{styles: {dropdown: {display: 'none'}}}}\n {...endProps}\n />\n </>\n );\n};\nexport type {DateRangePickerPreset} from './DateRangePickerPresetSelect';\n"],"names":["EditableDateRangePicker","value","onChange","onFocus","startProps","endProps","onChangeStart","date","dayjs","startOf","toISOString","onChangeEnd","endOf","DateInput","clearable","label","popoverProps","styles","dropdown","display"],"mappings":";;;;+BAiBaA;;;eAAAA;;;;;;qBAjBmE;8DAC9D;AAgBX,IAAMA,0BAA0B;QACnCC,cAAAA,OACAC,iBAAAA,UACAC,gBAAAA,mCACAC,YAAAA,4CAAa,CAAC,+CACdC,UAAAA,wCAAW,CAAC;IAEZ,IAAMC,gBAAgB,uBAACC;QACnBL,qBAAAA,+BAAAA,SAAW;YAACM,IAAAA,cAAK,EAACD,MAAME,OAAO,CAAC,OAAOC,WAAW;YAAIT,kBAAAA,4BAAAA,KAAO,CAAC,EAAE;SAAC;IACrE;IACA,IAAMU,cAAc,qBAACJ;QACjBL,qBAAAA,+BAAAA,SAAW;YAACD,kBAAAA,4BAAAA,KAAO,CAAC,EAAE;YAAEO,IAAAA,cAAK,EAACD,MAAMK,KAAK,CAAC,OAAOF,WAAW;SAAG;IACnE;IAEA,qBACI;;0BACI,qBAACG,gBAAS;gBACNC,WAAW;gBACXC,OAAM;gBACNd,KAAK,EAAEA,kBAAAA,4BAAAA,KAAO,CAAC,EAAE;gBACjBC,UAAUI;gBACVH,SAASA;gBACTa,cAAc;oBAACC,QAAQ;wBAACC,UAAU;4BAACC,SAAS;wBAAM;oBAAC;gBAAC;eAChDf;0BAER,qBAACS,gBAAS;gBACNC,WAAW;gBACXC,OAAM;gBACNd,KAAK,EAAEA,kBAAAA,4BAAAA,KAAO,CAAC,EAAE;gBACjBC,UAAUS;gBACVR,SAASA;gBACTa,cAAc;oBAACC,QAAQ;wBAACC,UAAU;4BAACC,SAAS;wBAAM;oBAAC;gBAAC;eAChDd;;;AAIpB"}
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/DateRangePicker/EditableDateRangePicker.tsx"],"sourcesContent":["import {DateInput, DatePickerProps, DateStringValue, type DatesRangeValue} from '@mantine/dates';\nimport dayjs from 'dayjs';\n\nexport interface EditableDateRangePickerProps {\n value: DatesRangeValue<DateStringValue | null>;\n onChange?(value: DatesRangeValue<DateStringValue> | null): void;\n onFocus?: () => void;\n /**\n * Props for the start input\n */\n startProps?: Omit<Partial<DatePickerProps>, 'value' | 'onChange' | 'onFocus'>;\n /**\n * Props for the end input\n */\n endProps?: Omit<Partial<DatePickerProps>, 'value' | 'onChange' | 'onFocus'>;\n}\n\nexport const EditableDateRangePicker = ({\n value,\n onChange,\n onFocus,\n startProps = {},\n endProps = {},\n}: EditableDateRangePickerProps) => {\n const onChangeStart = (date: DateStringValue | null) => {\n onChange?.([dayjs(date).startOf('day').toISOString(), value?.[1]]);\n };\n const onChangeEnd = (date: DateStringValue | null) => {\n onChange?.([value?.[0], dayjs(date).endOf('day').toISOString()]);\n };\n\n return (\n <>\n <DateInput\n clearable={false}\n label=\"Start\"\n value={value?.[0]}\n onChange={onChangeStart}\n onFocus={onFocus}\n popoverProps={{styles: {dropdown: {display: 'none'}}}}\n {...startProps}\n />\n <DateInput\n clearable={false}\n label=\"End\"\n value={value?.[1]}\n onChange={onChangeEnd}\n onFocus={onFocus}\n popoverProps={{styles: {dropdown: {display: 'none'}}}}\n {...endProps}\n />\n </>\n );\n};\nexport type {DateRangePickerPreset} from './DateRangePickerPresetSelect.js';\n"],"names":["EditableDateRangePicker","value","onChange","onFocus","startProps","endProps","onChangeStart","date","dayjs","startOf","toISOString","onChangeEnd","endOf","DateInput","clearable","label","popoverProps","styles","dropdown","display"],"mappings":";;;;+BAiBaA;;;eAAAA;;;;;;qBAjBmE;8DAC9D;AAgBX,IAAMA,0BAA0B;QACnCC,cAAAA,OACAC,iBAAAA,UACAC,gBAAAA,mCACAC,YAAAA,4CAAa,CAAC,+CACdC,UAAAA,wCAAW,CAAC;IAEZ,IAAMC,gBAAgB,uBAACC;QACnBL,qBAAAA,+BAAAA,SAAW;YAACM,IAAAA,cAAK,EAACD,MAAME,OAAO,CAAC,OAAOC,WAAW;YAAIT,kBAAAA,4BAAAA,KAAO,CAAC,EAAE;SAAC;IACrE;IACA,IAAMU,cAAc,qBAACJ;QACjBL,qBAAAA,+BAAAA,SAAW;YAACD,kBAAAA,4BAAAA,KAAO,CAAC,EAAE;YAAEO,IAAAA,cAAK,EAACD,MAAMK,KAAK,CAAC,OAAOF,WAAW;SAAG;IACnE;IAEA,qBACI;;0BACI,qBAACG,gBAAS;gBACNC,WAAW;gBACXC,OAAM;gBACNd,KAAK,EAAEA,kBAAAA,4BAAAA,KAAO,CAAC,EAAE;gBACjBC,UAAUI;gBACVH,SAASA;gBACTa,cAAc;oBAACC,QAAQ;wBAACC,UAAU;4BAACC,SAAS;wBAAM;oBAAC;gBAAC;eAChDf;0BAER,qBAACS,gBAAS;gBACNC,WAAW;gBACXC,OAAM;gBACNd,KAAK,EAAEA,kBAAAA,4BAAAA,KAAO,CAAC,EAAE;gBACjBC,UAAUS;gBACVR,SAASA;gBACTa,cAAc;oBAACC,QAAQ;wBAACC,UAAU;4BAACC,SAAS;wBAAM;oBAAC;gBAAC;eAChDd;;;AAIpB"}
|
|
@@ -15,7 +15,7 @@ var _object_without_properties = require("@swc/helpers/_/_object_without_propert
|
|
|
15
15
|
var _jsxruntime = require("react/jsx-runtime");
|
|
16
16
|
var _core = require("@mantine/core");
|
|
17
17
|
var _RadioCardmodulecss = /*#__PURE__*/ _interop_require_default._(require("../../styles/RadioCard.module.css"));
|
|
18
|
-
var _Input = require("../Input/Input");
|
|
18
|
+
var _Input = require("../Input/Input.js");
|
|
19
19
|
var defaultProps = {};
|
|
20
20
|
var RadioCard = (0, _core.factory)(function(_props, ref) {
|
|
21
21
|
var _useProps = (0, _core.useProps)('RadioCard', defaultProps, _props), children = _useProps.children, classNames = _useProps.classNames, styles = _useProps.styles, style = _useProps.style, className = _useProps.className, vars = _useProps.vars, disabled = _useProps.disabled, label = _useProps.label, description = _useProps.description, disabledTooltip = _useProps.disabledTooltip, others = _object_without_properties._(_useProps, [
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/RadioCard/RadioCard.tsx"],"sourcesContent":["import {\n Factory,\n RadioCardProps as MantineRadioCardProps,\n RadioCardStylesNames as MantineRadioCardStylesNames,\n Radio,\n RadioCardCssVariables,\n Stack,\n StylesApiProps,\n Tooltip,\n factory,\n useProps,\n useStyles,\n} from '@mantine/core';\nimport {ReactNode} from 'react';\nimport classes from '../../styles/RadioCard.module.css';\nimport {Input} from '../Input/Input';\n\nexport type RadioCardStylesNames = MantineRadioCardStylesNames | 'container' | 'indicator' | 'title' | 'description';\nexport type RadioCardFactory = Factory<{\n props: RadioCardProps;\n ref: HTMLButtonElement;\n stylesNames: RadioCardStylesNames;\n vars: RadioCardCssVariables;\n}>;\n\nexport type RadioCardProps = MantineRadioCardProps &\n StylesApiProps<RadioCardFactory> & {\n /**\n * The label of the card. Appears next to the radio indicator.\n */\n label: ReactNode;\n /**\n * The description of the card. Appears under the title.\n */\n description?: ReactNode;\n /**\n * If true, the radio card will be displayed in a read-only state.\n */\n readOnly?: boolean;\n /**\n * The tooltip message to display when disabled\n */\n disabledTooltip?: string;\n };\n\nconst defaultProps: Partial<RadioCardProps> = {};\n\nexport const RadioCard = factory<RadioCardFactory>((_props, ref) => {\n const {\n children,\n classNames,\n styles,\n style,\n className,\n vars,\n disabled,\n label,\n description,\n disabledTooltip,\n ...others\n } = useProps('RadioCard', defaultProps, _props);\n const getStyles = useStyles<RadioCardFactory>({\n name: 'RadioCard',\n classes,\n vars,\n classNames,\n className,\n style,\n props: _props,\n styles,\n });\n\n return (\n <Tooltip label={disabledTooltip} disabled={!disabled || !disabledTooltip}>\n <Radio.Card\n ref={ref}\n disabled={disabled}\n readOnly={_props.readOnly}\n {...getStyles('card', {className, style, classNames, styles})}\n {...others}\n >\n <Radio.Indicator disabled={disabled} {...getStyles('indicator', {classNames, styles})} />\n <Stack {...getStyles('container', {classNames, styles})}>\n <Input.Label {...getStyles('title', {classNames, styles})}>{label}</Input.Label>\n {description && (\n <Input.Description {...getStyles('description', {classNames, styles})}>\n {description}\n </Input.Description>\n )}\n {children}\n </Stack>\n </Radio.Card>\n </Tooltip>\n );\n});\nRadioCard.displayName = 'RadioCard';\n"],"names":["RadioCard","defaultProps","factory","_props","ref","useProps","children","classNames","styles","style","className","vars","disabled","label","description","disabledTooltip","others","getStyles","useStyles","name","classes","props","Tooltip","Radio","Card","readOnly","Indicator","Stack","Input","Label","Description","displayName"],"mappings":";;;;+BA+CaA;;;eAAAA;;;;;;;;oBAnCN;2EAEa;qBACA;AA8BpB,IAAMC,eAAwC,CAAC;AAExC,IAAMD,YAAYE,IAAAA,aAAO,EAAmB,SAACC,QAAQC;IACxD,IAYIC,YAAAA,IAAAA,cAAQ,EAAC,aAAaJ,cAAcE,SAXpCG,WAWAD,UAXAC,UACAC,aAUAF,UAVAE,YACAC,SASAH,UATAG,QACAC,QAQAJ,UARAI,OACAC,YAOAL,UAPAK,WACAC,OAMAN,UANAM,MACAC,WAKAP,UALAO,UACAC,QAIAR,UAJAQ,OACAC,cAGAT,UAHAS,aACAC,kBAEAV,UAFAU,iBACGC,sCACHX;;;;;;;;;;;;IACJ,IAAMY,YAAYC,IAAAA,eAAS,EAAmB;QAC1CC,MAAM;QACNC,SAAAA,2BAAO;QACPT,MAAAA;QACAJ,YAAAA;QACAG,WAAAA;QACAD,OAAAA;QACAY,OAAOlB;QACPK,QAAAA;IACJ;IAEA,qBACI,qBAACc,aAAO;QAACT,OAAOE;QAAiBH,UAAU,CAACA,YAAY,CAACG;kBACrD,cAAA,sBAACQ,WAAK,CAACC,IAAI;YACPpB,KAAKA;YACLQ,UAAUA;YACVa,UAAUtB,OAAOsB,QAAQ;WACrBR,UAAU,QAAQ;YAACP,WAAAA;YAAWD,OAAAA;YAAOF,YAAAA;YAAYC,QAAAA;QAAM,IACvDQ;;8BAEJ,qBAACO,WAAK,CAACG,SAAS;oBAACd,UAAUA;mBAAcK,UAAU,aAAa;oBAACV,YAAAA;oBAAYC,QAAAA;gBAAM;8BACnF,sBAACmB,WAAK,8CAAKV,UAAU,aAAa;oBAACV,YAAAA;oBAAYC,QAAAA;gBAAM;;sCACjD,qBAACoB,YAAK,CAACC,KAAK,8CAAKZ,UAAU,SAAS;4BAACV,YAAAA;4BAAYC,QAAAA;wBAAM;sCAAKK;;wBAC3DC,6BACG,qBAACc,YAAK,CAACE,WAAW,8CAAKb,UAAU,eAAe;4BAACV,YAAAA;4BAAYC,QAAAA;wBAAM;sCAC9DM;;wBAGRR;;;;;;AAKrB;AACAN,UAAU+B,WAAW,GAAG"}
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/RadioCard/RadioCard.tsx"],"sourcesContent":["import {\n Factory,\n RadioCardProps as MantineRadioCardProps,\n RadioCardStylesNames as MantineRadioCardStylesNames,\n Radio,\n RadioCardCssVariables,\n Stack,\n StylesApiProps,\n Tooltip,\n factory,\n useProps,\n useStyles,\n} from '@mantine/core';\nimport {ReactNode} from 'react';\nimport classes from '../../styles/RadioCard.module.css';\nimport {Input} from '../Input/Input.js';\n\nexport type RadioCardStylesNames = MantineRadioCardStylesNames | 'container' | 'indicator' | 'title' | 'description';\nexport type RadioCardFactory = Factory<{\n props: RadioCardProps;\n ref: HTMLButtonElement;\n stylesNames: RadioCardStylesNames;\n vars: RadioCardCssVariables;\n}>;\n\nexport type RadioCardProps = MantineRadioCardProps &\n StylesApiProps<RadioCardFactory> & {\n /**\n * The label of the card. Appears next to the radio indicator.\n */\n label: ReactNode;\n /**\n * The description of the card. Appears under the title.\n */\n description?: ReactNode;\n /**\n * If true, the radio card will be displayed in a read-only state.\n */\n readOnly?: boolean;\n /**\n * The tooltip message to display when disabled\n */\n disabledTooltip?: string;\n };\n\nconst defaultProps: Partial<RadioCardProps> = {};\n\nexport const RadioCard = factory<RadioCardFactory>((_props, ref) => {\n const {\n children,\n classNames,\n styles,\n style,\n className,\n vars,\n disabled,\n label,\n description,\n disabledTooltip,\n ...others\n } = useProps('RadioCard', defaultProps, _props);\n const getStyles = useStyles<RadioCardFactory>({\n name: 'RadioCard',\n classes,\n vars,\n classNames,\n className,\n style,\n props: _props,\n styles,\n });\n\n return (\n <Tooltip label={disabledTooltip} disabled={!disabled || !disabledTooltip}>\n <Radio.Card\n ref={ref}\n disabled={disabled}\n readOnly={_props.readOnly}\n {...getStyles('card', {className, style, classNames, styles})}\n {...others}\n >\n <Radio.Indicator disabled={disabled} {...getStyles('indicator', {classNames, styles})} />\n <Stack {...getStyles('container', {classNames, styles})}>\n <Input.Label {...getStyles('title', {classNames, styles})}>{label}</Input.Label>\n {description && (\n <Input.Description {...getStyles('description', {classNames, styles})}>\n {description}\n </Input.Description>\n )}\n {children}\n </Stack>\n </Radio.Card>\n </Tooltip>\n );\n});\nRadioCard.displayName = 'RadioCard';\n"],"names":["RadioCard","defaultProps","factory","_props","ref","useProps","children","classNames","styles","style","className","vars","disabled","label","description","disabledTooltip","others","getStyles","useStyles","name","classes","props","Tooltip","Radio","Card","readOnly","Indicator","Stack","Input","Label","Description","displayName"],"mappings":";;;;+BA+CaA;;;eAAAA;;;;;;;;oBAnCN;2EAEa;qBACA;AA8BpB,IAAMC,eAAwC,CAAC;AAExC,IAAMD,YAAYE,IAAAA,aAAO,EAAmB,SAACC,QAAQC;IACxD,IAYIC,YAAAA,IAAAA,cAAQ,EAAC,aAAaJ,cAAcE,SAXpCG,WAWAD,UAXAC,UACAC,aAUAF,UAVAE,YACAC,SASAH,UATAG,QACAC,QAQAJ,UARAI,OACAC,YAOAL,UAPAK,WACAC,OAMAN,UANAM,MACAC,WAKAP,UALAO,UACAC,QAIAR,UAJAQ,OACAC,cAGAT,UAHAS,aACAC,kBAEAV,UAFAU,iBACGC,sCACHX;;;;;;;;;;;;IACJ,IAAMY,YAAYC,IAAAA,eAAS,EAAmB;QAC1CC,MAAM;QACNC,SAAAA,2BAAO;QACPT,MAAAA;QACAJ,YAAAA;QACAG,WAAAA;QACAD,OAAAA;QACAY,OAAOlB;QACPK,QAAAA;IACJ;IAEA,qBACI,qBAACc,aAAO;QAACT,OAAOE;QAAiBH,UAAU,CAACA,YAAY,CAACG;kBACrD,cAAA,sBAACQ,WAAK,CAACC,IAAI;YACPpB,KAAKA;YACLQ,UAAUA;YACVa,UAAUtB,OAAOsB,QAAQ;WACrBR,UAAU,QAAQ;YAACP,WAAAA;YAAWD,OAAAA;YAAOF,YAAAA;YAAYC,QAAAA;QAAM,IACvDQ;;8BAEJ,qBAACO,WAAK,CAACG,SAAS;oBAACd,UAAUA;mBAAcK,UAAU,aAAa;oBAACV,YAAAA;oBAAYC,QAAAA;gBAAM;8BACnF,sBAACmB,WAAK,8CAAKV,UAAU,aAAa;oBAACV,YAAAA;oBAAYC,QAAAA;gBAAM;;sCACjD,qBAACoB,YAAK,CAACC,KAAK,8CAAKZ,UAAU,SAAS;4BAACV,YAAAA;4BAAYC,QAAAA;wBAAM;sCAAKK;;wBAC3DC,6BACG,qBAACc,YAAK,CAACE,WAAW,8CAAKb,UAAU,eAAe;4BAACV,YAAAA;4BAAYC,QAAAA;wBAAM;sCAC9DM;;wBAGRR;;;;;;AAKrB;AACAN,UAAU+B,WAAW,GAAG"}
|
|
@@ -47,8 +47,17 @@ export declare const Table: {
|
|
|
47
47
|
<T>(props: TableProps<T> & {
|
|
48
48
|
ref?: ForwardedRef<HTMLDivElement>;
|
|
49
49
|
}): import("react/jsx-runtime").JSX.Element;
|
|
50
|
+
/**
|
|
51
|
+
* Generic column to use when your table needs an accordion (collapsible rows, but only one open at a time).
|
|
52
|
+
*/
|
|
50
53
|
AccordionColumn: ColumnDef<unknown>;
|
|
54
|
+
/**
|
|
55
|
+
* Generic column to use when your table needs actions on rows
|
|
56
|
+
*/
|
|
51
57
|
ActionsColumn: ColumnDef<unknown>;
|
|
58
|
+
/**
|
|
59
|
+
* An action to display when a row is selected in the table. Can be displayed as a primary action or menu item.
|
|
60
|
+
*/
|
|
52
61
|
ActionItem: (<C = "button">(props: import("@mantine/core").PolymorphicComponentProps<C, import("./table-actions/TableActionItem.js").TableActionItemProps>) => React.ReactElement) & Omit<import("react").FunctionComponent<(import("./table-actions/TableActionItem.js").TableActionItemProps & {
|
|
53
62
|
component?: any;
|
|
54
63
|
} & Omit<Omit<any, "ref">, "component" | keyof import("./table-actions/TableActionItem.js").TableActionItemProps> & {
|
|
@@ -76,32 +85,54 @@ export declare const Table: {
|
|
|
76
85
|
stylesNames: TableActionItemStylesNames;
|
|
77
86
|
compound: true;
|
|
78
87
|
}>;
|
|
88
|
+
/**
|
|
89
|
+
* Generic column to use when your table needs collapsible rows
|
|
90
|
+
*/
|
|
79
91
|
CollapsibleColumn: ColumnDef<unknown>;
|
|
92
|
+
/**
|
|
93
|
+
* A date range picker integrated with the table store that resets pagination on change.
|
|
94
|
+
*/
|
|
80
95
|
DateRangePicker: import("@mantine/core").MantineComponent<{
|
|
81
96
|
props: import("./table-date-range-picker/TableDateRangePicker.js").TableDateRangePickerProps;
|
|
82
97
|
ref: HTMLDivElement;
|
|
83
98
|
stylesNames: TableDateRangePickerStylesNames;
|
|
84
99
|
compound: true;
|
|
85
100
|
}>;
|
|
101
|
+
/**
|
|
102
|
+
* A search input that filters table rows by matching against any field.
|
|
103
|
+
* The filter value is debounced and resets pagination to the first page on change.
|
|
104
|
+
*/
|
|
86
105
|
Filter: import("@mantine/core").MantineComponent<{
|
|
87
106
|
props: import("./table-filter/TableFilter.js").TableFilterProps;
|
|
88
107
|
ref: HTMLDivElement;
|
|
89
108
|
stylesNames: TableFilterStylesNames;
|
|
90
109
|
compound: true;
|
|
91
110
|
}>;
|
|
111
|
+
/**
|
|
112
|
+
* Container for elements displayed below the table body, typically pagination and per-page controls.
|
|
113
|
+
*/
|
|
92
114
|
Footer: import("react").FunctionComponent<import("./table-footer/TableFooter.js").TableFooterProps>;
|
|
115
|
+
/**
|
|
116
|
+
* Container for elements displayed above the table body such as filters, predicates, and actions.
|
|
117
|
+
*/
|
|
93
118
|
Header: import("@mantine/core").MantineComponent<{
|
|
94
119
|
props: import("./table-header/TableHeader.js").TableHeaderProps;
|
|
95
120
|
ref: HTMLDivElement;
|
|
96
121
|
stylesNames: TableHeaderStylesNames;
|
|
97
122
|
compound: true;
|
|
98
123
|
}>;
|
|
124
|
+
/**
|
|
125
|
+
* Displays the time of the last data update, automatically refreshing when table data changes.
|
|
126
|
+
*/
|
|
99
127
|
LastUpdated: import("@mantine/core").MantineComponent<{
|
|
100
128
|
props: import("./table-last-updated/TableLastUpdated.js").TableLastUpdatedProps;
|
|
101
129
|
ref: HTMLDivElement;
|
|
102
130
|
stylesNames: TableLastUpdatedStylesNames;
|
|
103
131
|
compound: true;
|
|
104
132
|
}>;
|
|
133
|
+
/**
|
|
134
|
+
* Available table layout configurations (e.g., Rows, Cards).
|
|
135
|
+
*/
|
|
105
136
|
Layouts: {
|
|
106
137
|
Rows: import("@mantine/core").MantineComponent<{
|
|
107
138
|
ref?: never;
|
|
@@ -110,12 +141,27 @@ export declare const Table: {
|
|
|
110
141
|
staticComponents: TableLayout;
|
|
111
142
|
}>;
|
|
112
143
|
};
|
|
144
|
+
/**
|
|
145
|
+
* Skeleton overlay displayed while the table data is loading.
|
|
146
|
+
*/
|
|
113
147
|
Loading: import("react").FunctionComponent<import("@mantine/core").SkeletonProps>;
|
|
148
|
+
/**
|
|
149
|
+
* Container displayed when the table has no data to show.
|
|
150
|
+
*/
|
|
114
151
|
NoData: import("react").FunctionComponent<import("./table-no-data/TableNoData.js").TableNoDataProps>;
|
|
152
|
+
/**
|
|
153
|
+
* Page navigation control that syncs with the table store and scrolls to the table on page change.
|
|
154
|
+
*/
|
|
115
155
|
Pagination: import("react").FunctionComponent<import("./table-pagination/TablePagination.types.js").TablePaginationProps>;
|
|
156
|
+
/**
|
|
157
|
+
* Control allowing users to choose how many results are displayed per page.
|
|
158
|
+
*/
|
|
116
159
|
PerPage: import("react").FunctionComponent<import("./table-per-page/TablePerPage.types.js").TablePerPageProps> & {
|
|
117
160
|
DEFAULT_SIZE: number;
|
|
118
161
|
};
|
|
162
|
+
/**
|
|
163
|
+
* A dropdown that filters table data by a predefined set of values and resets pagination on change.
|
|
164
|
+
*/
|
|
119
165
|
Predicate: import("react").FunctionComponent<import("./table-predicate/TablePredicate.js").TablePredicateProps>;
|
|
120
166
|
extend: CustomComponentThemeExtend<{
|
|
121
167
|
props: TableProps<unknown>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../../../src/components/Table/Table.tsx"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../../../src/components/Table/Table.tsx"],"names":[],"mappings":"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"}
|
|
@@ -235,11 +235,11 @@ var Table = function Table(props) {
|
|
|
235
235
|
children: header
|
|
236
236
|
})
|
|
237
237
|
}) : null,
|
|
238
|
-
/*#__PURE__*/ (0, _jsxruntime.jsx)(Layout.Header, _object_spread._({
|
|
238
|
+
hasRows || loading ? /*#__PURE__*/ (0, _jsxruntime.jsx)(Layout.Header, _object_spread._({
|
|
239
239
|
getRowExpandedContent: getRowExpandedContent,
|
|
240
240
|
getRowAttributes: getRowAttributes,
|
|
241
241
|
loading: loading
|
|
242
|
-
}, layoutProps))
|
|
242
|
+
}, layoutProps)) : null
|
|
243
243
|
]
|
|
244
244
|
})),
|
|
245
245
|
/*#__PURE__*/ (0, _jsxruntime.jsx)("tbody", _object_spread_props._(_object_spread._({}, getStyles('body')), {
|
|
@@ -275,21 +275,52 @@ var TableComponentsOrder = {
|
|
|
275
275
|
DateRangePicker: 3,
|
|
276
276
|
LayoutControl: 1
|
|
277
277
|
};
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
Table.
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
Table.
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
Table.
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
Table.
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
Table.
|
|
278
|
+
/**
|
|
279
|
+
* Generic column to use when your table needs an accordion (collapsible rows, but only one open at a time).
|
|
280
|
+
*/ Table.AccordionColumn = _TableCollapsibleColumn.TableAccordionColumn;
|
|
281
|
+
/**
|
|
282
|
+
* Generic column to use when your table needs actions on rows
|
|
283
|
+
*/ Table.ActionsColumn = _TableActionsColumn.TableActionsColumn;
|
|
284
|
+
/**
|
|
285
|
+
* An action to display when a row is selected in the table. Can be displayed as a primary action or menu item.
|
|
286
|
+
*/ Table.ActionItem = _TableActionItem.TableActionItem;
|
|
287
|
+
/**
|
|
288
|
+
* Generic column to use when your table needs collapsible rows
|
|
289
|
+
*/ Table.CollapsibleColumn = _TableCollapsibleColumn.TableCollapsibleColumn;
|
|
290
|
+
/**
|
|
291
|
+
* A date range picker integrated with the table store that resets pagination on change.
|
|
292
|
+
*/ Table.DateRangePicker = _TableDateRangePicker.TableDateRangePicker;
|
|
293
|
+
/**
|
|
294
|
+
* A search input that filters table rows by matching against any field.
|
|
295
|
+
* The filter value is debounced and resets pagination to the first page on change.
|
|
296
|
+
*/ Table.Filter = _TableFilter.TableFilter;
|
|
297
|
+
/**
|
|
298
|
+
* Container for elements displayed below the table body, typically pagination and per-page controls.
|
|
299
|
+
*/ Table.Footer = _TableFooter.TableFooter;
|
|
300
|
+
/**
|
|
301
|
+
* Container for elements displayed above the table body such as filters, predicates, and actions.
|
|
302
|
+
*/ Table.Header = _TableHeader.TableHeader;
|
|
303
|
+
/**
|
|
304
|
+
* Displays the time of the last data update, automatically refreshing when table data changes.
|
|
305
|
+
*/ Table.LastUpdated = _TableLastUpdated.TableLastUpdated;
|
|
306
|
+
/**
|
|
307
|
+
* Available table layout configurations (e.g., Rows, Cards).
|
|
308
|
+
*/ Table.Layouts = _TableLayouts.TableLayouts;
|
|
309
|
+
/**
|
|
310
|
+
* Skeleton overlay displayed while the table data is loading.
|
|
311
|
+
*/ Table.Loading = _TableLoading.TableLoading;
|
|
312
|
+
/**
|
|
313
|
+
* Container displayed when the table has no data to show.
|
|
314
|
+
*/ Table.NoData = _TableNoData.TableNoData;
|
|
315
|
+
/**
|
|
316
|
+
* Page navigation control that syncs with the table store and scrolls to the table on page change.
|
|
317
|
+
*/ Table.Pagination = _TablePagination.TablePagination;
|
|
318
|
+
/**
|
|
319
|
+
* Control allowing users to choose how many results are displayed per page.
|
|
320
|
+
*/ Table.PerPage = _TablePerPage.TablePerPage;
|
|
321
|
+
/**
|
|
322
|
+
* A dropdown that filters table data by a predefined set of values and resets pagination on change.
|
|
323
|
+
*/ Table.Predicate = _TablePredicate.TablePredicate;
|
|
293
324
|
Table.extend = _createFactoryComponent.identity;
|
|
294
325
|
|
|
295
326
|
//# sourceMappingURL=Table.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/Table/Table.tsx"],"sourcesContent":["import {Box, Center, Factory, Loader, useProps, useStyles} from '@mantine/core';\nimport {useClickOutside, useMergedRef} from '@mantine/hooks';\nimport {\n ColumnDef,\n defaultColumnSizing,\n getCoreRowModel,\n Row,\n RowSelectionState,\n useReactTable,\n} from '@tanstack/react-table';\nimport isEqual from 'fast-deep-equal';\nimport {Children, ForwardedRef, ReactElement, useEffect, useRef} from 'react';\nimport {CustomComponentThemeExtend, identity} from '../../utils/createFactoryComponent.js';\nimport classes from './Table.module.css';\nimport {TableLayout, TableProps} from './Table.types.js';\nimport {TableProvider} from './TableContext.js';\nimport {TableLayouts} from './layouts/TableLayouts.js';\nimport {TableActionItem, TableActionItemStylesNames} from './table-actions/TableActionItem.js';\nimport {TableActionsListStylesNames} from './table-actions/TableActionsList.js';\nimport {TableHeaderActionsStylesNames} from './table-actions/TableHeaderActions.js';\nimport {TableActionsColumn} from './table-column/TableActionsColumn.js';\nimport {\n TableAccordionColumn,\n TableCollapsibleColumn,\n TableCollapsibleColumnStylesNames,\n} from './table-column/TableCollapsibleColumn.js';\nimport {TableSelectableColumn} from './table-column/TableSelectableColumn.js';\nimport {TableDateRangePicker, TableDateRangePickerStylesNames} from './table-date-range-picker/TableDateRangePicker.js';\nimport {TableFilter, TableFilterStylesNames} from './table-filter/TableFilter.js';\nimport {TableFooter} from './table-footer/TableFooter.js';\nimport {TableHeader, TableHeaderStylesNames} from './table-header/TableHeader.js';\nimport {TableThStylesNames} from './table-header/Th.js';\nimport {TableLastUpdated, TableLastUpdatedStylesNames} from './table-last-updated/TableLastUpdated.js';\nimport {TableLoading} from './table-loading/TableLoading.js';\nimport {TableNoData} from './table-no-data/TableNoData.js';\nimport {TablePagination} from './table-pagination/TablePagination.js';\nimport {TablePerPage} from './table-per-page/TablePerPage.js';\nimport {TablePredicate, TablePredicateStylesNames} from './table-predicate/TablePredicate.js';\nimport {TableState} from './use-table.js';\n\ntype TableStylesNames =\n | 'root'\n | 'table'\n | 'header'\n | 'body'\n | TableHeaderActionsStylesNames\n | TableActionsListStylesNames\n | TableActionItemStylesNames\n | TableCollapsibleColumnStylesNames\n | TableDateRangePickerStylesNames\n | TableFilterStylesNames\n | TableHeaderStylesNames\n | TableThStylesNames\n | TableLastUpdatedStylesNames\n | TablePredicateStylesNames;\n\nexport type PlasmaTableFactory = Factory<{\n props: TableProps<unknown>;\n ref: HTMLDivElement;\n stylesNames: TableStylesNames;\n staticComponents: {\n AccordionColumn: typeof TableAccordionColumn;\n ActionsColumn: typeof TableActionsColumn;\n ActionItem: typeof TableActionItem;\n CollapsibleColumn: typeof TableCollapsibleColumn;\n DateRangePicker: typeof TableDateRangePicker;\n Filter: typeof TableFilter;\n Footer: typeof TableFooter;\n Header: typeof TableHeader;\n LastUpdated: typeof TableLastUpdated;\n Layouts: typeof TableLayouts;\n Loading: typeof TableLoading;\n NoData: typeof TableNoData;\n Pagination: typeof TablePagination;\n PerPage: typeof TablePerPage;\n Predicate: typeof TablePredicate;\n };\n}>;\n\nconst defaultProps: Partial<TableProps<unknown>> = {\n layouts: [TableLayouts.Rows as TableLayout],\n layoutProps: {},\n loading: false,\n additionalRootNodes: [],\n options: {},\n getRowActions: () => [],\n};\n\nexport const Table = <T,>(props: TableProps<T> & {ref?: ForwardedRef<HTMLDivElement>}) => {\n const {\n store,\n data,\n getRowId,\n getRowAttributes,\n getRowExpandedContent,\n getRowActions,\n columns,\n layouts,\n layoutProps,\n children,\n loading,\n additionalRootNodes,\n options,\n ref,\n\n // Style props\n style,\n className,\n classNames,\n styles,\n unstyled,\n ...others\n } = useProps('PlasmaTable', defaultProps as TableProps<T>, props);\n\n const getStyles = useStyles<PlasmaTableFactory>({\n name: 'PlasmaTable',\n classes,\n props: props as TableProps<unknown>,\n className,\n style,\n classNames,\n styles,\n unstyled,\n });\n\n const convertedChildren = Children.toArray(children) as ReactElement[];\n const header = convertedChildren.find((child) => child.type === TableHeader);\n const footer = convertedChildren.find((child) => child.type === TableFooter);\n const lastUpdated = convertedChildren.find((child) => child.type === TableLastUpdated);\n const noData = convertedChildren.find((child) => child.type === TableNoData);\n\n const table = useReactTable({\n data: data || [],\n state: {\n globalFilter: store.state.globalFilter,\n sorting: store.state.sorting,\n pagination: store.state.pagination,\n columnVisibility: store.state.columnVisibility,\n expanded: store.state.expanded,\n },\n onGlobalFilterChange: store.setGlobalFilter,\n onExpandedChange: store.setExpanded,\n onSortingChange: store.setSorting,\n onPaginationChange: store.setPagination,\n onColumnVisibilityChange: store.setColumnVisibility,\n columns: store.multiRowSelectionEnabled ? [TableSelectableColumn as ColumnDef<T>].concat(columns) : columns,\n getCoreRowModel: getCoreRowModel(),\n manualPagination: options?.getPaginationRowModel === undefined,\n enableMultiRowSelection: !!store.multiRowSelectionEnabled,\n getRowId,\n getRowCanExpand: (row: Row<T>) => !!getRowExpandedContent?.(row.original, row.index, row),\n enableRowSelection: !loading,\n defaultColumn: {\n size: undefined,\n minSize: defaultColumnSizing.minSize,\n maxSize: defaultColumnSizing.maxSize,\n },\n rowCount: options?.getFilteredRowModel ? undefined : store.state.totalEntries,\n ...options,\n });\n\n table.setOptions((prev) => ({\n ...prev,\n state: {\n ...prev.state,\n rowSelection: store.state.rowSelection as RowSelectionState,\n },\n onRowSelectionChange: (rowSelectionUpdater) => {\n store.setRowSelection((old) => {\n const newRowSelection = (\n rowSelectionUpdater instanceof Function\n ? rowSelectionUpdater(old as RowSelectionState)\n : rowSelectionUpdater\n ) as TableState<T>['rowSelection'];\n\n if (isEqual(old, newRowSelection)) {\n return old;\n }\n\n const rows = table.getRowModel().rowsById;\n\n Object.keys(newRowSelection).forEach((rowId) => {\n if (newRowSelection[rowId] === true) {\n if (!rows[rowId]) {\n console.error(\n 'The table was not initialized properly, the rowSelection state should contain an object of type Record<string, TData>.',\n );\n }\n newRowSelection[rowId] = rows[rowId]?.original ?? (true as T);\n }\n });\n\n return newRowSelection;\n });\n },\n }));\n\n useEffect(() => {\n // Update the selected rows data when the data prop changes\n if (store.getSelectedRows().length > 0) {\n store.setRowSelection((old) => {\n const rowsById = table.getRowModel().rowsById;\n const newSelection = {...old};\n Object.keys(old).forEach((rowId) => {\n if (rowsById[rowId]) {\n newSelection[rowId] = rowsById[rowId].original;\n }\n });\n return isEqual(newSelection, old) ? old : newSelection;\n });\n }\n }, [data]);\n\n const containerRef = useRef<HTMLDivElement>(null);\n useClickOutside(\n () => {\n if (!store.multiRowSelectionEnabled && store.getSelectedRows().length > 0) {\n store.clearRowSelection();\n }\n },\n null,\n [containerRef.current, ...additionalRootNodes],\n );\n const mergedRef = useMergedRef(containerRef, ref);\n\n if (!data) {\n return (\n <Center style={{flexGrow: 1}}>\n <Loader />\n </Center>\n );\n }\n\n const Layout =\n store.state.layout === null ? layouts[0] : layouts.find(({displayName}) => displayName === store.state.layout);\n const hasRows = table.getRowModel().rows.length > 0;\n\n return (\n <Box ref={mergedRef} {...others} {...getStyles('root')}>\n <TableProvider<T> value={{getStyles, getRowActions, store, table, layouts, containerRef}}>\n <Layout>\n {store.isVacant && !store.isFiltered ? (\n noData\n ) : (\n <>\n <Box component=\"table\" {...getStyles('table')} mod={{loading}}>\n <thead {...getStyles('header')}>\n {header ? (\n <tr>\n <th style={{padding: 0}} colSpan={table.getAllColumns().length}>\n {header}\n </th>\n </tr>\n ) : null}\n <Layout.Header\n getRowExpandedContent={getRowExpandedContent}\n getRowAttributes={getRowAttributes}\n loading={loading}\n {...layoutProps}\n />\n </thead>\n <tbody {...getStyles('body')}>\n {hasRows ? (\n <Layout.Body\n getRowExpandedContent={getRowExpandedContent}\n getRowAttributes={getRowAttributes}\n loading={loading}\n {...layoutProps}\n />\n ) : (\n <tr>\n <td colSpan={table.getAllColumns().length}>\n <TableLoading visible={loading || !store.isFiltered}>\n {noData}\n </TableLoading>\n </td>\n </tr>\n )}\n </tbody>\n </Box>\n {footer}\n {lastUpdated}\n </>\n )}\n </Layout>\n </TableProvider>\n </Box>\n );\n};\n\nexport const TableComponentsOrder = {\n MultiSelectInfo: 7,\n Actions: 6,\n Predicate: 5,\n Filter: 4,\n DateRangePicker: 3,\n LayoutControl: 1,\n};\n\nTable.AccordionColumn = TableAccordionColumn;\nTable.ActionsColumn = TableActionsColumn;\nTable.ActionItem = TableActionItem;\nTable.CollapsibleColumn = TableCollapsibleColumn;\nTable.DateRangePicker = TableDateRangePicker;\nTable.Filter = TableFilter;\nTable.Footer = TableFooter;\nTable.Header = TableHeader;\nTable.LastUpdated = TableLastUpdated;\nTable.Layouts = TableLayouts;\nTable.Loading = TableLoading;\nTable.NoData = TableNoData;\nTable.Pagination = TablePagination;\nTable.PerPage = TablePerPage;\nTable.Predicate = TablePredicate;\n\nTable.extend = identity as CustomComponentThemeExtend<PlasmaTableFactory>;\n"],"names":["Table","TableComponentsOrder","defaultProps","layouts","TableLayouts","Rows","layoutProps","loading","additionalRootNodes","options","getRowActions","props","useProps","store","data","getRowId","getRowAttributes","getRowExpandedContent","columns","children","ref","style","className","classNames","styles","unstyled","others","getStyles","useStyles","name","classes","convertedChildren","Children","toArray","header","find","child","type","TableHeader","footer","TableFooter","lastUpdated","TableLastUpdated","noData","TableNoData","table","useReactTable","state","globalFilter","sorting","pagination","columnVisibility","expanded","onGlobalFilterChange","setGlobalFilter","onExpandedChange","setExpanded","onSortingChange","setSorting","onPaginationChange","setPagination","onColumnVisibilityChange","setColumnVisibility","multiRowSelectionEnabled","TableSelectableColumn","concat","getCoreRowModel","manualPagination","getPaginationRowModel","undefined","enableMultiRowSelection","getRowCanExpand","row","original","index","enableRowSelection","defaultColumn","size","minSize","defaultColumnSizing","maxSize","rowCount","getFilteredRowModel","totalEntries","setOptions","prev","rowSelection","onRowSelectionChange","rowSelectionUpdater","setRowSelection","old","newRowSelection","Function","isEqual","rows","getRowModel","rowsById","Object","keys","forEach","rowId","console","error","useEffect","getSelectedRows","length","newSelection","containerRef","useRef","useClickOutside","clearRowSelection","current","mergedRef","useMergedRef","Center","flexGrow","Loader","Layout","layout","displayName","hasRows","Box","TableProvider","value","isVacant","isFiltered","component","mod","thead","tr","th","padding","colSpan","getAllColumns","Header","tbody","Body","td","TableLoading","visible","MultiSelectInfo","Actions","Predicate","Filter","DateRangePicker","LayoutControl","AccordionColumn","TableAccordionColumn","ActionsColumn","TableActionsColumn","ActionItem","TableActionItem","CollapsibleColumn","TableCollapsibleColumn","TableDateRangePicker","TableFilter","Footer","LastUpdated","Layouts","Loading","NoData","Pagination","TablePagination","PerPage","TablePerPage","TablePredicate","extend","identity"],"mappings":";;;;;;;;;;;QAwFaA;eAAAA;;QA0MAC;eAAAA;;;;;;;;;;oBAlSmD;qBACpB;0BAQrC;sEACa;qBACkD;sCACnB;uEAC/B;4BAEQ;4BACD;+BAC+B;kCAGzB;sCAK1B;qCAC6B;oCACgC;2BAClB;2BACxB;2BACwB;gCAEU;4BACjC;2BACD;+BACI;4BACH;8BAC6B;AA0CxD,IAAMC,eAA6C;IAC/CC,SAAS;QAACC,0BAAY,CAACC,IAAI;KAAgB;IAC3CC,aAAa,CAAC;IACdC,SAAS;IACTC,qBAAqB,EAAE;IACvBC,SAAS,CAAC;IACVC,eAAe,SAAfA;eAAqB,EAAE;;AAC3B;AAEO,IAAMV,QAAQ,eAAKW;IACtB,IAuBIC,YAAAA,IAAAA,cAAQ,EAAC,eAAeV,cAA+BS,QAtBvDE,QAsBAD,UAtBAC,OACAC,OAqBAF,UArBAE,MACAC,WAoBAH,UApBAG,UACAC,mBAmBAJ,UAnBAI,kBACAC,wBAkBAL,UAlBAK,uBACAP,gBAiBAE,UAjBAF,eACAQ,UAgBAN,UAhBAM,SACAf,UAeAS,UAfAT,SACAG,cAcAM,UAdAN,aACAa,WAaAP,UAbAO,UACAZ,UAYAK,UAZAL,SACAC,sBAWAI,UAXAJ,qBACAC,UAUAG,UAVAH,SACAW,MASAR,UATAQ,KAEA,cAAc;IACdC,QAMAT,UANAS,OACAC,YAKAV,UALAU,WACAC,aAIAX,UAJAW,YACAC,SAGAZ,UAHAY,QACAC,WAEAb,UAFAa,UACGC,sCACHd;;;;;;;;;;;;;;;;;;;;;IAEJ,IAAMe,YAAYC,IAAAA,eAAS,EAAqB;QAC5CC,MAAM;QACNC,SAAAA,uBAAO;QACPnB,OAAOA;QACPW,WAAAA;QACAD,OAAAA;QACAE,YAAAA;QACAC,QAAAA;QACAC,UAAAA;IACJ;IAEA,IAAMM,oBAAoBC,eAAQ,CAACC,OAAO,CAACd;IAC3C,IAAMe,SAASH,kBAAkBI,IAAI,CAAC,SAACC;eAAUA,MAAMC,IAAI,KAAKC,wBAAW;;IAC3E,IAAMC,SAASR,kBAAkBI,IAAI,CAAC,SAACC;eAAUA,MAAMC,IAAI,KAAKG,wBAAW;;IAC3E,IAAMC,cAAcV,kBAAkBI,IAAI,CAAC,SAACC;eAAUA,MAAMC,IAAI,KAAKK,kCAAgB;;IACrF,IAAMC,SAASZ,kBAAkBI,IAAI,CAAC,SAACC;eAAUA,MAAMC,IAAI,KAAKO,wBAAW;;IAE3E,IAAMC,QAAQC,IAAAA,yBAAa,EAAC;QACxBhC,MAAMA,QAAQ,EAAE;QAChBiC,OAAO;YACHC,cAAcnC,MAAMkC,KAAK,CAACC,YAAY;YACtCC,SAASpC,MAAMkC,KAAK,CAACE,OAAO;YAC5BC,YAAYrC,MAAMkC,KAAK,CAACG,UAAU;YAClCC,kBAAkBtC,MAAMkC,KAAK,CAACI,gBAAgB;YAC9CC,UAAUvC,MAAMkC,KAAK,CAACK,QAAQ;QAClC;QACAC,sBAAsBxC,MAAMyC,eAAe;QAC3CC,kBAAkB1C,MAAM2C,WAAW;QACnCC,iBAAiB5C,MAAM6C,UAAU;QACjCC,oBAAoB9C,MAAM+C,aAAa;QACvCC,0BAA0BhD,MAAMiD,mBAAmB;QACnD5C,SAASL,MAAMkD,wBAAwB,GAAG;YAACC,4CAAqB;SAAiB,CAACC,MAAM,CAAC/C,WAAWA;QACpGgD,iBAAiBA,IAAAA,2BAAe;QAChCC,kBAAkB1D,CAAAA,oBAAAA,8BAAAA,QAAS2D,qBAAqB,MAAKC;QACrDC,yBAAyB,CAAC,CAACzD,MAAMkD,wBAAwB;QACzDhD,UAAAA;QACAwD,iBAAiB,SAAjBA,gBAAkBC;mBAAgB,CAAC,EAACvD,kCAAAA,4CAAAA,sBAAwBuD,IAAIC,QAAQ,EAAED,IAAIE,KAAK,EAAEF;;QACrFG,oBAAoB,CAACpE;QACrBqE,eAAe;YACXC,MAAMR;YACNS,SAASC,+BAAmB,CAACD,OAAO;YACpCE,SAASD,+BAAmB,CAACC,OAAO;QACxC;QACAC,UAAUxE,CAAAA,oBAAAA,8BAAAA,QAASyE,mBAAmB,IAAGb,YAAYxD,MAAMkC,KAAK,CAACoC,YAAY;OAC1E1E;IAGPoC,MAAMuC,UAAU,CAAC,SAACC;eAAU,4CACrBA;YACHtC,OAAO,4CACAsC,KAAKtC,KAAK;gBACbuC,cAAczE,MAAMkC,KAAK,CAACuC,YAAY;;YAE1CC,sBAAsB,SAAtBA,qBAAuBC;gBACnB3E,MAAM4E,eAAe,CAAC,SAACC;oBACnB,IAAMC,kBACFH,AAAmB,aAAYI,CAA/BJ,qBAA+BI,YACzBJ,oBAAoBE,OACpBF;oBAGV,IAAIK,IAAAA,sBAAO,EAACH,KAAKC,kBAAkB;wBAC/B,OAAOD;oBACX;oBAEA,IAAMI,OAAOjD,MAAMkD,WAAW,GAAGC,QAAQ;oBAEzCC,OAAOC,IAAI,CAACP,iBAAiBQ,OAAO,CAAC,SAACC;wBAClC,IAAIT,eAAe,CAACS,MAAM,KAAK,MAAM;;gCAMRN;4BALzB,IAAI,CAACA,IAAI,CAACM,MAAM,EAAE;gCACdC,QAAQC,KAAK,CACT;4BAER;4BACAX,eAAe,CAACS,MAAM,YAAGN,cAAAA,IAAI,CAACM,MAAM,cAAXN,kCAAAA,YAAarB,QAAQ,uCAAK;wBACvD;oBACJ;oBAEA,OAAOkB;gBACX;YACJ;;;IAGJY,IAAAA,gBAAS,EAAC;QACN,2DAA2D;QAC3D,IAAI1F,MAAM2F,eAAe,GAAGC,MAAM,GAAG,GAAG;YACpC5F,MAAM4E,eAAe,CAAC,SAACC;gBACnB,IAAMM,WAAWnD,MAAMkD,WAAW,GAAGC,QAAQ;gBAC7C,IAAMU,eAAe,qBAAIhB;gBACzBO,OAAOC,IAAI,CAACR,KAAKS,OAAO,CAAC,SAACC;oBACtB,IAAIJ,QAAQ,CAACI,MAAM,EAAE;wBACjBM,YAAY,CAACN,MAAM,GAAGJ,QAAQ,CAACI,MAAM,CAAC3B,QAAQ;oBAClD;gBACJ;gBACA,OAAOoB,IAAAA,sBAAO,EAACa,cAAchB,OAAOA,MAAMgB;YAC9C;QACJ;IACJ,GAAG;QAAC5F;KAAK;IAET,IAAM6F,eAAeC,IAAAA,aAAM,EAAiB;IAC5CC,IAAAA,sBAAe,EACX;QACI,IAAI,CAAChG,MAAMkD,wBAAwB,IAAIlD,MAAM2F,eAAe,GAAGC,MAAM,GAAG,GAAG;YACvE5F,MAAMiG,iBAAiB;QAC3B;IACJ,GACA,MACA;QAACH,aAAaI,OAAO;KAAyB,CAA9C,OAAuB,uBAAGvG;IAE9B,IAAMwG,YAAYC,IAAAA,mBAAY,EAACN,cAAcvF;IAE7C,IAAI,CAACN,MAAM;QACP,qBACI,qBAACoG,YAAM;YAAC7F,OAAO;gBAAC8F,UAAU;YAAC;sBACvB,cAAA,qBAACC,YAAM;;IAGnB;IAEA,IAAMC,SACFxG,MAAMkC,KAAK,CAACuE,MAAM,KAAK,OAAOnH,OAAO,CAAC,EAAE,GAAGA,QAAQgC,IAAI,CAAC;YAAEoF,oBAAAA;eAAiBA,gBAAgB1G,MAAMkC,KAAK,CAACuE,MAAM;;IACjH,IAAME,UAAU3E,MAAMkD,WAAW,GAAGD,IAAI,CAACW,MAAM,GAAG;IAElD,qBACI,qBAACgB,SAAG;QAACrG,KAAK4F;OAAetF,QAAYC,UAAU;kBAC3C,cAAA,qBAAC+F,2BAAa;YAAIC,OAAO;gBAAChG,WAAAA;gBAAWjB,eAAAA;gBAAeG,OAAAA;gBAAOgC,OAAAA;gBAAO1C,SAAAA;gBAASwG,cAAAA;YAAY;sBACnF,cAAA,qBAACU;0BACIxG,MAAM+G,QAAQ,IAAI,CAAC/G,MAAMgH,UAAU,GAChClF,uBAEA;;sCACI,sBAAC8E,SAAG;4BAACK,WAAU;2BAAYnG,UAAU;4BAAUoG,KAAK;gCAACxH,SAAAA;4BAAO;;8CACxD,sBAACyH,qDAAUrG,UAAU;;wCAChBO,uBACG,qBAAC+F;sDACG,cAAA,qBAACC;gDAAG7G,OAAO;oDAAC8G,SAAS;gDAAC;gDAAGC,SAASvF,MAAMwF,aAAa,GAAG5B,MAAM;0DACzDvE;;6CAGT;sDACJ,qBAACmF,OAAOiB,MAAM;4CACVrH,uBAAuBA;4CACvBD,kBAAkBA;4CAClBT,SAASA;2CACLD;;;8CAGZ,qBAACiI,qDAAU5G,UAAU;8CAChB6F,wBACG,qBAACH,OAAOmB,IAAI;wCACRvH,uBAAuBA;wCACvBD,kBAAkBA;wCAClBT,SAASA;uCACLD,8BAGR,qBAAC2H;kDACG,cAAA,qBAACQ;4CAAGL,SAASvF,MAAMwF,aAAa,GAAG5B,MAAM;sDACrC,cAAA,qBAACiC,0BAAY;gDAACC,SAASpI,WAAW,CAACM,MAAMgH,UAAU;0DAC9ClF;;;;;;;wBAOxBJ;wBACAE;;;;;;AAO7B;AAEO,IAAMxC,uBAAuB;IAChC2I,iBAAiB;IACjBC,SAAS;IACTC,WAAW;IACXC,QAAQ;IACRC,iBAAiB;IACjBC,eAAe;AACnB;AAEAjJ,MAAMkJ,eAAe,GAAGC,4CAAoB;AAC5CnJ,MAAMoJ,aAAa,GAAGC,sCAAkB;AACxCrJ,MAAMsJ,UAAU,GAAGC,gCAAe;AAClCvJ,MAAMwJ,iBAAiB,GAAGC,8CAAsB;AAChDzJ,MAAMgJ,eAAe,GAAGU,0CAAoB;AAC5C1J,MAAM+I,MAAM,GAAGY,wBAAW;AAC1B3J,MAAM4J,MAAM,GAAGpH,wBAAW;AAC1BxC,MAAMsI,MAAM,GAAGhG,wBAAW;AAC1BtC,MAAM6J,WAAW,GAAGnH,kCAAgB;AACpC1C,MAAM8J,OAAO,GAAG1J,0BAAY;AAC5BJ,MAAM+J,OAAO,GAAGrB,0BAAY;AAC5B1I,MAAMgK,MAAM,GAAGpH,wBAAW;AAC1B5C,MAAMiK,UAAU,GAAGC,gCAAe;AAClClK,MAAMmK,OAAO,GAAGC,0BAAY;AAC5BpK,MAAM8I,SAAS,GAAGuB,8BAAc;AAEhCrK,MAAMsK,MAAM,GAAGC,gCAAQ"}
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/Table/Table.tsx"],"sourcesContent":["import {Box, Center, Factory, Loader, useProps, useStyles} from '@mantine/core';\nimport {useClickOutside, useMergedRef} from '@mantine/hooks';\nimport {\n ColumnDef,\n defaultColumnSizing,\n getCoreRowModel,\n Row,\n RowSelectionState,\n useReactTable,\n} from '@tanstack/react-table';\nimport isEqual from 'fast-deep-equal';\nimport {Children, ForwardedRef, ReactElement, useEffect, useRef} from 'react';\nimport {CustomComponentThemeExtend, identity} from '../../utils/createFactoryComponent.js';\nimport classes from './Table.module.css';\nimport {TableLayout, TableProps} from './Table.types.js';\nimport {TableProvider} from './TableContext.js';\nimport {TableLayouts} from './layouts/TableLayouts.js';\nimport {TableActionItem, TableActionItemStylesNames} from './table-actions/TableActionItem.js';\nimport {TableActionsListStylesNames} from './table-actions/TableActionsList.js';\nimport {TableHeaderActionsStylesNames} from './table-actions/TableHeaderActions.js';\nimport {TableActionsColumn} from './table-column/TableActionsColumn.js';\nimport {\n TableAccordionColumn,\n TableCollapsibleColumn,\n TableCollapsibleColumnStylesNames,\n} from './table-column/TableCollapsibleColumn.js';\nimport {TableSelectableColumn} from './table-column/TableSelectableColumn.js';\nimport {TableDateRangePicker, TableDateRangePickerStylesNames} from './table-date-range-picker/TableDateRangePicker.js';\nimport {TableFilter, TableFilterStylesNames} from './table-filter/TableFilter.js';\nimport {TableFooter} from './table-footer/TableFooter.js';\nimport {TableHeader, TableHeaderStylesNames} from './table-header/TableHeader.js';\nimport {TableThStylesNames} from './table-header/Th.js';\nimport {TableLastUpdated, TableLastUpdatedStylesNames} from './table-last-updated/TableLastUpdated.js';\nimport {TableLoading} from './table-loading/TableLoading.js';\nimport {TableNoData} from './table-no-data/TableNoData.js';\nimport {TablePagination} from './table-pagination/TablePagination.js';\nimport {TablePerPage} from './table-per-page/TablePerPage.js';\nimport {TablePredicate, TablePredicateStylesNames} from './table-predicate/TablePredicate.js';\nimport {TableState} from './use-table.js';\n\ntype TableStylesNames =\n | 'root'\n | 'table'\n | 'header'\n | 'body'\n | TableHeaderActionsStylesNames\n | TableActionsListStylesNames\n | TableActionItemStylesNames\n | TableCollapsibleColumnStylesNames\n | TableDateRangePickerStylesNames\n | TableFilterStylesNames\n | TableHeaderStylesNames\n | TableThStylesNames\n | TableLastUpdatedStylesNames\n | TablePredicateStylesNames;\n\nexport type PlasmaTableFactory = Factory<{\n props: TableProps<unknown>;\n ref: HTMLDivElement;\n stylesNames: TableStylesNames;\n staticComponents: {\n AccordionColumn: typeof TableAccordionColumn;\n ActionsColumn: typeof TableActionsColumn;\n ActionItem: typeof TableActionItem;\n CollapsibleColumn: typeof TableCollapsibleColumn;\n DateRangePicker: typeof TableDateRangePicker;\n Filter: typeof TableFilter;\n Footer: typeof TableFooter;\n Header: typeof TableHeader;\n LastUpdated: typeof TableLastUpdated;\n Layouts: typeof TableLayouts;\n Loading: typeof TableLoading;\n NoData: typeof TableNoData;\n Pagination: typeof TablePagination;\n PerPage: typeof TablePerPage;\n Predicate: typeof TablePredicate;\n };\n}>;\n\nconst defaultProps: Partial<TableProps<unknown>> = {\n layouts: [TableLayouts.Rows as TableLayout],\n layoutProps: {},\n loading: false,\n additionalRootNodes: [],\n options: {},\n getRowActions: () => [],\n};\n\nexport const Table = <T,>(props: TableProps<T> & {ref?: ForwardedRef<HTMLDivElement>}) => {\n const {\n store,\n data,\n getRowId,\n getRowAttributes,\n getRowExpandedContent,\n getRowActions,\n columns,\n layouts,\n layoutProps,\n children,\n loading,\n additionalRootNodes,\n options,\n ref,\n\n // Style props\n style,\n className,\n classNames,\n styles,\n unstyled,\n ...others\n } = useProps('PlasmaTable', defaultProps as TableProps<T>, props);\n\n const getStyles = useStyles<PlasmaTableFactory>({\n name: 'PlasmaTable',\n classes,\n props: props as TableProps<unknown>,\n className,\n style,\n classNames,\n styles,\n unstyled,\n });\n\n const convertedChildren = Children.toArray(children) as ReactElement[];\n const header = convertedChildren.find((child) => child.type === TableHeader);\n const footer = convertedChildren.find((child) => child.type === TableFooter);\n const lastUpdated = convertedChildren.find((child) => child.type === TableLastUpdated);\n const noData = convertedChildren.find((child) => child.type === TableNoData);\n\n const table = useReactTable({\n data: data || [],\n state: {\n globalFilter: store.state.globalFilter,\n sorting: store.state.sorting,\n pagination: store.state.pagination,\n columnVisibility: store.state.columnVisibility,\n expanded: store.state.expanded,\n },\n onGlobalFilterChange: store.setGlobalFilter,\n onExpandedChange: store.setExpanded,\n onSortingChange: store.setSorting,\n onPaginationChange: store.setPagination,\n onColumnVisibilityChange: store.setColumnVisibility,\n columns: store.multiRowSelectionEnabled ? [TableSelectableColumn as ColumnDef<T>].concat(columns) : columns,\n getCoreRowModel: getCoreRowModel(),\n manualPagination: options?.getPaginationRowModel === undefined,\n enableMultiRowSelection: !!store.multiRowSelectionEnabled,\n getRowId,\n getRowCanExpand: (row: Row<T>) => !!getRowExpandedContent?.(row.original, row.index, row),\n enableRowSelection: !loading,\n defaultColumn: {\n size: undefined,\n minSize: defaultColumnSizing.minSize,\n maxSize: defaultColumnSizing.maxSize,\n },\n rowCount: options?.getFilteredRowModel ? undefined : store.state.totalEntries,\n ...options,\n });\n\n table.setOptions((prev) => ({\n ...prev,\n state: {\n ...prev.state,\n rowSelection: store.state.rowSelection as RowSelectionState,\n },\n onRowSelectionChange: (rowSelectionUpdater) => {\n store.setRowSelection((old) => {\n const newRowSelection = (\n rowSelectionUpdater instanceof Function\n ? rowSelectionUpdater(old as RowSelectionState)\n : rowSelectionUpdater\n ) as TableState<T>['rowSelection'];\n\n if (isEqual(old, newRowSelection)) {\n return old;\n }\n\n const rows = table.getRowModel().rowsById;\n\n Object.keys(newRowSelection).forEach((rowId) => {\n if (newRowSelection[rowId] === true) {\n if (!rows[rowId]) {\n console.error(\n 'The table was not initialized properly, the rowSelection state should contain an object of type Record<string, TData>.',\n );\n }\n newRowSelection[rowId] = rows[rowId]?.original ?? (true as T);\n }\n });\n\n return newRowSelection;\n });\n },\n }));\n\n useEffect(() => {\n // Update the selected rows data when the data prop changes\n if (store.getSelectedRows().length > 0) {\n store.setRowSelection((old) => {\n const rowsById = table.getRowModel().rowsById;\n const newSelection = {...old};\n Object.keys(old).forEach((rowId) => {\n if (rowsById[rowId]) {\n newSelection[rowId] = rowsById[rowId].original;\n }\n });\n return isEqual(newSelection, old) ? old : newSelection;\n });\n }\n }, [data]);\n\n const containerRef = useRef<HTMLDivElement>(null);\n useClickOutside(\n () => {\n if (!store.multiRowSelectionEnabled && store.getSelectedRows().length > 0) {\n store.clearRowSelection();\n }\n },\n null,\n [containerRef.current, ...additionalRootNodes],\n );\n const mergedRef = useMergedRef(containerRef, ref);\n\n if (!data) {\n return (\n <Center style={{flexGrow: 1}}>\n <Loader />\n </Center>\n );\n }\n\n const Layout =\n store.state.layout === null ? layouts[0] : layouts.find(({displayName}) => displayName === store.state.layout);\n const hasRows = table.getRowModel().rows.length > 0;\n\n return (\n <Box ref={mergedRef} {...others} {...getStyles('root')}>\n <TableProvider<T> value={{getStyles, getRowActions, store, table, layouts, containerRef}}>\n <Layout>\n {store.isVacant && !store.isFiltered ? (\n noData\n ) : (\n <>\n <Box component=\"table\" {...getStyles('table')} mod={{loading}}>\n <thead {...getStyles('header')}>\n {header ? (\n <tr>\n <th style={{padding: 0}} colSpan={table.getAllColumns().length}>\n {header}\n </th>\n </tr>\n ) : null}\n {hasRows || loading ? (\n <Layout.Header\n getRowExpandedContent={getRowExpandedContent}\n getRowAttributes={getRowAttributes}\n loading={loading}\n {...layoutProps}\n />\n ) : null}\n </thead>\n <tbody {...getStyles('body')}>\n {hasRows ? (\n <Layout.Body\n getRowExpandedContent={getRowExpandedContent}\n getRowAttributes={getRowAttributes}\n loading={loading}\n {...layoutProps}\n />\n ) : (\n <tr>\n <td colSpan={table.getAllColumns().length}>\n <TableLoading visible={loading || !store.isFiltered}>\n {noData}\n </TableLoading>\n </td>\n </tr>\n )}\n </tbody>\n </Box>\n {footer}\n {lastUpdated}\n </>\n )}\n </Layout>\n </TableProvider>\n </Box>\n );\n};\n\nexport const TableComponentsOrder = {\n MultiSelectInfo: 7,\n Actions: 6,\n Predicate: 5,\n Filter: 4,\n DateRangePicker: 3,\n LayoutControl: 1,\n};\n\n/**\n * Generic column to use when your table needs an accordion (collapsible rows, but only one open at a time).\n */\nTable.AccordionColumn = TableAccordionColumn;\n/**\n * Generic column to use when your table needs actions on rows\n */\nTable.ActionsColumn = TableActionsColumn;\n/**\n * An action to display when a row is selected in the table. Can be displayed as a primary action or menu item.\n */\nTable.ActionItem = TableActionItem;\n/**\n * Generic column to use when your table needs collapsible rows\n */\nTable.CollapsibleColumn = TableCollapsibleColumn;\n/**\n * A date range picker integrated with the table store that resets pagination on change.\n */\nTable.DateRangePicker = TableDateRangePicker;\n/**\n * A search input that filters table rows by matching against any field.\n * The filter value is debounced and resets pagination to the first page on change.\n */\nTable.Filter = TableFilter;\n/**\n * Container for elements displayed below the table body, typically pagination and per-page controls.\n */\nTable.Footer = TableFooter;\n/**\n * Container for elements displayed above the table body such as filters, predicates, and actions.\n */\nTable.Header = TableHeader;\n/**\n * Displays the time of the last data update, automatically refreshing when table data changes.\n */\nTable.LastUpdated = TableLastUpdated;\n/**\n * Available table layout configurations (e.g., Rows, Cards).\n */\nTable.Layouts = TableLayouts;\n/**\n * Skeleton overlay displayed while the table data is loading.\n */\nTable.Loading = TableLoading;\n/**\n * Container displayed when the table has no data to show.\n */\nTable.NoData = TableNoData;\n/**\n * Page navigation control that syncs with the table store and scrolls to the table on page change.\n */\nTable.Pagination = TablePagination;\n/**\n * Control allowing users to choose how many results are displayed per page.\n */\nTable.PerPage = TablePerPage;\n/**\n * A dropdown that filters table data by a predefined set of values and resets pagination on change.\n */\nTable.Predicate = TablePredicate;\n\nTable.extend = identity as CustomComponentThemeExtend<PlasmaTableFactory>;\n"],"names":["Table","TableComponentsOrder","defaultProps","layouts","TableLayouts","Rows","layoutProps","loading","additionalRootNodes","options","getRowActions","props","useProps","store","data","getRowId","getRowAttributes","getRowExpandedContent","columns","children","ref","style","className","classNames","styles","unstyled","others","getStyles","useStyles","name","classes","convertedChildren","Children","toArray","header","find","child","type","TableHeader","footer","TableFooter","lastUpdated","TableLastUpdated","noData","TableNoData","table","useReactTable","state","globalFilter","sorting","pagination","columnVisibility","expanded","onGlobalFilterChange","setGlobalFilter","onExpandedChange","setExpanded","onSortingChange","setSorting","onPaginationChange","setPagination","onColumnVisibilityChange","setColumnVisibility","multiRowSelectionEnabled","TableSelectableColumn","concat","getCoreRowModel","manualPagination","getPaginationRowModel","undefined","enableMultiRowSelection","getRowCanExpand","row","original","index","enableRowSelection","defaultColumn","size","minSize","defaultColumnSizing","maxSize","rowCount","getFilteredRowModel","totalEntries","setOptions","prev","rowSelection","onRowSelectionChange","rowSelectionUpdater","setRowSelection","old","newRowSelection","Function","isEqual","rows","getRowModel","rowsById","Object","keys","forEach","rowId","console","error","useEffect","getSelectedRows","length","newSelection","containerRef","useRef","useClickOutside","clearRowSelection","current","mergedRef","useMergedRef","Center","flexGrow","Loader","Layout","layout","displayName","hasRows","Box","TableProvider","value","isVacant","isFiltered","component","mod","thead","tr","th","padding","colSpan","getAllColumns","Header","tbody","Body","td","TableLoading","visible","MultiSelectInfo","Actions","Predicate","Filter","DateRangePicker","LayoutControl","AccordionColumn","TableAccordionColumn","ActionsColumn","TableActionsColumn","ActionItem","TableActionItem","CollapsibleColumn","TableCollapsibleColumn","TableDateRangePicker","TableFilter","Footer","LastUpdated","Layouts","Loading","NoData","Pagination","TablePagination","PerPage","TablePerPage","TablePredicate","extend","identity"],"mappings":"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"}
|
|
@@ -13,7 +13,7 @@ var _jsxruntime = require("react/jsx-runtime");
|
|
|
13
13
|
var _plasmareacticons = require("@coveord/plasma-react-icons");
|
|
14
14
|
var _core = require("@mantine/core");
|
|
15
15
|
var _reacttable = require("@tanstack/react-table");
|
|
16
|
-
var _ActionIcon = require("../../ActionIcon/ActionIcon");
|
|
16
|
+
var _ActionIcon = require("../../ActionIcon/ActionIcon.js");
|
|
17
17
|
var DEFAULT_OPTIONS = {
|
|
18
18
|
footer: function footer(max) {
|
|
19
19
|
return "You can display up to ".concat(max, " columns.");
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../../src/components/Table/table-columns-selector/TableColumnsSelector.tsx"],"sourcesContent":["import {IconSettings} from '@coveord/plasma-react-icons';\nimport {Checkbox, Divider, Popover, ScrollArea, Stack, Text, Tooltip} from '@mantine/core';\nimport {flexRender, Header, Table} from '@tanstack/react-table';\nimport {ActionIcon} from '../../ActionIcon/ActionIcon';\n\nexport interface TableColumnsSelectorOptions {\n /**\n * The maximum number of columns that can be selected at the same time.\n * If defined a footer will render with the remaining number of columns that can be selected.\n * Must be a positive integer (greater than 0).\n */\n maxSelectableColumns?: number;\n /**\n * The content to display in the footer when maxSelectableColumns is defined.\n * Can be a string or a function that receives the maxSelectableColumns value.\n * @default (max) => `You can display up to ${max} columns.`\n */\n footer?: string | ((maxSelectableColumns: number) => string);\n /**\n * The tooltip to display when the user hovers over a disabled checkbox because of the limit.\n * @default 'You have reached the maximum display limit.'\n */\n limitReachedTooltip?: string;\n /**\n * The tooltip to display when the user hovers over a disabled checkbox because a column cannot be hidden.\n * @default 'This column is always visible.'\n */\n alwaysVisibleTooltip?: string;\n}\n\nexport interface TableColumnsSelectorProps {\n table: Table<unknown>;\n options?: TableColumnsSelectorOptions;\n}\n\nconst DEFAULT_OPTIONS: Omit<TableColumnsSelectorOptions, 'footer'> & {\n footer: (maxSelectableColumns: number) => string;\n} = {\n footer: (max) => `You can display up to ${max} columns.`,\n limitReachedTooltip: 'You have reached the maximum display limit.',\n alwaysVisibleTooltip: 'This column is always visible.',\n};\n\nexport const TableColumnsSelector = ({table, options}: TableColumnsSelectorProps) => {\n const {maxSelectableColumns, footer, limitReachedTooltip, alwaysVisibleTooltip} = {\n ...DEFAULT_OPTIONS,\n ...options,\n };\n\n const allColumns = table.getAllLeafColumns();\n const filteredColumns = allColumns.filter((column) => !column.columnDef.meta?.controlColumn);\n const selectedColumnsCount = filteredColumns.filter((column) => column.getIsVisible()).length;\n\n // Validate maxSelectableColumns - must be a positive integer to be effective\n const effectiveMaxColumns =\n maxSelectableColumns !== undefined && maxSelectableColumns > 0 ? maxSelectableColumns : undefined;\n\n if (filteredColumns.length <= 0) {\n return null;\n }\n\n const getColumnState = (column: (typeof filteredColumns)[number]) => {\n const alwaysVisible = !column.getCanHide();\n const isDisabled =\n (effectiveMaxColumns !== undefined &&\n selectedColumnsCount >= effectiveMaxColumns &&\n !column.getIsVisible()) ||\n alwaysVisible;\n const isVisible = column.getIsVisible() || alwaysVisible;\n return {alwaysVisible, isDisabled, isVisible};\n };\n\n const columnOptions = filteredColumns.map((column) => {\n const {alwaysVisible, isDisabled, isVisible} = getColumnState(column);\n\n return (\n <Tooltip\n label={alwaysVisible ? alwaysVisibleTooltip : limitReachedTooltip}\n disabled={!isDisabled}\n position=\"left\"\n key={column.id}\n >\n <div>\n <Checkbox\n label={flexRender(column.columnDef.header, {\n table,\n column,\n header: {column} as Header<unknown, unknown>,\n })}\n name={column.id}\n checked={isVisible}\n disabled={isDisabled}\n onChange={column.getToggleVisibilityHandler()}\n />\n </div>\n </Tooltip>\n );\n });\n\n return (\n <Popover position=\"bottom-end\" shadow=\"md\">\n <Popover.Target>\n <Tooltip label=\"Edit columns\">\n <ActionIcon.Tertiary aria-label=\"settings\">\n <IconSettings height={16} />\n </ActionIcon.Tertiary>\n </Tooltip>\n </Popover.Target>\n <Popover.Dropdown miw={270} pb=\"xs\">\n <ScrollArea.Autosize mah={200} type=\"auto\">\n <Stack gap=\"xs\">{columnOptions}</Stack>\n </ScrollArea.Autosize>\n {effectiveMaxColumns && (\n <>\n <Divider my=\"xs\" mx=\"-sm\" />\n <Text size=\"sm\" c=\"dimmed\">\n {typeof footer === 'function' ? footer(effectiveMaxColumns) : footer}\n </Text>\n </>\n )}\n </Popover.Dropdown>\n </Popover>\n );\n};\n"],"names":["TableColumnsSelector","DEFAULT_OPTIONS","footer","max","limitReachedTooltip","alwaysVisibleTooltip","table","options","maxSelectableColumns","allColumns","getAllLeafColumns","filteredColumns","filter","column","columnDef","meta","controlColumn","selectedColumnsCount","getIsVisible","length","effectiveMaxColumns","undefined","getColumnState","alwaysVisible","getCanHide","isDisabled","isVisible","columnOptions","map","Tooltip","label","disabled","position","div","Checkbox","flexRender","header","name","id","checked","onChange","getToggleVisibilityHandler","Popover","shadow","Target","ActionIcon","Tertiary","aria-label","IconSettings","height","Dropdown","miw","pb","ScrollArea","Autosize","mah","type","Stack","gap","Divider","my","mx","Text","size","c"],"mappings":";;;;+BA2CaA;;;eAAAA;;;;;gCA3Cc;oBACgD;0BACnC;0BACf;AAgCzB,IAAMC,kBAEF;IACAC,QAAQ,SAARA,OAASC;eAAQ,AAAC,yBAA4B,OAAJA,KAAI;;IAC9CC,qBAAqB;IACrBC,sBAAsB;AAC1B;AAEO,IAAML,uBAAuB;QAAEM,cAAAA,OAAOC,gBAAAA;IACzC,IAAkF,mBAAA,qBAC3EN,iBACAM,UAFAC,uBAA2E,iBAA3EA,sBAAsBN,SAAqD,iBAArDA,QAAQE,sBAA6C,iBAA7CA,qBAAqBC,uBAAwB,iBAAxBA;IAK1D,IAAMI,aAAaH,MAAMI,iBAAiB;IAC1C,IAAMC,kBAAkBF,WAAWG,MAAM,CAAC,SAACC;YAAYA;eAAD,GAACA,yBAAAA,OAAOC,SAAS,CAACC,IAAI,cAArBF,6CAAAA,uBAAuBG,aAAa;;IAC3F,IAAMC,uBAAuBN,gBAAgBC,MAAM,CAAC,SAACC;eAAWA,OAAOK,YAAY;OAAIC,MAAM;IAE7F,6EAA6E;IAC7E,IAAMC,sBACFZ,yBAAyBa,aAAab,uBAAuB,IAAIA,uBAAuBa;IAE5F,IAAIV,gBAAgBQ,MAAM,IAAI,GAAG;QAC7B,OAAO;IACX;IAEA,IAAMG,iBAAiB,wBAACT;QACpB,IAAMU,gBAAgB,CAACV,OAAOW,UAAU;QACxC,IAAMC,aACF,AAACL,wBAAwBC,aACrBJ,wBAAwBG,uBACxB,CAACP,OAAOK,YAAY,MACxBK;QACJ,IAAMG,YAAYb,OAAOK,YAAY,MAAMK;QAC3C,OAAO;YAACA,eAAAA;YAAeE,YAAAA;YAAYC,WAAAA;QAAS;IAChD;IAEA,IAAMC,gBAAgBhB,gBAAgBiB,GAAG,CAAC,SAACf;QACvC,IAA+CS,kBAAAA,eAAeT,SAAvDU,gBAAwCD,gBAAxCC,eAAeE,aAAyBH,gBAAzBG,YAAYC,YAAaJ,gBAAbI;QAElC,qBACI,qBAACG,aAAO;YACJC,OAAOP,gBAAgBlB,uBAAuBD;YAC9C2B,UAAU,CAACN;YACXO,UAAS;sBAGT,cAAA,qBAACC;0BACG,cAAA,qBAACC,cAAQ;oBACLJ,OAAOK,IAAAA,sBAAU,EAACtB,OAAOC,SAAS,CAACsB,MAAM,EAAE;wBACvC9B,OAAAA;wBACAO,QAAAA;wBACAuB,QAAQ;4BAACvB,QAAAA;wBAAM;oBACnB;oBACAwB,MAAMxB,OAAOyB,EAAE;oBACfC,SAASb;oBACTK,UAAUN;oBACVe,UAAU3B,OAAO4B,0BAA0B;;;WAZ9C5B,OAAOyB,EAAE;IAiB1B;IAEA,qBACI,sBAACI,aAAO;QAACV,UAAS;QAAaW,QAAO;;0BAClC,qBAACD,aAAO,CAACE,MAAM;0BACX,cAAA,qBAACf,aAAO;oBAACC,OAAM;8BACX,cAAA,qBAACe,sBAAU,CAACC,QAAQ;wBAACC,cAAW;kCAC5B,cAAA,qBAACC,8BAAY;4BAACC,QAAQ;;;;;0BAIlC,sBAACP,aAAO,CAACQ,QAAQ;gBAACC,KAAK;gBAAKC,IAAG;;kCAC3B,qBAACC,gBAAU,CAACC,QAAQ;wBAACC,KAAK;wBAAKC,MAAK;kCAChC,cAAA,qBAACC,WAAK;4BAACC,KAAI;sCAAM/B;;;oBAEpBP,qCACG;;0CACI,qBAACuC,aAAO;gCAACC,IAAG;gCAAKC,IAAG;;0CACpB,qBAACC,UAAI;gCAACC,MAAK;gCAAKC,GAAE;0CACb,OAAO9D,WAAW,aAAaA,OAAOkB,uBAAuBlB;;;;;;;;AAO1F"}
|
|
1
|
+
{"version":3,"sources":["../../../../../src/components/Table/table-columns-selector/TableColumnsSelector.tsx"],"sourcesContent":["import {IconSettings} from '@coveord/plasma-react-icons';\nimport {Checkbox, Divider, Popover, ScrollArea, Stack, Text, Tooltip} from '@mantine/core';\nimport {flexRender, Header, Table} from '@tanstack/react-table';\nimport {ActionIcon} from '../../ActionIcon/ActionIcon.js';\n\nexport interface TableColumnsSelectorOptions {\n /**\n * The maximum number of columns that can be selected at the same time.\n * If defined a footer will render with the remaining number of columns that can be selected.\n * Must be a positive integer (greater than 0).\n */\n maxSelectableColumns?: number;\n /**\n * The content to display in the footer when maxSelectableColumns is defined.\n * Can be a string or a function that receives the maxSelectableColumns value.\n * @default (max) => `You can display up to ${max} columns.`\n */\n footer?: string | ((maxSelectableColumns: number) => string);\n /**\n * The tooltip to display when the user hovers over a disabled checkbox because of the limit.\n * @default 'You have reached the maximum display limit.'\n */\n limitReachedTooltip?: string;\n /**\n * The tooltip to display when the user hovers over a disabled checkbox because a column cannot be hidden.\n * @default 'This column is always visible.'\n */\n alwaysVisibleTooltip?: string;\n}\n\nexport interface TableColumnsSelectorProps {\n table: Table<unknown>;\n options?: TableColumnsSelectorOptions;\n}\n\nconst DEFAULT_OPTIONS: Omit<TableColumnsSelectorOptions, 'footer'> & {\n footer: (maxSelectableColumns: number) => string;\n} = {\n footer: (max) => `You can display up to ${max} columns.`,\n limitReachedTooltip: 'You have reached the maximum display limit.',\n alwaysVisibleTooltip: 'This column is always visible.',\n};\n\nexport const TableColumnsSelector = ({table, options}: TableColumnsSelectorProps) => {\n const {maxSelectableColumns, footer, limitReachedTooltip, alwaysVisibleTooltip} = {\n ...DEFAULT_OPTIONS,\n ...options,\n };\n\n const allColumns = table.getAllLeafColumns();\n const filteredColumns = allColumns.filter((column) => !column.columnDef.meta?.controlColumn);\n const selectedColumnsCount = filteredColumns.filter((column) => column.getIsVisible()).length;\n\n // Validate maxSelectableColumns - must be a positive integer to be effective\n const effectiveMaxColumns =\n maxSelectableColumns !== undefined && maxSelectableColumns > 0 ? maxSelectableColumns : undefined;\n\n if (filteredColumns.length <= 0) {\n return null;\n }\n\n const getColumnState = (column: (typeof filteredColumns)[number]) => {\n const alwaysVisible = !column.getCanHide();\n const isDisabled =\n (effectiveMaxColumns !== undefined &&\n selectedColumnsCount >= effectiveMaxColumns &&\n !column.getIsVisible()) ||\n alwaysVisible;\n const isVisible = column.getIsVisible() || alwaysVisible;\n return {alwaysVisible, isDisabled, isVisible};\n };\n\n const columnOptions = filteredColumns.map((column) => {\n const {alwaysVisible, isDisabled, isVisible} = getColumnState(column);\n\n return (\n <Tooltip\n label={alwaysVisible ? alwaysVisibleTooltip : limitReachedTooltip}\n disabled={!isDisabled}\n position=\"left\"\n key={column.id}\n >\n <div>\n <Checkbox\n label={flexRender(column.columnDef.header, {\n table,\n column,\n header: {column} as Header<unknown, unknown>,\n })}\n name={column.id}\n checked={isVisible}\n disabled={isDisabled}\n onChange={column.getToggleVisibilityHandler()}\n />\n </div>\n </Tooltip>\n );\n });\n\n return (\n <Popover position=\"bottom-end\" shadow=\"md\">\n <Popover.Target>\n <Tooltip label=\"Edit columns\">\n <ActionIcon.Tertiary aria-label=\"settings\">\n <IconSettings height={16} />\n </ActionIcon.Tertiary>\n </Tooltip>\n </Popover.Target>\n <Popover.Dropdown miw={270} pb=\"xs\">\n <ScrollArea.Autosize mah={200} type=\"auto\">\n <Stack gap=\"xs\">{columnOptions}</Stack>\n </ScrollArea.Autosize>\n {effectiveMaxColumns && (\n <>\n <Divider my=\"xs\" mx=\"-sm\" />\n <Text size=\"sm\" c=\"dimmed\">\n {typeof footer === 'function' ? footer(effectiveMaxColumns) : footer}\n </Text>\n </>\n )}\n </Popover.Dropdown>\n </Popover>\n );\n};\n"],"names":["TableColumnsSelector","DEFAULT_OPTIONS","footer","max","limitReachedTooltip","alwaysVisibleTooltip","table","options","maxSelectableColumns","allColumns","getAllLeafColumns","filteredColumns","filter","column","columnDef","meta","controlColumn","selectedColumnsCount","getIsVisible","length","effectiveMaxColumns","undefined","getColumnState","alwaysVisible","getCanHide","isDisabled","isVisible","columnOptions","map","Tooltip","label","disabled","position","div","Checkbox","flexRender","header","name","id","checked","onChange","getToggleVisibilityHandler","Popover","shadow","Target","ActionIcon","Tertiary","aria-label","IconSettings","height","Dropdown","miw","pb","ScrollArea","Autosize","mah","type","Stack","gap","Divider","my","mx","Text","size","c"],"mappings":";;;;+BA2CaA;;;eAAAA;;;;;gCA3Cc;oBACgD;0BACnC;0BACf;AAgCzB,IAAMC,kBAEF;IACAC,QAAQ,SAARA,OAASC;eAAQ,AAAC,yBAA4B,OAAJA,KAAI;;IAC9CC,qBAAqB;IACrBC,sBAAsB;AAC1B;AAEO,IAAML,uBAAuB;QAAEM,cAAAA,OAAOC,gBAAAA;IACzC,IAAkF,mBAAA,qBAC3EN,iBACAM,UAFAC,uBAA2E,iBAA3EA,sBAAsBN,SAAqD,iBAArDA,QAAQE,sBAA6C,iBAA7CA,qBAAqBC,uBAAwB,iBAAxBA;IAK1D,IAAMI,aAAaH,MAAMI,iBAAiB;IAC1C,IAAMC,kBAAkBF,WAAWG,MAAM,CAAC,SAACC;YAAYA;eAAD,GAACA,yBAAAA,OAAOC,SAAS,CAACC,IAAI,cAArBF,6CAAAA,uBAAuBG,aAAa;;IAC3F,IAAMC,uBAAuBN,gBAAgBC,MAAM,CAAC,SAACC;eAAWA,OAAOK,YAAY;OAAIC,MAAM;IAE7F,6EAA6E;IAC7E,IAAMC,sBACFZ,yBAAyBa,aAAab,uBAAuB,IAAIA,uBAAuBa;IAE5F,IAAIV,gBAAgBQ,MAAM,IAAI,GAAG;QAC7B,OAAO;IACX;IAEA,IAAMG,iBAAiB,wBAACT;QACpB,IAAMU,gBAAgB,CAACV,OAAOW,UAAU;QACxC,IAAMC,aACF,AAACL,wBAAwBC,aACrBJ,wBAAwBG,uBACxB,CAACP,OAAOK,YAAY,MACxBK;QACJ,IAAMG,YAAYb,OAAOK,YAAY,MAAMK;QAC3C,OAAO;YAACA,eAAAA;YAAeE,YAAAA;YAAYC,WAAAA;QAAS;IAChD;IAEA,IAAMC,gBAAgBhB,gBAAgBiB,GAAG,CAAC,SAACf;QACvC,IAA+CS,kBAAAA,eAAeT,SAAvDU,gBAAwCD,gBAAxCC,eAAeE,aAAyBH,gBAAzBG,YAAYC,YAAaJ,gBAAbI;QAElC,qBACI,qBAACG,aAAO;YACJC,OAAOP,gBAAgBlB,uBAAuBD;YAC9C2B,UAAU,CAACN;YACXO,UAAS;sBAGT,cAAA,qBAACC;0BACG,cAAA,qBAACC,cAAQ;oBACLJ,OAAOK,IAAAA,sBAAU,EAACtB,OAAOC,SAAS,CAACsB,MAAM,EAAE;wBACvC9B,OAAAA;wBACAO,QAAAA;wBACAuB,QAAQ;4BAACvB,QAAAA;wBAAM;oBACnB;oBACAwB,MAAMxB,OAAOyB,EAAE;oBACfC,SAASb;oBACTK,UAAUN;oBACVe,UAAU3B,OAAO4B,0BAA0B;;;WAZ9C5B,OAAOyB,EAAE;IAiB1B;IAEA,qBACI,sBAACI,aAAO;QAACV,UAAS;QAAaW,QAAO;;0BAClC,qBAACD,aAAO,CAACE,MAAM;0BACX,cAAA,qBAACf,aAAO;oBAACC,OAAM;8BACX,cAAA,qBAACe,sBAAU,CAACC,QAAQ;wBAACC,cAAW;kCAC5B,cAAA,qBAACC,8BAAY;4BAACC,QAAQ;;;;;0BAIlC,sBAACP,aAAO,CAACQ,QAAQ;gBAACC,KAAK;gBAAKC,IAAG;;kCAC3B,qBAACC,gBAAU,CAACC,QAAQ;wBAACC,KAAK;wBAAKC,MAAK;kCAChC,cAAA,qBAACC,WAAK;4BAACC,KAAI;sCAAM/B;;;oBAEpBP,qCACG;;0CACI,qBAACuC,aAAO;gCAACC,IAAG;gCAAKC,IAAG;;0CACpB,qBAACC,UAAI;gCAACC,MAAK;gCAAKC,GAAE;0CACb,OAAO9D,WAAW,aAAaA,OAAOkB,uBAAuBlB;;;;;;;;AAO1F"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Plasmantine.d.ts","sourceRoot":"","sources":["../../../src/theme/Plasmantine.tsx"],"names":[],"mappings":"AAAA,OAAO,sBAAsB,CAAC;AAE9B,OAAO,
|
|
1
|
+
{"version":3,"file":"Plasmantine.d.ts","sourceRoot":"","sources":["../../../src/theme/Plasmantine.tsx"],"names":[],"mappings":"AAAA,OAAO,sBAAsB,CAAC;AAE9B,OAAO,EAIH,oBAAoB,EAGvB,MAAM,eAAe,CAAC;AACvB,OAAO,EAAC,iBAAiB,EAAC,MAAM,OAAO,CAAC;AAYxC,eAAO,MAAM,WAAW,EAAE,iBAAiB,CAAC,oBAAoB,CAkB/D,CAAC"}
|
|
@@ -17,17 +17,37 @@ var _core = require("@mantine/core");
|
|
|
17
17
|
var _mergeCSSVariablesResolvers = require("./mergeCSSVariablesResolvers.js");
|
|
18
18
|
var _plasmaCSSVariablesResolver = require("./plasmaCSSVariablesResolver.js");
|
|
19
19
|
var _Theme = require("./Theme.js");
|
|
20
|
+
var testThemeOverride = (0, _core.createTheme)({
|
|
21
|
+
components: {
|
|
22
|
+
Combobox: _core.Combobox.extend({
|
|
23
|
+
defaultProps: {
|
|
24
|
+
middlewares: {
|
|
25
|
+
inline: true
|
|
26
|
+
}
|
|
27
|
+
}
|
|
28
|
+
}),
|
|
29
|
+
Popover: _core.Popover.extend({
|
|
30
|
+
defaultProps: {
|
|
31
|
+
middlewares: {
|
|
32
|
+
inline: true
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
})
|
|
36
|
+
}
|
|
37
|
+
});
|
|
20
38
|
var Plasmantine = function Plasmantine(_0) {
|
|
21
|
-
var children = _0.children, externalTheme = _0.theme, externalCSSVariablesResolver = _0.cssVariablesResolver, others = _object_without_properties._(_0, [
|
|
39
|
+
var children = _0.children, externalTheme = _0.theme, externalCSSVariablesResolver = _0.cssVariablesResolver, env = _0.env, others = _object_without_properties._(_0, [
|
|
22
40
|
"children",
|
|
23
41
|
"theme",
|
|
24
|
-
"cssVariablesResolver"
|
|
42
|
+
"cssVariablesResolver",
|
|
43
|
+
"env"
|
|
25
44
|
]);
|
|
26
|
-
var theme = (0, _core.mergeThemeOverrides)(_Theme.plasmaTheme, externalTheme);
|
|
45
|
+
var theme = env === 'test' ? (0, _core.mergeThemeOverrides)(_Theme.plasmaTheme, testThemeOverride, externalTheme) : (0, _core.mergeThemeOverrides)(_Theme.plasmaTheme, externalTheme);
|
|
27
46
|
var cssVariablesResolver = (0, _mergeCSSVariablesResolvers.mergeCSSVariablesResolvers)(_plasmaCSSVariablesResolver.plasmaCSSVariablesResolver, externalCSSVariablesResolver);
|
|
28
47
|
return /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.MantineProvider, _object_spread_props._(_object_spread._({
|
|
29
48
|
theme: theme,
|
|
30
|
-
cssVariablesResolver: cssVariablesResolver
|
|
49
|
+
cssVariablesResolver: cssVariablesResolver,
|
|
50
|
+
env: env
|
|
31
51
|
}, others), {
|
|
32
52
|
children: children
|
|
33
53
|
}));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/theme/Plasmantine.tsx"],"sourcesContent":["import '../styles/global.css';\n\nimport {MantineProvider
|
|
1
|
+
{"version":3,"sources":["../../../src/theme/Plasmantine.tsx"],"sourcesContent":["import '../styles/global.css';\n\nimport {\n Combobox,\n createTheme,\n MantineProvider,\n MantineProviderProps,\n mergeThemeOverrides,\n Popover,\n} from '@mantine/core';\nimport {FunctionComponent} from 'react';\nimport {mergeCSSVariablesResolvers} from './mergeCSSVariablesResolvers.js';\nimport {plasmaCSSVariablesResolver} from './plasmaCSSVariablesResolver.js';\nimport {plasmaTheme} from './Theme.js';\n\nconst testThemeOverride = createTheme({\n components: {\n Combobox: Combobox.extend({defaultProps: {middlewares: {inline: true}}}),\n Popover: Popover.extend({defaultProps: {middlewares: {inline: true}}}),\n },\n});\n\nexport const Plasmantine: FunctionComponent<MantineProviderProps> = ({\n children,\n theme: externalTheme,\n cssVariablesResolver: externalCSSVariablesResolver,\n env,\n ...others\n}) => {\n const theme =\n env === 'test'\n ? mergeThemeOverrides(plasmaTheme, testThemeOverride, externalTheme)\n : mergeThemeOverrides(plasmaTheme, externalTheme);\n const cssVariablesResolver = mergeCSSVariablesResolvers(plasmaCSSVariablesResolver, externalCSSVariablesResolver);\n\n return (\n <MantineProvider theme={theme} cssVariablesResolver={cssVariablesResolver} env={env} {...others}>\n {children}\n </MantineProvider>\n );\n};\n"],"names":["Plasmantine","testThemeOverride","createTheme","components","Combobox","extend","defaultProps","middlewares","inline","Popover","children","theme","externalTheme","cssVariablesResolver","externalCSSVariablesResolver","env","others","mergeThemeOverrides","plasmaTheme","mergeCSSVariablesResolvers","plasmaCSSVariablesResolver","MantineProvider"],"mappings":";;;;+BAsBaA;;;eAAAA;;;;;;;QAtBN;oBASA;0CAEkC;0CACA;qBACf;AAE1B,IAAMC,oBAAoBC,IAAAA,iBAAW,EAAC;IAClCC,YAAY;QACRC,UAAUA,cAAQ,CAACC,MAAM,CAAC;YAACC,cAAc;gBAACC,aAAa;oBAACC,QAAQ;gBAAI;YAAC;QAAC;QACtEC,SAASA,aAAO,CAACJ,MAAM,CAAC;YAACC,cAAc;gBAACC,aAAa;oBAACC,QAAQ;gBAAI;YAAC;QAAC;IACxE;AACJ;AAEO,IAAMR,cAAuD;QAChEU,cAAAA,UACAC,AAAOC,mBAAPD,OACAE,AAAsBC,kCAAtBD,sBACAE,SAAAA,KACGC;;;;;;IAEH,IAAML,QACFI,QAAQ,SACFE,IAAAA,yBAAmB,EAACC,kBAAW,EAAEjB,mBAAmBW,iBACpDK,IAAAA,yBAAmB,EAACC,kBAAW,EAAEN;IAC3C,IAAMC,uBAAuBM,IAAAA,sDAA0B,EAACC,sDAA0B,EAAEN;IAEpF,qBACI,qBAACO,qBAAe;QAACV,OAAOA;QAAOE,sBAAsBA;QAAsBE,KAAKA;OAASC;kBACpFN;;AAGb"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Theme.d.ts","sourceRoot":"","sources":["../../../src/theme/Theme.tsx"],"names":[],"mappings":"AAYA,OAAO,EAuBH,oBAAoB,EAuBvB,MAAM,eAAe,CAAC;AAgEvB,eAAO,MAAM,WAAW,EAAE,
|
|
1
|
+
{"version":3,"file":"Theme.d.ts","sourceRoot":"","sources":["../../../src/theme/Theme.tsx"],"names":[],"mappings":"AAYA,OAAO,EAuBH,oBAAoB,EAuBvB,MAAM,eAAe,CAAC;AAgEvB,eAAO,MAAM,WAAW,EAAE,oBAubxB,CAAC"}
|