@hexure/ui 1.8.1 → 1.8.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/index.js +123 -123
- package/dist/cjs/index.js.map +1 -1
- package/dist/cjs/types/components/ButtonMenu/ButtonMenu.d.ts +1 -0
- package/dist/esm/index.js +123 -123
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/types/components/ButtonMenu/ButtonMenu.d.ts +1 -0
- package/dist/index.d.ts +1 -0
- package/package.json +1 -1
package/dist/cjs/index.js
CHANGED
|
@@ -2390,43 +2390,43 @@ const BulkActionBar = (_a) => {
|
|
|
2390
2390
|
React.createElement(ErrorMsg, null, errorMsg))) : null));
|
|
2391
2391
|
};
|
|
2392
2392
|
|
|
2393
|
-
const Wrapper$e = styled.div `
|
|
2394
|
-
background: #fff;
|
|
2395
|
-
border-radius: 8px;
|
|
2396
|
-
box-shadow: 0px 10px 30px -15px rgba(0, 0, 0, 0.2);
|
|
2397
|
-
display: flex;
|
|
2398
|
-
flex-direction: column;
|
|
2399
|
-
gap: 4px;
|
|
2400
|
-
max-height: ${props => props.$maxHeight || '312px'};
|
|
2401
|
-
padding: 10px;
|
|
2402
|
-
width: 200px;
|
|
2393
|
+
const Wrapper$e = styled.div `
|
|
2394
|
+
background: #fff;
|
|
2395
|
+
border-radius: 8px;
|
|
2396
|
+
box-shadow: 0px 10px 30px -15px rgba(0, 0, 0, 0.2);
|
|
2397
|
+
display: flex;
|
|
2398
|
+
flex-direction: column;
|
|
2399
|
+
gap: 4px;
|
|
2400
|
+
max-height: ${props => props.$maxHeight || '312px'};
|
|
2401
|
+
padding: 10px;
|
|
2402
|
+
width: 200px;
|
|
2403
2403
|
`;
|
|
2404
|
-
const MenuItem = styled.div `
|
|
2405
|
-
align-items: center;
|
|
2406
|
-
border-radius: 8px;
|
|
2407
|
-
border: 1px solid transparent;
|
|
2408
|
-
display: flex;
|
|
2409
|
-
gap: 8px;
|
|
2410
|
-
height: 38px;
|
|
2411
|
-
padding: 8px;
|
|
2412
|
-
&:hover {
|
|
2413
|
-
background: rgba(1, 147, 215, 0.1);
|
|
2414
|
-
cursor: pointer;
|
|
2415
|
-
|
|
2416
|
-
svg,
|
|
2417
|
-
path {
|
|
2418
|
-
fill: ${Colors.PRIMARY.Hex} !important;
|
|
2419
|
-
}
|
|
2420
|
-
}
|
|
2404
|
+
const MenuItem = styled.div `
|
|
2405
|
+
align-items: center;
|
|
2406
|
+
border-radius: 8px;
|
|
2407
|
+
border: 1px solid transparent;
|
|
2408
|
+
display: flex;
|
|
2409
|
+
gap: 8px;
|
|
2410
|
+
height: 38px;
|
|
2411
|
+
padding: 8px;
|
|
2412
|
+
&:hover {
|
|
2413
|
+
background: rgba(1, 147, 215, 0.1);
|
|
2414
|
+
cursor: pointer;
|
|
2415
|
+
|
|
2416
|
+
svg,
|
|
2417
|
+
path {
|
|
2418
|
+
fill: ${Colors.PRIMARY.Hex} !important;
|
|
2419
|
+
}
|
|
2420
|
+
}
|
|
2421
2421
|
`;
|
|
2422
|
-
const Title = styled.span `
|
|
2423
|
-
font-family: Roboto;
|
|
2424
|
-
font-size: 14px;
|
|
2425
|
-
font-weight: 400;
|
|
2426
|
-
height: auto;
|
|
2427
|
-
letter-spacing: 0px;
|
|
2428
|
-
line-height: 22px;
|
|
2429
|
-
text-align: left;
|
|
2422
|
+
const Title = styled.span `
|
|
2423
|
+
font-family: Roboto;
|
|
2424
|
+
font-size: 14px;
|
|
2425
|
+
font-weight: 400;
|
|
2426
|
+
height: auto;
|
|
2427
|
+
letter-spacing: 0px;
|
|
2428
|
+
line-height: 22px;
|
|
2429
|
+
text-align: left;
|
|
2430
2430
|
`;
|
|
2431
2431
|
const MoreMenu = (_a) => {
|
|
2432
2432
|
var { maxHeight, menuItems = [] } = _a, accessibleProps = __rest(_a, ["maxHeight", "menuItems"]);
|
|
@@ -2437,21 +2437,21 @@ const MoreMenu = (_a) => {
|
|
|
2437
2437
|
})));
|
|
2438
2438
|
};
|
|
2439
2439
|
|
|
2440
|
-
const Wrapper$d = styled.div `
|
|
2441
|
-
position: relative;
|
|
2442
|
-
display: inline-block;
|
|
2440
|
+
const Wrapper$d = styled.div `
|
|
2441
|
+
position: relative;
|
|
2442
|
+
display: inline-block;
|
|
2443
2443
|
`;
|
|
2444
|
-
const StyledMoreMenu = styled(MoreMenu) `
|
|
2445
|
-
position: absolute;
|
|
2446
|
-
right: ${props => (props.$position === 'right' ? '0px' : 'auto')};
|
|
2447
|
-
left: ${props => (props.$position === 'left' ? '0px' : 'auto')};
|
|
2448
|
-
top: ${props => (props.$small ? '30px' : '40px')};
|
|
2449
|
-
z-index: 10;
|
|
2444
|
+
const StyledMoreMenu = styled(MoreMenu) `
|
|
2445
|
+
position: absolute;
|
|
2446
|
+
right: ${props => (props.$position === 'right' ? '0px' : 'auto')};
|
|
2447
|
+
left: ${props => (props.$position === 'left' ? '0px' : 'auto')};
|
|
2448
|
+
top: ${props => (props.$small ? '30px' : '40px')};
|
|
2449
|
+
z-index: 10;
|
|
2450
2450
|
`;
|
|
2451
|
-
const ButtonMenu = ({ disabled, label, maxHeight, menuItems, small, position = 'right', }) => {
|
|
2451
|
+
const ButtonMenu = ({ disabled, label, maxHeight, menuItems, small, position = 'right', format = 'primary', }) => {
|
|
2452
2452
|
const [show_menu, toggleMenu] = React.useState(false);
|
|
2453
2453
|
return (React.createElement(Wrapper$d, { onMouseEnter: disabled ? undefined : toggleMenu.bind(null, true), onMouseLeave: disabled ? undefined : toggleMenu.bind(null, false) },
|
|
2454
|
-
React.createElement(Button, { disabled: disabled, format:
|
|
2454
|
+
React.createElement(Button, { disabled: disabled, format: format, icon: js.mdiDotsHorizontal, small: small }, label),
|
|
2455
2455
|
show_menu ? (React.createElement(StyledMoreMenu, { "$position": position, "$small": small, maxHeight: maxHeight, menuItems: menuItems })) : null));
|
|
2456
2456
|
};
|
|
2457
2457
|
|
|
@@ -3173,69 +3173,69 @@ const Field = (_a) => {
|
|
|
3173
3173
|
validationText ? React.createElement(Validation, null, validationText) : null));
|
|
3174
3174
|
};
|
|
3175
3175
|
|
|
3176
|
-
const Dropzone = styled.div `
|
|
3177
|
-
border-radius: 8px;
|
|
3178
|
-
border-width: 1px;
|
|
3179
|
-
border-style: dashed;
|
|
3180
|
-
border-color: ${props => (props.$dragging ? Colors.PRIMARY.Hex : '#cccccc')};
|
|
3181
|
-
background: ${props => (props.$dragging ? `rgba(${Colors.PRIMARY.Rgb}, 0.05)` : '#ffffff')};
|
|
3182
|
-
cursor: copy;
|
|
3176
|
+
const Dropzone = styled.div `
|
|
3177
|
+
border-radius: 8px;
|
|
3178
|
+
border-width: 1px;
|
|
3179
|
+
border-style: dashed;
|
|
3180
|
+
border-color: ${props => (props.$dragging ? Colors.PRIMARY.Hex : '#cccccc')};
|
|
3181
|
+
background: ${props => (props.$dragging ? `rgba(${Colors.PRIMARY.Rgb}, 0.05)` : '#ffffff')};
|
|
3182
|
+
cursor: copy;
|
|
3183
3183
|
`;
|
|
3184
|
-
const IconWrapper$1 = styled.div `
|
|
3185
|
-
width: 80px;
|
|
3186
|
-
height: 80px;
|
|
3187
|
-
border-radius: 40px;
|
|
3188
|
-
background: ${props => (props.$dragging ? '#ffffff' : '#f5f5f5')};
|
|
3189
|
-
display: flex;
|
|
3190
|
-
align-items: center;
|
|
3191
|
-
justify-content: center;
|
|
3184
|
+
const IconWrapper$1 = styled.div `
|
|
3185
|
+
width: 80px;
|
|
3186
|
+
height: 80px;
|
|
3187
|
+
border-radius: 40px;
|
|
3188
|
+
background: ${props => (props.$dragging ? '#ffffff' : '#f5f5f5')};
|
|
3189
|
+
display: flex;
|
|
3190
|
+
align-items: center;
|
|
3191
|
+
justify-content: center;
|
|
3192
3192
|
`;
|
|
3193
|
-
const StyledIcon$1 = styled(Icon) `
|
|
3194
|
-
width: 40px !important;
|
|
3195
|
-
height: 40px !important;
|
|
3196
|
-
|
|
3197
|
-
> path {
|
|
3198
|
-
fill: ${Colors.GRAY.Hex} !important;
|
|
3199
|
-
}
|
|
3193
|
+
const StyledIcon$1 = styled(Icon) `
|
|
3194
|
+
width: 40px !important;
|
|
3195
|
+
height: 40px !important;
|
|
3196
|
+
|
|
3197
|
+
> path {
|
|
3198
|
+
fill: ${Colors.GRAY.Hex} !important;
|
|
3199
|
+
}
|
|
3200
3200
|
`;
|
|
3201
|
-
const ClickZone = styled.div `
|
|
3202
|
-
margin: 40px 20px;
|
|
3203
|
-
display: flex;
|
|
3204
|
-
flex-direction: column;
|
|
3205
|
-
align-items: center;
|
|
3206
|
-
gap: 16px;
|
|
3201
|
+
const ClickZone = styled.div `
|
|
3202
|
+
margin: 40px 20px;
|
|
3203
|
+
display: flex;
|
|
3204
|
+
flex-direction: column;
|
|
3205
|
+
align-items: center;
|
|
3206
|
+
gap: 16px;
|
|
3207
3207
|
`;
|
|
3208
|
-
const Content$1 = styled.div `
|
|
3209
|
-
display: flex;
|
|
3210
|
-
flex-direction: column;
|
|
3211
|
-
align-items: center;
|
|
3212
|
-
gap: 2px;
|
|
3208
|
+
const Content$1 = styled.div `
|
|
3209
|
+
display: flex;
|
|
3210
|
+
flex-direction: column;
|
|
3211
|
+
align-items: center;
|
|
3212
|
+
gap: 2px;
|
|
3213
3213
|
`;
|
|
3214
|
-
const Files = styled.div `
|
|
3215
|
-
display: flex;
|
|
3216
|
-
flex-direction: column;
|
|
3217
|
-
align-self: stretch;
|
|
3218
|
-
gap: 10px;
|
|
3219
|
-
margin: 20px;
|
|
3214
|
+
const Files = styled.div `
|
|
3215
|
+
display: flex;
|
|
3216
|
+
flex-direction: column;
|
|
3217
|
+
align-self: stretch;
|
|
3218
|
+
gap: 10px;
|
|
3219
|
+
margin: 20px;
|
|
3220
3220
|
`;
|
|
3221
|
-
const File = styled.div `
|
|
3222
|
-
display: flex;
|
|
3223
|
-
padding: 10px;
|
|
3224
|
-
align-items: center;
|
|
3225
|
-
justify-content: space-between;
|
|
3226
|
-
gap: 10px;
|
|
3227
|
-
border-radius: 4px;
|
|
3228
|
-
border: 1px solid #cccccc;
|
|
3229
|
-
background: #ffffff;
|
|
3221
|
+
const File = styled.div `
|
|
3222
|
+
display: flex;
|
|
3223
|
+
padding: 10px;
|
|
3224
|
+
align-items: center;
|
|
3225
|
+
justify-content: space-between;
|
|
3226
|
+
gap: 10px;
|
|
3227
|
+
border-radius: 4px;
|
|
3228
|
+
border: 1px solid #cccccc;
|
|
3229
|
+
background: #ffffff;
|
|
3230
3230
|
`;
|
|
3231
|
-
const Remove$1 = styled(Icon) `
|
|
3232
|
-
width: 24px;
|
|
3233
|
-
height: 24px;
|
|
3234
|
-
cursor: pointer;
|
|
3235
|
-
|
|
3236
|
-
> path {
|
|
3237
|
-
fill: ${Colors.RED.Hex} !important;
|
|
3238
|
-
}
|
|
3231
|
+
const Remove$1 = styled(Icon) `
|
|
3232
|
+
width: 24px;
|
|
3233
|
+
height: 24px;
|
|
3234
|
+
cursor: pointer;
|
|
3235
|
+
|
|
3236
|
+
> path {
|
|
3237
|
+
fill: ${Colors.RED.Hex} !important;
|
|
3238
|
+
}
|
|
3239
3239
|
`;
|
|
3240
3240
|
const FileUpload = ({ accept, onChange, onError, maxFiles = 10, maxSize = 2, message, validateFile, }) => {
|
|
3241
3241
|
const inputRef = React.useRef(null);
|
|
@@ -3777,30 +3777,30 @@ const MultiSelect = (_a) => {
|
|
|
3777
3777
|
showOptions ? React.createElement(Scrim, { onClick: setShowOptions.bind(null, !showOptions) }) : null));
|
|
3778
3778
|
};
|
|
3779
3779
|
|
|
3780
|
-
const Wrapper$5 = styled.div `
|
|
3781
|
-
display: flex;
|
|
3782
|
-
padding: 16px 30px;
|
|
3783
|
-
align-items: center;
|
|
3784
|
-
gap: 20px;
|
|
3785
|
-
align-self: stretch;
|
|
3786
|
-
border-bottom: 1px solid ${Colors.LIGHT_GRAY.Hex};
|
|
3780
|
+
const Wrapper$5 = styled.div `
|
|
3781
|
+
display: flex;
|
|
3782
|
+
padding: 16px 30px;
|
|
3783
|
+
align-items: center;
|
|
3784
|
+
gap: 20px;
|
|
3785
|
+
align-self: stretch;
|
|
3786
|
+
border-bottom: 1px solid ${Colors.LIGHT_GRAY.Hex};
|
|
3787
3787
|
`;
|
|
3788
|
-
const Info = styled.div `
|
|
3789
|
-
display: flex;
|
|
3790
|
-
flex-direction: column;
|
|
3791
|
-
align-items: flex-start;
|
|
3792
|
-
gap: 4px;
|
|
3793
|
-
flex: 1 0 0;
|
|
3788
|
+
const Info = styled.div `
|
|
3789
|
+
display: flex;
|
|
3790
|
+
flex-direction: column;
|
|
3791
|
+
align-items: flex-start;
|
|
3792
|
+
gap: 4px;
|
|
3793
|
+
flex: 1 0 0;
|
|
3794
3794
|
`;
|
|
3795
|
-
const Breadcrumbs = styled.div `
|
|
3796
|
-
display: flex;
|
|
3797
|
-
align-items: center;
|
|
3798
|
-
gap: 4px;
|
|
3795
|
+
const Breadcrumbs = styled.div `
|
|
3796
|
+
display: flex;
|
|
3797
|
+
align-items: center;
|
|
3798
|
+
gap: 4px;
|
|
3799
3799
|
`;
|
|
3800
|
-
const Actions = styled.div `
|
|
3801
|
-
display: flex;
|
|
3802
|
-
align-items: center;
|
|
3803
|
-
gap: 8px;
|
|
3800
|
+
const Actions = styled.div `
|
|
3801
|
+
display: flex;
|
|
3802
|
+
align-items: center;
|
|
3803
|
+
gap: 8px;
|
|
3804
3804
|
`;
|
|
3805
3805
|
const PageHeader = ({ title = '', breadcrumbs, actions, buttonMenu }) => {
|
|
3806
3806
|
const { menuItems = [], label = '', } = buttonMenu || {};
|