@servicetitan/design-system 14.0.0 → 14.0.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/dist/components/AnvilSelect/AnvilSelect.d.ts +1 -1
- package/dist/components/AnvilSelect/AnvilSelect.js.map +1 -1
- package/dist/components/AnvilSelect/components/Trigger.css +1 -0
- package/dist/components/AnvilSelect/components/Trigger.css.map +1 -1
- package/dist/components/AnvilSelect/index.css +1 -0
- package/dist/components/AnvilSelect/index.css.map +1 -1
- package/dist/components/Button/Button.css +23 -36
- package/dist/components/Button/Button.css.map +1 -1
- package/dist/components/Button/Button.js +1 -6
- package/dist/components/Button/Button.js.map +1 -1
- package/dist/components/Button/index.css +23 -36
- package/dist/components/Button/index.css.map +1 -1
- package/dist/components/Checkbox/Checkbox.css +1 -1
- package/dist/components/Checkbox/index.css +1 -1
- package/dist/components/DatePicker/DatePicker.css +1 -1
- package/dist/components/DatePicker/index.css +1 -1
- package/dist/components/DateRangePicker/DateRangePicker.js +23 -8
- package/dist/components/DateRangePicker/DateRangePicker.js.map +1 -1
- package/dist/components/FlowCard/FlowCard.d.ts +2 -2
- package/dist/components/FlowCard/FlowCard.js.map +1 -1
- package/dist/components/Icon/Icon.css +24 -37
- package/dist/components/Icon/Icon.css.map +1 -1
- package/dist/components/Icon/index.css +24 -37
- package/dist/components/Icon/index.css.map +1 -1
- package/dist/components/Mask/Mask.css +1 -1
- package/dist/components/Mask/index.css +1 -1
- package/dist/components/Radio/Radio.css +1 -1
- package/dist/components/Radio/index.css +1 -1
- package/dist/components/Table/Table.css +16 -1
- package/dist/components/Table/Table.css.map +1 -1
- package/dist/components/Table/index.css +16 -1
- package/dist/components/Table/index.css.map +1 -1
- package/dist/components/Takeover/Takeover.js +3 -1
- package/dist/components/Takeover/Takeover.js.map +1 -1
- package/dist/components/Thumbnail/Thumbnail.css +1 -1
- package/dist/components/Thumbnail/index.css +1 -1
- package/dist/components/TimePicker/TimePicker.js +12 -11
- package/dist/components/TimePicker/TimePicker.js.map +1 -1
- package/dist/components/TimePicker/TimePicker.test.js +12 -8
- package/dist/components/TimePicker/TimePicker.test.js.map +1 -1
- package/dist/components/TimePicker/utils/timezoneUtils.js +1 -1
- package/dist/components/TimePicker/utils/timezoneUtils.js.map +1 -1
- package/dist/components/Toast/Toast.d.ts +5 -0
- package/dist/components/Toast/Toast.js +9 -1
- package/dist/components/Toast/Toast.js.map +1 -1
- package/dist/components/Toast/ToastGroup.js +3 -1
- package/dist/components/Toast/ToastGroup.js.map +1 -1
- package/dist/components/Toast/ToastGroupContext.d.ts +4 -0
- package/dist/components/Toast/ToastGroupContext.js +3 -0
- package/dist/components/Toast/ToastGroupContext.js.map +1 -0
- package/dist/components/index.css +44 -41
- package/dist/components/index.css.map +1 -1
- package/dist/global/index.css +1 -1
- package/dist/global/version.css +1 -1
- package/dist/system-light.css +1 -1
- package/dist/system-light.min.css +1 -1
- package/dist/system.css +45 -42
- package/dist/system.css.map +1 -1
- package/dist/system.min.css +2 -2
- package/dist/themes/index.css +1 -1
- package/dist/themes/kendo/index.css +1 -1
- package/dist/utilities/TimezoneProvider/TimezoneProvider.test.js +36 -10
- package/dist/utilities/TimezoneProvider/TimezoneProvider.test.js.map +1 -1
- package/package.json +9 -8
|
@@ -19,17 +19,21 @@ describe('TimePicker', () => {
|
|
|
19
19
|
});
|
|
20
20
|
it('should pass through data automation attributes', () => __awaiter(void 0, void 0, void 0, function* () {
|
|
21
21
|
const { container } = render(React.createElement(TimePicker, { defaultTimeSignifier: "AM", step: 15, disableDropdown: false, format: "hh:mm xm", open: true, className: "m-b-7", "data-auto-sel": "automation-selector" }));
|
|
22
|
-
|
|
23
|
-
|
|
22
|
+
yield waitFor(() => {
|
|
23
|
+
const element = container.querySelector('[data-auto-sel="automation-selector"]');
|
|
24
|
+
expect(element).not.toBeNull();
|
|
25
|
+
});
|
|
24
26
|
}));
|
|
25
|
-
it('should pass data automation attributes to portal', () => {
|
|
27
|
+
it('should pass data automation attributes to portal', () => __awaiter(void 0, void 0, void 0, function* () {
|
|
26
28
|
const { container, baseElement } = render(React.createElement(TimePicker, { defaultTimeSignifier: "AM", step: 15, disableDropdown: false, format: "hh:mm xm", open: true, className: "m-b-7", portalDataAttributes: {
|
|
27
29
|
'data-auto-sel': 'automation-selector',
|
|
28
30
|
} }));
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
31
|
+
yield waitFor(() => {
|
|
32
|
+
const nonPortalElement = container.querySelector('[data-auto-sel="automation-selector"]');
|
|
33
|
+
const portalElement = baseElement.querySelector('[data-auto-sel="automation-selector"]');
|
|
34
|
+
expect(nonPortalElement).toBeNull();
|
|
35
|
+
expect(portalElement).not.toBeNull();
|
|
36
|
+
});
|
|
37
|
+
}));
|
|
34
38
|
});
|
|
35
39
|
//# sourceMappingURL=TimePicker.test.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TimePicker.test.js","sourceRoot":"","sources":["../../../src/components/TimePicker/TimePicker.test.tsx"],"names":[],"mappings":";;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AACzD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE1C,QAAQ,CAAC,YAAY,EAAE,GAAG,EAAE;IAC3B,UAAU,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC;IAE/C,EAAE,CAAC,gCAAgC,EAAE,GAAG,EAAE;QACzC,MAAM,EAAE,SAAS,EAAE,GAAG,MAAM,CAC3B,oBAAC,UAAU,IAAC,MAAM,EAAC,UAAU,EAAC,WAAW,EAAC,OAAO,GAAG,CACpD,CAAC;QAEF,MAAM,OAAO,GAAG,SAAS,CAAC,aAAa,CAAC,uBAAuB,CAAC,CAAC;QAEjE,MAAM,CAAC,OAAO,CAAC,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC;IAChC,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,gDAAgD,EAAE,GAAS,EAAE;QAC/D,MAAM,EAAE,SAAS,EAAE,GAAG,MAAM,CAC3B,oBAAC,UAAU,IACV,oBAAoB,EAAC,IAAI,EACzB,IAAI,EAAE,EAAE,EACR,eAAe,EAAE,KAAK,EACtB,MAAM,EAAC,UAAU,EACjB,IAAI,QACJ,SAAS,EAAC,OAAO,mBACH,qBAAqB,GAClC,CACF,CAAC;QAEF,MAAM,OAAO,GAAG,MAAM,OAAO,
|
|
1
|
+
{"version":3,"file":"TimePicker.test.js","sourceRoot":"","sources":["../../../src/components/TimePicker/TimePicker.test.tsx"],"names":[],"mappings":";;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AACzD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE1C,QAAQ,CAAC,YAAY,EAAE,GAAG,EAAE;IAC3B,UAAU,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC;IAE/C,EAAE,CAAC,gCAAgC,EAAE,GAAG,EAAE;QACzC,MAAM,EAAE,SAAS,EAAE,GAAG,MAAM,CAC3B,oBAAC,UAAU,IAAC,MAAM,EAAC,UAAU,EAAC,WAAW,EAAC,OAAO,GAAG,CACpD,CAAC;QAEF,MAAM,OAAO,GAAG,SAAS,CAAC,aAAa,CAAC,uBAAuB,CAAC,CAAC;QAEjE,MAAM,CAAC,OAAO,CAAC,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC;IAChC,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,gDAAgD,EAAE,GAAS,EAAE;QAC/D,MAAM,EAAE,SAAS,EAAE,GAAG,MAAM,CAC3B,oBAAC,UAAU,IACV,oBAAoB,EAAC,IAAI,EACzB,IAAI,EAAE,EAAE,EACR,eAAe,EAAE,KAAK,EACtB,MAAM,EAAC,UAAU,EACjB,IAAI,QACJ,SAAS,EAAC,OAAO,mBACH,qBAAqB,GAClC,CACF,CAAC;QAEF,MAAM,OAAO,CAAC,GAAG,EAAE;YAClB,MAAM,OAAO,GAAG,SAAS,CAAC,aAAa,CACtC,uCAAuC,CACvC,CAAC;YAEF,MAAM,CAAC,OAAO,CAAC,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC;QAChC,CAAC,CAAC,CAAC;IACJ,CAAC,CAAA,CAAC,CAAC;IAEH,EAAE,CAAC,kDAAkD,EAAE,GAAS,EAAE;QACjE,MAAM,EAAE,SAAS,EAAE,WAAW,EAAE,GAAG,MAAM,CACxC,oBAAC,UAAU,IACV,oBAAoB,EAAC,IAAI,EACzB,IAAI,EAAE,EAAE,EACR,eAAe,EAAE,KAAK,EACtB,MAAM,EAAC,UAAU,EACjB,IAAI,QACJ,SAAS,EAAC,OAAO,EACjB,oBAAoB,EAAE;gBACrB,eAAe,EAAE,qBAAqB;aACtC,GACA,CACF,CAAC;QAEF,MAAM,OAAO,CAAC,GAAG,EAAE;YAClB,MAAM,gBAAgB,GAAG,SAAS,CAAC,aAAa,CAC/C,uCAAuC,CACvC,CAAC;YACF,MAAM,aAAa,GAAG,WAAW,CAAC,aAAa,CAC9C,uCAAuC,CACvC,CAAC;YAEF,MAAM,CAAC,gBAAgB,CAAC,CAAC,QAAQ,EAAE,CAAC;YACpC,MAAM,CAAC,aAAa,CAAC,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC;QACtC,CAAC,CAAC,CAAC;IACJ,CAAC,CAAA,CAAC,CAAC;AACJ,CAAC,CAAC,CAAC","sourcesContent":["import React from 'react';\nimport { render, waitFor } from '@testing-library/react';\nimport { TimePicker } from './TimePicker';\n\ndescribe('TimePicker', () => {\n\tbeforeEach(() => jest.spyOn(console, 'error'));\n\n\tit('should have custom placeholder', () => {\n\t\tconst { container } = render(\n\t\t\t<TimePicker format=\"hh:mm xm\" placeholder=\"hh:mm\" />\n\t\t);\n\n\t\tconst element = container.querySelector('[placeholder=\"hh:mm\"]');\n\n\t\texpect(element).not.toBeNull();\n\t});\n\n\tit('should pass through data automation attributes', async () => {\n\t\tconst { container } = render(\n\t\t\t<TimePicker\n\t\t\t\tdefaultTimeSignifier=\"AM\"\n\t\t\t\tstep={15}\n\t\t\t\tdisableDropdown={false}\n\t\t\t\tformat=\"hh:mm xm\"\n\t\t\t\topen\n\t\t\t\tclassName=\"m-b-7\"\n\t\t\t\tdata-auto-sel=\"automation-selector\"\n\t\t\t/>\n\t\t);\n\n\t\tawait waitFor(() => {\n\t\t\tconst element = container.querySelector(\n\t\t\t\t'[data-auto-sel=\"automation-selector\"]'\n\t\t\t);\n\n\t\t\texpect(element).not.toBeNull();\n\t\t});\n\t});\n\n\tit('should pass data automation attributes to portal', async () => {\n\t\tconst { container, baseElement } = render(\n\t\t\t<TimePicker\n\t\t\t\tdefaultTimeSignifier=\"AM\"\n\t\t\t\tstep={15}\n\t\t\t\tdisableDropdown={false}\n\t\t\t\tformat=\"hh:mm xm\"\n\t\t\t\topen\n\t\t\t\tclassName=\"m-b-7\"\n\t\t\t\tportalDataAttributes={{\n\t\t\t\t\t'data-auto-sel': 'automation-selector',\n\t\t\t\t}}\n\t\t\t/>\n\t\t);\n\n\t\tawait waitFor(() => {\n\t\t\tconst nonPortalElement = container.querySelector(\n\t\t\t\t'[data-auto-sel=\"automation-selector\"]'\n\t\t\t);\n\t\t\tconst portalElement = baseElement.querySelector(\n\t\t\t\t'[data-auto-sel=\"automation-selector\"]'\n\t\t\t);\n\n\t\t\texpect(nonPortalElement).toBeNull();\n\t\t\texpect(portalElement).not.toBeNull();\n\t\t});\n\t});\n});\n"]}
|
|
@@ -54,7 +54,7 @@ export const dateToTime = (d, tz = localTimezone, format = 'hh:mm xm') => {
|
|
|
54
54
|
return dateTime.toLocaleString({
|
|
55
55
|
hour: '2-digit',
|
|
56
56
|
minute: '2-digit',
|
|
57
|
-
hourCycle: format !== 'hh:mm xm' ? 'h23' :
|
|
57
|
+
hourCycle: format !== 'hh:mm xm' ? 'h23' : 'h12',
|
|
58
58
|
});
|
|
59
59
|
};
|
|
60
60
|
// Returns {min, max} as 24-hour strings within timezone provided
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"timezoneUtils.js","sourceRoot":"","sources":["../../../../src/components/TimePicker/utils/timezoneUtils.ts"],"names":[],"mappings":"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","sourcesContent":["import { DateTime } from 'luxon';\nimport moment from 'moment';\nimport { isValidDate } from './utils';\n\nexport const localTimezone = Intl.DateTimeFormat().resolvedOptions().timeZone;\n\nconst isValidTimeZone = (tz: string) => {\n\tif (!Intl || !Intl.DateTimeFormat().resolvedOptions().timeZone) {\n\t\tthrow new Error('Time zones are not available in this environment');\n\t}\n\n\ttry {\n\t\tIntl.DateTimeFormat(undefined, { timeZone: tz });\n\t\treturn true;\n\t} catch (ex) {\n\t\treturn false;\n\t}\n};\n\nconst parseTimeString = (str: string): Date => {\n\tif (typeof str === 'string') {\n\t\tconst date = moment(str, ['h:m a', 'H:m']).toDate();\n\t\tif (isValidDate(date)) return new Date(date);\n\t}\n\tconsole.warn(\n\t\t`@servicetitan/design-system: parseTimeString(val) invalid val:`,\n\t\tstr\n\t);\n\treturn null;\n};\n\nexport const timeToDate = (\n\ttime: string,\n\ttz = localTimezone,\n\tbaseDate?: Date\n): Date => {\n\tif (tz && !isValidTimeZone(tz)) {\n\t\tconsole.warn(`@servicetitan/design-system: Invalid timezone \"${tz}\"`);\n\t\treturn undefined;\n\t}\n\n\t// Date to return time within, now or based on `date` provided\n\tconst d = !baseDate\n\t\t? DateTime.now().setZone(tz)\n\t\t: DateTime.fromJSDate(baseDate).setZone(tz);\n\n\tconst t = parseTimeString(time); // '11:22 AM' → Date\n\tif (!t) return undefined;\n\n\tconst [h, m] = [t.getHours(), t.getMinutes()];\n\tconst result = d.set({ hour: h, minute: m, second: 0, millisecond: 0 }); // Rounding\n\n\treturn result.toJSDate();\n};\n\nexport const dateToTime = (\n\td: Date,\n\ttz = localTimezone,\n\tformat = 'hh:mm xm'\n): string => {\n\tif (!d || !isValidDate(d)) return undefined;\n\n\tif (tz && !isValidTimeZone(tz)) {\n\t\tconsole.warn(\n\t\t\t`@servicetitan/design-system: dateToTime() has invalid timezone: ${tz}`\n\t\t);\n\t\treturn undefined;\n\t}\n\n\tif (format !== 'hh:mm xm' && format !== 'hh:mm')\n\t\tconsole.warn(\n\t\t\t`@servicetitan/design-system: dateToTime() invalid format \"${format}\", usind \"hh:mm\"`\n\t\t);\n\n\tlet dateTime;\n\n\tif (tz && isValidTimeZone(tz))\n\t\tdateTime = DateTime.fromJSDate(d).setZone(tz);\n\n\treturn dateTime.toLocaleString({\n\t\thour: '2-digit',\n\t\tminute: '2-digit',\n\t\thourCycle: format !== 'hh:mm xm' ? 'h23' : undefined,\n\t});\n};\n\n// Returns {min, max} as 24-hour strings within timezone provided\nexport const consumeMinMax = (\n\tmin: Date | string,\n\tmax: Date | string,\n\ttz = localTimezone\n): { min: string; max: string } => {\n\tlet minStr, maxStr;\n\n\t// both min & max are instances of Date\n\tif (isValidDate(min as Date) && isValidDate(max as Date)) {\n\t\tif (sameDay(min, max, tz)) {\n\t\t\tminStr = dateToTime(min as Date, tz, 'hh:mm');\n\t\t\tmaxStr = dateToTime(max as Date, tz, 'hh:mm');\n\t\t} else {\n\t\t\t// min and max are valid and not same day → use min\n\t\t\tconsole.warn(\n\t\t\t\t`@servicetitan/design-system: TimePicker's min (${min}) & max (${max}) are not in the same day, using max=23:59`\n\t\t\t);\n\t\t\tminStr = dateToTime(min as Date, tz, 'hh:mm');\n\t\t\tmaxStr = '23:59';\n\t\t}\n\t\treturn { min: minStr, max: maxStr };\n\t}\n\n\t// min is Date, max is string\n\tif (isValidDate(min as Date) && !(max instanceof Date)) {\n\t\tconst realMax = parseTimeString(max) ? max : '23:59';\n\t\tminStr = dateToTime(min as Date, tz, 'hh:mm');\n\t\tmaxStr = realMax;\n\n\t\tif (min > timeToDate(realMax, tz, min as Date)) {\n\t\t\t// Reversing min & max\n\t\t\tminStr = realMax;\n\t\t\tmaxStr = dateToTime(min as Date, tz, 'hh:mm');\n\t\t}\n\t\treturn { min: minStr, max: maxStr };\n\t}\n\n\t// min is string, max is Date\n\tif (!(min instanceof Date) && isValidDate(max as Date)) {\n\t\tconst realMin = parseTimeString(min) ? min : '00:00';\n\t\tminStr = realMin;\n\t\tmaxStr = dateToTime(max as Date, tz, 'hh:mm');\n\n\t\tif (max < timeToDate(realMin, tz, max as Date)) {\n\t\t\t// Reversing min & max\n\t\t\tminStr = dateToTime(max as Date, tz, 'hh:mm');\n\t\t\tmaxStr = realMin;\n\t\t}\n\t\treturn { min: minStr, max: maxStr };\n\t}\n\n\t// both min & max are strings\n\tconst minDate = parseTimeString(min as string) || parseTimeString('00:00');\n\tconst maxDate = parseTimeString(max as string) || parseTimeString('23:59');\n\tconst dates = [minDate, maxDate]\n\t\t.sort()\n\t\t.map((d) => dateToTime(d, localTimezone, 'hh:mm'));\n\n\treturn { min: dates[0], max: dates[1] };\n};\n\nconst sameDay = (d1: any, d2: any, tz: string): boolean => {\n\tconst date1 = DateTime.fromJSDate(d1)?.setZone(tz);\n\tconst date2 = DateTime.fromJSDate(d2)?.setZone(tz);\n\n\treturn date1 && date2 && date1.hasSame(date2, 'day');\n};\n\n/**\n * Prioity:\n * 1. min, if min is Date, if not...\n * 2. max, if max is Date, if not...\n * 3. value, if defined, if not...\n * 4. today @ timezone\n */\nexport const getReturnDate = (\n\tmin: Date | string,\n\tmax: Date | string,\n\tvalue?: Date,\n\ttz = localTimezone\n): Date => {\n\tlet returnDate;\n\n\tif (isValidDate(min as Date)) {\n\t\treturnDate = min;\n\t\tif (isValidDate(max as Date)) {\n\t\t\tif (min > max) returnDate = max;\n\t\t}\n\t} else if (isValidDate(max as Date)) {\n\t\treturnDate = max;\n\t} else if (isValidDate(value)) {\n\t\treturnDate = value;\n\t} else {\n\t\treturnDate = new Date();\n\t}\n\n\tconst res = timeToDate('00:00', tz, returnDate as Date);\n\n\treturn res;\n};\n"]}
|
|
1
|
+
{"version":3,"file":"timezoneUtils.js","sourceRoot":"","sources":["../../../../src/components/TimePicker/utils/timezoneUtils.ts"],"names":[],"mappings":"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","sourcesContent":["import { DateTime } from 'luxon';\nimport moment from 'moment';\nimport { isValidDate } from './utils';\n\nexport const localTimezone = Intl.DateTimeFormat().resolvedOptions().timeZone;\n\nconst isValidTimeZone = (tz: string) => {\n\tif (!Intl || !Intl.DateTimeFormat().resolvedOptions().timeZone) {\n\t\tthrow new Error('Time zones are not available in this environment');\n\t}\n\n\ttry {\n\t\tIntl.DateTimeFormat(undefined, { timeZone: tz });\n\t\treturn true;\n\t} catch (ex) {\n\t\treturn false;\n\t}\n};\n\nconst parseTimeString = (str: string): Date => {\n\tif (typeof str === 'string') {\n\t\tconst date = moment(str, ['h:m a', 'H:m']).toDate();\n\t\tif (isValidDate(date)) return new Date(date);\n\t}\n\tconsole.warn(\n\t\t`@servicetitan/design-system: parseTimeString(val) invalid val:`,\n\t\tstr\n\t);\n\treturn null;\n};\n\nexport const timeToDate = (\n\ttime: string,\n\ttz = localTimezone,\n\tbaseDate?: Date\n): Date => {\n\tif (tz && !isValidTimeZone(tz)) {\n\t\tconsole.warn(`@servicetitan/design-system: Invalid timezone \"${tz}\"`);\n\t\treturn undefined;\n\t}\n\n\t// Date to return time within, now or based on `date` provided\n\tconst d = !baseDate\n\t\t? DateTime.now().setZone(tz)\n\t\t: DateTime.fromJSDate(baseDate).setZone(tz);\n\n\tconst t = parseTimeString(time); // '11:22 AM' → Date\n\tif (!t) return undefined;\n\n\tconst [h, m] = [t.getHours(), t.getMinutes()];\n\tconst result = d.set({ hour: h, minute: m, second: 0, millisecond: 0 }); // Rounding\n\n\treturn result.toJSDate();\n};\n\nexport const dateToTime = (\n\td: Date,\n\ttz = localTimezone,\n\tformat = 'hh:mm xm'\n): string => {\n\tif (!d || !isValidDate(d)) return undefined;\n\n\tif (tz && !isValidTimeZone(tz)) {\n\t\tconsole.warn(\n\t\t\t`@servicetitan/design-system: dateToTime() has invalid timezone: ${tz}`\n\t\t);\n\t\treturn undefined;\n\t}\n\n\tif (format !== 'hh:mm xm' && format !== 'hh:mm')\n\t\tconsole.warn(\n\t\t\t`@servicetitan/design-system: dateToTime() invalid format \"${format}\", usind \"hh:mm\"`\n\t\t);\n\n\tlet dateTime;\n\n\tif (tz && isValidTimeZone(tz))\n\t\tdateTime = DateTime.fromJSDate(d).setZone(tz);\n\n\treturn dateTime.toLocaleString({\n\t\thour: '2-digit',\n\t\tminute: '2-digit',\n\t\thourCycle: format !== 'hh:mm xm' ? 'h23' : 'h12',\n\t});\n};\n\n// Returns {min, max} as 24-hour strings within timezone provided\nexport const consumeMinMax = (\n\tmin: Date | string,\n\tmax: Date | string,\n\ttz = localTimezone\n): { min: string; max: string } => {\n\tlet minStr, maxStr;\n\n\t// both min & max are instances of Date\n\tif (isValidDate(min as Date) && isValidDate(max as Date)) {\n\t\tif (sameDay(min, max, tz)) {\n\t\t\tminStr = dateToTime(min as Date, tz, 'hh:mm');\n\t\t\tmaxStr = dateToTime(max as Date, tz, 'hh:mm');\n\t\t} else {\n\t\t\t// min and max are valid and not same day → use min\n\t\t\tconsole.warn(\n\t\t\t\t`@servicetitan/design-system: TimePicker's min (${min}) & max (${max}) are not in the same day, using max=23:59`\n\t\t\t);\n\t\t\tminStr = dateToTime(min as Date, tz, 'hh:mm');\n\t\t\tmaxStr = '23:59';\n\t\t}\n\t\treturn { min: minStr, max: maxStr };\n\t}\n\n\t// min is Date, max is string\n\tif (isValidDate(min as Date) && !(max instanceof Date)) {\n\t\tconst realMax = parseTimeString(max) ? max : '23:59';\n\t\tminStr = dateToTime(min as Date, tz, 'hh:mm');\n\t\tmaxStr = realMax;\n\n\t\tif (min > timeToDate(realMax, tz, min as Date)) {\n\t\t\t// Reversing min & max\n\t\t\tminStr = realMax;\n\t\t\tmaxStr = dateToTime(min as Date, tz, 'hh:mm');\n\t\t}\n\t\treturn { min: minStr, max: maxStr };\n\t}\n\n\t// min is string, max is Date\n\tif (!(min instanceof Date) && isValidDate(max as Date)) {\n\t\tconst realMin = parseTimeString(min) ? min : '00:00';\n\t\tminStr = realMin;\n\t\tmaxStr = dateToTime(max as Date, tz, 'hh:mm');\n\n\t\tif (max < timeToDate(realMin, tz, max as Date)) {\n\t\t\t// Reversing min & max\n\t\t\tminStr = dateToTime(max as Date, tz, 'hh:mm');\n\t\t\tmaxStr = realMin;\n\t\t}\n\t\treturn { min: minStr, max: maxStr };\n\t}\n\n\t// both min & max are strings\n\tconst minDate = parseTimeString(min as string) || parseTimeString('00:00');\n\tconst maxDate = parseTimeString(max as string) || parseTimeString('23:59');\n\tconst dates = [minDate, maxDate]\n\t\t.sort()\n\t\t.map((d) => dateToTime(d, localTimezone, 'hh:mm'));\n\n\treturn { min: dates[0], max: dates[1] };\n};\n\nconst sameDay = (d1: any, d2: any, tz: string): boolean => {\n\tconst date1 = DateTime.fromJSDate(d1)?.setZone(tz);\n\tconst date2 = DateTime.fromJSDate(d2)?.setZone(tz);\n\n\treturn date1 && date2 && date1.hasSame(date2, 'day');\n};\n\n/**\n * Prioity:\n * 1. min, if min is Date, if not...\n * 2. max, if max is Date, if not...\n * 3. value, if defined, if not...\n * 4. today @ timezone\n */\nexport const getReturnDate = (\n\tmin: Date | string,\n\tmax: Date | string,\n\tvalue?: Date,\n\ttz = localTimezone\n): Date => {\n\tlet returnDate;\n\n\tif (isValidDate(min as Date)) {\n\t\treturnDate = min;\n\t\tif (isValidDate(max as Date)) {\n\t\t\tif (min > max) returnDate = max;\n\t\t}\n\t} else if (isValidDate(max as Date)) {\n\t\treturnDate = max;\n\t} else if (isValidDate(value)) {\n\t\treturnDate = value;\n\t} else {\n\t\treturnDate = new Date();\n\t}\n\n\tconst res = timeToDate('00:00', tz, returnDate as Date);\n\n\treturn res;\n};\n"]}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import React, { Component } from 'react';
|
|
2
|
+
import { ToastGroupContext } from './ToastGroupContext';
|
|
2
3
|
export interface ToastPropsStrict {
|
|
3
4
|
/** Adds one or more classnames for an element */
|
|
4
5
|
className?: string;
|
|
@@ -30,6 +31,10 @@ interface ToastState {
|
|
|
30
31
|
}
|
|
31
32
|
export declare class Toast extends Component<ToastProps, ToastState> {
|
|
32
33
|
static Group: React.ForwardRefExoticComponent<Omit<import("./ToastGroup").ToastGroupProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
34
|
+
static contextType: React.Context<{
|
|
35
|
+
isInToastGroup: boolean;
|
|
36
|
+
}>;
|
|
37
|
+
context: React.ContextType<typeof ToastGroupContext>;
|
|
33
38
|
static defaultProps: {
|
|
34
39
|
status: string;
|
|
35
40
|
duration: number;
|
|
@@ -17,6 +17,7 @@ import { ToastGroup } from './ToastGroup';
|
|
|
17
17
|
import { AnimatePresence, motion } from 'framer-motion';
|
|
18
18
|
import { Portal } from '../../internal/Portal';
|
|
19
19
|
import { tokens } from '@servicetitan/tokens/core';
|
|
20
|
+
import { ToastGroupContext } from './ToastGroupContext';
|
|
20
21
|
export class Toast extends Component {
|
|
21
22
|
constructor(props) {
|
|
22
23
|
super(props);
|
|
@@ -67,7 +68,13 @@ export class Toast extends Component {
|
|
|
67
68
|
return 'info';
|
|
68
69
|
}
|
|
69
70
|
render() {
|
|
70
|
-
const _a = this.props, { primaryActionName, secondaryActionName, children, className, onPrimaryActionClick, onSecondaryActionClick, onClose,
|
|
71
|
+
const _a = this.props, { primaryActionName, secondaryActionName, children, className, onPrimaryActionClick, onSecondaryActionClick, onClose, status, title } = _a, props = __rest(_a, ["primaryActionName", "secondaryActionName", "children", "className", "onPrimaryActionClick", "onSecondaryActionClick", "onClose", "status", "title"]);
|
|
72
|
+
let portal = this.props.portal;
|
|
73
|
+
const { isInToastGroup } = this.context;
|
|
74
|
+
if (isInToastGroup) {
|
|
75
|
+
// Ignore portal in a toast group.
|
|
76
|
+
portal = undefined;
|
|
77
|
+
}
|
|
71
78
|
const ToastClasses = classnames('Toast', className, {
|
|
72
79
|
'Toast--critical': status === 'critical',
|
|
73
80
|
'Toast--info': status === 'info',
|
|
@@ -101,6 +108,7 @@ export class Toast extends Component {
|
|
|
101
108
|
}
|
|
102
109
|
}
|
|
103
110
|
Toast.Group = ToastGroup;
|
|
111
|
+
Toast.contextType = ToastGroupContext;
|
|
104
112
|
Toast.defaultProps = {
|
|
105
113
|
status: 'info',
|
|
106
114
|
duration: 8000,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Toast.js","sourceRoot":"","sources":["../../../src/components/Toast/Toast.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { Component } from 'react';\nimport classnames from 'classnames';\nimport { Button } from '../Button';\nimport { Icon } from '../Icon';\nimport { ToastGroup } from './ToastGroup';\nimport { AnimatePresence, motion } from 'framer-motion';\nimport { Portal } from '../../internal/Portal';\nimport { tokens } from '@servicetitan/tokens/core';\n\nexport interface ToastPropsStrict {\n\t/** Adds one or more classnames for an element */\n\tclassName?: string;\n\n\tchildren?: React.ReactNode;\n\n\t/** How long the Toast stays on screen, default value is 8000 (milliseconds) */\n\tduration?: number;\n\n\t/** Text for the primary button */\n\tprimaryActionName?: boolean | string;\n\n\t/** Function that fires when the user clicks on the primary button/action */\n\tonPrimaryActionClick?: (e: React.SyntheticEvent<HTMLElement>) => void;\n\n\t/** Function that fires when the user clicks the close icon */\n\tonClose?: (e?: React.SyntheticEvent<HTMLElement>) => void;\n\n\t/** Function that fires when the user clicks on the secondary button/action */\n\tonSecondaryActionClick?: (e: React.SyntheticEvent<HTMLElement>) => void;\n\n\t/** Makes Toast open through ReactDOM.createPortal */\n\tportal?: HTMLElement | boolean;\n\n\t/** Text for the secondary button */\n\tsecondaryActionName?: boolean | string;\n\n\t/** Determines the visual appearance and icon of the toast */\n\tstatus?: 'info' | 'critical' | 'success' | 'warning';\n\n\t/** The message displayed to the user */\n\ttitle: string;\n}\n\nexport interface ToastProps extends ToastPropsStrict {\n\t[propName: string]: any;\n}\n\ninterface ToastState {\n\tvisible: boolean;\n}\n\nexport class Toast extends Component<ToastProps, ToastState> {\n\tstatic Group = ToastGroup;\n\n\tstatic defaultProps = {\n\t\tstatus: 'info',\n\t\tduration: 8000,\n\t\tportal: true,\n\t};\n\n\tprivate timeout: number | null = null;\n\n\tconstructor(props: ToastProps) {\n\t\tsuper(props);\n\n\t\tthis.state = {\n\t\t\tvisible: true,\n\t\t};\n\t}\n\n\tcomponentDidMount() {\n\t\tif (this.props.duration < 1) return;\n\n\t\tthis.timeout = window.setTimeout(() => {\n\t\t\tthis.handleClose();\n\t\t}, this.props.duration);\n\t}\n\n\tcomponentWillUnmount() {\n\t\tthis.clearSubscription();\n\t}\n\n\thandleClose = (e?: React.SyntheticEvent<HTMLElement>) => {\n\t\tconst { onClose } = this.props;\n\n\t\tthis.clearSubscription();\n\t\tthis.setState({ visible: false });\n\n\t\tif (onClose) {\n\t\t\tonClose(e);\n\t\t}\n\t};\n\n\thasPrimaryAction() {\n\t\treturn !!(\n\t\t\tthis.props.primaryActionName && this.props.onPrimaryActionClick\n\t\t);\n\t}\n\n\thasSecondaryAction() {\n\t\treturn !!(\n\t\t\tthis.props.secondaryActionName && this.props.onSecondaryActionClick\n\t\t);\n\t}\n\n\tprivate clearSubscription() {\n\t\tif (this.timeout !== null) {\n\t\t\twindow.clearTimeout(this.timeout);\n\t\t}\n\t}\n\n\tprivate getIconNameByStatus() {\n\t\tswitch (this.props.status) {\n\t\t\tcase 'critical':\n\t\t\t\treturn 'warning';\n\t\t\tcase 'warning':\n\t\t\t\treturn 'warning';\n\t\t\tcase 'success':\n\t\t\t\treturn 'check_circle';\n\t\t}\n\n\t\t// if status == 'info' || undefined\n\t\treturn 'info';\n\t}\n\n\trender() {\n\t\tconst {\n\t\t\tprimaryActionName,\n\t\t\tsecondaryActionName,\n\t\t\tchildren,\n\t\t\tclassName,\n\t\t\tonPrimaryActionClick,\n\t\t\tonSecondaryActionClick,\n\t\t\tonClose,\n\t\t\tportal,\n\t\t\tstatus,\n\t\t\ttitle,\n\t\t\t...props\n\t\t} = this.props;\n\n\t\tconst ToastClasses = classnames('Toast', className, {\n\t\t\t'Toast--critical': status === 'critical',\n\t\t\t'Toast--info': status === 'info',\n\t\t\t'Toast--success': status === 'success',\n\t\t\t'Toast--warning': status === 'warning',\n\t\t\t'Toast--floating': portal,\n\t\t});\n\n\t\tconst durationSlow: number = parseInt(tokens.durationSlow, 10) / 1000; // '300ms' -> 0.3\n\t\tconst toastAnimation = {\n\t\t\tinitial: { opacity: 0, y: 10, scale: 0.3 },\n\t\t\tanimate: { opacity: 1, y: 0, scale: 1 },\n\t\t\texit: { opacity: 0, y: 20, scale: 0.5 },\n\t\t\ttransition: { type: 'easeInOut', duration: durationSlow },\n\t\t};\n\n\t\tconst toast = (\n\t\t\t<AnimatePresence>\n\t\t\t\t<motion.div layout {...toastAnimation}>\n\t\t\t\t\t<div\n\t\t\t\t\t\tclassName={ToastClasses}\n\t\t\t\t\t\tdata-anvil-component=\"Toast\"\n\t\t\t\t\t\t{...props}\n\t\t\t\t\t>\n\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\tclassName=\"Toast__icon\"\n\t\t\t\t\t\t\tname={this.getIconNameByStatus()}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<div className=\"Toast__text\">\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\tpaddingRight:\n\t\t\t\t\t\t\t\t\t\tonClose &&\n\t\t\t\t\t\t\t\t\t\tparseInt(tokens.spacing3, 10) * 2,\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<div className=\"Toast__title\">{title}</div>\n\t\t\t\t\t\t\t\t{onClose && (\n\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\taria-label=\"close toast\"\n\t\t\t\t\t\t\t\t\t\tfill=\"subtle\"\n\t\t\t\t\t\t\t\t\t\tclassName=\"Toast__close\"\n\t\t\t\t\t\t\t\t\t\ticonName=\"clear\"\n\t\t\t\t\t\t\t\t\t\tsize=\"xsmall\"\n\t\t\t\t\t\t\t\t\t\tonClick={this.handleClose}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t{this.props.children !== undefined && (\n\t\t\t\t\t\t\t\t<div className=\"Toast__description\">\n\t\t\t\t\t\t\t\t\t{this.props.children}\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t{(primaryActionName || secondaryActionName) && (\n\t\t\t\t\t\t\t<div className=\"Toast__action\">\n\t\t\t\t\t\t\t\t{this.hasSecondaryAction() && (\n\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\tfill=\"subtle\"\n\t\t\t\t\t\t\t\t\t\tsmall\n\t\t\t\t\t\t\t\t\t\tonClick={onSecondaryActionClick}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{secondaryActionName}\n\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t{this.hasPrimaryAction() && (\n\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\tfill=\"outline\"\n\t\t\t\t\t\t\t\t\t\tsmall\n\t\t\t\t\t\t\t\t\t\tonClick={onPrimaryActionClick}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{primaryActionName}\n\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\t\t\t\t</motion.div>\n\t\t\t</AnimatePresence>\n\t\t);\n\n\t\treturn (\n\t\t\t<Portal\n\t\t\t\tconditional={!!portal}\n\t\t\t\ttarget={typeof portal !== 'boolean' ? portal : undefined}\n\t\t\t>\n\t\t\t\t{toast}\n\t\t\t</Portal>\n\t\t);\n\t}\n}\n"]}
|
|
1
|
+
{"version":3,"file":"Toast.js","sourceRoot":"","sources":["../../../src/components/Toast/Toast.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACzC,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AACnC,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAC/B,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,eAAe,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AACxD,OAAO,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAC/C,OAAO,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAC;AACnD,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AA4CxD,MAAM,OAAO,KAAM,SAAQ,SAAiC;IAa3D,YAAY,KAAiB;QAC5B,KAAK,CAAC,KAAK,CAAC,CAAC;QAHN,YAAO,GAAkB,IAAI,CAAC;QAsBtC,gBAAW,GAAG,CAAC,CAAqC,EAAE,EAAE;YACvD,MAAM,EAAE,OAAO,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC;YAE/B,IAAI,CAAC,iBAAiB,EAAE,CAAC;YACzB,IAAI,CAAC,QAAQ,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC,CAAC;YAElC,IAAI,OAAO,EAAE;gBACZ,OAAO,CAAC,CAAC,CAAC,CAAC;aACX;QACF,CAAC,CAAC;QA1BD,IAAI,CAAC,KAAK,GAAG;YACZ,OAAO,EAAE,IAAI;SACb,CAAC;IACH,CAAC;IAED,iBAAiB;QAChB,IAAI,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,CAAC;YAAE,OAAO;QAEpC,IAAI,CAAC,OAAO,GAAG,MAAM,CAAC,UAAU,CAAC,GAAG,EAAE;YACrC,IAAI,CAAC,WAAW,EAAE,CAAC;QACpB,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;IACzB,CAAC;IAED,oBAAoB;QACnB,IAAI,CAAC,iBAAiB,EAAE,CAAC;IAC1B,CAAC;IAaD,gBAAgB;QACf,OAAO,CAAC,CAAC,CACR,IAAI,CAAC,KAAK,CAAC,iBAAiB,IAAI,IAAI,CAAC,KAAK,CAAC,oBAAoB,CAC/D,CAAC;IACH,CAAC;IAED,kBAAkB;QACjB,OAAO,CAAC,CAAC,CACR,IAAI,CAAC,KAAK,CAAC,mBAAmB,IAAI,IAAI,CAAC,KAAK,CAAC,sBAAsB,CACnE,CAAC;IACH,CAAC;IAEO,iBAAiB;QACxB,IAAI,IAAI,CAAC,OAAO,KAAK,IAAI,EAAE;YAC1B,MAAM,CAAC,YAAY,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;SAClC;IACF,CAAC;IAEO,mBAAmB;QAC1B,QAAQ,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE;YAC1B,KAAK,UAAU;gBACd,OAAO,SAAS,CAAC;YAClB,KAAK,SAAS;gBACb,OAAO,SAAS,CAAC;YAClB,KAAK,SAAS;gBACb,OAAO,cAAc,CAAC;SACvB;QAED,mCAAmC;QACnC,OAAO,MAAM,CAAC;IACf,CAAC;IAED,MAAM;QACL,MAAM,KAWF,IAAI,CAAC,KAAK,EAXR,EACL,iBAAiB,EACjB,mBAAmB,EACnB,QAAQ,EACR,SAAS,EACT,oBAAoB,EACpB,sBAAsB,EACtB,OAAO,EACP,MAAM,EACN,KAAK,OAEQ,EADV,KAAK,cAVH,qJAWL,CAAa,CAAC;QAEf,IAAI,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC;QAC/B,MAAM,EAAE,cAAc,EAAE,GAAG,IAAI,CAAC,OAAO,CAAC;QAExC,IAAI,cAAc,EAAE;YACnB,kCAAkC;YAClC,MAAM,GAAG,SAAS,CAAC;SACnB;QAED,MAAM,YAAY,GAAG,UAAU,CAAC,OAAO,EAAE,SAAS,EAAE;YACnD,iBAAiB,EAAE,MAAM,KAAK,UAAU;YACxC,aAAa,EAAE,MAAM,KAAK,MAAM;YAChC,gBAAgB,EAAE,MAAM,KAAK,SAAS;YACtC,gBAAgB,EAAE,MAAM,KAAK,SAAS;YACtC,iBAAiB,EAAE,MAAM;SACzB,CAAC,CAAC;QAEH,MAAM,YAAY,GAAW,QAAQ,CAAC,MAAM,CAAC,YAAY,EAAE,EAAE,CAAC,GAAG,IAAI,CAAC,CAAC,iBAAiB;QACxF,MAAM,cAAc,GAAG;YACtB,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,EAAE,KAAK,EAAE,GAAG,EAAE;YAC1C,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE;YACvC,IAAI,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,EAAE,KAAK,EAAE,GAAG,EAAE;YACvC,UAAU,EAAE,EAAE,IAAI,EAAE,WAAW,EAAE,QAAQ,EAAE,YAAY,EAAE;SACzD,CAAC;QAEF,MAAM,KAAK,GAAG,CACb,oBAAC,eAAe;YACf,oBAAC,MAAM,CAAC,GAAG,kBAAC,MAAM,UAAK,cAAc;gBACpC,2CACC,SAAS,EAAE,YAAY,0BACF,OAAO,IACxB,KAAK;oBAET,oBAAC,IAAI,IACJ,SAAS,EAAC,aAAa,EACvB,IAAI,EAAE,IAAI,CAAC,mBAAmB,EAAE,GAC/B;oBACF,6BAAK,SAAS,EAAC,aAAa;wBAC3B,6BACC,KAAK,EAAE;gCACN,YAAY,EACX,OAAO;oCACP,QAAQ,CAAC,MAAM,CAAC,QAAQ,EAAE,EAAE,CAAC,GAAG,CAAC;6BAClC;4BAED,6BAAK,SAAS,EAAC,cAAc,IAAE,KAAK,CAAO;4BAC1C,OAAO,IAAI,CACX,oBAAC,MAAM,kBACK,aAAa,EACxB,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,cAAc,EACxB,QAAQ,EAAC,OAAO,EAChB,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,IAAI,CAAC,WAAW,GACxB,CACF,CACI;wBACL,IAAI,CAAC,KAAK,CAAC,QAAQ,KAAK,SAAS,IAAI,CACrC,6BAAK,SAAS,EAAC,oBAAoB,IACjC,IAAI,CAAC,KAAK,CAAC,QAAQ,CACf,CACN,CACI;oBACL,CAAC,iBAAiB,IAAI,mBAAmB,CAAC,IAAI,CAC9C,6BAAK,SAAS,EAAC,eAAe;wBAC5B,IAAI,CAAC,kBAAkB,EAAE,IAAI,CAC7B,oBAAC,MAAM,IACN,IAAI,EAAC,QAAQ,EACb,KAAK,QACL,OAAO,EAAE,sBAAsB,IAE9B,mBAAmB,CACZ,CACT;wBACA,IAAI,CAAC,gBAAgB,EAAE,IAAI,CAC3B,oBAAC,MAAM,IACN,IAAI,EAAC,SAAS,EACd,KAAK,QACL,OAAO,EAAE,oBAAoB,IAE5B,iBAAiB,CACV,CACT,CACI,CACN,CACI,CACM,CACI,CAClB,CAAC;QAEF,OAAO,CACN,oBAAC,MAAM,IACN,WAAW,EAAE,CAAC,CAAC,MAAM,EACrB,MAAM,EAAE,OAAO,MAAM,KAAK,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,IAEvD,KAAK,CACE,CACT,CAAC;IACH,CAAC;;AA1LM,WAAK,GAAG,UAAU,CAAC;AACnB,iBAAW,GAAG,iBAAiB,CAAC;AAGhC,kBAAY,GAAG;IACrB,MAAM,EAAE,MAAM;IACd,QAAQ,EAAE,IAAI;IACd,MAAM,EAAE,IAAI;CACZ,CAAC","sourcesContent":["import React, { Component } from 'react';\nimport classnames from 'classnames';\nimport { Button } from '../Button';\nimport { Icon } from '../Icon';\nimport { ToastGroup } from './ToastGroup';\nimport { AnimatePresence, motion } from 'framer-motion';\nimport { Portal } from '../../internal/Portal';\nimport { tokens } from '@servicetitan/tokens/core';\nimport { ToastGroupContext } from './ToastGroupContext';\n\nexport interface ToastPropsStrict {\n\t/** Adds one or more classnames for an element */\n\tclassName?: string;\n\n\tchildren?: React.ReactNode;\n\n\t/** How long the Toast stays on screen, default value is 8000 (milliseconds) */\n\tduration?: number;\n\n\t/** Text for the primary button */\n\tprimaryActionName?: boolean | string;\n\n\t/** Function that fires when the user clicks on the primary button/action */\n\tonPrimaryActionClick?: (e: React.SyntheticEvent<HTMLElement>) => void;\n\n\t/** Function that fires when the user clicks the close icon */\n\tonClose?: (e?: React.SyntheticEvent<HTMLElement>) => void;\n\n\t/** Function that fires when the user clicks on the secondary button/action */\n\tonSecondaryActionClick?: (e: React.SyntheticEvent<HTMLElement>) => void;\n\n\t/** Makes Toast open through ReactDOM.createPortal */\n\tportal?: HTMLElement | boolean;\n\n\t/** Text for the secondary button */\n\tsecondaryActionName?: boolean | string;\n\n\t/** Determines the visual appearance and icon of the toast */\n\tstatus?: 'info' | 'critical' | 'success' | 'warning';\n\n\t/** The message displayed to the user */\n\ttitle: string;\n}\n\nexport interface ToastProps extends ToastPropsStrict {\n\t[propName: string]: any;\n}\n\ninterface ToastState {\n\tvisible: boolean;\n}\n\nexport class Toast extends Component<ToastProps, ToastState> {\n\tstatic Group = ToastGroup;\n\tstatic contextType = ToastGroupContext;\n\tdeclare context: React.ContextType<typeof ToastGroupContext>;\n\n\tstatic defaultProps = {\n\t\tstatus: 'info',\n\t\tduration: 8000,\n\t\tportal: true,\n\t};\n\n\tprivate timeout: number | null = null;\n\n\tconstructor(props: ToastProps) {\n\t\tsuper(props);\n\n\t\tthis.state = {\n\t\t\tvisible: true,\n\t\t};\n\t}\n\n\tcomponentDidMount() {\n\t\tif (this.props.duration < 1) return;\n\n\t\tthis.timeout = window.setTimeout(() => {\n\t\t\tthis.handleClose();\n\t\t}, this.props.duration);\n\t}\n\n\tcomponentWillUnmount() {\n\t\tthis.clearSubscription();\n\t}\n\n\thandleClose = (e?: React.SyntheticEvent<HTMLElement>) => {\n\t\tconst { onClose } = this.props;\n\n\t\tthis.clearSubscription();\n\t\tthis.setState({ visible: false });\n\n\t\tif (onClose) {\n\t\t\tonClose(e);\n\t\t}\n\t};\n\n\thasPrimaryAction() {\n\t\treturn !!(\n\t\t\tthis.props.primaryActionName && this.props.onPrimaryActionClick\n\t\t);\n\t}\n\n\thasSecondaryAction() {\n\t\treturn !!(\n\t\t\tthis.props.secondaryActionName && this.props.onSecondaryActionClick\n\t\t);\n\t}\n\n\tprivate clearSubscription() {\n\t\tif (this.timeout !== null) {\n\t\t\twindow.clearTimeout(this.timeout);\n\t\t}\n\t}\n\n\tprivate getIconNameByStatus() {\n\t\tswitch (this.props.status) {\n\t\t\tcase 'critical':\n\t\t\t\treturn 'warning';\n\t\t\tcase 'warning':\n\t\t\t\treturn 'warning';\n\t\t\tcase 'success':\n\t\t\t\treturn 'check_circle';\n\t\t}\n\n\t\t// if status == 'info' || undefined\n\t\treturn 'info';\n\t}\n\n\trender() {\n\t\tconst {\n\t\t\tprimaryActionName,\n\t\t\tsecondaryActionName,\n\t\t\tchildren,\n\t\t\tclassName,\n\t\t\tonPrimaryActionClick,\n\t\t\tonSecondaryActionClick,\n\t\t\tonClose,\n\t\t\tstatus,\n\t\t\ttitle,\n\t\t\t...props\n\t\t} = this.props;\n\n\t\tlet portal = this.props.portal;\n\t\tconst { isInToastGroup } = this.context;\n\n\t\tif (isInToastGroup) {\n\t\t\t// Ignore portal in a toast group.\n\t\t\tportal = undefined;\n\t\t}\n\n\t\tconst ToastClasses = classnames('Toast', className, {\n\t\t\t'Toast--critical': status === 'critical',\n\t\t\t'Toast--info': status === 'info',\n\t\t\t'Toast--success': status === 'success',\n\t\t\t'Toast--warning': status === 'warning',\n\t\t\t'Toast--floating': portal,\n\t\t});\n\n\t\tconst durationSlow: number = parseInt(tokens.durationSlow, 10) / 1000; // '300ms' -> 0.3\n\t\tconst toastAnimation = {\n\t\t\tinitial: { opacity: 0, y: 10, scale: 0.3 },\n\t\t\tanimate: { opacity: 1, y: 0, scale: 1 },\n\t\t\texit: { opacity: 0, y: 20, scale: 0.5 },\n\t\t\ttransition: { type: 'easeInOut', duration: durationSlow },\n\t\t};\n\n\t\tconst toast = (\n\t\t\t<AnimatePresence>\n\t\t\t\t<motion.div layout {...toastAnimation}>\n\t\t\t\t\t<div\n\t\t\t\t\t\tclassName={ToastClasses}\n\t\t\t\t\t\tdata-anvil-component=\"Toast\"\n\t\t\t\t\t\t{...props}\n\t\t\t\t\t>\n\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\tclassName=\"Toast__icon\"\n\t\t\t\t\t\t\tname={this.getIconNameByStatus()}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<div className=\"Toast__text\">\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\tpaddingRight:\n\t\t\t\t\t\t\t\t\t\tonClose &&\n\t\t\t\t\t\t\t\t\t\tparseInt(tokens.spacing3, 10) * 2,\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<div className=\"Toast__title\">{title}</div>\n\t\t\t\t\t\t\t\t{onClose && (\n\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\taria-label=\"close toast\"\n\t\t\t\t\t\t\t\t\t\tfill=\"subtle\"\n\t\t\t\t\t\t\t\t\t\tclassName=\"Toast__close\"\n\t\t\t\t\t\t\t\t\t\ticonName=\"clear\"\n\t\t\t\t\t\t\t\t\t\tsize=\"xsmall\"\n\t\t\t\t\t\t\t\t\t\tonClick={this.handleClose}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t{this.props.children !== undefined && (\n\t\t\t\t\t\t\t\t<div className=\"Toast__description\">\n\t\t\t\t\t\t\t\t\t{this.props.children}\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t{(primaryActionName || secondaryActionName) && (\n\t\t\t\t\t\t\t<div className=\"Toast__action\">\n\t\t\t\t\t\t\t\t{this.hasSecondaryAction() && (\n\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\tfill=\"subtle\"\n\t\t\t\t\t\t\t\t\t\tsmall\n\t\t\t\t\t\t\t\t\t\tonClick={onSecondaryActionClick}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{secondaryActionName}\n\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t{this.hasPrimaryAction() && (\n\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\tfill=\"outline\"\n\t\t\t\t\t\t\t\t\t\tsmall\n\t\t\t\t\t\t\t\t\t\tonClick={onPrimaryActionClick}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{primaryActionName}\n\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\t\t\t\t</motion.div>\n\t\t\t</AnimatePresence>\n\t\t);\n\n\t\treturn (\n\t\t\t<Portal\n\t\t\t\tconditional={!!portal}\n\t\t\t\ttarget={typeof portal !== 'boolean' ? portal : undefined}\n\t\t\t>\n\t\t\t\t{toast}\n\t\t\t</Portal>\n\t\t);\n\t}\n}\n"]}
|
|
@@ -12,12 +12,14 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
12
12
|
import React from 'react';
|
|
13
13
|
import classnames from 'classnames';
|
|
14
14
|
import { Portal } from '../../internal/Portal';
|
|
15
|
+
import { ToastGroupContext } from './ToastGroupContext';
|
|
15
16
|
export const ToastGroup = React.forwardRef((_a, ref) => {
|
|
16
17
|
var { children, className, portal = true } = _a, props = __rest(_a, ["children", "className", "portal"]);
|
|
17
18
|
const ToastGroupClasses = classnames('ToastGroup', className, {
|
|
18
19
|
'ToastGroup--floating': portal,
|
|
19
20
|
});
|
|
20
|
-
const toastGroup = (React.createElement(
|
|
21
|
+
const toastGroup = (React.createElement(ToastGroupContext.Provider, { value: { isInToastGroup: true } },
|
|
22
|
+
React.createElement("div", Object.assign({ ref: ref, className: ToastGroupClasses }, props), children)));
|
|
21
23
|
return portal ? (React.createElement(Portal, { target: typeof portal !== 'boolean' ? portal : undefined }, toastGroup)) : (toastGroup);
|
|
22
24
|
});
|
|
23
25
|
//# sourceMappingURL=ToastGroup.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ToastGroup.js","sourceRoot":"","sources":["../../../src/components/Toast/ToastGroup.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,UAAU,MAAM,YAAY,CAAC;AAEpC,OAAO,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAC;
|
|
1
|
+
{"version":3,"file":"ToastGroup.js","sourceRoot":"","sources":["../../../src/components/Toast/ToastGroup.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,UAAU,MAAM,YAAY,CAAC;AAEpC,OAAO,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAC/C,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAuBxD,MAAM,CAAC,MAAM,UAAU,GAAG,KAAK,CAAC,UAAU,CACzC,CAAC,EAAgD,EAAE,GAAG,EAAE,EAAE;QAAzD,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,GAAG,IAAI,OAAY,EAAP,KAAK,cAA9C,mCAAgD,CAAF;IAC9C,MAAM,iBAAiB,GAAG,UAAU,CAAC,YAAY,EAAE,SAAS,EAAE;QAC7D,sBAAsB,EAAE,MAAM;KAC9B,CAAC,CAAC;IAEH,MAAM,UAAU,GAAG,CAClB,oBAAC,iBAAiB,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,cAAc,EAAE,IAAI,EAAE;QAC1D,2CAAK,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,iBAAiB,IAAM,KAAK,GACpD,QAAQ,CACJ,CACsB,CAC7B,CAAC;IAEF,OAAO,MAAM,CAAC,CAAC,CAAC,CACf,oBAAC,MAAM,IAAC,MAAM,EAAE,OAAO,MAAM,KAAK,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,IAC9D,UAAU,CACH,CACT,CAAC,CAAC,CAAC,CACH,UAAU,CACV,CAAC;AACH,CAAC,CACD,CAAC","sourcesContent":["import React from 'react';\nimport classnames from 'classnames';\nimport { ToastProps } from './Toast';\nimport { Portal } from '../../internal/Portal';\nimport { ToastGroupContext } from './ToastGroupContext';\n\ntype ToastGroupChildType =\n\t| React.ReactElement<ToastProps>\n\t| boolean\n\t| null\n\t| undefined;\n\nexport interface ToastGroupPropsStrict {\n\t/** Toast Elements */\n\tchildren: ToastGroupChildType | ToastGroupChildType[];\n\n\t/** Adds one or more classnames for an element */\n\tclassName?: string;\n\n\t/** Makes Toast open through ReactDOM.createPortal */\n\tportal?: HTMLElement | boolean;\n}\n\nexport interface ToastGroupProps extends ToastGroupPropsStrict {\n\t[propName: string]: any;\n}\n\nexport const ToastGroup = React.forwardRef<HTMLDivElement, ToastGroupProps>(\n\t({ children, className, portal = true, ...props }, ref) => {\n\t\tconst ToastGroupClasses = classnames('ToastGroup', className, {\n\t\t\t'ToastGroup--floating': portal,\n\t\t});\n\n\t\tconst toastGroup = (\n\t\t\t<ToastGroupContext.Provider value={{ isInToastGroup: true }}>\n\t\t\t\t<div ref={ref} className={ToastGroupClasses} {...props}>\n\t\t\t\t\t{children}\n\t\t\t\t</div>\n\t\t\t</ToastGroupContext.Provider>\n\t\t);\n\n\t\treturn portal ? (\n\t\t\t<Portal target={typeof portal !== 'boolean' ? portal : undefined}>\n\t\t\t\t{toastGroup}\n\t\t\t</Portal>\n\t\t) : (\n\t\t\ttoastGroup\n\t\t);\n\t}\n);\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ToastGroupContext.js","sourceRoot":"","sources":["../../../src/components/Toast/ToastGroupContext.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,CAAC,MAAM,iBAAiB,GAAG,KAAK,CAAC,aAAa,CAAC,EAAE,cAAc,EAAE,KAAK,EAAE,CAAC,CAAC","sourcesContent":["import React from 'react';\n\nexport const ToastGroupContext = React.createContext({ isInToastGroup: false });\n"]}
|
|
@@ -507,6 +507,7 @@ span.Popover {
|
|
|
507
507
|
border-radius: 100%;
|
|
508
508
|
margin-top: 1px;
|
|
509
509
|
padding: 1px 4px;
|
|
510
|
+
background: transparent;
|
|
510
511
|
}
|
|
511
512
|
.Trigger .Trigger__clear.Button::before {
|
|
512
513
|
border-radius: 100%;
|
|
@@ -1006,7 +1007,7 @@ span.Popover {
|
|
|
1006
1007
|
align-items: center;
|
|
1007
1008
|
background-color: var(--colorsSurfaceGrey, #eeeeee);
|
|
1008
1009
|
border: 0;
|
|
1009
|
-
border-radius:
|
|
1010
|
+
border-radius: 6px;
|
|
1010
1011
|
box-sizing: border-box;
|
|
1011
1012
|
color: var(--colorsTextOnGrey, #444445);
|
|
1012
1013
|
cursor: pointer;
|
|
@@ -1016,14 +1017,15 @@ span.Popover {
|
|
|
1016
1017
|
justify-content: center;
|
|
1017
1018
|
line-height: 1;
|
|
1018
1019
|
margin: 0;
|
|
1019
|
-
outline: none;
|
|
1020
1020
|
padding: 12px 16px;
|
|
1021
1021
|
text-align: center;
|
|
1022
1022
|
text-decoration: none;
|
|
1023
1023
|
text-shadow: none;
|
|
1024
|
-
transition: background cubic-bezier(0.4, 0, 0.2, 1) 100ms 0ms, color cubic-bezier(0.4, 0, 0.2, 1) 100ms 0ms;
|
|
1024
|
+
transition: background cubic-bezier(0.4, 0, 0.2, 1) 100ms 0ms, color cubic-bezier(0.4, 0, 0.2, 1) 100ms 0ms, outline cubic-bezier(0.4, 0, 0.2, 1) 100ms 0ms, outline-offset cubic-bezier(0.4, 0, 0.2, 1) 100ms 0ms;
|
|
1025
1025
|
user-select: none;
|
|
1026
1026
|
position: relative;
|
|
1027
|
+
outline-offset: 0;
|
|
1028
|
+
outline: solid 0 transparent;
|
|
1027
1029
|
}
|
|
1028
1030
|
.Button::before {
|
|
1029
1031
|
content: "";
|
|
@@ -1043,13 +1045,13 @@ span.Popover {
|
|
|
1043
1045
|
.Button:active::before, .Button.Button--selected::before {
|
|
1044
1046
|
background-color: var(--colorsActiveDefault, rgba(20, 20, 20, 0.2));
|
|
1045
1047
|
}
|
|
1046
|
-
.Button
|
|
1047
|
-
outline:
|
|
1048
|
-
|
|
1048
|
+
.Button:focus-visible {
|
|
1049
|
+
outline-offset: 2px;
|
|
1050
|
+
outline: solid 2px var(--colorsBorderPrimary, #0265dc);
|
|
1049
1051
|
}
|
|
1050
1052
|
.Button.Button--outline {
|
|
1051
|
-
background-color:
|
|
1052
|
-
box-shadow: inset 0 0 0 1px var(--colorsBorderDefault, #
|
|
1053
|
+
background-color: var(--colorsSurfaceDefault, white);
|
|
1054
|
+
box-shadow: inset 0 0 0 1px var(--colorsBorderDefault, #949596);
|
|
1053
1055
|
}
|
|
1054
1056
|
.Button.Button--outline:hover::before {
|
|
1055
1057
|
background-color: var(--colorsHoverOnGrey, rgba(20, 20, 20, 0.08));
|
|
@@ -1057,9 +1059,6 @@ span.Popover {
|
|
|
1057
1059
|
.Button.Button--outline:active::before, .Button.Button--outline.Button--selected::before {
|
|
1058
1060
|
background-color: var(--colorsActiveOnGrey, rgba(20, 20, 20, 0.16));
|
|
1059
1061
|
}
|
|
1060
|
-
.Button.Button--outline.Button--focus-visible:focus {
|
|
1061
|
-
box-shadow: inset 0 0 0 1px var(--colorsBorderDefault, #444445), 0 0 0 3px var(--colorsFocusRingPrimary, #78bbfa);
|
|
1062
|
-
}
|
|
1063
1062
|
.Button.Button--subtle {
|
|
1064
1063
|
background-color: transparent;
|
|
1065
1064
|
}
|
|
@@ -1111,34 +1110,31 @@ button.Button {
|
|
|
1111
1110
|
color: var(--colorsTextOnPrimary, white);
|
|
1112
1111
|
}
|
|
1113
1112
|
.Button--blue:hover::before {
|
|
1114
|
-
background-color: var(--
|
|
1113
|
+
background-color: var(--colorsHoverOnGrey, rgba(20, 20, 20, 0.08));
|
|
1115
1114
|
}
|
|
1116
1115
|
.Button--blue:active::before, .Button--blue.Button--selected::before {
|
|
1117
|
-
background-color: var(--
|
|
1116
|
+
background-color: var(--colorsActiveOnGrey, rgba(20, 20, 20, 0.16));
|
|
1118
1117
|
}
|
|
1119
1118
|
.Button--blue.Button--outline {
|
|
1120
1119
|
background-color: transparent;
|
|
1121
|
-
box-shadow: inset 0 0 0 1px var(--
|
|
1120
|
+
box-shadow: inset 0 0 0 1px var(--colorsBorderDefault, #949596);
|
|
1122
1121
|
color: var(--colorsTextPrimary, #0265dc);
|
|
1123
1122
|
}
|
|
1124
1123
|
.Button--blue.Button--outline:hover::before {
|
|
1125
|
-
background-color: var(--
|
|
1126
|
-
}
|
|
1127
|
-
.Button--blue.Button--outline.Button--focus-visible:focus {
|
|
1128
|
-
box-shadow: inset 0 0 0 1px var(--colorsBorderPrimary, #0265dc), 0 0 0 3px var(--colorsFocusRingPrimary, #78bbfa);
|
|
1124
|
+
background-color: var(--colorsHoverDefault, rgba(20, 20, 20, 0.08));
|
|
1129
1125
|
}
|
|
1130
1126
|
.Button--blue.Button--outline:active::before, .Button--blue.Button--outline.Button--selected::before {
|
|
1131
|
-
background-color: var(--
|
|
1127
|
+
background-color: var(--colorsActiveDefault, rgba(20, 20, 20, 0.2));
|
|
1132
1128
|
}
|
|
1133
1129
|
.Button--blue.Button--subtle {
|
|
1134
1130
|
background-color: transparent;
|
|
1135
1131
|
color: var(--colorsTextPrimary, #0265dc);
|
|
1136
1132
|
}
|
|
1137
1133
|
.Button--blue.Button--subtle:hover::before {
|
|
1138
|
-
background-color: var(--
|
|
1134
|
+
background-color: var(--colorsHoverDefault, rgba(20, 20, 20, 0.08));
|
|
1139
1135
|
}
|
|
1140
1136
|
.Button--blue.Button--subtle:active::before, .Button--blue.Button--subtle.Button--selected::before {
|
|
1141
|
-
background-color: var(--
|
|
1137
|
+
background-color: var(--colorsActiveDefault, rgba(20, 20, 20, 0.2));
|
|
1142
1138
|
}
|
|
1143
1139
|
|
|
1144
1140
|
.Button--red {
|
|
@@ -1148,15 +1144,15 @@ button.Button {
|
|
|
1148
1144
|
.Button--red:hover::before {
|
|
1149
1145
|
background-color: var(--colorsHoverOnCritical, rgba(255, 255, 255, 0.16));
|
|
1150
1146
|
}
|
|
1147
|
+
.Button--red:focus-visible {
|
|
1148
|
+
outline: solid 2px var(--colorsBorderCritical, #e13212);
|
|
1149
|
+
}
|
|
1151
1150
|
.Button--red:active::before, .Button--red.Button--selected::before {
|
|
1152
1151
|
background-color: var(--colorsActiveOnCritical, rgba(20, 20, 20, 0.16));
|
|
1153
1152
|
}
|
|
1154
|
-
.Button--red.Button--focus-visible:focus {
|
|
1155
|
-
box-shadow: 0 0 0 3px var(--colorsFocusRingCritical, #ffb2a0);
|
|
1156
|
-
}
|
|
1157
1153
|
.Button--red.Button--outline {
|
|
1158
1154
|
background-color: transparent;
|
|
1159
|
-
box-shadow: inset 0 0 0 1px var(--
|
|
1155
|
+
box-shadow: inset 0 0 0 1px var(--colorsBorderDefault, #949596);
|
|
1160
1156
|
color: var(--colorsTextCritical, #bf2a00);
|
|
1161
1157
|
}
|
|
1162
1158
|
.Button--red.Button--outline:hover::before {
|
|
@@ -1165,9 +1161,6 @@ button.Button {
|
|
|
1165
1161
|
.Button--red.Button--outline:active::before, .Button--red.Button--outline.Button--selected::before {
|
|
1166
1162
|
background-color: var(--colorsActiveCritical, rgba(225, 50, 18, 0.3));
|
|
1167
1163
|
}
|
|
1168
|
-
.Button--red.Button--outline.Button--focus-visible:focus {
|
|
1169
|
-
box-shadow: inset 0 0 0 1px var(--colorsBorderCritical, #e13212), 0 0 0 3px var(--colorsFocusRingCritical, #ffb2a0);
|
|
1170
|
-
}
|
|
1171
1164
|
.Button--red.Button--subtle {
|
|
1172
1165
|
background-color: transparent;
|
|
1173
1166
|
color: var(--colorsTextCritical, #bf2a00);
|
|
@@ -1180,19 +1173,14 @@ button.Button {
|
|
|
1180
1173
|
}
|
|
1181
1174
|
|
|
1182
1175
|
.Button--disabled, .Button--disabled.Button--outline, .Button--disabled.Button--subtle {
|
|
1183
|
-
background:
|
|
1184
|
-
color:
|
|
1176
|
+
background: #bcbcbd;
|
|
1177
|
+
color: #606162;
|
|
1178
|
+
box-shadow: none;
|
|
1185
1179
|
opacity: 0.4;
|
|
1186
1180
|
}
|
|
1187
1181
|
.Button--disabled svg, .Button--disabled.Button--outline svg, .Button--disabled.Button--subtle svg {
|
|
1188
1182
|
opacity: 0.6;
|
|
1189
1183
|
}
|
|
1190
|
-
.Button--disabled.Button--outline, .Button--disabled.Button--subtle {
|
|
1191
|
-
background: transparent;
|
|
1192
|
-
}
|
|
1193
|
-
.Button--disabled.Button--outline {
|
|
1194
|
-
box-shadow: inset 0 0 0 1px var(--colorsBorderDefault, #444445);
|
|
1195
|
-
}
|
|
1196
1184
|
|
|
1197
1185
|
.Button--inactive {
|
|
1198
1186
|
pointer-events: none;
|
|
@@ -1870,7 +1858,7 @@ button.Button--full {
|
|
|
1870
1858
|
box-shadow: 0 0 0 4px var(--colorsBorderPrimarySubdued, #b5deff);
|
|
1871
1859
|
}
|
|
1872
1860
|
.a-Checkbox:not(.Checkbox--disabled):hover .Checkbox__box {
|
|
1873
|
-
border-color: var(--colorsBorderDefault, #
|
|
1861
|
+
border-color: var(--colorsBorderDefault, #949596);
|
|
1874
1862
|
}
|
|
1875
1863
|
.Checkbox--error.a-Checkbox:not(.Checkbox--disabled):hover .Checkbox__box {
|
|
1876
1864
|
border-color: var(--colorsBorderCritical, #e13212);
|
|
@@ -7897,7 +7885,7 @@ button.a-Icon {
|
|
|
7897
7885
|
}
|
|
7898
7886
|
button.a-Icon:focus {
|
|
7899
7887
|
border-radius: 3px;
|
|
7900
|
-
box-shadow: 0 0 0
|
|
7888
|
+
box-shadow: 0 0 0 1px var(--colorsBorderPrimary, #0265dc);
|
|
7901
7889
|
outline: 0;
|
|
7902
7890
|
}
|
|
7903
7891
|
|
|
@@ -8644,7 +8632,7 @@ button.a-Icon svg {
|
|
|
8644
8632
|
position: absolute;
|
|
8645
8633
|
top: 0;
|
|
8646
8634
|
width: 100%;
|
|
8647
|
-
z-index:
|
|
8635
|
+
z-index: 799;
|
|
8648
8636
|
}
|
|
8649
8637
|
.Mask__overlay.border-radius-1 {
|
|
8650
8638
|
border-radius: 3px;
|
|
@@ -9709,7 +9697,7 @@ button.a-Icon svg {
|
|
|
9709
9697
|
box-shadow: 0 0 0 8px var(--colorsBorderCritical, #e13212) inset;
|
|
9710
9698
|
}
|
|
9711
9699
|
.a-Radio:not(.Radio--disabled):hover .Radio__box {
|
|
9712
|
-
box-shadow: 0 0 0 1px var(--colorsBorderDefault, #
|
|
9700
|
+
box-shadow: 0 0 0 1px var(--colorsBorderDefault, #949596) inset;
|
|
9713
9701
|
}
|
|
9714
9702
|
.a-Radio:not(.Radio--disabled):hover .Radio__input:checked + .Radio__box, .Radio--checked:not(.Radio--disabled):hover .Radio__box {
|
|
9715
9703
|
box-shadow: 0 0 0 2px var(--colorsHoverOnPrimary, rgba(255, 255, 255, 0.16)) inset, 0 0 0 2px var(--colorsBorderPrimary, #0265dc) inset;
|
|
@@ -11261,6 +11249,21 @@ button.a-Icon svg {
|
|
|
11261
11249
|
.Table.k-grid .k-checkbox.k-focus, .Table.k-grid .k-checkbox:checked:focus, .Table.k-grid .k-checkbox:focus {
|
|
11262
11250
|
box-shadow: 0 0 0 4px var(--colorsFocusRingPrimary, #78bbfa);
|
|
11263
11251
|
}
|
|
11252
|
+
.Table.k-grid a.Link.Link--blue {
|
|
11253
|
+
color: var(--colorsTextPrimary, #0265dc);
|
|
11254
|
+
}
|
|
11255
|
+
.Table.k-grid a.Link.Link--red {
|
|
11256
|
+
color: var(--colorsTextCritical, #bf2a00);
|
|
11257
|
+
}
|
|
11258
|
+
.Table.k-grid a.Link.Link--grey {
|
|
11259
|
+
color: var(--colorsTextSubdued, #606162);
|
|
11260
|
+
}
|
|
11261
|
+
.Table.k-grid a.Link.Link--disabled {
|
|
11262
|
+
color: var(--colorsTextDefault, #141414);
|
|
11263
|
+
}
|
|
11264
|
+
.Table.k-grid a.Link:hover, .Table.k-grid a.Link:focus {
|
|
11265
|
+
text-decoration: underline;
|
|
11266
|
+
}
|
|
11264
11267
|
.Table.k-grid .k-filter-row > td,
|
|
11265
11268
|
.Table.k-grid .k-filter-row > th,
|
|
11266
11269
|
.Table.k-grid td,
|
|
@@ -11850,7 +11853,7 @@ button.a-Icon svg {
|
|
|
11850
11853
|
/* Make sure font-family goes across entire component */
|
|
11851
11854
|
font-family: "Nunito Sans", sans-serif;
|
|
11852
11855
|
box-sizing: border-box;
|
|
11853
|
-
border: 1px solid var(--colorsBorderDefault, #
|
|
11856
|
+
border: 1px solid var(--colorsBorderDefault, #949596);
|
|
11854
11857
|
display: inline-block;
|
|
11855
11858
|
position: relative;
|
|
11856
11859
|
overflow: hidden;
|