@drivy/cobalt 2.0.0-beta.5 → 2.0.0-beta.7

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.
@@ -8,7 +8,7 @@ const ModalHeader = ({ title, close, }) => {
8
8
  return null;
9
9
  return (React.createElement("div", { className: "cobalt-modal-header" },
10
10
  React.createElement(Dialog.Title, { className: "cobalt-modal-header__title" }, title),
11
- close && (React.createElement(Dialog.CloseTrigger, { className: "cobalt-modal-header__close-button" },
11
+ close && (React.createElement("div", { onClick: close, className: "cobalt-modal-header__close-button" },
12
12
  React.createElement("span", { "aria-hidden": true },
13
13
  React.createElement(CloseIcon, { color: "onSurfaceVariant" }))))));
14
14
  };
@@ -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 { CloseIcon } 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 <CloseIcon color=\"onSurfaceVariant\" />\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;gBACE,KAAC,CAAA,aAAA,CAAA,SAAS,EAAC,EAAA,KAAK,EAAC,kBAAkB,EAAG,CAAA,CACjC,CACa,CACvB,CACG,EACP;AACH;;;;"}
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 { CloseIcon } 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 <div onClick={close} className=\"cobalt-modal-header__close-button\">\n <span aria-hidden>\n <CloseIcon color=\"onSurfaceVariant\" />\n </span>\n </div>\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,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,OAAO,EAAE,KAAK,EAAE,SAAS,EAAC,mCAAmC,EAAA;AAChE,YAAA,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,aAAA,EAAA,IAAA,EAAA;gBACE,KAAC,CAAA,aAAA,CAAA,SAAS,EAAC,EAAA,KAAK,EAAC,kBAAkB,EAAG,CAAA,CACjC,CACH,CACP,CACG,EACP;AACH;;;;"}
@@ -1,14 +1,10 @@
1
- import React, { useRef, useState, useEffect } from 'react';
1
+ import React, { useRef, useState } from 'react';
2
2
  import cx from 'classnames';
3
3
  import Modal from './index.js';
4
4
 
5
5
  const MultiStepModal = ({ stepData = null, close, steps, onHidden, useMidSizeHeight = true, ...modalProps }) => {
6
6
  const bodyScrollContentRef = useRef(null);
7
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
- }, [currentStep]);
12
8
  const handleNextStep = () => {
13
9
  setCurrentStep(currentStep >= steps.length - 1 ? currentStep : currentStep + 1);
14
10
  };
@@ -30,8 +26,11 @@ const MultiStepModal = ({ stepData = null, close, steps, onHidden, useMidSizeHei
30
26
  ? "c-opacity-0 c-grid-rows-[0.5fr]"
31
27
  : "c-opacity-0 c-grid-rows-[0fr]";
32
28
  return (React.createElement(Modal, { ...modalProps, title: React.createElement(CurrentStepComponents.title, { ...stepProps }), close: close, onHidden: onModalClosed },
33
- React.createElement("div", { className: "c-w-full c-overflow-x-hidden c-scroll-smooth" },
34
- React.createElement("div", { className: "c-py-sm", ref: bodyScrollContentRef, style: { width: `${steps.length * 100}%` } }, steps.map((StepComponents, index) => {
29
+ React.createElement("div", { className: "c-w-full c-overflow-hidden" },
30
+ React.createElement("div", { className: "c-py-sm c-transition-transform c-duration-500 c-ease-in-out", ref: bodyScrollContentRef, style: {
31
+ width: `${steps.length * 100}%`,
32
+ transform: `translateX(-${(100 / steps.length) * currentStep}%)`,
33
+ } }, steps.map((StepComponents, index) => {
35
34
  return (React.createElement("div", { key: "modal_step_" + index, className: cx("c-inline-grid c-align-top c-transition-all c-duration-500", {
36
35
  "c-opacity-100 c-grid-rows-[1fr]": index === currentStep,
37
36
  [minimumScale]: index !== currentStep,
@@ -1 +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 }, [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 c-scroll-smooth\">\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
+ {"version":3,"file":"MultiStepModal.js","sources":["../../../src/components/Modal/MultiStepModal.tsx"],"sourcesContent":["import React, { 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 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-hidden\">\n <div\n className=\"c-py-sm c-transition-transform c-duration-500 c-ease-in-out\"\n ref={bodyScrollContentRef}\n style={{\n width: `${steps.length * 100}%`,\n transform: `translateX(-${(100 / steps.length) * currentStep}%)`,\n }}\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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"}
@@ -7,7 +7,7 @@ import ModalFooter from './ModalFooter.js';
7
7
  // Only for the API, render nothing, we use ModalFooterInternal internally
8
8
  const ModalFooterAPI = (_props) => null;
9
9
  const isModalFooterAPIComponent = (component) => React.isValidElement(component) && component.type === ModalFooterAPI;
10
- const Modal = forwardRef(({ isOpen, close, className, initialFocusRef, ["aria-label"]: ariaLabel, title, children, overflowHidden = true, bodySpacing = true, fullWidth, fullHeight, onHidden, onShow, skipAnimation, onDismissAttempt, unmountOnHidden = true, }, ref) => {
10
+ const Modal = forwardRef(({ isOpen, close, className, initialFocusRef, ["aria-label"]: ariaLabel, title, children, overflowHidden = true, bodySpacing = true, fullWidth, fullHeight, onHidden, onShow, skipAnimation, onDismissAttempt, }, ref) => {
11
11
  useEffect(() => {
12
12
  isOpen && (onShow === null || onShow === void 0 ? void 0 : onShow());
13
13
  }, [onShow, isOpen]);
@@ -15,7 +15,9 @@ const Modal = forwardRef(({ isOpen, close, className, initialFocusRef, ["aria-la
15
15
  const hasFooter = isValidElement(modalFooter);
16
16
  return (React.createElement(Dialog.Root, { "aria-label": ariaLabel, open: isOpen, onOpenChange: (e) => {
17
17
  e.open ? onShow === null || onShow === void 0 ? void 0 : onShow() : close === null || close === void 0 ? void 0 : close();
18
- }, onExitComplete: onHidden, initialFocusEl: initialFocusRef && (() => initialFocusRef.current), onPointerDownOutside: close ? undefined : onDismissAttempt, lazyMount: true, unmountOnExit: unmountOnHidden },
18
+ }, onExitComplete: onHidden, initialFocusEl: initialFocusRef && (() => initialFocusRef.current), onPointerDownOutside: close ? undefined : onDismissAttempt, lazyMount: true,
19
+ // For some reason, onHidden can sometimes not be called if we use unmountOnExit
20
+ unmountOnExit: !onHidden },
19
21
  React.createElement(Portal, null,
20
22
  React.createElement(Dialog.Backdrop, { className: cx("cobalt-modal__overlay", {
21
23
  "cobalt-modal--skipAnimation__enter": skipAnimation === null || skipAnimation === void 0 ? void 0 : skipAnimation.enter,
@@ -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?: 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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"}
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 }: 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 // For some reason, onHidden can sometimes not be called if we use unmountOnExit\n unmountOnExit={!onHidden}\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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@drivy/cobalt",
3
- "version": "2.0.0-beta.5",
3
+ "version": "2.0.0-beta.7",
4
4
  "description": "Opinionated design system for Drivy's projects.",
5
5
  "main": "src/index.js",
6
6
  "types": "types/src/index.d.ts",
@@ -19,7 +19,7 @@
19
19
  "url": "https://github.com/TimPetricola"
20
20
  },
21
21
  "dependencies": {
22
- "@ark-ui/react": "5.9.2",
22
+ "@ark-ui/react": "5.14.1",
23
23
  "@juggle/resize-observer": "3.4.0",
24
24
  "@lottiefiles/react-lottie-player": "3.5.4",
25
25
  "@tippyjs/react": "4.2.6",
@@ -46,7 +46,6 @@
46
46
  &[disabled]:focus,
47
47
  &[disabled]:active {
48
48
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgba(0,0,0,0.2)'><polygon points='0,0 100,0 50,50'/></svg>");
49
- background-color: theme("semanticStateColor.interactive.DEFAULT");
50
49
  }
51
50
  }
52
51
  }
@@ -25,6 +25,12 @@
25
25
  }
26
26
  }
27
27
 
28
+ &__Input[disabled] {
29
+ &::placeholder {
30
+ opacity: 0.35;
31
+ }
32
+ }
33
+
28
34
  &__RemainingChars {
29
35
  @apply c-text-onSurfaceVariant;
30
36
 
@@ -31,6 +31,12 @@
31
31
  }
32
32
  }
33
33
 
34
+ &__Input[type][disabled] {
35
+ &::placeholder {
36
+ opacity: 0.35;
37
+ }
38
+ }
39
+
34
40
  &--withIcon {
35
41
  #{ $self }__Input {
36
42
  padding-left: 40px;
@@ -58,7 +58,7 @@
58
58
 
59
59
  &:disabled,
60
60
  &:not(select):read-only {
61
- @apply c-border-outline c-text-onSurfaceVariant c-bg-surfaceContainerVariant;
61
+ @apply c-border-outline c-text-onSurfaceDisabled c-bg-disabled;
62
62
  }
63
63
 
64
64
  &:disabled {
@@ -1,6 +1,6 @@
1
1
  .cobalt- {
2
2
  &Note {
3
- @apply c-text-body-md c-bg-tertiaryContainer c-text-onTertiaryContainer c-p-sm c-rounded-lg;
3
+ @apply c-text-body-md c-bg-surfaceContainerVariant c-text-onSurface c-p-sm c-rounded-lg;
4
4
 
5
5
  display: inline-block;
6
6
 
@@ -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/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;;;;"}
1
+ {"version":3,"file":"getCobaltTailwindcssConfig.js","sources":["../../utils/getCobaltTailwindcssConfig.js?commonjs-entry"],"sourcesContent":["import { getDefaultExportFromCjs } from \"\u0000commonjsHelpers.js\";\nimport { __require as requireGetCobaltTailwindcssConfig } from \"/Users/thibaudesnouf/sources/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;;;;"}