npm - @pega/cosmos-react-core - Versions diffs - 2.0.0-rc.2 → 2.0.0 - Mend

@pega/cosmos-react-core 2.0.0-rc.2 → 2.0.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 (188) hide show

package/lib/components/ComboBox/ComboBox.types.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ComboBox.types.d.ts","sourceRoot":"","sources":["../../../src/components/ComboBox/ComboBox.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE/C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAClD,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAE9D,MAAM,WAAW,QAAQ;IACvB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;CACd;AAED,MAAM,CAAC,OAAO,WAAW,aAAc,SAAQ,cAAc;IAC3D;;;OAGG;IACH,EAAE,CAAC,EAAE,gBAAgB,CAAC,IAAI,CAAC,CAAC;IAC5B,2DAA2D;IAC3D,KAAK,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAClC,uCAAuC;IACvC,WAAW,CAAC,EAAE,gBAAgB,CAAC,aAAa,CAAC,CAAC;IAC9C,wEAAwE;IACxE,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,yFAAyF;IACzF,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,+FAA+F;IAC/F,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAChC,oDAAoD;IACpD,MAAM,CAAC,EAAE,gBAAgB,CAAC,QAAQ,CAAC,CAAC;IACpC,6GAA6G;IAC7G,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAChC,uBAAuB;IACvB,WAAW,CAAC,EAAE,gBAAgB,CAAC,aAAa,CAAC,CAAC;IAC9C;;;OAGG;IACH,IAAI,CAAC,EAAE,eAAe,GAAG,cAAc,CAAC;IACxC,sFAAsF;IACtF,QAAQ,CAAC,EAAE;QACT,KAAK,CAAC,EAAE,QAAQ,GAAG,QAAQ,EAAE,CAAC;QAC9B,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,aAAa,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;QAC5D,KAAK,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;KAChC,CAAC;IACF,6CAA6C;IAC7C,KAAK,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAClC,6DAA6D;IAC7D,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACtD,0DAA0D;IAC1D,OAAO,CAAC,EAAE,CAAC,QAAQ,CAAC,EAAE,QAAQ,GAAG,QAAQ,EAAE,KAAK,IAAI,CAAC;IACrD;;;;OAIG;IACH,MAAM,CAAC,EAAE,CAAC,QAAQ,CAAC,EAAE,QAAQ,GAAG,QAAQ,EAAE,KAAK,IAAI,CAAC;IACpD,iDAAiD;IACjD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;;;;OAOG;IACH,qBAAqB,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAChD,oDAAoD;IACpD,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IAClC,wDAAwD;IACxD,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,yCAAyC;IACzC,IAAI,CAAC,EAAE,SAAS,CAAC;~~CAClB~~"}
1	+ {"version":3,"file":"ComboBox.types.d.ts","sourceRoot":"","sources":["../../../src/components/ComboBox/ComboBox.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE/C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAClD,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAE9D,MAAM,WAAW,QAAQ;IACvB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;CACd;AAED,MAAM,CAAC,OAAO,WAAW,aAAc,SAAQ,cAAc;IAC3D;;;OAGG;IACH,EAAE,CAAC,EAAE,gBAAgB,CAAC,IAAI,CAAC,CAAC;IAC5B,2DAA2D;IAC3D,KAAK,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAClC,uCAAuC;IACvC,WAAW,CAAC,EAAE,gBAAgB,CAAC,aAAa,CAAC,CAAC;IAC9C,wEAAwE;IACxE,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,yFAAyF;IACzF,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,+FAA+F;IAC/F,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAChC,oDAAoD;IACpD,MAAM,CAAC,EAAE,gBAAgB,CAAC,QAAQ,CAAC,CAAC;IACpC,6GAA6G;IAC7G,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAChC,uBAAuB;IACvB,WAAW,CAAC,EAAE,gBAAgB,CAAC,aAAa,CAAC,CAAC;IAC9C;;;OAGG;IACH,IAAI,CAAC,EAAE,eAAe,GAAG,cAAc,CAAC;IACxC,sFAAsF;IACtF,QAAQ,CAAC,EAAE;QACT,KAAK,CAAC,EAAE,QAAQ,GAAG,QAAQ,EAAE,CAAC;QAC9B,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,aAAa,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;QAC5D,KAAK,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;KAChC,CAAC;IACF,6CAA6C;IAC7C,KAAK,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAClC,6DAA6D;IAC7D,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACtD,0DAA0D;IAC1D,OAAO,CAAC,EAAE,CAAC,QAAQ,CAAC,EAAE,QAAQ,GAAG,QAAQ,EAAE,KAAK,IAAI,CAAC;IACrD;;;;OAIG;IACH,MAAM,CAAC,EAAE,CAAC,QAAQ,CAAC,EAAE,QAAQ,GAAG,QAAQ,EAAE,KAAK,IAAI,CAAC;IACpD,iDAAiD;IACjD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;;;;OAOG;IACH,qBAAqB,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAChD,oDAAoD;IACpD,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IAClC,wDAAwD;IACxD,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,yCAAyC;IACzC,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,mDAAmD;IACnD,MAAM,CAAC,EAAE,SAAS,CAAC;CACpB"}

package/lib/components/ComboBox/ComboBox.types.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ComboBox.types.js","sourceRoot":"","sources":["../../../src/components/ComboBox/ComboBox.types.ts"],"names":[],"mappings":"","sourcesContent":["import { ChangeEvent, ReactNode } from 'react';\n\nimport type { NoChildrenProp } from '../../types';\nimport { FormControlProps } from '../FormControl';\nimport { MenuItemProps, MenuProps } from '../Menu/Menu.types';\n\nexport interface Selected {\n id: string;\n text: string;\n}\n\nexport default interface ComboBoxProps extends NoChildrenProp {\n /*\n Sets DOM id for the control and associates label element via 'for' attribute.\n * If an id is not pass, a random id will be generated for any render.\n /\n id?: FormControlProps['id'];\n /* Pass a string or a fragment with an Icon and string. /\n label?: FormControlProps['label'];\n /* Visually hides the label region. /\n labelHidden?: FormControlProps['labelHidden'];\n /* Indicate if the field is required. The browser defaults to false. /\n required?: FormControlProps['required'];\n /* Disable the control. The browser defaults to false. /\n disabled?: FormControlProps['disabled'];\n /* Makes the component non editable and non clickable. The browser defaults to false. /\n readOnly?: FormControlProps['readOnly'];\n /* Sets html name attribute for the underlying control. Useful for mapping to a data field. /\n name?: FormControlProps['name'];\n /* Set visual state based on a validation state. /\n status?: FormControlProps['status'];\n /* It is recommended to pass a simple string to offer guidance. Text will be styled based on status prop. /\n info?: FormControlProps['info'];\n /* Placeholder text /\n placeholder?: FormControlProps['placeholder'];\n /\n Whether it is single selection or multi selection combobox.\n * @default 'single-select'\n /\n mode?: 'single-select' \| 'multi-select';\n /* Currently selected option, single for single-select, an array for multi-select. /\n selected?: {\n items?: Selected \| Selected[];\n onRemove?: (id: MenuItemProps['id'], index: number) => void;\n onNew?: (text: string) => void;\n };\n /* Value of the combobox filtering input. /\n value?: FormControlProps['value'];\n /* Callback fired when the filtering input value changes. /\n onChange?: (e: ChangeEvent<HTMLInputElement>) => void;\n /* Callback fired when the ComboBox input gains focus. /\n onFocus?: (selected?: Selected \| Selected[]) => void;\n /\n Callback fired when the ComboBox looses focus within its containing element.\n * This is not specific to the input element.\n * Note, behavior will be enhanced in an upcoming release and the input will be the only focusable element.\n /\n onBlur?: (selected?: Selected \| Selected[]) => void;\n /* Automatically focuses the input on render. /\n autoFocus?: boolean;\n /\n Fired when the user clicks on the dropdown icon to initiate opening the menu.\n * If you want to offer default menu items without an input value, pass this function.\n * This function can be an appropriate time to fetch menu item data.\n * Remember to set the loading prop to true when when fetching data for an empty list.\n \n @param open value defining whether the click opens or closes the menu\n /\n onDropdownButtonClick?: (open: boolean) => void;\n /* Fired when user clicks on the Combobox input. /\n onClick?: (e: MouseEvent) => void;\n /* Action Buttons that will render within the input. /\n actions?: ReactNode;\n /* Menu related props. @see MenuProps */\n menu?: MenuProps;\n}\n"]}
1	+ {"version":3,"file":"ComboBox.types.js","sourceRoot":"","sources":["../../../src/components/ComboBox/ComboBox.types.ts"],"names":[],"mappings":"","sourcesContent":["import { ChangeEvent, ReactNode } from 'react';\n\nimport type { NoChildrenProp } from '../../types';\nimport { FormControlProps } from '../FormControl';\nimport { MenuItemProps, MenuProps } from '../Menu/Menu.types';\n\nexport interface Selected {\n id: string;\n text: string;\n}\n\nexport default interface ComboBoxProps extends NoChildrenProp {\n /*\n Sets DOM id for the control and associates label element via 'for' attribute.\n * If an id is not pass, a random id will be generated for any render.\n /\n id?: FormControlProps['id'];\n /* Pass a string or a fragment with an Icon and string. /\n label?: FormControlProps['label'];\n /* Visually hides the label region. /\n labelHidden?: FormControlProps['labelHidden'];\n /* Indicate if the field is required. The browser defaults to false. /\n required?: FormControlProps['required'];\n /* Disable the control. The browser defaults to false. /\n disabled?: FormControlProps['disabled'];\n /* Makes the component non editable and non clickable. The browser defaults to false. /\n readOnly?: FormControlProps['readOnly'];\n /* Sets html name attribute for the underlying control. Useful for mapping to a data field. /\n name?: FormControlProps['name'];\n /* Set visual state based on a validation state. /\n status?: FormControlProps['status'];\n /* It is recommended to pass a simple string to offer guidance. Text will be styled based on status prop. /\n info?: FormControlProps['info'];\n /* Placeholder text /\n placeholder?: FormControlProps['placeholder'];\n /\n Whether it is single selection or multi selection combobox.\n * @default 'single-select'\n /\n mode?: 'single-select' \| 'multi-select';\n /* Currently selected option, single for single-select, an array for multi-select. /\n selected?: {\n items?: Selected \| Selected[];\n onRemove?: (id: MenuItemProps['id'], index: number) => void;\n onNew?: (text: string) => void;\n };\n /* Value of the combobox filtering input. /\n value?: FormControlProps['value'];\n /* Callback fired when the filtering input value changes. /\n onChange?: (e: ChangeEvent<HTMLInputElement>) => void;\n /* Callback fired when the ComboBox input gains focus. /\n onFocus?: (selected?: Selected \| Selected[]) => void;\n /\n Callback fired when the ComboBox looses focus within its containing element.\n * This is not specific to the input element.\n * Note, behavior will be enhanced in an upcoming release and the input will be the only focusable element.\n /\n onBlur?: (selected?: Selected \| Selected[]) => void;\n /* Automatically focuses the input on render. /\n autoFocus?: boolean;\n /\n Fired when the user clicks on the dropdown icon to initiate opening the menu.\n * If you want to offer default menu items without an input value, pass this function.\n * This function can be an appropriate time to fetch menu item data.\n * Remember to set the loading prop to true when when fetching data for an empty list.\n \n @param open value defining whether the click opens or closes the menu\n /\n onDropdownButtonClick?: (open: boolean) => void;\n /* Fired when user clicks on the Combobox input. /\n onClick?: (e: MouseEvent) => void;\n /* Action Buttons that will render within the input. /\n actions?: ReactNode;\n /* Menu related props. @see MenuProps /\n menu?: MenuProps;\n /* A visual which represents the selected item. */\n visual?: ReactNode;\n}\n"]}

package/lib/components/ComboBox/ComboBoxInput.d.ts CHANGED Viewed

@@ -6,6 +6,7 @@ interface ComboBoxInputProps extends BaseProps {
     mode?: 'multi-select' | 'single-select';
     selected?: Selected | Selected[];
     value?: ComboBoxProps['value'];
+    visual?: ComboBoxProps['visual'];
     onRemove?: (id: MenuItemProps['id'], index: number) => void;
 }
 declare const ComboBoxInput: FunctionComponent<ComboBoxInputProps & ForwardProps>;

package/lib/components/ComboBox/ComboBoxInput.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ComboBoxInput.d.ts","sourceRoot":"","sources":["../../../src/components/ComboBox/ComboBoxInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAwB,MAAM,OAAO,CAAC;AAE5E,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AACtD,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAInD,OAAO,aAAa,EAAE,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAE3D,UAAU,kBAAmB,SAAQ,SAAS;IAC5C,IAAI,CAAC,EAAE,cAAc,GAAG,eAAe,CAAC;IACxC,QAAQ,CAAC,EAAE,QAAQ,GAAG,QAAQ,EAAE,CAAC;IACjC,KAAK,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IAC/B,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,aAAa,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAC7D;AAED,QAAA,MAAM,aAAa,EAAE,iBAAiB,CAAC,kBAAkB,GAAG,YAAY,~~CAkBvE~~,CAAC;AAEF,eAAe,aAAa,CAAC"}
1	+ {"version":3,"file":"ComboBoxInput.d.ts","sourceRoot":"","sources":["../../../src/components/ComboBox/ComboBoxInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAwB,MAAM,OAAO,CAAC;AAE5E,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AACtD,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAInD,OAAO,aAAa,EAAE,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAE3D,UAAU,kBAAmB,SAAQ,SAAS;IAC5C,IAAI,CAAC,EAAE,cAAc,GAAG,eAAe,CAAC;IACxC,QAAQ,CAAC,EAAE,QAAQ,GAAG,QAAQ,EAAE,CAAC;IACjC,KAAK,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IAC/B,MAAM,CAAC,EAAE,aAAa,CAAC,QAAQ,CAAC,CAAC;IACjC,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,aAAa,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAC7D;AAED,QAAA,MAAM,aAAa,EAAE,iBAAiB,CAAC,kBAAkB,GAAG,YAAY,CAwBvE,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/lib/components/ComboBox/ComboBoxInput.js CHANGED Viewed

@@ -3,11 +3,11 @@ import { forwardRef } from 'react';
 import SingleSelectInput from './SingleSelectInput/SingleSelectInput';
 import MultiSelectInput from './MultiSelectInput/MultiSelectInput';
 const ComboBoxInput = forwardRef((props, ref) => {
-    const { value, mode, selected, onRemove, ...restProps } = props;
+    const { value, mode, selected, visual, onRemove, ...restProps } = props;
     return mode === 'multi-select' ? (_jsx(MultiSelectInput, { selected: selected, value: value, ...{
             ref,
             onRemove
-        }, ...restProps }, void 0)) : (_jsx(SingleSelectInput, { ref: ref, selected: selected, value: value, ...restProps }, void 0));
+        }, ...restProps }, void 0)) : (_jsx(SingleSelectInput, { ref: ref, selected: selected, value: value, visual: visual, ...restProps }, void 0));
 });
 export default ComboBoxInput;
 //# sourceMappingURL=ComboBoxInput.js.map

package/lib/components/ComboBox/ComboBoxInput.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ComboBoxInput.js","sourceRoot":"","sources":["../../../src/components/ComboBox/ComboBoxInput.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAA2C,MAAM,OAAO,CAAC;AAK5E,OAAO,iBAAiB,MAAM,uCAAuC,CAAC;AACtE,OAAO,gBAAgB,MAAM,qCAAqC,CAAC;~~AAUnE~~,MAAM,aAAa,GAAyD,UAAU,CACpF,CAAC,KAA0C,EAAE,GAA0B,EAAE,EAAE;IACzE,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;~~IAEhE~~,OAAO,IAAI,KAAK,cAAc,CAAC,CAAC,CAAC,CAC/B,KAAC,gBAAgB,IACf,QAAQ,EAAE,QAAsB,EAChC,KAAK,EAAE,KAAK,KACR;YACF,GAAG;YACH,QAAQ;SACT,KACG,SAAS,WACb,CACH,CAAC,CAAC,CAAC,CACF,KAAC,iBAAiB,~~IAAC~~,GAAG,EAAE,GAAG,~~EAAE~~,QAAQ,EAAE,QAAoB,~~EAAE~~,KAAK,EAAE,KAAK,~~KAAM~~,SAAS,~~WAAI~~,~~CAC7F~~,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,aAAa,CAAC","sourcesContent":["import { forwardRef, FunctionComponent, Ref, PropsWithoutRef } from 'react';\n\nimport { BaseProps, ForwardProps } from '../../types';\nimport { MenuItemProps } from '../Menu/Menu.types';\n\nimport SingleSelectInput from './SingleSelectInput/SingleSelectInput';\nimport MultiSelectInput from './MultiSelectInput/MultiSelectInput';\nimport ComboBoxProps, { Selected } from './ComboBox.types';\n\ninterface ComboBoxInputProps extends BaseProps {\n mode?: 'multi-select' \| 'single-select';\n selected?: Selected \| Selected[];\n value?: ComboBoxProps['value'];\n onRemove?: (id: MenuItemProps['id'], index: number) => void;\n}\n\nconst ComboBoxInput: FunctionComponent<ComboBoxInputProps & ForwardProps> = forwardRef(\n (props: PropsWithoutRef<ComboBoxInputProps>, ref: Ref<HTMLInputElement>) => {\n const { value, mode, selected, onRemove, ...restProps } = props;\n\n return mode === 'multi-select' ? (\n <MultiSelectInput\n selected={selected as Selected[]}\n value={value}\n {...{\n ref,\n onRemove\n }}\n {...restProps}\n />\n ) : (\n <SingleSelectInput ref={ref} selected={selected as Selected} value={value} {...restProps} />\n );\n }\n);\n\nexport default ComboBoxInput;\n"]}
1	+ {"version":3,"file":"ComboBoxInput.js","sourceRoot":"","sources":["../../../src/components/ComboBox/ComboBoxInput.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAA2C,MAAM,OAAO,CAAC;AAK5E,OAAO,iBAAiB,MAAM,uCAAuC,CAAC;AACtE,OAAO,gBAAgB,MAAM,qCAAqC,CAAC;AAWnE,MAAM,aAAa,GAAyD,UAAU,CACpF,CAAC,KAA0C,EAAE,GAA0B,EAAE,EAAE;IACzE,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IAExE,OAAO,IAAI,KAAK,cAAc,CAAC,CAAC,CAAC,CAC/B,KAAC,gBAAgB,IACf,QAAQ,EAAE,QAAsB,EAChC,KAAK,EAAE,KAAK,KACR;YACF,GAAG;YACH,QAAQ;SACT,KACG,SAAS,WACb,CACH,CAAC,CAAC,CAAC,CACF,KAAC,iBAAiB,IAChB,GAAG,EAAE,GAAG,EACR,QAAQ,EAAE,QAAoB,EAC9B,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,MAAM,KACV,SAAS,WACb,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,aAAa,CAAC","sourcesContent":["import { forwardRef, FunctionComponent, Ref, PropsWithoutRef } from 'react';\n\nimport { BaseProps, ForwardProps } from '../../types';\nimport { MenuItemProps } from '../Menu/Menu.types';\n\nimport SingleSelectInput from './SingleSelectInput/SingleSelectInput';\nimport MultiSelectInput from './MultiSelectInput/MultiSelectInput';\nimport ComboBoxProps, { Selected } from './ComboBox.types';\n\ninterface ComboBoxInputProps extends BaseProps {\n mode?: 'multi-select' \| 'single-select';\n selected?: Selected \| Selected[];\n value?: ComboBoxProps['value'];\n visual?: ComboBoxProps['visual'];\n onRemove?: (id: MenuItemProps['id'], index: number) => void;\n}\n\nconst ComboBoxInput: FunctionComponent<ComboBoxInputProps & ForwardProps> = forwardRef(\n (props: PropsWithoutRef<ComboBoxInputProps>, ref: Ref<HTMLInputElement>) => {\n const { value, mode, selected, visual, onRemove, ...restProps } = props;\n\n return mode === 'multi-select' ? (\n <MultiSelectInput\n selected={selected as Selected[]}\n value={value}\n {...{\n ref,\n onRemove\n }}\n {...restProps}\n />\n ) : (\n <SingleSelectInput\n ref={ref}\n selected={selected as Selected}\n value={value}\n visual={visual}\n {...restProps}\n />\n );\n }\n);\n\nexport default ComboBoxInput;\n"]}

package/lib/components/ComboBox/MultiSelectInput/MultiSelectInput.d.ts CHANGED Viewed

@@ -1,7 +1,7 @@
 import { FunctionComponent } from 'react';
 import { ForwardProps } from '../../../types';
 import { MultiSelectInputProps } from './MultiSelectInput.types';
-export declare const StyledMultiSelect: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, MultiSelectInputProps, never>;
+export declare const StyledMultiSelectInput: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 declare const MultiSelectInput: FunctionComponent<MultiSelectInputProps & ForwardProps>;
 export default MultiSelectInput;
 //# sourceMappingURL=MultiSelectInput.d.ts.map

package/lib/components/ComboBox/MultiSelectInput/MultiSelectInput.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MultiSelectInput.d.ts","sourceRoot":"","sources":["../../../../src/components/ComboBox/MultiSelectInput/MultiSelectInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,iBAAiB,EAOlB,MAAM,OAAO,CAAC;AAGf,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAS9C,OAAO,EAAE,qBAAqB,EAAE,MAAM,0BAA0B,CAAC;AAEjE,eAAO,MAAM,~~iBAAiB~~,~~4HA4D5B~~,CAAC;AAIH,QAAA,MAAM,gBAAgB,EAAE,iBAAiB,CAAC,qBAAqB,GAAG,YAAY,CAqG7E,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
1	+ {"version":3,"file":"MultiSelectInput.d.ts","sourceRoot":"","sources":["../../../../src/components/ComboBox/MultiSelectInput/MultiSelectInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,iBAAiB,EAOlB,MAAM,OAAO,CAAC;AAGf,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAS9C,OAAO,EAAE,qBAAqB,EAAE,MAAM,0BAA0B,CAAC;AAEjE,eAAO,MAAM,sBAAsB,yGAUjC,CAAC;AAIH,QAAA,MAAM,gBAAgB,EAAE,iBAAiB,CAAC,qBAAqB,GAAG,YAAY,CAqG7E,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/lib/components/ComboBox/MultiSelectInput/MultiSelectInput.js CHANGED Viewed

@@ -7,60 +7,19 @@ import { StyledFormControl } from '../../FormControl';
 import Flex from '../../Flex';
 import { useArrows, useConsolidatedRef, useDirection } from '../../../hooks';
 import { cap } from '../../../utils';
-import { StyledButton } from '../../Button';
-export const StyledMultiSelect = styled.div(props => {
-    const { theme: { components: { 'form-control': formControl, input: { height } }, base } } = props;
+import { StyledSelectInput } from '../ComboBox.styles';
+export const StyledMultiSelectInput = styled(StyledSelectInput)(({ theme }) => {
     return css `
-    min-height: ${height};
-    @media (pointer: coarse) {
-      min-height: ${base['hit-area']['finger-min']};
-    }
-    &:focus-within {
-      border-color: ${formControl[':focus']['border-color']};
-      box-shadow: ${formControl[':focus']['box-shadow']};
-    }
-    &:hover:not([readonly]):not([disabled]):focus-within {
-      border-color: transparent;
-    }
     ul {
       list-style: none;
     }
-    input {
-      min-width: 0;
-      width: 100%;
-      color: ${formControl['foreground-color']};
-      text-overflow: ellipsis;
-      margin-inline-start: ${base.spacing};
-    }
-    input,
-    input:focus {
-      border: none;
-      outline: none;
-      flex-grow: 1;
-      background-color: transparent;
-      &:read-only {
-        cursor: default;
-      }
-    }
     ${StyledSelectable} {
-      margin: calc(0.25 * ${base.spacing});
-    }
-    > ${StyledButton} {
-      border-radius: calc(${base['border-radius']} * ${formControl['border-radius']});
-      height: calc(${height} - 2 * ${formControl['border-width']});
+      margin: calc(0.25 * ${theme.base.spacing});
     }
   `;
 });
-StyledMultiSelect.defaultProps = defaultThemeProp;
+StyledMultiSelectInput.defaultProps = defaultThemeProp;
 const MultiSelectInput = forwardRef((props, ref) => {
     const { selected = [], value, onRemove, onChange, onKeyDown, actions, readOnly, disabled, status, placeholder, autoFocus, ...restProps } = props;
     const inputRef = useConsolidatedRef(ref);
@@ -74,7 +33,7 @@ const MultiSelectInput = forwardRef((props, ref) => {
         onKeyDown?.(e);
     }, [onKeyDown, value, selected]);
     const { end } = useDirection();
-    return (_jsxs(Flex, { as: StyledMultiSelect, forwardedAs: StyledFormControl, container: { alignItems: 'center' }, ...{
+    return (_jsxs(Flex, { as: StyledMultiSelectInput, forwardedAs: StyledFormControl, container: { alignItems: 'center' }, ...{
             readOnly,
             disabled,
             status

package/lib/components/ComboBox/MultiSelectInput/MultiSelectInput.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MultiSelectInput.js","sourceRoot":"","sources":["../../../../src/components/ComboBox/MultiSelectInput/MultiSelectInput.tsx"],"names":[],"mappings":";AAAA,OAAO,EAEL,UAAU,EAIV,MAAM,EACN,WAAW,EACZ,MAAM,OAAO,CAAC;AACf,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAGhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,UAAU,EAAE,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AACtE,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AACtD,OAAO,IAAI,MAAM,YAAY,CAAC;AAC9B,OAAO,EAAE,SAAS,EAAE,kBAAkB,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC7E,OAAO,EAAE,GAAG,EAAE,MAAM,gBAAgB,CAAC;AACrC,OAAO,EAAE,~~YAAY~~,EAAE,MAAM,~~cAAc~~,CAAC;~~AAI5C~~,MAAM,CAAC,MAAM,~~iBAAiB~~,GAAG,MAAM,CAAC,~~GAAG~~,~~CAAwB~~,~~KAAK~~,CAAC,EAAE~~;IACzE~~,~~MAAM,EACJ,~~KAAK,EAAE,~~EACL,UAAU,~~EAAE,~~EACV,cAAc,~~EAAE~~,WAAW,EAC3B,KAAK,EAAE,EAAE,MAAM,EAAE,EAClB,EACD,IAAI,EACL,EACF,GAAG,KAAK,CAAC~~;~~IAEV~~,OAAO,GAAG,CAAA~~;kBACM~~,MAAM;;;oBAGJ,IAAI,CAAC,UAAU,CAAC,CAAC,YAAY,CAAC;;;;sBAI5B,WAAW,CAAC,QAAQ,CAAC,CAAC,cAAc,CAAC;oBACvC,WAAW,CAAC,QAAQ,CAAC,CAAC,YAAY,CAAC;;;;;;;;;;;;;;eAcxC,WAAW,CAAC,kBAAkB,CAAC;;6BAEjB,IAAI,CAAC,OAAO;;;;;;;;;;;;;;;MAenC,gBAAgB;4BACM,~~IAAI~~,CAAC,~~OAAO;;;QAGhC,YAAY;4BACQ,~~IAAI,CAAC,~~eAAe,CAAC,MAAM,WAAW,CAAC,eAAe,CAAC;qBAC9D,MAAM,UAAU,WAAW,CAAC,cAAc,CAAC~~;;~~GAE7D~~,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,~~iBAAiB~~,CAAC,YAAY,GAAG,gBAAgB,CAAC;~~AAElD~~,MAAM,gBAAgB,GAA4D,UAAU,CAC1F,CAAC,KAA6C,EAAE,GAA0B,EAAE,EAAE;IAC5E,MAAM,EACJ,QAAQ,GAAG,EAAE,EACb,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,MAAM,EACN,WAAW,EACX,SAAS,EACT,GAAG,SAAS,EACb,GAAG,KAAK,CAAC;IAEV,MAAM,QAAQ,GAAG,kBAAkB,CAAmB,GAAG,CAAC,CAAC;IAC3D,MAAM,OAAO,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAC;IAC/C,SAAS,CAAC,OAAO,EAAE,EAAE,QAAQ,EAAE,2BAA2B,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,YAAY,EAAE,CAAC,CAAC;IAE/F,MAAM,cAAc,GAAG,WAAW,CAChC,CAAC,CAAkC,EAAE,EAAE;QACrC,MAAM,SAAS,GAAG,QAAQ,CAAC,MAAM,GAAG,CAAC,CAAC;QACtC,IAAI,CAAC,CAAC,GAAG,KAAK,WAAW,IAAI,CAAC,KAAK,IAAI,QAAQ,CAAC,MAAM,GAAG,CAAC,EAAE;YAC1D,QAAQ,EAAE,CAAC,QAAQ,CAAC,SAAS,CAAC,CAAC,EAAE,EAAE,SAAS,CAAC,CAAC;SAC/C;QACD,SAAS,EAAE,CAAC,CAAC,CAAC,CAAC;IACjB,CAAC,EACD,CAAC,SAAS,EAAE,KAAK,EAAE,QAAQ,CAAC,CAC7B,CAAC;IAEF,MAAM,EAAE,GAAG,EAAE,GAAG,YAAY,EAAE,CAAC;IAE/B,OAAO,CACL,MAAC,IAAI,IACH,EAAE,EAAE,~~iBAAiB~~,~~EACrB~~,WAAW,EAAE,iBAAiB,EAC9B,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,KAC/B;YACF,QAAQ;YACR,QAAQ;YACR,MAAM;SACP,aAED,MAAC,IAAI,IACH,GAAG,EAAE,OAAO,EACZ,EAAE,EAAC,IAAI,EACP,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,EACjB,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,EAAE,EACjD,MAAM,EAAE,GAAG,EAAE;oBACX,OAAO,CAAC,OAAO,EAAE,gBAAgB,CAAc,oBAAoB,CAAC,CAAC,OAAO,CAAC,EAAE,CAAC,EAAE;wBAChF,EAAE,CAAC,QAAQ,GAAG,CAAC,CAAC,CAAC;oBACnB,CAAC,CAAC,CAAC;oBACH,IAAI,QAAQ,CAAC,OAAO;wBAAE,QAAQ,CAAC,OAAO,CAAC,QAAQ,GAAG,CAAC,CAAC;gBACtD,CAAC,aAEA,QAAQ,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,GAAG,EAAE,EAAE;wBAC7B,OAAO,CACL,uBACE,KAAC,UAAU,IACT,EAAE,EAAE,OAAO,CAAC,EAAE,CAAC,QAAQ,EAAE,EACzB,QAAQ,EAAE,QAAQ,IAAI,QAAQ,EAC9B,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,EAAE,CAAC,EAAE;oCACb,QAAQ,EAAE,CAAC,EAAE,EAAE,GAAG,CAAC,CAAC;oCACpB,QAAQ,CAAC,OAAO,EAAE,KAAK,EAAE,CAAC;gCAC5B,CAAC,EACD,SAAS,EAAE,CAAC,CAAyB,EAAE,EAAE;oCACvC,+BAA+B;oCAC/B,IAAI,CAAC,CAAC,GAAG,KAAK,WAAW;wCAAE,CAAC,CAAC,cAAc,EAAE,CAAC;oCAC9C,IAAI,GAAG,KAAK,QAAQ,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,CAAC,GAAG,KAAK,QAAQ,GAAG,CAAC,GAAG,CAAC,EAAE;wCAC7D,QAAQ,CAAC,OAAO,EAAE,KAAK,EAAE,CAAC;gCAC9B,CAAC,YAEA,OAAO,CAAC,IAAI,WACF,IAjBN,OAAO,CAAC,EAAE,CAkBd,CACN,CAAC;oBACJ,CAAC,CAAC,EACF,KAAC,IAAI,IAAC,EAAE,EAAC,IAAI,EAAC,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,EAAE,SAAS,kBACxC,gBACE,IAAI,EAAE,CAAC,EACP,GAAG,EAAE,QAAQ,EACb,KAAK,EAAE,KAAK;4BACZ,0CAA0C;4BAC1C,QAAQ,EAAE,QAAQ,IAAI,CAAC,GAAG,EAAE,GAAE,CAAC,CAAC,EAChC,SAAS,EAAE,cAAc,EACzB,QAAQ,EAAE,QAAQ,IAAI,CAAC,QAAQ,EAC/B,WAAW,EAAE,QAAQ,EAAE,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,WAAW,EACvD,YAAY,EAAC,KAAK;4BAClB,iDAAiD;4BACjD,SAAS,EAAE,SAAS,KAChB,SAAS,WACb,WACG,YACF,EACN,OAAO,YACH,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,gBAAgB,CAAC","sourcesContent":["import {\n FunctionComponent,\n forwardRef,\n Ref,\n PropsWithoutRef,\n KeyboardEvent,\n useRef,\n useCallback\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { ForwardProps } from '../../../types';\nimport { defaultThemeProp } from '../../../theme';\nimport Selectable, { StyledSelectable } from '../../Badges/Selection';\nimport { StyledFormControl } from '../../FormControl';\nimport Flex from '../../Flex';\nimport { useArrows, useConsolidatedRef, useDirection } from '../../../hooks';\nimport { cap } from '../../../utils';\nimport { ~~StyledButton~~ } from '~~../../Button~~';\n\nimport { MultiSelectInputProps } from './MultiSelectInput.types';\n\nexport const ~~StyledMultiSelect~~ = styled~~.div<MultiSelectInputProps>~~(~~props =>~~ {~~\n const~~ ~~{\n~~ theme: ~~{\n components:~~ ~~{\n 'form-control':~~ ~~formControl,\n input:~~ { ~~height }~~\n ~~},\n base\n }\n~~ ~~} = props;\n\n~~ return css`\n min-height: ${height};\n\n @media (pointer: coarse) {\n min-height: ${base['hit-area']['finger-min']};\n }\n\n &:focus-within {\n border-color: ${formControl[':focus']['border-color']};\n box-shadow: ${formControl[':focus']['box-shadow']};\n }\n\n &:hover:not([readonly]):not([disabled]):focus-within {\n border-color: transparent;\n }\n\n ul {\n list-style: none;\n }\n\n ~~input {\n min-width: 0;\n width: 100%;\n color:~~ ${formControl['foreground-color']};\n text-overflow: ellipsis;\n margin-inline-start: ${base.spacing};\n }\n\n input,\n input:focus {\n border: none;\n outline: none;\n flex-grow: 1;\n background-color: transparent;\n\n &:read-only {\n cursor: default;\n }\n }\n\n ${StyledSelectable} {\n margin: calc(0.25 * ${base.spacing});\n }\n~~\n > ${StyledButton} {\n border-radius: calc(${base['border-radius']} * ${formControl['border-radius']});\n height: calc(${height} - 2 * ${formControl['border-width']});\n }\n~~ `;\n});\n\~~nStyledMultiSelect~~.defaultProps = defaultThemeProp;\n\nconst MultiSelectInput: FunctionComponent<MultiSelectInputProps & ForwardProps> = forwardRef(\n (props: PropsWithoutRef<MultiSelectInputProps>, ref: Ref<HTMLInputElement>) => {\n const {\n selected = [],\n value,\n onRemove,\n onChange,\n onKeyDown,\n actions,\n readOnly,\n disabled,\n status,\n placeholder,\n autoFocus,\n ...restProps\n } = props;\n\n const inputRef = useConsolidatedRef<HTMLInputElement>(ref);\n const listRef = useRef<HTMLUListElement>(null);\n useArrows(listRef, { selector: 'div[role=\"button\"], input', cycle: false, dir: 'left-right' });\n\n const onInputKeyDown = useCallback(\n (e: KeyboardEvent<HTMLInputElement>) => {\n const lastIndex = selected.length - 1;\n if (e.key === 'Backspace' && !value && selected.length > 0) {\n onRemove?.(selected[lastIndex].id, lastIndex);\n }\n onKeyDown?.(e);\n },\n [onKeyDown, value, selected]\n );\n\n const { end } = useDirection();\n\n return (\n <Flex\n as={~~StyledMultiSelect~~}\n forwardedAs={StyledFormControl}\n container={{ alignItems: 'center' }}\n {...{\n readOnly,\n disabled,\n status\n }}\n >\n <Flex\n ref={listRef}\n as='ul'\n item={{ grow: 1 }}\n container={{ alignItems: 'center', wrap: 'wrap' }}\n onBlur={() => {\n listRef.current?.querySelectorAll<HTMLElement>('div[role=\"button\"]').forEach(el => {\n el.tabIndex = -1;\n });\n if (inputRef.current) inputRef.current.tabIndex = 0;\n }}\n >\n {selected.map((element, idx) => {\n return (\n <li key={element.id}>\n <Selectable\n id={element.id.toString()}\n disabled={readOnly \|\| disabled}\n status={status}\n onRemove={id => {\n onRemove?.(id, idx);\n inputRef.current?.focus();\n }}\n onKeyDown={(e: KeyboardEvent<Element>) => {\n // prevent browser's Back on FF\n if (e.key === 'Backspace') e.preventDefault();\n if (idx === selected.length - 1 && e.key === `Arrow${cap(end)}`)\n inputRef.current?.focus();\n }}\n >\n {element.text}\n </Selectable>\n </li>\n );\n })}\n <Flex as='li' item={{ grow: 1 }} container>\n <input\n size={5}\n ref={inputRef}\n value={value}\n // no-op avoids react uncontrolled warning\n onChange={onChange \|\| (() => {})}\n onKeyDown={onInputKeyDown}\n readOnly={readOnly \|\| !onChange}\n placeholder={selected?.length ? undefined : placeholder}\n autoComplete='off'\n // eslint-disable-next-line jsx-a11y/no-autofocus\n autoFocus={autoFocus}\n {...restProps}\n />\n </Flex>\n </Flex>\n {actions}\n </Flex>\n );\n }\n);\n\nexport default MultiSelectInput;\n"]}
1	+ {"version":3,"file":"MultiSelectInput.js","sourceRoot":"","sources":["../../../../src/components/ComboBox/MultiSelectInput/MultiSelectInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n FunctionComponent,\n forwardRef,\n Ref,\n PropsWithoutRef,\n KeyboardEvent,\n useRef,\n useCallback\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { ForwardProps } from '../../../types';\nimport { defaultThemeProp } from '../../../theme';\nimport Selectable, { StyledSelectable } from '../../Badges/Selection';\nimport { StyledFormControl } from '../../FormControl';\nimport Flex from '../../Flex';\nimport { useArrows, useConsolidatedRef, useDirection } from '../../../hooks';\nimport { cap } from '../../../utils';\nimport { StyledSelectInput } from '../ComboBox.styles';\n\nimport { MultiSelectInputProps } from './MultiSelectInput.types';\n\nexport const StyledMultiSelectInput = styled(StyledSelectInput)(({ theme }) => {\n return css`\n ul {\n list-style: none;\n }\n\n ${StyledSelectable} {\n margin: calc(0.25 * ${theme.base.spacing});\n }\n `;\n});\n\nStyledMultiSelectInput.defaultProps = defaultThemeProp;\n\nconst MultiSelectInput: FunctionComponent<MultiSelectInputProps & ForwardProps> = forwardRef(\n (props: PropsWithoutRef<MultiSelectInputProps>, ref: Ref<HTMLInputElement>) => {\n const {\n selected = [],\n value,\n onRemove,\n onChange,\n onKeyDown,\n actions,\n readOnly,\n disabled,\n status,\n placeholder,\n autoFocus,\n ...restProps\n } = props;\n\n const inputRef = useConsolidatedRef<HTMLInputElement>(ref);\n const listRef = useRef<HTMLUListElement>(null);\n useArrows(listRef, { selector: 'div[role=\"button\"], input', cycle: false, dir: 'left-right' });\n\n const onInputKeyDown = useCallback(\n (e: KeyboardEvent<HTMLInputElement>) => {\n const lastIndex = selected.length - 1;\n if (e.key === 'Backspace' && !value && selected.length > 0) {\n onRemove?.(selected[lastIndex].id, lastIndex);\n }\n onKeyDown?.(e);\n },\n [onKeyDown, value, selected]\n );\n\n const { end } = useDirection();\n\n return (\n <Flex\n as={StyledMultiSelectInput}\n forwardedAs={StyledFormControl}\n container={{ alignItems: 'center' }}\n {...{\n readOnly,\n disabled,\n status\n }}\n >\n <Flex\n ref={listRef}\n as='ul'\n item={{ grow: 1 }}\n container={{ alignItems: 'center', wrap: 'wrap' }}\n onBlur={() => {\n listRef.current?.querySelectorAll<HTMLElement>('div[role=\"button\"]').forEach(el => {\n el.tabIndex = -1;\n });\n if (inputRef.current) inputRef.current.tabIndex = 0;\n }}\n >\n {selected.map((element, idx) => {\n return (\n <li key={element.id}>\n <Selectable\n id={element.id.toString()}\n disabled={readOnly \|\| disabled}\n status={status}\n onRemove={id => {\n onRemove?.(id, idx);\n inputRef.current?.focus();\n }}\n onKeyDown={(e: KeyboardEvent<Element>) => {\n // prevent browser's Back on FF\n if (e.key === 'Backspace') e.preventDefault();\n if (idx === selected.length - 1 && e.key === `Arrow${cap(end)}`)\n inputRef.current?.focus();\n }}\n >\n {element.text}\n </Selectable>\n </li>\n );\n })}\n <Flex as='li' item={{ grow: 1 }} container>\n <input\n size={5}\n ref={inputRef}\n value={value}\n // no-op avoids react uncontrolled warning\n onChange={onChange \|\| (() => {})}\n onKeyDown={onInputKeyDown}\n readOnly={readOnly \|\| !onChange}\n placeholder={selected?.length ? undefined : placeholder}\n autoComplete='off'\n // eslint-disable-next-line jsx-a11y/no-autofocus\n autoFocus={autoFocus}\n {...restProps}\n />\n </Flex>\n </Flex>\n {actions}\n </Flex>\n );\n }\n);\n\nexport default MultiSelectInput;\n"]}

package/lib/components/ComboBox/SingleSelectInput/SingleSelectInput.d.ts CHANGED Viewed

@@ -1,6 +1,7 @@
 import { FunctionComponent } from 'react';
 import { ForwardProps } from '../../../types';
 import SingleSelectInputProps from './SingleSelectInput.types';
+export declare const StyledSingleSelectInput: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 declare const SingleSelectInput: FunctionComponent<SingleSelectInputProps & ForwardProps>;
 export default SingleSelectInput;
 //# sourceMappingURL=SingleSelectInput.d.ts.map

package/lib/components/ComboBox/SingleSelectInput/SingleSelectInput.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SingleSelectInput.d.ts","sourceRoot":"","sources":["../../../../src/components/ComboBox/SingleSelectInput/SingleSelectInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAwB,MAAM,OAAO,CAAC;AAM5E,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAG9C,OAAO,sBAAsB,MAAM,2BAA2B,CAAC;~~AA2D~~/D,QAAA,MAAM,iBAAiB,EAAE,iBAAiB,CAAC,sBAAsB,GAAG,YAAY,~~CAiC~~/E,CAAC;AAEF,eAAe,iBAAiB,CAAC"}
1	+ {"version":3,"file":"SingleSelectInput.d.ts","sourceRoot":"","sources":["../../../../src/components/ComboBox/SingleSelectInput/SingleSelectInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAwB,MAAM,OAAO,CAAC;AAM5E,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAG9C,OAAO,sBAAsB,MAAM,2BAA2B,CAAC;AAE/D,eAAO,MAAM,uBAAuB,yGAA8B,CAAC;AAuBnE,QAAA,MAAM,iBAAiB,EAAE,iBAAiB,CAAC,sBAAsB,GAAG,YAAY,CAuC/E,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/lib/components/ComboBox/SingleSelectInput/SingleSelectInput.js CHANGED Viewed

@@ -1,63 +1,28 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
-import { StyledFormControl } from '../../FormControl';
 import { defaultThemeProp } from '../../../theme';
+import { StyledFormControl } from '../../FormControl';
 import Flex from '../../Flex';
-import { StyledButton } from '../../Button';
-const StyledSingleInput = styled.div(props => {
+import { StyledSelectInput } from '../ComboBox.styles';
+export const StyledSingleSelectInput = styled(StyledSelectInput) ``;
+const StyledVisualContainer = styled.span(props => {
     const { theme: { base, components: { 'form-control': formControl, input: { height } } } } = props;
     return css `
-    height: ${height};
-    @media (pointer: coarse) {
-      min-height: ${base['hit-area']['finger-min']};
-    }
-    &:focus-within {
-      border-color: ${formControl[':focus']['border-color']};
-      box-shadow: ${formControl[':focus']['box-shadow']};
-    }
-    &:hover:not([readonly]):not([disabled]):focus-within {
-      border-color: transparent;
-    }
-    input {
-      min-width: 0;
-      width: 100%;
-      color: ${formControl['foreground-color']};
-      text-overflow: ellipsis;
-      margin-inline-start: ${base.spacing};
-    }
-    input,
-    input:focus {
-      border: none;
-      outline: none;
-      flex-grow: 1;
-      background-color: transparent;
-      &:read-only {
-        cursor: default;
-      }
-    }
-    > ${StyledButton} {
-      border-radius: calc(${base['border-radius']} * ${formControl['border-radius']});
-      min-height: calc(${height} - 2 * ${formControl['border-width']});
-      height: calc(${height} - 2 * ${formControl['border-width']});
-    }
+    border-inline-end: ${formControl['border-width']} solid ${formControl['border-color']};
+    min-width: calc(${height} - ${formControl['border-width']});
+    padding: 0 calc(0.5 * ${base.spacing});
+    height: calc(${height} - 2 * ${formControl['border-width']});
   `;
 });
-StyledSingleInput.defaultProps = defaultThemeProp;
+StyledVisualContainer.defaultProps = defaultThemeProp;
 const SingleSelectInput = forwardRef((props, ref) => {
-    const { value, readOnly, disabled, status, actions, onChange, selected, ...restProps } = props;
-    return (_jsxs(Flex, { as: StyledSingleInput, forwardedAs: StyledFormControl, container: { alignItems: 'center', wrap: 'nowrap' }, ...{
+    const { value, readOnly, disabled, status, actions, onChange, selected, visual, ...restProps } = props;
+    return (_jsxs(Flex, { as: StyledSingleSelectInput, forwardedAs: StyledFormControl, container: { alignItems: 'center', wrap: 'nowrap' }, ...{
             disabled,
             status,
             readOnly
-        }, children: [_jsx("input", { ...{
+        }, children: [visual && (_jsx(Flex, { container: { justify: 'center', alignItems: 'center' }, as: StyledVisualContainer, children: visual }, void 0)), _jsx("input", { ...{
                     ref,
                     disabled,
                     status,

package/lib/components/ComboBox/SingleSelectInput/SingleSelectInput.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SingleSelectInput.js","sourceRoot":"","sources":["../../../../src/components/ComboBox/SingleSelectInput/SingleSelectInput.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAA2C,MAAM,OAAO,CAAC;AAC5E,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,~~iBAAiB~~,EAAE,MAAM,~~mBAAmB~~,CAAC;~~AACtD~~,OAAO,EAAE,~~gBAAgB~~,EAAE,MAAM,~~gBAAgB~~,CAAC;~~AAClD~~,OAAO,IAAI,MAAM,YAAY,CAAC;AAE9B,OAAO,EAAE,~~YAAY~~,EAAE,MAAM,~~cAAc~~,CAAC;~~AAI5C~~,MAAM,~~iBAAiB~~,GAAG,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE;~~IAC3C~~,MAAM,EACJ,KAAK,EAAE,EACL,IAAI,EACJ,UAAU,EAAE,EACV,cAAc,EAAE,WAAW,EAC3B,KAAK,EAAE,EAAE,MAAM,EAAE,EAClB,EACF,EACF,GAAG,KAAK,CAAC;IAEV,OAAO,GAAG,CAAA;~~cACE~~,~~MAAM;;;oBAGA~~,~~IAAI,~~CAAC,~~UAAU~~,CAAC,~~CAAC~~,~~YAAY,CAAC;;;;sBAI5B,~~WAAW,CAAC,~~QAAQ,CAAC,CAAC,~~cAAc,CAAC;~~oBACvC~~,~~WAAW~~,~~CAAC~~,~~QAAQ,CAAC,CAAC,YAAY,CAAC;;;;;;;;;;eAUxC,~~WAAW,CAAC,~~kBAAkB~~,CAAC~~;;6BAEjB~~,IAAI,CAAC,OAAO~~;;;;;;;;;;;;;;;QAejC,YAAY~~;~~4BACQ~~,~~IAAI,CAAC,eAAe,CAAC,~~MAAM,~~WAAW,CAAC,eAAe,CAAC;yBAC1D,MAAM,~~UAAU,WAAW,CAAC,cAAc,CAAC;~~qBAC/C~~,~~MAAM,UAAU,WAAW,~~CAAC~~,cAAc,CAAC;;GAE7D,CAAC~~;AACJ,CAAC,CAAC,CAAC;AAEH,~~iBAAiB~~,CAAC,YAAY,GAAG,gBAAgB,CAAC;~~AAElD~~,MAAM,iBAAiB,GAA6D,UAAU,CAC5F,CAAC,KAA8C,EAAE,GAA0B,EAAE,EAAE;IAC7E,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,SAAS,EAAE,~~GAAG~~,KAAK,CAAC;~~IAE/F~~,OAAO,CACL,MAAC,IAAI,IACH,EAAE,EAAE,~~iBAAiB~~,~~EACrB~~,WAAW,EAAE,iBAAiB,EAC9B,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE,KAC/C;YACF,QAAQ;YACR,MAAM;YACN,QAAQ;SACT,~~aAED~~,mBACM;oBACF,GAAG;oBACH,QAAQ;oBACR,MAAM;oBACN,QAAQ;iBACT,EACD,KAAK,EAAE,KAAK,IAAI,QAAQ,EAAE,IAAI,IAAI,EAAE;gBACpC,0CAA0C;gBAC1C,QAAQ,EAAE,QAAQ,IAAI,CAAC,GAAG,EAAE,GAAE,CAAC,CAAC,EAChC,QAAQ,EAAE,QAAQ,IAAI,CAAC,QAAQ,EAC/B,YAAY,EAAC,KAAK,KACd,SAAS,WACb,EACD,OAAO,YACH,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,iBAAiB,CAAC","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { ~~StyledFormControl~~ } from '~~../../FormControl~~';\nimport { ~~defaultThemeProp~~ } from '~~../../../theme~~';\nimport Flex from '../../Flex';\nimport { ForwardProps } from '../../../types';\nimport { ~~StyledButton~~ } from '~~../../Button~~';\n\nimport SingleSelectInputProps from './SingleSelectInput.types';\n\nconst ~~StyledSingleInput~~ = styled.~~div~~(props => {\n const {\n theme: {\n base,\n components: {\n 'form-control': formControl,\n input: { height }\n }\n }\n } = props;\n\n return css`\n ~~height: ${height};\n\n @media (pointer: coarse) {\n min~~-~~height~~: ${~~base~~['~~hit~~-~~area~~']~~['finger-min']~~}~~;\n }\n\n &:focus-within~~ ~~{\n border-color:~~ ${formControl['~~:focus']['~~border-color']};\n ~~box-shadow: ${formControl[':focus']['box-shadow']};\n~~ ~~}\n\n &:hover:not([readonly]):not([disabled]):focus-within {\n border-color: transparent;\n }\n\n input {\n~~ min-width: 0;\n width: 100%;\n color: ${formControl['foreground-color']};\n text-overflow: ellipsis;\n margin-inline-start: ${base.spacing};\n }\n\n input,\n input:focus {\n border: none;\n outline: none;\n flex-grow: 1;\n background-color: transparent;\n\n &:read-only {\n cursor: default;\n }\n }\n\n > ${StyledButton} {\n border-radius: calc(${~~base['border-radius']~~} * ${formControl['border-~~radius~~']});\n ~~min-height~~: calc(~~${height}~~ ~~- 2~~ * ${~~formControl['border-width']~~});\n height: calc(${height} - 2 * ${formControl['border-width']});\n ~~}\n~~ `;\n});\n\~~nStyledSingleInput~~.defaultProps = defaultThemeProp;\n\nconst SingleSelectInput: FunctionComponent<SingleSelectInputProps & ForwardProps> = forwardRef(\n (props: PropsWithoutRef<SingleSelectInputProps>, ref: Ref<HTMLInputElement>) => {\n const { value, readOnly, disabled, status, actions, onChange, selected, ...restProps } = props;\n\n return (\n <Flex\n as={~~StyledSingleInput~~}\n forwardedAs={StyledFormControl}\n container={{ alignItems: 'center', wrap: 'nowrap' }}\n {...{\n disabled,\n status,\n readOnly\n }}\n >\n <input\n {...{\n ref,\n disabled,\n status,\n readOnly\n }}\n value={value \|\| selected?.text \|\| ''}\n // no-op avoids react uncontrolled warning\n onChange={onChange \|\| (() => {})}\n readOnly={readOnly \|\| !onChange}\n autoComplete='off'\n {...restProps}\n />\n {actions}\n </Flex>\n );\n }\n);\n\nexport default SingleSelectInput;\n"]}
1	+ {"version":3,"file":"SingleSelectInput.js","sourceRoot":"","sources":["../../../../src/components/ComboBox/SingleSelectInput/SingleSelectInput.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAA2C,MAAM,OAAO,CAAC;AAC5E,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AACtD,OAAO,IAAI,MAAM,YAAY,CAAC;AAE9B,OAAO,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAIvD,MAAM,CAAC,MAAM,uBAAuB,GAAG,MAAM,CAAC,iBAAiB,CAAC,CAAA,EAAE,CAAC;AAEnE,MAAM,qBAAqB,GAAG,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE;IAChD,MAAM,EACJ,KAAK,EAAE,EACL,IAAI,EACJ,UAAU,EAAE,EACV,cAAc,EAAE,WAAW,EAC3B,KAAK,EAAE,EAAE,MAAM,EAAE,EAClB,EACF,EACF,GAAG,KAAK,CAAC;IAEV,OAAO,GAAG,CAAA;yBACa,WAAW,CAAC,cAAc,CAAC,UAAU,WAAW,CAAC,cAAc,CAAC;sBACnE,MAAM,MAAM,WAAW,CAAC,cAAc,CAAC;4BACjC,IAAI,CAAC,OAAO;mBACrB,MAAM,UAAU,WAAW,CAAC,cAAc,CAAC;GAC3D,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,qBAAqB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEtD,MAAM,iBAAiB,GAA6D,UAAU,CAC5F,CAAC,KAA8C,EAAE,GAA0B,EAAE,EAAE;IAC7E,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,EAAE,GAAG,SAAS,EAAE,GAC5F,KAAK,CAAC;IAER,OAAO,CACL,MAAC,IAAI,IACH,EAAE,EAAE,uBAAuB,EAC3B,WAAW,EAAE,iBAAiB,EAC9B,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE,KAC/C;YACF,QAAQ;YACR,MAAM;YACN,QAAQ;SACT,aAEA,MAAM,IAAI,CACT,KAAC,IAAI,IAAC,SAAS,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAE,EAAE,EAAE,EAAE,qBAAqB,YACpF,MAAM,WACF,CACR,EACD,mBACM;oBACF,GAAG;oBACH,QAAQ;oBACR,MAAM;oBACN,QAAQ;iBACT,EACD,KAAK,EAAE,KAAK,IAAI,QAAQ,EAAE,IAAI,IAAI,EAAE;gBACpC,0CAA0C;gBAC1C,QAAQ,EAAE,QAAQ,IAAI,CAAC,GAAG,EAAE,GAAE,CAAC,CAAC,EAChC,QAAQ,EAAE,QAAQ,IAAI,CAAC,QAAQ,EAC/B,YAAY,EAAC,KAAK,KACd,SAAS,WACb,EACD,OAAO,YACH,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,iBAAiB,CAAC","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { defaultThemeProp } from '../../../theme';\nimport { StyledFormControl } from '../../FormControl';\nimport Flex from '../../Flex';\nimport { ForwardProps } from '../../../types';\nimport { StyledSelectInput } from '../ComboBox.styles';\n\nimport SingleSelectInputProps from './SingleSelectInput.types';\n\nexport const StyledSingleSelectInput = styled(StyledSelectInput)``;\n\nconst StyledVisualContainer = styled.span(props => {\n const {\n theme: {\n base,\n components: {\n 'form-control': formControl,\n input: { height }\n }\n }\n } = props;\n\n return css`\n border-inline-end: ${formControl['border-width']} solid ${formControl['border-color']};\n min-width: calc(${height} - ${formControl['border-width']});\n padding: 0 calc(0.5 * ${base.spacing});\n height: calc(${height} - 2 * ${formControl['border-width']});\n `;\n});\n\nStyledVisualContainer.defaultProps = defaultThemeProp;\n\nconst SingleSelectInput: FunctionComponent<SingleSelectInputProps & ForwardProps> = forwardRef(\n (props: PropsWithoutRef<SingleSelectInputProps>, ref: Ref<HTMLInputElement>) => {\n const { value, readOnly, disabled, status, actions, onChange, selected, visual, ...restProps } =\n props;\n\n return (\n <Flex\n as={StyledSingleSelectInput}\n forwardedAs={StyledFormControl}\n container={{ alignItems: 'center', wrap: 'nowrap' }}\n {...{\n disabled,\n status,\n readOnly\n }}\n >\n {visual && (\n <Flex container={{ justify: 'center', alignItems: 'center' }} as={StyledVisualContainer}>\n {visual}\n </Flex>\n )}\n <input\n {...{\n ref,\n disabled,\n status,\n readOnly\n }}\n value={value \|\| selected?.text \|\| ''}\n // no-op avoids react uncontrolled warning\n onChange={onChange \|\| (() => {})}\n readOnly={readOnly \|\| !onChange}\n autoComplete='off'\n {...restProps}\n />\n {actions}\n </Flex>\n );\n }\n);\n\nexport default SingleSelectInput;\n"]}

package/lib/components/ComboBox/SingleSelectInput/SingleSelectInput.types.d.ts CHANGED Viewed

@@ -1,6 +1,6 @@
 import { ChangeEvent, KeyboardEvent, ReactNode } from 'react';
 import { FormControlProps } from '../../FormControl';
-import { Selected } from '../ComboBox.types';
+import ComboBoxProps, { Selected } from '../ComboBox.types';
 export default interface SingleSelectInputProps {
     /** List of items to be represented as pills. */
     selected?: Selected;
@@ -22,5 +22,7 @@ export default interface SingleSelectInputProps {
     placeholder?: string;
     /** Additional actions related to the input. */
     actions?: ReactNode;
+    /** A visual to render a preview for the selected item */
+    visual?: ComboBoxProps['visual'];
 }
 //# sourceMappingURL=SingleSelectInput.types.d.ts.map

package/lib/components/ComboBox/SingleSelectInput/SingleSelectInput.types.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SingleSelectInput.types.d.ts","sourceRoot":"","sources":["../../../../src/components/ComboBox/SingleSelectInput/SingleSelectInput.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE9D,OAAO,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AACrD,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;~~AAE7C~~,MAAM,CAAC,OAAO,WAAW,sBAAsB;IAC7C,gDAAgD;IAChD,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,kBAAkB;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,yEAAyE;IACzE,KAAK,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/B,wDAAwD;IACxD,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACtD,yDAAyD;IACzD,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE,aAAa,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACzD,qFAAqF;IACrF,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,oDAAoD;IACpD,MAAM,CAAC,EAAE,gBAAgB,CAAC,QAAQ,CAAC,CAAC;IACpC,0CAA0C;IAC1C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,+CAA+C;IAC/C,OAAO,CAAC,EAAE,SAAS,CAAC;~~CACrB~~"}
1	+ {"version":3,"file":"SingleSelectInput.types.d.ts","sourceRoot":"","sources":["../../../../src/components/ComboBox/SingleSelectInput/SingleSelectInput.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE9D,OAAO,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AACrD,OAAO,aAAa,EAAE,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE5D,MAAM,CAAC,OAAO,WAAW,sBAAsB;IAC7C,gDAAgD;IAChD,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,kBAAkB;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,yEAAyE;IACzE,KAAK,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/B,wDAAwD;IACxD,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACtD,yDAAyD;IACzD,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE,aAAa,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACzD,qFAAqF;IACrF,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,oDAAoD;IACpD,MAAM,CAAC,EAAE,gBAAgB,CAAC,QAAQ,CAAC,CAAC;IACpC,0CAA0C;IAC1C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,+CAA+C;IAC/C,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,yDAAyD;IACzD,MAAM,CAAC,EAAE,aAAa,CAAC,QAAQ,CAAC,CAAC;CAClC"}

package/lib/components/ComboBox/SingleSelectInput/SingleSelectInput.types.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SingleSelectInput.types.js","sourceRoot":"","sources":["../../../../src/components/ComboBox/SingleSelectInput/SingleSelectInput.types.ts"],"names":[],"mappings":"","sourcesContent":["import { ChangeEvent, KeyboardEvent, ReactNode } from 'react';\n\nimport { FormControlProps } from '../../FormControl';\nimport { Selected } from '../ComboBox.types';\n\nexport default interface SingleSelectInputProps {\n /** List of items to be represented as pills. /\n selected?: Selected;\n /* Input value /\n value?: string;\n /* Callback invoked when user accepts custom value by pressing enter. /\n onNew?: (text: string) => void;\n /* Callback fired when internal input value changes. /\n onChange?: (e: ChangeEvent<HTMLInputElement>) => void;\n /* Callback fired on every key stroke on input field. /\n onKeyDown?: (e: KeyboardEvent<HTMLInputElement>) => void;\n /* Makes the input non editable and non clickable. The browser defaults to false. /\n readOnly?: FormControlProps['readOnly'];\n /* Disable the control. The browser defaults to false. /\n disabled?: FormControlProps['disabled'];\n /* Set visual state based on a validation state. /\n status?: FormControlProps['status'];\n /* Placeholder visible on empty input. /\n placeholder?: string;\n /* Additional actions related to the input. */\n actions?: ReactNode;\n}\n"]}
1	+ {"version":3,"file":"SingleSelectInput.types.js","sourceRoot":"","sources":["../../../../src/components/ComboBox/SingleSelectInput/SingleSelectInput.types.ts"],"names":[],"mappings":"","sourcesContent":["import { ChangeEvent, KeyboardEvent, ReactNode } from 'react';\n\nimport { FormControlProps } from '../../FormControl';\nimport ComboBoxProps, { Selected } from '../ComboBox.types';\n\nexport default interface SingleSelectInputProps {\n /** List of items to be represented as pills. /\n selected?: Selected;\n /* Input value /\n value?: string;\n /* Callback invoked when user accepts custom value by pressing enter. /\n onNew?: (text: string) => void;\n /* Callback fired when internal input value changes. /\n onChange?: (e: ChangeEvent<HTMLInputElement>) => void;\n /* Callback fired on every key stroke on input field. /\n onKeyDown?: (e: KeyboardEvent<HTMLInputElement>) => void;\n /* Makes the input non editable and non clickable. The browser defaults to false. /\n readOnly?: FormControlProps['readOnly'];\n /* Disable the control. The browser defaults to false. /\n disabled?: FormControlProps['disabled'];\n /* Set visual state based on a validation state. /\n status?: FormControlProps['status'];\n /* Placeholder visible on empty input. /\n placeholder?: string;\n /* Additional actions related to the input. /\n actions?: ReactNode;\n /* A visual to render a preview for the selected item */\n visual?: ComboBoxProps['visual'];\n}\n"]}

package/lib/components/Configuration/Configuration.js CHANGED Viewed

@@ -25,7 +25,7 @@ if (windowIsAvailable) {
     if (!window[metaKey]) {
         window[metaKey] = [];
     }
-    window[metaKey].push({ version: '2.0.0-rc.2' });
+    window[metaKey].push({ version: '2.0.0' });
 }
 const Configuration = ({ context = ConfigurationContext, children, locale, direction, translations: customTranslations, theme, disableDefaultFontLoading, styleSheetTarget, portalTarget, overrideMap, renderNativeControls }) => {
     const ctx = useContext(context);

package/lib/components/Configuration/Configuration.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Configuration.js","sourceRoot":"","sources":["../../../src/components/Configuration/Configuration.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,aAAa,EACb,UAAU,EAIV,OAAO,EACP,QAAQ,EACR,SAAS,EAEV,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AACzC,OAAO,EAAE,aAAa,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAErE,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAC3C,OAAO,EACL,YAAY,EACZ,gBAAgB,EAGjB,MAAM,aAAa,CAAC;AACrB,OAAO,EACL,qBAAqB,EAGrB,kBAAkB,EAClB,SAAS,IAAI,iBAAiB,EAC/B,MAAM,YAAY,CAAC;AAEpB,OAAO,EAAE,iBAAiB,EAAE,oBAAoB,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAoD3F,MAAM,cAAc,GAAG,MAAM,CAAC,GAAG,CAAC,mDAAmD,CAAC,CAAC;AAcvF,MAAM,YAAY,GAAgC,EAAE,CAAC;AACrD,MAAM,aAAa,GAAG,oBAAoB,CAAC,CAAC,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC;AAEvE,MAAM,CAAC,MAAM,oBAAoB,GAAG,aAAa,CAA4B;IAC3E,CAAC,cAAc,CAAC,EAAE,KAAK;IACvB,MAAM,EAAE,aAAa;IACrB,SAAS,EAAE,iBAAiB,CAAC,aAAa,CAAC;IAC3C,YAAY,EAAE,kBAAkB;IAChC,YAAY,EAAE,gBAAgB;IAC9B,gBAAgB,EAAE,mBAAmB,CAAC,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS;IACjE,YAAY,EAAE,mBAAmB,CAAC,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS;IAC7D,WAAW,EAAE,EAAE;IACf,oBAAoB,EAAE,KAAK;CAC5B,CAAC,CAAC;AAEH,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAAC,kCAAkC,CAAC,CAAC;AAY/D,IAAI,iBAAiB,EAAE;IACrB,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,EAAE;QACpB,MAAM,CAAC,OAAO,CAAC,GAAG,EAAE,CAAC;KACtB;IAED,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,EAAE,OAAO,EAAE,~~YAAY~~,EAAE,CAAC,CAAC;~~CACjD~~;AAED,MAAM,aAAa,GAA0C,CAAC,EAC5D,OAAO,GAAG,oBAAoB,EAC9B,QAAQ,EACR,MAAM,EACN,SAAS,EACT,YAAY,EAAE,kBAAkB,EAChC,KAAK,EACL,yBAAyB,EACzB,gBAAgB,EAChB,YAAY,EACZ,WAAW,EACX,oBAAoB,EACD,EAAE,EAAE;IACvB,MAAM,GAAG,GAAG,UAAU,CAAC,OAAO,CAAC,CAAC;IAChC,MAAM,YAAY,GAAG,KAAK;QACxB,CAAC,CAAC,IAAI,YAAY,CAAyB,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,CAAC,YAAY,EAAE,CAAC;QAC/E,CAAC,CAAC,GAAG,CAAC,YAAY,CAAC;IACrB,MAAM,YAAY,GAAG,OAAO,CAC1B,GAAG,EAAE,CAAC,qBAAqB,CAAC,EAAE,GAAG,GAAG,CAAC,YAAY,EAAE,GAAG,kBAAkB,EAAE,CAAC,EAC3E,CAAC,GAAG,CAAC,YAAY,EAAE,kBAAkB,CAAC,CACvC,CAAC;IAEF,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE9C,SAAS,CAAC,GAAG,EAAE;QACb,UAAU,CAAC,IAAI,CAAC,CAAC;IACnB,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,eAAe,GAAG,GAAG,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,CAC5C,QAAQ,CACT,CAAC,CAAC,CAAC,CACF,KAAC,iBAAiB,IAAC,qBAAqB,QAAC,MAAM,EAAE,gBAAgB,IAAI,GAAG,CAAC,gBAAgB,YACvF,8BACG,CAAC,yBAAyB;oBACzB,OAAO;oBACP,mBAAmB;oBACnB,YAAY,CACV,eACE,GAAG,EAAC,YAAY,EAChB,IAAI,EAAC,+GAA+G,WACpH,EACF,QAAQ,CAAC,IAAI,CACd,EACH,KAAC,WAAW,aAAG,EACd,QAAQ,YACR,WACe,CACrB,CAAC;IACF,OAAO,CACL,KAAC,oBAAoB,CAAC,QAAQ,IAC5B,KAAK,EAAE;YACL,MAAM,EAAE,MAAM,IAAI,GAAG,CAAC,MAAM;YAC5B,SAAS,EAAE,SAAS,IAAI,CAAC,MAAM,KAAK,SAAS,CAAC,CAAC,CAAC,iBAAiB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,SAAS,CAAC;YAC1F,YAAY;YACZ,YAAY;YACZ,CAAC,cAAc,CAAC,EAAE,IAAI;YACtB,gBAAgB,EAAE,gBAAgB,IAAI,GAAG,CAAC,gBAAgB;YAC1D,YAAY,EAAE,YAAY,IAAI,GAAG,CAAC,YAAY;YAC9C,WAAW,EAAE,WAAW,CAAC,CAAC,CAAC,EAAE,GAAG,GAAG,CAAC,WAAW,EAAE,GAAG,WAAW,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,WAAW;YACnF,oBAAoB,EAAE,oBAAoB,IAAI,GAAG,CAAC,oBAAoB;SACvE,YAED,KAAC,aAAa,IAAC,KAAK,EAAE,YAAY,CAAC,KAAK,YAAG,eAAe,WAAiB,WAC7C,CACjC,CAAC;AACJ,CAAC,CAAC;AAEF,aAAa,CAAC,YAAY,GAAG,YAAY,CAAC;AAE1C,eAAe,aAAa,CAAC","sourcesContent":["import {\n createContext,\n useContext,\n FunctionComponent,\n ComponentType,\n ReactNode,\n useMemo,\n useState,\n useEffect,\n Context\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { ThemeProvider, StyleSheetManager } from 'styled-components';\n\nimport { GlobalStyle } from '../../styles';\nimport {\n ThemeMachine,\n BaseThemeMachine,\n DefaultSettableTheme,\n DefaultThemeDefinition\n} from '../../theme';\nimport {\n createTranslationPack,\n Translation,\n TranslationPack,\n DefaultTranslation,\n direction as directionOfLocale\n} from '../../i18n';\nimport { FileInputProps } from '../File';\nimport { windowIsAvailable, navigatorIsAvailable, documentIsAvailable } from '../../utils';\n\nexport interface ConfigurationProps {\n /*\n Any components or nodes that should be impacted by the settings applied by this Configuration component.\n /\n children: ReactNode;\n /\n Context to read previous configuration values from.\n /\n context?: Context<ConfigurationContextValue>;\n /\n User locale as defined in [BCP-47](https://www.techonthenet.com/js/language_tags.php).\n /\n locale?: string;\n /\n Override rendering direction of the document. Direction will be based on the locale if now provided.\n /\n direction?: 'ltr' \| 'rtl';\n /\n Object with (partial) translations.\n /\n translations?: Translation;\n /\n Theme object used to override any or all Cosmos theme properties.\n /\n theme?: DefaultSettableTheme;\n /\n Disables loading Open Sans from Google Fonts. Only takes effect on the root configuration.\n /\n disableDefaultFontLoading?: boolean;\n /\n Target element for loading styles related to `styled-components`.\n /\n styleSheetTarget?: HTMLElement;\n /\n Target element for rendering a `ReactDOM` portal.\n /\n portalTarget?: Element;\n /\n Override map to replace Cosmos components.\n /\n overrideMap?: {\n FileInput?: ComponentType<FileInputProps>;\n };\n /\n Use native HTML5 controls for inputs instead of rich ones.\n * @default false\n */\n renderNativeControls?: boolean;\n}\n\nconst initializedKey = Symbol.for('@pega/cosmos-react-core.configuration.initialized');\n\nexport interface ConfigurationContextValue {\n [initializedKey]: boolean;\n locale: string;\n direction: ConfigurationProps['direction'];\n translations: TranslationPack;\n themeMachine: ThemeMachine<DefaultThemeDefinition>;\n styleSheetTarget?: HTMLElement;\n portalTarget?: Element;\n overrideMap: NonNullable<ConfigurationProps['overrideMap']>;\n renderNativeControls: boolean;\n}\n\nconst defaultProps: Partial<ConfigurationProps> = {};\nconst defaultLocale = navigatorIsAvailable ? navigator.language : 'en';\n\nexport const ConfigurationContext = createContext<ConfigurationContextValue>({\n [initializedKey]: false,\n locale: defaultLocale,\n direction: directionOfLocale(defaultLocale),\n translations: DefaultTranslation,\n themeMachine: BaseThemeMachine,\n styleSheetTarget: documentIsAvailable ? document.head : undefined,\n portalTarget: documentIsAvailable ? document.body : undefined,\n overrideMap: {},\n renderNativeControls: false\n});\n\nconst metaKey = Symbol.for('@pega/cosmos-react-core.metadata');\n\ninterface CosmosMetadata {\n version: string;\n}\n\ndeclare global {\n interface Window {\n [metaKey]: CosmosMetadata[];\n }\n}\n\nif (windowIsAvailable) {\n if (!window[metaKey]) {\n window[metaKey] = [];\n }\n\n window[metaKey].push({ version: '2.0.0~~-rc.2~~' });\n}\n\nconst Configuration: FunctionComponent<ConfigurationProps> = ({\n context = ConfigurationContext,\n children,\n locale,\n direction,\n translations: customTranslations,\n theme,\n disableDefaultFontLoading,\n styleSheetTarget,\n portalTarget,\n overrideMap,\n renderNativeControls\n}: ConfigurationProps) => {\n const ctx = useContext(context);\n const themeMachine = theme\n ? new ThemeMachine<DefaultThemeDefinition>({ theme, parent: ctx.themeMachine })\n : ctx.themeMachine;\n const translations = useMemo(\n () => createTranslationPack({ ...ctx.translations, ...customTranslations }),\n [ctx.translations, customTranslations]\n );\n\n const [mounted, setMounted] = useState(false);\n\n useEffect(() => {\n setMounted(true);\n }, []);\n\n const wrappedChildren = ctx[initializedKey] ? (\n children\n ) : (\n <StyleSheetManager disableVendorPrefixes target={styleSheetTarget ?? ctx.styleSheetTarget}>\n <>\n {!disableDefaultFontLoading &&\n mounted &&\n documentIsAvailable &&\n createPortal(\n <link\n rel='stylesheet'\n href='https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&display=swap'\n />,\n document.head\n )}\n <GlobalStyle />\n {children}\n </>\n </StyleSheetManager>\n );\n return (\n <ConfigurationContext.Provider\n value={{\n locale: locale ?? ctx.locale,\n direction: direction ?? (locale !== undefined ? directionOfLocale(locale) : ctx.direction),\n translations,\n themeMachine,\n [initializedKey]: true,\n styleSheetTarget: styleSheetTarget ?? ctx.styleSheetTarget,\n portalTarget: portalTarget ?? ctx.portalTarget,\n overrideMap: overrideMap ? { ...ctx.overrideMap, ...overrideMap } : ctx.overrideMap,\n renderNativeControls: renderNativeControls ?? ctx.renderNativeControls\n }}\n >\n <ThemeProvider theme={themeMachine.theme}>{wrappedChildren}</ThemeProvider>\n </ConfigurationContext.Provider>\n );\n};\n\nConfiguration.defaultProps = defaultProps;\n\nexport default Configuration;\n"]}
1	+ {"version":3,"file":"Configuration.js","sourceRoot":"","sources":["../../../src/components/Configuration/Configuration.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n createContext,\n useContext,\n FunctionComponent,\n ComponentType,\n ReactNode,\n useMemo,\n useState,\n useEffect,\n Context\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { ThemeProvider, StyleSheetManager } from 'styled-components';\n\nimport { GlobalStyle } from '../../styles';\nimport {\n ThemeMachine,\n BaseThemeMachine,\n DefaultSettableTheme,\n DefaultThemeDefinition\n} from '../../theme';\nimport {\n createTranslationPack,\n Translation,\n TranslationPack,\n DefaultTranslation,\n direction as directionOfLocale\n} from '../../i18n';\nimport { FileInputProps } from '../File';\nimport { windowIsAvailable, navigatorIsAvailable, documentIsAvailable } from '../../utils';\n\nexport interface ConfigurationProps {\n /*\n Any components or nodes that should be impacted by the settings applied by this Configuration component.\n /\n children: ReactNode;\n /\n Context to read previous configuration values from.\n /\n context?: Context<ConfigurationContextValue>;\n /\n User locale as defined in [BCP-47](https://www.techonthenet.com/js/language_tags.php).\n /\n locale?: string;\n /\n Override rendering direction of the document. Direction will be based on the locale if now provided.\n /\n direction?: 'ltr' \| 'rtl';\n /\n Object with (partial) translations.\n /\n translations?: Translation;\n /\n Theme object used to override any or all Cosmos theme properties.\n /\n theme?: DefaultSettableTheme;\n /\n Disables loading Open Sans from Google Fonts. Only takes effect on the root configuration.\n /\n disableDefaultFontLoading?: boolean;\n /\n Target element for loading styles related to `styled-components`.\n /\n styleSheetTarget?: HTMLElement;\n /\n Target element for rendering a `ReactDOM` portal.\n /\n portalTarget?: Element;\n /\n Override map to replace Cosmos components.\n /\n overrideMap?: {\n FileInput?: ComponentType<FileInputProps>;\n };\n /\n Use native HTML5 controls for inputs instead of rich ones.\n * @default false\n */\n renderNativeControls?: boolean;\n}\n\nconst initializedKey = Symbol.for('@pega/cosmos-react-core.configuration.initialized');\n\nexport interface ConfigurationContextValue {\n [initializedKey]: boolean;\n locale: string;\n direction: ConfigurationProps['direction'];\n translations: TranslationPack;\n themeMachine: ThemeMachine<DefaultThemeDefinition>;\n styleSheetTarget?: HTMLElement;\n portalTarget?: Element;\n overrideMap: NonNullable<ConfigurationProps['overrideMap']>;\n renderNativeControls: boolean;\n}\n\nconst defaultProps: Partial<ConfigurationProps> = {};\nconst defaultLocale = navigatorIsAvailable ? navigator.language : 'en';\n\nexport const ConfigurationContext = createContext<ConfigurationContextValue>({\n [initializedKey]: false,\n locale: defaultLocale,\n direction: directionOfLocale(defaultLocale),\n translations: DefaultTranslation,\n themeMachine: BaseThemeMachine,\n styleSheetTarget: documentIsAvailable ? document.head : undefined,\n portalTarget: documentIsAvailable ? document.body : undefined,\n overrideMap: {},\n renderNativeControls: false\n});\n\nconst metaKey = Symbol.for('@pega/cosmos-react-core.metadata');\n\ninterface CosmosMetadata {\n version: string;\n}\n\ndeclare global {\n interface Window {\n [metaKey]: CosmosMetadata[];\n }\n}\n\nif (windowIsAvailable) {\n if (!window[metaKey]) {\n window[metaKey] = [];\n }\n\n window[metaKey].push({ version: '2.0.0' });\n}\n\nconst Configuration: FunctionComponent<ConfigurationProps> = ({\n context = ConfigurationContext,\n children,\n locale,\n direction,\n translations: customTranslations,\n theme,\n disableDefaultFontLoading,\n styleSheetTarget,\n portalTarget,\n overrideMap,\n renderNativeControls\n}: ConfigurationProps) => {\n const ctx = useContext(context);\n const themeMachine = theme\n ? new ThemeMachine<DefaultThemeDefinition>({ theme, parent: ctx.themeMachine })\n : ctx.themeMachine;\n const translations = useMemo(\n () => createTranslationPack({ ...ctx.translations, ...customTranslations }),\n [ctx.translations, customTranslations]\n );\n\n const [mounted, setMounted] = useState(false);\n\n useEffect(() => {\n setMounted(true);\n }, []);\n\n const wrappedChildren = ctx[initializedKey] ? (\n children\n ) : (\n <StyleSheetManager disableVendorPrefixes target={styleSheetTarget ?? ctx.styleSheetTarget}>\n <>\n {!disableDefaultFontLoading &&\n mounted &&\n documentIsAvailable &&\n createPortal(\n <link\n rel='stylesheet'\n href='https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&display=swap'\n />,\n document.head\n )}\n <GlobalStyle />\n {children}\n </>\n </StyleSheetManager>\n );\n return (\n <ConfigurationContext.Provider\n value={{\n locale: locale ?? ctx.locale,\n direction: direction ?? (locale !== undefined ? directionOfLocale(locale) : ctx.direction),\n translations,\n themeMachine,\n [initializedKey]: true,\n styleSheetTarget: styleSheetTarget ?? ctx.styleSheetTarget,\n portalTarget: portalTarget ?? ctx.portalTarget,\n overrideMap: overrideMap ? { ...ctx.overrideMap, ...overrideMap } : ctx.overrideMap,\n renderNativeControls: renderNativeControls ?? ctx.renderNativeControls\n }}\n >\n <ThemeProvider theme={themeMachine.theme}>{wrappedChildren}</ThemeProvider>\n </ConfigurationContext.Provider>\n );\n};\n\nConfiguration.defaultProps = defaultProps;\n\nexport default Configuration;\n"]}

package/lib/components/DateTime/Input/TimeInput.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TimeInput.d.ts","sourceRoot":"","sources":["../../../../src/components/DateTime/Input/TimeInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,iBAAiB,EAOlB,MAAM,OAAO,CAAC;AAGf,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAS9C,OAAmB,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAGlE,OAAO,aAA4C,MAAM,mBAAmB,CAAC;~~AAE7E~~,OAAO,EAKL,WAAW,EAEZ,MAAM,SAAS,CAAC;AAQjB,MAAM,WAAW,cAAe,SAAQ,aAAa;IACnD;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC;;OAEG;IACH,WAAW,CAAC,EAAE,WAAW,CAAC;CAC3B;AAED,eAAO,MAAM,eAAe,qHAE3B,CAAC;AAyDF,QAAA,MAAM,SAAS,EAAE,iBAAiB,CAAC,cAAc,GAAG,YAAY,~~CAwR~~/D,CAAC;AAEF,eAAe,SAAS,CAAC"}
1	+ {"version":3,"file":"TimeInput.d.ts","sourceRoot":"","sources":["../../../../src/components/DateTime/Input/TimeInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,iBAAiB,EAOlB,MAAM,OAAO,CAAC;AAGf,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAS9C,OAAmB,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAGlE,OAAO,aAA4C,MAAM,mBAAmB,CAAC;AAG7E,OAAO,EAKL,WAAW,EAEZ,MAAM,SAAS,CAAC;AAQjB,MAAM,WAAW,cAAe,SAAQ,aAAa;IACnD;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC;;OAEG;IACH,WAAW,CAAC,EAAE,WAAW,CAAC;CAC3B;AAED,eAAO,MAAM,eAAe,qHAE3B,CAAC;AAyDF,QAAA,MAAM,SAAS,EAAE,iBAAiB,CAAC,cAAc,GAAG,YAAY,CAiR/D,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/lib/components/DateTime/Input/TimeInput.js CHANGED Viewed

@@ -12,6 +12,7 @@ import Popover from '../../Popover';
 import TimePicker from '../Picker/TimePicker';
 import { useConfiguration, useConsolidatedRef, useFocusWithin, useI18n } from '../../../hooks';
 import { StyledFormControl } from '../../FormControl';
+import { sameWidth } from '../../Popover/modifiers';
 import { getDateFormat, parseToDate, is12HClockFormat, validateTime, getTimeOptions } from './utils';
 import StyledDateTime, { StyledInputContainer } from './DateTime.styles';
 import PartInput from './PartInput';
@@ -127,20 +128,13 @@ const TimeInput = forwardRef((props, ref) => {
     const containerRef = useConsolidatedRef(ref);
     useFocusWithin([containerRef], onFocusChange);
     const Picker = (_jsxs(_Fragment, { children: [_jsx(Button, { variant: 'simple', icon: true, ref: setButtonEl, onClick: () => setOpen(cur => !cur), "aria-label": t(open ? 'close_time_button_a11y' : 'open_time_button_a11y'), readOnly: readOnly, disabled: disabled, children: _jsx(Icon, { name: open ? 'times' : 'clock' }, void 0) }, void 0), _jsx(Popover, { show: open, ref: setPopoverRef, target: containerRef.current, placement: 'bottom-end', strategy: 'fixed', modifiers: [
-                    {
-                        name: 'sameWidth',
-                        enabled: true,
-                        phase: 'beforeWrite',
-                        fn({ state }) {
-                            state.styles.popper.width = `${state.rects.reference.width}px`;
-                        }
-                    },
                     {
                         name: 'flip',
                         options: {
                             fallbackPlacements: ['top-end']
                         }
-                    }
+                    },
+                    sameWidth
                 ], children: _jsx(TimePicker, { selected: currentlySelectedTime(), interval: pickerInterval, onSelect: selected => {
                         hourInputRef.current.value = (is12h ? convertTo12h(selected.getUTCHours()) : selected.getUTCHours())
                             .toString()

package/lib/components/DateTime/Input/TimeInput.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TimeInput.js","sourceRoot":"","sources":["../../../../src/components/DateTime/Input/TimeInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n FunctionComponent,\n useRef,\n useState,\n ChangeEvent,\n forwardRef,\n Ref,\n PropsWithoutRef\n} from 'react';\nimport styled from 'styled-components';\n\nimport { ForwardProps } from '../../../types';\nimport FormField from '../../FormField';\nimport Flex from '../../Flex';\nimport Select, { Option } from '../../Select';\nimport Button from '../../Button';\nimport Icon, { registerIcon } from '../../Icon';\nimport * as timesIcon from '../../Icon/icons/times.icon';\nimport * as clockIcon from '../../Icon/icons/clock.icon';\nimport Popover from '../../Popover';\nimport TimePicker, { MinuteInterval } from '../Picker/TimePicker';\nimport { useConfiguration, useConsolidatedRef, useFocusWithin, useI18n } from '../../../hooks';\nimport { StyledFormControl } from '../../FormControl';\nimport DateTimeProps, { DateTimeCallbackParameter } from '../DateTime.types';\n\nimport {\n getDateFormat,\n parseToDate,\n is12HClockFormat,\n validateTime,\n ClockFormat,\n getTimeOptions\n} from './utils';\nimport StyledDateTime, { StyledInputContainer } from './DateTime.styles';\nimport PartInput from './PartInput';\nimport usePickerButton from './usePickerButton';\nimport useAutoFocusNextInput from './useAutoFocusNextInput';\n\nregisterIcon(timesIcon, clockIcon);\n\nexport interface TimeInputProps extends DateTimeProps {\n /*\n Display the time with seconds.\n * @default false\n /\n withSeconds?: boolean;\n /\n Defines interval for time picker options (in minutes).\n * @default 30\n /\n pickerInterval?: MinuteInterval;\n /\n Defines clock format that overrides locale based format\n */\n clockFormat?: ClockFormat;\n}\n\nexport const StyledTimeInput = styled(StyledDateTime)<TimeInputProps>`\n padding-inline-end: 0;\n`;\n\nfunction getMeridiem(hour: number) {\n return hour >= 12 ? 'PM' : 'AM';\n}\n\nconst convertTo12h = (hour: number) => {\n let converted: number = hour;\n if (hour > 12) converted = hour - 12;\n else if (hour === 0) converted = 12;\n return converted;\n};\n\nconst convertTo24h = (hour: number, meridiem: string) => {\n let converted: number = hour;\n if (meridiem === 'PM' && hour < 12) converted = hour + 12;\n else if (meridiem === 'AM' && hour === 12) converted = 0;\n return converted;\n};\n\nconst convertToCallbackParameter = (\n date: Date,\n parts: (string \| undefined)[],\n meridiem?: string\n): DateTimeCallbackParameter => {\n if (parts.every(Boolean)) {\n const [hour, minute, second = date.getUTCSeconds()] = parts.map(Number);\n\n const is12h = meridiem !== undefined;\n\n if (!validateTime(hour, minute, second, is12h)) {\n return {\n valueAsISOString: '',\n valueAsTimestamp: NaN,\n state: 'invalid'\n };\n }\n\n date.setUTCHours(is12h ? convertTo24h(hour, meridiem!) : hour, minute, second);\n return {\n valueAsISOString: date.toISOString(),\n valueAsTimestamp: date.getTime()\n };\n }\n if (parts.every(p => !p)) {\n return {\n valueAsISOString: '',\n valueAsTimestamp: undefined\n };\n }\n return {\n valueAsISOString: '',\n valueAsTimestamp: NaN,\n state: 'incomplete'\n };\n};\n\nconst TimeInput: FunctionComponent<TimeInputProps & ForwardProps> = forwardRef(\n (props: PropsWithoutRef<TimeInputProps>, ref: Ref<HTMLFieldSetElement>) => {\n const { locale } = useConfiguration();\n const {\n defaultValue,\n value = defaultValue,\n id,\n label,\n labelHidden,\n status,\n withSeconds = false,\n pickerInterval = 30,\n clockFormat,\n info = getDateFormat(locale, getTimeOptions(withSeconds), true).join(''),\n required,\n readOnly,\n disabled,\n onChange,\n onFocus,\n onBlur,\n autoFocus,\n ...restProps\n } = props;\n\n const date = value !== undefined ? parseToDate(value) : undefined;\n\n const is12h = clockFormat ? clockFormat === 12 : is12HClockFormat(locale);\n const [meridiem, setMeridiem] = useState<'AM' \| 'PM' \| undefined>(\n is12h ? () => (date ? getMeridiem(date.getUTCHours()) : 'AM') : undefined\n );\n\n const [hourInputRef, minuteInputRef, secondInputRef, meridiemSelectRef] = [\n useRef<HTMLInputElement>(null),\n useRef<HTMLInputElement>(null),\n useRef<HTMLInputElement>(null),\n useRef<HTMLSelectElement>(null)\n ];\n\n useAutoFocusNextInput([hourInputRef, minuteInputRef, secondInputRef]);\n\n const pickParts = () => {\n return [\n hourInputRef.current?.value \|\| undefined,\n minuteInputRef.current?.value \|\| undefined\n ].concat(withSeconds ? [secondInputRef.current?.value] : []);\n };\n\n const currentlySelectedTime = () => {\n const parts = pickParts();\n\n if (parts.every(Boolean)) {\n const [hour, minute, second = 0] = parts.map(Number);\n const current = date ?? new Date();\n return validateTime(hour, minute, second, is12h)\n ? new Date(\n current.setUTCHours(is12h ? convertTo24h(hour, meridiem!) : hour, minute, second)\n )\n : undefined;\n }\n };\n\n const inputContainerRef = useRef<HTMLDivElement>(null);\n\n const onFocusChange = (focused: boolean) => {\n const currentMeridiem = meridiemSelectRef.current?.value \|\| undefined;\n const callbackParam = convertToCallbackParameter(\n date ? new Date(date) : new Date(),\n pickParts(),\n is12h ? currentMeridiem : undefined\n );\n if (onFocus && focused) onFocus(callbackParam);\n if (!focused) {\n if (inputContainerRef.current) inputContainerRef.current.scrollTop = 0;\n onBlur?.(callbackParam);\n }\n };\n\n const onInputChange = () => {\n const currentMeridiem = meridiemSelectRef.current?.value \|\| undefined;\n onChange?.(\n convertToCallbackParameter(\n date ? new Date(date) : new Date(),\n pickParts(),\n is12h ? currentMeridiem : undefined\n )\n );\n };\n\n const t = useI18n();\n\n const hour = date && is12h ? convertTo12h(date.getUTCHours()) : date?.getUTCHours();\n const HourInput = (\n <PartInput\n key='hour'\n placeholder={t('hour_placeholder')}\n aria-label={t('hour_label_a11y')}\n value={hour}\n onChange={onInputChange}\n size={2}\n maxLength={2}\n readOnly={readOnly}\n min={is12h ? 1 : 0}\n max={is12h ? 12 : 23}\n ref={hourInputRef}\n autoFocus={autoFocus}\n />\n );\n\n const MinuteInput = (\n <PartInput\n key='minute'\n placeholder={t('minute_placeholder')}\n aria-label={t('minute_label_a11y')}\n value={date?.getUTCMinutes()}\n onChange={onInputChange}\n size={2}\n maxLength={2}\n readOnly={readOnly}\n max={59}\n ref={minuteInputRef}\n />\n );\n\n const SecondInput = (\n <PartInput\n key='second'\n placeholder={t('second_placeholder')}\n aria-label={t('second_label_a11y')}\n value={date?.getUTCSeconds()}\n onChange={onInputChange}\n size={2}\n maxLength={2}\n readOnly={readOnly}\n max={59}\n ref={secondInputRef}\n />\n );\n\n const Period = (\n <Select\n ref={meridiemSelectRef}\n aria-label={t('meridiem_label_a11y')}\n key='period'\n value={meridiem}\n required={required}\n disabled={disabled}\n onChange={(ev: ChangeEvent<HTMLSelectElement>) => {\n setMeridiem(ev.target.value as 'AM' \| 'PM');\n onInputChange();\n }}\n readOnly={readOnly}\n >\n <Option value='AM'>{t('meridiem_value_am')}</Option>\n <Option value='PM'>{t('meridiem_value_pm')}</Option>\n </Select>\n );\n\n const [open, setOpen, , setPopoverRef, buttonEl, setButtonEl] = usePickerButton();\n\n const containerRef = useConsolidatedRef(ref);\n useFocusWithin([containerRef], onFocusChange);\n\n const Picker = (\n <>\n <Button\n variant='simple'\n icon\n ref={setButtonEl}\n onClick={() => setOpen(cur => !cur)}\n aria-label={t(open ? 'close_time_button_a11y' : 'open_time_button_a11y')}\n readOnly={readOnly}\n disabled={disabled}\n >\n <Icon name={open ? 'times' : 'clock'} />\n </Button>\n\n <Popover\n show={open}\n ref={setPopoverRef}\n target={containerRef.current}\n placement='bottom-end'\n strategy='fixed'\n modifiers={[\n {\n name: 'sameWidth',\n enabled: true,\n phase: 'beforeWrite',\n fn({ state }) {\n state.styles.popper.width = `${state.rects.reference.width}px`;\n }\n },\n {\n name: 'flip',\n options: {\n fallbackPlacements: ['top-end']\n }\n }\n ]}\n >\n <TimePicker\n selected={currentlySelectedTime()}\n interval={pickerInterval}\n onSelect={selected => {\n hourInputRef.current!.value = (\n is12h ? convertTo12h(selected.getUTCHours()) : selected.getUTCHours()\n )\n .toString()\n .padStart(2, '0');\n minuteInputRef.current!.value = selected.getUTCMinutes().toString().padStart(2, '0');\n if (withSeconds)\n secondInputRef.current!.value = selected\n .getUTCSeconds()\n .toString()\n .padStart(2, '0');\n if (meridiemSelectRef.current) {\n meridiemSelectRef.current!.value = getMeridiem(selected.getUTCHours());\n }\n setMeridiem(getMeridiem(selected.getUTCHours()));\n setOpen(false);\n buttonEl?.focus();\n onInputChange();\n }}\n clockFormat={clockFormat}\n />\n </Popover>\n </>\n );\n\n const Comp = (\n <Flex\n as={StyledTimeInput}\n forwardedAs={StyledFormControl}\n container={{ alignItems: 'center', wrap: 'nowrap' }}\n status={status}\n readOnly={readOnly}\n disabled={disabled}\n ref={containerRef}\n onClick={(e: MouseEvent) => {\n if (e.target === containerRef.current) hourInputRef.current?.focus();\n }}\n {...restProps}\n >\n <Flex\n ref={inputContainerRef}\n as={StyledInputContainer}\n container={{ alignItems: 'center', wrap: 'wrap' }}\n >\n {getDateFormat(locale, getTimeOptions(withSeconds, is12h)).map(part => {\n switch (part) {\n case 'hh':\n return HourInput;\n case 'mm':\n return MinuteInput;\n case 'ss':\n return SecondInput;\n case 'AM':\n case 'PM':\n return Period;\n default:\n return part;\n }\n })}\n </Flex>\n {!readOnly && Picker}\n </Flex>\n );\n\n return label ? (\n <FormField\n as='fieldset'\n labelAs='legend'\n {...{ label, labelHidden, id, info, status, required, disabled }}\n ref={ref}\n >\n {Comp}\n </FormField>\n ) : (\n Comp\n );\n }\n);\n\nexport default TimeInput;\n"]}
1	+ {"version":3,"file":"TimeInput.js","sourceRoot":"","sources":["../../../../src/components/DateTime/Input/TimeInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n FunctionComponent,\n useRef,\n useState,\n ChangeEvent,\n forwardRef,\n Ref,\n PropsWithoutRef\n} from 'react';\nimport styled from 'styled-components';\n\nimport { ForwardProps } from '../../../types';\nimport FormField from '../../FormField';\nimport Flex from '../../Flex';\nimport Select, { Option } from '../../Select';\nimport Button from '../../Button';\nimport Icon, { registerIcon } from '../../Icon';\nimport * as timesIcon from '../../Icon/icons/times.icon';\nimport * as clockIcon from '../../Icon/icons/clock.icon';\nimport Popover from '../../Popover';\nimport TimePicker, { MinuteInterval } from '../Picker/TimePicker';\nimport { useConfiguration, useConsolidatedRef, useFocusWithin, useI18n } from '../../../hooks';\nimport { StyledFormControl } from '../../FormControl';\nimport DateTimeProps, { DateTimeCallbackParameter } from '../DateTime.types';\nimport { sameWidth } from '../../Popover/modifiers';\n\nimport {\n getDateFormat,\n parseToDate,\n is12HClockFormat,\n validateTime,\n ClockFormat,\n getTimeOptions\n} from './utils';\nimport StyledDateTime, { StyledInputContainer } from './DateTime.styles';\nimport PartInput from './PartInput';\nimport usePickerButton from './usePickerButton';\nimport useAutoFocusNextInput from './useAutoFocusNextInput';\n\nregisterIcon(timesIcon, clockIcon);\n\nexport interface TimeInputProps extends DateTimeProps {\n /*\n Display the time with seconds.\n * @default false\n /\n withSeconds?: boolean;\n /\n Defines interval for time picker options (in minutes).\n * @default 30\n /\n pickerInterval?: MinuteInterval;\n /\n Defines clock format that overrides locale based format\n */\n clockFormat?: ClockFormat;\n}\n\nexport const StyledTimeInput = styled(StyledDateTime)<TimeInputProps>`\n padding-inline-end: 0;\n`;\n\nfunction getMeridiem(hour: number) {\n return hour >= 12 ? 'PM' : 'AM';\n}\n\nconst convertTo12h = (hour: number) => {\n let converted: number = hour;\n if (hour > 12) converted = hour - 12;\n else if (hour === 0) converted = 12;\n return converted;\n};\n\nconst convertTo24h = (hour: number, meridiem: string) => {\n let converted: number = hour;\n if (meridiem === 'PM' && hour < 12) converted = hour + 12;\n else if (meridiem === 'AM' && hour === 12) converted = 0;\n return converted;\n};\n\nconst convertToCallbackParameter = (\n date: Date,\n parts: (string \| undefined)[],\n meridiem?: string\n): DateTimeCallbackParameter => {\n if (parts.every(Boolean)) {\n const [hour, minute, second = date.getUTCSeconds()] = parts.map(Number);\n\n const is12h = meridiem !== undefined;\n\n if (!validateTime(hour, minute, second, is12h)) {\n return {\n valueAsISOString: '',\n valueAsTimestamp: NaN,\n state: 'invalid'\n };\n }\n\n date.setUTCHours(is12h ? convertTo24h(hour, meridiem!) : hour, minute, second);\n return {\n valueAsISOString: date.toISOString(),\n valueAsTimestamp: date.getTime()\n };\n }\n if (parts.every(p => !p)) {\n return {\n valueAsISOString: '',\n valueAsTimestamp: undefined\n };\n }\n return {\n valueAsISOString: '',\n valueAsTimestamp: NaN,\n state: 'incomplete'\n };\n};\n\nconst TimeInput: FunctionComponent<TimeInputProps & ForwardProps> = forwardRef(\n (props: PropsWithoutRef<TimeInputProps>, ref: Ref<HTMLFieldSetElement>) => {\n const { locale } = useConfiguration();\n const {\n defaultValue,\n value = defaultValue,\n id,\n label,\n labelHidden,\n status,\n withSeconds = false,\n pickerInterval = 30,\n clockFormat,\n info = getDateFormat(locale, getTimeOptions(withSeconds), true).join(''),\n required,\n readOnly,\n disabled,\n onChange,\n onFocus,\n onBlur,\n autoFocus,\n ...restProps\n } = props;\n\n const date = value !== undefined ? parseToDate(value) : undefined;\n\n const is12h = clockFormat ? clockFormat === 12 : is12HClockFormat(locale);\n const [meridiem, setMeridiem] = useState<'AM' \| 'PM' \| undefined>(\n is12h ? () => (date ? getMeridiem(date.getUTCHours()) : 'AM') : undefined\n );\n\n const [hourInputRef, minuteInputRef, secondInputRef, meridiemSelectRef] = [\n useRef<HTMLInputElement>(null),\n useRef<HTMLInputElement>(null),\n useRef<HTMLInputElement>(null),\n useRef<HTMLSelectElement>(null)\n ];\n\n useAutoFocusNextInput([hourInputRef, minuteInputRef, secondInputRef]);\n\n const pickParts = () => {\n return [\n hourInputRef.current?.value \|\| undefined,\n minuteInputRef.current?.value \|\| undefined\n ].concat(withSeconds ? [secondInputRef.current?.value] : []);\n };\n\n const currentlySelectedTime = () => {\n const parts = pickParts();\n\n if (parts.every(Boolean)) {\n const [hour, minute, second = 0] = parts.map(Number);\n const current = date ?? new Date();\n return validateTime(hour, minute, second, is12h)\n ? new Date(\n current.setUTCHours(is12h ? convertTo24h(hour, meridiem!) : hour, minute, second)\n )\n : undefined;\n }\n };\n\n const inputContainerRef = useRef<HTMLDivElement>(null);\n\n const onFocusChange = (focused: boolean) => {\n const currentMeridiem = meridiemSelectRef.current?.value \|\| undefined;\n const callbackParam = convertToCallbackParameter(\n date ? new Date(date) : new Date(),\n pickParts(),\n is12h ? currentMeridiem : undefined\n );\n if (onFocus && focused) onFocus(callbackParam);\n if (!focused) {\n if (inputContainerRef.current) inputContainerRef.current.scrollTop = 0;\n onBlur?.(callbackParam);\n }\n };\n\n const onInputChange = () => {\n const currentMeridiem = meridiemSelectRef.current?.value \|\| undefined;\n onChange?.(\n convertToCallbackParameter(\n date ? new Date(date) : new Date(),\n pickParts(),\n is12h ? currentMeridiem : undefined\n )\n );\n };\n\n const t = useI18n();\n\n const hour = date && is12h ? convertTo12h(date.getUTCHours()) : date?.getUTCHours();\n const HourInput = (\n <PartInput\n key='hour'\n placeholder={t('hour_placeholder')}\n aria-label={t('hour_label_a11y')}\n value={hour}\n onChange={onInputChange}\n size={2}\n maxLength={2}\n readOnly={readOnly}\n min={is12h ? 1 : 0}\n max={is12h ? 12 : 23}\n ref={hourInputRef}\n autoFocus={autoFocus}\n />\n );\n\n const MinuteInput = (\n <PartInput\n key='minute'\n placeholder={t('minute_placeholder')}\n aria-label={t('minute_label_a11y')}\n value={date?.getUTCMinutes()}\n onChange={onInputChange}\n size={2}\n maxLength={2}\n readOnly={readOnly}\n max={59}\n ref={minuteInputRef}\n />\n );\n\n const SecondInput = (\n <PartInput\n key='second'\n placeholder={t('second_placeholder')}\n aria-label={t('second_label_a11y')}\n value={date?.getUTCSeconds()}\n onChange={onInputChange}\n size={2}\n maxLength={2}\n readOnly={readOnly}\n max={59}\n ref={secondInputRef}\n />\n );\n\n const Period = (\n <Select\n ref={meridiemSelectRef}\n aria-label={t('meridiem_label_a11y')}\n key='period'\n value={meridiem}\n required={required}\n disabled={disabled}\n onChange={(ev: ChangeEvent<HTMLSelectElement>) => {\n setMeridiem(ev.target.value as 'AM' \| 'PM');\n onInputChange();\n }}\n readOnly={readOnly}\n >\n <Option value='AM'>{t('meridiem_value_am')}</Option>\n <Option value='PM'>{t('meridiem_value_pm')}</Option>\n </Select>\n );\n\n const [open, setOpen, , setPopoverRef, buttonEl, setButtonEl] = usePickerButton();\n\n const containerRef = useConsolidatedRef(ref);\n useFocusWithin([containerRef], onFocusChange);\n\n const Picker = (\n <>\n <Button\n variant='simple'\n icon\n ref={setButtonEl}\n onClick={() => setOpen(cur => !cur)}\n aria-label={t(open ? 'close_time_button_a11y' : 'open_time_button_a11y')}\n readOnly={readOnly}\n disabled={disabled}\n >\n <Icon name={open ? 'times' : 'clock'} />\n </Button>\n\n <Popover\n show={open}\n ref={setPopoverRef}\n target={containerRef.current}\n placement='bottom-end'\n strategy='fixed'\n modifiers={[\n {\n name: 'flip',\n options: {\n fallbackPlacements: ['top-end']\n }\n },\n sameWidth\n ]}\n >\n <TimePicker\n selected={currentlySelectedTime()}\n interval={pickerInterval}\n onSelect={selected => {\n hourInputRef.current!.value = (\n is12h ? convertTo12h(selected.getUTCHours()) : selected.getUTCHours()\n )\n .toString()\n .padStart(2, '0');\n minuteInputRef.current!.value = selected.getUTCMinutes().toString().padStart(2, '0');\n if (withSeconds)\n secondInputRef.current!.value = selected\n .getUTCSeconds()\n .toString()\n .padStart(2, '0');\n if (meridiemSelectRef.current) {\n meridiemSelectRef.current!.value = getMeridiem(selected.getUTCHours());\n }\n setMeridiem(getMeridiem(selected.getUTCHours()));\n setOpen(false);\n buttonEl?.focus();\n onInputChange();\n }}\n clockFormat={clockFormat}\n />\n </Popover>\n </>\n );\n\n const Comp = (\n <Flex\n as={StyledTimeInput}\n forwardedAs={StyledFormControl}\n container={{ alignItems: 'center', wrap: 'nowrap' }}\n status={status}\n readOnly={readOnly}\n disabled={disabled}\n ref={containerRef}\n onClick={(e: MouseEvent) => {\n if (e.target === containerRef.current) hourInputRef.current?.focus();\n }}\n {...restProps}\n >\n <Flex\n ref={inputContainerRef}\n as={StyledInputContainer}\n container={{ alignItems: 'center', wrap: 'wrap' }}\n >\n {getDateFormat(locale, getTimeOptions(withSeconds, is12h)).map(part => {\n switch (part) {\n case 'hh':\n return HourInput;\n case 'mm':\n return MinuteInput;\n case 'ss':\n return SecondInput;\n case 'AM':\n case 'PM':\n return Period;\n default:\n return part;\n }\n })}\n </Flex>\n {!readOnly && Picker}\n </Flex>\n );\n\n return label ? (\n <FormField\n as='fieldset'\n labelAs='legend'\n {...{ label, labelHidden, id, info, status, required, disabled }}\n ref={ref}\n >\n {Comp}\n </FormField>\n ) : (\n Comp\n );\n }\n);\n\nexport default TimeInput;\n"]}

package/lib/components/DateTime/index.d.ts CHANGED Viewed

@@ -10,6 +10,7 @@ export { default as DateRangeInput } from './Input/DateRangeInput';
 export type { DateRangeInputProps } from './Input/DateRangeInput';
 export { default as DurationInput } from './Input/Duration/DurationInput';
 export type { default as DurationInputProps } from './Input/Duration/DurationInput.types';
+export { Format } from './Input/Duration/DurationInput.types';
 export { default as DateTimeInput } from './Input/DateTimeInput';
 export type { DateTimeInputProps } from './Input/DateTimeInput';
 export { default as DayOfWeekInput } from './Input/DayOfWeekInput';

package/lib/components/DateTime/index.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/DateTime/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,mBAAmB,CAAC;AACzD,YAAY,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AACxD,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,mBAAmB,CAAC;AACzD,YAAY,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AACxD,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAC3D,YAAY,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAC1D,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,mBAAmB,CAAC;AACzD,YAAY,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AACxD,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,wBAAwB,CAAC;AACnE,YAAY,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,gCAAgC,CAAC;AAC1E,YAAY,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,sCAAsC,CAAC;AAC1F,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,uBAAuB,CAAC;AACjE,YAAY,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,wBAAwB,CAAC;AACnE,YAAY,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAC/D,YAAY,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAE9D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAC5D,YAAY,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAC5D,YAAY,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAE5E,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAC/D,YAAY,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAC/D,YAAY,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC"}
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/DateTime/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,mBAAmB,CAAC;AACzD,YAAY,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AACxD,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,mBAAmB,CAAC;AACzD,YAAY,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AACxD,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAC3D,YAAY,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAC1D,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,mBAAmB,CAAC;AACzD,YAAY,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AACxD,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,wBAAwB,CAAC;AACnE,YAAY,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,gCAAgC,CAAC;AAC1E,YAAY,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,sCAAsC,CAAC;AAC1F,OAAO,EAAE,MAAM,EAAE,MAAM,sCAAsC,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,uBAAuB,CAAC;AACjE,YAAY,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,wBAAwB,CAAC;AACnE,YAAY,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAC/D,YAAY,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAE9D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAC5D,YAAY,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAC5D,YAAY,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAE5E,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAC/D,YAAY,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAC/D,YAAY,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC"}