reshaped 3.6.0-canary.0 → 3.6.0-canary.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +17 -2
- package/dist/bundle.css +1 -1
- package/dist/bundle.d.ts +1 -1
- package/dist/bundle.js +11 -11
- package/dist/components/Accordion/AccordionControlled.js +1 -1
- package/dist/components/Accordion/AccordionTrigger.js +1 -1
- package/dist/components/ActionBar/ActionBar.js +1 -1
- package/dist/components/Actionable/Actionable.js +1 -1
- package/dist/components/Autocomplete/tests/Autocomplete.stories.js +1 -0
- package/dist/components/Avatar/Avatar.js +1 -1
- package/dist/components/Badge/Badge.js +1 -1
- package/dist/components/Badge/BadgeContainer.js +1 -1
- package/dist/components/Breadcrumbs/Breadcrumbs.js +1 -1
- package/dist/components/Button/Button.js +1 -1
- package/dist/components/Button/ButtonGroup.js +1 -1
- package/dist/components/Calendar/CalendarDate.js +1 -1
- package/dist/components/Card/Card.d.ts +1 -1
- package/dist/components/Card/Card.js +1 -1
- package/dist/components/Card/tests/Card.stories.d.ts +1 -1
- package/dist/components/Card/tests/Card.test.stories.d.ts +1 -1
- package/dist/components/Carousel/Carousel.js +4 -3
- package/dist/components/Carousel/CarouselControl.js +1 -1
- package/dist/components/Checkbox/Checkbox.js +1 -1
- package/dist/components/Checkbox/Checkbox.module.css +1 -1
- package/dist/components/Container/Container.js +1 -1
- package/dist/components/Dismissible/Dismissible.js +1 -1
- package/dist/components/Divider/Divider.js +1 -1
- package/dist/components/DropdownMenu/DropdownMenu.js +1 -1
- package/dist/components/FileUpload/FileUpload.js +1 -1
- package/dist/components/Flyout/FlyoutContent.js +4 -3
- package/dist/components/Flyout/utilities/calculatePosition.d.ts +1 -1
- package/dist/components/Flyout/utilities/calculatePosition.js +1 -1
- package/dist/components/FormControl/FormControl.context.d.ts +0 -2
- package/dist/components/Grid/Grid.js +1 -1
- package/dist/components/Hidden/Hidden.js +1 -1
- package/dist/components/Hotkey/Hotkey.js +1 -1
- package/dist/components/Icon/Icon.js +1 -1
- package/dist/components/Image/Image.js +1 -1
- package/dist/components/Link/Link.js +1 -1
- package/dist/components/Loader/Loader.js +1 -1
- package/dist/components/MenuItem/MenuItem.js +1 -1
- package/dist/components/Modal/Modal.js +1 -1
- package/dist/components/NumberField/NumberFieldControlled.js +1 -1
- package/dist/components/Overlay/Overlay.js +1 -1
- package/dist/components/PinField/PinFieldControlled.js +1 -1
- package/dist/components/Popover/Popover.js +3 -3
- package/dist/components/Popover/Popover.module.css +1 -1
- package/dist/components/Popover/Popover.types.d.ts +1 -0
- package/dist/components/Popover/tests/Popover.stories.d.ts +46 -7
- package/dist/components/Popover/tests/Popover.stories.js +209 -85
- package/dist/components/Progress/Progress.js +1 -1
- package/dist/components/ProgressIndicator/ProgressIndicator.js +1 -1
- package/dist/components/Radio/Radio.js +1 -1
- package/dist/components/Radio/Radio.module.css +1 -1
- package/dist/components/Reshaped/Reshaped.js +1 -1
- package/dist/components/Resizable/Resizable.js +1 -1
- package/dist/components/Scrim/Scrim.js +1 -1
- package/dist/components/ScrollArea/ScrollArea.js +8 -11
- package/dist/components/ScrollArea/ScrollArea.module.css +1 -1
- package/dist/components/ScrollArea/tests/ScrollArea.stories.d.ts +13 -4
- package/dist/components/ScrollArea/tests/ScrollArea.stories.js +129 -30
- package/dist/components/Select/Select.js +1 -1
- package/dist/components/Skeleton/Skeleton.js +1 -1
- package/dist/components/Slider/Slider.types.d.ts +34 -7
- package/dist/components/Slider/SliderControlled.js +32 -20
- package/dist/components/Slider/SliderThumb.js +4 -4
- package/dist/components/Slider/SliderUncontrolled.js +3 -2
- package/dist/components/Slider/tests/Slider.stories.d.ts +38 -8
- package/dist/components/Slider/tests/Slider.stories.js +268 -54
- package/dist/components/Stepper/Stepper.js +1 -1
- package/dist/components/Switch/Switch.js +1 -1
- package/dist/components/Table/Table.js +6 -3
- package/dist/components/Table/Table.module.css +1 -1
- package/dist/components/Tabs/TabsItem.js +1 -1
- package/dist/components/Tabs/TabsList.js +3 -34
- package/dist/components/Tabs/TabsPanel.js +1 -1
- package/dist/components/Text/Text.js +1 -1
- package/dist/components/TextArea/TextArea.js +1 -1
- package/dist/components/TextField/TextField.js +1 -1
- package/dist/components/Theme/Theme.js +1 -1
- package/dist/components/Timeline/Timeline.js +1 -1
- package/dist/components/Toast/ToastContainer.js +1 -1
- package/dist/components/Toast/ToastRegion.js +1 -1
- package/dist/components/View/View.js +1 -1
- package/dist/components/_private/Aligner/Aligner.js +1 -1
- package/dist/components/_private/Expandable/Expandable.js +1 -1
- package/dist/components/_private/HiddenInput/HiddenInput.js +1 -1
- package/dist/hooks/_private/useFadeSide.d.ts +5 -0
- package/dist/hooks/_private/useFadeSide.js +47 -0
- package/dist/index.d.ts +1 -1
- package/dist/index.js +1 -1
- package/dist/styles/align/index.js +1 -1
- package/dist/styles/aspectRatio/index.js +1 -1
- package/dist/styles/bleed/index.js +1 -1
- package/dist/styles/border/index.js +1 -1
- package/dist/styles/height/index.js +1 -1
- package/dist/styles/inset/index.js +1 -1
- package/dist/styles/justify/index.js +1 -1
- package/dist/styles/maxHeight/index.js +1 -1
- package/dist/styles/maxWidth/index.js +1 -1
- package/dist/styles/minHeight/index.js +1 -1
- package/dist/styles/minWidth/index.js +1 -1
- package/dist/styles/padding/index.js +1 -1
- package/dist/styles/position/index.js +1 -1
- package/dist/styles/radius/index.js +1 -1
- package/dist/styles/textAlign/index.js +1 -1
- package/dist/styles/width/index.js +1 -1
- package/dist/utilities/dom/event.d.ts +7 -0
- package/dist/utilities/dom/event.js +11 -0
- package/dist/utilities/dom/index.d.ts +1 -0
- package/dist/utilities/dom/index.js +1 -0
- package/dist/utilities/helpers.d.ts +1 -15
- package/dist/utilities/helpers.js +11 -133
- package/dist/utilities/props.d.ts +13 -0
- package/dist/utilities/props.js +83 -0
- package/package.json +25 -26
- package/dist/components/Popover/tests/Popover.test.stories.d.ts +0 -39
- package/dist/components/Popover/tests/Popover.test.stories.js +0 -167
- package/dist/components/ScrollArea/tests/ScrollArea.test.stories.d.ts +0 -23
- package/dist/components/ScrollArea/tests/ScrollArea.test.stories.js +0 -66
- package/dist/components/Slider/tests/Slider.test.stories.d.ts +0 -38
- package/dist/components/Slider/tests/Slider.test.stories.js +0 -150
@@ -1,7 +1,7 @@
|
|
1
1
|
"use client";
|
2
2
|
import { jsx as _jsx } from "react/jsx-runtime";
|
3
3
|
import React from "react";
|
4
|
-
import { classNames } from "../../utilities/
|
4
|
+
import { classNames } from "../../utilities/props.js";
|
5
5
|
import useElementId from "../../hooks/useElementId.js";
|
6
6
|
import AccordionContext from "./Accordion.context.js";
|
7
7
|
const AccordionControlled = (props) => {
|
@@ -1,7 +1,7 @@
|
|
1
1
|
"use client";
|
2
2
|
import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
3
3
|
import React from "react";
|
4
|
-
import { classNames } from "../../utilities/
|
4
|
+
import { classNames } from "../../utilities/props.js";
|
5
5
|
import Actionable from "../Actionable/index.js";
|
6
6
|
import View from "../View/index.js";
|
7
7
|
import Icon from "../Icon/index.js";
|
@@ -1,5 +1,5 @@
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
2
|
-
import { classNames } from "../../utilities/
|
2
|
+
import { classNames } from "../../utilities/props.js";
|
3
3
|
import View from "../View/index.js";
|
4
4
|
import s from "./ActionBar.module.css";
|
5
5
|
const ActionBar = (props) => {
|
@@ -1,7 +1,7 @@
|
|
1
1
|
"use client";
|
2
2
|
import { jsx as _jsx } from "react/jsx-runtime";
|
3
3
|
import { forwardRef } from "react";
|
4
|
-
import { classNames } from "../../utilities/
|
4
|
+
import { classNames } from "../../utilities/props.js";
|
5
5
|
import * as keys from "../../constants/keys.js";
|
6
6
|
import s from "./Actionable.module.css";
|
7
7
|
const Actionable = forwardRef((props, ref) => {
|
@@ -56,6 +56,7 @@ export const active = {
|
|
56
56
|
expect(args.handleClose).toHaveBeenCalledTimes(1);
|
57
57
|
expect(args.handleClose).toHaveBeenLastCalledWith();
|
58
58
|
});
|
59
|
+
await sleep(500);
|
59
60
|
await userEvent.click(input);
|
60
61
|
await waitFor(() => {
|
61
62
|
expect(args.handleOpen).toHaveBeenCalledTimes(1);
|
@@ -1,5 +1,5 @@
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
2
|
-
import { classNames, responsivePropDependency } from "../../utilities/
|
2
|
+
import { classNames, responsivePropDependency } from "../../utilities/props.js";
|
3
3
|
import getHeightStyles from "../../styles/height/index.js";
|
4
4
|
import Icon from "../Icon/index.js";
|
5
5
|
import View from "../View/index.js";
|
@@ -1,5 +1,5 @@
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
2
|
-
import { classNames } from "../../utilities/
|
2
|
+
import { classNames } from "../../utilities/props.js";
|
3
3
|
import Text from "../Text/index.js";
|
4
4
|
import Icon from "../Icon/index.js";
|
5
5
|
import IconClose from "../../icons/Close.js";
|
@@ -1,5 +1,5 @@
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
2
|
-
import { classNames } from "../../utilities/
|
2
|
+
import { classNames } from "../../utilities/props.js";
|
3
3
|
import s from "./Badge.module.css";
|
4
4
|
const BadgeContainer = (props) => {
|
5
5
|
const { children, position = "top-end", overlap, className, attributes } = props;
|
@@ -1,7 +1,7 @@
|
|
1
1
|
"use client";
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
3
3
|
import React from "react";
|
4
|
-
import { classNames } from "../../utilities/
|
4
|
+
import { classNames } from "../../utilities/props.js";
|
5
5
|
import View from "../View/index.js";
|
6
6
|
import Icon from "../Icon/index.js";
|
7
7
|
import Text from "../Text/index.js";
|
@@ -1,6 +1,6 @@
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
2
2
|
import { forwardRef } from "react";
|
3
|
-
import { classNames, responsiveClassNames, responsivePropDependency } from "../../utilities/
|
3
|
+
import { classNames, responsiveClassNames, responsivePropDependency } from "../../utilities/props.js";
|
4
4
|
import Icon from "../Icon/index.js";
|
5
5
|
import Loader from "../Loader/index.js";
|
6
6
|
import Actionable from "../Actionable/index.js";
|
@@ -1,5 +1,5 @@
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
2
|
-
import { classNames } from "../../utilities/
|
2
|
+
import { classNames } from "../../utilities/props.js";
|
3
3
|
import s from "./Button.module.css";
|
4
4
|
const ButtonGroup = (props) => {
|
5
5
|
const { children, className, attributes } = props;
|
@@ -1,7 +1,7 @@
|
|
1
1
|
"use client";
|
2
2
|
import { jsx as _jsx } from "react/jsx-runtime";
|
3
3
|
import Actionable from "../Actionable/index.js";
|
4
|
-
import { classNames } from "../../utilities/
|
4
|
+
import { classNames } from "../../utilities/props.js";
|
5
5
|
import { getLocalISODate } from "./Calendar.utils.js";
|
6
6
|
import s from "./Calendar.module.css";
|
7
7
|
const CalendarDate = (props) => {
|
@@ -9,7 +9,7 @@ declare const Card: React.ForwardRefExoticComponent<{
|
|
9
9
|
href?: string;
|
10
10
|
as?: keyof React.JSX.IntrinsicElements | undefined;
|
11
11
|
className?: import("../../types/global").ClassName;
|
12
|
-
attributes?: (import("../../types/global").Attributes<keyof React.JSX.IntrinsicElements> & ((import("../../types/global").Attributes<"button"> & Omit<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "form" | "slot" | "style" | "title" | "disabled" | "color" | "children" | "className" | "hidden" | "content" | "ref" | "aria-orientation" | "role" | "suppressHydrationWarning" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "value" | "dir" | "name" | "key" | "type" | "accessKey" | "autoCapitalize" | "autoFocus" | "contentEditable" | "contextMenu" | "draggable" | "enterKeyHint" | "id" | "lang" | "nonce" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "popover" | "popoverTargetAction" | "popoverTarget" | "inert" | "inputMode" | "is" | "exportparts" | "part" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "
|
12
|
+
attributes?: (import("../../types/global").Attributes<keyof React.JSX.IntrinsicElements> & ((import("../../types/global").Attributes<"button"> & Omit<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "form" | "slot" | "style" | "title" | "disabled" | "color" | "children" | "className" | "hidden" | "content" | "ref" | "aria-orientation" | "role" | "suppressHydrationWarning" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "value" | "dir" | "name" | "key" | "type" | "accessKey" | "autoCapitalize" | "autoFocus" | "contentEditable" | "contextMenu" | "draggable" | "enterKeyHint" | "id" | "lang" | "nonce" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "popover" | "popoverTargetAction" | "popoverTarget" | "inert" | "inputMode" | "is" | "exportparts" | "part" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onScrollEnd" | "onScrollEndCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onToggle" | "onBeforeToggle" | "onTransitionCancel" | "onTransitionCancelCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "onTransitionRun" | "onTransitionRunCapture" | "onTransitionStart" | "onTransitionStartCapture"> & {
|
13
13
|
ref?: React.RefObject<HTMLButtonElement | HTMLAnchorElement | null>;
|
14
14
|
}) | undefined)) | undefined;
|
15
15
|
} & Pick<import("../View").ViewProps, "height"> & React.RefAttributes<HTMLElement>>;
|
@@ -1,6 +1,6 @@
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
2
2
|
import { forwardRef } from "react";
|
3
|
-
import { classNames } from "../../utilities/
|
3
|
+
import { classNames } from "../../utilities/props.js";
|
4
4
|
import Actionable from "../Actionable/index.js";
|
5
5
|
import s from "./Card.module.css";
|
6
6
|
import getRadiusStyles from "../../styles/radius/index.js";
|
@@ -11,7 +11,7 @@ declare const _default: {
|
|
11
11
|
href?: string;
|
12
12
|
as?: keyof React.JSX.IntrinsicElements | undefined;
|
13
13
|
className?: import("../../../types/global").ClassName;
|
14
|
-
attributes?: (import("../../../types/global").Attributes<keyof React.JSX.IntrinsicElements> & ((import("../../../types/global").Attributes<"button"> & Omit<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "children" | "ref" | "style" | "form" | "slot" | "title" | "disabled" | "color" | "className" | "hidden" | "content" | "aria-orientation" | "role" | "suppressHydrationWarning" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "value" | "dir" | "name" | "key" | "accessKey" | "autoCapitalize" | "autoFocus" | "contentEditable" | "contextMenu" | "draggable" | "enterKeyHint" | "nonce" | "spellCheck" | "translate" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "popover" | "popoverTargetAction" | "popoverTarget" | "inert" | "inputMode" | "is" | "exportparts" | "part" | "onToggle" | "type" | "id" | "lang" | "tabIndex" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "
|
14
|
+
attributes?: (import("../../../types/global").Attributes<keyof React.JSX.IntrinsicElements> & ((import("../../../types/global").Attributes<"button"> & Omit<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "children" | "ref" | "style" | "form" | "slot" | "title" | "disabled" | "color" | "className" | "hidden" | "content" | "aria-orientation" | "role" | "suppressHydrationWarning" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "value" | "dir" | "name" | "key" | "accessKey" | "autoCapitalize" | "autoFocus" | "contentEditable" | "contextMenu" | "draggable" | "enterKeyHint" | "nonce" | "spellCheck" | "translate" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "popover" | "popoverTargetAction" | "popoverTarget" | "inert" | "inputMode" | "is" | "exportparts" | "part" | "onToggle" | "type" | "id" | "lang" | "tabIndex" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onScrollEnd" | "onScrollEndCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onBeforeToggle" | "onTransitionCancel" | "onTransitionCancelCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "onTransitionRun" | "onTransitionRunCapture" | "onTransitionStart" | "onTransitionStartCapture"> & {
|
15
15
|
ref?: React.RefObject<HTMLButtonElement | HTMLAnchorElement | null>;
|
16
16
|
}) | undefined)) | undefined;
|
17
17
|
} & Pick<import("../../View").ViewProps, "height"> & React.RefAttributes<HTMLElement>>;
|
@@ -13,7 +13,7 @@ declare const _default: {
|
|
13
13
|
href?: string;
|
14
14
|
as?: keyof React.JSX.IntrinsicElements | undefined;
|
15
15
|
className?: import("../../../types/global").ClassName;
|
16
|
-
attributes?: (import("../../../types/global").Attributes<keyof React.JSX.IntrinsicElements> & ((import("../../../types/global").Attributes<"button"> & Omit<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "children" | "ref" | "style" | "form" | "slot" | "title" | "disabled" | "color" | "className" | "hidden" | "content" | "aria-orientation" | "role" | "suppressHydrationWarning" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "value" | "dir" | "name" | "key" | "accessKey" | "autoCapitalize" | "autoFocus" | "contentEditable" | "contextMenu" | "draggable" | "enterKeyHint" | "nonce" | "spellCheck" | "translate" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "popover" | "popoverTargetAction" | "popoverTarget" | "inert" | "inputMode" | "is" | "exportparts" | "part" | "onToggle" | "type" | "id" | "lang" | "tabIndex" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "
|
16
|
+
attributes?: (import("../../../types/global").Attributes<keyof React.JSX.IntrinsicElements> & ((import("../../../types/global").Attributes<"button"> & Omit<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "children" | "ref" | "style" | "form" | "slot" | "title" | "disabled" | "color" | "className" | "hidden" | "content" | "aria-orientation" | "role" | "suppressHydrationWarning" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "value" | "dir" | "name" | "key" | "accessKey" | "autoCapitalize" | "autoFocus" | "contentEditable" | "contextMenu" | "draggable" | "enterKeyHint" | "nonce" | "spellCheck" | "translate" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "popover" | "popoverTargetAction" | "popoverTarget" | "inert" | "inputMode" | "is" | "exportparts" | "part" | "onToggle" | "type" | "id" | "lang" | "tabIndex" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onScrollEnd" | "onScrollEndCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onBeforeToggle" | "onTransitionCancel" | "onTransitionCancelCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "onTransitionRun" | "onTransitionRunCapture" | "onTransitionStart" | "onTransitionStartCapture"> & {
|
17
17
|
ref?: React.RefObject<HTMLButtonElement | HTMLAnchorElement | null>;
|
18
18
|
}) | undefined)) | undefined;
|
19
19
|
} & Pick<import("../../View").ViewProps, "height"> & React.RefAttributes<HTMLElement>>;
|
@@ -1,7 +1,8 @@
|
|
1
1
|
"use client";
|
2
2
|
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
3
3
|
import React from "react";
|
4
|
-
import { classNames, responsiveVariables, responsiveClassNames
|
4
|
+
import { classNames, responsiveVariables, responsiveClassNames } from "../../utilities/props.js";
|
5
|
+
import { rafThrottle } from "../../utilities/helpers.js";
|
5
6
|
import View from "../View/index.js";
|
6
7
|
import useRTL from "../../hooks/useRTL.js";
|
7
8
|
import useIsomorphicLayoutEffect from "../../hooks/useIsomorphicLayoutEffect.js";
|
@@ -29,7 +30,7 @@ const Carousel = (props) => {
|
|
29
30
|
// itemRefs.current[index] = null;
|
30
31
|
// };
|
31
32
|
};
|
32
|
-
const handleScroll =
|
33
|
+
const handleScroll = rafThrottle((event) => {
|
33
34
|
const el = event.target;
|
34
35
|
const firstVisibleIndex = getFirstVisibleIndex();
|
35
36
|
setScrollPosition(el.scrollLeft);
|
@@ -37,7 +38,7 @@ const Carousel = (props) => {
|
|
37
38
|
if (currentIndexRef.current !== firstVisibleIndex)
|
38
39
|
onChange?.({ index: firstVisibleIndex });
|
39
40
|
currentIndexRef.current = firstVisibleIndex;
|
40
|
-
}
|
41
|
+
});
|
41
42
|
const getItemsGap = () => {
|
42
43
|
const style = getComputedStyle(scrollElRef.current);
|
43
44
|
// Safari returns Npx Npx as a value, we need only the first one
|
@@ -1,7 +1,7 @@
|
|
1
1
|
"use client";
|
2
2
|
import { jsx as _jsx } from "react/jsx-runtime";
|
3
3
|
import React from "react";
|
4
|
-
import { classNames } from "../../utilities/
|
4
|
+
import { classNames } from "../../utilities/props.js";
|
5
5
|
import Button from "../Button/index.js";
|
6
6
|
import IconChevronRight from "../../icons/ChevronRight.js";
|
7
7
|
import IconChevronLeft from "../../icons/ChevronLeft.js";
|
@@ -1,7 +1,7 @@
|
|
1
1
|
"use client";
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
3
3
|
import React from "react";
|
4
|
-
import { classNames, responsiveClassNames, responsivePropDependency } from "../../utilities/
|
4
|
+
import { classNames, responsiveClassNames, responsivePropDependency } from "../../utilities/props.js";
|
5
5
|
import useIsomorphicLayoutEffect from "../../hooks/useIsomorphicLayoutEffect.js";
|
6
6
|
import HiddenInput from "../_private/HiddenInput/index.js";
|
7
7
|
import { useFormControl } from "../FormControl/index.js";
|
@@ -1 +1 @@
|
|
1
|
-
|
1
|
+
.root{align-items:center;cursor:pointer;display:inline-flex;gap:var(--rs-checkbox-gap);user-select:none;vertical-align:top;-webkit-tap-highlight-color:transparent}.root:hover .decorator{background:var(--rs-color-background-neutral-faded)}.field{position:relative}.decorator{background:var(--rs-color-background-elevation-base);border:1px solid var(--rs-color-border-neutral);border-radius:var(--rs-radius-small);color:var(--rs-color-on-background-primary);height:var(--rs-checkbox-line-height);transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:background-color,border-color;width:var(--rs-checkbox-line-height)}.decorator:before{background:var(--rs-color-on-background-primary);border-radius:999px;content:"";height:1.5px;left:50%;opacity:0;position:absolute;top:50%;transform:translate(-50%,-50%) scale(0);transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:opacity,transform;width:calc(var(--rs-checkbox-line-height) * .5)}.--size-small{--rs-checkbox-line-height:var(--rs-line-height-caption-1);--rs-checkbox-gap:var(--rs-unit-x1)}.--size-medium{--rs-checkbox-line-height:var(--rs-line-height-body-3);--rs-checkbox-gap:var(--rs-unit-x2)}.--size-large{--rs-checkbox-line-height:var(--rs-line-height-body-2);--rs-checkbox-gap:var(--rs-unit-x2)}.icon{left:50%;opacity:0;position:absolute;top:50%;transform:translate(-50%,-50%) scale(0);transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:opacity,transform}[data-rs-keyboard] .input:focus-visible+.decorator{box-shadow:var(--rs-focus-shadow)}.root.--error .decorator{border-color:var(--rs-color-border-critical)}.input:checked+.decorator,.input:indeterminate+.decorator{background:var(--rs-color-background-primary);border-color:var(--rs-color-background-primary)}.input:checked+.decorator .icon,.input:indeterminate+.decorator:before{opacity:1;transform:translate(-50%,-50%) scale(1)}.root.--disabled{color:var(--rs-color-foreground-disabled);cursor:not-allowed}.root.--disabled .decorator{background:var(--rs-color-background-disabled-faded);border-color:var(--rs-color-border-disabled);color:var(--rs-color-foreground-disabled)}.root.--disabled .input:checked+.decorator,.root.--disabled .input:indeterminate+.decorator{background:var(--rs-color-background-disabled);border-color:transparent}.root.--disabled .input:checked+.decorator:before,.root.--disabled .input:indeterminate+.decorator:before{background-color:var(--rs-color-foreground-disabled)}@media (--rs-viewport-m ){.--size-small--m{--rs-checkbox-line-height:var(--rs-line-height-caption-1);--rs-checkbox-gap:var(--rs-unit-x1)}.--size-medium--m{--rs-checkbox-line-height:var(--rs-line-height-body-3);--rs-checkbox-gap:var(--rs-unit-x2)}.--size-large--m{--rs-checkbox-line-height:var(--rs-line-height-body-2);--rs-checkbox-gap:var(--rs-unit-x2)}}@media (--rs-viewport-l ){.--size-small--l{--rs-checkbox-line-height:var(--rs-line-height-caption-1);--rs-checkbox-gap:var(--rs-unit-x1)}.--size-medium--l{--rs-checkbox-line-height:var(--rs-line-height-body-3);--rs-checkbox-gap:var(--rs-unit-x2)}.--size-large--l{--rs-checkbox-line-height:var(--rs-line-height-body-2);--rs-checkbox-gap:var(--rs-unit-x2)}}@media (--rs-viewport-xl ){.--size-small--xl{--rs-checkbox-line-height:var(--rs-line-height-caption-1);--rs-checkbox-gap:var(--rs-unit-x1)}.--size-medium--xl{--rs-checkbox-line-height:var(--rs-line-height-body-3);--rs-checkbox-gap:var(--rs-unit-x2)}.--size-large--xl{--rs-checkbox-line-height:var(--rs-line-height-body-2);--rs-checkbox-gap:var(--rs-unit-x2)}}
|
@@ -1,5 +1,5 @@
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
2
|
-
import { classNames } from "../../utilities/
|
2
|
+
import { classNames } from "../../utilities/props.js";
|
3
3
|
import View from "../View/index.js";
|
4
4
|
import s from "./Container.module.css";
|
5
5
|
const Container = (props) => {
|
@@ -1,6 +1,6 @@
|
|
1
1
|
"use client";
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
3
|
-
import { classNames } from "../../utilities/
|
3
|
+
import { classNames } from "../../utilities/props.js";
|
4
4
|
import Button from "../Button/index.js";
|
5
5
|
import IconClose from "../../icons/Close.js";
|
6
6
|
import s from "./Dismissible.module.css";
|
@@ -1,5 +1,5 @@
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
2
|
-
import { classNames, responsiveClassNames } from "../../utilities/
|
2
|
+
import { classNames, responsiveClassNames } from "../../utilities/props.js";
|
3
3
|
import Text from "../Text/index.js";
|
4
4
|
import s from "./Divider.module.css";
|
5
5
|
const Divider = (props) => {
|
@@ -8,7 +8,7 @@ import { useFlyoutContext } from "../Flyout/index.js";
|
|
8
8
|
import IconChevronRight from "../../icons/ChevronRight.js";
|
9
9
|
import useHotkeys from "../../hooks/useHotkeys.js";
|
10
10
|
import useRTL from "../../hooks/useRTL.js";
|
11
|
-
import { classNames } from "../../utilities/
|
11
|
+
import { classNames } from "../../utilities/props.js";
|
12
12
|
import * as keys from "../../constants/keys.js";
|
13
13
|
import s from "./DropdownMenu.module.css";
|
14
14
|
const DropdownMenuSubContext = React.createContext(null);
|
@@ -1,6 +1,6 @@
|
|
1
1
|
"use client";
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
3
|
-
import { classNames } from "../../utilities/
|
3
|
+
import { classNames } from "../../utilities/props.js";
|
4
4
|
import View from "../View/index.js";
|
5
5
|
import HiddenVisually from "../HiddenVisually/index.js";
|
6
6
|
import useToggle from "../../hooks/useToggle.js";
|
@@ -1,7 +1,8 @@
|
|
1
1
|
"use client";
|
2
2
|
import { jsx as _jsx } from "react/jsx-runtime";
|
3
3
|
import React from "react";
|
4
|
-
import { classNames
|
4
|
+
import { classNames } from "../../utilities/props.js";
|
5
|
+
import { rafThrottle } from "../../utilities/helpers.js";
|
5
6
|
import useIsomorphicLayoutEffect from "../../hooks/useIsomorphicLayoutEffect.js";
|
6
7
|
import Portal from "../_private/Portal/index.js";
|
7
8
|
import { findClosestPositionContainer, findClosestScrollableContainer } from "../../utilities/dom/index.js";
|
@@ -48,7 +49,7 @@ const FlyoutContent = (props) => {
|
|
48
49
|
return;
|
49
50
|
const triggerEl = triggerElRef?.current;
|
50
51
|
const containerEl = closestScrollableContainer;
|
51
|
-
const handleScroll =
|
52
|
+
const handleScroll = rafThrottle(() => {
|
52
53
|
const triggerBounds = triggerEl?.getBoundingClientRect();
|
53
54
|
const containerBounds = containerEl.getBoundingClientRect();
|
54
55
|
if (triggerBounds &&
|
@@ -61,7 +62,7 @@ const FlyoutContent = (props) => {
|
|
61
62
|
else {
|
62
63
|
flyout.updatePosition({ sync: true });
|
63
64
|
}
|
64
|
-
}
|
65
|
+
});
|
65
66
|
closestScrollableContainer.addEventListener("scroll", handleScroll, { passive: true });
|
66
67
|
return () => closestScrollableContainer.removeEventListener("scroll", handleScroll);
|
67
68
|
}, [closestScrollableContainer, flyout, handleClose, triggerElRef]);
|
@@ -13,7 +13,7 @@ declare const calculatePosition: (args: {
|
|
13
13
|
} & Pick<T.Options, "position" | "rtl" | "width" | "contentGap" | "contentShift">) => {
|
14
14
|
position: T.Position;
|
15
15
|
styles: {
|
16
|
-
width: number | undefined;
|
16
|
+
width: string | number | undefined;
|
17
17
|
left: number | undefined;
|
18
18
|
right: number | undefined;
|
19
19
|
top: number | undefined;
|
@@ -111,7 +111,7 @@ const calculatePosition = (args) => {
|
|
111
111
|
return {
|
112
112
|
position,
|
113
113
|
styles: {
|
114
|
-
width: widthStyle,
|
114
|
+
width: widthStyle ?? width,
|
115
115
|
left: right === null ? 0 : undefined,
|
116
116
|
right: right === null ? undefined : 0,
|
117
117
|
top: bottom === null ? 0 : undefined,
|
@@ -184,8 +184,6 @@ export declare const useFormControl: () => {
|
|
184
184
|
onProgressCapture?: React.ReactEventHandler<HTMLElement> | undefined;
|
185
185
|
onRateChange?: React.ReactEventHandler<HTMLElement> | undefined;
|
186
186
|
onRateChangeCapture?: React.ReactEventHandler<HTMLElement> | undefined;
|
187
|
-
onResize?: React.ReactEventHandler<HTMLElement> | undefined;
|
188
|
-
onResizeCapture?: React.ReactEventHandler<HTMLElement> | undefined;
|
189
187
|
onSeeked?: React.ReactEventHandler<HTMLElement> | undefined;
|
190
188
|
onSeekedCapture?: React.ReactEventHandler<HTMLElement> | undefined;
|
191
189
|
onSeeking?: React.ReactEventHandler<HTMLElement> | undefined;
|
@@ -1,5 +1,5 @@
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
2
|
-
import { classNames, responsiveVariables, responsivePropDependency } from "../../utilities/
|
2
|
+
import { classNames, responsiveVariables, responsivePropDependency } from "../../utilities/props.js";
|
3
3
|
import getAlignStyles from "../../styles/align/index.js";
|
4
4
|
import getJustifyStyles from "../../styles/justify/index.js";
|
5
5
|
import s from "./Grid.module.css";
|
@@ -1,5 +1,5 @@
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
2
|
-
import { classNames, responsiveClassNames } from "../../utilities/
|
2
|
+
import { classNames, responsiveClassNames } from "../../utilities/props.js";
|
3
3
|
import s from "./Hidden.module.css";
|
4
4
|
const Hidden = (props) => {
|
5
5
|
const { as: TagName = "div", children, visibility, hide } = props;
|
@@ -1,6 +1,6 @@
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
2
2
|
import Text from "../Text/index.js";
|
3
|
-
import { classNames } from "../../utilities/
|
3
|
+
import { classNames } from "../../utilities/props.js";
|
4
4
|
import s from "./Hotkey.module.css";
|
5
5
|
const Hotkey = (props) => {
|
6
6
|
const { children, active, className, attributes } = props;
|
@@ -1,6 +1,6 @@
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
2
2
|
import React from "react";
|
3
|
-
import { classNames } from "../../utilities/
|
3
|
+
import { classNames } from "../../utilities/props.js";
|
4
4
|
import getHeightStyles from "../../styles/height/index.js";
|
5
5
|
import s from "./Icon.module.css";
|
6
6
|
const Icon = (props) => {
|
@@ -1,7 +1,7 @@
|
|
1
1
|
"use client";
|
2
2
|
import { jsx as _jsx } from "react/jsx-runtime";
|
3
3
|
import React from "react";
|
4
|
-
import { classNames } from "../../utilities/
|
4
|
+
import { classNames } from "../../utilities/props.js";
|
5
5
|
import s from "./Image.module.css";
|
6
6
|
import getRadiusStyles from "../../styles/radius/index.js";
|
7
7
|
import getWidthStyles from "../../styles/width/index.js";
|
@@ -1,6 +1,6 @@
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
2
2
|
import { forwardRef } from "react";
|
3
|
-
import { classNames } from "../../utilities/
|
3
|
+
import { classNames } from "../../utilities/props.js";
|
4
4
|
import Actionable from "../Actionable/index.js";
|
5
5
|
import Icon from "../Icon/index.js";
|
6
6
|
import s from "./Link.module.css";
|
@@ -1,5 +1,5 @@
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
2
|
-
import { classNames, responsiveClassNames } from "../../utilities/
|
2
|
+
import { classNames, responsiveClassNames } from "../../utilities/props.js";
|
3
3
|
import s from "./Loader.module.css";
|
4
4
|
const Loader = (props) => {
|
5
5
|
const { size = "small", color = "primary", className, attributes } = props;
|
@@ -1,6 +1,6 @@
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
2
2
|
import { forwardRef } from "react";
|
3
|
-
import { classNames, responsiveClassNames, responsivePropDependency } from "../../utilities/
|
3
|
+
import { classNames, responsiveClassNames, responsivePropDependency } from "../../utilities/props.js";
|
4
4
|
import Actionable from "../Actionable/index.js";
|
5
5
|
import Icon from "../Icon/index.js";
|
6
6
|
import View from "../View/index.js";
|
@@ -1,7 +1,7 @@
|
|
1
1
|
"use client";
|
2
2
|
import { jsx as _jsx } from "react/jsx-runtime";
|
3
3
|
import React from "react";
|
4
|
-
import { classNames, responsiveVariables, responsiveClassNames } from "../../utilities/
|
4
|
+
import { classNames, responsiveVariables, responsiveClassNames } from "../../utilities/props.js";
|
5
5
|
import { enableUserSelect, disableUserSelect } from "../../utilities/dom/index.js";
|
6
6
|
import { enableScroll, disableScroll } from "../../utilities/scroll/index.js";
|
7
7
|
import useResponsiveClientValue from "../../hooks/useResponsiveClientValue.js";
|
@@ -13,7 +13,7 @@ import useElementId from "../../hooks/useElementId.js";
|
|
13
13
|
import useHotkeys from "../../hooks/useHotkeys.js";
|
14
14
|
import useHandlerRef from "../../hooks/useHandlerRef.js";
|
15
15
|
import * as keys from "../../constants/keys.js";
|
16
|
-
import { responsiveClassNames, responsivePropDependency } from "../../utilities/
|
16
|
+
import { responsiveClassNames, responsivePropDependency } from "../../utilities/props.js";
|
17
17
|
import s from "./NumberField.module.css";
|
18
18
|
const NumberFieldControlled = (props) => {
|
19
19
|
const { increaseAriaLabel, decreaseAriaLabel, min, max, step = 1, name, value, onChange, size = "medium", ...textFieldProps } = props;
|
@@ -2,7 +2,7 @@
|
|
2
2
|
import { jsx as _jsx } from "react/jsx-runtime";
|
3
3
|
import React from "react";
|
4
4
|
import { onNextFrame } from "../../utilities/animation.js";
|
5
|
-
import { classNames } from "../../utilities/
|
5
|
+
import { classNames } from "../../utilities/props.js";
|
6
6
|
import { TrapFocus } from "../../utilities/a11y/index.js";
|
7
7
|
import useToggle from "../../hooks/useToggle.js";
|
8
8
|
import useIsomorphicLayoutEffect from "../../hooks/useIsomorphicLayoutEffect.js";
|
@@ -1,7 +1,7 @@
|
|
1
1
|
"use client";
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
3
3
|
import React from "react";
|
4
|
-
import { responsivePropDependency } from "../../utilities/
|
4
|
+
import { responsivePropDependency } from "../../utilities/props.js";
|
5
5
|
import View from "../View/index.js";
|
6
6
|
import Text from "../Text/index.js";
|
7
7
|
import useHotkeys from "../../hooks/useHotkeys.js";
|
@@ -1,15 +1,15 @@
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
2
|
-
import { classNames } from "../../utilities/
|
2
|
+
import { classNames } from "../../utilities/props.js";
|
3
3
|
import Flyout, { useFlyoutContext } from "../Flyout/index.js";
|
4
4
|
import Dismissible from "../Dismissible/index.js";
|
5
5
|
import s from "./Popover.module.css";
|
6
6
|
import getPaddingStyles from "../../styles/padding/index.js";
|
7
7
|
const Popover = (props) => {
|
8
|
-
const { width, variant = "elevated", triggerType = "click", position = "bottom", ...flyoutProps } = props;
|
8
|
+
const { width, variant = "elevated", triggerType = "click", position = "bottom", elevation, ...flyoutProps } = props;
|
9
9
|
const padding = props.padding ?? (variant === "headless" ? 0 : 4);
|
10
10
|
const trapFocusMode = props.trapFocusMode || (triggerType === "hover" ? "content-menu" : undefined);
|
11
11
|
const paddingStyles = getPaddingStyles(padding);
|
12
|
-
const contentClassName = classNames(s.content, !!width && s["content--has-width"], variant && s[`content--variant-${variant}`]);
|
12
|
+
const contentClassName = classNames(s.content, !!width && s["content--has-width"], variant && s[`content--variant-${variant}`], elevation && s[`content--elevation-${elevation}`]);
|
13
13
|
return (_jsx(Flyout, { ...flyoutProps, position: position, trapFocusMode: trapFocusMode, triggerType: triggerType, width: width, contentClassName: contentClassName, contentAttributes: { style: { ...paddingStyles?.variables } } }));
|
14
14
|
};
|
15
15
|
const PopoverDismissible = (props) => {
|
@@ -1 +1 @@
|
|
1
|
-
.content{max-width:360px}.content--variant-elevated{background:var(--rs-color-background-elevation-overlay);border:1px solid var(--rs-color-border-neutral-faded);border-radius:var(--rs-radius-medium);box-shadow:var(--rs-shadow-overlay);color:var(--rs-color-foreground-neutral);min-width:220px;overflow:hidden}.content.content--has-width{max-width:none;min-width:0}@media (--rs-viewport-s ){.content{max-width:none}}
|
1
|
+
.content{max-width:360px}.content--variant-elevated{background:var(--rs-color-background-elevation-overlay);border:1px solid var(--rs-color-border-neutral-faded);border-radius:var(--rs-radius-medium);box-shadow:var(--rs-shadow-overlay);color:var(--rs-color-foreground-neutral);min-width:220px;overflow:hidden}.content--variant-elevated.content--elevation-raised{box-shadow:var(--rs-shadow-raised)}.content.content--has-width{max-width:none;min-width:0}@media (--rs-viewport-s ){.content{max-width:none}}
|
@@ -4,6 +4,7 @@ export type Instance = FlyoutInstance;
|
|
4
4
|
export type Props = Pick<FlyoutProps, "id" | "position" | "forcePosition" | "fallbackPositions" | "onOpen" | "onClose" | "width" | "trapFocusMode" | "active" | "defaultActive" | "contentGap" | "contentShift" | "instanceRef" | "triggerType" | "disableHideAnimation" | "disableContentHover" | "disableCloseOnOutsideClick" | "containerRef" | "initialFocusRef" | "originCoordinates"> & {
|
5
5
|
children?: React.ReactNode;
|
6
6
|
padding?: number;
|
7
|
+
elevation?: "raised" | "overlay";
|
7
8
|
/** @deprecated use Flyout utility instead, will be removed in v4 */
|
8
9
|
variant?: "elevated" | "headless";
|
9
10
|
};
|