npm - @skbkontur/react-ui - Versions diffs - 6.0.6 → 6.0.7-b5d2c.0 - Mend

@skbkontur/react-ui 6.0.6 → 6.0.7-b5d2c.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.

Files changed (152) hide show

package/components/Switcher/Switcher.d.ts CHANGED Viewed

@@ -12,19 +12,19 @@ export declare const SwitcherDataTids: {
 export interface SwitcherProps extends Pick<HTMLAttributes<unknown>, 'role'>, CommonProps {
     /** Задает список элементов в свитчере. Это массив строк или объектов типа `{ label: string, value: string, buttonProps?: Partial<ButtonProps> }` */
     items: SwitcherItems[];
-    /** Устанавливает значение свитчера. */
+    /** Значение свитчера. */
     value?: string;
-    /** Задает функцию, которая вызывается при изменении значения свитчера (value). */
+    /** Событие изменения значения свитчера (value). */
     onValueChange?: (value: string) => void;
-    /** Задает подпись около свитчера. */
+    /** Подпись около свитчера. */
     caption?: string;
-    /** Переводит контрол в состояние валидации "ошибка". */
+    /** Переводит свитчер в состояние ошибки. */
     error?: boolean;
-    /** Задает размер контрола. */
+    /** Размер свитчера. */
     size?: SizeProp;
-    /** Задает ширину контрола. С этим пропом элементы внутри автоматически равномерно растянутся. */
+    /** Ширина свитчера. С этим пропом элементы внутри автоматически равномерно растянутся. */
     width?: React.CSSProperties['width'];
-    /** Делает компонент недоступным. */
+    /** Блокирует свитчер. */
     disabled?: boolean;
     /** Задает функцию отрисовки элемента. Параметр `renderDefault` - это встроенная дефолтная функция отрисовки элемента, которую можно вызывать в `renderItem`. */
     renderItem?: (label: string, value: string, buttonProps: ButtonProps, renderDefault: () => React.ReactNode, ariaLabel?: string) => React.ReactNode;
@@ -40,9 +40,7 @@ interface SwitcherItem {
     buttonProps?: Partial<ButtonProps>;
 }
 /**
- * Переключатель `Switcher` — это замена RadioGroup.
- *
- * Не используйте переключатель в качестве навигации, для этого лучше подходят Tabs.
+ * Переключатель — это замена группе радиокнопок. Переключатель меньше по высоте, это позволяет делать формы компактнее.
  */
 export declare class Switcher extends React.Component<SwitcherProps, SwitcherState> {
     static __KONTUR_REACT_UI__: string;

package/components/Switcher/Switcher.js CHANGED Viewed

@@ -54,9 +54,7 @@ export var SwitcherDataTids = {
     root: 'Switcher__root',
 };
 /**
- * Переключатель `Switcher` — это замена RadioGroup.
- *
- * Не используйте переключатель в качестве навигации, для этого лучше подходят Tabs.
+ * Переключатель — это замена группе радиокнопок. Переключатель меньше по высоте, это позволяет делать формы компактнее.
  */
 var Switcher = /** @class */ (function (_super) {
     __extends(Switcher, _super);

package/components/Switcher/Switcher.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Switcher.js","sourceRoot":"","sources":["../../../components/Switcher/Switcher.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\nimport type { HTMLAttributes } from 'react';\nimport React from 'react';\n\nimport type { CommonProps } from '../../internal/CommonWrapper/index.js';\nimport { CommonWrapper } from '../../internal/CommonWrapper/index.js';\nimport { isKeyArrowHorizontal, isKeyArrowLeft, isKeyEnter } from '../../lib/events/keyboard/identifiers.js';\nimport { withRenderEnvironment } from '../../lib/renderEnvironment/index.js';\nimport type { TGetRootNode, TSetRootNode } from '../../lib/rootNode/index.js';\nimport { rootNode } from '../../lib/rootNode/index.js';\nimport type { Theme } from '../../lib/theming/Theme.js';\nimport { ThemeContext } from '../../lib/theming/ThemeContext.js';\nimport type { SizeProp } from '../../lib/types/props.js';\nimport type { Nullable } from '../../typings/utility-types.js';\nimport { Button } from '../Button/index.js';\nimport type { ButtonProps } from '../Button/index.js';\nimport { Group, getButtonCorners } from '../Group/index.js';\nimport { mod } from './helpers.js';\nimport { getStyles } from './Switcher.styles.js';\nimport { getSwitcherTheme } from './switcherTheme.js';\n\nexport type SwitcherItems = string \| SwitcherItem;\n\nexport const SwitcherDataTids = {\n root: 'Switcher__root',\n} as const;\n\nexport interface SwitcherProps extends Pick<HTMLAttributes<unknown>, 'role'>, CommonProps {\n /** Задает список элементов в свитчере. Это массив строк или объектов типа `{ label: string, value: string, buttonProps?: Partial<ButtonProps> }` /\n items: SwitcherItems[];\n\n /* Устанавливает значение свитчера. /\n value?: string;\n\n /* Задает функцию, которая вызывается при изменении значения свитчера (value). /\n onValueChange?: (value: string) => void;\n\n /* Задает подпись около свитчера. /\n caption?: string;\n\n /* Переводит контрол в состояние валидации \"ошибка\". /\n error?: boolean;\n\n /* Задает размер контрола. /\n size?: SizeProp;\n\n /* Задает ширину контрола. С этим пропом элементы внутри автоматически равномерно растянутся. /\n width?: React.CSSProperties['width'];\n\n /* Делает компонент недоступным. /\n disabled?: boolean;\n\n /* Задает функцию отрисовки элемента. Параметр `renderDefault` - это встроенная дефолтная функция отрисовки элемента, которую можно вызывать в `renderItem`. /\n renderItem?: (\n label: string,\n value: string,\n buttonProps: ButtonProps,\n renderDefault: () => React.ReactNode,\n ariaLabel?: string,\n ) => React.ReactNode;\n}\n\ntype DefaultProps = Required<Pick<SwitcherProps, 'role'>>;\n\nexport interface SwitcherState {\n focusedIndex: Nullable<number>;\n}\n\ninterface SwitcherItem {\n value: string;\n label: string;\n 'aria-label'?: string;\n buttonProps?: Partial<ButtonProps>;\n}\n\n/\n Переключатель `Switcher` — это замена RadioGroup.\n \n Не используйте переключатель в качестве навигации, для этого лучше подходят Tabs.\n */\n@withRenderEnvironment\n@rootNode\nexport class Switcher extends React.Component<SwitcherProps, SwitcherState> {\n public static __KONTUR_REACT_UI__ = 'Switcher';\n public static displayName = 'Switcher';\n\n public static defaultProps: DefaultProps = {\n role: 'switch',\n };\n\n public state: SwitcherState = {\n focusedIndex: null,\n };\n\n private emotion!: Emotion;\n private cx!: Emotion['cx'];\n private styles!: ReturnType<typeof getStyles>;\n private theme!: Theme;\n public getRootNode!: TGetRootNode;\n private setRootNode!: TSetRootNode;\n\n public render(): React.JSX.Element {\n this.styles = getStyles(this.emotion);\n\n return (\n <ThemeContext.Consumer>\n {(theme) => {\n this.theme = getSwitcherTheme(theme);\n return <ThemeContext.Provider value={this.theme}>{this.renderMain()}</ThemeContext.Provider>;\n }}\n </ThemeContext.Consumer>\n );\n }\n\n private renderMain() {\n const inputProps = {\n type: 'checkbox',\n onKeyDown: this.handleKey,\n onFocus: this._handleFocus,\n onBlur: this._handleBlur,\n className: this.styles.input(),\n };\n const items = <Group width={'100%'}>{this._renderItems()}</Group>;\n\n const captionClassName = this.cx(this.styles.caption(this.theme), this.getLabelSizeClassName());\n const wrapperClassName = this.cx(this.styles.wrap(), {\n [this.styles.error(this.theme)]: this.props.error,\n [this.styles.wrapCustomWidth()]: this.props.width !== undefined,\n });\n\n return (\n <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n <div data-tid={SwitcherDataTids.root} className={this.styles.root()} style={{ width: this.props.width }}>\n {this.props.caption ? <div className={captionClassName}>{this.props.caption}</div> : null}\n <div className={wrapperClassName}>\n <input {...inputProps} />\n {items}\n </div>\n </div>\n </CommonWrapper>\n );\n }\n\n private selectItem = (value: string) => {\n if (this.props.onValueChange) {\n this.props.onValueChange(value);\n }\n };\n\n private _extractPropsFromItem = (item: string \| SwitcherItem): SwitcherItem => {\n return typeof item === 'object' ? item : { label: item, value: item };\n };\n\n private _extractValuesFromItems = (): string[] => {\n return this.props.items.map((item) => {\n const { value } = this._extractPropsFromItem(item);\n return value;\n });\n };\n\n private _focus = (index: number) => {\n this.setState({ focusedIndex: index });\n };\n\n private handleKey = (e: React.KeyboardEvent<HTMLInputElement>) => {\n const focusedIndex = this.state.focusedIndex;\n if (typeof focusedIndex !== 'number') {\n return;\n }\n\n if (isKeyEnter(e)) {\n if (this.props.onValueChange) {\n const { value, buttonProps } = this._extractPropsFromItem(this.props.items[focusedIndex]);\n if (!buttonProps?.disabled) {\n this.selectItem(value);\n }\n }\n return;\n }\n\n if (isKeyArrowHorizontal(e)) {\n e.preventDefault();\n this.move(isKeyArrowLeft(e));\n }\n };\n\n private move = (left: boolean) => {\n const selectedIndex = this.state.focusedIndex;\n\n if (typeof selectedIndex !== 'number') {\n return;\n }\n const newFocusedIndex = this._getNextFocusedIndex(left, selectedIndex);\n this._focus(newFocusedIndex);\n };\n\n private _getNextFocusedIndex = (left: boolean, focusedIndex: number): number => {\n const { items, disabled } = this.props;\n if (disabled) {\n return focusedIndex;\n }\n\n for (let i = 1; i < items.length; i++) {\n const index = mod(focusedIndex + (left ? -i : i), items.length);\n const { buttonProps } = this._extractPropsFromItem(items[index]);\n if (!buttonProps?.disabled) {\n return index;\n }\n }\n return focusedIndex;\n };\n\n private _handleFocus = () => {\n const { value } = this.props;\n\n const items = this._extractValuesFromItems();\n const currentIndex = [...items].indexOf(value as string);\n const index = currentIndex > -1 ? currentIndex : 0;\n\n this.setState({ focusedIndex: index });\n };\n\n private _handleBlur = () => {\n this.setState({ focusedIndex: null });\n };\n\n private _renderItems = () => {\n const { items, value, size, width, disabled, role, renderItem } = this.props;\n\n return items.map((item, i) => {\n const {\n 'aria-label': ariaLabel,\n label,\n value: itemValue,\n buttonProps: customButtonProps,\n } = this._extractPropsFromItem(item);\n\n const isChecked = value === itemValue;\n const commonButtonProps = {\n 'aria-checked': isChecked,\n role,\n checked: isChecked,\n visuallyFocused: this.state.focusedIndex === i,\n onClick: () => {\n this.selectItem(itemValue);\n },\n disableFocus: true,\n size,\n disabled,\n corners: getButtonCorners(i === 0, i === items.length - 1),\n };\n\n const buttonProps = {\n ...commonButtonProps,\n ...customButtonProps,\n };\n\n if (!buttonProps.width && width) {\n buttonProps.width = '100%';\n }\n\n const renderDefault = () => this.renderDefaultItem(label, itemValue, buttonProps, ariaLabel);\n return renderItem ? renderItem(label, itemValue, buttonProps, renderDefault, ariaLabel) : renderDefault();\n });\n };\n\n private renderDefaultItem = (label: string, value: string, buttonProps: ButtonProps, ariaLabel?: string) => (\n <Button aria-label={ariaLabel} key={value} {...buttonProps}>\n {label}\n </Button>\n );\n\n private getLabelSizeClassName = (): string => {\n switch (this.props.size) {\n case 'large':\n return this.styles.captionLarge(this.theme);\n case 'medium':\n return this.styles.captionMedium(this.theme);\n case 'small':\n default:\n return this.styles.captionSmall(this.theme);\n }\n };\n}\n"]}
1	+ {"version":3,"file":"Switcher.js","sourceRoot":"","sources":["../../../components/Switcher/Switcher.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\nimport type { HTMLAttributes } from 'react';\nimport React from 'react';\n\nimport type { CommonProps } from '../../internal/CommonWrapper/index.js';\nimport { CommonWrapper } from '../../internal/CommonWrapper/index.js';\nimport { isKeyArrowHorizontal, isKeyArrowLeft, isKeyEnter } from '../../lib/events/keyboard/identifiers.js';\nimport { withRenderEnvironment } from '../../lib/renderEnvironment/index.js';\nimport type { TGetRootNode, TSetRootNode } from '../../lib/rootNode/index.js';\nimport { rootNode } from '../../lib/rootNode/index.js';\nimport type { Theme } from '../../lib/theming/Theme.js';\nimport { ThemeContext } from '../../lib/theming/ThemeContext.js';\nimport type { SizeProp } from '../../lib/types/props.js';\nimport type { Nullable } from '../../typings/utility-types.js';\nimport { Button } from '../Button/index.js';\nimport type { ButtonProps } from '../Button/index.js';\nimport { Group, getButtonCorners } from '../Group/index.js';\nimport { mod } from './helpers.js';\nimport { getStyles } from './Switcher.styles.js';\nimport { getSwitcherTheme } from './switcherTheme.js';\n\nexport type SwitcherItems = string \| SwitcherItem;\n\nexport const SwitcherDataTids = {\n root: 'Switcher__root',\n} as const;\n\nexport interface SwitcherProps extends Pick<HTMLAttributes<unknown>, 'role'>, CommonProps {\n /** Задает список элементов в свитчере. Это массив строк или объектов типа `{ label: string, value: string, buttonProps?: Partial<ButtonProps> }` /\n items: SwitcherItems[];\n\n /* Значение свитчера. /\n value?: string;\n\n /* Событие изменения значения свитчера (value). /\n onValueChange?: (value: string) => void;\n\n /* Подпись около свитчера. /\n caption?: string;\n\n /* Переводит свитчер в состояние ошибки. /\n error?: boolean;\n\n /* Размер свитчера. /\n size?: SizeProp;\n\n /* Ширина свитчера. С этим пропом элементы внутри автоматически равномерно растянутся. /\n width?: React.CSSProperties['width'];\n\n /* Блокирует свитчер. /\n disabled?: boolean;\n\n /* Задает функцию отрисовки элемента. Параметр `renderDefault` - это встроенная дефолтная функция отрисовки элемента, которую можно вызывать в `renderItem`. /\n renderItem?: (\n label: string,\n value: string,\n buttonProps: ButtonProps,\n renderDefault: () => React.ReactNode,\n ariaLabel?: string,\n ) => React.ReactNode;\n}\n\ntype DefaultProps = Required<Pick<SwitcherProps, 'role'>>;\n\nexport interface SwitcherState {\n focusedIndex: Nullable<number>;\n}\n\ninterface SwitcherItem {\n value: string;\n label: string;\n 'aria-label'?: string;\n buttonProps?: Partial<ButtonProps>;\n}\n\n/\n Переключатель — это замена группе радиокнопок. Переключатель меньше по высоте, это позволяет делать формы компактнее.\n */\n@withRenderEnvironment\n@rootNode\nexport class Switcher extends React.Component<SwitcherProps, SwitcherState> {\n public static __KONTUR_REACT_UI__ = 'Switcher';\n public static displayName = 'Switcher';\n\n public static defaultProps: DefaultProps = {\n role: 'switch',\n };\n\n public state: SwitcherState = {\n focusedIndex: null,\n };\n\n private emotion!: Emotion;\n private cx!: Emotion['cx'];\n private styles!: ReturnType<typeof getStyles>;\n private theme!: Theme;\n public getRootNode!: TGetRootNode;\n private setRootNode!: TSetRootNode;\n\n public render(): React.JSX.Element {\n this.styles = getStyles(this.emotion);\n\n return (\n <ThemeContext.Consumer>\n {(theme) => {\n this.theme = getSwitcherTheme(theme);\n return <ThemeContext.Provider value={this.theme}>{this.renderMain()}</ThemeContext.Provider>;\n }}\n </ThemeContext.Consumer>\n );\n }\n\n private renderMain() {\n const inputProps = {\n type: 'checkbox',\n onKeyDown: this.handleKey,\n onFocus: this._handleFocus,\n onBlur: this._handleBlur,\n className: this.styles.input(),\n };\n const items = <Group width={'100%'}>{this._renderItems()}</Group>;\n\n const captionClassName = this.cx(this.styles.caption(this.theme), this.getLabelSizeClassName());\n const wrapperClassName = this.cx(this.styles.wrap(), {\n [this.styles.error(this.theme)]: this.props.error,\n [this.styles.wrapCustomWidth()]: this.props.width !== undefined,\n });\n\n return (\n <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n <div data-tid={SwitcherDataTids.root} className={this.styles.root()} style={{ width: this.props.width }}>\n {this.props.caption ? <div className={captionClassName}>{this.props.caption}</div> : null}\n <div className={wrapperClassName}>\n <input {...inputProps} />\n {items}\n </div>\n </div>\n </CommonWrapper>\n );\n }\n\n private selectItem = (value: string) => {\n if (this.props.onValueChange) {\n this.props.onValueChange(value);\n }\n };\n\n private _extractPropsFromItem = (item: string \| SwitcherItem): SwitcherItem => {\n return typeof item === 'object' ? item : { label: item, value: item };\n };\n\n private _extractValuesFromItems = (): string[] => {\n return this.props.items.map((item) => {\n const { value } = this._extractPropsFromItem(item);\n return value;\n });\n };\n\n private _focus = (index: number) => {\n this.setState({ focusedIndex: index });\n };\n\n private handleKey = (e: React.KeyboardEvent<HTMLInputElement>) => {\n const focusedIndex = this.state.focusedIndex;\n if (typeof focusedIndex !== 'number') {\n return;\n }\n\n if (isKeyEnter(e)) {\n if (this.props.onValueChange) {\n const { value, buttonProps } = this._extractPropsFromItem(this.props.items[focusedIndex]);\n if (!buttonProps?.disabled) {\n this.selectItem(value);\n }\n }\n return;\n }\n\n if (isKeyArrowHorizontal(e)) {\n e.preventDefault();\n this.move(isKeyArrowLeft(e));\n }\n };\n\n private move = (left: boolean) => {\n const selectedIndex = this.state.focusedIndex;\n\n if (typeof selectedIndex !== 'number') {\n return;\n }\n const newFocusedIndex = this._getNextFocusedIndex(left, selectedIndex);\n this._focus(newFocusedIndex);\n };\n\n private _getNextFocusedIndex = (left: boolean, focusedIndex: number): number => {\n const { items, disabled } = this.props;\n if (disabled) {\n return focusedIndex;\n }\n\n for (let i = 1; i < items.length; i++) {\n const index = mod(focusedIndex + (left ? -i : i), items.length);\n const { buttonProps } = this._extractPropsFromItem(items[index]);\n if (!buttonProps?.disabled) {\n return index;\n }\n }\n return focusedIndex;\n };\n\n private _handleFocus = () => {\n const { value } = this.props;\n\n const items = this._extractValuesFromItems();\n const currentIndex = [...items].indexOf(value as string);\n const index = currentIndex > -1 ? currentIndex : 0;\n\n this.setState({ focusedIndex: index });\n };\n\n private _handleBlur = () => {\n this.setState({ focusedIndex: null });\n };\n\n private _renderItems = () => {\n const { items, value, size, width, disabled, role, renderItem } = this.props;\n\n return items.map((item, i) => {\n const {\n 'aria-label': ariaLabel,\n label,\n value: itemValue,\n buttonProps: customButtonProps,\n } = this._extractPropsFromItem(item);\n\n const isChecked = value === itemValue;\n const commonButtonProps = {\n 'aria-checked': isChecked,\n role,\n checked: isChecked,\n visuallyFocused: this.state.focusedIndex === i,\n onClick: () => {\n this.selectItem(itemValue);\n },\n disableFocus: true,\n size,\n disabled,\n corners: getButtonCorners(i === 0, i === items.length - 1),\n };\n\n const buttonProps = {\n ...commonButtonProps,\n ...customButtonProps,\n };\n\n if (!buttonProps.width && width) {\n buttonProps.width = '100%';\n }\n\n const renderDefault = () => this.renderDefaultItem(label, itemValue, buttonProps, ariaLabel);\n return renderItem ? renderItem(label, itemValue, buttonProps, renderDefault, ariaLabel) : renderDefault();\n });\n };\n\n private renderDefaultItem = (label: string, value: string, buttonProps: ButtonProps, ariaLabel?: string) => (\n <Button aria-label={ariaLabel} key={value} {...buttonProps}>\n {label}\n </Button>\n );\n\n private getLabelSizeClassName = (): string => {\n switch (this.props.size) {\n case 'large':\n return this.styles.captionLarge(this.theme);\n case 'medium':\n return this.styles.captionMedium(this.theme);\n case 'small':\n default:\n return this.styles.captionSmall(this.theme);\n }\n };\n}\n"]}

package/components/Tabs/Indicator.styles.d.ts CHANGED Viewed

@@ -5,5 +5,4 @@ export declare const getStyles: import("../../lib/theming/Emotion.js").StylesGet
     success(t: Theme): string;
     warning(t: Theme): string;
     error(t: Theme): string;
-    customizationExample(): string;
 }>;

package/components/Tabs/Indicator.styles.js CHANGED Viewed

@@ -21,10 +21,7 @@ export var getStyles = memoizeGetStyles(function (_a) {
         error: function (t) {
             return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n      background: ", ";\n    "], ["\n      background: ", ";\n    "])), t.tabColorError);
         },
-        customizationExample: function () {
-            return css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n      height: 5px;\n      background-color: orange;\n    "], ["\n      height: 5px;\n      background-color: orange;\n    "])));
-        },
     });
 });
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
 //# sourceMappingURL=Indicator.styles.js.map

package/components/Tabs/Indicator.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Indicator.styles.js","sourceRoot":"","sources":["../../../components/Tabs/Indicator.styles.ts"],"names":[],"mappings":";;;;AAEA,OAAO,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAGhE,MAAM,CAAC,IAAM,SAAS,GAAG,gBAAgB,CAAC,UAAC,EAAgB;QAAd,GAAG,SAAA;IAAgB,OAAA,CAAC;QAC/D,IAAI,YAAC,CAAQ;YACX,OAAO,GAAG,sNAAA,sBACM,EAAe,mBACnB,EAAgB,2FAGT,EAA0B,SAC5C,KALe,CAAC,CAAC,aAAa,EACnB,CAAC,CAAC,cAAc,EAGT,CAAC,CAAC,wBAAwB,EAC3C;QACJ,CAAC;QAED,OAAO,YAAC,CAAQ;YACd,OAAO,GAAG,oGAAA,sBACM,EAAiB,SAChC,KADe,CAAC,CAAC,eAAe,EAC/B;QACJ,CAAC;QAED,OAAO,YAAC,CAAQ;YACd,OAAO,GAAG,oGAAA,sBACM,EAAiB,SAChC,KADe,CAAC,CAAC,eAAe,EAC/B;QACJ,CAAC;QAED,OAAO,YAAC,CAAQ;YACd,OAAO,GAAG,oGAAA,sBACM,EAAiB,SAChC,KADe,CAAC,CAAC,eAAe,EAC/B;QACJ,CAAC;QAED,KAAK,YAAC,CAAQ;YACZ,OAAO,GAAG,oGAAA,sBACM,EAAe,SAC9B,KADe,CAAC,CAAC,aAAa,EAC7B;QACJ,CAAC;~~QAED,oBAAoB;YAClB,OAAO,GAAG,gIAAA,6DAGT,KAAC;QACJ,CAAC;~~KACF,CAAC;~~AAzC8D~~,~~CAyC9D~~,CAAC,CAAC","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\n\nimport { memoizeGetStyles } from '../../lib/theming/Emotion.js';\nimport type { Theme } from '../../lib/theming/Theme.js';\n\nexport const getStyles = memoizeGetStyles(({ css }: Emotion) => ({\n root(t: Theme) {\n return css`\n background: ${t.tabColorFocus};\n height: ${t.tabBorderWidth};\n position: absolute;\n transition: all 0.2s ease-out;\n border-radius: ${t.tabIndicatorBorderRadius};\n `;\n },\n\n primary(t: Theme) {\n return css`\n background: ${t.tabColorPrimary};\n `;\n },\n\n success(t: Theme) {\n return css`\n background: ${t.tabColorSuccess};\n `;\n },\n\n warning(t: Theme) {\n return css`\n background: ${t.tabColorWarning};\n `;\n },\n\n error(t: Theme) {\n return css`\n background: ${t.tabColorError};\n `;\n },\n~~\n customizationExample() {\n return css`\n height: 5px;\n background-color: orange;\n `;\n~~ }~~,\n}~~));\n"]}
1	+ {"version":3,"file":"Indicator.styles.js","sourceRoot":"","sources":["../../../components/Tabs/Indicator.styles.ts"],"names":[],"mappings":";;;;AAEA,OAAO,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAGhE,MAAM,CAAC,IAAM,SAAS,GAAG,gBAAgB,CAAC,UAAC,EAAgB;QAAd,GAAG,SAAA;IAAgB,OAAA,CAAC;QAC/D,IAAI,YAAC,CAAQ;YACX,OAAO,GAAG,sNAAA,sBACM,EAAe,mBACnB,EAAgB,2FAGT,EAA0B,SAC5C,KALe,CAAC,CAAC,aAAa,EACnB,CAAC,CAAC,cAAc,EAGT,CAAC,CAAC,wBAAwB,EAC3C;QACJ,CAAC;QAED,OAAO,YAAC,CAAQ;YACd,OAAO,GAAG,oGAAA,sBACM,EAAiB,SAChC,KADe,CAAC,CAAC,eAAe,EAC/B;QACJ,CAAC;QAED,OAAO,YAAC,CAAQ;YACd,OAAO,GAAG,oGAAA,sBACM,EAAiB,SAChC,KADe,CAAC,CAAC,eAAe,EAC/B;QACJ,CAAC;QAED,OAAO,YAAC,CAAQ;YACd,OAAO,GAAG,oGAAA,sBACM,EAAiB,SAChC,KADe,CAAC,CAAC,eAAe,EAC/B;QACJ,CAAC;QAED,KAAK,YAAC,CAAQ;YACZ,OAAO,GAAG,oGAAA,sBACM,EAAe,SAC9B,KADe,CAAC,CAAC,aAAa,EAC7B;QACJ,CAAC;KACF,CAAC;AAlC8D,CAkC9D,CAAC,CAAC","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\n\nimport { memoizeGetStyles } from '../../lib/theming/Emotion.js';\nimport type { Theme } from '../../lib/theming/Theme.js';\n\nexport const getStyles = memoizeGetStyles(({ css }: Emotion) => ({\n root(t: Theme) {\n return css`\n background: ${t.tabColorFocus};\n height: ${t.tabBorderWidth};\n position: absolute;\n transition: all 0.2s ease-out;\n border-radius: ${t.tabIndicatorBorderRadius};\n `;\n },\n\n primary(t: Theme) {\n return css`\n background: ${t.tabColorPrimary};\n `;\n },\n\n success(t: Theme) {\n return css`\n background: ${t.tabColorSuccess};\n `;\n },\n\n warning(t: Theme) {\n return css`\n background: ${t.tabColorWarning};\n `;\n },\n\n error(t: Theme) {\n return css`\n background: ${t.tabColorError};\n `;\n },\n}));\n"]}

package/components/TimePicker/TimeClockIcon.d.ts ADDED Viewed

@@ -0,0 +1,3 @@
+export declare const TimeClockIcon: import("../../lib/forwardRefAndName.js").ReactUIIconWithRef<SVGSVGElement, Omit<import("../../internal/icons2022/BaseIcon.js").IconProps, "size"> & {
+    size?: import("../../internal/icons2022/BaseIcon.js").IconProps["size"] | import("../../internal/icons2022/iconConstants.js").IconSizeAliases;
+}>;

package/components/TimePicker/TimeClockIcon.js ADDED Viewed

@@ -0,0 +1,11 @@
+import React from 'react';
+import { iconSizer } from '../../internal/icons2022/iconSizer.js';
+import { TimeClockIcon16Light } from '../../internal/icons2022/TimeClockIcon/TimeClockIcon16Light.js';
+import { TimeClockIcon20Light } from '../../internal/icons2022/TimeClockIcon/TimeClockIcon20Light.js';
+import { TimeClockIcon24Regular } from '../../internal/icons2022/TimeClockIcon/TimeClockIcon24Regular.js';
+export var TimeClockIcon = iconSizer({
+    small: function () { return React.createElement(TimeClockIcon16Light, null); },
+    medium: function () { return React.createElement(TimeClockIcon20Light, null); },
+    large: function () { return React.createElement(TimeClockIcon24Regular, null); },
+}, 'TimeClockIcon');
+//# sourceMappingURL=TimeClockIcon.js.map

package/components/TimePicker/TimeClockIcon.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"TimeClockIcon.js","sourceRoot":"","sources":["../../../components/TimePicker/TimeClockIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,SAAS,EAAE,MAAM,uCAAuC,CAAC;AAClE,OAAO,EAAE,oBAAoB,EAAE,MAAM,gEAAgE,CAAC;AACtG,OAAO,EAAE,oBAAoB,EAAE,MAAM,gEAAgE,CAAC;AACtG,OAAO,EAAE,sBAAsB,EAAE,MAAM,kEAAkE,CAAC;AAE1G,MAAM,CAAC,IAAM,aAAa,GAAG,SAAS,CACpC;IACE,KAAK,EAAE,cAAM,OAAA,oBAAC,oBAAoB,OAAG,EAAxB,CAAwB;IACrC,MAAM,EAAE,cAAM,OAAA,oBAAC,oBAAoB,OAAG,EAAxB,CAAwB;IACtC,KAAK,EAAE,cAAM,OAAA,oBAAC,sBAAsB,OAAG,EAA1B,CAA0B;CACxC,EACD,eAAe,CAChB,CAAC","sourcesContent":["import React from 'react';\n\nimport { iconSizer } from '../../internal/icons2022/iconSizer.js';\nimport { TimeClockIcon16Light } from '../../internal/icons2022/TimeClockIcon/TimeClockIcon16Light.js';\nimport { TimeClockIcon20Light } from '../../internal/icons2022/TimeClockIcon/TimeClockIcon20Light.js';\nimport { TimeClockIcon24Regular } from '../../internal/icons2022/TimeClockIcon/TimeClockIcon24Regular.js';\n\nexport const TimeClockIcon = iconSizer(\n {\n small: () => <TimeClockIcon16Light />,\n medium: () => <TimeClockIcon20Light />,\n large: () => <TimeClockIcon24Regular />,\n },\n 'TimeClockIcon',\n);\n"]}

package/components/TimePicker/TimeFragmentsView.d.ts ADDED Viewed

@@ -0,0 +1,15 @@
+import React from 'react';
+import type { SizeProp } from '../../lib/types/props.js';
+import type { TimePrecision, TimeSegment } from './helpers/TimePicker.shared.js';
+export interface TimeFragmentsViewRef {
+    isFragment(el: HTMLElement | EventTarget | null): boolean;
+    getSegment(el: HTMLElement | EventTarget | null): TimeSegment | null;
+    getRootNode(): HTMLSpanElement | null;
+}
+export interface TimeFragmentsViewProps {
+    value: string;
+    precision: TimePrecision;
+    size: SizeProp;
+    onSelectSegment?(segment: TimeSegment, event: React.MouseEvent<HTMLSpanElement>): void;
+}
+export declare const TimeFragmentsView: import("../../lib/forwardRefAndName.js").ReactUIComponentWithRef<TimeFragmentsViewRef, TimeFragmentsViewProps> & Record<never, never>;

package/components/TimePicker/TimeFragmentsView.js ADDED Viewed

@@ -0,0 +1,72 @@
+import React, { useCallback, useContext, useImperativeHandle, useRef } from 'react';
+import { forwardRefAndName } from '../../lib/forwardRefAndName.js';
+import { useEmotion, useStyles } from '../../lib/renderEnvironment/index.js';
+import { ThemeContext } from '../../lib/theming/ThemeContext.js';
+import { TIME_PLACEHOLDER_CHAR, TIME_SEPARATOR } from './helpers/TimePicker.constants.js';
+import { getDisplaySegments, getTimeSegments } from './helpers/TimePicker.shared.js';
+import { getStyles } from './TimeFragmentsView.styles.js';
+var getSeparatorSizeClassName = function (styles, size) {
+    switch (size) {
+        case 'large':
+            return styles.separatorLarge();
+        case 'medium':
+            return styles.separatorMedium();
+        case 'small':
+        default:
+            return styles.separatorSmall();
+    }
+};
+export var TimeFragmentsView = forwardRefAndName('TimeFragmentsView', function (props, ref) {
+    var value = props.value, precision = props.precision, size = props.size, onSelectSegment = props.onSelectSegment;
+    var theme = useContext(ThemeContext);
+    var cx = useEmotion().cx;
+    var styles = useStyles(getStyles);
+    var rootRef = useRef(null);
+    var rootClassName = cx(styles.root(), styles.selected(theme));
+    var maskClassName = styles.mask(theme);
+    var separatorSizeClassName = getSeparatorSizeClassName(styles, size);
+    var getSegment = useCallback(function (el) {
+        var _a;
+        var rootNode = rootRef.current;
+        if (!rootNode || !el) {
+            return null;
+        }
+        var fragments = Array.from(rootNode.querySelectorAll('[data-fragment]'));
+        var segments = getTimeSegments(precision);
+        var index = fragments.findIndex(function (fragment) { return fragment === el || fragment.contains(el); });
+        return index >= 0 ? ((_a = segments[index]) !== null && _a !== void 0 ? _a : null) : null;
+    }, [precision]);
+    var isFragment = useCallback(function (el) {
+        return getSegment(el) !== null;
+    }, [getSegment]);
+    useImperativeHandle(ref, function () { return ({
+        isFragment: isFragment,
+        getSegment: getSegment,
+        getRootNode: function () { return rootRef.current; },
+    }); }, [getSegment, isFragment]);
+    var segments = getTimeSegments(precision);
+    var displaySegments = getDisplaySegments(value, precision);
+    return (React.createElement("span", { ref: rootRef, className: rootClassName }, value
+        ? segments.flatMap(function (segment, index) {
+            var _a;
+            var _b;
+            var segmentValue = (_b = displaySegments[index]) !== null && _b !== void 0 ? _b : '';
+            var valueMask = Array.from(segmentValue)
+                .filter(function (char) { return char !== TIME_PLACEHOLDER_CHAR; })
+                .join('');
+            var placeholderLength = segmentValue.length - valueMask.length;
+            var nodes = [
+                React.createElement("span", { key: segment, "data-fragment": "", className: styles.segment(), onMouseUp: function (event) { return onSelectSegment === null || onSelectSegment === void 0 ? void 0 : onSelectSegment(segment, event); } },
+                    valueMask,
+                    React.createElement("span", { className: maskClassName }, Array(placeholderLength).fill(TIME_PLACEHOLDER_CHAR).join(''))),
+            ];
+            if (index < segments.length - 1) {
+                nodes.push(React.createElement("span", { key: "separator-".concat(index), className: cx(maskClassName, styles.separator(), separatorSizeClassName, (_a = {},
+                        _a[styles.separatorFilled()] = !segmentValue.includes(TIME_PLACEHOLDER_CHAR),
+                        _a)) }, TIME_SEPARATOR));
+            }
+            return nodes;
+        })
+        : null));
+});
+//# sourceMappingURL=TimeFragmentsView.js.map

package/components/TimePicker/TimeFragmentsView.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"TimeFragmentsView.js","sourceRoot":"","sources":["../../../components/TimePicker/TimeFragmentsView.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useCallback, useContext, useImperativeHandle, useRef } from 'react';\n\nimport { forwardRefAndName } from '../../lib/forwardRefAndName.js';\nimport { useEmotion, useStyles } from '../../lib/renderEnvironment/index.js';\nimport { ThemeContext } from '../../lib/theming/ThemeContext.js';\nimport type { SizeProp } from '../../lib/types/props.js';\nimport { TIME_PLACEHOLDER_CHAR, TIME_SEPARATOR } from './helpers/TimePicker.constants.js';\nimport type { TimePrecision, TimeSegment } from './helpers/TimePicker.shared.js';\nimport { getDisplaySegments, getTimeSegments } from './helpers/TimePicker.shared.js';\nimport { getStyles } from './TimeFragmentsView.styles.js';\n\nexport interface TimeFragmentsViewRef {\n isFragment(el: HTMLElement | EventTarget | null): boolean;\n getSegment(el: HTMLElement | EventTarget | null): TimeSegment | null;\n getRootNode(): HTMLSpanElement | null;\n}\n\nexport interface TimeFragmentsViewProps {\n value: string;\n precision: TimePrecision;\n size: SizeProp;\n onSelectSegment?(segment: TimeSegment, event: React.MouseEvent<HTMLSpanElement>): void;\n}\n\nconst getSeparatorSizeClassName = (styles: ReturnType<typeof getStyles>, size: SizeProp): string => {\n switch (size) {\n case 'large':\n return styles.separatorLarge();\n case 'medium':\n return styles.separatorMedium();\n case 'small':\n default:\n return styles.separatorSmall();\n }\n};\n\nexport const TimeFragmentsView = forwardRefAndName<TimeFragmentsViewRef, TimeFragmentsViewProps>(\n 'TimeFragmentsView',\n (props, ref) => {\n const { value, precision, size, onSelectSegment } = props;\n\n const theme = useContext(ThemeContext);\n\n const { cx } = useEmotion();\n\n const styles = useStyles(getStyles);\n\n const rootRef = useRef<HTMLSpanElement>(null);\n\n const rootClassName = cx(styles.root(), styles.selected(theme));\n const maskClassName = styles.mask(theme);\n const separatorSizeClassName = getSeparatorSizeClassName(styles, size);\n\n const getSegment = useCallback(\n (el: HTMLElement | EventTarget | null): TimeSegment | null => {\n const rootNode = rootRef.current;\n\n if (!rootNode || !el) {\n return null;\n }\n\n const fragments: HTMLSpanElement[] = Array.from(rootNode.querySelectorAll('[data-fragment]'));\n const segments = getTimeSegments(precision);\n\n const index = fragments.findIndex((fragment) => fragment === el || fragment.contains(el as HTMLSpanElement));\n\n return index >= 0 ? (segments[index] ?? null) : null;\n },\n [precision],\n );\n\n const isFragment = useCallback(\n (el: HTMLElement | EventTarget | null): boolean => {\n return getSegment(el) !== null;\n },\n [getSegment],\n );\n\n useImperativeHandle(\n ref,\n () => ({\n isFragment,\n getSegment,\n getRootNode: () => rootRef.current,\n }),\n [getSegment, isFragment],\n );\n\n const segments = getTimeSegments(precision);\n const displaySegments = getDisplaySegments(value, precision);\n\n return (\n \n {value\n ? segments.flatMap((segment, index) => {\n const segmentValue = displaySegments[index] ?? '';\n\n const valueMask = Array.from(segmentValue)\n .filter((char) => char !== TIME_PLACEHOLDER_CHAR)\n .join('');\n\n const placeholderLength = segmentValue.length - valueMask.length;\n\n const nodes = [\n <span\n key={segment}\n data-fragment=\"\"\n className={styles.segment()}\n onMouseUp={(event) => onSelectSegment?.(segment, event)}\n >\n {valueMask}\n {Array(placeholderLength).fill(TIME_PLACEHOLDER_CHAR).join('')}\n ,\n ];\n\n if (index < segments.length - 1) {\n nodes.push(\n <span\n key={`separator-${index}`}\n className={cx(maskClassName, styles.separator(), separatorSizeClassName, {\n [styles.separatorFilled()]: !segmentValue.includes(TIME_PLACEHOLDER_CHAR),\n })}\n >\n {TIME_SEPARATOR}\n ,\n );\n }\n\n return nodes;\n })\n : null}\n \n );\n },\n);\n"]}

package/components/TimePicker/TimeFragmentsView.styles.d.ts ADDED Viewed

@@ -0,0 +1,12 @@
+import type { Theme } from '../../lib/theming/Theme.js';
+export declare const getStyles: import("../../lib/theming/Emotion.js").StylesGetter<{
+    root(): string;
+    selected(t: Theme): string;
+    segment(): string;
+    separator(): string;
+    separatorSmall(): string;
+    separatorMedium(): string;
+    separatorLarge(): string;
+    mask(t: Theme): string;
+    separatorFilled(): string;
+}>;

package/components/TimePicker/TimeFragmentsView.styles.js ADDED Viewed

@@ -0,0 +1,43 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import { memoizeGetStyles } from '../../lib/theming/Emotion.js';
+export var getStyles = memoizeGetStyles(function (_a) {
+    var css = _a.css;
+    return ({
+        root: function () {
+            return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      cursor: text;\n      font-variant-numeric: tabular-nums;\n      white-space: nowrap;\n    "], ["\n      cursor: text;\n      font-variant-numeric: tabular-nums;\n      white-space: nowrap;\n    "])));
+        },
+        selected: function (t) {
+            var getSelection = function (background, color) {
+                return (background || color) &&
+                    "& ::selection {\n        background: ".concat(background, ";\n        color: ").concat(color, ";\n      }");
+            };
+            return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      cursor: text;\n      ", "\n    "], ["\n      cursor: text;\n      ", "\n    "])), getSelection(t.dateInputComponentSelectedBgColor, t.dateInputComponentSelectedTextColor));
+        },
+        segment: function () {
+            return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      display: inline;\n      font-variant-numeric: tabular-nums;\n      white-space: pre;\n    "], ["\n      display: inline;\n      font-variant-numeric: tabular-nums;\n      white-space: pre;\n    "])));
+        },
+        separator: function () {
+            return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      display: inline-block;\n      font-variant-numeric: tabular-nums;\n      white-space: pre;\n    "], ["\n      display: inline-block;\n      font-variant-numeric: tabular-nums;\n      white-space: pre;\n    "])));
+        },
+        separatorSmall: function () {
+            return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n      vertical-align: 1px;\n      margin-left: 1px;\n      margin-right: 1px;\n    "], ["\n      vertical-align: 1px;\n      margin-left: 1px;\n      margin-right: 1px;\n    "])));
+        },
+        separatorMedium: function () {
+            return css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n      vertical-align: 1px;\n      margin-left: 2px;\n      margin-right: 2px;\n    "], ["\n      vertical-align: 1px;\n      margin-left: 2px;\n      margin-right: 2px;\n    "])));
+        },
+        separatorLarge: function () {
+            return css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n      vertical-align: 2px;\n      margin-left: 2px;\n      margin-right: 2px;\n    "], ["\n      vertical-align: 2px;\n      margin-left: 2px;\n      margin-right: 2px;\n    "])));
+        },
+        mask: function (t) {
+            return css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n      color: ", ";\n    "], ["\n      color: ", ";\n    "])), t.inputPlaceholderColor);
+        },
+        separatorFilled: function () {
+            return css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n      color: inherit;\n    "], ["\n      color: inherit;\n    "])));
+        },
+    });
+});
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9;
+//# sourceMappingURL=TimeFragmentsView.styles.js.map

package/components/TimePicker/TimeFragmentsView.styles.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"TimeFragmentsView.styles.js","sourceRoot":"","sources":["../../../components/TimePicker/TimeFragmentsView.styles.ts"],"names":[],"mappings":";;;;AAEA,OAAO,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAGhE,MAAM,CAAC,IAAM,SAAS,GAAG,gBAAgB,CAAC,UAAC,EAAgB;QAAd,GAAG,SAAA;IAAgB,OAAA,CAAC;QAC/D,IAAI;YACF,OAAO,GAAG,uKAAA,oGAIT,KAAC;QACJ,CAAC;QAED,QAAQ,YAAC,CAAQ;YACf,IAAM,YAAY,GAAG,UAAC,UAAkB,EAAE,KAAa;gBACrD,OAAA,CAAC,UAAU,IAAI,KAAK,CAAC;oBACrB,+CACgB,UAAU,+BACf,KAAK,eACd;YAJF,CAIE,CAAC;YAEL,OAAO,GAAG,4GAAA,+BAEN,EAAwF,QAC3F,KADG,YAAY,CAAC,CAAC,CAAC,iCAAiC,EAAE,CAAC,CAAC,mCAAmC,CAAC,EAC1F;QACJ,CAAC;QAED,OAAO;YACL,OAAO,GAAG,uKAAA,oGAIT,KAAC;QACJ,CAAC;QAED,SAAS;YACP,OAAO,GAAG,6KAAA,0GAIT,KAAC;QACJ,CAAC;QAED,cAAc;YACZ,OAAO,GAAG,0JAAA,uFAIT,KAAC;QACJ,CAAC;QAED,eAAe;YACb,OAAO,GAAG,0JAAA,uFAIT,KAAC;QACJ,CAAC;QAED,cAAc;YACZ,OAAO,GAAG,0JAAA,uFAIT,KAAC;QACJ,CAAC;QAED,IAAI,YAAC,CAAQ;YACX,OAAO,GAAG,+FAAA,iBACC,EAAuB,SACjC,KADU,CAAC,CAAC,qBAAqB,EAChC;QACJ,CAAC;QAED,eAAe;YACb,OAAO,GAAG,kGAAA,+BAET,KAAC;QACJ,CAAC;KACF,CAAC;AA1E8D,CA0E9D,CAAC,CAAC","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\n\nimport { memoizeGetStyles } from '../../lib/theming/Emotion.js';\nimport type { Theme } from '../../lib/theming/Theme.js';\n\nexport const getStyles = memoizeGetStyles(({ css }: Emotion) => ({\n root() {\n return css`\n cursor: text;\n font-variant-numeric: tabular-nums;\n white-space: nowrap;\n `;\n },\n\n selected(t: Theme) {\n const getSelection = (background: string, color: string) =>\n (background || color) &&\n `& ::selection {\n background: ${background};\n color: ${color};\n }`;\n\n return css`\n cursor: text;\n ${getSelection(t.dateInputComponentSelectedBgColor, t.dateInputComponentSelectedTextColor)}\n `;\n },\n\n segment() {\n return css`\n display: inline;\n font-variant-numeric: tabular-nums;\n white-space: pre;\n `;\n },\n\n separator() {\n return css`\n display: inline-block;\n font-variant-numeric: tabular-nums;\n white-space: pre;\n `;\n },\n\n separatorSmall() {\n return css`\n vertical-align: 1px;\n margin-left: 1px;\n margin-right: 1px;\n `;\n },\n\n separatorMedium() {\n return css`\n vertical-align: 1px;\n margin-left: 2px;\n margin-right: 2px;\n `;\n },\n\n separatorLarge() {\n return css`\n vertical-align: 2px;\n margin-left: 2px;\n margin-right: 2px;\n `;\n },\n\n mask(t: Theme) {\n return css`\n color: ${t.inputPlaceholderColor};\n `;\n },\n\n separatorFilled() {\n return css`\n color: inherit;\n `;\n },\n}));\n"]}

package/components/TimePicker/TimeInput.d.ts ADDED Viewed

@@ -0,0 +1,23 @@
+import type { MouseEventHandler, ReactNode } from 'react';
+import React from 'react';
+import type { InputProps } from '../Input/index.js';
+import type { TimePrecision, TimeSegment } from './helpers/TimePicker.shared.js';
+export interface TimeInputProps extends Omit<InputProps, 'type' | 'value' | 'onValueChange' | 'rightIcon' | 'inputMode'> {
+    precision: TimePrecision;
+    rightContent?: ReactNode;
+    value: string;
+    onRightContentMouseDown?: MouseEventHandler<HTMLSpanElement>;
+    onSelectSegment?: (segment: TimeSegment, event: React.MouseEvent<HTMLSpanElement>) => void;
+}
+export interface TimeInputRef {
+    focus(): void;
+    blur(): void;
+    blink(): void;
+    getNode(): HTMLElement | null;
+    isFragment(el: HTMLElement | EventTarget | null): boolean;
+    getSegment(el: HTMLElement | EventTarget | null): TimeSegment | null;
+    selectAll(): void;
+    isAllSelected(): boolean;
+    selectSegment(segment: TimeSegment): void;
+}
+export declare const TimeInput: import("../../lib/forwardRefAndName.js").ReactUIComponentWithRef<TimeInputRef, TimeInputProps> & Record<never, never>;

package/components/TimePicker/TimeInput.js ADDED Viewed

@@ -0,0 +1,86 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React, { useContext, useImperativeHandle, useRef } from 'react';
+import { InputLikeText } from '../../internal/InputLikeText/index.js';
+import { forwardRefAndName } from '../../lib/forwardRefAndName.js';
+import { useEmotion, useStyles } from '../../lib/renderEnvironment/index.js';
+import { ThemeContext } from '../../lib/theming/ThemeContext.js';
+import { getTimePickerInputWidth } from './helpers/TimePicker.layout.js';
+import { getTimeSegmentSelectionNodeRange } from './helpers/TimePicker.selection.js';
+import { TimeClockIcon } from './TimeClockIcon.js';
+import { TimeFragmentsView } from './TimeFragmentsView.js';
+import { TimePickerDataTids } from './TimePicker.js';
+import { getStyles } from './TimePicker.styles.js';
+export var TimeInput = forwardRefAndName('TimeInput', function (props, ref) {
+    var _a;
+    var precision = props.precision, rightContent = props.rightContent, onRightContentMouseDown = props.onRightContentMouseDown, onSelectSegment = props.onSelectSegment, _b = props.size, size = _b === void 0 ? 'small' : _b, width = props.width, rest = __rest(props, ["precision", "rightContent", "onRightContentMouseDown", "onSelectSegment", "size", "width"]);
+    var theme = useContext(ThemeContext);
+    var cx = useEmotion().cx;
+    var styles = useStyles(getStyles);
+    var inputLikeTextRef = useRef(null);
+    var fragmentsViewRef = useRef(null);
+    useImperativeHandle(ref, function () { return ({
+        focus: function () { var _a; return (_a = inputLikeTextRef.current) === null || _a === void 0 ? void 0 : _a.focus(); },
+        blur: function () { var _a; return (_a = inputLikeTextRef.current) === null || _a === void 0 ? void 0 : _a.blur(); },
+        blink: function () { var _a; return (_a = inputLikeTextRef.current) === null || _a === void 0 ? void 0 : _a.blink(); },
+        getNode: function () { var _a, _b; return (_b = (_a = inputLikeTextRef.current) === null || _a === void 0 ? void 0 : _a.getNode()) !== null && _b !== void 0 ? _b : null; },
+        isFragment: function (el) { var _a, _b; return (_b = (_a = fragmentsViewRef.current) === null || _a === void 0 ? void 0 : _a.isFragment(el)) !== null && _b !== void 0 ? _b : false; },
+        getSegment: function (el) { var _a, _b; return (_b = (_a = fragmentsViewRef.current) === null || _a === void 0 ? void 0 : _a.getSegment(el)) !== null && _b !== void 0 ? _b : null; },
+        selectAll: function () {
+            var _a, _b, _c;
+            var rootNode = (_b = (_a = fragmentsViewRef.current) === null || _a === void 0 ? void 0 : _a.getRootNode()) !== null && _b !== void 0 ? _b : null;
+            if (!rootNode) {
+                return;
+            }
+            (_c = inputLikeTextRef.current) === null || _c === void 0 ? void 0 : _c.selectInnerNode(rootNode, 0, rootNode.childNodes.length);
+        },
+        isAllSelected: function () {
+            var _a, _b, _c, _d, _e;
+            var rootNode = (_b = (_a = fragmentsViewRef.current) === null || _a === void 0 ? void 0 : _a.getRootNode()) !== null && _b !== void 0 ? _b : null;
+            if (!rootNode) {
+                return false;
+            }
+            var selection = (_d = (_c = rootNode.ownerDocument.defaultView) === null || _c === void 0 ? void 0 : _c.getSelection()) !== null && _d !== void 0 ? _d : null;
+            if (!selection || selection.rangeCount === 0 || selection.isCollapsed) {
+                return false;
+            }
+            var range = selection.getRangeAt(0);
+            var text = (_e = rootNode.textContent) !== null && _e !== void 0 ? _e : '';
+            return (range.toString() === text && rootNode.contains(range.startContainer) && rootNode.contains(range.endContainer));
+        },
+        selectSegment: function (segment) {
+            var _a, _b, _c;
+            var rootNode = (_b = (_a = fragmentsViewRef.current) === null || _a === void 0 ? void 0 : _a.getRootNode()) !== null && _b !== void 0 ? _b : null;
+            if (!rootNode) {
+                return;
+            }
+            var _d = getTimeSegmentSelectionNodeRange(segment, precision), start = _d[0], end = _d[1];
+            (_c = inputLikeTextRef.current) === null || _c === void 0 ? void 0 : _c.selectInnerNode(rootNode, start, end);
+        },
+    }); }, [precision]);
+    return (React.createElement(InputLikeText, __assign({ ref: inputLikeTextRef }, rest, { takeContentWidth: true, inputMode: "numeric", size: size, width: width !== null && width !== void 0 ? width : getTimePickerInputWidth(size, precision), value: props.value, rightIcon: React.createElement("span", { "data-tid": TimePickerDataTids.rightContent, className: cx(styles.rightContent(), styles.rightContentInteractive(), (_a = {},
+                _a[styles.rightContentDefault(theme)] = !rightContent,
+                _a)), onMouseDown: onRightContentMouseDown }, rightContent !== null && rightContent !== void 0 ? rightContent : React.createElement(TimeClockIcon, { size: size })) }),
+        React.createElement(TimeFragmentsView, { ref: fragmentsViewRef, value: props.value, precision: precision, size: size, onSelectSegment: onSelectSegment })));
+});
+//# sourceMappingURL=TimeInput.js.map

package/components/TimePicker/TimeInput.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"TimeInput.js","sourceRoot":"","sources":["../../../components/TimePicker/TimeInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { MouseEventHandler, ReactNode } from 'react';\nimport React, { useContext, useImperativeHandle, useRef } from 'react';\n\nimport { InputLikeText } from '../../internal/InputLikeText/index.js';\nimport { forwardRefAndName } from '../../lib/forwardRefAndName.js';\nimport { useEmotion, useStyles } from '../../lib/renderEnvironment/index.js';\nimport { ThemeContext } from '../../lib/theming/ThemeContext.js';\nimport type { InputProps } from '../Input/index.js';\nimport { getTimePickerInputWidth } from './helpers/TimePicker.layout.js';\nimport { getTimeSegmentSelectionNodeRange } from './helpers/TimePicker.selection.js';\nimport type { TimePrecision, TimeSegment } from './helpers/TimePicker.shared.js';\nimport { TimeClockIcon } from './TimeClockIcon.js';\nimport type { TimeFragmentsViewRef } from './TimeFragmentsView.js';\nimport { TimeFragmentsView } from './TimeFragmentsView.js';\nimport { TimePickerDataTids } from './TimePicker.js';\nimport { getStyles } from './TimePicker.styles.js';\n\nexport interface TimeInputProps extends Omit<\n InputProps,\n 'type' | 'value' | 'onValueChange' | 'rightIcon' | 'inputMode'\n> {\n precision: TimePrecision;\n rightContent?: ReactNode;\n value: string;\n onRightContentMouseDown?: MouseEventHandler<HTMLSpanElement>;\n onSelectSegment?: (segment: TimeSegment, event: React.MouseEvent<HTMLSpanElement>) => void;\n}\n\nexport interface TimeInputRef {\n focus(): void;\n\n blur(): void;\n\n blink(): void;\n\n getNode(): HTMLElement | null;\n\n isFragment(el: HTMLElement | EventTarget | null): boolean;\n\n getSegment(el: HTMLElement | EventTarget | null): TimeSegment | null;\n\n selectAll(): void;\n\n isAllSelected(): boolean;\n\n selectSegment(segment: TimeSegment): void;\n}\n\nexport const TimeInput = forwardRefAndName<TimeInputRef, TimeInputProps>('TimeInput', (props, ref) => {\n const { precision, rightContent, onRightContentMouseDown, onSelectSegment, size = 'small', width, ...rest } = props;\n\n const theme = useContext(ThemeContext);\n\n const { cx } = useEmotion();\n\n const styles = useStyles(getStyles);\n\n const inputLikeTextRef = useRef<InputLikeText>(null);\n const fragmentsViewRef = useRef<TimeFragmentsViewRef>(null);\n\n useImperativeHandle(\n ref,\n () => ({\n focus: () => inputLikeTextRef.current?.focus(),\n blur: () => inputLikeTextRef.current?.blur(),\n blink: () => inputLikeTextRef.current?.blink(),\n getNode: () => inputLikeTextRef.current?.getNode() ?? null,\n isFragment: (el) => fragmentsViewRef.current?.isFragment(el) ?? false,\n getSegment: (el) => fragmentsViewRef.current?.getSegment(el) ?? null,\n selectAll: () => {\n const rootNode = fragmentsViewRef.current?.getRootNode() ?? null;\n\n if (!rootNode) {\n return;\n }\n\n inputLikeTextRef.current?.selectInnerNode(rootNode, 0, rootNode.childNodes.length);\n },\n\n isAllSelected: () => {\n const rootNode = fragmentsViewRef.current?.getRootNode() ?? null;\n\n if (!rootNode) {\n return false;\n }\n\n const selection = rootNode.ownerDocument.defaultView?.getSelection() ?? null;\n\n if (!selection || selection.rangeCount === 0 || selection.isCollapsed) {\n return false;\n }\n\n const range = selection.getRangeAt(0);\n const text = rootNode.textContent ?? '';\n\n return (\n range.toString() === text && rootNode.contains(range.startContainer) && rootNode.contains(range.endContainer)\n );\n },\n\n selectSegment: (segment) => {\n const rootNode = fragmentsViewRef.current?.getRootNode() ?? null;\n\n if (!rootNode) {\n return;\n }\n\n const [start, end] = getTimeSegmentSelectionNodeRange(segment, precision);\n inputLikeTextRef.current?.selectInnerNode(rootNode, start, end);\n },\n }),\n [precision],\n );\n\n return (\n <InputLikeText\n ref={inputLikeTextRef}\n {...rest}\n takeContentWidth\n inputMode=\"numeric\"\n size={size}\n width={width ?? getTimePickerInputWidth(size, precision)}\n value={props.value}\n rightIcon={\n <span\n data-tid={TimePickerDataTids.rightContent}\n className={cx(styles.rightContent(), styles.rightContentInteractive(), {\n [styles.rightContentDefault(theme)]: !rightContent,\n })}\n onMouseDown={onRightContentMouseDown}\n >\n {rightContent ?? <TimeClockIcon size={size} />}\n \n }\n >\n <TimeFragmentsView\n ref={fragmentsViewRef}\n value={props.value}\n precision={precision}\n size={size}\n onSelectSegment={onSelectSegment}\n />\n </InputLikeText>\n );\n});\n"]}

package/components/TimePicker/TimePicker.d.ts ADDED Viewed

@@ -0,0 +1,27 @@
+import type { AriaAttributes, ReactNode } from 'react';
+import type { InputProps } from '../Input/index.js';
+import type { TimePrecision, TimeSlot } from './helpers/TimePicker.shared.js';
+export interface TimePickerProps extends Omit<InputProps, 'type' | 'value' | 'defaultValue' | 'onValueChange' | 'rightIcon' | 'inputMode'>, Pick<AriaAttributes, 'aria-describedby' | 'aria-label'> {
+    dropdown?: boolean;
+    menuPos?: 'top' | 'bottom';
+    menuAlign?: 'left' | 'right';
+    precision?: TimePrecision;
+    slots?: TimeSlot[];
+    rightContent?: ReactNode;
+    value?: string | null;
+    onValueChange?(value: string): void;
+}
+export interface TimePickerRef {
+    focus(): void;
+    blur(): void;
+    getNode(): HTMLElement | null;
+    getRootNode(): HTMLElement | null;
+}
+export declare const TimePickerDataTids: {
+    readonly root: "TimePicker__root";
+    readonly input: "TimePicker__input";
+    readonly popup: "TimePicker__popup";
+    readonly slot: "TimePicker__slot";
+    readonly rightContent: "TimePicker__rightContent";
+};
+export declare const TimePicker: import("../../lib/forwardRefAndName.js").ReactUIComponentWithRef<TimePickerRef, TimePickerProps> & Record<never, never>;