carbon-react 158.3.0 → 158.3.1

package/esm/components/flat-table/sort/sort.component.js

@@ -1 +1 @@
-import{jsxs as e,Fragment as r,jsx as o}from"react/jsx-runtime";import{useRef as t}from"react";import n from"../../../__internal__/utils/helpers/events/events.js";import{Typography as l}from"../../typography/typography.component.js";import{StyledSort as a,StyledSortIcon as s,StyledSpaceHolder as i}from"./sort.style.js";import c from"../../../__internal__/utils/helpers/guid/index.js";import m from"../../../hooks/__internal__/useLocale/useLocale.js";import{useStrictFlatTableContext as p}from"../__internal__/strict-flat-table.context.js";const d=({children:d,onClick:_,sortType:u,accessibleName:y,"data-element":f,"data-role":h})=>{const b=t(c()),j=m(),{colorTheme:g}=p();return e(r,{children:[o(l,{screenReaderOnly:!0,id:b.current,children:y||j.sort.accessibleName(d,u)}),e(a,{role:"button",onKeyDown:e=>n.isEnterOrSpaceKey(e)?(e.preventDefault(),null==_?void 0:_()):null,tabIndex:0,onClick:_,sortType:u,"aria-labelledby":b.current,"data-component":"sort","data-element":f,"data-role":h,children:[d,u&&o(s,{type:"ascending"===u?"sort_up":"sort_down",iconColor:"dark"===g?"--colorsActionMinorYang100":"--colorActionMinor500"})]}),!u&&o(i,{"data-role":"sort-placeholder"})]})};export{d as Sort,d as default};
+import{jsxs as e,Fragment as r,jsx as t}from"react/jsx-runtime";import{useRef as o}from"react";import{useStrictFlatTableContext as n}from"../__internal__/strict-flat-table.context.js";import{Typography as a}from"../../typography/typography.component.js";import l from"../../../__internal__/utils/helpers/events/events.js";import s from"../../../__internal__/utils/helpers/guid/index.js";import i from"../../../hooks/__internal__/useLocale/useLocale.js";import c from"../../icon/icon.component.js";import m from"./sort.style.js";const p=({children:p,onClick:d,sortType:_,accessibleName:u,"data-element":h,"data-role":f})=>{const y=o(s()),j=i(),{colorTheme:b}=n();return e(r,{children:[t(a,{screenReaderOnly:!0,id:y.current,children:u||j.sort.accessibleName(p,_)}),e(m,{"aria-labelledby":y.current,colorTheme:b,"data-component":"sort","data-element":h,"data-role":f,onClick:d,onKeyDown:e=>l.isEnterOrSpaceKey(e)?(e.preventDefault(),null==d?void 0:d()):null,children:[t("span",{children:p}),_?t(c,{"data-element":"sort-icon",type:"ascending"===_?"sort_up":"sort_down"}):t("span",{"data-role":"sort-placeholder"})]})]})};export{p as Sort,p as default};

package/esm/components/flat-table/sort/sort.style.d.ts

@@ -1,11 +1,5 @@
-import { StyledIconProps } from "../../icon/icon.style";
-import { SortProps } from "./sort.component";
-declare const StyledSort: import("styled-components").StyledComponent<"div", any, {
-    theme: object;
-} & Pick<SortProps, "sortType">, "theme">;
-declare const StyledSpaceHolder: import("styled-components").StyledComponent<"div", any, {}, never>;
-interface StylesSortIconProps extends StyledIconProps {
-    iconColor?: string;
-}
-declare const StyledSortIcon: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../../icon").IconProps & import("react").RefAttributes<HTMLSpanElement>>, any, StylesSortIconProps, never>;
-export { StyledSort, StyledSpaceHolder, StyledSortIcon };
+declare const StyledSortButton: import("styled-components").StyledComponent<"button", any, {
+    colorTheme?: "light" | "transparent-base" | "transparent-white" | "dark";
+    size?: "compact" | "small" | "medium" | "large" | "extraLarge";
+}, never>;
+export default StyledSortButton;

package/esm/components/flat-table/sort/sort.style.js

@@ -1 +1 @@
-import o from"styled-components";import t from"../../icon/icon.component.js";import e from"../../../style/utils/add-focus-styling.js";import i from"../../../style/themes/apply-base-theme.js";const r=o.div.attrs(i).withConfig({displayName:"sort.style__StyledSort",componentId:"sc-806736b5-0"})(["display:inline-flex;align-items:center;padding-left:2px;padding-right:2px;border-bottom:1px solid transparent;position:relative;:hover{border-bottom:1px solid;cursor:pointer;}:focus{"," border-radius:var(--borderRadius025);}"],e()),s=o.div.withConfig({displayName:"sort.style__StyledSpaceHolder",componentId:"sc-806736b5-1"})(["display:inline-block;width:22px;"]),n=o(t).withConfig({displayName:"sort.style__StyledSortIcon",componentId:"sc-806736b5-2"})(["padding-left:var(--spacing075);color:",";"],(({iconColor:o})=>`var(${o})`));export{r as StyledSort,n as StyledSortIcon,s as StyledSpaceHolder};
+import o,{css as t}from"styled-components";import r from"../../../style/utils/add-focus-styling.js";const e={compact:{fontSize:"13px"},small:{fontSize:"14px"},medium:{fontSize:"14px"},large:{fontSize:"16px"},extraLarge:{fontSize:"16px"}},i=o.button.withConfig({displayName:"sort.style__StyledSortButton",componentId:"sc-93b844db-0"})(["",""],(({colorTheme:o="light",size:i="medium"})=>t(["align-items:center;background:transparent;border:none;border-radius:0;color:",";display:inline-flex;font-size:",';font-weight:500;gap:var(--spacing075);position:relative;text-align:left;word-break:keep-all;span[data-role="sort-placeholder"]{min-width:24px;:hover{border-bottom:none;}}&:hover{span:first-of-type{border-bottom:1px solid ',";}}:focus{",' border-radius:var(--borderRadius025);}span[data-component="icon"]{color:',";margin-bottom:1px;}"],"dark"===o?"var(--colorsUtilityYang100)":"var(--colorsUtilityYin090)",e[i].fontSize,"dark"===o?"var(--colorsUtilityYang100)":"var(--colorsUtilityYin090)",r(),"dark"===o?"var(--colorsActionMinorYang100)":"var(--colorActionMinor500)")));export{i as default};

package/lib/components/flat-table/sort/sort.component.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("react"),t=require("../../../__internal__/utils/helpers/events/events.js"),o=require("../../typography/typography.component.js"),l=require("./sort.style.js"),n=require("../../../__internal__/utils/helpers/guid/index.js"),s=require("../../../hooks/__internal__/useLocale/useLocale.js"),a=require("../__internal__/strict-flat-table.context.js");const i=({children:i,onClick:c,sortType:d,accessibleName:u,"data-element":p,"data-role":_})=>{const y=r.useRef(n.default()),j=s.default(),{colorTheme:x}=a.useStrictFlatTableContext();return e.jsxs(e.Fragment,{children:[e.jsx(o.Typography,{screenReaderOnly:!0,id:y.current,children:u||j.sort.accessibleName(i,d)}),e.jsxs(l.StyledSort,{role:"button",onKeyDown:e=>t.default.isEnterOrSpaceKey(e)?(e.preventDefault(),null==c?void 0:c()):null,tabIndex:0,onClick:c,sortType:d,"aria-labelledby":y.current,"data-component":"sort","data-element":p,"data-role":_,children:[i,d&&e.jsx(l.StyledSortIcon,{type:"ascending"===d?"sort_up":"sort_down",iconColor:"dark"===x?"--colorsActionMinorYang100":"--colorActionMinor500"})]}),!d&&e.jsx(l.StyledSpaceHolder,{"data-role":"sort-placeholder"})]})};exports.Sort=i,exports.default=i;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("react"),t=require("../__internal__/strict-flat-table.context.js"),s=require("../../typography/typography.component.js"),n=require("../../../__internal__/utils/helpers/events/events.js"),a=require("../../../__internal__/utils/helpers/guid/index.js"),l=require("../../../hooks/__internal__/useLocale/useLocale.js"),o=require("../../icon/icon.component.js"),i=require("./sort.style.js");const c=({children:c,onClick:u,sortType:d,accessibleName:p,"data-element":_,"data-role":j})=>{const h=r.useRef(a.default()),y=l.default(),{colorTheme:x}=t.useStrictFlatTableContext();return e.jsxs(e.Fragment,{children:[e.jsx(s.Typography,{screenReaderOnly:!0,id:h.current,children:p||y.sort.accessibleName(c,d)}),e.jsxs(i.default,{"aria-labelledby":h.current,colorTheme:x,"data-component":"sort","data-element":_,"data-role":j,onClick:u,onKeyDown:e=>n.default.isEnterOrSpaceKey(e)?(e.preventDefault(),null==u?void 0:u()):null,children:[e.jsx("span",{children:c}),d?e.jsx(o.default,{"data-element":"sort-icon",type:"ascending"===d?"sort_up":"sort_down"}):e.jsx("span",{"data-role":"sort-placeholder"})]})]})};exports.Sort=c,exports.default=c;

package/lib/components/flat-table/sort/sort.style.d.ts

@@ -1,11 +1,5 @@
-import { StyledIconProps } from "../../icon/icon.style";
-import { SortProps } from "./sort.component";
-declare const StyledSort: import("styled-components").StyledComponent<"div", any, {
-    theme: object;
-} & Pick<SortProps, "sortType">, "theme">;
-declare const StyledSpaceHolder: import("styled-components").StyledComponent<"div", any, {}, never>;
-interface StylesSortIconProps extends StyledIconProps {
-    iconColor?: string;
-}
-declare const StyledSortIcon: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../../icon").IconProps & import("react").RefAttributes<HTMLSpanElement>>, any, StylesSortIconProps, never>;
-export { StyledSort, StyledSpaceHolder, StyledSortIcon };
+declare const StyledSortButton: import("styled-components").StyledComponent<"button", any, {
+    colorTheme?: "light" | "transparent-base" | "transparent-white" | "dark";
+    size?: "compact" | "small" | "medium" | "large" | "extraLarge";
+}, never>;
+export default StyledSortButton;

package/lib/components/flat-table/sort/sort.style.js

@@ -1 +1 @@
-"use strict";var e=require("styled-components"),t=require("../../icon/icon.component.js"),o=require("../../../style/utils/add-focus-styling.js"),r=require("../../../style/themes/apply-base-theme.js");function d(e){return e&&e.__esModule?e:{default:e}}var i=d(e);const s=i.default.div.attrs(r.default).withConfig({displayName:"sort.style__StyledSort",componentId:"sc-806736b5-0"})(["display:inline-flex;align-items:center;padding-left:2px;padding-right:2px;border-bottom:1px solid transparent;position:relative;:hover{border-bottom:1px solid;cursor:pointer;}:focus{"," border-radius:var(--borderRadius025);}"],o.default()),l=i.default.div.withConfig({displayName:"sort.style__StyledSpaceHolder",componentId:"sc-806736b5-1"})(["display:inline-block;width:22px;"]),n=i.default(t.default).withConfig({displayName:"sort.style__StyledSortIcon",componentId:"sc-806736b5-2"})(["padding-left:var(--spacing075);color:",";"],(({iconColor:e})=>`var(${e})`));exports.StyledSort=s,exports.StyledSortIcon=n,exports.StyledSpaceHolder=l;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var o=require("styled-components"),e=require("../../../style/utils/add-focus-styling.js");function t(o){return o&&o.__esModule?o:{default:o}}const r={compact:{fontSize:"13px"},small:{fontSize:"14px"},medium:{fontSize:"14px"},large:{fontSize:"16px"},extraLarge:{fontSize:"16px"}},i=t(o).default.button.withConfig({displayName:"sort.style__StyledSortButton",componentId:"sc-93b844db-0"})(["",""],(({colorTheme:t="light",size:i="medium"})=>o.css(["align-items:center;background:transparent;border:none;border-radius:0;color:",";display:inline-flex;font-size:",';font-weight:500;gap:var(--spacing075);position:relative;text-align:left;word-break:keep-all;span[data-role="sort-placeholder"]{min-width:24px;:hover{border-bottom:none;}}&:hover{span:first-of-type{border-bottom:1px solid ',";}}:focus{",' border-radius:var(--borderRadius025);}span[data-component="icon"]{color:',";margin-bottom:1px;}"],"dark"===t?"var(--colorsUtilityYang100)":"var(--colorsUtilityYin090)",r[i].fontSize,"dark"===t?"var(--colorsUtilityYang100)":"var(--colorsUtilityYin090)",e.default(),"dark"===t?"var(--colorsActionMinorYang100)":"var(--colorActionMinor500)")));exports.default=i;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "158.3.0",
+  "version": "158.3.1",
   "description": "A library of reusable React components for easily building user interfaces.",
   "files": [
     "lib",