@pega/cosmos-react-demos 3.0.0-dev.9.0 → 3.0.0-rc.2

package/jsx/core/Currency/Currency.stories.jsx

@@ -1,17 +1,36 @@
-import { useState } from 'react';
-import { CurrencyDisplay, CurrencyInput } from '@pega/cosmos-react-core';
+import { useEffect, useState } from 'react';
+import { CurrencyDisplay, CurrencyInput, usePrevious } from '@pega/cosmos-react-core';
 export default {
     title: 'Core/Currency',
     component: CurrencyInput
 };
 export const CurrencyInputDemo = (args) => {
-    const [value, setValue] = useState();
-    return (<CurrencyInput value={value} onChange={inputValue => setValue(inputValue)} onBlur={inputValue => setValue(inputValue)} currencyISOCode={args.currencyISOCode} alwaysShowISOCode={args.alwaysShowISOCode} showDecimal={args.showDecimal} showGroupSeparators={args.showGroupSeparators} step={args.step} label={args.label} labelHidden={args.labelHidden} info={args.info} status={args.status} required={args.required} disabled={args.disabled} readOnly={args.readOnly}/>);
+    const [value, setValue] = useState(args.value === undefined ? undefined : `${args.value}`);
+    const prev = usePrevious(args.value);
+    useEffect(() => {
+        if (prev !== args.value)
+            setValue(args.value === undefined ? undefined : `${args.value}`);
+    }, [prev, args.value]);
+    return (<CurrencyInput {...args} value={value} onChange={inputValue => {
+            setValue(inputValue);
+            args.onChange?.(inputValue);
+        }} onBlur={inputValue => {
+            args.onBlur?.(inputValue);
+        }} onFocus={inputValue => {
+            args.onFocus?.(inputValue);
+        }} currencyISOCode={args.currencyISOCode} alwaysShowISOCode={args.alwaysShowISOCode} showDecimal={args.showDecimal} maximumFractionDigits={args.maximumFractionDigits} showGroupSeparators={args.showGroupSeparators} step={args.step} label={args.label} labelHidden={args.labelHidden} info={args.info} status={args.status} required={args.required} disabled={args.disabled} readOnly={args.readOnly} additionalInfo={args.showAdditionalInfo
+            ? {
+                heading: 'Additional Info',
+                content: 'Input a number that will represent a monetary value.'
+            }
+            : undefined}/>);
 };
 CurrencyInputDemo.args = {
+    value: undefined,
     currencyISOCode: 'USD',
     alwaysShowISOCode: false,
     showDecimal: true,
+    maximumFractionDigits: 0,
     showGroupSeparators: true,
     step: 1,
     label: 'Currency input',
@@ -20,15 +39,18 @@ CurrencyInputDemo.args = {
     status: undefined,
     required: false,
     disabled: false,
-    readOnly: false
+    readOnly: false,
+    showAdditionalInfo: true
 };
 CurrencyInputDemo.argTypes = {
+    value: { control: { type: 'number' } },
     currencyISOCode: {
-        options: ['USD', 'EUR', 'AUD', 'PLN', 'CZK', 'JPY'],
+        options: [undefined, 'USD', 'EUR', 'AUD', 'PLN', 'CZK', 'JPY'],
         control: { type: 'select' }
     },
     alwaysShowISOCode: { control: { type: 'boolean' } },
     showDecimal: { control: { type: 'boolean' } },
+    maximumFractionDigits: { control: { type: 'number' } },
     showGroupSeparators: { control: { type: 'boolean' } },
     step: { control: { type: 'number' } },
     label: { control: { type: 'text' } },
@@ -37,7 +59,8 @@ CurrencyInputDemo.argTypes = {
     status: { options: [undefined, 'success', 'warning', 'error'], control: { type: 'select' } },
     required: { control: { type: 'boolean' } },
     disabled: { control: { type: 'boolean' } },
-    readOnly: { control: { type: 'boolean' } }
+    readOnly: { control: { type: 'boolean' } },
+    showAdditionalInfo: { control: { type: 'boolean' } }
 };
 export const CurrencyDisplayDemo = (args) => {
     return (<CurrencyDisplay value={args.value} currencyISOCode={args.currencyISOCode} formattingOptions={{

package/jsx/core/Currency/Currency.stories.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"Currency.stories.jsx","sourceRoot":"","sources":["../../../src/core/Currency/Currency.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useState } from 'react';\n\nimport {\n  CurrencyDisplay,\n  CurrencyDisplayProps,\n  CurrencyInput,\n  CurrencyInputProps,\n  OmitStrict\n} from '@pega/cosmos-react-core';\n\nexport default {\n  title: 'Core/Currency',\n  component: CurrencyInput\n} as Meta;\n\nexport const CurrencyInputDemo: Story<OmitStrict<CurrencyInputProps, 'onChange' | 'onBlur'>> = (\n  args: OmitStrict<CurrencyInputProps, 'onChange' | 'onBlur'>\n) => {\n  const [value, setValue] = useState<string>();\n\n  return (\n    <CurrencyInput\n      value={value}\n      onChange={inputValue => setValue(inputValue)}\n      onBlur={inputValue => setValue(inputValue)}\n      currencyISOCode={args.currencyISOCode}\n      alwaysShowISOCode={args.alwaysShowISOCode}\n      showDecimal={args.showDecimal}\n      showGroupSeparators={args.showGroupSeparators}\n      step={args.step}\n      label={args.label}\n      labelHidden={args.labelHidden}\n      info={args.info}\n      status={args.status}\n      required={args.required}\n      disabled={args.disabled}\n      readOnly={args.readOnly}\n    />\n  );\n};\n\nCurrencyInputDemo.args = {\n  currencyISOCode: 'USD',\n  alwaysShowISOCode: false,\n  showDecimal: true,\n  showGroupSeparators: true,\n  step: 1,\n  label: 'Currency input',\n  labelHidden: false,\n  info: 'Enter a numerical value',\n  status: undefined,\n  required: false,\n  disabled: false,\n  readOnly: false\n};\n\nCurrencyInputDemo.argTypes = {\n  currencyISOCode: {\n    options: ['USD', 'EUR', 'AUD', 'PLN', 'CZK', 'JPY'],\n    control: { type: 'select' }\n  },\n  alwaysShowISOCode: { control: { type: 'boolean' } },\n  showDecimal: { control: { type: 'boolean' } },\n  showGroupSeparators: { control: { type: 'boolean' } },\n  step: { control: { type: 'number' } },\n  label: { control: { type: 'text' } },\n  labelHidden: { control: { type: 'boolean' } },\n  info: { control: { type: 'text' } },\n  status: { options: [undefined, 'success', 'warning', 'error'], control: { type: 'select' } },\n  required: { control: { type: 'boolean' } },\n  disabled: { control: { type: 'boolean' } },\n  readOnly: { control: { type: 'boolean' } }\n};\n\ninterface CurrencyDisplayStoryProps extends CurrencyDisplayProps {\n  groupSeparators: boolean;\n  fractionDigits: number;\n  currency: 'symbol' | 'code' | 'name';\n  negative: 'minus-sign' | 'parentheses';\n  notation: 'standard' | 'compact';\n}\n\nexport const CurrencyDisplayDemo: Story<CurrencyDisplayStoryProps> = (\n  args: CurrencyDisplayStoryProps\n) => {\n  return (\n    <CurrencyDisplay\n      value={args.value}\n      currencyISOCode={args.currencyISOCode}\n      formattingOptions={{\n        fractionDigits: args.fractionDigits,\n        groupSeparators: args.groupSeparators,\n        currency: args.currency,\n        negative: args.negative,\n        notation: args.notation\n      }}\n    />\n  );\n};\n\nCurrencyDisplayDemo.args = {\n  value: undefined,\n  currencyISOCode: 'USD',\n  groupSeparators: true,\n  fractionDigits: undefined,\n  currency: 'symbol',\n  negative: 'minus-sign',\n  notation: 'standard'\n};\n\nCurrencyDisplayDemo.argTypes = {\n  value: { control: { type: 'number' } },\n  currencyISOCode: {\n    options: [undefined, 'USD', 'EUR', 'AUD', 'PLN', 'CZK', 'JPY'],\n    control: { type: 'select' }\n  },\n  groupSeparators: { control: { type: 'boolean' } },\n  fractionDigits: { control: { type: 'number', min: 0, max: 20, step: 1 } },\n  negative: {\n    control: {\n      type: 'inline-radio'\n    },\n    options: ['minus-sign', 'parentheses']\n  },\n  currency: {\n    control: { type: 'select' },\n    options: ['symbol', 'code', 'name']\n  },\n  notation: {\n    control: { type: 'inline-radio' },\n    options: ['standard', 'compact']\n  }\n};\n"]}
+{"version":3,"file":"Currency.stories.jsx","sourceRoot":"","sources":["../../../src/core/Currency/Currency.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useEffect, useState } from 'react';\n\nimport {\n  CurrencyDisplay,\n  CurrencyDisplayProps,\n  CurrencyInput,\n  CurrencyInputProps,\n  OmitStrict,\n  usePrevious\n} from '@pega/cosmos-react-core';\n\nexport default {\n  title: 'Core/Currency',\n  component: CurrencyInput\n} as Meta;\n\ntype CurrencyStoryProps = OmitStrict<CurrencyInputProps, 'value' | 'onChange'> & {\n  value?: number;\n  onChange?: (value: string) => void;\n  showAdditionalInfo?: boolean;\n};\n\nexport const CurrencyInputDemo: Story<Partial<CurrencyStoryProps>> = (\n  args: Partial<CurrencyStoryProps>\n) => {\n  const [value, setValue] = useState<string | undefined>(\n    args.value === undefined ? undefined : `${args.value}`\n  );\n\n  const prev = usePrevious(args.value);\n  useEffect(() => {\n    if (prev !== args.value) setValue(args.value === undefined ? undefined : `${args.value}`);\n  }, [prev, args.value]);\n\n  return (\n    <CurrencyInput\n      {...args}\n      value={value}\n      onChange={inputValue => {\n        setValue(inputValue);\n        args.onChange?.(inputValue);\n      }}\n      onBlur={inputValue => {\n        args.onBlur?.(inputValue);\n      }}\n      onFocus={inputValue => {\n        args.onFocus?.(inputValue);\n      }}\n      currencyISOCode={args.currencyISOCode}\n      alwaysShowISOCode={args.alwaysShowISOCode}\n      showDecimal={args.showDecimal}\n      maximumFractionDigits={args.maximumFractionDigits}\n      showGroupSeparators={args.showGroupSeparators}\n      step={args.step}\n      label={args.label}\n      labelHidden={args.labelHidden}\n      info={args.info}\n      status={args.status}\n      required={args.required}\n      disabled={args.disabled}\n      readOnly={args.readOnly}\n      additionalInfo={\n        args.showAdditionalInfo\n          ? {\n              heading: 'Additional Info',\n              content: 'Input a number that will represent a monetary value.'\n            }\n          : undefined\n      }\n    />\n  );\n};\n\nCurrencyInputDemo.args = {\n  value: undefined,\n  currencyISOCode: 'USD',\n  alwaysShowISOCode: false,\n  showDecimal: true,\n  maximumFractionDigits: 0,\n  showGroupSeparators: true,\n  step: 1,\n  label: 'Currency input',\n  labelHidden: false,\n  info: 'Enter a numerical value',\n  status: undefined,\n  required: false,\n  disabled: false,\n  readOnly: false,\n  showAdditionalInfo: true\n};\n\nCurrencyInputDemo.argTypes = {\n  value: { control: { type: 'number' } },\n  currencyISOCode: {\n    options: [undefined, 'USD', 'EUR', 'AUD', 'PLN', 'CZK', 'JPY'],\n    control: { type: 'select' }\n  },\n  alwaysShowISOCode: { control: { type: 'boolean' } },\n  showDecimal: { control: { type: 'boolean' } },\n  maximumFractionDigits: { control: { type: 'number' } },\n  showGroupSeparators: { control: { type: 'boolean' } },\n  step: { control: { type: 'number' } },\n  label: { control: { type: 'text' } },\n  labelHidden: { control: { type: 'boolean' } },\n  info: { control: { type: 'text' } },\n  status: { options: [undefined, 'success', 'warning', 'error'], control: { type: 'select' } },\n  required: { control: { type: 'boolean' } },\n  disabled: { control: { type: 'boolean' } },\n  readOnly: { control: { type: 'boolean' } },\n  showAdditionalInfo: { control: { type: 'boolean' } }\n};\n\ninterface CurrencyDisplayStoryProps extends CurrencyDisplayProps {\n  groupSeparators: boolean;\n  fractionDigits: number;\n  currency: 'symbol' | 'code' | 'name';\n  negative: 'minus-sign' | 'parentheses';\n  notation: 'standard' | 'compact';\n}\n\nexport const CurrencyDisplayDemo: Story<CurrencyDisplayStoryProps> = (\n  args: CurrencyDisplayStoryProps\n) => {\n  return (\n    <CurrencyDisplay\n      value={args.value}\n      currencyISOCode={args.currencyISOCode}\n      formattingOptions={{\n        fractionDigits: args.fractionDigits,\n        groupSeparators: args.groupSeparators,\n        currency: args.currency,\n        negative: args.negative,\n        notation: args.notation\n      }}\n    />\n  );\n};\n\nCurrencyDisplayDemo.args = {\n  value: undefined,\n  currencyISOCode: 'USD',\n  groupSeparators: true,\n  fractionDigits: undefined,\n  currency: 'symbol',\n  negative: 'minus-sign',\n  notation: 'standard'\n};\n\nCurrencyDisplayDemo.argTypes = {\n  value: { control: { type: 'number' } },\n  currencyISOCode: {\n    options: [undefined, 'USD', 'EUR', 'AUD', 'PLN', 'CZK', 'JPY'],\n    control: { type: 'select' }\n  },\n  groupSeparators: { control: { type: 'boolean' } },\n  fractionDigits: { control: { type: 'number', min: 0, max: 20, step: 1 } },\n  negative: {\n    control: {\n      type: 'inline-radio'\n    },\n    options: ['minus-sign', 'parentheses']\n  },\n  currency: {\n    control: { type: 'select' },\n    options: ['symbol', 'code', 'name']\n  },\n  notation: {\n    control: { type: 'inline-radio' },\n    options: ['standard', 'compact']\n  }\n};\n"]}

package/jsx/core/DateTime/DateTime.stories.d.ts

@@ -1,19 +1,50 @@
 import { Meta, Story } from '@storybook/react';
-import { DateInputProps, DateTimeInputProps, DateRangeInputProps, DayOfWeekInputProps, DurationInputProps, MonthInputProps, QuarterInputProps, TimeInputProps, WeekInputProps } from '@pega/cosmos-react-core';
+import { DateInputProps, DateTimeInputProps, DateRangeInputProps, DayOfWeekInputProps, DurationInputProps, MonthInputProps, QuarterInputProps, TimeInputProps, WeekInputProps, TimeRangeInputProps } from '@pega/cosmos-react-core';
 declare const _default: Meta<import("@storybook/react").Args>;
 export default _default;
-export declare const DateInputDemo: Story<DateInputProps>;
-export declare const MonthInputDemo: Story<MonthInputProps>;
-export declare const WeekInputDemo: Story<WeekInputProps>;
-export declare const QuarterInputDemo: Story<QuarterInputProps>;
-export declare const DayOfWeekInputDemo: Story<DayOfWeekInputProps & {
+interface DateInputStoryProps extends DateInputProps {
+    showAdditionalInfo?: boolean;
+}
+interface MonthInputStoryProps extends MonthInputProps {
+    showAdditionalInfo?: boolean;
+}
+interface WeekInputStoryProps extends WeekInputProps {
+    showAdditionalInfo?: boolean;
+}
+interface QuarterInputStoryProps extends QuarterInputProps {
+    showAdditionalInfo?: boolean;
+}
+interface DayOfWeekInputStoryProps extends DayOfWeekInputProps {
+    showAdditionalInfo?: boolean;
+}
+interface TimeInputStoryProps extends TimeInputProps {
+    showAdditionalInfo?: boolean;
+}
+interface DateTimeInputStoryProps extends DateTimeInputProps {
+    showAdditionalInfo?: boolean;
+    showWeekNumber?: boolean;
+}
+interface DateRangeInputStoryProps extends DateRangeInputProps {
+    showAdditionalInfo?: boolean;
+    showToAdditionalInfo?: boolean;
+    showFromAdditionalInfo?: boolean;
+}
+interface DurationInputStoryProps extends DurationInputProps {
+    showAdditionalInfo?: boolean;
+}
+export declare const DateInputDemo: Story<DateInputStoryProps>;
+export declare const MonthInputDemo: Story<MonthInputStoryProps>;
+export declare const WeekInputDemo: Story<WeekInputStoryProps>;
+export declare const QuarterInputDemo: Story<QuarterInputStoryProps>;
+export declare const DayOfWeekInputDemo: Story<DayOfWeekInputStoryProps & {
     min?: never;
     max?: never;
 }>;
-export declare const TimeInputDemo: Story<TimeInputProps>;
-export declare const DateTimeInputDemo: Story<DateTimeInputProps>;
-export declare const DateRangeInputDemo: Story<DateRangeInputProps>;
-export declare const DurationInputDemo: Story<DurationInputProps & {
+export declare const TimeInputDemo: Story<TimeInputStoryProps>;
+export declare const DateTimeInputDemo: Story<DateTimeInputStoryProps>;
+export declare const DateRangeInputDemo: Story<DateRangeInputStoryProps>;
+export declare const TimeRangeInputDemo: Story<TimeRangeInputProps>;
+export declare const DurationInputDemo: Story<DurationInputStoryProps & {
     min?: never;
     max?: never;
 }>;

package/jsx/core/DateTime/DateTime.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DateTime.stories.d.ts","sourceRoot":"","sources":["../../../src/core/DateTime/DateTime.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAG/C,OAAO,EAEL,cAAc,EAEd,kBAAkB,EAElB,mBAAmB,EAEnB,mBAAmB,EAEnB,kBAAkB,EAGlB,eAAe,EAEf,iBAAiB,EAEjB,cAAc,EAEd,cAAc,EACf,MAAM,yBAAyB,CAAC;;AAEjC,wBAsBU;AAEV,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,cAAc,CAe/C,CAAC;AAWF,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,eAAe,CAcjD,CAAC;AAMF,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,cAAc,CAc/C,CAAC;AAMF,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,iBAAiB,CAcrD,CAAC;AAMF,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,mBAAmB,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC;IAAC,GAAG,CAAC,EAAE,KAAK,CAAA;CAAE,CAaxF,CAAC;AAWF,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,cAAc,CAiB/C,CAAC;AAeF,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,kBAAkB,CAkBvD,CAAC;AAiBF,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,mBAAmB,CAezD,CAAC;AAiBF,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,kBAAkB,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC;IAAC,GAAG,CAAC,EAAE,KAAK,CAAA;CAAE,CAiBtF,CAAC"}
+{"version":3,"file":"DateTime.stories.d.ts","sourceRoot":"","sources":["../../../src/core/DateTime/DateTime.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAG/C,OAAO,EAEL,cAAc,EAEd,kBAAkB,EAElB,mBAAmB,EAEnB,mBAAmB,EAEnB,kBAAkB,EAGlB,eAAe,EAEf,iBAAiB,EAEjB,cAAc,EAEd,cAAc,EAEd,mBAAmB,EAEpB,MAAM,yBAAyB,CAAC;;AAEjC,wBA+BU;AAEV,UAAU,mBAAoB,SAAQ,cAAc;IAClD,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAED,UAAU,oBAAqB,SAAQ,eAAe;IACpD,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAED,UAAU,mBAAoB,SAAQ,cAAc;IAClD,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAED,UAAU,sBAAuB,SAAQ,iBAAiB;IACxD,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAED,UAAU,wBAAyB,SAAQ,mBAAmB;IAC5D,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAED,UAAU,mBAAoB,SAAQ,cAAc;IAClD,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAED,UAAU,uBAAwB,SAAQ,kBAAkB;IAC1D,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAED,UAAU,wBAAyB,SAAQ,mBAAmB;IAC5D,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,sBAAsB,CAAC,EAAE,OAAO,CAAC;CAClC;AAED,UAAU,uBAAwB,SAAQ,kBAAkB;IAC1D,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAED,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,mBAAmB,CAiCpD,CAAC;AAWF,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,oBAAoB,CAgCtD,CAAC;AAUF,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,mBAAmB,CAgCpD,CAAC;AAUF,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,sBAAsB,CAgC1D,CAAC;AAUF,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,wBAAwB,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC;IAAC,GAAG,CAAC,EAAE,KAAK,CAAA;CAAE,CA8B7F,CAAC;AAWF,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,mBAAmB,CAmCpD,CAAC;AAeF,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,uBAAuB,CAsC5D,CAAC;AAiBF,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,wBAAwB,CA4C9D,CAAC;AAuBF,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,mBAAmB,CA4BzD,CAAC;AAiBF,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,uBAAuB,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC;IAAC,GAAG,CAAC,EAAE,KAAK,CAAA;CAAE,CA+B3F,CAAC"}

package/jsx/core/DateTime/DateTime.stories.jsx

@@ -1,8 +1,9 @@
-import { useState } from 'react';
-import { DateInput, DateTimeInput, DateRangeInput, DayOfWeekInput, DurationInput, Format, MonthInput, QuarterInput, TimeInput, WeekInput } from '@pega/cosmos-react-core';
+import { useEffect, useState } from 'react';
+import { DateInput, DateTimeInput, DateRangeInput, DayOfWeekInput, DurationInput, Format, MonthInput, QuarterInput, TimeInput, WeekInput, usePrevious, TimeRangeInput } from '@pega/cosmos-react-core';
 export default {
     title: 'Core/DateTime/Input',
     args: {
+        value: undefined,
         status: undefined,
         label: '',
         labelHidden: false,
@@ -10,21 +11,43 @@ export default {
         disabled: false,
         readOnly: false,
         min: undefined,
-        max: undefined
+        max: undefined,
+        showAdditionalInfo: true,
+        mode: 'time'
     },
     argTypes: {
-        status: { options: [undefined, 'success', 'warning', 'error'], control: { type: 'select' } },
+        value: { control: { type: 'date' } },
+        status: {
+            options: [undefined, 'success', 'warning', 'error', 'pending'],
+            control: { type: 'select' }
+        },
         label: { control: { type: 'text' } },
         labelHidden: { control: { type: 'boolean' } },
         required: { control: { type: 'boolean' } },
         disabled: { control: { type: 'boolean' } },
         readOnly: { control: { type: 'boolean' } },
         min: { control: { type: 'date' } },
-        max: { control: { type: 'date' } }
+        max: { control: { type: 'date' } },
+        showAdditionalInfo: { control: { type: 'boolean' } },
+        mode: { options: ['time', 'datetime'], control: { type: 'select' } }
     }
 };
 export const DateInputDemo = (args) => {
-    return (<DateInput value={new Date()} showWeekNumber={args.showWeekNumber} status={args.status} label={args.label} labelHidden={args.labelHidden} required={args.required} disabled={args.disabled} readOnly={args.readOnly} min={args.min} max={args.max}/>);
+    const [value, setValue] = useState(args.value);
+    const prev = usePrevious(args.value);
+    useEffect(() => {
+        if (prev !== args.value)
+            setValue(args.value);
+    }, [prev, args.value]);
+    return (<DateInput additionalInfo={args.showAdditionalInfo
+            ? {
+                heading: 'Additional Info',
+                content: 'Select a date'
+            }
+            : undefined} value={value} showWeekNumber={args.showWeekNumber} status={args.status} label={args.label} labelHidden={args.labelHidden} required={args.required} disabled={args.disabled} readOnly={args.readOnly} min={args.min} max={args.max} onBlur={({ valueAsISOString, state }) => {
+            if (state !== 'incomplete' && state !== 'invalid')
+                setValue(valueAsISOString);
+        }}/>);
 };
 DateInputDemo.args = {
     showWeekNumber: false,
@@ -34,25 +57,87 @@ DateInputDemo.argTypes = {
     showWeekNumber: { control: { type: 'boolean' } }
 };
 export const MonthInputDemo = (args) => {
-    return (<MonthInput value={new Date()} status={args.status} label={args.label} labelHidden={args.labelHidden} required={args.required} disabled={args.disabled} readOnly={args.readOnly} min={args.min} max={args.max}/>);
+    const [value, setValue] = useState(args.value);
+    const prev = usePrevious(args.value);
+    useEffect(() => {
+        if (prev !== args.value)
+            setValue(args.value);
+    }, [prev, args.value]);
+    return (<MonthInput additionalInfo={args.showAdditionalInfo
+            ? {
+                heading: 'Additional Info',
+                content: 'Select a date'
+            }
+            : undefined} value={value} status={args.status} label={args.label} labelHidden={args.labelHidden} required={args.required} disabled={args.disabled} readOnly={args.readOnly} min={args.min} max={args.max} onBlur={({ valueAsISOString, state }) => {
+            if (state !== 'incomplete' && state !== 'invalid')
+                setValue(valueAsISOString);
+        }}/>);
 };
 MonthInputDemo.args = {
     label: 'Month input'
 };
+MonthInputDemo.argTypes = {
+    label: { control: { type: 'string' } }
+};
 export const WeekInputDemo = (args) => {
-    return (<WeekInput value={new Date()} status={args.status} label={args.label} labelHidden={args.labelHidden} required={args.required} disabled={args.disabled} readOnly={args.readOnly} min={args.min} max={args.max}/>);
+    const [value, setValue] = useState(args.value);
+    const prev = usePrevious(args.value);
+    useEffect(() => {
+        if (prev !== args.value)
+            setValue(args.value);
+    }, [prev, args.value]);
+    return (<WeekInput additionalInfo={args.showAdditionalInfo
+            ? {
+                heading: 'Additional Info',
+                content: 'Select a date'
+            }
+            : undefined} value={value} status={args.status} label={args.label} labelHidden={args.labelHidden} required={args.required} disabled={args.disabled} readOnly={args.readOnly} min={args.min} max={args.max} onBlur={({ valueAsISOString, state }) => {
+            if (state !== 'incomplete' && state !== 'invalid')
+                setValue(valueAsISOString);
+        }}/>);
 };
 WeekInputDemo.args = {
     label: 'Week input'
 };
+WeekInputDemo.argTypes = {
+    label: { control: { type: 'string' } }
+};
 export const QuarterInputDemo = (args) => {
-    return (<QuarterInput value={new Date()} status={args.status} label={args.label} labelHidden={args.labelHidden} required={args.required} disabled={args.disabled} readOnly={args.readOnly} min={args.min} max={args.max}/>);
+    const [value, setValue] = useState(args.value);
+    const prev = usePrevious(args.value);
+    useEffect(() => {
+        if (prev !== args.value)
+            setValue(args.value);
+    }, [prev, args.value]);
+    return (<QuarterInput additionalInfo={args.showAdditionalInfo
+            ? {
+                heading: 'Additional Info',
+                content: 'Select a date'
+            }
+            : undefined} value={value} status={args.status} label={args.label} labelHidden={args.labelHidden} required={args.required} disabled={args.disabled} readOnly={args.readOnly} min={args.min} max={args.max} onBlur={({ valueAsISOString, state }) => {
+            if (state !== 'incomplete' && state !== 'invalid')
+                setValue(valueAsISOString);
+        }}/>);
 };
 QuarterInputDemo.args = {
     label: 'Quarter input'
 };
+QuarterInputDemo.argTypes = {
+    label: { control: { type: 'string' } }
+};
 export const DayOfWeekInputDemo = (args) => {
-    return (<DayOfWeekInput status={args.status} label={args.label} labelHidden={args.labelHidden} required={args.required} disabled={args.disabled} readOnly={args.readOnly}/>);
+    const [value, setValue] = useState(args.value);
+    const prev = usePrevious(args.value);
+    useEffect(() => {
+        if (prev !== args.value)
+            setValue(args.value);
+    }, [prev, args.value]);
+    return (<DayOfWeekInput additionalInfo={args.showAdditionalInfo
+            ? {
+                heading: 'Additional Info',
+                content: 'Select a date'
+            }
+            : undefined} value={value} status={args.status} label={args.label} labelHidden={args.labelHidden} required={args.required} disabled={args.disabled} readOnly={args.readOnly} onChange={setValue}/>);
 };
 DayOfWeekInputDemo.args = {
     label: 'Day of the week input'
@@ -62,7 +147,21 @@ DayOfWeekInputDemo.argTypes = {
     max: { table: { disable: true } }
 };
 export const TimeInputDemo = (args) => {
-    return (<TimeInput value={new Date()} withSeconds={args.withSeconds} clockFormat={args.clockFormat} pickerInterval={args.pickerInterval} status={args.status} label={args.label} labelHidden={args.labelHidden} required={args.required} disabled={args.disabled} readOnly={args.readOnly} min={args.min} max={args.max}/>);
+    const [value, setValue] = useState(args.value);
+    const prev = usePrevious(args.value);
+    useEffect(() => {
+        if (prev !== args.value)
+            setValue(args.value);
+    }, [prev, args.value]);
+    return (<TimeInput additionalInfo={args.showAdditionalInfo
+            ? {
+                heading: 'Additional Info',
+                content: 'Select a date'
+            }
+            : undefined} value={value} withSeconds={args.withSeconds} clockFormat={args.clockFormat} pickerInterval={args.pickerInterval} status={args.status} label={args.label} labelHidden={args.labelHidden} required={args.required} disabled={args.disabled} readOnly={args.readOnly} min={args.min} max={args.max} onBlur={({ valueAsISOString, state }) => {
+            if (state !== 'incomplete' && state !== 'invalid')
+                setValue(valueAsISOString);
+        }}/>);
 };
 TimeInputDemo.args = {
     withSeconds: false,
@@ -76,7 +175,21 @@ TimeInputDemo.argTypes = {
     pickerInterval: { options: [undefined, 15, 30, 60], control: { type: 'select' } }
 };
 export const DateTimeInputDemo = (args) => {
-    return (<DateTimeInput value={new Date()} showWeekNumber={args.showWeekNumber} withSeconds={args.withSeconds} clockFormat={args.clockFormat} pickerInterval={args.pickerInterval} status={args.status} label={args.label} labelHidden={args.labelHidden} required={args.required} disabled={args.disabled} readOnly={args.readOnly} min={args.min} max={args.max}/>);
+    const [value, setValue] = useState(args.value);
+    const prev = usePrevious(args.value);
+    useEffect(() => {
+        if (prev !== args.value)
+            setValue(args.value);
+    }, [prev, args.value]);
+    return (<DateTimeInput additionalInfo={args.showAdditionalInfo
+            ? {
+                heading: 'Additional Info',
+                content: 'Select a date'
+            }
+            : undefined} value={value} showWeekNumber={args.showWeekNumber} withSeconds={args.withSeconds} clockFormat={args.clockFormat} pickerInterval={args.pickerInterval} status={args.status} label={args.label} labelHidden={args.labelHidden} required={args.required} disabled={args.disabled} readOnly={args.readOnly} min={args.min} max={args.max} onBlur={({ valueAsISOString, state }) => {
+            if (state !== 'incomplete' && state !== 'invalid')
+                setValue(valueAsISOString);
+        }}/>);
 };
 DateTimeInputDemo.args = {
     showWeekNumber: false,
@@ -92,24 +205,82 @@ DateTimeInputDemo.argTypes = {
     pickerInterval: { options: [undefined, 15, 30, 60], control: { type: 'select' } }
 };
 export const DateRangeInputDemo = (args) => {
-    return (<DateRangeInput fromValue={new Date()} toValue={new Date()} showWeekNumber={args.showWeekNumber} status={args.status} fromLabel={args.fromLabel} toLabel={args.toLabel} labelHidden={args.labelHidden} required={args.required} disabled={args.disabled} readOnly={args.readOnly}/>);
+    const [value, setValue] = useState(args.value);
+    const prev = usePrevious(args.value);
+    useEffect(() => {
+        if (prev !== args.value)
+            setValue(args.value);
+    }, [prev, args.value]);
+    return (<DateRangeInput toAdditionalInfo={args.showToAdditionalInfo
+            ? {
+                heading: 'Additional Info',
+                content: 'Select a to date'
+            }
+            : undefined} fromAdditionalInfo={args.showFromAdditionalInfo
+            ? {
+                heading: 'Additional Info',
+                content: 'Select a from date'
+            }
+            : undefined} value={value} onChange={({ start, end }) => {
+            if (!start.state && !end.state)
+                setValue({ start: start.valueAsISOString, end: end.valueAsISOString });
+        }} showWeekNumber={args.showWeekNumber} status={args.status} label={args.label} fromLabel={args.fromLabel} toLabel={args.toLabel} labelHidden={args.labelHidden} required={args.required} disabled={args.disabled} readOnly={args.readOnly}/>);
 };
 DateRangeInputDemo.args = {
     showWeekNumber: false,
+    label: 'Dates of stay',
     fromLabel: 'Check in',
-    toLabel: 'Check out'
+    toLabel: 'Check out',
+    showFromAdditionalInfo: true,
+    showToAdditionalInfo: true
 };
 DateRangeInputDemo.argTypes = {
     showWeekNumber: { control: { type: 'boolean' } },
+    label: { control: { type: 'text' } },
     fromLabel: { control: { type: 'text' } },
     toLabel: { control: { type: 'text' } },
-    label: { table: { disable: true } },
     min: { table: { disable: true } },
-    max: { table: { disable: true } }
+    max: { table: { disable: true } },
+    showAdditionalInfo: { table: { disable: true } },
+    showFromAdditionalInfo: { control: { type: 'boolean' } },
+    showToAdditionalInfo: { control: { type: 'boolean' } }
+};
+export const TimeRangeInputDemo = (args) => {
+    const [value, setValue] = useState(args.value);
+    const prevValue = usePrevious(args.value);
+    useEffect(() => {
+        if (prevValue?.start !== args.value?.start || prevValue?.end !== args.value?.end) {
+            setValue(args.value);
+        }
+    }, [prevValue?.start, prevValue?.end, args.value?.start, args.value?.end]);
+    return (<TimeRangeInput value={value} onChange={newState => setValue({ start: newState.start.valueAsTimestamp, end: newState.end.valueAsTimestamp })} label={args.label} status={args.status} fromLabel={args.fromLabel} toLabel={args.toLabel} labelHidden={args.labelHidden} required={args.required} disabled={args.disabled} readOnly={args.readOnly} mode={args.mode} withSeconds={args.withSeconds}/>);
+};
+TimeRangeInputDemo.args = {
+    fromLabel: 'Meeting start',
+    toLabel: 'Meeting end',
+    withSeconds: false
+};
+TimeRangeInputDemo.argTypes = {
+    fromLabel: { control: { type: 'text' } },
+    toLabel: { control: { type: 'text' } },
+    label: { control: { type: 'text' } },
+    min: { table: { disable: true } },
+    max: { table: { disable: true } },
+    withSeconds: { control: { type: 'boolean' } }
 };
 export const DurationInputDemo = (args) => {
     const [value, setValue] = useState(args.value);
-    return (<DurationInput value={value} onChange={setValue} format={args.format} status={args.status} label={args.label} labelHidden={args.labelHidden} required={args.required} disabled={args.disabled} readOnly={args.readOnly}/>);
+    const prev = usePrevious(args.value);
+    useEffect(() => {
+        if (prev !== args.value)
+            setValue(args.value);
+    }, [prev, args.value]);
+    return (<DurationInput additionalInfo={args.showAdditionalInfo
+            ? {
+                heading: 'Additional Info',
+                content: 'Select a duration'
+            }
+            : undefined} value={value} onChange={setValue} format={args.format} status={args.status} label={args.label} labelHidden={args.labelHidden} required={args.required} disabled={args.disabled} readOnly={args.readOnly}/>);
 };
 DurationInputDemo.args = {
     value: 86400000,

package/jsx/core/DateTime/DateTime.stories.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"DateTime.stories.jsx","sourceRoot":"","sources":["../../../src/core/DateTime/DateTime.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjC,OAAO,EACL,SAAS,EAET,aAAa,EAEb,cAAc,EAEd,cAAc,EAEd,aAAa,EAEb,MAAM,EACN,UAAU,EAEV,YAAY,EAEZ,SAAS,EAET,SAAS,EAEV,MAAM,yBAAyB,CAAC;AAEjC,eAAe;IACb,KAAK,EAAE,qBAAqB;IAC5B,IAAI,EAAE;QACJ,MAAM,EAAE,SAAS;QACjB,KAAK,EAAE,EAAE;QACT,WAAW,EAAE,KAAK;QAClB,QAAQ,EAAE,KAAK;QACf,QAAQ,EAAE,KAAK;QACf,QAAQ,EAAE,KAAK;QACf,GAAG,EAAE,SAAS;QACd,GAAG,EAAE,SAAS;KACf;IACD,QAAQ,EAAE;QACR,MAAM,EAAE,EAAE,OAAO,EAAE,CAAC,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,OAAO,CAAC,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;QAC5F,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;QACpC,WAAW,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;QAC7C,QAAQ,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;QAC1C,QAAQ,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;QAC1C,QAAQ,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;QAC1C,GAAG,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;QAClC,GAAG,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;KACnC;CACM,CAAC;AAEV,MAAM,CAAC,MAAM,aAAa,GAA0B,CAAC,IAAoB,EAAE,EAAE;IAC3E,OAAO,CACL,CAAC,SAAS,CACR,KAAK,CAAC,CAAC,IAAI,IAAI,EAAE,CAAC,CAClB,cAAc,CAAC,CAAC,IAAI,CAAC,cAAc,CAAC,CACpC,MAAM,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CACpB,KAAK,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAClB,WAAW,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,CAC9B,QAAQ,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CACxB,QAAQ,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CACxB,QAAQ,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CACxB,GAAG,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CACd,GAAG,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,EACd,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,aAAa,CAAC,IAAI,GAAG;IACnB,cAAc,EAAE,KAAK;IACrB,KAAK,EAAE,YAAY;CACpB,CAAC;AAEF,aAAa,CAAC,QAAQ,GAAG;IACvB,cAAc,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;CACjD,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAA2B,CAAC,IAAqB,EAAE,EAAE;IAC9E,OAAO,CACL,CAAC,UAAU,CACT,KAAK,CAAC,CAAC,IAAI,IAAI,EAAE,CAAC,CAClB,MAAM,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CACpB,KAAK,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAClB,WAAW,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,CAC9B,QAAQ,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CACxB,QAAQ,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CACxB,QAAQ,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CACxB,GAAG,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CACd,GAAG,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,EACd,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,cAAc,CAAC,IAAI,GAAG;IACpB,KAAK,EAAE,aAAa;CACrB,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAA0B,CAAC,IAAoB,EAAE,EAAE;IAC3E,OAAO,CACL,CAAC,SAAS,CACR,KAAK,CAAC,CAAC,IAAI,IAAI,EAAE,CAAC,CAClB,MAAM,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CACpB,KAAK,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAClB,WAAW,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,CAC9B,QAAQ,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CACxB,QAAQ,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CACxB,QAAQ,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CACxB,GAAG,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CACd,GAAG,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,EACd,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,aAAa,CAAC,IAAI,GAAG;IACnB,KAAK,EAAE,YAAY;CACpB,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAA6B,CAAC,IAAuB,EAAE,EAAE;IACpF,OAAO,CACL,CAAC,YAAY,CACX,KAAK,CAAC,CAAC,IAAI,IAAI,EAAE,CAAC,CAClB,MAAM,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CACpB,KAAK,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAClB,WAAW,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,CAC9B,QAAQ,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CACxB,QAAQ,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CACxB,QAAQ,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CACxB,GAAG,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CACd,GAAG,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,EACd,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,gBAAgB,CAAC,IAAI,GAAG;IACtB,KAAK,EAAE,eAAe;CACvB,CAAC;AAEF,MAAM,CAAC,MAAM,kBAAkB,GAA8D,CAC3F,IAAyB,EACzB,EAAE;IACF,OAAO,CACL,CAAC,cAAc,CACb,MAAM,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CACpB,KAAK,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAClB,WAAW,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,CAC9B,QAAQ,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CACxB,QAAQ,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CACxB,QAAQ,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,EACxB,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAkB,CAAC,IAAI,GAAG;IACxB,KAAK,EAAE,uBAAuB;CAC/B,CAAC;AAEF,kBAAkB,CAAC,QAAQ,GAAG;IAC5B,GAAG,EAAE,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE;IACjC,GAAG,EAAE,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE;CAClC,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAA0B,CAAC,IAAoB,EAAE,EAAE;IAC3E,OAAO,CACL,CAAC,SAAS,CACR,KAAK,CAAC,CAAC,IAAI,IAAI,EAAE,CAAC,CAClB,WAAW,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,CAC9B,WAAW,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,CAC9B,cAAc,CAAC,CAAC,IAAI,CAAC,cAAc,CAAC,CACpC,MAAM,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CACpB,KAAK,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAClB,WAAW,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,CAC9B,QAAQ,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CACxB,QAAQ,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CACxB,QAAQ,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CACxB,GAAG,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CACd,GAAG,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,EACd,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,aAAa,CAAC,IAAI,GAAG;IACnB,WAAW,EAAE,KAAK;IAClB,WAAW,EAAE,SAAS;IACtB,cAAc,EAAE,EAAE;IAClB,KAAK,EAAE,YAAY;CACpB,CAAC;AAEF,aAAa,CAAC,QAAQ,GAAG;IACvB,WAAW,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAC7C,WAAW,EAAE,EAAE,OAAO,EAAE,CAAC,SAAS,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;IAC1E,cAAc,EAAE,EAAE,OAAO,EAAE,CAAC,SAAS,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;CAClF,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAA8B,CAAC,IAAwB,EAAE,EAAE;IACvF,OAAO,CACL,CAAC,aAAa,CACZ,KAAK,CAAC,CAAC,IAAI,IAAI,EAAE,CAAC,CAClB,cAAc,CAAC,CAAC,IAAI,CAAC,cAAc,CAAC,CACpC,WAAW,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,CAC9B,WAAW,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,CAC9B,cAAc,CAAC,CAAC,IAAI,CAAC,cAAc,CAAC,CACpC,MAAM,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CACpB,KAAK,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAClB,WAAW,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,CAC9B,QAAQ,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CACxB,QAAQ,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CACxB,QAAQ,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CACxB,GAAG,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CACd,GAAG,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,EACd,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,iBAAiB,CAAC,IAAI,GAAG;IACvB,cAAc,EAAE,KAAK;IACrB,WAAW,EAAE,KAAK;IAClB,WAAW,EAAE,SAAS;IACtB,cAAc,EAAE,EAAE;IAClB,KAAK,EAAE,gBAAgB;CACxB,CAAC;AAEF,iBAAiB,CAAC,QAAQ,GAAG;IAC3B,cAAc,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAChD,WAAW,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAC7C,WAAW,EAAE,EAAE,OAAO,EAAE,CAAC,SAAS,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;IAC1E,cAAc,EAAE,EAAE,OAAO,EAAE,CAAC,SAAS,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;CAClF,CAAC;AAEF,MAAM,CAAC,MAAM,kBAAkB,GAA+B,CAAC,IAAyB,EAAE,EAAE;IAC1F,OAAO,CACL,CAAC,cAAc,CACb,SAAS,CAAC,CAAC,IAAI,IAAI,EAAE,CAAC,CACtB,OAAO,CAAC,CAAC,IAAI,IAAI,EAAE,CAAC,CACpB,cAAc,CAAC,CAAC,IAAI,CAAC,cAAc,CAAC,CACpC,MAAM,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CACpB,SAAS,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,CAC1B,OAAO,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CACtB,WAAW,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,CAC9B,QAAQ,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CACxB,QAAQ,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CACxB,QAAQ,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,EACxB,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAkB,CAAC,IAAI,GAAG;IACxB,cAAc,EAAE,KAAK;IACrB,SAAS,EAAE,UAAU;IACrB,OAAO,EAAE,WAAW;CACrB,CAAC;AAEF,kBAAkB,CAAC,QAAQ,GAAG;IAC5B,cAAc,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAChD,SAAS,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IACxC,OAAO,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IACtC,KAAK,EAAE,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE;IACnC,GAAG,EAAE,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE;IACjC,GAAG,EAAE,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE;CAClC,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAA6D,CACzF,IAAwB,EACxB,EAAE;IACF,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC/C,OAAO,CACL,CAAC,aAAa,CACZ,KAAK,CAAC,CAAC,KAAK,CAAC,CACb,QAAQ,CAAC,CAAC,QAAQ,CAAC,CACnB,MAAM,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CACpB,MAAM,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CACpB,KAAK,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAClB,WAAW,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,CAC9B,QAAQ,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CACxB,QAAQ,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CACxB,QAAQ,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,EACxB,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,iBAAiB,CAAC,IAAI,GAAG;IACvB,KAAK,EAAE,QAAQ;IAEf,MAAM,EAAE,MAAM,CAAC,OAAO;IACtB,KAAK,EAAE,gBAAgB;CACxB,CAAC;AAEF,iBAAiB,CAAC,QAAQ,GAAG;IAC3B,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;IACtC,MAAM,EAAE;QACN,OAAO,EAAE,CAAC,MAAM,CAAC,OAAO,EAAE,MAAM,CAAC,OAAO,EAAE,MAAM,CAAC,KAAK,EAAE,MAAM,CAAC,IAAI,EAAE,MAAM,CAAC,SAAS,CAAC;QACtF,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;KAC5B;IACD,GAAG,EAAE,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE;IACjC,GAAG,EAAE,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE;CAClC,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useState } from 'react';\n\nimport {\n  DateInput,\n  DateInputProps,\n  DateTimeInput,\n  DateTimeInputProps,\n  DateRangeInput,\n  DateRangeInputProps,\n  DayOfWeekInput,\n  DayOfWeekInputProps,\n  DurationInput,\n  DurationInputProps,\n  Format,\n  MonthInput,\n  MonthInputProps,\n  QuarterInput,\n  QuarterInputProps,\n  TimeInput,\n  TimeInputProps,\n  WeekInput,\n  WeekInputProps\n} from '@pega/cosmos-react-core';\n\nexport default {\n  title: 'Core/DateTime/Input',\n  args: {\n    status: undefined,\n    label: '',\n    labelHidden: false,\n    required: false,\n    disabled: false,\n    readOnly: false,\n    min: undefined,\n    max: undefined\n  },\n  argTypes: {\n    status: { options: [undefined, 'success', 'warning', 'error'], control: { type: 'select' } },\n    label: { control: { type: 'text' } },\n    labelHidden: { control: { type: 'boolean' } },\n    required: { control: { type: 'boolean' } },\n    disabled: { control: { type: 'boolean' } },\n    readOnly: { control: { type: 'boolean' } },\n    min: { control: { type: 'date' } },\n    max: { control: { type: 'date' } }\n  }\n} as Meta;\n\nexport const DateInputDemo: Story<DateInputProps> = (args: DateInputProps) => {\n  return (\n    <DateInput\n      value={new Date()}\n      showWeekNumber={args.showWeekNumber}\n      status={args.status}\n      label={args.label}\n      labelHidden={args.labelHidden}\n      required={args.required}\n      disabled={args.disabled}\n      readOnly={args.readOnly}\n      min={args.min}\n      max={args.max}\n    />\n  );\n};\n\nDateInputDemo.args = {\n  showWeekNumber: false,\n  label: 'Date input'\n};\n\nDateInputDemo.argTypes = {\n  showWeekNumber: { control: { type: 'boolean' } }\n};\n\nexport const MonthInputDemo: Story<MonthInputProps> = (args: MonthInputProps) => {\n  return (\n    <MonthInput\n      value={new Date()}\n      status={args.status}\n      label={args.label}\n      labelHidden={args.labelHidden}\n      required={args.required}\n      disabled={args.disabled}\n      readOnly={args.readOnly}\n      min={args.min}\n      max={args.max}\n    />\n  );\n};\n\nMonthInputDemo.args = {\n  label: 'Month input'\n};\n\nexport const WeekInputDemo: Story<WeekInputProps> = (args: WeekInputProps) => {\n  return (\n    <WeekInput\n      value={new Date()}\n      status={args.status}\n      label={args.label}\n      labelHidden={args.labelHidden}\n      required={args.required}\n      disabled={args.disabled}\n      readOnly={args.readOnly}\n      min={args.min}\n      max={args.max}\n    />\n  );\n};\n\nWeekInputDemo.args = {\n  label: 'Week input'\n};\n\nexport const QuarterInputDemo: Story<QuarterInputProps> = (args: QuarterInputProps) => {\n  return (\n    <QuarterInput\n      value={new Date()}\n      status={args.status}\n      label={args.label}\n      labelHidden={args.labelHidden}\n      required={args.required}\n      disabled={args.disabled}\n      readOnly={args.readOnly}\n      min={args.min}\n      max={args.max}\n    />\n  );\n};\n\nQuarterInputDemo.args = {\n  label: 'Quarter input'\n};\n\nexport const DayOfWeekInputDemo: Story<DayOfWeekInputProps & { min?: never; max?: never }> = (\n  args: DayOfWeekInputProps\n) => {\n  return (\n    <DayOfWeekInput\n      status={args.status}\n      label={args.label}\n      labelHidden={args.labelHidden}\n      required={args.required}\n      disabled={args.disabled}\n      readOnly={args.readOnly}\n    />\n  );\n};\n\nDayOfWeekInputDemo.args = {\n  label: 'Day of the week input'\n};\n\nDayOfWeekInputDemo.argTypes = {\n  min: { table: { disable: true } },\n  max: { table: { disable: true } }\n};\n\nexport const TimeInputDemo: Story<TimeInputProps> = (args: TimeInputProps) => {\n  return (\n    <TimeInput\n      value={new Date()}\n      withSeconds={args.withSeconds}\n      clockFormat={args.clockFormat}\n      pickerInterval={args.pickerInterval}\n      status={args.status}\n      label={args.label}\n      labelHidden={args.labelHidden}\n      required={args.required}\n      disabled={args.disabled}\n      readOnly={args.readOnly}\n      min={args.min}\n      max={args.max}\n    />\n  );\n};\n\nTimeInputDemo.args = {\n  withSeconds: false,\n  clockFormat: undefined,\n  pickerInterval: 30,\n  label: 'Time input'\n};\n\nTimeInputDemo.argTypes = {\n  withSeconds: { control: { type: 'boolean' } },\n  clockFormat: { options: [undefined, 12, 24], control: { type: 'select' } },\n  pickerInterval: { options: [undefined, 15, 30, 60], control: { type: 'select' } }\n};\n\nexport const DateTimeInputDemo: Story<DateTimeInputProps> = (args: DateTimeInputProps) => {\n  return (\n    <DateTimeInput\n      value={new Date()}\n      showWeekNumber={args.showWeekNumber}\n      withSeconds={args.withSeconds}\n      clockFormat={args.clockFormat}\n      pickerInterval={args.pickerInterval}\n      status={args.status}\n      label={args.label}\n      labelHidden={args.labelHidden}\n      required={args.required}\n      disabled={args.disabled}\n      readOnly={args.readOnly}\n      min={args.min}\n      max={args.max}\n    />\n  );\n};\n\nDateTimeInputDemo.args = {\n  showWeekNumber: false,\n  withSeconds: false,\n  clockFormat: undefined,\n  pickerInterval: 30,\n  label: 'DateTime input'\n};\n\nDateTimeInputDemo.argTypes = {\n  showWeekNumber: { control: { type: 'boolean' } },\n  withSeconds: { control: { type: 'boolean' } },\n  clockFormat: { options: [undefined, 12, 24], control: { type: 'select' } },\n  pickerInterval: { options: [undefined, 15, 30, 60], control: { type: 'select' } }\n};\n\nexport const DateRangeInputDemo: Story<DateRangeInputProps> = (args: DateRangeInputProps) => {\n  return (\n    <DateRangeInput\n      fromValue={new Date()}\n      toValue={new Date()}\n      showWeekNumber={args.showWeekNumber}\n      status={args.status}\n      fromLabel={args.fromLabel}\n      toLabel={args.toLabel}\n      labelHidden={args.labelHidden}\n      required={args.required}\n      disabled={args.disabled}\n      readOnly={args.readOnly}\n    />\n  );\n};\n\nDateRangeInputDemo.args = {\n  showWeekNumber: false,\n  fromLabel: 'Check in',\n  toLabel: 'Check out'\n};\n\nDateRangeInputDemo.argTypes = {\n  showWeekNumber: { control: { type: 'boolean' } },\n  fromLabel: { control: { type: 'text' } },\n  toLabel: { control: { type: 'text' } },\n  label: { table: { disable: true } },\n  min: { table: { disable: true } },\n  max: { table: { disable: true } }\n};\n\nexport const DurationInputDemo: Story<DurationInputProps & { min?: never; max?: never }> = (\n  args: DurationInputProps\n) => {\n  const [value, setValue] = useState(args.value);\n  return (\n    <DurationInput\n      value={value}\n      onChange={setValue}\n      format={args.format}\n      status={args.status}\n      label={args.label}\n      labelHidden={args.labelHidden}\n      required={args.required}\n      disabled={args.disabled}\n      readOnly={args.readOnly}\n    />\n  );\n};\n\nDurationInputDemo.args = {\n  value: 86400000,\n  // eslint-disable-next-line demo-patterns/literal-args\n  format: Format.Seconds,\n  label: 'Duration input'\n};\n\nDurationInputDemo.argTypes = {\n  value: { control: { type: 'number' } },\n  format: {\n    options: [Format.Seconds, Format.Minutes, Format.Hours, Format.Days, Format.Formatted],\n    control: { type: 'select' }\n  },\n  min: { table: { disable: true } },\n  max: { table: { disable: true } }\n};\n"]}
+{"version":3,"file":"DateTime.stories.jsx","sourceRoot":"","sources":["../../../src/core/DateTime/DateTime.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useEffect, useState } from 'react';\n\nimport {\n  DateInput,\n  DateInputProps,\n  DateTimeInput,\n  DateTimeInputProps,\n  DateRangeInput,\n  DateRangeInputProps,\n  DayOfWeekInput,\n  DayOfWeekInputProps,\n  DurationInput,\n  DurationInputProps,\n  Format,\n  MonthInput,\n  MonthInputProps,\n  QuarterInput,\n  QuarterInputProps,\n  TimeInput,\n  TimeInputProps,\n  WeekInput,\n  WeekInputProps,\n  usePrevious,\n  TimeRangeInputProps,\n  TimeRangeInput\n} from '@pega/cosmos-react-core';\n\nexport default {\n  title: 'Core/DateTime/Input',\n  args: {\n    value: undefined,\n    status: undefined,\n    label: '',\n    labelHidden: false,\n    required: false,\n    disabled: false,\n    readOnly: false,\n    min: undefined,\n    max: undefined,\n    showAdditionalInfo: true,\n    mode: 'time'\n  },\n  argTypes: {\n    value: { control: { type: 'date' } },\n    status: {\n      options: [undefined, 'success', 'warning', 'error', 'pending'],\n      control: { type: 'select' }\n    },\n    label: { control: { type: 'text' } },\n    labelHidden: { control: { type: 'boolean' } },\n    required: { control: { type: 'boolean' } },\n    disabled: { control: { type: 'boolean' } },\n    readOnly: { control: { type: 'boolean' } },\n    min: { control: { type: 'date' } },\n    max: { control: { type: 'date' } },\n    showAdditionalInfo: { control: { type: 'boolean' } },\n    mode: { options: ['time', 'datetime'], control: { type: 'select' } }\n  }\n} as Meta;\n\ninterface DateInputStoryProps extends DateInputProps {\n  showAdditionalInfo?: boolean;\n}\n\ninterface MonthInputStoryProps extends MonthInputProps {\n  showAdditionalInfo?: boolean;\n}\n\ninterface WeekInputStoryProps extends WeekInputProps {\n  showAdditionalInfo?: boolean;\n}\n\ninterface QuarterInputStoryProps extends QuarterInputProps {\n  showAdditionalInfo?: boolean;\n}\n\ninterface DayOfWeekInputStoryProps extends DayOfWeekInputProps {\n  showAdditionalInfo?: boolean;\n}\n\ninterface TimeInputStoryProps extends TimeInputProps {\n  showAdditionalInfo?: boolean;\n}\n\ninterface DateTimeInputStoryProps extends DateTimeInputProps {\n  showAdditionalInfo?: boolean;\n  showWeekNumber?: boolean;\n}\n\ninterface DateRangeInputStoryProps extends DateRangeInputProps {\n  showAdditionalInfo?: boolean;\n  showToAdditionalInfo?: boolean;\n  showFromAdditionalInfo?: boolean;\n}\n\ninterface DurationInputStoryProps extends DurationInputProps {\n  showAdditionalInfo?: boolean;\n}\n\nexport const DateInputDemo: Story<DateInputStoryProps> = (args: DateInputStoryProps) => {\n  const [value, setValue] = useState<DateInputProps['value']>(args.value);\n\n  const prev = usePrevious(args.value);\n  useEffect(() => {\n    if (prev !== args.value) setValue(args.value);\n  }, [prev, args.value]);\n\n  return (\n    <DateInput\n      additionalInfo={\n        args.showAdditionalInfo\n          ? {\n              heading: 'Additional Info',\n              content: 'Select a date'\n            }\n          : undefined\n      }\n      value={value}\n      showWeekNumber={args.showWeekNumber}\n      status={args.status}\n      label={args.label}\n      labelHidden={args.labelHidden}\n      required={args.required}\n      disabled={args.disabled}\n      readOnly={args.readOnly}\n      min={args.min}\n      max={args.max}\n      onBlur={({ valueAsISOString, state }) => {\n        if (state !== 'incomplete' && state !== 'invalid') setValue(valueAsISOString);\n      }}\n    />\n  );\n};\n\nDateInputDemo.args = {\n  showWeekNumber: false,\n  label: 'Date input'\n};\n\nDateInputDemo.argTypes = {\n  showWeekNumber: { control: { type: 'boolean' } }\n};\n\nexport const MonthInputDemo: Story<MonthInputStoryProps> = (args: MonthInputStoryProps) => {\n  const [value, setValue] = useState<MonthInputProps['value']>(args.value);\n\n  const prev = usePrevious(args.value);\n  useEffect(() => {\n    if (prev !== args.value) setValue(args.value);\n  }, [prev, args.value]);\n\n  return (\n    <MonthInput\n      additionalInfo={\n        args.showAdditionalInfo\n          ? {\n              heading: 'Additional Info',\n              content: 'Select a date'\n            }\n          : undefined\n      }\n      value={value}\n      status={args.status}\n      label={args.label}\n      labelHidden={args.labelHidden}\n      required={args.required}\n      disabled={args.disabled}\n      readOnly={args.readOnly}\n      min={args.min}\n      max={args.max}\n      onBlur={({ valueAsISOString, state }) => {\n        if (state !== 'incomplete' && state !== 'invalid') setValue(valueAsISOString);\n      }}\n    />\n  );\n};\n\nMonthInputDemo.args = {\n  label: 'Month input'\n};\n\nMonthInputDemo.argTypes = {\n  label: { control: { type: 'string' } }\n};\n\nexport const WeekInputDemo: Story<WeekInputStoryProps> = (args: WeekInputStoryProps) => {\n  const [value, setValue] = useState<WeekInputProps['value']>(args.value);\n\n  const prev = usePrevious(args.value);\n  useEffect(() => {\n    if (prev !== args.value) setValue(args.value);\n  }, [prev, args.value]);\n\n  return (\n    <WeekInput\n      additionalInfo={\n        args.showAdditionalInfo\n          ? {\n              heading: 'Additional Info',\n              content: 'Select a date'\n            }\n          : undefined\n      }\n      value={value}\n      status={args.status}\n      label={args.label}\n      labelHidden={args.labelHidden}\n      required={args.required}\n      disabled={args.disabled}\n      readOnly={args.readOnly}\n      min={args.min}\n      max={args.max}\n      onBlur={({ valueAsISOString, state }) => {\n        if (state !== 'incomplete' && state !== 'invalid') setValue(valueAsISOString);\n      }}\n    />\n  );\n};\n\nWeekInputDemo.args = {\n  label: 'Week input'\n};\n\nWeekInputDemo.argTypes = {\n  label: { control: { type: 'string' } }\n};\n\nexport const QuarterInputDemo: Story<QuarterInputStoryProps> = (args: QuarterInputStoryProps) => {\n  const [value, setValue] = useState<QuarterInputProps['value']>(args.value);\n\n  const prev = usePrevious(args.value);\n  useEffect(() => {\n    if (prev !== args.value) setValue(args.value);\n  }, [prev, args.value]);\n\n  return (\n    <QuarterInput\n      additionalInfo={\n        args.showAdditionalInfo\n          ? {\n              heading: 'Additional Info',\n              content: 'Select a date'\n            }\n          : undefined\n      }\n      value={value}\n      status={args.status}\n      label={args.label}\n      labelHidden={args.labelHidden}\n      required={args.required}\n      disabled={args.disabled}\n      readOnly={args.readOnly}\n      min={args.min}\n      max={args.max}\n      onBlur={({ valueAsISOString, state }) => {\n        if (state !== 'incomplete' && state !== 'invalid') setValue(valueAsISOString);\n      }}\n    />\n  );\n};\n\nQuarterInputDemo.args = {\n  label: 'Quarter input'\n};\n\nQuarterInputDemo.argTypes = {\n  label: { control: { type: 'string' } }\n};\n\nexport const DayOfWeekInputDemo: Story<DayOfWeekInputStoryProps & { min?: never; max?: never }> = (\n  args: DayOfWeekInputStoryProps\n) => {\n  const [value, setValue] = useState<DayOfWeekInputProps['value']>(args.value);\n\n  const prev = usePrevious(args.value);\n  useEffect(() => {\n    if (prev !== args.value) setValue(args.value);\n  }, [prev, args.value]);\n\n  return (\n    <DayOfWeekInput\n      additionalInfo={\n        args.showAdditionalInfo\n          ? {\n              heading: 'Additional Info',\n              content: 'Select a date'\n            }\n          : undefined\n      }\n      value={value}\n      status={args.status}\n      label={args.label}\n      labelHidden={args.labelHidden}\n      required={args.required}\n      disabled={args.disabled}\n      readOnly={args.readOnly}\n      onChange={setValue}\n    />\n  );\n};\n\nDayOfWeekInputDemo.args = {\n  label: 'Day of the week input'\n};\n\nDayOfWeekInputDemo.argTypes = {\n  min: { table: { disable: true } },\n  max: { table: { disable: true } }\n};\n\nexport const TimeInputDemo: Story<TimeInputStoryProps> = (args: TimeInputStoryProps) => {\n  const [value, setValue] = useState<TimeInputProps['value']>(args.value);\n\n  const prev = usePrevious(args.value);\n  useEffect(() => {\n    if (prev !== args.value) setValue(args.value);\n  }, [prev, args.value]);\n\n  return (\n    <TimeInput\n      additionalInfo={\n        args.showAdditionalInfo\n          ? {\n              heading: 'Additional Info',\n              content: 'Select a date'\n            }\n          : undefined\n      }\n      value={value}\n      withSeconds={args.withSeconds}\n      clockFormat={args.clockFormat}\n      pickerInterval={args.pickerInterval}\n      status={args.status}\n      label={args.label}\n      labelHidden={args.labelHidden}\n      required={args.required}\n      disabled={args.disabled}\n      readOnly={args.readOnly}\n      min={args.min}\n      max={args.max}\n      onBlur={({ valueAsISOString, state }) => {\n        if (state !== 'incomplete' && state !== 'invalid') setValue(valueAsISOString);\n      }}\n    />\n  );\n};\n\nTimeInputDemo.args = {\n  withSeconds: false,\n  clockFormat: undefined,\n  pickerInterval: 30,\n  label: 'Time input'\n};\n\nTimeInputDemo.argTypes = {\n  withSeconds: { control: { type: 'boolean' } },\n  clockFormat: { options: [undefined, 12, 24], control: { type: 'select' } },\n  pickerInterval: { options: [undefined, 15, 30, 60], control: { type: 'select' } }\n};\n\nexport const DateTimeInputDemo: Story<DateTimeInputStoryProps> = (\n  args: DateTimeInputStoryProps\n) => {\n  const [value, setValue] = useState<DateTimeInputProps['value']>(args.value);\n\n  const prev = usePrevious(args.value);\n  useEffect(() => {\n    if (prev !== args.value) setValue(args.value);\n  }, [prev, args.value]);\n\n  return (\n    <DateTimeInput\n      additionalInfo={\n        args.showAdditionalInfo\n          ? {\n              heading: 'Additional Info',\n              content: 'Select a date'\n            }\n          : undefined\n      }\n      value={value}\n      showWeekNumber={args.showWeekNumber}\n      withSeconds={args.withSeconds}\n      clockFormat={args.clockFormat}\n      pickerInterval={args.pickerInterval}\n      status={args.status}\n      label={args.label}\n      labelHidden={args.labelHidden}\n      required={args.required}\n      disabled={args.disabled}\n      readOnly={args.readOnly}\n      min={args.min}\n      max={args.max}\n      onBlur={({ valueAsISOString, state }) => {\n        if (state !== 'incomplete' && state !== 'invalid') setValue(valueAsISOString);\n      }}\n    />\n  );\n};\n\nDateTimeInputDemo.args = {\n  showWeekNumber: false,\n  withSeconds: false,\n  clockFormat: undefined,\n  pickerInterval: 30,\n  label: 'DateTime input'\n};\n\nDateTimeInputDemo.argTypes = {\n  showWeekNumber: { control: { type: 'boolean' } },\n  withSeconds: { control: { type: 'boolean' } },\n  clockFormat: { options: [undefined, 12, 24], control: { type: 'select' } },\n  pickerInterval: { options: [undefined, 15, 30, 60], control: { type: 'select' } }\n};\n\nexport const DateRangeInputDemo: Story<DateRangeInputStoryProps> = (\n  args: DateRangeInputStoryProps\n) => {\n  const [value, setValue] = useState<DateRangeInputProps['value']>(args.value);\n\n  const prev = usePrevious(args.value);\n  useEffect(() => {\n    if (prev !== args.value) setValue(args.value);\n  }, [prev, args.value]);\n\n  return (\n    <DateRangeInput\n      toAdditionalInfo={\n        args.showToAdditionalInfo\n          ? {\n              heading: 'Additional Info',\n              content: 'Select a to date'\n            }\n          : undefined\n      }\n      fromAdditionalInfo={\n        args.showFromAdditionalInfo\n          ? {\n              heading: 'Additional Info',\n              content: 'Select a from date'\n            }\n          : undefined\n      }\n      value={value}\n      onChange={({ start, end }) => {\n        if (!start.state && !end.state)\n          setValue({ start: start.valueAsISOString, end: end.valueAsISOString });\n      }}\n      showWeekNumber={args.showWeekNumber}\n      status={args.status}\n      label={args.label}\n      fromLabel={args.fromLabel}\n      toLabel={args.toLabel}\n      labelHidden={args.labelHidden}\n      required={args.required}\n      disabled={args.disabled}\n      readOnly={args.readOnly}\n    />\n  );\n};\n\nDateRangeInputDemo.args = {\n  showWeekNumber: false,\n  label: 'Dates of stay',\n  fromLabel: 'Check in',\n  toLabel: 'Check out',\n  showFromAdditionalInfo: true,\n  showToAdditionalInfo: true\n};\n\nDateRangeInputDemo.argTypes = {\n  showWeekNumber: { control: { type: 'boolean' } },\n  label: { control: { type: 'text' } },\n  fromLabel: { control: { type: 'text' } },\n  toLabel: { control: { type: 'text' } },\n  min: { table: { disable: true } },\n  max: { table: { disable: true } },\n  showAdditionalInfo: { table: { disable: true } },\n  showFromAdditionalInfo: { control: { type: 'boolean' } },\n  showToAdditionalInfo: { control: { type: 'boolean' } }\n};\n\nexport const TimeRangeInputDemo: Story<TimeRangeInputProps> = (args: TimeRangeInputProps) => {\n  const [value, setValue] = useState(args.value);\n\n  const prevValue = usePrevious(args.value);\n\n  useEffect(() => {\n    if (prevValue?.start !== args.value?.start || prevValue?.end !== args.value?.end) {\n      setValue(args.value);\n    }\n  }, [prevValue?.start, prevValue?.end, args.value?.start, args.value?.end]);\n  return (\n    <TimeRangeInput\n      value={value}\n      onChange={newState =>\n        setValue({ start: newState.start.valueAsTimestamp, end: newState.end.valueAsTimestamp })\n      }\n      label={args.label}\n      status={args.status}\n      fromLabel={args.fromLabel}\n      toLabel={args.toLabel}\n      labelHidden={args.labelHidden}\n      required={args.required}\n      disabled={args.disabled}\n      readOnly={args.readOnly}\n      mode={args.mode}\n      withSeconds={args.withSeconds}\n    />\n  );\n};\n\nTimeRangeInputDemo.args = {\n  fromLabel: 'Meeting start',\n  toLabel: 'Meeting end',\n  withSeconds: false\n};\n\nTimeRangeInputDemo.argTypes = {\n  fromLabel: { control: { type: 'text' } },\n  toLabel: { control: { type: 'text' } },\n  label: { control: { type: 'text' } },\n  min: { table: { disable: true } },\n  max: { table: { disable: true } },\n  withSeconds: { control: { type: 'boolean' } }\n};\n\nexport const DurationInputDemo: Story<DurationInputStoryProps & { min?: never; max?: never }> = (\n  args: DurationInputStoryProps\n) => {\n  const [value, setValue] = useState(args.value);\n\n  const prev = usePrevious(args.value);\n  useEffect(() => {\n    if (prev !== args.value) setValue(args.value);\n  }, [prev, args.value]);\n\n  return (\n    <DurationInput\n      additionalInfo={\n        args.showAdditionalInfo\n          ? {\n              heading: 'Additional Info',\n              content: 'Select a duration'\n            }\n          : undefined\n      }\n      value={value}\n      onChange={setValue}\n      format={args.format}\n      status={args.status}\n      label={args.label}\n      labelHidden={args.labelHidden}\n      required={args.required}\n      disabled={args.disabled}\n      readOnly={args.readOnly}\n    />\n  );\n};\n\nDurationInputDemo.args = {\n  value: 86400000,\n  // eslint-disable-next-line demo-patterns/literal-args\n  format: Format.Seconds,\n  label: 'Duration input'\n};\n\nDurationInputDemo.argTypes = {\n  value: { control: { type: 'number' } },\n  format: {\n    options: [Format.Seconds, Format.Minutes, Format.Hours, Format.Days, Format.Formatted],\n    control: { type: 'select' }\n  },\n  min: { table: { disable: true } },\n  max: { table: { disable: true } }\n};\n"]}

package/jsx/core/DateTime/DateTimePicker.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DateTimePicker.stories.d.ts","sourceRoot":"","sources":["../../../src/core/DateTime/DateTimePicker.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAE/C,OAAO,EAAc,eAAe,EAAc,eAAe,EAAE,MAAM,yBAAyB,CAAC;;AAEnG,wBAEU;AAEV,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,eAAe,CAcjD,CAAC;AAgBF,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,eAAe,CAIjD,CAAC"}
+{"version":3,"file":"DateTimePicker.stories.d.ts","sourceRoot":"","sources":["../../../src/core/DateTime/DateTimePicker.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAE/C,OAAO,EAAc,eAAe,EAAc,eAAe,EAAE,MAAM,yBAAyB,CAAC;;AAEnG,wBAEU;AAEV,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,eAAe,CAcjD,CAAC;AAgBF,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,eAAe,CASjD,CAAC"}

package/jsx/core/DateTime/DateTimePicker.stories.jsx

@@ -21,7 +21,7 @@ DatePickerDemo.argTypes = {
     max: { control: { type: 'number' } }
 };
 export const TimePickerDemo = (args) => {
-    return (<TimePicker selected={new Date()} interval={args.interval} clockFormat={args.clockFormat}/>);
+    return (<TimePicker selected={new Date()} interval={args.interval} clockFormat={args.clockFormat} onSelect={() => { }}/>);
 };
 TimePickerDemo.args = {
     interval: 30,

package/jsx/core/DateTime/DateTimePicker.stories.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"DateTimePicker.stories.jsx","sourceRoot":"","sources":["../../../src/core/DateTime/DateTimePicker.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAmB,UAAU,EAAmB,MAAM,yBAAyB,CAAC;AAEnG,eAAe;IACb,KAAK,EAAE,sBAAsB;CACtB,CAAC;AAEV,MAAM,CAAC,MAAM,cAAc,GAA2B,CAAC,IAAqB,EAAE,EAAE;IAC9E,MAAM,WAAW,GAAG,IAAI,IAAI,EAAE,CAAC,WAAW,EAAE,CAAC;IAC7C,MAAM,OAAO,GAAG,IAAI,IAAI,CAAC,WAAW,GAAI,IAAI,CAAC,GAAc,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;IACnE,MAAM,OAAO,GAAG,IAAI,IAAI,CAAC,WAAW,GAAI,IAAI,CAAC,GAAc,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC;IAErE,OAAO,CACL,CAAC,UAAU,CACT,QAAQ,CAAC,CAAC,IAAI,IAAI,EAAE,CAAC,CACrB,cAAc,CAAC,CAAC,IAAI,CAAC,cAAc,CAAC,CACpC,IAAI,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAChB,GAAG,CAAC,CAAC,OAAO,CAAC,CACb,GAAG,CAAC,CAAC,OAAO,CAAC,EACb,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,cAAc,CAAC,IAAI,GAAG;IACpB,cAAc,EAAE,KAAK;IACrB,IAAI,EAAE,MAAM;IACZ,GAAG,EAAE,EAAE;IACP,GAAG,EAAE,EAAE;CACR,CAAC;AAEF,cAAc,CAAC,QAAQ,GAAG;IACxB,cAAc,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAChD,IAAI,EAAE,EAAE,OAAO,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;IAChE,GAAG,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;IACpC,GAAG,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;CACrC,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAA2B,CAAC,IAAqB,EAAE,EAAE;IAC9E,OAAO,CACL,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,IAAI,IAAI,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,WAAW,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,EAAG,CAC7F,CAAC;AACJ,CAAC,CAAC;AAEF,cAAc,CAAC,IAAI,GAAG;IACpB,QAAQ,EAAE,EAAE;IACZ,WAAW,EAAE,SAAS;CACvB,CAAC;AAEF,cAAc,CAAC,QAAQ,GAAG;IACxB,QAAQ,EAAE,EAAE,OAAO,EAAE,CAAC,SAAS,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;IAC3E,WAAW,EAAE,EAAE,OAAO,EAAE,CAAC,SAAS,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;CAC3E,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport { DatePicker, DatePickerProps, TimePicker, TimePickerProps } from '@pega/cosmos-react-core';\n\nexport default {\n  title: 'Core/DateTime/Picker'\n} as Meta;\n\nexport const DatePickerDemo: Story<DatePickerProps> = (args: DatePickerProps) => {\n  const currentYear = new Date().getFullYear();\n  const minYear = new Date(currentYear - (args.min as number), 0, 1);\n  const maxYear = new Date(currentYear + (args.max as number), 11, 31);\n\n  return (\n    <DatePicker\n      selected={new Date()}\n      showWeekNumber={args.showWeekNumber}\n      mode={args.mode}\n      min={minYear}\n      max={maxYear}\n    />\n  );\n};\n\nDatePickerDemo.args = {\n  showWeekNumber: false,\n  mode: 'date',\n  min: 10,\n  max: 10\n};\n\nDatePickerDemo.argTypes = {\n  showWeekNumber: { control: { type: 'boolean' } },\n  mode: { options: ['date', 'week'], control: { type: 'select' } },\n  min: { control: { type: 'number' } },\n  max: { control: { type: 'number' } }\n};\n\nexport const TimePickerDemo: Story<TimePickerProps> = (args: TimePickerProps) => {\n  return (\n    <TimePicker selected={new Date()} interval={args.interval} clockFormat={args.clockFormat} />\n  );\n};\n\nTimePickerDemo.args = {\n  interval: 30,\n  clockFormat: undefined\n};\n\nTimePickerDemo.argTypes = {\n  interval: { options: [undefined, 15, 30, 60], control: { type: 'select' } },\n  clockFormat: { options: [undefined, 12, 24], control: { type: 'select' } }\n};\n"]}
+{"version":3,"file":"DateTimePicker.stories.jsx","sourceRoot":"","sources":["../../../src/core/DateTime/DateTimePicker.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAmB,UAAU,EAAmB,MAAM,yBAAyB,CAAC;AAEnG,eAAe;IACb,KAAK,EAAE,sBAAsB;CACtB,CAAC;AAEV,MAAM,CAAC,MAAM,cAAc,GAA2B,CAAC,IAAqB,EAAE,EAAE;IAC9E,MAAM,WAAW,GAAG,IAAI,IAAI,EAAE,CAAC,WAAW,EAAE,CAAC;IAC7C,MAAM,OAAO,GAAG,IAAI,IAAI,CAAC,WAAW,GAAI,IAAI,CAAC,GAAc,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;IACnE,MAAM,OAAO,GAAG,IAAI,IAAI,CAAC,WAAW,GAAI,IAAI,CAAC,GAAc,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC;IAErE,OAAO,CACL,CAAC,UAAU,CACT,QAAQ,CAAC,CAAC,IAAI,IAAI,EAAE,CAAC,CACrB,cAAc,CAAC,CAAC,IAAI,CAAC,cAAc,CAAC,CACpC,IAAI,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAChB,GAAG,CAAC,CAAC,OAAO,CAAC,CACb,GAAG,CAAC,CAAC,OAAO,CAAC,EACb,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,cAAc,CAAC,IAAI,GAAG;IACpB,cAAc,EAAE,KAAK;IACrB,IAAI,EAAE,MAAM;IACZ,GAAG,EAAE,EAAE;IACP,GAAG,EAAE,EAAE;CACR,CAAC;AAEF,cAAc,CAAC,QAAQ,GAAG;IACxB,cAAc,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAChD,IAAI,EAAE,EAAE,OAAO,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;IAChE,GAAG,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;IACpC,GAAG,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;CACrC,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAA2B,CAAC,IAAqB,EAAE,EAAE;IAC9E,OAAO,CACL,CAAC,UAAU,CACT,QAAQ,CAAC,CAAC,IAAI,IAAI,EAAE,CAAC,CACrB,QAAQ,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CACxB,WAAW,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,CAC9B,QAAQ,CAAC,CAAC,GAAG,EAAE,GAAE,CAAC,CAAC,EACnB,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,cAAc,CAAC,IAAI,GAAG;IACpB,QAAQ,EAAE,EAAE;IACZ,WAAW,EAAE,SAAS;CACvB,CAAC;AAEF,cAAc,CAAC,QAAQ,GAAG;IACxB,QAAQ,EAAE,EAAE,OAAO,EAAE,CAAC,SAAS,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;IAC3E,WAAW,EAAE,EAAE,OAAO,EAAE,CAAC,SAAS,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;CAC3E,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport { DatePicker, DatePickerProps, TimePicker, TimePickerProps } from '@pega/cosmos-react-core';\n\nexport default {\n  title: 'Core/DateTime/Picker'\n} as Meta;\n\nexport const DatePickerDemo: Story<DatePickerProps> = (args: DatePickerProps) => {\n  const currentYear = new Date().getFullYear();\n  const minYear = new Date(currentYear - (args.min as number), 0, 1);\n  const maxYear = new Date(currentYear + (args.max as number), 11, 31);\n\n  return (\n    <DatePicker\n      selected={new Date()}\n      showWeekNumber={args.showWeekNumber}\n      mode={args.mode}\n      min={minYear}\n      max={maxYear}\n    />\n  );\n};\n\nDatePickerDemo.args = {\n  showWeekNumber: false,\n  mode: 'date',\n  min: 10,\n  max: 10\n};\n\nDatePickerDemo.argTypes = {\n  showWeekNumber: { control: { type: 'boolean' } },\n  mode: { options: ['date', 'week'], control: { type: 'select' } },\n  min: { control: { type: 'number' } },\n  max: { control: { type: 'number' } }\n};\n\nexport const TimePickerDemo: Story<TimePickerProps> = (args: TimePickerProps) => {\n  return (\n    <TimePicker\n      selected={new Date()}\n      interval={args.interval}\n      clockFormat={args.clockFormat}\n      onSelect={() => {}}\n    />\n  );\n};\n\nTimePickerDemo.args = {\n  interval: 30,\n  clockFormat: undefined\n};\n\nTimePickerDemo.argTypes = {\n  interval: { options: [undefined, 15, 30, 60], control: { type: 'select' } },\n  clockFormat: { options: [undefined, 12, 24], control: { type: 'select' } }\n};\n"]}