@openfin/ui-library 0.1.40 → 0.2.0-alpha.1657388871
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/README.md +0 -7
- package/dist/openfin.ui.js +660 -0
- package/dist/openfin.ui.js.LICENSE.txt +14 -0
- package/dist/{components → types/components}/elements/Badge/badge.d.ts +2 -1
- package/dist/types/components/elements/Icon/openfin/BellFilledIcon.d.ts +2 -0
- package/dist/{components → types/components}/elements/Icon/openfin/BellIcon.d.ts +0 -1
- package/dist/{components → types/components}/elements/Icon/openfin/BrokenLinkIcon.d.ts +0 -1
- package/dist/{components → types/components}/elements/Icon/openfin/FilterIcon.d.ts +0 -1
- package/dist/{components → types/components}/elements/Icon/openfin/FloppyDiskIcon.d.ts +0 -1
- package/dist/types/components/elements/Icon/openfin/FragmentsIcon.d.ts +2 -0
- package/dist/{components → types/components}/elements/Icon/openfin/LightBulbFilledIcon.d.ts +0 -1
- package/dist/{components → types/components}/elements/Icon/openfin/LightBulbOutlinedIcon.d.ts +0 -1
- package/dist/{components → types/components}/elements/Icon/openfin/LockedClosedFilledIcon.d.ts +0 -1
- package/dist/{components → types/components}/elements/Icon/openfin/MinimizeIcon.d.ts +0 -1
- package/dist/{components → types/components}/elements/Icon/openfin/OpenFinIcon.d.ts +0 -1
- package/dist/types/components/elements/Icon/openfin/StackIcon.d.ts +2 -0
- package/dist/types/components/elements/Icon/openfin/StorefrontIcon.d.ts +2 -0
- package/dist/{components → types/components}/elements/Icon/openfin/WorkspaceIcon.d.ts +0 -1
- package/dist/{components → types/components}/elements/Icon/openfin/index.d.ts +4 -0
- package/dist/types/components/elements/IconWithBadge/iconWithBadge.d.ts +5 -0
- package/dist/types/components/elements/IconWithBadge/index.d.ts +1 -0
- package/dist/types/components/input/RadioGroup/index.d.ts +1 -0
- package/dist/types/components/input/RadioGroup/radioGroup.d.ts +12 -0
- package/dist/types/components/input/RadioInput/index.d.ts +1 -0
- package/dist/types/components/input/RadioInput/radioInput.d.ts +11 -0
- package/dist/{components → types/components}/system/ThemeProvider/lib/colors.d.ts +2 -2
- package/dist/{components → types/components}/system/ThemeProvider/lib/constants.d.ts +4 -2
- package/dist/{components → types/components}/system/ThemeProvider/lib/helpers.d.ts +2 -1
- package/dist/{components → types/components}/typography/Heading/heading.d.ts +24 -24
- package/dist/{index.d.ts → types/index.d.ts} +2 -0
- package/dist/{lib → types/lib}/math.d.ts +5 -1
- package/dist/{storybookHelpers.d.ts → types/storybookHelpers.d.ts} +1 -1
- package/package.json +93 -70
- package/dist/assets/fonts/index.d.ts +0 -6
- package/dist/assets/fonts/index.js +0 -11
- package/dist/components/controls/Button/button.js +0 -83
- package/dist/components/controls/Button/button.variants.js +0 -124
- package/dist/components/controls/Button/index.js +0 -14
- package/dist/components/controls/Toggle/index.js +0 -13
- package/dist/components/controls/Toggle/toggle.js +0 -98
- package/dist/components/elements/Badge/badge.js +0 -41
- package/dist/components/elements/Badge/index.js +0 -13
- package/dist/components/elements/Icon/icon.js +0 -56
- package/dist/components/elements/Icon/icon.variants.js +0 -60
- package/dist/components/elements/Icon/index.js +0 -13
- package/dist/components/elements/Icon/openfin/BellIcon.js +0 -24
- package/dist/components/elements/Icon/openfin/BrokenLinkIcon.js +0 -21
- package/dist/components/elements/Icon/openfin/FilterIcon.js +0 -20
- package/dist/components/elements/Icon/openfin/FloppyDiskIcon.js +0 -23
- package/dist/components/elements/Icon/openfin/LightBulbFilledIcon.js +0 -21
- package/dist/components/elements/Icon/openfin/LightBulbOutlinedIcon.js +0 -20
- package/dist/components/elements/Icon/openfin/LockedClosedFilledIcon.js +0 -23
- package/dist/components/elements/Icon/openfin/MinimizeIcon.js +0 -23
- package/dist/components/elements/Icon/openfin/OpenFinIcon.js +0 -23
- package/dist/components/elements/Icon/openfin/WorkspaceIcon.js +0 -26
- package/dist/components/elements/Icon/openfin/index.js +0 -22
- package/dist/components/elements/Loader/index.js +0 -13
- package/dist/components/elements/Loader/loader.js +0 -25
- package/dist/components/input/BaseInput/baseInput.js +0 -94
- package/dist/components/input/BaseInput/index.js +0 -13
- package/dist/components/input/Checkbox/checkbox.js +0 -96
- package/dist/components/input/Checkbox/index.js +0 -13
- package/dist/components/input/NumberInput/index.js +0 -13
- package/dist/components/input/NumberInput/numberInput.js +0 -108
- package/dist/components/input/RawInput/index.js +0 -13
- package/dist/components/input/RawInput/rawInput.js +0 -12
- package/dist/components/input/TextInput/index.js +0 -13
- package/dist/components/input/TextInput/textInput.js +0 -10
- package/dist/components/layout/Box/box.js +0 -50
- package/dist/components/layout/Box/index.js +0 -13
- package/dist/components/layout/Box/types.js +0 -2
- package/dist/components/layout/DefinitionList/definitionList.js +0 -49
- package/dist/components/layout/DefinitionList/index.js +0 -13
- package/dist/components/system/GlobalStyles/globalStyles.js +0 -53
- package/dist/components/system/GlobalStyles/index.js +0 -13
- package/dist/components/system/HOC/index.js +0 -2
- package/dist/components/system/ThemeProvider/index.js +0 -21
- package/dist/components/system/ThemeProvider/lib/colors.js +0 -21
- package/dist/components/system/ThemeProvider/lib/config.js +0 -6
- package/dist/components/system/ThemeProvider/lib/constants.js +0 -271
- package/dist/components/system/ThemeProvider/lib/createFontFaceCss.js +0 -43
- package/dist/components/system/ThemeProvider/lib/createTheme.js +0 -43
- package/dist/components/system/ThemeProvider/lib/fonts.d.js +0 -1
- package/dist/components/system/ThemeProvider/lib/helpers.js +0 -54
- package/dist/components/system/ThemeProvider/lib/interface.js +0 -2
- package/dist/components/system/ThemeProvider/lib/mixins.js +0 -85
- package/dist/components/system/ThemeProvider/lib/palette.js +0 -38
- package/dist/components/system/ThemeProvider/lib/types.js +0 -2
- package/dist/components/system/ThemeProvider/theme/index.js +0 -13
- package/dist/components/system/ThemeProvider/theme/openfin.js +0 -39
- package/dist/components/system/ThemeProvider/themeProvider.js +0 -20
- package/dist/components/templates/ContactCard/contactCard.js +0 -114
- package/dist/components/templates/ContactCard/index.js +0 -13
- package/dist/components/templates/utils/name.js +0 -22
- package/dist/components/typography/Heading/heading.js +0 -64
- package/dist/components/typography/Heading/index.js +0 -13
- package/dist/components/typography/Text/index.js +0 -13
- package/dist/components/typography/Text/text.js +0 -21
- package/dist/hooks/useColorScheme.js +0 -33
- package/dist/hooks/useMediaQuery.js +0 -39
- package/dist/hooks/usePrevious.js +0 -12
- package/dist/hooks/useTheme.js +0 -34
- package/dist/index.js +0 -46
- package/dist/lib/math.js +0 -24
- package/dist/lib/whenFin.js +0 -13
- package/dist/lib/whenFin.spec.js +0 -39
- package/dist/react-app-env.d.js +0 -2
- package/dist/storybookHelpers.js +0 -58
- /package/dist/{components → types/components}/controls/Button/button.d.ts +0 -0
- /package/dist/{components → types/components}/controls/Button/button.variants.d.ts +0 -0
- /package/dist/{components → types/components}/controls/Button/index.d.ts +0 -0
- /package/dist/{components → types/components}/controls/Toggle/index.d.ts +0 -0
- /package/dist/{components → types/components}/controls/Toggle/toggle.d.ts +0 -0
- /package/dist/{components → types/components}/elements/Badge/index.d.ts +0 -0
- /package/dist/{components → types/components}/elements/Icon/icon.d.ts +0 -0
- /package/dist/{components → types/components}/elements/Icon/icon.variants.d.ts +0 -0
- /package/dist/{components → types/components}/elements/Icon/index.d.ts +0 -0
- /package/dist/{components → types/components}/elements/Loader/index.d.ts +0 -0
- /package/dist/{components → types/components}/elements/Loader/loader.d.ts +0 -0
- /package/dist/{components → types/components}/input/BaseInput/baseInput.d.ts +0 -0
- /package/dist/{components → types/components}/input/BaseInput/index.d.ts +0 -0
- /package/dist/{components → types/components}/input/Checkbox/checkbox.d.ts +0 -0
- /package/dist/{components → types/components}/input/Checkbox/index.d.ts +0 -0
- /package/dist/{components → types/components}/input/NumberInput/index.d.ts +0 -0
- /package/dist/{components → types/components}/input/NumberInput/numberInput.d.ts +0 -0
- /package/dist/{components → types/components}/input/RawInput/index.d.ts +0 -0
- /package/dist/{components → types/components}/input/RawInput/rawInput.d.ts +0 -0
- /package/dist/{components → types/components}/input/TextInput/index.d.ts +0 -0
- /package/dist/{components → types/components}/input/TextInput/textInput.d.ts +0 -0
- /package/dist/{components → types/components}/layout/Box/box.d.ts +0 -0
- /package/dist/{components → types/components}/layout/Box/index.d.ts +0 -0
- /package/dist/{components → types/components}/layout/Box/types.d.ts +0 -0
- /package/dist/{components → types/components}/layout/DefinitionList/definitionList.d.ts +0 -0
- /package/dist/{components → types/components}/layout/DefinitionList/index.d.ts +0 -0
- /package/dist/{components → types/components}/system/GlobalStyles/globalStyles.d.ts +0 -0
- /package/dist/{components → types/components}/system/GlobalStyles/index.d.ts +0 -0
- /package/dist/{components → types/components}/system/HOC/index.d.ts +0 -0
- /package/dist/{components → types/components}/system/ThemeProvider/index.d.ts +0 -0
- /package/dist/{components → types/components}/system/ThemeProvider/lib/config.d.ts +0 -0
- /package/dist/{components → types/components}/system/ThemeProvider/lib/createFontFaceCss.d.ts +0 -0
- /package/dist/{components → types/components}/system/ThemeProvider/lib/createTheme.d.ts +0 -0
- /package/dist/{components → types/components}/system/ThemeProvider/lib/interface.d.ts +0 -0
- /package/dist/{components → types/components}/system/ThemeProvider/lib/mixins.d.ts +0 -0
- /package/dist/{components → types/components}/system/ThemeProvider/lib/palette.d.ts +0 -0
- /package/dist/{components → types/components}/system/ThemeProvider/lib/types.d.ts +0 -0
- /package/dist/{components → types/components}/system/ThemeProvider/theme/index.d.ts +0 -0
- /package/dist/{components → types/components}/system/ThemeProvider/theme/openfin.d.ts +0 -0
- /package/dist/{components → types/components}/system/ThemeProvider/themeProvider.d.ts +0 -0
- /package/dist/{components → types/components}/templates/ContactCard/contactCard.d.ts +0 -0
- /package/dist/{components → types/components}/templates/ContactCard/index.d.ts +0 -0
- /package/dist/{components → types/components}/templates/utils/name.d.ts +0 -0
- /package/dist/{components → types/components}/typography/Heading/index.d.ts +0 -0
- /package/dist/{components → types/components}/typography/Text/index.d.ts +0 -0
- /package/dist/{components → types/components}/typography/Text/text.d.ts +0 -0
- /package/dist/{hooks → types/hooks}/useColorScheme.d.ts +0 -0
- /package/dist/{hooks → types/hooks}/useMediaQuery.d.ts +0 -0
- /package/dist/{hooks → types/hooks}/usePrevious.d.ts +0 -0
- /package/dist/{hooks → types/hooks}/useTheme.d.ts +0 -0
- /package/dist/{lib → types/lib}/whenFin.d.ts +0 -0
- /package/dist/{lib → types/lib}/whenFin.spec.d.ts +0 -0
|
@@ -1,96 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
-
if (k2 === undefined) k2 = k;
|
|
4
|
-
Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
|
|
5
|
-
}) : (function(o, m, k, k2) {
|
|
6
|
-
if (k2 === undefined) k2 = k;
|
|
7
|
-
o[k2] = m[k];
|
|
8
|
-
}));
|
|
9
|
-
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
10
|
-
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
11
|
-
}) : function(o, v) {
|
|
12
|
-
o["default"] = v;
|
|
13
|
-
});
|
|
14
|
-
var __importStar = (this && this.__importStar) || function (mod) {
|
|
15
|
-
if (mod && mod.__esModule) return mod;
|
|
16
|
-
var result = {};
|
|
17
|
-
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
18
|
-
__setModuleDefault(result, mod);
|
|
19
|
-
return result;
|
|
20
|
-
};
|
|
21
|
-
var __rest = (this && this.__rest) || function (s, e) {
|
|
22
|
-
var t = {};
|
|
23
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
24
|
-
t[p] = s[p];
|
|
25
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
26
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
27
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
28
|
-
t[p[i]] = s[p[i]];
|
|
29
|
-
}
|
|
30
|
-
return t;
|
|
31
|
-
};
|
|
32
|
-
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
33
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
34
|
-
};
|
|
35
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
36
|
-
exports.Checkbox = void 0;
|
|
37
|
-
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
38
|
-
const React = __importStar(require("react"));
|
|
39
|
-
const styled_components_1 = __importDefault(require("styled-components"));
|
|
40
|
-
const BaseInput_1 = require("../BaseInput");
|
|
41
|
-
const Icon_1 = require("../../elements/Icon");
|
|
42
|
-
const ThemeProvider_1 = require("../../system/ThemeProvider");
|
|
43
|
-
exports.Checkbox = React.forwardRef((_a, ref) => {
|
|
44
|
-
var { status } = _a, props = __rest(_a, ["status"]);
|
|
45
|
-
return (jsx_runtime_1.jsx(BaseInput_1.BaseInput, Object.assign({}, props, { type: "checkbox", status: status, renderInput: (_a) => {
|
|
46
|
-
var inputProps = __rest(_a, []);
|
|
47
|
-
return (jsx_runtime_1.jsxs(Container, { children: [jsx_runtime_1.jsx(Input, Object.assign({ ref: ref, id: inputProps.name, type: "checkbox" }, inputProps), void 0),
|
|
48
|
-
jsx_runtime_1.jsx(Fauxbox, Object.assign({ status: status }, { children: jsx_runtime_1.jsx(CheckIcon, {}, void 0) }), void 0)] }, void 0));
|
|
49
|
-
} }), void 0));
|
|
50
|
-
});
|
|
51
|
-
exports.Checkbox.displayName = 'Checkbox';
|
|
52
|
-
const Container = styled_components_1.default.div `
|
|
53
|
-
display: inline-block;
|
|
54
|
-
position: relative;
|
|
55
|
-
`;
|
|
56
|
-
const Fauxbox = styled_components_1.default.div `
|
|
57
|
-
display: flex;
|
|
58
|
-
align-items: center;
|
|
59
|
-
justify-content: center;
|
|
60
|
-
height: ${({ theme }) => theme.px.base};
|
|
61
|
-
width: ${({ theme }) => theme.px.base};
|
|
62
|
-
border: 1px solid ${({ theme }) => theme.palette.textDefault};
|
|
63
|
-
border-color: ${({ theme, status }) => ThemeProvider_1.getStatusColor(theme, status, 'textDefault')};
|
|
64
|
-
border-radius: 2px;
|
|
65
|
-
pointer-events: none;
|
|
66
|
-
`;
|
|
67
|
-
const CheckIcon = styled_components_1.default(Icon_1.Icon).attrs({ icon: 'CheckIcon', size: 'small' }) `
|
|
68
|
-
opacity: 0;
|
|
69
|
-
`;
|
|
70
|
-
const Input = styled_components_1.default.input `
|
|
71
|
-
opacity: 0;
|
|
72
|
-
position: absolute;
|
|
73
|
-
width: 100%;
|
|
74
|
-
height: 100%;
|
|
75
|
-
cursor: pointer;
|
|
76
|
-
|
|
77
|
-
&:checked + ${Fauxbox + ' ' + CheckIcon} {
|
|
78
|
-
opacity: 1;
|
|
79
|
-
}
|
|
80
|
-
|
|
81
|
-
&:hover + ${Fauxbox} {
|
|
82
|
-
box-shadow: 0 0 1px 1px ${({ theme }) => theme.palette.inputFocused};
|
|
83
|
-
}
|
|
84
|
-
|
|
85
|
-
&:focus + ${Fauxbox} {
|
|
86
|
-
box-shadow: 0 0 1px 1px ${({ theme }) => theme.palette.inputFocused};
|
|
87
|
-
}
|
|
88
|
-
|
|
89
|
-
&:disabled {
|
|
90
|
-
cursor: not-allowed;
|
|
91
|
-
}
|
|
92
|
-
|
|
93
|
-
&:disabled + ${Fauxbox} {
|
|
94
|
-
opacity: 0.5;
|
|
95
|
-
}
|
|
96
|
-
`;
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
-
if (k2 === undefined) k2 = k;
|
|
4
|
-
Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
|
|
5
|
-
}) : (function(o, m, k, k2) {
|
|
6
|
-
if (k2 === undefined) k2 = k;
|
|
7
|
-
o[k2] = m[k];
|
|
8
|
-
}));
|
|
9
|
-
var __exportStar = (this && this.__exportStar) || function(m, exports) {
|
|
10
|
-
for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
|
|
11
|
-
};
|
|
12
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
13
|
-
__exportStar(require("./checkbox"), exports);
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
-
if (k2 === undefined) k2 = k;
|
|
4
|
-
Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
|
|
5
|
-
}) : (function(o, m, k, k2) {
|
|
6
|
-
if (k2 === undefined) k2 = k;
|
|
7
|
-
o[k2] = m[k];
|
|
8
|
-
}));
|
|
9
|
-
var __exportStar = (this && this.__exportStar) || function(m, exports) {
|
|
10
|
-
for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
|
|
11
|
-
};
|
|
12
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
13
|
-
__exportStar(require("./numberInput"), exports);
|
|
@@ -1,108 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __rest = (this && this.__rest) || function (s, e) {
|
|
3
|
-
var t = {};
|
|
4
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
5
|
-
t[p] = s[p];
|
|
6
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
7
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
8
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
9
|
-
t[p[i]] = s[p[i]];
|
|
10
|
-
}
|
|
11
|
-
return t;
|
|
12
|
-
};
|
|
13
|
-
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
14
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
15
|
-
};
|
|
16
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
|
-
exports.NumberInput = void 0;
|
|
18
|
-
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
19
|
-
const react_1 = require("react");
|
|
20
|
-
const styled_components_1 = __importDefault(require("styled-components"));
|
|
21
|
-
const math_1 = require("../../../lib/math");
|
|
22
|
-
const Icon_1 = require("../../elements/Icon");
|
|
23
|
-
const Box_1 = require("../../layout/Box");
|
|
24
|
-
const BaseInput_1 = require("../BaseInput");
|
|
25
|
-
var Direction;
|
|
26
|
-
(function (Direction) {
|
|
27
|
-
Direction[Direction["Up"] = 1] = "Up";
|
|
28
|
-
Direction[Direction["Down"] = -1] = "Down";
|
|
29
|
-
})(Direction || (Direction = {}));
|
|
30
|
-
exports.NumberInput = react_1.forwardRef((_a, ref) => {
|
|
31
|
-
var { min, max, onChange, step = 1, value } = _a, props = __rest(_a, ["min", "max", "onChange", "step", "value"]);
|
|
32
|
-
// Since we are recreating the +/- buttons, we need to capture the value state at this level.
|
|
33
|
-
const stepInterval = Number(step);
|
|
34
|
-
const [num, setNum] = react_1.useState(Number(value));
|
|
35
|
-
react_1.useEffect(() => setNum(Number(value)), []);
|
|
36
|
-
const takeStep = (direction) => {
|
|
37
|
-
const base = num ? Number(num) : 0;
|
|
38
|
-
const lower = min ? Number(min) : undefined;
|
|
39
|
-
const upper = max ? Number(max) : undefined;
|
|
40
|
-
const newNum = math_1.clamp(base + stepInterval * direction, lower, upper);
|
|
41
|
-
setNum(newNum);
|
|
42
|
-
};
|
|
43
|
-
return (jsx_runtime_1.jsx(BaseInput_1.BaseInput, Object.assign({ type: "number" }, props, { renderInput: (_a) => {
|
|
44
|
-
var inputProps = __rest(_a, []);
|
|
45
|
-
return (jsx_runtime_1.jsx(StyledNumberInput, Object.assign({ ref: ref, onIncrement: () => takeStep(Direction.Up), onDecrement: () => takeStep(Direction.Down), onChange: (event) => {
|
|
46
|
-
const { value } = event === null || event === void 0 ? void 0 : event.target;
|
|
47
|
-
if (value) {
|
|
48
|
-
setNum(Number(value));
|
|
49
|
-
}
|
|
50
|
-
onChange && onChange(event);
|
|
51
|
-
}, min: min, max: max, step: step }, inputProps, { value: num }), void 0));
|
|
52
|
-
} }), void 0));
|
|
53
|
-
});
|
|
54
|
-
exports.NumberInput.displayName = 'NumberInput';
|
|
55
|
-
const StyledNumberInput = react_1.forwardRef((_a, ref) => {
|
|
56
|
-
var { onIncrement, onDecrement } = _a, props = __rest(_a, ["onIncrement", "onDecrement"]);
|
|
57
|
-
return (jsx_runtime_1.jsxs(StyledInputContainer, { children: [jsx_runtime_1.jsx(Input, Object.assign({ ref: ref }, props), void 0),
|
|
58
|
-
jsx_runtime_1.jsxs(ControlContainer, Object.assign({ flexDirection: "column", disabled: props.disabled }, { children: [jsx_runtime_1.jsx(ArrowControl, Object.assign({ onClick: onIncrement, disabled: props.disabled }, { children: jsx_runtime_1.jsx(Icon_1.Icon, { icon: "TriangleUpIcon" }, void 0) }), void 0),
|
|
59
|
-
jsx_runtime_1.jsx(ArrowControl, Object.assign({ onClick: onDecrement, disabled: props.disabled }, { children: jsx_runtime_1.jsx(Icon_1.Icon, { icon: "TriangleDownIcon" }, void 0) }), void 0)] }), void 0)] }, void 0));
|
|
60
|
-
});
|
|
61
|
-
StyledNumberInput.displayName = 'StyledNumberInput';
|
|
62
|
-
const StyledInputContainer = styled_components_1.default.div `
|
|
63
|
-
position: relative;
|
|
64
|
-
overflow: hidden;
|
|
65
|
-
border-radius: ${({ theme }) => theme.radius.small};
|
|
66
|
-
width: 100%;
|
|
67
|
-
`;
|
|
68
|
-
const ControlContainer = styled_components_1.default(Box_1.Box) `
|
|
69
|
-
align-items: center;
|
|
70
|
-
position: absolute;
|
|
71
|
-
right: 1px;
|
|
72
|
-
top: 1px;
|
|
73
|
-
gap: 1px;
|
|
74
|
-
height: calc(100% - 2px);
|
|
75
|
-
border-radius: ${({ theme }) => `0 ${theme.radius.small} ${theme.radius.small} 0`};
|
|
76
|
-
overflow: hidden;
|
|
77
|
-
|
|
78
|
-
pointer-events: ${({ disabled }) => (disabled ? 'none' : undefined)};
|
|
79
|
-
`;
|
|
80
|
-
const ArrowControl = styled_components_1.default(Box_1.Box) `
|
|
81
|
-
cursor: pointer;
|
|
82
|
-
background: ${({ theme }) => theme.palette.inputDisabled};
|
|
83
|
-
padding: 0 ${({ theme }) => theme.px.xsmall};
|
|
84
|
-
user-select: none;
|
|
85
|
-
height: 50%;
|
|
86
|
-
align-items: center;
|
|
87
|
-
justify-content: center;
|
|
88
|
-
|
|
89
|
-
color: ${({ disabled, theme }) => disabled ? theme.palette.textHelp : theme.palette.textDefault};
|
|
90
|
-
|
|
91
|
-
&:hover {
|
|
92
|
-
background: ${({ theme }) => theme.palette.inputFocused};
|
|
93
|
-
}
|
|
94
|
-
|
|
95
|
-
&:active {
|
|
96
|
-
background: ${({ theme }) => theme.palette.inputColor};
|
|
97
|
-
}
|
|
98
|
-
`;
|
|
99
|
-
const Input = styled_components_1.default(BaseInput_1.StyledInputField) `
|
|
100
|
-
appearance: textfield;
|
|
101
|
-
padding-right: ${({ theme }) => theme.px.xxxlarge};
|
|
102
|
-
|
|
103
|
-
::-webkit-inner-spin-button,
|
|
104
|
-
::-webkit-outer-spin-button {
|
|
105
|
-
appearance: none;
|
|
106
|
-
margin: 0;
|
|
107
|
-
}
|
|
108
|
-
`;
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
-
if (k2 === undefined) k2 = k;
|
|
4
|
-
Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
|
|
5
|
-
}) : (function(o, m, k, k2) {
|
|
6
|
-
if (k2 === undefined) k2 = k;
|
|
7
|
-
o[k2] = m[k];
|
|
8
|
-
}));
|
|
9
|
-
var __exportStar = (this && this.__exportStar) || function(m, exports) {
|
|
10
|
-
for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
|
|
11
|
-
};
|
|
12
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
13
|
-
__exportStar(require("./rawInput"), exports);
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
-
};
|
|
5
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
-
exports.RawInput = void 0;
|
|
7
|
-
const styled_components_1 = __importDefault(require("styled-components"));
|
|
8
|
-
/**
|
|
9
|
-
* Unstyled input extended by other components
|
|
10
|
-
*/
|
|
11
|
-
exports.RawInput = styled_components_1.default.input ``;
|
|
12
|
-
exports.RawInput.displayName = 'RawInput';
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
-
if (k2 === undefined) k2 = k;
|
|
4
|
-
Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
|
|
5
|
-
}) : (function(o, m, k, k2) {
|
|
6
|
-
if (k2 === undefined) k2 = k;
|
|
7
|
-
o[k2] = m[k];
|
|
8
|
-
}));
|
|
9
|
-
var __exportStar = (this && this.__exportStar) || function(m, exports) {
|
|
10
|
-
for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
|
|
11
|
-
};
|
|
12
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
13
|
-
__exportStar(require("./textInput"), exports);
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.TextInput = void 0;
|
|
4
|
-
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
|
-
const react_1 = require("react");
|
|
6
|
-
const BaseInput_1 = require("../BaseInput");
|
|
7
|
-
exports.TextInput = react_1.forwardRef((props, ref) => {
|
|
8
|
-
return jsx_runtime_1.jsx(BaseInput_1.BaseInput, Object.assign({ ref: ref, type: "text" }, props), void 0);
|
|
9
|
-
});
|
|
10
|
-
exports.TextInput.displayName = 'TextInput';
|
|
@@ -1,50 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
-
};
|
|
5
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
-
exports.Box = void 0;
|
|
7
|
-
const styled_components_1 = __importDefault(require("styled-components"));
|
|
8
|
-
const mixins_1 = require("../../system/ThemeProvider/lib/mixins");
|
|
9
|
-
const palette_1 = require("../../system/ThemeProvider/lib/palette");
|
|
10
|
-
/**
|
|
11
|
-
* ## BackgroundLevels
|
|
12
|
-
* Maps background levels to palette colors.
|
|
13
|
-
*/
|
|
14
|
-
const BackgroundLevels = {
|
|
15
|
-
1: palette_1.Palette.background1,
|
|
16
|
-
2: palette_1.Palette.background2,
|
|
17
|
-
3: palette_1.Palette.background3,
|
|
18
|
-
4: palette_1.Palette.background4,
|
|
19
|
-
5: palette_1.Palette.background5,
|
|
20
|
-
6: palette_1.Palette.background6,
|
|
21
|
-
};
|
|
22
|
-
/**
|
|
23
|
-
* ## Box
|
|
24
|
-
*
|
|
25
|
-
* Div with flexbox properties applied to their CSS default values.
|
|
26
|
-
*
|
|
27
|
-
* - Box can be both the flex parent and the flex child.
|
|
28
|
-
* - None of the child properties should be applied unless specified.
|
|
29
|
-
*/
|
|
30
|
-
exports.Box = styled_components_1.default.div `
|
|
31
|
-
/**
|
|
32
|
-
* Style Scrollbar for Boxes with overflow
|
|
33
|
-
*/
|
|
34
|
-
${mixins_1.Mixins.scrollbar.base}
|
|
35
|
-
|
|
36
|
-
display: ${({ display = 'flex' }) => display};
|
|
37
|
-
flex-direction: ${({ flexDirection = 'row' }) => flexDirection};
|
|
38
|
-
flex-wrap: ${({ flexWrap = 'nowrap' }) => flexWrap};
|
|
39
|
-
align-items: ${({ alignItems }) => alignItems};
|
|
40
|
-
justify-content: ${({ justifyContent }) => justifyContent};
|
|
41
|
-
gap: ${({ theme, gap }) => gap && theme.px[gap]};
|
|
42
|
-
align-self: ${({ alignSelf }) => alignSelf};
|
|
43
|
-
flex-basis: ${({ flexBasis }) => flexBasis};
|
|
44
|
-
flex-grow: ${({ flexGrow }) => flexGrow};
|
|
45
|
-
flex-shrink: ${({ flexShrink }) => flexShrink};
|
|
46
|
-
order: ${({ order }) => order};
|
|
47
|
-
padding: ${({ theme, padding }) => padding && theme.px[padding]};
|
|
48
|
-
background: ${({ theme, background }) => background && theme.palette[BackgroundLevels[background]]};
|
|
49
|
-
`;
|
|
50
|
-
exports.Box.displayName = 'Box';
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
-
if (k2 === undefined) k2 = k;
|
|
4
|
-
Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
|
|
5
|
-
}) : (function(o, m, k, k2) {
|
|
6
|
-
if (k2 === undefined) k2 = k;
|
|
7
|
-
o[k2] = m[k];
|
|
8
|
-
}));
|
|
9
|
-
var __exportStar = (this && this.__exportStar) || function(m, exports) {
|
|
10
|
-
for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
|
|
11
|
-
};
|
|
12
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
13
|
-
__exportStar(require("./box"), exports);
|
|
@@ -1,49 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __rest = (this && this.__rest) || function (s, e) {
|
|
3
|
-
var t = {};
|
|
4
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
5
|
-
t[p] = s[p];
|
|
6
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
7
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
8
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
9
|
-
t[p[i]] = s[p[i]];
|
|
10
|
-
}
|
|
11
|
-
return t;
|
|
12
|
-
};
|
|
13
|
-
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
14
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
15
|
-
};
|
|
16
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
|
-
exports.DefinitionList = void 0;
|
|
18
|
-
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
19
|
-
const react_1 = __importDefault(require("react"));
|
|
20
|
-
const styled_components_1 = __importDefault(require("styled-components"));
|
|
21
|
-
const DefinitionList = (_a) => {
|
|
22
|
-
var { definitions } = _a, rest = __rest(_a, ["definitions"]);
|
|
23
|
-
return (jsx_runtime_1.jsx(List, Object.assign({}, rest, { children: Array.from(definitions.keys()).map((name, index) => {
|
|
24
|
-
return (jsx_runtime_1.jsxs(react_1.default.Fragment, { children: [jsx_runtime_1.jsx(Name, { children: name }, void 0),
|
|
25
|
-
jsx_runtime_1.jsx(Definition, { children: definitions.get(name) }, void 0)] }, `${name}-${index}`));
|
|
26
|
-
}) }), void 0));
|
|
27
|
-
};
|
|
28
|
-
exports.DefinitionList = DefinitionList;
|
|
29
|
-
const List = styled_components_1.default.dl `
|
|
30
|
-
display: grid;
|
|
31
|
-
grid-template-columns: 1fr 3fr;
|
|
32
|
-
gap: ${({ theme }) => `0 ${theme.px.large}`};
|
|
33
|
-
overflow-y: auto;
|
|
34
|
-
padding: ${({ theme }) => `${theme.px.small} ${theme.px.base}`};
|
|
35
|
-
word-break: break-word;
|
|
36
|
-
`;
|
|
37
|
-
const Name = styled_components_1.default.dt `
|
|
38
|
-
color: ${({ theme }) => theme.palette.textHelp};
|
|
39
|
-
font-size: ${({ theme }) => theme.fontSize.small};
|
|
40
|
-
font-weight: ${({ theme }) => theme.fontWeight.normal};
|
|
41
|
-
line-height: ${({ theme }) => theme.px.base};
|
|
42
|
-
padding-bottom: ${({ theme }) => theme.px.small};
|
|
43
|
-
white-space: nowrap;
|
|
44
|
-
`;
|
|
45
|
-
const Definition = styled_components_1.default.dd `
|
|
46
|
-
font-size: ${({ theme }) => theme.fontSize.small};
|
|
47
|
-
line-height: ${({ theme }) => theme.px.base};
|
|
48
|
-
padding-bottom: ${({ theme }) => theme.px.small};
|
|
49
|
-
`;
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
-
if (k2 === undefined) k2 = k;
|
|
4
|
-
Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
|
|
5
|
-
}) : (function(o, m, k, k2) {
|
|
6
|
-
if (k2 === undefined) k2 = k;
|
|
7
|
-
o[k2] = m[k];
|
|
8
|
-
}));
|
|
9
|
-
var __exportStar = (this && this.__exportStar) || function(m, exports) {
|
|
10
|
-
for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
|
|
11
|
-
};
|
|
12
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
13
|
-
__exportStar(require("./definitionList"), exports);
|
|
@@ -1,53 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.GlobalStyles = void 0;
|
|
4
|
-
const styled_components_1 = require("styled-components");
|
|
5
|
-
const constants_1 = require("../ThemeProvider/lib/constants");
|
|
6
|
-
const helpers_1 = require("../ThemeProvider/lib/helpers");
|
|
7
|
-
exports.GlobalStyles = styled_components_1.createGlobalStyle `
|
|
8
|
-
/** -> Define Global CSS Vars */
|
|
9
|
-
:root {
|
|
10
|
-
--openfin-ui-globalBackground: ${({ theme }) => theme.palette.background1};
|
|
11
|
-
--openfin-ui-globalText: ${({ theme }) => theme.palette.textDefault};
|
|
12
|
-
--openfin-ui-globalPlaceholder: ${({ theme }) => theme.palette.inputPlaceholder};
|
|
13
|
-
--openfin-ui-globalTypography: ${constants_1.Typography.base};
|
|
14
|
-
--openfin-ui-globalTransition: ${({ theme }) => theme.transition.base};
|
|
15
|
-
|
|
16
|
-
/* Map over the palette keys and create variables out of them */
|
|
17
|
-
${helpers_1.getRootCssVars}
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
/** -> @font-face Declaration */
|
|
21
|
-
${helpers_1.getFontFaces}
|
|
22
|
-
|
|
23
|
-
/** -> Micro Reset */
|
|
24
|
-
* {
|
|
25
|
-
box-sizing: border-box;
|
|
26
|
-
margin: 0;
|
|
27
|
-
padding: 0;
|
|
28
|
-
/**
|
|
29
|
-
* Prevent browser auto-weighting
|
|
30
|
-
* @link https://css-tricks.com/almanac/properties/f/font-synthesis/
|
|
31
|
-
*/
|
|
32
|
-
font-synthesis: none;
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
/** -> Apply Global Styles */
|
|
36
|
-
:root,
|
|
37
|
-
body {
|
|
38
|
-
background: var(--openfin-ui-globalBackground);
|
|
39
|
-
color: var(--openfin-ui-globalText);
|
|
40
|
-
font: var(--openfin-ui-globalTypography);
|
|
41
|
-
}
|
|
42
|
-
|
|
43
|
-
::placeholder {
|
|
44
|
-
color: var(--openfin-ui-globalPlaceholder);
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
/** -> Reduced Motion (Accessibility) */
|
|
48
|
-
@media (prefers-reduced-motion) {
|
|
49
|
-
:root {
|
|
50
|
-
--openfin-ui-globalTransition: ${({ theme }) => theme.transition.none};
|
|
51
|
-
}
|
|
52
|
-
}
|
|
53
|
-
`;
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
-
if (k2 === undefined) k2 = k;
|
|
4
|
-
Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
|
|
5
|
-
}) : (function(o, m, k, k2) {
|
|
6
|
-
if (k2 === undefined) k2 = k;
|
|
7
|
-
o[k2] = m[k];
|
|
8
|
-
}));
|
|
9
|
-
var __exportStar = (this && this.__exportStar) || function(m, exports) {
|
|
10
|
-
for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
|
|
11
|
-
};
|
|
12
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
13
|
-
__exportStar(require("./globalStyles"), exports);
|
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
-
if (k2 === undefined) k2 = k;
|
|
4
|
-
Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
|
|
5
|
-
}) : (function(o, m, k, k2) {
|
|
6
|
-
if (k2 === undefined) k2 = k;
|
|
7
|
-
o[k2] = m[k];
|
|
8
|
-
}));
|
|
9
|
-
var __exportStar = (this && this.__exportStar) || function(m, exports) {
|
|
10
|
-
for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
|
|
11
|
-
};
|
|
12
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
13
|
-
__exportStar(require("./lib/constants"), exports);
|
|
14
|
-
__exportStar(require("./lib/createTheme"), exports);
|
|
15
|
-
__exportStar(require("./lib/createFontFaceCss"), exports);
|
|
16
|
-
__exportStar(require("./lib/helpers"), exports);
|
|
17
|
-
__exportStar(require("./lib/interface"), exports);
|
|
18
|
-
__exportStar(require("./lib/mixins"), exports);
|
|
19
|
-
__exportStar(require("./lib/palette"), exports);
|
|
20
|
-
__exportStar(require("./lib/types"), exports);
|
|
21
|
-
__exportStar(require("./themeProvider"), exports);
|
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
-
};
|
|
5
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
-
exports.getMostReadable = exports.darkenColor = exports.lightenColor = void 0;
|
|
7
|
-
const tinycolor2_1 = __importDefault(require("tinycolor2"));
|
|
8
|
-
const lightenColor = (color, amount) => adjustColor(color, 'lighten', amount);
|
|
9
|
-
exports.lightenColor = lightenColor;
|
|
10
|
-
const darkenColor = (color, amount) => adjustColor(color, 'darken', amount);
|
|
11
|
-
exports.darkenColor = darkenColor;
|
|
12
|
-
const adjustColor = (color, func, amount) => {
|
|
13
|
-
if (amount && (amount < 0 || amount > 100)) {
|
|
14
|
-
throw new Error(`${amount} must be a number between 0 and 100`);
|
|
15
|
-
}
|
|
16
|
-
return tinycolor2_1.default(color)[func](amount).toString();
|
|
17
|
-
};
|
|
18
|
-
const getMostReadable = (baseColor, colors) => {
|
|
19
|
-
return tinycolor2_1.default.mostReadable(baseColor, colors).toHexString();
|
|
20
|
-
};
|
|
21
|
-
exports.getMostReadable = getMostReadable;
|