@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.
- package/cjs/Banner/Banner.d.ts +3 -0
- package/cjs/Banner/Banner.js +13 -5
- package/cjs/Banners/Alert/Alert.d.ts +69 -0
- package/cjs/Banners/Alert/Alert.js +144 -0
- package/cjs/Banners/Alert/index.d.ts +2 -0
- package/cjs/Banners/Alert/index.js +32 -0
- package/cjs/Banners/BigBertha/BigBertha.d.ts +40 -0
- package/cjs/Banners/BigBertha/BigBertha.js +68 -0
- package/cjs/Banners/BigBertha/index.d.ts +2 -0
- package/cjs/Banners/BigBertha/index.js +32 -0
- package/cjs/Banners/Promote/Promote.d.ts +56 -0
- package/cjs/Banners/Promote/Promote.js +113 -0
- package/cjs/Banners/Promote/index.d.ts +2 -0
- package/cjs/Banners/Promote/index.js +32 -0
- package/cjs/Banners/index.d.ts +3 -0
- package/cjs/Banners/index.js +44 -0
- package/cjs/Button/Button.tailwind.js +1 -1
- package/cjs/Dropzone/Dropzone.d.ts +16 -0
- package/cjs/Dropzone/Dropzone.js +179 -0
- package/cjs/Dropzone/index.d.ts +2 -0
- package/cjs/Dropzone/index.js +32 -0
- package/cjs/Insert/Insert.d.ts +43 -0
- package/cjs/Insert/Insert.js +80 -0
- package/cjs/Insert/index.d.ts +2 -0
- package/cjs/Insert/index.js +32 -0
- package/cjs/Tables/DataTable/DataTable.d.ts +14 -5
- package/cjs/Tables/DataTable/DataTable.js +11 -16
- package/cjs/Tables/DataTable/components/Header.js +2 -2
- package/cjs/Tables/DataTable/types.d.ts +1 -1
- package/cjs/index.d.ts +3 -0
- package/cjs/index.js +42 -0
- package/cjs/utils/formatters.d.ts +25 -0
- package/cjs/utils/formatters.js +51 -0
- package/esm/Banner/Banner.d.ts +3 -0
- package/esm/Banner/Banner.js +12 -5
- package/esm/Banners/Alert/Alert.d.ts +69 -0
- package/esm/Banners/Alert/Alert.js +127 -0
- package/esm/Banners/Alert/index.d.ts +2 -0
- package/esm/Banners/Alert/index.js +2 -0
- package/esm/Banners/BigBertha/BigBertha.d.ts +40 -0
- package/esm/Banners/BigBertha/BigBertha.js +54 -0
- package/esm/Banners/BigBertha/index.d.ts +2 -0
- package/esm/Banners/BigBertha/index.js +2 -0
- package/esm/Banners/Promote/Promote.d.ts +56 -0
- package/esm/Banners/Promote/Promote.js +95 -0
- package/esm/Banners/Promote/index.d.ts +2 -0
- package/esm/Banners/Promote/index.js +2 -0
- package/esm/Banners/index.d.ts +3 -0
- package/esm/Banners/index.js +3 -0
- package/esm/Button/Button.tailwind.js +1 -1
- package/esm/Dropzone/Dropzone.d.ts +16 -0
- package/esm/Dropzone/Dropzone.js +148 -0
- package/esm/Dropzone/index.d.ts +2 -0
- package/esm/Dropzone/index.js +2 -0
- package/esm/Insert/Insert.d.ts +43 -0
- package/esm/Insert/Insert.js +66 -0
- package/esm/Insert/index.d.ts +2 -0
- package/esm/Insert/index.js +2 -0
- package/esm/Tables/DataTable/DataTable.d.ts +14 -5
- package/esm/Tables/DataTable/DataTable.js +11 -16
- package/esm/Tables/DataTable/components/Header.js +2 -2
- package/esm/Tables/DataTable/types.d.ts +1 -1
- package/esm/index.d.ts +3 -0
- package/esm/index.js +3 -0
- package/esm/utils/formatters.d.ts +25 -0
- package/esm/utils/formatters.js +40 -0
- package/package.json +2 -1
- package/satellite.css +1 -1
- 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,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.
|
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,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,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
|
-
|
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: "
|
126
|
-
accessor: "
|
127
|
-
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: "
|
143
|
-
accessor: "
|
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:
|
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:
|
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 :
|
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
|
-
})
|
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";
|