@ssa-ui-kit/core 2.18.0 → 2.18.2

package/dist/components/ColorPicker/components/ColorDropdown.d.ts

@@ -0,0 +1,3 @@
+export declare const ColorDropdown: import("@emotion/styled").StyledComponent<import("../../Dropdown").DropdownProps<import("../..").DropdownOptionProps> & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {}>;

package/dist/components/ColorPicker/components/index.d.ts

@@ -2,3 +2,4 @@ export * from './HexInput';
 export * from './HlsInput';
 export * from './RgbInput';
 export * from './CopyButton';
+export * from './ColorDropdown';

package/dist/components/Typeahead/components/TypeaheadFocusTrap.d.ts

@@ -0,0 +1,3 @@
+export declare const TypeaheadFocusTrap: ({ children, }: {
+    children: React.ReactElement;
+}) => import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/components/Typeahead/components/index.d.ts

@@ -4,4 +4,5 @@ export * from './TypeaheadTrigger';
 export * from './TypeaheadItem';
 export * from './TypeaheadOptions';
 export * from './TypeaheadOption';
+export * from './TypeaheadFocusTrap';
 export * from './NoOptions';

package/dist/index.js

@@ -1309,7 +1309,7 @@ const Avatar = /*#__PURE__*/base_default()("div",  true ? {
   size
 }) => size, "px;background:", ({
   image
-}) => `url(${image})`, " center no-repeat;" + ( true ? "" : 0));
+}) => `url(${image})`, " center/contain no-repeat;" + ( true ? "" : 0));
 /* harmony default export */ const Avatar_Avatar = (Avatar);
 ;// external "react"
 const external_react_namespaceObject = require("react");
@@ -11773,8 +11773,8 @@ function BaseInput_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to
 const BaseInput = /*#__PURE__*/base_default()("input",  true ? {
   target: "e1ruz5i20"
 } : 0)( true ? {
-  name: "1tzrjg9",
-  styles: "border:none;width:100%;height:100%;text-align:center"
+  name: "4a2r7m",
+  styles: "border:none;width:100%;height:100%;text-align:center;-moz-appearance:textfield;appearance:textfield;&::-webkit-outer-spin-button,&::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}"
 } : 0);
 ;// ./src/components/ColorPicker/components/HexInput.tsx
 
@@ -11863,6 +11863,7 @@ const RgbInput = ({
   return (0,jsx_runtime_namespaceObject.jsx)(Wrapper_Wrapper, {
     css: RgbInput_ref,
     children: rgbComponents.map(component => (0,jsx_runtime_namespaceObject.jsx)(BaseInput, {
+      type: "number",
       value: rawRgb[component],
       onBlur: () => setEditing(false),
       onFocus: () => setEditing(true),
@@ -11928,6 +11929,7 @@ const HlsInput = ({
   return (0,jsx_runtime_namespaceObject.jsx)(Wrapper_Wrapper, {
     css: HlsInput_ref,
     children: hslComponents.map(component => (0,jsx_runtime_namespaceObject.jsx)(BaseInput, {
+      type: "number",
       value: rawHsl[component],
       onBlur: () => setEditing(false),
       onFocus: () => setEditing(true),
@@ -11935,6 +11937,22 @@ const HlsInput = ({
     }, component))
   });
 };
+;// ./src/components/ColorPicker/components/ColorDropdown.tsx
+
+
+const ColorDropdown = /*#__PURE__*/base_default()(Dropdown_Dropdown,  true ? {
+  target: "e1xwf2tv0"
+} : 0)("color:", ({
+  theme
+}) => theme.colors.greyDarker, ";background:", ({
+  theme
+}) => theme.colors.white, ";border:1px solid;border-color:", ({
+  theme
+}) => theme.colors.grey, ";border-radius:8px;&:focus{color:", ({
+  theme
+}) => theme.colors.greyDarker, ";background:", ({
+  theme
+}) => theme.colors.white, ";}&:focus::before{content:none;}" + ( true ? "" : 0));
 ;// ./src/components/ColorPicker/components/CopyButton.tsx
 
 
@@ -11959,7 +11977,6 @@ function ColorPicker_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried t
 
 
 
-
 const COLOR_FORMAT = {
   hex: 'HEX',
   rgb: 'RGB',
@@ -12034,13 +12051,7 @@ const ColorPicker = ({
       children: [panel, (0,jsx_runtime_namespaceObject.jsxs)(Wrapper_Wrapper, {
         alignItems: "center",
         css: ColorPicker_ref2,
-        children: [(0,jsx_runtime_namespaceObject.jsx)(Dropdown_Dropdown, {
-          css: /*#__PURE__*/(0,react_namespaceObject.css)({
-            background: theme.colors.white,
-            border: '1px solid',
-            borderColor: theme.colors.grey,
-            borderRadius: '8px'
-          },  true ? "" : 0,  true ? "" : 0),
+        children: [(0,jsx_runtime_namespaceObject.jsx)(ColorDropdown, {
           className: /*#__PURE__*/(0,css_namespaceObject.css)( true ? {
             name: "2746za",
             styles: "height:28px"
@@ -14395,7 +14406,7 @@ const Trigger = () => {
     disabled: disabled,
     "data-testid": "daterangepicker",
     className: classNames?.trigger?.root,
-    children: [(0,jsx_runtime_namespaceObject.jsx)(FieldLabel, {
+    children: [label && (0,jsx_runtime_namespaceObject.jsx)(FieldLabel, {
       htmlFor: lastFocusedElement === 'from' ? nameFrom : nameTo,
       className: classNames?.label,
       children: label
@@ -18177,6 +18188,24 @@ const useTypeahead = ({
     handleRemoveSelectedClick
   };
 };
+;// ./src/components/Typeahead/components/TypeaheadFocusTrap.tsx
+
+
+
+const TypeaheadFocusTrap = ({
+  children
+}) => {
+  const {
+    context,
+    modal
+  } = usePopoverContext();
+  return (0,jsx_runtime_namespaceObject.jsx)(external_floating_ui_react_namespaceObject.FloatingFocusManager, {
+    context: context,
+    modal: modal,
+    order: ['reference'],
+    children: children
+  });
+};
 ;// ./src/components/Typeahead/styles.ts
 
 function Typeahead_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
@@ -18563,27 +18592,31 @@ const Typeahead = ({
         isDisabled: isDisabled,
         "data-testid": "typeahead-label",
         children: label
-      }), (0,jsx_runtime_namespaceObject.jsxs)(Popover, {
+      }), (0,jsx_runtime_namespaceObject.jsx)(Popover, {
         keyboardHandlers: false,
         floatingOptions: {
           onOpenChange: hookResult.handleOpenChange,
           open: hookResult.isOpen
         },
-        children: [(0,jsx_runtime_namespaceObject.jsx)(TypeaheadTrigger_TypeaheadTrigger, {}), (0,jsx_runtime_namespaceObject.jsx)(PopoverContent, {
-          css: /*#__PURE__*/(0,react_namespaceObject.css)({
-            width: hookResult.triggerRef.current?.clientWidth,
-            boxShadow: `-4px 4px 14px 0px ${theme.colors.greyDarker14}`,
-            zIndex: 100
-          },  true ? "" : 0,  true ? "" : 0),
-          isFocusManagerDisabled: true,
-          children: (0,jsx_runtime_namespaceObject.jsx)(PopoverDescription, {
-            css: Typeahead_ref,
-            children: hookResult.isOpen ? (0,jsx_runtime_namespaceObject.jsx)(TypeaheadOptions, {
-              className: optionsClassName,
-              children: children
-            }) : null
+        children: (0,jsx_runtime_namespaceObject.jsx)(TypeaheadFocusTrap, {
+          children: (0,jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
+            children: [(0,jsx_runtime_namespaceObject.jsx)(TypeaheadTrigger_TypeaheadTrigger, {}), (0,jsx_runtime_namespaceObject.jsx)(PopoverContent, {
+              css: /*#__PURE__*/(0,react_namespaceObject.css)({
+                width: hookResult.triggerRef.current?.clientWidth,
+                boxShadow: `-4px 4px 14px 0px ${theme.colors.greyDarker14}`,
+                zIndex: 100
+              },  true ? "" : 0,  true ? "" : 0),
+              isFocusManagerDisabled: true,
+              children: (0,jsx_runtime_namespaceObject.jsx)(PopoverDescription, {
+                css: Typeahead_ref,
+                children: hookResult.isOpen ? (0,jsx_runtime_namespaceObject.jsx)(TypeaheadOptions, {
+                  className: optionsClassName,
+                  children: children
+                }) : null
+              })
+            })]
           })
-        })]
+        })
       }), (hookResult.status === 'error' || helperText) && (0,jsx_runtime_namespaceObject.jsx)(FormHelperText_FormHelperText, {
         role: "status",
         status: hookResult.status,