@algolia/satellite 1.0.0-beta.123 → 1.0.0-beta.127

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.
Files changed (69) hide show
  1. package/cjs/Banner/Banner.d.ts +3 -0
  2. package/cjs/Banner/Banner.js +13 -5
  3. package/cjs/Banners/Alert/Alert.d.ts +69 -0
  4. package/cjs/Banners/Alert/Alert.js +144 -0
  5. package/cjs/Banners/Alert/index.d.ts +2 -0
  6. package/cjs/Banners/Alert/index.js +32 -0
  7. package/cjs/Banners/BigBertha/BigBertha.d.ts +40 -0
  8. package/cjs/Banners/BigBertha/BigBertha.js +68 -0
  9. package/cjs/Banners/BigBertha/index.d.ts +2 -0
  10. package/cjs/Banners/BigBertha/index.js +32 -0
  11. package/cjs/Banners/Promote/Promote.d.ts +56 -0
  12. package/cjs/Banners/Promote/Promote.js +113 -0
  13. package/cjs/Banners/Promote/index.d.ts +2 -0
  14. package/cjs/Banners/Promote/index.js +32 -0
  15. package/cjs/Banners/index.d.ts +3 -0
  16. package/cjs/Banners/index.js +44 -0
  17. package/cjs/Button/Button.tailwind.js +1 -1
  18. package/cjs/Dropzone/Dropzone.d.ts +16 -0
  19. package/cjs/Dropzone/Dropzone.js +179 -0
  20. package/cjs/Dropzone/index.d.ts +2 -0
  21. package/cjs/Dropzone/index.js +32 -0
  22. package/cjs/Insert/Insert.d.ts +43 -0
  23. package/cjs/Insert/Insert.js +80 -0
  24. package/cjs/Insert/index.d.ts +2 -0
  25. package/cjs/Insert/index.js +32 -0
  26. package/cjs/Tables/DataTable/DataTable.d.ts +14 -5
  27. package/cjs/Tables/DataTable/DataTable.js +11 -16
  28. package/cjs/Tables/DataTable/components/Header.js +2 -2
  29. package/cjs/Tables/DataTable/types.d.ts +1 -1
  30. package/cjs/index.d.ts +3 -0
  31. package/cjs/index.js +42 -0
  32. package/cjs/utils/formatters.d.ts +25 -0
  33. package/cjs/utils/formatters.js +51 -0
  34. package/esm/Banner/Banner.d.ts +3 -0
  35. package/esm/Banner/Banner.js +12 -5
  36. package/esm/Banners/Alert/Alert.d.ts +69 -0
  37. package/esm/Banners/Alert/Alert.js +127 -0
  38. package/esm/Banners/Alert/index.d.ts +2 -0
  39. package/esm/Banners/Alert/index.js +2 -0
  40. package/esm/Banners/BigBertha/BigBertha.d.ts +40 -0
  41. package/esm/Banners/BigBertha/BigBertha.js +54 -0
  42. package/esm/Banners/BigBertha/index.d.ts +2 -0
  43. package/esm/Banners/BigBertha/index.js +2 -0
  44. package/esm/Banners/Promote/Promote.d.ts +56 -0
  45. package/esm/Banners/Promote/Promote.js +95 -0
  46. package/esm/Banners/Promote/index.d.ts +2 -0
  47. package/esm/Banners/Promote/index.js +2 -0
  48. package/esm/Banners/index.d.ts +3 -0
  49. package/esm/Banners/index.js +3 -0
  50. package/esm/Button/Button.tailwind.js +1 -1
  51. package/esm/Dropzone/Dropzone.d.ts +16 -0
  52. package/esm/Dropzone/Dropzone.js +148 -0
  53. package/esm/Dropzone/index.d.ts +2 -0
  54. package/esm/Dropzone/index.js +2 -0
  55. package/esm/Insert/Insert.d.ts +43 -0
  56. package/esm/Insert/Insert.js +66 -0
  57. package/esm/Insert/index.d.ts +2 -0
  58. package/esm/Insert/index.js +2 -0
  59. package/esm/Tables/DataTable/DataTable.d.ts +14 -5
  60. package/esm/Tables/DataTable/DataTable.js +11 -16
  61. package/esm/Tables/DataTable/components/Header.js +2 -2
  62. package/esm/Tables/DataTable/types.d.ts +1 -1
  63. package/esm/index.d.ts +3 -0
  64. package/esm/index.js +3 -0
  65. package/esm/utils/formatters.d.ts +25 -0
  66. package/esm/utils/formatters.js +40 -0
  67. package/package.json +2 -1
  68. package/satellite.css +1 -1
  69. package/satellite.min.css +1 -1
@@ -0,0 +1,32 @@
1
+ "use strict";
2
+
3
+ var _typeof = require("@babel/runtime/helpers/typeof");
4
+
5
+ Object.defineProperty(exports, "__esModule", {
6
+ value: true
7
+ });
8
+ var _exportNames = {};
9
+ Object.defineProperty(exports, "default", {
10
+ enumerable: true,
11
+ get: function get() {
12
+ return _Promote["default"];
13
+ }
14
+ });
15
+
16
+ var _Promote = _interopRequireWildcard(require("./Promote"));
17
+
18
+ Object.keys(_Promote).forEach(function (key) {
19
+ if (key === "default" || key === "__esModule") return;
20
+ if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
21
+ if (key in exports && exports[key] === _Promote[key]) return;
22
+ Object.defineProperty(exports, key, {
23
+ enumerable: true,
24
+ get: function get() {
25
+ return _Promote[key];
26
+ }
27
+ });
28
+ });
29
+
30
+ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
31
+
32
+ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -0,0 +1,3 @@
1
+ export * from "./Alert";
2
+ export * from "./BigBertha";
3
+ export * from "./Promote";
@@ -0,0 +1,44 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+
7
+ var _Alert = require("./Alert");
8
+
9
+ Object.keys(_Alert).forEach(function (key) {
10
+ if (key === "default" || key === "__esModule") return;
11
+ if (key in exports && exports[key] === _Alert[key]) return;
12
+ Object.defineProperty(exports, key, {
13
+ enumerable: true,
14
+ get: function get() {
15
+ return _Alert[key];
16
+ }
17
+ });
18
+ });
19
+
20
+ var _BigBertha = require("./BigBertha");
21
+
22
+ Object.keys(_BigBertha).forEach(function (key) {
23
+ if (key === "default" || key === "__esModule") return;
24
+ if (key in exports && exports[key] === _BigBertha[key]) return;
25
+ Object.defineProperty(exports, key, {
26
+ enumerable: true,
27
+ get: function get() {
28
+ return _BigBertha[key];
29
+ }
30
+ });
31
+ });
32
+
33
+ var _Promote = require("./Promote");
34
+
35
+ Object.keys(_Promote).forEach(function (key) {
36
+ if (key === "default" || key === "__esModule") return;
37
+ if (key in exports && exports[key] === _Promote[key]) return;
38
+ Object.defineProperty(exports, key, {
39
+ enumerable: true,
40
+ get: function get() {
41
+ return _Promote[key];
42
+ }
43
+ });
44
+ });
@@ -31,7 +31,7 @@ var buttonPlugin = function buttonPlugin(_ref) {
31
31
  ".btn-subtle": {
32
32
  color: theme("colors.grey.600"),
33
33
  "&:hover": {
34
- background: theme("colors.grey.100")
34
+ background: rgba(theme("colors.grey.300"), 0.15)
35
35
  },
36
36
  "&:focus": {
37
37
  boxShadow: "0 0 0 1px ".concat(theme("colors.accent.600"))
@@ -0,0 +1,16 @@
1
+ import { FC } from "react";
2
+ import { DropzoneProps as ReactDropZoneProps, FileRejection } from "react-dropzone";
3
+ interface DropzoneBaseProps {
4
+ id?: string;
5
+ onChange?(acceptedFiles: File[], fileRejections: FileRejection[]): void;
6
+ placeholder?: string;
7
+ /** @default false */
8
+ clearable?: boolean;
9
+ /** @ignore */
10
+ className?: string;
11
+ /** @default false */
12
+ multiple?: boolean;
13
+ }
14
+ export declare type DropzoneProps = DropzoneBaseProps & Omit<ReactDropZoneProps, "onDrop" | "onDropAccepted" | "onDropRejected" | "multiple">;
15
+ export declare const Dropzone: FC<DropzoneProps>;
16
+ export default Dropzone;
@@ -0,0 +1,179 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+
5
+ var _typeof = require("@babel/runtime/helpers/typeof");
6
+
7
+ Object.defineProperty(exports, "__esModule", {
8
+ value: true
9
+ });
10
+ exports["default"] = exports.Dropzone = void 0;
11
+
12
+ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
13
+
14
+ var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
15
+
16
+ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
17
+
18
+ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
19
+
20
+ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
21
+
22
+ var _classnames = _interopRequireDefault(require("classnames"));
23
+
24
+ var _react = _interopRequireWildcard(require("react"));
25
+
26
+ var _reactDropzone = require("react-dropzone");
27
+
28
+ var _reactFeather = require("react-feather");
29
+
30
+ var _Button = require("../Button");
31
+
32
+ var _Field = require("../Field");
33
+
34
+ var _satellitePrefixer = _interopRequireDefault(require("../styles/helpers/satellitePrefixer"));
35
+
36
+ var _formatters = require("../utils/formatters");
37
+
38
+ var _uniqueId = require("../utils/uniqueId");
39
+
40
+ var _excluded = ["id", "placeholder", "disabled", "multiple", "clearable", "onChange", "className"];
41
+
42
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
43
+
44
+ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
45
+
46
+ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
47
+
48
+ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
49
+
50
+ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
51
+
52
+ var DropzoneFileItem = function DropzoneFileItem(_ref) {
53
+ var file = _ref.file;
54
+ return /*#__PURE__*/_react["default"].createElement("span", {
55
+ className: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["truncate text-grey-900"])))
56
+ }, file.name, " - ", (0, _formatters.formatHumanSize)(file.size));
57
+ };
58
+
59
+ var STATUS_CLASSNAMES = {
60
+ "default": "",
61
+ invalid: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["input-invalid"]))),
62
+ validated: ""
63
+ };
64
+
65
+ var InvalidIcon = function InvalidIcon() {
66
+ return /*#__PURE__*/_react["default"].createElement(_reactFeather.X, {
67
+ className: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["mr-4 h-4 w-4 text-white bg-red-700 p-px rounded-full"])))
68
+ });
69
+ };
70
+
71
+ var ValidatedIcon = function ValidatedIcon() {
72
+ return /*#__PURE__*/_react["default"].createElement(_reactFeather.Check, {
73
+ className: (0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["mr-4 h-4 w-4 text-white bg-accent-700 p-px rounded-full"])))
74
+ });
75
+ };
76
+
77
+ var Dropzone = function Dropzone(_ref2) {
78
+ var id = _ref2.id,
79
+ placeholder = _ref2.placeholder,
80
+ disabled = _ref2.disabled,
81
+ _ref2$multiple = _ref2.multiple,
82
+ multiple = _ref2$multiple === void 0 ? false : _ref2$multiple,
83
+ _ref2$clearable = _ref2.clearable,
84
+ clearable = _ref2$clearable === void 0 ? false : _ref2$clearable,
85
+ onChange = _ref2.onChange,
86
+ className = _ref2.className,
87
+ props = (0, _objectWithoutProperties2["default"])(_ref2, _excluded);
88
+
89
+ var _useState = (0, _react.useState)([]),
90
+ _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
91
+ files = _useState2[0],
92
+ setFiles = _useState2[1];
93
+
94
+ var _useState3 = (0, _react.useState)(false),
95
+ _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
96
+ focused = _useState4[0],
97
+ setFocused = _useState4[1];
98
+
99
+ var _useFieldState = (0, _Field.useFieldState)(),
100
+ status = _useFieldState.status;
101
+
102
+ var onDrop = (0, _react.useCallback)(function (acceptedFiles, fileRejections) {
103
+ setFiles([].concat((0, _toConsumableArray2["default"])(files), (0, _toConsumableArray2["default"])(acceptedFiles)));
104
+ onChange === null || onChange === void 0 ? void 0 : onChange([].concat((0, _toConsumableArray2["default"])(files), (0, _toConsumableArray2["default"])(acceptedFiles)), fileRejections);
105
+ }, [files, onChange]);
106
+
107
+ var handleClear = function handleClear(evt) {
108
+ evt.stopPropagation();
109
+ setFiles([]);
110
+ onChange === null || onChange === void 0 ? void 0 : onChange([], []);
111
+ };
112
+
113
+ var _useDropzone = (0, _reactDropzone.useDropzone)(_objectSpread(_objectSpread({
114
+ disabled: disabled,
115
+ multiple: multiple
116
+ }, props), {}, {
117
+ onDrop: onDrop
118
+ })),
119
+ getRootProps = _useDropzone.getRootProps,
120
+ getInputProps = _useDropzone.getInputProps,
121
+ isDragActive = _useDropzone.isDragActive,
122
+ isDragReject = _useDropzone.isDragReject;
123
+
124
+ var dropzoneId = (0, _react.useMemo)(function () {
125
+ return id !== null && id !== void 0 ? id : (0, _uniqueId.uniqueId)("dropzone");
126
+ }, [id]);
127
+ var isValueEmpty = files.length === 0;
128
+ var StatusIcon = status === "invalid" ? InvalidIcon : status === "validated" ? ValidatedIcon : _react["default"].Fragment;
129
+ return /*#__PURE__*/_react["default"].createElement("div", getRootProps({
130
+ "aria-controls": dropzoneId,
131
+ className: (0, _classnames["default"])((0, _satellitePrefixer["default"])(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n input group\n ", "\n ", "\n min-h-16 cursor-pointer\n ", ""])), focused && "input-focused", disabled && "input-disabled cursor-not-allowed", isDragReject ? "border-red-200 cursor-not-allowed" : isDragActive ? "border-nebula-500" : null), STATUS_CLASSNAMES[status], className),
132
+ onClick: function onClick(evt) {
133
+ // Helps with https://github.com/react-dropzone/react-dropzone/issues/182
134
+ if (evt.target.closest("label")) {
135
+ evt.stopPropagation();
136
+ }
137
+ }
138
+ }), /*#__PURE__*/_react["default"].createElement("input", getInputProps({
139
+ id: dropzoneId,
140
+ onFocus: function onFocus() {
141
+ return setFocused(true);
142
+ },
143
+ onBlur: function onBlur() {
144
+ return setFocused(false);
145
+ }
146
+ })), /*#__PURE__*/_react["default"].createElement("div", {
147
+ className: (0, _satellitePrefixer["default"])(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["flex-1 flex items-center justify-center space-x-2 display-body"])))
148
+ }, files.length > 0 ? files.length > 1 ? /*#__PURE__*/_react["default"].createElement("ul", null, files.map(function (file) {
149
+ return /*#__PURE__*/_react["default"].createElement("li", {
150
+ key: file.name
151
+ }, /*#__PURE__*/_react["default"].createElement(DropzoneFileItem, {
152
+ file: file
153
+ }));
154
+ })) : /*#__PURE__*/_react["default"].createElement(DropzoneFileItem, {
155
+ file: files[0]
156
+ }) : /*#__PURE__*/_react["default"].createElement("div", {
157
+ className: (0, _satellitePrefixer["default"])(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["flex items-center justify-center space-x-2 display-body"])))
158
+ }, /*#__PURE__*/_react["default"].createElement(_reactFeather.UploadCloud, {
159
+ size: "1rem",
160
+ className: (0, _satellitePrefixer["default"])(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["", ""])), disabled ? "text-grey-200" : "text-grey-500")
161
+ }), /*#__PURE__*/_react["default"].createElement("p", {
162
+ className: (0, _satellitePrefixer["default"])(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["", ""])), disabled ? "text-grey-300" : "typo-subdued")
163
+ }, placeholder !== null && placeholder !== void 0 ? placeholder : "Drop ".concat(multiple ? "files" : "file", " here or click to select.")))), clearable && !disabled && !isValueEmpty && /*#__PURE__*/_react["default"].createElement("span", {
164
+ className: (0, _satellitePrefixer["default"])(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])([""])))
165
+ }, /*#__PURE__*/_react["default"].createElement(_Button.IconButton, {
166
+ className: (0, _satellitePrefixer["default"])(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2["default"])(["mr-2 ", ""])), focused ? "visible" : "invisible group-hover:visible"),
167
+ title: "Clear input",
168
+ icon: _reactFeather.X,
169
+ variant: "subtle",
170
+ size: "small",
171
+ tabIndex: -1,
172
+ "aria-hidden": true,
173
+ onClick: handleClear
174
+ })), /*#__PURE__*/_react["default"].createElement(StatusIcon, null));
175
+ };
176
+
177
+ exports.Dropzone = Dropzone;
178
+ var _default = Dropzone;
179
+ exports["default"] = _default;
@@ -0,0 +1,2 @@
1
+ export * from "./Dropzone";
2
+ export { default } from "./Dropzone";
@@ -0,0 +1,32 @@
1
+ "use strict";
2
+
3
+ var _typeof = require("@babel/runtime/helpers/typeof");
4
+
5
+ Object.defineProperty(exports, "__esModule", {
6
+ value: true
7
+ });
8
+ var _exportNames = {};
9
+ Object.defineProperty(exports, "default", {
10
+ enumerable: true,
11
+ get: function get() {
12
+ return _Dropzone["default"];
13
+ }
14
+ });
15
+
16
+ var _Dropzone = _interopRequireWildcard(require("./Dropzone"));
17
+
18
+ Object.keys(_Dropzone).forEach(function (key) {
19
+ if (key === "default" || key === "__esModule") return;
20
+ if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
21
+ if (key in exports && exports[key] === _Dropzone[key]) return;
22
+ Object.defineProperty(exports, key, {
23
+ enumerable: true,
24
+ get: function get() {
25
+ return _Dropzone[key];
26
+ }
27
+ });
28
+ });
29
+
30
+ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
31
+
32
+ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -0,0 +1,43 @@
1
+ import React, { FC } from "react";
2
+ import { BadgeVariants } from "../Badge";
3
+ declare type InsertContext = {
4
+ label: string;
5
+ variant?: BadgeVariants;
6
+ };
7
+ export interface InsertProps {
8
+ title: React.ReactNode;
9
+ contexts?: Array<string | InsertContext>;
10
+ }
11
+ /**
12
+ * Put more emphasis on side content.
13
+
14
+ * ## Examples
15
+ * [See the component in Figma](https://www.figma.com/file/99l59il97k2n5y4n6Jucal/%5BSatellite%5D-Components?node-id=2912%3A279499)
16
+
17
+ * ## Current Status
18
+ * - [x] Figma
19
+ * - [x] React
20
+ * - [ ] Documentation
21
+
22
+ * ## Component structure
23
+ * The component is a simple and flexible container. It should include a Title and a short text. To give more context you can use optional badges and an optional link to forward users in the right direction.
24
+
25
+ * ## Guidelines
26
+
27
+ * ### How to use it?
28
+ * Use the `Insert` if you want to give extra information to the user about the flow they are in or to highlight and define some terms used. This component can be use on the side of existing content or as a block.
29
+
30
+ * ### How to NOT use it?
31
+ * - Don't use this component to display temporary and/or critical information, use an Alert instead.
32
+
33
+ * ### Variants
34
+ * - Grey background
35
+
36
+ * ### Do's and Don't
37
+ * TODO
38
+
39
+ * ## Accessibility
40
+ * TODO
41
+ */
42
+ export declare const Insert: FC<InsertProps>;
43
+ export default Insert;
@@ -0,0 +1,80 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+
5
+ Object.defineProperty(exports, "__esModule", {
6
+ value: true
7
+ });
8
+ exports["default"] = exports.Insert = void 0;
9
+
10
+ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
11
+
12
+ var _react = _interopRequireDefault(require("react"));
13
+
14
+ var _Badge = _interopRequireDefault(require("../Badge"));
15
+
16
+ var _satellitePrefixer = _interopRequireDefault(require("../styles/helpers/satellitePrefixer"));
17
+
18
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4;
19
+
20
+ /**
21
+ * Put more emphasis on side content.
22
+
23
+ * ## Examples
24
+ * [See the component in Figma](https://www.figma.com/file/99l59il97k2n5y4n6Jucal/%5BSatellite%5D-Components?node-id=2912%3A279499)
25
+
26
+ * ## Current Status
27
+ * - [x] Figma
28
+ * - [x] React
29
+ * - [ ] Documentation
30
+
31
+ * ## Component structure
32
+ * The component is a simple and flexible container. It should include a Title and a short text. To give more context you can use optional badges and an optional link to forward users in the right direction.
33
+
34
+ * ## Guidelines
35
+
36
+ * ### How to use it?
37
+ * Use the `Insert` if you want to give extra information to the user about the flow they are in or to highlight and define some terms used. This component can be use on the side of existing content or as a block.
38
+
39
+ * ### How to NOT use it?
40
+ * - Don't use this component to display temporary and/or critical information, use an Alert instead.
41
+
42
+ * ### Variants
43
+ * - Grey background
44
+
45
+ * ### Do's and Don't
46
+ * TODO
47
+
48
+ * ## Accessibility
49
+ * TODO
50
+ */
51
+ var Insert = function Insert(_ref) {
52
+ var title = _ref.title,
53
+ contexts = _ref.contexts,
54
+ children = _ref.children;
55
+ return /*#__PURE__*/_react["default"].createElement("aside", {
56
+ className: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["inline-flex flex-col self-start p-4 bg-grey-100 rounded"])))
57
+ }, contexts ? /*#__PURE__*/_react["default"].createElement("span", {
58
+ className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["block space-x-2 mb-4"])))
59
+ }, contexts.map(function (context, idx) {
60
+ var _ref2 = typeof context === "string" ? {
61
+ label: context
62
+ } : context,
63
+ label = _ref2.label,
64
+ _ref2$variant = _ref2.variant,
65
+ variant = _ref2$variant === void 0 ? "grey" : _ref2$variant;
66
+
67
+ return /*#__PURE__*/_react["default"].createElement(_Badge["default"], {
68
+ key: idx,
69
+ variant: variant
70
+ }, label);
71
+ })) : null, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("p", {
72
+ className: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["display-heading mb-2"])))
73
+ }, title), /*#__PURE__*/_react["default"].createElement("span", {
74
+ className: (0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["display-body typo-subdued"])))
75
+ }, children)));
76
+ };
77
+
78
+ exports.Insert = Insert;
79
+ var _default = Insert;
80
+ exports["default"] = _default;
@@ -0,0 +1,2 @@
1
+ export * from "./Insert";
2
+ export { default } from "./Insert";
@@ -0,0 +1,32 @@
1
+ "use strict";
2
+
3
+ var _typeof = require("@babel/runtime/helpers/typeof");
4
+
5
+ Object.defineProperty(exports, "__esModule", {
6
+ value: true
7
+ });
8
+ var _exportNames = {};
9
+ Object.defineProperty(exports, "default", {
10
+ enumerable: true,
11
+ get: function get() {
12
+ return _Insert["default"];
13
+ }
14
+ });
15
+
16
+ var _Insert = _interopRequireWildcard(require("./Insert"));
17
+
18
+ Object.keys(_Insert).forEach(function (key) {
19
+ if (key === "default" || key === "__esModule") return;
20
+ if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
21
+ if (key in exports && exports[key] === _Insert[key]) return;
22
+ Object.defineProperty(exports, key, {
23
+ enumerable: true,
24
+ get: function get() {
25
+ return _Insert[key];
26
+ }
27
+ });
28
+ });
29
+
30
+ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
31
+
32
+ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -1,7 +1,7 @@
1
1
  import React from "react";
2
2
  import type { ColumnDefinition, Row, Status, SelectMode, PaginationConfiguration, Sorting, DataConfiguration, GetItemId } from "./types";
3
3
  declare type CanSelectItem<Item> = (item: Item, idx: number) => boolean;
4
- export interface DataTableProps<Item> {
4
+ interface BaseDataTableProps<Item> {
5
5
  data: Item[];
6
6
  itemId?: GetItemId<Item>;
7
7
  pagination?: PaginationConfiguration;
@@ -11,13 +11,22 @@ export interface DataTableProps<Item> {
11
11
  noDataContent?: React.ReactNode;
12
12
  errorContent?: React.ReactNode;
13
13
  columns: ColumnDefinition<Item>[];
14
- selectMode?: SelectMode;
15
- selection?: string[];
16
- onSelectionChange?(rowId: string[]): void;
17
- canSelectItem?: CanSelectItem<Item>;
18
14
  canHoverRow?(row: Row<Item>): boolean;
19
15
  onRowHoveredChanged?(row: Row<Item> | null): void;
20
16
  }
17
+ declare type DataTableWithSelectMode<Item> = {
18
+ selectMode: Exclude<SelectMode, "none">;
19
+ selection?: string[];
20
+ onSelectionChange?(rowId: string[]): void;
21
+ canSelectItem?: CanSelectItem<Item>;
22
+ };
23
+ declare type DataTableWithoutSelectMode = {
24
+ selectMode?: Extract<SelectMode, "none">;
25
+ selection?: never;
26
+ onSelectionChange?: never;
27
+ canSelectItem?: never;
28
+ };
29
+ export declare type DataTableProps<Item> = BaseDataTableProps<Item> & (DataTableWithSelectMode<Item> | DataTableWithoutSelectMode);
21
30
  /**
22
31
  * Tables are used to structure content in a grid to make it easier to see relationships and to facilitate understanding.
23
32
  *
@@ -122,11 +122,9 @@ var DataTable = function DataTable(_ref) {
122
122
  setHoveredRowId(undefined);
123
123
  }, [data]);
124
124
  var computedColumns = (0, _compact["default"])([selectMode === "single" && {
125
- id: "singleSelect",
126
- accessor: "singleSelect",
127
- Header: function Header() {
128
- return null;
129
- },
125
+ id: "_internal_singleSelect",
126
+ accessor: "_internal_singleSelect",
127
+ Header: false,
130
128
  Cell: function Cell(_ref2) {
131
129
  var row = _ref2.row;
132
130
  return /*#__PURE__*/_react["default"].createElement("div", {
@@ -139,11 +137,11 @@ var DataTable = function DataTable(_ref) {
139
137
  },
140
138
  className: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["w-3"])))
141
139
  }, selectMode === "multi" && {
142
- id: "multiSelect",
143
- accessor: "multiSelect",
140
+ id: "_internal_multiSelect",
141
+ accessor: "_internal_multiSelect",
144
142
  Header: function Header() {
145
143
  var unselectableRows = rows.filter(function (row) {
146
- return !row.selectable;
144
+ return !row.selectable && row.selected;
147
145
  }).map(function (r) {
148
146
  return r.id;
149
147
  });
@@ -155,14 +153,15 @@ var DataTable = function DataTable(_ref) {
155
153
  var selectionLength = (selection !== null && selection !== void 0 ? selection : []).length;
156
154
  var dataLength = pagination ? pagination.itemsPerPage : data.length;
157
155
  var isChecked = selectionLength === dataLength;
156
+ var isIndeterminate = selectionLength > 0 && selectionLength !== dataLength;
158
157
  return /*#__PURE__*/_react["default"].createElement(_Checkbox["default"], {
159
158
  "aria-label": "Select all" // Small hack to position the checkbox in the center of the header
160
159
  ,
161
160
  className: (0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["absolute mb-2.5"]))),
162
161
  checked: isChecked,
163
- indeterminate: selectionLength > 0 && selectionLength !== dataLength,
162
+ indeterminate: isIndeterminate,
164
163
  onClick: function onClick() {
165
- return isChecked ? onSelectionChange === null || onSelectionChange === void 0 ? void 0 : onSelectionChange(unselectableRows) : onSelectionChange === null || onSelectionChange === void 0 ? void 0 : onSelectionChange([].concat((0, _toConsumableArray2["default"])(unselectableRows), (0, _toConsumableArray2["default"])(selectableRows)));
164
+ return isChecked ? onSelectionChange === null || onSelectionChange === void 0 ? void 0 : onSelectionChange(unselectableRows) : isIndeterminate ? onSelectionChange === null || onSelectionChange === void 0 ? void 0 : onSelectionChange(selectionLength === selectableRows.length + unselectableRows.length ? unselectableRows : [].concat((0, _toConsumableArray2["default"])(unselectableRows), (0, _toConsumableArray2["default"])(selectableRows))) : onSelectionChange === null || onSelectionChange === void 0 ? void 0 : onSelectionChange([].concat((0, _toConsumableArray2["default"])(unselectableRows), (0, _toConsumableArray2["default"])(selectableRows)));
166
165
  }
167
166
  });
168
167
  },
@@ -183,13 +182,9 @@ var DataTable = function DataTable(_ref) {
183
182
  return typeof c === "string" ? {
184
183
  id: c,
185
184
  accessor: c,
186
- Header: function Header() {
187
- return /*#__PURE__*/_react["default"].createElement("span", null, (0, _utils.toSentenceCase)(c));
188
- }
185
+ Header: (0, _utils.toSentenceCase)(c)
189
186
  } : _objectSpread(_objectSpread({}, c), {}, {
190
- Header: (_c$Header = c.Header) !== null && _c$Header !== void 0 ? _c$Header : function () {
191
- return /*#__PURE__*/_react["default"].createElement("span", null, (0, _utils.toSentenceCase)(c.id));
192
- }
187
+ Header: (_c$Header = c.Header) !== null && _c$Header !== void 0 ? _c$Header : (0, _utils.toSentenceCase)(c.id)
193
188
  });
194
189
  }))));
195
190
  var getItemIdInternal = itemId || DEFAULT_GET_ITEM_ID;
@@ -33,9 +33,9 @@ var Header = function Header(_ref) {
33
33
  disabled: disabled,
34
34
  sortingDirection: sortingDirection[1],
35
35
  onToggleSort: onToggleSort
36
- }, Header ? /*#__PURE__*/_react["default"].createElement(Header, {
36
+ }, !Header ? null : typeof Header === "string" ? Header : /*#__PURE__*/_react["default"].createElement(Header, {
37
37
  column: column
38
- }) : Header);
38
+ }));
39
39
  })));
40
40
  };
41
41
 
@@ -25,7 +25,7 @@ export interface AdvancedColumnDefinition<Item> {
25
25
  /** A string or a function which determines how to get the column data */
26
26
  accessor: string | ((item: Item) => any);
27
27
  sort?: boolean;
28
- Header?: React.ComponentType<HeaderProps<Item>>;
28
+ Header?: React.ComponentType<HeaderProps<Item>> | string | false;
29
29
  Cell?: React.ComponentType<CellProps<Item>>;
30
30
  className?: string;
31
31
  }
package/cjs/index.d.ts CHANGED
@@ -9,18 +9,21 @@ export * from "./AutoComplete";
9
9
  export * from "./Avatars";
10
10
  export * from "./Badge";
11
11
  export * from "./Banner";
12
+ export * from "./Banners";
12
13
  export * from "./Button";
13
14
  export * from "./Card";
14
15
  export * from "./Checkbox";
15
16
  export * from "./ClickAwayContainer";
16
17
  export * from "./DatePicker";
17
18
  export * from "./Dropdown";
19
+ export * from "./Dropzone";
18
20
  export * from "./EmptyState";
19
21
  export * from "./Field";
20
22
  export * from "./Flag";
21
23
  export * from "./FlexGrid";
22
24
  export * from "./HelpUnderline";
23
25
  export * from "./Input";
26
+ export * from "./Insert";
24
27
  export * from "./Link";
25
28
  export * from "./Medallion";
26
29
  export * from "./Modal";