@drivy/cobalt 1.2.2 → 1.3.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/components/Modal/ModalHeader.js.map +1 -1
- package/components/Modal/MultiStepModal.js +49 -0
- package/components/Modal/MultiStepModal.js.map +1 -0
- package/components/Modal/index.js.map +1 -1
- package/index.js +1 -0
- package/index.js.map +1 -1
- package/package.json +1 -1
- package/types/src/components/Modal/ModalHeader.d.ts +1 -1
- package/types/src/components/Modal/MultiStepModal.d.ts +24 -0
- package/types/src/components/Modal/index.d.ts +2 -1
- package/types/src/index.d.ts +1 -1
- package/utils/getCobaltTailwindcssConfig.js.map +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ModalHeader.js","sources":["../../../src/components/Modal/ModalHeader.tsx"],"sourcesContent":["import React from \"react\"\nimport { Dialog } from \"@ark-ui/react\"\n\nimport { Icon } from \"../Icon\"\n\nconst ModalHeader = ({\n title,\n close,\n}: {\n title?:
|
|
1
|
+
{"version":3,"file":"ModalHeader.js","sources":["../../../src/components/Modal/ModalHeader.tsx"],"sourcesContent":["import React from \"react\"\nimport { Dialog } from \"@ark-ui/react\"\n\nimport { Icon } from \"../Icon\"\n\nconst ModalHeader = ({\n title,\n close,\n}: {\n title?: React.ReactNode\n close?: () => void\n}) => {\n if (!title && !close) return null\n\n return (\n <div className=\"cobalt-modal-header\">\n <Dialog.Title className=\"cobalt-modal-header__title\">\n {title}\n </Dialog.Title>\n {close && (\n <Dialog.CloseTrigger className=\"cobalt-modal-header__close-button\">\n <span aria-hidden>\n <Icon source=\"close\" color=\"subdued\" />\n </span>\n </Dialog.CloseTrigger>\n )}\n </div>\n )\n}\n\nexport default ModalHeader\n"],"names":[],"mappings":";;;;AAKM,MAAA,WAAW,GAAG,CAAC,EACnB,KAAK,EACL,KAAK,GAIN,KAAI;AACH,IAAA,IAAI,CAAC,KAAK,IAAI,CAAC,KAAK;AAAE,QAAA,OAAO,IAAI,CAAA;AAEjC,IAAA,QACE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,qBAAqB,EAAA;QAClC,KAAC,CAAA,aAAA,CAAA,MAAM,CAAC,KAAK,EAAA,EAAC,SAAS,EAAC,4BAA4B,EACjD,EAAA,KAAK,CACO;QACd,KAAK,KACJ,KAAC,CAAA,aAAA,CAAA,MAAM,CAAC,YAAY,EAAA,EAAC,SAAS,EAAC,mCAAmC,EAAA;AAChE,YAAA,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,aAAA,EAAA,IAAA,EAAA;AACE,gBAAA,KAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EAAC,MAAM,EAAC,OAAO,EAAC,KAAK,EAAC,SAAS,GAAG,CAClC,CACa,CACvB,CACG,EACP;AACH;;;;"}
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
import React, { useRef, useState, useEffect } from 'react';
|
|
2
|
+
import cx from 'classnames';
|
|
3
|
+
import Modal from './index.js';
|
|
4
|
+
|
|
5
|
+
const MultiStepModal = ({ stepData = null, close, steps, onHidden, useMidSizeHeight = true, ...modalProps }) => {
|
|
6
|
+
const bodyScrollContentRef = useRef(null);
|
|
7
|
+
const [currentStep, setCurrentStep] = useState(0);
|
|
8
|
+
useEffect(() => {
|
|
9
|
+
var _a, _b;
|
|
10
|
+
(_b = (_a = bodyScrollContentRef.current) === null || _a === void 0 ? void 0 : _a.children.item(currentStep)) === null || _b === void 0 ? void 0 : _b.scrollIntoView({
|
|
11
|
+
behavior: "smooth",
|
|
12
|
+
});
|
|
13
|
+
}, [currentStep]);
|
|
14
|
+
const handleNextStep = () => {
|
|
15
|
+
setCurrentStep(currentStep >= steps.length - 1 ? currentStep : currentStep + 1);
|
|
16
|
+
};
|
|
17
|
+
const handlePreviousStep = () => {
|
|
18
|
+
setCurrentStep(currentStep <= 0 ? 0 : currentStep - 1);
|
|
19
|
+
};
|
|
20
|
+
const onModalClosed = () => {
|
|
21
|
+
onHidden === null || onHidden === void 0 ? void 0 : onHidden(currentStep);
|
|
22
|
+
setCurrentStep(0);
|
|
23
|
+
};
|
|
24
|
+
const navigation = {
|
|
25
|
+
nextStep: handleNextStep,
|
|
26
|
+
previousStep: handlePreviousStep,
|
|
27
|
+
closeModal: close,
|
|
28
|
+
};
|
|
29
|
+
const CurrentStepComponents = steps[currentStep];
|
|
30
|
+
const stepProps = { data: stepData, navigation };
|
|
31
|
+
const minimumScale = useMidSizeHeight
|
|
32
|
+
? "c-opacity-0 c-grid-rows-[0.5fr]"
|
|
33
|
+
: "c-opacity-0 c-grid-rows-[0fr]";
|
|
34
|
+
return (React.createElement(Modal, { ...modalProps, title: React.createElement(CurrentStepComponents.title, { ...stepProps }), close: close, onHidden: onModalClosed },
|
|
35
|
+
React.createElement("div", { className: "c-w-full c-overflow-x-hidden" },
|
|
36
|
+
React.createElement("div", { className: "c-py-sm", ref: bodyScrollContentRef, style: { width: `${steps.length * 100}%` } }, steps.map((StepComponents, index) => {
|
|
37
|
+
return (React.createElement("div", { key: "modal_step_" + index, className: cx("c-inline-grid c-align-top c-transition-all c-duration-500", {
|
|
38
|
+
"c-opacity-100 c-grid-rows-[1fr]": index === currentStep,
|
|
39
|
+
[minimumScale]: index !== currentStep,
|
|
40
|
+
}), style: { width: `${100 / steps.length}%` } },
|
|
41
|
+
React.createElement("div", { className: "c-overflow-hidden" },
|
|
42
|
+
React.createElement(StepComponents.content, { ...stepProps }))));
|
|
43
|
+
}))),
|
|
44
|
+
CurrentStepComponents.footer && (React.createElement(Modal.Footer, null,
|
|
45
|
+
React.createElement(CurrentStepComponents.footer, { ...stepProps })))));
|
|
46
|
+
};
|
|
47
|
+
|
|
48
|
+
export { MultiStepModal as default };
|
|
49
|
+
//# sourceMappingURL=MultiStepModal.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"MultiStepModal.js","sources":["../../../src/components/Modal/MultiStepModal.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from \"react\"\nimport cx from \"classnames\"\nimport Modal, { ModalPropsType } from \".\"\n\ntype StepComponentType<T> = (props: {\n navigation: {\n nextStep: () => void\n previousStep: () => void\n closeModal: () => void\n }\n data: T\n}) => React.ReactNode\n\nexport type ModalStepType<T> = {\n title: StepComponentType<T>\n content: StepComponentType<T>\n footer?: StepComponentType<T>\n}\n\ntype MultiStepsModalProps<T = null> = {\n stepData?: T\n close: () => void\n onHidden?: (currentStepIndex: number) => void\n steps: ModalStepType<T>[]\n useMidSizeHeight?: boolean\n} & Omit<ModalPropsType, \"children\" | \"onHidden\" | \"close\">\n\nconst MultiStepModal = <T,>({\n stepData = null as T,\n close,\n steps,\n onHidden,\n useMidSizeHeight = true,\n ...modalProps\n}: MultiStepsModalProps<T>) => {\n const bodyScrollContentRef = useRef<HTMLDivElement>(null)\n const [currentStep, setCurrentStep] = useState(0)\n\n useEffect(() => {\n bodyScrollContentRef.current?.children.item(currentStep)?.scrollIntoView({\n behavior: \"smooth\",\n })\n }, [currentStep])\n\n const handleNextStep = () => {\n setCurrentStep(\n currentStep >= steps.length - 1 ? currentStep : currentStep + 1\n )\n }\n\n const handlePreviousStep = () => {\n setCurrentStep(currentStep <= 0 ? 0 : currentStep - 1)\n }\n\n const onModalClosed = () => {\n onHidden?.(currentStep)\n setCurrentStep(0)\n }\n\n const navigation = {\n nextStep: handleNextStep,\n previousStep: handlePreviousStep,\n closeModal: close,\n }\n\n const CurrentStepComponents = steps[currentStep]\n const stepProps = { data: stepData, navigation }\n\n const minimumScale = useMidSizeHeight\n ? \"c-opacity-0 c-grid-rows-[0.5fr]\"\n : \"c-opacity-0 c-grid-rows-[0fr]\"\n\n return (\n <Modal\n {...modalProps}\n title={<CurrentStepComponents.title {...stepProps} />}\n close={close}\n onHidden={onModalClosed}\n >\n <div className=\"c-w-full c-overflow-x-hidden\">\n <div\n className=\"c-py-sm\"\n ref={bodyScrollContentRef}\n style={{ width: `${steps.length * 100}%` }}\n >\n {steps.map((StepComponents, index) => {\n return (\n <div\n key={\"modal_step_\" + index}\n className={cx(\n \"c-inline-grid c-align-top c-transition-all c-duration-500\",\n {\n \"c-opacity-100 c-grid-rows-[1fr]\": index === currentStep,\n [minimumScale]: index !== currentStep,\n }\n )}\n style={{ width: `${100 / steps.length}%` }}\n >\n <div className=\"c-overflow-hidden\">\n <StepComponents.content {...stepProps} />\n </div>\n </div>\n )\n })}\n </div>\n </div>\n {CurrentStepComponents.footer && (\n <Modal.Footer>\n <CurrentStepComponents.footer {...stepProps} />\n </Modal.Footer>\n )}\n </Modal>\n )\n}\n\nexport default MultiStepModal\n"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../src/components/Modal/index.tsx"],"sourcesContent":["import React, { isValidElement, useEffect, forwardRef } from \"react\"\nimport { Dialog, Portal } from \"@ark-ui/react\"\nimport cx from \"classnames\"\n\nimport ModalHeader from \"./ModalHeader\"\nimport ModalFooter, { ModalFooterPropsType } from \"./ModalFooter\"\n\nexport type ModalPropsType = {\n /**\n * mandatory for A11y\n */\n [\"aria-label\"]: string\n /**\n * Function called to close the modal, providing it make the modal closeable\n */\n close?: () => void\n /**\n * React.ref of the element to focus first when the modal opens\n */\n initialFocusRef?: React.RefObject<HTMLElement>\n /**\n * State to show or hide the modal/dialog\n */\n isOpen: boolean\n /**\n * Custom css classes to add to the modal\n */\n className?: string\n /**\n * Action to fire if the user try to dismiss when the modal is not closeable\n */\n onDismissAttempt?: () => void\n /**\n * Listener called when the modal has been fully hidden\n */\n onHidden?: () => void\n /**\n * Listener called when the modal begins to show\n */\n onShow?: () => void\n /**\n * Modal title\n */\n title?:
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../src/components/Modal/index.tsx"],"sourcesContent":["import React, { isValidElement, useEffect, forwardRef } from \"react\"\nimport { Dialog, Portal } from \"@ark-ui/react\"\nimport cx from \"classnames\"\n\nimport ModalHeader from \"./ModalHeader\"\nimport ModalFooter, { ModalFooterPropsType } from \"./ModalFooter\"\n\nexport type ModalPropsType = {\n /**\n * mandatory for A11y\n */\n [\"aria-label\"]: string\n /**\n * Function called to close the modal, providing it make the modal closeable\n */\n close?: () => void\n /**\n * React.ref of the element to focus first when the modal opens\n */\n initialFocusRef?: React.RefObject<HTMLElement>\n /**\n * State to show or hide the modal/dialog\n */\n isOpen: boolean\n /**\n * Custom css classes to add to the modal\n */\n className?: string\n /**\n * Action to fire if the user try to dismiss when the modal is not closeable\n */\n onDismissAttempt?: () => void\n /**\n * Listener called when the modal has been fully hidden\n */\n onHidden?: () => void\n /**\n * Listener called when the modal begins to show\n */\n onShow?: () => void\n /**\n * Modal title\n */\n title?: React.ReactNode\n /**\n * Disable/Enable body paddings (enabled by default)\n */\n bodySpacing?: boolean\n /**\n * Disable/Enable hidding overflowing absolute elements (enabled by default)\n */\n overflowHidden?: boolean\n /**\n * Disable enter/leave animation (animation enabled by default)\n */\n skipAnimation?: {\n enter: boolean\n leave: boolean\n }\n /**\n * Disable modal max-width limit\n */\n fullWidth?: boolean\n /**\n * Always take the full height of the screen\n */\n fullHeight?: boolean\n /**\n * Remove the modal from the DOM on hidden (enabled by default)\n */\n unmountOnHidden?: boolean\n /**\n * Modal body content\n */\n children: React.ReactNode\n}\n\n// Only for the API, render nothing, we use ModalFooterInternal internally\nexport const ModalFooterAPI = (_props: ModalFooterPropsType) => null\n\nexport const isModalFooterAPIComponent = (\n component: React.ReactNode\n): component is React.ReactElement<ModalFooterPropsType> =>\n React.isValidElement(component) && component.type === ModalFooterAPI\n\nconst Modal = forwardRef<HTMLDivElement, ModalPropsType>(\n (\n {\n isOpen,\n close,\n className,\n initialFocusRef,\n [\"aria-label\"]: ariaLabel,\n title,\n children,\n overflowHidden = true,\n bodySpacing = true,\n fullWidth,\n fullHeight,\n onHidden,\n onShow,\n skipAnimation,\n onDismissAttempt,\n unmountOnHidden = true,\n }: ModalPropsType,\n ref\n ) => {\n useEffect(() => {\n isOpen && onShow?.()\n }, [onShow, isOpen])\n\n const modalFooter = React.Children.toArray(children).find((c) =>\n isModalFooterAPIComponent(c)\n )\n const hasFooter = isValidElement(modalFooter)\n\n return (\n <Dialog.Root\n aria-label={ariaLabel}\n open={isOpen}\n onOpenChange={(e) => {\n e.open ? onShow?.() : close?.()\n }}\n onExitComplete={onHidden}\n initialFocusEl={initialFocusRef && (() => initialFocusRef.current)}\n onPointerDownOutside={close ? undefined : onDismissAttempt}\n lazyMount\n unmountOnExit={unmountOnHidden}\n >\n <Portal>\n <Dialog.Backdrop\n className={cx(\"cobalt-modal__overlay\", {\n \"cobalt-modal--skipAnimation__enter\": skipAnimation?.enter,\n \"cobalt-modal--skipAnimation__leave\": skipAnimation?.leave,\n })}\n >\n <Dialog.Positioner\n className={cx(\"cobalt-modal\", {\n \"cobalt-modal--overflowHidden\": overflowHidden,\n \"cobalt-modal--fullHeight\": fullHeight,\n \"cobalt-modal--fullWidth\": fullWidth,\n })}\n ref={ref}\n >\n <Dialog.Content\n className={cx(\"cobalt-modal__content\", className, {\n \"cobalt-modal--skipAnimation__enter\": skipAnimation?.enter,\n \"cobalt-modal--skipAnimation__leave\": skipAnimation?.leave,\n })}\n >\n <ModalHeader title={title} close={close} />\n <Dialog.Description className=\"cobalt-modal-body__wrapper\">\n <div\n className={cx(\"cobalt-modal-body\", {\n \"cobalt-modal-body--bodySpacing\": bodySpacing,\n \"cobalt-modal-body--hasFooter\": hasFooter,\n })}\n >\n {children}\n </div>\n {hasFooter && <ModalFooter {...modalFooter.props} />}\n </Dialog.Description>\n </Dialog.Content>\n </Dialog.Positioner>\n </Dialog.Backdrop>\n </Portal>\n </Dialog.Root>\n )\n }\n)\n\nModal.displayName = \"Modal\"\n\nexport default Object.assign(Modal, { Footer: ModalFooterAPI })\n\nexport { default as MultiStepModal, type ModalStepType } from \"./MultiStepModal\"\n"],"names":[],"mappings":"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"}
|
package/index.js
CHANGED
|
@@ -55,6 +55,7 @@ export { default as LayoutStack } from './components/Layout/Components/LayoutSta
|
|
|
55
55
|
export { Fixed, Flexible, FlexibleWithConstraint } from './components/Layout/Surfaces/index.js';
|
|
56
56
|
export { default as useBreakpoint } from './hooks/useBreakpoint.js';
|
|
57
57
|
export { getMonthDaysByWeeks, getWeekDays } from './components/Calendar/utils.js';
|
|
58
|
+
export { default as MultiStepModal } from './components/Modal/MultiStepModal.js';
|
|
58
59
|
export { default as AccountDetailsIcon } from './components/Icon/__generated__/AccountDetailsIcon.js';
|
|
59
60
|
export { default as AddPictureIcon } from './components/Icon/__generated__/AddPictureIcon.js';
|
|
60
61
|
export { default as AirConditioningIcon } from './components/Icon/__generated__/AirConditioningIcon.js';
|
package/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
package/package.json
CHANGED
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { ModalPropsType } from ".";
|
|
3
|
+
type StepComponentType<T> = (props: {
|
|
4
|
+
navigation: {
|
|
5
|
+
nextStep: () => void;
|
|
6
|
+
previousStep: () => void;
|
|
7
|
+
closeModal: () => void;
|
|
8
|
+
};
|
|
9
|
+
data: T;
|
|
10
|
+
}) => React.ReactNode;
|
|
11
|
+
export type ModalStepType<T> = {
|
|
12
|
+
title: StepComponentType<T>;
|
|
13
|
+
content: StepComponentType<T>;
|
|
14
|
+
footer?: StepComponentType<T>;
|
|
15
|
+
};
|
|
16
|
+
type MultiStepsModalProps<T = null> = {
|
|
17
|
+
stepData?: T;
|
|
18
|
+
close: () => void;
|
|
19
|
+
onHidden?: (currentStepIndex: number) => void;
|
|
20
|
+
steps: ModalStepType<T>[];
|
|
21
|
+
useMidSizeHeight?: boolean;
|
|
22
|
+
} & Omit<ModalPropsType, "children" | "onHidden" | "close">;
|
|
23
|
+
declare const MultiStepModal: <T>({ stepData, close, steps, onHidden, useMidSizeHeight, ...modalProps }: MultiStepsModalProps<T>) => React.JSX.Element;
|
|
24
|
+
export default MultiStepModal;
|
|
@@ -36,7 +36,7 @@ export type ModalPropsType = {
|
|
|
36
36
|
/**
|
|
37
37
|
* Modal title
|
|
38
38
|
*/
|
|
39
|
-
title?:
|
|
39
|
+
title?: React.ReactNode;
|
|
40
40
|
/**
|
|
41
41
|
* Disable/Enable body paddings (enabled by default)
|
|
42
42
|
*/
|
|
@@ -75,3 +75,4 @@ declare const _default: React.ForwardRefExoticComponent<ModalPropsType & React.R
|
|
|
75
75
|
Footer: (_props: ModalFooterPropsType) => null;
|
|
76
76
|
};
|
|
77
77
|
export default _default;
|
|
78
|
+
export { default as MultiStepModal, type ModalStepType } from "./MultiStepModal";
|
package/types/src/index.d.ts
CHANGED
|
@@ -16,7 +16,7 @@ export { CalendarDayPicker } from "./components/Calendar/CalendarDayPicker";
|
|
|
16
16
|
export { Card, CardSection } from "./components/Card";
|
|
17
17
|
export * from "./components/Icon";
|
|
18
18
|
export { ContainedIcon } from "./components/ContainedIcon";
|
|
19
|
-
export { default as Modal } from "./components/Modal";
|
|
19
|
+
export { default as Modal, MultiStepModal, type ModalStepType, } from "./components/Modal";
|
|
20
20
|
export { Note } from "./components/Note";
|
|
21
21
|
export { default as PhotoDropzone } from "./components/PhotoDropzone";
|
|
22
22
|
export { default as Pagination } from "./components/Pagination";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"getCobaltTailwindcssConfig.js","sources":["../../utils/getCobaltTailwindcssConfig.js?commonjs-entry"],"sourcesContent":["import { getDefaultExportFromCjs } from \"\u0000commonjsHelpers.js\";\nimport { __require as requireGetCobaltTailwindcssConfig } from \"/Users/
|
|
1
|
+
{"version":3,"file":"getCobaltTailwindcssConfig.js","sources":["../../utils/getCobaltTailwindcssConfig.js?commonjs-entry"],"sourcesContent":["import { getDefaultExportFromCjs } from \"\u0000commonjsHelpers.js\";\nimport { __require as requireGetCobaltTailwindcssConfig } from \"/Users/cedric/Dev/drivy/cobalt/utils/getCobaltTailwindcssConfig.js\";\nvar getCobaltTailwindcssConfigExports = requireGetCobaltTailwindcssConfig();\nexport { getCobaltTailwindcssConfigExports as __moduleExports };\nexport default /*@__PURE__*/getDefaultExportFromCjs(getCobaltTailwindcssConfigExports);"],"names":[],"mappings":";;;AAEA,IAAI,iCAAiC,GAAG,iCAAiC,EAAE,CAAC;AAE5E,iCAAe,aAAa,uBAAuB,CAAC,iCAAiC,CAAC;;;;"}
|