@veeqo/ui 15.9.0 → 15.11.0
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 +1 -2
- package/dist/components/Alerts/Alert/Alert.cjs.map +1 -1
- package/dist/components/Alerts/Alert/Alert.js +1 -2
- package/dist/components/Alerts/Alert/Alert.js.map +1 -1
- package/dist/components/Alerts/Alert/types.d.ts +5 -2
- package/dist/components/Checkbox/Checkbox.cjs.map +1 -1
- package/dist/components/Checkbox/Checkbox.d.ts +9 -0
- package/dist/components/Checkbox/Checkbox.js.map +1 -1
- package/dist/components/Checkbox/Checkbox.module.scss.cjs +2 -2
- package/dist/components/Checkbox/Checkbox.module.scss.cjs.map +1 -1
- package/dist/components/Checkbox/Checkbox.module.scss.js +2 -2
- package/dist/components/Checkbox/Checkbox.module.scss.js.map +1 -1
- package/dist/components/Modal/Modal.cjs +11 -11
- package/dist/components/Modal/Modal.cjs.map +1 -1
- package/dist/components/Modal/Modal.js +11 -11
- package/dist/components/Modal/Modal.js.map +1 -1
- package/dist/components/Modal/Modal.module.scss.cjs +2 -2
- package/dist/components/Modal/Modal.module.scss.cjs.map +1 -1
- package/dist/components/Modal/Modal.module.scss.js +2 -2
- package/dist/components/Modal/Modal.module.scss.js.map +1 -1
- package/dist/components/Modal/components/Dialog/Dialog.cjs +2 -2
- package/dist/components/Modal/components/Dialog/Dialog.cjs.map +1 -1
- package/dist/components/Modal/components/Dialog/Dialog.d.ts +2 -2
- package/dist/components/Modal/components/Dialog/Dialog.js +2 -2
- package/dist/components/Modal/components/Dialog/Dialog.js.map +1 -1
- package/dist/components/Modal/types.cjs.map +1 -1
- package/dist/components/Modal/types.d.ts +56 -7
- package/dist/components/Modal/types.js.map +1 -1
- package/dist/components/index.d.ts +1 -1
- package/package.json +1 -1
|
@@ -2,7 +2,6 @@
|
|
|
2
2
|
|
|
3
3
|
var React = require('react');
|
|
4
4
|
var Text = require('../../Text/Text.cjs');
|
|
5
|
-
var Button = require('../../Button/Button.cjs');
|
|
6
5
|
var Action = require('../../Action/Action.cjs');
|
|
7
6
|
var CrossIcon = require('../../../icons/design-system/components/CrossIcon.cjs');
|
|
8
7
|
var constants = require('../constants.cjs');
|
|
@@ -42,7 +41,7 @@ const Alert = ({ size = 'base', variant = 'default', direction = 'horizontal', c
|
|
|
42
41
|
messageSlot || (message && React__default.default.createElement(Text.Text, { variant: "body" }, message))))),
|
|
43
42
|
hasActions && (React__default.default.createElement(FlexRow.FlexRow, { flexWrap: "nowrap", gap: "sm", className: Alert_module.actions },
|
|
44
43
|
rightActionsSlot, rightActions === null || rightActions === void 0 ? void 0 :
|
|
45
|
-
rightActions.map(({ label, ...actionProps }) => (React__default.default.createElement(
|
|
44
|
+
rightActions.map(({ label, ...actionProps }) => (React__default.default.createElement(Action.Action, { key: label, type: "button", size: "sm", ...actionProps }, label))))),
|
|
46
45
|
onClickClose && (React__default.default.createElement(Action.Action, { variant: "flat", size: "sm", iconSlot: React__default.default.createElement(CrossIcon.ReactComponent, null), onClick: onClickClose, "aria-label": "Close", className: Alert_module.close }))));
|
|
47
46
|
};
|
|
48
47
|
|
|
@@ -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 {
|
|
1
|
+
{"version":3,"file":"Alert.cjs","sources":["../../../../src/components/Alerts/Alert/Alert.tsx"],"sourcesContent":["import React from 'react';\n\nimport { Text } from '../../Text';\nimport { Action } from '../../Action';\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\n/**\n * Alert component for displaying contextual feedback messages with optional actions and close button.\n */\nexport const Alert = ({\n size = 'base',\n variant = 'default',\n direction = 'horizontal',\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 const isVertical = direction === 'vertical';\n const hasActions = (rightActions?.length ?? 0) > 0 || Boolean(rightActionsSlot);\n const hasSingleContent = !children && !((title || titleSlot) && (message || messageSlot));\n\n return (\n <FlexCol\n role={variant === 'error' ? 'alert' : 'status'}\n gap=\"none\"\n className={buildClassnames([\n styles.alertContainer,\n styles[`${size}-size`],\n isVertical ? styles.vertical : undefined,\n hasSingleContent ? styles.centered : undefined,\n alertStyles[`${variant}-alert-variant`],\n className,\n ])}\n style={assignCssVars({ backgroundColor: passedColours?.background })}\n {...divProps}\n >\n <FlexRow\n style={assignCssVars({ iconColor: passedColours?.primary })}\n className={buildClassnames([alertStyles.icon, styles.iconArea])}\n >\n {iconSlot || <DefaultIcon role=\"presentation\" />}\n </FlexRow>\n\n <FlexCol className={styles.content} flexWrap=\"nowrap\">\n {children || (\n <FlexCol gap={size === 'xs' ? 'xs' : 'sm'}>\n {titleSlot ||\n (title && (\n <Text variant=\"bodyBold\" style={size === 'base' ? { lineHeight: '24px' } : {}}>\n {title}\n </Text>\n ))}\n {messageSlot || (message && <Text variant=\"body\">{message}</Text>)}\n </FlexCol>\n )}\n </FlexCol>\n\n {hasActions && (\n <FlexRow flexWrap=\"nowrap\" gap=\"sm\" className={styles.actions}>\n {rightActionsSlot}\n {rightActions?.map(({ label, ...actionProps }) => (\n <Action key={label} type=\"button\" size=\"sm\" {...actionProps}>\n {label}\n </Action>\n ))}\n </FlexRow>\n )}\n\n {onClickClose && (\n <Action\n variant=\"flat\"\n size=\"sm\"\n iconSlot={<CrossIcon />}\n onClick={onClickClose}\n aria-label=\"Close\"\n className={styles.close}\n />\n )}\n </FlexCol>\n );\n};\n"],"names":["IconMap","React","FlexCol","buildClassnames","styles","alertStyles","assignCssVars","FlexRow","Text","Action","CrossIcon"],"mappings":"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"}
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import React__default from 'react';
|
|
2
2
|
import { Text } from '../../Text/Text.js';
|
|
3
|
-
import { Button } from '../../Button/Button.js';
|
|
4
3
|
import { Action } from '../../Action/Action.js';
|
|
5
4
|
import { ReactComponent as CrossIcon } from '../../../icons/design-system/components/CrossIcon.js';
|
|
6
5
|
import { IconMap } from '../constants.js';
|
|
@@ -36,7 +35,7 @@ const Alert = ({ size = 'base', variant = 'default', direction = 'horizontal', c
|
|
|
36
35
|
messageSlot || (message && React__default.createElement(Text, { variant: "body" }, message))))),
|
|
37
36
|
hasActions && (React__default.createElement(FlexRow, { flexWrap: "nowrap", gap: "sm", className: styles.actions },
|
|
38
37
|
rightActionsSlot, rightActions === null || rightActions === void 0 ? void 0 :
|
|
39
|
-
rightActions.map(({ label, ...actionProps }) => (React__default.createElement(
|
|
38
|
+
rightActions.map(({ label, ...actionProps }) => (React__default.createElement(Action, { key: label, type: "button", size: "sm", ...actionProps }, label))))),
|
|
40
39
|
onClickClose && (React__default.createElement(Action, { variant: "flat", size: "sm", iconSlot: React__default.createElement(CrossIcon, null), onClick: onClickClose, "aria-label": "Close", className: styles.close }))));
|
|
41
40
|
};
|
|
42
41
|
|
|
@@ -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 {
|
|
1
|
+
{"version":3,"file":"Alert.js","sources":["../../../../src/components/Alerts/Alert/Alert.tsx"],"sourcesContent":["import React from 'react';\n\nimport { Text } from '../../Text';\nimport { Action } from '../../Action';\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\n/**\n * Alert component for displaying contextual feedback messages with optional actions and close button.\n */\nexport const Alert = ({\n size = 'base',\n variant = 'default',\n direction = 'horizontal',\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 const isVertical = direction === 'vertical';\n const hasActions = (rightActions?.length ?? 0) > 0 || Boolean(rightActionsSlot);\n const hasSingleContent = !children && !((title || titleSlot) && (message || messageSlot));\n\n return (\n <FlexCol\n role={variant === 'error' ? 'alert' : 'status'}\n gap=\"none\"\n className={buildClassnames([\n styles.alertContainer,\n styles[`${size}-size`],\n isVertical ? styles.vertical : undefined,\n hasSingleContent ? styles.centered : undefined,\n alertStyles[`${variant}-alert-variant`],\n className,\n ])}\n style={assignCssVars({ backgroundColor: passedColours?.background })}\n {...divProps}\n >\n <FlexRow\n style={assignCssVars({ iconColor: passedColours?.primary })}\n className={buildClassnames([alertStyles.icon, styles.iconArea])}\n >\n {iconSlot || <DefaultIcon role=\"presentation\" />}\n </FlexRow>\n\n <FlexCol className={styles.content} flexWrap=\"nowrap\">\n {children || (\n <FlexCol gap={size === 'xs' ? 'xs' : 'sm'}>\n {titleSlot ||\n (title && (\n <Text variant=\"bodyBold\" style={size === 'base' ? { lineHeight: '24px' } : {}}>\n {title}\n </Text>\n ))}\n {messageSlot || (message && <Text variant=\"body\">{message}</Text>)}\n </FlexCol>\n )}\n </FlexCol>\n\n {hasActions && (\n <FlexRow flexWrap=\"nowrap\" gap=\"sm\" className={styles.actions}>\n {rightActionsSlot}\n {rightActions?.map(({ label, ...actionProps }) => (\n <Action key={label} type=\"button\" size=\"sm\" {...actionProps}>\n {label}\n </Action>\n ))}\n </FlexRow>\n )}\n\n {onClickClose && (\n <Action\n variant=\"flat\"\n size=\"sm\"\n iconSlot={<CrossIcon />}\n onClick={onClickClose}\n aria-label=\"Close\"\n className={styles.close}\n />\n )}\n </FlexCol>\n );\n};\n"],"names":["React"],"mappings":"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"}
|
|
@@ -1,10 +1,13 @@
|
|
|
1
1
|
import { ReactNode } from 'react';
|
|
2
|
-
import {
|
|
2
|
+
import { ActionProps } from '../../Action/types';
|
|
3
3
|
import { AlertColours, BaseAlertProps } from '../types';
|
|
4
4
|
/** Controls the padding density of the alert */
|
|
5
5
|
export type AlertSizes = 'base' | 'sm' | 'xs';
|
|
6
6
|
/** Direction of content flow */
|
|
7
7
|
export type AlertDirection = 'horizontal' | 'vertical';
|
|
8
|
+
export type AlertAction = {
|
|
9
|
+
label: string;
|
|
10
|
+
} & ActionProps<'button'>;
|
|
8
11
|
export type AlertProps = React.HTMLAttributes<HTMLDivElement> & BaseAlertProps & {
|
|
9
12
|
/** Controls padding density */
|
|
10
13
|
size?: AlertSizes;
|
|
@@ -13,7 +16,7 @@ export type AlertProps = React.HTMLAttributes<HTMLDivElement> & BaseAlertProps &
|
|
|
13
16
|
/** Override the primary and background colours */
|
|
14
17
|
colours?: AlertColours;
|
|
15
18
|
/** Action buttons rendered on the right (horizontal) or below the content (vertical) */
|
|
16
|
-
rightActions?:
|
|
19
|
+
rightActions?: AlertAction[];
|
|
17
20
|
/** Custom content rendered in the actions area, replacing or alongside `rightActions` */
|
|
18
21
|
rightActionsSlot?: ReactNode;
|
|
19
22
|
/** Replaces the default title text with custom content */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Checkbox.cjs","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useRef, useMemo } from 'react';\nimport { Choice, ForwardedChoiceProps } from '../Choice';\nimport { generateId } from '../../utils/generateId';\n\nimport styles from './Checkbox.module.scss';\n\nexport type CheckboxValue = string | number;\n\nexport interface CheckboxProps extends ForwardedChoiceProps {\n id?: string;\n checked: boolean;\n indeterminate?: boolean;\n value?: CheckboxValue;\n name?: string;\n disabled?: boolean;\n ariaLabel?: string;\n onChange: (checked: boolean, value?: CheckboxValue, meta?: { shiftKey?: boolean }) => void;\n className?: string;\n}\n\nexport const Checkbox = ({\n id,\n checked,\n indeterminate,\n value,\n name,\n hint,\n disabled,\n ariaLabel,\n className,\n onChange,\n ...otherProps\n}: CheckboxProps) => {\n const componentId = useMemo(() => id ?? generateId('checkbox'), [id]);\n const checkboxRef = useRef<HTMLInputElement>(null);\n\n const handleChange = useCallback(\n (e: React.ChangeEvent<HTMLInputElement>) => {\n onChange(e.currentTarget.checked, value);\n },\n [onChange, value],\n );\n\n useEffect(() => {\n if (!checkboxRef.current) return;\n if (indeterminate === true) {\n checkboxRef.current.indeterminate = true;\n return;\n }\n checkboxRef.current.indeterminate = false;\n }, [indeterminate]);\n\n const ariaDescribedBy = hint ? `hint-${componentId}` : undefined;\n\n return (\n <Choice\n htmlFor={componentId}\n disabled={disabled}\n className={className}\n hint={hint}\n {...otherProps}\n >\n <input\n ref={checkboxRef}\n id={componentId}\n type=\"checkbox\"\n checked={checked}\n value={value}\n name={name}\n disabled={disabled}\n aria-label={ariaLabel}\n aria-describedby={ariaDescribedBy}\n onChange={handleChange}\n className={styles.input}\n />\n </Choice>\n );\n};\n"],"names":["useMemo","generateId","useRef","useCallback","useEffect","React","Choice","styles"],"mappings":";;;;;;;;;;;
|
|
1
|
+
{"version":3,"file":"Checkbox.cjs","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useRef, useMemo } from 'react';\nimport { Choice, ForwardedChoiceProps } from '../Choice';\nimport { generateId } from '../../utils/generateId';\n\nimport styles from './Checkbox.module.scss';\n\nexport type CheckboxValue = string | number;\n\nexport interface CheckboxProps extends ForwardedChoiceProps {\n /** Unique identifier for the checkbox input */\n id?: string;\n /** Whether the checkbox is selected */\n checked: boolean;\n /** Whether the checkbox is in an indeterminate (partial) state */\n indeterminate?: boolean;\n /** The value associated with this checkbox option */\n value?: CheckboxValue;\n /** Name attribute for form submission */\n name?: string;\n /** Whether the checkbox is disabled and non-interactive */\n disabled?: boolean;\n /** Accessible label for screen readers */\n ariaLabel?: string;\n /** Callback fired when the checkbox selection changes */\n onChange: (checked: boolean, value?: CheckboxValue, meta?: { shiftKey?: boolean }) => void;\n /** Additional CSS class name */\n className?: string;\n}\n\nexport const Checkbox = ({\n id,\n checked,\n indeterminate,\n value,\n name,\n hint,\n disabled,\n ariaLabel,\n className,\n onChange,\n ...otherProps\n}: CheckboxProps) => {\n const componentId = useMemo(() => id ?? generateId('checkbox'), [id]);\n const checkboxRef = useRef<HTMLInputElement>(null);\n\n const handleChange = useCallback(\n (e: React.ChangeEvent<HTMLInputElement>) => {\n onChange(e.currentTarget.checked, value);\n },\n [onChange, value],\n );\n\n useEffect(() => {\n if (!checkboxRef.current) return;\n if (indeterminate === true) {\n checkboxRef.current.indeterminate = true;\n return;\n }\n checkboxRef.current.indeterminate = false;\n }, [indeterminate]);\n\n const ariaDescribedBy = hint ? `hint-${componentId}` : undefined;\n\n return (\n <Choice\n htmlFor={componentId}\n disabled={disabled}\n className={className}\n hint={hint}\n {...otherProps}\n >\n <input\n ref={checkboxRef}\n id={componentId}\n type=\"checkbox\"\n checked={checked}\n value={value}\n name={name}\n disabled={disabled}\n aria-label={ariaLabel}\n aria-describedby={ariaDescribedBy}\n onChange={handleChange}\n className={styles.input}\n />\n </Choice>\n );\n};\n"],"names":["useMemo","generateId","useRef","useCallback","useEffect","React","Choice","styles"],"mappings":";;;;;;;;;;;AA6BO,MAAM,QAAQ,GAAG,CAAC,EACvB,EAAE,EACF,OAAO,EACP,aAAa,EACb,KAAK,EACL,IAAI,EACJ,IAAI,EACJ,QAAQ,EACR,SAAS,EACT,SAAS,EACT,QAAQ,EACR,GAAG,UAAU,EACC,KAAI;IAClB,MAAM,WAAW,GAAGA,aAAO,CAAC,MAAM,EAAE,KAAA,IAAA,IAAF,EAAE,KAAA,MAAA,GAAF,EAAE,GAAIC,qBAAU,CAAC,UAAU,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC;AACrE,IAAA,MAAM,WAAW,GAAGC,YAAM,CAAmB,IAAI,CAAC;AAElD,IAAA,MAAM,YAAY,GAAGC,iBAAW,CAC9B,CAAC,CAAsC,KAAI;QACzC,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,OAAO,EAAE,KAAK,CAAC;AAC1C,IAAA,CAAC,EACD,CAAC,QAAQ,EAAE,KAAK,CAAC,CAClB;IAEDC,eAAS,CAAC,MAAK;QACb,IAAI,CAAC,WAAW,CAAC,OAAO;YAAE;QAC1B,IAAI,aAAa,KAAK,IAAI,EAAE;AAC1B,YAAA,WAAW,CAAC,OAAO,CAAC,aAAa,GAAG,IAAI;YACxC;AACD,QAAA;AACD,QAAA,WAAW,CAAC,OAAO,CAAC,aAAa,GAAG,KAAK;AAC3C,IAAA,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC;AAEnB,IAAA,MAAM,eAAe,GAAG,IAAI,GAAG,CAAA,KAAA,EAAQ,WAAW,CAAA,CAAE,GAAG,SAAS;IAEhE,QACEC,qCAACC,aAAM,EAAA,EACL,OAAO,EAAE,WAAW,EACpB,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,SAAS,EACpB,IAAI,EAAE,IAAI,KACN,UAAU,EAAA;QAEdD,sBAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EACE,GAAG,EAAE,WAAW,EAChB,EAAE,EAAE,WAAW,EACf,IAAI,EAAC,UAAU,EACf,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAAA,YAAA,EACN,SAAS,EAAA,kBAAA,EACH,eAAe,EACjC,QAAQ,EAAE,YAAY,EACtB,SAAS,EAAEE,eAAM,CAAC,KAAK,EAAA,CACvB,CACK;AAEb;;;;"}
|
|
@@ -2,16 +2,25 @@ import React from 'react';
|
|
|
2
2
|
import { ForwardedChoiceProps } from '../Choice';
|
|
3
3
|
export type CheckboxValue = string | number;
|
|
4
4
|
export interface CheckboxProps extends ForwardedChoiceProps {
|
|
5
|
+
/** Unique identifier for the checkbox input */
|
|
5
6
|
id?: string;
|
|
7
|
+
/** Whether the checkbox is selected */
|
|
6
8
|
checked: boolean;
|
|
9
|
+
/** Whether the checkbox is in an indeterminate (partial) state */
|
|
7
10
|
indeterminate?: boolean;
|
|
11
|
+
/** The value associated with this checkbox option */
|
|
8
12
|
value?: CheckboxValue;
|
|
13
|
+
/** Name attribute for form submission */
|
|
9
14
|
name?: string;
|
|
15
|
+
/** Whether the checkbox is disabled and non-interactive */
|
|
10
16
|
disabled?: boolean;
|
|
17
|
+
/** Accessible label for screen readers */
|
|
11
18
|
ariaLabel?: string;
|
|
19
|
+
/** Callback fired when the checkbox selection changes */
|
|
12
20
|
onChange: (checked: boolean, value?: CheckboxValue, meta?: {
|
|
13
21
|
shiftKey?: boolean;
|
|
14
22
|
}) => void;
|
|
23
|
+
/** Additional CSS class name */
|
|
15
24
|
className?: string;
|
|
16
25
|
}
|
|
17
26
|
export declare const Checkbox: ({ id, checked, indeterminate, value, name, hint, disabled, ariaLabel, className, onChange, ...otherProps }: CheckboxProps) => React.JSX.Element;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Checkbox.js","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useRef, useMemo } from 'react';\nimport { Choice, ForwardedChoiceProps } from '../Choice';\nimport { generateId } from '../../utils/generateId';\n\nimport styles from './Checkbox.module.scss';\n\nexport type CheckboxValue = string | number;\n\nexport interface CheckboxProps extends ForwardedChoiceProps {\n id?: string;\n checked: boolean;\n indeterminate?: boolean;\n value?: CheckboxValue;\n name?: string;\n disabled?: boolean;\n ariaLabel?: string;\n onChange: (checked: boolean, value?: CheckboxValue, meta?: { shiftKey?: boolean }) => void;\n className?: string;\n}\n\nexport const Checkbox = ({\n id,\n checked,\n indeterminate,\n value,\n name,\n hint,\n disabled,\n ariaLabel,\n className,\n onChange,\n ...otherProps\n}: CheckboxProps) => {\n const componentId = useMemo(() => id ?? generateId('checkbox'), [id]);\n const checkboxRef = useRef<HTMLInputElement>(null);\n\n const handleChange = useCallback(\n (e: React.ChangeEvent<HTMLInputElement>) => {\n onChange(e.currentTarget.checked, value);\n },\n [onChange, value],\n );\n\n useEffect(() => {\n if (!checkboxRef.current) return;\n if (indeterminate === true) {\n checkboxRef.current.indeterminate = true;\n return;\n }\n checkboxRef.current.indeterminate = false;\n }, [indeterminate]);\n\n const ariaDescribedBy = hint ? `hint-${componentId}` : undefined;\n\n return (\n <Choice\n htmlFor={componentId}\n disabled={disabled}\n className={className}\n hint={hint}\n {...otherProps}\n >\n <input\n ref={checkboxRef}\n id={componentId}\n type=\"checkbox\"\n checked={checked}\n value={value}\n name={name}\n disabled={disabled}\n aria-label={ariaLabel}\n aria-describedby={ariaDescribedBy}\n onChange={handleChange}\n className={styles.input}\n />\n </Choice>\n );\n};\n"],"names":["React"],"mappings":";;;;;
|
|
1
|
+
{"version":3,"file":"Checkbox.js","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useRef, useMemo } from 'react';\nimport { Choice, ForwardedChoiceProps } from '../Choice';\nimport { generateId } from '../../utils/generateId';\n\nimport styles from './Checkbox.module.scss';\n\nexport type CheckboxValue = string | number;\n\nexport interface CheckboxProps extends ForwardedChoiceProps {\n /** Unique identifier for the checkbox input */\n id?: string;\n /** Whether the checkbox is selected */\n checked: boolean;\n /** Whether the checkbox is in an indeterminate (partial) state */\n indeterminate?: boolean;\n /** The value associated with this checkbox option */\n value?: CheckboxValue;\n /** Name attribute for form submission */\n name?: string;\n /** Whether the checkbox is disabled and non-interactive */\n disabled?: boolean;\n /** Accessible label for screen readers */\n ariaLabel?: string;\n /** Callback fired when the checkbox selection changes */\n onChange: (checked: boolean, value?: CheckboxValue, meta?: { shiftKey?: boolean }) => void;\n /** Additional CSS class name */\n className?: string;\n}\n\nexport const Checkbox = ({\n id,\n checked,\n indeterminate,\n value,\n name,\n hint,\n disabled,\n ariaLabel,\n className,\n onChange,\n ...otherProps\n}: CheckboxProps) => {\n const componentId = useMemo(() => id ?? generateId('checkbox'), [id]);\n const checkboxRef = useRef<HTMLInputElement>(null);\n\n const handleChange = useCallback(\n (e: React.ChangeEvent<HTMLInputElement>) => {\n onChange(e.currentTarget.checked, value);\n },\n [onChange, value],\n );\n\n useEffect(() => {\n if (!checkboxRef.current) return;\n if (indeterminate === true) {\n checkboxRef.current.indeterminate = true;\n return;\n }\n checkboxRef.current.indeterminate = false;\n }, [indeterminate]);\n\n const ariaDescribedBy = hint ? `hint-${componentId}` : undefined;\n\n return (\n <Choice\n htmlFor={componentId}\n disabled={disabled}\n className={className}\n hint={hint}\n {...otherProps}\n >\n <input\n ref={checkboxRef}\n id={componentId}\n type=\"checkbox\"\n checked={checked}\n value={value}\n name={name}\n disabled={disabled}\n aria-label={ariaLabel}\n aria-describedby={ariaDescribedBy}\n onChange={handleChange}\n className={styles.input}\n />\n </Choice>\n );\n};\n"],"names":["React"],"mappings":";;;;;AA6BO,MAAM,QAAQ,GAAG,CAAC,EACvB,EAAE,EACF,OAAO,EACP,aAAa,EACb,KAAK,EACL,IAAI,EACJ,IAAI,EACJ,QAAQ,EACR,SAAS,EACT,SAAS,EACT,QAAQ,EACR,GAAG,UAAU,EACC,KAAI;IAClB,MAAM,WAAW,GAAG,OAAO,CAAC,MAAM,EAAE,KAAA,IAAA,IAAF,EAAE,KAAA,MAAA,GAAF,EAAE,GAAI,UAAU,CAAC,UAAU,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC;AACrE,IAAA,MAAM,WAAW,GAAG,MAAM,CAAmB,IAAI,CAAC;AAElD,IAAA,MAAM,YAAY,GAAG,WAAW,CAC9B,CAAC,CAAsC,KAAI;QACzC,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,OAAO,EAAE,KAAK,CAAC;AAC1C,IAAA,CAAC,EACD,CAAC,QAAQ,EAAE,KAAK,CAAC,CAClB;IAED,SAAS,CAAC,MAAK;QACb,IAAI,CAAC,WAAW,CAAC,OAAO;YAAE;QAC1B,IAAI,aAAa,KAAK,IAAI,EAAE;AAC1B,YAAA,WAAW,CAAC,OAAO,CAAC,aAAa,GAAG,IAAI;YACxC;AACD,QAAA;AACD,QAAA,WAAW,CAAC,OAAO,CAAC,aAAa,GAAG,KAAK;AAC3C,IAAA,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC;AAEnB,IAAA,MAAM,eAAe,GAAG,IAAI,GAAG,CAAA,KAAA,EAAQ,WAAW,CAAA,CAAE,GAAG,SAAS;IAEhE,QACEA,6BAAC,MAAM,EAAA,EACL,OAAO,EAAE,WAAW,EACpB,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,SAAS,EACpB,IAAI,EAAE,IAAI,KACN,UAAU,EAAA;QAEdA,cAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EACE,GAAG,EAAE,WAAW,EAChB,EAAE,EAAE,WAAW,EACf,IAAI,EAAC,UAAU,EACf,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAAA,YAAA,EACN,SAAS,EAAA,kBAAA,EACH,eAAe,EACjC,QAAQ,EAAE,YAAY,EACtB,SAAS,EAAE,MAAM,CAAC,KAAK,EAAA,CACvB,CACK;AAEb;;;;"}
|
|
@@ -2,8 +2,8 @@
|
|
|
2
2
|
|
|
3
3
|
var ___$insertStyle = require('../../_virtual/____insertStyle.cjs');
|
|
4
4
|
|
|
5
|
-
___$insertStyle(".
|
|
6
|
-
var styles = {"input":"
|
|
5
|
+
___$insertStyle("._input_1iza9_1 {\n appearance: none;\n width: 18px;\n height: 18px;\n background-color: transparent;\n border: 2px solid var(--choice-error-border, var(--colors-neutral-ink-lightest));\n border-radius: var(--radius-base);\n cursor: pointer;\n flex-shrink: 0;\n transition: box-shadow 0.1s, background-color 0.1s;\n}\n._input_1iza9_1:checked {\n background-color: var(--choice-error-bg, var(--colors-secondary-blue-base));\n border-color: var(--choice-error-border, var(--colors-secondary-blue-base));\n background-image: url(\"data:image/svg+xml;utf-8,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M8.56846 16.3657L3.86697 11.6642L2.2998 13.2313L8.56846 19.5L22.0013 6.06716L20.4341 4.5L8.56846 16.3657Z' fill='white' /></svg>\");\n background-repeat: no-repeat;\n background-size: var(--sizes-4);\n background-position: center;\n}\n._input_1iza9_1:hover {\n border-color: var(--choice-error-border, var(--colors-secondary-blue-base));\n}\n._input_1iza9_1:checked:hover {\n background-color: var(--choice-error-bg, var(--colors-secondary-blue-dark));\n border-color: var(--choice-error-border, var(--colors-secondary-blue-dark));\n}\n._input_1iza9_1:active {\n border-color: var(--choice-error-border, var(--colors-secondary-blue-base));\n}\n._input_1iza9_1:focus {\n box-shadow: 0 0 0 var(--sizes-xs) var(--choice-error-focus, var(--colors-secondary-blue-light));\n outline: 0;\n}\n._input_1iza9_1:indeterminate {\n background-color: var(--choice-error-bg, var(--colors-secondary-blue-base));\n border-color: var(--choice-error-border, var(--colors-secondary-blue-base));\n background-image: url(\"data:image/svg+xml;utf-8,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><rect x='5' y='11' width='14' height='3' fill='white'/></svg>\");\n background-repeat: no-repeat;\n background-size: var(--sizes-4);\n background-position: center;\n}\n._input_1iza9_1:disabled {\n box-shadow: none;\n background-color: var(--colors-neutral-grey-base);\n border-color: var(--colors-neutral-grey-base);\n color: var(--colors-neutral-ink-light);\n cursor: default;\n}\n._input_1iza9_1:checked:disabled {\n background-image: url(\"data:image/svg+xml;utf-8,<svg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M8.56846 16.3657L3.86697 11.6642L2.2998 13.2313L8.56846 19.5L22.0013 6.06716L20.4341 4.5L8.56846 16.3657Z' fill='%23637381' /></svg>\");\n}\n._input_1iza9_1:indeterminate:disabled {\n background-image: url(\"data:image/svg+xml;utf-8,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><rect x='5' y='11' width='14' height='3' fill='%23637381'/></svg>\");\n}");
|
|
6
|
+
var styles = {"input":"_input_1iza9_1"};
|
|
7
7
|
|
|
8
8
|
module.exports = styles;
|
|
9
9
|
//# sourceMappingURL=Checkbox.module.scss.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Checkbox.module.scss.cjs","sources":["../../../src/components/Checkbox/Checkbox.module.scss"],"sourcesContent":[".input {\n appearance: none;\n width: 18px;\n height: 18px;\n background-color: transparent;\n border: 2px solid var(--choice-error-border, var(--colors-neutral-ink-lightest));\n border-radius: var(--radius-base);\n cursor: pointer;\n flex-shrink: 0;\n transition:\n box-shadow 0.1s,\n background-color 0.1s;\n\n &:checked {\n background-color: var(--choice-error-bg, var(--colors-secondary-blue-base));\n border-color: var(--choice-error-border, var(--colors-secondary-blue-base));\n background-image: url(\"data:image/svg+xml;utf-8,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M8.56846 16.3657L3.86697 11.6642L2.2998 13.2313L8.56846 19.5L22.0013 6.06716L20.4341 4.5L8.56846 16.3657Z' fill='white' /></svg>\");\n background-repeat: no-repeat;\n background-size: var(--sizes-4);\n background-position: center;\n }\n\n &:hover {\n border-color: var(--choice-error-border, var(--colors-secondary-blue-base));\n }\n\n &:active {\n border-color: var(--choice-error-border, var(--colors-secondary-blue-base));\n }\n\n &:focus {\n box-shadow: 0 0 0 var(--sizes-xs) var(--choice-error-focus, var(--colors-secondary-blue-light));\n outline: 0;\n }\n\n &:indeterminate {\n background-color: var(--choice-error-bg, var(--colors-secondary-blue-base));\n border-color: var(--choice-error-border, var(--colors-secondary-blue-base));\n background-image: url(\"data:image/svg+xml;utf-8,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><rect x='5' y='11' width='14' height='3' fill='white'/></svg>\");\n background-repeat: no-repeat;\n background-size: var(--sizes-4);\n background-position: center;\n }\n\n &:disabled {\n box-shadow: none;\n background-color: var(--colors-neutral-grey-base);\n border-color: var(--colors-neutral-grey-base);\n color: var(--colors-neutral-ink-light);\n cursor: default;\n }\n\n &:checked:disabled {\n background-image: url(\"data:image/svg+xml;utf-8,<svg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M8.56846 16.3657L3.86697 11.6642L2.2998 13.2313L8.56846 19.5L22.0013 6.06716L20.4341 4.5L8.56846 16.3657Z' fill='%23637381' /></svg>\");\n }\n\n &:indeterminate:disabled {\n background-image: url(\"data:image/svg+xml;utf-8,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><rect x='5' y='11' width='14' height='3' fill='%23637381'/></svg>\");\n }\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,
|
|
1
|
+
{"version":3,"file":"Checkbox.module.scss.cjs","sources":["../../../src/components/Checkbox/Checkbox.module.scss"],"sourcesContent":[".input {\n appearance: none;\n width: 18px;\n height: 18px;\n background-color: transparent;\n border: 2px solid var(--choice-error-border, var(--colors-neutral-ink-lightest));\n border-radius: var(--radius-base);\n cursor: pointer;\n flex-shrink: 0;\n transition:\n box-shadow 0.1s,\n background-color 0.1s;\n\n &:checked {\n background-color: var(--choice-error-bg, var(--colors-secondary-blue-base));\n border-color: var(--choice-error-border, var(--colors-secondary-blue-base));\n background-image: url(\"data:image/svg+xml;utf-8,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M8.56846 16.3657L3.86697 11.6642L2.2998 13.2313L8.56846 19.5L22.0013 6.06716L20.4341 4.5L8.56846 16.3657Z' fill='white' /></svg>\");\n background-repeat: no-repeat;\n background-size: var(--sizes-4);\n background-position: center;\n }\n\n &:hover {\n border-color: var(--choice-error-border, var(--colors-secondary-blue-base));\n }\n\n &:checked:hover {\n background-color: var(--choice-error-bg, var(--colors-secondary-blue-dark));\n border-color: var(--choice-error-border, var(--colors-secondary-blue-dark));\n }\n\n &:active {\n border-color: var(--choice-error-border, var(--colors-secondary-blue-base));\n }\n\n &:focus {\n box-shadow: 0 0 0 var(--sizes-xs) var(--choice-error-focus, var(--colors-secondary-blue-light));\n outline: 0;\n }\n\n &:indeterminate {\n background-color: var(--choice-error-bg, var(--colors-secondary-blue-base));\n border-color: var(--choice-error-border, var(--colors-secondary-blue-base));\n background-image: url(\"data:image/svg+xml;utf-8,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><rect x='5' y='11' width='14' height='3' fill='white'/></svg>\");\n background-repeat: no-repeat;\n background-size: var(--sizes-4);\n background-position: center;\n }\n\n &:disabled {\n box-shadow: none;\n background-color: var(--colors-neutral-grey-base);\n border-color: var(--colors-neutral-grey-base);\n color: var(--colors-neutral-ink-light);\n cursor: default;\n }\n\n &:checked:disabled {\n background-image: url(\"data:image/svg+xml;utf-8,<svg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M8.56846 16.3657L3.86697 11.6642L2.2998 13.2313L8.56846 19.5L22.0013 6.06716L20.4341 4.5L8.56846 16.3657Z' fill='%23637381' /></svg>\");\n }\n\n &:indeterminate:disabled {\n background-image: url(\"data:image/svg+xml;utf-8,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><rect x='5' y='11' width='14' height='3' fill='%23637381'/></svg>\");\n }\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,stFAAA;AACA,aAAA,CAAA,OAAA,CAAA,gBAAA;;;;"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import insertStyle from '../../_virtual/____insertStyle.js';
|
|
2
2
|
|
|
3
|
-
insertStyle(".
|
|
4
|
-
var styles = {"input":"
|
|
3
|
+
insertStyle("._input_1iza9_1 {\n appearance: none;\n width: 18px;\n height: 18px;\n background-color: transparent;\n border: 2px solid var(--choice-error-border, var(--colors-neutral-ink-lightest));\n border-radius: var(--radius-base);\n cursor: pointer;\n flex-shrink: 0;\n transition: box-shadow 0.1s, background-color 0.1s;\n}\n._input_1iza9_1:checked {\n background-color: var(--choice-error-bg, var(--colors-secondary-blue-base));\n border-color: var(--choice-error-border, var(--colors-secondary-blue-base));\n background-image: url(\"data:image/svg+xml;utf-8,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M8.56846 16.3657L3.86697 11.6642L2.2998 13.2313L8.56846 19.5L22.0013 6.06716L20.4341 4.5L8.56846 16.3657Z' fill='white' /></svg>\");\n background-repeat: no-repeat;\n background-size: var(--sizes-4);\n background-position: center;\n}\n._input_1iza9_1:hover {\n border-color: var(--choice-error-border, var(--colors-secondary-blue-base));\n}\n._input_1iza9_1:checked:hover {\n background-color: var(--choice-error-bg, var(--colors-secondary-blue-dark));\n border-color: var(--choice-error-border, var(--colors-secondary-blue-dark));\n}\n._input_1iza9_1:active {\n border-color: var(--choice-error-border, var(--colors-secondary-blue-base));\n}\n._input_1iza9_1:focus {\n box-shadow: 0 0 0 var(--sizes-xs) var(--choice-error-focus, var(--colors-secondary-blue-light));\n outline: 0;\n}\n._input_1iza9_1:indeterminate {\n background-color: var(--choice-error-bg, var(--colors-secondary-blue-base));\n border-color: var(--choice-error-border, var(--colors-secondary-blue-base));\n background-image: url(\"data:image/svg+xml;utf-8,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><rect x='5' y='11' width='14' height='3' fill='white'/></svg>\");\n background-repeat: no-repeat;\n background-size: var(--sizes-4);\n background-position: center;\n}\n._input_1iza9_1:disabled {\n box-shadow: none;\n background-color: var(--colors-neutral-grey-base);\n border-color: var(--colors-neutral-grey-base);\n color: var(--colors-neutral-ink-light);\n cursor: default;\n}\n._input_1iza9_1:checked:disabled {\n background-image: url(\"data:image/svg+xml;utf-8,<svg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M8.56846 16.3657L3.86697 11.6642L2.2998 13.2313L8.56846 19.5L22.0013 6.06716L20.4341 4.5L8.56846 16.3657Z' fill='%23637381' /></svg>\");\n}\n._input_1iza9_1:indeterminate:disabled {\n background-image: url(\"data:image/svg+xml;utf-8,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><rect x='5' y='11' width='14' height='3' fill='%23637381'/></svg>\");\n}");
|
|
4
|
+
var styles = {"input":"_input_1iza9_1"};
|
|
5
5
|
|
|
6
6
|
export { styles as default };
|
|
7
7
|
//# sourceMappingURL=Checkbox.module.scss.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Checkbox.module.scss.js","sources":["../../../src/components/Checkbox/Checkbox.module.scss"],"sourcesContent":[".input {\n appearance: none;\n width: 18px;\n height: 18px;\n background-color: transparent;\n border: 2px solid var(--choice-error-border, var(--colors-neutral-ink-lightest));\n border-radius: var(--radius-base);\n cursor: pointer;\n flex-shrink: 0;\n transition:\n box-shadow 0.1s,\n background-color 0.1s;\n\n &:checked {\n background-color: var(--choice-error-bg, var(--colors-secondary-blue-base));\n border-color: var(--choice-error-border, var(--colors-secondary-blue-base));\n background-image: url(\"data:image/svg+xml;utf-8,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M8.56846 16.3657L3.86697 11.6642L2.2998 13.2313L8.56846 19.5L22.0013 6.06716L20.4341 4.5L8.56846 16.3657Z' fill='white' /></svg>\");\n background-repeat: no-repeat;\n background-size: var(--sizes-4);\n background-position: center;\n }\n\n &:hover {\n border-color: var(--choice-error-border, var(--colors-secondary-blue-base));\n }\n\n &:active {\n border-color: var(--choice-error-border, var(--colors-secondary-blue-base));\n }\n\n &:focus {\n box-shadow: 0 0 0 var(--sizes-xs) var(--choice-error-focus, var(--colors-secondary-blue-light));\n outline: 0;\n }\n\n &:indeterminate {\n background-color: var(--choice-error-bg, var(--colors-secondary-blue-base));\n border-color: var(--choice-error-border, var(--colors-secondary-blue-base));\n background-image: url(\"data:image/svg+xml;utf-8,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><rect x='5' y='11' width='14' height='3' fill='white'/></svg>\");\n background-repeat: no-repeat;\n background-size: var(--sizes-4);\n background-position: center;\n }\n\n &:disabled {\n box-shadow: none;\n background-color: var(--colors-neutral-grey-base);\n border-color: var(--colors-neutral-grey-base);\n color: var(--colors-neutral-ink-light);\n cursor: default;\n }\n\n &:checked:disabled {\n background-image: url(\"data:image/svg+xml;utf-8,<svg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M8.56846 16.3657L3.86697 11.6642L2.2998 13.2313L8.56846 19.5L22.0013 6.06716L20.4341 4.5L8.56846 16.3657Z' fill='%23637381' /></svg>\");\n }\n\n &:indeterminate:disabled {\n background-image: url(\"data:image/svg+xml;utf-8,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><rect x='5' y='11' width='14' height='3' fill='%23637381'/></svg>\");\n }\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,
|
|
1
|
+
{"version":3,"file":"Checkbox.module.scss.js","sources":["../../../src/components/Checkbox/Checkbox.module.scss"],"sourcesContent":[".input {\n appearance: none;\n width: 18px;\n height: 18px;\n background-color: transparent;\n border: 2px solid var(--choice-error-border, var(--colors-neutral-ink-lightest));\n border-radius: var(--radius-base);\n cursor: pointer;\n flex-shrink: 0;\n transition:\n box-shadow 0.1s,\n background-color 0.1s;\n\n &:checked {\n background-color: var(--choice-error-bg, var(--colors-secondary-blue-base));\n border-color: var(--choice-error-border, var(--colors-secondary-blue-base));\n background-image: url(\"data:image/svg+xml;utf-8,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M8.56846 16.3657L3.86697 11.6642L2.2998 13.2313L8.56846 19.5L22.0013 6.06716L20.4341 4.5L8.56846 16.3657Z' fill='white' /></svg>\");\n background-repeat: no-repeat;\n background-size: var(--sizes-4);\n background-position: center;\n }\n\n &:hover {\n border-color: var(--choice-error-border, var(--colors-secondary-blue-base));\n }\n\n &:checked:hover {\n background-color: var(--choice-error-bg, var(--colors-secondary-blue-dark));\n border-color: var(--choice-error-border, var(--colors-secondary-blue-dark));\n }\n\n &:active {\n border-color: var(--choice-error-border, var(--colors-secondary-blue-base));\n }\n\n &:focus {\n box-shadow: 0 0 0 var(--sizes-xs) var(--choice-error-focus, var(--colors-secondary-blue-light));\n outline: 0;\n }\n\n &:indeterminate {\n background-color: var(--choice-error-bg, var(--colors-secondary-blue-base));\n border-color: var(--choice-error-border, var(--colors-secondary-blue-base));\n background-image: url(\"data:image/svg+xml;utf-8,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><rect x='5' y='11' width='14' height='3' fill='white'/></svg>\");\n background-repeat: no-repeat;\n background-size: var(--sizes-4);\n background-position: center;\n }\n\n &:disabled {\n box-shadow: none;\n background-color: var(--colors-neutral-grey-base);\n border-color: var(--colors-neutral-grey-base);\n color: var(--colors-neutral-ink-light);\n cursor: default;\n }\n\n &:checked:disabled {\n background-image: url(\"data:image/svg+xml;utf-8,<svg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M8.56846 16.3657L3.86697 11.6642L2.2998 13.2313L8.56846 19.5L22.0013 6.06716L20.4341 4.5L8.56846 16.3657Z' fill='%23637381' /></svg>\");\n }\n\n &:indeterminate:disabled {\n background-image: url(\"data:image/svg+xml;utf-8,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><rect x='5' y='11' width='14' height='3' fill='%23637381'/></svg>\");\n }\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,stFAAA;AACA,aAAA,CAAA,OAAA,CAAA,gBAAA;;;;"}
|
|
@@ -1,19 +1,19 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var React = require('react');
|
|
4
3
|
var framerMotion = require('framer-motion');
|
|
5
|
-
var
|
|
4
|
+
var React = require('react');
|
|
6
5
|
var Dialog = require('./components/Dialog/Dialog.cjs');
|
|
6
|
+
var types = require('./types.cjs');
|
|
7
|
+
var useIsOverflowing = require('../../hooks/useIsOverflowing.cjs');
|
|
7
8
|
var buildClassnames = require('../../utils/buildClassnames.cjs');
|
|
8
9
|
require('uid/secure');
|
|
9
|
-
var
|
|
10
|
-
var Button = require('../Button/Button.cjs');
|
|
10
|
+
var Action = require('../Action/Action.cjs');
|
|
11
11
|
var Card = require('../Card/Card.cjs');
|
|
12
12
|
var CardHeader = require('../CardHeader/CardHeader.cjs');
|
|
13
|
+
var FlexRow = require('../Flex/FlexRow/FlexRow.cjs');
|
|
13
14
|
var ScrollLock = require('../ScrollLock/ScrollLock.cjs');
|
|
14
|
-
var Stack = require('../Stack/Stack.cjs');
|
|
15
|
-
var utils = require('./utils.cjs');
|
|
16
15
|
var Modal_module = require('./Modal.module.scss.cjs');
|
|
16
|
+
var utils = require('./utils.cjs');
|
|
17
17
|
|
|
18
18
|
function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
|
|
19
19
|
|
|
@@ -21,7 +21,7 @@ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
|
|
|
21
21
|
|
|
22
22
|
/* eslint-disable react/destructuring-assignment */
|
|
23
23
|
const Modal = (props) => {
|
|
24
|
-
const { shouldShow, showHeaderCloseButton = true, preventClose = false, displayMode = 'modal', fullBleed = false,
|
|
24
|
+
const { shouldShow, showHeaderCloseButton = true, preventClose = false, displayMode = 'modal', fullBleed = false, size = 'base', onClose: parentOnClose, children, ...rest } = props;
|
|
25
25
|
const modalRef = React.useRef(null);
|
|
26
26
|
const [mainSectionRef, setMainSectionRef] = React.useState(null);
|
|
27
27
|
React.useEffect(() => {
|
|
@@ -59,7 +59,7 @@ const Modal = (props) => {
|
|
|
59
59
|
};
|
|
60
60
|
return (React__default.default.createElement(framerMotion.AnimatePresence, null, shouldShow && (React__default.default.createElement("div", { "data-testid": "dialog-wrapper", style: { position: 'absolute' } },
|
|
61
61
|
React__default.default.createElement(ScrollLock.ScrollLock, null),
|
|
62
|
-
React__default.default.createElement(Dialog.Dialog, { "data-dialog-type": "modal", displayMode: displayMode,
|
|
62
|
+
React__default.default.createElement(Dialog.Dialog, { "data-dialog-type": "modal", displayMode: displayMode, size: size, ref: modalRef, onClose: handleClose, onKeyDown: preventClose ? utils.preventDefaultEventOnESC : handleKeyDown, onClick: handleBackdropClick, ...rest, "aria-describedby": "modal_title", appearance: (types.isSideDraw(props) && props.appearance) || 'primary' },
|
|
63
63
|
React__default.default.createElement(Card.Card.Surface, null,
|
|
64
64
|
types.hasHeaderSlot(props) ? (props.headerSlot) : (React__default.default.createElement(CardHeader.CardHeader, { id: "modal_title", headerVariant: "headingLarge", title: props.headerTitle, subtitle: props.headerSubtitle, ...(showHeaderCloseButton && { onClickClose: handleClose }) })),
|
|
65
65
|
React__default.default.createElement("section", { onScroll: onScroll, ref: setMainSectionRef, className: buildClassnames.buildClassnames([
|
|
@@ -69,9 +69,9 @@ const Modal = (props) => {
|
|
|
69
69
|
]) }, children),
|
|
70
70
|
types.hasFooterSlot(props) && props.footerSlot,
|
|
71
71
|
!types.hasFooterSlot(props) && (props.leftActions || props.rightActions) && (React__default.default.createElement(Card.Card.Footer, null,
|
|
72
|
-
React__default.default.createElement(
|
|
73
|
-
props.leftActions && (React__default.default.createElement(
|
|
74
|
-
props.rightActions && (React__default.default.createElement(
|
|
72
|
+
React__default.default.createElement(FlexRow.FlexRow, { justifyContent: props.leftActions ? 'space-between' : 'flex-end' },
|
|
73
|
+
props.leftActions && (React__default.default.createElement(FlexRow.FlexRow, { justifyContent: "flex-start", "data-testid": "left-actions-container" }, props.leftActions.map(({ label, ...actionProps }) => (React__default.default.createElement(Action.Action, { key: label, type: "button", ...actionProps }, label))))),
|
|
74
|
+
props.rightActions && (React__default.default.createElement(FlexRow.FlexRow, { justifyContent: "flex-end", "data-testid": "right-actions-container" }, props.rightActions.map(({ label, ...actionProps }) => (React__default.default.createElement(Action.Action, { key: label, type: "button", ...actionProps }, label))))))))))))));
|
|
75
75
|
};
|
|
76
76
|
|
|
77
77
|
exports.Modal = Modal;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Modal.cjs","sources":["../../../src/components/Modal/Modal.tsx"],"sourcesContent":["/* eslint-disable react/destructuring-assignment */\nimport React, { useEffect, useRef, useState } from 'react';\nimport {
|
|
1
|
+
{"version":3,"file":"Modal.cjs","sources":["../../../src/components/Modal/Modal.tsx"],"sourcesContent":["/* eslint-disable react/destructuring-assignment */\nimport { AnimatePresence } from 'framer-motion';\nimport React, { useEffect, useRef, useState } from 'react';\n\nimport { Dialog } from './components/Dialog/Dialog';\nimport { ModalProps, hasFooterSlot, hasHeaderSlot, isSideDraw } from './types';\n\nimport { useIsOverflowing } from '../../hooks/useIsOverflowing';\nimport { buildClassnames } from '../../utils';\nimport { Action } from '../Action';\nimport { Card } from '../Card';\nimport { CardHeader } from '../CardHeader';\nimport { FlexRow } from '../Flex/FlexRow';\nimport { ScrollLock } from '../ScrollLock';\nimport modalStyles from './Modal.module.scss';\nimport { preventDefaultEventOnESC } from './utils';\n\nexport const Modal = (props: ModalProps) => {\n const {\n shouldShow,\n showHeaderCloseButton = true,\n preventClose = false,\n displayMode = 'modal',\n fullBleed = false,\n size = 'base',\n onClose: parentOnClose,\n children,\n ...rest\n } = props;\n\n const modalRef = useRef<HTMLDialogElement | null>(null);\n const [mainSectionRef, setMainSectionRef] = useState<HTMLElement | null>(null);\n\n useEffect(() => {\n if (shouldShow) {\n modalRef.current?.removeAttribute('open'); // Allows for conditional rendering.\n modalRef.current?.showModal();\n }\n }, [shouldShow]);\n\n const { isOverflowing: isContentOverflowing, onScroll } = useIsOverflowing(mainSectionRef);\n\n const handleClose = () => {\n if (preventClose) return;\n\n const result = parentOnClose();\n if (result === false) return; // Otherwise close on void, or true.\n\n modalRef.current?.close();\n };\n\n const handleKeyDown = (e: React.KeyboardEvent<HTMLDialogElement>) => {\n if (e.key === 'Escape') {\n e.preventDefault(); // Prevent default ESC behavior\n\n // Don't close if this is the top level and there are other dialogs open\n const openDialogs = document.querySelectorAll('dialog[open]');\n if (openDialogs.length > 1 && modalRef.current === openDialogs[0]) return;\n\n handleClose();\n }\n };\n\n const handleBackdropClick = async (e: React.MouseEvent<HTMLDialogElement>) => {\n if (displayMode === 'modal') return;\n if (e.target === modalRef.current) handleClose();\n };\n\n return (\n <AnimatePresence>\n {shouldShow && (\n <div data-testid=\"dialog-wrapper\" style={{ position: 'absolute' }}>\n <ScrollLock />\n <Dialog\n data-dialog-type=\"modal\"\n displayMode={displayMode}\n size={size}\n ref={modalRef}\n onClose={handleClose}\n onKeyDown={preventClose ? preventDefaultEventOnESC : handleKeyDown}\n onClick={handleBackdropClick}\n {...rest}\n aria-describedby=\"modal_title\"\n appearance={(isSideDraw(props) && props.appearance) || 'primary'}\n >\n <Card.Surface>\n {hasHeaderSlot(props) ? (\n props.headerSlot\n ) : (\n <CardHeader\n id=\"modal_title\"\n headerVariant=\"headingLarge\"\n title={props.headerTitle}\n subtitle={props.headerSubtitle}\n {...(showHeaderCloseButton && { onClickClose: handleClose })}\n />\n )}\n\n <section\n onScroll={onScroll}\n ref={setMainSectionRef}\n className={buildClassnames([\n modalStyles.mainSection,\n fullBleed && modalStyles.fullBleed,\n isContentOverflowing && modalStyles.scrollable,\n ])}\n >\n {children}\n </section>\n\n {hasFooterSlot(props) && props.footerSlot}\n\n {!hasFooterSlot(props) && (props.leftActions || props.rightActions) && (\n <Card.Footer>\n <FlexRow justifyContent={props.leftActions ? 'space-between' : 'flex-end'}>\n {props.leftActions && (\n <FlexRow justifyContent=\"flex-start\" data-testid=\"left-actions-container\">\n {props.leftActions.map(({ label, ...actionProps }) => (\n <Action key={label} type=\"button\" {...actionProps}>\n {label}\n </Action>\n ))}\n </FlexRow>\n )}\n {props.rightActions && (\n <FlexRow justifyContent=\"flex-end\" data-testid=\"right-actions-container\">\n {props.rightActions.map(({ label, ...actionProps }) => (\n <Action key={label} type=\"button\" {...actionProps}>\n {label}\n </Action>\n ))}\n </FlexRow>\n )}\n </FlexRow>\n </Card.Footer>\n )}\n </Card.Surface>\n </Dialog>\n </div>\n )}\n </AnimatePresence>\n );\n};\n"],"names":["useRef","useState","useEffect","useIsOverflowing","React","AnimatePresence","ScrollLock","Dialog","preventDefaultEventOnESC","isSideDraw","Card","hasHeaderSlot","CardHeader","buildClassnames","modalStyles","hasFooterSlot","FlexRow","Action"],"mappings":"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"}
|
|
@@ -1,21 +1,21 @@
|
|
|
1
|
-
import React__default, { useRef, useState, useEffect } from 'react';
|
|
2
1
|
import { AnimatePresence } from 'framer-motion';
|
|
3
|
-
import {
|
|
2
|
+
import React__default, { useRef, useState, useEffect } from 'react';
|
|
4
3
|
import { Dialog } from './components/Dialog/Dialog.js';
|
|
4
|
+
import { isSideDraw, hasHeaderSlot, hasFooterSlot } from './types.js';
|
|
5
|
+
import { useIsOverflowing } from '../../hooks/useIsOverflowing.js';
|
|
5
6
|
import { buildClassnames } from '../../utils/buildClassnames.js';
|
|
6
7
|
import 'uid/secure';
|
|
7
|
-
import {
|
|
8
|
-
import { Button } from '../Button/Button.js';
|
|
8
|
+
import { Action } from '../Action/Action.js';
|
|
9
9
|
import { Card } from '../Card/Card.js';
|
|
10
10
|
import { CardHeader } from '../CardHeader/CardHeader.js';
|
|
11
|
+
import { FlexRow } from '../Flex/FlexRow/FlexRow.js';
|
|
11
12
|
import { ScrollLock } from '../ScrollLock/ScrollLock.js';
|
|
12
|
-
import { Stack } from '../Stack/Stack.js';
|
|
13
|
-
import { preventDefaultEventOnESC } from './utils.js';
|
|
14
13
|
import modalStyles from './Modal.module.scss.js';
|
|
14
|
+
import { preventDefaultEventOnESC } from './utils.js';
|
|
15
15
|
|
|
16
16
|
/* eslint-disable react/destructuring-assignment */
|
|
17
17
|
const Modal = (props) => {
|
|
18
|
-
const { shouldShow, showHeaderCloseButton = true, preventClose = false, displayMode = 'modal', fullBleed = false,
|
|
18
|
+
const { shouldShow, showHeaderCloseButton = true, preventClose = false, displayMode = 'modal', fullBleed = false, size = 'base', onClose: parentOnClose, children, ...rest } = props;
|
|
19
19
|
const modalRef = useRef(null);
|
|
20
20
|
const [mainSectionRef, setMainSectionRef] = useState(null);
|
|
21
21
|
useEffect(() => {
|
|
@@ -53,7 +53,7 @@ const Modal = (props) => {
|
|
|
53
53
|
};
|
|
54
54
|
return (React__default.createElement(AnimatePresence, null, shouldShow && (React__default.createElement("div", { "data-testid": "dialog-wrapper", style: { position: 'absolute' } },
|
|
55
55
|
React__default.createElement(ScrollLock, null),
|
|
56
|
-
React__default.createElement(Dialog, { "data-dialog-type": "modal", displayMode: displayMode,
|
|
56
|
+
React__default.createElement(Dialog, { "data-dialog-type": "modal", displayMode: displayMode, size: size, ref: modalRef, onClose: handleClose, onKeyDown: preventClose ? preventDefaultEventOnESC : handleKeyDown, onClick: handleBackdropClick, ...rest, "aria-describedby": "modal_title", appearance: (isSideDraw(props) && props.appearance) || 'primary' },
|
|
57
57
|
React__default.createElement(Card.Surface, null,
|
|
58
58
|
hasHeaderSlot(props) ? (props.headerSlot) : (React__default.createElement(CardHeader, { id: "modal_title", headerVariant: "headingLarge", title: props.headerTitle, subtitle: props.headerSubtitle, ...(showHeaderCloseButton && { onClickClose: handleClose }) })),
|
|
59
59
|
React__default.createElement("section", { onScroll: onScroll, ref: setMainSectionRef, className: buildClassnames([
|
|
@@ -63,9 +63,9 @@ const Modal = (props) => {
|
|
|
63
63
|
]) }, children),
|
|
64
64
|
hasFooterSlot(props) && props.footerSlot,
|
|
65
65
|
!hasFooterSlot(props) && (props.leftActions || props.rightActions) && (React__default.createElement(Card.Footer, null,
|
|
66
|
-
React__default.createElement(
|
|
67
|
-
props.leftActions && (React__default.createElement(
|
|
68
|
-
props.rightActions && (React__default.createElement(
|
|
66
|
+
React__default.createElement(FlexRow, { justifyContent: props.leftActions ? 'space-between' : 'flex-end' },
|
|
67
|
+
props.leftActions && (React__default.createElement(FlexRow, { justifyContent: "flex-start", "data-testid": "left-actions-container" }, props.leftActions.map(({ label, ...actionProps }) => (React__default.createElement(Action, { key: label, type: "button", ...actionProps }, label))))),
|
|
68
|
+
props.rightActions && (React__default.createElement(FlexRow, { justifyContent: "flex-end", "data-testid": "right-actions-container" }, props.rightActions.map(({ label, ...actionProps }) => (React__default.createElement(Action, { key: label, type: "button", ...actionProps }, label))))))))))))));
|
|
69
69
|
};
|
|
70
70
|
|
|
71
71
|
export { Modal };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Modal.js","sources":["../../../src/components/Modal/Modal.tsx"],"sourcesContent":["/* eslint-disable react/destructuring-assignment */\nimport React, { useEffect, useRef, useState } from 'react';\nimport {
|
|
1
|
+
{"version":3,"file":"Modal.js","sources":["../../../src/components/Modal/Modal.tsx"],"sourcesContent":["/* eslint-disable react/destructuring-assignment */\nimport { AnimatePresence } from 'framer-motion';\nimport React, { useEffect, useRef, useState } from 'react';\n\nimport { Dialog } from './components/Dialog/Dialog';\nimport { ModalProps, hasFooterSlot, hasHeaderSlot, isSideDraw } from './types';\n\nimport { useIsOverflowing } from '../../hooks/useIsOverflowing';\nimport { buildClassnames } from '../../utils';\nimport { Action } from '../Action';\nimport { Card } from '../Card';\nimport { CardHeader } from '../CardHeader';\nimport { FlexRow } from '../Flex/FlexRow';\nimport { ScrollLock } from '../ScrollLock';\nimport modalStyles from './Modal.module.scss';\nimport { preventDefaultEventOnESC } from './utils';\n\nexport const Modal = (props: ModalProps) => {\n const {\n shouldShow,\n showHeaderCloseButton = true,\n preventClose = false,\n displayMode = 'modal',\n fullBleed = false,\n size = 'base',\n onClose: parentOnClose,\n children,\n ...rest\n } = props;\n\n const modalRef = useRef<HTMLDialogElement | null>(null);\n const [mainSectionRef, setMainSectionRef] = useState<HTMLElement | null>(null);\n\n useEffect(() => {\n if (shouldShow) {\n modalRef.current?.removeAttribute('open'); // Allows for conditional rendering.\n modalRef.current?.showModal();\n }\n }, [shouldShow]);\n\n const { isOverflowing: isContentOverflowing, onScroll } = useIsOverflowing(mainSectionRef);\n\n const handleClose = () => {\n if (preventClose) return;\n\n const result = parentOnClose();\n if (result === false) return; // Otherwise close on void, or true.\n\n modalRef.current?.close();\n };\n\n const handleKeyDown = (e: React.KeyboardEvent<HTMLDialogElement>) => {\n if (e.key === 'Escape') {\n e.preventDefault(); // Prevent default ESC behavior\n\n // Don't close if this is the top level and there are other dialogs open\n const openDialogs = document.querySelectorAll('dialog[open]');\n if (openDialogs.length > 1 && modalRef.current === openDialogs[0]) return;\n\n handleClose();\n }\n };\n\n const handleBackdropClick = async (e: React.MouseEvent<HTMLDialogElement>) => {\n if (displayMode === 'modal') return;\n if (e.target === modalRef.current) handleClose();\n };\n\n return (\n <AnimatePresence>\n {shouldShow && (\n <div data-testid=\"dialog-wrapper\" style={{ position: 'absolute' }}>\n <ScrollLock />\n <Dialog\n data-dialog-type=\"modal\"\n displayMode={displayMode}\n size={size}\n ref={modalRef}\n onClose={handleClose}\n onKeyDown={preventClose ? preventDefaultEventOnESC : handleKeyDown}\n onClick={handleBackdropClick}\n {...rest}\n aria-describedby=\"modal_title\"\n appearance={(isSideDraw(props) && props.appearance) || 'primary'}\n >\n <Card.Surface>\n {hasHeaderSlot(props) ? (\n props.headerSlot\n ) : (\n <CardHeader\n id=\"modal_title\"\n headerVariant=\"headingLarge\"\n title={props.headerTitle}\n subtitle={props.headerSubtitle}\n {...(showHeaderCloseButton && { onClickClose: handleClose })}\n />\n )}\n\n <section\n onScroll={onScroll}\n ref={setMainSectionRef}\n className={buildClassnames([\n modalStyles.mainSection,\n fullBleed && modalStyles.fullBleed,\n isContentOverflowing && modalStyles.scrollable,\n ])}\n >\n {children}\n </section>\n\n {hasFooterSlot(props) && props.footerSlot}\n\n {!hasFooterSlot(props) && (props.leftActions || props.rightActions) && (\n <Card.Footer>\n <FlexRow justifyContent={props.leftActions ? 'space-between' : 'flex-end'}>\n {props.leftActions && (\n <FlexRow justifyContent=\"flex-start\" data-testid=\"left-actions-container\">\n {props.leftActions.map(({ label, ...actionProps }) => (\n <Action key={label} type=\"button\" {...actionProps}>\n {label}\n </Action>\n ))}\n </FlexRow>\n )}\n {props.rightActions && (\n <FlexRow justifyContent=\"flex-end\" data-testid=\"right-actions-container\">\n {props.rightActions.map(({ label, ...actionProps }) => (\n <Action key={label} type=\"button\" {...actionProps}>\n {label}\n </Action>\n ))}\n </FlexRow>\n )}\n </FlexRow>\n </Card.Footer>\n )}\n </Card.Surface>\n </Dialog>\n </div>\n )}\n </AnimatePresence>\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("/* Scroll-lock: prevents body scrolling when modal is open.\n The class persists through AnimatePresence exit animations because\n it's managed by the ScrollLock component mounted inside AnimatePresence. */\nbody.veeqo-modal-open {\n overflow: hidden;\n scrollbar-gutter: stable;\n}\n\n@keyframes
|
|
6
|
-
var modalStyles = {"dialog":"
|
|
5
|
+
___$insertStyle("/* Scroll-lock: prevents body scrolling when modal is open.\n The class persists through AnimatePresence exit animations because\n it's managed by the ScrollLock component mounted inside AnimatePresence. */\nbody.veeqo-modal-open {\n overflow: hidden;\n scrollbar-gutter: stable;\n}\n\n@keyframes _fadeIn_sccv3_1 {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n}\n._dialog_sccv3_17 {\n padding: 0;\n border: none;\n border-radius: var(--sizes-sm);\n box-shadow: var(--shadows-lg);\n z-index: var(--layers-modal);\n /* Targets Card.Surface: the sole direct child of dialog.\n Wave 3 (Card migration) can update to CSS Module class reference. */\n /* Targets Card.Footer */\n}\n._dialog_sccv3_17::backdrop {\n animation: _fadeIn_sccv3_1 0.25s ease forwards;\n background-color: rgba(55, 66, 77, 0.5);\n width: 100%;\n height: 100%;\n}\n._dialog_sccv3_17 > :first-child {\n display: flex;\n flex-direction: column;\n}\n._dialog_sccv3_17 > :first-child ._mainSection_sccv3_37 {\n padding-bottom: var(--sizes-md);\n}\n._dialog_sccv3_17 > :first-child footer {\n margin-top: 0;\n}\n\n._secondaryAppearance_sccv3_44::backdrop {\n animation: none;\n opacity: 0;\n}\n\n/* ---------- MainSection ---------- */\n._mainSection_sccv3_37 {\n flex: 1;\n overflow-y: auto;\n}\n\n._mainSection_sccv3_37:not(._fullBleed_sccv3_55) {\n padding: 0 var(--sizes-md);\n}\n\n/* Scrollable shadow on Card.Footer when content overflows */\n._mainSection_sccv3_37._scrollable_sccv3_60 + footer {\n box-shadow: 0px 10px 15px 0px var(--colors-neutral-ink-dark);\n}\n\n/* ---------- Modal display mode ---------- */\n._modal_sccv3_65 {\n min-width: 464px;\n /* Critical for framer-motion exit animations: prevents HTML dialog from\n hiding via UA stylesheet when 'open' attribute is removed. */\n}\n._modal_sccv3_65 > :first-child {\n border: none;\n}\n._modal_sccv3_65:not([open]) {\n display: block;\n position: fixed;\n inset: 0;\n transform: translate(-50%, -50%);\n}\n\n/* ---------- Side drawer shared base ---------- */\n._leftDrawer_sccv3_81,\n._rightDrawer_sccv3_82 {\n height: 100%;\n max-height: 100%;\n min-width: 320px;\n width: 400px;\n margin: 0;\n position: fixed;\n transform: none;\n border-radius: 0;\n overflow: visible;\n /* Critical for framer-motion exit animations */\n}\n._leftDrawer_sccv3_81 > :first-child,\n._rightDrawer_sccv3_82 > :first-child {\n border-radius: 0;\n height: 100%;\n}\n._leftDrawer_sccv3_81:not([open]),\n._rightDrawer_sccv3_82:not([open]) {\n display: block;\n}\n\n._leftDrawer_sccv3_81 {\n inset: 0 auto 0 0;\n}\n\n._rightDrawer_sccv3_82 {\n inset: 0 0 0 auto;\n}\n\n/* ---------- Size-specific responsive widths ---------- */\n/* Values hardcoded from constants.ts (heightMap, widthMap, fullScreenBreakpointMap) */\n._xs-size_sccv3_114 {\n /* fullScreenBreakpointMap['xs'] = 640px (breakpoints.mobile) */\n}\n._xs-size_sccv3_114 > :first-child {\n max-height: 84vh;\n}\n@media (width <= 640px) {\n ._xs-size_sccv3_114 {\n margin: 0;\n width: 100%;\n max-width: 100vw;\n max-height: 100vh;\n }\n ._xs-size_sccv3_114, ._xs-size_sccv3_114 > :first-child {\n border-radius: 0;\n height: 100%;\n width: 100%;\n max-height: unset;\n }\n}\n@media (width >= 641px) and (width <= 720px) {\n ._xs-size_sccv3_114 {\n max-width: 60vw;\n }\n}\n@media (width >= 720px) and (width <= 960px) {\n ._xs-size_sccv3_114 {\n max-width: 48vw;\n }\n}\n@media (width >= 960px) and (width <= 1280px) {\n ._xs-size_sccv3_114 {\n max-width: 36vw;\n }\n}\n@media (width >= 1280px) {\n ._xs-size_sccv3_114 {\n max-width: 32vw;\n }\n}\n\n._sm-size_sccv3_155 {\n /* fullScreenBreakpointMap['sm'] = 640px (breakpoints.mobile) */\n}\n._sm-size_sccv3_155 > :first-child {\n max-height: 72vh;\n}\n@media (width <= 640px) {\n ._sm-size_sccv3_155 {\n margin: 0;\n width: 100%;\n max-width: 100vw;\n max-height: 100vh;\n }\n ._sm-size_sccv3_155, ._sm-size_sccv3_155 > :first-child {\n border-radius: 0;\n height: 100%;\n width: 100%;\n max-height: unset;\n }\n}\n@media (width >= 641px) and (width <= 720px) {\n ._sm-size_sccv3_155 {\n max-width: 72vw;\n }\n}\n@media (width >= 720px) and (width <= 960px) {\n ._sm-size_sccv3_155 {\n max-width: 56vw;\n }\n}\n@media (width >= 960px) and (width <= 1280px) {\n ._sm-size_sccv3_155 {\n max-width: 44vw;\n }\n}\n@media (width >= 1280px) {\n ._sm-size_sccv3_155 {\n max-width: 40vw;\n }\n}\n\n._base-size_sccv3_196 {\n /* fullScreenBreakpointMap['base'] = 720px (breakpoints.tablet) */\n}\n._base-size_sccv3_196 > :first-child {\n max-height: 84vh;\n}\n@media (width <= 720px) {\n ._base-size_sccv3_196 {\n margin: 0;\n width: 100%;\n max-width: 100vw;\n max-height: 100vh;\n }\n ._base-size_sccv3_196, ._base-size_sccv3_196 > :first-child {\n border-radius: 0;\n height: 100%;\n width: 100%;\n max-height: unset;\n }\n}\n@media (width >= 720px) and (width <= 960px) {\n ._base-size_sccv3_196 {\n max-width: 88vw;\n }\n}\n@media (width >= 960px) and (width <= 1280px) {\n ._base-size_sccv3_196 {\n max-width: 72vw;\n }\n}\n@media (width >= 1280px) {\n ._base-size_sccv3_196 {\n max-width: 52vw;\n }\n}\n\n._lg-size_sccv3_232 {\n /* fullScreenBreakpointMap['lg'] = 960px (breakpoints.lgTablet) */\n}\n._lg-size_sccv3_232 > :first-child {\n max-height: 96vh;\n}\n@media (width <= 960px) {\n ._lg-size_sccv3_232 {\n margin: 0;\n width: 100%;\n max-width: 100vw;\n max-height: 100vh;\n }\n ._lg-size_sccv3_232, ._lg-size_sccv3_232 > :first-child {\n border-radius: 0;\n height: 100%;\n width: 100%;\n max-height: unset;\n }\n}\n@media (width >= 960px) and (width <= 1280px) {\n ._lg-size_sccv3_232 {\n max-width: 88vw;\n }\n}\n@media (width >= 1280px) {\n ._lg-size_sccv3_232 {\n max-width: 80vw;\n }\n}");
|
|
6
|
+
var modalStyles = {"dialog":"_dialog_sccv3_17","fadeIn":"_fadeIn_sccv3_1","mainSection":"_mainSection_sccv3_37","secondaryAppearance":"_secondaryAppearance_sccv3_44","fullBleed":"_fullBleed_sccv3_55","scrollable":"_scrollable_sccv3_60","modal":"_modal_sccv3_65","leftDrawer":"_leftDrawer_sccv3_81","rightDrawer":"_rightDrawer_sccv3_82","xs-size":"_xs-size_sccv3_114","sm-size":"_sm-size_sccv3_155","base-size":"_base-size_sccv3_196","lg-size":"_lg-size_sccv3_232"};
|
|
7
7
|
|
|
8
8
|
module.exports = modalStyles;
|
|
9
9
|
//# sourceMappingURL=Modal.module.scss.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Modal.module.scss.cjs","sources":["../../../src/components/Modal/Modal.module.scss"],"sourcesContent":["/* Scroll-lock: prevents body scrolling when modal is open.\n The class persists through AnimatePresence exit animations because\n it's managed by the ScrollLock component mounted inside AnimatePresence. */\n:global(body.veeqo-modal-open) {\n overflow: hidden;\n scrollbar-gutter: stable;\n}\n\n@keyframes fadeIn {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n}\n\n.dialog {\n padding: 0;\n border: none;\n border-radius: var(--sizes-sm);\n box-shadow: var(--shadows-lg);\n z-index: var(--layers-modal);\n\n &::backdrop {\n animation: fadeIn 0.25s ease forwards;\n background-color: rgba(55, 66, 77, 0.5);\n width: 100%;\n height: 100%;\n }\n\n /* Targets Card.Surface: the sole direct child of dialog.\n Wave 3 (Card migration) can update to CSS Module class reference. */\n & > :first-child {\n display: flex;\n flex-direction: column;\n }\n\n & > :first-child .mainSection {\n padding-bottom: var(--sizes-md);\n }\n\n /* Targets Card.Footer */\n & > :first-child footer {\n margin-top: 0;\n }\n}\n\n.secondaryAppearance {\n &::backdrop {\n animation: none;\n opacity: 0;\n }\n}\n\n/* ---------- MainSection ---------- */\n\n.mainSection {\n flex: 1;\n overflow-y: auto;\n}\n\n.mainSection:not(.fullBleed) {\n padding: 0 var(--sizes-md);\n}\n\n/* Scrollable shadow on Card.Footer when content overflows */\n.mainSection.scrollable + footer {\n box-shadow: 0px 10px 15px 0px var(--colors-neutral-ink-dark);\n}\n\n/* ---------- Modal display mode ---------- */\n\n.modal {\n min-width: 464px;\n\n /* Critical for framer-motion exit animations: prevents HTML dialog from\n hiding via UA stylesheet when 'open' attribute is removed. */\n &:not([open]) {\n display: block;\n position: fixed;\n inset: 0;\n transform: translate(-50%, -50%);\n }\n}\n\n/* ---------- Side drawer shared base ---------- */\n\n.leftDrawer,\n.rightDrawer {\n height: 100%;\n max-height: 100%;\n min-width: 320px;\n width: 400px;\n margin: 0;\n position: fixed;\n transform: none;\n border-radius: 0;\n overflow: visible;\n\n & > :first-child {\n border-radius: 0;\n height: 100%;\n }\n\n /* Critical for framer-motion exit animations */\n &:not([open]) {\n display: block;\n }\n}\n\n.leftDrawer {\n inset: 0 auto 0 0;\n}\n\n.rightDrawer {\n inset: 0 0 0 auto;\n}\n\n/* ----------
|
|
1
|
+
{"version":3,"file":"Modal.module.scss.cjs","sources":["../../../src/components/Modal/Modal.module.scss"],"sourcesContent":["/* Scroll-lock: prevents body scrolling when modal is open.\n The class persists through AnimatePresence exit animations because\n it's managed by the ScrollLock component mounted inside AnimatePresence. */\n:global(body.veeqo-modal-open) {\n overflow: hidden;\n scrollbar-gutter: stable;\n}\n\n@keyframes fadeIn {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n}\n\n.dialog {\n padding: 0;\n border: none;\n border-radius: var(--sizes-sm);\n box-shadow: var(--shadows-lg);\n z-index: var(--layers-modal);\n\n &::backdrop {\n animation: fadeIn 0.25s ease forwards;\n background-color: rgba(55, 66, 77, 0.5);\n width: 100%;\n height: 100%;\n }\n\n /* Targets Card.Surface: the sole direct child of dialog.\n Wave 3 (Card migration) can update to CSS Module class reference. */\n & > :first-child {\n display: flex;\n flex-direction: column;\n }\n\n & > :first-child .mainSection {\n padding-bottom: var(--sizes-md);\n }\n\n /* Targets Card.Footer */\n & > :first-child footer {\n margin-top: 0;\n }\n}\n\n.secondaryAppearance {\n &::backdrop {\n animation: none;\n opacity: 0;\n }\n}\n\n/* ---------- MainSection ---------- */\n\n.mainSection {\n flex: 1;\n overflow-y: auto;\n}\n\n.mainSection:not(.fullBleed) {\n padding: 0 var(--sizes-md);\n}\n\n/* Scrollable shadow on Card.Footer when content overflows */\n.mainSection.scrollable + footer {\n box-shadow: 0px 10px 15px 0px var(--colors-neutral-ink-dark);\n}\n\n/* ---------- Modal display mode ---------- */\n\n.modal {\n min-width: 464px;\n \n & > :first-child {\n border: none;\n }\n\n /* Critical for framer-motion exit animations: prevents HTML dialog from\n hiding via UA stylesheet when 'open' attribute is removed. */\n &:not([open]) {\n display: block;\n position: fixed;\n inset: 0;\n transform: translate(-50%, -50%);\n }\n}\n\n/* ---------- Side drawer shared base ---------- */\n\n.leftDrawer,\n.rightDrawer {\n height: 100%;\n max-height: 100%;\n min-width: 320px;\n width: 400px;\n margin: 0;\n position: fixed;\n transform: none;\n border-radius: 0;\n overflow: visible;\n\n & > :first-child {\n border-radius: 0;\n height: 100%;\n }\n\n /* Critical for framer-motion exit animations */\n &:not([open]) {\n display: block;\n }\n}\n\n.leftDrawer {\n inset: 0 auto 0 0;\n}\n\n.rightDrawer {\n inset: 0 0 0 auto;\n}\n\n/* ---------- Size-specific responsive widths ---------- */\n/* Values hardcoded from constants.ts (heightMap, widthMap, fullScreenBreakpointMap) */\n\n.xs-size {\n & > :first-child {\n max-height: 84vh;\n }\n\n /* fullScreenBreakpointMap['xs'] = 640px (breakpoints.mobile) */\n @media (width <= 640px) {\n margin: 0;\n width: 100%;\n max-width: 100vw;\n max-height: 100vh;\n\n &,\n & > :first-child {\n border-radius: 0;\n height: 100%;\n width: 100%;\n max-height: unset;\n }\n }\n\n @media (width >= 641px) and (width <= 720px) {\n max-width: 60vw;\n }\n\n @media (width >= 720px) and (width <= 960px) {\n max-width: 48vw;\n }\n\n @media (width >= 960px) and (width <= 1280px) {\n max-width: 36vw;\n }\n\n @media (width >= 1280px) {\n max-width: 32vw;\n }\n}\n\n.sm-size {\n & > :first-child {\n max-height: 72vh;\n }\n\n /* fullScreenBreakpointMap['sm'] = 640px (breakpoints.mobile) */\n @media (width <= 640px) {\n margin: 0;\n width: 100%;\n max-width: 100vw;\n max-height: 100vh;\n\n &,\n & > :first-child {\n border-radius: 0;\n height: 100%;\n width: 100%;\n max-height: unset;\n }\n }\n\n @media (width >= 641px) and (width <= 720px) {\n max-width: 72vw;\n }\n\n @media (width >= 720px) and (width <= 960px) {\n max-width: 56vw;\n }\n\n @media (width >= 960px) and (width <= 1280px) {\n max-width: 44vw;\n }\n\n @media (width >= 1280px) {\n max-width: 40vw;\n }\n}\n\n.base-size {\n & > :first-child {\n max-height: 84vh;\n }\n\n /* fullScreenBreakpointMap['base'] = 720px (breakpoints.tablet) */\n @media (width <= 720px) {\n margin: 0;\n width: 100%;\n max-width: 100vw;\n max-height: 100vh;\n\n &,\n & > :first-child {\n border-radius: 0;\n height: 100%;\n width: 100%;\n max-height: unset;\n }\n }\n\n @media (width >= 720px) and (width <= 960px) {\n max-width: 88vw;\n }\n\n @media (width >= 960px) and (width <= 1280px) {\n max-width: 72vw;\n }\n\n @media (width >= 1280px) {\n max-width: 52vw;\n }\n}\n\n.lg-size {\n & > :first-child {\n max-height: 96vh;\n }\n\n /* fullScreenBreakpointMap['lg'] = 960px (breakpoints.lgTablet) */\n @media (width <= 960px) {\n margin: 0;\n width: 100%;\n max-width: 100vw;\n max-height: 100vh;\n\n &,\n & > :first-child {\n border-radius: 0;\n height: 100%;\n width: 100%;\n max-height: unset;\n }\n }\n\n @media (width >= 960px) and (width <= 1280px) {\n max-width: 88vw;\n }\n\n @media (width >= 1280px) {\n max-width: 80vw;\n }\n}\n"],"names":[],"mappings":";;;;AAAA,eAAA,CAAA,6vLAAA;AAAA,kBAAA,CAAA,QAAA,CAAA,kBAAA,CAAA,QAAA,CAAA,iBAAA,CAAA,aAAA,CAAA,uBAAA,CAAA,qBAAA,CAAA,+BAAA,CAAA,WAAA,CAAA,qBAAA,CAAA,YAAA,CAAA,sBAAA,CAAA,OAAA,CAAA,iBAAA,CAAA,YAAA,CAAA,sBAAA,CAAA,aAAA,CAAA,uBAAA,CAAA,SAAA,CAAA,oBAAA,CAAA,SAAA,CAAA,oBAAA,CAAA,WAAA,CAAA,sBAAA,CAAA,SAAA,CAAA,oBAAA;;;;"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import insertStyle from '../../_virtual/____insertStyle.js';
|
|
2
2
|
|
|
3
|
-
insertStyle("/* Scroll-lock: prevents body scrolling when modal is open.\n The class persists through AnimatePresence exit animations because\n it's managed by the ScrollLock component mounted inside AnimatePresence. */\nbody.veeqo-modal-open {\n overflow: hidden;\n scrollbar-gutter: stable;\n}\n\n@keyframes
|
|
4
|
-
var modalStyles = {"dialog":"
|
|
3
|
+
insertStyle("/* Scroll-lock: prevents body scrolling when modal is open.\n The class persists through AnimatePresence exit animations because\n it's managed by the ScrollLock component mounted inside AnimatePresence. */\nbody.veeqo-modal-open {\n overflow: hidden;\n scrollbar-gutter: stable;\n}\n\n@keyframes _fadeIn_sccv3_1 {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n}\n._dialog_sccv3_17 {\n padding: 0;\n border: none;\n border-radius: var(--sizes-sm);\n box-shadow: var(--shadows-lg);\n z-index: var(--layers-modal);\n /* Targets Card.Surface: the sole direct child of dialog.\n Wave 3 (Card migration) can update to CSS Module class reference. */\n /* Targets Card.Footer */\n}\n._dialog_sccv3_17::backdrop {\n animation: _fadeIn_sccv3_1 0.25s ease forwards;\n background-color: rgba(55, 66, 77, 0.5);\n width: 100%;\n height: 100%;\n}\n._dialog_sccv3_17 > :first-child {\n display: flex;\n flex-direction: column;\n}\n._dialog_sccv3_17 > :first-child ._mainSection_sccv3_37 {\n padding-bottom: var(--sizes-md);\n}\n._dialog_sccv3_17 > :first-child footer {\n margin-top: 0;\n}\n\n._secondaryAppearance_sccv3_44::backdrop {\n animation: none;\n opacity: 0;\n}\n\n/* ---------- MainSection ---------- */\n._mainSection_sccv3_37 {\n flex: 1;\n overflow-y: auto;\n}\n\n._mainSection_sccv3_37:not(._fullBleed_sccv3_55) {\n padding: 0 var(--sizes-md);\n}\n\n/* Scrollable shadow on Card.Footer when content overflows */\n._mainSection_sccv3_37._scrollable_sccv3_60 + footer {\n box-shadow: 0px 10px 15px 0px var(--colors-neutral-ink-dark);\n}\n\n/* ---------- Modal display mode ---------- */\n._modal_sccv3_65 {\n min-width: 464px;\n /* Critical for framer-motion exit animations: prevents HTML dialog from\n hiding via UA stylesheet when 'open' attribute is removed. */\n}\n._modal_sccv3_65 > :first-child {\n border: none;\n}\n._modal_sccv3_65:not([open]) {\n display: block;\n position: fixed;\n inset: 0;\n transform: translate(-50%, -50%);\n}\n\n/* ---------- Side drawer shared base ---------- */\n._leftDrawer_sccv3_81,\n._rightDrawer_sccv3_82 {\n height: 100%;\n max-height: 100%;\n min-width: 320px;\n width: 400px;\n margin: 0;\n position: fixed;\n transform: none;\n border-radius: 0;\n overflow: visible;\n /* Critical for framer-motion exit animations */\n}\n._leftDrawer_sccv3_81 > :first-child,\n._rightDrawer_sccv3_82 > :first-child {\n border-radius: 0;\n height: 100%;\n}\n._leftDrawer_sccv3_81:not([open]),\n._rightDrawer_sccv3_82:not([open]) {\n display: block;\n}\n\n._leftDrawer_sccv3_81 {\n inset: 0 auto 0 0;\n}\n\n._rightDrawer_sccv3_82 {\n inset: 0 0 0 auto;\n}\n\n/* ---------- Size-specific responsive widths ---------- */\n/* Values hardcoded from constants.ts (heightMap, widthMap, fullScreenBreakpointMap) */\n._xs-size_sccv3_114 {\n /* fullScreenBreakpointMap['xs'] = 640px (breakpoints.mobile) */\n}\n._xs-size_sccv3_114 > :first-child {\n max-height: 84vh;\n}\n@media (width <= 640px) {\n ._xs-size_sccv3_114 {\n margin: 0;\n width: 100%;\n max-width: 100vw;\n max-height: 100vh;\n }\n ._xs-size_sccv3_114, ._xs-size_sccv3_114 > :first-child {\n border-radius: 0;\n height: 100%;\n width: 100%;\n max-height: unset;\n }\n}\n@media (width >= 641px) and (width <= 720px) {\n ._xs-size_sccv3_114 {\n max-width: 60vw;\n }\n}\n@media (width >= 720px) and (width <= 960px) {\n ._xs-size_sccv3_114 {\n max-width: 48vw;\n }\n}\n@media (width >= 960px) and (width <= 1280px) {\n ._xs-size_sccv3_114 {\n max-width: 36vw;\n }\n}\n@media (width >= 1280px) {\n ._xs-size_sccv3_114 {\n max-width: 32vw;\n }\n}\n\n._sm-size_sccv3_155 {\n /* fullScreenBreakpointMap['sm'] = 640px (breakpoints.mobile) */\n}\n._sm-size_sccv3_155 > :first-child {\n max-height: 72vh;\n}\n@media (width <= 640px) {\n ._sm-size_sccv3_155 {\n margin: 0;\n width: 100%;\n max-width: 100vw;\n max-height: 100vh;\n }\n ._sm-size_sccv3_155, ._sm-size_sccv3_155 > :first-child {\n border-radius: 0;\n height: 100%;\n width: 100%;\n max-height: unset;\n }\n}\n@media (width >= 641px) and (width <= 720px) {\n ._sm-size_sccv3_155 {\n max-width: 72vw;\n }\n}\n@media (width >= 720px) and (width <= 960px) {\n ._sm-size_sccv3_155 {\n max-width: 56vw;\n }\n}\n@media (width >= 960px) and (width <= 1280px) {\n ._sm-size_sccv3_155 {\n max-width: 44vw;\n }\n}\n@media (width >= 1280px) {\n ._sm-size_sccv3_155 {\n max-width: 40vw;\n }\n}\n\n._base-size_sccv3_196 {\n /* fullScreenBreakpointMap['base'] = 720px (breakpoints.tablet) */\n}\n._base-size_sccv3_196 > :first-child {\n max-height: 84vh;\n}\n@media (width <= 720px) {\n ._base-size_sccv3_196 {\n margin: 0;\n width: 100%;\n max-width: 100vw;\n max-height: 100vh;\n }\n ._base-size_sccv3_196, ._base-size_sccv3_196 > :first-child {\n border-radius: 0;\n height: 100%;\n width: 100%;\n max-height: unset;\n }\n}\n@media (width >= 720px) and (width <= 960px) {\n ._base-size_sccv3_196 {\n max-width: 88vw;\n }\n}\n@media (width >= 960px) and (width <= 1280px) {\n ._base-size_sccv3_196 {\n max-width: 72vw;\n }\n}\n@media (width >= 1280px) {\n ._base-size_sccv3_196 {\n max-width: 52vw;\n }\n}\n\n._lg-size_sccv3_232 {\n /* fullScreenBreakpointMap['lg'] = 960px (breakpoints.lgTablet) */\n}\n._lg-size_sccv3_232 > :first-child {\n max-height: 96vh;\n}\n@media (width <= 960px) {\n ._lg-size_sccv3_232 {\n margin: 0;\n width: 100%;\n max-width: 100vw;\n max-height: 100vh;\n }\n ._lg-size_sccv3_232, ._lg-size_sccv3_232 > :first-child {\n border-radius: 0;\n height: 100%;\n width: 100%;\n max-height: unset;\n }\n}\n@media (width >= 960px) and (width <= 1280px) {\n ._lg-size_sccv3_232 {\n max-width: 88vw;\n }\n}\n@media (width >= 1280px) {\n ._lg-size_sccv3_232 {\n max-width: 80vw;\n }\n}");
|
|
4
|
+
var modalStyles = {"dialog":"_dialog_sccv3_17","fadeIn":"_fadeIn_sccv3_1","mainSection":"_mainSection_sccv3_37","secondaryAppearance":"_secondaryAppearance_sccv3_44","fullBleed":"_fullBleed_sccv3_55","scrollable":"_scrollable_sccv3_60","modal":"_modal_sccv3_65","leftDrawer":"_leftDrawer_sccv3_81","rightDrawer":"_rightDrawer_sccv3_82","xs-size":"_xs-size_sccv3_114","sm-size":"_sm-size_sccv3_155","base-size":"_base-size_sccv3_196","lg-size":"_lg-size_sccv3_232"};
|
|
5
5
|
|
|
6
6
|
export { modalStyles as default };
|
|
7
7
|
//# sourceMappingURL=Modal.module.scss.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Modal.module.scss.js","sources":["../../../src/components/Modal/Modal.module.scss"],"sourcesContent":["/* Scroll-lock: prevents body scrolling when modal is open.\n The class persists through AnimatePresence exit animations because\n it's managed by the ScrollLock component mounted inside AnimatePresence. */\n:global(body.veeqo-modal-open) {\n overflow: hidden;\n scrollbar-gutter: stable;\n}\n\n@keyframes fadeIn {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n}\n\n.dialog {\n padding: 0;\n border: none;\n border-radius: var(--sizes-sm);\n box-shadow: var(--shadows-lg);\n z-index: var(--layers-modal);\n\n &::backdrop {\n animation: fadeIn 0.25s ease forwards;\n background-color: rgba(55, 66, 77, 0.5);\n width: 100%;\n height: 100%;\n }\n\n /* Targets Card.Surface: the sole direct child of dialog.\n Wave 3 (Card migration) can update to CSS Module class reference. */\n & > :first-child {\n display: flex;\n flex-direction: column;\n }\n\n & > :first-child .mainSection {\n padding-bottom: var(--sizes-md);\n }\n\n /* Targets Card.Footer */\n & > :first-child footer {\n margin-top: 0;\n }\n}\n\n.secondaryAppearance {\n &::backdrop {\n animation: none;\n opacity: 0;\n }\n}\n\n/* ---------- MainSection ---------- */\n\n.mainSection {\n flex: 1;\n overflow-y: auto;\n}\n\n.mainSection:not(.fullBleed) {\n padding: 0 var(--sizes-md);\n}\n\n/* Scrollable shadow on Card.Footer when content overflows */\n.mainSection.scrollable + footer {\n box-shadow: 0px 10px 15px 0px var(--colors-neutral-ink-dark);\n}\n\n/* ---------- Modal display mode ---------- */\n\n.modal {\n min-width: 464px;\n\n /* Critical for framer-motion exit animations: prevents HTML dialog from\n hiding via UA stylesheet when 'open' attribute is removed. */\n &:not([open]) {\n display: block;\n position: fixed;\n inset: 0;\n transform: translate(-50%, -50%);\n }\n}\n\n/* ---------- Side drawer shared base ---------- */\n\n.leftDrawer,\n.rightDrawer {\n height: 100%;\n max-height: 100%;\n min-width: 320px;\n width: 400px;\n margin: 0;\n position: fixed;\n transform: none;\n border-radius: 0;\n overflow: visible;\n\n & > :first-child {\n border-radius: 0;\n height: 100%;\n }\n\n /* Critical for framer-motion exit animations */\n &:not([open]) {\n display: block;\n }\n}\n\n.leftDrawer {\n inset: 0 auto 0 0;\n}\n\n.rightDrawer {\n inset: 0 0 0 auto;\n}\n\n/* ----------
|
|
1
|
+
{"version":3,"file":"Modal.module.scss.js","sources":["../../../src/components/Modal/Modal.module.scss"],"sourcesContent":["/* Scroll-lock: prevents body scrolling when modal is open.\n The class persists through AnimatePresence exit animations because\n it's managed by the ScrollLock component mounted inside AnimatePresence. */\n:global(body.veeqo-modal-open) {\n overflow: hidden;\n scrollbar-gutter: stable;\n}\n\n@keyframes fadeIn {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n}\n\n.dialog {\n padding: 0;\n border: none;\n border-radius: var(--sizes-sm);\n box-shadow: var(--shadows-lg);\n z-index: var(--layers-modal);\n\n &::backdrop {\n animation: fadeIn 0.25s ease forwards;\n background-color: rgba(55, 66, 77, 0.5);\n width: 100%;\n height: 100%;\n }\n\n /* Targets Card.Surface: the sole direct child of dialog.\n Wave 3 (Card migration) can update to CSS Module class reference. */\n & > :first-child {\n display: flex;\n flex-direction: column;\n }\n\n & > :first-child .mainSection {\n padding-bottom: var(--sizes-md);\n }\n\n /* Targets Card.Footer */\n & > :first-child footer {\n margin-top: 0;\n }\n}\n\n.secondaryAppearance {\n &::backdrop {\n animation: none;\n opacity: 0;\n }\n}\n\n/* ---------- MainSection ---------- */\n\n.mainSection {\n flex: 1;\n overflow-y: auto;\n}\n\n.mainSection:not(.fullBleed) {\n padding: 0 var(--sizes-md);\n}\n\n/* Scrollable shadow on Card.Footer when content overflows */\n.mainSection.scrollable + footer {\n box-shadow: 0px 10px 15px 0px var(--colors-neutral-ink-dark);\n}\n\n/* ---------- Modal display mode ---------- */\n\n.modal {\n min-width: 464px;\n \n & > :first-child {\n border: none;\n }\n\n /* Critical for framer-motion exit animations: prevents HTML dialog from\n hiding via UA stylesheet when 'open' attribute is removed. */\n &:not([open]) {\n display: block;\n position: fixed;\n inset: 0;\n transform: translate(-50%, -50%);\n }\n}\n\n/* ---------- Side drawer shared base ---------- */\n\n.leftDrawer,\n.rightDrawer {\n height: 100%;\n max-height: 100%;\n min-width: 320px;\n width: 400px;\n margin: 0;\n position: fixed;\n transform: none;\n border-radius: 0;\n overflow: visible;\n\n & > :first-child {\n border-radius: 0;\n height: 100%;\n }\n\n /* Critical for framer-motion exit animations */\n &:not([open]) {\n display: block;\n }\n}\n\n.leftDrawer {\n inset: 0 auto 0 0;\n}\n\n.rightDrawer {\n inset: 0 0 0 auto;\n}\n\n/* ---------- Size-specific responsive widths ---------- */\n/* Values hardcoded from constants.ts (heightMap, widthMap, fullScreenBreakpointMap) */\n\n.xs-size {\n & > :first-child {\n max-height: 84vh;\n }\n\n /* fullScreenBreakpointMap['xs'] = 640px (breakpoints.mobile) */\n @media (width <= 640px) {\n margin: 0;\n width: 100%;\n max-width: 100vw;\n max-height: 100vh;\n\n &,\n & > :first-child {\n border-radius: 0;\n height: 100%;\n width: 100%;\n max-height: unset;\n }\n }\n\n @media (width >= 641px) and (width <= 720px) {\n max-width: 60vw;\n }\n\n @media (width >= 720px) and (width <= 960px) {\n max-width: 48vw;\n }\n\n @media (width >= 960px) and (width <= 1280px) {\n max-width: 36vw;\n }\n\n @media (width >= 1280px) {\n max-width: 32vw;\n }\n}\n\n.sm-size {\n & > :first-child {\n max-height: 72vh;\n }\n\n /* fullScreenBreakpointMap['sm'] = 640px (breakpoints.mobile) */\n @media (width <= 640px) {\n margin: 0;\n width: 100%;\n max-width: 100vw;\n max-height: 100vh;\n\n &,\n & > :first-child {\n border-radius: 0;\n height: 100%;\n width: 100%;\n max-height: unset;\n }\n }\n\n @media (width >= 641px) and (width <= 720px) {\n max-width: 72vw;\n }\n\n @media (width >= 720px) and (width <= 960px) {\n max-width: 56vw;\n }\n\n @media (width >= 960px) and (width <= 1280px) {\n max-width: 44vw;\n }\n\n @media (width >= 1280px) {\n max-width: 40vw;\n }\n}\n\n.base-size {\n & > :first-child {\n max-height: 84vh;\n }\n\n /* fullScreenBreakpointMap['base'] = 720px (breakpoints.tablet) */\n @media (width <= 720px) {\n margin: 0;\n width: 100%;\n max-width: 100vw;\n max-height: 100vh;\n\n &,\n & > :first-child {\n border-radius: 0;\n height: 100%;\n width: 100%;\n max-height: unset;\n }\n }\n\n @media (width >= 720px) and (width <= 960px) {\n max-width: 88vw;\n }\n\n @media (width >= 960px) and (width <= 1280px) {\n max-width: 72vw;\n }\n\n @media (width >= 1280px) {\n max-width: 52vw;\n }\n}\n\n.lg-size {\n & > :first-child {\n max-height: 96vh;\n }\n\n /* fullScreenBreakpointMap['lg'] = 960px (breakpoints.lgTablet) */\n @media (width <= 960px) {\n margin: 0;\n width: 100%;\n max-width: 100vw;\n max-height: 100vh;\n\n &,\n & > :first-child {\n border-radius: 0;\n height: 100%;\n width: 100%;\n max-height: unset;\n }\n }\n\n @media (width >= 960px) and (width <= 1280px) {\n max-width: 88vw;\n }\n\n @media (width >= 1280px) {\n max-width: 80vw;\n }\n}\n"],"names":["___$insertStyle"],"mappings":";;AAAAA,WAAA,CAAA,6vLAAA;AAAA,kBAAA,CAAA,QAAA,CAAA,kBAAA,CAAA,QAAA,CAAA,iBAAA,CAAA,aAAA,CAAA,uBAAA,CAAA,qBAAA,CAAA,+BAAA,CAAA,WAAA,CAAA,qBAAA,CAAA,YAAA,CAAA,sBAAA,CAAA,OAAA,CAAA,iBAAA,CAAA,YAAA,CAAA,sBAAA,CAAA,aAAA,CAAA,uBAAA,CAAA,SAAA,CAAA,oBAAA,CAAA,SAAA,CAAA,oBAAA,CAAA,WAAA,CAAA,sBAAA,CAAA,SAAA,CAAA,oBAAA;;;;"}
|
|
@@ -28,7 +28,7 @@ const animations = {
|
|
|
28
28
|
animate: { opacity: 1, y: 0, bounce: 0 },
|
|
29
29
|
},
|
|
30
30
|
};
|
|
31
|
-
const Dialog = React__default.default.forwardRef(({
|
|
31
|
+
const Dialog = React__default.default.forwardRef(({ size, displayMode, appearance, className, children, onClose, ...rest }, ref) => {
|
|
32
32
|
// framer-motion's type definitions for motion.dialog omit the standard
|
|
33
33
|
// HTML dialog onClose handler. Cast through a focused type to pass it
|
|
34
34
|
// safely to the underlying DOM element.
|
|
@@ -36,7 +36,7 @@ const Dialog = React__default.default.forwardRef(({ variant, displayMode, appear
|
|
|
36
36
|
return (React__default.default.createElement(framerMotion.motion.dialog, { ref: ref, className: buildClassnames.buildClassnames([
|
|
37
37
|
Modal_module.dialog,
|
|
38
38
|
Modal_module[displayMode],
|
|
39
|
-
Modal_module[`${
|
|
39
|
+
Modal_module[`${size}-size`],
|
|
40
40
|
appearance === 'secondary' && Modal_module.secondaryAppearance,
|
|
41
41
|
className,
|
|
42
42
|
]), initial: animations[displayMode].initial, animate: animations[displayMode].animate, exit: animations[displayMode].exit, transition: { type: 'tween', duration: 0.25 }, ...closeHandler, ...rest }, children));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Dialog.cjs","sources":["../../../../../src/components/Modal/components/Dialog/Dialog.tsx"],"sourcesContent":["import React from 'react';\nimport { motion } from 'framer-motion';\nimport { ModalAppearance,
|
|
1
|
+
{"version":3,"file":"Dialog.cjs","sources":["../../../../../src/components/Modal/components/Dialog/Dialog.tsx"],"sourcesContent":["import React from 'react';\nimport { motion } from 'framer-motion';\nimport { ModalAppearance, ModalSizes, ModalTypes } from '../../types';\nimport { buildClassnames } from '../../../../utils';\nimport modalStyles from '../../Modal.module.scss';\n\n// Animation configurations\nconst animations = {\n leftDrawer: {\n initial: { opacity: 0, x: -300, bounce: 0 },\n exit: { opacity: 0, x: -300, bounce: 0 },\n animate: { opacity: 1, x: 0, bounce: 0 },\n },\n rightDrawer: {\n initial: { opacity: 0, x: 300, bounce: 0 },\n exit: { opacity: 0, x: 300, bounce: 0 },\n animate: { opacity: 1, x: 0, bounce: 0 },\n },\n modal: {\n initial: { opacity: 0, y: -50, bounce: 0 },\n exit: { opacity: 0, y: -50, bounce: 0 },\n animate: { opacity: 1, y: 0, bounce: 0 },\n },\n};\n\ntype DialogProps = {\n size: ModalSizes;\n displayMode: ModalTypes;\n appearance?: ModalAppearance;\n className?: string;\n children?: React.ReactNode;\n onClose?: () => void;\n onKeyDown?: React.KeyboardEventHandler<HTMLDialogElement>;\n onClick?: React.MouseEventHandler<HTMLDialogElement>;\n style?: React.CSSProperties;\n [key: `data-${string}`]: string | undefined;\n [key: `aria-${string}`]: string | undefined;\n};\n\nexport const Dialog = React.forwardRef<HTMLDialogElement, DialogProps>(\n ({ size, displayMode, appearance, className, children, onClose, ...rest }, ref) => {\n // framer-motion's type definitions for motion.dialog omit the standard\n // HTML dialog onClose handler. Cast through a focused type to pass it\n // safely to the underlying DOM element.\n const closeHandler = { onClose } as Pick<\n React.DialogHTMLAttributes<HTMLDialogElement>,\n 'onClose'\n >;\n\n return (\n <motion.dialog\n ref={ref}\n className={buildClassnames([\n modalStyles.dialog,\n modalStyles[displayMode],\n modalStyles[`${size}-size`],\n appearance === 'secondary' && modalStyles.secondaryAppearance,\n className,\n ])}\n initial={animations[displayMode].initial}\n animate={animations[displayMode].animate}\n exit={animations[displayMode].exit}\n transition={{ type: 'tween', duration: 0.25 }}\n {...closeHandler}\n {...rest}\n >\n {children}\n </motion.dialog>\n );\n },\n);\n"],"names":["React","motion","buildClassnames","modalStyles"],"mappings":";;;;;;;;;;;;AAMA;AACA,MAAM,UAAU,GAAG;AACjB,IAAA,UAAU,EAAE;AACV,QAAA,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC,EAAE;AAC3C,QAAA,IAAI,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC,EAAE;AACxC,QAAA,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE;AACzC,KAAA;AACD,IAAA,WAAW,EAAE;AACX,QAAA,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,EAAE,MAAM,EAAE,CAAC,EAAE;AAC1C,QAAA,IAAI,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,EAAE,MAAM,EAAE,CAAC,EAAE;AACvC,QAAA,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE;AACzC,KAAA;AACD,IAAA,KAAK,EAAE;AACL,QAAA,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,EAAE,MAAM,EAAE,CAAC,EAAE;AAC1C,QAAA,IAAI,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,EAAE,MAAM,EAAE,CAAC,EAAE;AACvC,QAAA,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE;AACzC,KAAA;CACF;AAgBM,MAAM,MAAM,GAAGA,sBAAK,CAAC,UAAU,CACpC,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,UAAU,EAAE,SAAS,EAAE,QAAQ,EAAE,OAAO,EAAE,GAAG,IAAI,EAAE,EAAE,GAAG,KAAI;;;;AAIhF,IAAA,MAAM,YAAY,GAAG,EAAE,OAAO,EAG7B;AAED,IAAA,QACEA,sBAAA,CAAA,aAAA,CAACC,mBAAM,CAAC,MAAM,EAAA,EACZ,GAAG,EAAE,GAAG,EACR,SAAS,EAAEC,+BAAe,CAAC;AACzB,YAAAC,YAAW,CAAC,MAAM;YAClBA,YAAW,CAAC,WAAW,CAAC;AACxB,YAAAA,YAAW,CAAC,CAAA,EAAG,IAAI,CAAA,KAAA,CAAO,CAAC;AAC3B,YAAA,UAAU,KAAK,WAAW,IAAIA,YAAW,CAAC,mBAAmB;YAC7D,SAAS;SACV,CAAC,EACF,OAAO,EAAE,UAAU,CAAC,WAAW,CAAC,CAAC,OAAO,EACxC,OAAO,EAAE,UAAU,CAAC,WAAW,CAAC,CAAC,OAAO,EACxC,IAAI,EAAE,UAAU,CAAC,WAAW,CAAC,CAAC,IAAI,EAClC,UAAU,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,KACzC,YAAY,EAAA,GACZ,IAAI,EAAA,EAEP,QAAQ,CACK;AAEpB,CAAC;;;;"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { ModalAppearance,
|
|
2
|
+
import { ModalAppearance, ModalSizes, ModalTypes } from '../../types';
|
|
3
3
|
type DialogProps = {
|
|
4
|
-
|
|
4
|
+
size: ModalSizes;
|
|
5
5
|
displayMode: ModalTypes;
|
|
6
6
|
appearance?: ModalAppearance;
|
|
7
7
|
className?: string;
|
|
@@ -22,7 +22,7 @@ const animations = {
|
|
|
22
22
|
animate: { opacity: 1, y: 0, bounce: 0 },
|
|
23
23
|
},
|
|
24
24
|
};
|
|
25
|
-
const Dialog = React__default.forwardRef(({
|
|
25
|
+
const Dialog = React__default.forwardRef(({ size, displayMode, appearance, className, children, onClose, ...rest }, ref) => {
|
|
26
26
|
// framer-motion's type definitions for motion.dialog omit the standard
|
|
27
27
|
// HTML dialog onClose handler. Cast through a focused type to pass it
|
|
28
28
|
// safely to the underlying DOM element.
|
|
@@ -30,7 +30,7 @@ const Dialog = React__default.forwardRef(({ variant, displayMode, appearance, cl
|
|
|
30
30
|
return (React__default.createElement(motion.dialog, { ref: ref, className: buildClassnames([
|
|
31
31
|
modalStyles.dialog,
|
|
32
32
|
modalStyles[displayMode],
|
|
33
|
-
modalStyles[`${
|
|
33
|
+
modalStyles[`${size}-size`],
|
|
34
34
|
appearance === 'secondary' && modalStyles.secondaryAppearance,
|
|
35
35
|
className,
|
|
36
36
|
]), initial: animations[displayMode].initial, animate: animations[displayMode].animate, exit: animations[displayMode].exit, transition: { type: 'tween', duration: 0.25 }, ...closeHandler, ...rest }, children));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Dialog.js","sources":["../../../../../src/components/Modal/components/Dialog/Dialog.tsx"],"sourcesContent":["import React from 'react';\nimport { motion } from 'framer-motion';\nimport { ModalAppearance,
|
|
1
|
+
{"version":3,"file":"Dialog.js","sources":["../../../../../src/components/Modal/components/Dialog/Dialog.tsx"],"sourcesContent":["import React from 'react';\nimport { motion } from 'framer-motion';\nimport { ModalAppearance, ModalSizes, ModalTypes } from '../../types';\nimport { buildClassnames } from '../../../../utils';\nimport modalStyles from '../../Modal.module.scss';\n\n// Animation configurations\nconst animations = {\n leftDrawer: {\n initial: { opacity: 0, x: -300, bounce: 0 },\n exit: { opacity: 0, x: -300, bounce: 0 },\n animate: { opacity: 1, x: 0, bounce: 0 },\n },\n rightDrawer: {\n initial: { opacity: 0, x: 300, bounce: 0 },\n exit: { opacity: 0, x: 300, bounce: 0 },\n animate: { opacity: 1, x: 0, bounce: 0 },\n },\n modal: {\n initial: { opacity: 0, y: -50, bounce: 0 },\n exit: { opacity: 0, y: -50, bounce: 0 },\n animate: { opacity: 1, y: 0, bounce: 0 },\n },\n};\n\ntype DialogProps = {\n size: ModalSizes;\n displayMode: ModalTypes;\n appearance?: ModalAppearance;\n className?: string;\n children?: React.ReactNode;\n onClose?: () => void;\n onKeyDown?: React.KeyboardEventHandler<HTMLDialogElement>;\n onClick?: React.MouseEventHandler<HTMLDialogElement>;\n style?: React.CSSProperties;\n [key: `data-${string}`]: string | undefined;\n [key: `aria-${string}`]: string | undefined;\n};\n\nexport const Dialog = React.forwardRef<HTMLDialogElement, DialogProps>(\n ({ size, displayMode, appearance, className, children, onClose, ...rest }, ref) => {\n // framer-motion's type definitions for motion.dialog omit the standard\n // HTML dialog onClose handler. Cast through a focused type to pass it\n // safely to the underlying DOM element.\n const closeHandler = { onClose } as Pick<\n React.DialogHTMLAttributes<HTMLDialogElement>,\n 'onClose'\n >;\n\n return (\n <motion.dialog\n ref={ref}\n className={buildClassnames([\n modalStyles.dialog,\n modalStyles[displayMode],\n modalStyles[`${size}-size`],\n appearance === 'secondary' && modalStyles.secondaryAppearance,\n className,\n ])}\n initial={animations[displayMode].initial}\n animate={animations[displayMode].animate}\n exit={animations[displayMode].exit}\n transition={{ type: 'tween', duration: 0.25 }}\n {...closeHandler}\n {...rest}\n >\n {children}\n </motion.dialog>\n );\n },\n);\n"],"names":["React"],"mappings":";;;;;;AAMA;AACA,MAAM,UAAU,GAAG;AACjB,IAAA,UAAU,EAAE;AACV,QAAA,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC,EAAE;AAC3C,QAAA,IAAI,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC,EAAE;AACxC,QAAA,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE;AACzC,KAAA;AACD,IAAA,WAAW,EAAE;AACX,QAAA,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,EAAE,MAAM,EAAE,CAAC,EAAE;AAC1C,QAAA,IAAI,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,EAAE,MAAM,EAAE,CAAC,EAAE;AACvC,QAAA,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE;AACzC,KAAA;AACD,IAAA,KAAK,EAAE;AACL,QAAA,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,EAAE,MAAM,EAAE,CAAC,EAAE;AAC1C,QAAA,IAAI,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,EAAE,MAAM,EAAE,CAAC,EAAE;AACvC,QAAA,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE;AACzC,KAAA;CACF;AAgBM,MAAM,MAAM,GAAGA,cAAK,CAAC,UAAU,CACpC,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,UAAU,EAAE,SAAS,EAAE,QAAQ,EAAE,OAAO,EAAE,GAAG,IAAI,EAAE,EAAE,GAAG,KAAI;;;;AAIhF,IAAA,MAAM,YAAY,GAAG,EAAE,OAAO,EAG7B;AAED,IAAA,QACEA,cAAA,CAAA,aAAA,CAAC,MAAM,CAAC,MAAM,EAAA,EACZ,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,eAAe,CAAC;AACzB,YAAA,WAAW,CAAC,MAAM;YAClB,WAAW,CAAC,WAAW,CAAC;AACxB,YAAA,WAAW,CAAC,CAAA,EAAG,IAAI,CAAA,KAAA,CAAO,CAAC;AAC3B,YAAA,UAAU,KAAK,WAAW,IAAI,WAAW,CAAC,mBAAmB;YAC7D,SAAS;SACV,CAAC,EACF,OAAO,EAAE,UAAU,CAAC,WAAW,CAAC,CAAC,OAAO,EACxC,OAAO,EAAE,UAAU,CAAC,WAAW,CAAC,CAAC,OAAO,EACxC,IAAI,EAAE,UAAU,CAAC,WAAW,CAAC,CAAC,IAAI,EAClC,UAAU,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,KACzC,YAAY,EAAA,GACZ,IAAI,EAAA,EAEP,QAAQ,CACK;AAEpB,CAAC;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.cjs","sources":["../../../src/components/Modal/types.ts"],"sourcesContent":["import { CSSProperties, HTMLAttributes } from 'react';\nimport {
|
|
1
|
+
{"version":3,"file":"types.cjs","sources":["../../../src/components/Modal/types.ts"],"sourcesContent":["import { CSSProperties, HTMLAttributes } from 'react';\nimport { ActionProps } from '../Action/types';\n\nexport type ModalSizes = 'xs' | 'sm' | 'base' | 'lg';\nexport type ModalTypes = 'modal' | 'leftDrawer' | 'rightDrawer';\nexport type ModalAppearance = 'primary' | 'secondary';\n\n// Base Modal props shared by all sizes.\ntype BaseModalProps = {\n /** Whether the modal is visible. */\n shouldShow: boolean;\n /** Show the close button in the header. */\n showHeaderCloseButton?: boolean;\n /** Prevent the modal from closing via backdrop click or ESC. */\n preventClose?: boolean;\n /** Remove internal padding from content area. */\n fullBleed?: boolean;\n /** Size of the modal. */\n size?: ModalSizes;\n /** Display type — standard modal or side drawer. */\n displayMode?: ModalTypes;\n /** Custom inline styles applied to the dialog element. */\n style?: CSSProperties;\n /** Handler called when close is triggered. Return `false` to cancel. */\n onClose: () => void | boolean;\n /** Modal body content. */\n children?: React.ReactNode;\n /** Additional CSS class applied to the dialog element. */\n className?: string;\n} & Omit<HTMLAttributes<HTMLDialogElement>, 'onClose'>;\n\n// Optional slot types.\n\ntype WithHeaderSlot = {\n /** Custom ReactNode replacing the default header. */\n headerSlot: React.ReactNode;\n};\n\ntype WithFooterSlot = {\n /** Custom ReactNode replacing the default footer. */\n footerSlot: React.ReactNode;\n};\n\ntype SideDrawType = {\n /** Display mode set to a side drawer direction. */\n displayMode: 'leftDrawer' | 'rightDrawer';\n /** Appearance style (applies to side drawers). */\n appearance?: ModalAppearance;\n};\n\n// Default header and footer options.\n\ntype DefaultHeaderOptions = {\n /** Title text shown in the default header. */\n headerTitle: string;\n /** Subtitle text shown below the header title. */\n headerSubtitle?: string;\n};\n\ntype ModalType = {\n /** Display mode set to standard centered modal. */\n displayMode?: 'modal';\n};\n\nexport type Action = { label: string } & ActionProps<'button'>;\ntype DefaultFooterOptions = {\n /** Action buttons on the left side of the footer. */\n leftActions?: Action[];\n /** Action buttons on the right side of the footer. */\n rightActions?: Action[];\n};\n\n// Either we have a header slot or default header options, same for footer.\ntype HeaderOptions = WithHeaderSlot | DefaultHeaderOptions;\ntype FooterOptions = WithFooterSlot | DefaultFooterOptions;\ntype TypeProps = ModalType | SideDrawType;\n\n// Modal props are shared props + the header and footer options (potentially with slots.)\nexport type ModalProps = BaseModalProps & HeaderOptions & FooterOptions & TypeProps;\n\n/**\n * Type guard to check if a header slot has been passed to the component.\n */\nexport const hasHeaderSlot = (\n props: ModalProps,\n): props is BaseModalProps & WithHeaderSlot & FooterOptions & TypeProps => {\n return !!(props as WithHeaderSlot).headerSlot;\n};\n\n/**\n * Type guard to check if a footer slot has been passed to the component.\n */\nexport const hasFooterSlot = (\n props: ModalProps,\n): props is BaseModalProps & HeaderOptions & WithFooterSlot & TypeProps => {\n return !!(props as WithFooterSlot).footerSlot;\n};\n\n/**\n * Type guard to check if the modal is a sidedraw\n */\nexport const isSideDraw = (\n props: ModalProps,\n): props is BaseModalProps & HeaderOptions & FooterOptions & SideDrawType => {\n return props.displayMode === 'leftDrawer' || props.displayMode === 'rightDrawer';\n};\n"],"names":[],"mappings":";;AAgFA;;AAEG;AACI,MAAM,aAAa,GAAG,CAC3B,KAAiB,KACuD;AACxE,IAAA,OAAO,CAAC,CAAE,KAAwB,CAAC,UAAU;AAC/C;AAEA;;AAEG;AACI,MAAM,aAAa,GAAG,CAC3B,KAAiB,KACuD;AACxE,IAAA,OAAO,CAAC,CAAE,KAAwB,CAAC,UAAU;AAC/C;AAEA;;AAEG;AACI,MAAM,UAAU,GAAG,CACxB,KAAiB,KACyD;IAC1E,OAAO,KAAK,CAAC,WAAW,KAAK,YAAY,IAAI,KAAK,CAAC,WAAW,KAAK,aAAa;AAClF;;;;;;"}
|
|
@@ -1,42 +1,61 @@
|
|
|
1
1
|
import { CSSProperties, HTMLAttributes } from 'react';
|
|
2
|
-
import {
|
|
3
|
-
export type
|
|
2
|
+
import { ActionProps } from '../Action/types';
|
|
3
|
+
export type ModalSizes = 'xs' | 'sm' | 'base' | 'lg';
|
|
4
4
|
export type ModalTypes = 'modal' | 'leftDrawer' | 'rightDrawer';
|
|
5
5
|
export type ModalAppearance = 'primary' | 'secondary';
|
|
6
6
|
type BaseModalProps = {
|
|
7
|
+
/** Whether the modal is visible. */
|
|
7
8
|
shouldShow: boolean;
|
|
9
|
+
/** Show the close button in the header. */
|
|
8
10
|
showHeaderCloseButton?: boolean;
|
|
11
|
+
/** Prevent the modal from closing via backdrop click or ESC. */
|
|
9
12
|
preventClose?: boolean;
|
|
13
|
+
/** Remove internal padding from content area. */
|
|
10
14
|
fullBleed?: boolean;
|
|
11
|
-
|
|
15
|
+
/** Size of the modal. */
|
|
16
|
+
size?: ModalSizes;
|
|
17
|
+
/** Display type — standard modal or side drawer. */
|
|
12
18
|
displayMode?: ModalTypes;
|
|
19
|
+
/** Custom inline styles applied to the dialog element. */
|
|
13
20
|
style?: CSSProperties;
|
|
21
|
+
/** Handler called when close is triggered. Return `false` to cancel. */
|
|
14
22
|
onClose: () => void | boolean;
|
|
23
|
+
/** Modal body content. */
|
|
15
24
|
children?: React.ReactNode;
|
|
25
|
+
/** Additional CSS class applied to the dialog element. */
|
|
16
26
|
className?: string;
|
|
17
27
|
} & Omit<HTMLAttributes<HTMLDialogElement>, 'onClose'>;
|
|
18
28
|
type WithHeaderSlot = {
|
|
29
|
+
/** Custom ReactNode replacing the default header. */
|
|
19
30
|
headerSlot: React.ReactNode;
|
|
20
31
|
};
|
|
21
32
|
type WithFooterSlot = {
|
|
33
|
+
/** Custom ReactNode replacing the default footer. */
|
|
22
34
|
footerSlot: React.ReactNode;
|
|
23
35
|
};
|
|
24
36
|
type SideDrawType = {
|
|
37
|
+
/** Display mode set to a side drawer direction. */
|
|
25
38
|
displayMode: 'leftDrawer' | 'rightDrawer';
|
|
39
|
+
/** Appearance style (applies to side drawers). */
|
|
26
40
|
appearance?: ModalAppearance;
|
|
27
41
|
};
|
|
28
42
|
type DefaultHeaderOptions = {
|
|
43
|
+
/** Title text shown in the default header. */
|
|
29
44
|
headerTitle: string;
|
|
45
|
+
/** Subtitle text shown below the header title. */
|
|
30
46
|
headerSubtitle?: string;
|
|
31
47
|
};
|
|
32
48
|
type ModalType = {
|
|
49
|
+
/** Display mode set to standard centered modal. */
|
|
33
50
|
displayMode?: 'modal';
|
|
34
51
|
};
|
|
35
52
|
export type Action = {
|
|
36
53
|
label: string;
|
|
37
|
-
} &
|
|
54
|
+
} & ActionProps<'button'>;
|
|
38
55
|
type DefaultFooterOptions = {
|
|
56
|
+
/** Action buttons on the left side of the footer. */
|
|
39
57
|
leftActions?: Action[];
|
|
58
|
+
/** Action buttons on the right side of the footer. */
|
|
40
59
|
rightActions?: Action[];
|
|
41
60
|
};
|
|
42
61
|
type HeaderOptions = WithHeaderSlot | DefaultHeaderOptions;
|
|
@@ -47,45 +66,75 @@ export type ModalProps = BaseModalProps & HeaderOptions & FooterOptions & TypePr
|
|
|
47
66
|
* Type guard to check if a header slot has been passed to the component.
|
|
48
67
|
*/
|
|
49
68
|
export declare const hasHeaderSlot: (props: ModalProps) => props is {
|
|
69
|
+
/** Whether the modal is visible. */
|
|
50
70
|
shouldShow: boolean;
|
|
71
|
+
/** Show the close button in the header. */
|
|
51
72
|
showHeaderCloseButton?: boolean | undefined;
|
|
73
|
+
/** Prevent the modal from closing via backdrop click or ESC. */
|
|
52
74
|
preventClose?: boolean | undefined;
|
|
75
|
+
/** Remove internal padding from content area. */
|
|
53
76
|
fullBleed?: boolean | undefined;
|
|
54
|
-
|
|
77
|
+
/** Size of the modal. */
|
|
78
|
+
size?: ModalSizes | undefined;
|
|
79
|
+
/** Display type — standard modal or side drawer. */
|
|
55
80
|
displayMode?: ModalTypes | undefined;
|
|
81
|
+
/** Custom inline styles applied to the dialog element. */
|
|
56
82
|
style?: CSSProperties | undefined;
|
|
83
|
+
/** Handler called when close is triggered. Return `false` to cancel. */
|
|
57
84
|
onClose: () => void | boolean;
|
|
85
|
+
/** Modal body content. */
|
|
58
86
|
children?: React.ReactNode;
|
|
87
|
+
/** Additional CSS class applied to the dialog element. */
|
|
59
88
|
className?: string | undefined;
|
|
60
89
|
} & Omit<HTMLAttributes<HTMLDialogElement>, "onClose"> & WithHeaderSlot & FooterOptions & TypeProps;
|
|
61
90
|
/**
|
|
62
91
|
* Type guard to check if a footer slot has been passed to the component.
|
|
63
92
|
*/
|
|
64
93
|
export declare const hasFooterSlot: (props: ModalProps) => props is {
|
|
94
|
+
/** Whether the modal is visible. */
|
|
65
95
|
shouldShow: boolean;
|
|
96
|
+
/** Show the close button in the header. */
|
|
66
97
|
showHeaderCloseButton?: boolean | undefined;
|
|
98
|
+
/** Prevent the modal from closing via backdrop click or ESC. */
|
|
67
99
|
preventClose?: boolean | undefined;
|
|
100
|
+
/** Remove internal padding from content area. */
|
|
68
101
|
fullBleed?: boolean | undefined;
|
|
69
|
-
|
|
102
|
+
/** Size of the modal. */
|
|
103
|
+
size?: ModalSizes | undefined;
|
|
104
|
+
/** Display type — standard modal or side drawer. */
|
|
70
105
|
displayMode?: ModalTypes | undefined;
|
|
106
|
+
/** Custom inline styles applied to the dialog element. */
|
|
71
107
|
style?: CSSProperties | undefined;
|
|
108
|
+
/** Handler called when close is triggered. Return `false` to cancel. */
|
|
72
109
|
onClose: () => void | boolean;
|
|
110
|
+
/** Modal body content. */
|
|
73
111
|
children?: React.ReactNode;
|
|
112
|
+
/** Additional CSS class applied to the dialog element. */
|
|
74
113
|
className?: string | undefined;
|
|
75
114
|
} & Omit<HTMLAttributes<HTMLDialogElement>, "onClose"> & HeaderOptions & WithFooterSlot & TypeProps;
|
|
76
115
|
/**
|
|
77
116
|
* Type guard to check if the modal is a sidedraw
|
|
78
117
|
*/
|
|
79
118
|
export declare const isSideDraw: (props: ModalProps) => props is {
|
|
119
|
+
/** Whether the modal is visible. */
|
|
80
120
|
shouldShow: boolean;
|
|
121
|
+
/** Show the close button in the header. */
|
|
81
122
|
showHeaderCloseButton?: boolean | undefined;
|
|
123
|
+
/** Prevent the modal from closing via backdrop click or ESC. */
|
|
82
124
|
preventClose?: boolean | undefined;
|
|
125
|
+
/** Remove internal padding from content area. */
|
|
83
126
|
fullBleed?: boolean | undefined;
|
|
84
|
-
|
|
127
|
+
/** Size of the modal. */
|
|
128
|
+
size?: ModalSizes | undefined;
|
|
129
|
+
/** Display type — standard modal or side drawer. */
|
|
85
130
|
displayMode?: ModalTypes | undefined;
|
|
131
|
+
/** Custom inline styles applied to the dialog element. */
|
|
86
132
|
style?: CSSProperties | undefined;
|
|
133
|
+
/** Handler called when close is triggered. Return `false` to cancel. */
|
|
87
134
|
onClose: () => void | boolean;
|
|
135
|
+
/** Modal body content. */
|
|
88
136
|
children?: React.ReactNode;
|
|
137
|
+
/** Additional CSS class applied to the dialog element. */
|
|
89
138
|
className?: string | undefined;
|
|
90
139
|
} & Omit<HTMLAttributes<HTMLDialogElement>, "onClose"> & HeaderOptions & FooterOptions & SideDrawType;
|
|
91
140
|
export {};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.js","sources":["../../../src/components/Modal/types.ts"],"sourcesContent":["import { CSSProperties, HTMLAttributes } from 'react';\nimport {
|
|
1
|
+
{"version":3,"file":"types.js","sources":["../../../src/components/Modal/types.ts"],"sourcesContent":["import { CSSProperties, HTMLAttributes } from 'react';\nimport { ActionProps } from '../Action/types';\n\nexport type ModalSizes = 'xs' | 'sm' | 'base' | 'lg';\nexport type ModalTypes = 'modal' | 'leftDrawer' | 'rightDrawer';\nexport type ModalAppearance = 'primary' | 'secondary';\n\n// Base Modal props shared by all sizes.\ntype BaseModalProps = {\n /** Whether the modal is visible. */\n shouldShow: boolean;\n /** Show the close button in the header. */\n showHeaderCloseButton?: boolean;\n /** Prevent the modal from closing via backdrop click or ESC. */\n preventClose?: boolean;\n /** Remove internal padding from content area. */\n fullBleed?: boolean;\n /** Size of the modal. */\n size?: ModalSizes;\n /** Display type — standard modal or side drawer. */\n displayMode?: ModalTypes;\n /** Custom inline styles applied to the dialog element. */\n style?: CSSProperties;\n /** Handler called when close is triggered. Return `false` to cancel. */\n onClose: () => void | boolean;\n /** Modal body content. */\n children?: React.ReactNode;\n /** Additional CSS class applied to the dialog element. */\n className?: string;\n} & Omit<HTMLAttributes<HTMLDialogElement>, 'onClose'>;\n\n// Optional slot types.\n\ntype WithHeaderSlot = {\n /** Custom ReactNode replacing the default header. */\n headerSlot: React.ReactNode;\n};\n\ntype WithFooterSlot = {\n /** Custom ReactNode replacing the default footer. */\n footerSlot: React.ReactNode;\n};\n\ntype SideDrawType = {\n /** Display mode set to a side drawer direction. */\n displayMode: 'leftDrawer' | 'rightDrawer';\n /** Appearance style (applies to side drawers). */\n appearance?: ModalAppearance;\n};\n\n// Default header and footer options.\n\ntype DefaultHeaderOptions = {\n /** Title text shown in the default header. */\n headerTitle: string;\n /** Subtitle text shown below the header title. */\n headerSubtitle?: string;\n};\n\ntype ModalType = {\n /** Display mode set to standard centered modal. */\n displayMode?: 'modal';\n};\n\nexport type Action = { label: string } & ActionProps<'button'>;\ntype DefaultFooterOptions = {\n /** Action buttons on the left side of the footer. */\n leftActions?: Action[];\n /** Action buttons on the right side of the footer. */\n rightActions?: Action[];\n};\n\n// Either we have a header slot or default header options, same for footer.\ntype HeaderOptions = WithHeaderSlot | DefaultHeaderOptions;\ntype FooterOptions = WithFooterSlot | DefaultFooterOptions;\ntype TypeProps = ModalType | SideDrawType;\n\n// Modal props are shared props + the header and footer options (potentially with slots.)\nexport type ModalProps = BaseModalProps & HeaderOptions & FooterOptions & TypeProps;\n\n/**\n * Type guard to check if a header slot has been passed to the component.\n */\nexport const hasHeaderSlot = (\n props: ModalProps,\n): props is BaseModalProps & WithHeaderSlot & FooterOptions & TypeProps => {\n return !!(props as WithHeaderSlot).headerSlot;\n};\n\n/**\n * Type guard to check if a footer slot has been passed to the component.\n */\nexport const hasFooterSlot = (\n props: ModalProps,\n): props is BaseModalProps & HeaderOptions & WithFooterSlot & TypeProps => {\n return !!(props as WithFooterSlot).footerSlot;\n};\n\n/**\n * Type guard to check if the modal is a sidedraw\n */\nexport const isSideDraw = (\n props: ModalProps,\n): props is BaseModalProps & HeaderOptions & FooterOptions & SideDrawType => {\n return props.displayMode === 'leftDrawer' || props.displayMode === 'rightDrawer';\n};\n"],"names":[],"mappings":"AAgFA;;AAEG;AACI,MAAM,aAAa,GAAG,CAC3B,KAAiB,KACuD;AACxE,IAAA,OAAO,CAAC,CAAE,KAAwB,CAAC,UAAU;AAC/C;AAEA;;AAEG;AACI,MAAM,aAAa,GAAG,CAC3B,KAAiB,KACuD;AACxE,IAAA,OAAO,CAAC,CAAE,KAAwB,CAAC,UAAU;AAC/C;AAEA;;AAEG;AACI,MAAM,UAAU,GAAG,CACxB,KAAiB,KACyD;IAC1E,OAAO,KAAK,CAAC,WAAW,KAAK,YAAY,IAAI,KAAK,CAAC,WAAW,KAAK,aAAa;AAClF;;;;"}
|
|
@@ -40,7 +40,7 @@ export { InputGroup, type InputGroupProps } from './InputGroup';
|
|
|
40
40
|
export { LegacyDataTable } from './LegacyDataTable';
|
|
41
41
|
export { Loader } from './Loader';
|
|
42
42
|
export { LoginWithAmazonButton } from './LoginWithAmazonButton';
|
|
43
|
-
export { Modal, type Action as ModalAction } from './Modal';
|
|
43
|
+
export { Modal, type Action as ModalAction, type ModalProps } from './Modal';
|
|
44
44
|
export { Pagination } from './Pagination';
|
|
45
45
|
export { Popover } from './Popover';
|
|
46
46
|
export { Popup, type PopupProps } from './Popup';
|