acinguiux-ds-react-framework 0.1.24 → 0.1.25

package/build/esm/components/DeprecatedSelect/Select.d.ts

@@ -0,0 +1,5 @@
+import { type BaseSelectRef } from 'rc-select';
+import type { ISelectProps } from './Select.types';
+declare const Select: import("react").ForwardRefExoticComponent<ISelectProps & import("react").RefAttributes<BaseSelectRef>>;
+export default Select;
+//# sourceMappingURL=Select.d.ts.map

package/build/esm/components/DeprecatedSelect/Select.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../../src/components/DeprecatedSelect/Select.tsx"],"names":[],"mappings":"AAUA,OAAiB,EAAE,KAAK,aAAa,EAAoB,MAAM,WAAW,CAAC;AAO3E,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAkBnD,QAAA,MAAM,MAAM,wGAgGX,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/build/esm/components/DeprecatedSelect/Select.js

@@ -0,0 +1,114 @@
+import { jsx as e } from "react/jsx-runtime";
+import { forwardRef as p, useRef as c, useImperativeHandle as b } from "react";
+import F from "classnames";
+import $ from "rc-select";
+import { Sizes as f, Positions as k, Variants as D } from "../../react-base/src/consts/index.js";
+import { getSmallerSize as M } from "../../react-base/src/utils/sizesUtils.js";
+import { SelectedIcon as T, RemoveIcon as K } from "./components/Icons/Icons.js";
+import { Select as _ } from "./Select.styles.js";
+import { ClearButtonContainer as H, ClearButton as N } from "../TextArea/TextArea.styles.js";
+import P from "../Icon/components/Cross.js";
+import { Affix as j } from "../TextInput/components/Affix.js";
+import V from "../Icon/components/ChevronDown.js";
+import { useFocusRingOnKeyboard as X } from "../../hooks/useFocusRingOnKeyboard.js";
+import { SELECT_CLASS as u, SELECT_ERROR_CLASS as q } from "../../react-base/src/consts/classes.js";
+const G = p(({ className: n, ...o }, t) => /* @__PURE__ */ e(
+  $,
+  {
+    ref: t,
+    dropdownClassName: n,
+    className: n,
+    getPopupContainer: (l) => l,
+    dropdownAlign: { offset: [0, 4], ...o.dropdownAlign },
+    ...o
+  }
+)), io = p(
+  ({
+    className: n,
+    size: o = f.Medium,
+    mode: t = "single",
+    placeholder: l,
+    invalid: a = !1,
+    showSearch: d = !0,
+    allowClear: C,
+    placement: S,
+    optionFilterProp: w = "children",
+    optionLabelProp: R = "children",
+    disabled: r,
+    onFocus: h,
+    onBlur: g,
+    onClick: I,
+    ...v
+  }, x) => {
+    const i = c(null), s = c(null);
+    b(x, () => i.current);
+    const { focusKind: A, setFocusKind: E, handleOnClick: m, handleOnFocus: O, handleOnBlur: y, handleOnMouseDownCapture: B } = X({
+      inputRef: i,
+      onFocus: h,
+      onBlur: g,
+      onClick: I
+    });
+    return /* @__PURE__ */ e(
+      _,
+      {
+        as: G,
+        ref: i,
+        onFocus: O,
+        onBlur: y,
+        onClick: m,
+        onMouseDownCapture: B,
+        className: F(a && q, u, n),
+        prefixCls: u,
+        "aria-label": "Select",
+        "data-focused": A,
+        $size: o,
+        mode: t !== "single" ? t : void 0,
+        placeholder: l,
+        showSearch: d,
+        suffixIcon: /* @__PURE__ */ e(
+          j,
+          {
+            affix: { transparent: !0, node: /* @__PURE__ */ e(V, {}) },
+            size: o,
+            disabled: Array.isArray(r) ? r.some(Boolean) : r,
+            type: "suffix",
+            invalid: a
+          }
+        ),
+        allowClear: C ? {
+          clearIcon: /* @__PURE__ */ e(H, { $size: o, children: /* @__PURE__ */ e(
+            N,
+            {
+              ref: s,
+              onFocus: () => E("keyboard"),
+              onMouseDown: (L) => {
+                m(L);
+              },
+              onClick: () => {
+                s.current?.dispatchEvent(new Event("mousedown", { bubbles: !0 }));
+              },
+              size: o === f.XSmall ? o : M(o),
+              variant: D.Transparent,
+              icon: /* @__PURE__ */ e(P, {}),
+              iconOnly: !0
+            }
+          ) })
+        } : !1,
+        optionFilterProp: w,
+        optionLabelProp: R,
+        $invalid: a,
+        $disabled: r,
+        disabled: r,
+        listHeight: 250,
+        ...v,
+        removeIcon: /* @__PURE__ */ e(K, { size: o }),
+        menuItemSelectedIcon: /* @__PURE__ */ e(T, { size: o }),
+        placement: S === k.Top ? "topLeft" : "bottomLeft"
+      }
+    );
+  }
+);
+export {
+  io as default
+};
+//# sourceMappingURL=Select.js.map

package/build/esm/components/DeprecatedSelect/Select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select.js","sources":["../../../../src/components/DeprecatedSelect/Select.tsx"],"sourcesContent":["import {\n  forwardRef,\n  MouseEvent as ReactMouseEvent,\n  RefObject,\n  useImperativeHandle,\n  useRef,\n  type ReactElement,\n} from 'react';\n\nimport classNames from 'classnames';\nimport RCSelect, { type BaseSelectRef, type SelectProps } from 'rc-select';\nimport { Sizes, Positions, SELECT_ERROR_CLASS, SELECT_CLASS, Variants } from 'acinguiux-ds-react-base/consts';\nimport { getSmallerSize } from 'acinguiux-ds-react-base/utils/sizesUtils';\nimport { SelectTypes } from 'acinguiux-ds-react-base/components/Select';\n\nimport { RemoveIcon, SelectedIcon } from './components/Icons/Icons';\nimport * as Styled from './Select.styles';\nimport type { ISelectProps } from './Select.types';\nimport * as TextAreaStyled from '../TextArea/TextArea.styles';\nimport Cross from '../Icon/components/Cross';\nimport { Affix } from '../TextInput/components/Affix';\nimport ChevronDown from '../Icon/components/ChevronDown';\nimport { useFocusRingOnKeyboard } from '../../hooks/useFocusRingOnKeyboard';\n\nconst RCSelectRef = forwardRef<BaseSelectRef, SelectProps>(({ className, ...rest }: SelectProps, ref) => (\n  <RCSelect\n    ref={ref}\n    dropdownClassName={className}\n    className={className}\n    getPopupContainer={(element) => element}\n    dropdownAlign={{ offset: [0, 4], ...rest.dropdownAlign }}\n    {...rest}\n  />\n));\n\nconst Select = forwardRef<BaseSelectRef, ISelectProps>(\n  (\n    {\n      className,\n      size = Sizes.Medium,\n      mode = 'single',\n      placeholder,\n      invalid = false,\n      showSearch = true,\n      allowClear,\n      placement,\n      optionFilterProp = 'children',\n      optionLabelProp = 'children',\n      disabled,\n      onFocus,\n      onBlur,\n      onClick,\n      ...rest\n    }: ISelectProps,\n    ref,\n  ): ReactElement => {\n    const inputRef = useRef<BaseSelectRef>(null);\n    const clearBtn = useRef<HTMLButtonElement>(null);\n\n    useImperativeHandle(ref, () => inputRef.current!);\n\n    const { focusKind, setFocusKind, handleOnClick, handleOnFocus, handleOnBlur, handleOnMouseDownCapture } =\n      useFocusRingOnKeyboard({\n        inputRef: inputRef as unknown as RefObject<HTMLInputElement>,\n        onFocus,\n        onBlur,\n        onClick,\n      });\n\n    return (\n      <Styled.Select\n        as={RCSelectRef}\n        ref={inputRef}\n        onFocus={handleOnFocus}\n        onBlur={handleOnBlur}\n        onClick={handleOnClick}\n        onMouseDownCapture={handleOnMouseDownCapture}\n        className={classNames(invalid && SELECT_ERROR_CLASS, SELECT_CLASS, className)}\n        prefixCls={SELECT_CLASS}\n        aria-label=\"Select\"\n        data-focused={focusKind}\n        $size={size}\n        mode={mode !== 'single' ? mode : undefined}\n        placeholder={placeholder}\n        showSearch={showSearch}\n        suffixIcon={\n          <Affix\n            affix={{ transparent: true, node: <ChevronDown /> }}\n            size={size}\n            disabled={Array.isArray(disabled) ? disabled.some(Boolean) : disabled}\n            type=\"suffix\"\n            invalid={invalid}\n          />\n        }\n        allowClear={\n          allowClear\n            ? {\n                clearIcon: (\n                  <TextAreaStyled.ClearButtonContainer $size={size}>\n                    <TextAreaStyled.ClearButton\n                      ref={clearBtn}\n                      onFocus={() => setFocusKind('keyboard')}\n                      onMouseDown={(event) => {\n                        handleOnClick(event as unknown as ReactMouseEvent<HTMLDivElement, MouseEvent>);\n                      }}\n                      onClick={() => {\n                        clearBtn.current?.dispatchEvent(new Event('mousedown', { bubbles: true }));\n                      }}\n                      size={size === Sizes.XSmall ? size : (getSmallerSize(size) as SelectTypes.Size)}\n                      variant={Variants.Transparent}\n                      icon={<Cross />}\n                      iconOnly={true}\n                    />\n                  </TextAreaStyled.ClearButtonContainer>\n                ),\n              }\n            : false\n        }\n        optionFilterProp={optionFilterProp}\n        optionLabelProp={optionLabelProp}\n        $invalid={invalid}\n        $disabled={disabled}\n        disabled={disabled}\n        listHeight={250} // default max-height for Select\n        {...rest}\n        removeIcon={<RemoveIcon size={size} />}\n        menuItemSelectedIcon={<SelectedIcon size={size} />}\n        placement={placement === Positions.Top ? 'topLeft' : 'bottomLeft'}\n      />\n    );\n  },\n);\n\nexport default Select;\n"],"names":["RCSelectRef","forwardRef","className","rest","ref","jsx","RCSelect","element","Select","size","Sizes","mode","placeholder","invalid","showSearch","allowClear","placement","optionFilterProp","optionLabelProp","disabled","onFocus","onBlur","onClick","inputRef","useRef","clearBtn","useImperativeHandle","focusKind","setFocusKind","handleOnClick","handleOnFocus","handleOnBlur","handleOnMouseDownCapture","useFocusRingOnKeyboard","Styled.Select","classNames","SELECT_ERROR_CLASS","SELECT_CLASS","Affix","ChevronDown","TextAreaStyled.ClearButtonContainer","TextAreaStyled.ClearButton","event","getSmallerSize","Variants","Cross","RemoveIcon","SelectedIcon","Positions"],"mappings":"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"}

package/build/esm/components/DeprecatedSelect/Select.styles.d.ts

@@ -0,0 +1,8 @@
+import type { PickTransient } from '../../react-base/src/types';
+import { SelectProps } from 'rc-select';
+import type { ISelectProps } from './Select.types';
+interface StyledSelectProps extends SelectProps, Required<PickTransient<ISelectProps, 'size'>>, PickTransient<ISelectProps, 'disabled' | 'invalid'> {
+}
+declare const Select: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledSelectProps>> & string;
+export { Select };
+//# sourceMappingURL=Select.styles.d.ts.map

package/build/esm/components/DeprecatedSelect/Select.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/DeprecatedSelect/Select.styles.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAMnE,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAMxC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAGnD,UAAU,iBACR,SACE,WAAW,EACX,QAAQ,CAAC,aAAa,CAAC,YAAY,EAAE,MAAM,CAAC,CAAC,EAC7C,aAAa,CAAC,YAAY,EAAE,UAAU,GAAG,SAAS,CAAC;CAAG;AAyT1D,QAAA,MAAM,MAAM,sPAqLX,CAAC;AAEF,OAAO,EAAE,MAAM,EAAE,CAAC"}

package/build/esm/components/DeprecatedSelect/Select.styles.js

@@ -0,0 +1,455 @@
+import { css as d, styled as $ } from "styled-components";
+import { ZIndexes as h, Sizes as v } from "../../react-base/src/consts/index.js";
+import { Variables as l } from "../../react-base/src/theme/types/layer.js";
+import { getPlaceholderFontStyles as b } from "../../react-base/src/utils/stylesUtils.js";
+import { consts as m } from "../../react-base/src/components/Select/Select.consts.js";
+import { useStyles as x } from "../../react-base/src/components/Tooltip/Tooltip.utils.js";
+import { consts as o } from "../../react-base/src/components/Input/Input.consts.js";
+import { WrapperStyles as y } from "../../react-base/src/components/Input/Input.styles.js";
+import { getInputBorderStyles as w } from "../../react-base/src/components/Input/Input.utils.js";
+import { FabricsVariables as g } from "acinguiux-ds-fabrics";
+import { getLabelTypographySize as u, getParagraphTypographySize as f } from "../../react-base/src/utils/sizesUtils.js";
+import { rotate as S } from "../../utils/styleUtils.js";
+import { rcSelectDropdownSlideUpIn as k, rcSelectDropdownSlideUpOut as P } from "./utils/styleUtils.js";
+import { getSelectedOptionTagStyles as B } from "./utils/selectedOptionTagStyleUtils.js";
+const T = d`
+  ${({ prefixCls: a, $size: n, allowClear: i, loading: t, disabled: e, theme: p }) => {
+  const r = m[n], c = (s = g.States.Resting) => B(p, s, e);
+  return d`
+      &-multiple .${a}-selector {
+        position: relative;
+        display: flex;
+        flex-wrap: wrap;
+        padding: 0;
+        min-height: ${o[n].containerHeight}px;
+
+        .${a}-selection-overflow {
+          position: relative;
+          display: flex;
+          flex-wrap: wrap;
+          gap: ${r.tag.gapContainer}px;
+          width: 100%;
+
+          --arrow-size: ${o[n].iconSize + o[n].padding.inline}px;
+
+          ${i ? d`
+                --clear-size: ${o[n].iconSize + o[n].padding.inline * 2}px;
+              ` : ""};
+          ${t ? d`
+                --loading-size: ${r.default.loading + o[n].padding.inline * 2}px;
+              ` : ""};
+          max-width: calc(100% - (var(--arrow-size) + var(--clear-size, 0px) + var(--loading-size, 0px)));
+          white-space: nowrap;
+          padding: ${r.tag.paddingContainer}px;
+
+          &-item {
+            flex: 0 0 auto;
+            max-width: 100%;
+            align-self: center;
+          }
+
+          .${a}-selection-search-input {
+            margin-left: ${o[n].padding.inline - o[n].containerPadding - r.tag.paddingContainer}px;
+          }
+        }
+
+        .${a}-selection-item {
+          ${p.typography("label", u(n))};
+
+          display: flex;
+          align-items: center;
+          gap: ${r.tag.gap}px;
+          padding: ${r.tag.paddingTopBottom}px ${r.tag.paddingRight}px ${r.tag.paddingTopBottom}px
+            ${r.tag.paddingLeft}px;
+          border-radius: 4px;
+          ${c()};
+
+          &:hover {
+            ${c(g.States.Hover)};
+
+            ${e && d`
+              background-color: ${c().backgroundColor};
+              color: ${c().color};
+            `}
+          }
+
+          &:active {
+            ${c(g.States.Press)};
+          }
+
+          &:first-child {
+            margin-left: 0;
+          }
+
+          &-content {
+            text-overflow: ellipsis;
+            overflow: hidden;
+          }
+
+          &-remove {
+            display: flex;
+            cursor: pointer;
+          }
+
+          &-disabled {
+            cursor: not-allowed;
+          }
+        }
+
+        .${a}-selection-placeholder {
+          position: absolute;
+          top: 50%;
+          left: ${o[n].padding.inline}px;
+
+          --arrow-size: ${o[n].iconSize + o[n].padding.inline * 2 + o[n].containerPadding + o[n].containerGap}px;
+          ${t ? d`
+                --loading-size: ${r.default.loading + o[n].padding.inline * 2}px;
+              ` : ""};
+          right: calc(var(--loading-size, 0px) + var(--arrow-size));
+          transform: translateY(-50%);
+          overflow: hidden;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+          min-width: 0;
+          width: calc(100% - var(--arrow-size) - var(--loading-size, 0px));
+          max-width: 100%;
+        }
+
+        .${a}-selection-search {
+          position: relative;
+          min-width: 0;
+          max-width: 100%;
+
+          &-input,
+          &-mirror {
+            padding: 0;
+            font-family: system-ui;
+          }
+
+          &-mirror {
+            z-index: ${h.SELECT};
+            white-space: nowrap;
+            position: absolute;
+            left: 10px;
+            top: 0;
+            visibility: hidden;
+          }
+        }
+      }
+    `;
+}}
+`, F = d(({ prefixCls: a, $size: n, allowClear: i, loading: t }) => {
+  const e = m[n];
+  return d`
+    &-single .${a}-selector {
+      .${a}-selection-search {
+        width: 100%;
+
+        &-input {
+          width: 100%;
+        }
+      }
+
+      .${a}-selection-item, .${a}-selection-placeholder {
+        left: ${o[n].containerPadding + o[n].padding.inline}px;
+      }
+
+      .${a}-selection-item, .${a}-selection-placeholder {
+        position: absolute;
+        top: 50%;
+        transform: translateY(-50%);
+      }
+
+      .${a}-selection-placeholder {
+        position: absolute;
+        top: 50%;
+        left: ${o[n].padding.inline + o[n].containerPadding}px;
+
+        --arrow-size: ${o[n].iconSize + o[n].padding.inline * 2 + o[n].containerPadding + o[n].containerGap}px;
+        ${t ? d`
+              --loading-size: ${e.default.loading + o[n].padding.inline * 2}px;
+            ` : ""};
+        right: calc(var(--loading-size, 0px) + var(--arrow-size));
+        transform: translateY(-50%);
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        min-width: 0;
+        width: calc(100% - var(--arrow-size) - var(--loading-size, 0px));
+        max-width: 100%;
+      }
+
+      .${a}-selection-item {
+        display: inline-block;
+
+        --arrow-size: ${o[n].iconSize + o[n].padding.inline * 2 + o[n].containerPadding + o[n].containerGap}px;
+        ${i ? d`
+              --clear-size: ${o[n].iconSize + o[n].padding.inline * 2}px;
+            ` : ""};
+        ${t ? d`
+              --loading-size: ${e.default.loading + o[n].padding.inline * 2}px;
+            ` : ""};
+        width: calc(100% - (var(--clear-size, 0px) + var(--loading-size, 0px) + var(--arrow-size)));
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+    }
+  `;
+}), O = d(({ $size: a, prefixCls: n, theme: i }) => {
+  const t = o[a], e = { foundation: "surface", selectedProminence: "subtle" }, p = i.layer(e);
+  return d`
+    &-item {
+      ${i.typography("paragraph", f(a))};
+      &-group {
+        ${i.typography("label", u(a))};
+        position: relative;
+        padding: ${t.padding.block + t.containerPadding}px ${t.padding.inline}px;
+        color: ${p[l.TextOnFoundationSubtle]};
+
+        ::after {
+          content: '';
+          position: absolute;
+          height: 1px;
+          bottom: 4px;
+          left: ${t.padding.block + t.containerPadding}px;
+          right: ${t.padding.block + t.containerPadding}px;
+          background-color: ${p[l.BorderOnFoundationSubtle]};
+        }
+      }
+
+      &-option-content {
+        text-overflow: ellipsis;
+        overflow: hidden;
+      }
+
+      &-option {
+        ${i.typography("label", u(a))};
+        display: flex;
+        align-items: flex-start;
+        justify-content: space-between;
+        position: relative;
+        padding: ${t.padding.block + t.containerPadding}px ${t.padding.inline}px;
+        border-radius: 4px;
+        background: ${p[l.BackgroundFoundation]};
+        color: ${p[l.TextOnFoundationStrong]};
+        cursor: pointer;
+        transition: background-color 0.3s cubic-bezier(0.35, 0, 0.25, 1);
+
+        /* NOTE: This should have &:hover style but for limitation we have in rc-select, we are implementing &-active instead */
+        &-active {
+          background: ${i.layer({ ...e, state: g.States.Hover })[l.BackgroundFoundation]};
+
+          &:active {
+            background: ${i.layer({ ...e, state: g.States.Press })[l.BackgroundFoundation]};
+          }
+        }
+
+        .${n}-item-option-state {
+          display: none;
+          position: relative;
+          pointer-events: none;
+        }
+
+        &-selected {
+          background: ${p[l.BackgroundSelected]};
+
+          &:hover {
+            background: ${i.layer({ ...e, state: g.States.Hover })[l.BackgroundSelected]};
+          }
+
+          &:active {
+            background: ${i.layer({ ...e, state: g.States.Press })[l.BackgroundSelected]};
+          }
+
+          .${n}-item-option-state {
+            display: inline-flex;
+          }
+        }
+
+        &-disabled {
+          color: ${i.layer({ foundation: "surface", disabled: !0 })[l.TextOnFoundationSubtle]};
+          cursor: not-allowed;
+        }
+      }
+
+      &-empty {
+        text-align: center;
+      }
+    }
+  `;
+}), X = $.div`
+  ${({ prefixCls: a, $size: n, $invalid: i, $disabled: t, theme: e }) => {
+  const p = m[n], r = o[n], c = x(e), s = e.layer({ foundation: "surface" });
+  return d`
+      ${y};
+      padding: 0;
+      min-width: 0;
+
+      ${e.typography("label", u(n))};
+      .${a} {
+        ${O};
+      }
+
+      &.${a} {
+        ${F};
+        ${T};
+
+        cursor: ${t ? "not-allowed" : "pointer"};
+
+        .${a}-selector {
+          padding: ${r.containerPadding}px;
+          position: relative;
+          display: flex;
+          align-items: center;
+          width: 100%;
+
+          .${a}-selection-wrap {
+            max-width: 100%;
+            width: 100%;
+          }
+        }
+
+        .${a}-selection-search-input {
+          cursor: inherit;
+        }
+
+        .${a}-selection-placeholder {
+          ${b(e, t)};
+        }
+
+        .${a}-clear {
+          --clear-right: ${o[n].containerGap * 2 + o[n].iconSize + o[n].padding.inline}px;
+          position: absolute;
+          top: 0;
+          right: var(--clear-right);
+          width: 0;
+          bottom: 0;
+        }
+
+        .${a}-arrow.${a}-arrow-loading + .${a}-clear {
+          right: calc(
+            var(--clear-right) +
+              ${o[n].containerGap + o[n].padding.inline + p.default.loading}px
+          );
+        }
+
+        &-show-arrow {
+          .${a}-arrow {
+            &,
+            & svg {
+              color: ${e.layer({ foundation: "surface", disabled: t })[l.TextOnFoundationStrong]};
+            }
+            position: absolute;
+            right: ${o[n].containerGap}px;
+            display: flex;
+            gap: ${o[n].containerGap}px;
+            pointer-events: none;
+            top: ${o[n].containerGap}px;
+            bottom: ${o[n].containerGap}px;
+            ${n === v.XSmall && d`
+              top: ${w(n, i && !t ? "invalid" : "normal", !1).borderWidth}px;
+              bottom: ${w(n, i && !t ? "invalid" : "normal", !1).borderWidth}px;
+            `};
+            align-items: flex-start;
+
+            &-loading {
+              &::before {
+                content: '';
+                display: inline-block;
+                width: ${p.default.loading}px;
+                height: ${p.default.loading}px;
+                margin-top: ${o[n].containerGap}px;
+                margin-right: ${o[n].padding.inline - o[n].containerGap}px;
+                border-radius: 100%;
+                border: 2px solid ${s[l.BorderOnFoundationSubtle]};
+                border-top-color: ${s[l.BorderOnFoundationStrong]};
+                animation: ${S} 0.8s linear infinite;
+                box-sizing: border-box;
+              }
+            }
+          }
+        }
+
+        /* ============== Dropdown =============== */
+        &-dropdown {
+          z-index: ${h.SELECT};
+          position: absolute;
+          max-width: 100%;
+          border: none;
+          background-color: ${c.background};
+          color: ${c.color};
+          filter: ${c.dropShadow};
+          will-change: filter;
+
+          .rc-virtual-list-holder-inner {
+            gap: ${r.padding.block}px;
+          }
+
+          &::before {
+            display: none;
+          }
+        }
+
+        &-dropdown > div,
+        &-dropdown:hover > div {
+          width: 100%;
+          padding: ${r.padding.block}px;
+          border-radius: ${r.affixBorderRadius}px;
+        }
+
+        &-dropdown-hidden,
+        &-dropdown-hidden:hover {
+          display: none;
+        }
+      }
+
+      .${a}-dropdown {
+        &-slide-up-enter,
+        &-slide-up-appear {
+          opacity: 0;
+          animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
+          animation-play-state: paused;
+        }
+
+        &-slide-up-leave {
+          opacity: 1;
+          animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.34);
+          animation-play-state: paused;
+        }
+
+        &-slide-up-enter.${a}-slide-up-enter-active, &-slide-up-appear.${a}-slide-up-appear-active {
+          &.${a}-placement-bottomLeft {
+            animation-name: ${k};
+            animation-play-state: running;
+          }
+        }
+
+        &-slide-up-leave.${a}-slide-up-leave-active {
+          &.${a}-placement-bottomLeft {
+            animation-name: ${P};
+            animation-play-state: running;
+          }
+        }
+
+        &-slide-up-enter.${a}-slide-up-enter-active, &-slide-up-appear.${a}-slide-up-appear-active {
+          &.${a}-placement-topLeft {
+            animation-name: rcSelectDropdownSlideDownIn;
+            animation-play-state: running;
+          }
+        }
+
+        &-slide-up-leave.${a}-slide-up-leave-active {
+          &.${a}-placement-topLeft {
+            animation-name: rcSelectDropdownSlideDownOut;
+            animation-play-state: running;
+          }
+        }
+      }
+    `;
+}}
+`;
+export {
+  X as Select
+};
+//# sourceMappingURL=Select.styles.js.map

package/build/esm/components/DeprecatedSelect/Select.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select.styles.js","sources":["../../../../src/components/DeprecatedSelect/Select.styles.ts"],"sourcesContent":["import { styled, css } from 'styled-components';\nimport { Sizes, ZIndexes } from 'acinguiux-ds-react-base/consts';\nimport type { PickTransient } from 'acinguiux-ds-react-base/types';\nimport { type ModesType, Variables } from 'acinguiux-ds-react-base/theme';\nimport { getPlaceholderFontStyles } from 'acinguiux-ds-react-base/utils/stylesUtils';\nimport { SelectConsts } from 'acinguiux-ds-react-base/components/Select';\nimport { TooltipUtils } from 'acinguiux-ds-react-base/components/Tooltip';\nimport { InputConsts, InputStyles, InputUtils } from 'acinguiux-ds-react-base/components/Input';\nimport { SelectProps } from 'rc-select';\nimport { FabricsVariables } from 'acinguiux-ds-fabrics';\nimport { getParagraphTypographySize, getLabelTypographySize } from 'acinguiux-ds-react-base/utils/sizesUtils';\n\nimport { rotate } from '../../utils/styleUtils';\nimport { rcSelectDropdownSlideUpIn, rcSelectDropdownSlideUpOut } from './utils/styleUtils';\nimport type { ISelectProps } from './Select.types';\nimport { getSelectedOptionTagStyles } from './utils/selectedOptionTagStyleUtils';\n\ninterface StyledSelectProps\n  extends\n    SelectProps,\n    Required<PickTransient<ISelectProps, 'size'>>,\n    PickTransient<ISelectProps, 'disabled' | 'invalid'> {}\n\nconst Multiple = css<StyledSelectProps>`\n  ${({ prefixCls, $size, allowClear, loading, disabled, theme }) => {\n    const sizes = SelectConsts.consts[$size];\n    const getStyles = (state: FabricsVariables.StateType = FabricsVariables.States.Resting) =>\n      getSelectedOptionTagStyles(theme, state, disabled);\n\n    return css<StyledSelectProps>`\n      &-multiple .${prefixCls}-selector {\n        position: relative;\n        display: flex;\n        flex-wrap: wrap;\n        padding: 0;\n        min-height: ${InputConsts.consts[$size].containerHeight}px;\n\n        .${prefixCls}-selection-overflow {\n          position: relative;\n          display: flex;\n          flex-wrap: wrap;\n          gap: ${sizes.tag.gapContainer}px;\n          width: 100%;\n\n          --arrow-size: ${InputConsts.consts[$size].iconSize + InputConsts.consts[$size].padding.inline}px;\n\n          ${allowClear\n            ? css`\n                --clear-size: ${InputConsts.consts[$size].iconSize + InputConsts.consts[$size].padding.inline * 2}px;\n              `\n            : ''};\n          ${loading\n            ? css`\n                --loading-size: ${sizes.default.loading + InputConsts.consts[$size].padding.inline * 2}px;\n              `\n            : ''};\n          max-width: calc(100% - (var(--arrow-size) + var(--clear-size, 0px) + var(--loading-size, 0px)));\n          white-space: nowrap;\n          padding: ${sizes.tag.paddingContainer}px;\n\n          &-item {\n            flex: 0 0 auto;\n            max-width: 100%;\n            align-self: center;\n          }\n\n          .${prefixCls}-selection-search-input {\n            margin-left: ${InputConsts.consts[$size].padding.inline -\n            InputConsts.consts[$size].containerPadding -\n            sizes.tag.paddingContainer}px;\n          }\n        }\n\n        .${prefixCls}-selection-item {\n          ${theme.typography('label', getLabelTypographySize($size))};\n\n          display: flex;\n          align-items: center;\n          gap: ${sizes.tag.gap}px;\n          padding: ${sizes.tag.paddingTopBottom}px ${sizes.tag.paddingRight}px ${sizes.tag.paddingTopBottom}px\n            ${sizes.tag.paddingLeft}px;\n          border-radius: 4px;\n          ${getStyles()};\n\n          &:hover {\n            ${getStyles(FabricsVariables.States.Hover)};\n\n            ${disabled &&\n            css`\n              background-color: ${getStyles().backgroundColor};\n              color: ${getStyles().color};\n            `}\n          }\n\n          &:active {\n            ${getStyles(FabricsVariables.States.Press)};\n          }\n\n          &:first-child {\n            margin-left: 0;\n          }\n\n          &-content {\n            text-overflow: ellipsis;\n            overflow: hidden;\n          }\n\n          &-remove {\n            display: flex;\n            cursor: pointer;\n          }\n\n          &-disabled {\n            cursor: not-allowed;\n          }\n        }\n\n        .${prefixCls}-selection-placeholder {\n          position: absolute;\n          top: 50%;\n          left: ${InputConsts.consts[$size].padding.inline}px;\n\n          --arrow-size: ${InputConsts.consts[$size].iconSize +\n          InputConsts.consts[$size].padding.inline * 2 +\n          InputConsts.consts[$size].containerPadding +\n          InputConsts.consts[$size].containerGap}px;\n          ${loading\n            ? css`\n                --loading-size: ${sizes.default.loading + InputConsts.consts[$size].padding.inline * 2}px;\n              `\n            : ''};\n          right: calc(var(--loading-size, 0px) + var(--arrow-size));\n          transform: translateY(-50%);\n          overflow: hidden;\n          white-space: nowrap;\n          text-overflow: ellipsis;\n          min-width: 0;\n          width: calc(100% - var(--arrow-size) - var(--loading-size, 0px));\n          max-width: 100%;\n        }\n\n        .${prefixCls}-selection-search {\n          position: relative;\n          min-width: 0;\n          max-width: 100%;\n\n          &-input,\n          &-mirror {\n            padding: 0;\n            font-family: system-ui;\n          }\n\n          &-mirror {\n            z-index: ${ZIndexes.SELECT};\n            white-space: nowrap;\n            position: absolute;\n            left: 10px;\n            top: 0;\n            visibility: hidden;\n          }\n        }\n      }\n    `;\n  }}\n`;\n\nconst Single = css<StyledSelectProps>(({ prefixCls, $size, allowClear, loading }) => {\n  const sizes = SelectConsts.consts[$size];\n\n  return css<StyledSelectProps>`\n    &-single .${prefixCls}-selector {\n      .${prefixCls}-selection-search {\n        width: 100%;\n\n        &-input {\n          width: 100%;\n        }\n      }\n\n      .${prefixCls}-selection-item, .${prefixCls}-selection-placeholder {\n        left: ${InputConsts.consts[$size].containerPadding + InputConsts.consts[$size].padding.inline}px;\n      }\n\n      .${prefixCls}-selection-item, .${prefixCls}-selection-placeholder {\n        position: absolute;\n        top: 50%;\n        transform: translateY(-50%);\n      }\n\n      .${prefixCls}-selection-placeholder {\n        position: absolute;\n        top: 50%;\n        left: ${InputConsts.consts[$size].padding.inline + InputConsts.consts[$size].containerPadding}px;\n\n        --arrow-size: ${InputConsts.consts[$size].iconSize +\n        InputConsts.consts[$size].padding.inline * 2 +\n        InputConsts.consts[$size].containerPadding +\n        InputConsts.consts[$size].containerGap}px;\n        ${loading\n          ? css`\n              --loading-size: ${sizes.default.loading + InputConsts.consts[$size].padding.inline * 2}px;\n            `\n          : ''};\n        right: calc(var(--loading-size, 0px) + var(--arrow-size));\n        transform: translateY(-50%);\n        overflow: hidden;\n        white-space: nowrap;\n        text-overflow: ellipsis;\n        min-width: 0;\n        width: calc(100% - var(--arrow-size) - var(--loading-size, 0px));\n        max-width: 100%;\n      }\n\n      .${prefixCls}-selection-item {\n        display: inline-block;\n\n        --arrow-size: ${InputConsts.consts[$size].iconSize +\n        InputConsts.consts[$size].padding.inline * 2 +\n        InputConsts.consts[$size].containerPadding +\n        InputConsts.consts[$size].containerGap}px;\n        ${allowClear\n          ? css`\n              --clear-size: ${InputConsts.consts[$size].iconSize + InputConsts.consts[$size].padding.inline * 2}px;\n            `\n          : ''};\n        ${loading\n          ? css`\n              --loading-size: ${sizes.default.loading + InputConsts.consts[$size].padding.inline * 2}px;\n            `\n          : ''};\n        width: calc(100% - (var(--clear-size, 0px) + var(--loading-size, 0px) + var(--arrow-size)));\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n      }\n    }\n  `;\n});\n\nconst Option = css<StyledSelectProps>(({ $size, prefixCls, theme }) => {\n  const sizes = InputConsts.consts[$size];\n  const modes: ModesType = { foundation: 'surface', selectedProminence: 'subtle' };\n  const layer = theme.layer(modes);\n\n  return css`\n    &-item {\n      ${theme.typography('paragraph', getParagraphTypographySize($size))};\n      &-group {\n        ${theme.typography('label', getLabelTypographySize($size))};\n        position: relative;\n        padding: ${sizes.padding.block + sizes.containerPadding}px ${sizes.padding.inline}px;\n        color: ${layer[Variables.TextOnFoundationSubtle]};\n\n        ::after {\n          content: '';\n          position: absolute;\n          height: 1px;\n          bottom: 4px;\n          left: ${sizes.padding.block + sizes.containerPadding}px;\n          right: ${sizes.padding.block + sizes.containerPadding}px;\n          background-color: ${layer[Variables.BorderOnFoundationSubtle]};\n        }\n      }\n\n      &-option-content {\n        text-overflow: ellipsis;\n        overflow: hidden;\n      }\n\n      &-option {\n        ${theme.typography('label', getLabelTypographySize($size))};\n        display: flex;\n        align-items: flex-start;\n        justify-content: space-between;\n        position: relative;\n        padding: ${sizes.padding.block + sizes.containerPadding}px ${sizes.padding.inline}px;\n        border-radius: 4px;\n        background: ${layer[Variables.BackgroundFoundation]};\n        color: ${layer[Variables.TextOnFoundationStrong]};\n        cursor: pointer;\n        transition: background-color 0.3s cubic-bezier(0.35, 0, 0.25, 1);\n\n        /* NOTE: This should have &:hover style but for limitation we have in rc-select, we are implementing &-active instead */\n        &-active {\n          background: ${theme.layer({ ...modes, state: FabricsVariables.States.Hover })[\n            Variables.BackgroundFoundation\n          ]};\n\n          &:active {\n            background: ${theme.layer({ ...modes, state: FabricsVariables.States.Press })[\n              Variables.BackgroundFoundation\n            ]};\n          }\n        }\n\n        .${prefixCls}-item-option-state {\n          display: none;\n          position: relative;\n          pointer-events: none;\n        }\n\n        &-selected {\n          background: ${layer[Variables.BackgroundSelected]};\n\n          &:hover {\n            background: ${theme.layer({ ...modes, state: FabricsVariables.States.Hover })[\n              Variables.BackgroundSelected\n            ]};\n          }\n\n          &:active {\n            background: ${theme.layer({ ...modes, state: FabricsVariables.States.Press })[\n              Variables.BackgroundSelected\n            ]};\n          }\n\n          .${prefixCls}-item-option-state {\n            display: inline-flex;\n          }\n        }\n\n        &-disabled {\n          color: ${theme.layer({ foundation: 'surface', disabled: true })[Variables.TextOnFoundationSubtle]};\n          cursor: not-allowed;\n        }\n      }\n\n      &-empty {\n        text-align: center;\n      }\n    }\n  `;\n});\n\nconst Select = styled.div<StyledSelectProps>`\n  ${({ prefixCls, $size, $invalid, $disabled, theme }) => {\n    const sizes = SelectConsts.consts[$size];\n    const inputSizes = InputConsts.consts[$size];\n    const dropdownStyles = TooltipUtils.useStyles(theme);\n    const layer = theme.layer({ foundation: 'surface' });\n\n    return css<StyledSelectProps>`\n      ${InputStyles.WrapperStyles};\n      padding: 0;\n      min-width: 0;\n\n      ${theme.typography('label', getLabelTypographySize($size))};\n      .${prefixCls} {\n        ${Option};\n      }\n\n      &.${prefixCls} {\n        ${Single};\n        ${Multiple};\n\n        cursor: ${$disabled ? 'not-allowed' : 'pointer'};\n\n        .${prefixCls}-selector {\n          padding: ${inputSizes.containerPadding}px;\n          position: relative;\n          display: flex;\n          align-items: center;\n          width: 100%;\n\n          .${prefixCls}-selection-wrap {\n            max-width: 100%;\n            width: 100%;\n          }\n        }\n\n        .${prefixCls}-selection-search-input {\n          cursor: inherit;\n        }\n\n        .${prefixCls}-selection-placeholder {\n          ${getPlaceholderFontStyles(theme, $disabled)};\n        }\n\n        .${prefixCls}-clear {\n          --clear-right: ${InputConsts.consts[$size].containerGap * 2 +\n          InputConsts.consts[$size].iconSize +\n          InputConsts.consts[$size].padding.inline}px;\n          position: absolute;\n          top: 0;\n          right: var(--clear-right);\n          width: 0;\n          bottom: 0;\n        }\n\n        .${prefixCls}-arrow.${prefixCls}-arrow-loading + .${prefixCls}-clear {\n          right: calc(\n            var(--clear-right) +\n              ${InputConsts.consts[$size].containerGap +\n              InputConsts.consts[$size].padding.inline +\n              sizes.default.loading}px\n          );\n        }\n\n        &-show-arrow {\n          .${prefixCls}-arrow {\n            &,\n            & svg {\n              color: ${theme.layer({ foundation: 'surface', disabled: $disabled })[Variables.TextOnFoundationStrong]};\n            }\n            position: absolute;\n            right: ${InputConsts.consts[$size].containerGap}px;\n            display: flex;\n            gap: ${InputConsts.consts[$size].containerGap}px;\n            pointer-events: none;\n            top: ${InputConsts.consts[$size].containerGap}px;\n            bottom: ${InputConsts.consts[$size].containerGap}px;\n            ${$size === Sizes.XSmall &&\n            css`\n              top: ${InputUtils.getInputBorderStyles($size, $invalid && !$disabled ? 'invalid' : 'normal', false)\n                .borderWidth}px;\n              bottom: ${InputUtils.getInputBorderStyles($size, $invalid && !$disabled ? 'invalid' : 'normal', false)\n                .borderWidth}px;\n            `};\n            align-items: flex-start;\n\n            &-loading {\n              &::before {\n                content: '';\n                display: inline-block;\n                width: ${sizes.default.loading}px;\n                height: ${sizes.default.loading}px;\n                margin-top: ${InputConsts.consts[$size].containerGap}px;\n                margin-right: ${InputConsts.consts[$size].padding.inline - InputConsts.consts[$size].containerGap}px;\n                border-radius: 100%;\n                border: 2px solid ${layer[Variables.BorderOnFoundationSubtle]};\n                border-top-color: ${layer[Variables.BorderOnFoundationStrong]};\n                animation: ${rotate} 0.8s linear infinite;\n                box-sizing: border-box;\n              }\n            }\n          }\n        }\n\n        /* ============== Dropdown =============== */\n        &-dropdown {\n          z-index: ${ZIndexes.SELECT};\n          position: absolute;\n          max-width: 100%;\n          border: none;\n          background-color: ${dropdownStyles.background};\n          color: ${dropdownStyles.color};\n          filter: ${dropdownStyles.dropShadow};\n          will-change: filter;\n\n          .rc-virtual-list-holder-inner {\n            gap: ${inputSizes.padding.block}px;\n          }\n\n          &::before {\n            display: none;\n          }\n        }\n\n        &-dropdown > div,\n        &-dropdown:hover > div {\n          width: 100%;\n          padding: ${inputSizes.padding.block}px;\n          border-radius: ${inputSizes.affixBorderRadius}px;\n        }\n\n        &-dropdown-hidden,\n        &-dropdown-hidden:hover {\n          display: none;\n        }\n      }\n\n      .${prefixCls}-dropdown {\n        &-slide-up-enter,\n        &-slide-up-appear {\n          opacity: 0;\n          animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);\n          animation-play-state: paused;\n        }\n\n        &-slide-up-leave {\n          opacity: 1;\n          animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.34);\n          animation-play-state: paused;\n        }\n\n        &-slide-up-enter.${prefixCls}-slide-up-enter-active, &-slide-up-appear.${prefixCls}-slide-up-appear-active {\n          &.${prefixCls}-placement-bottomLeft {\n            animation-name: ${rcSelectDropdownSlideUpIn};\n            animation-play-state: running;\n          }\n        }\n\n        &-slide-up-leave.${prefixCls}-slide-up-leave-active {\n          &.${prefixCls}-placement-bottomLeft {\n            animation-name: ${rcSelectDropdownSlideUpOut};\n            animation-play-state: running;\n          }\n        }\n\n        &-slide-up-enter.${prefixCls}-slide-up-enter-active, &-slide-up-appear.${prefixCls}-slide-up-appear-active {\n          &.${prefixCls}-placement-topLeft {\n            animation-name: rcSelectDropdownSlideDownIn;\n            animation-play-state: running;\n          }\n        }\n\n        &-slide-up-leave.${prefixCls}-slide-up-leave-active {\n          &.${prefixCls}-placement-topLeft {\n            animation-name: rcSelectDropdownSlideDownOut;\n            animation-play-state: running;\n          }\n        }\n      }\n    `;\n  }}\n`;\n\nexport { Select };\n"],"names":["Multiple","css","prefixCls","$size","allowClear","loading","disabled","theme","sizes","SelectConsts.consts","getStyles","state","FabricsVariables","getSelectedOptionTagStyles","InputConsts.consts","getLabelTypographySize","ZIndexes","Single","Option","modes","layer","getParagraphTypographySize","Variables","Select","styled","$invalid","$disabled","inputSizes","dropdownStyles","TooltipUtils.useStyles","InputStyles.WrapperStyles","getPlaceholderFontStyles","Sizes","InputUtils.getInputBorderStyles","rotate","rcSelectDropdownSlideUpIn","rcSelectDropdownSlideUpOut"],"mappings":"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"}