@arbor-education/design-system.components 0.8.0 → 0.9.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 +18 -0
- package/dist/components/combobox/Combobox.d.ts.map +1 -1
- package/dist/components/combobox/Combobox.js +8 -7
- package/dist/components/combobox/Combobox.js.map +1 -1
- package/dist/components/combobox/Combobox.stories.d.ts +1 -0
- package/dist/components/combobox/Combobox.stories.d.ts.map +1 -1
- package/dist/components/combobox/Combobox.stories.js +16 -0
- package/dist/components/combobox/Combobox.stories.js.map +1 -1
- package/dist/components/combobox/Combobox.test.js +9 -0
- package/dist/components/combobox/Combobox.test.js.map +1 -1
- package/dist/components/combobox/ComboboxButtonTrigger.d.ts +4 -2
- package/dist/components/combobox/ComboboxButtonTrigger.d.ts.map +1 -1
- package/dist/components/combobox/ComboboxButtonTrigger.js +11 -4
- package/dist/components/combobox/ComboboxButtonTrigger.js.map +1 -1
- package/dist/components/combobox/ComboboxTrigger.d.ts +3 -1
- package/dist/components/combobox/ComboboxTrigger.d.ts.map +1 -1
- package/dist/components/combobox/ComboboxTrigger.js +10 -2
- package/dist/components/combobox/ComboboxTrigger.js.map +1 -1
- package/dist/components/combobox/types.d.ts +3 -0
- package/dist/components/combobox/types.d.ts.map +1 -1
- package/dist/components/formField/FormField.d.ts +4 -0
- package/dist/components/formField/FormField.d.ts.map +1 -1
- package/dist/components/formField/FormField.js +2 -1
- package/dist/components/formField/FormField.js.map +1 -1
- package/dist/components/formField/FormField.stories.d.ts.map +1 -1
- package/dist/components/formField/FormField.stories.js +4 -1
- package/dist/components/formField/FormField.stories.js.map +1 -1
- package/dist/components/formField/FormField.test.js +5 -0
- package/dist/components/formField/FormField.test.js.map +1 -1
- package/dist/components/formField/inputs/time/TimeInput.d.ts +29 -0
- package/dist/components/formField/inputs/time/TimeInput.d.ts.map +1 -0
- package/dist/components/formField/inputs/time/TimeInput.js +67 -0
- package/dist/components/formField/inputs/time/TimeInput.js.map +1 -0
- package/dist/components/formField/inputs/time/TimeInput.stories.d.ts +60 -0
- package/dist/components/formField/inputs/time/TimeInput.stories.d.ts.map +1 -0
- package/dist/components/formField/inputs/time/TimeInput.stories.js +132 -0
- package/dist/components/formField/inputs/time/TimeInput.stories.js.map +1 -0
- package/dist/components/formField/inputs/time/TimeInput.test.d.ts +2 -0
- package/dist/components/formField/inputs/time/TimeInput.test.d.ts.map +1 -0
- package/dist/components/formField/inputs/time/TimeInput.test.js +58 -0
- package/dist/components/formField/inputs/time/TimeInput.test.js.map +1 -0
- package/dist/index.css +51 -1
- package/dist/index.css.map +1 -1
- package/dist/index.d.ts +3 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +2 -0
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
- package/src/components/combobox/Combobox.stories.tsx +18 -0
- package/src/components/combobox/Combobox.test.tsx +27 -0
- package/src/components/combobox/Combobox.tsx +12 -5
- package/src/components/combobox/ComboboxButtonTrigger.tsx +54 -25
- package/src/components/combobox/ComboboxTrigger.tsx +39 -15
- package/src/components/combobox/combobox.scss +18 -0
- package/src/components/combobox/types.ts +3 -0
- package/src/components/formField/FormField.stories.tsx +10 -1
- package/src/components/formField/FormField.test.tsx +6 -0
- package/src/components/formField/FormField.tsx +5 -0
- package/src/components/formField/inputs/time/TimeInput.stories.tsx +170 -0
- package/src/components/formField/inputs/time/TimeInput.test.tsx +86 -0
- package/src/components/formField/inputs/time/TimeInput.tsx +168 -0
- package/src/components/formField/inputs/time/timeInput.scss +33 -0
- package/src/components/row/row.scss +2 -2
- package/src/index.scss +1 -0
- package/src/index.ts +3 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ComboboxTrigger.d.ts","sourceRoot":"","sources":["../../../src/components/combobox/ComboboxTrigger.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,mBAAmB,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;
|
|
1
|
+
{"version":3,"file":"ComboboxTrigger.d.ts","sourceRoot":"","sources":["../../../src/components/combobox/ComboboxTrigger.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,mBAAmB,EAAE,cAAc,EAAE,4BAA4B,EAAE,MAAM,SAAS,CAAC;AAEjG,MAAM,MAAM,oBAAoB,GAAG;IACjC,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,GAAG,IAAI,CAAC,CAAC;IACrD,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IACrD,YAAY,EAAE,MAAM,CAAC;IACrB,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,OAAO,CAAC;IAClB,UAAU,EAAE,OAAO,CAAC;IACpB,UAAU,EAAE,OAAO,CAAC;IACpB,aAAa,EAAE,MAAM,CAAC;IACtB,OAAO,EAAE,MAAM,CAAC;IAChB,mBAAmB,EAAE,OAAO,CAAC;IAC7B,oBAAoB,EAAE,OAAO,CAAC;IAC9B,kBAAkB,EAAE,MAAM,GAAG,SAAS,CAAC;IACvC,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,cAAc,CAAC,EAAE,mBAAmB,CAAC;IACrC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,qBAAqB,EAAE,OAAO,CAAC;IAC/B,sBAAsB,EAAE,4BAA4B,CAAC;IACrD,mBAAmB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACtC,eAAe,EAAE,cAAc,EAAE,CAAC;IAClC,uBAAuB,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IACrC,kBAAkB,EAAE,MAAM,GAAG,IAAI,CAAC;IAClC,iBAAiB,EAAE,CAAC,GAAG,EAAE,cAAc,KAAK,MAAM,CAAC;IACnD,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,oBAAoB,EAAE,MAAM,IAAI,CAAC;IACjC,mBAAmB,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACtE,kBAAkB,EAAE,MAAM,IAAI,CAAC;IAC/B,iBAAiB,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACnE,eAAe,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACpE,oBAAoB,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;CACrD,CAAC;AAEF,eAAO,MAAM,eAAe;YAAW,oBAAoB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO;;CAqH9E,CAAC"}
|
|
@@ -4,12 +4,20 @@ import { Icon } from '../icon/Icon';
|
|
|
4
4
|
import { Tag } from '../tag/Tag';
|
|
5
5
|
import { Popover } from 'radix-ui';
|
|
6
6
|
export const ComboboxTrigger = (props) => {
|
|
7
|
-
const { inputRef, triggerRef, comboboxId, listboxId, isOpen, hasError, disabled, placeholder, query, shouldShowPopover, showListboxLoading, activeDescendant, 'aria-describedby': ariaDescribedBy, 'aria-invalid': ariaInvalid, 'aria-label': ariaLabel, showDropdownTrigger, selectedChips, selectedChipValuesSet, focusedChipIndex, resolveTagLabel, removeValue, handleTriggerClick, handleInputChange, handleInputFocus, handleInputBlur, handleKeyDown, handleChevronClick, } = props;
|
|
7
|
+
const { inputRef, triggerRef, comboboxId, listboxId, isOpen, hasError, disabled, placeholder, query, shouldShowPopover, showListboxLoading, activeDescendant, 'aria-describedby': ariaDescribedBy, 'aria-invalid': ariaInvalid, 'aria-label': ariaLabel, showDropdownTrigger, selectedValueDisplay, triggerEndContent, selectedChips, selectedChipValuesSet, focusedChipIndex, resolveTagLabel, removeValue, handleTriggerClick, handleInputChange, handleInputFocus, handleInputBlur, handleKeyDown, handleChevronClick, } = props;
|
|
8
|
+
const selectedValueText = selectedChips.map(resolveTagLabel).join(', ');
|
|
9
|
+
const showSelectedValueText = selectedValueDisplay === 'text'
|
|
10
|
+
&& query.length === 0
|
|
11
|
+
&& selectedValueText.length > 0;
|
|
8
12
|
return (_jsx(Popover.Anchor, { asChild: true, children: _jsxs("div", { ref: triggerRef, className: classNames('ds-combobox__trigger', {
|
|
9
13
|
'ds-combobox__trigger--open': isOpen,
|
|
10
14
|
'ds-combobox__trigger--error': hasError,
|
|
11
15
|
'ds-combobox__trigger--disabled': disabled,
|
|
12
|
-
}), onClick: handleTriggerClick, children: [_jsxs("div", { className: "ds-combobox__chips-and-input", children: [
|
|
16
|
+
}), onClick: handleTriggerClick, children: [_jsxs("div", { className: "ds-combobox__chips-and-input", children: [selectedValueDisplay === 'tags'
|
|
17
|
+
? selectedChips.map((opt, chipIdx) => (_jsx(Tag, { color: "neutral", selected: selectedChipValuesSet.has(opt.value) || focusedChipIndex === chipIdx, slotStart: opt.iconName ? _jsx(Icon, { name: opt.iconName, size: 12 }) : undefined, onRemove: disabled ? undefined : () => removeValue(opt.value), removeLabel: `Remove ${resolveTagLabel(opt)}`, removeButtonTabIndex: -1, children: resolveTagLabel(opt) }, opt.value)))
|
|
18
|
+
: null, showSelectedValueText && (_jsx("span", { className: "ds-combobox__selected-value", children: selectedValueText })), _jsx("input", { ref: inputRef, id: comboboxId, className: classNames('ds-combobox__input', {
|
|
19
|
+
'ds-combobox__input--with-selected-value': showSelectedValueText,
|
|
20
|
+
}), type: "text", role: "combobox", "aria-autocomplete": "list", "aria-expanded": shouldShowPopover, "aria-controls": listboxId, "aria-activedescendant": activeDescendant, "aria-busy": showListboxLoading ? true : undefined, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, "aria-label": ariaLabel, placeholder: selectedChips.length === 0 ? placeholder : undefined, value: query, onChange: handleInputChange, onFocus: handleInputFocus, onKeyDown: handleKeyDown, onBlur: handleInputBlur, disabled: disabled, autoComplete: "off" })] }), triggerEndContent && (_jsx("span", { className: "ds-combobox__end-content", "aria-hidden": "true", children: triggerEndContent })), showDropdownTrigger && (_jsx("button", { type: "button", className: "ds-combobox__chevron", tabIndex: -1, "aria-label": "Open suggestions", onClick: handleChevronClick, disabled: disabled, children: _jsx(Icon, { name: isOpen ? 'chevron-up' : 'chevron-down', size: 16 }) }))] }) }));
|
|
13
21
|
};
|
|
14
22
|
ComboboxTrigger.displayName = 'Combobox.Trigger';
|
|
15
23
|
//# sourceMappingURL=ComboboxTrigger.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ComboboxTrigger.js","sourceRoot":"","sources":["../../../src/components/combobox/ComboboxTrigger.tsx"],"names":[],"mappings":";AAAA,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAC5C,OAAO,EAAE,GAAG,EAAE,MAAM,oBAAoB,CAAC;AACzC,OAAO,EAAE,OAAO,EAAE,MAAM,UAAU,CAAC;
|
|
1
|
+
{"version":3,"file":"ComboboxTrigger.js","sourceRoot":"","sources":["../../../src/components/combobox/ComboboxTrigger.tsx"],"names":[],"mappings":";AAAA,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAC5C,OAAO,EAAE,GAAG,EAAE,MAAM,oBAAoB,CAAC;AACzC,OAAO,EAAE,OAAO,EAAE,MAAM,UAAU,CAAC;AAmCnC,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,KAA2B,EAAqB,EAAE;IAChF,MAAM,EACJ,QAAQ,EACR,UAAU,EACV,UAAU,EACV,SAAS,EACT,MAAM,EACN,QAAQ,EACR,QAAQ,EACR,WAAW,EACX,KAAK,EACL,iBAAiB,EACjB,kBAAkB,EAClB,gBAAgB,EAChB,kBAAkB,EAAE,eAAe,EACnC,cAAc,EAAE,WAAW,EAC3B,YAAY,EAAE,SAAS,EACvB,mBAAmB,EACnB,oBAAoB,EACpB,iBAAiB,EACjB,aAAa,EACb,qBAAqB,EACrB,gBAAgB,EAChB,eAAe,EACf,WAAW,EACX,kBAAkB,EAClB,iBAAiB,EACjB,gBAAgB,EAChB,eAAe,EACf,aAAa,EACb,kBAAkB,GACnB,GAAG,KAAK,CAAC;IAEV,MAAM,iBAAiB,GAAG,aAAa,CAAC,GAAG,CAAC,eAAe,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IACxE,MAAM,qBAAqB,GACvB,oBAAoB,KAAK,MAAM;WAC5B,KAAK,CAAC,MAAM,KAAK,CAAC;WAClB,iBAAiB,CAAC,MAAM,GAAG,CAAC,CAAC;IAEpC,OAAO,CACL,KAAC,OAAO,CAAC,MAAM,IAAC,OAAO,kBACrB,eACE,GAAG,EAAE,UAAU,EACf,SAAS,EAAE,UAAU,CAAC,sBAAsB,EAAE;gBAC5C,4BAA4B,EAAE,MAAM;gBACpC,6BAA6B,EAAE,QAAQ;gBACvC,gCAAgC,EAAE,QAAQ;aAC3C,CAAC,EACF,OAAO,EAAE,kBAAkB,aAE3B,eAAK,SAAS,EAAC,8BAA8B,aAC1C,oBAAoB,KAAK,MAAM;4BAC9B,CAAC,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,OAAO,EAAE,EAAE,CAAC,CAClC,KAAC,GAAG,IAEF,KAAK,EAAC,SAAS,EACf,QAAQ,EAAE,qBAAqB,CAAC,GAAG,CAAC,GAAG,CAAC,KAAK,CAAC,IAAI,gBAAgB,KAAK,OAAO,EAC9E,SAAS,EAAE,GAAG,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAC,IAAI,IAAC,IAAI,EAAE,GAAG,CAAC,QAAQ,EAAE,IAAI,EAAE,EAAE,GAAI,CAAC,CAAC,CAAC,SAAS,EAC5E,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC,WAAW,CAAC,GAAG,CAAC,KAAK,CAAC,EAC7D,WAAW,EAAE,UAAU,eAAe,CAAC,GAAG,CAAC,EAAE,EAC7C,oBAAoB,EAAE,CAAC,CAAC,YAEvB,eAAe,CAAC,GAAG,CAAC,IARhB,GAAG,CAAC,KAAK,CASV,CACP,CAAC;4BACJ,CAAC,CAAC,IAAI,EACP,qBAAqB,IAAI,CACxB,eAAM,SAAS,EAAC,6BAA6B,YAC1C,iBAAiB,GACb,CACR,EACD,gBACE,GAAG,EAAE,QAAQ,EACb,EAAE,EAAE,UAAU,EACd,SAAS,EAAE,UAAU,CAAC,oBAAoB,EAAE;gCAC1C,yCAAyC,EAAE,qBAAqB;6BACjE,CAAC,EACF,IAAI,EAAC,MAAM,EACX,IAAI,EAAC,UAAU,uBACG,MAAM,mBACT,iBAAiB,mBACjB,SAAS,2BACD,gBAAgB,eAC5B,kBAAkB,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,sBAC9B,eAAe,kBACnB,WAAW,gBACb,SAAS,EACrB,WAAW,EAAE,aAAa,CAAC,MAAM,KAAK,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,SAAS,EACjE,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,iBAAiB,EAC3B,OAAO,EAAE,gBAAgB,EACzB,SAAS,EAAE,aAAa,EACxB,MAAM,EAAE,eAAe,EACvB,QAAQ,EAAE,QAAQ,EAClB,YAAY,EAAC,KAAK,GAClB,IACE,EACL,iBAAiB,IAAI,CACpB,eAAM,SAAS,EAAC,0BAA0B,iBAAa,MAAM,YAC1D,iBAAiB,GACb,CACR,EACA,mBAAmB,IAAI,CACtB,iBACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,sBAAsB,EAChC,QAAQ,EAAE,CAAC,CAAC,gBACD,kBAAkB,EAC7B,OAAO,EAAE,kBAAkB,EAC3B,QAAQ,EAAE,QAAQ,YAElB,KAAC,IAAI,IAAC,IAAI,EAAE,MAAM,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,cAAc,EAAE,IAAI,EAAE,EAAE,GAAI,GACzD,CACV,IACG,GACS,CAClB,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,CAAC,WAAW,GAAG,kBAAkB,CAAC"}
|
|
@@ -13,6 +13,7 @@ export type ComboboxOption = {
|
|
|
13
13
|
export type ComboboxCreateResult = string | ComboboxOption | void;
|
|
14
14
|
export type ComboboxSearchFn = (option: ComboboxOption, query: string) => boolean;
|
|
15
15
|
export type ComboboxSearchType = 'prefix' | 'substring' | ComboboxSearchFn;
|
|
16
|
+
export type ComboboxSelectedValueDisplay = 'tags' | 'text';
|
|
16
17
|
export type ComboboxProps = {
|
|
17
18
|
'options': ComboboxOption[];
|
|
18
19
|
'multiple'?: boolean;
|
|
@@ -29,7 +30,9 @@ export type ComboboxProps = {
|
|
|
29
30
|
'disabled'?: boolean;
|
|
30
31
|
'dropdownOnFocus'?: boolean;
|
|
31
32
|
'triggerVariant'?: 'input' | 'button';
|
|
33
|
+
'selectedValueDisplay'?: ComboboxSelectedValueDisplay;
|
|
32
34
|
'showDropdownTrigger'?: boolean;
|
|
35
|
+
'triggerEndContent'?: React.ReactNode;
|
|
33
36
|
'showSelectionCountBadge'?: boolean;
|
|
34
37
|
'selectionCountA11yLabel'?: string | ((count: number) => string);
|
|
35
38
|
'loading'?: boolean;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/combobox/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,8BAA8B,CAAC;AAC7D,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,8EAA8E;AAC9E,MAAM,MAAM,mBAAmB,GAAG,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC;AAEvE,MAAM,MAAM,cAAc,GAAG;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAAG,MAAM,GAAG,cAAc,GAAG,IAAI,CAAC;AAClE,MAAM,MAAM,gBAAgB,GAAG,CAAC,MAAM,EAAE,cAAc,EAAE,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC;AAClF,MAAM,MAAM,kBAAkB,GAAG,QAAQ,GAAG,WAAW,GAAG,gBAAgB,CAAC;
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/combobox/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,8BAA8B,CAAC;AAC7D,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,8EAA8E;AAC9E,MAAM,MAAM,mBAAmB,GAAG,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC;AAEvE,MAAM,MAAM,cAAc,GAAG;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAAG,MAAM,GAAG,cAAc,GAAG,IAAI,CAAC;AAClE,MAAM,MAAM,gBAAgB,GAAG,CAAC,MAAM,EAAE,cAAc,EAAE,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC;AAClF,MAAM,MAAM,kBAAkB,GAAG,QAAQ,GAAG,WAAW,GAAG,gBAAgB,CAAC;AAC3E,MAAM,MAAM,4BAA4B,GAAG,MAAM,GAAG,MAAM,CAAC;AAE3D,MAAM,MAAM,aAAa,GAAG;IAC1B,SAAS,EAAE,cAAc,EAAE,CAAC;IAC5B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,EAAE,CAAC;IAC1B,eAAe,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAE7C,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,YAAY,CAAC,EAAE,kBAAkB,CAAC;IAClC,wBAAwB,CAAC,EAAE,OAAO,CAAC;IAEnC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,aAAa,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,oBAAoB,CAAC;IAC7D,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAE5C,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,gBAAgB,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IACtC,sBAAsB,CAAC,EAAE,4BAA4B,CAAC;IACtD,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,mBAAmB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACtC,yBAAyB,CAAC,EAAE,OAAO,CAAC;IACpC,yBAAyB,CAAC,EAAE,MAAM,GAAG,CAAC,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC,CAAC;IACjE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,cAAc,EAAE,QAAQ,EAAE,OAAO,KAAK,KAAK,CAAC,SAAS,CAAC;IAChF,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,cAAc,KAAK,MAAM,CAAC;IAEnD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,cAAc,CAAC,EAAE,mBAAmB,CAAC;IACrC,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC"}
|
|
@@ -4,6 +4,7 @@ import { type ColourPickerDropdownProps } from './inputs/colourPickerDropdown/Co
|
|
|
4
4
|
import { type NumberInputProps } from './inputs/number/NumberInput';
|
|
5
5
|
import { type SelectDropdownInputProps } from './inputs/selectDropdown/SelectDropdown';
|
|
6
6
|
import { type TextInputProps } from './inputs/text/TextInput';
|
|
7
|
+
import { type TimeInputProps } from './inputs/time/TimeInput';
|
|
7
8
|
import { type TextAreaProps } from './inputs/textArea/TextArea';
|
|
8
9
|
type FormFieldProps = {
|
|
9
10
|
className?: string;
|
|
@@ -22,6 +23,9 @@ type FormFieldProps = {
|
|
|
22
23
|
} | {
|
|
23
24
|
inputType?: 'number';
|
|
24
25
|
inputProps?: NumberInputProps;
|
|
26
|
+
} | {
|
|
27
|
+
inputType?: 'time';
|
|
28
|
+
inputProps?: TimeInputProps;
|
|
25
29
|
} | {
|
|
26
30
|
inputType?: 'colourPicker';
|
|
27
31
|
inputProps?: ColourPickerDropdownProps;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FormField.d.ts","sourceRoot":"","sources":["../../../src/components/formField/FormField.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAC/D,OAAO,EAAc,KAAK,eAAe,EAAE,MAAM,kCAAkC,CAAC;AAEpF,OAAO,EAAwB,KAAK,yBAAyB,EAAE,MAAM,oDAAoD,CAAC;AAC1H,OAAO,EAAe,KAAK,gBAAgB,EAAE,MAAM,6BAA6B,CAAC;AACjF,OAAO,EAAkB,KAAK,wBAAwB,EAAE,MAAM,wCAAwC,CAAC;AACvG,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACzE,OAAO,EAAY,KAAK,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAG1E,KAAK,cAAc,GAAG;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,gBAAgB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACnC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,GAAG,CACA;IAAE,SAAS,CAAC,EAAE,MAAM,CAAC;IAAC,UAAU,CAAC,EAAE,cAAc,CAAA;CAAE,GACnD;IAAE,SAAS,CAAC,EAAE,UAAU,CAAC;IAAC,UAAU,CAAC,EAAE,aAAa,CAAA;CAAE,GACtD;IAAE,SAAS,CAAC,EAAE,QAAQ,CAAC;IAAC,UAAU,CAAC,EAAE,gBAAgB,CAAA;CAAE,GACvD;IAAE,SAAS,CAAC,EAAE,cAAc,CAAC;IAAC,UAAU,CAAC,EAAE,yBAAyB,CAAA;CAAE,GACtE;IAAE,SAAS,CAAC,EAAE,gBAAgB,CAAC;IAAC,UAAU,CAAC,EAAE,wBAAwB,CAAA;CAAE,GACvE;IAAE,SAAS,CAAC,EAAE,YAAY,CAAC;IAAC,UAAU,CAAC,EAAE,eAAe,CAAA;CAAE,GAC1D;IAAE,SAAS,CAAC,EAAE,UAAU,CAAC;IAAC,UAAU,CAAC,EAAE,aAAa,CAAA;CAAE,CACzD,CAAC;AAEF,eAAO,MAAM,SAAS,GAAI,OAAO,cAAc,
|
|
1
|
+
{"version":3,"file":"FormField.d.ts","sourceRoot":"","sources":["../../../src/components/formField/FormField.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAC/D,OAAO,EAAc,KAAK,eAAe,EAAE,MAAM,kCAAkC,CAAC;AAEpF,OAAO,EAAwB,KAAK,yBAAyB,EAAE,MAAM,oDAAoD,CAAC;AAC1H,OAAO,EAAe,KAAK,gBAAgB,EAAE,MAAM,6BAA6B,CAAC;AACjF,OAAO,EAAkB,KAAK,wBAAwB,EAAE,MAAM,wCAAwC,CAAC;AACvG,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACzE,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACzE,OAAO,EAAY,KAAK,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAG1E,KAAK,cAAc,GAAG;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,gBAAgB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACnC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,GAAG,CACA;IAAE,SAAS,CAAC,EAAE,MAAM,CAAC;IAAC,UAAU,CAAC,EAAE,cAAc,CAAA;CAAE,GACnD;IAAE,SAAS,CAAC,EAAE,UAAU,CAAC;IAAC,UAAU,CAAC,EAAE,aAAa,CAAA;CAAE,GACtD;IAAE,SAAS,CAAC,EAAE,QAAQ,CAAC;IAAC,UAAU,CAAC,EAAE,gBAAgB,CAAA;CAAE,GACvD;IAAE,SAAS,CAAC,EAAE,MAAM,CAAC;IAAC,UAAU,CAAC,EAAE,cAAc,CAAA;CAAE,GACnD;IAAE,SAAS,CAAC,EAAE,cAAc,CAAC;IAAC,UAAU,CAAC,EAAE,yBAAyB,CAAA;CAAE,GACtE;IAAE,SAAS,CAAC,EAAE,gBAAgB,CAAC;IAAC,UAAU,CAAC,EAAE,wBAAwB,CAAA;CAAE,GACvE;IAAE,SAAS,CAAC,EAAE,YAAY,CAAC;IAAC,UAAU,CAAC,EAAE,eAAe,CAAA;CAAE,GAC1D;IAAE,SAAS,CAAC,EAAE,UAAU,CAAC;IAAC,UAAU,CAAC,EAAE,aAAa,CAAA;CAAE,CACzD,CAAC;AAEF,eAAO,MAAM,SAAS,GAAI,OAAO,cAAc,4CAuE9C,CAAC"}
|
|
@@ -7,6 +7,7 @@ import { ColourPickerDropdown } from './inputs/colourPickerDropdown/ColourPicker
|
|
|
7
7
|
import { NumberInput } from './inputs/number/NumberInput';
|
|
8
8
|
import { SelectDropdown } from './inputs/selectDropdown/SelectDropdown';
|
|
9
9
|
import { TextInput } from './inputs/text/TextInput';
|
|
10
|
+
import { TimeInput } from './inputs/time/TimeInput';
|
|
10
11
|
import { TextArea } from './inputs/textArea/TextArea';
|
|
11
12
|
import { Label } from './label/Label';
|
|
12
13
|
export const FormField = (props) => {
|
|
@@ -25,6 +26,6 @@ export const FormField = (props) => {
|
|
|
25
26
|
'hasError': !!errorText,
|
|
26
27
|
'aria-invalid': !!errorText,
|
|
27
28
|
};
|
|
28
|
-
return (_jsxs("div", { className: classes, children: [label && (_jsx(Label, { htmlFor: id, children: label })), fieldDescription && (_jsx("span", { id: `${id}-description`, className: "ds-form-field__description", children: fieldDescription })), inputType === 'text' && (_jsx(TextInput, { ...sharedProps, ...inputProps })), inputType === 'textarea' && (_jsx(TextArea, { ...sharedProps, ...inputProps })), inputType === 'number' && (_jsx(NumberInput, { ...sharedProps, ...inputProps })), inputType === 'colourPicker' && (_jsx(ColourPickerDropdown, { ...sharedProps, ...inputProps })), inputType === 'selectDropdown' && (_jsx(SelectDropdown, { ...sharedProps, ...inputProps })), inputType === 'datePicker' && (_jsx(DatePicker, { ...sharedProps, ...inputProps })), inputType === 'combobox' && (_jsx(Combobox, { ...sharedProps, ...inputProps })), ((helperLinkText && helperLinkUrl) || errorText) && (_jsxs("div", { className: "ds-form-field__message", children: [errorText && (_jsxs("span", { className: "ds-form-field__message--error", id: `${id}-error`, children: [_jsx(Icon, { size: 12, name: "triangle-alert" }), errorText] })), helperLinkText && helperLinkUrl && (_jsxs("a", { href: helperLinkUrl, "aria-label": `${label} helper link`, className: "ds-form-field__message--helper", children: [helperLinkText, ' ', _jsx(Icon, { size: 12, name: "arrow-up-right" })] }))] }))] }));
|
|
29
|
+
return (_jsxs("div", { className: classes, children: [label && (_jsx(Label, { htmlFor: id, children: label })), fieldDescription && (_jsx("span", { id: `${id}-description`, className: "ds-form-field__description", children: fieldDescription })), inputType === 'text' && (_jsx(TextInput, { ...sharedProps, ...inputProps })), inputType === 'textarea' && (_jsx(TextArea, { ...sharedProps, ...inputProps })), inputType === 'number' && (_jsx(NumberInput, { ...sharedProps, ...inputProps })), inputType === 'time' && (_jsx(TimeInput, { ...sharedProps, ...inputProps })), inputType === 'colourPicker' && (_jsx(ColourPickerDropdown, { ...sharedProps, ...inputProps })), inputType === 'selectDropdown' && (_jsx(SelectDropdown, { ...sharedProps, ...inputProps })), inputType === 'datePicker' && (_jsx(DatePicker, { ...sharedProps, ...inputProps })), inputType === 'combobox' && (_jsx(Combobox, { ...sharedProps, ...inputProps })), ((helperLinkText && helperLinkUrl) || errorText) && (_jsxs("div", { className: "ds-form-field__message", children: [errorText && (_jsxs("span", { className: "ds-form-field__message--error", id: `${id}-error`, children: [_jsx(Icon, { size: 12, name: "triangle-alert" }), errorText] })), helperLinkText && helperLinkUrl && (_jsxs("a", { href: helperLinkUrl, "aria-label": `${label} helper link`, className: "ds-form-field__message--helper", children: [helperLinkText, ' ', _jsx(Icon, { size: 12, name: "arrow-up-right" })] }))] }))] }));
|
|
29
30
|
};
|
|
30
31
|
//# sourceMappingURL=FormField.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FormField.js","sourceRoot":"","sources":["../../../src/components/formField/FormField.tsx"],"names":[],"mappings":";AAAA,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,EAAE,QAAQ,EAAE,MAAM,8BAA8B,CAAC;AAExD,OAAO,EAAE,UAAU,EAAwB,MAAM,kCAAkC,CAAC;AACpF,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AACpC,OAAO,EAAE,oBAAoB,EAAkC,MAAM,oDAAoD,CAAC;AAC1H,OAAO,EAAE,WAAW,EAAyB,MAAM,6BAA6B,CAAC;AACjF,OAAO,EAAE,cAAc,EAAiC,MAAM,wCAAwC,CAAC;AACvG,OAAO,EAAE,SAAS,EAAuB,MAAM,yBAAyB,CAAC;AACzE,OAAO,EAAE,QAAQ,EAAsB,MAAM,4BAA4B,CAAC;AAC1E,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;
|
|
1
|
+
{"version":3,"file":"FormField.js","sourceRoot":"","sources":["../../../src/components/formField/FormField.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FormField.stories.d.ts","sourceRoot":"","sources":["../../../src/components/formField/FormField.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAI5D,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAExC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,SAAS,CAGhC,CAAC;AAEF,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkDnB,CAAC;AAEF,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAGnC,eAAO,MAAM,WAAW,EAAE,
|
|
1
|
+
{"version":3,"file":"FormField.stories.d.ts","sourceRoot":"","sources":["../../../src/components/formField/FormField.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAI5D,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAExC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,SAAS,CAGhC,CAAC;AAEF,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkDnB,CAAC;AAEF,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAGnC,eAAO,MAAM,WAAW,EAAE,KA8FzB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAgBtB,CAAC;AAEF,eAAe,IAAI,CAAC"}
|
|
@@ -39,7 +39,7 @@ export const Default = {
|
|
|
39
39
|
},
|
|
40
40
|
'inputType': {
|
|
41
41
|
control: 'select',
|
|
42
|
-
options: ['text', 'textarea', 'number', 'colourPicker', 'selectDropdown', 'datePicker', 'combobox'],
|
|
42
|
+
options: ['text', 'textarea', 'number', 'time', 'colourPicker', 'selectDropdown', 'datePicker', 'combobox'],
|
|
43
43
|
description: 'Input type',
|
|
44
44
|
},
|
|
45
45
|
'inputProps.size': {
|
|
@@ -72,6 +72,9 @@ export const FormExample = {
|
|
|
72
72
|
placeholder: 'Enter a lovely message',
|
|
73
73
|
} }), _jsx(FormField, { id: "age", label: "Age", inputType: "number", inputProps: {
|
|
74
74
|
placeholder: 'Enter your age',
|
|
75
|
+
} }), _jsx(FormField, { id: "start-time", label: "Start time", inputType: "time", inputProps: {
|
|
76
|
+
'aria-label': 'Start time',
|
|
77
|
+
'defaultValue': '14:30',
|
|
75
78
|
} }), _jsx(FormField, { id: "colour-dropdown", label: "Colour", inputType: "colourPicker", inputProps: {
|
|
76
79
|
onChange: fn(),
|
|
77
80
|
} }), _jsx(FormField, { id: "select-dropdown", label: "Select", inputType: "selectDropdown", inputProps: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FormField.stories.js","sourceRoot":"","sources":["../../../src/components/formField/FormField.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,EAAE,EAAE,MAAM,gBAAgB,CAAC;AAEpC,OAAO,EAAE,qBAAqB,EAAE,MAAM,kCAAkC,CAAC;AACzE,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAExC,MAAM,IAAI,GAA2B;IACnC,KAAK,EAAE,sBAAsB;IAC7B,SAAS,EAAE,SAAS;CACrB,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG;IACrB,IAAI,EAAE;QACJ,EAAE,EAAE,YAAY;QAChB,KAAK,EAAE,YAAY;QACnB,UAAU,EAAE;YACV,WAAW,EAAE,iBAAiB;YAC9B,QAAQ,EAAE,EAAE,EAAE;SACf;QACD,cAAc,EAAE,kBAAkB;QAClC,aAAa,EAAE,wBAAwB;QACvC,SAAS,EAAE,yBAAyB;QACpC,gBAAgB,EAAE,6CAA6C;QAC/D,SAAS,EAAE,MAAM;KAClB;IACD,QAAQ,EAAE;QACR,gBAAgB,EAAE;YAChB,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,kBAAkB;SAChC;QACD,eAAe,EAAE;YACf,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,iBAAiB;SAC/B;QACD,WAAW,EAAE;YACX,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,YAAY;SAC1B;QACD,kBAAkB,EAAE;YAClB,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,mBAAmB;SACjC;QACD,WAAW,EAAE;YACX,OAAO,EAAE,QAAQ;YACjB,OAAO,EAAE,CAAC,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,cAAc,EAAE,gBAAgB,EAAE,YAAY,EAAE,UAAU,CAAC;
|
|
1
|
+
{"version":3,"file":"FormField.stories.js","sourceRoot":"","sources":["../../../src/components/formField/FormField.stories.tsx"],"names":[],"mappings":"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"}
|
|
@@ -38,6 +38,11 @@ describe('FormField component', () => {
|
|
|
38
38
|
const input = screen.getByPlaceholderText('Enter a number');
|
|
39
39
|
expect(input).toHaveClass('ds-number-input');
|
|
40
40
|
});
|
|
41
|
+
test('renders a time input when inputType is time', () => {
|
|
42
|
+
render(_jsx(FormField, { id: "niceid", inputType: "time", inputProps: { 'aria-label': 'Start time' } }));
|
|
43
|
+
const input = screen.getByLabelText('Start time');
|
|
44
|
+
expect(input).toHaveAttribute('type', 'time');
|
|
45
|
+
});
|
|
41
46
|
test('renders a colour picker dropdown when inputType is colourPicker', () => {
|
|
42
47
|
render(_jsx(FormField, { id: "niceid", inputType: "colourPicker" }));
|
|
43
48
|
const input = screen.getByRole('button');
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FormField.test.js","sourceRoot":"","sources":["../../../src/components/formField/FormField.test.tsx"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"FormField.test.js","sourceRoot":"","sources":["../../../src/components/formField/FormField.test.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import type { ComboboxSearchType } from '../../../combobox/types';
|
|
2
|
+
import { type InputHTMLAttributes } from 'react';
|
|
3
|
+
/** Expected string `HH:MM` or `HH:MM:SS`; format-shaped versus strict time validation. */
|
|
4
|
+
export type TimeValue = `${string}:${string}` | `${string}:${string}:${string}`;
|
|
5
|
+
export type TimeGranularity = 'minute' | 'second';
|
|
6
|
+
export type TimeInputProps = {
|
|
7
|
+
options?: TimeValue[];
|
|
8
|
+
granularity?: TimeGranularity;
|
|
9
|
+
hasError?: boolean;
|
|
10
|
+
onValueChange?: (value: string) => void;
|
|
11
|
+
searchType?: ComboboxSearchType;
|
|
12
|
+
highlightStringMatches?: boolean;
|
|
13
|
+
} & Omit<InputHTMLAttributes<HTMLInputElement>, 'defaultValue' | 'size' | 'type' | 'value'> & {
|
|
14
|
+
value?: TimeValue | '';
|
|
15
|
+
defaultValue?: TimeValue | '';
|
|
16
|
+
};
|
|
17
|
+
/** The forwarded ref is attached in native mode but when `options` is provided, no input ref is exposed. */
|
|
18
|
+
export declare const TimeInput: import("react").ForwardRefExoticComponent<{
|
|
19
|
+
options?: TimeValue[];
|
|
20
|
+
granularity?: TimeGranularity;
|
|
21
|
+
hasError?: boolean;
|
|
22
|
+
onValueChange?: (value: string) => void;
|
|
23
|
+
searchType?: ComboboxSearchType;
|
|
24
|
+
highlightStringMatches?: boolean;
|
|
25
|
+
} & Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "defaultValue" | "type" | "value"> & {
|
|
26
|
+
value?: TimeValue | "";
|
|
27
|
+
defaultValue?: TimeValue | "";
|
|
28
|
+
} & import("react").RefAttributes<HTMLInputElement>>;
|
|
29
|
+
//# sourceMappingURL=TimeInput.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"TimeInput.d.ts","sourceRoot":"","sources":["../../../../../src/components/formField/inputs/time/TimeInput.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAkB,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AAEpF,OAAO,EAAwE,KAAK,mBAAmB,EAAE,MAAM,OAAO,CAAC;AAEvH,0FAA0F;AAC1F,MAAM,MAAM,SAAS,GAAG,GAAG,MAAM,IAAI,MAAM,EAAE,GAAG,GAAG,MAAM,IAAI,MAAM,IAAI,MAAM,EAAE,CAAC;AAChF,MAAM,MAAM,eAAe,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAElD,MAAM,MAAM,cAAc,GAAG;IAC3B,OAAO,CAAC,EAAE,SAAS,EAAE,CAAC;IACtB,WAAW,CAAC,EAAE,eAAe,CAAC;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,UAAU,CAAC,EAAE,kBAAkB,CAAC;IAChC,sBAAsB,CAAC,EAAE,OAAO,CAAC;CAClC,GAAG,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,cAAc,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC,GAAG;IAC5F,KAAK,CAAC,EAAE,SAAS,GAAG,EAAE,CAAC;IACvB,YAAY,CAAC,EAAE,SAAS,GAAG,EAAE,CAAC;CAC/B,CAAC;AAIF,4GAA4G;AAC5G,eAAO,MAAM,SAAS;cAdV,SAAS,EAAE;kBACP,eAAe;eAClB,OAAO;oBACF,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI;iBAC1B,kBAAkB;6BACN,OAAO;;YAExB,SAAS,GAAG,EAAE;mBACP,SAAS,GAAG,EAAE;oDAkJ7B,CAAC"}
|
|
@@ -0,0 +1,67 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import classNames from 'classnames';
|
|
3
|
+
import { Combobox } from '../../../combobox/Combobox';
|
|
4
|
+
import { Icon } from '../../../icon/Icon';
|
|
5
|
+
import { forwardRef, useCallback, useMemo, useRef, useState } from 'react';
|
|
6
|
+
const clockIcon = _jsx(Icon, { name: "clock-3", size: 16 });
|
|
7
|
+
/** The forwarded ref is attached in native mode but when `options` is provided, no input ref is exposed. */
|
|
8
|
+
export const TimeInput = forwardRef((props, ref) => {
|
|
9
|
+
const { options, granularity = 'minute', hasError = false, onValueChange, searchType = 'prefix', highlightStringMatches = false, onChange, className, disabled = false, id, name, placeholder, value: controlledValue, defaultValue = '', 'aria-describedby': ariaDescribedBy, 'aria-invalid': ariaInvalid, 'aria-label': ariaLabel, ...rest } = props;
|
|
10
|
+
const isControlled = controlledValue !== undefined;
|
|
11
|
+
const [internalValue, setInternalValue] = useState(defaultValue);
|
|
12
|
+
const currentValue = isControlled ? controlledValue ?? '' : internalValue;
|
|
13
|
+
const inputRef = useRef(null);
|
|
14
|
+
const setRefs = useCallback((node) => {
|
|
15
|
+
inputRef.current = node;
|
|
16
|
+
if (typeof ref === 'function') {
|
|
17
|
+
ref(node);
|
|
18
|
+
}
|
|
19
|
+
else if (ref) {
|
|
20
|
+
ref.current = node;
|
|
21
|
+
}
|
|
22
|
+
}, [ref]);
|
|
23
|
+
const updateValue = useCallback((nextValue, nativeEvent) => {
|
|
24
|
+
if (!isControlled) {
|
|
25
|
+
setInternalValue(nextValue);
|
|
26
|
+
}
|
|
27
|
+
onValueChange?.(nextValue);
|
|
28
|
+
if (nativeEvent) {
|
|
29
|
+
onChange?.(nativeEvent);
|
|
30
|
+
return;
|
|
31
|
+
}
|
|
32
|
+
// Combobox-driven updates only provide compatibility with common form handlers.
|
|
33
|
+
onChange?.({
|
|
34
|
+
currentTarget: { value: nextValue },
|
|
35
|
+
target: { value: nextValue },
|
|
36
|
+
});
|
|
37
|
+
}, [isControlled, onChange, onValueChange]);
|
|
38
|
+
const handleNativeChange = useCallback((event) => {
|
|
39
|
+
updateValue(event.currentTarget.value, event);
|
|
40
|
+
}, [updateValue]);
|
|
41
|
+
const focusAndSelectHours = useCallback(() => {
|
|
42
|
+
const input = inputRef.current;
|
|
43
|
+
if (!input)
|
|
44
|
+
return;
|
|
45
|
+
input.focus();
|
|
46
|
+
try {
|
|
47
|
+
input.setSelectionRange(0, 2);
|
|
48
|
+
}
|
|
49
|
+
catch {
|
|
50
|
+
// Some browsers do not expose selection APIs on time inputs.
|
|
51
|
+
}
|
|
52
|
+
}, []);
|
|
53
|
+
const timeOptions = useMemo(() => (options ?? []).map(time => ({ value: time, label: time })), [options]);
|
|
54
|
+
const selectedTimeValue = options?.includes(currentValue) ? [currentValue] : [];
|
|
55
|
+
const handleTimeListChange = useCallback((values) => {
|
|
56
|
+
const nextValue = values[0] ?? '';
|
|
57
|
+
updateValue(nextValue);
|
|
58
|
+
}, [updateValue]);
|
|
59
|
+
if (options) {
|
|
60
|
+
return (_jsxs("div", { className: classNames('ds-time-input', className), children: [name && _jsx("input", { type: "hidden", name: name, value: selectedTimeValue[0] ?? '' }), _jsx(Combobox, { id: id, options: timeOptions, value: selectedTimeValue, onValueChange: handleTimeListChange, searchType: searchType, highlightStringMatches: highlightStringMatches, placeholder: placeholder ?? 'Select time', disabled: disabled, hasError: hasError, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, "aria-label": ariaLabel, triggerVariant: "button", selectedValueDisplay: "text", showDropdownTrigger: false, triggerEndContent: clockIcon })] }));
|
|
61
|
+
}
|
|
62
|
+
return (_jsxs("div", { className: classNames('ds-time-input', className), children: [_jsx("input", { ...rest, ref: setRefs, id: id, name: name, type: "time", value: currentValue, step: granularity === 'second' ? 1 : 60, disabled: disabled, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, "aria-label": ariaLabel, placeholder: placeholder, className: classNames('ds-input', 'ds-input--M', 'ds-time-input__input', {
|
|
63
|
+
'ds-input--error': hasError,
|
|
64
|
+
}), onChange: handleNativeChange }), _jsx("button", { type: "button", className: "ds-time-input__icon-button", onClick: focusAndSelectHours, "aria-label": "Select time", disabled: disabled, children: clockIcon })] }));
|
|
65
|
+
});
|
|
66
|
+
TimeInput.displayName = 'TimeInput';
|
|
67
|
+
//# sourceMappingURL=TimeInput.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"TimeInput.js","sourceRoot":"","sources":["../../../../../src/components/formField/inputs/time/TimeInput.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
import type { StoryObj } from '@storybook/react-vite';
|
|
2
|
+
import { type TimeValue } from './TimeInput';
|
|
3
|
+
declare const meta: {
|
|
4
|
+
title: string;
|
|
5
|
+
component: import("react").ForwardRefExoticComponent<{
|
|
6
|
+
options?: TimeValue[];
|
|
7
|
+
granularity?: import("./TimeInput").TimeGranularity;
|
|
8
|
+
hasError?: boolean;
|
|
9
|
+
onValueChange?: (value: string) => void;
|
|
10
|
+
searchType?: import("../../../..").ComboboxSearchType;
|
|
11
|
+
highlightStringMatches?: boolean;
|
|
12
|
+
} & Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "size" | "defaultValue" | "type" | "value"> & {
|
|
13
|
+
value?: TimeValue | "";
|
|
14
|
+
defaultValue?: TimeValue | "";
|
|
15
|
+
} & import("react").RefAttributes<HTMLInputElement>>;
|
|
16
|
+
parameters: {
|
|
17
|
+
layout: string;
|
|
18
|
+
docs: {
|
|
19
|
+
description: {
|
|
20
|
+
component: string;
|
|
21
|
+
};
|
|
22
|
+
};
|
|
23
|
+
};
|
|
24
|
+
tags: string[];
|
|
25
|
+
args: {
|
|
26
|
+
onValueChange: import("@vitest/spy").Mock<(...args: any[]) => any>;
|
|
27
|
+
};
|
|
28
|
+
argTypes: {
|
|
29
|
+
granularity: {
|
|
30
|
+
control: "inline-radio";
|
|
31
|
+
options: string[];
|
|
32
|
+
description: string;
|
|
33
|
+
};
|
|
34
|
+
options: {
|
|
35
|
+
control: "object";
|
|
36
|
+
description: string;
|
|
37
|
+
};
|
|
38
|
+
value: {
|
|
39
|
+
control: "text";
|
|
40
|
+
description: string;
|
|
41
|
+
};
|
|
42
|
+
defaultValue: {
|
|
43
|
+
control: "text";
|
|
44
|
+
description: string;
|
|
45
|
+
};
|
|
46
|
+
onValueChange: {
|
|
47
|
+
action: string;
|
|
48
|
+
description: string;
|
|
49
|
+
};
|
|
50
|
+
};
|
|
51
|
+
};
|
|
52
|
+
export default meta;
|
|
53
|
+
type Story = StoryObj<typeof meta>;
|
|
54
|
+
export declare const NativeMinute: Story;
|
|
55
|
+
export declare const NativeSecond: Story;
|
|
56
|
+
export declare const NativeWithBounds: Story;
|
|
57
|
+
export declare const TimeList: Story;
|
|
58
|
+
export declare const TimeListHighlightedMatches: Story;
|
|
59
|
+
export declare const UncontrolledNative: Story;
|
|
60
|
+
//# sourceMappingURL=TimeInput.stories.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"TimeInput.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/formField/inputs/time/TimeInput.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAI5D,OAAO,EAAkC,KAAK,SAAS,EAAE,MAAM,aAAa,CAAC;AAI7E,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuCwB,CAAC;AAEnC,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAmEnC,eAAO,MAAM,YAAY,EAAE,KAMyI,CAAC;AAErK,eAAO,MAAM,YAAY,EAAE,KAM6F,CAAC;AAEzH,eAAO,MAAM,gBAAgB,EAAE,KAQqJ,CAAC;AAErL,eAAO,MAAM,QAAQ,EAAE,KAO+H,CAAC;AAEvJ,eAAO,MAAM,0BAA0B,EAAE,KASwI,CAAC;AAElL,eAAO,MAAM,kBAAkB,EAAE,KAKkH,CAAC"}
|
|
@@ -0,0 +1,132 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { Button } from '../../../button/Button';
|
|
3
|
+
import { useEffect, useState } from 'react';
|
|
4
|
+
import { fn } from 'storybook/test';
|
|
5
|
+
import { TimeInput } from './TimeInput';
|
|
6
|
+
const timeOptions = ['09:00', '09:30', '10:00', '10:30', '11:00'];
|
|
7
|
+
const meta = {
|
|
8
|
+
title: 'Components/FormField/Inputs/TimeInput',
|
|
9
|
+
component: TimeInput,
|
|
10
|
+
parameters: {
|
|
11
|
+
layout: 'centered',
|
|
12
|
+
docs: {
|
|
13
|
+
description: {
|
|
14
|
+
component: '`TimeInput` supports both native time entry and a combobox-backed time list. When you pass `value`, treat it as a controlled component and update it in `onValueChange`; use `defaultValue` for uncontrolled usage.',
|
|
15
|
+
},
|
|
16
|
+
},
|
|
17
|
+
},
|
|
18
|
+
tags: ['autodocs'],
|
|
19
|
+
args: {
|
|
20
|
+
onValueChange: fn(),
|
|
21
|
+
},
|
|
22
|
+
argTypes: {
|
|
23
|
+
granularity: {
|
|
24
|
+
control: 'inline-radio',
|
|
25
|
+
options: ['minute', 'second'],
|
|
26
|
+
description: 'Controls whether the native time input works in minute or second increments.',
|
|
27
|
+
},
|
|
28
|
+
options: {
|
|
29
|
+
control: 'object',
|
|
30
|
+
description: 'When provided, `TimeInput` switches from native `input[type="time"]` to the combobox-backed time list mode.',
|
|
31
|
+
},
|
|
32
|
+
value: {
|
|
33
|
+
control: 'text',
|
|
34
|
+
description: 'Controlled value. If you provide this, update it from `onValueChange` in your app or story state.',
|
|
35
|
+
},
|
|
36
|
+
defaultValue: {
|
|
37
|
+
control: 'text',
|
|
38
|
+
description: 'Uncontrolled initial value. Use this when you want the component to manage its own state.',
|
|
39
|
+
},
|
|
40
|
+
onValueChange: {
|
|
41
|
+
action: 'value changed',
|
|
42
|
+
description: 'Called with the next string value (`HH:MM` or `HH:MM:SS`).',
|
|
43
|
+
},
|
|
44
|
+
},
|
|
45
|
+
};
|
|
46
|
+
export default meta;
|
|
47
|
+
const withDescription = (story, description) => ({
|
|
48
|
+
...story,
|
|
49
|
+
parameters: {
|
|
50
|
+
...story.parameters,
|
|
51
|
+
docs: {
|
|
52
|
+
...story.parameters?.docs,
|
|
53
|
+
description: {
|
|
54
|
+
story: description,
|
|
55
|
+
},
|
|
56
|
+
},
|
|
57
|
+
},
|
|
58
|
+
});
|
|
59
|
+
const ControlledTimeInput = (args) => {
|
|
60
|
+
const [value, setValue] = useState(args.value ?? args.defaultValue ?? '');
|
|
61
|
+
useEffect(() => {
|
|
62
|
+
setValue(args.value ?? args.defaultValue ?? '');
|
|
63
|
+
}, [args.defaultValue, args.value]);
|
|
64
|
+
return (_jsx(TimeInput, { ...args, value: value, onValueChange: (nextValue) => {
|
|
65
|
+
setValue(nextValue);
|
|
66
|
+
args.onValueChange?.(nextValue);
|
|
67
|
+
} }));
|
|
68
|
+
};
|
|
69
|
+
const NativeValidationDemo = (args) => {
|
|
70
|
+
const [value, setValue] = useState(args.value ?? '');
|
|
71
|
+
useEffect(() => {
|
|
72
|
+
setValue(args.value ?? '');
|
|
73
|
+
}, [args.value]);
|
|
74
|
+
return (_jsxs("form", { style: { display: 'grid', gap: 12, width: 280 }, onSubmit: (event) => {
|
|
75
|
+
event.preventDefault();
|
|
76
|
+
const form = event.currentTarget;
|
|
77
|
+
if (!form.reportValidity()) {
|
|
78
|
+
return;
|
|
79
|
+
}
|
|
80
|
+
}, children: [_jsx(TimeInput, { ...args, value: value, onValueChange: (nextValue) => {
|
|
81
|
+
setValue(nextValue);
|
|
82
|
+
args.onValueChange?.(nextValue);
|
|
83
|
+
} }), _jsx(Button, { variant: "primary", size: "M", type: "submit", children: "Submit" })] }));
|
|
84
|
+
};
|
|
85
|
+
export const NativeMinute = withDescription({
|
|
86
|
+
args: {
|
|
87
|
+
value: '14:30',
|
|
88
|
+
granularity: 'minute',
|
|
89
|
+
},
|
|
90
|
+
render: args => _jsx(ControlledTimeInput, { ...args }),
|
|
91
|
+
}, 'Controlled native time input in minute mode. This story keeps local state on purpose to demonstrate the correct `value` + `onValueChange` integration pattern.');
|
|
92
|
+
export const NativeSecond = withDescription({
|
|
93
|
+
args: {
|
|
94
|
+
value: '14:30:15',
|
|
95
|
+
granularity: 'second',
|
|
96
|
+
},
|
|
97
|
+
render: args => _jsx(ControlledTimeInput, { ...args }),
|
|
98
|
+
}, 'Controlled native time input in second mode, showing the same parent-managed state pattern with `HH:MM:SS` values.');
|
|
99
|
+
export const NativeWithBounds = withDescription({
|
|
100
|
+
args: {
|
|
101
|
+
value: '08:30',
|
|
102
|
+
granularity: 'minute',
|
|
103
|
+
min: '09:00',
|
|
104
|
+
max: '17:30',
|
|
105
|
+
},
|
|
106
|
+
render: args => _jsx(NativeValidationDemo, { ...args }),
|
|
107
|
+
}, 'Demonstrates the browser-native min/max validation flow. Enter a time outside the allowed range and submit the form to let the browser show its own native validation message.');
|
|
108
|
+
export const TimeList = withDescription({
|
|
109
|
+
args: {
|
|
110
|
+
options: [...timeOptions],
|
|
111
|
+
value: '10:00',
|
|
112
|
+
placeholder: 'Select time',
|
|
113
|
+
},
|
|
114
|
+
render: args => _jsx(ControlledTimeInput, { ...args }),
|
|
115
|
+
}, 'Controlled time-list mode using the combobox-backed variant. Selecting a time updates the local story state the same way an app component would.');
|
|
116
|
+
export const TimeListHighlightedMatches = withDescription({
|
|
117
|
+
args: {
|
|
118
|
+
options: [...timeOptions],
|
|
119
|
+
value: '',
|
|
120
|
+
placeholder: 'Search times',
|
|
121
|
+
searchType: 'substring',
|
|
122
|
+
highlightStringMatches: true,
|
|
123
|
+
},
|
|
124
|
+
render: args => _jsx(ControlledTimeInput, { ...args }),
|
|
125
|
+
}, 'Combobox-backed time-list mode with substring matching and highlighted text so consumers can review how search behaves when users type partial time fragments such as `30`.');
|
|
126
|
+
export const UncontrolledNative = withDescription({
|
|
127
|
+
args: {
|
|
128
|
+
defaultValue: '09:30',
|
|
129
|
+
granularity: 'minute',
|
|
130
|
+
},
|
|
131
|
+
}, 'Uncontrolled native usage using `defaultValue`. This is useful when the parent does not need to drive the current value after initial render.');
|
|
132
|
+
//# sourceMappingURL=TimeInput.stories.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"TimeInput.stories.js","sourceRoot":"","sources":["../../../../../src/components/formField/inputs/time/TimeInput.stories.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"TimeInput.test.d.ts","sourceRoot":"","sources":["../../../../../src/components/formField/inputs/time/TimeInput.test.tsx"],"names":[],"mappings":"AAAA,OAAO,kCAAkC,CAAC"}
|