@atom-learning/components 2.36.0 → 2.37.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/CHANGELOG.md +9 -5
- package/dist/components/action-icon/ActionIcon.d.ts +3 -1
- package/dist/components/action-icon/ActionIcon.js +1 -1
- package/dist/components/action-icon/ActionIcon.js.map +1 -1
- package/dist/components/chip-toggle-group/ChipToggleGroupRoot.d.ts +2 -2
- package/dist/components/data-table/drag-and-drop/Handle.d.ts +4 -2
- package/dist/components/data-table/pagination/PaginationButtons.d.ts +0 -8
- package/dist/components/data-table/pagination/PaginationButtons.js +1 -1
- package/dist/components/data-table/pagination/PaginationButtons.js.map +1 -1
- package/dist/components/date-input/DateInput.js +1 -1
- package/dist/components/date-input/DateInput.js.map +1 -1
- package/dist/components/number-input/NumberInputStepper.js +1 -1
- package/dist/components/number-input/NumberInputStepper.js.map +1 -1
- package/dist/components/stepper/Stepper.js +1 -1
- package/dist/docgen.json +1 -1
- package/dist/index.cjs.js +1 -1
- package/dist/index.cjs.js.map +1 -1
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,16 @@
|
|
|
1
|
-
# [2.
|
|
1
|
+
# [2.37.0](https://github.com/Atom-Learning/components/compare/v2.36.0...v2.37.0) (2023-02-24)
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
### Bug Fixes
|
|
5
|
+
|
|
6
|
+
* add side option for tooltip positioning ([c6fc008](https://github.com/Atom-Learning/components/commit/c6fc0085f727447cb43d42486d4ec262fbdb1d70))
|
|
7
|
+
* remaining broken tests ([c699ec9](https://github.com/Atom-Learning/components/commit/c699ec9dc95eb01ecbe131c3d6e7584cb9688309))
|
|
8
|
+
* update tests to have provider ([694c24c](https://github.com/Atom-Learning/components/commit/694c24c1c2fceb3bbc412d987018b947ac9c48b1))
|
|
2
9
|
|
|
3
10
|
|
|
4
11
|
### Features
|
|
5
12
|
|
|
6
|
-
*
|
|
7
|
-
* **data-table:** changing the api for sticky columns ([9d2e5bc](https://github.com/Atom-Learning/components/commit/9d2e5bc50f6f7c19afffc7c65fbf8e38053aa951))
|
|
8
|
-
* **data-table:** fixing shadow added to scroll container ([213465e](https://github.com/Atom-Learning/components/commit/213465e1d6c738dd4dc889e06c6324f1597bd745))
|
|
9
|
-
* **data-table:** moving sticky columns css to the container ([90c0ff2](https://github.com/Atom-Learning/components/commit/90c0ff2f51b63a6774fc8d4ec4b055e4fd7e64cc))
|
|
13
|
+
* add tooltip to ActionIcon ([525c3ee](https://github.com/Atom-Learning/components/commit/525c3ee099ad6b10b4d9744dc89a28352a88d523))
|
|
10
14
|
|
|
11
15
|
# [1.4.0](https://github.com/Atom-Learning/components/compare/v1.3.0...v1.4.0) (2022-04-11)
|
|
12
16
|
|
|
@@ -224,6 +224,8 @@ declare type ActionIconProps = Override<React.ComponentProps<typeof StyledButton
|
|
|
224
224
|
as?: string | React.ReactNode;
|
|
225
225
|
children: React.ReactNode;
|
|
226
226
|
label: string;
|
|
227
|
+
hasTooltip?: boolean;
|
|
228
|
+
tooltipSide?: 'bottom' | 'left' | 'right' | 'top';
|
|
227
229
|
} & NavigatorActions>;
|
|
228
|
-
export declare const ActionIcon: React.ForwardRefExoticComponent<Pick<ActionIconProps, "appearance" | "color" | "translate" | "size" | "css" | "theme" | "onBlur" | "onChange" | "onSubmit" | "form" | "label" | "slot" | "style" | "title" | "key" | "name" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "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-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "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" | "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" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "as" | "disabled" | "value" | "type" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "isRounded" | keyof NavigatorActions> & React.RefAttributes<HTMLButtonElement>>;
|
|
230
|
+
export declare const ActionIcon: React.ForwardRefExoticComponent<Pick<ActionIconProps, "appearance" | "color" | "translate" | "size" | "css" | "theme" | "onBlur" | "onChange" | "onSubmit" | "form" | "label" | "slot" | "style" | "title" | "key" | "name" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "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-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "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" | "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" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "as" | "disabled" | "value" | "type" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "isRounded" | "hasTooltip" | "tooltipSide" | keyof NavigatorActions> & React.RefAttributes<HTMLButtonElement>>;
|
|
229
231
|
export {};
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{darken as
|
|
1
|
+
import{darken as o}from"color2k";import g from"invariant";import*as e from"react";import{styled as v,theme as n}from"../../stitches.js";import{ActionIconSizeMap as M}from"./ActionIcon.constants.js";import{Tooltip as u}from"../tooltip/Tooltip.js";import{Icon as $}from"../icon/Icon.js";const l=(r,a,s)=>({bg:"transparent",color:r,"&:not(:disabled):hover, &:not(:disabled):focus":{color:a},"&:not(:disabled):active":{color:s},"&[disabled]":{color:"$tonal400",cursor:"not-allowed"}}),c=(r,a,s)=>({bg:r,color:"white","&:not(:disabled):hover, &:not(:disabled):focus":{bg:a,color:"white"},"&:not(:disabled):active":{bg:s},"&[disabled]":{bg:"$tonal100",color:"$tonal400",cursor:"not-allowed"}}),p=(r,a,s)=>({border:"1px solid",borderColor:"currentColor",color:r,"&:not(:disabled):hover, &:not(:disabled):focus":{color:a},"&:not(:disabled):active":{color:s},"&[disabled]":{borderColor:"$tonal400",color:"$tonal400",cursor:"not-allowed"}}),C=v("button",{alignItems:"center",appearance:"none",bg:"white",border:"unset",borderRadius:"$0",boxSizing:"border-box",cursor:"pointer",display:"flex",justifyContent:"center",p:"unset",transition:"all 100ms ease-out",variants:{theme:{neutral:{},primary:{},success:{},warning:{},danger:{}},appearance:{simple:{},outline:{},solid:{}},size:{xs:{size:"$2"},sm:{size:"$3"},md:{size:"$4"},lg:{size:"$5"}},isRounded:{true:{borderRadius:"$round"}}},compoundVariants:[{theme:"neutral",appearance:"simple",css:l("$tonal300","$primaryMid","$primaryDark")},{theme:"primary",appearance:"simple",css:l("$primary","$primaryMid","$primaryDark")},{theme:"primaryDark",appearance:"simple",css:l("$primaryDark",o(n.colors.primaryDark.value,.1),o(n.colors.primaryDark.value,.15))},{theme:"success",appearance:"simple",css:l("$success","$successMid","$successDark")},{theme:"warning",appearance:"simple",css:l("$warning","$warningMid","$warningDark")},{theme:"danger",appearance:"simple",css:l("$danger","$dangerMid","$dangerDark")},{theme:"primary",appearance:"solid",css:c("$primary","$primaryMid","$primaryDark")},{theme:"primaryDark",appearance:"solid",css:c("$primaryDark",o(n.colors.primaryDark.value,.1),o(n.colors.primaryDark.value,.15))},{theme:"success",appearance:"solid",css:c("$success","$successMid","$successDark")},{theme:"warning",appearance:"solid",css:c("$warning","$warningMid","$warningDark")},{theme:"danger",appearance:"solid",css:c("$danger","$dangerMid","$dangerDark")},{theme:"primary",appearance:"outline",css:p("$primary","$primaryMid","$primaryDark")},{theme:"primaryDark",appearance:"outline",css:p("$primaryDark",o(n.colors.primaryDark.value,.1),o(n.colors.primaryDark.value,.15))},{theme:"success",appearance:"outline",css:p("$success","$successMid","$successDark")},{theme:"warning",appearance:"outline",css:p("$warning","$warningMid","$warningDark")},{theme:"danger",appearance:"outline",css:p("$danger","$dangerMid","$dangerDark")}]}),z=({hasTooltip:r,label:a,tooltipSide:s,children:t})=>r?e.createElement(u,null,e.createElement(u.Trigger,{asChild:!0},t),e.createElement(u.Content,{side:s},a)):e.createElement("span",null,t),d=e.forwardRef(({children:r,theme:a="primary",appearance:s="simple",size:t="sm",label:y,href:h,disabled:m,hasTooltip:k=!0,tooltipSide:D,...w},f)=>{const b=`A single ${$.displayName} component is permitted as a child of ${d.displayName}`;return g(e.Children.count(r)===1,b),e.createElement(z,{hasTooltip:k,label:y,tooltipSide:D},e.createElement(C,{...w,...h?{as:"a",href:m?null:h,onClick:void 0,"aria-disabled":!!m}:{type:"button"},"aria-label":y,theme:a,appearance:s,size:t,ref:f,disabled:m},e.Children.map(r,i=>{if(!e.isValidElement(i))throw new Error(b);return g(i.type===$,`Children of type ${i==null?void 0:i.type} aren't permitted. Only an ${$.displayName} component is allowed in ${d.displayName}`),e.cloneElement(i,{size:M[t],css:{...i.props.css?i.props.css:{}}})})))});d.displayName="ActionIcon";export{d as ActionIcon};
|
|
2
2
|
//# sourceMappingURL=ActionIcon.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ActionIcon.js","sources":["../../../src/components/action-icon/ActionIcon.tsx"],"sourcesContent":["import type { VariantProps } from '@stitches/react'\nimport { darken } from 'color2k'\nimport invariant from 'invariant'\nimport * as React from 'react'\n\nimport { styled, theme } from '~/stitches'\nimport { NavigatorActions } from '~/types'\nimport { Override } from '~/utilities'\nimport { ActionIconSizeMap } from './ActionIcon.constants'\n\nimport { Icon } from '../icon/Icon'\n\nconst getSimpleVariant = (base: string, interact: string, active: string) => ({\n bg: 'transparent',\n color: base,\n '&:not(:disabled):hover, &:not(:disabled):focus': {\n color: interact\n },\n '&:not(:disabled):active': {\n color: active\n },\n '&[disabled]': {\n color: '$tonal400',\n cursor: 'not-allowed'\n }\n})\nconst getSolidVariant = (base: string, interact: string, active: string) => ({\n bg: base,\n color: 'white',\n '&:not(:disabled):hover, &:not(:disabled):focus': {\n bg: interact,\n color: 'white'\n },\n '&:not(:disabled):active': {\n bg: active\n },\n '&[disabled]': {\n bg: '$tonal100',\n color: '$tonal400',\n cursor: 'not-allowed'\n }\n})\nconst getOutlineVariant = (base: string, interact: string, active: string) => ({\n border: '1px solid',\n borderColor: 'currentColor',\n color: base,\n '&:not(:disabled):hover, &:not(:disabled):focus': {\n color: interact\n },\n '&:not(:disabled):active': {\n color: active\n },\n '&[disabled]': {\n borderColor: '$tonal400',\n color: '$tonal400',\n cursor: 'not-allowed'\n }\n})\n\nconst StyledButton = styled('button', {\n alignItems: 'center',\n appearance: 'none',\n bg: 'white',\n border: 'unset',\n borderRadius: '$0',\n boxSizing: 'border-box',\n cursor: 'pointer',\n display: 'flex',\n justifyContent: 'center',\n p: 'unset',\n transition: 'all 100ms ease-out',\n variants: {\n theme: {\n neutral: {},\n primary: {},\n success: {},\n warning: {},\n danger: {}\n },\n appearance: {\n simple: {},\n outline: {},\n solid: {}\n },\n size: {\n xs: { size: '$2' },\n sm: { size: '$3' },\n md: { size: '$4' },\n lg: { size: '$5' }\n },\n isRounded: {\n true: {\n borderRadius: '$round'\n }\n }\n },\n compoundVariants: [\n // Appearance Simple\n {\n theme: 'neutral',\n appearance: 'simple',\n css: getSimpleVariant('$tonal300', '$primaryMid', '$primaryDark')\n },\n {\n theme: 'primary',\n appearance: 'simple',\n css: getSimpleVariant('$primary', '$primaryMid', '$primaryDark')\n },\n {\n theme: 'primaryDark',\n appearance: 'simple',\n css: getSimpleVariant(\n '$primaryDark',\n darken(theme.colors.primaryDark.value, 0.1),\n darken(theme.colors.primaryDark.value, 0.15)\n )\n },\n {\n theme: 'success',\n appearance: 'simple',\n css: getSimpleVariant('$success', '$successMid', '$successDark')\n },\n {\n theme: 'warning',\n appearance: 'simple',\n css: getSimpleVariant('$warning', '$warningMid', '$warningDark')\n },\n {\n theme: 'danger',\n appearance: 'simple',\n css: getSimpleVariant('$danger', '$dangerMid', '$dangerDark')\n },\n\n // Appearance Solid\n {\n theme: 'primary',\n appearance: 'solid',\n css: getSolidVariant('$primary', '$primaryMid', '$primaryDark')\n },\n {\n theme: 'primaryDark',\n appearance: 'solid',\n css: getSolidVariant(\n '$primaryDark',\n darken(theme.colors.primaryDark.value, 0.1),\n darken(theme.colors.primaryDark.value, 0.15)\n )\n },\n {\n theme: 'success',\n appearance: 'solid',\n css: getSolidVariant('$success', '$successMid', '$successDark')\n },\n {\n theme: 'warning',\n appearance: 'solid',\n css: getSolidVariant('$warning', '$warningMid', '$warningDark')\n },\n {\n theme: 'danger',\n appearance: 'solid',\n css: getSolidVariant('$danger', '$dangerMid', '$dangerDark')\n },\n\n // Appearance Outline\n {\n theme: 'primary',\n appearance: 'outline',\n css: getOutlineVariant('$primary', '$primaryMid', '$primaryDark')\n },\n {\n theme: 'primaryDark',\n appearance: 'outline',\n css: getOutlineVariant(\n '$primaryDark',\n darken(theme.colors.primaryDark.value, 0.1),\n darken(theme.colors.primaryDark.value, 0.15)\n )\n },\n {\n theme: 'success',\n appearance: 'outline',\n css: getOutlineVariant('$success', '$successMid', '$successDark')\n },\n {\n theme: 'warning',\n appearance: 'outline',\n css: getOutlineVariant('$warning', '$warningMid', '$warningDark')\n },\n {\n theme: 'danger',\n appearance: 'outline',\n css: getOutlineVariant('$danger', '$dangerMid', '$dangerDark')\n }\n ]\n})\n\ntype ActionIconProps = Override<\n React.ComponentProps<typeof StyledButton>,\n VariantProps<typeof StyledButton> & {\n as?: string | React.ReactNode\n children: React.ReactNode\n label: string\n } & NavigatorActions\n>\n\nexport const ActionIcon = React.forwardRef<HTMLButtonElement, ActionIconProps>(\n (\n {\n children,\n theme = 'primary',\n appearance = 'simple',\n size = 'sm',\n label,\n href,\n disabled,\n ...remainingProps\n },\n ref\n ) => {\n const INVALID_CHILDREN_MESSAGE = `A single ${Icon.displayName} component is permitted as a child of ${ActionIcon.displayName}`\n\n invariant(React.Children.count(children) === 1, INVALID_CHILDREN_MESSAGE)\n\n const optionalLinkProps = href\n ? ({\n as: 'a',\n href: disabled ? null : href,\n onClick: undefined,\n 'aria-disabled': !!disabled\n } as const)\n : ({ type: 'button' } as const)\n\n return (\n <StyledButton\n {...remainingProps}\n {...optionalLinkProps}\n aria-label={label}\n theme={theme}\n appearance={appearance}\n size={size}\n ref={ref}\n disabled={disabled}\n >\n {React.Children.map(children, (child) => {\n // TS needs this check for any following code to access child.type\n // even with optional chaining\n if (!React.isValidElement(child)) {\n throw new Error(INVALID_CHILDREN_MESSAGE)\n }\n\n invariant(\n child.type === Icon,\n `Children of type ${child?.type} aren't permitted. Only an ${Icon.displayName} component is allowed in ${ActionIcon.displayName}`\n )\n\n return React.cloneElement(child, {\n size: ActionIconSizeMap[size as string],\n css: { ...(child.props.css ? child.props.css : {}) }\n })\n })}\n </StyledButton>\n )\n }\n)\n\nActionIcon.displayName = 'ActionIcon'\n"],"names":["getSimpleVariant","base","interact","active","getSolidVariant","getOutlineVariant","StyledButton","styled","darken","theme","ActionIcon","React","children","appearance","size","label","href","disabled","remainingProps","ref","INVALID_CHILDREN_MESSAGE","Icon","invariant","child","ActionIconSizeMap"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"ActionIcon.js","sources":["../../../src/components/action-icon/ActionIcon.tsx"],"sourcesContent":["import type { VariantProps } from '@stitches/react'\nimport { darken } from 'color2k'\nimport invariant from 'invariant'\nimport * as React from 'react'\n\nimport { styled, theme } from '~/stitches'\nimport { NavigatorActions } from '~/types'\nimport { Override } from '~/utilities'\nimport { ActionIconSizeMap } from './ActionIcon.constants'\nimport { Tooltip } from '../tooltip/Tooltip'\n\nimport { Icon } from '../icon/Icon'\n\nconst getSimpleVariant = (base: string, interact: string, active: string) => ({\n bg: 'transparent',\n color: base,\n '&:not(:disabled):hover, &:not(:disabled):focus': {\n color: interact\n },\n '&:not(:disabled):active': {\n color: active\n },\n '&[disabled]': {\n color: '$tonal400',\n cursor: 'not-allowed'\n }\n})\n\nconst getSolidVariant = (base: string, interact: string, active: string) => ({\n bg: base,\n color: 'white',\n '&:not(:disabled):hover, &:not(:disabled):focus': {\n bg: interact,\n color: 'white'\n },\n '&:not(:disabled):active': {\n bg: active\n },\n '&[disabled]': {\n bg: '$tonal100',\n color: '$tonal400',\n cursor: 'not-allowed'\n }\n})\nconst getOutlineVariant = (base: string, interact: string, active: string) => ({\n border: '1px solid',\n borderColor: 'currentColor',\n color: base,\n '&:not(:disabled):hover, &:not(:disabled):focus': {\n color: interact\n },\n '&:not(:disabled):active': {\n color: active\n },\n '&[disabled]': {\n borderColor: '$tonal400',\n color: '$tonal400',\n cursor: 'not-allowed'\n }\n})\n\nconst StyledButton = styled('button', {\n alignItems: 'center',\n appearance: 'none',\n bg: 'white',\n border: 'unset',\n borderRadius: '$0',\n boxSizing: 'border-box',\n cursor: 'pointer',\n display: 'flex',\n justifyContent: 'center',\n p: 'unset',\n transition: 'all 100ms ease-out',\n variants: {\n theme: {\n neutral: {},\n primary: {},\n success: {},\n warning: {},\n danger: {}\n },\n appearance: {\n simple: {},\n outline: {},\n solid: {}\n },\n size: {\n xs: { size: '$2' },\n sm: { size: '$3' },\n md: { size: '$4' },\n lg: { size: '$5' }\n },\n isRounded: {\n true: {\n borderRadius: '$round'\n }\n }\n },\n compoundVariants: [\n // Appearance Simple\n {\n theme: 'neutral',\n appearance: 'simple',\n css: getSimpleVariant('$tonal300', '$primaryMid', '$primaryDark')\n },\n {\n theme: 'primary',\n appearance: 'simple',\n css: getSimpleVariant('$primary', '$primaryMid', '$primaryDark')\n },\n {\n theme: 'primaryDark',\n appearance: 'simple',\n css: getSimpleVariant(\n '$primaryDark',\n darken(theme.colors.primaryDark.value, 0.1),\n darken(theme.colors.primaryDark.value, 0.15)\n )\n },\n {\n theme: 'success',\n appearance: 'simple',\n css: getSimpleVariant('$success', '$successMid', '$successDark')\n },\n {\n theme: 'warning',\n appearance: 'simple',\n css: getSimpleVariant('$warning', '$warningMid', '$warningDark')\n },\n {\n theme: 'danger',\n appearance: 'simple',\n css: getSimpleVariant('$danger', '$dangerMid', '$dangerDark')\n },\n\n // Appearance Solid\n {\n theme: 'primary',\n appearance: 'solid',\n css: getSolidVariant('$primary', '$primaryMid', '$primaryDark')\n },\n {\n theme: 'primaryDark',\n appearance: 'solid',\n css: getSolidVariant(\n '$primaryDark',\n darken(theme.colors.primaryDark.value, 0.1),\n darken(theme.colors.primaryDark.value, 0.15)\n )\n },\n {\n theme: 'success',\n appearance: 'solid',\n css: getSolidVariant('$success', '$successMid', '$successDark')\n },\n {\n theme: 'warning',\n appearance: 'solid',\n css: getSolidVariant('$warning', '$warningMid', '$warningDark')\n },\n {\n theme: 'danger',\n appearance: 'solid',\n css: getSolidVariant('$danger', '$dangerMid', '$dangerDark')\n },\n\n // Appearance Outline\n {\n theme: 'primary',\n appearance: 'outline',\n css: getOutlineVariant('$primary', '$primaryMid', '$primaryDark')\n },\n {\n theme: 'primaryDark',\n appearance: 'outline',\n css: getOutlineVariant(\n '$primaryDark',\n darken(theme.colors.primaryDark.value, 0.1),\n darken(theme.colors.primaryDark.value, 0.15)\n )\n },\n {\n theme: 'success',\n appearance: 'outline',\n css: getOutlineVariant('$success', '$successMid', '$successDark')\n },\n {\n theme: 'warning',\n appearance: 'outline',\n css: getOutlineVariant('$warning', '$warningMid', '$warningDark')\n },\n {\n theme: 'danger',\n appearance: 'outline',\n css: getOutlineVariant('$danger', '$dangerMid', '$dangerDark')\n }\n ]\n})\n\ntype ConditionallyWrapWithTooltipProps = {\n hasTooltip: boolean\n label: string\n tooltipSide?: 'bottom' | 'left' | 'right' | 'top'\n children: React.ReactNode\n}\n\nconst ConditionallyWrapWithTooltip: React.FC<\n ConditionallyWrapWithTooltipProps\n> = ({ hasTooltip, label, tooltipSide, children }) => {\n if (hasTooltip) {\n return (\n <Tooltip>\n <Tooltip.Trigger asChild>{children}</Tooltip.Trigger>\n <Tooltip.Content side={tooltipSide}>{label}</Tooltip.Content>\n </Tooltip>\n )\n }\n\n return <span>{children}</span>\n}\n\ntype ActionIconProps = Override<\n React.ComponentProps<typeof StyledButton>,\n VariantProps<typeof StyledButton> & {\n as?: string | React.ReactNode\n children: React.ReactNode\n label: string\n hasTooltip?: boolean\n tooltipSide?: 'bottom' | 'left' | 'right' | 'top'\n } & NavigatorActions\n>\n\nexport const ActionIcon = React.forwardRef<HTMLButtonElement, ActionIconProps>(\n (\n {\n children,\n theme = 'primary',\n appearance = 'simple',\n size = 'sm',\n label,\n href,\n disabled,\n hasTooltip = true,\n tooltipSide,\n ...remainingProps\n },\n ref\n ) => {\n const INVALID_CHILDREN_MESSAGE = `A single ${Icon.displayName} component is permitted as a child of ${ActionIcon.displayName}`\n\n invariant(React.Children.count(children) === 1, INVALID_CHILDREN_MESSAGE)\n\n const optionalLinkProps = href\n ? ({\n as: 'a',\n href: disabled ? null : href,\n onClick: undefined,\n 'aria-disabled': !!disabled\n } as const)\n : ({ type: 'button' } as const)\n\n return (\n <ConditionallyWrapWithTooltip\n hasTooltip={hasTooltip}\n label={label}\n tooltipSide={tooltipSide}\n >\n <StyledButton\n {...remainingProps}\n {...optionalLinkProps}\n aria-label={label}\n theme={theme}\n appearance={appearance}\n size={size}\n ref={ref}\n disabled={disabled}\n >\n {React.Children.map(children, (child) => {\n // TS needs this check for any following code to access child.type\n // even with optional chaining\n if (!React.isValidElement(child)) {\n throw new Error(INVALID_CHILDREN_MESSAGE)\n }\n\n invariant(\n child.type === Icon,\n `Children of type ${child?.type} aren't permitted. Only an ${Icon.displayName} component is allowed in ${ActionIcon.displayName}`\n )\n\n return React.cloneElement(child, {\n size: ActionIconSizeMap[size as string],\n css: { ...(child.props.css ? child.props.css : {}) }\n })\n })}\n </StyledButton>\n </ConditionallyWrapWithTooltip>\n )\n }\n)\n\nActionIcon.displayName = 'ActionIcon'\n"],"names":["getSimpleVariant","base","interact","active","getSolidVariant","getOutlineVariant","StyledButton","styled","darken","theme","ConditionallyWrapWithTooltip","hasTooltip","label","tooltipSide","children","React","Tooltip","ActionIcon","appearance","size","href","disabled","remainingProps","ref","INVALID_CHILDREN_MESSAGE","Icon","invariant","child","ActionIconSizeMap"],"mappings":"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"}
|
|
@@ -227,7 +227,7 @@ export declare const ChipToggleGroupRoot: React.ForwardRefExoticComponent<(Pick<
|
|
|
227
227
|
} & {
|
|
228
228
|
css?: import("../..").CSS | undefined;
|
|
229
229
|
as?: any;
|
|
230
|
-
} & ToggleGroup.ToggleGroupSingleProps & React.RefAttributes<HTMLDivElement>, "color" | "direction" | "translate" | "gap" | "css" | "onBlur" | "onChange" | "onSubmit" | "slot" | "style" | "title" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "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-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "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" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "as" | "wrap" | "justify" | "asChild" | "disabled" | "value" | "type" | "orientation" | "onValueChange" | "
|
|
230
|
+
} & ToggleGroup.ToggleGroupSingleProps & React.RefAttributes<HTMLDivElement>, "color" | "direction" | "translate" | "gap" | "css" | "onBlur" | "onChange" | "onSubmit" | "slot" | "style" | "title" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "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-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "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" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "as" | "wrap" | "justify" | "asChild" | "disabled" | "value" | "type" | "orientation" | "onValueChange" | "align" | "loop" | "rovingFocus"> | Pick<{
|
|
231
231
|
gap: 1 | 2 | 3;
|
|
232
232
|
} & Omit<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
|
|
233
233
|
ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
|
|
@@ -454,4 +454,4 @@ export declare const ChipToggleGroupRoot: React.ForwardRefExoticComponent<(Pick<
|
|
|
454
454
|
} & {
|
|
455
455
|
css?: import("../..").CSS | undefined;
|
|
456
456
|
as?: any;
|
|
457
|
-
} & ToggleGroup.ToggleGroupMultipleProps & React.RefAttributes<HTMLDivElement>, "color" | "direction" | "translate" | "gap" | "css" | "onBlur" | "onChange" | "onSubmit" | "slot" | "style" | "title" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "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-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "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" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "as" | "wrap" | "justify" | "asChild" | "disabled" | "value" | "type" | "orientation" | "onValueChange" | "
|
|
457
|
+
} & ToggleGroup.ToggleGroupMultipleProps & React.RefAttributes<HTMLDivElement>, "color" | "direction" | "translate" | "gap" | "css" | "onBlur" | "onChange" | "onSubmit" | "slot" | "style" | "title" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "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-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "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" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "as" | "wrap" | "justify" | "asChild" | "disabled" | "value" | "type" | "orientation" | "onValueChange" | "align" | "loop" | "rovingFocus">) & React.RefAttributes<HTMLDivElement>>;
|
|
@@ -221,7 +221,7 @@ export declare const StyledHandle: import("@stitches/react/types/styled-componen
|
|
|
221
221
|
marginBottom: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
|
|
222
222
|
};
|
|
223
223
|
}> | undefined;
|
|
224
|
-
}, "appearance" | "size" | "theme" | "label" | "children" | "as" | "isRounded" | keyof import("../../../types").NavigatorActions> & import("@stitches/react/types/styled-component").TransformProps<{
|
|
224
|
+
}, "appearance" | "size" | "theme" | "label" | "children" | "as" | "isRounded" | "hasTooltip" | "tooltipSide" | keyof import("../../../types").NavigatorActions> & import("@stitches/react/types/styled-component").TransformProps<{
|
|
225
225
|
theme?: "primary" | "success" | "danger" | "warning" | "neutral" | undefined;
|
|
226
226
|
appearance?: "outline" | "solid" | "simple" | undefined;
|
|
227
227
|
size?: "sm" | "md" | "lg" | "xs" | undefined;
|
|
@@ -238,7 +238,9 @@ export declare const StyledHandle: import("@stitches/react/types/styled-componen
|
|
|
238
238
|
as?: React.ReactNode;
|
|
239
239
|
children: React.ReactNode;
|
|
240
240
|
label: string;
|
|
241
|
-
|
|
241
|
+
hasTooltip?: boolean | undefined;
|
|
242
|
+
tooltipSide?: "bottom" | "left" | "right" | "top" | undefined;
|
|
243
|
+
} & import("../../../types").NavigatorActions, "appearance" | "color" | "translate" | "size" | "css" | "theme" | "onBlur" | "onChange" | "onSubmit" | "form" | "label" | "slot" | "style" | "title" | "key" | "name" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "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-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "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" | "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" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "as" | "disabled" | "value" | "type" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "isRounded" | "hasTooltip" | "tooltipSide" | keyof import("../../../types").NavigatorActions> & React.RefAttributes<HTMLButtonElement>>, {
|
|
242
244
|
isDragging?: boolean | "true" | "false" | undefined;
|
|
243
245
|
}, {
|
|
244
246
|
sm: string;
|
|
@@ -1,7 +1,5 @@
|
|
|
1
1
|
import type { CSS } from '../../../stitches';
|
|
2
2
|
import React from 'react';
|
|
3
|
-
import { ActionIcon } from '../../action-icon';
|
|
4
|
-
import { Icon } from '../../icon';
|
|
5
3
|
export declare const DirectionButton: React.FC<{
|
|
6
4
|
css?: CSS;
|
|
7
5
|
direction: 'next' | 'previous';
|
|
@@ -14,9 +12,3 @@ export declare const GotoPageSelect: React.FC<{
|
|
|
14
12
|
gotoPage: (pageNumber: number) => void;
|
|
15
13
|
disabled: boolean;
|
|
16
14
|
}>;
|
|
17
|
-
declare type TooltipActionIconProps = React.ComponentProps<typeof ActionIcon> & React.ComponentProps<typeof Icon> & {
|
|
18
|
-
icon: React.FC<React.SVGProps<SVGSVGElement>>;
|
|
19
|
-
iconSize?: 'sm' | 'md' | 'lg';
|
|
20
|
-
};
|
|
21
|
-
export declare const TooltipActionIcon: React.FC<Omit<TooltipActionIconProps, 'children' | 'is'>>;
|
|
22
|
-
export {};
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{ChevronRight as
|
|
1
|
+
import{ChevronRight as i,ChevronLeft as l}from"@atom-learning/icons";import t from"react";import{Flex as s}from"../../flex/Flex.js";import{Select as c}from"../../select/Select.js";import{Text as p}from"../../text/Text.js";import{ActionIcon as g}from"../../action-icon/ActionIcon.js";import{Icon as f}from"../../icon/Icon.js";const u=({direction:a,...o})=>{const r=a==="next";return t.createElement(g,{appearance:"outline",isRounded:!0,label:r?"Next page":"Previous page",name:r?"Next page":"Previous page",size:"md",...o},t.createElement(f,{is:r?i:l}))},d=({gotoPage:a,pageCount:o,pageIndex:r,disabled:n})=>t.createElement(s,{css:{alignItems:"center"}},t.createElement(c,{value:r,size:"sm",css:{mr:"$3"},disabled:n,onChange:e=>{a(Number(e.target.value))}},Array.from({length:o},(e,m)=>m).map(e=>t.createElement("option",{key:e,value:e},e+1))),t.createElement(p,{size:"sm",css:{flex:"none"}},`of ${o} ${o>1?"pages":"page"}`));export{u as DirectionButton,d as GotoPageSelect};
|
|
2
2
|
//# sourceMappingURL=PaginationButtons.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PaginationButtons.js","sources":["../../../../src/components/data-table/pagination/PaginationButtons.tsx"],"sourcesContent":["import type { CSS } from '~/stitches'\n\nimport { ChevronLeft, ChevronRight } from '@atom-learning/icons'\nimport React from 'react'\nimport { Flex } from '../../flex'\nimport { Select } from '../../select'\nimport { Text } from '../../text'\nimport { ActionIcon } from '../../action-icon'\nimport { Icon } from '../../icon'\
|
|
1
|
+
{"version":3,"file":"PaginationButtons.js","sources":["../../../../src/components/data-table/pagination/PaginationButtons.tsx"],"sourcesContent":["import type { CSS } from '~/stitches'\n\nimport { ChevronLeft, ChevronRight } from '@atom-learning/icons'\nimport React from 'react'\nimport { Flex } from '../../flex'\nimport { Select } from '../../select'\nimport { Text } from '../../text'\nimport { ActionIcon } from '../../action-icon'\nimport { Icon } from '../../icon'\n\nexport const DirectionButton: React.FC<{\n css?: CSS\n direction: 'next' | 'previous'\n disabled: boolean\n onClick: () => void\n}> = ({ direction, ...remainingProps }) => {\n const isNext = direction === 'next'\n\n return (\n <ActionIcon\n appearance=\"outline\"\n isRounded\n label={isNext ? 'Next page' : 'Previous page'}\n name={isNext ? 'Next page' : 'Previous page'}\n size=\"md\"\n {...remainingProps}\n >\n <Icon is={isNext ? ChevronRight : ChevronLeft}></Icon>\n </ActionIcon>\n )\n}\n\nexport const GotoPageSelect: React.FC<{\n pageIndex: number\n pageCount: number\n gotoPage: (pageNumber: number) => void\n disabled: boolean\n}> = ({ gotoPage, pageCount, pageIndex, disabled }) => {\n return (\n <Flex css={{ alignItems: 'center' }}>\n <Select\n value={pageIndex}\n size=\"sm\"\n css={{ mr: '$3' }}\n disabled={disabled}\n onChange={(e) => {\n gotoPage(Number(e.target.value))\n }}\n >\n {Array.from({ length: pageCount }, (z, x) => x).map((i) => {\n return (\n <option key={i} value={i}>\n {i + 1}\n </option>\n )\n })}\n </Select>\n <Text size=\"sm\" css={{ flex: 'none' }}>{`of ${pageCount} ${\n pageCount > 1 ? 'pages' : 'page'\n }`}</Text>\n </Flex>\n )\n}\n"],"names":["DirectionButton","direction","remainingProps","isNext","React","ActionIcon","Icon","ChevronRight","ChevronLeft","GotoPageSelect","gotoPage","pageCount","pageIndex","disabled","Flex","Select","z","x","i","Text"],"mappings":"qUAUa,MAAAA,EAKR,CAAC,CAAE,UAAAC,KAAcC,CAAe,IAAM,CACzC,MAAMC,EAASF,IAAc,OAE7B,OACEG,EAAA,cAACC,EAAA,CACC,WAAW,UACX,UAAS,GACT,MAAOF,EAAS,YAAc,gBAC9B,KAAMA,EAAS,YAAc,gBAC7B,KAAK,KACJ,GAAGD,CAAAA,EAEJE,EAAA,cAACE,EAAA,CAAK,GAAIH,EAASI,EAAeC,CAAAA,CAAa,CACjD,CAEJ,EAEaC,EAKR,CAAC,CAAE,SAAAC,EAAU,UAAAC,EAAW,UAAAC,EAAW,SAAAC,CAAS,IAE7CT,EAAA,cAACU,EAAA,CAAK,IAAK,CAAE,WAAY,QAAS,GAChCV,EAAA,cAACW,EAAA,CACC,MAAOH,EACP,KAAK,KACL,IAAK,CAAE,GAAI,IAAK,EAChB,SAAUC,EACV,SAAW,GAAM,CACfH,EAAS,OAAO,EAAE,OAAO,KAAK,CAAC,CACjC,GAEC,MAAM,KAAK,CAAE,OAAQC,CAAU,EAAG,CAACK,EAAGC,IAAMA,CAAC,EAAE,IAAKC,GAEjDd,EAAA,cAAC,SAAO,CAAA,IAAKc,EAAG,MAAOA,CAAAA,EACpBA,EAAI,CACP,CAEH,CACH,EACAd,EAAA,cAACe,EAAA,CAAK,KAAK,KAAK,IAAK,CAAE,KAAM,MAAO,GAAI,MAAMR,KAC5CA,EAAY,EAAI,QAAU,QACzB,CACL"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{CalendarEvent as
|
|
1
|
+
import{CalendarEvent as N}from"@atom-learning/icons";import*as e from"react";import{DIALOG_Z_INDEX as x}from"../../constants/zIndices.js";import{ActionIcon as z}from"../action-icon/ActionIcon.js";import{Box as F}from"../box/Box.js";import{Calendar as L}from"../calendar/Calendar.js";import{DEFAULT_LABELS as S}from"../calendar/constants.js";import{Icon as _}from"../icon/Icon.js";import{Input as k}from"../input/Input.js";import{Popover as r}from"../popover/Popover.js";import{DEFAULT_DATE_FORMAT as R}from"./constants.js";import{useDate as B}from"./use-date.js";const D=e.forwardRef(({initialDate:E,dateFormat:g=R,firstDayOfWeek:h=1,disabled:s,monthNames:b,weekdayNames:v,size:l="md",labels:y,revalidate:o,onChange:n,minDate:A,maxDate:C,...I},w)=>{const{date:a,dateString:O,setDate:m}=B(E,g),i={...S,...y},[T,d]=e.useState(!1),f=e.useRef(null),p=e.useRef(null);return e.useEffect(()=>{n==null||n(a)},[a,n]),e.createElement(F,{css:{position:"relative"}},e.createElement(k,{name:"date",disabled:s,size:l,...I,onChange:t=>m(t.target.value,!0),value:O,ref:w}),e.createElement(r,{modal:!0,open:T,onOpenChange:d},e.createElement(r.Trigger,{asChild:!0},e.createElement(z,{css:{position:"absolute",top:"0",right:"0"},disabled:s,label:i.open,size:l,theme:"neutral",hasTooltip:!1},e.createElement(_,{is:N}))),e.createElement(r.Portal,null,e.createElement(r.Content,{css:{pr:"$sizes$2",zIndex:x},side:"bottom",align:"end",showCloseButton:!1,onOpenAutoFocus:t=>{var c,u;t.preventDefault(),a?(c=p.current)==null||c.focus():(u=f.current)==null||u.focus()}},e.createElement(L,{date:a||new Date,selected:a,onDateSelected:async t=>{d(!1),await m(t.date,!1),o&&o()},setYear:async t=>{await m(t,!1),o&&o()},minDate:A,maxDate:C,refDateToday:f,refDateSelected:p,firstDayOfWeek:h,monthNames:b,weekdayNames:v,labels:i})))))});D.displayName="DateInput";export{D as DateInput};
|
|
2
2
|
//# sourceMappingURL=DateInput.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DateInput.js","sources":["../../../src/components/date-input/DateInput.tsx"],"sourcesContent":["import { CalendarEvent } from '@atom-learning/icons'\nimport type { Props as DayzedInterface } from 'dayzed'\nimport * as React from 'react'\n\nimport { DIALOG_Z_INDEX } from '~/constants/zIndices'\n\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Box } from '../box/Box'\nimport { Calendar, CalendarTranslationProps } from '../calendar/Calendar'\nimport { DEFAULT_LABELS } from '../calendar/constants'\nimport { Icon } from '../icon/Icon'\nimport { Input } from '../input/Input'\nimport { Popover } from '../popover/Popover'\nimport { DEFAULT_DATE_FORMAT } from './constants'\nimport { useDate } from './use-date'\n\nexport type DateInputProps = Omit<DayzedInterface, 'onDateSelected'> &\n CalendarTranslationProps & {\n initialDate?: Date\n dateFormat?: string\n disabled?: boolean\n size?: 'sm' | 'md'\n revalidate?: () => Promise<boolean>\n onChange?: (value?: Date) => void\n }\n\nexport const DateInput = React.forwardRef<HTMLInputElement, DateInputProps>(\n (\n {\n initialDate,\n dateFormat = DEFAULT_DATE_FORMAT,\n firstDayOfWeek = 1,\n disabled,\n monthNames,\n weekdayNames,\n size = 'md',\n labels,\n revalidate,\n onChange,\n minDate,\n maxDate,\n ...remainingProps\n },\n ref\n ) => {\n const { date, dateString, setDate } = useDate(initialDate, dateFormat)\n const updatedLabels = {\n ...DEFAULT_LABELS,\n ...labels\n }\n\n const [calendarOpen, setCalendarOpen] = React.useState(false)\n\n const refDateToday = React.useRef<HTMLButtonElement>(null)\n const refDateSelected = React.useRef<HTMLButtonElement>(null)\n\n React.useEffect(() => {\n onChange?.(date)\n }, [date, onChange])\n\n return (\n <Box css={{ position: 'relative' }}>\n <Input\n name=\"date\"\n disabled={disabled}\n size={size}\n {...remainingProps}\n onChange={(event) => setDate(event.target.value, true)}\n value={dateString}\n ref={ref}\n />\n <Popover modal open={calendarOpen} onOpenChange={setCalendarOpen}>\n <Popover.Trigger asChild>\n <ActionIcon\n css={{ position: 'absolute', top: '0', right: '0' }}\n disabled={disabled}\n label={updatedLabels.open}\n size={size}\n theme=\"neutral\"\n >\n <Icon is={CalendarEvent} />\n </ActionIcon>\n </Popover.Trigger>\n <Popover.Portal>\n <Popover.Content\n css={{ pr: '$sizes$2', zIndex: DIALOG_Z_INDEX }}\n side=\"bottom\"\n align=\"end\"\n showCloseButton={false}\n onOpenAutoFocus={(e) => {\n e.preventDefault()\n if (date) {\n refDateSelected.current?.focus()\n } else {\n refDateToday.current?.focus()\n }\n }}\n >\n <Calendar\n date={date || new Date()}\n selected={date}\n onDateSelected={async (date) => {\n setCalendarOpen(false)\n await setDate(date.date, false)\n if (revalidate) revalidate()\n }}\n setYear={async (date) => {\n await setDate(date, false)\n if (revalidate) revalidate()\n }}\n minDate={minDate}\n maxDate={maxDate}\n refDateToday={refDateToday}\n refDateSelected={refDateSelected}\n firstDayOfWeek={firstDayOfWeek}\n monthNames={monthNames}\n weekdayNames={weekdayNames}\n labels={updatedLabels}\n />\n </Popover.Content>\n </Popover.Portal>\n </Popover>\n </Box>\n )\n }\n)\n\nDateInput.displayName = 'DateInput'\n"],"names":["DateInput","React","initialDate","dateFormat","DEFAULT_DATE_FORMAT","firstDayOfWeek","disabled","monthNames","weekdayNames","size","labels","revalidate","onChange","minDate","maxDate","remainingProps","ref","date","dateString","setDate","useDate","updatedLabels","DEFAULT_LABELS","calendarOpen","setCalendarOpen","refDateToday","refDateSelected","Box","Input","event","Popover","ActionIcon","Icon","CalendarEvent","DIALOG_Z_INDEX","e","_a","_b","Calendar"],"mappings":"yjBA0BaA,EAAYC,EAAM,WAC7B,CACE,CACE,YAAAC,EACA,WAAAC,EAAaC,EACb,eAAAC,EAAiB,EACjB,SAAAC,EACA,WAAAC,EACA,aAAAC,EACA,KAAAC,EAAO,KACP,OAAAC,EACA,WAAAC,EACA,SAAAC,EACA,QAAAC,EACA,QAAAC,KACGC,CACL,EACAC,IACG,CACH,KAAM,CAAE,KAAAC,EAAM,WAAAC,EAAY,QAAAC,CAAQ,EAAIC,EAAQlB,EAAaC,CAAU,EAC/DkB,EAAgB,CACpB,GAAGC,EACH,GAAGZ,CACL,EAEM,CAACa,EAAcC,CAAe,EAAIvB,EAAM,SAAS,EAAK,EAEtDwB,EAAexB,EAAM,OAA0B,IAAI,EACnDyB,EAAkBzB,EAAM,OAA0B,IAAI,EAE5D,OAAAA,EAAM,UAAU,IAAM,CACpBW,GAAA,MAAAA,EAAWK,
|
|
1
|
+
{"version":3,"file":"DateInput.js","sources":["../../../src/components/date-input/DateInput.tsx"],"sourcesContent":["import { CalendarEvent } from '@atom-learning/icons'\nimport type { Props as DayzedInterface } from 'dayzed'\nimport * as React from 'react'\n\nimport { DIALOG_Z_INDEX } from '~/constants/zIndices'\n\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Box } from '../box/Box'\nimport { Calendar, CalendarTranslationProps } from '../calendar/Calendar'\nimport { DEFAULT_LABELS } from '../calendar/constants'\nimport { Icon } from '../icon/Icon'\nimport { Input } from '../input/Input'\nimport { Popover } from '../popover/Popover'\nimport { DEFAULT_DATE_FORMAT } from './constants'\nimport { useDate } from './use-date'\n\nexport type DateInputProps = Omit<DayzedInterface, 'onDateSelected'> &\n CalendarTranslationProps & {\n initialDate?: Date\n dateFormat?: string\n disabled?: boolean\n size?: 'sm' | 'md'\n revalidate?: () => Promise<boolean>\n onChange?: (value?: Date) => void\n }\n\nexport const DateInput = React.forwardRef<HTMLInputElement, DateInputProps>(\n (\n {\n initialDate,\n dateFormat = DEFAULT_DATE_FORMAT,\n firstDayOfWeek = 1,\n disabled,\n monthNames,\n weekdayNames,\n size = 'md',\n labels,\n revalidate,\n onChange,\n minDate,\n maxDate,\n ...remainingProps\n },\n ref\n ) => {\n const { date, dateString, setDate } = useDate(initialDate, dateFormat)\n const updatedLabels = {\n ...DEFAULT_LABELS,\n ...labels\n }\n\n const [calendarOpen, setCalendarOpen] = React.useState(false)\n\n const refDateToday = React.useRef<HTMLButtonElement>(null)\n const refDateSelected = React.useRef<HTMLButtonElement>(null)\n\n React.useEffect(() => {\n onChange?.(date)\n }, [date, onChange])\n\n return (\n <Box css={{ position: 'relative' }}>\n <Input\n name=\"date\"\n disabled={disabled}\n size={size}\n {...remainingProps}\n onChange={(event) => setDate(event.target.value, true)}\n value={dateString}\n ref={ref}\n />\n <Popover modal open={calendarOpen} onOpenChange={setCalendarOpen}>\n <Popover.Trigger asChild>\n <ActionIcon\n css={{ position: 'absolute', top: '0', right: '0' }}\n disabled={disabled}\n label={updatedLabels.open}\n size={size}\n theme=\"neutral\"\n hasTooltip={false}\n >\n <Icon is={CalendarEvent} />\n </ActionIcon>\n </Popover.Trigger>\n <Popover.Portal>\n <Popover.Content\n css={{ pr: '$sizes$2', zIndex: DIALOG_Z_INDEX }}\n side=\"bottom\"\n align=\"end\"\n showCloseButton={false}\n onOpenAutoFocus={(e) => {\n e.preventDefault()\n if (date) {\n refDateSelected.current?.focus()\n } else {\n refDateToday.current?.focus()\n }\n }}\n >\n <Calendar\n date={date || new Date()}\n selected={date}\n onDateSelected={async (date) => {\n setCalendarOpen(false)\n await setDate(date.date, false)\n if (revalidate) revalidate()\n }}\n setYear={async (date) => {\n await setDate(date, false)\n if (revalidate) revalidate()\n }}\n minDate={minDate}\n maxDate={maxDate}\n refDateToday={refDateToday}\n refDateSelected={refDateSelected}\n firstDayOfWeek={firstDayOfWeek}\n monthNames={monthNames}\n weekdayNames={weekdayNames}\n labels={updatedLabels}\n />\n </Popover.Content>\n </Popover.Portal>\n </Popover>\n </Box>\n )\n }\n)\n\nDateInput.displayName = 'DateInput'\n"],"names":["DateInput","React","initialDate","dateFormat","DEFAULT_DATE_FORMAT","firstDayOfWeek","disabled","monthNames","weekdayNames","size","labels","revalidate","onChange","minDate","maxDate","remainingProps","ref","date","dateString","setDate","useDate","updatedLabels","DEFAULT_LABELS","calendarOpen","setCalendarOpen","refDateToday","refDateSelected","Box","Input","event","Popover","ActionIcon","Icon","CalendarEvent","DIALOG_Z_INDEX","e","_a","_b","Calendar"],"mappings":"yjBA0BaA,EAAYC,EAAM,WAC7B,CACE,CACE,YAAAC,EACA,WAAAC,EAAaC,EACb,eAAAC,EAAiB,EACjB,SAAAC,EACA,WAAAC,EACA,aAAAC,EACA,KAAAC,EAAO,KACP,OAAAC,EACA,WAAAC,EACA,SAAAC,EACA,QAAAC,EACA,QAAAC,KACGC,CACL,EACAC,IACG,CACH,KAAM,CAAE,KAAAC,EAAM,WAAAC,EAAY,QAAAC,CAAQ,EAAIC,EAAQlB,EAAaC,CAAU,EAC/DkB,EAAgB,CACpB,GAAGC,EACH,GAAGZ,CACL,EAEM,CAACa,EAAcC,CAAe,EAAIvB,EAAM,SAAS,EAAK,EAEtDwB,EAAexB,EAAM,OAA0B,IAAI,EACnDyB,EAAkBzB,EAAM,OAA0B,IAAI,EAE5D,OAAAA,EAAM,UAAU,IAAM,CACpBW,GAAA,MAAAA,EAAWK,CAAAA,CACb,EAAG,CAACA,EAAML,CAAQ,CAAC,EAGjBX,EAAA,cAAC0B,EAAA,CAAI,IAAK,CAAE,SAAU,UAAW,CAC/B1B,EAAAA,EAAA,cAAC2B,EAAA,CACC,KAAK,OACL,SAAUtB,EACV,KAAMG,EACL,GAAGM,EACJ,SAAWc,GAAUV,EAAQU,EAAM,OAAO,MAAO,EAAI,EACrD,MAAOX,EACP,IAAKF,CACP,CAAA,EACAf,EAAA,cAAC6B,EAAA,CAAQ,MAAK,GAAC,KAAMP,EAAc,aAAcC,CAAAA,EAC/CvB,EAAA,cAAC6B,EAAQ,QAAR,CAAgB,QAAO,EAAA,EACtB7B,EAAA,cAAC8B,EAAA,CACC,IAAK,CAAE,SAAU,WAAY,IAAK,IAAK,MAAO,GAAI,EAClD,SAAUzB,EACV,MAAOe,EAAc,KACrB,KAAMZ,EACN,MAAM,UACN,WAAY,EAAA,EAEZR,EAAA,cAAC+B,EAAA,CAAK,GAAIC,CAAe,CAAA,CAC3B,CACF,EACAhC,EAAA,cAAC6B,EAAQ,OAAR,KACC7B,EAAA,cAAC6B,EAAQ,QAAR,CACC,IAAK,CAAE,GAAI,WAAY,OAAQI,CAAe,EAC9C,KAAK,SACL,MAAM,MACN,gBAAiB,GACjB,gBAAkBC,GAAM,CA1FtC,IAAAC,EAAAC,EA2FgBF,EAAE,eACElB,EAAAA,GACFmB,EAAAV,EAAgB,UAAhB,MAAAU,EAAyB,MAEzBC,GAAAA,EAAAZ,EAAa,UAAb,MAAAY,EAAsB,MAE1B,CAAA,CAAA,EAEApC,EAAA,cAACqC,EAAA,CACC,KAAMrB,GAAQ,IAAI,KAClB,SAAUA,EACV,eAAgB,MAAOA,GAAS,CAC9BO,EAAgB,EAAK,EACrB,MAAML,EAAQF,EAAK,KAAM,EAAK,EAC1BN,GAAYA,GAClB,EACA,QAAS,MAAOM,GAAS,CACvB,MAAME,EAAQF,EAAM,EAAK,EACrBN,GAAYA,EAClB,CAAA,EACA,QAASE,EACT,QAASC,EACT,aAAcW,EACd,gBAAiBC,EACjB,eAAgBrB,EAChB,WAAYE,EACZ,aAAcC,EACd,OAAQa,CACV,CAAA,CACF,CACF,CACF,CACF,CAEJ,CACF,EAEArB,EAAU,YAAc"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{styled as t}from"../../stitches.js";import*as
|
|
1
|
+
import{styled as t}from"../../stitches.js";import*as o from"react";import{ActionIcon as p}from"../action-icon/ActionIcon.js";import{Icon as m}from"../icon/Icon.js";import{Tooltip as e}from"../tooltip/Tooltip.js";const s=t("span",{zIndex:1}),d=t(p,{borderColor:"$tonal400 !important",zIndex:1,"&:hover":{bg:"$tonal50",svg:{color:"$tonal400"}},svg:{color:"$tonal300"},"&:active":{bg:"$tonal100",svg:{color:"$tonal500"}},"&:disabled":{opacity:.3,pointerEvents:"none"}}),b=o.forwardRef((n,r)=>{const{icon:l,disabledTooltipContent:a,showTooltip:i,...c}=n;return o.createElement(e,null,o.createElement(e.Trigger,{asChild:!0},o.createElement(s,{tabIndex:-1},o.createElement(d,{hasTooltip:!1,tabIndex:-1,appearance:"outline",ref:r,...c},o.createElement(m,{is:l})))),i&&o.createElement(e.Content,null,a))});export{b as NumberInputStepper};
|
|
2
2
|
//# sourceMappingURL=NumberInputStepper.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NumberInputStepper.js","sources":["../../../src/components/number-input/NumberInputStepper.tsx"],"sourcesContent":["import { styled } from '~/stitches'\nimport * as React from 'react'\n\nimport { ActionIcon } from '../action-icon'\nimport { Icon } from '../icon'\nimport { Tooltip } from '../tooltip'\n\nconst StyledSpan = styled('span', { zIndex: 1 })\n\nconst StyledStepperButton = styled(ActionIcon, {\n borderColor: '$tonal400 !important',\n zIndex: 1,\n '&:hover': {\n bg: '$tonal50',\n svg: {\n color: '$tonal400'\n }\n },\n svg: {\n color: '$tonal300'\n },\n '&:active': {\n bg: '$tonal100',\n svg: {\n color: '$tonal500'\n }\n },\n '&:disabled': {\n opacity: 0.3,\n pointerEvents: 'none'\n }\n})\n\ntype NumberInputStepperProps = Omit<\n React.ComponentProps<typeof ActionIcon>,\n 'children'\n> & {\n icon: React.FC<React.SVGProps<SVGSVGElement>>\n showTooltip?: boolean\n disabledTooltipContent?: string\n}\n\nexport const NumberInputStepper: React.ForwardRefExoticComponent<NumberInputStepperProps> =\n React.forwardRef((props, forwardedRef) => {\n const { icon, disabledTooltipContent, showTooltip, ...rest } = props\n\n /**\n * Focus has been removed from the button\n * as the increment and decrement buttons should be keyboard accessible via arrow keys.\n * see MDN docs https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/spinbutton_role\n */\n return (\n <Tooltip>\n <Tooltip.Trigger asChild>\n <StyledSpan tabIndex={-1}>\n <StyledStepperButton\n tabIndex={-1}\n appearance=\"outline\"\n ref={forwardedRef}\n {...rest}\n >\n <Icon is={icon} />\n </StyledStepperButton>\n </StyledSpan>\n </Tooltip.Trigger>\n {showTooltip && (\n <Tooltip.Content>{disabledTooltipContent}</Tooltip.Content>\n )}\n </Tooltip>\n )\n })\n"],"names":["StyledSpan","styled","StyledStepperButton","ActionIcon","NumberInputStepper","React","props","forwardedRef","icon","disabledTooltipContent","showTooltip","rest","Tooltip","Icon"],"mappings":"oNAOA,MAAMA,EAAaC,EAAO,OAAQ,CAAE,OAAQ,CAAE,CAAC,EAEzCC,EAAsBD,EAAOE,EAAY,CAC7C,YAAa,uBACb,OAAQ,EACR,UAAW,CACT,GAAI,WACJ,IAAK,CACH,MAAO,WACT,CACF,EACA,IAAK,CACH,MAAO,WACT,EACA,WAAY,CACV,GAAI,YACJ,IAAK,CACH,MAAO,WACT,CACF,EACA,aAAc,CACZ,QAAS,GACT,cAAe,MACjB,CACF,CAAC,EAWYC,EACXC,EAAM,WAAW,CAACC,EAAOC,IAAiB,CACxC,KAAM,CAAE,KAAAC,EAAM,uBAAAC,EAAwB,YAAAC,KAAgBC,CAAK,EAAIL,EAO/D,OACED,EAAA,cAACO,EAAA,KACCP,EAAA,cAACO,EAAQ,QAAR,CAAgB,QAAO,EAAA,EACtBP,EAAA,cAACL,EAAA,CAAW,SAAU,EACpBK,EAAAA,EAAA,cAACH,EAAA,CACC,SAAU,GACV,WAAW,UACX,IAAKK,EACJ,GAAGI,CAAAA,EAEJN,EAAA,cAACQ,EAAA,CAAK,GAAIL,CAAM,CAAA,CAClB,CACF,CACF,EACCE,GACCL,EAAA,cAACO,EAAQ,QAAR,KAAiBH,CAAuB,CAE7C,CAEJ,CAAC"}
|
|
1
|
+
{"version":3,"file":"NumberInputStepper.js","sources":["../../../src/components/number-input/NumberInputStepper.tsx"],"sourcesContent":["import { styled } from '~/stitches'\nimport * as React from 'react'\n\nimport { ActionIcon } from '../action-icon'\nimport { Icon } from '../icon'\nimport { Tooltip } from '../tooltip'\n\nconst StyledSpan = styled('span', { zIndex: 1 })\n\nconst StyledStepperButton = styled(ActionIcon, {\n borderColor: '$tonal400 !important',\n zIndex: 1,\n '&:hover': {\n bg: '$tonal50',\n svg: {\n color: '$tonal400'\n }\n },\n svg: {\n color: '$tonal300'\n },\n '&:active': {\n bg: '$tonal100',\n svg: {\n color: '$tonal500'\n }\n },\n '&:disabled': {\n opacity: 0.3,\n pointerEvents: 'none'\n }\n})\n\ntype NumberInputStepperProps = Omit<\n React.ComponentProps<typeof ActionIcon>,\n 'children'\n> & {\n icon: React.FC<React.SVGProps<SVGSVGElement>>\n showTooltip?: boolean\n disabledTooltipContent?: string\n}\n\nexport const NumberInputStepper: React.ForwardRefExoticComponent<NumberInputStepperProps> =\n React.forwardRef((props, forwardedRef) => {\n const { icon, disabledTooltipContent, showTooltip, ...rest } = props\n\n /**\n * Focus has been removed from the button\n * as the increment and decrement buttons should be keyboard accessible via arrow keys.\n * see MDN docs https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/spinbutton_role\n */\n return (\n <Tooltip>\n <Tooltip.Trigger asChild>\n <StyledSpan tabIndex={-1}>\n <StyledStepperButton\n hasTooltip={false}\n tabIndex={-1}\n appearance=\"outline\"\n ref={forwardedRef}\n {...rest}\n >\n <Icon is={icon} />\n </StyledStepperButton>\n </StyledSpan>\n </Tooltip.Trigger>\n {showTooltip && (\n <Tooltip.Content>{disabledTooltipContent}</Tooltip.Content>\n )}\n </Tooltip>\n )\n })\n"],"names":["StyledSpan","styled","StyledStepperButton","ActionIcon","NumberInputStepper","React","props","forwardedRef","icon","disabledTooltipContent","showTooltip","rest","Tooltip","Icon"],"mappings":"oNAOA,MAAMA,EAAaC,EAAO,OAAQ,CAAE,OAAQ,CAAE,CAAC,EAEzCC,EAAsBD,EAAOE,EAAY,CAC7C,YAAa,uBACb,OAAQ,EACR,UAAW,CACT,GAAI,WACJ,IAAK,CACH,MAAO,WACT,CACF,EACA,IAAK,CACH,MAAO,WACT,EACA,WAAY,CACV,GAAI,YACJ,IAAK,CACH,MAAO,WACT,CACF,EACA,aAAc,CACZ,QAAS,GACT,cAAe,MACjB,CACF,CAAC,EAWYC,EACXC,EAAM,WAAW,CAACC,EAAOC,IAAiB,CACxC,KAAM,CAAE,KAAAC,EAAM,uBAAAC,EAAwB,YAAAC,KAAgBC,CAAK,EAAIL,EAO/D,OACED,EAAA,cAACO,EAAA,KACCP,EAAA,cAACO,EAAQ,QAAR,CAAgB,QAAO,EAAA,EACtBP,EAAA,cAACL,EAAA,CAAW,SAAU,EACpBK,EAAAA,EAAA,cAACH,EAAA,CACC,WAAY,GACZ,SAAU,GACV,WAAW,UACX,IAAKK,EACJ,GAAGI,CAAAA,EAEJN,EAAA,cAACQ,EAAA,CAAK,GAAIL,CAAM,CAAA,CAClB,CACF,CACF,EACCE,GACCL,EAAA,cAACO,EAAQ,QAAR,KAAiBH,CAAuB,CAE7C,CAEJ,CAAC"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import c from"invariant";import*as r from"react";import{Box as h}from"../box/Box.js";import{StepperProvider as C}from"./stepper-context/StepperContext.js";import{StepperStepBack as f}from"./StepperStepBack.js";import{StepperStepForward as w}from"./StepperStepForward.js";import{StepperSteps as
|
|
1
|
+
import c from"invariant";import*as r from"react";import{Box as h}from"../box/Box.js";import{StepperProvider as C}from"./stepper-context/StepperContext.js";import{StepperStepBack as f}from"./StepperStepBack.js";import{StepperStepForward as w}from"./StepperStepForward.js";import{StepperSteps as b}from"./StepperSteps.js";const e=({children:s,stepCount:t,allowSkip:i,onComplete:n,onStepChange:l,direction:a="horizontal",steps:o,hideLabels:m=!1,showCompletedIcons:d=!1,css:S})=>{c(!(t&&o),"`Stepper` should only be given one of `stepCount` or `steps`. When both are provided, `steps` will be used and `stepCount` will be ignored.");const p=(o==null?void 0:o.length)||t||0;return r.createElement(C,{stepCount:p,allowSkip:i,onComplete:n,onStepChange:t?l:void 0,direction:a,steps:o||Array(p).fill(""),hideLabels:m,showCompletedIcons:d},r.createElement(h,{"aria-label":"progress",css:{width:"100%",...S}},s))};e.StepBack=f,e.StepForward=w,e.Steps=b,e.displayName="Stepper";export{e as Stepper};
|
|
2
2
|
//# sourceMappingURL=Stepper.js.map
|