Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
@popmenu/admin-ui
Advanced tools
@popmenu/admin-ui - npm Package Compare versions
Comparing version 0.6.0 to 0.7.0-alpha.0
| import { Ref } from 'react'; | ||
| import { AlertProps as CommonAlertProps } from '@popmenu/common-ui'; | ||
| export interface AlertProps extends CommonAlertProps { | ||
| fullWidth?: boolean; | ||
| /** Adds a Link to the Alert. */ | ||
@@ -5,0 +6,0 @@ link?: { |
| import React from 'react'; | ||
| import { ButtonProps } from './ButtonProps'; | ||
| export declare const Button: React.ForwardRefExoticComponent<Pick<ButtonProps, "className" | "style" | "classes" | "innerRef" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "form" | "key" | "autoFocus" | "disabled" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "type" | "value" | "variant" | "disableElevation" | "fullWidth" | "startIcon" | "endIcon" | "disableFocusRipple" | "href" | "size" | "action" | "buttonRef" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "onFocusVisible" | "TouchRippleProps" | "textTransform"> & React.RefAttributes<HTMLButtonElement>>; | ||
| export declare const Button: React.ForwardRefExoticComponent<Pick<ButtonProps, "className" | "style" | "classes" | "innerRef" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "form" | "key" | "autoFocus" | "disabled" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "type" | "value" | "variant" | "disableElevation" | "fullWidth" | "startIcon" | "endIcon" | "disableFocusRipple" | "href" | "size" | "action" | "buttonRef" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "onFocusVisible" | "TouchRippleProps" | "loading" | "textTransform"> & React.RefAttributes<HTMLButtonElement>>; |
| import { ButtonProps as CommonButtonProps } from '@popmenu/common-ui'; | ||
| export interface ButtonProps extends Omit<CommonButtonProps, 'variant'> { | ||
| loading?: boolean; | ||
| /** Sets the text transformation property of a button. */ | ||
@@ -7,3 +8,3 @@ textTransform?: 'uppercase' | 'lowercase' | 'capitalize' | 'none'; | ||
| * pre-defined design system variants */ | ||
| variant?: 'primary' | 'secondary' | 'tertiary' | 'ghost-info' | 'ghost' | 'success' | 'info' | 'warning' | 'error' | 'outlined' | 'contained' | 'text'; | ||
| variant?: 'primary' | 'secondary' | 'tertiary' | 'ghost' | 'success' | 'info' | 'warning' | 'error' | 'outlined' | 'contained' | 'text'; | ||
| } |
| import { ButtonProps } from './ButtonProps'; | ||
| export declare const buttonTypography: { | ||
| fontWeight: number; | ||
| fontSize: string; | ||
| lineHeight: string; | ||
| }; | ||
| export declare const useButtonStyles: (props: ButtonProps) => import("@material-ui/styles").ClassNameMap<string>; |
@@ -7,3 +7,3 @@ import { ButtonGroupProps as CommonButtonGroupProps } from '@popmenu/common-ui'; | ||
| * pre-defined design system variants */ | ||
| variant?: 'primary' | 'secondary' | 'tertiary' | 'ghost-info' | 'ghost' | 'success' | 'info' | 'warning' | 'error' | 'outlined' | 'contained' | 'text'; | ||
| variant?: 'primary' | 'secondary' | 'tertiary' | 'text' | 'ghost' | 'success' | 'info' | 'warning' | 'error' | 'outlined' | 'contained'; | ||
| } |
| import React, { forwardRef, useState, useRef, useEffect, createContext, useContext } from 'react'; | ||
| import { Link, IconButton, Alert as Alert$1, Icon, Button as Button$1, Dialog, Card, CardContent, Box, CardActions, Typography, ButtonGroup as ButtonGroup$1, CardActionArea } from '@popmenu/common-ui'; | ||
| import { makeStyles, lighten } from '@material-ui/core/styles'; | ||
| import { CircularProgress, useTheme, Dialog as Dialog$1, Box as Box$1 } from '@material-ui/core'; | ||
| import MuiAlertTitle from '@material-ui/lab/AlertTitle'; | ||
| import { Dialog as Dialog$1, Box as Box$1 } from '@material-ui/core'; | ||
| import MuiSnackbar from '@material-ui/core/Snackbar'; | ||
@@ -97,2 +97,6 @@ import createTheme from '@material-ui/core/styles/createTheme'; | ||
| root: { | ||
| width: function (_a) { | ||
| var fullWidth = _a.fullWidth; | ||
| return (fullWidth ? '100%' : 'unset'); | ||
| }, | ||
| background: 'white', | ||
@@ -120,6 +124,12 @@ borderColor: function (props) { return theme.palette[props.severity || 'error'].main; }, | ||
| var color = 'inherit'; | ||
| if (['primary', 'secondary', 'info', 'success', 'warning', 'error'].includes(variant)) { | ||
| if (['primary', 'info', 'success', 'warning', 'error'].includes(variant)) { | ||
| color = palette[variant].contrastText; | ||
| } | ||
| if (variant === 'ghost-info') { | ||
| if (variant === 'secondary') { | ||
| color = palette[variant].main; | ||
| } | ||
| if (variant === 'tertiary') { | ||
| color = palette.secondary.contrastText; | ||
| } | ||
| if (variant === 'text') { | ||
| color = palette.info.main; | ||
@@ -129,7 +139,24 @@ } | ||
| }; | ||
| var getColorHover = function (palette, props) { | ||
| var color; | ||
| if (props.variant === 'secondary') { | ||
| color = palette.secondary.contrastText; | ||
| } | ||
| return color; | ||
| }; | ||
| var getBackground = function (palette, props) { | ||
| var backgroundColor = 'inherit'; | ||
| if (['primary', 'secondary', 'info', 'success', 'warning', 'error'].includes(props.variant)) { | ||
| if (['info', 'success', 'warning', 'error'].includes(props.variant)) { | ||
| backgroundColor = palette[props.variant].main; | ||
| } | ||
| if (props.variant === 'primary') { | ||
| // @ts-expect-error wtf | ||
| backgroundColor = "linear-gradient(97.36deg, " + palette.primary.gradientStart + " 17.03%, " + palette.primary.gradientEnd + " 72.96%)"; | ||
| } | ||
| if (props.variant === 'secondary') { | ||
| backgroundColor = 'transparent'; | ||
| } | ||
| if (props.variant === 'tertiary') { | ||
| backgroundColor = palette.secondary.main; | ||
| } | ||
| return backgroundColor; | ||
@@ -139,9 +166,23 @@ }; | ||
| var backgroundHoverColor = 'inherit'; | ||
| if (['primary', 'secondary', 'info', 'success', 'warning', 'error'].includes(props.variant)) { | ||
| if (['primary', 'info', 'success', 'warning', 'error'].includes(props.variant)) { | ||
| backgroundHoverColor = palette[props.variant].dark; | ||
| } | ||
| if (props.variant === 'secondary') { | ||
| backgroundHoverColor = palette.secondary.main; | ||
| } | ||
| if (props.variant === 'tertiary') { | ||
| backgroundHoverColor = palette.secondary.light; | ||
| } | ||
| if (props.variant === 'text' || props.variant === 'ghost') { | ||
| backgroundHoverColor = palette.action.hover; | ||
| } | ||
| return backgroundHoverColor; | ||
| }; | ||
| var buttonTypography = { | ||
| fontWeight: 400, | ||
| fontSize: '0.875rem', | ||
| lineHeight: '1.25rem', | ||
| }; | ||
| var useButtonStyles = makeStyles(function (_a) { | ||
| var palette = _a.palette, spacing = _a.spacing, typography = _a.typography; | ||
| var palette = _a.palette, spacing = _a.spacing; | ||
| return ({ | ||
@@ -151,6 +192,19 @@ root: function (props) { return ({ | ||
| background: getBackground(palette, props), | ||
| backgroundColor: props.variant === 'primary' ? palette.primary.dark : getBackground(palette, props), | ||
| borderRadius: spacing(6), | ||
| '&:hover': { | ||
| color: getColorHover(palette, props), | ||
| background: getBackgroundHover(palette, props), | ||
| }, | ||
| transition: 'all 200ms ease-in-out', | ||
| '&$disabled': { | ||
| background: palette.action.disabled, | ||
| backgroundImage: 'none', | ||
| }, | ||
| }); }, | ||
| disabled: { | ||
| '&&': { | ||
| backgroundImage: 'none', | ||
| }, | ||
| }, | ||
| contained: { | ||
@@ -171,3 +225,3 @@ padding: spacing(1, 2), | ||
| }, | ||
| label: __assign({ textTransform: function (props) { return props.textTransform; } }, typography.button), | ||
| label: __assign(__assign({}, buttonTypography), { textTransform: function (props) { return props.textTransform; } }), | ||
| sizeSmall: { | ||
@@ -191,12 +245,11 @@ padding: spacing(0.5, 2), | ||
| case 'secondary': | ||
| derived.variant = 'contained'; | ||
| derived.variant = 'outlined'; | ||
| derived.color = 'secondary'; | ||
| break; | ||
| case 'tertiary': | ||
| derived.variant = 'outlined'; | ||
| derived.variant = 'contained'; | ||
| derived.color = 'secondary'; | ||
| break; | ||
| case 'ghost-info': | ||
| case 'text': | ||
| derived.variant = 'text'; | ||
| break; | ||
| case 'ghost': | ||
@@ -225,7 +278,11 @@ derived.variant = 'text'; | ||
| var Button = forwardRef(function (props, ref) { | ||
| var children = props.children; props.variant; props.textTransform; var classesOverride = props.classes, muiProps = __rest(props, ["children", "variant", "textTransform", "classes"]); | ||
| var children = props.children; props.variant; var loading = props.loading; props.textTransform; var classesOverride = props.classes, muiProps = __rest(props, ["children", "variant", "loading", "textTransform", "classes"]); | ||
| var classes = useButtonStyles(props); | ||
| var loadingIndicator = { | ||
| startIcon: React.createElement(CircularProgress, { color: "inherit", size: buttonTypography.fontSize }), | ||
| disabled: true, | ||
| }; | ||
| var derivedProps = deriveButtonProps(props); | ||
| var mergedProps = __assign(__assign({}, derivedProps), muiProps); | ||
| return (React.createElement(Button$1, __assign({ ref: ref, classes: __assign(__assign({}, classes), classesOverride) }, mergedProps), children)); | ||
| return (React.createElement(Button$1, __assign({ ref: ref, classes: __assign(__assign({}, classes), classesOverride), disableElevation: true }, mergedProps, (loading && loadingIndicator)), children)); | ||
| }); | ||
@@ -305,2 +362,5 @@ Button.defaultProps = { | ||
| var useButtonGroupStyles = makeStyles(function (theme) { return ({ | ||
| root: { | ||
| boxShadow: 'none', | ||
| }, | ||
| groupedContained: { | ||
@@ -318,16 +378,18 @@ '&&': { | ||
| var ButtonGroup = forwardRef(function (props) { | ||
| var ButtonGroup = forwardRef(function (props, ref) { | ||
| var children = props.children, _a = props.variant, variant = _a === void 0 ? 'primary' : _a, muiProps = __rest(props, ["children", "variant"]); | ||
| var classes = useButtonGroupStyles(props); | ||
| var derivedProps = deriveButtonProps({ variant: variant }); | ||
| var childrenWithProps = React.Children.map(children, function (child) { | ||
| var spacing = useTheme().spacing; | ||
| var childrenWithProps = React.Children.map(children, function (child, i) { | ||
| var isFirst = i === 0 && props.orientation === 'vertical'; | ||
| var isLast = i === React.Children.toArray(children).length - 1 && props.orientation === 'vertical'; | ||
| var firstStyles = { style: { borderTopLeftRadius: spacing(2), borderTopRightRadius: spacing(2) } }; | ||
| var lastStyles = { style: { borderBottomLeftRadius: spacing(2), borderBottomRightRadius: spacing(2) } }; | ||
| if (!React.isValidElement(child)) { | ||
| return null; | ||
| } | ||
| return React.cloneElement(child, { variant: variant }); | ||
| return React.cloneElement(child, __assign(__assign({ variant: variant }, (isFirst && firstStyles)), (isLast && lastStyles))); | ||
| }); | ||
| return (React.createElement(ButtonGroup$1, __assign({ classes: { | ||
| groupedContained: classes.groupedContained, | ||
| groupedText: classes.groupedText, | ||
| } }, derivedProps, muiProps), childrenWithProps)); | ||
| return (React.createElement(ButtonGroup$1, __assign({ ref: ref, classes: classes }, derivedProps, muiProps), childrenWithProps)); | ||
| }); | ||
@@ -897,7 +959,2 @@ ButtonGroup.displayName = 'ButtonGroup'; | ||
| }, | ||
| button: { | ||
| fontWeight: 400, | ||
| fontSize: '0.875rem', | ||
| lineHeight: '1.25rem', | ||
| }, | ||
| }; | ||
@@ -904,0 +961,0 @@ |
@@ -8,4 +8,4 @@ 'use strict'; | ||
| var styles = require('@material-ui/core/styles'); | ||
| var core = require('@material-ui/core'); | ||
| var MuiAlertTitle = require('@material-ui/lab/AlertTitle'); | ||
| var core = require('@material-ui/core'); | ||
| var MuiSnackbar = require('@material-ui/core/Snackbar'); | ||
@@ -109,2 +109,6 @@ var createTheme = require('@material-ui/core/styles/createTheme'); | ||
| root: { | ||
| width: function (_a) { | ||
| var fullWidth = _a.fullWidth; | ||
| return (fullWidth ? '100%' : 'unset'); | ||
| }, | ||
| background: 'white', | ||
@@ -132,6 +136,12 @@ borderColor: function (props) { return theme.palette[props.severity || 'error'].main; }, | ||
| var color = 'inherit'; | ||
| if (['primary', 'secondary', 'info', 'success', 'warning', 'error'].includes(variant)) { | ||
| if (['primary', 'info', 'success', 'warning', 'error'].includes(variant)) { | ||
| color = palette[variant].contrastText; | ||
| } | ||
| if (variant === 'ghost-info') { | ||
| if (variant === 'secondary') { | ||
| color = palette[variant].main; | ||
| } | ||
| if (variant === 'tertiary') { | ||
| color = palette.secondary.contrastText; | ||
| } | ||
| if (variant === 'text') { | ||
| color = palette.info.main; | ||
@@ -141,7 +151,24 @@ } | ||
| }; | ||
| var getColorHover = function (palette, props) { | ||
| var color; | ||
| if (props.variant === 'secondary') { | ||
| color = palette.secondary.contrastText; | ||
| } | ||
| return color; | ||
| }; | ||
| var getBackground = function (palette, props) { | ||
| var backgroundColor = 'inherit'; | ||
| if (['primary', 'secondary', 'info', 'success', 'warning', 'error'].includes(props.variant)) { | ||
| if (['info', 'success', 'warning', 'error'].includes(props.variant)) { | ||
| backgroundColor = palette[props.variant].main; | ||
| } | ||
| if (props.variant === 'primary') { | ||
| // @ts-expect-error wtf | ||
| backgroundColor = "linear-gradient(97.36deg, " + palette.primary.gradientStart + " 17.03%, " + palette.primary.gradientEnd + " 72.96%)"; | ||
| } | ||
| if (props.variant === 'secondary') { | ||
| backgroundColor = 'transparent'; | ||
| } | ||
| if (props.variant === 'tertiary') { | ||
| backgroundColor = palette.secondary.main; | ||
| } | ||
| return backgroundColor; | ||
@@ -151,9 +178,23 @@ }; | ||
| var backgroundHoverColor = 'inherit'; | ||
| if (['primary', 'secondary', 'info', 'success', 'warning', 'error'].includes(props.variant)) { | ||
| if (['primary', 'info', 'success', 'warning', 'error'].includes(props.variant)) { | ||
| backgroundHoverColor = palette[props.variant].dark; | ||
| } | ||
| if (props.variant === 'secondary') { | ||
| backgroundHoverColor = palette.secondary.main; | ||
| } | ||
| if (props.variant === 'tertiary') { | ||
| backgroundHoverColor = palette.secondary.light; | ||
| } | ||
| if (props.variant === 'text' || props.variant === 'ghost') { | ||
| backgroundHoverColor = palette.action.hover; | ||
| } | ||
| return backgroundHoverColor; | ||
| }; | ||
| var buttonTypography = { | ||
| fontWeight: 400, | ||
| fontSize: '0.875rem', | ||
| lineHeight: '1.25rem', | ||
| }; | ||
| var useButtonStyles = styles.makeStyles(function (_a) { | ||
| var palette = _a.palette, spacing = _a.spacing, typography = _a.typography; | ||
| var palette = _a.palette, spacing = _a.spacing; | ||
| return ({ | ||
@@ -163,6 +204,19 @@ root: function (props) { return ({ | ||
| background: getBackground(palette, props), | ||
| backgroundColor: props.variant === 'primary' ? palette.primary.dark : getBackground(palette, props), | ||
| borderRadius: spacing(6), | ||
| '&:hover': { | ||
| color: getColorHover(palette, props), | ||
| background: getBackgroundHover(palette, props), | ||
| }, | ||
| transition: 'all 200ms ease-in-out', | ||
| '&$disabled': { | ||
| background: palette.action.disabled, | ||
| backgroundImage: 'none', | ||
| }, | ||
| }); }, | ||
| disabled: { | ||
| '&&': { | ||
| backgroundImage: 'none', | ||
| }, | ||
| }, | ||
| contained: { | ||
@@ -183,3 +237,3 @@ padding: spacing(1, 2), | ||
| }, | ||
| label: __assign({ textTransform: function (props) { return props.textTransform; } }, typography.button), | ||
| label: __assign(__assign({}, buttonTypography), { textTransform: function (props) { return props.textTransform; } }), | ||
| sizeSmall: { | ||
@@ -203,12 +257,11 @@ padding: spacing(0.5, 2), | ||
| case 'secondary': | ||
| derived.variant = 'contained'; | ||
| derived.variant = 'outlined'; | ||
| derived.color = 'secondary'; | ||
| break; | ||
| case 'tertiary': | ||
| derived.variant = 'outlined'; | ||
| derived.variant = 'contained'; | ||
| derived.color = 'secondary'; | ||
| break; | ||
| case 'ghost-info': | ||
| case 'text': | ||
| derived.variant = 'text'; | ||
| break; | ||
| case 'ghost': | ||
@@ -237,7 +290,11 @@ derived.variant = 'text'; | ||
| var Button = React.forwardRef(function (props, ref) { | ||
| var children = props.children; props.variant; props.textTransform; var classesOverride = props.classes, muiProps = __rest(props, ["children", "variant", "textTransform", "classes"]); | ||
| var children = props.children; props.variant; var loading = props.loading; props.textTransform; var classesOverride = props.classes, muiProps = __rest(props, ["children", "variant", "loading", "textTransform", "classes"]); | ||
| var classes = useButtonStyles(props); | ||
| var loadingIndicator = { | ||
| startIcon: React__default['default'].createElement(core.CircularProgress, { color: "inherit", size: buttonTypography.fontSize }), | ||
| disabled: true, | ||
| }; | ||
| var derivedProps = deriveButtonProps(props); | ||
| var mergedProps = __assign(__assign({}, derivedProps), muiProps); | ||
| return (React__default['default'].createElement(commonUi.Button, __assign({ ref: ref, classes: __assign(__assign({}, classes), classesOverride) }, mergedProps), children)); | ||
| return (React__default['default'].createElement(commonUi.Button, __assign({ ref: ref, classes: __assign(__assign({}, classes), classesOverride), disableElevation: true }, mergedProps, (loading && loadingIndicator)), children)); | ||
| }); | ||
@@ -317,2 +374,5 @@ Button.defaultProps = { | ||
| var useButtonGroupStyles = styles.makeStyles(function (theme) { return ({ | ||
| root: { | ||
| boxShadow: 'none', | ||
| }, | ||
| groupedContained: { | ||
@@ -330,16 +390,18 @@ '&&': { | ||
| var ButtonGroup = React.forwardRef(function (props) { | ||
| var ButtonGroup = React.forwardRef(function (props, ref) { | ||
| var children = props.children, _a = props.variant, variant = _a === void 0 ? 'primary' : _a, muiProps = __rest(props, ["children", "variant"]); | ||
| var classes = useButtonGroupStyles(props); | ||
| var derivedProps = deriveButtonProps({ variant: variant }); | ||
| var childrenWithProps = React__default['default'].Children.map(children, function (child) { | ||
| var spacing = core.useTheme().spacing; | ||
| var childrenWithProps = React__default['default'].Children.map(children, function (child, i) { | ||
| var isFirst = i === 0 && props.orientation === 'vertical'; | ||
| var isLast = i === React__default['default'].Children.toArray(children).length - 1 && props.orientation === 'vertical'; | ||
| var firstStyles = { style: { borderTopLeftRadius: spacing(2), borderTopRightRadius: spacing(2) } }; | ||
| var lastStyles = { style: { borderBottomLeftRadius: spacing(2), borderBottomRightRadius: spacing(2) } }; | ||
| if (!React__default['default'].isValidElement(child)) { | ||
| return null; | ||
| } | ||
| return React__default['default'].cloneElement(child, { variant: variant }); | ||
| return React__default['default'].cloneElement(child, __assign(__assign({ variant: variant }, (isFirst && firstStyles)), (isLast && lastStyles))); | ||
| }); | ||
| return (React__default['default'].createElement(commonUi.ButtonGroup, __assign({ classes: { | ||
| groupedContained: classes.groupedContained, | ||
| groupedText: classes.groupedText, | ||
| } }, derivedProps, muiProps), childrenWithProps)); | ||
| return (React__default['default'].createElement(commonUi.ButtonGroup, __assign({ ref: ref, classes: classes }, derivedProps, muiProps), childrenWithProps)); | ||
| }); | ||
@@ -909,7 +971,2 @@ ButtonGroup.displayName = 'ButtonGroup'; | ||
| }, | ||
| button: { | ||
| fontWeight: 400, | ||
| fontSize: '0.875rem', | ||
| lineHeight: '1.25rem', | ||
| }, | ||
| }; | ||
@@ -916,0 +973,0 @@ |
@@ -50,7 +50,2 @@ export declare const adminThemeTypography: { | ||
| }; | ||
| button: { | ||
| fontWeight: number; | ||
| fontSize: string; | ||
| lineHeight: string; | ||
| }; | ||
| }; |
| { | ||
| "name": "@popmenu/admin-ui", | ||
| "version": "0.6.0", | ||
| "version": "0.7.0-alpha.0", | ||
| "license": "MIT", | ||
@@ -18,2 +18,3 @@ "author": "Popmenu Design System Team", | ||
| "start": "watch 'yarn build' src", | ||
| "dev-publish": "watch 'yalc publish --push' src", | ||
| "build": "rollup -c", | ||
@@ -27,3 +28,2 @@ "build:clean": "yarn clean && yarn build", | ||
| "@material-ui/lab": "^4.0.0-alpha.60", | ||
| "@popmenu/common-ui": "^0.0.1", | ||
| "react": "^16.8.0", | ||
@@ -35,3 +35,3 @@ "react-dom": "^16.8.0" | ||
| }, | ||
| "gitHead": "cf394cc5e8cde250954d4e06ff021d434b87ef0d" | ||
| "gitHead": "da6e27c6f216f16e423c9b160998f0e4d891a1e1" | ||
| } |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by2.67%
194279
- Dependency count
- decreased by-20%
4
- Lines of code
- increased by4.07%
2993
No dependency changes