@planningcenter/tapestry 3.2.1-rc.5 → 3.2.1-rc.7
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/combo-box/ComboBox.d.ts +18 -7
- package/dist/components/combo-box/ComboBox.d.ts.map +1 -1
- package/dist/components/combo-box/ComboBox.js +7 -2
- package/dist/components/combo-box/ComboBox.js.map +1 -1
- package/dist/components/time-field/TimeField.d.ts +47 -0
- package/dist/components/time-field/TimeField.d.ts.map +1 -0
- package/dist/components/time-field/TimeField.js +19 -0
- package/dist/components/time-field/TimeField.js.map +1 -0
- package/dist/components/time-field/index.d.ts +4 -0
- package/dist/components/time-field/index.d.ts.map +1 -0
- package/dist/reactRender.css +1457 -1326
- package/dist/reactRender.css.map +1 -1
- package/dist/reactRenderLegacy.css +1457 -1326
- package/dist/reactRenderLegacy.css.map +1 -1
- package/dist/unstable.css +131 -0
- package/dist/unstable.css.map +1 -1
- package/dist/unstable.d.ts +1 -0
- package/dist/unstable.d.ts.map +1 -1
- package/dist/unstable.js +1 -0
- package/dist/unstable.js.map +1 -1
- package/package.json +3 -3
|
@@ -11,8 +11,11 @@ export interface ComboBoxProps<T extends object = object> {
|
|
|
11
11
|
defaultInputValue?: string;
|
|
12
12
|
/** The default list of items (uncontrolled dynamic collection). */
|
|
13
13
|
defaultItems?: Iterable<T>;
|
|
14
|
-
/**
|
|
15
|
-
|
|
14
|
+
/**
|
|
15
|
+
* The default uncontrolled selected value(s).
|
|
16
|
+
* Pass a `Key[]` when `selectionMode` is `"multiple"`.
|
|
17
|
+
*/
|
|
18
|
+
defaultValue?: Key | Key[] | null;
|
|
16
19
|
/** Helper text displayed below the component. Styled as error text when `invalid` is `true`. */
|
|
17
20
|
description?: string;
|
|
18
21
|
/** Disables the field and trigger button. */
|
|
@@ -35,8 +38,11 @@ export interface ComboBoxProps<T extends object = object> {
|
|
|
35
38
|
menuTrigger?: "focus" | "input" | "manual";
|
|
36
39
|
/** Field name for form submission. */
|
|
37
40
|
name?: string;
|
|
38
|
-
/**
|
|
39
|
-
|
|
41
|
+
/**
|
|
42
|
+
* Called when the selected value(s) change.
|
|
43
|
+
* Receives `Key[]` when `selectionMode` is `"multiple"`, otherwise `Key | null`.
|
|
44
|
+
*/
|
|
45
|
+
onChange?: ((value: Key | null) => void) | ((value: Key[]) => void);
|
|
40
46
|
/** Called when the input text changes. */
|
|
41
47
|
onInputChange?: (value: string) => void;
|
|
42
48
|
/** Placeholder text for the input. */
|
|
@@ -45,16 +51,21 @@ export interface ComboBoxProps<T extends object = object> {
|
|
|
45
51
|
readOnly?: boolean;
|
|
46
52
|
/** If `true`, appends an asterisk at the end of the label text. */
|
|
47
53
|
required?: boolean;
|
|
54
|
+
/** Controls whether one or multiple items can be selected. Defaults to `"single"`. */
|
|
55
|
+
selectionMode?: "single" | "multiple";
|
|
48
56
|
/** The size of the combo box. */
|
|
49
57
|
size?: ComboBoxSize;
|
|
50
|
-
/**
|
|
51
|
-
|
|
58
|
+
/**
|
|
59
|
+
* The controlled selected value(s).
|
|
60
|
+
* Pass a `Key[]` when `selectionMode` is `"multiple"`.
|
|
61
|
+
*/
|
|
62
|
+
value?: Key | Key[] | null;
|
|
52
63
|
}
|
|
53
64
|
export type ComboBoxElementProps<T extends object = object> = ComboBoxProps<T> & Omit<AriaAttributes, keyof ComboBoxProps<T>> & {
|
|
54
65
|
className?: string;
|
|
55
66
|
id?: string;
|
|
56
67
|
};
|
|
57
|
-
export declare function ComboBox<T extends object>({ allowsEmptyCollection, children, className, defaultInputValue, defaultItems, defaultValue, description, disabled, disabledKeys, filter, hideLabel, inputValue, invalid, items, label, menuTrigger, name, onChange, onInputChange, placeholder, readOnly, required, size, value, ...restProps }: ComboBoxElementProps<T>): React.JSX.Element;
|
|
68
|
+
export declare function ComboBox<T extends object>({ allowsEmptyCollection, children, className, defaultInputValue, defaultItems, defaultValue, description, disabled, disabledKeys, filter, hideLabel, inputValue, invalid, items, label, menuTrigger, name, onChange, onInputChange, placeholder, readOnly, required, selectionMode, size, value, ...restProps }: ComboBoxElementProps<T>): React.JSX.Element;
|
|
58
69
|
export declare function ComboBoxItem<T extends object>(props: ListBoxItemProps<T>): React.JSX.Element;
|
|
59
70
|
interface ComboBoxSectionProps<T extends object> extends Omit<ListBoxSectionProps<T>, "children"> {
|
|
60
71
|
children: ReactNode;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ComboBox.d.ts","sourceRoot":"","sources":["../../../src/components/combo-box/ComboBox.tsx"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAA;AAIpB,OAAO,KAAK,EAAE,EAAE,KAAK,cAAc,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAClE,OAAO,KAAK,EACV,GAAG,EACH,gBAAgB,EAChB,mBAAmB,EACpB,MAAM,uBAAuB,CAAA;AAe9B,MAAM,MAAM,YAAY,GAAG,IAAI,GAAG,IAAI,CAAA;AAEtC,MAAM,WAAW,aAAa,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM;IACtD,qFAAqF;IACrF,qBAAqB,CAAC,EAAE,OAAO,CAAA;IAC/B,kFAAkF;IAClF,QAAQ,EAAE,SAAS,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,KAAK,SAAS,CAAC,CAAA;IAC9C,wDAAwD;IACxD,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,mEAAmE;IACnE,YAAY,CAAC,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAA;IAC1B
|
|
1
|
+
{"version":3,"file":"ComboBox.d.ts","sourceRoot":"","sources":["../../../src/components/combo-box/ComboBox.tsx"],"names":[],"mappings":"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"}
|
|
@@ -3,9 +3,14 @@ import classNames from 'classnames';
|
|
|
3
3
|
import React__default from 'react';
|
|
4
4
|
import { ComboBox as ComboBox$1, Label, Group, Input, Button, Popover, ListBox, Text, ListBoxItem, ListBoxSection, Header } from 'react-aria-components';
|
|
5
5
|
|
|
6
|
-
function ComboBox({ allowsEmptyCollection, children, className, defaultInputValue, defaultItems, defaultValue, description, disabled, disabledKeys, filter, hideLabel, inputValue, invalid, items, label, menuTrigger, name, onChange, onInputChange, placeholder, readOnly, required, size = "md", value, ...restProps }) {
|
|
6
|
+
function ComboBox({ allowsEmptyCollection, children, className, defaultInputValue, defaultItems, defaultValue, description, disabled, disabledKeys, filter, hideLabel, inputValue, invalid, items, label, menuTrigger, name, onChange, onInputChange, placeholder, readOnly, required, selectionMode, size = "md", value, ...restProps }) {
|
|
7
7
|
const combinedClassName = classNames("tds-combo-box", { "tds-combo-box--lg": size === "lg" }, className);
|
|
8
|
-
return (
|
|
8
|
+
return (
|
|
9
|
+
// React Aria's ComboBox uses conditional generic types (ComboBoxProps<T, M>) to
|
|
10
|
+
// differentiate value/defaultValue/onChange/selectionMode per selection mode. Since
|
|
11
|
+
// our interface intentionally abstracts this detail, we bridge with targeted assertions
|
|
12
|
+
// on the four props that carry the selection-mode variance.
|
|
13
|
+
React__default.createElement(ComboBox$1, { ...restProps, allowsEmptyCollection: allowsEmptyCollection, "aria-label": hideLabel ? label : undefined, className: combinedClassName, defaultFilter: filter, defaultInputValue: defaultInputValue, defaultItems: defaultItems, defaultValue: defaultValue, disabledKeys: disabledKeys, inputValue: inputValue, isDisabled: disabled, isInvalid: invalid, isReadOnly: readOnly, isRequired: required, items: items, menuTrigger: menuTrigger, name: name, onChange: onChange, onInputChange: onInputChange, selectionMode: selectionMode, value: value },
|
|
9
14
|
!hideLabel && React__default.createElement(Label, { className: "tds-combo-box-label" }, label),
|
|
10
15
|
React__default.createElement(Group, { className: "tds-combo-box-field" },
|
|
11
16
|
React__default.createElement(Input, { className: "tds-combo-box-input", placeholder: placeholder }),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ComboBox.js","sources":["../../../src/components/combo-box/ComboBox.tsx"],"sourcesContent":["import \"./index.css\"\n\nimport Icon from \"@utilities/Icon\"\nimport classNames from \"classnames\"\nimport React, { type AriaAttributes, type ReactNode } from \"react\"\nimport type {\n Key,\n ListBoxItemProps,\n ListBoxSectionProps,\n} from \"react-aria-components\"\nimport {\n Button,\n ComboBox as AriaComboBox,\n Group,\n Header,\n Input,\n Label,\n ListBox,\n ListBoxItem,\n ListBoxSection,\n Popover,\n Text,\n} from \"react-aria-components\"\n\nexport type ComboBoxSize = \"md\" | \"lg\"\n\nexport interface ComboBoxProps<T extends object = object> {\n /** Whether the combo box allows the menu to be open when the collection is empty. */\n allowsEmptyCollection?: boolean\n /** The children of the combo box (ComboBoxItem elements or a render function). */\n children: ReactNode | ((item: T) => ReactNode)\n /** The default uncontrolled value of the text input. */\n defaultInputValue?: string\n /** The default list of items (uncontrolled dynamic collection). */\n defaultItems?: Iterable<T>\n
|
|
1
|
+
{"version":3,"file":"ComboBox.js","sources":["../../../src/components/combo-box/ComboBox.tsx"],"sourcesContent":["import \"./index.css\"\n\nimport Icon from \"@utilities/Icon\"\nimport classNames from \"classnames\"\nimport React, { type AriaAttributes, type ReactNode } from \"react\"\nimport type {\n Key,\n ListBoxItemProps,\n ListBoxSectionProps,\n} from \"react-aria-components\"\nimport {\n Button,\n ComboBox as AriaComboBox,\n Group,\n Header,\n Input,\n Label,\n ListBox,\n ListBoxItem,\n ListBoxSection,\n Popover,\n Text,\n} from \"react-aria-components\"\n\nexport type ComboBoxSize = \"md\" | \"lg\"\n\nexport interface ComboBoxProps<T extends object = object> {\n /** Whether the combo box allows the menu to be open when the collection is empty. */\n allowsEmptyCollection?: boolean\n /** The children of the combo box (ComboBoxItem elements or a render function). */\n children: ReactNode | ((item: T) => ReactNode)\n /** The default uncontrolled value of the text input. */\n defaultInputValue?: string\n /** The default list of items (uncontrolled dynamic collection). */\n defaultItems?: Iterable<T>\n /**\n * The default uncontrolled selected value(s).\n * Pass a `Key[]` when `selectionMode` is `\"multiple\"`.\n */\n defaultValue?: Key | Key[] | null\n /** Helper text displayed below the component. Styled as error text when `invalid` is `true`. */\n description?: string\n /** Disables the field and trigger button. */\n disabled?: boolean\n /** Item keys that are disabled and cannot be selected or focused. */\n disabledKeys?: Iterable<Key>\n /** Custom filter function for determining if an item should appear in the list. */\n filter?: (textValue: string, inputValue: string) => boolean\n /** If `true`, the `label` text is rendered as an `aria-label` instead of a visible label element. */\n hideLabel?: boolean\n /** The controlled value of the text input. */\n inputValue?: string\n /** Whether the input is in an invalid state. */\n invalid?: boolean\n /** The list of items (controlled dynamic collection). */\n items?: Iterable<T>\n /** Accessible label for the field. */\n label: string\n /** Controls when the listbox opens. */\n menuTrigger?: \"focus\" | \"input\" | \"manual\"\n /** Field name for form submission. */\n name?: string\n /**\n * Called when the selected value(s) change.\n * Receives `Key[]` when `selectionMode` is `\"multiple\"`, otherwise `Key | null`.\n */\n onChange?: ((value: Key | null) => void) | ((value: Key[]) => void)\n /** Called when the input text changes. */\n onInputChange?: (value: string) => void\n /** Placeholder text for the input. */\n placeholder?: string\n /** If `true`, allows the value to be read but not changed. */\n readOnly?: boolean\n /** If `true`, appends an asterisk at the end of the label text. */\n required?: boolean\n /** Controls whether one or multiple items can be selected. Defaults to `\"single\"`. */\n selectionMode?: \"single\" | \"multiple\"\n /** The size of the combo box. */\n size?: ComboBoxSize\n /**\n * The controlled selected value(s).\n * Pass a `Key[]` when `selectionMode` is `\"multiple\"`.\n */\n value?: Key | Key[] | null\n}\n\nexport type ComboBoxElementProps<T extends object = object> = ComboBoxProps<T> &\n Omit<AriaAttributes, keyof ComboBoxProps<T>> & {\n className?: string\n id?: string\n }\n\nexport function ComboBox<T extends object>({\n allowsEmptyCollection,\n children,\n className,\n defaultInputValue,\n defaultItems,\n defaultValue,\n description,\n disabled,\n disabledKeys,\n filter,\n hideLabel,\n inputValue,\n invalid,\n items,\n label,\n menuTrigger,\n name,\n onChange,\n onInputChange,\n placeholder,\n readOnly,\n required,\n selectionMode,\n size = \"md\",\n value,\n ...restProps\n}: ComboBoxElementProps<T>) {\n const combinedClassName = classNames(\n \"tds-combo-box\",\n { \"tds-combo-box--lg\": size === \"lg\" },\n className\n )\n\n return (\n // React Aria's ComboBox uses conditional generic types (ComboBoxProps<T, M>) to\n // differentiate value/defaultValue/onChange/selectionMode per selection mode. Since\n // our interface intentionally abstracts this detail, we bridge with targeted assertions\n // on the four props that carry the selection-mode variance.\n <AriaComboBox\n {...restProps}\n allowsEmptyCollection={allowsEmptyCollection}\n aria-label={hideLabel ? label : undefined}\n className={combinedClassName}\n defaultFilter={filter}\n defaultInputValue={defaultInputValue}\n defaultItems={defaultItems}\n defaultValue={defaultValue as unknown as Key | null}\n disabledKeys={disabledKeys}\n inputValue={inputValue}\n isDisabled={disabled}\n isInvalid={invalid}\n isReadOnly={readOnly}\n isRequired={required}\n items={items}\n menuTrigger={menuTrigger}\n name={name}\n onChange={onChange as unknown as (value: Key | null) => void}\n onInputChange={onInputChange}\n selectionMode={selectionMode as \"single\" | undefined}\n value={value as unknown as Key | null}\n >\n {!hideLabel && <Label className=\"tds-combo-box-label\">{label}</Label>}\n <Group className=\"tds-combo-box-field\">\n <Input className=\"tds-combo-box-input\" placeholder={placeholder} />\n <Button className=\"tds-combo-box-button\">\n <Icon aria-hidden symbol=\"general#down-caret\" />\n </Button>\n </Group>\n <Popover className=\"tds-combo-box-popover\">\n <ListBox className=\"tds-combo-box-list\">{children}</ListBox>\n </Popover>\n {description && (\n <Text className=\"tds-combo-box-description\" slot=\"description\">\n <Icon\n aria-hidden\n className=\"tds-combo-box-description-invalid-icon\"\n symbol=\"general#exclamation-triangle\"\n />\n {description}\n </Text>\n )}\n </AriaComboBox>\n )\n}\n\nexport function ComboBoxItem<T extends object>(props: ListBoxItemProps<T>) {\n return (\n <ListBoxItem\n {...props}\n className={classNames(\"tds-combo-box-list-item\", props.className)}\n />\n )\n}\n\ninterface ComboBoxSectionProps<T extends object>\n extends Omit<ListBoxSectionProps<T>, \"children\"> {\n children: ReactNode\n title?: string\n}\n\nexport function ComboBoxSection<T extends object>({\n children,\n title,\n ...props\n}: ComboBoxSectionProps<T>) {\n return (\n <ListBoxSection\n {...props}\n className={classNames(\"tds-combo-box-list-section\", props.className)}\n >\n {title && (\n <Header className=\"tds-combo-box-section-header\">{title}</Header>\n )}\n {children}\n </ListBoxSection>\n )\n}\n"],"names":["React","AriaComboBox"],"mappings":"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"}
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
import "./index.css";
|
|
2
|
+
import type { CalendarDateTime, Time, ZonedDateTime } from "@internationalized/date";
|
|
3
|
+
import React, { type AriaAttributes } from "react";
|
|
4
|
+
export type TimeFieldSize = "md" | "lg";
|
|
5
|
+
export type TimeFieldValue = CalendarDateTime | Time | ZonedDateTime;
|
|
6
|
+
export interface TimeFieldProps {
|
|
7
|
+
/** The default uncontrolled value (e.g. `new Time(9, 30)` or `new CalendarDateTime(2025, 1, 1, 9, 30)`). */
|
|
8
|
+
defaultValue?: TimeFieldValue | null;
|
|
9
|
+
/** Helper text displayed below the component. Styled as error text when `invalid` is `true`. */
|
|
10
|
+
description?: string;
|
|
11
|
+
/** Disables the field. */
|
|
12
|
+
disabled?: boolean;
|
|
13
|
+
/** If `true`, always shows leading zeros in the hour field. */
|
|
14
|
+
forceLeadingZeros?: boolean;
|
|
15
|
+
/** If `true`, renders the label visually hidden. */
|
|
16
|
+
hideLabel?: boolean;
|
|
17
|
+
/** If `true`, hides the time zone abbreviation for ZonedDateTime values. */
|
|
18
|
+
hideTimeZone?: boolean;
|
|
19
|
+
/** Whether to display in 12 or 24 hour format. By default, determined by locale. */
|
|
20
|
+
hourCycle?: 12 | 24;
|
|
21
|
+
/** If `true`, applies error styling to the field and description. */
|
|
22
|
+
invalid?: boolean;
|
|
23
|
+
/** Accessible label for the field. */
|
|
24
|
+
label: string;
|
|
25
|
+
/** The maximum allowed time (e.g. `new Time(17, 0)`). */
|
|
26
|
+
max?: TimeFieldValue;
|
|
27
|
+
/** The minimum allowed time (e.g. `new Time(9, 0)`). */
|
|
28
|
+
min?: TimeFieldValue;
|
|
29
|
+
/** Field name for form submission. */
|
|
30
|
+
name?: string;
|
|
31
|
+
/** Called when the value changes. */
|
|
32
|
+
onChange?: (value: TimeFieldValue | null) => void;
|
|
33
|
+
/** Allows the value to be read but not changed. */
|
|
34
|
+
readOnly?: boolean;
|
|
35
|
+
/** If `true`, appends an asterisk after the label text. */
|
|
36
|
+
required?: boolean;
|
|
37
|
+
/** The size of the time field. */
|
|
38
|
+
size?: TimeFieldSize;
|
|
39
|
+
/** The controlled value (e.g. `new Time(9, 30)` or `new CalendarDateTime(2025, 1, 1, 9, 30)`). */
|
|
40
|
+
value?: TimeFieldValue | null;
|
|
41
|
+
}
|
|
42
|
+
export type TimeFieldElementProps = TimeFieldProps & Omit<AriaAttributes, keyof TimeFieldProps> & {
|
|
43
|
+
className?: string;
|
|
44
|
+
id?: string;
|
|
45
|
+
};
|
|
46
|
+
export declare function TimeField({ className, defaultValue, description, disabled, forceLeadingZeros, hideLabel, hideTimeZone, hourCycle, invalid, label, max, min, name, onChange, readOnly, required, size, value, ...restProps }: TimeFieldElementProps): React.JSX.Element;
|
|
47
|
+
//# sourceMappingURL=TimeField.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"TimeField.d.ts","sourceRoot":"","sources":["../../../src/components/time-field/TimeField.tsx"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAA;AAEpB,OAAO,KAAK,EACV,gBAAgB,EAChB,IAAI,EACJ,aAAa,EACd,MAAM,yBAAyB,CAAA;AAGhC,OAAO,KAAK,EAAE,EAAE,KAAK,cAAc,EAAE,MAAM,OAAO,CAAA;AASlD,MAAM,MAAM,aAAa,GAAG,IAAI,GAAG,IAAI,CAAA;AAEvC,MAAM,MAAM,cAAc,GAAG,gBAAgB,GAAG,IAAI,GAAG,aAAa,CAAA;AAEpE,MAAM,WAAW,cAAc;IAC7B,4GAA4G;IAC5G,YAAY,CAAC,EAAE,cAAc,GAAG,IAAI,CAAA;IACpC,gGAAgG;IAChG,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,0BAA0B;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,+DAA+D;IAC/D,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B,oDAAoD;IACpD,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,4EAA4E;IAC5E,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,oFAAoF;IACpF,SAAS,CAAC,EAAE,EAAE,GAAG,EAAE,CAAA;IACnB,qEAAqE;IACrE,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,sCAAsC;IACtC,KAAK,EAAE,MAAM,CAAA;IACb,yDAAyD;IACzD,GAAG,CAAC,EAAE,cAAc,CAAA;IACpB,wDAAwD;IACxD,GAAG,CAAC,EAAE,cAAc,CAAA;IACpB,sCAAsC;IACtC,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,qCAAqC;IACrC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,cAAc,GAAG,IAAI,KAAK,IAAI,CAAA;IACjD,mDAAmD;IACnD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,2DAA2D;IAC3D,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,kCAAkC;IAClC,IAAI,CAAC,EAAE,aAAa,CAAA;IACpB,kGAAkG;IAClG,KAAK,CAAC,EAAE,cAAc,GAAG,IAAI,CAAA;CAC9B;AAED,MAAM,MAAM,qBAAqB,GAAG,cAAc,GAChD,IAAI,CAAC,cAAc,EAAE,MAAM,cAAc,CAAC,GAAG;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,EAAE,CAAC,EAAE,MAAM,CAAA;CACZ,CAAA;AAEH,wBAAgB,SAAS,CAAC,EACxB,SAAS,EACT,YAAY,EACZ,WAAW,EACX,QAAQ,EACR,iBAAiB,EACjB,SAAS,EACT,YAAY,EACZ,SAAS,EACT,OAAO,EACP,KAAK,EACL,GAAG,EACH,GAAG,EACH,IAAI,EACJ,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,IAAW,EACX,KAAK,EACL,GAAG,SAAS,EACb,EAAE,qBAAqB,qBAwDvB"}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import Icon from '../../utilities/Icon.js';
|
|
2
|
+
import classNames from 'classnames';
|
|
3
|
+
import React__default from 'react';
|
|
4
|
+
import { TimeField as TimeField$1, Label, DateInput, DateSegment, Text } from 'react-aria-components';
|
|
5
|
+
|
|
6
|
+
function TimeField({ className, defaultValue, description, disabled, forceLeadingZeros, hideLabel, hideTimeZone, hourCycle, invalid, label, max, min, name, onChange, readOnly, required, size = "md", value, ...restProps }) {
|
|
7
|
+
const combinedClassName = classNames("tds-time-field", { "tds-time-field--lg": size === "lg" }, className);
|
|
8
|
+
return (React__default.createElement(TimeField$1, { ...restProps, "aria-label": hideLabel ? label : undefined, className: combinedClassName, defaultValue: defaultValue, granularity: "minute", hideTimeZone: hideTimeZone, hourCycle: hourCycle, isDisabled: disabled, isInvalid: invalid, isReadOnly: readOnly, isRequired: required, maxValue: max ?? undefined, minValue: min ?? undefined, name: name, onChange: onChange ?? undefined, shouldForceLeadingZeros: forceLeadingZeros, value: value },
|
|
9
|
+
!hideLabel && React__default.createElement(Label, { className: "tds-time-field-label" }, label),
|
|
10
|
+
React__default.createElement(DateInput, { className: "tds-time-field-input" }, (segment) => (React__default.createElement(DateSegment, { className: segment.type === "literal"
|
|
11
|
+
? "tds-time-field-segment-separator"
|
|
12
|
+
: "tds-time-field-segment", segment: segment }))),
|
|
13
|
+
description && (React__default.createElement(Text, { elementType: "p", className: "tds-time-field-description", slot: "description" },
|
|
14
|
+
React__default.createElement(Icon, { "aria-hidden": true, className: "tds-time-field-description-invalid-icon", symbol: "general#exclamation-triangle" }),
|
|
15
|
+
description))));
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
export { TimeField };
|
|
19
|
+
//# sourceMappingURL=TimeField.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"TimeField.js","sources":["../../../src/components/time-field/TimeField.tsx"],"sourcesContent":["import \"./index.css\"\n\nimport type {\n CalendarDateTime,\n Time,\n ZonedDateTime,\n} from \"@internationalized/date\"\nimport Icon from \"@utilities/Icon\"\nimport classNames from \"classnames\"\nimport React, { type AriaAttributes } from \"react\"\nimport {\n DateInput,\n DateSegment,\n Label,\n Text,\n TimeField as AriaTimeField,\n} from \"react-aria-components\"\n\nexport type TimeFieldSize = \"md\" | \"lg\"\n\nexport type TimeFieldValue = CalendarDateTime | Time | ZonedDateTime\n\nexport interface TimeFieldProps {\n /** The default uncontrolled value (e.g. `new Time(9, 30)` or `new CalendarDateTime(2025, 1, 1, 9, 30)`). */\n defaultValue?: TimeFieldValue | null\n /** Helper text displayed below the component. Styled as error text when `invalid` is `true`. */\n description?: string\n /** Disables the field. */\n disabled?: boolean\n /** If `true`, always shows leading zeros in the hour field. */\n forceLeadingZeros?: boolean\n /** If `true`, renders the label visually hidden. */\n hideLabel?: boolean\n /** If `true`, hides the time zone abbreviation for ZonedDateTime values. */\n hideTimeZone?: boolean\n /** Whether to display in 12 or 24 hour format. By default, determined by locale. */\n hourCycle?: 12 | 24\n /** If `true`, applies error styling to the field and description. */\n invalid?: boolean\n /** Accessible label for the field. */\n label: string\n /** The maximum allowed time (e.g. `new Time(17, 0)`). */\n max?: TimeFieldValue\n /** The minimum allowed time (e.g. `new Time(9, 0)`). */\n min?: TimeFieldValue\n /** Field name for form submission. */\n name?: string\n /** Called when the value changes. */\n onChange?: (value: TimeFieldValue | null) => void\n /** Allows the value to be read but not changed. */\n readOnly?: boolean\n /** If `true`, appends an asterisk after the label text. */\n required?: boolean\n /** The size of the time field. */\n size?: TimeFieldSize\n /** The controlled value (e.g. `new Time(9, 30)` or `new CalendarDateTime(2025, 1, 1, 9, 30)`). */\n value?: TimeFieldValue | null\n}\n\nexport type TimeFieldElementProps = TimeFieldProps &\n Omit<AriaAttributes, keyof TimeFieldProps> & {\n className?: string\n id?: string\n }\n\nexport function TimeField({\n className,\n defaultValue,\n description,\n disabled,\n forceLeadingZeros,\n hideLabel,\n hideTimeZone,\n hourCycle,\n invalid,\n label,\n max,\n min,\n name,\n onChange,\n readOnly,\n required,\n size = \"md\",\n value,\n ...restProps\n}: TimeFieldElementProps) {\n const combinedClassName = classNames(\n \"tds-time-field\",\n { \"tds-time-field--lg\": size === \"lg\" },\n className\n )\n\n return (\n <AriaTimeField\n {...restProps}\n aria-label={hideLabel ? label : undefined}\n className={combinedClassName}\n defaultValue={defaultValue}\n granularity=\"minute\"\n hideTimeZone={hideTimeZone}\n hourCycle={hourCycle}\n isDisabled={disabled}\n isInvalid={invalid}\n isReadOnly={readOnly}\n isRequired={required}\n maxValue={max ?? undefined}\n minValue={min ?? undefined}\n name={name}\n onChange={onChange ?? undefined}\n shouldForceLeadingZeros={forceLeadingZeros}\n value={value}\n >\n {!hideLabel && <Label className=\"tds-time-field-label\">{label}</Label>}\n <DateInput className=\"tds-time-field-input\">\n {(segment) => (\n <DateSegment\n className={\n segment.type === \"literal\"\n ? \"tds-time-field-segment-separator\"\n : \"tds-time-field-segment\"\n }\n segment={segment}\n />\n )}\n </DateInput>\n {description && (\n <Text\n elementType=\"p\"\n className=\"tds-time-field-description\"\n slot=\"description\"\n >\n <Icon\n aria-hidden\n className=\"tds-time-field-description-invalid-icon\"\n symbol=\"general#exclamation-triangle\"\n />\n {description}\n </Text>\n )}\n </AriaTimeField>\n )\n}\n"],"names":["React","AriaTimeField"],"mappings":";;;;;AAiEM,SAAU,SAAS,CAAC,EACxB,SAAS,EACT,YAAY,EACZ,WAAW,EACX,QAAQ,EACR,iBAAiB,EACjB,SAAS,EACT,YAAY,EACZ,SAAS,EACT,OAAO,EACP,KAAK,EACL,GAAG,EACH,GAAG,EACH,IAAI,EACJ,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,IAAI,GAAG,IAAI,EACX,KAAK,EACL,GAAG,SAAS,EACU,EAAA;AACtB,IAAA,MAAM,iBAAiB,GAAG,UAAU,CAClC,gBAAgB,EAChB,EAAE,oBAAoB,EAAE,IAAI,KAAK,IAAI,EAAE,EACvC,SAAS,CACV;AAED,IAAA,QACEA,cAAA,CAAA,aAAA,CAACC,WAAa,EAAA,EAAA,GACR,SAAS,gBACD,SAAS,GAAG,KAAK,GAAG,SAAS,EACzC,SAAS,EAAE,iBAAiB,EAC5B,YAAY,EAAE,YAAY,EAC1B,WAAW,EAAC,QAAQ,EACpB,YAAY,EAAE,YAAY,EAC1B,SAAS,EAAE,SAAS,EACpB,UAAU,EAAE,QAAQ,EACpB,SAAS,EAAE,OAAO,EAClB,UAAU,EAAE,QAAQ,EACpB,UAAU,EAAE,QAAQ,EACpB,QAAQ,EAAE,GAAG,IAAI,SAAS,EAC1B,QAAQ,EAAE,GAAG,IAAI,SAAS,EAC1B,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,IAAI,SAAS,EAC/B,uBAAuB,EAAE,iBAAiB,EAC1C,KAAK,EAAE,KAAK,EAAA;QAEX,CAAC,SAAS,IAAID,cAAA,CAAA,aAAA,CAAC,KAAK,EAAA,EAAC,SAAS,EAAC,sBAAsB,EAAA,EAAE,KAAK,CAAS;QACtEA,cAAA,CAAA,aAAA,CAAC,SAAS,IAAC,SAAS,EAAC,sBAAsB,EAAA,EACxC,CAAC,OAAO,MACPA,cAAA,CAAA,aAAA,CAAC,WAAW,EAAA,EACV,SAAS,EACP,OAAO,CAAC,IAAI,KAAK;AACf,kBAAE;kBACA,wBAAwB,EAE9B,OAAO,EAAE,OAAO,EAAA,CAChB,CACH,CACS;AACX,QAAA,WAAW,KACVA,cAAA,CAAA,aAAA,CAAC,IAAI,IACH,WAAW,EAAC,GAAG,EACf,SAAS,EAAC,4BAA4B,EACtC,IAAI,EAAC,aAAa,EAAA;YAElBA,cAAA,CAAA,aAAA,CAAC,IAAI,yBAEH,SAAS,EAAC,yCAAyC,EACnD,MAAM,EAAC,8BAA8B,EAAA,CACrC;AACD,YAAA,WAAW,CACP,CACR,CACa;AAEpB;;;;"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/time-field/index.ts"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAA;AAEpB,YAAY,EACV,qBAAqB,EACrB,cAAc,EACd,aAAa,GACd,MAAM,aAAa,CAAA;AACpB,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA"}
|