@atom-learning/components 2.9.2 → 2.10.1

package/CHANGELOG.md

@@ -1,10 +1,10 @@
-## [2.9.2](https://github.com/Atom-Learning/components/compare/v2.9.1...v2.9.2) (2022-10-19)
+## [2.10.1](https://github.com/Atom-Learning/components/compare/v2.10.0...v2.10.1) (2022-10-24)
 
 
 ### Bug Fixes
 
-* change size prop to optional ([04f5d0f](https://github.com/Atom-Learning/components/commit/04f5d0f9f55aa8812008895d16fda06437797b3b))
-* consolidate field element props ([b82f96d](https://github.com/Atom-Learning/components/commit/b82f96db924f58dca8829499653ee925b6e4500c))
+* add portal and zindex to date-input ([9c96d65](https://github.com/Atom-Learning/components/commit/9c96d65c8dcacc3ea60762929fe1ce1de457fbae))
+* datefield snapshot-n ([fc88dc0](https://github.com/Atom-Learning/components/commit/fc88dc0fffa6135e9df129d488077fbed7ea9d5e))
 
 # [1.4.0](https://github.com/Atom-Learning/components/compare/v1.3.0...v1.4.0) (2022-04-11)
 

package/dist/components/date-input/DateInput.js

@@ -1 +1 @@
-import{CalendarEvent as N}from"@atom-learning/icons";import*as e from"react";import{ActionIcon as O}from"../action-icon/ActionIcon.js";import{Box as S}from"../box/Box.js";import{Calendar as k}from"../calendar/Calendar.js";import{DEFAULT_LABELS as x}from"../calendar/constants.js";import{Icon as z}from"../icon/Icon.js";import{Input as L}from"../input/Input.js";import{Popover as m}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:C,weekdayNames:b,size:l="md",labels:v,revalidate:o,onChange:n,minDate:y,maxDate:w,...A},T)=>{const{date:a,dateString:F,setDate:r}=B(E,g),i={...x,...v},[I,d]=e.useState(!1),f=e.useRef(null),c=e.useRef(null);return e.useEffect(()=>{n==null||n(a)},[a,n]),e.createElement(S,{css:{position:"relative"}},e.createElement(L,{name:"date",disabled:s,size:l,...A,onChange:t=>r(t.target.value,!0),value:F,ref:T}),e.createElement(m,{modal:!0,open:I,onOpenChange:d},e.createElement(m.Trigger,{asChild:!0},e.createElement(O,{css:{position:"absolute",top:"0",right:"0"},disabled:s,label:i.open,size:l,theme:"neutral"},e.createElement(z,{is:N}))),e.createElement(m.Content,{css:{pr:"$sizes$2"},side:"bottom",align:"end",showCloseButton:!1,onOpenAutoFocus:t=>{var p,u;t.preventDefault(),a?(p=c.current)==null||p.focus():(u=f.current)==null||u.focus()}},e.createElement(k,{date:a||new Date,selected:a,onDateSelected:async t=>{d(!1),await r(t.date,!1),o&&o()},setYear:async t=>{await r(t,!1),o&&o()},minDate:y,maxDate:w,refDateToday:f,refDateSelected:c,firstDayOfWeek:h,monthNames:C,weekdayNames:b,labels:i}))))});D.displayName="DateInput";export{D as DateInput};
+import{CalendarEvent as T}from"@atom-learning/icons";import*as e from"react";import{ActionIcon as x}from"../action-icon/ActionIcon.js";import{Box as z}from"../box/Box.js";import{Calendar as F}from"../calendar/Calendar.js";import{DEFAULT_LABELS as L}from"../calendar/constants.js";import{Icon as S}from"../icon/Icon.js";import{Input as _}from"../input/Input.js";import{Popover as r}from"../popover/Popover.js";import{DEFAULT_DATE_FORMAT as k}from"./constants.js";import{useDate as R}from"./use-date.js";import{DIALOG_Z_INDEX as B}from"../../constants/zIndices.js";const D=e.forwardRef(({initialDate:E,dateFormat:g=k,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}=R(E,g),i={...L,...y},[N,d]=e.useState(!1),f=e.useRef(null),c=e.useRef(null);return e.useEffect(()=>{n==null||n(a)},[a,n]),e.createElement(z,{css:{position:"relative"}},e.createElement(_,{name:"date",disabled:s,size:l,...I,onChange:t=>m(t.target.value,!0),value:O,ref:w}),e.createElement(r,{modal:!0,open:N,onOpenChange:d},e.createElement(r.Trigger,{asChild:!0},e.createElement(x,{css:{position:"absolute",top:"0",right:"0"},disabled:s,label:i.open,size:l,theme:"neutral"},e.createElement(S,{is:T}))),e.createElement(r.Portal,null,e.createElement(r.Content,{css:{pr:"$sizes$2",zIndex:B},side:"bottom",align:"end",showCloseButton:!1,onOpenAutoFocus:t=>{var p,u;t.preventDefault(),a?(p=c.current)==null||p.focus():(u=f.current)==null||u.focus()}},e.createElement(F,{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:c,firstDayOfWeek:h,monthNames:b,weekdayNames:v,labels:i})))))});D.displayName="DateInput";export{D as DateInput};

package/dist/components/index.d.ts

@@ -66,3 +66,5 @@ export { ToggleGroup } from './toggle-group';
 export { Tooltip } from './tooltip';
 export { Video } from './video';
 export { NavigationMenu } from './navigation';
+export { NumberInput } from './number-input';
+export { NumberInputField } from './number-input-field';

package/dist/components/number-input/NumberInput.d.ts

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import type { CSS } from '../../stitches';
+export interface NumberInputProps {
+    name: string;
+    min?: number;
+    max?: number;
+    step?: number;
+    initialValue?: number;
+    disabled?: boolean;
+    readonly?: boolean;
+    size?: 'sm' | 'md';
+    onChange?: (value: number) => void;
+    stepperButtonLabels?: {
+        increment?: string;
+        decrement?: string;
+    };
+    disabledTooltipContent?: {
+        increment?: string;
+        decrement?: string;
+    };
+    css?: CSS;
+}
+export declare const NumberInput: React.ForwardRefExoticComponent<NumberInputProps & React.RefAttributes<HTMLInputElement>>;

package/dist/components/number-input/NumberInput.js

@@ -0,0 +1 @@
+import{Minus as $,Plus as B}from"@atom-learning/icons";import*as n from"react";import{Flex as F}from"../flex/Flex.js";import{Input as H}from"../input/Input.js";import{NumberInputStepper as x}from"./NumberInputStepper.js";const N=n.forwardRef((g,k)=>{const{name:E,min:o=0,max:l=Number.MAX_SAFE_INTEGER,step:s=1,initialValue:y=0,disabled:u=!1,readonly:m=!1,size:v="md",onChange:C,stepperButtonLabels:T,disabledTooltipContent:A,css:I,...L}=g,[r,M]=n.useState(y),i=n.useRef(null);n.useImperativeHandle(k,()=>i.current);const w={increment:"increment",decrement:"decrement",...T},R={decrement:`Cannot enter values below ${o}`,increment:`Cannot enter values above ${l}`,...A},d=r>=l,c=r<=o,p=n.useCallback(e=>Math.min(Math.max(e,o),l),[l,o]),a=n.useCallback(e=>{M(e),C==null||C(Number(e))},[C]),z=n.useCallback(e=>{const t=e.target.value.replace(/\D/g,"");a(t)},[a]),b=n.useCallback(()=>{var e;if(d||m)return;(e=i==null?void 0:i.current)==null||e.focus();let t;r===""?t=s:t=Number(r)+s,a(p(t))},[p,d,m,s,a,r]),f=n.useCallback(()=>{var e;if(c||m)return;(e=i==null?void 0:i.current)==null||e.focus();let t;r===""?t=o:t=Number(r)-s,a(p(t))},[p,c,m,o,s,a,r]),D=n.useCallback(e=>{if(e.nativeEvent.isComposing)return;const t=e.key,h={ArrowUp:b,ArrowRight:b,ArrowDown:f,ArrowLeft:f,Home:()=>a(o),End:()=>a(l)}[t];h&&(e.preventDefault(),h(e))},[b,f,a,o,l]),S={name:E,type:"number",value:r,...L,onChange:z,onKeyDown:D,size:v,css:{borderRadius:"0px",width:"$6","&:disabled":{opacity:.3,pointerEvents:"none"}},ref:i,readOnly:m,disabled:u,"aria-valuemin":o,"aria-valuemax":l,"aria-valuenow":Number(r),role:"spinbutton"};return n.createElement(F,{css:I},n.createElement(x,{onClick:f,icon:$,css:{borderRight:"none",borderTopRightRadius:"0px",borderBottomRightRadius:"0px"},size:v,disabled:c||u,showTooltip:c&&!u,disabledTooltipContent:R.decrement,label:w.decrement}),n.createElement(H,{...S}),n.createElement(x,{onClick:b,icon:B,css:{borderLeft:"none",borderTopLeftRadius:"0px",borderBottomLeftRadius:"0px"},size:v,disabled:d||u,showTooltip:d&&!u,disabledTooltipContent:R.increment,label:w.increment}))});N.displayName="NumberInput";export{N as NumberInput};

package/dist/components/number-input/NumberInputStepper.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { ActionIcon } from '../action-icon';
+declare type NumberInputStepperProps = Omit<React.ComponentProps<typeof ActionIcon>, 'children'> & {
+    icon: React.FC<React.SVGProps<SVGSVGElement>>;
+    showTooltip?: boolean;
+    disabledTooltipContent?: string;
+};
+export declare const NumberInputStepper: React.ForwardRefExoticComponent<NumberInputStepperProps>;
+export {};

package/dist/components/number-input/NumberInputStepper.js

@@ -0,0 +1 @@
+import{styled as t}from"@stitches/react";import*as e from"react";import{ActionIcon as m}from"../action-icon/ActionIcon.js";import{Icon as p}from"../icon/Icon.js";import{Tooltip as o}from"../tooltip/Tooltip.js";const s=t("span",{zIndex:1}),d=t(m,{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=e.forwardRef((n,r)=>{const{icon:l,disabledTooltipContent:a,showTooltip:i,...c}=n;return e.createElement(o,null,e.createElement(o.Trigger,{asChild:!0},e.createElement(s,{tabIndex:-1},e.createElement(d,{tabIndex:-1,appearance:"outline",ref:r,...c},e.createElement(p,{is:l})))),i&&e.createElement(o.Content,null,a))});export{b as NumberInputStepper};

package/dist/components/number-input/index.d.ts

@@ -0,0 +1 @@
+export { NumberInput } from './NumberInput';

package/dist/components/number-input-field/NumberInputField.d.ts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { ValidationOptions } from '../../components/form';
+import type { CSS } from '../../stitches';
+import type { NumberInputProps } from '../number-input/NumberInput';
+export interface NumberInputFieldProps extends NumberInputProps {
+    css?: CSS;
+    description?: string;
+    label: string;
+    name: string;
+    prompt?: {
+        link: string;
+        label: string;
+    };
+    validation?: ValidationOptions;
+}
+export declare const NumberInputField: React.FC<NumberInputFieldProps>;

package/dist/components/number-input-field/NumberInputField.js

@@ -0,0 +1 @@
+import*as i from"react";import{useFormContext as c}from"react-hook-form";import{FieldWrapper as f}from"../field-wrapper/FieldWrapper.js";import"../field-wrapper/InlineFieldWrapper.js";import"../form/Form.js";import{useFieldError as b}from"../form/useFieldError.js";import{NumberInput as F}from"../number-input/NumberInput.js";const m=({css:p,label:n,name:r,validation:e,prompt:a,description:l,...d})=>{const{register:o,trigger:s}=c(),{error:t}=b(r),u=e?o(e):o;return i.createElement(f,{css:p,description:l,error:t,fieldId:r,label:n,prompt:a,required:Boolean(e==null?void 0:e.required)},i.createElement(F,{id:r,name:r,ref:u,...t&&{state:"error","aria-invalid":!0},...d,onChange:s}))};m.displayName="NumberInputField";export{m as NumberInputField};

package/dist/components/number-input-field/index.d.ts

@@ -0,0 +1 @@
+export { NumberInputField } from './NumberInputField';