@veeqo/ui 12.5.0 → 12.5.1
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/components/Alerts/Alert/Alert.cjs +2 -2
- package/dist/components/Alerts/Alert/Alert.cjs.map +1 -1
- package/dist/components/Alerts/Alert/Alert.js +2 -2
- package/dist/components/Alerts/Alert/Alert.js.map +1 -1
- package/dist/components/Flex/FlexCol/FlexCol.d.ts +3 -3
- package/dist/components/Flex/FlexRow/FlexRow.d.ts +3 -3
- package/dist/components/Flex/types.d.ts +13 -4
- package/dist/components/Pagination/styled.d.ts +3 -3
- package/dist/components/ViewsContainer/ViewsContainer.cjs +4 -3
- package/dist/components/ViewsContainer/ViewsContainer.cjs.map +1 -1
- package/dist/components/ViewsContainer/ViewsContainer.js +4 -3
- package/dist/components/ViewsContainer/ViewsContainer.js.map +1 -1
- package/dist/components/ViewsContainer/ViewsContainer.module.scss.cjs +2 -2
- package/dist/components/ViewsContainer/ViewsContainer.module.scss.cjs.map +1 -1
- package/dist/components/ViewsContainer/ViewsContainer.module.scss.js +2 -2
- package/dist/components/ViewsContainer/ViewsContainer.module.scss.js.map +1 -1
- package/package.json +1 -1
|
@@ -26,8 +26,8 @@ const Alert = ({ size = 'base', variant = 'default', colours: passedColours, rig
|
|
|
26
26
|
Alerts_module[`${variant}-alert-variant`],
|
|
27
27
|
className,
|
|
28
28
|
]), flexWrap: "nowrap", ...divProps },
|
|
29
|
-
React__default.default.createElement(FlexRow.FlexRow, { alignItems: isXsSize ? 'center' : 'start', flexWrap: "nowrap", className: Alert_module.iconTextContainer },
|
|
30
|
-
React__default.default.createElement(FlexRow.FlexRow, { style: assignCssVars.assignCssVars({ iconColor: passedColours === null || passedColours === undefined ? undefined : passedColours.primary }), className: Alerts_module.icon, alignItems: "start" }, iconSlot || React__default.default.createElement(DefaultIcon, { role: "presentation" })),
|
|
29
|
+
React__default.default.createElement(FlexRow.FlexRow, { alignItems: isXsSize ? 'center' : 'flex-start', flexWrap: "nowrap", className: Alert_module.iconTextContainer },
|
|
30
|
+
React__default.default.createElement(FlexRow.FlexRow, { style: assignCssVars.assignCssVars({ iconColor: passedColours === null || passedColours === undefined ? undefined : passedColours.primary }), className: Alerts_module.icon, alignItems: "flex-start" }, iconSlot || React__default.default.createElement(DefaultIcon, { role: "presentation" })),
|
|
31
31
|
children || (React__default.default.createElement(FlexCol.FlexCol, { gap: isXsSize ? 'xs' : 'sm' },
|
|
32
32
|
titleSlot || (React__default.default.createElement(Text.Text, { variant: "bodyBold", style: size === 'base' ? { lineHeight: '24px' } : {} }, title)),
|
|
33
33
|
messageSlot || React__default.default.createElement(Text.Text, { variant: "body" }, message)))),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Alert.cjs","sources":["../../../../src/components/Alerts/Alert/Alert.tsx"],"sourcesContent":["import React from 'react';\n\nimport { Text } from '../../Text';\nimport { Button } from '../../Button';\nimport { CrossIcon } from '../../../icons';\nimport { IconMap } from '../constants';\nimport { AlertProps } from './types';\nimport { FlexRow } from '../../Flex/FlexRow';\nimport { FlexCol } from '../../Flex/FlexCol';\nimport { assignCssVars, buildClassnames } from '../../../utils';\n\nimport alertStyles from '../Alerts.module.scss';\nimport styles from './Alert.module.scss';\n\nexport const Alert = ({\n size = 'base',\n variant = 'default',\n colours: passedColours,\n rightActions,\n rightActionsSlot,\n title,\n titleSlot,\n messageSlot,\n message,\n children,\n iconSlot,\n onClickClose,\n className,\n ...divProps\n}: AlertProps) => {\n const DefaultIcon = IconMap[variant];\n\n const isXsSize = size === 'xs';\n\n return (\n <FlexRow\n justifyContent=\"space-between\"\n className={buildClassnames([\n styles.alertContainer,\n styles[`${size}-size`],\n alertStyles[`${variant}-alert-variant`],\n className,\n ])}\n flexWrap=\"nowrap\"\n {...divProps}\n >\n <FlexRow\n alignItems={isXsSize ? 'center' : 'start'}\n flexWrap=\"nowrap\"\n className={styles.iconTextContainer}\n >\n <FlexRow\n style={assignCssVars({ iconColor: passedColours?.primary })}\n className={alertStyles.icon}\n alignItems=\"start\"\n >\n {iconSlot || <DefaultIcon role=\"presentation\" />}\n </FlexRow>\n\n {children || (\n <FlexCol gap={isXsSize ? 'xs' : 'sm'}>\n {titleSlot || (\n <Text variant=\"bodyBold\" style={size === 'base' ? { lineHeight: '24px' } : {}}>\n {title}\n </Text>\n )}\n {messageSlot || <Text variant=\"body\">{message}</Text>}\n </FlexCol>\n )}\n </FlexRow>\n\n <FlexRow justifyContent=\"flex-end\" flexWrap=\"nowrap\" className={styles.rightActionsContainer}>\n {rightActionsSlot}\n\n {rightActions && (\n <FlexCol justifyContent=\"center\" className={styles.rightActions}>\n {rightActions.map(({ label, ...actionProps }) => (\n <Button key={label} type=\"button\" size=\"sm\" {...actionProps}>\n {label}\n </Button>\n ))}\n </FlexCol>\n )}\n\n {onClickClose && (\n <FlexCol className={styles.closeContainer}>\n <Button\n variant=\"flat\"\n iconSlot={<CrossIcon />}\n onClick={onClickClose}\n aria-label=\"Close\"\n size=\"sm\"\n />\n </FlexCol>\n )}\n </FlexRow>\n </FlexRow>\n );\n};\n"],"names":["IconMap","React","FlexRow","buildClassnames","styles","alertStyles","assignCssVars","FlexCol","Text","Button","CrossIcon"],"mappings":";;;;;;;;;;;;;;;;;;;AAca,MAAA,KAAK,GAAG,CAAC,EACpB,IAAI,GAAG,MAAM,EACb,OAAO,GAAG,SAAS,EACnB,OAAO,EAAE,aAAa,EACtB,YAAY,EACZ,gBAAgB,EAChB,KAAK,EACL,SAAS,EACT,WAAW,EACX,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,YAAY,EACZ,SAAS,EACT,GAAG,QAAQ,EACA,KAAI;AACf,IAAA,MAAM,WAAW,GAAGA,iBAAO,CAAC,OAAO,CAAC;AAEpC,IAAA,MAAM,QAAQ,GAAG,IAAI,KAAK,IAAI;IAE9B,QACEC,sBAAC,CAAA,aAAA,CAAAC,eAAO,EACN,EAAA,cAAc,EAAC,eAAe,EAC9B,SAAS,EAAEC,+BAAe,CAAC;AACzB,YAAAC,YAAM,CAAC,cAAc;AACrB,YAAAA,YAAM,CAAC,CAAA,EAAG,IAAI,CAAA,KAAA,CAAO,CAAC;AACtB,YAAAC,aAAW,CAAC,CAAA,EAAG,OAAO,CAAA,cAAA,CAAgB,CAAC;YACvC,SAAS;AACV,SAAA,CAAC,EACF,QAAQ,EAAC,QAAQ,KACb,QAAQ,EAAA;QAEZJ,sBAAC,CAAA,aAAA,CAAAC,eAAO,IACN,UAAU,EAAE,QAAQ,GAAG,QAAQ,GAAG,
|
|
1
|
+
{"version":3,"file":"Alert.cjs","sources":["../../../../src/components/Alerts/Alert/Alert.tsx"],"sourcesContent":["import React from 'react';\n\nimport { Text } from '../../Text';\nimport { Button } from '../../Button';\nimport { CrossIcon } from '../../../icons';\nimport { IconMap } from '../constants';\nimport { AlertProps } from './types';\nimport { FlexRow } from '../../Flex/FlexRow';\nimport { FlexCol } from '../../Flex/FlexCol';\nimport { assignCssVars, buildClassnames } from '../../../utils';\n\nimport alertStyles from '../Alerts.module.scss';\nimport styles from './Alert.module.scss';\n\nexport const Alert = ({\n size = 'base',\n variant = 'default',\n colours: passedColours,\n rightActions,\n rightActionsSlot,\n title,\n titleSlot,\n messageSlot,\n message,\n children,\n iconSlot,\n onClickClose,\n className,\n ...divProps\n}: AlertProps) => {\n const DefaultIcon = IconMap[variant];\n\n const isXsSize = size === 'xs';\n\n return (\n <FlexRow\n justifyContent=\"space-between\"\n className={buildClassnames([\n styles.alertContainer,\n styles[`${size}-size`],\n alertStyles[`${variant}-alert-variant`],\n className,\n ])}\n flexWrap=\"nowrap\"\n {...divProps}\n >\n <FlexRow\n alignItems={isXsSize ? 'center' : 'flex-start'}\n flexWrap=\"nowrap\"\n className={styles.iconTextContainer}\n >\n <FlexRow\n style={assignCssVars({ iconColor: passedColours?.primary })}\n className={alertStyles.icon}\n alignItems=\"flex-start\"\n >\n {iconSlot || <DefaultIcon role=\"presentation\" />}\n </FlexRow>\n\n {children || (\n <FlexCol gap={isXsSize ? 'xs' : 'sm'}>\n {titleSlot || (\n <Text variant=\"bodyBold\" style={size === 'base' ? { lineHeight: '24px' } : {}}>\n {title}\n </Text>\n )}\n {messageSlot || <Text variant=\"body\">{message}</Text>}\n </FlexCol>\n )}\n </FlexRow>\n\n <FlexRow justifyContent=\"flex-end\" flexWrap=\"nowrap\" className={styles.rightActionsContainer}>\n {rightActionsSlot}\n\n {rightActions && (\n <FlexCol justifyContent=\"center\" className={styles.rightActions}>\n {rightActions.map(({ label, ...actionProps }) => (\n <Button key={label} type=\"button\" size=\"sm\" {...actionProps}>\n {label}\n </Button>\n ))}\n </FlexCol>\n )}\n\n {onClickClose && (\n <FlexCol className={styles.closeContainer}>\n <Button\n variant=\"flat\"\n iconSlot={<CrossIcon />}\n onClick={onClickClose}\n aria-label=\"Close\"\n size=\"sm\"\n />\n </FlexCol>\n )}\n </FlexRow>\n </FlexRow>\n );\n};\n"],"names":["IconMap","React","FlexRow","buildClassnames","styles","alertStyles","assignCssVars","FlexCol","Text","Button","CrossIcon"],"mappings":"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"}
|
|
@@ -20,8 +20,8 @@ const Alert = ({ size = 'base', variant = 'default', colours: passedColours, rig
|
|
|
20
20
|
alertStyles[`${variant}-alert-variant`],
|
|
21
21
|
className,
|
|
22
22
|
]), flexWrap: "nowrap", ...divProps },
|
|
23
|
-
React__default.createElement(FlexRow, { alignItems: isXsSize ? 'center' : 'start', flexWrap: "nowrap", className: styles.iconTextContainer },
|
|
24
|
-
React__default.createElement(FlexRow, { style: assignCssVars({ iconColor: passedColours === null || passedColours === undefined ? undefined : passedColours.primary }), className: alertStyles.icon, alignItems: "start" }, iconSlot || React__default.createElement(DefaultIcon, { role: "presentation" })),
|
|
23
|
+
React__default.createElement(FlexRow, { alignItems: isXsSize ? 'center' : 'flex-start', flexWrap: "nowrap", className: styles.iconTextContainer },
|
|
24
|
+
React__default.createElement(FlexRow, { style: assignCssVars({ iconColor: passedColours === null || passedColours === undefined ? undefined : passedColours.primary }), className: alertStyles.icon, alignItems: "flex-start" }, iconSlot || React__default.createElement(DefaultIcon, { role: "presentation" })),
|
|
25
25
|
children || (React__default.createElement(FlexCol, { gap: isXsSize ? 'xs' : 'sm' },
|
|
26
26
|
titleSlot || (React__default.createElement(Text, { variant: "bodyBold", style: size === 'base' ? { lineHeight: '24px' } : {} }, title)),
|
|
27
27
|
messageSlot || React__default.createElement(Text, { variant: "body" }, message)))),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Alert.js","sources":["../../../../src/components/Alerts/Alert/Alert.tsx"],"sourcesContent":["import React from 'react';\n\nimport { Text } from '../../Text';\nimport { Button } from '../../Button';\nimport { CrossIcon } from '../../../icons';\nimport { IconMap } from '../constants';\nimport { AlertProps } from './types';\nimport { FlexRow } from '../../Flex/FlexRow';\nimport { FlexCol } from '../../Flex/FlexCol';\nimport { assignCssVars, buildClassnames } from '../../../utils';\n\nimport alertStyles from '../Alerts.module.scss';\nimport styles from './Alert.module.scss';\n\nexport const Alert = ({\n size = 'base',\n variant = 'default',\n colours: passedColours,\n rightActions,\n rightActionsSlot,\n title,\n titleSlot,\n messageSlot,\n message,\n children,\n iconSlot,\n onClickClose,\n className,\n ...divProps\n}: AlertProps) => {\n const DefaultIcon = IconMap[variant];\n\n const isXsSize = size === 'xs';\n\n return (\n <FlexRow\n justifyContent=\"space-between\"\n className={buildClassnames([\n styles.alertContainer,\n styles[`${size}-size`],\n alertStyles[`${variant}-alert-variant`],\n className,\n ])}\n flexWrap=\"nowrap\"\n {...divProps}\n >\n <FlexRow\n alignItems={isXsSize ? 'center' : 'start'}\n flexWrap=\"nowrap\"\n className={styles.iconTextContainer}\n >\n <FlexRow\n style={assignCssVars({ iconColor: passedColours?.primary })}\n className={alertStyles.icon}\n alignItems=\"start\"\n >\n {iconSlot || <DefaultIcon role=\"presentation\" />}\n </FlexRow>\n\n {children || (\n <FlexCol gap={isXsSize ? 'xs' : 'sm'}>\n {titleSlot || (\n <Text variant=\"bodyBold\" style={size === 'base' ? { lineHeight: '24px' } : {}}>\n {title}\n </Text>\n )}\n {messageSlot || <Text variant=\"body\">{message}</Text>}\n </FlexCol>\n )}\n </FlexRow>\n\n <FlexRow justifyContent=\"flex-end\" flexWrap=\"nowrap\" className={styles.rightActionsContainer}>\n {rightActionsSlot}\n\n {rightActions && (\n <FlexCol justifyContent=\"center\" className={styles.rightActions}>\n {rightActions.map(({ label, ...actionProps }) => (\n <Button key={label} type=\"button\" size=\"sm\" {...actionProps}>\n {label}\n </Button>\n ))}\n </FlexCol>\n )}\n\n {onClickClose && (\n <FlexCol className={styles.closeContainer}>\n <Button\n variant=\"flat\"\n iconSlot={<CrossIcon />}\n onClick={onClickClose}\n aria-label=\"Close\"\n size=\"sm\"\n />\n </FlexCol>\n )}\n </FlexRow>\n </FlexRow>\n );\n};\n"],"names":["React"],"mappings":";;;;;;;;;;;;;AAca,MAAA,KAAK,GAAG,CAAC,EACpB,IAAI,GAAG,MAAM,EACb,OAAO,GAAG,SAAS,EACnB,OAAO,EAAE,aAAa,EACtB,YAAY,EACZ,gBAAgB,EAChB,KAAK,EACL,SAAS,EACT,WAAW,EACX,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,YAAY,EACZ,SAAS,EACT,GAAG,QAAQ,EACA,KAAI;AACf,IAAA,MAAM,WAAW,GAAG,OAAO,CAAC,OAAO,CAAC;AAEpC,IAAA,MAAM,QAAQ,GAAG,IAAI,KAAK,IAAI;IAE9B,QACEA,cAAC,CAAA,aAAA,CAAA,OAAO,EACN,EAAA,cAAc,EAAC,eAAe,EAC9B,SAAS,EAAE,eAAe,CAAC;AACzB,YAAA,MAAM,CAAC,cAAc;AACrB,YAAA,MAAM,CAAC,CAAA,EAAG,IAAI,CAAA,KAAA,CAAO,CAAC;AACtB,YAAA,WAAW,CAAC,CAAA,EAAG,OAAO,CAAA,cAAA,CAAgB,CAAC;YACvC,SAAS;AACV,SAAA,CAAC,EACF,QAAQ,EAAC,QAAQ,KACb,QAAQ,EAAA;QAEZA,cAAC,CAAA,aAAA,CAAA,OAAO,IACN,UAAU,EAAE,QAAQ,GAAG,QAAQ,GAAG,
|
|
1
|
+
{"version":3,"file":"Alert.js","sources":["../../../../src/components/Alerts/Alert/Alert.tsx"],"sourcesContent":["import React from 'react';\n\nimport { Text } from '../../Text';\nimport { Button } from '../../Button';\nimport { CrossIcon } from '../../../icons';\nimport { IconMap } from '../constants';\nimport { AlertProps } from './types';\nimport { FlexRow } from '../../Flex/FlexRow';\nimport { FlexCol } from '../../Flex/FlexCol';\nimport { assignCssVars, buildClassnames } from '../../../utils';\n\nimport alertStyles from '../Alerts.module.scss';\nimport styles from './Alert.module.scss';\n\nexport const Alert = ({\n size = 'base',\n variant = 'default',\n colours: passedColours,\n rightActions,\n rightActionsSlot,\n title,\n titleSlot,\n messageSlot,\n message,\n children,\n iconSlot,\n onClickClose,\n className,\n ...divProps\n}: AlertProps) => {\n const DefaultIcon = IconMap[variant];\n\n const isXsSize = size === 'xs';\n\n return (\n <FlexRow\n justifyContent=\"space-between\"\n className={buildClassnames([\n styles.alertContainer,\n styles[`${size}-size`],\n alertStyles[`${variant}-alert-variant`],\n className,\n ])}\n flexWrap=\"nowrap\"\n {...divProps}\n >\n <FlexRow\n alignItems={isXsSize ? 'center' : 'flex-start'}\n flexWrap=\"nowrap\"\n className={styles.iconTextContainer}\n >\n <FlexRow\n style={assignCssVars({ iconColor: passedColours?.primary })}\n className={alertStyles.icon}\n alignItems=\"flex-start\"\n >\n {iconSlot || <DefaultIcon role=\"presentation\" />}\n </FlexRow>\n\n {children || (\n <FlexCol gap={isXsSize ? 'xs' : 'sm'}>\n {titleSlot || (\n <Text variant=\"bodyBold\" style={size === 'base' ? { lineHeight: '24px' } : {}}>\n {title}\n </Text>\n )}\n {messageSlot || <Text variant=\"body\">{message}</Text>}\n </FlexCol>\n )}\n </FlexRow>\n\n <FlexRow justifyContent=\"flex-end\" flexWrap=\"nowrap\" className={styles.rightActionsContainer}>\n {rightActionsSlot}\n\n {rightActions && (\n <FlexCol justifyContent=\"center\" className={styles.rightActions}>\n {rightActions.map(({ label, ...actionProps }) => (\n <Button key={label} type=\"button\" size=\"sm\" {...actionProps}>\n {label}\n </Button>\n ))}\n </FlexCol>\n )}\n\n {onClickClose && (\n <FlexCol className={styles.closeContainer}>\n <Button\n variant=\"flat\"\n iconSlot={<CrossIcon />}\n onClick={onClickClose}\n aria-label=\"Close\"\n size=\"sm\"\n />\n </FlexCol>\n )}\n </FlexRow>\n </FlexRow>\n );\n};\n"],"names":["React"],"mappings":"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"}
|
|
@@ -2,9 +2,9 @@ import React from 'react';
|
|
|
2
2
|
import { FlexDefaultProps } from '../types';
|
|
3
3
|
export declare const FLEX_COL_DEFAULT_PROPS: FlexDefaultProps;
|
|
4
4
|
export declare const FlexCol: React.ForwardRefExoticComponent<{
|
|
5
|
-
alignItems?:
|
|
6
|
-
justifyContent?:
|
|
5
|
+
alignItems?: ("baseline" | "center" | "stretch" | "flex-end" | "flex-start") | undefined;
|
|
6
|
+
justifyContent?: ("center" | "space-around" | "space-between" | "space-evenly" | "flex-end" | "flex-start") | undefined;
|
|
7
7
|
gap?: keyof import("../../../theme/modules/sizes").SizeScale | undefined;
|
|
8
|
-
flexWrap?:
|
|
8
|
+
flexWrap?: ("wrap" | "nowrap" | "wrap-reverse") | undefined;
|
|
9
9
|
flexGrow?: import("csstype").Property.FlexGrow | undefined;
|
|
10
10
|
} & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
|
|
@@ -2,9 +2,9 @@ import React from 'react';
|
|
|
2
2
|
import { FlexDefaultProps } from '../types';
|
|
3
3
|
export declare const FLEX_ROW_DEFAULT_PROPS: FlexDefaultProps;
|
|
4
4
|
export declare const FlexRow: React.ForwardRefExoticComponent<{
|
|
5
|
-
alignItems?:
|
|
6
|
-
justifyContent?:
|
|
5
|
+
alignItems?: ("baseline" | "center" | "stretch" | "flex-end" | "flex-start") | undefined;
|
|
6
|
+
justifyContent?: ("center" | "space-around" | "space-between" | "space-evenly" | "flex-end" | "flex-start") | undefined;
|
|
7
7
|
gap?: keyof import("../../../theme/modules/sizes").SizeScale | undefined;
|
|
8
|
-
flexWrap?:
|
|
8
|
+
flexWrap?: ("wrap" | "nowrap" | "wrap-reverse") | undefined;
|
|
9
9
|
flexGrow?: import("csstype").Property.FlexGrow | undefined;
|
|
10
10
|
} & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
|
|
@@ -1,11 +1,20 @@
|
|
|
1
1
|
import { CSSProperties, HTMLAttributes } from 'react';
|
|
2
2
|
declare const sizes: import("../../theme/modules/sizes").SizeScale;
|
|
3
|
+
type JustifyContentValues = 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly';
|
|
4
|
+
type AlignItemsValues = 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline';
|
|
5
|
+
type FlexWrapValues = 'nowrap' | 'wrap' | 'wrap-reverse';
|
|
3
6
|
export type FlexProps = {
|
|
4
|
-
alignItems?:
|
|
5
|
-
justifyContent?:
|
|
7
|
+
alignItems?: AlignItemsValues;
|
|
8
|
+
justifyContent?: JustifyContentValues;
|
|
6
9
|
gap?: keyof typeof sizes;
|
|
7
|
-
flexWrap?:
|
|
10
|
+
flexWrap?: FlexWrapValues;
|
|
8
11
|
flexGrow?: CSSProperties['flexGrow'];
|
|
9
12
|
} & HTMLAttributes<HTMLDivElement>;
|
|
10
|
-
export type FlexDefaultProps =
|
|
13
|
+
export type FlexDefaultProps = {
|
|
14
|
+
alignItems: AlignItemsValues;
|
|
15
|
+
justifyContent: JustifyContentValues;
|
|
16
|
+
gap: keyof typeof sizes;
|
|
17
|
+
flexWrap: FlexWrapValues;
|
|
18
|
+
flexGrow: CSSProperties['flexGrow'];
|
|
19
|
+
};
|
|
11
20
|
export {};
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
export declare const PageLimitContainer: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<{
|
|
3
|
-
alignItems?:
|
|
4
|
-
justifyContent?:
|
|
3
|
+
alignItems?: ("baseline" | "center" | "stretch" | "flex-end" | "flex-start") | undefined;
|
|
4
|
+
justifyContent?: ("center" | "space-around" | "space-between" | "space-evenly" | "flex-end" | "flex-start") | undefined;
|
|
5
5
|
gap?: keyof import("../../theme/modules/sizes").SizeScale | undefined;
|
|
6
|
-
flexWrap?:
|
|
6
|
+
flexWrap?: ("wrap" | "nowrap" | "wrap-reverse") | undefined;
|
|
7
7
|
flexGrow?: import("csstype").Property.FlexGrow | undefined;
|
|
8
8
|
} & import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
|
|
9
9
|
export declare const PaginationButton: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("react").ButtonHTMLAttributes<HTMLButtonElement> & {
|
|
@@ -28,7 +28,8 @@ const ViewsContainer = React__default.default.forwardRef(({ children, className,
|
|
|
28
28
|
isLoadingMoreViews,
|
|
29
29
|
});
|
|
30
30
|
const showCustomMenuButton = !onClickMenu && !!menuButtonSlot;
|
|
31
|
-
|
|
31
|
+
const shouldShowNavigationArrows = !leftDisabled || !rightDisabled;
|
|
32
|
+
return (React__default.default.createElement(FlexRow.FlexRow, { className: buildClassnames.buildClassnames([ViewsContainer_module[`appearance-${appearance}`], className]), justifyContent: "space-between", flexWrap: "nowrap", style: style },
|
|
32
33
|
React__default.default.createElement(FlexRow.FlexRow, { className: buildClassnames.buildClassnames([ViewsContainer_module.viewsWrapper, compact && ViewsContainer_module.compact]), ref: viewsRef, id: "views", role: "tablist", gap: "sm", flexWrap: "nowrap" },
|
|
33
34
|
children,
|
|
34
35
|
isLoadingMoreViews && (React__default.default.createElement(React__default.default.Fragment, null,
|
|
@@ -39,8 +40,8 @@ const ViewsContainer = React__default.default.forwardRef(({ children, className,
|
|
|
39
40
|
ViewsContainer_module.buttonGroup,
|
|
40
41
|
showCustomMenuButton && ViewsContainer_module.customMenuButton,
|
|
41
42
|
]) },
|
|
42
|
-
React__default.default.createElement("div", { className: form_module.inputGroup },
|
|
43
|
-
|
|
43
|
+
React__default.default.createElement("div", { className: shouldShowNavigationArrows ? form_module.inputGroup : undefined },
|
|
44
|
+
shouldShowNavigationArrows && (React__default.default.createElement(React__default.default.Fragment, null,
|
|
44
45
|
React__default.default.createElement(Button.Button, { id: "left-arrow", className: ViewsContainer_module.scrollButton, iconSlot: React__default.default.createElement(LeftArrowIcon.ReactComponent, { color: index.theme.colors.neutral.ink.base }), disabled: leftDisabled, onClick: toPrevScrollPosition, variant: "flat", "aria-label": "move views to the left" }),
|
|
45
46
|
React__default.default.createElement(Button.Button, { id: "right-arrow", className: ViewsContainer_module.scrollButton, iconSlot: React__default.default.createElement(RightArrowIcon.ReactComponent, { color: index.theme.colors.neutral.ink.base }), disabled: rightDisabled, onClick: toNextScrollPosition, variant: "flat", "aria-label": "move views to the right" }))),
|
|
46
47
|
!menuButtonSlot && !!onClickMenu && (React__default.default.createElement(Button.Button, { className: ViewsContainer_module.menuButton, iconSlot: React__default.default.createElement(ThreeDotsIcon.ThreeDotsIcon, { color: index.theme.colors.neutral.ink.base }), variant: "flat", onClick: onClickMenu, "aria-label": "open menu", "aria-controls": ariaMenuControls, "aria-expanded": ariaMenuExpanded, "aria-haspopup": ariaMenuControls ? 'dialog' : undefined, ref: menuRef }))),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ViewsContainer.cjs","sources":["../../../src/components/ViewsContainer/ViewsContainer.tsx"],"sourcesContent":["import React, { useRef, MutableRefObject, Ref, Fragment } from 'react';\n\nimport { theme } from 'Theme';\nimport { ViewContainerProps } from './types';\nimport { useSetScrollPosition } from './hooks/useSetScrollPosition';\nimport { FlexRow } from '../Flex/FlexRow';\nimport { Button } from '../Button';\nimport { Skeleton } from '../Skeleton';\nimport { LeftArrowIcon, RightArrowIcon, ThreeDotsIcon } from '../../icons';\nimport { buildClassnames } from '../../utils';\n\nimport styles from './ViewsContainer.module.scss';\nimport formStyles from '../../utils/forms/form.module.scss';\n\nexport const ViewsContainer = React.forwardRef<HTMLButtonElement, ViewContainerProps>(\n (\n {\n children,\n className,\n style,\n onClickMenu,\n ariaMenuControls,\n ariaMenuExpanded,\n hasMoreViews,\n onFetchMoreViews,\n isLoadingMoreViews,\n compact = false,\n appearance = 'primary',\n menuButtonSlot,\n }: ViewContainerProps,\n menuRef: Ref<HTMLButtonElement>,\n ) => {\n const viewsRef = useRef<HTMLDivElement>(null) as MutableRefObject<HTMLDivElement>;\n const { rightDisabled, leftDisabled, toNextScrollPosition, toPrevScrollPosition } =\n useSetScrollPosition({\n containerRef: viewsRef,\n children,\n hasMoreViews,\n onFetchMoreViews,\n isLoadingMoreViews,\n });\n\n const showCustomMenuButton = !onClickMenu && !!menuButtonSlot;\n\n return (\n <FlexRow\n className={buildClassnames([styles[`appearance-${appearance}`], className])}\n justifyContent=\"between\"\n flexWrap=\"nowrap\"\n style={style}\n >\n <FlexRow\n className={buildClassnames([styles.viewsWrapper, compact && styles.compact])}\n ref={viewsRef}\n id=\"views\"\n role=\"tablist\"\n gap=\"sm\"\n flexWrap=\"nowrap\"\n >\n {children}\n {isLoadingMoreViews && (\n <>\n <Skeleton width=\"80px\" height=\"40px\" />\n <Skeleton width=\"80px\" height=\"40px\" />\n <Skeleton width=\"80px\" height=\"40px\" />\n </>\n )}\n </FlexRow>\n\n <FlexRow\n flexWrap=\"nowrap\"\n className={buildClassnames([\n styles.buttonGroup,\n showCustomMenuButton && styles.customMenuButton,\n ])}\n >\n <div className={formStyles.inputGroup}>\n {
|
|
1
|
+
{"version":3,"file":"ViewsContainer.cjs","sources":["../../../src/components/ViewsContainer/ViewsContainer.tsx"],"sourcesContent":["import React, { useRef, MutableRefObject, Ref, Fragment } from 'react';\n\nimport { theme } from 'Theme';\nimport { ViewContainerProps } from './types';\nimport { useSetScrollPosition } from './hooks/useSetScrollPosition';\nimport { FlexRow } from '../Flex/FlexRow';\nimport { Button } from '../Button';\nimport { Skeleton } from '../Skeleton';\nimport { LeftArrowIcon, RightArrowIcon, ThreeDotsIcon } from '../../icons';\nimport { buildClassnames } from '../../utils';\n\nimport styles from './ViewsContainer.module.scss';\nimport formStyles from '../../utils/forms/form.module.scss';\n\nexport const ViewsContainer = React.forwardRef<HTMLButtonElement, ViewContainerProps>(\n (\n {\n children,\n className,\n style,\n onClickMenu,\n ariaMenuControls,\n ariaMenuExpanded,\n hasMoreViews,\n onFetchMoreViews,\n isLoadingMoreViews,\n compact = false,\n appearance = 'primary',\n menuButtonSlot,\n }: ViewContainerProps,\n menuRef: Ref<HTMLButtonElement>,\n ) => {\n const viewsRef = useRef<HTMLDivElement>(null) as MutableRefObject<HTMLDivElement>;\n const { rightDisabled, leftDisabled, toNextScrollPosition, toPrevScrollPosition } =\n useSetScrollPosition({\n containerRef: viewsRef,\n children,\n hasMoreViews,\n onFetchMoreViews,\n isLoadingMoreViews,\n });\n\n const showCustomMenuButton = !onClickMenu && !!menuButtonSlot;\n const shouldShowNavigationArrows = !leftDisabled || !rightDisabled;\n\n return (\n <FlexRow\n className={buildClassnames([styles[`appearance-${appearance}`], className])}\n justifyContent=\"space-between\"\n flexWrap=\"nowrap\"\n style={style}\n >\n <FlexRow\n className={buildClassnames([styles.viewsWrapper, compact && styles.compact])}\n ref={viewsRef}\n id=\"views\"\n role=\"tablist\"\n gap=\"sm\"\n flexWrap=\"nowrap\"\n >\n {children}\n {isLoadingMoreViews && (\n <>\n <Skeleton width=\"80px\" height=\"40px\" />\n <Skeleton width=\"80px\" height=\"40px\" />\n <Skeleton width=\"80px\" height=\"40px\" />\n </>\n )}\n </FlexRow>\n\n <FlexRow\n flexWrap=\"nowrap\"\n className={buildClassnames([\n styles.buttonGroup,\n showCustomMenuButton && styles.customMenuButton,\n ])}\n >\n <div className={shouldShowNavigationArrows ? formStyles.inputGroup : undefined}>\n {shouldShowNavigationArrows && (\n <>\n <Button\n id=\"left-arrow\"\n className={styles.scrollButton}\n iconSlot={<LeftArrowIcon color={theme.colors.neutral.ink.base} />}\n disabled={leftDisabled}\n onClick={toPrevScrollPosition}\n variant=\"flat\"\n aria-label=\"move views to the left\"\n />\n <Button\n id=\"right-arrow\"\n className={styles.scrollButton}\n iconSlot={<RightArrowIcon color={theme.colors.neutral.ink.base} />}\n disabled={rightDisabled}\n onClick={toNextScrollPosition}\n variant=\"flat\"\n aria-label=\"move views to the right\"\n />\n </>\n )}\n {!menuButtonSlot && !!onClickMenu && (\n <Button\n className={styles.menuButton}\n iconSlot={<ThreeDotsIcon color={theme.colors.neutral.ink.base} />}\n variant=\"flat\"\n onClick={onClickMenu}\n aria-label=\"open menu\"\n aria-controls={ariaMenuControls}\n aria-expanded={ariaMenuExpanded}\n aria-haspopup={ariaMenuControls ? 'dialog' : undefined}\n ref={menuRef}\n />\n )}\n </div>\n {menuButtonSlot}\n </FlexRow>\n </FlexRow>\n );\n },\n);\n"],"names":["React","useRef","useSetScrollPosition","FlexRow","buildClassnames","styles","Skeleton","formStyles","Button","LeftArrowIcon","theme","RightArrowIcon","ThreeDotsIcon"],"mappings":"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"}
|
|
@@ -22,7 +22,8 @@ const ViewsContainer = React__default.forwardRef(({ children, className, style,
|
|
|
22
22
|
isLoadingMoreViews,
|
|
23
23
|
});
|
|
24
24
|
const showCustomMenuButton = !onClickMenu && !!menuButtonSlot;
|
|
25
|
-
|
|
25
|
+
const shouldShowNavigationArrows = !leftDisabled || !rightDisabled;
|
|
26
|
+
return (React__default.createElement(FlexRow, { className: buildClassnames([styles[`appearance-${appearance}`], className]), justifyContent: "space-between", flexWrap: "nowrap", style: style },
|
|
26
27
|
React__default.createElement(FlexRow, { className: buildClassnames([styles.viewsWrapper, compact && styles.compact]), ref: viewsRef, id: "views", role: "tablist", gap: "sm", flexWrap: "nowrap" },
|
|
27
28
|
children,
|
|
28
29
|
isLoadingMoreViews && (React__default.createElement(React__default.Fragment, null,
|
|
@@ -33,8 +34,8 @@ const ViewsContainer = React__default.forwardRef(({ children, className, style,
|
|
|
33
34
|
styles.buttonGroup,
|
|
34
35
|
showCustomMenuButton && styles.customMenuButton,
|
|
35
36
|
]) },
|
|
36
|
-
React__default.createElement("div", { className: formStyles.inputGroup },
|
|
37
|
-
|
|
37
|
+
React__default.createElement("div", { className: shouldShowNavigationArrows ? formStyles.inputGroup : undefined },
|
|
38
|
+
shouldShowNavigationArrows && (React__default.createElement(React__default.Fragment, null,
|
|
38
39
|
React__default.createElement(Button, { id: "left-arrow", className: styles.scrollButton, iconSlot: React__default.createElement(LeftArrowIcon, { color: theme.colors.neutral.ink.base }), disabled: leftDisabled, onClick: toPrevScrollPosition, variant: "flat", "aria-label": "move views to the left" }),
|
|
39
40
|
React__default.createElement(Button, { id: "right-arrow", className: styles.scrollButton, iconSlot: React__default.createElement(RightArrowIcon, { color: theme.colors.neutral.ink.base }), disabled: rightDisabled, onClick: toNextScrollPosition, variant: "flat", "aria-label": "move views to the right" }))),
|
|
40
41
|
!menuButtonSlot && !!onClickMenu && (React__default.createElement(Button, { className: styles.menuButton, iconSlot: React__default.createElement(ThreeDotsIcon, { color: theme.colors.neutral.ink.base }), variant: "flat", onClick: onClickMenu, "aria-label": "open menu", "aria-controls": ariaMenuControls, "aria-expanded": ariaMenuExpanded, "aria-haspopup": ariaMenuControls ? 'dialog' : undefined, ref: menuRef }))),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ViewsContainer.js","sources":["../../../src/components/ViewsContainer/ViewsContainer.tsx"],"sourcesContent":["import React, { useRef, MutableRefObject, Ref, Fragment } from 'react';\n\nimport { theme } from 'Theme';\nimport { ViewContainerProps } from './types';\nimport { useSetScrollPosition } from './hooks/useSetScrollPosition';\nimport { FlexRow } from '../Flex/FlexRow';\nimport { Button } from '../Button';\nimport { Skeleton } from '../Skeleton';\nimport { LeftArrowIcon, RightArrowIcon, ThreeDotsIcon } from '../../icons';\nimport { buildClassnames } from '../../utils';\n\nimport styles from './ViewsContainer.module.scss';\nimport formStyles from '../../utils/forms/form.module.scss';\n\nexport const ViewsContainer = React.forwardRef<HTMLButtonElement, ViewContainerProps>(\n (\n {\n children,\n className,\n style,\n onClickMenu,\n ariaMenuControls,\n ariaMenuExpanded,\n hasMoreViews,\n onFetchMoreViews,\n isLoadingMoreViews,\n compact = false,\n appearance = 'primary',\n menuButtonSlot,\n }: ViewContainerProps,\n menuRef: Ref<HTMLButtonElement>,\n ) => {\n const viewsRef = useRef<HTMLDivElement>(null) as MutableRefObject<HTMLDivElement>;\n const { rightDisabled, leftDisabled, toNextScrollPosition, toPrevScrollPosition } =\n useSetScrollPosition({\n containerRef: viewsRef,\n children,\n hasMoreViews,\n onFetchMoreViews,\n isLoadingMoreViews,\n });\n\n const showCustomMenuButton = !onClickMenu && !!menuButtonSlot;\n\n return (\n <FlexRow\n className={buildClassnames([styles[`appearance-${appearance}`], className])}\n justifyContent=\"between\"\n flexWrap=\"nowrap\"\n style={style}\n >\n <FlexRow\n className={buildClassnames([styles.viewsWrapper, compact && styles.compact])}\n ref={viewsRef}\n id=\"views\"\n role=\"tablist\"\n gap=\"sm\"\n flexWrap=\"nowrap\"\n >\n {children}\n {isLoadingMoreViews && (\n <>\n <Skeleton width=\"80px\" height=\"40px\" />\n <Skeleton width=\"80px\" height=\"40px\" />\n <Skeleton width=\"80px\" height=\"40px\" />\n </>\n )}\n </FlexRow>\n\n <FlexRow\n flexWrap=\"nowrap\"\n className={buildClassnames([\n styles.buttonGroup,\n showCustomMenuButton && styles.customMenuButton,\n ])}\n >\n <div className={formStyles.inputGroup}>\n {
|
|
1
|
+
{"version":3,"file":"ViewsContainer.js","sources":["../../../src/components/ViewsContainer/ViewsContainer.tsx"],"sourcesContent":["import React, { useRef, MutableRefObject, Ref, Fragment } from 'react';\n\nimport { theme } from 'Theme';\nimport { ViewContainerProps } from './types';\nimport { useSetScrollPosition } from './hooks/useSetScrollPosition';\nimport { FlexRow } from '../Flex/FlexRow';\nimport { Button } from '../Button';\nimport { Skeleton } from '../Skeleton';\nimport { LeftArrowIcon, RightArrowIcon, ThreeDotsIcon } from '../../icons';\nimport { buildClassnames } from '../../utils';\n\nimport styles from './ViewsContainer.module.scss';\nimport formStyles from '../../utils/forms/form.module.scss';\n\nexport const ViewsContainer = React.forwardRef<HTMLButtonElement, ViewContainerProps>(\n (\n {\n children,\n className,\n style,\n onClickMenu,\n ariaMenuControls,\n ariaMenuExpanded,\n hasMoreViews,\n onFetchMoreViews,\n isLoadingMoreViews,\n compact = false,\n appearance = 'primary',\n menuButtonSlot,\n }: ViewContainerProps,\n menuRef: Ref<HTMLButtonElement>,\n ) => {\n const viewsRef = useRef<HTMLDivElement>(null) as MutableRefObject<HTMLDivElement>;\n const { rightDisabled, leftDisabled, toNextScrollPosition, toPrevScrollPosition } =\n useSetScrollPosition({\n containerRef: viewsRef,\n children,\n hasMoreViews,\n onFetchMoreViews,\n isLoadingMoreViews,\n });\n\n const showCustomMenuButton = !onClickMenu && !!menuButtonSlot;\n const shouldShowNavigationArrows = !leftDisabled || !rightDisabled;\n\n return (\n <FlexRow\n className={buildClassnames([styles[`appearance-${appearance}`], className])}\n justifyContent=\"space-between\"\n flexWrap=\"nowrap\"\n style={style}\n >\n <FlexRow\n className={buildClassnames([styles.viewsWrapper, compact && styles.compact])}\n ref={viewsRef}\n id=\"views\"\n role=\"tablist\"\n gap=\"sm\"\n flexWrap=\"nowrap\"\n >\n {children}\n {isLoadingMoreViews && (\n <>\n <Skeleton width=\"80px\" height=\"40px\" />\n <Skeleton width=\"80px\" height=\"40px\" />\n <Skeleton width=\"80px\" height=\"40px\" />\n </>\n )}\n </FlexRow>\n\n <FlexRow\n flexWrap=\"nowrap\"\n className={buildClassnames([\n styles.buttonGroup,\n showCustomMenuButton && styles.customMenuButton,\n ])}\n >\n <div className={shouldShowNavigationArrows ? formStyles.inputGroup : undefined}>\n {shouldShowNavigationArrows && (\n <>\n <Button\n id=\"left-arrow\"\n className={styles.scrollButton}\n iconSlot={<LeftArrowIcon color={theme.colors.neutral.ink.base} />}\n disabled={leftDisabled}\n onClick={toPrevScrollPosition}\n variant=\"flat\"\n aria-label=\"move views to the left\"\n />\n <Button\n id=\"right-arrow\"\n className={styles.scrollButton}\n iconSlot={<RightArrowIcon color={theme.colors.neutral.ink.base} />}\n disabled={rightDisabled}\n onClick={toNextScrollPosition}\n variant=\"flat\"\n aria-label=\"move views to the right\"\n />\n </>\n )}\n {!menuButtonSlot && !!onClickMenu && (\n <Button\n className={styles.menuButton}\n iconSlot={<ThreeDotsIcon color={theme.colors.neutral.ink.base} />}\n variant=\"flat\"\n onClick={onClickMenu}\n aria-label=\"open menu\"\n aria-controls={ariaMenuControls}\n aria-expanded={ariaMenuExpanded}\n aria-haspopup={ariaMenuControls ? 'dialog' : undefined}\n ref={menuRef}\n />\n )}\n </div>\n {menuButtonSlot}\n </FlexRow>\n </FlexRow>\n );\n },\n);\n"],"names":["React"],"mappings":"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"}
|
|
@@ -2,8 +2,8 @@
|
|
|
2
2
|
|
|
3
3
|
var ___$insertStyle = require('../../_virtual/____insertStyle.cjs');
|
|
4
4
|
|
|
5
|
-
___$insertStyle(".
|
|
6
|
-
var styles = {"viewsWrapper":"
|
|
5
|
+
___$insertStyle("._viewsWrapper_1ht5y_1 {\n overflow-x: scroll;\n -ms-overflow-style: none; /* for Internet Explorer, Edge */\n scrollbar-width: none; /* for Firefox */\n height: inherit;\n padding: var(--sizes-sm) 6px var(--sizes-sm) var(--sizes-3);\n margin-left: 0;\n}\n._viewsWrapper_1ht5y_1 ::-webkit-scrollbar {\n display: none; /* for Chrome, Safari, and Opera */\n}\n._viewsWrapper_1ht5y_1._compact_1ht5y_12 {\n padding: var(--sizes-xs);\n}\n\n._appearance-primary_1ht5y_16 {\n background-color: var(--colors-neutral-grey-lightest);\n}\n\n._menuButton_1ht5y_20 {\n background-color: white !important;\n border-radius: var(--sizes-sm);\n}\n._menuButton_1ht5y_20:hover {\n background-color: var(--colors-neutral-grey-lightest);\n}\n\n._scrollButton_1ht5y_28 {\n background-color: white !important;\n}\n._scrollButton_1ht5y_28:disabled {\n background-color: white !important;\n}\n._scrollButton_1ht5y_28:disabled svg {\n color: var(--colors-neutral-ink-lightest);\n}\n._scrollButton_1ht5y_28:hover {\n background-color: var(--colors-neutral-grey-lightest);\n}\n\n._buttonGroup_1ht5y_41 {\n padding-right: var(--sizes-sm);\n}");
|
|
6
|
+
var styles = {"viewsWrapper":"_viewsWrapper_1ht5y_1","compact":"_compact_1ht5y_12","appearance-primary":"_appearance-primary_1ht5y_16","menuButton":"_menuButton_1ht5y_20","scrollButton":"_scrollButton_1ht5y_28","buttonGroup":"_buttonGroup_1ht5y_41"};
|
|
7
7
|
|
|
8
8
|
module.exports = styles;
|
|
9
9
|
//# sourceMappingURL=ViewsContainer.module.scss.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ViewsContainer.module.scss.cjs","sources":["../../../src/components/ViewsContainer/ViewsContainer.module.scss"],"sourcesContent":[".viewsWrapper {\n overflow-x: scroll;\n -ms-overflow-style: none; /* for Internet Explorer, Edge */\n scrollbar-width: none; /* for Firefox */\n\n ::-webkit-scrollbar {\n display: none; /* for Chrome, Safari, and Opera */\n }\n\n height: inherit;\n padding: var(--sizes-sm) 6px var(--sizes-sm) var(--sizes-3);\n margin-left: 0;\n\n &.compact {\n padding: var(--sizes-xs);\n }\n}\n\n.appearance-primary {\n background-color: var(--colors-neutral-grey-lightest);\n}\n\n// using important to override styled-component styles on button\n.menuButton {\n background-color: white !important;\n\n &:hover {\n background-color: var(--colors-neutral-grey-lightest);\n }\n}\n\n// using important to override styled-component styles on button\n.scrollButton {\n background-color: white !important;\n\n &:disabled {\n background-color: white !important;\n & svg {\n color: var(--colors-neutral-ink-lightest);\n }\n }\n\n &:hover {\n background-color: var(--colors-neutral-grey-lightest);\n }\n}\n\n.buttonGroup {\n padding-right: var(--sizes-sm);\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,
|
|
1
|
+
{"version":3,"file":"ViewsContainer.module.scss.cjs","sources":["../../../src/components/ViewsContainer/ViewsContainer.module.scss"],"sourcesContent":[".viewsWrapper {\n overflow-x: scroll;\n -ms-overflow-style: none; /* for Internet Explorer, Edge */\n scrollbar-width: none; /* for Firefox */\n\n ::-webkit-scrollbar {\n display: none; /* for Chrome, Safari, and Opera */\n }\n\n height: inherit;\n padding: var(--sizes-sm) 6px var(--sizes-sm) var(--sizes-3);\n margin-left: 0;\n\n &.compact {\n padding: var(--sizes-xs);\n }\n}\n\n.appearance-primary {\n background-color: var(--colors-neutral-grey-lightest);\n}\n\n// using important to override styled-component styles on button\n.menuButton {\n background-color: white !important;\n border-radius: var(--sizes-sm);\n\n &:hover {\n background-color: var(--colors-neutral-grey-lightest);\n }\n}\n\n// using important to override styled-component styles on button\n.scrollButton {\n background-color: white !important;\n\n &:disabled {\n background-color: white !important;\n & svg {\n color: var(--colors-neutral-ink-lightest);\n }\n }\n\n &:hover {\n background-color: var(--colors-neutral-grey-lightest);\n }\n}\n\n.buttonGroup {\n padding-right: var(--sizes-sm);\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,2mCAAA;AACA,aAAA,CAAA,cAAA,CAAA,uBAAA,CAAA,SAAA,CAAA,mBAAA,CAAA,oBAAA,CAAA,8BAAA,CAAA,YAAA,CAAA,sBAAA,CAAA,cAAA,CAAA,wBAAA,CAAA,aAAA,CAAA,uBAAA;;;;"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import insertStyle from '../../_virtual/____insertStyle.js';
|
|
2
2
|
|
|
3
|
-
insertStyle(".
|
|
4
|
-
var styles = {"viewsWrapper":"
|
|
3
|
+
insertStyle("._viewsWrapper_1ht5y_1 {\n overflow-x: scroll;\n -ms-overflow-style: none; /* for Internet Explorer, Edge */\n scrollbar-width: none; /* for Firefox */\n height: inherit;\n padding: var(--sizes-sm) 6px var(--sizes-sm) var(--sizes-3);\n margin-left: 0;\n}\n._viewsWrapper_1ht5y_1 ::-webkit-scrollbar {\n display: none; /* for Chrome, Safari, and Opera */\n}\n._viewsWrapper_1ht5y_1._compact_1ht5y_12 {\n padding: var(--sizes-xs);\n}\n\n._appearance-primary_1ht5y_16 {\n background-color: var(--colors-neutral-grey-lightest);\n}\n\n._menuButton_1ht5y_20 {\n background-color: white !important;\n border-radius: var(--sizes-sm);\n}\n._menuButton_1ht5y_20:hover {\n background-color: var(--colors-neutral-grey-lightest);\n}\n\n._scrollButton_1ht5y_28 {\n background-color: white !important;\n}\n._scrollButton_1ht5y_28:disabled {\n background-color: white !important;\n}\n._scrollButton_1ht5y_28:disabled svg {\n color: var(--colors-neutral-ink-lightest);\n}\n._scrollButton_1ht5y_28:hover {\n background-color: var(--colors-neutral-grey-lightest);\n}\n\n._buttonGroup_1ht5y_41 {\n padding-right: var(--sizes-sm);\n}");
|
|
4
|
+
var styles = {"viewsWrapper":"_viewsWrapper_1ht5y_1","compact":"_compact_1ht5y_12","appearance-primary":"_appearance-primary_1ht5y_16","menuButton":"_menuButton_1ht5y_20","scrollButton":"_scrollButton_1ht5y_28","buttonGroup":"_buttonGroup_1ht5y_41"};
|
|
5
5
|
|
|
6
6
|
export { styles as default };
|
|
7
7
|
//# sourceMappingURL=ViewsContainer.module.scss.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ViewsContainer.module.scss.js","sources":["../../../src/components/ViewsContainer/ViewsContainer.module.scss"],"sourcesContent":[".viewsWrapper {\n overflow-x: scroll;\n -ms-overflow-style: none; /* for Internet Explorer, Edge */\n scrollbar-width: none; /* for Firefox */\n\n ::-webkit-scrollbar {\n display: none; /* for Chrome, Safari, and Opera */\n }\n\n height: inherit;\n padding: var(--sizes-sm) 6px var(--sizes-sm) var(--sizes-3);\n margin-left: 0;\n\n &.compact {\n padding: var(--sizes-xs);\n }\n}\n\n.appearance-primary {\n background-color: var(--colors-neutral-grey-lightest);\n}\n\n// using important to override styled-component styles on button\n.menuButton {\n background-color: white !important;\n\n &:hover {\n background-color: var(--colors-neutral-grey-lightest);\n }\n}\n\n// using important to override styled-component styles on button\n.scrollButton {\n background-color: white !important;\n\n &:disabled {\n background-color: white !important;\n & svg {\n color: var(--colors-neutral-ink-lightest);\n }\n }\n\n &:hover {\n background-color: var(--colors-neutral-grey-lightest);\n }\n}\n\n.buttonGroup {\n padding-right: var(--sizes-sm);\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,
|
|
1
|
+
{"version":3,"file":"ViewsContainer.module.scss.js","sources":["../../../src/components/ViewsContainer/ViewsContainer.module.scss"],"sourcesContent":[".viewsWrapper {\n overflow-x: scroll;\n -ms-overflow-style: none; /* for Internet Explorer, Edge */\n scrollbar-width: none; /* for Firefox */\n\n ::-webkit-scrollbar {\n display: none; /* for Chrome, Safari, and Opera */\n }\n\n height: inherit;\n padding: var(--sizes-sm) 6px var(--sizes-sm) var(--sizes-3);\n margin-left: 0;\n\n &.compact {\n padding: var(--sizes-xs);\n }\n}\n\n.appearance-primary {\n background-color: var(--colors-neutral-grey-lightest);\n}\n\n// using important to override styled-component styles on button\n.menuButton {\n background-color: white !important;\n border-radius: var(--sizes-sm);\n\n &:hover {\n background-color: var(--colors-neutral-grey-lightest);\n }\n}\n\n// using important to override styled-component styles on button\n.scrollButton {\n background-color: white !important;\n\n &:disabled {\n background-color: white !important;\n & svg {\n color: var(--colors-neutral-ink-lightest);\n }\n }\n\n &:hover {\n background-color: var(--colors-neutral-grey-lightest);\n }\n}\n\n.buttonGroup {\n padding-right: var(--sizes-sm);\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,2mCAAA;AACA,aAAA,CAAA,cAAA,CAAA,uBAAA,CAAA,SAAA,CAAA,mBAAA,CAAA,oBAAA,CAAA,8BAAA,CAAA,YAAA,CAAA,sBAAA,CAAA,cAAA,CAAA,wBAAA,CAAA,aAAA,CAAA,uBAAA;;;;"}
|