intergalactic 15.109.0 → 15.110.0

package/dropdown/lib/es6/DropdownItem.js

@@ -0,0 +1,12 @@
+import _objectSpread from "@babel/runtime/helpers/objectSpread2";
+import { assignProps as _assignProps } from 'intergalactic/core';
+import React from 'react';
+import { Root, sstyled } from 'intergalactic/core';
+import { Box } from 'intergalactic/flex-box';
+export function DropdownItem(props) {
+  var _ref = arguments[0],
+    _ref2;
+  var SDropdownItem = Box;
+  return _ref2 = sstyled(props.styles), /*#__PURE__*/React.createElement(SDropdownItem, _ref2.cn("SDropdownItem", _objectSpread({}, _assignProps({}, _ref))));
+}
+//# sourceMappingURL=DropdownItem.js.map

package/dropdown/lib/es6/DropdownItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DropdownItem.js","names":["React","Root","sstyled","Box","DropdownItem","props","_ref","arguments[0]","_ref2","SDropdownItem","styles","createElement","cn","_objectSpread","_assignProps"],"sources":["../../src/DropdownItem.tsx"],"sourcesContent":["import React from 'react';\nimport { Root, sstyled } from '@semcore/core';\nimport { Box } from '@semcore/flex-box';\n\ntype DropdownItemProps = {\n  styles: React.DetailedHTMLProps<React.StyleHTMLAttributes<HTMLStyleElement>, HTMLStyleElement>;\n};\n\nexport function DropdownItem(props: DropdownItemProps) {\n  const SDropdownItem = Root;\n  return sstyled(props.styles)(<SDropdownItem render={Box} />);\n}\n"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI,EAAEC,OAAO,QAAQ,eAAe;AAC7C,SAASC,GAAG,QAAQ,mBAAmB;AAMvC,OAAO,SAASC,YAAYA,CAACC,KAAwB,EAAE;EAAA,IAAAC,IAAA,GAAAC,YAAA;IAAAC,KAAA;EACrD,IAAMC,aAAa,GACiCN,GAAG;EAAvD,OAAAK,KAAA,GAAON,OAAO,CAACG,KAAK,CAACK,MAAM,CAAC,eAACV,KAAA,CAAAW,aAAA,CAACF,aAAa,EAAAD,KAAA,CAAAI,EAAA,kBAAAC,aAAA,KAAAC,YAAA,KAAAR,IAAA,IAAgB;AAC7D"}

package/dropdown/lib/es6/index.d.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.js","names":[],"sources":["../../src/index.d.ts"],"sourcesContent":["import { Intergalactic, UnknownProperties } from '@semcore/core';\nimport Popper, {\n  PopperContext,\n  PopperProps,\n  PopperHandlers,\n  PopperTriggerProps,\n  PopperPopperProps,\n} from '@semcore/popper';\n\n/** @deprecated */\nexport interface IDropdownProps extends DropdownProps, UnknownProperties {}\nexport type DropdownProps = PopperProps & {\n  /**\n   * Modifier responsible for the size of the pop-up window:\n   * `fixed` - a pop-up window of the same size as trigger;\n   * `min` - pop-up window not less than the size of the trigger;\n   * `false` - the pop-up window depends on the content within it.\n   * @default 'min'\n   * */\n  stretch?: 'min' | 'fixed' | false;\n  locale?: string;\n};\n\n/** @deprecated */\nexport interface IDropdownContext extends DropdownContext, UnknownProperties {}\nexport type DropdownContext = PopperContext & {};\n\n/** @deprecated */\nexport interface IDropdownHandlers extends DropdownHandlers, UnknownProperties {}\nexport type DropdownHandlers = PopperHandlers & {};\n\nexport type DropdownTriggerProps = PopperTriggerProps;\n\n/**\n * DropdownPopper must have an accessible name (aria-dialog-name).\n * It should describe popper content.\n */\ntype DropdownPopperAriaProps = Intergalactic.RequireAtLeastOne<{\n  'aria-label'?: string;\n  'aria-labelledby'?: string;\n  title?: string;\n}>;\n\nexport type DropdownPopperProps = PopperPopperProps &\n  DropdownPopperAriaProps & {\n    /**\n     * Popper in Dropdown should have role `dialog`.\n     * @default 'dialog'\n     */\n    role?: 'dialog';\n  };\n\ndeclare const Dropdown: Intergalactic.Component<\n  'div',\n  DropdownProps,\n  DropdownContext,\n  [handlers: DropdownHandlers]\n> & {\n  Trigger: typeof Popper.Trigger;\n  Popper: Intergalactic.Component<\n    'div',\n    DropdownPopperProps,\n    PopperContext,\n    [handlers: PopperHandlers]\n  >;\n};\n\nexport default Dropdown;\n"],"mappings":""}
+{"version":3,"file":"index.d.js","names":[],"sources":["../../src/index.d.ts"],"sourcesContent":["import React from 'react';\nimport { Intergalactic, UnknownProperties, PropGetterFn } from '@semcore/core';\nimport Popper, {\n  PopperContext,\n  PopperProps,\n  PopperHandlers,\n  PopperTriggerProps,\n  PopperPopperProps,\n} from '@semcore/popper';\nimport { Box, BoxProps } from '@semcore/flex-box';\n\n/** @deprecated */\nexport interface IDropdownProps extends DropdownProps, UnknownProperties {}\nexport type DropdownProps = PopperProps & {\n  /**\n   * Modifier responsible for the size of the pop-up window:\n   * `fixed` - a pop-up window of the same size as trigger;\n   * `min` - pop-up window not less than the size of the trigger;\n   * `false` - the pop-up window depends on the content within it.\n   * @default 'min'\n   * */\n  stretch?: 'min' | 'fixed' | false;\n  locale?: string;\n};\n\n/** @deprecated */\nexport interface IDropdownContext extends DropdownContext, UnknownProperties {}\nexport type DropdownContext = PopperContext & {\n  getGroupProps: PropGetterFn;\n};\n\n/** @deprecated */\nexport interface IDropdownHandlers extends DropdownHandlers, UnknownProperties {}\nexport type DropdownHandlers = PopperHandlers & {};\n\nexport type DropdownTriggerProps = PopperTriggerProps;\n\n/**\n * DropdownPopper must have an accessible name (aria-dialog-name).\n * It should describe popper content.\n */\ntype DropdownPopperAriaProps = Intergalactic.RequireAtLeastOne<{\n  'aria-label'?: string;\n  'aria-labelledby'?: string;\n  title?: string;\n}>;\n\nexport type DropdownPopperProps = PopperPopperProps &\n  DropdownPopperAriaProps & {\n    /**\n     * Popper in Dropdown should have role `dialog`.\n     * @default 'dialog'\n     */\n    role?: 'dialog';\n  };\n\nexport type DropdownGroupProps = BoxProps & {\n  /** Title for group of dropdown menu items */\n  title: React.ReactNode;\n  /** Subtitle for group of dropdown menu items */\n  subTitle?: string;\n};\n\ndeclare const Dropdown: Intergalactic.Component<\n  'div',\n  DropdownProps,\n  DropdownContext,\n  [handlers: DropdownHandlers]\n> & {\n  Trigger: typeof Popper.Trigger;\n  Popper: Intergalactic.Component<\n    'div',\n    DropdownPopperProps,\n    PopperContext,\n    [handlers: PopperHandlers]\n  >;\n  Item: Intergalactic.Component<typeof Box>;\n  Group: Intergalactic.Component<'div', DropdownGroupProps>;\n};\n\nexport default Dropdown;\n"],"mappings":""}

package/dropdown/lib/es6/index.js

@@ -1,2 +1,3 @@
 export { default } from './Dropdown';
+export { AbstractDropdown, selectedIndexContext, enhance } from './AbstractDropdown';
 //# sourceMappingURL=index.js.map

package/dropdown/lib/es6/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["default"],"sources":["../../src/index.js"],"sourcesContent":["export { default } from './Dropdown';\n"],"mappings":"AAAA,SAASA,OAAO,QAAQ,YAAY"}
+{"version":3,"file":"index.js","names":["default","AbstractDropdown","selectedIndexContext","enhance"],"sources":["../../src/index.js"],"sourcesContent":["export { default } from './Dropdown';\n\nexport { AbstractDropdown, selectedIndexContext, enhance } from './AbstractDropdown';\n"],"mappings":"AAAA,SAASA,OAAO,QAAQ,YAAY;AAEpC,SAASC,gBAAgB,EAAEC,oBAAoB,EAAEC,OAAO,QAAQ,oBAAoB"}

package/dropdown/lib/es6/style/dropdown.shadow.css

@@ -8,3 +8,98 @@ SDropdownPopper {
   box-shadow: var(--intergalactic-box-shadow-popper, 0px 1px 12px 0px rgba(25, 27, 35, 0.15));
   color: var(--intergalactic-text-primary, #191b23);
 }
+
+SDropdownItem {
+  position: relative;
+  text-decoration: none;
+  box-sizing: border-box;
+  cursor: pointer;
+  width: 100%;
+  text-align: left;
+  line-height: normal;
+  color: var(--intergalactic-text-primary, #191b23);
+
+  &:hover {
+    background-color: var(--intergalactic-dropdown-menu-item-hover, #f4f5f9);
+  }
+
+  &:focus {
+    outline: none;
+  }
+}
+
+SDropdownItem[selected] {
+  background-color: var(--intergalactic-dropdown-menu-item-selected, rgba(196, 229, 254, 0.7));
+  box-shadow: 2px 0px 0px 0px var(--intergalactic-control-primary-info, #008ff8) inset;
+
+  &:hover {
+    background-color: var(--intergalactic-dropdown-menu-item-selected-hover, #c4e5fe);
+  }
+}
+
+SDropdownItem[highlighted] {
+  z-index: 1;
+  box-shadow: var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5)) inset;
+}
+
+SDropdownItem[disabled] {
+  opacity: var(--intergalactic-disabled-opacity, 0.3);
+  cursor: default;
+  pointer-events: none;
+}
+
+SDropdownItem[size='l'] {
+  font-size: var(--intergalactic-fs-300, 16px);
+  line-height: var(--intergalactic-lh-300, 150%);
+  padding: var(--intergalactic-spacing-2x, 8px) var(--intergalactic-spacing-3x, 12px);
+  min-height: 40px;
+}
+
+SDropdownItem[size='m'] {
+  font-size: var(--intergalactic-fs-200, 14px);
+  line-height: var(--intergalactic-lh-200, 142%);
+  padding: calc(var(--intergalactic-spacing-1x, 4px) + var(--intergalactic-spacing-05x, 2px)) var(--intergalactic-spacing-2x, 8px);
+  min-height: 32px;
+}
+
+SDropdownItem[notInteractive] {
+  cursor: default;
+
+  &:hover {
+    background: none;
+  }
+}
+
+SDropdownItem[variant='hint'] {
+  color: var(--intergalactic-text-secondary, #6c6e79);
+  cursor: default;
+
+  &:hover {
+    background: none;
+  }
+}
+
+SDropdownItem[variant='title'] {
+  font-weight: var(--intergalactic-bold, 700);
+  cursor: default;
+
+  &:hover {
+    background: none;
+  }
+}
+
+SDropdownItem[visible] {
+  background-color: var(--intergalactic-dropdown-menu-item-hover, #f4f5f9);
+}
+
+SDropdownItem[nesting-trigger] {
+  justify-content: space-between;
+}
+
+SGroupTitle {
+  font-weight: var(--intergalactic-bold, 700);
+}
+
+SGroupHint {
+  color: var(--intergalactic-text-secondary, #6c6e79);
+}

package/dropdown/lib/types/index.d.ts

@@ -1,4 +1,5 @@
-import { Intergalactic, UnknownProperties } from 'intergalactic/core';
+import React from 'react';
+import { Intergalactic, UnknownProperties, PropGetterFn } from 'intergalactic/core';
 import Popper, {
   PopperContext,
   PopperProps,
@@ -6,6 +7,7 @@ import Popper, {
   PopperTriggerProps,
   PopperPopperProps,
 } from 'intergalactic/popper';
+import { Box, BoxProps } from 'intergalactic/flex-box';
 
 /** @deprecated */
 export interface IDropdownProps extends DropdownProps, UnknownProperties {}
@@ -23,7 +25,9 @@ export type DropdownProps = PopperProps & {
 
 /** @deprecated */
 export interface IDropdownContext extends DropdownContext, UnknownProperties {}
-export type DropdownContext = PopperContext & {};
+export type DropdownContext = PopperContext & {
+  getGroupProps: PropGetterFn;
+};
 
 /** @deprecated */
 export interface IDropdownHandlers extends DropdownHandlers, UnknownProperties {}
@@ -50,6 +54,13 @@ export type DropdownPopperProps = PopperPopperProps &
     role?: 'dialog';
   };
 
+export type DropdownGroupProps = BoxProps & {
+  /** Title for group of dropdown menu items */
+  title: React.ReactNode;
+  /** Subtitle for group of dropdown menu items */
+  subTitle?: string;
+};
+
 declare const Dropdown: Intergalactic.Component<
   'div',
   DropdownProps,
@@ -63,6 +74,8 @@ declare const Dropdown: Intergalactic.Component<
     PopperContext,
     [handlers: PopperHandlers]
   >;
+  Item: Intergalactic.Component<typeof Box>;
+  Group: Intergalactic.Component<'div', DropdownGroupProps>;
 };
 
 export default Dropdown;

package/dropdown/package.json

@@ -1 +1 @@
-{"name":"intergalactic/dropdown","description":"Semrush Dropdown Component","version":"4.37.1","main":"lib/cjs/index.js","module":"lib/es6/index.js","typings":"lib/types/index.d.ts","sideEffects":false,"author":"UI-kit team <ui-kit-team@semrush.com>","license":"MIT","scripts":{"build":"pnpm semcore-builder --source=js"},"dependencies":{"@semcore/flex-box":"5.33.1","@semcore/popper":"5.40.1","@semcore/utils":"4.36.2"},"peerDependencies":{"@semcore/core":"^2.17.5","react":"16.8 - 18","react-dom":"16.8 - 18"},"repository":{"type":"git","url":"https://github.com/semrush/intergalactic.git","directory":"semcore/dropdown"},"devDependencies":{"@types/react":"18.0.21","@semcore/testing-utils":"1.0.0"}}
+{"name":"intergalactic/dropdown","description":"Semrush Dropdown Component","version":"4.38.0","main":"lib/cjs/index.js","module":"lib/es6/index.js","typings":"lib/types/index.d.ts","sideEffects":false,"author":"UI-kit team <ui-kit-team@semrush.com>","license":"MIT","scripts":{"build":"pnpm semcore-builder --source=js"},"dependencies":{"@semcore/flex-box":"5.34.0","@semcore/popper":"5.41.0","@semcore/utils":"4.38.0"},"peerDependencies":{"@semcore/core":"^2.17.5","react":"16.8 - 18","react-dom":"16.8 - 18"},"repository":{"type":"git","url":"https://github.com/semrush/intergalactic.git","directory":"semcore/dropdown"},"devDependencies":{"@types/react":"18.0.21","@semcore/testing-utils":"1.0.0"}}

package/dropdown-menu/index.d.ts

@@ -58,6 +58,7 @@ export interface IDropdownMenuItemProps extends DropdownMenuItemProps, UnknownPr
 export type DropdownMenuItemProps = FlexProps & {
   /**
    * Enables selected state
+   * @deprecated Dropdown menu item can't have that state
    */
   selected?: boolean;
   /**
@@ -120,13 +121,6 @@ export type DropdownMenuHandlers = DropdownHandlers & {
 
 export type DropdownMenuTriggerProps = DropdownTriggerProps;
 
-export type DropdownMenuGroupProps = BoxProps & {
-  /** Title for group of dropdown menu items */
-  title: React.ReactNode;
-  /** Subtitle for group of dropdown menu items */
-  subTitle?: string;
-};
-
 declare const DropdownMenu: Intergalactic.Component<
   'div',
   DropdownMenuProps,
@@ -154,7 +148,7 @@ declare const DropdownMenu: Intergalactic.Component<
     [handlers: DropdownMenuHandlers]
   >;
   Item: Intergalactic.Component<
-    'div',
+    typeof Dropdown.Item,
     DropdownMenuItemProps,
     DropdownMenuContext,
     [handlers: DropdownMenuHandlers]
@@ -171,7 +165,7 @@ declare const DropdownMenu: Intergalactic.Component<
    * @deprecated Use prop subTitle on Group or Item component
    */
   ItemHint: Intergalactic.Component<'div', DropdownMenuItemHintProps>;
-  Group: Intergalactic.Component<'div', DropdownMenuGroupProps>;
+  Group: typeof Dropdown.Group;
   /**
    * @deprecated Use Item instead of Nesting
    */
@@ -199,5 +193,3 @@ declare const DropdownMenu: Intergalactic.Component<
 };
 
 export default DropdownMenu;
-
-export { DropdownMenu as DropdownMenuOld };