@semcore/base-trigger 3.0.6 → 3.0.9

package/src/BaseTrigger.jsx

@@ -1,69 +0,0 @@
-import React from 'react';
-import createComponent, { Component, Root, sstyled } from '@semcore/core';
-import { Box } from '@semcore/flex-box';
-import { neighborLocationEnhance } from '@semcore/neighbor-location';
-import keyboardFocusEnhance from '@semcore/utils/lib/enhances/keyboardFocusEnhance';
-import addonTextChildren from '@semcore/utils/lib/addonTextChildren';
-import logger from '@semcore/utils/lib/logger';
-
-import style from './style/base-trigger.shadow.css';
-
-class RootBaseTrigger extends Component {
-  static displayName = 'BaseTrigger';
-  static style = style;
-  static defaultProps = {
-    size: 'm',
-  };
-  static enhance = [keyboardFocusEnhance(), neighborLocationEnhance()];
-
-  getTextProps() {
-    const { placeholder, empty } = this.asProps;
-    return {
-      placeholder,
-      empty,
-    };
-  }
-
-  render() {
-    const SBaseTrigger = Root;
-    const SInner = 'div';
-    const { Children, styles, theme } = this.asProps;
-
-    logger.warn(
-      theme !== undefined,
-      "The 'theme' property is deprecated, use 'state'",
-      this.asProps['data-ui-name'] || BaseTrigger.displayName,
-    );
-
-    // TODO: add aria
-    return sstyled(styles)(
-      <SBaseTrigger render={Box} state={theme}>
-        <SInner>{addonTextChildren(Children, BaseTrigger.Text, BaseTrigger.Addon)}</SInner>
-      </SBaseTrigger>,
-    );
-  }
-}
-
-function Text(props) {
-  const SText = Root;
-  const { children, styles, empty, placeholder } = props;
-
-  return sstyled(styles)(
-    /* что бы не ломать обратную совместимость пришлось юзать use */
-    <SText render={Box} use:placeholder={empty}>
-      {empty ? placeholder : children}
-    </SText>,
-  );
-}
-
-function Addon(props) {
-  const SAddon = Root;
-  return sstyled(props.styles)(<SAddon render={Box} />);
-}
-
-const BaseTrigger = createComponent(RootBaseTrigger, {
-  Text,
-  Addon,
-});
-
-export default BaseTrigger;

package/src/ButtonTrigger.jsx

@@ -1,41 +0,0 @@
-import React from 'react';
-import createComponent, { Component, Root, sstyled } from '@semcore/core';
-import addonTextChildren from '@semcore/utils/lib/addonTextChildren';
-import ChevronDown from '@semcore/icon/ChevronDown/m';
-import BaseTrigger from './BaseTrigger';
-import Spin from '@semcore/spin';
-
-import style from './style/button-trigger.shadow.css';
-
-class RootButtonTrigger extends Component {
-  static displayName = 'ButtonTrigger';
-  static style = style;
-
-  render() {
-    const SButtonAddon = ButtonTrigger.Addon;
-    const SButtonTriggerSpin = Spin;
-    const { Children, styles, loading } = this.asProps;
-
-    return sstyled(styles)(
-      <Root render={BaseTrigger}>
-        {addonTextChildren(Children, ButtonTrigger.Text, ButtonTrigger.Addon)}
-        <SButtonAddon>
-          {loading ? <SButtonTriggerSpin size="xs" theme={false} /> : <ChevronDown />}
-        </SButtonAddon>
-      </Root>,
-    );
-  }
-}
-
-const ButtonTrigger = createComponent(
-  RootButtonTrigger,
-  {
-    Text: BaseTrigger.Text,
-    Addon: BaseTrigger.Addon,
-  },
-  {
-    parent: BaseTrigger,
-  },
-);
-
-export default ButtonTrigger;

package/src/FilterTrigger.jsx

@@ -1,79 +0,0 @@
-import React from 'react';
-import createComponent, { Component, Root, sstyled } from '@semcore/core';
-import BaseTrigger from './BaseTrigger';
-import { Box } from '@semcore/flex-box';
-import NeighborLocation from '@semcore/neighbor-location';
-import Dot from '@semcore/dot';
-import Close from '@semcore/icon/Close/m';
-import ChevronDown from '@semcore/icon/ChevronDown/m';
-import { callAllEventHandlers } from '@semcore/utils/lib/assignProps';
-import addonTextChildren from '@semcore/utils/lib/addonTextChildren';
-
-import style from './style/filter-trigger.shadow.css';
-
-class RootFilterTrigger extends Component {
-  static displayName = 'FilterTrigger';
-  static style = style;
-
-  handleStopPropagation = (e) => e.stopPropagation();
-
-  render() {
-    const SWrapper = Root;
-    const SFilterTrigger = BaseTrigger;
-    const { Children, styles, empty, onClear, size, placeholder, active, disabled } = this.asProps;
-
-    return sstyled(styles)(
-      <SWrapper render={Box}>
-        <NeighborLocation>
-          <SFilterTrigger
-            w="100%"
-            size={size}
-            placeholder={placeholder}
-            empty={empty}
-            selected={!empty}
-            active={active}
-            disabled={disabled}
-          >
-            {addonTextChildren(Children, FilterTrigger.Text, [
-              FilterTrigger.Addon,
-              FilterTrigger.Counter,
-            ])}
-            {empty && <FilterTrigger.Addon tag={ChevronDown} />}
-          </SFilterTrigger>
-          {!empty && (
-            <SFilterTrigger
-              tag="button"
-              size={size}
-              empty={empty}
-              selected
-              onClick={callAllEventHandlers(onClear, this.handleStopPropagation)}
-              onKeyDown={this.handleStopPropagation}
-              disabled={disabled}
-            >
-              <FilterTrigger.Addon tag={Close} />
-            </SFilterTrigger>
-          )}
-        </NeighborLocation>
-      </SWrapper>,
-    );
-  }
-}
-
-function Counter(props) {
-  const SCounter = Root;
-  return sstyled(props.styles)(<SCounter render={BaseTrigger.Addon} tag={Dot} />);
-}
-
-const FilterTrigger = createComponent(
-  RootFilterTrigger,
-  {
-    Text: BaseTrigger.Text,
-    Addon: BaseTrigger.Addon,
-    Counter,
-  },
-  {
-    parent: BaseTrigger,
-  },
-);
-
-export default FilterTrigger;

package/src/LinkTrigger.jsx

@@ -1,69 +0,0 @@
-import React from 'react';
-import createComponent, { Component, Root, sstyled } from '@semcore/core';
-import addonTextChildren from '@semcore/utils/lib/addonTextChildren';
-import ChevronDown from '@semcore/icon/ChevronDown/m';
-import Spin from '@semcore/spin';
-import { Box } from '@semcore/flex-box';
-import resolveColor, { shade } from '@semcore/utils/lib/color';
-import keyboardFocusEnhance from '@semcore/utils/lib/enhances/keyboardFocusEnhance';
-
-import style from './style/link-trigger.shadow.css';
-
-class RootLinkTrigger extends Component {
-  static displayName = 'LinkTrigger';
-  static style = style;
-  static defaultProps = {
-    size: 'm',
-  };
-  static enhance = [keyboardFocusEnhance()];
-
-  getTextProps() {
-    const { placeholder, empty } = this.asProps;
-    return {
-      placeholder,
-      empty,
-    };
-  }
-
-  render() {
-    const SLinkTrigger = Root;
-    const SLinkAddon = LinkTrigger.Addon;
-    const { Children, loading, styles, color: providedColor } = this.asProps;
-
-    const color = resolveColor(providedColor);
-    const colorHover = shade(color, -0.12);
-
-    return sstyled(styles)(
-      <SLinkTrigger render={Box} use:color={color} use:color-hover={colorHover}>
-        {addonTextChildren(Children, LinkTrigger.Text, LinkTrigger.Addon)}
-        <SLinkAddon>
-          {loading ? <Spin size="xs" theme="currentColor" /> : <ChevronDown />}
-        </SLinkAddon>
-      </SLinkTrigger>,
-    );
-  }
-}
-
-function Text(props) {
-  const SText = Root;
-  const { children, styles, empty, placeholder } = props;
-
-  return sstyled(styles)(
-    /* что бы не ломать обратную совместимость пришлось юзать use */
-    <SText render={Box} use:placeholder={empty}>
-      {empty ? placeholder : children}
-    </SText>,
-  );
-}
-
-function Addon(props) {
-  const SAddon = Root;
-  return sstyled(props.styles)(<SAddon render={Box} />);
-}
-
-const LinkTrigger = createComponent(RootLinkTrigger, {
-  Text,
-  Addon,
-});
-
-export default LinkTrigger;

package/src/index.d.ts

@@ -1,82 +0,0 @@
-import React, { ComponentProps } from 'react';
-import { CProps, ReturnEl } from '@semcore/core';
-import { Box, IBoxProps } from '@semcore/flex-box';
-import Dot from '@semcore/dot';
-import { INeighborItemProps } from '@semcore/neighbor-location';
-import { IKeyboardFocusProps } from '@semcore/utils/lib/enhances/keyboardFocusEnhance';
-
-export interface IBaseTriggerProps extends IBoxProps, INeighborItemProps, IKeyboardFocusProps {
-  /**
-   * Trigger size
-   * @default m
-   */
-  size?: 'm' | 'l';
-  /**
-   * Trigger state
-   */
-  state?: 'normal' | 'valid' | 'invalid';
-  /**
-   * Sets active state to trigger
-   */
-  active?: boolean;
-  /**
-   * Responsible for placeholder displaying
-   */
-  empty?: boolean;
-  /**
-   * Placeholder text
-   */
-  placeholder?: React.ReactNode;
-  /**
-   * Sets disabled state to trigger
-   */
-  disabled?: boolean;
-  /** Trigger theme
-   * @deprecated
-   * @use IBaseTriggerProps.state
-   * */
-  theme?: 'normal' | 'valid' | 'invalid' | false;
-}
-
-export interface IButtonTriggerProps extends Omit<IBaseTriggerProps, 'theme'> {
-  /** Sets the loading state */
-  loading?: boolean;
-}
-
-export interface ILinkTriggerProps extends Omit<IBaseTriggerProps, 'theme'> {
-  /** Sets the loading state */
-  loading?: boolean;
-  /** Text color */
-  color?: string;
-}
-
-export interface IFilterTriggerProps extends IBaseTriggerProps {
-  /** Click on the filter cleaning cross */
-  onClear?: (event: React.SyntheticEvent) => void;
-}
-
-declare const BaseTrigger: (<T>(props: CProps<IBaseTriggerProps & T>) => ReturnEl) & {
-  Text: typeof Box;
-  Addon: typeof Box;
-};
-
-declare const ButtonTrigger: (<T>(props: CProps<IButtonTriggerProps & T>) => ReturnEl) & {
-  Text: typeof BaseTrigger.Text;
-  Addon: typeof BaseTrigger.Addon;
-};
-
-declare const LinkTrigger: (<T>(props: CProps<ILinkTriggerProps & T>) => ReturnEl) & {
-  Text: typeof BaseTrigger.Text;
-  Addon: typeof BaseTrigger.Addon;
-};
-
-declare const FilterTrigger: (<T>(props: CProps<ILinkTriggerProps & T>) => ReturnEl) & {
-  Text: typeof BaseTrigger.Text;
-  Addon: typeof BaseTrigger.Addon;
-  Counter: <T>(
-    props: ComponentProps<typeof BaseTrigger.Addon> & ComponentProps<typeof Dot> & T,
-  ) => ReturnEl;
-};
-
-export default BaseTrigger;
-export { ButtonTrigger, LinkTrigger, FilterTrigger };

package/src/index.js

@@ -1,4 +0,0 @@
-export { default } from './BaseTrigger';
-export { default as ButtonTrigger } from './ButtonTrigger';
-export { default as FilterTrigger } from './FilterTrigger';
-export { default as LinkTrigger } from './LinkTrigger';

package/src/style/base-trigger.shadow.css

@@ -1,181 +0,0 @@
-@import '@semcore/utils/style/var.css';
-
-SBaseTrigger {
-  display: inline-block;
-  align-items: center;
-  justify-content: center;
-  line-height: normal;
-  position: relative;
-  touch-action: manipulation;
-  white-space: nowrap;
-  user-select: none;
-  box-sizing: border-box;
-  padding: 0;
-  margin: 0;
-  box-shadow: none;
-  outline: none;
-  text-decoration: none;
-  -webkit-tap-highlight-color: transparent;
-  overflow: visible;
-  outline: 0;
-  text-align: center;
-  vertical-align: middle;
-  font-family: Inter, sans-serif;
-  cursor: pointer;
-
-  background: #ffffff;
-
-  font-weight: 400;
-  border: 1px solid var(--gray-200);
-  color: var(--gray-800);
-
-  &::-moz-focus-inner {
-    border: none;
-    padding: 0;
-  }
-
-  &:active,
-  &:hover,
-  &:focus {
-    outline: 0;
-    text-decoration: none;
-  }
-
-  &[keyboardFocused] {
-    border: 1px solid var(--blue-400);
-    box-shadow: var(--keyboard-focus);
-  }
-
-  &:hover {
-    background-color: color-mod(var(--gray-400) a(20%));
-  }
-
-  &:active,
-  &[active] {
-    background-color: color-mod(var(--gray-400) a(30%));
-  }
-}
-
-SBaseTrigger[disabled] {
-  opacity: var(--disabled-opacity);
-  cursor: default;
-  pointer-events: none; /* Disable link interactions */
-}
-
-SBaseTrigger[keyboardFocused] {
-  z-index: 1;
-}
-
-SInner {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-  width: 100%;
-}
-
-SText {
-  display: inline;
-  padding: 1px 0;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  line-height: var(--lh-200);
-  flex-grow: 1;
-  text-align: left;
-}
-
-SAddon {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-}
-
-SBaseAddon {
-  width: 12px;
-  height: 12px;
-}
-
-SBaseTrigger[size='m'] {
-  min-width: 26px;
-  height: 28px;
-  border-radius: var(--rounded-m);
-  padding: 0 8px;
-  font-size: var(--fs-200);
-
-  & SAddon {
-    &:not(:only-child):first-child {
-      margin-right: 8px;
-    }
-
-    &:not(:only-child):last-child {
-      margin-left: 8px;
-    }
-
-    &:only-child {
-      margin-left: -4px;
-      margin-right: -4px;
-    }
-  }
-}
-
-SBaseTrigger[size='l'] {
-  min-width: 32px;
-  height: 40px;
-  border-radius: var(--rounded-m);
-  padding: 0 12px;
-  font-size: var(--fs-300);
-
-  & SAddon {
-    &:not(:only-child):first-child {
-      margin-right: 8px;
-    }
-
-    &:not(:only-child):last-child {
-      margin-left: 8px;
-    }
-
-    &:only-child {
-      margin-left: -4px;
-      margin-right: -4px;
-    }
-  }
-}
-
-SBaseTrigger[neighborLocation='right'] {
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
-}
-
-SBaseTrigger[neighborLocation='both'] {
-  border-radius: 0;
-  margin-left: -1px;
-}
-
-SBaseTrigger[neighborLocation='left'] {
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
-  margin-left: -1px;
-}
-
-SText[placeholder] {
-  color: var(--gray-300);
-}
-
-SBaseTrigger[state='normal'] {
-  border-color: var(--gray-200);
-}
-
-SBaseTrigger[state='valid'] {
-  border-color: var(--green-200);
-}
-
-SBaseTrigger[state='invalid'] {
-  border-color: var(--red-200);
-
-  &[keyboardFocused] {
-    border-color: var(--orange-400);
-    box-shadow: 0 0 0 3px color-mod(var(--orange-400) a(30%));
-  }
-}

package/src/style/button-trigger.shadow.css

@@ -1,10 +0,0 @@
-@import '@semcore/utils/style/var.css';
-
-SButtonAddon {
-  width: 12px;
-  height: 12px;
-}
-
-SButtonTriggerSpin {
-  fill: var(--gray-500);
-}

package/src/style/filter-trigger.shadow.css

@@ -1,82 +0,0 @@
-@import '@semcore/utils/style/var.css';
-
-SButtonTrigger {
-  border: 1px solid var(--gray-200);
-  background: #ffffff;
-  color: var(--gray-800);
-
-  &::-moz-focus-inner {
-    border: none;
-    padding: 0;
-  }
-
-  &:active,
-  &:hover,
-  &:focus {
-    outline: 0;
-    text-decoration: none;
-  }
-
-  &:active,
-  &:hover,
-  &[active] {
-    background-color: color-mod(var(--gray-400) a(20%));
-  }
-}
-
-SButtonTrigger[size='m'] {
-  min-width: 26px;
-  height: 28px;
-  border-radius: var(--rounded-m);
-  font-size: var(--fs-200);
-}
-
-SButtonTrigger[size='l'] {
-  min-width: 32px;
-  height: 40px;
-  border-radius: var(--rounded-m);
-  font-size: var(--fs-300);
-}
-
-SText[placeholder] {
-  color: var(--gray-300);
-}
-
-SButtonTrigger[state='normal'] {
-  border-color: var(--gray-200);
-}
-
-SButtonTrigger[state='valid'] {
-  border-color: var(--green-200);
-}
-
-SButtonTrigger[state='invalid'] {
-  border-color: var(--red-200);
-}
-
-SFilterTrigger[selected] {
-  border-color: var(--blue-400);
-  background-color: color-mod(var(--blue-400) a(20%));
-  color: var(--gray-800);
-
-  &[active],
-  &:hover {
-    background: color-mod(var(--blue-400) a(30%));
-  }
-}
-
-SWrapper {
-  display: inline-flex;
-
-  &:focus {
-    outline: none;
-  }
-}
-
-SWrapper[keyboardFocused] {
-  box-shadow: var(--keyboard-focus);
-}
-
-SCounter {
-  background-color: var(--blue-400);
-}