@atom-learning/components 5.5.0-beta.0 → 5.5.0-beta.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/dist/components/action-icon/ActionIcon.d.ts +1 -1
- package/dist/components/banner/banner-regular/BannerRegular.d.ts +11 -11
- package/dist/components/banner/banner-regular/BannerRegularDismiss.d.ts +3 -3
- package/dist/components/banner/banner-slim/BannerSlim.d.ts +23 -23
- package/dist/components/banner/banner-slim/BannerSlimDismiss.d.ts +3 -3
- package/dist/components/button/Button.d.ts +1 -1
- package/dist/components/checkbox-field/CheckboxField.js +1 -1
- package/dist/components/checkbox-field/CheckboxField.js.map +1 -1
- package/dist/components/checkbox-group/CheckboxGroup.d.ts +1 -1
- package/dist/components/checkbox-tree/CheckboxTree.d.ts +2 -2
- package/dist/components/create-password-field/CreatePasswordField.js +1 -1
- package/dist/components/create-password-field/CreatePasswordField.js.map +1 -1
- package/dist/components/date-field/DateField.js +1 -1
- package/dist/components/date-field/DateField.js.map +1 -1
- package/dist/components/form/Form.d.ts +3 -2
- package/dist/components/form/Form.js +1 -1
- package/dist/components/form/Form.js.map +1 -1
- package/dist/components/form/index.d.ts +1 -0
- package/dist/components/form/useFormCustomContext.d.ts +7 -0
- package/dist/components/form/useFormCustomContext.js +2 -0
- package/dist/components/form/useFormCustomContext.js.map +1 -0
- package/dist/components/input/Input.js +1 -1
- package/dist/components/input/Input.js.map +1 -1
- package/dist/components/input-field/InputField.js +1 -1
- package/dist/components/input-field/InputField.js.map +1 -1
- package/dist/components/number-input/NumberInputStepper.d.ts +3 -3
- package/dist/components/number-input-field/NumberInputField.js +1 -1
- package/dist/components/number-input-field/NumberInputField.js.map +1 -1
- package/dist/components/pagination/PaginationNextButton.d.ts +3 -3
- package/dist/components/pagination/PaginationPopover.js +1 -1
- package/dist/components/pagination/PaginationPopover.js.map +1 -1
- package/dist/components/pagination/PaginationPreviousButton.d.ts +3 -3
- package/dist/components/password-field/PasswordField.js +1 -1
- package/dist/components/password-field/PasswordField.js.map +1 -1
- package/dist/components/radio-button-field/RadioButtonField.js +1 -1
- package/dist/components/radio-button-field/RadioButtonField.js.map +1 -1
- package/dist/components/search-field/SearchField.js +1 -1
- package/dist/components/search-field/SearchField.js.map +1 -1
- package/dist/components/section-message/SectionMessage.d.ts +1 -1
- package/dist/components/select/Select.js +1 -1
- package/dist/components/select/Select.js.map +1 -1
- package/dist/components/select-field/SelectField.js +1 -1
- package/dist/components/select-field/SelectField.js.map +1 -1
- package/dist/components/sortable/Handle.d.ts +3 -3
- package/dist/components/textarea/Textarea.js +1 -1
- package/dist/components/textarea/Textarea.js.map +1 -1
- package/dist/components/textarea-field/TextareaField.js +1 -1
- package/dist/components/textarea-field/TextareaField.js.map +1 -1
- package/dist/components/top-bar/TopBar.d.ts +8 -7
- package/dist/components/top-bar/TopBar.js +1 -1
- package/dist/components/top-bar/TopBar.js.map +1 -1
- package/dist/docgen.json +1 -1
- package/dist/index.cjs.js +1 -1
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.js +1 -1
- package/package.json +1 -1
|
@@ -4,7 +4,7 @@ import { NavigatorActions } from '../../types';
|
|
|
4
4
|
import { Override } from '../../utilities';
|
|
5
5
|
import type { TOptionalTooltipWrapperProps } from '../../utilities/optional-tooltip-wrapper';
|
|
6
6
|
declare const StyledButton: import("@atom-learning/stitches-react/types/styled-component").StyledComponent<"button", {
|
|
7
|
-
theme?: "success" | "danger" | "warning" | "
|
|
7
|
+
theme?: "success" | "danger" | "warning" | "neutral" | "primary" | undefined;
|
|
8
8
|
appearance?: "outline" | "solid" | "simple" | undefined;
|
|
9
9
|
size?: "xs" | "sm" | "md" | "lg" | undefined;
|
|
10
10
|
isRounded?: boolean | "true" | undefined;
|
|
@@ -1141,17 +1141,17 @@ export declare const BannerRegular: {
|
|
|
1141
1141
|
marginBottom: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
|
|
1142
1142
|
};
|
|
1143
1143
|
}> | undefined;
|
|
1144
|
-
theme?: "success" | "danger" | "warning" | "
|
|
1145
|
-
"@sm"?: "success" | "danger" | "warning" | "
|
|
1146
|
-
"@md"?: "success" | "danger" | "warning" | "
|
|
1147
|
-
"@lg"?: "success" | "danger" | "warning" | "
|
|
1148
|
-
"@xl"?: "success" | "danger" | "warning" | "
|
|
1149
|
-
"@reducedMotion"?: "success" | "danger" | "warning" | "
|
|
1150
|
-
"@allowMotion"?: "success" | "danger" | "warning" | "
|
|
1151
|
-
"@hover"?: "success" | "danger" | "warning" | "
|
|
1152
|
-
"@initial"?: "success" | "danger" | "warning" | "
|
|
1144
|
+
theme?: "success" | "danger" | "warning" | "neutral" | "primary" | ({
|
|
1145
|
+
"@sm"?: "success" | "danger" | "warning" | "neutral" | "primary" | undefined;
|
|
1146
|
+
"@md"?: "success" | "danger" | "warning" | "neutral" | "primary" | undefined;
|
|
1147
|
+
"@lg"?: "success" | "danger" | "warning" | "neutral" | "primary" | undefined;
|
|
1148
|
+
"@xl"?: "success" | "danger" | "warning" | "neutral" | "primary" | undefined;
|
|
1149
|
+
"@reducedMotion"?: "success" | "danger" | "warning" | "neutral" | "primary" | undefined;
|
|
1150
|
+
"@allowMotion"?: "success" | "danger" | "warning" | "neutral" | "primary" | undefined;
|
|
1151
|
+
"@hover"?: "success" | "danger" | "warning" | "neutral" | "primary" | undefined;
|
|
1152
|
+
"@initial"?: "success" | "danger" | "warning" | "neutral" | "primary" | undefined;
|
|
1153
1153
|
} & {
|
|
1154
|
-
[x: string]: "success" | "danger" | "warning" | "
|
|
1154
|
+
[x: string]: "success" | "danger" | "warning" | "neutral" | "primary" | undefined;
|
|
1155
1155
|
}) | undefined;
|
|
1156
1156
|
prefix?: string | undefined | undefined;
|
|
1157
1157
|
form?: string | undefined | undefined;
|
|
@@ -1161,7 +1161,6 @@ export declare const BannerRegular: {
|
|
|
1161
1161
|
title?: string | undefined | undefined;
|
|
1162
1162
|
ref?: ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | null | undefined;
|
|
1163
1163
|
key?: React.Key | null | undefined;
|
|
1164
|
-
name?: string | undefined | undefined;
|
|
1165
1164
|
defaultChecked?: boolean | undefined | undefined;
|
|
1166
1165
|
defaultValue?: string | number | readonly string[] | undefined;
|
|
1167
1166
|
suppressContentEditableWarning?: boolean | undefined | undefined;
|
|
@@ -1415,6 +1414,7 @@ export declare const BannerRegular: {
|
|
|
1415
1414
|
onTransitionEnd?: React.TransitionEventHandler<HTMLButtonElement> | undefined;
|
|
1416
1415
|
onTransitionEndCapture?: React.TransitionEventHandler<HTMLButtonElement> | undefined;
|
|
1417
1416
|
as?: React.ReactNode;
|
|
1417
|
+
name?: string | undefined | undefined;
|
|
1418
1418
|
type?: "submit" | "reset" | "button" | undefined | undefined;
|
|
1419
1419
|
disabled?: boolean | undefined | undefined;
|
|
1420
1420
|
formAction?: string | undefined | undefined;
|
|
@@ -2,7 +2,7 @@ import * as React from 'react';
|
|
|
2
2
|
declare const StyledDismiss: import("@atom-learning/stitches-react/types/styled-component").StyledComponent<React.ForwardRefExoticComponent<Omit<Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
|
|
3
3
|
ref?: ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | null | undefined;
|
|
4
4
|
}, "appearance" | "size" | "css" | "theme" | "isRounded"> & import("@atom-learning/stitches-react/types/styled-component").TransformProps<{
|
|
5
|
-
theme?: "success" | "danger" | "warning" | "
|
|
5
|
+
theme?: "success" | "danger" | "warning" | "neutral" | "primary" | undefined;
|
|
6
6
|
appearance?: "outline" | "solid" | "simple" | undefined;
|
|
7
7
|
size?: "xs" | "sm" | "md" | "lg" | undefined;
|
|
8
8
|
isRounded?: boolean | "true" | undefined;
|
|
@@ -371,8 +371,8 @@ declare const StyledDismiss: import("@atom-learning/stitches-react/types/styled-
|
|
|
371
371
|
marginBottom: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
|
|
372
372
|
};
|
|
373
373
|
}> | undefined;
|
|
374
|
-
}, "appearance" | "size" | "theme" | "label" | "children" | "as" | "
|
|
375
|
-
theme?: "success" | "danger" | "warning" | "
|
|
374
|
+
}, "appearance" | "size" | "theme" | "label" | "children" | "as" | keyof import("../../../types").NavigatorActions | "hasTooltip" | "tooltipSide" | "isRounded"> & import("@atom-learning/stitches-react/types/styled-component").TransformProps<{
|
|
375
|
+
theme?: "success" | "danger" | "warning" | "neutral" | "primary" | undefined;
|
|
376
376
|
appearance?: "outline" | "solid" | "simple" | undefined;
|
|
377
377
|
size?: "xs" | "sm" | "md" | "lg" | undefined;
|
|
378
378
|
isRounded?: boolean | "true" | undefined;
|
|
@@ -1138,17 +1138,17 @@ export declare const BannerSlim: {
|
|
|
1138
1138
|
marginBottom: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
|
|
1139
1139
|
};
|
|
1140
1140
|
}> | undefined;
|
|
1141
|
-
theme?: "success" | "danger" | "warning" | "
|
|
1142
|
-
"@sm"?: "success" | "danger" | "warning" | "
|
|
1143
|
-
"@md"?: "success" | "danger" | "warning" | "
|
|
1144
|
-
"@lg"?: "success" | "danger" | "warning" | "
|
|
1145
|
-
"@xl"?: "success" | "danger" | "warning" | "
|
|
1146
|
-
"@reducedMotion"?: "success" | "danger" | "warning" | "
|
|
1147
|
-
"@allowMotion"?: "success" | "danger" | "warning" | "
|
|
1148
|
-
"@hover"?: "success" | "danger" | "warning" | "
|
|
1149
|
-
"@initial"?: "success" | "danger" | "warning" | "
|
|
1141
|
+
theme?: "success" | "danger" | "warning" | "neutral" | "primary" | ({
|
|
1142
|
+
"@sm"?: "success" | "danger" | "warning" | "neutral" | "primary" | undefined;
|
|
1143
|
+
"@md"?: "success" | "danger" | "warning" | "neutral" | "primary" | undefined;
|
|
1144
|
+
"@lg"?: "success" | "danger" | "warning" | "neutral" | "primary" | undefined;
|
|
1145
|
+
"@xl"?: "success" | "danger" | "warning" | "neutral" | "primary" | undefined;
|
|
1146
|
+
"@reducedMotion"?: "success" | "danger" | "warning" | "neutral" | "primary" | undefined;
|
|
1147
|
+
"@allowMotion"?: "success" | "danger" | "warning" | "neutral" | "primary" | undefined;
|
|
1148
|
+
"@hover"?: "success" | "danger" | "warning" | "neutral" | "primary" | undefined;
|
|
1149
|
+
"@initial"?: "success" | "danger" | "warning" | "neutral" | "primary" | undefined;
|
|
1150
1150
|
} & {
|
|
1151
|
-
[x: string]: "success" | "danger" | "warning" | "
|
|
1151
|
+
[x: string]: "success" | "danger" | "warning" | "neutral" | "primary" | undefined;
|
|
1152
1152
|
}) | undefined;
|
|
1153
1153
|
prefix?: string | undefined | undefined;
|
|
1154
1154
|
form?: string | undefined | undefined;
|
|
@@ -1158,7 +1158,6 @@ export declare const BannerSlim: {
|
|
|
1158
1158
|
title?: string | undefined | undefined;
|
|
1159
1159
|
ref?: ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | null | undefined;
|
|
1160
1160
|
key?: React.Key | null | undefined;
|
|
1161
|
-
name?: string | undefined | undefined;
|
|
1162
1161
|
defaultChecked?: boolean | undefined | undefined;
|
|
1163
1162
|
defaultValue?: string | number | readonly string[] | undefined;
|
|
1164
1163
|
suppressContentEditableWarning?: boolean | undefined | undefined;
|
|
@@ -1412,6 +1411,7 @@ export declare const BannerSlim: {
|
|
|
1412
1411
|
onTransitionEnd?: React.TransitionEventHandler<HTMLButtonElement> | undefined;
|
|
1413
1412
|
onTransitionEndCapture?: React.TransitionEventHandler<HTMLButtonElement> | undefined;
|
|
1414
1413
|
as?: React.ReactNode;
|
|
1414
|
+
name?: string | undefined | undefined;
|
|
1415
1415
|
type?: "submit" | "reset" | "button" | undefined | undefined;
|
|
1416
1416
|
disabled?: boolean | undefined | undefined;
|
|
1417
1417
|
formAction?: string | undefined | undefined;
|
|
@@ -1420,6 +1420,18 @@ export declare const BannerSlim: {
|
|
|
1420
1420
|
formNoValidate?: boolean | undefined | undefined;
|
|
1421
1421
|
formTarget?: string | undefined | undefined;
|
|
1422
1422
|
value?: string | number | readonly string[] | undefined;
|
|
1423
|
+
emphasis?: "bold" | ({
|
|
1424
|
+
"@sm"?: "bold" | undefined;
|
|
1425
|
+
"@md"?: "bold" | undefined;
|
|
1426
|
+
"@lg"?: "bold" | undefined;
|
|
1427
|
+
"@xl"?: "bold" | undefined;
|
|
1428
|
+
"@reducedMotion"?: "bold" | undefined;
|
|
1429
|
+
"@allowMotion"?: "bold" | undefined;
|
|
1430
|
+
"@hover"?: "bold" | undefined;
|
|
1431
|
+
"@initial"?: "bold" | undefined;
|
|
1432
|
+
} & {
|
|
1433
|
+
[x: string]: "bold" | undefined;
|
|
1434
|
+
}) | undefined;
|
|
1423
1435
|
hasTooltip?: boolean | undefined;
|
|
1424
1436
|
tooltipSide?: "bottom" | "left" | "right" | "top" | undefined;
|
|
1425
1437
|
isRounded?: boolean | "true" | ({
|
|
@@ -1434,18 +1446,6 @@ export declare const BannerSlim: {
|
|
|
1434
1446
|
} & {
|
|
1435
1447
|
[x: string]: boolean | "true" | undefined;
|
|
1436
1448
|
}) | undefined;
|
|
1437
|
-
emphasis?: "bold" | ({
|
|
1438
|
-
"@sm"?: "bold" | undefined;
|
|
1439
|
-
"@md"?: "bold" | undefined;
|
|
1440
|
-
"@lg"?: "bold" | undefined;
|
|
1441
|
-
"@xl"?: "bold" | undefined;
|
|
1442
|
-
"@reducedMotion"?: "bold" | undefined;
|
|
1443
|
-
"@allowMotion"?: "bold" | undefined;
|
|
1444
|
-
"@hover"?: "bold" | undefined;
|
|
1445
|
-
"@initial"?: "bold" | undefined;
|
|
1446
|
-
} & {
|
|
1447
|
-
[x: string]: "bold" | undefined;
|
|
1448
|
-
}) | undefined;
|
|
1449
1449
|
containerSize?: "sm" | "md" | ({
|
|
1450
1450
|
"@sm"?: "sm" | "md" | undefined;
|
|
1451
1451
|
"@md"?: "sm" | "md" | undefined;
|
|
@@ -2,7 +2,7 @@ import * as React from 'react';
|
|
|
2
2
|
declare const StyledDismiss: import("@atom-learning/stitches-react/types/styled-component").StyledComponent<React.ForwardRefExoticComponent<Omit<Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
|
|
3
3
|
ref?: ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | null | undefined;
|
|
4
4
|
}, "appearance" | "size" | "css" | "theme" | "isRounded"> & import("@atom-learning/stitches-react/types/styled-component").TransformProps<{
|
|
5
|
-
theme?: "success" | "danger" | "warning" | "
|
|
5
|
+
theme?: "success" | "danger" | "warning" | "neutral" | "primary" | undefined;
|
|
6
6
|
appearance?: "outline" | "solid" | "simple" | undefined;
|
|
7
7
|
size?: "xs" | "sm" | "md" | "lg" | undefined;
|
|
8
8
|
isRounded?: boolean | "true" | undefined;
|
|
@@ -371,8 +371,8 @@ declare const StyledDismiss: import("@atom-learning/stitches-react/types/styled-
|
|
|
371
371
|
marginBottom: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
|
|
372
372
|
};
|
|
373
373
|
}> | undefined;
|
|
374
|
-
}, "appearance" | "size" | "theme" | "label" | "children" | "as" | "
|
|
375
|
-
theme?: "success" | "danger" | "warning" | "
|
|
374
|
+
}, "appearance" | "size" | "theme" | "label" | "children" | "as" | keyof import("../../../types").NavigatorActions | "hasTooltip" | "tooltipSide" | "isRounded"> & import("@atom-learning/stitches-react/types/styled-component").TransformProps<{
|
|
375
|
+
theme?: "success" | "danger" | "warning" | "neutral" | "primary" | undefined;
|
|
376
376
|
appearance?: "outline" | "solid" | "simple" | undefined;
|
|
377
377
|
size?: "xs" | "sm" | "md" | "lg" | undefined;
|
|
378
378
|
isRounded?: boolean | "true" | undefined;
|
|
@@ -3,7 +3,7 @@ import * as React from 'react';
|
|
|
3
3
|
import { NavigatorActions } from '../../types';
|
|
4
4
|
import { Override } from '../../utilities';
|
|
5
5
|
export declare const StyledButton: import("@atom-learning/stitches-react/types/styled-component").StyledComponent<"button", {
|
|
6
|
-
theme?: "success" | "danger" | "warning" | "
|
|
6
|
+
theme?: "success" | "danger" | "warning" | "neutral" | "primary" | "secondary" | undefined;
|
|
7
7
|
appearance?: "outline" | "solid" | undefined;
|
|
8
8
|
size?: "sm" | "md" | "lg" | "xl" | undefined;
|
|
9
9
|
isLoading?: boolean | "true" | undefined;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import*as t from"react";import{useFormContext as F,useController as x}from"react-hook-form";import{Checkbox as b}from"../checkbox/Checkbox.js";import"../field-wrapper/FieldWrapper.js";import{InlineFieldWrapper as v}from"../field-wrapper/InlineFieldWrapper.js";import"../form/Form.js";import{useFieldError as E}from"../form/useFieldError.js";var g=(e=>(e.ON="on",e.OFF="off",e))(g||{});const m=({css:e,label:f,name:l,validation:r,description:s,defaultChecked:u=!1,checked:o,onCheckedChange:n,...p})=>{const{control:h}=F(),{error:a}=E(l),{field:{ref:C,onChange:i,value:c,name:k}}=x({name:l,control:h,rules:r,defaultValue:u});return t.useEffect(()=>{typeof o<"u"&&i(o)},[o]),t.createElement(v,{css:e,description:s,error:a,label:f,required:Boolean(r==null?void 0:r.required)},t.createElement(b,{ref:C,name:k,...p,onCheckedChange:d=>{i(d),n==null||n(d)},value:c?"on":"off",checked:c,...a&&{state:"error"}}))};m.displayName="CheckboxField";export{m as CheckboxField};
|
|
1
|
+
import*as t from"react";import{useFormContext as F,useController as x}from"react-hook-form";import{Checkbox as b}from"../checkbox/Checkbox.js";import"../field-wrapper/FieldWrapper.js";import{InlineFieldWrapper as v}from"../field-wrapper/InlineFieldWrapper.js";import"../form/Form.js";import{useFieldError as E}from"../form/useFieldError.js";import"../form/useFormCustomContext.js";var g=(e=>(e.ON="on",e.OFF="off",e))(g||{});const m=({css:e,label:f,name:l,validation:r,description:s,defaultChecked:u=!1,checked:o,onCheckedChange:n,...p})=>{const{control:h}=F(),{error:a}=E(l),{field:{ref:C,onChange:i,value:c,name:k}}=x({name:l,control:h,rules:r,defaultValue:u});return t.useEffect(()=>{typeof o<"u"&&i(o)},[o]),t.createElement(v,{css:e,description:s,error:a,label:f,required:Boolean(r==null?void 0:r.required)},t.createElement(b,{ref:C,name:k,...p,onCheckedChange:d=>{i(d),n==null||n(d)},value:c?"on":"off",checked:c,...a&&{state:"error"}}))};m.displayName="CheckboxField";export{m as CheckboxField};
|
|
2
2
|
//# sourceMappingURL=CheckboxField.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CheckboxField.js","sources":["../../../src/components/checkbox-field/CheckboxField.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useController, useFormContext } from 'react-hook-form'\n\nimport { Checkbox } from '~/components/checkbox'\nimport {\n FieldElementWrapperProps,\n InlineFieldWrapper\n} from '~/components/field-wrapper'\nimport { useFieldError } from '~/components/form'\n\nenum CheckboxValue {\n ON = 'on',\n OFF = 'off'\n}\n\nexport const CheckboxField = ({\n css,\n label,\n name,\n validation,\n description,\n defaultChecked = false,\n checked,\n onCheckedChange,\n ...remainingProps\n}: React.ComponentProps<typeof Checkbox> & FieldElementWrapperProps) => {\n const { control } = useFormContext()\n const { error } = useFieldError(name)\n const {\n field: { ref, onChange, value: innerChecked, name: innerName }\n } = useController({\n name,\n control,\n rules: validation,\n defaultValue: defaultChecked\n })\n\n React.useEffect(() => {\n // Update the react-hook-form inner checked to match what is passed in.\n if (typeof checked !== 'undefined') onChange(checked)\n }, [checked])\n\n return (\n <InlineFieldWrapper\n css={css}\n description={description}\n error={error}\n label={label}\n required={Boolean(validation?.required)}\n >\n <Checkbox\n ref={ref}\n name={innerName}\n {...remainingProps}\n onCheckedChange={(newChecked) => {\n onChange(newChecked)\n onCheckedChange?.(newChecked)\n }}\n value={innerChecked ? CheckboxValue.ON : CheckboxValue.OFF}\n checked={innerChecked}\n {...(error && { state: 'error' })}\n />\n </InlineFieldWrapper>\n )\n}\n\nCheckboxField.displayName = 'CheckboxField'\n"],"names":["CheckboxValue","CheckboxField","css","label","name","validation","description","defaultChecked","checked","onCheckedChange","remainingProps","control","useFormContext","error","useFieldError","ref","onChange","innerChecked","innerName","useController","React","InlineFieldWrapper","Checkbox","newChecked"],"mappings":"
|
|
1
|
+
{"version":3,"file":"CheckboxField.js","sources":["../../../src/components/checkbox-field/CheckboxField.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useController, useFormContext } from 'react-hook-form'\n\nimport { Checkbox } from '~/components/checkbox'\nimport {\n FieldElementWrapperProps,\n InlineFieldWrapper\n} from '~/components/field-wrapper'\nimport { useFieldError } from '~/components/form'\n\nenum CheckboxValue {\n ON = 'on',\n OFF = 'off'\n}\n\nexport const CheckboxField = ({\n css,\n label,\n name,\n validation,\n description,\n defaultChecked = false,\n checked,\n onCheckedChange,\n ...remainingProps\n}: React.ComponentProps<typeof Checkbox> & FieldElementWrapperProps) => {\n const { control } = useFormContext()\n const { error } = useFieldError(name)\n const {\n field: { ref, onChange, value: innerChecked, name: innerName }\n } = useController({\n name,\n control,\n rules: validation,\n defaultValue: defaultChecked\n })\n\n React.useEffect(() => {\n // Update the react-hook-form inner checked to match what is passed in.\n if (typeof checked !== 'undefined') onChange(checked)\n }, [checked])\n\n return (\n <InlineFieldWrapper\n css={css}\n description={description}\n error={error}\n label={label}\n required={Boolean(validation?.required)}\n >\n <Checkbox\n ref={ref}\n name={innerName}\n {...remainingProps}\n onCheckedChange={(newChecked) => {\n onChange(newChecked)\n onCheckedChange?.(newChecked)\n }}\n value={innerChecked ? CheckboxValue.ON : CheckboxValue.OFF}\n checked={innerChecked}\n {...(error && { state: 'error' })}\n />\n </InlineFieldWrapper>\n )\n}\n\nCheckboxField.displayName = 'CheckboxField'\n"],"names":["CheckboxValue","CheckboxField","css","label","name","validation","description","defaultChecked","checked","onCheckedChange","remainingProps","control","useFormContext","error","useFieldError","ref","onChange","innerChecked","innerName","useController","React","InlineFieldWrapper","Checkbox","newChecked"],"mappings":"6XAUA,IAAKA,OACHA,EAAA,GAAK,KACLA,EAAA,IAAM,MAFHA,IAAAA,GAAA,CAKE,CAAA,EAAA,MAAMC,EAAgB,CAAC,CAC5B,IAAAC,EACA,MAAAC,EACA,KAAAC,EACA,WAAAC,EACA,YAAAC,EACA,eAAAC,EAAiB,GACjB,QAAAC,EACA,gBAAAC,KACGC,CACL,IAAwE,CACtE,KAAM,CAAE,QAAAC,CAAQ,EAAIC,EAAe,EAC7B,CAAE,MAAAC,CAAM,EAAIC,EAAcV,CAAI,EAC9B,CACJ,MAAO,CAAE,IAAAW,EAAK,SAAAC,EAAU,MAAOC,EAAc,KAAMC,CAAU,CAC/D,EAAIC,EAAc,CAChB,KAAAf,EACA,QAAAO,EACA,MAAON,EACP,aAAcE,CAChB,CAAC,EAED,OAAAa,EAAM,UAAU,IAAM,CAEhB,OAAOZ,EAAY,KAAaQ,EAASR,CAAO,CACtD,EAAG,CAACA,CAAO,CAAC,EAGVY,EAAA,cAACC,EAAA,CACC,IAAKnB,EACL,YAAaI,EACb,MAAOO,EACP,MAAOV,EACP,SAAU,QAAQE,GAAA,KAAAA,OAAAA,EAAY,QAAQ,CAEtCe,EAAAA,EAAA,cAACE,EAAA,CACC,IAAKP,EACL,KAAMG,EACL,GAAGR,EACJ,gBAAkBa,GAAe,CAC/BP,EAASO,CAAU,EACnBd,GAAA,MAAAA,EAAkBc,EACpB,EACA,MAAON,EAAe,KAAmB,MACzC,QAASA,EACR,GAAIJ,GAAS,CAAE,MAAO,OAAQ,CAAA,CACjC,CACF,CAEJ,EAEAZ,EAAc,YAAc"}
|
|
@@ -758,7 +758,6 @@ export declare const CheckboxGroup: (({ checked, defaultChecked, onCheckedChange
|
|
|
758
758
|
title?: string | undefined | undefined;
|
|
759
759
|
ref?: React.Ref<HTMLButtonElement> | undefined;
|
|
760
760
|
key?: React.Key | null | undefined;
|
|
761
|
-
name?: string | undefined | undefined;
|
|
762
761
|
defaultValue?: string | number | readonly string[] | undefined;
|
|
763
762
|
suppressContentEditableWarning?: boolean | undefined | undefined;
|
|
764
763
|
suppressHydrationWarning?: boolean | undefined | undefined;
|
|
@@ -1012,6 +1011,7 @@ export declare const CheckboxGroup: (({ checked, defaultChecked, onCheckedChange
|
|
|
1012
1011
|
onAnimationIterationCapture?: React.AnimationEventHandler<HTMLButtonElement> | undefined;
|
|
1013
1012
|
onTransitionEnd?: React.TransitionEventHandler<HTMLButtonElement> | undefined;
|
|
1014
1013
|
onTransitionEndCapture?: React.TransitionEventHandler<HTMLButtonElement> | undefined;
|
|
1014
|
+
name?: string | undefined | undefined;
|
|
1015
1015
|
type?: "submit" | "reset" | "button" | undefined | undefined;
|
|
1016
1016
|
disabled?: boolean | undefined | undefined;
|
|
1017
1017
|
formAction?: string | undefined | undefined;
|
|
@@ -1703,7 +1703,6 @@ export declare const CheckboxTree: (({ checked, defaultChecked, onCheckedChange,
|
|
|
1703
1703
|
title?: string | undefined | undefined;
|
|
1704
1704
|
ref?: ((((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement>) & (((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement>)) | null | undefined;
|
|
1705
1705
|
key?: React.Key | null | undefined;
|
|
1706
|
-
name?: string | undefined | undefined;
|
|
1707
1706
|
defaultChecked?: boolean | undefined | undefined;
|
|
1708
1707
|
defaultValue?: string | number | readonly string[] | undefined;
|
|
1709
1708
|
suppressContentEditableWarning?: boolean | undefined | undefined;
|
|
@@ -1958,6 +1957,7 @@ export declare const CheckboxTree: (({ checked, defaultChecked, onCheckedChange,
|
|
|
1958
1957
|
onAnimationIterationCapture?: (React.AnimationEventHandler<HTMLDivElement> & React.AnimationEventHandler<HTMLButtonElement>) | undefined;
|
|
1959
1958
|
onTransitionEnd?: (React.TransitionEventHandler<HTMLDivElement> & React.TransitionEventHandler<HTMLButtonElement>) | undefined;
|
|
1960
1959
|
onTransitionEndCapture?: (React.TransitionEventHandler<HTMLDivElement> & React.TransitionEventHandler<HTMLButtonElement>) | undefined;
|
|
1960
|
+
name?: string | undefined | undefined;
|
|
1961
1961
|
type?: "submit" | "reset" | "button" | undefined | undefined;
|
|
1962
1962
|
disabled?: boolean | undefined | undefined;
|
|
1963
1963
|
formAction?: string | undefined | undefined;
|
|
@@ -2419,7 +2419,6 @@ export declare const CheckboxTree: (({ checked, defaultChecked, onCheckedChange,
|
|
|
2419
2419
|
title?: string | undefined | undefined;
|
|
2420
2420
|
ref?: ((((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement>) & (((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement>)) | null | undefined;
|
|
2421
2421
|
key?: React.Key | null | undefined;
|
|
2422
|
-
name?: string | undefined | undefined;
|
|
2423
2422
|
defaultChecked?: boolean | undefined | undefined;
|
|
2424
2423
|
defaultValue?: string | number | readonly string[] | undefined;
|
|
2425
2424
|
suppressContentEditableWarning?: boolean | undefined | undefined;
|
|
@@ -2674,6 +2673,7 @@ export declare const CheckboxTree: (({ checked, defaultChecked, onCheckedChange,
|
|
|
2674
2673
|
onAnimationIterationCapture?: (React.AnimationEventHandler<HTMLDivElement> & React.AnimationEventHandler<HTMLButtonElement>) | undefined;
|
|
2675
2674
|
onTransitionEnd?: (React.TransitionEventHandler<HTMLDivElement> & React.TransitionEventHandler<HTMLButtonElement>) | undefined;
|
|
2676
2675
|
onTransitionEndCapture?: (React.TransitionEventHandler<HTMLDivElement> & React.TransitionEventHandler<HTMLButtonElement>) | undefined;
|
|
2676
|
+
name?: string | undefined | undefined;
|
|
2677
2677
|
type?: "submit" | "reset" | "button" | undefined | undefined;
|
|
2678
2678
|
disabled?: boolean | undefined | undefined;
|
|
2679
2679
|
formAction?: string | undefined | undefined;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import E from"invariant";import*as
|
|
1
|
+
import E from"invariant";import*as a from"react";import{useFormContext as k}from"react-hook-form";import{throttle as B}from"throttle-debounce";import{Box as P}from"../box/Box.js";import{Flex as D}from"../flex/Flex.js";import{InlineMessage as I}from"../inline-message/InlineMessage.js";import{PasswordField as M}from"../password-field/PasswordField.js";const p=({validate:u,defaultValidation:f,messageDirection:v="row",label:b="Create a password",name:r="password",css:w,validation:y,appearance:C,...x})=>{var i;const{formState:o,control:n}=k(),[s,m]=a.useState(!1),[c,d]=a.useState(f),F=o.touched[r],g=((i=o.errors[r])==null?void 0:i.type)==="validate"||Object.values(c).every(e=>!e),l=a.useCallback(async e=>{const t=await u(e);return t?(E(typeof t=="object","The validate function must return an object"),d(t),Object.values(t).every(S=>S)):!1},[d]),h=a.useCallback(B(500,l),[l]),j=(e,t)=>e?"success":t?"neutral":"error",O=n.mode.isOnBlur&&(s||F)||n.mode.isOnSubmit&&(s||o.isSubmitted&&g);return a.createElement(P,{css:w},a.createElement(M,{label:b,name:r,onChange:e=>h(e.target.value),onBlur:()=>m(!1),onFocus:()=>m(!0),validation:{...y,validate:l},appearance:C,...x}),O&&a.createElement(D,{css:{mt:"$2",gap:"$2",flexWrap:"wrap",flexDirection:v}},Object.entries(c).map(([e,t])=>a.createElement(I,{key:e,theme:j(t,s)},e))))};p.displayName="CreatePasswordField";export{p as CreatePasswordField};
|
|
2
2
|
//# sourceMappingURL=CreatePasswordField.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CreatePasswordField.js","sources":["../../../src/components/create-password-field/CreatePasswordField.tsx"],"sourcesContent":["import invariant from 'invariant'\nimport * as React from 'react'\nimport { useFormContext } from 'react-hook-form'\nimport { throttle } from 'throttle-debounce'\n\nimport type { CSS } from '~/stitches'\nimport { Override } from '~/utilities'\n\nimport { Box } from '../box'\nimport { FieldElementWrapperProps } from '../field-wrapper'\nimport { Flex } from '../flex'\nimport { InlineMessage } from '../inline-message'\nimport { PasswordField } from '../password-field'\nimport { PasswordInput } from '../password-input'\n\ntype ValidationResult = Record<string, boolean>\n\ntype CreatePasswordFieldProps = Override<\n React.ComponentProps<typeof PasswordInput> & FieldElementWrapperProps,\n {\n label?: string\n name?: string\n validate: (\n password: string\n ) => Promise<ValidationResult | undefined> | ValidationResult\n defaultValidation: ValidationResult\n messageDirection?: CSS['flexDirection']\n }\n>\n\nexport const CreatePasswordField = ({\n validate,\n defaultValidation,\n messageDirection = 'row',\n label = 'Create a password',\n name = 'password',\n css,\n validation,\n appearance,\n ...remainingProps\n}: CreatePasswordFieldProps) => {\n const { formState } = useFormContext()\n const [isFocused, setIsFocused] = React.useState<boolean>(false)\n const [validationResult, setValidationResult] =\n React.useState<ValidationResult>(defaultValidation)\n\n const touched = formState.touched[name]\n const error
|
|
1
|
+
{"version":3,"file":"CreatePasswordField.js","sources":["../../../src/components/create-password-field/CreatePasswordField.tsx"],"sourcesContent":["import invariant from 'invariant'\nimport * as React from 'react'\nimport { useFormContext } from 'react-hook-form'\nimport { throttle } from 'throttle-debounce'\n\nimport type { CSS } from '~/stitches'\nimport { Override } from '~/utilities'\n\nimport { Box } from '../box'\nimport { FieldElementWrapperProps } from '../field-wrapper'\nimport { Flex } from '../flex'\nimport { InlineMessage } from '../inline-message'\nimport { PasswordField } from '../password-field'\nimport { PasswordInput } from '../password-input'\n\ntype ValidationResult = Record<string, boolean>\n\ntype CreatePasswordFieldProps = Override<\n React.ComponentProps<typeof PasswordInput> & FieldElementWrapperProps,\n {\n label?: string\n name?: string\n validate: (\n password: string\n ) => Promise<ValidationResult | undefined> | ValidationResult\n defaultValidation: ValidationResult\n messageDirection?: CSS['flexDirection']\n }\n>\n\nexport const CreatePasswordField = ({\n validate,\n defaultValidation,\n messageDirection = 'row',\n label = 'Create a password',\n name = 'password',\n css,\n validation,\n appearance,\n ...remainingProps\n}: CreatePasswordFieldProps) => {\n const { formState, control } = useFormContext()\n const [isFocused, setIsFocused] = React.useState<boolean>(false)\n const [validationResult, setValidationResult] =\n React.useState<ValidationResult>(defaultValidation)\n\n const touched: boolean = formState.touched[name]\n const error =\n formState.errors[name]?.type === 'validate' ||\n Object.values(validationResult).every((isValid) => !isValid)\n\n const validatePassword = React.useCallback(\n async (password: string) => {\n const result = await validate(password)\n\n if (result) {\n invariant(\n typeof result === 'object',\n 'The validate function must return an object'\n )\n\n setValidationResult(result)\n return Object.values(result).every((isValid) => isValid)\n }\n\n return false\n },\n [setValidationResult]\n )\n\n const handleChange = React.useCallback(throttle(500, validatePassword), [\n validatePassword\n ])\n\n const getMessageTheme = (result: boolean, isFocused: boolean) => {\n if (result) return 'success'\n\n return isFocused ? 'neutral' : 'error'\n }\n\n const showValidation: boolean =\n (control.mode.isOnBlur && (isFocused || touched)) ||\n (control.mode.isOnSubmit && (isFocused || (formState.isSubmitted && error)))\n\n return (\n <Box css={css}>\n <PasswordField\n label={label}\n name={name}\n onChange={(e) => handleChange(e.target.value)}\n onBlur={() => setIsFocused(false)}\n onFocus={() => setIsFocused(true)}\n validation={{ ...validation, validate: validatePassword }}\n appearance={appearance}\n {...remainingProps}\n />\n {showValidation && (\n <Flex\n css={{\n mt: '$2',\n gap: '$2',\n flexWrap: 'wrap',\n flexDirection: messageDirection\n }}\n >\n {Object.entries(validationResult).map(([message, result]) => (\n <InlineMessage\n key={message}\n theme={getMessageTheme(result, isFocused)}\n >\n {message}\n </InlineMessage>\n ))}\n </Flex>\n )}\n </Box>\n )\n}\n\nCreatePasswordField.displayName = 'CreatePasswordField'\n"],"names":["CreatePasswordField","validate","defaultValidation","messageDirection","label","name","css","validation","appearance","remainingProps","_a","formState","control","useFormContext","isFocused","setIsFocused","React","validationResult","setValidationResult","touched","error","isValid","validatePassword","password","result","invariant","handleChange","throttle","getMessageTheme","showValidation","Box","PasswordField","Flex","message","InlineMessage"],"mappings":"gWA8Ba,MAAAA,EAAsB,CAAC,CAClC,SAAAC,EACA,kBAAAC,EACA,iBAAAC,EAAmB,MACnB,MAAAC,EAAQ,oBACR,KAAAC,EAAO,WACP,IAAAC,EACA,WAAAC,EACA,WAAAC,KACGC,CACL,IAAgC,CAxChC,IAAAC,EAyCE,KAAM,CAAE,UAAAC,EAAW,QAAAC,CAAQ,EAAIC,EAAe,EACxC,CAACC,EAAWC,CAAY,EAAIC,EAAM,SAAkB,EAAK,EACzD,CAACC,EAAkBC,CAAmB,EAC1CF,EAAM,SAA2Bd,CAAiB,EAE9CiB,EAAmBR,EAAU,QAAQN,GACrCe,IACJV,EAAAC,EAAU,OAAON,KAAjB,KAAA,OAAAK,EAAwB,QAAS,YACjC,OAAO,OAAOO,CAAgB,EAAE,MAAOI,GAAY,CAACA,CAAO,EAEvDC,EAAmBN,EAAM,YAC7B,MAAOO,GAAqB,CAC1B,MAAMC,EAAS,MAAMvB,EAASsB,CAAQ,EAEtC,OAAIC,GACFC,EACE,OAAOD,GAAW,SAClB,6CACF,EAEAN,EAAoBM,CAAM,EACnB,OAAO,OAAOA,CAAM,EAAE,MAAOH,GAAYA,CAAO,GAGlD,EACT,EACA,CAACH,CAAmB,CACtB,EAEMQ,EAAeV,EAAM,YAAYW,EAAS,IAAKL,CAAgB,EAAG,CACtEA,CACF,CAAC,EAEKM,EAAkB,CAACJ,EAAiBV,IACpCU,EAAe,UAEZV,EAAY,UAAY,QAG3Be,EACHjB,EAAQ,KAAK,WAAaE,GAAaK,IACvCP,EAAQ,KAAK,aAAeE,GAAcH,EAAU,aAAeS,GAEtE,OACEJ,EAAA,cAACc,EAAA,CAAI,IAAKxB,CACRU,EAAAA,EAAA,cAACe,EAAA,CACC,MAAO3B,EACP,KAAMC,EACN,SAAW,GAAMqB,EAAa,EAAE,OAAO,KAAK,EAC5C,OAAQ,IAAMX,EAAa,EAAK,EAChC,QAAS,IAAMA,EAAa,EAAI,EAChC,WAAY,CAAE,GAAGR,EAAY,SAAUe,CAAiB,EACxD,WAAYd,EACX,GAAGC,CAAAA,CACN,EACCoB,GACCb,EAAA,cAACgB,EAAA,CACC,IAAK,CACH,GAAI,KACJ,IAAK,KACL,SAAU,OACV,cAAe7B,CACjB,CAAA,EAEC,OAAO,QAAQc,CAAgB,EAAE,IAAI,CAAC,CAACgB,EAAST,CAAM,IACrDR,EAAA,cAACkB,EAAA,CACC,IAAKD,EACL,MAAOL,EAAgBJ,EAAQV,CAAS,CAAA,EAEvCmB,CACH,CACD,CACH,CAEJ,CAEJ,EAEAjC,EAAoB,YAAc"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import*as i from"react";import{useFormContext as F}from"react-hook-form";import{DateInput as b}from"../date-input/DateInput.js";import{FieldWrapper as g}from"../field-wrapper/FieldWrapper.js";import"../field-wrapper/InlineFieldWrapper.js";import"../form/Form.js";import{useFieldError as v}from"../form/useFieldError.js";const p=({css:m,hideLabel:l,label:d,name:e,validation:r,prompt:n,description:s,appearance:t,...c})=>{const{register:
|
|
1
|
+
import*as i from"react";import{useFormContext as F}from"react-hook-form";import{DateInput as b}from"../date-input/DateInput.js";import{FieldWrapper as g}from"../field-wrapper/FieldWrapper.js";import"../field-wrapper/InlineFieldWrapper.js";import"../form/Form.js";import{useFieldError as v}from"../form/useFieldError.js";import"../form/useFormCustomContext.js";const p=({css:m,hideLabel:l,label:d,name:e,validation:r,prompt:n,description:s,appearance:t,...c})=>{const{register:o,trigger:f}=F(),{error:a}=v(e),u=r?o(r):o;return i.createElement(g,{css:m,description:s,error:a,fieldId:e,hideLabel:l,label:d,prompt:n,required:Boolean(r==null?void 0:r.required),appearance:t},i.createElement(b,{id:e,name:e,ref:u,appearance:t,...a&&{state:"error"},...c,revalidate:f}))};p.displayName="DateField";export{p as DateField};
|
|
2
2
|
//# sourceMappingURL=DateField.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DateField.js","sources":["../../../src/components/date-field/DateField.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useFormContext } from 'react-hook-form'\n\nimport { DateInput, DateInputProps } from '~/components/date-input'\nimport {\n FieldElementWrapperProps,\n FieldWrapper\n} from '~/components/field-wrapper'\nimport { useFieldError } from '~/components/form'\n\ntype DateFieldProps = DateInputProps & FieldElementWrapperProps\n\nexport const DateField = ({\n css,\n hideLabel,\n label,\n name,\n validation,\n prompt,\n description,\n appearance,\n ...remainingProps\n}: DateFieldProps) => {\n const { register, trigger } = useFormContext()\n const { error } = useFieldError(name)\n const ref = validation ? register(validation) : register\n\n return (\n <FieldWrapper\n css={css}\n description={description}\n error={error}\n fieldId={name}\n hideLabel={hideLabel}\n label={label}\n prompt={prompt}\n required={Boolean(validation?.required)}\n appearance={appearance}\n >\n <DateInput\n id={name}\n name={name}\n ref={ref}\n appearance={appearance}\n {...(error && { state: 'error' })}\n {...remainingProps}\n revalidate={trigger}\n />\n </FieldWrapper>\n )\n}\n\nDateField.displayName = 'DateField'\n"],"names":["DateField","css","hideLabel","label","name","validation","prompt","description","appearance","remainingProps","register","trigger","useFormContext","error","useFieldError","ref","React","FieldWrapper","DateInput"],"mappings":"
|
|
1
|
+
{"version":3,"file":"DateField.js","sources":["../../../src/components/date-field/DateField.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useFormContext } from 'react-hook-form'\n\nimport { DateInput, DateInputProps } from '~/components/date-input'\nimport {\n FieldElementWrapperProps,\n FieldWrapper\n} from '~/components/field-wrapper'\nimport { useFieldError } from '~/components/form'\n\ntype DateFieldProps = DateInputProps & FieldElementWrapperProps\n\nexport const DateField = ({\n css,\n hideLabel,\n label,\n name,\n validation,\n prompt,\n description,\n appearance,\n ...remainingProps\n}: DateFieldProps) => {\n const { register, trigger } = useFormContext()\n const { error } = useFieldError(name)\n const ref = validation ? register(validation) : register\n\n return (\n <FieldWrapper\n css={css}\n description={description}\n error={error}\n fieldId={name}\n hideLabel={hideLabel}\n label={label}\n prompt={prompt}\n required={Boolean(validation?.required)}\n appearance={appearance}\n >\n <DateInput\n id={name}\n name={name}\n ref={ref}\n appearance={appearance}\n {...(error && { state: 'error' })}\n {...remainingProps}\n revalidate={trigger}\n />\n </FieldWrapper>\n )\n}\n\nDateField.displayName = 'DateField'\n"],"names":["DateField","css","hideLabel","label","name","validation","prompt","description","appearance","remainingProps","register","trigger","useFormContext","error","useFieldError","ref","React","FieldWrapper","DateInput"],"mappings":"wWAYa,MAAAA,EAAY,CAAC,CACxB,IAAAC,EACA,UAAAC,EACA,MAAAC,EACA,KAAAC,EACA,WAAAC,EACA,OAAAC,EACA,YAAAC,EACA,WAAAC,KACGC,CACL,IAAsB,CACpB,KAAM,CAAE,SAAAC,EAAU,QAAAC,CAAQ,EAAIC,EAAe,EACvC,CAAE,MAAAC,CAAM,EAAIC,EAAcV,CAAI,EAC9BW,EAAMV,EAAaK,EAASL,CAAU,EAAIK,EAEhD,OACEM,EAAA,cAACC,EAAA,CACC,IAAKhB,EACL,YAAaM,EACb,MAAOM,EACP,QAAST,EACT,UAAWF,EACX,MAAOC,EACP,OAAQG,EACR,SAAU,QAAQD,GAAA,KAAA,OAAAA,EAAY,QAAQ,EACtC,WAAYG,CAAAA,EAEZQ,EAAA,cAACE,EAAA,CACC,GAAId,EACJ,KAAMA,EACN,IAAKW,EACL,WAAYP,EACX,GAAIK,GAAS,CAAE,MAAO,OAAQ,EAC9B,GAAGJ,EACJ,WAAYE,CAAAA,CACd,CACF,CAEJ,EAEAX,EAAU,YAAc"}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
|
-
import React from 'react';
|
|
1
|
+
import * as React from 'react';
|
|
2
2
|
import type { DefaultValues, FieldValues, Mode, SubmitErrorHandler, SubmitHandler, UseFormMethods } from 'react-hook-form';
|
|
3
|
+
import { type FormCustomContextType } from './useFormCustomContext';
|
|
3
4
|
declare const StyledForm: import("@atom-learning/stitches-react/types/styled-component").StyledComponent<"form", {}, {
|
|
4
5
|
sm: string;
|
|
5
6
|
md: string;
|
|
@@ -373,7 +374,7 @@ interface FormProps<TFormData extends FieldValues> extends StyledFormProps {
|
|
|
373
374
|
children: React.ReactNode | ((methods: UseFormMethods<TFormData>) => React.ReactNode);
|
|
374
375
|
}
|
|
375
376
|
export declare const Form: {
|
|
376
|
-
<TFormData extends FieldValues>(props: FormProps<TFormData>): React.JSX.Element;
|
|
377
|
+
<TFormData extends FieldValues>(props: FormProps<TFormData> & FormCustomContextType): React.JSX.Element;
|
|
377
378
|
displayName: string;
|
|
378
379
|
};
|
|
379
380
|
export {};
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import r from"react";import{useForm as
|
|
1
|
+
import*as r from"react";import{useForm as f,FormProvider as p}from"react-hook-form";import{styled as s}from"../../stitches.js";import{FormCustomContext as c}from"./useFormCustomContext.js";const F=s("form",{}),t=m=>{const{children:e,defaultValues:a,validationMode:n="onBlur",onSubmit:l,onError:i,appearance:u,...d}=m,o=f({defaultValues:a,mode:n});return r.createElement(p,{...o},r.createElement(c.Provider,{value:{appearance:u}},r.createElement(F,{"aria-label":"form",onSubmit:o.handleSubmit(l,i),...d},typeof e=="function"?e(o):e)))};t.displayName="Form";export{t as Form};
|
|
2
2
|
//# sourceMappingURL=Form.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Form.js","sources":["../../../src/components/form/Form.tsx"],"sourcesContent":["import React from 'react'\nimport type {\n DefaultValues,\n FieldValues,\n Mode,\n SubmitErrorHandler,\n SubmitHandler,\n UseFormMethods\n} from 'react-hook-form'\nimport { FormProvider, useForm } from 'react-hook-form'\n\nimport { styled } from '~/stitches'\n\nconst StyledForm = styled('form', {})\n\ntype StyledFormProps = Omit<\n React.ComponentPropsWithoutRef<typeof StyledForm>,\n 'onSubmit' | 'onError'\n>\n\ninterface FormProps<TFormData extends FieldValues> extends StyledFormProps {\n defaultValues?: DefaultValues<TFormData>\n validationMode?: Mode\n onSubmit: SubmitHandler<TFormData>\n onError?: SubmitErrorHandler<TFormData>\n children:\n | React.ReactNode\n | ((methods: UseFormMethods<TFormData>) => React.ReactNode)\n}\n\nexport const Form = <TFormData extends FieldValues>(\n props: FormProps<TFormData
|
|
1
|
+
{"version":3,"file":"Form.js","sources":["../../../src/components/form/Form.tsx"],"sourcesContent":["import * as React from 'react'\nimport type {\n DefaultValues,\n FieldValues,\n Mode,\n SubmitErrorHandler,\n SubmitHandler,\n UseFormMethods\n} from 'react-hook-form'\nimport { FormProvider, useForm } from 'react-hook-form'\n\nimport { styled } from '~/stitches'\nimport {\n type FormCustomContextType,\n FormCustomContext\n} from './useFormCustomContext'\n\nconst StyledForm = styled('form', {})\n\ntype StyledFormProps = Omit<\n React.ComponentPropsWithoutRef<typeof StyledForm>,\n 'onSubmit' | 'onError'\n>\n\ninterface FormProps<TFormData extends FieldValues> extends StyledFormProps {\n defaultValues?: DefaultValues<TFormData>\n validationMode?: Mode\n onSubmit: SubmitHandler<TFormData>\n onError?: SubmitErrorHandler<TFormData>\n children:\n | React.ReactNode\n | ((methods: UseFormMethods<TFormData>) => React.ReactNode)\n}\n\nexport const Form = <TFormData extends FieldValues>(\n props: FormProps<TFormData> & FormCustomContextType\n) => {\n const {\n children,\n defaultValues,\n validationMode = 'onBlur',\n onSubmit,\n onError,\n appearance,\n ...rest\n } = props\n\n const methods = useForm<TFormData>({\n defaultValues,\n mode: validationMode\n })\n\n return (\n <FormProvider {...methods}>\n <FormCustomContext.Provider value={{ appearance }}>\n <StyledForm\n aria-label=\"form\"\n onSubmit={methods.handleSubmit(onSubmit, onError)}\n {...rest}\n >\n {typeof children === 'function' ? children(methods) : children}\n </StyledForm>\n </FormCustomContext.Provider>\n </FormProvider>\n )\n}\n\nForm.displayName = 'Form'\n"],"names":["StyledForm","styled","Form","props","children","defaultValues","validationMode","onSubmit","onError","appearance","rest","methods","useForm","React","FormProvider","FormCustomContext"],"mappings":"6LAiBA,MAAMA,EAAaC,EAAO,OAAQ,CAAE,CAAA,EAiBvBC,EACXC,GACG,CACH,KAAM,CACJ,SAAAC,EACA,cAAAC,EACA,eAAAC,EAAiB,SACjB,SAAAC,EACA,QAAAC,EACA,WAAAC,KACGC,CACL,EAAIP,EAEEQ,EAAUC,EAAmB,CACjC,cAAAP,EACA,KAAMC,CACR,CAAC,EAED,OACEO,EAAA,cAACC,EAAA,CAAc,GAAGH,GAChBE,EAAA,cAACE,EAAkB,SAAlB,CAA2B,MAAO,CAAE,WAAAN,CAAW,CAAA,EAC9CI,EAAA,cAACb,EAAA,CACC,aAAW,OACX,SAAUW,EAAQ,aAAaJ,EAAUC,CAAO,EAC/C,GAAGE,CAEH,EAAA,OAAON,GAAa,WAAaA,EAASO,CAAO,EAAIP,CACxD,CACF,CACF,CAEJ,EAEAF,EAAK,YAAc"}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { InputField } from '../input-field';
|
|
3
|
+
export type FormCustomContextType = {
|
|
4
|
+
appearance?: React.ComponentProps<typeof InputField>['appearance'];
|
|
5
|
+
} | undefined;
|
|
6
|
+
export declare const FormCustomContext: React.Context<FormCustomContextType>;
|
|
7
|
+
export declare const useFormCustomContext: () => FormCustomContextType;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useFormCustomContext.js","sources":["../../../src/components/form/useFormCustomContext.ts"],"sourcesContent":["import * as React from 'react'\nimport { InputField } from '../input-field'\n\nexport type FormCustomContextType =\n | {\n appearance?: React.ComponentProps<typeof InputField>['appearance']\n }\n | undefined\n\nexport const FormCustomContext = React.createContext<FormCustomContextType>({\n appearance: 'standard'\n})\n\nexport const useFormCustomContext = () => React.useContext(FormCustomContext)\n"],"names":["FormCustomContext","React","useFormCustomContext"],"mappings":"wBASa,MAAAA,EAAoBC,EAAM,cAAqC,CAC1E,WAAY,UACd,CAAC,EAEYC,EAAuB,IAAMD,EAAM,WAAWD,CAAiB"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import*as r from"react";import{styled as
|
|
1
|
+
import*as r from"react";import{styled as m}from"../../stitches.js";import"../../utilities/css-wrapper/CSSWrapper.js";import"../../utilities/no-overflow-wrapper/NoOverflowWrapper.js";import"color2k";import"../../utilities/style/keyframe-animations.js";import{overrideStitchesVariantValue as u}from"../../utilities/override-stitches-variant-value/overrideStitchesVariantValue.js";import{disabledStyle as b}from"../../utilities/style/disabledStyle.js";import{Flex as g}from"../flex/Flex.js";import{Text as h}from"../text/Text.js";const i=m(g,{color:"$grey1000",transition:"background 100ms ease-out, borderColor 100ms ease-out",width:"100%","&::placeholder":{color:"$grey700",opacity:1},variants:{appearance:{standard:{background:"white",border:"1px solid $grey800",borderRadius:"$0","&:focus-within":{borderColor:"$blue800"}},modern:{background:"$grey100",border:"none",borderRadius:"$1","&:focus-within":{outline:"2px solid $blue800",outlineOffset:1,zIndex:1}}},size:{sm:{height:"$3"},md:{height:"$4"},lg:{height:"$5"},xl:{height:"$6"}},disabled:{true:b},state:{error:{}}},compoundVariants:[{state:"error",appearance:"standard",css:{borderColor:"$danger"}},{state:"error",appearance:"modern",css:{bg:"$dangerLight","&:focus-within":{outlineColor:"$danger"}}}]});i.displayName="InputBackground";const f=m.withConfig({shouldForwardStitchesProp:e=>["as"].includes(e)})(h,{appearance:"none",border:"none",background:"none",backgroundImage:"none",backgroundColor:"transparent",boxShadow:"none",boxSizing:"border-box","&:focus":{outline:"none"},px:"$3",size:"100%"}),x={sm:"sm",md:"md",lg:"md",xl:"lg"},p=r.forwardRef(({type:e="text",css:a,size:o,...n},t)=>{const s=r.useMemo(()=>u(o,d=>x[d]),[o]);return r.createElement(f,{ref:t,as:"input",type:e==="number"?"text":e,inputMode:e==="number"?"numeric":void 0,pattern:e==="number"?"[0-9]*":void 0,size:s,...n})});p.displayName="InputText";const c=r.forwardRef(({className:e,size:a="md",appearance:o="standard",state:n,disabled:t,css:s,...d},l)=>r.createElement(i,{size:a,appearance:o,disabled:t,state:n,css:s,className:e},r.createElement(p,{size:a,ref:l,disabled:t,...d})));c.displayName="Input";export{c as Input,i as InputBackground,p as InputText};
|
|
2
2
|
//# sourceMappingURL=Input.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Input.js","sources":["../../../src/components/input/Input.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/stitches'\nimport { disabledStyle } from '~/utilities'\nimport { overrideStitchesVariantValue } from '~/utilities/override-stitches-variant-value/overrideStitchesVariantValue'\n\nimport { Flex } from '../flex'\nimport { Text } from '../text'\n\nexport const InputBackground = styled(Flex, {\n
|
|
1
|
+
{"version":3,"file":"Input.js","sources":["../../../src/components/input/Input.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/stitches'\nimport { disabledStyle } from '~/utilities'\nimport { overrideStitchesVariantValue } from '~/utilities/override-stitches-variant-value/overrideStitchesVariantValue'\n\nimport { Flex } from '../flex'\nimport { Text } from '../text'\n\nexport const InputBackground = styled(Flex, {\n color: '$grey1000',\n transition: 'background 100ms ease-out, borderColor 100ms ease-out',\n width: '100%',\n '&::placeholder': {\n color: '$grey700',\n opacity: 1\n },\n variants: {\n appearance: {\n standard: {\n background: 'white',\n border: '1px solid $grey800',\n borderRadius: '$0',\n '&:focus-within': {\n borderColor: '$blue800'\n }\n },\n modern: {\n background: '$grey100',\n border: 'none',\n borderRadius: '$1',\n '&:focus-within': {\n outline: '2px solid $blue800',\n outlineOffset: 1,\n zIndex: 1\n }\n }\n },\n size: {\n sm: { height: '$3' },\n md: { height: '$4' },\n lg: { height: '$5' },\n xl: { height: '$6' }\n },\n disabled: {\n true: disabledStyle\n },\n state: {\n error: {}\n }\n },\n compoundVariants: [\n {\n state: 'error',\n appearance: 'standard',\n css: { borderColor: '$danger' }\n },\n {\n state: 'error',\n appearance: 'modern',\n css: {\n bg: '$dangerLight',\n '&:focus-within': {\n outlineColor: '$danger'\n }\n }\n }\n ]\n})\n\nInputBackground.displayName = 'InputBackground'\n\nconst StyledInputText = styled.withConfig({\n shouldForwardStitchesProp: (propName) => ['as'].includes(propName)\n})(Text as unknown as 'input', {\n // unsets\n appearance: 'none',\n border: 'none',\n background: 'none',\n backgroundImage: 'none',\n backgroundColor: 'transparent',\n boxShadow: 'none', // prevent default iOS default styling\n boxSizing: 'border-box',\n '&:focus': {\n outline: 'none'\n },\n //\n px: '$3',\n size: '100%'\n})\n\nexport type InputTextProps = Omit<\n React.ComponentProps<typeof StyledInputText>,\n 'size' | 'type' | 'as'\n> & {\n size: React.ComponentProps<typeof Text>['size']\n // override default 'type' property to prevent Input from being used to render\n // checkboxes, radios etc — we have dedicated components for them\n type?: 'text' | 'number' | 'email' | 'password' | 'tel' | 'url' | 'search'\n as?: never\n}\n\nconst toTextSize = {\n sm: 'sm',\n md: 'md',\n lg: 'md',\n xl: 'lg'\n}\n\nexport const InputText: React.ForwardRefExoticComponent<InputTextProps> =\n React.forwardRef(({ type = 'text', css, size, ...rest }, ref) => {\n const textSize = React.useMemo(\n () => overrideStitchesVariantValue(size, (s) => toTextSize[s]),\n [size]\n )\n\n return (\n <StyledInputText\n ref={ref}\n as=\"input\"\n type={type === 'number' ? 'text' : type}\n inputMode={type === 'number' ? 'numeric' : undefined}\n pattern={type === 'number' ? '[0-9]*' : undefined}\n size={textSize}\n {...rest}\n />\n )\n })\n\nInputText.displayName = 'InputText'\n\ntype InputBackgroundProps = React.ComponentProps<typeof InputBackground>\nexport type InputProps = Omit<\n React.ComponentProps<typeof InputText>,\n 'size' | 'state' | 'appearance'\n> & {\n size?: InputBackgroundProps['size']\n state?: InputBackgroundProps['state']\n appearance?: InputBackgroundProps['appearance']\n}\n\nexport const Input: React.ForwardRefExoticComponent<InputProps> =\n React.forwardRef(\n (\n {\n className,\n size = 'md',\n appearance = 'standard',\n state,\n disabled,\n css,\n ...rest\n },\n ref\n ) => {\n return (\n <InputBackground\n size={size}\n appearance={appearance}\n disabled={disabled}\n state={state}\n css={css}\n className={className}\n >\n <InputText size={size} ref={ref} disabled={disabled} {...rest} />\n </InputBackground>\n )\n }\n )\n\nInput.displayName = 'Input'\n"],"names":["InputBackground","styled","Flex","disabledStyle","StyledInputText","propName","Text","toTextSize","InputText","React","type","css","size","rest","ref","textSize","overrideStitchesVariantValue","s","Input","className","appearance","state","disabled"],"mappings":"+gBASO,MAAMA,EAAkBC,EAAOC,EAAM,CAC1C,MAAO,YACP,WAAY,wDACZ,MAAO,OACP,iBAAkB,CAChB,MAAO,WACP,QAAS,CACX,EACA,SAAU,CACR,WAAY,CACV,SAAU,CACR,WAAY,QACZ,OAAQ,qBACR,aAAc,KACd,iBAAkB,CAChB,YAAa,UACf,CACF,EACA,OAAQ,CACN,WAAY,WACZ,OAAQ,OACR,aAAc,KACd,iBAAkB,CAChB,QAAS,qBACT,cAAe,EACf,OAAQ,CACV,CACF,CACF,EACA,KAAM,CACJ,GAAI,CAAE,OAAQ,IAAK,EACnB,GAAI,CAAE,OAAQ,IAAK,EACnB,GAAI,CAAE,OAAQ,IAAK,EACnB,GAAI,CAAE,OAAQ,IAAK,CACrB,EACA,SAAU,CACR,KAAMC,CACR,EACA,MAAO,CACL,MAAO,CAAA,CACT,CACF,EACA,iBAAkB,CAChB,CACE,MAAO,QACP,WAAY,WACZ,IAAK,CAAE,YAAa,SAAU,CAChC,EACA,CACE,MAAO,QACP,WAAY,SACZ,IAAK,CACH,GAAI,eACJ,iBAAkB,CAChB,aAAc,SAChB,CACF,CACF,CACF,CACF,CAAC,EAEDH,EAAgB,YAAc,kBAE9B,MAAMI,EAAkBH,EAAO,WAAW,CACxC,0BAA4BI,GAAa,CAAC,IAAI,EAAE,SAASA,CAAQ,CACnE,CAAC,EAAEC,EAA4B,CAE7B,WAAY,OACZ,OAAQ,OACR,WAAY,OACZ,gBAAiB,OACjB,gBAAiB,cACjB,UAAW,OACX,UAAW,aACX,UAAW,CACT,QAAS,MACX,EAEA,GAAI,KACJ,KAAM,MACR,CAAC,EAaKC,EAAa,CACjB,GAAI,KACJ,GAAI,KACJ,GAAI,KACJ,GAAI,IACN,EAEaC,EACXC,EAAM,WAAW,CAAC,CAAE,KAAAC,EAAO,OAAQ,IAAAC,EAAK,KAAAC,KAASC,CAAK,EAAGC,IAAQ,CAC/D,MAAMC,EAAWN,EAAM,QACrB,IAAMO,EAA6BJ,EAAOK,GAAMV,EAAWU,EAAE,EAC7D,CAACL,CAAI,CACP,EAEA,OACEH,EAAA,cAACL,EAAA,CACC,IAAKU,EACL,GAAG,QACH,KAAMJ,IAAS,SAAW,OAASA,EACnC,UAAWA,IAAS,SAAW,UAAY,OAC3C,QAASA,IAAS,SAAW,SAAW,OACxC,KAAMK,EACL,GAAGF,CAAAA,CACN,CAEJ,CAAC,EAEHL,EAAU,YAAc,YAYjB,MAAMU,EACXT,EAAM,WACJ,CACE,CACE,UAAAU,EACA,KAAAP,EAAO,KACP,WAAAQ,EAAa,WACb,MAAAC,EACA,SAAAC,EACA,IAAAX,KACGE,CACL,EACAC,IAGEL,EAAA,cAACT,EAAA,CACC,KAAMY,EACN,WAAYQ,EACZ,SAAUE,EACV,MAAOD,EACP,IAAKV,EACL,UAAWQ,CAEXV,EAAAA,EAAA,cAACD,EAAA,CAAU,KAAMI,EAAM,IAAKE,EAAK,SAAUQ,EAAW,GAAGT,CAAAA,CAAM,CACjE,CAGN,EAEFK,EAAM,YAAc"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import*as
|
|
1
|
+
import*as i from"react";import{useFormContext as b}from"react-hook-form";import{FieldWrapper as I}from"../field-wrapper/FieldWrapper.js";import"../field-wrapper/InlineFieldWrapper.js";import"../form/Form.js";import{useFieldError as v}from"../form/useFieldError.js";import{useFormCustomContext as x}from"../form/useFormCustomContext.js";import{Input as C}from"../input/Input.js";const m=({css:n,label:l,name:e,validation:r,prompt:d,description:s,hideLabel:c,appearance:u,...f})=>{const{register:o}=b(),t=x(),{error:p}=v(e),F=r?o(r):o,a=(t==null?void 0:t.appearance)||u;return i.createElement(I,{css:n,description:s,error:p,fieldId:e,hideLabel:c,label:l,prompt:d,required:Boolean(r==null?void 0:r.required),appearance:a},i.createElement(C,{id:e,name:e,ref:F,appearance:a,...p&&{state:"error"},...f}))};m.displayName="InputField";export{m as InputField};
|
|
2
2
|
//# sourceMappingURL=InputField.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InputField.js","sources":["../../../src/components/input-field/InputField.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useFormContext } from 'react-hook-form'\n\nimport {\n FieldElementWrapperProps,\n FieldWrapper\n} from '~/components/field-wrapper'\nimport { useFieldError } from '~/components/form'\nimport { Input, InputProps } from '~/components/input'\n\ntype InputFieldProps = InputProps & FieldElementWrapperProps\n\nexport const InputField = ({\n css,\n label,\n name,\n validation,\n prompt,\n description,\n hideLabel,\n appearance,\n ...remainingProps\n}: InputFieldProps) => {\n const { register } = useFormContext()\n const { error } = useFieldError(name)\n const ref = validation ? register(validation) : register\n\n return (\n <FieldWrapper\n css={css}\n description={description}\n error={error}\n fieldId={name}\n hideLabel={hideLabel}\n label={label}\n prompt={prompt}\n required={Boolean(validation?.required)}\n appearance={
|
|
1
|
+
{"version":3,"file":"InputField.js","sources":["../../../src/components/input-field/InputField.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useFormContext } from 'react-hook-form'\n\nimport {\n FieldElementWrapperProps,\n FieldWrapper\n} from '~/components/field-wrapper'\nimport { useFieldError, useFormCustomContext } from '~/components/form'\nimport { Input, InputProps } from '~/components/input'\n\ntype InputFieldProps = InputProps & FieldElementWrapperProps\n\nexport const InputField = ({\n css,\n label,\n name,\n validation,\n prompt,\n description,\n hideLabel,\n appearance,\n ...remainingProps\n}: InputFieldProps) => {\n const { register } = useFormContext()\n const context = useFormCustomContext()\n const { error } = useFieldError(name)\n\n const ref = validation ? register(validation) : register\n const formAppearance = context?.appearance || appearance\n\n return (\n <FieldWrapper\n css={css}\n description={description}\n error={error}\n fieldId={name}\n hideLabel={hideLabel}\n label={label}\n prompt={prompt}\n required={Boolean(validation?.required)}\n appearance={formAppearance}\n >\n <Input\n id={name}\n name={name}\n ref={ref}\n appearance={formAppearance}\n {...(error && { state: 'error' })}\n {...remainingProps}\n />\n </FieldWrapper>\n )\n}\n\nInputField.displayName = 'InputField'\n"],"names":["InputField","css","label","name","validation","prompt","description","hideLabel","appearance","remainingProps","register","useFormContext","context","useFormCustomContext","error","useFieldError","ref","formAppearance","React","FieldWrapper","Input"],"mappings":"0XAYa,MAAAA,EAAa,CAAC,CACzB,IAAAC,EACA,MAAAC,EACA,KAAAC,EACA,WAAAC,EACA,OAAAC,EACA,YAAAC,EACA,UAAAC,EACA,WAAAC,KACGC,CACL,IAAuB,CACrB,KAAM,CAAE,SAAAC,CAAS,EAAIC,EAAe,EAC9BC,EAAUC,EACV,EAAA,CAAE,MAAAC,CAAM,EAAIC,EAAcZ,CAAI,EAE9Ba,EAAMZ,EAAaM,EAASN,CAAU,EAAIM,EAC1CO,GAAiBL,GAAA,KAAAA,OAAAA,EAAS,aAAcJ,EAE9C,OACEU,EAAA,cAACC,EAAA,CACC,IAAKlB,EACL,YAAaK,EACb,MAAOQ,EACP,QAASX,EACT,UAAWI,EACX,MAAOL,EACP,OAAQG,EACR,SAAU,QAAQD,GAAA,KAAAA,OAAAA,EAAY,QAAQ,EACtC,WAAYa,CAAAA,EAEZC,EAAA,cAACE,EAAA,CACC,GAAIjB,EACJ,KAAMA,EACN,IAAKa,EACL,WAAYC,EACX,GAAIH,GAAS,CAAE,MAAO,OAAQ,EAC9B,GAAGL,CAAAA,CACN,CACF,CAEJ,EAEAT,EAAW,YAAc"}
|
|
@@ -3,7 +3,7 @@ import { ActionIcon } from '../action-icon';
|
|
|
3
3
|
declare const StyledStepperButton: import("@atom-learning/stitches-react/types/styled-component").StyledComponent<React.ForwardRefExoticComponent<Omit<Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
|
|
4
4
|
ref?: ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | null | undefined;
|
|
5
5
|
}, "appearance" | "size" | "css" | "theme" | "isRounded"> & import("@atom-learning/stitches-react/types/styled-component").TransformProps<{
|
|
6
|
-
theme?: "success" | "danger" | "warning" | "
|
|
6
|
+
theme?: "success" | "danger" | "warning" | "neutral" | "primary" | undefined;
|
|
7
7
|
appearance?: "outline" | "solid" | "simple" | undefined;
|
|
8
8
|
size?: "xs" | "sm" | "md" | "lg" | undefined;
|
|
9
9
|
isRounded?: boolean | "true" | undefined;
|
|
@@ -372,8 +372,8 @@ declare const StyledStepperButton: import("@atom-learning/stitches-react/types/s
|
|
|
372
372
|
marginBottom: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
|
|
373
373
|
};
|
|
374
374
|
}> | undefined;
|
|
375
|
-
}, "appearance" | "size" | "theme" | "label" | "children" | "as" | "
|
|
376
|
-
theme?: "success" | "danger" | "warning" | "
|
|
375
|
+
}, "appearance" | "size" | "theme" | "label" | "children" | "as" | keyof import("../../types").NavigatorActions | "hasTooltip" | "tooltipSide" | "isRounded"> & import("@atom-learning/stitches-react/types/styled-component").TransformProps<{
|
|
376
|
+
theme?: "success" | "danger" | "warning" | "neutral" | "primary" | undefined;
|
|
377
377
|
appearance?: "outline" | "solid" | "simple" | undefined;
|
|
378
378
|
size?: "xs" | "sm" | "md" | "lg" | undefined;
|
|
379
379
|
isRounded?: boolean | "true" | undefined;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import*as
|
|
1
|
+
import*as o from"react";import{useFormContext as E,useController as N}from"react-hook-form";import{FieldWrapper as g}from"../field-wrapper/FieldWrapper.js";import"../field-wrapper/InlineFieldWrapper.js";import"../form/Form.js";import{useFieldError as y}from"../form/useFieldError.js";import{useFormCustomContext as q}from"../form/useFormCustomContext.js";import{NumberInput as L}from"../number-input/NumberInput.js";const d=({css:s,defaultValue:l=0,hideLabel:f,value:r,prompt:c,description:C,label:b,name:e,validation:a,onValueChange:t,appearance:v,...F})=>{const{control:h}=E(),n=q(),{field:{ref:I,onChange:u,value:V,name:x}}=N({name:e,control:h,rules:a,defaultValue:l}),{error:i}=y(e),p=(n==null?void 0:n.appearance)||v;return o.useEffect(()=>{typeof r<"u"&&u(r)},[r]),o.createElement(g,{css:s,description:C,error:i,fieldId:e,hideLabel:f,label:b,prompt:c,required:Boolean(a==null?void 0:a.required),appearance:p},o.createElement(L,{id:e,name:x,ref:I,...i&&{state:"error","aria-invalid":!0},defaultValue:l,onValueChange:m=>{u(m),t==null||t(m)},value:V,appearance:p,...F}))};d.displayName="NumberInputField";export{d as NumberInputField};
|
|
2
2
|
//# sourceMappingURL=NumberInputField.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NumberInputField.js","sources":["../../../src/components/number-input-field/NumberInputField.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useController, useFormContext } from 'react-hook-form'\n\nimport { FieldWrapper } from '~/components/field-wrapper'\nimport {
|
|
1
|
+
{"version":3,"file":"NumberInputField.js","sources":["../../../src/components/number-input-field/NumberInputField.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useController, useFormContext } from 'react-hook-form'\n\nimport { FieldWrapper } from '~/components/field-wrapper'\nimport {\n useFieldError,\n useFormCustomContext,\n ValidationOptions\n} from '~/components/form'\nimport type { CSS } from '~/stitches'\n\nimport type { NumberInputProps } from '../number-input/NumberInput'\nimport { NumberInput } from '../number-input/NumberInput'\n\nexport interface NumberInputFieldProps extends NumberInputProps {\n css?: CSS\n hideLabel?: boolean\n description?: string\n label: string\n name: string\n prompt?: { link: string; label: string }\n validation?: ValidationOptions\n}\n\nexport const NumberInputField = ({\n css,\n defaultValue = 0,\n hideLabel,\n value,\n prompt,\n description,\n label,\n name,\n validation,\n onValueChange,\n appearance,\n ...remainingProps\n}: NumberInputFieldProps) => {\n const { control } = useFormContext()\n const context = useFormCustomContext()\n const {\n field: { ref, onChange, value: innerValue, name: innerName }\n } = useController({\n name,\n control,\n rules: validation,\n defaultValue\n })\n const { error } = useFieldError(name)\n\n const formAppearance = context?.appearance || appearance\n\n React.useEffect(() => {\n // Update the react-hook-form inner value to match what is passed in.\n if (typeof value !== 'undefined') onChange(value)\n }, [value])\n\n return (\n <FieldWrapper\n css={css}\n description={description}\n error={error}\n fieldId={name}\n hideLabel={hideLabel}\n label={label}\n prompt={prompt}\n required={Boolean(validation?.required)}\n appearance={formAppearance}\n >\n <NumberInput\n id={name}\n name={innerName}\n ref={ref}\n {...(error && { state: 'error', 'aria-invalid': true })}\n defaultValue={defaultValue}\n onValueChange={(newValue) => {\n onChange(newValue)\n onValueChange?.(newValue)\n }}\n value={innerValue}\n appearance={formAppearance}\n {...remainingProps}\n />\n </FieldWrapper>\n )\n}\n\nNumberInputField.displayName = 'NumberInputField'\n"],"names":["NumberInputField","css","defaultValue","hideLabel","value","prompt","description","label","name","validation","onValueChange","appearance","remainingProps","control","useFormContext","context","useFormCustomContext","ref","onChange","innerValue","innerName","useController","error","useFieldError","formAppearance","React","FieldWrapper","NumberInput","newValue"],"mappings":"gaAwBa,MAAAA,EAAmB,CAAC,CAC/B,IAAAC,EACA,aAAAC,EAAe,EACf,UAAAC,EACA,MAAAC,EACA,OAAAC,EACA,YAAAC,EACA,MAAAC,EACA,KAAAC,EACA,WAAAC,EACA,cAAAC,EACA,WAAAC,KACGC,CACL,IAA6B,CAC3B,KAAM,CAAE,QAAAC,CAAQ,EAAIC,EAAe,EAC7BC,EAAUC,EAAqB,EAC/B,CACJ,MAAO,CAAE,IAAAC,EAAK,SAAAC,EAAU,MAAOC,EAAY,KAAMC,CAAU,CAC7D,EAAIC,EAAc,CAChB,KAAAb,EACA,QAAAK,EACA,MAAOJ,EACP,aAAAP,CACF,CAAC,EACK,CAAE,MAAAoB,CAAM,EAAIC,EAAcf,CAAI,EAE9BgB,GAAiBT,GAAA,KAAA,OAAAA,EAAS,aAAcJ,EAE9C,OAAAc,EAAM,UAAU,IAAM,CAEhB,OAAOrB,EAAU,KAAac,EAASd,CAAK,CAClD,EAAG,CAACA,CAAK,CAAC,EAGRqB,EAAA,cAACC,EAAA,CACC,IAAKzB,EACL,YAAaK,EACb,MAAOgB,EACP,QAASd,EACT,UAAWL,EACX,MAAOI,EACP,OAAQF,EACR,SAAU,QAAQI,GAAA,KAAAA,OAAAA,EAAY,QAAQ,EACtC,WAAYe,CAEZC,EAAAA,EAAA,cAACE,EAAA,CACC,GAAInB,EACJ,KAAMY,EACN,IAAKH,EACJ,GAAIK,GAAS,CAAE,MAAO,QAAS,eAAgB,EAAK,EACrD,aAAcpB,EACd,cAAgB0B,GAAa,CAC3BV,EAASU,CAAQ,EACjBlB,GAAA,MAAAA,EAAgBkB,CAClB,CAAA,EACA,MAAOT,EACP,WAAYK,EACX,GAAGZ,CAAAA,CACN,CACF,CAEJ,EAEAZ,EAAiB,YAAc"}
|